/* ==========================================================================
   typography.css — 우리 사이트 공통 타이포 표준 (2026-10)
   근거·결정 이유: 타이포_세계기준_2026.md  /  적용 확인: 적용_점검표.md + measure_typo.py

   쓰는 법
   1) <head> 에 폰트 CDN 한 줄 + 이 파일:
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
        <link rel="stylesheet" href="/typography.css">
   2) <html lang="ko" data-age="mz|mid|senior"> 로 연령 프로필을 고른다(없으면 mz 값).
   3) 사이트마다 바꾸는 건 맨 아래 「사이트 덮어쓰기」 칸의 --brand 계열뿐.
   4) 「큰 글씨」 토글은 <html data-text="lg|xl"> — 맨 아래 예시 스크립트.

   규칙 요약 (값은 이 파일의 토큰만 쓴다. 토큰 밖 font-size·letter-spacing 금지)
   - 크기: 한 프로필 안에서 5단계 + 히어로 1개.   cap · body · lead · h2 · h1 (+ display)
   - 굵기: 400 · 600 · 700 (senior 는 본문 500)
   - 자간: 0 · -0.02em(28px 이상 제목만, senior 는 쓰지 않음) · +0.08em(영문 대문자 라벨만)
   - 행간: tight · snug · body · long 네 개
   ========================================================================== */

/* ---------- 1. 기본 토큰 (= mz 프로필) ---------- */
:root {
  /* 글꼴: 한·영·숫자 하나로. 폰트 파일은 CDN 링크만 쓴다 */
  --ff: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 큰 글씨 배율 (손님 토글). 모든 크기 토큰이 이 값을 곱한다 */
  --fs-scale: 1;

  /* 크기 원값 (390px → 1440px 사이 유동, 식은 Utopia 방식: 최소 + 기울기·vw) */
  --fs-cap-raw:     0.8125rem;                                         /* 13 */
  --fs-body-raw:    0.9375rem;                                         /* 15 */
  --fs-lead-raw:    1.0625rem;                                         /* 17 — 긴 글 본문·h3·강조 숫자 */
  --fs-h2-raw:      clamp(1.25rem, 1.1571rem + 0.3810vw, 1.5rem);      /* 20 → 24 */
  --fs-h1-raw:      clamp(1.75rem, 1.5643rem + 0.7619vw, 2.25rem);     /* 28 → 36 */
  --fs-display-raw: clamp(2.25rem, 1.7857rem + 1.9048vw, 3.5rem);      /* 36 → 56, 히어로 한 줄만 */

  /* 굵기 */
  --fw-body: 400;
  --fw-strong: 600;
  --fw-bold: 700;

  /* 행간 (배율) */
  --lh-tight: 1.2;    /* 24px 이상 제목 */
  --lh-snug: 1.4;     /* 한 줄짜리 UI 글·캡션·단추·표 칸·h3 */
  --lh-body: 1.6;     /* 화면 본문 */
  --lh-long: 1.7;     /* 3줄 넘는 긴 글(설명·약관·기사) */

  /* 자간 — 세 값뿐 */
  --ls-0: 0;
  --ls-title: -0.02em;   /* 28px 이상 제목 (h1·display) */
  --ls-caps: 0.08em;     /* 영문 대문자 라벨 (한글에 넓은 자간 금지) */

  /* 줄 길이·간격 */
  --measure: 32em;       /* 공백 뺀 한글 30~34자. Pretendard 한글 한 자 = 0.98em(실측) */
  --para-gap: 0.75em;    /* 문단 사이(들여쓰기 안 쓸 때) */
  --indent: 1em;         /* 첫 줄 들여쓰기(긴 글 전용) */
  --hang: 1.25em;        /* 내어쓰기(※·주석·각주) */

  /* 색 (흰 바탕 #FFF 기준 대비, 괄호 = #F5F5F7 회색 면 위) */
  --bg: #FFFFFF;
  --surface: #F5F5F7;
  --text-1: #1D1D1F;     /* 본문·제목   16.83:1 (15.46) · APCA Lc 104 */
  --text-2: #5C5C61;     /* 보조         6.65:1 (6.11)  · Lc 83 — 회색 면 위에서도 AA */
  --text-3: #6E6E73;     /* 약함·메타    5.07:1 (4.66)  · Lc 75 — 흰 바탕 전용 */
  --text-disabled: #A1A1A6; /* 비활성     2.57:1 — 대비 예외(WCAG 1.4.3), 글로 상태도 함께 */
  --line: #E5E5EA;

  /* 사이트 덮어쓰기 대상 */
  --brand: #1E4FD8;      /* 6.63:1 (6.09) */
  --link: var(--brand);
  --danger: #B42318;     /* 6.57:1 */
  --on-brand: #FFFFFF;

  /* 터치 영역 */
  --touch: 44px;

  /* 최종 크기 = 원값 × 배율 */
  --fs-cap: calc(var(--fs-cap-raw) * var(--fs-scale));
  --fs-body: calc(var(--fs-body-raw) * var(--fs-scale));
  --fs-lead: calc(var(--fs-lead-raw) * var(--fs-scale));
  --fs-h2: calc(var(--fs-h2-raw) * var(--fs-scale));
  --fs-h1: calc(var(--fs-h1-raw) * var(--fs-scale));
  --fs-display: calc(var(--fs-display-raw) * var(--fs-scale));
}

