/* ════════════════════════════════════════════════════════════════
   SMART CUE · 안 4 — 로고 클릭 후 본문(#story) = 안 2 글래스박스 디자인 이식
   styles-4.css 뒤에 로드. 모든 규칙을 #story 로 스코프해 안4 히어로/내비와 격리.
   토큰·기본 섹션 규칙은 styles.css + styles-2.css 에서 가져와 #story 범위로 한정.
   ════════════════════════════════════════════════════════════════ */
#story{
  /* base tokens (styles.css :root) */
  --ink-deep:#0B0F17; --ink-600:#2C3B53;
  --line:rgba(246,255,249,.10); --line-soft:rgba(246,255,249,.06);
  --signal:#FFC36B; --signal-hi:#FFDCA0; --signal-lo:#E8A24E; --signal-dp:#8A5A2A;
  --signal-glow:rgba(255,195,107,.55);
  --paper:#F6FFF9; --paper-dim:rgba(246,255,249,.66); --paper-mut:rgba(246,255,249,.42);
  --paper-fnt:rgba(246,255,249,.20);
  --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);
  /* 안2 토큰 */
  --green:var(--signal); --green-hi:var(--signal-hi); --green-lo:var(--signal-lo);
  --green-dp:var(--signal-dp); --green-glow:var(--signal-glow);
  --violet:#A06BFF; --violet-hi:#C9A8FF; --violet-lo:#8B5CF6; --violet-glow:rgba(160,107,255,.5);
  --noise:rgba(170,178,190,.55);
  --pad:clamp(22px,5vw,40px); --maxw:1160px;

  position:relative; color:var(--paper); font-family:var(--f-body);
  /* 히어로 길찾기 지면(갈색 흙)과 어울리는 흙색 그라데이션 — 위 따뜻한 흙, 아래로 어두워짐 */
  background:linear-gradient(180deg, #3A2A22 0%, #2E211A 40%, #241813 100%);
}

/* ── reveal ── */
#story .reveal{ opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease),transform .9s var(--ease); }
#story .reveal.is-in{ opacity:1; transform:none; }

/* ── base section ── */
#story .sec{ position:relative; z-index:2; padding:clamp(110px,16vh,200px) var(--pad);
  max-width:var(--maxw); margin-inline:auto; }
#story .sec__title{ font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.7rem,4.6vw,3.4rem); line-height:1.22; letter-spacing:-.005em; }
#story .sec__title em{ font-style:normal; color:var(--green); text-shadow:0 0 28px var(--green-glow); }

/* ════ 글래스박스 컨테이너 ════ */
#story .glassbox{ --fold:clamp(46px,6.5vw,104px);
  /* 지도 틀 실루엣 — 위 M / 아래 W (고정 깊이 fold). 본체·확산광·엣지광 3겹이 공유 */
  --map:polygon(0% var(--fold), 36.4% 0%, 69.6% var(--fold), 100% 0%,
    100% calc(100% - var(--fold)), 69.6% 100%, 36.4% calc(100% - var(--fold)), 0% 100%);
  position:relative; z-index:2;
  max-width:min(1180px,94vw); margin:clamp(48px,8vh,140px) auto 0;
  /* 리퀴드 글래스 — 더 어두운 진보라. 뒤 흙배경이 블러로 비침. filter 금지(backdrop-filter를 깸) */
  background:linear-gradient(158deg, rgba(102,62,164,.44), rgba(70,42,130,.38) 52%, rgba(46,28,90,.40));
  -webkit-backdrop-filter:blur(32px) saturate(1.28); backdrop-filter:blur(32px) saturate(1.28);
  overflow:hidden;
  clip-path:var(--map); }
/* 확산광 — 상단/모서리 부드러운 빛 + 위·아래 지그재그 피크 글로우 */
#story .glassbox::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  clip-path:var(--map);
  background:
    radial-gradient(130% 70% at 50% -6%, rgba(255,255,255,.11), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 9%),
    linear-gradient(0deg, rgba(255,255,255,.07), transparent 6%); }
