/* 색은 한 곳에서 정한다. 기기가 어두운 화면이어도 밝은 파스텔 그대로 보인다.
   문구점 같은 파스텔로 간다. 바탕은 복숭아빛 크림, 머리는 청록 띠,
   탭은 분홍 띠, 제목과 글자 강조는 진한 산호, 채우는 강조는 분홍이다.
   분홍 바탕 위에는 흰 글자 대신 진한 자두색을 얹는다. 흰 글자는 대비가 모자란다. */
:root {
  color-scheme: light;
  --bg: #fffaf6;
  --surface: #ffffff;
  --line: #f3dcd2;
  --ink: #4a3a36;
  --muted: #7d6760;

  /* 채우는 강조. 단추, 고른 탭, 오늘 날짜. */
  --accent: #f29fc0;
  --accent-strong: #ea88b0;
  --accent-soft: #fde4ec;
  --accent-ink: #4a2034;
  /* 글자 강조. 제목, 고리, 고른 표시. 흰 바탕에서 읽혀야 한다. */
  --accent-text: #b8491f;

  /* 띠 색. 머리줄 위 청록, 탭 줄 분홍. */
  --teal: #8ec3c4;
  --teal-ink: #1f4a4c;
  --band: #fcd6e1;
  --band-ink: #9e3c17;
  --mustard: #fbb84f;

  /* 토요일. 달력 관례대로 푸른 쪽에 둔다. */
  --sat: #2c7478;

  --warn: #c2410c;
  --warn-soft: #ffeadd;
  /* 지우기처럼 되돌리기 어려운 동작. 경고(주황)나 글자 강조(산호)와 헷갈리지 않게 붉은 쪽에 둔다. */
  --danger: #b42343;
  --danger-soft: #fdecef;

  /* 미세먼지 등급. 에어코리아의 파랑·초록·주황·빨강을 따르되 글자가 읽히게 진하게 둔다. */
  --dust-good: #1d4f91;
  --dust-good-bg: #dcebfd;
  --dust-moderate: #17693a;
  --dust-moderate-bg: #dcf5e4;
  --dust-bad: #9a3a0c;
  --dust-bad-bg: #ffe8d3;
  --dust-worst: #9b1c1c;
  --dust-worst-bg: #fde0e0;

  /* 구역 색. 허브 입구와 요약 상자가 돌려 쓴다. */
  --tint-1: #ffe6d9;
  --tint-2: #dcefef;
  --tint-3: #fff0cc;
  --tint-4: #fde2ea;
  --tint-5: #ffdccd;

  --accent-shade: #d97aa3;
  --mustard-ink: #5a3a0a;
  --teal-deep: #2c7478;

  /* 글자마다 돌려 입히는 네 가지. 로고와 첫 화면 제목에 쓴다. */
  --c-pink: #d9588b;
  --c-mustard: #c97d05;
  --c-teal: #3a8c8f;
  --c-coral: #dc5a24;
  --brand-shadow: #fbe1d6;

  /* 바탕 무늬. 승인 화면(.gate)의 복숭아빛 바탕, 점선 박음질, 모눈. */
  --hero: #fde6db;
  --stitch: #f5cbd8;
  --grid: rgb(243 220 210 / 0.45);

  /* 색 딱지. 흰 제목의 테두리와 손글씨는 짝지은 진한 색으로 적는다. */
  --tile-pink: #efa3c6;
  --tile-pink-ink: #a2355f;
  --tile-mustard: #fcb94f;
  --tile-mustard-ink: #8a4f00;
  --tile-coral: #f07c4b;
  --tile-coral-ink: #8f2f0c;
  --tile-peach: #f9b7a0;
  --tile-peach-ink: #9a3f22;

  --display: "Jua", "Nunito", "Noto Sans KR", system-ui, sans-serif;
  --script: "Nanum Pen Script", "Jua", cursive;
  --body: "Nunito", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow: 0 1px 2px rgb(150 90 70 / 0.06), 0 10px 24px -6px rgb(150 90 70 / 0.14);
  --radius: 24px;
  --gap: 16px;

  /* 사람 색. 달력에서 누구의 일정인지 가른다. 가족 목록 차례대로 붙으므로
     첫째가 파랑, 둘째가 빨강, 셋째가 초록이다. 뒤의 셋은 사람이 늘 때의 자리다.

     가계부 용도도 같은 판을 쓴다. 가족 이름으로 된 용도가 1~3을 받아 일정과
     같은 사람이 같은 색이다. 7~10은 용도를 더할 때 고르는 자리다. */
  /* 월별 흐름 그림의 두 갈래. 색약 검사(ΔE 30 이상)를 통과한 짝이다. */
  --chart-in: #2563eb;
  --chart-out: #dc5a24;
  --who-1: #2563eb;
  --who-2: #dc2626;
  --who-3: #16a34a;
  --who-4: #ea580c;
  --who-5: #7c3aed;
  --who-6: #0d9488;
  --who-7: #ca8a04;
  --who-8: #db2777;
  --who-9: #4b5563;
  --who-10: #0891b2;
}

* { box-sizing: border-box; }

/* 화면 전환은 hidden 속성으로만 한다.
   클래스 선택자가 display를 정하면 브라우저 기본 [hidden]보다 우선해서
   숨긴 요소가 그대로 보인다. 여기서 한 번 못박아 둔다. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--bg);
  /* 옅은 모눈. 공책 위에 붙인 것처럼 보이게 한다. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.6 var(--body);
  -webkit-text-size-adjust: 100%;
  /* 화면 끝까지 펴는 띠들이 가로 스크롤을 만들지 않게 한다. */
  overflow-x: clip;
}

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; }
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1.3rem; margin: 0 0 10px; line-height: 1.3; }
h3 { font-size: 0.98rem; margin: 0 0 6px; }

/* 손글씨. 부제와 인사에 곁들인다. 본문에는 쓰지 않는다. */
.script { font-family: var(--script); font-weight: 400; line-height: 1.1; }

/* 흰 글자에 진한 테두리를 둘러 스티커처럼 만든다. 파스텔 바탕 위에서도 읽힌다. */
.sticker {
  font-family: var(--display);
  font-weight: 400;
  color: #fff;
  --outline: #a8401a;
  text-shadow:
    2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 2px 0 var(--outline), 0 -2px 0 var(--outline),
    1.5px 1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px -1.5px 0 var(--outline),
    0 4px 0 var(--outline);
}

/* 글자마다 돌려 입히는 네 가지. 큰 글자 대비(3:1)를 넘기도록 조금 진하게 둔다. */
.brand span:nth-of-type(4n+1) { color: var(--c-pink); }
.brand span:nth-of-type(4n+2) { color: var(--c-mustard); }
.brand span:nth-of-type(4n+3) { color: var(--c-teal); }
.brand span:nth-of-type(4n+4) { color: var(--c-coral); }

/* ---------- 머리 ---------- */

/* 맨 위 청록 띠. 오늘 날짜를 작게, 넓게 벌려 적는다. */
.announce {
  margin: 0;
  padding: 7px 16px;
  background: var(--teal);
  color: var(--teal-ink);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 16px;
  background: var(--surface);
}
.mast-left, .mast-right { display: flex; align-items: center; gap: 10px; }
.mast-right { justify-content: flex-end; }
.whoami { font-family: var(--script); font-size: 1.45rem; color: var(--muted); white-space: nowrap; }

.logo { text-align: center; }
.brand { font-family: var(--display); font-size: clamp(2.3rem, 6vw, 3.3rem); line-height: 1; letter-spacing: 0.02em; }
/* 글자를 조금씩 기울여 손으로 오려 붙인 느낌을 낸다. */
.brand span { display: inline-block; text-shadow: 0 3px 0 var(--brand-shadow); }
.brand span:nth-of-type(1) { transform: rotate(-6deg); }
.brand span:nth-of-type(2) { transform: rotate(4deg) translateY(2px); }
.brand span:nth-of-type(3) { transform: rotate(-3deg) translateY(-2px); }
.brand span:nth-of-type(4) { transform: rotate(5deg); }
.brand span:nth-of-type(5) { transform: rotate(-4deg) translateY(1px); }
.brand span:nth-of-type(6) { transform: rotate(6deg) translateY(-1px); }

/* 로고는 첫 화면으로 가는 단추다. 단추 꾸밈은 떼고 글자만 남긴다. */
.home-link {
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}
.home-link:hover { background: none; box-shadow: none; transform: translateY(-2px) rotate(-1deg); }
.home-link:active { box-shadow: none; transform: translateY(1px); }
.brand .home-link span { display: inline-block; }

