:root {
  --navy: #0f172a;
  --navy-2: #172554;
  --blue: #38bdf8;
  --blue-2: #0284c7;
  --bg: #f8fafc;
  --surface: #fff;
  --text: #334155;
  --muted: #64748b;
  --line: #dbe4ef;
  --soft: #edf7fc;
  --danger: #dc5460;
  --radius: 9px;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

#explore,
#map-panel,
.ledger,
#place-list {
  scroll-margin-top: 78px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button,
a {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: #fff;
  padding: 10px 14px;
  border: 2px solid var(--blue);
}

.skip-link:focus {
  top: 12px;
}

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

.site-header {
  height: 62px;
  background: rgba(15, 23, 42, 0.97);
  color: #d9e6f1;
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.header-inner {
  height: 100%;
  max-width: 1440px;
  margin: auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  color: #fff;
}

.brand-art {
  display: block;
  width: 132px;
  height: 46px;
  padding: 4px 9px;
  background: #fff;
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 9px;
  overflow: hidden;
}

.brand-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
}

.site-header nav a:hover {
  color: #fff;
}

.saved-button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px 0;
  cursor: pointer;
}

.saved-button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  border-radius: 20px;
  background: #e0f2fe;
  color: #075985;
  font-size: 11px;
  font-weight: 750;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.saved-button.active {
  color: #38bdf8;
  font-weight: 700;
}

.saved-button.active span {
  background: #38bdf8;
  color: #0f172a;
}

.lab-link {
  padding-left: 25px;
  border-left: 1px solid #475569;
}

.hero {
  min-height: 480px;
  background: var(--navy);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  padding-inline: max(24px, calc((100% - 1440px) / 2 + 24px));
  overflow: visible;
  position: relative;
}

.hero:before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}

.hero-copy {
  min-width: 0;
  width: 100%;
  margin-left: 0;
  padding: 70px 30px 72px 0;
  position: relative;
  z-index: 2;
}

.eyebrow {
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin: 0 0 16px;
}

.hero h1 {
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.055em;
  margin: 0 0 18px;
}

.hero h1 span {
  color: #7dd3fc;
}

.hero-copy > p:not(.eyebrow) {
  color: #bdc9d8;
  max-width: 610px;
  margin: 0 0 28px;
  font-size: 15px;
}

.hero-copy > .hero-data-policy {
  margin-top: -16px;
  margin-bottom: 22px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.65;
}

.hero-search {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 145px;
  max-width: 650px;
  background: #fff;
  padding: 5px;
  border-radius: var(--radius);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.25);
}

.hero-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 15px;
  font-size: 14px;
}

.hero-search button {
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #082f49;
  font-weight: 800;
  cursor: pointer;
  padding: 0 16px;
  transition: all 0.15s ease;
}

.hero-search button:hover {
  background: #7dd3fc;
}

/* ========================================================
   UNIFIED BUTTON DESIGN TOKENS (Action item 1)
   ======================================================== */
.btn,
.btn-primary,
.btn-outline,
.btn-danger-subtle,
.btn-ghost,
.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  outline: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-danger-subtle:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost-sm:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--blue-2) !important;
  outline-offset: 2px !important;
}

.btn-primary {
  background: var(--blue);
  color: #082f49;
  border-color: #38bdf8;
}

.btn-primary:hover:not(:disabled) {
  background: #7dd3fc;
  border-color: #7dd3fc;
  color: #0369a1;
}

.btn-primary:active:not(:disabled) {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

.btn-outline {
  background: #ffffff;
  color: var(--navy);
  border-color: #cbd5e1;
}

.btn-outline:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-outline:active:not(:disabled) {
  background: #e2e8f0;
  border-color: #64748b;
}

.btn-danger-subtle {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}

.btn-danger-subtle:hover:not(:disabled) {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #9f1239;
}

.btn-danger-subtle:active:not(:disabled) {
  background: #fecdd3;
  color: #881337;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: #f1f5f9;
  color: var(--navy);
}

.btn-ghost-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  background: transparent;
  color: #64748b;
}

.btn-ghost-sm:hover:not(:disabled) {
  background: #e2e8f0;
  color: var(--navy);
}

button:disabled,
.btn:disabled,
.btn-primary:disabled,
.btn-outline:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Nav Mode Switching Buttons */
.nav-mode-btn {
  min-height: 34px;
  height: auto;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #cbd5e1;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  word-break: keep-all;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.nav-mode-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
}

.nav-mode-btn.active {
  background: #38bdf8;
  color: #082f49;
  border-color: #38bdf8;
}

.nav-mode-btn .badge {
  background: rgba(15, 23, 42, 0.2);
  color: inherit;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
}

.nav-mode-btn.active .badge {
  background: #0369a1;
  color: #ffffff;
}

.hero-notes {
  display: flex;
  gap: 22px;
  margin-top: 17px;
  color: #94a3b8;
  font-size: 11px;
}

.hero-notes span:before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue);
  margin: 0 7px 2px 0;
}

.hero-visual {
  position: relative;
  min-height: 420px;
  background:
    radial-gradient(circle at 58% 48%, rgba(56, 189, 248, 0.25), transparent 7%),
    radial-gradient(circle at 58% 48%, rgba(56, 189, 248, 0.09), transparent 44%),
    linear-gradient(145deg, #111c35, #07101f);
  overflow: hidden;
}

.hero-visual:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to right, transparent, #000);
}

.seoul-orbit {
  position: absolute;
  left: 58%;
  top: 48%;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-one {
  width: 310px;
  height: 310px;
}

.orbit-two {
  width: 480px;
  height: 480px;
  border-style: dashed;
}

.signal {
  position: absolute;
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 8px;
  padding: 11px 14px;
  box-shadow: var(--shadow);
  min-width: 130px;
}

.signal b,
.signal span {
  display: block;
}

.signal b {
  font-size: 12px;
  color: #e0f2fe;
}

.signal span {
  font-size: 10px;
  color: #7dd3fc;
}

.signal-a {
  left: 12%;
  top: 28%;
}

.signal-b {
  right: 10%;
  top: 19%;
}

.signal-c {
  right: 15%;
  bottom: 23%;
}

.city-label {
  position: absolute;
  left: 58%;
  top: 48%;
  transform: translate(-50%, -50%);
  text-align: center;
  letter-spacing: 0.13em;
  color: #e0f2fe;
  font-weight: 800;
}

.city-label strong {
  display: block;
  font-size: 10px;
  color: #7dd3fc;
  margin-top: 3px;
}

.explore {
  max-width: 1440px;
  margin: auto;
  padding: 48px 24px 56px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 20px;
}

.section-heading h2 {
  font-size: 25px;
  letter-spacing: -0.045em;
  color: var(--navy);
  margin: 0;
}

.section-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.data-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.data-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}

.data-status.ready i {
  background: #22c55e;
}

.data-status.error i {
  background: var(--danger);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 15px;
  background: #eaf1f7;
  border: 1px solid #d5e0eb;
  border-radius: var(--radius);
  margin-bottom: 14px;
}

.filters label {
  display: grid;
  gap: 5px;
  flex: 1 1 150px;
  min-width: 140px;
}

.filters label.query-field {
  position: relative;
  flex: 2 1 200px;
}

.filters label > span {
  font-size: 11px;
  font-weight: 750;
  color: #475569;
}

.filters input,
.filters select {
  height: 38px;
  border: 1px solid #cad7e4;
  border-radius: 6px;
  background: #fff;
  padding: 0 10px;
  outline: 0;
  box-sizing: border-box;
}

.filters input:focus,
.filters select:focus {
  border-color: var(--blue-2);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.filters > button {
  height: 38px;
  flex: 0 0 auto;
}

/* More Filters Panel */
.more-filters-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.more-filters-panel[hidden] {
  display: none !important;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-group-label {
  font-size: 12px;
  font-weight: 750;
  color: var(--navy);
  min-width: 80px;
}

.filter-chips-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-chip-btn:hover {
  background: #edf7fc;
  border-color: var(--blue);
  color: var(--navy);
}

.filter-chip-btn.active {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
}

/* Active Filter Summary Bar */
.active-filter-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 8px 14px;
  background: #bae6fd;
  border: 1px solid #bae6fd;
  border-radius: 7px;
  gap: 10px;
}

.active-filter-summary-bar[hidden] {
  display: none !important;
}

.active-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.active-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  background: #ffffff;
  border: 1px solid #7dd3fc;
  color: #0369a1;
  font-size: 11px;
  font-weight: 700;
}

.active-summary-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #0284c7;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.active-summary-chip button:hover {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

.page-count-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: normal;
  margin-left: 4px;
}

