/* Hallmark · component: design-system · genre: modern-minimal · theme: locked-brand (CiteAngle navy/blue/gold)
 * ══════════════════════════════════════════════════════════════════════════
 * design-system.css — CiteAngle 웹 리뉴얼 디자인 시스템 (web-renewal 트랙 단독 소유)
 * 계약 정본: .scratch/site-renewal/design-system.md · 잠금: tests/test_design_system.py
 * 규율:
 *  - 토큰 잠금 — [DS-COMPONENTS] 마커 아래에는 색 리터럴(hex) 금지, 전부 var(--ds-*).
 *  - 모션은 transform·opacity·stroke-dash*만, draw-in 상태는 (prefers-reduced-motion:
 *    no-preference) 미디어 안에서만 존재 — reduce 환경은 처음부터 완성 상태로 렌더.
 *  - 기본 마크업 = 완성 상태(no-JS 안전). JS(design-system.js)가 모션 허용 시에만
 *    .ds-rv/.ds-anim을 부여한다.
 *  - 차트는 네이티브 SVG/CSS만 · 수치는 데이터 팩 결박(템플릿이 값 주입) · 외부 요청 0.
 *  - 카테고리 시리즈 s1→s2→s3 고정 순서(재배열 금지). dataviz validate_palette.js
 *    2026-07-19 실측: #2367a8·#8b5e0b·#a1275e 전 쌍 5체크 PASS(CVD ΔE≥9.8·정상시 ≥17.7).
 *  - 폰트 캐논: KR Pretendard(폴백 Noto Sans KR) · JA Noto Sans JP · EN 시스템 산세리프.
 * ══════════════════════════════════════════════════════════════════════════ */

