#map.map-navigation-light .leaflet-tile-pane,
#map.map-theme-light .leaflet-tile-pane,
#map .leaflet-tile-pane {
  filter: none !important;
  opacity: 1 !important;
}
:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --text: #172033;
  --muted: #657083;
  --border: #dfe4ec;
  --accent: #2858e8;
  --accent-text: #ffffff;
  --danger-bg: #fff0f0;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(20, 30, 55, .08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1420;
    --surface: #171e2d;
    --text: #f3f6fb;
    --muted: #a7b0bf;
    --border: #2d3748;
    --accent: #7698ff;
    --accent-text: #071020;
    --danger-bg: #3a2023;
    --shadow: 0 16px 46px rgba(0,0,0,.28);
  }
}

* { box-sizing: border-box; }
html { font-family: Inter, Pretendard, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.55; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
input, select, textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: .8rem .9rem;
  color: var(--text); background: var(--surface);
}
textarea { resize: vertical; }
label { display: grid; gap: .45rem; font-weight: 650; }

.topbar {
  min-height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 1000;
}
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.brand { text-decoration: none; font-weight: 850; letter-spacing: -.03em; }
.container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; }

.hero { display: flex; gap: 2rem; align-items: end; justify-content: space-between; margin-bottom: 1.5rem; }
.hero h1 { max-width: 780px; margin: .3rem 0 .6rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.055em; }
.hero p { max-width: 760px; color: var(--muted); }
.eyebrow { font-size: .77rem; font-weight: 850; letter-spacing: .13em; color: var(--accent) !important; }
.language-select { min-width: 180px; }

.guide-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .8fr); gap: 1rem; }
.map-card, .guide-panel, .auth-card, .wide-form, .table-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
#map { min-height: 62vh; border-radius: var(--radius); }
.guide-panel { padding: 1.3rem; }
.status-row { display: flex; gap: .7rem; align-items: center; justify-content: space-between; }
.badge { padding: .4rem .65rem; border-radius: 999px; background: var(--bg); font-size: .85rem; }
.muted { color: var(--muted); }
.primary-button, .secondary-button {
  border: 0; border-radius: 12px; padding: .8rem 1rem; cursor: pointer; font-weight: 800;
}
.primary-button { background: var(--accent); color: var(--accent-text); }
.secondary-button { background: var(--bg); color: var(--text); }
.button-link { text-decoration: none; display: inline-block; }
.inline-form { display: inline; }
.link-button { border: 0; padding: 0; background: transparent; color: var(--text); text-decoration: underline; cursor: pointer; }

