/* ==========================================================================
   FSM Design Template  v1
   --------------------------------------------------------------------------
   nlook `apps/books` 의 디자인 언어(흑백 "잉크" 톤 · Pretendard · 타입 스케일 · 둥근 모서리)를
   FSM 관리 화면에 맞게 옮긴 템플릿이다. 화면(ui/docs/console)은 이 파일 하나를 공유한다.

   ▸ 값은 모두 토큰(CSS 변수)이다 — 색·글자·모서리는 여기서만 고친다.
   ▸ 색은 HSL 삼중값(`H S% L%`)으로 선언하고 `hsl(var(--x))` / `hsl(var(--x) / .12)` 로 쓴다.
   ▸ 타입 스케일은 크기·행간·자간을 한 클래스에 묶었다(`t-*`). 굵기와 색은 일부러 묶지 않았다.
   ▸ 기존 화면 코드가 쓰는 짧은 이름(--bg, --ink, --mute …)은 맨 아래 "호환 별칭" 으로 이어 둔다.
   사용법은 design/README.md.
   ========================================================================== */
@import url("./fonts/pretendard/pretendard-dynamic-subset.css");

/* ── 1. 토큰 ───────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;
  /* 면 */
  --background:0 0% 98%;      /* 앱 바탕 — 카드(흰 면)가 떠 보이도록 한 단 어둡게 */
  --foreground:0 0% 8%;
  --card:0 0% 100%;
  --card-foreground:0 0% 8%;
  --popover:0 0% 100%;
  --muted:0 0% 96%;
  --muted-foreground:0 0% 38%;
  --accent:0 0% 94%;          /* hover 면 */
  --border:0 0% 90%;
  --input:0 0% 86%;
  --ring:0 0% 30%;
  /* 잉크: 라이트에서 활성은 먹 면 + 흰 글자 */
  --primary:0 0% 9%;
  --primary-foreground:0 0% 100%;
  /* 의미색 — 채움은 12% 투명, 글자는 -fg(대비 확보) */
  --success:142 60% 38%;  --success-fg:142 62% 26%;
  --warning:38 92% 46%;   --warning-fg:32 90% 30%;
  --destructive:0 72% 51%; --destructive-fg:0 70% 42%;
  --info:228 62% 52%;     --info-fg:228 56% 40%;
  --neutral:220 9% 46%;   --neutral-fg:220 9% 34%;
  /* 데이터 색(통계·도면 상태). books 의 data-1~5 */
  --data-1:228 48% 56%; --data-2:172 42% 38%; --data-3:32 64% 50%; --data-4:340 42% 55%; --data-5:262 34% 58%;
  --brand:172 42% 34%;        /* FSM 포인트(도면 선택·링크). 잉크 톤을 해치지 않는 유일한 유채색 */
  /* 모양 */
  --radius:.75rem;
  --shadow-sm:0 1px 2px hsl(0 0% 0% / .05);
  --shadow-md:0 4px 14px -2px hsl(0 0% 0% / .08), 0 2px 4px -2px hsl(0 0% 0% / .05);
  --shadow-lg:0 18px 40px -12px hsl(0 0% 0% / .22);
  --nav-w:16rem; --nav-w-collapsed:4.5rem; --topbar-h:3.75rem;
  /* 글꼴 */
  --font-sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans KR","Malgun Gothic",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --background:0 0% 3%; --foreground:0 0% 96%;
    --card:0 0% 6.5%; --card-foreground:0 0% 96%; --popover:0 0% 8%;
    --muted:0 0% 13%; --muted-foreground:0 0% 66%; --accent:0 0% 15%;
    --border:0 0% 15%; --input:0 0% 20%; --ring:0 0% 70%;
    --primary:0 0% 96%; --primary-foreground:0 0% 8%;
    --success:142 55% 48%; --success-fg:142 60% 66%;
    --warning:38 92% 56%;  --warning-fg:40 92% 68%;
    --destructive:0 72% 62%; --destructive-fg:0 85% 74%;
    --info:228 80% 70%;    --info-fg:228 90% 80%;
    --neutral:220 9% 60%;  --neutral-fg:220 9% 72%;
    --brand:172 50% 55%;
    --shadow-sm:0 1px 2px hsl(0 0% 0% / .5); --shadow-md:0 4px 14px -2px hsl(0 0% 0% / .6); --shadow-lg:0 18px 40px -12px hsl(0 0% 0% / .8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --background:0 0% 3%; --foreground:0 0% 96%;
  --card:0 0% 6.5%; --card-foreground:0 0% 96%; --popover:0 0% 8%;
  --muted:0 0% 13%; --muted-foreground:0 0% 66%; --accent:0 0% 15%;
  --border:0 0% 15%; --input:0 0% 20%; --ring:0 0% 70%;
  --primary:0 0% 96%; --primary-foreground:0 0% 8%;
  --success:142 55% 48%; --success-fg:142 60% 66%;
  --warning:38 92% 56%;  --warning-fg:40 92% 68%;
  --destructive:0 72% 62%; --destructive-fg:0 85% 74%;
  --info:228 80% 70%;    --info-fg:228 90% 80%;
  --neutral:220 9% 60%;  --neutral-fg:220 9% 72%;
  --brand:172 50% 55%;
  --shadow-sm:0 1px 2px hsl(0 0% 0% / .5); --shadow-md:0 4px 14px -2px hsl(0 0% 0% / .6); --shadow-lg:0 18px 40px -12px hsl(0 0% 0% / .8);
}