/* == [DS-TOKENS] ═══════════════════════════════════════════════════════════ */
:root{
  /* 타이포 스케일 7단 — t2·t3·t5는 base.html 잠금 스케일(main h2/h3/p)과 동치 */
  --ds-t1:clamp(34px,5.2vw,58px);   /* 빅 헤드라인(히어로) — 모바일에서도 34px 하한 */
  --ds-t2:clamp(28px,3vw,34px);     /* 디스플레이/섹션 표제 = main h2 */
  --ds-t3:19px;                     /* 소제목 = main h3 */
  --ds-t4:17px;                     /* 리드 문장 = .pagehead p.lead */
  --ds-t5:16px;                     /* 본문 = main p */
  --ds-t6:13.5px;                   /* 보조·라벨 */
  --ds-t7:12.5px;                   /* 마이크로·키커·캡션 */
  --ds-lh-display:1.16;--ds-lh-heading:1.3;--ds-lh-body:1.7;
  --ds-ls-display:-.035em;--ds-ls-caps:.12em;
  /* 간격 — 8pt 리듬 8단 */
  --ds-s1:8px;--ds-s2:16px;--ds-s3:24px;--ds-s4:32px;
  --ds-s5:48px;--ds-s6:64px;--ds-s7:96px;--ds-s8:128px;
  /* 팔레트 — 프라이머리(네이비·블루) + 뉴트럴 + 강조 1색(골드). base.html 기존값 승격(값 불변) */
  --ds-ink:#111a26;--ds-ink-2:#253247;--ds-sub:#526071;
  --ds-bg:#f6f9fc;--ds-card:#fff;--ds-line:#d9e2ec;--ds-soft:#eef4ff;
  --ds-navy:#0f172a;--ds-navy-2:#182742;
  --ds-accent:#2367a8;--ds-accent-dk:#194f84;
  --ds-gold:#d8b45f;--ds-gold-bg:#fff6df;--ds-gold-ink:#7a5b16;
  /* 다크 밴드 위 잉크 */
  --ds-ondark:#eef2f8;--ds-ondark-sub:#a9b8cb;--ds-ondark-accent:#8fb8e8;
  --ds-ondark-line:rgba(143,184,232,.24);
  /* 차트 — 카테고리 3계열(고정 순서·validator PASS) · 트랙 · 순차 램프(블루 단일 색상) */
  --ds-chart-1:#2367a8;--ds-chart-2:#8b5e0b;--ds-chart-3:#a1275e;
  --ds-chart-track:#eef2f7;--ds-chart-grid:#e3ebf3;
  --ds-seq-1:#d7e6f5;--ds-seq-2:#8fb3d6;--ds-seq-3:#2367a8;
  /* 표면 장식 */
  --ds-shadow:0 8px 26px rgba(15,23,42,.045);--ds-shadow-lg:0 16px 44px rgba(15,23,42,.09);
  --ds-band:linear-gradient(160deg,#0f172a 0%,#182742 100%);
  --ds-band-glow:radial-gradient(760px 320px at 85% -10%,#24406e 0%,rgba(36,64,110,0) 62%);
  --ds-r-s:8px;--ds-r-m:12px;--ds-r-l:16px;
  /* 모션 — 듀레이션 3단 + 이징 2종 (reduce 가드는 아래 미디어 블록·JS 이중) */
  --ds-dur-1:150ms;--ds-dur-2:300ms;--ds-dur-3:600ms;
  --ds-ease-out:cubic-bezier(0.16,1,0.3,1);--ds-ease-inout:cubic-bezier(0.65,0,0.35,1);
  /* 폰트 캐논 3로케일 — 외부 웹폰트 요청 없이 로컬 설치분+시스템 폴백만 */
  --ds-font-kr:'Pretendard Variable',Pretendard,'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --ds-font-ja:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic UI',Meiryo,system-ui,sans-serif;
  --ds-font-en:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* 로케일 폰트 배선 — base.html --font를 로케일 캐논으로 재지정(속성 선택자가 :root보다 우선) */
html[lang="ja-JP"]{--font:var(--ds-font-ja)}
html[lang="en-US"]{--font:var(--ds-font-en)}

/* == [DS-COMPONENTS] — 이 아래 색 리터럴 금지(토큰 참조만) ═══════════════════ */

/* ── 1. ds-hero — 빅 타이포 히어로(핵심 한 줄) ───────────────────────────── */
.ds-hero{background:var(--ds-band-glow),var(--ds-band);color:var(--ds-ondark);
padding:var(--ds-s7) 0 var(--ds-s6)}
.ds-hero-kicker{display:flex;align-items:center;gap:10px;margin:0 0 var(--ds-s2);
font-size:var(--ds-t7);font-weight:800;letter-spacing:var(--ds-ls-caps);
text-transform:uppercase;color:var(--ds-ondark-accent)}
.ds-hero-kicker::after{content:'';flex:0 0 44px;height:1px;background:var(--ds-ondark-line)}
.ds-hero-title{margin:0;font-size:var(--ds-t1);line-height:var(--ds-lh-display);
letter-spacing:var(--ds-ls-display);font-weight:800;font-style:normal;color:var(--ds-card);
overflow-wrap:anywhere;min-width:0;max-width:17em}
.ds-hero-title em{font-style:normal;color:var(--ds-ondark-accent)}
.ds-hero-lead{margin:var(--ds-s2) 0 0;font-size:var(--ds-t4);line-height:1.72;
color:var(--ds-ondark);opacity:.88;max-width:44em}
.ds-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ds-s2);
margin-top:var(--ds-s4)}
.ds-hero-actions .btn{background:var(--ds-card);color:var(--ds-navy);font-weight:800}
.ds-hero-actions .btn:hover{background:var(--ds-soft)}
.ds-hero-actions .ds-sec{color:var(--ds-ondark);font-size:var(--ds-t5);font-weight:700;
text-underline-offset:5px}

/* ── 2. ds-stat — 스탯 카운터(스크롤 인 카운트업 · reduce/no-JS는 정적 완성값) ── */
.ds-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--ds-s2);margin:var(--ds-s3) 0}
.ds-stat{background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-r-m);
padding:var(--ds-s3) var(--ds-s3) var(--ds-s2);display:flex;flex-direction:column}
.ds-stat-v{font-size:clamp(34px,3.4vw,44px);font-weight:800;line-height:1.05;
letter-spacing:-.03em;color:var(--ds-navy);font-variant-numeric:tabular-nums}
.ds-stat-v em{font-style:normal;color:var(--ds-accent)}
.ds-stat-l{font-size:var(--ds-t6);color:var(--ds-ink-2);margin:var(--ds-s1) 0 var(--ds-s2);line-height:1.6}
.ds-stat-s{font-size:var(--ds-t7);color:var(--ds-sub);margin-top:auto;
border-top:1px solid var(--ds-line);padding-top:var(--ds-s1);line-height:1.55}

