:root { --bg:#080809; --panel:#111113; --line:#2b292d; --text:#f7f5f6; --muted:#aaa4a8; --quiet:#7d777c; --red:#ff526a; --mint:#6ce6bf; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font-family:Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:8px; left:8px; z-index:500; padding:12px 16px; background:#fff; color:#111; transform:translateY(-160%); }
.skip-link:focus { transform:none; }

.site-header { position:sticky; top:0; z-index:100; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(8,8,9,.9); backdrop-filter:blur(16px); }
.header-inner { width:min(calc(100% - 40px),var(--max)); min-height:70px; margin:0 auto; display:flex; align-items:center; gap:28px; }
.brand { min-height:44px; display:inline-flex; align-items:center; }
.brand img { width:132px; height:auto; }
.desktop-nav { margin-left:auto; display:flex; gap:24px; }
.desktop-nav a { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); font-size:12px; font-weight:750; }
.desktop-nav a:hover,.desktop-nav a:focus-visible { color:#fff; }
.auth-shell { position:relative; }
.auth-button { min-height:44px; padding:0 13px; border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; gap:8px; background:transparent; color:#ddd9dc; font-size:12px; font-weight:800; cursor:pointer; }
.auth-button:hover,.auth-button:focus-visible { border-color:#666168; }
.auth-mark { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#4285f4; font-size:11px; font-weight:900; }
.auth-mark.account-initial,.account-initial { background:#40191f; color:#ff8c9c; }
.auth-chevron { color:var(--quiet); }
.account-menu { position:absolute; top:calc(100% + 8px); right:0; width:280px; padding:10px; border:1px solid #353339; border-radius:9px; background:#17171a; box-shadow:0 20px 50px rgba(0,0,0,.45); }
.account-summary { padding:10px 8px 15px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:11px; }
.account-initial { flex:0 0 36px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:900; }
.account-summary span:last-child { min-width:0; display:grid; gap:2px; }
.account-summary strong,.account-summary small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-summary strong { font-size:13px; }
.account-summary small { color:var(--quiet); font-size:10px; }
.account-menu a,.account-menu button { width:100%; min-height:44px; padding:0 8px; border:0; display:flex; align-items:center; justify-content:space-between; background:transparent; color:#ccc8cb; font-size:12px; cursor:pointer; }

main { width:min(calc(100% - 40px),var(--max)); margin:0 auto; padding:34px 0 68px; }
.eyebrow { margin:0; display:flex; align-items:center; gap:9px; color:#8d878c; font-size:9px; font-weight:900; letter-spacing:.15em; }
.eyebrow span { width:22px; height:2px; background:var(--red); }
.product-hero { min-height:690px; display:grid; grid-template-columns:minmax(410px,.78fr) minmax(590px,1.22fr); gap:24px; align-items:center; }
.hero-copy { position:relative; z-index:4; padding-left:4px; }
.hero-copy h1 { margin:20px 0 0; font-size:clamp(54px,5.5vw,78px); line-height:1.02; letter-spacing:-.07em; }
.hero-copy h1 em { color:var(--red); font-style:normal; }
.hero-lead { margin:27px 0 0; color:var(--muted); font-size:15px; line-height:1.75; letter-spacing:-.02em; }
.hero-actions { margin-top:29px; display:flex; align-items:center; gap:20px; }
.primary-action { min-width:205px; min-height:54px; padding:0 18px; border-radius:8px; display:flex; align-items:center; justify-content:space-between; background:var(--red); color:#18070a; font-size:13px; font-weight:900; }
.primary-action:hover,.primary-action:focus-visible { background:#ff7084; }
.primary-action span { font-size:19px; }
.text-action { min-height:44px; display:inline-flex; align-items:center; border-bottom:1px solid #5f5a60; color:#d3cfd2; font-size:11px; font-weight:800; }
.hero-keywords { margin:34px 0 0; display:flex; align-items:center; gap:12px; color:#888287; font-size:10px; font-weight:700; }
.hero-keywords i { width:3px; height:3px; border-radius:50%; background:var(--red); }

.product-visual { position:relative; min-height:650px; margin-right:0; border-radius:28px; display:grid; place-items:center; background:linear-gradient(90deg,rgba(8,8,9,.28),rgba(8,8,9,0)),url('/app-hero-stage-v1.webp') center/cover no-repeat; overflow:hidden; isolation:isolate; }
.product-visual::after { position:absolute; inset:auto 3% 3% 3%; height:24%; z-index:0; background:radial-gradient(ellipse,rgba(0,0,0,.8),transparent 67%); filter:blur(14px); content:""; }
.product-visual>p { position:absolute; right:28px; bottom:18px; z-index:8; margin:0; color:rgba(255,255,255,.42); font-size:9px; letter-spacing:.02em; }
.device-stack { position:absolute; inset:0; perspective:1400px; }
.device-card { position:absolute; width:240px; padding:5px; border:1px solid rgba(255,255,255,.15); border-radius:31px; background:#101013; box-shadow:0 32px 60px rgba(0,0,0,.68); opacity:.56; filter:saturate(.65) brightness(.72); cursor:pointer; overflow:hidden; transition:left .45s cubic-bezier(.2,.8,.2,1),right .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,filter .3s ease; }
.device-card img { width:100%; height:auto; aspect-ratio:1200/2310; border-radius:25px; object-fit:cover; pointer-events:none; }
.device-card:hover,.device-card:focus-visible { opacity:.86; filter:saturate(.9) brightness(.9); outline:2px solid rgba(255,82,106,.65); outline-offset:3px; }
.device-profile { left:4%; top:22%; transform:rotateZ(-7deg); }
.device-match { left:38%; top:8%; transform:rotateZ(-1deg); }
.device-reveal { right:1%; top:20%; transform:rotateZ(7deg); }
.device-card.is-active { left:50%; right:auto; top:4%; z-index:6; width:300px; opacity:1; filter:none; transform:translateX(-50%) rotateZ(0); box-shadow:0 40px 90px rgba(0,0,0,.78),0 0 0 1px rgba(255,103,125,.22); }

.value-strip { min-height:96px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.value-strip p { margin:0; padding:0 25px; display:flex; align-items:center; gap:15px; }
.value-strip p+p { border-left:1px solid var(--line); }
.value-strip span { color:var(--red); font-size:9px; font-weight:900; }
.value-strip strong { font-size:13px; }

.workspace { margin-top:76px; padding:31px; border:1px solid var(--line); border-radius:14px; display:grid; grid-template-columns:.8fr 1.2fr; gap:42px; align-items:center; background:#101012; }
.workspace-title h2 { margin:13px 0 7px; font-size:31px; letter-spacing:-.05em; }
.workspace-title>p:last-child { margin:0; color:var(--muted); font-size:11px; }
.workspace-state { min-width:0; }
.workspace-loading { min-height:110px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:11px; }
.workspace-loading>span { width:27px; height:2px; background:var(--red); animation:pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity:.2; transform:scaleX(.4); } }
.signed-out-panel { min-height:110px; padding:18px 0 18px 24px; border-left:1px solid var(--line); display:flex; align-items:center; gap:24px; }
.signed-out-panel>p { margin:0; display:grid; gap:6px; }
.signed-out-panel strong { font-size:14px; }
.signed-out-panel>p span { color:var(--quiet); font-size:10px; }
.google-connect { min-width:210px; min-height:52px; margin-left:auto; padding:0 16px; border:0; border-radius:7px; display:flex; align-items:center; gap:10px; background:#fff; color:#171417; cursor:pointer; }
.google-connect b { margin-right:auto; font-size:12px; }
.google-connect i { font-size:18px; font-style:normal; }
.account-dashboard { display:grid; grid-template-columns:1.15fr .85fr; border-left:1px solid var(--line); }
.account-dashboard article { min-width:0; padding:18px 22px; }
.record-summary { border-left:1px solid var(--line); }
.panel-index { color:var(--red); font-size:8px; font-weight:900; letter-spacing:.12em; }
.readiness-card { display:grid; grid-template-columns:1fr 86px; gap:18px; align-items:center; }
.readiness-card h3 { margin:8px 0 5px; font-size:20px; letter-spacing:-.04em; }
.readiness-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.readiness-copy>a { min-height:44px; margin-top:7px; display:inline-flex; align-items:center; gap:8px; font-size:10px; font-weight:900; }
.readiness-copy>a span { color:var(--red); }
.readiness-gauge { position:relative; width:76px; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; background:conic-gradient(var(--red) calc(var(--progress)*1%),#29282c 0); }
.readiness-gauge::before { position:absolute; inset:7px; border-radius:inherit; background:var(--panel); content:""; }
.readiness-gauge>* { position:relative; z-index:1; }
.readiness-gauge strong { font-size:22px; }
.readiness-gauge span { color:var(--red); font-size:9px; }
.summary-heading { display:flex; align-items:center; justify-content:space-between; }
.summary-heading a { min-height:44px; display:inline-flex; align-items:center; color:var(--quiet); font-size:9px; }
.summary-numbers { display:flex; gap:22px; }
.summary-numbers p { margin:0; display:flex; align-items:baseline; gap:5px; }
.summary-numbers strong { font-size:22px; }
.summary-numbers span,.latest-result span,.latest-result small { color:var(--quiet); font-size:8px; }
.latest-result { margin-top:9px; display:grid; gap:3px; }
.latest-result span { color:var(--red); font-weight:900; }
.latest-result strong { font-size:12px; }

.mobile-app { scroll-margin-top:88px; margin-top:18px; min-height:118px; padding:23px 30px; border:1px solid var(--line); border-radius:14px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; background:#0f0f11; }
.mobile-app h2 { margin:11px 0 0; font-size:24px; letter-spacing:-.045em; }
.release-state { min-width:285px; padding:14px 17px; border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; gap:12px; }
.release-state>span { width:7px; height:7px; border-radius:50%; background:#ffb34e; box-shadow:0 0 0 5px rgba(255,179,78,.08); }
.release-state p { margin:0; display:grid; gap:2px; }
.release-state strong { font-size:10px; }
.release-state small { color:var(--quiet); font-size:8px; }
.release-state.is-live>span { background:var(--mint); }
.store-links { display:flex; gap:9px; }
.store-links a { min-width:155px; min-height:52px; padding:8px 14px; border:1px solid #4a474d; border-radius:7px; display:grid; align-content:center; }
.store-links small { color:var(--quiet); font-size:7px; }
.store-links strong { font-size:13px; }
.safety-note { margin:15px 0 0; color:#736d72; font-size:9px; }
.safety-note strong { margin-right:7px; color:var(--red); }
.safety-note a { min-height:44px; margin-left:8px; display:inline-flex; align-items:center; color:#a9a3a8; text-decoration:underline; text-underline-offset:3px; }
.site-footer { width:min(calc(100% - 40px),var(--max)); min-height:100px; margin:0 auto; border-top:1px solid var(--line); display:flex; align-items:center; gap:25px; }
.site-footer .brand img { width:112px; }
.site-footer nav { margin-left:auto; display:flex; gap:17px; }
.site-footer nav a { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; color:var(--quiet); font-size:9px; }
.site-footer>span { color:#5e5a60; font-size:9px; }
.mobile-dock { display:none; }
.toast { position:fixed; left:50%; bottom:20px; z-index:300; max-width:calc(100% - 28px); padding:13px 16px; border-radius:7px; background:#f1eeee; color:#171417; box-shadow:0 18px 45px rgba(0,0,0,.45); transform:translateX(-50%); font-size:11px; font-weight:850; }

@media (max-width:900px) {
    .product-hero { grid-template-columns:minmax(330px,.7fr) minmax(440px,1.3fr); }
    .product-visual { margin-right:0; }
    .device-card { width:185px; }
    .device-card.is-active { width:270px; }
    .device-profile { left:2%; }
}
@media (max-width:760px) {
    body { padding-bottom:70px; }
    .header-inner { width:calc(100% - 28px); min-height:62px; gap:14px; }
    .brand img { width:116px; }
    .desktop-nav { display:none; }
    .auth-shell { margin-left:auto; }
    .auth-button { max-width:160px; }
    main { width:calc(100% - 28px); padding:29px 0 48px; }
    .product-hero { min-height:0; grid-template-columns:1fr; gap:24px; }
    .hero-copy h1 { margin-top:15px; font-size:clamp(42px,12.5vw,54px); }
    .hero-lead { margin-top:19px; font-size:13px; }
    .hero-actions { margin-top:23px; }
    .primary-action { flex:1; min-width:0; }
    .text-action { flex:0 0 auto; }
    .hero-keywords { margin-top:25px; gap:8px; font-size:9px; }
    .product-visual { min-height:500px; margin:0 -14px; border-radius:18px; }
    .product-visual>p { right:18px; bottom:13px; }
    .device-card { width:154px; border-radius:22px; }
    .device-card img { border-radius:17px; }
    .device-profile { left:1%; top:26%; }
    .device-match { left:30%; top:9%; }
    .device-reveal { right:-2%; top:26%; }
    .device-card.is-active { left:50%; top:5%; width:225px; }
    .value-strip { min-height:78px; grid-template-columns:1fr; }
    .value-strip p { min-height:62px; padding:0 15px; }
    .value-strip p+p { border-top:1px solid var(--line); border-left:0; }
    .workspace { margin-top:58px; padding:23px 20px; grid-template-columns:1fr; gap:22px; }
    .workspace-title h2 { font-size:28px; }
    .signed-out-panel { min-height:0; padding:20px 0 0; border-top:1px solid var(--line); border-left:0; display:grid; gap:16px; }
    .google-connect { width:100%; margin:0; }
    .account-dashboard { grid-template-columns:1fr; border-top:1px solid var(--line); border-left:0; }
    .account-dashboard article { padding:19px 0; }
    .record-summary { border-top:1px solid var(--line); border-left:0; }
    .mobile-app { min-height:0; padding:22px 20px; grid-template-columns:1fr; gap:18px; }
    .release-state { min-width:0; }
    .store-links { flex-wrap:wrap; }
    .site-footer { width:calc(100% - 28px); min-height:140px; padding:22px 0; display:grid; grid-template-columns:1fr auto; gap:8px; }
    .site-footer nav { grid-column:1/-1; grid-row:2; margin:0; flex-wrap:wrap; }
    .site-footer>span { grid-column:2; grid-row:1; }
    .mobile-dock { position:fixed; left:0; right:0; bottom:0; z-index:120; height:64px; padding-bottom:env(safe-area-inset-bottom); border-top:1px solid #2a292e; display:grid; grid-template-columns:repeat(3,1fr); background:rgba(13,13,15,.96); backdrop-filter:blur(14px); }
    .mobile-dock a { min-height:58px; display:grid; place-content:center; gap:3px; color:#777278; font-size:9px; font-weight:800; text-align:center; }
    .mobile-dock a span { color:#6b666d; font-size:13px; }
    .mobile-dock a.is-current { color:#fff; }
    .mobile-dock a.is-current span { color:var(--red); }
}
@media (max-width:420px) {
    .auth-button:not(.is-account) #authLabel { font-size:0; }
    .auth-button:not(.is-account) #authLabel::after { content:"로그인"; font-size:12px; }
    .auth-button.is-account #authLabel { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .hero-actions { align-items:stretch; flex-direction:column; gap:8px; }
    .text-action { justify-content:center; border:1px solid var(--line); border-radius:8px; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;} }