/* ── 2. 기본 ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-sans);
  font-size:.875rem;line-height:1.6;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  word-break:keep-all;overflow-wrap:break-word;      /* 한글은 어절 단위로 줄바꿈 */
  font-feature-settings:"kern" 1,"liga" 1}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:hsl(var(--brand));text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
code,pre,kbd{font-family:var(--font-mono);font-size:.8em}
code{background:hsl(var(--muted));padding:.1em .38em;border-radius:.375rem}
::selection{background:hsl(var(--primary)/.14)}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:.375rem}
.num,.tnum,td.num{font-variant-numeric:tabular-nums}
.hide{display:none!important}
.mute{color:hsl(var(--muted-foreground))}

/* ── 3. 타입 스케일 (크기·행간·자간을 한 토큰에) ─────────────────────── */
.t-badge{font-size:.625rem;line-height:1.35;letter-spacing:.01em}
.t-overline{font-size:.6875rem;line-height:1.5;letter-spacing:.14em;text-transform:uppercase}
.t-micro{font-size:.75rem;line-height:1.4;letter-spacing:.01em}
.t-meta{font-size:.6875rem;line-height:1.5}
.t-caption{font-size:.8125rem;line-height:1.55;letter-spacing:.005em}
.t-body{font-size:.875rem;line-height:1.65}
.t-item{font-size:.9375rem;line-height:1.5;letter-spacing:-.006em}
.t-section{font-size:1.0625rem;line-height:1.35;letter-spacing:-.014em}
.t-heading{font-size:1.1875rem;line-height:1.3;letter-spacing:-.016em}
.t-screen{font-size:1.375rem;line-height:1.25;letter-spacing:-.02em}
.sm{font-size:.8125rem;line-height:1.55;letter-spacing:.005em}
h1,h2,h3,h4{margin:0;color:hsl(var(--foreground));font-weight:700}
h2{font-size:1.375rem;line-height:1.25;letter-spacing:-.02em;margin-bottom:1rem}
h2 .mute{display:block;margin-top:.3rem;font-size:.8125rem;font-weight:500;letter-spacing:.005em}
h2.row-title{display:flex;align-items:baseline;gap:.75rem}
h3{font-size:1.0625rem;line-height:1.35;letter-spacing:-.014em;margin:1.5rem 0 .625rem;font-weight:650}
label{display:block;font-size:.8125rem;line-height:1.4;font-weight:500;color:hsl(var(--muted-foreground));margin:.75rem 0 .3rem;letter-spacing:.005em}

