/* 로그인 전 랜딩(2026-10-21) — 디자인 토큰은 product.css 와 같다. 인라인 style= 없음(CSP). 스크립트 없음. */
:root{--ink:#041f1c;--bg:#0b2a25;--surface:#10372e;--card:#0f3129;--line:#355148;--line2:#587a67;--jade:#b2c39b;--paper:#f4eddc;--muted:#b1c0b3;--gold:#d9b86a;--good:#9fd4a3}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img,video{max-width:100%}
h1{font-size:clamp(2rem,7.5vw,3.2rem);line-height:1.15;font-weight:600;margin:0 0 12px}
h2{font-size:1.45rem;font-weight:600;margin:0 0 16px;text-align:center;word-break:keep-all}
.nb{display:inline-block;white-space:nowrap}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;font-weight:500;font-size:1.05rem}.brand img{border-radius:7px}
.top nav{display:flex;align-items:center;gap:12px}
.lang{font-size:.82rem;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);font-size:1rem;font-weight:600;color:var(--paper)}
.btn.small{min-height:36px;padding:0 14px;font-size:.85rem;font-weight:500}
.btn.primary{background:var(--jade);color:var(--ink);border-color:var(--jade)}
.btn.ghost{background:transparent}
.play{width:14px;height:14px;background:linear-gradient(135deg,#9fd4a3,#d9b86a);clip-path:polygon(0 0,100% 50%,0 100%)}
.link{color:var(--jade);font-size:.92rem}
.fine{font-size:.8rem;color:var(--muted)}
.center{text-align:center}
.sub{color:var(--muted);font-size:1.02rem}
main{max-width:1120px;margin:0 auto;padding:0 16px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.actions.center{justify-content:center;margin-top:18px}
/* 1 첫 화면: 글 → 큰 상담가(인사 영상) → 말풍선 → 얼굴 넷. 390×844 에서 제목·배지·[무료로 시작하기]·영상 머리가 보인다. */
.hero{display:grid;gap:14px;padding:18px 0 28px;align-content:start}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #d9b86a99;color:var(--gold);border-radius:999px;padding:5px 12px;font-size:.84rem;font-weight:600}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.live{display:flex;flex-direction:column;align-items:center;gap:10px}
.stage{position:relative;width:min(100%,250px);aspect-ratio:2/3;border-radius:22px;overflow:hidden;background:#0f3129;border:1px solid var(--line2)}
.stage video{width:100%;height:100%;object-fit:cover;display:block}
.mute{position:absolute;right:10px;top:10px;font-size:.7rem;color:var(--muted);background:#041f1ccc;border-radius:999px;padding:3px 8px}
.bubble{position:relative;max-width:360px;background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:10px 14px;font-size:.95rem;line-height:1.5}
.bubble::before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;background:var(--card);border-left:1px solid var(--line2);border-top:1px solid var(--line2);transform:translateX(-50%) rotate(45deg)}
.bubble b{color:var(--jade);margin-right:6px}
/* 목소리 샘플: 누를 때만 소리. 브라우저 기본 조작부(controls)만 쓴다 — 스크립트 없음 */
.voice{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100%,360px);margin:0}
.voice figcaption{font-size:.8rem;color:var(--muted)}
.voice audio{display:block;width:100%;height:40px;border-radius:999px}
.picks{display:flex;justify-content:center;gap:8px;margin-top:4px}
.pick .face{display:block;width:52px;height:52px;border-radius:50%;border:2px solid var(--line);background:#1a4a3c;opacity:.75;object-fit:cover}
.pick[aria-current=true] .face{border-color:var(--jade);opacity:1;box-shadow:0 0 0 3px #b2c39b33}
/* 섹션 공통: 그림 하나 + 제목 한 줄 + 한두 줄 */
.sec{padding:36px 0;border-top:1px solid var(--line)}
/* 2 무료로 먼저(2026-10-23): 카드 그림이 곧 단추. 이름·한 줄은 카드 아래 종이색 빈칸 위 — 앱 상담 중 카드(.card-caption)와 같은 글꼴·먹색. 글자 크기는 카드 폭 기준(cqw). */
.free2{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:420px;margin:0 auto}
.fcard{display:block;border-radius:12px}
.card-face{position:relative;display:block;container-type:inline-size;border-radius:12px;transition:transform .15s ease,box-shadow .15s ease}
.card-face img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:12px;background:#d8ccb3;outline:1px solid #f4eddc2e;outline-offset:-1px}
/* 마우스 올림: 그림·글·「무료」 표가 한 덩어리로(2026-10-24) */
.fcard:hover .card-face,.fcard:focus-visible .card-face{transform:translateY(-2px);box-shadow:0 10px 26px #0007}
.card-caption{position:absolute;left:6%;right:6%;top:75%;bottom:3.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqw;text-align:center;pointer-events:none;color:#3a3325;font-family:"Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo",serif;background:radial-gradient(ellipse 70% 80% at 50% 55%,#efe6d2f2,#efe6d200 100%)}
.card-caption b{font-size:10.5cqw;font-weight:600;line-height:1.05;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card-caption small{font-size:5.6cqw;line-height:1.1;color:#5a4e38;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.free-tag{position:absolute;top:3.5%;right:4.5%;font-style:normal;font-size:5cqw;font-weight:700;line-height:1;color:#2b2416;background:var(--gold);border-radius:999px;padding:1.6cqw 3.2cqw;letter-spacing:.04em;font-family:system-ui,sans-serif}
/* 3 상담 미리보기: 몸짓 + 자막 + 떠오르는 카드 */
.preview{display:grid;gap:12px;max-width:760px;margin:0 auto}
.pv-stage{position:relative;width:min(100%,260px);aspect-ratio:2/3;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#0f3129}
.pv-stage video,.pv-stage>img{width:100%;height:100%;object-fit:cover;display:block}
.pv-card{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;background:#041f1ccc;border:1px solid var(--line2);border-radius:12px;padding:6px 10px 6px 6px}
.pv-card img{width:34px;height:50px;border-radius:5px;object-fit:cover}.pv-card i{font-style:normal;font-size:.78rem;color:var(--jade)}
.pv-lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-lines li{border-radius:14px;padding:10px 12px;font-size:.92rem;line-height:1.45;max-width:88%}
.pv-lines li b{display:block;font-size:.72rem;color:var(--muted);margin-bottom:2px;font-weight:500}
.pv-lines .me{background:#214c40;justify-self:end}.pv-lines .g{background:var(--card);border:1px solid var(--line)}
/* 4 이렇게 이야기해요 */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:72px 1fr;grid-template-areas:"shot head" "shot desc";column-gap:12px;row-gap:2px;align-items:center;align-content:center;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:10px 12px}
.step-shot{grid-area:shot;width:72px;height:auto;border-radius:10px;border:1px solid var(--line)}
.steps b{grid-area:head;display:flex;align-items:center;gap:8px;font-size:1rem}.steps i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);font-style:normal;font-size:.72rem;flex:none}
.steps p{grid-area:desc;font-size:.86rem;color:var(--muted);margin-top:3px}
/* 5 네 명의 상담가: 손을 올리면 몸짓(정지 ↔ 움직임 그림) */
.gcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcard{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.gcard summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.gcard summary::-webkit-details-marker{display:none}
.gvid{position:relative;width:100%;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#0f3129;margin-bottom:6px}
.gvid img,.gvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gcard b{font-size:1.02rem}.gcard span{font-size:.82rem;color:var(--muted)}.gcard em{font-style:normal;font-size:.72rem;color:var(--jade)}
.gcard p{font-size:.84rem;color:var(--muted);margin-top:8px;text-align:center}
.gcard .voice-text{color:var(--paper);font-style:italic}.gcard .voice{margin-top:8px}
/* 6 안심하고 */
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trust li{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px 12px;text-align:center}
.ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);color:var(--good);font-style:normal;font-weight:700;font-size:.9rem;margin-bottom:8px}
.trust b{display:block;font-size:.95rem}.trust p{font-size:.8rem;color:var(--muted);margin-top:4px}
/* 7 무료와 상담권 */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.col{border-radius:18px;padding:16px 14px;background:var(--card);border:1px solid var(--line)}
.col.free{border-color:#d9b86a99}.col.free b{color:var(--gold)}
.col.paid{border-color:var(--line2);background:linear-gradient(180deg,#123b31,#0f3129)}.col.paid b{color:var(--jade)}
.col b{display:block;font-size:1.05rem;margin-bottom:8px}
.col ul{margin:0;padding-left:18px;font-size:.88rem}.col li{margin:4px 0}
/* 7b 앱으로도 만나요(2026-10-24): Google Play 단추 + QR(PC 만, 휴대폰은 자기 화면을 못 찍는다) + App Store 준비 중(누를 수 없는 회색 글자, 배지·로고 없음) */
.apps-row{display:flex;flex-direction:column;align-items:center;gap:14px}
.qr{display:none;margin:0;text-align:center}
.qr img{display:block;width:148px;height:148px;border-radius:12px;background:#fff;margin:0 auto}
.qr figcaption{font-size:.8rem;color:var(--muted);margin-top:8px;max-width:180px}
.apps-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.btn.soon{color:var(--muted);border-color:var(--line);background:transparent;cursor:default;font-weight:500}
/* 8 언어 */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.86rem}
/* 9 FAQ */
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"▾";color:var(--muted)}
.faq details[open] summary::after{content:"▴"}
.faq p{color:var(--muted);font-size:.92rem;margin-top:8px}
.cta-end{border-top:0;padding-top:8px}
/* 바닥글 */
footer{border-top:1px solid var(--line);padding:28px 16px 40px;max-width:1120px;margin:0 auto;text-align:center}
.links{font-size:.86rem;color:var(--muted)}.links a{margin:0 2px}
.biz{font-size:.74rem;color:var(--muted);margin:12px auto 0;max-width:720px;line-height:1.7}
.copy{font-size:.74rem;color:#8c9c8e;margin-top:8px}
/* 움직임 줄이기: 영상은 멈추고 정지 그림(poster)만 */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.stage video,.pv-stage video,.gvid video{display:none}.gvid .moving{display:none}}
/* 1000 이상 */
@media (min-width:1000px){
  .top{padding:16px 24px}
  main{padding:0 24px}
  .hero{grid-template-columns:1.1fr 1fr;align-items:center;min-height:520px;padding:40px 0 48px}
  .stage{width:330px}
  h2{font-size:1.7rem}
  .sec{padding:48px 0}
  .free2{max-width:600px;gap:28px}
  .preview{grid-template-columns:260px 1fr;align-items:center}
  .steps{grid-template-columns:repeat(3,1fr);gap:18px}.steps li{grid-template-columns:1fr;grid-template-areas:"shot" "head" "desc";text-align:center;padding:18px}.step-shot{width:120px;margin:0 auto}.steps b{justify-content:center}
  .gcards{grid-template-columns:repeat(4,1fr);gap:16px}
  .trust{grid-template-columns:repeat(4,1fr);gap:16px}
  .compare{max-width:760px;margin:0 auto;gap:20px}
  .faq{max-width:760px;margin:0 auto}
  .qr{display:block}.apps-row{flex-direction:row;justify-content:center;align-items:center;gap:32px}.apps-btns{flex-direction:column;align-items:stretch}
}