/* 민비서 M 화면 스타일 — 토큰·뼈대(3가지 폭)·공용 클래스(계약서 §7.1)·화면별 조각. 다른 view 는 여기 클래스만 쓴다. */

/* ───────── 1. 토큰 ───────── */
:root {
  --navy: #0E1A4F; --ink: #0E1A4F; --ink-2: #4B5578; --ink-3: #8790B0;
  --bg: #EEF2FB; --bg-2: #E6EBF8; --card: #FFFFFF; --card-2: #F7F9FE; --line: #E1E6F3; --line-2: #EDF0F8;
  --blue: #2447E0; --blue-2: #3B6CF6; --blue-deep: #1B37B8; --blue-soft: #DCE4FF; --blue-softer: #EEF2FF;
  --fluff: #FFFFFF; --fluff-shade: #E4E8F3;
  --ok: #1F9D6B; --ok-soft: #DDF3EA; --warn: #E39A0B; --warn-ink: #9A6400; --warn-soft: #FDF1D6; --bad: #D6453D; --bad-soft: #FBE4E2;
  --hl-promise: #DCE4FF; --hl-date: #FFEFB3; --hl-money: #D4F2E3; --hl-name: #F0E2FF; --hl-request: #FFE2D3;
  --shadow-1: 0 1px 2px rgba(14, 26, 79, .05), 0 2px 10px rgba(14, 26, 79, .045);
  --shadow-2: 0 6px 24px rgba(14, 26, 79, .10), 0 1px 3px rgba(14, 26, 79, .06);
  --shadow-3: 0 24px 60px rgba(14, 26, 79, .22);
  --r: 12px; --r-sm: 8px; --r-lg: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1); --dur: 180ms;
  --font: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --band-h: 0px; --top-h: 60px; --nav-w: 248px; --detail-w: 400px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #E8ECFF; --ink: #E8ECFF; --ink-2: #AEB7DA; --ink-3: #7C86AE;
    --bg: #0B1230; --bg-2: #0F173A; --card: #121A3D; --card-2: #17204A; --line: #243061; --line-2: #1C2753;
    --blue: #4A6BFF; --blue-2: #6F8CFF; --blue-deep: #3656F0; --blue-soft: #22306E; --blue-softer: #19245A;
    --ok: #3CC48E; --ok-soft: #133B33; --warn: #F2B544; --warn-ink: #F2B544; --warn-soft: #3A2F14; --bad: #FF6B61; --bad-soft: #3D1C24;
    --hl-promise: #2A3A86; --hl-date: #5A4A12; --hl-money: #174A36; --hl-name: #43285E; --hl-request: #5A2E1C;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 26px rgba(0, 0, 0, .35); --shadow-3: 0 24px 60px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --navy: #E8ECFF; --ink: #E8ECFF; --ink-2: #AEB7DA; --ink-3: #7C86AE;
  --bg: #0B1230; --bg-2: #0F173A; --card: #121A3D; --card-2: #17204A; --line: #243061; --line-2: #1C2753;
  --blue: #4A6BFF; --blue-2: #6F8CFF; --blue-deep: #3656F0; --blue-soft: #22306E; --blue-softer: #19245A;
  --ok: #3CC48E; --ok-soft: #133B33; --warn: #F2B544; --warn-ink: #F2B544; --warn-soft: #3A2F14; --bad: #FF6B61; --bad-soft: #3D1C24;
  --hl-promise: #2A3A86; --hl-date: #5A4A12; --hl-money: #174A36; --hl-name: #43285E; --hl-request: #5A2E1C;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 26px rgba(0, 0, 0, .35); --shadow-3: 0 24px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ───────── 2. 바탕 ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--blue-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue-2) 45%, transparent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -40px; z-index: 200; background: var(--card); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 8px; }
.ic { flex: none; }
.ic-xs { width: 14px; height: 14px; }
.ic-lg { width: 26px; height: 26px; }
::selection { background: var(--blue-soft); }