.auth-card { width: min(460px, 100%); margin: 7vh auto; padding: 1.5rem; }
.stack-form { display: grid; gap: 1rem; }
.wide-form { padding: 1.4rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.checkbox-row { display: flex; align-items: center; gap: .6rem; }
.checkbox-row input { width: auto; }
fieldset { border: 1px solid var(--border); border-radius: 14px; padding: 1rem; display: grid; gap: .8rem; }
legend { font-weight: 850; padding: 0 .4rem; }
.alert { border: 1px solid #d66; background: var(--danger-bg); border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0; }

.page-header { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
.page-header h1 { margin: .2rem 0 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem 1rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 800px) {
  .container { width: min(100% - 1rem, 1180px); padding-top: 1rem; }
  .hero { display: grid; gap: .8rem; }
  .guide-grid { grid-template-columns: 1fr; }
  #map { min-height: 52vh; }
  .form-grid { grid-template-columns: 1fr; }
  .page-header { align-items: start; flex-direction: column; }
}


.admin-map-section { display: grid; gap: .8rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.section-heading h2 { margin-bottom: .2rem; }
#adminPoiMap { min-height: 360px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }

.demo-tools {
  margin-top: 1rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr minmax(180px, 260px) auto;
  align-items: center;
  gap: .8rem;
}

@media (max-width: 800px) {
  .section-heading { align-items: start; flex-direction: column; }
  #adminPoiMap { min-height: 300px; }
  .demo-tools { grid-template-columns: 1fr; }
}


/* ===== Automatic Guide UX ===== */
.guide-hero { align-items: stretch; }
.guide-start-card {
  width: min(330px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem;
  display: grid;
  gap: .85rem;
  align-content: center;
}
.start-guide-button { min-height: 54px; font-size: 1.02rem; }
.start-guide-button:disabled { opacity: .78; cursor: default; }
.tiny-note { margin: 0; font-size: .8rem; color: var(--muted); }

.guide-status-strip {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.guide-status-strip > div:first-child { display: flex; align-items: center; gap: .55rem; margin-right: auto; }
.state-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #9aa4b2; }
.state-dot.is-active { background: #22a06b; box-shadow: 0 0 0 5px rgba(34,160,107,.12); }
.state-dot.is-playing { background: #2858e8; box-shadow: 0 0 0 5px rgba(40,88,232,.14); animation: statePulse 1.2s infinite; }
.state-dot.is-error { background: #d64545; }
.state-dot.is-idle { background: #9aa4b2; }
@keyframes statePulse { 50% { transform: scale(1.35); } }

.compact-button { padding: .55rem .75rem; }
.map-shell { position: relative; overflow: hidden; }
.map-floating-message {
  position: absolute;
  z-index: 500;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(15,20,32,.92);
  color: white;
  border-radius: 999px;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: calc(100% - 32px);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  font-size: .9rem;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #55d68b; box-shadow: 0 0 0 5px rgba(85,214,139,.16); }

.guide-icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--bg); margin: .6rem 0 1rem;
}
.next-guide-card {
  margin-top: 1.3rem; padding: 1rem; border-radius: 14px;
  background: var(--bg); display: grid; gap: .25rem;
}
.how-it-works {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1rem;
}
.how-it-works article {
  display: flex; gap: .8rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1rem;
}
.how-it-works article > span {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); display: grid; place-items: center; font-weight: 850;
}
.how-it-works p { margin: .18rem 0 0; color: var(--muted); font-size: .88rem; }

/* ===== Admin automatic-location UI ===== */
.admin-title-row { align-items: center; }
.admin-summary-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem;
}
.summary-card {
  display: flex; align-items: center; gap: .8rem; padding: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.summary-card > span { font-size: 1.5rem; }
.summary-card div { display: grid; }
.summary-card small { color: var(--muted); }
.summary-card strong { font-size: 1.35rem; }

.admin-explain-card {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: 1rem; padding: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.flow-step { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.flow-step > span {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 850;
}
.flow-step div { display: grid; }
.flow-step small { color: var(--muted); }
.flow-arrow { color: var(--muted); font-size: 1.3rem; }

.table-subtext { color: var(--muted); font-size: .78rem; margin-top: .18rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.language-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.language-chips span {
  padding: .25rem .48rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; font-size: .75rem;
}
.status-pill { padding: .3rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.status-pill.active { background: rgba(34,160,107,.12); color: #168154; }
.status-pill.inactive { background: rgba(120,130,145,.12); color: var(--muted); }
.table-action { font-weight: 800; color: var(--accent); }
.empty-table { text-align: center; color: var(--muted); padding: 2.5rem !important; }

@media (max-width: 900px) {
  .admin-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-explain-card { align-items: stretch; flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); align-self: center; }
  .how-it-works { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .guide-status-strip { flex-wrap: wrap; }
  .guide-status-strip > div:first-child { width: 100%; }
  .guide-start-card { width: 100%; }
}

@media (max-width: 560px) {
  .admin-summary-grid, .how-it-works { grid-template-columns: 1fr; }
  .map-floating-message { border-radius: 14px; width: calc(100% - 24px); justify-content: center; }
}


/* ===== Phase 2: admin productivity ===== */
.location-search-card {
  display: grid; gap: .8rem; padding: 1rem;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg);
}
.location-search-card h2 { margin: 0; }
.location-search-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.search-results { display: grid; gap: .45rem; }
.search-result-item {
  text-align: left; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 12px; padding: .8rem; cursor: pointer;
  display: grid; gap: .2rem;
}
.search-result-item:hover { border-color: var(--accent); }
.search-result-item span { color: var(--muted); font-size: .82rem; }
.form-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.table-actions { display: grid; gap: .3rem; }

.simulator-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: 1rem; }
#simulateMap { min-height: 580px; border-radius: var(--radius); }
.simulator-panel { display: grid; align-content: start; gap: .8rem; }
.sim-meta { display: grid; gap: .5rem; padding: .8rem; border-radius: 12px; background: var(--bg); }
.sim-meta div { display: grid; gap: .1rem; }
.sim-meta small { color: var(--muted); }
.simulation-status { padding: .8rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }

@media (max-width: 800px) {
  .location-search-row, .simulator-grid { grid-template-columns: 1fr; }
  #simulateMap { min-height: 420px; }
}


/* ===== Phase 3: audio upload manager ===== */
.phase3-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
}
.phase3-heading h2 { margin: 0 0 .25rem; }

.audio-policy-note {
  flex: 0 0 auto;
  display: grid;
  gap: .1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.audio-policy-note strong { color: var(--accent); }
.audio-policy-note span { color: var(--muted); font-size: .8rem; }

.language-audio-fieldset { gap: 1rem; }

.audio-manager {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}

.audio-manager-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: .8rem;
}
.audio-manager-title > div { display: grid; gap: .15rem; }

.audio-status-pill {
  padding: .3rem .55rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}
.audio-status-pill.has-audio {
  background: rgba(34,160,107,.12);
  color: #168154;
}
.audio-status-pill.no-audio {
  background: rgba(120,130,145,.12);
  color: var(--muted);
}
.audio-status-pill.pending-audio {
  background: rgba(40,88,232,.12);
  color: var(--accent);
}

.current-audio-card,
.new-audio-preview {
  display: grid;
  gap: .65rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.current-audio-card > div,
.new-audio-preview {
  min-width: 0;
}

.audio-url-text {
  display: block;
  overflow-wrap: anywhere;
  margin-top: .15rem;
}

.audio-manager audio {
  width: 100%;
  min-height: 42px;
}

.audio-upload-drop {
  display: grid;
  gap: .4rem;
  padding: 1rem;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.audio-upload-drop:hover { border-color: var(--accent); }
.audio-upload-drop > span { font-weight: 850; }
.audio-upload-drop > small { color: var(--muted); }
.audio-upload-drop input {
  border: 0;
  padding: .35rem 0;
  background: transparent;
}

.new-audio-meta {
  color: var(--muted);
  font-size: .82rem;
  overflow-wrap: anywhere;
}

.danger-check { color: #a93737; }

.manual-url-details {
  border-top: 1px solid var(--border);
  padding-top: .7rem;
}
.manual-url-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 750;
}
.manual-url-details[open] summary {
  margin-bottom: .7rem;
}

@media (max-width: 700px) {
  .phase3-heading,
  .audio-manager-title {
    align-items: stretch;
    flex-direction: column;
  }

  .audio-policy-note {
    width: 100%;
  }

  .audio-status-pill {
    width: fit-content;
  }
}


/* ===== Phase 3: 현장 음성 상태/재시도 ===== */
.audio-diagnostic {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}

.audio-diagnostic-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-bottom: .15rem;
}

.audio-check-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 28px;
  color: var(--muted);
  font-size: .84rem;
}

.audio-check-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #aab1bd;
  box-shadow: 0 0 0 4px rgba(170,177,189,.13);
}

.audio-check-dot.is-ok {
  background: #22a06b;
  box-shadow: 0 0 0 4px rgba(34,160,107,.13);
}

.audio-check-dot.is-ready {
  background: #2f5dea;
  box-shadow: 0 0 0 4px rgba(47,93,234,.13);
}

.audio-check-dot.is-warn {
  background: #e69b22;
  box-shadow: 0 0 0 4px rgba(230,155,34,.14);
}

.audio-check-dot.is-error {
  background: #d84a4a;
  box-shadow: 0 0 0 4px rgba(216,74,74,.14);
}

.audio-check-dot.is-wait {
  background: #aab1bd;
}

@media (max-width: 700px) {
  .audio-diagnostic-head {
    align-items: stretch;
    flex-direction: column;
  }

  #retryCurrentGuide {
    width: 100%;
  }
}


/* =========================================================
   User UI Clean v1
   기존 GPS / 음성 / Queue 기능 ID는 유지하고 화면만 정리
   ========================================================= */

.tour-shell {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 60px;
}

.tour-hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}

.tour-hero-copy,
.tour-control-card,
.tour-status-strip,
.tour-map-card,
.current-guide-card,
.next-guide-modern,
.tour-diagnostic-panel {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(26, 39, 70, .06);
}

.tour-hero-copy {
  padding: 34px;
  background:
    linear-gradient(135deg, rgba(47,93,234,.08), rgba(47,93,234,0)),
    var(--surface);
}

.tour-hero-copy h1 {
  margin: 8px 0 14px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.tour-hero-desc {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.tour-control-card {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 26px;
}

.tour-language {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.tour-language span {
  font-size: .82rem;
  color: var(--muted);
}

.tour-language select {
  height: 54px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 750;
}

.tour-start-button {
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}

.tour-start-button:disabled {
  opacity: .82;
  cursor: default;
}

.tour-help {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
}

.tour-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  margin-bottom: 18px;
}

.tour-status-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tour-status-main > div {
  display: grid;
  gap: 2px;
}

.tour-status-main small {
  color: var(--muted);
}

.tour-status-main strong {
  font-size: 1rem;
}

.tour-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: .86rem;
  font-weight: 750;
}

.status-button {
  cursor: pointer;
}

.tour-map-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}

.tour-map-card #map {
  height: clamp(380px, 52vh, 620px);
  min-height: 380px;
  border-radius: 0;
}

.tour-map-message {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(13, 21, 39, .88);
  color: #fff;
  backdrop-filter: blur(8px);
  text-align: center;
  font-weight: 750;
  line-height: 1.45;
}

.guide-summary-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 18px;
}

.current-guide-card,
.next-guide-modern {
  padding: 26px;
}

.guide-card-head,
.next-guide-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.guide-card-head h2 {
  margin: 7px 0 0;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.guide-audio-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--bg);
  font-size: 1.8rem;
}

.current-guide-description {
  margin: 22px 0 14px;
  font-size: 1.05rem;
  line-height: 1.75;
}

.current-guide-distance {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.next-guide-modern {
  display: grid;
  align-content: space-between;
  min-height: 190px;
  background:
    linear-gradient(145deg, rgba(47,93,234,.08), rgba(47,93,234,0)),
    var(--surface);
}

.next-guide-top span {
  color: var(--muted);
  font-size: .86rem;
}

.next-arrow {
  font-size: 1.8rem !important;
  color: var(--accent) !important;
}

.next-guide-modern > strong {
  display: block;
  margin-top: 28px;
  font-size: 1.35rem;
  line-height: 1.35;
}

.tour-diagnostic-panel {
  margin-top: 18px;
  overflow: hidden;
}

.tour-diagnostic-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 850;
}

.tour-diagnostic-panel > summary small {
  color: var(--muted);
  font-weight: 650;
}

.tour-diagnostic-panel .audio-diagnostic {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 820px) {
  .tour-shell {
    width: min(100% - 20px, 720px);
    padding-top: 16px;
  }

  .tour-hero {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tour-hero-copy {
    padding: 24px;
  }

  .tour-hero-copy h1 {
    font-size: 2.1rem;
  }

  .tour-control-card {
    padding: 18px;
  }

  .tour-status-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .tour-status-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .tour-map-card #map {
    height: 52vh;
    min-height: 420px;
  }

  .guide-summary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .current-guide-card,
  .next-guide-modern {
    padding: 22px;
  }

  .next-guide-modern {
    min-height: 150px;
  }
}

@media (max-width: 520px) {
  .tour-shell {
    width: 100%;
    padding: 8px 10px 44px;
  }

  .tour-hero-copy,
  .tour-control-card,
  .tour-status-strip,
  .tour-map-card,
  .current-guide-card,
  .next-guide-modern,
  .tour-diagnostic-panel {
    border-radius: 18px;
  }

  .tour-hero-copy {
    padding: 20px;
  }

  .tour-hero-copy h1 {
    font-size: 1.75rem;
  }

  .tour-hero-desc {
    font-size: .92rem;
  }

  .tour-map-card #map {
    height: 48vh;
    min-height: 360px;
  }

  .tour-map-message {
    left: 12px;
    right: 12px;
    bottom: 12px;
    font-size: .88rem;
  }

  .guide-card-head h2 {
    font-size: 1.8rem;
  }

  .current-guide-description {
    font-size: 1rem;
  }
}


/* =========================================================
   Follow Mode + Car Marker
   ========================================================= */

.car-marker-wrapper {
  background: transparent !important;
  border: 0 !important;
}

.car-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2858e8;
  box-shadow:
    0 8px 24px rgba(25, 50, 120, .32),
    0 0 0 7px rgba(40, 88, 232, .14);
}

.car-marker::after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 2px solid rgba(40,88,232,.22);
  border-radius: 50%;
}

.car-marker-symbol {
  transform: translateY(-1px);
  font-size: 24px;
  line-height: 1;
  filter: saturate(.95);
}

.follow-location-button {
  position: absolute;
  right: 16px;
  bottom: 76px;
  z-index: 550;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(20, 32, 60, .12);
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #1b2a4d;
  box-shadow: 0 10px 28px rgba(23, 36, 68, .18);
  backdrop-filter: blur(8px);
  font-weight: 850;
  cursor: pointer;
}

.follow-location-button:hover {
  transform: translateY(-1px);
}

.follow-location-button[hidden] {
  display: none !important;
}

@media (max-width: 520px) {
  .follow-location-button {
    right: 12px;
    bottom: 72px;
    min-height: 42px;
    padding: 0 13px;
    font-size: .84rem;
  }
}


/* FINAL: 18px simple car + automatic light/dark user mode */
.car-marker.car-marker-18 {
  width: 18px !important;
  height: 26px !important;
  margin: 2px auto;
  border: 2px solid #fff !important;
  border-radius: 6px !important;
  background: #1769e0 !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.25), 0 0 0 4px rgba(23,105,224,.13) !important;
}
.car-marker.car-marker-18::after { display:none !important; }
.car-marker-18::before {
  content:'';
  position:absolute; left:3px; right:3px; bottom:4px; height:3px;
  border-radius:2px; background:rgba(255,255,255,.9);
}
.car-marker-18 .car-window {
  position:absolute; top:4px; left:3px; width:8px; height:6px;
  border-radius:2px; background:#dcecff;
}
.car-marker-18 .car-wheel {
  position:absolute; top:10px; width:2px; height:7px;
  border-radius:2px; background:#172033;
}
.car-marker-18 .car-wheel-left { left:-3px; }
.car-marker-18 .car-wheel-right { right:-3px; }

#map.map-dark-theme .leaflet-tile-pane {
  filter: brightness(.52) saturate(.72) contrast(1.08) hue-rotate(175deg) invert(.88);
}
.tour-night-mode body { background:#0d1621; color:#edf3f9; }
.tour-night-mode .tour-hero-copy,
.tour-night-mode .tour-control-card,
.tour-night-mode .tour-status-strip,
.tour-night-mode .tour-map-card,
.tour-night-mode .current-guide-card,
.tour-night-mode .next-guide-modern,
.tour-night-mode .tour-diagnostic-panel {
  background:#152231; border-color:rgba(255,255,255,.08);
  box-shadow:0 14px 40px rgba(0,0,0,.20);
}
.tour-night-mode .tour-hero-copy {
  background:linear-gradient(135deg,rgba(34,118,255,.15),rgba(34,118,255,0)),#152231;
}
.tour-night-mode .next-guide-modern {
  background:linear-gradient(145deg,rgba(34,118,255,.14),rgba(34,118,255,0)),#152231;
}
.tour-night-mode .tour-hero-desc,
.tour-night-mode .tour-help,
.tour-night-mode .current-guide-distance,
.tour-night-mode .tour-status-main small,
.tour-night-mode .next-guide-top span,
.tour-night-mode .tour-diagnostic-panel > summary small { color:#9eacbd; }
.tour-night-mode .status-chip,
.tour-night-mode .guide-audio-icon,
.tour-night-mode .tour-language select {
  background:#0f1b28; color:#edf3f9; border-color:rgba(255,255,255,.10);
}
.tour-night-mode .follow-location-button {
  background:rgba(21,34,49,.96); color:#edf3f9; border-color:rgba(255,255,255,.10);
}
#map.map-dark-theme .leaflet-marker-pane,
#map.map-dark-theme .leaflet-popup-pane { filter:none !important; }


/* USER MOBILE V2 */
.tour-shell-v2{padding-top:10px}
.tour-control-compact{
  border:1px solid var(--border);background:var(--surface);border-radius:18px;
  box-shadow:0 10px 30px rgba(26,39,70,.06);padding:14px;margin-bottom:10px
}
.control-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.compact-language{gap:4px}.compact-language span{font-size:.72rem}
.compact-language select{height:42px;border-radius:11px;font-size:.9rem}
.compact-start-button{height:42px;min-height:42px;padding:0 14px;border-radius:11px;font-size:.84rem;white-space:nowrap}
.compact-start-button.is-running-compact{
  min-width:104px;background:#eef8f3;color:#178451;border:1px solid #cfeadd;
  box-shadow:none;font-size:.78rem
}
.compact-running-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--border)
}
.compact-running-bar .tour-status-main{gap:8px}
.compact-running-bar .tour-status-main small{display:none}
.compact-running-bar .tour-status-main strong{font-size:.8rem}
.compact-running-bar .tour-status-actions{flex-wrap:nowrap;gap:5px}
.compact-running-bar .status-chip{min-height:31px;padding:0 8px;font-size:.72rem}
.tour-map-priority{margin-bottom:10px}
.tour-map-priority #map{height:54vh;min-height:390px}
.guide-summary-v2{margin-top:0}
@media(max-width:520px){
  .tour-shell-v2{padding:6px 10px 36px}
  .tour-control-compact{padding:11px;border-radius:15px}
  .tour-map-priority #map{height:52vh;min-height:380px}
  .tour-map-message{left:10px;right:10px;bottom:10px;padding:9px 11px;font-size:.79rem;border-radius:11px}
  .current-guide-card,.next-guide-modern{padding:17px}
  .guide-card-head h2{font-size:1.5rem}
  .current-guide-description{margin:12px 0 9px;font-size:.9rem;line-height:1.55}
  .next-guide-modern{min-height:120px}
  .next-guide-modern>strong{margin-top:16px;font-size:1.06rem}
}
.tour-night-mode .tour-control-compact{background:#152231;border-color:rgba(255,255,255,.08)}
.tour-night-mode .compact-start-button.is-running-compact{
  background:rgba(31,160,100,.14);color:#74d8a8;border-color:rgba(116,216,168,.20)
}


/* =========================================================
   USER MOBILE V2.1 STABILIZATION
   - running button hidden
   - POI marker differentiated from car
   - top spacing cleanup
   ========================================================= */

#startGuide.is-running-compact {
  display: none !important;
}

