/* ════════════════════════════════════════════════════════════════
   SMART CUE — 안 4 "걸어서 길을 찾는 여정" (Figma 스토리보드 1~11)
   노을빛 실루엣 · 따뜻·감성 비주얼 / 담백한 카피
   걷다 → 길을 잃다(3문제) → Smart Cue 지도가 펼쳐져 다음 걸음을 안내
   ════════════════════════════════════════════════════════════════ */


:root{
  /* dawn sky (해 뜨는 새벽 — 보라 줄이고 블루·피치) */
  --sky-top:   #1B1422;
  --sky-deep:  #1B1422;   /* 네이비 → 어두운 흙빛 통일 (히어로 캔버스가 위를 덮으므로 씬엔 영향 없음) */
  --sky-mid:   #5E6688;
  --sky-warm:  #C47E6A;
  --horizon:   #EAA46A;
  --glow:      #FFCD80;
  --sun:       #FFDC8E;

  /* ink on dusk (warm cream) */
  --cream:     #F8EFE1;
  --cream-dim: rgba(248,239,225,.74);
  --cream-mut: rgba(248,239,225,.50);
  --cream-fnt: rgba(248,239,225,.32);
  --line:      rgba(248,239,225,.16);
  --line-soft: rgba(248,239,225,.09);

  /* brand violet (the guiding line) */
  --violet:    #9B6BE8;
  --violet-hi: #C2A3FF;
  --violet-dp: #6E4FA8;
  --violet-glow: rgba(155,107,232,.55);
  --amber:     #E8A06A;
  --bubble-bg: rgba(28,36,56,.9);          /* 말풍선 단색(본체=꼬리) */

  --f-disp: "IBM Plex Sans KR","Pretendard",system-ui,sans-serif;   /* 히어로 헤드라인/본문 → IBM Plex Sans KR */
  --f-body: "IBM Plex Sans KR","Pretendard",system-ui,sans-serif;
  --f-mono: "Pretendard",system-ui,sans-serif;   /* 모노 라벨 폰트 → 프리텐다드로 통일 */

  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --pad:  clamp(20px,5vw,92px);
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--f-body);
  background:#241813;                 /* 본문 어두운 흙빛 — #story 하단과 동일, 아래로 끊김 없이 이어짐 */
  color:var(--cream);
  line-height:1.7; letter-spacing:0;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; cursor:pointer; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--violet); color:#fff; }
.mono{ font-family:var(--f-mono); font-feature-settings:"tnum"; }

/* film grain */
.grain{ position:fixed; inset:-40%; z-index:9000; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 30%{transform:translate(-3%,2%)} 60%{transform:translate(2%,-2%)} }

/* cursor — 기본 커서 사용(커스텀 커서 비활성) */
.cur{ display:none !important; }
.cur__dot{ position:absolute; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--violet-hi); box-shadow:0 0 10px var(--violet-glow);
  transition:width .3s var(--ease),height .3s var(--ease); }
.cur__ring{ position:absolute; width:30px; height:30px; border-radius:50%; transform:translate(-50%,-50%);
  border:1px solid var(--violet-hi); opacity:.5;
  transition:width .35s var(--ease),height .35s var(--ease),opacity .35s; }
.cur.is-hover .cur__ring{ width:52px; height:52px; opacity:.85; }

/* loader */
.loader{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:var(--sky-deep); transition:opacity .8s var(--ease),visibility .8s; }
body:not(.is-loading) .loader{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(360px,72vw); text-align:center; }
.loader__logo{ width:170px; margin:0 auto 26px; filter:brightness(0) invert(1) drop-shadow(0 0 18px var(--violet-glow));
  opacity:0; transform:translateY(12px); animation:lIn .9s var(--ease) .1s forwards; }
@keyframes lIn{ to{ opacity:.95; transform:none; } }
.loader__bar{ height:2px; width:100%; background:var(--line); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--violet),var(--amber));
  box-shadow:0 0 12px var(--violet-glow); }
.loader__pct{ margin-top:14px; font-size:11px; letter-spacing:.3em; color:var(--cream-mut); }

