/* =============================================================
   VIETGOVN | 베트남GO — COMMON (shared by app + web)
   palette: deep noir / violet / gold / tropical green
   ============================================================= */
:root {
  --bg-0:     #080a0e;
  --bg-1:     #10141a;
  --bg-2:     #181d25;
  --bg-3:     #222833;
  --line:     #2e3540;
  --ink-0:    #f0f4f8;
  --ink-1:    #b8c4d0;
  --ink-2:    #7a8898;

  /* 브랜드 컬러 — app+web 통일 (violet) */
  --accent:        #8b5cf6;             /* violet-500 */
  --accent-dim:    #6d28d9;             /* violet-700 (hover/active) */
  --accent-glow:   rgba(139,92,246,0.55);
  --accent-soft:   rgba(139,92,246,0.12);
  --accent-soft-2: rgba(139,92,246,0.4);
  --on-accent:     #ffffff;

  --accent-2: #ffd24a;                  /* gold (보조 — tier/badges) */
  --accent-3: #3ecf8e;                  /* tropical green (open/success) */
  --accent-4: #ff6b6b;                  /* coral */
  --info:     #5fb6ff;
  --danger:   #ff4f4f;
  --success:  #57d975;

  --tier-rookie:     #877e74;
  --tier-apprentice: #6dc99c;
  --tier-jockey:     #ff8c2b;
  --tier-veteran:    #ffd24a;

  --font-display: 'Big Shoulders Display', 'Noto Sans KR', system-ui, sans-serif;
  --font-body:    'Noto Sans KR', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;

  --tabbar-h: 68px;
  --topbar-h: 72px;
  --webnav-h: 72px;
}

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

html, body {
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body {
  min-height: 100vh;
  /* padding-bottom 은 플랫폼별 (app.css / web.css) 에서 지정 */
  background-image:
    radial-gradient(1200px 400px at 80% -10%, rgba(139,92,246,0.10), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(62,207,142,0.06), transparent 60%);
}

a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea {
  font-family: inherit; font-size: 15px;
  background: var(--bg-2); color: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
}

img { max-width: 100%; display: block; }

/* =========================
   TOPBAR 의 sticky/fixed 배치는 style-app.css / style-web.css 에서.
   여기엔 공통 브랜드만 둠
   ========================= */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--ink-0);
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 22px;
  border-radius: 8px;
  transform: rotate(-4deg);
  box-shadow: 0 0 0 2px #000, 0 0 18px var(--accent-glow);
}

.topbar-right { display: flex; align-items: center; gap: 8px; }

.carrots-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
}

.back-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-1);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
}

/* 언어 셀렉터 — 좌상단, 모든 페이지에서 항상 보임 */
.lang-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-1);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 6px;
  white-space: nowrap;
}
.lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-menu {
  position: fixed;
  top: calc(var(--topbar-h) + 6px);
  left: 16px;
  background: var(--bg-1);
  border: 1px solid var(--accent);
  border-radius: var(--radius-m);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 9998;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 140px;
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  background: transparent;
  border: 0;
  color: var(--ink-1);
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-s);
}
.lang-menu button:hover { background: var(--bg-2); }
.lang-menu button.active { background: var(--accent); color: #1a0a00; font-weight: 700; }

.mode-menu {
  position: fixed;
  top: calc(var(--topbar-h) + 6px);
  right: 16px;
  background: var(--bg-1);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-m);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 9998;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 120px;
}
.mode-menu[hidden] { display: none; }
.mode-menu button {
  background: transparent;
  border: 0;
  color: var(--ink-1);
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-s);
}
.mode-menu button:hover { background: var(--bg-2); }
.mode-menu button.active { background: var(--accent-2); color: #1a0a00; font-weight: 700; }
.mode-btn {
  background: rgba(255,210,74,0.12);
  border: 1px solid rgba(255,210,74,0.4);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
}

/* =========================
   PAGE
   ========================= */
/* .page-shell 의 padding/min-height 는 style-app.css / style-web.css 에서 지정 */

.section { margin-bottom: 24px; }

/* === 사진 ⬌ 영상 좌우 배치 (가게 상세 페이지) ===
   모바일: 1열 (사진 위 / 영상 아래)
   데스크탑: 2열 (둘 다 있을 때만)
*/
.stable-media-split {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 24px;
}
@media (min-width: 720px) {
  .stable-media-split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* 자식이 하나뿐이면 100% 폭 */
  .stable-media-split > .section:only-child {
    grid-column: 1 / -1;
  }
}
.stable-media-split > .section { margin-bottom: 0; }

/* === 객실 라인업 (통합 가게 페이지) === */
.group-rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.group-room-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.group-room-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.group-room-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--bg-2);
}
.group-room-cover-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: var(--ink-2);
}
.group-room-body {
  padding: 10px 12px;
}
.group-room-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-0);
  margin-bottom: 4px;
}
.group-room-price {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
}