.control-row:has(#startGuide.is-running-compact) {
  grid-template-columns: 1fr;
}

.tour-control-compact {
  overflow: hidden;
}

.poi-marker-wrapper {
  background: transparent !important;
  border: 0 !important;
}

.poi-marker-dot {
  position: relative;
  width: 14px;
  height: 14px;
  margin: 2px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2f5dea;
  box-shadow:
    0 3px 10px rgba(20,40,100,.22),
    0 0 0 4px rgba(47,93,234,.12);
}

.poi-marker-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

/* 현재 차량은 POI보다 항상 위 */
.car-marker-wrapper {
  z-index: 1000 !important;
}

@media (max-width: 520px) {
  .tour-control-compact {
    margin-top: 0;
  }

  .compact-running-bar {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .control-row:has(#startGuide.is-running-compact) {
    display: none;
  }
}

/* dark mode에서도 POI는 구분 가능하게 */
.tour-night-mode .poi-marker-dot {
  background: #5f8cff;
  border-color: #eaf0f7;
  box-shadow:
    0 3px 10px rgba(0,0,0,.32),
    0 0 0 4px rgba(95,140,255,.18);
}


/* =========================================================
   STEP 2 — MOBILE STATUS BAR COMPACT
   기능 로직은 건드리지 않고 상단 상태 표시만 한 줄로 정리
   ========================================================= */

.compact-running-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.compact-running-bar .tour-status-main {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.compact-running-bar .tour-status-main > div {
  display: block !important;
  min-width: 0 !important;
}

.compact-running-bar .tour-status-main small {
  display: none !important;
}

.compact-running-bar .tour-status-main strong {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .82rem !important;
  line-height: 1.2 !important;
}

.compact-running-bar .state-dot {
  flex: 0 0 auto !important;
}

.compact-running-bar .tour-status-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
}

.compact-running-bar .status-chip {
  min-height: 31px !important;
  height: 31px !important;
  padding: 0 9px !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .tour-control-compact {
    padding: 10px 11px !important;
  }

  .compact-running-bar {
    gap: 6px !important;
  }

  .compact-running-bar .tour-status-main {
    gap: 6px !important;
  }

  .compact-running-bar .tour-status-main strong {
    font-size: .76rem !important;
  }

  .compact-running-bar .status-chip {
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 7px !important;
    font-size: .68rem !important;
  }
}


/* =========================================================
   STEP 2.1 — STATUS BAR TEXT RESTORE
   초록 점만 남고 안내 상태 문구가 사라지는 문제 보정
   ========================================================= */

.compact-running-bar .tour-status-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.compact-running-bar .tour-status-main > div {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.compact-running-bar .tour-status-main strong {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: .74rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

.compact-running-bar .tour-status-actions {
  gap: 5px !important;
}

.compact-running-bar .status-chip {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 7px !important;
  font-size: .67rem !important;
}

/* 모바일에서는 상태 문구에 충분한 너비를 우선 배정 */
@media (max-width: 520px) {
  .compact-running-bar {
    display: grid !important;
    grid-template-columns: minmax(110px, 1fr) auto !important;
    gap: 5px !important;
  }

  .compact-running-bar .tour-status-main {
    min-width: 110px !important;
  }

  .compact-running-bar .tour-status-main strong {
    font-size: .70rem !important;
  }

  .compact-running-bar .tour-status-actions {
    gap: 4px !important;
  }

  .compact-running-bar .status-chip {
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 6px !important;
    font-size: .64rem !important;
  }

  /* GPS 문구가 너무 길어지는 것을 방지 */
  #gpsStatus {
    max-width: 88px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* =========================================================
   STEP 2.2 — STATUS BAR HTML + CSS FIX
   실제 사용자 View 구조를 단순화하여 상태문구를 확실히 노출
   ========================================================= */

.statusbar-v22 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--border) !important;
}

.statusbar-guide-state {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.statusbar-guide-state .state-dot {
  flex: 0 0 auto !important;
}

.statusbar-guide-state #guideState {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.statusbar-v22 .statusbar-chip {
  min-height: 29px !important;
  height: 29px !important;
  padding: 0 8px !important;
  font-size: .68rem !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .statusbar-v22 {
    grid-template-columns: minmax(98px, 1fr) auto auto !important;
    gap: 4px !important;
  }

  .statusbar-guide-state {
    gap: 5px !important;
  }

  .statusbar-guide-state #guideState {
    font-size: .68rem !important;
  }

  .statusbar-v22 .statusbar-chip {
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 6px !important;
    font-size: .62rem !important;
  }
}


/* =========================================================
   STEP 2.3 — TOP SPACE / DIVIDER CLEANUP
   상태카드의 불필요한 상단 빈 공간과 가로선 축소
   ========================================================= */

.tour-control-compact {
  padding-top: 8px !important;
  padding-bottom: 9px !important;
  margin-bottom: 8px !important;
}

.statusbar-v22 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  min-height: 38px !important;
}

.control-row:has(#startGuide.is-running-compact) {
  display: none !important;
}

#startGuide.is-running-compact {
  display: none !important;
}

.tour-map-priority {
  margin-top: 0 !important;
}

@media (max-width: 520px) {
  .tour-shell-v2 {
    padding-top: 2px !important;
  }

  .tour-control-compact {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 14px !important;
  }

  .statusbar-v22 {
    min-height: 34px !important;
  }

  .statusbar-guide-state #guideState {
    font-size: .68rem !important;
  }

  .statusbar-v22 .statusbar-chip {
    min-height: 26px !important;
    height: 26px !important;
  }

  .tour-map-priority {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
}