/* nav */
.nav{ position:fixed; inset:0 0 auto 0; z-index:6000; display:flex; align-items:center;
  justify-content:space-between; padding:16px var(--pad);
  font-family:"Pretendard",system-ui,sans-serif;   /* GNB는 프리텐다드 */
  transition:transform .5s var(--ease),background .5s,backdrop-filter .5s; }
.nav.is-hidden{ transform:translateY(-130%); }
.nav.is-solid{ background:rgba(32,22,46,.6); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); }
.brand__logo{ height:30px; width:auto; filter:brightness(0) invert(1); opacity:.92;
  transition:transform .4s var(--ease); }
.brand:hover .brand__logo{ transform:translateY(-2px); }
.nav__links{ display:flex; gap:30px; font-size:15px; font-weight:500; color:var(--cream-dim); }
.nav__links a{ position:relative; padding:4px 0; transition:color .25s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--violet-hi); transition:width .35s var(--ease); }
.nav__links a:hover{ color:var(--cream); } .nav__links a:hover::after{ width:100%; }
@media (max-width:720px){ .nav__links{ display:none; } }
.nav__cta{ font-size:13px; font-weight:600; padding:9px 18px; border-radius:99px; color:var(--cream);
  border:1px solid var(--line); transition:background .3s,border-color .3s,color .3s; }
.nav__cta:hover{ background:var(--violet); border-color:var(--violet); color:#fff; }

.srail{ position:fixed; left:0; right:0; top:0; height:2px; z-index:6001; background:transparent; }
.srail i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--violet),var(--amber));
  box-shadow:0 0 10px var(--violet-glow); }

