/* 2026-10-01 KST: 목업의 네이비와 Pretendard를 실제 모바일 안내 화면에 적용한다. */
:root{color-scheme:light;--navy:#102a43;--blue:#1767ba;--ink:#203247;--muted:#607184;--line:#d9e3ed}
*{box-sizing:border-box}
body{margin:0;background:#f5f8fb;color:var(--ink);font-family:"Pretendard Variable",Pretendard,system-ui,"Malgun Gothic",sans-serif;font-size:16px;line-height:1.65;word-break:keep-all}
main{max-width:680px;margin:auto;padding:0 24px 24px}
.masthead{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);font-size:13px}
.wordmark{font-weight:800;color:var(--navy);font-size:16px}.secure{color:var(--muted)}
.sample{padding:10px 12px;border:1px solid #e6cc87;background:#fff4dd;font-size:13px;color:#6d4800;border-radius:6px}
.intro{padding:30px 0 22px}.label{font-size:13px;font-weight:700;color:var(--blue);margin:0 0 8px}
h1{font-size:30px;line-height:1.3;letter-spacing:-.03em;margin:0 0 12px;color:var(--navy);overflow-wrap:anywhere}
.summary{margin:0;color:var(--muted);overflow-wrap:anywhere}
.safety{background:#fff4dd;border-left:4px solid #bf8a14;border-radius:6px;padding:15px 16px;color:#6d4800;font-size:14px}.safety p{margin:4px 0 0}
h2{font-size:19px;margin:28px 0 12px}
.steps{list-style:none;padding:0;margin:0;counter-reset:step;display:grid;gap:10px}
.steps li{counter-increment:step;position:relative;padding:16px 16px 16px 57px;min-height:64px;border:1px solid var(--line);background:white;border-radius:8px;overflow-wrap:anywhere}
.steps li:before{content:counter(step);position:absolute;left:15px;top:15px;width:28px;height:28px;border-radius:50%;background:var(--blue);color:white;display:grid;place-items:center;font-size:14px;font-weight:750}
video{width:100%;border-radius:8px;background:var(--navy);aspect-ratio:16/9}
.video-message{padding:16px;border:1px solid var(--line);border-radius:8px;background:#edf4fb;color:#3d5d79;font-size:14px}
.updated{font-size:13px;color:var(--muted);margin-top:22px}
button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:6px;background:var(--blue);color:white;min-height:44px;padding:10px 18px}
button:disabled{opacity:.6;cursor:wait}.secondary{background:white;color:var(--blue);border:1px solid #aac2d8}
.error{border:1px solid #d9e3ed;background:white;border-radius:8px;padding:20px}
.error p{margin:0 0 12px;color:var(--muted)}
.skeleton{height:70px;border:1px solid var(--line);background:#eaf0f6;border-radius:8px;margin:10px 0}
footer{border-top:1px solid var(--line);padding-top:20px;margin-top:30px;font-size:13px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}
:focus-visible{outline:3px solid #83b8e8;outline-offset:3px}
@media(max-width:480px){main{padding:0 18px 24px}h1{font-size:26px}.masthead{padding:18px 0}.secure{font-size:12px}.intro{padding-top:24px}}