/* =========================================================================
   SEJONG GUGAK — design tokens
   Ink-on-hanji with dancheong accents. See README.md for the full system.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------------- COLORS ---------------- */

  /* Ink & hanji — the primary page surface */
  --ink:            #1A1614;   /* near-black, warm */
  --ink-soft:       #2B2623;
  --hanji:          #F6F1E8;   /* warm cream, default background */
  --hanji-deep:     #ECE4D1;   /* subtle card background */
  --paper:          #FBF8F2;   /* highest-contrast surface (still not pure white) */

  /* Dancheong accents — Korean temple palette */
  --dancheong-red:      #B8342A;   /* 주홍, primary accent */
  --dancheong-red-dark: #8E2520;
  --dancheong-red-soft: #F2D7D3;   /* tint for badges */
  --dancheong-blue:     #1F4B44;   /* 청록, secondary accent */
  --dancheong-blue-dark:#143230;
  --dancheong-blue-soft:#CFDCD8;
  --geumbak-gold:       #B8894B;   /* 금박, premium series */
  --geumbak-gold-soft:  #EDE0C9;

  /* Stone neutrals — 5-step ramp hanji → ink */
  --stone-50:       #F6F1E8;
  --stone-100:      #E9E2D3;
  --stone-200:      #C9C0AD;
  --stone-300:      #8E8778;
  --stone-400:      #5A544B;
  --stone-500:      #1A1614;

  /* Semantic */
  --success: #5F8A6B;   /* 청자 celadon */
  --warning: #D49A3B;   /* 사프란 saffron */
  --danger:  #B8342A;   /* same as dancheong-red */
  --info:    #1F4B44;   /* same as dancheong-blue */

  /* Foreground / background semantic */
  --fg1:    var(--ink);
  --fg2:    var(--stone-400);
  --fg3:    var(--stone-300);
  --fg-on-ink:    var(--hanji);
  --fg-accent:    var(--dancheong-red);
  --bg1:    var(--hanji);
  --bg2:    var(--hanji-deep);
  --bg3:    var(--paper);
  --bg-ink: var(--ink);

  --border-hairline: rgba(26, 22, 20, 0.12);
  --border-strong:   rgba(26, 22, 20, 0.88);
  --border-on-ink:   rgba(246, 241, 232, 0.18);

  /* ---------------- TYPOGRAPHY ---------------- */

  --font-serif-kr:   'Nanum Myeongjo', 'Noto Serif KR', serif;
  --font-sans-kr:    'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-serif-en:   'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans-en:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:       'IBM Plex Mono', ui-monospace, monospace;

  /* Sizes — v2.7.1 (2026-04-26) 추가 가독성 상향 (장모님 피드백 — 100%에서도 작음)
     모든 본문 +1~2px 추가. 12px 자체 제거 (최소 14px).
     제목(32 이상)은 이미 충분하므로 유지. */
  --size-12:  14px;  /* was 13 — 작은 라벨/메타 (12→14, +2px) */
  --size-14:  17px;  /* was 16 — 보조 본문 */
  --size-16:  18px;  /* was 17 — 본문 기본 */
  --size-18:  19px;  /* new — 본문 강조 */
  --size-20:  22px;  /* was 21 — 리드 문단 */
  --size-24:  27px;  /* was 26 */
  --size-32:  36px;  /* was 34 */
  --size-44:  46px;  /* was 44 */
  --size-60:  60px;  /* 유지 */
  --size-80:  80px;  /* 유지 */
  --size-108: 108px; /* 유지 */

  /* Leading */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-loose:   1.75;

  /* Tracking */
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.08em;
  --track-wider:  0.14em;   /* for small-caps Latin eyebrows */

  /* ---------------- SPACING (8-pt) ---------------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------------- RADII ---------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-pill: 9999px;

  /* ---------------- SHADOWS ---------------- */
  --shadow-sm: 0 1px 2px rgba(26, 22, 20, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(26, 22, 20, 0.18);

  /* ---------------- MOTION ---------------- */
  --ease-gentle: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:   180ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;

  /* ---------------- LAYOUT ---------------- */
  --max-w:        1280px;
  --header-h-desktop: 74px;
  --header-h-mobile:  56px;
  --gutter:       24px;
}

/* =========================================================================
   Semantic TYPE classes — use these, don't re-invent
   ========================================================================= */