/* reveals */
.lines .ln{ display:block; overflow:hidden; padding-bottom:.08em; }
.lines .ln > span{ display:block; transform:translateY(112%); transition:transform 1s var(--ease); will-change:transform; }
.lines.is-in .ln > span{ transform:none; }
.lines .ln:nth-child(2) > span{ transition-delay:.09s; }
.lines .ln:nth-child(3) > span{ transition-delay:.18s; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ════════════════════════════════════════════════════════════════
   HERO · 노을빛 여정
   ════════════════════════════════════════════════════════════════ */
.jrn{ position:relative; z-index:1; }
.jrn__pin{ position:relative; height:100vh; height:100svh; overflow:hidden; background:var(--sky-deep); }
.jrn__scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.jrn__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.beats{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.beat{ position:absolute; inset:0; display:flex; flex-direction:column; padding:0 var(--pad);
  opacity:0; will-change:opacity,transform; }
/* legibility scrim behind copy (sunset sky washes out cream text) */
.beat::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
.beat--hero::before{ background:none; }   /* 히어로 카피 뒤 검정 스크림 제거 (요청) */
.beat--prob::before{ background:radial-gradient(74% 48% at 50% 30%, rgba(18,12,26,.66), transparent 70%); }
/* turn/brand: darken behind the upper copy but fade before the planet apex (64%)
   so the walker + purple guide line below stay visible */
.beat--why::before{ background:linear-gradient(180deg, transparent 16%, rgba(16,10,22,.12) 36%, rgba(16,10,22,.12) 58%, transparent 72%); }
.beat--turn::before{ background:none; }   /* 전환 카피 위 검정 제거 (텍스트 자체 그림자로 가독성 확보) */
/* brand: a centred dark band so the risen logo reads, while the walker exits below stays visible */
.beat--brand::before{ background:linear-gradient(180deg, transparent 4%, rgba(16,10,22,.34) 24%, rgba(16,10,22,.34) 60%, rgba(16,10,22,.08) 76%, transparent 88%); }
.beat--hero{ justify-content:center; align-items:flex-start; max-width:var(--maxw); margin-inline:auto; }
.beat__kicker{ font-size:12px; letter-spacing:.42em; color:var(--violet-hi); margin-bottom:20px;
  text-shadow:0 0 18px var(--violet-glow); }
.beat__h{ font-family:var(--f-disp); font-weight:800; font-size:clamp(2.1rem,6vw,4.8rem);
  line-height:1.28; letter-spacing:-.02em; color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,.55),0 4px 40px rgba(0,0,0,.35);
  transform:translate(calc(0px - min(130px, max(0px, (100vw - var(--maxw)) / 2))),40px); }   /* 좁은 화면에선 왼쪽 당김 자동 축소 → 글자 안 잘림 */
.beat__h em{ font-style:normal; color:var(--glow); text-shadow:0 2px 14px rgba(0,0,0,.5),0 0 40px rgba(255,203,125,.5); }
/* 모바일(세로 긴 화면): 히어로 카피를 상단 쪽으로 올려 인물/지평선과 안 겹치게 (원위치 복원) */
@media (max-width:760px){
  .beat--hero{ justify-content:flex-start; padding-top:calc(clamp(72px,14vh,150px) + 20px); }   /* 모바일 카피 아래로 20 */
}
/* 데스크톱: 첫 화면 카피를 중앙 기준 위로 100(80+20) — 모바일은 미적용 */
@media (min-width:761px){
  .beat__h{ transform:translate(calc(0px - min(130px, max(0px, (100vw - var(--maxw)) / 2))),-60px); }
}

.beat--prob{ justify-content:flex-start; align-items:center; text-align:center;
  padding-top:calc(clamp(120px,20vh,220px) + 60px); }   /* 표지판 태그(PROBLEM)+제목 함께 60px 아래로 */
.beat__tag{ font-size:12px; letter-spacing:.34em; color:var(--amber); margin-bottom:16px; }
.beat__pt{ font-family:var(--f-disp); font-weight:800; font-size:clamp(2rem,5.6vw,4rem);
  letter-spacing:-.03em; color:var(--cream); text-shadow:0 4px 30px rgba(0,0,0,.5); }
.beat__pd{ margin-top:18px; font-size:clamp(.98rem,1.9vw,1.22rem); line-height:1.55; color:var(--cream-dim);
  max-width:42ch; }

/* turn / why — 표지판(prob) 제목과 동일한 상단 위치로 정렬. tag 높이(~30px)만큼 더 내려 제목 라인을 맞춤 */
.beat--turn, .beat--why{ justify-content:flex-start; align-items:center; text-align:center;
  padding-top:calc(clamp(120px,20vh,220px) + 70px); }   /* 두 문구 같은 높이로 정렬 */
.beat__turn, .beat__why{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.45rem,3.8vw,2.9rem);
  line-height:1.36; letter-spacing:-.02em; color:var(--cream); max-width:22ch;
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 6px 36px rgba(0,0,0,.5); }
/* 강조어: 주변 텍스트와 동일한 어두운 드롭섀도우 + 컬러 글로우 함께 */
.beat__turn em{ font-style:normal; color:var(--violet-hi);
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 6px 36px rgba(0,0,0,.5),0 0 38px var(--violet-glow); }
.beat__why em{ font-style:normal; color:var(--glow);
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 6px 36px rgba(0,0,0,.5),0 0 34px rgba(255,205,128,.5); }

.beat--brand{ justify-content:center; align-items:center; text-align:center; }
.brandgate{ display:flex; flex-direction:column; align-items:center; gap:0;
  pointer-events:none; background:none; border:0; padding:0; transform:translateY(-50px); }
.beat--brand.is-ready .brandgate{ pointer-events:auto; }
.brandgate__hint{ font-size:12px; letter-spacing:.3em; color:var(--violet-hi); margin-bottom:22px;
  text-shadow:0 0 16px var(--violet-glow); opacity:0; transform:translateY(6px);
  transition:opacity .6s var(--ease),transform .6s var(--ease); }
.beat--brand.is-ready .brandgate__hint{ opacity:1; transform:none; animation:hintPulse 2.4s ease-in-out 1.2s infinite; }
@keyframes hintPulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.brandgate__logo{ position:relative; display:inline-flex; will-change:transform,opacity; }
.brandgate__ring{ position:absolute; left:50%; top:50%; width:130%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%) scale(.6); border:1px solid var(--violet-hi); opacity:0; pointer-events:none; }
.beat--brand.is-ready .brandgate__ring{ animation:gateRing 2.6s var(--ease) infinite; }
@keyframes gateRing{ 0%{ transform:translate(-50%,-50%) scale(.62); opacity:.5 }
  70%{ transform:translate(-50%,-50%) scale(1.05); opacity:0 } 100%{ opacity:0 } }
