/* =====================================================================
   LIMEN ABOUT — INDEX(09_combine) 와 같은 토큰을 쓴다 (style.css 를 먼저 불러옴)
   글꼴: 제목 Heebo 200(한글은 Pretendard 200) · 영문 큰 글자 Inter Tight 500 · 라벨 .lbl(800 10px 3.6px)
   색: 검정 바탕 · 흰 선 · 민트 #6ff0d8(강조 · 나의 선) · VISIT 남색 #080f20 패널 · 둥근 위 모서리 50px (greymac Panel)
   ===================================================================== */
.ab { --mint: #6ff0d8; --mint2: #b2eee0; --line: rgba(255, 255, 255, .1); --body: rgba(255, 255, 255, .62); --navy: #080f20; }

/* 헤더 — 지금 페이지 밑줄 고정 */
.c-Header nav a[aria-current]::after { transform: scaleX(1); }

/* ---------- 공통 ---------- */
.ab-sec { position: relative; padding: 20vh var(--pad); }
.ab .lbl { margin-bottom: 40px; }
.ab-h { font-family: var(--heebo); font-weight: 200; font-size: clamp(34px, 3.6vw, 68px); line-height: 1.2; letter-spacing: -.03em; word-break: keep-all; }
.ab-h2 { font-family: var(--heebo); font-weight: 200; font-size: clamp(30px, 2.8vw, 54px); line-height: 1.2; letter-spacing: -.03em; word-break: keep-all; }
.ab-h3 { font-family: var(--heebo); font-weight: 200; font-size: clamp(28px, 2.4vw, 46px); line-height: 1.2; letter-spacing: -.03em; }
.ab-p { font-family: var(--heebo); font-weight: 300; font-size: clamp(15px, 1.1vw, 19px); line-height: 1.85; color: var(--body); max-width: 30em; word-break: keep-all; }
.ab-p + .ab-p { margin-top: 1.2em; }
.ab-p b { font-weight: 500; color: #fff; }

/* 줄 마스크 등장 — INDEX 히어로 제목과 같은 monopo 상승 (split 은 about.js 가 <br> 단위로 감쌈) */
.split .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.split .in { display: inline-block; transform: translateY(105%); transition: transform 1.4s var(--ease-monopo); transition-delay: calc(var(--i, 0) * .1s); }
.split.is-in .in { transform: none; }
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1.2s var(--ease-monopo); }
.rv.is-in { opacity: 1; transform: none; }
/* 스크롤로 단어가 켜지는 제목 */
.reading .w { opacity: .16; transition: opacity .4s ease; }
.reading .w.on { opacity: 1; }

/* ---------- 00 HERO (style.css .c-PixiIntro 를 그대로, 라벨 · 설명만 추가) ---------- */
.ab-hero-lbl { position: absolute; left: var(--pad); top: 110px; margin: 0; opacity: 0; transition: opacity 1s ease 1.2s; }
.is-ready .ab-hero-lbl { opacity: 1; }
.ab-hero-copy { position: absolute; right: var(--pad); bottom: 150px; max-width: 30em; text-align: right; font-family: var(--heebo); font-weight: 300; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, .75); word-break: keep-all;
  opacity: 0; transform: translateY(20px); transition: opacity 1s ease 1s, transform 1.2s var(--ease-monopo) 1s; }
.is-ready .ab-hero-copy { opacity: 1; transform: none; }

/* ---------- 01 ORIGIN ---------- */
.ab-origin { padding-top: 26vh; }
.ab-origin-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6vw; align-items: start; }
.ab-origin-copy { padding-top: .6em; }
.ab-quote { margin: 22vh 0 0 auto; width: fit-content; max-width: 100%; font-family: var(--heebo); font-weight: 200; font-size: clamp(26px, 2.3vw, 44px); line-height: 1.4; letter-spacing: -.03em; text-align: right; word-break: keep-all; }
.ab-quote .q { color: var(--mint); font-family: var(--serif); }

