/* 폰트 로딩 + 리셋 + 타이포 스케일 (인벤토리 §3) — 색상은 전부 var(--color-…)만 사용한다 */

@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-ko.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F,
                 U+D7B0-D7FF, U+FF01-FF60;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: 'Noto Sans KR', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
/* main을 남은 공간만큼 늘려 footer를 항상 뷰포트 하단(또는 그 아래)에 붙인다.
   flex-basis:0(=flex:1)이라도 min-height:auto 기본값 때문에 콘텐츠가 뷰포트보다 길면
   그 실제 높이로 렌더돼 다른 7페이지(Home 2919 등)엔 영향이 없다 — 404처럼 콘텐츠가
   짧은 페이지에서만 footer 위 여백을 흡수한다(Task 14 §6). */
main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

/* 강조 세그먼트 — 인벤토리 §7 */
.accent-warm  { color: var(--color-accent-warm); }
.accent-muted { color: var(--color-accent-default); }

/* 접근성 */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--space-sm); background: var(--color-bg-elevated);
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--color-accent-warm); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 타이포 스케일 (인벤토리 §3) ───────────────────────────────
   .t-serif-* = DM Serif Display / .t-sans-* = Noto Sans KR
   숫자는 데스크톱(1440px) px 기준. 모바일(375px) 값은 clamp 하한/상한.
   clamp() 계산: slope = (d - m) / (1440 - 375); yIntersect = m - slope * 375
   d < m인 클래스(.t-body-14)는 min/max 순서를 뒤집는다 — clamp(min, pref, max)는 min ≤ max 필수. */
.t-serif-94 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(42px, 23.69px + 4.883vw, 94px); line-height: 1.1; }
.t-serif-80 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(40px, 25.92px + 3.756vw, 80px); line-height: 1.05; letter-spacing: -0.01em; }
.t-serif-72 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(42px, 31.44px + 2.817vw, 72px); line-height: 1.1; }
/* 모바일 하한 40 변형 — 페이지 히어로 H1은 대부분 42(Home/Work/Careers)지만 About만
   40(69:173 실측). 같은 상황이 다른 페이지에도 생기면 이 모디파이어를 재사용한다. */
.t-serif-72--40 { font-size: clamp(40px, 28.73px + 3.005vw, 72px); }
.t-serif-56 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 20.85px + 2.441vw, 56px); line-height: 1.1; }
/* 모바일 하한 32 변형 — CTA 제목은 대부분 30(Home/Careers)지만 About만 32(69:253 실측) */
.t-serif-56--32 { font-size: clamp(32px, 23.55px + 2.254vw, 56px); }
.t-serif-52 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 27.66px + 1.690vw, 52px); line-height: 1.1; }
.t-serif-48 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(32px, 26.37px + 1.502vw, 48px); line-height: 1.15; }
.t-serif-44 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 25.07px + 1.315vw, 44px); line-height: 1.1; }
.t-serif-40i { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-style: italic; font-size: clamp(28px, 23.77px + 1.127vw, 40px); line-height: 1.25; }
.t-serif-40 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 26.48px + 0.939vw, 40px); }
.t-serif-30 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(20px, 16.48px + 0.939vw, 30px); }
.t-serif-26 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(20px, 17.89px + 0.563vw, 26px); line-height: 1.2; }
/* 모바일이 데스크톱보다 큰 역순 변형(32→26) — 조직도 카드 제목 전용(254:115 등 26/115%
   vs 254:151 등 32/115% 실측). d<m 역순 clamp(.t-body-13/14 패턴과 동일 계산). */
.t-serif-26--32 { font-size: clamp(26px, 34.11px - 0.563vw, 32px); line-height: 1.15; }
.t-serif-24 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(20px, 18.59px + 0.376vw, 24px); line-height: 1.2; }
/* 모바일 하한 22 변형 — About Process/Careers Loop 스텝 제목(69:220 "Define" 등,
   92:123/96:121)은 공용 .t-serif-24의 모바일 하한 20이 아니라 22 실측 */