.beat__logo{ width:min(420px,68vw); filter:drop-shadow(0 0 36px var(--violet-glow));
  transition:filter .4s var(--ease); }
.beat--brand.is-ready .brandgate:hover .beat__logo{ filter:drop-shadow(0 0 56px var(--violet-hi)); }
.beat--brand.is-ready .brandgate:hover .brandgate__logo{ transform:scale(1.04); }
.beat__brandsub{ margin-top:24px; font-size:clamp(1.1rem,2.4vw,1.6rem); font-weight:600; color:var(--cream);
  letter-spacing:-.01em; text-shadow:0 2px 14px rgba(0,0,0,.8); will-change:opacity; }

.jrn__cue{ position:absolute; z-index:4; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; font-size:12px; letter-spacing:.32em;
  font-family:"Pretendard",system-ui,sans-serif; color:var(--cream);
  text-shadow:0 1px 10px rgba(0,0,0,.55); opacity:0; transition:opacity .8s var(--ease) .3s; }
body:not(.is-loading) .jrn__cue{ opacity:.8; }
/* 아래로 띡띡띡 — 3개 셰브론 순차 모션 */
.jrn__chevs{ display:flex; flex-direction:column; align-items:center; }
.jrn__chev{ display:block; width:22px; height:9px; margin-top:-3px; color:var(--violet-hi);
  opacity:.12; animation:chevSeq 1.6s var(--ease-io) infinite; }
.jrn__chev:nth-child(2){ animation-delay:.2s; }
.jrn__chev:nth-child(3){ animation-delay:.4s; }
@keyframes chevSeq{ 0%{opacity:.12; transform:translateY(-2px)} 45%{opacity:1; transform:translateY(2px)}
  100%{opacity:.12; transform:translateY(-2px)} }

/* 한 갈래 길 위 말풍선 — "'○○'까지 어떻게 가는 거지?" (다크 글래스) */
.saybubble{ position:absolute; left:50%; top:29%; transform:translate(-50%,0); z-index:4;
  max-width:min(520px,88vw); padding:22px 36px; border-radius:24px;
  background:var(--bubble-bg); border:1px solid rgba(248,239,225,.2);
  color:var(--cream); font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.05rem,2.5vw,1.78rem); line-height:1.4; text-align:center; letter-spacing:-.01em;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
  box-shadow:0 28px 72px -26px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0; will-change:opacity,transform; pointer-events:none; }
/* 꼬리 — 본체와 완전히 같은 단색 다이아몬드 */
.saybubble::after{ content:""; position:absolute; left:50%; bottom:-9px; width:20px; height:20px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--bubble-bg);
  border-right:1px solid rgba(248,239,225,.2); border-bottom:1px solid rgba(248,239,225,.2); }
.saybubble__q{ color:var(--horizon); font-weight:800; white-space:nowrap; }
.saybubble__q em{ font-style:normal; color:var(--glow); }

/* ════════════════════════════════════════════════════════════════
   GATE · 로고를 펼치기 전엔 본문이 숨겨져 있음
   ════════════════════════════════════════════════════════════════ */
.story.is-gated{ display:none; }

/* MAP WIPE — 로고 클릭 시 지도 형태 틀이 로고 크기에서 등장 → 커지며 화면 아래로 쭉 나가며
   다음 설명 장(글래스박스)을 드러낸다. (#unfold id 유지 → setupGate 가 제어) */