/* ---------- 2. 연령 프로필 덮어쓰기 ---------- */
/* 중장년 40~64: 노안 시작(40대) → 본문 17(KRDS·iOS 기본과 같음), 보조색 7:1 근처 */
:root[data-age="mid"] {
  --fs-cap-raw: 0.875rem;                                          /* 14 */
  --fs-body-raw: 1.0625rem;                                        /* 17 */
  --fs-lead-raw: 1.1875rem;                                        /* 19 */
  --fs-h2-raw: clamp(1.375rem, 1.2821rem + 0.3810vw, 1.625rem);    /* 22 → 26 */
  --fs-h1-raw: clamp(1.75rem, 1.5643rem + 0.7619vw, 2.25rem);      /* 28 → 36 */
  --fs-display-raw: clamp(2.25rem, 1.8786rem + 1.5238vw, 3.25rem); /* 36 → 52 */
  --lh-tight: 1.25; --lh-snug: 1.45; --lh-body: 1.65; --lh-long: 1.75;
  --text-2: #515154;   /* 7.91:1 (7.26) */
  --text-3: #5C5C61;   /* 6.65:1 (6.11) */
  --touch: 48px;
}
/* 노년 65+: 본문 19~20(서울디지털재단 고령층 표준 14pt≈18.7px 이상), 모든 글 7:1, 음수 자간 없음, 본문 500 */
:root[data-age="senior"] {
  --fs-cap-raw: 1rem;                                              /* 16 — 이보다 작은 글 없음 */
  --fs-body-raw: clamp(1.1875rem, 1.1643rem + 0.0952vw, 1.25rem);  /* 19 → 20 */
  --fs-lead-raw: 1.375rem;                                         /* 22 */
  --fs-h2-raw: clamp(1.5rem, 1.4071rem + 0.3810vw, 1.75rem);       /* 24 → 28 */
  --fs-h1-raw: clamp(1.875rem, 1.6893rem + 0.7619vw, 2.375rem);    /* 30 → 38 */
  --fs-display-raw: clamp(2.25rem, 1.9714rem + 1.1429vw, 3rem);    /* 36 → 48 */
  --fw-body: 500;
  --lh-tight: 1.3; --lh-snug: 1.5; --lh-body: 1.7; --lh-long: 1.8;
  --ls-title: 0;
  --text-1: #111111;   /* 18.88:1 */
  --text-2: #3A3A3C;   /* 11.35:1 (10.42) */
  --text-3: #515154;   /* 7.91:1 (7.26) */
  --text-disabled: #6E6E73; /* 5.07:1 — 노년은 비활성도 읽혀야 한다. 상태는 글로 함께 */
  --touch: 48px;
  --para-gap: 1em;
  /* 노년은 글자색으로 쓰는 강조색도 7:1. 사이트 --brand 가 7:1 미만이면 글자에는 이 값을 쓴다 */
  --brand: #1A47C4;    /* 7.66:1 (7.03) */
  --danger: #A11D14;   /* 7.77:1 (7.14) */
}

/* 큰 글씨 토글 (손님이 켬). 프로필 위에 한 번 더 곱한다 */
:root[data-text="lg"] { --fs-scale: 1.2; }
:root[data-text="xl"] { --fs-scale: 1.4; }

