@import url("./tokens.css");

/* ───────── 바탕 ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { overflow-x: hidden; } /* 화면 안 표·탭은 자체 가로 스크롤 — 문서 전체는 옆으로 밀리지 않게 */
body {
  font-family: var(--font); font-size: var(--fs); line-height: 1.5; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 1;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: var(--s2); }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.wrap { flex-wrap: wrap; }

/* ───────── 가상 데이터 띠 ───────── */
.demo-band {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 28px; padding: 4px var(--s3); text-align: center; line-height: 1.35; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
  color: var(--warn-text); background: var(--warn-soft); border-bottom: 1px solid color-mix(in oklab, var(--warn) 30%, transparent);
}
.demo-band .db-short { display: none; }
@media (max-width: 600px) { .demo-band { white-space: nowrap; overflow: hidden; } .demo-band .db-long { display: none; } .demo-band .db-short { display: inline; } } /* 폰: 한 줄 */
.demo-band .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); animation: m-breathe calc(var(--t-ambient) * 1.5) ease-in-out var(--m-loop); } /* 시험 모드 표시: 아주 느린 호흡 */

/* ───────── 버튼 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: var(--fs); cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(0.97); } /* 누름: 살짝 눌림 */
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--muted-soft); }
.btn-sm { height: 30px; padding: 0 10px; font-size: var(--fs-sm); }
.btn-lg { height: 44px; padding: 0 18px; font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────── 입력 ───────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.field .hint { font-size: var(--fs-xs); color: var(--text-3); }
.field .err { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; }
.input, .select, .textarea {
  height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%;
}
.textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.input:hover, .select:hover { border-color: color-mix(in oklab, var(--line-strong) 60%, var(--text-3)); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 64px; }
.pw-wrap .pw-toggle { position: absolute; right: 6px; top: 5px; }
.meter { height: 4px; border-radius: 2px; background: var(--muted-soft); overflow: hidden; }
.meter > i { display: block; height: 100%; width: 100%; background: var(--danger); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform var(--t-slow) var(--ease-out), background var(--t); } /* 진행은 transform 으로만(setBar) */

/* ───────── 카드·칩·뱃지 ───────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.card-pad { padding: var(--s5); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.card-head h2, .card-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; word-break: keep-all; } /* 폰에서 제목이 글자 단위로 꺾이지 않게: 줄이 모자라면 제목이 줄째로 아래로 내려간다 */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: var(--fs-xs);
  font-weight: 600; background: var(--muted-soft); color: var(--text-2); white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-new { background: var(--new-soft); color: var(--new-text); }
.chip-re { background: var(--re-soft); color: var(--re-text); }
.chip-inflow { background: var(--inflow-soft); color: var(--inflow-text); }
.chip-clear { background: var(--clear-soft); color: var(--clear-text); }
.chip-warn { background: var(--warn-soft); color: var(--warn-text); }
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-teal { background: var(--teal-soft); color: var(--teal); }
.chip-toggle { cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); }
.chip-toggle[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }

/* ───────── 표 ───────── */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 600; color: var(--text-3); font-size: var(--fs-xs); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
/* 노트북 폭(≤1320px)에서 넓은 표가 가로로 밀리지 않게 칸 여백을 줄인다 */
@media (max-width: 1320px) and (min-width: 901px) { .table-wrap .table th, .table-wrap .table td { padding-left: 7px; padding-right: 7px; } .table-wrap .b2-th { padding-left: 7px; padding-right: 7px; } }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }

/* ───────── 빈 상태·뼈대 ───────── */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s10) var(--s5); color: var(--text-3); text-align: center; }
.empty svg { width: 40px; height: 40px; opacity: 0.6; }
.skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--muted-soft), var(--surface-2), var(--muted-soft)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ───────── 알림창(실패) · 토스트(성공) ───────── */
.dialog-backdrop { position: fixed; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); display: grid; place-items: center; z-index: 100; padding: var(--s4); animation: fade var(--t) var(--ease-out); }
.dialog {
  width: min(440px, 100%); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); border: 1px solid var(--line);
  padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); animation: pop var(--t-slow) var(--ease-spring);
}
/* 실패 알림창: 올라온 뒤 짧게 한 번 흔들림(초당 3회 미만) */
.dialog.m-err { animation: pop var(--t-slow) var(--ease-spring), m-shake var(--t-slow) var(--ease) var(--t) 1; }
.dialog .d-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }
.dialog .d-icon.info { background: var(--accent-soft); color: var(--accent); }
.dialog h2 { margin: 0; font-size: var(--fs-lg); }
.dialog p { margin: 0; color: var(--text-2); }
.dialog .d-fix { background: var(--surface-sunken); border-radius: var(--r); padding: var(--s3) var(--s4); font-size: var(--fs-sm); }
.dialog .d-fix b { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 2px; }
.dialog .d-actions { display: flex; justify-content: flex-end; gap: var(--s2); }
.dialog .d-meta { font-size: var(--fs-xs); color: var(--text-3); font-family: var(--mono); }
.toast-host { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%); z-index: 110; display: flex; flex-direction: column; gap: var(--s2); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: var(--s2); padding: 10px 16px; border-radius: 999px; background: var(--primary); color: var(--primary-fg);
  font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--shadow-3); animation: rise var(--t-slow) var(--ease-spring);
}
/* 성공: 체크가 그려진다 */
.toast .ok { animation: pop var(--t) var(--ease-spring) var(--t-fast) backwards; }
.toast .ok path, .m-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: m-draw var(--t-slow) var(--ease-out) var(--t) forwards; }
.toast .ok { width: 18px; height: 18px; border-radius: 50%; background: var(--clear); display: grid; place-items: center; }
.toast.leaving, .m-leave { animation: sink var(--t-exit) var(--ease) forwards; pointer-events: none; } /* 나가는 중에는 클릭을 가로막지 않는다 */
.dialog-backdrop.m-hidden { visibility: hidden; } /* 다른 창이 위에 뜨는 동안 잠시 숨김 */
.dialog-backdrop.m-leave { animation: fade var(--t-exit) var(--ease) reverse forwards; pointer-events: none; }
.dialog-backdrop.m-leave .dialog { animation: sink var(--t-exit) var(--ease) forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes sink { to { opacity: 0; transform: translateY(8px); } }

/* ───────── 인증 화면 ───────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-art {
  position: relative; overflow: hidden; color: #e9eef6; padding: var(--s10);
  background: radial-gradient(120% 90% at 0% 0%, #22395c 0%, #14233a 48%, #0b1524 100%);
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-art .brand { display: flex; align-items: center; gap: var(--s3); font-weight: 700; font-size: var(--fs-md); }
.logo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, #3bb3a6, #2f6fdb); box-shadow: 0 6px 20px -6px rgb(59 179 166 / 0.6); }
.auth-art h1 { font-size: 34px; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 var(--s3); font-weight: 750; }
.auth-art p { margin: 0; color: #a9b6c9; max-width: 440px; }
.ward-map { width: 100%; max-width: 520px; height: auto; margin: var(--s8) 0; }
.ward-map .room { fill: rgb(255 255 255 / 0.05); stroke: rgb(255 255 255 / 0.14); }
.ward-map .room.iso { stroke: rgb(59 179 166 / 0.55); }
.ward-map .bed { fill: rgb(255 255 255 / 0.16); }
.ward-map .pulse { transform-box: fill-box; transform-origin: center; animation: pulse var(--t-ambient) var(--ease-out) var(--m-loop); }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.9; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
.auth-legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-xs); color: #a9b6c9; }
.auth-legend span { display: inline-flex; align-items: center; gap: 6px; }
.auth-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.auth-main { display: grid; place-items: center; padding: var(--s8) var(--s5); background: var(--bg); }
.auth-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s5); }
.auth-card h2 { margin: 0; font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.auth-card .sub { margin: 4px 0 0; color: var(--text-2); }
.auth-card form { display: flex; flex-direction: column; gap: var(--s4); }
.auth-switch { text-align: center; font-size: var(--fs-sm); color: var(--text-2); }
.notice { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--accent-soft); color: var(--text); font-size: var(--fs-sm); }
.notice.owner { background: var(--teal-soft); }
.notice svg { flex: none; margin-top: 2px; }
.steps { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: var(--s3); align-items: flex-start; }
.steps .n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; background: var(--muted-soft); color: var(--text-2); }
.steps li.done .n { background: var(--clear); color: #fff; }
.steps li.now .n { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }

/* ───────── 앱 틀 ───────── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s3);
  background: var(--brand); color: #cfd8e6;
}
.side .brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s1) var(--s2); color: #fff; font-weight: 700; }
.side .brand small { display: block; font-weight: 500; color: #8a9ab2; font-size: var(--fs-xs); }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: var(--r); background: rgb(255 255 255 / 0.06); }
.modes button { height: 28px; border: 0; border-radius: 7px; background: transparent; color: #a9b6c9; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.modes button[aria-pressed="true"] { background: rgb(255 255 255 / 0.12); color: #fff; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: var(--s3); height: 36px; padding: 0 var(--s3); border-radius: var(--r-sm); color: #cfd8e6;
  font-weight: 500; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); position: relative;
}
.nav a:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.nav a[aria-current="page"] { background: rgb(255 255 255 / 0.1); color: #fff; font-weight: 650; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: #3bb3a6; }
.nav .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--new); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.nav-label { font-size: 11px; font-weight: 700; color: #6e7f98; letter-spacing: 0.04em; padding: var(--s2) var(--s3) 0; }
.side .me { margin-top: auto; display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r); background: rgb(255 255 255 / 0.04); }
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); background: linear-gradient(140deg, #3bb3a6, #2f6fdb); color: #fff; }
.side .me .who { min-width: 0; flex: 1; }
.side .me .who b { display: block; color: #fff; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .me .who span { font-size: var(--fs-xs); color: #8a9ab2; }
.side .me .btn-ghost { color: #a9b6c9; }
.main { min-width: 0; display: flex; flex-direction: column; overflow-x: clip; } /* 진입 모션 중 잠깐 생기는 가로 넘침이 문서 가로 스크롤로 번지지 않게(clip 은 스크롤 영역을 만들지 않아 sticky 에 영향 없음) */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--header-h); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s6); background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
.topbar .crumb { color: var(--text-3); font-size: var(--fs-sm); }
.content { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); max-width: 1440px; width: 100%; }
.menu-btn { display: none; }
.page-enter { animation: pageIn var(--t-slow) var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }

/* ───────── 사용자 관리 ───────── */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); }
.tabs button { position: relative; height: 40px; padding: 0 var(--s3); border: 0; background: none; color: var(--text-2); font-weight: 600; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--text); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--text); border-radius: 2px; }
.tabs .count { margin-left: 6px; color: var(--text-3); font-weight: 600; }
.user-cell { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.user-cell b { display: block; }
.user-cell span { font-size: var(--fs-xs); color: var(--text-3); }
.drawer-backdrop { position: fixed; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 90; animation: fade var(--t); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); z-index: 91; background: var(--surface); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; animation: slideIn var(--t-slow) var(--ease-out);
}
/* 폰: 서랍은 아래에서 올라오는 시트(위 모서리 둥글게) */
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } }
@media (max-width: 600px) { .drawer { top: auto; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheetUp var(--t-slow) var(--ease-spring); } }
.drawer header { padding: var(--s5); border-bottom: 1px solid var(--line); display: flex; gap: var(--s3); align-items: flex-start; }
.drawer header h2 { margin: 0; font-size: var(--fs-lg); }
.drawer .body { flex: 1; overflow: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
.drawer footer { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.choice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.choice:hover { background: var(--surface-2); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice b { display: block; font-size: var(--fs-sm); }
.choice span { font-size: var(--fs-xs); color: var(--text-3); }
.ward-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.ward-grid .chip-toggle { justify-content: center; height: 32px; border-radius: var(--r-sm); }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.stat { padding: var(--s4) var(--s5); }
.stat .label { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.stat .value { font-size: var(--fs-3xl); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; margin-top: 4px; }
.stat .value small { font-size: var(--fs-md); color: var(--text-3); font-weight: 600; margin-left: 2px; }

/* ───────── 폰(390px) ───────── */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { padding: var(--s6) var(--s5); min-height: 0; }
  .auth-art h1 { font-size: 24px; }
  .ward-map { margin: var(--s4) 0 0; max-height: 150px; }
  .auth-legend { display: none; }
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 60; width: min(280px, 86vw); transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-out); }
  .side.open { transform: none; box-shadow: var(--shadow-3); }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 var(--s4); }
  .content { padding: var(--s4); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-grid { grid-template-columns: 1fr; }
  .table.responsive thead { display: none; }
  .table.responsive tr { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .table.responsive td { border: 0; padding: 0; }
  .table.responsive td[data-wide] { grid-column: 1 / -1; }
}

/* ───────── 모션 언어: 설정(ui.motion_level)·OS 움직임 줄이기 ───────── */
:root[data-motion="calm"] { --m-loop: 3; }
/* 배경 흐림은 저사양에서 비싸다: 「차분하게」·「끔」·동작 줄이기·설정 끔이면 흐림 없이 어둡게만 */
:root[data-blur="off"] .dialog-backdrop, :root[data-blur="off"] .drawer-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .dialog-backdrop, .drawer-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
/* 진행 표시(돌아가는 고리·막대)는 「끔」에서도 돈다: 일이 진행 중이라는 정보이기 때문 */
:root[data-motion="off"] :is(.btn .spin, .imp-spinner) { animation-duration: 0.7s !important; animation-iteration-count: infinite !important; }
:root[data-motion="off"] .imp-bar.indeterminate > i { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* 공용 키프레임(화면 CSS 는 이름만 가져다 쓴다): fade·pop·rise·sink·pageIn·slideIn 위, 아래는 반복·강조 */
@keyframes m-blink { 50% { opacity: 0.25; } }
@keyframes m-ring { 0% { transform: scale(0.9); opacity: 0.9; } 70%, 100% { transform: scale(2); opacity: 0; } }
@keyframes m-grow-x { from { transform: scaleX(0); } }
@keyframes m-dash { to { stroke-dashoffset: -18; } }
@keyframes m-draw { to { stroke-dashoffset: 0; } }
@keyframes m-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }
@keyframes m-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes m-soft { 0%, 100% { opacity: 0; } 50% { opacity: 0.85; } }
@keyframes m-sharp { 0%, 55%, 100% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1.015); } }
@keyframes m-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* 상태 표시(의미가 다르게): 주의 = 부드러운 맥동, 위험 = 선명한 맥동 + 테두리. 겉 테두리 고리(::after)의 opacity·transform 만 움직인다 */
.m-alert-warn, .m-alert-danger, .m-new { position: relative; }
.m-alert-warn::after, .m-alert-danger::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; border: 1.5px solid var(--warn); opacity: 0; animation: m-soft calc(var(--t-ambient) * 1.25) ease-in-out var(--m-loop); }
.m-alert-danger { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger) 55%, transparent); }
.m-alert-danger::after { border: 2px solid var(--danger); animation: m-sharp var(--t-ambient) var(--ease-out) var(--m-loop); }
/* 차례 등장(공용): stagger() 가 --i 를 매긴다 */
.m-rise { animation: rise var(--t-slow) var(--ease-spring) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
/* 새로 생긴 항목: 들어오며 잠깐 밝게 */
.m-new::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--accent-soft); opacity: 0; animation: m-flash calc(var(--t-ambient) * 0.75) var(--ease-out) 1; }
:root[data-motion="off"] :is(.m-alert-warn, .m-alert-danger)::after { animation: none; opacity: 0.7; } /* 움직임 끔: 고리는 멈춘 채 보인다 */
@media (prefers-reduced-motion: reduce) { :is(.m-alert-warn, .m-alert-danger)::after { animation: none !important; opacity: 0.7; } }

