/* app.css — Planowa
   * my-ledger.html 의 <style> 에서 그대로 갈라 나왔다. 규칙 순서가 곧 우선순위이니 섞지 말 것. */
/* =====================================================================
   Planowa — 기록(가계부) + 계획(로드맵). 메인 컬러: 에그플랜트
   ===================================================================== */
/* 글꼴은 우리 사이트에서(v242 사용자 요청 — 폰에서 열면 폰 글꼴로 보였다가 바뀌고 로고 모양도 달라졌다).
   전에는 Google 글꼴을 비차단으로 받아, 도착 전까지 폰 기본 글꼴(삼성 글꼴 등)로 그렸다.
   * 글꼴마다 두 파일: core = 영문·숫자·기호 + 한글 2350자(KS X 1001), ext = 나머지(드문 한글 등).
     core 는 범위 없이 뒤에 둬서 먼저 찾고, core 에 없는 글자만 ext 로 간다(ext 는 그런 글자가 있을 때만 받는다).
   * display:block — 글꼴이 오기 전에는 폰 글꼴로 그리지 않는다(잠깐 비어 있다가 바로 앱 글꼴). 두 번째부터는 서비스워커 캐시라 즉시.
   * 파일은 app/fonts/(scripts/make-fonts.py 로 만듦 — 원본 TTF 는 google/fonts 저장소, OFL). 바꾸면 파일 이름을 바꿀 것 — sw.js 가 버전 없이 오래 둔다(handleFont) */
