/* ═══════════════════════════════════════════════════
   서울 지하철 6호선 — 탈출 어드벤처
   다크 터미널 테마 (Navy-Brown / Line 6 Orange)
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;700&display=swap');

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

/* ── 다크 테마 (기본) ── */
:root {
  --bg:        #070b0e;
  --bg2:       #0b1218;
  --bg3:       #0f1820;
  --text:      #b8c8d8;
  --dim:       #4a6070;
  --green:     #5aaa7a;
  --bright:    #80e0a8;
  --red:       #aa5050;
  --gold:      #c8a840;
  --blue:      #4080b0;
  --line6:     #c05020;
  --line6dim:  #703010;
  --border:    #152030;
  --border2:   #1e3040;
  --panel-bg:  #060e14;
  --touch-min: 44px;
  --face-calm: #80e0a8;
  --face-anxious: #ffaa22;
  --face-fear: #ff5555;
  --face-madness: #cc55ff;
}

/* ── 라이트 테마 ── */
html.theme-light {
  --bg:        #f0ece4;
  --bg2:       #e8e2d8;
  --bg3:       #dfd8cc;
  --text:      #2a2018;
  --dim:       #7a6a54;
  --green:     #2a7a3a;
  --bright:    #1a6030;
  --red:       #9a2020;
  --gold:      #8a6010;
  --blue:      #1a5080;
  --line6:     #c03010;
  --line6dim:  #e05030;
  --border:    #c8bca8;
  --border2:   #b0a490;
  --panel-bg:  #ece6dc;
  --face-calm: #1a6a3a;
  --face-anxious: #8a5010;
  --face-fear: #9a2020;
  --face-madness: #6010a0;
}

/* 라이트 테마 개별 오버라이드 */
html.theme-light body {
  background: var(--bg);
  color: var(--text);
}
html.theme-light #header {
  background: linear-gradient(to bottom, #e0d8cc, transparent);
}
html.theme-light #mobile-tabs {
  background: #ddd6c8;
  border-bottom-color: var(--border);
}
html.theme-light #train-panel {
  background: var(--panel-bg);
  border-color: var(--border);
}
html.theme-light #train-panel-header {
  background: linear-gradient(to right, #ddd6c8, #d4ccbe);
  border-bottom-color: var(--border);
}
html.theme-light #train-viewport {
  background: #e8e0d0;
  border-color: var(--border);
}
html.theme-light #train-station-info {
  background: #e4dcd0;
  border-color: var(--border);
}
html.theme-light #train-log {
  background: #ece6dc;
  border-color: var(--border);
}
html.theme-light .tlog-entry       { color: #5a4a34; border-left-color: #b0a080; }
html.theme-light .tlog-entry.event { color: #8a3010; border-left-color: #c05020; }
html.theme-light .tlog-entry.warn  { color: #8a4000; border-left-color: #c06010; }
html.theme-light .tlog-entry.new   { color: #1a5030; border-left-color: #2a7a40; }

html.theme-light #avatar-wrap {
  background: var(--panel-bg);
  border-top-color: var(--border);
}
html.theme-light #avatar-ascii {
  color: var(--green);
}
html.theme-light #avatar-dialog {
  color: var(--text);
}
html.theme-light #avatar-name {
  color: var(--gold);
}

html.theme-light #car-strip {
  background: var(--panel-bg);
  border-top-color: var(--border);
}
html.theme-light .car-item {
  border-color: var(--border2);
  color: var(--dim);
}
html.theme-light .car-item.active {
  border-color: var(--line6);
  color: var(--line6);
  background: #fff8e8;
  box-shadow: 0 0 5px rgba(192,48,16,0.25);
}
html.theme-light .car-item:hover {
  border-color: var(--blue);
  color: var(--blue);
}

html.theme-light #game {
  background: var(--bg2);
  border-color: var(--border);
}
html.theme-light #stat-bar {
  background: #ddd6c8;
  border-bottom-color: var(--border);
  color: #5a4a30;
}
html.theme-light #output        { color: var(--text); }
html.theme-light .line.narrator { color: #3a2a14; }
html.theme-light .line.system   { color: #4a6a3a; }
html.theme-light .line.highlight{ color: #8a3010; }
html.theme-light .line.announce { color: #1a4a6a; }
html.theme-light .line.title    { color: #c03010; }
html.theme-light .line.subtitle { color: #7a5a2a; }
html.theme-light .line.name     { color: #2a5a2a; }
html.theme-light .line.divider  { color: #b0a080; }

html.theme-light .choice-btn {
  background: linear-gradient(135deg, #ddd6c8, #d4ccbc);
  border-color: #b0a080;
  color: #3a2a14;
}
html.theme-light .choice-btn:hover {
  background: linear-gradient(135deg, #d4ccbc, #c8c0ac);
  border-color: #c03010;
  color: #c03010;
}

html.theme-light .ascii-box, html.theme-light .ascii-station, html.theme-light .ascii-hanja {
  background: #e0d8c8;
  border-color: #b0a080;
}
html.theme-light .ts-outer   { color: #7a6a50; }
html.theme-light .ts-window  { color: #5a4a30; }
html.theme-light .ts-window-lit { color: #c03010; }
html.theme-light .ts-rail    { color: #9a8a6a; }
html.theme-light .ts-arrive  { color: #1a5a2a; }
html.theme-light .ts-tunnel  { color: #c8bca8; }
html.theme-light .ts-pass    { color: #3a6a8a; }
html.theme-light .ts-seat    { color: #7a5a30; }
html.theme-light .ts-floor   { color: #9a8a6a; }

html.theme-light .ep-header  { background: #ddd6c8; border-color: #b0a080; }
html.theme-light .ep-num     { color: #7a6a50; }
html.theme-light .ep-title   { color: #c03010; }
html.theme-light .ep-sub     { color: #5a4a30; }

html.theme-light #progress-wrap { background: #ddd6c8; border-color: #b0a080; }
html.theme-light #progress-label { color: #9a8a6a; }

html.theme-light .corner-btn {
  background: #ddd6c8;
  border-color: #b0a080;
  color: #5a4a30;
}
html.theme-light .corner-btn:hover, html.theme-light .corner-btn.active {
  background: #d4ccbc;
  border-color: #c03010;
  color: #c03010;
}
html.theme-light #skip-btn {
  background: #ddd6c8;
  border-color: #b0a080;
  color: #7a6a50;
}

/* 라이트 테마 노선도 */
html.theme-light #linemap-wrap   { background: #e8e0d0; border-color: #b0a080; }
html.theme-light .lm-svg-wrap    { background: #f0ece4; border-color: #c8bca8; }
html.theme-light .lm-line-bg     { stroke: #d4ccbc; }
html.theme-light .lm-line        { stroke: #c03010; }
html.theme-light .lm-dot         { fill: #f0ece4; stroke: #c03010; }
html.theme-light .lm-dot.event   { fill: #fff8e8; stroke: #8a6010; }
html.theme-light .lm-dot.xfer    { fill: #e8f0f8; stroke: #1a5080; }
html.theme-light .lm-label       { fill: #5a4a30; }
html.theme-light .lm-label.ev    { fill: #8a6010; }
html.theme-light .lm-label.xf    { fill: #1a5080; }
html.theme-light .lm-code        { fill: #9a8a6a; }
html.theme-light #lm-info        { background: #e8e0d0; border-color: #c8bca8; }
html.theme-light .lm-info-name   { color: #c03010; }
html.theme-light .lm-info-placeholder { color: #9a8a6a; }

/* 라이트 테마 헤더 버튼 */
html.theme-light #fast-btn {
  border-color: #c8bca8;
  color: #7a6a50;
  background: transparent;
}
html.theme-light #fast-btn:hover,
html.theme-light #fast-btn.active { border-color: #c03010; color: #c03010; background: #ece6dc; }

/* 라이트 테마 저장 모달 */
html.theme-light #save-modal-overlay { background: rgba(180,170,150,0.72); }
html.theme-light #save-modal         { background: #f0ece4; border-color: #c8bca8; color: #2a2018; box-shadow: 0 8px 40px rgba(0,0,0,0.18); }
html.theme-light #save-modal-header  { border-bottom-color: #c8bca8; color: #c03010; }
html.theme-light #save-modal-close   { border-color: #c8bca8; color: #7a6a50; background: transparent; }
html.theme-light #save-modal-close:hover { color: #c03010; border-color: #c03010; }
html.theme-light #save-modal-info    { background: #e8e0d0; border-color: #c8bca8; color: #5a4a30; }
html.theme-light #save-url           { background: #e0d8cc; border-color: #c8bca8; color: #2a2018; }
html.theme-light #save-url-copy      { background: linear-gradient(135deg, #c8e0b8, #b8d0a8); color: #2a5020; border-color: #9ab880; }
html.theme-light .save-load-btn      { background: linear-gradient(135deg, #d8e8f0, #c8d8e8); border-color: #a0b8cc; color: #1a4060; }

/* 라이트 테마 이어하기(세이브 로드) 모달 */
html.theme-light #load-modal-overlay { background: rgba(180,170,150,0.72); }
html.theme-light #load-modal         { background: #f0ece4; border-color: #c8bca8; color: #2a2018; }
html.theme-light #load-modal h3      { color: #c03010; }

/* 라이트 테마 미니맵 */
html.theme-light #minimap-wrap  { background: #e0d8cc; border-color: #c8bca8; }
html.theme-light #minimap-label { color: #9a8a6a; }
html.theme-light .mm-dot        { background: #b0a080 !important; }
html.theme-light .mm-dot.current{ background: #c03010 !important; box-shadow: 0 0 4px rgba(192,48,16,0.5); }
html.theme-light .mm-dot.done   { background: #2a7a3a !important; }

/* 라이트 테마 이름 입력 */
html.theme-light #name-area     { background: var(--bg2); border-top-color: var(--border); }
html.theme-light #name-input    { background: #ece6dc; border-color: #c8bca8; color: #2a2018; }
html.theme-light #name-input::placeholder { color: #a0907a; }
html.theme-light #name-confirm  { background: linear-gradient(135deg, #c03010, #a02000); color: #fff; border-color: #c03010; }
html.theme-light #name-hint     { color: #9a8a6a; }

/* 테마 토글 버튼 */
#theme-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--dim);
  font-size: 15px;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#theme-btn:hover { border-color: var(--line6); color: var(--line6); }
#theme-btn.light { background: #e8e0d0; border-color: #b0a080; color: #8a6010; }

html {
  scroll-behavior: smooth;
  /* iOS 바운스 스크롤 방지 */
  -webkit-overflow-scrolling: touch;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Serif KR', 'Courier New', monospace;
  font-size: 15px;
  line-height: 1.85;
  min-height: 100vh;
  min-height: 100dvh;   /* iOS Safari dynamic viewport */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 80px;
  overflow-x: hidden;
}

/* ════════════════════════════════
   상단 헤더
   ════════════════════════════════ */
#header {
  width: 100%;
  max-width: 960px;
  background: linear-gradient(to bottom, #040a10, transparent);
  padding: 14px 16px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#header-left   { display: flex; flex-direction: column; gap: 1px; }
#header-title  { font-size: 13px; color: var(--line6); letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
#header-sub    { font-size: 10px; color: var(--dim); letter-spacing: 2px; }
#header-right  { display: flex; align-items: center; gap: 8px; }
#header-ep     { font-size: 11px; color: var(--border2); letter-spacing: 1px; }

/* ⚡ 빨리보기 */
#fast-btn {
  background: transparent;
  border: 1px solid #1e3040;
  color: #3a6050;
  font-family: 'Noto Serif KR', monospace;
  font-size: 11px;
  padding: 6px 11px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: var(--touch-min);
  display: flex; align-items: center;
}
#fast-btn:hover, #fast-btn:focus-visible { border-color: #4a8a6a; color: var(--green); background: #0d1a14; }
#fast-btn.active { border-color: #4a8a6a; color: var(--bright); background: #0d1e16; box-shadow: 0 0 6px rgba(90,170,122,0.15); }

/* ════════════════════════════════
   모바일 탭 바 (모바일 전용)
   ════════════════════════════════ */
#mobile-tabs {
  display: none;    /* 데스크톱 숨김 */
  width: 100%;
  max-width: 960px;
  background: #08121c;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mob-tab {
  flex: 1;
  padding: 0;
  height: var(--touch-min);
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: 'Noto Serif KR', monospace;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.mob-tab.active     { color: var(--line6); border-bottom-color: var(--line6); }
.mob-tab .tab-badge {
  background: var(--red);
  color: #fff;
  font-size: 8px;
  border-radius: 8px;
  padding: 1px 4px;
  display: none;
}
.mob-tab .tab-badge.show { display: inline-block; }

/* ════════════════════════════════
   노선도 미니맵 (토글)
   ════════════════════════════════ */
#minimap-wrap {
  width: 100%;
  max-width: 960px;
  padding: 0 12px;
}
#minimap-inner {
  background: #060e14;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 0;
  margin-bottom: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#minimap-label {
  font-size: 9px; color: #1e3040; letter-spacing: 2px;
  font-family: 'Courier New', monospace; padding: 0 12px 4px;
}
#minimap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ════════════════════════════════
   메인 2컬럼 레이아웃
   ════════════════════════════════ */
#layout {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  padding: 0 12px;
  align-items: start;
}

/* ════════════════════════════════
   🚇 지하철 상시 패널 (왼쪽 sticky)
   ════════════════════════════════ */
#train-panel {
  position: sticky;
  top: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 540px;
}

/* 패널 헤더 */
#train-panel-header {
  background: linear-gradient(135deg, #0c1a22, #0f2030);
  border-bottom: 1px solid var(--border);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#train-panel-title  { font-size: 10px; color: var(--line6); letter-spacing: 2px; font-family: 'Courier New', monospace; }
#train-panel-status { font-size: 10px; color: var(--dim); letter-spacing: 1px; }
#train-panel-status.running { color: var(--green); animation: statusBlink 2s infinite; }
#train-panel-status.stopped { color: var(--gold); }
#train-panel-status.event   { color: var(--red);  animation: statusBlink 0.8s infinite; }
@keyframes statusBlink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* 아스키아트 뷰포트 */
#train-viewport {
  flex: 1;
  padding: 8px 6px 32px;   /* 하단 padding: 오버레이 공간 */
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  background: radial-gradient(ellipse at center bottom, #0a1820 0%, var(--panel-bg) 70%);
  white-space: pre;
}

/* 씬 컬러 */
.ts-outer      { color: #2a4a6a; }
.ts-window     { color: #3a6a9a; }
.ts-window-lit { color: #8ab8e0; }
.ts-seat       { color: #c05020; }
.ts-floor      { color: #1e3040; }
.ts-rail       { color: #152028; }
.ts-pass       { color: #a0c8a0; }
.ts-pass-red   { color: var(--red); }
.ts-pass-gold  { color: var(--gold); }
.ts-event      { color: var(--gold); }
.ts-dim        { color: #253540; }
.ts-tunnel     { color: #0e1c26; }
.ts-arrive     { color: var(--line6); }
.ts-system     { color: var(--dim); font-size: 10px; }

/* 이벤트 오버레이 */
#train-event-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  font-family: 'Noto Serif KR', monospace;
  font-size: 11px;
  color: var(--gold);
  text-align: center;
  padding: 4px 8px;
  background: rgba(6,14,20,0.9);
  border-top: 1px solid #1e3040;
  min-height: 24px;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.3s;
}
#train-event-overlay.show { opacity: 1; }

/* 역 정보 */
#train-station-info {
  border-top: 1px solid var(--border);
  padding: 7px 12px 5px;
  background: #080f16;
  flex-shrink: 0;
}
#tsi-current      { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
#tsi-line-badge   {
  background: var(--line6); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 2px;
  letter-spacing: 1px; font-family: 'Courier New', monospace; flex-shrink: 0;
}
#tsi-name         { font-size: 13px; color: var(--bright); font-weight: 700; letter-spacing: 1px; }
#tsi-name-en      { font-size: 9px; color: var(--dim); letter-spacing: 1px; font-family: 'Courier New', monospace; }
#tsi-transfer     { font-size: 10px; color: var(--gold); margin-top: 2px; min-height: 13px; }

/* 미니 노선 스트립 */
#tsi-route-strip {
  margin-top: 6px;
  display: flex; align-items: center;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
#tsi-route-strip::-webkit-scrollbar { display: none; }
.rs-stop { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.rs-dot  {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--line6dim); background: transparent;
  transition: all 0.3s;
}
.rs-dot.done    { background: var(--line6dim); border-color: var(--line6dim); }
.rs-dot.current { background: var(--line6); border-color: var(--line6); box-shadow: 0 0 5px var(--line6); animation: dotPulse 1.4s infinite; }
.rs-dot.event   { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 4px var(--gold); }
.rs-line        { width: 10px; height: 2px; background: var(--line6dim); flex-shrink: 0; }
.rs-line.done   { background: var(--line6); }
@keyframes dotPulse { 0%,100%{box-shadow:0 0 3px var(--line6)} 50%{box-shadow:0 0 9px var(--line6)} }

/* 차내 로그 */
#train-log {
  border-top: 1px solid var(--border);
  padding: 5px 12px 7px;
  background: #060d12;
  max-height: 110px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1e3040 transparent;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}

/* 아바타 UI */
#avatar-wrap {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  gap: 12px;
}
#avatar-ascii {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.2;
  color: var(--bright);
  margin: 0;
}
#avatar-dialog {
  flex: 1;
  font-size: 11px;
  color: var(--text);
  font-family: 'Noto Serif KR', monospace;
  line-height: 1.4;
}
#avatar-name {
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

/* 모바일 로그 탭에서는 train-log를 꽉 채움 */
#train-panel.tab-active #train-log {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}
#train-log-title { font-size: 9px; color: #1e3040; letter-spacing: 2px; margin-bottom: 3px; font-family: 'Courier New', monospace; }
.tlog-entry {
  font-size: 10px; color: #2a4a5a;
  padding: 1px 0; line-height: 1.4;
  font-family: 'Courier New', monospace;
  opacity: 0; transition: opacity 0.3s, color 0.3s;
}
.tlog-entry.show  { opacity: 1; }
.tlog-entry.new   { color: var(--text); }
.tlog-entry.warn  { color: var(--red); }
.tlog-entry.info  { color: var(--dim); }
.tlog-entry.event { color: var(--gold); }

/* ════════════════════════════════
   게임 텍스트 영역 (오른쪽)
   ════════════════════════════════ */
#game {
  border: 1px solid var(--border);
  border-radius: 0 4px 4px 0;
  padding: 16px 20px;
  background: var(--bg2);
  min-height: 540px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 출력 영역 */
#output { min-height: 260px; padding-bottom: 14px; flex: 1; }

/* 텍스트 라인 */
.line { margin-bottom: 4px; opacity: 0; transition: opacity 0.3s; }
.line.show { opacity: 1; }
.line.narrator  { color: var(--text); }
.line.system    { color: var(--dim); font-size: 12px; letter-spacing: 1px; }
.line.death     { color: var(--red); }
.line.life      { color: var(--green); }
.line.highlight { color: var(--gold); }
.line.result    { color: #8aaa98; font-style: italic; }
.line.dialog    { color: #a0bcd0; padding-left: 14px; border-left: 2px solid var(--border2); margin: 4px 0 6px; }
.line.title     { color: #e0c880; font-size: 18px; font-weight: 700; margin: 12px 0 3px; letter-spacing: 2px; }
.line.subtitle  { color: var(--dim); font-size: 12px; margin-bottom: 16px; }
.line.divider   { color: #152030; letter-spacing: 4px; margin: 10px 0; user-select: none; }
.line.name      { color: var(--bright); font-weight: 700; }
.line.blank     { height: 8px; }
.line.announce  { color: var(--line6); font-size: 12px; letter-spacing: 1px; border-left: 2px solid var(--line6dim); padding-left: 10px; margin: 4px 0; }
.line.whisper   { color: #3a5a70; font-size: 13px; font-style: italic; }

/* 에피소드 헤더 */
.line.ep-header {
  background: linear-gradient(135deg, #0c1820, #0f2030);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--line6);
  padding: 10px 14px;
  margin: 8px 0 14px;
  border-radius: 2px;
}
.line.ep-header .ep-num   { color: var(--dim); font-size: 11px; letter-spacing: 2px; }
.line.ep-header .ep-title { color: var(--line6); font-size: 14px; font-weight: 700; margin: 2px 0; }
.line.ep-header .ep-sub   { color: var(--dim); font-size: 11px; }

/* 선택지 버튼 */
#choices { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.choice-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--green);
  font-family: 'Noto Serif KR', monospace;
  font-size: 13.5px;
  padding: 12px 16px;           /* 터치 영역 확보 */
  min-height: var(--touch-min); /* 44px 최소 */
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.choice-btn::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(90,170,122,0.06);
  transition: width 0.2s;
}
.choice-btn:hover, .choice-btn:focus-visible { border-color: #3a7a5a; color: var(--bright); outline: none; }
.choice-btn:hover::before { width: 100%; }
.choice-btn:active { background: rgba(90,170,122,0.12); transform: scale(0.99); }
.choice-btn.danger { color: var(--red); border-color: #3a1818; }
.choice-btn.danger:hover { border-color: var(--red); }
.choice-btn.reward { color: var(--gold); border-color: #3a3010; }
.choice-btn.reward:hover { border-color: var(--gold); }

/* 이름 입력 */
#name-area { display: none; margin-top: 16px; flex-direction: column; gap: 10px; }
#name-area.active { display: flex; }
#name-row { display: flex; gap: 8px; }
#name-input {
  flex: 1;
  background: #080f18;
  border: 1px solid var(--border2);
  color: var(--bright);
  font-family: 'Noto Serif KR', monospace;
  font-size: 16px;   /* iOS 자동 줌 방지: 16px 이상 */
  padding: 10px 12px;
  min-height: var(--touch-min);
  outline: none;
  border-radius: 2px;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
#name-input:focus { border-color: var(--green); }
#name-confirm {
  background: #0c1e2c;
  border: 1px solid #3a6a5a;
  color: #70c090;
  font-family: 'Noto Serif KR', monospace;
  font-size: 13px;
  padding: 10px 16px;
  min-height: var(--touch-min);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
#name-confirm:hover { background: #102830; border-color: var(--green); color: var(--bright); }
#name-hint { color: #2a4050; font-size: 11px; }

/* 진행 상태 */
#progress-wrap { margin-top: 24px; padding: 12px 0 0; border-top: 1px solid #0e1c28; }
#progress-label { font-size: 10px; color: #1e3040; letter-spacing: 2px; margin-bottom: 8px; }
#progress { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.p-item   { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.pdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: all 0.3s; }
.pdot-done    { background: var(--line6dim); box-shadow: 0 0 3px var(--line6dim); }
.pdot-current { background: var(--line6); box-shadow: 0 0 7px var(--line6); animation: pdotPulse 1.5s infinite; }
.pdot-event   { background: var(--gold); box-shadow: 0 0 5px var(--gold); }
.pdot-todo    { background: transparent; border: 1px solid #1e3040; }
@keyframes pdotPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* 통계 바 */
#stat-bar {
  display: none; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 11px;
  color: #2a4050; letter-spacing: 1px;
}
#stat-bar.show { display: flex; }
.stat-item span { color: var(--dim); }

/* 아스키아트 */
.ascii-wrap {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.45;
  margin: 10px 0 12px;
  display: block;       /* 모바일에서 inline-block → 너비 초과 방지 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ascii-line {
  display: block; white-space: pre;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  letter-spacing: 0.5px;
}
.ascii-line.show { opacity: 1; transform: translateY(0); }
.ascii-box {
  background: #050c14;
  border: 1px solid #152030;
  border-left: 2px solid #1e3a50;
  padding: 8px 14px 10px;
  margin: 8px 0 14px;
  border-radius: 2px;
  display: block;      /* 모바일 너비 초과 방지 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 0 12px rgba(30,60,90,0.15), inset 0 0 20px rgba(0,0,0,0.4);
}

/* 아스키 테마 */
.ascii-station .ascii-line     { color: #5a9ab0; }
.ascii-station .ascii-line.hl  { color: var(--line6); }
.ascii-station .ascii-line.cm  { color: #3a6a80; }
.ascii-train   .ascii-line     { color: #4a8aaa; }
.ascii-train   .ascii-line.hl  { color: var(--bright); }
.ascii-danger  .ascii-line     { color: #aa5040; }
.ascii-danger  .ascii-line.hl  { color: #e07050; }
.ascii-crowd   .ascii-line     { color: #8a9a80; }
.ascii-crowd   .ascii-line.hl  { color: var(--gold); }
.ascii-done    .ascii-line     { color: var(--green); }
.ascii-done    .ascii-line.hl  { color: var(--bright); }
/* 한자 유래 카드 테마 */
.ascii-hanja   .ascii-line     { color: #8ab0c8; }
.ascii-hanja   .ascii-line.hl  { color: #d4a850; }
.ascii-hanja   .ascii-line.cm  { color: #5a7a90; }

@keyframes wavePulse { 0%,100%{opacity:1;text-shadow:0 0 6px #aa5040} 50%{opacity:0.7;text-shadow:0 0 18px #e07050} }
@keyframes iceBlink  { 0%,90%,100%{opacity:1} 95%{opacity:0.3} }
.ascii-glow  .ascii-line { text-shadow: 0 0 8px currentColor; }
.ascii-pulse .ascii-line.show { animation: wavePulse 1.8s ease-in-out infinite; }
.ascii-blink .ascii-line.show { animation: iceBlink 2.5s ease-in-out infinite; }

/* 엔딩 버튼 */
.end-btn {
  display: block; margin-top: 20px;
  padding: 14px 24px; min-height: var(--touch-min);
  background: linear-gradient(135deg, #141c0c, #1e2c14);
  border: 1px solid #4a7a4a; color: #aaddaa;
  font-family: 'Noto Serif KR', monospace; font-size: 14px;
  cursor: pointer; text-decoration: none; letter-spacing: 1px;
  border-radius: 3px; transition: all 0.2s; text-align: center;
  box-shadow: 0 0 20px rgba(74,122,74,0.15);
  -webkit-tap-highlight-color: transparent;
}
.end-btn:hover { background: linear-gradient(135deg,#1e2c14,#2a3e1e); border-color: var(--green); color: var(--bright); }

/* SKIP 버튼 */
#skip-btn {
  position: fixed; bottom: 16px; right: 16px;
  background: #070f18; border: 1px solid #152030;
  color: #1e3040; font-size: 11px;
  padding: 8px 14px; min-height: 36px;
  cursor: pointer; border-radius: 2px;
  letter-spacing: 1px; transition: all 0.2s;
  font-family: 'Noto Serif KR', monospace;
  z-index: 300; display: none;
  -webkit-tap-highlight-color: transparent;
}
#skip-btn.visible { display: block; }
#skip-btn:hover   { color: var(--dim); border-color: #2a4a60; }

/* 커서 */
.cursor {
  display: inline-block; width: 8px; height: 14px;
  background: var(--green); margin-left: 2px;
  vertical-align: middle; animation: blink 1s infinite;
}
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* 우상단 고정 버튼 */
.corner-btn {
  position: fixed; top: 12px;
  background: #070f18; border: 1px solid #1e3040;
  color: #3a5a70; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s; z-index: 200; padding: 0;
  font-family: 'Courier New', monospace; line-height: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.corner-btn:hover, .corner-btn:focus-visible {
  border-color: #3a6a80; color: var(--blue);
  background: #0a1820; box-shadow: 0 0 8px rgba(64,128,176,0.15);
}
.corner-btn.active { border-color: #2a5a80; color: var(--blue); box-shadow: 0 0 8px rgba(64,128,176,0.2); }
.corner-btn.flash  { background: #0f2030; }

#sound-btn { right: 16px;  font-size: 15px; }
#fs-btn    { right: 62px;  font-size: 13px; }
#map-btn   { right: 108px; font-size: 15px; }
#share-btn { right: 154px; font-size: 15px; }

/* 스크롤바 */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1e3040; border-radius: 2px; }

/* ════════════════════════════════
   반응형 — 태블릿 (760px 이하)
   ════════════════════════════════ */
@media (max-width: 760px) {

  body { padding: 0 0 60px; }

  #header { padding: 10px 12px 6px; }
  #header-title { font-size: 11px; letter-spacing: 2px; }
  #header-sub   { font-size: 9px; }

  /* 탭 바 활성화 */
  #mobile-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* 레이아웃: 1컬럼 */
  #layout {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }

  /* 패널과 게임을 탭으로 전환 — 기본은 game 표시 */
  #train-panel {
    position: static;
    border-right: 1px solid var(--border);
    border-radius: 0;
    min-height: auto;
    /* 탭 전환으로 숨김 처리 */
    display: none;
  }
  #train-panel.tab-active { display: flex; }

  #game {
    border-radius: 0;
    min-height: 60vh;
    padding: 14px 14px;
    /* 기본 탭 활성 */
  }
  #game.tab-hidden { display: none; }

  /* 아스키아트 폰트 축소 */
  .ascii-wrap { font-size: 10px; }
  .ascii-box  { padding: 6px 8px 8px; }

  /* 선택지 버튼 */
  .choice-btn { font-size: 13px; padding: 13px 14px; }

  /* 고정 버튼 재배치 — 상단이 헤더와 겹치지 않게 */
  .corner-btn { top: 10px; width: 36px; height: 36px; }
  #sound-btn  { right: 14px; font-size: 14px; }
  #fs-btn     { display: none; }   /* 모바일 전체화면 불필요 */
  #map-btn    { right: 58px; font-size: 14px; }
  #share-btn  { right: 102px; font-size: 14px; }

  /* SKIP */
  #skip-btn { bottom: 12px; right: 12px; }

  .line.title { font-size: 16px; }
}

/* ════════════════════════════════
   반응형 — 소형 모바일 (480px 이하)
   ════════════════════════════════ */
@media (max-width: 480px) {
  #header-right { gap: 4px; }
  #fast-btn { font-size: 10px; padding: 5px 8px; letter-spacing: 0; }
  #header-ep { display: none; }   /* 헤더 역명 숨김 (탭 뱃지로 대체) */

  #game { padding: 12px 12px; }
  #game #output { font-size: 14px; }

  .choice-btn { font-size: 12.5px; }
  #name-input { font-size: 16px; }  /* iOS 줌 방지 유지 */

  /* 차내 로그 최소화 */
  #train-log { max-height: 70px; }

  /* 상시 패널이 탭으로 보일 때 뷰포트 높이 조절 */
  #train-viewport { min-height: 160px; font-size: 10px; }
  #train-panel-header { padding: 5px 10px; }
}

/* ════════════════════════════════
   접근성 — 키보드 포커스
   ════════════════════════════════ */
button:focus-visible {
  outline: 2px solid var(--line6);
  outline-offset: 2px;
}
input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

/* ════════════════════════════════
   prefers-reduced-motion 지원
   ════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ascii-line,
  .line,
  .corner-btn,
  .choice-btn { transition: none !important; animation: none !important; }
  @keyframes statusBlink { 0%,100%{opacity:1} }
  @keyframes dotPulse    { 0%,100%{opacity:1} }
  @keyframes pdotPulse   { 0%,100%{opacity:1} }
}

/* ════════════════════════════════
   세이브 / 공유 모달
   ════════════════════════════════ */
#save-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 16px;
  backdrop-filter: blur(3px);
}
#save-modal {
  background: #070e14;
  border: 1px solid #1e3a50;
  border-top: 2px solid var(--line6);
  border-radius: 6px;
  padding: 20px;
  width: 100%;
  max-width: 380px;
  max-height: 90dvh;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  box-shadow: 0 0 40px rgba(0,0,0,0.8), 0 0 20px rgba(160,80,30,0.15);
}
#save-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--line6); font-weight: 700;
  letter-spacing: 1px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid #152028;
}
#save-modal-close {
  background: transparent; border: 1px solid #1e3a50;
  color: #4a6a80; font-size: 13px; padding: 2px 8px;
  border-radius: 3px; cursor: pointer;
  transition: all 0.2s;
}
#save-modal-close:hover { color: var(--line6); border-color: var(--line6); }

#save-modal-info {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: 11px; color: #4a8a9a;
  margin-bottom: 14px;
  padding: 8px 10px;
  background: #050c14;
  border: 1px solid #152028;
  border-radius: 3px;
}
#save-modal-info span { white-space: nowrap; }

#save-qr-wrap {
  display: flex; justify-content: center;
  margin: 12px 0;
  padding: 12px;
  background: #070b0e;
  border: 1px solid #152028;
  border-radius: 4px;
}
#save-qr-canvas { border-radius: 3px; }

#save-modal-desc {
  font-size: 11px; color: #3a6070;
  text-align: center; line-height: 1.7;
  margin-bottom: 12px;
}

#save-url-row {
  display: flex; gap: 6px;
  margin-bottom: 6px;
}
#save-url-input {
  flex: 1; background: #050c14;
  border: 1px solid #1e3040;
  color: #5a8a9a; font-size: 11px;
  font-family: 'Courier New', monospace;
  padding: 6px 8px; border-radius: 3px;
  min-width: 0;
}
#save-url-copy {
  background: linear-gradient(135deg, #1a2a0a, #2a3a14);
  border: 1px solid #3a5a2a;
  color: #80c060; font-size: 11px;
  padding: 6px 10px; border-radius: 3px;
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
#save-url-copy:hover { background: linear-gradient(135deg, #2a3a14, #3a5020); }

#save-copy-msg {
  font-size: 11px; color: #80c060;
  text-align: center; min-height: 18px;
  margin-bottom: 4px;
}

.save-load-btn {
  background: linear-gradient(135deg, #0a1a2a, #14283a);
  border: 1px solid #1e3a50;
  color: #5a9ab0; font-size: 12px;
  padding: 8px 16px; border-radius: 3px;
  cursor: pointer; font-family: 'Courier New', monospace;
  transition: all 0.2s; min-height: 36px;
}
.save-load-btn:hover {
  background: linear-gradient(135deg, #14283a, #1e3a50);
  color: #80c0d8; border-color: var(--line6);
}

/* 헤더 인라인 세이브 버튼 */
.corner-btn-inline {
  background: transparent;
  border: 1px solid #1e3040;
  color: #4a7090;
  font-size: 14px; padding: 3px 8px;
  border-radius: 3px; cursor: pointer;
  transition: all 0.2s; line-height: 1;
}
.corner-btn-inline:hover { color: var(--line6); border-color: var(--line6); }

/* ════════════════════════════════
   엔딩 버튼 영역
   ════════════════════════════════ */
#ending-btn-wrap {
  display: flex; flex-direction: column;
  gap: 10px; margin-top: 20px;
}
.share-btn {
  background: linear-gradient(135deg, #1a0a2a, #2a1440) !important;
  border-color: #5a3a7a !important;
  color: #c0a0e0 !important;
}
.share-btn:hover {
  background: linear-gradient(135deg, #2a1440, #3a1e50) !important;
}
.ending-score-line {
  font-size: 11px; color: #3a5a70;
  text-align: center; letter-spacing: 0.5px;
  padding-top: 4px;
  font-family: 'Courier New', monospace;
}

/* stat-bar 시간대 */
#st-tod-wrap { color: #5a8070; }

/* ════════════════════════════════════════════════════
   노선도 역 선택 UI  (#linemap-wrap)
   ════════════════════════════════════════════════════ */
#linemap-wrap {
  width: 100%;
  margin: 8px 0 4px;
  background: #060e14;
  border: 1px solid #1a2e40;
  border-radius: 6px;
  padding: 12px 10px 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.3);
}

.lm-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #5a8090;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.lm-badge {
  background: #c05020;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 1px;
}
.lm-legend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #3a5a6a;
}
.lm-leg-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  vertical-align: middle;
}
.lm-leg-dot.ev  { background: #c8a840; box-shadow: 0 0 5px #c8a84080; }
.lm-leg-dot.xf  { background: #4080b0; border: 2px solid #60a0d0; }

.lm-scroll-hint {
  display: none;
  text-align: center;
  font-size: 10px;
  color: #2a4050;
  margin-bottom: 4px;
  letter-spacing: 2px;
}

/* SVG 스크롤 컨테이너 */
.lm-svg-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  border-radius: 4px;
  background: #040a10;
  border: 1px solid #0e1e28;
}
.lm-svg-wrap:active { cursor: grabbing; }

#linemap-svg {
  display: block;
  max-width: 100%;
  height: auto;
  min-width: 340px;
}

/* ── 선 ── */
.lm-line-bg {
  fill: none;
  stroke: #0a1a24;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lm-line {
  fill: none;
  stroke: #c05020;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 역 원 ── */
.lm-dot {
  fill: #0b1a24;
  stroke: #c05020;
  stroke-width: 2;
  cursor: pointer;
  transition: r 0.15s, fill 0.15s, stroke 0.15s;
}
.lm-dot.event {
  fill: #1a1400;
  stroke: #c8a840;
  stroke-width: 2.5;
}
.lm-dot.xfer {
  fill: #0a1520;
  stroke: #4080b0;
  stroke-width: 2.5;
}

/* 환승 바깥 링 */
.lm-dot-xfer-ring {
  fill: none;
  stroke: #4080b050;
  stroke-width: 1.5;
}

/* 이벤트 펄스 애니메이션 */
.lm-dot-pulse {
  fill: none;
  stroke: #c8a84050;
  stroke-width: 1.5;
  animation: lm-pulse 1.6s ease-in-out infinite;
}
@keyframes lm-pulse {
  0%, 100% { opacity: 0.2; r: 12; }
  50%       { opacity: 0.7; r: 16; }
}

/* 이벤트 별 */
.lm-star {
  font-size: 8px;
  fill: #c8a840;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* ── 레이블 ── */
.lm-label {
  font-family: 'Noto Serif KR', sans-serif;
  font-size: 8.5px;
  fill: #5a8090;
  pointer-events: none;
  transition: fill 0.15s;
}
.lm-label.ev { fill: #b89030; }
.lm-label.xf { fill: #4a90c0; }

.lm-code {
  font-family: 'Courier New', monospace;
  font-size: 6.5px;
  fill: #2a4050;
  pointer-events: none;
}

/* 종착역 레이블 */
.lm-terminus {
  font-family: 'Courier New', monospace;
  font-size: 8px;
  fill: #3a6080;
  pointer-events: none;
}

/* ── 호버 & 선택 상태 ── */
.lm-station-g:hover .lm-dot,
.lm-station-g:focus .lm-dot {
  fill: #1e3020;
  stroke: #80c060;
  stroke-width: 3;
}
.lm-station-g:hover .lm-dot.event,
.lm-station-g:focus .lm-dot.event {
  fill: #2a2000;
  stroke: #e0c040;
  stroke-width: 3;
}
.lm-station-g:hover .lm-dot.xfer,
.lm-station-g:focus .lm-dot.xfer {
  fill: #0a1a30;
  stroke: #60b0e0;
  stroke-width: 3;
}
.lm-station-g:hover .lm-label,
.lm-station-g:focus .lm-label {
  fill: #90d080;
  font-size: 9.5px;
}
.lm-station-g:hover .lm-code,
.lm-station-g:focus .lm-code {
  fill: #4a8060;
}

/* 선택 완료 */
.lm-station-g.selected .lm-dot {
  fill: #1a3010;
  stroke: #80e060;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 6px #80e06090);
}
.lm-station-g.selected .lm-dot.event {
  fill: #2a2800;
  stroke: #ffd040;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 6px #ffd04090);
}
.lm-station-g.selected .lm-dot.xfer {
  fill: #0a1830;
  stroke: #70c8f0;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 6px #70c8f090);
}
.lm-station-g.selected .lm-label {
  fill: #a0f070;
  font-weight: 700;
}

/* ── 역 정보 패널 ── */
#lm-info {
  margin-top: 8px;
  padding: 7px 12px;
  background: #050c14;
  border: 1px solid #0e2030;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: border-color 0.2s;
}
#lm-info:has(.lm-info-name) { border-color: #1a3040; }

.lm-info-placeholder { color: #2a4050; font-size: 11px; }
.lm-info-code  { color: #3a6a80; font-size: 11px; }
.lm-info-name  { color: #90d0b0; font-size: 14px; font-weight: 700; }
.lm-info-hanja { color: #5a8a6a; font-size: 12px; }
.lm-info-xfer  {
  color: #4a90c0; font-size: 11px;
  background: #0a1a2a; padding: 1px 6px;
  border: 1px solid #1a3a50; border-radius: 3px;
}
.lm-info-ev {
  color: #c8a840; font-size: 11px;
  background: #1a1400; padding: 1px 6px;
  border: 1px solid #3a3010; border-radius: 3px;
}
.lm-info-hint {
  margin-left: auto;
  color: #2a5040; font-size: 10px;
  animation: lm-blink 1.4s step-start infinite;
}
@keyframes lm-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── 모바일 반응형 ── */
@media (max-width: 760px) {
  #linemap-wrap { padding: 8px 6px 8px; }
  .lm-scroll-hint { display: block; }
  .lm-title { font-size: 11px; }
  .lm-legend { font-size: 10px; }
  #lm-info { font-size: 11px; gap: 6px; }
  .lm-info-name { font-size: 13px; }
}
@media (max-width: 480px) {
  .lm-legend { display: none; }
  #lm-info { padding: 5px 8px; }
}

/* ════════════════════════════════
   위험 역 아이콘 애니메이션
   ════════════════════════════════ */
@keyframes pdanger { 0%,100%{opacity:1;text-shadow:0 0 4px #ff4444} 50%{opacity:0.4;text-shadow:none} }

/* ════════════════════════════════
   호차 표시 UI (#car-strip)
   ════════════════════════════════ */
#car-strip {
  display:flex; align-items:center; justify-content:center;
  gap:3px; padding:6px 10px;
  background:#040a10; border-top:1px solid #0e1e2a;
  font-family:'Courier New',monospace; font-size:10px;
  flex-wrap:wrap;
}
.car-item {
  padding:2px 5px; border:1px solid #1a2e40;
  border-radius:2px; color:#2a4a60;
  cursor:pointer; transition:all 0.15s;
  white-space:nowrap;
}
.car-item.active {
  border-color:#c05020; color:#c05020;
  background:#150a04; box-shadow:0 0 5px #c0502040;
}
.car-item:hover { border-color:#3a6080; color:#5a90b0; }

/* ════════════════════════════════
   공유 카드 (캡처용 오프스크린 렌더링)
   ════════════════════════════════ */
#share-card-wrap {
  position: absolute; left: -9999px; top: 0; width: 480px;
  background: #04090e; padding: 30px;
  border: 1px solid #1a2e40; box-sizing: border-box;
}
#share-card-content {
  margin: 0; font-family: 'Courier New', monospace;
  font-size: 14px; line-height: 1.5; font-weight: bold;
  color: #60a0d0; text-shadow: 0 0 5px rgba(96,160,208,0.5);
  white-space: pre-wrap; word-break: break-all;
}