/* === 자식 룸 페이지의 "전체 라인업" CTA === */
.group-parent-cta {
  margin-bottom: 18px;
}
.group-parent-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-m);
  text-decoration: none;
  color: var(--ink-0);
  transition: background .12s ease, border-color .12s ease;
}
.group-parent-link:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.group-parent-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.group-parent-label {
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 2px;
}
.group-parent-link:hover .group-parent-label { color: var(--on-accent); opacity: 0.8; }
.group-parent-name {
  font-size: 15px;
  font-weight: 600;
}
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.section-more {
  font-size: 12px; color: var(--ink-2);
  background: transparent; border: 0;
}

.muted { color: var(--ink-2); }

/* .tabbar 는 style-app.css 에서 정의 (앱 전용 하단 탭바) */

/* =========================
   STABLE CARDS
   ========================= */
.stable-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-bottom: 12px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.stable-card:active { transform: scale(0.99); border-color: var(--accent); }
.stable-card.premium {
  border-color: var(--accent-soft-2);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.stable-card-cover {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a1626 0%, #2c2240 100%);
  position: relative;
  overflow: hidden;
}
.stable-card-cover .badge {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 6px;
}
.stable-card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 가게 리스트 / 그리드 — 기본 1컬럼, 플랫폼별 반응형은 style-app.css / style-web.css */
#stableList,
#stableGrid,
.stable-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
#stableList > .stable-card,
#stableGrid > .stable-card,
.stable-grid > .stable-card { margin-bottom: 0; }
/* (반응형 grid-template-columns 는 플랫폼별 CSS 에서 정의) */

.stable-card-body { padding: 12px 14px; }
.stable-card-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.stable-card-title h3 {
  font-size: 16px; font-weight: 700;
}
.stable-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  font-size: 12px; color: var(--ink-2);
}
.stable-card-meta .open-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 4px;
  background: var(--ink-2);
}
.stable-card-meta .open-dot.open { background: var(--success); }

.stable-card-tags {
  display: flex; gap: 6px; margin-top: 8px;
}
.tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-1);
  border: 1px solid var(--line);
}
.tag.accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft-2); }
.tag.green  { background: rgba(109,201,156,0.12); color: var(--accent-3); border-color: rgba(109,201,156,0.4); }
.tag.gold   { background: rgba(255,210,74,0.12); color: var(--accent-2); border-color: rgba(255,210,74,0.4); }
.tag.muted  { color: var(--ink-2); }

/* =========================
   CHIPS / FILTERS
   ========================= */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.chips-row::-webkit-scrollbar { display: none; }
.chip {
  font-size: 13px; font-weight: 600;
  padding: 7px 14px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--ink-1);
}
.chip.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* =========================
   HORSE LINEUP
   ========================= */
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.horse-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 8px;
  text-align: center;
}
.horse-card .avatar {
  width: 100%; aspect-ratio: 1;
  background: var(--bg-3);
  border-radius: var(--radius-s);
  display: grid; place-items: center;
  font-size: 32px; color: var(--ink-2);
  margin-bottom: 6px;
}
.horse-card .name { font-size: 13px; font-weight: 600; }
.horse-card .tags { font-size: 10px; color: var(--ink-2); margin-top: 2px; }

/* =========================
   MENU LIST
   ========================= */
.menu-list { background: var(--bg-1); border-radius: var(--radius-m); border: 1px solid var(--line); }
.menu-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.menu-row:last-child { border-bottom: 0; }
.menu-row .name { font-weight: 600; }
.menu-row .desc { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.menu-row .price { color: var(--accent); font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }

/* =========================
   TIER PILLS
   ========================= */
.tier-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  letter-spacing: 0.02em;
}
.tier-pill.tier-rookie     { color: var(--tier-rookie); }
.tier-pill.tier-apprentice { color: var(--tier-apprentice); }
.tier-pill.tier-jockey     { color: var(--tier-jockey); }
.tier-pill.tier-veteran    { color: var(--tier-veteran); }

