@charset "utf-8";
/* ============================================================
   원스케일 (OneScale) 랜딩 — 05_visual_direction.md 토큰 구현
   색값·크기 하드코딩 0건 원칙: 전부 CSS 변수 참조
   05 §2-5 폐기 토큰 6종(폼 전용)은 선언하지 않는다 — 빌드 관문 Gate 6이 검사한다.
   ============================================================ */

/* ---------- 1. 웹폰트 (self-host, subset woff2 2파일) ---------- */
/* ext를 먼저 선언한다 — 같은 코드포인트를 core가 덮어쓰도록(뒤에 선언된 규칙 우선) */
@font-face{
  font-family:"Pretendard Variable";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/pretendard-ext.subset.woff2") format("woff2");
  unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF;
}
@font-face{
  font-family:"Pretendard Variable";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/pretendard-core.subset.woff2") format("woff2");
  /* 페이지 실사용 글자 + 라틴·숫자·구두점 (fontTools 실측 529자) */
  unicode-range:U+0020-007E,U+00A9,U+00B7,U+00D7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+2460-2469,U+26A0,U+AC00,U+AC04,U+AC08,U+AC12,U+AC19,U+AC1C,U+AC70,U+AC74,U+AC78,U+AC80,U+AC83,U+AC8C,U+ACA8-ACA9,U+ACAC,U+ACB0,U+ACBD,U+ACC4,U+ACE0,U+ACF5,U+ACFC,U+AD00,U+AD6C-AD6D,U+AD8C,U+ADDC,U+ADF8,U+AE30,U+AE34,U+AE4A,U+AE4C,U+AED8,U+AFB8,U+B00C,U+B098,U+B0A8-B0A9,U+B0B4,U+B108,U+B144,U+B193,U+B208,U+B290,U+B294,U+B2A5,U+B2C8,U+B2E4,U+B2E8,U+B2EC,U+B2F4,U+B2F9,U+B300,U+B354,U+B358,U+B370,U+B378,U+B3C4,U+B3D9,U+B418,U+B41C,U+B429,U+B450,U+B458,U+B4DC,U+B4E4,U+B4F1,U+B514,U+B530,U+B54C,U+B5A4,U+B6F0,U+B73B,U+B77C-B77D,U+B780,U+B78C,U+B798,U+B7EC,U+B808,U+B80C,U+B824-B825,U+B839,U+B840,U+B85C-B85D,U+B8CC,U+B960,U+B968,U+B974,U+B978,U+B97C,U+B9AC,U+B9BD,U+B9C1,U+B9C8,U+B9CC,U+B9DD-B9DE,U+BA38,U+BA3C,U+BA54,U+BA74,U+BA85,U+BAA8-BAA9,U+BAAB,U+BB34,U+BB38,U+BB3C,U+BBF8,U+BC0F,U+BC14,U+BC16,U+BC18,U+BC1B-BC1C,U+BC29,U+BC30,U+BC84,U+BC88,U+BC94-BC95,U+BCC4,U+BCF4-BCF5,U+BCF8,U+BCFC,U+BD80,U+BD84,U+BD99,U+BDF0,U+BE14,U+BE44,U+BED7,U+BF51,U+BFD0,U+C0AC-C0AD,U+C0B0,U+C0B4,U+C0C1,U+C0DD,U+C11C,U+C120,U+C124,U+C131,U+C138,U+C13C,U+C14B,U+C154,U+C18C-C18D,U+C218,U+C21C,U+C220,U+C2A4,U+C2B5,U+C2DC-C2DD,U+C2E0,U+C2E4,U+C4F0,U+C52C,U+C544,U+C548,U+C54A,U+C559,U+C57D,U+C5B4,U+C5BC,U+C5C5-C5C6,U+C5C8,U+C5D0,U+C5EC,U+C5F0,U+C5F4,U+C601,U+C624,U+C62E,U+C640,U+C644,U+C678,U+C67C,U+C694,U+C6A9,U+C6B0,U+C6B4,U+C6C1,U+C6CC,U+C6D0,U+C704,U+C720,U+C728,U+C73C,U+C740,U+C744,U+C74C,U+C758,U+C774-C775,U+C778,U+C77C,U+C784-C785,U+C788,U+C790-C791,U+C7A5,U+C7AC,U+C7C1,U+C800-C801,U+C804,U+C808,U+C810-C811,U+C815,U+C81C,U+C838,U+C84C,U+C870,U+C885,U+C8FC,U+C900,U+C90D,U+C911,U+C9C0-C9C1,U+C9C4,U+C9C8,U+C9D1,U+C9F8,U+CABD,U+CC28,U+CC3D,U+CC45,U+CC98,U+CCA0,U+CCA8,U+CCAB,U+CCAD,U+CCB4,U+CD1D,U+CD5C,U+CD94,U+CDA5,U+CDB0,U+CE58-CE59,U+CE68,U+CE74,U+CEE4,U+CEF7,U+CF00,U+CFE0,U+D004,U+D0A4,U+D0C0-D0C1,U+D0DD,U+D130,U+D14C,U+D1A0,U+D1A4,U+D1B5,U+D22C,U+D2B8,U+D2F0,U+D30C,U+D310,U+D328-D329,U+D398,U+D3C9,U+D3ED,U+D3F4,U+D45C,U+D488,U+D504,U+D50C,U+D544,U+D558,U+D55C,U+D568-D569,U+D56D,U+D574,U+D588-D589,U+D604,U+D615,U+D638,U+D64D,U+D654-D655,U+D68C,U+D6A8,U+D6C4,U+D76C,U+D788;
}

