/* =========================================================
   Expense Planner — 부드러운 파스텔 카드 UI (화이트/다크 테마)
   - 기준 디자인: 은은한 그라데이션 배경 + 큰 라운드 카드 + 영역별 파스텔 색
   - 테마는 <html data-theme="light|dark"> 로 전환한다. (js/theme-init.js, 메뉴의 테마 아이콘)
   ========================================================= */
:root, :root[data-theme="light"] {
  --bg: linear-gradient(135deg, #f5f7ff 0%, #f6f0fb 46%, #fdf5ec 100%);
  --text: #2a2f45; --muted: #7a8199; --line: rgba(110, 122, 175, .20);
  --card: rgba(255, 255, 255, .72); --inner: #ffffff;
  --head: rgba(255, 255, 255, .62);
  --t-blue: #e6eefd; --t-peach: #fdece5; --t-lav: #f1e9fb; --t-yellow: #fdf5dc; --t-pink: #fbe8f1; --t-white: rgba(255, 255, 255, .80);
  --accent: #4f6bed; --accent-soft: rgba(79, 107, 237, .12);
  --primary: #2b2f3e; --primary-text: #ffffff; --primary-hover: #444a60;
  --btn: rgba(255, 255, 255, .85); --btn-hover: #ffffff;
  --danger: #d6453d; --danger-soft: #fde4e2; --danger-text: #c0392f;
  --warn: #b7791f;
  --sat-bg: #dcebff; --sat-fg: #1b57b3; --sun-bg: #fde2e1; --sun-fg: #b3261e;
  --side: rgba(255, 255, 255, .72);
  --shadow: 0 1px 2px rgba(60, 70, 130, .06), 0 10px 28px -14px rgba(60, 70, 130, .28);
  --shadow-inner: 0 1px 3px rgba(60, 70, 130, .10), 0 6px 16px -10px rgba(60, 70, 130, .30);
  --scrim: rgba(30, 36, 70, .45);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: linear-gradient(135deg, #13151f 0%, #191626 48%, #1c1a1b 100%);
  --text: #e8eaf5; --muted: #979db6; --line: rgba(160, 170, 230, .16);
  --card: rgba(32, 36, 52, .78); --inner: #1b1e2c;
  --head: rgba(255, 255, 255, .05);
  --t-blue: #1d2640; --t-peach: #2b2023; --t-lav: #251f37; --t-yellow: #2a2619; --t-pink: #2b1f29; --t-white: rgba(30, 33, 48, .88);
  --accent: #8ea2ff; --accent-soft: rgba(142, 162, 255, .16);
  --primary: #e8eaf5; --primary-text: #1b1e2c; --primary-hover: #ffffff;
  --btn: rgba(255, 255, 255, .08); --btn-hover: rgba(255, 255, 255, .15);
  --danger: #ff7b70; --danger-soft: #4a2626; --danger-text: #ff9d95;
  --warn: #f0b95c;
  --sat-bg: #1f3a63; --sat-fg: #9cc7ff; --sun-bg: #4a2626; --sun-fg: #ff9d95;
  --side: rgba(26, 29, 43, .82);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
  --shadow-inner: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 16px -10px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root {
  /* 레이아웃 고정값 (1910px 기준: 1920px 화면에서 브라우저 윈도우 테두리가 차지하는 폭을 뺀 값) — 열 폭은 이 문자열이 들어가는 크기로 측정해 정했다 */
  --gap: 2px;
  --ic-memo: #d6457a; --ic-merchant: #3f78d0;
  --memo-bg: rgba(244, 143, 177, .14); --memo-line: rgba(233, 100, 140, .45); --memo-fg: #b0305f;
  --merchant-bg: rgba(100, 160, 240, .14); --merchant-line: rgba(70, 130, 220, .45); --merchant-fg: #2760b0;
  --both-bg: rgba(176, 150, 230, .17);
  --chip-ym: #e6edff; --chip-ym-line: #c3d1fb;
  --head-h: 36px;   /* 카드 제목 줄(가져오기 줄, 결제수단별, 내용별/사용처별, 사용내역 …)의 높이 — 모두 이 값을 쓴다 */
  --ctl-h: calc(var(--head-h) - 6px);   /* 제목 줄 안의 컨트롤 높이 = 제목 줄 − 테두리 2 − 위아래 안쪽 여백 4 */
  --menu-w: 250px;
  --settle-col: 316px;
  --w-date: 112px; --w-time: 64px; --w-dow: 30px; --w-check: 30px; --w-status: 34px; --w-del: 34px;
  --w-method: 213px;   /* "하나.세라젬_렌탈_플러스 (9594)" */
  --w-merchant: 200px; /* "디에떼에스프레소에트리융합점" */
  --w-amount: 84px;    /* 숫자 8자리 + 천단위 콤마 (99,999,999) */
  --footer-h: 24px;
  --radius: 0; --radius-in: 0;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.45, 0, .2, 1);   /* 느리게 시작해 부드럽게 끝남 (긴 전환용) */
  --hover-t: .2s;      /* 호버 확대 애니메이션 시간 */
  --t-menu: .25s;      /* 메뉴 줄이기/펼치기 */
  --t-pd: .5s;         /* 사용내역 지급일 열 접기/펴기 */
  --t-wide: .63s;      /* 사용내역 크게보기/원래보기 */
}

/* Pretendard 가변 글꼴(SIL OFL, public/fonts/SOURCE-pretendard.txt): 한글 2350자 + 영문/숫자/기호만 추린 하나의 파일(굵기 45~930 모두). 이 글자 밖은 아래 font-family 의 다음 글꼴로 표시된다 */
@font-face { font-family: "Pretendard"; src: url("../fonts/PretendardVariable-subset.woff2") format("woff2-variations"), url("../fonts/PretendardVariable-subset.woff2") format("woff2"); font-weight: 45 930; font-style: normal; font-display: swap; }
:root { --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; }
* { box-sizing: border-box; }
html { height: 100%; overflow-x: auto; overflow-y: hidden; } /* 1910px 보다 좁으면 가로 스크롤 (html 에 명시하지 않으면 body 의 overflow 가 전파되어 스크롤이 막힌다) */
body {
  margin: 0; height: 100%; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 14px/1.45 var(--font-sans);
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.stage { flex: 1 1 auto; min-height: 0; position: relative; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
h3 { font-size: .95rem; font-weight: 600; margin: 0; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.error { color: var(--danger); }
.contents { display: contents; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
dt { color: var(--muted); } dd { margin: 0; text-align: right; }
ol { padding-left: 1.2em; } details { margin: 8px 0; }

/* ---------- 버튼 / 입력 ---------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 0; background: var(--btn); color: var(--text);
  font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
button:hover, .btn:hover { background: var(--btn-hover); box-shadow: var(--shadow-inner); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; box-shadow: none; }
button.primary, button[type=submit] { background: var(--primary); color: var(--primary-text); border-color: transparent; }
button.primary:hover, button[type=submit]:hover { background: var(--primary-hover); }
button.primary:disabled:hover { background: var(--primary); }
button.icon-only, .btn.icon-only { padding: 6px 10px; }
.icon-btn { padding: 4px 8px; background: transparent; border-color: transparent; color: var(--muted); }
.icon-btn:hover { color: var(--text); background: var(--btn); }
.small-btn { padding: 2px 8px; font-size: .82rem; }
input[type=text], input:not([type]), input[type=number], input[type=date], input[type=month], select {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 0; background: var(--inner); color: var(--text); font: inherit; min-width: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input[type=text] { width: 100%; }
input:focus, select:focus, button:focus-visible, .otp-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type=date] { color-scheme: inherit; }
.avatar { width: 28px; height: 28px; border-radius: 0; flex: none; }
.avatar-ico { font-size: 26px; color: var(--accent); flex: none; }
.qr { width: 200px; height: 200px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 0; }
.secret { font-size: 1.05rem; letter-spacing: .08em; word-break: break-all; user-select: all; }
.codes { font-size: 1.05rem; line-height: 1.9; }
.codes code { letter-spacing: .06em; user-select: all; }

/* ---------- 스크롤바 숨김 + 위/아래 화살표 ---------- */
*:not(html) { scrollbar-width: none; }
*:not(html)::-webkit-scrollbar { display: none; }
.sh-wrap { position: relative; min-width: 0; min-height: 0; }
.sh-wrap > .sh-box { height: 100%; overflow: auto; }
.sh-arrow { display: none; position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; width: 34px; height: 22px; padding: 0; border-radius: 0;
  background: var(--primary); color: var(--primary-text); opacity: .30; font-size: .75rem; border: 0; }
.sh-arrow:hover { background: var(--primary); opacity: .8; box-shadow: none; }
.sh-up { top: 4px; } .sh-down { bottom: 4px; }

/* ---------- footer: 텍스트 한 줄 높이 ---------- */
.app-footer { flex: none; height: var(--footer-h); line-height: var(--footer-h); display: flex; justify-content: center; gap: 8px; padding: 0 12px; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.app-footer .sep { opacity: .6; }
.app-footer .build { font-variant-numeric: tabular-nums; }
.app-footer .powered a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.app-footer .powered a:hover { color: var(--accent); }

/* ---------- 로그인 전 ---------- */
.auth-page { height: 100%; display: flex; overflow-y: auto; padding: 12px; background: var(--bg) url(../img/login-bg.svg) center / cover no-repeat; }
:root[data-theme="dark"] .auth-page { background-blend-mode: soft-light; background-color: #13151f; }
.auth-page > .auth-card { margin: auto; }
.auth-card { width: min(440px, 100%); background: var(--card); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); overflow: hidden; animation: rise .5s var(--ease) both; }
.auth-card.wide-card { width: min(720px, 100%); }
.auth-card.split-card { width: min(860px, 100%); display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.auth-card.split-card.wide-card { width: min(980px, 100%); }
.auth-art { background: #6f8df0; display: flex; }
.auth-art img { width: 100%; height: 100%; object-fit: cover; }
.auth-body { padding: 28px 32px; }
.login-card { text-align: center; }
.login-card h1 { margin: 6px 0 4px; font-size: 1.7rem; }
.login-card .logo img { width: 64px; height: 64px; }
.google-btn { display: inline-flex; align-items: center; gap: 12px; margin: 18px 0 8px; padding: 10px 22px; background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: 0; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.google-btn:hover { background: #f6f9fe; color: #3c4043; }
.g-logo { width: 20px; height: 20px; }
.who-chip { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 6px 14px; background: var(--accent-soft); border-radius: 0; color: var(--text); font-weight: 600; font-size: 1.02rem; }
.who-chip i { color: var(--accent); }
.otp-label { display: block; margin: 12px 0 8px; font-weight: 600; }
.otp-label i { color: var(--accent); margin-right: 4px; }
.otp { display: flex; gap: 10px; }
.otp-box { flex: 1 1 0; min-width: 0; max-width: 52px; height: 62px; padding: 0; text-align: center; font-size: 1.7rem; font-weight: 600; border: 2px solid var(--line); border-radius: 0; background: var(--inner); color: var(--text); }
.otp-box:disabled { opacity: .55; }

/* ---------- 앱: 메뉴 영역 + 내용 (영역 사이 2px) ---------- */
.app-shell { min-width: 1910px; height: 100%; display: grid; grid-template-columns: var(--menu-w) minmax(0, 1fr); gap: var(--gap); padding: var(--gap); }
.app-shell > .sidebar { grid-column: 1; grid-row: 1; }
.app-shell > .content { grid-column: 2; grid-row: 1; min-height: 0; overflow: auto; }   /* 페이지 전체에는 스크롤 힌트(화살표)를 쓰지 않는다 */
.app-shell > .content-mask { grid-column: 2; grid-row: 1; }
.card, .area {
  background: var(--tint, var(--card)); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.tint-blue { --tint: var(--t-blue); } .tint-peach { --tint: var(--t-peach); } .tint-lav { --tint: var(--t-lav); }
.tint-yellow { --tint: var(--t-yellow); } .tint-pink { --tint: var(--t-pink); } .tint-white { --tint: var(--t-white); }
.card { padding: 6px 8px 8px; min-width: 0; }
.card:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.card.fill { display: flex; flex-direction: column; min-height: 0; }
.card.fill > .sh-wrap { flex: 1 1 0; min-height: 0; }

.sidebar { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--side); overflow: hidden; }
.brand { display: flex; align-items: center; gap: 6px; padding: 12px 10px 8px; font-weight: 700; font-size: .82rem; letter-spacing: -.02em; white-space: nowrap; }
.brand img { width: 24px; height: 24px; }
.sidebar > .sh-wrap { flex: 1 1 0; min-height: 0; }
.menu-scroll { height: 100%; }
.menu, .tree { list-style: none; margin: 0; padding: 0; }
.menu > li { margin: 2px 0; }
.menu a { color: var(--text); text-decoration: none; display: block; padding: 8px 12px; margin: 0 6px; border-radius: 0; transition: background .2s var(--ease); }
.menu a:hover { background: var(--accent-soft); }
.menu a.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.menu-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; padding: 4px 6px 4px 18px; }
.tree li { display: flex; align-items: center; justify-content: space-between; }
.tree li > a { flex: 1; padding: 6px 4px 6px 26px; font-size: .88rem; white-space: nowrap; }
.tree .count { font-size: .72rem; color: var(--muted); padding-right: 4px; white-space: nowrap; }
.tree li.muted { padding: 6px 12px 6px 28px; }
.new-month { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 8px 8px 20px; }
.new-month input[type=month] { flex: 1 1 0; min-width: 0; padding: 3px 4px; font-size: 13px; }
.new-month button { flex: none; padding: 4px 9px; }
.new-month .error { flex: 1 1 100%; }
.menu-bottom { flex: none; border-top: 1px solid var(--line); padding-top: 4px; }
.who.dock { padding: 6px 8px 8px 12px; }
.who-row { display: flex; align-items: center; gap: 4px; }
.who-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 2px; }
.who-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

.content { min-width: 0; height: 100%; padding: 0; }
.content > .banner, .content > .card, .content > .settings-view { margin-bottom: var(--gap); }

/* ---------- 월간내역 ---------- */
.month-view { height: 100%; display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.month-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 10px; height: 30px; }
.month-head h2 { margin: 0; font-size: 1rem; }
.work { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--gap) calc(var(--settle-col) * 2 + var(--gap)); column-gap: 0; }
.work > .usage { grid-column: 1; } .work > .work-bar { grid-column: 2; } .work > .settle, .work > .settle-strip { grid-column: 3; }
.work.wide { grid-template-columns: minmax(0, 1fr) var(--gap) 46px; }
.usage { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.usage > .card.fill { flex: 1 1 0; }
.settle { min-width: 0; min-height: 0; display: flex; flex-direction: column; width: calc(var(--settle-col) * 2 + var(--gap)); }
.settle-top { flex: 0 0 66%; min-height: 0; display: grid; grid-template-columns: var(--settle-col) var(--settle-col); gap: var(--gap); }
.settle-col { min-height: 0; display: flex; flex-direction: column; }
.settle-col > .card.fill { flex: 1 1 0; }
.settle-top > .card.fill { min-height: 0; }
.settle > .card.fill { flex: 1 1 0; min-height: 0; }
.split-bar { flex: none; height: var(--gap); position: relative; cursor: row-resize; z-index: 4; }
.split-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }   /* 잡기 쉽게 위아래로 넓힌 히트 영역 */
.split-bar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 4px; margin: -2px 0 0 -22px; border-radius: 0; background: var(--line); opacity: 0; transition: opacity .2s var(--ease), background .2s var(--ease); }
.split-bar:hover::after, .split-bar:focus-visible::after, .split-bar.dragging::after { opacity: 1; background: var(--accent); }
.split-bar:focus-visible { outline: none; }

.card-title { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--head-h); padding: 2px 8px; margin: 0 0 4px; border: 1px solid var(--line); border-radius: 0; background: var(--head); }
.card-title h3 { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title h3 i { color: var(--accent); }
.card-title .total { color: var(--muted); white-space: nowrap; }
.card-title .total strong { color: var(--text); font-variant-numeric: tabular-nums; }
.card-title button { padding: 3px 10px; }
.tabs { display: flex; gap: 2px; }
.tab { background: transparent; border-color: transparent; padding: 3px 12px; border-radius: 0; color: var(--muted); }
.tab.active { background: var(--primary); color: var(--primary-text); }
.note { margin: 4px 2px 0; flex: none; }

/* 엑셀 가져오기: 금융기관 고정 / 파일 아이콘 / 파일 이름(남는 공간) / 가져오기(오른쪽 고정) */
.card-title.import-row { justify-content: flex-start; gap: 6px; margin-bottom: 0; }   /* 가져오기 줄도 다른 카드와 같은 제목 줄(div.card-title) */
.import-row > .btn, .import-row > button, .import-row > .fname-box { height: var(--ctl-h); }
.inst-pick { flex: none; width: 190px; display: flex; align-items: center; gap: 6px; }
.inst-pick inst-select { flex: 1; min-width: 0; display: block; }
/* 금융기관 선택(inst-select): 로고 + 이름을 함께 보여 주는 드롭다운 */
.is-btn { width: 100%; height: var(--ctl-h); display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; text-align: left; border: 1px solid var(--line); border-radius: 0; background: var(--inner); color: var(--text); font: inherit; cursor: pointer; }
.is-btn:hover { background: var(--inner); border-color: var(--accent); box-shadow: none; }
.is-btn .inst-icon { width: calc(var(--ctl-h) - 2px); height: calc(var(--ctl-h) - 2px); border: 0; border-right: 1px solid var(--line); }
.is-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-caret { flex: none; font-size: .75rem; color: var(--muted); transition: transform var(--hover-t) var(--ease); }
.is-btn[aria-expanded="true"] .is-caret { transform: rotate(180deg); }
.is-pop { z-index: 70; margin: 0; padding: 0; list-style: none; overflow-y: auto; background: var(--inner); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); }
.is-opt { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; cursor: pointer; }
.is-opt.hot { background: var(--accent-soft); }
.is-opt.sel .is-name { font-weight: 600; }
.is-opt.off { opacity: .45; cursor: not-allowed; }
.is-check { flex: none; font-size: .8rem; color: var(--accent); }
.inst-icon { width: 30px; height: 30px; flex: none; object-fit: contain; border-radius: 0; border: 1px solid var(--line); background: #fff; }
.file-btn input { display: none; }
.fname-box { flex: 0 3 200px; min-width: 90px; width: 200px; height: var(--ctl-h); line-height: calc(var(--ctl-h) - 2px); padding: 0 10px; border: 1px solid var(--line); border-radius: 0; background: var(--inner); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.import-go { flex: none; }
.import-res { flex: 1 1 auto; min-width: 0; margin-left: 6px; display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; overflow: hidden; }   /* 가져오기 버튼 오른쪽, 한 줄(제목 줄 높이는 그대로) */
.import-res .contents { display: flex; align-items: center; gap: 4px; flex: none; }
.import-res .error { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { background: var(--accent-soft); padding: 1px 10px; border-radius: 0; font-size: .82rem; white-space: nowrap; }
.pill.ok { background: var(--primary); color: var(--primary-text); }
.pill.warn { background: var(--head); color: var(--warn); }
.import-detail { margin-top: 4px; padding: 4px 10px; background: var(--head); border-radius: 0; font-size: .85rem; max-height: min(46vh, 380px); overflow: auto; }
.import-detail p { margin: 2px 0; }
.banner { display: flex; align-items: center; gap: 8px; flex: none; border-radius: 0; padding: 4px 10px; margin: 0 0 4px; background: var(--head); border: 1px solid var(--line); }
.banner.warn { background: transparent; border-color: var(--line); color: var(--text); }
.banner.warn i { color: var(--warn); }
.banner.bad { color: var(--danger); }

/* ---------- 표: 헤더는 가운데, 금액은 콤마 + 오른쪽 ---------- */
.table-wrap { background: var(--inner); border-radius: 0; box-shadow: var(--shadow-inner); overflow: auto; }
table.grid, table.sum { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
table.grid th, table.grid td, table.sum th, table.sum td { padding: 3px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.grid thead th, table.sum thead th { position: sticky; top: 0; z-index: 1; text-align: center; font-weight: 600; background: var(--inner); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); }
table.grid, table.fixed { table-layout: fixed; }
table.grid td.center, table.sum td.center, td.center { text-align: center; }
table.grid td.num, table.sum td.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tbody tr:hover td, table.sum tbody tr:hover td { background: var(--accent-soft); }
tr.draft td { background: var(--accent-soft); }
/* 별칭 미적용 등 경고 행은 배경색 없이 상태 칸의 ⚠ 아이콘으로만 표시한다 */
col.c-date { width: var(--w-date); } col.c-time { width: var(--w-time); } col.c-dow { width: var(--w-dow); }
col.c-check { width: var(--w-check); } col.c-status { width: var(--w-status); } col.c-del { width: var(--w-del); }
col.c-method { width: var(--w-method); } col.c-merchant { width: var(--w-merchant); } col.c-amount { width: var(--w-amount); }
/* 정산 영역의 요약 표: 표는 카드 폭을 모두 쓰고, 총액 열은 숫자 8자리 폭(--w-amount)으로 오른쪽에 고정, 나머지는 이름 열이 쓴다 */
table.fixed.two { width: 100%; }
table.grid input:not([type=checkbox]) { width: 100%; padding: 2px 4px; font-size: 12.5px; border-radius: 0; border-color: transparent; background: transparent; }
table.grid input:not([type=checkbox]):hover { border-color: var(--line); }
table.grid input:not([type=checkbox]):focus { background: var(--inner); border-color: var(--accent); }
table.grid input.in-date, table.grid input.in-time { text-align: center; padding: 2px 0; }
table.grid input.in-money { text-align: right; font-variant-numeric: tabular-nums; }
/* 비어 있는 날짜 칸(지급일 등)은 안내 문구를 흐리게 */
input[type=date].ng-empty:not(:focus):not(:hover) { color: var(--muted); opacity: .45; }
input[type=month]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator { margin: 0 0 0 2px; padding: 0; opacity: .55; cursor: pointer; }
td.dow { font-weight: 600; }
td.dow.sat { background: var(--sat-bg); color: var(--sat-fg); }
td.dow.sun { background: var(--sun-bg); color: var(--sun-fg); }
td.status i { font-size: .9rem; }
.st-warn { color: var(--warn); }
.st-info { color: var(--accent); }   /* 안내(환율 환산 등): 경고가 아니다 */
.del-btn { padding: 3px 8px; background: var(--danger-soft); color: var(--danger-text); border-color: transparent; border-radius: 0; }
.del-btn:hover { background: var(--danger-soft); color: var(--danger); box-shadow: var(--shadow-inner); }
.draft-actions { white-space: nowrap; }
.draft-actions button { padding: 2px 8px; }

/* 보충 이체기록: 정산 영역 폭 안에 들어가도록 결제수단/사용처 폭만 줄이고 말줄임 + 툴팁으로 처리 */
table.sup { width: 100%; }
col.c-sdate { width: 88px; } col.c-smethod { width: 126px; } col.c-smerchant { width: 114px; } col.c-samount { width: var(--w-amount); } col.c-sdate-in { width: 122px; }
table.sup input.in-date { width: 100%; text-align: center; padding: 2px 0; font-size: 12px; }

/* ---------- 설정 ---------- */
.settings-view { padding-bottom: 4px; }
.set-group { margin-bottom: var(--gap); }
.group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--gap); padding: 6px 14px; border-radius: 0; background: var(--head); border: 1px solid var(--line); font-size: 1rem; }
.group-title i { color: var(--accent); }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.set-row .card { margin: 0; padding: 8px 10px 10px; }
.set-group:nth-of-type(1) .set-row .card:nth-child(1) { --tint: var(--t-blue); }
.set-group:nth-of-type(1) .set-row .card:nth-child(2) { --tint: var(--t-lav); }
.set-group:nth-of-type(2) .set-row .card:nth-child(1) { --tint: var(--t-yellow); }
.set-group:nth-of-type(2) .set-row .card:nth-child(2) { --tint: var(--t-peach); }
.set-group:nth-of-type(3) .set-row .card:nth-child(1) { --tint: var(--t-pink); }
.set-group:nth-of-type(3) .set-row .card:nth-child(2) { --tint: var(--t-blue); }
.row-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.row-inline input[type=text], .row-inline input:not([type]) { width: auto; flex: 1 1 160px; }
.w-wide { min-width: 200px; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: var(--head); border: 1px solid var(--line); border-radius: 0; padding: 2px 10px; }
.settings-view table.sum td, .settings-view table.sum th { white-space: normal; }
.settings-view table.sum { background: var(--inner); border-radius: 0; }
.modal-backdrop { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-start; justify-content: center; padding: 40px 12px; z-index: 10; overflow-y: auto; }
.modal { background: var(--inner); color: var(--text); border-radius: 0; box-shadow: var(--shadow); padding: 16px; max-width: 760px; width: 100%; animation: rise .3s var(--ease) both; }

/* ---------- 모션: 카드가 부드럽게 떠오른다 (참고 영상의 느낌) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.work .card, .month-head, .set-group { animation: rise .45s var(--ease) both; }
.work .usage .card:nth-child(2) { animation-delay: .05s; }
.work .settle-top .card, .work .settle-col .card:nth-child(1) { animation-delay: .08s; }
.work .settle-col .card:nth-child(3) { animation-delay: .12s; }
.work .settle > .card { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* =========================================================
   [2026/11/11] 6. 피드백 — 마스크, 호버 확대, 정렬/필터, 설정 가로 분할, 로그인
   ========================================================= */

/* ---------- 서버 응답을 기다릴 때: 마스킹 + 애니메이션 ---------- */
.mask { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: var(--mask); backdrop-filter: blur(2px); animation: fade-in .15s var(--ease) both; cursor: progress; }
.content-mask { position: relative; }
.mask-box { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--inner); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mask-text { font-weight: 600; }
/* 생각하는 중: 8갈래 반짝이가 천천히 돌면서 갈래마다 차례로 깜빡이고 맥동한다 */
.spark { display: inline-flex; width: 34px; height: 34px; color: var(--spark); animation: spark-spin 4s linear infinite; }
.spark svg { width: 100%; height: 100%; fill: currentColor; animation: spark-pulse 1.6s ease-in-out infinite; }
.spark rect { opacity: .22; animation: spark-fade 1.2s ease-in-out infinite; }
.spark rect:nth-child(2) { animation-delay: .15s; } .spark rect:nth-child(3) { animation-delay: .3s; } .spark rect:nth-child(4) { animation-delay: .45s; }
.spark rect:nth-child(5) { animation-delay: .6s; } .spark rect:nth-child(6) { animation-delay: .75s; } .spark rect:nth-child(7) { animation-delay: .9s; } .spark rect:nth-child(8) { animation-delay: 1.05s; }
@keyframes spark-spin { to { transform: rotate(360deg); } }
@keyframes spark-pulse { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.05); } }
@keyframes spark-fade { 0%, 100% { opacity: .22; } 40% { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
:root, :root[data-theme="light"] { --mask: rgba(255, 255, 255, .55); --spark: #d97757; }
:root[data-theme="dark"] { --ic-memo: #f08fb3; --ic-merchant: #8ab8f5; --memo-bg: rgba(240, 120, 160, .13); --memo-line: rgba(240, 120, 160, .45); --memo-fg: #f5a3c0; --merchant-bg: rgba(110, 165, 245, .13); --merchant-line: rgba(110, 165, 245, .45); --merchant-fg: #9cc4f8; --both-bg: rgba(175, 140, 240, .17);
  --chip-ym: rgba(142, 162, 255, .18); --chip-ym-line: rgba(142, 162, 255, .4); --mask: rgba(14, 16, 26, .6); --spark: #f0a07e; }
.auth-card { position: relative; }

/* ---------- 클릭할 수 있는 것은 마우스를 올리면 10% 커진다 ---------- */
button, .btn, a, input[type=checkbox], th.sortable .th-t, th.sortable .sort-i, .cf-btn, .cf-item, label.cf-item { transition: transform var(--hover-t) var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
button:not(:disabled):hover, .btn:hover, a:hover, input[type=checkbox]:not(:disabled):hover, th.sortable:hover .th-t, th.sortable:hover .sort-i { transform: scale(1.1); }
button:not(:disabled):active, .btn:active { transform: scale(1.04); }
/* 메뉴 링크는 줄 전체가 아니라 글자(.lbl)만 커진다 (줄 전체가 커지면 옆의 'xx건'/삭제 아이콘을 덮고 카드 밖으로 잘린다) */
.menu a:hover, .tree li > a:hover { transform: none; }
.menu a .lbl, .tree a .lbl { display: inline-block; transition: transform var(--hover-t) var(--ease); transform-origin: left center; }
.menu a:hover .lbl, .tree li > a:hover .lbl { transform: scale(1.1); }
.sh-arrow:hover { transform: translateX(-50%) scale(1.1); }
.sh-arrow:active { transform: translateX(-50%) scale(1.04); }
.split-bar:hover, .sp-bar:hover { transform: none; }
th.sortable .th-t, th.sortable .sort-i { display: inline-block; }

/* ---------- 정렬(오름/내림 토글) + 열 필터 ---------- */
th.sortable { cursor: pointer; user-select: none; }
.sort-i { margin-left: 4px; font-size: .7rem; color: var(--muted); opacity: .55; }
th.sortable.active .sort-i { color: var(--accent); opacity: 1; }
/* 필터 버튼: 헤더 클릭은 정렬이라, 정렬로 잘못 눌리지 않게 테두리가 있는 큰 버튼(24px)으로 글자/정렬 아이콘과 떨어뜨린다 */
.cf-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 24px; height: 24px; padding: 0; margin-left: 8px; background: var(--btn); border: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: .8rem; cursor: pointer; }
.cf-btn:hover { background: var(--btn-hover); border-color: var(--accent); color: var(--accent); }
.cf-btn.on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.cf-pop { z-index: 60; background: var(--inner); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 360px; font-size: 13px; }
.cf-pop input[type=text] { width: 100%; padding: 4px 6px; font-size: 13px; }
.cf-list { overflow: auto; max-height: 210px; border: 1px solid var(--line); padding: 2px 0; }
.cf-item { display: flex; align-items: center; gap: 6px; padding: 2px 6px; cursor: pointer; white-space: nowrap; }
.cf-item span { overflow: hidden; text-overflow: ellipsis; }
.cf-item:hover { background: var(--accent-soft); transform: none; }
.cf-all { font-weight: 600; padding: 2px 6px; }
.cf-none { padding: 6px; }
.cf-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cf-actions button { padding: 3px 10px; }

/* ---------- 사용내역 제목 줄: 가운데에 합계, 오른쪽에 추가/삭제 아이콘 ---------- */
.card-title.t3 { display: grid; grid-template-columns: 1fr auto 1fr; }
.title-sum { text-align: center; font-size: 1.15rem; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.title-sum strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.title-sum small { font-size: .75rem; font-weight: 400; color: var(--muted); }
.title-actions { display: flex; gap: 6px; justify-content: flex-end; }
.add-btn { padding: 2px 10px; }
.add-btn i { font-size: 1.25rem; }
.del-all { padding: 3px 10px; color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.del-all:disabled { color: var(--muted); background: var(--btn); opacity: .6; }
.del-all .cnt { margin-left: 4px; font-size: .78rem; font-weight: 700; }
.del-head, .del-cell { white-space: nowrap; }
.del-cell input[type=checkbox], .del-head input[type=checkbox] { vertical-align: middle; margin: 0 2px; }
.del-btn { color: var(--danger); }
.del-btn i { color: var(--danger); }
tr.selected td { background: var(--accent-soft); }

/* ---------- 메뉴: 월 삭제 아이콘은 마우스를 올릴 때만 'xx건' 오른쪽에 나타난다 (자리는 항상 확보) ---------- */
.tree .tree-del { flex: none; width: 24px; padding: 2px 0; margin-right: 6px; background: transparent; border-color: transparent; color: var(--danger); visibility: hidden; opacity: 0; box-shadow: none; }
.tree li:hover .tree-del, .tree .tree-del:focus-visible { visibility: visible; opacity: 1; }
.tree .tree-del:hover { background: var(--danger-soft); box-shadow: none; }
.menu-err { margin: 2px 12px 4px 24px; }
.icon-btn.on { color: var(--accent); background: var(--accent-soft); }

/* ---------- 설정: 카드/은행 별칭 : 결제수단 : (시스템 설정 + 서버 상태) = 4 : 4 : 2, 폭/높이 조절 ---------- */
.settings-view { height: 100%; display: flex; flex-direction: column; gap: var(--gap); }
.set-toolbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 2px 10px; }
.set-toolbar h2 { margin: 0; font-size: 1.05rem; }
.set-toolbar h2 i { color: var(--accent); margin-right: 4px; }
.set-cols { flex: 1 1 0; min-height: 0; display: flex; }
.sp-pane { min-width: 0; min-height: 0; }
.sp-bar { flex: none; width: var(--gap); position: relative; cursor: col-resize; z-index: 4; }
.sp-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px; }
.sp-bar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; background: var(--line); opacity: 0; transition: opacity .2s var(--ease), background .2s var(--ease); }
.sp-bar:hover::after, .sp-bar:focus-visible::after, .sp-bar.dragging::after { opacity: 1; background: var(--accent); }
.sp-bar:focus-visible { outline: none; }
.set-cols .card.fill { margin: 0; }
col.c-created { width: 128px; } col.c-act { width: 40px; }
table.set-table td { white-space: nowrap; }
table.set-table input[type=text] { width: 100%; padding: 2px 4px; font-size: 12.5px; }
table.set-table input.in-date { text-align: center; padding: 2px 0; }
.set-cols .row-inline { flex: none; flex-wrap: nowrap; }
.set-cols .row-inline input { flex: 1 1 0; min-width: 0; }
.set-cols .row-inline button { flex: none; }
.set-cols p.small { flex: none; margin: 0 0 4px; }
.status-dl { padding: 6px 8px; }
.personal-view .set-row { align-items: start; }
.personal-view .card { padding: 8px 10px 10px; }

/* ---------- 로그인: 왼쪽 이미지 ---------- */
.auth-card.login-card { width: min(780px, 100%); min-height: 480px; grid-template-columns: 320px minmax(0, 1fr); }
.auth-art.gold { background: #d9b45a; }
.auth-art.gold img { object-fit: cover; object-position: center; }
.login-body { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.login-card h1 { font-size: 1.5rem; line-height: 1.35; word-break: keep-all; }

/* ---------- 좁은 열의 헤더(요일/지급/보충)와 삭제 열(체크박스 + 아이콘)이 잘리지 않게 ---------- */
table.grid thead th { padding: 3px 1px; font-size: 12px; }
table.grid thead th.sortable { padding: 3px 3px; }
table.grid td.del-cell, table.grid th.del-head { padding: 3px 2px; }
.del-cell .del-btn { padding: 2px 5px; }
.del-cell input[type=checkbox], .del-head input[type=checkbox] { margin: 0 1px; }

/* ---------- 설정 줄: 테마 아이콘은 오른쪽 끝에 고정 ---------- */
.menu-row { display: flex; align-items: center; }
.menu-row > a { flex: 1; min-width: 0; }
.menu-row .theme-btn { flex: none; margin-right: 8px; }
.menu-row .help-btn { flex: none; margin-right: 2px; }   /* 도움말 버튼은 테마 버튼 왼쪽 */
.spark.sm { width: 22px; height: 22px; }
.auth-body.checking { display: flex; align-items: center; justify-content: center; gap: 10px; }
.inst-fa { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.05rem; }

/* 월간내역 메뉴: 그룹 제목(내 정보 / '이름'님) */
.tree li.tree-group { justify-content: flex-start; gap: 4px; padding: 6px 6px 2px 18px; font-size: .8rem; font-weight: 600; color: var(--muted); }
/* 개인화: 공유대상 체크 목록 */
.share-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 240px; overflow: auto; }
.share-list li { padding: 3px 0; }
.share-list label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.share-name { font-weight: 600; }
.shared-view .month-head { display: flex; align-items: center; gap: 10px; }

/* 표 머리글 안의 작은 동작 아이콘(이체날짜 일괄적용) */
.th-act { flex: none; width: 22px; height: 22px; padding: 0; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); }
.th-act:hover:not(:disabled) { background: var(--accent-soft); }
.th-act:disabled { opacity: .35; cursor: default; }

/* 월간내역: 사용내역 | 정산 영역 사이 크기 조절 막대 */
.work-bar { position: relative; cursor: col-resize; z-index: 4; }
.work-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px; }   /* 잡기 쉽게 좌우로 넓힌 히트 영역 */
.work-bar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; background: var(--line); opacity: 0; transition: opacity .2s var(--ease), background .2s var(--ease); }
.work-bar:hover::after, .work-bar:focus-visible::after, .work-bar.dragging::after { opacity: 1; background: var(--accent); }
.work-bar:focus-visible { outline: none; }

/* 크게보기: 정산 영역은 오른쪽 아이콘 줄로만 */
.settle-strip { display: flex; flex-direction: column; gap: var(--gap); }
.strip-btn { width: 100%; height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--accent); background: var(--card); border: 1px solid var(--line); border-radius: 0; }
.strip-btn:hover { background: var(--accent-soft); }
.title-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wide-btn { padding: 2px 7px; }

/* 열람 전용: 같은 화면에서 편집만 막는다 */
.month-view.ro input[readonly] { cursor: default; }
.month-view.ro input:disabled { opacity: .85; cursor: default; }
.ro-pill { margin-right: auto; margin-left: 10px; }

/* 메뉴 줄이기: 아이콘만, 설명은 툴팁(title) */
.brand .collapse-btn { margin-left: auto; padding: 2px 6px; }
.app-shell.collapsed { --menu-w: 64px; }
.collapsed .brand img { width: 28px; height: 28px; }
.collapsed .menu a { padding: 8px 0; text-align: center; }
.collapsed .menu-head { justify-content: center; padding: 4px 0; }
.collapsed .tree li { justify-content: center; }
.collapsed .tree li > a { padding: 6px 0; text-align: center; }
.collapsed .tree li.tree-group { justify-content: center; padding: 6px 0 2px; }
.collapsed .menu-row { flex-direction: column; align-items: stretch; }
.collapsed .menu-row > a { flex: none; width: auto; }
.collapsed .menu-row > a .lbl i { font-size: 1.15rem; }
.collapsed .menu-row .theme-btn, .collapsed .menu-row .help-btn { align-self: center; margin: 0 0 4px; padding: 3px 6px; font-size: .75rem; }   /* 설정 아이콘보다 작게 */
.collapsed .who.dock { padding: 6px 0 8px; }
.collapsed .who-row { flex-direction: column; align-items: center; gap: 4px; }
.collapsed .who-row .avatar { width: 38px; height: 38px; }
.collapsed .who-row .avatar-ico { font-size: 36px; }
.collapsed .who-row .icon-btn { padding: 3px 6px; font-size: .75rem; }   /* 아바타보다 작게 */

/* 공유받은 월에는 삭제 버튼이 없지만, 건수 위치가 내 월과 같도록 같은 크기의 빈 자리를 둔다 */
.tree .tree-del-ph { flex: none; width: 24px; margin-right: 6px; }

/* ---------- 애니메이션: 메뉴 줄이기/펼치기(--t-menu 0.25s), 지급일 열 접기/펴기(--t-pd 0.5s), 크게보기/원래보기(--t-wide 0.63s). 호버는 --hover-t 0.2s ---------- */
/* 눈에 보이게 하는 방법
   1) 곡선: 앞쪽에 몰리는 --ease 대신, 느리게 시작해 부드럽게 끝나는 --ease-io 를 쓴다.
   2) 지급일 열/크게보기는 "페이드 아웃 → 폭", "폭 → 페이드 인" 으로 구간을 나눈다(전환은 도착한 상태 .pd-fold/.wide 의 값을 따른다).
      메뉴는 구간을 나누면 글자가 먼저 사라지고 폭이 뒤따라 어색해서 폭과 페이드를 동시에 진행한다.
   3) 움직임: 사라지는 글자는 왼쪽으로 살짝 밀린다. */
/* 메뉴 폭: 사용자 지정 속성을 길이로 등록해야 값이 서서히 바뀐다. 글자 페이드와 폭 변화는 같은 시점에 시작해 같이 끝난다(순차로 하면 어색하다) */
@property --menu-w { syntax: '<length>'; inherits: true; initial-value: 250px; }
.app-shell { transition: --menu-w var(--t-menu) var(--ease-io); }
.sidebar .t { display: inline-block; max-width: 190px; overflow: hidden; white-space: nowrap; vertical-align: bottom; opacity: 1; transform: none; transition: opacity var(--t-menu) linear, transform var(--t-menu) var(--ease-io), max-width var(--t-menu) var(--ease-io); }
.tree .count { display: inline-block; max-width: 56px; overflow: hidden; opacity: 1; transition: opacity var(--t-menu) linear, max-width var(--t-menu) var(--ease-io), padding var(--t-menu) var(--ease-io); }
.tree .tree-del, .tree .tree-del-ph { transition: width var(--t-menu) var(--ease-io), margin var(--t-menu) var(--ease-io), opacity var(--t-menu) linear; }
.who-name { max-width: 200px; transition: flex var(--t-menu) var(--ease-io), max-width var(--t-menu) var(--ease-io), margin var(--t-menu) var(--ease-io), opacity var(--t-menu) linear; }
.who-mail { max-height: 1.6em; transition: max-height var(--t-menu) var(--ease-io), margin var(--t-menu) var(--ease-io), opacity var(--t-menu) linear; }
.collapsed .sidebar .t { max-width: 0; opacity: 0; transform: translateX(-8px); }
.collapsed .tree .count { max-width: 0; opacity: 0; padding: 0; }
.collapsed .tree .tree-del, .collapsed .tree .tree-del-ph { width: 0; margin-right: 0; padding: 0; border-width: 0; opacity: 0; overflow: hidden; }
.collapsed .who-name { flex: 0 0 0; max-width: 0; opacity: 0; margin: 0; }
.collapsed .who-mail { max-height: 0; opacity: 0; margin: 0; }
.collapsed .tree li.muted, .collapsed .menu-err { display: none; }
.collapsed .brand { padding: 10px 4px 6px; justify-content: center; gap: 2px; }
.collapsed .brand .collapse-btn { margin-left: 0; }

/* 사용내역 '지급일' 열 접기/펴기: 열 폭이 줄면 남는 폭은 '내용' 열이 가져간다 */
col.c-pd { width: var(--w-date); transition: width calc(var(--t-pd) * .76) var(--ease-io) 0s; }          /* 펴기: 폭 먼저 */
table.grid.pd-fold col.c-pd { width: 26px; transition-delay: calc(var(--t-pd) * .24); }                   /* 접기: 글자가 사라지기 시작한 뒤 폭 */
table.grid th.pd, table.grid td.pd { transition: padding 0s linear 0s; }
table.grid th.pd { white-space: nowrap; }
table.grid th.pd .th-t { display: inline-block; max-width: 56px; overflow: hidden; vertical-align: middle; opacity: 1; transform: none; transition: opacity calc(var(--t-pd) * .5) linear calc(var(--t-pd) * .5), transform calc(var(--t-pd) * .5) var(--ease-io) calc(var(--t-pd) * .5), max-width 0s linear 0s; }
table.grid td.pd input { transition: opacity calc(var(--t-pd) * .5) linear calc(var(--t-pd) * .5), border-color .2s var(--ease), background .2s var(--ease); }
table.grid.pd-fold th.pd .th-t { max-width: 0; opacity: 0; transform: translateX(-8px); transition: opacity calc(var(--t-pd) * .44) linear 0s, transform calc(var(--t-pd) * .44) var(--ease-io) 0s, max-width 0s linear calc(var(--t-pd) * .44); }
table.grid.pd-fold th.pd, table.grid.pd-fold td.pd { padding-left: 0; padding-right: 0; transition: padding 0s linear calc(var(--t-pd) * .44); }
table.grid.pd-fold td.pd input, table.grid.pd-fold td.pd input[type=date] { opacity: 0; pointer-events: none; transition: opacity calc(var(--t-pd) * .44) linear 0s, border-color .2s var(--ease), background .2s var(--ease); }
table.grid.pd-fold td.pd input[type=date].ng-empty:not(:focus):not(:hover) { opacity: 0; }   /* 비어 있는 날짜칸의 흐림(.45) 규칙보다 우선 */
.pd-toggle { width: 22px; height: 22px; margin-left: 2px; }
table.grid.pd-fold .pd-toggle { margin-left: 0; }

/* 크게보기/원래보기: 원래보기로 갈 때는 폭 먼저 줄이고 정산 영역이 뒤따라 나타나며, 크게보기로 갈 때는 정산 영역이 먼저 사라진 뒤 폭이 넓어진다.
   (display 로 끄면 애니메이션이 안 되므로 opacity/visibility 를 쓴다) */
.work { transition: grid-template-columns calc(var(--t-wide) * .71) var(--ease-io) 0s; }
.work.wide { transition-delay: calc(var(--t-wide) * .29); }
.work.resizing { transition: none !important; }   /* 정산 영역 크기를 끄는 중에는 전환 없이 바로 따라온다 */
.work > .settle, .work > .settle-strip, .work > .work-bar { grid-row: 1; }
.work > .settle { max-width: 100%; transition: opacity calc(var(--t-wide) * .5) linear calc(var(--t-wide) * .5), visibility 0s linear 0s; }
.work > .settle-strip { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity calc(var(--t-wide) * .3) linear 0s, visibility 0s linear calc(var(--t-wide) * .3); }
.work.wide > .settle { opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; transition: opacity calc(var(--t-wide) * .4) linear 0s, visibility 0s linear calc(var(--t-wide) * .4); }
.work.wide > .settle-strip { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity calc(var(--t-wide) * .4) linear calc(var(--t-wide) * .6), visibility 0s linear calc(var(--t-wide) * .6); }
.work.wide > .work-bar { visibility: hidden; }

/* 즉시 나타나는 툴팁: 말풍선 하나를 모두 같이 쓴다(tip 지시자와 title 속성 전체). 기본 title 은 0.5~1초 늦다. 줄바꿈이 있는 문구와 긴 문구는 최대 너비에서 줄바꿈 */
.tip { position: fixed; z-index: 1000; left: 0; top: 0; width: max-content; max-width: 320px; padding: 4px 9px; font-size: 12px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; color: var(--primary-text); background: var(--primary); border-radius: 0; box-shadow: var(--shadow); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .08s linear, visibility 0s linear .08s; }
.tip.on { opacity: 1; visibility: visible; transition: opacity .08s linear, visibility 0s; }


/* =========================================================
   반응형 — 데스크톱(>=1280px)은 위의 1910px 기준 레이아웃 그대로.
   태블릿(<1280px): 정산 영역을 사용내역 아래로 쌓고 메뉴는 줄인 상태로 시작, 설정은 세로로 쌓는다.
   폰(<768px): 메뉴는 상단 바의 버튼으로 여는 서랍, 표는 가로 스크롤, 터치하기 쉬운 크기, 입력칸은 16px(iOS 가 확대하지 않게).
   ========================================================= */
.mbar, .menu-backdrop { display: none; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }   /* 모바일 주소창이 줄었다 늘었다 해도 화면 높이에 맞춘다 */
.app-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 1279px) {
  .app-shell { min-width: 0; }
  /* 월간내역: 사용내역 위, 정산 영역 아래로 쌓고 페이지(내용)가 스크롤된다. 크기 조절/크게보기는 쓰지 않는다 */
  .month-view { height: auto; min-height: 100%; }
  .month-head { height: auto; flex-wrap: wrap; gap: 4px 10px; }
  .work { flex: none; display: flex; flex-direction: column; gap: var(--gap); }
  .work-bar, .settle-strip, .wide-btn { display: none; }
  .usage { flex: none; }
  .usage > .card.fill { flex: none; height: min(72dvh, 640px); }
  .settle { width: auto; max-width: none; flex: none; opacity: 1; visibility: visible; }
  .settle-top { flex: none !important; display: flex; flex-direction: column; gap: var(--gap); }
  .settle-col { flex: none; }
  .settle-col > .card.fill, .settle-top > .card.fill, .settle > .card.fill { flex: none !important; height: 300px; }
  .settle .split-bar { display: none; }
  table.fixed.two { width: 100%; }
  table.grid { min-width: 1000px; }                       /* 사용내역 표는 카드 안에서 가로 스크롤 */
  .card-title { flex-wrap: wrap; height: auto; min-height: var(--head-h); }
  .import-row { flex-wrap: wrap; }
  .inst-pick { flex: 1 1 100%; width: auto; }
  .import-res { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; overflow: visible; }
  .import-res .contents { flex-wrap: wrap; }
  .fname-box { flex: 1 1 140px; width: auto; min-width: 0; }
  .app-footer .sep, .app-footer span:nth-child(3), .app-footer .powered { display: none; }   /* 좁은 화면 footer: © 와 build 만 (넘치면 양쪽이 잘린다) */
  /* 설정: 세로로 쌓는다 */
  .settings-view { height: auto; }
  .set-cols { flex: none; flex-direction: column; gap: var(--gap); }
  .set-cols .sp-pane { flex: none !important; height: 360px; }
  .sp-bar, .set-cols .split-bar { display: none; }
  .set-toolbar button { white-space: nowrap; }
  .set-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 0; gap: 0; }
  .app-shell > .content, .app-shell > .content-mask { grid-column: 1; grid-row: 2; }
  .mbar { display: flex; align-items: center; gap: 8px; grid-column: 1; grid-row: 1; height: 46px; padding: 0 6px; background: var(--side); border-bottom: 1px solid var(--line); }
  .mbar .icon-btn { min-width: 40px; min-height: 40px; font-size: 1.15rem; }
  .mbar img { width: 24px; height: 24px; }
  .month-head h2 { display: none; }                      /* 상단 바에 같은 제목이 있다 */
  .mbar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
  /* 서랍 메뉴 */
  .app-shell .sidebar { background: var(--inner); }       /* 서랍은 뒤가 비치지 않게 불투명 */
  .sidebar { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(84vw, 300px); height: auto; transform: translateX(-105%); transition: transform .25s var(--ease-io); box-shadow: none; }
  .app-shell.menu-open .sidebar { transform: none; box-shadow: 6px 0 24px rgba(0, 0, 0, .28); }
  .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
  .menu a { padding: 11px 12px; }
  .tree li > a { padding: 10px 4px 10px 26px; }
  .icon-btn { min-width: 38px; min-height: 38px; }
  .tree .tree-del { visibility: visible; opacity: 1; width: 36px; min-height: 36px; }
  .tip { display: none; }                               /* 터치 기기에서는 툴팁이 필요 없다 */
  /* 입력칸은 16px 이상이어야 iOS 가 포커스할 때 화면을 확대하지 않는다 */
  input, select, textarea, table.grid input:not([type=checkbox]), table.set-table input[type=text], table.sup input.in-date, .new-month input[type=month] { font-size: 16px; }
  .content-mask { z-index: 40; }
  /* 16px 입력칸에 맞춰 표 열을 넓힌다 (표는 카드 안에서 가로 스크롤) */
  :root { --w-date: 140px; --w-time: 92px; --w-dow: 38px; --w-check: 38px; --w-status: 38px; --w-del: 42px; --w-method: 260px; --w-merchant: 240px; --w-amount: 112px; }
  table.grid { min-width: 1380px; }
  col.c-sdate { width: 104px; } col.c-smethod { width: 150px; } col.c-smerchant { width: 140px; } col.c-sdate-in { width: 156px; }
  table.sup { min-width: 720px; }
  .month-view { gap: var(--gap); }
  .usage > .card.fill { height: min(78dvh, 640px); }
  .settle-col > .card.fill, .settle-top > .card.fill, .settle > .card.fill { height: 280px; }
  .title-sum { font-size: 1rem; }
  .title-sum strong { font-size: 1.1rem; }
  .card-title .total { white-space: normal; }
  .personal-view .card, .set-row .card { padding: 8px; }
  .share-list { max-height: 50dvh; }
  .modal-backdrop { padding: 12px 8px; }
  .modal { padding: 12px; overflow-x: auto; }
  /* 로그인/OTP/복구 코드: 카드를 한 칸으로 */
  .auth-card.split-card, .auth-card.split-card.wide-card, .auth-card.split-card.login-card { grid-template-columns: minmax(0, 1fr); }
  .auth-card.login-card { min-height: 0; }
  .auth-art { height: 130px; }
  .auth-body { padding: 20px 16px; }
  .otp { gap: 6px; }
  .otp-box { height: 54px; font-size: 1.4rem; }
  .qr { max-width: 100%; height: auto; }
  .codes { overflow-x: auto; }
}


/* =========================================================
   설정 화면: 왼쪽 메뉴(카드/결제수단 · 시스템 · 정보) + 오른쪽 하위 영역(가로 1:1)
   ========================================================= */
.set-layout { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--gap); }
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; background: var(--side); border: 1px solid var(--line); align-self: start; }
.set-nav-item { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 10px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); text-align: left; font-size: .95rem; }
.set-nav-item i { color: var(--accent); }
.set-nav-item:hover:not(.active) { background: var(--accent-soft); }
.set-nav-item.active { background: color-mix(in srgb, var(--accent) 15%, transparent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.set-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.set-content > .set-cols { flex: 1 1 0; }
col.c-name { width: 120px; } col.c-admin { width: 64px; } col.c-state { width: 136px; } col.c-last { width: 100px; } col.c-sname { width: 300px; }   /* 시스템 설정의 '이름' 열: 이전(150px)의 2배 */
table.users-table col.c-act { width: 84px; }
table.users-table .pill { display: inline-block; padding: 1px 8px; }

/* 설정 표의 입력칸(등록일/관리명칭/값)은 사용내역의 날짜 칸처럼 테두리 없이: 마우스를 올리면 테두리, 포커스하면 강조 */
table.set-table input:not([type=checkbox]) { width: 100%; padding: 2px 4px; font-size: 12.5px; border-radius: 0; border-color: transparent; background: transparent; }
table.set-table input:not([type=checkbox]):hover { border-color: var(--line); }
table.set-table input:not([type=checkbox]):focus { background: var(--inner); border-color: var(--accent); }
table.set-table input.in-date { text-align: center; padding: 2px 0; }
table.set-table input[type=date].ng-empty:not(:focus):not(:hover) { color: var(--muted); opacity: .45; }
/* 삭제 아이콘: 배경 없이 아이콘만 빨갛게 */
table.set-table .del-btn { background: transparent; border-color: transparent; box-shadow: none; color: var(--danger); }
table.set-table .del-btn:hover:not(:disabled) { background: transparent; box-shadow: none; }
table.set-table .del-btn:disabled { color: var(--muted); opacity: .4; }
table.set-table .add-btn-i { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); padding: 3px 8px; }
table.set-table .users-table td, table.users-table td { overflow: hidden; text-overflow: ellipsis; }
table.users-table input[type=checkbox] { margin: 0; }
.set-cols .banner { flex: none; margin: 0 0 4px; }

@media (max-width: 1279px) {
  .set-layout { display: flex; flex-direction: column; flex: none; }
  .set-nav { flex-direction: row; overflow-x: auto; padding: 0; align-self: stretch; }
  .set-nav-item { width: auto; flex: none; white-space: nowrap; padding: 12px 14px; }
  .set-nav-item.active { box-shadow: inset 0 -3px 0 var(--accent); }
  .set-content { flex: none; }
  .set-content > .set-cols { flex: none; }
  table.users-table { min-width: 560px; }
}

/* 공유대상 목록: 체크박스 · 아바타 · 표시 이름 · email (공유를 허용한 정보만) */
.share-avatar { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.share-avatar img { width: 24px; height: 24px; object-fit: cover; }
.share-avatar i { font-size: 22px; color: var(--muted); }
.share-info li { padding: 4px 0; }

/* 가져오기 결과 "자세히": 중복 / 제외 / 환산 표 */
.detail-table { margin: 4px 0 8px; }
.detail-table h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: .9rem; }
.detail-table h4 i { color: var(--accent); }
.detail-table .table-wrap { max-height: 150px; }
table.detail-grid { font-size: 12px; }
table.detail-grid td, table.detail-grid th { padding: 2px 4px; }
table.detail-grid tr.bad td { color: var(--danger); }
col.c-row { width: 48px; } col.c-when { width: 146px; } col.c-card { width: 200px; } col.c-shop { width: 210px; } col.c-money { width: 110px; }
@media (max-width: 1279px) { table.detail-grid { min-width: 820px; } }

/* ---------- 대시보드(4분할 차트, 2026/11/12 18) ---------- */
.dash { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.dash-q2 { grid-column: 1; grid-row: 1; } .dash-q1 { grid-column: 2; grid-row: 1; } .dash-q3 { grid-column: 1; grid-row: 2; } .dash-q4 { grid-column: 2; grid-row: 2; }
.dash-card { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.dash-chart { display: block; flex: 1 1 0; min-height: 120px; min-width: 0; width: 100%; }
/* 파이 카드: 제목 → 파이(제목 바로 아래, 높이는 카드의 약 46%, 최대 340px) → 남는 아래 공간에 같은 데이터의 표 */
.dash-pie > .sh-wrap { flex: 1 1 0; min-height: 0; margin-top: 6px; }
.dash-pie-table { height: 100%; }
.dash-pie-table table col.c-rank { width: 40px; } .dash-pie-table table col.c-amount { width: 96px; } .dash-pie-table table col.c-pct { width: 56px; }
.dash-pie-table .dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: baseline; }
.dash-pies { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.dash-pies-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); min-height: 0; }   /* 위: 차트 두 개, 아래: 표 두 개. 사이의 막대로 높이 비율을 조절 */
.dash-pies-charts { flex: 58 1 0; } .dash-pies-tables { flex: 42 1 0; }
.dash-pies > .split-bar { height: 8px; margin: 0; }
.dash-pie { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dash-pie h4 { margin: 4px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.dash-pie h4::before { content: ""; width: 3px; height: 14px; background: var(--accent); }   /* 제목 앞의 작은 강조 막대 */
.dash-months-row { flex: none; display: flex; align-items: center; gap: 12px; margin: 0 2px 4px; border-bottom: 1px solid var(--line); }
.dash-tabs { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; }   /* 항목 수 조절 직전까지의 영역 */
.dash-months { flex: 1 1 0; min-width: 0; display: flex; gap: 0; padding: 4px 4px 0; overflow-x: auto; scrollbar-width: none; }
/* 월 목록이 넘칠 때만 보이는 < > 이동 버튼 */
.dt-arrow { flex: none; display: none; width: 24px; padding: 0; align-items: center; justify-content: center; font-size: .7rem; color: var(--muted); background: transparent; border: 0; }
.dash-tabs.has-overflow .dt-arrow { display: inline-flex; }
.dt-arrow:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.dt-arrow:disabled { opacity: .3; cursor: default; }
.dash-months::-webkit-scrollbar { display: none; }
.dash-opt { flex: none; display: flex; justify-content: flex-end; padding: 0 12px 2px; }
.dash-msg { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; }
/* 대시보드 공통: 숫자는 같은 폭(tabular). 컨트롤도 전역 규칙대로 마우스를 올리면 살짝 커진다 */
.dash { font-variant-numeric: tabular-nums; }
.dash .card-title h3 { font-weight: 650; letter-spacing: -.01em; }
.dash .card-title .total { font-size: .8rem; }
/* 항목 수 조절: 하나로 이어진 컨트롤  [항목 수 | − | 30 | + | ↺]  (높이 26px, 가는 선, 직각) */
.cs { display: inline-flex; align-items: stretch; height: 26px; font-size: .8rem; border: 1px solid var(--line); background: var(--inner); }
.cs > * + * { border-left: 1px solid var(--line); }
.cs-l { display: inline-flex; align-items: center; padding: 0 9px; margin: 0; color: var(--muted); background: var(--head); font-weight: 500; white-space: nowrap; }
.cs-b { width: 26px; height: auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; color: var(--muted); background: transparent; border: 0; border-left: 1px solid var(--line); }
.cs-b:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.cs-b:disabled { opacity: .35; }
.cs-in { width: 44px; height: auto; padding: 0; text-align: center; font-size: .85rem; font-weight: 600; background: transparent; border: 0; border-left: 1px solid var(--line); -moz-appearance: textfield; appearance: textfield; }
.cs-in::-webkit-inner-spin-button, .cs-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cs-in:focus { box-shadow: none; background: var(--accent-soft); }
.cs:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 월 선택 탭(파이): 밑줄 탭. 선택한 월은 굵게 + 강조색 밑줄, 오른쪽 끝은 흐리게 잘려 가로 스크롤을 알려 준다 */
.dm-tab { flex: none; padding: 6px 12px 7px; margin: 0 0 -1px; font-size: .82rem; font-weight: 500; letter-spacing: .01em; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; }
.dm-tab { transform-origin: 50% 100%; }
.dm-tab:hover:not(:disabled) { transform: scale(1.08); color: var(--text); background: var(--accent-soft); box-shadow: none; }
.dm-tab.active { color: var(--text); font-weight: 650; border-bottom-color: var(--accent); background: transparent; }
.dm-tab:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-soft); }
/* 월 범위 슬라이더: 왼쪽 = 가장 오래된 월, 오른쪽 = 가장 최근 월. 얇은 트랙 + 각진 손잡이 */
.mr { flex: none; padding: 2px 12px 4px; }
.mr-label { text-align: center; font-size: .9rem; letter-spacing: -.005em; }
.mr-label strong { font-weight: 650; }
.mr-label i { color: var(--accent); margin-right: 2px; }
.mr-track { position: relative; height: 22px; margin: 2px 8px; }
.mr-track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); }
.mr-fill { position: absolute; top: 9px; height: 4px; background: var(--accent); }
.mr-thumb { position: absolute; top: 3px; width: 10px; height: 16px; margin-left: -5px; padding: 0; border: 2px solid var(--inner); border-radius: 0; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); cursor: grab; touch-action: none; transition: box-shadow .15s var(--ease); }
.mr-thumb:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
.mr-thumb:focus-visible { box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
.mr-ticks { position: relative; height: 36px; margin: 2px 8px 0; }
.mr-tick { position: absolute; top: 2px; transform: translateX(-50%); padding: 1px 3px; font-size: .68rem; line-height: 1.3; font-weight: 500; color: var(--muted); white-space: nowrap; }
.mr-tick.first { transform: translateX(-8px); } .mr-tick.last { transform: translateX(calc(-100% + 8px)); }
.mr-tick .y, .mr-tick .m { display: block; text-align: center; }
.mr-tick.ym { line-height: 1.15; padding: 2px 6px; color: var(--text); background: var(--chip-ym); border: 1px solid var(--chip-ym-line); }   /* 년월: 연한 강조색 배경 + 가는 테두리 */
/* Sankey 위의 월 머리글: 열(월) 위치에 맞춘다 (차트 left 10px / right 170px 와 같은 여백) */
.sk-heads { position: relative; flex: none; height: 18px; margin: 0 170px 0 10px; font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.sk-heads span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 1279px) {
  .dash { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .dash-q2, .dash-q1, .dash-q3, .dash-q4 { grid-column: 1; grid-row: auto; }
  .dash-card { min-height: 380px; }
}
@media (max-width: 767px) {
  /* 폰: 높이 조절 막대 없이 내용별 차트 → 표, 사용처별 차트 → 표 순서로 쌓는다 */
  .dash-pies > .split-bar { display: none; }
  .dash-pies, .dash-pies-row { display: contents; }
  .dash-pies-charts > .dash-pie { min-height: 300px; } .dash-pies-tables > .dash-pie { min-height: 260px; }
  .dash-pies-charts > :nth-child(1) { order: 1; } .dash-pies-tables > :nth-child(1) { order: 2; } .dash-pies-charts > :nth-child(2) { order: 3; } .dash-pies-tables > :nth-child(2) { order: 4; }
  .dash-card { min-height: 420px; }
}

/* 기간 동기화 ON/OFF 스위치 (체크박스가 아닌 스위치, 직각) */
.dash-tr { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.dash-tr .total { white-space: nowrap; }
.sw { display: inline-flex; align-items: center; gap: 8px; padding: 0 9px 0 8px; height: 26px; background: var(--inner); border: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 500; white-space: nowrap; }
.sw:hover { background: var(--inner); border-color: var(--accent); box-shadow: none; }
.sw-track { position: relative; flex: none; width: 26px; height: 14px; border: 1px solid var(--line); background: var(--head); transition: background .2s var(--ease), border-color .2s var(--ease); }
.sw-knob { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: var(--muted); transition: transform .2s var(--ease), background .2s var(--ease); }
.sw-t i { margin-right: 3px; font-size: .72rem; }
.sw.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.sw.on .sw-track { background: var(--accent); border-color: var(--accent); }
.sw.on .sw-knob { background: var(--inner); transform: translateX(12px); }
.sw:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 767px) { .sw-txt { display: none; } .sw { padding: 0 8px; } }   /* 좁은 화면: 글자는 숨기고 링크 아이콘 + 스위치만 */

/* 크게보기/원래보기: 선택한 카드가 4분할 영역 전체를 차지하고 나머지는 숨긴다 */
.dash-big { grid-column: 1 / -1 !important; grid-row: 1 / -1 !important; }   /* 크기 전환 애니메이션은 dashboard.js 의 toggleBig(FLIP) 이 한다 */
.dash-hide { display: none; }
.dash-big-btn { padding: 2px 7px; }
@keyframes dash-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1279px) { .dash-big { min-height: 80vh; } }

/* 설정의 '이름' 칸: 마우스를 올리면 복사 아이콘 */
table.set-table td.copy-cell { position: relative; padding-right: 26px; overflow: hidden; text-overflow: ellipsis; }
.copy-btn { position: absolute; right: 2px; top: 0; bottom: 0; margin: auto 0; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--muted); background: var(--btn); border: 1px solid var(--line); opacity: 0; transition: opacity .15s var(--ease); }
.copy-cell:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:not(:disabled):hover { color: var(--accent); border-color: var(--accent); background: var(--btn-hover); transform: none; }   /* 전역 button:hover 의 scale(1.1) 을 쓰지 않는다: 위치 계산이 어긋나 아이콘이 밀려 보였다 */
@media (hover: none) { .copy-btn { opacity: .8; } }

/* 내용 일괄 변경 창(사용내역 '내용' 헤더) */
.mp-pop input { width: 100%; padding: 5px 8px; font-size: 13px; }
.mp-arrow { align-self: center; color: var(--muted); font-size: .8rem; }
.mp-msg { font-size: .8rem; color: var(--accent); }
.mp-msg.bad { color: var(--danger); }

.mp-hint { font-size: .72rem; color: var(--muted); padding: 2px 2px 0; }
.mp-hint code { font-family: inherit; color: var(--text); }

/* 클릭할 수 있는 것·링크는 마우스를 올리면 커지면서 배경색도 바뀐다(전체 적용). 자체 hover 배경이 있는 것은 그대로 둔다 */
a:hover { background: var(--accent-soft); }

/* 사용자 관리: 활성/비활성 스위치(글자 없는 작은 스위치) */
.sw-sm { height: 22px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }
.sw-sm:disabled { opacity: .4; }

/* 저장되면 입력칸이 잠깐 초록색으로 깜박이고 ✓ 가 보인다(commit-input: Enter/Focus Out 으로 저장했을 때). 설정 표의 입력칸 규칙(table.set-table input:…:focus, 투명 테두리/배경)보다 특이도가 높아야 보인다 */
input.saved-flash, table.grid input.saved-flash:not([type=checkbox]), table.set-table input.saved-flash:not([type=checkbox]), table.set-table input.saved-flash:not([type=checkbox]):focus { border-color: #2f9e6b; box-shadow: inset 0 0 0 1px #2f9e6b; padding-right: 22px;
  background: var(--inner) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232f9e6b' stroke-width='2.4' d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") no-repeat right 5px center / 13px 13px; }

/* 가져오기: 엑셀 양식(처리 방식) 선택 — 처리 방식이 둘 이상인 금융기관에서만 나타난다 */
.import-row select.fmt-pick { flex: 0 1 auto; min-width: 0; max-width: 200px; height: var(--ctl-h); padding: 0 4px; font-size: .78rem; }

/* 로그인 화면의 Turnstile(봇 확인) 위젯: 대부분은 자동으로 통과해 작게 보이거나 보이지 않는다 */
.turnstile-box { display: flex; justify-content: center; margin: 10px 0; min-height: 0; }

/* 정산 영역: 문자열 드래그(선택) 방지. 날짜 입력칸은 그대로 쓸 수 있다 */
.settle, .settle-strip { -webkit-user-select: none; user-select: none; }
.settle input, .settle textarea { -webkit-user-select: text; user-select: text; }
/* 내용별/사용처별: 제목 옆 '연결' 아이콘(사용내역과 연결) — 켜고 고른 항목에 해당하는 사용내역만 표시된다(내용별은 분홍, 사용처별은 파랑 배경) */
.ic-memo { color: var(--ic-memo); } .ic-merchant { color: var(--ic-merchant); }
.link-btn { flex: none; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-right: auto; font-size: .78rem; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 0; }
.link-btn:hover:not(:disabled) { color: var(--text); background: var(--btn-hover); box-shadow: none; }
/* 연결: 내용별은 분홍, 사용처별은 파랑 계열. 둘 다 켜도 구분되도록 색을 나눈다 */
.link-btn.link-memo.on { color: var(--memo-fg); background: var(--memo-bg); border-color: var(--memo-line); }
.link-btn.link-merchant.on { color: var(--merchant-fg); background: var(--merchant-bg); border-color: var(--merchant-line); }
.link-btn.on:hover:not(:disabled) { box-shadow: none; }
table.sum tbody tr.pickable { cursor: pointer; }
table.sum tbody tr.picked td { font-weight: 600; }
table.sum tbody tr.picked[data-link="memo"] td, table.sum tbody tr.picked[data-link="memo"]:hover td { background: var(--memo-bg); box-shadow: inset 0 -1px 0 var(--memo-line); }
table.sum tbody tr.picked[data-link="merchant"] td, table.sum tbody tr.picked[data-link="merchant"]:hover td { background: var(--merchant-bg); box-shadow: inset 0 -1px 0 var(--merchant-line); }
.sum-cnt { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 2px; }
table.grid tbody tr.linked-memo td, table.grid tbody tr.linked-memo:hover td { background: var(--memo-bg); }
table.grid tbody tr.linked-merchant td, table.grid tbody tr.linked-merchant:hover td { background: var(--merchant-bg); }
table.grid tbody tr.linked-memo.linked-merchant td, table.grid tbody tr.linked-memo.linked-merchant:hover td { background: var(--both-bg); }

/* 글자 드래그(선택) 방지: 설정 > 시스템의 이메일/이름 칸, 대시보드의 카드 제목·기간·파이 표 머리글 */
.nosel, .dash .card-title, .dash .mr-label, .dash .mr-ticks, .dash-pie-table thead { -webkit-user-select: none; user-select: none; }
/* 메뉴 영역(월간내역·내 정보·공유한 사람·개인정보 이메일 …)도 글자 드래그 방지. 입력칸은 제외 */
.sidebar { -webkit-user-select: none; user-select: none; }
.sidebar input, .sidebar textarea { -webkit-user-select: text; user-select: text; }
/* 대시보드는 어디서 드래그해도 글자가 선택되지 않는다(카드 제목·기간·항목 수·차트 이름·표 내용 모두). 항목 수 입력칸도 포함 — 입력/편집은 그대로 된다 */
.dash, .dash * { -webkit-user-select: none; user-select: none; }
/* 설정 > 시스템: 설명·안내·표 내용 등 영역 안의 글자는 어디서 드래그해도 선택되지 않는다(입력칸은 입력/편집 그대로) */
.nosel-area, .nosel-area * { -webkit-user-select: none; user-select: none; }
.nosel-area input, .nosel-area textarea { -webkit-user-select: text; user-select: text; }
/* 개인설정 > 금융기관 순서: 끌어서 순서 바꾸기 (직각, 글자 선택 방지) */
.inst-order { list-style: none; margin: 0 0 8px; padding: 0; max-height: 420px; overflow: auto; -webkit-user-select: none; user-select: none; }
.inst-order li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin-bottom: -1px; border: 1px solid var(--line); background: var(--inner); cursor: grab; }
.inst-order li.dragging { opacity: .45; }
.inst-order li.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.inst-order li.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.inst-order .io-grip { flex: none; color: var(--muted); }
.inst-order .inst-icon { flex: none; }
.inst-order .io-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inst-order .io-move { flex: none; width: 22px; height: 22px; padding: 0; }
/* 개인설정 > 개인화 > 공유: 공유정보와 공유대상을 한 카드에 나란히(좁은 화면은 위아래) + 저장은 하나 */
.set-row.share-row { grid-template-columns: minmax(0, 1fr); }
.share-combo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 8px; }
.share-part { min-width: 0; }
.share-part h4 { margin: 4px 0 4px; display: flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 650; }
.share-part h4 i { color: var(--accent); }
@media (max-width: 767px) { .share-combo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 도움말 팝업: 왼쪽 목차(개요/단락) + 오른쪽 내용 ---------- */
.help-backdrop { align-items: center; padding: 24px 16px; z-index: 80; }
.help-modal { display: flex; flex-direction: column; width: min(1180px, 100%); height: min(780px, calc(100dvh - 48px)); background: var(--inner); color: var(--text); border-radius: 0; box-shadow: var(--shadow); outline: none; animation: rise .3s var(--ease) both; }
.help-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.help-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.help-head h2 i { color: var(--accent); }
.help-split { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.help-toc { min-height: 0; overflow: auto; padding: 6px 0 10px; border-right: 1px solid var(--line); }
.help-toc ul { list-style: none; margin: 0; padding: 0; }
.help-toc li a { display: block; padding: 5px 12px; color: var(--text); text-decoration: none; font-weight: 650; border-left: 3px solid transparent; }
.help-toc li.sub a { padding: 3px 12px 3px 26px; font-weight: 400; font-size: .86rem; color: var(--muted); }
.help-toc li a:hover { background: var(--accent-soft); transform: none; }   /* 전역 a:hover 의 확대(scale)를 쓰지 않는다: 목차 글자가 커지며 밀려 보인다 */
.help-content a:hover { transform: none; }
.help-toc li.active > a { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text); }
.help-body { min-height: 0; display: flex; flex-direction: column; }
.help-state { margin: 8px 14px; }
.help-content { position: relative; flex: 1 1 0; min-height: 0; overflow: auto; padding: 4px 22px 28px; line-height: 1.65; }
.help-content h2 { margin: 26px 0 8px; padding-bottom: 6px; display: flex; align-items: center; gap: 8px; font-size: 1.3rem; border-bottom: 2px solid var(--accent); }
.help-content section:first-child h2 { margin-top: 16px; }
.help-content h2 i { color: var(--accent); }
.help-content h3 { margin: 20px 0 6px; font-size: 1.06rem; }
.help-content h4 { margin: 14px 0 4px; font-size: .96rem; color: var(--muted); }
.help-content p, .help-content li, .help-content dd { font-size: .92rem; }
.help-content ul, .help-content ol { margin: 4px 0 8px; padding-left: 22px; }
.help-content li { margin: 2px 0; }
.help-content a { color: var(--accent); }
.help-content code { padding: 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--accent-soft); }
.help-content kbd { padding: 0 5px; font-family: inherit; font-size: .82em; border: 1px solid var(--line); background: var(--btn); }
.help-content table { width: 100%; margin: 6px 0 10px; border-collapse: collapse; table-layout: auto; font-size: .88rem; }
.help-content td:first-child, .help-content th:first-child { white-space: nowrap; }   /* 첫 열(영역/금융기관/조작)은 줄바꿈하지 않는다 */
.help-content dl { display: block; margin: 4px 0 8px; }
.help-content th, .help-content td { padding: 4px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.help-content th { background: var(--accent-soft); font-weight: 650; }
.help-content dt { display: block; margin-top: 8px; font-weight: 650; color: var(--text); }
.help-content dd { display: block; margin: 2px 0 4px 14px; text-align: left; }
.help-content .help-note { padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.help-content .help-ok { color: #2f9e6b; font-weight: 650; }
@media (max-width: 767px) {
  .help-backdrop { padding: 0; }
  .help-modal { width: 100%; height: 100dvh; }
  .help-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .help-toc { max-height: 30dvh; border-right: 0; border-bottom: 1px solid var(--line); }
  .help-content { padding: 4px 14px 24px; }
}