/* EO Planet system: spacing scale and type roles (ATF 2). Loaded after style.css, before planet-dark.css.
   Spacing follows a 6px rhythm; --gap-4 and --gap-8 are for inside components only (icon gaps, chips).
   Type roles are Pretendard, weights 400 and 500 only. */
:root {
  --sp-0: 3px;
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 24px;
  --sp-5: 30px;
  --sp-6: 36px;
  --sp-8: 48px;
  --sp-12: 72px;
  --sp-20: 120px;
  --gap-4: 4px;
  --gap-8: 8px;

  --fs-h0: 40px;     --lh-h0: 48px;     --ls-h0: -0.02em;
  --fs-h1: 32px;     --lh-h1: 40px;     --ls-h1: -0.015em;
  --fs-h2: 24px;     --lh-h2: 32px;     --ls-h2: -0.01em;
  --fs-h3: 20px;     --lh-h3: 28px;     --ls-h3: -0.005em;
  --fs-t1: 18px;     --lh-t1: 28px;
  --fs-body: 16px;   --lh-body: 26px;
  --fs-body-s: 14px; --lh-body-s: 22px;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-label: 14px;  --lh-label: 14px;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Layout rhythm (one rule set; components below use only these) */
  --card-pad: 18px;      /* every boxed card / panel: equal on all four sides */
  --card-pad-s: 12px;    /* compact items: menu rows, chips groups, composer */
  --card-gap: 18px;      /* between boxed cards in a list */
  --grid-gap: 24px;      /* between cards in a multi-column grid (18 on phones) */
  --stack-s: 6px;        /* tight pairs: name/meta, icon/label row */
  --stack-m: 12px;       /* inside a card: title/body, body/actions */
  --stack-l: 18px;       /* groups inside a card */
  --heading-gap: 18px;   /* section heading to its content */
  --section-gap: 72px;   /* section to section (48 on phones) */
  --page-top: 36px;
  --page-bottom: 72px;

  /* Control sizes */
  --ctl-sm: 36px;
  --ctl-md: 42px;
  --ctl-lg: 48px;

  /* Contrast roles: control edges need 3:1 on gray-6/gray-5 (Medium Gray 5.7 / 5.1);
     meta text on raised surfaces (gray-3/gray-4) uses gray-2-light (5.8+) */
  --eo-border-control: var(--eo-gray-1-dark);
  --eo-text-on-raised: var(--eo-gray-2-light);

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-pill: 999px;
}

.t-h0 { font-size: var(--fs-h0); line-height: var(--lh-h0); letter-spacing: var(--ls-h0); font-weight: var(--fw-medium); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-medium); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-medium); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-medium); }
.t-t1 { font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: var(--fw-regular); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.t-body-s { font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: var(--fw-regular); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-regular); }
.t-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-medium); }

/* Weights 400/500 only, site-wide. Low specificity: component rules still win. */
b, strong, .font-weight-bold, .font-weight-bolder, .fw-bold, .fw-bolder, .fw-semibold, th, h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-medium);
}
html body .font-weight-bold,
html body .font-weight-bolder,
html body .fw-bold,
html body .fw-bolder,
html body .fw-semibold {
  font-weight: var(--fw-medium) !important;
}

/* Article body headings: scoped roles. Tracking is carried by the role, body keeps Pretendard default. */
.ckeditor-container h2 { font-size: var(--fs-h2); line-height: var(--lh-h2) !important; letter-spacing: var(--ls-h2); }
.ckeditor-container h3 { font-size: var(--fs-h3); line-height: var(--lh-h3) !important; letter-spacing: var(--ls-h3); }
.ckeditor-container h4 { font-size: var(--fs-t1); line-height: var(--lh-t1) !important; }
.ckeditor-container h2,
.ckeditor-container h3,
.ckeditor-container h4 {
  color: var(--eo-text);
  font-weight: var(--fw-medium);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

@media (max-width: 767px) {
  :root {
    --grid-gap: 18px;
    --section-gap: 48px;
  }
}

/* Korean wraps at word boundaries site-wide; anywhere keeps long URLs and IDs from overflowing */
html body {
  word-break: keep-all;
  overflow-wrap: anywhere;
}