/* 로그업 대문 v3 — 아스트라 시안의 구조·타이포 위에 사이트 토큰(어두운 바탕 + 민트)을 입혔다.
   수익 빨강 · 손실 파랑은 국내 관례라 액센트로 못 쓰고, 민트는 상호작용·강조 전용. */
:root{--bg:#0d1119;--bg-2:#12151c;--surface:#1d202b;--surface-hi:#262c3b;--ink:#eeeff2;--muted:#a6adbf;--dim:#76819e;--mint:#82f3e4;--mint-ink:#0d1117;--gain:#ff6b6b;--loss:#6e9bff;--line:rgba(50,60,82,.7);--line-soft:rgba(50,60,82,.45);--dark:#080c16;--ease:cubic-bezier(.2,.8,.2,1);--mono:var(--font-jetbrains-mono),"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}
/* app globals put overflow-x:hidden on html/body, which turns body into a scroll container and breaks position:sticky. clip does not. */
html,body{overflow:visible!important;overflow-x:clip!important}
body{margin:0;color:var(--ink);background:var(--bg);font-family:Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,summary{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:6px}
img,video{display:block;width:100%;height:auto}h1,h2,h3,p{margin:0}
h2{font-size:clamp(34px,4.25vw,62px);font-weight:720;line-height:1.25;letter-spacing:-.045em}h3{font-size:22px;letter-spacing:-.035em}
p{font-size:18px;line-height:1.85;color:var(--muted);letter-spacing:-.025em}h2+p{margin-top:25px}
.eyebrow{color:var(--mint);font-size:12px;font-weight:650;letter-spacing:.14em;margin-bottom:22px;line-height:1.5}.eyebrow.light{color:var(--mint)}
.muted{color:var(--dim)}.blue-text{color:var(--mint)}.center{text-align:center}.fine{font-size:13px;line-height:1.7;color:var(--dim)}
.section{padding:130px max(6vw,24px);max-width:1600px;margin:auto}.section-top{text-align:center;margin-bottom:64px}.section-top>p:last-child{margin-top:25px}
.tinted{background:var(--bg-2);max-width:none}.tinted>*{max-width:1248px;margin-left:auto;margin-right:auto}
.split-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:45px;margin-bottom:58px}.split-heading>p,.split-heading>div>p:not(.eyebrow){max-width:430px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:36px;padding:20px 25px;border-radius:13px;font-size:16px;font-weight:600;transition:transform .25s,background .25s,box-shadow .25s;min-height:58px}.button:hover{transform:translateY(-3px)}
.blue{background:var(--mint);color:var(--mint-ink);box-shadow:0 8px 35px rgba(130,243,228,.18)}.blue:hover{background:#9af7ea;box-shadow:0 12px 40px rgba(130,243,228,.28)}.button>span{font-size:21px;font-weight:400}
/* 누르고 싶게 — 은은하게 숨 쉬는 광 + 5초에 한 번 지나가는 하이라이트 */
.button.glow{position:relative;overflow:hidden;animation:ctaGlow 3.8s ease-in-out infinite}
.button.glow::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:26%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);animation:ctaSheen 5.2s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 0 1px rgba(130,243,228,.32),0 10px 38px rgba(130,243,228,.20),0 0 64px rgba(130,243,228,.10)}50%{box-shadow:0 0 0 1px rgba(130,243,228,.55),0 14px 48px rgba(130,243,228,.36),0 0 96px rgba(130,243,228,.22)}}
@keyframes ctaSheen{0%,72%{left:-30%}100%{left:130%}}
.button.ghost{background:rgba(130,243,228,.06);color:var(--mint);border:1px solid rgba(130,243,228,.42);gap:22px}.button.ghost:hover{background:rgba(130,243,228,.12);border-color:rgba(130,243,228,.7)}
.inline-link{color:var(--mint);font-size:16px;font-weight:600;display:inline-block;margin-top:28px}.text-link{display:inline-flex;gap:25px;color:#d7dfed;font-size:16px;align-items:center}
/* ── 네비 · 로고(현재 사이트 락업 그대로: 셰브론 스택 + logup_) ── */
.nav{height:84px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;width:100%;z-index:30;color:#fff;transition:background .4s,border-color .4s;border-bottom:1px solid rgba(255,255,255,.06)}
.nav.scrolled{background:rgba(13,17,25,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-color:var(--line)}
.wordmark{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:24px;letter-spacing:-.045em;font-weight:700}.wordmark .mark{width:32px;height:32px;flex:none}.wordmark .us{color:var(--mint)}
.sample-tag{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--dim);margin:2px 0 0 9px;font-weight:500}
.nav nav{display:flex;gap:24px;font-size:13px;color:var(--muted);white-space:nowrap}.nav nav a:hover{color:var(--mint)}
/* 챕터 7개를 다 펴면 헤더 내용이 842px — 여백까지 보면 1024px 부터 편하다.
   그 아래에서는 대표 3개만 남긴다(760px 아래는 nav 자체가 빠진다) */
@media(max-width:1023px){.nav nav .nav-more{display:none}}
.nav-cta{border:1px solid rgba(130,243,228,.35);border-radius:9px;padding:12px 17px;font-size:13px;display:flex;gap:22px;color:var(--mint)}.nav.scrolled .nav-cta{background:var(--mint);color:var(--mint-ink);border-color:transparent}
.skip{position:fixed;top:-100px;z-index:90;background:var(--mint);color:var(--mint-ink);padding:20px}.skip:focus{top:0}
/* ── 스테이지 ── */
.journey{height:1850vh;height:1850lvh;background:var(--dark);position:relative}
.stage{height:100vh;min-height:640px;position:sticky;top:0;overflow:hidden;color:#fff;background:radial-gradient(ellipse at 50% 78%,#151c2b,#080c16 66%)}
#candles{position:absolute;inset:0;width:100%;height:100%}
.stage-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 36%,rgba(8,12,22,.55),transparent 60%);pointer-events:none}
.hero-copy{position:absolute;z-index:2;top:20%;width:100%;text-align:center;will-change:transform,opacity}
.hero-copy .eyebrow{font-size:14px;letter-spacing:.035em;color:#92a8cd;margin-bottom:24px}
.hero-copy h1{font-size:clamp(42px,5.3vw,80px);line-height:1.2;letter-spacing:-.055em;font-weight:750;text-shadow:0 3px 35px #080c16}
/* 두 번째 줄 — 사이트 민트, 보일락 말락 숨 쉬는 광 */
.hero-copy h1 span{color:var(--mint);text-shadow:0 0 18px rgba(130,243,228,.26),0 0 48px rgba(130,243,228,.14);animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{text-shadow:0 0 14px rgba(130,243,228,.18),0 0 40px rgba(130,243,228,.08)}50%{text-shadow:0 0 22px rgba(130,243,228,.40),0 0 64px rgba(130,243,228,.22)}}
.hero-copy p{margin:27px 0 32px;color:#a1aec4;font-size:18px;line-height:1.75}.hero-actions{display:flex;align-items:center;justify-content:center;gap:30px}
.hero-note{display:block;font-size:12px;color:#76859f;letter-spacing:.01em;margin-top:17px}
.market-caption{position:absolute;bottom:42px;left:5%;right:5%;display:flex;justify-content:space-between;color:#53627f;font-size:10px;letter-spacing:.15em;font-family:var(--mono)}.market-caption span:last-child{font-size:12px;letter-spacing:0;font-family:inherit}
/* ── 스크롤 유도 ──
   여정이 18.5화면짜리인데 "아래에 더 있다"는 신호가 흐린 글자 한 줄과 가느다란
   선뿐이었다. 손님이 첫 화면만 보고 떠난다 — 스테이지가 sticky 라서 조금 굴려도
   화면이 그대로라, 더 볼 게 없다고 읽힌다. 그래서 세 겹으로 말한다:
   행동을 이름으로 부르는 알약 버튼, 선을 타고 흘러내리는 빛, 줄지어 내려가는 꺾쇠.
   눌러도 되게 button 으로 바꿨다(한 화면 내려가면 차트가 줌인을 시작한다).
   알약에 어두운 바탕과 흐림을 깔았다 — 뒤가 캔들 차트라 글자만 놓으면 봉과
   겹쳐 묻힌다. 배경이 무엇이든 읽히려면 제 바탕을 들고 있어야 한다.
   한글을 모노 9px 로 찍었더니 폴백 폰트가 자간에 눌려 뭉갰다 — 라틴 글꼴의
   자간 값은 한글에 그대로 못 쓴다. 본문 글꼴로 되돌렸다.
   모션은 누구에게나 항상 돈다 — 이 애니메이션을 끄는 경로는 이제 없다. */
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;font-size:13px;font-weight:600;color:#dbe6f8;gap:12px;background:transparent;border:0;padding:6px 16px 4px;text-shadow:0 2px 10px var(--dark),0 0 26px rgba(8,12,22,.95)}
.scroll-cue b{font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--mint);border:1px solid rgba(130,243,228,.55);border-radius:999px;background:rgba(9,14,25,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);padding:8px 18px;text-shadow:none;animation:cue-glow 2.6s var(--ease) infinite}
.scroll-cue i{position:relative;display:block;height:30px;width:2px;border-radius:2px;background:rgba(130,243,228,.22);overflow:hidden;margin-top:2px}
.scroll-cue i::after{content:"";position:absolute;left:0;width:100%;height:100%;background:linear-gradient(transparent,var(--mint));animation:cue-run 2.6s var(--ease) infinite}
.scroll-cue em{display:block;width:11px;height:11px;border-right:2px solid var(--mint);border-bottom:2px solid var(--mint);border-radius:0 0 3px 0;filter:drop-shadow(0 0 7px rgba(130,243,228,.6));animation:cue-chev 1.9s var(--ease) infinite}
.scroll-cue em+em{margin-top:-15px;animation-delay:.22s}
.scroll-cue:hover{color:var(--mint)}.scroll-cue:hover b{background:var(--mint);color:var(--mint-ink);border-color:transparent}
@keyframes cue-glow{0%,100%{box-shadow:0 0 0 0 rgba(130,243,228,.30),0 6px 26px rgba(8,12,22,.6)}55%{box-shadow:0 0 0 9px rgba(130,243,228,0),0 6px 26px rgba(8,12,22,.6)}}
@keyframes cue-run{0%{top:-100%}55%,100%{top:100%}}
/* 회전이 먼저라 이어지는 translate 는 돌아간 축을 탄다 — (3px,3px) 이 곧 정아래 4.2px */
@keyframes cue-chev{0%,100%{transform:rotate(45deg) translate(-3px,-3px);opacity:.5}50%{transform:rotate(45deg) translate(3px,3px);opacity:1}}
/* 6초 동안 한 번도 안 굴렸으면 더 크게 부른다 — 여기까지 해도 안 보였다는 뜻이다 */
.scroll-cue.nudge{color:var(--ink);animation:cue-bob 1.4s var(--ease) infinite}
.scroll-cue.nudge b{border-color:var(--mint);animation-duration:1.4s}
.scroll-cue.nudge i::after,.scroll-cue.nudge em{animation-duration:1.1s}
@keyframes cue-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
/* 손익 카드 — 캔버스 마커와 짝. 왼쪽 아래 */
.readout{position:absolute;z-index:3;left:50%;bottom:max(15vh,120px);--ro-x:-50%;transform:translateX(var(--ro-x));opacity:0;visibility:hidden;font-family:var(--mono);font-size:15px;background:rgba(22,26,36,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(130,243,228,.22);border-radius:14px;padding:22px 30px;font-variant-numeric:tabular-nums;will-change:opacity,transform;min-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.readout .r{display:flex;gap:36px;align-items:baseline;justify-content:space-between}.readout .r+.r{margin-top:9px}.readout .k{color:var(--muted);font-size:15px}.readout .v{font-size:29px;font-weight:700;color:var(--ink)}.readout .v.neg{color:var(--loss);text-shadow:0 0 18px rgba(110,155,255,.45)}.readout .v.pos{color:var(--gain);text-shadow:0 0 18px rgba(255,107,107,.45)}
.readout .line{color:var(--muted);font-size:13px;margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);font-family:Pretendard,"Noto Sans KR",sans-serif;letter-spacing:0;line-height:1.5;text-align:center}
/* 리플레이 레이어 — 가루가 모여드는 목적지 */
.replay-layer{position:absolute;top:9%;width:min(1300px,90vw);left:0;right:0;margin:0 auto;opacity:0;visibility:hidden}
.replay-heading{text-align:center;margin-bottom:26px}.replay-heading h2{font-size:clamp(27px,3.15vw,45px);display:inline-block}.replay-heading .eyebrow{margin-bottom:13px}.replay-heading p{font-size:15px;margin-top:15px;color:#8596b4}
.replay-screen{width:min(1248px,100%);margin:auto}.replay-screen video{width:100%;max-height:64vh;object-fit:contain;border-radius:10px;background:#0f1219}
.replay-anchor{position:absolute;top:calc(100% - 100vh);top:calc(100% - 100lvh)}
.demo-label{font-size:10px;letter-spacing:.08em;color:var(--dim);font-weight:500;font-family:var(--mono)}
/* ── 거래소: 화면 폭을 꽉 채우는 큰 로고 ── */
.exchanges.section{max-width:none;padding-left:max(4vw,20px);padding-right:max(4vw,20px)}
.exchange-list{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;margin:64px auto 34px;align-items:start;max-width:1560px}
.exchange-list a{display:flex;align-items:center;flex-direction:column;gap:22px;transition:transform .3s var(--ease)}.exchange-list a:hover{transform:translateY(-6px)}
.exchange-list img{width:clamp(88px,9.5vw,152px);height:clamp(88px,9.5vw,152px);object-fit:cover;border-radius:22%;background:#fff;box-shadow:0 20px 50px -22px rgba(0,0,0,.9)}
/* 자기 타일을 이미 그리는 SVG 로고 — 흰 바탕을 깔면 모서리에 하얀 실선이 샌다 */
.exchange-list img.own-tile{background:transparent;border-radius:0;object-fit:contain}
.exchange-list strong{font-size:clamp(17px,1.6vw,24px);letter-spacing:-.6px}.exchange-list span{font-size:13px;color:var(--dim)}
/* ── 영상·사진: 테두리 없이 어두운 바탕에 그대로 ── */
.product-frame{position:relative;margin:0 auto;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;max-width:1248px}
.product-frame>img,.product-frame>video{aspect-ratio:1.6;object-fit:cover;background:#0f1219;border-radius:10px}
.frame-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--dim);font-size:11px;letter-spacing:.12em;padding:0 4px 14px;font-family:var(--mono)}
.product-frame figcaption{padding:16px 4px 0;text-align:center;font-size:12.5px;line-height:1.65;color:var(--dim)}
.calendar-frame{max-width:1248px}
.feature-notes{display:grid;grid-template-columns:repeat(3,1fr);max-width:1100px;gap:50px;margin:55px auto 0}.small-num{color:var(--mint);font-size:12px;letter-spacing:.1em;font-family:var(--mono)}.feature-notes h3{margin:16px 0 10px;font-size:19px}.feature-notes p{font-size:15px}
.dark-section{background:var(--dark);color:#fff;max-width:none}.dark-section>*{max-width:1248px;margin-left:auto;margin-right:auto}.dark-section p{color:var(--muted)}
.product-frame>img.tall{aspect-ratio:auto;object-fit:contain;height:auto}
.whale-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px;max-width:1248px}.whale-grid .product-frame{margin:0}.whale-grid .frame-caption{padding-bottom:10px}
.map-notes{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:22px;margin:22px auto 0;max-width:1248px}.map-notes .text-link{grid-column:1/-1;justify-self:end;margin-top:6px}.map-notes b{font-size:17px}.map-notes p{font-size:14px;margin-top:9px}
/* ── 명학 ── */
.engine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.engine-grid article{min-width:0}
.engine-image{border-radius:25px;overflow:hidden;background:var(--surface)}.engine-image img{aspect-ratio:1;object-fit:cover;transition:transform .7s}.engine-grid article:hover img{transform:scale(1.035)}
.engine-copy{padding:29px 8px 15px}.engine-copy>span{color:var(--dim);font-size:11px;letter-spacing:.08em;font-family:var(--mono)}.engine-copy h3{font-size:29px;margin:12px 0}.engine-copy p{font-size:16px;line-height:1.8}
.engine-spec{font-size:12px;color:var(--mint);margin-top:25px;padding-top:20px;border-top:1px solid var(--line-soft);font-family:var(--mono)}
.mental-principle{display:flex;align-items:flex-start;gap:24px;margin-top:70px;padding:35px 40px;border-radius:20px;background:var(--surface);border:1px solid var(--line-soft)}
.cross-icon{display:grid;place-items:center;font-size:32px;color:var(--mint);height:42px;width:42px;flex-shrink:0}.mental-principle h3{font-size:26px;margin-bottom:12px;color:#fff;letter-spacing:-.02em}.mental-principle p{font-size:18px;color:rgba(255,255,255,.9);font-weight:500}.mental-principle .fine{font-size:12px;margin-top:12px}
/* ── 상담 ── */
.chat-question{display:flex;justify-content:center;gap:18px;align-items:center;font-size:clamp(18px,2.1vw,29px);letter-spacing:-.04em;font-weight:600;margin:-14px 0 40px}.chat-question>span{color:var(--mint);font-size:42px;font-weight:400;opacity:.8}
.chat-frame{max-width:1248px}
/* ── CSV ── */
.csv{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:center}.csv>div{width:100%}.csv h2{font-size:clamp(29px,3.2vw,47px)}.csv p{margin:25px 0 30px;font-size:16px}
.csv-visual{background:var(--surface);border:1px solid var(--line);border-radius:23px;padding:30px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);--rest-rot:-2deg;transform:rotate(var(--rest-rot))}
.file-head{display:flex;gap:14px;align-items:center;padding-bottom:25px}.file-icon{background:rgba(130,243,228,.12);border:1px solid rgba(130,243,228,.35);border-radius:9px;padding:16px 9px;font-size:12px;font-weight:700;color:var(--mint);font-family:var(--mono)}
.file-head>div{display:flex;gap:7px;flex-direction:column;font-size:16px}.file-head>div>span{font-size:12px;color:var(--dim)}.check{margin-left:auto;color:var(--mint);background:rgba(130,243,228,.12);border-radius:50%;padding:5px 9px}
.csv-row{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:10px;padding:19px 0;border-top:1px solid var(--line-soft);font-size:12px;align-items:center}.csv-row>span{color:var(--dim)}.csv-row>b{font-weight:600}.csv-row strong{text-align:right;color:var(--gain);font-size:15px;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.csv-th{font-size:11px;padding:13px 0}.csv-th>span:last-child{text-align:right}.csv-status{border-radius:9px;background:rgba(130,243,228,.08);padding:13px 12px;color:var(--mint);font-size:12px;display:flex;gap:8px;align-items:center}.csv-status small{font-size:9px;color:var(--dim);margin-left:auto}
/* ── 보안 ── */
.security{text-align:center}.security-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:left;gap:50px;margin-top:65px}.security-grid article{padding-top:24px;border-top:1px solid var(--line)}
.security-symbol{font-size:30px;display:block;color:var(--mint);margin-bottom:25px}.security-grid h3{font-size:21px;margin-bottom:14px}.security-grid p{font-size:16px}
/* ── FAQ ── */
.faq{display:grid;grid-template-columns:.8fr 1.3fr;gap:100px}.faq>div{margin:0;width:100%}.faq h2{font-size:44px}.faq p{font-size:16px}
.faq-items{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;font-size:17px;padding:27px 0;font-weight:550;line-height:1.5;color:var(--ink)}summary::-webkit-details-marker{display:none}
summary>span{font-size:25px;font-weight:300;color:var(--mint);transition:transform .2s}details[open] summary>span{transform:rotate(45deg)}details>p{padding:0 30px 25px 0}
/* ── 최종 CTA · 푸터 ── */
.final-cta{text-align:center;max-width:none;background:radial-gradient(ellipse at 50% 100%,#12302f,var(--dark) 65%);color:white;padding-top:115px;padding-bottom:110px}
.final-cta h2{font-size:clamp(37px,4.5vw,63px)}.final-cta p:not(.eyebrow){color:var(--muted);margin:25px 0 35px;font-size:17px}
footer{padding:60px 6%;display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#080d17;color:#c2cddd;border-top:1px solid var(--line-soft)}
footer>p{font-size:14px;color:var(--dim);grid-column:1}footer>div{display:flex;gap:22px;grid-column:2;grid-row:1;justify-content:flex-end;align-items:center;font-size:12px;color:var(--muted)}footer>small{grid-column:1/-1;font-size:11px;line-height:1.9;color:#53647f;margin-top:10px}
/* 사업자 신원 표시(전자상거래법 제10조). 면책 문구보다 위에 서야 해서 위쪽
   여백만 크게 주고, 아래 면책 <small> 과 붙지 않게 마진을 0 으로 접는다. */
footer>small.biz{margin-top:22px;margin-bottom:-6px;color:#67788f;word-break:keep-all}.biz+.biz{margin-top:4px}
/* 모션 정지 경로는 없다. prefers-reduced-motion 이면 스테이지를 세로로 펴는
   .reduced 판(+ 오른쪽 아래 일시정지 버튼)이 있었는데, 그 설정은 본인도 모르게
   켜져 있는 기기가 많아서(윈도우 "애니메이션 표시" 끄기, 안드로이드 절전,
   접근성 프리셋) 대문이 정지 사진으로 보였다. 2026-09-17 에 걷어냈다 —
   되살릴 거면 motion.js 의 paused 경로도 같이 돌아와야 한다. */
@media(min-width:1600px){.section{padding-left:calc((100vw - 1248px)/2);padding-right:calc((100vw - 1248px)/2);max-width:none}.exchanges.section{padding-left:max(4vw,20px);padding-right:max(4vw,20px)}.replay-layer{top:13%}}
@media(max-height:760px) and (min-width:761px){.hero-copy{top:21%}.hero-copy h1{font-size:61px}.hero-copy p{margin:20px 0}.replay-layer{top:11%}.replay-heading h2{font-size:34px}.replay-heading .eyebrow{margin-bottom:10px}.replay-heading p{margin-top:10px}.replay-heading{margin-bottom:18px}.replay-screen{max-width:650px}}
@media(max-width:900px){.nav nav{gap:20px}.nav nav a{font-size:12px}.exchange-list{gap:20px}.exchange-list strong{font-size:16px}.exchange-list span{font-size:10px}.split-heading{align-items:flex-start}.split-heading>p{font-size:16px}.engine-grid{gap:16px}.engine-copy p{font-size:14px}.engine-copy{padding-left:0}.csv{gap:35px}.security-grid{gap:25px}.faq{gap:40px}.map-notes{gap:25px}.map-notes p{font-size:12px}}
@media(max-width:760px){.nav{height:70px;padding:0 22px}.wordmark{font-size:16px}.sample-tag{font-size:8px;margin-left:4px}.nav nav{display:none}.nav-cta{font-size:11px;padding:10px 12px;gap:10px}
.stage{min-height:680px}.journey{height:1600vh;height:1600lvh}.whale-grid{grid-template-columns:1fr}.button.ghost{gap:14px}.hero-copy{top:19%;padding:0 20px}.hero-copy h1{font-size:clamp(33px,7.6vw,55px);line-height:1.25;letter-spacing:-.055em}.hero-copy .eyebrow{font-size:12px;margin-bottom:22px}.hero-copy p{font-size:15px;margin:24px 0 28px}.hero-actions{flex-direction:column;gap:22px}
.button{padding:17px 20px;gap:24px;font-size:14px;min-height:54px}.text-link{font-size:14px}.hero-note{font-size:11px}
.market-caption{bottom:58px}.market-caption>span:first-child{display:none}.scroll-cue{bottom:42px}.market-caption>span:last-child{display:none}
.readout{left:16px;right:16px;bottom:22px;min-width:0;font-size:11px;--ro-x:0px}.readout .v{font-size:17px}
.replay-layer{width:92vw;top:22%}.replay-heading h2{font-size:26px}.replay-heading p{font-size:13px;max-width:290px;margin:15px auto 0}.replay-screen{border-radius:8px}.replay-screen video{max-height:none}
.section{padding:85px 23px}.section-top{margin-bottom:42px}.section-top>p:last-child{font-size:16px;margin-top:21px}.eyebrow{font-size:10px;margin-bottom:17px}h2{font-size:34px}
.exchange-list{grid-template-columns:repeat(3,1fr);gap:32px 15px;margin-top:40px}.exchange-list img{width:76px;height:76px}.exchange-list a{gap:12px}.exchange-list span{font-size:10px}.exchanges .fine{font-size:11px;max-width:285px;margin:auto}
.product-frame>img,.product-frame>video{border-radius:8px}.frame-caption{font-size:8px;letter-spacing:.06em;padding:0 0 10px}.demo-label{font-size:8px;letter-spacing:0}.product-frame figcaption{font-size:10px;padding:12px 0 0}
.feature-notes{grid-template-columns:1fr;gap:27px;margin-top:40px}.feature-notes>div{position:relative;padding-left:43px}.small-num{position:absolute;top:3px;left:0}.feature-notes h3{margin:0 0 5px;font-size:18px}.feature-notes p{font-size:14px}
.split-heading{display:block;margin-bottom:34px}.split-heading>div+div,.split-heading>p{margin-top:24px}.split-heading p{font-size:15px}.map-notes{display:grid;grid-template-columns:1fr;gap:23px}.map-notes b{font-size:17px}.map-notes p{font-size:14px}
.engine-grid{grid-template-columns:1fr;gap:32px}.engine-grid article{display:grid;grid-template-columns:.8fr 1fr;gap:20px;align-items:center}.engine-image{border-radius:16px}.engine-copy{padding:0}.engine-copy>span{font-size:8px}.engine-copy h3{font-size:24px;margin:9px 0}.engine-copy p{font-size:13px;line-height:1.75}.engine-copy p br{display:none}.engine-spec{font-size:10px;padding-top:13px;margin-top:14px}
.mental-principle{padding:24px 20px;margin-top:40px;gap:10px}.cross-icon{width:23px;font-size:24px}.mental-principle h3{font-size:21px;line-height:1.5}.mental-principle p{font-size:15px}.mental-principle .fine{font-size:11px}
.chat-question{gap:8px;text-align:center;font-size:19px;margin:0 0 30px;line-height:1.5}.chat-question>span{font-size:32px}
.csv{display:flex;flex-direction:column;gap:42px}.csv h2{font-size:28px}.csv p{font-size:14px}.csv-visual{padding:22px;--rest-rot:0deg}
.security-grid{grid-template-columns:1fr;gap:28px;margin-top:35px}.security-grid article{padding-top:20px}.security-symbol{margin-bottom:15px}.security-grid h3{font-size:20px}.security-grid p{font-size:15px}
.faq{display:block}.faq h2{font-size:34px}.faq-items{margin-top:35px!important}summary{font-size:15px;padding:22px 0}.faq p{font-size:14px}
.final-cta h2{font-size:35px}.final-cta p:not(.eyebrow){font-size:14px}footer{padding:45px 24px;display:flex;flex-direction:column;gap:17px}footer>div{justify-content:flex-start;gap:20px;font-size:11px}footer>small{font-size:10px}
}

/* ── 폰 ① 히어로와 스크롤 큐의 자리 다툼 ──────────────────
   .hero-copy(위에서 19%)와 .scroll-cue(아래에서 42px)는 둘 다 .stage 안의
   position:absolute 라 서로의 높이를 모른다. 실측하면 히어로 462 + 큐 153 +
   42 이라 스테이지가 811px 보다 낮아지는 순간부터 겹친다 — 폴드를 펼친
   화면처럼 폭은 폰인데 세로가 짧은 비율에서 "무료 둘러보기" 위로 "기록 속에,
   답이 있어요"가, "가입·연동 없이 바로 시작하세요" 위로 알약이 올라탄다.
   높이에 미디어쿼리 하나만 걸면 그 경계 바로 아래에서 또 겹치므로, 히어로를
   스테이지 전체에 깔고 아래쪽에 큐 자리를 패딩으로 비운 뒤 남는 공간에
   가운데 정렬한다 — 화면이 짧아지는 만큼 위 여백부터 줄어든다. 위 패딩이
   14vh 인 건 키 큰 폰에서 지금 자리(19%)와 거의 같은 높이에 서라는 뜻이다. */
@media(max-width:760px){
 .hero-copy{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:14vh 20px 207px}
}
/* 세로가 더 짧아지면 가운데 정렬만으로는 모자라다 — 히어로와 큐 양쪽에서
   군살을 같이 뺀다. */
@media(max-width:760px) and (max-height:800px){
 .hero-copy{padding-bottom:179px}
 .hero-copy .eyebrow{margin-bottom:14px}
 .hero-copy p{margin:18px 0 20px}
 .hero-actions{gap:16px}
 .hero-note{margin-top:12px}
 .scroll-cue{gap:8px}
 .scroll-cue i{height:16px}
}
/* 제일 나쁜 자리는 "폭은 넓은데 세로가 짧은" 구간이다 — .stage 의 min-height
   가 680 이라 그보다 낮은 화면에서도 무대는 680 으로 서는데, 폭이 760 이면
   h1 이 55px 까지 커져서 위 여백이 줄어든 만큼을 헤드라인이 도로 먹는다.
   실측 760x680 에서 -2px 로 겹쳤다. 여백을 더 비우면 이번엔 눈썹이
   내비(70px) 밑으로 파고드니, 남은 답은 글자와 버튼을 같이 줄이는 것뿐이다.
   min-width 를 거는 이유: 좁은 폰(360x640 여유 49px)은 애초에 안 겹치는데
   폭 조건을 빼면 거기까지 헤드라인이 작아진다. 줄이는 건 겹치는 쪽만. */
@media(min-width:600px) and (max-width:760px) and (max-height:760px){
 .hero-copy h1{font-size:clamp(28px,6.6vw,46px)}
 .hero-copy p{font-size:14px;margin:14px 0 18px}
 .button{min-height:50px;padding:14px 18px}
 .scroll-cue i{height:12px}
}
.reveal{opacity:0;transform:translateY(36px) rotate(var(--rest-rot,0deg));transition:opacity .85s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0s)}.reveal.in{opacity:1;transform:rotate(var(--rest-rot,0deg))}
.exchange-list a{opacity:0;transform:translateX(-110px);transition:opacity .8s var(--ease),transform .9s cubic-bezier(.16,.9,.24,1);transition-delay:var(--d,0s)}.exchange-list a:nth-child(n+4){transform:translateX(110px)}
.exchange-list.in a{opacity:1;transform:none}.exchange-list.in a:hover{transform:translateY(-6px);transition-delay:0s;transition-duration:.3s}

/* 고래 지도 작은 사진 확대 (lightbox.js) */
.lb-backdrop{position:fixed;inset:0;z-index:90;background:rgba(4,6,10,0);transition:background .5s cubic-bezier(.2,.8,.2,1);cursor:zoom-out}.lb-backdrop.in{background:rgba(4,6,10,.86)}
.lb-img{position:fixed;z-index:91;margin:0;object-fit:contain;border-radius:10px;transform-origin:0 0;will-change:transform;cursor:zoom-out;transition:transform .55s cubic-bezier(.2,.8,.2,1),border-radius .55s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}

/* ── 손가락 기기 보정 ─────────────────────────────
   폭(max-width)이 아니라 **입력 장치**로 가른다. 좁게 줄인 데스크톱 창은
   마우스라 24px 링크가 멀쩡하고, 430px 짜리 큰 폰은 넓어도 손가락이라
   24px 가 안 눌린다. 폭으로 가르면 둘 다 틀린다.

   위 max-width:760px 블록이 본문·버튼 치수는 이미 잡아 뒀다(.button 은
   min-height:54px). 여기 남은 건 그 블록이 안 건드린 내비·푸터·인라인
   링크와, 11px 로 떨어지는 글자들이다. 실측 높이: 로그인 24px,
   시작하기 24px, 모션 토글 17px, 푸터 링크 17px. 기준은 44px. */
@media (pointer: coarse) {
  .nav-cta a,
  .wordmark,
  .inline-link,
  .text-link,
  footer > div a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-cta a { font-size: 12px }
  /* 11px 은 폰에서 읽기 힘든 하한이다 */
  .hero-note,
  footer > div { font-size: 12px }
  footer > small { font-size: 11px }

  /* 노치·홈 인디케이터. 루트가 viewport-fit=cover 라 화면 끝까지 그려진다 —
     피하는 건 우리 몫이다. 폴백 0px 이 없으면 env() 를 모르는 환경에서
     calc() 가 통째로 무효가 돼 여백이 사라진다. */
}

/* 안전영역은 **폰 레이아웃일 때만** 건드린다. `pointer:coarse` 는 폭 제한이
   없어서 터치 노트북·아이패드 가로까지 걸리는데, 거기서 좌우 패딩을 덮으면
   넓은 화면의 여백 설계가 통째로 무너진다. 그래서 위 max-width:760px 블록과
   같은 조건을 건다. 각 요소의 원래 값(nav 22 / footer 24 / section 23)을
   그대로 두고 inset 만 더한다. */
@media (pointer: coarse) and (max-width: 760px) {
  .nav {
    padding-left: calc(22px + env(safe-area-inset-left, 0px));
    padding-right: calc(22px + env(safe-area-inset-right, 0px));
  }
  footer {
    padding-left: calc(24px + env(safe-area-inset-left, 0px));
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(45px + env(safe-area-inset-bottom, 0px));
  }
  .section {
    padding-left: calc(23px + env(safe-area-inset-left, 0px));
    padding-right: calc(23px + env(safe-area-inset-right, 0px));
  }
  .readout {
    left: calc(16px + env(safe-area-inset-left, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 04 마켓 갤럭시 — 잠든 태양(포스터) 이 시세가 닿는 순간 진짜 항성계로 깨어난다.
   포스터는 마크업, 페이드 스위치(data-live) 는 landing-galaxy-live 가 켠다. ── */
.galaxy .split-heading>p{max-width:520px}
.galaxy-truth{display:inline-block;margin-top:8px;color:#fff;font-weight:600}
.galaxy-stage{position:relative;max-width:1248px;margin:0 auto;aspect-ratio:16/9;min-height:400px;max-height:700px;border-radius:14px;overflow:hidden;background:#030508;border:1px solid rgba(130,243,228,.14);box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.03);cursor:grab}
.galaxy-stage:active{cursor:grabbing}
.galaxy-poster{position:absolute;inset:0;z-index:2;transition:opacity .7s var(--ease);background:
 radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.55) 50%,transparent 51%),
 radial-gradient(1px 1px at 78% 18%,rgba(255,255,255,.4) 50%,transparent 51%),
 radial-gradient(1.5px 1.5px at 88% 64%,rgba(255,255,255,.5) 50%,transparent 51%),
 radial-gradient(1px 1px at 31% 71%,rgba(255,255,255,.35) 50%,transparent 51%),
 radial-gradient(1px 1px at 57% 12%,rgba(255,255,255,.45) 50%,transparent 51%),
 radial-gradient(1px 1px at 8% 58%,rgba(255,255,255,.3) 50%,transparent 51%),
 radial-gradient(1.5px 1.5px at 68% 84%,rgba(255,255,255,.4) 50%,transparent 51%),
 radial-gradient(1px 1px at 43% 38%,rgba(255,255,255,.3) 50%,transparent 51%),
 radial-gradient(1px 1px at 94% 34%,rgba(255,255,255,.35) 50%,transparent 51%),
 radial-gradient(1px 1px at 22% 88%,rgba(255,255,255,.3) 50%,transparent 51%),
 radial-gradient(ellipse 60% 50% at 50% 54%,rgba(251,191,36,.07),transparent 70%),
 #030508}
.galaxy-poster::before{content:"";position:absolute;inset:-40% 0;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 62px,rgba(255,255,255,.04) 62px 63px);transform:scaleY(.38);-webkit-mask:radial-gradient(ellipse 62% 70% at 50% 50%,#000 20%,transparent 78%);mask:radial-gradient(ellipse 62% 70% at 50% 50%,#000 20%,transparent 78%)}
.galaxy-sun{position:absolute;left:50%;top:52%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fff7d6,#fbbf24 55%,#d97706);animation:sunBreathe 3.4s ease-in-out infinite}
@keyframes sunBreathe{0%,100%{box-shadow:0 0 24px 6px rgba(251,191,36,.55),0 0 90px 30px rgba(251,191,36,.16)}50%{box-shadow:0 0 34px 10px rgba(251,191,36,.8),0 0 140px 48px rgba(251,191,36,.26)}}
.galaxy-poster-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#8999b5;white-space:nowrap}
.galaxy-stage[data-live="1"] .galaxy-poster{opacity:0;pointer-events:none}
.galaxy-live{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s var(--ease)}
.galaxy-stage[data-live="1"] .galaxy-live{opacity:1}
.galaxy-canvas{position:absolute;inset:0}
/* 폰: 한 손가락 세로는 페이지 스크롤, 가로는 회전, 두 손가락은 캔버스가 받아 확대 — R3F 가 박는 touch-action:none 을 덮어쓴다 */
@media(pointer:coarse){.galaxy-canvas,.galaxy-canvas *{touch-action:pan-y!important}}
.galaxy-hud{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:22px 26px;font-family:var(--mono)}
.galaxy-hud-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.galaxy-hud-row.bottom{align-items:flex-end}
.galaxy-live-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;font-weight:700;color:#4ade80;background:rgba(3,5,8,.55);border:1px solid rgba(74,222,128,.3);border-radius:999px;padding:6px 11px 6px 9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.galaxy-live-badge i{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:livePulse 1.6s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}100%{box-shadow:0 0 0 9px rgba(74,222,128,0)}}
.galaxy-hud-meta{font-size:11px;letter-spacing:.1em;color:#8999b5;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.galaxy-sun-line{display:flex;align-items:baseline;gap:14px;font-family:Pretendard,"Noto Sans KR",sans-serif;letter-spacing:-.03em;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.galaxy-sun-line span{font-size:13px;color:#a6adbf;font-weight:500}
.galaxy-sun-line strong{font-size:clamp(22px,2.6vw,36px);font-weight:760;color:#fff}
.galaxy-sun-line b{font-size:clamp(20px,2.3vw,32px);font-weight:700;font-family:var(--mono);letter-spacing:-.02em}
.galaxy-sun-line b.pos{color:#4ade80;text-shadow:0 0 18px rgba(74,222,128,.45)}.galaxy-sun-line b.neg{color:#60a5fa;text-shadow:0 0 18px rgba(96,165,250,.45)}
.galaxy-hint{margin-top:10px;font-size:11px;letter-spacing:.04em;color:#8999b5}.galaxy-hint .coarse-only{display:none}
.galaxy-hud-side{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.galaxy-runners{display:flex;flex-direction:column;gap:3px;font-size:11px;color:#a6adbf;letter-spacing:.02em}.galaxy-runners b{color:#4ade80;font-weight:600}
.galaxy .map-notes{margin-top:30px}.galaxy-fine{margin-top:34px}
@media(pointer:coarse){.galaxy-stage{cursor:default}.galaxy-hint .fine-only{display:none}.galaxy-hint .coarse-only{display:inline}}
/* 폰: PC 화면 그대로 작게 — 래퍼는 PC 크기(1100x619)로 두고 캔버스만 zoom 으로 줄인다(배율은 landing-galaxy-live 가 무대 폭에서 재서 --gscale 로 넣는다).
   transform 으로 줄이면 R3F 가 getBoundingClientRect 로 잰 작은 크기에 맞춰 캔버스를 342px 로 다시 잡아 행성이 거대해진다(실측). zoom 은 부모 레이아웃을 안 건드려서 R3F 는 1100 으로 잰다 */
@media(max-width:760px){.galaxy-stage{aspect-ratio:4/3;min-height:0;border-radius:10px}.galaxy-canvas{inset:auto;left:50%;top:50%;width:1100px;height:619px;margin-left:calc(-550px * var(--gscale,.31));margin-top:calc(-309.5px * var(--gscale,.31))}.galaxy-canvas canvas{zoom:var(--gscale,.31);-webkit-mask:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(transparent,#000 10%,#000 90%,transparent)}.galaxy-hud{padding:14px 16px}.galaxy-sun-line{flex-wrap:wrap;gap:8px}.galaxy-sun-line strong{font-size:22px}.galaxy-sun-line b{font-size:20px}.galaxy-hud-side{display:none}.galaxy-poster-cue{font-size:9px;bottom:14px}.galaxy-hud-meta{font-size:9px}.galaxy-fine{margin-top:24px}}