/* ============================================================
   ibank — 디자인 토큰 (Seline 스타일: 웜 스톤 페이퍼 + 시안 시그널)
   ------------------------------------------------------------
   소스: docs/design/new system/DESIGN.md (seline.com 추출 토큰)
   캔버스: 스톤 #fafaf9 (순백 페이지 배경 금지 — 화이트는 카드 전용)
   포인트: 시안 #3ba6f1 = 페이지에서 유일한 채색 (CTA 채움·액티브·아이콘)
          #3398e1 = 링크·아웃라인·하이라이트 스팬 텍스트
   타이포: 헤드라인 weight 400 + 타이트 네거티브 트래킹 (위스퍼 웨이트가 시그니처)
   금지: 그라데이션·글래스모피즘·제2 악센트(그린/퍼플/레드 장식) — 플랫 페이퍼 질감
   ※ 레거시 토큰명(--color-accent-lime 등)은 참조 호환을 위해 이름만 유지.
   ============================================================ */

:root {
  /* ── Seline 원본 토큰 ── */
  --color-stone-canvas: #fafaf9;
  --color-pure-white: #ffffff;
  --color-stone-border: #e8e6e5;
  --color-stone-muted: #d6d3d1;
  --color-ash-gray: #a8a29e;
  --color-warm-gray: #78716c;
  --color-ink-black: #0c0a09;
  --color-soot: #1c1917;
  --color-sky-wash: #c1e1f7;
  --color-cyan-signal: #3ba6f1;
  --color-cyan-edge: #3398e1;

  /* 배경 (스톤 캔버스 → 화이트 카드) */
  --color-bg-page:     #fafaf9;
  --color-bg-card:     #ffffff;
  --color-bg-deep:     #f5f5f4;
  --color-bg-elevated: #ffffff;
  --color-bg-abyss:    #eeedec;

  /* 섹션 밴드 — 화이트/스톤 교차. [data-band] 유틸리티로만 쓴다. */
  --color-band-paper: #ffffff;
  --color-band-ivory: #fafaf9;

  /* 텍스트 — 잉크 헤딩 + 웜 그레이 본문이 Seline 위계 */
  --color-text-primary:   #0c0a09;
  --color-text-secondary: #78716c;
  --color-text-muted:     #78716c;
  --color-text-ash:       #a8a29e;

  /* 포인트 — 시안 시그널. 페이지에서 유일한 채색 목소리.
     ※ --*-lime 계열 토큰은 기존 참조를 깨지 않으려고 이름만 유지.
     채움: --color-accent-lime = #3ba6f1 (필 CTA — 뷰포트당 1개 원칙, 보더 #3398e1)
     전경: --color-accent-ink = #3398e1 (링크·라벨·하이라이트 스팬 텍스트) */
  --color-accent-lime:      #3ba6f1;
  --color-accent-lime-deep: #3398e1;
  --color-accent-ink:       #3398e1;
  --color-accent-ink-lg:    #3398e1;

  /* 채움 위 전경 (버튼 라벨·아이콘) */
  --color-text-on-accent: #ffffff;
  --color-accent-navy:      #c1e1f7;
  --color-accent-blue:      #3ba6f1;
  --color-accent-blue-ink:  #3398e1;
  --color-accent-warn:      #b3312d;

  /* 경계선 — 스톤 헤어라인이 1차 구조 장치 (무거운 디바이더 금지) */
  --color-border:        #e8e6e5;
  --color-border-strong: #d6d3d1;
  --color-line-light:    #f0efee;

  /* 그라데이션 토큰 — Seline 은 그라데이션 금지. 참조 호환을 위해 플랫 값으로 유지. */
  --gradient-hero: linear-gradient(180deg, #fafaf9 0%, #fafaf9 100%);
  --gradient-cta:  linear-gradient(90deg, #3ba6f1 0%, #3ba6f1 100%);
  --gradient-glow: radial-gradient(closest-side, rgba(59,166,241, 0) 0%, rgba(59,166,241, 0) 70%);
  --gradient-banner: linear-gradient(180deg, #1c1917 0%, #1c1917 100%);

  /* 타이포 — 디스플레이: 위스퍼 웨이트 400 (Pretendard = Inter 계열, Roobert 대체) */
  --font-display: "Pretendard", "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Pretendard", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-caption:    12px;
  --text-body:       14px;
  --text-body-lg:    16px;
  --text-subheading: 20px;
  --text-heading:    24px;
  --text-heading-sm: 32px;
  --text-heading-lg: 32px;
  --text-heading-xl: 40px;
  --text-display:    52px;
  --text-display-lg: 52px;
  --leading-caption: 1.5;
  --leading-body: 1.64;
  --leading-heading: 1.25;
  --leading-display: 1.12;
  --tracking-display: -0.021em;
  --tracking-heading: -0.025em;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    600;

  /* 간격·모양 — 4px 베이스 유닛, 컴팩트 밀도 + 96px 에디토리얼 섹션 갭 */
  --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px;
  --spacing-64: 64px; --spacing-80: 80px; --spacing-96: 96px; --spacing-160: 160px;
  --section-gap:  96px;
  --card-padding: 24px;
  --element-gap:  8px;
  --page-max:   1200px;
  --radius-input:  6px;
  --radius-button: 9999px;  /* 필 버튼 */
  --radius-card:   10px;
  --radius-feature: 16px;
  --radius-icon:   4px;
  --radius-pill: 9999px;

  /* 섀도 — 딥 섀도(xl)는 페이지당 플로팅 프리뷰 1개에만 */
  --shadow-subtle: rgba(0,0,0,.05) 0px 1px 2px 0px;
  --shadow-sm: rgba(0,0,0,.1) 0px 4px 6px -1px, rgba(0,0,0,.1) 0px 2px 4px -2px;
  --shadow-md: rgba(0,0,0,.05) 0px 4px 16px 0px;
  --shadow-xl: rgba(17,12,46,.12) 0px 12px 45px 0px;
  --shadow-glow: rgba(0,0,0,.05) 0px 1px 2px 0px;
  --shadow-card: rgba(0,0,0,.05) 0px 4px 16px 0px;
  --shadow-lg: rgba(0,0,0,.05) 0px 4px 16px 0px;

  /* ── AI 상담 패널 ── */
  --color-ai-ink:      #0c0a09;
  --color-ai-bg:       #fafaf9;
  --color-ai-panel:    #ffffff;
  --color-ai-panel2:   #f5f5f4;
  --color-ai-field:    #ffffff;
  --color-ai-text:     #1c1917;
  --color-ai-dim:      rgba(12,10,9, 0.62);
  --color-ai-line:     #e8e6e5;
  --color-ai-glow-a:   0.1;
  --color-ai-doc-card: #ffffff;
  --color-ai-doc-ink:  #1c1917;
  --color-ai-doc-head: #0c0a09;

  /* ── 레거시 별칭 (index.html / JS --hs-* · --ai-* 호환) ── */
  --hs-lime:      var(--color-accent-lime);
  --hs-lime-ink:  var(--color-accent-ink);
  --hs-ink:       var(--color-text-primary);
  --hs-on-accent: var(--color-text-on-accent);
  --hs-ash:      var(--color-text-ash);
  --hs-white:    var(--color-bg-card);
  --hs-abyss:    var(--color-bg-abyss);
  --hs-line:     var(--color-border);

  --ai-lime:         var(--color-accent-lime);
  --ai-lime-ink:     var(--color-accent-ink);
  --ai-ink:          var(--color-ai-ink);
  --ai-on-accent:    var(--color-text-on-accent);
  --ai-bg:           var(--color-ai-bg);
  --ai-panel:        var(--color-ai-panel);
  --ai-panel2:       var(--color-ai-panel2);
  --ai-field:        var(--color-ai-field);
  --ai-text:         var(--color-ai-text);
  --ai-dim:          var(--color-ai-dim);
  --ai-line:         var(--color-ai-line);
  --ai-glow-a:       var(--color-ai-glow-a);
  --ai-doc-bg:       var(--color-ai-panel2);
  --ai-doc-card:     var(--color-ai-doc-card);
  --ai-doc-ink:      var(--color-ai-doc-ink);
  --ai-doc-head:     var(--color-ai-doc-head);
  --ai-doc-line:     var(--color-ai-line);
  --ai-doc-lime-ink: var(--color-accent-ink);
}

/* ── 섹션 밴드 유틸리티 ──────────────────────────────────────────
   최상위 <section>에 data-band 을 얹어 화이트/스톤을 교차시켜 리듬을 만든다.
   paper 밴드에서는 카드 토큰을 스톤으로 뒤집는다 (흰 밴드 위 흰 카드 방지). */
[data-band="ivory"] { background-color: var(--color-band-ivory); }

[data-band="paper"] {
  background-color: var(--color-band-paper);
  --color-bg-card: var(--color-band-ivory);
  --ink2:          var(--color-band-ivory); /* 제품 페이지 로컬 카드 토큰 */
}

::selection { background: rgba(59,166,241, .25); color: var(--color-text-primary); }

* ::-webkit-scrollbar { width: 10px; height: 10px; }
* ::-webkit-scrollbar-thumb { background: var(--color-stone-muted); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
* ::-webkit-scrollbar-thumb:hover { background: var(--color-ash-gray); border: 3px solid transparent; background-clip: content-box; }
* ::-webkit-scrollbar-track { background: transparent; }