/* ═══════════════════════════════════════════════════════════
   aisajang — 공통 스타일 (정본 토큰 = act2/b2a/design.md v1.0)
   잉크와 활자: 종이(라이트) 세계 기본 + 홈 히어로만 잉크 구역
   다크모드 없음(0단계 기획 확정) · 잉크 구역은 항상 어둡다
   ═══════════════════════════════════════════════════════════ */

:root{
  /* colors — design.md v1.0 frontmatter 그대로 */
  --ink:#191919;
  --ink-soft:#3d3b36;
  --paper:#f7f5f1;
  --paper-white:#ffffff;
  --line:#e6e2d9;
  --line-strong:#d5d0c3;
  --gray-warm:#55524b;
  --gray-mute:#8a867c;
  --accent:#b5432a;
  --accent-deep:#9a3722;
  --on-ink:#f7f5f1;
  --on-ink-muted:#cfccc5;
  --on-accent:#ffffff;
  --iz-bg:#161412;
  --iz-fg:#f4f1ea;
  --iz-muted:#9a948a;
  --iz-line:#37332e;
  --ok:#2e6e4e;
  --iz-ok:#7bc29e;

  /* typography */
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;

  /* radius */
  --r-sm:8px;
  --r-md:10px;
  --r-pill:9999px;

  /* layout */
  --w-marketing:1160px;
  --w-reading:720px;
  --sec:72px;
  --sec-m:48px;
}

/* ── base ─────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0; background:var(--paper);}
body{
  font-family:var(--sans); color:var(--ink);
  font-size:16px; line-height:1.65;
  word-break:keep-all; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}

h1,h2,h3{margin:0; letter-spacing:-.025em; text-wrap:balance;}
h1{font-size:clamp(30px,4vw,52px); font-weight:900; line-height:1.2;}
h2{font-size:clamp(23px,3.2vw,28px); font-weight:900; line-height:1.3;}
h3{font-size:20px; font-weight:700; line-height:1.4;}
p{margin:0 0 1em;}

/* ★폭 규칙은 좌우만 만진다 — 축약형 padding이 구역의 위아래 여백(section 72px)을 지워 버리는 결함의 뿌리 수리(260718) */
.wrap{max-width:var(--w-marketing); margin:0 auto; padding-left:28px; padding-right:28px; position:relative;}
/* 읽기 구역 — 폭은 720으로 좁히되 왼쪽 기준선은 전시 구역(1160)과 같은 선에 맞춘다 (260718 기준선 통일) */
.wrap-reading{max-width:var(--w-marketing); margin:0 auto; padding-left:28px; padding-right:28px;}
.wrap-reading > *{max-width:var(--w-reading);}
section{padding:var(--sec) 0;}

.lead{font-family:var(--serif); color:var(--ink-soft); font-size:15.5px; margin:0 0 30px;}
.muted{color:var(--gray-warm);}
.caption{font-size:13px; color:var(--gray-mute); line-height:1.5;}
.label{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-mute);}
.kicker-line{font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--gray-mute); text-transform:uppercase; margin-bottom:18px;}
.kicker-line .dot{color:var(--accent);}

/* ── 버튼 3종 (design.md components) ─────────────────── */
.btn{
  display:inline-block; font-size:15px; font-weight:700; text-decoration:none;
  border-radius:var(--r-pill); padding:12px 22px; letter-spacing:-.01em;
  border:0; cursor:pointer; font-family:var(--sans);
  transition:transform .15s, filter .15s;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.06);}
.btn-primary{background:var(--ink); color:var(--on-ink);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink); padding:10.5px 20.5px;}
.btn-accent{background:var(--accent); color:var(--on-accent);} /* 화면당 1개 상한 */

.text-link{color:var(--accent); text-decoration:none;}
.text-link:hover{text-decoration:underline; text-underline-offset:3px;}