/* ───────── 3. 뼈대 (data-layout = wide | mid | phone | panel) ───────── */
.demo-band {
  position: sticky; top: 0; z-index: 60; height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: #6B4400; letter-spacing: 0;
  background: repeating-linear-gradient(-45deg, #FFE9A8 0 14px, #FFE29A 14px 28px); border-bottom: 1px solid #F1CF73;
}
.demo-band a { color: #6B4400; text-decoration: underline; font-weight: 600; }
body.has-band { --band-h: 30px; }

.app { min-height: calc(100vh - var(--band-h)); }
.nav, .toptabs, .tabbar { display: none; }
.main { container: main / inline-size; min-width: 0; padding: 20px 28px 48px; outline: none; }
.view { max-width: 1180px; margin: 0 auto; }
.view-enter { animation: view-in 220ms var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 머리 줄 */
.topbar {
  position: sticky; top: var(--band-h); z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur);
}
.scrolled .topbar { border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--navy); text-decoration: none !important; flex: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; overflow: hidden; background: var(--navy); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(14, 26, 79, .25); }
.brand-mark img, .brand-mark .mini-img { width: 34px; height: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.brand-name b { color: var(--blue); font-weight: 900; }
.brand-sub { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 2px; letter-spacing: 0; }
.topbar .brand-compact { display: none; }

.quick-trigger {
  flex: 1 1 auto; max-width: 560px; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; cursor: text;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-3); font-size: 14px; text-align: left;
  box-shadow: var(--shadow-1); transition: border-color var(--dur), box-shadow var(--dur);
}
.quick-trigger:hover { border-color: color-mix(in srgb, var(--blue-2) 45%, var(--line)); box-shadow: 0 0 0 4px var(--blue-softer); }
.quick-trigger .qt-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-trigger .ic { color: var(--blue-2); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.sync { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line-2); }
.sync-text { overflow: hidden; text-overflow: ellipsis; }
.head-mini { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none !important; }
.head-mini .mini-img { width: 40px; height: 40px; flex: none; transition: transform 200ms var(--ease); }
.head-mini:hover .mini-img { transform: translateY(-2px) rotate(-4deg); }
.head-mini .mini-bubble { max-width: 340px; }
.topbar .quick-plus { display: none; }

/* 왼쪽 메뉴 */
.nav {
  position: sticky; top: var(--band-h); height: calc(100vh - var(--band-h)); overflow-y: auto; padding: 18px 14px 14px; flex-direction: column; gap: 6px;
  background: var(--card); border-right: 1px solid var(--line);
}
.nav .brand { padding: 2px 8px 16px; }
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 10px; color: var(--ink-2);
  font-weight: 600; font-size: 15px; text-decoration: none !important; transition: background var(--dur), color var(--dur);
}
.nav-item:hover { background: var(--card-2); color: var(--ink); }
.nav-item.on { background: var(--blue-softer); color: var(--blue); }
.nav-item.on::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--blue); }
.nav-item .pill { margin-left: auto; }
.nav-sep { height: 1px; background: var(--line-2); margin: 10px 8px; }
.nav-mini {
  margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; color: var(--ink); text-decoration: none !important;
  background: linear-gradient(135deg, var(--blue-softer), color-mix(in srgb, var(--blue-soft) 60%, var(--card))); border: 1px solid var(--line-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.nav-mini:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.nav-mini.on { outline: 2px solid var(--blue-2); }
.nav-mini .mini-img { width: 52px; height: 52px; flex: none; }
.nav-mini-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.nav-mini-rank { font-weight: 800; font-size: 14px; display: block; }
.nav-mini-sub { font-size: 12px; color: var(--ink-2); display: block; }
.nav-mini .xpbar { display: block; }
.xpbar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--blue-soft) 70%, var(--card)); overflow: hidden; margin-top: 6px; }
.xpbar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-2), var(--blue)); transition: width 600ms var(--ease); }
.nav-foot { display: flex; align-items: center; gap: 10px; padding: 12px 6px 2px; font-size: 13px; color: var(--ink-2); }
.nav-foot .grow { flex: 1; min-width: 0; line-height: 1.25; }
.nav-foot b { color: var(--ink); display: block; font-size: 14px; }

/* 오른쪽 상세 */
.detail { display: none; }
.detail.open { display: flex; }
.detail {
  position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(var(--detail-w), 100vw); flex-direction: column;
  background: var(--card); box-shadow: var(--shadow-3); border-left: 1px solid var(--line); animation: drawer-in 220ms var(--ease);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail:focus { outline: none; }
.detail-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px 20px; border-bottom: 1px solid var(--line-2); }
.detail-head h2 { font-size: 17px; flex: 1; min-width: 0; }
.detail-body { flex: 1; overflow-y: auto; padding: 16px 20px 32px; }
.scrim { position: fixed; inset: 0; z-index: 65; background: rgba(14, 26, 79, .28); animation: fade-in 180ms; }
.scrim[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }

/* 넓은 PC (≥1024) */
.app[data-layout="wide"], .app[data-layout="mid"] { background: linear-gradient(90deg, var(--card) 0 var(--nav-col), var(--line) var(--nav-col) calc(var(--nav-col) + 1px), transparent 0); }
.app[data-layout="wide"] { --nav-col: var(--nav-w); }
.app[data-layout="mid"] { --nav-col: 84px; }
.app[data-layout="wide"] {
  display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: var(--top-h) auto 1fr;
  grid-template-areas: "nav top" "nav banner" "nav main";
}
.app[data-layout="wide"] .nav { display: flex; grid-area: nav; grid-row: 1 / -1; }
.app[data-layout="wide"] .topbar { grid-area: top; }
.app[data-layout="wide"] .banners { grid-area: banner; }
.app[data-layout="wide"] .main { grid-area: main; }
@media (min-width: 1280px) {
  .app[data-layout="wide"].detail-docked { grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--detail-w); grid-template-areas: "nav top top" "nav banner detail" "nav main detail"; }
  .app[data-layout="wide"].detail-docked .detail {
    grid-area: detail; grid-row: 2 / -1; position: sticky; top: calc(var(--band-h) + var(--top-h)); height: calc(100vh - var(--band-h) - var(--top-h));
    width: auto; box-shadow: none; animation: fade-in 180ms;
  }
  .app[data-layout="wide"].detail-docked .scrim { display: none; }
}