.h-display {
  font-family: var(--font-serif-kr);
  font-weight: 800;
  font-size: var(--size-108);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  word-break: keep-all;
}
.h1 {
  font-family: var(--font-serif-kr);
  font-weight: 800;
  font-size: var(--size-80);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  word-break: keep-all;
}
.h2 {
  font-family: var(--font-serif-kr);
  font-weight: 700;
  font-size: var(--size-60);
  line-height: var(--lh-tight);
  color: var(--fg1);
  word-break: keep-all;
}
.h3 {
  font-family: var(--font-serif-kr);
  font-weight: 700;
  font-size: var(--size-44);
  line-height: var(--lh-snug);
  color: var(--fg1);
  word-break: keep-all;
}
.h4 {
  font-family: var(--font-sans-kr);
  font-weight: 700;
  font-size: var(--size-32);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.h5 {
  font-family: var(--font-sans-kr);
  font-weight: 700;
  font-size: var(--size-24);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.h6 {
  font-family: var(--font-sans-kr);
  font-weight: 700;
  font-size: var(--size-20);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.eyebrow {
  font-family: var(--font-sans-en);
  font-weight: 600;
  font-size: var(--size-12);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--dancheong-red);
}
.eyebrow-kr {
  font-family: var(--font-sans-kr);
  font-weight: 500;
  font-size: var(--size-14);
  letter-spacing: var(--track-wide);
  color: var(--dancheong-red);
}

.p-lead {
  font-family: var(--font-sans-kr);
  font-weight: 400;
  font-size: var(--size-20);
  line-height: var(--lh-loose);
  color: var(--fg1);
  word-break: keep-all;
}
.p {
  font-family: var(--font-sans-kr);
  font-weight: 400;
  font-size: var(--size-16);
  line-height: var(--lh-loose);
  color: var(--fg1);
  word-break: keep-all;
}
.p-sm {
  font-family: var(--font-sans-kr);
  font-weight: 400;
  font-size: var(--size-14);
  line-height: var(--lh-normal);
  color: var(--fg2);
  word-break: keep-all;
}
.caption {
  font-family: var(--font-sans-kr);
  font-weight: 400;
  font-size: var(--size-12);
  line-height: var(--lh-normal);
  color: var(--fg3);
}
.meta-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-12);
  letter-spacing: var(--track-normal);
  color: var(--fg2);
}
.code {
  font-family: var(--font-mono);
  font-size: var(--size-14);
  color: var(--fg1);
}

/* =========================================================================
   v2.6.1 — 기본 가독성 상향 (전역 폴백)
   - 인라인 style이나 독립 <style> 블록에서 선언하지 않은 모든 텍스트의 최소치를 보장.
   - 연령대 있는 사용자 타깃 — body 16px → 17px, line-height 강화.
   ========================================================================= */
/* v2.7.1 — 장모님 피드백: 모든 페이지 폰트 추가 상향 */
html { font-size: 18px; }
body {
  font-family: var(--font-sans-kr);
  font-size: 18px;
  line-height: 1.8;
  color: var(--fg1);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

p { font-size: 18px; line-height: 1.9; word-break: keep-all; }

/* 인라인 style 작은 폰트 강제 상향 (광범위 보강) */
[style*="font-size:10px"], [style*="font-size: 10px"] { font-size: 13px !important; }
[style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 14px !important; }
[style*="font-size:12px"], [style*="font-size: 12px"] { font-size: 14px !important; }
[style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 15px !important; }
[style*="font-size:14px"], [style*="font-size: 14px"] { font-size: 16px !important; }

/* 메타 / 캡션 / 코드 / 영문 메타 */
.meta-mono, .caption, .eb, .crumb, .lbl, .lb, .l, .tag, .perf-n, .nl .d,
.sl, .ty, .stamp, .num.k, .perf-meta span, .yr, .han, .en,
.ftr-grid .col h4, .pin .ty, .pin .stamp { font-size: 14px !important; letter-spacing: 0.06em; }

/* 본문/카드 텍스트 광범위 강화 */
.perf-sub, .feature .desc, .nl .tt, .desc, .sub, .lede, .body, .dsc, .psub,
.bio, .greet-main .body, .career .txt, .heritage .txt,
.evt-row .meta, .pin .dsc, .feature h3 small, .qc .lft .n small,
.fld label, .nav a, .util .t,
.hero-poster .psub, .hero-poster .prow .date,
.season .desc, .philos-main .body p,
.notice-row .notice-title, .arr-card .info,
.list .row .ti h4, .list .row .cat, .list .row .date {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* 약력 라벨 (about.html) — 좌측 회색 작은 라벨이 너무 작다는 피드백 반영 */
.career-row .lbl, .heritage-row .lbl, .info-list .ir .k,
.q-item .lbl, [class*="-row"] [class*="lbl"] { font-size: 14px !important; }

/* 모바일 — 16px 이상 보장 */
@media (max-width: 640px) {
  html { font-size: 17px; }
  body { font-size: 17px; line-height: 1.78; }
  .meta-mono, .caption { font-size: 14px !important; }
  .p-sm { font-size: 16px !important; }
  .p { font-size: 17px !important; }
  .p-lead { font-size: 19px !important; }
}

@media (max-width: 380px) {
  html { font-size: 16.5px; }
  body { font-size: 16.5px; }
}