@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   누리툴 Design System · v1
   Six core tokens (see brand-spec.md). Everything else is derived.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg:      oklch(98.3% 0.003 255);
  --surface: oklch(100% 0 0);
  --fg:      oklch(22% 0.025 262);
  --muted:   oklch(50% 0.022 262);
  --border:  oklch(92.6% 0.007 262);
  --accent:  oklch(54.6% 0.215 262.9);

  /* derived neutrals */
  --bg-2:          oklch(96.4% 0.006 262);
  --fg-2:          oklch(35% 0.022 262);
  --border-strong: oklch(87.5% 0.01 262);
  --border-hover:  oklch(80% 0.014 262);
  --fg-soft:       color-mix(in srgb, var(--fg) 5%, transparent);
  --fg-soft-2:     color-mix(in srgb, var(--fg) 9%, transparent);

  /* derived accent */
  --accent-hover: oklch(49% 0.205 263);
  --accent-press: oklch(44.5% 0.19 263);
  --accent-ink:   oklch(45% 0.19 263);
  --accent-soft:  oklch(96.3% 0.022 262);
  --accent-ring:  color-mix(in srgb, var(--accent) 24%, transparent);

  /* state */
  --success: oklch(50% 0.13 155);
  --success-soft: oklch(96.5% 0.03 155);
  --warning: oklch(50% 0.12 60);
  --warning-soft: oklch(96.8% 0.035 80);
  --danger: oklch(52% 0.19 25);
  --danger-soft: oklch(96.6% 0.022 25);
  --danger-hover: oklch(46% 0.18 25);
  --star: oklch(74% 0.15 75);
  --star-ink: oklch(58% 0.14 65);
  --on-accent: oklch(100% 0 0);
  --on-danger: oklch(100% 0 0);
  --ti-bg: 96.6%; --ti-fg: 46%; --ti-bd: 92%;

  /* QR stays dark-on-light in every theme so it always scans */
  --qr-bg: oklch(100% 0 0);
  --qr-ink: oklch(22% 0.025 262);
  --qr-blue: oklch(45% 0.19 263);
  --qr-green: oklch(42% 0.12 155);

  /* type */
  --font-display: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-body: var(--font-display);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-dash: 30px;
  --fs-page: 24px;
  --fs-section: 18px;
  --fs-tool: 15px;
  --fs-body: 14px;
  --fs-desc: 13px;
  --fs-meta: 12px;

  /* space · 4pt */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* shape */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-xs: 0 1px 1px oklch(22% 0.02 262 / 0.04);
  --shadow-sm: 0 1px 2px oklch(22% 0.02 262 / 0.05), 0 1px 1px oklch(22% 0.02 262 / 0.03);
  --shadow-md: 0 6px 16px -8px oklch(22% 0.03 262 / 0.16), 0 1px 2px oklch(22% 0.02 262 / 0.05);
  --shadow-lg: 0 16px 40px -12px oklch(22% 0.04 262 / 0.22), 0 2px 6px oklch(22% 0.02 262 / 0.06);

  /* chrome */
  --header-h: 60px;
  --sb-w: 232px;
  --sb-w-c: 64px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ─── base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--fs-body)/1.55 var(--font-body);
  letter-spacing: -0.006em; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--font-display); }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-ring); }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 22px; height: 22px; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--s2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.wrap-row { flex-wrap: wrap; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── typography roles ─────────────────────────────────────────────── */
.t-dash    { font-size: var(--fs-dash); font-weight: 700; letter-spacing: -0.028em; line-height: 1.25; }
.t-page    { font-size: var(--fs-page); font-weight: 700; letter-spacing: -0.022em; line-height: 1.3; }
.t-section { font-size: var(--fs-section); font-weight: 650; letter-spacing: -0.015em; line-height: 1.4; }
.t-tool    { font-size: var(--fs-tool); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.t-desc    { font-size: var(--fs-desc); color: var(--muted); line-height: 1.55; }
.t-meta    { font-size: var(--fs-meta); color: var(--muted); }
.t-label   { font-size: 13px; font-weight: 600; color: var(--fg); }
.t-over    { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }

/* ─── buttons · primary / secondary / ghost / danger ──────────────── */
.btn {
  --bh: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--bh); padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: none;
  font: 600 14px/1 var(--font-body); letter-spacing: -0.01em; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .06s;
  user-select: none;
}
.btn .ic { width: 16px; height: 16px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-sm { --bh: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn-lg { --bh: 44px; padding: 0 18px; font-size: 15px; }
.btn-icon { width: var(--bh); padding: 0; }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .14), 0 1px 2px oklch(40% .15 263 / .25); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--accent-hover); }
.btn-primary:active, .btn-primary.is-active { background: var(--accent-press); }

.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover, .btn-secondary.is-hover { background: var(--bg-2); border-color: var(--border-hover); }
.btn-secondary:active, .btn-secondary.is-active { background: oklch(93.5% .008 262); }

.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover, .btn-ghost.is-hover { background: var(--fg-soft); color: var(--fg); }
.btn-ghost:active, .btn-ghost.is-active { background: var(--fg-soft-2); color: var(--fg); }

.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover, .btn-danger.is-hover { background: var(--danger-hover); }
.btn-danger:active, .btn-danger.is-active { background: oklch(42% .17 25); }
.btn-danger-ghost { color: var(--danger); }
.btn-danger-ghost:hover, .btn-danger-ghost.is-hover { background: var(--danger-soft); color: var(--danger-hover); }

