/* 제로덴 부품 세트 v3 (2026-10-09) — tokens.css 와 함께 쓴다.
   새 화면은 이 부품을 조립만 한다. 알약·버튼·카드의 크기를 화면마다 새로 적지 않는다(같은 종류는 같은 크기). */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); box-sizing:border-box; min-height:var(--control-h); padding:var(--s-2) var(--s-5);
  border:0; border-radius:var(--radius-m); background:var(--brand); color:var(--on-brand); font:var(--w-medium) var(--fs-body)/var(--lh-ui) var(--font-sans); cursor:pointer;
  transition:box-shadow var(--dur) var(--ease); position:relative; overflow:hidden; text-decoration:none; }
.btn::after{ content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none; }
.btn:hover::after{ opacity:var(--state-hover); } .btn:active::after{ opacity:var(--state-pressed); }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn--ghost{ background:transparent; color:var(--brand); box-shadow:inset 0 0 0 1px var(--border-strong); }
.btn--danger{ background:var(--danger); color:var(--on-danger); }
.btn--block{ display:flex; width:100%; }
.field{ display:block; margin:0 0 var(--s-4); }
.label{ display:block; margin-bottom:var(--s-2); font-size:var(--fs-label); line-height:var(--lh-label); font-weight:var(--w-medium); }
.input{ box-sizing:border-box; width:100%; min-height:var(--control-h); padding:var(--s-2) var(--s-4); border:1px solid var(--border-strong); border-radius:var(--radius-m);
  background:var(--bg); color:var(--text); font:var(--fs-body)/var(--lh-ui) var(--font-sans); }
.input::placeholder{ color:var(--text-placeholder); }
.input[aria-invalid="true"]{ border-color:var(--danger); border-width:2px; }
.help{ margin-top:var(--s-2); font-size:var(--fs-caption); line-height:var(--lh-caption-v3); color:var(--text-muted); }
.help--error{ color:var(--danger); }
.card{ background:var(--surface); border-radius:var(--radius-l); padding:var(--s-4); box-shadow:var(--shadow-1); }
.chip{ display:inline-flex; align-items:center; box-sizing:border-box; min-height:var(--tap-min); padding:var(--s-2) var(--s-4); border-radius:var(--radius-full);
  background:var(--surface-2); color:var(--text); font-size:var(--fs-label); line-height:var(--lh-label); text-decoration:none; }
.chip--on{ background:var(--brand); color:var(--on-brand); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--tap-gap); }
.row{ display:flex; align-items:center; gap:var(--s-4); box-sizing:border-box; min-height:var(--row-h); padding:var(--s-2) var(--gutter); border-bottom:1px solid var(--border); }
.row__main{ flex:1; min-width:0; } .row__sub{ color:var(--text-muted); font-size:var(--fs-label); line-height:var(--lh-label); }
.icon{ width:var(--icon-l); height:var(--icon-l); flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.tabbar{ display:flex; box-sizing:border-box; min-height:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--bg); border-top:1px solid var(--border); }
.tab{ flex:1; min-width:0; min-height:var(--tap-min); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:var(--fs-tab); line-height:1.35; color:var(--text-muted); text-align:center; text-decoration:none; }
.tab[aria-current="page"]{ color:var(--brand); font-weight:var(--w-bold); }
.grid{ display:grid; gap:var(--col-gap); grid-template-columns:repeat(var(--cols),minmax(0,1fr)); padding:0 var(--gutter); }
.badge{ display:inline-flex; align-items:center; min-height:calc(1.25rem * var(--text-scale)); padding:0 var(--s-2); border-radius:var(--radius-full); font-size:var(--fs-caption); line-height:1; background:var(--danger); color:var(--on-danger); }