/* 화면 전환(View Transitions): 머리줄·메뉴는 그대로, 본문만 나가는 화면을 짧게 흐린다. 들어오는 화면은 각 화면의 pageIn 이 맡는다 */
#content { view-transition-name: page; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(page) { animation: fade var(--t-fast) var(--ease) reverse both; }
::view-transition-new(page) { animation: none; }
::view-transition-group(page) { animation-duration: var(--t-fast); }

@media print {
  .side, .topbar, .demo-band, .toast-host { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}

/* 균 칩: --org 색을 점·테두리에 */
.chip-org { background: color-mix(in oklab, var(--org, var(--text-3)) 14%, var(--surface)); color: color-mix(in oklab, var(--org, var(--text-3)) 62%, var(--text)); }
.chip-org .dot { background: var(--org, var(--text-3)); }

/* ───────── 사용 설명서 진입점: 메뉴 아래 링크 · 머리줄 「?」 단추 ───────── */
.nav-help { margin-top: auto; padding-top: var(--s2); border-top: 1px solid rgb(255 255 255 / 0.08); }
.nav-help + .me { margin-top: 0; }
.help-btn { color: var(--text-2); gap: 6px; }
.help-btn:hover { color: var(--text); }
@media (max-width: 900px) { .help-btn span { display: none; } .help-btn { width: 36px; padding: 0; } }

/* 감사 로그 머리: 폰에서 제목이 세로로 꺾이지 않게 줄바꿈 */
.aud-sel { width: 200px; }
.aud-head { flex-wrap: wrap; row-gap: var(--s2); }
.aud-head h2 { white-space: nowrap; }
@media (max-width: 600px) { .aud-sel { width: 100%; order: 9; } .aud-head .faint { flex-basis: 100%; order: 3; } }