/* 게임 스킨 레이어 - 기존 style.css 뒤에 로드되어 게임 UI로 덮어쓰기 */
:root {
  --game-bg: #0a0e17;
  --game-panel: rgba(10, 16, 22, 0.82);
  --game-gold: #ffd76a;
  --game-cyan: #4fd8e8;
  --game-text: #e0e6ed;
  --game-transition: cubic-bezier(.34, 1.56, .64, 1) 150ms;
}

/* 전체 배경 및 기본 텍스트 */
#app, #c {
  background-color: var(--game-bg) !important;
  color: var(--game-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar {
  background: var(--game-panel) !important;
  border-bottom: 1px solid rgba(79, 216, 232, 0.3) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* 공통 패널 스타일 */
.intro-card,
.tm-panel,
.log-panel {
  background: var(--game-panel) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--game-cyan) !important;
  border-radius: 4px !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(79, 216, 232, 0.3) !important;
  padding: 12px !important;
}

/* 인트로 카드 - 컷코너 적용 */
.intro-card {
  clip-path: polygon(
    0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)
  ) !important;
}

/* 툴바 및 버튼 */
.toolbar {
  background: var(--game-panel) !important;
  border: 1px solid rgba(79, 216, 232, 0.3) !important;
  border-radius: 4px !important;
  padding: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

.tool {
  width: 48px !important;
  height: 48px !important;
  border-radius: 4px !important;
  background: rgba(20, 28, 38, 0.9) !important;
  border: 1px solid rgba(79, 216, 232, 0.2) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
  transition: all var(--game-transition) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool:hover {
  transform: translateY(-2px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(79, 216, 232, 0.5) !important;
}

.tool:active {
  transform: translateY(2px) !important;
  box-shadow: 
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 공통 버튼 */
.btn,
.d-btn {
  background: rgba(20, 28, 38, 0.9) !important;
  border: 1px solid var(--game-cyan) !important;
  border-radius: 4px !important;
  color: var(--game-text) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 16px !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
  transition: all var(--game-transition) !important;
}

.btn:hover,
.d-btn:hover {
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(79, 216, 232, 0.4) !important;
  transform: translateY(-1px);
}

.btn:active,
.d-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 하단 레일 - 퀵슬롯 */
.rail-wrap {
  background: var(--game-panel) !important;
  border-top: 1px solid rgba(79, 216, 232, 0.3) !important;
  padding: 8px !important;
}

.rail {
  gap: 8px !important;
}

.rail-item {
  background: rgba(20, 28, 38, 0.9) !important;
  border: 1px solid rgba(79, 216, 232, 0.2) !important;
  border-radius: 4px !important;
  padding: 8px !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all var(--game-transition) !important;
}

.rail-item:hover {
  border-color: rgba(79, 216, 232, 0.5) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(79, 216, 232, 0.3) !important;
}

.rail-item.is-active,
.rail-item.active,
.rail-item[aria-current="true"] {
  border-color: var(--game-gold) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(255, 215, 106, 0.5) !important;
}

/* 구 필터 - 세그먼트 컨트롤 */
.district-bar {
  background: rgba(20, 28, 38, 0.9) !important;
  border: 1px solid rgba(79, 216, 232, 0.3) !important;
  border-radius: 4px !important;
  padding: 4px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.district-chips {
  gap: 4px !important;
}

.chip {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: var(--game-text) !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
  transition: all var(--game-transition) !important;
}

.chip:hover {
  background: rgba(79, 216, 232, 0.1) !important;
}

.chip.is-active,
.chip.active,
.chip[aria-pressed="true"] {
  background: rgba(79, 216, 232, 0.2) !important;
  border-color: var(--game-cyan) !important;
  box-shadow: 0 0 8px rgba(79, 216, 232, 0.4) !important;
}

/* 타임머신 바 */
.tm-bar {
  background: var(--game-panel) !important;
  border: 1px solid rgba(79, 216, 232, 0.3) !important;
  border-radius: 4px !important;
  padding: 8px !important;
}

.tm-years {
  gap: 4px !important;
}

.tm-year {
  background: rgba(20, 28, 38, 0.9) !important;
  border: 1px solid rgba(79, 216, 232, 0.2) !important;
  border-radius: 4px !important;
  color: var(--game-text) !important;
  padding: 6px 10px !important;
  font-weight: 800 !important;
  transition: all var(--game-transition) !important;
}

.tm-year:hover {
  border-color: var(--game-cyan) !important;
  box-shadow: 0 0 8px rgba(79, 216, 232, 0.3) !important;
}

.tm-year.is-active,
.tm-year.active,
.tm-year[aria-current="true"] {
  background: rgba(255, 215, 106, 0.15) !important;
  border-color: var(--game-gold) !important;
  color: var(--game-gold) !important;
  box-shadow: 0 0 12px rgba(255, 215, 106, 0.5) !important;
}

/* 로그 패널 - 콘솔 느낌 */
.log-panel {
  font-family: "Courier New", Courier, monospace !important;
  background: 
    linear-gradient(rgba(10, 16, 22, 0.9), rgba(10, 16, 22, 0.9)),
    repeating-linear-gradient(0deg, rgba(79, 216, 232, 0.03) 0px, rgba(79, 216, 232, 0.03) 1px, transparent 1px, transparent 3px) !important;
}

.log-list {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.log-row {
  border-bottom: 1px solid rgba(79, 216, 232, 0.1) !important;
  padding: 4px 8px !important;
}

.log-t {
  color: var(--game-cyan) !important;
}

.log-lv {
  color: var(--game-gold) !important;
  text-transform: uppercase;
  font-weight: 800 !important;
}

.log-info { color: #a0e0ff !important; }
.log-warn { color: var(--game-gold) !important; }
.log-error { color: #ff6b6b !important; }
.log-debug { color: #888 !important; }
.log-event { color: #b0ff8a !important; }

/* 힌트 - 조작 안내 칩 */
.hint {
  background: rgba(10, 16, 22, 0.9) !important;
  border: 1px solid rgba(79, 216, 232, 0.3) !important;
  border-radius: 4px !important;
  color: var(--game-text) !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* 툴팁 */
.tooltip {
  background: var(--game-panel) !important;
  border: 1px solid var(--game-cyan) !important;
  border-radius: 4px !important;
  color: var(--game-text) !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(79, 216, 232, 0.3) !important;
}

/* 텍스트 스타일 */
.eyebrow,
.tm-eyebrow {
  color: var(--game-cyan) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

.lede,
.tm-lede {
  color: var(--game-text) !important;
  font-weight: 700 !important;
}

.brand-text {
  color: var(--game-gold) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 기타 텍스트 및 요소 색상 */
.brand,
.brand-mark,
#tourDesc,
.tour-bar,
.tour-actions,
.tour-meta,
.tm-info,
.tm-sites,
.tm-site,
.tm-exit,
.log-actions,
.log-head,
.log-m,
.cta-row,
.icon-close {
  color: var(--game-text) !important;
}

.daylight-pill {
  background: rgba(20, 28, 38, 0.9) !important;
  border: 1px solid var(--game-cyan) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  box-shadow: 0 0 8px rgba(79, 216, 232, 0.2) !important;
}

/* 포커스 표시 - 웹접근성 */
*:focus-visible {
  outline: 2px solid var(--game-gold) !important;
  outline-offset: 2px !important;
}

/* 모바일 터치 타겟 */
@media (max-width: 720px) {
  .tool,
  .btn,
  .d-btn,
  .chip,
  .tm-year,
  .rail-item {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* 모션 감소 설정 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   대비 교정 — 어두운 패널로 바꾸면서 전경색이 따라오지 않아
   텍스트가 배경에 묻혔다. 공공 웹접근성(대비 4.5:1)에도 걸린다.
   ══════════════════════════════════════════════════════════ */

/* 하단 랜드마크 레일 — 이름·구 이름이 안 보이던 문제 */
.rail-item,
.rail-item * {
  color: #e8f2f5 !important;
}
.rail-item strong { color: #ffffff !important; }
.rail-item span,
.rail-item em { color: #9fd4de !important; }
.rail-item [class*="num"],
.rail-item > *:first-child { color: #ffd76a !important; }

/* 툴바 아이콘 — 검은 슬롯에 검은 글리프였다 */
.tool {
  color: #dff3f7 !important;
  font-size: 19px !important;
  line-height: 1 !important;
}
.tool:hover { color: #ffffff !important; }

/* 구 필터 */
.d-btn {
  color: #cfe6ec !important;
}
.d-btn.on,
.d-btn[aria-pressed="true"] {
  color: #0a1216 !important;
  background: #4fd8e8 !important;
}

/* 조작 힌트 */
.hint {
  color: #bcd9e0 !important;
  background: rgba(10, 16, 22, 0.72) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
}

/* 브랜드 */
.brand-text strong { color: #ffffff !important; }
.brand-text span { color: #8fc4d0 !important; }

/* 타임머신 바 */
.tm-bar, .tm-bar * { color: #e8f2f5 !important; }
.tm-year.on strong,
.tm-year.on span { color: #0a1216 !important; }
.tm-info .tm-fact { color: #9fd4de !important; }

/* 인트로 카드가 어두워졌다면 본문도 밝게 */
.intro-card .lede,
.intro-card h1,
.intro-card .eyebrow { color: #e8f2f5 !important; }
.intro-card .eyebrow { color: #4fd8e8 !important; }

/* 퀘스트 트래커(uq-*)를 인트로 카드 아래로 내려 겹침을 푼다.
   인트로 카드 자체의 위치는 건드리지 않는다 — top:auto 를 주면 레이아웃이 무너진다. */
[class^="uq-"][class*="tracker"],
.uq-tracker {
  top: auto !important;
  bottom: 190px !important;
  left: 24px !important;
  z-index: 13 !important;
}

/* 도장깨기 배지 */
[class*="stamp"] { color: #ffd76a !important; }

/* ══════════════════════════════════════════════════════════
   상품화 마감 (Sol 디자인 감사 반영)
   ══════════════════════════════════════════════════════════ */

/* 개발용 로그 패널 — 납품 화면에 상시 노출되면 안 된다.
   z-index 20 이라 주요 모달보다 앞에 뜨던 문제도 같이 해결된다.
   ?debug=1 일 때만 html.debug 가 붙어 복원된다. */
#logToggle,
.log-panel {
  display: none !important;
}
html.debug #logToggle {
  display: inline-flex !important;
}
html.debug .log-panel {
  display: block !important;
}

/* 구 필터 — 실제 활성 클래스는 .active 인데 스킨이 .on 만 강조해
   선택된 구가 일반 버튼과 구분되지 않았다 */
.d-btn.active,
.d-btn.on,
.d-btn[aria-pressed="true"] {
  background: #6a96a0 !important;
  border-color: #8fc4cc !important;
  color: #081216 !important;
  font-weight: 800 !important;
}

/* 타임머신 활성 연도 — 검정 글자가 검정 슬롯에 묻히던 문제 */
.tm-year.on {
  background: #e7b75a !important;
  border-color: #f2ca72 !important;
  box-shadow: 0 0 0 2px rgba(231, 183, 90, 0.22) !important;
}
.tm-year.on strong,
.tm-year.on span {
  color: #101820 !important;
}

/* 툴바 활성 상태 — 투어 실행 중임이 사라지던 문제 */
.tool.active {
  background: #4f8791 !important;
  border-color: #8fc4cc !important;
  box-shadow: 0 0 0 2px rgba(79, 216, 232, 0.18) !important;
  color: #ffffff !important;
}

/* CTA 두 버튼이 똑같아 보이던 문제 — 위계를 되살린다 */
.btn.primary {
  background: #4f8791 !important;
  border-color: #7fb8c2 !important;
  color: #ffffff !important;
}
.btn.ghost {
  background: transparent !important;
  border-color: rgba(232, 242, 245, 0.32) !important;
  color: #d8ebef !important;
}

/* 시각적 위계 — 패널마다 청록 글로우를 줘서 로그가 랜드마크만큼 튀었다.
   공통은 낮추고, 강조는 타임머신 패널에만 남긴다 */
.intro-card,
.tooltip,
.log-panel {
  border-color: rgba(106, 150, 160, 0.24) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34) !important;
}
.tm-panel {
  border-color: rgba(231, 183, 90, 0.55) !important;
}