/* 다크 모드 (사이트가 다크를 지원할 때만 html 에 data-theme 를 달거나 시스템 설정을 따른다) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111; --surface: #1C1C1E; --line: #2C2C2E;
    --text-1: #F5F5F7;  /* 17.34:1 */
    --text-2: #AEAEB2;  /* 8.54:1 */
    --text-3: #98989D;  /* 6.58:1 */
    --text-disabled: #6E6E73;
    --link: #7AA2FF;    /* 7.59:1 */
  }
  :root[data-age="senior"]:not([data-theme="light"]) { --text-2: #D1D1D6; --text-3: #AEAEB2; }
}
:root[data-theme="dark"] {
  --bg: #111111; --surface: #1C1C1E; --line: #2C2C2E;
  --text-1: #F5F5F7; --text-2: #AEAEB2; --text-3: #98989D; --text-disabled: #6E6E73; --link: #7AA2FF;
}
:root[data-theme="dark"][data-age="senior"] { --text-2: #D1D1D6; --text-3: #AEAEB2; }

/* ---------- 3. 바탕 ---------- */
html {
  -webkit-text-size-adjust: 100%;   /* 폰 가로 돌림 때 글자 멋대로 커짐 막기(사용자 확대는 그대로) */
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-0);
  word-break: keep-all;              /* 한글은 어절 단위로만 줄바꿈 */
  overflow-wrap: break-word;         /* 칸보다 긴 URL·영문만 예외로 끊음 */
  font-optical-sizing: auto;
  font-synthesis: none;              /* 없는 굵기·기울기를 가짜로 만들지 않음 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-autospace: no-autospace;      /* 한글↔영문·숫자 사이 자동 1/8em 끼움 끔 (「갤럭시S26」 모양 유지) */
}

/* ---------- 4. 제목 ---------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-1);
  font-weight: var(--fw-bold);
  text-wrap: balance;                /* 제목 줄 길이 고르게 (안 되는 브라우저는 그냥 줄바꿈) */
}
.display { font-size: var(--fs-display); line-height: 1.1; letter-spacing: var(--ls-title); font-weight: var(--fw-bold); text-wrap: balance; }
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-title); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-0); }
h3, .h3 { font-size: var(--fs-lead); line-height: var(--lh-snug); letter-spacing: var(--ls-0); }
h4, .h4 { font-size: var(--fs-body); line-height: var(--lh-snug); font-weight: var(--fw-strong); }
:root[data-age="senior"] .display { line-height: 1.2; }

/* 제목 아래 첫 요소 간격: 제목이 뒤 글에 붙도록(근접) */
h1 + *, .h1 + * { margin-top: 0.5em; }
h2 + *, h3 + *  { margin-top: 0.4em; }

/* 뜻 덩어리 안 끊기: <span class="nobr">월 23,000원</span> — 제목에 <br> 대신 쓴다 */
.nobr { white-space: nowrap; }

/* ---------- 5. 본문·문단 ---------- */
p { margin: 0 0 var(--para-gap); text-wrap: pretty; }   /* 외톨이 낱말 줄임 (Firefox 는 무시) */
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-1); }
.muted, .sub { color: var(--text-2); }
.meta { color: var(--text-3); font-size: var(--fs-cap); line-height: var(--lh-snug); }
small, .cap { font-size: var(--fs-cap); line-height: var(--lh-snug); }

/* 긴 글(설명·약관·기사): 줄 길이 제한 + 넉넉한 행간 */
.prose { max-width: var(--measure); font-size: var(--fs-lead); line-height: var(--lh-long); }
.prose p { margin-bottom: 1em; }
/* 들여쓰기형 긴 글(에디토리얼·칼럼 전용): 문단 간격 0 + 첫 줄 1자 들여쓰기, 제목 바로 뒤 문단은 안 들임 (W3C klreq 7.2.3.1) */
.prose--indent p { margin: 0; text-indent: var(--indent); }
.prose--indent :is(h1, h2, h3, h4, hr, figure) + p,
.prose--indent > p:first-child { text-indent: 0; }

/* 내어쓰기: ※ 안내·주석·각주 — 둘째 줄이 기호 뒤에 맞춰 선다 */
.hang { padding-inline-start: var(--hang); text-indent: calc(var(--hang) * -1); }
/* 약관 항목 ①②③ */
.hang-2 { padding-inline-start: 1.5em; text-indent: -1.5em; }

