/* ============================================================
   Visual Bitcoin Engine — 프론트엔드 스타일
   다크 + 비트코인 오렌지 테마
   ============================================================ */

:root {
  --bg: #0b0e14;
  --bg-soft: #11151f;
  --panel: #161b26;
  --panel-2: #1c2230;
  --border: #2a3242;
  --border-soft: #222936;
  --text: #e6edf3;
  --muted: #8b97a7;
  --muted-2: #5c6675;

  --btc: #f7931a;
  --btc-soft: #ffb454;
  --green: #3fb950;
  --red: #f85149;
  --blue: #58a6ff;
  --purple: #bc8cff;
  --yellow: #e3b341;

  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, sans-serif;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(247, 147, 26, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(88, 166, 255, 0.06), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--btc-soft); }

/* ---------- 레이아웃 ---------- */
.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 22px 80px;
}

header.masthead {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--btc), #d97b06);
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 800;
  color: #1a1206;
  box-shadow: 0 6px 20px rgba(247, 147, 26, 0.35);
  flex-shrink: 0;
}

.masthead h1 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -0.3px;
}
.masthead p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.masthead-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lang-picker { position: relative; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s;
}
.lang-btn:hover { border-color: var(--btc); }
.lang-btn:focus-visible { outline: none; border-color: var(--btc); box-shadow: 0 0 0 2px rgba(247,147,26,.25); }
.lang-btn .lang-globe { font-size: 14px; line-height: 1; }
.lang-btn .lang-caret { font-size: 10px; color: var(--muted); transition: transform .15s; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-btn[aria-expanded="true"] { border-color: var(--btc); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(247, 147, 26, .06);
  animation: langMenuIn .13s ease-out;
}
@keyframes langMenuIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.lang-menu li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  transition: background .1s;
}
.lang-menu li:hover { background: var(--bg-soft); }
.lang-menu li .lang-flag { font-size: 15px; line-height: 1; }
.lang-menu li[aria-selected="true"] {
  background: rgba(247, 147, 26, .12);
  color: var(--btc);
  font-weight: 600;
}
.lang-menu li[aria-selected="true"]::after {
  content: "✓";
  margin-left: auto;
  font-size: 12px;
  color: var(--btc);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 999px;
}
.engine-badge .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted-2);
}
.engine-badge.ready .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.engine-badge.error .dot { background: var(--red); }

/* ---------- 탭 ---------- */
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 22px 0 18px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.tab-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--btc); border-bottom-color: var(--btc); }

.tab-panel { display: none; animation: fade .25s ease; }
.tab-panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to {opacity:1; transform:none;} }

/* ---------- 카드 / 패널 ---------- */
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 4px; font-size: 18px; }
.card h3 { margin: 18px 0 8px; font-size: 15px; }
.card .lead { color: var(--muted); margin: 0 0 14px; font-size: 14px; }

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

/* ---------- 교육용 콜아웃 ---------- */
.callout {
  border-left: 3px solid var(--blue);
  background: rgba(88, 166, 255, 0.07);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  margin: 14px 0;
  font-size: 13.5px;
  color: #c8d4e2;
}
.callout.why { border-color: var(--btc); background: rgba(247, 147, 26, 0.08); }
.callout.warn { border-color: var(--red); background: rgba(248, 81, 73, 0.08); }
.callout.ok { border-color: var(--green); background: rgba(63, 185, 80, 0.08); }
.callout b { color: var(--text); }
.callout code { color: var(--btc-soft); }

