/* 화면 부품. 값은 tokens.css만 쓴다. 목록은 docs/commute-flow-v1.md 5장 */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--on-bg);font-family:var(--font-ui);font-size:var(--ui-fs-md);line-height:1.5;-webkit-tap-highlight-color:transparent}

[hidden]{display:none!important}

/* 화면 틀 */
.app{max-width:var(--ui-width);margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;gap:var(--ui-sp-3);padding:var(--ui-sp-3) var(--ui-sp-3) var(--ui-sp-4)}
.screen--center{justify-content:center}
.push{margin-top:auto}

/* 글 */
.h1{font-family:var(--font-ko);font-size:var(--ui-fs-xl);line-height:1.3;font-weight:400}
.h1 b{color:var(--accent);font-weight:400}
.lead{color:var(--on-bg-muted);font-size:var(--ui-fs-md)}
.note{color:var(--on-bg-muted);font-size:var(--ui-fs-xs);line-height:1.5}
.step{color:var(--on-bg-muted);font-size:var(--ui-fs-sm)}
.status{font-family:var(--font-ko);font-size:var(--ui-fs-md);text-align:center;color:var(--on-bg)}
.big-num{font-family:var(--font-ko);font-size:56px;line-height:1;text-align:center;color:var(--accent)}
.big-num small{font-size:var(--ui-fs-lg);color:var(--on-bg)}

/* 버튼 */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--ui-sp-1);width:100%;min-height:var(--ui-tap);padding:0 var(--ui-sp-3);border-radius:var(--ui-r);border:1px solid var(--bg-line);background:var(--bg-raised);color:var(--on-bg);font:inherit;font-family:var(--font-ko);font-size:var(--ui-fs-lg);cursor:pointer;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--huge{min-height:76px;font-size:var(--ui-fs-xl)}
.btn--small{min-height:40px;font-size:var(--ui-fs-md);width:auto}
.btn--text{background:none;border:0;color:var(--on-bg-muted);font-family:var(--font-ui);font-size:var(--ui-fs-sm);text-decoration:underline;min-height:40px;width:auto}
.row{display:flex;gap:var(--ui-sp-2)}
.row > *{flex:1}

/* 선택 칩 */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--ui-sp-2)}
.choices--row{display:flex;flex-wrap:wrap}
.choice{min-height:var(--ui-tap);border-radius:var(--ui-r);border:1px solid var(--bg-line);background:var(--bg-raised);color:var(--on-bg);font:inherit;font-family:var(--font-ko);font-size:var(--ui-fs-lg);cursor:pointer;padding:0 var(--ui-sp-3)}
.choices--row .choice{min-height:40px;font-size:var(--ui-fs-md);flex:1}
.choice.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* 숫자 조절 */
.stepper{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-sp-3)}
.stepper button{width:64px;height:64px;border-radius:50%;border:1px solid var(--bg-line);background:var(--bg-raised);color:var(--on-bg);font-size:28px;cursor:pointer}
.field{width:100%;min-height:var(--ui-tap);border-radius:var(--ui-r);border:1px solid var(--bg-line);background:var(--bg-raised);color:var(--on-bg);font:inherit;font-size:var(--ui-fs-lg);padding:0 var(--ui-sp-3);text-align:center}

/* 묶음 상자 */
.box{background:var(--bg-raised);border:1px solid var(--bg-line);border-radius:var(--ui-r);padding:var(--ui-sp-3);display:flex;flex-direction:column;gap:var(--ui-sp-2)}
.box h3{font-family:var(--font-ko);font-weight:400;font-size:var(--ui-fs-md)}
.box--accent{border-color:var(--accent)}
.kv{display:flex;justify-content:space-between;align-items:center;gap:var(--ui-sp-2);font-size:var(--ui-fs-sm)}
.kv span:first-child{color:var(--on-bg-muted)}

/* 도장판 */
.stamps{display:flex;gap:var(--ui-sp-2);justify-content:center}
.stamps i{width:44px;height:44px;border-radius:50%;border:2px dashed var(--bg-line);display:grid;place-items:center;font-style:normal;font-family:var(--font-ko);font-size:var(--ui-fs-xs);color:var(--on-bg-muted)}
.stamps i.done{border:2px solid var(--stamp-red);color:var(--stamp-red);background:var(--cream-50);transform:rotate(-10deg)}
.stamps i.settled{border:2px solid var(--on-bg-muted);color:var(--on-bg-muted)}

/* 도감 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ui-sp-2)}
.tile{aspect-ratio:1;border-radius:var(--ui-r);background:var(--bg-raised);border:1px solid var(--bg-line);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:var(--ui-sp-1);font-size:var(--ui-fs-xs);text-align:center;overflow:hidden;position:relative}
.tile b{position:absolute;left:6px;top:4px;font-weight:400;color:var(--on-bg-muted)}
.tile.got{background:linear-gradient(160deg,var(--cream-200),var(--gold-300));color:var(--navy-900);border-color:var(--gold-300)}
.tile.got b{color:var(--navy-500)}
.tile.lock{color:var(--bg-line)}
.tile.lock::before{content:"";position:absolute;inset:26% 22% 30%;background:var(--bg-line);border-radius:6px 6px 2px 2px;clip-path:polygon(0 100%,0 55%,22% 55%,22% 20%,45% 0,68% 20%,68% 45%,100% 45%,100% 100%)}

/* 하단 탭 */
.tabbar{position:sticky;bottom:0;display:flex;background:var(--bg-raised);border-top:1px solid var(--bg-line)}
.tabbar button{flex:1;min-height:var(--ui-tap);background:none;border:0;color:var(--on-bg-muted);font:inherit;font-family:var(--font-ko);font-size:var(--ui-fs-sm);cursor:pointer}
.tabbar button.on{color:var(--accent)}

/* 광고 자리 */
.ad{margin-top:var(--ui-sp-4);min-height:100px;border:1px dashed var(--bg-line);border-radius:var(--ui-r);display:grid;place-items:center;color:var(--bg-line);font-size:var(--ui-fs-sm)}

/* 뱃지 */
.badge{align-self:center;font-family:var(--font-ko);font-size:var(--ui-fs-lg);padding:var(--ui-sp-1) var(--ui-sp-3);border-radius:var(--r-pill);background:var(--band-bg);color:var(--band-text);border:2px solid var(--accent)}