/* ════════════════════════════════════════════════════════════════
   디자인 테마 D · Sunny Seoul (2026-10-19 리뉴얼, 기본값)
   index.html 이 style.css 바로 뒤에 붙인다. ?theme=classic 이면 꺼진다.
   style.css 는 건드리지 않는 덮어쓰기 레이어다 — 이 파일만 빼면 옛 화면으로 돌아간다.
   팔레트: 블루 #3B5BDB · 햇살 #FFD43B · 코랄 #FF6B4A · 잉크 #191C2B · 바탕 #F4F6FB
   ⚠️ 카테고리 색(.cat-*)은 accommodation.js 의 CAT_COLORS_D 와 같은 값이어야 한다.
   ════════════════════════════════════════════════════════════════ */

:root{
  --bg:#F4F6FB; --surface:#FFFFFF; --surface2:#FFFFFF; --border:#E3E7F2;
  --text:#191C2B; --muted:#5A5F76;
  --accent:#3B5BDB; --vehicle:#3B5BDB;
  --lp-violet:#3B5BDB; --lp-violet-soft:#EEF3FF;
  --lp-amber:#F5B400;
  --lp-paper:#F4F6FB; --lp-card:#FFFFFF;
  --lp-line:#E3E7F2; --lp-line2:#EEF1F8;
  --lp-ink:#191C2B; --lp-ink-soft:#5A5F76;
  --d-sun:#FFD43B; --d-coral:#FF6B4A;
}

html, body,
.search-input, .search-item-name, .sel-name, .sel-row, .lp-cname, .lp-cdesc, .lp-cfoot,
.lp-detail, .lp-dname, .lp-cat, .lp-tag, .lp-lang-btn, .map-lang-btn, .lp-catf,
.checkin-btn, .pg-name, .pg-finput, .pg-submit, .pg-cancel-btn, .area-status-banner,
#lpGate .lp-gate-title, #lpGate .lp-gate-text, #lpGate .lp-gate-admin, #opInfo, .acc-filter-btn,
.li-wx, .li-ev, #liSheet, .li-btn, .li-more{
  font-family:'Plus Jakarta Sans','Noto Sans JP','Noto Sans SC',sans-serif !important;
}