/* ---------- 02 SIGNALS — INDEX SPACE 와 같은 배치 (왼쪽 도면 · 오른쪽 26% 목록 · 왼쪽 아래 단계 번호) ---------- */
.ab-signals { position: relative; height: 420vh; background: #000; border-radius: 50px 50px 0 0; overflow: clip; z-index: 2; }
.ab-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: radial-gradient(ellipse at 38% 58%, #11141b 0%, #050608 62%, #000 100%); }
.ab-pin::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 24px 24px; }
.sig-draw { position: absolute; left: 0; top: 250px; bottom: 120px; right: 26%; }
#sigSvg { width: 100%; height: 100%; overflow: visible; }
#sigSvg .ln-p { fill: none; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
#sigSvg .ln-p.me { stroke: var(--mint); stroke-width: 1.6; filter: drop-shadow(0 0 5px rgba(111, 240, 216, .45)); }
#sigSvg .lane { fill: rgba(255, 255, 255, .5); font: 500 9px var(--sans); letter-spacing: .12em; }
#sigSvg .node .core { fill: var(--mint); }
#sigSvg .node .ring { fill: none; stroke: var(--mint); stroke-width: 1; vector-effect: non-scaling-stroke; }
#sigSvg .node .halo { fill: url(#sigHalo); }
#sigSvg .node text { fill: var(--mint); font: 800 11px var(--sans); letter-spacing: 3px; }
#sigSvg .node text.kr { fill: rgba(255, 255, 255, .7); font: 300 12px var(--heebo); letter-spacing: 0; }
#sigSvg .me-dot { fill: #fff; }
#sigSvg .me-ring { fill: none; stroke: var(--mint); stroke-width: 1; vector-effect: non-scaling-stroke; }
#sigSvg .me-tag { fill: var(--mint); font: 800 10px var(--sans); letter-spacing: 2.4px; }
#sigSvg .tick { stroke: rgba(255, 255, 255, .25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sig-head { position: absolute; left: var(--pad); top: 96px; pointer-events: none; }
.sig-head .lbl { margin-bottom: 18px; }
.sig-phase { position: absolute; left: var(--pad); bottom: 7vh; pointer-events: none; }
.sig-count { font-size: 14px; color: var(--gray2); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; }
.sig-count .mask { display: inline-block; overflow: hidden; margin-right: 6px; }
.sig-count b { display: inline-block; color: #fff; font-weight: 800; font-size: clamp(40px, 4vw, 76px); letter-spacing: -.04em; line-height: 1; }
.sig-name { margin-top: 10px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 300; font-size: clamp(22px, 1.8vw, 32px); line-height: 1; letter-spacing: -.01em; }
.sig-notice { position: absolute; left: 34%; bottom: 7vh; transform: translateX(-20%); max-width: 520px; font-family: var(--heebo); font-weight: 300; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.7; color: #fff; word-break: keep-all;
  opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.sig-notice.on { opacity: 1; }
.sig-side { position: absolute; top: 0; bottom: 0; right: 0; width: 26%; border-left: 1px solid var(--line); padding: 96px 36px 48px; display: flex; flex-direction: column; background: rgba(0, 0, 0, .35); }
.sig-meta strong { display: block; font-size: 14px; font-weight: 500; }
.sig-meta span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .55); line-height: 1.6; }
.sig-list { list-style: none; margin-top: 36px; display: flex; flex-direction: column; }
.sig-list li { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); opacity: .42; transition: opacity .35s; }
.sig-list li .no { grid-row: span 2; width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; display: grid; place-items: center; font: 800 10px var(--sans); transition: background .3s, color .3s, border-color .3s; }
.sig-list li .tt { font-size: 15px; font-weight: 500; line-height: 26px; }
.sig-list li .ds { grid-column: 2; max-height: 0; overflow: hidden; transition: max-height .6s ease; font-family: var(--heebo); font-weight: 300; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .62); word-break: keep-all; }
.sig-list li .ds b { display: block; margin-top: 8px; font-weight: 300; font-size: 18px; line-height: 1.45; color: #fff; }
.sig-list li .ds i { display: block; margin-top: 8px; font-style: normal; }
.sig-list li .ds em { display: block; margin-top: 10px; padding-left: 12px; border-left: 1px solid var(--mint); font-style: normal; color: var(--mint2); }
.sig-list li.on { opacity: 1; }
.sig-list li.on .no { background: var(--mint); border-color: var(--mint); color: #000; }
.sig-list li.on .ds { max-height: 220px; }
.sig-legend { margin-top: auto; display: flex; align-items: center; gap: 10px; font: 800 10px var(--sans); letter-spacing: 3px; text-transform: uppercase; color: var(--dog-sub); }
.sig-legend i { width: 22px; height: 2px; background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.sig-progress { position: absolute; left: var(--pad); right: calc(26% + var(--pad)); bottom: 3vh; height: 1px; background: rgba(255, 255, 255, .15); }
.sig-progress i { position: absolute; inset: 0; background: var(--mint); transform-origin: left; transform: scaleX(0); }

/* ---------- 03 POINT OF VIEW — 뒤에서 흘러가는 ‘세인’의 말 ---------- */
.ab-dasman { overflow: hidden; padding-top: 26vh; padding-bottom: 26vh; }
.ab-drift { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2vh; pointer-events: none; }
.drift-row { white-space: nowrap; font-family: var(--heebo); font-weight: 200; font-size: clamp(60px, 8vw, 150px); letter-spacing: -.04em; color: rgba(255, 255, 255, .045); will-change: transform; }
.ab-dasman .ab-h { position: relative; margin-left: 16.51vw; }
.ab-two { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; margin: 14vh 0 0 16.51vw; max-width: 1100px; }

/* ---------- 04 KEYWORDS ---------- */
.ab-keys { border-top: 1px solid var(--line); margin: 0 var(--pad); padding-left: 0; padding-right: 0; }
.key-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }
.key { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 28px; }
.key:nth-child(2) { transition-delay: .12s; } .key:nth-child(3) { transition-delay: .24s; }
.glyph { width: 100%; max-width: 260px; height: auto; display: block; margin-bottom: 36px; overflow: hidden; }
.key-word { font-family: var(--sans); font-weight: 500; font-size: clamp(44px, 4.4vw, 84px); line-height: .95; letter-spacing: -.035em; }
.key-kr { margin: 12px 0 22px; font: 800 10px var(--sans); letter-spacing: 3.6px; color: var(--mint); }
.key-note { margin-top: 10vh; font-family: var(--heebo); font-weight: 300; font-size: 15px; color: rgba(255, 255, 255, .55); }
/* FLOW — 나란한 물결이 같은 방향으로 흐른다 (가운데 한 줄은 민트) */
.g-flow path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.g-flow path.me { stroke: var(--mint); stroke-width: 1.6; }
.g-flow .waves { animation: g-flow 3.2s linear infinite; }
@keyframes g-flow { to { transform: translateX(80px); } }
/* AWARENESS — 지나가는 두 흐름 사이에서 한 점이 자기 둘레를 알아차린다 (원이 번갈아 퍼짐) */
.g-aware .pass { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; animation: g-pass 2.4s linear infinite; }
.g-aware .pass + .pass { animation-direction: reverse; }
@keyframes g-pass { to { stroke-dashoffset: -40; } }
.g-aware .dot { fill: var(--mint); }
.g-aware .ring { fill: none; stroke: var(--mint); stroke-width: 1; vector-effect: non-scaling-stroke; transform-origin: 100px 55px; animation: g-ring 3s var(--ease-monopo) infinite; }
.g-aware .r2 { animation-delay: 1.5s; }
@keyframes g-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
/* CHOICE — 한 줄이 갈림길에 닿을 때마다 한 갈래가 차례로 밝아진다 */
.g-choice path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.g-choice .trunk { stroke: #fff; stroke-dasharray: 90; animation: g-trunk 4.5s var(--ease-monopo) infinite; }
.g-choice .br { stroke-dasharray: 1 0; animation: g-branch 4.5s ease infinite; }
.g-choice .b1 { animation-delay: 0s; } .g-choice .b2 { animation-delay: 1.5s; } .g-choice .b3 { animation-delay: 3s; }
.g-choice .fork { fill: var(--mint); }
@keyframes g-trunk { 0% { stroke-dashoffset: 90; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes g-branch { 0%, 100% { stroke: rgba(255, 255, 255, .3); stroke-width: 1; } 18%, 30% { stroke: var(--mint); stroke-width: 1.8; } }

/* ---------- 05 LUCID ---------- */
.lucid-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7vw; align-items: end; }
.lucid-grid .ab-h { margin-bottom: 8vh; }
.lucid-fig { margin: 0; }
.lucid-img { overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5; }
.lucid-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1) translateY(var(--py, 0px)); will-change: transform; }
.lucid-fig .lbl { margin: 18px 0 0; }
/* 자각은 통제가 아니다 — 둥근 패널 위의 흐름 도면 */
.field-panel { position: relative; margin-top: 20vh; height: min(78vh, 680px); border-radius: 50px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 60% 50%, #11141b 0%, #050608 70%); touch-action: pan-y; }
#fieldSvg { position: absolute; inset: 0; width: 100%; height: 100%; }
#fieldSvg line { stroke-linecap: round; vector-effect: non-scaling-stroke; }
#fieldSvg .you-ring { fill: none; stroke: var(--mint); stroke-width: 1; vector-effect: non-scaling-stroke; }
#fieldSvg .you-dot { fill: var(--mint); }
#fieldSvg .you-tag { fill: var(--mint); font: 800 10px var(--sans); letter-spacing: 2.4px; }
.field-copy { position: absolute; left: 56px; top: 56px; max-width: 460px; pointer-events: none; padding: 28px 30px 30px; border-radius: 24px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.field-copy .lbl { margin-bottom: 16px; }
.field-copy .ab-p { margin-top: 18px; font-size: 15px; }
.field-hint { position: absolute; left: 56px; right: 56px; bottom: 36px; font: 800 10px var(--sans); letter-spacing: 3px; text-transform: uppercase; color: var(--dog-sub); pointer-events: none; }
.field-hint span { color: rgba(255, 255, 255, .35); }

/* ---------- 06 THE NAME — 한 단어를 가로지르는 문턱선: 위는 흐린 꿈, 아래는 또렷한 현실 ---------- */
.name-stage { position: relative; --cut: 50%; height: clamp(150px, 22vw, 420px); margin: 4vh 0 10vh; }
.nm-word { position: absolute; left: 0; top: 0; font-family: var(--sans); font-weight: 500; font-size: clamp(130px, 25vw, 480px); line-height: .82; letter-spacing: -.06em; white-space: nowrap; user-select: none; }
.nm-top { clip-path: inset(0 0 calc(100% - var(--cut)) 0); filter: blur(6px); opacity: .7; color: var(--mint2); transform: translateY(-.03em); }
.nm-bot { clip-path: inset(var(--cut) 0 0 0); }
.nm-line { position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: var(--cut); height: 1px; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.nm-tag { position: absolute; right: 0; font: 800 10px var(--sans); letter-spacing: 3.6px; text-transform: uppercase; color: var(--dog-sub); }
.nm-dream { top: calc(var(--cut) - 30px); }
.nm-real { top: calc(var(--cut) + 16px); color: var(--mint); }
.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; }
.name-grid > div:nth-child(2) { transition-delay: .12s; }
.name-pr { margin-bottom: 18px; font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 1.4vw, 24px); letter-spacing: -.01em; }

/* ---------- 07 JOURNEY · 08 SCENES — VISIT 남색 패널 ---------- */
.ab-panel { position: relative; z-index: 2; background: var(--navy); color: #d6e2ee; border-radius: 50px 50px 0 0;
  background-image: radial-gradient(ellipse at 30% 0%, #182d48 0%, transparent 55%); }
.ab-panel .lbl { color: #91a9bd; }
.jr-list { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; margin-top: 12vh; padding-top: 44px; }
.jr-list::before, .jr-list::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px; }
.jr-list::before { background: repeating-linear-gradient(90deg, rgba(141, 202, 198, .35) 0 2px, transparent 2px 8px); }
.jr-list::after { background: var(--mint2); transform-origin: left; transform: scaleX(var(--jr, 0)); box-shadow: 0 0 8px rgba(146, 223, 209, .5); }
.jr { position: relative; opacity: .45; transition: opacity .6s; }
.jr.on { opacity: 1; }
.jr-dot { position: absolute; left: 0; top: -44px; width: 13px; height: 13px; border-radius: 50%; background: var(--navy); border: 1px solid var(--mint2); }
.jr.on .jr-dot { background: #e0fff2; }
.jr.here .jr-dot::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--mint2); animation: jr-ping 2.4s var(--ease-monopo) infinite; }
@keyframes jr-ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.jr-when { font: 800 10px var(--sans); letter-spacing: 3.6px; color: #7093a9; }
.jr-when em { margin-left: 10px; font-style: normal; color: var(--mint2); }
.jr h3 { margin: 18px 0 16px; font-family: var(--heebo); font-weight: 200; font-size: clamp(28px, 2.4vw, 46px); line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.jr .ab-p { color: #9fb4c6; font-size: 15px; }
.jr-note { margin-top: 8vh; font-family: var(--heebo); font-weight: 300; font-size: 14px; color: #7b9aad; }

.ab-scenes { padding-top: 6vh; }
.sc-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6vw; align-items: end; }
.sc-head .ab-p { color: #9fb4c6; }
.sc-flow { position: relative; height: clamp(260px, 30vw, 420px); margin-top: 12vh; }
.sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sc-track { stroke: rgba(141, 202, 198, .25); stroke-width: 1; stroke-dasharray: .004 .008; }
.sc-line { stroke: #b2eee0; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgba(146, 223, 209, .35)); }
.sc-pulse { stroke: #fff; stroke-width: 3; stroke-dasharray: .03 .97; filter: drop-shadow(0 0 6px #b2eee0); opacity: 0; transition: opacity .6s; }
.sc-flow.is-drawn .sc-pulse { opacity: 1; animation: sc-pulse 7s linear infinite; }
@keyframes sc-pulse { from { stroke-dashoffset: .03; } to { stroke-dashoffset: -.97; } }
.sc-list { list-style: none; position: absolute; inset: 0; }
.sc-list li { position: absolute; transform: translate(-7px, -7px); }
.sc-list button { all: unset; cursor: default; display: block; position: relative; }
.sc-list .sc-txt { position: absolute; left: -2px; top: 26px; display: flex; flex-direction: column; }
.sc-list li.up .sc-txt { top: auto; bottom: 28px; }
.sc-list button:focus-visible { outline: 1px solid var(--mint2); outline-offset: 8px; }
.sc-dot { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--navy); border: 1px solid #8dcac6; transition: background .4s, box-shadow .4s; }
.sc-list li.live .sc-dot { border-color: var(--mint); box-shadow: 0 0 0 5px rgba(111, 240, 216, .12); }
.sc-list li.on .sc-dot { background: #e0fff2; }
.sc-list b { font-family: var(--heebo); font-weight: 300; font-size: clamp(16px, 1.3vw, 22px); color: #fff; white-space: nowrap; }
.sc-list .en, .sc-list .mean { white-space: nowrap; }
.sc-list .en { margin-top: 4px; font: 800 9px var(--sans); letter-spacing: 3px; text-transform: uppercase; color: #7093a9; }
.sc-list .mean { margin-top: 8px; font-family: var(--heebo); font-weight: 300; font-size: 13px; color: var(--mint2); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-monopo); }
.sc-list li:hover .mean, .sc-list li:focus-within .mean, .sc-list li.peek .mean { opacity: 1; transform: none; }
.sc-list li { opacity: 0; transition: opacity .6s ease; }
.sc-list li.on { opacity: 1; }
.sc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 6vh; font: 800 10px var(--sans); letter-spacing: 3px; text-transform: uppercase; color: #7b9aad; }
.sc-legend span { display: inline-flex; align-items: center; gap: 10px; }
.sc-legend i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #8dcac6; }
.sc-legend i.lv { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(111, 240, 216, .12); }
.sc-link { margin-left: auto; color: var(--mint2); }
.sc-link:hover { color: #fff; }
.ab-panel + .ab-close { margin-top: 0; }

/* ---------- 09 CLOSING — 그라디언트가 다시 차오르는 자리 ---------- */
.ab-close { min-height: 110vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 24vh; padding-bottom: 24vh; }
.ab-close .lbl { max-width: none; }
.ab-close-h { font-family: var(--heebo); font-weight: 200; font-size: clamp(40px, 5.2vw, 100px); line-height: 1.15; letter-spacing: -.035em; word-break: keep-all; }
.ab-close .ab-p { margin-top: 6vh; color: rgba(255, 255, 255, .8); }
.close-links { display: flex; gap: 48px; margin-top: 7vh; }
.close-links a { display: inline-flex; gap: 40px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .4); font-size: 15px; font-weight: 500; }
.close-links a span { transition: transform .4s var(--ease-monopo); }
.close-links a:hover span { transform: translate(4px, -4px); }
.ab-close + .film-footer { margin-top: 0; }

/* 한글 라벨 — 영문 라벨의 넓은 자간(3px)을 한글엔 쓰지 않는다 */
.key-kr, .jr-when, .sig-legend, .field-hint, .sc-legend span { letter-spacing: .04em; font-weight: 500; font-size: 12px; }
.key-kr { font-weight: 800; }

/* ---------- 모바일 ---------- */
@media (max-width: 820px) {
  .ab-sec { padding: 14vh var(--pad); }
  .ab .lbl { margin-bottom: 28px; }
  .ab-hero-copy { left: var(--pad); right: var(--pad); bottom: 130px; text-align: left; font-size: 13px; }
  .ab-hero-copy br { display: none; }
  .ab-origin-grid, .ab-two, .name-grid, .sc-head, .lucid-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-quote { margin-top: 12vh; text-align: left; }
  .ab-dasman .ab-h, .ab-two { margin-left: 0; }

  .ab-signals { border-radius: 30px 30px 0 0; height: 460vh; }
  .sig-head { top: 76px; } .sig-head .ab-h2 { font-size: 26px; }
  .sig-draw { top: 170px; right: 0; bottom: 42vh; }
  .sig-side { top: auto; width: 100%; height: 40vh; padding: 16px var(--pad); border-left: 0; border-top: 1px solid var(--line); overflow-y: auto; }
  .sig-meta, .sig-legend { display: none; }
  .sig-list { margin-top: 0; }
  .sig-list li:not(.on) { display: none; }
  .sig-phase { display: none; }
  #sigSvg .node text { font-size: 26px; } #sigSvg .node text.kr { font-size: 26px; } #sigSvg .me-tag { font-size: 22px; }
  .sig-notice { left: var(--pad); right: var(--pad); bottom: calc(40vh + 18px); transform: none; font-size: 14px; }
  .sig-progress { right: var(--pad); bottom: calc(40vh + 6px); }

  .key-list { grid-template-columns: 1fr; gap: 64px; }
  .field-panel { border-radius: 30px; height: 78vh; }
  .field-copy { left: 16px; right: 16px; top: 16px; padding: 20px; }
  .field-hint { left: 20px; right: 20px; bottom: 20px; line-height: 1.8; }
  .lucid-fig { max-width: 70%; margin-left: auto; }

  .ab-panel { border-radius: 30px 30px 0 0; }
  .jr-list { grid-template-columns: 1fr; gap: 48px; padding: 0 0 0 36px; }
  .jr-list::before, .jr-list::after { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .jr-list::before { background: repeating-linear-gradient(180deg, rgba(141, 202, 198, .35) 0 2px, transparent 2px 8px); }
  .jr-list::after { transform-origin: top; transform: scaleY(var(--jr, 0)); }
  .jr-dot { left: -36px; top: 2px; }

  .sc-flow { height: auto; margin-top: 8vh; }
  .sc-svg { display: none; }
  .sc-list { position: relative; display: grid; gap: 26px; padding-left: 6px; border-left: 1px solid rgba(141, 202, 198, .3); }
  .sc-list li { position: relative; left: auto !important; top: auto !important; transform: translateX(-13px); }
  .sc-list .mean { opacity: 1; transform: none; }
  .sc-list .sc-txt, .sc-list li.up .sc-txt { position: static; margin-top: -15px; padding-left: 26px; }
  .sc-link { margin-left: 0; }
  .close-links { flex-direction: column; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .split .in, .rv { transform: none !important; opacity: 1 !important; }
  .reading .w { opacity: 1; }
  .g-flow .waves, .g-aware .pass, .g-aware .ring, .g-choice .trunk, .g-choice .br, .jr.here .jr-dot::after, .sc-flow.is-drawn .sc-pulse { animation: none !important; }
  .nm-top { filter: blur(6px); }
}