/* ============================================================
   site.css — 마케팅·문서 페이지 공통 (로비/위키/블로그/요금제/법적/auth)
   landing.html 인라인 <style>에서 승격(2026-07-04, design/site-ia-spec-2026-07-04.md §3).
   원칙: MoMA 미감 — 옅은 녹색기 종이 지면(구 순백, 2026-07-07 숲 틴트) · Inter 헤비 · 그린은 인터랙션에만 · 강한 룰(직각).
   이 파일은 라이트 고정(마케팅 지면). 앱(/app)만 다크·라이트 토글(style.css).
   ============================================================ */
:root {
  /* 숲 틴트(2026-07-07 운영자): 순백 → 연녹 세이지 종이. 1차 #f6f8f3(흰색과 구분 불가)·2차 #f1f5ea(여전히 약함)
     판정을 거쳐 3차값 — 단독으로도 '연녹색 지면'으로 읽히는 세기. 잉크·악센트·검은 CTA는 불변 */
  --bg:#ecf2df; --panel:#e3ecd1; --panel-2:#d8e4c1;
  --text:#0a0a0a; --ink:#000; --muted:#585858; --faint:#8c8c8c;
  --line:#ccd7b8; --line-2:#9a9a9a; --rule:#111;
  --accent:#2f8f5b; --accent-ink:#1e6e43;
  --wood:#6b4a2d;   /* 목재 CTA 베이스(줄기 계열) — cta-wood.svg와 짝 */
  --maxw:1300px; --gutter:clamp(1.75rem,5vw,4rem);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",Arial,sans-serif;
  /* 멀티페이지 추가분(§3.2) */
  --prose:72ch;          /* 위키 본문 폭 */
  --prose-legal:70ch;    /* 법적 문서 폭 */
  --toc-w:240px;         /* 위키 사이드 TOC */
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;
  letter-spacing:-0.005em;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
::selection{background:#2f8f5b;color:#fff;} ::-moz-selection{background:#2f8f5b;color:#fff;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
/* 한국어: 어절(단어) 중간 줄바꿈 금지 — 랜딩 규칙을 공통으로 승격(§1.4) */
h1,h2,h3,h4,p,li,dt,dd,figcaption{word-break:keep-all;}
/* eyebrow·라벨: 워드마크 성격(정상 대소문자·좁은 자간·헤비)로 — 넓은 자간 대문자 '템플릿' 티 제거 */
/* 원칙: 라벨은 넓은 자간 대문자 금지(한/영 공통) — Claude 템플릿 티 제거, 운영자 반복 지적 */
.eyebrow{font-size:.82rem;letter-spacing:-.01em;font-weight:800;color:var(--ink);}
.eyebrow .g{color:var(--accent);}
/* 나무 글머리(전 페이지 공통) — 구 ✦ 리터럴 대체, landing에서 승격 */
.eyebrow::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.5em;
  vertical-align:-.1em;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='29.5,58 34.5,58 33,41 31,41'/%3E%3Cpolygon points='32,12 18,43 46,43'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='29.5,58 34.5,58 33,41 31,41'/%3E%3Cpolygon points='32,12 18,43 46,43'/%3E%3C/svg%3E") center/contain no-repeat;}
section[id],header[id]{scroll-margin-top:70px;}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:.85rem 1.5rem;border:1.5px solid var(--rule);transition:background .2s,color .2s,transform .12s;cursor:pointer;font-family:inherit;}
.btn--fill{background:var(--ink);color:var(--bg);}
.btn--fill:hover{transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--bg);}
/* 목재 버튼(히어로 '바로 체험하기'·'이메일 남기기' 등) — nav__cta와 동일 자산, 큰 사이즈.
   --wimg로 나무토막 배치 교체(.wood5 = #5 변주, 나란한 버튼 복붙 티 방지) */
.btn--wood{--wimg:url("cta-wood.svg");position:relative;color:#fff;border:0;text-shadow:0 1px 2px rgba(22,13,4,.6);overflow:visible;
  background:var(--wimg) center/100% 100% no-repeat,var(--wood);box-shadow:0 2px 5px rgba(40,26,14,.28);}
