/*
 * hive 테마 — 하이브 웹의 실제 토큰에서 `make kit-export`가 만든 파일이다(손으로 고치지 않는다).
 *
 * 쓰는 법
 *   1. 이 파일을 불러온다:  <link rel="stylesheet" href="hive-theme.css">
 *   2. <html>에 data-ui="new"를 달면 kit 부품 클래스(.u2-btn·.u2-card …)가 켜진다.
 *   3. 밝기는 <html data-theme="light|dark">(또는 class="dark")로 바꾼다.
 * 토큰 값만 필요하면 hive-tokens.json을 쓴다.
 */

:root,
[data-theme="light"] {
  --background: oklch(0.9821 0 0);
  --foreground: oklch(0.2435 0 0);
  --card: oklch(0.9911 0 0);
  --card-foreground: oklch(0.2435 0 0);
  --primary: oklch(0.4341 0.0392 41.9938);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9200 0.0651 74.3695);
  --secondary-foreground: oklch(0.3499 0.0685 40.8288);
  --muted: oklch(0.9521 0 0);
  --muted-foreground: oklch(0.5032 0 0);
  --accent: oklch(0.9310 0 0);
  --accent-foreground: oklch(0.2435 0 0);
  --destructive: oklch(0.6271 0.1936 33.3390);
  --border: oklch(0.8822 0 0);
  --input: oklch(0.8822 0 0);
  --ring: oklch(0.4341 0.0392 41.9938);
  --sidebar: oklch(0.9881 0 0);
  --sidebar-foreground: oklch(0.2645 0 0);
  --sidebar-accent: oklch(0.9761 0 0);
  --sidebar-accent-foreground: oklch(0.3250 0 0);
  --sidebar-border: oklch(0.9401 0 0);
  --chart-1: oklch(0.4341 0.0392 41.9938);
  --chart-2: oklch(0.9200 0.0651 74.3695);
  --chart-3: oklch(0.9310 0 0);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --success: oklch(0.6 0.16 149);
  --success-foreground: oklch(0.985 0 0);
  --warning: oklch(0.75 0.16 70);
  --warning-foreground: oklch(0.24 0.05 70);
  --info: oklch(0.48 0.14 240);
  --info-foreground: oklch(0.985 0 0);
  --radius: 0.5rem;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

[data-theme="dark"],
.dark {
  --background: oklch(0.1776 0 0);
  --foreground: oklch(0.9491 0 0);
  --card: oklch(0.2134 0 0);
  --card-foreground: oklch(0.9491 0 0);
  --primary: oklch(0.9247 0.0524 66.1732);
  --primary-foreground: oklch(0.2029 0.0240 200.1962);
  --secondary: oklch(0.3163 0.0190 63.6992);
  --secondary-foreground: oklch(0.9247 0.0524 66.1732);
  --muted: oklch(0.2520 0 0);
  --muted-foreground: oklch(0.7699 0 0);
  --accent: oklch(0.2850 0 0);
  --accent-foreground: oklch(0.9491 0 0);
  --destructive: oklch(0.6271 0.1936 33.3390);
  --border: oklch(0.2351 0.0115 91.7467);
  --input: oklch(0.4017 0 0);
  --ring: oklch(0.9247 0.0524 66.1732);
  --sidebar: oklch(0.2103 0.0059 285.8852);
  --sidebar-foreground: oklch(0.9674 0.0013 286.3752);
  --sidebar-accent: oklch(0.2739 0.0055 286.0326);
  --sidebar-accent-foreground: oklch(0.9674 0.0013 286.3752);
  --sidebar-border: oklch(0.2739 0.0055 286.0326);
  --chart-1: oklch(0.9247 0.0524 66.1732);
  --chart-2: oklch(0.3163 0.0190 63.6992);
  --chart-3: oklch(0.2850 0 0);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --success: oklch(0.7 0.15 149);
  --success-foreground: oklch(0.17 0.02 264);
  --warning: oklch(0.8 0.15 75);
  --warning-foreground: oklch(0.2 0.04 70);
  --info: oklch(0.82 0.1 240);
  --info-foreground: oklch(0.17 0.02 264);
}

html[data-ui="new"] body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', "Apple SD Gothic Neo", sans-serif;
}

/* ---- kit 부품 ---- */

html[data-ui="new"] {
  --u2-bg: var(--background);
  --u2-surface: var(--card);
  --u2-sunk: var(--muted);
  --u2-fg: var(--foreground);
  --u2-dim: var(--muted-foreground);
  --u2-line: var(--border);
  --u2-primary: var(--primary);
  --u2-primary-fg: var(--primary-foreground);
  --u2-primary-soft: color-mix(in oklab, var(--primary) 13%, transparent);
  --u2-ok: var(--success);
  --u2-warn: var(--warning);
  --u2-bad: var(--destructive);
  --u2-info: var(--info);
  --u2-human: oklch(0.7 0.14 330);
  --u2-shadow: 0 1px 2px oklch(0.2 0.03 280 / 0.08), 0 8px 22px -10px oklch(0.2 0.03 280 / 0.28);
  --u2-radius: 10px;
  --u2-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ---- 아이콘 ---- */
html[data-ui="new"] svg.u2-i {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 한글 글자의 눈에 보이는 중심은 줄 상자 중심보다 위라, 글자 옆 아이콘을 1px 올려 맞춘다. 아이콘만 있는 상자는 아래에서 되돌린다. */
  position: relative;
  top: -1px;
}
html[data-ui="new"] .u2-btn.icon svg.u2-i,
html[data-ui="new"] .u2-ib svg.u2-i,
html[data-ui="new"] .u2-act.icon svg.u2-i,
html[data-ui="new"] .u2-flag svg.u2-i,
html[data-ui="new"] .u2-av svg.u2-i { top: 0; }

/* ---- 버튼 ---- */
html[data-ui="new"] .u2-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--u2-line);
  background: var(--u2-surface);
  color: var(--u2-fg);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  transition: background 0.12s, filter 0.12s;
}
html[data-ui="new"] .u2-btn:hover { background: var(--u2-sunk); }
html[data-ui="new"] .u2-btn.pri { background: var(--u2-primary); color: var(--u2-primary-fg); border-color: var(--u2-primary); font-weight: 600; }
html[data-ui="new"] .u2-btn.pri:hover { filter: brightness(1.06); }
html[data-ui="new"] .u2-btn.ghost { border-color: transparent; background: transparent; color: var(--u2-dim); }
html[data-ui="new"] .u2-btn.ghost:hover { background: var(--u2-sunk); color: var(--u2-fg); }
html[data-ui="new"] .u2-btn.warn { border-color: color-mix(in oklab, var(--u2-warn) 50%, var(--u2-line)); color: color-mix(in oklab, var(--u2-warn) 65%, var(--u2-fg)); }
html[data-ui="new"] .u2-btn.dang { border-color: color-mix(in oklab, var(--u2-bad) 45%, var(--u2-line)); color: var(--u2-bad); }
html[data-ui="new"] .u2-btn.dang.fill { background: var(--u2-bad); color: #fff; border-color: var(--u2-bad); font-weight: 600; }
html[data-ui="new"] .u2-btn.link { border: 0; background: transparent; color: var(--u2-primary); padding: 0 2px; height: auto; }
html[data-ui="new"] .u2-btn.link:hover { text-decoration: underline; background: transparent; }
html[data-ui="new"] .u2-btn.sm { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 7px; }
html[data-ui="new"] .u2-btn.icon { width: 32px; padding: 0; }
html[data-ui="new"] .u2-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* 바쁜 버튼 — 글자를 바꾸지 않고 스피너와 진행 띠를 얹는다 */
html[data-ui="new"] .u2-btn.busy { color: var(--u2-dim); cursor: progress; }
html[data-ui="new"] .u2-btn.busy::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 40%;
  background: var(--u2-primary);
  border-radius: 2px;
  animation: u2-slide-x 1.1s ease-in-out infinite;
}
html[data-ui="new"] .u2-btn.pri.busy { color: var(--u2-primary-fg); opacity: 0.85; }
html[data-ui="new"] .u2-btn.pri.busy::after { background: var(--u2-primary-fg); }

/* ---- 스피너 ---- */
html[data-ui="new"] .u2-spin {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: u2-spin 0.8s linear infinite;
}

/* ---- 칩 ---- */
html[data-ui="new"] .u2-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--u2-line);
  background: var(--u2-surface);
  color: var(--u2-fg);
  cursor: pointer;
  white-space: nowrap;
  font: inherit;
  font-size: 12px;
}
html[data-ui="new"] .u2-chip:hover { background: var(--u2-sunk); }
html[data-ui="new"] .u2-chip.perm { border-color: color-mix(in oklab, var(--u2-warn) 55%, var(--u2-line)); color: color-mix(in oklab, var(--u2-warn) 62%, var(--u2-fg)); font-weight: 600; }
html[data-ui="new"] .u2-chip.decide { border-color: color-mix(in oklab, var(--u2-primary) 45%, var(--u2-line)); color: var(--u2-primary); font-weight: 600; animation: u2-glow 2.4s ease-in-out infinite; }
html[data-ui="new"] .u2-chip.busy { color: var(--u2-warn); cursor: default; }
html[data-ui="new"] .u2-chip.static { cursor: default; }
html[data-ui="new"] .u2-chip.ok { color: var(--u2-ok); }
html[data-ui="new"] .u2-chip.bad { color: var(--u2-bad); border-color: color-mix(in oklab, var(--u2-bad) 45%, var(--u2-line)); }

/* ---- 알약 ---- */
html[data-ui="new"] .u2-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--u2-sunk);
  color: var(--u2-fg);
  border: 1px solid transparent;
}
html[data-ui="new"] .u2-pill.ok { background: color-mix(in oklab, var(--u2-ok) 16%, transparent); color: color-mix(in oklab, var(--u2-ok) 72%, var(--u2-fg)); }
html[data-ui="new"] .u2-pill.warn { background: color-mix(in oklab, var(--u2-warn) 18%, transparent); color: color-mix(in oklab, var(--u2-warn) 62%, var(--u2-fg)); }
html[data-ui="new"] .u2-pill.bad { background: color-mix(in oklab, var(--u2-bad) 15%, transparent); color: color-mix(in oklab, var(--u2-bad) 75%, var(--u2-fg)); }
html[data-ui="new"] .u2-pill.info { background: color-mix(in oklab, var(--u2-info) 16%, transparent); color: color-mix(in oklab, var(--u2-info) 75%, var(--u2-fg)); }
html[data-ui="new"] .u2-pill.pri { background: var(--u2-primary-soft); color: var(--u2-primary); }
html[data-ui="new"] .u2-pill.line { background: transparent; border-color: var(--u2-line); color: var(--u2-dim); }

/* ---- 세그먼트 ---- */
html[data-ui="new"] .u2-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 9px;
  background: var(--u2-sunk);
  border: 1px solid var(--u2-line);
}
html[data-ui="new"] .u2-seg button {
  border: 0;
  background: transparent;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--u2-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-ui="new"] .u2-seg button[aria-pressed="true"] { background: var(--u2-surface); color: var(--u2-fg); box-shadow: var(--u2-shadow); }
html[data-ui="new"] .u2-seg.compact button { padding: 4px 7px; }

/* ---- 카드·알림 줄 ---- */
html[data-ui="new"] .u2-card { border: 1px solid var(--u2-line); border-radius: 14px; background: var(--u2-surface); padding: 14px; display: grid; gap: 10px; min-width: 0; align-content: start; }
html[data-ui="new"] .u2-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--u2-line); font-size: 12.5px; background: var(--u2-surface); min-width: 0; }
html[data-ui="new"] .u2-alert.warn { background: color-mix(in oklab, var(--u2-warn) 11%, var(--u2-surface)); border-color: color-mix(in oklab, var(--u2-warn) 42%, var(--u2-line)); }
html[data-ui="new"] .u2-alert.bad { background: color-mix(in oklab, var(--u2-bad) 9%, var(--u2-surface)); border-color: color-mix(in oklab, var(--u2-bad) 40%, var(--u2-line)); }
html[data-ui="new"] .u2-alert.info { background: color-mix(in oklab, var(--u2-info) 9%, var(--u2-surface)); border-color: color-mix(in oklab, var(--u2-info) 35%, var(--u2-line)); }
html[data-ui="new"] .u2-alert.ok { background: color-mix(in oklab, var(--u2-ok) 9%, var(--u2-surface)); border-color: color-mix(in oklab, var(--u2-ok) 35%, var(--u2-line)); }

/* ---- 대화상자 / 판 ---- */
html[data-ui="new"] .u2-scrim { position: fixed; inset: 0; z-index: 60; background: oklch(0.2 0.05 282 / 0.38); backdrop-filter: blur(2px); animation: u2-fade 0.2s ease both; }
html[data-ui="new"] .u2-dlg {
  position: fixed;
  left: 50%;
  top: 12vh;
  z-index: 61;
  translate: -50% 0;
  width: min(560px, calc(100vw - 24px));
  max-height: 80vh;
  border: 1px solid var(--u2-line);
  border-radius: 16px;
  background: var(--u2-surface);
  color: var(--u2-fg);
  box-shadow: 0 24px 60px -22px oklch(0.2 0.06 282 / 0.45);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  animation: u2-dlg-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-ui="new"] .u2-dlg-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 14px 16px 10px; align-items: start; }
html[data-ui="new"] .u2-dlg-h h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; font-weight: 600; }
html[data-ui="new"] .u2-dlg-h p { margin: 0; grid-column: 1; color: var(--u2-dim); font-size: 12px; }
html[data-ui="new"] .u2-dlg-h .x { grid-row: 1 / 3; grid-column: 2; }
html[data-ui="new"] .u2-dlg-b { padding: 2px 16px 14px; display: grid; gap: 12px; align-content: start; min-width: 0; overflow: auto; }
html[data-ui="new"] .u2-dlg-f { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--u2-line); background: var(--u2-sunk); align-items: center; flex-wrap: wrap; }
html[data-ui="new"] .u2-dlg.sized { max-width: none; max-height: none; }
html[data-ui="new"] .u2-grip { position: absolute; right: 3px; bottom: 3px; z-index: 2; width: 14px; height: 14px; color: var(--u2-dim); opacity: 0.7; cursor: nwse-resize; touch-action: none; border-radius: 4px; }
html[data-ui="new"] .u2-grip:hover, html[data-ui="new"] .u2-grip:focus-visible { opacity: 1; outline: none; color: var(--u2-primary); }
html[data-ui="new"] .u2-grip svg { width: 100%; height: 100%; }
html[data-ui="new"] .u2-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 61;
  width: min(420px, 100vw);
  background: var(--u2-surface);
  color: var(--u2-fg);
  border-left: 1px solid var(--u2-line);
  box-shadow: var(--u2-shadow);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  animation: u2-side-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-ui="new"] .u2-panel.left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--u2-line); animation-name: u2-side-in-l; }
html[data-ui="new"] .u2-sheet-b {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  max-height: 80vh;
  background: var(--u2-surface);
  color: var(--u2-fg);
  border: 1px solid var(--u2-line);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--u2-shadow);
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
  overflow: auto;
  animation: u2-sheet 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-ui="new"] .u2-sheet-b .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--u2-line); justify-self: center; }

/* ---- 툴팁 (CSS 전용 — 올리거나 초점이 오면 0.3초 뒤 뜬다) ---- */
html[data-ui="new"] .u2-tt { position: relative; }
html[data-ui="new"] .u2-tt > .u2-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  transform: translate(-50%, -4px) scale(0.97);
  background: var(--u2-fg);
  color: var(--u2-bg);
  font-size: 11px;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 7px;
  width: max-content;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease 0.3s, transform 0.14s ease 0.3s;
  z-index: 70;
  text-align: left;
  font-weight: 400;
}
html[data-ui="new"] .u2-tt.right > .u2-tip { left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%) scale(0.97); }
html[data-ui="new"] .u2-tt:hover > .u2-tip,
html[data-ui="new"] .u2-tt:focus-within > .u2-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
html[data-ui="new"] .u2-tt.right:hover > .u2-tip,
html[data-ui="new"] .u2-tt.right:focus-within > .u2-tip { transform: translate(0, -50%) scale(1); }

