/* 소개 페이지 — 로그인하지 않은 사람의 메인. 토큰·헤더·푸터는 facegrid-result.css·app-ui.css·app-nav.css 것.
   흐름은 '내 얼굴을 안다 → 그걸로 묻는다': 히어로(큰 문장 + 버튼) → 특징과 강점(측정 장면 + 키워드) → 라비 대화(채팅창)
   → 대비(누구에게나 하는 답 vs 내 얼굴을 재고 한 답) → 질문 예시(와인 풀블리드) → FAQ → 마무리.
   레퍼런스(토스·Clad)처럼 크고 시원하게 — 글은 짧게, 여백은 넉넉히, 배경은 브랜드 색 메시 그라데이션.
   모션은 transform·opacity 만, 한 번만. 줄임 모션 설정이면 모두 끈다.
   강조는 두 단계 — b 는 굵게만, mark(형광 밑줄)는 한 답에 핵심 처방 하나만, 화면에 들어올 때 왼쪽부터 칠해진다. */

:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --tint: #faf5f7; --wine-deep: #5e2f40; --blush: #f3d5df; --lilac: #e6def3; }

body.landing-page { overflow-x: clip; }   /* 풀블리드 배경이 화면 밖으로 넘쳐 가로 스크롤이 생기지 않게 */
.landing-main { padding-top: 0; }
.landing-main b { color: var(--text); font-weight: 650; }
.landing-main mark { color: var(--accent); font-weight: 700; background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 88% / 100% 42%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.landing-main h2 { margin: 0 0 24px; color: var(--text); font-size: 28px; font-weight: 700; line-height: 1.32; letter-spacing: -.055em; word-break: keep-all; }
.landing-main h2 em { color: var(--accent); font-style: normal; }
html:has(.landing-page) { scroll-padding-top: calc(var(--site-header-height) + 16px); }

/* ── 등장 모션(공통) ─────────────────────────────────────────── */
.js-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(min(var(--i, 0), 6) * 90ms); }
.js-motion [data-reveal].is-in, .js-motion [data-reveal]:focus-within, .js-motion [data-reveal]:focus { opacity: 1; transform: none; }   /* 키보드로 먼저 닿아도 바로 보인다 */
.js-motion [data-reveal] mark { background-size: 0% 42%; transition: background-size .7s var(--ease-out) .35s; }
.js-motion [data-reveal].is-in mark { background-size: 100% 42%; }
@keyframes scene-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes scene-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes scene-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 버튼 ─────────────────────────────────────────────────── */
.landing-cta.analyze-link { width: 100%; max-width: 360px; min-height: 56px; margin-inline: auto; border-radius: 16px; font-size: 17px; font-weight: 700; letter-spacing: -.03em; box-shadow: 0 10px 24px -10px rgb(120 62 82 / 55%); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background-color .15s; }
.landing-cta.analyze-link:active { transform: scale(.97); }

/* ── 배경 — 브랜드 색 덩어리 세 개를 크게 흐려 겹친 메시 그라데이션. 아주 천천히 떠다닌다(장식, aria-hidden). ─── */
.landing-glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }   /* 아래로 번져 다음 섹션과 경계가 지지 않게 */
.landing-glow i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .6; }   /* 블러 필터 없이 — 그라데이션 가장자리만으로 충분하고 저사양 웹뷰에 부담이 없다 */
.landing-glow i:nth-child(1) { top: -35vmax; left: -25vmax; background: radial-gradient(circle, var(--blush) 0%, transparent 65%); animation: glow-a 18s ease-in-out infinite alternate; }
.landing-glow i:nth-child(2) { top: -20vmax; right: -30vmax; background: radial-gradient(circle, var(--lilac) 0%, transparent 65%); animation: glow-b 22s ease-in-out infinite alternate; }
.landing-glow i:nth-child(3) { bottom: -45vmax; left: 10%; background: radial-gradient(circle, rgb(120 62 82 / 22%) 0%, transparent 60%); animation: glow-a 26s ease-in-out infinite alternate-reverse; }
@keyframes glow-a { to { transform: translate(8vmax, 6vmax) scale(1.1); } }
@keyframes glow-b { to { transform: translate(-10vmax, 8vmax) scale(.92); } }