.btn.is-focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--bg-2); color: oklch(64% .012 262); border-color: var(--border);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-ghost:disabled { background: none; border-color: transparent; }
.btn.is-loading { pointer-events: none; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; color: var(--accent); }
.is-nudge { animation: nudge .32s var(--ease); }
@keyframes nudge { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.has-dot { position: relative; }
.has-dot::after { content: ''; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }

/* ─── form controls ────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.hint { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.hint.is-error { color: var(--danger); }
.req { color: var(--danger); margin-left: 2px; }
.input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder { color: var(--muted); opacity: .85; }
.input:hover, .input.is-hover { border-color: var(--border-hover); }
.input:focus, .input.is-focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.input.is-error { border-color: var(--danger); }
.input.is-error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.input:disabled { background: var(--bg-2); color: var(--muted); cursor: not-allowed; }
textarea.input { height: auto; min-height: 104px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.input-wrap { position: relative; }
.input-wrap > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.input-wrap > .input { padding-left: 36px; }
.input-wrap > .input-end { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.select { position: relative; }
.select select { appearance: none; padding-right: 34px; cursor: pointer; }
.select > .ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex: none; }
.check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { margin-top: 3px; }

.switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex: none; }
.switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 100%; height: 100%; border-radius: 99px; background: oklch(84% .012 262); cursor: pointer; transition: background .15s; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px oklch(20% .02 262 / .25); transition: transform .18s var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:disabled { opacity: .5; cursor: not-allowed; }

.range { width: 100%; accent-color: var(--accent); }

/* choice cards (radio) */
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.choice { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.choice:hover { border-color: var(--border-hover); background: var(--bg); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice .ic { color: var(--fg-2); }
.choice b { font-size: 14px; font-weight: 600; }
.choice span { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ─── chips · segmented · tabs ─────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg-2); font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.chip:hover { background: var(--bg-2); color: var(--fg); }
.chip .count { font: 500 11px var(--font-mono); color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.chip[aria-pressed="true"] .count { color: oklch(80% .012 262); }
.chip[aria-pressed="true"]:hover { background: oklch(30% .025 262); }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-2); border-radius: var(--radius); border: 1px solid var(--border); }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--s6); overflow-x: auto; scrollbar-width: none; }
.tab { height: 42px; padding: 0 12px; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }

/* ─── badge · kbd · avatar ─────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--bg-2); color: var(--fg-2); white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge .ic { width: 13px; height: 13px; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-info    { background: var(--accent-soft); color: var(--accent-ink); }
.badge-outline { background: var(--surface); border: 1px solid var(--border-strong); }
.badge-new { height: 18px; padding: 0 6px; border-radius: 5px; font: 600 10px/1 var(--font-mono); letter-spacing: .04em; background: var(--accent-soft); color: var(--accent-ink); }
.badge-beta { height: 18px; padding: 0 6px; margin-left: 6px; border-radius: 5px; font: 700 10px/1 var(--font-mono); letter-spacing: .06em; background: var(--warning-soft); color: var(--warning); vertical-align: middle; cursor: help; }
.site-credit { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.verified { display: inline-flex; align-items: center; gap: 3px; color: var(--success); font-size: 11px; font-weight: 600; }
.verified .ic { width: 13px; height: 13px; }

.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--muted); font: 500 11px/1 var(--font-mono); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: oklch(93% .03 262); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.avatar[data-tone="2"] { background: oklch(94% .035 155); color: oklch(42% .1 155); }
.avatar[data-tone="3"] { background: oklch(94.5% .035 70); color: oklch(45% .1 60); }
.avatar[data-tone="4"] { background: oklch(94% .03 20); color: oklch(45% .12 25); }
.org-mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--fg); color: var(--surface); font-size: 13px; font-weight: 700; }
.org-mark[data-tone="2"] { background: oklch(42% .09 175); }

/* ─── surfaces ─────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 20px; border-bottom: 1px solid var(--border); min-height: 56px; }
.card-bd { padding: 20px; }
.card-ft { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 20px; border-top: 1px solid var(--border); }
.card-title { font-size: 15px; font-weight: 650; letter-spacing: -0.012em; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* category tone · icon badge (color is never the only signal) */
[data-cat="pdf"]   { --h: 27;  --c: .045; }
[data-cat="image"] { --h: 180; --c: .04; }
[data-cat="file"]  { --h: 240; --c: .035; }
[data-cat="qr"]    { --h: 70;  --c: .045; }
[data-cat="doc"]   { --h: 255; --c: .05; }
[data-cat="data"]  { --h: 150; --c: .045; }
[data-cat="text"]  { --h: 215; --c: .04; }
[data-cat="dev"]   { --h: 280; --c: .025; }
.ticon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; background: oklch(var(--ti-bg) calc(var(--c, .02) * .55) var(--h, 262)); color: oklch(var(--ti-fg) calc(var(--c, .02) * 2.6) var(--h, 262)); border: 1px solid oklch(var(--ti-bd) calc(var(--c, .02) * .8) var(--h, 262)); }
.ticon .ic { width: 18px; height: 18px; }
.ticon-sm { width: 28px; height: 28px; border-radius: 7px; }
.ticon-sm .ic { width: 15px; height: 15px; }
.ticon-lg { width: 44px; height: 44px; border-radius: 11px; }
.ticon-lg .ic { width: 22px; height: 22px; }