/* 탭 줄의 작은 로고. 로고 줄이 화면 밖으로 나가면 왼쪽에서 밀려 나온다. */
.tabs .mini-logo {
  /* 가운데 모으기 여백보다 앞, 줄의 맨 왼쪽에 둔다. */
  order: -1;
  flex: 0 0 auto;
  align-self: center;
  max-width: 0;
  overflow: hidden;
  /* 숨어 있는 동안 폭이 0이라도 글자가 세로로 쌓여 줄을 늘리지 않게 한다. */
  white-space: nowrap;
  opacity: 0;
  padding: 0;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.02em;
  visibility: hidden;
  transition: max-width 0.3s ease, opacity 0.3s ease, padding 0.3s ease, visibility 0.3s;
}
.tabs .mini-logo:hover { transform: translateY(-1px) rotate(-2deg); }
.mini-logo span { display: inline-block; text-shadow: 0 2px 0 rgb(255 255 255 / 0.7); }
.mini-logo span:nth-child(4n+1) { color: var(--c-pink); }
.mini-logo span:nth-child(4n+2) { color: var(--c-mustard); }
.mini-logo span:nth-child(4n+3) { color: var(--c-teal); }
.mini-logo span:nth-child(4n+4) { color: var(--c-coral); }
.mini-logo span:nth-child(odd) { transform: rotate(-5deg); }
.mini-logo span:nth-child(even) { transform: rotate(4deg); }
.tabs.stuck .mini-logo { max-width: 8em; opacity: 1; padding: 4px 10px; visibility: visible; }
.tagline {
  margin: 8px 0 0;
  color: var(--c-teal);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}
.tagline::before, .tagline::after { content: "●"; color: var(--c-pink); font-size: 0.5rem; vertical-align: middle; margin: 0 0.8em; }

/* 동그란 보조 단추. 문구점 로고 옆의 동그란 단추처럼 겨자색으로 둔다. */
.utils { display: flex; gap: 8px; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--mustard);
  color: var(--mustard-ink);
  box-shadow: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--accent); color: var(--accent-ink); transform: rotate(-10deg) scale(1.06); box-shadow: none; }
.icon-btn[aria-current] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.icon-btn.plain { background: transparent; color: var(--ink); }
.icon-btn.plain:hover { background: var(--accent-soft); color: var(--accent-text); }

/* 분홍 탭 줄. 맨 위에 붙는다. 넓으면 가운데로 모이고, 좁으면 옆으로 민다. */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 16px;
  background: var(--band);
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 6px 14px -10px rgb(160 60 90 / 0.5);
}
/* 가운데 모으기. 넘칠 때는 앞이 잘리지 않고 처음부터 보인다. */
.tabs::before, .tabs::after { content: ""; margin: auto; }

.tabs button {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--band-ink);
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
}
.tabs button:hover { background: transparent; color: var(--accent-text); transform: translateY(-1px); box-shadow: none; }
.tabs button[aria-current="page"] { color: var(--accent-text); }
/* 고른 탭 아래에 작은 하트를 단다. 색만으로 알리지 않는다. */
.tabs button[aria-current="page"]::after {
  content: "♥";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--c-coral);
  letter-spacing: 0;
}

/* 화면이 짧아도 바닥 띠는 맨 아래에 둔다. */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

/* 읽는 화면은 글줄이 너무 길어지지 않게 묶어 둔다. */
/* 모든 화면이 같은 너비다. 큰 화면에서는 1600까지 넓혀 달력 칸과 가계부
   현황표에 자리를 준다. 메뉴를 옮겨도 폭이 흔들리지 않는다. */
main { flex: 1 0 auto; width: 100%; padding: 24px var(--gap); max-width: 1600px; margin: 0 auto; }

/* ---------- 카드와 입력 ---------- */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow);
}

/* 다른 화면에서 카드로 바로 내려올 때 붙어 있는 탭 줄에 가리지 않게 한다. */
#panel > .card { scroll-margin-top: calc(var(--stick, 60px) + 16px); }

.card > h2, .card-head > h2 { color: var(--accent-text); display: flex; align-items: center; gap: 8px; }
.card > h2::before, .card-head > h2::before { content: "✿"; color: var(--c-pink); font-size: 1.05em; }
.card > h2:empty { display: none; }
/* 카드 머리. 왼쪽에 제목, 오른쪽에 그 카드의 단추 하나. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-head > h2 { margin: 0; }

/* 바느질 선. 흰 카드 안쪽에 점선을 한 겹 두른다. */
.stitched::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed var(--stitch);
  border-radius: calc(var(--radius) - 8px);
  pointer-events: none;
}

/* 마스킹 테이프. 카드 위에 비스듬히 붙인다. */
.taped { margin-top: 18px; }
.taped::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 118px;
  height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.35) 0 6px, transparent 6px 12px),
    color-mix(in srgb, var(--mustard) 70%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }
.row > button { flex: 0 0 auto; }

label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }

input, select, textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
}

textarea { min-height: 72px; resize: vertical; }

/* 단추는 알약 모양. 아래에 진한 그림자를 둬서 눌리는 스티커처럼 만든다. */
button {
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-family: var(--display);
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--accent-shade);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}

button:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 4px 0 var(--accent-shade); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-shade); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }

button:disabled,
button:disabled:hover {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button.link {
  background: transparent;
  color: var(--accent-text);
  padding: 4px 8px;
  font-family: var(--body);
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  box-shadow: none;
}

button.link:hover { background: var(--accent-soft); transform: none; box-shadow: none; }
button.ghost { background: var(--surface); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent), 0 3px 0 var(--accent-soft); }
button.ghost:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent), 0 4px 0 var(--accent-soft); }
/* 되돌리기 어려운 동작. 모양은 옆 단추와 같고 색만 경고색이다. */
button.ghost.danger { color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger), 0 3px 0 var(--danger-soft); }
button.ghost.danger:hover { background: var(--danger-soft); box-shadow: inset 0 0 0 2px var(--danger), 0 4px 0 var(--danger-soft); }

ul.list { list-style: none; margin: 0; padding: 0; }

ul.list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 2px dotted var(--line);
}

ul.list li:last-child { border-bottom: 0; }

.meta { color: var(--muted); font-size: 0.85rem; }
.money-words { display: block; margin-top: 2px; }
.money-input { font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }
.empty { color: var(--muted); padding: 12px 0; }

/* 상태를 색으로만 구분하지 않는다. 문구를 함께 둔다. */
.tag {
  background: var(--tint-2);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--teal-deep);
}

.tag.attention { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }

/* 실패가 아닌 주의. 되돌릴 수 없는 결과나 빠진 자료를 알린다. 오류와 같은 모양이면
   "무언가 고장 났다"로 읽히고, 정작 오류가 났을 때 눈에 띄지 않는다. */
.caution {
  color: var(--tile-mustard-ink);
  background: #fff6e0;
  border: 2px solid var(--tile-mustard);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 12px;
}

.error {
  color: var(--warn);
  background: var(--warn-soft);
  border: 2px dashed var(--warn);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 12px;
}

.missing { margin: 6px 0 0; padding-left: 18px; }

/* 달력 자료가 비었거나 낡았을 때만 뜨는 줄. 평소에는 없다. */
.cal-notice {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.9rem;
}

/* 저장하기 전에 겹치는 일정을 보여 주고 확인을 받는 자리. */
.confirm-box {
  border: 2px dashed var(--warn);
  background: var(--warn-soft);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.confirm-box strong { color: var(--warn); }
.confirm-box .list { margin: 8px 0; }
.confirm-box .row { margin-top: 4px; }

/* ---------- 바닥 ---------- */

.foot { padding: 8px 0 0; text-align: center; color: var(--muted); font-size: 0.85rem; }
/* 알릴 말. 화면 아래 가운데에 떠서 몇 초 뒤 사라진다. 떠 있는 대화 단추보다 위다. */
#status {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  max-width: min(92vw, 520px);
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.92rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 60;
}
#status.show { opacity: 1; transform: translate(-50%, 0); }
#status.show.actionable { pointer-events: auto; }
.toast-action { margin-left: 8px; padding: 6px 12px; min-height: 36px; border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { #status { transition: none; } }
.foot-band {
  margin: 0;
  padding: 22px 16px 26px;
  background: var(--teal);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 20px;
}
.foot-band span:first-child {
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 0 #2c6f72, 2px 0 0 #2c6f72, -2px 0 0 #2c6f72, 0 -2px 0 #2c6f72;
}
.foot-band .script { font-size: 1.9rem; color: var(--teal-ink); }

/* ---------- 들어가는 문 ---------- */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gap);
  background-color: var(--hero);
}

