/* ═══════════════════════════════════════════
   txid.uk — Bitcoin Block Explorer
   Dark theme, responsive, monospace
   ═══════════════════════════════════════════ */

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  width: auto; height: auto;
  clip: auto;
  padding: 0.75rem 1.25rem;
  background: #f7931a;
  color: #000;
  font-weight: 700;
  z-index: 9999;
  border-radius: 0.375rem;
  text-decoration: none;
}

:root, [data-theme="dark"] {
  /* 배경 */
  --bg:      #0d1117;
  --bg2:     #161b22;
  --bg3:     #21262d;
  /* 테두리 */
  --border:  #21262d;
  --border2: #30363d;
  /* 텍스트 */
  --text1:   #e6edf3;
  --text2:   #8b949e;
  --text3:   #848d97;
  /* 강조 */
  --accent:  #f7931a;
  --accent2: #e07010;
  /* 상태 색상 */
  --green:   #3fb950;
  --red:     #f85149;
  --blue:    #58a6ff;
  --yellow:  #d29922;
  /* 폰트 */
  --font:    'Space Mono', monospace;
  --font-ko: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  /* 기타 */
  --radius:  8px;
  --max-w:   1200px;
  --shadow:  0 4px 12px rgba(0,0,0,0.4);
  --bg-gradient: linear-gradient(180deg, #0d1117 0%, #080b10 40%, #0a0e14 70%, #0d1117 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }


[data-theme="light"] {
  /* 배경 */
  --bg:      #f6f8fa;
  --bg2:     #ffffff;
  --bg3:     #eaeef2;
  /* 테두리 */
  --border:  #d0d7de;
  --border2: #b8c0cc;
  /* 텍스트 */
  --text1:   #1f2328;
  --text2:   #656d76;
  --text3:   #636c76;
  /* 강조 */
  --accent:  #bc4e00;
  --accent2: #a04000;
  /* 상태 색상 */
  --green:   #1a7f37;
  --red:     #cf222e;
  --blue:    #0969da;
  --yellow:  #9a6700;
  /* 기타 */
  --shadow:  0 4px 12px rgba(0,0,0,0.12);
  --bg-gradient: none;
}
/* 라이트 테마 오버라이드 — hardcoded colors & intentional value shifts only */
[data-theme="light"] header { background: rgba(246,248,250,0.95); }
[data-theme="light"] #stats-bar { background: var(--bg2); }
[data-theme="light"] .stat-val { color: var(--text1); }
[data-theme="light"] .stat-lbl { color: var(--text2); }
[data-theme="light"] .block-card:hover { background: #fff8f0; }
[data-theme="light"] .bc-time, [data-theme="light"] .bc-miner { color: var(--text2); }
[data-theme="light"] .info-table tr:hover { background: var(--bg3); }
[data-theme="light"] .info-label { color: var(--text2); }
[data-theme="light"] .modal { border-color: var(--border); }
[data-theme="light"] .ms-card { background: var(--bg); }
[data-theme="light"] .ms-val { color: var(--text1); }
[data-theme="light"] .ms-lbl { color: var(--text2); }
[data-theme="light"] .toast { background: var(--bg2); border-color: var(--border); color: var(--text1); }
[data-theme="light"] .mining-card h3 { color: var(--text1); }
[data-theme="light"] .addr-stat .as-val { color: var(--text1); }
[data-theme="light"] .addr-stat .as-lbl { color: var(--text2); }
[data-theme="light"] .tx-table th { color: var(--text1); }
[data-theme="light"] .tx-table td { color: var(--text1); }
[data-theme="light"] .tx-table tr:hover td { background: var(--bg3); }
[data-theme="light"] .fee-calc-table th { background: var(--bg3); color: var(--text1); }
[data-theme="light"] .fee-calc-table td { color: var(--text1); border-color: var(--border); }
[data-theme="light"] .mempool-info-body { background: #f6f8fa; }
[data-theme="light"] .skeleton { background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%); background-size: 200% 100%; }
[data-theme="light"] .fav-chip { background: var(--bg2); border-color: var(--border); color: var(--text1); }
[data-theme="light"] footer { background: var(--bg3); color: var(--text2); }
[data-theme="light"] #footer-live { color: var(--text2); }
[data-theme="light"] #mempool-section { background: var(--bg2); }
[data-theme="light"] #mempool-legend { background: var(--bg); }
[data-theme="light"] .leg { color: var(--text2); }
[data-theme="light"] .mempool-info summary { background: #f6f8fa; color: #656d76; }
[data-theme="light"] .error-box { background: #fff0f0; }
[data-theme="light"] .badge { background: var(--bg3); color: var(--text1); }
[data-theme="light"] select, [data-theme="light"] input[type="number"],
[data-theme="light"] input[type="text"] { background: var(--bg2); border-color: var(--border); color: var(--text1); }
[data-theme="light"] .miners-table th { color: var(--text1); }
[data-theme="light"] .miners-table td { color: var(--text1); border-color: var(--bg3); }
[data-theme="light"] .diff-bar-wrap { background: var(--bg3); }
[data-theme="light"] .tx-io-item { background: var(--bg); }
[data-theme="light"] .io-addr { color: var(--text1); }
[data-theme="light"] .coinbase-item { background: #fff8f0; border-color: #f0d0a0; }
[data-theme="light"] .chart-card h3 { color: var(--text1); }
[data-theme="light"] .ln-stat { background: var(--bg2); }
[data-theme="light"] .ln-stat .ls-val { color: var(--text1); }
[data-theme="light"] .ln-stat .ls-lbl { color: var(--text2); }

body {
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text1);
  font-family: var(--font-ko);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 90px;
}

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent2); }

/* ── Header ── */
header {
  position: sticky;
  top: var(--gnav-h, 0px);
  z-index: 100;
  background: rgba(13,17,23,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-top {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-search {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px 10px;
}
.nav-search #search-wrap {
  max-width: 100%;
}
.logo {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity .2s;
}
.logo:hover { opacity: .8; }
.logo-sep { color: var(--border); font-family: var(--font); font-size: .9rem; margin: 0 2px; }
.logo-sub { font-family: var(--font); font-size: .8rem; color: var(--text3); }

#search-wrap {
  flex: 1;
  max-width: 600px;
  position: relative;
}
#search-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text1);
  font-family: var(--font-ko);
  font-size: .82rem;
  padding: 8px 44px 8px 14px;
  border-radius: 6px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(247,147,26,0.15);
}
#search-input::placeholder { color: var(--text3); transition: opacity .3s; }
.search-shortcut {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text3);
  font-family: var(--font-ko);
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
  transition: opacity .2s;
}
#search-input:focus ~ .search-shortcut { opacity: 0; }
#search-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  height: calc(100% - 8px);
  max-height: 30px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text2);
  cursor: pointer;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
#search-btn svg { stroke: currentColor; width: 15px; height: 15px; }
#search-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
#nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
#nav-links a {
  color: var(--text2);
  font-family: var(--font-ko);
  font-size: .8rem;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all .2s;
  text-decoration: none;
  position: relative;
}
#nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: width .2s;
}
#nav-links a:hover {
  color: var(--accent);
  background: rgba(247,147,26,0.06);
}
#nav-links a.active {
  color: var(--accent);
  background: rgba(247,147,26,0.08);
}
#nav-links a.active::after {
  width: 60%;
}
/* ── 헤더 버튼 공통 ── */
#lang-btn, #theme-btn, #fee-calc-header-btn, .icon-btn {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-family: var(--font-ko);
  font-size: .72rem;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: .02em;
}
#theme-btn, #fee-calc-header-btn { width: 32px; padding: 0; }
.icon-btn { min-width: 32px; width: auto; white-space: nowrap; }
#theme-btn svg, #fee-calc-header-btn svg, .icon-btn svg { display: block; stroke: currentColor; flex-shrink: 0; }
#lang-btn:hover, #theme-btn:hover, #fee-calc-header-btn:hover, .icon-btn:hover,
#lang-btn:focus, #theme-btn:focus, #fee-calc-header-btn:focus, .icon-btn:focus { border-color: var(--accent); color: var(--accent); outline: none; }