/* ── 4. 앱 셸: 사이드바 + 상단바 ──────────────────────────────────────── */
.app{display:flex;min-height:100vh}
.sb{position:sticky;top:0;height:100vh;flex:none;width:var(--nav-w);display:flex;flex-direction:column;
  background:hsl(var(--card));border-right:1px solid hsl(var(--border)/.7);padding:.875rem .75rem;
  transition:width .28s var(--ease-out);z-index:30;overflow:hidden}
.app[data-collapsed="true"] .sb{width:var(--nav-w-collapsed)}
.sb-top{display:flex;align-items:center;justify-content:space-between;height:2.75rem;margin-bottom:.75rem;padding:0 .25rem}
.brand{display:flex;align-items:center;gap:.625rem;min-width:0;color:hsl(var(--foreground))}
.brand:hover{text-decoration:none}
.brand-mark{flex:none;width:2.25rem;height:2.25rem;border-radius:.75rem;background:hsl(var(--primary));color:hsl(var(--primary-foreground));display:grid;place-items:center}
.brand-name{font-size:1.25rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.brand-sub{display:block;font-size:.6875rem;font-weight:500;letter-spacing:.01em;color:hsl(var(--muted-foreground));margin-top:.2rem}
.app[data-collapsed="true"] .sb-top .brand{display:none}
.app[data-collapsed="true"] .sb-top{justify-content:center}
.sb-collapse{flex:none;width:2.25rem;height:2.25rem;border:0;background:transparent;border-radius:.625rem;color:hsl(var(--muted-foreground));cursor:pointer;display:grid;place-items:center;transition:background .15s}
.sb-collapse:hover{background:hsl(var(--foreground)/.06);color:hsl(var(--foreground))}
.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -.25rem;padding:0 .25rem}
.sb-label{display:block;font-size:.75rem;font-weight:600;letter-spacing:.01em;color:hsl(var(--muted-foreground));padding:.9rem .75rem .35rem;white-space:nowrap}
.app[data-collapsed="true"] .sb-label{visibility:hidden;height:.75rem;padding:.4rem 0;overflow:hidden}
.nav-item{position:relative;display:flex;align-items:center;gap:.75rem;height:2.75rem;padding:0 .75rem;margin-bottom:.125rem;border-radius:.75rem;
  color:hsl(var(--foreground)/.72);font-size:.9375rem;font-weight:550;letter-spacing:-.006em;line-height:1;white-space:nowrap;
  transition:background .15s,color .15s}