.gate .card { max-width: 440px; width: 100%; padding: 40px 32px 32px; text-align: center; border: 0; }
.gate .card > * { position: relative; }
.gate .brand { font-size: 3rem; }
.gate-sub { margin: 6px 0 16px; font-size: 1.8rem; color: var(--c-mustard); }
.gate section { text-align: left; }
.gate label { margin-top: 10px; }
.gate button { margin-top: 14px; width: 100%; }
.code { font-size: 1.1rem; }
.code strong { letter-spacing: 0.2em; }

/* ---------- 요약 상자 ---------- */

.summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.summary div { padding: 14px 16px; border: 0; border-radius: 18px; background: var(--tint-1); }
.summary div:nth-child(5n+2) { background: var(--tint-2); }
.summary div:nth-child(5n+3) { background: var(--tint-3); }
.summary div:nth-child(5n+4) { background: var(--tint-4); }
.summary div:nth-child(5n+5) { background: var(--tint-5); }
.summary dt { color: var(--muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; }
.summary dd { margin: 4px 0 0; font-family: var(--display); font-size: 1.4rem; line-height: 1.25; }

@media (min-width: 640px) {
  .summary { grid-template-columns: repeat(3, 1fr); }
}

/* 첨부 */
.attach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
}

.chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 8px; }
.chip a { color: var(--accent-text); }

/* 첨부를 붙이는 작은 고리. 붙은 것이 없으면 제목 줄 끝에 붙는다. */
.attach.bare { display: inline-flex; margin: 0 0 0 6px; vertical-align: baseline; }
.attach-add { font-size: 0.8rem; padding: 2px 6px; }

/* 브리핑 항목 */
.item { padding: 12px 0; border-bottom: 2px dotted var(--line); }
.item:last-child { border-bottom: 0; }
.item h3 { display: flex; gap: 8px; align-items: baseline; color: var(--teal-deep); }


/* 읽어 주는 기계에만 필요한 글. 화면에서는 자리를 차지하지 않는다. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- 색 딱지 (허브 입구) ---------- */
/*
   네모난 색 딱지에 도톰한 제목과 손글씨 부제를 겹친다. 흰 제목에는 딱지보다
   진한 테두리를 둘러 읽히게 하고, 손글씨는 그 진한 색으로 적는다.
*/
.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.hub-item {
  --tile: var(--tile-pink);
  --outline: var(--tile-pink-ink);
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0;
  /* 폭은 칸을 채우고 높이만 화면 폭을 따라 자란다. 비율로 키우면 넓은 화면에서
     딱지가 지나치게 높아진다. */
  height: clamp(170px, 14vw, 230px);
  padding: 18px;
  background: var(--tile);
  border: 0;
  border-radius: 24px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--outline) 35%, transparent);
  transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.2s ease;
  isolation: isolate;
}
.hub-item:nth-child(4n+2) { --tile: var(--tile-mustard); --outline: var(--tile-mustard-ink); }
.hub-item:nth-child(4n+3) { --tile: var(--tile-coral); --outline: var(--tile-coral-ink); }
.hub-item:nth-child(4n+4) { --tile: var(--tile-peach); --outline: var(--tile-peach-ink); }
.hub-item:hover { background: var(--tile); transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 10px 0 color-mix(in srgb, var(--outline) 30%, transparent); }
.hub-item:nth-child(even):hover { transform: translateY(-4px) rotate(1.5deg); }
.hub-item:active { transform: translateY(1px); box-shadow: 0 2px 0 color-mix(in srgb, var(--outline) 35%, transparent); }

.hub-item strong { font-size: clamp(2rem, 4.2vw, 2.6rem); line-height: 1.1; letter-spacing: 0.04em; }
.hub-item .script {
  margin-top: -0.15em;
  max-width: 11em;
  font-size: clamp(1.5rem, 3vw, 2rem);
  /* 낱말 중간에서 줄이 꺾이지 않게 한다. */
  word-break: keep-all;
  text-wrap: balance;
  color: var(--outline);
  transform: rotate(-4deg);
}

/* 딱지마다 다른 무늬. 둥근 얼룩, 손글씨 바탕, 격자. */
.hub-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 90%;
  aspect-ratio: 1;
  right: -35%;
  bottom: -40%;
  border-radius: 46% 54% 42% 58%;
  background: rgb(255 255 255 / 0.2);
}
.hub-item:nth-child(4n+1)::after {
  content: "우리 집 하루 우리 집 하루 우리 집 하루 우리 집 하루 우리 집 하루 우리 집 하루";
  position: absolute;
  z-index: -1;
  inset: -20%;
  font-family: var(--script);
  font-size: 2.4rem;
  line-height: 1.2;
  color: rgb(255 255 255 / 0.18);
  transform: rotate(-14deg);
  pointer-events: none;
}
.hub-item:nth-child(4n+3)::before {
  border-radius: 12px;
  right: -20%;
  bottom: -30%;
  width: 70%;
  transform: rotate(18deg);
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.14) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.14) 0 2px, transparent 2px 10px);
}

.back { margin-bottom: 14px; }

/* ---------- 첫 화면 ---------- */