/* ── Stats Bar ── */
#learn-links-bar { width: 100%; max-width: var(--max-w); margin: 0 auto; }
#learn-links-bar:empty { display: none; }
#stats-bar {
  background: linear-gradient(180deg, var(--bg2), rgba(22,27,34,0.8));
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 14px 20px;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  padding: 0 20px;
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat-val {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-family: var(--font-ko);
  transition: color .3s;
}
.stat-lbl {
  color: var(--text3);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: var(--font-ko);
}

@keyframes stat-flash {
  0% { color: var(--accent); }
  30% { color: #ffaa33; text-shadow: 0 0 10px rgba(247,147,26,0.4); }
  100% { color: var(--accent); text-shadow: none; }
}
.stat-val.flash { animation: stat-flash 0.6s ease; }

/* ── Main ── */
main {
  flex: 1;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--text3);
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--text3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .bc-sep { color: var(--border2); user-select: none; }

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  margin-top: auto;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
#tagline { color: var(--text3); font-size: .75rem; }
.footer-live {
  display: flex;
  gap: 16px;
  font-size: .7rem;
  color: var(--text3);
  font-family: var(--font-ko);
}
.footer-live span { color: var(--text3); font-family: var(--font-ko); }
.footer-live span[id] { color: var(--accent); font-weight: 600; font-family: var(--font); }
.footer-links {
  display: flex;
  gap: 16px;
}
.footer-links a {
  color: var(--text3);
  font-size: .75rem;
  transition: color .2s;
}
.footer-links a:hover { color: var(--accent); }

/* ── Loading & Skeleton ── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text3);
  font-size: .9rem;
}
.loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-left: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton Cards */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.skeleton-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  overflow: hidden;
  position: relative;
}
.skeleton-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton-line {
  height: 12px;
  background: var(--bg3);
  border-radius: 4px;
  margin-bottom: 8px;
}
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w100 { width: 100%; }
.skeleton-line.h20 { height: 20px; }
.skeleton-line.mb0 { margin-bottom: 0; }

/* Stagger Animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger-item {
  opacity: 0;
  animation: fadeInUp 0.35s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.06s);
}

/* ── Error ── */
.error-box {
  background: rgba(255,68,68,0.08);
  border: 1px solid rgba(255,68,68,0.2);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  color: var(--red);
  margin: 20px 0;
}

/* ═══════════════════════════════════════════
   HOME PAGE
   ═══════════════════════════════════════════ */

/* Mempool Canvas */
#mempool-section {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  max-width: var(--max-w);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
#mempool-canvas {
  width: 100%;
  height: 230px;
  display: block;
}
#mempool-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: .68rem;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.leg { display: flex; align-items: center; gap: 5px; color: var(--text3); }
.leg-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* Fee Histogram */
/* Mempool hint text */
.mempool-hint {
  text-align: center;
  font-size: .68rem;
  color: var(--text3);
  padding: 4px 12px 6px;
  background: var(--bg2);
  font-family: var(--font-ko);
}

/* Section Titles */
.section-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text1);
  margin-top: 40px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Recent Blocks */
.blocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.block-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.block-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.block-card .bc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.block-card .bc-height {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.block-card .bc-time {
  color: var(--text3);
  font-size: .7rem;
}
.block-card .bc-row {
  display: flex;
  justify-content: space-between;
  color: var(--text2);
  font-size: .72rem;
  margin-top: 4px;
}
.block-card .bc-row span:first-child { color: var(--text3); }
.block-card .bc-miner {
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 4px;
}
.block-card .bc-miner::before {
  content: '▶';
  font-size: .7rem;
}
.block-card .bc-fee-range {
  color: var(--text3);
  font-size: .65rem;
  margin-top: 4px;
}
.block-card .bc-fee-bar {
  height: 3px;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   DETAIL PAGES (Block, TX, Address)
   ═══════════════════════════════════════════ */

.page-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-title .badge {
  font-size: .65rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.badge-confirmed { background: rgba(68,187,68,0.15); color: var(--green); }
.badge-unconfirmed { background: rgba(247,147,26,0.15); color: var(--accent); }

.page-hash {
  color: var(--text3);
  font-size: .72rem;
  word-break: break-all;
  margin-bottom: 16px;
}

/* Info grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.info-item {
  background: var(--bg2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-label { color: var(--text3); font-size: .68rem; text-transform: uppercase; }
.info-value { color: var(--text1); font-size: .82rem; word-break: break-all; }
.info-value.accent { color: var(--accent); }
.info-value.green { color: var(--green); }
.info-value.small { font-size: .72rem; }

/* TX List Table */
.tx-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
}
.tx-table th {
  background: var(--bg3);
  color: var(--text3);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: .68rem;
  text-transform: uppercase;
}
.tx-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  white-space: nowrap;
}
.tx-table tr:last-child td { border-bottom: none; }
.tx-table tr:hover td { background: rgba(247,147,26,0.03); }
.tx-table .txid-col {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-table .txid-col a { color: var(--blue); }
.tx-table .coinbase { color: var(--accent); font-weight: 600; }

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.pagination button {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: var(--font-ko);
  font-size: .75rem;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s;
}
.pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pagination button:disabled { opacity: .3; cursor: default; }
.pagination .page-info { color: var(--text3); font-size: .72rem; }

/* ═══════════════════════════════════════════
   TX DETAIL — Input/Output Flow
   ═══════════════════════════════════════════ */
.tx-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}
.tx-flow-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-flow-col h4 {
  color: var(--text3);
  font-size: .72rem;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tx-io-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: .75rem;
  transition: border-color .2s;
}
.tx-io-item:hover { border-color: var(--border2); }
.tx-io-item .io-addr {
  color: var(--blue);
  font-size: .7rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.tx-io-item .io-addr:hover { text-decoration: underline; }
.tx-io-item .io-val {
  color: var(--text1);
  font-weight: 600;
  margin-top: 4px;
}
.tx-io-item .io-type {
  color: var(--text3);
  font-size: .65rem;
  margin-top: 2px;
}

/* Coinbase TX special */
.tx-io-item.coinbase-item {
  border-color: var(--accent);
  background: rgba(247,147,26,0.06);
}
.tx-io-item.coinbase-item .io-addr {
  color: var(--accent);
  font-weight: 600;
}

/* OP_RETURN special */
.tx-io-item.op-return-item {
  border-style: dashed;
  border-color: var(--border2);
  opacity: 0.7;
}
.tx-io-item.op-return-item .io-addr {
  color: var(--text3);
  cursor: default;
}
.tx-io-item.op-return-item .io-val {
  color: var(--text3);
}
.op-return-decoded {
  font-size: .68rem;
  color: var(--accent);
  opacity: .85;
  margin-top: 3px;
  word-break: break-all;
  font-family: var(--font);
}

/* Flow Arrow */
.tx-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 30px;
  min-width: 60px;
}
.tx-flow-arrow .arrow-icon {
  font-size: 1.8rem;
  color: var(--accent);
  line-height: 1;
}
.tx-flow-arrow .arrow-fee {
  font-size: .6rem;
  color: var(--red);
  text-align: center;
  white-space: nowrap;
}

/* Flow Summary */
.tx-flow-summary {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: .78rem;
  flex-wrap: wrap;
}
.tx-flow-summary .fs-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tx-flow-summary .fs-label { color: var(--text3); font-size: .68rem; text-transform: uppercase; }
.tx-flow-summary .fs-val { color: var(--text1); font-weight: 600; }
.tx-flow-summary .fs-val.green { color: var(--green); }
.tx-flow-summary .fs-val.red { color: var(--red); }

/* Fee rate color utility */
.fee-color { font-weight: 600; }
.fee-color[data-level="extreme"] { color: #ff4444; }
.fee-color[data-level="high"] { color: #ff8800; }
.fee-color[data-level="medium"] { color: #f7931a; }
.fee-color[data-level="low"] { color: #ffcc00; }
.fee-color[data-level="economy"] { color: #44bb44; }
.fee-color[data-level="minimal"] { color: #4488ff; }
.fee-color[data-level="negligible"] { color: #445566; }

/* ═══════════════════════════════════════════
   MINING PAGE
   ═══════════════════════════════════════════ */
.mining-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.mining-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.mining-card h3 {
  font-size: .8rem;
  color: var(--text2);
  margin-bottom: 12px;
}
.mining-card canvas {
  width: 100%;
  height: 160px;
  display: block;
}

/* Difficulty progress bar */
.diff-bar-wrap {
  background: var(--bg);
  border-radius: 4px;
  height: 24px;
  overflow: hidden;
  margin: 8px 0;
  position: relative;
}
.diff-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 4px;
  transition: width .5s;
}
.diff-bar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .7rem;
  font-weight: 600;
  color: var(--text1);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Top Miners table */
.miners-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
}
.miners-table th {
  text-align: left;
  color: var(--text3);
  font-size: .65rem;
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.miners-table td {
  padding: 6px 8px;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
}
.miners-table tr:last-child td { border-bottom: none; }
.miner-bar {
  height: 6px;
  background: var(--accent);
  border-radius: 3px;
  min-width: 4px;
}

/* Mining stat cards */
.mining-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ms-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.ms-card .ms-val { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.ms-card .ms-lbl { font-size: .68rem; color: var(--text3); margin-top: 4px; text-transform: uppercase; }

/* ═══════════════════════════════════════════
   ADDRESS PAGE
   ═══════════════════════════════════════════ */
.addr-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.addr-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.addr-stat .as-val { font-size: .95rem; font-weight: 700; color: var(--accent); }
.addr-stat .as-lbl { font-size: .65rem; color: var(--text3); margin-top: 4px; }
.addr-stat.addr-balance .as-val { font-size: 1.3rem; }
.addr-stat.addr-balance { border-color: var(--accent); background: rgba(247,147,26,0.04); }

/* ═══════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════ */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(13,17,23,0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  justify-content: space-around;
  align-items: center;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.mnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  color: var(--text3);
  font-size: .6rem;
  text-decoration: none;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
.mnav-item .mnav-icon { font-size: 1.1rem; line-height: 1; }
.mnav-item .mnav-label { font-size: .65rem; }
.mnav-item.active { color: var(--accent); }

/* Mobile Search Overlay */
.mobile-search-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: rgba(13,17,23,0.98);
  backdrop-filter: blur(12px);
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px;
}
.mobile-search-overlay.open {
  display: flex;
}
.mobile-search-inner {
  width: 100%;
  max-width: 500px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.mobile-search-inner input {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--accent);
  color: var(--text1);
  font-family: var(--font-ko);
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: 8px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(247,147,26,0.15);
}
.mobile-search-inner input::placeholder { color: var(--text3); }
.mobile-search-inner button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 1.2rem;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.mobile-search-inner button:hover { border-color: var(--accent); color: var(--accent); }

/* ── Mobile Tools Sheet ── */
.mobile-tools-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
}
.mobile-tools-sheet.open { display: flex; }
.mobile-tools-inner {
  width: 100%;
  max-width: 500px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  animation: sheetUp 0.25s ease;
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.mobile-tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text1);
  font-family: var(--font-ko);
}
.mobile-tools-header button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 1rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.mobile-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mobile-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text2);
  font-size: .72rem;
  font-family: var(--font-ko);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.mobile-tool-item:hover, .mobile-tool-item:active {
  border-color: var(--accent);
  color: var(--accent);
}
.mobile-tool-item svg { stroke: currentColor; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  nav { gap: 8px; padding: 0 12px; }
  .nav-search #search-wrap { max-width: none; }
  .search-shortcut { display: none; }
  #nav-links { display: none; }
  #stats-bar { gap: 16px; padding: 10px 12px; font-size: .9rem; }
  .stat-val { font-size: 1rem; }
  main { padding: 12px; padding-bottom: 70px; }
  .blocks-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .tx-flow { grid-template-columns: 1fr; }
  .tx-flow-arrow {
    flex-direction: row;
    padding: 0;
    min-width: auto;
  }
  .tx-flow-arrow .arrow-icon { transform: rotate(90deg); }
  .mining-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; }
  footer { padding-bottom: 70px; }
  #mobile-bottom-nav { display: flex; }
  .appbar { display: none !important; }
}

@media (max-width: 600px) {
  #stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 12px;
    padding: 10px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .stat { min-width: 0; border-right: none; padding: 0; }
}

@media (max-width: 480px) {
  #stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
  }
  .info-grid { grid-template-columns: 1fr; }
  .addr-summary { grid-template-columns: 1fr 1fr; }
  .mining-stats-row { grid-template-columns: 1fr 1fr; }
  #mempool-canvas { height: 190px; }
  .stat-val { font-size: .9rem; }
}

/* ── 폰트 분리 적용 ── */
/* Space Mono: 해시, TXID, 숫자, 코드 요소 */
.page-hash, .txid-col, .info-value.small,
#search-input, .logo, .stat-val,
.tx-table td, .tx-table th,
.info-value, code {
  font-family: var(--font);
}

/* Pretendard: 한글 UI, 레이블, 버튼, 본문 */
.stat-lbl, .section-title, .info-label,
.block-card .bc-row, .bc-miner, .bc-time,
#nav-links a, #lang-btn, #theme-btn, .page-title,
.badge, footer, .loading, .error-box,
h1, h2, h3, h4, button, select,
.mining-card h3, .addr-stat .as-lbl,
.ms-card .ms-lbl, .mempool-hint, .search-hint {
  font-family: var(--font-ko);
}

/* ═══════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════ */
#toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 280px;
  max-width: 380px;
  cursor: pointer;
  transform: translateX(120%);
  transition: transform .3s ease;
  font-size: .78rem;
}
.toast.show { transform: translateX(0); }
.toast .toast-title { color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.toast .toast-body { color: var(--text2); }
.toast .toast-close { float: right; color: #555; cursor: pointer; margin-left: 8px; }

/* ═══════════════════════════════════════════
   FEE CALCULATOR MODAL
   ═══════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 24px;
  min-width: 340px;
  max-width: 500px;
  width: 90%;
}
.modal h2 { font-size: .95rem; margin-bottom: 16px; }
.modal-close {
  float: right;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 1.1rem;
  cursor: pointer;
}
.modal-close:hover { color: var(--accent); }
.modal select, .modal input[type="number"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text1);
  font-family: var(--font-ko);
  font-size: .8rem;
  padding: 8px 10px;
  border-radius: 6px;
  outline: none;
  margin-bottom: 12px;
}
.modal select:focus, .modal input[type="number"]:focus {
  border-color: var(--accent);
}
.modal label {
  display: block;
  font-size: .72rem;
  color: var(--text3);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
  margin-top: 8px;
}
.fee-table th {
  background: var(--bg);
  color: var(--text3);
  font-size: .65rem;
  text-transform: uppercase;
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.fee-table td {
  padding: 8px;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
}
.fee-table tr:last-child td { border-bottom: none; }

/* Floating Calculator Button */
#fee-calc-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(247,147,26,0.4);
  transition: transform .2s;
}
#fee-calc-btn:hover { transform: scale(1.1); }

/* ═══════════════════════════════════════════
   SKELETON SHIMMER
   ═══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, #161b22 25%, #1c2128 50%, #161b22 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.skeleton-table { width: 100%; }
.skeleton-table-row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.skeleton-table-row .skeleton { height: 14px; }

.skeleton-addr-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.skeleton-addr-stat .skeleton { height: 18px; margin: 0 auto 6px; width: 60%; }
.skeleton-addr-stat .skeleton:last-child { height: 10px; width: 40%; margin-bottom: 0; }

/* ═══════════════════════════════════════════
   FAVORITES CHIPS
   ═══════════════════════════════════════════ */
.fav-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .72rem;
  cursor: pointer;
  transition: border-color .2s;
}
.fav-chip:hover { border-color: var(--accent); }
.fav-chip .fav-remove { color: #555; margin-left: 4px; font-size: .8rem; }
.fav-chip .fav-remove:hover { color: var(--red); }

.fav-section {
  margin-bottom: 20px;
}
.fav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Fav star button */
.fav-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: 1rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
  margin-left: auto;
}
.fav-btn:hover { border-color: var(--accent); color: var(--accent); }
.fav-btn.active { color: #ffd700; border-color: #ffd700; }

/* ═══════════════════════════════════════════
   MONITOR BADGE
   ═══════════════════════════════════════════ */
.monitor-badge {
  background: var(--red);
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.monitor-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
}
.monitor-btn:hover { border-color: var(--accent); color: var(--accent); }
.monitor-btn.active { background: rgba(247,147,26,0.15); border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════
   CHARTS SECTION
   ═══════════════════════════════════════════ */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.chart-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.chart-card h3 {
  font-size: .8rem;
  color: var(--text2);
  margin-bottom: 6px;
}
.chart-card .chart-subtitle {
  font-size: .72rem;
  color: var(--text3);
  margin-bottom: 10px;
}
.chart-card canvas {
  width: 100%;
  height: 160px;
  display: block;
}
.price-current {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}
.price-change {
  font-size: .75rem;
  font-weight: 600;
  margin-left: 8px;
}
.price-change.up { color: var(--green); }
.price-change.down { color: var(--red); }

/* ═══════════════════════════════════════════
   LIGHTNING STATS
   ═══════════════════════════════════════════ */
.lightning-section {
  margin-bottom: 24px;
}
.lightning-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s;
}
.lightning-header:hover { border-color: var(--accent); }
.lightning-header h3 {
  font-size: .85rem;
  color: var(--text2);
  margin: 0;
}
.lightning-header .toggle-icon {
  color: var(--text3);
  font-size: .8rem;
  transition: transform .2s;
}
.lightning-header.open .toggle-icon { transform: rotate(180deg); }
.lightning-header.open {
  border-radius: var(--radius) var(--radius) 0 0;
}
.lightning-body {
  display: none;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 16px;
  background: var(--bg2);
}
.lightning-body.open { display: block; }
.lightning-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.ln-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.ln-stat .ln-val { font-size: 1rem; font-weight: 700; color: var(--accent); }
.ln-stat .ln-lbl { font-size: .68rem; color: var(--text3); margin-top: 4px; text-transform: uppercase; }

/* ═══════════════════════════════════════════
   QR CODE MODAL
   ═══════════════════════════════════════════ */
.qr-modal-content {
  text-align: center;
}
.qr-modal-content #qr-code {
  margin: 16px auto;
  display: inline-block;
}
.qr-modal-content #qr-code img {
  border-radius: 8px;
}
.qr-addr-text {
  color: var(--text2);
  font-size: .7rem;
  word-break: break-all;
  margin: 12px 0;
  padding: 8px;
  background: var(--bg);
  border-radius: 6px;
}
.copy-btn {
  background: var(--accent);
  border: none;
  color: #000;
  font-family: var(--font-ko);
  font-size: .78rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .2s;
}
.copy-btn:hover { opacity: .85; }

/* ═══════════════════════════════════════════
   PAGE ACTION BUTTONS
   ═══════════════════════════════════════════ */
.page-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  #toast-container { right: 10px; left: 10px; }
  .toast { min-width: auto; max-width: none; }
  #fee-calc-btn { bottom: 70px; right: 12px; width: 42px; height: 42px; font-size: 1rem; }
  .charts-grid { grid-template-columns: 1fr; }
  .lightning-stats-grid { grid-template-columns: 1fr 1fr; }
}


