:root { --bg:#0b1020; --card:#151b2e; --line:#26304a; --fg:#e5e7eb; --mute:#9ca3af; --red:#ef4444; --yel:#eab308; --grn:#22c55e; --pri:#3b82f6; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; padding-bottom:64px; }
.top { position:sticky; top:0; display:flex; gap:8px; align-items:center; padding:10px 14px; background:#111827; border-bottom:1px solid var(--line); z-index:2; }
.top .link { margin-left:auto; }
.top .link + .link { margin-left:0; }
.top .link[hidden] + .link { margin-left:auto; }
.view { padding:12px 14px; }
.muted { color:var(--mute); font-size:14px; }
.tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:#111827; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tabs button { flex:1; padding:12px 0; background:none; border:0; color:var(--mute); font-size:15px; }
.tabs button.on { color:var(--fg); font-weight:700; }
label { display:block; margin:10px 0; font-size:14px; color:var(--mute); }
input, select { display:block; width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:16px; }
button { font:inherit; cursor:pointer; }
.primary { width:100%; padding:12px; border:0; border-radius:8px; background:var(--pri); color:#fff; font-weight:700; margin-top:8px; }
.link { background:none; border:0; color:var(--mute); text-decoration:underline; }
.msg { min-height:1.4em; }
.msg.err { color:var(--red); } .msg.ok { color:var(--grn); }
.hint { color:var(--mute); font-size:13px; }
.seg { display:flex; gap:6px; }
.seg button { flex:1; padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--mute); }
.seg button.on { color:#fff; border-color:var(--pri); background:#1e3a8a; }
h2 { font-size:16px; margin:16px 0 6px; }
ul { margin:0; padding-left:18px; }
.cat { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; }
.card.red { border-color:var(--red); }
.card .row { display:flex; justify-content:space-between; gap:8px; }
.card .amt { font-weight:700; font-variant-numeric:tabular-nums; }
.diff { color:var(--red); font-weight:700; }
.ok { color:var(--grn); }
.yel { color:var(--yel); }
.risk { color:var(--red); font-size:14px; }
.entries { margin-top:8px; font-size:14px; }
.entries li { display:flex; justify-content:space-between; gap:6px; }
.entries .void { text-decoration:line-through; color:var(--mute); }
/* P1.5 — 홈 항목 2줄(제목 굵게 / 금액·차이 작게) · 간격 12px · 아이콘 왼쪽 */
.items { list-style:none; margin:0; padding:0; }
.item { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; margin:0 0 12px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.item .ico { flex:0 0 22px; text-align:center; line-height:1.45; }
.item .txt { display:flex; flex-direction:column; min-width:0; }
.item .t { font-weight:700; color:var(--fg); }
.item .s { font-size:13px; color:var(--mute); margin-top:3px; }
.tap { cursor:pointer; }
.item.tap:active, .cat.tap:active, .sec-head:active { background:#1c2440; }
.cat { padding:10px 2px; }
.red-n { color:var(--red); font-size:13px; }
/* 채무현황 섹션 */
.sec { margin:10px 0; border:1px solid var(--line); border-radius:10px; background:#10162a; }
.sec-head { display:flex; width:100%; align-items:center; gap:8px; padding:12px; background:none; border:0; color:var(--fg); text-align:left; }
.sec-head .chev { color:var(--mute); width:14px; }
.sec-head .nm { font-weight:700; }
.sec-head .cnt { flex:1; font-size:13px; }
.sec-head .sum { font-weight:700; font-variant-numeric:tabular-nums; }
.sec-body { padding:0 8px 4px; }
.inst { margin-top:2px; }
.inst-none { color:var(--mute); font-size:12px; }
.card.focus { box-shadow:0 0 0 2px var(--pri); }
.back { display:block; margin:0 0 6px; }
/* 급여 */
.pay-total { display:flex; justify-content:space-between; align-items:center; padding:12px; margin:4px 0 8px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.pay-total b { font-size:18px; font-variant-numeric:tabular-nums; }
.badge { font-weight:400; font-size:12px; color:var(--mute); }
.small { font-size:12px; }
.row.sub { font-size:14px; color:var(--mute); }
.card.gone { opacity:.92; }
/* 급여 재직/퇴사 구분 — 10/31 */
.pay-split { display:flex; gap:8px; align-items:baseline; padding:2px 4px 6px; font-size:15px; }
.pay-split b { font-size:18px; }
.pay-split .sep { color:var(--mute); }
.pay-gone { margin:10px 0 12px; }
.pay-gone > summary { font-size:15px; font-weight:700; padding:10px 2px; color:var(--mute); }
.mini { margin-top:10px; padding-top:8px; border-top:1px dashed var(--line); }
.months { list-style:none; padding:0; }
.months li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }
.months li form { flex-basis:100%; }
h3 { font-size:14px; margin:10px 0 4px; color:var(--mute); }
/* 되돌리기(상쇄 줄) · 압류 현황(상태 표) — 크림이 10/31 15:47 ②③ */
.entries .ea { white-space:nowrap; }
.entries .undone > span:first-child { color:var(--mute); }
.entries .rev { font-size:13px; padding:0 0 0 6px; }
.entries li.rev-li { display:block; }
/* 채무현황 카드 내역: 되돌린 원 줄+상쇄 줄 묶음(기본 숨김 · 펼치면 회색) — 이 카드 안에서만 */
#view-debts .card .entries .rev-more { font-size:13px; padding:6px 0 0; }
#view-debts .card .entries .rev-pairs li, #view-debts .card .entries .rev-pairs li .badge { color:var(--mute); }
.sz { margin:14px 0 10px; border:1px solid var(--red); border-radius:10px; background:#10162a; }
.sz-t { width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.sz-t th { text-align:left; color:var(--mute); font-weight:400; border-bottom:1px solid var(--line); padding:3px 4px 3px 0; }
.sz-t td { padding:4px 4px 4px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.sz-t td:first-child { white-space:nowrap; }
.sz-t td:nth-child(3) { white-space:nowrap; font-variant-numeric:tabular-nums; }
.sz-t tr.none td { color:var(--mute); }
/* 주문 화면(orders.js) — 버튼은 엄지 높이 44px */
.po-tabs { overflow-x:auto; margin:8px 0; }
.po-tabs button { flex:1 0 auto; min-height:40px; white-space:nowrap; }
.po-band { margin:6px 0; padding:8px 10px; border:1px solid var(--red); border-radius:8px; color:var(--red); font-weight:700; }
.po-acts { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; flex-wrap:wrap; }
.po-btn { min-height:44px; min-width:76px; padding:0 14px; border-radius:8px; border:1px solid var(--line); background:#1c2440; color:var(--fg); }
.po-btn.pri { background:var(--pri); border-color:var(--pri); color:#fff; font-weight:700; }
.po-btn.on { box-shadow:0 0 0 2px var(--yel); }
.po-row > span:first-child { flex:0 0 auto; white-space:nowrap; }   /* 긴 값이 와도 칸 이름(원가 등)이 세로로 꺾이지 않게 */
.po-row span:last-child { text-align:right; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.chip { min-height:36px; padding:0 10px; border-radius:16px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:14px; }
.chip.on { border-color:var(--pri); background:#1e3a8a; }
.po-form { border-color:var(--pri); }
/* hidden 속성은 브라우저 기본값(display:none)일 뿐이라 위의 label{display:block}·.tabs{display:flex} 가 이긴다.
   그래서 PIN '입력' 화면에도 '한 번 더' 칸이 보여 매번 'PIN 만들기' 처럼 보였다(대표 폰 실측 10/31). 맨 끝 + !important. */
[hidden] { display:none !important; }