/* 모르스 부호 이진 트리 트레이너 — 스타일
 * 2026-09-22 Tailwind 제거. 원본(Tailwind CDN)의 화면을 직접 작성한 CSS 로 옮겼다.
 * 색은 아래 :root 토큰으로만 쓴다. 클래스명은 app.js 가 만드는 요소(node-char-text, node-morse, toast …)와 짝을 이룬다.
 */

/* ── 글꼴 (외부 CDN 없이 로컬 woff2) ──────────────────────────── */
/* JetBrains Mono·Space Grotesk 는 가변 글꼴 파일 하나가 여러 굵기를 맡는다 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-latin-1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-latin-ext-0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-latin-1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-latin-ext-0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* 한글 — 본 사이트와 같은 파일이라 브라우저 캐시를 같이 쓴다 */
@font-face {
  font-family: 'NanumSquareNeo';
  src: url('/font/NanumSquareNeo-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ── 토큰 ────────────────────────────────────────────────────── */
:root {
  --font-sans: 'NanumSquareNeo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Space Grotesk', 'NanumSquareNeo', system-ui, sans-serif;

  /* 바탕·면 */
  --bg: #070b14;
  --ink-950: #020617;
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --white: #fff;

  /* 점(dit) = 청록 */
  --dit-300: #67e8f9;
  --dit-400: #22d3ee;
  --dit-500: #06b6d4;
  --dit-600: #0891b2;
  --dit-800: #155e75;
  --dit-950: #083344;
  --sky-400: #38bdf8;

  /* 선(dah) = 호박 */
  --dah-300: #fcd34d;
  --dah-400: #fbbf24;
  --dah-500: #f59e0b;
  --dah-800: #92400e;
  --dah-950: #451a03;

  /* 확정 = 초록, 삭제 = 장미 */
  --ok-300: #6ee7b7;
  --ok-400: #34d399;
  --ok-500: #10b981;
  --ok-600: #059669;
  --danger-300: #fda4af;
  --danger-400: #fb7185;

  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;

  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --fast: 150ms;
}

/* ── 기본값 정리 ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  border: 0 solid;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-sans);
}
body { margin: 0; line-height: inherit; }
h3, p { margin: 0; font-size: inherit; font-weight: inherit; }
strong { font-weight: bolder; }
kbd { font-family: var(--font-mono); font-size: 1em; }
button, input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button {
  background: transparent;
  cursor: pointer;
  text-transform: none;
  -webkit-appearance: button;
}
svg { display: block; vertical-align: middle; }
[hidden] { display: none !important; }

/* ── 앱 바탕 ─────────────────────────────────────────────────── */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  /* 전신 무선실 느낌의 격자 */
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, rgb(30 41 59 / .4) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(30 41 59 / .4) 1px, transparent 1px);
  color: var(--ink-200);
  font-family: var(--font-sans);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* 아이콘 (lucide-static v1.47.0, ISC) — 크기는 수식어 클래스로 */
.icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: .875rem; height: .875rem; }
.icon--lg { width: 1.25rem; height: 1.25rem; }
.icon--xl { width: 1.5rem; height: 1.5rem; }
.icon--cyan { color: var(--dit-400); }
.icon--emerald { color: var(--ok-400); }

@keyframes pulse { 50% { opacity: .5; } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.is-pulsing { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

/* ── 상단 바 ─────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(30 41 59 / .8);
  background: rgb(2 6 23 / .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: .625rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(6 182 212 / .4);
  border-radius: var(--radius-lg);
  background: rgb(6 182 212 / .1);
  color: var(--dit-400);
  box-shadow: var(--shadow-inner);
}
.brand-title-row { display: flex; align-items: center; gap: .5rem; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: var(--white);
}
.mode-badge {
  padding: .125rem .5rem;
  border: 1px solid rgb(6 182 212 / .4);
  border-radius: 9999px;
  background: rgb(6 182 212 / .2);
  color: var(--dit-300);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
.mode-badge--en {
  border-color: rgb(245 158 11 / .4);
  background: rgb(245 158 11 / .2);
  color: var(--dah-300);
}
.brand-sub { font-size: .75rem; line-height: 1rem; color: var(--ink-400); }

.lang-toggle {
  display: flex;
  align-items: center;
  padding: .25rem;
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-lg);
  background: var(--ink-900);
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .875rem;
  /* 선택 여부와 상관없이 테두리 폭을 같게 둬서 전환할 때 옆 버튼이 밀리지 않는다 */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  color: var(--ink-400);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.lang-btn:hover { color: var(--ink-200); }
.lang-btn[aria-pressed="true"] {
  border-color: rgb(6 182 212 / .4);
  background: rgb(6 182 212 / .2);
  color: var(--dit-300);
  box-shadow: var(--shadow-sm);
}

.top-actions { display: flex; align-items: center; gap: .5rem; }
.sound-btn,
.icon-btn {
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  background: var(--ink-900);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sound-btn:hover,
.icon-btn:hover { background: var(--ink-800); }
.sound-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  color: var(--ok-400);
}
.sound-btn.is-muted .sound-label { color: var(--ink-500); }
.icon-btn { padding: .5rem; color: var(--ink-300); }

/* ── 본문 격자 ───────────────────────────────────────────────── */
.workspace {
  flex: 1 1 0%;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: .75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.tree-col { display: flex; flex-direction: column; gap: .75rem; }
.side-col { display: flex; flex-direction: column; gap: 1rem; }

.panel {
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-xl);
  background: rgb(15 23 42 / .9);
}

/* ── 트리 패널 ───────────────────────────────────────────────── */
.tree-panel {
  position: relative;
  height: 520px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tree-head {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgb(30 41 59 / .8);
}
.tree-title { display: flex; align-items: center; gap: .5rem; }
.ping-dot {
  width: .625rem;
  height: .625rem;
  border-radius: 9999px;
  background: var(--dit-400);
  animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
.tree-title-label {
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-300);
}
.branch-rules {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
}
.rule {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .125rem .5rem;
  border: 1px solid;
  border-radius: var(--radius-sm);
}
.rule--dit { border-color: rgb(21 94 117 / .5); background: rgb(8 51 68 / .7); color: var(--dit-300); }
.rule--dah { border-color: rgb(146 64 14 / .5); background: rgb(69 26 3 / .7); color: var(--dah-300); }

.tree-viewport {
  position: relative;
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#bst-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  transition: all var(--fast) var(--ease);
}

/* 깊이 눈금 — 중립 회색 점선 축 */
.depth-legend {
  position: absolute;
  left: .75rem;
  top: 4rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: .5rem;
  border-left: 1px dashed var(--ink-800);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-600);
}

.tree-reset {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem;
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-lg);
  background: rgb(2 6 23 / .9);
  box-shadow: var(--shadow-lg);
}
.ghost-btn {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  color: var(--ink-300);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.ghost-btn:hover { color: var(--white); background: var(--ink-800); }

/* SVG 노드 (app.js 가 그린다) */
.tree-node-group {
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
  cursor: pointer;
}
.tree-node-group:hover circle.node-bg {
  stroke: var(--sky-400);
  stroke-width: 3px;
}
.tree-path-edge { transition: stroke .15s ease, stroke-width .15s ease; }
.node-char-text,
.node-morse {
  user-select: none;
  pointer-events: none;
}
.node-char-text { font-family: var(--font-display); font-weight: 900; }
.node-morse {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  fill: var(--ink-400);
}

/* ── 공통 패널 머리·버튼 ─────────────────────────────────────── */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink-800);
}
.panel-head--plain { padding-bottom: 0; border-bottom: 0; }
.panel-label {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-400);
}
.panel-label--bright { color: var(--ink-300); }

.btn {
  padding: .5rem .75rem;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

/* ── 실시간 탐색 버퍼 ────────────────────────────────────────── */
.monitor {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-xl);
}
.depth-badge {
  padding: .125rem .5rem;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  color: var(--ink-400);
}
.monitor-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
}
.monitor-seq { display: flex; flex-direction: column; }
.morse-seq {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--dit-300);
}
.morse-placeholder {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: var(--ink-600);
}
.tree-path {
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  color: var(--ink-500);
}
.target-badge {
  width: 5rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink-700);
  border-radius: var(--radius-xl);
  background: linear-gradient(to bottom, var(--ink-800), var(--ink-950));
  box-shadow: var(--shadow-inner);
}
.target-char {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 900;
  color: var(--dah-400);
}
.target-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-400);
}

.commit-track {
  width: 100%;
  height: .375rem;
  margin-bottom: .5rem;
  overflow: hidden;
  border: 1px solid var(--ink-800);
  border-radius: 9999px;
  background: var(--ink-950);
}
.commit-bar {
  width: 0;
  height: 100%;
  background: var(--ok-500);
  transition: all 75ms var(--ease);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  padding-top: .25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
}
.action-grid .btn:active { transform: scale(.95); }
.btn--commit {
  grid-column: span 2 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border-color: rgb(16 185 129 / .4);
  background: rgb(5 150 105 / .3);
  color: var(--ok-300);
  font-weight: 700;
}
.btn--commit:hover { background: rgb(5 150 105 / .5); }
.btn--neutral {
  background: var(--ink-800);
  color: var(--ink-300);
  font-weight: 600;
}
.btn--neutral:hover { background: var(--ink-700); }
.btn--danger-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  color: var(--danger-400);
}

/* ── 수동 전신기 ─────────────────────────────────────────────── */
.keypanel {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-xl);
}
.duration-badge {
  padding: .125rem .5rem;
  border: 1px solid rgb(21 94 117 / .6);
  border-radius: var(--radius-sm);
  background: rgb(8 51 68 / .6);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dit-400);
}

/* 누르면 스프링처럼 눌려 들어가는 키 */
.telegraph-lever {
  width: 100%;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  border: 2px solid var(--ink-700);
  border-radius: var(--radius-xl);
  background: linear-gradient(to bottom, var(--ink-800), var(--ink-900));
  transition: transform .05s ease, box-shadow .05s ease, border-color .05s ease;
  box-shadow: 0 10px 25px -4px rgb(0 0 0 / .8), inset 0 2px 4px rgb(255 255 255 / .12);
}
.telegraph-lever:active,
.telegraph-lever.key-pressed {
  transform: translateY(5px) scale(.985);
  box-shadow: 0 2px 8px -1px rgb(6 182 212 / .6), inset 0 4px 8px rgb(0 0 0 / .6);
  border-color: var(--sky-400);
  background: linear-gradient(to bottom, var(--ink-800), var(--ink-900));
}
.lever-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: var(--white);
  transition: color var(--fast) var(--ease);
}
.telegraph-lever:hover .lever-title { color: var(--dit-300); }
.lever-hint {
  display: block;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  color: var(--ink-400);
}
.lever-hint .is-dit { color: var(--dit-300); }
.lever-hint .is-dah { color: var(--dah-300); }

.sliders {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--ink-800);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
}
.slider { display: flex; flex-direction: column; gap: .375rem; }
.slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-400);
}
.slider-val { font-weight: 700; }
.slider-val--cyan { color: var(--dit-300); }
.slider-val--emerald { color: var(--ok-300); }
.slider input[type="range"] {
  width: 100%;
  height: .375rem;
  border-radius: var(--radius-md);
  background: var(--ink-950);
  accent-color: var(--dit-500);
  cursor: pointer;
}
.slider-note { font-size: 10px; color: var(--ink-500); }

/* ── 수신 완성문 ─────────────────────────────────────────────── */
.output {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  box-shadow: var(--shadow-xl);
}
.text-btn-danger {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  color: var(--danger-400);
}
.text-btn-danger:hover { color: var(--danger-300); }
.decoded {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: .875rem;
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-lg);
  background: var(--ink-950);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: .025em;
  color: var(--ink-100);
  overflow-wrap: break-word;
}
.jamo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .25rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
}
.jamo-note { color: var(--ink-600); }
.output-actions {
  display: flex;
  gap: .5rem;
  padding-top: .25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
}
.btn--listen,
.btn--copy {
  display: flex;
  align-items: center;
  gap: .375rem;
  background: var(--ink-800);
}
.btn--listen:hover,
.btn--copy:hover { background: var(--ink-700); }
.btn--listen { flex: 1 1 0%; justify-content: center; color: var(--dah-300); }
.btn--copy { padding: .5rem 1rem; color: var(--ink-300); }

/* ── 도움말 ──────────────────────────────────────────────────── */
.help-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(2 6 23 / .8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.help-dialog {
  position: relative;
  width: 100%;
  max-width: 32rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-xl);
  background: var(--ink-900);
  box-shadow: var(--shadow-2xl);
}
.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ink-800);
}
.help-head h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--white);
}
.help-close {
  padding: .25rem;
  border-radius: var(--radius-md);
  color: var(--ink-400);
}
.help-close:hover { color: var(--white); }
.help-body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  font-size: .75rem;
  line-height: 1rem;
  color: var(--ink-300);
}
.help-card {
  padding: .75rem;
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-lg);
  background: var(--ink-950);
}
.help-card p { line-height: 1.625; color: var(--ink-400); }
.help-q {
  display: block;
  margin-bottom: .25rem;
  font-weight: 700;
  color: var(--dit-300);
}
.help-card--keys {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  font-family: var(--font-mono);
}
.help-card--keys p { font-size: 11px; }
.help-keys-title { font-weight: 700; color: var(--dah-300); }
.help-card kbd {
  padding: .125rem .375rem;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  color: var(--ink-200);
}
.help-foot { display: flex; justify-content: flex-end; padding-top: .25rem; }
.btn-primary {
  padding: .5rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--dit-600);
  color: var(--white);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  transition: background-color var(--fast) var(--ease);
}
.btn-primary:hover { background: var(--dit-500); }

/* ── 알림 ────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  padding: .625rem 1rem;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  background: var(--ink-800);
  box-shadow: var(--shadow-2xl);
  color: var(--dit-300);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1rem;
  transition: opacity 300ms var(--ease);
}
.toast.is-leaving { opacity: 0; }

/* ── 스크롤바 ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0b1120; }
::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 4px; }

/* ── 반응형 ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .workspace { padding: 1.5rem; }
  .tree-panel { height: 620px; }
  .lever-title { font-size: 1.5rem; line-height: 2rem; }
  .sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .workspace { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tree-col { grid-column: span 7 / span 7; }
  .side-col { grid-column: span 5 / span 5; }
}

/* 모바일 — viewBox 1000×620 을 390px 폭에 넣으면 노드 글자가 읽히지 않는다.
   최소 폭을 주고 트리만 가로로 스크롤시킨다. */
@media (max-width: 767px) {
  .tree-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  #bst-svg {
    min-width: 720px;
    max-height: none;
  }
}