:root {
  color-scheme: light;
  --font-display: "Gowun Batang", serif;
  --font-body: "Gowun Dodum", sans-serif;
  --font-data: "IBM Plex Mono", monospace;
  --bg: #f5f1e8;
  --surface: #fffdf8;
  --surface-soft: #eee8dc;
  --text: #25211d;
  --muted: #746c62;
  --faint: #999085;
  --border: #d8cfc2;
  --strong-border: #39322b;
  --accent: #b9402d;
  --accent-strong: #8e2f22;
  --on-accent: #fffaf2;
  --success: #315e4b;
  --success-soft: #e2ece2;
  --warning: #a14d32;
  --warning-soft: #f5e4db;
  --member-one: #bd422e;
  --member-two: #456a91;
  --chart: #b9402d;
  --chart-muted: #c9bcae;
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 12px 38px rgba(68, 52, 37, 0.07);
  --shadow-lg: 0 28px 80px rgba(49, 37, 27, 0.18);
  --scrim: rgba(36, 31, 27, 0.58);
  --max-width: 1120px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 160ms;
  --normal: 240ms;
}

html[data-theme="quiet"] {
  font-size: 17px;
  --font-display: "Hahmlet", serif;
  --font-body: "Gowun Dodum", sans-serif;
  --bg: #efeee8;
  --surface: #faf9f4;
  --surface-soft: #e3e7df;
  --text: #29322d;
  --muted: #59665e;
  --faint: #626f67;
  --border: #c9d1c7;
  --control-border: #748278;
  --strong-border: #35493d;
  --accent: #4f705b;
  --accent-strong: #3b5b49;
  --on-accent: #fbfcf8;
  --success: #456753;
  --success-soft: #dce8dd;
  --warning: #87543e;
  --warning-soft: #f1e3da;
  --member-one: #5d7866;
  --member-two: #806b5f;
  --chart: #4f705b;
  --chart-muted: #aab6aa;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 10px 30px rgba(41, 50, 45, 0.045);
  --shadow-lg: 0 24px 72px rgba(41, 50, 45, 0.18);
  --scrim: rgba(41, 50, 45, 0.54);
}

/* 챱챱 월드 — crayon sticker world with 챱챱이 the baby dino */
html[data-theme="chapchap"] {
  --font-display: "Jua", "Gaegu", sans-serif;
  --font-body: "Gowun Dodum", sans-serif;
  --bg: #5bc4f0;
  --surface: #fffbec;
  --surface-soft: #ffe9a8;
  --text: #3a3330;
  --muted: #6f5b4e;
  --faint: #7d695c;
  --border: #3a3330;
  --strong-border: #3a3330;
  --accent: #ff9d2e;
  --accent-strong: #cf5f16;
  --on-accent: #3a3330;
  --success: #14806e;
  --success-soft: #d9f4ea;
  --warning: #c74a28;
  --warning-soft: #ffe0d3;
  --member-one: #e94d80;
  --member-two: #1e9c92;
  --chart: #ff9d2e;
  --chart-muted: #8edcf7;
  --radius: 24px 19px 26px 18px;
  --radius-sm: 14px 10px 16px 11px;
  --shadow: 0 0 0 4px #fff, 6px 7px 0 4px #3a3330;
  --shadow-lg: 0 0 0 5px #fff, 8px 10px 0 5px #3a3330;
  --scrim: rgba(58, 51, 48, 0.6);
}

/* Pastel Calendar — 종이 위에 번진 수채화 파스텔, 연필 손글씨 캘린더 */
html[data-theme="pastel"] {
  --font-display: "Nanum Pen Script", "Gaegu", cursive;
  --font-body: "Gowun Dodum", sans-serif;
  --bg: #f4f2ea;
  --surface: #fbfaf4;
  --surface-soft: #e9e5d8;
  --text: #4e5257;
  --muted: #767b80;
  --faint: #90959a;
  --border: #e0dbce;
  --strong-border: #b9b3a4;
  --accent: #a9c7e3;
  --accent-strong: #54799c;
  --on-accent: #3c556e;
  --success: #6f9d87;
  --success-soft: #e6eee6;
  --warning: #bd8560;
  --warning-soft: #f2e7da;
  --member-one: #7fa6c9;
  --member-two: #8a8f94;
  --chart: #9dbfdd;
  --chart-muted: #e6e2d5;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 2px 12px rgba(110, 105, 90, 0.07);
  --shadow-lg: 0 18px 50px rgba(90, 95, 100, 0.2);
  --scrim: rgba(95, 100, 105, 0.4);
}

html[data-theme="midnight"] {
  color-scheme: dark;
  --font-display: "IBM Plex Mono", monospace;
  --font-body: "Noto Sans KR", sans-serif;
  --font-data: "IBM Plex Mono", monospace;
  --bg: #050b0e;
  --surface: #091318;
  --surface-soft: #102127;
  --text: #edf6f4;
  --muted: #96aaa8;
  --faint: #627a7b;
  --border: #20383f;
  --strong-border: #76f2d0;
  --accent: #76f2d0;
  --accent-strong: #4ed9b7;
  --on-accent: #04120e;
  --success: #76f2d0;
  --success-soft: #102d28;
  --warning: #ff8d79;
  --warning-soft: #32201e;
  --member-one: #76f2d0;
  --member-two: #6ea8ff;
  --chart: #76f2d0;
  --chart-muted: #29434a;
  --radius: 10px;
  --radius-sm: 5px;
  --shadow: 0 0 0 1px rgba(118, 242, 208, 0.03), 0 18px 52px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 0 50px rgba(74, 219, 181, 0.08), 0 30px 90px rgba(0, 0, 0, 0.45);
  --scrim: rgba(0, 5, 7, 0.78);
}

/* Black Han Sans는 400 단일 웨이트의 초heavy 디스플레이 서체다. 20px 이하에서
   받침 있는 음절의 속공간이 메워져 검은 사각형이 되고(살뜰→살■), strong/h2에
   걸린 합성 볼드가 이를 더 악화시킨다. 큰 제목에만 남기고 소형 텍스트는 본문 서체로 내린다. */
html[data-theme="bauhaus"] :is(.brand strong,
  .section-heading h2,
  .date-group > header h2,
  .wealth-copy h2,
  .report-stats strong){
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* 디스플레이 서체를 쓰는 큰 제목은 합성 볼드를 끄고 원래 웨이트로만 그린다. */
html[data-theme="bauhaus"] :is(.page-heading h1, .mission-copy h2, .report-insight h2, .compact-dialog h2, .entry-dialog h2) {
  font-synthesis-weight: none;
  font-weight: 400;
}

html[data-theme="bauhaus"] {
  --font-display: "Black Han Sans", sans-serif;
  --font-body: "Noto Sans KR", sans-serif;
  --bg: #f2f0e8;
  --surface: #fffefa;
  --surface-soft: #f2cc2f;
  --text: #11110f;
  --muted: #4b4a45;
  --faint: #74736c;
  --border: #11110f;
  --strong-border: #11110f;
  --accent: #df2f26;
  --accent-strong: #b9231d;
  --on-accent: #fff;
  --success: #174da6;
  --success-soft: #dbe5f6;
  --warning: #c62a22;
  --warning-soft: #f6d9d6;
  --member-one: #df2f26;
  --member-two: #174da6;
  --chart: #df2f26;
  --chart-muted: #11110f;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 5px 5px 0 #11110f;
  --shadow-lg: 9px 9px 0 #11110f;
  --scrim: rgba(17, 17, 15, 0.64);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  scroll-behavior: smooth;
}

/* 두 번 탭하면 화면이 확대되는 건 브라우저 기본 동작(double-tap to zoom)이다.
   탭 두 번이 흔한 자리(달력 날짜, 카테고리 칩, 하단 탭)에서 의도치 않게 걸려
   앱이 아니라 웹페이지처럼 읽힌다. manipulation은 더블탭 확대만 끄고
   스크롤과 손가락 두 개 핀치 확대는 그대로 남긴다 — 확대 자체를 막는
   user-scalable=no는 접근성 위반이고 iOS Safari가 무시하기도 해서 쓰지 않는다.

   html에 한 번만 걸어 조상 교집합에 맡기는 방법은 쓰지 않는다. 사파리 버전에
   따라 루트의 touch-action이 자손까지 내려가지 않는 사례가 알려져 있는데,
   헤드리스에서는 더블탭 확대 자체가 재현되지 않아 어느 쪽인지 확인할 길이 없다.
   *는 특이도가 0이라 나중에 특정 요소에 pan-y 같은 걸 따로 줘야 하면
   그 규칙이 그대로 이긴다. */
* {
  touch-action: manipulation;
}

/* 좌우 스크롤 금지: 문서 레벨 가로 오버플로는 body의 overflow-x: hidden으로 막는다.
   html에 overflow-x: clip/hidden을 추가하면 body의 overflow 뷰포트 전파가 끊겨 세로 스크롤이 죽으니 금지.
   넓은 콘텐츠(차트·표)는 자체 컨테이너 안에서 overflow-x: auto로 처리할 것. */
img,
canvas,
video {
  max-width: 100%;
  height: auto;
}

/* hidden 속성은 UA의 display:none으로 동작하는데, 뒤에 오는 같은 특이도의
   display 선언(.form-row{display:grid} 등)이 이를 이겨 요소가 그대로 보인다.
   실제로 계좌 전용 필드가 카드 선택 상태에서 노출되는 버그가 있었다. */
[hidden] {
  display: none !important;
}

/* 한국어는 어절 단위로 끊어야 한다. 없으면 '식비·장 / 보기', '아꼈어 / 요.'처럼
   글자 중간에서 갈라진다.
   overflow-wrap: anywhere는 쓰지 않는다. 금액이 '￦1,284,50 / 0'처럼 숫자 중간에서
   갈라지는 사고가 실제로 났다. 넘칠 위험이 있는 곳은 글자 크기로 해결한다. */
body {
  word-break: keep-all;
}

/* 금액은 어떤 폭에서도 줄바꿈하지 않는다. */
.hero-head div > strong,
.hero-foot strong > span,
.transaction-price,
.member-line > strong,
.member-line-value > strong,
.wealth-copy strong,
.wealth-breakdown strong,
.rank-list b,
.trend-down{
  white-space: nowrap;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  transition: background var(--normal) var(--ease), color var(--normal) var(--ease);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(90, 72, 52, 0.026) 1px, transparent 1px) 0 0 / 100% 32px,
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 25%);
  content: "";
  pointer-events: none;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 10px;
  left: 10px;
  padding: 11px 15px;
  transform: translateY(-150%);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: none;
}

.surface {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.avatar {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
}

.avatar.nayoung {
  background: var(--member-one);
}

.avatar.minjun {
  background: var(--member-two);
}

.avatar.large {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  font-size: 0.84rem;
}

.avatar.empty {
  border: 1px dashed var(--border);
  background: var(--surface-soft);
  color: var(--muted);
}

.avatar.empty svg {
  width: 16px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), filter var(--fast) var(--ease);
}

.primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.secondary-button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.primary-button svg,
.secondary-button svg {
  width: 17px;
}

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.icon-button:hover {
  background: var(--surface-soft);
}

/* Header */

.app-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: grid;
  width: min(calc(100% - 48px), var(--max-width));
  min-height: 76px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin: auto;
}

.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

/* 심볼 마크를 두지 않는다. 6개 테마는 서체부터 다르고(명조·손글씨·모노·헤비),
   그 전부에 동시에 어울리는 도형은 아무 성격이 없어야만 가능하다. 대신 살뜰이라는
   글자가 테마의 display 서체를 그대로 입어 여섯 개의 얼굴을 갖는다.
   챱챱만 예외로 마스코트를 쓴다(assets/chapchap-mark.png). */
.brand-mark {
  display: none;
}

.brand > span:last-child {
  display: grid;
}

.brand strong {
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.1;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.64rem;
}

/* 헤더 아바타 알약(`.ledger-switcher`)과 혼자일 때 붙던 `.avatar-add`가 여기
   있었다. 그 알약이 여는 화면이 하단 탭 `설정`이 되면서 통째로 걷었다.
   `+` 신호는 설정 탭의 점(`.tab-dot`)이 대신한다. */

/* 헤더의 기념일 한 줄. 로고와 월 사이의 빈 자리에 선다 — 아바타 알약이
   설정 탭으로 내려가면서 비어 있던 곳이라 아무것도 밀어내지 않는다.

   **줄이면 줄였지 밀어내지 않는다.** `min-width: 0` + 말줄임이라 이름이 길어도
   월 표시나 `기록하기`를 밀지 않는다. 320px에서는 아예 접는다 — 로고와 월만
   해도 빠듯하고, 같은 값을 설정 화면이 언제나 말한다. */
.header-dday {
  min-width: 0;
  max-width: min(280px, 34vw);
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  justify-self: center;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.month-control {
  display: grid;
  height: 44px;
  grid-template-columns: 38px 72px 38px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.month-control button {
  display: grid;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
}

.month-control button:hover {
  background: var(--surface-soft);
}

.month-control svg {
  width: 15px;
}

.month-control strong {
  text-align: center;
  font-family: var(--font-data);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.main-tabs {
  display: flex;
  width: min(calc(100% - 48px), var(--max-width));
  height: 52px;
  align-items: stretch;
  gap: 34px;
  margin: auto;
}

.main-tabs button {
  position: relative;
  display: inline-flex;
  min-width: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.main-tabs button > svg {
  display: none;
}

.main-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--accent);
  content: "";
  transition: transform var(--normal) var(--ease);
}

.main-tabs button[aria-selected="true"] {
  color: var(--text);
  font-weight: 800;
}

.main-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* 설정 탭의 점 — 혼자일 때만. 헤더 아바타 스택에 붙이던 `+`가 여기로 왔다.
   탭은 아이콘 19px에 라벨 9.6px이라 `+`를 그릴 자리가 없어 점으로 줄였다.

   **강조색(--accent)을 쓰지 않는다.** 이건 알림이 아니라 안내다 — 빨간 점은
   처리해야 할 일이 있다는 뜻이고, 초대는 안 해도 되는 것이다.
   `.tab-dot`은 aria-hidden이라 탭 이름이 `설정 · 함께 쓸 사람 초대`로 바뀐다. */
.main-tabs button {
  position: relative;
}

.tab-dot {
  position: absolute;
  top: 8px;
  right: 50%;
  width: 5px;
  height: 5px;
  margin-right: -14px;
  border-radius: 50%;
  background: var(--muted);
}

/* Page shell */

.app-main {
  width: min(calc(100% - 48px), var(--max-width));
  margin: auto;
  padding: 58px 0 90px;
}

.tab-panel {
  animation: panel-in 260ms var(--ease) both;
}

.tab-panel[hidden] {
  display: none;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.page-heading h1 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.7rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.14;
}

.page-heading h1 em {
  color: var(--accent);
  font-style: normal;
}

.heading-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.8;
  text-align: right;
}

.heading-note strong {
  color: var(--text);
}

.heading-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.heading-side .heading-note {
  margin-bottom: 0;
}

.report-heading-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.page-heading.simple {
  align-items: center;
}

.page-heading.simple h1 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
}

.page-heading.simple > div > p:last-child {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.section-heading h2 {
  margin: 5px 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.section-heading.compact h2 {
  font-size: 1.12rem;
}

.text-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
}

.text-button svg {
  width: 14px;
}

/* Today */

.today-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.78fr);
  gap: 20px;
}

/* 혼자면 함께 카드가 없다. 두 단 그대로 두면 오른쪽이 빈 칸으로 남는다 —
   예전에 이 카드를 감추려다 되돌린 이유가 정확히 그 빈 칸이었다.
   폰에서는 이미 한 단이라 여기서만 접으면 된다. */
.today-layout:has(> #together-card[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.balance-hero {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  padding: 32px;
  background: linear-gradient(135deg, var(--surface) 0 68%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 68%);
}

.balance-hero::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--border) 30%, transparent) 31px 32px);
  content: "";
  opacity: 0.45;
}

.hero-head,
.budget-line,
.hero-foot {
  position: relative;
  z-index: 2;
}

/* 금액과 증감 칩을 한 줄에 나란히 두면, 금액이 nowrap이라 좁은 폭에서 칩을
   카드 밖으로 밀어낸다(quiet 320px에서 여유가 1px까지 줄었고 8자리면 잘린다).
   칩을 라벨 옆으로 올리고 금액에 한 줄을 통째로 준다. 내부 div는 display: contents로
   박스만 없애 기존 테마 선택자(.hero-head div > strong)는 그대로 살린다. */
.hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 12px;
}

.hero-head > div {
  display: contents;
}

.hero-head div > span {
  display: block;
  grid-area: 1 / 1;
  color: var(--muted);
  font-size: 0.74rem;
}

.hero-head > .trend-down {
  grid-area: 1 / 2;
  justify-self: end;
}