.mapwipe{ position:fixed; inset:0; z-index:5500; display:none; pointer-events:none; }
/* 지도 틀 = 리퀴드 글래스(반투명 + 배경 블러). transform·opacity 는 setupGate scrub 가 직접 구동(가역) */
.mapwipe__shape{ position:absolute; left:50%; top:46%; width:min(1100px,90vw); aspect-ratio:1327 / 953;
  transform:translate(-50%,-50%) scale(.42); transform-origin:center center; opacity:0;
  transition:transform .7s var(--ease-io), opacity .55s ease;   /* 클릭 시 슈융 등장 (등장 후 JS가 transition 제거) */
  /* 각진 지도 실루엣(작동 박스와 동일) — R 제거 */
  clip-path:polygon(0% 16%, 36.4% 0%, 69.6% 16%, 100% 0%, 100% 84%, 69.6% 100%, 36.4% 84%, 0% 100%);
  background:linear-gradient(155deg, rgba(164,126,216,.44), rgba(112,80,170,.36));  /* 밝은 보라 글래스(잘 보이게) */
  -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2); }
/* 외곽 흰 라인 — 좌·우 세로 변 + 상단 (살짝) */
.mapwipe__shape::after{ content:""; position:absolute; inset:0; pointer-events:none;
  clip-path:polygon(0% 16%, 36.4% 0%, 69.6% 16%, 100% 0%, 100% 84%, 69.6% 100%, 36.4% 84%, 0% 100%);
  background:
    linear-gradient(90deg,  rgba(255,255,255,.55) 0, rgba(255,255,255,.3) 1.3px, transparent 3.5px),
    linear-gradient(270deg, rgba(255,255,255,.46) 0, rgba(255,255,255,.26) 1.3px, transparent 3.5px),
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 8%); }

/* ════════════════════════════════════════════════════════════════
   ABOUT · 펼쳐지는 지도
   ════════════════════════════════════════════════════════════════ */
.about{ position:relative; z-index:2; padding:clamp(110px,16vh,200px) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
  background:linear-gradient(180deg,var(--sky-deep), #283A4E 60%, #303A4A); }
.about__head{ max-width:840px; margin-bottom:64px; }
.about__h{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.6rem,4.2vw,3rem);
  line-height:1.32; letter-spacing:-.025em; }
.about__h em{ font-style:normal; color:var(--violet-hi); }

.fold{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; perspective:1600px; }
@media (max-width:820px){ .fold{ grid-template-columns:1fr; perspective:none; } }
.fold__panel{ position:relative; padding:clamp(30px,3.4vw,48px) clamp(24px,2.6vw,38px);
  min-height:300px; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(248,239,225,.07), rgba(248,239,225,.02));
  backdrop-filter:blur(4px); transform-style:preserve-3d; transform-origin:left center;
  transition:transform 1.1s var(--ease),opacity 1.1s var(--ease); }
.fold__panel--l{ border-radius:16px 0 0 16px; border-right:0; transform:rotateY(58deg); opacity:0; }
.fold__panel--c{ transform:rotateY(0deg) translateZ(0); opacity:0; box-shadow:0 0 0 1px var(--line); }
.fold__panel--r{ border-radius:0 16px 16px 0; border-left:0; transform-origin:right center; transform:rotateY(-58deg); opacity:0; }
.fold.is-in .fold__panel{ transform:none; opacity:1; }
.fold__no{ font-size:12px; letter-spacing:.2em; color:var(--amber); }
.fold__t{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.4rem,2.6vw,1.9rem);
  margin:14px 0 14px; color:var(--cream); letter-spacing:-.02em; }
.fold__d{ font-size:15px; color:var(--cream-dim); line-height:1.8; }
.fold__d strong{ color:var(--cream); font-weight:600; box-shadow:inset 0 -.4em 0 rgba(155,107,232,.28); }

/* ════════════════════════════════════════════════════════════════
   GENERIC SECTIONS (warm dusk)
   ════════════════════════════════════════════════════════════════ */
.sec{ position:relative; z-index:2; padding:clamp(100px,15vh,180px) var(--pad);
  max-width:var(--maxw); margin-inline:auto; }
/* 개별 배경 제거 — #story 안에선 투명, 배경은 #story 베이스(흙색)가 담당 */
.how, .arch, .proof, .adopt{ background:transparent; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber); margin-bottom:22px; }
.eyebrow i{ width:24px; height:1px; background:var(--amber); }
.sec__head{ max-width:780px; margin-bottom:64px; }
.sec__title{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.7rem,4.6vw,3.2rem);
  line-height:1.22; letter-spacing:-.03em; }