/* ── ① 히어로 — 웹 서비스 랜딩 문법: 라벨 칩 → 아주 큰 헤드라인(핵심 단어 형광 밑줄) → 짧은 설명 → 주 버튼 + 보조 링크. 왼쪽 정렬. ─── */
/* 헤더 — 맨 위에서는 투명해 히어로 배경과 이어지고, 스크롤을 시작하면 반투명 배경이 깔린다(landing.mjs 가 data-scrolled). */
.landing-page .site-header { background: transparent; transition: background-color .25s, box-shadow .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s; }
.landing-page[data-scrolled] .site-header { background: rgb(251 248 246 / 85%); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgb(120 62 82 / 8%); }
.landing-hero { position: relative; isolation: isolate; margin: calc(-1 * var(--site-header-height)) calc(-1 * var(--gutter)) 0; padding: calc(56px + var(--site-header-height)) var(--gutter) 64px; overflow: hidden; background: #fbf8f6; }
.landing-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgb(255 255 255 / 80%); color: var(--accent); font-size: 13px; font-weight: 650; line-height: 18px; letter-spacing: -.02em; box-shadow: 0 0 0 1px rgb(120 62 82 / 12%); }
.landing-chip span { width: 7px; height: 7px; border-radius: 50%; background: var(--emphasis); box-shadow: 0 0 0 3px rgb(179 38 82 / 18%); }
.landing-hero h1 { margin: 0; color: var(--text); font-size: clamp(30px, 8.4vw, 40px); white-space: nowrap; font-weight: 700; line-height: 1.22; letter-spacing: -.06em; word-break: keep-all; }
.landing-hero h1 mark { color: var(--accent); font-weight: 700; background-image: linear-gradient(#f2c4d3, #f2c4d3); background-position: 0 90%; background-size: 100% 36%; }
.js-motion .landing-hero h1[data-reveal] mark { background-size: 0% 36%; transition-delay: .6s; }
.js-motion .landing-hero h1[data-reveal].is-in mark { background-size: 100% 36%; }
.landing-lead { margin: 20px 0 32px; color: #4a4650; font-size: 16.5px; line-height: 1.6; letter-spacing: -.03em; word-break: keep-all; }
.landing-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-width: 360px; }
.landing-actions .landing-cta { margin: 0; }
/* 히어로 배경 사진 — 예전 메인의 측정 그림 자리(오른쪽 뒤). 왼쪽·아래로 번지고 살짝 흐리게 깔려 문장이 그 위에 읽힌다. */
.hero-backdrop { position: absolute; z-index: -1; top: var(--site-header-height); right: 0; width: 50%; aspect-ratio: 900 / 950; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%); mask-composite: intersect; }   /* 오른쪽에 두고 왼쪽(문장 쪽)과 위아래 끝만 부드럽게 번진다 */
.hero-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.hero-copy { position: relative; }
.landing-secondary.traits-more { display: flex; width: fit-content; margin: 0 auto -16px; }   /* 가운데 */
.traits-more svg { width: 16px; height: 16px; stroke-width: 2; }
.landing-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 48px; color: var(--body); font-size: 15px; font-weight: 600; letter-spacing: -.025em; text-decoration: underline; text-decoration-color: rgb(73 74 81 / 30%); text-underline-offset: 4px; }

/* ── 섹션 공통 ─────────────────────────────────────────────── */
.landing-section { padding-top: 96px; }
.landing-band { margin-inline: calc(-1 * var(--gutter)); padding: 72px var(--gutter) 80px; }
.landing-hero + .landing-band { margin-top: 0; padding-top: 48px; padding-bottom: 48px; }
.landing-band + .landing-section:not(.landing-band) { padding-top: 88px; }

/* ── ② 특징과 강점 — 측정 장면을 크게, 그 얼굴의 리포트 키워드가 사진 둘레에 떠 있는 카드처럼 하나씩 붙고 천천히 떠다닌다.
   키워드는 왼쪽·아래에만 — 오른쪽 가장자리는 측정 수치 라벨 자리라 가리지 않는다. ─────────────── */
