/* 술팜 앱 화면 — naksee(낚시앱, 토스 레이아웃 참고)의 디자인 규칙을 옮겨 온 것.
   연한 회색 바탕 + 흰 카드, 숫자는 크게·라벨은 작게, 색은 의미에만, 주 행동은 엄지 닿는 하단.
   브랜드색은 술팜 로고의 와인색. style.css 다음에 읽어 기존 규칙을 덮는다. */
/* Pretendard 글꼴은 index.html 의 <link> 로 불러온다(@import 는 첫 화면을 늦춤) */

:root {
  --brand: #b01630; --brand-press: #8e1126; --brand-50: #fdf0f2; --brand-100: #f8dbe1;
  --bg: #f4f5f7; --card: #fff; --ink: #191f28; --ink2: #4e5968; --ink3: #8b95a1; --line: #e5e8eb;
  --ok-bg: #e8f5ec; --ok-ink: #1f7a3f; --warn-bg: #f2f4f6; --warn-ink: #6b7684;
  --amber-bg: #fff3cd; --amber-ink: #856404; --amber-line: #ffeeba;
  --green-bg: #eef6ec; --green-ink: #2e6b2a; --green-line: #d3e8cf;
  --r-card: 16px; --r-btn: 12px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: calc(62px + var(--safe-bottom));
}

html, body { height: 100%; }
body {
  display: block; margin: 0; height: 100dvh; overflow: hidden;
  font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.5; letter-spacing: -0.01em;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font-family: inherit; }
@media (min-width: 520px) { body { background: #e9ecef; } }

/* 앱 화면 틀: 휴대폰은 전체 화면, 큰 화면은 가운데 최대 480px */
.frame { position: relative; width: 100%; max-width: 480px; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--bg); }
@media (min-width: 520px) { .frame { box-shadow: 0 0 40px rgba(16, 24, 40, 0.12); } }

/* ---------- 지도 ---------- */
#map-container { position: absolute; left: 0; right: 0; top: 0; bottom: var(--tabbar-h); width: auto; height: auto; display: block; background: #e8edf2; box-shadow: none; border: 0; }
#map-container svg { width: 100%; height: 100%; display: block; }
.municipality { fill: #d7dde4; stroke: #fff; }
.municipality:hover { fill: #c2cad4; filter: none; }
.municipality.active { fill: var(--brand); }
.municipality.highlighted { fill: #e8798c; stroke: #fff; stroke-width: 1px; }

/* ---------- 지도 위 떠 있는 검색창과 칩 ---------- */
.ftop { position: absolute; left: 0; right: 0; top: 0; z-index: 12; padding: calc(12px + var(--safe-top)) 16px 0; pointer-events: none; }
.ftop > * { pointer-events: auto; }
.ftop .search-container { display: flex; align-items: center; gap: 8px; height: 48px; margin: 0; padding: 0 6px 0 16px; border-radius: 24px; background: #fff; box-shadow: 0 4px 16px rgba(16, 24, 40, 0.12); }
.ftop .search-container svg { flex: none; }
#search-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ink); }
#search-input::placeholder { color: var(--ink3); }
.ftop .search-container button { height: 36px; padding: 0 14px; border-radius: 18px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; flex: none; }
.ftop .search-container button:hover { background: var(--brand-press); }
.hashtag-container { margin: 10px -16px 0; padding: 0 16px 6px; gap: 8px; cursor: grab; }
.hashtag {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; flex: none;
  background: #fff !important; color: var(--ink2) !important; border: 1px solid transparent !important;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1); font-size: 13.5px; font-weight: 600 !important;
}
.hashtag:hover { transform: none; background: #fff; color: var(--ink) !important; }
.hashtag.on { background: var(--brand) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(176, 22, 48, 0.35); }

/* ---------- 아래에서 올라오는 목록 시트 (= #list-container) ---------- */
#list-container {
  position: absolute; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 10; width: auto; height: 46%; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.12);
}
#list-container.animate { transition: height 0.25s ease; }
.sheet-grab { flex: none; padding: 10px 0 8px; touch-action: none; cursor: grab; }
.sheet-grab i { display: block; width: 40px; height: 4px; border-radius: 2px; background: #d1d6db; margin: 0 auto; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 28px; }
/* 브랜드 줄(h1 + 홈 링크): 모든 화면에서 눈에만 안 보이게. display:none 이 아니라서 검색엔진·화면 읽기 프로그램은 읽는다(SEO) */
.brandbar { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 탐색이 아닌 화면: 지도·검색창을 숨기고 시트를 전체 화면 페이지로 */
body:not([data-view="search"]) #map-container,
body:not([data-view="search"]) .ftop { display: none; }
body:not([data-view="search"]) #list-container { top: 0; height: auto !important; border-radius: 0; box-shadow: none; background: var(--bg); }
body:not([data-view="search"]) .sheet-grab { display: none; }
body:not([data-view="search"]) .sheet-body { padding: calc(20px + var(--safe-top)) 16px 28px; }
.brandbar img { height: 36px !important; width: auto; }

/* 상세 화면: 시트를 끝까지 올리고 하단 탭 대신 하단 고정 버튼 */
body.detail #list-container { top: 0; bottom: 0; height: auto !important; border-radius: 0; box-shadow: none; background: var(--bg); }
body.detail .sheet-grab, body.detail .ftop, body.detail .tabbar { display: none; }
body.detail .sheet-body { padding: var(--safe-top) 0 calc(110px + var(--safe-bottom)); }

/* ---------- 하단 탭 ---------- */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--tabbar-h); padding-bottom: var(--safe-bottom); display: flex; background: #fff; border-top: 1px solid var(--line); margin: 0; gap: 0; border-bottom: 0; }
.tabbar .tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; font-size: 11px; font-weight: 700; color: var(--ink3); background: none; border: 0; }
.tabbar .tab-btn.active { color: var(--brand); }
.tabbar .tab-btn.active::after { display: none; }
.tabbar .tab-btn svg { width: 22px; height: 22px; }

/* ---------- 공통 요소 ---------- */
.view-section { animation: none; }
.cardx { background: var(--card); border-radius: var(--r-card); margin: 0 16px 12px; padding: 18px 20px; }
body:not(.detail) .sheet-body .cardx { margin-left: 0; margin-right: 0; }
.sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sh h2, .sh h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.sh small, .sh .more { font-size: 13px; color: var(--ink3); font-weight: 600; }
.mini { font-size: 12px; color: var(--ink3); line-height: 1.5; }
.btn { height: 52px; border-radius: var(--r-btn); background: var(--brand); color: #fff; font-size: 16px; font-weight: 800; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; }
.btn:active, .btn:hover { background: var(--brand-press); }
.btn.line { background: #fff; color: var(--ink); border: 1px solid var(--line); flex: none; padding: 0 18px; }
.btn.line:hover { background: #f7f8fa; }
.btn.sm { height: 40px; font-size: 14px; border-radius: 10px; flex: none; padding: 0 16px; }
.pillbtn { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px 0 12px; border-radius: 18px; background: var(--brand-50); color: var(--brand); font-size: 14px; font-weight: 700; border: 0; cursor: pointer; }
.pillbtn.active { background: var(--brand); color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(16px + var(--safe-bottom)); background: linear-gradient(to top, var(--bg) 72%, rgba(244, 245, 247, 0)); display: flex; gap: 10px; }
body:not(.detail) .cta { display: none; }

/* 목록 머리 */
#view-search .title-header-container { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 6px; padding: 0; border: 0; }
body:not([data-view="search"]) .title-header-container { display: block !important; text-align: left !important; border: 0; margin: 0 0 14px; padding: 0; }
body:not([data-view="search"]) .title-header-container h1, body:not([data-view="search"]) .title-header-container h2 { font-size: 22px !important; font-weight: 800; letter-spacing: -0.04em; margin: 4px 0 6px; }
body:not([data-view="search"]) .title-header-container p { font-size: 13.5px !important; color: var(--ink2); margin: 0 0 10px; }
#story-search-input { border-radius: 12px !important; border-color: var(--line) !important; }
#region-title { margin: 0; padding: 0; border: 0; font-size: 18px !important; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.35; }
.btn-random { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--brand-50); color: var(--brand); font-size: 12.5px; font-weight: 700; border: 0; white-space: nowrap; box-shadow: none; }
#sort-container { margin: 0 0 4px !important; }
#sort-select { height: 30px; border-radius: 15px !important; border: 1px solid var(--line) !important; padding: 0 10px !important; font-size: 12.5px !important; color: var(--ink2) !important; box-shadow: none !important; }
#product-list { display: block; }
#product-list > p { color: var(--ink2); font-size: 14px; }

/* 목록 줄 (ListRow) */
.prow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid #f0f2f4; background: none; text-align: left; cursor: pointer; color: inherit; text-decoration: none; font: inherit; }
.prow:first-of-type { border-top: 0; }
.prow .lead { width: 52px; height: 52px; border-radius: 14px; background: #f7f8fa; display: grid; place-items: center; flex: none; overflow: hidden; }
.prow .lead img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prow .lead img.icon { width: 30px; height: 30px; }
.prow .tx { flex: 1; min-width: 0; }
.prow .t1 { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .t2 { font-size: 12.5px; color: var(--ink3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .t3 { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.prow .tr { flex: none; color: #c4cad1; }
.tagx { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 800; background: #f2f4f6; color: var(--ink2); }
.tagx.ok { background: var(--ok-bg); color: var(--ok-ink); }
.tagx.green { background: var(--green-bg); color: var(--green-ink); }
.tagx.visit { background: #fdf0e6; color: #a0522d; }
.tagx.brand { background: var(--brand-50); color: var(--brand); }
#liquor-load-more-btn button { height: 44px !important; border-radius: 12px !important; background: #f2f4f6 !important; color: var(--ink) !important; box-shadow: none !important; font-weight: 700 !important; }

/* 지역 안내 카드 */
.pv-region { background: var(--green-bg); border: 1px solid var(--green-line); border-radius: var(--r-card); padding: 14px 16px; margin: 6px 0 12px; font-size: 13.5px; color: var(--ink); }
.pv-region h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--green-ink); }

/* ---------- 상세 화면 ---------- */
.appbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 8px; background: var(--bg); }
.appbar .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: none; border: 0; cursor: pointer; color: var(--ink); }
.appbar .abr { display: flex; gap: 6px; margin-right: 8px; }
.dt-head { padding: 4px 20px 14px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 12.5px; color: var(--ink3); margin-bottom: 6px; }
.crumbs a { color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dt-head h1 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.3; }
.dt-head .sub { font-size: 14px; color: var(--ink3); margin-top: 4px; }
.dt-head .badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.dt-photo { display: grid; place-items: center; height: 220px; background: #fff; border-radius: var(--r-card); margin: 0 16px 12px; overflow: hidden; }
.dt-photo img { max-height: 200px; max-width: 90%; object-fit: contain; }
.safety { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); }
.safety h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #6b4f00; }
.safety ul { margin: 0; padding: 0; list-style: none; }
.safety li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; padding: 3px 0; }
.safety li i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #b58b00; margin-top: 8px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 8px; }
.tile { background: #f7f8fa; border-radius: 12px; padding: 10px 8px; text-align: center; }
.tile small { display: block; font-size: 12px; color: var(--ink3); }
.tile b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.tile b span { font-size: 12px; color: var(--ink3); font-weight: 600; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; border-top: 1px solid #f0f2f4; }
.kv:first-of-type { border-top: 0; }
.kv span { color: var(--ink3); flex: none; } .kv b { font-weight: 700; text-align: right; }
.addr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; margin: 8px 0 4px; border-radius: 12px; background: #f7f8fa; border: 0; text-align: left; cursor: pointer; color: var(--ink); font-size: 14px; line-height: 1.45; }
.addr:hover { background: #eef0f3; }
.addr .ad-t { flex: 1; min-width: 0; }
.addr .ad-t small { display: block; font-size: 12px; color: var(--ink3); }
.addr .ad-go { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 800; }
.vtag { font-size: 12.5px; color: var(--ink2); }
.story-txt { font-size: 14.5px; line-height: 1.75; color: var(--ink); margin: 0; }
.quote { font-size: 14.5px; line-height: 1.7; color: var(--ink2); border-left: 3px solid var(--brand-100); padding-left: 12px; margin: 0; }
.note-ai { font-size: 12px; color: var(--ink3); margin-top: 10px; }
.note-ai a { color: var(--ink2); text-decoration: underline; }
.tn { background: #f7f8fa; border-radius: 12px; padding: 12px 14px; margin-top: 8px; font-size: 14px; line-height: 1.55; }
.tn b { display: block; font-size: 12.5px; color: var(--ink3); margin-bottom: 2px; }
.rv-form { display: flex; gap: 8px; margin: 6px 0 10px; }
.rv-form select, .rv-form input { height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font-size: 14px; background: #fff; }
.rv-form input { flex: 1; min-width: 0; }
.coll { display: flex; gap: 8px; }
.coll button { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.coll button.active { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); }
details.fix summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink2); list-style: none; }
details.fix summary::-webkit-details-marker { display: none; }
details.fix .form-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
details.fix .form-group label { font-size: 12px; color: var(--ink3); }
details.fix input { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font-size: 14px; }
details.fix .wide { grid-template-columns: 1fr; }
.product-award { background: #fff !important; border: 0 !important; border-radius: var(--r-card) !important; padding: 18px 20px !important; margin: 0 16px 12px !important; }
body:not(.detail) .product-award { margin: 0 0 12px !important; }
.product-award h4 { font-size: 17px !important; font-weight: 800 !important; color: var(--ink) !important; }
.pv-chip { border-radius: 6px !important; font-size: 11px !important; padding: 2px 7px !important; }
.pv-ok { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.pv-src { font-size: 12px; color: var(--ink3); margin-top: 6px; }
.pv-src a { color: var(--ink2) !important; text-decoration: underline; }
.pv-note { display: none; }
.buy-note { margin: 0; font-size: 12px; color: var(--ink3); text-align: center; padding: 0 20px 12px; }

/* 길찾기 앱 고르기 시트 */
.scrim { position: absolute; inset: 0; z-index: 60; background: rgba(25, 31, 40, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.scrim[hidden] { display: none; }
.modal { width: 100%; background: #fff; border-radius: 24px 24px 0 0; max-height: 88%; display: flex; flex-direction: column; animation: up 0.22s ease; }
@keyframes up { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.modal .mh { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.modal .mh h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.modal .mh button { font-size: 14px; color: var(--ink3); font-weight: 600; background: none; border: 0; cursor: pointer; }
.modal .mb { overflow-y: auto; padding: 0 20px calc(20px + var(--safe-bottom)); }
.navrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid #f0f2f4; background: none; text-align: left; cursor: pointer; }
.navrow:first-of-type { border-top: 0; }
.navrow .lead { width: 40px; height: 40px; border-radius: 14px; background: var(--brand-50); display: grid; place-items: center; flex: none; color: var(--brand); }
.navrow .t1 { font-size: 15px; font-weight: 700; }
.navrow .t2 { font-size: 12.5px; color: var(--ink3); }
.toast { position: absolute; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + 16px); z-index: 70; background: rgba(25, 31, 40, 0.92); color: #fff; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; text-align: center; }
.toast[hidden] { display: none; }

/* ---------- 다른 화면들 ---------- */
.ai-guide h2, #view-taste h2, #view-collection h2, #view-story h2, #view-worldcup h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
.ai-input input { border-radius: 12px !important; background: #fff; }
.ai-input button { border-radius: 12px !important; background: var(--brand) !important; }
.ai-intro { background: #fff !important; border-left: 0 !important; border-radius: var(--r-card) !important; }
.ai-card { border: 0 !important; border-radius: var(--r-card) !important; }
.ai-examples .hashtag { box-shadow: none; border: 1px solid var(--line) !important; }
.site-notice { margin: 24px 0 0; padding: 14px 4px 0; border-top: 1px solid var(--line); }
body.detail .site-notice { margin: 24px 20px 0; }
.floating-talk-btn { display: none !important; }
.card { box-shadow: none; }
.card:hover { transform: none; box-shadow: none; }

/* ---------- 카카오 지도 보기 (시군구 ↔ 지도 ↔ 위성, 양조장 핀) ---------- */
.maptype { display: flex; flex-direction: column; gap: 2px; width: 56px; margin: 4px 0 0 auto; padding: 3px; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.15); } /* 세로로 세워 동해 쪽 빈 바다 위에 둔다 */
.maptype[hidden] { display: none; }
.maptype button { height: 32px; padding: 0; border: 0; border-radius: 13px; background: transparent; color: var(--ink2); font-size: 13px; font-weight: 700; cursor: pointer; }
.maptype button.on { background: var(--ink); color: #fff; }
#kmap { position: absolute; inset: 0; z-index: 1; background: #e8edf2; }
#kmap[hidden] { display: none; }
#kmap:empty::after { content: "지도를 불러오는 중…"; position: absolute; left: 0; right: 0; top: 40%; text-align: center; color: var(--ink3); font-size: 14px; }
body.kmap-on #map-container > svg { visibility: hidden; }
.kpin-label { position: relative; bottom: 44px; padding: 5px 10px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.25); }

/* ---------- 지도 이름표: 확대 그룹 밖에서 위치만 옮김(글자 크기 고정), 보이고 숨김은 부드럽게 ---------- */
.map-labels .province-label { transition: opacity 0.2s; }
.map-labels .city-label { opacity: 0; transition: opacity 0.2s; }
.map-labels.zoomed .province-label { opacity: 0; }
.map-labels.zoomed .city-label { opacity: 1; }
#map-container svg { touch-action: none; }

/* ---------- 술팜 로고 대신 글자 ---------- */
.brandword { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }

/* ---------- 내 주변 양조장 ---------- */
.hashtag.busy { opacity: 0.6; }
.near-note { margin: 0 0 6px; }
.nrow { display: flex; align-items: center; gap: 8px; border-top: 1px solid #f0f2f4; }
.nrow:first-of-type { border-top: 0; }
.nrow .prow { flex: 1; min-width: 0; border-top: 0; }
.nrow .lead.km { background: var(--brand-50); color: var(--brand); font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; }
.ngo { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 16px; border: 0; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.map-labels .near-dot { fill: var(--brand); stroke: #fff; }
.map-labels .me-dot .halo { fill: rgba(49, 130, 246, 0.2); }
.map-labels .me-dot .core { fill: #3182f6; stroke: #fff; }
.kme { width: 16px; height: 16px; border-radius: 50%; background: #3182f6; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(49, 130, 246, 0.18), 0 2px 6px rgba(16, 24, 40, 0.3); }

/* ---------- 위치 켜기 안내 창 ---------- */
.lsteps { list-style: none; margin: 0; padding: 0; }
.lsteps li { display: flex; gap: 10px; padding: 9px 0; font-size: 14px; line-height: 1.55; color: var(--ink); border-top: 1px solid #f0f2f4; }
.lsteps li:first-child { border-top: 0; }
.lsteps .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.modal .mf { display: flex; gap: 8px; padding: 10px 20px calc(16px + var(--safe-bottom)); }
.loc-warn { background: #fff4e5; color: #8a4b00; border-radius: 10px; padding: 9px 12px; font-size: 13px; }

/* ---------- 서버가 미리 넣은 본문(검색엔진용, 화면에도 보임. 자바스크립트가 곧 같은 내용을 다시 그림) ---------- */
.ssr { font-size: 14px; line-height: 1.65; color: var(--ink2); }
.ssr h3 { font-size: 15px; color: var(--ink); margin: 14px 0 6px; }
.ssr a { color: var(--brand); text-decoration: none; }
.ssr ul { padding-left: 18px; }
.ssr-meta { color: var(--ink3); }
.ssr-list { list-style: none; margin: 8px 0; padding: 0 !important; }
.ssr-list li { padding: 9px 0; border-top: 1px solid #f0f2f4; }
.ssr-list li:first-child { border-top: 0; }
.ssr-list small { color: var(--ink3); margin-left: 4px; }
.ssr-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ssr-links a { padding: 5px 10px; border-radius: 999px; background: #f2f4f6; color: var(--ink2); font-size: 13px; }
.ai-examples button.hashtag { border: 1px solid var(--line) !important; cursor: pointer; font-family: inherit; text-align: left; height: auto; min-height: 34px; padding: 6px 12px; line-height: 1.35; }
.ai-examples .hashtag.more { color: var(--brand) !important; background: var(--brand-50) !important; border-color: transparent !important; }


/* ---------- 다른 탭(AI 길잡이·백과사전·월드컵·마이·취향 찾기)도 같은 규격으로 ----------
   제목 22px/800, 소제목 16px/700, 본문 14px(보조 13px), 흰 카드 16px 둥근 모서리(테두리·그림자 없음), 강조는 와인색.
   옛 화면은 HTML 안에 직접 쓴 스타일이 많아 !important 로 덮는다. */
body:not([data-view="search"]) .view-section h2 { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.04em; color: var(--ink) !important; margin: 4px 0 6px !important; text-align: left; }
body:not([data-view="search"]) .view-section h3 { font-size: 16px !important; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
body:not([data-view="search"]) .title-header-container { text-align: left !important; }
body:not([data-view="search"]) .title-header-container p { font-size: 13.5px !important; color: var(--ink2) !important; margin: 0 0 12px !important; }

/* AI 길잡이 */
.ai-guide { padding: 0; }
.ai-desc { font-size: 13.5px; color: var(--ink2); margin: 0 0 14px; }
.ai-input input { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; }
.ai-input input:focus { outline: none; border-color: var(--brand); }
.ai-input button { height: 48px; padding: 0 18px; border-radius: 12px; background: var(--brand); font-size: 15px; }
.ai-intro { background: #fff; border-left: 0; border-radius: 16px; padding: 14px 16px; font-size: 14.5px; }
.ai-card { border: 0; border-radius: 16px; padding: 14px; gap: 12px; }
.ai-card img { width: 56px; height: 56px; border-radius: 12px; background: #f7f8fa; }
.ai-card h4 { font-size: 15px; font-weight: 700; }
.ai-card .meta { font-size: 12.5px; color: var(--ink3); }
.ai-card .why { font-size: 14px; color: var(--ink2); }
.ai-card .tags span { background: var(--green-bg); color: var(--green-ink); border-radius: 6px; }
.ai-card a.more { color: var(--brand); font-size: 13px; }
.ai-foot { font-size: 12px; color: var(--ink3); }

/* 백과사전 */
#story-search-input { height: 48px !important; padding: 0 14px 0 40px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; font-size: 15px !important; box-shadow: none !important; background: #fff !important; }
#story-list-container { padding: 0 !important; }
#view-story .card { border: 0 !important; border-radius: 16px !important; box-shadow: none !important; margin: 0 0 12px !important; background: #fff !important; padding: 0 !important; }
#view-story .card:hover { transform: none !important; }
#view-story .card-header { display: flex !important; align-items: center; gap: 12px; background: #fff !important; border-bottom: 1px solid #f0f2f4 !important; padding: 14px 16px !important; }
#view-story .card-header > div:first-child { width: 64px !important; height: 64px !important; margin: 0 !important; padding: 4px !important; border-radius: 14px !important; box-shadow: none !important; background: #f7f8fa !important; flex: none; }
#view-story .product-title { font-size: 16px !important; font-weight: 800 !important; line-height: 1.35 !important; margin: 0 !important; color: var(--ink); }
#view-story .product-title small { display: block; font-size: 12.5px !important; font-weight: 500; color: var(--ink3) !important; margin-top: 2px; }
#view-story .card > div:not(.card-header) { padding: 14px 16px !important; }
#view-story .card h4 { font-size: 13.5px !important; font-weight: 700 !important; color: var(--ink) !important; margin: 0 0 6px !important; }
#view-story .card p { font-size: 14px !important; line-height: 1.65 !important; color: var(--ink2) !important; }
/* 구매 버튼만(새 창 링크 전체에 걸면 수상 출처·홈페이지 링크까지 와인색 바탕이 되어 글자가 안 보임) */
#view-story .card button, #view-story .card a.story-buy { font-size: 13px !important; border-radius: 10px !important; padding: 9px 14px !important; }
#view-story .card a.story-buy { background: var(--brand) !important; }

/* 취향 월드컵 */
#worldcup-setup { text-align: left !important; margin-top: 8px !important; }
#worldcup-setup h3 { margin: 0 0 12px !important; }
#worldcup-setup > div { gap: 8px !important; justify-content: stretch !important; }
.btn-worldcup-start { flex: 1; padding: 16px 0 !important; border-radius: 14px !important; border: 1px solid var(--line) !important; background: #fff !important; color: var(--ink) !important; font-size: 16px !important; font-weight: 800 !important; }
.btn-worldcup-start:hover { border-color: var(--brand) !important; color: var(--brand) !important; }
#worldcup-match { margin-top: 8px !important; }
#worldcup-round-title { font-size: 16px !important; color: var(--brand) !important; margin: 0 0 12px !important; }
.worldcup-match-container { position: relative; flex-direction: row !important; align-items: stretch !important; gap: 8px !important; }
.worldcup-card { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; padding: 12px !important; border: 2px solid transparent !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important; }
.worldcup-card:hover { border-color: var(--brand) !important; }
.worldcup-card .img-wrapper { height: 150px !important; margin-bottom: 10px !important; }
.worldcup-card h3 { font-size: 14.5px !important; line-height: 1.35; margin: 0 0 6px !important; }
.worldcup-card p { font-size: 12.5px !important; color: var(--ink3) !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.worldcup-vs-container { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); z-index: 2; }
.worldcup-vs-container span { display: grid; place-items: center; width: 40px; height: 40px; padding: 0 !important; font-size: 13px !important; background: var(--brand) !important; border: 3px solid #fff; box-shadow: none !important; }

/* 마이(내 컬렉션) */
.collection-container { display: flex !important; flex-direction: column; gap: 12px !important; }
.collection-box { border: 0 !important; border-radius: 16px !important; box-shadow: none !important; padding: 14px 16px !important; }
.collection-box h3 { color: var(--ink) !important; border-bottom: 1px solid #f0f2f4 !important; padding-bottom: 10px !important; margin: 0 0 8px !important; }
.collection-list { min-height: 0 !important; }
.collection-list > p { padding: 10px 0 !important; text-align: left !important; color: var(--ink3) !important; }
.collection-item { background: none !important; border-radius: 0 !important; border-top: 1px solid #f0f2f4; padding: 10px 0 !important; margin: 0 !important; font-size: 14px; }
.collection-item:first-child { border-top: 0; }
.collection-item:hover { transform: none !important; }

/* 취향 찾기 */
.taste-container { border: 0 !important; box-shadow: none !important; border-radius: 16px !important; padding: 20px 16px !important; text-align: left !important; }
.taste-container h2 { margin-bottom: 16px !important; }
.taste-step p { font-size: 16px !important; font-weight: 700 !important; color: var(--ink) !important; margin: 0 0 14px !important; }
.scale-buttons { gap: 6px !important; }
.scale-btn { flex: 1; min-width: 0; padding: 12px 0 !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: #fff !important; color: var(--ink) !important; font-size: 16px !important; font-weight: 800 !important; }
.scale-btn span { display: block; font-size: 10.5px !important; font-weight: 500; color: var(--ink3); margin-top: 2px; white-space: nowrap; }
.scale-btn:hover { border-color: var(--brand) !important; color: var(--brand) !important; }

/* ---------- AI 지역 술 여행 코스 ---------- */
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: #eef0f3; }
.seg.wrap { flex-wrap: wrap; }
.seg button { flex: 1; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink2); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08); }
.ai-mode { margin: 4px 0 14px; }
.course-form { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.cf-row { display: flex; flex-direction: column; gap: 6px; }
.cf-row > span { font-size: 12.5px; font-weight: 700; color: var(--ink3); }
.cf-row select { height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; font-family: inherit; color: var(--ink); }
.cf-near { align-self: flex-start; }
.course-head { background: #fff; border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.course-head h3 { margin: 0 0 4px; font-size: 17px !important; }
.course-head p { margin: 0 0 8px; font-size: 14px; color: var(--ink2); }
.course-day { background: #fff; border-radius: 16px; padding: 12px 16px; margin-bottom: 10px; }
.course-day h4 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.cstops { list-style: none; margin: 0; padding: 0; }
.cstop { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #f0f2f4; }
.cstop:first-child { border-top: 0; }
.cstop .ct { flex: none; width: 44px; font-size: 13px; font-weight: 800; color: var(--brand); padding-top: 1px; }
.cstop .cb { flex: 1; min-width: 0; }
.cstop .cn { font-size: 15px; font-weight: 700; color: var(--ink); }
.cstop .cn small { font-size: 11.5px; color: var(--ink3); font-weight: 600; margin-left: 4px; }
.cstop .cm { font-size: 12.5px; color: var(--ink3); margin-top: 2px; }
.cstop .cnote { font-size: 13px; color: #8a4b00; background: #fff4e5; border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
.cstop .chips { margin-top: 6px; }
.cfest { margin: 0; padding-left: 18px; font-size: 14px; }
.cfest small { color: var(--ink3); }
.course-safe { background: #fdecef; color: #7a1022; border-radius: 16px; padding: 12px 16px; margin-bottom: 10px; font-size: 13.5px; }
.course-safe ul { margin: 6px 0 0; padding-left: 18px; }
.course-form .btn { flex: none; height: 50px; }
.ai-q-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; line-height: 1.4; word-break: keep-all; }
.ai-card h4 a { color: inherit; text-decoration: none; }
.course-share { display: flex; gap: 8px; margin-top: 12px; }
.course-share .btn { flex: 1; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; }
.course-share .btn.kakao { background: #fee500; color: #191919; border: none; }
.course-share .btn.kakao:active { background: #f2d900; }
.course-share .btn.ghost { background: #fff; color: var(--ink); border: 1px solid #dfe3e8; }

/* 처음 안내(바텀시트, 다른 창과 같은 .scrim/.modal 위에) */
.modal.intro { max-height: 92%; }
.intro-hero { position: relative; padding: 20px 20px 2px; }
.intro-badge { width: 42px; height: 42px; border-radius: 13px; background: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(176, 22, 48, 0.28); }
.intro-hero h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.32; color: var(--ink); }
.intro-hero p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.intro-hero p b { color: var(--brand); font-weight: 700; }
.intro-x { position: absolute; top: 18px; right: 16px; font-size: 14px; font-weight: 600; color: var(--ink3); background: none; border: 0; cursor: pointer; padding: 6px; }
.intro-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.intro-list li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg); border-radius: 14px; }
.intro-list .ic { flex: none; width: 34px; height: 34px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--brand); font-weight: 800; }
.intro-list b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; letter-spacing: -0.02em; }
.intro-list .t { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.intro-age { margin: 10px 2px 0 !important; color: var(--ink3) !important; font-size: 12px !important; }