/* =========================================================
   STEP 3 — STABLE LIGHT / DARK MAP
   현재 OpenStreetMap 타일을 그대로 사용하여 서버/CSP 변경 없음
   Light: 06:00–17:59
   Dark : 18:00–05:59
   ========================================================= */

/* 낮: 정보는 유지하면서 조금 더 밝고 단순하게 */
#map.map-theme-light .leaflet-tile-pane {
  filter:
    saturate(.82)
    brightness(1.04)
    contrast(.96);
}

/* 밤: 같은 지도 타일을 다크 톤으로 변환 */
#map.map-theme-dark .leaflet-tile-pane {
  filter:
    brightness(.48)
    saturate(.60)
    contrast(1.12)
    invert(.88)
    hue-rotate(178deg);
}

/* 자동차/POI/팝업은 필터 영향 없이 선명하게 */
#map.map-theme-dark .leaflet-marker-pane,
#map.map-theme-dark .leaflet-popup-pane,
#map.map-theme-dark .leaflet-tooltip-pane,
#map.map-theme-light .leaflet-marker-pane,
#map.map-theme-light .leaflet-popup-pane,
#map.map-theme-light .leaflet-tooltip-pane {
  filter: none !important;
}

/* 줌 버튼/저작권 표시 야간 가독성 */
#map.map-theme-dark .leaflet-control-zoom a,
#map.map-theme-dark .leaflet-control-attribution {
  background: rgba(18, 28, 40, .94) !important;
  color: #e9eff7 !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* 사용자 화면도 야간에 자연스럽게 어둡게 */
.tour-night-mode body {
  background: #0d1621;
  color: #edf3f9;
}

.tour-night-mode .tour-control-compact,
.tour-night-mode .tour-map-card,
.tour-night-mode .current-guide-card,
.tour-night-mode .next-guide-modern,
.tour-night-mode .tour-diagnostic-panel {
  background: #152231;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}

.tour-night-mode .statusbar-guide-state #guideState {
  color: #edf3f9 !important;
}

.tour-night-mode .status-chip {
  background: #0f1b28 !important;
  color: #edf3f9 !important;
  border-color: rgba(255,255,255,.10) !important;
}

.tour-night-mode .current-guide-description,
.tour-night-mode .current-guide-distance,
.tour-night-mode .next-guide-top span,
.tour-night-mode .tour-diagnostic-panel > summary small {
  color: #a7b3c2 !important;
}

.tour-night-mode .follow-location-button {
  background: rgba(21,34,49,.96) !important;
  color: #edf3f9 !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* 낮에는 기존 흰색 UI 유지 */
:root:not(.tour-night-mode) .tour-control-compact,
:root:not(.tour-night-mode) .tour-map-card,
:root:not(.tour-night-mode) .current-guide-card,
:root:not(.tour-night-mode) .next-guide-modern,
:root:not(.tour-night-mode) .tour-diagnostic-panel {
  background: var(--surface);
}


/* =========================================================
   STEP 5-1 — POI QUALITY DASHBOARD
   ========================================================= */

.quality-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quality-ok-card > span {
  color: #178451;
}

.quality-warning-card > span {
  color: #b87400;
}

.quality-error-card > span {
  color: #c73535;
}

.quality-guide-card {
  margin: 16px 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.quality-guide-card > strong {
  display: block;
  margin-bottom: 10px;
}

.quality-guide-items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.quality-guide-items span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg);
  font-size: .78rem;
  font-weight: 750;
}

.quality-guide-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.quality-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 850;
}

.quality-healthy {
  background: #eaf8f1;
  color: #14754a;
}

.quality-warning {
  background: #fff5dc;
  color: #986100;
}

.quality-error {
  background: #fdecec;
  color: #b82d2d;
}

.quality-details {
  margin-top: 7px;
  font-size: .75rem;
}

.quality-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 750;
}

.quality-issues {
  display: grid;
  gap: 5px;
  margin-top: 7px;
  min-width: 190px;
}

.quality-issue-error,
.quality-issue-warning {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
}

.quality-issue-error {
  background: #fdecec;
  color: #a72b2b;
}

.quality-issue-warning {
  background: #fff7e3;
  color: #8a5c06;
}

.quality-language-grid {
  display: grid;
  gap: 4px;
}

.quality-language-grid span {
  white-space: nowrap;
  font-size: .76rem;
}

.quality-language-grid .has-item {
  color: #16754a;
  font-weight: 750;
}

.quality-language-grid .missing-item {
  color: #a3aab5;
}

.quality-row-error {
  background: rgba(199, 53, 53, .025);
}

.quality-row-warning {
  background: rgba(184, 116, 0, .02);
}

@media (max-width: 1100px) {
  .quality-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .quality-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quality-table-wrap {
    overflow-x: auto;
  }

  .quality-table-wrap table {
    min-width: 980px;
  }
}


/* =========================================================
   STEP 5-1B — QUALITY JUDGEMENT / FILTER / DARK HEADER
   ========================================================= */

.quality-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.quality-tts-card > span { color: #3767d6; }

.quality-tts {
  background: #edf3ff;
  color: #2f5cc6;
}

.quality-row-tts { background: rgba(55, 103, 214, .025); }

.quality-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.quality-guide-head p { margin: 5px 0 0; }

.quality-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#qualitySearch {
  width: 210px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
}

.quality-filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.quality-filters button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}

.quality-filters button.is-selected {
  background: #2f5eea;
  border-color: #2f5eea;
  color: #fff;
}

.quality-count {
  display: inline-block;
  margin-bottom: 5px;
  font-size: .82rem;
}

.quality-empty-filtered {
  padding: 24px;
  text-align: center;
  color: var(--muted);
}

/* 사용자 야간 헤더 가독성 */
.tour-night-mode header,
.tour-night-mode .site-header,
.tour-night-mode .app-header,
.tour-night-mode .top-header,
.tour-night-mode body > header,
.tour-night-mode body > nav {
  background: #101b28 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #edf3f9 !important;
}

.tour-night-mode header a,
.tour-night-mode header strong,
.tour-night-mode header span,
.tour-night-mode .site-header a,
.tour-night-mode .site-header strong,
.tour-night-mode .site-header span,
.tour-night-mode .app-header a,
.tour-night-mode .app-header strong,
.tour-night-mode .app-header span,
.tour-night-mode .top-header a,
.tour-night-mode .top-header strong,
.tour-night-mode .top-header span,
.tour-night-mode body > header a,
.tour-night-mode body > nav a {
  color: #edf3f9 !important;
}

@media (max-width: 1100px) {
  .quality-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .quality-guide-head {
    flex-direction: column;
  }
  .quality-toolbar {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .quality-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #qualitySearch {
    width: 100%;
  }
}


/* =========================================================
   STEP 5-3A FIX
   - 라이트 내비게이션 테마 고정
   - 자동차 아이콘 -> 깜빡이는 현재 위치 점
   - 지도 더블클릭 -> 현재 지도 영역 전체화면 토글
   ========================================================= */

/* 1) OS 다크모드와 관계없이 밝은 내비게이션 테마 고정 */
:root {
  --bg: #f4f6f9 !important;
  --surface: #ffffff !important;
  --text: #111827 !important;
  --muted: #667085 !important;
  --border: #e2e7ee !important;
  --accent: #2563eb !important;
  --accent-text: #ffffff !important;
  --danger-bg: #fff1f2 !important;
  --shadow: 0 10px 30px rgba(15, 23, 42, .07) !important;
}

html,
body {
  background: #f4f6f9 !important;
  color: #111827 !important;
  color-scheme: light !important;
}

.topbar,
.site-header,
.app-header,
.top-header,
body > header,
body > nav {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e2e7ee !important;
}

.topbar a,
.site-header a,
.app-header a,
.top-header a,
body > header a,
body > nav a {
  color: #111827 !important;
}

/* 이전 자동 야간 스타일을 무력화 */
.tour-night-mode body,
.tour-night-mode .tour-control-compact,
.tour-night-mode .tour-map-card,
.tour-night-mode .current-guide-card,
.tour-night-mode .next-guide-modern,
.tour-night-mode .tour-diagnostic-panel,
.tour-night-mode header,
.tour-night-mode .site-header,
.tour-night-mode .app-header,
.tour-night-mode .top-header,
.tour-night-mode body > header,
.tour-night-mode body > nav {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e2e7ee !important;
}

.tour-night-mode .tour-shell-v2,
.tour-night-mode main,
.tour-night-mode .container {
  background: #f4f6f9 !important;
}

.tour-night-mode header a,
.tour-night-mode header strong,
.tour-night-mode header span,
.tour-night-mode .site-header a,
.tour-night-mode .site-header strong,
.tour-night-mode .site-header span,
.tour-night-mode .app-header a,
.tour-night-mode .app-header strong,
.tour-night-mode .app-header span,
.tour-night-mode .top-header a,
.tour-night-mode .top-header strong,
.tour-night-mode .top-header span {
  color: #111827 !important;
}

/* 2) 밝은 내비게이션형 지도 색상 - 시안 기준
      목적:
      - 노란/갈색 계열 억제
      - 회백색 도로/건물 톤
      - POI/현재 위치는 또렷하게 유지
*/
#map,
.tour-map-card,
.map-shell {
  background: #edf3f7 !important;
}