/* ─── tool card ────────────────────────────────────────────────────── */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.tcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 148px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.tcard:hover, .tcard.is-hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.tcard:has(.tcard-open:active) { transform: translateY(0); box-shadow: var(--shadow-sm); }
.tcard:has(.tcard-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tcard-open { all: unset; cursor: pointer; }
.tcard-open::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.tcard-open:focus-visible { outline: none; }
.tcard h3 { font-size: var(--fs-tool); font-weight: 600; letter-spacing: -0.012em; line-height: 1.4; display: flex; align-items: center; gap: 6px; }
.tcard p { font-size: var(--fs-desc); color: var(--muted); line-height: 1.55; }
.tcard .tcard-top { display: flex; align-items: flex-start; justify-content: space-between; }
.tcard .tcard-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tcard .tcard-foot .ic { width: 13px; height: 13px; }
.fav-btn { position: relative; z-index: 2; width: 30px; height: 30px; margin: -4px -6px 0 0; border: 0; background: none; border-radius: 7px; display: grid; place-items: center; color: oklch(70% .012 262); transition: background .15s, color .15s; }
.fav-btn:hover { background: var(--fg-soft); color: var(--fg-2); }
.fav-btn .ic { width: 17px; height: 17px; }
.fav-btn[aria-pressed="true"] { color: var(--star-ink); }
.fav-btn[aria-pressed="true"] .ic { fill: var(--star); stroke: var(--star-ink); }
.tcard.is-disabled { background: var(--bg); box-shadow: none; transform: none; }
.tcard.is-disabled .tcard-open { cursor: not-allowed; }
.tcard.is-disabled .ticon { filter: grayscale(1); opacity: .6; }
.tcard.is-disabled h3, .tcard.is-disabled p { color: var(--muted); }
.tcard-compact { min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.tcard-compact h3 { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-compact .grip { position: relative; z-index: 2; color: oklch(70% .012 262); cursor: grab; margin-left: auto; }
.tcard-compact .grip:hover { color: var(--fg-2); }
.tcard.is-dragging { opacity: .45; }
.tcard.is-drop-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* skeleton */
.skel { border-radius: 6px; background: linear-gradient(90deg, var(--bg-2) 0%, oklch(98% .004 262) 50%, var(--bg-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ─── lists & tables ───────────────────────────────────────────────── */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); min-height: 60px; transition: background .12s; }
.list-row:first-child { border-top: 0; }
.list-row:hover { background: var(--bg); }
.list-row .lr-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.list-row .lr-sub { font-size: 13px; color: var(--muted); }
.list-row .lr-time { font-size: 12px; color: var(--muted); white-space: nowrap; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--bg); }
.table .num { text-align: right; }
.table .cell-user { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ─── upload ───────────────────────────────────────────────────────── */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 24px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background-color: var(--surface); background-image: radial-gradient(oklch(90% .008 262) 1px, transparent 1.2px); background-size: 18px 18px; background-position: center; transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.is-hover { border-color: var(--border-hover); }
.drop.is-over { border-style: solid; border-color: var(--accent); background-color: var(--accent-soft); background-image: radial-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1.2px); }
.drop.is-error { border-color: var(--danger); background-color: var(--danger-soft); background-image: none; }
.drop-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--fg-2); }
.drop.is-over .drop-ic { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.drop-title { font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.drop-sub { font-size: 13px; color: var(--muted); }
.drop-or { font-size: 12px; color: var(--muted); }
.fmt-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.fmt { font: 500 11px/1 var(--font-mono); padding: 4px 6px; border-radius: 4px; background: var(--bg-2); color: var(--fg-2); }
.drop-sm { padding: 22px 16px; flex-direction: row; gap: 14px; text-align: left; justify-content: flex-start; }
.drop-sm .drop-ic { width: 40px; height: 40px; }

.frow { display: grid; grid-template-columns: auto 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 10px 10px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: box-shadow .12s, border-color .12s, opacity .12s; }
.frow + .frow { margin-top: 8px; }
.frow .grip, .frow .order { width: 22px; display: grid; place-items: center; color: oklch(68% .012 262); }
.frow .grip { cursor: grab; }
.frow .order { font: 600 11px var(--font-mono); }
.frow .fname { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .fmeta { font: 400 12px var(--font-mono); color: var(--muted); display: flex; gap: 8px; align-items: center; }
.frow .progress { margin-top: 6px; }
.frow.is-dragging { opacity: .4; }
.frow.is-drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
.frow.is-drop-after { box-shadow: 0 2px 0 0 var(--accent); }
.frow.is-error { border-color: color-mix(in srgb, var(--danger) 35%, var(--surface)); background: var(--danger-soft); }
.frow.is-error .fmeta { color: var(--danger); font-family: var(--font-body); }
.big-hint { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--warning-soft); color: var(--fg-2); font-size: 12.5px; line-height: 1.5; }
.big-hint > .ic { color: var(--warning); }
.big-hint.is-done { background: var(--success-soft); }
.big-hint.is-done > .ic { color: var(--success); }
.big-hint b { color: var(--fg); font-weight: 600; }
.progress { height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .25s var(--ease); }
.progress.is-indeterminate > i { width: 38%; animation: indet 1.3s var(--ease) infinite; }
@keyframes indet { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) { .progress.is-indeterminate > i { animation: none; width: 100%; opacity: .45; } }
.progress.is-success > i { background: var(--success); }

/* trust */
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--muted); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust .ic { width: 14px; height: 14px; color: var(--success); }

/* alert */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); font-size: 13px; line-height: 1.55; }
.alert > .ic { margin-top: 1px; }
.alert b { display: block; font-size: 14px; margin-bottom: 2px; }
.alert-info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.alert-info > .ic { color: var(--accent-ink); }
.alert-warning { background: var(--warning-soft); border-color: oklch(90% .05 75); }
.alert-warning > .ic { color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: oklch(90% .04 25); }
.alert-danger > .ic { color: var(--danger); }
.alert-success { background: var(--success-soft); border-color: oklch(90% .05 155); }
.alert-success > .ic { color: var(--success); }

