:root {
  --bg:#fff; --ink:#111; --panel:#f5f5f5; --panel-2:#ebebeb; --line:#e2e2e2;
  --muted:#707070; --volt:#d8fc00; --volt-ink:#111; --danger:#e5484d;
  --font:"Apple SD Gothic Neo","Pretendard","Malgun Gothic",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{--bg:#0a0a0a;--ink:#fff;--panel:#161616;--panel-2:#202020;--line:#2a2a2a;--muted:#8f8f8f;--volt:#d8fc00;--volt-ink:#111;}}

*{box-sizing:border-box;}
html,body{margin:0;overscroll-behavior-y:none;}/* iOS 러버밴드/스크롤체이닝 억제 → sticky 헤더 흔들림 완화 */
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.45;}
/* 드로어 열렸을 때 배경 스크롤 잠금(배경 흔들림 방지) */
html.menu-open,html.menu-open body{overflow:hidden;height:100%;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* 레이아웃 */
.appbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border-bottom:2px solid var(--ink);transform:translateZ(0);-webkit-backface-visibility:hidden;}/* 자체 레이어로 승격 → iOS 모멘텀 스크롤 중 헤더 지터 방지 */
.brand{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:18px;}
.brand .v{background:var(--volt);color:var(--volt-ink);padding:0 4px;}
.appbar .sp{flex:1;}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 90px;}
.back{background:none;border:0;font-weight:800;color:var(--muted);font-size:13px;padding:6px 0;text-transform:uppercase;letter-spacing:.04em;}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);background:var(--bg);color:var(--ink);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:13px;padding:11px 16px;border-radius:0;}
.btn.primary{background:var(--ink);color:var(--bg);}
.btn.volt{background:var(--volt);color:var(--volt-ink);border-color:var(--ink);}
.btn.sm{padding:6px 10px;font-size:12px;}
.btn.block{width:100%;}
.btn.ghost{border-color:var(--line);color:var(--muted);}
.btn.mbtn{background:transparent;border-color:var(--accent);color:var(--accent-ink);} /* 몰빵=실행 액션(외곽선). 솔리드 채움은 '반영됨' 상태로 오인되므로 지양 */
.btn.danger{border-color:var(--danger);color:var(--danger);}
.btn:disabled{opacity:.5;cursor:default;}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.row.end{justify-content:flex-end;}

/* 폼 */
.field{margin:12px 0;}
.field label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;}
.input,select{width:100%;border:2px solid var(--ink);background:var(--bg);color:var(--ink);padding:11px 12px;font-size:15px;font-family:inherit;border-radius:0;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid2>*{min-width:0;}/* date input 등 내재폭 넘침 방지 → 박스 겹침 해결 */
.grid2 .input{width:100%;min-width:0;-webkit-appearance:none;appearance:none;}
.seg{display:flex;border:2px solid var(--ink);}
.seg span{flex:1;text-align:center;padding:9px;font-size:12.5px;font-weight:800;text-transform:uppercase;cursor:pointer;}
.seg span.on{background:var(--accent);color:#fff;}/* 선택 세그 = 진한 파랑 */
.seg span+span{border-left:2px solid var(--ink);}

/* 카드/타이틀 */
.h1{font-size:clamp(28px,7vw,44px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin:6px 0 16px;}
.h2{font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin:22px 0 12px;display:flex;align-items:center;gap:10px;}
.card{border:2px solid var(--ink);margin:12px 0;}
.card .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--panel);border-bottom:2px solid var(--ink);}
.card .bd{padding:12px 14px;}
.muted{color:var(--muted);}
.pill{font-family:var(--mono);font-size:11px;font-weight:700;border:1.5px solid var(--ink);padding:3px 8px;}
.tag{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border:1.5px solid var(--ink);}

/* 방 목록 */
.trip{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);padding:14px;margin:10px 0;cursor:pointer;}
.trip:hover{background:var(--panel);}
.trip .nm{font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:-.01em;}
.trip .mt{font-size:12px;color:var(--muted);margin-top:2px;}
.trip.pending{cursor:default;border-style:dashed;opacity:.75;}
.trip.pending:hover{background:transparent;}
.pendtag{font-size:11px;font-weight:800;text-transform:uppercase;border:1.5px solid var(--muted);color:var(--muted);padding:2px 7px;white-space:nowrap;}

/* 참가 승인 대기(방장) */
.joinreqs{border:2px solid var(--ink);margin-top:12px;padding:10px 12px;background:var(--panel);}
.joinreqs .jrhd{font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px;}
.joinreqs .jrn{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;background:var(--volt);color:var(--volt-ink);border-radius:9px;font-size:11px;margin-left:4px;}
.jrrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line,rgba(0,0,0,.12));}
.jrrow:first-of-type{border-top:0;}
.jrrow .jrname{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jrbtns{display:flex;gap:6px;flex-shrink:0;}

/* 참여자 */
.people{display:flex;gap:6px;flex-wrap:wrap;}
.avatar{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;text-transform:uppercase;padding:4px 10px 4px 5px;border:1.5px solid var(--ink);}
.dot{width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:10px;font-weight:800;}
.avatar.pool .dot{background:var(--volt);color:var(--volt-ink);}
.avatar .x{margin-left:2px;color:var(--danger);font-weight:900;cursor:pointer;}

/* 일자 탭 */
.daytabs{display:flex;overflow-x:auto;border:2px solid var(--ink);}
.daytab{flex:0 0 auto;padding:10px 14px;border-right:1px solid var(--line);cursor:pointer;min-width:80px;}
.daytab:last-child{border-right:0;}
.daytab .d{font-size:13px;font-weight:900;text-transform:uppercase;}
.daytab .s{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px;}
.daytab.on{background:var(--volt);}
.daytab.on .d{color:#111;}
.daytab.on .s{color:rgba(0,0,0,.55);}

/* 영수증 아코디언 */
.rcpt{border:2px solid var(--ink);margin:10px 0;}
.rcpt .rh{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;}
.rcpt .place{font-weight:900;text-transform:uppercase;font-size:14.5px;}
.rcpt .meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;}
.rcpt .rt{margin-left:auto;font-family:var(--mono);font-weight:800;}
.rcpt .chev{color:var(--muted);width:14px;text-align:center;}
.rcpt:not(.open) .rh{border-bottom:0;}
.item{padding:10px 13px;border-top:1px solid var(--line);}
.item.broken{box-shadow:inset 3px 0 0 var(--danger);}
.item .it{display:flex;justify-content:space-between;gap:8px;}
.item .nm{font-weight:700;}
.item .am{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap;}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;align-items:center;}
.chip{font-size:12px;font-weight:800;text-transform:uppercase;padding:5px 11px;border:1.5px solid var(--ink);background:var(--bg);cursor:pointer;user-select:none;}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}/* 선택 칩 = 진한 파랑 통일(옅은 파랑 제거) */
.chip.allc{border-style:dashed;}
/* 지출 상세 부담자 칩: 선택=진한 파랑 솔리드(흰 글씨) / 미선택=옅은 회색 → 한눈에 구분 */
.rcpt .chips .chip{text-transform:none;border:1.5px solid var(--line);background:var(--bg);color:var(--muted);font-weight:700;}
.rcpt .chips .chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:800;box-shadow:0 2px 6px rgba(49,130,246,.28);}
.rcpt .chips .chip.allc{background:var(--panel-2);border-style:dashed;border-color:var(--line);color:var(--accent-ink);}
.chips-lbl{font-size:11px;font-weight:800;color:var(--muted);margin-right:2px;align-self:center;}
/* 지출폼: 선택된 N빵/지정·부담자 이름칩 = 진한 파랑(옅은 파랑 → 찐하게) · 상세뷰와 통일 */
.splitmode .chip.on,.membchips .chip.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(49,130,246,.25);}
.item.nohead{padding-top:2px;}
.item.nohead .chips{margin-top:0;}
.hint{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto;}
.warn{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--danger);margin-left:auto;}
.warnbadge{background:var(--danger);color:#fff;font-family:var(--mono);font-size:10px;font-weight:800;padding:2px 6px;}

/* 정산 */
.settle{border:2px solid #111;background:#111;color:#fff;}
.settle .sh{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.18);font-weight:900;text-transform:uppercase;}
.tf{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.14);font-weight:700;}
.tf:last-child{border-bottom:0;}
.tf .arw{color:var(--volt);font-weight:900;}
.tf .amt{margin-left:auto;font-family:var(--mono);font-weight:800;background:var(--volt);color:var(--volt-ink);padding:3px 9px;}
.settle .dot{background:#fff;color:#111;}
.settled{padding:16px;text-align:center;font-weight:900;text-transform:uppercase;color:var(--volt);}

/* 리포트 */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);}
.tile{padding:14px;border-right:1px solid var(--line);}
.tile:last-child{border-right:0;}
.tile .k{font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--muted);}
.tile .v{font-family:var(--mono);font-size:18px;font-weight:800;margin-top:5px;}
@media(max-width:560px){.tiles{grid-template-columns:1fr 1fr;}.tile{border-bottom:1px solid var(--line);}}
table.matrix{width:100%;border-collapse:collapse;font-family:var(--mono);font-variant-numeric:tabular-nums;}
table.matrix th,table.matrix td{padding:8px 10px;text-align:right;font-size:12.5px;border-bottom:1px solid var(--line);white-space:nowrap;}
table.matrix th.w,table.matrix td.w{text-align:left;font-family:var(--font);font-weight:800;text-transform:uppercase;}
table.matrix thead th{border-bottom:2px solid var(--ink);color:var(--muted);font-size:10.5px;text-transform:uppercase;}
.scroll{overflow-x:auto;}

/* 어드민 로그 */
/* 어드민 운영 현황 지표 그리드 */
.astat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.astat-c{background:var(--panel-2);border-radius:12px;padding:12px 6px;text-align:center;}
.astat-c b{display:block;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.02em;}
.astat-c span{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-top:3px;}
.astat-c em{display:block;font-style:normal;font-size:9.5px;font-weight:700;color:var(--accent);margin-top:2px;}
.hdrow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
/* 미니 스파크(막대) */
.astat-spark{margin-top:12px;}
.astat-sl{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px;}
.spark{display:flex;align-items:flex-end;gap:2px;height:40px;}
.spark i{flex:1;min-width:0;border-radius:2px 2px 0 0;opacity:.85;}
/* 성장 상세 — 선형 그래프 카드 */
.lchart{width:100%;height:auto;display:block;margin:4px 0;}
.lc-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;}
.lc-yl{fill:var(--muted);font-size:9px;font-family:var(--mono);font-weight:700;}
.lc-vl{font-size:10px;font-weight:800;font-family:var(--mono);}
.gm-top{display:flex;align-items:baseline;gap:7px;margin-bottom:4px;}
.gm-total{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);}
.gm-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-top:2px;}
.gm-deltas{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.gm-d{display:flex;align-items:center;gap:7px;font-size:13px;background:var(--panel-2);border-radius:10px;padding:9px 12px;}
.gm-d > span:first-child{font-weight:800;color:var(--ink);min-width:76px;}
.gm-d b{font-weight:800;color:var(--accent-ink);font-variant-numeric:tabular-nums;}
.gm-d em,.astat em{font-style:normal;}
.gm-d em.up,.up{color:#12b886;font-weight:800;margin-left:auto;}
.gm-d em.dn,.dn{color:var(--danger);font-weight:800;margin-left:auto;}
.gm-d em.flat,.flat{color:var(--muted);margin-left:auto;}
/* 감사 로그 — 앱 소프트 톤에 맞춘 카드 행 + 레벨 pill */
.h2row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.log{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;background:var(--panel);margin-bottom:7px;box-shadow:0 1px 2px rgba(30,45,80,.03);}
.log.err{border-color:rgba(229,72,77,.4);background:rgba(229,72,77,.05);}
.log .lv{font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.02em;padding:2px 8px;border-radius:7px;background:var(--volt);color:var(--volt-ink);}
.log .lv.error{background:rgba(229,72,77,.13);color:var(--danger);}
.log .muted{font-family:var(--mono);font-size:11px;color:var(--muted);}
.log b{font-weight:800;color:var(--ink);}
.log > span:not(.lv):not(.muted){flex-basis:100%;font-family:var(--mono);font-size:11.5px;color:var(--ink);word-break:break-all;line-height:1.4;}

/* 지출 편집 */
.itemedit{border:2px solid var(--ink);padding:10px;margin:8px 0;}
.itemedit .top{display:grid;grid-template-columns:1fr 96px 34px;gap:8px;}

/* fab */
.fab{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:2px solid var(--ink);padding:10px 16px;display:flex;gap:8px;max-width:760px;margin:0 auto;}

/* toast */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 18px;font-weight:800;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:100;max-width:90%;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--danger);}

.center{min-height:70vh;display:flex;flex-direction:column;justify-content:center;}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:13px;padding:8px;}
.empty{text-align:center;color:var(--muted);padding:30px 0;}

/* ── 3-dot 메뉴 버튼 & 드로어 ─────────────────────── */
.menub{display:flex;flex-direction:column;justify-content:center;gap:4px;width:26px;height:26px;padding:0;background:none;border:0;margin-left:-2px;}
.menub span{display:block;height:2.5px;width:22px;background:var(--ink);}
/* 날짜 입력 달력 아이콘 — 다크모드에서 어두워 안 보이는 것 반전 */
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:1;}
@media (prefers-color-scheme: dark){input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{filter:none;}
/* 당겨서 새로고침 — 상단바(z-index10) 뒤에서 나오는 링 스피너(z-index9) + 본문(.wrap)만 내려감 */
#ptr{position:fixed;top:9px;left:50%;transform:translateX(-50%);z-index:9;width:34px;height:34px;border-radius:50%;background:var(--panel);box-shadow:0 2px 8px rgba(30,45,80,.16);display:grid;place-items:center;opacity:0;pointer-events:none;}
#ptr .ring{width:19px;height:19px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;transition:transform .05s linear;}
#ptr.spinning .ring{transition:none;animation:ptrspin .6s linear infinite;}
@keyframes ptrspin{to{transform:rotate(360deg);}}
#menu{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .15s;overscroll-behavior:contain;}
#menu.open{opacity:1;pointer-events:auto;}
#menu .drawer{position:absolute;top:0;left:0;bottom:0;width:80%;max-width:300px;background:var(--bg);border-right:2px solid var(--ink);padding:16px 12px;transform:translateX(-102%);transition:transform .2s ease;display:flex;flex-direction:column;gap:2px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
#menu.open .drawer{transform:none;}
#menu .dhead{padding:8px 12px 14px;font-size:16px;border-bottom:2px solid var(--ink);margin-bottom:8px;}
#menu .mi{text-align:left;background:none;border:0;color:var(--ink);font-weight:800;font-size:15px;padding:14px 12px;border-bottom:1px solid var(--line);}
#menu .mi:active{background:var(--panel);}
#menu .mi.danger{color:var(--danger);}
#menu .dsep{flex:1;min-height:8px;}

/* ── 라이트박스 (사진/영상 크게) ──────────────────── */
#lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:16px;}
#lightbox.open{display:flex;}
#lightbox img,#lightbox video{max-width:100%;max-height:100%;object-fit:contain;}

/* ── 홈 ───────────────────────────────────────────── */
.homehero{border:2px solid var(--ink);padding:22px 18px;margin:8px 0 4px;}
.homehero .hh-t{font-weight:900;font-size:20px;letter-spacing:-.01em;}
.homehero .hh-s{font-size:13px;margin:4px 0 16px;}
.trip.big{border-width:2px;border-color:var(--ink);background:var(--volt);color:var(--volt-ink);}
.trip.big .nm{font-size:19px;color:var(--volt-ink);}
.trip.big .mt{color:rgba(0,0,0,.6);}
.trip.big .chev{color:var(--volt-ink);}

/* ── 페이지네이션 ─────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;}
.pager .mono{font-weight:800;font-size:13px;}

/* ── 사진/영상 그리드 ─────────────────────────────── */
.mlabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.photos{display:flex;flex-wrap:wrap;gap:8px;}
.photos .ph{position:relative;width:76px;height:76px;border:1px solid var(--line);overflow:hidden;background:var(--panel);}
.photos .ph img,.photos .ph video{width:100%;height:100%;object-fit:cover;display:block;}
.photos .ph .vbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:20px;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none;}
.photos .ph .phx{position:absolute;top:2px;right:2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);color:#fff;font-weight:900;font-size:14px;line-height:1;}
.photos .addph{width:76px;height:76px;border:2px dashed var(--line);background:none;color:var(--muted);font-size:11px;font-weight:800;text-align:center;line-height:1.2;}

/* ── 동행: 별칭 칩 · 병합 · 검색결과 ─────────────────── */
.avatar.alias{border-style:dashed;}
.avatar .mg{margin-left:4px;cursor:pointer;font-weight:900;color:var(--muted);}
.avatar .mg:active{color:var(--ink);}
.srch{border:1px solid var(--line);margin-top:8px;padding:6px 10px;background:var(--panel);}
.srow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);}
.srow:last-child{border-bottom:0;}