@font-face{font-family:"IBM Plex Sans KR"; font-weight:400; font-display:block; src:url(../fonts/plexkr-400-ext.woff2) format("woff2"); unicode-range:U+2C7-2DD,U+2070-232A,U+2E3A-2E3B,U+3200-33DD,U+AC02-D7A3,U+FB00-FB04,U+FE10-FFE5,U+1F100-1F129}
@font-face{font-family:"IBM Plex Sans KR"; font-weight:500; font-display:block; src:url(../fonts/plexkr-500-ext.woff2) format("woff2"); unicode-range:U+2C7-2DD,U+2070-232A,U+2E3A-2E3B,U+3200-33DD,U+AC02-D7A3,U+FB00-FB04,U+FE10-FFE5,U+1F100-1F129}
@font-face{font-family:"IBM Plex Sans KR"; font-weight:600; font-display:block; src:url(../fonts/plexkr-600-ext.woff2) format("woff2"); unicode-range:U+2C7-2DD,U+2070-232A,U+2E3A-2E3B,U+3200-33DD,U+AC02-D7A3,U+FB00-FB04,U+FE10-FFE5,U+1F100-1F129}
@font-face{font-family:"IBM Plex Sans KR"; font-weight:700; font-display:block; src:url(../fonts/plexkr-700-ext.woff2) format("woff2"); unicode-range:U+2C7-2DD,U+2070-232A,U+2E3A-2E3B,U+3200-33DD,U+AC02-D7A3,U+FB00-FB04,U+FE10-FFE5,U+1F100-1F129}
@font-face{font-family:"Gowun Batang"; font-weight:400; font-display:block; src:url(../fonts/batang-400-ext.woff2) format("woff2"); unicode-range:U+2C7-338,U+1E80-232A,U+3200-33DD,U+AC02-D7A3,U+FB01-FB02,U+FFE0-FFE5,U+1F110-1F129}
@font-face{font-family:"Gowun Batang"; font-weight:700; font-display:block; src:url(../fonts/batang-700-ext.woff2) format("woff2"); unicode-range:U+2C7-338,U+1E80-232A,U+3200-33DD,U+AC02-D7A3,U+FB01-FB02,U+FFE0-FFE5,U+1F110-1F129}
@font-face{font-family:"IBM Plex Sans KR"; font-weight:400; font-display:block; src:url(../fonts/plexkr-400-core.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans KR"; font-weight:500; font-display:block; src:url(../fonts/plexkr-500-core.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans KR"; font-weight:600; font-display:block; src:url(../fonts/plexkr-600-core.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans KR"; font-weight:700; font-display:block; src:url(../fonts/plexkr-700-core.woff2) format("woff2")}
@font-face{font-family:"Gowun Batang"; font-weight:400; font-display:block; src:url(../fonts/batang-400-core.woff2) format("woff2")}
@font-face{font-family:"Gowun Batang"; font-weight:700; font-display:block; src:url(../fonts/batang-700-core.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-weight:400; font-display:swap; src:url(../fonts/plexmono-400-core.woff2) format("woff2")}
:root{
  color-scheme: light;
  /* 중립 회색은 중립으로 둔다. 자주로 물들이면 강조색까지 탁해 보인다 */
  --paper:#f6f6f8; --surface:#ffffff; --surface-2:#f2f2f5; --sunken:#ecedf1;
  /* --muted 는 #767680 → #64646e(v233) — 밝은 바탕(#f6f6f8) 위 작은 글 대비 4.2 → 5.2:1(기준 4.5). App Store '충분한 대비' */
  --ink:#1a1a1f; --ink-2:#4e4e57; --muted:#64646e;
  --line:#e5e5ea; --line-strong:#d3d3da;
  --accent:#6a2c68; --accent-2:#54204f; --accent-ink:#ffffff;
  --accent-soft:color-mix(in srgb, var(--accent) 7%, var(--surface));
  --accent-line:color-mix(in srgb, var(--accent) 22%, var(--surface));
  --income:#1f6fd0; --expense:#dc3f45; --good:#0a7a3e; --transfer:#6b6b76; --fx-ink:#8a5f00;
  --good-ink:#ffffff;   /* --good 위에 얹는 글자색 — 다크에서는 초록이 밝아져 검정이 된다 */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948; --s0:#9a9aa4;
  --grid:#eeeef2; --baseline:#cdcdd6;
  --shadow:0 1px 2px rgba(20,20,30,.04), 0 10px 28px -18px rgba(20,20,30,.20);
  --shadow-lg:0 2px 6px rgba(20,20,30,.06), 0 18px 40px -20px rgba(20,20,30,.28);
  /* 타입 스케일 */
  --t-xs:11px; --t-sm:12.5px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:26px;
  /* 여백 스케일 */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:28px;
  --r:12px; --r-sm:8px;
}
:root[data-accent="deep"]  { --accent:#4a2352; --accent-2:#381a3e; }
:root[data-accent="wine"]  { --accent:#7a2b4e; --accent-2:#5f2039; }
:root[data-accent="indigo"]{ --accent:#3b3a7a; --accent-2:#2c2b5e; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#111114; --surface:#1c1c21; --surface-2:#26262d; --sunken:#17171b;
    --ink:#ececf1; --ink-2:#b9b9c2; --muted:#8e8e99;
    --line:#2e2e36; --line-strong:#40404a;
    --accent:#d9a2d4; --accent-2:#e8bfe4; --accent-ink:#1a1a1f;
    --income:#4c93e8; --expense:#ef6f72; --good:#3ec46a; --transfer:#a0a0ac; --fx-ink:#eda100;
    --good-ink:#0d1f14;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; --s0:#7b7b86;
    --grid:#282830; --baseline:#40404a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.7);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.8);
  }
  :root:not([data-theme="light"])[data-accent="deep"]  { --accent:#bda2e0; --accent-2:#d2bdec; }
  :root:not([data-theme="light"])[data-accent="wine"]  { --accent:#e79ab4; --accent-2:#f0bccd; }
  :root:not([data-theme="light"])[data-accent="indigo"]{ --accent:#a6a5ec; --accent-2:#c2c1f3; }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#111114; --surface:#1c1c21; --surface-2:#26262d; --sunken:#17171b;
  --ink:#ececf1; --ink-2:#b9b9c2; --muted:#8e8e99;
  --line:#2e2e36; --line-strong:#40404a;
  --accent:#d9a2d4; --accent-2:#e8bfe4; --accent-ink:#1a1a1f;
  --income:#4c93e8; --expense:#ef6f72; --good:#3ec46a; --transfer:#a0a0ac; --fx-ink:#eda100;
  --good-ink:#0d1f14;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767; --s0:#7b7b86;
  --grid:#282830; --baseline:#40404a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.8);
}
:root[data-theme="dark"][data-accent="deep"]  { --accent:#bda2e0; --accent-2:#d2bdec; }
:root[data-theme="dark"][data-accent="wine"]  { --accent:#e79ab4; --accent-2:#f0bccd; }
:root[data-theme="dark"][data-accent="indigo"]{ --accent:#a6a5ec; --accent-2:#c2c1f3; }

*{box-sizing:border-box}
/* 두 번 톡 쳐서 확대되는 것을 막는다(v204) — 단추를 빨리 두 번 누르면 화면이 커졌다. 두 손가락 확대는 웹에서 그대로 된다
   (앱은 viewport 에서 확대 자체를 막는다 — scripts/native-prep.js) */
html{touch-action:manipulation}
[hidden]{display:none!important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans KR","Malgun Gothic",system-ui,sans-serif;
  font-size:var(--t-md); line-height:1.65;   /* 한글은 1.6 이상이 읽기 편하다 */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
/* 굵게는 700 이 아니라 600 을 쓴다.
   IBM Plex Sans KR 의 700 은 12~13px 한글에서 획이 서로 붙어 뭉개진다
   ('붉게'·'표시됩니다' 처럼 획이 많은 글자에서 특히 심하다). 600 은 굵기는 그대로면서 깨끗하다.
   <b>·<strong> 은 기본값이 bold(=700) 라 여기서 한 번에 내린다.
   ※ 큰 세리프 제목(Gowun Batang)만 700 을 그대로 쓴다 — 그 크기에서는 뭉치지 않는다. */
b, strong{font-weight:600}
/* 금액도 본문과 같은 서체를 쓴다. 자릿수 정렬은 tabular-nums 가 맡는다
   (원문 문자·JSON 표시는 그대로 mono — 그건 코드라서 등폭이 맞다) */
.num{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
h1,h2,h3{margin:0; text-wrap:balance}
a{color:var(--accent)}

/* 웹에서는 넓게 — 월말정산·로드맵의 넓은 표가 스크롤 없이 들어가도록 */
.wrap{max-width:1720px; margin:0 auto; padding:22px 24px 64px}
.masthead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.brand{display:flex; align-items:baseline; gap:10px}
.brand h1{font-family:"Gowun Batang",serif; font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--accent)}
/* 로고 → 메인(/). 평소엔 링크처럼 안 보이고, 손이 닿을 때만 알려준다 */
.brandhome{display:inline-flex; color:inherit; text-decoration:none}
.brandhome:hover h1{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}
.brand .tag{font-size:12px; color:var(--muted)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); font-size:11.5px; color:var(--ink-2)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.chip.on .dot{background:var(--good)}
.chip.bad{border-color:var(--expense); color:var(--expense); font-weight:600}
.chip.bad .dot{background:var(--expense)}
/* 설정 > 계정·동기화 안의 저장 위치 표시 */
.storeline{margin:2px 0 10px}

/* 머리줄 오른쪽 검색 — 데스크톱은 입력칸이 펼쳐져 있고, 모바일은 돋보기 버튼만 있다가 눌러야 열린다 */
.search{position:relative; display:flex; align-items:center; gap:4px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:2px 3px 2px 12px}
/* 검색어를 치면 아래로 펼치는 관련 낱말 목록 (기록에 실제로 있는 말만 올린다) */
.sugg{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  list-style:none; margin:0; padding:5px; max-height:320px; overflow:auto;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.sugg li{margin:0}
.sugg button{display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  border:0; background:transparent; border-radius:8px; padding:7px 9px;
  font:inherit; font-size:13px; color:var(--ink); cursor:pointer}
.sugg button:hover, .sugg button.on{background:var(--accent-soft)}
.sugg .sg-v{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sugg .sg-v b{color:var(--accent); font-weight:600}
.sugg .sg-k{flex:0 0 auto; font-size:11px; color:var(--muted)}
.sugg .sg-n{flex:0 0 auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.search:focus-within{border-color:var(--accent)}
.search input{border:0; background:transparent; font-size:13px; width:190px; min-width:0;
  padding:5px 0; color:inherit; font-family:inherit}
.search input:focus{outline:0}
.search .sgo{width:30px; height:30px; flex:0 0 auto; border:0; background:transparent;
  border-radius:50%; display:grid; place-items:center; color:var(--muted)}
.search .sgo:hover{background:var(--surface-2); color:var(--ink)}
.search .sgo svg{width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round}
/* 검색칸 지우기 ✕(v253, 01-core searchClearWire) — 칸 바로 뒤 형제. 글자가 있을 때만(:placeholder-shown 이 아닐 때) 보인다.
   브라우저 기본 ✕(크롬만 있다)는 숨겨 한 가지로 맞춘다 */
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none; display:none}
.sclr{display:none; flex:0 0 auto; width:24px; height:24px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--muted); cursor:pointer; align-items:center; justify-content:center}
.sclr svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.sclr:hover{background:var(--surface-2); color:var(--ink)}
input[type="search"]:not(:placeholder-shown) + .sclr{display:inline-flex}
/* 칸 자체에 테두리가 있는 곳(가계부 그리드 검색)은 ✕ 를 칸 안쪽 오른쪽에 겹친다 */
.lgfind input[type="search"]{padding-right:28px}
.lgfind .sclr{width:20px; height:20px; margin-left:-26px; margin-right:6px; position:relative; z-index:1}
.sclr{align-self:center}   /* 칸 세로 가운데 — 위에 붙으면 마우스를 올렸을 때 회색 원이 칸 테두리를 넘었다(사용자 신고) */

/* 일일 화면 위의 검색 결과 줄 */
.srchbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;
  padding:9px 12px; border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:10px; font-size:12.5px; color:var(--ink-2)}
.srchbar .spacer{flex:1}
.srchbar small{color:var(--muted)}
.toast{white-space:pre-line}

.layout{display:grid; grid-template-columns:276px minmax(0,1fr); gap:20px; align-items:start}
.layout > main{min-width:0}
@media (max-width:920px){ .layout{grid-template-columns:minmax(0,1fr)} }

.rail{display:flex; flex-direction:column; gap:14px}
/* 데스크톱: 아래로 굴려도 왼쪽 레일과 위 탭 줄은 제자리(사용자 요청).
   * 레일은 화면보다 길 수 있어(감사·투두 카드) 제 안에서 굴린다. 카드 그림자가 잘리지 않게 안쪽 여백을 조금 준다.
   * 탭 줄은 위 12px 를 바탕색으로 덮는다(margin −12 + padding 12 — 자리는 그대로) — 안 덮으면 굴러간 내용이 탭 위로 비친다.
   * 떠 있는 창(설정 70·모달 80)보다 아래 층. */
/* Planowa 머리줄(.masthead)도 위에 붙인다(v176). 레일·탭 줄은 그 바로 아래(--mastH — 99-boot 가 잰다).
   * 머리줄 아래 틈(18px)은 margin 이 아니라 padding 으로 바꿔 머리줄 바탕이 덮게 한다 — 자리는 그대로다.
   * 검색 제안 목록(#searchSugg)이 머리줄 안에 있으므로 머리줄이 탭 줄보다 위층(16 > 15). */
@media (min-width:921px){
  .masthead{position:sticky; top:0; z-index:16; background:var(--paper); margin:-22px 0 0; padding:22px 0 18px}   /* 위 22px = .wrap 윗여백을 머리줄 안으로(붙었을 때도 글자가 천장에 안 닿게) */
  .rail{position:sticky; top:var(--mastH,0px); max-height:calc(100vh - var(--mastH,0px) - 12px); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; padding:2px 4px 6px; margin:-2px -4px 0}
  .tabs{position:sticky; top:calc(var(--mastH,0px) - 12px); z-index:15; background:var(--paper); margin-top:-12px; padding-top:12px}
  /* 화면 제목 줄('2026 연간정산 … 이미지 저장 · xlsx')도 탭 줄 바로 아래에 붙인다(v193, 사용자 요청 — 모든 메뉴).
     각 화면 맨 위의 .secthd 만 — 카드 안의 작은 제목 줄은 건드리지 않는다. --tabsH 는 99-boot 가 잰다.
     위아래 여백을 바탕색으로 덮어(margin −/padding +) 굴러간 내용이 비치지 않게 하고, 붙었을 때 아래 선을 긋는다. */
  /* 데스크톱 단추 높이 35 → 28px(v194 사용자 요청 — 세로를 줄이고 위아래 여백을 맞춘다).
     글자 단추(.btn)와 전환 단추(.seg — 월말/연간 등)가 한 줄에 나란히 서므로 같은 높이로 둔다. 폰은 손가락 크기 그대로. */
  /* :root 를 붙인 까닭 — 이 블록이 파일 앞쪽이라, 뒤에 있는 기본 .btn / .seg button 규칙(같은 특이도)이 패딩을 도로 덮었다 */
  :root .btn{padding:4px 12px; line-height:18px}
  :root .seg button{padding:4px 12px; line-height:18px}
  /* 제목 줄의 단추 사이 = 가계부 도구줄(.lgacts 4px)과 같게(v195 사용자 요청). 줄 간격(gap 8px)은 제목과 단추 사이에 그대로 두고
     단추·전환 단추가 이어질 때만 4px 당긴다. */
  :root .secthd > :is(.btn,.seg) + :is(.btn,.seg){margin-left:-4px}
  .panel > div > .sect > .secthd:first-child{position:sticky; top:calc(var(--mastH,0px) - 12px + var(--tabsH,0px)); z-index:14;
    background:var(--paper); margin-top:-10px; padding-top:10px; padding-bottom:10px; margin-bottom:var(--sp3);
    box-shadow:0 -12px 0 var(--paper), 0 1px 0 var(--line)}   /* 위로 12px 더 칠한다 — 탭 줄 아래 투명한 몇 px 로 굴러간 표가 비쳤다 */
}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:16px}

.monthnav{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line)}
.monthnav button{width:30px; height:30px; border:1px solid var(--line); background:var(--surface); border-radius:8px;
  color:var(--ink-2); font-size:15px; line-height:1; display:grid; place-items:center}
.monthnav button:hover{background:var(--surface-2); color:var(--ink)}
/* 화살표는 글자(‹ ›)가 아니라 선 그림이다 — 글자는 글꼴마다 굵기·높이가 달라 작고 흐리게 보였다(피드백) */
.monthnav button svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.monthnav .label{font-family:"Gowun Batang",serif; font-size:19px; font-weight:700}
/* 달 이름은 단추다 — 누르면 연·월 고르기. 옆 ‹ › 단추 모양(.monthnav button)을 걷어 글자처럼 보이게 둔다 */
.monthnav button.label{width:auto; height:auto; min-height:30px; padding:2px 10px; border:0; background:transparent;
  color:var(--ink); border-radius:8px; cursor:pointer}
.monthnav button.label:hover, .monthnav button.label[aria-expanded="true"]{background:var(--surface-2)}
/* 연·월 고르기 — 몸통에 붙인 떠 있는 상자(카드 overflow 에 안 잘리게). 자리는 openYmPop 이 단추 아래로 잡는다 */
.ympop{position:fixed; z-index:60; width:252px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 36px -12px rgba(0,0,0,.35); padding:10px}
.ympop[hidden]{display:none}
.ympop .ymy{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.ympop .ymy b{font-size:15px}
.ympop .ymy button{width:30px; height:30px; border:1px solid var(--line); background:var(--surface); border-radius:8px; color:var(--muted); font-size:16px}
.ympop .ymy button:hover{background:var(--surface-2); color:var(--ink)}
.ympop .ymm{display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.ympop .ymm button{height:34px; border:1px solid var(--line); background:var(--surface); border-radius:8px; font-size:13px; color:var(--ink-2)}
.ympop .ymm button:hover{background:var(--surface-2); color:var(--ink)}
.ympop .ymm button.cur{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.ympop .ymm button.today{border-color:var(--accent)}
.ympop .ymfoot{display:flex; justify-content:flex-end; margin-top:8px}
.ympop .ymfoot button{border:0; background:transparent; color:var(--accent); font-size:12.5px; padding:4px 6px; border-radius:6px}
.ympop .ymfoot button:hover{background:var(--surface-2)}

/* `1fr` 이 아니라 `minmax(0,1fr)` + 아이템 `min-width:0` 이 둘 다 필요하다.
   `1fr` 은 minmax(auto,1fr) 이라 칸 안의 글이 열을 넓힌다 — 영문으로 바꾸니
   320px 화면에서 'Spending' + 큰 숫자가 4px 밀고 나갔다(실측).
   `.calfoot` 에서도 똑같이 당한 함정이다. */
/* margin:0 을 꼭 적는다 — <dl> 이라 브라우저 기본 margin(1em)이 위아래에 붙는다.
   CSS 어디에도 안 적힌 값이라 읽어서는 안 보이는데, 카드 안에 30px 을 밀어 넣고 있었다. */
.totals{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); margin:0}
.totals > div{background:var(--surface); padding:11px 13px; min-width:0}
.totals .full{grid-column:1/-1}
.totals dt{font-size:11px; color:var(--muted); margin:0 0 3px; letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.totals dd{margin:0; font-size:18px; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis}
.v-in{color:var(--income)} .v-out{color:var(--expense)} .v-net{color:var(--ink)}
.v-good{color:var(--good)} .v-bad{color:var(--expense)}

.budget{padding:12px 14px; border-top:1px solid var(--line)}
.budget .row{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--muted)}
.track{height:8px; border-radius:999px; background:var(--sunken); margin:8px 0 6px; overflow:hidden}
.track > i{display:block; height:100%; border-radius:999px; background:var(--accent)}
.track > i.over{background:var(--expense)}
.assetlist{padding:14px 16px}
.assetlist h2{font-size:11.5px; color:var(--muted); font-weight:500; letter-spacing:.02em; margin-bottom:8px}
.assetlist ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.assetlist li{display:flex; justify-content:space-between; gap:10px; font-size:13px}
.assetlist .nm{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* .zero 는 .stl 안에만 있어서 여기서 따로 준다 — 기록 없는 구분을 흐리게 */
.assetlist .zero{color:var(--muted)}
/* 붙여넣기 · 입력 — 한 줄에 나란히. 폭은 반씩 나눠 갖는다.
   min-width:0 이 없으면 글자 길이만큼 벌어져 좁은 레일에서 줄이 접힌다. */
.railbtns{display:flex; gap:8px}
.railbtns .btn{flex:1 1 0; min-width:0; padding:9px 10px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap}
.railbtns .btn svg{flex:0 0 auto; width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* 오늘의 감사 — 돈만 남기는 가계부가 되지 않게 하루 한 줄을 같이 적는다 */
/* 아래는 좁게 — 마지막이 알림 줄(.thbar)이라 그 높이만큼 이미 여백이 있다.
   위 14 / 아래 4+11 = 15 로, 위아래가 비슷하게 끝난다(아래가 더 넓어 보이던 것을 맞췄다). */
.thankscard{padding:14px 16px 4px}
.thankscard h2{font-size:11.5px; color:var(--muted); font-weight:500; letter-spacing:.02em;
  margin:0 0 8px; display:flex; align-items:center; gap:5px}
.thankscard h2 .cnt{margin-left:auto; font-weight:400}
/* 마감 피드백 자동 요약 — 아직 안 쓴 칸에 곁들이는 '제안' 이다.
   기록처럼 보이면 안 되므로 글칸과 다른 바탕에 얇은 선으로 두고, 글자도 한 단계 작게 둔다. */
.fbbox{margin-top:8px; padding:10px 12px; border:1px dashed var(--accent-line);
  border-radius:var(--r-sm); background:var(--accent-soft)}
.fbhd{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.fbhd b{flex:1 1 auto; font-size:12px; font-weight:600; color:var(--accent)}
.fbtxt{margin:0; font-size:12.5px; line-height:1.75; color:var(--ink-2); white-space:pre-line}
/* 설정의 '쓰는 기능' — 이름·설명은 왼쪽, 켜고 끄는 단추는 오른쪽 */
.ftrow{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line)}
.ftrow:first-of-type{border-top:0}
.ftlab{flex:1 1 auto; min-width:0; font-size:13px}
.ftlab b{display:block; font-weight:600; color:var(--ink)}
.ftlab small{display:block; font-size:11.5px; color:var(--muted); margin-top:1px}
/* 알림(v210, iOS 앱) — 월말정산 알림 시각 칸 · 권한 거절 안내 */
.ftrow .notitime{flex:0 0 auto; font-family:inherit; font-size:13px; color:var(--ink); box-sizing:border-box;
  border:1px solid var(--line); border-radius:7px; padding:5px 8px; background:var(--surface)}
.notideny{color:var(--expense)}
/* v211 — 켜기 줄 아래 딸린 줄(미리 알림 · 월말 날짜·시각). 좁으면 고르는 칸이 아랫줄로 내려간다 */
.ftrow.notisub{flex-wrap:wrap; row-gap:8px}
.ftrow.notisub .ftlab{flex:1 1 150px}
/* .swatches 는 격자(폰은 4칸)라 단추 셋이면 오른쪽 한 칸이 비어 왼쪽으로 쏠렸다 — 여기는 오른쪽에 붙는 줄로 */
.swatches.notilead{display:flex; gap:6px; margin:0 0 0 auto; flex:0 0 auto}
.notilead .swbtn{padding-left:10px; padding-right:10px}
.notictl{display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto}
.ftbtn{flex:0 0 auto; min-width:64px}
/* 제목을 누르면 전체보기 창 — 제목처럼 보이되 누를 수 있다는 것만 알린다.
   단추 티를 내면 머리줄이 시끄러워지므로 테두리·배경은 주지 않는다. */
/* text-align 을 반드시 준다 — 단추는 기본이 가운데라, 영어처럼 제목이 길어 두 줄로 접히면
   두 줄 다 가운데로 몰린다('Today's gratitude' 가 그랬다). min-width:0 은 접힐 자리를 만든다. */
.h2go{border:0; background:transparent; padding:0; cursor:pointer;
  font:inherit; color:inherit; letter-spacing:inherit;
  text-align:left; min-width:0}
.h2go:hover{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.h2go:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
/* display:block 이 꼭 있어야 한다. textarea 는 기본이 inline-block 이라 글줄의 기준선 아래로
   8px 짜리 빈 자리가 생기고, 그만큼 카드가 길어 보인다(실측으로 잡았다). */
/* 높이는 쓰는 만큼(autoGrow) — 빈 칸은 min-height, 길면 218px 까지(v220). 손으로 늘이는 손잡이는 뺐다(자동과 다툰다) */
.thankscard textarea{display:block; width:100%; box-sizing:border-box; min-height:62px; max-height:218px; resize:none; overflow:hidden;
  font-family:inherit; font-size:13px; line-height:1.55; color:var(--ink);
  /* 바탕은 --paper(#f6f6f8). 값을 그대로 박지 않고 토큰을 쓴다 — 하드코딩하면 어두운 테마에서
     흰 칸이 그대로 남아 눈을 찌른다(어두운 테마의 --paper 는 #111114). */
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--paper)}
.thankscard textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; background:var(--surface)}
/* 자동 저장 알림 자리 — 비어 있어도 높이를 지켜 카드가 들썩이지 않게 */
.thankscard .thbar{display:flex; align-items:center; justify-content:flex-end;
  min-height:11px; margin-top:0}
.thankscard .thbar small{font-size:11px; color:var(--muted)}
.thankscard .thtext{font-size:13px; line-height:1.6; color:var(--ink-2); white-space:pre-wrap;
  word-break:break-word; margin:0}
/* 접기 ⌄ · 한 줄 요약(v218) — 폰에서만 쓴다(아래 max-width:920px). 데스크톱 레일은 자리가 있다 */
.cardfold, .cardsum{display:none}

/* ---------- 오늘의 감정 ----------
   * 색은 JS 의 MOODS 한 곳에서 온다. 여기서는 --c 로 받기만 하고 색을 새로 정하지 않는다. */
.thankscard h2 .moodbtn{margin-left:6px; border:0; background:transparent; padding:0; line-height:1}
.moodnow{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500;
  color:var(--c,var(--muted)); border:1px solid color-mix(in oklab, var(--c,var(--line)) 45%, transparent);
  background:color-mix(in oklab, var(--c,var(--line)) 12%, transparent);
  border-radius:999px; padding:2px 7px 2px 5px; white-space:nowrap}
.moodnow i{width:7px; height:7px; border-radius:50%; background:var(--c,var(--line-strong)); flex:0 0 auto}
/* 아직 안 고른 칩 — 선을 --line 의 45% 로 섞으면 거의 안 보였다(피드백: 필요한 기능인데 안 보인다).
   점선은 두되 선·글자를 한 단계 진하게 해 '누를 수 있는 것' 으로 읽히게 한다. */
.moodnow.none{color:var(--ink-2); border-style:dashed; border-color:var(--line-strong); background:transparent}
/* hover 는 마우스가 있는 기기에서만 — 터치 기기는 손을 뗀 뒤에도 마지막으로 누른 것에 :hover 가 남는다
   (아이폰에서 방금 누른 감정이 선택된 것처럼 보여 '감정이 두 개' 로 보였다. 저장값은 하나였다) */
@media (hover:hover){ .moodbtn:hover .moodnow{border-color:var(--c,var(--line-strong)); color:var(--ink)} }
/* 고르는 줄 — 점만(레일 카드) / 점+이름(창) */
.moodrow{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 8px}
.moodrow.wide{gap:6px}
.moodpick{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line);
  background:var(--surface); border-radius:999px; padding:4px; line-height:1;
  font-size:12px; color:var(--ink-2)}
.moodrow.wide .moodpick{padding:5px 10px 5px 7px}
/* 데스크톱 레일의 오늘의 감사 카드 — 감정 열 개를 5개씩 두 줄로(사용자 요청: 네 줄로 보였다).
   레일 폭이 좁아 보통 크기로는 한 줄에 셋만 들어갔다 → 칸을 다섯으로 나누고 점·글자·여백을 줄인다. */
@media (min-width:921px){
  #thMoodBox .moodrow.wide{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px}
  #thMoodBox .moodrow.wide .moodpick{justify-content:center; gap:3px; padding:4px 2px; font-size:11.5px; min-width:0}
  #thMoodBox .moodrow.wide .moodpick i{width:9px; height:9px}
  #thMoodBox .moodrow.wide .moodpick span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
.moodpick i{width:13px; height:13px; border-radius:50%; background:var(--c); flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
@media (hover:hover){ .moodpick:hover{border-color:var(--c); background:color-mix(in oklab, var(--c) 10%, transparent)} }
.moodpick.on{border-color:var(--c); background:color-mix(in oklab, var(--c) 16%, transparent);
  color:var(--ink); font-weight:600; box-shadow:0 0 0 1px var(--c)}
.field .moodrow{margin-bottom:0}
.daymood{margin-bottom:2px}

/* ---------- 이 달의 감정 — 하나의 그림 (glow ring) ----------
   * 짜임은 `archive\감정이미지 예시.html` 그대로다: 어두운 판 위에
     단색 원 + 원마다 blur + screen 합성, 가운데는 판과 같은 색 원을 blur 해 구멍을 낸다.
     ※ 앞선 방식(판 하나에 radial-gradient 여러 겹 + 층 통째 blur + 배경 투명)과 반대다.
       그때는 판이 없어 층 blur 가 유일한 방법이었다. 이 그림은 screen 이 핵이고
       screen 은 어두운 판 위에서만 성립하므로(밝은 바탕에서는 하얗게 날아간다) 판을 깐다.
   * --u 는 '원본 좌표 1단위의 실제 길이' 다. 안쪽 숫자(191·205·118 …)는 전부 예시의 382×391
     좌표이므로 --size 만 바꾸면 그림이 통째로 줄고 늘어난다. % 를 섞지 말 것 —
     --u 에 % 가 섞이면 height 의 calc 가 부모 높이 기준이 되어 판이 무너진다. */
.moodsect .cardsub{font-size:var(--t-xs); color:var(--muted); font-weight:400; margin-left:6px}
.moodring{position:relative; margin-inline:auto; overflow:hidden; isolation:isolate;
  --size:min(292px, 72vw);
  --u:calc(var(--size) / 382);
  --mr-bg:#11161f;                        /* 판 색(v197 사용자 지정). .core 가 이 색으로 구멍을 낸다 */
  width:var(--size); height:calc(391 * var(--u));
  background:var(--mr-bg); border-radius:calc(14 * var(--u))}
/* 빛 층 — 채도·대비 필터는 여기에만(v198). 판(.moodring 배경)·구멍(.core)·가장자리(.edge)는 필터 밖이라
   --mr-bg 가 적은 색 그대로 보인다. 전에는 .moodring 전체에 걸려 판 색이 #11161f → #020a1a 로 눌렸다. */
.moodring .mrglow{position:absolute; inset:0; isolation:isolate;
  filter:saturate(1.45) contrast(1.12) brightness(1.06)}
/* 색 원반 — 단색 원 하나에 blur. --b 는 예시 좌표계의 흐리기, .55 는 예시의 --soft */
.moodring .disc{position:absolute; display:block;
  left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u));
  width:calc(var(--r) * 2 * var(--u)); height:calc(var(--r) * 2 * var(--u));
  margin:calc(var(--r) * -1 * var(--u));
  border-radius:50%; background:var(--c); opacity:var(--o);
  filter:blur(calc(var(--b) * .55 * var(--u)));
  mix-blend-mode:screen;
  animation:mrdrift var(--dur) ease-in-out var(--delay) infinite alternate;
  will-change:transform}
/* 휘감기는 가는 광선 — 경로는 JS 가 한 번만 계산하고, 움직임은 이 sway 하나가 맡는다 */
.moodring .filaments{position:absolute; inset:0; width:100%; height:100%;
  mix-blend-mode:screen; transform-origin:50% 52%;
  animation:mrsway 26s ease-in-out infinite alternate}
/* 가운데 구멍 — 판과 같은 색이라 '뚫린' 것처럼 보인다 */
.moodring .core{position:absolute;
  left:calc(191 * var(--u)); top:calc(205 * var(--u));
  width:calc(118 * var(--u)); height:calc(134 * var(--u));
  margin:calc(-67 * var(--u)) 0 0 calc(-59 * var(--u));
  border-radius:50%; background:var(--mr-bg); filter:blur(calc(26 * var(--u)));
  animation:mrbreathe 18s ease-in-out infinite alternate}
/* 네 귀퉁이를 판 색으로 덮어 빛이 모서리에서 잘리지 않게 한다 */
.moodring .edge{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 56%,
    color-mix(in srgb, var(--mr-bg) 72%, transparent) 88%, var(--mr-bg) 100%)}
@keyframes mrdrift{
  from{ transform:translate(calc(var(--dx) * -1 * var(--u)), calc(var(--dy) * -1 * var(--u))) scale(.97) }
  to  { transform:translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) scale(1.03) }
}
@keyframes mrsway{ from{ transform:rotate(-3.5deg) scale(.99) } to{ transform:rotate(3.5deg) scale(1.01) } }
@keyframes mrbreathe{ from{ transform:scale(.96) } to{ transform:scale(1.05) } }
@media (prefers-reduced-motion: reduce){
  .moodring .disc, .moodring .filaments, .moodring .core{ animation:none !important }
}
/* 카드는 수치만 — 누르면 그림이 모달로 열린다.
   * 범례 칩을 품은 버튼이라 배경·테두리를 주지 않는다. 누를 수 있다는 신호는 .moodmore 한 줄이 낸다. */
.moodopen{display:block; width:100%; padding:0; border:0; background:transparent; text-align:left;
  cursor:pointer; font:inherit; color:inherit}
.moodopen .moodlegend{margin-top:10px}
/* 머리줄(v257) — 제목 · 며칠 …… 그림 보기 › 한 줄 */
.mohd{display:flex; align-items:baseline; gap:6px}
.mohd b{font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.02em}
.mohd .cardsub{margin-left:0}
.mohd .moodmore{display:inline; margin:0 0 0 auto}
.moodmore{display:block; margin-top:8px; font-size:var(--t-xs); color:var(--accent); font-weight:600}
.moodopen:hover .moodmore{text-decoration:underline; text-underline-offset:3px}
.moodopen:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px}
/* 모달 안에서는 조금 더 크게. 내부는 --u 에 비례하므로 --size 만 키우면 통째로 커진다 */
.moodring.big{--size:min(360px, 72vw)}
.moodbody{align-items:center}
.moodbody .moodlegend{justify-content:center}   /* 그림이 가운데니 칩도 가운데 */
/* ---------- 이 달의 감정 창 ----------
   * 이 창만 어둡다. 그림이 주인공이라 판을 어둡게 깔면 빛이 산다.
     * 밝기 테마와 무관하게 늘 어둡다 — 그래서 색을 토큰이 아니라 값으로 직접 적는다.
       (여기서 var(--ink) 같은 걸 쓰면 라이트 테마에서 검은 글씨가 검은 판에 얹힌다)
   * 창 클래스는 closeModal 이 지운다. 새 클래스를 붙이면 거기에도 반드시 추가할 것. */
/* 판 색 #11161f(v197 사용자 지정 — v196 에는 예시의 #1d2025, 그 전에는 #000515). 테두리·칩은 그 위로 한 톤씩 밝게 */
.modal.moodmodal{background:#11161f; border-color:#222a37; color:#e6ebf5}
.modal.moodmodal header{border-bottom-color:#222a37}
.modal.moodmodal header h2{color:#f3f6fc}
.modal.moodmodal .pqn{background:#1b2230; color:#a4adbb}
.modal.moodmodal .mclose{color:#8f99a8}
.modal.moodmodal .mclose:hover{background:#1b2230; color:#e6ebf5}
.modal.moodmodal .mlg{border-color:#2a3342; color:#c9d0da}
.modal.moodmodal .mlg b{color:#8b9ab2}
.modal.moodmodal .hint{color:#93a1b8; text-align:center; margin:0}
.modal.moodmodal .hint b{color:#e6ebf5}
/* 그림 판을 창과 같은 색으로 — 네모난 판이 아니라 빛만 떠 있는 것처럼 보이게.
   필터는 빛 층(.mrglow)에만 걸리므로 판 색이 창 배경과 정확히 같다(v198). */
.modal.moodmodal .moodring{--mr-bg:#11161f}
.moodlegend{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.mlg{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px 3px 6px}
.mlg i{width:9px; height:9px; border-radius:50%; background:var(--c)}
.mlg b{color:var(--muted); font-weight:600}
/* 줄인 나머지 — '＋2'. 색점이 없으니 테두리만 점선으로 두어 감정 칩과 구별한다 */
.mlg.mmore{color:var(--muted); border-style:dashed; padding:3px 9px}
/* 달력 아래 — 한 칸씩 위아래로. 위가 '감사일기', 아래가 '이 달의 감정'.
   * 순서는 JS(renderCal 의 .calfoot 안 순서)가 정한다. 여기서는 한 칸으로만 둔다.
     두 칸(auto-fit minmax(300px,1fr))이던 것을 되돌리려면 JS 순서도 함께 볼 것. */
/* `minmax(0,1fr)` + 아이템 `min-width:0` 이 둘 다 있어야 한다.
   그리드 아이템의 기본 `min-width:auto` 는 min-content 로 풀린다. 그런데 감사일기 한 줄은
   `.tht{white-space:nowrap}` 이라 min-content 가 글 전체 길이다(긴 일기면 1000px 넘는다).
   그러면 아이템이 트랙(=화면 폭)을 뚫고 나가 페이지 전체가 가로로 늘어난다 —
   실측: 화면 440 인데 문서 1062, `.thmonth`·`.moodsect` 가 나란히 1062px.
   그 여파로 ① 감정 그림이 1062 기준 가운데(=524)라 화면 밖으로 밀리고
   ② 달력·카드가 화면을 벗어나 '깨진 것처럼' 보였다. 달력 칸의 `1fr` 함정과 같은 종류다. */
.calfoot{display:grid; gap:16px; align-items:start; margin-top:16px; grid-template-columns:minmax(0,1fr)}
.calfoot > .sect{margin-bottom:0; min-width:0}
@media (max-width:920px){
  .calfoot{grid-template-columns:minmax(0,1fr); gap:0; margin-top:0}
  .calfoot > .sect{margin-bottom:var(--sp4); min-width:0}
  /* .moodring 자체는 손댈 것이 없다 — --size 의 72vw 가 좁은 화면을 이미 따라가고,
     흐리기는 --u 에 비례하므로 크기가 줄면 저절로 함께 줄어든다(그리기 부담도 같이 준다).
     * 제목·범례는 왼쪽 정렬이다 — 바로 위 감사일기 카드와 줄을 맞춘다.
       한때 가운데로 모았던 적이 있는데(그림이 카드에 있던 시절), 지금은 카드에 수치만 있어
       옆 카드와 나란히 읽히는 편이 낫다. 좌우 여백은 `.secthd` 와 같은 값으로 맞춘다. */
  .moodsect .moodopen{padding:0 var(--sp4)}
  .moodrow{gap:6px}
  .moodpick i{width:15px; height:15px}
}
/* 월말정산 아래 '이 달의 목표 · 마감 피드백' — 표를 다 보고 나서 쓰는 자리 */
.notecard{margin-top:14px}
/* 2열은 '입력 칸 두 개짜리 카드'(.notegrid)에만 건다.
   .notecard 에 걸면 같은 클래스를 쓰는 연간정산 목록까지 제목/목록이 두 칸으로 갈라져
   목록이 오른쪽 절반으로 밀린다(실제로 그랬다). */
.notegrid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px}
.notecard .nrow{display:flex; flex-direction:column; gap:5px; min-width:0}
.notecard .nrow label{font-size:11.5px; color:var(--muted)}
/* 목표·피드백은 몇 줄씩 적게 되므로 넉넉히 (아래 모서리를 끌어 더 늘릴 수도 있다) */
.notecard textarea{flex:1 1 auto; min-width:0; width:100%; box-sizing:border-box; resize:vertical;
  min-height:112px;
  font-family:inherit; font-size:13px; line-height:1.55; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:var(--sunken)}
.notecard textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; background:var(--surface)}
.notecard .nstate{grid-column:1/-1; display:flex; justify-content:flex-end; min-height:13px}
.notecard .nstate small{font-size:11px; color:var(--muted)}
/* 연간정산 — 열두 달 목표·피드백 모아보기 */
.notecard .ynhd{font-size:11.5px; color:var(--muted); font-weight:500; margin:0 0 8px}
.notecard .ynhd span{color:var(--muted); font-weight:400}
/* 여러 달을 한눈에 훑는 목록이다 — 글은 다 보여주되 줄은 바짝 눌러 둔다.
   긴 글은 줄을 눌러 여는 팝업(openMonthNote)에서 온전히 읽는다. */
.ynlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
/* 줄은 <button> 이 아니라 div 다 — 버튼 안의 글은 마우스로 끌어 고를 수 없다(사용자 지적).
   눌러서 여는 노릇은 role/tabindex 로 살리고, 글은 끌어 고를 수 있게 둔다. */
.ynrow{display:flex; gap:10px; text-align:left; align-items:flex-start;
  font-size:12.5px; line-height:1.35; color:var(--ink); cursor:pointer; user-select:text;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 10px}
.ynrow:hover{border-color:var(--accent); background:var(--accent-soft)}
/* div 라 단추의 기본 초점 테두리가 없다 — 키보드로 훑는 사람을 위해 손으로 그린다 */
.ynrow:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* 달 칸은 폭을 고정한다 — '8월' 과 '12월' 의 폭이 달라 줄마다 오른쪽 칸이 어긋난다 */
.ynlist .ynm{flex:0 0 38px; color:var(--ink-2); font-weight:600; font-size:12.5px; padding-top:1px}
/* 목표 · 피드백 · 한 줄을 나란히 — 세운 것, 지나고 쓴 것, 숫자가 말해 주는 것 셋을 한 줄에 놓는다.
   세로선으로 칸을 갈라 둔다 (gap 만 두면 어느 칸 글인지 흐려진다) */
/* 셋은 같은 폭이다(사용자 요청). 한쪽만 넓히면 표로 안 읽힌다 —
   대신 잘린 글은 툴팁과 복사 단추로 온전히 가져갈 수 있게 해 뒀다. */
.ynlist .ynt{flex:1 1 auto; min-width:0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0}
.ynlist .yng{padding-right:14px}
.ynlist .ynr{padding:0 14px; border-left:1px solid var(--line)}
.ynlist .yns{padding-left:14px; border-left:1px solid var(--line)}
/* 한 줄로 자른다 — 달마다 줄 높이가 같아야 열두 달이 표처럼 읽힌다.
   온전한 글은 줄을 눌러 여는 팝업(openMonthNote)에서 본다. */
.ynlist .ynt span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ynlist .yng{color:var(--accent)}
.ynlist .ynt i{font-style:normal; font-size:11px; color:var(--muted); margin-right:6px}
.ynlist .ynt em{font-style:normal; color:var(--muted)}      /* 비어 있는 쪽 */
/* 앱이 붙인 한 줄 — 내가 쓴 글과 달라 보여야 한다 */
.ynlist .yns .ynauto{color:var(--ink-2)}
/* 좁은 데스크톱(모바일 문턱과 넉넉한 폭 사이)에서는 한 줄을 아랫줄로 내려 통째로 쓰게 한다.
   셋을 나란히 두면 세 칸이 다 잘려서, 칸이 셋이라는 것 말고는 읽히는 게 없다. */
@media (min-width:921px) and (max-width:1180px){
  .ynlist .ynt{grid-template-columns:1fr 1fr; gap:3px 0}
  .ynlist .yns{grid-column:1 / -1; padding-left:0; border-left:0}
}
/* 크기를 조절할 수 있는 창 (읽기 팝업).
   resize 는 overflow 가 visible 이 아닐 때만 손잡이가 나온다 — .modal 은 overflow:auto 라 된다.
   창을 세로로 늘리면 안쪽 글 상자도 함께 늘어나야 하므로 세로 flex 로 묶는다. */
.modal.resizable{resize:both; display:flex; flex-direction:column;
  min-width:360px; min-height:240px; max-width:96vw; max-height:92vh}
.modal.resizable .body{flex:1 1 auto; min-height:0; overflow:auto;
  display:flex; flex-direction:column}
/* 창을 늘리면 글 상자가 따라 늘어야 한다. 위에 한 줄이 얹히므로 height:100% 는 넘친다 —
   남는 자리를 받아 가게 둔다(세로 flex 안의 아이템이다). */
.modal.resizable .nrdgrid{flex:1 1 auto; min-height:0}
.modal.resizable .noteread{overflow:auto}
/* 그 달을 한 줄로 — 목표·피드백 위에 얹는 머리글 */
.nrdtag{margin:0 0 12px; padding:9px 13px; border-radius:8px; background:var(--accent-soft);
  font-size:13px; line-height:1.5; color:var(--ink-2); word-break:break-word}
.nrdtag i{font-style:normal; font-size:11px; color:var(--accent); margin-right:8px}
/* 팝업의 읽기 전용 글 — 좌(목표) · 우(피드백), 글 배경은 흰 종이처럼 */
.nrdgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.nrdcol{min-width:0; display:flex; flex-direction:column; gap:5px}
.nrdcol label{font-size:11.5px; color:var(--muted)}
.noteread{flex:1 1 auto; background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; font-size:13.5px; line-height:1.75; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; min-height:120px}
.noteread em{font-style:normal; color:var(--muted)}
/* 아직 쓰지 않아 숫자에서 만들어 채운 글 — 저장된 글과 눈으로 구분되게 옅게 깐다 */
.noteread.autotxt{background:var(--accent-soft); border-color:transparent;
  font-size:12.5px; color:var(--ink-2)}
.nrdauto{margin-left:6px; padding:1px 6px; border-radius:999px; font-size:10.5px;
  background:var(--accent-soft); color:var(--accent)}
/* 달력 아래 그 달 감사일기 목록 — 조회의 본자리 */
.thmonth{margin-top:14px}
/* 머리줄은 조용하게 — 달력이 주인공이고 이건 딸린 목록이다.
   * '이 달의 감정'(.moodsect)도 같은 규칙을 받는다.
     둘은 달력 아래 나란히 놓이는 카드라 제목 크기가 다르면 한쪽이 튄다.
     본문 제목 크기(.sect > h2 14px, 모바일 --t-md)로 두면 좁은 화면에서 머리줄이 넘쳤다.
   * 이 두 클래스 선택자(0-2-1)가 아래 모바일의 `.secthd h2`(0-1-1)보다 특이도가 높아
     순서와 무관하게 이긴다 — 그래서 모바일에서도 조용한 크기가 유지된다. */
.thmonth .secthd, .moodsect .secthd{align-items:center; margin-bottom:8px}
.thmonth .secthd h2, .moodsect .secthd h2{font-size:11.5px; color:var(--muted);
  font-weight:500; letter-spacing:.02em}
.thmonth .secthd small{color:var(--muted); font-size:11.5px}
/* 머리줄 오른쪽 검색 — 위 머리줄 검색(.search)과 같은 모양의 작은 버전 */
.thsrch{display:flex; align-items:center; gap:2px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:1px 2px 1px 11px}
.thsrch:focus-within{border-color:var(--accent)}
.thsrch input{border:0; background:transparent; font-family:inherit; font-size:12.5px;
  width:150px; min-width:0; padding:5px 0; color:inherit}
.thsrch input:focus{outline:0}
.thsrch .sgo{width:27px; height:27px; flex:0 0 auto; border:0; background:transparent;
  border-radius:50%; display:grid; place-items:center; color:var(--muted); cursor:pointer}
.thsrch .sgo:hover{background:var(--surface-2); color:var(--ink)}
.thsrch .sgo svg{width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round}
/* 줄임표가 실제로 걸리려면 바깥쪽부터 안쪽까지 min-width:0 이 끊기지 않아야 한다.
   .tht 에만 걸어 두면 li·button 이 안 줄어 그대로 늘어난다(실측 .tht 가 997px 였다). */
/* v262 사용자 요청 — 줄마다 상자를 두르지 않고 투두 전체보기처럼 줄 사이 선만 */
.thlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; min-width:0}
.thlist li{min-width:0}
.thlist li + li{border-top:1px solid var(--line)}
.thlist .thnone{font-size:12.5px; color:var(--muted); padding:10px 2px}
.thlist > li > button{display:flex; gap:10px; width:100%; min-width:0; text-align:left; align-items:baseline;
  font-family:inherit; font-size:13px; line-height:1.55; color:var(--ink); cursor:pointer;
  background:transparent; border:0; border-radius:0; padding:10px 2px}
@media (hover:hover){ .thlist > li > button:hover{color:var(--accent)} }   /* 편집 줄 안의 감정·단추는 제 모양대로 */
/* 그 자리 편집(v262 thanksEditInline) */
.thed{display:flex; flex-direction:column; gap:8px; padding:10px 0}
.thedhd{font-size:13px} .thedhd small{color:var(--muted)}
.thed textarea{width:100%; box-sizing:border-box; font-family:inherit; font-size:14px; line-height:1.55; resize:vertical;
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--surface); color:var(--ink)}
.thed textarea:focus{outline:0; border-color:var(--accent)}
/* 설정 › 항목(폰) — 한 줄 안내 뒤 ⓘ, 누르면 아래에 도움말 상자(v272) */
/* ⓘ 는 글 끝에 이어 붙는다(줄이 넘치면 글과 같이 접힌다 — flex 로 두면 ⓘ 혼자 다음 줄로 떨어졌다) */
.ihint{display:block}
.infobtn{display:inline-block; vertical-align:middle; border:0; background:transparent; color:var(--muted); font-size:15px; line-height:1;
  padding:6px; margin:-6px 0 -6px 2px; cursor:pointer; border-radius:999px}
.infobtn[aria-expanded="true"]{color:var(--accent)}
.infopop{margin:0 0 12px; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line);
  font-size:13px; line-height:1.6; color:var(--ink-2)}
.infopop b{display:block; color:var(--ink); font-size:13px}
.infopop ul{margin:2px 0 8px; padding-left:18px}
.infopop ul:last-child{margin-bottom:0}
.infopop li + li{margin-top:2px}
/* 앱 문제 신고하기(v269 openReport) — 질문 · 큰 글칸(아래 오른쪽에 글자 수) · 안내 · [보내기] */
.rpbody{display:flex; flex-direction:column; gap:12px}
.rpq{margin:4px 0 0; font-size:16px; font-weight:700}
.rpbox{position:relative}
.rpbox textarea{display:block; width:100%; box-sizing:border-box; min-height:220px; resize:vertical; border:1px solid var(--line);
  border-radius:14px; background:var(--surface-2); padding:14px 14px 34px; font-family:inherit; font-size:15px; line-height:1.55; color:var(--ink)}
.rpbox textarea:focus{outline:0; border-color:var(--accent); background:var(--surface)}
.rpcnt{position:absolute; right:14px; bottom:10px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; pointer-events:none}
.rphint{margin:0}
.rpsend{width:100%}
/* 이용방법 맺음말 뒤 [사용 설명서] 단추(v269) */
.gmanual{text-align:center; margin:14px 0 4px}
.thedbtns{display:flex; align-items:center; gap:6px}
/* v263 사용자 요청 — 단추 위아래 8px · 글 15px(폰 입력칸 16px 전역 규칙보다 뒤 · !important 로 이긴다) */
.thedbtns .btn{padding:8px 14px!important}
.thed textarea{font-size:15px!important}
.thedbtns .spacer{flex:1 1 auto}
.thlist .thd{flex:0 0 auto; color:var(--ink-2); font-weight:600; font-size:12.5px}
.thlist .thd small{color:var(--muted); font-weight:400}
/* 한 줄만 — 넘치면 …. 온전한 글은 눌러서 여는 창에서 읽는다 */
.thlist .tht{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thmore{margin-top:6px; width:100%; border:1px dashed var(--line-strong); border-radius:8px;
  padding:8px; font-size:12.5px; color:var(--muted)}
.thmore:hover{color:var(--accent); border-color:var(--accent)}
/* 감사일기 본문 — 날짜 상세 모달 맨 위에 붙는다. 누르면 고칠 수 있어 button 이다 */
.thankslip{display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:8px;
  padding:9px 11px; font-size:13px; line-height:1.6; color:var(--ink); white-space:pre-wrap; word-break:break-word}
.thankslip:hover{border-color:var(--accent)}
.thankslip b{display:block; font-size:11px; color:var(--accent); font-weight:600; margin-bottom:3px}
/* 하루 창 — 감정 칩은 머리줄의 날짜 옆.
   * 칩은 줄어들지 않고, 날짜가 남은 폭을 가진다. 좁은 폭에서 날짜 쪽이 먼저 줄어야
     칩·건수·닫기가 밀려나지 않는다(h2 는 flex 항목이라 min-width:auto 를 풀어 준다). */
.modal header .moodbtn{flex:0 0 auto; border:0; background:transparent; padding:0; line-height:1}
/* 아직 안 쓴 날 — 눌러서 쓰라는 자리인 것만 알려 준다.
   * 클래스명 주의: `.empty` 는 이미 전역 빈 상태 상자(아래 .empty — 가운데 정렬 + 큰 여백)다.
     처음에 `.thankslip.empty` 로 썼다가 그 규칙이 이겨서 글이 가운데로 몰리고 ♥ 색까지 바뀌었다.
     (`.pad` 와 같은 종류의 함정이다 — 짧은 이름은 이미 임자가 있다) */
.thankslip.blank{background:transparent; border-style:dashed}
.thankslip .ph{color:var(--muted)}
/* 머니플랜 — '아직 쓴 돈이 아니다'. 감사일기 쪽지와 같은 모양이되 점선으로 구분한다 */
.planslip{background:transparent; border-style:dashed; border-color:var(--line-strong); color:var(--ink-2)}
.planslip b{color:var(--muted)}
.planslip:hover{border-color:var(--ink-2); border-style:solid}

/* ---------- 오늘의 투두 ----------
   * 레일 카드와 하루 창이 같은 markup(mountTodos)을 쓴다. 그래서 규칙도 한 벌만 둔다.
   * 한 줄은 [체크] [시간·내용] [✕] 세 칸이다. 가운데만 늘어나고 양끝은 고정 —
     내용이 길어도 체크와 ✕ 가 밀리지 않아야 손이 자리를 외운다. */
/* 위 여백을 따로 주지 않는다 — 레일은 이미 .rail 의 gap 으로 간격을 잡는다.
   10px 을 더 주면 이 카드만 24px 로 떨어져 나머지(14px)와 어긋난다(실측). */
/* 할 일이 없으면 제목 줄만 남는다 — 아래 여백(h2 8 + #todoBox 11)이 위(12~14)보다 커서 줄이 위로 붙어 보였다(피드백: 미들 정렬).
   목록이 빈 동안만 위아래를 같게 맞춘다. */
.todocard:not(:has(.todolist > *)):not(:has(.tded)) h2{margin-bottom:0}
.todocard:not(:has(.todolist > *)):not(:has(.tded)) #todoBox{padding-bottom:10px}
/* 제목 줄 오른쪽 ＋ — 새 줄을 여는 자리. 목록이 길어져도 손이 가는 곳이 안 바뀐다.
   .cnt 가 margin-left:auto 로 오른쪽 끝을 잡으므로 이 단추는 그 바로 뒤에 붙는다. */
.tdplus{flex:0 0 auto; margin-left:6px; width:22px; height:22px; padding:0;
  display:grid; place-items:center; border:1px solid var(--accent-line); border-radius:7px;
  background:var(--surface); color:var(--accent); font-size:14px; line-height:1; cursor:pointer}
.tdplus:hover{background:var(--accent-soft)}
.todolist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
/* 레일의 '오늘의 투두' 목록은 감사 카드의 글칸과 같은 판 위에 올린다.
   두 카드가 '제목 → 상자' 로 같은 짜임이 되고, 줄이 적을 때 생기던 빈 자리가
   '상자 안' 이 되어 붕 뜨지 않는다.
   * 줄 사이에 선은 긋지 않는다 — .tdrow 가 둥근 모서리라 선이 휘어 보인다(실제로 그랬다).
   * 할 일이 하나도 없으면 판을 아예 감춘다. 빈 회색 상자는 '뭔가 안 나왔다' 로 읽힌다. */
.todocard .todolist{background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:3px 6px; gap:0}
.todocard .todolist:empty{display:none}
/* 두 카드가 같은 높이로 끝나게 아래를 맞춘다.
   감사 카드는 글칸 밑에 저장 알림 줄(.thbar = 13px + margin 3px)이 있어 그만큼 더 내려간다.
   투두 카드에는 그 줄이 없어서 목록이 카드 모서리에 바짝 붙었다(실측 26 대 10px).
   .thbar 높이를 바꾸면 이 값도 같이 바꿀 것. */
.todocard #todoBox{padding-bottom:11px}
/* 판이 경계를 만드니 '추가' 의 점선 상자는 뺀다 — 상자 안에 상자가 되고 무게중심이 아래로 쏠린다.
   다른 화면(하루 창·전체보기)의 .tdadd 는 그대로 둔다. 거기엔 판이 없다. */
.todocard .tdadd{border-style:none; padding:6px 2px}
.tdrow{display:flex; align-items:center; gap:7px; min-width:0; border-radius:7px}
.tdrow:hover{background:var(--surface-2)}
.tdck{flex:0 0 auto; width:15px; height:15px; margin:0; accent-color:var(--accent); cursor:pointer}
.tdmain{flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:7px; cursor:pointer;
  background:transparent; border:0; padding:5px 0; font-family:inherit; font-size:13px;
  line-height:1.5; color:var(--ink); text-align:left}
.tdtext{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tdrow.done .tdtext{text-decoration:line-through; text-decoration-thickness:1px; color:var(--muted)}
/* ✕ 는 평소에 숨긴다 — 줄마다 ✕ 가 줄지어 있으면 목록이 시끄럽다.
   손이 닿거나(hover) 키보드가 닿으면(focus) 나타난다. 손가락 화면에서는 늘 보인다(아래 모바일) */
.tddel{flex:0 0 auto; width:22px; height:22px; border:0; background:transparent; border-radius:6px;
  color:var(--muted); font-size:11px; line-height:1; opacity:0; cursor:pointer}
.tdrow:hover .tddel, .tddel:focus-visible{opacity:1}
.tddel:hover{background:var(--surface); color:var(--expense)}
/* [＋ 투두 추가] 는 남는 폭을 다 쓰고, [전체보기 →] 는 오른쪽 끝에 붙는다 */
.tdbar{display:flex; align-items:center; gap:8px; margin-top:6px}
.tdadd{flex:1 1 auto; min-width:0; display:block; text-align:left; cursor:pointer;
  border:1px dashed var(--line-strong); border-radius:8px; background:transparent;
  padding:7px 10px; font-family:inherit; font-size:12.5px; color:var(--muted)}
.tdadd:hover{color:var(--accent); border-color:var(--accent)}
.tdgo{flex:0 0 auto; border:0; background:transparent; cursor:pointer; padding:7px 2px;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--accent); white-space:nowrap}
.tdgo:hover{text-decoration:underline; text-underline-offset:3px}
/* ---------- 투두 전체보기 창 ---------- */
.tdfilters{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.tdfilters .thsrch{width:100%; box-sizing:border-box}
.tdfilters .thsrch input{flex:1 1 auto; width:auto; min-width:0}
/* [＋ 감사일기 쓰기] 는 글자만큼 — 투두 전체보기의 [＋ 투두 추가] 와 같은 길이 규칙(v263 사용자 요청).
   .tdfilters 의 바로 아래 자식이라 그대로 두면 세로 flex 가 폭을 끝까지 늘린다 */
.tdfilters > #thaNew{align-self:flex-start}
.tdfrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tdflab{flex:0 0 auto; font-size:11.5px; color:var(--muted)}
.tdseg{display:flex; gap:4px; flex-wrap:wrap}
.tdseg button{border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:999px; padding:4px 11px; font-family:inherit; font-size:12px; cursor:pointer}
.tdseg button:hover{color:var(--ink); border-color:var(--line-strong)}
.tdseg button.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.tdcustom{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.tdcustom input{flex:1 1 130px; min-width:0; box-sizing:border-box; font-family:inherit; font-size:13px;
  color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:5px 8px; background:var(--surface)}
.tdcustom span{color:var(--muted)}
/* 날짜별 묶음 — 머리는 누르면 그 날 창이 열린다 */
.tdaday + .tdaday{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.tdadate{display:flex; align-items:baseline; gap:6px; width:100%; cursor:pointer;
  border:0; background:transparent; padding:2px 0 5px; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--ink-2); text-align:left}
.tdadate small{color:var(--muted); font-weight:400}
.tdadate:hover{color:var(--accent)}
.tdview{cursor:default}       /* 전체보기 목록의 본문은 누를 것이 아니다(체크만 한다) */
/* 전체보기 줄 끝의 복사 · 반복 단추(v216). 반복 중이면 강조색 */
.tdact{flex:0 0 auto; width:28px; height:28px; display:inline-grid; place-items:center; padding:0; border:0;
  border-radius:7px; background:transparent; color:var(--muted); cursor:pointer}
.tdact svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tdact:hover{background:var(--surface); color:var(--accent)}
.tdact.on{color:var(--accent)}
.tdact.tdactdel{font-size:11px}
.tdact.tdactdel:hover{color:var(--expense)}
/* 반복 회차 지우기·고치기 — '이 투두만 / 이후 모두' 를 그 줄 자리에서 묻는다(v218) */
.tdscope{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px; padding:8px 4px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); margin:2px 0}
.tdscopemsg{font-size:12.5px; color:var(--ink-2)}
.tdscopebtns{display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap}
.tdscopebtns .btn{padding:5px 12px; font-size:12.5px}
/* 반복 회차 표시 — 글 뒤 작은 그림 + '매주' */
.tdrepmark{flex:0 0 auto; display:inline-flex; align-items:center; gap:2px; color:var(--accent); align-self:center}
.tdrepmark svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tdrepmark small{font-size:10.5px}
/* 반복 고르기 — 그 줄 자리에 펼친다 */
.tdrep{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px; padding:8px 4px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); margin:2px 0}
.tdrepline{display:flex; align-items:center; gap:8px}
.tdrepline[hidden]{display:none}
.tdrepline label{flex:0 0 64px; font-size:12px; color:var(--muted)}
.tdrepline select, .tdrepline input{flex:1 1 auto; min-width:0; box-sizing:border-box; font-family:inherit; font-size:13px;
  color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:5px 8px; background:var(--surface)}
.tdrephint{margin:0; font-size:11.5px; color:var(--muted); line-height:1.5}
.tdrepbtns{display:flex; justify-content:flex-end; gap:6px}
.tdrepbtns .btn{padding:5px 12px; font-size:12.5px}
/* ---------- 이용방법 ----------
   읽는 글이라 본문 폭을 재지 않고 줄간격을 넉넉히 둔다. 단계 사이는 선 하나로 가른다. */
/* 읽는 글은 한 줄이 너무 길면 눈이 다음 줄을 놓친다. 넓은 창(760px)에서도 본문은 좁게 잡는다 */
/* 이용방법 문서는 .gdoc 이다 — 예전에는 화면 하단 설명과 같은 .guide 를 썼는데,
     아래 `.formula, .guide` 규칙이 margin:0 auto 를 덮어써서 두 곳 모두 오른쪽만 크게 비었다.
     (창은 760, 글은 620 이라 140px 이 오른쪽에 남았다. 하단 설명도 같은 이유로 316px 남았다.)
     창 폭은 .modal.narrowdoc 이 글 폭에 맞춰 좁힌다. */
.gdoc{line-height:1.75}
.gdoc .glead{font-family:"Gowun Batang",serif; font-size:16px; line-height:1.9; color:var(--ink);
  margin:0 0 4px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.gstep{padding:18px 0; border-bottom:1px solid var(--line)}
.ghd{display:flex; align-items:baseline; gap:9px; margin-bottom:8px}
.gnum{flex:0 0 auto; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--accent);
  font-variant-numeric:tabular-nums}
.ghd h3{margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em}
.gdoc .gstep p{margin:0 0 5px; font-size:13.5px; color:var(--ink-2)}
.gdoc .gstep p b{color:var(--ink); font-weight:600}
/* 폰에서 보는 이용방법 — 큰 화면(웹)도 써 보라는 안내(v220). 단계 글과 갈리게 옅은 강조 바탕 */
.gweb{margin:22px 0 6px; padding:12px 14px; border-radius:var(--r); background:var(--accent-soft); border:1px solid var(--accent-line)}
.gweb > b{display:block; font-size:13.5px; color:var(--accent); margin-bottom:4px}
.gweb p{margin:0; font-size:13px; line-height:1.75; color:var(--ink-2)}
.gweb a, .gweb p b{color:var(--accent); font-weight:600}
.gend{margin:18px 0 0; text-align:center; font-size:13.5px; color:var(--ink-2)}
.gend b{color:var(--accent); font-weight:600; white-space:nowrap}
/* 화면 예시 — 그림 파일이 아니라 CSS 로 그린 축소 모형 */
.gm{margin-top:12px; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow)}
.gmhd{display:flex; align-items:center; gap:4px; padding:7px 10px; background:var(--surface-2);
  border-bottom:1px solid var(--line)}
.gmhd i{width:6px; height:6px; border-radius:50%; background:var(--line-strong)}
.gmhd span{margin-left:6px; font-size:10.5px; color:var(--muted); letter-spacing:.02em}
.gmb{padding:9px 11px; font-size:11px; line-height:1.5; color:var(--ink-2)}
.gmb .gmday{font-size:10.5px; color:var(--muted); margin:5px 0 3px}
.gmb .gmday:first-child{margin-top:0}
.gmb .gmday span{margin-left:4px}
.gmr{display:flex; align-items:baseline; gap:7px; padding:3px 0; border-bottom:1px dashed var(--line)}
.gmr:last-child{border-bottom:0}
.gmr b{flex:0 0 52px; font-weight:500; color:var(--muted); font-size:10.5px}
.gmr span{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.gmr em{flex:0 0 auto; font-style:normal; font-weight:600; font-variant-numeric:tabular-nums}
.gmr em.o{color:var(--expense)} .gmr em.i{color:var(--income)} .gmr em.s{color:var(--transfer)}
.gmt{display:flex; align-items:baseline; gap:6px; font-size:10.5px; color:var(--muted); margin-bottom:4px}
.gmt b{color:var(--accent); font-weight:600}
.gmt span{margin-left:auto}
.gmt.sep{margin-top:9px; padding-top:8px; border-top:1px solid var(--line)}
.gmck{display:flex; align-items:center; gap:7px; padding:2px 0}
.gmck i{flex:0 0 auto; width:11px; height:11px; border:1px solid var(--line-strong); border-radius:3px;
  font-size:8px; line-height:9px; text-align:center; color:transparent}
.gmck.on i{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.gmck u{flex:0 0 30px; text-decoration:none; color:var(--muted); font-variant-numeric:tabular-nums}
.gmck s{color:var(--muted)}
.gmq{padding:6px 8px; border-radius:6px; background:var(--accent-soft); color:var(--ink)}
.gmw{display:grid; grid-template-columns:repeat(7,1fr); font-size:9px; color:var(--muted); text-align:center}
.gmg{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; margin-top:3px}
.gmc{position:relative; min-height:24px; padding:2px 3px; border:1px solid var(--line); border-radius:3px;
  font-size:9px; color:var(--ink-2)}
.gmc b{position:absolute; right:2px; bottom:1px; font-weight:600; font-size:8px}
.gmc b.h{top:1px; bottom:auto; color:var(--c,var(--accent)); font-size:9px}
.gmc b.t{color:var(--muted)}
.gmc b.m{color:var(--expense)}
.gmk{display:flex; gap:8px; margin-bottom:7px}
.gmk > div{flex:1 1 0; min-width:0; border:1px solid var(--line); border-radius:6px; padding:5px 7px}
.gmk u{display:block; text-decoration:none; font-size:9.5px; color:var(--muted)}
.gmk b{font-size:12px; font-variant-numeric:tabular-nums}
.gmbar{height:6px; border-radius:999px; background:var(--sunken); overflow:hidden; margin-bottom:7px}
.gmbar i{display:block; height:100%; background:var(--accent)}
.gmsvg{display:block; width:100%; height:auto; margin-bottom:6px; fill:var(--accent); stroke:var(--accent);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.gmsvg path{fill:none}
/* 고치는 줄 — 할 일 한 칸 + 확인/취소.
   * 접지 않는다(nowrap). 접히면 좁은 화면에서 ✕ 가 혼자 아랫줄로 내려가 줄이 두 겹이 된다.
     대신 글 칸이 남는 폭을 다 쓰고 필요하면 줄어든다(flex-shrink + min-width:0). */
/* 이 줄은 li.tdrow(가로 flex) 안에 들어간다 — flex 아이템이라 두면 안 늘어나
   [할 일][확인][✕] 이 줄의 왼쪽 절반에만 몰린다(실측 358 중 306px 만 썼다). */
/* v210 — 두 줄이 됐다: 윗줄 [할 일][확인][✕](.tdline), 아랫줄 [날짜][시간](.tdwhen) */
.tded{display:flex; flex-direction:column; gap:5px; padding:4px 0; flex:1 1 auto; min-width:0}
.tdline{display:flex; align-items:center; gap:5px; flex-wrap:nowrap; min-width:0}
.tded .tdxin{flex:1 1 auto; min-width:0}
.tdwhen{display:flex; align-items:center; gap:5px; min-width:0}
/* 반반 — 시간 칸을 좁히면 폰에서 '오전 10:' 까지만 보였다(실측) */
.tdwhen .tddate, .tdwhen .tdtm{flex:1 1 0; min-width:0}
/* 목록 줄의 시각 — 글 앞에 작게 */
.tdtime{flex:0 0 auto; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.tdrow.done .tdtime{opacity:.6}
.tded input{font-family:inherit; font-size:13px; color:var(--ink); box-sizing:border-box;
  border:1px solid var(--line); border-radius:7px; padding:5px 8px; background:var(--surface)}
.tded input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.tded .btn{flex:0 0 auto; padding:5px 10px; font-size:12.5px}
/* 달력 칸 — 개수만. 내용은 날짜를 눌러서 본다 */
.cal .tdn{flex:0 0 auto; font-size:9.5px; font-weight:600; color:var(--muted);
  background:var(--sunken); border-radius:999px; padding:0 4px; line-height:1.5}
.cal .tdn.alldone{color:var(--income); background:color-mix(in oklab, var(--income) 14%, transparent)}
.cal .cell.out .tdn{opacity:.5}
/* ---------- 하루 창의 세 자리 (투두 · 감사일기 · 거래내역) ----------
   * 카드를 겹치지 않는다. 얇은 선 하나와 여백으로만 가른다 —
     창 안에 테두리 상자를 또 쌓으면 길어지고 선이 두 겹으로 보인다. */
.dsec + .dsec{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.dsechd{display:flex; align-items:baseline; gap:8px; margin-bottom:7px}
.dsechd h3{font-size:11.5px; font-weight:500; letter-spacing:.02em; color:var(--muted); margin:0}
.dcnt{margin-left:auto; font-size:var(--t-xs); color:var(--muted); font-variant-numeric:tabular-nums}
/* 거래내역은 기존 정보를 그대로 두되 위아래 여백만 좁힌다 */
.dtl.tight li{padding-top:7px; padding-bottom:7px}

.tabs{display:flex; gap:4px; overflow-x:auto; padding-bottom:2px; margin-bottom:14px}
.tabs button{border:1px solid transparent; background:transparent; color:var(--muted);
  padding:7px 13px; border-radius:999px; font-size:13.5px; font-weight:500; white-space:nowrap}
.tabs button:hover{color:var(--ink); background:var(--surface-2)}
.tabs button[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}

.panel{display:none}
.panel.on{display:block}
.sect{margin-bottom:16px}
.sect > h2{font-size:14px; font-weight:600; margin-bottom:2px}
.sect > p.hint, p.hint{font-size:12.5px; color:var(--muted); margin:0 0 10px}
/* 화면 맨 아래 저작권 줄 */
.sitefoot{margin-top:var(--sp6); padding:var(--sp5) var(--sp4) var(--sp4); text-align:center;
  border-top:1px solid var(--line); font-size:var(--t-xs); color:var(--muted); letter-spacing:.03em}
/* 밑줄은 평소에 걷어 둔다 — 하단 줄이 조용해야 한다. 손이 닿으면 링크임을 알려준다 */
.sitefoot a{color:inherit; text-decoration:none; text-underline-offset:3px}
.sitefoot a:hover{color:var(--ink); text-decoration:underline}
/* 하단 줄의 인스타그램 링크 — 아이콘만 두고 글자 크기를 따라간다.
   밑줄은 걸지 않는다(아이콘에 밑줄이 그어지면 지저분하다). */
.iglink{display:inline-flex; align-items:center; vertical-align:-.18em}
.iglink:hover{text-decoration:none!important}
.iglink svg{width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
/* 폰 처리방침 경로(스토어 심사 요건)는 더보기 › 도움말 › 정보 한 곳이다.
   설정 맨 아래 .appinfo 줄(v261)과 더보기 맨 아래 .moreinfo 줄(v269)은 사용자 요청으로 뺐다. */
/* 섹션 머리줄 — 제목 + 우측 버튼 */
.secthd{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
/* 모바일 로드맵 전환 (세그먼트) — 칸 수는 버튼 수를 따라간다(지금 셋). 한 줄에 들어가야 한다 */
.rdswitch{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px;
  background:var(--sunken); border-radius:10px; margin-bottom:var(--sp3)}
.rdswitch button{border:0; background:transparent; color:var(--muted);
  padding:9px 2px; border-radius:7px; font-size:var(--t-sm); font-weight:600;
  letter-spacing:-.04em; white-space:nowrap; touch-action:manipulation}
.rdswitch button[aria-selected="true"]{background:var(--surface); color:var(--accent);
  box-shadow:0 1px 3px rgba(20,20,30,.12)}
/* 화면 맨 아래 사용법·계산식 — 매번 읽는 글이 아니라 표·목록 다음에 모아 둔다.
   모든 탭이 같은 자리, 같은 모양을 쓴다. 새 설명은 .guide 를 쓸 것(.formula 는 계산식 전용).
   * 모바일에서는 이 둘을 통째로 감춘다(아래 미디어쿼리) — 좁은 화면에서는 스크롤만 늘린다. */
.formula, .guide{margin:var(--sp5) 0 0; padding-top:var(--sp3); border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--muted); line-height:1.7}
.guide b, .formula b{color:var(--ink-2); font-weight:600}
/* 여러 문단이 잇달아 오면 구분선은 첫 줄에만 */
.formula + .formula, .guide + .guide,
.formula + .guide, .guide + .formula{margin-top:var(--sp2); padding-top:0; border-top:0}

.intake{border:1.5px dashed var(--accent-line); background:var(--accent-soft); border-radius:var(--r); padding:12px}
.intake textarea{width:100%; min-height:132px; resize:vertical; border:1px solid var(--line);
  background:var(--surface); border-radius:8px; padding:11px 12px;
  font-family:"IBM Plex Mono","Consolas",monospace; font-size:12.5px; line-height:1.7}
.intake .bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px}
.btn{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:6px 12px; border-radius:8px; font-size:13px; font-weight:500}
/* 설정 > 정보의 인스타그램 버튼 — 아이콘과 아이디를 한 줄에 둔다 */
.btn-ig{display:inline-flex; align-items:center; gap:7px; text-decoration:none}
.btn:hover{background:var(--surface-2)}
/* 링크를 버튼 모양으로 쓸 때 (새 창으로 여는 안내 페이지 등) */
a.btn{display:inline-block; text-decoration:none}
/* 화면 아래 동작 바 — 데스크톱은 오른쪽 정렬 버튼, 모바일은 앱처럼 아이콘+라벨 (아래 미디어쿼리) */
.actbar{display:flex; gap:8px; justify-content:flex-end; margin-top:var(--sp3); flex-wrap:wrap}
.actbar button{display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:500}
.actbar button:hover{background:var(--surface-2)}
.actbar svg{width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* 입력 창 안의 '새 항목 만들기' 한 줄 — [구분][이름][추가][✕].
   * 접지 않는다(nowrap). 접히면 좁은 화면에서 ✕ 가 혼자 아랫줄로 내려간다(투두 줄과 같은 이유).
     이름 칸이 남는 폭을 다 쓰고 필요하면 줄어든다. */
.newitem{display:flex; flex-wrap:nowrap; align-items:center; gap:5px; margin-top:6px}
.newitem select{flex:0 0 auto; max-width:38%; min-width:0}
.newitem input{flex:1 1 auto; min-width:0}
.newitem .btn{flex:0 0 auto; padding:6px 10px; font-size:12.5px}
/* 제목 줄에 앉는 아이콘 한 개짜리 버튼 (모바일 장기로드맵의 '설정' 톱니).
   * 글자 없이 아이콘만 두되 손가락이 닿을 34px 은 확보한다 — 제목 줄을 버튼으로 채우지 않으면서
     설정 카드가 열리는 자리(바로 아래)에서 누를 수 있어야 한다. */
.iconbtn{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border:1px solid var(--line-strong); border-radius:9px;
  background:var(--surface); color:var(--muted); cursor:pointer}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.iconbtn[aria-expanded="true"]{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.iconbtn svg{width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* 표 머리글 안에 앉는 작은 버튼 — 그 열 전체에 걸리는 동작을 둔다.
   * 모바일의 .btn 규칙(padding 12px)이 나중에 선언돼 이 값을 덮어쓴다.
     그래서 미디어쿼리 안에서 한 번 더 잡아 준다. 그 버튼이 든 칸은 여백도 줄인다. */
.thbtn{padding:3px 8px; font-size:var(--t-xs); font-weight:600; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--surface); border-radius:6px;
  line-height:1.4; white-space:nowrap}
.thbtn:hover{background:var(--accent-soft)}
.stl th.tbtnc{padding:4px 6px}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
/* 위아래 여백은 .btn 과 같은 6px 로 둔다 — 한 줄에 섞여 설 때 혼자 4px 더 커지면 줄이 어긋난다 */
.btn-ghost{border-color:transparent; background:transparent; color:var(--muted); padding:6px 10px}
.btn-ghost:hover{color:var(--ink); background:var(--surface-2)}
.btn-danger{border-color:var(--expense); color:var(--expense); background:transparent}
.btn:disabled{opacity:.45; cursor:not-allowed}
.spacer{flex:1}

.notice{display:flex; gap:9px; align-items:flex-start; padding:10px 12px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); margin-bottom:12px}
.notice b{color:var(--ink); font-weight:600}
.notice .x{margin-left:auto}

.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%}
th{text-align:left; font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.03em;
  padding:9px 10px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap}
td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
.cell-in{width:100%; border:1px solid transparent; background:transparent; padding:5px 7px; border-radius:6px}
.cell-in:hover{border-color:var(--line)}
.cell-in:focus{border-color:var(--accent); background:var(--surface)}
select.cell-in{appearance:none; padding-right:18px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 11px) 50%,calc(100% - 7px) 50%; background-size:4px 4px,4px 4px; background-repeat:no-repeat}
.amt-in{text-align:right; font-variant-numeric:tabular-nums}
.badge{display:inline-block; padding:2px 7px; border-radius:5px; font-size:10.5px; font-weight:600; white-space:nowrap}
.badge.new{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line)}
.badge.dup{background:var(--sunken); color:var(--muted); border:1px solid var(--line)}
.badge.bad{background:rgba(227,73,72,.1); color:var(--expense); border:1px solid rgba(227,73,72,.3)}
.badge.cancel{background:var(--sunken); color:var(--ink-2); border:1px solid var(--line)}
.badge.fx{background:rgba(237,161,0,.14); color:var(--fx-ink); border:1px solid rgba(237,161,0,.4)}
/* 고정 수입·지출에서 들어온 기록 — 투두 반복과 같은 반복 그림(v219, 전에는 '고정' 배지) */
.lg-repic{display:inline-flex; vertical-align:-2px; color:var(--accent)}
.lg-repic svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.swatch{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:0}
.reviewfoot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
.reviewfoot .sum{font-size:13px; color:var(--ink-2)}
.reviewfoot .sum b{font-weight:600; color:var(--ink)}
.raw{font-size:11px; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.rvw{table-layout:fixed; min-width:860px}
.rvw td,.rvw th{overflow:hidden}
.rvw .cell-in{width:100%}
.rvw td > span > select.cell-in{flex:1 1 0; min-width:0; width:auto}
.rvw .badge{flex:0 0 auto}
/* 표 입력 그리드 */
/* 여백 없이 '칸' 으로만 보이게 — 테두리는 td 가 갖고, input 은 테두리 없이 칸을 꽉 채운다.
   (input 마다 테두리를 주면 칸 사이에 여백과 이중선이 생겨 표처럼 안 보인다) */
/* 표 위 동작 줄 — 왼쪽에 건수, 오른쪽에 단추 여섯.
   표가 길어지면 아래에 둔 단추는 화면 밖으로 나가므로 위에 둔다. */
.gridbar{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.gridbar .sum{font-size:13px; color:var(--ink-2)}
.gridbar .sum b{font-weight:600; color:var(--ink)}
.gridbar .spacer{flex:1 1 auto}
.gridbar .btn{display:inline-flex; align-items:center; gap:5px}
.gridbar .btn svg{width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.gridbar .btn[disabled]{opacity:.45}
.gridtbl{table-layout:fixed; min-width:880px}
.gridtbl td{padding:0; overflow:hidden; border:1px solid var(--line)}
.gridtbl th{padding:8px 6px; border:1px solid var(--line)}
.gridtbl .gcell{width:100%; display:block; border:0; background:transparent;
  border-radius:0; padding:7px 8px; font-size:13px}
.gridtbl .gcell:focus{outline:2px solid var(--accent); outline-offset:-2px; background:var(--surface)}
.gridtbl .gcell.amt-in{text-align:right}
/* 읽기 전용(차액) — 칸 모양은 같고 배경만 죽인다 */
.gridtbl .gcell[readonly]{background:var(--sunken); color:var(--ink-2); cursor:default}
.gridtbl .gcell[readonly]:focus{outline:0}
/* 확인 필요한 칸 */
.gridtbl td.bad{background:rgba(227,73,72,.07); box-shadow:inset 0 0 0 1px var(--expense)}
/* 항목 select — 화살표 자리를 두고 긴 이름은 잘라 보여준다 */
.gridtbl select.gcell{appearance:none; padding-right:20px; text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%; background-size:4px 4px,4px 4px; background-repeat:no-repeat}
.gridtbl td.n{text-align:right; font-variant-numeric:tabular-nums; font-size:13px}
.gridtbl .raw{margin-top:2px}
.gridtbl tbody tr:hover td{background:var(--surface-2)}
/* 행 선택 · 행 동작(복제/삭제) */
.gridtbl .gsel{text-align:center; padding:5px 2px}
.gridtbl .gsel input{width:17px; height:17px; accent-color:var(--accent); margin:0}
.gridtbl .gact{white-space:nowrap; text-align:center; padding:5px 2px}
.gridtbl .gact .btn-ghost{padding:3px 5px; font-size:14px; line-height:1}
.gridtbl tbody tr:has(.gsel input:checked) td{background:var(--accent-soft)}

/* ---------- 정산표 ---------- */
/* 정산표 — 월말정산 · 주간정산 · 단기로드맵 공통.
   * 글자 크기는 여기 두 줄로만 정한다(헤더 --t-xs / 본문 13px). 개별 규칙에서 다시 지정하지 말 것. */
.stl{min-width:640px}
.stl th{font-size:var(--t-xs)}
.stl td{font-size:13px; line-height:1.45}
.stl th,.stl td{border-right:1px solid var(--line)}
.stl th:last-child,.stl td:last-child{border-right:0}
.stl .grp{background:var(--surface-2); font-weight:600; color:var(--ink-2); white-space:nowrap; vertical-align:middle}
.stl .it{color:var(--ink-2); white-space:nowrap}
/* 월말정산 표만 열 폭을 colgroup 의 % 로 못박는다 — 창이 커지면 여섯 열이 같이 넓어진다.
   (주간정산·로드맵은 열 수가 달마다 달라 auto 가 맞으므로 .stl 전체에 주지 않는다) */
.mstl{table-layout:fixed}
.mstl .grp,.mstl .it{overflow:hidden; text-overflow:ellipsis}
/* 단기로드맵 표 — 12개월 + 합계를 한 화면에 담으려고 좌우 여백을 줄인다 */
.rdtbl th,.rdtbl td{padding:8px 6px}
.rdtbl .grp,.rdtbl .it{padding-left:10px; white-space:nowrap}
.rdtbl th:first-child,.rdtbl th:nth-child(2){padding-left:10px}
/* 단기로드맵 그래프(데스크톱, v189) — 표 아래. 06-roadmap.js drawRoadChart */
.rdchart{position:relative; margin-top:var(--sp4);
  --rdc-plan:color-mix(in srgb, var(--muted) 16%, var(--surface))}   /* 계획 바탕 — 라이트·다크 둘 다 표면에서 보이게 */
.rdc-hd{display:flex; align-items:baseline; gap:var(--sp3); margin-bottom:var(--sp3)}
.rdc-hd h3{margin:0; font-size:var(--t-lg); font-weight:700; color:var(--ink)}
.rdc-lg{margin-left:auto; display:flex; gap:var(--sp4); font-size:var(--t-sm); color:var(--ink-2)}
.rdc-lg>span{display:inline-flex; align-items:center; gap:6px}
.rdc-lg i{display:inline-block; width:14px; height:10px; border-radius:3px}
.rdc-lg .lg-plan{background:var(--rdc-plan); box-shadow:inset 0 2px 0 var(--muted)}   /* 바탕 막대 + 목표 눈금(위) */
.rdc-lg .lg-act{background:var(--accent)}
.rdc-lg .lg-tick{background:transparent; height:2px; border-radius:1px; box-shadow:0 0 0 1px var(--ink-2); background:var(--ink-2)}   /* 연간정산 지출 예산 눈금 */
.rdc-grid{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:var(--sp5)}
.rdc-grid figure{margin:0; min-width:0}
.rdc-grid figcaption{font-size:var(--t-sm); color:var(--muted); margin-bottom:var(--sp2)}
.rdc-svg{min-width:0; overflow:hidden}
.rdc-svg svg{display:block; max-width:100%; height:auto}
.rdc-ax{font-size:11px; fill:var(--muted); font-variant-numeric:tabular-nums}
.rdc-pct{font-size:11px; font-weight:600; fill:var(--ink-2); font-variant-numeric:tabular-nums}
.rdc-pct.zero{fill:var(--muted); font-weight:400}
.rdc-end{font-size:12px; font-weight:700; fill:var(--ink); font-variant-numeric:tabular-nums}
.rdc-empty{margin:0; padding:40px 0; text-align:center; color:var(--muted); font-size:var(--t-sm)}
.rdc-tip{position:absolute; z-index:5; pointer-events:none; min-width:150px; padding:8px 10px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow-lg); font-size:var(--t-sm); color:var(--ink)}
.rdc-tip b{display:block; margin-bottom:4px; font-weight:700}
.rdc-tip div{display:flex; justify-content:space-between; gap:16px; color:var(--ink-2)}
.rdc-tip em{font-style:normal; color:var(--ink); font-weight:600}
.stl .sumrow td{background:var(--accent-soft); font-weight:600}
.stl .totalrow td{background:var(--sunken); font-weight:600; border-top:2px solid var(--line-strong)}
.stl td.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.stl .zero{color:var(--muted)}
.stl thead th.wk{text-align:center; border-left:2px solid var(--line-strong); background:var(--surface-2)}
.stl .wkstart{border-left:2px solid var(--line-strong)}
.stl .pct{font-variant-numeric:tabular-nums}
.stl .cell-in{font-size:13px}
.pct{font-variant-numeric:tabular-nums}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:14px}
.kpi{background:var(--surface); padding:13px 15px}
.kpi dt{font-size:11px; color:var(--muted); margin-bottom:4px}
.kpi dd{margin:0; font-size:20px; font-weight:600}
.kpi .sub{font-size:11px; color:var(--muted); margin-top:2px}
/* 숫자 대신 글이 들어가는 KPI 칸 (장기로드맵의 라이프·머니플랜) */
.kpi dd.lrgoal{font-size:12.5px; font-weight:400; line-height:1.5;
  display:flex; flex-direction:column; gap:1px; margin-top:1px}
.kpi dd.lrgoal span{display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--accent)}                     /* 색만 — 볼드는 오히려 튄다 */
.kpi dd.lrgoal em{color:var(--muted); font-style:normal}

/* ---------- daily ---------- */
.day{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; margin-bottom:0}
/* 날짜 줄은 가름표다 — 여백을 얇게 줘야 내역이 주인공으로 남는다 */
.day > header{display:flex; align-items:center; gap:10px; padding:3px 14px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.day .dnum{font-family:"Gowun Batang",serif; font-size:var(--t-lg); font-weight:700; min-width:26px}
.day .dow{font-size:var(--t-xs); color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:1px 6px; border-radius:5px}
/* 일요일·공휴일은 붉게 — 달력(.cal .cell.holiday .d)과 같은 색을 쓴다.
   두 화면이 다른 색으로 '쉬는 날' 을 말하면 같은 뜻으로 안 읽힌다. */
.day .dnum.off, .day .dow.off{color:var(--expense)}
.day .dow.off{border-color:color-mix(in srgb, var(--expense) 35%, var(--line))}
/* 왜 붉은지 — 공휴일 이름을 요일 옆에 붙인다. 자리가 좁으면 잘라 보여 준다.
   색은 조각마다 .hol-on/.hol-off 가 정한다 — 여기서 통째로 칠하지 않는다. */
.dhol{font-size:var(--t-xs);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.day .dsum{margin-left:auto; display:flex; gap:12px; font-size:13px}
/* ---------- 자산 현황 (11-asset.js) ----------
   월말정산 표(.stl) 규칙 위에 얹는다. 월 칸은 입력칸이 칸을 꽉 채운다(월말 예산 칸과 같은 모양). */
.as-hd{align-items:center}
/* 해 단위 화면 제목(yearNavTitle) — 제목 글자 그대로의 단추. 누르면 해 고르기(#ymPop year).
   ▾ 는 누를 수 있다는 표시라 흐리게 작게. 단추 모양(테두리·바탕)은 마우스를 올렸을 때만 */
.ytitle{margin:0}
.ypick{font:inherit; color:inherit; letter-spacing:inherit; background:transparent; border:0; padding:2px 6px; margin:-2px -6px;
  border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-align:left}
.ypick::after{content:"▾"; font-size:.62em; color:var(--muted); transform:translateY(1px)}
.ypick[aria-expanded="true"]{background:var(--surface-2)}
@media (hover:hover){ .ypick:hover{background:var(--surface-2)} }
/* 열 폭 — 표 폭은 이 값들의 합이다(바꾸면 저절로 따라온다). 왼쪽 고정 열의 left 도 --as-g 를 쓴다 */
.astbl{--as-g:78px; --as-i:112px;   /* 항목 열 140→112(v181 사용자 요청) — 긴 이름은 말줄임, 전체는 title */ --as-m:100px; --as-n:150px; --as-r:84px; --as-p:110px;
  width:calc(var(--as-g) + var(--as-i) + 12*var(--as-m) + var(--as-n) + var(--as-r) + var(--as-p)); table-layout:fixed}
.astbl col.as-cg{width:var(--as-g)} .astbl col.as-ci{width:var(--as-i)} .astbl col.as-cm{width:var(--as-m)}
.astbl col.as-cn{width:var(--as-n)} .astbl col.as-cr{width:var(--as-r)} .astbl col.as-cp{width:var(--as-p)}
.astbl th, .astbl td{white-space:nowrap}
.astbl thead th{text-align:center}
.astbl thead th.n{text-align:right}
.astbl th.as-g{background:var(--surface-2); vertical-align:middle; text-align:center; font-weight:600; color:var(--ink-2)}
.astbl th.as-g small{display:block; font-weight:400; font-size:10.5px; color:var(--accent)}
.astbl th.as-i{text-align:left; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis}
.astbl th.as-tl{text-align:left; font-weight:600; color:var(--ink)}
.astbl td.as-in{padding:2px 3px}
.astbl td.as-in > input, .astbl td.as-note > input{display:block; width:100%; min-width:0; border:1px solid transparent; border-radius:5px;
  background:transparent; padding:5px 6px; font:inherit; font-size:12.5px; color:var(--ink)}
.astbl td.as-in > input{text-align:right; font-variant-numeric:tabular-nums}
.astbl td.as-in > input.aslinked{color:var(--muted)}   /* 전년 12월을 따라가는 값(v199) — 직접 넣은 값과 구분 */
.astbl td.as-in > input.aslinked:focus{color:var(--ink)}
.astbl td.as-in > input:hover, .astbl td.as-note > input:hover{border-color:var(--line)}
.astbl td.as-in > input:focus, .astbl td.as-note > input:focus{border-color:var(--accent); background:var(--surface); outline:0}
.astbl td.as-note{padding:2px 3px}
.astbl tr.as-ref th.as-i, .astbl tr.as-ref td.as-in > input{color:var(--muted)}
.astbl tr.as-cap th, .astbl tr.as-cap td{font-weight:700}
/* 옆으로 굴려도 무슨 줄인지 보이게 — 구분·항목(합계 줄은 이름 칸) 을 왼쪽에 붙인다. 바탕을 칠해야 밑으로 숫자가 안 비친다 */
.astbl th.as-g{position:sticky; left:0; z-index:2}
.astbl th.as-i{position:sticky; left:var(--as-g); z-index:2; background:var(--surface)}
/* 폰 — 숫자를 작게(v180 사용자 요청: 13px 로 보이게).
   * 입력 글자는 16px 밑으로 내리면 아이폰이 칸을 누를 때마다 화면을 확대한다(전역 input 16px !important 규칙).
     그래서 글자는 16px 그대로 두고 칸째 0.8125배(=13/16)로 줄인다. 레이아웃 폭은 1/0.8125 배로 넓히고
     오른쪽 끝을 칸 끝에 맞춘 뒤(음수 margin-left) 오른쪽 기준으로 줄이면, 보이는 크기가 칸에 딱 맞는다.
   * 줄인 만큼 월 칸도 좁힌다 — 13px 로 '999,999,999' 가 들어가는 폭(실측). 합계 줄 숫자도 같은 13px. */
@media (max-width:920px){
  .astbl{--as-g:60px; --as-i:104px; --as-m:120px; --as-n:130px; --as-k:.8125}
  .astbl td.as-in > input, .astbl td.as-note > input{padding:5px 3px; width:calc(100% / var(--as-k)); max-width:none;
    margin:-3px 0 -3px calc(100% - 100% / var(--as-k)); transform:scale(var(--as-k)); transform-origin:right center}
  .astbl td.n{font-size:13px}
  .astbl th.as-g, .astbl th.as-i, .astbl th.as-tl{font-size:12.5px}
  .astbl th.as-i{white-space:normal; line-height:1.25}
}
.astbl th.as-tl{position:sticky; left:0; z-index:2; background:inherit}
.astbl thead th:first-child{position:sticky; left:0; z-index:3; background:var(--surface-2)}
.astbl tr.sumrow th.as-tl{background:var(--accent-soft)}
.astbl tr.totalrow th.as-tl{background:var(--sunken)}
.astbl .badge{font-size:10px; padding:0 5px; vertical-align:1px}
/* 붙여넣기 창의 미리보기 */
.as-psum p{margin:6px 0; font-size:12.5px}
.as-psum ul{margin:4px 0 0; padding-left:18px; font-size:12px; line-height:1.6; max-height:220px; overflow:auto}
.as-psum small{color:var(--muted)}
.as-perr{color:var(--expense)}
.as-pwarn{color:var(--accent)}
/* 항목 설정 창 */
.as-sg{border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:10px; background:var(--surface)}
.as-sgh, .as-sil li{display:flex; align-items:center; gap:6px}
.as-sgh .as-gname{font-weight:600; flex:0 1 180px; min-width:0}
.as-sil{list-style:none; margin:8px 0 6px; padding:0 0 0 14px; display:flex; flex-direction:column; gap:4px}
.as-sil .as-iname{flex:0 1 200px; min-width:0}
.as-sg input[type=text], .as-sg input:not([type]), .as-sg select{padding:5px 8px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:13px}
.as-cname{font-size:13px; color:var(--ink)}
.as-chk{display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ink-2); white-space:nowrap}
.as-sg .btn-ghost{padding:3px 7px; font-size:11px}
.as-sg .as-del.armed{color:var(--expense); font-weight:600}
.as-add{margin-top:6px; font-size:12.5px}
.as-tots{margin-top:16px; background:var(--surface-2)}
.as-tots small{color:var(--muted); font-size:11.5px}
/* ---------- 데스크톱 가계부 그리드 (10-ledger.js · Tabulator) ----------
   tabulator_simple 위에 앱 토큰으로 덮는다 — 다크 모드·강조색이 따라온다. 월말정산 표(.stl)와 같은 선·머리 규칙. */
.lg{display:flex; flex-direction:column; gap:10px}
.lgbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lgbar .btn{padding:4px 12px; line-height:18px; font-size:13px}   /* 다른 데스크톱 단추와 같은 28px(v194) */
.lgbar .btn svg{width:14px; height:14px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.8}
.lgbar .lgkind{margin:0}
.lgbar .lgacts{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:auto}   /* 오른쪽 단추 묶음 — 사이 4px(전에는 8px). 줄이 넘쳐 아랫줄로 가도 오른쪽에 붙는다(v217) */
/* 그림만 있는 단추(엑셀 다운로드) — 옆 단추들과 같은 높이의 정사각. 이름은 title(마우스를 올리면) */
.lgbar .btn.lgico{padding:0; width:28px; height:28px; display:inline-grid; place-items:center}   /* 글자 단추와 같은 높이(v194 — 엑셀 단추는 글자로 바꿔 지금은 안 쓴다) */
.lgbar .btn.lgico svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.67;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:0}
/* v219 검색·필터 줄 — 열 머리 검색 칸을 여기로 모았다. 칸 높이는 단추와 같은 28px */
.lgfind{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface)}
.lgfind .btn{padding:4px 12px; line-height:18px; font-size:13px}
.lgfind .lgkind{margin:0}
.lgfind input, .lgfind select{height:28px; box-sizing:border-box; font-family:inherit; font-size:13px; color:var(--ink);
  border:1px solid var(--line); border-radius:7px; padding:0 8px; background:var(--surface)}
.lgfind input:focus, .lgfind select:focus{outline:2px solid var(--accent); outline-offset:-1px}
.lgday{display:inline-flex; align-items:center; gap:2px; position:relative}
.lgday .lgpick{left:0; bottom:0}
.lgfind .btn.lgdaybtn{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.lgfind .btn.lgdaybtn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.lgx{width:22px; height:22px; border:0; background:transparent; color:var(--muted); border-radius:6px; cursor:pointer; font-size:11px}
.lgx:hover{background:var(--surface-2); color:var(--ink)}
/* [구분▾][검색어][검색] 은 한 덩어리 — 사이 선을 붙인다 */
.lgq{display:inline-flex; align-items:stretch}
.lgq select{border-radius:7px 0 0 7px; max-width:120px}
.lgq input{width:240px; border-radius:0; border-left:0}
.lgq .btn{border-radius:0 7px 7px 0; margin-left:-1px}
/* 단추 위계(v219): 편집 묶음 · ⋮ · 이력(작게) · 저장(강조) · 엑셀 그림(맨 오른쪽) */
.lgbar .lggroup{display:inline-flex; gap:4px}
.lgbar .lgsep{width:1px; height:18px; background:var(--line); margin:0 4px}
.lgbar .btn.lgsm{padding:4px 9px; font-size:12px; color:var(--ink-2)}
.lgbar .btn.lgsave{padding-left:18px; padding-right:18px; font-weight:600}
.lgbar .btn.lgico svg{width:17px; height:17px}
.lgbar .btn.lgico circle{fill:currentColor; stroke:none}
.lgbar .btn.lgxl{color:var(--good)}
.lgbar .btn.lgxl:hover{border-color:var(--good)}
.lgmore{position:relative; display:inline-flex}
.lgmenu{position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:180px; padding:4px; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow)}
.lgmenu[hidden]{display:none}
.lgmenu button{border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:6px; font-family:inherit;
  font-size:13px; color:var(--ink); cursor:pointer; white-space:nowrap}
.lgmenu button:hover:not(:disabled){background:var(--surface-2)}
.lgmenu button:disabled{color:var(--muted); cursor:default}
.lgsum{font-size:12.5px; color:var(--muted); white-space:nowrap}
.lgsum b{font-weight:600}
.lgchg{font-size:12.5px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:8px; padding:6px 10px}
.lgload{padding:40px; text-align:center; color:var(--muted); font-size:13px}
.lggrid.tabulator{border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  box-shadow:var(--shadow); font-size:13px; color:var(--ink)}
.lggrid .tabulator-header{background:var(--surface-2); border-bottom:1px solid var(--line-strong); color:var(--muted)}
.lggrid .tabulator-header .tabulator-col{background:var(--surface-2); border-right:1px solid var(--line)}
.lggrid .tabulator-header .tabulator-col .tabulator-col-title{font-size:11.5px; font-weight:600; letter-spacing:.02em}
.lggrid .tabulator-header .tabulator-header-filter input,
.lggrid .tabulator-header .tabulator-header-filter select{width:100%; padding:3px 6px; font-size:12px; border:1px solid var(--line);
  border-radius:6px; background:var(--surface); color:var(--ink)}
.lggrid .tabulator-tableholder{background:var(--surface)}
.lggrid .tabulator-row{background:var(--surface); border-bottom:1px solid var(--line); min-height:34px}
.lggrid .tabulator-row.tabulator-row-even{background:color-mix(in srgb, var(--surface-2) 45%, var(--surface))}
.lggrid .tabulator-row .tabulator-cell{border-right:1px solid var(--line); padding:8px 10px}
.lggrid .tabulator-row .tabulator-cell.tabulator-editing{border:1px solid var(--accent); padding:0; background:var(--surface)}
.lggrid .tabulator-row .tabulator-cell.tabulator-editing input{background:var(--surface); color:var(--ink); padding:7px 9px}
.lggrid .tabulator-row .tabulator-cell.lg-rh, .lggrid .tabulator-col.lg-rh{background:var(--surface-2); color:var(--muted); font-size:11px}
.lggrid .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){
  background:var(--accent-soft)}
.lggrid .tabulator-range-overlay .tabulator-range.tabulator-range-active{border-color:var(--accent)}
.lggrid .tabulator-range-overlay .tabulator-range .tabulator-range-cell-active{border-color:var(--accent)}
.lggrid .tabulator-placeholder .tabulator-placeholder-contents{color:var(--muted); font-size:13px; font-weight:400}
/* 저장 전 표시 — 새 행 초록 띠, 고친 행 강조색 띠(행 번호 칸 왼쪽) */
.lggrid .tabulator-row.lg-new .tabulator-cell.lg-rh{box-shadow:inset 3px 0 0 var(--good)}
.lggrid .tabulator-row.lg-edit .tabulator-cell.lg-rh{box-shadow:inset 3px 0 0 var(--accent)}
/* 즐겨찾기 · 고정 수입·지출 조회 창(v217) — 월말정산 표와 같은 선·머리 규칙 */
.lglistseg{margin:0 0 12px}
.lglistseg small{color:inherit; opacity:.7; font-size:11px; margin-left:2px}
.lglist .lgltbl{width:100%; border-collapse:collapse; font-size:13px}
.lglist .lgltbl th{font-size:11.5px; font-weight:600; color:var(--muted); text-align:center; background:var(--surface-2);
  border-bottom:1px solid var(--line-strong); padding:7px 8px; white-space:nowrap}
.lglist .lgltbl td{border-bottom:1px solid var(--line); padding:7px 8px; vertical-align:middle}
.lglist .lgltbl td small{color:var(--muted); font-size:11px}
.lglist .lgltbl td.r{text-align:right}
.lglist .lgltbl td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.lglist .lgltbl td.r.num{font-weight:600}
.lglist .lgltbl td.acts{width:1%; white-space:nowrap; text-align:right}
.lglist .lgltbl td.acts .btn{padding:3px 10px; font-size:12px}
.lglist .lgltbl td.none{text-align:center; color:var(--muted); padding:18px}
.lglist .lgladdbar{margin-top:8px}
.lglist .lgladd input, .lglist .lgladd select{width:100%; min-width:0; box-sizing:border-box; height:28px; font-family:inherit; font-size:13px;
  color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:0 7px; background:var(--surface)}
.lglist .lgladd input.lglday{width:56px}
.lglist .lgladd input:focus, .lglist .lgladd select:focus{outline:2px solid var(--accent); outline-offset:-1px}
.lglist .lglistsum{margin:10px 0 0; font-size:12.5px; color:var(--muted); text-align:right}
.lglist .guide{margin-top:12px}
/* No 옆 선택 열(v215). 칸 전체가 label 이라 체크박스 둘레를 눌러도 체크된다 */
.lggrid .tabulator-row .tabulator-cell.lg-ckcol{padding:0}
.lggrid .tabulator-col.lg-ckcol .tabulator-col-content{padding:0; height:100%; display:flex; align-items:center; justify-content:center}
.lggrid .lg-ckw{display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:33px; cursor:pointer; margin:0}
.lggrid .lg-ckw input{width:14px; height:14px; margin:0; flex:none; accent-color:var(--accent); cursor:pointer}
.lggrid .tabulator-row.lg-ckd .tabulator-cell:not(.lg-rh){background:var(--accent-soft)}
.lggrid .tabulator-cell.lg-bad{background:color-mix(in srgb, var(--expense) 14%, var(--surface)); box-shadow:inset 0 0 0 1px var(--expense)}
.lggrid .lg-d small{color:var(--muted); font-size:11px}
.lggrid .lg-d.off, .lggrid .lg-d.off small{color:var(--expense)}
.lggrid .v-move{color:var(--transfer)}
.lggrid .num{font-variant-numeric:tabular-nums; font-weight:600}
.lggrid .lg-memo, .lggrid .lg-tm{color:var(--muted); font-size:12px}
.lggrid .swatch{margin-right:6px}
/* 바로 치기 글칸(#lgType) — 평소엔 고른 칸 위에 보이지 않게 떠 있고(포커스만 받는다), 치기 시작하면 칸 편집기처럼 보인다 */
.lggrid .tabulator-tableholder{position:relative}
.lggrid .lgtype{position:absolute; z-index:5; margin:0; border:0; padding:8px 10px; resize:none; overflow:hidden;
  font:inherit; font-size:13px; line-height:1.35; color:var(--ink); background:transparent; opacity:0; pointer-events:none;
  outline:0; white-space:nowrap}
.lggrid .lgtype.on{opacity:1; pointer-events:auto; background:var(--surface); box-shadow:inset 0 0 0 2px var(--accent)}
/* 일자 칸 오른쪽의 달력 그림 — 칸을 고르거나 마우스를 올렸을 때만 진하게 */
.lggrid .tabulator-cell[tabulator-field="date"]{position:relative; padding-right:28px}
.lggrid .lg-cal{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:22px; height:22px; padding:0;
  border:0; border-radius:5px; background:transparent; color:var(--muted); opacity:.35; cursor:pointer; display:grid; place-items:center}
.lggrid .tabulator-row:hover .lg-cal, .lggrid .tabulator-cell.tabulator-range-selected .lg-cal{opacity:1}
.lggrid .lg-cal:hover{background:var(--accent-soft); color:var(--accent)}
.lggrid .lg-cal svg, .lg-dated .lg-calbtn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
/* 일자 편집기 — 글칸 + 달력 단추 */
.lg-dated{display:flex; align-items:center; height:100%; position:relative}
.lg-dated input[type=text]{flex:1 1 auto; min-width:0; border:0; outline:0; padding:7px 9px; font:inherit; background:var(--surface); color:var(--ink)}
.lg-dated .lg-calbtn{flex:0 0 auto; width:26px; height:26px; margin-right:3px; border:0; border-radius:5px; background:transparent;
  color:var(--accent); cursor:pointer; display:grid; place-items:center; padding:0}
.lg-dated .lg-calbtn:hover{background:var(--accent-soft)}
/* 날짜 고르기용 date 입력 — showPicker 는 그려진 요소라야 열리므로 1px 로 둔다 */
.lgpick{position:absolute; width:1px; height:1px; opacity:0; border:0; padding:0; pointer-events:none}
.lg{position:relative}
/* 항목·자산 고르기 목록은 body 에 붙는다(그리드 밖) — 여기서 앱 색을 입힌다 */
.tabulator-popup-container.tabulator-edit-list{background:var(--surface); color:var(--ink); border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.14); font-size:13px}
.tabulator-edit-list .tabulator-edit-list-item{color:var(--ink); padding:6px 10px}
.tabulator-edit-list .tabulator-edit-list-item.active, .tabulator-edit-list .tabulator-edit-list-item.focused,
.tabulator-edit-list .tabulator-edit-list-item:hover{background:var(--accent-soft); color:var(--accent)}
.tabulator-edit-list .tabulator-edit-list-group{color:var(--muted); font-size:11.5px; font-weight:600; padding:6px 10px 2px}
.rows{list-style:none; margin:0; padding:0}
.rows li{display:grid; grid-template-columns:104px 1fr auto; gap:12px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--line); cursor:pointer}
.rows li:last-child{border-bottom:0}
.rows li:hover{background:var(--surface-2)}
.rows .cat{font-size:12px; color:var(--ink-2); line-height:1.3}
.rows .cat small{display:block; color:var(--muted); font-size:11px}
.rows .ttl{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rows .ttl small{display:block; color:var(--muted); font-size:var(--t-xs)}
/* 내용 옆 메모 — 자산·시간 줄(small)보다 한 단계 더 연하게 둬서 본문을 가리지 않는다 */
.rows .ttl .memo{font-style:normal; font-size:11.5px; color:var(--muted); opacity:.75; margin-left:6px}
.rows .val{text-align:right; white-space:nowrap; font-size:14px; font-weight:600}
.rows .val small{display:block; font-weight:400; font-size:11px; color:var(--muted)}
.empty{padding:40px 20px; text-align:center; color:var(--muted); font-size:13px; border:1px dashed var(--line-strong); border-radius:var(--r)}
.empty b{display:block; color:var(--ink); font-size:14px; margin-bottom:4px; font-weight:600}
/* 첫 기록 안내(v226) — 웹 · 기록이 하나도 없을 때. .empty 와 같은 자리, 할 일을 단추로 */
.firstcard{padding:28px 20px; text-align:center; border:1px dashed var(--accent-line); border-radius:var(--r); background:var(--accent-soft)}
.firstcard b{display:block; font-size:16px; color:var(--ink); margin-bottom:6px}
.firstcard p{margin:0 auto; max-width:520px; font-size:13px; line-height:1.7; color:var(--ink-2)}
.fcbtns{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px}
.fcbtns .btn{display:inline-flex; align-items:center; gap:6px}
.fcbtns .btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
#lgFirst:empty{display:none}
/* 측정 창 ?perf (v227) */
.perfsum{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0 0 12px}
.perfsum > div{border:1px solid var(--line); border-radius:8px; padding:8px; background:var(--surface-2)}
.perfsum dt{font-size:11px; color:var(--muted)} .perfsum dd{margin:2px 0 0; font-weight:600; font-variant-numeric:tabular-nums}
.perftbl{width:100%; border-collapse:collapse; font-size:12px}
.perftbl th, .perftbl td{border-bottom:1px solid var(--line); padding:5px 6px; text-align:right; white-space:nowrap}
.perftbl th:first-child, .perftbl td:first-child{text-align:left; white-space:normal; word-break:break-all}
@media (max-width:920px){ .perfsum{grid-template-columns:repeat(2,1fr)} }
/* 환영 창(v226) — 웹으로 처음 온 사람에게 */
.wcdoc .wclead{margin:0 0 14px; font-size:14px; color:var(--ink-2); line-height:1.7}
.wclist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.wclist li{display:flex; gap:12px; align-items:flex-start}
.wcic{flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent)}
.wcic svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.wclist b{display:block; font-size:14px; color:var(--ink); margin-bottom:1px}
.wclist li > span:last-child{font-size:13px; line-height:1.65; color:var(--ink-2)}
.wclock{display:flex; align-items:center; gap:8px; width:100%; margin-top:18px; padding:10px 12px; cursor:pointer; text-align:left;
  border:1px dashed var(--line-strong); border-radius:10px; background:transparent; font:inherit; font-size:13px; color:var(--ink-2)}
.wclock:hover{border-color:var(--accent); color:var(--accent)}
.wclock svg{flex:0 0 auto; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.wcfoot{flex-wrap:wrap; gap:8px}
/* 글 안에 섞여 들어가는 아이콘 — 오른쪽 아래 단추와 같은 그림이다.
   em 으로 잡아 글자 크기를 따라가고, 옅은 테두리로 '단추' 라는 것을 알린다. */
.empty .ic{display:inline-grid; place-items:center; width:1.7em; height:1.7em;
  vertical-align:-.5em; margin:0 1px; border:1px solid var(--accent-line);
  border-radius:6px; background:var(--surface); color:var(--accent)}
.empty .ic svg{width:1em; height:1em; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ---------- calendar ---------- */
.cal{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
/* 1fr 이 아니라 minmax(0,1fr) 이다. `1fr` 은 `minmax(auto,1fr)` 이라 칸 안의 글이 열을 넓힌다 —
   '추석 연휴' 가 든 목·금·토가 43px → 78px 로 벌어지고 머리글(일~토)과 완전히 어긋났다(실측).
   minmax(0,…) 로 최소값을 0 으로 낮춰야 일곱 칸이 정확히 같은 폭을 지킨다.
   ※ 머리글과 본문을 함께 바꿔야 한다. 한쪽만 고치면 그대로 어긋난 채로 남는다. */
.cal .dows{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:var(--surface-2); border-bottom:1px solid var(--line)}
.cal .dows span{padding:7px 8px; font-size:11px; color:var(--muted); text-align:center}
.cal .dows span:first-child{color:var(--expense)}
.cal .dows span:last-child{color:var(--income)}
/* 줄 높이를 1fr 로 묶어 모든 줄을 같은 높이로 만든다.
   공휴일 이름이 한 줄을 더 먹는 줄만 키가 커져 달력이 들쭉날쭉했다(실측 58 vs 62.6).
   높이가 정해지지 않은 그리드에서 1fr 행은 '가장 큰 줄' 에 모두를 맞춘다. */
.cal .grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-auto-rows:1fr}
/* min-width:0 — 그리드 항목의 기본 최소폭(auto)을 풀어야 안의 글이 칸을 넘지 못한다 */
.cal .cell{min-height:88px; min-width:0;   /* 76 → 88(v195 사용자 요청 — 데스크톱 달력 칸 세로를 조금 더). 폰은 아래 58px */ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:5px 6px; display:flex; flex-direction:column; gap:2px; position:relative}
.cal .cell > *{min-width:0}
/* 빈 칸을 눌러도 그 날로 들어간다 — 지출이 없는 날에 감사일기를 쓰는 길 */
.cal .cell[data-open]{cursor:pointer}
.cal .cell[data-open]:hover{background:var(--surface-2)}
.cal .cell[data-open]:active{background:var(--accent-soft)}
/* ♥ — 그 날 감사일기와 감정 표시. 금액은 아래쪽에 오른쪽 정렬이라 오른쪽 위는 늘 비어 있다.
   * 색은 --c 로 받는다: 감정이 있는 날은 JS 가 그 감정 색을 넣고,
     감사일기만 있는 날은 --c 가 없어 var() 기본값인 강조색이 그대로 쓰인다.
     둘 다 없으면 JS 가 ♥ 자체를 그리지 않는다 — 여기서 숨길 것은 없다. */
.cal .th{position:absolute; top:3px; right:4px; border:0; background:transparent; padding:2px 3px;
  font-size:11.5px; line-height:1; color:var(--c, var(--accent)); cursor:pointer; border-radius:5px}
.cal .th:hover{background:color-mix(in oklab, var(--c, var(--accent)) 16%, transparent)}
.cal .th:focus-visible{outline:2px solid var(--c, var(--accent)); outline-offset:-1px}
.cal .cell:nth-child(7n){border-right:0}
/* 그날의 감정으로 칸을 물들이던 규칙(.hasmood)은 걷어냈다.
   날짜 배경은 흰 바탕 그대로 두고, 감정은 오른쪽 위 ♥ 색으로만 말한다(위 .cal .th).
   한 달의 색 흐름은 달력 아래 '이 달의 감정' 그림이 맡는다.
   ※ 되살릴 생각이라면 이것부터 볼 것 — ::before 층으로 깔면
     `.hasmood > *{position:relative}` 가 ♥(absolute)까지 이겨 ♥ 가 가운데로 늘어난다. */
/* 머니플랜 조각 — 미리 잡아 둔 돈이라 점선. 실제 지출 금액과 한눈에 갈라져야 한다.
   * 금액 줄(.m) 아래, 칸 맨 끝에 붙는다. 이름이 길면 잘라 쓴다(칸이 좁다). */
/* 칸은 위(날짜·공휴일) / 아래(금액·계획) 두 덩어리다.
   금액을 바닥에 붙여야 공휴일 이름이 한 줄을 먹는 칸과도 가로로 줄이 맞는다
   (전에는 20일의 금액과 24일의 금액이 서로 다른 높이에 있었다). */
.cal .cbot{margin-top:auto; display:flex; flex-direction:column; gap:1px; min-width:0}
.cal .pl{align-self:stretch; display:flex; align-items:center; gap:3px;
  border:1px dashed var(--line-strong); background:transparent; border-radius:5px;
  padding:1px 4px; font-size:9.5px; line-height:1.45; color:var(--ink-2);
  min-width:0; overflow:hidden; white-space:nowrap}
/* 말줄임은 flex 항목(.pln)에 걸어야 먹는다 — .pl 자신에 걸면 아무 일도 안 일어난다 */
.cal .pl .pln{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal .pl b{margin-left:auto; font-weight:600; color:var(--muted)}
.cal .pl:hover{border-style:solid; border-color:var(--ink-2); color:var(--ink)}
.cal .cell.out{background:var(--sunken)}
.cal .cell.today .d{background:var(--accent); color:var(--accent-ink); border-radius:5px; padding:0 4px}
/* 날짜 + 공휴일 이름 한 줄. 오른쪽은 ♥ 자리라 비워 둔다(겹치면 이름이 하트 밑으로 들어간다) */
.cal .dtop{display:flex; align-items:baseline; gap:4px; min-width:0; padding-right:15px}
/* 붉은색은 '내가 쉬는 날' 이라는 뜻이다 — 사는 나라(설정 > 국가)의 공휴일에만 붙인다.
   띄워만 두는 남의 나라 공휴일은 이름만 조용히 보여 준다(그날 나는 일한다). */
.hol-on{color:var(--expense); font-weight:600}
.hol-off{color:var(--muted); font-weight:500}
.holsep{color:var(--muted)}
/* 국기 — 이모지가 아니라 그림이다(윈도우에서 이모지 국기는 'KR' 글자로 떨어진다).
   글자 크기를 따라가게 em 으로 잡고, 흰 바탕 깃발이 흰 카드에 묻히지 않게 실선을 두른다. */
.holflag{display:inline-block; width:1.35em; height:.9em; margin-right:.28em;
  vertical-align:-.08em; border:.5px solid var(--line-strong); border-radius:1px}
.cal .holn{font-size:9.5px; font-weight:600; line-height:1.3;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal .cell.out .holn{opacity:.55}
/* 공휴일은 날짜도 빨갛게 — 다만 '오늘' 표시(강조색 배경)가 있으면 그쪽이 이긴다 */
.cal .cell.holiday:not(.today) .d{color:var(--expense); font-weight:600}
.cal .d{font-size:11.5px; color:var(--ink-2); align-self:flex-start}
.cal .cell.out .d{color:var(--muted)}
.cal .m{font-size:10.5px; text-align:right; font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 달력에서만 지출 금액을 검게 둔다.
   칸마다 빨간 숫자가 서른 개 깔리면 달력이 경고판처럼 보인다 — 수입(파랑)만 색으로 갈린다.
   ※ 여기 한 곳만이다. 일일·정산표·통계의 지출은 그대로 .v-out(빨강) 이다. */
.cal .m.v-out{color:var(--ink)}
/* 금액은 누르면 그 날 내역이 열린다 — 눌러도 되는 자리처럼 보이게 */
.cal .m[data-day]{cursor:pointer; border-radius:5px; padding:0 3px; margin:0 -3px}
.cal .m[data-day]:hover{background:var(--surface-2)}
.cal .m[data-day]:focus-visible{outline:2px solid var(--accent); outline-offset:-1px}

/* ---------- charts ---------- */
.grid2{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:920px){ .grid2{grid-template-columns:1fr} }
.legend{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.legend li{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:7px 2px; border-bottom:1px solid var(--line)}
.legend li:last-child{border-bottom:0}
/* 항목을 누르면 그 달 그 항목의 기록이 열린다 (도넛 조각도 같다) */
.legend li[data-sitem]{cursor:pointer; border-radius:8px}
.legend li[data-sitem]:hover{background:var(--sunken)}
.legend li[data-sitem]:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
svg [data-sitem]{cursor:pointer}
/* 표 안의 숫자를 눌러 내역을 여는 자리 (머니플랜의 정산 칸) */
.drill{cursor:pointer; border-bottom:1px dashed var(--line-strong); padding-bottom:1px}
.drill:hover{color:var(--accent); border-bottom-color:var(--accent)}
.drill:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* 항목 상세 — 그 달 그 항목의 기록 목록 */
.dtl{list-style:none; margin:0; padding:0}
.dtl li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:9px 2px; border-bottom:1px solid var(--line)}
.dtl li:last-child{border-bottom:0}
.dtl li[data-eid]{cursor:pointer; border-radius:8px}
.dtl li[data-eid]:hover{background:var(--sunken)}
.dtl li[data-eid]:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.dtl .d{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.dtl .t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px}
/* 내용 옆에 붙는 메모 — 같은 줄, 작고 흐리게 */
.dtl .t .memo{font-style:normal; font-size:11.5px; color:var(--muted); margin-left:6px}
.dtl .t small{display:block; font-size:11px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dtl .a{font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600}
/* 눌러서 여는 줄 — 기록 수정(data-eid) 과 계획 수정(data-pedit) 이 같은 모양을 쓴다 */
.dtl li[data-pedit]{cursor:pointer; border-radius:8px}
.dtl li[data-pedit]:hover{background:var(--sunken)}
.dtl li[data-pedit]:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.dtlsum{display:flex; align-items:baseline; gap:8px; padding:10px 2px 0; font-size:12.5px; color:var(--ink-2)}
.dtlsum.top{border-top:1px solid var(--line-strong); margin-top:6px}
.dtlsum .spacer{flex:1}
.legend .nm{font-size:13px}
.legend .bar{grid-column:1/-1; height:6px; background:var(--sunken); border-radius:0 4px 4px 0; margin-top:-2px}
.legend .bar > i{display:block; height:100%; border-radius:0 4px 4px 0}
.legend .vals{display:flex; align-items:baseline; gap:9px; justify-content:flex-end}
.legend .pct{color:var(--muted); min-width:40px; text-align:right}
.legend .val{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.chartbox{padding:14px 16px 6px}
.chartbox figcaption{font-size:12px; color:var(--muted); margin-bottom:6px}
/* 통계 — 오른쪽 '항목별 순위' 가 왼쪽 도넛보다 길어지지 않게 (넓은 화면에서만).
   * 목록을 절대 배치로 띄워 이 칸의 내용 높이를 0 으로 만든다.
     그래야 grid 행 높이를 왼쪽 차트가 혼자 정하고, 목록은 그 높이 안에서 스크롤한다.
     - max-height 로는 못 잡는다: 차트 높이가 폭에 따라 변하는데(SVG 340:250) 그 값을 CSS 가 모른다.
     - flex + min-height:0 만으로도 안 된다: 목록이 여전히 행 높이를 키워 서로 물린다(순환).
   * align-self:stretch 가 꼭 있어야 한다 — .grid2 는 align-items:start 라
     내용 높이가 0 인 이 칸이 그대로 납작해진다.
   * 경계는 761px — .grid2 가 760px 에서 한 칸으로 접힌다(그 아래에서는 목록이 그냥 흐른다). */
@media (min-width:921px){
  .grid2 > .card.rankbox{position:relative; align-self:stretch; padding:0; overflow:hidden}
  .rankin{position:absolute; inset:0; padding:16px; display:flex; flex-direction:column}
  .rankin > h2{flex:0 0 auto}
  .rankin > .legend{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    padding-right:4px}                     /* 스크롤바가 글자를 덮지 않게 */
}
.tip{position:fixed; z-index:60; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--ink); color:var(--paper); padding:6px 9px; border-radius:6px; font-size:11.5px; white-space:nowrap}
.tip.on{opacity:1}
.serieskey{display:flex; gap:14px; font-size:11.5px; color:var(--ink-2); margin:0 0 4px 2px}
.serieskey span{display:inline-flex; align-items:center; gap:5px}

/* ---------- settings / forms ---------- */
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.field.wide{grid-column:1/-1}
/* 그리드 칸은 기본이 min-width:auto 라 '내용보다 작게' 못 줄어든다.
   그래서 안의 칸이 크면 열이 컨테이너를 넘어 옆 칸 위로 밀린다. */
.field{min-width:0}
/* iOS Safari 의 날짜칸은 width:100% 를 무시하고 제 내용 폭을 고집한다 —
   그대로 두면 좁은 화면에서 옆 칸(항목) 위로 겹쳐 그려진다.
   appearance 를 끄고 축소를 허용해야 칸 안에 들어온다. */
input[type=date]{-webkit-appearance:none; appearance:none; min-width:0; max-width:100%}
input[type=date]::-webkit-date-and-time-value{text-align:left; margin:0}
.field label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px}
.field input,.field select,.field textarea,
.addrow input,.addrow select{width:100%; border:1px solid var(--line); background:var(--surface);
  border-radius:8px; padding:8px 10px; font-size:13px}
.field input:focus,.field select:focus,
.addrow input:focus,.addrow select:focus{border-color:var(--accent); outline:none}
.taglist{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.tag{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface-2);
  border-radius:999px; padding:3px 5px 3px 10px; font-size:12px}
.tag button{border:0; background:transparent; color:var(--muted); font-size:14px; line-height:1; padding:0 4px; border-radius:50%}
.tag button:hover{color:var(--expense)}
/* 무엇을 넣는 칸인지 컨트롤 자체로 알 수 있어 라벨 없이 한 줄로 둔다 */
.addrow{display:flex; gap:8px; align-items:center; margin-top:10px}
.addrow select{flex:0 0 118px}
.addrow input{flex:1 1 0; min-width:0}
.addrow .btn{flex:0 0 auto; padding:8px 14px}
@media (max-width:920px){
  .addrow{gap:6px}
  .addrow select{flex:0 0 102px; padding-left:8px}   /* 16px 글꼴이라 '변동지출' 이 빠듯하다 */
  .addrow .btn{padding:8px 11px; font-size:var(--t-sm)}
}
/* 설정 카드 제목 옆의 작은 부제 (항목 수·환율 기준일 등)
   * 예전에는 이 카드들을 접어 두었다(.foldcard). 설정이 메뉴로 나뉘고부터는
     한 메뉴에 카드가 한둘뿐이라 접을 이유가 없어져 늘 펼친 카드로 바꿨다. */
.cardsub{font-size:var(--t-xs); color:var(--muted); font-weight:400}
/* 어느 수단으로 로그인했나 — 카카오와 Google 은 서로 다른 계정이라 한눈에 보여야 한다 */
.authby{display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin:0 0 8px; font-size:13px; color:var(--ink)}
.authby b{font-weight:600}
.authmail{font-size:11.5px; color:var(--muted); word-break:break-all}
.prvdot{flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  background:var(--line-strong); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.prvdot[data-prv="kakao"]{background:#FEE500}
.prvdot[data-prv="google"]{background:#fff; box-shadow:inset 0 0 0 1px var(--line-strong)}
.prvdot[data-prv="apple"]{background:#111}
/* Apple 로그인 단추는 Apple HIG 색(검정 바탕·흰 글자)을 따른다 — 강조색으로 칠하면 심사에서 지적받는다.
   iOS 앱에서만 그려진다(supabase-config.js 의 native:true). */
.btn[data-sbin="apple"]{background:#000; border-color:#000; color:#fff}

/* ---------- 설정 안의 표들 (고정지출·항목·환율) ----------
   정보 밀도가 높아 본문보다 한 단계 작게. 크기는 여기 세 줄로만 정한다. */
.rectbl th, .itemtbl th, .fxtbl th{font-size:11px; padding:7px 8px}
.rectbl td, .itemtbl td, .fxtbl td{font-size:12px; padding:5px 8px; vertical-align:middle}
.rectbl td small, .itemtbl td small, .fxtbl td small{font-size:11px}
.rectbl .swatch, .itemtbl .swatch, .fxtbl .swatch{width:8px; height:8px}
.rectbl .btn-ghost, .itemtbl .btn-ghost, .fxtbl .btn-ghost{padding:3px 6px; font-size:13px}
.rectbl .cell-in, .itemtbl .cell-in, .fxtbl .cell-in{font-size:12px; padding:3px 6px}
/* 환율표는 좁은 열 4개뿐 — 넓은 화면에서 가로로 늘어지지 않게 폭을 묶는다 */
.fxtbl{width:auto; max-width:460px}
@media (max-width:920px){ .fxtbl{width:100%; max-width:none} }
/* 항목 표 — 구분 세로 병합 + 사용여부 */
.itemtbl td.grp{font-weight:600; background:var(--surface-2); vertical-align:top; padding-top:8px}
.itemtbl td.c, .itemtbl th.c{text-align:center}
.itemtbl input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent); margin:0}
.itemtbl input[type=date]{font-size:12px; padding:3px 6px; width:100%}
/* 안 쓰는 항목 — 목록에서 죽여 둔다 */
.itemtbl tr.itemoff td:not(.grp){opacity:.55}
.itemtbl tr.itemoff td:nth-child(2){text-decoration:line-through}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-wrap:wrap}
.seg button{border:0; background:var(--surface); padding:7px 13px; font-size:13px; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.morelist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.morelist button{width:100%; text-align:left; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r); padding:14px 16px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px}
.morelist button:hover{background:var(--surface-2)}
.morelist small{display:block; color:var(--muted); font-size:11.5px; font-weight:400}
/* 이름 위 · 설명 아래 (설정 목록 .setnav 와 같은 짜임). 앞의 아이콘만 가로로 붙는다.
   * 아이콘 규격은 .setnav button svg 와 같은 값을 쓴다 —
     이모지를 쓰던 때는 색·굵기가 제각각이라 목록이 정리되어 보이지 않았다.
     색은 본문보다 한 단계 연하게(--muted) 둔다. 이름이 주인공이고 아이콘은 길잡이다. */
.morelist .mi{flex:0 0 auto; display:grid; place-items:center; width:20px; height:20px;
  color:var(--muted)}
.morelist .mi svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.6;
  fill:none; stroke-linecap:round; stroke-linejoin:round}
.morelist button:hover .mi{color:var(--accent)}.morelist .mtxt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.morelist .mtxt b{font-weight:500}
/* '늘 쓰는 기능' 과 '가끔 여는 것'(설정·이용방법) 사이의 선 하나 */
.morelist .msep{margin-top:8px; padding-top:16px; border-top:1px solid var(--line)}
/* ---------- 주간정산 · 모바일 ---------- */
/* 위쪽 앱바(월·합계)에 붙지 않게 띄운다.
   * 아래 여백은 0 — 인접 마진끼리 상쇄돼 .wkpick 의 5px 를 덮어쓴다 */
.wkbar{display:flex; align-items:center; gap:var(--sp2); margin:var(--sp4) 0 0}
.wkbar > div{flex:1; text-align:center; line-height:1.25}
.wkbar b{display:block; font-family:"Gowun Batang",serif; font-size:19px; font-weight:700}
.wkbar span{font-size:var(--t-xs); color:var(--muted)}
.wkbar button{width:40px; height:40px; border:1px solid var(--line); background:var(--surface);
  border-radius:10px; color:var(--ink-2); font-size:17px; line-height:1}
.wkbar button:disabled{opacity:.3}
/* 주 선택 칩 — 주 이동 줄 바로 아래에 붙인다 (한 덩어리로 읽히게) */
.wkpick{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px;
  margin-top:5px; margin-bottom:var(--sp3)}
.wkpick button{flex:1 0 auto; min-width:54px; border:1px solid var(--line); background:var(--surface);
  color:var(--muted); border-radius:999px; padding:8px 12px; font-size:13px; font-weight:500}
.wkpick button[aria-selected="true"]{background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink); font-weight:600}
.wkkpi{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:var(--sp3)}
.wkkpi > div{background:var(--surface); padding:11px var(--sp3)}
.wkkpi dt{font-size:var(--t-xs); color:var(--muted); margin:0 0 2px}
.wkkpi dd{margin:0; font-size:16px; font-weight:600; letter-spacing:-.02em}
.wkgroup{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:var(--sp2)}
.wkghead{display:flex; justify-content:space-between; align-items:center; gap:var(--sp2);
  padding:9px var(--sp4); background:var(--surface-2); border-bottom:1px solid var(--line);
  font-size:var(--t-sm); font-weight:600; color:var(--ink-2)}
.wkrow{display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp2); align-items:center;
  padding:11px var(--sp4); border-bottom:1px solid var(--line)}
.wkrow:last-child{border-bottom:0}
.wkrow.nosw{grid-template-columns:1fr auto}   /* 색 점 없는 줄(폰 월말정산) — 첫 칸을 뺀다 */
.wkname{font-size:var(--t-md)}
.wkval{text-align:right; white-space:nowrap}
.wkval b{font-size:15px; letter-spacing:-.02em}
.wkval small{display:block; font-size:var(--t-xs); color:var(--muted)}
.wkmore{width:100%; margin-top:var(--sp2); border:1px dashed var(--line-strong); border-radius:10px; padding:11px}
.wkcmp{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.wkcmp button{width:100%; display:grid; grid-template-columns:38px 1fr auto; gap:var(--sp2);
  align-items:center; border:0; background:transparent; padding:7px 4px; border-radius:8px; text-align:left}
.wkcmp li.on button{background:var(--accent-soft)}
.wkcmp .wkc-n{font-size:var(--t-sm); color:var(--muted)}
.wkcmp li.on .wkc-n{color:var(--accent); font-weight:600}
.wkcmp .wkc-bar{height:8px; background:var(--sunken); border-radius:0 4px 4px 0}
.wkcmp .wkc-bar > i{display:block; height:100%; background:var(--expense); border-radius:0 4px 4px 0}
.wkcmp .wkc-v{font-size:var(--t-sm); font-weight:600}

/* ---------- 월말정산 · 모바일 ---------- */
.mghead{width:100%; border:0; display:grid; grid-template-columns:1fr auto auto 16px;
  gap:var(--sp2); align-items:center; text-align:left; cursor:pointer}
.mghead b{font-size:var(--t-md)}
.mghead em{font-style:normal; font-size:var(--t-xs); min-width:56px; text-align:right}
.mghead .chev{color:var(--muted); font-size:10px; text-align:right}
.mtot{display:grid; grid-template-columns:1fr auto; gap:2px var(--sp3); align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--line)}
.mtot:last-child{border-bottom:0}
.mtot > span{font-size:var(--t-sm); color:var(--ink-2)}
.mtot > span small{color:var(--muted); font-size:var(--t-xs)}
.mtot b{font-size:16px; letter-spacing:-.02em}
.mtot em{grid-column:2; font-style:normal; font-size:var(--t-xs); color:var(--muted); text-align:right}

/* ---------- 로드맵 · 모바일 ---------- */
/* 표 안의 달성률·추이 막대 */
.rbar{height:9px; background:var(--sunken); border-radius:999px; overflow:hidden; min-width:60px}
.rbar > i{display:block; height:100%; border-radius:999px}
.stl td > input.cell-in{display:inline-block; width:auto; max-width:100%}
/* 월말정산의 예산 입력칸 — 여기가 예산을 넣는 유일한 곳이다.
   * 평소에는 테두리를 숨겨 다른 숫자 칸과 같아 보이게 하고, 손이 닿을 때만 드러낸다
     (테두리는 transparent 로 '자리만' 남긴다 — 없애면 hover/focus 때 글자가 밀린다). */
.stl td.bud{padding:2px 4px}
.stl td.bud > input.budin{display:block; width:100%; min-width:0; text-align:right;
  font-variant-numeric:tabular-nums; border:1px solid transparent; background:transparent;
  padding:4px 6px; border-radius:6px; font-size:13px}
.stl td.bud > input.budin:hover{border-color:var(--line)}
.stl td.bud > input.budin:focus{border-color:var(--accent); background:var(--surface); outline:0}
.stl td.bud > input.budin::placeholder{color:var(--muted)}
.mbud{display:flex; align-items:center; gap:4px; margin-top:3px; max-width:170px}
.mbud > span{font-size:11px; color:var(--muted); white-space:nowrap}
.mbud input{flex:1 1 0; min-width:0; text-align:right; font-variant-numeric:tabular-nums;
  border:1px solid transparent; background:transparent; border-radius:6px;
  padding:2px 4px; font-size:12.5px}
.mbud input:focus{border-color:var(--accent); background:var(--surface); outline:0}
/* 주 예산 칸(v192) — 자동 배분 값은 흐리게, 손으로 넣은 값은 진하게. 월 합계와 어긋나면 빨간 한 줄 */
input.wbin{border-color:var(--line)}
input.wbin.auto{color:var(--muted); font-style:normal}
input.wbin:focus{color:var(--ink)}
.wkval .wboff{display:block; margin-top:2px}
/* 폰 주 예산 칸 — 작게(v193 사용자 요청). 입력 글자는 16px 밑으로 내리면 아이폰이 확대하므로(전역 16px 규칙)
   글자는 그대로 두고 칸째 0.75배(=12px 로 보임)로 줄인다. 줄인 만큼 오른쪽·위아래 자리는 음수 margin 으로 돌려준다(자산 표와 같은 방법). */
@media (max-width:920px){
  .mbud input.wbin{flex:0 0 128px; width:128px; transform:scale(.75); transform-origin:left center;
    margin:-5px -32px -5px 0; padding:3px 6px}
}
td .wboff{font-weight:700; cursor:help}
/* 새 버전 알림 — 입력 중에 화면을 갈아엎지 않고 물어본다 */
.updbar{position:fixed; z-index:130; left:50%; transform:translateX(-50%);
  bottom:calc(var(--sp5) + var(--safe)); display:flex; align-items:center; gap:12px;
  max-width:calc(100vw - 24px); padding:10px 10px 10px var(--sp4);
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; box-shadow:0 8px 28px rgba(0,0,0,.18); font-size:13px}
.updbar span{white-space:nowrap}
.updbar .btn{padding:7px 14px; font-size:12.5px; border-radius:999px}
@media (max-width:920px){ .updbar{bottom:calc(66px + var(--safe))} }
/* Android 설치형(TWA) → 새 앱 안내 띠(v251, 03-cloud showTwaNotice) — 아래 고정, '새 버전' 띠(.updbar)와 같은 자리 */
.twabar{position:fixed; z-index:130; left:12px; right:12px; bottom:calc(var(--sp5) + var(--safe,0px));
  padding:14px 16px; background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 8px 28px rgba(0,0,0,.18); font-size:13px}
.twabar b{display:block; font-size:14px; margin-bottom:4px}
.twabar p{margin:0 0 10px; color:var(--muted); line-height:1.45}
.twabar .row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.twabar .btn{padding:8px 14px; font-size:12.5px; border-radius:999px}
.twabar .btn-ghost{margin-left:auto}
@media (max-width:920px){ .twabar{bottom:calc(66px + var(--safe,0px))} }
/* Android 저장 고르기 창(v253, 08-export pickSaveAndroid) — 큰 단추 둘, 제목 + 작은 설명 */
.savepick{display:flex; flex-direction:column; gap:10px; padding:4px 0}
.savepick .btn{display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; padding:14px 16px; text-align:left; border-radius:14px}
.savepick .btn b{font-size:15px}
.savepick .btn small{font-size:12.5px; color:var(--muted); font-weight:400}

/* 직전 해에서 이어받은 값 — 흐린 회색으로 구분.
   숫자는 이탤릭을 쓰지 않는다 (등폭 숫자가 기울면 끝자리가 헷갈린다) */
/* .stl 로 한정하지 않는다 — 모바일 연도 카드(.lrmr)는 표가 아니다 */
input.cell-in.inherit{color:var(--muted); font-weight:400}
.inhx{color:var(--muted)}

/* ---------- 장기로드맵 · 가로 10년 블록 (엑셀 시트와 같은 양식) ---------- */
.lrsect{margin-bottom:var(--sp5)}
.lrhd{font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--accent);
  padding:0 2px var(--sp2); display:flex; gap:6px; align-items:baseline}
.lrhd span{font-weight:500; color:var(--muted); letter-spacing:0}
.lrwrap{overflow-x:auto}
.lrgrid{table-layout:fixed; min-width:960px; font-size:12px}
.lrgrid col.lrlab{width:104px}
.lrgrid col:not(.lrlab){width:calc((100% - 104px)/10)}
.lrgrid th[scope=row]{position:sticky; left:0; z-index:1; text-align:left; white-space:nowrap;
  background:var(--surface-2); font-weight:600; font-size:11px; color:var(--muted);
  padding:5px var(--sp3); border-right:2px solid var(--line-strong)}
.lrgrid td{text-align:right; padding:2px 4px;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden}
/* 이어받은 값은 이탤릭이라 마지막 글자가 살짝 넘친다 → 오른쪽 여백을 더 준다 */
.lrgrid .cell-in{font-size:12px; padding:3px 6px 3px 2px}
/* 연도·나이 머리행 — 두 줄이 한 덩어리, 아래에 굵은 경계 */
.lrgrid tr.hd td{text-align:center; font-family:inherit; font-weight:600; color:var(--ink);
  background:var(--surface-2)}
.lrgrid tr.hd:nth-child(2) td, .lrgrid tr.hd:nth-child(2) th[scope=row]{border-bottom:2px solid var(--line-strong)}
/* 퍼센트 입력 — % 기호가 잘리지 않게 (가로 블록·모바일 표 공용) */
.pctc{display:flex; align-items:center; justify-content:flex-end; gap:1px}
.pctc input{flex:1 1 0; min-width:0; width:auto; text-align:right}
.pctc i{font-style:normal; font-size:10px; color:var(--muted); flex:0 0 auto}
/* 강조행 — 투자금이 이 표의 줄기다 (계+수익금 → 다음 해 투자가능자산) */
.lrgrid tr.em td{color:var(--income); font-weight:600; font-size:12.5px;
  background:color-mix(in srgb,var(--income) 10%,transparent)}
.lrgrid tr.em th[scope=row]{color:var(--income); font-weight:600;
  background:color-mix(in srgb,var(--income) 16%,var(--surface-2))}
/* 무리한 가정 경고 — 그 칸만. 투자금 강조와 같은 방식이되 색만 반대다 */
.lrgrid td.warn{background:color-mix(in srgb,var(--expense) 12%,transparent)}
.lrgrid td.warn .cell-in{color:var(--expense); font-weight:600}
.lrgrid td.warn .pctc i{color:var(--expense)}
.lrmr.warn > span{color:var(--expense)}
.lrmr.warn .cell-in{color:var(--expense); font-weight:600}
.lrmr.warn .pctc i{color:var(--expense)}
.lrgrid tr.tot td{font-weight:600; background:color-mix(in srgb,var(--accent) 8%,transparent)}
.lrgrid tr.tot th[scope=row]{color:var(--accent)}
/* 라이프·머니플랜은 글자라 왼쪽 정렬 */
.lrgrid tr:nth-last-child(-n+2) td{text-align:left; font-family:inherit}

/* ---------- 장기로드맵 · 모바일 연도 카드 ---------- */
.lrm{display:flex; flex-direction:column; gap:var(--sp5)}
.lrmhd{position:sticky; top:0; z-index:2; background:var(--paper); padding:var(--sp2) 2px;
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--accent)}
.lrmhd span{font-weight:500; color:var(--muted); letter-spacing:0}
.lrmsec{display:flex; flex-direction:column; gap:8px}
.lrmc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.lrmc.open{border-color:var(--accent)}
.lrmh{display:flex; align-items:center; gap:10px; width:100%; padding:12px var(--sp4) 8px;
  background:transparent; border:0; text-align:left; color:inherit; font:inherit; cursor:pointer}
.lrmy{font-size:16px; font-weight:600; display:flex; align-items:baseline; gap:6px}
.lrmy i{font-style:normal; font-size:11.5px; font-weight:500; color:var(--muted)}
.lrmk{margin-left:auto; width:16px; height:16px; flex:0 0 auto; color:var(--muted); transition:transform .18s}
.lrmc.open .lrmk{transform:rotate(180deg); color:var(--accent)}
.lrmsum{display:flex; gap:10px; padding:7px var(--sp4) 12px; font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums}
/* 연도 · 나이 줄과 아래 금액 줄이 떨어져 보였다(v264 사용자 요청) — 머리 단추 아래 · 요약 위 여백을 줄인다.
   폰 단추 최소 높이(손가락 규칙)도 이 머리에는 걸지 않는다 */
.lrmh{padding-bottom:2px; min-height:0}
.lrmsum{padding-top:0}
/* 투자금이 이 화면에서 제일 눈에 띄어야 한다 */
.lrmsum em{margin-left:auto; font-style:normal; font-weight:600; font-size:13px; color:var(--income)}
.lrmb{border-top:1px solid var(--line); padding:2px var(--sp4) var(--sp3)}
.lrmr{display:flex; align-items:center; gap:10px; min-height:38px; border-bottom:1px solid var(--line)}
.lrmr:last-child{border-bottom:0}
.lrmr > span{flex:0 0 96px; font-size:12px; color:var(--muted)}
.lrmr > b{flex:1 1 0; min-width:0; font-weight:600; text-align:right;
  font-variant-numeric:tabular-nums}
.lrmr .cell-in{width:100%; text-align:right}
.lrmr .cell-in:not(.amt-in){text-align:left; font-family:inherit}  /* 라이프·머니플랜은 글자 */
.lrmr .pctc{justify-content:flex-end}
/* 펼친 연도 카드의 구간(v263 사용자 요청) — 투자가능자산~수익금 · 비유동자산~부동산 · 자본금 · 라이프플랜~머니플랜.
   구간마다 옅은 판 하나, 판 사이 간격. 자본금 판은 강조색 판에 굵게 */
.lrmb{padding-top:var(--sp2)}
.lrmg{background:var(--surface-2); border-radius:10px; padding:0 12px}
.lrmg + .lrmg{margin-top:8px}
.lrmg.g3{background:var(--accent-soft)}
.lrmg.g3 .lrmr > span{color:var(--accent); font-weight:600}
.lrmg.g3 .lrmr > b{color:var(--accent); font-weight:700}
/* 폰 머니플랜 월별 묶음(v264 06-roadmap renderPlan mobList) */
.mpm{display:flex; flex-direction:column; gap:12px; padding:0 var(--sp4)}
.mpmg{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:2px 12px}
.mpmh{display:flex; align-items:center; gap:8px; min-height:40px; border-bottom:1px solid var(--line)}
.mpmh b{font-size:14px}
.mpmh .spacer{flex:1 1 auto}
.mpmap{padding:4px 10px!important; font-size:12px!important; border:1px solid var(--accent-line)!important; color:var(--accent)}
.mpmr{padding:9px 0}
.mpmr + .mpmr{border-top:1px solid var(--line)}
.mpm1{display:flex; align-items:center; gap:7px; min-width:0}
.mpm1 .mpmit{flex:1 1 auto; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mpm1 .drill{flex:0 0 auto; font-size:14px; font-weight:600}
.mpm1 .drill small{font-weight:400; color:var(--muted); font-size:11.5px}
.mpm2{margin-top:3px; padding-left:0; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:2px 14px}
.mpm2 .num{color:var(--ink-2)}
.mpm2 .v-good{color:var(--good, var(--income))} .mpm2 .v-bad{color:var(--expense)}
.mpmnone{padding:18px var(--sp4); text-align:center; color:var(--muted); font-size:13px}
.mpadd{padding:7px 12px!important; font-size:13px!important}
/* 설정 카드 — 기초 부동산 평가액 이름 옆 On/Off(v263) */
/* 단추가 이름 줄 높이를 늘리면 옆 칸(기초 투자가능자산)과 입력칸 높이가 어긋난다 — 위아래 음수 여백으로 줄 높이를 지킨다 */
.lrrhd{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.lrron{min-width:48px; padding:2px 10px!important; margin:-6px 0; font-size:12px!important; line-height:1.4;
  justify-content:center; flex-direction:row!important; gap:0}
#lrRealty:disabled{background:var(--sunken); color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .lrmk{transition:none} }

.rmrow{border-bottom:1px solid var(--line)}
.rmrow:last-child{border-bottom:0}
.rmrow.on{background:var(--accent-soft)}
.rmrow > button{width:100%; display:grid; grid-template-columns:40px 1fr auto 44px;
  gap:var(--sp2); align-items:center; border:0; background:transparent; padding:12px var(--sp4); text-align:left}
.rm-m{font-size:var(--t-sm); color:var(--ink-2); font-weight:600}
.rm-bar{height:8px; background:var(--sunken); border-radius:0 4px 4px 0}
.rm-bar > i{display:block; height:100%; border-radius:0 4px 4px 0}
.rm-v{font-size:var(--t-sm); font-weight:600}
.rm-p{font-size:var(--t-xs); text-align:right}
.rmdet{padding:0 var(--sp4) 12px; display:flex; flex-direction:column; gap:5px}
.rmdet > div{display:grid; grid-template-columns:40px 1fr auto 1fr auto; gap:6px; align-items:baseline; font-size:var(--t-xs)}
.rmdet > div > span{color:var(--muted)}
.rmdet b{font-size:var(--t-sm)}
.rmdet em{font-style:normal; color:var(--muted)}
.rmdet .tot{border-top:1px dashed var(--line-strong); padding-top:5px; margin-top:2px}
.rdrow{padding:12px var(--sp4); border-bottom:1px solid var(--line)}
.rdrow:last-child{border-bottom:0}
.rd-h{display:grid; grid-template-columns:40px 1fr auto; gap:var(--sp2); align-items:baseline}
.rd-h span{font-size:var(--t-sm); font-weight:600; color:var(--ink-2)}
.rd-h b{text-align:right; font-size:var(--t-sm)}
.rd-h em{font-style:normal; font-size:var(--t-xs); color:var(--muted)}
.rd-in{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp2); margin-top:8px}
.rd-in label{display:block; font-size:var(--t-xs); color:var(--muted)}
.rd-in input{width:100%; border:1px solid var(--line); background:var(--surface);
  border-radius:8px; padding:8px 10px; margin-top:3px}
.rd-f{display:flex; justify-content:space-between; gap:var(--sp2); margin-top:8px;
  font-size:var(--t-xs); color:var(--muted)}
.rd-f b{color:var(--ink-2); font-size:var(--t-sm)}

.swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:var(--sp2)}
.swbtn{display:flex; align-items:center; gap:var(--sp2); border:1.5px solid var(--line);
  background:var(--surface); border-radius:10px; padding:10px var(--sp3); font-size:13px; text-align:left}
.swbtn i{width:22px; height:22px; border-radius:7px; flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swbtn[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); font-weight:600}
.swbtn:hover{border-color:var(--line-strong)}

/* ---------- modal ---------- */
.scrim{position:fixed; inset:0; background:rgba(20,15,22,.5); display:none; place-items:center; z-index:80; padding:16px}
.scrim.on{display:grid}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5); width:min(480px,100%); max-height:90vh; overflow:auto}
/* 입력 칸이 여러 개라 두 열로 벌려야 하는 창 (머니플랜 계획 추가 등) */
.modal.wide{width:min(760px,100%)}
/* 글만 든 창(이용방법)은 읽기 좋은 글 폭에 창을 맞춘다 — 760 을 쓰면 오른쪽이 통째로 빈다 */
.modal.narrowdoc{width:min(664px,100%)}
/* 이용방법 창은 길다 — 굴려도 머리줄('Planowa 이용방법')이 위에 남게(v195 사용자 요청). 창(.modal) 자체가 굴러가는 상자라 top:0 */
.modal.narrowdoc > header{position:sticky; top:0; z-index:2; background:var(--surface)}
/* 정산 금액 — 눌러서 내역을 여는 자리처럼 보이게 (표 안이라 최소한만) */
.alink{border:0; background:transparent; padding:1px 3px; margin:0 -3px; border-radius:5px;
  font:inherit; color:inherit; cursor:pointer; font-variant-numeric:tabular-nums;
  text-decoration:underline; text-decoration-style:dotted; text-decoration-color:var(--line-strong);
  text-underline-offset:3px}
.alink:hover{background:var(--accent-soft); text-decoration-color:var(--accent)}
.alink:focus-visible{outline:2px solid var(--accent); outline-offset:-1px}

.modal header{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
/* 머리줄을 끌어서 창을 옮긴다(데스크톱). 표를 보면서 창을 비켜 두고 싶을 때가 있다 */
.modal header.grab{cursor:grab; user-select:none; touch-action:none}
.modal.dragging header.grab{cursor:grabbing}
.modal.dragging{transition:none}
.modal header h2{font-size:15px; font-weight:600; min-width:0}
.pqn{font-size:var(--t-xs); color:var(--muted); font-variant-numeric:tabular-nums;
  background:var(--sunken); border-radius:999px; padding:2px 9px}
.mclose{margin-left:auto; flex:0 0 auto; width:32px; height:32px; border:0; background:transparent;
  color:var(--muted); border-radius:8px; font-size:14px; line-height:1; display:grid; place-items:center}
.mclose:hover{background:var(--surface-2); color:var(--ink)}
/* 항목 수정 툴바 — 저장·삭제·복사·즐겨찾기 4개를 한 줄에 (모바일 세로 스택 규칙보다 특이도 높게) */
.modal footer.fourup{flex-direction:row; align-items:stretch; gap:6px}
.modal footer.fourup .mbtn{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:10px 4px; border:1px solid var(--line-strong); background:var(--surface);
  border-radius:10px; font-size:11.5px; font-weight:500; color:var(--ink-2); letter-spacing:-.03em;
}
.modal footer.fourup .mbtn svg{width:19px; height:19px; stroke:currentColor; stroke-width:1.7;
  fill:none; stroke-linecap:round; stroke-linejoin:round}
.modal footer.fourup .mbtn:hover{background:var(--surface-2)}
.modal footer.fourup .mbtn:active{transform:scale(.96)}
.modal footer.fourup .mbtn.primary{background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink); font-weight:600}
.modal footer.fourup .mbtn.danger{color:var(--expense)}
.modal footer.fourup .mbtn.danger.armed{background:var(--expense); border-color:var(--expense);
  color:#fff; font-weight:600}
.modal footer.fourup .mbtn[aria-pressed="true"]{color:var(--accent); border-color:var(--accent-line);
  background:var(--accent-soft); font-weight:600}
.modal footer.fourup .mbtn[aria-pressed="true"] svg{fill:currentColor; stroke-width:1.2}
/* 헤더 (직접 입력 모달) */
.mstar{flex:0 0 auto; margin-left:auto; width:32px; height:32px; border:0; background:transparent;
  color:var(--muted); border-radius:8px; display:grid; place-items:center}
.mstar svg{width:19px; height:19px; stroke:currentColor; stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.mstar:hover{background:var(--surface-2); color:var(--accent)}
.mstar + .mclose{margin-left:0}
/* 즐겨찾기 목록 */
.favlist{list-style:none; margin:0; padding:0}
.favrow{display:grid; grid-template-columns:1fr auto 36px 36px; gap:var(--sp2); align-items:center;
  padding:10px var(--sp4); border-bottom:1px solid var(--line)}
.favrow:last-child{border-bottom:0}
.favpick{border:0; background:transparent; text-align:left; min-width:0; padding:2px 0}
.favpick .fv-t{display:block; font-size:var(--t-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.favpick .fv-s{display:block; font-size:var(--t-xs); color:var(--muted)}
.favrow:hover{background:var(--surface-2)}
.fv-a{font-size:var(--t-sm); font-weight:600; white-space:nowrap}
.favico{width:34px; height:34px; border:1px solid var(--line); background:var(--surface);
  border-radius:9px; color:var(--muted); display:grid; place-items:center}
.favico svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.favico:hover{background:var(--surface-2); color:var(--ink)}
.favico.del:hover{color:var(--expense); border-color:var(--expense)}
.favempty{padding:32px var(--sp4); text-align:center; color:var(--muted); font-size:var(--t-sm); line-height:1.8}
.favempty b{display:block; color:var(--ink); font-size:var(--t-md); margin-bottom:4px}
.modal .body{padding:16px; display:flex; flex-direction:column; gap:12px}
/* 넓은 화면에서는 확인 버튼을 오른쪽 끝에 둔다 (모바일은 아래 세로 스택으로 덮어씀) */
.modal footer{display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line);
  background:var(--surface-2); justify-content:flex-end}
.rawbox{background:var(--sunken); border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-2); white-space:pre-wrap; word-break:break-all; max-height:120px; overflow:auto}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:999px; font-size:13px; z-index:90;
  opacity:0; transition:.18s; pointer-events:none}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.scrim.on ~ .toast{bottom:auto; top:14px}

/* ---------- 금액 계산기 · 내용 자동완성 ----------
   창 본문(.modal .body)이 구르면 칸 옆에 붙인 상자는 잘린다 → 셋 다 body 에 두고 position:fixed.
   자리는 JS(acPlace/ctipShow)가 잡는다. 겹침 차례: 잠금 120 > 목록·쪽지 110 > 키패드 100 > 창 80. */
/* 내용 자동완성 — 모습도 자리도 머리줄 검색의 관련 낱말 목록(.sugg) 그대로다.
   .sugg 가 이미 'position:absolute; top:calc(100% + 6px); left:0; right:0' 이라
   칸이 든 상자에 relative 만 주면 칸 바로 아래에 붙는다. 좌표 계산은 하지 않는다 —
   fixed 로 띄우고 재던 때 iOS 에서 칸 위에 뜨고 스크롤하면 벌어졌다(사용자 신고).
   .achost 는 목록이 붙은 그 상자에만 JS 가 달아 준다(.field 전체에 주면 다른 절대배치가 딸려 온다). */
/* 설정 > 항목 — 차례는 번호 칸으로 정한다(적은 자리로 옮긴다) */
.posin{width:42px; padding:4px 2px; text-align:center; font-size:12.5px;
  border:1px solid var(--line); border-radius:7px; background:var(--surface);
  font-variant-numeric:tabular-nums; color:var(--ink-2)}
.posin:focus{border-color:var(--accent); outline:none; color:var(--ink)}
/* 위아래 화살표(스피너)는 뺀다 — 42px 칸에서 숫자를 가리고, 한 칸씩 누르라는 뜻으로 읽힌다 */
.posin::-webkit-outer-spin-button, .posin::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.posin{-moz-appearance:textfield; appearance:textfield}
.itemtbl button:disabled, .taglist button:disabled, .itemlist button:disabled{opacity:.28; cursor:not-allowed}
.tag.tagused{border-style:dashed}
/* 구분 이름 — 부르는 이름만 바꾼다. 평소엔 글자처럼 보이고 누르면 칸이 된다 */
.grpin{width:100%; max-width:110px; border:1px solid transparent; background:transparent;
  border-radius:7px; padding:3px 6px; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink-2)}
.grpin:hover{border-color:var(--line)}
.grpin:focus{border-color:var(--accent); background:var(--surface); outline:none; color:var(--ink)}
.itemlist .ilgrp .grpin{font-size:12px}
/* 폰은 표가 아니라 목록이다 — 여섯 열을 폰 폭에 넣으면 가로로 밀려 단추가 화면 밖으로 나간다 */
.itemlist{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.itemlist .ilgrp{background:var(--surface-2); padding:4px calc(var(--sp4) - 6px); font-size:12px;
  font-weight:600; color:var(--ink-2); border-bottom:1px solid var(--line)}
.itemlist .ilgrp:not(:first-child){border-top:1px solid var(--line)}
.itemlist .ilrow{display:flex; align-items:center; gap:10px; padding:8px var(--sp4);
  border-bottom:1px solid var(--line)}
.itemlist .ilrow:last-child{border-bottom:0}
.itemlist .ilname{flex:1 1 auto; min-width:0; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.itemlist .iloff{display:block; font-size:14px; color:var(--muted); font-style:normal}   /* 11 → 14px(v273 사용자 요청) */
.itemlist input[type=checkbox]{flex:0 0 auto; width:19px; height:19px; accent-color:var(--accent); margin:0}
.itemlist .btn-ghost{flex:0 0 auto; width:30px; height:30px; padding:0}
/* 꺼 둔 항목 — 취소선 · 흐림은 이름(.ilnm)에만. 아래 '…부터 사용 안 함' 줄은 그냥 보인다(v273 사용자 요청 —
   부모(.ilname)에 취소선을 걸면 자식이 text-decoration:none 이어도 선이 그대로 그어졌다) */
.itemlist .ilrow.itemoff .ilnm{opacity:.55; text-decoration:line-through}
/* 날짜 줄 — 글 위에 투명한 date 칸을 덮어 누르면 날짜 고르기가 뜬다. 칸 글자는 16px(아이폰 확대 방지) */
.itemlist .iloffline{position:relative; display:block; margin-top:1px}
.itemlist .iloffline .iloff{text-decoration:underline dotted; text-underline-offset:3px}
.itemlist .ildate{position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0; margin:0;
  font-size:16px!important; cursor:pointer}

.achost{position:relative}
.acpop{z-index:70; max-height:min(280px,44vh)}
/* 금액 계산기 키패드 — 폰에서 OS 숫자판을 대신한다 */
.calcpad{position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--surface); border-top:1px solid var(--line-strong);
  box-shadow:0 -14px 34px -18px rgba(0,0,0,.45);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:6px}
.calcpad .pkview{display:flex; align-items:baseline; gap:8px; min-height:19px; padding:0 4px;
  font-size:12.5px; color:var(--muted)}
.calcpad .pkexpr{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.calcpad .pkval{flex:0 0 auto; color:var(--ink); font-weight:600; font-size:14px}
.calcpad .pkgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.calcpad .pkbar{display:grid; grid-template-columns:1fr 1fr 1fr 1.4fr; gap:6px}
.calcpad .pk{border:1px solid var(--line); background:var(--surface-2); border-radius:10px;
  padding:13px 0; font-size:17px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; cursor:pointer}
.calcpad .pk:active{transform:scale(.97); background:var(--sunken)}
.calcpad .pk.op{background:var(--accent-soft); color:var(--accent); font-size:18px}
.calcpad .pk.fn{padding:11px 0; font-size:14px; font-weight:500; color:var(--ink-2)}
.calcpad .pk.go{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-size:14px}
/* 키패드가 뜨면 가운데 떠 있는 창을 그만큼 위로 올린다 — 안 하면 창을 통째로 덮는다 */
body.padon .scrim{align-items:end; padding-bottom:calc(var(--padh,0px) + 10px)}
body.padon .modal{max-height:calc(100dvh - var(--padh,0px) - 24px)}
/* 전체화면 창(입력·수정·복붙)은 여백을 두지 않고 키패드 높이만큼만 짧아진다.
   위의 -24px 을 그대로 두면 자판 위에 회색 띠가 한 줄 생긴다. */
body.padon .modal.fullm{height:calc(100dvh - var(--padh,0px)); max-height:none}
/* 자판이 뜨면 하단바와 ＋ 단추를 감춘다.
   자판이 z-index 로 덮고는 있지만 아래에 살아 있어, iOS 는 safe-area·주소창 사정에 따라 비친다.
   무엇보다 자판 위에 또 다른 단추줄이 있으면 어디를 눌러야 할지 헷갈린다(사용자 요청). */
body.padon .bottomnav, body.padon .fab, body.padon .fab-2nd{display:none!important}
/* 창 아래의 단추줄(저장·삭제·복사·즐겨찾기)도 자판이 떠 있는 동안에는 감춘다.
   자판의 '완료' 와 저장이 똑같이 강조된 채로 위아래에 붙어 있어 어느 쪽을 눌러야 할지
   헷갈렸다(사용자 신고). 완료 → 자판이 닫히고 → 저장이 돌아온다.
   감춘 만큼 창이 길어져 입력칸이 더 보인다. */
body.padon .modal footer{display:none}
/* 검토 화면의 저장 바는 감추지 않는다 — 감추면 저장을 못 한다. 자판 위로 올린다.
   (여긴 창이 아니라 본문이라 자판이 그대로 덮어 버리던 자리다) */
body.padon .rvwbar{bottom:calc(var(--padh,0px) + 8px)}
/* 데스크톱에서 식을 치는 동안 뜨는 작은 결과 (= 1,500 · Enter 로 계산) */
.calctip{position:fixed; z-index:110; background:var(--ink); color:var(--paper);
  padding:5px 10px; border-radius:8px; font-size:12px; white-space:nowrap;
  pointer-events:none; box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}

/* ---------- 설정 창 ----------
   * 설정은 탭이 아니라 큰 창이다. 보통 모달(#scrim, z-index 80)보다 한 단계 아래(70)에 둔다 —
     설정 안에서 부르는 확인창(전체 삭제·백업 불러오기·계정 삭제)이 이 위에 겹쳐 떠야 하기 때문이다.
   데스크톱: 왼쪽 메뉴 + 오른쪽 내용.   모바일: 화면을 통째로 덮고 목록 ↔ 상세로 창을 전환한다. */
.setscrim{position:fixed; inset:0; background:rgba(20,15,22,.5); display:none; place-items:center;
  z-index:70; padding:16px}
.setscrim.on{display:grid}
body.setopen{overflow:hidden}
.setmodal{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
  width:min(1000px,100%); height:min(680px,86vh); display:flex; flex-direction:column; overflow:hidden}
.sethead{flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--line)}
.sethead h2{flex:1 1 auto; min-width:0; font-size:15px; font-weight:600}
.sethead .sh-l{display:none}                 /* 뒤로가기는 모바일 상세 화면에서만 쓴다 */
.sethead .sh-r{flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:2px}
/* 전체화면 단추 — ✕ 왼쪽. 그림은 선 그림(svg)이라 ✕ 와 같은 회색이 먹는다 */
.setmax svg{width:15px; height:15px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round}
/* 창 옮기기·크기 바꾸기 (데스크톱) — 머리줄을 끌면 옮기고(makeModalDraggable), 오른쪽 아래 모서리를 끌면 크기.
   * resize 는 overflow 가 visible 이 아니어야 먹는다(.setmodal 은 hidden).
   * 너무 작게 줄이면 메뉴·내용이 뭉개지니 하한을 둔다. 상한은 화면. */
/* 창은 왼쪽 위에 붙이고 연 순간 transform 으로 가운데에 놓는다(setCenter). 가운데 정렬(place-items:center)로 두면
   크기를 바꿀 때 양쪽으로 늘어나 모서리가 마우스를 절반 속도로 따라온다 */
.setscrim{place-items:start}
.setmodal{resize:both; min-width:560px; min-height:360px; max-width:100vw; max-height:100vh}
.sethead.grab{cursor:move}
.setmodal.dragging{user-select:none}
/* 전체화면 — 옮긴 자리·바꾼 크기(인라인 style)는 두고 덮어쓴다. 되돌리면 그 자리·크기로 돌아간다 */
.setscrim.maxed{padding:0}
.setmodal.max{width:100vw !important; height:100vh !important; transform:none !important;
  border:0; border-radius:0; resize:none}
.setmodal.max .sethead.grab{cursor:default}
/* 뒤로 — 머리줄 오른쪽의 ✕(.mclose)과 한 쌍이다. 크기·색·hover 를 같은 값으로 둔다.
   * 원래의 홑화살괄호 '‹' 는 본문 글꼴의 문장부호라 가늘고 작아 단추로 안 읽혔다(사용자 지적).
   * 색 이모지(⬅️)는 쓰지 않는다 — 글자가 아니라 그림이라 CSS 색이 안 먹고 혼자 파랗다.
     회색으로 ✕ 와 맞추려면 글자 화살표여야 한다. ✕ 보다 획이 가늘어 글자 크기만 19px 로 키운다. */
.setback{width:32px; height:32px; padding:0; border:0; background:transparent;
  color:var(--muted); border-radius:8px; display:grid; place-items:center;
  font-size:19px; line-height:1}
.setback:hover{background:var(--surface-2); color:var(--ink)}
/* 행에도 minmax(0,1fr) 을 준다 — 안 주면 행 높이가 내용만큼 늘어나
   메뉴·내용의 overflow:auto 가 일을 하지 않고 창 밖으로 잘려 나간다 */
.setwrap{flex:1 1 auto; min-height:0; display:grid;
  grid-template-columns:216px minmax(0,1fr); grid-template-rows:minmax(0,1fr)}
.setnav{border-right:1px solid var(--line); background:var(--surface-2); overflow:auto;
  padding:10px 8px; display:flex; flex-direction:column; gap:2px}
.setnav button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0;
  background:transparent; border-radius:9px; padding:9px 10px; font-size:13.5px; color:var(--ink-2)}
.setnav button svg{flex:0 0 auto; width:18px; height:18px; stroke:currentColor; stroke-width:1.6;
  fill:none; stroke-linecap:round; stroke-linejoin:round}
.setnav button .lbl{flex:1 1 auto; min-width:0}
.setnav button small, .setnav button .chev{display:none}   /* 부제·꺾쇠는 모바일 목록에서만 */
.setnav button:hover{background:var(--surface)}
.setnav button.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.setpane{overflow:auto; padding:16px 18px; min-width:0}
.setpane .sect:last-child{margin-bottom:0}
@media (max-width:920px){
  /* 창 전환 — 설정이 화면을 통째로 덮고, 메뉴를 누르면 상세 화면으로 넘어간다 */
  .setscrim{padding:0}
  .setscrim.on{display:block}
  .setmodal{width:100% !important; height:100% !important; max-height:none; border:0; border-radius:0;
    resize:none; min-width:0; min-height:0; transform:none !important}   /* 폰은 늘 전체화면 — 옮기기·크기 없음 */
  .setmax{display:none}
  .sethead.grab{cursor:default}
  .sethead{display:grid; grid-template-columns:1fr auto 1fr; gap:6px; padding:12px var(--sp4);
    padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .sethead h2{text-align:center; font-size:var(--t-md)}
  .sethead .sh-l{display:block; justify-self:start}
  .sethead .sh-r{justify-self:end; margin-left:0}
  /* 상세로 넘어갈 때 16px 밀려 들어오는 애니메이션(setslide)이 그동안 창에
     가로 스크롤을 만든다 — 0.16초짜리지만 손가락 화면에서는 흔들림으로 보인다.
     여기서 잘라 둔다 (실측: #setModal 이 16px 넘쳤다). */
  .setwrap{grid-template-columns:1fr; overflow-x:hidden}
  .setnav{border-right:0; background:var(--paper); gap:8px; padding:var(--sp3) var(--sp4) var(--sp6)}
  .setnav button{border:1px solid var(--line); background:var(--surface); border-radius:var(--r);
    padding:13px 14px; font-size:var(--t-md); font-weight:500; color:var(--ink)}
  .setnav button small{display:block; margin-top:2px; font-size:var(--t-xs); font-weight:400; color:var(--muted)}
  .setnav button .chev{display:block; color:var(--muted); font-size:16px; line-height:1}
  /* 목록에서는 '지금 보는 메뉴' 표시가 뜻이 없다 — 누르는 순간 상세로 넘어가기 때문이다 */
  .setnav button.on{background:var(--surface); color:var(--ink); font-weight:500}
  .setpane{padding:var(--sp3) 0 var(--sp6)}
  .setmodal[data-view="list"] .setpane{display:none}
  .setmodal[data-view="list"] .setback{visibility:hidden}
  .setmodal[data-view="detail"] .setnav{display:none}
  .setmodal[data-view="detail"] .setpane{animation:setslide .16s ease-out}
  @keyframes setslide{from{transform:translateX(16px); opacity:.35} to{transform:none; opacity:1}}
}

/* ---------- 모바일 ---------- */
.bottomnav,.fab{display:none}
.rvwcards{display:flex; flex-direction:column; gap:10px; padding-bottom:6px; min-width:0}
.rvwcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:9px 12px 11px; display:grid; gap:6px; min-width:0}
.rvwcard.off{opacity:.5}
.rvwcard .r1{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:28px}
.rvwcard .r1 input[type=checkbox]{width:20px; height:20px; flex:0 0 auto; accent-color:var(--accent)}
.rvwcard .r1 input[type=date]{flex:0 1 148px; min-width:0; width:auto; padding:5px 8px}
.rvwcard .r1 .sp{flex:1}
/* 라벨은 컨트롤 위에 붙어 있어야 한 덩어리로 읽힌다 */
.rvwcard .field label{margin-bottom:2px}
.rvwcard .r4{display:flex; align-items:center; gap:8px; min-width:0}
.rvwcard .r4 .raw{flex:1 1 0; min-width:0; max-width:100%}
/* 컨트롤은 직접 입력 모달과 같은 크기·모양 */
.rvwcard .fields{gap:6px 9px}
.rvwcard input,.rvwcard select{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 9px; width:100%}
.rvwcard input:focus,.rvwcard select:focus{border-color:var(--accent); outline:none}
.rvwcard .amt-in{text-align:right; font-weight:600}
/* 항목 아래 '구분 · OO' — 모달의 eGroupLabel 과 같은 자리·같은 크기 */
.fsub{display:block; font-size:var(--t-xs); color:var(--muted); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rvwbar{position:sticky; bottom:calc(var(--navh,44px) + env(safe-area-inset-bottom,0px) + 8px); z-index:30;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px}
@media (min-width:921px){ .rvwbar{position:static; bottom:auto; border:0; background:transparent; padding:0} }

@media (max-width:920px){
  /* 모바일 타입 스케일 — 크기는 여기 네 줄로만 정한다.
     아래 규칙에서 px 를 직접 쓰지 말 것 (8단계로 흩어져 있던 것을 4단계로 줄였다) */
  :root{
    --navh:56px; --safe:env(safe-area-inset-bottom,0px);
    --t-xs:12px;      /* 라벨·보조설명 */
    --t-sm:13px;      /* 배지·작은 값 */
    --t-md:15px;      /* 본문 */
    --t-lg:17px;      /* 금액·강조 */
    --t-xl:22px;      /* 화면 제목 */
  }
  /* 가로 여백 없음 — 카드가 화면 끝까지 간다. 안쪽 여백은 유지한다(글자가 모서리에 붙으면 안 됨).
     아래 여백은 탭바 + FAB 자리다. FAB 가 없는 화면은 그만큼 줄인다(아래 규칙). */
  .wrap{padding:0 0 calc(var(--navh) + 72px + var(--safe))}
  body[data-tab="paste"] .wrap, body[data-tab="more"] .wrap,
  body[data-tab="road"]  .wrap, body[data-tab="long"] .wrap,
  body[data-tab="set"]   .wrap, body[data-tab="stat"] .wrap, body[data-tab="asset"] .wrap{
    padding-bottom:calc(var(--navh) + var(--sp4) + var(--safe));
  }
  /* 마지막 섹션의 아래 margin 은 위 패딩과 겹쳐 빈 칸만 만든다 */
  .panel > .sect:last-child, .panel > div:last-child > .sect:last-child{margin-bottom:0}
  /* 브랜드 줄은 스크롤과 함께 올라가고, 월·합계가 앱바로 남는다 */
  /* position/z-index — 로드맵 전환(.rdswitch)의 ::before(틈 가림막)가 이 줄 위를 덮지 않게 */
  .masthead{
    position:relative; z-index:21;
    margin:0;
    padding:calc(env(safe-area-inset-top,0px) + 11px) var(--sp4) 9px;
    align-items:center; gap:var(--sp2);
  }
  .brand h1{font-size:var(--t-xl); letter-spacing:-.02em}
  .brand .tag{display:none}
  /* 모바일에서 이 줄은 앱바다 — 로고를 눌러 새로고침되면 앱이 껐다 켜진 것처럼 보인다.
     화면이 넓어지면 CSS 가 알아서 다시 살아난다(JS 로 거는 것보다 이쪽이 안전하다). */
  .brandhome{pointer-events:none}
  .brandhome:hover h1{text-decoration:none}
  .chip{font-size:var(--t-xs); padding:4px 10px; border-radius:999px}
  /* 좁은 화면에서는 돋보기 버튼만. 누르면 .open 이 붙어 입력칸이 나온다 */
  .search{border-color:transparent; background:transparent; padding:0}
  .search input{display:none}
  .search:not(.open) .sclr{display:none!important}   /* 접힌 머리줄 검색에는 ✕ 도 없다(v253) */
  .search.open{background:var(--surface); border-color:var(--line); padding:2px 3px 2px 12px}
  .search.open input{display:block; width:min(52vw,220px)}
  /* 글자를 넣으면 ✕(24px + 사이 4px)가 생긴다 — 그만큼 칸을 줄여 검색 상자 폭을 그대로 둔다.
     안 줄이면 375~402px 폰에서 로고 옆에 못 들어가 아랫줄로 떨어졌다(머리줄 62 → 107px, 사용자 신고) */
  .search.open input:not(:placeholder-shown){width:calc(min(52vw,220px) - 28px)}

  .layout{display:flex; flex-direction:column; gap:0; align-items:stretch}
  .layout > *, .rail > *{min-width:0; max-width:100%}
  .rail{display:contents}
  /* 월 이동 + 합계 = 앱바. 화면 폭 전체를 쓰고 스크롤해도 위에 붙어 있는다 */
  /* 가계부·주간·월말 화면은 Planowa 머리줄(로고·검색)도 위에 붙이고, 앱바(.rail-top)는 그 바로 아래(v177 사용자 요청).
     머리줄 높이는 상태바·검색창 펼침에 따라 달라 99-boot 가 --mastH 로 잰다. 머리줄이 앱바보다 위층(23 > 22). */
  /* 자산(v178)은 앱바를 감추는 화면이라 머리줄만 붙인다 */
  body[data-tab="daily"] .masthead, body[data-tab="week"] .masthead, body[data-tab="month"] .masthead,
  body[data-tab="asset"] .masthead{
    position:sticky; top:0; z-index:23; background:var(--paper)}
  body[data-tab="daily"] .rail-top, body[data-tab="week"] .rail-top, body[data-tab="month"] .rail-top{top:var(--mastH,0px)}
  .rail-top{
    order:1; position:sticky; top:0; z-index:22;
    margin:0; max-width:none;
    border-radius:0; border-top:0; border-left:0; border-right:0;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
    box-shadow:0 6px 20px -14px rgba(20,20,30,.5);
  }
  main{order:2; min-width:0}
  /* 카드 사이는 8px. 좁은 화면에서 12px 은 카드 서넛만 쌓여도 여백이 내용을 밀어낸다 */
  .rail-bottom{order:3; margin-top:var(--sp2)}

  /* 일일 화면만 차례를 바꾼다: 요약 · 감사일기 · 투두 · 지출 · 현황.
     오늘 한 줄과 오늘 할 일은 '지금 쓰는' 것이라 손이 먼저 닿아야 하는데,
     지출 목록이 길면 스크롤 한참 아래로 밀려 안 쓰게 된다.
     다른 탭은 그대로다 — 거기서는 표·목록이 주인공이다. */
  body[data-tab="daily"] .thankscard:not(.todocard){order:2; margin-top:var(--sp2)}
  body[data-tab="daily"] .todocard{order:3; margin-top:var(--sp2)}
  /* 내역도 앞의 두 카드와 같은 간격을 갖는다 — main 에는 margin 이 없어 투두 카드에 딱 붙었다.
     .rail-bottom 은 저마다 margin-top 을 갖는데 main 은 그 바깥이라 따로 줘야 한다. */
  body[data-tab="daily"] main{order:4; margin-top:var(--sp2)}
  body[data-tab="daily"] .rail-bottom:not(.thankscard){order:5}
  /* 검색 중에는 감사·투두 카드를 감춘다 — 결과가 요약 바로 아래에 와야 한다(v216). 클래스는 renderDaily 가 단다 */
  body.searching[data-tab="daily"] .thankscard{display:none}

  .monthnav{padding:6px var(--sp4)}
  .monthnav .label{font-size:var(--t-lg)}
  .monthnav button{width:36px; height:36px; border-radius:10px; font-size:var(--t-lg)}
  .totals{grid-template-columns:repeat(3,1fr)}
  .totals .full{grid-column:auto}
  /* .totals 는 <dl> 이라 브라우저 기본 margin(1em = 15px)이 위아래에 붙는다.
     아무도 적어 두지 않은 값이라 눈으로는 안 보이는데, 앱바 높이의 30px 이 여기서 나왔다. */
  .totals{margin:8px 0}
  .totals > div{padding:5px var(--sp4)}
  .totals dt{font-size:var(--t-xs); margin-bottom:1px}
  .totals dd{font-size:var(--t-lg); letter-spacing:-.02em; line-height:1.3}
  .budget{padding:8px var(--sp4) 9px}
  .budget .row{font-size:var(--t-xs); line-height:1.4}
  .track{height:6px; margin:5px 0 4px}

  .tabs{display:none}
  /* 하단 탭바 — 아이콘 + 라벨, 44px 이상 터치 영역 */
  .bottomnav{
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--line); padding-bottom:var(--safe);
  }
  .bottomnav button{
    border:0; background:transparent; color:var(--muted);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:var(--navh); padding:7px 2px 8px; font-size:var(--t-xs); font-weight:500; letter-spacing:-.02em;
  }
  .bottomnav svg{width:22px; height:22px; stroke:currentColor; stroke-width:1.7; fill:none;
    stroke-linecap:round; stroke-linejoin:round}
  .bottomnav button[aria-selected="true"]{color:var(--accent); font-weight:600}
  .bottomnav button[aria-selected="true"] svg{stroke-width:2.1}
  /* 일일 아이콘만 선(.o) ↔ 채움(.f) 두 벌 — 디자인 시안: 고른 탭은 채운 사각에 날짜를 뚫는다 */
  .bottomnav svg .f{display:none; fill:currentColor; stroke:none}
  .bottomnav button[aria-selected="true"] svg .o{display:none}
  .bottomnav button[aria-selected="true"] svg .f{display:inline}
  .bottomnav svg .navday{font:700 10px/1 -apple-system, "Segoe UI", system-ui, sans-serif; letter-spacing:-.04em;
    fill:currentColor; stroke:none}
  .bottomnav svg .navday.k{fill:var(--surface)}
  .bottomnav button:active{background:var(--surface-2)}
  .fab{display:grid; place-items:center; position:fixed; z-index:45;
    right:var(--sp4); bottom:calc(var(--navh) + var(--safe) + 14px); width:56px; height:56px;
    border-radius:50%; border:0; background:var(--accent); color:var(--accent-ink);
    font-size:28px; line-height:1; box-shadow:0 8px 22px -6px color-mix(in srgb, var(--accent) 70%, transparent)}
  .fab:active{transform:scale(.94)}
  /* 보조 FAB — 복사한 문자 붙여넣기 */
  .fab-2nd{
    /* v262 사용자 요청으로 46 → 52px(그림 21 → 24px). 아래 간격은 ＋(56px)와 가운데가 맞게 14 + (56-52)/2 */
    right:calc(var(--sp4) + 66px); width:52px; height:52px; bottom:calc(var(--navh) + var(--safe) + 16px);
    background:var(--surface); color:var(--accent); border:1px solid var(--accent-line);
    box-shadow:0 6px 16px -8px rgba(20,20,30,.45);
  }
  .fab-2nd svg{width:24px; height:24px; stroke:currentColor; stroke-width:1.8; fill:none;
    stroke-linecap:round; stroke-linejoin:round}
  /* 항목을 넣는 화면이 아닌 곳에서는 FAB 를 감춘다 — 내용만 가린다 */
  body[data-tab="paste"] .fab, body[data-tab="more"] .fab,
  body[data-tab="road"] .fab, body[data-tab="long"] .fab,
  body[data-tab="set"] .fab, body[data-tab="stat"] .fab, body[data-tab="asset"] .fab{display:none}
  .railbtns{display:none}

  input,select,textarea,.cell-in{font-size:16px!important}
  /* 위 규칙은 iOS 가 '16px 미만 입력칸' 에 포커스될 때 화면을 확대하는 것을 막으려는 것이다.
     다만 감사·목표 카드는 긴 문장을 적는 칸이라 16px 면 한 줄에 몇 자 못 들어간다.
     여기만 예외로 줄인다(안드로이드는 확대하지 않고, iOS 는 확대돼도 글을 쓰는 칸이라 덜 거슬린다).
     빈 칸 안내(placeholder)는 한 술 더 작게 — 값이 아니라 설명이다. */
  /* 메인 색 네 칸은 한 줄에 — 색끼리 나란히 놓여야 고르기 쉽다.
     좁은 화면이라 아이콘 위 / 이름 아래로 세우고 글자를 줄인다(actBar 와 같은 짜임) */
  .swatches{grid-template-columns:repeat(4,1fr); gap:var(--sp1)}
  .swbtn{flex-direction:column; gap:5px; padding:9px 2px; text-align:center;
    font-size:11px; letter-spacing:-.06em; line-height:1.2}
  .swbtn span{white-space:nowrap}
  .swbtn i{width:24px; height:24px}
  .thankscard textarea, .notecard textarea{font-size:14px!important; line-height:1.5}
  .notecard textarea{min-height:88px}          /* 모바일은 화면이 짧다 — 데스크톱보다 낮게 */
  /* 빈 칸 안내(placeholder)만 전체적으로 한 단계 작게.
     * 입력칸 자체의 16px 은 건드리지 않는다 — iOS 는 16px 미만 입력칸에 포커스되면
       화면을 확대한다. 확대 판정은 입력칸의 font-size 로만 하고 ::placeholder 는 보지 않으므로,
       안내 글씨만 줄이는 것은 안전하다. */
  input::placeholder, textarea::placeholder{font-size:var(--t-sm); opacity:.9}
  .thankscard textarea::placeholder, .notecard textarea::placeholder{font-size:var(--t-xs)}
  /* 모달 입력칸은 한 줄에 하나씩. 글자가 16px 로 커지는 화면에서 두 칸을 욱여넣으면
     날짜칸이 제 폭을 고집하며 항목 위로 겹친다(직접 입력·문자에서 읽음·항목 수정 모두 같은 폼) */
  .modal .fields{grid-template-columns:1fr}
  .intake textarea{font-size:var(--t-sm)!important; min-height:120px; line-height:1.75}
  .intake{padding:var(--sp4); border-radius:0; border-left:0; border-right:0}
  .btn{padding:12px var(--sp4); font-size:var(--t-md); border-radius:10px}
  /* 표 머리글 버튼은 예외 — 위 .btn 규칙을 그대로 받으면 머리줄이 통째로 두꺼워진다 */
  .thbtn{padding:2px 7px; font-size:var(--t-xs); border-radius:6px}
  /* 화면 아래 동작 바 — 앱처럼 아이콘 위, 라벨 아래. 폭은 나눠 갖되 여백은 아끼다 */
  .actbar{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px;
    margin:var(--sp3) var(--sp4) 0; flex-wrap:nowrap}
  .actbar button{flex-direction:column; gap:4px; padding:9px 4px; border-radius:12px;
    font-size:var(--t-xs); font-weight:600; color:var(--ink-2); letter-spacing:-.03em}
  .actbar button:active{background:var(--surface-2); transform:scale(.97)}
  .actbar svg{width:18px; height:18px}
  /* 세그먼트 전환(월말/연간, 표/문자 붙여넣기)은 손가락으로 누른다 —
     데스크톱의 작은 인라인 모양 대신 로드맵의 .rdswitch 와 같은 크기·모양으로 통일한다 */
  .seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
    margin-left:var(--sp4); margin-right:var(--sp4); padding:4px;
    border:0; background:var(--sunken); border-radius:10px}
  .seg button{background:transparent; padding:9px 2px; border-radius:7px;
    font-size:var(--t-sm); font-weight:600; letter-spacing:-.03em; white-space:nowrap}
  .seg button[aria-pressed="true"]{background:var(--surface); color:var(--accent);
    box-shadow:0 1px 3px rgba(20,20,30,.12)}
  .btn:active{transform:scale(.98)}
  .intake .bar{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp2); margin-top:var(--sp3)}
  .intake .bar .spacer{display:none}
  .intake .bar #doAI{grid-column:1/-1}
  .intake .bar .btn-ghost{padding:10px; font-size:var(--t-sm); border:1px solid var(--line)}

  .tblwrap{overflow-x:auto; border-radius:0}
  /* 카드는 화면 끝까지. 좌우 테두리·모서리를 없애면 목록이 한 덩어리로 읽힌다 */
  .card{border-radius:0; border-left:0; border-right:0}
  .sect{margin-bottom:var(--sp4)}
  /* 카드는 화면 끝까지 가지만 제목·설명·머리줄은 좌우 여백을 갖는다.
     제목이 .secthd 안에 들어 있는 화면도 있어서 두 경우를 같이 잡는다. */
  .sect > h2, .sect > .hint, .secthd, .formula{padding-left:var(--sp4); padding-right:var(--sp4)}
  /* 다만 '카드이면서 .sect' 인 것(설정 화면 카드들)은 카드가 이미 좌우 여백을 갖는다.
     위 규칙까지 받으면 제목·설명만 16px 더 들어가 카드 안 버튼·표와 줄이 어긋난다. */
  .card.sect > h2, .card.sect > .hint, .card.sect > .secthd, .card.sect > .formula{
    padding-left:0; padding-right:0}
  /* 좌우 여백을 두지 않는다 — 화면 폭을 그대로 쓴다(사용자 요구).
     위아래 여백만 남긴다. */
  .rdswitch{margin-left:0; margin-right:0; margin-top:var(--sp2)}
  /* 로드맵 화면(단기·장기·머니플랜)은 Planowa 머리줄과 전환 버튼을 둘 다 위에 붙인다(사용자 요구).
     * 머리줄은 상태바 높이(safe-area)를 이미 안에 품고 있어 top:0 이면 된다. 바탕을 칠해야 뒤 글자가 안 비친다.
     * 전환 버튼은 머리줄 바로 아래 — 머리줄 높이는 기기·검색창 열림에 따라 달라 99-boot 가 --mastH 로 재어 준다.
     * 둘 사이 틈(--sp2)은 ::before 가 바탕색으로 메운다(안 메우면 그 틈으로 표가 지나가는 게 보인다).
     이 탭은 앱바(.rail-top)를 감추므로 다른 sticky 와 겹치지 않는다. */
  body[data-tab="road"] .masthead, body[data-tab="long"] .masthead{
    position:sticky; top:0; z-index:23; background:var(--paper)}
  .rdswitch{position:sticky; top:calc(var(--mastH,0px) + var(--sp2)); z-index:20}
  .rdswitch::before{content:""; position:absolute; left:0; right:0; bottom:100%;
    height:var(--sp2); background:var(--paper)}
  /* 월말정산 / 연간정산 전환도 로드맵 전환과 같이 화면 폭을 다 쓴다(사용자 요구).
     다른 .seg(붙여넣기의 표/문자 등)는 그대로 여백을 둔다 */
  #monthBody .seg{margin-left:0; margin-right:0; margin-top:var(--sp2)}
  .sect > h2, .secthd h2{font-size:var(--t-md)}
  .secthd h2 span{font-size:var(--t-sm)}     /* 제목 옆 '2026–2055 · 30년' */
  .secthd .btn{padding:8px 12px; font-size:var(--t-sm)}
  /* 설정 화면 버튼은 작게. 여기는 '가끔 누르는' 버튼이 카드마다 두세 개씩 있어
     본문 버튼 크기(12px 여백)를 그대로 받으면 화면이 버튼으로 꽉 찬다.
     * 위 .btn 규칙보다 뒤에 와야 이긴다(특이도는 #setBody 가 더 높으니 순서와 무관하지만
       한곳에 모아 두려고 여기 둔다). */
  #setBody .btn{padding:8px 12px; font-size:var(--t-sm); border-radius:8px}
  #setBody .btn-ghost{padding:7px 10px}
  #setBody .actbar .btn{padding:8px 4px}          /* 아이콘 바는 제 규칙을 지킨다 */
  /* '이번 달' 과 무관한 화면에서는 월 앱바를 감춘다
     * 설정은 여기 없다 — 탭이 아니라 화면을 덮는 창이라 뒤쪽 앱바를 감출 필요가 없다 */
  body[data-tab="road"] .rail-top,
  body[data-tab="long"] .rail-top,
  body[data-tab="more"] .rail-top,
  body[data-tab="asset"] .rail-top{display:none}          /* 자산은 화면 안의 ‹ 2026년 10월 › 로 넘긴다(v224 — 전에는 해 단위) */
  /* 폰 자산(v224) — 달 하나씩 카드로. 금액 칸은 오른쪽 정렬 · 16px(아이폰 확대 방지는 전역 규칙) */
  .as-m{display:flex; flex-direction:column; gap:10px}
  .as-m > .as-sum, .as-m > .as-card{margin-left:var(--sp4); margin-right:var(--sp4)}   /* 제목 줄과 같은 들여쓰기 */
  /* 달 이동줄은 일일의 .monthnav 와 같은 모양(v267 사용자 요청) — 화면 폭 흰 띠 · 위아래 선 · 36px 단추 · 굵은 달 이름 */
  .as-mnav{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px var(--sp4);
    background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .as-mnav button{width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px;
    background:var(--surface); color:var(--ink-2); cursor:pointer}
  .as-mnav button svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
  .as-mnav .as-ml{width:auto; height:auto; min-height:30px; flex:0 1 auto; padding:2px 10px; border:0; border-radius:8px; background:transparent;
    font-family:"Gowun Batang",serif; font-size:var(--t-lg); font-weight:700; color:var(--ink)}
  .as-sum{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0; background:var(--line); border:1px solid var(--line);
    border-radius:var(--r); overflow:hidden}
  .as-sum > div{background:var(--surface); padding:10px var(--sp4)}
  .as-sum > div.cap{grid-column:1 / -1}
  .as-sum dt{font-size:var(--t-xs); color:var(--muted)}
  .as-sum dd{margin:2px 0 0; font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em}
  .as-sum .cap dd{font-size:var(--t-lg)}   /* 순자산도 다른 요약 숫자와 같은 크기(v268 사용자 요청 — 전에는 --t-xl 로 혼자 컸다) */
  .as-sum small{display:block; margin-top:2px; font-size:var(--t-xs); color:var(--muted)}
  .as-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
  .as-card > header{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px var(--sp4);
    background:var(--surface-2); border-bottom:1px solid var(--line)}
  .as-card > header b{font-size:var(--t-md)}
  .as-card > header .num{font-weight:600}
  .as-card.debt > header .num{color:var(--expense)}
  .as-card ul{list-style:none; margin:0; padding:2px var(--sp4)}
  .as-card li{display:flex; align-items:center; gap:10px; padding:1px 0; border-bottom:1px dashed var(--line)}   /* 6 → 3 → 1px(v268 · v273 행간 좁힘) */
  .as-card li:last-child{border-bottom:0}
  .as-card li.as-ref .as-nm{color:var(--muted)}
  .as-card .as-nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
  /* v269 사용자 요청 — 머리(구분 · 합계) · 항목 · 숫자 14px, 입력칸 세로 30px · 흰 바탕.
     입력칸 글자는 16px 이어야 아이폰이 눌렀을 때 화면을 확대하지 않는다 — 16px 로 두고 0.875배로 줄여 14px 로 보인다
     (주간·월말 예산 칸 v259 와 같은 방법). 보이는 크기 = 폭 46% · 높이 30px 가 되게 줄이기 전 크기를 나눠 잡고, 오른쪽 기준으로 줄인다 */
  .as-card > header b, .as-card > header .num, .as-card .as-nm{font-size:14px}
  .as-card .asin{flex:0 0 calc(46% / .875); min-width:0; box-sizing:border-box; height:calc(28px / .875); padding:0 10px; text-align:right;
    margin:-2px 0 -2px calc(46% - 46% / .875);   /* 보이는 높이 30 → 28px(v273) */
    transform:scale(.875); transform-origin:right center; font-size:16px!important;
    border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-variant-numeric:tabular-nums}
  .as-card .asin::placeholder{color:var(--muted); opacity:.55}
  .as-card .asin:focus{outline:2px solid var(--accent); outline-offset:-1px; background:var(--surface)}
  .as-card > footer{padding:8px var(--sp4) 10px; font-size:var(--t-xs); color:var(--muted); border-top:1px solid var(--line); text-align:right}
  .as-dv{font-weight:600; font-variant-numeric:tabular-nums}
  /* 월말정산은 월 이동줄만 남긴다 — 본문 첫 KPI(수입·지출·잔액)가 같은 숫자를 다시 보여 줘 겹쳤다 */
  body[data-tab="month"] .rail-top .totals{display:none}
  /* 구분별 현황(rail-bottom)을 감출 화면 — 표·목록·입력이 화면을 다 쓰는 곳이라
     아래에 카드가 하나 더 붙으면 군더더기가 된다 */
  body[data-tab="week"]  .rail-bottom,                     /* 주간 — 수입·지출 현황 · 감사 · 투두도 뺀다(v254 사용자 요청) */
  body[data-tab="long"]  .rail-bottom,
  body[data-tab="more"]  .rail-bottom,
  body[data-tab="month"] .rail-bottom,
  body[data-tab="road"]  .rail-bottom,
  body[data-tab="asset"] .rail-bottom,
  body[data-tab="paste"] .rail-bottom{display:none}
  body[data-tab="asset"] .thankscard{display:none}         /* 표가 화면을 다 쓴다 — 감사·투두 카드는 빼 둔다 */
  /* 통계는 구분별 현황은 두고 감사 카드만 감춘다 — 숫자를 보러 온 화면에 입력칸이 끼면 산만하다 */
  body[data-tab="stat"] .thankscard{display:none}
  /* 더보기는 목록만 있으면 된다 — 제목과 설명은 군더더기 */
  #p-more > .sect > h2, #p-more > .sect > .hint{display:none}
  /* 더보기 목록(v256, 07-settings renderMore) — 시안: 묶음 제목 + 둥근 카드, 줄마다 아이콘 · 이름 · ›.
     구분선은 아이콘 뒤(글자 시작)부터 — .ml 의 아래 테두리로 긋는다(마지막 줄은 없음) */
  #moreBody{display:flex; flex-direction:column; gap:22px; padding:6px var(--sp4) 0}
  .mgrp{margin:0}
  .mgh{margin:0 4px 8px; font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.01em}
  .mlist{list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden}
  .mlist button{display:flex; align-items:stretch; gap:14px; width:100%; min-height:52px; padding:0 0 0 16px; border:0;
    background:transparent; color:var(--ink); font:inherit; font-size:var(--t-md); text-align:left; cursor:pointer}
  .mlist button:active{background:var(--surface-2)}
  .mlist .mi{flex:0 0 auto; display:grid; place-items:center; width:22px; color:var(--ink-2)}
  .mlist .mi svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .mlist .ml{flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding-right:14px; border-bottom:1px solid var(--line)}
  .mlist li:last-child .ml{border-bottom:0}
  .mlist .mchev{font-size:20px; line-height:1; color:var(--muted)}
  /* 폰 '정보'(v269 aboutCard) — 더보기와 같은 목록. 링크 줄(a) · 글만 있는 줄(.abinfo)도 단추 줄과 같은 모양 */
  #setBody > .abl{margin:0 var(--sp4)}
  .mlist a, .mlist .abinfo{display:flex; align-items:stretch; gap:14px; width:100%; min-height:52px; padding:0 0 0 16px;
    color:var(--ink); text-decoration:none; font-size:var(--t-md); box-sizing:border-box}
  .mlist a:active{background:var(--surface-2)}
  .mlist .abinfo .ml{padding-top:9px; padding-bottom:9px}
  .mlist .ml small{display:block; margin-top:2px; font-size:13px; color:var(--muted)}
  /* v270 사용자 요청 — 정보: 인스타그램 줄 위아래를 좁힌다(두 줄이라 혼자 높았다) */
  .mlist a.abig{min-height:0}
  .mlist a.abig .ml{padding-top:6px; padding-bottom:6px}
  .mlist a.abig .ml small{margin-top:0; line-height:1.3}
  /* 더보기(설정 · 도움말)에서 들어간 창은 ✕ 없이 ← 만(v270 사용자 요청). ← 가 더보기로 돌아간다.
     visibility 로 감춘다 — 3칸 머리줄에서 칸째 빠지면 제목이 가운데에서 밀린다 */
  .setmodal[data-direct="1"] #setClose{visibility:hidden}
  /* 도움말의 창(이용방법 · 앱 문제 신고하기, 07-settings modalBackHeader) — 설정 머리줄과 같은 3칸: ← · 가운데 제목 · 빈 칸 */
  #modal > header.mhd-back{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px}
  #modal > header.mhd-back h2{text-align:center; font-size:var(--t-md); margin:0}
  #modal > header.mhd-back .setback{justify-self:start}
  /* 설정 상세도 더보기와 같은 모양(v259) — 바탕은 더보기 바탕, 카드는 좌우 여백을 둔 둥근 상자,
     카드 제목은 상자 밖 위의 묶음 제목(.sgh — 07-settings setGroupTitles 가 꺼낸다) */
  .setmodal, .setpane{background:var(--paper)}
  #setBody{padding-top:6px}
  #setBody > .sgh{margin:0 calc(var(--sp4) + 4px) 8px; padding:0; font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.01em}
  #setBody > .sgh .cardsub{font-size:12px; font-weight:400; margin-left:4px}
  #setBody > .card.sect{margin:0 var(--sp4) 22px; border:1px solid var(--line); border-radius:14px; box-shadow:none; background:var(--surface)}
  #setBody > .card.sect > .hint:first-child{margin-top:0}
  /* 저작권 줄은 웹에서만. 앱처럼 쓰는 화면에 푸터가 있으면 웹사이트처럼 보인다 */
  .sitefoot{display:none}
  /* 짧은 화면도 1px 만큼은 스크롤이 살아 있게 둔다.
     스크롤이 아예 없으면 모바일 브라우저가 주소창을 다시 내밀고, 그때 화면이 줄면서
     화면에 고정된 탭바가 '위로 올라온' 것처럼 보인다(사용자가 겪은 그 현상).
     100lvh 는 주소창이 숨은 상태의 높이라, 어느 상태에서도 문서가 화면보다 크다. */
  .wrap{min-height:calc(100vh + 1px); min-height:calc(100lvh + 1px)}
  /* 사용법·계산식 설명은 모바일에서 전부 감춘다.
     좁은 화면에서는 표·목록이 화면을 다 쓰는데 그 아래 긴 글이 붙으면 스크롤만 늘어난다.
     설명이 필요하면 데스크톱에서 본다. (카드에 딸린 .hint 와 경고는 그대로 둔다 —
     그건 사용법이 아니라 그 자리에서 읽어야 하는 글이다) */
  .guide, .formula{display:none}   /* .gdoc(이용방법 문서)는 감추지 않는다 — 읽으러 여는 창이다 */
  /* 엑셀 템플릿 받기는 모바일에서 감춘다. 받아서 스프레드시트로 채우고 복사해 오는 일은
     폰에서 할 만한 작업이 아니다 — 자리만 차지하고 못 쓰는 길을 권하는 셈이 된다. */
  #gridTmpl{display:none}
  /* 개별 요소를 모바일에서만 감출 때 쓰는 유틸리티 */
  .mhide{display:none!important}
  /* 열 구성은 데스크톱과 같다 — [항목/구분] [내용] [금액].
     폭만 좁히고 글자만 모바일 크기로 바꾼다. 예전에는 항목을 내용 위에 쌓았는데,
     같은 목록이 기기마다 다르게 읽혀 눈이 매번 새로 적응해야 했다.
     줄간격은 본문 1.65 를 그대로 쓰면 목록에서 너무 성기다. */
  .rows li{grid-template-columns:88px minmax(0,1fr) auto; gap:var(--sp2);
    padding:10px var(--sp4); min-height:52px; line-height:1.4}
  .rows li:active{background:var(--surface-2)}
  .rows .cat{font-size:var(--t-xs)}
  .rows .ttl{font-size:var(--t-md); letter-spacing:-.01em}
  .rows .val{font-size:var(--t-lg); letter-spacing:-.02em}
  .rows .val small{font-size:var(--t-xs)}
  /* 폰은 카드가 아니라 한 장의 목록이다 — 날짜 줄이 가름표 역할만 하고 전체 내역이 끊김 없이 이어진다.
     둥근 모서리·옆 테두리·그림자를 걷는다(날짜마다 카드가 떠 보였다). 날짜 묶음 사이 선은 한 줄만. */
  .day{margin-bottom:0; border:0; border-radius:0; box-shadow:none; border-bottom:1px solid var(--line)}
  .day:last-child{border-bottom:0}
  .day > header{padding:2px var(--sp4); font-size:var(--t-md)}
  /* 수입·지출 현황 — 제목(12px·흐림)과 항목(13px)이 거의 같아 한 덩어리로 읽혔다(피드백).
     제목은 그대로 작은 라벨로 두고, 항목을 본문 크기·진한 글자로 올려 위계를 가른다. */
  .rail-bottom .assetlist h2{margin-bottom:10px}
  .rail-bottom .assetlist ul{gap:9px}
  .rail-bottom .assetlist li{font-size:var(--t-md)}
  .rail-bottom .assetlist .nm{color:var(--ink)}

  /* 스케일 밖 크기를 모바일에서만 스냅한다 (데스크톱 비율은 건드리지 않는다).
     10 / 10.5 / 11 / 11.5 / 12.5 / 13.5px 가 흩어져 있던 것을 xs·sm·md 로 모은다. */
  .totals dt, .kpi dt, .kpi .sub, .rows .cat small, .rows .val small, .rows .ttl .memo,
  .raw, th, .assetlist h2, .field label, .morelist small, .serieskey,
  .badge, .lrmy i, .mghead .chev, .pctc i, .tag,
  .stl th, .wkbar span, .wkkpi dt, .wkval small{ font-size:var(--t-xs) }
  .sect > p.hint, p.hint, .rawbox, .note, .updbar .btn,
  .stl td, .wkcmp .wkc-n, .wkcmp .wkc-v{ font-size:var(--t-sm) }
  .rows .ttl, .wkname, .mghead b{ font-size:var(--t-md) }

  /* 목표·피드백을 좌우로 놓기엔 화면이 좁다 — 위아래로 세운다 (연간 목록 · 월말 카드 둘 다).
     세로로 쌓으면 가운데 선·좌우 여백은 뜻이 없어지므로 함께 푼다 */
  .ynlist .ynt{grid-template-columns:1fr; gap:3px}
  .ynlist .yng{padding-right:0}
  .ynlist .ynr,.ynlist .yns{padding:0; border-left:0}
  .notegrid{grid-template-columns:1fr; gap:8px}
  .nrdgrid{grid-template-columns:1fr; gap:10px}      /* 읽기 팝업도 좁은 화면에선 위아래로 */
  .modal.resizable{resize:none; min-width:0; min-height:0}   /* 아래 시트는 크기를 손대지 않는다 */
  /* 투두 — 손가락 화면에는 hover 가 없다. ✕ 를 숨겨 두면 지울 길이 사라진다 */
  .tddel{opacity:1}
  .tdmain{padding:8px 0}                 /* 손가락이 닿을 높이 */
  /* ✕ 와 확인은 손가락이 닿을 만큼만 키우고, 줄은 그대로 한 줄로 둔다 */
  .tded .btn{padding:7px 10px}
  /* 감사일기 검색칸은 남는 폭을 다 쓴다 (150px 고정이면 좁은 화면에서 넘친다) */
  .thmonth .thsrch{flex:1 1 auto; min-width:0}
  .thmonth .thsrch input{width:auto; flex:1 1 auto; font-size:16px!important}
  /* 달력은 칸이 좁아 이 화면만 예외로 작은 글자를 쓴다 */
  .cal .cell{min-height:58px; padding:3px 4px; gap:1px}
  .cal .d{font-size:var(--t-xs)}
  .cal .m{font-size:11px; letter-spacing:-.03em}
  .cal .dows span{padding:6px 2px; font-size:var(--t-xs)}
  /* 공휴일 이름은 날짜 아래 줄로 내린다. 칸이 55px 뿐이라 날짜 옆에 붙이면
     ♥ 자리(오른쪽 14px)까지 빼고 20px 남짓 — '추…' 밖에 안 보인다.
     한 줄을 내주면 칸 폭을 다 써서 '추석 연휴'·'대체공휴일'(5자)이 들어간다.
     대개 칸의 min-height(58px) 안에 들어가 줄 높이는 그대로다. */
  .cal .dtop{display:block; padding-right:13px}
  .cal .holn{display:block; font-size:9px; letter-spacing:-.04em}
  .cal .pl{font-size:9px; padding:0 3px}

  .grid2{gap:0}
  .chartbox{padding:10px var(--sp4) 4px}
  .card.pad{padding:13px var(--sp4)}
  /* .card.pad 보다 뒤에 와야 이긴다 (특이도가 같다 — v88 에서 겪은 함정) */
  /* 아래는 바짝 붙인다 — 글칸 밑의 .thbar 는 저장 알림이 잠깐 스치는 자리라
     늘 비어 있는데도 한 줄을 차지해 카드가 길어 보였다. */
  /* v218 — 감사·투두 카드를 줄였다(사용자 결정 A+B): 여백 12/4 → 10/2, 제목 아래 8 → 6, 투두 줄 8 → 6,
     감사 글칸은 한 줄에서 쓰는 만큼 늘어난다(autoGrow). 그리고 접기(.folded = 제목 + 한 줄 요약) */
  .card.thankscard{padding:10px var(--sp4) 2px}
  .thankscard h2{margin-bottom:6px}
  .thankscard textarea{min-height:0; max-height:none; resize:none; overflow:hidden}   /* 폰은 끝없이 늘어난다(autoGrow) — 데스크톱 218px 상한을 푼다 */
  .todocard .tdmain{padding:6px 0}
  .todocard #todoBox{padding-bottom:8px}
  .thankscard .cardfold{display:inline-grid; place-items:center; flex:0 0 auto; width:26px; height:26px; margin:-4px -6px -4px 2px;
    padding:0; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:7px}
  .thankscard .cardfold svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round; transition:transform .15s}
  .thankscard:not(.folded) .cardfold svg{transform:rotate(180deg)}
  .thankscard.folded > :not(h2):not(.cardsum){display:none}
  .thankscard.folded{padding-bottom:10px}
  .thankscard.folded h2{margin-bottom:4px}
  .thankscard.folded .cardsum{display:block; width:100%; text-align:left; border:0; background:transparent; padding:2px 0;
    font:inherit; font-size:var(--t-sm); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
  .kpis{gap:1px}
  .kpi{padding:10px var(--sp4)}
  .kpi dt{font-size:var(--t-xs); margin-bottom:2px}
  .kpi dd{font-size:var(--t-lg); line-height:1.3}
  .kpi dd.lrgoal{font-size:var(--t-sm); line-height:1.45}
  .sect > h2{margin-bottom:8px}

  .modal{width:100%; max-height:92vh}
  /* 목록을 훑는 창(감사일기·투두 전체보기)은 화면을 다 쓴다 — 작은 창으로는 긴 목록을 보기 어렵다.
     머리줄과 바닥 단추는 제자리에 붙여 두고 가운데만 구른다. */
  /* 100vh 를 먼저 적고 100dvh 로 덮는다 — 뒤에 온 쪽이 이긴다. dvh 를 모르는 옛 브라우저는 vh 를 쓴다 */
  .modal.fullm{max-height:none; height:100vh; height:100dvh; border:0; border-radius:0;
    display:flex; flex-direction:column}
  /* 화면 맨 위까지 펴지므로 상태바(노치·다이내믹 아일랜드) 높이만큼 머리줄을 내린다.
     viewport-fit=cover + black-translucent 라 설치 앱(PWA)에서는 창이 상태바 밑까지 깔린다 —
     여백이 없으면 ✕ 가 상태바 뒤에 들어가 눌리지 않는다(아이폰 신고). 설정 창(.sethead)과 같은 처리다. */
  .modal.fullm > header{flex:0 0 auto; position:sticky; top:0; z-index:2; background:var(--surface);
    padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .modal.fullm > .body{flex:1 1 auto; overflow:auto; min-height:0}
  .modal.fullm > footer{flex:0 0 auto; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .scrim:has(.modal.fullm){padding:0; align-items:stretch}
  .modal .body{padding:var(--sp4); gap:10px}
  /* 저장은 한 손으로 누르기 좋게 가로 꽉 차게, 보조 버튼은 그 아래로 */
  .modal footer{position:sticky; bottom:0; flex-direction:column; align-items:stretch; gap:var(--sp2)}
  .modal footer .btn{width:100%; text-align:center; padding:13px var(--sp4); font-size:var(--t-md)}
  .modal footer .spacer{display:none}
  /* 버튼이 둘뿐인 창(날짜 내역 등)은 세로로 쌓지 않고 나란히 — 한 줄이면 손이 덜 간다 */
  .modal footer.tworow{flex-direction:row; align-items:stretch}
  .modal footer.tworow .btn{flex:1 1 0; min-width:0; width:auto}
  .fields{grid-template-columns:1fr 1fr}
  /* 장기로드맵 연도 카드도 화면 끝까지 */
  .lrm{gap:var(--sp4)}
  .lrmsec{gap:0}
  .lrmc{border-radius:0; border-left:0; border-right:0; margin-bottom:-1px}
  .lrmhd{padding:var(--sp2) var(--sp4)}
  .lrmy{font-size:var(--t-lg)}
  .lrmsum{font-size:var(--t-xs)}
  .lrmsum em{font-size:var(--t-sm)}
  .lrmr > span{font-size:var(--t-xs)}
  /* 펼친 연도 카드의 값은 모두 '투자금' 과 같은 크기(--t-sm)로 맞춘다 —
     숫자·%·라이프플랜 글까지 한 눈금으로. 오른쪽 끝도 자로 맞춘다
     (계산값은 글자·여백 0, 입력칸은 input·좌우 7px 이라 그냥 두면 어긋난다).
     ※ 16px 미만 입력칸은 iOS 가 focus 때 화면을 살짝 확대한다 — 크기를 맞추는 쪽을 택했다. */
  .lrmr{min-height:36px}
  .lrmr > b{font-size:var(--t-sm)}
  .lrmr .cell-in{font-size:var(--t-sm)!important; padding-left:0; padding-right:0;
    font-variant-numeric:tabular-nums}
  .lrmr .pctc{gap:2px}
  .lrmr .pctc i{font-size:var(--t-xs)}
  /* 고칠 수 있는 칸 표시(v265 사용자 요청) — 숫자 칸(연저축액 · 수익률 · 비유동자산 · 부동산상승률)은 아주 얇은 밑줄,
     글 칸(라이프플랜 · 머니플랜)은 흰 바탕에 회색 테두리. 계산값(계 · 수익금 · 부동산 · 자본금)에는 아무 표시도 없다 */
  /* 밑줄은 숫자 자리만큼(칸 끝까지 그으면 줄 구분선과 겹쳐 두 줄로 보였다) · 글자 바로 아래 */
  .lrmr .cell-in.amt-in{border:0; border-bottom:.5px solid var(--line-strong); border-radius:0; background:transparent;
    width:9.5em; max-width:100%; padding-top:2px; padding-bottom:1px}
  .lrmr > b > .cell-in.amt-in{display:inline-block}
  .lrmr .pctc input.cell-in{flex:0 0 3.6em; width:3.6em}
  .lrmr .cell-in.amt-in:focus{border-bottom:1px solid var(--accent)}
  .lrmr .cell-in:not(.amt-in){background:var(--surface); border:1px solid var(--line-strong); border-radius:7px;
    padding:4px 8px!important}
  .lrmr .cell-in:not(.amt-in):focus{border-color:var(--accent)}
  /* 구간 판은 조금 더 연하게 — 흰 글 칸과 밑줄이 판 위에서 또렷하게 */
  .lrmg{background:color-mix(in srgb, var(--surface-2) 55%, var(--surface))}
  .toast{bottom:calc(var(--navh) + var(--safe) + 14px); left:14px; right:80px; transform:none; text-align:center}
  .toast.on{transform:none}
}
@media (max-width:400px){
  #setBody .fields{grid-template-columns:1fr}
  .bottomnav button{padding:10px 0 11px}
}
@media (max-width:340px){ .fields{grid-template-columns:1fr} }
/* ---------- 잠금 화면 ---------- */
body.locked{overflow:hidden}
body.locked .wrap, body.locked .bottomnav, body.locked .fab, body.locked .scrim{display:none!important}
/* 잠금이 걸려 있으면 스크립트가 돌기 전에 미리 가린다 — html.prelock 은 <head> 의 짧은 조각이 단다.
   이게 없으면 화면이 한 번 그려진 뒤에 잠금이 떠서, 비밀번호를 묻기 전에 기록이 한순간 보인다.
   잠금 화면 자체(.lock)는 가리지 않는다 — 그건 곧 그 위에 떠야 한다. */
html.prelock body > *:not(.lock){visibility:hidden!important}
html.prelock body{background:var(--paper)}
/* 앱을 떠날 때 화면 가리기(09-editor.js onAppHidden) — 앱 전환기 미리보기에 기록이 보이지 않게.
   잠금 화면까지 전부 가리고 이름만 남긴다. 돌아오면 onAppShown 이 걷는다. */
html.bgcover body > *{visibility:hidden!important}
html.bgcover body{background:var(--paper)}
html.bgcover body::after{content:"Planowa"; position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  visibility:visible; background:var(--paper); color:var(--accent);
  font-family:"Gowun Batang",serif; font-size:24px; font-weight:700; letter-spacing:-.02em}
/* 잠금 화면에도 같은 줄을 둔다 (앱 첫인상) */
.lock .sitefoot{position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  margin:0; border-top:0; padding:0}
.lock{position:fixed; inset:0; z-index:120; background:var(--paper);
  display:grid; place-items:center; padding:24px}
.lockbox{width:min(320px,100%); text-align:center}
.lockbox h1{font-family:"Gowun Batang",serif; font-size:24px; font-weight:700; letter-spacing:-.02em;
  color:var(--accent); margin-bottom:6px}
.lockmsg{font-size:var(--t-sm); color:var(--muted); margin:0 0 22px; min-height:20px; line-height:1.5}
.lockmsg.err{color:var(--expense); font-weight:600}
.lockdots{display:flex; justify-content:center; gap:16px; margin-bottom:30px}
.lockdots i{width:13px; height:13px; border-radius:50%; border:1.5px solid var(--line-strong); background:transparent}
.lockdots i.on{background:var(--accent); border-color:var(--accent)}
.lock.shake .lockdots{animation:lockshake .4s}
@keyframes lockshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
/* 클래스명 주의: `.pad` 는 이미 카드 여백 유틸(.card.pad)로 쓰고 있다. 겹치면 카드가 전부 3열 그리드가 된다. */
/* 빠르게 두 번 누르면 브라우저가 '더블탭 확대' 로 받는다.
   touch-action:manipulation 이 그 제스처만 끈다 (핀치 확대·스크롤은 그대로 살아 있다).
   viewport 의 user-scalable=no 는 접근성을 해치고 iOS 는 무시하므로 쓰지 않는다. */
button, .bottomnav button, .fab, .lockpad button{touch-action:manipulation}
.lockpad{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.lockpad button{height:60px; border:1px solid var(--line); background:var(--surface); border-radius:14px;
  font-size:22px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.lockpad button.alt{font-size:14px; font-family:inherit; color:var(--muted); background:transparent; border-color:transparent}
.lockpad button:active{background:var(--accent-soft); transform:scale(.95)}
/* Face ID 단추 — 칸은 늘 차지하고(0 이 가운데 오게) 켜졌을 때만 보인다 */
.lockpad .lockbio{visibility:hidden; color:var(--ink)}
.lockpad .lockbio.on{visibility:visible}
.lockpad .lockbio svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.locklink{display:block; margin:22px auto 0; border:0; background:transparent;
  color:var(--muted); font-size:var(--t-sm); text-decoration:underline; text-underline-offset:3px}
.locklink:hover{color:var(--ink)}
/* 해제 화면에서는 여러 번 틀리기 전까지 hidden 으로 감춰 둔다
   (showLock/lockSubmit, LOCK_HINT_AFTER 참고). 숨기는 건 맨 위 [hidden] 규칙이 한다. */

/* 가운데 알림 — 모달이 떠 있어도 화면 정중앙에 보인다.
   `.scrim.on ~ .toast` 보다 뒤에, 더 높은 특이도로 둔다. */
.toast.center{
  top:50%; bottom:auto; left:50%; right:auto;
  transform:translate(-50%,-50%) scale(.96);
  max-width:min(320px, calc(100% - 48px));
  text-align:center; line-height:1.5; padding:15px 22px; border-radius:14px; font-weight:500;
  box-shadow:0 12px 40px -8px rgba(0,0,0,.45);
}
.toast.center.on{transform:translate(-50%,-50%) scale(1)}
.scrim.on ~ .toast.center{top:50%; bottom:auto}

/* 저장 완료 초록(.toast.ok)은 v238 에서 없앴다 — 알림은 한 가지 모양(01-core toast) */

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* 글자 크기(v233) — 설정 > 일반에서 크게 · 더 크게를 고르면 html 에 data-text-scale=125 · 150 이 붙는다(01-core applyTextScale).
   125·150 은 단계 이름이고 폰에서 실제로 키우는 비율은 110·120%(v279) — 아래 나눗셈도 1.1 · 1.2. */
   text-size-adjust 가 글자만 키우므로 좁은 칸에 세 개씩 놓인 금액이 '3,4…' 로 잘린다. 그때만 한 줄에 하나씩 놓는다. */
html[data-text-scale] .totals,
html[data-text-scale] .wkkpi{grid-template-columns:minmax(0,1fr)}
html[data-text-scale] .totals > div,
html[data-text-scale] .wkkpi > div{display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp2); flex-wrap:wrap}
html[data-text-scale] .totals dt, html[data-text-scale] .wkkpi dt{margin:0}
html[data-text-scale] .totals dd{overflow:visible}
/* 150% 부터는 위 요약이 화면 절반을 덮는다 — 붙박이를 풀어 함께 스크롤되게 한다 */
html[data-text-scale="150"] .rail-top{position:relative; top:auto}
/* 로고(Planowa)는 글자 크기와 상관없이 그대로(v240 사용자 요청) — 폰은 키운 비율로 나누고, 데스크톱은 화면 확대를 되돌린다(--pz-inv, 01-core applyTextScale) */
html[data-text-scale="125"] .brand h1{font-size:calc(var(--t-xl) / 1.1)}
html[data-text-scale="150"] .brand h1{font-size:calc(var(--t-xl) / 1.2)}
.brand{zoom:var(--pz-inv, 1)}
/* 주 칩은 옆으로 밀려 나가지 않게 줄을 바꾼다 */
html[data-text-scale] .wkpick{flex-wrap:wrap; overflow-x:visible}
/* 글자 크기 고르기 버튼은 지금 크기와 상관없이 늘 같은 모양(v235) — 키운 만큼 나눠 되돌린다. '가' 는 em 이라 함께 따라온다 */
.swatches.tsize{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-text-scale="125"] .tsize .swbtn{font-size:calc(11px / 1.1)}
html[data-text-scale="150"] .tsize .swbtn{font-size:calc(11px / 1.2)}
/* 하단 탭 이름은 글자 크기와 상관없이 그대로(v254 사용자 요청 — 전에는 125% 까지 커졌다). iOS 탭바도 큰 글자에서 라벨을 키우지 않는다.
   키운 비율로 나눠 되돌린다. 탭 아이콘 안 날짜 숫자(.navday)도 같다 */
html[data-text-scale="125"] .bottomnav button{font-size:calc(var(--t-xs) / 1.1)}
html[data-text-scale="150"] .bottomnav button{font-size:calc(var(--t-xs) / 1.2)}
html[data-text-scale="125"] .bottomnav svg .navday{font-size:calc(10px / 1.1)}
html[data-text-scale="150"] .bottomnav svg .navday{font-size:calc(10px / 1.2)}

/* 모바일 작은 글씨 키우기(v255 사용자 요청 — 11~12px 이 흩어져 '정돈이 안 된' 느낌).
   파일 끝에 둬서 앞의 모바일 규칙(스냅 블록 · .kpi dt 등)보다 뒤에서 이긴다. 데스크톱은 그대로.
   * 요약(KPI) 이름·보조 줄은 모든 화면에서 13px — 위 요약(.totals) · 지출 예산 대비(.budget) · 월말·로드맵·머니플랜·장기(.kpi) · 주간(.wkkpi) · 자산(.as-sum)
   * 감사·투두 카드 제목 13px · 일일 목록의 항목 이름 · 자산/시간 13px · 내용 14.5px */
@media (max-width:920px){
  .totals dt, .budget .row, .kpi dt, .kpi .sub, .wkkpi dt, .as-sum dt, .as-sum small{font-size:13px}
  .thankscard h2{font-size:13px}
  .rows .cat, .rows .ttl small{font-size:13px}
  .rows .ttl{font-size:14.5px}
  /* 설정 › 항목 · 자산 목록 줄 간격 좁힘(v271 사용자 요청 — 줄 53px). 줄 위아래 8 → 3px, 번호 칸 36 → 30px
     (글자는 16px 그대로 — 아이폰 확대 방지), ✕ 칸도 같은 높이로 가운데 */
  .itemlist .ilrow{padding-top:3px; padding-bottom:3px; min-height:0}
  /* 번호(노출 순서) 14px(v273) — 입력칸이라 16px 를 0.875배. 보이는 크기가 42 × 30px 가 되게 줄이기 전 크기를 나눠 잡는다 */
  .itemlist .posin{box-sizing:border-box; width:calc(42px / .875); height:calc(30px / .875); padding:0 2px;
    font-size:16px!important; transform:scale(.875); margin:-2.15px -3px}
  .itemlist .btn-ghost{height:30px; align-self:center; margin:0; display:grid; place-items:center; line-height:1}
  /* 자산 항목 설정 창(11-asset openAssetSetup) — 줄 간격 좁힘 · 글자 14px(v273 사용자 요청).
     칸(이름 · 자산/부채 고르기)은 16px 이어야 아이폰이 확대하지 않는다 — 줄째 16px 로 두고 0.875배로 줄여 14px 로 보인다.
     줄 높이를 34px 로 잡고 줄어든 만큼(34 × 0.125) 아래 여백을 당긴다. 이름 칸은 남는 폭을 채운다(전에는 65px 라 '입출금통장' 이 잘렸다) */
  #asSetBody .as-sgh, #asSetBody .as-sil li{width:calc(100% / .875); box-sizing:border-box; height:34px; transform:scale(.875);
    transform-origin:left top; margin-bottom:calc(34px * -.125)}
  #asSetBody .as-sil{gap:2px; margin:6px 0 4px}
  #asSetBody .as-gname, #asSetBody .as-iname, #asSetBody .as-sg select{height:30px; padding:2px 8px; font-size:16px!important}
  #asSetBody .as-gname{flex:1 1 80px} #asSetBody .as-iname{flex:1 1 90px}
  #asSetBody .as-chk{font-size:16px; white-space:nowrap}
  #asSetBody .as-sg .btn-ghost{font-size:15px; padding:3px 6px}
  #asSetBody .as-sgh small, #asSetBody .as-cname{font-size:16px}
  /* 남는 폭은 이름 칸이 갖는다(빈 칸 .spacer 가 먹으면 '입출금통장' 이 잘린다). 합계 · 열 숨기기 줄은 빈 칸이 이름 대신이라 그대로 */
  #asSetBody .as-sg:not(.as-tots) .spacer{display:none}
  #asSetBody .as-add{font-size:14px!important; padding:6px 10px}
  /* 합계 줄 · 오른쪽 열 묶음의 머리 — 제목과 설명을 위아래로 나눈다(v274 사용자 요청 — 한 줄에 나란히 두면 제목이 '합계 / 줄' 로 접혔다).
     칸이 없는 머리라 0.875배 줄이기에서 뺀다 */
  #asSetBody .as-tots > .as-sgh{display:block; width:auto; height:auto; transform:none; margin:0 0 4px}
  #asSetBody .as-tots > .as-sgh b{display:block; font-size:14px}
  #asSetBody .as-tots > .as-sgh .spacer{display:none}
  #asSetBody .as-tots > .as-sgh small{display:block; margin-top:2px; font-size:12.5px; line-height:1.45; color:var(--muted)}
  /* 항목 이름 · 사용 안 함 날짜 줄 14px(v273 — 날짜 줄만 14px 이면 이름(13.5px)보다 커 보였다) */
  .itemlist .ilname{font-size:14px}
  /* 항목 · 자산 아래 추가 줄(구분 고르기 · 이름 칸 · 추가) 14px(v273 사용자 요청).
     칸들은 16px 이어야 아이폰이 확대하지 않는다 — 줄 전체를 16px 로 두고 0.875배로 줄여 14px 로 보인다.
     폭은 줄이기 전 크기를 나눠 잡아 카드 폭을 그대로 채우고, 줄어든 높이만큼 아래 여백을 당긴다 */
  .addrow14{width:calc(100% / .875); transform:scale(.875); transform-origin:left top; margin-bottom:-6px}
  .addrow14 select{flex-basis:calc(102px / .875)}
  .addrow14 .btn{font-size:16px!important}
  /* 구분 이름 14px(v272 사용자 요청) — 고칠 수 있는 입력칸이라 글자는 16px(아이폰 확대 방지) 로 두고 0.875배로 줄여 14px 로 보인다 */
  .itemlist .ilgrp .grpin{font-size:16px!important; transform:scale(.875); transform-origin:left center;
    max-width:calc(110px / .875); margin:-2px 0}
  /* 수입 · 지출 현황 카드 — 이름 · 숫자 14.5px, 줄 사이 9 → 5px(v266 사용자 요청) */
  .rail-bottom .assetlist li{font-size:14.5px}
  .rail-bottom .assetlist ul{gap:5px}
  /* v260 사용자 요청 — 일일 항목 이름이 길면 줄을 바꾸지 않고 … 로 자른다(구분 이름 줄도 같다). 전체 이름은 title */
  .rows .cat{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .rows .cat small{overflow:hidden; text-overflow:ellipsis}
  /* 감사 · 투두 카드 내용과 접었을 때 요약 줄 — 14px(v260 에 15px 로 키웠다가 v262 사용자 요청으로 14px 로 맞춤) */
  .thankscard .thtext, .thankscard textarea, .tdmain, .thankscard .cardsum{font-size:14px!important}
  /* 요약(KPI) 칸은 전부 오른쪽 정렬(v255 사용자 요청) — 금액이 오른쪽 끝에 모여 자릿수가 맞는다 */
  .totals > div, .kpi, .wkkpi > div, .as-sum > div{text-align:right}

  /* v257 사용자 요청 ─────────────────────────────────────────────
     위 앱바(.rail-top)는 그림자 없이 — 붙어 따라올 때 아래 내용과 선으로만 나뉜다 */
  .rail-top{box-shadow:none}
  /* 주간: 위에는 월 이동줄만 — 요약(수입·지출·잔액)과 예산 대비는 본문의 주간 요약이 대신한다 */
  body[data-tab="week"] .rail-top .totals, body[data-tab="week"] .rail-top .budget{display:none}
  /* 달력: 아래 카드(수입·지출 현황 · 오늘의 감사 · 오늘의 투두)는 감춘다 — 달력과 이 달의 감정만 */
  body[data-tab="cal"] .rail-bottom{display:none}
  /* 달력 칸을 세로로 늘리고(58 → 76 → v268 사용자 요청 88), 투두는 하트 아래 '완료/전체'(04-views renderCal 이 1/3 으로 쓴다) */
  .cal .cell{min-height:88px}
  .cal .tdn{position:absolute; top:21px; right:3px; margin:0; font-size:10px; line-height:1.3; padding:0 3px}
  .cal .dtop:has(.tdn) .holn{margin-right:20px}            /* 투두 칸이 있으면 공휴일 이름이 그 자리를 비켜 간다(겹쳐 보였다) */
  /* 수입·지출 금액 두 줄 사이 2px 줄임 */
  .cal .cbot{gap:0}
  .cal .m + .m{margin-top:-2px}
  /* 이 달의 감정 — 둥근 카드 하나(제목 줄 + 감정 칩), 카드 전체가 누르는 자리 */
  .calfoot{margin-top:var(--sp3)}
  .moodsect{padding:0 var(--sp4)}
  .moodsect .moodopen{box-sizing:border-box; width:100%; margin:0; padding:14px 16px; background:var(--surface);
    border:1px solid var(--line); border-radius:14px}      /* button 은 width:auto 로는 줄을 다 채우지 않는다 — 100% 로 */
  .moodsect .moodopen:active{background:var(--surface-2)}
  .mohd b{font-size:13px; color:var(--ink-2)}
  .mohd .cardsub{font-size:12px}
  .mohd .moodmore{font-size:12.5px}

  /* 폰 주간·월말 항목 줄 = 표형 4칸(v258 사용자 결정 — 예산·정산·차액이 한눈에 안 들어왔다).
     항목 | 예산(바로 입력) | 정산(누르면 내역) | 차액. 칸 이름은 목록 맨 위 .t4hd 한 줄(05-settle t4Head). 숫자는 오른쪽 끝을 맞춘다 */
  /* 예산 칸이 가장 넓다 — 입력칸 글자는 16px 이어야 아이폰이 눌렀을 때 화면을 확대하지 않는다(84px 로는 5,600,000 이 잘렸다) */
  .t4hd, .wkrow.t4{display:grid; grid-template-columns:minmax(0,1fr) 98px 80px 82px; gap:4px; align-items:center}
  .t4hd{padding:4px var(--sp4) 6px; font-size:12px; color:var(--muted)}
  .t4hd span:not(:first-child){text-align:right}
  .wkrow.t4{padding:3px var(--sp4); min-height:32px}           /* v259 행간 좁힘(전에는 8px · 40px) */
  .t4 .c-n{font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .t4 .c-n .wboff{display:block; font-size:11px; white-space:normal}
  .t4 .c-b, .t4 .c-a, .t4 .c-v{text-align:right; font-size:13px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:0}
  /* v259 예산 · 정산 · 차액 글자 크기 통일(13px) — 입력칸은 16px(아이폰 확대 방지)로 두고 13/16 로 줄여 보인다.
     오른쪽을 기준으로 줄이고 폭은 그만큼 넓혀 칸을 그대로 채운다 */
  .t4 .c-b input{box-sizing:border-box; width:calc(100% / .8125); transform:scale(.8125); transform-origin:right center;
    display:block; margin:-2px 0 -2px calc(100% - 100% / .8125); padding:3px 6px; letter-spacing:-.03em; text-align:right;
    border:1px solid var(--line); border-radius:7px; background:var(--surface); font-family:inherit; color:var(--ink)}   /* 회색 → 흰 바탕(v273 사용자 요청) */
  .t4 .c-b input:focus{border-color:var(--accent); background:var(--surface); outline:0}
  .t4 .c-b input.auto{color:var(--muted)}
  .t4 .c-a .alink{font-size:13px; font-weight:600; padding:0; margin:0}
  .t4 .c-b b, .t4 .c-a b{font-weight:500; font-size:13px}
  .t4 .c-v{font-size:13px}
  /* 큰 글자(크게 · 더 크게)에서는 한 줄을 두 줄로(v276 사용자 결정 C) — 숫자 칸 폭(98·80·82px)은 고정인데 글자만 커져 숫자가 잘렸다.
     첫 줄은 항목 이름을 줄 폭 그대로, 둘째 줄에 예산 · 정산 · 차액 세 칸을 똑같이 나눈다. 칸 이름 줄은 '항목' 을 빼고 세 칸만 */
  html[data-text-scale] .t4hd, html[data-text-scale] .wkrow.t4{grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:2px}
  html[data-text-scale] .t4hd span:first-child{display:none}
  html[data-text-scale] .wkrow.t4 .c-n{grid-column:1 / -1; white-space:normal}
  html[data-text-scale] .wkrow.t4{padding-top:6px; padding-bottom:6px}
}