/* ---------- 6. 목록 ---------- */
ul, ol { margin: 0 0 var(--para-gap); padding-inline-start: 1.25em; }
li { margin: 0.25em 0; line-height: var(--lh-body); }
li::marker { color: var(--text-3); }
ol > li::marker { font-variant-numeric: tabular-nums; }
.list-plain { list-style: none; padding: 0; }

/* ---------- 7. 숫자·가격 ---------- */
.num, .price, td.num, th.num {
  font-variant-numeric: tabular-nums;   /* Pretendard tnum 실측 확인: 1,111,111 과 8,888,888 폭 같음 */
  white-space: nowrap;                  /* 「23,967 / 원」 쪼개짐 금지 */
}
.price { font-weight: var(--fw-bold); letter-spacing: var(--ls-0); }
.price .unit { font-weight: var(--fw-body); margin-inline-start: 0.1em; }   /* 원·만원 은 같은 크기, 보통 굵기 */
.price-big { font-size: var(--fs-h2); line-height: var(--lh-tight); }
del.price, .price-old { color: var(--text-3); font-weight: var(--fw-body); text-decoration-thickness: 1px; }

/* ---------- 8. 표 ---------- */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-body); line-height: var(--lh-snug); }
th, td { padding: 0.6em 0.5em; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
th { font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--text-2); }
td.num, th.num { text-align: end; }
:root[data-age="senior"] th { font-size: var(--fs-body); }   /* 노년은 표 머리도 본문 크기 */

/* ---------- 9. 폼 ---------- */
label, .label { display: inline-block; font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--text-1); margin-bottom: 0.35em; line-height: var(--lh-snug); }
:root:is([data-age="mid"], [data-age="senior"]) label { font-size: var(--fs-body); }
input, select, textarea, button { font: inherit; color: inherit; letter-spacing: inherit; }
input, select, textarea {
  font-size: max(16px, var(--fs-body));   /* 16 미만이면 iOS 사파리가 입력 때 화면을 확대한다 */
  min-height: var(--touch);
}
::placeholder { color: var(--text-3); opacity: 1; }
.help { font-size: var(--fs-cap); color: var(--text-2); margin-top: 0.35em; }
.error { color: var(--danger); font-size: var(--fs-cap); font-weight: var(--fw-strong); }
:root[data-age="senior"] :is(.help, .error) { font-size: var(--fs-body); }

/* ---------- 10. 단추·링크 ---------- */
button, .btn {
  min-height: var(--touch);
  min-width: var(--touch);
  font-size: var(--fs-body);
  font-weight: var(--fw-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-0);
}
.btn-primary { background: var(--brand); color: var(--on-brand); }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: from-font; }
p a, li a, td a { text-decoration: underline; }          /* 문장 속 링크는 색만으로 구분하지 않음 */
:root[data-age="senior"] a { text-decoration: underline; }
:disabled, [aria-disabled="true"] { color: var(--text-disabled); }

/* ---------- 11. 영문 대문자 라벨 ---------- */
.caps { text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-cap); font-weight: var(--fw-strong); }
/* .caps 는 영문 글자에만 단다. 한글 낱말에 달지 말 것(한글 넓은 자간 금지). 섞일 때는 <span class="caps">NEW</span> 처럼 영문만 감싼다 */

/* ---------- 12. 되는 브라우저에서만 켜는 것 ---------- */
/* 글 상자 위아래 여백을 글자 높이에 맞춤: 단추·배지 안 글자 세로 가운데 (Chrome 133+, Safari 18.2+, 삼성 29+) */
@supports (text-box: trim-both cap alphabetic) {
  .btn, .badge, .chip { text-box: trim-both cap alphabetic; }
}
/* 문장 끝 구두점 매달기 — 사파리만 지원. 인용·큰 제목에서만 */
@supports (hanging-punctuation: first) {
  blockquote, .display { hanging-punctuation: first allow-end; }
}
/* text-wrap 미지원(옛 브라우저): keep-all 만으로 충분, 따로 할 일 없음 */