.hero-head div > strong {
  display: block;
  grid-area: 2 / 1 / 2 / 3;
  margin-top: 12px;
  font-family: var(--font-data);
  font-size: clamp(2.7rem, 7vw, 5rem);
  letter-spacing: -0.07em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.trend-down {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.68rem;
  font-weight: 700;
}

.trend-down svg {
  width: 14px;
}

.budget-line {
  height: 9px;
  margin-top: 48px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.budget-line > span {
  display: block;
  /* 폭은 app.js가 채운다. 여기 값을 두면 예산을 안 정한 장부에서도 찬다. */
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* 넘겼을 때. **막대는 100%에서 멈추고 색으로 말한다** — 폭으로 말하려면 상자
   밖으로 나가야 하는데, 그러면 얼마나 넘었는지가 아니라 레이아웃이 깨진다.
   넘긴 금액은 바로 위 큰 숫자가 정확히 말한다.

   예산 초과는 사실만 보여주고 감정적인 경고 색은 쓰지 않는다(개인 예산에는
   개인에 선을 긋고 나무라면 감시가 된다). */
.budget-line.is-over > span {
  background: var(--warning);
}

/* 여기 `.budget-line > i`가 있었다 — 이번 달이 몇 % 지났는지를 가리키는 2px
   눈금이다. 뺐다(2026-08-07 사용자 결정). 라벨도 범례도 없어서 무엇을 가리키는지
   읽을 길이 없었고, 실제로 `이건 왜 필요한 거야?`라는 질문을 받았다.
   같은 말을 예산 탭이 문장으로 이미 한다 — `지금 속도라면 월말에 약 ￦N이
   남아요`. 말 없는 선보다 그 문장이 정확하다. */

/* **한 줄에 nowrap 금액을 둘 두지 않는다.**

   예전에는 flex + space-between이라 `예산 ￦2,000,000`과 `￦1,284,500`이 한
   줄에 나란히 있었다. 둘 다 nowrap이라(금액은 절대 안 꺾는다) 320px에서 여유가
   35px밖에 없었고, 예산이 여덟 자리면 그대로 카드 밖으로 밀려난다.
   .hero-head가 이미 겪은 사고이고(위 주석) 같은 처방을 쓴다 — 좁아지면 세로로.

   왼쪽 버튼은 44px 터치 타깃이라 글자가 상자 한가운데 앉는다. 오른쪽은
   `이번 달 쓴 돈` + 금액 두 줄짜리 덩어리라, 밑변을 맞추면 왼쪽 글자만
   13.8px 높이 뜬 채로 남는다(여섯 테마에서 모두 같았다). 가운데로 맞춘다. */
.hero-foot {
  display: grid;
  align-items: center;
  margin-top: 20px;
  gap: 6px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.hero-foot > .hero-budget-start {
  justify-self: start;
}

.hero-foot > strong {
  text-align: right;
}


/* 오늘 한 줄. 이 탭은 `이번 달`을 말하지만 매일 여는 사람이 궁금한 건 오늘이다.
   맥락이지 주인공이 아니라 발치 맨 아래에 muted 한 줄로 둔다.
   데스크톱에서는 발치가 두 열이므로 이 줄만 두 열을 가로지른다. */
.hero-today {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.68rem;
}

/* 예산 화면의 `지금 속도라면 …`이 여기로 왔다. 오늘 줄 바로 아래에 둔다 —
   둘 다 `그래서 지금 어떤가`를 말하는 문장이라 한 덩어리로 읽힌다.
   금액을 굵게 칠하지 않는다. 히어로에 이미 큰 숫자가 있는데 여기까지 강조하면
   무엇을 먼저 볼지가 흐려진다. */
.hero-pace {
  margin-top: 2px;
}

.hero-foot small,
.hero-foot strong > span {
  display: block;
}

.hero-foot small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 400;
}

.hero-foot strong > span {
  margin-top: 2px;
  font-family: var(--font-data);
  font-size: 1.15rem;
}

/* 예산을 안 정했을 때만 `남은 금액` 자리에 선다. 정하고 나면 다시 안 나온다.

   **강조색을 쓰지 않는다.** --accent-strong으로 칠했다가 재보니 pastel 4.37,
   chapchap 3.45로 WCAG AA(4.5)에 미달했다 — 두 테마의 생활비 카드 배경이
   다른 곳과 달라서 미션 격자에서 통과했던 색이 여기서는 떨어진다.
   본문 색 그대로 두고 굵기와 꺾쇠로 누를 수 있다는 걸 알린다. */
.hero-budget-start {
  color: var(--text);
}

.together-card {
  padding: 26px;
}

/* 네 줄(공동 · 각자 개인 · 합계)이 서는 자리. 예전에는 막대들의 margin이
    줄 사이를 벌렸는데, 막대를 걷으면서 여기서 직접 벌린다. */
.member-split {
  display: grid;
  gap: 13px;
  margin-top: 20px;
}

.member-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
}

button.member-line {
  width: 100%;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

button.member-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.member-line-value {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.member-line-value svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.member-line > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-line > div > span:last-child {
  display: grid;
}

.member-line strong {
  font-size: 0.78rem;
}

.member-line > strong,
.member-line-value > strong {
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* 내 예산 — 내 개인 지출 줄 바로 밑에 붙는다(2026-08-08, 예산 화면을 지우면서).

   따로 떨어진 `각자의 예산` 목록이었는데, 그러면 같은 사람의 `쓴 돈`과
   `예산`이 두 카드에 나뉘어 견주려면 눈이 오간다. 한 줄 밑에 두면 붙는다.

   **내 줄에만 선다.** 상대 예산은 내가 정할 수 없다 — 정하게 두면 그건
   함께 정한 선이 아니라 용돈이다.
   **초과를 붉게 칠하지 않는다.** 개인에 선을 긋고 나무라면 감시가 된다.
   진행 막대(.mini-track)는 2026-09-01에 걷었다 — 카드가 말할 것은 하나다. */
/* 들여쓰기는 **왼쪽 여백이 아니라 안쪽 여백**으로 준다. `width: 100%`에
   `margin-left: 40px`을 같이 주면 카드보다 정확히 40px 넓어진다 —
   320px에서 함께 카드가 22px 넘쳤다. 40px은 아바타(32) + 간격(8)이라
   사람 이름과 세로선이 맞는다. */
.person-budget {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  align-items: center;
  /* **손가락 자리는 44px다**(하우스 룰). 글자는 한 줄인데 그것만으로는 17px이라
     누르기 어렵다. 위아래 `.member-split` gap(13px씩)을 음수 마진으로 빌려와
     hit 영역으로 쓴다 — 보이는 모양은 그대로고 눌리는 자리만 넓어진다.
     빌려온 만큼만 넘으므로 아래 사람 줄을 덮지 않는다. */
  min-height: 44px;
  margin: -13px 0;
  padding: 0 0 0 40px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
}

button.person-budget {
  cursor: pointer;
}

.person-budget > span {
  display: block;
  font-family: var(--font-data);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

button.person-budget > span {
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

/* 두 사람의 지출 비율 막대(.member-bar)가 여기 있었다(2026-09-01에 지움).
   카드가 지갑별 네 줄이 되면서 견주는 대상이 사람에서 지갑으로 바뀌었고,
   그러면 두 색으로 가른 막대가 무엇의 비율인지 말할 수 없다. */

/* 공동 줄의 표시. 사람 줄의 아바타와 같은 자리·같은 크기라 세 줄의 이름이
   한 세로선에 맞는다. **색은 안 쓴다** — 지갑은 사람이 아니다. */
.avatar.wallet-mark {
  border-color: var(--surface);
  background: var(--surface-soft);
  color: var(--muted);
}

.avatar.wallet-mark svg {
  width: 15px;
  height: 15px;
}

/* 합계 — 위의 세 줄을 더한 값이라 선 하나로 떼어놓는다. */
.wallet-total {
  margin-top: 3px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.wallet-total > span {
  font-size: 0.78rem;
  font-weight: 700;
}

.wallet-total > strong {
  font-size: 0.82rem;
}

.mission-section {
  margin-top: 20px;
}

.mission-page .mission-section {
  margin-top: 0;
}

.mission-card {
  position: relative;
  display: grid;
  min-height: 150px;
  grid-template-columns: 64px minmax(190px, 1.2fr) minmax(180px, 0.9fr) minmax(210px, 0.9fr);
  align-items: center;
  gap: 22px;
  overflow: hidden;
  padding: 24px 26px;
}

.mission-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.mission-mark svg {
  width: 26px;
  height: 26px;
}

.mission-copy,
.mission-reward {
  position: relative;
  z-index: 1;
}

.mission-copy h2 {
  margin: 7px 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -0.035em;
}

.mission-copy > p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.66rem;
}

.mission-progress {
  position: relative;
  z-index: 1;
  padding: 0 22px;
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.mission-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.62rem;
}

.mission-progress > div:first-child strong {
  color: var(--text);
  font-family: var(--font-data);
  font-size: 0.72rem;
}.mission-progress small {
  display: flex;
  align-items: center;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.56rem;
}

.mission-progress .avatar {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  margin-right: -6px;
  font-size: 0.5rem;
}

.mission-progress .avatar:last-of-type {
  margin-right: 12px;
}

.mission-reward {
  display: grid;
}

.mission-reward > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
}

.mission-reward > span svg {
  width: 15px;
  color: var(--accent);
}

.mission-reward > strong {
  margin-top: 5px;
  font-size: 0.74rem;
}

.mission-reward > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
}

.mission-reward .primary-button {
  /* 46px을 지킨다. 화면에서 가장 많이 눌리는 버튼만 40px로 깎여 있었고
     미디어쿼리도 되돌리지 않아서 어느 폭에서도 44px 규칙을 어겼다. */
  width: 100%;
  padding-inline: 14px;
  font-size: 0.64rem;
}

.mission-reward .primary-button svg {
  width: 15px;
}

.mission-card.is-complete .mission-mark {
  background: var(--success);
}

/* ── 날짜 격자 ────────────────────────────────────────────────────────────
   진행률 막대를 대신한다. 막대는 '얼마나'만 말하지만 격자는 '어느 날'까지 말한다.

   **열이 7개로 고정이다.** 기간이 7일이든 30일이든 세로로만 늘어나므로
   가로로 넘칠 경로가 아예 없다. 30일이면 5행이다.

   **칸은 버튼이 아니다.** 채우는 길은 카드의 큰 버튼 하나뿐이고, 오늘과
   어제만 열린다. 누를 수 있게 생겼는데 안 되는 것보다 안 눌러지게 생긴 게
   낫다. 누를 수 없으니 44px 규칙도 안 걸리고, 그래서 30일이 들어간다. */

.mission-grid {
  display: grid;
  margin-top: 12px;
  gap: 3px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mission-head {
  padding-bottom: 3px;
  color: var(--muted);
  font-size: 0.5rem;
  text-align: center;
}

.mission-cell {
  position: relative;
  display: grid;
  height: 32px;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 0.56rem;
}

/* 시작일 앞의 자리. 요일을 맞추려고 비워둔다 */
.mission-cell.is-blank {
  visibility: hidden;
}

/* **못 채운 날에는 아무 표시도 안 붙인다.** 회색 채움도 X도 빗금도 없다.
   하나라도 붙이면 격자가 감점표가 된다. 지나간 날과 아직 오지 않은 날도
   구분하지 않는다 — 미래 칸에 점선을 깔면 할당량 표시가 된다. */

.mission-cell.is-full {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

/* 한 명만 채운 날. **채운 것 / 테두리만**으로 가른다. 색이 아니라 모양으로
   갈리므로 색각 이상에서도 읽히고, 무엇보다 **숫자가 채움 경계에 걸리지 않아서
   읽힌다** — 반만 채우는 안은 29·30 같은 두 자리가 빨강과 배경에 반씩 걸쳐
   안 읽혔다.

   (이 어휘는 원래 달력 마커에서 가져온 것인데, 달력 쪽은 2026-08-10에 점이
   하나로 줄면서 두 상태가 없어졌다. 여기만 남았다.) */
.mission-cell.is-half {
  border-color: var(--accent);
  color: var(--text);
  font-weight: 700;
}

/* 오늘. 테두리는 `한 명만`이 이미 쓰므로 점으로 표시한다 — 둘을 같은
   테두리로 두면 오늘이 채운 날처럼 보인다. */
/* pastel의 --accent(#a9c7e3)는 연해서 --on-accent를 얹으면 **4.4:1**이 나온다.
   9px 굵은 글씨는 일반 텍스트라 4.5 이상이어야 한다. 테마가 이미 가진
   --accent-strong을 쓴다 — 다른 테마는 건드리지 않는다.

   **격자와 범례를 함께 바꾼다.** 칸만 진하게 하면 범례 네모가 연한 파랑으로
   남아서 같은 것을 다른 색으로 가리키게 된다. 테두리 칸도 연한 파랑으로 두면
   흰 카드 위에서 거의 안 보인다. */
html[data-theme="pastel"] :is(.mission-cell.is-full, .mission-cell.is-half) {
  border-color: var(--accent-strong);
}

html[data-theme="pastel"] .mission-cell.is-full {
  background: var(--accent-strong);
  color: #fff;
}

html[data-theme="pastel"] .mission-legend i {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

html[data-theme="pastel"] .mission-legend i.is-half {
  background: none;
}

.mission-cell.is-today::after {
  position: absolute;
  bottom: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.mission-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0 0;
  gap: 5px 12px;
  color: var(--muted);
  font-size: 0.56rem;
}

.mission-legend i {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  border: 2px solid var(--accent);
  border-radius: 5px;
  vertical-align: -2px;
  background: var(--accent);
}

.mission-legend i.is-half {
  background: none;
}

.mission-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.58rem;
}

.mission-backfill {
  margin-top: 8px;
}

.mission-end {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.58rem;
}

/* ── 접힌 미션 줄 ────────────────────────────────────────────────────────
   펼친 카드는 언제나 하나다. 매일 누를 큰 버튼이 여럿이면 체크리스트 노동이 된다. */

.mission-rows {
  display: grid;
  margin: 12px 0 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.mission-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.mission-row > button.mission-row-open {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.mission-row-title {
  overflow: hidden;
  /* 이게 없으면 긴 제목이 숫자를 밀어낸다. 카드가 overflow:hidden이라
     스크롤 대신 잘려 보인다 */
  min-width: 0;
  flex: 1;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-row-count {
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 0.64rem;
  white-space: nowrap;
}

.mission-row-check {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
}

.mission-row-check[aria-pressed="true"] {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
}

.mission-row-check svg {
  width: 18px;
  height: 18px;
}

.mission-section-label {
  margin: 18px 0 8px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
}



.mission-empty {
  display: grid;
  justify-items: center;
  padding: 40px 24px;
  gap: 8px;
  text-align: center;
}

.mission-empty h2 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.mission-empty > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.66rem;
}

/* 카드 안의 버튼에 여백을 주던 규칙(.mission-empty .primary-button)은
   버튼과 함께 지웠다. 만들기는 떠 있는 +가 맡는다. */

/* ── 지난 미션 ───────────────────────────────────────────────────────────
   1열 목록이다. 두 열로 두면 지난 미션이 없을 때 오른쪽 40%가 빈 채로 남는다. */

.mission-past {
  margin-top: 22px;
}

.mission-past > h2 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.mission-past ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.mission-past li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 14px 16px;
  gap: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 0.68rem;
}

.mission-past li > span {
  color: var(--muted);
  font-size: 0.62rem;
}
/* .budget-empty .primary-button도 같은 이유로 지웠다. */

.wealth-section {
  margin-top: 20px;
}

.wealth-strip {
  display: grid;
  min-height: 142px;
  grid-template-columns: minmax(250px, 1fr) minmax(330px, 1.1fr) auto;
  align-items: center;
  gap: 26px;
  padding: 24px 26px;
}

.wealth-copy {
  display: flex;
  align-items: center;
  gap: 15px;
}

.wealth-mark {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}

.wealth-mark svg {
  width: 22px;
}

.wealth-copy h2 {
  margin: 5px 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.wealth-copy strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-data);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.wealth-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.wealth-breakdown > div {
  display: grid;
  gap: 3px;
  padding: 2px 22px;
}

.wealth-breakdown > div + div {
  border-left: 1px solid var(--border);
}

.wealth-breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.wealth-breakdown span svg {
  width: 14px;
  color: var(--success);
}

.wealth-breakdown strong {
  margin-top: 4px;
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.wealth-strip > .secondary-button {
  white-space: nowrap;
}

.recent-section {
  margin-top: 48px;
}

.transaction-table {
  margin-top: 16px;
  overflow: hidden;
  padding: 0 22px;
}

.transaction-row {
  display: grid;
  min-height: 82px;
  grid-template-columns: 42px minmax(160px, 1fr) 100px 76px minmax(110px, max-content);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
}

.transaction-row:last-child {
  border-bottom: 0;
}

/* 행을 누르면 상세 시트가 열린다. article이라 button의 :focus-visible 규칙이
   안 걸려서 여기서 따로 준다 — 키보드로도 열 수 있어야 한다. */
.transaction-row[role="button"] {
  cursor: pointer;
}

.transaction-row[role="button"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.category-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  color: var(--accent);
}

.category-icon.coffee {
  background: color-mix(in srgb, var(--member-one) 11%, var(--surface));
  color: var(--member-one);
}

.category-icon.train {
  background: color-mix(in srgb, var(--member-two) 11%, var(--surface));
  color: var(--member-two);
}

.category-icon.shopping {
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  color: var(--warning);
}

.category-icon.food {
  background: color-mix(in srgb, var(--member-one) 11%, var(--surface));
  color: var(--member-one);
}

.category-icon.health {
  background: var(--success-soft);
  color: var(--success);
}

.category-icon.home,
.category-icon.edu {
  background: color-mix(in srgb, var(--accent-strong) 10%, var(--surface));
  color: var(--accent-strong);
}

.category-icon.leisure {
  background: color-mix(in srgb, var(--member-two) 11%, var(--surface));
  color: var(--member-two);
}

.category-icon.relation {
  background: color-mix(in srgb, var(--member-one) 16%, var(--surface));
  color: color-mix(in srgb, var(--member-one) 78%, var(--text));
}

.category-icon.etc {
  background: var(--surface-soft);
  color: var(--muted);
}

.category-icon.income,
.category-icon.saving {
  background: var(--success-soft);
  color: var(--success);
}

.category-icon.investment {
  background: color-mix(in srgb, var(--member-two) 13%, var(--surface));
  color: var(--member-two);
}

.category-icon svg {
  width: 18px;
}

.transaction-main {
  display: grid;
}

.transaction-main strong {
  font-size: 0.78rem;
}

.transaction-main span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.62rem;
}

.payer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.65rem;
}

.payer .avatar {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  font-size: 0.55rem;
}

.scope-label {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.58rem;
  font-weight: 700;
}

.scope-label.personal {
  background: var(--surface-soft);
  color: var(--muted);
}

.scope-label.secret {
  background: var(--warning-soft);
  color: var(--warning);
}

.scope-label svg {
  width: 12px;
}

.transaction-price {
  font-family: var(--font-data);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.transaction-price.income,
.transaction-price.saving {
  color: var(--success);
}

.transaction-price.investment {
  color: var(--member-two);
}

/* Calendar */

.today-plans {
  margin-bottom: 28px;
}

/* 하단 고정 탭바와 FAB이 잔액을 덮지 않도록 첫 화면의 세로 리듬을 좁힌다. */
@media (max-width: 1024px) {
  .balance-hero .budget-line {
    margin-top: 26px;
  }

  .today-plans {
    margin: 4px 0 24px;
  }
}

.today-plan-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.calendar-board {
  overflow: hidden;
  padding: 0;
}

.calendar-toolbar {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--border);
}

.calendar-toolbar > div {
  display: grid;
  gap: 4px;
}

.calendar-toolbar span,
.calendar-day-heading > div > span {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.calendar-toolbar h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.035em;
}

/* 점 하나 = 그날 일정 있음. 두 상태(채움/테두리)였던 걸 하나로 줄였다 —
   테두리 점이 붙는 조건이 칸에 금액이 적히는 조건과 같아서, 숫자가 이미
   말하는 것을 부호로 다시 적고 있었다(2026-08-10). 빈 날에도 자리를 비워두는
   건 min-height다. 없으면 점 있는 칸만 아래로 밀려 격자 기준선이 흔들린다. */
.plan-markers {
  display: flex;
  min-height: 7px;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.plan-marker {
  display: block;
  width: 6px;
  height: 6px;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--text);
}

/* 달력은 접지 않는다. 이 화면의 주인공이므로 월 전체를 첫 화면에 놓고,
   날짜를 눌러 일정과 기록을 함께 바꿔 본다. */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 10px 24px 22px;
}

.month-head {
  padding: 8px 0 12px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
}

.month-cell {
  display: grid;
  grid-template-rows: 28px minmax(12px, auto) 7px;
  min-width: 0;
  min-height: 76px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px 0;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  font-family: var(--font-data);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.month-cell.is-empty {
  min-height: 76px;
}

.month-cell:nth-child(n + 15) {
  border-top-color: var(--border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.month-cell:not(.is-selected):hover {
  background: var(--surface-soft);
}

.month-cell:active {
  transform: scale(0.96);
}

.month-cell b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
}

/* 그날 쓴 돈. **￦도 마이너스도 안 붙인다**(app.js dayAmountText의 주석).
   0.58rem은 이미 앱에 있는 크기이고, 바로 위 요일 머리글이 0.62rem이라
   위계가 맞는다. 숫자 서체가 아니라 본문 서체를 쓴다 — 같은 크기에서 더
   좁아서(`123,000`이 39px → 33px) 320px 칸에 여유가 생긴다. */
/* **등폭 숫자를 끈다.** `.month-cell`이 날짜 숫자를 위해 `tabular-nums`를
   걸어두었는데 그게 여기까지 내려온다. 등폭은 비례폭보다 넓어서 `118,000`이
   33px → **44px**이 됐고, 칸 안쪽 38px을 넘겨 `118,00`으로 잘렸다.
   달력의 금액은 세로로 줄맞춤할 일이 없으므로 비례폭이 맞다.

   **`overflow: hidden`을 두지 않는다.** 처음엔 걸어뒀는데 그게 넘침을
   조용히 감춰서 **잘린 숫자가 화면에 남았다** — 잘린 숫자는 틀린 숫자다.
   길이는 dayAmountText가 만들 때 맞추고, 넘치면 검증이 잡게 둔다. */
.day-amount {
  max-width: 100%;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-variant-numeric: proportional-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.day-amount.is-empty {
  visibility: hidden;
}

.month-cell.is-today:not(.is-selected) b {
  border-color: var(--accent);
  color: var(--accent);
}

.month-cell.is-selected {
  border-color: var(--accent);
  border-radius: calc(var(--radius-sm) - 2px);
  background: var(--accent);
  color: var(--on-accent);
}

.month-cell.is-selected :is(.day-amount) {
  color: color-mix(in srgb, var(--on-accent) 78%, transparent);
}

.month-cell.is-selected .plan-marker {
  border-color: var(--on-accent);
  background: var(--on-accent);
}

.calendar-day-detail {
  margin-top: 32px;
  scroll-margin-top: 24px;
}

.calendar-day-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.calendar-day-heading > div {
  display: grid;
  gap: 5px;
}

.calendar-day-heading h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: -0.04em;
}

.calendar-detail-add {
  min-height: 44px;
  gap: 7px;
}

.calendar-detail-add svg {
  width: 15px;
  height: 15px;
}

.calendar-day-columns {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(420px, 1.35fr);
  align-items: start;
  gap: 24px;
}

.calendar-day-section {
  min-width: 0;
}

.calendar-day-section > header {
  display: flex;
  min-height: 36px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.calendar-day-section > header > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.calendar-day-section h3 {
  font-size: 0.82rem;
}

.calendar-day-section > header span {
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 0.6rem;
}

.calendar-day-section > header > .calendar-record-summary,
.calendar-day-section > header > .calendar-spend-summary {
  display: grid;
  gap: 3px;
}

.calendar-record-summary {
  justify-items: start;
}

.calendar-spend-summary {
  justify-items: end;
  text-align: right;
}

.calendar-record-summary > h3,
.calendar-spend-summary > span {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.calendar-record-summary > strong,
.calendar-spend-summary > strong {
  font-family: var(--font-data);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.calendar-record-summary > strong.is-empty,
.calendar-spend-summary > strong.is-empty {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
}

.calendar-day-split {
  max-width: 16.5rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.45;
}

.calendar-add-dialog {
  width: min(420px, calc(100% - 32px));
}

.calendar-add-dialog header > div > span {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.calendar-add-options {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.calendar-add-options > button {
  display: grid;
  min-height: 64px;
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
}

.calendar-add-options > button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.calendar-add-options > button > svg:first-child {
  width: 18px;
  height: 18px;
  justify-self: center;
  color: var(--accent);
}

.calendar-add-options > button > svg:last-child {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.calendar-add-options span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.calendar-add-options strong {
  font-size: 0.76rem;
}

.calendar-add-options small {
  color: var(--muted);
  font-size: 0.6rem;
}

.calendar-day-section .text-button svg {
  width: 14px;
}

.calendar-plan-list {
  display: grid;
  gap: 10px;
}

.calendar-entry-list {
  margin-top: 0;
}

.transaction-row.calendar-preview-row {
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 38%);
  gap: 12px;
  padding-block: 10px;
}

.calendar-preview-row .transaction-main,
.calendar-preview-row .transaction-price {
  min-width: 0;
}

.calendar-preview-row .transaction-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-preview-row .transaction-price {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-history-action {
  display: grid;
  width: 100%;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.calendar-history-action:hover {
  border-color: var(--accent);
  background: var(--surface-soft);
}

.calendar-history-action span {
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 700;
}

.calendar-history-action small {
  color: var(--muted);
  font-size: 0.6rem;
  white-space: nowrap;
}

.calendar-history-action svg {
  width: 14px;
  height: 14px;
}

.calendar-day-empty {
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.calendar-day-empty.is-compact {
  padding: 10px 2px;
  border: 0;
  background: transparent;
  text-align: left;
}

.plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
}

.plan-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.plan-main strong {
  font-size: 0.92rem;
}

.plan-main span {
  color: var(--muted);
  font-size: 0.74rem;
}

.plan-card.is-masked .plan-main strong {
  color: var(--muted);
  font-weight: 500;
}

.plan-record {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.76rem;
}

.plan-scope-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

/* 범위 세그먼트의 legend는 거래 시트에서 스크린리더 전용이지만, 일정 시트에서는
   이 선택이 곧 상대에게 무엇이 보이는지를 정하므로 눈에도 보여야 한다. */
.field-label {
  margin: 24px 0 9px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.field-label + .scope-segment {
  margin-top: 0;
}

.form-row.single {
  grid-template-columns: 1fr;
}

.sheet-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* 일정 시트의 비밀 안내에는 해제일 입력이 없다(거래 시트와 달리 날짜는 일정 자체가 가짐). */
.plan-dialog .secret-note {
  grid-template-columns: 40px 1fr;
}

.save-plan,
.save-method {
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
}

/* History */

.tool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 38px;
}

.search-field {
  display: flex;
  width: min(420px, 100%);
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.search-field svg {
  width: 17px;
  color: var(--muted);
}

.search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.filter-chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.68rem;
}

.filter-chip.is-active {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

.filter-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-select select {
  min-height: 40px;
  padding: 0 32px 0 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  appearance: none;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.filter-select svg {
  position: absolute;
  right: 12px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.filter-select select.is-active {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
}

.filter-select select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filter-select select.is-active + svg {
  color: var(--surface);
}

.history-list {
  display: grid;
  gap: 34px;
}

.history-date-filter {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -22px 0 28px;
  padding: 8px 10px 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  scroll-margin-top: 24px;
}

.history-date-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.history-date-filter > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.history-date-filter > span svg {
  width: 15px;
  flex: 0 0 auto;
  color: var(--accent-strong);
}

.history-date-filter strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.7rem;
}

.history-date-filter button {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.64rem;
}

.history-date-filter button:hover {
  background: var(--surface);
  color: var(--text);
}

.history-date-filter button svg {
  width: 13px;
  height: 13px;
}

.date-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-group > header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
}

.date-group > header span {
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 0.68rem;
}
/* 분류별 예산 카드(.budget-grid · .budget-item · .add-budget)는 걷어냈다
   (2026-08-07). 예산 한 번 정하는 데 총액 하나와 분류 아홉 줄을 채워야 했다.
   `.mini-track`도 2026-09-01에 함께 없앴다 — 마지막으로 쓰던 곳이
   각자의 예산 줄인데, 거기서 막대를 걷으면서 쓰는 데가 없어졌다. */

/* Reports */

.period-tabs {
  display: flex;
  gap: 6px;
}

.period-tabs button {
  min-width: 64px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
}

/* 기록 입력의 선택지와 같은 모양으로 고른 기간을 보인다. */
.period-tabs button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent);
  font-weight: 700;
}

.report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.72fr);
  gap: 18px;
}

.report-chart {
  min-width: 0;
  padding: 28px;
}

.report-layout:has(#report-insight[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.report-chart > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.report-chart-summary {
  min-height: 114px;
  margin: 20px 0 24px;
}

.report-selected-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}

#report-selected-status {
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--surface-soft);
  color: var(--accent-strong);
  font-size: 11px;
}

#report-selected-value {
  display: block;
  font-family: var(--font-data);
  font-size: clamp(25px, 7.5vw, 38px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

#report-change {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.report-chart-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  scroll-snap-type: x proximity;
}

.report-months {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--month-count, 6), minmax(44px, 1fr));
  gap: 4px;
  min-width: calc(var(--month-count, 6) * 48px - 4px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-months::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 133px;
  background: repeating-linear-gradient(to top,
    color-mix(in srgb, var(--border) 55%, transparent) 0 1px,
    transparent 1px 66px);
  pointer-events: none;
}

.report-months > li {
  min-width: 0;
}

.report-month {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 44px;
  flex-direction: column;
  align-items: center;
  padding: 0 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  cursor: pointer;
  scroll-snap-align: end;
}

.report-bar-track {
  display: flex;
  width: 100%;
  height: 132px;
  align-items: flex-end;
  justify-content: center;
}

.report-bar-fill {
  display: block;
  width: 56%;
  max-width: 40px;
  border-radius: 7px 7px 2px 2px;
  background: var(--chart-muted);
  transition: background var(--fast) var(--ease);
}

.report-bar-value {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.report-month-name {
  min-width: 40px;
  margin-top: 4px;
  padding: 6px 7px;
  border-radius: 99px;
  font-size: 13px;
  line-height: 1.5;
}

.report-month[aria-pressed="true"] {
  color: var(--text);
}

.report-month[aria-pressed="true"] .report-bar-fill {
  background: var(--chart);
}

.report-month[aria-pressed="true"] .report-month-name {
  background: var(--surface-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.report-month:hover .report-month-name {
  background: var(--surface-soft);
}

.report-month:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.report-chart-help {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.report-insight {
  position: relative;
  overflow: hidden;
  padding: 30px;
  background: var(--text);
  color: var(--surface);
}

.insight-mark {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.report-insight h2 {
  position: relative;
  z-index: 1;
  margin: 13px 0 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
}

.report-insight h2 em {
  color: color-mix(in srgb, var(--accent) 65%, white);
  font-style: normal;
}

.report-insight > p:last-child {
  position: relative;
  z-index: 1;
  margin: 19px 0 0;
  color: color-mix(in srgb, var(--surface) 65%, transparent);
  font-size: 0.7rem;
  line-height: 1.8;
}

.report-insight > p strong {
  color: var(--surface);
}

.category-rank {
  margin-top: 18px;
  padding: 26px 28px;
}

.rank-list {
  display: grid;
  gap: 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.rank-list li {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 12px;
}

.rank-name {
  min-width: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.rank-track {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  overflow: hidden;
  height: 6px;
  border-radius: 99px;
  background: transparent;
}

.rank-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--chart);
}

.rank-list b {
  justify-self: end;
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}

.report-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.report-stats article {
  padding: 22px;
}

.report-stats span,
.report-stats strong,
.report-stats small {
  display: block;
}

.report-stats span {
  color: var(--muted);
  font-size: 0.63rem;
}

.report-stats strong {
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: 1rem;
}

.report-stats small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.58rem;
}

/* Household */

.household-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.household-layout.is-solo {
  grid-template-columns: minmax(0, 1fr);
}

.members-card,
/* 기념일 카드는 줄이 둘이라 아래를 덜어낸다 — `.setting-row`가 각각
   min-height 86px를 이고 있어서 28px을 그대로 주면 아래만 헐렁해진다. */
.anniversary-card {
  padding-bottom: 6px;
}

/* **설정 화면의 카드 사이는 한 값이다**(2026-08-08).

   `.household-layout`(위 두 장)은 격자 gap 18px로 벌어지는데, 그 아래 카드들은
   각자 margin을 들고 있어서 결제 수단만 18px이고 **테마와 내 계정은 0이었다** —
   두 카드가 서로 맞붙어 한 덩어리로 보였다.
   여기 한 줄로 모아 어디서 카드가 하나 늘거나 순서가 바뀌어도 안 어긋나게 한다. */
#panel-settings > .household-layout ~ section {
  margin-top: 18px;
}

.method-row {
  display: grid;
  min-height: 66px;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--border);
}

.method-row > div {
  display: grid;
  min-width: 0;
}

.method-row strong {
  font-size: 0.78rem;
}

.method-row div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.6rem;
}

.method-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.method-icon svg {
  width: 17px;
  color: var(--muted);
}

.method-remove {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.method-remove svg {
  width: 13px;
}

.method-remove:hover {
  border-color: var(--warning);
  color: var(--warning);
}

/* .avatar에 flex: 0 0 32px가 걸려 있어 높이만 줄이면 32×18 타원이 된다. flex-basis도 함께 덮는다. */
.method-more {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
}

.method-more:hover {
  color: var(--text);
}

/* .avatar에 flex: 0 0 32px가 걸려 있어 높이만 줄이면 32×18 타원이 된다. flex-basis도 함께 덮는다. */
.method-owner .avatar {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  font-size: 0.5rem;
}

.section-heading.compact > span {
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 0.66rem;
}

.member-card {
  display: grid;
  min-height: 82px;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--border);
}

.member-card > div {
  display: grid;
}

.member-card strong {
  font-size: 0.78rem;
}

.member-card div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.6rem;
}

.me-badge {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: 0.58rem;
}

.me-badge {
  display: inline-grid;
  place-items: center;
  background: var(--surface-soft);
}

.member-add {
  display: flex;
  width: 100%;
  min-height: 74px;
  align-items: center;
  gap: 13px;
  padding: 14px 0 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.member-add > svg {
  width: 40px;
  height: 40px;
  padding: 11px;
  border: 1px dashed var(--border);
  border-radius: 50%;
}

.member-add span {
  display: grid;
}

/* `한 명 더 초대하기`·`결제 수단 추가`. 이것도 0.72 / 0.59라, 바로 위
   구성원 줄(0.78 / 0.6)과 한 카드 안에서 크기가 갈렸다. 같은 값으로 맞춘다 —
   덜 중요하다는 건 굵기와 색이 말하지 크기가 말하는 게 아니다. */
.member-add strong {
  color: var(--text);
  font-size: 0.78rem;
}

.member-add small {
  margin-top: 3px;
  font-size: 0.6rem;
}

.setting-row {
  position: relative;
  display: grid;
  min-height: 86px;
  grid-template-columns: 38px 1fr 42px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.setting-row:last-child {
  border-bottom: 0;
}

.setting-row > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--accent);
}

.setting-row > span:first-child svg {
  width: 17px;
}

.setting-row > span:nth-child(2) {
  display: grid;
}

/* 설정 화면의 글자 크기는 **0.78 / 0.6 하나다**(2026-08-08).

   여기만 0.72 / 0.58이었다. 같은 화면에서 `함께 쓰는 사람`·`결제 수단`·
   `내 계정`이 전부 0.78 / 0.6인데 토글 줄과 테마 줄만 작아서, 카드마다
   글자 크기가 다른 것처럼 보였다.

   테마 줄만 키우지 않는다 — 토글과 같은 `.setting-row`라 한쪽만 바꾸면
   바로 옆에서 새 어긋남이 생긴다. */
.setting-row strong {
  font-size: 0.78rem;
}

.setting-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.6rem;
}

.setting-row input {
  position: absolute;
  opacity: 0;
}

.setting-row > i {
  position: relative;
  width: 40px;
  height: 23px;
  border-radius: 99px;
  background: var(--border);
  transition: background var(--normal) var(--ease);
}

.setting-row > i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  content: "";
  transition: transform var(--normal) var(--ease);
}

.setting-row input:focus-visible ~ i {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.setting-row input:checked ~ i {
  background: var(--accent);
}

.setting-row input:checked ~ i::after {
  transform: translateX(17px);
}

/* 화면 분위기 — 우리집의 한 줄. 머리의 팔레트 아이콘이 여기로 왔다.

   껍데기는 .setting-row를 그대로 쓴다. 다른 설정들과 같은 자리 같은 리듬으로
   보여야 하기 때문이다. 다만 이건 켜고 끄는 것이 아니라 **다른 화면을 여는
   것**이라 토글 대신 꺾쇠가 선다. label이 아니라 button이므로 브라우저 기본
   테두리·배경·글꼴을 걷어낸다. */
/* 제목을 붙이면서 옆 카드와 같은 여백을 쓴다. 아래쪽만 덜어낸다 —
   `.setting-row`가 이미 min-height 86px를 이고 있어서 그대로 주면 줄 하나에
   위아래가 너무 넉넉해진다. */
.theme-card {
  padding: 28px 28px 6px;
}

/* 다시 확인하기가 숨겨져 있어도 마지막 설정 행에 구분선을 남기지 않는다. */
#spending-push-card .setting-row {
  border-bottom: 0;
  padding-block: 12px;
}

#spending-push-card .setting-row:has(input:disabled) {
  cursor: default;
}

#spending-push-card input:disabled ~ i {
  opacity: 0.5;
}

button.setting-row {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
}

.setting-go {
  display: grid;
  justify-content: end;
  color: var(--muted);
}

.setting-go svg {
  width: 18px;
}

/* Dialogs */

dialog {
  color: var(--text);
}

dialog::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(6px);
}

dialog[open] {
  animation: dialog-in 280ms var(--ease) both;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.compact-dialog,
.entry-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.compact-dialog {
  padding: 26px;
}

.compact-dialog header,
.entry-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

/* 시트는 뷰포트보다 길어서 스크롤하면 유일한 닫기 수단인 ✕가 화면 밖으로 사라졌다. */
.entry-dialog header {
  position: sticky;
  z-index: 5;
  top: 0;
  margin: calc(var(--sheet-pad-y) * -1) calc(var(--sheet-pad-x) * -1) 0;
  padding: var(--sheet-pad-y) var(--sheet-pad-x) 14px;
  background: var(--surface);
}

.compact-dialog h2,
.entry-dialog h2 {
  margin: 5px 0 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
}

.compact-dialog > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.mission-dialog {
  padding: 0;
}

.mission-dialog form {
  padding: 26px;
}

.mission-dialog form > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.mission-field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.mission-field > span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.mission-field input,
.mission-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.72rem;
}

.date-field-error {
  color: var(--warning);
  font-size: 0.85rem;
  line-height: 1.5;
}

.date-field-error:empty {
  display: none;
}

.date-picker-trigger[aria-invalid="true"] {
  border-color: var(--warning);
}

.mission-field .field-error {
  min-height: 0;
  color: var(--warning);
  font-size: 0.64rem;
  line-height: 1.5;
}

.mission-field .field-error:empty {
  display: none;
}

.mission-field input[aria-invalid="true"] {
  border-color: var(--warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent);
}

/* `.mission-form-row`(기간 | 목표 두 칸)는 걷어냈다. 이제 기간 하나뿐이라
   나란히 놓을 상대가 없다. 좁은 폭에서 한 칸으로 접던 규칙도 함께 지웠다. */

.mission-save {
  width: 100%;
  margin-top: 22px;
}

.theme-options {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.theme-options button {
  display: grid;
  min-height: 62px;
  grid-template-columns: 42px 1fr 20px;
  align-items: center;
  gap: 11px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
}

.theme-options button:hover {
  background: var(--surface-soft);
}

.theme-options button.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.theme-options button > span {
  display: grid;
}

.theme-options strong {
  font-size: 0.72rem;
}

.theme-options small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.58rem;
}

.theme-options button > svg {
  display: none;
  width: 17px;
  color: var(--accent);
}

.theme-options button.is-selected > svg {
  display: block;
}

.theme-swatch {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.42);
  border-radius: 50%;
}

.paper-swatch {
  background: linear-gradient(135deg, #f5f1e8 50%, #b9402d 50%);
}

.quiet-swatch {
  border-radius: 42% 58% 62% 38% / 40% 44% 56% 60%;
  background: linear-gradient(135deg, #efeee8 50%, #4f705b 50%);
}

/* 헤더 마크와 같은 파일을 쓴다. 히어로 일러스트에서 잘라낸 실제 에셋이라
   테마를 고르는 자리에 그 테마의 그림이 그대로 보인다. */
.chapchap-swatch {
  border-width: 2px;
  border-radius: 14px 10px 15px 9px;
  background: url("assets/chapchap-mark.png") center / cover no-repeat, #5bc4f0;
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px #3a3330;
}

.pastel-swatch {
  border-color: #cbc6b8;
  background:
    radial-gradient(circle at 68% 32%, rgba(169, 199, 227, 0.85) 0 30%, transparent 62%),
    radial-gradient(circle at 26% 74%, rgba(169, 199, 227, 0.55) 0 26%, transparent 58%),
    #f4f2ea;
}

.midnight-swatch {
  border-radius: 4px;
  background: linear-gradient(135deg, #050b0e 50%, #76f2d0 50%);
}

.bauhaus-swatch {
  border-radius: 0;
  background: conic-gradient(#df2f26 0 25%, #174da6 25% 50%, #f2cc2f 50% 75%, #f2f0e8 75%);
}

.entry-dialog form {
  --sheet-pad-x: 28px;
  --sheet-pad-y: 28px;
  padding: var(--sheet-pad-y) var(--sheet-pad-x);
}

.sheet-handle {
  display: none;
}

fieldset {
  min-width: 0;
}

.entry-type-segment {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.entry-type-segment legend {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.entry-type-segment input {
  position: absolute;
  opacity: 0;
}

.entry-type-segment label > span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
}

.entry-type-segment svg {
  width: 15px;
}

/* 고른 칸은 어디서나 한 모양이다: 강조색 테두리, 옅은 강조색 바탕, 강조색 글자.
   회색 틀 안에서 고른 칸만 흰색이 되는 방식을 섞어 쓰면 흰 칸이 오히려
   풀린 것처럼 읽힌다 — `개인`을 눌러도 안 눌린 것처럼 보였다. */
:is(.entry-type-segment, .scope-segment, .payer-select, .category-select) input:checked + span {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent);
}

.entry-type-segment input:focus-visible + span,
.scope-segment input:focus-visible + span,
.payer-select input:focus-visible + span,
.category-select input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.scope-segment,
.payer-select,
.category-select {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.scope-segment legend,
.payer-select legend,
.category-select legend,
.amount-field > span,
.memo-field > span {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.scope-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.scope-segment legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.scope-segment input,
.payer-select input,
.category-select input {
  position: absolute;
  opacity: 0;
}

.scope-segment span {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.scope-segment span svg {
  width: 15px;
}

.scope-segment:is(.method-kind, .method-owner) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 끝 네 자리 | 쓰임. 좁은 화면에서도 한 줄을 지켜야 카드↔계좌 전환에 칸이 밀리지 않는다. */
.form-row.method-detail-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.method-detail-row label {
  min-width: 0;
}

/* WebKit은 드롭다운에 min-height를 적용하지 않아 옆 칸보다 낮게 그린다. */
.method-detail-row select {
  height: 44px;
}

.scope-segment input:disabled + span {
  cursor: not-allowed;
  opacity: 0.4;
}

.secret-note {
  display: grid;
  grid-template-columns: 40px 1fr 130px;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
}

.secret-note[hidden] {
  display: none;
}

.secret-note > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--warning);
}

.secret-note > span svg {
  width: 18px;
}

.secret-note > div strong,
.secret-note label > span {
  font-size: 0.65rem;
}

.secret-note > div p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.57rem;
  line-height: 1.55;
}

.secret-note label {
  display: grid;
  gap: 5px;
}

.secret-note input {
  width: 100%;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-data);
  font-size: 0.58rem;
}

.payer-select input:disabled + span {
  cursor: not-allowed;
  opacity: 0.42;
}

.payer-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.payer-select legend {
  grid-column: 1 / -1;
}

.payer-select label > span {
  display: grid;
  min-height: 52px;
  grid-template-columns: 32px 1fr 17px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
}

.payer-select b {
  font-size: 0.68rem;
}

.payer-select label svg {
  display: none;
  width: 16px;
  color: var(--accent);
}

.payer-select input:checked + span svg {
  display: block;
}

.amount-field,
.memo-field {
  display: grid;
  margin-top: 22px;
}

.amount-field > div {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid var(--strong-border);
}

.amount-field b {
  font-family: var(--font-data);
  font-size: 1.5rem;
}

.amount-field input {
  min-width: 0;
  width: 100%;
  height: 60px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-data);
  font-size: 2.2rem;
  font-weight: 600;
}

.amount-field > div:focus-within {
  border-color: var(--accent);
}

.amount-field > small {
  min-height: 17px;
  margin-top: 4px;
  color: var(--warning);
  font-size: 0.62rem;
}

.category-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.category-select[data-entry-type="income"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-select legend {
  grid-column: 1 / -1;
}

.category-select label > span {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
}

.category-select label b {
  font: inherit;
}

.category-select svg {
  width: 15px;
}

.category-select .category-more {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px dashed var(--strong-border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
}

.category-select .category-more svg {
  width: 13px;
  height: 13px;
}

.category-select .category-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 22px;
}

.form-row :is(label, .form-field),
.memo-field {
  display: grid;
  gap: 7px;
}

.form-row :is(label, .form-field) > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.form-row svg {
  width: 14px;
}

.form-row select,
.form-row input,
.memo-field input {
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.68rem;
}

.memo-field > span {
  margin: 0;
}

.memo-field small {
  color: var(--faint);
  font-size: 0.56rem;
  font-weight: 400;
}

.save-entry {
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
}

.invite-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0 20px;
}

.invite-visual .avatar {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
}

.invite-visual > i {
  width: 68px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border) 0 4px, transparent 4px 7px);
}

.invite-dialog > p {
  margin-inline: auto;
  max-width: 360px;
  line-height: 1.7;
  text-align: center;
}

.invite-link {
  display: grid;
  gap: 7px;
  margin-top: 24px;
}

.invite-link > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.invite-link > div {
  display: flex;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.invite-link input {
  min-width: 0;
  flex: 1;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-data);
  font-size: 0.7rem;
}

.invite-link button {
  width: 46px;
  border: 0;
  background: transparent;
}

.invite-link button svg {
  width: 16px;
}

.copy-invite-main {
  width: 100%;
  margin-top: 10px;
}

.toast {
  position: fixed;
  z-index: 1500;
  right: 22px;
  bottom: 22px;
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 8px;
  transform: translateY(calc(100% + 40px));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  /* **안 보이는 토스트가 떠 있는 +를 덮고 있었다.**

     opacity: 0은 안 보이게만 할 뿐 자리는 그대로 차지하고, z-index가 1500이라
     130짜리 +보다 위다. 폰 폭에서는 `bottom: 164px`으로 올라가는데 물러나는
     거리는 `100% + 40px`(=94px)뿐이라, 숨은 토스트가 화면 밖으로 못 나가고
     정확히 + 자리(아래에서 94~150px)에 앉는다. elementFromPoint로 재보니
     세 가지 폭 전부에서 + 한가운데의 최상단 요소가 토스트였다 — 손가락으로는
     +가 눌리지 않는다.

     거리를 늘려 피하지 않는다. 토스트 위치는 폭마다 다르고 앞으로도 바뀐다.
     **읽기만 하는 것은 누름을 받지 않는다**로 못박는다. */
  pointer-events: none;
  transition: transform var(--normal) var(--ease), opacity var(--normal) var(--ease);
}

.toast.is-visible {
  transform: none;
  opacity: 1;
}

.toast > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.toast svg {
  width: 16px;
}

.toast p {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
}

.mobile-add {
  display: none;
}

/* Theme recipes */

html[data-theme="quiet"] body::before {
  background:
    radial-gradient(circle at 84% 8%, rgba(79, 112, 91, 0.07), transparent 29%),
    linear-gradient(180deg, rgba(250, 249, 244, 0.38), transparent 42%);
}

html[data-theme="quiet"] .app-header {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(10px);
}

html[data-theme="quiet"] .balance-hero {
  container-type: inline-size;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-soft) 62%, var(--surface)));
}

html[data-theme="quiet"] .balance-hero::before {
  display: none;
}

/* 실제 금액의 글자 수로 큰 수의 크기만 줄인다. 일반 금액은 기존 강조 크기를 쓴다. */
html[data-theme="quiet"] .hero-head div > strong {
  font-size: min(5rem, calc(100cqi / (var(--amount-length, 10) * 0.55)));
}

html[data-theme="quiet"] body {
  line-height: 1.65;
}

/* 여기 `font-size: 0.72rem`이 같이 있었다. **앱의 모든 `<small>`을 덮었다** —
   `html[data-theme="quiet"] body small`은 (0,1,3)이라 `.setting-row small`(0,1,1)
   같은 컴포넌트 규칙을 전부 이긴다. 그래서 컴포넌트마다 정해둔 0.58·0.59·0.6이
   quiet에서만 아무 뜻이 없었다.

   눈에 띈 방식이 고약했다 — 같은 자리의 부제인데 `<small>`이면 12.24px,
   `<span>`이면 10.2px로 갈렸다(설정 화면에서 `결제 수단`과 `결제 수단 추가`가
   나란히 그랬다). **태그가 뭐냐가 크기를 정하고 있었다.**

   줄 간격만 남긴다. 크기는 각 컴포넌트가 정한다. */
html[data-theme="quiet"] body small {
  line-height: 1.5;
}

html[data-theme="quiet"] :is(.secondary-button,
  .icon-button,
  .month-control,
  .search-field,
  .filter-chip,
  .period-tabs,
  .theme-options button,
  .mission-field input,
  .mission-field select,
  .period-tabs button,
  .entry-type-segment label > span,
  .scope-segment label > span,
  .payer-select label > span,
  .category-select label > span,
  .amount-field > div,
  .form-row select,
  .form-row input,
  .memo-field input,
  .invite-link > div,
  .main-tabs){
  border-color: var(--control-border);
}

html[data-theme="quiet"] .surface {
  box-shadow: var(--shadow);
}

html[data-theme="quiet"] #panel-today > .page-heading {
  align-items: center;
  margin-bottom: 28px;
  padding: 12px 0 12px 24px;
  border-left: 3px solid var(--accent);
}

html[data-theme="quiet"] #panel-today > .page-heading h1 {
  font-size: 48px;
  line-height: 1.2;
}

/* 실제 장부 준비 전에는 금액을 그리지 않는다. 다른 탭으로 이동해도 동일하다. */
html[data-ledger-ready="false"] .tab-panel {
  display: none;
}

.home-title-mobile,
.transaction-context {
  display: none;
}

/* 새 상태/월 선택 동작은 모든 테마에서 쓸 수 있고, 시각 조정은 quiet에 둔다. */
.month-control .month-select {
  width: 100%;
  min-width: 0;
  font-family: var(--font-data);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.ledger-status {
  margin-bottom: 24px;
  padding: 24px;
}

.ledger-status h2 {
  margin: 0 0 10px;
}

.ledger-status p {
  margin: 0 0 20px;
  color: var(--muted);
}

html[data-ledger-ready="true"] .ledger-status {
  padding: 16px 20px;
}

html[data-ledger-ready="true"] .ledger-status h2 {
  font-size: 16px;
}

html[data-ledger-ready="true"] .ledger-status p {
  margin-bottom: 12px;
}

#month-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

#month-form .dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.month-picker-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.month-picker-year strong {
  font-family: var(--font-data);
  font-size: 20px;
}

.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.month-picker-grid button {
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
}

.month-picker-grid button[aria-current] {
  border-color: var(--accent);
}

.month-picker-grid button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.month-picker-grid button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#month-form .month-close {
  font-size: 24px;
  line-height: 1;
}



html[data-theme="quiet"] .header-inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html[data-theme="quiet"] .header-actions {
  grid-column: 3;
}

html[data-theme="quiet"] .month-control {
  height: 46px;
  grid-template-columns: 44px minmax(78px, 1fr) 44px;
}

html[data-theme="quiet"] .month-control button {
  min-height: 44px;
}

html[data-theme="quiet"] .month-control .month-select {
  font-size: 13px;
}

html[data-theme="quiet"] .month-control button:hover {
  background: var(--surface-soft);
}

html[data-theme="quiet"] .month-control button:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

html[data-theme="quiet"] .month-control button:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

html[data-theme="quiet"] :is(#entry-scope-field, #plan-scope-field) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-theme="quiet"] .scope-segment span {
  min-height: 44px;
  font-size: 14px;
}

html[data-theme="quiet"] :is(.field-label, fieldset legend, .amount-field > span,
  .memo-field > span, .form-row label > span, .form-row .form-field > span) {
  font-size: 13px;
}

html[data-theme="quiet"] :is(.form-row input, .form-row select, .memo-field input,
  .secret-note input, .mission-field input, .mission-field select) {
  min-width: 0;
  font-size: 16px;
}

html[data-theme="quiet"] .secret-note input {
  min-height: 44px;
}

html[data-theme="quiet"] :is(.entry-type-segment label > span,
  .category-select label > span, .category-select .category-more) {
  min-height: 44px;
  font-size: 13px;
}

html[data-theme="quiet"] .payer-select b {
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

html[data-theme="quiet"] .payer-select label > span {
  min-height: 48px;
  grid-template-columns: 26px minmax(0, 1fr) 14px;
  gap: 6px;
  padding: 6px 8px;
}

html[data-theme="quiet"] .payer-select .avatar {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

html[data-theme="quiet"] .entry-type-segment {
  margin-top: 12px;
}

html[data-theme="quiet"] :is(.payer-select, .category-select,
  .amount-field, .memo-field, .form-row) {
  margin-top: 14px;
}

html[data-theme="quiet"] .field-label {
  margin: 14px 0 6px;
}

html[data-theme="quiet"] .amount-field > small:empty {
  min-height: 0;
  margin: 0;
}

/* 저장 버튼은 폼의 스크롤 영역 안에 둬서 화면 키보드가 떠도 시트와 함께 줄어든다.
   마지막 입력칸은 저장 영역의 높이만큼 스크롤 여백을 확보한다. */
html[data-theme="quiet"] :is(#entry-dialog, #plan-dialog, #method-dialog, #mission-dialog) {
  inset-block: max(0px, calc(100dvh - var(--sheet-viewport-height, 100dvh) - var(--sheet-bottom-inset, 0px))) var(--sheet-bottom-inset, 0px);
  max-height: calc(var(--sheet-viewport-height, 100dvh) - 32px);
  overflow: hidden;
}

html[data-theme="quiet"] :is(#entry-form, #plan-form, #method-form, #mission-form) {
  max-height: calc(var(--sheet-viewport-height, 100dvh) - 34px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 0;
  scroll-padding-top: 88px;
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* 폼 스크롤 시 sticky 기준에 포함되는 위 패딩만큼 보정한다.
   제목 배경이 시트 상단까지 닿아 이전 내용이 그 위로 비치지 않는다. */
html[data-theme="quiet"] :is(#entry-form, #plan-form, #method-form) > header {
  top: calc(var(--sheet-pad-y) * -1);
}

html[data-theme="quiet"] .entry-savebar {
  position: sticky;
  z-index: 6;
  bottom: 0;
  margin: 14px calc(var(--sheet-pad-x) * -1) 0;
  padding: 12px var(--sheet-pad-x) max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

html[data-theme="quiet"] .entry-savebar > .primary-button {
  min-height: 50px;
  margin: 0;
  font-size: 15px;
}

/* 예산·날짜 시트도 입력 시트와 같은 visual viewport를 따른다. 키보드가 올라와도
   저장·선택 버튼이 키보드 아래로 밀리지 않는다. */
html[data-theme="quiet"] :is(#budget-dialog, #anniversary-dialog, #date-picker-dialog) {
  inset-block: max(0px, calc(100dvh - var(--sheet-viewport-height, 100dvh) - var(--sheet-bottom-inset, 0px))) var(--sheet-bottom-inset, 0px);
  max-height: calc(var(--sheet-viewport-height, 100dvh) - 12px);
  overflow: hidden;
}

html[data-theme="quiet"] :is(#budget-form, #budget-change-form, #anniversary-form, #date-picker-form) {
  max-height: calc(var(--sheet-viewport-height, 100dvh) - 12px);
  overflow: auto;
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
}


.date-picker-trigger,
.method-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.date-picker-trigger::after,
.method-picker-trigger::after { content: "⌄"; color: var(--muted); flex-shrink: 0; }
.date-picker-trigger.is-empty,
.method-picker-trigger.is-empty { color: var(--muted); }
.form-row .form-field { min-width: 0; }
.method-picker-trigger { min-width: 0; gap: 12px; }
.method-picker-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 기록 폼의 값은 유지하고, 수단 선택만 별도의 작은 시트에서 처리한다. */
.compact-dialog.method-picker-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: min(560px, calc(var(--sheet-viewport-height, 100dvh) - 24px));
  inset-block: max(0px, calc(100dvh - var(--sheet-viewport-height, 100dvh) - var(--sheet-bottom-inset, 0px))) var(--sheet-bottom-inset, 0px);
  padding: 20px;
  overflow: hidden;
  color: var(--text);
}
.method-picker-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.method-picker-dialog header { align-items: center; gap: 12px; padding-bottom: 16px; }
.method-picker-dialog h2 { margin: 0; font-size: 1.2rem; }
.method-picker-dialog .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
.method-picker-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 3px; }
.method-picker-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 14px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
}
.method-picker-option + .method-picker-option { border-top: 1px solid var(--border); }
.method-picker-option > span { overflow-wrap: anywhere; }
.method-picker-icon { width: 22px; height: 22px; color: var(--muted); }
.method-picker-check { width: 20px; height: 20px; visibility: hidden; color: var(--accent-strong); }
.method-picker-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-radius: var(--radius-sm); }
.method-picker-option[aria-selected="true"] .method-picker-check { visibility: visible; }
.method-picker-option:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; border-radius: var(--radius-sm); }
.method-picker-dialog > p { margin: 0; padding: 20px 8px; font-size: 15px; }
.method-picker-dialog footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.method-picker-list[hidden] ~ footer { border-top: 0; }
#method-picker-add {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 10px 15px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-strong);
  font: inherit;
  font-size: 16px;
  text-align: left;
}
#method-picker-add svg { flex-shrink: 0; }

@media (max-width: 600px) {
  .compact-dialog.method-picker-dialog {
    width: 100%;
    max-height: min(560px, calc(var(--sheet-viewport-height, 100dvh) - 12px));
    margin: auto 0 0;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom));
    border-radius: var(--radius) var(--radius) 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}
.date-picker-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.date-picker-year strong {
  font-family: var(--font-data);
  font-size: 1.05rem;
  text-align: center;
}

.date-picker-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.date-picker-month-nav[hidden],
#date-picker-day-cal[hidden],
#date-picker-month-panel[hidden] {
  display: none;
}

.date-picker-period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-family: var(--font-data);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.date-picker-period svg {
  width: 16px;
  height: 16px;
}

.date-picker-period:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.date-picker-year .icon-button,
.date-picker-month-nav .icon-button {
  width: 40px;
  height: 40px;
}

.date-picker-year .icon-button:disabled,
.date-picker-month-nav .icon-button:disabled {
  opacity: 0.35;
}

#date-picker-day-cal,
#date-picker-month-panel {
  min-height: 312px;
}

#date-picker-months {
  margin-top: 12px;
}

.date-picker-weekdays, .date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.date-picker-weekdays { margin-top: 8px; color: var(--muted); font-size: .75rem; text-align: center; }
.date-picker-grid {
  margin-top: 8px;
  grid-template-rows: repeat(6, minmax(42px, auto));
}
.date-picker-grid > span, .date-picker-grid > button { min-height: 42px; }
.date-picker-grid > span { display: grid; place-items: center; }
.date-picker-grid > button { border: 0; border-radius: 50%; background: transparent; color: var(--text); font: inherit; }
.date-picker-grid > button:hover, .date-picker-grid > button:focus-visible { background: var(--surface-soft); outline: 2px solid var(--accent); outline-offset: 1px; }
.date-picker-grid > button[aria-selected="true"] { background: var(--accent); color: var(--surface); }
.date-picker-grid > button.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.date-picker-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }

html[data-theme="quiet"] :is(.transaction-main strong, .history-empty) {
  font-size: 15px;
}

html[data-theme="quiet"] .transaction-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-theme="quiet"] .member-line > div {
  min-width: 0;
  max-width: 100%;
}

html[data-theme="quiet"] .member-line > div > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-theme="quiet"] :is(.transaction-main > span, .filter-chip, .filter-select select,
  .setting-row small, .member-card small, .hero-foot small, .hero-today,
  .sheet-note, .plan-scope-note, .hide-toggle small, .secret-note > div p,
  .date-group > header span, .history-date-filter strong, .history-date-filter button) {
  font-size: 13px;
}

html[data-theme="quiet"] .filter-select select {
  min-height: 44px;
}

html[data-theme="quiet"] :is(.transaction-price, .rank-name, .rank-list b, .text-button) {
  font-size: 14px;
}

html[data-theme="quiet"] .ledger-status {
  margin-top: 12px;
  padding: 32px 24px;
  text-align: center;
}

html[data-theme="quiet"] .ledger-status h2 {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.4;
}

html[data-theme="quiet"] .ledger-status p {
  font-size: 15px;
  line-height: 1.7;
}

html[data-theme="quiet"] .ledger-status button {
  min-height: 48px;
  font-size: 15px;
}

html[data-theme="quiet"][data-ledger-ready="true"] .ledger-status {
  margin-top: 0;
  padding: 16px 20px;
  text-align: left;
}

html[data-theme="quiet"][data-ledger-ready="true"] .ledger-status h2 {
  font-family: var(--font-body);
  font-size: 16px;
}

html[data-theme="quiet"] .today-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

html[data-theme="quiet"] .balance-hero,
html[data-theme="quiet"] .together-card {
  min-height: 330px;
  padding: 34px;
}

html[data-theme="quiet"] .together-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: none;
}

/* 데스크톱에서 이 카드는 옆의 생활비 카드와 키를 맞춘다(min-height: 330px).
   줄이 넷으로 줄면서 제목과 첫 줄 사이에 구멍이 생겨서, 남는 높이를 줄
   사이로 고르게 나눈다. 폰에서는 min-height가 auto라 남는 높이가 없다. */
html[data-theme="quiet"] .together-card > .member-split {
  flex: 1;
  align-content: space-between;
}

html[data-theme="quiet"] .wealth-strip {
  padding-block: 30px;
  box-shadow: none;
}

@media (min-width: 841px) {
  html[data-theme="quiet"] .wealth-strip {
    grid-template-columns: minmax(250px, 1.1fr) minmax(330px, 1.4fr) auto;
  }
}

@media (max-width: 1024px) {
  html[data-theme="quiet"] .tool-row {
    display: block;
  }

  html[data-theme="quiet"] .search-field {
    width: 100%;
  }

  html[data-theme="quiet"] .filter-group {
    max-width: 100%;
    min-width: 0;
    margin-top: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html[data-theme="quiet"] .filter-chip {
    flex: 0 0 auto;
  }
}

html[data-theme="chapchap"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -10 132 76'%3E%3Cpath d='M22 58 Q4 58 4 42 Q4 28 18 26 Q20 8 40 8 Q48 -6 66 0 Q84 -6 92 8 Q112 8 114 26 Q128 28 128 42 Q128 58 110 58 Z' fill='%23fdf6e6' stroke='%233a3330' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E")
      98% 12% / 92px no-repeat fixed,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -10 132 76'%3E%3Cpath d='M22 58 Q4 58 4 42 Q4 28 18 26 Q20 8 40 8 Q48 -6 66 0 Q84 -6 92 8 Q112 8 114 26 Q128 28 128 42 Q128 58 110 58 Z' fill='%23fdf6e6' stroke='%233a3330' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E")
      1% 76% / 68px no-repeat fixed,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -12 64 54'%3E%3Cpath d='M0 12 C0 4 -6 -4 -14 -4 C-22 -4 -26 2 -26 8 C-26 18 -12 26 0 36 C12 26 26 18 26 8 C26 2 22 -4 14 -4 C6 -4 0 4 0 12 Z' fill='%23f2648c' stroke='%233a3330' stroke-width='5' stroke-linejoin='round' transform='rotate(-12)'/%3E%3C/svg%3E")
      3% 28% / 34px no-repeat fixed,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 60 60'%3E%3Cpath d='M0 -22 L5.3 -7.3 L20.9 -6.8 L8.6 2.8 L17.8 12.9 L0 9 L-17.8 12.9 L-8.6 2.8 L-20.9 -6.8 L-5.3 -7.3 Z' fill='%23ffd23f' stroke='%233a3330' stroke-width='5' stroke-linejoin='round' transform='rotate(14)'/%3E%3C/svg%3E")
      97% 58% / 40px no-repeat fixed,
    repeating-linear-gradient(167deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 7px) fixed,
    var(--bg);
}

html[data-theme="chapchap"] .app-header {
  border-bottom: 3px solid var(--strong-border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 3px 0 #fff;
  backdrop-filter: blur(10px);
}

@media (min-width: 1025px) {
  html[data-theme="chapchap"] .main-tabs {
    gap: 12px;
  }

  html[data-theme="chapchap"] .main-tabs button {
    min-width: 62px;
    padding: 0 14px;
    margin-block: 6px;
    border: 2px solid transparent;
    border-radius: 14px 10px 16px 9px;
    font-weight: 700;
  }

  html[data-theme="chapchap"] .main-tabs button::after {
    display: none;
  }

  html[data-theme="chapchap"] .main-tabs button[aria-selected="true"] {
    border-color: var(--strong-border);
    background: #ffd23f;
    box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
  }
}

html[data-theme="chapchap"] .surface,
html[data-theme="chapchap"] .compact-dialog,
html[data-theme="chapchap"] .entry-dialog {
  border-width: 3px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 챱챱이는 손으로 다시 그리지 않고 히어로 일러스트(assets/chapchap-hero.webp)에서
   머리만 잘라 쓴다. 같은 원본이라 크레용 질감과 색이 히어로와 어긋나지 않는다. */
html[data-theme="chapchap"] .brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: url("assets/chapchap-mark.png") center / cover no-repeat;
  box-shadow: none;
}

html[data-theme="chapchap"] .brand-mark::before,
html[data-theme="chapchap"] .brand-mark::after {
  content: none;
}

html[data-theme="chapchap"] #panel-today > .page-heading {
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  aspect-ratio: 1915 / 821;
  overflow: hidden;
  padding: 32px;
  border: 3px solid var(--strong-border);
  border-radius: 28px 21px 31px 19px;
  background-color: var(--bg);
  background-image: url("assets/chapchap-hero.webp");
  background-position: 65% bottom;
  background-size: cover;
  box-shadow: 0 0 0 5px #fff, 8px 9px 0 5px var(--strong-border);
}

html[data-theme="chapchap"] #panel-today > .page-heading::before {
  display: none;
}

html[data-theme="chapchap"] #panel-today > .page-heading::after {
  display: none;
}

/* 641px 이상에서는 aspect-ratio(1915/821)가 원본 비율을 유지해 일러스트 전체가
   보인다. 640px 이하 폰 화면은 cover 크롭 시 인물이 잘려나가므로 아래
   @media (max-width: 640px) 블록에서 세로 쌓기 레이아웃으로 전환한다. */

html[data-theme="chapchap"] #panel-today > .page-heading > * {
  position: relative;
  z-index: 1;
}

html[data-theme="chapchap"] #panel-today > .page-heading > div:first-child {
  width: min(470px, 52%);
  padding: 18px 22px 20px;
  transform: rotate(-1deg);
  border: 3px solid var(--strong-border);
  border-radius: 23px 17px 21px 15px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 0 0 5px #fff, 5px 6px 0 5px var(--strong-border);
}

html[data-theme="chapchap"] #panel-today > .page-heading h1 {
  margin-top: 5px;
  font-size: clamp(2.3rem, 4.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

html[data-theme="chapchap"] #panel-today > .page-heading h1 em {
  color: var(--accent-strong);
}

html[data-theme="chapchap"] #panel-today > .page-heading .heading-side {
  position: absolute;
  bottom: 28px;
  left: 32px;
  width: min(350px, 46%);
  justify-items: start;
  padding: 13px 16px;
  transform: rotate(0.7deg);
  border: 3px solid var(--strong-border);
  border-radius: 15px 21px 14px 19px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 0 0 4px #fff, 4px 5px 0 4px var(--strong-border);
}

html[data-theme="chapchap"] #panel-today > .page-heading .heading-note {
  color: var(--text);
  text-align: left;
}

html[data-theme="chapchap"] #panel-today > .page-heading .text-button {
  min-height: 36px;
  padding-inline: 10px;
  border: 2px solid var(--strong-border);
  border-radius: 12px 9px 13px 8px;
  background: #ffd32f;
}

html[data-theme="chapchap"] :is(button, input, select, a):focus-visible {
  outline-color: var(--strong-border);
}

html[data-theme="chapchap"] button:active {
  transform: translate(2px, 2px);
}

html[data-theme="chapchap"] :is(.primary-button, .secondary-button) {
  border: 3px solid var(--strong-border);
  border-radius: 15px 11px 17px 10px;
  box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--strong-border);
}

html[data-theme="chapchap"] :is(
  .category-icon,
  .mission-mark,
  .avatar,
  .trend-down,
  .scope-label,
  .insight-mark
) {
  border: 2px solid var(--strong-border);
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
}

html[data-theme="chapchap"] .today-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

html[data-theme="chapchap"] .balance-hero {
  min-height: 330px;
  border-radius: 28px 20px 31px 18px;
  background:
    repeating-linear-gradient(168deg, rgba(37, 35, 47, 0.035) 0 1px, transparent 1px 5px),
    #fff0a6;
}

/* 스티커 원(87% 18%)이 6.3% 칩과 정확히 겹쳐 잘린 얼룩처럼 보였다. 질감만 남긴다. */
html[data-theme="chapchap"] .balance-hero::before {
  background: repeating-linear-gradient(24deg, transparent 0 16px, rgba(255, 157, 46, 0.12) 16px 18px);
  opacity: 1;
}

html[data-theme="chapchap"] .together-card {
  min-height: 330px;
  border-radius: 21px 30px 18px 27px;
  background:
    repeating-linear-gradient(14deg, rgba(8, 115, 106, 0.035) 0 1px, transparent 1px 6px),
    #d4f1e7;
}

/* `.hero-foot`는 진짜 상자라 padding이 맞다. **막대 셋은 아니었다.**

   막대는 높이가 7~9px로 고정인데 전역이 `box-sizing: border-box`라
   `padding: 10px`이 **내용 상자를 0으로 찌그러뜨렸다.** 안쪽 span의 실제 높이를
   재보니 셋 다 0이었다 — chapchap이 기본 테마인데 오늘 화면의 예산 막대도,
   둘의 비교 막대도, 각자의 예산 막대도 전부 빈 점선 상자로만 보이고 있었다.

   눈으로는 `chapchap이라 원래 이렇게 생겼나 보다`로 읽혀서 안 걸렸다.
   막대는 padding 대신 높이를 키운다. */
html[data-theme="chapchap"] .hero-foot {
  padding: 10px 12px;
  border: 2px dashed var(--strong-border);
  border-radius: 13px 9px 15px 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

html[data-theme="chapchap"] .budget-line {
  height: 15px;
  border: 2px dashed var(--strong-border);
  border-radius: 13px 9px 15px 8px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

html[data-theme="chapchap"] .wealth-strip {
  grid-template-columns: minmax(220px, 0.85fr) minmax(330px, 1.15fr);
  border-radius: 29px 19px 24px 17px;
  background:
    repeating-linear-gradient(170deg, rgba(37, 35, 47, 0.025) 0 1px, transparent 1px 5px),
    var(--surface);
}

html[data-theme="chapchap"] .wealth-strip > .secondary-button {
  grid-column: 1 / -1;
  justify-self: end;
}

html[data-theme="chapchap"] .wealth-mark {
  position: relative;
  border: 3px solid var(--strong-border);
  border-radius: 48% 52% 45% 55%;
  background: #ffd32f;
  color: var(--strong-border);
  box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--strong-border);
}

html[data-theme="chapchap"] .wealth-mark svg {
  display: none;
}

html[data-theme="chapchap"] .wealth-mark::before {
  position: absolute;
  top: 18px;
  left: 13px;
  width: 5px;
  height: 6px;
  border-radius: 50%;
  background: var(--strong-border);
  box-shadow: 19px 0 var(--strong-border);
  content: "";
}

html[data-theme="chapchap"] .wealth-mark::after {
  position: absolute;
  bottom: 10px;
  left: 18px;
  width: 14px;
  height: 8px;
  border-bottom: 2px solid var(--strong-border);
  border-radius: 0 0 50% 50%;
  content: "";
}

html[data-theme="chapchap"] .report-insight {
  border-color: var(--strong-border);
  background:
    repeating-linear-gradient(165deg, rgba(37, 35, 47, 0.035) 0 1px, transparent 1px 6px),
    #76d2c5;
  color: var(--text);
}

html[data-theme="chapchap"] .report-insight > p:last-child {
  color: var(--text);
}

html[data-theme="chapchap"] .report-insight h2 em {
  color: var(--accent-strong);
}

html[data-theme="chapchap"] .report-insight > p strong {
  color: var(--text);
}

/* Pastel Calendar: 종이 질감 + 수채 얼룩 + 연필 선 */

html[data-theme="pastel"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E")
      repeat fixed,
    radial-gradient(42% 30% at 6% 4%, rgba(169, 199, 227, 0.55), transparent 68%) fixed,
    radial-gradient(36% 26% at 97% 16%, rgba(183, 209, 232, 0.5), transparent 70%) fixed,
    radial-gradient(30% 22% at 55% 38%, rgba(240, 234, 216, 0.7), transparent 74%) fixed,
    radial-gradient(46% 30% at 12% 80%, rgba(174, 203, 229, 0.45), transparent 70%) fixed,
    radial-gradient(40% 28% at 88% 90%, rgba(186, 211, 233, 0.5), transparent 70%) fixed,
    #f4f2ea;
}

html[data-theme="pastel"] .app-header {
  border-bottom: 1px solid var(--border);
  background: rgba(244, 242, 234, 0.82);
}

html[data-theme="pastel"] :is(button, input, select, a):focus-visible {
  outline-color: var(--accent-strong);
}

html[data-theme="pastel"] .surface,
html[data-theme="pastel"] .compact-dialog,
html[data-theme="pastel"] .entry-dialog {
  border-color: var(--border);
  border-radius: 21px 24px 20px 23px;
}

@media (min-width: 1025px) {
  html[data-theme="pastel"] .main-tabs {
    gap: 10px;
  }

  html[data-theme="pastel"] .main-tabs button {
    padding: 0 15px;
    margin-block: 7px;
    border: 2px solid transparent;
    border-radius: 999px;
  }

  html[data-theme="pastel"] .main-tabs button::after {
    display: none;
  }

  html[data-theme="pastel"] .main-tabs button[aria-selected="true"] {
    border-color: rgba(127, 166, 201, 0.75);
    border-radius: 49% 51% 46% 54% / 62% 48% 58% 44%;
    background: transparent;
    color: var(--text);
    transform: rotate(-1.6deg);
  }
}

html[data-theme="pastel"] :is(.primary-button, .secondary-button, .text-button, .filter-chip, .filter-select select, .icon-button) {
  border-radius: 999px;
}

html[data-theme="pastel"] .primary-button {
  border: 0;
  background: linear-gradient(180deg, #bed6ea, #a5c5e1);
  color: var(--on-accent);
  box-shadow: 0 4px 14px rgba(140, 160, 180, 0.3);
}

html[data-theme="pastel"] .secondary-button {
  border: 1px solid var(--strong-border);
  background: transparent;
}

html[data-theme="pastel"] .page-heading h1 {
  font-size: clamp(3.2rem, 7vw, 5.4rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

html[data-theme="pastel"] .page-heading.simple h1 {
  font-size: clamp(3rem, 5vw, 4.4rem);
}

html[data-theme="pastel"] .page-heading h1 em {
  color: var(--accent-strong);
}

html[data-theme="pastel"] .balance-hero {
  background:
    radial-gradient(60% 70% at 92% 8%, rgba(169, 199, 227, 0.3), transparent 70%),
    var(--surface);
}

html[data-theme="pastel"] .balance-hero::before {
  background: none;
}

html[data-theme="pastel"] .budget-line {
  height: 8px;
  border-radius: 999px;
  background: var(--chart-muted);
}

html[data-theme="pastel"] .date-group > header h2 {
  font-size: 1.5rem;
}

html[data-theme="pastel"] .brand strong {
  font-size: 1.6rem;
  line-height: 1;
}

html[data-theme="pastel"] .section-heading h2 {
  font-size: 1.75rem;
  font-weight: 400;
}

html[data-theme="pastel"] .filter-chip.is-active {
  border: 2px solid rgba(127, 166, 201, 0.75);
  border-radius: 47% 53% 44% 56% / 60% 46% 58% 42%;
  background: transparent;
  color: var(--text);
}

html[data-theme="pastel"] .filter-select select.is-active {
  border: 2px solid rgba(127, 166, 201, 0.75);
  background: transparent;
  color: var(--text);
}

html[data-theme="pastel"] .filter-select select.is-active + svg {
  color: var(--text);
}

html[data-theme="pastel"] .report-insight {
  background:
    radial-gradient(80% 90% at 15% 8%, rgba(169, 199, 227, 0.45), transparent 75%),
    var(--surface);
  color: var(--text);
}

html[data-theme="pastel"] .report-insight h2 em,
html[data-theme="pastel"] .report-insight > p strong {
  color: var(--accent-strong);
}

html[data-theme="pastel"] .report-insight > p:last-child {
  color: var(--muted);
}

html[data-theme="pastel"] .insight-mark {
  background: rgba(169, 199, 227, 0.4);
  color: var(--accent-strong);
}

html[data-theme="pastel"] .theme-options button {
  border-radius: 16px;
}

html[data-theme="pastel"] .toast {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

html[data-theme="midnight"] body::before {
  background:
    linear-gradient(rgba(118, 242, 208, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(118, 242, 208, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 84% 7%, rgba(118, 242, 208, 0.08), transparent 24%);
}

html[data-theme="midnight"] .app-header {
  background: rgba(5, 11, 14, 0.9);
}

html[data-theme="midnight"] .brand-mark {
  border-radius: 4px;
  color: var(--accent);
}

html[data-theme="midnight"] .main-tabs button{
  font-family: var(--font-data);
}

html[data-theme="midnight"] #panel-today > .page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 4px 0 24px 24px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--accent);
}

html[data-theme="midnight"] #panel-today > .page-heading h1 {
  max-width: 760px;
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.07em;
}

html[data-theme="midnight"] .today-layout {
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.75fr);
  gap: 10px;
}

html[data-theme="midnight"] .balance-hero {
  min-height: 330px;
  background: linear-gradient(135deg, rgba(118, 242, 208, 0.025), transparent 68%), var(--surface);
}

html[data-theme="midnight"] .balance-hero::before {
  background:
    linear-gradient(rgba(118, 242, 208, 0.045) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(118, 242, 208, 0.03) 1px, transparent 1px) 0 0 / 28px 100%;
  opacity: 1;
}

html[data-theme="midnight"] .hero-head div > strong {
  color: var(--accent);
  text-shadow: 0 0 25px rgba(118, 242, 208, 0.12);
}

html[data-theme="midnight"] .together-card {
  border-left-color: var(--accent);
  box-shadow: none;
}

html[data-theme="midnight"] .wealth-strip {
  grid-template-columns: minmax(240px, 0.9fr) minmax(340px, 1.35fr) auto;
  gap: 12px;
  box-shadow: none;
}

html[data-theme="midnight"] .wealth-copy,
html[data-theme="midnight"] .wealth-breakdown {
  min-height: 88px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 2%, var(--surface));
}

html[data-theme="midnight"] .report-insight {
  background: linear-gradient(135deg, rgba(110, 168, 255, 0.11), transparent 55%), #07151a;
  color: var(--text);
}

/* 기본 규칙은 이 카드의 배경이 밝은 --text라는 전제로 글자색에 --surface를 쓴다.
   midnight은 배경만 어둡게 바꿔서 검정 위 검정이 됐다. 다른 테마엔 있던 패치가 여기만 빠져 있었다. */
html[data-theme="midnight"] .report-insight > p:last-child {
  color: color-mix(in srgb, var(--text) 74%, transparent);
}

html[data-theme="midnight"] .report-insight > p strong {
  color: var(--text);
}

html[data-theme="bauhaus"] body::before {
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(17, 17, 15, 0.1) 0) 0 0 / 64px 64px,
    linear-gradient(transparent calc(100% - 1px), rgba(17, 17, 15, 0.1) 0) 0 0 / 64px 64px;
}

html[data-theme="bauhaus"] .app-header {
  border-bottom-width: 2px;
  background: rgba(242, 240, 232, 0.96);
}

html[data-theme="bauhaus"] .brand-mark {
  border-width: 2px;
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  box-shadow: 4px 4px 0 var(--strong-border);
}

html[data-theme="bauhaus"] .main-tabs button::after {
  height: 5px;
}

html[data-theme="bauhaus"] #panel-today > .page-heading {
  align-items: stretch;
  padding: 0;
  border: 2px solid var(--strong-border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

html[data-theme="bauhaus"] #panel-today > .page-heading > div:first-child {
  flex: 1.4;
  padding: 28px 32px;
}

html[data-theme="bauhaus"] #panel-today > .page-heading .heading-side {
  min-width: 300px;
  justify-content: center;
  padding: 24px;
  border-left: 2px solid var(--strong-border);
  background: #f2cc2f;
}

html[data-theme="bauhaus"] #panel-today > .page-heading .heading-note {
  color: var(--text);
}