/* 엣지 흰빛 — 좌·우 세로 변을 따라가는 하이라이트 라인 (은은하게) */
#story .glassbox::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  clip-path:var(--map);
  background:
    linear-gradient(90deg,  rgba(255,255,255,.5) 0, rgba(255,255,255,.28) 1.1px, transparent 3px),
    linear-gradient(270deg, rgba(255,255,255,.42) 0, rgba(255,255,255,.22) 1.1px, transparent 3px),
    linear-gradient(115deg, rgba(255,255,255,.07), transparent 22%); }
/* 지도 틀 가장자리 — 위 M / 아래 W (로고에서 자라난 틀이 박스 프레임이 됨) */
#story .glassbox__edge{ position:absolute; left:0; width:100%; height:clamp(34px,5vw,60px);
  z-index:4; pointer-events:none; }
#story .glassbox__edge--top{ top:-1px; }
#story .glassbox__edge--bot{ bottom:-1px; }
#story .glassbox__edge path{ fill:none; stroke:var(--violet-hi); stroke-width:3.5;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(160,107,255,.55)); }
#story .how, #story .proof, #story .adopt, #story .end{ background:transparent; }

/* ── seam ── */
#story .seam{ position:relative; height:0; }
#story .seam::before{ content:""; position:absolute; left:50%; top:-40px; width:1px; height:80px;
  transform:translateX(-.5px);
  background:linear-gradient(180deg, transparent, var(--violet) 50%, transparent); opacity:.4; }

/* ════ 1 · HOW ════ */
#story .how{ text-align:center; padding-top:clamp(200px,26vh,360px); }  /* 박스 안 제목 위 여백 */
#story .how .sec__title em{ background:linear-gradient(90deg,var(--green),var(--violet-hi));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(255,195,107,.22); }
#story .how__head{ max-width:760px; margin:0 auto; }
#story .orb{ position:relative; margin:clamp(56px,10vh,120px) auto 0; }
#story .orb__viz{ position:relative; width:min(980px,100%); margin:0 auto; aspect-ratio:960 / 640; }   /* 뷰포트(96vw) → 컨테이너 기준: 글래스박스 밖으로 안 삐져나감 */
#story .orb__c{ display:block; width:100%; height:100%; }

#story .maplabel{ position:absolute; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px 32px 18px; min-width:166px; border-radius:17px;
  background:rgba(12,9,22,.64); backdrop-filter:blur(9px);
  border:1px solid var(--line); box-shadow:0 26px 54px -26px rgba(0,0,0,.9);
  transform:translate(-50%, calc(-100% - 34px)) scale(.92);
  transform-origin:bottom center; opacity:0;
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
#story .maplabel.is-on{ opacity:1; transform:translate(-50%, calc(-100% - 50px)) scale(1); }
#story .maplabel::after{ content:""; position:absolute; left:50%; bottom:-48px; width:1px; height:48px;
  transform:translateX(-.5px); background:linear-gradient(var(--line), transparent); }
#story .maplabel__num{ font-family:var(--f-mono); font-weight:500; font-size:12px; letter-spacing:.3em; }
#story .maplabel__name{ font-family:var(--f-disp); font-weight:600; font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1; letter-spacing:-.02em; white-space:nowrap; }   /* 좁은 화면에서 '이끌다' 등 한 줄 고정(접힘 방지) */
#story .maplabel--read .maplabel__num{ color:var(--green); }
#story .maplabel--learn .maplabel__num{ color:var(--green-hi); }
#story .maplabel--cue .maplabel__num{ color:var(--violet-hi); }
#story .maplabel--cue .maplabel__name{ background:linear-gradient(90deg,var(--green-hi),var(--violet-hi));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