#map.map-navigation-light .leaflet-tile-pane,
#map.map-theme-light .leaflet-tile-pane,
#map .leaflet-tile-pane {
  filter:
    grayscale(.34)
    saturate(.48)
    brightness(1.12)
    contrast(.84) !important;
  opacity: .96;
}

/* 지도 위 선/텍스트가 너무 흐려지지 않도록 overlay 계층은 필터 제외 */
#map .leaflet-overlay-pane,
#map .leaflet-marker-pane,
#map .leaflet-tooltip-pane,
#map .leaflet-popup-pane,
#map .leaflet-shadow-pane {
  filter: none !important;
  opacity: 1 !important;
}

/* 시안처럼 컨트롤은 흰색, 선은 연회색 */
#map .leaflet-control-zoom {
  border: 1px solid #d9e0e8 !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.10) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

#map .leaflet-control-zoom a {
  background: rgba(255,255,255,.98) !important;
  color: #111827 !important;
  border-color: #e3e8ef !important;
}

#map .leaflet-control-zoom a:hover {
  background: #f6f8fb !important;
}

#map .leaflet-control-attribution {
  background: rgba(255,255,255,.90) !important;
  color: #526071 !important;
  border-radius: 8px 0 0 0 !important;
}

/* POI는 지도보다 한 단계 진하게 */
.poi-marker-dot {
  background: #6f7f90 !important;
  border-color: #ffffff !important;
  box-shadow:
    0 1px 4px rgba(15,23,42,.20),
    0 0 0 3px rgba(111,127,144,.12) !important;
}

/* 다음 안내 바도 밝은 지도와 구분되는 네이비 */
.tour-map-message,
.map-floating-message {
  background: rgba(24, 34, 52, .93) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.18) !important;
}

/* 3) 깜빡이는 현재 위치 점 - 스타일 1 */
.current-location-marker-wrapper {
  background: transparent !important;
  border: 0 !important;
}

.current-location-marker {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.current-location-core {
  position: relative;
  z-index: 3;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #2563eb;
  border: 3px solid #ffffff;
  box-shadow:
    0 1px 5px rgba(15,23,42,.28),
    0 0 0 3px rgba(37,99,235,.16);
}

.current-location-pulse {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(37,99,235,.28);
  box-shadow: 0 0 0 1px rgba(37,99,235,.20);
  animation: ktgLocationPulse 1.45s ease-out infinite;
}

@keyframes ktgLocationPulse {
  0% {
    transform: scale(.70);
    opacity: .86;
  }
  70% {
    transform: scale(2.05);
    opacity: .10;
  }
  100% {
    transform: scale(2.25);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .current-location-pulse {
    animation: none;
    transform: scale(1.65);
    opacity: .16;
  }
}

/* 4) 더블클릭 시 '현재 지도'를 화면 전체로 확대
      전국 줌아웃이 아니라 지도 DOM 자체를 full viewport로 표시 */
html.map-fullscreen-active,
body.map-fullscreen-active {
  overflow: hidden !important;
}

.map-is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.map-is-fullscreen #map,
#map.map-is-fullscreen {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  border-radius: 0 !important;
}

/* 지도 카드 안의 안내 메시지/내 위치 버튼은 전체화면에서도 유지 */
.map-is-fullscreen .tour-map-message,
.map-is-fullscreen .map-floating-message {
  left: 16px !important;
  right: 16px !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483200 !important;
}

.map-is-fullscreen .follow-location-button {
  z-index: 2147483200 !important;
}

/* 전체화면 중 Leaflet 컨트롤은 안전영역 확보 */
.map-is-fullscreen .leaflet-top {
  top: max(8px, env(safe-area-inset-top)) !important;
}

.map-is-fullscreen .leaflet-left {
  left: max(8px, env(safe-area-inset-left)) !important;
}

.map-is-fullscreen .leaflet-right {
  right: max(8px, env(safe-area-inset-right)) !important;
}



/* =========================================================
   STEP 5-3A STADIA ALIDADE SMOOTH
   Stadia 원본 스타일을 그대로 사용하므로 CSS 색상 필터를 사용하지 않습니다.
   ========================================================= */
#map .leaflet-tile-pane,
#map.map-theme-light .leaflet-tile-pane,
#map.map-navigation-light .leaflet-tile-pane {
  filter: none !important;
  opacity: 1 !important;
}