/* 중간 폭 (600~1023): 아이콘 메뉴 */
.app[data-layout="mid"] { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: var(--top-h) auto 1fr; grid-template-areas: "nav top" "nav banner" "nav main"; }
.app[data-layout="mid"] .nav { display: flex; grid-area: nav; grid-row: 1 / -1; padding: 14px 8px; align-items: stretch; }
.app[data-layout="mid"] .nav .brand-text, .app[data-layout="mid"] .nav-mini-text, .app[data-layout="mid"] .nav-foot .grow, .app[data-layout="mid"] .nav-item .pill { display: none; }
.app[data-layout="mid"] .nav .brand { justify-content: center; padding: 2px 0 14px; }
.app[data-layout="mid"] .nav-item { flex-direction: column; height: auto; padding: 8px 2px; gap: 3px; font-size: 11px; justify-content: center; text-align: center; }
.app[data-layout="mid"] .nav-item.on::before { left: -8px; }
.app[data-layout="mid"] .nav-mini { justify-content: center; padding: 8px; }
.app[data-layout="mid"] .nav-foot { justify-content: center; }
.app[data-layout="mid"] .topbar { grid-area: top; }
.app[data-layout="mid"] .banners { grid-area: banner; }
.app[data-layout="mid"] .main { grid-area: main; padding: 18px 20px 40px; }
.app[data-layout="mid"] .head-mini .mini-bubble { max-width: 220px; }

/* 폰 (<600) 과 사이드패널 공통 */
.app[data-layout="phone"] .main, .app[data-layout="panel"] .main { padding: 14px 14px 28px; }
.app[data-layout="phone"] .topbar, .app[data-layout="panel"] .topbar { height: 56px; padding: 0 12px; gap: 10px; --top-h: 56px; }
.app[data-layout="phone"] .topbar .brand-compact, .app[data-layout="panel"] .topbar .brand-compact { display: inline-flex; }
.app[data-layout="phone"] .brand-sub, .app[data-layout="panel"] .brand-sub { display: none; }
.app[data-layout="phone"] .brand-mark, .app[data-layout="panel"] .brand-mark { width: 30px; height: 30px; border-radius: 10px; }
.app[data-layout="phone"] .brand-name, .app[data-layout="panel"] .brand-name { font-size: 17px; }
.app[data-layout="phone"] .quick-trigger, .app[data-layout="panel"] .quick-trigger { display: none; }
.app[data-layout="phone"] .topbar-right, .app[data-layout="panel"] .topbar-right { flex: 1; gap: 8px; justify-content: flex-end; }
.app[data-layout="phone"] .sync, .app[data-layout="panel"] .sync { padding: 0; border: 0; background: none; }
.app[data-layout="phone"] .sync-text, .app[data-layout="panel"] .sync-text { display: none; }
.app[data-layout="phone"] .head-mini, .app[data-layout="panel"] .head-mini { flex: 1; min-width: 0; justify-content: flex-end; }
.app[data-layout="phone"] .head-mini .mini-img, .app[data-layout="panel"] .head-mini .mini-img { width: 36px; height: 36px; }
.app[data-layout="phone"] .head-mini .mini-bubble, .app[data-layout="panel"] .head-mini .mini-bubble { max-width: none; font-size: 12.5px; padding: 6px 10px; }

/* 폰: 아래 탭 */
.app[data-layout="phone"] .main { padding-bottom: calc(96px + var(--safe-b)); }
.app[data-layout="phone"] .tabbar {
  display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 6px 6px calc(6px + var(--safe-b)); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 52px; border: 0; background: none; border-radius: 12px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; text-decoration: none !important; position: relative; cursor: pointer; }