/* ---------- 2. 디자인 토큰 — 컬러 (라이트) ---------- */
:root{
  --c-bg:#FFFFFF;
  --c-surface:#F5F7FA;
  --c-surface-sunken:#EBEEF3;
  --c-surface-alt-3d:#EDF1F6;
  --c-ink-section:#0F1A26;

  --c-text:#10151C;
  --c-text-2:#3F4A57;
  --c-text-muted:#667080;
  --c-text-on-ink:#FFFFFF;
  --c-text-on-ink-2:#C8D3E0;
  --c-text-on-ink-3:#8FA0B4;

  --c-brand:#0F4C81;
  --c-brand-surface:#EAF1F8;
  --c-brand-on-ink:#7FB3E8;
  --c-focus-on-ink:var(--c-brand-on-ink); /* 2판 참조 호환용 별칭 */

  --c-card-on-ink:#0B141D;
  --c-rule-on-ink:#2C3540;
  --c-border-on-ink:#5E6E80;

  --c-border:#DDE1E8;
  --c-border-strong:#C3C9D4;

  --c-cta:#C2410C;
  --c-cta-hover:#9A330A;
  --c-cta-active:#7C2A08;
  --c-cta-label:#FFFFFF;

  --c-focus:#0F4C81;
  --c-warn:#92600E;
  --c-error-on-ink:#FF8578;
  --c-success-on-ink:#4ADE9A;

  /* 로고 2색 (§3-4 — 밝은 배경 기본 조합) */
  --logo-symbol:var(--c-brand);
  --logo-word:var(--c-text);

  /* 히어로/잉크 배경 도면 그리드 */
  --grid-minor:rgba(16,21,28,.045);
  --grid-major:rgba(16,21,28,.075);

  /* 다이어그램 선 굵기 보정 (다크에서 +0.2px) */
  --dia-sw:0;

  /* ---------- 3. 타이포 ---------- */
  --ff:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
       "Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --fs-h2:20px;   --lh-h2:1.38;  --ls-h2:-.015em;
  --fs-h3:17px;
  --fs-lead:15px;
  --fs-body:15px;
  --fs-caption:13px;
  --fs-eyebrow:12px;
  --fs-contact:16px;
  --fs-legal:12px;
  --fs-btn:16px;

  /* ---------- 4. 간격 ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px; --sp-12:96px;
  --sp-section:64px;
  --sp-section-hero-t:40px;
  --sp-section-hero-b:56px;
  --sp-gutter:20px;
  --w-max:1120px;
  --w-text:34em;
  --h-header:56px;
  --h-mobilebar:56px;
  --tap-min:44px;

  /* ---------- 5. 형태 ---------- */
  --r-xs:2px; --r-sm:4px; --r-none:0;
  --bw-hair:.8px; --bw-thin:1px; --bw-base:1.5px; --bw-bold:2px; --bw-focus:3px;
  --shadow-none:none;
  --shadow-sticky:0 1px 0 var(--c-border),0 4px 14px rgba(16,21,28,.07);
  --shadow-inset-active:inset 0 1px 2px rgba(0,0,0,.20);

  /* ---------- 6. 모션 ---------- */
  --dur-fast:120ms; --dur-base:180ms; --dur-enter:320ms; --dur-draw:420ms;
  --ease-out:cubic-bezier(.20,.70,.30,1);
  --ease-std:cubic-bezier(.40,0,.20,1);

  color-scheme:light dark;
}

@media (max-width:767px){
  :root{ --grid-minor:rgba(16,21,28,.030); --grid-major:rgba(16,21,28,.055); }
}

@media (min-width:768px){
  :root{
    --fs-h2:30px; --lh-h2:1.32;
    --fs-h3:18px; --fs-lead:18px; --fs-body:16px;
    --fs-contact:18px; --fs-legal:13px; --fs-btn:17px;
    --sp-section:80px; --sp-gutter:32px;
    --sp-section-hero-t:88px; --sp-section-hero-b:104px;
    --h-header:64px;
  }
}
@media (min-width:1024px){
  :root{ --sp-section:96px; --sp-gutter:40px; }
}