.status-pill {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--ink-1);
}
.status-pill.status-pending   { color: var(--accent-2); border-color: rgba(255,210,74,0.4); }
.status-pill.status-confirmed { color: var(--accent-3); border-color: rgba(109,201,156,0.4); }
.status-pill.status-completed { color: var(--info); border-color: rgba(95,182,255,0.4); }
.status-pill.status-cancelled,
.status-pill.status-declined,
.status-pill.status-no_show   { color: var(--danger); border-color: rgba(255,79,79,0.4); }
.status-pill.status-match     { color: var(--accent-3); border-color: rgba(109,201,156,0.4); }
.status-pill.status-mismatch  { color: var(--danger); border-color: rgba(255,79,79,0.4); }

/* =========================
   BUTTONS
   ========================= */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center; gap: 6px;
  border: 0;
  border-radius: var(--radius-s);
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  background: var(--bg-2);
  color: var(--ink-0);
  border: 1px solid var(--line);
}
.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn.primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn-block { width: 100%; }

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

/* =========================
   FEED
   ========================= */
.feed-list { display: flex; flex-direction: column; gap: 8px; }
.feed-row {
  display: flex; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.feed-row .feed-ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--accent);
}
.feed-row .feed-text { flex: 1; font-size: 13px; }
.feed-row .feed-time { color: var(--ink-2); font-size: 11px; }

/* =========================
   KV ROW
   ========================= */
.kv-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.kv-k { color: var(--ink-2); font-size: 13px; }
.kv-v { color: var(--ink-0); font-size: 14px; text-align: right; }

/* =========================
   LOADING / EMPTY / ERROR
   ========================= */
.loading-shell { padding: 60px 20px; text-align: center; color: var(--ink-2); }
.loading-bar {
  width: 60px; height: 3px; margin: 0 auto 12px;
  background: var(--bg-2);
  position: relative; overflow: hidden;
  border-radius: 2px;
}
.loading-bar::after {
  content: ""; position: absolute;
  top: 0; left: -30%; width: 30%; height: 100%;
  background: var(--accent);
  animation: bar 1.1s ease-in-out infinite;
}
@keyframes bar { 0% { left: -30% } 100% { left: 100% } }

.empty-shell { padding: 50px 20px; text-align: center; color: var(--ink-2); }
.empty-shell .empty-icon { font-size: 36px; margin-bottom: 8px; }

.error-shell { padding: 30px 20px; color: var(--ink-1); text-align: center; }
.error-shell h3 { color: var(--danger); margin-bottom: 8px; }
.error-shell p  { color: var(--ink-2); margin-bottom: 14px; font-size: 13px; }

/* =========================
   TOAST (위치는 플랫폼별 — style-app.css / style-web.css 에서)
   ========================= */
.toast {
  background: var(--bg-2);
  color: var(--ink-0);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: var(--radius-s);
  font-size: 13px;
  z-index: 100;
}
.toast.success { border-color: var(--success); color: var(--success); }
.toast.error   { border-color: var(--danger); color: var(--danger); }

/* =========================
   FORM GROUP
   ========================= */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 12px; color: var(--ink-2);
  margin-bottom: 6px; font-weight: 600;
}

/* =========================
   ATTENDANCE HEATMAP
   ========================= */
.heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--bg-2);
  position: relative;
}
.heatmap-cell[data-level="1"] { background: rgba(139,92,246,0.2); }
.heatmap-cell[data-level="2"] { background: rgba(139,92,246,0.45); }
.heatmap-cell[data-level="3"] { background: rgba(139,92,246,0.7); }
.heatmap-cell[data-level="4"] { background: var(--accent); }

/* =========================
   PROFILE
   ========================= */
.profile-head {
  text-align: center; padding: 20px 0;
}
.profile-head .avatar {
  width: 80px; height: 80px;
  border-radius: 50%; margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  font-size: 32px; color: var(--on-accent); font-weight: 800;
}
.profile-head h2 { margin-bottom: 4px; }
.profile-head .username { color: var(--ink-2); font-size: 13px; }