.tab-item.on { color: var(--blue); }
.tab-item .pill { position: absolute; top: 2px; left: calc(50% + 6px); }
.tab-plus { color: #fff; }
.tab-plus .tab-plus-btn { width: 50px; height: 50px; border-radius: 17px; display: grid; place-items: center; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 6px 16px rgba(36, 71, 224, .35); transform: translateY(-10px); transition: transform var(--dur) var(--ease); }
.tab-plus:active .tab-plus-btn { transform: translateY(-8px) scale(.96); }
.tab-plus .ic { width: 26px; height: 26px; }

/* 사이드패널: 위쪽 아이콘 탭 */
.app[data-layout="panel"] .topbar .quick-plus { display: inline-flex; }
.app[data-layout="panel"] .toptabs {
  display: flex; position: sticky; top: calc(var(--band-h) + 56px); z-index: 39; gap: 2px; padding: 4px 6px 6px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.app[data-layout="panel"] .toptabs::-webkit-scrollbar { display: none; }
.toptab { flex: 1 0 auto; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 5px; border-radius: 10px; color: var(--ink-3); font-size: 10.5px; font-weight: 700; text-decoration: none !important; position: relative; white-space: nowrap; }
.toptab.on { color: var(--blue); background: var(--card); box-shadow: var(--shadow-1); }
.toptab .pill { position: absolute; top: 0; right: 2px; transform: scale(.85); }

.banners:empty { display: none; }
.banners { padding: 12px 28px 0; }
.app[data-layout="phone"] .banners, .app[data-layout="panel"] .banners { padding: 10px 14px 0; }
.banner {
  max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); animation: view-in 240ms var(--ease);
}
.banner .mini-img { width: 44px; height: 44px; flex: none; }
.banner-text { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.banner-text b { display: block; font-size: 15px; }

/* ───────── 4. 공용 배치 ───────── */
.page { display: flex; flex-direction: column; gap: 18px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 800; }
.page-head p { margin-top: 4px; font-size: 14px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.section { display: flex; flex-direction: column; gap: 10px; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.section-title .muted { font-weight: 500; font-size: 13px; }
.section-title .grow { flex: 1; }
.divider { height: 1px; background: var(--line-2); margin: 6px 0; border: 0; }
.grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.split { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.split-main, .split-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.split-main > *, .split-side > *, .page > * { min-width: 0; }
.section, .card, .list-group { scroll-margin-top: calc(var(--band-h) + var(--top-h) + 56px); }
@container main (min-width: 560px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container main (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } }

/* ───────── 5. 카드 ───────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 16px 18px; min-width: 0; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-head h3 { font-size: 15.5px; font-weight: 800; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.card-body { min-width: 0; }
.card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.card-tone-ok { box-shadow: inset 4px 0 0 var(--ok), var(--shadow-1); }
.card-tone-warn { box-shadow: inset 4px 0 0 var(--warn), var(--shadow-1); }
.card-tone-bad { box-shadow: inset 4px 0 0 var(--bad), var(--shadow-1); }
.card-tone-blue { box-shadow: inset 4px 0 0 var(--blue-2), var(--shadow-1); }
button.card { font: inherit; text-align: left; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
button.card:hover:not([disabled]) { transform: translateY(-1px); box-shadow: var(--shadow-2); }
button.card[disabled] { cursor: default; }
.card-flat { box-shadow: none; }

/* 숫자 카드 (여러 화면 공용) */
.stat-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container main (min-width: 560px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.stat-num { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.stat-label { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }

/* ───────── 6. 버튼 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
  text-decoration: none !important; transition: background var(--dur), border-color var(--dur), transform 120ms, box-shadow var(--dur); user-select: none;
}
.btn:hover { background: var(--card-2); border-color: color-mix(in srgb, var(--blue-2) 30%, var(--line)); }
.btn:active { transform: scale(.975); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(36, 71, 224, .25); }
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--blue-softer); border-color: transparent; color: var(--ink); }
.btn-danger { background: var(--card); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 9px; gap: 5px; }
.btn-sm .ic { width: 16px; height: 16px; }
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-block { width: 100%; }
.btn-soft { background: var(--blue-softer); border-color: transparent; color: var(--blue); }
.btn-soft:hover { background: var(--blue-soft); }
.more-btn { color: var(--ink-3); margin-left: auto; }

/* ───────── 7. 표시 ───────── */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--line-2); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-warn { background: var(--warn-soft); color: var(--warn-ink); }
.chip-bad { background: var(--bad-soft); color: var(--bad); }
.chip-blue { background: var(--blue-softer); color: var(--blue); }
.chip-muted { background: var(--line-2); color: var(--ink-2); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); color: var(--ink-2); background: var(--card); white-space: nowrap; }
.badge-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.badge-warn { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn-soft) 55%, var(--card)); }
.badge-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.badge-blue { color: var(--blue); border-color: color-mix(in srgb, var(--blue-2) 35%, var(--line)); }
.badge-muted { color: var(--ink-3); }
.pill { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: var(--blue); color: #fff; line-height: 1; }
.pill-bad { background: var(--bad); }
.pill-muted { background: var(--line); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.strong { font-weight: 800; }
.dday { display: inline-grid; place-items: center; min-width: 52px; height: 28px; padding: 0 8px; border-radius: 8px; font-weight: 900; font-size: 13.5px; letter-spacing: 0; background: var(--line-2); color: var(--ink-2); }
.dday-bad { background: var(--bad); color: #fff; }
.dday-warn { background: var(--warn-soft); color: var(--warn-ink); }
.dday-blue { background: var(--blue-softer); color: var(--blue); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-3) 18%, transparent); }
.dot-ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.dot-bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); animation: pulse 1.8s infinite; }
.dot-idle { background: var(--ink-3); }
.dot-blue { background: var(--blue-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-2) 22%, transparent); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
.avatar { width: var(--sz, 28px); height: var(--sz, 28px); border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--av, var(--ink-2)); color: #fff; font-size: calc(var(--sz, 28px) * .46); font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--card); }

/* ───────── 8. 목록·표 ───────── */
.list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1); }
.card .list { box-shadow: none; border: 0; border-radius: 0; margin: 0 -18px; background: transparent; }
.card .list .list-item { padding-left: 18px; padding-right: 18px; }
.list-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; color: inherit; text-align: left; text-decoration: none !important; transition: background var(--dur); font: inherit;
}
.list-item:last-child { border-bottom: 0; }
a.list-item:hover, button.list-item:hover, .list-item.clickable:hover { background: var(--card-2); cursor: pointer; }
.list-item.on { background: var(--blue-softer); }
.list-item-lead { flex: none; display: grid; place-items: center; }
.list-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.list-item-title { font-weight: 700; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.list-item-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-item-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-size: 13px; color: var(--ink-2); }
.list-item-bad { box-shadow: inset 3px 0 0 var(--bad); }
.list-item-warn { box-shadow: inset 3px 0 0 var(--warn); }
.list-group { display: flex; flex-direction: column; gap: 8px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--card-2); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; }
.cell-changed { background: #FFF6D1 !important; }
:root[data-theme="dark"] .cell-changed { background: #3A3312 !important; }
.cell-unsure { outline: 2px dashed var(--warn); outline-offset: -4px; border-radius: 6px; }
@container main (max-width: 559px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
  .table-cards td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 10px; text-align: right; }
  .table-cards td::before { content: attr(data-label); color: var(--ink-2); font-size: 12.5px; text-align: left; }
}

/* ───────── 9. 입력 ───────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; transition: border-color var(--dur), box-shadow var(--dur);
}
.textarea { resize: vertical; line-height: 1.6; min-height: 96px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 4px var(--blue-softer); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.check:hover { background: var(--card-2); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-item, .seg > .btn { flex: none; height: 32px; padding: 0 12px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none !important; box-shadow: none; white-space: nowrap; }
.seg-item:hover, .seg > .btn:hover { color: var(--ink); background: color-mix(in srgb, var(--card) 60%, transparent); }
.seg-item.on, .seg > .btn.btn-primary, .seg > .btn[aria-pressed="true"] { background: var(--card); color: var(--blue); box-shadow: var(--shadow-1); }
.seg-count { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.seg-item.on .seg-count { color: var(--blue-2); }
.seg-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: none; }

/* ───────── 10. 기타 ───────── */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 16px; }
.empty .empty-mini { width: 96px; height: 96px; margin-bottom: 4px; animation: floaty 4s ease-in-out infinite; }
.empty h3 { font-size: 16px; }
.empty p { max-width: 360px; font-size: 14px; }
.empty .btn-row { margin-top: 6px; justify-content: center; }
.hl { border-radius: 4px; padding: 0 2px; margin: 0 -1px; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-promise { background: var(--hl-promise); box-shadow: inset 0 -2px 0 var(--blue-2); }
.hl-date { background: var(--hl-date); }
.hl-money { background: var(--hl-money); font-weight: 700; }
.hl-name { background: var(--hl-name); }
.hl-request { background: var(--hl-request); box-shadow: inset 0 -2px 0 #F08A5D; }
.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line); box-shadow: inset 0 -1px 0 var(--line); font-family: inherit; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--ink-2); font-weight: 600; }
.kv dd { margin: 0; min-width: 0; }
.kv-line { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.evidence { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2); border-left: 3px solid var(--blue-soft); font-size: 14px; }
.evidence p { color: var(--ink); }
.evidence footer { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.evidence-none { display: flex; align-items: center; gap: 5px; padding: 6px 0; }

/* 민이 */
.mini { display: flex; align-items: flex-end; gap: 10px; }
.mini-img { display: block; flex: none; object-fit: contain; }
.mini-fb { display: inline-block; }
.mini-bubble {
  position: relative; padding: 7px 12px; border-radius: 14px 14px 14px 4px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  font-size: 13.5px; color: var(--ink); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.head-mini .mini-bubble { border-radius: 14px 14px 4px 14px; animation: bubble-in 260ms var(--ease); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(4px) scale(.97); } }
@keyframes floaty { 50% { transform: translateY(-5px); } }
.mini-float { animation: floaty 4.5s ease-in-out infinite; }

/* 단계 칩 */
.stepper { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; row-gap: 6px; }
.step { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding-right: 14px; position: relative; }
.step:not(:last-child)::after { content: ""; position: absolute; right: 3px; top: 50%; width: 8px; height: 2px; background: var(--line); border-radius: 2px; }
.step-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--card); flex: none; }
.step-dot .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.step-done { color: var(--ok); } .step-done .step-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.step-done:not(:last-child)::after { background: var(--ok); }
.step-doing { color: var(--blue); } .step-doing .step-dot { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 3px var(--blue-softer); }
.step-todo { color: var(--ink-3); }
.step-blocked { color: var(--bad); } .step-blocked .step-dot { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.step-na { color: var(--ink-3); opacity: .55; } .step-na .step-label { text-decoration: line-through; }

/* 알림·창 */
.toast-box { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.app-phone .toast-box, body.layout-phone .toast-box { bottom: calc(88px + var(--safe-b)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: #0E1A4F; color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-3); animation: toast-in 220ms var(--ease); transition: opacity 300ms, transform 300ms; }
.toast .btn { height: 28px; color: #BFD0FF; }
.toast .btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.toast-ok::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); font-size: 12px; font-weight: 900; }
.toast-bad { background: #7A1E1A; }
.toast-warn { background: #6B4A00; }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(14, 26, 79, .34); backdrop-filter: blur(2px); animation: fade-in 160ms; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-3); border: 1px solid var(--line); animation: modal-in 200ms var(--ease); }
.modal-wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 6px 20px; }
.modal-head h3 { flex: 1; font-size: 17px; font-weight: 800; }
.modal-body { padding: 8px 20px 14px; overflow-y: auto; min-height: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; flex-wrap: wrap; }
.modal-foot:empty { display: none; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-wrap.modal-top { place-items: start center; padding-top: 12vh; }
@media (max-width: 599px) {
  .modal-wrap, .modal-wrap.modal-top { place-items: end center; padding: 0; }
  .modal, .modal-wide { width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: var(--safe-b); animation: sheet-up 240ms var(--ease); }
  .modal-head::before { content: ""; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line); }
  .modal { position: relative; }
  .modal-foot .btn { flex: 1; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } }
.sheet-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 0 8px; }
.sheet-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-weight: 700; font-size: 13.5px; text-decoration: none !important; cursor: pointer; text-align: center; }
.sheet-btn .ic { width: 26px; height: 26px; color: var(--blue); }
.sheet-btn:hover { border-color: var(--blue-2); background: var(--blue-softer); }
.sheet-btn small { font-weight: 500; color: var(--ink-2); font-size: 11.5px; line-height: 1.3; }

/* 끌어 놓기 */
.drop-veil { position: fixed; inset: 10px; z-index: 250; border: 3px dashed var(--blue-2); border-radius: 22px; background: color-mix(in srgb, var(--blue-softer) 88%, transparent); display: grid; place-items: center; text-align: center; pointer-events: none; animation: fade-in 120ms; }
.drop-veil b { font-size: 20px; display: block; margin-top: 8px; }
.drop-veil[hidden] { display: none; }

/* 부팅 */
.boot { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--ink-2); font-size: 14px; }
.boot-dot { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--blue-soft); border-top-color: var(--blue); animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: grid; gap: 12px; }
.skel { height: 84px; border-radius: var(--r); background: linear-gradient(90deg, var(--card) 0%, var(--card-2) 50%, var(--card) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border: 1px solid var(--line-2); }
.skel.sm { height: 40px; width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.boot-error { max-width: 560px; margin: 8vh auto; }

/* ───────── 11. 오늘 ───────── */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hero-date { font-size: 13.5px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.hero-greet { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.hero-greet .num { color: var(--blue); }
.hero-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.hstat { display: flex; flex-direction: column; align-items: flex-start; min-width: 84px; padding: 9px 14px 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: inherit; text-decoration: none !important; transition: transform var(--dur) var(--ease); }
.hstat:hover { transform: translateY(-1px); }
.hstat b { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.hstat span { font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.hstat-bad b { color: var(--bad); }
.hstat-warn b { color: var(--warn-ink); }
.hstat-blue b { color: var(--blue); }
.hstat-zero b { color: var(--ink-3); }

.brief {
  position: relative; overflow: hidden; display: flex; gap: 16px; align-items: center; padding: 16px 18px;
  background: linear-gradient(120deg, #13205E 0%, #1B2F86 55%, #2447E0 130%); color: #EEF2FF; border: 0; box-shadow: 0 10px 30px rgba(14, 26, 79, .22);
}
.brief::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 140, 255, .35), transparent 70%); pointer-events: none; }
.brief-mini { flex: none; width: 84px; height: 84px; border-radius: 22px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.brief-mini .mini-img { width: 76px; height: 76px; }
.brief-main { flex: 1; min-width: 0; position: relative; z-index: 1; }
.brief-kicker { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #AFC0FF; margin-bottom: 6px; flex-wrap: wrap; }
.brief-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.brief-done { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.brief-done li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600; color: #E3E9FF; }
.brief-done li b { color: #fff; font-weight: 900; }
.brief-done li .ic { width: 14px; height: 14px; color: #8FE3BF; }
.brief-you { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.brief-you .chip { background: #FFD76A; color: #3D2A00; border: 0; cursor: pointer; }
.brief-you .brief-chip .ic { transform: rotate(90deg); }
.brief-you .brief-chip[aria-expanded="true"] .ic { transform: rotate(90deg) scaleX(-1); }
.brief-done .brief-extra { display: none; }
.brief-you a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.brief .btn-ghost { color: #C9D5FF; }
.brief .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.brief-more { margin-top: 10px; display: grid; gap: 6px; }
.brief-more[hidden] { display: none; }
.brief-need { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 13.5px; text-decoration: none !important; }
.brief-need:hover { background: rgba(255, 255, 255, .14); }
.brief-need .ic { color: #FFD76A; }

.act-list { display: flex; flex-direction: column; gap: 10px; }
.act-card { padding: 14px 16px 14px 18px; transition: transform 220ms var(--ease), opacity 220ms, max-height 260ms var(--ease), margin 260ms, padding 260ms; max-height: 520px; }
.act-card.leaving { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; overflow: hidden; border-width: 0; }
.act-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; min-width: 0; }
.act-client { font-weight: 700; font-size: 13.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.act-client .ic { width: 14px; height: 14px; }
.act-due { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.act-title { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; }
.act-why { margin-top: 3px; font-size: 14px; color: var(--ink-2); }
.act-card .evidence { margin-top: 10px; padding: 8px 12px; font-size: 13.5px; }
.act-card .btn-row { margin-top: 12px; }
.act-card .more-btn { margin-left: auto; }

.tl { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 64px 14px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 0; color: inherit; text-decoration: none !important; border-radius: 8px; }
.tl-item:hover .tl-title { color: var(--blue); }
.tl-time { font-size: 13px; font-weight: 800; color: var(--ink); text-align: right; padding-top: 1px; font-variant-numeric: tabular-nums; }
.tl-time.faint { color: var(--ink-3); font-weight: 600; }
.tl-rail { position: relative; height: 100%; display: flex; justify-content: center; }
.tl-rail::before { content: ""; position: absolute; top: 18px; bottom: -14px; width: 2px; background: var(--line-2); }
.tl-item:last-child .tl-rail::before { display: none; }
.tl-rail i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-2); margin-top: 6px; box-shadow: 0 0 0 3px var(--blue-softer); position: relative; }
.tl-title { font-weight: 700; font-size: 14.5px; transition: color var(--dur); }
.tl-sub { font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }

.dl-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.dl-row:last-child { border-bottom: 0; }
.dl-row .grow { flex: 1; min-width: 0; }
.dl-label { font-weight: 700; font-size: 14px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.team-row .grow { flex: 1; min-width: 0; font-size: 14px; }
.col-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.col-row:last-child { border-bottom: 0; }
.col-row .dot { margin-top: 7px; }
.col-row .grow { flex: 1; min-width: 0; }
.col-label { font-weight: 700; font-size: 13.5px; }
.advice-item { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.advice-item:last-child { border-bottom: 0; padding-bottom: 0; }
.advice-item p { font-size: 14px; }
.advice-why { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; display: flex; gap: 5px; }
.advice-item .btn-row { margin-top: 8px; }
.cs-quote { font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-flow > .split > .split-main > *, .today-flow > .split > .split-side > * { min-width: 0; }
@container main (max-width: 899px) {
  .today-flow > .split { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .today-flow > .split > .split-main, .today-flow > .split > .split-side { display: contents; }
  .today-flow .o1 { order: 1; } .today-flow .o2 { order: 2; } .today-flow .o3 { order: 3; } .today-flow .o4 { order: 4; } .today-flow .o5 { order: 5; }
  .today-flow .o6 { order: 6; } .today-flow .o7 { order: 7; } .today-flow .o8 { order: 8; } .today-flow .o9 { order: 9; } .today-flow .o10 { order: 10; }
}
@container main (max-width: 520px) {
  .hero-greet { font-size: 20px; }
  .hero-stats { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .hstat { min-width: 0; padding: 8px 8px 7px; border-radius: 12px; }
  .hstat b { font-size: 21px; }
  .hstat span { font-size: 11px; }
  .brief { padding: 14px; gap: 12px; align-items: flex-start; }
  .brief-mini { width: 56px; height: 56px; border-radius: 16px; }
  .brief-mini .mini-img { width: 52px; height: 52px; }
  .brief-title { font-size: 15.5px; margin-bottom: 6px; }
  .brief-done li { font-size: 12px; padding: 3px 8px; }
  .brief-title { display: none; }
  .brief-done li:nth-child(n+4):not(.brief-extra) { display: none; }
  .brief-done .brief-extra { display: inline-flex; }
  .brief-you { margin-top: 8px; }
  .act-card .btn-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .act-card .btn-row .btn { padding: 0 4px; }
  .act-title { font-size: 15.5px; }
  .page-head h1 { font-size: 21px; }
}

/* ───────── 12. 약속 장부 ───────── */
.prom-row .list-item-title { white-space: nowrap; }
.prom-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); display: grid; place-items: center; color: transparent; cursor: pointer; transition: all var(--dur); flex: none; }
.prom-check:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.prom-check .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.prom-row.is-done .prom-check { background: var(--ok); border-color: var(--ok); color: #fff; }
.prom-row.is-done .list-item-title { text-decoration: line-through; color: var(--ink-3); }
.prom-due { font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; }
.prom-due.late { color: var(--bad); }
.prom-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.prom-toolbar .search { flex: 1 1 200px; position: relative; }
.prom-toolbar .search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 18px; height: 18px; }
.prom-toolbar .search .input { padding-left: 36px; }
.prom-groups { display: flex; flex-direction: column; gap: 18px; }
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hist li { position: relative; padding: 0 0 12px 20px; font-size: 13.5px; }
.hist li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-soft); box-shadow: 0 0 0 2px var(--card); }
.hist li::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--line-2); }
.hist li:last-child::after { display: none; }
.hist .when { color: var(--ink-3); font-size: 12px; display: block; }
.detail-section { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.detail-section > h4 { font-size: 13px; color: var(--ink-2); font-weight: 800; display: flex; align-items: center; gap: 6px; }
.orig { white-space: pre-wrap; font-size: 14px; line-height: 1.7; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; max-height: 260px; overflow: auto; }
.detail-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }

/* ───────── 13. 빠른 입력 ───────── */
.quick { display: flex; flex-direction: column; gap: 12px; }
.quick-input-wrap { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 14px; border-radius: 14px; border: 2px solid var(--blue-2); background: var(--card); box-shadow: 0 0 0 5px var(--blue-softer); }
.quick-input-wrap .ic { color: var(--blue); width: 22px; height: 22px; }
.quick-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 17px; font-weight: 600; height: 44px; color: var(--ink); }
.quick-input::placeholder { color: var(--ink-3); font-weight: 500; }
.quick-hint { font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.quick-card { border-radius: 14px; border: 1px solid var(--line); background: var(--card-2); padding: 12px 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; align-items: center; animation: fade-in 140ms; }
.quick-card dt { font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.quick-card dd { margin: 0; font-weight: 700; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.quick-card .guess { cursor: pointer; }
.quick-card .guess.on { background: var(--blue); color: #fff; }
.quick-examples { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-ex { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.quick-ex:hover { border-color: var(--blue-2); color: var(--blue); }
.quick-results { display: flex; flex-direction: column; gap: 2px; }

/* ───────── 14. 붙여넣기 ───────── */
.paste-src { position: relative; }
.paste-src .textarea { min-height: 220px; font-size: 14.5px; }
.paste-view { white-space: pre-wrap; font-size: 15px; line-height: 1.85; max-height: 56vh; overflow: auto; padding: 4px 2px; }
.drop-zone { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px dashed var(--line); border-radius: 12px; color: var(--ink-2); font-size: 13.5px; transition: border-color var(--dur), background var(--dur); cursor: pointer; }
.drop-zone:hover, .drop-zone.over { border-color: var(--blue-2); background: var(--blue-softer); color: var(--blue); }
.drop-zone .ic { width: 26px; height: 26px; color: var(--blue-2); }
.legend { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.legend mark { padding: 1px 6px; border-radius: 5px; color: var(--ink); }
.pv-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pv-sum .hstat { min-width: 0; box-shadow: none; background: var(--card-2); }
.pv-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pv-item:last-child { border-bottom: 0; }
.pv-item .grow { flex: 1; min-width: 0; }
.pv-kind { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-softer); color: var(--blue); }
.pv-kind.req { background: var(--hl-request); color: #B4521F; }
.pv-kind.pay { background: var(--hl-money); color: var(--ok); }
.pv-kind .ic { width: 17px; height: 17px; }
.pv-title { font-weight: 700; font-size: 14.5px; }
.pv-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.save-box { padding: 12px; border-radius: 12px; background: var(--blue-softer); border: 1px solid var(--line-2); }
.mini-stack { position: relative; display: inline-block; flex: none; }
.mini-stack > img, .mini-stack > .mini-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-stack > .mini-base { position: relative; }
.col-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-size: 14px; font-weight: 700; text-decoration: none !important; }
.col-alert .grow { flex: 1; min-width: 0; }
.col-alert:hover { filter: brightness(.98); }

/* ───────── 15. 민이 방 ───────── */
.room-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px; background: radial-gradient(120% 120% at 20% 0%, var(--card) 0%, var(--blue-softer) 60%, var(--blue-soft) 100%); }
@container main (min-width: 640px) { .room-hero { grid-template-columns: 260px minmax(0, 1fr); } }
.room-stage { position: relative; display: grid; place-items: center; min-height: 220px; }
.room-stage::before { content: ""; position: absolute; bottom: 14px; width: 150px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 26, 79, .16), transparent); }
.room-stage .mini-stack { width: 210px; height: 210px; cursor: pointer; animation: floaty 4.5s ease-in-out infinite; }
.room-stage .mini-stack.bounce { animation: pat 600ms var(--ease); }
@keyframes pat { 30% { transform: scale(1.06, .94) translateY(4px); } 60% { transform: scale(.97, 1.04) translateY(-8px); } }
.hearts { position: absolute; inset: 0; pointer-events: none; }
.hearts i { position: absolute; bottom: 50%; font-style: normal; color: #FF6F91; font-size: 20px; animation: heart-up 1.1s var(--ease) forwards; }
@keyframes heart-up { from { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-110px) scale(1.2); } }
.room-rank { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; }
.room-rank small { font-size: 14px; color: var(--ink-2); font-weight: 700; margin-left: 6px; }
.room-bubble { white-space: normal; font-size: 15px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; max-width: 520px; }
.room-xp { height: 14px; margin-top: 10px; border-radius: 99px; background: color-mix(in srgb, var(--card) 70%, var(--blue-soft)); overflow: hidden; box-shadow: inset 0 1px 2px rgba(14, 26, 79, .1); }
.room-xp > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6F8CFF, var(--blue)); position: relative; transition: width 900ms var(--ease); }
.room-xp > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: shimmer 2.4s infinite; background-size: 200% 100%; }
.props { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.prop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-align: center; }
.prop .mini-stack { width: 76px; height: 76px; }
.prop b { font-size: 13.5px; }
.prop small { font-size: 11.5px; color: var(--ink-2); }
.prop.locked { background: var(--card-2); }
.prop.locked .mini-stack { filter: grayscale(1) opacity(.35); }
.prop-lockmark { position: absolute; right: -2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink-3); box-shadow: var(--shadow-1); }
.prop-lockmark .ic { width: 14px; height: 14px; }
.prop.locked b { color: var(--ink-3); }
.prop-lock { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--line-2); color: var(--ink-3); }
.xp-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; font-size: 13.5px; }
.xp-table div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.xp-table b { color: var(--blue); }
.diary { font-size: 14.5px; line-height: 1.8; background: repeating-linear-gradient(transparent 0 25px, var(--line-2) 25px 26px); padding: 2px 4px; }
.diary p { min-height: 26px; }

/* ───────── 16. 공유 받은 것 ───────── */
.share-item { display: flex; gap: 12px; align-items: flex-start; }
.share-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-softer); color: var(--blue); }
.share-icon .ic { width: 22px; height: 22px; }
.share-item .grow { flex: 1; min-width: 0; }
.share-preview { font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; max-height: 5.2em; overflow: hidden; margin-top: 4px; }
.share-item audio { width: 100%; margin-top: 8px; height: 36px; }
.share-item .thumb { max-width: 160px; max-height: 120px; border-radius: 10px; margin-top: 8px; border: 1px solid var(--line); }

/* ───────── 17. 움직임 줄이기 ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media print { .nav, .topbar, .tabbar, .toptabs, .banners, .demo-band { display: none !important; } .app { display: block !important; } }