/* STEP 7 - dedicated /start page */
.start-page-shell{max-width:760px;margin:0 auto;padding:24px 0 48px}
.start-page-card{background:#fff;border:1px solid #e4e8ef;border-radius:32px;padding:36px;box-shadow:0 22px 60px rgba(15,23,42,.10)}
.start-kicker{margin:0 0 14px;color:#3567df;font-weight:800;letter-spacing:.14em}
.start-page-card h1{margin:0;font-size:clamp(34px,6vw,58px);line-height:1.08;color:#111827}
.start-description{margin:20px 0 28px;color:#5f6b7c;font-size:20px;line-height:1.55}
.start-language-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.start-language-option{min-height:116px;text-align:left;padding:20px;border:2px solid #e2e7ef;border-radius:24px;background:#f9fafc;color:#111827}
.start-language-option strong,.start-language-option span{display:block}
.start-language-option strong{font-size:24px}
.start-language-option span{margin-top:8px;color:#6b7280;font-size:16px}
.start-language-option.is-selected{border-color:#3567df;background:#eef3ff;box-shadow:0 0 0 2px rgba(53,103,223,.08)}
.start-feature-list{margin:28px 0 24px;border-top:1px solid #e5e7eb}
.start-feature-row{display:flex;gap:18px;align-items:center;padding:18px 8px;border-bottom:1px solid #e5e7eb}
.start-feature-icon{font-size:34px;width:52px;text-align:center}
.start-feature-row strong,.start-feature-row span{display:block}
.start-feature-row strong{font-size:20px;color:#111827}
.start-feature-row div span{margin-top:5px;color:#6b7280}
.start-primary-button,.start-later-button{display:flex;width:100%;min-height:72px;align-items:center;justify-content:center;border-radius:22px;font-weight:800;font-size:22px;text-decoration:none}
.start-primary-button{border:0;background:#3567df;color:#fff;margin-top:28px}
.start-later-button{margin-top:12px;border:1px solid #d8dee8;background:#fff;color:#374151}
@media (max-width:640px){
  .start-page-shell{padding:10px 0 28px}
  .start-page-card{border-radius:26px;padding:24px 20px}
  .start-page-card h1{font-size:36px}
  .start-description{font-size:17px}
  .start-language-option{min-height:96px;padding:16px}
  .start-language-option strong{font-size:21px}
  .start-primary-button,.start-later-button{min-height:62px;font-size:20px}
}


/* =========================================================
   STEP 8 - Driving focused main UI
   ========================================================= */
.step8-driving-ui {
  --step8-gap: 14px;
}

.step8-status-panel {
  margin-bottom: var(--step8-gap);
  padding: 16px;
  border: 1px solid #e3e8ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.step8-language {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.step8-language select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #dce2ea;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
}

.step8-start-button {
  width: 100%;
  min-height: 54px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 16px;
  background: #3567df;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(53,103,223,.20);
}

.step8-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid #e6eaf0;
  border-radius: 18px;
  background: #fafbfd;
}

.step8-status-cell {
  min-width: 0;
  min-height: 72px;
  padding: 11px 9px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 0;
  background: transparent;
  color: #111827;
  text-align: left;
}

.step8-status-cell + .step8-status-cell {
  border-left: 1px solid #e6eaf0;
}

.step8-status-icon {
  flex: 0 0 auto;
  font-size: 22px;
}

.step8-status-cell small,
.step8-status-cell strong {
  display: block;
}

.step8-status-cell small {
  margin-bottom: 3px;
  color: #7b8493;
  font-size: 10px;
  font-weight: 800;
}

.step8-status-cell strong {
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.step8-audio-toggle {
  cursor: pointer;
  touch-action: manipulation;
}

.step8-map-card {
  min-height: min(65vh, 620px);
  margin-bottom: var(--step8-gap);
}

.step8-map-card #map {
  min-height: min(65vh, 620px);
}

.step8-arrival-banner {
  left: 18px;
  right: 18px;
  bottom: 16px;
  width: auto;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 900;
}

.guide-summary-v3 {
  gap: var(--step8-gap);
}

.step8-guide-card,
.step8-next-card {
  border-radius: 22px;
  box-shadow: 0 8px 26px rgba(15,23,42,.05);
}

.step8-guide-card {
  min-height: 190px;
}

.step8-next-card {
  min-height: 120px;
}

.step8-driving-actions {
  margin-top: var(--step8-gap);
}

.step8-pause-button {
  width: 100%;
  min-height: 58px;
  border: 1px solid #dce2ea;
  border-radius: 18px;
  background: #fff;
  color: #253047;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 7px 22px rgba(15,23,42,.05);
  touch-action: manipulation;
}

.step8-diagnostic {
  margin-top: 14px;
}

@media (max-width: 560px) {
  .step8-status-panel {
    padding: 12px;
    border-radius: 20px;
  }

  .step8-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step8-status-cell {
    min-height: 66px;
    padding: 9px 6px;
    gap: 5px;
  }

  .step8-status-icon {
    font-size: 18px;
  }

  .step8-status-cell strong {
    font-size: 11px;
  }

  .step8-map-card,
  .step8-map-card #map {
    min-height: 57vh;
  }

  .step8-arrival-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: 50px;
    font-size: 14px;
  }
}


/* =========================================================
   STEP 8.1 - Compact driving header / long-language fix
   ========================================================= */

.step8-status-panel {
  padding: 12px;
}

.step8-status-panel.is-running .step8-language,
.step8-status-panel.is-running .step8-start-button {
  display: none;
}

.step81-running-header {
  min-height: 42px;
  margin-bottom: 10px;
  padding: 0 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #eef1f5;
}

.step81-running-header[hidden] {
  display: none !important;
}

.step81-running-header strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.step81-running-header span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5ff;
  color: #315ecb;
  font-size: 11px;
  font-weight: 900;
}

.step8-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step8-status-cell {
  min-height: 62px;
  padding: 8px 7px;
  gap: 6px;
}

.step8-status-cell > div {
  min-width: 0;
}

.step8-status-cell small,
.step8-status-cell strong {
  white-space: nowrap;
}

.step8-status-cell strong {
  font-size: 12px;
  line-height: 1.15;
}

.step8-status-cell small {
  font-size: 9px;
}

.step81-guide-state .state-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
}

.step81-gps-accuracy #gpsStatus {
  overflow: visible;
  text-overflow: clip;
}

.step8-audio-toggle {
  justify-content: center;
}

.step8-map-card,
.step8-map-card #map {
  min-height: 62vh;
}

@media (max-width: 420px) {
  .step8-status-panel {
    padding: 10px;
  }

  .step8-language select {
    min-height: 44px;
  }

  .step8-start-button {
    min-height: 50px;
    margin-bottom: 10px;
    font-size: 16px;
  }

  .step8-status-cell {
    min-height: 58px;
    padding: 7px 5px;
    gap: 4px;
  }

  .step8-status-icon {
    font-size: 17px;
  }

  .step8-status-cell strong {
    font-size: 11px;
  }

  .step81-running-header strong {
    font-size: 14px;
  }

  .step8-map-card,
  .step8-map-card #map {
    min-height: 64vh;
  }
}


/* STEP 8.1 FINAL - universal compact status values */
.step8-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step8-status-cell {
  justify-content: center;
  text-align: center;
}

.step8-status-cell > div {
  width: 100%;
  min-width: 0;
}

.step8-status-cell small {
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.step8-status-cell strong {
  display: block;
  width: 100%;
  overflow: visible;
  font-size: clamp(10px, 2.8vw, 13px);
  white-space: nowrap;
  text-overflow: clip;
}

.step81-guide-state .state-dot {
  display: none;
}

.step8-status-icon {
  font-size: 18px;
}

@media (max-width: 390px) {
  .step8-status-cell {
    gap: 3px;
    padding-left: 3px;
    padding-right: 3px;
  }

  .step8-status-icon {
    font-size: 16px;
  }

  .step8-status-cell strong {
    font-size: 10px;
  }
}


/* =========================================================
   STEP 10 - Admin multilingual content readiness
   ========================================================= */
.step10-content-readiness {
  margin: 26px 0;
  padding: 22px;
  border: 1px solid #dfe5ed;
  border-radius: 22px;
  background: #f8fafc;
}

.step10-readiness-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.step10-readiness-head h2 {
  margin: 3px 0 6px;
}

#step10ReadinessScore {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  background: #eaf0ff;
  color: #315ecb;
}

.step10-language-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.step10-language-status {
  padding: 14px;
  border: 1px solid #e1e6ed;
  border-radius: 16px;
  background: #fff;
}

.step10-language-status > * {
  display: block;
}

.step10-language-status strong {
  margin-bottom: 8px;
}

.step10-language-status span {
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
}

.step10-language-status.is-ready {
  border-color: #b9dfca;
}

.step10-language-status.is-ready strong {
  color: #167647;
}

.step10-language-status.is-missing {
  border-color: #efd4ad;
}

.step10-language-status.is-missing strong {
  color: #9a5a12;
}

.step10-readiness-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.step10-readiness-summary span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e1e6ed;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .step10-language-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step10-readiness-head {
    display: block;
  }

  #step10ReadinessScore {
    display: inline-block;
    margin-top: 10px;
  }
}


/* =========================================================
   STEP 11 - real driving stability
   ========================================================= */
.tour-map-message {
  transition:
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}


/* =========================================================
   STEP 12 - Navigation driving view
   ========================================================= */
.step8-driving-ui .maplibregl-map {
  touch-action: pan-x pan-y;
}

.step8-driving-ui .maplibregl-ctrl-bottom-left,
.step8-driving-ui .maplibregl-ctrl-bottom-right {
  opacity: .82;
}

.step8-driving-ui .tour-user-marker,
.step8-driving-ui .user-location-marker {
  transform-origin: 50% 50%;
  will-change: transform;
}

@media (max-width: 760px) {
  .step8-driving-ui .maplibregl-ctrl-top-right {
    margin-top: 4px;
    margin-right: 4px;
  }
}


/* =========================================================
   STEP 13.2 - Admin coordinate calibration
   ========================================================= */
.step132-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.step132-calibration-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #dfe5ed;
  border-radius: 18px;
  background: #f8fafc;
}

.step132-calibration-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.step132-calibration-title span {
  color: #667085;
  font-size: 13px;
}

.step132-calibration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.step132-calibration-grid > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid #e2e7ee;
  border-radius: 13px;
  background: #fff;
}

.step132-calibration-grid small,
.step132-calibration-grid strong {
  display: block;
}

.step132-calibration-grid small {
  margin-bottom: 5px;
  color: #7b8493;
  font-size: 11px;
}

.step132-calibration-grid strong {
  overflow-wrap: anywhere;
  color: #172033;
  font-size: 13px;
}

.step132-calibration-help {
  margin: 12px 0 0;
  line-height: 1.55;
}

#adminPoiMap .step132-current-gps-marker {
  stroke: #fff;
  fill: #2563eb;
}

#adminPoiMap .step132-gps-accuracy-circle {
  stroke: #2563eb;
  fill: #60a5fa;
}

@media (max-width: 760px) {
  .step132-calibration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step132-location-actions {
    width: 100%;
  }

  .step132-location-actions button {
    flex: 1 1 180px;
  }
}


/* =========================================================
   STEP 13.3 - Coordinate trace diagnostic
   ========================================================= */
.ktg-coordinate-trace-button {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 2147483400;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 32px rgba(15,23,42,.28);
}

.ktg-coordinate-trace-panel {
  position: fixed;
  inset: 5vh 4vw;
  z-index: 2147483500;
  overflow: auto;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15,23,42,.34);
}

.ktg-coordinate-trace-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.ktg-coordinate-trace-head strong,
.ktg-coordinate-trace-head small {
  display: block;
}

.ktg-coordinate-trace-head small {
  margin-top: 5px;
  color: #667085;
}

.ktg-coordinate-trace-head button {
  border: 0;
  background: transparent;
  font-size: 20px;
}

.ktg-coordinate-trace-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.ktg-coordinate-trace-summary span {
  padding: 8px 10px;
  border: 1px solid #e1e6ed;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 12px;
}

.ktg-coordinate-trace-table-wrap {
  overflow: auto;
  border: 1px solid #e1e6ed;
  border-radius: 14px;
}

.ktg-coordinate-trace-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 12px;
}

.ktg-coordinate-trace-table th,
.ktg-coordinate-trace-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #eef1f5;
  text-align: left;
  white-space: nowrap;
}

.ktg-coordinate-trace-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
}

.ktg-coordinate-trace-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ktg-coordinate-trace-actions button {
  padding: 9px 12px;
}

.ktg-coordinate-trace-raw {
  margin-top: 12px;
  padding: 12px;
  max-height: 280px;
  overflow: auto;
  border-radius: 12px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .ktg-coordinate-trace-panel {
    inset: 2vh 2vw;
    padding: 12px;
  }

  .ktg-coordinate-trace-button {
    right: 12px;
    bottom: 78px;
  }
}


/* =========================================================
   STEP 13.6 - Raw coordinate audit
   ========================================================= */
.ktg-coordinate-audit-button {
  position: fixed;
  right: 18px;
  bottom: 142px;
  z-index: 2147483400;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: #334155;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(15,23,42,.26);
}

.ktg-coordinate-audit-panel {
  position: fixed;
  inset: 3vh 2vw;
  z-index: 2147483600;
  overflow: auto;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(15,23,42,.38);
}

.ktg-coordinate-audit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ktg-coordinate-audit-head strong,
.ktg-coordinate-audit-head small {
  display: block;
}

.ktg-coordinate-audit-head small {
  margin-top: 4px;
  color: #667085;
}

.ktg-coordinate-audit-head button {
  border: 0;
  background: transparent;
  font-size: 20px;
}

.ktg-coordinate-audit-note {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #dbe3ed;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 12px;
}

.ktg-coordinate-audit-note p {
  margin: 3px 0;
}

.ktg-coordinate-audit-table-wrap {
  overflow: auto;
  border: 1px solid #e1e6ed;
  border-radius: 14px;
}

.ktg-coordinate-audit-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  font-size: 11px;
}

.ktg-coordinate-audit-table th,
.ktg-coordinate-audit-table td {
  padding: 8px 9px;
  border-bottom: 1px solid #eef1f5;
  white-space: nowrap;
  text-align: left;
}

.ktg-coordinate-audit-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}

.ktg-coordinate-audit-table
tr.is-coordinate-ok td:nth-last-child(-n+2) {
  color: #087443;
  font-weight: 800;
}

.ktg-coordinate-audit-table
tr.is-coordinate-warning {
  background: #fff7ed;
}

.ktg-coordinate-audit-table
tr.is-coordinate-warning td:nth-last-child(-n+2) {
  color: #b45309;
  font-weight: 900;
}

.ktg-coordinate-audit-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ktg-coordinate-audit-actions button {
  padding: 9px 12px;
}

