/* 가계부 — 공용 스타일. 아이 화면은 항상 이 밝고 따뜻한 톤 고정 (다크모드 전환 없음 — 매번 같은 화면이 더 예측 가능해서) */
:root {
  --bg: #fbf7ee;
  --card: #ffffff;
  --ink: #2e2418;
  --ink-soft: #8c7f68;
  --line: #f0e7d6;

  --green-bg: #dcf4e3; --green: #2fae64; --green-deep: #1e8a4c;
  --pink-bg: #fce1e6;  --pink: #ef5876;  --pink-deep: #d8415c;
  --amber-bg: #fdecc7; --amber: #ec9d1f; --amber-deep: #c67c0f;
  --purple-bg: #eae1fa; --purple: #8b5fe0; --purple-deep: #6f42c4;

  --accent: var(--pink);
  --accent-soft: var(--pink-bg);
  --good: var(--green);
  --good-soft: var(--green-bg);
  --vault: var(--purple);
  --vault-soft: var(--purple-bg);
  --danger: #d8415c;

  --radius-lg: 26px;
  --radius-md: 18px;
}

/* 아이폰 사파리는 viewport의 user-scalable=no를 접근성 때문에 무시해서, 숫자 빨리 눌렀다
   지웠다 할 때 더블탭으로 오인해서 화면이 확대되는 문제가 있었음 — touch-action으로 직접 막음 */
* { touch-action: manipulation; }
* { box-sizing: border-box; min-width: 0; }
.hidden { display: none !important; }
.icon-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* body에 overflow-x를 직접 걸면 CSS 스펙상 overflow-y도 auto로 강제되면서
   body 자신이 독립 스크롤 컨테이너가 돼버려서(window.scrollY/scrollIntoView가 안 먹음 —
   "빠른 관리" 버튼이 눌러도 반응 없던 원인) html에만 걸어서 뷰포트 스크롤이 정상 동작하게 함 */
html { height: 100%; overflow-x: hidden; }
/* 큰 글씨 모드 — rem 단위를 쓰는 곳은 전부 비율대로 같이 커짐(설정에서 켬/끔, localStorage에 저장) */
html.large-text { font-size: 125%; }
body {
  height: 100%;
  margin: 0;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font-family: inherit; }
button { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.design-preview-badge {
  align-self: center;
  margin: 8px 0 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: #352c25;
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .02em;
}

/* ---------- 상단바 (관리자 화면) ---------- */
.top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 6px;
}
.top-bar .app-title { font-size: 1.3rem; font-weight: 800; }
.top-bar .today { margin-left: auto; font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }
.icon-settings-btn {
  background: var(--purple-bg); border: none; border-radius: 999px;
  width: 34px; height: 34px; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 아이 화면 상단 헤더 (아바타 + 인사말) ---------- */
.child-brand-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 18px 0;
}
.child-brand-logo {
  display: block;
  width: min(190px, 48vw);
  height: auto;
  max-height: 112px;
  object-fit: contain;
}
.child-header {
  display: flex; align-items: center; gap: 11px; padding: 18px 18px 10px;
  position: relative;
}
.child-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--amber-bg); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--amber);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  overflow: hidden;
}
.child-avatar img { width: 100%; height: 100%; object-fit: cover; }
.child-header-text { flex: 1; min-width: 0; }
.child-greeting { font-size: 1.25rem; font-weight: 900; letter-spacing: -.03em; }
.child-tagline { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.child-header-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.child-header-side .today { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; }

.header-menu-btn, .header-bell-btn {
  background: none; border: none; font-size: 1.3rem; color: var(--ink);
  width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.header-menu-btn { color: var(--pink); font-weight: 900; }
.header-bell-btn { background: #fff; border-radius: 15px; font-size: 1.1rem; box-shadow: 0 5px 16px rgba(72,51,34,.08); }
.bell-badge {
  position: absolute; top: 2px; right: 2px; background: var(--pink); color: #fff;
  font-size: 0.62rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  box-shadow: 0 0 0 2px var(--bg);
}

/* ---------- 내 돈 현황 카드 / 미리보기 카드 ---------- */
.money-status-card, .preview-card {
  background: var(--card); border-radius: var(--radius-md); padding: 16px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.03);
}
.preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.preview-head h2 { font-size: 0.95rem; font-weight: 800; margin: 0; }
.link-more { background: none; border: none; font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); padding: 4px; }
.money-status-card .preview-head { margin-bottom: 12px; }
.preview-total { font-size: 0.9rem; font-weight: 800; color: var(--pink-deep); font-variant-numeric: tabular-nums; }

/* ---------- 기록 탭: 잔액 카드 ---------- */
.record-balance-card { text-align: center; }
.record-balance-card .lbl { font-size: 0.85rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 4px; }
.record-balance-card .val { font-size: 2rem; font-weight: 800; color: var(--pink-deep); }

.usage-summary-page { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 430px; margin: 0 auto; }
.usage-summary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  padding: 16px 10px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #f1e9dc;
  box-shadow: 0 5px 0 rgba(75,54,27,.05);
}
.usage-summary-card > img { width: 76px; height: 70px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(40,30,20,.12)); }
.usage-summary-card.balance > img { width: 72px; }
.usage-summary-card.goal-saved > img { width: 72px; }
.usage-summary-copy { min-width: 0; width: 100%; text-align: center; margin-top: 8px; }
.usage-summary-title { color: #4a4036; font-size: .92rem; font-weight: 900; line-height: 1.3; word-break: keep-all; }
.usage-summary-title::before { content: '🐷'; margin-right: 6px; font-size: .78em; }
.usage-summary-card.received .usage-summary-title::before { content: ''; margin: 0; }
.usage-summary-card.spent .usage-summary-title::before { content: ''; margin: 0; }
.usage-summary-card.goal-saved .usage-summary-title::before { content: ''; margin: 0; }
.usage-summary-amount { margin-top: 5px; color: var(--pink-deep); font-size: clamp(1.3rem, 6vw, 1.7rem); font-weight: 900; line-height: 1.15; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.usage-summary-amount.small { margin-top: 4px; font-size: 1.05rem; }
.usage-summary-date { display: inline-block; margin-top: 8px; padding: 5px 11px; border-radius: 12px; background: #fff7b8; color: #5f4b00; font-size: .7rem; font-weight: 800; }
.usage-summary-card.received .usage-summary-amount { color: #1d77cc; font-size: 1.3rem; }
.usage-summary-card.spent .usage-summary-amount { color: var(--pink-deep); }
.usage-summary-card.goal-saved .usage-summary-amount { color: var(--green-deep); }
.usage-summary-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.usage-summary-note { margin-top: 10px; color: #aa9d8b; font-size: .78rem; font-weight: 700; word-break: keep-all; }

@media (max-width: 380px) {
  .usage-summary-card { min-height: 150px; padding: 12px 8px; }
  .usage-summary-card > img { width: 64px; height: 58px; }
  .usage-summary-card.balance > img,
  .usage-summary-card.goal-saved > img { width: 60px; }
  .usage-summary-title { font-size: .84rem; }
  .usage-summary-amount { font-size: 1.2rem; }
}

/* 기록 탭: 세로로 쭉 나열하지 않고 옆으로 넘겨보는 카드 목록 (한 화면에 5개 정도) */
.record-hscroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.record-hscroll.empty-hint,
.record-hscroll .empty-hint { flex: 1; padding: 14px 0; }
.record-item-card {
  flex: 0 0 76px; scroll-snap-align: start;
  background: var(--bg); border-radius: 14px; padding: 10px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.record-item-card .date { font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); }
.record-item-card .lbl {
  font-size: 0.66rem; font-weight: 700; color: var(--ink-soft);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.record-item-card .amt { font-size: 0.72rem; font-weight: 800; }
.record-item-card .amt.plus { color: var(--green-deep); }
.record-item-card .amt.minus { color: var(--pink-deep); }
.record-item-card .amt.star { color: var(--amber-deep); }

/* ---------- 빠른 실행 버튼 2개 ---------- */
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: none; border-radius: var(--radius-md); padding: 16px 8px;
  font-size: 0.85rem; font-weight: 800; color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}
.quick-action-btn .ic { font-size: 1.5rem; }
.quick-action-btn.spend { background: linear-gradient(135deg, #f2718b, var(--pink)); }
.quick-action-btn.nospend { background: linear-gradient(135deg, #45c37c, var(--green)); }
.quick-action-btn.disabled { background: #e5ded0; color: #a89c86; box-shadow: none; }
.quick-action-btn:active { transform: translateY(1px); }

/* ---------- 랭킹 탭 (카테고리 지출 랭킹 / 목표 도전) ---------- */
.rank-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rank-row:last-child { margin-bottom: 0; }
.rank-badge { width: 32px; text-align: center; font-size: 1.05rem; font-weight: 800; color: var(--ink-soft); flex-shrink: 0; white-space: nowrap; }
.rank-ic { font-size: 1.3rem; flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.rank-info { flex: 1; min-width: 0; }
.rank-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; font-weight: 700; margin-bottom: 5px; }
.rank-top .rank-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-top .rank-amt { font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rank-bar-track { background: var(--line); border-radius: 999px; height: 10px; overflow: hidden; }
.rank-bar-track span { display: block; height: 100%; border-radius: 999px; }
.rank-pct { width: 38px; text-align: right; font-size: 0.78rem; font-weight: 800; color: var(--ink-soft); flex-shrink: 0; }

/* 이번 달 목표 도전 (횟수/총액 요약 숫자) */
.challenge-stat-row { display: flex; gap: 10px; }
.challenge-stat { flex: 1; background: var(--bg); border-radius: var(--radius-md); padding: 14px 8px; text-align: center; }
.challenge-stat .val { font-size: 1.3rem; font-weight: 800; color: var(--pink-deep); font-variant-numeric: tabular-nums; }
.challenge-stat .lbl { font-size: 0.74rem; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }

/* ---------- 목표 미리보기 ---------- */
.goal-preview-title { font-weight: 800; font-size: 0.92rem; margin-bottom: 6px; }
.goal-preview-bar { height: 10px; border-radius: 999px; background: var(--amber-bg); overflow: hidden; margin-bottom: 6px; }
.goal-preview-bar span { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.goal-preview-amt { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; }
.goal-preview-more { font-size: 0.76rem; color: var(--ink-soft); margin-top: 8px; }

/* ---------- 빙고판 아이콘 설정 ---------- */
.bingo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bingo-cell {
  aspect-ratio: 1; border-radius: 16px; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 0.72rem; font-weight: 800;
}
.bingo-cell .ic { font-size: 1.7rem; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.bingo-cell.empty { background: var(--card); border: 2px dashed var(--line); color: var(--ink-soft); }
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lib-item {
  border-radius: 16px; border: none; padding: 14px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 800;
}
.lib-item .ic { font-size: 1.6rem; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }

/* ---------- 관리자 화면 상단 아이 전환 (아이 2명 이상일 때만 보임) ---------- */
.child-switcher { display: flex; gap: 8px; padding: 10px 14px 0; overflow-x: auto; }
.child-switcher.hidden { display: none; }
.child-switch-btn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink-soft); font-size: 0.82rem; font-weight: 800; white-space: nowrap;
}
.child-switch-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 관리자 화면 상단 탭 네비게이션 ---------- */
.tab-nav {
  display: flex; gap: 4px; padding: 6px 14px 0; position: sticky; top: 0; z-index: 4;
  background: var(--bg); overflow-x: auto;
}
.tab-btn {
  flex: 1; white-space: nowrap; background: none; border: none; border-bottom: 3px solid transparent;
  padding: 10px 6px; font-size: 0.86rem; font-weight: 800; color: var(--ink-soft);
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn-icon { width: 22px; height: 22px; vertical-align: -5px; object-fit: contain; }
.tab-page { display: flex; flex-direction: column; gap: 16px; }
.tab-page.hidden { display: none; }

/* ---------- 월간 리포트 ---------- */
.report-month-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.report-month-nav h2 { font-size: 1.1rem; min-width: 92px; text-align: center; }
.report-month-nav button {
  background: var(--amber-bg); color: var(--amber-deep); border: none; border-radius: 999px;
  width: 34px; height: 34px; font-size: 0.9rem; font-weight: 800;
}
.report-praise-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.report-praise-item {
  background: var(--green-bg); color: var(--green-deep); font-weight: 700; font-size: 0.88rem;
  border-radius: var(--radius-md); padding: 12px 14px; line-height: 1.5;
}
.report-praise-item.neutral { background: var(--amber-bg); color: var(--amber-deep); }
.report-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.report-stat-tile { background: var(--bg); border-radius: var(--radius-md); padding: 12px 14px; }
.report-stat-tile .lbl { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; margin-bottom: 4px; }
.report-stat-tile .val { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.report-stat-tile .diff { font-size: 0.72rem; font-weight: 700; margin-top: 2px; }
.report-stat-tile .diff.up { color: var(--green-deep); }
.report-stat-tile .diff.down { color: var(--pink-deep); }

/* ---------- 카드/버튼 공용 ---------- */
main { padding: 8px 18px 40px; display: flex; flex-direction: column; gap: 16px; flex: 1; }

@keyframes pop-in {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bounce-in {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* 3분할 오늘의 숫자 카드 (받은 돈 / 쓴 돈 / 남은 돈) */
.stat3-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; animation: pop-in 0.25s ease; }
.stat3-tile {
  border-radius: var(--radius-md);
  padding: 14px 8px 12px;
  text-align: center;
  box-shadow: 0 3px 0 rgba(0,0,0,0.04);
}
.stat3-tile .ic { font-size: 1.5rem; display: block; margin-bottom: 4px; }
.stat3-tile .lbl { font-size: 0.7rem; font-weight: 800; margin-bottom: 4px; opacity: 0.75; }
.stat3-tile .val { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; word-break: keep-all; }
.stat3-tile.green { background: var(--green-bg); color: var(--green-deep); }
.stat3-tile.pink { background: var(--pink-bg); color: var(--pink-deep); }
.stat3-tile.amber { background: var(--amber-bg); color: var(--amber-deep); }

.speech {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid var(--amber-bg);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 16px 10px 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--amber-deep);
}
.speech .bubble-text { flex: 1; }

.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: linear-gradient(135deg, var(--amber-bg), #fff4da);
  color: var(--amber-deep);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.03);
}

.big-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  padding: 20px 16px;
  font-size: 1.14rem;
  font-weight: 800;
  color: #fff;
  min-height: 64px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.08);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.big-btn:active { transform: translateY(2px) scale(0.99); box-shadow: 0 2px 0 rgba(0,0,0,0.08); }
.big-btn.spend { background: linear-gradient(135deg, #f2718b, var(--pink)); }
.big-btn.nospend { background: linear-gradient(135deg, #45c37c, var(--green)); }
.big-btn.disabled { background: #e5ded0; color: #a89c86; box-shadow: none; }
.big-btn.secondary { background: var(--card); color: var(--ink); border: 2px solid var(--line); box-shadow: none; }

.recent {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.recent h2 { font-size: 0.92rem; color: var(--ink); font-weight: 800; margin: 6px 0 8px; }
.recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.recent-row .ic { font-size: 1.2rem; }
.recent-row .lbl { font-weight: 700; }
.recent-row .memo { color: var(--ink-soft); font-size: 0.82rem; }
.recent-row .amt { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.recent-row .amt.plus { color: var(--green-deep); }
.recent-row .amt.minus { color: var(--ink); }
.recent-row .amt.star { color: var(--amber-deep); }
.empty-hint { color: var(--ink-soft); font-size: 0.9rem; text-align: center; padding: 18px 0; }

/* ---------- 전역 에러 화면 (빈 화면/영어 에러 대신 항상 이걸로 덮음) ---------- */
.error-screen {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; max-width: 480px; margin: 0 auto;
}
.error-screen.hidden { display: none; }
.error-screen-card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 32px 24px 26px; text-align: center; width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.error-screen-art { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.error-screen-prop { font-size: 2rem; }
.error-screen-prop.left { margin-right: -6px; transform: rotate(-8deg); }
.error-screen-prop.right { margin-left: -6px; transform: rotate(8deg); }
.error-screen-coin { position: absolute; bottom: -6px; left: 28%; font-size: 1.3rem; }
.error-screen-badge {
  display: inline-block; background: var(--pink-bg); color: var(--pink-deep);
  font-weight: 800; font-size: 0.8rem; padding: 5px 14px; border-radius: 999px; margin-bottom: 10px;
}
.error-screen-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.error-screen-desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; margin-bottom: 16px; }
.error-screen-tip {
  background: var(--amber-bg); color: var(--amber-deep); font-size: 0.82rem; font-weight: 700;
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 18px;
}
.error-screen-btn-primary {
  width: 100%; border: none; border-radius: var(--radius-md); padding: 15px;
  background: var(--ink); color: #fff; font-size: 1rem; font-weight: 800; margin-bottom: 10px;
}
.error-screen-btn-secondary {
  width: 100%; border: none; border-radius: var(--radius-md); padding: 15px;
  background: var(--amber); color: #fff; font-size: 1rem; font-weight: 800;
}
.error-screen-btn-secondary:disabled { opacity: 0.6; }
.error-screen-sent { margin-top: 12px; color: var(--green-deep); font-weight: 700; font-size: 0.88rem; }

/* ---------- 모달 (화면 덮는 단계식 흐름) ---------- */
.modal {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
}
.modal.hidden { display: none; }
.modal-top {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 6px;
}
.modal-top .back { font-size: 1.4rem; background: none; border: none; padding: 6px; color: var(--ink); }
.modal-top .title { font-size: 1.15rem; font-weight: 800; }
.modal-body { padding: 10px 20px 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; overflow-y: auto; }

.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-btn {
  background: var(--card);
  border: none;
  border-radius: var(--radius-md);
  padding: 22px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 800;
  min-height: 100px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.05);
  transition: transform 0.08s ease;
}
.cat-btn:active { transform: translateY(2px) scale(0.98); }
.cat-btn .ic {
  font-size: 1.7rem;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
}
.cat-btn.wide { grid-column: 1 / -1; flex-direction: row; min-height: 72px; }

.amount-card { background: var(--card); border-radius: var(--radius-md); padding: 20px; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,0.04); }
.amount-card .cat-shown { font-size: 1rem; font-weight: 800; margin-bottom: 12px; }
.amount-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 2.4rem; font-weight: 800; text-align: center; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.amount-input::placeholder { color: #d9d2c2; }
.amount-unit { font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }

.memo-box { background: var(--card); border-radius: var(--radius-md); padding: 16px; box-shadow: 0 3px 0 rgba(0,0,0,0.04); }
.memo-box label { display: block; font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; margin-bottom: 8px; }
.memo-box input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 1rem; outline: none; }
.memo-box input:focus { border-color: var(--accent); }

.confirm-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 20px; position: relative; overflow: hidden;
}
.confirm-wrap .big-emoji { font-size: 3.4rem; animation: bounce-in 0.5s ease; }
.confirm-wrap .msg { font-size: 1.25rem; font-weight: 800; }
.confirm-wrap .sub-amt { font-size: 1.7rem; font-weight: 800; color: var(--pink-deep); font-variant-numeric: tabular-nums; }
.confirm-wrap .big-btn { max-width: 220px; margin-top: 10px; }

.confetti-piece {
  position: absolute; top: -10%; width: 9px; height: 14px; opacity: 0.9;
  animation: confetti-fall linear forwards;
  border-radius: 2px;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(115vh) rotate(540deg); opacity: 0.9; }
}

/* ---------- 아이 사진 ---------- */
.child-photo-frame {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
  background: var(--amber-bg); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--amber);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
  overflow: hidden;
}
.child-photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* 목표 달성 축하 — 레이싱 테마 배경(도로색) + 그 안에 사진 원형 */
.royal-scene {
  position: relative; width: 100%; max-width: 280px; border-radius: 28px;
  padding: 30px 20px 22px; margin: 0 auto; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #6b7078, #383b40);
}
.royal-scene::before {
  content: "🏁"; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  font-size: 5.5rem; opacity: 0.22;
}
.royal-scene .sparkle { position: absolute; font-size: 1.1rem; opacity: 0.9; }
.royal-scene .sparkle.s1 { top: 14px; left: 18px; }
.royal-scene .sparkle.s2 { top: 22px; right: 16px; }
.royal-scene .sparkle.s3 { bottom: 40px; left: 12px; }

/* 레이싱카 그림(얼굴 자리에 아이 사진 합성) — 성별 상관없이 하나로 통일 */
.royal-frame { position: relative; width: 250px; aspect-ratio: 3 / 2; margin: 0 auto; z-index: 1; }
.royal-frame-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.royal-frame-photo {
  position: absolute; border-radius: 50%; overflow: hidden; background: var(--amber-bg);
  transform: translate(-50%, -50%);
  left: 49.7%; top: 26.6%; width: 15.3%; height: 23%;
}
.royal-frame-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 목표(저축) ---------- */
.goals-wrap { display: flex; flex-direction: column; gap: 12px; }
.goal-card { background: linear-gradient(160deg, #fff, var(--amber-bg) 220%); border-radius: var(--radius-md); padding: 16px; box-shadow: 0 3px 0 rgba(0,0,0,0.04); }
.goal-title { font-weight: 800; font-size: 1rem; margin-bottom: 10px; }
.goal-amounts { font-size: 0.85rem; color: var(--amber-deep); font-weight: 800; font-variant-numeric: tabular-nums; }
.goal-remaining { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; margin-bottom: 12px; }
.goal-cancel-link { display: block; text-align: center; margin-top: 10px; font-size: 0.8rem; color: var(--ink-soft); background: none; border: none; text-decoration: underline; padding: 6px; }

.goal-fill-btn {
  width: 100%; border: none; border-radius: var(--radius-md);
  padding: 16px; font-size: 1.05rem; font-weight: 800; color: #fff;
  background: var(--amber);
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}
.goal-fill-btn:active { transform: translateY(1px); }

.goal-page-shell { padding: 14px; }
.goal-race-card {
  padding: 14px;
  background: #fffdf8;
  border: 1px solid #f4dfb8;
  overflow: hidden;
}
.goal-race-heading {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.goal-target-icon {
  width: 104px;
  max-width: 125%;
  height: 92px;
  object-fit: contain;
  justify-self: center;
  filter: drop-shadow(0 5px 5px rgba(193,123,15,.16));
}
.goal-title-action {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 22px;
  padding: 18px 12px;
  background: linear-gradient(135deg, #f5a818, #f09a14);
  color: #fff;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: break-word;
  box-shadow: 0 4px 0 #dc870d;
}
.goal-title-action:active { transform: translateY(2px); box-shadow: 0 2px 0 #dc870d; }
.goal-progress-copy { margin: 0 4px 12px 102px; }
.goal-race-card .goal-amounts { font-size: 1rem; color: #d88400; line-height: 1.35; }
.goal-race-card .goal-remaining { margin: 2px 0 0; font-size: .88rem; line-height: 1.4; word-break: keep-all; }
.goal-race-card .goal-road { height: 104px; margin: 0 0 8px; border-radius: 24px; }
.goal-race-card .goal-road::before { right: 60px; }
.goal-race-card .goal-road .finish-zone { width: 54px; background-size: 18px 18px; }
.goal-race-card .goal-car { width: 88px; }

@media (max-width: 380px) {
  .goal-race-heading { grid-template-columns: 78px minmax(0, 1fr); gap: 6px; }
  .goal-target-icon { width: 90px; height: 82px; }
  .goal-title-action { padding: 16px 8px; font-size: 1.05rem; }
  .goal-progress-copy { margin-left: 84px; }
  .goal-race-card .goal-road { height: 94px; }
  .goal-race-card .goal-car { width: 78px; }
}

/* ---------- 미션(부모가 만들어준 과제) ---------- */
.mission-child-card {
  background: linear-gradient(160deg, #fff, var(--purple-bg) 220%); border-radius: var(--radius-md);
  padding: 16px; box-shadow: 0 3px 0 rgba(0,0,0,0.04); margin-bottom: 12px;
}
.mission-child-card:last-child { margin-bottom: 0; }
.mission-child-title { font-weight: 800; font-size: 1rem; margin-bottom: 10px; }
.mission-child-bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.mission-child-bar span { display: block; height: 100%; background: var(--purple); border-radius: 999px; }
.mission-child-meta { font-size: 0.78rem; color: var(--purple-deep); font-weight: 700; margin-bottom: 12px; }
.mission-child-done { font-size: 0.9rem; font-weight: 800; color: var(--purple-deep); text-align: center; padding: 4px 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mission-tick-btn {
  width: 100%; border: none; border-radius: var(--radius-md);
  padding: 16px; font-size: 1.05rem; font-weight: 800; color: #fff;
  background: var(--purple);
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}
.mission-tick-btn:active { transform: translateY(1px); }

/* 목표 진행률 = 도로 위를 달리는 자동차 (크고 확실하게!) */
@keyframes car-bob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
  50% { transform: translate(-50%, -54%) rotate(2deg); }
}
@keyframes flag-wave {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  50% { transform: translateY(-50%) rotate(-8deg); }
}
@keyframes speed-line {
  0% { opacity: 0.9; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleX(0.3) translateX(-14px); }
}

.goal-road {
  position: relative; height: 84px; border-radius: 22px; margin-bottom: 14px;
  background: linear-gradient(180deg, #6b7078, #4c5057);
  border: 4px solid #363a40; overflow: hidden;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25);
}
.goal-road::before {
  content: ""; position: absolute; top: 50%; left: 12px; right: 76px; height: 5px;
  background: repeating-linear-gradient(90deg, #fff4d6 0 16px, transparent 16px 32px);
  transform: translateY(-50%);
  opacity: 0.85;
}
.goal-road .finish-zone {
  position: absolute; top: 0; bottom: 0; right: 0; width: 46px;
  background:
    repeating-conic-gradient(#17181a 0% 25%, #f4f4f4 0% 50%) 0 0/16px 16px;
  border-left: 3px solid #17181a;
}
.goal-road .flag {
  position: absolute; right: 6px; top: 50%; font-size: 2rem; z-index: 2;
  transform-origin: bottom center;
  animation: flag-wave 1.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
.goal-road .pct-badge {
  position: absolute; top: 8px; font-size: 0.72rem; font-weight: 800;
  background: #fff; color: var(--amber-deep); padding: 2px 8px; border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  transition: left 0.7s cubic-bezier(0.3, 0.9, 0.4, 1);
  white-space: nowrap;
}
.goal-car-wrap {
  position: absolute; top: 62%;
  transition: left 0.7s cubic-bezier(0.3, 0.9, 0.4, 1);
}
.goal-car {
  display: inline-block;
  width: 76px; height: auto;
  transform: translate(-50%, -50%);
  animation: car-bob 0.6s ease-in-out infinite;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.4));
}
.goal-car-wrap .speed-lines { position: absolute; top: 50%; right: 100%; display: flex; flex-direction: column; gap: 5px; margin-right: 4px; }
.goal-car-wrap .speed-lines span {
  width: 20px; height: 3px; background: #fff; border-radius: 2px; opacity: 0.8;
  animation: speed-line 0.5s ease-out infinite;
}
.goal-car-wrap .speed-lines span:nth-child(2) { animation-delay: 0.15s; width: 14px; }
.goal-car-wrap .speed-lines span:nth-child(3) { animation-delay: 0.3s; width: 10px; }

/* ---------- 홈/기록 화면 재디자인 (2026-08-19): 돈 히어로 카드 ---------- */
.money-hero-card {
  min-height: 216px;
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  background: linear-gradient(145deg, #eaf9ef 0%, #dff5e8 100%);
  border: 1px solid #bfe6cf;
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(50,135,91,.09);
}
.money-hero-card::after { content:""; position:absolute; width:150px; height:150px; right:-60px; top:-75px; border-radius:50%; background:rgba(255,255,255,.34); }
.money-hero-copy { position: relative; z-index: 2; text-align: center; }
.money-hero-copy .lbl { color: var(--green-deep); font-size: 1.05rem; font-weight: 900; margin-bottom: 8px; }
.money-hero-copy .val { display:block; padding:12px 8px; border:2px solid #b9e5ca; border-radius:18px; background:rgba(255,255,255,.9); color:var(--ink); font-size:clamp(1.55rem,7vw,2rem); font-weight:900; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.money-hero-sub { margin:8px 0 10px; color:#4c9d73; font-size:.72rem; font-weight:800; word-break:keep-all; }
.money-hero-link {
  border:0; background:#fff; color:var(--green-deep); border-radius:999px; padding:8px 15px;
  font-size:.76rem; font-weight:900; white-space:nowrap; box-shadow:0 4px 12px rgba(52,132,89,.10);
}
.money-hero-mascot { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-width:0; }
.money-hero-mascot img { width:min(112px,100%); height:auto; filter:drop-shadow(0 8px 8px rgba(50,100,70,.14)); }
.money-sparkle { position:absolute; z-index:3; font-size:1.1rem; }
.money-sparkle.s1 { right:7px; top:8px; }
.money-sparkle.s2 { left:3px; bottom:18px; font-size:.9rem; }
.money-hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.money-hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(216,65,92,0.25); }
.money-hero-dots span.on { background: var(--pink-deep); }

/* ---------- 오늘의 미션 (홈, 가로 스크롤 카드) ---------- */
.mission-today-badge {
  background: var(--pink-bg); color: var(--pink-deep); font-size: 0.74rem; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
}
.mission-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mission-home-card {
  background: var(--amber-bg);
  border-radius: var(--radius-md); padding: 16px 8px; text-align: center;
}
.mission-home-card.done { background: var(--green-bg); }
.mission-home-card .ic { display: block; margin: 0 auto 10px; font-size: 1.8rem; }
.mission-home-card .ic .icon-img { width: 32px; height: 32px; margin: 0 auto; }
.mission-home-card .title { font-size: 0.8rem; font-weight: 800; margin-bottom: 10px; line-height: 1.3; min-height: 2.6em; }
.mission-home-card .count { font-size: 0.78rem; font-weight: 800; color: var(--amber-deep); }
.mission-home-card .count.done { color: var(--green-deep); }
.mission-home-card .reward {
  display: inline-block; margin-top: 6px; background: var(--amber-bg); color: var(--amber-deep);
  font-size: 0.68rem; font-weight: 800; padding: 3px 8px; border-radius: 999px;
}
.mission-more-link {
  display: block; text-align: center; width: 100%; margin-top: 10px;
  background: var(--bg); border: none; border-radius: 999px; padding: 10px;
  font-size: 0.82rem; font-weight: 800; color: var(--ink-soft);
}
.mission-feature-list { min-height: 104px; }
.mission-feature-card { display:flex; align-items:center; gap:14px; padding:15px; border:1px solid #cfe4fb; border-radius:20px; background:linear-gradient(145deg,#eff8ff,#e7f3ff); }
.mission-feature-card.done { border-color:#cce9d6; background:linear-gradient(145deg,#effbf3,#e5f7eb); }
.mission-feature-ic { width:72px; height:72px; flex:0 0 72px; display:grid; place-items:center; border-radius:19px; background:rgba(255,255,255,.82); font-size:2.25rem; box-shadow:0 5px 14px rgba(72,119,165,.09); }
.mission-feature-body { flex:1; min-width:0; }
.mission-feature-title { margin-bottom:10px; color:#3179b5; font-size:1rem; font-weight:900; line-height:1.35; word-break:keep-all; }
.mission-feature-card.done .mission-feature-title { color:var(--green-deep); }
.mission-feature-progress { height:10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.95); }
.mission-feature-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#62b8f4,#388cd0); }
.mission-feature-card.done .mission-feature-progress span { background:linear-gradient(90deg,#65cf8c,#2fae64); }
.mission-feature-meta { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:8px; color:#5188b4; font-size:.73rem; font-weight:800; }
.mission-feature-meta .reward { padding:3px 8px; border-radius:999px; background:#fff7dc; color:#b57915; white-space:nowrap; }

/* ---------- 내 목표 (홈, 카드 1개 — 목표는 한 번에 하나만) ---------- */
.goal-mini-card {
  background: linear-gradient(160deg, #fff, var(--amber-bg) 220%);
  border-radius: var(--radius-md); padding: 14px; display: flex; align-items: center; gap: 12px;
}
.goal-mini-ic {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.goal-mini-body { flex: 1; min-width: 0; }
.goal-mini-title { font-weight: 800; font-size: 0.92rem; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-mini-bar { height: 9px; border-radius: 999px; background: #fff; overflow: hidden; margin-bottom: 6px; }
.goal-mini-bar span { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.goal-mini-amt { font-size: 0.76rem; color: var(--ink-soft); font-weight: 700; }
.goal-mini-pct { font-size: 1rem; font-weight: 800; color: var(--amber-deep); flex-shrink: 0; }

/* ---------- 내 목표 (홈, 미니 레이싱 트랙 미리보기) ---------- */
.goal-home-card {
  background: linear-gradient(155deg, #f6edff, #fff5fb 115%);
  border: 1px solid #e6d3f8;
  border-radius: var(--radius-lg); padding: 18px;
  box-shadow: 0 9px 22px rgba(112,66,196,.07);
}
.goal-home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.goal-home-head h2 { font-size: 1rem; font-weight: 800; margin: 0; color: var(--purple-deep); }
.goal-detail-pill { background: #fff; color: var(--purple-deep); border: none; border-radius: 999px; padding: 7px 14px; font-size: 0.78rem; font-weight: 800; box-shadow: 0 2px 0 rgba(0,0,0,0.03); }
.goal-home-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.goal-home-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 2px 0 rgba(0,0,0,0.03); overflow: hidden;
}
.goal-home-icon .icon-img { width: 34px; height: 34px; }
.goal-home-body { flex: 1; min-width: 0; }
.goal-home-title { font-weight: 800; font-size: 1rem; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-home-amt { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; }

.goal-mini-road { position: relative; height: 60px; margin: 6px 6px 12px; }
.goal-mini-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 10px;
  background: linear-gradient(180deg, #6b7078, #4c5057); border-radius: 999px; transform: translateY(-50%);
}
.goal-mini-track::after { content:""; position:absolute; left:12px; right:42px; top:50%; height:2px; transform:translateY(-50%); background:repeating-linear-gradient(90deg,#fff 0 12px,transparent 12px 23px); opacity:.9; }
.goal-mini-goal-badge {
  position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  background: var(--pink); color: #fff; font-size: 0.64rem; font-weight: 800;
  padding: 5px 11px; border-radius: 999px; z-index: 2; box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.goal-mini-car-wrap {
  position: absolute; top: 42%; transform: translate(-50%, -50%);
  transition: left 0.7s cubic-bezier(0.3, 0.9, 0.4, 1); z-index: 1;
}
.goal-mini-car { width: 68px; height: auto; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.35)); }
.goal-mini-pct {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  background: var(--purple); color: #fff; font-size: 0.7rem; font-weight: 800;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.goal-mini-status { text-align: center; font-size: 0.88rem; font-weight: 800; color: var(--purple-deep); }

/* ---------- 오늘의 한마디 ---------- */
.today-tip-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #fff8ea, var(--amber-bg));
  border: 1px solid #f4deb4; border-radius: var(--radius-md); padding: 12px 16px;
  box-shadow: 0 6px 15px rgba(160,110,30,.05);
}
.today-tip-label { font-size: 0.9rem; font-weight: 800; color: var(--amber-deep); margin-bottom: 2px; }
.today-tip-text { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }

/* 아이 홈: 휴대폰 첫 화면에서 핵심이 한눈에 보이는 압축형 배치 */
#mainApp #pageHome { gap: 10px; }
#mainApp .child-header { padding-top: 10px; padding-bottom: 7px; }
#mainApp .money-hero-card { min-height: 152px; padding: 13px 15px; border-radius: 22px; }
#mainApp .money-hero-mascot img { width: min(124px, 100%); }
#mainApp .money-hero-mascot .child-ref-pig { width:min(132px,115%); max-width:none; object-fit:contain; }
#mainApp .money-hero-mascot .child-home-wallet { width:min(136px,118%); max-width:none; object-fit:contain; filter:drop-shadow(0 7px 7px rgba(216,65,92,.14)); }
#mainApp .money-hero-mascot .child-home-wallet.orange-wallet { width:min(154px,132%); filter:drop-shadow(0 7px 7px rgba(70,130,90,.16)); }
#mainApp .money-flow-icon { width:72px; height:62px; margin:0 auto 4px; display:grid; place-items:center; }
#mainApp .money-flow-icon img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 4px rgba(216,65,92,.10)); }
#mainApp .money-hero-copy .lbl { margin-bottom: 5px; font-size: .9rem; }
#mainApp .money-hero-copy .val { padding: 8px 5px; border-radius: 14px; font-size: clamp(1.35rem, 6.5vw, 1.75rem); }
#mainApp .money-hero-copy .val { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; line-height: 1.15; letter-spacing: -.06em; }
#mainApp .money-hero-sub { margin: 5px 0 6px; font-size: .64rem; }
#mainApp .money-hero-link { padding: 5px 11px; font-size: .68rem; }
.home-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: stretch; }
#mainApp .home-summary-grid .preview-card { padding: 12px; border-radius: 20px; background: #edf7ff; border: 1px solid #cfe6f7; box-shadow: none; }
#mainApp .home-summary-grid .preview-head { margin-bottom: 7px; flex-wrap: nowrap; gap: 4px; }
#mainApp .home-summary-grid .preview-head h2 { min-width: 0; font-size: .76rem; color: #3179b5; white-space: nowrap; word-break: keep-all; letter-spacing: -.05em; }
#mainApp .mission-today-badge { padding: 3px 6px; font-size: .58rem; }
#mainApp .mission-feature-list { min-height: 116px; }
#mainApp .mission-feature-card { min-height:116px; gap:3px; padding:5px 7px 7px; border:0; border-radius:14px; background:rgba(255,255,255,.72); flex-direction:column; justify-content:center; text-align:center; }
#mainApp .mission-feature-ic { width:72px; height:72px; flex:0 0 72px; border-radius:0; background:transparent; box-shadow:none; }
#mainApp .mission-feature-ic img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 5px rgba(72,119,165,.12)); }
#mainApp .mission-feature-body { width:100%; flex:0 0 auto; min-width:0; }
#mainApp .mission-feature-title { margin-bottom:4px; font-size:.7rem; word-break:keep-all; overflow-wrap:normal; line-height:1.3; }
#mainApp .mission-feature-progress { height: 6px; }
#mainApp .mission-feature-meta { margin-top: 5px; font-size: .58rem; white-space: nowrap; word-break: keep-all; }
#mainApp .mission-feature-meta .reward { display: none; }
#mainApp .mission-more-link { display:none; }
.home-record-card { min-width:0; border:1px solid #e3d3f3; border-radius:20px; padding:8px; background:linear-gradient(145deg,#f7efff,#f4eafb); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:none; }
.home-record-icon { display:grid; place-items:center; width:88px; height:82px; margin-bottom:1px; background:transparent; }
.home-record-icon img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 6px rgba(112,66,196,.12)); }
.home-record-card strong { color: var(--purple-deep); font-size: .8rem; white-space: nowrap; word-break: keep-all; }
.home-record-card > span:not(.home-record-icon) { margin: 4px 0; color: var(--ink-soft); font-size: .6rem; line-height: 1.35; word-break: keep-all; overflow-wrap: normal; }
.home-record-card em { color: var(--purple-deep); font-size: .66rem; font-weight: 900; font-style: normal; }
#mainApp .goal-home-card { padding: 12px 14px; border-radius: 20px; }
#mainApp .goal-home-head { margin-bottom: 6px; }
#mainApp .goal-home-head h2 { font-size: .86rem; white-space: nowrap; word-break: keep-all; }
#mainApp .goal-detail-pill { padding: 5px 9px; font-size: .65rem; }
#mainApp .goal-home-top { gap: 8px; margin-bottom: 4px; }
#mainApp .goal-home-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 1.75rem; box-shadow: 0 4px 11px rgba(112,66,196,.10); }
#mainApp .goal-home-icon .goal-ref-icon { width:62px; height:62px; max-width:none; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(216,65,92,.12)); }
#mainApp .goal-home-title { font-size: .8rem; word-break: keep-all; }
#mainApp .goal-home-amt { font-size: .68rem; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
#mainApp .goal-mini-road { height: 42px; margin: 0 4px 2px; }
#mainApp .goal-mini-car { width: 50px; }
#mainApp .goal-mini-pct { top: -14px; padding: 1px 6px; font-size: .56rem; }
#mainApp .goal-mini-status { font-size: .68rem; }
#mainApp .home-tip-card { display: none; }
#mainApp #streakPill:not(.hidden) { margin: -3px 0 0; padding: 5px 10px; font-size: .68rem; }
#mainApp .bottom-nav-btn .ic { font-size: 1.45rem; line-height: 1; }

@media (max-width: 380px) {
  #mainApp .money-hero-card { grid-template-columns: 38% 62%; padding-inline: 11px; }
  #mainApp .money-hero-copy .val { font-size: 1.3rem; }
  #mainApp .money-hero-mascot img { width: min(112px, 100%); }
  #mainApp .mission-feature-ic { width:66px; height:66px; flex-basis:66px; }
  .home-record-icon { width:80px; height:74px; }
  #mainApp .mission-today-badge { padding-inline: 4px; font-size: .52rem; white-space: nowrap; }
  #mainApp .home-summary-grid .preview-card, .home-record-card { padding: 9px; }
}

/* ---------- 홈 하단 2버튼 (내역쓰기 / 안 썼어요) ---------- */
.dual-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cta-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: none; border-radius: var(--radius-md); padding: 14px; text-align: left;
  color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}
.cta-card:active { transform: translateY(1px); }
.cta-card .ic {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 6px;
}
.cta-card .title { font-size: 0.96rem; font-weight: 800; }
.cta-card .sub { font-size: 0.7rem; font-weight: 700; opacity: 0.92; }
.cta-card.write { background: linear-gradient(135deg, #f2718b, var(--pink)); }
.cta-card.nospend { background: linear-gradient(135deg, #45c37c, var(--green)); }
.cta-card.disabled { background: #e5ded0; color: #a89c86; box-shadow: none; }

/* ---------- 하단 네비게이션 (홈/기록/+/목표/더보기) ---------- */
.bottom-nav {
  display: flex; align-items: center; background: var(--card);
  border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  position: sticky; bottom: 0; z-index: 15;
}
.bottom-nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; padding: 8px 2px; font-size: 0.68rem; font-weight: 800; color: var(--ink-soft);
}
#mainApp .bottom-nav-btn { min-width:0; padding-inline:1px; font-size:.62rem; }
#mainApp .bottom-nav-btn .ic { font-size:2.6rem; }
.bottom-nav-btn .ic { font-size: 2.6rem; }
.bottom-nav-btn .ic .tab-btn-icon { width: 64px; height: 64px; vertical-align: -20px; }
.bottom-nav-btn.active { color: var(--pink-deep); }
.bottom-nav-fab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  margin-top: -30px; background: none; border: none; padding: 0;
}
.bottom-nav-fab span {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #f2718b, var(--pink));
  color: #fff; font-size: 1.7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(239,88,118,0.45), 0 0 0 4px var(--bg);
}

/* ---------- 기록하기(입력) 페이지 ---------- */
.record-balance-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border-radius: var(--radius-md); padding: 12px 16px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.03);
}
.record-balance-strip .lbl { font-size: 0.82rem; font-weight: 800; color: var(--ink-soft); }
.record-balance-strip .val { font-size: 1.05rem; font-weight: 800; color: var(--pink-deep); font-variant-numeric: tabular-nums; }

.add-type-toggle { display: flex; background: var(--bg); border-radius: 999px; padding: 3px; }
.add-type-btn { border: none; background: none; padding: 7px 14px; font-size: 0.8rem; font-weight: 800; color: var(--ink-soft); border-radius: 999px; }
.add-type-btn.active { background: var(--pink); color: #fff; }

.cat-picker-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--bg); border: none; border-radius: var(--radius-md); padding: 12px 14px;
  text-align: left;
}
.cat-picker-ic {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.cat-picker-label { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-picker-optional {
  background: var(--line); color: var(--ink-soft); font-size: 0.68rem; font-weight: 800;
  padding: 3px 8px; border-radius: 999px; flex-shrink: 0;
}
.cat-picker-arrow { color: var(--ink-soft); font-size: 1.1rem; flex-shrink: 0; }

.cat-grid.inline { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cat-grid.inline .cat-btn { padding: 12px 4px; min-height: 76px; font-size: 0.76rem; gap: 6px; }
.cat-grid.inline .cat-btn .ic { width: 36px; height: 36px; font-size: 1.3rem; }
.cat-grid.inline .cat-btn.selected { box-shadow: 0 0 0 2px var(--pink) inset; }

.nospend-banner-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--green-bg); border-radius: var(--radius-md); padding: 10px 14px 10px 10px;
}
.nospend-banner-card .banner-mascot {
  width: 80px; height: 80px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nospend-banner-card .banner-mascot img,
.nospend-banner-card .banner-mascot svg { width: 76px; height: 76px; object-fit: contain; }
.nospend-banner-card .banner-text { flex: 1; min-width: 0; }
.nospend-banner-card .banner-q { font-size: 0.78rem; font-weight: 700; color: var(--green-deep); opacity: 0.85; }
.nospend-banner-card .banner-highlight { font-size: 1rem; font-weight: 800; color: var(--green-deep); }
.nospend-banner-card .banner-sub { font-size: 0.7rem; font-weight: 700; color: var(--green-deep); opacity: 0.8; margin-top: 2px; line-height: 1.4; }
.banner-arrow-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--green); color: #fff; font-size: 1.1rem; font-weight: 800;
}
.nospend-banner-card.disabled { background: var(--line); }
.nospend-banner-card.disabled .banner-q,
.nospend-banner-card.disabled .banner-highlight,
.nospend-banner-card.disabled .banner-sub { color: var(--ink-soft); }
.nospend-banner-card.disabled .banner-arrow-btn { background: #bbb; }

.add-record-panel { display: flex; gap: 10px; align-items: stretch; }
.add-input-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.add-field-row { display: flex; gap: 10px; }
.add-field-box {
  background: var(--card); border-radius: var(--radius-md); padding: 10px 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.03);
}
.add-field-box.memo { flex: 1.3; min-width: 0; }
.add-field-box.amount { flex: 1; text-align: right; }
.add-field-box label { display: block; font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.required-mark { background: var(--pink-bg); color: var(--pink-deep); font-size: 0.62rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; }
.add-field-box input {
  width: 100%; border: none; outline: none; font-size: 0.86rem; font-weight: 700; color: var(--ink); background: transparent;
}
.add-amount-display { font-size: 1.1rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.add-amount-display .unit { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; }

.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad-key {
  background: var(--card); border: none; border-radius: 14px; padding: 12px 0;
  font-size: 1.1rem; font-weight: 800; color: var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,0.04);
}
.keypad-key:active { transform: translateY(1px); }
.keypad-key.back { color: var(--pink-deep); }
.keypad-key.ghost { background: none; box-shadow: none; }

.add-submit-col {
  flex: 0 0 108px; background: var(--pink-bg); border-radius: var(--radius-md);
  padding: 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
}
.add-submit-ic { font-size: 1.6rem; }
.add-submit-text { font-size: 0.74rem; font-weight: 800; color: var(--pink-deep); line-height: 1.3; }
.add-submit-btn {
  width: 100%; border: none; border-radius: 999px; padding: 10px 4px;
  background: var(--pink); color: #fff; font-size: 0.84rem; font-weight: 800;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
}
.add-submit-btn:active { transform: translateY(1px); }

/* ---------- 나(관리자) 화면 ---------- */
.pin-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px;
}
.pin-dots { display: flex; gap: 14px; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); }
.pin-dot.filled { background: var(--accent); border-color: var(--accent); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 260px; }
.pin-key { background: var(--card); border-radius: 16px; padding: 16px 0; font-size: 1.3rem; font-weight: 800; border: none; }
.pin-key.ghost { background: transparent; }
.pin-error { color: var(--danger); font-weight: 700; font-size: 0.9rem; min-height: 1.2em; }

.stat-row { display: flex; gap: 12px; }
.stat-tile { flex: 1; background: var(--green-bg); border-radius: var(--radius-md); padding: 16px; }
.stat-tile .lbl { font-size: 0.78rem; color: var(--green-deep); font-weight: 700; margin-bottom: 6px; opacity: 0.85; }
.stat-tile .val { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green-deep); }
.stat-tile.vault { background: var(--vault-soft); }
.stat-tile.visible { background: var(--green-bg); }
.stat-tile.visible .lbl, .stat-tile.visible .val { color: var(--green-deep); }
.stat-tile.vault .lbl, .stat-tile.vault .val { color: var(--purple-deep); }
.stat-tile.total { background: var(--amber-bg); }
.stat-tile.total .lbl, .stat-tile.total .val { color: var(--amber-deep); }
.stat-tile .sub { font-size: 0.68rem; margin-top: 4px; opacity: 0.75; font-weight: 700; }

/* ---------- 관리자 홈: 돈 3분할 카드 ---------- */
.money-split-card { background: var(--card); border-radius: var(--radius-md); padding: 18px; box-shadow: 0 3px 0 rgba(0,0,0,0.03); }
.money-split-main { background: var(--green-bg); border-radius: var(--radius-md); padding: 16px; margin-bottom: 10px; }
.money-split-main .lbl { font-size: 0.85rem; color: var(--green-deep); font-weight: 800; }
.money-split-main .val { font-size: 1.8rem; font-weight: 800; color: var(--green-deep); font-variant-numeric: tabular-nums; margin: 2px 0; }
.money-split-main .sub { font-size: 0.72rem; color: var(--green-deep); opacity: 0.8; font-weight: 700; }

/* ---------- 빠른 관리 6버튼 ---------- */
.quick-manage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.quick-manage-btn {
  background: var(--bg); border: none; border-radius: 14px; padding: 12px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0.66rem; font-weight: 800; color: var(--ink);
}
.quick-manage-btn .ic { font-size: 1.3rem; }

/* ---------- 부모용 홈: 다운로드 시안 기반 카드 디자인 ---------- */
#dashboard { background: linear-gradient(180deg, #fffdf9 0%, var(--bg) 38%); word-break: keep-all; overflow-wrap: break-word; }
#dashboard .top-bar { padding-top: 24px; }
#dashboard .top-bar .app-title { font-size: 1.16rem; }
#pageHome { gap: 18px; }
#pageManage { gap: 16px; }
.parent-welcome-card {
  position: relative; min-height: 154px; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 24px 18px 22px 22px;
  background: linear-gradient(135deg, #f7e8ff 0%, #fff0f3 56%, #fff8e9 100%);
  border: 1px solid #ecd9f4; border-radius: 28px;
  box-shadow: 0 7px 20px rgba(111,66,196,0.08);
}
.parent-welcome-card::before {
  content: ''; position: absolute; width: 130px; height: 130px; border-radius: 50%;
  right: -40px; top: -55px; background: rgba(255,255,255,0.45);
}
.parent-welcome-copy { position: relative; z-index: 1; flex: 1; }
.parent-welcome-hello { margin: 0 0 8px; color: var(--purple-deep); font-size: .82rem; font-weight: 800; }
.parent-welcome-card h1 { margin: 0 0 9px; max-width: 270px; font-size: 1.15rem; line-height: 1.4; letter-spacing: -.03em; }
.parent-welcome-card h1 > span { display: block; }
.parent-welcome-card h1 span { color: var(--pink-deep); }
.parent-welcome-card p:last-child { margin: 0; color: var(--ink-soft); font-size: .76rem; font-weight: 700; line-height: 1.45; }
.parent-welcome-card > img { position: relative; z-index: 1; width: 100px; height: 108px; object-fit: contain; align-self: flex-end; margin-bottom: -13px; }
.parent-assets-card { padding: 20px; border: 1px solid #f5dce1; border-radius: 26px; box-shadow: 0 8px 24px rgba(216,65,92,.07); }
.parent-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.parent-card-heading h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.parent-card-heading h2 img { width: 26px; height: 26px; object-fit: contain; }
.parent-more-btn { border: 1px solid #f1d8dd; border-radius: 999px; background: #fff9fa; color: var(--ink-soft); padding: 7px 11px; font-size: .72rem; font-weight: 800; }
.parent-assets-card .money-split-main { padding: 18px; margin-bottom: 12px; background: linear-gradient(135deg, #e7f8eb, #f5fff7); }
.parent-assets-card .stat-tile { padding: 16px 12px; }
.parent-assets-card .asset-soft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.parent-assets-card .asset-soft-card { position: relative; padding: 0; overflow: hidden; background: #fff; border-radius: 24px; }
.parent-assets-card .asset-soft-card.total { grid-column: 1 / -1; width: 70%; justify-self: start; }
.parent-assets-card .asset-soft-card > img { display: block; width: 100%; height: auto; }
.parent-assets-card .asset-soft-card .val {
  position: absolute; left: 64%; top: 59%; transform: translate(-50%, -50%); width: 56%;
  color: #2f2931; font-size: clamp(.9rem, 2.6vw, 1.35rem); font-weight: 900; line-height: 1;
  text-align: center; white-space: nowrap; letter-spacing: -.04em;
}
.parent-assets-card .asset-soft-card.total .val { left: 65%; top: 59%; width: 57%; }
.home-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-status-card { position: relative; min-height: 138px; border: 1px solid transparent; border-radius: 22px; padding: 17px; display: flex; align-items: center; gap: 14px; text-align: left; color: var(--ink); box-shadow: 0 8px 22px rgba(46,36,24,.07); }
.home-status-card.mission { background: linear-gradient(145deg, #eef8ff, #fff); border-color: #d9ebf7; }
.home-status-card.goal { background: linear-gradient(145deg, #effaf1, #fff); border-color: #d6ecd9; }
.home-status-card > img { width: 76px; height: 76px; box-sizing: border-box; padding: 5px; border-radius: 22px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 4px rgba(47,35,20,.14)); }
.home-status-card.mission > img { background: #c8ebff; }
.home-status-card.goal > img { background: #cdefd3; }
.home-status-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.home-status-label { font-size: .72rem; color: var(--ink-soft); font-weight: 800; }
.home-status-copy strong { font-size: .92rem; line-height: 1.35; white-space: normal; text-wrap: balance; }
.home-status-copy small { font-size: .68rem; line-height: 1.4; color: var(--ink-soft); white-space: normal; }
.home-status-arrow { color: var(--ink-soft); font-size: 1.4rem; }
.home-status-card:active { transform: translateY(1px); }
.manage-menu-card { padding: 20px; border-radius: 26px; }
.manage-page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.manage-page-heading h1 { margin: 0 0 5px; font-size: 1.25rem; }
.manage-page-heading p { margin: 0; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.child-photo-upload-btn { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.child-photo-upload-btn img { width: 36px; height: 30px; object-fit: contain; }
.quick-manage-btn.active { box-shadow: 0 0 0 3px rgba(239,88,118,.18); transform: translateY(-1px); }
.manage-detail { scroll-margin-top: 78px; }
#pageHome > .section-card { border: 1px solid rgba(240,231,214,.8); border-radius: 24px; box-shadow: 0 8px 24px rgba(46,36,24,.05); }
#pageHome > .section-card:has(.quick-manage-grid) { padding: 20px; }
.quick-manage-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.quick-manage-btn { min-height: 120px; border: 1px solid transparent; border-radius: 20px; padding: 13px 5px 11px; gap: 8px; font-size: .75rem; transition: transform .15s ease, box-shadow .15s ease; }
.quick-manage-btn:active { transform: translateY(2px); }
.quick-manage-btn .ic {
  width: 66px; height: 66px; flex: 0 0 66px; border-radius: 19px; font-size: 0;
  background-position: center; background-size: 90%; background-repeat: no-repeat;
  filter: drop-shadow(0 4px 4px rgba(47,35,20,.14));
}
.quick-manage-btn:nth-child(1) { background: #fff4cf; border-color: #f4df97; }
.quick-manage-btn:nth-child(1) .ic { background-color: #ffe17a; background-image: url('assets/icons/parent_allowance.png'); }
.quick-manage-btn:nth-child(2) { background: #eaf6ff; border-color: #cfe7f8; }
.quick-manage-btn:nth-child(2) .ic { background-color: #c8ebff; background-image: url('assets/icons/parent_mission_create.png'); }
.quick-manage-btn:nth-child(3) { background: #eaf8ed; border-color: #cfead5; }
.quick-manage-btn:nth-child(3) .ic { background-color: #cdefd3; background-image: url('assets/icons/parent_goal_check.png'); }
.quick-manage-btn:nth-child(4) { background: #fff0f3; border-color: #f5d4dc; }
.quick-manage-btn:nth-child(4) .ic { background-color: #ffd2dc; background-image: url('assets/icons/parent_praise.png'); }
.quick-manage-btn:nth-child(5) { background: #f1eaff; border-color: #ded0f6; }
.quick-manage-btn:nth-child(5) .ic { background-color: #ded0f6; background-image: url('assets/icons/parent_vault.png'); background-size: 94%; }
.quick-manage-btn:nth-child(6) { background: #fdf2e4; border-color: #f3ddb8; }
.quick-manage-btn:nth-child(6) .ic { background: #fbe4bd; font-size: 30px; display: flex; align-items: center; justify-content: center; }
#depositCard { background: linear-gradient(145deg, #fffdf8, #fff8e9); }
#missionsPanel { background: linear-gradient(145deg, #fff, #f3f9ff); }
#goalCheckPanel { background: linear-gradient(145deg, #fff, #f2fbf4); }
.vault-card { box-shadow: 0 8px 24px rgba(111,66,196,.08); }
@media (max-width: 430px) {
  #dashboard .tab-nav .tab-btn { flex: 0 0 auto; min-width: 78px; }
  .parent-welcome-card { min-height: 142px; padding: 21px 12px 19px 18px; }
  .parent-welcome-card h1 { max-width: 225px; font-size: 1.02rem; }
  .parent-welcome-card h1 > span { white-space: nowrap; }
  .parent-welcome-card > img { width: 84px; height: 94px; }
  .quick-manage-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .quick-manage-btn { min-height: 132px; flex-direction: column; justify-content: center; align-items: center; padding: 14px 8px 12px; gap: 9px; font-size: .82rem; line-height: 1.3; text-align: center; overflow: visible; }
  .quick-manage-btn .ic { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 22px; }
  .quick-manage-btn > span:last-child { display: block; width: 100%; min-height: 1.3em; white-space: nowrap; overflow: visible; }
  #pageHome .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  #pageHome .stat-tile { padding: 14px 8px; text-align: center; border-radius: 16px; }
  #pageHome .stat-tile .lbl { min-height: 2.4em; font-size: .68rem; line-height: 1.2; }
  #pageHome .stat-tile .val { font-size: 1.04rem; white-space: nowrap; letter-spacing: -.04em; }
  #pageHome .stat-tile .sub { display: none; }
  #pageHome .asset-soft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #pageHome .asset-soft-card { padding: 0; border-radius: 18px; }
  #pageHome .asset-soft-card.total { width: 70%; }
  #pageHome .asset-soft-card .val { font-size: clamp(.76rem, 3.7vw, 1rem); }
  .home-status-grid { gap: 8px; }
  .home-status-card { min-height: 164px; padding: 14px 11px; flex-direction: column; align-items: flex-start; gap: 9px; }
  .home-status-card > img { width: 72px; height: 72px; padding: 5px; border-radius: 20px; }
  .home-status-arrow { position: absolute; align-self: flex-end; }
  .home-status-copy { width: 100%; padding-right: 15px; }
  .home-status-copy strong { min-height: 2.7em; }
  #pageManage h1, #pageManage h2, #pageReport h2, #pageSettings h2 { text-wrap: balance; }
  #pageManage p, #pageReport p, #pageSettings p, #pageSettings .balance-sub { line-height: 1.55; }
}

/* ---------- 미션 / 목표 확인 2단 ---------- */
.two-col-cards { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.two-col-cards .section-card h2 { font-size: 0.88rem; }
.mission-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mission-row:last-child { border-bottom: none; }
.mission-row .title { font-weight: 800; font-size: 0.85rem; margin-bottom: 4px; }
.mission-row .bar-track { background: var(--line); border-radius: 999px; height: 8px; overflow: hidden; margin-bottom: 4px; }
.mission-row .bar-track span { display: block; height: 100%; background: var(--purple); border-radius: 999px; }
.mission-row .meta { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mission-reward-btn { background: var(--purple-bg); color: var(--purple-deep); border: none; border-radius: 999px; padding: 4px 10px; font-size: 0.68rem; font-weight: 800; }

/* ---------- 비밀금고 카드 (하단, 크게) ---------- */
.vault-card {
  background: linear-gradient(160deg, var(--purple-bg), #fff);
  border: 2px solid var(--vault-soft); border-radius: var(--radius-lg); padding: 20px; text-align: center;
}
.vault-card-head { font-weight: 800; color: var(--purple-deep); font-size: 0.95rem; }
.vault-card-amt { font-size: 2rem; font-weight: 800; color: var(--purple-deep); margin: 6px 0 2px; }
.vault-card-desc { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 14px; }

.section-card { background: var(--card); border-radius: var(--radius-md); padding: 18px; box-shadow: 0 3px 0 rgba(0,0,0,0.03); }
.section-card h2 { font-size: 1rem; font-weight: 800; margin: 0 0 12px; }
.field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field-row label { font-size: 0.82rem; color: var(--ink-soft); font-weight: 700; }
.field-row input, .field-row select {
  width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 1rem; outline: none;
}
.field-row input:focus, .field-row select:focus { border-color: var(--accent); }
.signup-consent { display:flex; align-items:flex-start; gap:8px; color:var(--ink-soft); font-size:.74rem; font-weight:700; line-height:1.5; text-align:left; word-break:keep-all; }
.signup-consent input { width:18px; height:18px; flex:0 0 18px; margin-top:1px; accent-color:var(--pink); }
.pending-application-no { padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--accent); font-size:.82rem; font-weight:900; }
.price-info-card { width:100%; max-width:320px; box-sizing:border-box; border:1.5px solid var(--line); border-radius:14px; background:#fff8ef; padding:14px 16px; text-align:left; }
.price-info-title { font-weight:900; font-size:.9rem; margin-bottom:8px; }
.price-info-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.price-info-row strong { font-size:1.05rem; color:var(--accent); font-weight:900; }
.price-info-sub { color:var(--ink-soft); font-size:.76rem; font-weight:700; margin-top:2px; }
.price-info-account { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:.82rem; font-weight:800; }
.price-info-account button { flex-shrink:0; border:none; background:var(--accent); color:#fff; font-weight:800; font-size:.74rem; padding:6px 10px; border-radius:8px; cursor:pointer; }
.price-info-note { color:var(--ink-soft); font-size:.74rem; font-weight:700; margin-top:8px; line-height:1.5; }
.customer-status-badge { padding:7px 13px; border-radius:999px; font-size:.76rem; font-weight:900; }
.customer-status-badge.waiting { background:#fff0d8; color:#a9690c; }
.settings-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.settings-toggle-row strong { display:block; font-size:.95rem; }
.settings-toggle-row small { display:block; color:var(--ink-soft); font-size:.78rem; font-weight:700; margin-top:2px; }
.settings-toggle-switch { position:relative; flex-shrink:0; width:48px; height:28px; }
.settings-toggle-switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.settings-toggle-track { display:block; width:48px; height:28px; border-radius:999px; background:var(--line); transition:background .15s; position:relative; }
.settings-toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.settings-toggle-switch input:checked + .settings-toggle-track { background:var(--accent); }
.settings-toggle-switch input:checked + .settings-toggle-track::after { transform:translateX(20px); }
.account-approval-box { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 16px; }
.account-approval-box > div { min-width:0; padding:12px; border:1px solid #e4eee8; border-radius:14px; background:#f4fbf7; }
.account-approval-box span { display:block; margin-bottom:4px; color:var(--ink-soft); font-size:.7rem; font-weight:800; }
.account-approval-box strong { display:block; overflow-wrap:anywhere; color:var(--ink); font-size:.82rem; }
.account-approval-box strong.approved { color:#17845d; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.two-col > * { min-width: 0; }

.tx-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tx-table th { text-align: left; font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.tx-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tx-table td.amt { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-scroll { overflow-x: auto; max-width: 100%; }
.history-search-desc { margin: -4px 0 16px; color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
.history-search-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 28px 16px 18px; color: var(--ink-soft); }
.history-search-empty img { width: 58px; height: 58px; object-fit: contain; opacity: .9; }
.history-search-empty strong { color: var(--ink); font-size: .9rem; }
.history-search-empty span { max-width: 270px; font-size: .74rem; line-height: 1.5; }
.history-result-count { padding: 18px 4px 8px; color: var(--pink-deep); font-size: .78rem; font-weight: 800; }
.history-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.history-filter-chips button { min-height: 38px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.history-filter-chips button.active { border-color: var(--pink); background: var(--pink-bg); color: var(--pink-deep); box-shadow: 0 0 0 2px rgba(239,88,118,.08); }
.praise-sheet-backdrop { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(35,29,24,.38); }
.praise-sheet-backdrop.hidden { display: none; }
.praise-sheet { width: min(100%, 520px); padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 18px 18px; background: #fff; box-shadow: 0 -12px 40px rgba(35,29,24,.18); text-align: left; }
.praise-sheet-handle { width: 42px; height: 5px; margin: 0 auto 14px; border-radius: 999px; background: #ded7ce; }
.praise-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.praise-sheet-head h2 { margin: 0 0 5px; font-size: 1.05rem; }
.praise-sheet-head p { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.5; font-weight: 700; }
.praise-sheet-head > button { width: 34px; height: 34px; flex: 0 0 34px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink-soft); font-size: 1.35rem; }
.praise-sheet textarea { width: 100%; min-height: 132px; box-sizing: border-box; margin-top: 16px; padding: 14px; resize: none; border: 2px solid var(--pink-soft); border-radius: 16px; outline: 0; color: var(--ink); background: #fffafb; font: inherit; font-size: 1rem; line-height: 1.55; }
.praise-sheet textarea:focus { border-color: var(--pink); }
.praise-sheet-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 12px; }
.praise-sheet-actions .big-btn { margin-top: 0; }
.app-dialog-backdrop { position:fixed; z-index:1100; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:16px; background:rgba(35,29,24,.4); }
.app-dialog-backdrop.hidden { display:none; }
.app-dialog { width:min(100%,520px); box-sizing:border-box; padding:10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:26px 26px 18px 18px; background:#fff; box-shadow:0 -12px 40px rgba(35,29,24,.2); text-align:left; }
.app-dialog h2 { margin:0 0 7px; font-size:1.05rem; color:var(--ink); word-break:keep-all; }
.app-dialog p { margin:0; color:var(--ink-soft); font-size:.8rem; font-weight:700; line-height:1.55; white-space:pre-line; word-break:keep-all; }
.app-dialog input,.app-dialog select { width:100%; box-sizing:border-box; min-height:52px; margin-top:15px; padding:12px 14px; border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); font:inherit; font-size:1rem; outline:0; }
.app-dialog input:focus,.app-dialog select:focus { border-color:var(--pink); }
.app-dialog-memo-label { display:block; margin:14px 2px -8px; color:var(--ink); font-size:.8rem; font-weight:800; }
.app-dialog-memo-label.hidden { display:none; }
.app-dialog-memo-label span { color:var(--ink-soft); font-weight:700; }
#appDialogMemo { margin-top:12px; }
.app-dialog-actions { display:grid; grid-template-columns:.8fr 1.4fr; gap:9px; margin-top:15px; }
.app-dialog-actions button { min-height:48px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink-soft); font-size:.88rem; font-weight:800; }
.app-dialog-actions button.confirm { border-color:var(--pink); background:var(--pink); color:#fff; }
.settings-menu-bar { width: 100%; margin-top: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: .82rem; font-weight: 800; }

/* ---------- 홈 화면에 추가하기 안내 ---------- */
.install-guide-backdrop { position:fixed; z-index:1200; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:16px; background:rgba(35,29,24,.42); }
.install-guide-backdrop.hidden { display:none; }
.install-guide-sheet { width:min(100%,520px); box-sizing:border-box; padding:10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius:26px 26px 18px 18px; background:#fff; box-shadow:0 -12px 40px rgba(35,29,24,.2); text-align:left; }
.install-guide-sheet h2 { margin:0 0 4px; font-size:1.08rem; color:var(--ink); }
.install-guide-sub { margin:0 0 16px; color:var(--ink-soft); font-size:.82rem; font-weight:700; }
.install-guide-block { margin-bottom:14px; padding:16px; border-radius:16px; background:var(--bg); display:flex; flex-direction:column; gap:14px; }
.install-guide-step { display:flex; align-items:flex-start; gap:10px; }
.install-guide-step b { flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--pink); color:#fff; font-size:.8rem; font-weight:900; }
.install-guide-step span { flex:1; min-width:0; padding-top:2px; font-size:.92rem; font-weight:700; color:var(--ink); line-height:1.55; word-break:keep-all; }
.install-guide-step span u { text-decoration-color: var(--pink); text-underline-offset: 3px; }
.install-guide-note { margin-bottom:16px; padding:12px 14px; border-radius:14px; background:#fff9e9; color:#72561f; font-size:.78rem; font-weight:700; line-height:1.55; word-break:keep-all; }
.install-guide-note b { font-weight:900; }
.install-guide-sheet .big-btn { margin-top:0; }
.user-guide-sheet { max-height: 82vh; display: flex; flex-direction: column; }
.user-guide-list { overflow-y: auto; margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.user-guide-list details { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; }
.user-guide-list summary { list-style: none; cursor: pointer; padding: 13px 14px; font-size: .88rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; }
.user-guide-list summary::-webkit-details-marker { display: none; }
.user-guide-list summary::after { content: '›'; margin-left: auto; color: var(--ink-soft); font-size: 1.15rem; transform: rotate(90deg); transition: transform .15s; }
.user-guide-list details[open] summary::after { transform: rotate(270deg); }
.user-guide-list details[open] summary { border-bottom: 1px solid var(--line); background: var(--bg); }
.user-guide-body { padding: 12px 14px 14px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); line-height: 1.6; word-break: keep-all; }
.user-guide-body p { margin: 0 0 8px; }
.user-guide-body p:last-child { margin-bottom: 0; }
.user-guide-body ul { margin: 6px 0 0; padding-left: 18px; }
.user-guide-body li { margin-bottom: 6px; }
.user-guide-body a { color: var(--accent); font-weight: 800; }
.settings-menu-bar span { display: flex; align-items: center; gap: 9px; }
.settings-menu-bar img { width: 26px; height: 26px; object-fit: contain; }
.settings-menu-bar b { color: var(--ink-soft); font-size: 1.25rem; transition: transform .2s ease; }
.settings-menu-bar.open b { transform: rotate(90deg); }
.settings-image-button { width: 100%; aspect-ratio: 1345 / 280; margin-top: 10px; padding: 0; border: 0; border-radius: 18px; background-color: transparent; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; display: block; overflow: hidden; cursor: pointer; }
.settings-image-button.photo { background-image: url('assets/icons/settings_photo.png'); }
.settings-image-button.reset { aspect-ratio: 1345 / 245; background-image: url('assets/icons/settings_reset.png'); }
.settings-image-button.add-child { aspect-ratio: 1336 / 210; background-image: url('assets/icons/settings_add_child.png'); }
.settings-image-button.print { aspect-ratio: 1345 / 245; background-image: url('assets/icons/settings_print.png'); }
.settings-image-button:active { transform: translateY(1px); opacity: .88; }
.settings-image-button:focus-visible { outline: 3px solid rgba(239,88,118,.28); outline-offset: 2px; }
.settings-image-button.reconnect { aspect-ratio: 1345 / 155; margin-top: 12px; border-radius: 999px; background-image: url('assets/icons/settings_reconnect.png'); }
.settings-image-button.open { box-shadow: 0 0 0 3px rgba(235,183,86,.2); }
.settings-add-child-panel { margin:8px 4px 12px; padding:14px 16px; border:1px solid #bde5d5; border-radius:16px; background:#f3fcf7; color:#365c4d; text-align:left; line-height:1.55; word-break:keep-all; }
.settings-add-child-panel strong { display:block; margin-bottom:4px; color:#16865e; }
.settings-add-child-panel p { margin:0; font-size:.86rem; }
.reset-safety-panel { margin:8px 4px 12px; padding:14px 16px; border:1px solid #f1d4a0; border-radius:16px; background:#fffaf0; color:#725d37; text-align:left; line-height:1.55; word-break:keep-all; }
.reset-safety-panel strong { display:block; margin-bottom:4px; color:#b37818; }
.reset-safety-panel p { margin:0; font-size:.84rem; }
.settings-logout-area { padding:10px 8px 28px; text-align:center; }
.settings-logout-btn { width:100%; padding:13px 16px; border:1px solid #eadfd5; border-radius:14px; background:#fff; color:#8a7462; font-size:.86rem; font-weight:800; }
.child-phone-change-btn { width:100%; margin-top:12px; padding:13px 15px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; border:1px solid #cfe8d8; border-radius:18px; background:linear-gradient(135deg,#f3fbf5,#edf8f1); color:#315d49; text-align:left; cursor:pointer; }
.child-phone-change-btn .ic { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#fff; font-size:1.25rem; box-shadow:0 3px 10px rgba(43,126,87,.1); }
.child-phone-change-btn strong,.child-phone-change-btn small { display:block; word-break:keep-all; }
.child-phone-change-btn strong { font-size:.98rem; }
.child-phone-change-btn small { margin-top:2px; color:#6a8879; font-size:.76rem; line-height:1.4; }
.child-phone-change-btn .arrow { font-size:1.7rem; color:#55a981; transition:transform .2s; }
.child-phone-change-btn.open .arrow { transform:rotate(90deg); }
.child-phone-change-panel { margin:8px 4px 12px; padding:14px 16px; border:1px solid #cfe8d8; border-radius:16px; background:#fbfffc; color:#456454; text-align:left; line-height:1.55; word-break:keep-all; }
.child-phone-change-panel strong { display:block; margin-bottom:5px; color:#16865e; }
.child-phone-change-panel p { margin:0; font-size:.84rem; }
.child-phone-change-panel .safe-note { margin-top:8px; padding-top:8px; border-top:1px dashed #cfe8d8; color:#597468; }
.child-phone-confirm-actions { display:grid; grid-template-columns:.8fr 1.5fr; gap:8px; margin-top:12px; }
.child-phone-confirm-actions button { min-height:44px; padding:10px 8px; border:1px solid #cfe8d8; border-radius:12px; background:#fff; color:#60776b; font-size:.78rem; font-weight:800; word-break:keep-all; }
.child-phone-confirm-actions button.continue { border-color:#69b993; background:#59ac84; color:#fff; }
.settings-print-panel { margin-top: 8px; padding: 14px; border-radius: 14px; background: var(--bg); text-align: left; }
.settings-print-panel p { margin: 0 0 12px; color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.settings-print-panel input[type="date"] { min-width:0; height:50px; background:#fff; color:var(--ink); }
@media (max-width: 520px) {
  .settings-print-panel .two-col { grid-template-columns:1fr; gap:0; }
  .settings-print-panel .field-row { margin-bottom:10px; }
}
.connection-guide { margin-bottom: 16px; padding: 15px; border-radius: 16px; background: linear-gradient(135deg, var(--green-bg), #f7fff9); text-align: left; }
.connection-guide strong { display: block; margin-bottom: 5px; color: var(--green-deep); font-size: .9rem; }
.connection-guide p { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.5; font-weight: 700; }
.connection-step-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: .86rem; font-weight: 800; }
.connection-step-title b { width: 25px; height: 25px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pink); color: #fff; font-size: .75rem; }
.connection-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
.connection-or::before, .connection-or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.connection-complete { display: inline-flex; padding: 7px 12px; margin-bottom: 10px; border-radius: 999px; background: var(--green-bg); color: var(--green-deep); font-size: .76rem; font-weight: 800; }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-row .bar-label { width: 66px; font-size: 0.82rem; font-weight: 700; flex-shrink: 0; }
.bar-row .bar-track { flex: 1; background: var(--line); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.bar-row .bar-val { width: 76px; text-align: right; font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.alert-banner {
  border-radius: var(--radius-md); padding: 14px 16px; font-weight: 800; font-size: 0.92rem;
  display: flex; align-items: center; gap: 10px;
}
.alert-banner.warning { background: var(--amber-bg); color: var(--amber-deep); }
.alert-banner.critical { background: var(--pink-bg); color: var(--pink-deep); }
.alert-banner.trial { background: #fdf2f5; color: var(--accent); justify-content: space-between; margin-bottom: 14px; }
.alert-banner.trial button { flex-shrink: 0; border: none; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.78rem; padding: 8px 12px; border-radius: 10px; cursor: pointer; }


.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  max-width: 90%; text-align: center; z-index: 50;
}
.toast.show { opacity: 1; }

/* ---------- 태블릿 이상: 관리자 홈의 카드 쌍이 2열로 펼쳐짐 ---------- */
@media (min-width: 640px) {
  .two-col-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- 컴퓨터(넓은 화면) 버전 ---------- */
@media (min-width: 860px) {
  body { background: linear-gradient(180deg, var(--bg), #f3ecdb); }
  .app {
    max-width: 900px;
    min-height: auto;
    margin: 32px auto;
    border-radius: 32px;
    background: var(--bg);
    box-shadow: 0 20px 60px rgba(46,36,24,0.12);
    overflow: hidden;
  }
  /* 탭으로 화면이 나뉜 뒤로는 한 화면에 여러 섹션을 2단으로 쪼갤 필요가 없어져서,
     아이 화면은 한 줄로 읽기 편한 너비로 고정. 관리자 화면은 카드 쌍(미션/목표, 거래내역/금고)이
     2열로 펼쳐지도록 조금 더 넓게 */
  main { max-width: 640px; margin: 0 auto; padding: 12px 28px 36px; }
  #dashboard main { max-width: 760px; }
  .modal { max-width: 900px; border-radius: 32px; margin: 32px auto; position: relative; inset: auto; min-height: calc(100vh - 64px); }
  .cat-grid, .bingo-grid, .lib-grid { grid-template-columns: repeat(3, 1fr); }
  .bottom-nav { position: static; }
}

/* ---------- 인쇄용 리포트 ---------- */
.print-only { display: none; }
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { background: #fff; }
}

/* ===== 아이 화면 전용 "파스텔 캔디랜드" 테마 =====
   #mainApp(아이 화면 전용 루트) 아래로만 스코프해서 admin.html/seller.html(같은 style.css를
   공유)엔 전혀 영향 없게 함. 전역 --ink/--pink 등은 안 건드리고 이 안에서만 지역 변수로 덮어씀. */
#mainApp {
  --candy-home: #DDF3FF;
  --candy-add: #FFF2CF;
  --candy-goals: #E1F5D5;
  --candy-recent: #EEE5FF;
  --candy-pink: #FF729A;
  --candy-blue: #348BEB;
  --candy-green: #22A78B;
  --candy-ink: #332C35;
  --ink: var(--candy-ink);
  background: var(--candy-home);
  transition: background .25s ease;
}
#mainApp[data-candy="home"] {
  background-color: var(--candy-home);
  background-image: url('assets/decor/bg-home-top.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: fixed;
}
#mainApp[data-candy="add"] {
  background-color: var(--candy-add);
  background-image: url('assets/decor/bg-add-top.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: fixed;
}
#mainApp[data-candy="goals"] {
  background-color: var(--candy-goals);
  background-image: url('assets/decor/bg-goals-bottom.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  background-attachment: fixed;
}
#mainApp[data-candy="recent"] {
  background-color: var(--candy-recent);
  background-image: url('assets/decor/bg-recent-top.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: fixed;
}

/* 카드류 — 내용/배치는 그대로, 그림자만 더 연하게 + 모서리 더 둥글게 통일 */
#mainApp .preview-card,
#mainApp .usage-summary-card,
#mainApp .money-hero-card,
#mainApp .recent,
#mainApp .goal-race-card,
#mainApp .add-record-panel,
#mainApp .amount-card {
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(51,44,53,.07);
}

/* 포인트 색상 3종 — 지출=핑크, 받은돈=블루, 저축/목표=그린으로 통일 (배경 아닌 숫자/포인트에만) */
#mainApp .usage-summary-card.spent .usage-summary-amount,
#mainApp .stat3-tile.pink .val,
#mainApp .keypad-key.back { color: var(--candy-pink); }
#mainApp .usage-summary-card.received .usage-summary-amount { color: var(--candy-blue); }
#mainApp .usage-summary-card.goal-saved .usage-summary-amount,
#mainApp .stat3-tile.green .val,
#mainApp .goal-race-card .goal-road { color: var(--candy-green); }

/* 버튼 */
#mainApp .add-submit-btn { background: var(--candy-pink); box-shadow: 0 3px 0 rgba(255,114,154,.35); }
#mainApp .add-submit-col { background: color-mix(in srgb, var(--candy-pink) 16%, #fff); }
#mainApp .add-submit-text { color: var(--candy-pink); }
#mainApp .big-btn.nospend,
#mainApp #btnNewGoal {
  background: var(--candy-green); box-shadow: 0 3px 0 rgba(34,167,139,.35);
}
#mainApp .money-hero-link { color: var(--candy-blue); }