/* ---------- 7. 다크 모드 (§2-3) ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --c-bg:#0E1319;
    --c-surface:#161C24;
    --c-surface-sunken:#1E262F;
    --c-surface-alt-3d:#111823;
    --c-ink-section:#0A0E13;

    --c-text:#E8ECF2;
    --c-text-2:#B4BECB;
    --c-text-muted:#939DAB;
    --c-text-on-ink:#E8ECF2;
    --c-text-on-ink-2:#A9B6C6;

    --c-brand:#7FB3E8;
    --c-brand-surface:#132435;
    --c-card-on-ink:#080C11;
    --c-rule-on-ink:#272B2F;

    --c-border:#2B3440;
    --c-border-strong:#3D4855;

    --c-cta-hover:#CE4A0E;
    --c-cta-active:#B03A0B;
    --c-focus:#7FB3E8;
    --c-warn:#E0B252;

    --grid-minor:rgba(232,236,242,.050);
    --grid-major:rgba(232,236,242,.085);

    --dia-sw:.2px;
    --shadow-sticky:0 1px 0 var(--c-border-strong);
  }
}

/* ---------- 8. 리셋·기본 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--ff);
  font-size:var(--fs-body);
  line-height:1.70;
  word-break:keep-all;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
h1,h2,h3,p,dl,dd,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

.container{
  width:min(100% - (var(--sp-gutter) * 2),var(--w-max));
  margin-inline:auto;
}

.skip-link{
  position:absolute; left:var(--sp-4); top:calc(var(--sp-4) * -4);
  z-index:100;
  background:var(--c-bg); color:var(--c-brand);
  padding:var(--sp-3) var(--sp-4);
  border:var(--bw-base) solid var(--c-brand);
  border-radius:var(--r-sm);
  text-decoration:none; font-weight:700;
  transition:top var(--dur-fast) var(--ease-std);
}
.skip-link:focus{ top:var(--sp-4); }

:where(a,button,summary):focus-visible{
  outline:var(--bw-focus) solid var(--c-focus);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* ---------- 9. 섹션 골격 ---------- */
.section{ padding-block:var(--sp-section); }
.section--surface{ background:var(--c-surface); }

.h2{
  font-size:var(--fs-h2); font-weight:700;
  line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
  color:var(--c-text);
}
.lead{
  margin-top:var(--sp-3);
  font-size:var(--fs-lead); line-height:1.65; letter-spacing:-.005em;
  color:var(--c-text-2);
  max-width:var(--w-text);
}
.body-text{
  margin-top:var(--sp-4);
  color:var(--c-text-2);
  max-width:var(--w-text);
}

/* ---------- 10. 헤더 / CTA-4 ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  height:var(--h-header);
  background:transparent;
  transition:background-color var(--dur-base) var(--ease-std),
             box-shadow var(--dur-base) var(--ease-std);
}
.header-inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:block; height:20px; width:auto; }
@media (min-width:768px){ .logo{ height:22px; } }
.logo-link{ display:inline-flex; align-items:center; padding:var(--sp-2) 0; }

.site-header .header-cta{ display:none; }
.site-header.is-scrolled{
  background:color-mix(in srgb,var(--c-bg) 92%,transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sticky);
}
@media (min-width:1024px){
  .site-header.is-stuck .header-cta{ display:inline-flex; }
}
/* JS 미실행 환경: 헤더 CTA를 아예 노출하지 않는다 — CTA-1이 히어로에 이미 있다 */

/* ---------- 11. S-01 히어로 ---------- */
.hero{
  position:relative; isolation:isolate;
  background-color:var(--c-bg);
  padding-top:var(--sp-section-hero-t);
  padding-bottom:var(--sp-section-hero-b);
}
/* 배경 도면 그리드는 의사요소에 둔다 — 요소 본체에 mask를 걸면 텍스트까지 마스킹된다 */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-major) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg,var(--grid-major) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--grid-minor) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg,var(--grid-minor) 0 1px, transparent 1px 8px);
  -webkit-mask-image:radial-gradient(115% 95% at 22% 46%,transparent 0 34%,#000 76%);
          mask-image:radial-gradient(115% 95% at 22% 46%,transparent 0 34%,#000 76%);
}
.hero-grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center; }
.hero-copy{ grid-column:span 12; }
.hero-figure{ display:none; }
@media (min-width:768px){
  .hero-copy{ grid-column:span 8; }
  .hero-figure{ display:block; grid-column:span 4; aspect-ratio:21/16; }
}
@media (min-width:1024px){
  .hero-copy{ grid-column:span 7; }
  .hero-figure{ grid-column:span 5; }
}

.hero-h1{
  font-size:24px; line-height:1.40; letter-spacing:-.020em; font-weight:700;
  word-break:keep-all; text-wrap:normal; /* balance/pretty 금지 — <br> 고정 */
  color:var(--c-text);
}
.br-m{ display:inline; }
.br-d{ display:none; }
@media (min-width:768px){
  .br-m{ display:none; } .br-d{ display:inline; }
  .hero-h1{ font-size:34px; line-height:1.32; letter-spacing:-.022em; }
}
@media (min-width:1024px){ .hero-h1{ font-size:40px; line-height:1.28; letter-spacing:-.025em; } }
@media (min-width:1120px){ .hero-h1{ font-size:44px; } }