.landing-traits { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #f3e7e0 0%, #f7eff2 100%); }
.landing-traits::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 58%; width: 130%; max-width: 680px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(243 213 223 / 80%) 0%, rgb(230 222 243 / 45%) 38%, transparent 66%); transform: translate(-50%, -50%); }
/* 분석 사진은 왼쪽(아무것도 겹치지 않는다), 오른쪽에 특징 키워드를 리스트로 하나씩. */
.trait-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 16px; margin: 0 0 12px; }
.feature-shot.hero-measurement { --hero-stroke-scale: 1.3; position: relative; right: auto; bottom: auto; width: 100%; max-width: none; margin: 0; overflow: hidden; border-radius: 24px; background: #b1b7bf; box-shadow: 0 24px 48px -24px rgb(60 30 45 / 40%); }
.feature-shot [data-hero-photo] { mask: none; }
.feature-shot .hero-example-note { top: 8px; right: 8px; }
.trait-words { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.trait-words li { width: fit-content; max-width: 100%; padding: 11px 16px; border-radius: 16px; background: #f6e4eb; color: var(--accent); font-size: 17px; font-weight: 700; line-height: 22px; letter-spacing: -.03em; word-break: keep-all; box-shadow: 0 0 0 1.5px rgb(120 62 82 / 35%); }
.js-motion .trait-words li { opacity: 0; transform: translateX(12px); }
.js-motion .trait-words.is-in li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 150ms + .3s); }

/* ── ③ 라비 대화 — 채팅창만. 화면에 들어오면 질문 → 입력 중 → 답이 차례로. ─────────────────────── */
/* 채팅 뒤 배경 — 인물 사진(가로)이 위에 깔리고 아래로 같은 톤 배경에 번진다. 말풍선은 상자 없이 그 위에 놓인다:
   질문은 사진 오른쪽 아래 빈 자리에 걸치고, 답은 이어진 배경에 — 얼굴을 가리지 않는다. */
.chat-visual { position: relative; width: min(100%, 440px); margin: 0 auto; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, #efe4df 0%, #f3e9ec 100%); box-shadow: 0 30px 60px -28px rgb(60 30 45 / 40%); }
.chat-visual-photo { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 94%, transparent); mask-image: linear-gradient(180deg, #000 94%, transparent); }
.landing-chat { position: relative; margin-top: -14px; padding: 0 16px 22px; }
.scene-bubble { margin: 0; }
.scene-user { width: fit-content; max-width: 86%; padding: 10px 15px; border-radius: 18px 18px 4px 18px; background: #f3e4ea; color: #3a2a30;   /* 연한 핑크 — 와인 채움은 분석 버튼만(버튼처럼 보이지 않게) */ font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -.025em; word-break: keep-all; }
.landing-chat .scene-user { margin: 0 0 12px auto; box-shadow: inset 0 0 0 1px #e3c9d3, 0 10px 24px -10px rgb(40 20 30 / 45%); }   /* 카드 아래 핑크 페이드와 가르는 테두리 */
.landing-ravi { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 0 0 1px rgb(120 62 82 / 10%); }
.landing-ravi .ai-logo { margin: 0; transform: translate(-1.5px, 1px) scale(.85); }   /* 반짝임이 오른쪽 위에 붙어 있어 B 를 살짝 왼쪽 아래로 — 원 가운데에 보이게 */
.chat-reply { position: relative; }
.chat-answer { display: flex; gap: 10px; align-items: flex-start; }
.chat-answer p { margin: 0; padding: 12px 14px; border-radius: 4px 18px 18px 18px; background: rgb(255 255 255 / 96%); color: var(--body); font-size: 14.5px; line-height: 1.6; letter-spacing: -.025em; word-break: keep-all; box-shadow: 0 12px 28px -12px rgb(40 20 30 / 45%); }
.chat-typing { display: none; }
.js-motion .landing-chat .scene-user { opacity: 0; transform: translateY(12px) scale(.96); transform-origin: 100% 100%; }
.js-motion .landing-chat .chat-answer { opacity: 0; transform: translateY(12px); }
.js-motion .landing-chat .chat-typing { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 4px; opacity: 0; }
.chat-typing .landing-ravi { margin-right: 8px; }
.landing-chat .chat-typing { padding: 4px 12px 4px 4px; border-radius: 999px; background: rgb(255 255 255 / 92%); }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: #c9a3b0; animation: typing-dot .9s ease-in-out infinite; }
.chat-typing i:nth-of-type(2) { animation-delay: .15s; }
.chat-typing i:nth-of-type(3) { animation-delay: .3s; }
@keyframes typing-dot { 50% { transform: translateY(-3px); opacity: .6; } }
@keyframes chat-typing { 0%, 100% { opacity: 0; } 15%, 85% { opacity: 1; } }
/* 재생 — 화면에 들어오면 한 번(landing.mjs 가 .is-playing): 질문 .1s → 입력 중 .4~1s → 답 1s → 밑줄 1.5s(빈 상자로 보이는 시간을 짧게). */
.js-motion .landing-chat.is-playing .scene-user { animation: scene-pop .38s var(--ease-out) .1s both; }
.js-motion .landing-chat.is-playing .chat-typing { animation: chat-typing .6s linear .4s both; }
.js-motion .landing-chat.is-playing .chat-answer { animation: scene-rise .5s var(--ease-out) 1s both; }
.js-motion .landing-chat .chat-answer mark { transition: background-size .7s var(--ease-out) .1s; }
.js-motion .landing-chat:not(.is-playing) .chat-answer mark, .js-motion .landing-chat.is-typing .chat-answer mark { background-size: 0% 42%; }   /* 장면 등장이 아니라 답이 나온 뒤에 칠한다 */
.js-motion .landing-chat.is-playing:not(.is-typing) .chat-answer mark { background-size: 100% 42%; }

/* ── ④ 대비 ─────────────────────────────────────────────── */
.compare-ask { margin: 4px 0 0 auto; }   /* 내가 보낸 질문 — 채팅 말풍선 */
.landing-question { margin: -8px 0 24px; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -.03em; }
.landing-compare { display: grid; gap: 12px; max-width: 440px; }
.compare-card { padding: 18px 18px 20px; border-radius: 20px; }
.compare-card p { margin: 0; font-size: 16px; line-height: 1.65; letter-spacing: -.03em; word-break: keep-all; }
.compare-card .compare-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 650; line-height: 20px; }
/* ✕ / ✓ — 일반론은 내 얼굴이 빠진 답, 라비는 내 얼굴을 잰 답. */
.compare-mark { display: grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.compare-mark svg { width: 12px; height: 12px; stroke-width: 2.2; }
.compare-mark.is-x { background: #d9d6dc; color: #fff; }
.compare-mark.is-ok { background: var(--accent); color: #fff; }
.compare-card.is-common { background: var(--surface); color: #8d8992; }
.compare-card.is-common p:not(.compare-label) { color: #9a96a0; }
.compare-card.is-ravi { background: #fff; color: var(--body); box-shadow: 0 0 0 1.5px var(--accent) inset, 0 16px 32px -20px rgb(120 62 82 / 50%); }
.compare-card.is-ravi .compare-label { color: var(--accent); }
.compare-label.is-ravi-label { gap: 8px; font-size: 15px; font-weight: 750; }
.compare-ravi { width: 28px; height: 28px; background: #f6e4eb; box-shadow: none; }

/* ── ⑤ 질문 예시 — 와인 풀블리드 ─────────────────────────────── */
.landing-band.is-wine { position: relative; isolation: isolate; margin-top: 96px; padding: 64px var(--gutter) 72px; overflow: hidden; background: linear-gradient(165deg, #8a4a60 0%, var(--accent) 45%, var(--wine-deep) 100%); color: #fff; }
.is-wine h2 { color: #fff; }
.is-wine h2 em { color: #f4b6c8; }   /* 와인 바탕 위 강조 — 브랜드 톤에 맞춘 핑크 */
.landing-topics { display: flex; gap: 6px; margin: 0 calc(-1 * var(--gutter)) 18px; padding: 5px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.landing-topics::-webkit-scrollbar { display: none; }
.landing-topics [role='tab'] { position: relative; flex: 0 0 auto; min-height: 34px; padding: 0 15px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 8px; background: transparent; color: rgb(255 255 255 / 85%); font-size: 14px; font-weight: 500; letter-spacing: -.02em; transition: background-color .2s, color .2s, border-color .2s; }
.landing-topics [role='tab'][aria-selected='true'] { border-color: #fff; background: #fff; color: var(--accent); font-weight: 650; }
.landing-topics [role='tab']:focus-visible { outline-color: #fff; outline-offset: 2px; }
.landing-topics [role='tab']::after { content: ''; position: absolute; inset: -5px 0; }   /* 누르는 범위는 44px 로 */
.landing-topic { max-width: 440px; }
.landing-topic .scene-user { margin: 0 0 12px auto; background: rgb(255 255 255 / 18%); color: #fff; }
.topic-answer { display: flex; gap: 10px; align-items: flex-start; padding: 16px 16px 18px 14px; border-radius: 20px; background: #fff; color: var(--body); }
.landing-answer-points { display: grid; gap: 10px; margin: 0; padding: 0 0 0 18px; font-size: 15.5px; line-height: 1.7; letter-spacing: -.025em; word-break: keep-all; }
.landing-answer-points.is-single { padding-left: 0; list-style: none; }
.landing-answer-points li::marker { color: var(--accent); }
/* 주제를 바꾸면 질문 → 답이 차례로 다시 올라온다. */
.landing-topic.is-switching .scene-user { animation: scene-pop .36s var(--ease-out) both; }
.landing-topic.is-switching .topic-answer { animation: scene-rise .45s var(--ease-out) .12s both; }

/* ── ⑥ 자주 묻는 질문 ─────────────────────────────────────────── */
.landing-faq .faq-list { max-width: 560px; }
.landing-faq details { border-bottom: 1px solid var(--line); }
.landing-faq details:first-of-type { border-top: 1px solid var(--line); }
.landing-faq summary { position: relative; display: flex; align-items: center; min-height: 60px; padding-right: 32px; color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -.03em; list-style: none; cursor: pointer; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted); transform: rotate(45deg); transition: transform .25s var(--ease-out), margin .25s var(--ease-out); }
.landing-faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.landing-faq summary:focus-visible { outline-offset: -2px; }
.landing-faq details p { margin: -4px 0 18px; color: var(--body); font-size: 15px; line-height: 1.7; letter-spacing: -.025em; word-break: keep-all; }
.landing-faq details[open] p { animation: scene-fade .3s var(--ease-out) both; }
.landing-faq details a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── ⑦ 마무리 — 스토어 대표 이미지(feature graphic) 구도: 왼쪽 '내 얼굴을 가장 잘 아는 AI + 벨라비 로고 + 버튼',
   오른쪽 인물 사진 위에 내 얼굴 질문 말풍선이 떠 있다. ─────────────────────────────── */
.landing-closing { position: relative; isolation: isolate; margin: 96px calc(-1 * var(--gutter)) 0; padding: 72px var(--gutter) 80px; overflow: hidden; background: linear-gradient(180deg, #fbf8f6 0%, #f3e8e2 100%); }
.landing-closing h2 { margin-bottom: 12px; }
.closing-logo { margin: 0 0 28px; }
.closing-logo .service-logo { width: 128px; height: 32px; margin-inline: auto; }
.landing-closing .landing-cta { margin: 0; }
/* 모바일 — 사진(질문 말풍선) → 문구·로고 → 버튼 순서로 한 장면처럼 읽히고 버튼으로 끝난다. 넓은 화면은 좌우 2단. */
.landing-closing .landing-split { display: flex; flex-direction: column; text-align: center; }
.landing-closing .closing-visual { order: -1; }
.landing-closing .landing-cta { margin-inline: auto; }
.closing-visual { position: relative; width: min(64%, 280px); margin: 8px auto 48px; }
.closing-visual img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -28px rgb(60 30 45 / 45%); }
.closing-q { position: absolute; max-width: calc(100vw - 32px); padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: -.03em; white-space: nowrap; box-shadow: 0 12px 28px -12px rgb(60 30 45 / 40%); }
.closing-q:nth-of-type(1) { top: 8%; right: -20%; border-radius: 16px 16px 4px 16px; }
.closing-q:nth-of-type(2) { top: 44%; left: -22%; }
.closing-q:nth-of-type(3) { bottom: 10%; right: -20%; border-radius: 16px 16px 4px 16px; }
.js-motion .closing-visual .closing-q { opacity: 0; transform: translateY(8px) scale(.95); transition: opacity .5s var(--ease-out), transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 200ms + .4s); }
.js-motion .closing-visual.is-in .closing-q { opacity: 1; transform: none; }
.landing-closing + .site-footer { margin-top: 0; padding-top: 32px; border-top: 0; }
/* 푸터 아래는 안전 영역만 — 탭 바가 없는 소개 페이지라 app-ui 의 탭 바 몫 여백이 필요 없다. */
.landing-page.has-app-nav .result-main:has(.site-footer) { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
/* 로그인한 사람(/about) — 늘 보이는 탭 바가 푸터를 가리지 않게. */
.landing-page:has(.app-nav) .result-main:has(.site-footer) { padding-bottom: calc(var(--app-nav-height) + 28px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 560px) {
  .landing-hero, .landing-band, .landing-closing { margin-inline: calc(50% - 50vw); padding-inline: max(var(--gutter), calc(50vw - 50%)); }
  .landing-band.is-wine { padding-inline: max(var(--gutter), calc(50vw - 50%)); }
  .landing-lead { font-size: 18px; }
  .landing-main h2 { font-size: 34px; }
  .landing-section { padding-top: 120px; }
  .landing-band { padding-top: 96px; padding-bottom: 104px; }
}
/* 넓은 화면(검색 유입) — 섹션마다 글·그림 좌우 2단, 본문 폭 1120. */
@media (min-width: 960px) {
  .landing-page .landing-main { max-width: 1168px; }
  .landing-page .site-header-inner { max-width: 1168px; }
        /* 넓은 화면은 레퍼런스처럼 헤더 오른쪽에 분석 버튼 — 하단 떠 있는 버튼은 쓰지 않는다(본문 글을 가린다). */
  .landing-page .header-cta { display: inline-flex; }
  .landing-page #home-action { display: none; }
    .landing-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 0 80px; }
  .landing-split.is-reverse > .split-text { order: 2; }
  .landing-hero { padding-top: calc(112px + var(--site-header-height)); padding-bottom: 120px; }
  .hero-backdrop { top: 50%; right: max(0px, calc(50vw - 640px)); width: 400px; transform: translateY(-50%); }
  .hero-backdrop img { opacity: 1; }
  .hero-copy { max-width: 560px; }
  .closing-visual { width: 340px; margin: 0 auto; }
  .landing-closing .landing-split { display: grid; text-align: left; }
  .landing-closing .closing-visual { order: 0; }
  .landing-closing .landing-cta { margin-inline: 0; }
  .closing-logo .service-logo { margin-inline: 0; }
  .landing-hero h1 { font-size: 48px; }
  .closing-logo .service-logo { width: 168px; height: 42px; }
  .landing-main h2 { font-size: 40px; }
  .landing-question { font-size: 18px; }
  .trait-stage { gap: 24px; margin: 0; }
  .trait-words li { font-size: 19px; padding: 13px 20px; }
  .landing-compare { max-width: none; }
  .compare-ask { margin-bottom: 16px; }
  /* 예시 리포트 링크 — 넓은 화면은 왼쪽 열 제목 아래, 사진·키워드는 오른쪽 두 줄에 걸친다 */
  .landing-traits .landing-split { grid-template-rows: auto auto; }
  .landing-traits .split-text { grid-row: 1; align-self: end; }
  .landing-traits .trait-stage { grid-column: 2; grid-row: 1 / 3; }
  .landing-traits .traits-more { grid-column: 1; grid-row: 2; align-self: start; margin: 0 0 0 -2px; }
  .landing-topic { max-width: none; }
  .landing-topics { margin-inline: 0; padding-inline: 0; }
  /* 와인 섹션도 다른 섹션과 같은 1168 기준선 — 섹션 전용 여백이 넓은 화면 여백을 덮어쓰지 않게. */
  /* 라비 — 채팅창을 사진 오른쪽 아래에 겹쳐 그림 칼럼 안에 넣는다. */
}
@media (hover: hover) {
  .landing-cta.analyze-link:hover { background-color: #693548; }
    .landing-topics [role='tab'][aria-selected='false']:hover { border-color: rgb(255 255 255 / 60%); color: #fff; }
  .landing-faq summary:hover { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-cta.analyze-link, .landing-topics [role='tab'] { transition: none; }
  .landing-glow i, .chat-typing i, .landing-topic.is-switching *, .landing-faq details[open] p { animation: none; }
}
/* 화면 밖에서는 장식 애니메이션을 멈춘다(landing.mjs 가 .is-offscreen). */
.is-offscreen .landing-glow i { animation-play-state: paused; }
/* 헤더 분석 버튼 — 넓은 화면에서만 보인다. */
.header-cta { display: none; align-items: center; min-height: 38px; margin-left: 12px; padding: 0 16px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
@media (hover: hover) { .header-cta:hover { background: #693548; } }
/* 히어로 버튼이 보이는 동안 헤더 버튼은 테두리만 — 첫 화면에 같은 무게의 와인 버튼이 둘이 되지 않게(landing.mjs 가 data-hero-cta). */
.landing-page[data-hero-cta='visible'] .header-cta { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px rgb(120 62 82 / 45%); }
.header-cta { transition: background-color .2s, color .2s, box-shadow .2s; }
/* 답이 한 글자씩 써진다(landing.mjs 가 글자를 span 으로 나눠 차례로 .is-on) — 실제 라비 답처럼 흘러나온다. 밑줄은 다 써진 뒤. */
.chat-answer .tc { opacity: 0; transition: opacity .12s linear; }
.chat-answer .tc.is-on { opacity: 1; }
.js-motion .landing-chat.is-typing-done .chat-answer mark { background-size: 100% 42%; }