.profile-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 16px;
}
.stat-box {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px; text-align: center;
}
.stat-box .num {
  font-family: var(--font-display);
  font-size: 24px; color: var(--accent); font-weight: 900;
}
.stat-box .lbl { font-size: 11px; color: var(--ink-2); margin-top: 2px; }

/* progress bar */
.progress-track {
  height: 6px; background: var(--bg-2);
  border-radius: 3px; overflow: hidden;
  margin: 8px 0;
}
.progress-fill {
  height: 100%; background: var(--accent);
}

/* =========================
   v2: CATEGORY GRID
   ========================= */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 16px;
}
.cat-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-soft), rgba(255,210,74,0.06));
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-m);
  padding: 14px 8px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
  min-height: 0;
  font-family: inherit;
  color: inherit;
}
.cat-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.cat-tile:active { transform: scale(0.97); }
.cat-tile-icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.cat-tile-label {
  font-size: 12px; font-weight: 700; color: var(--ink-1);
  text-align: center;
}
.cat-tile-sub {
  font-size: 10px; opacity: 0.6; margin-top: 2px;
}
.cat-tile-img {
  position: relative; padding: 0; overflow: hidden; min-height: 0;
  border: none; background: var(--bg-2);
}
.cat-tile-bg { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cat-tile-overlay-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 6px 7px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  color: #fff; font-size: 11px; font-weight: 700; text-align: center;
}

@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ── 소셜 프루프 팝업 애니메이션 ── */
@keyframes spSlideIn {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes spSlideOut {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-110%); opacity: 0; }
}
.sp-notif {
  animation: spSlideIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.sp-notif.sp-out {
  animation: spSlideOut 0.35s ease forwards;
}

/* 탑바: 포인트·등급은 내 정보에서만 표시 */
#tierBadge, #carrotsPill { display: none !important; }

/* brand 텍스트 줄바꿈 방지 */
/* p111: brand-text "베트남GO" 모든 플랫폼 숨김 — 로고 이미지(VIETGO·VN)와 중복 회피 */
.brand-text { display: none !important; }
.brand { flex-wrap: nowrap; overflow: hidden; }

/* support_link 배너 — 풀-와이드, 길고 얇게 (max 110px). p84 */
.cat-tile-banner {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  max-height: 110px;
  overflow: hidden;
}
.cat-tile-banner .cat-tile-bg {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-height: 110px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cat-tile-banner .cat-tile-overlay-label { display: none; }

/* 다크 모드용 폼 컨트롤 — input[type=date] 캘린더 아이콘 흰색화. p84 */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2) saturate(0);
  cursor: pointer;
  opacity: 0.9;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  filter: invert(0.7);
}
select {
  color-scheme: dark;
}
/* p87: 캘린더 아이콘 — SVG 강제 덮어쓰기 (invert 미작동 환경 대비). calendar-picker-svg-p87 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 1;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
}
/* p88: 캘린더 — !important + appearance:none 으로 Chrome 의 기본 인디케이터 완전 대체. calendar-picker-svg-p88 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none !important;
  appearance: none !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") center / 18px 18px no-repeat !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  margin-left: 4px !important;
}

/* =========================
   p106: 상단 네비 돋보기(검색) 버튼
   ========================= */