/* 날씨. 그림 하나와 큰 기온, 그 아래 작은 칩. 미세먼지는 등급 색 배지. */
.wx { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
.wx-icon { font-size: 3rem; line-height: 1; }
.wx-main { display: grid; gap: 6px; }
.wx-temp { display: flex; align-items: baseline; gap: 14px; }
.wx-temp span { display: inline-flex; align-items: baseline; gap: 4px; }
.wx-temp small { font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.wx-temp strong { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.wx-low strong { color: var(--sat); }
.wx-high strong { color: var(--c-coral); }
.wx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wx-chip { padding: 2px 10px; border-radius: 999px; background: var(--tint-2); color: var(--teal-deep); font-size: 0.82rem; font-weight: 700; }
.wx-chip.wet { background: var(--dust-good-bg); color: var(--dust-good); }
.dust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dust {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px; border-radius: 12px;
  background: var(--tint-1); color: var(--ink);
}
.dust small { font-size: 0.75rem; font-weight: 700; opacity: 0.8; }
.dust strong { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.dust-value { font-size: 0.8rem; font-variant-numeric: tabular-nums; opacity: 0.8; }
.dust.good { background: var(--dust-good-bg); color: var(--dust-good); }
.dust.moderate { background: var(--dust-moderate-bg); color: var(--dust-moderate); }
.dust.bad { background: var(--dust-bad-bg); color: var(--dust-bad); }
.dust.worst { background: var(--dust-worst-bg); color: var(--dust-worst); }

/* 첫 화면 카드. 넓으면 두 장씩 두 줄로 놓고, 같은 줄의 두 장은 높이를 맞춘다. */
.home-grid { display: grid; gap: 22px var(--gap); }
.home-grid > .card { margin-bottom: 0; }
/* 테이프를 붙인 카드도 옆 카드와 윗선을 맞춘다. 테이프는 칸 사이 틈에 걸친다. */
.home-grid > .taped { margin-top: 0; }
.wx-place { margin: 0 0 4px; }
/* 살 것 줄의 체크 칸. 누르면 바로 산 것으로 옮긴다. 손가락으로 누르기 쉽게 키운다. */
.buy { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; font-weight: 400; color: var(--ink); cursor: pointer; }
.buy input { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--accent-text); cursor: pointer; }
/* 저녁에 붙는 내일 일정. 오늘 것과 갈리게 윗줄을 긋는다. */
.next-day { margin-top: 10px; border-top: 2px dotted var(--line); border-bottom: 0; }
.hint.more { margin: 8px 0 0; }

@media (min-width: 820px) {
  .home-grid { grid-template-columns: 1fr 1fr; }
}

/* 떠오르기와 돌기. 허브 딱지·첫 화면 카드와 비서 단추 고리가 쓴다. */
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* 첫 화면과 허브는 차례로 떠오른다. 저장할 때마다 다시 그리는 업무 화면은 움직이지 않는다. */
main[data-view="home"] .home-grid > *,
main:not([data-view="home"]) > .hub > .hub-item { animation: pop 0.5s ease both; }
.hub > .hub-item:nth-child(2) { animation-delay: 0.06s; }
.hub > .hub-item:nth-child(3) { animation-delay: 0.12s; }
.hub > .hub-item:nth-child(4) { animation-delay: 0.18s; }
.home-grid > :nth-child(2) { animation-delay: 0.08s; }
.home-grid > :nth-child(3) { animation-delay: 0.16s; }
.home-grid > :nth-child(4) { animation-delay: 0.24s; }

/* 검색에서 눌러 온 기록. 잠깐 밝혔다가 사라진다(dom.js spotlight). */
.spotlight { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; animation: spotlight 2.4s ease-out both; }
@keyframes spotlight { from { background: var(--tint-1); } to { background: transparent; } }

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

/* 좁은 화면. 로고를 위에 두고 단추들은 그 아래 양쪽에 둔다. */
@media (max-width: 640px) {
  .announce { font-size: 0.66rem; letter-spacing: 0.12em; }
  .masthead {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "logo logo" "left right";
    padding: 14px 16px 12px;
    row-gap: 10px;
  }
  .logo { grid-area: logo; }
  .mast-left { grid-area: left; }
  .mast-right { grid-area: right; gap: 6px; }
  .utils { gap: 6px; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .whoami { font-size: 1.3rem; }
  .tagline { letter-spacing: 0.3em; }
  .tabs button { padding: 11px 14px; letter-spacing: 0.08em; }


  .hub { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hub-item { height: auto; min-height: 132px; padding: 14px 8px; border-radius: 20px; }
  .foot-band { flex-direction: column; align-items: center; padding-bottom: 30px; }
}

/* 비서를 부르는 단추. 어느 화면에서나 같은 자리에 있다. */
.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--teal);
  color: var(--teal-ink);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 5px 0 #5f9a9c, 0 12px 24px -8px rgb(40 100 100 / 0.5);
  z-index: 5;
}
.fab:hover { background: var(--teal); transform: translateY(-2px) rotate(-8deg); box-shadow: 0 7px 0 #5f9a9c, 0 14px 26px -8px rgb(40 100 100 / 0.5); }
/* 단추 둘레의 점선 고리. 천천히 돈다. */
.fab::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px dashed var(--teal);
  animation: spin 16s linear infinite;
  pointer-events: none;
}
.fab.urgent { background: var(--warn); color: #fff; }
.fab-mark { width: 26px; height: 26px; }
.fab .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--warn);
  color: #fff;
  font-size: 0.75rem;
  line-height: 20px;
}
.fab.urgent .badge { background: var(--ink); }

/* 대화창. 보고 있던 화면을 덮지 않고 옆에 붙는다. */
.dock {
  position: fixed;
  right: 20px;
  bottom: 88px;
  width: 380px;
  max-height: min(70dvh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -10px rgb(120 60 60 / 0.35);
  overflow: hidden;
  z-index: 5;
}
.dock-head, .dock-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.dock-head { padding: 12px 16px; background: var(--band); color: var(--band-ink); }
.dock-head strong { font-family: var(--display); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.1em; }
.dock-head strong::before { content: "✿ "; color: var(--c-pink); }
.dock-foot { border-top: 1px solid var(--line); }
.dock-foot input { flex: 1; min-width: 0; }
.grow { flex: 1; }
.dock-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 16px;
  display: grid;
  gap: 2px;
}
.bubble.mine { margin-left: auto; background: var(--accent); color: var(--accent-ink); }
.bubble.mine .meta { color: var(--accent-ink); opacity: 0.8; }
.bubble.theirs { background: var(--tint-2); }

/* 확인 대기는 놓치면 안 되므로 대화 끝(입력 칸 가까이)에 붙이고 색을 달리한다. */
.waiting {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 10px;
  display: grid;
  gap: 6px;
}
.waiting-item { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.memories { margin-top: 4px; color: var(--muted); }
.memories summary { cursor: pointer; font-size: 0.9rem; }

/* ---------- 일정 달력 ---------- */
/*
   한 달짜리 표를 위아래로 잇는다. 칸 안에 들어가는 것은 넷이다.
   날짜, 음력, 공휴일 이름, 일정. 음력은 가장 작고 가장 옅다.
*/

/* 지난달을 위에 붙였을 때 브라우저가 위치를 붙잡아 끌어내리지 않게 한다.
   붙인 달이 단추 바로 아래에 그대로 보여야 한다. */
.cal-stack { display: grid; gap: 28px; overflow-anchor: none; }

/* 지난달을 붙이는 단추. 범례 아래, 첫 달 위에 둔다. */
.cal-earlier { display: block; margin: 0 auto 16px; }

/* 감시자. 여기 닿으면 달을 더 붙인다. 보이는 것은 없다. */
.sentinel { height: 1px; }

.month {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* clip 이지 hidden 이 아니다. hidden 은 스크롤 상자를 만들어서 안쪽의
     달 제목이 그 상자에 갇히고 화면에 붙지 못한다. clip 은 넘치는 것만
     잘라 내고 스크롤 상자를 만들지 않는다. */
  overflow: clip;
}

.month-title {
  margin: 0;
  padding: 14px 20px;
  color: var(--accent-text);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px dashed var(--stitch);
  /* 탭 줄과 범례 아래에 붙는다. 둘의 높이를 재서 넣는다. */
  position: sticky;
  top: calc(var(--stick, 60px) + var(--legend, 0px));
  z-index: 1;
}

.month .notice {
  margin: 0;
  padding: 8px 16px;
  color: var(--warn);
  background: var(--warn-soft);
  font-size: 0.85rem;
}

.weekrow, .grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.weekrow {
  background: var(--accent-soft);
}

.weekrow span {
  padding: 8px 0;
  text-align: center;
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.weekrow .rest { color: var(--warn); }
.weekrow .sat { color: var(--sat); }

/* 칸 사이의 선은 테두리로 그린다. 선 하나가 두 번 그려지지 않게 위와 왼쪽만 쓴다. */
.grid { background: var(--line); gap: 1px; padding: 1px 0 0 1px; }

.cell {
  background: var(--surface);
  min-height: 108px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  border: 0;
  text-align: left;
}

.cell:hover { background: var(--accent-soft); }
/* 앞뒤 달의 빈칸. 이 달의 칸과 갈리도록 옅게 물들인다. 누를 것이 없어 올려도 바뀌지 않는다. */
.cell.out,
.cell.out:hover { background: color-mix(in srgb, var(--line) 45%, var(--bg)); cursor: default; }

.cell.picked { outline: 2px solid var(--accent); outline-offset: -2px; }

.cell-head { display: flex; align-items: baseline; gap: 4px; }

.daynum { font-size: 0.85rem; font-weight: 600; }
.cell.rest .daynum { color: var(--warn); }
.cell.sat .daynum { color: var(--sat); }

.cell.today .daynum {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  min-width: 1.5em;
  padding: 1px 5px;
  text-align: center;
}

/* 음력은 곁들이다. 아주 작게, 아주 옅게. 양력 날짜를 읽는 데 방해가 되면 안 된다. */
.lunar {
  font-size: 0.6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

.holiday {
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evs { display: grid; gap: 2px; min-width: 0; }

.ev {
  display: flex;
  gap: 4px;
  align-items: baseline;
  width: 100%;
  border: 0;
  border-radius: 5px;
  padding: 2px 5px;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.35;
  cursor: pointer;
  /* 바탕은 중립으로 둔다. 사람 색은 왼쪽 띠가 맡으므로 바탕까지 물들이면
     둘이 싸운다. 종일인지는 시각의 있고 없음으로 이미 드러난다. */
  background: color-mix(in srgb, var(--line) 30%, var(--surface));
  color: var(--ink);
  text-align: left;
  padding-left: 0;
  overflow: hidden;
}

.ev:hover { background: var(--accent-soft); }

/* 끌어서 옮기기. 옮길 수 있는 칩은 잡을 수 있게 보이고, 끄는 동안 흐려진다.
   놓을 수 있는 칸은 분홍 점선으로 두른다. */
.ev[draggable="true"] { cursor: grab; }
.ev[draggable="true"]:active { cursor: grabbing; }
.ev.dragging { opacity: 0.45; }
.cell.drop-target {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent-text);
  outline-offset: -3px;
}
.ev.allday { background: color-mix(in srgb, var(--line) 60%, var(--surface)); }

/* 여러 날에 걸친 일정.

   칸들은 서로 독립이라 한 칸에서 다음 칸으로 막대를 늘일 수 없다. 대신
   이어지는 쪽의 모서리를 각지게 두고 칸 밖으로 조금 내밀어, 이웃한 칸의
   같은 줄과 맞닿아 한 줄로 읽히게 한다. */
.ev.span { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }

.ev.from-before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -4px;
  padding-left: 4px;
}
.ev.to-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -4px;
}

/* 앞 칸에서 이어져 온 제목은 조금 옅게. 같은 것이 또 시작한 게 아니라
   아직 이어지는 중이라는 뜻이다. */
.ev.from-before .ev-title { opacity: 0.7; }
.ev.from-before .who-stripe { border-radius: 0; }
.ev.to-after .who-stripe { border-radius: 5px 0 0 5px; }

/* 참석자 띠. 여럿이면 위에서 아래로 사람 수만큼 나뉜다. */
.who-stripe {
  flex: 0 0 auto;
  align-self: stretch;
  width: 10px;
  border-radius: 5px 0 0 5px;
}
.ev-time { font-variant-numeric: tabular-nums; opacity: 0.8; flex: 0 0 auto; }
.ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 끝내야 다음이 잡히는 집안일. 체크 표를 앞에 둔다. */
.ev-check { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: 0.75; }

/* 예정일이 지났는데 아직 끝내지 않은 회차.
   스스로 다음으로 넘어가지 않으므로 그대로 두면 지난 칸에 조용히 남는다. */
.ev.late { background: var(--warn-soft); color: var(--warn); }
.ev.late .ev-check { opacity: 1; font-weight: 700; }

/* 완료 칸. 상세 아래에 붙어 "여기까지 했다"를 받는다. */
.done-box { margin: 0 0 12px; }
.done-row { align-items: flex-end; }
.done-row > * { flex: 0 1 180px; }
.done-row > button { flex: 0 0 auto; }
.done-go { white-space: nowrap; }
.done-fix { margin-top: 8px; }

/* 점은 좁은 화면에서만 쓴다. */
.dots { display: none; gap: 4px; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--muted); }

/* 범례. 머리줄·탭 아래에 붙어 어디까지 내려가도 누가 무슨 색인지 보인다. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 8px 16px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--muted);
  position: sticky;
  top: var(--stick, 115px);
  z-index: 1;
}

.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 12px; height: 12px; border-radius: 999px; flex: 0 0 auto; }

/* 화면이 넓으면 칸도 키운다. 너비만 늘리면 칸이 납작해져 더 답답해진다. */
@media (min-width: 1000px) {
  .cell { min-height: 132px; padding: 8px; }
  .ev { font-size: 0.78rem; padding: 3px 6px; }
  .daynum { font-size: 0.95rem; }
  .lunar { font-size: 0.68rem; }
  .holiday { font-size: 0.74rem; }
  .who-stripe { width: 11px; }
}

@media (min-width: 1400px) {
  .cell { min-height: 156px; }
  .ev { font-size: 0.82rem; }
}

/* 참석자 고르기. 고른 쪽은 색과 함께 테두리로도 드러낸다. */
.who-pick { display: flex; flex-wrap: wrap; gap: 8px; }

.who-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.who-chip:hover { background: var(--accent-soft); }

.who-chip.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

/* 시각 고르는 시계. 눌러서 시를 고르면 분으로 넘어간다. */
.clock { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }

/* 시작과 종료 두 벌. 넓으면 나란히, 좁으면 위아래로 놓는다. */
.clocks { display: flex; flex-wrap: wrap; gap: 20px; }
.clock-slot { flex: 1 1 280px; min-width: 0; }
.clock-slot > .meta { display: block; }

.clock-face {
  width: 210px;
  height: 210px;
  flex: 0 0 auto;
  touch-action: none;
  cursor: pointer;
  border-radius: 999px;
}

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

.clock-dial { fill: color-mix(in srgb, var(--line) 28%, var(--surface)); }
.clock-hand { stroke: var(--accent); stroke-width: 2; }
.clock-knob { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.clock-pin { fill: var(--accent); }

.clock-mark { font-size: 15px; fill: var(--ink); user-select: none; }
.clock-mark.on { fill: var(--accent-text); font-weight: 700; }

.clock-readout { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.clock-part {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
}

.clock-part.on { color: var(--accent-text); background: var(--accent-soft); font-weight: 700; }
.clock-colon { font-size: 2rem; color: var(--muted); }
.clock-half { display: flex; flex-direction: column; gap: 4px; margin-left: 10px; }
.clock-half button { padding: 4px 10px; font-size: 0.85rem; }

/* 고른 쪽은 테두리로도 드러낸다. 색만으로 알리지 않는다. */
.modes { display: flex; gap: 8px; margin-bottom: 8px; }
/* 고를 것이 넷을 넘으면 좁은 화면에서 한 줄에 들어가지 않는다. */
.modes.wrap { flex-wrap: wrap; }
/* 이름표 줄. 왼쪽에 이름표, 오른쪽 끝에 드물게 쓰는 작은 선택을 둔다. */
.label-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.corner-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}
.corner-check input { width: auto; margin: 0; accent-color: var(--accent-text); cursor: pointer; }

/* 되풀이 규칙의 자세한 칸. 고른 종류에 따라 들고 나므로 자리를 비워 두지 않는다. */
.repeat-detail, .repeat-until, .repeat-count { margin-bottom: 8px; }
.repeat-detail > * { flex: 0 1 160px; }
.repeat-until > * { flex: 0 1 200px; }
/* 횟수 칸은 짧게, 아래 안내는 줄을 넘겨 읽히게 둔다. */
.repeat-count > * { flex: 1 1 200px; }
.repeat-count input { max-width: 120px; }
.repeat-count .hint { margin: 4px 0 0; }
.repeat-hint { margin: 0; font-size: 0.85rem; }
.modes button.on, .clock-half button.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}

/* 목록에서는 이름을 글자로 적는다. 색만으로 사람을 가르지 않는다. */
.who-names { flex: 0 0 auto; }

/* 목록과 입력에서 구간을 글자로도 적는다. 모서리 모양만으로는 며칠인지 모른다. */
.span-note { flex: 0 0 auto; }
.span-hint { margin: 6px 0 0; font-size: 0.85rem; }
/* 뒤집힌 구간은 알리되 오류 상자로 키우지 않는다. 아직 고치는 중이다. */
.span-hint.bad { color: var(--warn); }

/* 시작일 – 종료일. 사이의 줄표는 늘어나지 않는다. */
.span-row { align-items: center; gap: 8px; }
.span-dash { flex: 0 0 auto; }

.daypanel:not(:empty) {
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
}

.daypanel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }

.daypick { display: flex; gap: 8px; align-items: baseline; text-align: left; }
.daypick .when { flex: 0 0 3.2rem; font-variant-numeric: tabular-nums; }

.detail h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 적어 둔 내용. 줄바꿈을 적은 대로 보여 주고 긴 낱말도 상자를 넘지 않는다. */
.detail .body {
  margin: 0 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 내용은 한 줄을 통째로 쓴다. `.row` 안에서 옆자리와 나눠 갖지 않는다. */
.field { margin-bottom: 12px; }
.field textarea { min-height: 52px; }

.pairs { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; }
.pairs dt { color: var(--muted); font-size: 0.85rem; }
.pairs dd { margin: 0; }

/* 좁은 화면에서는 아래에서 올라오는 창으로 바꾼다. */
@media (max-width: 640px) {
  /* 칸에 제목을 넣으면 글자가 뭉갠다. 점만 찍고 누르면 표 아래로 목록을 편다. */
  .cell { min-height: 58px; padding: 4px 2px; align-items: center; gap: 2px; }
  .cell-head { flex-direction: column; align-items: center; gap: 0; }
  .evs, .holiday { display: none; }
  .dots { display: flex; }
  .month-title { padding: 10px 12px; }
  .daypanel:not(:empty) { padding: 12px; }
  /* 좁은 화면에서는 범례도 줄여 둔다. */
  .legend { padding: 8px 12px; gap: 4px 10px; font-size: 0.78rem; }
  .daypick .when { flex-basis: 2.8rem; }

  .dock {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 80dvh;
    border-radius: 16px 16px 0 0;
  }
  /* 아이폰 홈 표시줄에 입력 칸이 가리지 않게 아래를 띄운다. */
  .dock-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .fab { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }

}

/* 분류별 가로 막대. 금액 순으로 세우고 가장 큰 줄을 가득 채운다. */
.bars { display: grid; gap: 8px; margin: 0 0 12px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.bar-row:hover, .bar-row.on { background: var(--tint-1); }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 막대 자체는 눈금이 아니라 크기 비교용이다. 정확한 값은 옆의 숫자가 말한다. */
.bar-track { height: 10px; border-radius: 5px; background: var(--tint-1); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--mustard)); border-radius: 5px; }
.bar-value { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }

/* 올해 누적 두 칸. */
.year-to-date { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.year-to-date .meta { font-size: 0.78rem; }
@media (max-width: 640px) {
  .year-to-date { grid-template-columns: minmax(0, 1fr); }
}

/* 월별 흐름. 두 막대를 같은 눈금에 나란히 세운다. 눈금은 흐리게, 막대는 가늘게. */
.trend { margin: 0 0 16px; }
.trend-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; font-size: 0.85rem; }
.trend-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.trend-legend .meta { margin-left: auto; font-size: 0.78rem; }
.trend-in { background: var(--chart-in); }
.trend-out { background: var(--chart-out); }
.trend-plot { --trend-base: 22px; position: relative; height: 220px; padding-left: 44px; }
/* 눈금 상자는 막대가 서는 자리와 꼭 같은 높이다. 위 8px, 아래 달 이름 칸을 뺀다. */
.trend-gridbox { position: absolute; top: 8px; bottom: var(--trend-base); left: 44px; right: 0; }
.trend-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.trend-grid span { position: absolute; right: calc(100% + 6px); top: -0.6em; color: var(--muted); font-size: 0.72rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trend-cols { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 100%; }
.trend-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; border-radius: 8px; cursor: default; outline-offset: -2px; }
.trend-col:not(.future):hover, .trend-col:focus-visible { background: rgb(0 0 0 / 0.03); }
.trend-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: calc(100% - var(--trend-base) - 8px); margin-top: 8px; }
.trend-bar { width: min(12px, 34%); min-height: 2px; border-radius: 4px 4px 0 0; }
.trend-month { height: var(--trend-base); line-height: var(--trend-base); color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.trend-col.future .trend-month { opacity: 0.5; }
.trend-tip {
  position: absolute; top: 0; transform: translateX(-50%); z-index: 2;
  display: grid; gap: 2px; width: max-content; padding: 8px 12px; border-radius: 12px; white-space: nowrap;
  background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line);
  font-size: 0.82rem; font-variant-numeric: tabular-nums; pointer-events: none;
}
.trend-tip[hidden] { display: none; }
.trend-tip .legend-dot { display: inline-block; width: 9px; height: 9px; }