.btn--wood.wood5{--wimg:url("cta-wood-5.svg");}
.btn--wood:hover{transform:translateY(-2px);filter:brightness(1.05);}
.btn--wood::after{content:"";position:absolute;left:-9px;bottom:-11px;width:64px;height:28px;pointer-events:none;
  background:url("cta-leaves.svg") left bottom/contain no-repeat;filter:drop-shadow(0 1px .5px rgba(25,45,22,.3));
  transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.btn--wood:hover::after{transform:translateY(1px) rotate(-3deg);}
.btn .ar{transition:transform .2s;}
.btn:hover .ar{transform:translateX(4px);}
/* 텍스트 링크 (그린 밑줄) */
.tlink{font-weight:700;color:var(--accent-ink);border-bottom:2px solid var(--accent);padding-bottom:2px;transition:color .2s;cursor:pointer;}
.tlink:hover{color:var(--ink);}

/* ── nav (전 페이지 공통, §1.2) ── */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem var(--gutter);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.1) blur(7px);border-bottom:1px solid transparent;transition:border-color .25s;}
.nav.scrolled{border-bottom:1px solid var(--line);}
/* 로고 락업(카드뉴스 발전본): 나무 뷰박스 크롭(6 12 52 46) + baseline 정렬 — 나무 밑동=워드마크 baseline */
.nav__brand{display:inline-flex;align-items:baseline;gap:7px;font-size:1.1rem;font-weight:800;letter-spacing:-.03em;}
.nav__logo{height:1.18em;width:auto;flex:0 0 auto;display:block;}
.nav__wm{display:inline-flex;align-items:baseline;}
.nav__brand .dot{color:var(--accent);}
.nav__right{display:flex;align-items:center;gap:1.4rem;}
/* 불변식: 라벨 넓은 자간 대문자 금지(한/영 공통) — nav도 eyebrow처럼 정상 케이스로 */
.nav__link{font-size:.82rem;letter-spacing:-.005em;font-weight:600;color:var(--muted);
  position:relative;padding-bottom:11px;transition:color .2s;}
/* 활성/호버 표식 = 밑줄 대신 잎 마커(위로 뾰족한 삼각형, 폴리곤 어휘) */
.nav__link::after{content:"";position:absolute;left:50%;bottom:0;width:11px;height:9px;background:var(--accent);
  clip-path:polygon(50% 0,0 100%,100% 100%);
  transform:translateX(-50%) scale(0);transform-origin:bottom;transition:transform .26s cubic-bezier(.2,.7,.2,1);}
.nav__link:hover{color:var(--ink);} .nav__link:hover::after{transform:translateX(-50%) scale(1);}
/* 현재 페이지: 잎 마커 고정 (site.js가 aria-current 부여) */
.nav__link[aria-current="page"]{color:var(--ink);}
.nav__link[aria-current="page"]::after{transform:translateX(-50%) scale(1);}
/* CTA = 목재 버튼(폴리곤 나무토막 배경 + 좌하단 잎). cta-wood.svg / cta-leaves.svg와 짝 */
.nav__cta{position:relative;font-size:.8rem;letter-spacing:-.01em;font-weight:800;color:#fff;border:0;
  background:url("cta-wood.svg") center/100% 100% no-repeat,var(--wood);padding:.55rem 1.05rem;white-space:nowrap;
  overflow:visible;text-shadow:0 1px 2px rgba(22,13,4,.6);box-shadow:0 1px 3px rgba(40,26,14,.25);
  transition:transform .14s,filter .18s;}
.nav__cta:hover{transform:translateY(-2px);filter:brightness(1.06);}
.nav__cta::after{content:"";position:absolute;left:-8px;bottom:-10px;width:56px;height:25px;pointer-events:none;
  background:url("cta-leaves.svg") left bottom/contain no-repeat;filter:drop-shadow(0 1px .5px rgba(25,45,22,.3));
  transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.nav__cta:hover::after{transform:translateY(1px) rotate(-3deg);}
/* 언어 토글(🌐) — 테두리 없이 워드마크 성격의 작은 버튼(전역 공유) */
.nav__lang{display:inline-flex;align-items:center;gap:.3em;background:transparent;color:var(--muted);border:0;
  font-family:inherit;font-weight:800;font-size:.74rem;letter-spacing:-.01em;padding:.4rem .5rem;cursor:pointer;line-height:1;transition:color .2s;}
.nav__lang:hover{color:var(--ink);}
/* ≤860: 링크는 디스클로저 메뉴로, CTA는 항상 노출(§1.4) */
.nav__menu{display:none;border:1.5px solid var(--rule);background:transparent;color:var(--ink);
  font-size:1rem;font-weight:700;padding:.35rem .7rem;cursor:pointer;font-family:inherit;line-height:1;}
.nav__drop{display:none;}
@media(max-width:860px){
  .nav__right .nav__link{display:none;}
  .nav__menu{display:inline-flex;}
  .nav__drop{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:2px solid var(--rule);
    display:flex;flex-direction:column;z-index:49;}
  .nav__drop[hidden]{display:none;}
  .nav__drop a{padding:1rem var(--gutter);font-size:.9rem;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);}
  .nav__drop a[aria-current="page"]{color:var(--accent-ink);}
}

/* ── 서브페이지 공통 헤드(eyebrow + H1 + lead) ── */
.page-head{padding-block:clamp(2.6rem,5vw,4.2rem) clamp(1.6rem,3vw,2.4rem);}
.page-head h1{font-size:clamp(2.15rem,5vw,4.05rem);font-weight:800;line-height:1.12;letter-spacing:-.045em;color:var(--ink);margin-top:1.2rem;}
.page-head h1 .g{color:var(--accent);}
.page-head .lead{margin-top:1.4rem;font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.8;color:var(--muted);max-width:52ch;font-weight:500;}
.page-head .lead b{color:var(--text);font-weight:700;}

/* ── 폼 (auth) — 마케팅 지면 문법: 직각 + 룰 보더(§3.2) ── */
.field{display:block;margin-top:1rem;}
.field .lab{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-bottom:.4rem;text-transform:uppercase;}
.field input{border:1.5px solid var(--rule);background:var(--bg);border-radius:0;
  padding:.8rem 1rem;font:inherit;width:100%;color:var(--text);}
.field input:focus{outline:none;border-color:var(--accent);}
input[type="checkbox"]{accent-color:var(--accent);}

/* ── reveal 페이드업 ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.reveal{opacity:1;transform:none;transition:none;}}

/* ── footer (전 페이지 공통, §1.3: 3그룹 + 카피라이트 줄) ── */
.foot{border-top:2px solid var(--rule);margin-top:clamp(3rem,6vw,5rem);}
.end + .foot{margin-top:0;border-top:0;}          /* 반전 CTA 직후엔 룰 중복 방지 */
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);
  padding-block:clamp(2rem,4vw,3rem) clamp(1.6rem,3vw,2.2rem);}
.foot__brand{display:flex;flex-direction:column;gap:.7rem;}
.foot__brand .nav__brand{font-size:1rem;}
.foot__brand p{font-size:.85rem;color:var(--muted);font-weight:500;max-width:22ch;line-height:1.6;}
.foot__col h4{font-size:.92rem;letter-spacing:-.01em;font-weight:800;color:var(--ink);margin-bottom:.9rem;}
.foot__col a{display:block;font-size:.88rem;color:var(--muted);font-weight:500;padding:.28rem 0;transition:color .2s;}
.foot__col a:hover{color:var(--accent-ink);}
.foot__col .soon{color:var(--faint);font-size:.72rem;font-weight:600;margin-left:.35rem;}
.foot__base{border-top:1px solid var(--line);padding-block:1.1rem 1.6rem;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem;font-size:.78rem;color:var(--faint);font-weight:500;letter-spacing:.02em;}
.foot__base a{color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:border-color .2s;}
.foot__base a:hover{border-color:var(--accent);}
/* 저작자 크레딧(© 행) — 작게·muted, 링크는 hover 밑줄 */
.foot-credit{font-size:.8em;color:var(--faint);}
.foot-credit a{color:var(--muted);border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .2s,color .2s;}
.foot-credit a:hover{color:var(--accent-ink);border-color:var(--accent);}
@media(max-width:860px){.foot__grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.foot__grid{grid-template-columns:1fr;gap:1.6rem;}}