.district-summary-bar {
  margin-bottom: 14px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.summary-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.summary-target-tag {
  font-size: 14px;
  font-weight: 750;
  color: var(--navy);
}

.summary-date-tag {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.summary-metric-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.metric-number {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}

.metric-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
}

.metric-badge.crowded {
  background: #fee2e2;
  color: #dc2626;
}

.metric-badge.moderate {
  background: #ecfdf5;
  color: #047857;
}

.metric-badge.relaxed {
  background: #bae6fd;
  color: #0284c7;
}

.metric-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.metric-hint {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

.distribution-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}

.pill-crowded {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.pill-moderate {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.pill-relaxed {
  background: #bae6fd;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

@media (max-width: 768px) {
  .summary-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.workspace {
  display: grid;
  grid-template-columns: minmax(540px, 1.05fr) minmax(420px, 0.95fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  min-height: 550px;
  overflow: hidden;
}

.ledger {
  min-width: 0;
  border-right: 1px solid var(--line);
}

.ledger-head {
  min-height: 68px;
  height: auto;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
  justify-content: space-between;
}

.ledger-head strong {
  color: var(--navy);
  font-size: 15px;
}

.ledger-head > span {
  color: var(--muted);
  font-size: 12px;
}

.layout-switch {
  margin-left: 0;
  display: flex;
  background: #f1f5f9;
  padding: 2px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
}

.layout-switch button {
  border: 0;
  background: transparent;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #64748b;
  font-weight: 600;
}

.layout-switch button.active {
  background: #0284c7;
  color: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  font-weight: 750;
}

.view-switch {
  display: flex;
  background: #eef3f7;
  padding: 3px;
  border-radius: 7px;
}

.view-switch button {
  border: 0;
  background: transparent;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}

.view-switch button.active {
  background: #fff;
  color: #0369a1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  font-weight: 750;
}

.table-head,
.place-row {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(90px, 0.7fr) minmax(110px, 0.8fr) 80px;
  align-items: center;
  gap: 16px;
}

.table-head {
  height: 38px;
  padding: 0 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.place-row {
  min-height: 66px;
  padding: 10px 16px;
  border-bottom: 1px solid #edf1f5;
  cursor: pointer;
  transition: background 0.15s;
}

.place-row:hover,
.place-row:focus-within {
  background: #f0f9ff;
}

.place-row.selected {
  background: #e0f2fe;
  box-shadow: inset 3px 0 var(--blue-2);
}

.place-main {
  display: grid;
  grid-template-columns: 30px 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.favorite {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 21px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
  line-height: 1;
}

.favorite:hover {
  color: #fbbf24;
  transform: scale(1.15);
}

.favorite.saved {
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
}

.thumb {
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
  background: #dce7ef;
}

.thumb-placeholder {
  display: grid;
  place-items: center;
  color: #7891a5;
  font-size: 10px;
}

.place-name {
  min-width: 0;
}

.place-name strong,
.place-name span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-name strong {
  color: #172033;
  font-size: 13px;
}

.place-name span {
  color: #7c8b9c;
  font-size: 10px;
}

.place-cell {
  font-size: 12px;
  color: #475569;
}

.source-tag {
  font-size: 10px;
  color: #0369a1;
  background: #e0f2fe;
  padding: 4px 6px;
  border-radius: 5px;
  width: max-content;
}

.loading-state,
.empty-state {
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 30px;
  color: #64748b;
}

.loading-state span {
  width: 24px;
  height: 24px;
  border: 3px solid #dbeafe;
  border-top-color: var(--blue-2);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.empty-state strong {
  color: #1e293b;
  font-size: 15px;
}

.empty-state p {
  max-width: 360px;
  margin: 5px 0;
}

.empty-state a {
  color: #0369a1;
  text-decoration: underline;
}

.pagination {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.pagination button {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  font-size: 11px;
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination span {
  font-size: 11px;
  color: #64748b;
}

.map-panel {
  position: relative;
  min-width: 0;
}

.map {
  position: absolute;
  inset: 0;
  background: #dce8ef;
}

.map-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #64748b;
}

.map-loading-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.map-loading-overlay[hidden] {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.map-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: rgba(14, 165, 233, 0.18);
  overflow: hidden;
}

.map-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, #0284c7, #38bdf8, transparent);
  box-shadow: 0 0 10px #38bdf8;
  animation: mapProgressIndeterminate 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.map-progress-bar.is-complete::after {
  animation: none;
  width: 100%;
  background: #10b981;
  box-shadow: 0 0 8px #34d399;
  transition: width 0.2s ease;
}

.map-loading-pill {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f1f5f9;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 9999px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(56, 189, 248, 0.15);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.2px;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.map-loading-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(56, 189, 248, 0.25);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: mapSpin 0.75s linear infinite;
  box-sizing: border-box;
}

.map-loading-pill.is-done {
  border-color: rgba(16, 185, 129, 0.5);
  color: #a7f3d0;
}

.map-loading-pill.is-done .map-loading-spinner {
  animation: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
}

.map-loading-pill.is-done .map-loading-spinner::after {
  content: '✓';
  font-weight: 700;
  color: #34d399;
  font-size: 12px;
}

@keyframes mapProgressIndeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(300%);
  }
}

@keyframes mapSpin {
  to {
    transform: rotate(360deg);
  }
}

.map-hover-tooltip {
  position: relative;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f8fafc;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(56, 189, 248, 0.25);
  border: 1px solid rgba(56, 189, 248, 0.45);
  pointer-events: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  transform: translate3d(0, 0, 0);
  animation: tooltipFadeIn 0.15s ease-out;
}

.map-hover-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.94) transparent transparent transparent;
}

.map-hover-tooltip .tooltip-icon {
  font-size: 13px;
}

.map-hover-tooltip .tooltip-hint {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 400;
  margin-left: 2px;
}

.map-hover-tooltip.planner-tooltip .tooltip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: #f59e0b;
  color: #ffffff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.map-key {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 35px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - 24px);
  gap: 12px;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(4px);
}

.map-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.map-key .map-pin-icon {
  flex-shrink: 0;
  display: block;
  vertical-align: middle;
}

.map-key i {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-right: 5px;
  font-style: normal;
}

.map-credit {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 3px;
  margin: 0;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 5px;
  color: #64748b;
  font-size: 9px;
}

.ol-zoom {
  top: 12px !important;
  left: 12px !important;
}

.ol-control button {
  background: #0f172a !important;
}

.principle {
  background: var(--navy);
  color: #fff;
  padding: 52px max(24px, calc((100vw - 1392px) / 2));
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
}

.principle > div span {
  color: #7dd3fc;
  font-size: 10px;
  letter-spacing: 0.13em;
}

.principle h2 {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.045em;
  margin: 10px 0 0;
}

.principle ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.principle li {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  border-top: 1px solid #334155;
  padding: 15px 0;
}

.principle li:last-child {
  border-bottom: 1px solid #334155;
}

.principle li b {
  color: #38bdf8;
  font: 700 11px Arial;
}

.principle li span {
  color: #cbd5e1;
  font-size: 13px;
}

.detail-drawer {
  position: fixed;
  z-index: 50;
  right: 0;
  top: 0;
  height: 100dvh;
  width: clamp(720px, 56vw, 880px);
  max-width: 100%;
  background: #fff;
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.22);
  transform: translateX(105%);
  transition: transform 0.28s ease;
  overflow: auto;
}

.detail-drawer.open {
  transform: none;
}

.drawer-scrim {
  display: none;
  position: fixed;
  z-index: 40;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.drawer-scrim.open {
  display: block;
}

.drawer-back {
  position: absolute;
  z-index: 5;
  left: 16px;
  top: 15px;
  height: 34px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 17px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: all 0.15s ease;
}

.drawer-back:hover {
  background: rgba(15, 23, 42, 0.95);
  transform: translateX(-2px);
}

.drawer-back[hidden] {
  display: none !important;
}

.drawer-plan {
  position: absolute;
  z-index: 5;
  right: 58px;
  top: 15px;
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 17px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: all 0.15s ease;
}

.drawer-plan:hover {
  background: rgba(15, 23, 42, 0.95);
  transform: translateY(-1px);
}

.drawer-plan.active {
  background: #059669;
  color: #fff;
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.45);
}

.drawer-plan[hidden] {
  display: none !important;
}

.drawer-close {
  position: absolute;
  z-index: 2;
  right: 16px;
  top: 15px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.detail-hero {
  height: 340px;
  background: #dce6ed;
  position: relative;
}

.detail-hero.is-placeholder {
  height: 150px;
}

.detail-hero.is-placeholder .image-placeholder-detail {
  height: 100%;
}

.detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero .no-image {
  height: 100%;
  display: grid;
  place-items: center;
  color: #64748b;
}

.detail-body {
  padding: 30px 38px 44px;
}

.detail-body .meta {
  color: #0284c7;
  font-size: 11px;
  font-weight: 750;
}

.detail-body h2 {
  font-size: 27px;
  letter-spacing: -0.05em;
  color: var(--navy);
  margin: 4px 0 6px;
}

.detail-body .address {
  color: #64748b;
  margin: 0 0 18px;
}

.detail-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.detail-body .save-detail {
  height: 36px;
  border: 1px solid #7dd3fc;
  background: #e0f2fe;
  color: #075985;
  border-radius: 7px;
  padding: 0 13px;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.detail-body .save-detail:hover {
  background: #bae6fd;
}

.detail-body .save-detail.is-saved {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #b45309;
}

.detail-body .plan-detail {
  height: 36px;
  border-radius: 7px;
  padding: 0 14px;
  font-weight: 750;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.detail-body h3 {
  font-size: 14px;
  color: #0f172a;
  margin: 25px 0 8px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.detail-body .overview {
  max-width: 65ch;
  line-height: 1.75;
  color: #475569;
  white-space: pre-line;
}

.provided {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin: 0;
}

.provided dt,
.provided dd {
  margin: 0;
  padding: 7px 0;
  border-top: 1px solid #eef2f6;
  font-size: 11px;
  word-break: break-word;
}

.provided dt {
  color: #64748b;
}

.provided dd {
  color: #334155;
}

.future-panel {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 13px;
  margin-top: 20px;
}

.future-panel strong {
  color: #075985;
}

.future-panel p {
  font-size: 11px;
  margin: 3px 0 0;
  color: #475569;
}

.missing-info {
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
}

.missing-info strong {
  display: block;
  color: #334155;
  margin-bottom: 3px;
}

.site-footer {
  width: 100%;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.footer-inner {
  max-width: 1440px;
  margin: auto;
  padding: 36px 24px 44px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
}

.footer-logo {
  display: block;
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

.footer-tagline {
  margin: 0 0 10px;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}

.footer-copyright {
  margin: 0;
  color: #94a3b8;
  font-size: 11px;
}

.footer-col-title {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.footer-sync-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.footer-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.footer-meta-pill .meta-pill-label {
  color: #64748b;
  font-weight: 600;
}

.footer-meta-pill .meta-pill-val {
  color: #0f172a;
  font-weight: 700;
}

.footer-meta-pill .meta-pill-val.status-ok {
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.footer-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  animation: pulse-footer-dot 2s infinite ease-in-out;
}

@keyframes pulse-footer-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}

.footer-data-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-data-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: #334155;
  flex-wrap: wrap;
}

.footer-data-list li strong {
  color: #0f172a;
}

.data-badge.badge-active {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 9999px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.footer-data-note {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
}

.footer-nav-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  color: #0284c7;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: #0369a1;
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 18px 36px;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .site-header nav > a:not(.lab-link) {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy {
    margin: 0;
    padding: 54px 0;
    width: auto;
  }

  .hero-visual {
    min-height: 260px;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .ledger {
    border-right: 0;
  }

  .map-panel {
    min-height: 430px;
    border-top: 1px solid var(--line);
  }

  .filters {
    grid-template-columns: 1fr 1fr;
  }

  .filters .query-field {
    grid-column: 1/-1;
  }

  .principle {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-header nav {
    gap: 14px;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .site-header {
    height: 58px;
  }

  .header-inner {
    padding: 0 10px;
    gap: 8px;
  }

  .site-header nav {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .nav-mode-btn {
    padding: 3px 8px;
    font-size: 11.5px;
    min-height: 30px;
  }

  .saved-button {
    font-size: 11.5px;
    padding: 4px 0;
  }

  .brand-art {
    width: 36px;
    height: 36px;
    padding: 2px;
    border-radius: 8px;
  }

  .lab-link {
    display: none;
  }

  .hero-copy {
    padding: 44px 0;
  }

  .hero {
    padding-inline: 12px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero-search {
    grid-template-columns: 1fr;
    padding: 4px;
  }

  .hero-search input {
    height: 44px;
    font-size: 16px;
  }

  .hero-search button {
    height: 44px;
  }

  .hero-notes {
    gap: 9px;
    flex-wrap: wrap;
  }

  .hero-visual {
    min-height: 230px;
  }

  .orbit-two {
    width: 340px;
    height: 340px;
  }

  .orbit-one {
    width: 210px;
    height: 210px;
  }

  .signal {
    min-width: 108px;
    padding: 8px;
  }

  .signal-a {
    left: 4%;
  }

  .signal-b {
    right: 4%;
  }

  .signal-c {
    right: 5%;
    bottom: 13%;
  }

  .explore {
    padding: 36px 12px;
  }

  .section-heading {
    align-items: start;
    gap: 12px;
  }

  .section-heading h2 {
    font-size: 21px;
  }

  .section-heading p {
    font-size: 11px;
  }

  .data-status {
    margin-top: 6px;
  }

  .filters {
    grid-template-columns: 1fr;
    padding: 11px;
  }

  .filters .query-field {
    grid-column: auto;
  }

  .filters input,
  .filters select,
  .filters > button {
    height: 44px;
    font-size: 16px;
  }

  .workspace {
    min-height: 0;
  }

  .table-head {
    display: none;
  }

  .place-row {
    grid-template-columns: 1fr 70px;
    min-height: 70px;
  }

  .place-row > .place-cell:nth-of-type(2) {
    display: none;
  }

  .place-row > .source-tag {
    justify-self: end;
  }

  .place-main {
    grid-template-columns: 34px 44px minmax(0, 1fr);
  }

  .map-panel {
    height: 380px;
    min-height: 380px;
  }

  .principle {
    padding: 40px 18px;
  }

  .principle h2 {
    font-size: 24px;
  }

  .detail-drawer {
    width: 100%;
  }

  .detail-hero {
    height: 250px;
  }

  .detail-body {
    padding: 20px;
  }

  .provided {
    grid-template-columns: 100px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .detail-drawer {
    transition: none;
  }

  .loading-state span {
    animation: none;
  }
}

/* Logos follow their container surface; responsive pictures select desktop/mobile. */
.brand-art {
  background: transparent;
  border: 0;
  padding: 0;
  width: 112px;
  height: 52px;
  border-radius: 0;
}

.brand-on-dark {
  display: none;
}

[data-surface='dark'] .brand-on-light {
  display: none;
}

[data-surface='dark'] .brand-on-dark {
  display: block;
}

.site-header[data-surface='light'] {
  background: #fff;
  color: #334155;
}

.site-header[data-surface='light'] nav a:hover {
  color: #0284c7;
}

.site-header[data-surface='light'] .brand {
  color: #0f172a;
}

.pin-key,
.ring-key {
  width: 12px;
  height: 17px;
  border: 0;
  border-radius: 0;
  transform: none;
  background: url(/assets/brand/pin-default.svg) center/contain no-repeat;
}

.ring-key {
  background-image: url(/assets/brand/pin-selected.svg);
}

@media (max-width: 600px) {
  .brand-art {
    width: 42px;
    height: 42px;
  }
}

/* Search controls must remain above non-interactive hero decoration. */
.hero-copy {
  isolation: isolate;
}

.hero-search {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.hero-search input {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  background: #fff;
  color: #0f172a;
  caret-color: #0284c7;
}

.hero-search input::placeholder {
  color: #64748b;
}

.hero-visual,
.hero-visual::before,
.hero-visual * {
  pointer-events: none;
}

/* Public detail fields use a readable label, value and explanation hierarchy. */
.provided {
  display: block;
}

.provided-item {
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid #eef2f6;
}

.provided-item:first-child {
  border-top: 0;
}

.provided-item dt {
  padding: 0;
  border: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.provided-category-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #0284c7;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: -0.01em;
  border: 1px solid #e2e8f0;
}

.provided-label-text {
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
}

.provided-item dd {
  padding: 0;
  border: 0;
}

.provided-item dd strong,
.provided-item dd span {
  display: block;
}

.provided-item dd strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
  white-space: pre-line;
  line-height: 1.6;
  word-break: keep-all;
}

.provided-item dd span {
  max-width: 64ch;
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.55;
}

.thumb-placeholder {
  padding: 3px;
  text-align: center;
  font-size: 8px;
  line-height: 1.15;
}

.no-image {
  padding: 24px;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 600px) {
  .provided-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .provided-item dd span {
    font-size: 12px;
  }
}

.visit-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.visit-links p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.visit-links span {
  font-size: 10px;
  color: #64748b;
}

.visit-links strong {
  font-size: 13px;
  color: #0f172a;
}

.official-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #7dd3fc;
  border-radius: 7px;
  background: #f0f9ff;
  color: #075985;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.official-link:hover {
  background: #e0f2fe;
}

.official-link:focus-visible {
  outline: 3px solid rgba(56, 189, 248, 0.4);
  outline-offset: 2px;
}

.detail-fetch-status {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: #f0f9ff;
  color: #334155;
}

.detail-fetch-status > strong {
  display: block;
  color: #075985;
  font-size: 12px;
}

.detail-fetch-status ul {
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
}

.detail-fetch-status li {
  position: relative;
  padding-left: 13px;
  color: #64748b;
  font-size: 11px;
}

.detail-fetch-status li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
}

.detail-fetch-status.partial {
  border-color: #fde68a;
  background: #fffbeb;
}

.detail-fetch-status.partial > strong {
  color: #92400e;
}

.detail-fetch-status.error,
.detail-fetch-status.unavailable {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.detail-fetch-status.error > strong,
.detail-fetch-status.unavailable > strong {
  color: #475569;
}

.detail-fetch-status li.error:before,
.detail-fetch-status li.stale:before {
  background: #f59e0b;
}

/* 30-day Forecast & Recommendation Section */
.forecast-section {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.forecast-loading,
.forecast-empty,
.forecast-error {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
}

.forecast-loading span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #bae6fd;
  border-top-color: #0284c7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 8px;
}

.forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.forecast-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.forecast-title-wrap h3 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 16px !important;
  color: #0f172a !important;
  font-weight: 800;
}

.forecast-verified-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.forecast-verified-badge.verified {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

.forecast-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #64748b;
  align-items: center;
}

.fc-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fc-relaxed .legend-dot {
  background: #0ea5e9;
}

.fc-moderate .legend-dot {
  background: #059669;
}

.fc-crowded .legend-dot {
  background: #ef4444;
}

.holiday-dot {
  background: #f43f5e !important;
}

.forecast-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.fc-stat-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.fc-stat-label {
  display: block;
  font-size: 11px;
  color: #64748b;
}

.fc-stat-value {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 3px 0 1px;
}

.fc-stat-sub {
  display: block;
  font-size: 10px;
  color: #94a3b8;
}

.forecast-inspect-bar {
  background: #0f172a;
  color: #fff;
  border-radius: 8px;
  padding: 9px 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.inspect-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.inspect-date {
  font-weight: 700;
  color: #7dd3fc;
}

.inspect-holiday {
  color: #fca5a5;
  font-weight: 700;
}

.inspect-value {
  color: #fff;
  font-weight: 800;
}

.inspect-status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.inspect-hint {
  font-size: 10px;
  color: #94a3b8;
}

.status-relaxed {
  background: #0284c7;
  color: #e0f2fe;
}

.status-moderate {
  background: #065f46;
  color: #a7f3d0;
}

.status-crowded {
  background: #991b1b;
  color: #fee2e2;
}

.text-relaxed {
  color: #0284c7;
}

.text-moderate {
  color: #047857;
}

.text-crowded {
  color: #dc2626;
}

.forecast-chart-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafbfc;
  padding: 8px 4px 4px;
}

.forecast-svg {
  width: auto;
  min-width: 1540px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.fc-bar {
  cursor: pointer;
  outline: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.fc-bar:hover,
.fc-bar:focus-visible {
  opacity: 0.85;
  stroke: #0f172a;
  stroke-width: 2px;
}

.fc-bar.selected {
  stroke: #0284c7;
  stroke-width: 3px;
  filter: drop-shadow(0 2px 5px rgba(2, 132, 199, 0.4));
}

.forecast-recs-wrap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #e2e8f0;
}

.forecast-recs-title strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
}

.forecast-recs-title span {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.forecast-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rec-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.16);
}

.rec-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.rec-rank-badge {
  font-size: 10px;
  font-weight: 800;
  background: #16a34a;
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
}

.rec-date {
  font-size: 12px;
  font-weight: 750;
  color: #166534;
}

.rec-tag {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
}

.rec-tag.holiday {
  background: #ffe4e6;
  color: #be123c;
}

.rec-tag.weekend {
  background: #e2e8f0;
  color: #475569;
}

.rec-tag.weekday {
  background: #dcfce7;
  color: #15803d;
}

.rec-card-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0;
  flex-wrap: wrap;
  gap: 4px;
}

.rec-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.rec-val {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.rec-unit {
  font-size: 10px;
  color: #64748b;
}

.rec-status {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 3px;
}

.rec-diff {
  font-size: 11px;
  color: #15803d;
}

.rec-diff strong {
  font-size: 12px;
  font-weight: 800;
}

.rec-reason {
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
  margin: 0;
}

.forecast-disclaimer {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 10px;
  color: #64748b;
  line-height: 1.6;
}

.forecast-disclaimer p {
  margin: 2px 0;
}

@media (max-width: 600px) {
  .forecast-stat-grid {
    grid-template-columns: 1fr;
  }

  .forecast-recs-grid {
    grid-template-columns: 1fr;
  }
}

/* Tourism Ticker (종목판) Styles */
.table-head.ticker-head,
.place-row.ticker-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.5fr) 75px 65px 120px 80px;
  align-items: center;
  gap: 8px;
}

.place-row.ticker-row .place-name span {
  font-size: 10px;
  color: #64748b;
}

.rank-cell {
  font-size: 12px;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.rank-cell strong {
  font-weight: 800;
  font-size: 13px;
  color: #0369a1;
}

.text-muted {
  color: #94a3b8;
}

.trend-cell {
  display: flex;
  align-items: center;
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.trend-badge.trend-up {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.trend-badge.trend-down {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.trend-badge.trend-rebound {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.trend-badge.trend-steady {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.trend-badge.trend-volatile {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.trend-badge.trend-none {
  color: #94a3b8;
  background: transparent;
}

.sparkline-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sparkline-svg {
  overflow: visible;
}

.no-sparkline {
  color: #94a3b8;
  font-size: 11px;
}

/* Detail Drawer Trend Card */
.trend-card {
  margin-top: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}

.trend-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.trend-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.trend-title-wrap h3 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 15px !important;
  color: #0f172a !important;
  font-weight: 800;
}

.trend-policy-tag {
  font-size: 10px;
  font-family: monospace;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
}

.trend-history-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 10px;
}

.trend-history-meta strong {
  color: #0f172a;
}

.trend-history-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
}

.rank-step-box {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  min-width: 64px;
}

.rank-month {
  display: block;
  font-size: 10px;
  color: #64748b;
}

.rank-val {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.rank-step-arrow {
  color: #94a3b8;
  font-weight: bold;
}

.trend-desc {
  font-size: 12px;
  color: #334155;
  margin: 4px 0 8px;
  line-height: 1.5;
}

.trend-disclaimer {
  font-size: 10px;
  color: #64748b;
  margin: 0;
}

/* 5. 사용자 피드백 및 분산 추천 스타일 */
.interactive-pill {
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.interactive-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.interactive-pill.active-pill {
  outline: 2px solid currentColor;
  outline-offset: 1.5px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.ledger-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.active-crowd-filter-badge {
  font-size: 11px;
  background: #0284c7;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.active-crowd-filter-badge button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
}

.toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.crowd-sort-switch {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 7px;
  padding: 2px;
  border: 1px solid #e2e8f0;
  gap: 2px;
}

.crowd-sort-switch .sort-switch-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  padding: 0 4px 0 6px;
  user-select: none;
}

.btn-crowd-sort {
  border: 0;
  background: transparent;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #475569;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
}

.btn-crowd-sort:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.btn-crowd-sort.active {
  background: #0f172a;
  color: #ffffff;
  font-weight: 750;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.btn-crowd-sort.active .sort-arrow {
  color: #34d399;
}

.analysis-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  user-select: none;
}

.analysis-filter-label input {
  cursor: pointer;
}

.workspace-layout-switch {
  display: flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  border: 1px solid #e2e8f0;
}

.workspace-layout-switch button {
  border: none;
  background: transparent;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  font-weight: 600;
}

.workspace-layout-switch button.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 워크스페이스 레이아웃 모드 */
.workspace.layout-stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.workspace.layout-stacked .map-panel {
  order: -1;
  height: 460px;
  min-height: 460px;
  border-bottom: 1px solid var(--line);
}

.workspace.layout-stacked .ledger {
  order: 1;
  border-right: 0;
}

.workspace.layout-popup {
  display: grid;
  grid-template-columns: 1fr;
}

.workspace.layout-popup .map-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: min(540px, calc(100vw - 48px));
  height: 440px;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.3);
  z-index: 35;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #fff;
  display: none;
}

.workspace.layout-popup .map-panel.popup-open {
  display: block;
}

.map-panel-header {
  height: 38px;
  background: #0f172a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 12px;
  z-index: 20;
  position: relative;
}

.map-close-btn {
  background: none;
  border: none;
  color: #cbd5e1;
  font-size: 14px;
  cursor: pointer;
}

.floating-map-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 34;
  background: #0284c7;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-route-notice {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 25;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.map-route-notice button {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
}

/* 테마형 플레이스홀더 */
.themed-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 6px;
  color: #fff;
  user-select: none;
  min-width: 48px;
  height: 48px;
}

.themed-thumb-icon {
  font-size: 16px;
}

.themed-thumb-tag {
  font-size: 8px;
  font-weight: 700;
  opacity: 0.9;
}

.themed-banner {
  height: 140px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.25);
  margin-bottom: 12px;
}

.themed-banner-icon {
  font-size: 32px;
}

.themed-banner-tag {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
}

.themed-banner-title {
  font-size: 16px;
  font-weight: 800;
}

/* 예측 차트 스크롤 및 공휴일 지시선 */
.forecast-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 10px;
}

.fc-timeline-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.fc-timeline-nav {
  display: flex;
  gap: 6px;
}

.fc-scroll-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fc-scroll-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.forecast-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 10px 10px;
  margin-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

.forecast-scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}

.forecast-scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.forecast-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.forecast-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 분산 추천: 다음 여유 관광지 카드 */
.next-places-section {
  margin: 18px 0;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 14px;
}

.rec-box-header {
  margin-bottom: 12px;
}

.rec-box-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rec-box-title-wrap h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800;
  color: #0369a1 !important;
}

.rec-box-badge {
  font-size: 10px;
  background: #e0f2fe;
  color: #0284c7;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #bae6fd;
}

.rec-box-sub {
  font-size: 11px;
  color: #64748b;
  margin: 4px 0 0;
}

.next-places-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.next-place-card {
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
}

.next-place-card:hover {
  border-color: #38bdf8;
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.15);
}

.rec-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.rec-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.rec-distance-tag {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
  padding: 2px 6px;
  border-radius: 4px;
}

.rec-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 6px;
}

.rec-reason {
  font-size: 12px;
  color: #334155;
  line-height: 1.45;
  margin: 0 0 10px;
}

.rec-action-row {
  display: flex;
  gap: 8px;
}

.rec-action-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.rec-action-btn.view-route {
  border: 1px solid #38bdf8;
  background: #f0f9ff;
  color: #0284c7;
}

.rec-action-btn.view-route:hover {
  background: #e0f2fe;
}

.rec-action-btn.move-place {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.rec-action-btn.move-place:hover {
  background: #f8fafc;
  color: #0f172a;
}

.rec-straight-disclaimer {
  font-size: 10px;
  color: #64748b;
  margin: 10px 0 0;
}

/* ==========================================================================
   5.5 연관 관광지 및 사진 갤러리 (Related Places & Photos)
   ========================================================================== */
.related-places-section {
  margin: 18px 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
}

.related-box-header {
  margin-bottom: 12px;
}

.related-box-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.related-box-title-wrap h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800;
  color: #1e293b !important;
}

.related-box-badge {
  font-size: 10px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
}

.related-box-sub {
  font-size: 11px;
  color: #64748b;
  margin: 4px 0 0;
}

.related-places-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.related-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
}

.related-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.12);
  transform: translateY(-1px);
}

.related-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.related-rank-badge {
  font-size: 10px;
  font-weight: 800;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 1px 6px;
  border-radius: 4px;
}

.related-category-tag {
  font-size: 10px;
  color: #64748b;
  background: #f8fafc;
  padding: 1px 5px;
  border-radius: 3px;
}

.related-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.related-card-district {
  font-size: 11px;
  color: #64748b;
}

.related-card-btn {
  margin-top: 4px;
  width: 100%;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.related-card-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.photos-section {
  margin: 18px 0;
  background: #fffaf0;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 14px;
}

.photos-box-header {
  margin-bottom: 12px;
}

.photos-box-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.photos-box-title-wrap h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800;
  color: #c2410c !important;
}

.photos-box-badge {
  font-size: 10px;
  background: #ffedd5;
  color: #ea580c;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #fdba74;
}

.photos-box-sub {
  font-size: 11px;
  color: #78350f;
  margin: 4px 0 0;
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.photo-card {
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.photo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(234, 88, 12, 0.15);
  border-color: #f97316;
}

.photo-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  overflow: hidden;
}

.photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.photo-card:hover .photo-img {
  transform: scale(1.05);
}

.photo-card-info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.photo-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card-meta {
  font-size: 10px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   6. 이미지 대체 표시 통일 (Unified Image Placeholder)
   ========================================================================== */
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  user-select: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

.image-placeholder .placeholder-icon {
  font-size: 14px;
  line-height: 1;
}

.image-placeholder .placeholder-text {
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: -0.02em;
}

.image-placeholder-thumb {
  width: 44px;
  height: 44px;
  border-radius: 7px;
}

.image-placeholder-board {
  width: 52px;
  height: 52px;
  border-radius: 8px;
}

.image-placeholder-rec {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.image-placeholder-detail {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f1f5f9;
  font-size: 14px;
  font-weight: 700;
  gap: 6px;
}

.image-placeholder-detail .placeholder-icon {
  font-size: 28px;
}

.image-placeholder-detail .placeholder-text {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

/* ==========================================================================
   7. 관광 종목판 (Board Card) - 자동 높이 & 줄바꿈
   ========================================================================== */
.ticker-card {
  display: block;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px;
  cursor: pointer;
  background: #fff;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
  min-height: auto;
}

.ticker-card:hover {
  background: #f8fafc;
}

.ticker-card:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: -2px;
}

.ticker-card.selected {
  background: #f0f9ff;
  box-shadow: inset 4px 0 0 #0284c7;
}

.ticker-card-main {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.board-card-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: #e2e8f0;
  flex-shrink: 0;
}

.ticker-card-info {
  flex: 1;
  min-width: 0;
}

.ticker-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.ticker-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ticker-cat-tag {
  font-size: 10px;
  font-weight: 750;
  color: #0284c7;
  background: #f0f9ff;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #bae6fd;
  display: inline-block;
  width: fit-content;
}

.ticker-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  margin: 0;
}

.ticker-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.plan-add-icon-btn {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
}

.plan-add-icon-btn:hover {
  background: #f0f9ff;
  border-color: #0284c7;
  color: #0284c7;
}

.plan-add-icon-btn.in-plan {
  background: #0284c7;
  border-color: #0284c7;
  color: #fff;
}

.ticker-addr {
  font-size: 11.5px;
  color: #64748b;
  margin: 4px 0 6px;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

.ticker-overview {
  font-size: 12px;
  color: #334155;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  margin: 0 0 10px;
}

.ticker-card-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #edf2f7;
}

.crowd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 750;
  padding: 2.5px 8px;
  height: 22px;
  border-radius: 4px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1;
}

.crowd-badge.crowded,
.crowd-badge.crowd-crowded {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.crowd-badge.moderate,
.crowd-badge.crowd-moderate {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.crowd-badge.relaxed,
.crowd-badge.crowd-relaxed {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.crowd-badge.none,
.crowd-badge.crowd-none {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.crowd-asof {
  font-size: 10.5px;
  color: #64748b;
}

.rank-mini {
  font-size: 11px;
  color: #475569;
  font-weight: 700;
  margin-left: auto;
}

.ticker-operating-drawer {
  font-size: 11px;
  color: #334155;
  background: #f1f5f9;
  padding: 8px 10px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.operating-line {
  display: flex;
  gap: 8px;
  line-height: 1.4;
  word-break: keep-all;
}

.operating-label {
  font-weight: 750;
  color: #475569;
  flex-shrink: 0;
}

.operating-val {
  color: #0f172a;
}

.ticker-card-foot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: #94a3b8;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
}

.ticker-hint {
  color: #0284c7;
  font-weight: 700;
}

/* ==========================================================================
   8. 관광 계획 목록 (Tour Plan Row) & 전용 맵 스타일
   ========================================================================== */
.plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.plan-row:hover {
  background: #f8fafc;
}

.plan-index-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0284c7;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
}

.plan-content {
  flex: 1;
  min-width: 0;
}

.plan-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.plan-title {
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
}

.plan-cat {
  font-size: 10px;
  color: #0284c7;
  background: #f0f9ff;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #bae6fd;
}

.coord-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.coord-badge.coord-ok {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.coord-badge.coord-missing {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.plan-addr {
  font-size: 11px;
  color: #64748b;
  margin: 3px 0 4px;
  word-break: keep-all;
}

.plan-signals {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}

.plan-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.plan-move-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
}

.plan-move-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.plan-move-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.plan-del-btn {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
}

.plan-del-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

#plan-count-badge {
  font-size: 10px;
  background: #0284c7;
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-weight: 750;
}

.plan-key {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0284c7;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-right: 4px;
}

/* ==========================================================================
   9. 동선 보기 및 미리보기 바 (Route Preview Bar)
   ========================================================================== */
.route-preview-bar {
  display: flex;
  position: relative;
  z-index: 36;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

.route-preview-bar.hidden {
  display: none !important;
}

.route-preview-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.route-preview-tag {
  font-size: 11px;
  font-weight: 800;
  background: #0284c7;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}

.route-endpoints {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.route-point.origin {
  color: #7dd3fc;
}

.route-point.target {
  color: #86efac;
}

.endpoint.origin {
  color: #7dd3fc;
}

.endpoint.destination {
  color: #86efac;
}

.route-arrow {
  color: #94a3b8;
  font-size: 11px;
}

.route-dist {
  font-size: 12px;
  background: #334155;
  padding: 2px 7px;
  border-radius: 4px;
  color: #f8fafc;
}

.route-note {
  font-size: 10.5px;
  color: #94a3b8;
}

.route-disclaimer {
  color: #cbd5e1;
  font-size: 10.5px;
  line-height: 1.45;
}

.route-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-preview-add-plan,
.btn-preview-back,
.btn-preview-close {
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.btn-preview-add-plan {
  background: #0284c7;
}

.btn-preview-back {
  background: #334155;
}

.btn-preview-close {
  background: transparent;
  color: #cbd5e1;
  padding-inline: 9px;
}

.btn-preview-add-plan:disabled {
  background: #334155;
  color: #cbd5e1;
  cursor: default;
}

.route-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 0;
}

.route-btn.primary {
  background: #0284c7;
  color: #fff;
}

.route-btn.primary:hover {
  background: #0369a1;
}

.route-btn.secondary {
  background: #334155;
  color: #e2e8f0;
}

.route-btn.secondary:hover {
  background: #475569;
  color: #fff;
}

.route-btn.icon {
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  padding: 6px 8px;
}

.route-btn.icon:hover {
  color: #fff;
}

/* ==========================================================================
   10. 향상된 분산 추천 카드 (Enhanced Recommendation Cards)
   ========================================================================== */
.rec-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.rec-card-top-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 10px;
}

.rec-card-main-col {
  min-width: 0;
}

.rec-card-thumb,
.image-placeholder-rec {
  display: block;
  width: 132px;
  height: 88px;
  object-fit: cover;
  border-radius: 7px;
}

.rec-address,
.rec-overview {
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
  margin: 6px 0;
}

.rec-action-btn.add-plan {
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

.rec-action-btn.add-plan.planned {
  border-color: #0284c7;
  background: #0284c7;
  color: #fff;
}

.rec-thumb-wrap {
  flex-shrink: 0;
}

.rec-main-info {
  flex: 1;
  min-width: 0;
}

.rec-addr {
  font-size: 11px;
  color: #64748b;
  margin: 2px 0 4px;
  word-break: keep-all;
}

.rec-operating-box {
  font-size: 10.5px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  padding: 6px 8px;
  border-radius: 6px;
  margin: 6px 0 10px;
  line-height: 1.4;
}

.rec-action-btn.view-detail {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.rec-action-btn.view-detail:hover {
  background: #f8fafc;
  color: #0f172a;
}

.rec-action-btn.preview-route {
  border: 1px solid #38bdf8;
  background: #f0f9ff;
  color: #0284c7;
}

.rec-action-btn.preview-route:hover {
  background: #e0f2fe;
}

.rec-action-btn.add-to-plan {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.rec-action-btn.add-to-plan:hover {
  background: #dcfce7;
}

.rec-action-btn.add-to-plan.in-plan {
  background: #15803d;
  color: #fff;
  border-color: #15803d;
}

/* 관광지 목록: 1600px 이상에서는 고정 필드형 데스크톱 표로 전환합니다. */
.table-head.ticker-head {
  display: none;
}

.ticker-card-top {
  display: grid;
  grid-template-columns: 30px 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ticker-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.ticker-title {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticker-place-meta {
  color: #64748b;
  font-size: 10.5px;
  line-height: 1.35;
  white-space: nowrap;
}

.ticker-forecast-cell,
.ticker-judgment,
.ticker-analysis {
  min-width: 0;
}

.list-forecast {
  width: 100%;
  max-width: 230px;
  min-width: 0;
}

.list-forecast-bars {
  display: grid;
  grid-template-columns: minmax(32px, 1.3fr) repeat(6, minmax(13px, 1fr));
  align-items: end;
  gap: 3px;
}

.forecast-day {
  display: grid;
  grid-template-rows: 38px 13px;
  gap: 2px;
  align-items: end;
  min-width: 0;
}

.forecast-bar-track {
  height: 38px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid #cbd5e1;
}

.forecast-bar-track i {
  display: block;
  width: 100%;
  height: var(--bar-height);
  min-height: 3px;
  border-radius: 3px 3px 1px 1px;
  background: #bae6fd;
  box-shadow: inset 0 0 0 1px #dbeafe;
}

.forecast-day-saturday .forecast-bar-track i {
  background: #bae6fd;
}

.forecast-day-holiday .forecast-bar-track i {
  background: #bae6fd;
}

.forecast-day-emphasis .forecast-bar-track i {
  background: #0284c7;
  box-shadow: none;
}

.forecast-day-label {
  color: #64748b;
  font-size: 8.5px;
  line-height: 1;
  text-align: center;
}

.forecast-day-saturday .forecast-day-label {
  color: #64748b;
  font-weight: 500;
}

.forecast-day-holiday .forecast-day-label {
  color: #64748b;
  font-weight: 500;
}

.list-forecast-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  line-height: 1.2;
}

.list-forecast-scale strong {
  color: #0f172a;
  font-size: 9.5px;
  white-space: nowrap;
}

.list-forecast-scale span,
.list-forecast-empty span {
  color: #64748b;
  font-size: 8.5px;
  white-space: nowrap;
}

.list-forecast-empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.list-forecast-empty strong {
  color: #475569;
  font-size: 12px;
}

.ticker-judgment {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ticker-judgment strong {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.35;
}

.ticker-judgment span {
  color: #64748b;
  font-size: 10px;
  line-height: 1.35;
}

.ticker-analysis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 165px;
}

.ticker-analysis-badge {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.25;
}

.ticker-analysis-badge .badge-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ticker-analysis-badge .badge-icon {
  font-style: normal;
  font-size: 10.5px;
  line-height: 1;
}

.ticker-analysis-badge small {
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ticker-analysis-badge strong {
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.ticker-analysis-badge.gem {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.ticker-analysis-badge.gem small {
  color: #5b21b6;
}

.ticker-analysis-badge.gem strong {
  color: #4c1d95;
}

.ticker-analysis-badge.safe {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.ticker-analysis-badge.safe small {
  color: #065f46;
}

.ticker-analysis-badge.safe strong {
  color: #022c22;
}

@media (max-width: 1023px) {
  .table-head.ticker-head {
    display: none !important;
  }

  .place-list {
    background: #f8fafc;
    padding: 10px 8px;
    border-radius: 12px;
  }

  .ticker-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 13px 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease,
      border-color 0.15s ease;
  }

  .ticker-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  }

  .ticker-card.selected {
    border-color: #0284c7;
    box-shadow:
      0 0 0 2px rgba(2, 132, 199, 0.2),
      0 4px 12px rgba(2, 132, 199, 0.1);
  }

  /* 1. Header (Star, Thumb, Title, District/Category) */
  .ticker-card-top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 26px 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
  }

  .board-card-thumb,
  .ticker-card-thumb-wrap .image-placeholder-board {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
  }

  .ticker-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
  }

  .ticker-place-meta {
    font-size: 11px;
    color: #64748b;
  }

  /* 2. Metrics row: Forecast chart (Left) + Judgment (Right) */
  .ticker-forecast-cell {
    grid-column: 1 / 2;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
  }

  .ticker-forecast-cell::before {
    display: none !important;
  }

  .list-forecast {
    width: 100%;
    max-width: 100%;
  }

  .list-forecast-bars {
    grid-template-columns: minmax(28px, 1.2fr) repeat(6, minmax(11px, 1fr));
    gap: 2px;
  }

  .forecast-day {
    grid-template-rows: 32px 12px;
  }

  .forecast-bar-track {
    height: 32px;
  }

  .forecast-day-label {
    font-size: 8px;
  }

  .list-forecast-scale {
    margin-top: 2px;
  }

  .list-forecast-scale strong {
    font-size: 8.5px;
  }

  .list-forecast-scale span {
    font-size: 8px;
  }

  .ticker-judgment {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 9px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #edf2f7;
    margin: 0;
    min-width: 0;
  }

  .ticker-judgment strong {
    color: #0f172a;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ticker-judgment span {
    color: #64748b;
    font-size: 10px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .ticker-judgment::before {
    display: none !important;
  }

  /* 3. Spot Analysis (Horizontal 2 badges spanning full width) */
  .ticker-analysis {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
  }

  .ticker-analysis::before {
    display: none !important;
  }

  .ticker-analysis-badge {
    padding: 4px 8px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ticker-analysis-badge strong {
    text-align: center;
  }

  /* 4. Action buttons (Side-by-side) */
  .ticker-card-foot {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    margin-top: 2px;
  }

  .ticker-card-foot::before {
    display: none !important;
  }

  .ticker-card-foot .btn {
    width: 100%;
    height: 34px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
  }

  .ticker-operating-drawer {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .place-list {
    background: #ffffff;
    padding: 0;
    border-radius: 0;
  }

  .table-head.ticker-head,
  .ticker-card {
    display: grid;
    grid-template-columns:
      minmax(200px, 1.35fr) minmax(170px, 1.05fr) minmax(110px, 0.75fr) minmax(130px, 0.8fr)
      minmax(140px, 0.8fr);
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    background: #ffffff;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
  }

  .table-head.ticker-head {
    display: grid;
    min-height: 46px;
    height: auto;
    padding: 8px 18px;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
  }

  .table-head.ticker-head span {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .table-head.ticker-head span:nth-child(4) {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .table-head.ticker-head small {
    color: #64748b;
    font-size: 9px;
    font-weight: 500;
  }

  .ticker-card:hover {
    background: #f8fafc;
  }

  .ticker-card.selected {
    background: #f0f9ff;
    box-shadow: inset 4px 0 0 #0284c7;
  }

  .ticker-card-top {
    grid-template-columns: 28px 56px minmax(0, 1fr);
    padding-bottom: 0;
    border-bottom: none;
  }

  .ticker-card-thumb-wrap .board-card-thumb,
  .ticker-card-thumb-wrap .image-placeholder-board {
    width: 56px;
    height: 56px;
  }

  .ticker-judgment {
    padding: 0;
    background: none;
    border: none;
  }

  .ticker-analysis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 auto;
    width: 100%;
    max-width: 140px;
    text-align: center;
  }

  .ticker-analysis-badge {
    width: 100%;
    max-width: 135px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    box-sizing: border-box;
  }

  .ticker-analysis-badge strong {
    text-align: center;
    min-width: 42px;
  }

  .ticker-forecast-cell::before,
  .ticker-judgment::before,
  .ticker-analysis::before,
  .ticker-card-foot::before {
    display: none !important;
  }

  .ticker-overview,
  .ticker-operating-drawer {
    display: none;
  }

  .ticker-card-foot {
    justify-content: flex-start;
    gap: 7px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    display: flex;
  }
}

@media (max-width: 768px) {
  .workspace.layout-stacked,
  .workspace.layout-popup {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace.layout-stacked .map-panel {
    height: 360px;
    min-height: 360px;
  }

  .ledger-head {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-controls {
    grid-template-columns: 1fr 1fr;
  }

  .analysis-filter-label,
  .view-switch {
    grid-column: 1 / -1;
  }

  .layout-switch,
  .workspace-layout-switch,
  .view-switch {
    justify-content: center;
  }

  .route-preview-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .route-preview-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .rec-action-row {
    flex-direction: column;
  }

  .rec-card-top-row {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .rec-card-thumb,
  .image-placeholder-rec {
    width: 96px;
    height: 72px;
  }
}

/* ========================================================
   TRIP PLANNER DEDICATED MODE (Google Travel Style Layout)
   ======================================================== */
.planner-mode-view {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  background: transparent;
}

.planner-mode-view[hidden] {
  display: none !important;
}

/* Header & Catchphrase */
.planner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  flex-wrap: wrap;
}

.planner-title-wrap {
  flex: 1;
  min-width: 320px;
}

.planner-brand-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.planner-brand-tag {
  font-size: 11px;
  font-weight: 800;
  color: #0284c7;
  background: #e0f2fe;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.planner-heading {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0 0 6px 0;
}

.planner-catchphrase {
  margin: 0;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Guide Flow Steps in Header */
.planner-guide-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 30px;
  flex-wrap: wrap;
}

.guide-step-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.guide-step-item.active {
  color: #0284c7;
  font-weight: 700;
}

.guide-step-item .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0284c7;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.guide-arrow {
  color: #cbd5e1;
  font-weight: 700;
  font-size: 14px;
}

/* Main 2-Column Body (Google Travel Style: Left Sidebar + Right Map) */
.planner-body {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 20px;
  min-height: 760px;
}

/* Left Sidebar */
.planner-sidebar {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  height: 760px;
}

/* 4-Step Navigation Tabs */
.planner-sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.planner-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  position: relative;
  gap: 4px;
}

.planner-nav-tab:hover {
  background: #f1f5f9;
}

.planner-nav-tab.active {
  background: #ffffff;
  border-bottom-color: #2563eb;
}

.planner-nav-tab .tab-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  background: #e2e8f0;
  color: #475569;
}

.planner-nav-tab.active .tab-step-badge {
  background: #2563eb;
  color: #ffffff;
}

.planner-nav-tab .tab-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  text-align: center;
  line-height: 1.35;
  word-break: keep-all;
}

.planner-nav-tab.active .tab-label {
  color: #0f172a;
}

.planner-nav-tab .tab-count-pill {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #0284c7;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 10px;
}

/* Sidebar Panels Container */
.planner-sidebar-content {
  flex: 1;
  overflow-y: auto;
  background: #f8fafc;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.planner-sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.planner-sidebar-panel[hidden] {
  display: none !important;
}

/* Panel Section Cards (Clean White Background) */
.panel-section-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.panel-section-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.plan-switcher-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-plan-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-plan-switcher:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

/* Meta Card Sticky Header and Actions */
.meta-card-header {
  position: sticky;
  top: -16px;
  background: #ffffff;
  z-index: 10;
  padding: 8px 0 10px 0;
  margin-top: -6px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.meta-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-card-header .panel-section-title {
  margin: 0;
}

.meta-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.meta-status-pill.dirty {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  animation: metaPulseDirty 2s infinite ease-in-out;
}

.meta-status-pill.saved {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

@keyframes metaPulseDirty {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

.meta-form-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#btn-save-sidebar-meta,
#btn-cancel-sidebar-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

#btn-save-sidebar-meta {
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #1d4ed8;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

#btn-save-sidebar-meta:hover:not(:disabled) {
  background: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

#btn-cancel-sidebar-meta {
  background: #ffffff;
  color: #475569;
  border: 1px solid #cbd5e1;
}

#btn-cancel-sidebar-meta:hover:not(:disabled) {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

#btn-save-sidebar-meta:disabled,
#btn-cancel-sidebar-meta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Form Styles Scoped to Planner Sidebar */
.sidebar-meta-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-form-group label {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}

.meta-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.meta-form-row-dates {
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}

.meta-form-group-reset {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0;
}

.meta-form-group-reset .reset-field-label {
  display: none;
}

.btn-icon-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #ffffff;
  color: var(--navy, #0f172a);
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.btn-icon-reset:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-icon-reset:active:not(:disabled) {
  background: #e2e8f0;
  border-color: #64748b;
  transform: translateY(0);
}

.btn-icon-reset:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #f8fafc;
  color: #94a3b8;
  border-color: #e2e8f0;
  transform: none;
  box-shadow: none;
}

.sidebar-input,
.sidebar-textarea {
  width: 100%;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #0f172a !important;
  box-sizing: border-box;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.sidebar-input:focus,
.sidebar-textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.meta-form-action-row {
  margin-top: 4px;
}

.sidebar-mgmt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Tab 2: Places Action Bar & Search */
.places-action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.places-search-bar {
  display: flex;
  align-items: center;
  position: relative;
}

.places-search-bar .search-icon {
  position: absolute;
  left: 10px;
  color: #94a3b8;
  font-size: 14px;
  pointer-events: none;
}

.places-search-bar .sidebar-input {
  padding-left: 32px;
}

.places-list-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #64748b;
  padding: 0 2px;
}

.places-count-label strong {
  color: #0284c7;
}

.places-order-hint {
  font-size: 11px;
  color: #94a3b8;
}

/* Right Map Container */
.planner-map-container {
  position: relative;
  background: #e2e8f0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  height: 760px;
  display: flex;
  flex-direction: column;
}

.planner-map {
  width: 100%;
  flex: 1;
  height: 100%;
}

.planner-route-notice {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(4px);
  color: #f1f5f9;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: auto;
}

/* Draggable Marker Popup in Planner */
.planner-popup {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 320px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
  z-index: 25;
  user-select: none;
  overflow: hidden;
}

.planner-popup[hidden] {
  display: none !important;
}

.planner-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #0f172a;
  color: #ffffff;
  cursor: grab;
  touch-action: none;
}

.planner-popup-header:active {
  cursor: grabbing;
}

.popup-drag-grip {
  font-size: 16px;
  color: #94a3b8;
  margin-right: 8px;
}

.planner-popup-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  border-radius: 4px;
}

.popup-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.planner-popup-body {
  padding: 14px;
  font-size: 12px;
}

.planner-popup-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}

.planner-popup-address {
  margin: 0 0 10px 0;
  color: var(--muted);
  line-height: 1.4;
}

.planner-popup-signals {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.planner-popup-actions {
  display: flex;
  gap: 8px;
}

/* Undo Toast */
.undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1000;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.undo-toast[hidden] {
  display: none !important;
}

.btn-undo {
  background: #38bdf8;
  color: #082f49;
  border: none;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-undo:hover {
  background: #7dd3fc;
}

/* Planner 30-day Timeline Section & Chart */
.planner-timeline-section {
  margin-top: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.planner-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.planner-timeline-title-wrap h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}

.planner-timeline-title-wrap p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.golden-day-card {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.golden-day-label {
  font-size: 11px;
  font-weight: 800;
  color: #047857;
}

.golden-day-val-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.golden-day-date {
  font-size: 16px;
  font-weight: 900;
  color: #065f46;
}

.golden-day-score {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
}

.golden-day-hint {
  font-size: 10.5px;
  color: #047857;
}

.planner-chart-wrap {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}

.planner-chart-legends {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.planner-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 3px 10px;
  font-size: 11px;
  color: #334155;
}

.planner-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.planner-canvas-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

.planner-canvas-container canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.planner-chart-tooltip {
  position: absolute;
  z-index: 50;
  background: rgba(15, 23, 42, 0.95);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.planner-chart-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 13px;
}

/* Mobile Responsiveness for Trip Planner */
@media (max-width: 900px) {
  .planner-body {
    grid-template-columns: 1fr;
  }

  .planner-map-container {
    min-height: 400px;
  }

  .planner-map {
    min-height: 400px;
  }
}

@media (max-width: 600px) {
  .planner-search-filters {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .planner-timeline-section {
    padding: 14px;
    margin-top: 16px;
  }

  .planner-canvas-container {
    overflow-x: auto;
  }

  .planner-canvas-container canvas {
    min-width: 720px;
    height: 240px;
  }

  .planner-popup {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    top: auto !important;
    bottom: 12px !important;
    border-radius: 12px;
  }

  .btn-reorder {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
}

/* Print Styles (Action item 9) */
.print-sheet {
  display: none;
}

@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .skip-link,
  .site-header,
  #hero-section,
  #explore,
  #planner-mode-view,
  .principle,
  .detail-drawer,
  .drawer-scrim,
  .undo-toast,
  footer {
    display: none !important;
  }

  .print-sheet {
    display: block !important;
    padding: 10mm 15mm;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .print-header {
    border-bottom: 2px solid #000000;
    padding-bottom: 12px;
    margin-bottom: 18px;
  }

  .print-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 6px 0;
  }

  .print-meta {
    font-size: 11px;
    color: #475569;
    display: flex;
    justify-content: space-between;
  }

  .print-route-summary {
    margin-bottom: 20px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
  }

  .print-route-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }

  .print-table th,
  .print-table td {
    border: 1px solid #cbd5e1;
    padding: 8px 10px;
    text-align: left;
  }

  .print-table th {
    background: #f1f5f9;
    font-weight: 700;
  }

  .print-table tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .print-step-col {
    width: 36px;
    text-align: center;
    font-weight: 800;
  }
}

/* ==========================================================================
   Hero Ticker Board (관광지 현황 전광판)
   ========================================================================== */
.hero-board {
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: 440px;
  background:
    radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.15), transparent 45%),
    linear-gradient(145deg, #0d1a33, #060e1c);
  border-left: 1px solid rgba(56, 189, 248, 0.18);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.board-header-titles {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.board-header-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
}

.board-header-sub {
  font-size: 11px;
  color: #38bdf8;
  font-weight: 700;
}

.board-as-of {
  font-size: 10px;
  color: #94a3b8;
  margin-left: 4px;
}

.board-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.board-ctrl-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.board-ctrl-btn:hover {
  background: #38bdf8;
  color: #082f49;
  border-color: #38bdf8;
}

/* 3x2 Grid for 5 Tiles */
.hero-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 12px;
  flex: 1;
}

.board-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: #94a3b8;
  font-size: 13px;
}

.board-tile {
  min-width: 0;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 10px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-align: left;
}

.board-tile:hover {
  background: rgba(30, 41, 59, 0.88);
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.board-tile:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* Tile 0: Lead Tile spanning 2 columns on row 1 */
.board-tile-lead {
  grid-column: 1 / 3;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 58, 138, 0.4));
  border-color: rgba(56, 189, 248, 0.35);
  padding: 16px 18px;
}

.board-tile-lead .board-tile-title {
  font-size: 16px;
}

.board-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 6px;
  flex-wrap: wrap;
}

.board-reason-badge {
  font-size: 10px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.25);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.board-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.board-tile-title {
  display: block;
  min-width: 0;
  flex: 1;
  font-size: 13.5px;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-tile-district {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.board-rate-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.board-rate-num {
  font-size: 13px;
  font-weight: 850;
  color: #bae6fd;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.board-rate-num small {
  margin-left: 1px;
  font-size: 9px;
  font-weight: 700;
  color: #7dd3fc;
}

.board-status-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.board-status-badge.status-crowded {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.board-status-badge.status-moderate {
  background: rgba(5, 150, 105, 0.24);
  color: #34d399;
  border: 1px solid rgba(5, 150, 105, 0.45);
}

.board-status-badge.status-relaxed {
  background: rgba(14, 165, 233, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(14, 165, 233, 0.4);
}

.board-change-pill {
  font-size: 10.5px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.board-change-pill.change-up {
  color: #fca5a5;
}

.board-change-pill.change-down {
  color: #86efac;
}

.board-change-pill.change-flat {
  color: #cbd5e1;
}

.board-weekday-chart {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.board-weekday-chart-label {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
}

.board-weekday-bars {
  display: grid;
  grid-template-columns: minmax(34px, 1.4fr) repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  height: 58px;
}

.board-weekday-bar {
  display: grid;
  grid-template-rows: 12px 1fr 12px;
  align-items: end;
  min-width: 0;
  height: 100%;
  text-align: center;
}

.board-weekday-value,
.board-weekday-label {
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.board-weekday-label {
  white-space: nowrap;
  letter-spacing: -0.08em;
}

.board-weekday-value {
  color: #94a3b8;
}

.board-weekday-label {
  color: #64748b;
}

.board-weekday-bar.is-emphasis .board-weekday-value,
.board-weekday-bar.is-emphasis .board-weekday-label {
  color: #fde68a;
  font-weight: 800;
}

.board-weekday-track {
  display: flex;
  align-items: end;
  height: 100%;
  margin: 2px 0;
  padding: 0 2px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.1);
  overflow: hidden;
}

.board-weekday-track i {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
}

.board-weekday-bar.is-emphasis .board-weekday-track i {
  background: linear-gradient(180deg, #fbbf24, #f97316);
}

.board-weekday-empty {
  display: block;
  color: #64748b;
  font-size: 10px;
  line-height: 58px;
  text-align: center;
}

.board-tile-fade {
  animation: boardTileFadeIn 0.35s ease-out;
}

@keyframes boardTileFadeIn {
  from {
    opacity: 0.2;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsiveness for Hero Board */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-board {
    border-left: 0;
    border-top: 1px solid rgba(56, 189, 248, 0.18);
    min-height: auto;
    padding: 20px 24px;
  }

  .hero-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-tile-lead {
    grid-column: 1 / -1;
  }
}

.board-footer-actions {
  display: none;
}

@media (max-width: 640px) {
  .hero-board {
    min-height: auto;
    padding: 10px 14px 12px;
  }

  .hero-board-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
    gap: 6px;
  }

  .board-header-title {
    font-size: 14px !important;
  }

  .board-header-sub {
    font-size: 10.5px;
  }

  .board-as-of {
    font-size: 9.5px;
  }

  #board-header-actions-desktop {
    display: none !important;
  }

  .board-footer-actions {
    display: flex !important;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  .hero-board-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .board-tile-lead {
    grid-column: 1;
    padding: 10px 12px;
  }

  .board-tile {
    padding: 10px 12px;
    border-radius: 8px;
  }

  .board-tile-top {
    margin-bottom: 4px;
  }

  .board-tile-title {
    font-size: 14px;
  }

  .board-tile-district {
    font-size: 10.5px;
    margin-bottom: 4px;
  }

  .board-rate-num {
    font-size: 12px;
  }

  .board-weekday-chart {
    margin-top: 5px;
    padding-top: 5px;
  }

  .board-weekday-bars {
    height: 50px;
  }

  .board-ctrl-btn {
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* ==========================================================================
   Universal Help Buttons (.btn-help-trigger)
   ========================================================================== */
.btn-help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 750;
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  transition: all 0.18s ease;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: middle;
}

.btn-help-trigger:hover {
  background: #38bdf8;
  color: #082f49;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
}

.btn-help-trigger:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* Light Surface Variant (in Detail Drawer cards) */
.btn-help-trigger.help-light {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0284c7;
}

.btn-help-trigger.help-light:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

/* ==========================================================================
   Help Modal Dialog System (.help-modal)
   ========================================================================== */
.help-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(5px);
  z-index: 1200;
  animation: modalBackdropFadeIn 0.2s ease;
}

@keyframes modalBackdropFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.help-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  background: #ffffff;
  color: #0f172a;
  border-radius: 16px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45);
  z-index: 1210;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: helpModalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes helpModalPopIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.help-modal-header {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #ffffff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #334155;
}

.help-modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-modal-tag {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
  letter-spacing: 0.05em;
}

.help-modal-title {
  margin: 4px 0 0 0 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}

.help-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: #cbd5e1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.help-modal-close:hover {
  background: #ef4444;
  color: #ffffff;
}

.help-modal-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: #334155;
}

.help-callout {
  background: #f0f9ff;
  border-left: 4px solid #0284c7;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  color: #0369a1;
  line-height: 1.6;
}

.help-callout strong {
  color: #0c4a6e;
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.help-grid-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .help-grid-sections {
    grid-template-columns: 1fr;
  }
}

.help-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}

.help-box-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-box-content {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.help-box-content li {
  margin-bottom: 6px;
}

/* Interactive SVG Example Visual Container */
.help-visual-container {
  background: #0f172a;
  color: #f8fafc;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-visual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 750;
  color: #7dd3fc;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.help-svg-chart {
  width: 100%;
  height: 160px;
  overflow: visible;
}

.help-visual-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: #94a3b8;
}

.help-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.help-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Actionable Tips */
.help-tips {
  background: #fdf4ff;
  border: 1px solid #f5d0fe;
  border-radius: 10px;
  padding: 14px 18px;
  color: #701a75;
}

.help-tips-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-tips ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
}

.help-modal-footer {
  padding: 14px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   다차원 분산 지표 (숨은 명소 점수 & 쾌적 방문 점수) 스타일
   ========================================================================== */
.advanced-metrics-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 18px;
  padding: 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .advanced-metrics-container {
    grid-template-columns: 1fr;
  }
}

.advanced-metric-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.adv-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adv-metric-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adv-icon {
  font-size: 15px;
}

.adv-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.adv-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.adv-score-number {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.adv-score-number.gem {
  color: #7c3aed;
}

.adv-score-number.safe {
  color: #059669;
}

.adv-score-number.crowd-crowded {
  color: #dc2626;
}

.adv-score-number.crowd-moderate {
  color: #047857;
}

.adv-score-number.crowd-relaxed {
  color: #0284c7;
}

.adv-score-grade {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.adv-score-grade.gem-high {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #d8b4fe;
}

.adv-score-grade.gem-mid {
  background: #faf5ff;
  color: #9333ea;
  border: 1px solid #e9d5ff;
}

.adv-score-grade.gem-low {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.adv-score-grade.safe-high {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.adv-score-grade.safe-mid {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.adv-score-grade.safe-low {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.adv-bar-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.adv-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.adv-bar-fill.gem {
  background: linear-gradient(90deg, #a855f7, #6366f1);
}

.adv-bar-fill.safe {
  background: linear-gradient(90deg, #10b981, #06b6d4);
}

.adv-bar-fill.crowd-crowded {
  background: linear-gradient(90deg, #f87171, #ef4444);
}

.adv-bar-fill.crowd-moderate {
  background: linear-gradient(90deg, #34d399, #059669);
}

.adv-bar-fill.crowd-relaxed {
  background: linear-gradient(90deg, #7dd3fc, #0ea5e9);
}

.adv-desc {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.35;
  margin: 0;
}

/* 관광지 카드 목록용 미니 배지 */
.place-card-adv-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.mini-adv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 750;
  padding: 2.5px 8px;
  min-width: 88px;
  height: 22px;
  border-radius: 4px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1;
}

.mini-adv-badge.gem {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.mini-adv-badge.safe {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* 웰니스 & 테마 뱃지 */
.wellness-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* 두루누비 인근 힐링 산책로 섹션 */
.durunubi-trail-section {
  margin-top: 24px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.durunubi-trail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.durunubi-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.durunubi-icon {
  font-size: 18px;
}

.durunubi-title-wrap h3 {
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.durunubi-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  background: #dcfce7;
  color: #166534;
  border-radius: 4px;
}

.durunubi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.durunubi-trail-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.durunubi-trail-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

.durunubi-trail-info span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.durunubi-trail-desc {
  font-size: 11.5px;
  color: #334155;
  line-height: 1.45;
  margin: 2px 0 0;
}

/* ==========================================================================
   고화질 사진 라이트박스 (Photo Lightbox)
   ========================================================================== */
.photo-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
}

.lightbox-container {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-close {
  position: absolute;
  top: -42px;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  font-size: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
  left: -54px;
}

.lightbox-next {
  right: -54px;
}

.lightbox-content {
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  max-width: 850px;
}

.lightbox-img-wrap {
  width: 100%;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020617;
}

.lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.lightbox-caption {
  padding: 12px 18px;
  background: #1e293b;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lightbox-caption strong {
  font-size: 14px;
  color: #f8fafc;
}

.lightbox-caption span {
  font-size: 11px;
  color: #94a3b8;
}

/* ==========================================================================
   플래너 30일 예측 타임라인 섹션 (Multi-line Timeline Chart)
   ========================================================================== */
.planner-timeline-section {
  margin-top: 24px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.planner-timeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.planner-timeline-title-wrap {
  max-width: 600px;
}

.timeline-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.timeline-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 4px;
  text-transform: uppercase;
}

.planner-timeline-title-wrap h3 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.planner-timeline-title-wrap p {
  font-size: 12px;
  color: #64748b;
  margin: 4px 0 0;
}

.golden-day-card {
  padding: 10px 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1.5px solid #6ee7b7;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
}

.golden-day-label {
  font-size: 11px;
  font-weight: 800;
  color: #047857;
}

.golden-day-val-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.golden-day-date {
  font-size: 17px;
  font-weight: 900;
  color: #065f46;
}

.golden-day-score {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
}

.golden-day-hint {
  font-size: 10px;
  color: #047857;
}

.planner-chart-wrap {
  position: relative;
  background: #fafafa;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 16px;
}

.planner-chart-legends {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.planner-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #334155;
}

.planner-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.planner-legend-chip.planner-legend-no-data {
  opacity: 0.85;
  background: #f8fafc;
  border-style: dashed;
}

.planner-no-data-tag {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-left: 2px;
}

.planner-canvas-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

#planner-timeline-canvas {
  width: max(100%, 900px);
  height: auto;
  display: block;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.planner-chart-tooltip {
  position: absolute;
  z-index: 10;
  background: rgba(15, 23, 42, 0.95);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -8px;
}

.planner-chart-empty {
  text-align: center;
  padding: 36px 16px;
  color: #94a3b8;
  font-size: 13px;
}

/* ==========================================================================
   인쇄 (@media print) 타임라인 포함 처리
   ========================================================================== */
@media print {
  .print-timeline-section {
    margin-top: 18px;
    page-break-inside: avoid;
  }

  .print-timeline-header {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 8px;
    border-bottom: 1.5px solid #000;
    padding-bottom: 4px;
  }

  .print-golden-day {
    font-size: 11px;
    margin-bottom: 8px;
    color: #047857;
    font-weight: 700;
  }

  .print-timeline-img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border: 1px solid #ccc;
  }
}

/* ==========================================================================
   플래너 로딩 인디케이터, 검색 통계 & 페이지네이션, 7일 예상 스파크라인
   ========================================================================== */
.planner-map-loading {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.planner-timeline-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(3px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  gap: 12px;
}

.planner-timeline-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  width: 0%;
  transition: width 0.25s ease;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.planner-timeline-loading-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.planner-search-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin: 8px 0 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.planner-search-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 8px 4px;
  margin-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.planner-search-pagination .btn-page-nav {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.planner-search-pagination .btn-page-nav:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.planner-search-pagination .btn-page-nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.planner-page-indicator {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.list-sparkline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.list-sparkline-svg {
  width: 76px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}

.list-sparkline-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.list-sparkline-avg {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

.list-sparkline-hint {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .list-sparkline-row {
    gap: 12px;
  }

  .list-sparkline-svg {
    width: 155px;
    height: 28px;
  }
}

@media (min-width: 1200px) {
  .list-sparkline-svg {
    width: 180px;
    height: 30px;
  }
}

/* ==========================================================================
   H4 & H5: 관광지 과거 분석, 시계열 차트, 지역 맥락, 장소 비교 스타일
   ========================================================================== */

.detail-subtabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 16px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.detail-subtabs::-webkit-scrollbar {
  display: none;
}

.detail-subtab-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 22px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.detail-subtab-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.detail-subtab-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
}

.detail-subtab-btn .tab-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}

.detail-subtab-btn:not(.active) .tab-badge {
  background: #e2e8f0;
  color: #64748b;
}

.detail-tab-panel {
  display: none;
  animation: fadeIn 0.25s ease forwards;
}

.detail-tab-panel.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.history-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.history-card-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-card-title-row h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.history-card-subtitle {
  font-size: 12px;
  color: #64748b;
}

.history-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-csv-export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-csv-export:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.btn-detail-analysis-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #0284c7;
  border-radius: 8px;
  background: #f0f9ff;
  color: #0369a1;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-detail-analysis-link:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
  transform: translateY(-1px);
}

.history-filter-select {
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: #334155;
  font-weight: 600;
}

.history-chart-wrap {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 22px 14px 16px;
  margin-top: 12px;
  min-height: 220px;
  overflow: visible;
}

.chart-svg-container {
  position: relative;
  width: 100%;
}

.chart-svg-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-axis-label {
  font-size: 10px;
  fill: #64748b;
  font-weight: 600;
}

.chart-grid-line {
  stroke: #e2e8f0;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart-rank-path {
  fill: none;
  stroke: #0284c7;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-point {
  fill: #0284c7;
  stroke: #ffffff;
  stroke-width: 2.5;
  cursor: pointer;
  transition:
    r 0.15s ease,
    fill 0.15s ease;
}

.chart-point:hover,
.chart-point:focus {
  r: 7;
  fill: #0369a1;
  outline: none;
}

.chart-tooltip-box {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: translate(-50%, -100%);
  margin-top: -10px;
  transition: opacity 0.12s ease;
}

.chart-tooltip-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0f172a;
}

.chart-tooltip-box.tooltip-below {
  transform: translate(-50%, 0);
  margin-top: 12px;
}

.chart-tooltip-box.tooltip-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}

.badge-holiday {
  display: inline-block;
  background: #ffe4e6;
  color: #e11d48;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #fecdd3;
}

.badge-weekend {
  display: inline-block;
  background: #fff1f2;
  color: #f43f5e;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.badge-weekday {
  display: inline-block;
  background: #f0fdf4;
  color: #16a34a;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
}

.history-legend-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
  flex-wrap: wrap;
}

.history-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.history-table-toggle-btn {
  background: none;
  border: none;
  color: #0284c7;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.history-table-toggle-btn:hover {
  text-decoration: underline;
}

.history-data-table-wrap {
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow-x: auto;
  max-height: 240px;
}

.history-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.history-data-table th {
  background: #f1f5f9;
  padding: 8px 10px;
  font-weight: 700;
  color: #334155;
  border-bottom: 1px solid #cbd5e1;
  white-space: nowrap;
}

.history-data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
  white-space: nowrap;
}

.history-data-table tr:last-child td {
  border-bottom: none;
}

.history-meta-banner {
  background: #f0f9ff;
  border-left: 4px solid #0284c7;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: #0369a1;
  margin-bottom: 14px;
  line-height: 1.5;
}

.history-empty-state {
  text-align: center;
  padding: 32px 16px;
  color: #64748b;
  font-size: 13px;
}

.history-empty-state strong {
  display: block;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 6px;
}

/* ==========================================================================
   관광지 1:1 비교 분석 (Comparison) 모달 스타일
   ========================================================================== */

.compare-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
}

.compare-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 94vw, 920px);
  max-height: 90dvh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.compare-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.compare-modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

.compare-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
}

.compare-modal-close:hover {
  color: #0f172a;
}

.compare-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
}

.compare-date-selector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 6px;
}

.compare-date-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-date-label {
  font-size: 13px;
  font-weight: 700;
  color: #166534;
}

.compare-date-select {
  padding: 6px 12px;
  border: 1px solid #86efac;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #14532d;
  background: #ffffff;
  outline: none;
  cursor: pointer;
}

.compare-date-select:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.compare-date-hint {
  font-size: 12px;
  color: #15803d;
}

.compare-search-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.compare-col-search {
  position: relative;
}

.compare-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  padding: 4px 6px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.compare-input-wrap:focus-within {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.compare-col-tag {
  background: #0f172a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-right: 6px;
  white-space: nowrap;
}

.compare-tag-third {
  background: #475569;
}

.compare-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  padding: 6px 8px;
  color: #1e293b;
  min-width: 0;
}

.compare-search-btn {
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.compare-search-btn:hover {
  background: #0369a1;
}

.compare-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  margin-top: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-height: 260px;
  overflow-y: auto;
  z-index: 70;
}

.hero-search-results {
  margin-top: 8px;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
  z-index: 85;
}

.filter-search-results {
  margin-top: 4px;
  min-width: 280px;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  z-index: 85;
}

.compare-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease;
  user-select: none;
}

.compare-search-item:hover,
.compare-search-item:focus-visible {
  background: #f0f9ff;
  outline: none;
}

.compare-search-item img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: #e2e8f0;
}

.compare-search-item-info {
  flex: 1;
  min-width: 0;
}

.compare-search-item-title {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-search-item-meta {
  font-size: 11px;
  color: #64748b;
}

.realtime-search-all-btn {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
  border: none;
  border-bottom: 1px solid #bae6fd;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  user-select: none;
}

.realtime-search-all-btn:hover,
.realtime-search-all-btn:focus-visible {
  background: #e0f2fe;
  color: #0369a1;
  outline: none;
}

.search-all-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realtime-search-all-btn .search-icon {
  font-size: 13px;
}

.realtime-search-all-btn strong {
  color: #0284c7;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.search-all-hint {
  flex-shrink: 0;
}

.kbd-enter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  background: #ffffff;
  border: 1px solid #7dd3fc;
  border-bottom: 2px solid #38bdf8;
  border-radius: 4px;
  padding: 2px 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-item-detail-btn {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #0284c7;
  background: #ffffff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.search-item-detail-btn:hover,
.search-item-detail-btn:focus-visible {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  outline: none;
}

/* 실시간 검색 드롭다운 내 지역(자치구) 초록색 표시 */
.search-region-group {
  padding: 4px 6px;
  background: #fdfdfd;
  border-bottom: 1px solid #e2e8f0;
}

.search-region-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.search-region-header-icon {
  font-size: 12px;
}

.search-item-region {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 2px 0;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid #16a34a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.search-item-region:hover,
.search-item-region:focus-visible {
  background: #dcfce7;
  border-color: #4ade80;
  border-left-color: #15803d;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.18);
  transform: translateY(-1px);
  outline: none;
}

.search-item-region-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  background: #16a34a;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}

.search-item-region-info {
  flex: 1;
  min-width: 0;
}

.search-item-region-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
}

.search-item-region-name {
  font-weight: 700;
  color: #14532d;
}

.search-item-region-tag {
  font-size: 10px;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  padding: 1px 4px;
}

.search-item-region-sub {
  font-size: 11px;
  color: #166534;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-item-region-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: #ffffff;
  border: 1px solid #86efac;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.search-item-region:hover .search-item-region-action,
.search-item-region:focus-visible .search-item-region-action {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}

.search-item-region-arrow {
  font-size: 11px;
  transition: transform 0.15s ease;
}

.search-item-region:hover .search-item-region-arrow {
  transform: translateX(2px);
}

.search-places-empty-hint {
  padding: 8px 12px;
  font-size: 12px;
  color: #64748b;
  text-align: center;
  background: #fafafa;
  border-bottom: 1px solid #f1f5f9;
}

.compare-quick-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.quick-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
}

.quick-compare-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  color: #334155;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.quick-compare-chip:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
  color: #0369a1;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.compare-card-remove-btn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.compare-card-remove-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.compare-stat-missing {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.compare-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.compare-card-header-thumb {
  display: flex;
  gap: 12px;
  align-items: center;
}

.compare-thumb-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #e2e8f0;
  flex-shrink: 0;
}

.compare-card-title-group {
  flex: 1;
  min-width: 0;
}

.compare-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-meter-bar-wrap {
  background: #e2e8f0;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.compare-meter-bar {
  height: 100%;
  border-radius: 3px;
}

.compare-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed #e2e8f0;
}

.compare-stat-label {
  color: #64748b;
  font-weight: 600;
}

.compare-stat-val {
  font-weight: 700;
  color: #1e293b;
  text-align: right;
}

.btn-detail-compare {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.compare-modal-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: center;
}

.btn-compare-split {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.btn-compare-split:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.38);
}

.btn-compare-split:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  background: #94a3b8;
}

/* ==========================================================================
   좌측 상세 드로어 (1:1 동시 대조) & 듀얼 모드 스타일
   ========================================================================== */

.detail-drawer.detail-drawer-left {
  left: 0;
  right: auto;
  transform: translateX(-105%);
  border-left: none;
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 32px rgba(15, 23, 42, 0.16);
}

.detail-drawer.detail-drawer-left.open {
  transform: none;
  visibility: visible;
}

.detail-side-tag {
  position: absolute;
  z-index: 5;
  top: 15px;
  right: 145px;
  height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.detail-side-tag.left-tag {
  background: #0284c7;
  color: #ffffff;
}

.detail-side-tag.right-tag {
  background: #475569;
  color: #ffffff;
}

.detail-side-tag[hidden] {
  display: none !important;
}

/* 듀얼 드로어 모드: 좌(장소 A) & 우(장소 B) 50vw씩 분할 동시 표시 */
body.dual-detail-mode .detail-drawer {
  width: 50vw;
  max-width: 50vw;
  z-index: 60;
  transition:
    transform 0.28s var(--ease-out),
    width 0.2s ease;
}

body.dual-detail-mode .detail-drawer.detail-drawer-left {
  left: 0;
  right: auto;
  border-right: 2px solid #0284c7;
  box-shadow: 8px 0 24px rgba(2, 132, 199, 0.14);
}

body.dual-detail-mode #detail {
  right: 0;
  left: auto;
  border-left: 2px solid #64748b;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.14);
}

body.dual-detail-mode .drawer-scrim {
  z-index: 55;
  background: rgba(15, 23, 42, 0.55);
}

/* ==========================================================================
   모바일 반응형 보강 (320px ~ 680px)
   ========================================================================== */

@media (max-width: 680px) {
  .detail-subtabs {
    gap: 6px;
    padding: 10px 0 12px;
  }

  .detail-subtab-btn {
    min-height: 44px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .history-card {
    padding: 14px 12px;
  }

  .history-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .history-card-actions {
    justify-content: space-between;
  }

  .btn-csv-export {
    flex: 1;
    justify-content: center;
  }

  .history-chart-wrap {
    padding: 14px 8px;
    min-height: 180px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .chart-svg-container {
    min-width: 500px;
  }

  .btn-compare-split.mobile-disabled {
    opacity: 0.6;
    background: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
  }

  .compare-modal {
    width: 95vw;
    border-radius: 12px;
  }

  .compare-modal-header {
    padding: 14px 16px;
  }

  .compare-modal-body {
    padding: 14px 16px;
  }

  .compare-search-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  body.dual-detail-mode .detail-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  body.dual-detail-mode .detail-drawer.detail-drawer-left {
    z-index: 61;
  }

  .detail-side-tag {
    right: 110px;
    font-size: 11px;
    padding: 0 8px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ========================================================
   FLOATING QUICK NAVIGATION (Bottom-Left)
   ======================================================== */
.floating-quick-nav {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 12px;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.14),
    0 2px 6px rgba(15, 23, 42, 0.06);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.floating-quick-nav:hover {
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.2),
    0 3px 8px rgba(15, 23, 42, 0.08);
}

.floating-quick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.floating-quick-btn .btn-icon {
  font-size: 13px;
  line-height: 1;
}

.floating-quick-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.floating-quick-btn:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 1px;
}

#floating-btn-search:hover {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0284c7;
}

#floating-btn-map:hover {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a;
}

#floating-btn-reset {
  color: #64748b;
}

#floating-btn-reset:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

@media (max-width: 640px) {
  .floating-quick-nav {
    display: none !important;
  }
}

body.planner-mode .floating-quick-nav,
body[data-mode='planner'] .floating-quick-nav,
body.analysis-mode .floating-quick-nav,
body[data-mode='analysis'] .floating-quick-nav {
  display: none !important;
}

/* ==========================================================================
   지역별 · 요일별 방문자 수 분석 팝업 모달 & 지도 버튼
   ========================================================================== */

/* 메인화면 지도 바로 우측 아래 작은 분석 버튼 */
.btn-map-visitor-analysis {
  position: absolute;
  right: 12px;
  bottom: 28px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.btn-map-visitor-analysis:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
}

.btn-map-visitor-analysis:active {
  transform: scale(0.97);
}

.btn-map-visitor-analysis .btn-icon {
  font-size: 13px;
}

@media (max-width: 768px) {
  .btn-map-visitor-analysis {
    bottom: 34px;
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* ==========================================================================
   관광지·관광지역 과거 데이터 분석 전용 화면 (Historical Analysis Mode)
   홈페이지 라이트 테마 & 고대비 UI/UX 디자인 시스템 일체화
   ========================================================================== */

.analysis-mode-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  width: 100%;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.analysis-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #0284c7;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#analysis-header-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 6px 0;
  color: #0f172a;
}

.analysis-header p {
  font-size: 14px;
  color: #475569;
  margin: 0;
  line-height: 1.55;
}

.analysis-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.analysis-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.analysis-status-badge.partial {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.analysis-status-badge.not_collected {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* 컨트롤 바 */
.analysis-control-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.analysis-control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  letter-spacing: -0.01em;
}

.analysis-segmented-ctrl {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.ctrl-segment-btn {
  border: none;
  background: transparent;
  color: #64748b;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ctrl-segment-btn:hover {
  color: #0f172a;
}

.ctrl-segment-btn.active {
  background: #ffffff;
  color: #0284c7;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.analysis-select,
.analysis-input,
.analysis-date-input {
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.analysis-select:focus,
.analysis-input:focus,
.analysis-date-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.analysis-custom-range-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}

.analysis-place-input-box {
  position: relative;
  width: 100%;
}

.analysis-place-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  z-index: 100;
}

.place-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: #1e293b;
  transition: background 0.15s ease;
}

.place-dropdown-item:last-child {
  border-bottom: none;
}

.place-dropdown-item:hover,
.place-dropdown-item.focused,
.place-dropdown-item.highlighted {
  background: #f0f9ff;
  color: #0284c7;
}

.dropdown-place-title {
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-place-district {
  font-size: 11px;
  padding: 2px 7px;
  background: #e0f2fe;
  color: #0284c7;
  border-radius: 9999px;
  font-weight: 600;
}

/* Recent Selection Chips */
.analysis-recent-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  flex-wrap: wrap;
}

.recent-label {
  font-size: 12px;
  color: #475569;
  font-weight: 700;
}

.recent-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: all 0.15s ease;
}

.recent-chip:hover {
  border-color: #0284c7;
  background: #e0f2fe;
  color: #0284c7;
  transform: translateY(-1px);
}

.recent-chip.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

.analysis-notice-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #0f172a;
}

.analysis-place-card {
  width: 100%;
}

.place-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.place-card-name-wrap h3 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #0f172a;
  font-weight: 800;
}

.place-card-addr {
  font-size: 12px;
  color: #64748b;
}

.place-card-trend-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
}

.trend-box-title {
  font-size: 12px;
  font-weight: 700;
  color: #0284c7;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend-box-desc {
  font-size: 12.5px;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 8px;
}

.trend-sparkline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.trend-month-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
}

.trend-month-point strong {
  color: #0f172a;
  font-size: 13px;
}

.trend-month-point span {
  color: #64748b;
}

.place-card-cta-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.notice-icon {
  font-size: 20px;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  margin-top: 8px;
}

/* 종목 시세판형 요약 보드 */
.analysis-quote-board {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
}

.quote-main-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.quote-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-entity-tag {
  background: #0284c7;
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.quote-metric-tag {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
}

.quote-main-value {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.1;
  margin: 4px 0;
}

.quote-change-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  flex-wrap: wrap;
  color: #334155;
}

.quote-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quote-change-hint {
  font-size: 12px;
  color: #64748b;
  font-weight: normal;
}

/* 한국 주식형 등락 색상 (상승 빨강, 하락 파랑) */
.text-up {
  color: #dc2626 !important;
}

.text-down {
  color: #2563eb !important;
}

.text-neutral {
  color: #64748b !important;
}

.quote-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quote-stat-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.stat-label {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}

.stat-val {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

/* 차트 섹션 */
.analysis-chart-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

.analysis-chart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-toolbar-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.chart-toolbar-sub {
  font-size: 12.5px;
  color: #64748b;
  margin-left: 8px;
}

.chart-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-toggle {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-toggle:hover {
  color: #0f172a;
  background: #f1f5f9;
  border-color: #94a3b8;
}

.btn-toggle.active {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #0284c7;
  font-weight: 700;
}

.analysis-chart-viewport {
  position: relative;
  width: 100%;
  height: 340px;
  min-height: 280px;
}

.analysis-chart-svg-container {
  width: 100%;
  height: 100%;
}

.analysis-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  outline: none;
}

.chart-axis-label {
  font-size: 11px;
  fill: #64748b;
  user-select: none;
}

.chart-dot {
  cursor: pointer;
  transition: r 0.15s ease;
}

.chart-dot:hover {
  r: 6;
}

.analysis-chart-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  background: rgba(15, 23, 42, 0.95);
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transform: translate(0, -100%);
  white-space: nowrap;
}

.tooltip-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.badge-holiday {
  background: #dc2626;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.tooltip-val {
  font-size: 14px;
  font-weight: 800;
  color: #38bdf8;
}

.chart-overlay-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  gap: 10px;
  color: #475569;
}

/* 세부 탭 */
.analysis-tabs-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

.analysis-tablist {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 2px;
  overflow-x: auto;
}

.analysis-tab {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.analysis-tab:hover {
  color: #0f172a;
}

.analysis-tab.active {
  color: #0284c7;
  font-weight: 700;
}

.analysis-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #0284c7;
  border-radius: 2px;
}

.analysis-tabpanel[hidden] {
  display: none !important;
}

.analysis-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.analysis-table th {
  background: #f8fafc;
  padding: 12px 14px;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}

.analysis-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}

.analysis-table tr:hover td {
  background: #f0f9ff;
}

.compare-table tr.clickable-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.compare-table tr.clickable-row:hover td {
  background: #f0f9ff;
}

.compare-table tr.selected-row td {
  background: #e0f2fe !important;
  font-weight: 700;
  color: #0369a1;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.share-mini-bar {
  display: flex;
  height: 6px;
  width: 70px;
  border-radius: 3px;
  overflow: hidden;
  background: #10b981;
  margin-bottom: 2px;
}

.share-mini-bar .bar-outside {
  background: #f59e0b;
}

.share-mini-bar .bar-foreign {
  background: #8b5cf6;
}

.badge-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.weekday-mode-switch {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2px;
  margin-top: 6px;
}

.btn-weekday-mode {
  background: none;
  border: none;
  color: #64748b;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-weekday-mode.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.3);
}

.weekday-summary-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #0f172a;
}

.weekday-summary-icon {
  font-size: 18px;
}

.weekday-summary-text strong {
  color: #0284c7;
}

/* 100% 점유율 보기 */
.weekday-stacked-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weekday-stacked-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 140px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.weekday-stacked-row.weekend,
.weekday-stacked-row.weekend-row {
  border-color: #fca5a5;
  background: #fff5f5;
}

.stacked-day-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stacked-day-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.stacked-day-samples {
  font-size: 11px;
  color: #64748b;
}

.stacked-bar-container {
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background: #e2e8f0;
}

.stacked-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  transition: width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

.seg-local {
  background: #0284c7;
}

.seg-outside {
  background: #f59e0b;
}

.seg-foreign {
  background: #10b981;
}

.stacked-total-col {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stacked-total-val {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}

.stacked-total-sub {
  font-size: 11px;
  color: #64748b;
}

.stacked-legend-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #475569;
}

.stacked-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stacked-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* 요일 패턴 그리드 */
.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.weekday-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weekday-card.weekend {
  border-color: #fca5a5;
  background: #fff5f5;
}

.weekday-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #0f172a;
}

.weekday-samples {
  font-size: 11px;
  color: #64748b;
}

.weekday-bar-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.weekday-bar-fill {
  height: 100%;
  background: #0284c7;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.weekday-val-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.weekday-avg {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.badge-warning {
  font-size: 10px;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 1px 5px;
  border-radius: 4px;
}

.weekday-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* 25개 지역 비교 상단 툴바 */
.compare-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.compare-toolbar-title h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: #0f172a;
}

.compare-toolbar-title p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}

.compare-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #475569;
  font-weight: 600;
}

/* 설명/방법론 */
.methodology-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #334155;
}

.methodology-panel-inner h4 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 16px 0 6px 0;
  border-left: 3px solid #0284c7;
  padding-left: 10px;
}

.methodology-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 20px;
  margin: 0;
}

.methodology-dl dt {
  font-weight: 700;
  color: #475569;
}

.methodology-dl dd {
  margin: 0;
  color: #0f172a;
}

.methodology-cautions {
  margin: 10px 0 0;
  padding: 16px 20px 16px 36px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  color: #92400e;
}

.methodology-cautions li {
  margin-bottom: 8px;
}

.methodology-cautions strong {
  color: #78350f;
}

/* 푸터 액션 바 */
.analysis-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.analysis-footer-note {
  font-size: 12px;
  color: #64748b;
}

.analysis-footer-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 관광지 검색 자동완성 드롭다운 */
.analysis-place-input-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 240px;
}

.analysis-place-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 120;
  max-height: 280px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}

.place-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #f1f5f9;
}

.place-dropdown-item:last-child {
  border-bottom: none;
}

.place-dropdown-item:hover,
.place-dropdown-item.highlighted {
  background: #f0f9ff;
}

.place-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.place-item-title {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
}

.place-item-meta {
  font-size: 11px;
  color: #64748b;
}

.place-item-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0284c7;
  font-weight: 600;
  white-space: nowrap;
}

/* 관광지 상세 카드 & 안내 */
.analysis-place-card {
  margin: 16px 0;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.place-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.place-card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.place-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.place-district-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #0284c7;
  color: #ffffff;
}

.place-card-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.place-trend-summary {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 14px;
}

.place-trend-stat {
  display: flex;
  flex-direction: column;
}

.place-trend-stat span {
  font-size: 11px;
  color: #64748b;
}

.place-trend-stat strong {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.place-rank-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.place-rank-step {
  padding: 6px 12px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  text-align: center;
}

.place-rank-step .step-m {
  font-size: 10px;
  color: #64748b;
  display: block;
}

.place-rank-step .step-v {
  font-size: 14px;
  font-weight: 700;
  color: #0284c7;
  display: block;
}

.place-disclaimer {
  margin: 12px 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
}

.place-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background: #0284c7;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}

.place-cta-btn:hover {
  background: #0369a1;
}

/* 반응형 모바일 */
@media (max-width: 960px) {
  .analysis-quote-board {
    grid-template-columns: 1fr;
  }

  .quote-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .weekday-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .methodology-dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .methodology-dl dt {
    margin-top: 8px;
  }
}

@media (max-width: 640px) {
  .analysis-mode-view {
    padding: 16px 12px 60px;
    gap: 16px;
  }

  #analysis-header-title {
    font-size: 20px;
  }

  .quote-main-value {
    font-size: 28px;
  }

  .quote-stats-grid {
    grid-template-columns: 1fr;
  }

  .weekday-grid {
    grid-template-columns: 1fr;
  }

  .analysis-chart-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .analysis-mode-view *,
  .analysis-mode-view *::before,
  .analysis-mode-view *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ========================================================
   AUTHENTICATION & PERSONALIZATION STYLES (Component 6)
   ======================================================== */

.auth-nav-cluster {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.auth-guest-view {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-auth-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.15s ease;
}

.btn-auth-nav:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-auth-primary {
  background: var(--blue, #38bdf8);
  color: #082f49;
  border-color: transparent;
  font-weight: 750;
}

.btn-auth-primary:hover {
  background: #7dd3fc;
  color: #031c2e;
}

.user-dropdown-wrapper {
  position: relative;
}

.user-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-badge-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
}

.user-avatar-icon {
  font-size: 14px;
}

.user-display-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-arrow {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.user-badge-btn[aria-expanded='true'] .dropdown-arrow {
  transform: rotate(180deg);
}

.user-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 220px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  padding: 8px 0;
  z-index: 1000;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-dropdown-header {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
}

.user-dropdown-header strong {
  color: #38bdf8;
  font-size: 13px;
}

.dropdown-email {
  color: #94a3b8;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 0;
}

.dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.dropdown-item.text-danger {
  color: #fb7185;
}

.dropdown-item.text-danger:hover {
  background: rgba(244, 63, 94, 0.1);
  color: #fda4af;
}

/* Modal Backdrop & Dialog */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 0.2s ease-out;
}

.auth-modal-backdrop[hidden] {
  display: none !important;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.auth-modal-dialog {
  background: #ffffff;
  color: #1e293b;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-wide {
  max-width: 580px;
}

@keyframes modalScaleUp {
  from {
    transform: scale(0.96) translateY(8px);
  }

  to {
    transform: scale(1) translateY(0);
  }
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.auth-modal-header h2 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: #0f172a;
}

.btn-close-modal {
  background: transparent;
  border: 0;
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.12s ease;
}

.btn-close-modal:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.auth-modal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.auth-modal-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 16px;
  line-height: 1.5;
}

.auth-error-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.form-input:focus {
  border-color: #0284c7;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}

.input-with-action {
  display: flex;
  gap: 8px;
}

.input-with-action .form-input {
  flex: 1;
}

.label-with-timer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.field-timer {
  font-size: 12px;
  font-weight: 700;
  color: #0284c7;
}

.field-timer.text-danger {
  color: #dc2626;
}

.field-status {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  min-height: 16px;
}

.field-status.success {
  color: #059669;
}

.field-status.error {
  color: #dc2626;
}

.field-policy-hint {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.field-policy-hint.success {
  color: #059669;
  font-weight: 700;
}

.field-policy-hint.error {
  color: #dc2626;
}

.field-dev-hint {
  font-size: 12px;
  color: #1e293b;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
  line-height: 1.45;
}

.field-dev-hint a {
  color: var(--blue, #0071e3);
  font-weight: 700;
  text-decoration: underline;
}

.agreements-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
}

.checkbox-row input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.login-remember-row {
  width: fit-content;
  margin: 2px 0 16px;
}

.btn-text-link {
  background: transparent;
  border: 0;
  color: #0284c7;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  text-decoration: underline;
}

.btn-text-link:hover {
  color: #0369a1;
}

.btn-text-link:disabled,
.btn-text-link.disabled {
  color: #94a3b8;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}

.feature-disabled-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
}

.disabled-reason-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #dc2626;
  letter-spacing: -0.2px;
}

.auth-submit-btn {
  width: 100%;
  height: 42px;
  font-size: 15px;
  font-weight: 750;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
}

.auth-modal-footer-nav {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
}

.auth-link {
  color: #64748b;
  font-size: 12px;
  text-decoration: underline;
}

.auth-link:hover {
  color: #0f172a;
}

.auth-link-bold {
  color: #0284c7;
  font-weight: 750;
  text-decoration: underline;
}

.auth-link-bold:hover {
  color: #0369a1;
}

.form-actions-inline {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* Account Modal Tabs */
.account-nav-tabs {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 20px;
  gap: 4px;
  overflow-x: auto;
}

.account-tab-btn {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.account-tab-btn:hover {
  color: #0f172a;
}

.account-tab-btn.active {
  color: #0284c7;
  border-bottom-color: #0284c7;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #f8fafc;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  margin-bottom: 18px;
}

.profile-meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.meta-val {
  font-size: 14px;
  color: #0f172a;
  margin-top: 2px;
}

.account-subform {
  display: flex;
  flex-direction: column;
}

.recent-logins-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-session-item {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
}

.session-time {
  font-weight: 700;
  color: #0f172a;
}

.session-ip {
  color: #0284c7;
  margin-top: 2px;
}

.session-device {
  color: #64748b;
  margin-top: 2px;
  font-size: 11px;
}

.withdraw-warning-box {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
}

.withdraw-warning-box h4 {
  margin: 0 0 8px;
  color: #be123c;
  font-size: 14px;
}

.withdraw-warning-box p {
  margin: 0;
  font-size: 12px;
  color: #4c0519;
  line-height: 1.5;
}

.sync-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.sync-actions-row button {
  flex: 1;
}

.legal-text-scroll {
  max-height: 420px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.65;
  color: #334155;
  padding-right: 8px;
}

.legal-text-scroll h3 {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 16px 0 6px;
}

.legal-text-scroll p {
  margin: 0 0 10px;
}

/* ========================================================
   UNIFIED AUTH BUTTON DESIGN TOKENS (Homepage Match)
   ======================================================== */

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #ffffff;
  color: var(--navy, #0f172a);
  border: 1px solid #cbd5e1;
  outline: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-secondary:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-secondary:active:not(:disabled) {
  background: #e2e8f0;
  border-color: #64748b;
}

.btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
  outline: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-danger:hover:not(:disabled) {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #9f1239;
}

.btn-danger:active:not(:disabled) {
  background: #fecdd3;
  color: #881337;
}

.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.input-with-action button {
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.auth-submit-btn {
  width: 100%;
  height: 42px;
  font-size: 14px;
  font-weight: 750;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 14px;
  background: var(--blue, #38bdf8);
  color: #082f49;
  border: 1px solid #38bdf8;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-submit-btn:hover:not(:disabled) {
  background: #7dd3fc;
  border-color: #7dd3fc;
  color: #0369a1;
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.35);
}

.auth-submit-btn:active:not(:disabled) {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

/* ========================================================
   STANDALONE AUTH PAGES (Signup / Login / Account)
   ======================================================== */

.auth-standalone-body {
  min-height: 100vh;
  margin: 0;
  background: #0f172a;
  color: var(--text, #334155);
  font-family: Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.auth-standalone-header {
  height: 62px;
  background: rgba(15, 23, 42, 0.97);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
}

.auth-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-back-link {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.15s ease;
}

.auth-back-link:hover {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.35);
}

.auth-standalone-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 60px;
  background: radial-gradient(circle at 50% 20%, #1e293b 0%, #0f172a 100%);
}

.auth-standalone-container {
  width: 100%;
  margin: 0 auto;
}

.auth-container-wide {
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: start;
}

.auth-container-narrow {
  max-width: 440px;
}

.auth-container-settings {
  max-width: 800px;
}

/* Benefit Sidebar Card */
.auth-benefit-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 36px 30px;
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.benefit-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #38bdf8;
  margin-bottom: 12px;
}

.benefit-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  color: #ffffff;
  margin: 0 0 14px;
}

.benefit-desc {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 28px;
}

.benefit-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.benefit-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.benefit-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.benefit-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 750;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.benefit-text p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}

/* Form Card & Settings Card */
.auth-form-card,
.settings-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 34px 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.auth-card-header h1,
.auth-card-header h2,
.settings-card-header h1 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}

.auth-card-header p,
.settings-card-header p {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 20px;
}

.auth-card-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
}

.required-star {
  color: #e11d48;
}

.auth-success-alert {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.pane-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}

.section-hint {
  font-size: 12.5px;
  color: #64748b;
  margin: 0 0 16px;
  line-height: 1.5;
}

.divider-line {
  height: 1px;
  background: #e2e8f0;
  margin: 24px 0;
}

.data-export-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px;
}

/* Responsive */
@media (max-width: 900px) {
  .auth-container-wide {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .auth-benefit-card {
    display: none;
  }

  .auth-form-card,
  .settings-card {
    padding: 24px 20px;
  }
}

/* Main header navigation */
.main-menu-header .header-inner {
  gap: 20px;
}

.main-menu-header nav {
  gap: 4px;
  flex-wrap: nowrap;
}

.main-menu-header .nav-mode-btn,
.main-menu-header .lab-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.main-menu-header .nav-mode-btn:hover,
.main-menu-header .lab-link:hover {
  background: rgba(148, 163, 184, 0.12);
  color: #fff;
}

.main-menu-header .nav-mode-btn.active {
  background: #38bdf8;
  color: #082f49;
}

.main-menu-header :is(button, a):focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 3px;
}

.main-menu-header .nav-personal-cluster {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid rgba(148, 163, 184, 0.25);
}

.main-menu-header .nav-personal-label {
  margin-right: 4px;
  color: #94a3b8;
  font-size: 11px;
  white-space: nowrap;
}

.main-menu-header .nav-personal-login-hint {
  margin-right: 2px;
  padding: 2px 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
}

.main-menu-header .nav-personal-sync-hint {
  margin-right: 2px;
  color: #7dd3fc;
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
  animation: personal-sync-pulse 1.1s ease-in-out infinite;
}

.main-menu-header .nav-mode-btn .badge.is-syncing {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22);
}

@keyframes personal-sync-pulse {
  50% {
    opacity: 0.45;
  }
}

.main-menu-header .nav-personal-cluster.is-disabled .nav-personal-btn {
  cursor: not-allowed;
  opacity: 0.5;
}

.main-menu-header .nav-personal-cluster.is-disabled .nav-personal-btn:hover,
.main-menu-header .nav-personal-cluster.is-disabled .nav-personal-btn.active {
  background: transparent;
  color: #cbd5e1;
}

.main-menu-header .nav-mode-btn .badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.main-menu-header .nav-active-plan-name {
  max-width: 220px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7dd3fc;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.main-menu-header .nav-active-plan-name:hover {
  text-decoration: underline;
}

.main-menu-header .nav-active-plan-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 9px;
  background: #ffffff;
  color: #171e31;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.main-menu-header .nav-mode-btn.active .badge {
  background: rgba(8, 47, 73, 0.16);
  color: #082f49;
}

.main-menu-header .lab-link {
  margin-left: 12px;
  color: #94a3b8;
  font-weight: 400;
}

.main-menu-header .user-badge-btn {
  height: 36px;
  border-color: rgba(148, 163, 184, 0.25);
  border-radius: 6px;
}

@media (max-width: 1000px) {
  .main-menu-header {
    height: auto;
  }

  .main-menu-header .header-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 8px;
  }

  .main-menu-header nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px;
  }

  .main-menu-header .auth-nav-cluster {
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  .main-menu-header nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .main-menu-header .nav-mode-btn {
    padding-inline: 8px;
    font-size: 12px;
  }

  .main-menu-header .nav-personal-cluster {
    grid-column: 1 / -1;
    justify-content: center;
    margin: 4px 0 0;
    padding: 6px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
  }
}

/* Subpage Top Bar & Back Button */
.auth-standalone-main {
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.subpage-top-bar {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto 16px;
  display: flex;
  justify-content: flex-start;
}

.btn-subpage-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.btn-subpage-back:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateX(-2px);
}

/* Sync Modal In-Dialog Result Styling */
.sync-modal-result-card {
  margin: 16px 0;
  padding: 16px 18px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  color: #065f46;
  text-align: left;
}

.sync-modal-result-card h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 700;
  color: #047857;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sync-modal-result-card p {
  margin: 0;
  font-size: 13px;
  color: #0f766e;
  line-height: 1.5;
}

/* ==========================================================================
   Trip Planner Upgrade (2026-09-17)
   ========================================================================== */
.planner-plan-selector-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

/* Planner Plan Header Info & Switcher (Clean Light Theme) */
#planner-mode-view .btn-plan-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

#planner-mode-view .btn-plan-switcher:hover {
  background: #f8fafc;
  border-color: #2563eb;
}

#planner-mode-view .planner-active-plan-period {
  display: inline-block;
  font-size: 12px;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-weight: 600;
}

#planner-mode-view .planner-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  transition: all 0.2s;
}

#planner-mode-view .planner-status-pill.saved {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

#planner-mode-view .planner-status-pill.saving {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

#planner-mode-view .planner-status-pill.dirty {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

#planner-mode-view .planner-status-pill.error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

#planner-mode-view .planner-status-pill.conflict {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #fed7aa;
}

#planner-mode-view .status-dot-spin {
  width: 8px;
  height: 8px;
  border: 2px solid #2563eb;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* Multi-day Date Tabs in Schedule Panel (Light Theme) */
#planner-mode-view .planner-date-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

#planner-mode-view .planner-date-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

#planner-mode-view .planner-date-tab:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

#planner-mode-view .planner-date-tab.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

#planner-mode-view .planner-date-tab .tab-count {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
}

#planner-mode-view .planner-date-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.25);
}

/* Plan Card Multi-day & Scheduling Controls (Clean Light Card) */
#planner-mode-view .plan-card {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

#planner-mode-view .plan-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

#planner-mode-view .plan-card.has-overlap {
  border-color: #f59e0b;
  background: #fffbeb;
}

#planner-mode-view .plan-card-left {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

#planner-mode-view .plan-card-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

#planner-mode-view .plan-card-main {
  flex: 1;
  min-width: 0;
}

#planner-mode-view .plan-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

#planner-mode-view .plan-card-title {
  font-size: 14.5px;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

#planner-mode-view .plan-card-title:hover {
  color: #2563eb;
}

#planner-mode-view .btn-item-remove {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}

#planner-mode-view .btn-item-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

#planner-mode-view .plan-card-sub {
  font-size: 12px;
  color: #64748b;
  margin: 3px 0 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Today Badge & Crowd Chips */
#planner-mode-view .badge-today {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
}

#planner-mode-view .crowd-chip {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

#planner-mode-view .crowd-chip.relaxed {
  background: #e0f2fe;
  color: #0284c7;
}

#planner-mode-view .crowd-chip.moderate {
  background: #ecfdf5;
  color: #059669;
}

#planner-mode-view .crowd-chip.crowded {
  background: #fef2f2;
  color: #dc2626;
}

/* Plan Card Schedule Form Controls */
#planner-mode-view .plan-card-schedule-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

#planner-mode-view .schedule-input-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#planner-mode-view .schedule-input-group label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

#planner-mode-view .item-date-select,
#planner-mode-view .item-time-input,
#planner-mode-view .item-duration-select {
  width: 100%;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #0f172a;
  font-size: 12px;
  box-sizing: border-box;
}

#planner-mode-view .item-date-select:focus,
#planner-mode-view .item-time-input:focus,
#planner-mode-view .item-duration-select:focus {
  border-color: #2563eb;
  outline: none;
}

#planner-mode-view .schedule-overlap-warning {
  padding: 6px 10px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  color: #b45309;
  font-size: 11.5px;
  margin-bottom: 8px;
  line-height: 1.4;
  font-weight: 600;
}

#planner-mode-view .plan-card-memo-row {
  width: 100%;
}

#planner-mode-view .item-memo-input {
  width: 100%;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #0f172a;
  font-size: 12px;
  box-sizing: border-box;
}

#planner-mode-view .item-memo-input:focus {
  border-color: #2563eb;
  outline: none;
}

#planner-mode-view .plan-card-reorder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

#planner-mode-view .plan-card-reorder button {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

#planner-mode-view .plan-card-reorder button:hover:not(:disabled) {
  background: #e2e8f0;
  color: #0f172a;
}

#planner-mode-view .plan-card-reorder button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Tab 4: Result Panel Timeline & Memos */
.result-top-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}

.result-badge {
  font-size: 11px;
  font-weight: 800;
  color: #059669;
  background: #ecfdf5;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
}

.result-desc {
  font-size: 12px;
  color: #475569;
  margin: 4px 0 0;
}

.planner-result-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-timeline-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}

.result-timeline-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.result-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-item-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.result-item-name {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.result-item-date-badge {
  font-size: 11px;
  color: #0284c7;
  background: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.result-item-meta {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}

.result-memo-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.result-memo-text {
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
  word-break: break-all;
}

.result-memo-text.empty {
  color: #94a3b8;
  font-style: italic;
}

.btn-open-memo-modal {
  padding: 4px 8px;
  font-size: 11.5px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #2563eb;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-open-memo-modal:hover {
  background: #eff6ff;
  border-color: #2563eb;
}

/* Place Memo Modal Specifics */
#place-memo-modal .memo-modal-target-place {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}

#place-memo-modal .memo-modal-subtitle {
  font-size: 12.5px;
  color: #64748b;
  margin: 0 0 14px;
}

#place-memo-modal .memo-char-count {
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
  margin-top: 4px;
}

/* Summary Cards Section below 30-Day Forecast Timeline (Light Theme) */
.planner-summary-cards-section {
  max-width: 1600px;
  margin: 32px auto 60px;
  padding: 0 24px;
}

.planner-cards-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.planner-cards-header h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.planner-cards-header .cards-count {
  font-size: 13px;
  color: #64748b;
}

.planner-cards-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 18px;
}

.planner-summary-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.planner-summary-card:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.card-top-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
}

.card-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.card-main-meta {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
  line-height: 1.3;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.tag-badge.category {
  background: #e0f2fe;
  color: #0284c7;
}

.tag-badge.district {
  background: #f1f5f9;
  color: #475569;
}

.tag-badge.date {
  background: #ecfdf5;
  color: #059669;
}

.tag-badge.unassigned {
  background: #f1f5f9;
  color: #94a3b8;
}

.card-forecast-badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

.card-forecast-badge.crowd-status-relaxed {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.card-forecast-badge.crowd-status-normal {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.card-forecast-badge.crowd-status-busy {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.card-forecast-badge.crowd-status-crowded {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.card-forecast-badge.crowd-status-unknown {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.card-content-grid {
  display: flex;
  gap: 14px;
}

.card-media-col {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
}

.card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
  background: #f1f5f9;
}

.card-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-info-item {
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.info-label {
  color: #64748b;
  font-weight: 600;
  flex-shrink: 0;
}

.info-value {
  color: #0f172a;
}

.btn-copy-address {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
}

.btn-copy-address:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #2563eb;
}

.btn-copy-address.copied {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

.card-link {
  color: #2563eb;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

.card-personal-schedule {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 4px 0;
}

.schedule-pill-row {
  display: flex;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
}

.schedule-pill.time {
  color: #0284c7;
}

.schedule-pill.duration {
  color: #059669;
}

.card-memo-box {
  margin-top: 4px;
  font-size: 12px;
  color: #0f172a;
}

.card-memo-box .memo-label {
  color: #64748b;
  font-size: 11px;
}

.card-memo-box .memo-content {
  margin: 2px 0 0;
  color: #1e293b;
  white-space: pre-wrap;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 4px;
}

.card-intro-wrap {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}

.card-intro-text.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-toggle-intro {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
}

/* Modals: Plan List & Favorites Import (Clean Light Theme) */
.plan-modal-actions-bar {
  margin-bottom: 16px;
}

.plan-modal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
}

.plan-list-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.plan-list-item-card:hover {
  background: #f8fafc;
  border-color: #2563eb;
}

.plan-list-item-card.active {
  border-color: #2563eb;
  background: #eff6ff;
}

.plan-card-name {
  font-size: 15px;
  color: #0f172a;
  font-weight: 700;
}

.badge-active-plan {
  background: #2563eb;
  color: #ffffff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

.plan-card-meta-row {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.revision-badge {
  background: #f1f5f9;
  color: #475569;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid #e2e8f0;
}

/* Fav Import Modal (Clean Light Theme) */
.fav-import-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.fav-import-controls input,
.fav-import-controls select {
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #0f172a;
  font-size: 13px;
}

.fav-import-controls input:focus,
.fav-import-controls select:focus {
  border-color: #2563eb;
  outline: none;
}

.fav-import-selection-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #334155;
}

.fav-import-quick-btns {
  display: flex;
  gap: 6px;
}

.fav-import-list {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fav-import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fav-import-row:hover {
  background: #f8fafc;
  border-color: #2563eb;
}

.fav-import-row.already-added {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8fafc;
}

.fav-item-title {
  font-size: 14px;
  color: #0f172a;
  font-weight: 700;
}

.fav-item-sub {
  font-size: 12px;
  color: #64748b;
  display: block;
}

.fav-import-footer {
  margin-top: 16px;
}

/* Responsive adjustment for Google Travel Layout */
@media (max-width: 1080px) {
  .planner-body {
    grid-template-columns: 1fr;
    height: auto;
  }

  .planner-sidebar {
    height: 600px;
  }

  .planner-map-container {
    height: 500px;
  }
}

/* ==========================================================================
   Comprehensive @media print Styling for A4 PDF Output
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 10mm 15mm 10mm;
  }

  /* Hide everything on the page except the printable sheet */
  body * {
    visibility: hidden;
  }

  #print-sheet,
  #print-sheet * {
    visibility: visible;
  }

  #print-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    background: #ffffff !important;
    color: #1e293b !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family:
      -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 11pt;
    line-height: 1.4;
  }

  .print-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2pt solid #0f172a;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  .print-service-title {
    font-size: 18pt;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
  }

  .print-service-sub {
    font-size: 9pt;
    color: #64748b;
  }

  .print-meta-box {
    text-align: right;
    font-size: 8.5pt;
    color: #475569;
  }

  .print-dirty-warn {
    color: #b45309;
    font-weight: 700;
  }

  .print-plan-title-block {
    margin-bottom: 16px;
  }

  .print-main-title {
    font-size: 16pt;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
  }

  .print-plan-notes {
    font-size: 10pt;
    color: #334155;
    background: #f8fafc;
    border-left: 3pt solid #0284c7;
    padding: 6px 10px;
    margin: 6px 0;
  }

  .print-section {
    margin-bottom: 18px;
  }

  .print-section-title {
    font-size: 12pt;
    font-weight: 800;
    color: #0f172a;
    border-bottom: 1pt solid #cbd5e1;
    padding-bottom: 4px;
    margin: 0 0 10px;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8.5pt;
    margin-bottom: 14px;
  }

  .print-table th,
  .print-table td {
    border: 0.5pt solid #cbd5e1;
    padding: 6px 8px;
    vertical-align: middle;
  }

  .print-table th {
    background: #f1f5f9;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
  }

  .print-table thead {
    display: table-header-group;
  }

  .print-table tr {
    page-break-inside: avoid;
  }

  .print-step-col {
    width: 32px;
    text-align: center;
    font-weight: 800;
  }

  .print-date-col {
    width: 75px;
    text-align: center;
  }

  .print-memo-col {
    max-width: 160px;
    word-break: break-all;
  }

  .print-timeline-img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border: 0.5pt solid #cbd5e1;
    margin-top: 6px;
  }

  .print-golden-day-notice {
    font-size: 9.5pt;
    color: #047857;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .print-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .print-card {
    border: 0.5pt solid #cbd5e1;
    border-radius: 4px;
    padding: 8px 10px;
    page-break-inside: avoid;
    font-size: 8pt;
    background: #ffffff;
  }

  .print-card-header {
    border-bottom: 0.5pt solid #e2e8f0;
    padding-bottom: 4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .print-card-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #0f172a;
    color: #ffffff;
    font-size: 8pt;
    font-weight: 800;
    border-radius: 50%;
  }

  .print-card-title {
    font-size: 9.5pt;
    color: #0f172a;
  }

  .print-card-category {
    color: #64748b;
    font-size: 7.5pt;
  }

  .print-card-date {
    margin-left: auto;
    font-weight: 700;
    color: #0284c7;
  }

  .print-card-line {
    margin-bottom: 3px;
    color: #334155;
  }

  .print-card-personal {
    background: #f8fafc;
    border-left: 2pt solid #0284c7;
    padding: 3px 6px;
    margin: 4px 0;
    color: #0f172a;
  }

  .print-card-intro {
    color: #64748b;
    margin: 4px 0 0;
    font-style: italic;
  }

  .print-footer {
    border-top: 1pt solid #cbd5e1;
    padding-top: 8px;
    margin-top: 20px;
    font-size: 7.5pt;
    color: #64748b;
    text-align: center;
  }
}

/* Golden Day Briefing Box in Planner Sidebar (Light Theme & Scoped) */
#planner-mode-view .planner-golden-briefing-box {
  background: #ffffff;
  border: 1px solid #10b981;
  border-left: 4px solid #10b981;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0 14px 0;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08);
}

#planner-mode-view .planner-golden-briefing-box.realigned {
  border-color: #0284c7;
  border-left-color: #0284c7;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);
}

#planner-mode-view .planner-golden-briefing-box.kept {
  border-color: #f59e0b;
  border-left-color: #f59e0b;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}

#planner-mode-view .briefing-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#planner-mode-view .briefing-box-badge {
  font-size: 12px;
  font-weight: 700;
  color: #065f46;
  display: flex;
  align-items: center;
  gap: 4px;
}

#planner-mode-view .planner-golden-briefing-box.realigned .briefing-box-badge {
  color: #0369a1;
}

#planner-mode-view .planner-golden-briefing-box.kept .briefing-box-badge {
  color: #b45309;
}

#planner-mode-view .briefing-box-score {
  font-size: 11.5px;
  font-weight: 700;
  color: #047857;
  background: #d1fae5;
  padding: 2px 7px;
  border-radius: 12px;
}

#planner-mode-view .planner-golden-briefing-box.realigned .briefing-box-score {
  color: #0284c7;
  background: #e0f2fe;
}

#planner-mode-view .planner-golden-briefing-box.kept .briefing-box-score {
  color: #d97706;
  background: #fef3c7;
}

#planner-mode-view .briefing-box-message {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #1e293b;
}

#planner-mode-view .briefing-box-message strong {
  color: #0f172a;
  font-weight: 700;
}

/* Plan List Modal Items & Actions (Light Theme & Scoped) */
#plan-list-modal .plan-list-item-card,
#panel-plans .plan-list-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

#plan-list-modal .plan-list-item-card:hover,
#panel-plans .plan-list-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

#plan-list-modal .plan-list-item-card.active,
#panel-plans .plan-list-item-card.active {
  border-color: #0284c7;
  background: #f0f9ff;
}

#plan-list-modal .plan-card-info,
#panel-plans .plan-card-info {
  flex: 1;
  cursor: pointer;
}

#plan-list-modal .plan-card-title-row,
#panel-plans .plan-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

#plan-list-modal .plan-card-name,
#panel-plans .plan-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

#plan-list-modal .badge-active-plan,
#panel-plans .badge-active-plan {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  background: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
}

#plan-list-modal .plan-card-meta-row,
#panel-plans .plan-card-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #64748b;
}

#plan-list-modal .plan-card-action-btns,
#panel-plans .plan-card-action-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

#plan-list-modal .btn-select-plan,
#panel-plans .btn-select-plan {
  min-width: 78px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

#plan-list-modal .btn-delete-plan,
#panel-plans .btn-delete-plan {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
  background: #ffffff;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

#plan-list-modal .btn-delete-plan:hover,
#panel-plans .btn-delete-plan:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
}

.plan-inline-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}

#panel-plans .plan-check {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #0284c7;
  cursor: pointer;
}

.planner-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.planner-header-side .btn-outline {
  white-space: nowrap;
}

.places-clear-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

.panel-section-desc {
  margin: 0 0 10px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

#planner-meta-input-notes.sidebar-textarea-large {
  min-height: 140px;
  resize: vertical;
}

.planner-calendar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}

.planner-calendar .cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.planner-calendar .cal-title {
  font-size: 14px;
  color: #0f172a;
}

.planner-calendar .cal-nav {
  width: 28px;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.planner-calendar .cal-nav:hover {
  background: #e2e8f0;
}

.planner-calendar .cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
}

.planner-calendar .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.planner-calendar .cal-day {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
}

.planner-calendar button.cal-day:hover {
  background: #f1f5f9;
}

.planner-calendar .cal-blank {
  cursor: default;
}

.planner-calendar .cal-sun {
  color: #ef4444;
}

.planner-calendar .cal-sat {
  color: #2563eb;
}

.planner-calendar .cal-today {
  font-weight: 800;
}

.planner-calendar .cal-today:not(.cal-range-start):not(.cal-range-end):not(.cal-in-range) {
  outline: 1.5px solid #94a3b8;
  outline-offset: -1px;
}

.planner-calendar .cal-in-range {
  background: #e0f2fe;
  border-radius: 0;
}

.planner-calendar .cal-range-start {
  background: #0284c7;
  color: #ffffff;
  font-weight: 800;
  border-radius: 6px 0 0 6px;
}

.planner-calendar .cal-range-end {
  background: #0284c7;
  color: #ffffff;
  font-weight: 800;
  border-radius: 0 6px 6px 0;
}

.planner-calendar .cal-range-start.cal-range-end {
  border-radius: 6px;
}

.planner-calendar .cal-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.planner-calendar .cal-range-label {
  margin-top: 0;
  font-size: 12px;
  font-weight: 700;
  color: #0284c7;
  text-align: left;
  flex: 1;
}

.planner-calendar .cal-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  white-space: nowrap;
}

.planner-calendar .cal-reset-btn:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: translateY(-1px);
}

.planner-calendar .cal-reset-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.planner-calendar .cal-reset-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}