.t-serif-24--22 { font-size: clamp(22px, 21.30px + 0.188vw, 24px); }
/* 모바일 하한 22 변형 — 상세 디자인노트 인용문(41:69/71:167 등)은 공용 .t-serif-26의
   모바일 하한 20이 아니라 22 실측 */
/* 상세 페이지 DESIGN NOTE 전용 — 공용 .t-serif-26(120%)과 달리 행간 130%
   (41:69/71:167 실측, 인벤토리 §3의 "디자인노트 26/130%"와도 일치) */
.t-serif-26--22 { font-size: clamp(22px, 20.59px + 0.376vw, 26px); line-height: 1.3; }
.t-serif-22 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(20px, 19.30px + 0.188vw, 22px); line-height: 1.3; }
.t-serif-20 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(18px, 17.30px + 0.188vw, 20px); line-height: 1.3; }
.t-ghost { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(64px, 49.92px + 3.756vw, 104px); line-height: 1;
  color: var(--color-border-default); }

.t-body-20 { font-size: clamp(17px, 15.94px + 0.282vw, 20px); line-height: 1.6; }
.t-body-17 { font-size: clamp(16px, 15.65px + 0.094vw, 17px); line-height: 1.6; }
/* 줄높이 170% 변형 — Work 히어로 서브(35:42/70:126)는 160%가 아니라 170% 실측
   (공용 .t-body-17은 상세 스탠드퍼스트 160%가 기본값이라 별도 분리) */
.t-body-17--170 { line-height: 1.7; }
.t-body-16 { font-size: 16px; line-height: 1.7; }
.t-body-15 { font-size: clamp(15px, 15px + 0vw, 15px); line-height: 1.6; }
/* 모바일 하한 14 변형 — Work 역량카드 본문/Work 카드 서브(37:41·38:44 등) 모바일 실측은
   14, 공용 .t-body-15는 고정 15라 재사용 불가(70:153 등 실측) */
.t-body-15--14 { font-size: clamp(14px, 13.65px + 0.094vw, 15px); }
.t-body-14 { font-size: clamp(14px, 16.70px + -0.188vw, 16px); line-height: 1.7; }
/* d < m(모바일 14 > 데스크톱 13) — clamp(min,val,max)는 min≤max 필수라 순서 반전(69:221 실측) */
.t-body-13 { font-size: clamp(13px, 14.352px - 0.094vw, 14px); line-height: 1.7; }
.t-intro   { font-weight: 700; font-size: clamp(20px, 18.59px + 0.376vw, 24px); line-height: 1.5; }

.t-nav     { font-weight: 500; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.t-btn     { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.t-label   { font-weight: 700; font-size: clamp(11px, 10.65px + 0.094vw, 12px); line-height: 13px;
             letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.t-eyebrow { font-size: clamp(11px, 10.30px + 0.188vw, 13px); letter-spacing: 0.08em; }
/* 모바일에서도 축소하지 않는 변형 — About 인용 출처는 13px 고정(69:236 실측, 다른
   eyebrow 인스턴스는 검증 전이라 공용 .t-eyebrow는 그대로 두고 모디파이어로 분리) */
.t-eyebrow--flat { font-size: 13px; }
/* 모바일 하한 12 변형 — Work 히어로/Capabilities eyebrow(35:40·38:40·70:124·70:150)
   모바일 실측은 12, 공용 .t-eyebrow 하한(11)과 달라 분리(다른 인스턴스는 검증 전) */
.t-eyebrow--12 { font-size: clamp(12px, 11.65px + 0.094vw, 13px); }
.t-caption { font-size: clamp(11px, 10.65px + 0.094vw, 12px); line-height: 13px; letter-spacing: 0.08em; }
.t-tab     { font-size: 13px; letter-spacing: 0.04em; }
/* 모바일(375)은 11px 폰트 → AUTO 라인박스 13px(Figma 노드 69:124/135/149 실측),
   데스크톱(1440)은 12px 폰트 → AUTO 라인박스 14px. 1024px에서 전환(레이아웃 브레이크포인트와 통일). */
@media (min-width: 1024px) {
  .t-label, .t-caption { line-height: 14px; }
}

.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }