/* ─────────────────────────────────────────────
   「결」 랜딩 — 수묵 두루마리 v2
   팔레트: 한지 + 먹 + 낙관 주홍 (게임 정본과 동일)
   ───────────────────────────────────────────── */
/* 독립체(Dokrip) — 게임 정본 디스플레이·붓 타이포 (자모 등 미수록 글리프는 명조 폴백) */
@font-face{
  font-family:'Dokrip';
  src:url('../assets/fonts/Dokrip.woff') format('woff');
  font-weight:400 800;
  font-display:swap;
}
:root{
  --paper:#e7e2d6; --paper-hi:#efeae0; --paper-lo:#ddd6c6; --paper-deep:#d8d1c1;
  --ink:#20201c; --ink-soft:#403c34; --ink-faint:#6f6a60;
  --line:rgba(32,32,28,.20); --line-bold:rgba(32,32,28,.42);
  --seal:#9a3324;
  --tile-side:#c6bda9; --tile-side-dark:#a89e88;
  --serif:"Nanum Myeongjo","Batang","AppleMyungjo","Songti SC",serif;
  --brush:"Dokrip","Nanum Myeongjo","Batang",serif;
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* 언어 토글 — data-lang 이 보여줄 언어를 고른다 */
html[data-lang="en"] .l-ko{display:none !important}
html[data-lang="ko"] .l-en{display:none !important}
.lang-toggle{
  font-family:var(--serif); font-size:13px; letter-spacing:.14em; color:var(--ink-soft);
  background:rgba(255,255,255,.35); border:1px solid var(--line-bold); border-radius:3px;
  padding:7px 14px; cursor:pointer; transition:background .18s, color .18s;
}
.lang-toggle:hover{background:var(--ink); color:var(--paper-hi)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  background:
    radial-gradient(130% 90% at 50% 0%, var(--paper-hi), transparent 55%),
    radial-gradient(140% 120% at 88% 100%, var(--paper-lo), transparent 55%),
    var(--paper);
  font-family:var(--serif); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:keep-all;
}
::selection{background:var(--ink); color:var(--paper-hi)}
:focus-visible{outline:2px solid var(--seal); outline-offset:3px; border-radius:2px}

/* 한지 섬유 질감 — 전면 고정 오버레이 */
.grain{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ── 공통 부품 ─────────────────────────── */
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; background:var(--seal); color:var(--paper-hi);
  font-family:var(--brush); font-size:26px; font-weight:400; border-radius:4px;
  box-shadow:0 2px 8px rgba(154,51,36,.35);
  position:relative;
}
.seal::after{ /* 인주 눌림 자국 */
  content:''; position:absolute; inset:2px; border:1px solid rgba(239,234,224,.35); border-radius:2px;
}
.seal-sm{width:34px; height:34px; font-size:17px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:15px; color:var(--ink);
  background:transparent; border:1px solid var(--line-bold);
  padding:13px 26px; border-radius:3px; cursor:pointer;
  text-decoration:none; letter-spacing:.08em;
  transition:background .18s, color .18s, transform .18s, box-shadow .18s;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn::before{ /* 먹이 아래에서 차오르는 hover — 글자 밑, 배경 위 */
  content:''; position:absolute; inset:-1px; background:var(--ink); z-index:-1;
  transform:translateY(103%); transition:transform .32s cubic-bezier(.3,.6,.3,1);
}
.btn:hover{color:var(--paper-hi); border-color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink); color:var(--paper-hi); border-color:var(--ink); letter-spacing:.22em; padding-left:30px}
.btn-primary::before{background:var(--seal)}
.btn-primary:hover{border-color:var(--seal)}
.btn-big{font-size:17px; padding:17px 40px}

.enso{width:150px; height:150px; color:var(--ink); opacity:.09}
.enso-sm{width:90px; height:90px; opacity:.14}

/* 스크롤 리빌 — 먹이 스미듯 (지연은 --rd 로 스태거) */
.reveal{opacity:0; transform:translateY(28px) scale(.985); filter:blur(6px);
  transition:opacity 1s ease var(--rd,0s), transform 1s cubic-bezier(.2,.7,.25,1) var(--rd,0s), filter 1s ease var(--rd,0s)}
.reveal.in{opacity:1; transform:none; filter:blur(0)}

/* ── 내비 ─────────────────────────────── */
.nav-progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:72;
  background:var(--seal); opacity:.75}
.nav{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px clamp(18px,4vw,44px);
  transition:background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.scrolled{background:rgba(239,234,224,.82); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--line)}
.nav-logo{display:flex; align-items:center; text-decoration:none; transition:transform .2s}
.nav-logo img{height:64px; width:auto; display:block}
.nav-logo:hover{transform:scale(1.06)}
.nav-links{display:flex; align-items:center; gap:clamp(14px,3vw,30px)}
.nav-links a{color:var(--ink-soft); text-decoration:none; font-size:14.5px; letter-spacing:.14em; padding:6px 2px; border-bottom:1px solid transparent; transition:color .18s,border-color .18s}
.nav-links a:hover{color:var(--ink); border-color:var(--line-bold)}
.nav-links .nav-cta{color:var(--seal); font-weight:700}
.nav-links .nav-cta:hover{border-color:var(--seal)}

/* ── 1. 히어로 ────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:90px 20px 70px; overflow:hidden;
}
.hero-mtn{
  position:absolute; inset:auto 0 0 0; height:38%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300 L0 190 Q150 60 320 170 T640 150 T940 185 T1200 150 L1200 300 Z' fill='%2320201c' fill-opacity='0.06'/%3E%3Cpath d='M0 300 L0 235 Q220 150 430 215 T820 225 T1200 235 L1200 300 Z' fill='%2320201c' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size:100% 100%; pointer-events:none;
  will-change:transform;
}
/* 공식 로고 — 투명 배경(logo-alpha), 먹이 스며 번지는 리빌 */
.hero-logo{
  display:block; width:clamp(230px, min(44vw, 58svh), 440px); height:auto;
  user-select:none; -webkit-user-drag:none;
  animation:logo-soak 1.9s cubic-bezier(.25,.6,.3,1) .7s both;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 58%, transparent 74%);
          mask-image:radial-gradient(circle at 50% 46%, #000 58%, transparent 74%);
  -webkit-mask-repeat:no-repeat;         mask-repeat:no-repeat;
  -webkit-mask-position:center;          mask-position:center;
  -webkit-mask-size:250% 250%;           mask-size:250% 250%;
}
@keyframes logo-soak{ /* 먹이 종이에 스며 번지듯 */
  0%{opacity:0; filter:blur(14px) contrast(.7); -webkit-mask-size:0% 0%; mask-size:0% 0%; transform:scale(.92)}
  45%{opacity:1}
  70%{filter:blur(2px) contrast(1)}
  100%{opacity:1; filter:blur(0) contrast(1); -webkit-mask-size:250% 250%; mask-size:250% 250%; transform:scale(1)}
}

/* 세로쓰기 곁글 — 전통 서책의 협주(夾註) */
.hero-side{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  writing-mode:vertical-rl; font-size:clamp(12px,1.4vw,15px);
  letter-spacing:.52em; color:var(--ink-faint); opacity:0;
}
.hero-side-l{left:clamp(16px,5vw,64px); animation:side-in 1.4s ease 2.6s both}
.hero-side-r{right:clamp(16px,5vw,64px); animation:side-in 1.4s ease 2.9s both}
@keyframes side-in{from{opacity:0; transform:translateY(calc(-50% + 20px))} to{opacity:.8; transform:translateY(-50%)}}

/* z-index 를 주면 stacking context 가 생겨 로고의 multiply 블렌드가 한지 배경에 닿지 못한다 */
.hero-inner{position:relative; display:flex; flex-direction:column; align-items:center; gap:14px}
.hero-jamo{display:flex; gap:26px; font-size:clamp(20px,3vw,26px); color:var(--ink-faint); font-weight:700; height:30px}
.hj{opacity:0; animation:hj-in .7s cubic-bezier(.2,.7,.25,1) forwards}
.hj[data-d="1"]{animation-delay:.15s}
.hj[data-d="2"]{animation-delay:.4s}
.hj[data-d="3"]{animation-delay:.65s}
@keyframes hj-in{from{opacity:0; transform:translateY(-16px); filter:blur(4px)} to{opacity:.75; transform:none; filter:blur(0)}}

.hero-title{line-height:0; margin:-6px 0}
.hero-sub{font-size:clamp(17px,2.6vw,22px); letter-spacing:.12em; color:var(--ink-soft);
  animation:fade-up .9s ease 1.7s both}
.hero-sub-ko{font-size:clamp(12.5px,1.7vw,15px); letter-spacing:.34em; padding-left:.34em; color:var(--ink-faint);
  margin-top:-6px; animation:fade-up .9s ease 1.85s both}
.hero-line{font-size:clamp(14px,2vw,16.5px); color:var(--ink-faint); letter-spacing:.06em; animation:fade-up .9s ease 2s both}
.hero-line em{font-style:normal; color:var(--seal); font-weight:700}
.hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; justify-content:center; animation:fade-up .9s ease 2.3s both}
.hero-stats{font-size:12px; letter-spacing:.3em; padding-left:.3em; color:var(--ink-faint); margin-top:10px;
  animation:fade-up .9s ease 2.6s both}
@keyframes fade-up{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

@keyframes seal-stamp{from{opacity:0; transform:scale(2.4) rotate(-8deg)} 70%{opacity:1; transform:scale(.94)} to{opacity:1; transform:scale(1) rotate(-3deg)}}

/* 붓끝 자국 — 히어로 포인터 궤적 */
.ink-dot{position:fixed; z-index:60; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, rgba(44,43,37,.5), rgba(24,24,15,.28) 60%, transparent 75%);
  transform:translate(-50%,-50%); mix-blend-mode:multiply;
  filter:url(#inkBleed);
  animation:dot-dry 1s ease-out forwards}
@keyframes dot-dry{from{opacity:.8; filter:blur(1px)} to{opacity:0; filter:blur(4px); transform:translate(-50%,-58%) scale(1.5)}}

/* ── 2. 두루마리 여정 ─────────────────── */
.journey{position:relative; height:620vh; background:var(--paper)}
.journey-stage{position:sticky; top:0; height:100svh; overflow:hidden}
#scrollCanvas{position:absolute; inset:0; width:100%; height:100%; display:block}
/* 두루마리 좌우 말림 그림자 */
.journey-stage::before,.journey-stage::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(24px,5vw,70px); z-index:3; pointer-events:none;
}
.journey-stage::before{left:0; background:linear-gradient(90deg, rgba(32,32,28,.08), transparent)}
.journey-stage::after{right:0; background:linear-gradient(-90deg, rgba(32,32,28,.08), transparent)}

.journey-chapters{position:absolute; inset:0; pointer-events:none; z-index:2}
.chapter{
  position:absolute; left:50%; top:43%; transform:translate(-50%,-50%);
  text-align:center; width:min(560px,86vw);
  opacity:0; visibility:hidden;
}
.ch-jamo{display:flex; justify-content:center; font-size:clamp(19px,2.6vw,25px); font-weight:700; color:var(--ink-faint); height:32px}
.ch-jamo span{display:inline-block}
.ch-word{font-family:var(--brush); font-size:clamp(90px,15vw,160px); font-weight:400; line-height:1.12;
  text-shadow:0 0 1px rgba(32,32,28,.4), 1px 1px 0 rgba(32,32,28,.15)}