.sec__title em{ font-style:normal; color:var(--violet-hi); }

/* POINTS */
.points{ list-style:none; display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .points{ grid-template-columns:1fr; } }
.point{ padding:34px 30px 40px; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(160deg, rgba(248,239,225,.06), rgba(248,239,225,.015));
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s; }
.point:hover{ transform:translateY(-7px); border-color:var(--violet-dp);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.6); }
.point__no{ font-size:12px; letter-spacing:.16em; color:var(--amber); }
.point__t{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.3rem,2.6vw,1.8rem);
  margin:16px 0 14px; color:var(--cream); letter-spacing:-.02em; }
.point__d{ font-size:15px; color:var(--cream-dim); line-height:1.8; }

/* FLOW (수집→학습→추천) */
.flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:14px; }
@media (max-width:860px){ .flow{ grid-template-columns:1fr; } .flow__arrow{ display:none; } }
.flow__step{ padding:32px 28px; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(160deg, rgba(248,239,225,.06), rgba(248,239,225,.015)); }
.flow__n{ font-size:26px; font-weight:700; color:var(--violet-hi); }
.flow__t{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.4rem,3vw,2rem);
  margin:10px 0 12px; color:var(--cream); }
.flow__d{ font-size:14.5px; color:var(--cream-dim); line-height:1.75; }
.flow__meta{ margin-top:16px; font-size:11px; letter-spacing:.06em; color:var(--cream-fnt); }
.flow__arrow{ display:grid; place-items:center; font-size:26px; color:var(--amber); }

/* PROOF benefits */
.proof__line{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.8rem,5vw,3.4rem);
  line-height:1.24; letter-spacing:-.03em; margin-bottom:64px; text-align:center; }
.proof__line em{ font-style:normal; color:var(--glow); text-shadow:0 0 30px rgba(255,203,125,.4); }
.benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .benefits{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .benefits{ grid-template-columns:1fr; } }
.benefit{ padding:30px 24px; border-top:2px solid var(--violet-dp); }
.benefit__t{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.15rem,2.2vw,1.4rem);
  margin-bottom:12px; color:var(--cream); }
.benefit__d{ font-size:14.5px; color:var(--cream-dim); line-height:1.75; }

/* ADOPT */
.adopt{ text-align:center; }
.adopt__inner{ max-width:760px; margin-inline:auto; }
.adopt .eyebrow{ justify-content:center; }
.adopt__title{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.8rem,5vw,3.4rem); letter-spacing:-.03em; }
.adopt__title em{ font-style:normal; color:var(--glow); }
.adopt__sub{ margin:20px auto 44px; color:var(--cream-dim); max-width:46ch; font-size:16px; }
.code{ position:relative; text-align:left; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:rgba(20,14,28,.6); backdrop-filter:blur(6px); box-shadow:0 30px 70px -40px rgba(0,0,0,.8); }
.code__bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line-soft);
  font-size:11px; color:var(--cream-mut); }
.code__bar i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.code__bar i:first-child{ background:var(--amber); }
.code__bar i:nth-child(2){ background:var(--glow); }
.code__bar i:nth-child(3){ background:var(--violet); }
.code__bar span{ margin-left:8px; letter-spacing:.05em; }
.code__pre{ padding:22px 18px; overflow-x:auto; font-size:clamp(11px,1.5vw,13.5px); line-height:1.7; }
.code__pre code{ white-space:pre; }
.c-t{ color:var(--cream-mut); } .c-a{ color:var(--violet-hi); } .c-s{ color:var(--glow); }
.code__copy{ position:absolute; top:46px; right:14px; font-size:10px; letter-spacing:.16em; padding:7px 12px;
  border:1px solid var(--line); border-radius:7px; color:var(--cream-dim); background:rgba(20,14,28,.7);
  transition:border-color .3s,color .3s; }
.code__copy:hover{ border-color:var(--violet); color:var(--violet-hi); }
.code__copy.ok{ color:var(--glow); border-color:var(--amber); }