.search-btn {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-0);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.search-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* p106: 검색 모달 (중앙 팝업) */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 16px 16px;
  overflow-y: auto;
}
.search-box {
  width: 100%;
  max-width: 640px;
  background: var(--bg-1);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-l);
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.7);
}
.search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--ink-1);
}
.search-head-ico { font-size: 18px; }
.search-head strong { flex: 1; font-weight: 700; color: var(--ink-0); }
.search-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-1);
  font-size: 14px;
  cursor: pointer;
}
.search-close:hover { background: var(--bg-3); }
.search-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  background: var(--bg-2);
  border: 2px solid var(--accent-soft-2);
  border-radius: var(--radius-m);
  color: var(--ink-0);
  margin-bottom: 8px;
}
.search-input:focus { outline: none; border-color: var(--accent); }
.search-hint {
  font-size: 12px;
  color: var(--ink-2);
  padding: 4px 6px 12px;
}
.search-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 56vh;
  overflow-y: auto;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  cursor: pointer;
  color: var(--ink-0);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.search-result:hover {
  border-color: var(--accent);
  background: var(--bg-3);
}
.search-result-ico {
  width: 48px; height: 48px;
  border-radius: var(--radius-s);
  display: grid;
  place-items: center;
  background: var(--bg-3);
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
}
.search-result-ico img { width: 100%; height: 100%; object-fit: cover; }
.search-result-meta { flex: 1; min-width: 0; }
.search-result-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-sub, .search-result-addr {
  font-size: 11px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   p107: 언어 버튼 — PNG 국기만 (Windows 이모지 fallback 회피)
   ========================= */
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  min-width: 42px;
}
.lang-flag-img {
  display: inline-block;
  width: 24px;
  height: auto;
  border-radius: 3px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
/* legacy — 이모지 기반 fallback (사용 X, 단지 깨지지 않게) */
.lang-btn .lang-flag, .lang-btn .lang-code { display: none; }

/* p106: 언어 메뉴 — 중앙 가로 팝업 (드롭다운 대신) */
.lang-menu-center {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  flex-direction: column !important;  /* 모바일은 세로 */
  background: var(--bg-1);
  padding: 14px;
  gap: 6px;
  min-width: 260px;
  max-width: 90vw;
  border: 1px solid var(--accent);
  border-radius: var(--radius-l);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6),
              0 0 0 9999px rgba(0,0,0,0.6);  /* backdrop */
  z-index: 9999;
}
.lang-menu-center::before {
  content: "🌐 언어 선택 / Language";
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  margin-bottom: 4px;
  font-weight: 700;
}
.lang-menu-center button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lang-menu-center button:hover {
  background: var(--bg-3);
  border-color: var(--accent-soft-2);
}
.lang-menu-center button.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.lang-menu-center .lang-flag { font-size: 20px; }
.lang-menu-center .lang-flag-img { width: 28px; height: auto; flex-shrink: 0; }
.lang-menu-center .lang-name { flex: 1; }

/* 데스크탑 (>= 720px) — 가로 6 컬럼 */
@media (min-width: 720px) {
  .lang-menu-center {
    flex-direction: row !important;
    flex-wrap: wrap;
    min-width: 540px;
    padding: 18px 20px;
    gap: 8px;
  }
  .lang-menu-center::before {
    width: 100%;
    margin-bottom: 6px;
  }
  .lang-menu-center button {
    flex: 1 1 auto;
    min-width: 145px;
    text-align: center;
    justify-content: center;
  }
}

/* =========================
   p111: 숙소 전용 상세 페이지 (좌사진/우유튜브 + 예약 폼 + 지도)
   ========================= */
.accom-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .accom-media { grid-template-columns: 1fr; }
}

.accom-photos {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 16/10;
}
.accom-photo-main {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.accom-photo-empty {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-size: 64px;
  opacity: 0.4;
}
.accom-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}
.accom-photo-nav:hover { background: var(--accent); }
.accom-photo-nav.prev { left: 10px; }
.accom-photo-nav.next { right: 10px; }
.accom-photo-ctr {
  position: absolute;
  bottom: 10px; right: 12px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
}

.accom-youtube {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 16/10;
}
.accom-youtube-iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}
.accom-youtube-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-2);
  background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
}
.accom-youtube-placeholder .ph-ico {
  font-size: 40px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center;
  color: var(--accent);
}
.accom-youtube-placeholder .ph-txt {
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}
.accom-youtube-placeholder .ph-txt small {
  font-size: 11px;
  opacity: 0.7;
}

/* 예약 박스 */
.accom-book-box {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 16px;
  margin-bottom: 16px;
}
.accom-book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .accom-book-grid { grid-template-columns: 1fr 1fr; }
  .accom-book-grid > div:last-child { grid-column: span 2; }
}
.accom-book-grid label {
  display: block;
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 4px;
  font-weight: 600;
}
.accom-price-box {
  background: var(--bg-2);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  margin: 4px 0 8px;
  text-align: center;
}

/* =========================
   p106: 추천 캐러셀 — "하노이의 추천 장소", "다낭의 추천 장소" 등
   ========================= */
.featured-section { margin: 18px 0 24px; }
.featured-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  color: var(--ink-0);
}
.featured-carousel {
  position: relative;
}
.featured-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 4px 8px;
  scroll-snap-type: x mandatory;
}
.featured-track::-webkit-scrollbar { display: none; }