.ch-en{margin-top:2px; font-size:12.5px; letter-spacing:.5em; padding-left:.5em; text-transform:uppercase; color:var(--seal); opacity:.8}
.ch-poem{margin-top:12px; font-size:clamp(14.5px,2vw,17.5px); line-height:1.9; color:var(--ink-soft); letter-spacing:.03em}
.ch-poem span{display:block}
.ch-poem .ko{font-size:.72em; color:var(--ink-faint); letter-spacing:.1em; margin-top:8px}
.ch-stamp{margin-top:22px; width:40px; height:40px; font-size:20px; transform:rotate(-3deg)}
.ch-word-logo{line-height:0}
.ch-word-logo img{width:clamp(210px, min(38vw, 42svh), 390px); height:auto}
.chapter-final .ch-stamp{display:none}   /* 로고 안에 낙관이 이미 있다 */

/* 낙관 진행 도장 — 지나온 장이 붉게 찍힌다 */
.journey-progress{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:4;
  display:flex; gap:10px; pointer-events:auto}
.jp-dot{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-family:var(--brush); font-size:15px; font-weight:400; color:var(--ink-faint);
  background:rgba(255,255,255,.35); border:1px solid var(--line-bold); border-radius:3px;
  cursor:pointer; transition:all .3s cubic-bezier(.2,.7,.3,1.3);
}
.jp-dot:hover{transform:translateY(-2px)}
.jp-dot.on{background:var(--seal); color:var(--paper-hi); border-color:var(--seal);
  box-shadow:0 2px 8px rgba(154,51,36,.4); transform:rotate(-3deg)}

/* ── 섹션 공통 헤더 ────────────────────── */
section{position:relative}
.play,.worlds{padding:clamp(90px,14vh,150px) clamp(20px,6vw,72px)}
.sec-head{max-width:660px; margin:0 auto 54px; text-align:center}
.sec-kicker{font-size:12.5px; letter-spacing:.44em; padding-left:.44em; color:var(--seal); font-weight:700; margin-bottom:16px}
.sec-head h2{font-size:clamp(27px,4.6vw,40px); font-weight:800; line-height:1.42; letter-spacing:.02em}
.sec-head h2 em{font-style:normal; position:relative; white-space:nowrap}
.sec-head h2 em::after{content:''; position:absolute; left:-2%; right:-2%; bottom:4px; height:9px;
  background:rgba(154,51,36,.22); z-index:-1; border-radius:2px}
.ko-sub{margin-top:10px; font-size:13px; letter-spacing:.3em; padding-left:.3em; color:var(--ink-faint)}
.sec-desc{margin-top:18px; font-size:15.5px; line-height:1.95; color:var(--ink-soft)}
.sec-desc strong{color:var(--seal)}

/* ── 3. 데모 — 2.5D 한지 타일 ─────────── */
.demo-wrap{display:flex; gap:clamp(26px,5vw,64px); align-items:center; justify-content:center; flex-wrap:wrap; max-width:980px; margin:0 auto}
.demo-board-frame{position:relative; padding:20px; border-radius:6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160 L0 96 Q60 40 120 88 T240 84 T400 100 L400 160 Z' fill='%2320201c' fill-opacity='0.05'/%3E%3Cpath d='M0 160 L0 120 Q90 78 170 112 T400 124 L400 160 Z' fill='%2320201c' fill-opacity='0.04'/%3E%3C/svg%3E") no-repeat bottom / 100% 42%,
    rgba(255,255,255,.16);
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(20,16,8,.12)}
.demo-board{display:grid; grid-template-columns:repeat(4, var(--dcell,72px)); gap:11px; --dcell:clamp(56px,13vw,76px);
  touch-action:none}
.dcell{
  width:var(--dcell); height:var(--dcell); position:relative;
  display:flex; align-items:center; justify-content:center; user-select:none;
  -webkit-tap-highlight-color:transparent; border:1px solid transparent; border-radius:4px;
  font-family:var(--brush); font-size:calc(var(--dcell)*.5); font-weight:700; color:var(--ink);
  text-shadow:0 0 1px rgba(32,32,28,.4), .5px .5px 0 rgba(32,32,28,.18);
}
/* 타일은 두께를 가진다 — LOK식 2.5D (상면 + 아랫면 두 단) */
.dcell.glyph{
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(228,221,206,.9));
  border-color:var(--line-bold); cursor:pointer;
  box-shadow:
    0 5px 0 -1px var(--tile-side),
    0 7px 0 -1px var(--tile-side-dark),
    0 12px 16px rgba(32,32,28,.18);
  transition:transform .12s, box-shadow .12s;
}
.dcell.glyph:hover{transform:translateY(-2px);
  box-shadow:0 7px 0 -1px var(--tile-side), 0 9px 0 -1px var(--tile-side-dark), 0 15px 18px rgba(32,32,28,.2)}