/* CLOSING */
.end{ position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; text-align:center;
  background:radial-gradient(80% 70% at 50% 36%, #56392E, #2E323F 70%, #182A46); }
.end__inner{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:24px; padding:90px var(--pad) 40px; }
.end__logo{ width:clamp(150px,20vw,210px); filter:brightness(0) invert(1) drop-shadow(0 0 30px var(--violet-glow));
  margin-bottom:6px; }
.end__h{ font-family:var(--f-disp); font-weight:800; font-size:clamp(2rem,6.4vw,4.6rem);
  line-height:1.16; letter-spacing:-.03em; color:var(--cream); }
.end__h em{ font-style:normal; color:var(--glow); text-shadow:0 0 40px rgba(255,203,125,.45); }
.end__sub{ color:var(--cream-dim); max-width:44ch; font-size:16px; }
.contact{ display:flex; flex-direction:column; align-items:center; gap:22px; margin-top:6px; }
.bigcta{ position:relative; display:inline-flex; align-items:center; gap:12px; padding:18px 38px; border-radius:99px;
  font-size:16px; font-weight:600; color:#fff; background:linear-gradient(120deg,var(--violet),var(--amber));
  box-shadow:0 18px 44px -18px var(--violet-glow); transition:transform .35s var(--ease),box-shadow .35s; }
.bigcta:hover{ transform:translateY(-3px); box-shadow:0 26px 60px -18px rgba(232,160,106,.5); }
.bigcta__ico{ font-size:20px; transition:transform .3s var(--ease); }
.bigcta:hover .bigcta__ico{ transform:translateX(4px); }
.contact__info{ font-size:12px; letter-spacing:.04em; color:var(--cream-mut); }

.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:26px var(--pad);
  font-size:11px; letter-spacing:.04em; color:var(--cream-mut); border-top:1px solid var(--line-soft); }
.foot__mid{ color:var(--cream-fnt); }
@media (max-width:680px){ .foot{ justify-content:center; text-align:center; } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  body{ cursor:auto; } .cur,.grain{ display:none; }
  .lines .ln > span{ transform:none; } .reveal{ opacity:1; transform:none; }
  .fold__panel{ transform:none !important; opacity:1 !important; }
  .story.is-gated{ display:block; } .unfold{ display:none !important; }
  .jrn__scene{ display:none; }
  .jrn__sr{ position:static; width:auto; height:auto; clip:auto; display:block; max-width:32ch;
    margin:0 auto; padding-top:120px; font-family:var(--f-disp); font-weight:700; text-align:center;
    font-size:clamp(1.3rem,3.4vw,2rem); line-height:1.4; color:var(--cream); }
  .beat{ display:none; }
}

/* ===== 전체 배경 흙색으로 통일 — 더 진하게(검정에 가깝게) ===== */
body{
  background:linear-gradient(180deg, #2A1D17 0%, #1D140F 50%, #120C09 100%) fixed !important;
}
.jrn__pin{ background:transparent !important; }
#story{ background:transparent !important; }

/* ===== 문의하기 모달 (지도 모양 글래스 카드) ===== */
.cmodal{ position:fixed; inset:0; z-index:7000; display:none; overflow-y:auto; padding:24px; }
.cmodal.is-open{ display:flex; }   /* flex + 카드 margin:auto → 맞으면 가운데, 넘치면 위부터 스크롤 */
/* 모달 열림 동안 배경 스크롤 잠금 (Lenis.stop + 네이티브 차단) */
body.modal-open{ overflow:hidden !important; }
.cmodal__backdrop{ position:fixed; inset:0; background:rgba(10,7,14,.55);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:cmFade .3s ease; }
.cmodal__card{ position:relative; width:min(720px,94vw); margin:auto;   /* 내용만큼 길어지고 모달(밖)이 스크롤 */
  padding:clamp(64px,8vw,96px) clamp(40px,6.5vw,66px) clamp(80px,10vw,124px);   /* 상 / 좌우 / 하 (접힘이 잠식 → 아래는 크게) */
  clip-path:polygon(0% 5.13%, 36.33% 0%, 69.66% 5.13%, 100% 0%, 100% 94.3%, 69.66% 100%, 36.33% 94.3%, 0% 100%);   /* Figma Vector 17 비율 (각진 지도) */
  background:linear-gradient(165deg, rgba(104,76,152,.52), rgba(62,42,96,.48));   /* 살짝 더 밝은 보라 */
  -webkit-backdrop-filter:blur(30px) saturate(1.2); backdrop-filter:blur(30px) saturate(1.2);
  color:var(--cream); animation:cmIn .42s var(--ease); }
@keyframes cmFade{ from{opacity:0} to{opacity:1} }
@keyframes cmIn{ from{ transform:translateY(18px) scale(.95); opacity:0 } to{ transform:none; opacity:1 } }
.cmodal__x{ position:absolute; top:clamp(40px,7vw,60px); right:clamp(30px,6vw,48px);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:var(--cream); font-size:20px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .25s; }
.cmodal__x:hover{ background:rgba(255,255,255,.14); }
.cmodal__title{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.5rem,4.4vw,2.1rem);
  text-align:center; letter-spacing:-.01em; }
.cmodal__sub{ text-align:center; color:var(--cream-dim); margin:8px 0; font-size:14px; }
.cform{ display:flex; flex-direction:column; gap:14px;
  max-width:508px; width:100%; margin-inline:auto; }
.cform__row{ display:flex; flex-direction:column; gap:6px; }
.cform__row > span{ font-size:12.5px; color:var(--cream-dim); letter-spacing:.02em; }
.cform__row .req{ color:#E8896A; margin-left:3px; font-style:normal; }
.cform__row input, .cform__row select, .cform__row textarea{ width:100%; padding:12px 14px; border-radius:12px;
  font-size:15px; font-family:inherit; color:var(--cream); background:rgba(255,255,255,.07);
  border:1px solid var(--line); transition:border-color .25s, background .25s; }
.cform__row textarea{ min-height:96px; resize:vertical; line-height:1.55; }
.cform__row select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--cream-mut) 50%),linear-gradient(135deg,var(--cream-mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 53%,calc(100% - 13px) 53%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.cform__row select option{ color:#1a1a1a; }   /* 네이티브 드롭다운 가독성 */
.cform__row input[type="file"]{ padding:9px 12px; font-size:13px; color:var(--cream-dim); cursor:pointer; }
.cform__row input::placeholder, .cform__row textarea::placeholder{ color:rgba(246,239,225,.35); }
.cform__row input:focus, .cform__row select:focus, .cform__row textarea:focus{ outline:none; border-color:#9B7BE8; background:rgba(255,255,255,.1); }
.cform__hint{ font-size:11.5px; color:var(--cream-mut); margin-top:2px; }
.cform__two{ display:flex; gap:12px; }
.cform__two .cform__row{ flex:1; min-width:0; }
.cform__cond{ display:none; flex-direction:column; gap:14px; padding:16px;
  border:1px solid var(--line-soft); border-radius:12px; background:rgba(255,255,255,.04); }
.cform__cond.is-show{ display:flex; }
.cform__check{ display:flex; align-items:flex-start; gap:10px; margin-top:6px;
  font-size:13px; color:var(--cream-dim); cursor:pointer; line-height:1.5; }
.cform__check input{ width:17px; height:17px; margin-top:1px; accent-color:#9B7BE8; flex:none; }
@media (max-width:480px){ .cform__two{ flex-direction:column; gap:14px; } }
.cform__submit{ margin-top:14px; padding:15px; border-radius:99px; border:0; cursor:pointer;
  font-family:var(--f-body); font-weight:500; font-size:18px; color:#fff; letter-spacing:.1em;
  background:linear-gradient(90deg,#6E4FB0,#9B7BE8); transition:filter .25s, transform .25s; }
.cform__submit:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.cform__submit:disabled{ opacity:.7; cursor:default; transform:none; }
@media (max-width:560px){ .cmodal__card{ padding-left:26px; padding-right:26px; } }