/* ── 부품 ─────────────────────────────────────────────── */
.card{
  background:var(--paper-white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px;
}
.callout{
  background:var(--paper-white); border-left:3px solid var(--accent);
  padding:14px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
kbd{
  background:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); padding:1px 7px;
  font-family:var(--sans); font-size:14px; font-weight:700;
}
.stamp{
  display:inline-block; border:2px solid var(--accent); color:var(--accent);
  border-radius:var(--r-sm); padding:3px 10px; font-weight:900; font-size:13px;
  letter-spacing:.04em;
}

/* ── GNB ─────────────────────────────────────────────── */
.gnb{
  background:var(--paper); border-bottom:1px solid var(--line);
  position:relative; z-index:20;
}
.gnb-in{display:flex; align-items:center; gap:26px; height:60px;}
.gnb .logo, .inkzone .logo{
  font-weight:900; font-size:17.5px; letter-spacing:-.01em;
  display:flex; align-items:center; text-decoration:none;
}
.seal-mini{
  display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px; border:2px solid var(--accent); border-radius:50%;
  color:var(--accent); font-size:10px; font-weight:900; margin-right:8px;
  transform:rotate(-8deg); flex:none;
}
.gnb-menu{display:flex; gap:20px; font-size:13.5px; color:var(--gray-warm); margin-left:auto; letter-spacing:.02em;}
.gnb-menu a{text-decoration:none; padding:2px 0; transition:color .15s;}
.gnb-menu a:hover{color:var(--ink);}
.gnb-menu a[aria-current="page"]{color:var(--ink); font-weight:700;}
.gnb-cta{
  font-size:12.5px; font-weight:700; color:var(--on-ink); background:var(--ink);
  border-radius:var(--r-pill); padding:8px 16px; white-space:nowrap;
  text-decoration:none; letter-spacing:.02em;
}
.gnb-burger{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:10px; flex:none;
}
.gnb-burger span{display:block; height:2px; background:var(--ink); margin:5px 0; transition:.2s;}
.gnb-mobile{
  display:none; border-top:1px solid var(--line); background:var(--paper);
  padding:10px 28px 18px;
}
.gnb-mobile a{
  display:block; padding:12px 0; text-decoration:none; font-size:16px; font-weight:700;
  border-bottom:1px solid var(--line);
}
.gnb-mobile a[aria-current="page"]{color:var(--accent);}
.gnb.open .gnb-mobile{display:block;}

/* 잉크 구역 안 나브(홈) */
.inkzone .gnb{background:transparent; border-bottom:0;}
.inkzone .gnb-menu{color:var(--iz-muted);}
.inkzone .gnb-menu a:hover{color:var(--iz-fg);}
.inkzone .gnb-menu a[aria-current="page"]{color:var(--iz-fg);}
.inkzone .gnb-cta{color:var(--iz-bg); background:var(--iz-fg); border-radius:6px;}
.inkzone .gnb-burger span{background:var(--iz-fg);}
.inkzone .gnb-mobile{background:var(--iz-bg); border-top:1px solid var(--iz-line);}
.inkzone .gnb-mobile a{border-bottom:1px solid var(--iz-line); color:var(--iz-fg);}

/* ── 잉크 구역 (홈 히어로 전용·항상 어둡다) ─────────── */
.inkzone{background:var(--iz-bg); color:var(--iz-fg); position:relative; overflow:hidden;}
.inkzone > *{position:relative;}
#stars{position:absolute; inset:0; pointer-events:none;}

/* ── 페이지 헤더(내지 공통) ──────────────────────────── */
.page-head{padding:56px 0 8px;}
.page-head .lead{margin-bottom:0;}

/* ── 푸터 (잉크 반전) ────────────────────────────────── */
footer.site{
  background:var(--ink); color:var(--on-ink-muted);
  font-size:12px; padding:34px 0 44px; margin-top:var(--sec);
}
footer.site .foot-in{display:flex; flex-wrap:wrap; gap:18px 34px; align-items:baseline;}
footer.site .foot-logo{color:var(--on-ink); font-weight:900; font-size:15px;}
footer.site a{color:var(--on-ink-muted); text-decoration:underline; text-underline-offset:3px;}
footer.site .foot-note{width:100%; color:var(--gray-mute);}

/* ── 등장 모션 ───────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
html.no-observer .reveal{opacity:1; transform:none;}

/* ── 카드 그리드 ─────────────────────────────────────── */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}