.dcell.sel{
  border-color:var(--seal); transform:translateY(3px);
  box-shadow:0 0 0 2px rgba(154,51,36,.55) inset,
    0 2px 0 -1px var(--tile-side), 0 4px 0 -1px var(--tile-side-dark), 0 6px 10px rgba(32,32,28,.15) !important;
}
.dcell .ord{position:absolute; top:3px; left:6px; font-size:11px; color:var(--seal); font-weight:700; text-shadow:none}
.dcell.ink{
  cursor:default; color:transparent; border-color:transparent;
  background:radial-gradient(60% 60% at 42% 38%, #2c2b25, #18180f 70%, #0c0c07);
  box-shadow:0 0 10px rgba(20,18,10,.35), 0 0 18px 5px rgba(24,22,12,.22), 0 1px 2px rgba(0,0,0,.3);
  border-radius:46% 54% 52% 48% / 50% 46% 54% 50%;   /* 젖은 먹 방울의 불규칙 윤곽 */
  filter:url(#inkBleed);
  animation:cell-bloom .55s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes cell-bloom{from{transform:scale(.28) translateY(0); filter:url(#inkBleed) blur(2.5px); opacity:0}
  62%{transform:scale(1.12) translateY(3px); filter:url(#inkBleed) blur(.7px); opacity:1}
  to{transform:scale(1) translateY(4px); filter:url(#inkBleed) blur(0); opacity:1}}
.dcell.shake{animation:cell-shake .3s ease}
@keyframes cell-shake{0%,100%{transform:translateX(0)} 30%{transform:translateX(-4px)} 60%{transform:translateX(4px)}}

.demo-clear{position:absolute; inset:0; z-index:5; border-radius:6px;
  background:rgba(231,226,214,.92); backdrop-filter:blur(3px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  animation:fade .45s ease both}
@keyframes fade{from{opacity:0} to{opacity:1}}
.demo-clear[hidden]{display:none}
.demo-clear-syll{font-family:var(--brush); font-size:70px; font-weight:400}
.demo-clear-msg{font-size:14px; letter-spacing:.3em; padding-left:.3em; color:var(--ink-soft)}
.demo-clear .seal{animation:seal-stamp .5s cubic-bezier(.2,.7,.3,1.4) .4s both}

.demo-side{display:flex; flex-direction:column; gap:20px; width:min(340px,90vw)}
.demo-composer{text-align:center; padding:18px 12px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.18)}
.demo-path{font-family:var(--brush); font-size:40px; font-weight:400; line-height:1; min-height:42px}
.demo-path.empty{color:var(--line-bold); font-size:26px; padding-top:7px}
.demo-meaning{margin-top:8px; font-size:13px; color:var(--seal); letter-spacing:.12em; min-height:17px}
.demo-hints{list-style:none; display:flex; flex-direction:column; gap:10px}
.demo-hints li{font-size:14px; line-height:1.75; color:var(--ink-soft); padding-left:18px; position:relative}
.demo-hints li::before{content:''; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--ink); opacity:.35}
.demo-hints b{color:var(--ink); font-weight:800}

/* ── 4. 세계 그리드 ───────────────────── */
.worlds{background:
  radial-gradient(120% 90% at 50% 0%, var(--paper-hi), transparent 60%),
  var(--paper)}
.world-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; max-width:1060px; margin:0 auto}
.wcard{
  position:relative; padding:24px 16px 20px; text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(221,214,198,.3));
  border:1px solid var(--line-bold); border-radius:4px; cursor:default; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.25,1), box-shadow .25s;
}
.wcard::before{ /* 먹 번짐 — hover 시 차오른다 */
  content:''; position:absolute; left:50%; top:58%; width:20px; height:20px;
  border-radius:46% 54% 52% 48% / 50% 46% 54% 50%;
  background:radial-gradient(60% 60% at 42% 38%, #2c2b25, #18180f 70%, #0c0c07);
  filter:url(#inkBleed);
  transform:translate(-50%,-50%) scale(0); transition:transform .5s cubic-bezier(.3,.6,.3,1); z-index:0;
}
.wcard:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(32,32,28,.16)}
.wcard:hover::before{transform:translate(-50%,-50%) scale(16)}
.wcard>*{position:relative; z-index:1; transition:color .35s}
.wcard .w-no{font-size:10px; letter-spacing:.2em; color:var(--ink-faint); margin-bottom:6px}
.wcard .w-gua{font-size:15px; color:var(--ink-faint); letter-spacing:.1em; height:20px}
.wcard .w-word{font-family:var(--brush); font-size:52px; font-weight:400; line-height:1.2; margin:2px 0 0;
  text-shadow:0 0 1px rgba(32,32,28,.35)}
.wcard .w-en{font-size:11px; letter-spacing:.34em; padding-left:.34em; text-transform:uppercase; color:var(--seal); opacity:.85; margin:2px 0 8px}
.wcard:hover .w-en{color:rgba(239,234,224,.8)}
.wcard .w-desc{font-size:12.5px; line-height:1.7; color:var(--ink-soft); letter-spacing:.02em}
.wcard:hover .w-word{color:var(--paper-hi); text-shadow:none}
.wcard:hover .w-no,.wcard:hover .w-gua{color:rgba(239,234,224,.6)}
.wcard:hover .w-desc{color:rgba(239,234,224,.75)}
.wcard.locked .w-word{opacity:.35}
.wcard.locked .w-desc{opacity:.6}
.wcard .w-soon{position:absolute; top:9px; right:9px; z-index:1; font-size:10px; letter-spacing:.14em;
  color:var(--seal); border:1px solid rgba(154,51,36,.45); border-radius:2px; padding:2px 6px}

/* ── 5. 세 기둥 ───────────────────────── */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(18px,3vw,34px);
  max-width:1020px; margin:0 auto; padding:clamp(70px,10vh,120px) clamp(20px,6vw,72px)}
.pillar{position:relative; text-align:center; padding:40px 26px 36px; border:1px solid var(--line); border-radius:4px;
  background:rgba(255,255,255,.14); transition:transform .3s, box-shadow .3s}
.pillar:hover{transform:translateY(-5px); box-shadow:0 18px 36px rgba(32,32,28,.12)}
.pillar-no{position:absolute; top:14px; left:18px; font-size:13px; color:var(--ink-faint); letter-spacing:.2em}
.pillar-sym{font-size:44px; color:var(--seal); opacity:.85; margin-bottom:14px; font-weight:700}
.pillar h3{font-size:20px; font-weight:800; letter-spacing:.14em; margin-bottom:14px}
.pillar p{font-size:14px; line-height:1.95; color:var(--ink-soft); text-align:left}
.pillar p b{color:var(--ink)}

/* ── 6. 종 — CTA ─────────────────────── */
.outro{
  position:relative; text-align:center; padding:clamp(110px,16vh,170px) 20px 46px;
  display:flex; flex-direction:column; align-items:center; gap:22px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 100%, var(--paper-deep), transparent 65%),
    var(--paper);
}
/* 15단어의 강 — 창세의 단어들이 뒤로 흐른다 */
.word-river{
  position:absolute; top:50%; left:0; transform:translateY(-58%);
  white-space:nowrap; font-family:var(--brush); font-size:clamp(70px,11vw,120px); font-weight:400;
  color:rgba(32,32,28,.045); letter-spacing:.2em; pointer-events:none;
  display:flex; width:max-content;
  animation:river 70s linear infinite;
}
@keyframes river{to{transform:translateY(-58%) translateX(-50%)}}
.outro-title{font-size:clamp(30px,5.4vw,48px); font-weight:800; line-height:1.5; letter-spacing:.03em; position:relative}
.outro-soon{font-size:13.5px; letter-spacing:.2em; color:var(--ink-faint); position:relative}
.outro-foot{margin-top:52px; display:flex; flex-direction:column; align-items:center; gap:14px; position:relative}
.foot-logo{width:88px; height:auto}
.outro-foot p{font-size:12px; letter-spacing:.16em; color:var(--ink-faint)}
.outro .enso-sm{position:absolute; top:44px; left:50%; transform:translateX(-50%)}
.outro .hero-actions{position:relative}

/* 클릭 먹 파문 — 번진 가장자리 */
.ink-ripple{
  position:fixed; z-index:75; pointer-events:none; border-radius:50%;
  border:2px solid rgba(32,32,28,.4); transform:translate(-50%,-50%) scale(0);
  animation:ripple .7s ease-out forwards; mix-blend-mode:multiply;
  filter:url(#inkBleed);
}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1); opacity:0}}

/* 먹 튐 — 단어가 탈 때 사방으로 */
.ink-splat{
  position:absolute; z-index:6; pointer-events:none; mix-blend-mode:multiply;
  background:radial-gradient(circle at 44% 40%, #2c2b25, #18180f 65%, transparent 78%);
  filter:url(#inkBleed);
  animation:splat .6s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes splat{
  from{opacity:.9; transform:translate(0,0) scale(.3)}
  to{opacity:0; transform:translate(var(--sx,0), var(--sy,0)) scale(1)}
}

/* ── 법적 문서 페이지 (개인정보·약관) ── */
.doc{max-width:760px; margin:0 auto; padding:120px clamp(20px,5vw,40px) 80px}
.doc-head{text-align:center; margin-bottom:56px}
.doc-head .doc-logo{width:120px; height:auto; margin-bottom:14px}
.doc-head h1{font-size:clamp(26px,4.5vw,36px); font-weight:800; letter-spacing:.06em}
.doc-head .doc-meta{margin-top:14px; font-size:13px; color:var(--ink-faint); letter-spacing:.1em}
.doc h2{font-size:19px; font-weight:800; margin:46px 0 14px; padding-left:14px; position:relative; letter-spacing:.02em}
.doc h2::before{content:''; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; background:var(--seal); border-radius:2px}
.doc p,.doc li{font-size:14.5px; line-height:1.95; color:var(--ink-soft)}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 12px; padding-left:22px}
.doc li{margin-bottom:6px}
.doc strong{color:var(--ink)}
.doc table{width:100%; border-collapse:collapse; margin:8px 0 16px; font-size:13.5px}
.doc th,.doc td{border:1px solid var(--line-bold); padding:9px 12px; text-align:left; line-height:1.7; color:var(--ink-soft)}
.doc th{background:rgba(32,32,28,.05); color:var(--ink); font-weight:700; letter-spacing:.04em}
.doc-foot{margin-top:64px; padding-top:28px; border-top:1px solid var(--line); text-align:center}
.doc-foot p{font-size:12.5px; color:var(--ink-faint); letter-spacing:.08em}
.doc-foot .btn{margin-top:16px}
.legal-links{display:flex; gap:18px; justify-content:center; margin-top:6px}
.legal-links a{font-size:12px; letter-spacing:.12em; color:var(--ink-faint); text-decoration:none; border-bottom:1px solid transparent; transition:color .18s,border-color .18s}
.legal-links a:hover{color:var(--ink); border-color:var(--line-bold)}

/* ── 반응형·접근성 ────────────────────── */
@media (max-width:760px){
  .hero-side{display:none}
}
@media (max-width:640px){
  .nav-links a:not(.nav-cta){display:none}
  .hero-seal{right:18px; bottom:110px; width:38px; height:38px; font-size:19px}
  .demo-wrap{gap:30px}
  .jp-dot{width:26px; height:26px; font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01s !important; animation-delay:0s !important; transition-duration:.01s !important}
  .reveal{opacity:1; transform:none; filter:none}
  .word-river{animation:none}
}