/* ── 홈 빈 상태 (겁나 나이키) ───────────────────────── */
.emptyhero{padding:30px 2px 10px;}
.eh-kicker{font-weight:900;letter-spacing:.24em;font-size:11px;color:var(--muted);text-transform:uppercase;}
.eh-big{font-weight:900;font-style:italic;font-size:clamp(44px,13.5vw,74px);line-height:.9;letter-spacing:-.04em;margin:12px 0 16px;}
.eh-big .hl{background:var(--volt);color:var(--volt-ink);padding:0 8px;font-style:italic;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.eh-sub{color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.01em;margin:0 0 22px;line-height:1.4;}

/* ── 지출 폼 가독성 ─────────────────────────────────── */
.cap{font-size:11.5px;color:var(--muted);line-height:1.5;margin:8px 0 4px;}
.h2 .hint{font-size:12px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;}
.itemedit{background:var(--panel);}

/* ── 위시리스트(TODO) ───────────────────────────────── */
.todo{border:2px solid var(--ink);padding:12px;margin:10px 0;}
.todo.done{opacity:.55;}
.todo.done .todo-text{text-decoration:line-through;}
.todo-row{display:flex;align-items:flex-start;gap:10px;}
.todo .check{width:28px;height:28px;flex:0 0 auto;border:2px solid var(--ink);background:var(--bg);font-weight:900;color:var(--volt-ink);display:grid;place-items:center;cursor:pointer;font-size:15px;}
.todo.done .check{background:var(--volt);}
.todo-body{flex:1;min-width:0;}
.todo-text{font-weight:700;font-size:15px;line-height:1.4;word-break:break-word;}
.todo-body .tag{margin-top:6px;display:inline-block;}
.photos .ph .phtitle{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.62);color:#fff;font-size:9px;font-weight:700;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.check.ro{cursor:default;}

/* ── Nike.com 리프레시: 라운드 + 은은한 카드 배경 + 부드러운 명암 ── */
.appbar{border-bottom:1px solid var(--line);}
.btn{border-radius:999px;border-width:1.5px;}
.input,select{border:1.5px solid var(--line);border-radius:12px;}
.input:focus,select:focus{outline:none;border-color:var(--ink);}
.seg{border:1.5px solid var(--line);border-radius:999px;overflow:hidden;}
.seg span+span{border-left:1.5px solid var(--line);}
.card,.rcpt,.todo,.itemedit,.tiles,.daytabs,.srch{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;}
.card,.rcpt,.todo,.itemedit{background:var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.05);}
.card .hd{border-bottom:1px solid var(--line);}
.trip{border:1.5px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.05);}
.trip:hover{box-shadow:0 6px 18px rgba(0,0,0,.10);}
.trip.big{border-color:var(--ink);}
.settle{border:none;border-radius:16px;overflow:hidden;}
.chip,.pill,.tag,.avatar{border-radius:999px;}
.avatar{border:1.5px solid var(--line);}
.check{border-radius:9px;}
.homehero{border:1.5px solid var(--line);border-radius:20px;background:var(--panel);}
.photos .ph,.photos .addph{border-radius:12px;}
.tile{border-right:1px solid var(--line);}

/* ── 리프레시 v2: 여백↑ · 그림자는 호버만 · 홈 형광 상품카드 ── */
body{line-height:1.5;}
.wrap{padding:22px 18px 104px;}
.card .bd{padding:16px;}
.card .hd{padding:14px 16px;}
.h2{margin:30px 0 14px;}
/* 평소엔 평평, 클릭 가능한 방 카드만 호버 때 떠오름 */
.card,.rcpt,.todo,.itemedit{box-shadow:none;}
.trip{padding:18px;box-shadow:none;transition:box-shadow .18s ease, transform .18s ease;}
.trip:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-1px);}
/* 홈 진행중 = 형광 상품카드 */
.trip.big{padding:26px 22px;border:none;background:linear-gradient(135deg,#e6ff3d 0%,var(--volt) 55%,#c8ec00 100%);box-shadow:0 8px 30px rgba(180,220,0,.28);}
.trip.big:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(180,220,0,.40);}
.trip.big .nm{font-size:26px;letter-spacing:-.02em;color:var(--volt-ink);}
.trip.big .mt{font-size:13px;color:rgba(0,0,0,.62);margin-top:6px;}
.trip.big .chev{font-size:22px;color:var(--volt-ink);}

/* ── 아카이브 배너 ─────────────────────────────────── */
.archbanner{background:var(--panel-2);border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:800;font-size:13px;margin:0 0 14px;}
.todo .mt{color:var(--muted);font-size:12px;}

.todolink{color:var(--ink);font-weight:800;}
.todolink:active{opacity:.6;}

/* ── 전역 위시: 월 칩 + 한 줄 아코디언 + 원형 체크 ── */
.mbar{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;}
.mchip{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:800;padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;color:var(--muted);}
.mchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.wl-list{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);}
.wl{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--line);}
.wl.open{background:var(--panel-2);}
.wl.done .wl-t{text-decoration:line-through;color:var(--muted);}
.wl-chk{width:24px;height:24px;flex:0 0 auto;border:2px solid var(--line);border-radius:999px;background:transparent;font-weight:900;font-size:13px;color:var(--volt-ink);display:grid;place-items:center;cursor:pointer;}
.wl-chk.on{background:var(--accent);border-color:var(--accent);color:#fff;}/* 위시 체크 = 진한 파랑 */
.wl-main{flex:1;min-width:0;cursor:pointer;}
.wl-t{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wl-sub{font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wl-go{flex:0 0 auto;width:30px;height:30px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-weight:900;cursor:pointer;}
.wl-x{flex:0 0 auto;background:none;border:0;color:var(--danger);font-weight:900;font-size:18px;cursor:pointer;padding:2px 4px;}
.wl-x:disabled,.wl-chk:disabled{opacity:.4;cursor:default;}
.wl-exp{padding:2px 14px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);}

.rb{font-size:11px;margin:0 1px;}

.wl-sub{white-space:normal;overflow:visible;line-height:1.4;}

/* ── 초대코드 박스 · 유효기간 ─────────────────────── */
.invitebox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
.invitebox .pill{cursor:pointer;}
.invitebox .exp{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em;}
.invitebox .exp.expired{color:var(--danger);}

.krwbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;}

/* ── 항목 금액 통화단위 프리픽스 ─────────────────── */
.itemedit .top{grid-template-columns:1fr 128px 34px;}
.amtwrap{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);}
.amtwrap .curpfx{padding:0 8px;align-self:stretch;display:flex;align-items:center;font-family:var(--mono);font-weight:800;font-size:12.5px;color:var(--muted);background:var(--panel-2);}
.amtwrap input{border:0 !important;border-radius:0 !important;flex:1;min-width:0;padding-left:8px;}

/* ── 정산 이체 · 완료/취소 ─────────────────────────── */
.tf{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-bottom:1px solid rgba(127,127,127,.16);}
.tf:last-child{border-bottom:0;}
.tfmain{display:flex;align-items:center;gap:8px;}
.tfnm{font-weight:700;}
.tfmain .arw{opacity:.55;}
.tfmain .amt{margin-left:auto;font-family:var(--mono);font-weight:800;}
.tf.sdone .amt{text-decoration:line-through;opacity:.5;}
.tf.sdone .tfnm{opacity:.6;}
.tfact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sbadge{font-size:12px;font-weight:800;color:#1a9d5a;cursor:pointer;}
.tfmuted{font-size:12px;opacity:.5;}
.slog{font-family:var(--mono);font-size:11px;line-height:1.7;opacity:.8;padding:7px 10px;background:rgba(127,127,127,.13);border-radius:8px;}
.settle .sbadge{color:var(--volt);}
.settle .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28);}
.settle .tfmuted{color:rgba(255,255,255,.6);}

.settle .sh{display:flex;align-items:center;justify-content:space-between;gap:8px;}

.archbanner.lock{background:rgba(255,90,90,.14);color:#ff6b6b;border:1px solid rgba(255,90,90,.3);}

/* ── 통화별 정산 그룹 · KRW 반영 ─────────────────── */
.curgroup{margin-bottom:6px;}
.curgroup + .curgroup{border-top:1px solid rgba(127,127,127,.18);padding-top:8px;margin-top:8px;}
.curhead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:800;font-size:13px;padding:4px 2px 2px;opacity:.92;}
.curtitle{font-weight:800;font-size:18px;margin:22px 0 8px;letter-spacing:-.01em;}
.tfmain .toarw{color:var(--muted);font-weight:400;margin:0 2px;}
.settle.light{background:transparent;padding:0;}
.settle.light .curhead,.settle.light .tfnm,.settle.light .amt{color:var(--ink);}
.settle.light .tf{border-color:var(--line);}