/* ── SVG 아이콘 ── */
.icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--accent);
  stroke: currentColor;
  position: relative;
  top: -1px;
}
.icon svg { width: 100%; height: 100%; }
.section-title .icon, h3 .icon { width: 13px; height: 13px; }
.page-title .icon { width: 16px; height: 16px; }
.monitor-btn .icon { color: inherit; margin-right: 4px; }


/* ── 검색 힌트 ── */
#search-hint {
  display: flex;
  gap: 4px;
  font-size: .6rem;
  color: var(--text3);
  margin-top: 4px;
  justify-content: center;
  font-family: var(--font);
  opacity: 0;
  transition: opacity .2s;
}
#search-wrap:focus-within #search-hint { opacity: 1; }
.hint-sep { color: var(--border); }

/* ── 언어 드롭다운 ── */
#lang-wrap { position: relative; }
#lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  z-index: 200;
  min-width: 100%;
  box-shadow: var(--shadow);
}
#lang-menu.open { display: block; }
#lang-menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text2);
  font-family: var(--font-ko);
  font-size: .72rem;
  padding: 7px 14px;
  cursor: pointer;
  text-align: center;
  transition: background .15s, color .15s;
}
#lang-menu button:hover { background: var(--bg3); color: var(--accent); }

/* ── 복사 버튼 ── */
.page-hash-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; overflow: hidden; }
.page-hash-wrap .page-hash { flex: 1; min-width: 0; margin-bottom: 0; }
.copy-hash-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  font-size: .75rem;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
  font-family: var(--font-ko);
}
.copy-hash-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── TX 상태 바 ── */
.tx-status-bar {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: .78rem;
  margin-bottom: 12px;
  font-family: var(--font-ko);
}
.tx-status-bar.unconfirmed { background: rgba(247,147,26,.1); border: 1px solid rgba(247,147,26,.3); color: #f7931a; }
.tx-status-bar.confirmed { background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.3); color: var(--green); }

/* ── OP_RETURN ── */
.op-return-decoded { font-size: .68rem; color: var(--accent); opacity: .85; margin-top: 3px; word-break: break-all; font-family: var(--font); }
.op-return-item { opacity: .8; }

/* ── 가격 변동 ── */
.stat-change { font-size: .65rem; line-height: 1; display: block; }
.stat-change.up { color: var(--green); }
.stat-change.down { color: var(--red); }
.price-current { font-weight: 600; color: var(--text1); margin-right: 6px; }
.price-change { font-size: .7rem; }
.price-change.up { color: var(--green); }
.price-change.down { color: var(--red); }

/* ── 즐겨찾기 카운트 ── */
.fav-count { font-size: .65rem; color: var(--text3); padding: 4px 8px; font-family: var(--font-ko); }

/* ── 모바일 네비 활성 ── */
.mnav-item.active { color: var(--accent) !important; }
.mnav-item.active .mnav-icon svg { stroke: var(--accent); }

/* ── block-card hover shadow ── */
.block-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.3); }
[data-theme="light"] .block-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* ── body transition ── */
body { transition: background .2s, color .2s; }

/* ── 모바일 반응형 보완 ── */
@media (max-width: 600px) {
  .page-hash-wrap { flex-direction: column; align-items: flex-start; }
  .page-hash-wrap .page-hash { width: 100%; }
  .tx-flow { flex-direction: column; }
  .tx-flow-arrow { flex-direction: row; padding: 8px 0; }
}

/* ── 모바일 헤더 ── */
@media (max-width: 480px) {
  .nav-top { padding: 0 12px; }
  #nav-links { display: none; }
  .nav-right { gap: 6px; }
}

/* ── 블록 네비게이션 ── */
.block-nav { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.block-nav-btn { color:var(--text2); font-size:.8rem; padding:5px 12px; border:1px solid var(--border); border-radius:5px; text-decoration:none; cursor:pointer; background:none; transition:all .15s; font-family:var(--font); }
.block-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
.block-nav-btn.disabled { opacity:.35; cursor:default; pointer-events:none; }
.block-nav-current { color:var(--accent); font-family:var(--font); font-size:.9rem; font-weight:700; }

/* ── 공유 버튼 ── */
.share-btn { background:none; border:1px solid var(--border); color:var(--text3); padding:4px 8px; border-radius:5px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:all .15s; }
.share-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── 검색 히스토리 ── */
.search-history-drop { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--bg2); border:1px solid var(--border); border-radius:7px; z-index:300; box-shadow:var(--shadow); overflow:hidden; }
.sh-item { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:.78rem; transition:background .12s; color:var(--text2); }
.sh-item:hover { background:var(--bg3); color:var(--text1); }
.sh-q { flex:1; font-family:var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-t { font-size:.62rem; color:var(--text3); font-family:var(--font-ko); }

/* ── 오프라인 바 ── */
#offline-bar { position:fixed; bottom:70px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:.72rem; padding:6px 18px; border-radius:20px; z-index:9999; font-family:var(--font-ko); box-shadow:0 2px 8px rgba(0,0,0,.4); white-space:nowrap; }

/* ── 주소 라벨 ── */
.addr-label-display { font-size:.75rem; color:var(--text3); margin-bottom:6px; padding:3px 8px; background:var(--bg2); border-radius:5px; display:inline-block; font-family:var(--font-ko); }

/* ── 단위 변환기 ── */
.conv-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.conv-label { width:32px; font-size:.7rem; color:var(--text3); font-family:var(--font); text-align:right; flex-shrink:0; }
.conv-input { flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:7px 10px; color:var(--text1); font-family:var(--font); font-size:.85rem; outline:none; transition:border .15s; }
.conv-input:focus { border-color:var(--accent); }

/* ── 코인베이스 메시지 ── */
.coinbase-msg { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:7px; margin-bottom:14px; font-size:.8rem; }
.coinbase-label { color:var(--accent); font-family:var(--font-ko); font-size:.7rem; font-weight:600; padding:2px 7px; border:1px solid var(--accent); border-radius:4px; white-space:nowrap; flex-shrink:0; }
.coinbase-text { color:var(--text2); font-family:var(--font); word-break:break-all; line-height:1.5; }

/* ── 주소 UTXO 탭 ── */
.addr-tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:0; }
.addr-tab { padding:7px 16px; font-size:.8rem; color:var(--text3); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; font-family:var(--font-ko); }
.addr-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.utxo-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.utxo-table th { color:var(--text3); font-weight:500; padding:6px 10px; border-bottom:1px solid var(--border); text-align:left; }
.utxo-table td { padding:7px 10px; border-bottom:1px solid var(--border); color:var(--text2); }
.utxo-table td:last-child { color:var(--accent); font-family:var(--font); }
.utxo-sum { font-size:.82rem; color:var(--text2); margin-bottom:10px; }
.utxo-sum strong { color:var(--accent); font-family:var(--font); }

/* ── Learn 교육 링크 ── */
.learn-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; padding:10px 20px; background:var(--bg2); border:1px solid var(--border); border-radius:7px; max-width:var(--max-w); margin:10px auto; font-size:.78rem; }
.learn-links svg { color:var(--text3); flex-shrink:0; }
.learn-label { color:var(--text3); font-family:var(--font-ko); white-space:nowrap; margin-right:2px; }
.learn-chip { color:var(--text2); text-decoration:none; padding:3px 10px; border:1px solid var(--border); border-radius:4px; font-family:var(--font-ko); font-size:.72rem; transition:all .15s; white-space:nowrap; }
.learn-chip:hover { border-color:var(--accent); color:var(--accent); }

/* ── RBF / CPFP 배지 ── */
.tx-badge { font-size:.62rem; font-weight:700; padding:2px 6px; border-radius:4px; font-family:var(--font); letter-spacing:.04em; vertical-align:middle; }
.tx-badge.rbf { background:rgba(255,68,68,.15); color:#ff4444; border:1px solid rgba(255,68,68,.3); }
.tx-badge.cpfp { background:rgba(68,136,255,.15); color:#4488ff; border:1px solid rgba(68,136,255,.3); }

/* ── 변환기 모달 ── */
.modal-box { background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:20px; width:90%; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:.9rem; font-weight:600; color:var(--text1); }

/* ── 모바일 블록카드: 번호 강조, 덜 중요한 요소 축소 ── */
@media (max-width: 600px) {
  .block-card .bc-top { flex-direction: column; gap: 2px; align-items: flex-start; }
  .block-card .bc-height { font-size: 1.25rem; }
  .block-card .bc-time { font-size: .68rem; }
  .block-card .bc-fee-range { display: none; }
  .block-card .bc-fee-bar { display: none; }
  .block-card { padding: 12px; }
}

/* ── Skeleton 로딩 ── */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skel { border-radius:6px; background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%); background-size:800px 100%; animation:shimmer 1.4s infinite; }
.skeleton-page { padding:20px 0; }
.skel-title { height:28px; width:220px; margin-bottom:16px; }
.skel-hash { height:18px; width:100%; max-width:580px; margin-bottom:20px; }
.skel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.skel-info-item { height:56px; }
.skel-section { height:120px; margin-top:16px; }

/* ── 404 페이지 ── */
.not-found-page { text-align:center; padding:60px 20px; }
.nf-code { font-size:5rem; font-weight:700; color:var(--accent); font-family:var(--font); opacity:.4; line-height:1; }
.nf-msg { color:var(--text2); font-size:.9rem; margin-top:12px; font-family:var(--font-ko); }

/* ── 키보드 단축키 ── */
.shortcuts-list { padding:4px 0 8px; }
.shortcut-row { display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--border); }
.shortcut-row:last-child { border-bottom:none; }
.shortcut-key { background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:3px 8px; font-family:var(--font); font-size:.72rem; color:var(--text2); white-space:nowrap; }
.shortcut-desc { color:var(--text2); font-size:.8rem; font-family:var(--font-ko); }

/* ── TX 플로우 다이어그램 ── */
.tx-flow-diagram { display:flex; align-items:flex-start; gap:16px; padding:16px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; margin-top:16px; overflow-x:auto; }
.tfd-col { display:flex; flex-direction:column; gap:6px; min-width:150px; flex:1; }
.tfd-node { font-size:.68rem; padding:6px 10px; background:var(--bg3); border:1px solid var(--border); border-radius:5px; font-family:var(--font); color:var(--text2); display:flex; flex-direction:column; gap:2px; }
.tfd-node span { color:var(--accent); font-size:.65rem; }
.tfd-in { border-left:2px solid #4488ff; }
.tfd-out { border-left:2px solid var(--accent); }
.tfd-arrow { font-size:1.4rem; color:var(--text3); flex-shrink:0; padding-top:10px; }
.tfd-more { font-size:.65rem; color:var(--text3); text-align:center; padding:4px; }

/* ── Treemap 범례 ── */
.treemap-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:.68rem; color:var(--text2); }
.treemap-legend span { display:flex; align-items:center; gap:4px; }
.treemap-legend i { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ── 접근성: focus-visible ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 빈 상태 UI ── */
.empty-state { text-align:center; padding:32px 16px; color:var(--text3); font-size:.82rem; font-family:var(--font-ko); }
.empty-state::before { content:'○'; display:block; font-size:2rem; margin-bottom:10px; opacity:.3; }

/* ── TX 금액 합계 ── */
.tx-sum { display:flex; gap:20px; flex-wrap:wrap; font-size:.78rem; color:var(--text2); margin-bottom:12px; font-family:var(--font-ko); }
.tx-sum b { color:var(--accent); font-family:var(--font); }

/* ── 페이지 전환 애니메이션 ── */
#app { animation: pageIn .15s ease; }
@keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── Stats Bar width 고정 ── */
.stat-val { min-width:60px; display:inline-block; }

/* ── Stats Bar 툴팁 ── */
.stat[title]:hover::after { content:attr(title); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--bg3); border:1px solid var(--border); color:var(--text2); font-size:.65rem; padding:4px 8px; border-radius:5px; white-space:nowrap; pointer-events:none; z-index:100; font-family:var(--font-ko); }
.stat { position:relative; }

/* ── @media print ── */
@media print {
  header, footer, #stats-bar, .nav-search, .page-actions, .fee-calc-modal, .modal-overlay, #app > .section:last-child { display:none !important; }
  body { background:#fff; color:#000; }
  .page-hash { font-size:.7rem; word-break:break-all; }
  .info-grid { grid-template-columns:1fr 1fr; }
}

/* ── 난이도 타이머 / 체인 상태 ── */
.chain-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cs-card { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:14px; }
.cs-label { font-size:.65rem; color:var(--text3); font-family:var(--font-ko); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.cs-val { font-size:.78rem; color:var(--text2); font-family:var(--font-ko); line-height:1.7; }
.diff-blocks { color:var(--accent); font-family:var(--font); font-weight:700; }
.diff-days { color:var(--text3); font-size:.72em; }
.diff-pct.up { color:#3fb950; } .diff-pct.down { color:#f85149; }
@media (max-width:480px) { .chain-status-grid { grid-template-columns:1fr; } }

/* ── 즐겨찾기 대시보드 ── */
.fav-dash-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.fav-dash-row:last-child { border-bottom:none; }
.fav-dash-addr { color:var(--accent); font-family:var(--font); font-size:.78rem; text-decoration:none; }
.fav-dash-bal { color:var(--text2); font-family:var(--font); font-size:.78rem; }

/* ── 주소 클러스터 ── */
.cluster-list { display:flex; flex-direction:column; gap:4px; max-height:320px; overflow-y:auto; }
.cluster-row { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--border); }
.cluster-addr { font-family:var(--font); font-size:.72rem; color:var(--accent); text-decoration:none; flex:1; }
.cluster-cnt { font-size:.68rem; color:var(--text3); font-family:var(--font); flex-shrink:0; }

/* ── 라이트닝 노드 지도 ── */
.ln-country-list { display:flex; flex-direction:column; gap:4px; max-height:360px; overflow-y:auto; }
.ln-country-row { display:grid; grid-template-columns:28px 80px 1fr 48px 40px; align-items:center; gap:8px; font-size:.72rem; }
.ln-flag { font-size:.9rem; }
.ln-cc { color:var(--text2); font-family:var(--font-ko); font-size:.7rem; }
.ln-bar-wrap { background:var(--bg3); border-radius:3px; height:6px; overflow:hidden; }
.ln-bar { background:var(--accent); height:100%; border-radius:3px; transition:width .3s; }
.ln-count { color:var(--text2); font-family:var(--font); text-align:right; }
.ln-pct { color:var(--text3); font-family:var(--font); text-align:right; }

/* ── BTC 구매력 계산기 ── */
.btc-calc-grid { display:flex; flex-direction:column; gap:6px; }
.btc-calc-row { display:grid; grid-template-columns:52px 90px 20px 1fr; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); font-size:.78rem; }
.btc-calc-year { color:var(--text3); font-family:var(--font); }
.btc-calc-price { color:var(--text2); font-family:var(--font); }
.btc-calc-arrow { color:var(--text3); text-align:center; }
.btc-calc-mult { color:var(--accent); font-family:var(--font); font-weight:700; }

/* ── 고래 TX ── */
.whale-tx { background:rgba(247,147,26,.05); }
.whale-tx td:first-child::before { content:'▲ '; }
.whale-tx-mega { background:rgba(247,147,26,.12); }
.whale-tx-mega td:first-child::before { content:'★ '; }

/* ── 푸터 방문자 카운터 ── */
.footer-visitor {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  color: var(--text3);
  font-family: var(--font-ko);
}
#footer-visitor-count {
  font-family: var(--font);
  color: var(--text2);
}


/* ── 설정 드롭다운 ── */
.settings-dropdown { position: relative; }
.settings-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 200px;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  overflow: hidden;
}
.settings-panel.open { display: block; }
.settings-section { padding: 8px 6px; }
.settings-section--border { border-top: 1px solid var(--border); }
.settings-label {
  font-size: .68rem;
  color: var(--text3);
  font-family: var(--font-ko);
  padding: 2px 8px 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text2);
  font-family: var(--font-ko);
  font-size: .78rem;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
}
.settings-item:hover { background: var(--bg3); color: var(--accent); }
.settings-item svg { flex-shrink: 0; stroke: currentColor; width: 14px; height: 14px; }
.settings-lang-row {
  display: flex;
  gap: 4px;
  padding: 2px 8px 4px;
}
.settings-lang-btn {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: var(--font);
  font-size: .72rem;
  padding: 5px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: all .2s;
}
.settings-lang-btn:hover,
.settings-lang-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(247,147,26,.08); }
/* 기존 lang-wrap 숨김 */
#lang-wrap { display: none !important; }
#fee-calc-header-btn { display: none !important; }

/* Appbar */
.appbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:12px 20px;border-top:1px solid var(--border);background:var(--bg2);position:fixed;bottom:0;left:0;right:0;z-index:90;backdrop-filter:blur(10px)}
.appbar a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text2);font-size:.62rem;font-family:var(--font-ko);background:var(--bg3);min-width:56px;transition:all .2s}
.appbar a:hover,.appbar a.active{border-color:var(--accent);color:var(--accent)}
.appbar a svg{flex-shrink:0}

/* ── 상단 진행 바 (NProgress 스타일) ── */
#nprogress { pointer-events: none; }
#nprogress .bar { background: var(--accent); position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 3px; }
#nprogress .bar::after { content: ''; display: block; position: absolute; right: 0; width: 100px; height: 100%; box-shadow: 0 0 10px var(--accent), 0 0 5px var(--accent); opacity: 1; transform: rotate(3deg) translateY(-4px); }
#nprogress .peg { display: block; position: absolute; right: 0; width: 100px; height: 100%; box-shadow: 0 0 10px var(--accent), 0 0 5px var(--accent); opacity: 1; transform: rotate(3deg) translateY(-4px); }
@keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ── Accessibility Improvements ── */

/* Minimum touch target size (WCAG 2.5.8) */
.mnav-item { min-height: 44px; }
.settings-item { min-height: 44px; min-width: 44px; }
.mobile-tool-item { min-height: 44px; min-width: 44px; }

/* Improved contrast for --text3 (#6e7681) on dark bg */
[data-theme="dark"] .stat-lbl,
[data-theme="dark"] .stat-change { color: #8b949e; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #nprogress .bar { transition: none !important; }
}