/* 기본 틀. 색은 src/themes/*.css 가 덮어씁니다 (기본: 딥 오션 블루) */
:root {
  --bg: #EEF4F6;
  --surface: #FFFFFF;
  --ink: #0E1A22;
  --muted: #4E6470;
  --line: rgba(14, 26, 34, 0.08);
  --accent: #1E6A8D;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(30, 106, 141, 0.1);
  --accent-soft-ink: #17546F;
  --heat-1: #D6E7EF;
  --heat-2: #A9CCDC;
  --heat-3: var(--accent);
  --heat-3-ink: var(--accent-ink);
  --pop: var(--accent);          /* 선택된 탭 등 눈에 띄는 색 */
  --pop-ink: var(--accent-ink);
  --map-land: #FFFFFF;
  --map-stroke: #C9D8DF;
  --map-hover: #E4EFF4;
  --map-sel: #CFE3EC;
  --map-zero: #F3F6F7;
  --map-zero-ink: #9AA9B0;
  --placeholder: #DCE6EA;
  --tag-bg: #E6EDF0;
  --tag-ink: #34474F;
  --row-line: #EDF1F3;
  --glow: rgba(30, 106, 141, 0.16);
  --cta-shadow: rgba(30, 106, 141, 0.7);
  --radius-card: 22px;
  --font-display: inherit;
  --page-deco: none;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-line: rgba(14, 26, 34, 0.07);
  --shadow: 0 1px 2px rgba(14, 26, 34, 0.05), 0 10px 24px -14px rgba(14, 26, 34, 0.22);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  word-break: keep-all;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a, button { transition: transform .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); -webkit-tap-highlight-color: transparent; }
a:active, button:active { transform: scale(.97); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 12px; }

.page {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--page-deco) no-repeat, radial-gradient(120% 420px at 90% -80px, var(--glow), transparent 70%), var(--bg);
}

.sample-banner { padding: 8px 12px; border-radius: 12px; background: #FFF4D6; color: #6B4E00; font-size: 13px; }

/* 상단 */
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 10px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); }
.icon-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, 0.74); border: 1px solid var(--line); color: var(--ink); }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs strong { color: var(--ink); font-weight: 600; }
.head-row { display: flex; align-items: center; gap: 10px; }
.head-row .grow { flex: 1; min-width: 0; }

h1, .brand { font-family: var(--font-display); }
h1 { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.035em; }
h1.sm { font-size: 21px; letter-spacing: -0.03em; }
h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.eyebrow { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 12px; font-weight: 600; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hint { font-size: 13px; color: var(--muted); }

/* 검색 */
.search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }

/* 조건 칩 */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(14, 26, 34, 0.1); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.chip[aria-pressed="true"], .chip.on { border-color: transparent; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip.on .x { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: -8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }

/* 전국 지도 */
.map-wrap { margin: 0 -16px; overflow: hidden; }
.zoom { width: 120%; margin-left: -10%; }
.nat-map { position: relative; }
.nat-map svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 12px 20px rgba(14, 26, 34, 0.12)); }
.nat-map .rg path { fill: var(--map-land); stroke: var(--map-stroke); stroke-width: 1; stroke-linejoin: round; transition: fill .4s var(--ease); }
.nat-map .rg:hover path { fill: var(--map-hover); }
.nat-map .rg.zero path { fill: var(--map-zero); }
.nat-map .pin.zero { opacity: .55; }
.nat-map .rg.sel path { fill: var(--map-sel); stroke: var(--accent); stroke-width: 2.2; }
.nat-map .rg:focus { outline: none; }
.nat-map .rg:focus-visible path { stroke: var(--ink); stroke-width: 2; }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; min-width: 40px; padding: 0 9px; white-space: nowrap; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(14, 26, 34, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 14px -8px rgba(14, 26, 34, 0.35); font-size: 11.5px; font-weight: 600; color: var(--ink); }
.pin:active { transform: translate(-50%, -50%) scale(.96); }
.pin:hover { background: #FFFFFF; color: var(--accent); }
.pin.sel { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* 선택 바 */
.map-hint { margin: -4px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.select-bar[hidden] { display: none; }
.select-bar .cta { width: 100%; }

/* 시·군 타일 */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 7px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; }
.tile small { font-size: 11px; font-weight: 500; color: var(--muted); }
.tile.h1 { background: var(--heat-1); box-shadow: none; }
.tile.h2 { background: var(--heat-2); box-shadow: none; }
.tile.h3 { background: var(--heat-3); color: var(--heat-3-ink); box-shadow: none; }
.tile.h3 small { color: rgba(255, 255, 255, 0.82); }
.tile.none { background: transparent; box-shadow: inset 0 0 0 1px rgba(14, 26, 34, 0.1); color: var(--muted); }
.legend { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.legend i { width: 14px; height: 14px; border-radius: 5px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(14, 26, 34, 0.12); }
.legend i.h1 { background: var(--heat-1); box-shadow: none; }
.legend i.h2 { background: var(--heat-2); box-shadow: none; }
.legend i.h3 { background: var(--heat-3); box-shadow: none; }

/* 큰 버튼 */
.cta { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 8px 0 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 700; box-shadow: 0 12px 28px -14px var(--cta-shadow); border: 0; font-family: inherit; cursor: pointer; }
.cta .arrow { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.cta.ghost { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.cta.ghost .arrow { background: var(--accent-soft); color: var(--accent); }

/* 목록 카드 (이중 테두리) */
.list { display: flex; flex-direction: column; gap: 12px; }
.card { display: block; padding: 5px; border-radius: var(--radius-card); background: rgba(14, 26, 34, 0.035); box-shadow: inset 0 0 0 1px rgba(14, 26, 34, 0.05); }
.card-in { display: flex; gap: 14px; padding: 10px; border-radius: calc(var(--radius-card) - 5px); background: var(--surface); box-shadow: 0 1px 2px rgba(14, 26, 34, 0.05); }
.thumb { width: 84px; height: 84px; flex-shrink: 0; border-radius: 12px; background: var(--placeholder); object-fit: cover; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; overflow: hidden; }
.card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.card-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag { padding: 3px 9px; border-radius: 999px; background: var(--tag-bg); color: var(--tag-ink); font-size: 12px; font-weight: 500; }
.tag.key { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 600; }
.count-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; min-height: 32px; }
.empty { padding: 28px 16px; border-radius: 18px; background: var(--surface); text-align: center; color: var(--muted); font-size: 14px; }

.ad-slot { display: flex; align-items: center; justify-content: center; min-height: 250px; border: 1px dashed rgba(14, 26, 34, 0.22); border-radius: 14px; color: var(--muted); font-size: 12px; }

/* 상세 */
.hero { position: relative; margin: -16px -16px 0; aspect-ratio: 390 / 250; background: var(--placeholder); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero .icon-btn { position: absolute; top: 14px; left: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); }
.hero .credit { position: absolute; right: 12px; bottom: 30px; padding: 3px 9px; border-radius: 999px; background: rgba(14, 26, 34, 0.7); color: #FFFFFF; font-size: 11px; }
.sheet { position: relative; margin: -34px -16px 0; padding: 20px 16px 0; border-radius: 22px 22px 0 0; background: var(--bg); display: flex; flex-direction: column; gap: 14px; }
.info { padding: 5px; border-radius: 22px; background: rgba(14, 26, 34, 0.035); box-shadow: inset 0 0 0 1px rgba(14, 26, 34, 0.05); }
.info dl { margin: 0; padding: 2px 14px; border-radius: 17px; background: var(--surface); }
.info .row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--row-line); }
.info .row:last-child { border-bottom: 0; }
.info dt { width: 92px; flex-shrink: 0; font-size: 13px; color: var(--muted); }
.info dt.key { color: var(--accent-soft-ink); font-weight: 600; }
.info dd { margin: 0; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.actions { display: flex; gap: 8px; }
.actions .cta { flex: 1; }
.near { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.near a { display: flex; flex-direction: column; gap: 6px; }
.near .ph { aspect-ratio: 16 / 10; border-radius: 14px; background: var(--placeholder); object-fit: cover; width: 100%; }
.near b { font-size: 14px; }
.near span { font-size: 12px; color: var(--muted); }

footer { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
footer a { text-decoration: underline; }

/* 전국 확장 */
.tile.long { font-size: 12.5px; text-align: center; line-height: 1.25; padding: 0 4px; }

/* 시·군·구 지도 */
.prov-map { position: relative; }
.prov-map svg { display: block; width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 12px 20px rgba(14, 26, 34, 0.12)); }
.prov-map path { fill: var(--map-land); stroke: #FFFFFF; stroke-width: 1.2; stroke-linejoin: round; transition: opacity .3s var(--ease); }
.prov-map a:hover path { opacity: 0.8; }
.prov-map .rg.sel path { stroke: var(--ink); stroke-width: 2.6; opacity: 1; }
.prov-map a:focus { outline: none; }
.prov-map a:focus-visible path { stroke: var(--ink); stroke-width: 2; }
.prov-map text { font-size: var(--fs, 11px); font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #FFFFFF; stroke-width: 3.5px; stroke-linejoin: round; cursor: pointer; }
h2.sub { font-size: 15px; margin-top: 4px; }
.tiles.auto { grid-auto-rows: 54px; }
.tile.sm { font-size: 13px; }

.sub-chips .chip { height: 38px; font-size: 13px; }
.sub-chips small { color: var(--muted); font-size: 12px; }

.prov-map .labels text[data-id] { cursor: pointer; }
.prov-map .labels text.sel { fill: var(--accent); }
.prov-map .leaders line { stroke: rgba(14, 26, 34, 0.45); stroke-width: 0.8; }
.prov-map .leaders circle { fill: rgba(14, 26, 34, 0.55); }
.inset rect { fill: rgba(255, 255, 255, 0.5); stroke: var(--map-stroke); stroke-width: 1; stroke-dasharray: 3 2; }
.inset text { font-size: 7.5px; font-weight: 600; fill: var(--muted); stroke: none; paint-order: normal; text-anchor: start; dominant-baseline: auto; pointer-events: none; cursor: default; }
.inset text.dokdo { text-anchor: middle; font-size: 7px; }

.nearby { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.nearby .list { gap: 8px; }
.nearby .cta { font-size: 14px; font-weight: 600; }
.nearby .cta small { margin-left: 6px; margin-right: auto; font-weight: 500; color: var(--muted); }

.source { margin: -4px 2px 0; font-size: 12px; color: var(--muted); }

.tile.off { opacity: 0.45; box-shadow: inset 0 0 0 1px rgba(14, 26, 34, 0.08); background: transparent; }
.chip small { font-size: 12px; opacity: 0.7; }
.prov-map .labels text.off { fill: var(--map-zero-ink); cursor: default; }
.prov-map path.h1 { fill: var(--heat-1); }
.prov-map path.h2 { fill: var(--heat-2); }
.prov-map path.h3 { fill: var(--heat-3); }
.prov-map path.zero { fill: var(--map-zero); }

/* 여행지 · 카페 · 숙소 탭 */
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.kind { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 46px; padding: 0 6px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.kind small { font-size: 11.5px; font-weight: 500; opacity: .8; }
.kind .ki { display: flex; }
.kind:hover { color: var(--ink); }
.kind.on { background: var(--pop); color: var(--pop-ink); }
.kind.off { opacity: .4; cursor: default; }

/* 사진이 없을 때 발자국 */
.ph-paw { color: var(--accent); opacity: .55; }
.ph-paw svg { width: 30px; height: 30px; }
.ph-paw.big svg { width: 56px; height: 56px; }

/* ===== 앱 스타일 (요즘 모바일 앱처럼) ===== */
html { scroll-behavior: smooth; }
body { font-variant-numeric: tabular-nums; }
.top-mark { position: absolute; top: 0; height: 1px; width: 1px; }
.page { position: relative; }
.page.has-dock { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
h1 { text-wrap: balance; }

/* 상세 페이지 아래 고정 버튼 */
.dock { position: fixed; z-index: 40; left: 50%; bottom: 0; transform: translateX(-50%); width: min(480px, 100%); display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--glass); border-top: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.dock .cta { flex: 1; }
.dock-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 64px; flex-shrink: 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink); }

/* 스크롤하면 붙는 상단 바 */
.appbar { position: sticky; top: 0; z-index: 30; margin: -16px -16px 0; padding: 12px 16px; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
body.scrolled .appbar { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 var(--glass-line); }
.appbar .icon-btn { border-radius: 999px; }

/* 홈 인사 */
.topbar { margin-bottom: -2px; }
.topbar .icon-btn { border-radius: 999px; }
.hello { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 4px; }
.hello h1 { font-size: 32px; line-height: 1.22; font-weight: 800; letter-spacing: -0.04em; }
.eyebrow { display: inline-flex; align-items: center; gap: 5px; }
.eyebrow svg { width: 14px; height: 14px; }
.tag.key { display: inline-flex; align-items: center; gap: 3px; }
.tag.key svg { width: 12px; height: 12px; }

/* 가로 추천 줄 */
.rail { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.rail-head { display: flex; flex-direction: column; gap: 2px; }
.rail-head h2 { font-size: 19px; letter-spacing: -0.03em; }
.rail-row { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; scroll-snap-type: x mandatory; scroll-padding: 16px; scrollbar-width: none; }
.rail-row::-webkit-scrollbar { display: none; }
.rc { position: relative; flex: 0 0 152px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px; }
.rc img, .rc-ph { width: 152px; height: 188px; border-radius: 20px; object-fit: cover; background: var(--placeholder); box-shadow: 0 10px 22px -14px var(--cta-shadow); }
.rc-ph { display: flex; align-items: center; justify-content: center; }
.rc-ph svg { width: 44px; height: 44px; }
.rc b { margin-top: 6px; font-size: 14.5px; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc span { font-size: 12px; color: var(--muted); }
.rc .rc-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font-size: 11px; font-weight: 700; }

/* 들어올 때 떠오르기 */
.rv { opacity: 0; transform: translateY(14px); }
.rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }

/* 목록·상세 다듬기 */
.card-title { font-size: 16.5px; }
.thumb { width: 88px; height: 88px; border-radius: 16px; }
.hero { aspect-ratio: 4 / 3; }
.sheet { border-radius: 28px 28px 0 0; }
.sheet h1 { font-size: 26px; font-weight: 800; }
.kinds { position: relative; }
.kind { transition: background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease); }

/* 광고 자리 (실제 광고가 들어오기 전에도 높이를 잡아 화면이 밀리지 않게) */
.ad-slot.live { display: block; border: 0; min-height: 250px; }
.ad-slot.live ins { min-height: 250px; }
.icon-btn.ghost { margin-left: auto; background: transparent; border-color: transparent; }
.foot-links { display: flex; gap: 14px; margin-bottom: 6px; font-weight: 600; color: var(--ink); }
.foot-links a { text-decoration: none; }
.doc { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.7; }
.doc h2 { margin-top: 12px; font-size: 16px; }
.doc p { margin: 0; }
.doc a { text-decoration: underline; }

/* ---- 테마: butter ---- */
/* 버터 · 꿀빛 노랑 + 따뜻한 먹색 */
/* font: https://fonts.googleapis.com/css2?family=Jua&display=swap */
:root {
  --bg: #FFF9EC;
  --surface: #FFFFFF;
  --ink: #2A2118;
  --muted: #7A6B57;
  --line: rgba(42, 33, 24, 0.08);
  --accent: #F2B62C;
  --accent-ink: #2A2118;
  --accent-soft: #FFEFC2;
  --accent-soft-ink: #7A5300;
  --pop: #F6C945;
  --pop-ink: #2A2118;
  --heat-1: #FFF1C7;
  --heat-2: #FBD76E;
  --heat-3: #EFA91B;
  --heat-3-ink: #2A2118;
  --map-stroke: #EFE0B6;
  --map-hover: #FFF4D1;
  --map-sel: #FBE08A;
  --map-zero: #F7F2E4;
  --map-zero-ink: #B6AA8F;
  --placeholder: #F6ECCF;
  --tag-bg: #F6EFDC;
  --tag-ink: #5A4B38;
  --row-line: #F4ECD9;
  --glow: rgba(246, 201, 69, 0.45);
  --cta-shadow: rgba(196, 140, 20, 0.45);
  --glass: rgba(255, 252, 243, 0.8);
  --glass-line: rgba(42, 33, 24, 0.07);
  --radius-card: 24px;
  --page-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='150'%3E%3Cg transform='translate%28150 28%29 rotate%2820%29 scale%281.1%29' fill='%23F6C945' fill-opacity='0.5'%3E%3Cellipse cx='0' cy='6' rx='7' ry='6'/%3E%3Cellipse cx='-8' cy='-3' rx='3' ry='4'/%3E%3Cellipse cx='-3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='8' cy='-3' rx='3' ry='4'/%3E%3C/g%3E%3Cg transform='translate%28118 70%29 rotate%28-10%29 scale%280.9%29' fill='%23F6C945' fill-opacity='0.5'%3E%3Cellipse cx='0' cy='6' rx='7' ry='6'/%3E%3Cellipse cx='-8' cy='-3' rx='3' ry='4'/%3E%3Cellipse cx='-3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='8' cy='-3' rx='3' ry='4'/%3E%3C/g%3E%3Cg transform='translate%28158 108%29 rotate%2825%29 scale%280.8%29' fill='%23F6C945' fill-opacity='0.5'%3E%3Cellipse cx='0' cy='6' rx='7' ry='6'/%3E%3Cellipse cx='-8' cy='-3' rx='3' ry='4'/%3E%3Cellipse cx='-3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='8' cy='-3' rx='3' ry='4'/%3E%3C/g%3E%3Cg transform='translate%28126 140%29 rotate%28-5%29 scale%280.6%29' fill='%23F6C945' fill-opacity='0.5'%3E%3Cellipse cx='0' cy='6' rx='7' ry='6'/%3E%3Cellipse cx='-8' cy='-3' rx='3' ry='4'/%3E%3Cellipse cx='-3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='8' cy='-3' rx='3' ry='4'/%3E%3C/g%3E%3C/svg%3E") right -8px top 92px / 180px auto;
}
.brand { font-family: 'Jua', 'Pretendard Variable', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: -0.01em; }
.brand-mark { background: var(--pop); color: var(--ink); border-radius: 999px; }
.chip, .kind, .cta { border-radius: 999px; }
.kinds { border-radius: 999px; }
.tile.h3 small { color: rgba(42, 33, 24, 0.7); }
:focus-visible { outline-color: var(--ink); }
.prov-map .labels text.sel { fill: var(--ink); }