/* ---------- 버튼 / 폼 ---------- */
button.btn {
  appearance: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  transition: transform .08s, filter .15s, background .15s;
}
button.btn:hover { filter: brightness(1.12); }
button.btn:active { transform: translateY(1px); }
button.btn:disabled { opacity: .5; cursor: not-allowed; }
button.btn.primary { background: linear-gradient(145deg, var(--btc), #db7d08); border-color: #db7d08; color: #1a1206; }
button.btn.green { background: linear-gradient(145deg, #3fb950, #2ea043); border-color: #2ea043; color: #06210c; }
button.btn.danger { background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.5); color: #ff8983; }
button.btn.ghost { background: transparent; }
button.btn.sm { padding: 5px 9px; font-size: 11.5px; border-radius: 8px; }

input, select {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 11px;
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus { border-color: var(--btc); }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 0 0 auto; }
.row .grow { flex: 1 1 120px; }

input[type="range"] { accent-color: var(--btc); padding: 0; }

/* 필드명 옆 도움말(?) 툴팁 */
.lbl-row { display: inline-flex; align-items: center; gap: 5px; }
.hint {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  font-size: 10px; font-weight: 800; line-height: 1;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--border);
  cursor: help; user-select: none;
}
.hint:hover, .hint:focus { color: var(--btc); border-color: var(--btc); outline: none; }
.hint:focus-visible { box-shadow: 0 0 0 2px rgba(247,147,26,.4); }

/* 화면 밖으로 안 잘리고 모바일 탭도 되는 커스텀 툴팁 */
.tooltip-bubble {
  position: fixed;
  z-index: 1000;
  max-width: min(280px, 90vw);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #c8d4e2;
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.tooltip-bubble.show { opacity: 1; transform: translateY(0); }

/* ---------- 해시/모노 표시 ---------- */
.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.hash {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  word-break: break-all;
  line-height: 1.5;
  color: #9fb4c9;
}
.hash .match { color: var(--green); font-weight: 700; }
.hash .lead0 { color: var(--btc); font-weight: 700; }
.diff { color: var(--red); font-weight: 700; background: rgba(248,81,73,.15); border-radius: 3px; }

.kbd {
  font-family: var(--mono);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
}

/* ---------- 통계 바 ---------- */
.stats { display: flex; gap: 12px; flex-wrap: wrap; }
.stat {
  flex: 1 1 120px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.stat .k { font-size: 11.5px; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 800; font-family: var(--mono); margin-top: 2px; }
.stat .v small { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat.btc .v { color: var(--btc); }
.stat.green .v { color: var(--green); }
.stat.blue .v { color: var(--blue); }

/* ---------- 잔액 막대 ---------- */
.balances { display: flex; flex-direction: column; gap: 9px; }
.bal-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; }
.bal-row .name { font-weight: 700; font-size: 13.5px; }
.bal-row .name.miner { color: var(--btc); }
.bal-bar { height: 12px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-soft); }
.bal-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--btc), var(--btc-soft)); border-radius: 999px; transition: width .5s ease; }
.bal-row .amt { font-family: var(--mono); font-size: 13px; color: var(--text); }

/* ---------- 멤풀 / 거래 ---------- */
.tx-list { display: flex; flex-direction: column; gap: 7px; }
.tx {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
}
.tx .arrow { color: var(--muted); }
.tx .from { color: var(--blue); font-weight: 600; }
.tx .to { color: var(--purple); font-weight: 600; }
.tx .amount { margin-left: auto; font-family: var(--mono); font-weight: 700; color: var(--btc); }
.tx.coinbase { border-color: rgba(247,147,26,.35); background: rgba(247,147,26,.06); }
.tx.coinbase .from { color: var(--btc); }
.tx.tampered { border-color: var(--red); background: rgba(248,81,73,.08); }
.empty { color: var(--muted-2); font-size: 13px; font-style: italic; padding: 8px 2px; }

/* ---------- 블록체인 뷰 ---------- */
.chain { display: flex; flex-direction: column; gap: 0; }
.block-wrap { display: flex; flex-direction: column; align-items: stretch; }
.link-down {
  align-self: center;
  width: 2px; height: 26px;
  background: linear-gradient(var(--btc), transparent);
  position: relative;
}
.link-down::after {
  content: "🔗"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); font-size: 13px;
}
.block {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-soft));
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.block::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--btc);
}
.block.genesis::before { background: var(--muted-2); }
.block.tampered { border-color: var(--red); box-shadow: 0 0 0 1px rgba(248,81,73,.4); }
.block.tampered::before { background: var(--red); }
.block-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.block-head .id { font-size: 16px; font-weight: 800; }
.block-head .tag { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border-soft); padding: 2px 8px; border-radius: 999px; }
.block-head .tag.nonce { color: var(--purple); }
.block-head .tag.time { color: var(--muted); }
.block-field { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; margin: 5px 0; font-size: 12px; }
.block-field .lbl { color: var(--muted); padding-top: 2px; }
.hash-pill { font-family: var(--mono); font-size: 12px; padding: 4px 8px; border-radius: 7px; background: var(--bg); border: 1px solid var(--border-soft); word-break: break-all; }
.hash-pill.self { color: var(--green); border-color: rgba(63,185,80,.3); }
.hash-pill.prev { color: var(--blue); border-color: rgba(88,166,255,.3); }
.hash-pill.bad { color: var(--red); border-color: rgba(248,81,73,.4); }
.block .txs { margin-top: 10px; }

/* ---------- 첫 채굴 유도 배너 ---------- */
.card.first-mine {
  border-color: var(--btc);
  box-shadow: 0 0 0 1px rgba(247,147,26,.4), 0 10px 30px rgba(247,147,26,.14);
  background: linear-gradient(180deg, rgba(247,147,26,.08), var(--bg-soft));
}
.fm-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fm-icon { font-size: 30px; line-height: 1; transform-origin: 70% 80%; animation: fmSwing 1.1s ease-in-out infinite; }
.fm-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.fm-text b { color: var(--text); }
.fm-text span { color: var(--muted); }
.fm-text .mono { color: var(--btc-soft); }
.first-mine #firstMineBtn { flex: 0 0 auto; white-space: nowrap; }
@keyframes fmSwing { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .fm-icon { animation: none; } }

/* ---------- 포크(경쟁 체인) 다이어그램 ---------- */
.fork { display: flex; align-items: center; gap: 16px; margin: 10px 0 4px; flex-wrap: wrap; }
.fork-common { display: flex; align-items: center; gap: 10px; }
.fork-note { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.fork-branches { display: flex; flex-direction: column; gap: 12px; }
.fork-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fork-lead { font-family: var(--mono); color: var(--muted-2); font-size: 15px; }
.fk {
  min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 8px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: 13px; border: 1px solid var(--border);
}
.fk.base { background: rgba(247,147,26,.12); border-color: rgba(247,147,26,.5); color: var(--btc); }
.fk.honest { background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.55); color: #7ee787; }
.fk.attacker { background: rgba(248,81,73,.1); border-color: rgba(248,81,73,.5); color: #ff8983; }
.fork-tag { font-size: 12px; margin-left: 4px; }
.fork-tag.ok { color: #7ee787; }
.fork-tag.bad { color: #ff8983; }

/* ---------- 채굴 애니메이션 (곡괭이질) ---------- */
.mining-anim { position: relative; width: 92px; height: 54px; margin: 0 auto 8px; }
.mining-anim .pick {
  position: absolute; left: 44px; bottom: 12px;
  font-size: 30px; line-height: 1;
  transform-origin: 75% 85%;
  animation: pickSwing .7s ease-in-out infinite;
}
.mining-anim .ore {
  position: absolute; left: 20px; bottom: 2px;
  font-size: 24px; line-height: 1; color: var(--btc);
  animation: oreShake .7s ease-in-out infinite;
}
.mining-anim .spark {
  position: absolute; left: 34px; bottom: 16px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 8px var(--yellow);
  opacity: 0;
  animation: sparkFlash .7s ease-in-out infinite;
}
@keyframes pickSwing {
  0%   { transform: rotate(-58deg); }
  38%  { transform: rotate(14deg); }
  52%  { transform: rotate(6deg); }
  100% { transform: rotate(-58deg); }
}
@keyframes oreShake {
  0%, 34% { transform: translateX(0) scale(1); }
  42%     { transform: translateX(2px) scale(1.15); }
  58%     { transform: translateX(-1px) scale(1); }
  100%    { transform: translateX(0) scale(1); }
}
@keyframes sparkFlash {
  0%, 34% { opacity: 0; transform: scale(.3); }
  40%     { opacity: 1; transform: scale(1.4); }
  56%     { opacity: 0; transform: scale(2.2); }
  100%    { opacity: 0; transform: scale(.3); }
}
@media (prefers-reduced-motion: reduce) {
  .mining-anim .pick, .mining-anim .ore, .mining-anim .spark { animation: none; }
}

/* ---------- 채굴 시각화 ---------- */
.miner-stage {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.miner-target { font-family: var(--mono); font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.miner-target b { color: var(--btc); }
.miner-hash {
  font-family: var(--mono);
  font-size: clamp(13px, 2.4vw, 19px);
  word-break: break-all;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  letter-spacing: 1px;
}
.miner-hash .lead0 { color: var(--btc); font-weight: 800; }
.miner-hash.found { border-color: var(--green); box-shadow: 0 0 0 1px rgba(63,185,80,.4), 0 0 30px rgba(63,185,80,.15); }
.miner-stats { display: flex; gap: 22px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.miner-stats .ms { text-align: center; }
.miner-stats .ms .k { font-size: 11px; color: var(--muted); }
.miner-stats .ms .v { font-size: 20px; font-weight: 800; font-family: var(--mono); }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.flash-green { animation: flashg .6s ease; }
@keyframes flashg { 0% { background: rgba(63,185,80,.25);} 100% { background: transparent; } }

/* ---------- 로그 콘솔 ---------- */
.console {
  background: #07090d;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  height: 220px;
  overflow-y: auto;
  color: #aebdca;
}
.console .line { padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.console .line.tx { color: var(--green); }
.console .line.reject { color: var(--red); }
.console .line.mine { color: var(--btc-soft); }
.console .line.diff { color: var(--purple); }
.console .line.init { color: var(--muted); }
.console .line.fail { color: #6f7b8a; }
.console .line.fail .h { color: #9fb4c9; }
.console .line.win { color: #7ee787; font-weight: 700; }
.console .line .lead0 { color: var(--btc); font-weight: 800; }
.console .line.skip { color: var(--muted-2); font-style: italic; }

/* ---------- 검증 배너 ---------- */
.verdict { border-radius: 12px; padding: 14px 16px; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.verdict.ok { background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.4); color: #7ee787; }
.verdict.bad { background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.4); color: #ff8983; }
.verdict .icon { font-size: 22px; }

/* ---------- 흐름 다이어그램 (둘러보기) ---------- */
.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 8px 0 4px; }
.flow .node {
  flex: 1 1 130px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-top: 3px solid var(--btc);
  border-radius: 12px;
  padding: 12px 14px;
}
.flow .node .n { font-size: 12px; color: var(--btc); font-weight: 700; }
.flow .node .t { font-weight: 700; margin: 3px 0; }
.flow .node .d { font-size: 12px; color: var(--muted); }

/* ---------- 미니 체인 (탭 1: 해시가 블록을 잇는다) ---------- */
.minichain { display: flex; flex-direction: column; gap: 0; margin: 8px 0 4px; }
.mc-link {
  align-self: center;
  width: 2px; height: 24px;
  background: linear-gradient(var(--green), var(--blue));
  position: relative;
}
.mc-link::after {
  content: "🔗"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); font-size: 13px;
}
.mc-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-soft));
  padding: 12px 15px;
  position: relative;
  overflow: hidden;
}
.mc-block::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--btc);
}
.mc-block.genesis::before { background: var(--muted-2); }
.mc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.mc-head .id { font-weight: 800; font-size: 15px; }
.mc-head .tag { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border-soft); padding: 2px 8px; border-radius: 999px; }
.mc-row { display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: center; margin: 6px 0; font-size: 12px; }
.mc-row .k { color: var(--muted); }
.mc-row input { width: 100%; }
.mc-nonce { display: flex; gap: 8px; align-items: center; }
.mc-nonce input { width: 90px; flex: 0 0 auto; }
.mc-hash .lead0 { color: var(--btc); font-weight: 800; }

/* 곁다리(접이식) 지식 박스 */
.aside { margin: 14px 0 0; border: 1px dashed var(--purple); border-radius: 10px; background: rgba(188,140,255,.05); }
.aside > summary { cursor: pointer; padding: 11px 15px; font-weight: 700; font-size: 13.5px; color: var(--purple); list-style: none; user-select: none; }
.aside > summary::-webkit-details-marker { display: none; }
.aside > summary::before { content: "▶"; font-size: 9px; margin-right: 7px; }
.aside[open] > summary::before { content: "▼"; }
.aside .aside-body { padding: 0 15px 12px; font-size: 13.5px; color: #c8d4e2; }
.aside .aside-body p { margin: 8px 0; }
.aside .aside-body b { color: var(--text); }
.mc-hash { font-family: var(--mono); font-size: 12px; padding: 5px 9px; border-radius: 7px; background: var(--bg); border: 1px solid var(--border-soft); word-break: break-all; }
.mc-hash.self { color: var(--green); border-color: rgba(63,185,80,.3); }
.mc-hash.prev { color: var(--blue); border-color: rgba(88,166,255,.3); }
.mc-hash.flash { animation: mcflash .7s ease; }
@keyframes mcflash { 0% { background: rgba(247,147,26,.3); border-color: var(--btc); } 100% { background: var(--bg); } }

/* ---------- UTXO 모델 (탭 4) ---------- */
.utxo-owner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px;
  align-items: center;
  padding: 16px 2px;
  border-bottom: 1px solid var(--border-soft);
}
.utxo-owner:first-child { padding-top: 4px; }
.utxo-owner:last-child { border-bottom: none; padding-bottom: 4px; }
.utxo-owner .who { display: flex; flex-direction: column; gap: 4px; }
.utxo-owner .who-name { font-weight: 700; font-size: 15px; }
.utxo-owner .who.miner .who-name { color: var(--btc); }
.utxo-owner .who-addr { font-family: var(--mono); font-size: 11px; color: var(--purple); word-break: break-all; }
.utxo-owner .who .sum { font-size: 12px; color: var(--muted); font-weight: 600; font-family: var(--mono); }
@media (max-width: 560px) { .utxo-owner { grid-template-columns: 1fr; gap: 10px; } }
.coins { display: flex; gap: 9px; flex-wrap: wrap; }

.coin {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
  padding: 9px 12px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, #2a2118, #1a1610);
  border: 1px solid rgba(247, 147, 26, 0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.coin .amt { font-weight: 800; font-size: 15px; color: var(--btc-soft); font-family: var(--mono); }
.coin .amt small { font-size: 10px; color: var(--muted); font-weight: 600; }
.coin .id { font-family: var(--mono); font-size: 10px; color: var(--muted-2); margin-top: 2px; }
.coin .role { font-size: 10px; color: var(--muted); margin-top: 1px; }
.coin .lock { font-family: var(--mono); font-size: 9.5px; color: var(--purple); margin-top: 3px; opacity: .9; }
.coin .lock:hover .copy-btn.inline-copy { opacity: 1; }
.coin.change { border-color: rgba(88,166,255,.5); background: radial-gradient(circle at 50% 30%, #16202e, #0f1620); }
.coin.change .amt { color: var(--blue); }
.coin.recipient { border-color: rgba(188,140,255,.5); background: radial-gradient(circle at 50% 30%, #221a2e, #160f20); }
.coin.recipient .amt { color: var(--purple); }
.coin.spending { animation: spendpulse .7s ease; }
.coin.spent { opacity: .35; filter: grayscale(.8); text-decoration: line-through; border-style: dashed; border-color: var(--red); }
.coin.flash-in { animation: popin .5s ease; }
@keyframes spendpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(248,81,73,0); }
  50% { box-shadow: 0 0 0 3px rgba(248,81,73,.5); transform: translateY(-3px); }
}
@keyframes popin {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

.utxo-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
@media (max-width: 720px) { .utxo-flow { grid-template-columns: 1fr; } .flow-arrow { transform: rotate(90deg); } }
.flow-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.flow-arrow { font-size: 30px; color: var(--btc); }
.flow-sum { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--text); }
.utxo-eq {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 14px; text-align: center; color: var(--text);
}
.utxo-eq .fee { color: var(--yellow); }
.utxo-eq b { color: var(--btc); }

ul.tight { margin: 8px 0; padding-left: 18px; }
ul.tight li { margin: 5px 0; font-size: 13.5px; color: #c8d4e2; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
hr.sep { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.pill-tag { display:inline-block; font-size:11px; font-family:var(--mono); background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:2px 9px; color:var(--muted); }

/* ============ Phase 2: 지갑 / 서명 / 위조 ============ */
.callout.key { border-color: var(--purple); background: rgba(188,140,255,.08); }

/* 지갑 카드 */
.wallets { display: flex; flex-direction: column; gap: 9px; }
.wallet {
  display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px;
  align-items: center; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2);
}
.wallet .w-name { font-weight: 800; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 7px; }
.wallet .w-key { font-size: 20px; }
.wallet .w-row { display: flex; gap: 8px; font-family: var(--mono); font-size: 11.5px; }
.wallet .w-tag { color: var(--muted-2); min-width: 52px; }
.wallet .w-addr { color: var(--purple); word-break: break-all; }
.wallet .w-pub { color: var(--muted); word-break: break-all; }
.wallet .w-bal { color: var(--btc-soft); font-weight: 700; }

/* 복사 버튼 — 생략(…)된 값을 호버 시 전체 복사 */
.copy-btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.copy-btn:hover { color: var(--btc); border-color: var(--btc); }
.copy-btn:focus-visible { outline: none; opacity: 1; color: var(--btc); border-color: var(--btc); }
.copy-btn.copied { color: var(--green); border-color: var(--green); opacity: 1; }

/* 주소/공개키 옆 인라인 */
.copy-btn.inline-copy { margin-left: 6px; vertical-align: middle; }
.utxo-owner .who-addr:hover .copy-btn.inline-copy,
.wallet .w-addr:hover .copy-btn.inline-copy,
.wallet .w-pub:hover .copy-btn.inline-copy { opacity: 1; }

/* 코인 칩 우상단 */
.coin { position: relative; }
.copy-btn.coin-copy { position: absolute; top: 3px; right: 3px; padding: 1px 4px; font-size: 10px; }
.coin:hover .copy-btn.coin-copy { opacity: 1; }

/* 서명 박스 */
.sig-box {
  margin-top: 18px; padding: 16px; border-radius: 12px;
  border: 1px solid rgba(188,140,255,.28); background: rgba(188,140,255,.05);
}
.sig-title { font-weight: 700; color: var(--text); margin-bottom: 12px; }
.sig-steps { display: flex; flex-direction: column; gap: 10px; }
.sig-step { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.sig-step-no {
  width: 26px; height: 26px; border-radius: 50%; background: var(--purple); color: #1a1020;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.sig-step-h { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 3px; }
.sig-step-h span { color: var(--btc-soft); }
.sig-step .mono { color: var(--muted); background: var(--panel); padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); margin-bottom: 3px; }
.sig-verdict {
  margin-top: 14px; padding: 11px 14px; border-radius: 10px;
  font-weight: 700; font-size: 13.5px; text-align: center;
}
.sig-verdict.ok  { background: rgba(63,185,80,.12);  border: 1px solid rgba(63,185,80,.45);  color: #6ee787; }
.sig-verdict.bad { background: rgba(248,81,73,.12);  border: 1px solid rgba(248,81,73,.5);   color: #ff8983; }

/* sighash 직접 재현 데모 */
.sig-sub-label { font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .3px; margin-bottom: 3px; }
.sig-msg { color: var(--text) !important; }
.sig-msg-legend { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; }
.sig-msg-legend > div { font-size: 12px; padding: 3px 8px; border-radius: 6px; }
.sig-msg-legend .leg-in  { background: rgba(88,166,255,.10);  border-left: 3px solid var(--blue); color: #a9c9ff; }
.sig-msg-legend .leg-out { background: rgba(63,185,80,.10);   border-left: 3px solid var(--green); color: #8fe0a0; }
.sig-msg-legend .leg-spend { background: rgba(247,147,26,.10); border-left: 3px solid var(--btc); color: #f0c48a; }
.sig-msg-legend .mono { background: transparent; border: 0; padding: 0; }

/* 입력별 서명 카드 (실제 비트코인처럼 입력마다 각자 서명) */
.sig-input-cards { display: flex; flex-direction: column; gap: 14px; }
.sig-input-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  background: var(--panel-2);
  border-left: 4px solid var(--muted-2);
}
.sig-input-card.ok  { border-left-color: var(--green); }
.sig-input-card.bad { border-left-color: var(--red); }
.sig-input-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-soft);
}
.sig-input-no {
  font-weight: 800; font-size: 13px; color: var(--btc);
  background: rgba(247,147,26,.12); border: 1px solid rgba(247,147,26,.4);
  border-radius: 999px; padding: 2px 10px;
}
.sig-input-outpoint { font-size: 12px; color: var(--purple); }
.sig-mini { margin-top: 12px; }
.sig-mini:first-of-type { margin-top: 0; }
.sig-mini-h { font-weight: 700; font-size: 13.5px; color: var(--text); margin-bottom: 6px; }
.sig-hash-cmp { margin-top: 8px; }
.sig-hash-cmp .cmp { display: block; font-size: 12.5px; padding: 8px 11px; border-radius: 8px; line-height: 1.5; }
.sig-hash-cmp .cmp.ok  { background: rgba(63,185,80,.12);  border: 1px solid rgba(63,185,80,.45);  color: #6ee787; }
.sig-hash-cmp .cmp.bad { background: rgba(248,81,73,.12);  border: 1px solid rgba(248,81,73,.5);   color: #ff8983; }
.sig-msg-legend .who, .who { color: var(--btc-soft); font-weight: 700; }

/* 서명 만들기(재료 → 연산 → 결과) 다이어그램 */
.sig-io {
  display: grid; grid-template-columns: 1fr auto 1.3fr; gap: 10px; align-items: center;
  margin: 4px 0 2px;
}
.sig-io-in, .sig-io-out {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-size: 12.5px; color: var(--text);
}
.sig-io-in { text-align: center; align-self: center; }
.sig-io-in > div { margin: 3px 0; }
.sig-io-in .sig-io-plus { color: var(--muted); font-weight: 800; text-align: center; }
.sig-io-op {
  text-align: center; font-size: 11.5px; font-weight: 800; color: var(--purple);
  line-height: 1.25; white-space: nowrap;
}
.sig-io-out .mono { color: var(--muted); background: transparent; border: 0; padding: 0; margin: 0; }
.sig-verify-rows { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.sig-verify-rows > div {
  font-size: 12.5px; color: var(--text); padding: 6px 9px; border-radius: 7px;
  background: rgba(88,166,255,.08); border-left: 3px solid var(--blue);
}
.sig-verify-rows .mono { background: transparent; border: 0; padding: 0; color: var(--text); }
.sig-verify-rows .vfail { background: rgba(248,81,73,.12); border-left: 3px solid var(--red); color: #ff8983; }
.sig-verify-rows .vfail .mono { color: #ff8983; }
.sig-verify-rows .vskip { background: rgba(139,148,158,.10); border-left: 3px solid var(--muted); }

/* 타원곡선 시각화 */
.curve-wrap { background: #0c0f16; border: 1px solid var(--border); border-radius: 12px; padding: 8px; margin: 10px 0; overflow-x: auto; }
#curveSvg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.curve-ctrls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.curve-read { font-size: 13px; color: var(--muted); }
.curve-read b { color: var(--btc-soft); }
.curve-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.curve-legend span { display: inline-flex; align-items: center; gap: 5px; }
.curve-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.curve-legend .dash { width: 16px; height: 0; border-top: 2px dashed currentColor; display: inline-block; }
.curve-legend .dash[style*="58a6ff"] { border-top-color: #58a6ff; }
.curve-legend .dash[style*="bc8cff"] { border-top-color: #bc8cff; }
@media (max-width: 620px) {
  .sig-io { grid-template-columns: 1fr; }
  .sig-io-op { padding: 4px 0; }
}

/* 위조 카드 */
.forge-card { border-color: rgba(248,81,73,.3); }
.forge-result { margin-top: 12px; }
.forge-result:empty { display: none; }
.forge-verdict {
  padding: 13px 15px; border-radius: 11px; font-size: 13.5px; line-height: 1.6;
  background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.45); color: #ffb4af;
}
.forge-verdict.ok { background: rgba(63,185,80,.1); border-color: rgba(63,185,80,.45); color: #9be8a8; }
.forge-verdict b { color: #fff; }
.forge-verdict .addr { font-family: var(--mono); font-size: 11.5px; }
.forge-verdict .addr.bad { color: #ff8983; }
.forge-verdict .addr.victim { color: var(--purple); }

/* ============ Phase 3: 블록 해부 (탭 5) ============ */
textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 90px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; font-family: var(--mono); font-size: 13px; line-height: 1.6;
}
textarea:focus { outline: none; border-color: var(--btc); }
/* 네이티브 리사이즈 그립을 테마색 삼각형으로 (WebKit) */
textarea::-webkit-resizer { background: transparent; }

/* 머클트리 */
.merkle-scroll { overflow-x: auto; padding: 6px 2px; }
.merkle { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: min-content; margin-top: 8px; }
.merkle-level { display: flex; gap: 16px; justify-content: center; padding: 7px 0; position: relative; }
.merkle-level.is-root { padding-top: 2px; }
.mk-node {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 10px; min-width: 86px; text-align: center;
  position: relative;
}
.mk-node .mk-hash { color: var(--btc-soft); font-weight: 700; }
.mk-node .mk-tag { display: block; font-size: 9.5px; color: var(--muted-2); margin-top: 2px; }
.mk-node.leaf { border-color: rgba(88,166,255,.35); }
.mk-node.leaf .mk-hash { color: var(--blue); }
.mk-node.root { border-color: var(--btc); background: rgba(247,147,26,.1); padding: 10px 14px; }
.mk-node.root .mk-hash { color: var(--btc); font-size: 12.5px; }
.mk-node.dup { opacity: .55; border-style: dashed; }
.merkle-connector { color: var(--muted-2); font-size: 14px; line-height: 1; padding: 1px 0; }
.merkle-root-line { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mr-label { font-size: 12px; color: var(--btc); font-weight: 700; }
.mr-val { color: var(--btc-soft); word-break: break-all; font-size: 12.5px; }

/* 헤더 필드 */
.hdr-fields { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 14px; }
.hdr-field {
  display: grid; grid-template-columns: 130px 70px 1fr; gap: 12px; align-items: center;
  padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px;
}
.hdr-field .hf-name { font-weight: 700; font-size: 12.5px; color: var(--text); }
.hdr-field .hf-size { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.hdr-field .hf-val { font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-all; }
.hdr-field.accent-merkle { border-color: rgba(247,147,26,.4); }
.hdr-field.accent-merkle .hf-val { color: var(--btc-soft); }
.hdr-field.accent-nonce { border-color: rgba(63,185,80,.4); }
.hdr-field.accent-nonce .hf-val { color: var(--green); }

.hdr-serial, .target-box { margin-top: 14px; }
.hdr-hex { margin-top: 6px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; word-break: break-all; font-size: 12px; color: var(--muted); }
.target-hex { margin-top: 6px; padding: 10px 12px; background: rgba(247,147,26,.06); border: 1px solid rgba(247,147,26,.3); border-radius: 9px; word-break: break-all; font-size: 12.5px; color: var(--btc-soft); }

/* double SHA-256 흐름 */
.mining-stat { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.dsha { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 16px; }
.dsha-step { text-align: center; }
.dsha-cell {
  margin-top: 4px; padding: 9px 12px; border-radius: 9px; word-break: break-all; font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.dsha-cell.big { font-size: 13.5px; color: var(--text); }
.dsha .flow-arrow { font-size: 15px; color: var(--btc); text-align: center; }

/* target 비교 */
.cmp-box { margin-top: 16px; padding: 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--panel-2); }
.cmp-row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center; padding: 3px 0; }
.cmp-tag { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: pre; }
.cmp-row .mono { word-break: break-all; font-size: 12.5px; }
.cmp-verdict { margin-top: 10px; padding: 9px 12px; border-radius: 8px; text-align: center; font-weight: 700; font-size: 13px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); }
.cmp-verdict.ok { color: #6ee787; background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.45); }
.cmp-verdict.bad { color: var(--muted); }
.cmp .lead0, .dsha-cell .lead0, .cmp-row .lead0 { color: var(--btc); font-weight: 800; }

/* ============================================================
   6번 탭: 노드 합의 (P2P)
   ============================================================ */
.rule-list { margin: 8px 0 0; padding-left: 20px; }
.rule-list li { margin: 6px 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.rule-list li b { color: var(--text); }

.net-controls { align-items: flex-end; flex-wrap: wrap; gap: 12px; }

.net-nodes { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 18px; }

.net-node {
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.net-node.is-longest { border-color: rgba(247,147,26,.55); box-shadow: 0 0 0 1px rgba(247,147,26,.18) inset; }

.net-node-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.net-node-name { font-weight: 800; font-size: 15px; color: var(--text); }
.net-node-height { font-size: 12px; color: var(--muted); }
.net-node-actions { margin-left: auto; display: flex; gap: 8px; }

.net-chain-scroll { overflow-x: auto; padding-bottom: 4px; }
.net-chain { display: flex; align-items: stretch; gap: 0; min-width: min-content; }

.net-block {
  min-width: 132px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.net-block.nb-genesis { border-color: var(--muted-2); background: var(--bg-soft); }
.net-block.nb-agreed { border-color: rgba(63,185,80,.45); background: rgba(63,185,80,.07); }
.net-block.nb-fork { border-color: rgba(188,140,255,.5); background: rgba(188,140,255,.09); }
.net-block.nb-tip { box-shadow: 0 0 0 2px rgba(247,147,26,.35); }

.nb-id { font-weight: 800; font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.nb-forktag { font-size: 10px; font-weight: 700; color: #d6b6ff; background: rgba(188,140,255,.18); border: 1px solid rgba(188,140,255,.4); border-radius: 5px; padding: 0 5px; }
.nb-miner { font-size: 11px; color: var(--btc-soft); }
.nb-hash { font-size: 11px; color: var(--muted); word-break: break-all; display: flex; align-items: center; gap: 4px; }

.net-link { align-self: center; color: var(--muted-2); font-size: 16px; padding: 0 6px; user-select: none; }

button.btn.sm.green { background: linear-gradient(145deg, #3fb950, #2ea043); border-color: #2ea043; color: #06210c; }

.net-log {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  max-height: 260px;
  overflow-y: auto;
  line-height: 1.6;
}
.net-log-line { color: var(--muted); padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.net-log-line.lg-mine { color: var(--btc-soft); }
.net-log-line.lg-cast { color: var(--blue); }
.net-log-line.lg-fork { color: var(--purple); }
.net-log-line.lg-reorg { color: #ffb454; font-weight: 700; }
.net-log-line.lg-bad { color: var(--red); }
.net-log-line.lg-good { color: #6ee787; font-weight: 700; }

/* ============================================================
   7번 탭: 이중지불 공격
   ============================================================ */
.ds-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.ds-status { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.ds-stat {
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 150px;
  display: flex; flex-direction: column; gap: 4px;
}
.ds-stat-k { font-size: 11.5px; color: var(--muted); }
.ds-stat-v { font-size: 16px; font-weight: 800; color: var(--text); }
.ds-stat-v.good { color: #6ee787; }
.ds-stat-v.bad { color: var(--red); }
.ds-race { font-size: 11px; font-weight: 700; color: #ffb454; }

.ds-verdict {
  flex-basis: 100%;
  border-radius: 10px; padding: 12px 16px; font-weight: 800; font-size: 15px;
  border: 1px solid var(--border);
}
.ds-verdict.bad { color: #ff8983; background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.5); }
.ds-verdict.good { color: #6ee787; background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.45); }
.ds-verdict.warn { color: #ffb454; background: rgba(247,147,26,.1); border-color: rgba(247,147,26,.45); }

.ds-lane-wrap { display: flex; flex-direction: column; gap: 14px; }
.ds-lane { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--bg-soft); }
.ds-lane.revealed { border-color: rgba(248,81,73,.55); box-shadow: 0 0 0 1px rgba(248,81,73,.18) inset; }
.ds-lane-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ds-lane-title { font-weight: 800; font-size: 14px; }
.ds-lane-title.good { color: #6ee787; }
.ds-lane-title.bad { color: #ff8983; }
.ds-lane-sub { font-size: 11.5px; color: var(--muted); }

.ds-empty { color: var(--muted); font-size: 13px; padding: 14px 4px; }

.net-block.ds-block { min-width: 168px; }
.net-block.ds-pub { border-color: rgba(63,185,80,.45); background: rgba(63,185,80,.06); }
.net-block.ds-atk { border-color: rgba(248,81,73,.5); background: rgba(248,81,73,.08); }

.ds-txs { display: flex; flex-direction: column; gap: 3px; }
.ds-tx { font-size: 11px; font-family: var(--mono); color: var(--muted); border-radius: 5px; padding: 1px 5px; }
.ds-tx-cb { color: var(--btc-soft); }
.ds-tx-normal { color: var(--text); }
.ds-tx-pay { color: #6ee787; background: rgba(63,185,80,.14); border: 1px solid rgba(63,185,80,.4); }
.ds-tx-fraud { color: #ff8983; background: rgba(248,81,73,.14); border: 1px solid rgba(248,81,73,.45); }
.ds-tx b { font-weight: 800; }

/* 이중지불 쉬운 설명 스토리 박스 */
.ds-story { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-soft); margin-top: 4px; }
.ds-story-h { font-weight: 800; font-size: 14px; color: var(--btc-soft); margin-bottom: 8px; }
.ds-story-list { margin: 0; padding-left: 22px; }
.ds-story-list li { margin: 7px 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.ds-story-list li b { color: var(--text); }
.ds-story-list .muted { color: var(--muted-2); font-size: 12px; }

/* 컨펌 기다리기 = 리드 벌어지기 데모 */
.conf-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 10px; }
.conf-case { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--bg-soft); }
.conf-case-h { font-weight: 800; font-size: 13.5px; margin-bottom: 10px; }
.conf-case-h.risky { color: #ff8983; }
.conf-case-h.safe { color: #6ee787; }
.conf-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; }
.conf-blk { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text); }
.conf-blk.pay { background: rgba(63,185,80,.14); border-color: rgba(63,185,80,.45); color: #6ee787; }
.conf-arrow { color: var(--muted-2); font-size: 12px; }
.conf-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.conf-note b { color: var(--text); }
.conf-note .risky-t { color: #ff8983; }
.conf-note .safe-t { color: #6ee787; }

/* 공격의 한계 + 계산기 */
.ds-limit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.ds-limit-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg-soft); }
.ds-limit-h { font-weight: 800; font-size: 13px; color: var(--btc-soft); margin-bottom: 6px; }
.ds-limit-b { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.ds-limit-b b { color: var(--text); }

.ds-calc-out { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ds-calc-verdict { margin-top: 12px; }

.ds-sub { font-size: 14px; margin: 20px 0 10px; color: var(--text); }
.ds-decay { display: flex; flex-direction: column; gap: 6px; }
.ds-decay-row { display: grid; grid-template-columns: 64px 1fr 96px; align-items: center; gap: 10px; }
.ds-decay-z { font-size: 12px; color: var(--muted); font-family: var(--mono); text-align: right; }
.ds-decay-bar { height: 16px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.ds-decay-fill { display: block; height: 100%; border-radius: 5px 0 0 5px; transition: width .25s; }
.ds-decay-fill.hi { background: linear-gradient(90deg, #f85149, #ff8983); }
.ds-decay-fill.lo { background: linear-gradient(90deg, #2ea043, #3fb950); }
.ds-decay-val { font-size: 12px; font-family: var(--mono); color: var(--text); }

input[type="range"] { accent-color: var(--btc); width: 100%; }

/* ============================================================
   8번 탭: 양자컴퓨터 위협
   ============================================================ */
.q-badge { font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 1px 7px; vertical-align: middle; }
.q-badge.crit { color: #ff8983; background: rgba(248,81,73,.15); border: 1px solid rgba(248,81,73,.5); }
.q-badge.mid { color: #ffb454; background: rgba(247,147,26,.13); border: 1px solid rgba(247,147,26,.5); }
.q-badge.low { color: #6ee787; background: rgba(63,185,80,.13); border: 1px solid rgba(63,185,80,.45); }

.q-list { margin: 0; padding-left: 20px; }
.q-list li { margin: 6px 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.q-list li b { color: var(--text); }

.q-algo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.q-algo { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-soft); }
.q-algo.crit { border-color: rgba(248,81,73,.4); }
.q-algo.mid { border-color: rgba(247,147,26,.4); }
.q-algo-h { font-weight: 800; font-size: 15px; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }

.q-case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.q-case { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-soft); }
.q-case.crit { border-left: 4px solid var(--red); }
.q-case.mid { border-left: 4px solid var(--btc); }
.q-case.low { border-left: 4px solid var(--green); }
.q-case-h { font-weight: 800; font-size: 14.5px; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.q-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; }
.q-case-b > div { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 6px 0; }
.q-case-b b { color: var(--text); }
.q-k { display: inline-block; min-width: 52px; font-size: 11px; font-weight: 700; color: var(--btc-soft); margin-right: 6px; }

.q-safe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 4px; }
.q-safe { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.q-safe.ok { background: rgba(63,185,80,.06); border-color: rgba(63,185,80,.4); }
.q-safe.bad { background: rgba(248,81,73,.06); border-color: rgba(248,81,73,.4); }
.q-safe-h { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 10px; }

.q-feas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.q-feas { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-soft); }
.q-feas-k { font-size: 12px; font-weight: 700; color: var(--btc-soft); margin-bottom: 8px; }
.q-feas-v { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.5; }
.q-feas-v .muted { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; }

.q-fix-list { margin: 0 0 14px; padding-left: 20px; }
.q-fix-list li { margin: 8px 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.q-fix-list li b { color: var(--text); }

/* ============================================================
   커스텀 컨트롤 UI — 브라우저 기본 UI 대체
   (스크롤바 · 숫자 스테퍼 · 레인지 · 커스텀 셀렉트)
   ============================================================ */

/* ---------- 스크롤바 (전역: Firefox) ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ---------- 스크롤바 (WebKit/Blink: Chrome·Edge·Safari) ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #3a465b; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--btc); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* 로그 콘솔·코드 영역처럼 어두운 패널은 트랙을 살짝 어둡게, 썸을 얇게 */
.console::-webkit-scrollbar,
.net-log::-webkit-scrollbar,
textarea::-webkit-scrollbar { width: 10px; height: 10px; }
.console, .net-log, textarea { scrollbar-width: thin; }

/* 가로 스크롤 영역(머클트리·네트워크 체인·곡선)엔 얇은 스크롤바 */
.merkle-scroll::-webkit-scrollbar,
.net-chain-scroll::-webkit-scrollbar,
.curve-wrap::-webkit-scrollbar { height: 9px; }

/* ---------- 숫자 input 커스텀 스테퍼 ---------- */
/* 네이티브 스핀 버튼 제거 (WebKit / Firefox) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* JS가 감싸는 래퍼: 입력폭은 유지하고 오른쪽에 세로 −/+ 스테퍼를 얹는다 */
.num-wrap { position: relative; display: inline-flex; align-items: stretch; max-width: 100%; }
.num-wrap > input[type="number"] { padding-right: 30px; }
.num-stepper {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 24px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
}
.num-wrap:focus-within .num-stepper { border-left-color: var(--btc); }
.num-step {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--muted);
  border: none;
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  padding: 0;
  transition: background .12s, color .12s;
  user-select: none;
  -webkit-user-select: none;
}
.num-step:hover { background: var(--btc); color: #1a1206; }
.num-step:active { background: var(--btc-soft); }
.num-step.up { border-bottom: 1px solid var(--border); }
.num-step:disabled { opacity: .35; cursor: not-allowed; background: var(--panel-2); color: var(--muted); }
.num-step .caret { pointer-events: none; }

/* ---------- range input (크로스브라우저 커스텀) ---------- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
/* 트랙 — WebKit */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
/* 썸 — WebKit */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--btc);
  border: 2px solid #1a1206;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform .1s, box-shadow .12s;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(247,147,26,.2); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(247,147,26,.35); }
/* 트랙 — Firefox */
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(247,147,26,.55);
}
/* 썸 — Firefox */
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--btc);
  border: 2px solid #1a1206;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(247,147,26,.35); }

/* ---------- 커스텀 셀렉트 (네이티브 <select> 대체) ---------- */
/* 원본 <select>는 접근성/폼 값 유지를 위해 숨겨두고 유지한다 */
.cs-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cs-select { position: relative; display: inline-block; min-width: 130px; }
.cs-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 11px;
  font-family: var(--sans);
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s;
}
.cs-trigger:hover { border-color: var(--btc); }
.cs-trigger:focus-visible { outline: none; border-color: var(--btc); box-shadow: 0 0 0 2px rgba(247,147,26,.25); }
.cs-trigger[aria-expanded="true"] { border-color: var(--btc); }
.cs-trigger .cs-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger .cs-caret { font-size: 10px; color: var(--muted); transition: transform .15s; }
.cs-trigger[aria-expanded="true"] .cs-caret { transform: rotate(180deg); }

.cs-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(247,147,26,.06);
  animation: csMenuIn .13s ease-out;
}
.cs-menu[hidden] { display: none; }
@keyframes csMenuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.cs-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s;
}
.cs-menu li:hover, .cs-menu li.cs-active { background: var(--bg-soft); }
.cs-menu li[aria-selected="true"] { background: rgba(247,147,26,.12); color: var(--btc); font-weight: 600; }
.cs-menu li[aria-selected="true"]::after { content: "✓"; margin-left: auto; font-size: 12px; color: var(--btc); }