html[data-theme="bauhaus"] .today-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
}

/* 세로 노란 띠(78%)가 우측 정렬된 '남은 금액'을 반으로 갈랐다.
   색면은 유지하되 콘텐츠와 겹치지 않는 하단 굵은 선으로 옮긴다. */
html[data-theme="bauhaus"] .balance-hero {
  border-width: 2px;
  border-bottom: 14px solid #f2cc2f;
  background: #fff;
}

/* 빨간 원(88% 19%) 위에 파란 6.3% 칩이 얹혀 세 색이 60px 안에 쌓였다. 원을 뺀다. */
html[data-theme="bauhaus"] .balance-hero::before {
  display: none;
}

html[data-theme="bauhaus"] .together-card,
html[data-theme="bauhaus"] .wealth-strip {
  border-width: 2px;
}

html[data-theme="bauhaus"] .together-card {
  border-top-width: 12px;
  border-top-color: #174da6;
}

html[data-theme="bauhaus"] .wealth-strip {
  background: linear-gradient(90deg, #f2cc2f 0 27%, var(--surface) 27%);
}

@media (min-width: 841px) {
  html[data-theme="bauhaus"] .wealth-strip {
    grid-template-columns: minmax(270px, 0.9fr) minmax(360px, 1.2fr) auto;
  }
}

html[data-theme="bauhaus"] .budget-line {
  border-color: var(--strong-border);
  border-radius: 0;
}

html[data-theme="bauhaus"] .report-insight {
  border-width: 2px;
  background: var(--accent);
  color: #fff;
}

html[data-theme="bauhaus"] .report-insight > p:last-child {
  color: #fff;
}

html[data-theme="bauhaus"] .report-insight h2 em {
  color: #f2cc2f;
}

html[data-theme="bauhaus"] .report-insight > p strong {
  color: #fff;
}

html[data-theme="bauhaus"] .category-icon,
html[data-theme="bauhaus"] .avatar,
html[data-theme="bauhaus"] .trend-down,
html[data-theme="bauhaus"] .scope-label,
html[data-theme="bauhaus"] .insight-mark {
  border: 1px solid var(--strong-border);
  border-radius: 0;
}

@media (min-width: 841px) and (max-width: 1100px) {
  html[data-theme="quiet"] .hero-head div > strong {
    font-size: min(3.6rem, calc(100cqi / (var(--amount-length, 10) * 0.55)));
  }

  html[data-theme="chapchap"] .hero-head div > strong {
    font-size: 3.6rem;
  }
}

/* Responsive */

@media (max-width: 1024px) {
  /* 이 구간부터 떠 있는 +가 나타난다. 헤더의 `기록하기`와 각 화면 머리말의
     만들기 버튼(일정 추가·새 기록·새 미션)은 그 +가 하는 일과 같으므로 접는다.
     둘 다 두면 같은 일을 하는 것이 둘이 되고, 일정·미션에서는 생김새까지
     똑같은 초록 +가 위아래로 두 개 보였다.

     빈 상태 카드의 버튼(`미션 만들기`, `예산 정하기`)은 여기 해당하지 않는다.
     아무것도 없는 화면은 자기 안에 다음 걸음이 있어야 한다. */
  .header-add,
  .heading-add,
  .calendar-detail-add {
    display: none;
  }

  .main-tabs {
    position: fixed;
    z-index: 120;
    right: 10px;
    /* 화면 끝에 붙이고, iPhone 홈 인디케이터가 있을 때만 그만큼 띄운다.
       별도 18px 여백을 두면 탭 아래로 기록 카드가 보여 경계가 어색해진다. */
    bottom: env(safe-area-inset-bottom);
    left: 10px;
    width: auto;
    height: 76px;
    gap: 0;
    padding: 6px 4px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 8px);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
  }

  .main-tabs button {
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-height: 64px;
    border-radius: var(--radius-sm);
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .main-tabs button > svg {
    display: block;
    width: 19px;
    height: 19px;
  }

  .main-tabs button::after {
    right: 34%;
    bottom: 3px;
    left: 34%;
    height: 3px;
    border-radius: 99px;
  }

  .main-tabs button[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--accent);
  }

  .app-main {
    padding-bottom: calc(176px + env(safe-area-inset-bottom));
  }

  /* 떠 있는 버튼이라 어디에 두든 그 자리의 콘텐츠를 덮는다. 가운데로 옮겨보니
     금액 대신 달력 날짜 버튼을 덮어 더 나빴다. 우하단을 유지하고 스크롤 중에는 내려둔다. */
  .mobile-add {
    position: fixed;
    z-index: 130;
    right: 18px;
    bottom: calc(94px + env(safe-area-inset-bottom));
    display: grid;
    width: 56px;
    height: 56px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-lg);
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  /* FAB은 우하단에 고정이라 그 자리에 오는 버튼(일정의 '기록' 등)을 덮어 누를 수 없게 만든다.
     아래로 스크롤하는 동안에는 내려두고, 멈추거나 위로 올리면 다시 올린다. */
  .mobile-add.is-tucked {
    transform: translateY(96px);
    opacity: 0;
    pointer-events: none;
  }

  .mobile-add svg {
    width: 23px;
    height: 23px;
  }

  .toast {
    bottom: calc(164px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 840px) {
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
    min-height: 68px;
    gap: 8px;
  }
  .today-layout,
  .report-layout,
  .household-layout {
    grid-template-columns: 1fr;
  }

  /* 위 규칙은 특이도 (0,1,0)이라 테마 규칙 html[data-theme="…"] .today-layout (0,2,1)을
     이기지 못한다. 미디어쿼리는 특이도를 더하지 않으므로 폰에서도 테마의 2단 배치가
     그대로 살아남아 금액이 잘렸다(quiet 156px 2단, midnight/bauhaus는 본문 칸이 48/42px로 붕괴).
     같은 특이도로 다시 선언해야 한 단으로 쌓인다. */
  html[data-theme="quiet"] .today-layout,
  html[data-theme="chapchap"] .today-layout,
  html[data-theme="midnight"] .today-layout,
  html[data-theme="bauhaus"] .today-layout {
    grid-template-columns: 1fr;
  }

  html[data-theme="quiet"] .transaction-row:not(.calendar-preview-row) {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  html[data-theme="quiet"] .transaction-row .payer {
    display: none;
  }

  html[data-theme="quiet"] .transaction-main > .transaction-context {
    display: block;
    font-size: 13px;
  }

  .mission-card {
    grid-template-columns: 58px minmax(0, 1fr) minmax(200px, 0.9fr);
  }

  .mission-reward {
    grid-column: 2 / -1;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  .wealth-strip {
    grid-template-columns: 1fr auto;
  }

  .wealth-breakdown {
    grid-column: 1 / -1;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    border-right: 0;
    border-left: 0;
  }

  .together-card {
    min-height: auto;
  }

  .calendar-day-columns {
    grid-template-columns: 1fr;
  }

  .transaction-row {
    grid-template-columns: 42px minmax(130px, 1fr) 86px 90px;
  }

  .scope-label {
    display: none;
  }
}

@media (max-width: 640px) {
  body {
    overscroll-behavior-y: contain;
  }

  .header-inner,
  .app-main {
    width: calc(100% - 32px);
  }

  .header-inner {
    min-height: 62px;
  }

  .brand small,
  .month-control button,
  .header-add {
    display: none;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .month-control {
    grid-template-columns: 84px;
    border: 0;
    background: transparent;
  }

  .month-control strong {
    font-size: 0.72rem;
  }

  .app-main {
    padding-top: 36px;
    padding-bottom: calc(176px + env(safe-area-inset-bottom));
  }

  .page-heading,
  .page-heading.simple {
    display: block;
    margin-bottom: 28px;
  }

  .page-heading h1,
  .page-heading.simple h1 {
    font-size: 2.45rem;
  }

  .heading-note {
    margin-top: 16px;
    text-align: left;
  }

  .heading-side {
    justify-items: start;
  }

  .report-heading-actions {
    justify-content: space-between;
    margin-top: 18px;
  }

  .page-heading.simple > .primary-button,
  .page-heading.simple > .secondary-button,
  .page-heading.simple > .period-tabs {
    margin-top: 18px;
  }

  .calendar-toolbar {
    min-height: 78px;
    padding: 14px 18px;
  }

  .calendar-toolbar h2 {
    font-size: 1.08rem;
  }

  .month-grid {
    padding: 8px 8px 14px;
  }

  .month-head {
    padding: 7px 0 9px;
    font-size: 0.58rem;
  }

  .month-cell,
  .month-cell.is-empty {
    min-height: 60px;
  }

  .month-cell {
    gap: 2px;
    padding: 5px 0;
  }

  .month-cell b {
    width: 25px;
    height: 25px;
  }

  .calendar-day-detail {
    margin-top: 28px;
  }

  .calendar-day-heading h2 {
    font-size: 1.2rem;
  }

  .calendar-day-columns {
    gap: 28px;
  }

  .transaction-row.calendar-preview-row {
    grid-template-columns: minmax(0, 1fr) minmax(76px, 38%);
  }

  .calendar-history-action {
    padding-inline: 12px;
  }

  .calendar-day-section > header {
    margin-bottom: 8px;
  }

  /* 폰에서는 높이 바닥을 두지 않는다. 375px·quiet에서 카드가 310px로 서 있었는데
     내용은 241px(예산 있을 때)·197px(예산을 아직 안 정했을 때)이라, 예산을 안 정한
     첫 화면은 카드의 3분의 1이 빈 칸이었다. 안이 비었는데 상자만 큰 게 `유난히
     커 보인다`의 정체다. 데스크톱은 옆에 함께 카드가 나란히 서므로 바닥을 남긴다. */
  .balance-hero {
    min-height: auto;
    padding: 24px 18px;
  }

  .hero-head div > strong {
    margin-top: 16px;
    font-size: clamp(2.25rem, 12vw, 3.25rem);
  }

  /* 폰에서는 발치를 세로로 쌓는다. 한 줄에 두면 `예산 ￦2,000,000`(0.68rem/700
     ≈ 142px)과 `￦1,284,500`(1.15rem ≈ 184px)이 합쳐 356px인데 390px 폰의 카드
     안쪽은 328px이다 — 나란히 두면 넘친다. 데스크톱은 히어로가 넓어 두 열이
     들어가므로 거기서만 나란히 둔다. */
  .hero-foot {
    justify-items: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-foot > strong {
    text-align: left;
  }

  .trend-down {
    min-height: 28px;
    padding-inline: 8px;
  }

  /* 여기 `.budget-line { margin-top: 52px }`가 있었다. **한 번도 안 그려졌다** —
     1024px 아래의 `.balance-hero .budget-line`(0,2,0)이 이것(0,1,0)을 언제나
     이긴다. 미디어쿼리는 특이도를 더하지 않으므로 나중에 온다고 이기지 않는다.
     실제 값은 어느 폭에서나 26px이었다. */

  /* `.methods-card`가 이 목록에 없어서 폰에서만 28px로 남아 있었다 —
     같은 화면의 옆 카드들이 22/18인데 결제 수단만 안쪽이 넓었다. */
  .together-card,
  .members-card,
  .methods-card,
  .anniversary-card,
  .account-card,
  .report-chart {
    padding: 22px 18px;
  }

  .theme-card {
    padding: 22px 18px 6px;
  }

  .mission-section {
    margin-top: 14px;
  }

  .mission-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px 13px;
    padding: 20px 18px;
  }

  .mission-mark {
    width: 44px;
    height: 44px;
  }

  .mission-mark svg {
    width: 21px;
    height: 21px;
  }

  .mission-copy h2 {
    font-size: 1.16rem;
  }

  .mission-progress {
    grid-column: 1 / -1;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-right: 0;
    border-bottom: 1px solid var(--border);
    border-left: 0;
  }

  .mission-reward {
    grid-column: 1 / -1;
    padding-top: 0;
    border-top: 0;
  }

  .mission-reward > div {
    justify-content: space-between;
  }  .wealth-section {
    margin-top: 14px;
  }

  .wealth-strip {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
  }

  .wealth-breakdown {
    grid-column: auto;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .wealth-breakdown > div {
    padding: 0 14px;
  }

  .wealth-breakdown > div:first-child {
    padding-left: 0;
  }

  .wealth-breakdown > div:last-child {
    padding-right: 0;
  }

  .wealth-strip > .secondary-button {
    width: 100%;
  }

  .recent-section {
    margin-top: 38px;
  }

  .transaction-table {
    padding: 0 15px;
  }

  .transaction-row {
    min-height: 76px;
    grid-template-columns: 38px minmax(0, 1fr) 88px;
    gap: 10px;
  }

  .category-icon {
    width: 36px;
    height: 36px;
  }

  .payer {
    display: none;
  }

  .transaction-price {
    font-size: 0.68rem;
  }

  .tool-row {
    display: block;
    margin-bottom: 28px;
  }

  .search-field {
    width: 100%;
  }

  .filter-group {
    margin-top: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .history-date-filter {
    margin-top: -16px;
  }

  .filter-chip {
    flex: 0 0 auto;
  }
  .report-stats {
    grid-template-columns: 1fr;
  }

  .report-insight {
    min-height: 340px;
    padding: 26px 22px;
  }

  .member-card {
    grid-template-columns: 46px 1fr auto;
  }

  .avatar.large {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .compact-dialog,
  .entry-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 12px);
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  dialog[open] {
    animation-name: sheet-in;
  }

  @keyframes sheet-in {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .compact-dialog,
  .entry-dialog form {
    --sheet-pad-x: 16px;
    --sheet-pad-y: 18px;
    padding: var(--sheet-pad-y) var(--sheet-pad-x) calc(22px + env(safe-area-inset-bottom));
  }

  .mission-dialog {
    padding: 0;
  }

  .mission-dialog form {
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  }

  .secret-note {
    grid-template-columns: 38px 1fr;
  }

  .secret-note label {
    grid-column: 1 / -1;
  }

  .sheet-handle {
    display: block;
    width: 42px;
    height: 4px;
    margin: -7px auto 13px;
    border-radius: 99px;
    background: var(--border);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .toast {
    right: 16px;
    left: 16px;
  }
}

@media (max-width: 390px) {
  .header-inner,
  .app-main {
    width: calc(100% - 24px);
  }

  /* 마크가 없으므로 좁은 폭에서도 글자를 지우지 않는다. 지우면 헤더에 브랜드가
     하나도 남지 않는다. 부제(우리의 가계부)만 840px에서 이미 숨겨져 있다. */
  .brand strong {
    font-size: 1.08rem;
  }

  .page-heading h1,
  .page-heading.simple h1 {
    font-size: 2.1rem;
  }

  .hero-head div > strong {
    font-size: 2.25rem;
  }

  .calendar-toolbar {
    padding-inline: 14px;
  }

  .month-grid {
    padding-inline: 4px;
  }

  .month-cell,
  .month-cell.is-empty {
    min-height: 56px;
  }

}

/* Mobile theme compositions: shared navigation, distinct home canvases */

/* 하단 고정 탭바는 1024px 이하 전 구간에서 나타나므로,
   테마별 탭바 스타일도 같은 구간 전체를 덮어야 한다 (640px에만 걸면 641–1024px가 무테마 흰색 바가 됨) */
@media (max-width: 1024px) {
  html[data-theme="chapchap"] .main-tabs {
    border-width: 3px;
    border-radius: 22px 16px 24px 15px;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    box-shadow: 0 0 0 4px #fff, 5px 6px 0 4px var(--strong-border);
    backdrop-filter: blur(10px);
  }

  html[data-theme="chapchap"] .main-tabs button {
    border-radius: 13px 9px 14px 8px;
    color: var(--muted);
    font-weight: 700;
  }

  html[data-theme="chapchap"] .main-tabs button[aria-selected="true"] {
    border: 2px solid var(--strong-border);
    background: #ffd32f;
    color: var(--text);
  }

  html[data-theme="chapchap"] .mobile-add {
    border: 3px solid var(--strong-border);
    border-radius: 48% 52% 45% 55%;
    background: #ffd32f;
    color: var(--text);
    box-shadow: 0 0 0 4px #fff, 5px 6px 0 4px var(--strong-border);
  }
}

@media (max-width: 640px) {
  html[data-theme="quiet"] .header-inner {
    width: calc(100% - 32px);
    min-height: 80px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 8px;
    padding: 6px 0 8px;
  }

  html[data-theme="quiet"] .header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  html[data-theme="quiet"] .header-dday {
    display: block;
    max-width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
  }

  html[data-theme="quiet"] .month-control button {
    display: grid;
    width: 44px;
    height: 44px;
  }

  html[data-theme="quiet"] .month-control .month-select {
    width: 100%;
  }

  html[data-theme="quiet"] .month-control {
    border: 1px solid var(--border);
    background: var(--surface);
  }

  html[data-theme="quiet"] .app-main {
    width: calc(100% - 32px);
    padding-top: 16px;
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }

  html[data-theme="quiet"] .page-heading.simple h1 {
    margin-top: 0;
    font-size: 28px;
    line-height: 1.25;
  }

  html[data-theme="quiet"] .page-heading.simple > div > p:last-child {
    font-size: 14px;
    line-height: 1.6;
  }

  html[data-theme="quiet"] #panel-today > .page-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0;
    border-left: 0;
    text-align: left;
  }

  html[data-theme="quiet"] #panel-today > .page-heading h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.045em;
    line-height: 1.22;
  }

  html[data-theme="quiet"] .home-title-mobile {
    display: inline;
  }

  html[data-theme="quiet"] .home-title-full,
  html[data-theme="quiet"] #panel-today > .page-heading .heading-note {
    display: none;
  }

  html[data-theme="quiet"] #panel-today > .page-heading .heading-side {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
  }

  html[data-theme="quiet"] .text-button {
    font-size: 13px;
  }

  html[data-theme="quiet"] #panel-today > .page-heading .text-button {
    font-size: 13px;
    white-space: nowrap;
  }

  html[data-theme="quiet"] .today-layout {
    gap: 16px;
  }

  html[data-theme="quiet"] .balance-hero,
  html[data-theme="quiet"] .together-card {
    min-height: 0;
    padding: 20px;
  }

  html[data-theme="quiet"] .hero-head div > span {
    font-size: 13px;
  }

  html[data-theme="quiet"] .hero-head div > strong {
    margin-top: 10px;
    font-size: min(clamp(32px, 10.67vw, 40px), calc(100cqi / (var(--amount-length, 10) * 0.55)));
    line-height: 1.1;
  }

  html[data-theme="quiet"] .balance-hero .budget-line {
    height: 8px;
    margin-top: 16px;
  }

  html[data-theme="quiet"] .hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 8px;
  }

  html[data-theme="quiet"] .hero-foot > strong {
    display: grid;
    width: auto;
    align-items: center;
    justify-items: end;
    gap: 4px;
    margin-left: auto;
    padding-top: 0;
  }

  html[data-theme="quiet"] .hero-foot > strong small {
    margin: 0;
    font-size: 13px;
  }

  html[data-theme="quiet"] .hero-foot > strong [data-spent] {
    font-size: 17px;
  }

  html[data-theme="quiet"] .hero-today {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
  }

  html[data-theme="quiet"] .hero-budget-start {
    min-height: 44px;
    font-size: 13px;
  }

  html[data-theme="quiet"] .together-card {
    padding: 16px 20px;
  }

  html[data-theme="quiet"] .together-card .section-heading h2 {
    margin: 0;
    font-size: 18px;
  }

  html[data-theme="quiet"] .member-split {
    gap: 8px;
    margin-top: 12px;
  }

  html[data-theme="quiet"] .member-line strong {
    font-size: 14px;
  }

  html[data-theme="quiet"] .member-line .avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  html[data-theme="quiet"] .wallet-total {
    padding-top: 12px;
  }

  html[data-theme="quiet"] .wallet-total > span {
    font-size: 14px;
  }

  html[data-theme="quiet"] .person-budget {
    margin-block: -8px;
    padding-left: 36px;
  }

  html[data-theme="quiet"] .person-budget > span {
    font-size: 13px;
    white-space: normal;
  }

  html[data-theme="quiet"] .recent-section {
    margin-top: 24px;
  }

  html[data-theme="quiet"] .recent-section > .section-heading {
    gap: 8px;
    align-items: center;
  }

  html[data-theme="quiet"] .main-tabs {
    /* 고정 탭 아래의 기록 카드가 비치지 않도록 표면색으로 막는다. */
    background: var(--surface);
  }

  html[data-theme="quiet"] .main-tabs button {
    font-size: 11px;
  }

  html[data-theme="quiet"] .transaction-row:not(.calendar-preview-row) {
    min-height: 90px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 9px;
  }

  html[data-theme="quiet"] .transaction-main > span {
    white-space: normal;
    line-height: 1.5;
  }

  html[data-theme="quiet"] .category-icon {
    width: 28px;
    height: 28px;
  }

  html[data-theme="quiet"] .category-icon svg {
    width: 16px;
  }

  html[data-theme="quiet"] .search-field input {
    font-size: 16px;
  }

  html[data-theme="quiet"] :is(#entry-dialog, #plan-dialog, #method-dialog, #mission-dialog) {
    max-height: calc(var(--sheet-viewport-height, 100dvh) - 12px);
  }

  html[data-theme="quiet"] :is(#entry-form, #plan-form, #method-form, #mission-form) {
    max-height: calc(var(--sheet-viewport-height, 100dvh) - 13px);
    padding-bottom: 0;
  }

  html[data-theme="quiet"] .entry-dialog h2 {
    font-size: 25px;
  }

  html[data-theme="quiet"] .entry-dialog header {
    padding-bottom: 8px;
  }

  html[data-theme="quiet"] .memo-field small {
    font-size: 12px;
  }

  html[data-theme="quiet"] .ledger-status button {
    width: 100%;
  }

  html[data-theme="quiet"] .wealth-strip {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 24px;
  }

  html[data-theme="chapchap"] .app-main {
    padding-top: 24px;
  }

  /* 폰 화면: 가로형 일러스트를 cover로 자르면 인물이 잘려 데스크톱과 전혀 다른
     화면이 된다. 말풍선 → 일러스트(원본 비율 전체) → 요약을 세로로 쌓는다 */
  html[data-theme="chapchap"] #panel-today > .page-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    min-height: auto;
    aspect-ratio: auto;
    padding: 16px;
    border-radius: 24px 17px 27px 16px;
    background-image: none;
    box-shadow: 0 0 0 4px #fff, 6px 7px 0 4px var(--strong-border);
  }

  html[data-theme="chapchap"] #panel-today > .page-heading::before {
    display: none;
  }

  html[data-theme="chapchap"] #panel-today > .page-heading::after {
    content: "";
    display: block;
    order: 2;
    width: 100%;
    aspect-ratio: 1915 / 821;
    border: 3px solid var(--strong-border);
    border-radius: 17px 12px 19px 11px;
    background: url("assets/chapchap-hero.webp") center / cover no-repeat;
    box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--strong-border);
    transform: rotate(-0.6deg);
  }

  html[data-theme="chapchap"] #panel-today > .page-heading > div:first-child {
    align-self: flex-start;
    margin: 2px 2px 6px;
    padding: 12px 16px 14px;
    border-radius: 18px 13px 20px 12px;
    box-shadow: 0 0 0 4px #fff, 4px 5px 0 4px var(--strong-border);
  }

  html[data-theme="chapchap"] #panel-today > .page-heading h1 {
    max-width: none;
    font-size: 2.05rem;
    line-height: 0.98;
  }

  html[data-theme="chapchap"] #panel-today > .page-heading .heading-side {
    position: static;
    order: 3;
    width: auto;
    margin: 4px 2px 2px;
    /* end로 두면 한 줄짜리 문구가 버튼 밑변에 붙어 위쪽이 텅 빈다.
       원래 이 자리는 두 줄('둘이 함께 기록한 지 128일' + '지난달보다 …')이라
       균형이 맞았는데, 견줄 근거가 없는 문장을 걷어내면서 한 줄이 됐다. */
    align-items: center;
    grid-template-columns: 1fr auto;
    padding: 11px 12px;
    text-align: left;
    transform: rotate(0.4deg);
    box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--strong-border);
  }

  html[data-theme="chapchap"] #panel-today > .page-heading .heading-note {
    margin: 0;
    color: var(--text);
    font-size: 0.74rem;
    line-height: 1.55;
  }

  html[data-theme="chapchap"] #panel-today > .page-heading .text-button {
    min-height: 44px;
    padding: 0 10px;
    border: 2px solid var(--strong-border);
    border-radius: 12px 9px 13px 8px;
    background: #ffd32f;
  }

  html[data-theme="chapchap"] .today-layout {
    gap: 24px;
  }

  html[data-theme="chapchap"] .balance-hero,
  html[data-theme="chapchap"] .together-card {
    min-height: auto;
  }

  html[data-theme="chapchap"] .balance-hero {
    padding: 24px 18px;
  }

  html[data-theme="chapchap"] .together-card {
    padding: 24px 20px;
  }

  html[data-theme="chapchap"] .wealth-strip {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-theme="chapchap"] .wealth-copy {
    grid-column: 1 / -1;
    padding: 20px 18px;
    border: 3px solid var(--strong-border);
    border-radius: 24px 18px 26px 16px;
    background: var(--surface);
    box-shadow: 0 0 0 3px #fff, 4px 5px 0 3px var(--strong-border);
  }

  html[data-theme="chapchap"] .wealth-breakdown {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0;
    border: 0;
  }

  html[data-theme="chapchap"] .wealth-breakdown > div {
    min-width: 0;
    padding: 16px 13px;
    border: 3px solid var(--strong-border);
    border-radius: 20px 14px 22px 13px;
    background:
      repeating-linear-gradient(165deg, rgba(37, 35, 47, 0.03) 0 1px, transparent 1px 5px),
      #ffe184;
    box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--strong-border);
  }

  html[data-theme="chapchap"] .wealth-breakdown > div + div {
    border-left: 3px solid var(--strong-border);
    background:
      repeating-linear-gradient(15deg, rgba(37, 35, 47, 0.025) 0 1px, transparent 1px 5px),
      #d4f1e7;
  }

  html[data-theme="chapchap"] .wealth-breakdown strong {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
  }

  html[data-theme="chapchap"] .wealth-strip > .secondary-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    border-width: 3px;
    border-radius: 18px 13px 20px 12px;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--strong-border);
  }

  html[data-theme="midnight"] .app-main {
    padding-top: 24px;
  }

  html[data-theme="midnight"] #panel-today > .page-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 0 18px 16px;
    margin-bottom: 16px;
  }

  html[data-theme="midnight"] #panel-today > .page-heading h1 {
    margin-top: 6px;
    font-size: 1.9rem;
    line-height: 1.2;
  }

  html[data-theme="midnight"] #panel-today > .page-heading .heading-side {
    grid-template-columns: 1fr auto;
    justify-items: start;
  }

  html[data-theme="midnight"] #panel-today > .page-heading .heading-note {
    margin: 0;
    font-family: var(--font-data);
    font-size: 0.65rem;
    line-height: 1.6;
  }

  html[data-theme="midnight"] .today-layout {
    gap: 8px;
  }

  html[data-theme="midnight"] .balance-hero {
    min-height: auto;
    padding: 20px 16px;
  }

  html[data-theme="midnight"] .hero-head div > strong {
    font-size: clamp(2.05rem, 11vw, 3rem);
  }

  html[data-theme="midnight"] .budget-line {
    margin-top: 38px;
  }

  html[data-theme="midnight"] .together-card {
    padding: 18px 16px;
  }

  html[data-theme="midnight"] .member-split {
    margin-top: 18px;
  }

  html[data-theme="midnight"] .wealth-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  html[data-theme="midnight"] .wealth-copy {
    grid-column: 1 / -1;
  }

  html[data-theme="midnight"] .wealth-breakdown {
    grid-column: 1 / -1;
    min-height: auto;
    padding: 14px 0;
  }

  html[data-theme="midnight"] .wealth-strip > .secondary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  html[data-theme="bauhaus"] .app-main {
    padding-top: 24px;
  }

  html[data-theme="bauhaus"] #panel-today > .page-heading {
    display: grid;
    margin-bottom: 18px;
  }

  html[data-theme="bauhaus"] #panel-today > .page-heading > div:first-child {
    padding: 20px 18px 24px;
  }

  html[data-theme="bauhaus"] #panel-today > .page-heading h1 {
    font-size: 2.25rem;
    line-height: 1.08;
    text-transform: uppercase;
  }

  html[data-theme="bauhaus"] #panel-today > .page-heading .heading-side {
    min-width: 0;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
    padding: 16px 18px;
    border-top: 2px solid var(--strong-border);
    border-left: 0;
  }

  html[data-theme="bauhaus"] #panel-today > .page-heading .heading-note {
    margin: 0;
    color: var(--text);
    font-weight: 700;
  }

  html[data-theme="bauhaus"] .today-layout {
    gap: 14px;
  }

  html[data-theme="bauhaus"] .balance-hero {
    min-height: auto;
    padding: 22px 16px;
    background: #fff;
  }

  html[data-theme="bauhaus"] .together-card {
    padding: 22px 18px;
  }

  html[data-theme="bauhaus"] .wealth-strip {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    background: var(--surface);
  }

  html[data-theme="bauhaus"] .wealth-copy {
    padding: 20px 18px;
    border-bottom: 2px solid var(--strong-border);
    background: #f2cc2f;
  }

  html[data-theme="bauhaus"] .wealth-breakdown {
    padding: 18px 0;
    border-top: 0;
    border-bottom: 2px solid var(--strong-border);
  }

  html[data-theme="bauhaus"] .wealth-strip > .secondary-button {
    width: calc(100% - 32px);
    margin: 16px;
    border-width: 2px;
    background: #174da6;
    color: #fff;
    box-shadow: 3px 3px 0 var(--strong-border);
  }
}

/* 챱챱 월드: one crayon world across every screen */

html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  padding: 24px 28px;
  border: 3px solid var(--strong-border);
  border-radius: 27px 19px 30px 17px;
  background:
    repeating-linear-gradient(168deg, rgba(37, 35, 47, 0.035) 0 1px, transparent 1px 6px),
    #ffe184;
  box-shadow: var(--shadow);
}

html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading::after {
  position: absolute;
  right: 32px;
  bottom: 18px;
  width: 30px;
  height: 30px;
  transform: rotate(8deg);
  border: 3px solid var(--strong-border);
  background: #ffd32f;
  clip-path: polygon(50% 0, 61% 34%, 98% 34%, 68% 56%, 79% 94%, 50% 72%, 21% 94%, 32% 56%, 2% 34%, 39% 34%);
  content: "";
}

html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading > * {
  position: relative;
  z-index: 1;
}

html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading h1 {
  margin-top: 2px;
  font-size: clamp(2.2rem, 4.5vw, 3.1rem);
  line-height: 1.04;
  word-break: keep-all;
}

html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading p:last-child {
  color: var(--text);
  font-weight: 700;
}

html[data-theme="chapchap"] .tab-panel#panel-mission > .page-heading {
  border-radius: 19px 29px 18px 27px;
  background:
    repeating-linear-gradient(14deg, rgba(8, 115, 106, 0.04) 0 1px, transparent 1px 6px),
    #d4f1e7;
}

html[data-theme="chapchap"] .tab-panel#panel-budget > .page-heading {
  border-radius: 28px 18px 24px 16px;
  background:
    repeating-linear-gradient(168deg, rgba(37, 35, 47, 0.035) 0 1px, transparent 1px 6px),
    #ffd32f;
}

html[data-theme="chapchap"] .tab-panel#panel-reports > .page-heading {
  border-radius: 22px 29px 19px 26px;
  background:
    repeating-linear-gradient(12deg, rgba(37, 35, 47, 0.035) 0 1px, transparent 1px 6px),
    #ffb6a1;
}

html[data-theme="chapchap"] .tab-panel#panel-household > .page-heading {
  border-radius: 30px 17px 26px 20px;
  background:
    repeating-linear-gradient(170deg, rgba(8, 115, 106, 0.035) 0 1px, transparent 1px 6px),
    #bdebdc;
}

html[data-theme="chapchap"] :is(.transaction-table,
  .mission-card,
  .report-chart,
  .report-stats article,
  .members-card){
  background-image: repeating-linear-gradient(166deg, rgba(37, 35, 47, 0.03) 0 1px, transparent 1px 6px);
}

html[data-theme="chapchap"] .transaction-table {
  border-radius: 24px 17px 27px 15px;
  background-color: #fff7d6;
}

html[data-theme="chapchap"] .transaction-row {
  border-bottom: 2px dashed color-mix(in srgb, var(--strong-border) 38%, transparent);
}

html[data-theme="chapchap"] .date-group > header {
  width: fit-content;
  min-height: 40px;
  gap: 28px;
  margin: 0 0 12px 8px;
  padding: 6px 12px;
  border: 2px solid var(--strong-border);
  border-radius: 13px 9px 15px 8px;
  background: #ffd32f;
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
}

html[data-theme="chapchap"] .date-group > header span {
  color: var(--text);
  font-weight: 700;
}

html[data-theme="chapchap"] .search-field {
  min-height: 50px;
  border: 3px solid var(--strong-border);
  border-radius: 17px 12px 19px 11px;
  background: #fff7d6;
  box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--strong-border);
}

html[data-theme="chapchap"] .filter-chip,
html[data-theme="chapchap"] .filter-select select {
  min-height: 44px;
  border: 2px solid var(--strong-border);
  background: #fff7d6;
  color: var(--text);
}

html[data-theme="chapchap"] .filter-chip {
  border-radius: 14px 10px 16px 9px;
}

html[data-theme="chapchap"] .filter-chip.is-active,
html[data-theme="chapchap"] .filter-select select.is-active {
  background: #ffd32f;
  color: var(--text);
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
}

html[data-theme="chapchap"] .filter-select select.is-active + svg {
  color: var(--text);
}

html[data-theme="chapchap"] .mission-card {
  border-radius: 28px 18px 31px 20px;
  background-color: #fff0a6;
}

html[data-theme="chapchap"] .mission-progress {
  border-color: color-mix(in srgb, var(--strong-border) 42%, transparent);
  border-style: dashed;
}
html[data-theme="chapchap"] .member-add > svg {
  border: 2px solid var(--strong-border);
  background: #ffd32f;
  color: var(--text);
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
}

html[data-theme="chapchap"] .period-tabs {
  gap: 4px;
  padding: 5px;
  border: 2px solid var(--strong-border);
  border-radius: 16px 11px 18px 10px;
  background: #fff7d6;
}

html[data-theme="chapchap"] .period-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 11px 8px 13px 7px;
  color: var(--text);
}

html[data-theme="chapchap"] .period-tabs button.is-active {
  border: 2px solid var(--strong-border);
  background: #ffd32f;
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
}

html[data-theme="chapchap"] .report-chart {
  border-radius: 29px 18px 26px 17px;
  background-color: #fff7d6;
}

html[data-theme="chapchap"] .report-insight {
  border-radius: 19px 29px 17px 26px;
}

html[data-theme="chapchap"] .report-stats article:nth-child(1) {
  border-radius: 24px 17px 27px 15px;
  background-color: #ffcec0;
}

html[data-theme="chapchap"] .report-stats article:nth-child(2) {
  border-radius: 17px 26px 15px 23px;
  background-color: #ffe184;
}

html[data-theme="chapchap"] .report-stats article:nth-child(3) {
  border-radius: 27px 18px 24px 16px;
  background-color: #d4f1e7;
}

html[data-theme="chapchap"] .members-card {
  border-radius: 28px 18px 25px 17px;
  background-color: #fff7d6;
}

html[data-theme="chapchap"] :is(.member-card, .setting-row) {
  border-color: color-mix(in srgb, var(--strong-border) 40%, transparent);
  border-width: 2px;
  border-style: dashed;
}

html[data-theme="chapchap"] .setting-row > span:first-child {
  border: 2px solid var(--strong-border);
  background: #ffd32f;
  color: var(--text);
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
}

html[data-theme="chapchap"] .setting-row > i {
  border: 2px solid var(--strong-border);
  background: #fff7d6;
}

html[data-theme="chapchap"] .setting-row > i::after {
  top: 1px;
  left: 1px;
  border: 2px solid var(--strong-border);
  background: #fff;
}

html[data-theme="chapchap"] .setting-row input:checked ~ i {
  background: #ffd32f;
}

html[data-theme="chapchap"] :is(.compact-dialog, .entry-dialog) {
  border-color: var(--strong-border);
  background:
    repeating-linear-gradient(166deg, rgba(37, 35, 47, 0.03) 0 1px, transparent 1px 6px),
    #fff7d6;
}

html[data-theme="chapchap"] :is(.compact-dialog, .entry-dialog) header {
  padding-bottom: 16px;
  border-bottom: 3px dashed color-mix(in srgb, var(--strong-border) 44%, transparent);
}

html[data-theme="chapchap"] .entry-dialog header {
  background: #ffe184;
}

html[data-theme="chapchap"] .mission-dialog form {
  background:
    repeating-linear-gradient(14deg, rgba(8, 115, 106, 0.035) 0 1px, transparent 1px 6px),
    #d4f1e7;
}

html[data-theme="chapchap"] .theme-options button {
  min-height: 68px;
  border: 2px solid var(--strong-border);
  border-radius: 16px 11px 18px 10px;
  background: #fff;
}

html[data-theme="chapchap"] .theme-options button.is-selected {
  border-color: var(--strong-border);
  background: #ffe184;
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
}

html[data-theme="chapchap"] :is(
  .entry-type-segment label > span,
  .scope-segment span,
  .payer-select label > span,
  .category-select label > span
) {
  min-height: 48px;
  border: 2px solid var(--strong-border);
  border-radius: 14px 10px 16px 9px;
  background: #fff;
  color: var(--text);
}

html[data-theme="chapchap"] .scope-segment {
  gap: 7px;
  padding: 7px;
  border: 2px solid var(--strong-border);
  background: #bdebdc;
}

html[data-theme="chapchap"] :is(
  .entry-type-segment input:checked + span,
  .scope-segment input:checked + span,
  .payer-select input:checked + span,
  .category-select input:checked + span
) {
  border-color: var(--strong-border);
  background: #ffd32f;
  color: var(--text);
  box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px var(--strong-border);
}

html[data-theme="chapchap"] :is(
  .mission-field input,
  .mission-field select,
  .form-row select,
  .form-row input,
  .memo-field input,
  .secret-note input
) {
  min-height: 48px;
  border: 2px solid var(--strong-border);
  border-radius: 14px 10px 16px 9px;
  background: #fff;
}

html[data-theme="chapchap"] .amount-field > div {
  padding: 0 13px;
  border: 3px solid var(--strong-border);
  border-radius: 18px 12px 20px 11px;
  background: #ffe184;
  box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px var(--strong-border);
}

html[data-theme="chapchap"] .secret-note {
  border: 2px solid var(--strong-border);
  border-radius: 17px 12px 19px 11px;
  background: #ffcec0;
}

html[data-theme="chapchap"] .invite-link > div {
  min-height: 50px;
  border: 2px solid var(--strong-border);
  border-radius: 15px 10px 17px 9px;
  background: #ffe184;
}

html[data-theme="chapchap"] .toast {
  border: 3px solid var(--strong-border);
  background: #fff7d6;
  color: var(--text);
}

@media (max-width: 640px) {
  html[data-theme="chapchap"] #panel-today > .page-heading > div:first-child {
    width: min(270px, 86%);
  }

  html[data-theme="chapchap"] #panel-today > .page-heading h1 {
    font-size: 1.72rem;
    white-space: nowrap;
  }

  /* 일러스트 히어로가 388px라 360px 이하에서는 잔액이 탭바 아래로 밀린다. 여기서만 조인다. */
  @media (max-width: 360px) {
    html[data-theme="chapchap"] #panel-today > .page-heading {
      gap: 10px;
      padding: 12px;
    }

    html[data-theme="chapchap"] #panel-today > .page-heading h1 {
      font-size: 1.5rem;
    }

    html[data-theme="chapchap"] #panel-today > .page-heading > div:first-child {
      margin: 0 0 2px;
      padding: 9px 13px 11px;
    }

    html[data-theme="chapchap"] #panel-today > .page-heading .heading-side {
      margin: 2px 0 0;
      padding: 9px 10px;
    }
  }

  html[data-theme="chapchap"] .today-layout {
    grid-template-columns: 1fr;
  }

  html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading {
    min-height: 0;
    margin-bottom: 26px;
    padding: 20px 18px;
    border-radius: 23px 16px 25px 15px;
    box-shadow: 0 0 0 3px #fff, 4px 5px 0 3px var(--strong-border);
  }

  html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading h1 {
    max-width: none;
    font-size: 2.3rem;
  }

  html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading > :is(button, .report-heading-actions) {
    width: 100%;
  }

  html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading > button {
    justify-content: center;
  }

    html[data-theme="chapchap"] .tab-panel:not(#panel-today) > .page-heading::after {
    top: 18px;
    right: 18px;
    bottom: auto;
    width: 25px;
    height: 25px;
  }

  html[data-theme="chapchap"] .tool-row {
    gap: 14px;
    margin-bottom: 28px;
  }

  html[data-theme="chapchap"] .filter-group {
    padding: 4px 4px 7px;
  }

  html[data-theme="chapchap"] .transaction-table {
    padding-inline: 16px;
  }

  html[data-theme="chapchap"] .date-group > header {
    width: calc(100% - 16px);
    justify-content: space-between;
  }

  html[data-theme="chapchap"] .mission-card {
    padding: 22px 18px;
  }

  html[data-theme="chapchap"] .mission-progress {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 2px dashed color-mix(in srgb, var(--strong-border) 42%, transparent);
    border-left: 0;
  }
  html[data-theme="chapchap"] .report-chart,
  html[data-theme="chapchap"] .members-card {
    padding: 22px 18px;
  }

  html[data-theme="chapchap"] .report-stats {
    gap: 14px;
  }

  html[data-theme="chapchap"] .entry-dialog form,
  html[data-theme="chapchap"] .mission-dialog form {
    --sheet-pad-x: 20px;
    --sheet-pad-y: 22px;
    padding: var(--sheet-pad-y) var(--sheet-pad-x) calc(22px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  html[data-theme="chapchap"] {
    --shadow: 0 0 0 2px #fff, 3px 4px 0 2px #25232f;
    --shadow-lg: 0 0 0 3px #fff, 4px 5px 0 3px #25232f;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


.auth-gate {
  position: fixed;
  inset: 0 0 auto;
  height: var(--sheet-viewport-height, 100dvh);
  /* 헤더(100)·탭(120)·FAB(130) 위에 와야 한다. 그 아래에 두면 로그인 전에
     앱 껍데기가 그대로 보인다. 토스트(1500)보다는 아래에 둔다. */
  z-index: 1400;
  display: grid;
  place-items: safe center;
  padding: 24px 16px;
  background: var(--bg);
  /* 카드가 화면보다 길어지면 세로로만 흐른다. 가로 스크롤은 어떤 폭에서도 없다. */
  overflow-y: auto;
  overflow-x: hidden;
}

.auth-gate[hidden] {
  display: none;
}

/* 단계 전환에 display를 쓰는 규칙이 뒤에 붙어 hidden을 무력화하는 일이 없도록
   여기서 못을 박는다. */
.auth-gate [hidden] {
  display: none !important;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 32px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 28px;
}

.auth-brand > strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text);
  line-height: 1.2;
}

.auth-brand > small {
  font-size: 0.82rem;
  color: var(--faint);
}

.auth-lead {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

.auth-sub {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  /* 두 줄로 접히되 단어 중간에서 끊기지 않게. */
  word-break: keep-all;
}

.kakao-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  /* 카카오가 지정한 색이라 테마와 무관하게 유지한다. 바꾸면 못 알아본다. */
  background: #fee500;
  color: #191600;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--fast) var(--ease);
}

.kakao-button:hover {
  filter: brightness(0.96);
}

.kakao-mark {
  width: 20px;
  height: 20px;
  fill: #191600;
  stroke: none;
  flex-shrink: 0;
}

.auth-field {
  display: block;
  margin-top: 24px;
  text-align: left;
}

.auth-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.auth-field > input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

.auth-field > input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.auth-field > small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
  word-break: keep-all;
}

.auth-field > input[aria-invalid="true"] {
  border-color: var(--warning);
}

.auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  justify-content: center;
}

.auth-note {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--warning);
  line-height: 1.5;
  word-break: keep-all;
}

/* 설정의 내 계정.

   **이 카드에는 안쪽 여백이 아예 없었다.** `.surface`가 테두리와 모서리만
   주는데 `.account-card`를 위한 규칙이 어디에도 없어서, 제목과 아바타가
   테두리에 붙고 오른쪽 `로그아웃`이 카드 밖으로 밀려 있었다.
   옆 카드들과 같은 값을 쓴다 — 여백 선언은 이 파일 위쪽의 `.members-card,
   .methods-card, …` 목록에 넣었다. **여기 따로 두면 640px 미디어쿼리를 이긴다**
   — 같은 특이도라 파일에서 뒤에 오는 쪽이 이기고, 실제로 폰에서만 28px로
   남아 옆 카드들(22/18)과 어긋났다.

   글자 크기도 이 화면에서 혼자 컸다 — 이름 0.96rem에 부제 0.82rem이라
   바로 위 `함께 쓰는 사람`(0.78 / 0.6)보다 한참 굵었다. 같은 사람 줄인데
   크기가 다르면 다른 화면에서 옮겨온 것처럼 보인다. 맞춘다. */
.account-row {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 82px;
}

.account-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.account-row strong {
  color: var(--text);
  font-size: 0.78rem;
}

/* **`> div >`가 반드시 있어야 한다.** 아바타도 `<span class="avatar large">`라
   그냥 `.account-row span`으로 쓰면 (0,2,0)이 `.avatar`의 (0,1,0)을 이겨
   **아바타 글자가 muted가 된다** — 초록 바탕에 회색이라 대비 1.25로 사실상
   안 보였다. 이 화면이 만들어진 뒤로 계속 그랬고(2026-08-08에 잼),
   구성원 목록의 같은 아바타는 4.83이라 나란히 두면 하나만 비어 보인다. */
.account-row > div > span {
  color: var(--muted);
  font-size: 0.6rem;
}

/* 구성원 줄의 `나` 배지와 같은 자리, 같은 모양이다. 그 줄에서는 알약이고
   여기서만 맨 글자면 두 줄이 다른 종류처럼 보인다. */
.account-row > button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.58rem;
}

@media (max-width: 360px) {
  .auth-card {
    padding: 24px 18px;
  }

  .auth-brand > strong {
    font-size: 1.42rem;
  }

  /* 가장 좁은 폰에서는 기념일을 접는다. 로고와 `2026. 08`과 `기록하기`만으로도
     헤더가 빠듯해서, 여기까지 두면 셋이 서로를 민다.
     **잃는 것이 없다** — 같은 값을 설정 화면이 언제나 말한다. */
  .header-dday {
    display: none;
  }
}

/* 검색·필터에 걸린 게 없을 때. 빈 목록만 남으면 고장난 것처럼 보인다. */
.history-empty {
  padding: 28px 16px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* 기록 상세 시트. 목록 행에는 지울 자리가 없어서(5칸 그리드) 여기로 뺐다. */
.entry-detail-amount {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 2rem;
  /* 금액은 줄바꿈하지 않는다. ￦와 숫자가 갈리면 다른 값처럼 읽힌다. */
  white-space: nowrap;
}

.entry-detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  margin: 18px 0 0;
  font-size: 0.9rem;
}

.entry-detail-list dt {
  color: var(--muted);
  white-space: nowrap;
}

.entry-detail-list dd {
  margin: 0;
  /* 긴 메모가 시트를 넓히지 못하게 한다. 넓어지면 좁은 폭에서 가로 스크롤이 난다. */
  min-width: 0;
  overflow-wrap: break-word;
  text-align: right;
}

.entry-detail-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.entry-detail-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.entry-detail-actions:not(:has(button:not([hidden]))) {
  display: none;
}

.entry-detail-actions > button {
  width: 100%;
  min-height: 48px;
  margin: 0;
}

.entry-save-error {
  margin: 0 0 10px;
  color: var(--warning);
  font-size: 0.85rem;
  line-height: 1.5;
}

.entry-save-error:empty {
  display: none;
}

.danger-button {
  width: 100%;
  min-height: 44px;
  margin-top: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--warning);
  font-size: 0.95rem;
}

.danger-button:hover {
  border-color: var(--warning);
  background: var(--warning-soft);
}

/* 초대 수락 화면. 카카오 버튼과 같은 자리·같은 폭이어야 로그인 흐름의 연장으로 읽힌다. */
.auth-step[data-step="invite"] .primary-button {
  width: 100%;
  min-height: 48px;
  margin-top: 24px;
}

.auth-skip {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* 예산 편집 시트. **칸이 하나뿐이다.** 분류별 줄은 걷어냈다 —
   예산 한 번 정하는 데 열 칸을 채워야 하면 아무도 안 지난다. */
.budget-field {
  display: grid;
  gap: 7px;
  margin-top: 18px;
}

.budget-field > span {
  color: var(--muted);
  font-size: 0.72rem;
}

/* **저장 버튼에 규칙이 없었다.** 예전에는 금액 칸 다음에 분류별 줄과 분류
   고르기가 있어서 버튼이 그것들 밑에 붙었고, 그 사이 여백은 앞 칸의
   margin-top이 만들고 있었다. 분류를 걷어내니 버튼이 입력 칸에 그대로
   달라붙었다 — 없던 규칙이 드러난 것이지 새로 생긴 문제가 아니다.

   미션 시트의 `.mission-save`와 같은 값을 쓴다. 같은 자리의 같은 버튼이
   시트마다 다르게 생길 이유가 없다. */
.budget-save {
  width: 100%;
  margin-top: 22px;
}

.budget-field input,
.budget-field select,
.budget-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 1rem;
}

.budget-field textarea {
  min-height: 112px;
  padding-block: 12px;
  line-height: 1.55;
  resize: vertical;
}

.budget-field > span small {
  font-size: inherit;
  font-weight: 400;
}

.budget-field .field-help,
.budget-field .field-error {
  font-size: 0.64rem;
  line-height: 1.5;
}

.budget-field .field-help {
  color: var(--muted);
}

.budget-field .field-error {
  min-height: 0;
  color: var(--warning);
}

.budget-field .field-error:empty {
  display: none;
}

.budget-field :is(input, textarea)[aria-invalid="true"] {
  border-color: var(--warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent);
}

/* 여기 `.budget-empty`가 하나 더 있었다. 격자 안의 `분류별 예산은 아직 없어요`
   문단에 쓰던 것인데, **파일 뒤쪽이라 위의 빈 상태 카드(1478행)를 이기고 있었다.**
   카드가 padding 36px 대신 22px에 muted 색으로 그려지던 이유다. 같이 지웠다. */

/* `.together-invite`와 `.settlement-note`가 여기 있었다. 혼자일 때 함께
   카드가 이고 있던 `함께 쓸 사람 부르기`와, 둘일 때의
   `정산할 필요 없이 함께 보는 생활비예요`다. 초대는 헤더로 올라갔고
   (2026-08-08) 정산 안내는 카드가 이미 쓰는 돈을 보여주므로 걷었다. */

/* 가리기 체크박스. 라디오(어느 돈)와 다른 축이라 모양도 달라야 한다 —
   나란히 두면 넷 중 하나를 고르는 것처럼 읽힌다. */
.hide-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  cursor: pointer;
}

.hide-toggle input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.hide-toggle > span {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.hide-toggle svg {
  width: 15px;
  color: var(--muted);
}

.hide-toggle strong {
  font-size: 0.9rem;
}

.hide-toggle small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.hide-toggle:has(input:checked) {
  border-color: var(--accent);
}

.hide-toggle:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 기록 가리기는 개인 지출의 보조 옵션. 한 줄 전체를 눌러 선택한다. */
:is(#hide-toggle, #plan-hide-toggle) {
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

:is(#hide-toggle, #plan-hide-toggle) input {
  width: 18px;
  height: 18px;
  margin: 0;
}

:is(#hide-toggle, #plan-hide-toggle) > span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
}

:is(#secret-note, #plan-secret-note) {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 0 28px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:is(#secret-note, #plan-secret-note) > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#secret-note label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

#secret-note label > span {
  font-size: 13px;
}

#secret-note label small {
  color: var(--muted);
  font-size: 12px;
}

#secret-note .date-picker-trigger {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  font-size: 14px;
}

@media (max-width: 359px) {
  #secret-note label {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* Quiet UI: consistent headings, sheets and room for long names. */
html[data-theme="quiet"] #panel-today :is(.page-heading, .section-heading, .today-plans-heading) .text-button {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 14px;
}

html[data-theme="quiet"] #mission-scope-field {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-theme="quiet"] :is(#mission-form, #budget-form, #anniversary-form) {
  --sheet-pad-x: 26px;
  --sheet-pad-y: 26px;
  padding: var(--sheet-pad-y) var(--sheet-pad-x) 0;
}

html[data-theme="quiet"] :is(#budget-dialog, #anniversary-dialog) {
  padding: 0;
}

html[data-theme="quiet"] :is(#mission-form, #budget-form, #anniversary-form) > header {
  position: sticky;
  z-index: 5;
  top: 0;
  margin: calc(var(--sheet-pad-y) * -1) calc(var(--sheet-pad-x) * -1) 0;
  padding: var(--sheet-pad-y) var(--sheet-pad-x) 12px;
  background: var(--surface);
}

html[data-theme="quiet"] .entry-savebar > .primary-button {
  width: 100%;
  border-radius: var(--radius-sm);
}

html[data-theme="quiet"] #plan-scope-note {
  margin: 0 0 0 28px;
  line-height: 1.5;
}

html[data-theme="quiet"] .scope-segment {
  grid-auto-columns: minmax(0, 1fr);
}

html[data-theme="quiet"] .method-owner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-theme="quiet"] .method-owner label {
  min-width: 0;
}

html[data-theme="quiet"] .method-owner label > span {
  height: 100%;
  min-width: 0;
  padding: 8px 6px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  text-align: center;
}

html[data-theme="quiet"] :is(.transaction-main, .member-card > div, .method-row > div,
  .account-row > div, .setting-row > span, .mission-copy, .mission-row-title) {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-theme="quiet"] :is(.mission-row, .mission-past li) {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

html[data-theme="quiet"] .mission-row > button.mission-row-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

html[data-theme="quiet"] .mission-row-count {
  white-space: nowrap;
}

/* 추가 버튼은 탭 위의 떠 있는 알약이다. 본문을 가리는 가로 배경 바는 두지 않는다. */
.mobile-add > span {
  display: none;
}

@media (max-width: 1024px) {
  html[data-theme="quiet"] .mobile-add {
    display: inline-flex;
    width: auto;
    height: 44px;
    min-width: 112px;
    justify-content: center;
    gap: 6px;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    padding: 0 16px;
    border-radius: 999px;
    box-shadow: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  html[data-theme="quiet"] .mobile-add > span {
    display: inline;
    font-size: 14px;
  }

  html[data-theme="quiet"] .mobile-add svg {
    width: 18px;
    height: 18px;
  }

  html[data-theme="quiet"] body:has(.mobile-add:not([hidden])) .app-main {
    padding-bottom: calc(162px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  html[data-theme="quiet"] :is(#mission-form, #budget-form, #anniversary-form) {
    --sheet-pad-x: 16px;
    --sheet-pad-y: 18px;
  }

  html[data-theme="quiet"] .transaction-row:not(.calendar-preview-row) {
    padding-block: 14px;
  }

  html[data-theme="quiet"] .transaction-main > span {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 359px) {
  html[data-theme="quiet"] .transaction-row:not(.calendar-preview-row) {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: 8px;
  }

  html[data-theme="quiet"] .transaction-row:not(.calendar-preview-row) .transaction-price {
    grid-column: 2;
    justify-self: end;
  }

  html[data-theme="quiet"] .account-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  html[data-theme="quiet"] .method-owner {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-theme="quiet"] .method-owner label > span {
    justify-content: flex-start;
    padding-inline: 12px;
    text-align: left;
  }
}

/* 목록의 선은 보이는 항목 사이에만 둔다. 끝선 대신 실제로 이어지는
   초대·추가·더 보기 영역의 위쪽에 경계를 둬 빈 목록에도 선이 남지 않게 한다. */
html[data-theme="quiet"] :is(.member-card, .method-row, .setting-row, .method-more) {
  border-bottom: 0;
}

html[data-theme="quiet"] :is(
  .member-card:not([hidden]) ~ .member-card:not([hidden]),
  .method-row:not([hidden]) ~ .method-row:not([hidden]),
  .setting-row:not([hidden]) ~ .setting-row:not([hidden]),
  #member-list:not(:empty) + .member-add:not([hidden]),
  #method-list:not(:empty) ~ .method-more:not([hidden]),
  #method-list:not(:empty) ~ .method-add:not([hidden])
) {
  border-top: 1px solid var(--border);
}

html[data-theme="quiet"] .method-more {
  margin-top: 0;
}

html[data-theme="quiet"] #wealth-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

html[data-theme="quiet"] .wealth-copy > div {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
}

html[data-theme="quiet"] .wealth-copy strong {
  white-space: nowrap;
  font-size: min(32px, calc(100cqi / (var(--amount-length, 13) * 0.72)));
}

html[data-theme="quiet"] .wealth-breakdown strong {
  font-size: clamp(16px, 4vw, 22px);
  white-space: nowrap;
}

@media (max-width: 640px) {
  html[data-theme="quiet"] #panel-today :is(.page-heading, .section-heading, .today-plans-heading) .text-button {
    font-size: 13px;
  }
}

@media (max-width: 359px) {
  html[data-theme="quiet"] .wealth-breakdown {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  html[data-theme="quiet"] .wealth-breakdown > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    border: 0;
  }
}

/* Personal default for new expenses; the original record keeps its method. */
.method-default-field { display:grid; gap:10px; margin:16px 0 8px; }
.method-default-field > label { font-size:.85rem; color:var(--muted); }
.method-default-field > small { color:var(--muted); font-size:.75rem; line-height:1.6; }
.method-row .method-default-badge { display:inline-block; margin-left:8px; padding:3px 7px; border-radius:6px; background:var(--surface-soft); color:var(--accent); font-size:.65rem; vertical-align:middle; }
#method-picker-error:empty { display:none; }