.hero-sub{
  margin-top:14px;
  font-size:var(--fs-lead); line-height:1.65; letter-spacing:-.005em;
  color:var(--c-text-2); max-width:30em;
}
.hero-actions{ margin-top:var(--sp-5); }
@media (min-width:768px){
  .hero-sub{ margin-top:var(--sp-5); }
  .hero-actions{ margin-top:28px; }
}

.cta-note{
  margin-top:var(--sp-2);
  font-size:var(--fs-caption); line-height:1.60;
  color:var(--c-text-muted);
}
.link-secondary{
  display:inline-block; margin-top:var(--sp-3);
  padding:10px 0;
  font-size:var(--fs-body);
  color:var(--c-text-2);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-std);
}
.link-secondary:hover{ color:var(--c-brand); text-decoration-thickness:2px; }

/* 히어로 우측 도면 그래픽 (A-01 슬롯 현재 점유물 · 장식) */
.hero-draft{ display:block; width:100%; height:auto; }
.hd-grid path{ fill:none; stroke:var(--c-brand); stroke-width:var(--bw-hair); opacity:.10; }
.hd-outline{ stroke:var(--c-text); stroke-width:var(--bw-thin); opacity:.10; }
.hd-dim path{ fill:none; stroke:var(--c-brand); stroke-width:var(--bw-thin); opacity:.22; }
.hd-dim .hd-dim-line{ stroke-width:var(--bw-base); }
.hd-dim .hd-arrow{ fill:var(--c-brand); stroke:none; }
.hd-label{ font-size:13px; font-weight:700; fill:var(--c-brand); opacity:.30; }
.hd-scale rect{ fill:var(--c-brand); opacity:.20; }
.hd-scale .hd-scale-line{ fill:none; stroke:var(--c-brand); stroke-width:var(--bw-thin); opacity:.30; }
.hd-scalelabel{ font-size:12px; font-weight:700; fill:var(--c-brand); opacity:.34; }
/* 태블릿(768–1023)에서는 축척 바 눈금을 5칸 → 3칸으로 줄인다 (05 §S-01 태블릿 지시) */
.hd-scale--full{ display:none; }
.hd-scale--short{ display:inline; }
@media (min-width:1024px){
  .hd-scale--full{ display:inline; }
  .hd-scale--short{ display:none; }
}

/* ---------- 12. 다이어그램 공통 ---------- */
.dia{ margin-top:var(--sp-7); }
.dia svg{ display:block; width:100%; height:auto; }
.dia-desktop{ display:none; }
.dia-mobile{ display:block; max-width:360px; margin-inline:auto; }
@media (min-width:1024px){
  .dia-desktop{ display:block; max-width:960px; margin-inline:auto; }
  .dia-mobile{ display:none; }
}
/* 다크에서 얇은 선이 사라지지 않게 굵기 보정 */
@media (prefers-color-scheme:dark){
  .dia svg [stroke-width]{ stroke-width:calc(var(--bw-thin) + var(--dia-sw)); }
}

/* S-02 유도선 드로잉 (페이지 내 유일한 드로잉 모션) */
.dim-lead{ stroke-dasharray:3 4; }
.reveal .dim-lead{ animation:none; }
.reveal-ready .dia--s02 .dim-lead{ stroke-dashoffset:240; }
.reveal-ready .dia--s02.is-in .dim-lead{
  animation:draw var(--dur-draw) var(--ease-out) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.reveal-ready .reveal{ opacity:0; transform:translateY(8px); }
.reveal-ready .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out);
}

/* ---------- 13. S-02 규칙 카드 ---------- */
.rule-cards{
  margin-top:var(--sp-7);
  display:grid; grid-template-columns:1fr; gap:var(--sp-4);
}
@media (min-width:768px){ .rule-cards{ grid-template-columns:1fr 1fr; gap:24px; } }
@media (min-width:1024px){ .rule-cards{ grid-template-columns:repeat(3,1fr); } }
.rule-card{
  background:var(--c-bg);
  border:var(--bw-thin) solid var(--c-border-strong);
  border-radius:var(--r-sm);
  padding:var(--sp-6);
  box-shadow:var(--shadow-none);
  transition:border-color var(--dur-fast) var(--ease-std);
}
.rule-card:hover{ border-color:var(--c-brand); }
@media (min-width:768px){ .rule-cards > .rule-card:nth-child(3){ grid-column:span 2; } }
@media (min-width:1024px){ .rule-cards > .rule-card:nth-child(3){ grid-column:auto; } }
.rule-num{
  display:block;
  font-size:var(--fs-eyebrow); font-weight:700; line-height:1.40; letter-spacing:.10em;
  color:var(--c-brand); font-variant-numeric:tabular-nums;
}
.rule-card::after{ content:none; }
.rule-title{
  position:relative;
  margin-top:26px;
  font-size:var(--fs-h3); font-weight:700; line-height:1.45; letter-spacing:-.01em;
  color:var(--c-text);
}
.rule-title::before{
  content:""; position:absolute; top:-26px; left:0;
  width:28px; height:var(--bw-bold);
  background:var(--c-brand);
}
.rule-desc{ margin-top:var(--sp-2); color:var(--c-text-2); }