/* 연간 표. 좁은 화면에서는 옆으로 민다. */
.year-scroll { overflow-x: auto; margin: 0 0 12px; }
.year-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.9rem; }
.year-table th, .year-table td { padding: 6px 8px; text-align: right; white-space: nowrap; }
.year-table th:first-child, .year-table td:first-child { text-align: left; }
.year-table thead th { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.year-table tbody tr + tr td { border-top: 1px solid var(--line); }
.year-table .future td { color: var(--muted); }

/* 약관에서 읽어 온 글. 길고 줄바꿈이 뜻을 가지므로 그대로 둔다. */
.read-text {
  max-height: 24rem;
  overflow: auto;
  padding: 12px;
  border-radius: 8px;
  background: var(--tint-1);
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 가계부 달력. 일정 달력의 칸 규칙을 그대로 쓰되 금액을 크게 둔다. */
.spend-cell { cursor: pointer; }
/* 용도 점은 넓은 화면에서도 보인다. 일정 달력과 달리 칸에 제목을 쓰지 않는다. */
.spend-cell .dots { display: flex; flex-wrap: wrap; }
/* 반복이 미리 적어 둔 앞날의 줄. 아직 나간 돈이 아니다. */
.ahead { opacity: 0.6; }
.spend-amount { font-size: 0.8rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* 막대는 그날이 그달에서 얼마나 컸는지 견주는 그림이다. 눈금이 아니다. */
.spend-bar { display: block; height: 4px; border-radius: 2px; background: var(--tint-1); overflow: hidden; }
.spend-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

@media (max-width: 640px) {
  /* 좁은 화면에서는 점과 막대만 남긴다. 금액 글자가 칸을 뭉갠다. */
  .spend-amount { display: none; }
}

/* 관리의 바깥 자료 상태와 백업. 상태 꼬리표는 색과 글자를 함께 둔다. */
.tag.status-ok { background: var(--dust-moderate-bg); color: var(--dust-moderate); }
.tag.status-bad { background: var(--danger-soft); color: var(--danger); }
ul.list li.api-row { display: block; }
.api-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.api-when { margin: 2px 0 0; font-size: 0.8rem; }
.api-error { margin: 4px 0 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.backup-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 8px 0 12px; }
.backup-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.backup-day.ok { background: var(--dust-moderate-bg); color: var(--dust-moderate); }
.backup-day.bad { background: var(--danger-soft); color: var(--danger); }
.backup-day.wait { background: var(--tint-1); color: var(--muted); }
.backup-date { font-size: 0.78rem; }
.backup-word { font-size: 0.72rem; }

/* 관리의 가족 구성원. 사람마다 승인된 브라우저를 그 아래에 둔다. */
ul.list li.member-row { display: block; }
.member-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.member-head .legend-dot { display: inline-block; width: 10px; height: 10px; }
.browser-list { margin: 6px 0 0; padding: 4px 12px; border-radius: 14px; background: var(--bg); }
.browser-list .tag { margin-left: 6px; }
button.link.subtle { color: var(--muted); text-decoration-style: dotted; font-size: 0.85rem; }

/* 쇼핑. 사람과 긴급도를 색 꼬리표로 보인다. 색만으로 가르지 않게 글자를 함께 둔다. */
.shop-main { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.person-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.person-tag .legend-dot { width: 10px; height: 10px; }
.prio-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.prio-tag.prio-urgent { background: var(--danger-soft); color: var(--danger); }
.prio-tag.prio-normal { background: var(--tint-1); color: var(--muted); }
.prio-tag.prio-relaxed { background: var(--tint-2); color: var(--teal-ink); }
/* 긴급도 고르기 단추. 고른 것만 그 색으로 채운다. */
button.prio-chip { padding: 6px 16px; font-family: var(--body); letter-spacing: 0; box-shadow: inset 0 0 0 2px var(--line); background: var(--surface); color: var(--muted); }
button.prio-chip:hover { transform: none; background: var(--surface); }
/* 고르지 않은 것도 제 색의 글자와 옅은 테두리로 보인다. */
button.prio-chip.prio-urgent { color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger-soft); }
button.prio-chip.prio-normal { color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--tint-1); }
button.prio-chip.prio-relaxed { color: var(--teal-ink); box-shadow: inset 0 0 0 2px var(--tint-2); }
button.prio-chip.prio-urgent.on { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
button.prio-chip.prio-normal.on { background: var(--tint-1); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
button.prio-chip.prio-relaxed.on { background: var(--tint-2); color: var(--teal-ink); box-shadow: inset 0 0 0 2px var(--teal); }

/* 가계부 용도. 색점 하나와 이름. 색만으로 가르지 않는다. */
.purpose-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.purpose-tag .legend-dot { width: 10px; height: 10px; }
.with-dot { display: flex; align-items: center; gap: 8px; }
.with-dot select { flex: 1 1 auto; min-width: 0; }

/* 색 고르기. 누른 것에 테두리를 두껍게 둔다. */
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  border-radius: 999px; border: 2px solid transparent;
  color: #fff; font-weight: 700; line-height: 1;
}
.swatch:not([style]), .swatch[style=""] {
  width: auto; padding: 0 10px; background: var(--surface); color: var(--muted);
  border-color: var(--line);
}
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }

/* 소비 나눠 보기. 위에 합계를 크게, 아래에 기준별 막대와 할부를 둔다. */
.spend-hero {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px;
  padding: 16px 18px; margin-bottom: 14px; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-soft), var(--tint-3));
}
.spend-total { display: flex; flex-direction: column; gap: 2px; }
.spend-total strong { font-family: var(--display); font-weight: 400; font-size: 2.2rem; line-height: 1.1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.spend-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.spend-facts div { padding: 8px 12px; border-radius: 12px; background: var(--surface); min-width: 7.5rem; }
.spend-facts dt { color: var(--muted); font-size: 0.8rem; }
.spend-facts dd { margin: 0; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.spend-facts dd .meta { font-size: 0.78rem; }

.slice-tabs { margin-bottom: 10px; }
.slice-tabs button { flex: 1 1 0; }
/* 한 줄로 쌓은 몫. 조각 사이를 살짝 띄워 이웃한 색이 섞여 보이지 않게 한다. */
.stack-bar { display: flex; gap: 2px; height: 14px; margin: 0 0 12px; border-radius: 7px; overflow: hidden; background: var(--tint-1); }
.stack-bar span { min-width: 3px; }
.breakdown-card .bar-name { display: flex; align-items: center; gap: 6px; }
.breakdown-card .bar-value { display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-share { min-width: 2.6rem; text-align: right; color: var(--muted); font-size: 0.82rem; }

/* 걸려 있는 할부. 회차는 가는 막대로 얼마나 왔는지 보인다. */
.instalments { margin: 4px 0 12px; padding-top: 12px; border-top: 2px dashed var(--stitch); }
.instalments-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.instalments-head h3 { margin: 0; font-size: 1rem; }
.instalment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.instalment-list li { padding: 10px 12px; border-radius: 12px; background: var(--tint-1); }
.instalment-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.instalment-top .grow { flex: 1 1 auto; }
.instalment-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 6px; }
.instalment-progress .bar-track { display: block; height: 6px; background: var(--surface); }

/* 달력과 나눠 보기의 설명 글을 한데 모은다. */
.notes { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.82rem; display: grid; gap: 2px; }

@media (max-width: 640px) {
  .spend-hero { padding: 14px; }
  .spend-facts div { min-width: 0; flex: 1 1 auto; }
  .breakdown-card .bar-row { grid-template-columns: minmax(4.5rem, 6rem) 1fr auto; gap: 8px; }
}

/* 가계부 둘째 단. 가계부 탭 아래에 늘 보인다. 설정은 오른쪽 끝에 따로 둔다. */
.ledger-nav { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--gap); }
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 2px dashed var(--stitch); padding-bottom: 12px; }
.subtabs button {
  background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line);
  padding: 6px 16px; min-height: 38px;
}
.subtabs button:hover { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.subtabs button[aria-current="page"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-shade); }
.subtabs button.aside { margin-left: auto; }
.month-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.month-bar strong { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--accent-text); min-width: 8.5em; text-align: center; font-variant-numeric: tabular-nums; }