/* ─── overlays ─────────────────────────────────────────────────────── */
.menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 60; display: none; transform-origin: top right; }
.menu.open { display: block; animation: pop .14s var(--ease); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--fg); font-size: 14px; text-align: left; }
.menu-item:hover, .menu-item:focus-visible { background: var(--fg-soft); outline: none; }
.menu-item .ic { color: var(--muted); width: 16px; height: 16px; }
.menu-item[aria-checked="true"] { font-weight: 600; }
.menu-sep { height: 1px; background: var(--border); margin: 6px -6px; }
.menu-label { font-size: 11px; font-weight: 600; color: var(--muted); padding: 8px 10px 4px; }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }

.overlay { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: oklch(22% .02 262 / .28); }
.overlay.open { display: flex; animation: fade .12s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: pop .16s var(--ease); overflow: hidden; }
.modal-hd { padding: 20px 20px 0; }
.modal-bd { padding: 16px 20px 20px; }
.modal-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg); }

.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 10px; background: var(--fg); color: var(--surface); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); animation: toastIn .22s var(--ease); pointer-events: auto; max-width: calc(100vw - 32px); }
.toast .ic { width: 16px; height: 16px; color: oklch(80% .14 155); }
.toast.is-error .ic { color: oklch(76% .13 25); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* command palette */
.palette { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .14s var(--ease); }
.pal-in { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.pal-in .ic { color: var(--muted); }
.pal-in input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 400 16px var(--font-body); color: var(--fg); letter-spacing: -0.01em; }
.pal-in input::placeholder { color: var(--muted); }
.pal-list { max-height: min(440px, 56vh); overflow-y: auto; padding: 6px; }
.pal-group { font-size: 11px; font-weight: 600; color: var(--muted); padding: 10px 10px 4px; }
.pal-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.pal-item .pi-name { font-size: 14px; font-weight: 600; }
.pal-item .pi-sub { font-size: 12px; color: var(--muted); }
.pal-item .pi-enter { margin-left: auto; opacity: 0; }
.pal-item[aria-selected="true"] { background: var(--bg-2); }
.pal-item[aria-selected="true"] .pi-enter { opacity: 1; }
.pal-item.is-locked { opacity: .55; }
.pal-empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.pal-ft { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg); font-size: 12px; color: var(--muted); }
.pal-ft span { display: inline-flex; gap: 5px; align-items: center; }
mark { background: color-mix(in srgb, var(--accent) 16%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; text-align: center; }
.empty .drop-ic { margin-bottom: 4px; }
.empty b { font-size: 15px; }
.empty p { font-size: 13px; color: var(--muted); max-width: 36ch; }

/* ─── app shell ────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); grid-template-rows: var(--header-h) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s var(--ease); }
.hdr { grid-column: 1 / -1; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: var(--header-h); padding-right: 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { flex: none; width: var(--sb-w); height: 100%; display: flex; align-items: center; gap: 10px; padding-left: 18px; border-right: 1px solid transparent; transition: width .2s var(--ease); overflow: hidden; }
.brand-mark { width: 28px; height: 28px; flex: none; }
#brandMark { display: flex; flex: none; }
.brand-text { min-width: 0; white-space: nowrap; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.brand-sub { font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.hsearch { flex: 1; max-width: 540px; margin: 0 auto; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); color: var(--muted); font-size: 14px; text-align: left; transition: border-color .15s, background .15s; }
.hsearch:hover { border-color: var(--border-hover); background: var(--surface); color: var(--fg-2); }
.hsearch .ic { width: 16px; height: 16px; }
.hsearch .hs-keys { margin-left: auto; display: flex; gap: 3px; }
.hactions { display: flex; align-items: center; gap: 2px; }
.hactions .btn-ghost .ic { width: 18px; height: 18px; }
.hsep { width: 1px; height: 24px; background: var(--border); margin: 0 8px; }
.pop-anchor { position: relative; }
.org-btn { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: left; transition: background .15s, border-color .15s; }
.org-btn:hover { background: var(--bg); border-color: var(--border-strong); }
.org-btn .org-name { font-size: 13px; font-weight: 650; line-height: 1.2; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-btn > .ic { width: 15px; height: 15px; color: var(--muted); }
.user-btn { border: 0; background: none; padding: 3px; border-radius: 50%; }
.user-btn:hover .avatar { box-shadow: 0 0 0 3px var(--fg-soft-2); }

.sb { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; z-index: 30; }
.sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 16px; scrollbar-width: thin; }
.nav-title { font-size: 11px; font-weight: 600; color: var(--muted); padding: 14px 10px 6px; white-space: nowrap; letter-spacing: .02em; }
.nav-sep { height: 1px; background: var(--border); margin: 10px 6px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--fg-2); font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; transition: background .12s, color .12s; }
.nav-item .ic { width: 18px; height: 18px; color: var(--muted); transition: color .12s; }
.nav-item:hover { background: var(--fg-soft); color: var(--fg); }
.nav-item:hover .ic { color: var(--fg-2); }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-item[aria-current="page"] .ic { color: var(--accent-ink); }
.nav-item .count { margin-left: auto; font: 500 11px var(--font-mono); color: var(--muted); }
.nav-item .nav-lock { margin-left: auto; width: 13px; height: 13px; }
.sb-foot { padding: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.sb-trust { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: var(--radius); background: var(--bg); font-size: 12px; color: var(--muted); line-height: 1.45; }
.sb-trust .ic { width: 15px; height: 15px; color: var(--success); margin-top: 1px; }

/* 접힌 사이드바(레일) — console.js가 .is-rail 을 붙여요: 데스크톱에서 접었을 때, 또는 1100px 이하에서 기본.
   레일 위에 마우스를 올리거나 펼치기를 누르면 .sb-over 가 붙어 사이드바가 부드럽게 넓어지며 본문 위로 펼쳐져요.
   아이콘 위치는 그대로 두고 너비만 바뀌므로, 글자는 잘려 있다가 서서히 나타나요. */
.nav-item { padding-left: 13px; }
.nav-title { position: relative; height: 34px; line-height: 14px; overflow: hidden; transition: color .18s var(--ease); }
.nav-title::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: var(--border); opacity: 0; transition: opacity .18s var(--ease); }
.sb .lbl, .sb .count, .sb .nav-lock, .sb .badge-new, .brand-text { transition: opacity .2s var(--ease) .06s; }
.sb-trust { transition: opacity .2s var(--ease), max-height .26s var(--ease), padding .26s var(--ease), margin .26s var(--ease); max-height: 90px; overflow: hidden; }
.sb-toggle .ic { transition: transform .26s var(--ease); }
@media (min-width: 721px) {
  .sb { width: 100%; transition: width .28s var(--ease), box-shadow .28s var(--ease); will-change: width; }
  .app.is-rail { grid-template-columns: var(--sb-w-c) minmax(0, 1fr); }
  .app.is-rail .brand { width: var(--sb-w-c); }
  .app.is-rail .brand-text { opacity: 0; transition-delay: 0s; }
  .app.is-rail .sb { width: var(--sb-w-c); }
  .app.is-rail .sb-scroll { overflow-y: auto; scrollbar-width: none; }
  .app.is-rail .sb-toggle .ic { transform: scaleX(-1); }
  .app.is-rail:not(.sb-over) .sb .lbl, .app.is-rail:not(.sb-over) .sb .count, .app.is-rail:not(.sb-over) .sb .nav-lock, .app.is-rail:not(.sb-over) .sb .badge-new { opacity: 0; transition-delay: 0s; }
  .app.is-rail:not(.sb-over) .nav-title { color: transparent; height: 21px; }
  .app.is-rail:not(.sb-over) .nav-title::after { opacity: 1; }
  .app.is-rail:not(.sb-over) .sb-trust { opacity: 0; max-height: 0; padding-block: 0; margin-top: -6px; }
  .app.is-rail.sb-over .sb { width: var(--sb-w); box-shadow: var(--shadow-lg); }
  .app.is-rail.sb-over .sb-toggle .ic { transform: none; }
  .app.sb-pin .sb-scrim { display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 25; background: oklch(22% .02 262 / .18); animation: fadeIn .2s var(--ease); }
}
@keyframes fadeIn { from { opacity: 0; } }
.app.no-anim, .app.no-anim .sb, .app.no-anim .brand, .app.no-anim .sb *, .app.no-anim .brand * { transition: none !important; }

.main { min-width: 0; padding: 28px 32px 56px; }
.page { max-width: 1200px; margin: 0 auto; animation: viewIn .22s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } }
.page-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }
.page-desc { font-size: 14px; color: var(--muted); margin-top: 4px; }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumb a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.crumb .ic { width: 14px; height: 14px; }
.sec { margin-top: var(--s8); }
.sec-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.sec-hd .sec-sub { font-size: 13px; color: var(--muted); }
.link { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; }
.link:hover { color: var(--fg); text-decoration-color: var(--fg); }
.link .ic { width: 14px; height: 14px; }

.bnav { display: none; }
.sb-scrim { display: none; }

/* ─── responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .main { padding: 24px 24px 48px; }
}
@media (max-width: 900px) {
  .org-btn .org-text, .hsep, .h-hide-t { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --header-h: 56px; --fs-dash: 24px; --fs-page: 21px; }
  .app, .app.is-collapsed, .app.is-rail { grid-template-columns: minmax(0, 1fr); }
  .sb-toggle { display: none !important; }
  .app .sb .lbl, .app .sb .count, .app .sb .nav-lock, .app .sb .badge-new { opacity: 1 !important; }
  .brand, .app.is-rail .brand { width: auto; padding-left: 14px; }
  .app .brand-text { opacity: 1 !important; }
  .app .brand-text { display: block !important; }
  .brand-sub { display: none; }
  .hsearch { max-width: none; margin: 0; }
  .hsearch .hs-label, .hsearch .hs-keys { display: none; }
  .hsearch { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; justify-content: center; margin-left: auto; background: none; border-color: transparent; }
  .hactions .h-hide-m { display: none; }
  .org-btn { border: 0; padding: 0 4px; }
  .sb { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; height: 100vh; z-index: 110; transform: translateX(-102%); transition: transform .24s var(--ease); box-shadow: var(--shadow-lg); }
  .app.drawer-open .sb { transform: none; }
  .app.drawer-open .sb-scrim { display: block; position: fixed; inset: 0; z-index: 105; background: oklch(22% .02 262 / .3); }
  .app .sb .lbl, .app .sb .count, .app .sb .nav-lock, .app .sb-trust { display: revert !important; }
  .app .sb .nav-title { height: 34px !important; color: var(--muted) !important; }
  .app .sb .nav-title::after { opacity: 0 !important; }
  .app .sb-trust { opacity: 1 !important; max-height: 90px !important; }
  .app .sb .nav-item { height: 40px !important; }
  .main { padding: 20px 16px calc(84px + env(safe-area-inset-bottom)); }
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); }
  .bnav button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); min-height: 44px; }
  .bnav button .ic { width: 20px; height: 20px; }
  .bnav button[aria-current="page"] { color: var(--accent-ink); }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .tgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tcard { min-height: 0; padding: 14px; }
  .tcard p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .list-row, .card-hd, .card-bd, .card-ft { padding-inline: 16px; }
  .overlay { padding-top: 8vh; }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .hide-m { display: none !important; }
}
@media (max-width: 400px) { .tgrid { grid-template-columns: 1fr; } }
/* ─── dark theme ───────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:      oklch(17.5% 0.012 262);
  --surface: oklch(21.5% 0.014 262);
  --fg:      oklch(94% 0.006 262);
  --muted:   oklch(71% 0.016 262);
  --border:  oklch(29.5% 0.014 262);
  --accent:  oklch(56% 0.2 262.9);
  --bg-2: oklch(25.5% 0.015 262);
  --fg-2: oklch(85% 0.01 262);
  --border-strong: oklch(35% 0.016 262);
  --border-hover: oklch(44% 0.018 262);
  --accent-hover: oklch(51% 0.2 263);
  --accent-press: oklch(47% 0.19 263);
  --accent-ink: oklch(78% 0.11 262);
  --accent-soft: oklch(28% 0.055 262);
  --accent-ring: oklch(62% 0.18 262 / .35);
  --success: oklch(76% 0.14 155); --success-soft: oklch(27% 0.045 155);
  --warning: oklch(80% 0.12 75);  --warning-soft: oklch(28% 0.045 75);
  --danger: oklch(72% 0.16 25);   --danger-soft: oklch(28% 0.055 25);
  --danger-hover: oklch(66% 0.17 25);
  --on-danger: oklch(18% 0.02 25);
  --star: oklch(80% 0.15 80); --star-ink: oklch(82% 0.13 80);
  --ti-bg: 27%; --ti-fg: 80%; --ti-bd: 33%;
  --shadow-xs: 0 1px 1px oklch(0% 0 0 / .3);
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / .35);
  --shadow-md: 0 8px 20px -8px oklch(0% 0 0 / .55), 0 1px 2px oklch(0% 0 0 / .3);
  --shadow-lg: 0 18px 44px -12px oklch(0% 0 0 / .65), 0 2px 6px oklch(0% 0 0 / .3);
}
[data-theme="dark"] .btn-primary { box-shadow: inset 0 1px 0 oklch(100% 0 0 / .1); }
[data-theme="dark"] .btn-secondary:active { background: oklch(30% .016 262); }
[data-theme="dark"] .btn-danger:active { background: oklch(62% .16 25); }
[data-theme="dark"] .btn:disabled, [data-theme="dark"] .btn[aria-disabled="true"] { color: oklch(54% .012 262); }
[data-theme="dark"] .switch input { background: oklch(38% .016 262); }
[data-theme="dark"] .switch input::after { background: oklch(97% 0 0); }
[data-theme="dark"] .chip[aria-pressed="true"] .count { color: oklch(42% .02 262); }
[data-theme="dark"] .chip[aria-pressed="true"]:hover { background: oklch(86% .01 262); }
[data-theme="dark"] .fav-btn, [data-theme="dark"] .frow .grip, [data-theme="dark"] .frow .order, [data-theme="dark"] .tcard-compact .grip { color: oklch(58% .014 262); }
[data-theme="dark"] .drop { background-image: radial-gradient(oklch(31% .014 262) 1px, transparent 1.2px); }
[data-theme="dark"] .alert-info { border-color: color-mix(in srgb, var(--accent-ink) 30%, transparent); }
[data-theme="dark"] .alert-warning { border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
[data-theme="dark"] .alert-danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
[data-theme="dark"] .alert-success { border-color: color-mix(in srgb, var(--success) 30%, transparent); }
[data-theme="dark"] .skel { background: linear-gradient(90deg, var(--bg-2) 0%, oklch(30% .015 262) 50%, var(--bg-2) 100%); background-size: 200% 100%; }
[data-theme="dark"] .avatar { background: oklch(32% .055 262); color: oklch(86% .07 262); }
[data-theme="dark"] .avatar[data-tone="2"] { background: oklch(32% .05 155); color: oklch(86% .08 155); }
[data-theme="dark"] .avatar[data-tone="3"] { background: oklch(33% .05 70); color: oklch(88% .08 75); }
[data-theme="dark"] .avatar[data-tone="4"] { background: oklch(32% .06 25); color: oklch(86% .07 25); }
[data-theme="dark"] .org-mark[data-tone="2"] { background: oklch(62% .09 175); color: oklch(16% .02 175); }
[data-theme="dark"] .toast .ic { color: oklch(46% .13 155); }
[data-theme="dark"] .toast.is-error .ic { color: oklch(50% .19 25); }
[data-theme="dark"] .overlay { background: oklch(8% .01 262 / .62); }
[data-theme="dark"] .progress > i { background: var(--accent-ink); }
[data-theme="dark"] .progress.is-success > i { background: var(--success); }
[data-theme="dark"] .has-dot::after { background: var(--danger); }
[data-theme="dark"] mark { background: oklch(40% .1 262 / .6); }
[data-theme="dark"] .pal-item[aria-selected="true"] { background: var(--bg-2); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ─── 자체 디자인 셀렉트 (icons.js가 <select>를 자동으로 바꿔요) ─── */
.select.csel { display: block; }
.csel-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.csel-btn { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 34px; text-align: left; cursor: pointer; }
.csel-btn .csel-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-btn.is-placeholder .csel-v { color: var(--muted); }
.csel-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.csel-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.csel-btn[data-off] { background: var(--bg-2); color: var(--muted); cursor: not-allowed; }
.select > .ic { transition: transform .16s var(--ease); z-index: 1; }
.select.is-open > .ic { transform: translateY(-50%) rotate(180deg); color: var(--accent-ink); }
.csel-pop { position: fixed; z-index: 1000; display: none; flex-direction: column; overflow: hidden; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.csel-pop.open { display: flex; animation: cselIn .12s var(--ease); }
.csel-pop[data-up="1"].open { animation-name: cselUp; }
@keyframes cselIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cselUp { from { opacity: 0; transform: translateY(4px); } }
.csel-list { overflow-y: auto; overscroll-behavior: contain; }
.csel-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; border-radius: 8px; color: var(--fg); font-size: 14px; line-height: 1.35; cursor: pointer; user-select: none; }
.csel-opt.is-active { background: var(--fg-soft); }
.csel-opt[aria-selected="true"] { color: var(--accent-ink); font-weight: 600; background: var(--accent-soft); }
.csel-opt[aria-selected="true"].is-active { background: color-mix(in srgb, var(--accent-soft) 70%, var(--fg-soft)); }
.csel-opt[aria-disabled="true"] { color: var(--muted); opacity: .55; cursor: not-allowed; }
.csel-opt .csel-ck { width: 16px; height: 16px; flex: none; color: var(--accent); }
.csel-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.csel-group:first-child { padding-top: 4px; }
.csel-search { position: relative; margin: 2px 2px 6px; flex: none; }
.csel-search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.csel-q { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: 13px; }
.csel-q:focus { outline: none; border-color: var(--accent); }
.csel-empty { padding: 14px 10px; text-align: center; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .csel-pop.open { animation: none; } .select > .ic { transition: none; } }

/* ─── 처음 사용 안내 (assets/tour.js) ─── */
.tour { position: fixed; inset: 0; z-index: 1200; opacity: 0; transition: opacity .3s var(--ease); }
.tour.in { opacity: 1; } .tour.out { opacity: 0; pointer-events: none; }
html.tour-on, html.tour-on body { overflow: hidden; }
.tour-dim { position: absolute; inset: 0; background: oklch(18% .02 262 / .55); transition: opacity .35s var(--ease); }
.tour[data-kind="spot"] .tour-dim { opacity: 0; }
.tour[data-kind="intro"] .tour-dim, .tour[data-kind="outro"] .tour-dim { background: radial-gradient(1200px 700px at 50% 40%, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); opacity: 1; }
.tour[data-kind="drop"] .tour-dim { background: oklch(18% .02 262 / .5); backdrop-filter: blur(2px); }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax oklch(18% .02 262 / .55), 0 0 0 3px var(--accent); transition: left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .3s; pointer-events: none; }
.tour-spot.hidden { display: block !important; opacity: 0; }
.tour-spot.pulse::after { content: ''; position: absolute; inset: -6px; border-radius: 18px; border: 2px solid var(--accent); animation: tourPulse 1.6s var(--ease) infinite; }
@keyframes tourPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.tour-card { position: fixed; z-index: 3; padding: 18px 18px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); transition: left .45s var(--ease), top .45s var(--ease); }
.tour-card.pop { animation: tourCard .38s var(--ease); }
@keyframes tourCard { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.tour-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 6px; }
.tour-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--fg-2); }
.tour-card .kbd { font-size: 11px; }
.tour-step { display: flex; align-items: center; justify-content: space-between; }
.tour-dots { display: flex; gap: 5px; } .tour-dots i { width: 18px; height: 4px; border-radius: 4px; background: var(--border-strong); transition: background .3s, width .3s; } .tour-dots i.on { background: var(--accent); width: 26px; }
.tour-ft { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.tour-ft .link { font-size: 13px; color: var(--muted); }
.tour-cursor { position: fixed; left: 0; top: 0; z-index: 4; width: 26px; height: 26px; pointer-events: none; transition-property: transform; transition-timing-function: cubic-bezier(.45, .05, .25, 1); filter: drop-shadow(0 2px 3px oklch(0% 0 0 / .25)); }
.tour-ripple { position: fixed; z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--accent); pointer-events: none; animation: tourRipple .6s var(--ease) forwards; }
@keyframes tourRipple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.nav-item.tour-hover { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.nav-item.tour-hover .ic { color: var(--accent-ink) !important; }
.tcard.tour-press { transform: scale(.97) !important; box-shadow: 0 0 0 3px var(--accent-ring) !important; transition: transform .12s, box-shadow .12s; }
.tour-typing { position: fixed; z-index: 4; transform: translateY(-50%); font-size: 15px; font-weight: 500; color: var(--fg); background: var(--surface); padding: 2px 6px 2px 0; pointer-events: none; white-space: nowrap; }
.tour-typing i { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--accent); animation: tourCaret 1s steps(1) infinite; }
@keyframes tourCaret { 50% { opacity: 0; } }
.tour-stage { position: absolute; inset: 0; pointer-events: none; }
.tour-stage .tour-hero, .tour-stage button, .tour-stage a { pointer-events: auto; }
/* 시작·마무리 화면 */
.tour-hero { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 24px; }
.tour-hero-in { position: relative; display: grid; justify-items: center; gap: 14px; max-width: 640px; text-align: center; }
.tour-hero h1 { margin: 6px 0 0; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.2; animation: tourUp .7s var(--ease) .25s both; }
.tour-hero p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--fg-2); animation: tourUp .7s var(--ease) .4s both; }
@keyframes tourUp { from { opacity: 0; transform: translateY(14px); } }
.tour-logo { width: 76px; height: 76px; animation: tourLogo .9s cubic-bezier(.3, 1.5, .5, 1) both; }
.tour-logo svg { width: 100%; height: 100%; }
@keyframes tourLogo { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
.tour-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.tour-pills span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: 600; animation: tourUp .6s var(--ease) both; animation-delay: calc(.55s + var(--i) * .12s); }
.tour-pills .ic { width: 16px; height: 16px; color: var(--accent); }
.tour-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; animation: tourUp .6s var(--ease) .95s both; }
.tour-hint { font-size: 12.5px; color: var(--muted); animation: tourUp .6s var(--ease) 1.1s both; }
.tour-float { position: absolute; inset: 0; pointer-events: none; }
.tour-float .ticon { position: absolute; left: var(--x); bottom: -60px; opacity: 0; transform: scale(var(--s)); animation: tourFloat var(--d) linear var(--delay) infinite; }
@keyframes tourFloat { 0% { transform: translateY(0) scale(var(--s)) rotate(-6deg); opacity: 0; } 10% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translateY(calc(-100vh - 120px)) scale(var(--s)) rotate(8deg); opacity: 0; } }
.tour-check { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--success); color: #fff; animation: tourLogo .8s cubic-bezier(.3, 1.6, .5, 1) both; box-shadow: 0 0 0 10px color-mix(in srgb, var(--success) 18%, transparent); }
.tour-check .ic { width: 38px; height: 38px; stroke-width: 3; }
.tour-confetti { position: absolute; left: 50%; top: 40%; }
.tour-confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; animation: tourBurst 1.3s cubic-bezier(.2, .7, .3, 1) var(--delay) forwards; }
@keyframes tourBurst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(540deg); } }
.tour-starts { display: grid; gap: 8px; width: min(420px, 100%); margin-top: 6px; animation: tourUp .6s var(--ease) .55s both; }
.tour-start { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s, border-color .15s; }
.tour-start:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.tour-start > span:nth-child(2) { flex: 1; } .tour-start b { display: block; font-size: 14px; } .tour-start span span { font-size: 12.5px; color: var(--muted); } .tour-start > .ic { color: var(--muted); }
/* 파일 놓기 시연 */
.tour-drop { position: absolute; inset: 0; display: grid; place-items: center; }
.tour-dropbox { display: grid; place-items: center; gap: 6px; width: min(520px, 80vw); height: 230px; border: 2px dashed color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 20px; color: var(--surface); text-align: center; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.tour-dropbox .ic { width: 34px; height: 34px; } .tour-dropbox b { font-size: 18px; } .tour-dropbox span { font-size: 13px; opacity: .8; }
.tour-stage.over .tour-dropbox { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); transform: scale(1.03); }
.tour-stage.picks .tour-dropbox { opacity: 0; transform: scale(.94); }
.tour-file { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); transition-property: transform, opacity; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.tour-file b { display: block; font-size: 13.5px; } .tour-file span span { font-size: 12px; color: var(--muted); }
.tour-file-ic { display: grid; place-items: center; width: 38px; height: 44px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font: 700 11px var(--font-mono); }
.tour-stage.dropped .tour-file { opacity: 0 !important; transform: scale(.6) !important; transition-duration: .3s !important; }
.tour-picks { position: absolute; display: grid; gap: 10px; width: min(460px, 86vw); padding: 16px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.tour-stage.picks .tour-picks { opacity: 1; transform: none; }
.tour-picks-row { display: flex; gap: 6px; flex-wrap: wrap; } .tour-picks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tour-picks .qd-tool { padding: 8px 10px; cursor: default; }
.tour-picks-row .qd-fmt:first-child { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.tour[data-kind="drop"] .tour-card { left: 50% !important; top: auto !important; bottom: 28px; transform: translateX(-50%); }
.tour[data-kind="drop"] .tour-card.pop { animation: tourCardC .38s var(--ease); }
@keyframes tourCardC { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (max-width: 720px) { .tour-card { width: calc(100vw - 24px) !important; left: 12px !important; top: auto !important; bottom: calc(14px + env(safe-area-inset-bottom)); } .tour[data-kind="drop"] .tour-card { transform: none; left: 12px !important; } .tour-picks-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tour-float, .tour-confetti, .tour-cursor, .tour-ripple { display: none !important; } }