/* ── 3. ds-fig — 차트 프레임(제목·플롯·출처 캡션) — 수치 전건 데이터 팩 결박 ── */
.ds-fig{background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-r-l);
padding:var(--ds-s3) var(--ds-s3) var(--ds-s2);margin:var(--ds-s3) 0 var(--ds-s4);
box-shadow:var(--ds-shadow)}
.ds-fig-t{font-size:var(--ds-t7);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--ds-accent);margin:0 0 var(--ds-s2);max-width:none}
.ds-fig figcaption,.ds-fig-src{font-size:var(--ds-t7);color:var(--ds-sub);
border-top:1px solid var(--ds-line);margin-top:var(--ds-s2);padding-top:10px;line-height:1.65}
.ds-fig svg text{font-family:var(--font)}
.ds-tick{font-size:11px;fill:var(--ds-sub)}
.ds-grid-l{stroke:var(--ds-chart-grid);stroke-width:1}
.ds-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:var(--ds-s2) 0 0;
font-size:var(--ds-t7);color:var(--ds-sub);align-items:center}
.ds-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;
vertical-align:-1px;font-style:normal}
.ds-legend .s1 i{background:var(--ds-chart-1)}
.ds-legend .s2 i{background:var(--ds-chart-2)}
.ds-legend .s3 i{background:var(--ds-chart-3)}