/* 패널: 유리 대신 깨끗한 흰 면 + 큰 라운드 */
.bottom-panel{ background:#FFFFFF; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-top:none; border-radius:28px 28px 0 0; box-shadow:0 -8px 28px rgba(25,28,43,.08); }
@media (min-width:768px){ .bottom-panel{ border-radius:0; box-shadow:4px 0 28px rgba(25,28,43,.06); } }
.handle-bar{ background:#E3E7F2; width:40px; height:5px; border-radius:3px; }

/* 검색 */
.search-input{ background:#F4F6FB !important; border-radius:16px !important; font-weight:600; }
.search-input:focus{ background:#EEF3FF !important; box-shadow:0 0 0 2px #3B5BDB inset !important; }
.search-icon{ color:#3B5BDB; }

/* 숙소 카드 = 파란 히어로 카드 */
.selected-card{ background:#3B5BDB !important; border:none !important; border-radius:24px !important;
  padding:18px 18px 16px !important; box-shadow:0 12px 28px rgba(59,91,219,.28) !important; color:#fff; }
.sel-eyebrow{ color:#DCE4FF; font-weight:700; letter-spacing:.12em; }
.sel-name{ color:#fff; font-weight:800; font-size:26px; letter-spacing:-.03em; line-height:1.1; }
.sel-row, .sel-row .sel-k{ color:#DCE4FF; }
.sel-row img{ filter:brightness(0) invert(1); opacity:.85; }
.sel-tag-code{ background:rgba(255,255,255,.16) !important; border:none !important; color:#fff !important; border-radius:999px; padding:4px 10px; }
.checkin-divider{ background:rgba(255,255,255,.22); }
.selected-card .checkin-hint{ color:#DCE4FF; font-size:13px; }

/* 핵심 CTA = 햇살 옐로 */
.checkin-btn{ background:var(--d-sun); color:#191C2B; border-radius:16px; height:54px; padding:0 16px;
  font-size:16px; font-weight:800; box-shadow:0 6px 16px rgba(245,180,0,.30); }
.checkin-done{ background:rgba(255,255,255,.16); border:none; color:#fff; border-radius:16px; font-size:13.5px; padding:14px; }
.handover-eyebrow{ color:#FFD43B; }
.handover-k{ color:#DCE4FF; }
.handover-v{ color:#fff; }
.handover-spot{ color:#DCE4FF; }
.handover-btn{ background:var(--d-sun); color:#191C2B; display:flex; align-items:center; justify-content:center; }

/* 운영자 정보 블록은 히어로 안에서 흰 박스로 */
#opInfo{ background:#fff; border-radius:16px; padding:12px 14px; border-top:none; color:#191C2B; }

/* 상단 오버레이 */
.map-lang{ border:none; border-radius:14px; padding:4px; box-shadow:0 4px 14px rgba(25,28,43,.10); }
.map-lang-btn{ border-radius:10px; color:#5A5F76; }
.map-lang-btn.active{ background:#191C2B; color:#fff; }
.status-pill{ background:#fff; border:none; color:#191C2B; font-weight:700; font-size:12px; padding:7px 13px; box-shadow:0 4px 14px rgba(25,28,43,.10); }
.area-status-banner{ background:#191C2B; box-shadow:0 6px 18px rgba(25,28,43,.25); font-weight:800; }
.area-status-dot{ background:var(--d-sun); }
.area-status-banner.is-mine{ background:var(--d-sun); color:#191C2B; box-shadow:0 6px 18px rgba(245,180,0,.35); }
.area-status-banner.is-mine .area-status-dot{ background:#191C2B; }

/* 카테고리 톤다운 7색 — accommodation.js 의 CAT_COLORS_D 와 같은 값 */
.cat-cafe{--cc:#E8914A;--cc-bg:#FDEBDC}
.cat-restaurant{--cc:#E86A5A;--cc-bg:#FCE3DF}
.cat-bar{--cc:#8C78E0;--cc-bg:#EDE9FB}
.cat-grocery{--cc:#2FA597;--cc-bg:#DDF3F0}
.cat-shopping{--cc:#2FA597;--cc-bg:#DDF3F0}
.cat-attraction{--cc:#4F7FE8;--cc-bg:#E3ECFD}
.cat-outdoor{--cc:#7FA36B;--cc-bg:#E8F1E2}
.cat-area{--cc:#646A80;--cc-bg:#ECEDF2}

/* 스토어: 사진이 주인공 */
.lp-seclabel{ font-size:17px; letter-spacing:-.02em; text-transform:none; color:#191C2B; font-weight:800; }
.lp-count{ background:#EEF3FF; color:#3B5BDB; }
.lp-catf{ border:none !important; background:#F4F6FB; color:#5A5F76 !important; font-weight:700; padding:7px 14px; }
.lp-catf.active{ background:#191C2B; color:#fff !important; }
.lp-grid{ gap:12px; }
.lp-gcard{ border:none; border-radius:20px; box-shadow:0 4px 14px rgba(25,28,43,.06); }
.lp-gthumb{ aspect-ratio:1/1; }
.lp-gname{ font-size:14px; font-weight:800; }
.lp-gbody{ padding:10px 12px 12px; }
.lp-fam{ border-radius:999px; font-weight:800; }

/* 상세 */
.lp-hero{ border-radius:24px; }
.lp-dname{ font-weight:800; font-size:28px; letter-spacing:-.03em; }
.lp-tab.active::after{ background:#3B5BDB; height:3px; }
.lp-cta a{ background:#3B5BDB; border-radius:16px; box-shadow:0 8px 20px rgba(59,91,219,.30); font-weight:800; }
.lp-cta-reserve a{ background:#fff; color:#3B5BDB; border:2px solid #3B5BDB; box-shadow:none; }
.lp-lang{ border-radius:12px; }
.lp-lang-btn.active{ color:#3B5BDB; }
.lp-thumb-btn{ border-radius:12px; }

/* 로컬 프로그램 */
.pg-banner, .pg-hero{ border-radius:20px; }
.pg-name{ font-weight:800; }
.pg-free{ background:#FFF3C4; color:#6B5300; }
.pg-submit{ background:#3B5BDB; border-radius:16px; font-weight:800; }

/* 게이트 */
#lpGate{ background:#F4F6FB; }
#lpGate .lp-gate-card{ border:none; border-radius:28px; box-shadow:0 12px 36px rgba(25,28,43,.08); }
#lpGate .lp-gate-title{ font-weight:800; letter-spacing:-.02em; }

/* ════════ 운영자 화면 (2026-10-22, 시안 H1·H2 — 앱 HANDOVER 5장 AC) ════════ */

/* 필터·토글 버튼: 알약, 선택은 잉크 */
.acc-filter-row{ gap:6px; }
.acc-filter-btn{ border:none !important; background:#F4F6FB; color:#4A4F66; border-radius:12px;
  padding:9px 12px; font-size:13px; font-weight:700; }
.acc-filter-btn.active{ background:#191C2B !important; color:#fff !important; }
#accStoreToggle{ background:#F4F6FB; color:#4A4F66; }
#accStoreToggle.active{ background:#FFF3C4 !important; color:#6B5300 !important; }
.acc-list-count{ font-weight:700; color:#5A5F76; }

/* 숙소 목록: 코드 칩 앞에 구역색 점 (지도 숙소 점과 같은 색) */
.acc-row{ border-radius:12px; padding:10px 8px; gap:10px; }
.acc-row:hover, .acc-row:active{ background:#F4F6FB; }
.acc-row.is-inactive .acc-row-name, .acc-row.is-inactive .acc-row-code{ opacity:.55; }
.acc-row-code{ display:inline-flex; align-items:center; gap:6px; background:#F4F6FB !important; border:none !important;
  border-radius:8px !important; padding:3px 8px !important; color:#4A4F66 !important; }
.acc-row-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.acc-row-name{ font-size:14px; font-weight:700; }

/* 범례 카드: 지도 오른쪽 위 「구역 색 = 라벨 스티커」 */
.zone-legend-map.lp-legend{ top:16px; right:16px; bottom:auto; width:200px; padding:14px 16px;
  border:none; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(25,28,43,.10);
  display:flex; flex-direction:column; gap:9px; }
@media (max-width:767px){ .zone-legend-map.lp-legend{ display:none; } }
.lp-legend-h{ font-size:11px; font-weight:800; letter-spacing:.1em; color:#5A5F76; }
.lp-legend-row{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:#191C2B;
  width:100%; margin:0 -8px; padding:6px 8px; box-sizing:content-box; border:none; border-radius:10px;
  background:transparent; font-family:inherit; text-align:left; cursor:pointer; }
.lp-legend-row:hover{ background:#F4F6FB; }
.lp-legend-row.active{ background:#EEF3FF; box-shadow:inset 0 0 0 1.5px #3B5BDB; }
.lp-legend-line{ width:22px; height:0; flex:0 0 auto; }
.lp-legend-name{ flex:1; }
.lp-legend-code{ font-size:11px; color:#5A5F76; }
.lp-legend-src{ margin-top:2px; font-size:10px; color:#5A5F76; }

/* 문의 Help 칩 — 파란 히어로 카드 위의 반투명 칩 (help.js, 2026-10-27) */
.help-chip{ background:rgba(255,255,255,.18); border:none; color:#fff; }
.help-chip-ic{ background:#FFD43B; color:#191C2B; }

/* 링크 만료 임박 배너 — 흰 카드 + 햇살 아이콘 + 블루 버튼 (2026-10-27) */
.link-extend-section{ border:none; border-radius:20px; color:#191C2B; font-weight:700; }
.lx-ic{ background:var(--d-sun); color:#191C2B; }
.link-extend-section.is-done .lx-ic{ background:#EEF3FF; color:#3B5BDB; }
.lx-btn{ background:#3B5BDB; font-weight:800; box-shadow:0 4px 12px rgba(59,91,219,.28); }