/* ---------- 14. S-03 모바일 세로 타임라인 ---------- */
.steps-mobile{ margin-top:var(--sp-7); display:grid; gap:0; }
@media (min-width:1024px){ .steps-mobile{ display:none; } }
.step-block{
  position:relative;
  background:var(--c-surface);
  border:var(--bw-thin) solid var(--c-border-strong);
  border-radius:var(--r-sm);
  padding:var(--sp-5);
}
.step-block + .step-block{ margin-top:calc(32px + var(--sp-4)); }
.step-block + .step-block::before{
  content:""; position:absolute; left:50%; top:calc(-32px - var(--sp-2));
  width:var(--bw-base); height:32px; background:var(--c-brand);
}
.step-block + .step-block::after{
  content:""; position:absolute; left:50%; top:calc(-1 * var(--sp-2)); translate:-50% 0;
  border-left:3.6px solid transparent; border-right:3.6px solid transparent;
  border-top:8px solid var(--c-brand);
}
.step-num{
  display:block;
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.10em;
  color:var(--c-brand); font-variant-numeric:tabular-nums;
}
.step-badge{
  position:absolute; top:var(--sp-5); right:var(--sp-5);
  display:inline-block; padding:2px 10px;
  background:var(--c-brand-surface);
  border:var(--bw-thin) solid var(--c-brand);
  border-radius:var(--r-xs);
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.10em; line-height:1.40;
  color:var(--c-brand);
}
.step-title{
  margin-top:var(--sp-2);
  font-size:var(--fs-h3); font-weight:700; line-height:1.45; color:var(--c-text);
}
.step-desc{ margin-top:var(--sp-2); color:var(--c-text-2); }

.cta-block{ margin-top:var(--sp-8); }

/* ---------- 15. S-04 스펙 스트립 ---------- */
.spec-strip{
  margin-top:var(--sp-7);
  padding:var(--sp-5) 0 0;
  border-top:var(--bw-thin) solid var(--c-border);
  border-radius:var(--r-none);
  display:grid; gap:var(--sp-2);
  font-size:var(--fs-caption); line-height:1.60;
  color:var(--c-text-muted);
}
@media (min-width:768px){
  .spec-strip{ grid-template-columns:repeat(3,1fr); gap:0; }
  .spec-strip > li{ padding-inline:var(--sp-5); }
  .spec-strip > li:first-child{ padding-left:0; }
  .spec-strip > li + li{ border-left:var(--bw-thin) solid var(--c-border); }
}

/* ---------- 16. S-05 FAQ ---------- */
.faq-wrap{ max-width:760px; }
.faq-item{ border-bottom:var(--bw-thin) solid var(--c-border); }
.faq-item:first-of-type{ border-top:var(--bw-thin) solid var(--c-border); }
.faq-item > summary{
  position:relative;
  list-style:none; cursor:pointer;
  padding:var(--sp-5) 40px var(--sp-5) 0;
  font-size:var(--fs-h3); font-weight:700; line-height:1.45; letter-spacing:-.01em;
  color:var(--c-text);
  transition:color var(--dur-fast) var(--ease-std);
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary:hover{ color:var(--c-brand); }
.faq-mark{ position:absolute; right:0; top:50%; translate:0 -50%; width:20px; height:20px; }
.faq-mark svg{ display:block; width:20px; height:20px; }
.faq-mark path{ fill:none; stroke:var(--c-brand); stroke-width:var(--bw-base); }
.faq-mark .fm-v{ transition:opacity var(--dur-fast) var(--ease-std); }
.faq-item[open] .faq-mark .fm-v{ opacity:0; }
.faq-item > p{
  padding-bottom:var(--sp-5);
  margin-top:var(--sp-3);
  color:var(--c-text-2); max-width:var(--w-text);
}
#faq{ scroll-margin-top:calc(var(--h-header) + 16px); }

/* ---------- 17. CTA ---------- */
.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 28px;
  border:0; border-radius:var(--r-sm);
  background:var(--c-cta); color:var(--c-cta-label);
  font-size:var(--fs-btn); font-weight:700; line-height:1.2; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-std),
             box-shadow var(--dur-fast) var(--ease-std),
             transform var(--dur-fast) var(--ease-std);
}
.btn-cta{ width:100%; }
@media (min-width:768px){ .btn-cta{ width:auto; } }
.btn-cta--block{ width:100%; }
.btn-cta--sm{ min-height:40px; padding:0 18px; font-size:14px; width:auto; }
.btn-cta:hover{ background:var(--c-cta-hover); }
.btn-cta:active{ background:var(--c-cta-active); box-shadow:var(--shadow-inset-active); transform:translateY(1px); }
@media (hover:none){ .btn-cta:hover{ background:var(--c-cta); } }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 24px;
  border:var(--bw-base) solid var(--c-brand);
  border-radius:var(--r-sm);
  background:transparent; color:var(--c-brand);
  font-size:var(--fs-btn); font-weight:700; line-height:1.2; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-std);
}
.btn-outline:hover{ background:var(--c-brand-surface); }
.btn-outline:active{ background:var(--c-brand-surface); box-shadow:var(--shadow-inset-active); transform:translateY(1px); }
@media (hover:none){ .btn-outline:hover{ background:transparent; } }