.ktg-coordinate-audit-json {
  max-height: 300px;
  overflow: auto;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .ktg-coordinate-audit-button {
    right: 12px;
    bottom: 132px;
  }

  .ktg-coordinate-audit-panel {
    inset: 1vh 1vw;
    padding: 10px;
  }
}


/* =========================================================
   STEP 15 - Korean -> EN / JA / ZH auto translation
   ========================================================= */
.step15-auto-translate-panel {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #d8e2f0;
  border-radius: 22px;
  background: #f8fbff;
}

.step15-auto-translate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.step15-auto-translate-head h2 {
  margin: 4px 0 7px;
}

.step15-translate-button {
  flex: 0 0 auto;
  min-height: 46px;
  padding-left: 16px;
  padding-right: 16px;
}

.step15-auto-translate-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 16px;
}

.step15-translation-status {
  margin-top: 13px;
  padding: 11px 13px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #e0e6ee;
  color: #596579;
  font-size: 13px;
  font-weight: 700;
}

.step15-translation-status.is-working {
  border-color: #b8ccf5;
  background: #eef4ff;
  color: #315ecb;
}

.step15-translation-status.is-success {
  border-color: #b8dec9;
  background: #f0faf5;
  color: #167647;
}

.step15-translation-status.is-error {
  border-color: #f1c2c2;
  background: #fff5f5;
  color: #b42318;
}

@media (max-width: 760px) {
  .step15-auto-translate-head {
    display: block;
  }

  .step15-translate-button {
    width: 100%;
    margin-top: 14px;
  }

  .step15-auto-translate-options {
    display: grid;
    gap: 7px;
  }
}


/* STEP 16 - TTS preview */
.step16-tts-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0;
  padding: 13px 14px;
  border: 1px solid #dfe6f0;
  border-radius: 14px;
  background: #fff;
}

.step16-tts-preview > div {
  display: grid;
  gap: 3px;
}

.step16-tts-preview .is-tts-playing {
  font-weight: 800;
}

@media (max-width: 760px) {
  .step16-tts-preview {
    align-items: stretch;
    flex-direction: column;
  }

  .step16-tts-preview button {
    width: 100%;
  }
}


/* =========================================================
   STEP 17.1 - Persistent driving control
   ========================================================= */

/*
 * 운행 중에도 언어/실행 버튼 영역을 완전히 숨기지 않습니다.
 * 시작 버튼은 "자동 안내 중지" 컨트롤로 바뀌어 항상 보입니다.
 */
.step8-status-panel.is-running .step8-start-button {
  display: block !important;
}

.step8-status-panel.is-running .step8-language {
  display: none !important;
}

#startGuide.is-running-compact {
  display: block !important;
}

#startGuide.is-stop-control {
  min-height: 48px;
  margin: 0 0 10px;
  border: 1px solid #d7dde7;
  background: #f8fafc;
  color: #344054;
  box-shadow: none;
  font-size: 14px;
}

.control-row:has(#startGuide.is-running-compact) {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

@media (max-width: 520px) {
  .control-row:has(#startGuide.is-running-compact) {
    display: grid !important;
  }

  #startGuide.is-stop-control {
    min-height: 46px;
    font-size: 13px;
  }
}


/* =========================================================
   STEP 18 - Member registration / profile
   ========================================================= */

.member-auth-shell {
  display: grid;
  place-items: center;
  min-height: 68vh;
  padding: 24px 0;
}