/* ── 4. ds-bars — SVG 가로 막대(값 끝 4px 라운드·2px 표면 갭은 행 간격이 담당) ── */
.ds-bars{display:grid;gap:9px}
.ds-bar-row{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:4px 12px;align-items:center}
.ds-bar-l{font-size:var(--ds-t6);font-weight:700;color:var(--ds-ink-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-bar-track{position:relative;height:14px;background:var(--ds-chart-track);
border-radius:4px;min-width:0}
.ds-bar-t{position:absolute;top:0;left:0;height:100%;
width:max(calc(var(--v,0)*100%/var(--vmax,100)),8px);
border-radius:0 4px 4px 0;overflow:hidden}
.ds-bar-t svg{display:block;width:100%;height:100%}
.ds-bar-t rect{fill:var(--ds-chart-1);width:100%;height:100%}
.ds-bar-t.s2 rect{fill:var(--ds-chart-2)}
.ds-bar-t.s3 rect{fill:var(--ds-chart-3)}
.ds-bar-t.ds-est rect{opacity:.5}
.ds-bar-v{font-size:var(--ds-t7);font-weight:700;color:var(--ds-ink-2);
font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-bar-row.ds-top .ds-bar-l,.ds-bar-row.ds-top .ds-bar-v{color:var(--ds-navy);font-weight:800}
@media (max-width:680px){
  .ds-bar-row{grid-template-columns:minmax(0,1fr) auto}
  .ds-bar-track{grid-column:1/-1;order:3}
  .ds-bar-l{white-space:normal}
}

/* ── 5. ds-line — SVG 라인(pathLength=1 정규화 draw-in·점 지름 8px) ─────────── */
.ds-line svg{display:block;width:100%;height:auto}
.ds-line-path{fill:none;stroke:var(--ds-chart-1);stroke-width:2;stroke-linecap:round;
stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.ds-line-path.s2{stroke:var(--ds-chart-2)}
.ds-line-path.s3{stroke:var(--ds-chart-3)}
.ds-line-area{fill:var(--ds-chart-1);opacity:.08;stroke:none}
.ds-line-dot{fill:var(--ds-chart-1);stroke:var(--ds-card);stroke-width:2}
.ds-line-dot.s2{fill:var(--ds-chart-2)}
.ds-line-dot.s3{fill:var(--ds-chart-3)}

/* ── 6. ds-donut — SVG 도넛(pathLength=100 · dasharray "값 100-값" 인라인 결박) ── */
.ds-donut{display:flex;align-items:center;gap:var(--ds-s3);flex-wrap:wrap}
.ds-donut svg{width:128px;height:128px;flex:0 0 auto}
.ds-donut-track{fill:none;stroke:var(--ds-chart-track);stroke-width:12}
.ds-donut-arc{fill:none;stroke:var(--ds-chart-1);stroke-width:12;stroke-linecap:round;
transform:rotate(-90deg);transform-origin:60px 60px}
.ds-donut-arc.s2{stroke:var(--ds-chart-2)}
.ds-donut-arc.s3{stroke:var(--ds-chart-3)}
.ds-donut--multi .ds-donut-arc{stroke-linecap:butt}
.ds-donut-v{font-size:21px;font-weight:800;fill:var(--ds-navy);font-variant-numeric:tabular-nums;
text-anchor:middle}
.ds-donut-l{font-size:11px;font-weight:700;fill:var(--ds-sub);text-anchor:middle}
.ds-donut-side b{display:block;font-size:var(--ds-t3);color:var(--ds-navy);letter-spacing:-.02em}
.ds-donut-side span{display:block;font-size:var(--ds-t6);color:var(--ds-ink-2);
margin-top:4px;line-height:1.65;max-width:400px}

/* ── 7. ds-matrix — 그리드 매트릭스(순차 램프 data-level 0~3 + 유무 도트) ────── */
.ds-matrix{display:grid;border:1px solid var(--ds-line);border-radius:var(--ds-r-m);
overflow:hidden;background:var(--ds-card);font-size:var(--ds-t6)}
.ds-mx-h{background:var(--ds-chart-track);font-weight:800;font-size:11.5px;letter-spacing:.03em;
color:var(--ds-ink-2);padding:10px 12px;line-height:1.4}
.ds-mx-l{padding:9px 12px;border-top:1px solid var(--ds-line);font-weight:650;min-width:0}
.ds-mx-l .ds-mx-note{display:block;font-size:11.5px;color:var(--ds-sub);font-weight:500;line-height:1.5}
.ds-mx-c{border-top:1px solid var(--ds-line);display:flex;align-items:center;
justify-content:center;padding:6px}
.ds-mx-c[data-level]{min-height:34px}
.ds-mx-c[data-level="1"]{background:var(--ds-seq-1)}
.ds-mx-c[data-level="2"]{background:var(--ds-seq-2)}
.ds-mx-c[data-level="3"]{background:var(--ds-seq-3)}
.ds-mx-c[data-level="2"] .ds-mx-cv,.ds-mx-c[data-level="3"] .ds-mx-cv{color:var(--ds-card)}
.ds-mx-cv{font-size:var(--ds-t7);font-weight:700;font-variant-numeric:tabular-nums}
.ds-dot{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--ds-accent);
display:inline-block;flex:0 0 auto}
.ds-dot.yes{background:var(--ds-accent)}
.ds-dot.part{background:linear-gradient(135deg,var(--ds-accent) 50%,rgba(0,0,0,0) 50%)}
.ds-dot.no{border-color:var(--ds-line)}
.ds-mx-scroll{overflow-x:auto;max-width:100%}

/* ── 8. ds-card — 콘텐츠 카드 ────────────────────────────────────────────── */
.ds-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:var(--ds-s2);margin:var(--ds-s3) 0}
.ds-card{background:var(--ds-card);border:1px solid var(--ds-line);border-radius:var(--ds-r-l);
padding:var(--ds-s3);box-shadow:var(--ds-shadow)}
.ds-card-k{font-size:var(--ds-t7);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--ds-accent);margin:0 0 var(--ds-s1)}
.ds-card h3{font-size:var(--ds-t3);margin:0 0 var(--ds-s1);line-height:var(--ds-lh-heading)}
.ds-card p{font-size:var(--ds-t6);color:var(--ds-ink-2);margin:0;line-height:1.7;max-width:none}
.ds-card--hl{border-top:3px solid var(--ds-gold);
background:linear-gradient(180deg,var(--ds-gold-bg),var(--ds-card) 56%)}

/* ── 9. ds-compare — 비교표(.tablewrap 안에서 사용 · 강조열은 셀에 .ds-col-hl) ── */
table.ds-compare th,table.ds-compare td{font-size:var(--ds-t6)}
table.ds-compare .ds-col-hl{background:var(--ds-gold-bg);border-left:2px solid var(--ds-gold)}
table.ds-compare th.ds-col-hl{color:var(--ds-gold-ink)}
table.ds-compare td .ds-dot{vertical-align:-2px}

/* ── 10. ds-timeline — 세로 타임라인 ─────────────────────────────────────── */
.ds-timeline{list-style:none;margin:var(--ds-s3) 0;padding:0 0 0 var(--ds-s3);
position:relative;max-width:760px}
.ds-timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;
background:var(--ds-line);border-radius:2px}
.ds-timeline li{position:relative;margin:0 0 var(--ds-s3);padding:0}
.ds-timeline li::before{content:'';position:absolute;left:calc(-1*var(--ds-s3) - 1px);top:5px;
width:14px;height:14px;border-radius:50%;background:var(--ds-card);
border:3px solid var(--ds-accent)}
.ds-timeline li.ds-tl-now::before{background:var(--ds-accent);
box-shadow:0 0 0 4px var(--ds-soft)}
.ds-tl-k{font-size:var(--ds-t7);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--ds-accent);margin:0 0 3px}
.ds-tl-t{font-size:var(--ds-t3);font-weight:800;margin:0 0 4px;line-height:var(--ds-lh-heading)}
.ds-tl-d{font-size:var(--ds-t6);color:var(--ds-ink-2);margin:0;line-height:1.7}