/* ---------- 18. S-06 잉크 섹션 + 접수 카드 ---------- */
.section--ink{
  position:relative; isolation:isolate;
  background:var(--c-ink-section);
  --grid-minor:rgba(255,255,255,.035);
  --grid-major:rgba(255,255,255,.06);
}
.section--ink::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-major) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg,var(--grid-major) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--grid-minor) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg,var(--grid-minor) 0 1px, transparent 1px 8px);
}
#apply{ scroll-margin-top:calc(var(--h-header) + 24px); }
.apply-wrap{ max-width:560px; }
.h2--on-ink{ color:var(--c-text-on-ink); }
.apply-sub{
  margin-top:var(--sp-3);
  font-size:var(--fs-lead); line-height:1.65;
  color:var(--c-text-on-ink-2);
}
.apply-card{
  margin-top:28px;
  background:var(--c-card-on-ink);
  border:var(--bw-thin) solid var(--c-rule-on-ink);
  border-radius:var(--r-sm);
  padding:var(--sp-6) var(--sp-5);
  box-shadow:var(--shadow-none);
}
@media (min-width:768px){
  .apply-card{ margin-top:var(--sp-7); padding:var(--sp-7); max-width:480px; margin-inline:auto; }
}

/* ① 「메일에 담을 것」 — 단일 <p> 노드, 번호는 문자열 자체에 들어 있다 */
.mail-brief{
  white-space:pre-line;
  border-left:var(--bw-thin) solid var(--c-brand-on-ink);
  padding-left:14px;
  font-size:var(--fs-body); font-weight:400; line-height:1.75;
  color:var(--c-text-on-ink);
  word-break:keep-all;
  user-select:text;
}

/* ② CTA-3 보조문구 (버튼 위) */
.cta-note--on-ink{ margin-top:var(--sp-5); color:var(--c-text-on-ink-2); }
@media (min-width:768px){ .cta-note--on-ink{ margin-top:var(--sp-6); } }