/* ---------- 13. 화면 크기 ---------- */
/* 폰에서 표·긴 숫자가 칸을 밀면 가로 스크롤은 표 상자 안에서만 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: max-content; }

/* ---------- 14. 사이트 덮어쓰기 (이 칸만 사이트마다 바꾼다) ---------- */
/*
:root {
  --brand: #1E4FD8;   흰 바탕 대비 4.5:1 이상인 색만. 미달이면 글자 색으로 쓰지 말고 면 색으로만
  --link: var(--brand);
  --on-brand: #FFFFFF;
}
노년 프로필 사이트(오늘다·푸른 등)는 위 프로필 칸이 --brand 를 #1A47C4 로 덮으므로, 사이트 색을 쓰려면 같은 우선순위로 한 번 더:
:root[data-age="senior"] { --brand: 사이트색(흰 바탕 7:1 이상); }
*/

/* ---------- 15. 「큰 글씨」 토글 예시 ----------
<div class="textsize" role="group" aria-label="글자 크기">
  <button type="button" data-size="">보통</button>
  <button type="button" data-size="lg">크게</button>
  <button type="button" data-size="xl">아주 크게</button>
</div>
<script>
(function () {
  var KEY = 'textsize', root = document.documentElement;
  function apply(v) {
    if (v) root.setAttribute('data-text', v); else root.removeAttribute('data-text');
    document.querySelectorAll('.textsize button').forEach(function (b) {
      b.setAttribute('aria-pressed', String((b.getAttribute('data-size') || '') === (v || '')));
    });
  }
  var saved = '';
  try { saved = localStorage.getItem(KEY) || ''; } catch (e) {}
  apply(saved);
  document.addEventListener('click', function (e) {
    var b = e.target.closest && e.target.closest('.textsize button');
    if (!b) return;
    var v = b.getAttribute('data-size') || '';
    apply(v);
    try { if (v) localStorage.setItem(KEY, v); else localStorage.removeItem(KEY); } catch (e2) {}
  });
})();
</script>
첫 화면 깜빡임을 막으려면 <head> 안 맨 위에 한 줄:
<script>try{var t=localStorage.getItem('textsize');if(t)document.documentElement.setAttribute('data-text',t)}catch(e){}</script>
------------------------------------------------------------------------- */

/* ---------- 다국어·RTL (2026-10-10, 세이유니버시티 30개 언어 대비) ----------
   한글 규칙(keep-all·음수 자간)은 한글·영문에만. 다른 문자는 그 문자의 규칙을 따른다.
   <html lang="xx" dir="rtl|ltr"> 를 언어마다 바꿔 줄 것(아랍·페르시아·우르두·히브리 = rtl). */
:root { --ff-world: "Noto Sans", "Noto Sans Arabic", "Noto Sans Thai", "Noto Sans Devanagari",
        "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif; }
/* 중국어·일본어: 띄어쓰기가 없어 keep-all 이면 줄이 안 꺾여 넘친다 */
:lang(zh), :lang(ja) { word-break: normal; line-break: strict; }
/* 아랍 계열: 글자가 이어 쓰이므로 자간을 주면 연결이 끊긴다. 대문자 라벨도 의미 없음 */
/* 같은 이유로 태국·힌디 계열도(결합 기호·합자) 음수 자간 금지 */
:is(:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(th), :lang(hi), :lang(ne), :lang(bn), :lang(my), :lang(km), :lang(lo)) :is(h1, h2, h3, .display, body) { letter-spacing: 0 !important; }
:is(:lang(ar), :lang(fa), :lang(ur), :lang(he)) { letter-spacing: 0 !important; }
:is(:lang(ar), :lang(fa), :lang(ur), :lang(he)) .caps { text-transform: none; }
/* 위·아래로 붙는 표시가 큰 문자(아랍·태국·힌디 등): 촘촘한 행간이면 위아래가 잘린다 */
:is(:lang(ar), :lang(fa), :lang(ur), :lang(th), :lang(hi), :lang(ne), :lang(bn), :lang(my), :lang(km), :lang(lo)) {
  --lh-tight: 1.45; --lh-snug: 1.6; --lh-body: 1.85; --lh-long: 1.95;
}
html:not(:lang(ko)):not(:lang(en)) body { font-family: var(--ff), var(--ff-world); }   /* body 에만 — code 의 고정폭 글꼴은 그대로 */
/* 글자 수 기준 폭(32em)은 한글 실측값. 라틴 문자는 같은 폭에 60자 넘게 들어가 넓다 */
:not(:lang(ko)):not(:lang(zh)):not(:lang(ja)) .prose { max-width: 38em; }