#story .mapdesc{ position:absolute; z-index:3; pointer-events:none; text-align:center;
  font-size:clamp(16px,1.7vw,20px); line-height:1.38; font-weight:500;
  color:rgba(246,255,249,.94); text-wrap:balance; white-space:nowrap;
  text-shadow:0 2px 16px rgba(4,6,10,.85);
  transform:translate(-50%,-50%) translateY(10px); opacity:0;
  transition:opacity .55s var(--ease), transform .55s var(--ease); }
#story .mapdesc.is-on{ opacity:1; transform:translate(-50%,-50%) translateY(0); }
#story .mapdesc::before{ content:""; display:block; width:26px; height:2px; margin:0 auto 9px;
  border-radius:2px; box-shadow:0 0 8px var(--green-glow); }
#story .mapdesc--read::before{ background:var(--green); }
#story .mapdesc--learn::before{ background:var(--green-hi); }
#story .mapdesc--cue::before{ background:var(--violet-hi); box-shadow:0 0 8px var(--violet-glow); }

/* ════ 2 · PROOF ════ */
#story .proof{ text-align:center; }
#story .proof__head{ text-align:center; max-width:760px; margin:0 auto clamp(56px,8vh,90px); }
#story .proof__line{ font-family:var(--f-disp); font-weight:600; margin-bottom:0;
  font-size:clamp(1.7rem,4.8vw,3.2rem); line-height:1.16; letter-spacing:-.005em; text-wrap:balance; }
#story .proof__line em{ font-style:normal; color:var(--green); text-shadow:0 0 30px var(--green-glow); }
#story .gauges{ display:flex; flex-direction:column; gap:clamp(20px,3.4vh,40px); max-width:920px; margin-inline:auto; }
#story .gauge{ position:relative; }
#story .gauge__top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; }
#story .gauge__label{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--paper-dim); }
#story .gauge__tag{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em;
  padding:3px 8px; border-radius:100px; border:1px solid var(--line); color:var(--paper-mut); }
#story .gauge.is-noise .gauge__tag{ color:var(--violet-hi); border-color:rgba(160,107,255,.3); }
#story .gauge.is-signal .gauge__tag{ color:var(--green); border-color:rgba(255,195,107,.28); }
#story .gauge__val{ font-family:var(--f-mono); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(2.1rem,6vw,3.6rem); line-height:.9; }
#story .gauge.is-signal .gauge__val{ color:var(--green); text-shadow:0 0 30px var(--green-glow); }
#story .gauge.is-noise .gauge__val{ color:var(--violet-hi); text-shadow:0 0 28px var(--violet-glow); }
#story .gauge__track{ position:relative; height:10px; border-radius:100px;
  background:rgba(246,255,249,.05); overflow:hidden; border:1px solid var(--line-soft); }
#story .gauge__grid{ position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--line-soft) calc(10% - 1px) 10%); }
#story .gauge__fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:100px;
  transition:width 1.4s var(--ease); }
#story .gauge.is-signal .gauge__fill{ background:linear-gradient(90deg, var(--green-dp), var(--green) 70%, var(--green-hi));
  box-shadow:0 0 14px var(--green-glow); }
#story .gauge.is-noise .gauge__fill{ background:linear-gradient(90deg, rgba(160,107,255,.25), var(--violet) 80%, var(--violet-hi));
  box-shadow:0 0 14px var(--violet-glow); }
#story .gauge.is-in .gauge__fill{ width:var(--to,0%); }
#story .gauge__spark{ position:absolute; top:50%; left:var(--to,0%); width:7px; height:7px;
  border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:var(--green-hi); box-shadow:0 0 12px var(--green-glow);
  transition:transform .5s var(--ease) 1.1s; }
#story .gauge.is-noise .gauge__spark{ background:var(--violet-hi); box-shadow:0 0 12px var(--violet-glow); }
#story .gauge.is-in .gauge__spark{ transform:translate(-50%,-50%) scale(1); }
#story .proof__note{ text-align:center; margin-top:clamp(40px,6vh,64px);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--paper-fnt); }

/* ════ 3 · ADOPT ════ */
#story .adopt{ text-align:center; }
#story .adopt__inner{ max-width:780px; margin-inline:auto; }
#story .adopt__title{ font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.9rem,5.4vw,3.7rem); line-height:1.22; letter-spacing:-.01em; text-wrap:balance; }
#story .adopt__title b{ font-weight:600; position:relative; white-space:nowrap; color:var(--green);
  text-shadow:0 0 26px var(--green-glow); }
#story .adopt__title b::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:2px;
  background:linear-gradient(90deg, transparent, var(--green), var(--violet), transparent);
  box-shadow:0 0 10px var(--green-glow); }
#story .adopt__sub{ margin:20px auto 44px; color:var(--paper-dim); max-width:46ch; font-size:16px; text-wrap:pretty; }

#story .term{ position:relative; text-align:left; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; background:rgba(7,9,14,.78);
  backdrop-filter:blur(6px); box-shadow:0 36px 90px -44px rgba(0,0,0,.92);
  max-width:780px; margin-inline:auto; }
#story .term__bar{ display:flex; align-items:center; gap:7px; padding:12px 16px;
  border-bottom:1px solid var(--line-soft); font-family:var(--f-mono); font-size:11px; color:var(--paper-mut); }
#story .term__bar i{ width:9px; height:9px; border-radius:50%; background:var(--ink-600); }
#story .term__bar i:first-child{ background:var(--green-dp); }
#story .term__bar span{ margin-left:8px; letter-spacing:.06em; }
#story .term__pre{ position:relative; padding:26px 18px 28px; overflow-x:auto;
  font-family:var(--f-mono); font-size:clamp(11px,1.5vw,14px); line-height:1.7; }
#story .term__pre code{ white-space:pre; }
#story .term .c-t{ color:var(--paper-mut); } #story .term .c-a{ color:var(--green-lo); } #story .term .c-s{ color:var(--green); }
#story .term__beam{ position:absolute; left:18px; right:18px; bottom:20px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--green) 22%, var(--violet) 78%, transparent);
  box-shadow:0 0 12px var(--green-glow); opacity:.5; animation:beamBreath 3.4s ease-in-out infinite; }
@keyframes beamBreath{ 0%,100%{opacity:.34} 50%{opacity:.7} }
#story .term__pulse{ position:absolute; left:0; bottom:20px; width:64px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--green-hi), transparent);
  box-shadow:0 0 16px var(--green-glow); opacity:0; }
#story .term.sent .term__pulse{ animation:beamRun .9s var(--ease) forwards; }
@keyframes beamRun{ 0%{left:-64px;opacity:1} 100%{left:100%;opacity:0} }
#story .term__copy{ position:absolute; top:48px; right:14px; font-family:var(--f-mono);
  font-size:10px; letter-spacing:.18em; padding:6px 11px; border:1px solid var(--line);
  border-radius:7px; color:var(--paper-dim); background:rgba(20,27,38,.7); cursor:pointer;
  transition:border-color .3s, color .3s; }
#story .term__copy:hover{ border-color:var(--green); color:var(--green); }
#story .term__copy.ok{ color:var(--green); border-color:var(--green-dp); }
#story .adopt__after{ display:inline-flex; align-items:center; gap:12px; margin-top:30px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--paper-mut); }
#story .adopt__after i{ width:34px; height:1px; background:linear-gradient(90deg, var(--green), var(--violet)); }
#story .adopt__after b{ color:var(--green); font-weight:400; }

/* ════ CLOSING ════ */
#story .end{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;
  text-align:center; min-height:auto; border-top:none; background:transparent; }
#story .end__inner{ flex:1; display:flex; flex-direction:column; justify-content:center;
  align-items:center; gap:30px; }
#story .end__mark{ display:block; height:clamp(40px,6vw,58px); width:auto; margin:0 auto 4px;
  filter:drop-shadow(0 0 22px var(--green-glow)); }
#story .end__title{ font-family:var(--f-disp); font-weight:600;
  font-size:clamp(2rem,8vw,6.4rem); line-height:1.22; letter-spacing:-.02em; }
#story .end__title .ln{ display:block; }
#story .end__title em{ font-style:normal; }
#story .end__title .glow{ color:var(--green);
  text-shadow:0 0 40px var(--green-glow),0 0 100px rgba(255,195,107,.3); }
#story .bigcta{ position:relative; display:inline-flex; align-items:center; gap:14px;
  margin-top:14px; padding:20px 38px; border-radius:100px;
  font-size:16px; font-weight:600; color:var(--ink-deep);
  background:var(--green); overflow:hidden; cursor:pointer; border:0;
  transition:transform .4s var(--ease),box-shadow .4s; isolation:isolate;
  box-shadow:0 0 0 0 var(--green-glow); }
#story .bigcta::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:var(--green-hi); transform:translateY(101%); transition:transform .45s var(--ease); }
#story .bigcta:hover{ transform:translateY(-3px); box-shadow:0 20px 50px -16px var(--green-glow); }
#story .bigcta:hover::before{ transform:translateY(0); }
#story .bigcta__ico{ display:grid; place-items:center; width:30px; height:30px;
  border-radius:50%; background:rgba(11,15,23,.14); }
#story .bigcta__ico svg{ transition:transform .35s var(--ease); }
#story .bigcta:hover .bigcta__ico svg{ transform:translate(2px,-2px); }

/* ════ FOOTBOX ════ */
/* 기본 푸터 — 둥근 막대 제거, 폭 가득, 어두운 흙빛 위에 얇은 상단선만 */
#story .footbox{ position:relative; z-index:2; max-width:none;
  margin:clamp(40px,7vh,90px) 0 0;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding:26px clamp(24px,5vw,60px);
  border-radius:0; background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:0; border-top:1px solid rgba(246,255,249,.08); box-shadow:none;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--paper-mut); }
#story .footbox .foot__mid{ color:var(--paper-fnt); }
#story .foot__biz{ display:flex; flex-direction:column; gap:5px; line-height:1.55; }
#story .foot__biz p{ margin:0; }
#story .foot__biz .foot__co{ color:var(--paper-dim); }
#story .foot__meta{ display:flex; justify-content:space-between; align-items:center;
  width:100%; gap:10px 20px; flex-wrap:wrap; }

/* 모바일 전용 줄바꿈 (기본 숨김 → 640px 이하에서만 표시) */
#story .m-br{ display:none; }

@media (max-width:640px){
  #story .m-br{ display:inline; }
  /* 작동 지도: 좁은 화면에선 라벨/설명을 칸 간격 안으로 축소 + 설명은 줄바꿈 허용(겹침/삐져나감 방지) */
  #story .maplabel{ min-width:0; padding:6px 12px 8px; gap:3px; border-radius:13px;
    transform:translate(-50%, calc(-100% - 16px)) scale(.92); }
  #story .maplabel.is-on{ transform:translate(-50%, calc(-100% - 24px)) scale(1); }
  #story .maplabel__num{ font-size:9px; }
  #story .maplabel__name{ font-size:clamp(15px,4.6vw,22px); }
  #story .mapdesc{ white-space:normal; max-width:20vw; line-height:1.3;
    font-size:clamp(9.5px,2.9vw,13.5px); }
}
@media (max-width:620px){
  #story .footbox{ align-items:center; text-align:center; }
  #story .foot__biz{ align-items:center; }
  #story .foot__meta{ justify-content:center; }
}
@media (max-width:560px){ #story .gauge__top{ flex-wrap:wrap; } }