/* ③ CTA-3 */
#mailCta{ margin-top:10px; min-height:52px; }
@media (min-width:768px){ #mailCta{ min-height:56px; } }
.section--ink .btn-cta:focus-visible{ outline-color:var(--c-brand-on-ink); }

/* ④ 이메일 주소 + 복사 버튼 */
.contact-row{
  margin-top:18px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
@media (min-width:768px){ .contact-row{ margin-top:var(--sp-5); } }
.contact-value{
  font-size:var(--fs-contact); font-weight:600; line-height:1.40; letter-spacing:0;
  font-variant-numeric:tabular-nums;
  color:var(--c-text-on-ink);
  user-select:all;
}
.btn-copy{
  height:var(--tap-min); min-width:56px; padding:0 14px;
  background:transparent; color:var(--c-text-on-ink);
  border:var(--bw-thin) solid var(--c-border-on-ink);
  border-radius:var(--r-sm);
  font-size:var(--fs-caption); font-weight:600;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-std);
}
.btn-copy:hover{ background:rgba(255,255,255,.08); }
.btn-copy:active{ background:rgba(255,255,255,.08); box-shadow:var(--shadow-inset-active); transform:translateY(1px); }
.btn-copy:focus-visible{ outline:var(--bw-focus) solid var(--c-brand-on-ink); outline-offset:2px; }
@media (hover:none){ .btn-copy:hover{ background:transparent; } }

/* 복사 피드백 — 자리 예약 20px (CLS 0). 성공/실패가 같은 노드에서 교대한다 */
.copy-status{
  margin-top:var(--sp-2);
  min-height:20px;
  font-size:var(--fs-caption); line-height:1.55;
  color:var(--c-text-on-ink-2);
}
.copy-status.is-ok{ color:var(--c-success-on-ink); }
.copy-status.is-fading{ opacity:0; transition:opacity var(--dur-base) var(--ease-std); }

/* ⑤ 카드 내부 구분선 */
.card-rule{
  height:0; margin:var(--sp-5) 0;
  border:0; border-top:var(--bw-thin) solid var(--c-rule-on-ink);
}
@media (min-width:768px){ .card-rule{ margin:var(--sp-6) 0; } }

/* ⑥ 전화 (CTA-T) — 기기 분기는 CSS display 토글로만 한다 */
.tel-note{ font-size:var(--fs-caption); line-height:1.60; color:var(--c-text-on-ink-2); }
.contact-row--tel{ margin-top:var(--sp-2); }
.tel-link{
  display:inline-flex; align-items:center;
  min-height:48px; padding:12px 0;
  font-size:var(--fs-contact); font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  color:var(--c-text-on-ink);
  text-decoration:underline; text-underline-offset:3px;
}
.tel-text{ display:none; white-space:nowrap; cursor:text; }
.btn-copy--tel{ display:none; }
@media (min-width:768px){
  .tel-link{ display:none; }
  .tel-text{ display:inline; }
  .btn-copy--tel{ display:inline-flex; align-items:center; justify-content:center; }
}
.copy-status--tel{ display:none; }
@media (min-width:768px){ .copy-status--tel{ display:block; } }

/* ⑦ 팩스 · 처리방침 */
.fax-note{
  margin-top:14px;
  font-size:var(--fs-legal); font-weight:400; line-height:1.70;
  font-variant-numeric:tabular-nums;
  color:var(--c-text-on-ink-3);
}
@media (min-width:768px){ .fax-note{ margin-top:var(--sp-4); } }
.card-policy{ margin-top:var(--sp-3); }
.card-policy a{
  display:inline-flex; align-items:center;
  padding:12px 0; min-height:var(--tap-min);
  font-size:var(--fs-legal);
  color:var(--c-brand-on-ink);
  text-decoration:underline; text-underline-offset:3px;
}
.card-policy a:focus-visible{ outline-color:var(--c-brand-on-ink); }

/* ---------- 19. S-F 푸터 ---------- */
.site-footer{
  background:var(--c-ink-section);
  border-top:var(--bw-thin) solid var(--c-rule-on-ink);
  border-radius:var(--r-none);
  padding-block:var(--sp-8);
  font-size:var(--fs-legal); line-height:1.70;
  color:var(--c-text-on-ink-2);
}
@media (min-width:768px){ .site-footer{ padding-block:var(--sp-9); } }
.footer-row1{ display:grid; gap:var(--sp-5); }
@media (min-width:768px){
  .footer-row1{ grid-template-columns:max-content 1fr; column-gap:var(--sp-9); align-items:start; }
}
.logo--footer{ height:18px; color:var(--c-text-on-ink); }
.footer-tagline{ margin-top:var(--sp-2); color:var(--c-text-on-ink-2); }

.biz-info{ display:block; }
.biz-info .pair{ display:inline; }
.biz-info dt,.biz-info dd{ display:inline; margin:0; }
.biz-info dt{ font-weight:600; }
.biz-info dd{ font-weight:400; }
.biz-info dd::before{ content:" "; }
.biz-info .pair:not(:last-child)::after{ content:" \00B7 "; }
.biz-info .pair{ white-space:nowrap; }
.biz-info .pair--addr{ white-space:normal; }
.biz-info .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.biz-info dd{ user-select:all; }
@media (min-width:768px){
  .biz-info{
    display:grid; grid-template-columns:max-content 1fr;
    row-gap:var(--sp-1); column-gap:var(--sp-3);
  }
  .biz-info .pair{ display:contents; white-space:normal; }
  .biz-info .pair:not(:last-child)::after{ content:none; }
  .biz-info dd::before{ content:none; }
}

.footer-row2{
  margin-top:var(--sp-6);
  padding-top:var(--sp-4);
  border-top:var(--bw-thin) solid var(--c-rule-on-ink);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2);
}
@media (min-width:768px){
  .footer-row2{ flex-direction:row; align-items:center; gap:var(--sp-6); }
}
.footer-policy{
  display:inline-flex; align-items:center;
  min-height:var(--tap-min); padding:12px 0;
  color:var(--c-text-on-ink);
  text-decoration:underline; text-underline-offset:3px;
  transition:text-decoration-thickness var(--dur-fast) var(--ease-std);
}
.footer-policy:hover{ text-decoration-thickness:2px; }
.footer-policy:focus-visible{ outline:var(--bw-focus) solid var(--c-brand-on-ink); outline-offset:2px; }
.footer-copy{ color:var(--c-text-on-ink-3); }

/* 미입력 경고 폴백 (§SF-7) — 정상 경로에서 발동하지 않는다 */
.legal-missing{
  color:var(--c-error-on-ink);
  border:var(--bw-thin) dashed var(--c-error-on-ink);
  border-radius:var(--r-xs);
  padding:1px 6px;
}

