/* Family Chores demo — Aquila toss-v2 light, applied per ../DESIGN.md.
   Color tokens are defined in ./aquila-tokens.css; this file only aliases the
   semantic --aq-* bridges so the public --* API and rendered colors stay
   identical. No literal hex/rgb values live here. */

:root {
  --bg: var(--aq-bg);
  --surface: var(--aq-surface);
  --surface-subtle: var(--aq-surface-subtle);
  --surface-sunken: var(--aq-surface-sunken);
  --surface-strong: var(--aq-surface-strong);
  --fg: var(--aq-fg);
  --fg-strong: var(--aq-fg-strong);
  --fg-secondary: var(--aq-fg-secondary);
  --fg-muted: var(--aq-fg-muted);
  --fg-subtle: var(--aq-fg-subtle);
  --border: var(--aq-border);
  --border-strong: var(--aq-border-strong);
  --border-interactive: var(--aq-border-interactive);
  --solid: var(--aq-solid);
  --solid-hover: var(--aq-solid-hover);
  --solid-fg: var(--aq-solid-fg);
  --accent-strong: var(--aq-accent-strong);
  --accent-subtle: var(--aq-accent-subtle);
  --ring: var(--aq-ring);
  --mint: var(--aq-cat-3);
  --mint-light: var(--aq-cat-3-light);
  --mint-dark: var(--aq-cat-3-dark);
  --err: var(--aq-err);
  --err-bg: var(--aq-err-bg);
  --warn-edge: var(--aq-warn-edge);
  --warn-bg: var(--aq-warn-bg);
  --st-assigned-bg: var(--aq-status-assigned-bg);
  --st-assigned-fg: var(--aq-status-assigned-fg);
  --st-pending-bg: var(--aq-status-pending-bg);
  --st-pending-fg: var(--aq-status-pending-fg);
  --st-approved-bg: var(--aq-status-approved-bg);
  --st-approved-fg: var(--aq-status-approved-fg);
  --st-settled-bg: var(--aq-status-settled-bg);
  --st-settled-fg: var(--aq-status-settled-fg);
  --reward-bg: var(--aq-reward-bg);
  --reward-fg: var(--aq-reward-fg);
  --reward-border: var(--aq-reward-border);
  --av1-bg: var(--aq-avatar-1-bg);
  --av1-fg: var(--aq-avatar-1-fg);
  --av2-bg: var(--aq-avatar-2-bg);
  --av2-fg: var(--aq-avatar-2-fg);
  --av3-bg: var(--aq-avatar-3-bg);
  --av3-fg: var(--aq-avatar-3-fg);
  --backdrop: var(--aq-backdrop);
  --shadow: var(--aq-shadow);
  --r-card: 18px; --r-ctl: 14px; --r-sm: 11px; --r-full: 9999px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* ---------- App shell: one phone composition at every width ---------- */

.phone {
  display: flex;
  flex-direction: column;
  background: var(--surface-subtle);
}
@media (max-width: 480px) {
  .phone { width: 100%; height: 100dvh; }
}
@media (min-width: 481px) {
  body { display: flex; align-items: center; justify-content: center; padding: 24px; }
  .phone {
    width: 390px; height: 844px; max-height: calc(100dvh - 48px);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
}

/* ---------- Header ---------- */

.app-head {
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 8px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-title { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 0; }
.role-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role-row label { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.input-inline { width: auto; min-width: 128px; }
.muted { color: var(--fg-muted); }
.small { font-size: 12px; }
.status-line { min-height: 20px; margin: 0; font-size: 12px; color: var(--fg-muted); }

.alert {
  margin: 0; padding: 8px 12px;
  font-size: 14px; color: var(--fg);
  background: var(--err-bg);
  border-left: 3px solid var(--err);
  border-radius: var(--r-sm);
}
.alert-warn { background: var(--warn-bg); border-left-color: var(--warn-edge); }
.offline-note { margin: 0; font-size: 12px; font-weight: 600; color: var(--reward-fg); }

/* ---------- Scroll region ---------- */

.scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.view-title { font-size: 28px; font-weight: 700; line-height: 1.35; margin: 0; }
.view-sub { margin: 0; font-size: 14px; color: var(--fg-muted); }
.section-title { font-size: 18px; font-weight: 600; margin: 4px 0 0; }

/* ---------- Chore cells ---------- */

.chore-list { display: flex; flex-direction: column; gap: 12px; }
.chore {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.chore-top { display: flex; gap: 12px; align-items: flex-start; }
.avatar {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
}
.avatar-1 { background: var(--av1-bg); color: var(--av1-fg); }
.avatar-2 { background: var(--av2-bg); color: var(--av2-fg); }
.avatar-3 { background: var(--av3-bg); color: var(--av3-fg); }
.chore-body { flex: 1; min-width: 0; }
.chore-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; word-break: break-word; }
.chore-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: 12px; color: var(--fg-muted); }
.chip {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 0 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip[data-status="assigned"] { background: var(--st-assigned-bg); color: var(--st-assigned-fg); }
.chip[data-status="pending"]  { background: var(--st-pending-bg);  color: var(--st-pending-fg); }
.chip[data-status="approved"] { background: var(--st-approved-bg); color: var(--st-approved-fg); }
.chip[data-status="settled"]  { background: var(--st-settled-bg);  color: var(--st-settled-fg); }
.pts {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 0 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
  background: var(--accent-subtle); color: var(--accent-strong);
}
.chore-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.note { font-size: 12px; color: var(--fg-muted); }
.empty {
  margin: 0; padding: 24px; text-align: center;
  color: var(--fg-muted); background: var(--surface-sunken);
  border-radius: var(--r-card);
}

/* ---------- Buttons, inputs, nav ---------- */

.btn {
  min-height: 48px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-ctl);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn-primary { background: var(--solid); color: var(--solid-fg); }
.btn-primary:hover { background: var(--solid-hover); }
.btn-secondary { background: var(--surface); color: var(--fg-strong); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-sunken); }
.btn-danger { background: var(--err); color: var(--solid-fg); }
.btn-block { width: 100%; position: sticky; bottom: 0; z-index: 1; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.icon-btn {
  min-height: 48px; min-width: 48px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--fg-strong); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-ctl);
  cursor: pointer;
}

:focus-visible, .demo-focus {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 14px; font-weight: 600; color: var(--fg-secondary); }
.input {
  width: 100%; min-height: 48px; padding: 0 12px;
  font: inherit; color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-ctl);
}
.input:focus { border-color: var(--ring); }

.nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.nav-btn {
  flex: 1; min-height: 56px; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  background: none; border: 0; cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-btn[aria-current="page"] { color: var(--accent-strong); background: var(--accent-subtle); }

/* ---------- Cards, reward surface, ledger ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.card-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.family-list { display: flex; flex-direction: column; gap: 12px; }
.reward {
  background: var(--reward-bg);
  border: 1px solid var(--reward-border);
  border-radius: var(--r-card);
  padding: 16px;
}
.reward .big { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.3; color: var(--reward-fg); }
.reward .lbl { margin: 0; font-weight: 600; color: var(--fg); }
.stat-line { margin: 4px 0 0; font-size: 14px; color: var(--fg-secondary); }
.reward-inset { margin-top: 8px; }
.showcase-gap { margin-top: 8px; }
.ledger { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.ledger li {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface-sunken); border-radius: var(--r-sm);
  font-size: 14px;
}
.ledger .amt { font-weight: 700; }

/* ---------- Dialogs ---------- */

dialog {
  width: min(360px, calc(100vw - 32px));
  max-height: 80dvh; overflow: auto;
  padding: 20px;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
}
dialog::backdrop { background: var(--backdrop); }
dialog.sheet { width: 100%; max-width: 430px; margin: auto auto 0 auto; border-radius: var(--r-card) var(--r-card) 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 481px) {
  dialog.sheet { margin: auto; border-radius: var(--r-card); width: min(360px, 100%); }
}
.dialog-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.dialog-error {
  margin: 8px 0 0; padding: 8px 12px; font-size: 14px; color: var(--fg);
  background: var(--err-bg); border-radius: var(--r-sm);
}
.settle-list ul { margin: 8px 0 0; padding-left: 20px; }
.settle-total { margin: 12px 0 0; font-weight: 700; }

/* ---------- Footer (inside scroll region) ---------- */

.demo-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.demo-note { margin: 0; font-size: 12px; color: var(--fg-muted); }
.about summary {
  min-height: 48px; display: flex; align-items: center;
  font-weight: 600; cursor: pointer; border-radius: var(--r-sm);
}
.about p { margin: 0 0 8px; font-size: 14px; color: var(--fg-secondary); }
.data-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.foot { margin: 0; font-size: 12px; color: var(--fg-muted); }
.foot-link {
  display: flex; align-items: center; min-height: 44px;
  color: var(--accent-strong); font-weight: 600;
}

/* ---------- Showcase ---------- */

.showcase-note { padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-subtle); color: var(--accent-strong); font-size: 14px; font-weight: 600; margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
fieldset.card { border: 1px solid var(--border); }
fieldset.card legend { font-size: 14px; font-weight: 600; color: var(--fg-secondary); padding: 0 4px; }

/* ---------- Print ---------- */

.print-only { display: none; }
@media print {
  body { display: block; background: var(--aq-print-bg); color: var(--aq-print-fg); padding: 0; }
  .phone { display: none !important; }
  .print-only { display: block !important; font: 14px/1.6 system-ui, sans-serif; }
  .print-only h1 { font-size: 20px; margin: 0 0 8px; }
  .print-only h2 { font-size: 16px; margin: 16px 0 4px; }
  .print-only ul { margin: 4px 0; padding-left: 20px; }
}

.noscript { padding: 16px; }

/* ---------- Motion ---------- */

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