/* 찐컷 퍼널 사이트 v4 — 5화면 SPA (옆으로 슬라이드), 거대 타이포 히어로, 도트 그리드 */
@font-face {
    font-family: "Paperlogy-8ExtraBold";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2") format("woff2");
    font-weight: 800; font-display: swap;
}
@font-face {
    font-family: "Galmuri11";
    src: url("https://fastly.jsdelivr.net/npm/galmuri@latest/dist/Galmuri11-Bold.woff2") format("woff2");
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: "Cafe24Ssurround";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff") format("woff");
    font-weight: 700; font-display: swap;
}
:root {
    --bg: #f6f8fc;
    --ink: #171a23;
    --ink-dim: #6b7180;
    --accent: #3b7bff;
    --accent-deep: #2b5fd9;
    --card: #ffffff;
    --line: #e7eaf3;
    --shadow: 0 8px 28px rgba(23, 40, 90, .09);
    --shadow-lg: 0 22px 54px rgba(23, 40, 90, .15);
    --radius: 20px;
    --max: 1200px;
    --nav-h: 64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    background: var(--bg); color: var(--ink);
    font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
    line-height: 1.65; word-break: keep-all; overflow: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* 배경 — 은은한 오로라 */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background:
    radial-gradient(60% 50% at 85% 0%, #dfe9ff 0%, transparent 60%),
    radial-gradient(50% 40% at 0% 30%, #ffeede 0%, transparent 60%),
    radial-gradient(45% 45% at 90% 80%, #e9e2ff 0%, transparent 60%),
    var(--bg); }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; animation: drift 20s ease-in-out infinite alternate; }
.b1 { width: 520px; height: 520px; background: #c9dcff; top: -140px; right: -120px; }
.b2 { width: 420px; height: 420px; background: #ffe0cc; bottom: 4%; left: -160px; animation-delay: -7s; }
.b3 { width: 380px; height: 380px; background: #ded2ff; top: 46%; right: 8%; animation-delay: -13s; }
@keyframes drift { to { transform: translate(40px, -30px) scale(1.08); } }

/* 도트 그리드 — 홈에서만 */
#dotgrid { position: fixed; inset: 0; z-index: -1; opacity: 0; transition: opacity .8s; pointer-events: none; }
#dotgrid.show { opacity: 1; }

/* 내비 */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center;
    justify-content: space-between; padding: 0 22px; transition: .3s;
    background: rgba(246,248,252,.72); backdrop-filter: blur(14px); }
.nav.scrolled { background: rgba(255,255,255,.85); box-shadow: 0 1px 0 var(--line); }
.nav-logo img { height: 36px; width: auto; }
/* 워드마크 — 애드찐(adzzin.vercel.app)의 「애드찐. ADZZIN」 규칙을 그대로 옮김 */
.wordmark { display: flex; align-items: baseline; gap: 7px;
    font-family: "Paperlogy-8ExtraBold", "Pretendard Variable", Pretendard, sans-serif;
    font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.wordmark .dot { font-style: normal; margin-left: -5px; color: var(--accent); }
.wordmark small { font-family: "Pretendard Variable", Pretendard, sans-serif;
    font-weight: 600; font-size: 11px; letter-spacing: .18em; color: var(--ink-dim); }
.nav-links { display: flex; gap: 26px; font-size: 15px; font-weight: 800; color: var(--ink); }
.nav-links a { position: relative; padding: 4px 0; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
    background: var(--accent); border-radius: 2px; transition: width .25s; }
.nav-links a:hover::after, .nav-links a.on::after { width: 100%; }
.nav-links a.on { color: var(--accent-deep); }

/* ── 화면(뷰) 슬라이드 구조 ─────────────────────────── */
.viewport { height: 100vh; height: 100dvh; overflow: hidden; }
/* 화면은 겹쳐 두고 페이드로 갈아 끼운다 — 옆으로 밀면 중간 화면이 지나가 보인다 */
.views { position: relative; height: 100%; }
.view { position: absolute; inset: 0; height: 100%; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    opacity: 0; pointer-events: none; transform: translateX(100vw);
    /* 나갈 때: 빠르게 지우고(.16s) 그 뒤에 화면 밖으로 치운다 */
    transition: opacity .16s ease, transform 0s linear .16s; }
.view.active { opacity: 1; pointer-events: auto; transform: none;
    /* 들어올 때: 앞 화면이 지워진 뒤에 뜬다 — 둘이 겹쳐 보이지 않게 */
    transition: opacity .2s ease .14s, transform 0s; }
.view > section { padding: 96px 24px; max-width: var(--max); margin: 0 auto; }
.view > section:first-child { padding-top: calc(var(--nav-h) + 48px); }

/* 버튼·칩 */
.btn { display: inline-block; padding: 14px 26px; border-radius: 999px; font-weight: 700;
    font-size: 16px; transition: .25s; text-align: center; border: 0; cursor: pointer;
    font-family: inherit; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(59,123,255,.3); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-soft { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.btn-nav { padding: 10px 20px; font-size: 14px; }
.chip { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #e8efff;
    color: var(--accent-deep); font-weight: 700; font-size: 14px; }

/* ── 홈: 거대 타이포 + 영상 로테이션 쇼케이스 ─────────
   글자는 항상 영상 위(z2). 영상은 글자 뒤로 살짝 겹치기만 한다 — 가림 없음. */
.showcase { position: relative; min-height: calc(100vh - var(--nav-h) - 110px);
    max-width: 1220px; margin: 0 auto; padding: calc(var(--nav-h) + 24px) 24px 34px;
    display: flex; flex-direction: column; justify-content: center; }
/* 텍스트 기둥과 영상 카드의 위·아래를 맞춰 하단 실선(스탯 구분선) 위에 나란히 앉힌다 */
.hero-grid { position: relative; display: flex; align-items: stretch;
    gap: clamp(20px, 3vw, 48px); }
.hero-text { position: relative; z-index: 2; flex: 0 0 min(500px, 40%); min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; }
.hero-text .hero-actions { margin-top: auto; padding-top: 20px; }
/* 3D 카툰 타이포 (레고 포스터 레퍼런스) — 라운드 폰트 + 사출 + 면 그라데이션·노이즈 */
.title-block { position: relative; rotate: -2deg; width: max-content; max-width: 100%; }
.giant { display: block; letter-spacing: .01em; line-height: 1.04; user-select: none;
    font-family: "Cafe24Ssurround", "Pretendard Variable", Pretendard, sans-serif;
    font-weight: 700; color: transparent;
    -webkit-background-clip: text; background-clip: text; }
/* "팔리는" — 대표 제작 붓글씨 레터링 (assets/lettering/palineun.png) */
.g1-img { display: block; width: clamp(120px, 12vw, 180px); height: auto;
    margin: 0 0 4px -4px;
    filter: drop-shadow(0 12px 22px rgba(23, 40, 90, .28));
    animation: giantIn 1s cubic-bezier(.2,.7,.2,1) both; }
.g2 { font-size: clamp(64px, 9.6vw, 138px); margin-top: 4px; white-space: nowrap;
    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"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="linear" slope="0.14"/></feComponentTransfer></filter><rect width="160" height="160" filter="url(%23n)"/></svg>'),
        linear-gradient(180deg, #fff0ae 0%, #ffd84d 55%, #ffc21e 100%);
    background-size: 160px 160px, 100% 100%;
    text-shadow: 0 3px 0 #e5a400, 0 6px 0 #cf8f00, 0 9px 0 #b57a00, 0 18px 30px rgba(150, 95, 0, .35);
    animation: giantIn 1s .15s cubic-bezier(.2,.7,.2,1) both; }
.sticker { position: absolute; font-style: normal; user-select: none;
    font-family: "Cafe24Ssurround", Pretendard, sans-serif; }
.s1 { top: -34px; right: -18px; rotate: 12deg; background: #fff; color: var(--accent-deep);
    font-size: 13px; text-align: center; line-height: 1.3; padding: 16px 12px;
    border-radius: 999px; box-shadow: var(--shadow); border: 2px solid #e3ebff; }
.s2 { left: -36px; bottom: -10px; rotate: -12deg; color: #ffc832; font-size: 34px;
    text-shadow: 0 3px 0 #cf8f00; }
@keyframes giantIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
.loop-stage { position: relative; z-index: 1;
    height: min(66vh, 580px); width: auto; aspect-ratio: 9/16; border-radius: 22px;
    overflow: hidden; box-shadow: 0 30px 60px rgba(15, 25, 60, .38), 0 8px 20px rgba(15, 25, 60, .22);
    background: #dde5f5;
    animation: giantIn 1s .3s cubic-bezier(.2,.7,.2,1) both; }
.loop-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.1s ease; }
.loop-stage video.live { opacity: 1; }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 800; color: var(--accent-deep);
    background: #e8efff; padding: 7px 14px; border-radius: 999px; margin-bottom: 16px; }
.hero-sub { font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-dim); margin-top: 24px; }
.hero-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.cat-row { margin-top: 28px; }
.cat-head { display: inline-flex; align-items: center; gap: 10px; font-size: 21px;
    font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.cat-head .arrow { display: inline-block; font-size: 24px; animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }
.cat-head:hover { color: var(--accent-deep); }
.cat-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.cat-chips a { padding: 11px 19px; border-radius: 999px; background: #fff; font-size: 15.5px;
    font-weight: 800; color: var(--ink); box-shadow: var(--shadow); border: 1.5px solid var(--line);
    transition: .2s; }
.cat-chips a:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); }
/* 영상 카드 덱 — 브랜드 투톤(파랑·노랑) 카드가 뒤에 살짝 */
.stage-deck { position: relative; margin-left: auto; flex: 0 0 auto; cursor: pointer;
    display: flex; align-items: stretch; }
.deck-card { position: absolute; inset: 0; border-radius: 22px; z-index: 0;
    transition: translate .45s cubic-bezier(.2,.7,.2,1), rotate .45s cubic-bezier(.2,.7,.2,1); }
.dc1 { background: linear-gradient(150deg, #ffcf3d, #ff9d00); rotate: 5deg; translate: 20px 14px;
    scale: .97; box-shadow: 0 14px 30px rgba(150, 95, 0, .28); }
.dc2 { background: linear-gradient(150deg, #3b7bff, #1d43a8); rotate: -5deg; translate: -20px 12px;
    scale: .97; box-shadow: 0 14px 30px rgba(23, 40, 90, .3); }
.stage-deck .loop-stage { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.stage-deck:hover .loop-stage { transform: scale(1.045) rotate(-1.2deg); }
.stage-deck:hover .dc1 { translate: 34px 20px; rotate: 8deg; }
.stage-deck:hover .dc2 { translate: -34px 18px; rotate: -8deg; }
.hero-stats { display: flex; gap: 12px; margin-top: 30px; max-width: 640px; }
.hero-stats > div { flex: 1; background: #fff; border-radius: 16px; padding: 18px 16px;
    box-shadow: 0 8px 26px rgba(31, 45, 80, .09); border: 1px solid rgba(59, 123, 255, .1); }
.hero-stats b { display: block; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800;
    line-height: 1.14; letter-spacing: -.01em;
    background: linear-gradient(120deg, #1b4fd8, #3b7bff 55%, #7a5cff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    /* 그라데이션 글자는 text-shadow가 글자 안으로 비친다 — drop-shadow로 글자 모양대로 */
    filter: drop-shadow(0 3px 6px rgba(27, 79, 216, .30)); }
.hero-stats span { display: block; margin-top: 8px; font-size: 12px; font-weight: 600;
    color: #3c4150; line-height: 1.5; filter: none; }

/* 문제 제기 + 다크 밴드 */
.pain-card { background: var(--card); border-radius: var(--radius); padding: 34px 34px;
    box-shadow: var(--shadow); max-width: 760px; margin-bottom: 26px; }
.pain-card p { color: #3c4150; font-size: 17px; line-height: 1.85; margin-bottom: 14px; }
.pain-card b { color: var(--accent-deep); }
.pain-card a { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-deep);
    font-weight: 800; font-size: 15px; padding: 11px 18px; border-radius: 999px;
    background: #eef3ff; transition: .2s; }
.pain-card a:hover { background: var(--accent); color: #fff; transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(59, 123, 255, .35); }
.dark-band { background: #14161d; color: #fff; border-radius: var(--radius);
    padding: 52px 38px; text-align: center; box-shadow: var(--shadow-lg); }
.dark-band p { font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; line-height: 1.5; }
.dark-band b { color: #3d87ff; text-shadow: 0 0 22px rgba(61, 135, 255, .55); }

/* 홈 하단 간격 — 무료 코너와 마지막 밴드를 붙인다 */
#view-home .free { padding-bottom: 36px; }
#view-home .last-call { padding-top: 36px; }

/* 마지막 붙잡기 밴드 */
.last-band { color: #fff; position: relative; overflow: hidden;
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="linear" slope="0.05"/></feComponentTransfer></filter><rect width="180" height="180" filter="url(%23n)"/></svg>'),
        radial-gradient(90% 140% at 88% 0%, rgba(96, 150, 255, .38) 0%, transparent 55%),
        radial-gradient(70% 110% at 8% 100%, rgba(122, 92, 255, .3) 0%, transparent 58%),
        linear-gradient(160deg, #0d1733 0%, #142347 52%, #1b3468 100%);
    border: 1px solid rgba(150, 180, 255, .18);
    box-shadow: 0 30px 70px rgba(10, 20, 55, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
    border-radius: var(--radius); padding: 64px 44px; text-align: center; }
.last-band h2 { font-size: clamp(26px, 4.4vw, 40px); line-height: 1.35; margin-bottom: 14px; }
.last-band p { opacity: .9; margin-bottom: 26px; font-size: 17px; }
.last-band .hero-actions { justify-content: center; margin-top: 0; }
.btn-light { background: #fff; color: var(--accent-deep); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px #fff; }

/* 떠 있는 무료 진단 버튼 */
.float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 60;
    background: var(--ink); color: #fff; font-weight: 800; font-size: 15px;
    padding: 14px 22px; border-radius: 999px; box-shadow: 0 14px 34px rgba(12,16,28,.35);
    transition: transform .25s, opacity .3s; }
.float-cta:hover { transform: translateY(-3px); }
.float-cta.hide { opacity: 0; pointer-events: none; }

/* 쇼츠 마키 — JS(rAF)가 픽셀 단위로 굴린다. 이음새 없음 */
.marquee { max-width: none !important; padding: 6px 0 34px !important; overflow: hidden; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track button { flex: 0 0 auto; width: 168px; aspect-ratio: 9/16; margin-right: 16px;
    border: 0; padding: 0; cursor: pointer; border-radius: 16px; overflow: hidden;
    background: #dde5f5; box-shadow: var(--shadow); }
.marquee-track img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.marquee-track button:hover img { transform: scale(1.07); }

/* 섹션 타이틀 */
.section-title { font-size: clamp(30px, 5vw, 46px); font-weight: 800; line-height: 1.2;
    letter-spacing: -0.01em; margin-bottom: 14px; }
.section-sub { color: var(--ink-dim); font-size: 17px; margin-bottom: 40px; }
.section-sub a { color: var(--accent); font-weight: 700; }

/* 홈 무료 요약 카드 */
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.card-row.three { grid-template-columns: repeat(3, 1fr); }
.mini-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    background: var(--card); border-radius: var(--radius); padding: 30px 28px;
    box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; }
.mini-offer:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.mini-offer b { font-size: 21px; }
.mini-offer p { color: var(--ink-dim); font-size: 15px; }
.mini-offer i { font-style: normal; color: var(--accent); font-weight: 700; font-size: 14px; margin-top: 6px; }
.tag { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.tag-free { background: #e3f6e9; color: #1d9a4e; }
.tag-soon { background: #fff0e0; color: #d97a1a; }

/* 진행 방식 타임라인 */
.steps { list-style: none; margin-bottom: 44px; position: relative; padding-left: 34px; }
.steps::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
    width: 2px; background: linear-gradient(#3b7bff, #b7ccff); border-radius: 2px; }
.steps li { display: flex; gap: 18px; align-items: flex-start; background: var(--card);
    border-radius: 18px; padding: 20px 24px; margin-bottom: 14px; box-shadow: var(--shadow);
    position: relative; transition: transform .25s; }
.steps li:hover { transform: translateX(6px); }
.steps li::before { content: ""; position: absolute; left: -26px; top: 26px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #dce7ff; }
.steps i { font-style: normal; font-weight: 800; color: var(--accent); font-size: 19px; min-width: 36px; padding-top: 2px; }
.steps b { display: block; font-size: 18px; }
.steps span { color: var(--ink-dim); font-size: 15px; }
.stack-band { background: linear-gradient(135deg, #3b7bff, #6a5cff); color: #fff;
    border-radius: var(--radius); padding: 44px 38px; box-shadow: var(--shadow-lg); }
.stack-band h3 { font-size: clamp(24px, 3.6vw, 32px); margin-bottom: 12px; }
.stack-band p { opacity: .92; margin-bottom: 26px; }
.stack-band .btn-primary { background: #fff; color: var(--accent-deep); box-shadow: none; }

/* 3D 뷰어 슬롯 */
.model-frame { height: 480px; border-radius: var(--radius); background: var(--card);
    box-shadow: var(--shadow); overflow: hidden; }
.model-frame model-viewer { width: 100%; height: 100%; }

/* ── 포트폴리오 (대표 원안: 16:9 통일 + 카드 프레임) ── */
.filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.chip-btn { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
    background: #fff; color: var(--ink-dim); font-weight: 700; font-size: 14px; cursor: pointer;
    transition: .2s; font-family: inherit; }
.chip-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.chip-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.work-card { position: relative; border: 0; cursor: pointer; border-radius: var(--radius);
    overflow: hidden; background: var(--card); box-shadow: var(--shadow); text-align: left;
    padding: 12px 12px 0; transition: transform .3s, box-shadow .3s; font-family: inherit; }
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.work-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; }
.work-card .play { position: absolute; top: 24px; right: 24px; width: 38px; height: 38px;
    border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center;
    box-shadow: var(--shadow); opacity: 0; transition: .25s; }
.work-card:hover .play { opacity: 1; }
.work-card .play::after { content: ""; border-style: solid; border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent var(--accent); margin-left: 3px; }
.work-card .card-info { display: block; padding: 14px 6px 16px; }
.work-card .card-info b { display: block; font-size: 16px; line-height: 1.4; }
.work-card .card-info i { font-style: normal; font-size: 13px; color: var(--accent-deep);
    font-weight: 700; margin-top: 4px; display: block; }
.works-more { margin-top: 34px; text-align: center; display: flex; gap: 12px; justify-content: center; }

/* ── 찐컷의 생각 ────────────────────────────────────── */
.think .chip { margin-bottom: 14px; }
.essay { background: var(--card); border-radius: var(--radius); padding: 38px 36px;
    box-shadow: var(--shadow); margin-bottom: 22px; max-width: 780px; }
.essay h3 { font-size: 23px; margin-bottom: 14px; letter-spacing: -0.01em; }
.essay p { color: #3c4150; font-size: 16.5px; margin-bottom: 12px; line-height: 1.85; }
.essay p:last-child { margin-bottom: 0; }
.essay b { color: var(--accent-deep); }
.notes-title { font-size: 22px; font-weight: 800; margin: 48px 0 20px; }
.note-card { background: var(--card); border-radius: var(--radius); padding: 30px 28px;
    box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; border-top: 4px solid var(--accent); }
.note-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.note-card b { font-size: 19px; display: block; margin-bottom: 10px; }
.note-card p { color: var(--ink-dim); font-size: 15px; }

/* 홈 맨 아래 — 준비 중 알림 한 줄 (본 메시지 다 읽힌 뒤에 슬쩍) */
.soon-line { margin: 22px auto 0; text-align: center; font-size: 15px; color: var(--ink-dim); }
.soon-line b { color: var(--ink); font-weight: 700; }
.soon-line a { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: 6px;
    border-bottom: 1px solid transparent; transition: border-color .2s; }
.soon-line a:hover { border-bottom-color: var(--accent); }

/* ── 스토어 ─────────────────────────────────────────── */
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.store-card { background: var(--card); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); display: flex; flex-direction: column;
    transition: transform .3s, box-shadow .3s; }
.store-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.store-cover { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.cover-diag { background: linear-gradient(130deg, #2b5fd9 0%, #3b7bff 55%, #7aa5ff 100%);
    display: flex; flex-direction: column; justify-content: center; padding: 0 38px; color: #fff; }
.cover-diag::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
    border-radius: 50%; border: 34px solid rgba(255,255,255,.14); }
.cover-eng { font-size: 13px; font-weight: 800; letter-spacing: .22em; opacity: .8; }
.cover-big { font-size: clamp(44px, 5.6vw, 72px); font-weight: 800; line-height: 1.04;
    letter-spacing: -.03em; margin-top: 10px; }
.cover-book { background: linear-gradient(140deg, #eef2fa, #dfe7f5); display: grid; place-items: center; }
.book-mock { width: 42%; aspect-ratio: 3/4.2; background: #fff; border-radius: 6px 14px 14px 6px;
    box-shadow: 14px 22px 40px rgba(23,40,90,.22), inset 6px 0 0 #e9edf6;
    padding: 12% 10%; display: flex; flex-direction: column; transform: rotate(-4deg);
    transition: transform .4s; }
.store-card:hover .book-mock { transform: rotate(-1deg) translateY(-6px); }
.cover-app { background: linear-gradient(140deg, #101a35 0%, #1c2f63 55%, #2b5fd9 100%);
    display: grid; place-items: center; }
.cover-app::after { content: ""; position: absolute; left: -50px; bottom: -70px; width: 220px; height: 220px;
    border-radius: 50%; border: 30px solid rgba(255,255,255,.08); }
.app-mock { position: relative; width: 62%; background: rgba(255,255,255,.96); border-radius: 12px;
    padding: 16px 16px 14px; box-shadow: 0 18px 40px rgba(8,16,40,.38);
    display: flex; flex-direction: column; gap: 8px; transform: translateY(2px); transition: transform .4s; }
.store-card:hover .app-mock { transform: translateY(-6px); }
.app-mock i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .22em; color: #2b5fd9; }
.app-mock .line { height: 8px; border-radius: 4px; background: #e6eaf3; }
.app-mock .line.l1 { width: 86%; }
.app-mock .line.l2 { width: 64%; }
.app-mock .line.l3 { width: 74%; }
.app-mock b { margin-top: 4px; font-size: 11px; font-weight: 700; color: #fff; background: #2b5fd9;
    border-radius: 999px; padding: 6px 0; text-align: center; }
.book-mock i { font-style: normal; font-size: clamp(8px, .8vw, 11px); font-weight: 800;
    letter-spacing: .18em; color: var(--accent); }
.book-mock b { font-size: clamp(18px, 2.2vw, 30px); font-weight: 800; line-height: 1.2;
    letter-spacing: -.02em; margin-top: 14%; color: #14161d; }
.book-mock span { margin-top: auto; height: 5px; width: 34%; background: var(--accent); border-radius: 3px; }
.store-body { padding: 26px 28px 30px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.store-body h3 { font-size: 22px; margin: 12px 0 8px; }
.store-body p { color: var(--ink-dim); margin-bottom: 18px; font-size: 15px; }
.store-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.store-price b { font-size: 24px; font-weight: 800; color: var(--ink); }
.store-price span { font-size: 13px; color: var(--ink-dim); }
.store-body .btn { margin-top: auto; }

/* ── 상담: FAQ + 폼 ─────────────────────────────────── */
.faq { margin-top: 72px; text-align: left; }
.faq details { background: var(--card); border-radius: 16px; padding: 20px 24px; margin-bottom: 10px; box-shadow: var(--shadow); }
.faq summary { font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 30px; }
.faq summary::after { content: "+"; position: absolute; right: 2px; color: var(--accent); font-weight: 800; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--ink-dim); margin-top: 10px; font-size: 15px; }

.contact { text-align: center; }
.quick-form { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 40px 36px; text-align: left; max-width: 760px; margin: 0 auto; }
.qf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 18px; }
.quick-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.quick-form input, .quick-form select, .quick-form textarea {
    padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px;
    font-family: inherit; background: #fafbfe; color: var(--ink); transition: border .2s, box-shadow .2s; }
.quick-form input:focus, .quick-form select:focus, .quick-form textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59,123,255,.12); }
.qf-full { margin-bottom: 18px; }
.qf-consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important;
    font-weight: 500 !important; margin-bottom: 22px; }
.qf-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.qf-consent small { display: block; color: var(--ink-dim); font-weight: 400; font-size: 12px; margin-top: 4px; line-height: 1.6; }
.qf-submit { width: 100%; font-size: 17px; padding: 16px; }
.qf-alt { text-align: center; margin-top: 16px; color: var(--ink-dim); font-size: 14px; }
.qf-alt a { color: var(--accent); font-weight: 700; }
.qf-done { text-align: center; padding: 30px 0 10px; }
.qf-done b { font-size: 22px; color: var(--accent-deep); }
.qf-done p { color: var(--ink-dim); margin-top: 8px; }

/* 푸터 — 각 화면 맨 아래에 JS로 붙는다 */
.footer { border-top: 1px solid var(--line); padding: 52px 24px; text-align: center; background: #fff; }
.footer-brand img { height: 40px; margin: 0 auto 8px; }
.footer-brand p { color: var(--ink-dim); font-size: 15px; }
.footer-links { display: flex; gap: 22px; justify-content: center; margin: 22px 0; color: var(--ink-dim); font-size: 15px; font-weight: 600; }
.footer-links a:hover { color: var(--accent-deep); }
.footer-legal { color: #a4a9b6; font-size: 13px; line-height: 1.8; }

/* 라이트박스 */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(12, 16, 28, .82); backdrop-filter: blur(6px); }
.lightbox-body { position: relative; z-index: 1; width: min(92vw, 960px); }
.lightbox-body.vert { width: min(92vw, 420px); }
.lightbox-frame { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/9; background: #000; }
.lightbox-body.vert .lightbox-frame { aspect-ratio: 9/16; max-height: 86vh; margin: 0 auto; }
.lightbox-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox-close { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.92); font-size: 22px; cursor: pointer; line-height: 1; }

/* 리빌 */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.on { opacity: 1; transform: none; }

/* 반응형 */
@media (max-width: 900px) {
    .card-row, .card-row.three, .store-grid { grid-template-columns: 1fr; }
    .qf-grid { grid-template-columns: 1fr; }
    .hero-grid { flex-direction: column; align-items: flex-start; }
    .g1-img { width: clamp(200px, 34vw, 300px); }
    .g2 { font-size: clamp(46px, 9.6vw, 92px); }
    .s1 { right: -10px; }
    .stage-deck { margin: 22px auto 0; }
    .loop-stage { height: min(46vh, 380px); }
    .hero-stats { gap: 10px; max-width: 100%; }
    .hero-stats > div { padding: 15px 14px; }
    .hero-stats span { font-size: 11.5px; }
    .side-note { display: none; }
}
@media (max-width: 640px) {
    .wordmark small { display: none; }
    .wordmark { font-size: 20px; gap: 0; }
    .hero-stats { flex-direction: column; gap: 8px; }
    .hero-stats > div { display: flex; align-items: baseline; gap: 10px;
        padding: 13px 16px; }
    .hero-stats b { font-size: 20px; }
    .hero-stats span { margin-top: 0; font-size: 12px; }
    .view > section { padding: 64px 18px; }
    .nav { padding: 0 12px; gap: 8px; }
    .nav-logo img { height: 30px; }
    .wordmark { font-size: 19px; gap: 6px; }
    .wordmark small { font-size: 9.5px; letter-spacing: .14em; }
    .nav-links { gap: 14px; font-size: 13.5px; overflow-x: auto; scrollbar-width: none; }
    .nav-links::-webkit-scrollbar { display: none; }
    .btn-nav { padding: 8px 14px; font-size: 13px; }
    .g1-img { width: clamp(160px, 46vw, 220px); }
    .g2 { font-size: clamp(38px, 10.5vw, 58px); }
    .sticker { display: none; }
    .loop-stage { height: min(42vh, 330px); }
    .marquee-track button { width: 132px; margin-right: 12px; }
    .model-frame { height: 340px; }
    .cover-big { font-size: 44px; }
    .float-cta { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal, .g1-img, .g2, .loop-stage { animation: none; transition: none; opacity: 1; transform: none; }
    .marquee-track, .blob { animation: none; }
    .views { transition: none; }
}