/* 캐러셀 좌/우 화살표 — 절대 위치, 트랙 좌우에 오버레이 */
.featured-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(8,10,14,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--ink-0);
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.featured-nav:hover { background: var(--accent); transform: translateY(-50%) scale(1.06); }
.featured-nav.prev { left: -8px; }
.featured-nav.next { right: -8px; }

/* 카드 */
.fc-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.fc-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(139,92,246,0.25);
}
.fc-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  display: grid; place-items: center;
}
.fc-cover img { width: 100%; height: 100%; object-fit: cover; }
.fc-premium {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(139,92,246,0.95);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(139,92,246,0.4);
}
.fc-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-addr {
  font-size: 11px;
  color: var(--ink-2);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.4;
}
.fc-addr .fc-pin { color: var(--accent); flex-shrink: 0; }
.fc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  gap: 8px;
}
.fc-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-0);
  font-family: var(--font-mono);
}
.fc-go {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.fc-go:hover { background: var(--accent-dim); }

/* 좁은 모바일 (앱) — 카드 폭 줄여서 1.5장 보이게 */
@media (max-width: 480px) {
  .fc-card { flex: 0 0 220px; }
}

/* =========================
   p107: 풀코스 견적 FAB (웹 전용) — 좌하단 (우하단 연락처/build 라벨과 분리)
   ========================= */
html[data-platform="web"] .quote-fab {
  position: fixed;
  left: 16px;
  bottom: 22px;
  z-index: 9001;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(135deg, var(--accent), #c084fc);
  color: var(--on-accent);
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 28px var(--accent-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
html[data-platform="web"] .quote-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px var(--accent-glow);
}
html[data-platform="web"] .quote-fab .qf-ico { font-size: 20px; line-height: 1; }
html[data-platform="web"] .quote-fab .qf-label { letter-spacing: 0.02em; }

/* 앱 모드에선 노출 안 함 (JS 측에서 미생성하지만 fallback) */
html[data-platform="app"] .quote-fab { display: none !important; }

/* 모바일 브라우저 좁은 폭 — 라벨 숨기고 동그라미 */
@media (max-width: 540px) {
  html[data-platform="web"] .quote-fab .qf-label { display: none; }
  html[data-platform="web"] .quote-fab {
    width: 56px; height: 56px;
    padding: 0;
    justify-content: center;
    left: 14px;
    bottom: 16px;
  }
  html[data-platform="web"] .quote-fab .qf-ico { font-size: 24px; }
}

/* =========================
   p102: 플로팅 연락처 바 (우하단 sticky, 모든 페이지)
   ========================= */
.fc-root {
  position: fixed;
  right: 14px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;  /* 자식만 클릭 가능 */
}
.fc-root .fc-toggle,
.fc-root .fc-item { pointer-events: auto; }

.fc-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 3px rgba(139,92,246,0.18);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fc-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 4px rgba(139,92,246,0.25); }
.fc-toggle:active { transform: scale(0.96); }
.fc-toggle-icon { font-size: 22px; line-height: 1; }
.fc-toggle-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #fff;
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
.fc-root.fc-open .fc-toggle-icon { transform: rotate(45deg); transition: transform 0.2s ease; }
.fc-root.fc-open .fc-toggle-icon::before { content: "✕"; display: inline-block; }
.fc-root.fc-open .fc-toggle-count { display: none; }

.fc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
.fc-root.fc-open .fc-list {
  max-height: 500px;
  opacity: 1;
}

.fc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--bg-1);
  color: var(--ink-0);
  border: 1px solid var(--line);
  border-left: 4px solid var(--fc-color, var(--accent));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.fc-item:hover { transform: translateX(-3px); background: var(--bg-2); }
.fc-item .fc-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fc-color, var(--accent));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
/* p108: 카카오톡 노란색 배경엔 어두운 텍스트 */
.fc-item[data-key="kakao"] .fc-icon { color: #3c1e1e; }
.fc-item .fc-label { line-height: 1; }

/* 위치: 앱 모드(tabbar 있음) — tabbar 위로 띄움 */
html[data-platform="app"] .fc-root {
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));
}
/* 위치: 웹 모드 (tabbar 없음) — 화면 아래 */
html[data-platform="web"] .fc-root {
  bottom: 22px;
}

/* 좁은 모바일 화면 — 라벨 숨김, 아이콘만 */
@media (max-width: 480px) {
  .fc-item .fc-label { display: none; }
  .fc-item { padding: 8px 10px; }
}