/* ── 정산 이체 정렬 개선 (이름 왼쪽 / 금액·버튼 오른쪽) ── */
.tf{padding:13px 16px;}
.tf-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.tf-left{flex:1;min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:700;line-height:1.45;}
.tf-left .arw{opacity:.5;font-weight:400;}
.tf-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0;text-align:right;}
.tf .amt{font-family:var(--mono);font-weight:800;white-space:nowrap;}
.tf.sdone .amt{text-decoration:line-through;opacity:.5;}
.tf.sdone .tfnm{opacity:.55;}
.tfact{display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.curhead{padding:11px 4px 7px;border-bottom:1px solid rgba(127,127,127,.12);margin-bottom:2px;}

/* ── 정산 이체(TODO식 체크 + 정렬) · 최종 ─────────────── */
.tf{padding:12px 14px;border-bottom:1px solid rgba(127,127,127,.16);}
.tf:last-child{border-bottom:0;}
.tf-row{display:flex;align-items:center;gap:11px;}
.tf-chk{flex:0 0 auto;width:26px;height:26px;border-radius:999px;border:2px solid rgba(140,140,150,.5);background:transparent;color:transparent;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;cursor:pointer;padding:0;line-height:1;}
.tf-chk.on{background:var(--volt);border-color:var(--volt);color:#141400;}
.tf-chk.ro{cursor:default;}
.tf-left{flex:1;min-width:0;}
.tfnames{display:flex;align-items:center;gap:6px;font-weight:700;flex-wrap:wrap;line-height:1.3;}
.tfnames .arw{opacity:.5;font-weight:400;}
.tf-info{margin-top:3px;}
.tf-by{font-size:11px;color:var(--muted);cursor:pointer;}
.tf-amt{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:800;white-space:nowrap;font-size:13.5px;}
.tf-amt .loc{min-width:62px;text-align:right;opacity:.72;}
.tf-amt .toarw{opacity:.4;font-weight:400;}
.tf-amt .krw{min-width:84px;text-align:right;}
.tf.sdone .tf-amt{text-decoration:line-through;opacity:.5;}
.tf.sdone .tfnm{opacity:.55;}
.settle .tf-amt .krw{color:var(--volt);}
.settle .tf-amt .loc{color:rgba(255,255,255,.72);}
.settle .tfnm{color:#fff;}
.settle.light{background:transparent;padding:0;}
.settle.light .tf-amt .krw{color:var(--ink);}
.settle.light .tf-amt .loc{color:var(--muted);}
.settle.light .curhead,.settle.light .tfnm,.settle.light .tf-by{color:var(--ink);}
/* 리포트 카테고리/동행 리스트 */
.bigtotal{font-size:23px;font-weight:800;margin:2px 0 6px;letter-spacing:-.01em;}
.rlist{display:flex;flex-direction:column;}
.rrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);}
.rrow:last-child{border-bottom:0;}
.rrow .mono{font-weight:800;text-align:right;white-space:nowrap;}

/* ── 정산 이체 좌우 2열 확정 (좌: 체크+이름 / 우: 금액) ── */
.tf-row{justify-content:flex-start !important;align-items:center;}
.tf-chk{flex:0 0 26px;}
.tf-left{flex:1 1 auto;min-width:0;text-align:left;}
.tf-amt{flex:0 0 auto;margin-left:auto;justify-content:flex-end;}

/* ── FIX: .tf(세로 flex)가 옛 align-items:center로 가로 중앙정렬되던 것 → stretch ── */
.tf{align-items:stretch !important;}
.tf-row{width:100%;}
.tf-left{flex:1 1 auto;min-width:0;text-align:left;}

/* ── 리포트 카테고리 %바 · 소제목 · 이름 줄바꿈 안전 ── */
.h3{font-size:13px;font-weight:800;opacity:.7;margin:16px 0 8px;text-transform:uppercase;letter-spacing:.03em;}
.catrow{margin:9px 0;}
.catline{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.catline .mono{font-weight:800;white-space:nowrap;}
.catbar{height:8px;background:var(--panel-2);border-radius:999px;margin-top:5px;overflow:hidden;}
.catbar>div{height:100%;background:var(--volt);border-radius:999px;}
.tfnm{overflow-wrap:anywhere;word-break:break-word;}

/* ── PC 전용 차단 화면 (모바일 전용 안내) ─────────────── */
.pcblock{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;gap:14px;}
.pcb-emoji{font-size:64px;line-height:1;}
.pcb-title{font-size:26px;font-weight:800;letter-spacing:-.02em;}
.pcb-sub{font-size:15px;color:var(--muted);line-height:1.6;}
.pcb-sub b{color:var(--ink);font-family:var(--mono);}

/* ── 관리자 열람 인지 (관리자 화면 한정 · 방 사용자는 못 봄) ── */
.robanner{background:rgba(255,95,95,.13);color:#ff7a7a;border:1px solid rgba(255,95,95,.4);border-radius:12px;padding:11px 14px;font-size:13px;font-weight:700;line-height:1.5;margin:0 0 14px;}
.robanner b{color:#ff5a5a;}
.wrap.roview{box-shadow:inset 0 0 0 2px rgba(255,95,95,.22);border-radius:18px;}
@media (prefers-color-scheme: light){ .robanner{background:rgba(220,40,40,.08);color:#c62828;border-color:rgba(220,40,40,.3);} .robanner b{color:#b71c1c;} }

/* ── 비회원 열람 화면 ─────────────────────────────── */
.glogo{font-weight:900;font-style:italic;font-size:20px;letter-spacing:-.02em;margin-bottom:6px;}
.glogo .hl{color:var(--volt);}
.grcpt{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:8px 0;}
.grcpt .place{font-weight:800;}
.gi{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14px;}
.gi .mono{font-weight:800;}

/* ── 비회원 일자별 그룹 ─────────────────────────────── */
.gday{margin:10px 0 16px;}
.gdayhd{display:flex;align-items:baseline;gap:8px;padding:6px 2px;border-bottom:2px solid var(--volt);margin-bottom:8px;}
.gdayhd b{font-size:16px;font-weight:900;font-style:italic;}

/* ── 비밀번호 표시 토글(눈) ─────────────────────────── */
.pwwrap{position:relative;}
.pwwrap .input{width:100%;padding-right:46px;}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:18px;line-height:1;padding:6px;}

/* ══════════════════════════════════════════════════════════════
   방 상세 리뉴얼 (2026-07) — 요약카드·⚙관리·몰빵 진입·오늘 탭
   ════════════════════════════════════════════════════════════ */
.iconbtn{background:none;border:0;font-size:20px;line-height:1;padding:4px 6px;cursor:pointer;position:relative;color:var(--ink);}
.iconbtn .badge{position:absolute;top:-1px;right:-1px;min-width:15px;height:15px;background:var(--danger);color:#fff;border-radius:8px;font-size:9px;font-weight:800;display:grid;place-items:center;padding:0 3px;}

/* 요약 카드 (내가 낼 돈 → 탭하면 리포트) */
.summary{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;margin:8px 0 14px;cursor:pointer;box-shadow:0 1px 3px rgba(30,45,80,.05);transition:box-shadow .16s ease;}
.summary:hover{box-shadow:0 6px 18px rgba(30,45,80,.1);}
.summary .s-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;}
.summary .s-name{font-size:16px;font-weight:800;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.summary .s-avs{display:flex;flex:none;}
.summary .s-avs .a{width:26px;height:26px;border-radius:50%;background:var(--volt);color:var(--volt-ink);display:grid;place-items:center;font-size:10px;font-weight:800;margin-left:-6px;border:2px solid var(--panel);}
.summary .s-avs .a:first-child{margin-left:0;}
.summary .s-lbl{font-size:12px;color:var(--muted);font-weight:700;}
.summary .s-net{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:28px;letter-spacing:-.02em;margin:3px 0 2px;}
.summary .s-net.dn{color:var(--danger);}
.summary .s-net.up{color:#12b886;}
.summary .s-sub{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.summary .s-tap{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--accent);font-weight:700;display:flex;justify-content:space-between;align-items:center;}

/* DAY 탭 — 둥근 카드 · 음영 · 눌림 · 가로 슬라이딩 */
.daytabs{border:0!important;border-radius:0!important;overflow:visible!important;overflow-x:auto!important;display:flex;gap:8px;padding:2px 0 4px;scrollbar-width:none;}
.daytabs::-webkit-scrollbar{display:none;}
.daytab{flex:0 0 auto;min-width:72px;border:0;border-right:0;border-radius:14px;background:var(--panel);box-shadow:0 1px 3px rgba(30,45,80,.05);padding:11px 12px;transition:transform .1s ease, box-shadow .16s ease;}
.daytab:active{transform:scale(.97);}
.daytab .d{font-size:13px;font-weight:750;text-transform:none;letter-spacing:-.01em;color:var(--ink);}
.daytab .s{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:5px;}
.daytab .amt{font-family:var(--mono);font-size:11.5px;font-weight:800;color:var(--ink);margin-top:3px;}
.daytab.on{background:var(--accent);box-shadow:0 3px 10px rgba(49,130,246,.28);}/* 선택 DAY탭 = 진한 파랑 */
.daytab.on .d{color:#fff;}
.daytab.on .s{color:#fff;opacity:.9;}
.daytab.on .amt{color:#fff;}
/* 오늘 배지 (DAY 탭) */
.daytab .today{display:inline-block;font-size:9px;font-weight:800;color:#fff;background:var(--accent);border-radius:7px;padding:0 5px;margin-left:5px;vertical-align:1px;}

/* 방 진입 카드 통일(몰빵·정산·위시) — 같은 셸: 좌 아이콘 뱃지 · 중앙 텍스트 · 우 › */
.roomlinks{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.rlink{width:100%;display:flex;align-items:center;gap:13px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:14px 15px;background:var(--panel);box-shadow:0 1px 3px rgba(30,45,80,.05);color:var(--ink);}
.rlink:active{background:var(--panel-2);}
.rlink-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;font-size:20px;border-radius:12px;background:var(--panel-2);}
.rlink-m{flex:1;min-width:0;}
.rlink-t{font-weight:700;font-size:15px;color:var(--ink);}
.rlink-s{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rlink-go{flex:none;color:var(--muted);font-size:22px;line-height:1;font-weight:400;}
.rlink.mol .rlink-ic{background:var(--volt);}
.rlink.mol .rlink-t{color:var(--accent-ink);}
.rlink .soon{flex:none;font-size:10px;font-weight:700;color:var(--accent-ink);background:var(--volt);border-radius:10px;padding:4px 9px;}

/* 요약카드 누르는 느낌 */
.summary{transition:transform .12s ease, box-shadow .16s ease;}
.summary:active{transform:scale(.99);}

/* ⚙ 관리 페이지 — 카드 로우 스타일 */
.msec{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:20px 2px 8px;}
.msec:first-of-type{margin-top:6px;}
.mgroup{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:10px;box-shadow:0 1px 3px rgba(30,45,80,.04);}
.mgrow{display:flex;align-items:center;gap:11px;padding:14px 15px;border-top:1px solid var(--line);font-size:14px;min-height:52px;}
.mgrow:first-child{border-top:0;}
.mgrow[data-act]{cursor:pointer;}
.mgrow[data-act]:active{background:var(--panel-2);}
.mgrow .dot{width:28px;height:28px;flex:none;}
.mgrow .nm{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mgrow .rt{margin-left:auto;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:10px;flex:none;}
.mgrow .rt .chev{opacity:.5;font-size:16px;}
.mgrow .mg{color:var(--muted);font-weight:700;cursor:pointer;font-size:15px;}
.mgrow .kick{color:var(--danger);font-weight:700;cursor:pointer;font-size:13px;}
.mgrow.danger .nm{color:var(--danger);}
.mgrow select.mgsel{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:13px;text-align:right;text-align-last:right;padding:0;-webkit-appearance:none;appearance:none;cursor:pointer;}
.mgadd{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px;text-align:center;color:var(--accent);font-weight:800;font-size:14px;box-shadow:0 1px 3px rgba(30,45,80,.04);margin-bottom:10px;}
.mgrow .pill{cursor:pointer;}

/* ── 리포트 리뉴얼 — 엔 주인공 · 1인당 카드 ── */
.r-hero{padding:18px;}
.r-hero .r-lbl{font-size:12px;color:var(--muted);font-weight:700;}
.r-hero .r-total{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:30px;letter-spacing:-.02em;margin:3px 0 1px;}
.r-hero .r-krw{font-family:var(--mono);font-size:12px;color:var(--muted);}
.r-hero .r-sub{font-size:11.5px;color:var(--muted);margin-top:5px;}
.r-curlabel{font-size:15px;font-weight:800;margin:22px 2px 8px;letter-spacing:-.01em;}
/* 리포트 각 섹션을 카드(음영)로 감쌈 */
.r-block{padding:16px;}
.r-sec{font-size:12px;font-weight:750;color:var(--muted);margin:0 0 13px;}
/* 일자별 상세 내역 */
.dd-day{margin-top:16px;}
.dd-day:first-child{margin-top:0;}
.dd-dh{font-size:11.5px;font-weight:800;color:var(--accent);margin-bottom:6px;letter-spacing:.02em;}
.dd-row{display:flex;align-items:center;gap:10px;padding:9px 0;}
.dd-row + .dd-row{border-top:1px solid var(--line);}
.dd-ic{width:30px;height:30px;border-radius:9px;background:var(--panel-2);display:grid;place-items:center;font-size:15px;flex:none;}
.dd-m{flex:1;min-width:0;}
.dd-pl{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-mt{font-size:10.5px;color:var(--muted);margin-top:1px;}
.dd-am{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;white-space:nowrap;}

/* ── 정산 이체: 엔 주인공 + 약 ₩ + 💸 송금 ── */
.tf-amt{flex-direction:column;align-items:flex-end;gap:1px;}
.tf-amt .loc{min-width:0;font-family:var(--mono);font-weight:800;font-size:14px;opacity:1;}
.tf-amt .krw{min-width:0;font-family:var(--mono);font-size:10px;font-weight:600;opacity:.8;}
.tf-send{flex:none;width:36px;height:36px;border-radius:11px;border:0;margin-left:10px;font-size:16px;background:var(--volt);color:var(--volt-ink);cursor:pointer;}
.tf-send:active{filter:brightness(.94);}
.settle .tf-send{background:rgba(255,255,255,.16);}
.settle .tf-amt .loc{color:#fff;}
.settle .tf-amt .krw{color:rgba(255,255,255,.6);}
.settle.light .tf-amt .loc{color:var(--ink);}
.settle.light .tf-amt .krw{color:var(--muted);}
/* 방·리포트 정산 톤 통일 — 둘 다 흰 카드 */
.settle.light{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:4px 15px;box-shadow:0 1px 3px rgba(30,45,80,.04);}
.settle.light .tf-send{background:var(--volt);color:var(--volt-ink);}
.settle.light .sbadge{color:#1a9d5a;}

/* ── 지출 입력 ⑦: 실패 노티 · 옵션 힌트 · AI 후 강조 · 날짜칩 ── */
.ai-fail{background:rgba(245,100,60,.1);color:var(--danger);border:1px solid rgba(245,100,60,.32);border-radius:12px;padding:11px 13px;font-size:12.5px;font-weight:650;line-height:1.5;margin:6px 0 4px;}
/* 확인 카드/읽은 내역 미리보기 — 영수증 해석이 애매할 때만 폼에 등장(옵셔널·게이트 아님) */
.rvcard{background:rgba(240,165,0,.09);border:1px solid rgba(240,165,0,.38);border-radius:12px;padding:12px 13px 10px;margin:6px 0 4px;display:flex;flex-direction:column;gap:9px;}
.rvcard.prev{background:var(--panel);border-color:var(--line);} /* 미리보기 = 경고가 아니라 참고 정보 → 중립 톤 */
.rv-head b{display:block;font-size:13px;color:#b45309;}
@media (prefers-color-scheme: dark){.rv-head b{color:#e8a33d;}}
.rvcard.prev .rv-head b{color:var(--ink);}
.rv-tag{font-size:10px;font-weight:800;color:var(--muted);background:var(--panel-2);border-radius:6px;padding:1px 6px;vertical-align:1px;}
.rv-head span{display:block;font-size:12px;color:var(--muted);margin-top:1px;line-height:1.45;}
.rv-items{display:flex;flex-direction:column;}
.rv-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);}
.rv-item:last-child{border-bottom:none;}
.rv-nm{flex:1;font-size:13px;font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rv-amt{font-size:13px;font-weight:800;min-width:52px;text-align:right;}
.rv-amt.neg{color:var(--danger);}
.rv-sum{font-size:12px;color:var(--muted);padding-top:2px;}
.rv-sum b{color:var(--ink);}
.rv-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.rv-apply{border:1.5px solid var(--accent);background:var(--bg);color:var(--accent-ink);border-radius:10px;padding:10px 8px;font-size:12.5px;font-weight:800;text-align:center;}
.rv-apply.ghost{border-color:var(--line);color:var(--muted);}
.rv-close{border:0;background:none;color:var(--muted);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:2px 0;align-self:flex-start;}
/* 시킨 메뉴 고르기 — 체크된 줄만 항목이 되고 나머지는 버려짐(취소선) */
.rv-pick{display:flex;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;}
.rv-pick:last-child{border-bottom:none;}
.rv-cb{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line);background:var(--bg);flex:none;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900;}
.rv-pick.on .rv-cb{background:var(--accent);border-color:var(--accent);}
.rv-pick.on .rv-cb::after{content:"✓";}
.rv-pick:not(.on) .rv-nm,.rv-pick:not(.on) .rv-amt{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(128,128,128,.45);}
.rv-qty{font-size:10px;font-weight:800;color:var(--accent-ink);background:var(--panel-2);border-radius:5px;padding:1px 5px;margin-left:5px;text-decoration:none;display:inline-block;}
.rv-splitbtn{border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:7px;padding:2px 7px;font-size:10.5px;font-weight:800;margin-left:7px;}
.rv-splitbtn.on{border-color:var(--accent);color:var(--accent-ink);}
.rv-splitprev{font-size:11px;color:var(--accent-ink);padding:2px 0 6px 28px;border-bottom:1px solid var(--line);}
/* 세부 정보 그룹 — 그룹 사이 옅은 구분선으로 리듬 정리 */
.dgrp{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.dgrp.first{border-top:none;padding-top:0;margin-top:12px;}
.dgrp .xf-l{margin-bottom:8px;}
.drow{display:flex;gap:8px;align-items:center;margin-top:8px;}
.drow .input{flex:1;}
.rv-dup{font-size:9.5px;font-weight:800;color:#b45309;background:rgba(240,165,0,.16);border-radius:5px;padding:1px 5px;margin-left:5px;text-decoration:none;display:inline-block;}
@media (prefers-color-scheme: dark){.rv-dup{color:#e8a33d;}}
.rv-scroll{max-height:240px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:0 8px;}
.rv-apply.block{grid-column:1 / -1;width:100%;}
/* 진입 2갈래 — 사진으로 추가 / 직접 입력 */
.modebtn{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:16px 18px;font-size:16px;font-weight:800;margin-top:12px;}
.modebtn span{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px;}
.modebtn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.modebtn.primary span{color:rgba(255,255,255,.85);}
/* 접기 섹션 — 나눠내기·세부 정보: 기본은 요약 한 줄, 탭하면 펼침 */
.foldhead{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.fold-sum{margin-left:auto;font-size:11.5px;font-weight:650;color:var(--muted);text-transform:none;letter-spacing:0;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fold-arr{font-size:10px;color:var(--muted);transition:transform .15s;}
.xf-fold.open .fold-arr{transform:rotate(180deg);}
/* 촬영 샷 스트립 — 찍은 영수증 썸네일 + '한 장 더'(긴 영수증은 사람이 판단, 최대 3장) */
.shotstrip{display:flex;gap:8px;margin:8px 0 2px;align-items:stretch;}
.shotthumb{width:54px;height:54px;object-fit:cover;border-radius:10px;border:1px solid var(--line);}
.shotmore{width:54px;height:54px;border:1.5px dashed var(--line);border-radius:10px;background:none;color:var(--muted);font-size:9px;line-height:1.25;font-weight:600;}
.shotmore b{font-size:9.5px;}
/* 정산 미리보기 — 항목별 나누기에서 각자 몫 실시간 표시 */
.settleprev{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:var(--panel);border-radius:11px;padding:9px 13px;margin-top:10px;}
.settleprev .sp-l{font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:.03em;}
.settleprev .sp-p{font-size:12.5px;font-weight:650;color:var(--muted);}
.settleprev .sp-p b{color:var(--ink);}
.opt{font-weight:500;color:var(--muted);font-size:10.5px;letter-spacing:0;text-transform:none;}
.field.needyou label{color:var(--accent);}
.field.needyou select,.field.needyou .seg{box-shadow:0 0 0 1.5px var(--accent);}
.datechips{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;}
.datechips .chip{flex:none;}

/* ── 지출 폼 카드형(금액 먼저) — 경계 명확 ── */
.xf{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px;margin:10px 0;box-shadow:0 1px 3px rgba(30,45,80,.04);}
.xf .xf-l{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:10px;}
.xf.needyou{box-shadow:0 0 0 1.5px var(--accent);}
.xf.needyou .xf-l{color:var(--accent);}
.xf .input{border:1px solid var(--line);}
.xf .seg{border:1px solid var(--line);}
.xf-amt{padding:16px 18px;}
.xf-amt .ah-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px;}
.xf-amt .ah-cur{border:0;background:var(--panel-2);border-radius:9px;padding:5px 9px;font-size:12px;font-weight:700;color:var(--accent-ink);font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;max-width:110px;}
.xf-amt .ah-in{display:flex;align-items:baseline;gap:6px;}
.xf-amt .ah-sym{font-size:24px;font-weight:700;color:var(--muted);}
.xf-amt .ah-amt{flex:1;min-width:0;border:0;background:transparent;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--ink);padding:0;}
.xf-amt .ah-amt:focus{outline:none;}
.xf-amt .ah-note{font-size:11px;color:var(--muted);margin-top:8px;}
.xf-adv{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:2px 15px;margin:10px 0;box-shadow:0 1px 3px rgba(30,45,80,.04);}
.xf-adv summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink);padding:14px 0;list-style:none;}
.xf-adv summary::-webkit-details-marker{display:none;}
.xf-adv summary::after{content:"▾";float:right;color:var(--muted);}
.xf-adv[open] summary::after{content:"▴";}
.xf-adv .itemedit{background:var(--bg);}
/* 위치핀 — 폼 위치 바 + 카드 📍 */
.geobar{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;}
.geobar .geo-ok{color:var(--accent);font-weight:700;}
.geobar .geo-try{color:var(--muted);font-weight:600;}
.geobar .geo-off{color:var(--muted);flex:1;min-width:0;line-height:1.4;}
.geobar .geo-map{color:var(--accent);font-weight:700;text-decoration:none;}
.geobar .geo-btn{flex:none;background:var(--volt);color:var(--accent-ink);border:0;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;}
.rc-pin{color:var(--accent);font-weight:700;cursor:pointer;}

.save-row{display:flex;gap:8px;margin:18px 0 24px;}
.save-row .btn{border-radius:14px;padding:15px;}
.save-row .savenext{flex:none;background:var(--panel);color:var(--accent-ink);font-weight:700;white-space:nowrap;}

/* ── 내 여행: 연도 이동 + 월 칩 필터 ── */
.yearbar{display:flex;align-items:center;gap:12px;margin:8px 0 10px;}
.yearbar .ybtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1;}
.yearbar .ybtn:active{background:var(--panel-2);}
.yearbar .yr{font-size:17px;font-weight:800;letter-spacing:-.01em;}
.yearbar .ythis{margin-left:auto;background:var(--volt);color:var(--volt-ink);border:0;border-radius:20px;padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;}
.monthchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.monthchips .chip{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:20px;background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.monthchips .chip.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.monthchips .chip.dim{opacity:.42;}
.monthchips .chip .mc{font-size:9px;font-weight:800;background:rgba(0,0,0,.09);border-radius:8px;padding:0 5px;}
.monthchips .chip.on .mc{background:rgba(255,255,255,.28);}

/* ── 정산 진입 바 (방·리포트 → 전용화면) ── */
.settle-entry{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:16px;padding:15px 17px;background:#181c24;color:#fff;box-shadow:0 6px 18px rgba(20,28,45,.18);margin:2px 0;}
.settle-entry .se-l{flex:1;min-width:0;}
.settle-entry .se-t{font-size:14px;font-weight:750;}
.settle-entry .se-s{font-size:11px;color:#9fb2d6;margin-top:2px;}
.settle-entry .se-go{flex:none;font-weight:800;font-size:13px;color:#8fb4ff;}
.settle-entry:active{filter:brightness(1.15);}
/* 위시리스트 진입(방 상세 메인) — 멤버 누구나 */
.wl-entry{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--panel);box-shadow:0 1px 3px rgba(30,45,80,.04);margin:2px 0;}
.wl-entry .wl-ic{font-size:20px;flex:none;}
.wl-entry .wl-m{flex:1;min-width:0;}
.wl-entry .wl-t{font-weight:700;font-size:14px;}
.wl-entry .wl-s{font-size:11px;color:var(--muted);margin-top:1px;}
.wl-entry .wl-go{color:var(--muted);font-weight:800;flex:none;font-size:16px;}
.wl-entry:active{background:var(--panel-2);}
/* 위시 항목 작성자 표시 */
.wl-av{width:24px;height:24px;flex:none;border-radius:50%;background:var(--volt);color:var(--volt-ink);display:grid;place-items:center;font-size:10px;font-weight:800;}
.wl-who{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px;}

/* ── 정산 전용 화면 ── */
.st-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--muted);margin:0 0 12px;flex-wrap:wrap;}
/* 환율 컨트롤 바(직접·갱신·정보 통합) */
.fxbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;margin:0 0 8px;}
.fxbar .fxr{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);font-weight:600;}
.fxbar .fxr .ic{width:14px;height:14px;border-radius:50%;background:#d3d9e0;color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;}
.fxbar .fxbtn{background:var(--volt);color:var(--accent-ink);border:0;border-radius:20px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;}
.fxbar .fxinfo{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:11px;cursor:pointer;padding:0;}
.fxbar .fxinfo.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.fxbar .fxlock{font-size:11px;font-weight:700;color:var(--muted);}
.fxinfo-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:11.5px;color:var(--muted);line-height:1.6;margin:0 0 12px;}
.fxinfo-box b{color:var(--ink);font-weight:650;}
.st-note .ic,.st-hero .ic{width:14px;height:14px;border-radius:50%;background:#d3d9e0;color:#fff;font-size:9px;font-weight:800;display:inline-grid;place-items:center;flex:none;}
.st-hero{padding:18px;text-align:left;}
.st-h-lbl{font-size:12px;color:var(--muted);font-weight:700;}
.st-h-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:32px;letter-spacing:-.02em;margin:4px 0 3px;}
.st-h-v.dn{color:var(--danger);} .st-h-v.up{color:#12b886;}
.st-h-krw{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:6px;}
.st-h-sub{font-size:12.5px;color:var(--muted);} .st-h-sub b{color:var(--ink);font-weight:700;}
.st-sec{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin:18px 2px 9px;}
.st-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(30,45,80,.05);margin-bottom:9px;padding:0 14px;}
.st-card.mine{box-shadow:0 0 0 1.5px var(--accent);}
.st-card.done{opacity:.6;}
.st-row{display:flex;align-items:center;gap:11px;padding:13px 0;}
.st-chk{width:24px;height:24px;flex:none;border-radius:50%;border:2px solid #d3d9e0;background:transparent;color:transparent;font-size:12px;font-weight:800;display:grid;place-items:center;cursor:pointer;padding:0;}
.st-chk.on{background:#12b886;border-color:#12b886;color:#fff;}
.st-chk.ro{cursor:default;}
.st-mid{flex:1;min-width:0;}
.st-names{font-size:13.5px;font-weight:600;} .st-names .ar{color:var(--muted);margin:0 2px;}
.st-by{font-size:11px;color:var(--muted);margin-top:2px;cursor:pointer;}
.st-amt{display:flex;flex-direction:column;align-items:flex-end;flex:none;}
.st-amt .loc{font-family:var(--mono);font-weight:800;font-size:14px;}
.st-amt .krw{font-family:var(--mono);font-size:10px;color:var(--muted);}
.st-card.done .st-amt .loc,.st-card.done .st-names{text-decoration:line-through;}
.st-done{text-align:center;color:#12b886;font-weight:700;padding:16px;font-size:13px;}
.pcard{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid var(--line);}
.pcard:first-child{border-top:0;}
.pcard .av{width:34px;height:34px;border-radius:50%;background:var(--volt);color:var(--volt-ink);display:grid;place-items:center;font-size:13px;font-weight:800;flex:none;}
.pcard .pc-m{flex:1;min-width:0;}
.pcard .pc-nm{font-weight:650;font-size:13.5px;}
.pcard .pc-me{font-size:9px;font-weight:800;color:var(--accent-ink);background:var(--volt);border-radius:6px;padding:1px 5px;margin-left:3px;vertical-align:1px;}
.pcard .pc-paid{font-size:11.5px;color:var(--muted);margin-top:1px;}
.pcard .pc-paid b{font-family:var(--mono);color:var(--ink);font-weight:700;}
.pcard .pc-net{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;text-align:right;white-space:nowrap;}
.pcard .pc-net.up{color:#12b886;}
.pcard .pc-net.dn{color:var(--danger);}
.pcard .pc-net small{display:block;font-size:9.5px;color:var(--muted);font-weight:600;margin-top:1px;}

/* 리포트 보강: 환율 기준 · 정산 내역(누가→누구) · 1인당 상세 */
.r-hero .r-rate{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:5px;}
.r-ratelink{background:none;border:0;color:var(--accent-ink);font-weight:700;font-size:11.5px;cursor:pointer;padding:0;margin-left:2px;}
.r-sec .r-hint{font-weight:600;color:var(--muted);font-size:11px;margin-left:4px;}
.rtf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--line);}
.rtf:first-child{border-top:0;}
.rtf-p{font-size:14px;}
.rtf-p b{font-weight:700;}
.rtf-a{color:var(--accent);font-weight:800;margin:0 3px;}
.rtf-amt{font-weight:800;font-size:14px;text-align:right;white-space:nowrap;}
.rtf-krw{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:1px;}
.pcard{cursor:pointer;}
.pc-caret{flex:none;color:var(--muted);font-size:11px;margin-left:2px;}
.pcard.open{border-bottom:0;}
.pc-detail{padding:4px 0 14px 45px;border-bottom:1px solid var(--line);}
.pc-detail .pcd-kv{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:3px 0;}
.pc-detail .pcd-kv.up b{color:#12b886;}
.pc-detail .pcd-kv.dn b{color:var(--danger);}
.pc-detail .pcd-sec{font-size:11px;font-weight:800;color:var(--muted);margin:11px 0 5px;}
.pc-detail .pcd-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;}
.pc-detail .pcd-row .up{color:#12b886;}
.pc-detail .pcd-row .dn{color:var(--danger);}

/* 화면 전환(요약카드→리포트 등) — 은은한 fade/slide */
@media (prefers-reduced-motion:no-preference){
  .report-enter{animation:viewrise .26s cubic-bezier(.2,.7,.3,1);}
  @keyframes viewrise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
}

/* ══════════════════════════════════════════════════════════════
   토스 블루 리뉴얼 (2026-07) — 소프트 핀테크 톤
   · 회색 배경 + 흰 카드, 강조색을 형광 볼트 → 토스 블루로.
   · --volt 를 '연한 파랑 칩(옅은 배경+파란 글씨)'으로 리매핑 →
     기존 daytab/chip/seg 선택 스타일이 자동으로 토스식 선택칩이 됨.
   · --accent 는 '진한 파랑 솔리드'(바 채움 · 주요 CTA · 강조).
   · 이 블록만 지우면 원상복구.
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#f2f4f6; --ink:#191c22; --panel:#ffffff; --panel-2:#f0f2f5;
  --line:#e9ecef; --muted:#8a94a1;
  --accent:#3182f6; --accent-ink:#1f6fe5;
  --volt:#e7f0fe; --volt-ink:#1f6fe5;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1216; --ink:#eef1f5; --panel:#171b21; --panel-2:#1f242c;
  --line:#262b33; --muted:#8b95a3;
  --accent:#5b8cff; --accent-ink:#8fb4ff;
  --volt:#1d2b45; --volt-ink:#8fb4ff;
}}
:root[data-theme="light"]{
  --bg:#f2f4f6; --ink:#191c22; --panel:#ffffff; --panel-2:#f0f2f5;
  --line:#e9ecef; --muted:#8a94a1; --accent:#3182f6; --accent-ink:#1f6fe5;
  --volt:#e7f0fe; --volt-ink:#1f6fe5;
}
:root[data-theme="dark"]{
  --bg:#0f1216; --ink:#eef1f5; --panel:#171b21; --panel-2:#1f242c;
  --line:#262b33; --muted:#8b95a3; --accent:#5b8cff; --accent-ink:#8fb4ff;
  --volt:#1d2b45; --volt-ink:#8fb4ff;
}

/* 입력/버튼/바 배경을 회색 페이지 위에서 정리 */
.input,select,.amtwrap{background:var(--panel);}
.btn{background:var(--panel);}
.fab{background:var(--panel);border-top:1px solid var(--line);}
.appbar{background:var(--bg);}
/* 영수증 촬영 버튼 = 아이콘 + '영수증' 라벨(카메라 용도 인지) */
.fab .cam{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 15px;line-height:1;}
.fab .cam .cam-ic{font-size:19px;}
.fab .cam .cam-tx{font-size:10px;font-weight:800;color:var(--muted);}

/* 주요 CTA(로그인·지출등록 등) = 솔리드 블루 */
.btn.primary,.btn.volt{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn.primary:hover,.btn.volt:hover{filter:brightness(.96);}

/* 진행률/카테고리 바 채움 = 솔리드 블루 */
.catbar>div{background:var(--accent);}

/* 브랜드·대형 타이틀: 이탤릭/900 무게를 덜어 소프트하게 */
.brand{font-style:normal;font-weight:800;}
.brand .v{background:var(--accent);color:#fff;border-radius:6px;}
.eh-big{font-style:normal;font-weight:800;letter-spacing:-.035em;}
.eh-big .hl{background:var(--accent);color:#fff;border-radius:10px;font-style:normal;}
.gdayhd{border-color:var(--accent);}
.glogo .hl{color:var(--accent);}

/* '진행중 여행' 히어로 카드: 라임 그라디언트 → 블루 그라디언트 */
.trip.big{background:linear-gradient(135deg,#5a92ff 0%,var(--accent) 55%,#2b6fe0 100%);
  box-shadow:0 8px 30px rgba(49,130,246,.30);}
.trip.big:hover{box-shadow:0 14px 40px rgba(49,130,246,.42);}
.trip.big .nm,.trip.big .chev{color:#fff;}
.trip.big .mt{color:rgba(255,255,255,.82);}

/* 정산 요약 블록: 순검정 → 짙은 네이비 + 파란 강조 (대비 유지) */
.settle{background:#181c24;}
.tf .amt,.tf-amt .krw,.settle .tf-amt .krw{color:#8fb4ff;}
.settle .sbadge,.settled,.tf .arw{color:#8fb4ff;}
.tf-chk.on{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ── 스크롤바 완전 숨김(모바일 앱 감성 · 스크롤 동작은 그대로) ── */
*{scrollbar-width:none;-ms-overflow-style:none;}
::-webkit-scrollbar{display:none;width:0;height:0;}

/* ── 햄버거 드로어 리뉴얼(토스 톤: 아바타 헤더 · 아이콘 뱃지 행 · 그룹) ── */
#menu .drawer{background:var(--bg);border-right:1px solid var(--line);padding:14px 12px;gap:2px;}
#menu .dhead{display:flex;align-items:center;gap:12px;padding:8px 8px 16px;border-bottom:1px solid var(--line);margin-bottom:10px;}
#menu .dhead-av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--volt);color:var(--volt-ink);display:grid;place-items:center;font-size:17px;font-weight:800;}
#menu .dhead-m{display:flex;flex-direction:column;min-width:0;}
#menu .dhead-m b{font-size:16px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#menu .dhead-u{font-size:12px;color:var(--muted);margin-top:1px;}
#menu .dgroup{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;}
#menu .dlabel{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.03em;padding:16px 12px 7px;}
#menu .mi{display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;border-bottom:0;color:var(--ink);font-weight:700;font-size:15px;padding:11px 8px;border-radius:10px;}
#menu .mi:active{background:var(--panel-2);}
#menu .mi-ic{flex:none;width:32px;height:32px;display:grid;place-items:center;font-size:16px;border-radius:9px;background:var(--panel-2);}
#menu .mi-lb{flex:1;min-width:0;}
#menu .mi-val{flex:none;font-size:13px;font-weight:700;color:var(--muted);}
#menu .mi.danger{color:var(--danger);}
#menu .mi.danger .mi-ic{background:transparent;}
#menu .dsep{flex:1;min-height:10px;}

/* 나눠내기: 전체/항목 토글 · 남은 금액 안내 */
.bigseg span{font-size:13px;padding:11px 8px;text-transform:none;}
.ah-remain{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.4;}
.ah-remain.ok{color:#12b886;}
.ah-remain.over{color:var(--danger);}
/* 미지정 잔액 = 실제 항목처럼 보이되 자동(🔒) — 연한 배경으로만 살짝 구분 */
.itemedit.leftover{background:var(--panel-2);}
.itemedit.leftover .lo-top{display:flex;align-items:center;justify-content:space-between;}
.itemedit.leftover .lo-name{font-weight:800;font-size:15px;color:var(--ink);}
.itemedit.leftover .lo-lock{font-size:12px;opacity:.7;}
.itemedit.leftover .lo-amt{font-weight:800;font-size:16px;color:var(--ink);}
/* 결제자 이름 롱프레스로 기본 고정(📌) */
.payerchips .chip{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.payerchips .pin{font-size:11px;vertical-align:1px;}
/* 날짜 칩 요일(07/20 월) — 살짝 은은하게 */
.datechips .chip .wd{opacity:.65;font-weight:700;margin-left:1px;}

/* 영수증 분석 진행중 — 스피너 + indeterminate 바 */
.ai-loading{display:flex;align-items:center;gap:13px;background:var(--volt);border:1px solid var(--accent);border-radius:14px;padding:14px 16px;margin:10px 0;}
.ai-spin{flex:none;width:22px;height:22px;border:3px solid var(--accent-ink);border-top-color:transparent;border-radius:50%;animation:aispin .7s linear infinite;}
.ai-loading-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.ai-loading-txt b{font-size:14px;color:var(--accent-ink);}
.ai-loading-txt span{font-size:12px;color:var(--accent-ink);opacity:.85;}
.ai-bar{position:relative;height:4px;border-radius:999px;background:rgba(49,130,246,.18);overflow:hidden;margin-top:5px;}
.ai-bar::after{content:"";position:absolute;top:0;left:0;height:100%;width:40%;border-radius:999px;background:var(--accent);animation:aibar 1.1s ease-in-out infinite;}
@keyframes aispin{to{transform:rotate(360deg)}}
@keyframes aibar{0%{left:-40%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.ai-spin{animation:none}.ai-bar::after{animation:none;left:0;width:100%;opacity:.5}}

/* ── 모바일 서비스 컬럼 고정: 넓은 창(PC 어드민·태블릿)에서도 폰 폭(480px)으로 가운데 정렬 ──
   폰(≤480px)에선 영향 0. 화면이 넓어도 폰 디자인이 늘어나지 않게 함. */
.wrap,.fab{max-width:480px;}
.appbar{padding-left:max(16px,calc((100% - 480px)/2 + 16px));padding-right:max(16px,calc((100% - 480px)/2 + 16px));}

/* ── 몰빵 게임 ── */
.mb-ex{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:13px;margin-bottom:12px;}
.mb-k{display:flex;align-items:center;gap:16px;justify-content:center;padding:4px 0;}
.mb-kbtn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font-size:22px;font-weight:700;cursor:pointer;}
.mb-kbtn:active{background:var(--panel-2);}
.mb-kn{font-size:20px;font-weight:800;min-width:64px;text-align:center;font-variant-numeric:tabular-nums;}
.mb-stage{padding:10px 4px;overflow:hidden;}
.mb-stage canvas{display:block;width:100%;}
.btn.dim{opacity:.45;}
/* 카드뽑기: 3D 플립 */
.mb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.mb-card{position:relative;aspect-ratio:3/4;cursor:pointer;perspective:600px;}
.mb-cf{position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;backface-visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.3,1);border:1.5px solid var(--line);}
.mb-back{background:linear-gradient(135deg,#2b74e8,#5a92ff);color:#fff;font-size:34px;transform:rotateY(0);}
.mb-front{background:var(--panel);transform:rotateY(180deg);}
.mb-card.flip .mb-back{transform:rotateY(180deg);}
.mb-card.flip .mb-front{transform:rotateY(360deg);}
.mb-card.win .mb-front{border-color:var(--accent);box-shadow:0 0 0 2px rgba(49,130,246,.25);}
.mb-card.pickable .mb-back{cursor:pointer;}
.mb-card.pickable:active{transform:scale(.95);}
.mb-card.pickable .mb-back{animation:mbfloat 2s ease-in-out infinite;}
@keyframes mbfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.mb-card:not(.pickable):not(.flip) .mb-back{opacity:.5;}
.mb-front .boom{color:var(--accent-ink);}
.mb-front .av{width:40px;height:40px;border-radius:50%;background:var(--volt);color:var(--volt-ink);display:grid;place-items:center;font-weight:800;font-size:15px;}
.mb-front .nm{font-weight:700;font-size:13px;}
.mb-front .boom{font-size:11px;font-weight:800;color:#f04452;}
.mb-front .safe{font-size:11px;font-weight:700;color:var(--muted);}
/* 카드뽑기: 이름·프로필이 보이는 인물 카드(뒤집기 없음) — 제3자가 클릭해서 고름 */
.mb-card.person{aspect-ratio:3/4;perspective:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 1px 3px rgba(30,45,80,.05);transition:transform .12s,box-shadow .2s,border-color .2s;}
.mb-card.person .av{width:44px;height:44px;border-radius:50%;background:var(--volt);color:var(--volt-ink);display:grid;place-items:center;font-weight:800;font-size:16px;}
.mb-card.person .nm{font-weight:700;font-size:13px;color:var(--ink);}
.mb-card.person .boom{font-size:11px;font-weight:800;color:#f04452;}
.mb-card.person.pickable{cursor:pointer;animation:mbfloat 2s ease-in-out infinite;}
.mb-card.person.pickable:active{transform:scale(.95);}
.mb-card.person.win{border-color:#f04452;box-shadow:0 0 0 2px rgba(240,68,82,.22);animation:none;}
.mb-card.person.win .av{background:#ffe1e4;color:#f04452;}
.mb-card.person.dimmed{opacity:.45;}
/* 결과 */
.mb-result{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 16px;text-align:center;margin-bottom:14px;}
.mb-rlbl{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:14px;}
.mb-winners{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;}
.mb-w{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:15px;}
.mb-w .av.big{width:56px;height:56px;border-radius:50%;background:#ffe1e4;color:#d6303f;display:grid;place-items:center;font-weight:800;font-size:20px;}
.mb-meta{font-size:11.5px;color:var(--muted);}
/* 결과 3택 액션 — 아이콘+제목+설명 카드형(뭐가 뭔지 명확) */
.mb-acts{display:flex;flex-direction:column;gap:9px;}
.mb-act{display:flex;align-items:center;gap:13px;text-align:left;width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 15px;background:var(--panel);color:var(--ink);cursor:pointer;}
.mb-act:active{background:var(--panel-2);}
.mb-act.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.mb-act .i{flex:none;font-size:22px;}
.mb-act .t{display:flex;flex-direction:column;font-weight:800;font-size:15px;}
.mb-act .t .s{font-weight:600;font-size:11.5px;opacity:.75;margin-top:2px;}
/* 몰빵 결과 → 지출 연결 모드: 상단 배너 + 실제 지출 리스트에서 직접 선택 */
.mb-linkbar{position:sticky;top:8px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:var(--accent);color:#fff;border-radius:14px;padding:13px 15px;margin-bottom:12px;box-shadow:0 4px 14px rgba(49,130,246,.28);}
.mb-linkbar-t{font-weight:800;font-size:15px;flex:1 1 100%;}
.mb-linkbar-s{font-size:12px;opacity:.92;flex:1 1 auto;}
.mb-linkbar-s b{font-weight:800;}
.mb-linkbar .btn.ghost{flex:none;background:rgba(255,255,255,.18);border-color:transparent;color:#fff;}
.rcpt.link{display:block;width:100%;text-align:left;cursor:pointer;border:1.5px solid var(--line);transition:border-color .15s,box-shadow .15s,transform .1s;}
.rcpt.link:active{transform:scale(.99);}
.rcpt.link .rh{display:flex;align-items:center;gap:11px;}
.rcpt-check{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;font-weight:800;font-size:14px;transition:.15s;}
.rcpt.link.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(49,130,246,.22);}
.rcpt.link.sel .rcpt-check{background:var(--accent);border-color:var(--accent);color:#fff;}
.fab.linkfab .btn[disabled]{opacity:.5;}
.mb-fromgame{margin-top:8px;font-size:12px;font-weight:700;color:var(--accent-ink);}
/* 개인소비 토글(지출폼) */
.perschk{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:transparent;cursor:pointer;user-select:none;margin:2px 0;transition:.15s;}
.perschk input{width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer;}
.perschk .pc-t{font-weight:700;font-size:13.5px;color:var(--ink);}
.perschk .opt{margin-left:auto;}
.perschk.on{border-color:var(--accent);background:rgba(49,130,246,.09);}
.perschk.on .pc-t{font-weight:800;color:var(--accent-ink);}
.persnote{margin-top:10px;line-height:1.5;}
.payer-locked{margin-top:8px;padding:10px 13px;border-radius:11px;background:var(--panel-2);font-size:14px;color:var(--ink);}
.payer-locked b{font-weight:800;}
.pers-badge{font-size:10px;font-weight:800;color:var(--accent-ink);background:var(--volt);border-radius:8px;padding:2px 7px;vertical-align:1px;}
.rtf.rtf-sum{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;}
/* 제보합니다 폼 */
.fb-body{resize:vertical;min-height:120px;line-height:1.5;}
.fb-photos{display:flex;gap:10px;flex-wrap:wrap;}
.fb-thumb{position:relative;width:80px;height:80px;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
.fb-thumb img{width:100%;height:100%;object-fit:cover;}
.fb-thumb .fb-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:14px;cursor:pointer;line-height:1;}
.fb-add{width:80px;height:80px;border-radius:12px;border:1.5px dashed var(--line);background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;line-height:1.4;}
/* 지출 카드 뱃지·기록 줄·불러오기 */
.mb-badge{font-size:13px;}
.item.mb-applied{font-size:12px;color:var(--muted);border-top:1px dashed var(--line);}
.item.mb-applied b{color:var(--ink);}
.mb-load{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}

/* 지출폼 상단: 취소 + 전체 지우기 · 촬영/사진첩 2버튼 */
.xf-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.clearbtn{background:none;border:0;color:var(--danger);font-weight:700;font-size:13px;cursor:pointer;padding:4px 2px;}
.camrow{display:flex;gap:8px;}
.camrow .btn{flex:1;}
/* DAY탭 BEFORE/AFTER(여행 준비·정산) — 살짝 덜 강조 */
.daytab.edge .d{color:var(--muted);font-size:12px;letter-spacing:.02em;}

/* ── 토스 원터치 송금 · 정산 계좌 (목업 v1 디자인) ───── */
.tossbtn{flex:none;border:0;border-radius:999px;background:#0064ff;color:#fff;font-weight:800;font-size:11.5px;padding:7px 12px;margin-left:10px;cursor:pointer;font-family:inherit;}
.tossbtn.dim{opacity:.35;}
.warnbar{background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--muted);margin:10px 0 0;}
.warnbar b{color:var(--ink);}
.archbanner.acct{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.archbanner.acct .btn{flex:none;}
.archbanner.acct .acct-tx{display:flex;flex-direction:column;gap:3px;min-width:0;}
.archbanner.acct .acct-tx b{font-size:13px;line-height:1.4;}
.archbanner.acct .acct-tx span{font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.4;}
#tsheet{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .15s;overscroll-behavior:contain;}
#tsheet.on{opacity:1;pointer-events:auto;}
#tsheet .tsh{position:absolute;left:0;right:0;bottom:0;max-width:760px;margin:0 auto;background:var(--bg);border-radius:20px 20px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.18);transform:translateY(102%);transition:transform .2s ease;}
#tsheet.on .tsh{transform:none;}
.grab{width:38px;height:4px;border-radius:999px;background:var(--line);margin:2px auto 14px;}
.tsh-t{font-size:16px;font-weight:900;letter-spacing:-.01em;margin:0 0 2px;}
.tsh-s{font-size:12.5px;color:var(--muted);margin:0 0 6px;}
.tsh-amt{font-family:var(--mono);font-weight:800;font-size:26px;letter-spacing:-.01em;margin:6px 0 0;}
.tsh-amt small{display:block;font-size:12px;color:var(--muted);font-weight:700;font-family:var(--font);margin-top:2px;}
.tsh-note{display:flex;gap:8px;align-items:flex-start;background:var(--panel);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--muted);line-height:1.5;margin:12px 0 2px;}
.tsh-note b{color:var(--ink);}
.acctrow{display:flex;gap:8px;margin-top:8px;}
.acctrow>select.input{flex:1;width:auto;}
.acctrow>input.input{flex:1.6;width:auto;}
.acct{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border-radius:12px;padding:12px 14px;margin:12px 0 2px;}
.acct .a-b{font-weight:800;font-size:13px;}
.acct .a-n{font-family:var(--mono);font-size:13.5px;color:var(--muted);}
.sbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-weight:800;font-size:14px;padding:13px 16px;font-family:inherit;cursor:pointer;margin-top:10px;}
.sbtn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.sbtn.toss{background:#0064ff;border-color:#0064ff;color:#fff;font-size:15px;}
.sbtn.danger{color:var(--danger);}
.sbtn .tlogo{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#fff;color:#0064ff;font-weight:900;font-size:12px;}
.aftertip{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 2px;line-height:1.55;}
.aftertip b{color:var(--ink);}
.joincap{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.5;}

/* ── 📌 방 공용 메모 (목업 v1) ───────────────────────── */
.memolist{border:1.5px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;}
.memolist .sechead{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 14px 4px;}
.memo{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;}
.memo:last-child{border-bottom:0;}
.memo.pinned{background:var(--panel-2);}
.memo .mt-t{font-weight:800;font-size:14px;}
.memo .mt-p{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.memo .mt-by{font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-top:4px;opacity:.85;}
.notefab{position:sticky;bottom:14px;display:flex;justify-content:flex-end;padding-top:14px;}
.fabbtn{border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:800;font-size:13.5px;padding:13px 19px;font-family:inherit;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.notearea{width:100%;box-sizing:border-box;min-height:46vh;border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:15px;line-height:1.6;padding:4px 2px;resize:vertical;outline:none;}
.savecap{font-size:11px;color:var(--muted);font-family:var(--mono);padding:4px 2px 10px;}
.notelinks{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.nlink{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--panel);border:1.5px solid var(--line);border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700;color:#0064ff;text-decoration:none;}
.ebar{display:flex;gap:8px;}
.ebtn{flex:1;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-weight:800;font-size:13px;padding:11px;font-family:inherit;cursor:pointer;}
.ebtn.on{background:var(--volt);border-color:var(--volt);color:var(--volt-ink);}
.ebtn.del{color:var(--danger);flex:0 0 auto;padding:11px 18px;}

/* 버튼 눌림 피드백 — 시트·메모·토스 버튼 공통 */
.sbtn,.tossbtn,.ebtn,.fabbtn,.tf-chk,.mk{transition:transform .12s ease,opacity .12s ease;}
.sbtn:active,.tossbtn:active,.ebtn:active,.fabbtn:active{transform:scale(.96);}

/* 메모 편집 위계 정리 — 완료(잉크 채움) · 고정 on(선택=진한 파랑 컨벤션) · 삭제(위험색) */
.notehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.notedone{border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:800;font-size:13px;padding:9px 18px;font-family:inherit;cursor:pointer;transition:transform .12s ease;}
.notedone:active{transform:scale(.96);}
.ebtn{background:var(--panel);}
.ebtn.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.ebtn.del{color:var(--danger);border-color:rgba(229,72,77,.35);background:var(--bg);}

/* ── 정산 v2: 합산 카드 · 히어로→리포트 플립 · 원화 환산 토글 ── */
.summary,.st-hero{position:relative;}
.st-hero,.summary{cursor:pointer;transition:transform .24s ease;}
.st-hero.flip,.summary.flip{transform:perspective(600px) rotateY(88deg);}
.st-h-chev{position:absolute;top:50%;transform:translateY(-50%);right:14px;color:var(--muted);font-size:16px;opacity:.55;pointer-events:none;}
.st-brk{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);}
.st-brk b{color:var(--ink);font-family:var(--mono);font-weight:700;}
.st-brk span{color:var(--muted);}
.fxtgl{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel);border:1.5px dashed rgba(49,130,246,.45);border-radius:14px;padding:11px 14px;margin:0 0 10px;cursor:pointer;font-size:13px;transition:transform .12s ease;}
.fxtgl:active{transform:scale(.985);}
.fxtgl .fx-l{font-weight:800;color:var(--accent);}
.fxtgl .fx-r{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.fxtgl.on{border-style:solid;border-color:rgba(49,130,246,.35);background:#eef5ff;}
.fxtgl.lock{border-style:solid;border-color:var(--line);cursor:default;}
.fxtgl.lock .fx-l{color:var(--muted);}
@media (prefers-color-scheme: dark){.fxtgl.on{background:#101d31;}}

/* 방 목록 총지출 · 방 카드 내 순정산 부제 */
.trip .trip-tot{font-weight:800;color:var(--ink);margin-top:2px;}
.trip.big .trip-tot{color:var(--volt-ink);font-size:15px;}
.summary .s-mynet{font-weight:800;}
.summary .s-mynet.dn{color:var(--danger);}
.summary .s-mynet.up{color:#12b886;}

/* 리포트 헤더 — 타이틀 · 기간 · 참여자 */
.rpt-head{margin:2px 0 14px;}
.rpt-title{font-size:17px;font-weight:900;letter-spacing:-.01em;}
.rpt-meta{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;}

/* 정산 히어로 2지표(전체 지출 + 내 몫) · 이체 금액 방향색 */
.st-h-v{font-size:22px;}
.st-h-mylbl{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:12px;}
.st-h-my{font-family:var(--mono);font-weight:800;font-size:22px;letter-spacing:-.01em;}
.st-h-my.dn{color:var(--danger);}
.st-h-my.up{color:#12b886;}
.st-amt .loc.dn{color:var(--danger);}
.st-amt .loc.up{color:#12b886;}

/* 리포트: 일자별 내역 영역 구분선 + 라벨 */
.rpt-divide{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;}
.rpt-divide::before,.rpt-divide::after{content:"";flex:1;border-top:1.5px solid var(--line);}
.dd-mt b{color:var(--ink);font-weight:700;}

/* 환산 시트 멀티 통화 리스트 + 토글 환율 로테이션 애니메이션 */
.fxlist{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;margin:12px 0 2px;}
.fxrow{display:grid;grid-template-columns:1fr auto;gap:1px 10px;padding:10px 13px;border-bottom:1px solid var(--line);font-size:13px;}
.fxrow:last-child{border-bottom:0;}
.fxrow.off{opacity:.6;}
.fxr-cur{font-weight:800;}
.fxr-rate{font-family:var(--mono);text-align:right;}
.fxr-rate b{color:var(--accent);}
.fxr-by{grid-column:1/3;font-size:10.5px;color:var(--muted);}
#fxrot{display:inline-block;min-width:74px;text-align:right;}
#fxrot.swap{animation:fxswap .34s ease;}
@keyframes fxswap{0%{opacity:0;transform:translateY(6px);}100%{opacity:1;transform:none;}}

/* 총액만 쓰기 후 되돌리기 한 줄 (읽은 항목 보관됨) */
.rvback{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:10px 13px;font-size:12.5px;color:var(--muted);margin:10px 0 0;}
.rvback b{color:var(--ink);}
.rvback-btn{flex:none;border:0;background:none;color:var(--accent);font-weight:800;font-size:12.5px;font-family:inherit;cursor:pointer;padding:2px 0;}
.rv-warn{color:var(--danger);font-weight:800;}

/* 미인식 잔액 — 금액은 자동, 부담자는 지정 가능 */
.itemedit.leftover .lo-hint{font-size:10.5px;font-weight:600;color:var(--muted);margin-left:6px;}

/* ══ 한 번에 등록 (벌크) ══════════════════════════════════════════
   입력구는 하나다(텍스트·사진 구분 없음). 큐는 요약 줄만 보여주고
   세부항목·사진은 상세 시트에서 좌우로 넘겨 본다 — 여러 건이 쌓여도 한 화면이 안 터진다.
   토큰(색·모서리)은 위 '토스 블루 리뉴얼' 블록을 그대로 따른다. */
.bk-head{background:var(--panel);border:1.5px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;margin:12px 0;}
.bk-hl{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;color:var(--muted);}
.bk-date{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;background:var(--bg);color:var(--ink);font-family:var(--mono);}
.bk-hr{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;}
.bk-hlbl{font-size:12px;font-weight:800;color:var(--muted);padding-top:7px;flex:none;}
.bk-hr .chips{margin-top:0;flex:1;}

/* 입력구 — 하나 */
.bk-in{background:var(--panel);border:1.5px solid var(--line);border-radius:16px;padding:13px;display:flex;flex-direction:column;gap:10px;margin:12px 0;}
.bk-paste{width:100%;border:1.5px dashed var(--accent);border-radius:12px;padding:12px;font-family:inherit;font-size:13.5px;background:var(--bg);color:var(--ink);resize:vertical;}
.bk-paste::placeholder{color:var(--muted);}
.bk-inbtns{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.bk-plist{display:flex;flex-direction:column;gap:6px;}
.bk-praw{display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:10px;padding:8px 10px;}
.bk-praw .no{font-size:10px;color:var(--muted);flex:none;background:var(--bg);border-radius:5px;padding:2px 6px;font-family:var(--mono);}
.bk-praw .tx{flex:1;min-width:0;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bk-reading{display:flex;align-items:center;gap:10px;padding:12px;font-size:13.5px;}

/* 큐 — 요약 줄만 */
.bk-list{display:flex;flex-direction:column;gap:8px;margin:12px 0;}
.bk-empty{border:1.5px dashed var(--line);border-radius:16px;padding:26px 16px;text-align:center;color:var(--muted);font-size:13.5px;font-weight:700;display:flex;flex-direction:column;gap:5px;}
.bk-empty span{font-size:12px;font-weight:500;}
.bk-row{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:10px 11px;display:flex;flex-direction:column;gap:6px;}
.bk-row.off{opacity:.5;}
.bk-top{display:flex;align-items:center;gap:9px;}
.bk-cb{width:21px;height:21px;flex:none;border:1.5px solid var(--line);border-radius:7px;background:var(--bg);color:transparent;font-size:12px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.bk-cb.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.bk-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;border:0;background:none;padding:0;font-family:inherit;color:var(--ink);cursor:pointer;}
.bk-open.arrow{flex:none;color:var(--muted);font-size:18px;padding:0 2px;}
.bk-nm{font-size:14.5px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bk-sub2{font-size:11px;color:var(--muted);font-family:var(--mono);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bk-amt2{font-size:15px;font-weight:800;white-space:nowrap;flex:none;}
.bk-warn{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted);}
.bk-dup{display:flex;align-items:center;gap:9px;background:var(--panel-2);border-radius:10px;padding:8px 10px;font-size:11.5px;color:var(--ink);}
.bk-dup span{flex:1;}

/* 상세 시트 — 세부항목·사진 확인 · 좌우로 건 이동 */
.bk-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:0;}
.bk-sheet2{width:100%;max-width:760px;max-height:92vh;overflow:auto;background:var(--bg);border-radius:20px 20px 0 0;padding:14px 16px 22px;display:flex;flex-direction:column;gap:11px;}
.bk-dhd{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);}
.bk-nav{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;width:32px;height:32px;font-size:17px;line-height:1;cursor:pointer;flex:none;}
.bk-nav:disabled{opacity:.35;cursor:default;}
.bk-shot{width:100%;max-height:38vh;object-fit:contain;border-radius:12px;background:var(--panel-2);}
.bk-f{display:flex;align-items:center;gap:10px;}
.bk-f>span:first-child{font-size:12px;font-weight:800;color:var(--muted);width:52px;flex:none;}
.bk-f .chips{margin-top:0;flex:1;}
.bk-fi{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px;background:var(--panel);color:var(--ink);font-family:inherit;}
.bk-items{background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:5px;}
.bk-items>b{font-size:12.5px;display:flex;justify-content:space-between;gap:8px;margin-bottom:3px;}
.bk-it{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);}
.bk-items .cap{margin:6px 0 0;}

.bk-spin{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:bkspin .7s linear infinite;}
@keyframes bkspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.bk-spin{animation:none;}}
.bk-pick{display:flex;align-items:center;gap:10px;background:var(--volt);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--volt-ink);font-weight:700;margin:12px 0 0;}
.bk-pick span{flex:1;}
/* 날짜/시간 미인식 — 숨기지 않고 드러낸다. 모르는 걸 아는 척하면 정산이 거짓이 된다. */
.bk-unk{color:var(--muted);font-style:normal;}
.bk-unk.strong{color:var(--danger);font-weight:800;}
.bk-warn.strong{color:var(--danger);font-weight:700;}
.bk-fi.need{border-color:var(--danger);}

/* '직접 쓰기'는 나머지 카드와 같은 세계에 있어야 한다(옛 각진 .addrow 를 벌크에선 덮어씀) */
.wrap .addrow{border:1.5px dashed var(--line);border-radius:14px;padding:14px;font-size:13.5px;font-weight:700;color:var(--muted);background:var(--panel);}
.bk-pick{flex-wrap:wrap;}
/* 1군(금액·날짜·통화)이 빈 줄 — 담을 수 없으므로 체크박스가 잠긴다 */
.bk-row.need{border-color:var(--danger);}
.bk-cb:disabled{opacity:.35;cursor:default;}

/* 입력구가 주인공 · 설정은 접힌 요약 한 줄 (기존 지출 폼의 아코디언 언어와 동일) */
.bk-title{flex:1;text-align:center;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.bk-link{border:0;background:none;color:var(--accent-ink);font-family:inherit;font-size:12.5px;font-weight:700;padding:6px 4px;cursor:pointer;}
.bk-link:disabled{color:var(--muted);opacity:.5;cursor:default;}
.bk-set{display:flex;align-items:center;gap:8px;width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font-family:inherit;cursor:pointer;margin:12px 0 0;}
.bk-setsum{flex:1;text-align:left;font-size:12.5px;font-weight:700;color:var(--muted);}
.bk-setarrow{color:var(--muted);font-size:11px;}
.bk-set.open{border-color:var(--accent);}
.bk-set.open+.bk-head{margin-top:8px;}
.wrap .addrow{display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px dashed var(--line);border-radius:14px;padding:14px;font-size:13.5px;font-weight:700;color:var(--muted);background:var(--panel);width:100%;}
.wrap .addrow span{font-size:11.5px;font-weight:500;}
.bk-in .bk-inbtns .cap{flex:1;margin:0;min-width:0;}

/* 입력 수단은 한 카드 안에 나란히 — 흩어져 있으면 "어디에 뭘 넣는 거지"가 된다.
   붙여넣기 칸이 위, 사진·직접쓰기가 아래. 셋의 무게를 같게 둔다. */
.bk-ways{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.bk-way{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;}
.bk-way:active{background:var(--panel-2);}
.bk-way .ic{font-size:20px;line-height:1;}
.bk-way .sub{font-size:11px;font-weight:500;color:var(--muted);}
#bk-add{margin-top:-2px;}
/* .btn 의 display:inline-flex 가 hidden 속성을 이겨버린다 — 명시적으로 눌러둔다 */
[hidden]{display:none!important;}
.bk-ways{grid-template-columns:repeat(3,1fr);}
.bk-way{padding:12px 4px;font-size:12.5px;}
.bk-way .ic{font-size:19px;}
.bk-way .sub{font-size:10.5px;}
.bk-way.on{border-color:var(--accent);background:var(--volt);color:var(--volt-ink);}
.bk-way.on .sub{color:var(--accent-ink);}
.bk-got{display:flex;align-items:baseline;gap:7px;padding:2px 2px 0;font-size:12.5px;}
.bk-got b{color:var(--accent-ink);}
.bk-got span{color:var(--muted);font-size:11.5px;}
/* 결제 후 취소 — 이미 정산에 들어간 지출을 정리하라는 신호(자동 삭제는 하지 않는다) */
.bk-cxl{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1.5px solid var(--danger);border-radius:11px;padding:10px;font-size:11.5px;line-height:1.5;color:var(--ink);}
.bk-cxl span{flex:1;}
.bk-amt2.neg{color:var(--danger);}

/* ════════════════════════════════════════════════════════════
   선셋 리뉴얼 (B안 · 여행 기록물) — 2026-07-25
   ─────────────────────────────────────────────────────────────
   · 다크 우선. 위 '토스 블루' 블록을 토큰만 덮어쓴다.
   · 버튼(CTA)은 오프화이트 — 색은 전부 데이터(카테고리·차트)에 양보한다.
     그래서 버튼 색이 카테고리 색과 겹칠 일이 없다.
   · 이 블록만 지우면 토스 블루로 원복된다.
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#0c0d10; --ink:#f3f4f6; --panel:#15171c; --panel-2:#1d2027;
  --line:#242830; --muted:#8b909b;
  /* 액션 버튼 = 앰버. --accent 와 분리한 이유:
     --accent 는 글자 40곳·테두리 32곳에도 쓰여서, 그걸 앰버로 바꾸면
     버튼이 아니라 화면 전체 글자가 앰버가 된다. 버튼만 이 토큰을 본다. */
  --cta:#ffb020; --cta-ink:#171310;
  /* 선택 상태·글자·테두리용. 버튼 배경으로는 더 이상 쓰지 않는다 */
  --accent:#f3f4f6; --accent-ink:#f3f4f6;
  /* 옅은 강조 칩(volt) — 파란 칩 대신 중립 패널톤 */
  --volt:#232730; --volt-ink:#f3f4f6;
  --danger:#ff5a5f;

  /* 여행 팔레트 — 카테고리 6종. 버튼(오프화이트)과 겹치지 않는다 */
  --cat-food:#ff6a3d;      /* 음식 */
  --cat-stay:#a78bfa;      /* 숙소 — 앰버에서 옮겨 버튼과 분리 */
  --cat-goods:#7ee0c0;     /* 상품 */
  --cat-transport:#8ab4ff; /* 교통 */
  --cat-ticket:#f472b6;    /* 티켓 — 앰버 버튼과 인접해서 옮김 */
  --cat-etc:#8b909b;       /* 기타 */

  /* 의미색 — 돈의 방향. 브랜드·카테고리와 섞이지 않는다 */
  --money-out:#ff5a5f;     /* 내가 낼 돈 — 앰버는 버튼이 가져갔다 */
  --money-in:#22c58b;      /* 받을 돈 · 완료 */
}
/* 다크 확정(2026-07-25) — 라이트 모드는 지원하지 않는다.
   테마 토글이 남아 있어도 같은 토큰을 쓰므로 화면이 바뀌지 않는다. */
:root[data-theme="light"],:root[data-theme="dark"]{
  --bg:#0c0d10; --ink:#f3f4f6; --panel:#15171c; --panel-2:#1d2027;
  --line:#242830; --muted:#8b909b;
  --cta:#ffb020; --cta-ink:#171310;
  --accent:#f3f4f6; --accent-ink:#f3f4f6;
  --volt:#232730; --volt-ink:#f3f4f6; --danger:#ff5a5f;
}
/* ── 액션 버튼: 오프화이트 채움 + 어두운 글자 ────────────────
   기존 CSS는 주요 액션을 .btn.primary 와 .btn.volt 두 갈래로 쓴다.
   둘 다 채움 버튼이므로 같은 대우를 한다(하나만 고치면 흰 위 흰 글자가 남는다). */
.btn.primary,.btn.volt,.cta:not(.sub):not(.ghost),
.modebtn.primary,.mb-act.primary{
  background:var(--cta);color:var(--cta-ink);border-color:var(--cta);
}
/* 버튼 안의 보조 설명줄은 채움 위에서 살짝 눌러 준다(같은 어두운 글자라 뭉친다) */
.modebtn.primary span,.mb-act.primary .s{color:rgba(23,19,16,.72);}
.btn.primary:disabled,.btn.volt:disabled{background:var(--panel-2);color:var(--muted);border-color:var(--line);opacity:1;}
/* 보조 버튼은 테두리만 */
.btn:not(.primary):not(.volt):not(.danger){background:var(--panel);color:var(--ink);border-color:var(--line);}

/* ── accent 를 오프화이트로 바꾸면서 생긴 자리 정리 ──────────────
   기존 CSS는 --accent 를 '버튼 배경'과 '브랜드 강조'에 겸용했다.
   버튼은 오프화이트가 맞지만 로고·링크까지 흰 덩어리가 되면 안 된다.
   → 브랜드 강조는 --brand(선셋 오렌지)로 분리한다. */
:root{ --brand:#ff6a3d; --brand-ink:#ff8b66; }
.brand .v{background:var(--brand);color:#12140f;}
.glogo .hl{color:var(--brand);}
.link{color:var(--brand-ink);text-decoration:none;font-weight:700;}
.h1 .hl{background:var(--brand);color:#12140f;padding:0 8px;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.eh-big .hl{background:var(--brand);color:#12140f;}
/* 선택 칩·세그먼트는 채움 대신 테두리+글자색으로(흰 덩어리 방지) */
.chip.on{background:transparent;border-color:var(--brand);color:var(--brand-ink);}
.seg span.on{background:var(--brand);color:#12140f;}


/* ── 선택/활성 상태는 브랜드 오렌지, 액션 버튼만 오프화이트 ──────
   --accent 를 오프화이트로 바꾸면서 '선택된 칩·탭·체크'가 전부 흰 덩어리가 됐다.
   (흰 배경 + 흰 글자 → 글자가 사라짐). 성격이 다른 두 역할을 나눈다:
     · 액션(누르면 진행)      = 오프화이트 채움
     · 선택/활성(상태 표시)    = 브랜드 오렌지 채움 + 어두운 글자
   여기 나열된 선택자는 `grep "background:var(--accent)"` 로 뽑은 23곳 중
   '선택 상태'에 해당하는 것들이다. */
/* 선택 상태를 두 급으로 나눈다 — 한 화면에 선택 칩이 여럿이면 채움이 도배가 된다.
   · 모드 전환(세그먼트·탭·작은 체크) = 채움. 화면에 하나뿐이거나 아주 작다.
   · 다중 선택 칩(결제자·멤버·N빵/지정) = 테두리 + 글자색. 여러 개가 동시에 켜진다. */
.seg span.on, .daytab.on, .daytab .today,
.wl-chk.on, .tf-chk.on, .rv-pick.on .rv-cb, .bk-cb.on,
.ebtn.on, .fxbar .fxinfo.on,
.rcpt.link.sel .rcpt-check{
  background:var(--brand); color:#12140f; border-color:var(--brand);
}
.chip.on, .rcpt .chips .chip.on, .splitmode .chip.on, .membchips .chip.on,
.monthchips .chip.on{
  background:transparent; color:var(--brand-ink); border-color:var(--brand);
}
/* 한 번에 등록의 입력방식 탭 — 선택색이 오프화이트라 '비활성'처럼 읽혔다.
   카드가 커서 채우면 오렌지 덩어리가 되므로 테두리·글자만 브랜드색으로. */
.bk-way.on{border-color:var(--brand);background:var(--panel-2);color:var(--ink);}
.bk-way.on .ic{color:var(--brand);}
.bk-way.on .sub{color:var(--muted);}
/* 진행 애니메이션·링크바는 브랜드색. 카테고리 바는 아래에서 카테고리 색으로 덮는다 */
.ai-bar::after, .mb-linkbar{ background:var(--brand); }
.catbar>div{ background:var(--muted); }
/* 이전 블록의 .chip.on(파랑 채움)을 덮는다 — 다중 선택은 테두리형 */
.chip.on{ background:transparent; color:var(--brand-ink); border-color:var(--brand); }

/* ── 금액은 sans + tabular-nums (모노는 자간이 넓어 숫자가 흩어진다) ── */
.mono{ font-family:var(--font); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
/* 날짜·시각처럼 '데이터 라벨'로 쓰이는 mono 는 그대로 두고 싶으면 .mono.code 로 분리 */
.mono.code{ font-family:var(--mono); }

/* ── 아이콘 정렬 ────────────────────────────────────────────
   인라인 SVG 는 baseline 에 놓여 글자와 어긋난다. 세로 중앙으로 맞추고
   줄어들지 않게 고정한다. 색은 currentColor 라 부모의 color 를 따른다. */
.ic{display:inline-block;vertical-align:-.18em;flex:none;}
.rlink-ic .ic{vertical-align:middle;}
/* 카테고리 색 — 아이콘·태그가 이 색을 물려받는다 */
.cat-food{color:var(--cat-food);} .cat-goods{color:var(--cat-goods);}
.cat-transport{color:var(--cat-transport);} .cat-stay{color:var(--cat-stay);}
.cat-ticket{color:var(--cat-ticket);} .cat-etc{color:var(--cat-etc);}
/* 방 메뉴 아이콘은 브랜드색으로 통일(기능 아이콘이지 데이터가 아님) */
.rlink-ic{color:var(--brand);display:inline-flex;align-items:center;justify-content:center;}
/* 세그먼트/칩 안의 아이콘은 글자와 같은 크기 흐름으로 */
.seg span .ic,.chip .ic{margin-right:2px;}

/* ── 금액은 sans + tabular-nums ────────────────────────────────
   기존 CSS는 53곳에서 font-family:var(--mono) 를 직접 박아 쓴다.
   그중 '금액'만 골라 sans 로 되돌린다 — 시스템 모노는 자간이 넓어 숫자가 흩어지고
   본문(한글 sans)과 목소리가 달라진다. tabular-nums 로 자릿수는 그대로 맞춘다.
   ⚠️ 로그·초대코드·시각처럼 '코드로 읽어야 하는' 곳은 모노를 유지한다
      (.log · .invitebox .exp · .slog · .bk-sub2 · .rcpt .meta 등은 건드리지 않음). */
.item .am, .tf .amt, .tf-amt, .tf-amt .loc, .tf-amt .krw, .tfmain .amt,
.tile .v, .dd-am, .xf-amt .ah-amt, .amtwrap .curpfx,
.summary .s-net, .summary .s-sub,
.daytab .amt, .daytab .s,
.r-hero .r-total, .r-hero .r-krw,
.st-h-v, .st-h-krw, .st-h-my, .st-amt .loc, .st-amt .krw, .st-brk b,
.pcard .pc-paid b, .pcard .pc-net, .pcb-sub b,
.tsh-amt, .bk-amt2, .bk-amt, .mono{
  font-family:var(--font);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
}
/* 코드로 읽어야 하는 것은 되돌린다(위 .mono 일괄 규칙에 걸리지 않게) */
.mono.code, .log .mono, .invitebox .exp, .slog, .bk-sub2, .rcpt .meta, .fxr-rate, .acct .a-n{
  font-family:var(--mono); letter-spacing:0;
}

/* ── 이체 금액은 통화와 무관하게 같은 색 ────────────────────
   882줄에 예전 파랑(#8fb4ff)이 박혀 있어 원화만 다른 색으로 튀었다.
   돈의 방향(낼/받을)이 색의 의미지, 통화가 색을 정하는 게 아니다. */
.tf .amt, .tf-amt .krw, .settle .tf-amt .krw{ color:var(--ink); }
.tf-amt .loc{ color:var(--ink); opacity:.72; }

/* ── '원화로 환산하기' 토글이 흰 테두리로 튄다 — 보조 정보라 조용하게 ── */
.fxtgl{ border-color:var(--line)!important; background:var(--panel); }
.fxtgl .fx-l{ color:var(--ink); }
.fxtgl .fx-r{ color:var(--muted); }
.fxbar .fxbtn{ background:var(--panel-2); color:var(--ink); }

/* ── 카테고리 색은 '데이터'다 — 아이콘과 막대가 같은 색을 쓴다 ────
   버튼을 오프화이트로 둔 이유가 이것: 색을 전부 데이터에 양보하기 위해서다.
   .cat-* 는 color 를 정하고, 아이콘은 currentColor 로 물려받는다.
   막대는 배경이 필요하므로 background 도 같이 지정한다. */
.cat-food{color:var(--cat-food);}       .catbar>div.cat-food{background:var(--cat-food);}
.cat-goods{color:var(--cat-goods);}     .catbar>div.cat-goods{background:var(--cat-goods);}
.cat-transport{color:var(--cat-transport);} .catbar>div.cat-transport{background:var(--cat-transport);}
.cat-stay{color:var(--cat-stay);}       .catbar>div.cat-stay{background:var(--cat-stay);}
.cat-ticket{color:var(--cat-ticket);}   .catbar>div.cat-ticket{background:var(--cat-ticket);}
.cat-etc{color:var(--cat-etc);}         .catbar>div.cat-etc{background:var(--cat-etc);}
/* 선택된 카테고리 칩 안에서는 아이콘이 칩 글자색을 따라야 한다(오렌지 위 오렌지 방지) */
.chip.on .cat-food,.chip.on .cat-goods,.chip.on .cat-transport,
.chip.on .cat-stay,.chip.on .cat-ticket,.chip.on .cat-etc,
.seg span.on [class^="cat-"]{color:inherit;}

/* ── 항목 삭제(×)는 조용하게 ────────────────────────────────
   항목마다 붙어 있어 빨간 원이 여러 개면 화면이 경고판이 된다.
   누르기 전엔 회색, 누를 때만 위험색. */
.itemedit .btn.danger,.item .btn.danger{border-color:var(--line);color:var(--muted);background:transparent;}
.itemedit .btn.danger:active,.item .btn.danger:active{border-color:var(--danger);color:var(--danger);}
/* 진짜 파괴적인 액션(지출 삭제·방 삭제)은 그대로 위험색을 쓴다 */
.fab .btn.danger,.card .btn.danger{border-color:var(--danger);color:var(--danger);}

/* ── 메뉴: 아이콘은 보조, 라벨이 주인공 ────────────────────────
   둘 다 같은 흰색이면 위계가 없어 전부 똑같이 읽힌다.
   아이콘을 한 단 낮추고, 눌린/위험 항목만 색으로 구분한다. */
.mi .mi-ic{color:var(--muted);}
.mi:active .mi-ic,.mi.on .mi-ic{color:var(--brand);}
.mi.danger .mi-ic{color:var(--danger);}
.mi .mi-lb{color:var(--ink);}
.mi .mi-val{color:var(--muted);}

/* ── 지출 행: 카테고리 아이콘 타일 ─────────────────────────────
   회색 태그(음식/상품…)를 지우고 색 아이콘으로 대체했다. 목록을 훑을 때
   글자를 읽지 않아도 성격이 보인다. 색은 .cat-* 가 currentColor 로 물려준다. */
.rc-th{width:34px;height:34px;border-radius:11px;flex:none;background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;}
.rcpt .rh{display:flex;align-items:center;gap:11px;}
.rcpt .rh>div:nth-of-type(1){flex:1;min-width:0;}
.rcpt .rh .place{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── 방 요약: 1인당 · 카테고리 비중 막대 ───────────────────────
   목업의 히어로 구성. 총액만으로는 "많이 썼나"를 알 수 없어서 1인당을 옆에 붙이고,
   무엇에 썼는지는 막대 한 줄로 보여준다(리포트에 들어가지 않아도 성격이 보이게). */
.summary .s-per{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:-.01em;margin-left:2px;}
.summary .s-bars{display:flex;gap:3px;margin-top:12px;height:7px;border-radius:99px;overflow:hidden;}
.summary .s-bars i{display:block;height:100%;background:currentColor;}
.summary .s-lgd{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px;font-size:10.5px;color:var(--muted);}
.summary .s-lgd span{display:inline-flex;align-items:center;gap:5px;}
.summary .s-lgd .s-dot{width:7px;height:7px;border-radius:99px;background:currentColor;display:inline-block;}

/* 방 요약의 기간·진행 배지 — 배지는 브랜드색(상태 표시지 버튼이 아니다) */
.summary .s-when{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 8px;}
.summary .s-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;border-radius:999px;
  padding:3px 9px;background:var(--brand);color:#12140f;letter-spacing:-.01em;}
.summary .s-period{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* ── 선셋 미적용으로 남아 있던 파란 그라데이션 정리 ─────────────
   1) 홈의 '지금 여행 중' 카드: 파랑→흰 그라데이션이 그대로 남아 화면에서 유일하게 튀었다.
      (--accent 를 오프화이트로 바꾸면서 중간색이 흰색이 돼 더 밝아졌다)
      목업 히어로와 같은 처리 — 어두운 바탕 위 브랜드 글로우.
   2) 카드뽑기 뒷면·당첨 테두리도 같은 파랑이었다. */
.trip.big{
  background:
    radial-gradient(125% 95% at 10% -5%, rgba(255,106,61,.30), transparent 60%),
    radial-gradient(100% 80% at 92% 6%, rgba(255,209,102,.16), transparent 60%),
    linear-gradient(180deg,#1a1e24,#0c0d10);
  border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.trip.big:hover{box-shadow:0 14px 40px rgba(0,0,0,.55);}
.trip.big .nm{color:var(--ink);}
.trip.big .mt,.trip.big .chev{color:var(--muted);}
.trip.big .trip-tot{color:var(--ink);}
.mb-back{background:linear-gradient(135deg,#2a1d17,#3d2a1e);color:var(--brand);}
.mb-card.win .mb-front{border-color:var(--brand);box-shadow:0 0 0 2px rgba(255,106,61,.28);}

/* 방 관리 줄의 승인 대기 배지 — 상단바 배지를 옮겨옴 */
.rlink-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:99px;background:var(--brand);color:#12140f;font-size:10px;font-weight:800;
  vertical-align:1px;margin-left:3px;}

/* ══ 내 여행 = 달력 + 그 달 목록 ═════════════════════════════
   여행은 '하루 이벤트'가 아니라 기간이라, 점이 아니라 막대로 잇는다.
   막대 끝 모양이 정보다: 둥근 끝 = 여기서 끝 / 각지고 페이드된 끝 = 이어짐. */
:root{
  --h-v:#a78bfa; --h-m:#7ee0c0; --h-b:#8ab4ff; --h-p:#f472b6; --h-l:#a3e635; --h-c:#22d3ee;
}
.h-v{--h:var(--h-v);} .h-m{--h:var(--h-m);} .h-b{--h:var(--h-b);}
.h-p{--h:var(--h-p);} .h-l{--h:var(--h-l);} .h-c{--h:var(--h-c);}

/* 월 이동 — 화살표가 연월 양옆에 붙어야 '이 달을 넘긴다'가 바로 읽힌다.
   테두리 상자를 없애고 글리프만 굵게: 상자가 있으면 버튼이 주인공이 된다. */
.mnav{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 10px;position:relative;}
.mnav .m{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:7.2em;text-align:center;}
.mnav .marw{background:none;border:0;padding:6px 10px;margin:0;cursor:pointer;
  color:var(--ink);font-size:22px;font-weight:700;line-height:1;font-family:inherit;
  -webkit-tap-highlight-color:transparent;}
.mnav .marw:active{opacity:.5;}
/* '이번 달'로 되돌아가기 — 보조 동작이라 테두리만. (연도바를 없애면서
   .yearbar .ythis 스타일이 안 걸려 브라우저 기본 버튼이 그대로 나왔다) */
.mnav .ythis{position:absolute;right:0;background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;
  font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.mnav .ythis:active{background:var(--panel-2);color:var(--ink);}

/* 이 달 정산 요약 — 목록을 훑는 이유가 '정산 남았나'라서 맨 위에서 답한다 */
.mstrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:13px;padding:10px 13px;
  font-size:12.5px;font-weight:700;margin:12px 0 10px;border:1px solid var(--line);background:var(--panel);}
.mstrip.done{color:var(--muted);font-weight:600;}
.mstrip .ms-n{color:var(--ink);}
.mstrip .ms-n b{color:var(--cta);}
.mstrip .ms-in{color:var(--money-in);font-variant-numeric:tabular-nums;}
.mstrip .ms-out{color:var(--money-out);font-variant-numeric:tabular-nums;}

/* 행의 내 정산 상태 */
.triprow .tr-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;}
.triprow .tr-st{font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;}
.triprow .tr-st.in{color:var(--money-in);}
.triprow .tr-st.out{color:var(--money-out);}
.triprow .tr-st.done{color:var(--muted);font-weight:600;}

.cal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 10px 8px;}
.cdow{display:grid;grid-template-columns:repeat(7,1fr);font-size:10px;color:var(--muted);text-align:center;
  margin-bottom:6px;letter-spacing:.04em;}
.cdow span:first-child{color:#ff8a7a;}
.cwk{margin-bottom:4px;position:relative;}
/* 탭 대상 — 숫자와 막대를 합친 열 전체. 막대(13px)는 손가락으로 못 누른다.
   막대 위에 겹쳐 두고 막대 자체는 pointer-events 를 끈다. */
.chits{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);}
.chits span{display:block;border-radius:9px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.chits span.sel{box-shadow:inset 0 0 0 1.5px var(--cta);background:rgba(255,176,32,.09);}
.chits span:active{background:rgba(255,255,255,.05);}
.cbar{pointer-events:none;}
.cdays{display:grid;grid-template-columns:repeat(7,1fr);}
.cday{height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.cday.on{color:var(--ink);}
.cday.today{position:relative;color:var(--cta-ink);font-weight:800;}
.cday.today::before{content:"";position:absolute;width:22px;height:22px;border-radius:99px;background:var(--cta);}
.cday.today span{position:relative;}
.clanes{display:flex;flex-direction:column;gap:2px;padding-bottom:4px;min-height:4px;}
.clane{display:grid;grid-template-columns:repeat(7,1fr);height:13px;}
.clane.more{font-size:9.5px;color:var(--muted);padding-left:4px;height:12px;display:block;}
.cbar{height:13px;display:flex;align-items:center;font-size:9px;font-weight:800;color:#0c0d10;
  padding:0 5px;overflow:hidden;white-space:nowrap;letter-spacing:-.01em;cursor:pointer;
  background:var(--h,var(--muted));}
.cbar.se{border-radius:99px;}
.cbar.s{border-radius:99px 0 0 99px;}
.cbar.e{border-radius:0 99px 99px 0;}
.cbar.mid{border-radius:0;}
/* 잘린 끝을 페이드 — '여기서 끝'이 아니라 '밖으로 이어짐'을 뜻한다 */
.cbar.cut-r{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 6px);mask-image:linear-gradient(270deg,transparent 0,#000 6px);}
.cbar.cut-l{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6px);mask-image:linear-gradient(90deg,transparent 0,#000 6px);padding-left:9px;}
.cbar.cut-l.cut-r{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6px),linear-gradient(270deg,transparent 0,#000 6px);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 6px),linear-gradient(270deg,transparent 0,#000 6px);mask-composite:intersect;}

.sect-t{font-size:13px;font-weight:800;display:flex;align-items:center;gap:7px;margin:0 0 8px;}
.sect-t .chip.sm{font-size:10.5px;padding:3px 9px;font-weight:700;}
.sect-t em{font-style:normal;font-size:11px;color:var(--muted);font-family:var(--mono);}

.triprow{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  display:flex;align-items:center;gap:11px;margin-bottom:8px;cursor:pointer;}
.triprow .rail{width:3px;height:34px;border-radius:99px;flex:none;background:var(--h,var(--muted));}
.triprow .tx{flex:1;min-width:0;}
.triprow .tx b{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.triprow .tx span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.triprow .amt{font-size:13.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
/* .triprow .tx span 이 0,2,1 이라 .triprow .tag(0,2,0)를 이긴다 → 한 단계 더 준다 */
.triprow .tx .tag{font-size:9.5px;font-weight:800;border-radius:99px;padding:2px 7px;background:var(--brand);
  color:#12140f;margin-left:4px;vertical-align:1px;text-transform:none;letter-spacing:0;border:0;}
.triprow.pending{opacity:.7;}

/* ══ 손가락 탭 영역 ═══════════════════════════════════════════
   모바일이 기준인데 햄버거 26×26, 정산 완료 체크 24×24, 뒤로가기 23×29 처럼
   애플 권장(44×44)보다 작은 대상이 많았다. 보이는 크기는 그대로 두고
   보이지 않는 히트박스만 넓힌다(레이아웃에 영향 없게 ::after 로).
   ※ ::after 를 이미 쓰는 요소(.ai-bar 등)에는 걸지 않는다. */
.menub, .brand, .back, .mnav .marw, .mnav .ythis,
.st-chk, .tf-chk, .wl-chk, .iconbtn, .chev{ position:relative; }
.menub::after, .brand::after, .back::after, .mnav .marw::after, .mnav .ythis::after,
.st-chk::after, .tf-chk::after, .wl-chk::after, .iconbtn::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max(100%,44px); height:max(100%,44px); border-radius:12px;
}
/* 읽기 전용 체크는 누를 수 없으니 히트박스도 주지 않는다 */
.st-chk.ro::after, .tf-chk.ro::after{ display:none; }
/* 정산 로그 토글은 줄 자체가 눌리므로 세로 여백으로 키운다 */
.tf-by{ display:inline-block; padding:6px 0; }

/* ══ 누른 느낌 일관화 ═══════════════════════════════════════
   모바일에서 피드백이 없으면 "눌린 건가?" 싶어 두 번 누르게 된다.
   기존엔 25곳에만 :active 가 있었고 정작 가장 많이 누르는 액션 버튼엔 없었다.
   또 iOS 기본 파란 사각(tap-highlight)이 일부 화면에만 떠서 반응이 제각각이었다
   → 전역에서 끄고 우리 톤의 피드백으로 통일한다(끄기만 하면 오히려 무반응이 된다). */
button, [data-act], a, label, input, select, textarea{ -webkit-tap-highlight-color:transparent; }
/* 채움 버튼: 살짝 눌러 들어가는 느낌 */
.btn:active, .cta:active, .modebtn:active{ transform:scale(.985); filter:brightness(.92); }
.btn:disabled:active, .cta:disabled:active{ transform:none; filter:none; }
/* 카드·행: 배경만 살짝 */
.triprow:active, .trip:active, .memo:active{ background:var(--panel-2); }
/* 아이콘·작은 대상: 흐려짐 */
.menub:active, .back:active, .brand:active, .chev:active{ opacity:.55; }
.st-chk:active, .tf-chk:active, .wl-chk:active{ transform:scale(.9); }
/* 눌림 반응은 즉각적이어야 한다 — 길면 렉으로 느껴진다 */
.btn, .cta, .triprow, .trip, .menub, .back, .st-chk, .tf-chk, .wl-chk{ transition:transform .06s ease, filter .06s ease, background .12s ease; }
@media (prefers-reduced-motion: reduce){
  .btn, .cta, .triprow, .trip, .menub, .back, .st-chk, .tf-chk, .wl-chk{ transition:none; }
  .btn:active, .cta:active, .modebtn:active, .st-chk:active, .tf-chk:active, .wl-chk:active{ transform:none; }
}

/* ══ 지인 구매 ═══════════════════════════════════════════════
   여행 밖 돈이라 여행 색(브랜드 오렌지)과 구분되는 파랑을 쓴다.
   앰버(버튼)·초록(받을 돈)과도 겹치지 않는다. */
:root{ --favor:#8ab4ff; }
/* 지출 등록의 갈림길 */
.seg span.on.favor{background:var(--favor);color:#0b1420;}
.favorchips .chip.on{border-color:var(--favor);color:var(--favor);background:rgba(138,180,255,.1);}
.favorbox{margin-top:11px;border:1px solid rgba(138,180,255,.32);border-radius:12px;padding:11px 12px;
  background:rgba(138,180,255,.05);display:flex;flex-direction:column;gap:7px;}
.favorbox .fb-who{font-size:12.5px;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:5px;}
.favorbox .fb-who b{color:var(--favor);}
.favorbox .fb-chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);font-weight:600;cursor:pointer;}
.favorbox .fb-chk input{width:17px;height:17px;accent-color:var(--favor);}

/* 장부 */
.fv-hero{border-radius:15px;padding:14px;margin-bottom:14px;border:1px solid var(--line);
  background:radial-gradient(120% 95% at 10% -5%,rgba(138,180,255,.20),transparent 60%),linear-gradient(180deg,#171b22,#0c0d10);}
.fv-lb{font-size:11px;color:var(--muted);}
.fv-amt-big{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.15;}
.fv-sub{font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:7px;}
.fv-lock{margin-left:auto;font-family:var(--mono);font-size:9.5px;}
.fv-group{margin-bottom:16px;}
.fv-sum{font-size:12px;font-weight:800;color:var(--money-in);font-variant-numeric:tabular-nums;}
/* 섹션 헤더의 작은 버튼 — .chip 은 원래 <span> 용이라 색을 안 정한다.
   <button> 에 그대로 쓰면 UA 기본 글자색(검정)이 먹어 다크 배경에서 사라진다. */
.sect-t .chip.sm{font-size:10.5px;padding:4px 10px;font-weight:700;font-family:inherit;
  background:transparent;color:var(--muted);border:1px solid var(--line);cursor:pointer;}
.sect-t .chip.sm:active{background:var(--panel-2);color:var(--ink);}
.fv-card{padding:2px 12px;}
.fv-card.done{opacity:.55;}
.fv-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
.fv-row:last-child{border-bottom:0;}
.fv-cb{width:22px;height:22px;flex:none;border-radius:99px;border:2px solid #3a4150;background:transparent;
  color:transparent;font-size:12px;font-weight:800;display:grid;place-items:center;cursor:pointer;padding:0;position:relative;}
.fv-cb.on{background:var(--money-in);border-color:var(--money-in);color:#0b1a12;}
.fv-tx{flex:1;min-width:0;cursor:pointer;}
.fv-tx b{display:block;font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fv-tx small{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;}
.fv-amt{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.fv-amt.done{color:var(--muted);text-decoration:line-through;}
.fv-done-h{font-size:11px;font-weight:700;color:var(--muted);margin:8px 0 6px;}
.empty.sm{padding:14px;font-size:12.5px;}
.mi .mi-val.in{color:var(--money-in);font-weight:700;}

/* 벌크 큐에서 지인 구매 줄 표시 — 저장 전에 어느 게 지인 것인지 보여야 한다 */
.bk-favtag{display:inline-block;font-size:9.5px;font-weight:800;border-radius:5px;padding:2px 6px;
  background:rgba(138,180,255,.16);color:var(--favor);vertical-align:1px;margin-right:2px;}
.chips .chip.favor.on{border-color:var(--favor);color:var(--favor);background:rgba(138,180,255,.1);}
.bk-sheet2 .favorbox{margin:2px 0 10px;}

/* ── 지인 구매 토글 — 줄마다. 켜면 아래로 펼쳐지며 이름(선택)을 받는다 ── */
.bk-favline{display:flex;align-items:center;gap:10px;padding:8px 12px 10px;cursor:pointer;}
.bk-favline.plain{padding:0;}
.bk-favlb{flex:1;font-size:12.5px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px;}
.bk-row .bk-favline{border-top:1px solid var(--line);margin-top:2px;}
.bk-sw{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:99px;background:var(--panel-2);
  border:1px solid var(--line);position:relative;cursor:pointer;flex:none;margin:0;transition:background .16s ease;}
.bk-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:99px;
  background:var(--muted);transition:transform .16s ease, background .16s ease;}
.bk-sw:checked{background:rgba(138,180,255,.25);border-color:var(--favor);}
.bk-sw:checked::after{transform:translateX(16px);background:var(--favor);}
.bk-sw.sm{width:38px;height:23px;}
.bk-sw.sm::after{width:17px;height:17px;}
.bk-sw.sm:checked::after{transform:translateX(15px);}
.bk-favopen{padding:0 12px 12px;display:flex;flex-direction:column;gap:0;
  border-left:2px solid var(--favor);margin:0 12px 10px;padding-left:10px;}
.bk-favopen.sheet{margin:0 0 10px;}
.bk-favopen .bk-fi,.bk-favopen .input{width:100%;}
.bk-favopen .opt{margin-top:7px;}
.bk-row:has(.bk-sw:checked){border-color:rgba(138,180,255,.35);}

/* 지인 리포트 — 영수증을 함께 보낸다. 사진이 있으면 설명이 필요 없다. */
.fr-card{padding:2px 12px;}
.fr-row{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid var(--line);}
.fr-row:last-child{border-bottom:0;}
.fr-row.done{opacity:.5;}
.fr-shots{display:flex;gap:4px;flex:none;}
.fr-shot{width:46px;height:60px;object-fit:cover;border-radius:8px;background:var(--panel-2);cursor:pointer;}
.fr-noshot{width:46px;height:60px;border-radius:8px;background:var(--panel-2);color:var(--muted);
  display:grid;place-items:center;flex:none;}
.fr-tx{flex:1;min-width:0;}
.fr-tx b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.015em;}
.fr-tx span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
.fr-tx .fr-note{color:var(--favor);}
.fr-amt{text-align:right;flex:none;font-size:13.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.fr-krw{display:block;font-size:10px;font-weight:600;color:var(--muted);margin-top:2px;}
.fr-done{display:block;font-size:9.5px;font-weight:800;color:var(--money-in);margin-top:3px;}

/* 지인 리포트 공유 링크 */
.fr-link{border:1px solid rgba(138,180,255,.35);border-radius:14px;padding:12px 13px;margin-top:12px;
  background:rgba(138,180,255,.05);display:flex;flex-direction:column;gap:9px;}
.fr-link-h{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--favor);}
.fr-exp{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--muted);font-family:var(--mono);}
.fr-url{font-family:var(--mono);font-size:11px;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:9px 10px;word-break:break-all;cursor:pointer;line-height:1.5;}
.fr-link-b{display:flex;gap:6px;flex-wrap:wrap;}
.fr-link-b .btn.sm{flex:1;min-width:90px;}
.fr-link .opt{margin:0;}

/* 공유 링크 비밀번호 */
.pinwrap{display:flex;justify-content:center;margin-top:16px;}
.pinput{width:170px;text-align:center;font-size:30px;letter-spacing:.34em;padding:14px 10px;font-weight:800;}
.pinerr{color:var(--danger);font-size:12.5px;font-weight:700;text-align:center;margin:10px 0 0;}

/* ── 초대코드 만료 — 복사 전에 알아채게 ────────────────────────
   만료된 코드를 말없이 복사해 주면 받은 사람이 열어 본 뒤에야 안 된다는 걸 안다. */
.pill.dead{opacity:.45;text-decoration:line-through;border-color:var(--line);}
.mgrow .rt.danger{color:var(--danger);font-weight:700;}
.mgrow.dim .nm{color:var(--muted);}
.deadtag{display:inline-block;font-size:9.5px;font-weight:800;border-radius:5px;padding:2px 6px;margin-left:6px;
  background:rgba(255,90,95,.14);color:var(--danger);vertical-align:1px;}
.mgcap{margin:-4px 12px 10px;font-size:11px;line-height:1.55;}

/* ── "왜 이 금액이지" — 정산은 건별 채무를 상쇄해 이체를 최소로 만든다.
   그 과정이 안 보이면 "내가 냈는데 왜 또 내?"가 된다. ── */
.whyq{font-size:10.5px;font-weight:700;color:var(--muted);margin-left:6px;white-space:nowrap;}
.why{border-top:1px solid var(--line);margin-top:8px;padding:10px 2px 2px;}
.wy-h{display:flex;align-items:baseline;justify-content:space-between;font-size:11.5px;font-weight:800;
  color:var(--ink);margin:8px 0 4px;}
.wy-h:first-child{margin-top:0;}
.wy-h .mono{font-size:12px;font-variant-numeric:tabular-nums;}
.wy-i{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11.5px;
  color:var(--muted);padding:3px 0;}
.wy-i span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wy-i .mono{flex:none;font-variant-numeric:tabular-nums;}
.wy-net{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;font-weight:700;
  color:var(--ink);border-top:1px solid var(--line);margin-top:8px;padding-top:8px;}
.wy-net .dn{color:var(--money-out);} .wy-net .up{color:var(--money-in);}
.wy-rel{font-size:11px;line-height:1.6;color:var(--muted);margin-top:9px;padding:9px 10px;
  border-radius:10px;background:var(--panel-2);}
.wy-rel b{color:var(--ink);}
/* 항목이 30줄까지 나올 수 있다 — 카드가 화면을 통째로 밀어내지 않게 안에서 스크롤 */
.wy-list{max-height:46vh;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px;}
.why .wy-i{max-width:100%;}
/* 상계·전달 줄 — 항목이 아니라 «계산 과정»이라 선으로 구분한다 */
.wy-i.sub{color:var(--ink);font-weight:600;border-top:1px solid var(--line);margin-top:4px;padding-top:7px;}
.wy-i.tot{color:var(--ink);font-weight:800;}
.wy-i.tot .mono,.wy-i.sub .mono{font-size:12px;}
.wy-n{font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted);opacity:.75;
  margin-left:5px;padding:1px 4px;border:1px solid var(--line);border-radius:5px;}
/* 그 사람 전체 요약 — 항목 목록이 맞는지 대조하는 용도라 작게 */
.wy-sum{font-size:10.5px;line-height:1.6;color:var(--muted);margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--line);}
.wy-sum .mono{font-variant-numeric:tabular-nums;color:var(--ink);}
.wy-sum b.dn{color:var(--money-out);} .wy-sum b.up{color:var(--money-in);}

/* ── 정산 보기 전환 (합쳐서/통화별 · 최소이체/있는 그대로) ─────────────── */
.curtgl,.planbar{display:flex;gap:6px;margin:10px 0 0;}
.curtab,.plantab{flex:1;min-height:40px;padding:9px 8px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  font-size:12px;font-weight:700;letter-spacing:-.2px;transition:background .14s,color .14s,border-color .14s;}
.curtab.on,.plantab.on{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);}
.plantab i{font-style:normal;font-weight:800;opacity:.72;margin-left:4px;font-variant-numeric:tabular-nums;}
.curtab:active,.plantab:active{transform:scale(.98);}
/* 합산 모드의 «왜?»에서 원래 통화 금액 — 영수증과 대조하려면 이게 있어야 한다 */
.wy-loc{font-style:normal;font-size:10px;font-weight:700;color:var(--muted);opacity:.8;margin-right:6px;}
/* 환산 바 «적용 중» 상태 — 선셋 전환 때 빠진 곳. 예전 라이트 테마의 연파랑 배경(#eef5ff)이
   남아 흰 글씨와 겹쳐 «₩ 원화로 환산 중»이 안 보였다. .fxtgl.on 이 .fxtgl 보다 세서 안 덮였다. */
.fxtgl.on{ background:var(--panel-2)!important; border-color:var(--cta)!important; }
.fxtgl.on .fx-l{ color:var(--cta); }
/* 최소 이체가 «중간을 건너뛴다»는 안내 — 이걸 모르면 계산이 틀린 걸로 보인다 */
.planhint{font-size:11px;line-height:1.65;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin:8px 0 0;}
.planhint b{color:var(--ink);}
/* «왜?» 내역을 친구에게 그대로 보내기 — 스크롤해 손으로 옮겨 적는 걸 없앤다 */
.wy-acts{display:flex;gap:6px;margin-top:9px;}
.wybtn{flex:1;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 8px;border-radius:11px;cursor:pointer;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:-.2px;}
.wybtn:active{transform:scale(.98);}
.wybtn svg{opacity:.75;}
/* 카드 청구금액으로 환율 보정 — 명세서의 두 숫자를 그대로 받는다 */
.fxb{border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0 0;background:var(--panel-2);}
.fxb-h{font-size:13px;font-weight:800;color:var(--ink);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.fxb-now{font-size:10.5px;font-weight:700;color:var(--muted);margin-left:auto;}
.fxb-l{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:9px;}
.fxb-l .input{margin-top:5px;font-variant-numeric:tabular-nums;}
.fxb-out{margin-top:10px;padding:9px 10px;border-radius:10px;background:var(--panel);
  font-size:11.5px;color:var(--muted);text-align:center;}
.fxb-out.on{color:var(--ink);font-size:13px;font-weight:700;}
.fxb-out b{color:var(--cta);font-variant-numeric:tabular-nums;}
.fxb-gap{display:block;margin-top:3px;font-size:10.5px;font-weight:700;color:var(--muted);}
.fxr-mk{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:var(--muted);}
/* 카드 전용 체크 · 지출별 청구금액 · 환율 근거 */
.fxb-chk{display:flex;align-items:flex-start;gap:8px;margin:12px 2px 0;font-size:12px;color:var(--ink);cursor:pointer;}
.fxb-chk input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--cta);}
.fxb-chk i{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);margin-top:2px;}
.fxp{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel-2);}
.fxp summary{font-size:12px;font-weight:800;color:var(--ink);cursor:pointer;}
.fxp summary i{font-style:normal;font-weight:700;color:var(--muted);margin-left:5px;}
.fxp-c{font-size:10.5px;color:var(--muted);margin:7px 0 4px;line-height:1.6;}
.fxp-r{display:grid;grid-template-columns:1fr auto;gap:5px 8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);}
.fxp-n{font-size:11.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fxp-cash{font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 4px;margin-left:4px;}
.fxp-a{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.fxp-i{grid-column:1;min-height:38px;font-variant-numeric:tabular-nums;}
.fxp-o{grid-column:2;font-size:11px;font-weight:700;color:var(--cta);font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}
.wy-basis{font-size:10.5px;line-height:1.6;color:var(--muted);margin-top:8px;padding:8px 10px;
  border-radius:10px;background:var(--panel-2);border:1px solid var(--line);}
/* «왜?» 항목 한 줄 — 이름 / 내 몫 / 계산식·결제수단 */
.why .wy-i{display:grid;grid-template-columns:1fr auto;gap:1px 10px;padding:7px 0;align-items:baseline;}
.wy-nm{font-size:11.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wy-calc{grid-column:1/-1;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;}
.wy-pm{font-style:normal;opacity:.8;margin-left:4px;}
/* 묶음 — 계산 방식이 다르면 눈으로 바로 갈려야 한다 */
.wy-sec{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.wy-sec:first-child{margin-top:2px;}
.wy-g{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:11.5px;font-weight:800;color:var(--ink);background:var(--panel-2);padding:8px 11px;}
.wy-g i{font-style:normal;font-weight:700;color:var(--muted);margin-left:6px;
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:9.5px;}
.wy-g .mono{font-variant-numeric:tabular-nums;flex:none;}
.wy-rows{padding:2px 11px 6px;}
.wy-rows .wy-i + .wy-i{border-top:1px solid var(--line);}
.wy-gapnote{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);line-height:1.65;}
.wy-gapnote b{color:var(--ink);}
.wy-tiny{font-style:normal;font-size:10px;font-weight:600;color:var(--muted);margin-left:5px;}
.wy-flip{display:block;margin-top:5px;padding-top:5px;border-top:1px dashed var(--line);
  font-size:10px;line-height:1.6;color:var(--muted);}
.wy-flip b{color:var(--ink);}
/* 누가 나눴는지 — 방 상단과 같은 이니셜 칩 */
.wy-avs{display:inline-flex;vertical-align:-4px;margin-right:6px;}
.wy-avs .a{width:17px;height:17px;border-radius:50%;background:var(--line);color:var(--ink);
  display:grid;place-items:center;font-size:8.5px;font-weight:800;margin-left:-4px;
  border:1.5px solid var(--panel);}
.wy-avs .a:first-child{margin-left:0;}
.wy-avs .a.me{background:var(--cta);color:var(--cta-ink);}