/* 달력에서 고른 날 아래의 입력 자리. */
.day-form { border: 2px dashed var(--stitch); border-radius: var(--radius); padding: 12px; margin: 8px 0; background: var(--bg); }
.day-form > strong { display: block; margin-bottom: 8px; }

/* 요약표. 작은 카드를 격자로 늘어놓고, 연간표는 그 아래에 한 줄로 편다. */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.summary-grid > .card { margin-bottom: 0; }
/* 전체 자금 현황의 할부·고정지출. 두 칸을 넓게 나란히 둔다. */
.summary-now { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* 소득의 세전·세금·공제·세후 묶음. */
.payslip-groups { display: grid; gap: 10px; margin-bottom: 8px; }
.payslip-group { padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.payslip-group h4 { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted); }
.payslip-after { background: var(--tint-2); }
.payslip-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.payslip-net { font-family: var(--display); font-weight: 400; font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* 급여명세서 칸. 세 칸씩 늘어놓는다. */
.payslip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }

/* 자금 관리의 사람 고르기. */
.person-pick { margin-bottom: 12px; }
/* 자금 관리 흐름 막대. 두 막대가 같은 눈금이라 길이를 바로 견준다. */
.flow { display: grid; gap: 6px; margin-bottom: 12px; }
.flow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }
.flow-head strong { font-family: var(--display); font-weight: 400; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.flow-head .meta { margin-left: auto; }
.flow-bar { display: flex; gap: 2px; height: 22px; border-radius: 11px; overflow: hidden; background: var(--tint-1); }
.flow-bar span { min-width: 3px; }
.flow-income { background: var(--teal-deep); }
/* 잔액은 쓰지 않고 남은 자리라 빗금으로 비워 둔다. */
.flow-left { background: repeating-linear-gradient(135deg, var(--surface) 0 5px, var(--tint-2) 5px 10px); box-shadow: inset 0 0 0 1px var(--teal); }
.flow-legend { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.flow-legend li { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; white-space: nowrap; }
.flow-legend strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.flow-legend .legend-dot.flow-left { box-shadow: inset 0 0 0 1px var(--teal); }
.flow-fixed { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--tint-3); font-variant-numeric: tabular-nums; }


/* 전체 자금 관리의 박스 셋. 좁은 칸이라 줄의 이름과 금액을 위아래로 둔다. */
.products-boxes { margin-bottom: 10px; }
.products-boxes ul.list li:not(.account-row) { flex-wrap: wrap; }
/* 박스 머리의 합계에 예전 통장 현황 칸의 바탕색을 입힌다. 적금·대출·통장 차례다. */
.products-boxes .money-box-head { margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; }
.products-savings .money-box-head { background: var(--tint-1); }
.products-loan .money-box-head { background: var(--tint-2); }
.products-account .money-box-head { background: var(--tint-3); }

/* 통장 한 줄. 잔액을 크게, 넣기·빼기와 내역은 그 아래에 둔다. */
ul.list li.account-row { display: block; }
.account-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.account-balance { font-family: var(--display); font-weight: 400; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.account-actions > .ghost { padding: 5px 14px; font-size: 0.85rem; }
.account-panel { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--bg); }
.account-panel[hidden] { display: none; }
.account-in { color: var(--teal-deep); }
.account-sign { margin-bottom: 8px; }
.account-sign button { flex: 1 1 0; }
.account-move { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 10px; font-variant-numeric: tabular-nums; }

/* 적금·대출 박스 안의 묶음. 적금과 대출을 따로 둔다. */
.money-groups { display: grid; gap: 12px; }
.money-group h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; padding: 0 4px; font-size: 0.9rem; }
.money-group h3 .meta { font-variant-numeric: tabular-nums; }

