/* ==========================================================================
   be my tree — tokens.css
   1) DS 원본 토큰 (Claude Design "be my tree Design System" tokens/*.css 원문 그대로)
      colors · typography · spacing · effects  — 이름·값·주석 유지
   2) 폰트 (@font-face, 자체 호스팅)
   3) 웹 확장 (--web-*, docs/design-system.md §9)
   4) 페이지 시맨틱 별칭 (docs/improvement-plan-v2.md §1)
   5) 라이트 스코프 ([data-theme="light"] · .site-header.is-on-light · 섹션 바로가기 레일(.is-on-light)·시트)
   색·폰트·간격·radius·그림자는 이 파일의 커스텀 프로퍼티로만 사용한다.
   ========================================================================== */

/* ── 2) Fonts ──────────────────────────────────────────────────────────────
   Pretendard는 index.html에서 assets/fonts/pretendard/pretendardvariable-dynamic-subset.css로
   별도 로드(family 'Pretendard Variable'). 여기서는 선언하지 않는다. */
@font-face {
  font-family: 'Postea';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Postea-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Helvetica Extended BQ';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/HelveticaExtendedBQ-ExtraLight.woff2') format('woff2');
}

/* ── 1-a) colors.css — Every value is transcribed verbatim from 비마이트리_BI.fig. */
:root {
  /* ── Brand core (BI board 04 "Brand color") ───────────────────────── */
  --bmt-root-green: #5CAB5A;      /* Root Green   · RGB 92 171 90   · CMYK 46 0 47 33 */
  --bmt-ground-brown: #2D2A20;    /* Ground Brown · RGB 45 42 32    · CMYK 55 50 65 75 */
  --bmt-base-white: #F4F4F4;      /* Base White   · RGB 244 244 244 · CMYK 3 2 2 0 */

  /* ── Symbol gradient (the mark's three stops) ─────────────────────── */
  --bmt-leaf-deep: #41A34A;
  --bmt-leaf-mid: #95C192;
  --bmt-leaf-light: #BCD9B6;
  --bmt-gradient-symbol: linear-gradient(234.675deg, #41A34A -0.02%, #95C192 138.51%, #BCD9B6 216.43%);

  /* ── Sprout (pill gradient end stop) ─────────────────────────────── */
  --bmt-sprout: #9BD888;
  --bmt-gradient-pill: linear-gradient(154.723deg, #5CAB5A 51.17%, #9BD888 120.52%);
  --bmt-gradient-pill-wide: linear-gradient(149.505deg, #5CAB5A 51.07%, #9BD888 106.40%);

  /* ── Accent (highlighted word in recruiting hero) ────────────────── */
  --bmt-accent-lime: #F9FF9E;

  /* ── Greens used as washes / secondary fills ─────────────────────── */
  --bmt-green-soft: rgba(120,182,116,.56);
  --bmt-green-half: rgba(92,171,90,.5);
  --bmt-green-mid: #6EBD6A;

  /* ── Darks ───────────────────────────────────────────────────────── */
  --bmt-black: #000000;
  --bmt-ink-900: #1E1E1E;
  --bmt-ink-850: #202020;
  --bmt-ink-800: #242424;
  --bmt-ink-780: #262626;
  --bmt-ink-750: #313131;
  --bmt-ink-740: #323232;
  --bmt-ink-700: #323232;
  --bmt-ink-650: #3F3F3F;
  --bmt-ink-600: #444444;
  --bmt-ink-500: #676767;
  --bmt-ink-400: #7B7B7B;
  --bmt-earth-950: #24221B;       /* dark footer panel */
  --bmt-earth-900: #37342A;       /* process-step circle */
  --bmt-earth-850: #2D2A20;

  /* ── Lights ──────────────────────────────────────────────────────── */
  --bmt-white: #FFFFFF;
  --bmt-grey-050: #F5F5F5;
  --bmt-grey-075: #F4F4F4;
  --bmt-grey-100: #E7E7E7;
  --bmt-grey-150: #E6E6E6;
  --bmt-grey-200: #D9D9D9;
  --bmt-grey-300: #C1C1C1;
  --bmt-grey-350: #BCBCBC;

  /* ── Semantic aliases ────────────────────────────────────────────── */
  --text-primary: var(--bmt-black);
  --text-display: var(--bmt-ink-750);     /* Postea headings on light boards */
  --text-heading: var(--bmt-ink-900);     /* Korean sub-headings on light boards */
  --text-body: var(--bmt-ink-780);
  --text-muted: var(--bmt-ink-400);
  --text-on-dark: var(--bmt-white);
  --text-on-dark-soft: rgba(255,255,255,.8);
  --text-on-brand: var(--bmt-white);
  --text-accent: var(--bmt-accent-lime);
  --text-link: var(--bmt-root-green);
  --text-link-hover: var(--bmt-leaf-deep);

  --surface-page: var(--bmt-white);
  --surface-board: var(--bmt-grey-050);
  --surface-card: var(--bmt-grey-050);
  --surface-brand: var(--bmt-root-green);
  --surface-dark: var(--bmt-ground-brown);
  --surface-footer: var(--bmt-earth-950);
  --surface-inverse: var(--bmt-ink-850);

  --border-hairline: var(--bmt-grey-150);
  --border-swatch: var(--bmt-grey-350);
  --border-rule: var(--bmt-black);
  --border-rule-dark: var(--bmt-ink-400);
  --border-rule-light: var(--bmt-white);
  --border-guide: var(--bmt-grey-300);
}

/* ── 1-b) typography.css — Sizes are the exact values found in the .fig (unrounded). */
:root {
  /* Families — 웹 반입본 기준으로 첫 순서 조정 (design-system.md §5.1)
     'Pretendard Variable' = 자체 호스팅 dynamic subset, 'Postea' = Postea-Bold.woff2(700),
     'Helvetica Extended BQ' = HelveticaExtendedBQ-ExtraLight.woff2(200) */
  --font-display: 'Postea', 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;  /* Latin display + Postea board headings */
  --font-body: 'Pretendard Variable', 'Pretendard', 'Pretendard JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-extended: 'Helvetica Extended BQ', 'Helvetica63-ExtendedMedium', 'Helvetica53-Extended', 'Helvetica43-ExtendedLight', Archivo, 'Helvetica Neue', sans-serif;

  /* Weights actually used */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Size scale — every step is a real size from the file */
  --fs-201: 201.6666717529297px;  /* oversize outline lettering, BI board */
  --fs-148: 148.75119018554688px; /* vertical wordmark, design-concept card */
  --fs-136: 136.67236328125px;    /* cover lockup */
  --fs-120: 120px;                /* WE'RE HIRING */
  --fs-113: 113.93180847167969px; /* dark BI cover lockup */
  --fs-90: 90px;
  --fs-75: 75.38712310791016px;
  --fs-70: 70px;                  /* board section title / page display heading */
  --fs-63: 63.71186447143555px;   /* logo lockup, square cards */
  --fs-62: 62.5px;
  --fs-60: 60px;
  --fs-50: 50px;                  /* swatch name */
  --fs-45: 45px;                  /* Korean tagline */
  --fs-40: 40px;                  /* hero Korean headline */
  --fs-35: 35px;                  /* Korean board sub-title */
  --fs-33: 33px;
  --fs-31: 31.066665649414062px;  /* spec-row label */
  --fs-30: 30px;                  /* caption title */
  --fs-26-4: 26.406665802001953px;/* bullet body (light sections) */
  --fs-26-3: 26.293333053588867px;/* bullet body (dark section) */
  --fs-25: 25px;                  /* hero paragraph / card title */
  --fs-24: 24px;                  /* pill label */
  --fs-24-0: 24.039474487304688px;/* small tagline under wordmark */
  --fs-22: 22px;                  /* culture caption */
  --fs-21: 21.03531837463379px;   /* extended-face role tag */
  --fs-20: 20px;                  /* caption body */

  /* Line heights */
  --lh-flat: 1;
  --lh-tight: 1.3;
  --lh-normal: 1.4;
  --lh-loose: 1.8;

  /* Tracking */
  --ls-tightest: -0.05em;
  --ls-tighter: -0.04em;
  --ls-tight: -0.03em;
  --ls-snug: -0.02em;
  --ls-none: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.05em;

  /* Role aliases */
  --type-hero-extended: var(--fw-medium) var(--fs-120)/var(--lh-flat) var(--font-extended);
  --type-display-en: var(--fw-semibold) var(--fs-70)/var(--lh-flat) var(--font-display);
  --type-display-kr: var(--fw-bold) var(--fs-70)/var(--lh-normal) var(--font-body);
  --type-subtitle-kr: var(--fw-semibold) var(--fs-35)/var(--lh-flat) var(--font-body);
  --type-headline-kr: var(--fw-bold) var(--fs-40)/var(--lh-normal) var(--font-body);
  --type-label: var(--fw-bold) var(--fs-31)/var(--lh-normal) var(--font-body);
  --type-value: var(--fw-regular) var(--fs-26-4)/var(--lh-loose) var(--font-body);
  --type-caption-title: var(--fw-bold) var(--fs-30)/var(--lh-normal) var(--font-body);
  --type-caption-body: var(--fw-regular) var(--fs-20)/var(--lh-normal) var(--font-body);
  --type-pill: var(--fw-bold) var(--fs-24)/var(--lh-tight) var(--font-body);
  --type-tag-extended: var(--fw-light) var(--fs-21)/var(--lh-flat) var(--font-extended);
}

/* ── 1-c) spacing.css — Values transcribed from the .fig; the odd fractional numbers
   are the design's real numbers, not rounding errors. */
:root {
  /* Canvas widths the file actually uses */
  --canvas-recruit: 860px;   /* recruiting page frame */
  --canvas-board: 2560px;    /* BI guideline board frame */
  --canvas-cover: 1920px;    /* cover frame */
  --canvas-card: 1737px;     /* business-card / key-visual frame */

  /* Page gutters */
  --gutter-recruit: 79px;    /* recruiting page left/right margin (860 canvas) */
  --gutter-board: 186px;     /* BI board left margin (2560 canvas) */
  --content-recruit: 699px;  /* spec-list content width */
  --content-board: 2188px;   /* board rule width */

  /* Vertical rhythm inside spec lists */
  --gap-rule: 32.619998931884766px;    /* light spec list: rule ↔ row */
  --gap-rule-dark: 46.39999771118164px;/* dark spec list: rule ↔ row */
  --gap-label: 38.83333206176758px;    /* label ↔ value (light) */
  --gap-label-dark: 38.666664123535156px;
  --gap-bullet: 10.873332977294922px;  /* bullet ↔ text */
  --gap-list: 9.319999694824219px;     /* between bullet rows */
  --gap-list-wide: 10px;
  --gap-card-x: 9px;                   /* benefit grid column gap */
  --gap-card-y: 11px;                  /* benefit grid row gap */

  /* Fixed element sizes taken from the source */
  --size-bullet: 7.052px;             /* square bullet */
  --size-hero: 860px;                 /* green hero block is a perfect square */
  --size-benefit-card-w: 345px;
  --size-benefit-card-h: 134px;
  --size-pill-h: 58px;
  --size-pill-dot: 32px;
  --size-process: 156.213px;          /* dark circle in 전형절차 */
  --size-photo-h: 384px;
  --size-swatch: 695px;
  --size-logo-box: 520.386px;

  /* Hairline weights */
  --rule-light: 0.5px;
  --rule-mid: 0.777px;
  --rule-thin: 0.35px;

  /* Hero grid (opacity .3 white lines on the green square) */
  --hero-grid-x: 79px 312px 545px 778px;
  --hero-grid-y: 85px 432px 779px;

  /* Radii — the system is mostly SQUARE; rounding is reserved for photos and pills */
  --radius-none: 0;
  --radius-frame: 2px;
  --radius-photo: 15px;
  --radius-pill: 100px;
  --radius-round: 50%;
}

/* ── 1-d) effects.css — Shadow values are verbatim from the .fig. */
:root {
  --shadow-card: 0 4px 50px rgba(0,0,0,.1);           /* design-concept cards on the BI board */
  --shadow-bubble: 0 3.647px 36.474px rgba(0,0,0,.07);/* circular logo-motif chips */
  --shadow-none: none;

  /* Inset strokes (the file draws borders as inset shadows) */
  --stroke-hairline: inset 0 0 0 1px var(--bmt-grey-150);
  --stroke-swatch: inset 0 0 0 1px var(--bmt-grey-350);
  --stroke-logo-box: inset 0 0 0 2px var(--bmt-grey-150);
  --stroke-frame-light: inset 0 0 0 1px rgba(255,255,255,.1);

  /* Motion — the source is a static print/board system; keep transitions short and linear-ish */
  --ease-standard: cubic-bezier(.2,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* Interaction conventions (documented in readme.md § Visual foundations) */
  --hover-tint: rgba(0,0,0,.04);
  --hover-brand: var(--bmt-leaf-deep);
  --press-scale: .985;
}

/* ── 3) Web extension (--web-*) — docs/design-system.md §9
   clamp(min, 기울기vw + 절편px, max), 기울기 = (max−min)/1080×100, 360px→min · 1440px→max
   브레이크포인트(min-width만): md 768 · lg 1024 · xl 1280 — 미디어쿼리에서는 변수를 못 쓰므로 값을 직접 적는다 */
:root {
  /* Layout */
  --web-container: 1200px;
  --web-gutter: clamp(20px, 3.7vw + 6.7px, 60px);
  --web-section-y: clamp(72px, 8.15vw + 42.7px, 160px);
  --web-stack-lg: clamp(40px, 3.7vw + 26.7px, 80px);
  --web-stack-md: clamp(24px, 1.48vw + 18.7px, 40px);
  --web-stack-sm: clamp(12px, 0.74vw + 9.3px, 20px);
  --web-grid-gap: clamp(12px, 1.11vw + 8px, 24px);
  --web-measure: 42em;                                   /* 한글 본문 최대 폭 */

  /* Type scale */
  --web-fs-display: clamp(34px, 3.333vw + 22px, 70px);    /* H1 · Pretendard 700 / 1.4 / −0.04em */
  --web-fs-hero-lg: clamp(34px, 4.297vw - 2.5px, 54px);   /* HERO H1 lg↑ 2열 전용: 최장 줄(13.4em)이 2fr 열에 들어가는 크기 (1024→41.5 · 1280→52.5 · 1440↑54) */
  --web-fs-h2: clamp(28px, 2.222vw + 20px, 52px);         /* Pretendard 700 / 1.4 / −0.04em */
  --web-fs-number: clamp(56px, 5.926vw + 34.67px, 120px); /* Postea / 1 */
  --web-fs-h3: clamp(19px, 0.648vw + 16.67px, 26px);      /* Pretendard 700 / 1.4 / −0.03em */
  --web-fs-lead: clamp(17px, 0.463vw + 15.33px, 22px);    /* Pretendard 400 / 1.7 / −0.02em */
  --web-fs-body: clamp(15px, 0.278vw + 14px, 18px);       /* Pretendard 400 / 1.7 / −0.02em */
  --web-fs-eyebrow: clamp(13px, 0.463vw + 11.33px, 18px); /* Postea / 1 / +0.02em */
  --web-fs-button: clamp(16px, 0.185vw + 15.33px, 18px);  /* Pretendard 600 */
  --web-fs-small: clamp(13px, 0.093vw + 12.67px, 14px);   /* 고지·푸터 */

  --web-lh-body: 1.7;                                     /* 웹 가독성용 본문 행간 (DS 1.4 → 1.7) */

  /* Button (design-system.md §8) */
  --web-btn-h: clamp(48px, 1.111vw + 44px, 60px);
  --web-btn-px: clamp(20px, 1.111vw + 16px, 32px);

  /* Components */
  --web-card-p: clamp(20px, 1.48vw + 14.7px, 36px);      /* 벤토 셀 안쪽 여백 */
  --web-step-size: clamp(56px, 2.963vw + 45.33px, 88px); /* 원형 단계 표시 (DS ProcessStep 156.213 @860 축소) */
  /* 정사각 마커 — DS BulletItem 비율(7.052px · 간격 10.873px · 상단 0.72em @ 26.4px)을 em으로 환산 */
  --web-bullet-size: 0.267em;
  --web-bullet-gap: 0.412em;
  --web-bullet-top: 0.72em;

  /* 모바일(<768) 05 funnel · 10 group: 섹션 헤더와 카드 목록 사이 씬 창 높이 */
  --web-scene-window: 40vh;
}
@supports (height: 1svh) {
  :root { --web-scene-window: 40svh; }
}

/* ── 4) Page semantic aliases — docs/improvement-plan-v2.md §1 (implementation-plan.md §2 대체)
   지하(dark, 기본) = 한 단계 밝힌 브라운 · 지상(light) = section[data-theme="light"]
   대비(다크): 흰색 on #3F3B30 11.17 / #4A4639 9.43 / #37342A 12.45
              --text-accent-dark on #3F3B30 5.49 / #4A4639 4.64 / #37342A 6.12
              --text-soft(흰 80%) on #3F3B30 7.84 / #4A4639 6.75 / #37342A 8.57
   Root Green은 면·막대·마커·버튼 전용 — 어느 톤에서도 작은 글씨 색으로 쓰지 않는다 */
:root {
  --page-bg: #3F3B30;                          /* 지하 바탕 (기존 #24221B 교체) */
  --panel-bg: #4A4639;                         /* 카드·패널 면 (기존 #2D2A20 교체) */
  --footer-bg: var(--bmt-earth-900);           /* #37342A 페이지 최하단 */
  --panel-stroke: var(--stroke-frame-light);   /* 패널 1px 테두리 */
  --text: var(--text-on-dark);                 /* #FFFFFF */
  --text-soft: var(--text-on-dark-soft);       /* rgba(255,255,255,.8) */
  --text-accent-dark: var(--bmt-leaf-mid);     /* #95C192 다크 면 위 초록 글씨 전용 */
  --text-emphasis: var(--text-accent-dark);    /* eyebrow·강조어·case 라벨 */
  --text-on-green: var(--bmt-ground-brown);    /* Root Green 면 위 글씨 5.07 */
  --line-dark: var(--border-rule-dark);        /* #7B7B7B 0.7px 괘선 (장식) */
  --line-dark-w: 0.7px;
  --line-soft: rgba(255,255,255,.4);           /* secondary 버튼 테두리 · 3.20(#3F3B30) ≥ 3:1 */
  --stroke-accent: inset 0 0 0 1px var(--bmt-root-green); /* 카드 hover */
  --focus-ring: var(--bmt-white);              /* 다크·그린 면 공통, 3:1 이상 */
  --focus-ring-w: 2px;
  --focus-ring-offset: 3px;
  /* 섹션 바로가기: Ground Brown 필(라벨·버튼) 가장자리 · 목록 시트 뒤 막(블러 없음, Earth 950 64%) */
  --nav-pill-stroke: inset 0 0 0 1px rgba(255,255,255,.16);
  --nav-pill-soft: rgba(255,255,255,.72);
  --scrim: rgba(36,34,27,.64);
  /* 09-2 지역 분포 타일 — Root Green 한 색의 3단계 (바탕과 혼합한 불투명 면). 흰 글씨 대비: 2단계 5.29 · 1단계 7.30 */
  --reach-fill-3: var(--bmt-root-green);                                         /* + Ground Brown 글씨 5.07 */
  --reach-fill-2: color-mix(in srgb, var(--bmt-root-green) 52%, var(--page-bg));        /* #4E7546 */
  --reach-fill-1: color-mix(in srgb, var(--bmt-root-green) 30%, var(--page-bg));        /* #48573D */

  /* 지상(light) 원천값 */
  --light-bg: var(--bmt-base-white);           /* #F4F4F4 */
  --light-panel: var(--bmt-white);             /* #FFFFFF + --stroke-hairline */
  --light-text: var(--bmt-ground-brown);       /* #2D2A20 · on #F4F4F4 13.05 / #FFF 14.35 */
  --light-text-soft: var(--bmt-ink-500);       /* #676767 · on #F4F4F4 5.14 / #FFF 5.66 */
}

/* ── 5) Light scope — 지상 섹션과 그 위에 걸린 헤더(.is-on-light, 작업 K가 부여)
   시맨틱 별칭만 다시 매핑해 컴포넌트가 그대로 라이트 규칙을 따르게 한다. */
[data-theme="light"],
.site-header.is-on-light,
.section-nav__rail.is-on-light,
.section-nav__sheet {
  --panel-bg: var(--light-panel);
  --panel-stroke: var(--stroke-hairline);
  --text: var(--light-text);
  --text-soft: var(--light-text-soft);
  --text-emphasis: var(--light-text);          /* 라이트 면 eyebrow = Ground Brown + Root Green 정사각 마커 */
  --line-dark: var(--border-hairline);         /* #E6E6E6 (장식 괘선) */
  --line-soft: var(--light-text-soft);         /* 테두리 5.14 */
  --focus-ring: var(--light-text);             /* 13.05 */
  color-scheme: light;
}