:root{--bg:#f2ece2;--ink:#2b2622;--mute:#7c7168;--accent:#c4643c;--paper:#f3eee6;--card:#fbf9f5;--line:#e3dace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 "Pretendard",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
.serif{font-family:"Noto Serif KR",Georgia,serif;font-weight:500;letter-spacing:-.02em}
a{color:inherit}
nav{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,4vw,48px);z-index:10;background:linear-gradient(var(--bg) 55%,transparent)}
nav .brand{display:flex;gap:10px;align-items:center;font-weight:600;text-decoration:none}
nav .brand img{width:30px;height:30px;border-radius:8px}
nav .right{display:flex;gap:20px;align-items:center;font-size:15px}
nav .right a{text-decoration:none;color:var(--mute)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff!important;text-decoration:none;padding:14px 24px;border-radius:999px;font-weight:600;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:#000}
.btn.sm{padding:9px 16px;font-size:14px}

.story{display:grid;grid-template-columns:1fr auto;grid-auto-flow:dense;gap:clamp(24px,7vw,120px);max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.steps{grid-column:1;grid-row:1}
.steps section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:460px;opacity:.3;transition:opacity .5s}
.steps section.on{opacity:1}
h1{font-size:clamp(40px,6vw,68px);line-height:1.15;margin:0 0 20px}
h2{font-size:clamp(30px,4vw,42px);line-height:1.25;margin:0 0 16px}
.steps p{color:var(--mute);margin:0 0 28px}
.kicker{font-size:14px;font-weight:600;color:var(--accent);margin-bottom:12px;letter-spacing:.04em}

/* ---- phone ---- */
.stage{grid-column:2;grid-row:1;position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.stage::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(#e6c3a8 0,transparent 65%);opacity:.7;z-index:-1}
.phone{--h:min(80vh,720px);position:relative;height:var(--h);aspect-ratio:9/19.5;border-radius:calc(var(--h)*.075);background:linear-gradient(145deg,#efe9df,#d8cfc2);padding:calc(var(--h)*.014);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 1px 0 1px #cfc5b7,0 50px 90px -40px rgba(90,55,30,.55),0 20px 40px -20px rgba(90,55,30,.25);margin-top:30px}
.phone::before,.phone::after{content:"";position:absolute;right:-3px;width:3px;border-radius:0 2px 2px 0;background:#cbc1b3}
.phone::before{top:18%;height:9%}.phone::after{top:30%;height:6%}
.screen{position:relative;height:100%;border-radius:calc(var(--h)*.062);overflow:hidden;background:var(--paper);font-size:calc(var(--h)*.019);container-type:size}
.cam{position:absolute;top:1.6%;left:50%;width:3.2%;aspect-ratio:1;border-radius:50%;background:#1b1917;transform:translateX(-50%);z-index:5}
.sb{position:absolute;top:0;inset-inline:0;display:flex;justify-content:space-between;padding:4.5cqh 7cqw 0;font-size:.82em;font-weight:600;color:#3a332d;z-index:4}
.sb i{font-style:normal;letter-spacing:.1em}

/* app home, mirrors the real MainActivity */
.app{position:absolute;inset:0;z-index:0;padding:12cqh 7cqw 4cqh;display:flex;flex-direction:column}
.app .top{display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:.85em}
.app .top span{display:flex;gap:4cqw}
.app svg{width:1.4em;height:1.4em;stroke:#6f655c;fill:none;stroke-width:1.6}
.app .date{display:flex;justify-content:space-between;align-items:center;margin:2.5cqh 0 .5cqh}
.app .date b{font-family:"Noto Serif KR",Georgia,serif;font-weight:500;font-size:2.3em;letter-spacing:-.03em}
.app .dot{width:11cqw;aspect-ratio:1;border-radius:50%;background:var(--accent);position:relative;box-shadow:0 0 18px 4px rgba(196,100,60,.25)}
.app .dot::before{content:"";position:absolute;inset:-160%;border-radius:50%;background:radial-gradient(closest-side,rgba(196,100,60,.16),rgba(196,100,60,.06) 55%,transparent);z-index:-1}
.app .left{font-size:.85em;color:var(--mute);margin-bottom:3cqh}
.app li{list-style:none;display:flex;align-items:center;gap:4cqw;padding:2.1cqh 0}
.app li::before{content:"";width:1.15em;height:1.15em;border-radius:50%;border:1.5px solid #6f655c;flex:none}
.app li span{flex:1;border-bottom:1px solid var(--line);padding-bottom:2.1cqh;margin-bottom:-2.1cqh}
.app li.done::before{background:var(--accent);border-color:var(--accent)}
.app li.done span{text-decoration:line-through;color:var(--mute)}
.app ul{margin:0;padding:0}
.app small{display:block;color:var(--mute);font-size:.72em;margin:3cqh 0 1cqh}
.app .input{margin-top:auto;display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1.6cqh 2cqh 1.6cqh 5cqw;color:#9a8f86;font-size:.9em}
.app .input i{width:4.6cqh;aspect-ratio:1;border-radius:50%;background:#cfc7bd;color:#fff;display:grid;place-items:center;font-style:normal}
.bar{position:absolute;bottom:1.6cqh;left:50%;width:34%;height:.5cqh;border-radius:9px;background:#2b2622;opacity:.75;transform:translateX(-50%);z-index:6}

/* notification shade pulled over the app */
.shade{position:absolute;inset:0;padding:11cqh 3.5cqw 0;background:rgba(236,226,213,.72);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);transform:translateY(-101%);transition:transform .8s cubic-bezier(.2,.8,.2,1);z-index:3;display:flex;flex-direction:column;gap:1.1cqh}
.shade.down{transform:none}
.qs{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw;margin-bottom:1.5cqh}
.qs i{height:6cqh;border-radius:99px;background:rgba(255,255,255,.55)}
.qs i:first-child{background:#e3c1a7}
.n{display:flex;gap:3cqw;background:var(--card);border-radius:5cqw;padding:0 4cqw;box-shadow:0 1px 3px rgba(60,40,20,.08);opacity:0;max-height:0;transform:translateY(-10px);overflow:hidden;transition:all .6s cubic-bezier(.2,.8,.2,1)}
.n.show{opacity:1;max-height:30cqh;transform:none;padding:2cqh 4cqw}
.n img{width:8.5cqw;height:8.5cqw;border-radius:2.4cqw;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.n div{flex:1;min-width:0}
.n .h{color:var(--mute);font-size:.78em}
.n .t{font-weight:600}
.n p{margin:0;color:#4d453f;font-size:.88em;line-height:1.5}
.n .act{color:var(--accent);font-weight:600;font-size:.85em;margin-top:.6cqh}
.chip{display:inline-block;font-size:.72em;font-weight:600;padding:0 .7em;border-radius:99px;background:#f1e3d6;color:var(--accent);vertical-align:.1em;margin-left:.3em}

/* closing */
.end{text-align:center;padding:120px 20px 80px}
.end h2{margin-bottom:28px}
.faq{max-width:720px;margin:0 auto;padding:40px 20px 80px}
.faq h3{font-size:18px;margin:28px 0 6px}
.faq p{color:var(--mute);margin:0}
footer{border-top:1px solid var(--line);padding:28px 20px;text-align:center;font-size:14px;color:var(--mute)}
footer a{margin:0 10px}

@media (max-width:820px){
  .story{display:block}
  .stage{position:sticky;top:60px;height:auto;padding:8px 0 16px;z-index:3;background:linear-gradient(var(--bg) 85%,transparent)}
  .stage::before{width:300px;height:300px}
  .phone{--h:min(44vh,400px);margin:0 auto}
  .steps section{min-height:45vh;max-width:none;justify-content:flex-start;padding-top:8px}
  nav .right a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){.n,.shade,.steps section{transition:none}}

/* ---- dark (mirrors the app's dark theme) ---- */
.theme{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.theme .sun,[data-theme=dark] .theme .moon{display:none}
[data-theme=dark] .theme .sun{display:block}
body,nav,.stage,.phone,.screen,.app,.shade,.n{transition:background-color .5s,color .5s,box-shadow .5s}
[data-theme=dark]{--bg:#141312;--ink:#efe8de;--mute:#9b9188;--accent:#e3b48c;--paper:#151413;--card:#22201e;--line:#2f2b28}
[data-theme=dark] .btn{background:var(--ink);color:#141312!important}
[data-theme=dark] .btn:hover{background:#fff}
[data-theme=dark] .stage::before{background:radial-gradient(#4a3526 0,transparent 65%)}
[data-theme=dark] .phone{background:linear-gradient(145deg,#2a2725,#161514);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 0 1px #0c0b0a,0 50px 90px -40px rgba(0,0,0,.8),0 0 120px -30px rgba(227,180,140,.18)}
[data-theme=dark] .phone::before,[data-theme=dark] .phone::after{background:#2a2725}
[data-theme=dark] .cam{background:#000}
[data-theme=dark] .sb{color:#efe8de}
[data-theme=dark] .app svg,[data-theme=dark] .app li::before{stroke:#8f857c;border-color:#7a7068}
[data-theme=dark] .app li.done::before{border-color:var(--accent)}
[data-theme=dark] .app .dot{background:transparent;box-shadow:inset 3.2cqw -1.4cqw 0 0 var(--accent),0 0 40px 10px rgba(227,180,140,.08)}
[data-theme=dark] .app .input i{background:#4a4541;color:#cfc7bd}
[data-theme=dark] .bar{background:#efe8de}
[data-theme=dark] .shade{background:rgba(20,19,18,.72)}
[data-theme=dark] .qs i{background:rgba(255,255,255,.08)}
[data-theme=dark] .qs i:first-child{background:#6b4a33}
[data-theme=dark] .n{box-shadow:none}
[data-theme=dark] .n p{color:#c9c0b6}
[data-theme=dark] .chip{background:#3a2c22}
[data-theme=dark] .app .dot::before{background:radial-gradient(closest-side,rgba(227,180,140,.07),transparent)}