/* 자금 관리 박스 셋. 소득·공동비용·적금·대출을 넓으면 나란히, 좁으면 위아래로 둔다. */
.money-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.money-boxes > .card { margin-bottom: 0; padding: 18px 16px; }
@media (max-width: 960px) {
  .money-boxes { grid-template-columns: minmax(0, 1fr); }
}
.money-boxes + .hint { margin-top: 10px; }
.money-box-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: -4px 0 12px; }
.money-box-total { font-family: var(--display); font-weight: 400; font-size: 1.45rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-box-total.in { color: var(--teal-deep); }
.money-box-add { padding: 5px 14px; font-size: 0.85rem; white-space: nowrap; }
.card-close { position: absolute; top: 16px; right: 16px; }
.card-action { position: absolute; top: 16px; right: 16px; }

.statement { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--bg); overflow: hidden; }
.statement-row + .statement-row { border-top: 1px solid var(--line); }
.statement-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px; border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; font-family: var(--body); letter-spacing: 0; text-align: left; cursor: pointer; box-shadow: none;
}
/* 공통 단추의 들뜨는 그림자와 움직임을 뺀다. 목록의 줄이지 단추처럼 보이면 안 된다. */
.statement-line:hover, .statement-line:active, .statement-row.on .statement-line { background: var(--tint-1); box-shadow: none; transform: none; }
.statement-text { display: flex; flex-direction: column; min-width: 0; }
.statement-text strong, .statement-text .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statement-text .meta { font-size: 0.8rem; }
.statement-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statement-amount.in { color: var(--teal-deep); }
.statement-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 14px 10px; background: var(--tint-1); }
/* 줄의 첨부는 단추들 왼쪽에 둔다. 붙은 것이 많으면 단추 위로 한 줄을 차지한다. */
.statement-actions .attach { margin: 0 auto 0 0; }
.statement-actions .attach:not(.bare) { flex-basis: 100%; }
.statement-actions[hidden] { display: none; }

/* 연말정산. 소득자마다 한 칸씩 나란히, 좁으면 위아래로. */
.year-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.year-people > .card { margin-bottom: 0; }
.threshold { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; }
.threshold .bar-track { display: block; height: 10px; }

/* 명의자가 빠진 항목. 고를 때까지 눈에 띄게 둔다. */
.tag.warn { background: var(--warn-soft); color: var(--warn); }

