/* MAIA owner app (G7, direction B 「차분한 카드」, owner msg 1415).
   Values come from tokens.css (tools/gen_tokens.py); component rules from docs/design/ui/g6/components.yaml. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.app { margin: 0; background: var(--bg-subtle); color: var(--text-default);
  font: 400 var(--fs-body)/1.5 "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  font-variant-numeric: tabular-nums; word-break: keep-all; }
body.app > .public { display: none; }
.view { max-width: 480px; margin: 0 auto; padding: 0 16px calc(var(--tabbar) + 24px + env(safe-area-inset-bottom)); }
.view header { padding: 28px 4px 8px; }
.view h1 { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.view h2 { font-size: var(--fs-subhead); font-weight: 700; margin: 24px 4px 10px; }
.meta { font-size: var(--fs-label); color: var(--text-muted); margin-top: 6px; }
.card { background: var(--bg-canvas); border-radius: var(--radius-card); padding: 20px; margin: 12px 0;
  box-shadow: var(--shadow-card); }
.card.list { padding: 4px 20px; }
.lab { font-size: var(--fs-label); color: var(--text-muted); }
.big { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 0; border-top: 1px solid var(--bg-muted); color: inherit; text-decoration: none; }
.row:first-child { border-top: 0; }
.row .t { min-width: 0; }
.row .t > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row small { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
.row .v { font-size: var(--fs-label); color: var(--text-muted); white-space: nowrap; text-align: right; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--touch);
  border: 0; border-radius: var(--radius-control); font: 600 var(--fs-body)/1 inherit; cursor: pointer;
  background: var(--accent-solid); color: var(--text-on-solid); margin-top: 16px; text-decoration: none;
  transition: transform var(--motion-press), opacity var(--motion-effect-fast); }
.btn.second { background: var(--bg-muted); color: var(--text-default); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.pill { display: inline-block; font-size: var(--fs-micro); font-weight: 600; line-height: 22px; padding: 0 8px;
  border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--text-muted); white-space: nowrap; }
.pill.ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.pill.warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.pill.bad { background: var(--status-bad-bg); color: var(--status-bad-fg); }
.notice { border-radius: var(--radius-control); padding: 14px; font-size: var(--fs-label); margin: 12px 0;
  background: var(--bg-muted); }
.notice.warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.notice.bad { background: var(--status-bad-bg); color: var(--status-bad-fg); }
.seg { display: flex; background: var(--bg-muted); border-radius: var(--radius-control); padding: 4px; margin: 16px 0 4px; }
.seg button { flex: 1; min-height: 40px; border: 0; border-radius: calc(var(--radius-control) - 4px); background: none;
  font: 500 var(--fs-label) inherit; color: var(--text-muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--bg-canvas); color: var(--text-default); font-weight: 700;
  box-shadow: var(--shadow-card); }
.skel { background: var(--bg-muted); border-radius: var(--radius-control); height: 72px; margin: 12px 0; }
.status-dot { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--status-ok-bg); color: var(--status-ok-fg); flex: none; }
.status-dot.bad { background: var(--status-bad-bg); color: var(--status-bad-fg); }
.hstack { display: flex; align-items: center; gap: 14px; }
.stale .v, .stale .big { opacity: 0.55; }
/* tab bar (components.yaml tabbar) */
nav.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
  background: var(--bg-canvas); border-top: 1px solid var(--border-default); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
nav.tabbar .in { display: flex; width: 100%; max-width: 480px; height: var(--tabbar); }
nav.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--fs-micro); color: var(--text-muted); text-decoration: none; position: relative; }
nav.tabbar a[aria-current="page"] { color: var(--text-default); font-weight: 600; }
nav.tabbar svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
nav.tabbar .badge { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent-solid); color: var(--text-on-solid); font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; }
/* bottom sheet (components.yaml sheet) */
.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 0.35); z-index: 10; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px; z-index: 11;
  background: var(--bg-canvas); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-sheet);
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); animation: up var(--motion-spatial-fast); }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-default); margin: 0 auto 16px; }
.sheet h3 { font-size: var(--fs-heading); margin: 0 0 8px; letter-spacing: -0.01em; }
@keyframes up { from { transform: translateY(100%); } }
.quote { background: var(--bg-subtle); border-radius: var(--radius-control); padding: 14px; line-height: 1.6; margin: 12px 0; }
.quote mark { background: var(--accent-subtle); color: inherit; border-radius: 4px; padding: 0 2px; font-weight: 600; }
.choice { display: flex; align-items: center; width: 100%; min-height: var(--touch); padding: 0 14px; margin-top: 8px;
  border: 2px solid transparent; border-radius: var(--radius-control); background: var(--bg-muted);
  font: 500 var(--fs-body) inherit; color: var(--text-default); text-align: left; cursor: pointer; }
.choice[aria-checked="true"] { border-color: var(--accent-solid); background: var(--accent-subtle); font-weight: 700; }
select.pick { width: 100%; min-height: var(--touch); margin-top: 8px; border-radius: var(--radius-control);
  border: 1px solid var(--border-default); background: var(--bg-canvas); color: inherit; font: inherit; padding: 0 10px; }
#toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom));
  max-width: 448px; margin: 0 auto; z-index: 9; }
.sheet:focus { outline: none; }
.board .node { background: var(--bg-canvas); border-radius: var(--radius-control); padding: 12px 14px; margin: 8px 0;
  box-shadow: var(--shadow-card); }
.board .node small { display: block; color: var(--text-muted); font-size: var(--fs-caption); margin-top: 2px; }
.board .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.board .grid .node { margin: 0; }
details.more { margin: 8px 0; }
details.more summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-label); padding: 12px 4px; }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .btn { transition: none; } }