/* 갈래 카드(홈)·구역 카드(가이드) */
.path{
  background:var(--paper-white); border:1px solid var(--line); border-radius:12px;
  padding:24px 22px 20px; text-decoration:none; display:block;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.path:hover{
  border-color:var(--ink); transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(25,25,25,.05), 0 12px 40px -12px rgba(25,25,25,.18);
}
.path .q{font-family:var(--serif); font-size:13.5px; color:var(--gray-mute); display:block; margin-bottom:9px;}
.path b{font-size:18px; font-weight:900; letter-spacing:-.01em; display:block; margin-bottom:8px;}
.path p{font-size:13.8px; color:var(--ink-soft); margin:0 0 16px;}
.path .go{font-size:13.5px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px;}
.path .go i{font-style:normal; transition:transform .2s ease;}
.path:hover .go i{transform:translateX(4px);}
.path:hover .go{border-bottom:2px solid var(--accent);}

/* ── 수치 스트립 ─────────────────────────────────────── */
.strip{border-bottom:1px solid var(--line); background:var(--paper);}
.strip-in{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:34px 0 24px; text-align:center;}
.stat b{
  display:block; font-size:clamp(28px,3.6vw,42px); font-weight:900;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stat b .u{font-size:.5em; font-weight:700; color:var(--ink-soft); margin-left:2px;}
.stat span{font-size:13px; color:var(--gray-mute);}
.strip-note{text-align:center; font-size:11.5px; color:var(--gray-mute); padding-bottom:16px;}

/* ── FAQ ─────────────────────────────────────────────── */
.faq details{
  background:var(--paper-white); border:1px solid var(--line);
  border-radius:var(--r-md); margin-bottom:10px;
}
.faq summary{
  cursor:pointer; list-style:none; padding:16px 20px;
  font-weight:700; font-size:16px; display:flex; align-items:center; gap:10px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"﹢"; color:var(--accent); font-weight:900; flex:none;}
.faq details[open] summary::before{content:"﹣";}
.faq .a{padding:0 20px 18px 44px; color:var(--ink-soft); font-size:15px; line-height:1.75;}
.faq .a .src{display:block; margin-top:8px; font-size:12px; color:var(--gray-mute);}

/* ── 폼 ──────────────────────────────────────────────── */
.field{margin-bottom:14px;}
.field label{display:block; font-size:13.5px; font-weight:700; margin-bottom:6px;}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--paper-white); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); padding:11px 13px;
}
.field textarea{min-height:130px; resize:vertical;}
.form-note{font-size:12.5px; color:var(--gray-mute); margin-top:10px;}
.form-msg{display:none; margin-top:12px; font-size:14px; font-weight:700;}
.form-msg.on{display:block;}
.form-msg.ok{color:var(--ok);}
.form-msg.err{color:var(--accent-deep);}

/* 구독 인라인 폼 */
.sub-form{display:flex; gap:10px; max-width:460px;}
.sub-form input{
  flex:1; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--paper-white); border:1px solid var(--line-strong);
  border-radius:var(--r-pill); padding:12px 18px; min-width:0;
}

/* ── 긴 글(가이드·문서) ──────────────────────────────── */
.prose{font-size:18px; line-height:1.75; color:var(--ink);}
.prose h2{margin:1.8em 0 .6em;}
.prose h3{margin:1.6em 0 .5em;}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li{margin-bottom:.4em;}

/* ── 표 ──────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;}
table.plain{border-collapse:collapse; width:100%; font-size:14.5px;}
table.plain th,table.plain td{border:1px solid var(--line); padding:10px 13px; text-align:left; vertical-align:top;}
table.plain th{background:var(--paper-white); font-weight:700;}

/* ── 모션 감쇠 ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn,.path,.path .go i{transition:none;}
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ── 반응형 ──────────────────────────────────────────── */
@media (max-width:1023px){
  .grid-3{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  section{padding:var(--sec-m) 0;}
  .gnb-menu,.gnb .gnb-cta{display:none;}
  .gnb-burger{display:block;}
  .wrap,.wrap-reading{padding-left:20px; padding-right:20px;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .strip-in{gap:8px; padding:24px 0 16px;}
  .stat span{font-size:11.5px;}
  .prose{font-size:17px;}
  .sub-form{flex-direction:column;}
}