/* 칸, 막대, 사람 고르기처럼 단추이지만 알약이 아닌 것들. 바탕 단추의 그림자와 들썩임을 떼어 낸다. */
.cell, .ev, .bar-row, .who-chip, .clock-part, .swatch, .daypick {
  box-shadow: none;
  letter-spacing: 0;
  font-family: var(--body);
}
.cell:hover, .ev:hover, .bar-row:hover, .who-chip:hover, .clock-part:hover, .swatch:hover, .daypick:hover,
.cell:active, .ev:active, .bar-row:active, .who-chip:active, .clock-part:active, .swatch:active, .daypick:active {
  transform: none;
  box-shadow: none;
}
.cell { border-radius: 0; }
.ev { border-radius: 6px; }
.clock-part:hover { background: var(--accent-soft); }
.swatch:not([style]):hover, .swatch[style=""]:hover { background: var(--accent-soft); }
.who-chip { border: 2px solid var(--line); }
.who-chip.on { border-color: var(--accent); }

/* ---------- 메모 ---------- */

/* 태그 칩. 고른 것은 채우고, 개수를 곁에 작게 적는다. */
.note-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--line);
  font-size: 0.88rem;
}
.filter-chip:hover { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.filter-chip.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-shade); }
.filter-chip .count, .note-group summary .count {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.75;
}

/* 태그 묶음. 머리를 눌러 접고 편다. */
.note-groups { display: grid; gap: 10px; }
.note-group { border: 2px solid var(--line); border-radius: 18px; padding: 4px 16px; background: var(--surface); }
.note-group[open] { padding-bottom: 6px; }
.note-group summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--teal-deep);
  cursor: pointer;
  list-style: none;
}
.note-group summary::-webkit-details-marker { display: none; }
.note-group summary::before { content: "▸"; color: var(--c-pink); transition: transform 0.15s ease; }
.note-group[open] summary::before { transform: rotate(90deg); }
.note-group[open] summary { border-bottom: 2px dotted var(--line); }
.row-actions { flex: 0 0 auto; white-space: nowrap; }
/* 목록 줄의 태그 칩은 앞 글자와 붙지 않게 띄운다. */
ul.list li .tag { margin-left: 6px; }

/* 키보드로 닿는 달력 칸. 어디에 있는지 보이게 두른다. */
.cell:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -3px; }

/* 검색 결과 줄. 누르면 그 화면으로 간다. 줄 전체가 단추라 글자 모양은 목록 그대로 둔다. */
button.link.result { text-align: left; color: inherit; text-decoration: none; padding: 0; }
button.link.result:hover strong,
button.link.result:focus-visible strong { text-decoration: underline; }

/* 최근 변경 한 줄. "누가 · 언제 · 무엇을". 긴 이름은 줄을 넘겨 감싼다. 영구 삭제한 것은 단추가 아니다. */
ul.list li.audit-row { display: block; }
.audit-line { display: block; width: 100%; overflow-wrap: anywhere; line-height: 1.5; }
button.link.result.audit-line:hover span:last-child,
button.link.result.audit-line:focus-visible span:last-child { text-decoration: underline; }
/* 기록 상세의 "마지막 변경". 본문보다 조용하게 둔다. */
.hint.last-change { margin: 4px 0 8px; font-size: 0.85rem; }

/* 방금 한 일을 되돌리는 줄. 오류가 아니라 안내라 조용한 모양이다. */
.undo-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 0 0 8px; }

/* 운영 상태의 디스크 막대. 모자라면 경고색이다. */
.ops-disk { margin-bottom: 10px; }
.ops-disk p { margin: 0 0 6px; }
.bar-fill.over { background: var(--danger); }

/* 지우기 같은 되돌리기 어려운 링크 단추는 경고색으로 가른다. */
button.link.danger { color: var(--danger); }

/* 알림함 단추의 읽지 않은 수. */
.icon-btn { position: relative; }
.icon-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: var(--surface);
  font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.icon-badge[hidden] { display: none; }
/* 알림함에서 읽지 않은 줄과, 눌러 여는 줄. */
.list li.unread strong { color: var(--accent-text); }
button.link.inbox-open { text-align: left; text-decoration: none; padding: 0; }
button.link.row-open { text-align: left; text-decoration: none; padding: 0; color: inherit; font: inherit; }

/* 첫 화면의 알림 권유. 한 줄이고 닫을 수 있다. */
.nudge { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--tint-3); color: var(--mustard-ink); }
.nudge .link { margin-left: 8px; }

/* 가계부 '+ 소비': 날을 고르지 않고 오늘 폼을 바로 연다. */
.card-actions { justify-content: flex-end; margin: -4px 0 8px; }
.quick-spend { min-height: 44px; padding: 0 18px; }

/* 눌러서 펼쳐 읽는 줄. 머리는 목록 줄 그대로, 펼치면 아래에 이름·값 쌍이 온다. */
.readout > summary { cursor: pointer; list-style: none; }
.readout > summary::-webkit-details-marker { display: none; }
.readout > summary::after { content: " ▾"; color: var(--muted); font-size: 0.8rem; }
.readout[open] > summary::after { content: " ▴"; }
.readout-body { margin: 8px 0 4px; }
.readout-body dd { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 대화창: 여러 줄 답은 줄을 지키고, 쓰는 중 표시는 흐리게 깜빡인다. */
.bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.typing { opacity: 0.7; animation: typing 1.2s ease-in-out infinite; }
@keyframes typing { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .bubble.typing { animation: none; } }
.dock-pick { align-items: center; gap: 8px; margin-bottom: 6px; }
.dock-pick select { max-width: 60%; }
#chat-prompt:disabled, #chat-send:disabled { opacity: 0.55; }
button.link.danger { color: var(--danger); }

/* 승인 카드: 등록·수정·삭제를 글자와 색으로 크게 가른다. 모델 설명은 작게 아래에 둔다. */
.waiting-card { flex: 1; min-width: 0; }
.waiting-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.waiting-facts { margin: 6px 0 2px; font-size: 0.9rem; }
.waiting-facts dd { overflow-wrap: anywhere; }
.waiting-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.kind-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; }
.kind-create { background: var(--tint-2); color: var(--ink); }
.kind-update { background: var(--accent-soft); color: var(--ink); }
.kind-delete { background: var(--danger-soft); color: var(--danger); }
.kind-transfer { background: var(--danger-soft); color: var(--danger); }

/* 아이폰 홈 표시줄과 둥근 모서리를 피한다. 떠 있는 단추와 대화창이 가리지 않게 한다. */
/* 좁은 화면은 위의 640px 규칙이 따로 정한다. 여기서 덮지 않게 넓은 화면에만 건다. */
@media (min-width: 641px) {
  .fab { right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
  .dock { right: calc(20px + env(safe-area-inset-right)); bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* 손가락으로 누르는 기기. 글자 단추·체크·아이콘을 44px 안팎으로 키운다. */
@media (pointer: coarse) {
  button.link { min-height: 44px; padding: 10px 10px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  input[type="checkbox"] { width: 24px; height: 24px; }
  label.buy { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
  .filter-chip, .who-chip, .prio-chip { min-height: 40px; }
  .toast-action { min-height: 44px; }
}

/* 일정 보기 고르기와 앞으로의 일정 목록. */
.schedule-modes { margin: 0 0 12px; }
.upcoming-day h3 { margin: 14px 0 4px; font-size: 0.95rem; color: var(--muted); }
.upcoming-day:first-child h3 { margin-top: 0; }
.upcoming-item { display: inline-flex; align-items: baseline; gap: 8px; text-align: left; text-decoration: none; }
.upcoming-when { min-width: 3.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.year-pick { align-items: center; gap: 10px; margin: 0 0 12px; }
.premium-total strong { font-size: 1.4rem; }
.trash-pick { display: inline-flex; align-items: flex-start; gap: 10px; }
.trash-bulk { justify-content: flex-end; margin-bottom: 6px; }
.ops-services { width: 100%; border-collapse: collapse; margin: 4px 0 10px; font-size: 0.9rem; }
.ops-services th, .ops-services td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }

/* 보험 이력 메모 한 줄. 댓글처럼 머리(날·남긴 사람·금액) 아래 내용을 감싸 둔다. 좁아도 넘치지 않는다. */
ul.list li.history-row { align-items: flex-start; }
ul.list li.history-row > button { flex: 0 0 auto; white-space: nowrap; }
.history-text { flex: 1 1 auto; min-width: 0; }
.history-head { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.history-body { display: block; margin-top: 2px; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }