/**
 * city-features.css — 신규 기능 컴포넌트 공유 스타일
 * companion filter · overlay toggles · planner modal · attraction markers · bubble banners
 */

/* ── COMPANION GRID ── */
.comp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px }
.comp-btn {
  background:var(--raised); border:1.5px solid transparent;
  border-radius:var(--r-md); padding:8px 4px 6px;
  cursor:pointer; text-align:center; font-family:var(--font);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:all 160ms;
}
.comp-btn .comp-emoji { font-size:1.2rem; line-height:1 }
.comp-btn .comp-label { font-size:.58rem; font-weight:700; color:var(--text2) }
.comp-btn:hover { border-color:var(--border2) }
.comp-btn.active {
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}
.comp-btn.active .comp-label { color:var(--accent) }

/* ── OVERLAY TOGGLES ── */
.ovl-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px }
.ovl-btn {
  background:var(--raised); border:1.5px solid transparent;
  border-radius:var(--r-md); padding:7px 8px;
  cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; gap:5px;
  font-size:.62rem; font-weight:700; color:var(--text2);
  transition:all 160ms; white-space:nowrap;
}
.ovl-btn:hover { border-color:var(--border2); color:var(--text) }
.ovl-btn.active {
  border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}
.ovl-pip {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--text3); transition:background 160ms;
}
.ovl-btn.active .ovl-pip { background:var(--accent) }

/* ── PLANNER HEADER BUTTON ── */
.planner-btn {
  display:inline-flex; align-items:center; gap:5px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1.5px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius:var(--r-md); padding:5px 11px;
  font-size:.72rem; font-weight:700; font-family:var(--font);
  color:color-mix(in srgb, var(--accent) 88%, #fff);
  cursor:pointer; transition:all 140ms; white-space:nowrap;
}
.planner-btn:hover {
  background:color-mix(in srgb, var(--accent) 24%, transparent);
  transform:translateY(-1px);
}
.planner-btn .material-symbols-outlined { font-size:14px }

/* ── PLANNER OVERLAY / PANEL ── */
.planner-overlay {
  position:fixed; inset:0; top:58px;
  background:transparent; z-index:9000;
  display:flex; align-items:stretch; justify-content:flex-end;
  opacity:0; pointer-events:none;
  transition:opacity 200ms;
}
.planner-overlay.open { opacity:1; pointer-events:none }

.planner-panel {
  width:360px; max-width:100vw;
  background:var(--panel); border-left:1px solid var(--border2);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%);
  transition:transform 240ms cubic-bezier(.25,.8,.25,1);
  pointer-events:auto;
}
.planner-overlay.open .planner-panel { transform:translateX(0) }

.pn-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.pn-head-title {
  font-size:.88rem; font-weight:800; color:var(--text);
  display:flex; align-items:center; gap:7px;
}
.pn-close {
  width:28px; height:28px; border-radius:8px;
  border:1px solid var(--border2); background:var(--raised);
  color:var(--text2); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); transition:all 140ms;
}
.pn-close:hover { color:var(--text); background:var(--overlay) }

.pn-body { flex:1; overflow-y:auto; padding:14px 16px 20px }
.pn-section { margin-bottom:18px }
.pn-sec-label {
  font-size:.63rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text3); margin-bottom:9px;
  display:flex; align-items:center; gap:7px;
}
.pn-sec-label::after { content:''; flex:1; height:1px; background:var(--border) }

/* Nights stepper */
.nights-row { display:flex; align-items:center; gap:10px }
.nights-stepper {
  display:flex; align-items:stretch;
  background:var(--raised); border:1px solid var(--border2);
  border-radius:var(--r-md); overflow:hidden;
}
.ns-btn {
  width:34px; height:34px; border:none; background:transparent;
  color:var(--text2); font-size:1.1rem; cursor:pointer;
  font-family:var(--font); display:flex; align-items:center; justify-content:center;
  transition:all 120ms;
}
.ns-btn:hover { background:var(--overlay); color:var(--text) }
.ns-val {
  min-width:40px; text-align:center;
  font-size:.95rem; font-weight:800; color:var(--text);
  border-left:1px solid var(--border); border-right:1px solid var(--border);
  padding:0 8px; line-height:34px;
}
.nights-suffix { font-size:.75rem; color:var(--text3); font-weight:600 }

/* Travel type grid */
.types-sel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.ts-btn {
  background:var(--raised); border:1.5px solid transparent;
  border-radius:var(--r-md); padding:9px 4px 7px;
  cursor:pointer; text-align:center; font-family:var(--font);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:all 160ms;
}
.ts-btn .ts-emoji { font-size:1.3rem; line-height:1 }
.ts-btn .ts-name { font-size:.57rem; font-weight:700; color:var(--text2); line-height:1.35 }
.ts-btn:hover { border-color:var(--border2) }
.ts-btn.active {
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.ts-btn.active .ts-name { color:var(--accent) }
.ts-btn.maxed { opacity:.35; pointer-events:none }
.types-hint { font-size:.6rem; color:var(--text3); margin-top:5px; text-align:right }

/* Budget input */
.budget-row { display:flex; align-items:center; gap:7px }
.budget-input {
  flex:1; background:var(--raised); border:1px solid var(--border2);
  border-radius:var(--r-md); padding:7px 11px;
  font-size:.88rem; font-weight:700; color:var(--text);
  font-family:var(--font); outline:none; transition:border-color 140ms;
  -moz-appearance:textfield;
}
.budget-input::-webkit-outer-spin-button,
.budget-input::-webkit-inner-spin-button { -webkit-appearance:none }
.budget-input:focus { border-color:var(--accent) }
.budget-suffix { font-size:.72rem; color:var(--text3); white-space:nowrap }

/* Generate button */
.pn-gen-btn {
  width:100%; padding:11px; background:var(--accent); border:none;
  border-radius:var(--r-md); color:#fff;
  font-size:.83rem; font-weight:800; font-family:var(--font);
  cursor:pointer; transition:all 160ms;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.pn-gen-btn:hover { filter:brightness(1.1); transform:translateY(-1px) }
.pn-gen-btn .material-symbols-outlined { font-size:16px }
.pn-gen-btn.route-clear-mode {
  background:#ef4444;
}

/* ── PLAN RESULT ── */
.pn-result { padding-top:16px; border-top:1px solid var(--border); margin-top:16px }
.pn-result-hd {
  font-size:.72rem; font-weight:800; color:var(--text);
  margin-bottom:11px; display:flex; align-items:center; gap:6px;
}

.rec-card {
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius:var(--r-md); padding:11px 14px;
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.rec-emoji { font-size:1.7rem; line-height:1 }
.rec-label { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:color-mix(in srgb, var(--accent) 70%, transparent) }
.rec-name  { font-size:1rem; font-weight:900; color:var(--text); margin-top:1px }
.rec-why   { font-size:.6rem; color:var(--text3); margin-top:2px; line-height:1.5 }
.rec-price { font-size:.65rem; font-weight:700; color:color-mix(in srgb, var(--accent) 80%, transparent); margin-top:3px }

/* Day cards */
.day-card { margin-bottom:8px; border-radius:var(--r-md); background:var(--raised); border:1px solid var(--border); overflow:hidden }
.day-hd {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; background:var(--overlay); border-bottom:1px solid var(--border);
}
.day-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0 }
.day-title { font-size:.72rem; font-weight:800; color:var(--text) }
.day-zone  { margin-left:auto; font-size:.57rem; color:var(--text3); background:var(--raised); padding:1px 7px; border-radius:var(--r-full); border:1px solid var(--border) }
.day-stops { padding:7px 12px }
.step-row {
  display:flex; align-items:flex-start; gap:7px;
  padding:5px 0; border-bottom:1px solid var(--border);
}
.step-row:last-child { border-bottom:none }
.step-num {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:800; color:#fff;
}
.step-emoji { font-size:.95rem; flex-shrink:0; margin-top:1px }
.step-body {}
.step-name { font-size:.7rem; font-weight:700; color:var(--text); line-height:1.3 }
.step-desc { font-size:.58rem; color:var(--text3); margin-top:1px; line-height:1.4 }

/* ── ATTRACTION MARKERS ── */
.attr-dot {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer;
  background:rgba(0,0,0,.94)!important;
  color:#fff;
  border:2px solid rgba(255,255,255,.86);
  box-shadow:0 3px 12px rgba(0,0,0,.68);
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  transition:transform 140ms;
}
.attr-dot:hover { transform:scale(1.25) }
.attr-landmark,
.attr-food,
.attr-shopping,
.attr-activity,
.attr-local { background:rgba(0,0,0,.94)!important }

/* ── AIRPORT MARKERS ── */
.ap-chip {
  background:rgba(11,14,26,.92);
  border:1.5px solid rgba(99,102,241,.38);
  border-radius:9px; padding:3px 9px;
  font-size:.63rem; font-weight:800; color:#a5b4fc;
  white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.5);
  backdrop-filter:blur(6px); cursor:default;
}

/* ── ROUTE BUBBLE BANNERS ── */
.rb-wrap {
  box-sizing:border-box;
  display:flex; align-items:center; gap:5px;
  background:rgba(9,13,26,.92); border:1.5px solid rgba(255,255,255,.14);
  border-radius:8px; padding:6px 11px 6px 5px;
  white-space:nowrap; box-shadow:0 3px 12px rgba(0,0,0,.65);
  backdrop-filter:blur(8px); pointer-events:auto; cursor:grab;
}
.rb-wrap:active {
  cursor:grabbing;
}
.rb-num {
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:900; color:#fff;
}
.rb-text {
  font-size:.82rem;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}

.route-day-badge {
  box-sizing:border-box;
  display:flex; align-items:center; gap:6px;
  background:rgba(9,13,26,.95);
  border:3px solid var(--route-color, var(--accent));
  border-radius:8px;
  padding:9px 13px;
  color:#fff;
  box-shadow:0 9px 28px rgba(0,0,0,.72), 0 0 0 4px rgba(255,255,255,.1);
  white-space:nowrap;
  pointer-events:auto;
  cursor:grab;
}
.route-day-badge:active {
  cursor:grabbing;
}
.route-day-kicker {
  background:var(--route-color, var(--accent));
  border-radius:6px;
  color:#fff;
  font-size:1rem;
  font-weight:900;
  line-height:1;
  padding:8px 10px;
  text-transform:uppercase;
}
.route-day-name {
  font-size:1.16rem;
  font-weight:900;
  line-height:1.15;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.route-stop-dot {
  width:30px; height:30px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--route-color, var(--accent));
  box-shadow:0 0 0 8px color-mix(in srgb, var(--route-color, var(--accent)) 32%, transparent), 0 5px 18px rgba(0,0,0,.68);
}
.route-arrow {
  color:var(--route-color, var(--accent));
  font-size:22px;
  line-height:1;
  opacity:.95;
  text-shadow:0 0 5px #000, 0 0 10px #000;
}

.route-focus-map .leaflet-tile-pane {
  opacity:.78;
}

.stay-rec-banner {
  box-sizing:border-box;
  min-width:360px;
  max-width:440px;
  background:rgba(9,13,26,.96);
  border:3px solid var(--accent);
  border-radius:8px;
  padding:10px 12px;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.75), 0 0 0 4px rgba(255,255,255,.1);
  pointer-events:auto;
  cursor:grab;
}
.stay-rec-banner:active {
  cursor:grabbing;
}
.stay-rec-top {
  display:flex; align-items:center; gap:8px;
  margin-bottom:7px;
}
.stay-rec-icon {
  width:36px; height:36px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent);
  color:#fff;
  font-size:22px;
  flex-shrink:0;
}
.stay-rec-kicker {
  font-size:.74rem;
  font-weight:900;
  color:color-mix(in srgb, var(--accent) 78%, #fff);
  text-transform:uppercase;
  line-height:1;
}
.stay-rec-name {
  font-size:2.24rem;
  font-weight:900;
  line-height:1.12;
  margin-top:2px;
  word-break:keep-all;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.stay-rec-reasons {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:6px;
}
.stay-rec-reason {
  font-size:.8rem;
  font-weight:700;
  color:rgba(255,255,255,.82);
  line-height:1.35;
}
.stay-rec-reason::before {
  content:'✓';
  color:var(--accent);
  font-weight:900;
  margin-right:5px;
}
.stay-hotel-pin {
  box-sizing:border-box;
  width:48px; height:48px;
  border-radius:8px;
  background:var(--accent);
  border:4px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 28%, transparent), 0 7px 22px rgba(0,0,0,.72);
}
.stay-rec-arrow {
  color:var(--accent);
  font-size:24px;
  text-shadow:0 0 5px #000, 0 0 10px #000;
}
.stay-rec-arrow-head {
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--stay-color, var(--accent));
  font-size:34px;
  font-weight:900;
  line-height:1;
  text-shadow:0 2px 5px rgba(0,0,0,.72), 0 0 10px rgba(0,0,0,.65);
  transform-origin:center;
}

/* ── POPUP EXTRAS (image · tags · airport access) ── */
.pu-img {
  width:100%; height:88px; object-fit:cover;
  border-radius:8px; margin-bottom:9px; display:block;
  background:var(--raised);
}
.pu-char-tags { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:8px }
.pu-char-tag  { background:rgba(255,255,255,.07); color:var(--text2); padding:2px 8px; border-radius:7px; font-size:.6rem }

.pu-access { margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.06) }
.pu-access-hd { font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); margin-bottom:5px }
.pu-access-row { display:flex; justify-content:space-between; align-items:baseline; font-size:.66rem; margin-bottom:3px }
.pu-access-ap  { color:var(--text2); display:flex; align-items:center; gap:4px }
.pu-access-time { font-weight:800; color:var(--text) }
.pu-access-line { font-size:.56rem; color:var(--text3); font-weight:400 }

/* ── MOBILE ── */
@media(max-width:768px){
  .planner-overlay { top:104px }
  .planner-panel { width:100vw }
  .comp-grid { grid-template-columns:repeat(2,1fr) }
  .types-sel-grid { grid-template-columns:repeat(3,1fr) }
}