/* ---------- 20. 모바일 하단 고정바 (CTA-5) ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  height:var(--h-mobilebar);
  padding:0 16px calc(env(safe-area-inset-bottom));
  display:flex; align-items:center;
  background:var(--c-bg);
  border-top:var(--bw-thin) solid var(--c-border-strong);
  box-shadow:var(--shadow-sticky);
  transform:translateY(100%);
  /* 🔴 off 상태에서 transform 만으로 숨기면 화면 밖 버튼에 키보드 포커스가 잡힌다.
     visibility:hidden 으로 포커스 대상에서 제외하고, transition 에 visibility 를
     포함해 슬라이드 애니메이션이 끊기지 않게 한다(visibility 는 discrete 전환이라
     들어올 때는 즉시 visible, 나갈 때는 지연 후 hidden 이 된다). */
  visibility:hidden;
  transition:transform var(--dur-base) var(--ease-std),
             visibility var(--dur-base) var(--ease-std);
}
.mobile-bar .btn-cta{ min-height:calc(var(--h-mobilebar) - 8px); }
.mobile-bar.is-on{ transform:translateY(0); visibility:visible; }
@media (min-width:1024px){ .mobile-bar{ display:none; } }
/* 고정바 회피 여백은 body가 아니라 푸터가 갖는다 — body에 두면 푸터 아래에
   배경색이 다른 흰 띠가 남는다. 고정바는 S-06 진입 시 이미 숨겨져 있으므로
   이 여백이 실제로 콘텐츠를 밀어내는 상황은 발생하지 않는다. */
@media (max-width:1023px){
  .site-footer{ padding-bottom:calc(var(--sp-8) + var(--h-mobilebar) + env(safe-area-inset-bottom)); }
}

/* ---------- 21. 모션 감소 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .reveal-ready .reveal{ opacity:1 !important; transform:none !important; }
  .reveal-ready .dia--s02 .dim-lead{ stroke-dashoffset:0 !important; animation:none !important; }
}

/* ============================================================
   22. privacy.html — 법정 문서 (잉크 섹션·CTA 색 미사용)
   ============================================================ */
.doc-header{
  border-bottom:var(--bw-thin) solid var(--c-border);
  padding-block:var(--sp-4);
}
.doc-header .header-inner{ gap:var(--sp-5); }
.doc-header .logo{ height:22px; }
.back-link{
  font-size:var(--fs-caption);
  color:var(--c-brand);
  text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:var(--tap-min); padding:10px 0;
}
.doc{
  max-width:720px; margin-inline:auto;
  padding-block:var(--sp-9) var(--sp-11);
  font-size:16px; line-height:1.8;
}
.doc h1{
  font-size:var(--fs-h2); font-weight:700; line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
}
.doc-meta{
  margin-top:var(--sp-4);
  font-size:var(--fs-caption); color:var(--c-text-muted);
}
.doc-meta dt,.doc-meta dd{ display:inline; margin:0; }
.doc-meta dt{ font-weight:600; }
.doc-meta .pair:not(:last-child)::after{ content:" \00B7 "; }
.doc-meta dd::before{ content:" "; }

.doc-toc{
  margin-top:var(--sp-7);
  padding:var(--sp-5);
  background:var(--c-surface);
  border:var(--bw-thin) solid var(--c-border-strong);
  border-radius:var(--r-sm);
  font-size:var(--fs-caption);
}
.doc-toc h2{ font-size:var(--fs-h3); font-weight:700; }
.doc-toc ol{ margin-top:var(--sp-3); counter-reset:toc; }
.doc-toc li{ counter-increment:toc; }
.doc-toc li::before{ content:counter(toc) ". "; color:var(--c-text-muted); }
.doc-toc a{ color:var(--c-brand); text-decoration:underline; text-underline-offset:3px; }

.doc-art{ margin-top:var(--sp-8); scroll-margin-top:var(--sp-5); }
.doc-art h2{
  font-size:var(--fs-h3); font-weight:700; line-height:1.45; color:var(--c-text);
}
.doc-art > p{ margin-top:var(--sp-3); color:var(--c-text-2); }
.doc-fixed{
  margin-top:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-left:var(--bw-bold) solid var(--c-brand);
  background:var(--c-brand-surface);
  font-size:var(--fs-caption); color:var(--c-text);
}
.doc-fixed dt,.doc-fixed dd{ margin:0; }
.doc-fixed dt{ font-weight:600; }
.doc-fixed dd{ margin-bottom:var(--sp-2); }
.doc-fixed dd:last-child{ margin-bottom:0; }
.pending{
  display:inline-block;
  margin-top:var(--sp-3);
  padding:2px 8px;
  border:var(--bw-thin) dashed var(--c-warn);
  border-radius:var(--r-xs);
  font-size:var(--fs-caption);
  color:var(--c-warn);
  font-variant-numeric:tabular-nums;
}

@media print{
  .doc-header,.doc-toc{ border:0; background:none; }
  .back-link,.skip-link{ display:none; }
  body{ background:#fff; color:#000; }
  .doc{ max-width:none; padding:0; }
  .doc-fixed{ background:none; }
  a::after{ content:" (" attr(href) ")"; font-size:.85em; word-break:break-all; }
  a[href^="#"]::after{ content:""; }
}