/* ── 11. ds-cta — CTA 밴드 ───────────────────────────────────────────────── */
.ds-cta{background:var(--ds-band);border:1px solid var(--ds-ondark-line);
border-top:3px solid var(--ds-gold);border-radius:var(--ds-r-l);
padding:var(--ds-s4) var(--ds-s4);margin:var(--ds-s6) 0 0;color:var(--ds-ondark)}
.ds-cta-t{font-size:var(--ds-t2);line-height:var(--ds-lh-heading);letter-spacing:-.025em;
font-weight:800;color:var(--ds-card);margin:0;max-width:24em}
.ds-cta-sub{font-size:var(--ds-t5);color:var(--ds-ondark);opacity:.85;
margin:var(--ds-s1) 0 0;line-height:1.7;max-width:44em}
.ds-cta-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ds-s2);
margin-top:var(--ds-s3)}
.ds-cta .btn{background:var(--ds-card);color:var(--ds-navy)}
.ds-cta .btn:hover{background:var(--ds-soft)}
.ds-cta .ds-sec{color:var(--ds-ondark);font-weight:700;text-underline-offset:5px}

/* ── 12. 공통 유틸 — 리빌·스크린리더·포커스 ──────────────────────────────── */
.ds-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ds-hero a:focus-visible,.ds-cta a:focus-visible{outline:2px solid var(--ds-ondark-accent);
outline-offset:2px;border-radius:4px}