.nav-item:hover{background:hsl(var(--foreground)/.05);color:hsl(var(--foreground));text-decoration:none}
.nav-item.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.nav-item svg{flex:none;width:1.25rem;height:1.25rem}
.nav-badge{margin-left:auto;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:99px;display:inline-grid;place-items:center;
  font-size:.75rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;background:hsl(var(--destructive));color:#fff}
.nav-item.on .nav-badge{background:hsl(var(--primary-foreground));color:hsl(var(--primary))}
.app[data-collapsed="true"] .nav-item{justify-content:center;padding:0;width:2.75rem;height:2.75rem;margin:0 auto .25rem;border-radius:99px}
.app[data-collapsed="true"] .nav-text,.app[data-collapsed="true"] .nav-badge{display:none}
.app[data-collapsed="true"] .nav-item.has-badge::after{content:"";position:absolute;right:.45rem;top:.45rem;width:.4rem;height:.4rem;border-radius:99px;background:hsl(var(--destructive))}
.sb-foot{border-top:1px solid hsl(var(--border)/.7);padding-top:.75rem;margin-top:.5rem;position:relative}
.live{display:flex;align-items:center;gap:.5rem;padding:0 .75rem;height:1.75rem;font-size:.75rem;color:hsl(var(--muted-foreground));white-space:nowrap}
.live i{flex:none;width:.5rem;height:.5rem;border-radius:99px;background:hsl(var(--neutral))}
.live.on i{background:hsl(var(--success));box-shadow:0 0 0 3px hsl(var(--success)/.18)}
.app[data-collapsed="true"] .live{justify-content:center;padding:0}.app[data-collapsed="true"] .live span{display:none}
.user{display:flex;align-items:center;gap:.625rem;width:100%;height:2.75rem;padding:0 .625rem;border:0;background:transparent;border-radius:.75rem;cursor:pointer;text-align:left;transition:background .15s}
.user:hover{background:hsl(var(--foreground)/.05)}
.avatar{flex:none;width:1.75rem;height:1.75rem;border-radius:99px;background:hsl(var(--muted));display:grid;place-items:center;font-size:.8125rem;font-weight:700}
.user-text{min-width:0;flex:1;line-height:1.25}.user-name{display:block;font-size:.875rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-role{display:block;font-size:.6875rem;color:hsl(var(--muted-foreground))}
.app[data-collapsed="true"] .user-text{display:none}.app[data-collapsed="true"] .user{justify-content:center;padding:0}
.menu{position:absolute;left:0;bottom:calc(100% + .5rem);min-width:15rem;background:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:1rem;padding:.375rem;box-shadow:var(--shadow-lg);z-index:40}
.app[data-collapsed="true"] .menu{left:.25rem}
.menu button,.menu a{display:flex;align-items:center;gap:.75rem;width:100%;min-height:2.5rem;padding:0 .75rem;border:0;background:transparent;border-radius:.625rem;font-size:.9375rem;font-weight:500;color:hsl(var(--foreground));cursor:pointer;text-align:left}
.menu button:hover,.menu a:hover{background:hsl(var(--foreground)/.05);text-decoration:none}
.menu svg{width:1.125rem;height:1.125rem;color:hsl(var(--muted-foreground))}
.menu hr{border:0;border-top:1px solid hsl(var(--border));margin:.375rem .25rem}
.menu .seg{margin:.25rem .5rem .375rem;display:flex}.menu .seg button{flex:1;justify-content:center;min-height:2rem;font-size:.8125rem;border-radius:.5rem}

.shell{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;height:var(--topbar-h);display:flex;align-items:center;gap:1rem;padding:0 max(2rem,calc((100% - 90rem)/2 + 2rem));
  background:hsl(var(--background)/.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid hsl(var(--border)/.7)}
.crumbs{display:flex;align-items:center;gap:.5rem;min-width:0;font-size:.875rem;color:hsl(var(--muted-foreground));white-space:nowrap}
.crumbs a{color:inherit}.crumbs a:hover{color:hsl(var(--foreground));text-decoration:none}
.crumbs .sep{opacity:.45}.crumbs .cur{color:hsl(var(--foreground));font-weight:650;overflow:hidden;text-overflow:ellipsis}
.topbar .grow{flex:1}
.topbar-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{width:2.25rem;height:2.25rem;border:0;background:transparent;border-radius:.625rem;display:grid;place-items:center;cursor:pointer;color:hsl(var(--foreground)/.8);transition:background .15s}
.icon-btn:hover{background:hsl(var(--foreground)/.06)}.icon-btn svg{width:1.125rem;height:1.125rem}
.mnav-toggle{display:none}
main{flex:1;min-width:0;width:100%;max-width:90rem;margin:0 auto;padding:1.75rem 2rem 5rem}
.mnav{display:none}

/* ── 5. 컴포넌트 ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:2.25rem;padding:0 .95rem;border-radius:.625rem;border:1px solid hsl(var(--input));
  background:hsl(var(--card));color:hsl(var(--foreground));font-size:.875rem;font-weight:550;letter-spacing:-.003em;line-height:1;cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:hsl(var(--accent));text-decoration:none}.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.pri{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.btn.pri:hover{background:hsl(var(--primary)/.88)}
.btn.ok{background:hsl(var(--success));border-color:hsl(var(--success));color:#fff}.btn.ok:hover{background:hsl(var(--success)/.88)}
.btn.bad{background:hsl(var(--destructive));border-color:hsl(var(--destructive));color:#fff}.btn.bad:hover{background:hsl(var(--destructive)/.88)}
.btn.sm{height:1.875rem;padding:0 .7rem;font-size:.8125rem;border-radius:.5rem}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}.btn.ghost:hover{background:hsl(var(--foreground)/.06)}
input,select,textarea{width:100%;height:2.5rem;padding:0 .75rem;border:1px solid hsl(var(--input));border-radius:.625rem;background:hsl(var(--card));
  font-size:.9375rem;transition:border-color .15s,box-shadow .15s}
textarea{height:auto;padding:.6rem .75rem;line-height:1.55}
input[type=checkbox],input[type=radio]{width:auto;height:auto;accent-color:hsl(var(--primary))}
input[type=date],input[type=month]{padding-right:.5rem}
input::placeholder,textarea::placeholder{color:hsl(var(--muted-foreground)/.7)}
input:hover,select:hover,textarea:hover{border-color:hsl(var(--ring)/.55)}
input:focus,select:focus,textarea:focus{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring)/.16)}
select{appearance:none;-webkit-appearance:none;padding-right:2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center}
.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.125rem 1.25rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)}
.card h3:first-child{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.875rem;margin-bottom:1rem}
.stat{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1rem 1.125rem;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
a:has(>.stat):hover .stat{border-color:hsl(var(--ring)/.5);box-shadow:var(--shadow-md);text-decoration:none}
.stat b{display:block;font-size:1.875rem;line-height:1.15;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:hsl(var(--foreground))}
.stat span{display:block;margin-top:.25rem;font-size:.8125rem;color:hsl(var(--muted-foreground))}
.bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}.bar .grow{flex:1}
.filters{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}.filters>div{min-width:9rem}.filters label{margin:0 0 .3rem}
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:.7rem .875rem;text-align:left;vertical-align:top;font-size:.8125rem;line-height:1.5;border-bottom:1px solid hsl(var(--border)/.7)}
th{font-weight:600;font-size:.75rem;letter-spacing:.01em;color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.5);white-space:nowrap;position:sticky;top:0}
th:first-child{border-top-left-radius:.5rem}th:last-child{border-top-right-radius:.5rem}
tr:last-child td{border-bottom:0}
td b{font-weight:650}
tr.click{cursor:pointer;transition:background .12s}tr.click:hover td{background:hsl(var(--accent)/.7)}
.badge{display:inline-flex;align-items:center;gap:.3rem;height:1.375rem;padding:0 .6rem;border-radius:99px;font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.005em;white-space:nowrap}
.b-ok{background:hsl(var(--success)/.13);color:hsl(var(--success-fg))}
.b-bad{background:hsl(var(--destructive)/.12);color:hsl(var(--destructive-fg))}
.b-warn{background:hsl(var(--warning)/.16);color:hsl(var(--warning-fg))}
.b-info{background:hsl(var(--info)/.12);color:hsl(var(--info-fg))}
.b-idle{background:hsl(var(--neutral)/.13);color:hsl(var(--neutral-fg))}
.prog{height:.4375rem;background:hsl(var(--muted));border-radius:99px;overflow:hidden;min-width:5.5rem}.prog i{display:block;height:100%;background:hsl(var(--success));border-radius:99px;transition:width .4s var(--ease-out)}
.chips{display:flex;gap:.375rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.3rem;height:1.875rem;padding:0 .8rem;border:1px solid hsl(var(--border));border-radius:99px;background:hsl(var(--card));font-size:.8125rem;font-weight:550;color:hsl(var(--foreground)/.82);cursor:pointer;transition:background .15s,border-color .15s}
.chip:hover{background:hsl(var(--accent));text-decoration:none}
.chip.on{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.seg{display:inline-flex;padding:.1875rem;background:hsl(var(--muted));border-radius:.75rem;gap:.125rem}
.seg button{height:1.875rem;padding:0 .8rem;border:0;background:transparent;border-radius:.5625rem;font-size:.8125rem;font-weight:550;color:hsl(var(--muted-foreground));cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.seg button:hover{color:hsl(var(--foreground))}
.seg button.on{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:var(--shadow-sm)}
.kv{display:grid;grid-template-columns:5.5rem 1fr;gap:.375rem .75rem;font-size:.875rem}.kv dt{color:hsl(var(--muted-foreground));font-size:.8125rem}.kv dd{margin:0}
.flow{display:flex;gap:.25rem;flex-wrap:wrap}.flow span{font-size:.75rem;font-weight:600;padding:.28rem .7rem;border-radius:99px;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.flow span.done{background:hsl(var(--success)/.13);color:hsl(var(--success-fg))}.flow span.cur{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}.flow span.ret{background:hsl(var(--destructive)/.12);color:hsl(var(--destructive-fg))}
.tl{border-left:2px solid hsl(var(--border));margin-left:.4rem;padding-left:1rem}.tl div{position:relative;padding:.3rem 0;font-size:.875rem}.tl div::before{content:"";position:absolute;left:-1.34rem;top:.78rem;width:.5rem;height:.5rem;border-radius:50%;background:hsl(var(--foreground));box-shadow:0 0 0 3px hsl(var(--background))}

/* 모달·토스트 */
#modal{position:fixed;inset:0;background:hsl(0 0% 0% / .5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:6vh 1rem;overflow:auto;z-index:60}
#modal .box{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1.25rem;padding:1.375rem 1.5rem;width:100%;max-width:35rem;box-shadow:var(--shadow-lg);animation:pop .22s var(--ease-out)}
#modal.wide .box{max-width:48rem}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
#toast{position:fixed;right:1.25rem;bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem;z-index:70}
#toast div{white-space:pre-line;background:hsl(var(--primary));color:hsl(var(--primary-foreground));padding:.7rem 1rem;border-radius:.875rem;font-size:.875rem;max-width:24rem;box-shadow:var(--shadow-lg);animation:pop .22s var(--ease-out)}
#toast div.err{background:hsl(var(--destructive));color:#fff}

/* 진행 표시줄 */
#prog{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,hsl(var(--brand)),hsl(var(--info)),hsl(var(--brand)));background-size:200% 100%;animation:pg 1s linear infinite;opacity:0;transition:opacity .15s;z-index:80}
@keyframes pg{to{background-position:-200% 0}}

/* 로그인 */
.login{min-height:100vh;display:grid;place-items:center;padding:1rem;background:hsl(var(--background))}
.login form{width:100%;max-width:22rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1.25rem;padding:1.75rem;box-shadow:var(--shadow-md)}
.login .brand{margin-bottom:1.25rem}

/* ── 6. 반응형 ────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .sb{display:none}
  .card,.dpanel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:34rem}
  .shell{min-width:0;width:100%}
  .topbar{padding:0 1rem}main{padding:1.125rem 1rem 6rem}
  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;height:3.75rem;background:hsl(var(--card)/.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid hsl(var(--border));padding:.25rem .25rem calc(.25rem + env(safe-area-inset-bottom));overflow-x:auto}
  .mnav a{flex:1 0 3.9rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font-size:.6875rem;font-weight:600;color:hsl(var(--muted-foreground));border-radius:.75rem;position:relative}
  .mnav a svg{width:1.3rem;height:1.3rem}.mnav a.on{color:hsl(var(--foreground));background:hsl(var(--accent))}
  .mnav a:hover{text-decoration:none}
}

/* ── 7. 호환 별칭 — 기존 화면 코드가 쓰는 짧은 이름 ──────────────────── */
:root{
  --bg:hsl(var(--background)); --card-bg:hsl(var(--card)); --ink:hsl(var(--foreground)); --mute:hsl(var(--muted-foreground));
  --line:hsl(var(--border)); --acc:hsl(var(--brand)); --accbg:hsl(var(--brand)/.1);
  --ok:hsl(var(--success-fg)); --okbg:hsl(var(--success)/.13); --bad:hsl(var(--destructive-fg)); --badbg:hsl(var(--destructive)/.12);
  --warn:hsl(var(--warning-fg)); --warnbg:hsl(var(--warning)/.16); --info-c:hsl(var(--info-fg)); --infobg:hsl(var(--info)/.12);
  --idle:hsl(var(--neutral-fg)); --idlebg:hsl(var(--neutral)/.13);
}