.member-auth-card {
  width: min(560px, 100%);
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.member-auth-heading {
  margin-bottom: 22px;
}

.member-auth-heading h1 {
  margin: 5px 0 8px;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.08;
}

.member-auth-heading > p:last-child {
  color: var(--muted);
}

.member-register-form {
  gap: 15px;
}

.member-primary-action {
  min-height: 54px;
  font-size: 16px;
}

.member-terms {
  align-items: flex-start;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.member-terms input {
  margin-top: 4px;
}

.member-auth-footer {
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted);
}

.member-auth-footer a {
  color: var(--accent);
  font-weight: 850;
}

.member-profile-shell {
  display: grid;
  gap: 18px;
}

.member-welcome-banner {
  padding: 14px 16px;
  border: 1px solid #bee3ce;
  border-radius: 16px;
  background: #f0faf5;
  color: #126b43;
  font-weight: 800;
}

.member-profile-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.member-profile-header h1 {
  margin: 4px 0 6px;
  font-size: clamp(28px, 5vw, 44px);
}

.member-profile-header p {
  margin-bottom: 0;
  color: var(--muted);
}

.member-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.member-profile-card {
  min-width: 0;
  min-height: 180px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

.member-profile-card > span {
  display: block;
  margin-bottom: 16px;
  font-size: 26px;
}

.member-profile-card small,
.member-profile-card strong {
  display: block;
}

.member-profile-card small {
  color: var(--muted);
  font-weight: 800;
}

.member-profile-card strong {
  margin: 4px 0 6px;
  font-size: 18px;
}

.member-profile-card p {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.member-profile-card.is-coming {
  background: #fbfcfe;
}

.member-logout-form {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .member-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-profile-header {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .member-auth-shell {
    padding-top: 6px;
  }

  .member-auth-card {
    border-radius: 20px;
    padding: 20px 16px;
  }

  .member-profile-grid {
    grid-template-columns: 1fr;
  }

  .member-profile-card {
    min-height: 150px;
  }
}


/* =========================================================
   STEP 19 - Reviews / ratings / admin replies
   ========================================================= */

.review-index-shell,
.review-detail-shell,
.admin-review-shell {
  display: grid;
  gap: 18px;
}

.review-page-head,
.review-detail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.review-page-head h1,
.review-detail-head h1 {
  margin: 4px 0 8px;
  font-size: clamp(30px, 5vw, 48px);
}

.review-page-head p,
.review-detail-head p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
}

.review-poi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-poi-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
  text-decoration: none;
}

.review-poi-card:hover {
  border-color: #b9c9ef;
}

.review-poi-icon {
  font-size: 28px;
}

.review-poi-card strong {
  font-size: 18px;
}

.review-rating-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.review-stars,
.review-summary-stars,
.review-item-stars {
  color: #f4b400;
}

.review-card-arrow {
  font-size: 22px;
  color: var(--muted);
}

.review-back-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
}

.review-summary-card {
  flex: 0 0 190px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 20px;
  background: #f8fafc;
}

.review-summary-card > strong {
  font-size: 38px;
  line-height: 1;
}

.review-summary-stars {
  margin: 7px 0 3px;
  letter-spacing: 2px;
}

.review-summary-card span {
  color: var(--muted);
  font-size: 13px;
}

.review-write-card,
.review-list-section,
.review-login-callout {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
}

.review-write-card h2 {
  margin: 4px 0 16px;
}

.review-form {
  display: grid;
  gap: 15px;
}

.review-rating-fieldset {
  padding: 0;
  border: 0;
}

.review-rating-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.review-rating-options label {
  display: block;
  cursor: pointer;
}

.review-rating-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.review-rating-options span {
  display: block;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.review-rating-options input:checked + span {
  border-color: #f4b400;
  background: #fff9df;
  color: #8a6500;
}

.review-delete-form {
  margin-top: 10px;
}

.review-login-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.review-login-callout p {
  margin: 4px 0 0;
  color: var(--muted);
}

.review-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.review-list-head h2 {
  margin: 0;
}

.review-list {
  display: grid;
  gap: 10px;
}

.review-item {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.review-item > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.review-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef3ff;
  color: #315ecb;
  font-weight: 900;
}

.review-item time {
  color: var(--muted);
  font-size: 12px;
}

.review-item > p {
  margin: 14px 0 0;
  line-height: 1.7;
}

.review-admin-reply {
  margin-top: 14px;
  padding: 13px 14px;
  border-left: 3px solid #3567df;
  border-radius: 0 12px 12px 0;
  background: #f5f8ff;
}

.review-admin-reply p {
  margin: 5px 0 0;
  color: #475467;
}

.review-empty-card {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: #fbfcfe;
  color: var(--muted);
  text-align: center;
}

.member-profile-link {
  color: inherit;
  text-decoration: none;
}

.member-review-history {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}

.member-review-row {
  display: grid;
  grid-template-columns: minmax(160px, .7fr) 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.member-review-row:first-of-type {
  border-top: 0;
}

.member-review-row div {
  display: grid;
}

.member-review-row span {
  color: #f4b400;
}

.member-review-row small {
  color: var(--muted);
}

.admin-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-review-list {
  display: grid;
  gap: 12px;
}

.admin-review-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}

.admin-review-card.is-hidden-review {
  opacity: .72;
  background: #f8fafc;
}

.admin-review-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.admin-review-card-head > div {
  display: grid;
}

.admin-review-card-head span {
  color: var(--muted);
  font-size: 12px;
}

.admin-review-content {
  margin: 14px 0;
  line-height: 1.7;
}

.admin-review-actions {
  margin-bottom: 12px;
}

.admin-reply-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.admin-reply-form label {
  min-width: 0;
}

@media (max-width: 760px) {
  .review-page-head,
  .review-detail-head,
  .review-login-callout {
    align-items: stretch;
    flex-direction: column;
  }

  .review-summary-card {
    width: 100%;
    flex-basis: auto;
  }

  .review-poi-grid {
    grid-template-columns: 1fr;
  }

  .review-item > header {
    grid-template-columns: auto 1fr;
  }

  .review-item time {
    grid-column: 2;
  }

  .member-review-row {
    grid-template-columns: 1fr auto;
  }

  .member-review-row small {
    grid-column: 1 / -1;
  }

  .admin-reply-form {
    grid-template-columns: 1fr;
  }

  .admin-review-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* STEP 20 - Favorites + Visit History */
.review-detail-side {
  flex: 0 0 210px;
  display: grid;
  gap: 9px;
}
.review-detail-side .review-summary-card { width: 100%; }
.review-favorite-form { width: 100%; }
.review-favorite-button { width: 100%; min-height: 46px; }
.review-favorite-button.is-favorite {
  border: 1px solid #e9c75b;
  background: #fff8d7;
  color: #7a5b00;
}
.member-data-section {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.member-data-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.member-saved-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fbfcfe;
}
.member-saved-place > a {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}
.member-saved-place strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-saved-place small { color: var(--muted); }
.member-visit-list { display: grid; gap: 8px; }
.member-visit-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.member-visit-row:first-child { border-top: 0; }
.member-visit-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9f8f0;
  color: #138153;
  font-weight: 900;
}
.member-visit-row div { min-width: 0; display: grid; }
.member-visit-row small { color: var(--muted); }

@media (max-width:760px) {
  .review-detail-side {
    width: 100%;
    flex-basis: auto;
  }
  .member-data-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   STEP 22 - Mobile API admin overview
   ========================================================= */
.api-admin-shell {
  display: grid;
  gap: 18px;
}
.api-overview-card {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.api-overview-card > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
}
.api-overview-card code,
.api-endpoint-list code {
  overflow-wrap: anywhere;
}
.api-endpoint-list {
  display: grid;
  gap: 8px;
}
.api-endpoint-list article {
  display: grid;
  grid-template-columns: 62px minmax(220px,.8fr) 1fr;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}
.api-endpoint-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.api-method {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
}
.api-method.get {
  background: #eaf8f1;
  color: #14784b;
}
.api-method.post {
  background: #eef4ff;
  color: #315ecb;
}
.api-example-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.api-example-card h2 {
  margin: 8px 0;
  font-size: 17px;
}
.api-example-card pre {
  overflow: auto;
  padding: 14px;
  border-radius: 13px;
  background: #101827;
  color: #eef2f7;
  font-size: 12px;
  line-height: 1.55;
}
@media (max-width:760px) {
  .api-overview-card {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .api-endpoint-list article {
    grid-template-columns: 58px 1fr;
  }
  .api-endpoint-list p {
    grid-column: 1 / -1;
  }
}


/* STEP 25.2 · ADMIN 3-MAP STYLE CONTROL */
.ktg-admin-map-style-control {
  position: relative;
  font-family: inherit;
}

.ktg-admin-map-style-toggle {
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  padding: 9px 12px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.12);
}

.ktg-admin-map-style-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 220px;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  z-index: 1000;
}

.ktg-admin-map-style-menu[hidden] {
  display: none !important;
}

.ktg-admin-map-style-option {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #0f172a;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.ktg-admin-map-style-option:hover,
.ktg-admin-map-style-option.is-selected {
  background: #eef4ff;
}

.ktg-admin-map-style-option strong {
  font-size: 13px;
}

.ktg-admin-map-style-option small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}


/* STEP 25.3 · PRODUCTION CLEANUP
 * 일반 사용자 화면에서는 진단/테스트 패널을 숨기고
 * ?ktg_test=1 또는 ?debug=1 에서만 표시합니다.
 */
html:not(.ktg-test-mode) .tour-diagnostic-panel {
  display: none !important;
}

html.ktg-test-mode .tour-diagnostic-panel {
  display: block !important;
}


/* STEP 25.4 · HARD PRODUCTION DIAGNOSTIC GUARD */
html:not(.ktg-test-mode) #ktg-field-diagnostic,
html:not(.ktg-test-mode) .tour-diagnostic-panel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.ktg-test-mode #ktg-field-diagnostic {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* STEP 27 + 28 · Smart POI image + mobile-first guide card */
.poi-image-panel{border:1px solid #dbe3ec;border-radius:18px;padding:20px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.06)}
.poi-image-panel-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.poi-image-current{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:18px;align-items:center}
.poi-image-preview-wrap{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#eef2f7;display:flex;align-items:center;justify-content:center}
.poi-image-preview{width:100%;height:100%;object-fit:cover;display:block}
.poi-image-empty{padding:20px;color:#64748b;text-align:center;font-weight:700}
.poi-image-meta{display:flex;flex-direction:column;gap:8px;min-width:0}
.poi-image-meta strong{font-size:1.05rem;overflow-wrap:anywhere}
.poi-image-meta span{color:#64748b;font-size:.85rem}
.text-button{align-self:flex-start;border:0;background:transparent;color:#64748b;text-decoration:underline;cursor:pointer;padding:4px 0}
.poi-image-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.poi-image-option{border:2px solid transparent;border-radius:14px;background:#f8fafc;padding:0;overflow:hidden;cursor:pointer;text-align:left}
.poi-image-option:hover,.poi-image-option.is-selected{border-color:#2563eb}
.poi-image-option img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.poi-image-option span{display:flex;flex-direction:column;gap:4px;padding:9px 10px}
.poi-image-option strong{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poi-image-option small{font-size:.72rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.current-guide-card-v4{overflow:hidden;padding:0!important}
.current-guide-card-v4 .guide-card-head,
.current-guide-card-v4 .current-guide-description,
.current-guide-card-v4 .current-guide-distance{margin-left:18px;margin-right:18px}
.current-guide-card-v4 .guide-card-head{margin-top:18px}
.current-guide-card-v4 .current-guide-distance{margin-bottom:18px}
.guide-image-shell{position:relative;width:100%;aspect-ratio:16/7;background:#e2e8f0;overflow:hidden}
.guide-image{width:100%;height:100%;object-fit:cover;display:block}
.guide-image-credit{position:absolute;right:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 8px;border-radius:999px;background:rgba(15,23,42,.72);color:#fff!important;font-size:.68rem;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-summary-v2{gap:12px}
.current-guide-card-v4 #guideTitle{font-size:clamp(1.18rem,4.8vw,1.55rem);line-height:1.25}
.current-guide-card-v4 .current-guide-description{font-size:.95rem;line-height:1.65}
.current-guide-card-v4 .current-guide-distance{font-weight:800}

@media (max-width:720px){
  .poi-image-panel-head{flex-direction:column}
  .poi-image-panel-head .secondary-button{width:100%}
  .poi-image-current{grid-template-columns:1fr}
  .poi-image-results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-summary-v2{grid-template-columns:1fr}
  .guide-image-shell{aspect-ratio:16/8.5}
  .current-guide-card-v4 .guide-card-head,
  .current-guide-card-v4 .current-guide-description,
  .current-guide-card-v4 .current-guide-distance{margin-left:16px;margin-right:16px}
}


/* STEP 28 final interaction: flag -> small POI photo + audio while inside radius */
.poi-marker-shell{background:transparent!important;border:0!important}
.poi-flag-marker{width:34px;height:34px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 3px rgba(15,23,42,.28))}
.poi-flag-symbol{font-size:25px;line-height:1}
.poi-photo-marker{position:relative;width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.35);overflow:visible}
.poi-photo-marker img{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#e2e8f0}
.poi-photo-pulse{position:absolute;z-index:1;inset:-5px;border-radius:50%;border:2px solid currentColor;opacity:.42;animation:poiPhotoPulse 1.8s ease-out infinite}
@keyframes poiPhotoPulse{0%{transform:scale(.88);opacity:.5}75%,100%{transform:scale(1.28);opacity:0}}
/* The selected POI photo is shown on the map marker, not as a large card. */
.guide-image-shell{display:none!important}


/* STEP 29 · Admin operations */
.admin-poi-thumb-wrap{display:flex;align-items:center;gap:8px;min-width:116px}
.admin-poi-thumb{width:54px;height:40px;object-fit:cover;border-radius:9px;border:1px solid #dbe3ec;background:#eef2f7}
.admin-poi-thumb-wrap span{font-size:.76rem;color:#475569;font-weight:700}
.image-status-missing{display:inline-flex;padding:5px 8px;border-radius:999px;background:#fff7ed;color:#9a3412;font-size:.76rem;font-weight:800}
.inline-admin-form{display:inline;margin:0}
.status-toggle-button{border:0;border-radius:999px;padding:7px 11px;font-weight:800;cursor:pointer}
.status-toggle-button.is-active{background:#dcfce7;color:#166534}
.status-toggle-button.is-inactive{background:#e2e8f0;color:#475569}
.status-toggle-button:hover{filter:brightness(.97)}
.danger-action{border:0;background:transparent;color:#b91c1c!important;cursor:pointer;font:inherit}
@media (max-width:860px){
  .quality-table-wrap{overflow-x:auto}
  #qualityPoiTable{min-width:1080px}
}


/* STEP 29 · Manual representative image override */
.poi-manual-image{margin-top:18px;padding:16px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc}
.poi-manual-image>div:first-child{margin-bottom:10px}
.poi-manual-image .muted{margin:4px 0 0}
.poi-manual-image-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:10px}
.poi-manual-image-row+ .poi-manual-image-row{grid-template-columns:1fr 1fr}
.poi-manual-image-row input{width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;background:#fff}
.poi-manual-image-note{margin:10px 0 0;font-size:.78rem;color:#64748b}
@media(max-width:720px){
  .poi-manual-image-row,.poi-manual-image-row+ .poi-manual-image-row{grid-template-columns:1fr}
  .poi-manual-image-row .secondary-button{width:100%}
}