/* ---- 토스트 ---- */
html[data-ui="new"] .u2-toasts { position: fixed; top: 12px; right: 12px; z-index: 80; display: grid; gap: 8px; width: min(340px, calc(100vw - 24px)); pointer-events: none; }
html[data-ui="new"] .u2-toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: var(--u2-surface);
  color: var(--u2-fg);
  border: 1px solid var(--u2-line);
  box-shadow: var(--u2-shadow);
  font-size: 12.5px;
  animation: u2-toast-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-ui="new"] .u2-toast.warn { border-color: color-mix(in oklab, var(--u2-warn) 50%, var(--u2-line)); }
html[data-ui="new"] .u2-toast.bad { border-color: color-mix(in oklab, var(--u2-bad) 50%, var(--u2-line)); }
html[data-ui="new"] .u2-toast .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--u2-primary); transform-origin: left; animation: u2-drain linear forwards; }
html[data-ui="new"] .u2-toast:hover .bar { animation-play-state: paused; }

/* ---- 앱 틀 ---- */
html[data-ui="new"] .u2-app { display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); height: 100%; background: var(--u2-bg); color: var(--u2-fg); font-size: 13px; }
html[data-ui="new"] .u2-rail { grid-row: 1 / 3; position: relative; z-index: 20; background: var(--u2-sunk); border-right: 1px solid var(--u2-line); display: flex; flex-direction: column; align-items: center; padding-block: 12px; gap: 4px; overflow: visible; }
html[data-ui="new"] .u2-logo { width: 30px; height: 30px; margin-bottom: 10px; display: grid; place-items: center; flex: none; }
html[data-ui="new"] .u2-rbtn { position: relative; width: 40px; height: 40px; flex: none; border-radius: 10px; border: 0; background: transparent; color: var(--u2-dim); display: grid; place-items: center; cursor: pointer; text-decoration: none; }
html[data-ui="new"] .u2-rbtn:hover { background: var(--u2-primary-soft); color: var(--u2-fg); }
html[data-ui="new"] .u2-rbtn[aria-current="page"] { background: var(--u2-primary-soft); color: var(--u2-primary); }
html[data-ui="new"] .u2-rbtn[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--u2-primary); }
html[data-ui="new"] .u2-rbtn .cnt { position: absolute; top: 4px; right: 3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; background: var(--u2-primary); color: var(--u2-primary-fg); }
html[data-ui="new"] .u2-rail .sp { flex: 1; min-height: 8px; }
html[data-ui="new"] .u2-worker { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--u2-surface); border: 1px solid var(--u2-line); position: relative; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--u2-primary); padding: 0; }
html[data-ui="new"] .u2-worker .conn { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--u2-ok); border: 2px solid var(--u2-sunk); }
html[data-ui="new"] .u2-worker .conn.connecting { background: var(--u2-warn); animation: u2-breathe 1.2s ease-in-out infinite; }
html[data-ui="new"] .u2-worker .conn.closed { background: var(--u2-bad); }
html[data-ui="new"] .u2-worker .conn.open { animation: u2-halo 2.6s ease-out infinite; }
html[data-ui="new"] .u2-topbar { grid-column: 2; display: flex; align-items: center; gap: 10px; padding-inline: 14px; border-bottom: 1px solid var(--u2-line); background: var(--u2-surface); min-width: 0; }
html[data-ui="new"] .u2-crumb { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; min-width: 0; }
html[data-ui="new"] .u2-crumb .wk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; color: var(--u2-dim); font-weight: 500; cursor: pointer; border: 0; background: transparent; font: inherit; }
html[data-ui="new"] .u2-crumb .wk:hover { background: var(--u2-sunk); }
html[data-ui="new"] .u2-crumb .sep { color: var(--u2-line); }
html[data-ui="new"] .u2-palette { flex: 1; max-width: 440px; margin-inline: auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: var(--u2-sunk); border: 1px solid var(--u2-line); color: var(--u2-dim); cursor: text; min-width: 0; font: inherit; text-align: left; }
html[data-ui="new"] .u2-palette > span:not(.u2-kbd) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .u2-kbd { font-family: var(--u2-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--u2-line); background: var(--u2-surface); color: var(--u2-dim); }
html[data-ui="new"] .u2-status { display: flex; align-items: center; gap: 6px; }
html[data-ui="new"] .u2-bell { position: relative; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--u2-line); background: var(--u2-surface); color: var(--u2-fg); display: grid; place-items: center; cursor: pointer; padding: 0; }
html[data-ui="new"] .u2-bell:hover { background: var(--u2-sunk); }
html[data-ui="new"] .u2-bell .cnt { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--u2-bad); color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; animation: u2-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
html[data-ui="new"] .u2-bell .pdot,
html[data-ui="new"] .u2-m-tab .pdot { position: absolute; bottom: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--u2-info); border: 2px solid var(--u2-surface); }
html[data-ui="new"] .u2-inb-prop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--u2-info) 35%, var(--u2-line)); background: color-mix(in oklab, var(--u2-info) 8%, var(--u2-surface)); color: var(--u2-fg); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
html[data-ui="new"] .u2-inb-prop .go { margin-left: auto; font-weight: 400; color: var(--u2-dim); }
html[data-ui="new"] .u2-bell.ring svg { animation: u2-ring 0.9s ease-in-out; transform-origin: 50% 10%; }
html[data-ui="new"] .u2-main { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
html[data-ui="new"] .u2-main-in { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; margin-inline: auto; width: 100%; padding: 20px; }
html[data-ui="new"] .u2-main-in.w-base { max-width: 1360px; }
html[data-ui="new"] .u2-main-in.w-big { max-width: 1560px; }
html[data-ui="new"] .u2-main-in.w-full { max-width: none; }

/* ---- 모바일 ---- */
html[data-ui="new"] .u2-m { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; background: var(--u2-bg); color: var(--u2-fg); font-size: 13px; }
html[data-ui="new"] .u2-m-top { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--u2-line); background: var(--u2-surface); min-height: 52px; }
html[data-ui="new"] .u2-m-top.thin { min-height: 40px; padding-block: 2px; }
html[data-ui="new"] .u2-m-top .t { flex: 1; min-width: 0; display: grid; }
html[data-ui="new"] .u2-m-top .t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .u2-m-top .t span { font-size: 11px; color: var(--u2-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .u2-m-main { min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 12px; overflow: hidden; }
html[data-ui="new"] .u2-m-tab { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--u2-line); background: var(--u2-surface); height: 56px; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
html[data-ui="new"] .u2-m-tab > * { border: 0; background: transparent; display: grid; place-items: center; align-content: center; gap: 2px; font: inherit; font-size: 10px; color: var(--u2-dim); position: relative; text-decoration: none; cursor: pointer; }
html[data-ui="new"] .u2-m-tab > [aria-current="page"] { color: var(--u2-primary); }
html[data-ui="new"] .u2-m-tab .cnt { position: absolute; top: 5px; left: 50%; margin-left: 6px; min-width: 15px; height: 15px; border-radius: 8px; font-size: 9px; font-weight: 700; display: grid; place-items: center; background: var(--u2-bad); color: #fff; padding: 0 3px; }
html[data-ui="new"] .u2-m-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 10px; color: var(--u2-fg); text-decoration: none; background: transparent; border: 0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
html[data-ui="new"] .u2-m-link:hover,
html[data-ui="new"] .u2-m-link[aria-current="page"] { background: var(--u2-primary-soft); }

/* ---- 입력 부품 ---- */
html[data-ui="new"] .u2-inp,
html[data-ui="new"] .u2-tx,
html[data-ui="new"] .u2-sel select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid var(--u2-line);
  background: var(--u2-bg);
  color: var(--u2-fg);
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
html[data-ui="new"] .u2-tx { padding: 8px 10px; min-height: 62px; resize: vertical; line-height: 1.5; }
html[data-ui="new"] .u2-inp.mono { font-family: var(--u2-mono); font-size: 11.5px; }
html[data-ui="new"] .u2-inp:focus,
html[data-ui="new"] .u2-tx:focus,
html[data-ui="new"] .u2-sel select:focus { border-color: var(--u2-primary); box-shadow: 0 0 0 3px var(--u2-primary-soft); }
html[data-ui="new"] .u2-inp.err { border-color: var(--u2-bad); }
html[data-ui="new"] .u2-inp:disabled,
html[data-ui="new"] .u2-tx:disabled,
html[data-ui="new"] .u2-sel select:disabled { opacity: 0.55; cursor: not-allowed; }
html[data-ui="new"] .u2-inp::placeholder,
html[data-ui="new"] .u2-tx::placeholder { color: var(--u2-dim); }
html[data-ui="new"] .u2-sel { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
html[data-ui="new"] .u2-sel select { appearance: none; padding-right: 28px; cursor: pointer; text-overflow: ellipsis; }
/* 공용 svg.u2-i의 top: -1px을 받으면 상자 맨 위에 붙으므로 세로 가운데를 직접 준다(상자가 inline-flex가 아니어도 맞는다). */
html[data-ui="new"] .u2-sel > svg,
html[data-ui="new"] .u2-sel > svg.u2-i { position: absolute; top: 50%; transform: translateY(-50%); right: 9px; pointer-events: none; color: var(--u2-dim); }
html[data-ui="new"] .u2-fld { display: grid; gap: 5px; min-width: 0; align-content: start; }
html[data-ui="new"] .u2-fld .lb { font-size: 11.5px; font-weight: 600; color: var(--u2-dim); }
html[data-ui="new"] .help { font-size: 11.5px; color: var(--u2-dim); }
html[data-ui="new"] .help.err { color: var(--u2-bad); }
html[data-ui="new"] .u2-chk { position: relative; display: inline-flex; gap: 8px; align-items: flex-start; font-size: 12.5px; cursor: pointer; }
html[data-ui="new"] .u2-chk > input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; }
html[data-ui="new"] .u2-chk > i { width: 16px; height: 16px; border-radius: 5px; flex: none; margin-top: 1px; display: grid; place-items: center; border: 1.5px solid color-mix(in oklab, var(--u2-dim) 50%, var(--u2-line)); background: var(--u2-surface); transition: background 0.15s, border-color 0.15s; }
html[data-ui="new"] .u2-chk.on > i { background: var(--u2-primary); border-color: var(--u2-primary); }
html[data-ui="new"] .u2-chk.on > i::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--u2-primary-fg); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
html[data-ui="new"] .u2-chk > input:focus-visible + i { box-shadow: 0 0 0 3px var(--u2-primary-soft); }
html[data-ui="new"] .u2-chk.dis { opacity: 0.5; cursor: not-allowed; }
html[data-ui="new"] .u2-swrap { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
html[data-ui="new"] .u2-swrap.dis { opacity: 0.5; }
html[data-ui="new"] .u2-sw { width: 28px; height: 16px; border-radius: 9px; border: 0; padding: 0; background: var(--u2-ok); position: relative; flex: none; cursor: pointer; transition: background 0.15s; }
html[data-ui="new"] .u2-sw::after { content: ""; position: absolute; top: 2px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left 0.15s; }
html[data-ui="new"] .u2-sw.off { background: color-mix(in oklab, var(--u2-dim) 35%, var(--u2-line)); }
html[data-ui="new"] .u2-sw.off::after { left: 2px; }
html[data-ui="new"] .u2-sw:disabled { cursor: not-allowed; }

/* ---- 탭 · 상태 점 ---- */
html[data-ui="new"] .u2-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--u2-line); overflow-x: auto; scrollbar-width: none; min-width: 0; }
html[data-ui="new"] .u2-tabs button { border: 0; background: transparent; padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--u2-dim); cursor: pointer; position: relative; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
html[data-ui="new"] .u2-tabs button:hover { color: var(--u2-fg); }
html[data-ui="new"] .u2-tabs button[aria-selected="true"] { color: var(--u2-fg); font-weight: 600; }
html[data-ui="new"] .u2-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--u2-primary); animation: u2-grow-x 0.22s ease-out; transform-origin: left; }
html[data-ui="new"] .u2-tabs .n { font-size: 10.5px; background: var(--u2-sunk); padding: 0 6px; border-radius: 999px; font-weight: 600; }
html[data-ui="new"] .u2-sd { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
html[data-ui="new"] .u2-sd.backlog { background: var(--u2-dim); }
html[data-ui="new"] .u2-sd.todo { background: var(--u2-info); }
html[data-ui="new"] .u2-sd.prog { background: var(--u2-warn); }
html[data-ui="new"] .u2-sd.perm { background: oklch(0.65 0.18 45); }
html[data-ui="new"] .u2-sd.done { background: var(--u2-ok); }
html[data-ui="new"] .u2-sd.abort { background: var(--u2-bad); }
html[data-ui="new"] .u2-sd.arch { background: color-mix(in oklab, var(--u2-dim) 50%, var(--u2-line)); }
html[data-ui="new"] .u2-pill.human { background: color-mix(in oklab, var(--u2-human) 20%, transparent); color: color-mix(in oklab, var(--u2-human) 80%, var(--u2-fg)); }

/* ---- 화면 공용 배치 도구 ---- */
html[data-ui="new"] .u2-rowx { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
html[data-ui="new"] .u2-grow { flex: 1; min-width: 0; }
html[data-ui="new"] .u2-dim { color: var(--u2-dim); }
html[data-ui="new"] .u2-sm { font-size: 11.5px; }
html[data-ui="new"] .u2-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-ui="new"] .u2-mono { font-family: var(--u2-mono); font-size: 0.92em; }
html[data-ui="new"] .u2-link { color: var(--u2-primary); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
html[data-ui="new"] .u2-chev { transition: transform 0.18s ease; transform: rotate(-90deg); }
html[data-ui="new"] [aria-expanded="true"] > .u2-chev { transform: none; }
html[data-ui="new"] .u2-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
html[data-ui="new"] .u2-field { position: relative; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--u2-line); background: var(--u2-surface); color: var(--u2-dim); min-width: 0; }
html[data-ui="new"] .u2-field:focus-within { border-color: var(--u2-primary); box-shadow: 0 0 0 3px var(--u2-primary-soft); }
html[data-ui="new"] .u2-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--u2-fg); font: inherit; font-size: 12.5px; }
html[data-ui="new"] .u2-field select { border: 0; outline: 0; background: transparent; color: var(--u2-fg); font: inherit; font-size: 12.5px; cursor: pointer; }
html[data-ui="new"] .u2-field.off { opacity: 0.55; }
html[data-ui="new"] .u2-menu { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: min(420px, 90vw); max-height: 280px; overflow-y: auto; border: 1px solid var(--u2-line); border-radius: 12px; background: var(--u2-surface); box-shadow: var(--u2-shadow); padding: 5px; display: grid; gap: 1px; animation: u2-fade 0.14s ease both; }
html[data-ui="new"] .u2-mi { display: grid; gap: 1px; text-align: left; padding: 6px 9px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--u2-fg); min-width: 0; }
html[data-ui="new"] .u2-mi:hover, html[data-ui="new"] .u2-mi.cur { background: var(--u2-sunk); }
html[data-ui="new"] .u2-mi small { color: var(--u2-dim); font-size: 11px; }

/* ---- 움직임 ---- */
@keyframes u2-spin { to { transform: rotate(360deg); } }
@keyframes u2-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes u2-halo { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes u2-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 13%, transparent); } }
@keyframes u2-pop { 0% { transform: scale(0.3); } 100% { transform: scale(1); } }
@keyframes u2-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@keyframes u2-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes u2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes u2-dlg-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes u2-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes u2-side-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes u2-side-in-l { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes u2-toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes u2-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes u2-slide-x { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes u2-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes u2-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
html[data-ui="new"] .u2-rise { animation: u2-rise 0.3s ease both; }
html[data-ui="new"] .u2-shake { animation: u2-shake 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  html[data-ui="new"] .u2-app *,
  html[data-ui="new"] .u2-m *,
  html[data-ui="new"] .u2-dlg,
  html[data-ui="new"] .u2-panel,
  html[data-ui="new"] .u2-sheet-b,
  html[data-ui="new"] .u2-scrim,
  html[data-ui="new"] .u2-toast,
  html[data-ui="new"] .u2-toast * {
    animation: none !important;
    transition: none !important;
  }
}

@property --u2-orbit { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes u2-orbit { to { --u2-orbit: 360deg; } }

/* 아래 시트를 화면 높이 대부분으로 — 안쪽 목록이 남는 높이를 채우며 스스로 스크롤한다 */
html[data-ui="new"] .u2-sheet-b.u2-sheet-tall { height: 85dvh; max-height: 85dvh; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
html[data-ui="new"] .u2-sheet-fill { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
html[data-ui="new"] .u2-m-top.hidden { display: none; }