/* == [DS-MOTION] — 모든 전이 상태는 no-preference 안에서만 존재 ═══════════════ */
@media (prefers-reduced-motion: no-preference){
  /* 섹션 리빌 — JS가 .ds-rv 부여(기본 마크업은 항상 보임), 미세 페이드/슬라이드만 */
  .ds-rv{opacity:0;transform:translateY(14px);
  transition:opacity var(--ds-dur-2) var(--ds-ease-out),transform var(--ds-dur-2) var(--ds-ease-out)}
  .ds-rv[data-ds-reveal="fade"]{transform:none}
  .ds-rv.ds-in{opacity:1;transform:none}
  /* 차트 draw-in — JS가 뷰포트 밖 차트에만 .ds-anim 부여, 진입 시 .ds-on */
  .ds-anim:not(.ds-on) .ds-bar-t{transform:scaleX(0);transform-origin:left center}
  .ds-anim .ds-bar-t{transition:transform .45s var(--ds-ease-out) calc(var(--i,0)*45ms)}
  .ds-anim:not(.ds-on) .ds-line-path{stroke-dashoffset:1}
  .ds-anim .ds-line-path{transition:stroke-dashoffset var(--ds-dur-3) var(--ds-ease-inout)}
  .ds-anim:not(.ds-on) .ds-donut-arc{stroke-dasharray:0 100!important}
  .ds-anim .ds-donut-arc{transition:stroke-dasharray var(--ds-dur-3) var(--ds-ease-out) .1s}
  .ds-stat:hover,.ds-card:hover{transform:translateY(-2px);box-shadow:var(--ds-shadow-lg)}
  .ds-stat,.ds-card{transition:transform var(--ds-dur-1) var(--ds-ease-out),
  box-shadow var(--ds-dur-1) var(--ds-ease-out)}
}
@media (prefers-reduced-motion: reduce){
  /* 정적 폴백 이중 안전판 — JS 미부여가 1선, 여기는 2선. 전부 완성 상태 고정 */
  .ds-rv,.ds-rv.ds-in{opacity:1;transform:none;transition:none}
  .ds-bar-t{transform:none}
  .ds-line-path{stroke-dashoffset:0}
  .ds-donut-arc{transition:none}
}

/* == [DS-RESPONSIVE] ═══════════════════════════════════════════════════════ */
@media (max-width:720px){
  .ds-hero{padding:var(--ds-s6) 0 var(--ds-s5)}
  .ds-statgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ds-stat-v{font-size:30px}
  .ds-cta{padding:var(--ds-s3)}
  .ds-donut svg{width:104px;height:104px}
}
@media (max-width:480px){
  .ds-hero-actions .btn,.ds-cta-actions .btn{flex:1 1 100%;text-align:center}
  .ds-timeline{padding-left:var(--ds-s3)}
}

/* == [DS-PRINT] — 인쇄 규격: 밴드는 흰 바탕·잉크 전환, 카드·차트 쪽나눔 금지 ══ */
@media print{
  .ds-hero,.ds-cta{background:none;color:var(--ds-ink);border:1px solid var(--ds-line)}
  .ds-hero-title,.ds-cta-t{color:var(--ds-ink)}
  .ds-hero-lead,.ds-cta-sub{color:var(--ds-ink-2);opacity:1}
  .ds-hero-kicker{color:var(--ds-accent-dk)}
  .ds-hero-kicker::after{background:var(--ds-line)}
  .ds-fig,.ds-card,.ds-stat,.ds-matrix,.ds-timeline li{break-inside:avoid}
  .ds-rv{opacity:1!important;transform:none!important}
  .ds-stat,.ds-card,.ds-fig{box-shadow:none}
  .ds-cta-actions,.ds-hero-actions{display:none}
}