:root{--sky:#38bdf8;--sky-dark:#0369a1;--gold:#fbbf24;--ink:#0f172a;--sub:#64748b;--line:#e2e8f0;--bg:#f8fafc;--card:#ffffff;--warn:#dc2626}
:root[data-theme="dark"]{--ink:#e5edf5;--sub:#93a4b8;--line:#263344;--bg:#0b1420;--card:#111d2c;--sky-dark:#38bdf8;--warn:#f87171}
:root[data-theme="dark"] .hero .temp{color:var(--sky)}
:root[data-theme="dark"] .advice-result{background:#0f2536}
:root[data-theme="dark"] .interest-chips button{background:#16273a;color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .ad{border-color:var(--line)}
:root[data-theme="dark"] .topbar{background:linear-gradient(135deg,#0f2942,#0a121c);box-shadow:0 2px 10px rgba(0,0,0,.45)}
:root[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,.16)}
:root[data-theme="dark"] .gnb a:hover,:root[data-theme="dark"] .gnb a.on{background:rgba(255,255,255,.1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Malgun Gothic","맑은 고딕",AppleSDGothicNeo,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a{color:inherit;text-decoration:none}
.wrap{max-width:920px;margin:0 auto;padding:0 16px}
.topbar{background:linear-gradient(135deg,var(--sky),var(--sky-dark));color:#fff;position:sticky;top:0;z-index:10;box-shadow:0 2px 8px rgba(2,132,199,.25)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px}
.brand-en{font-size:11px;opacity:.85;font-weight:600;display:block}
.gnb{display:flex;align-items:center;gap:4px}
.gnb a{font-size:14px;font-weight:600;padding:8px 10px;border-radius:8px;opacity:.9;white-space:nowrap}
.gnb a:hover,.gnb a.on{background:rgba(255,255,255,.18)}
/* 메뉴가 5개로 늘어나 좁은 화면에서 글자가 한 글자씩 줄바꿈되며 깨지는 문제 방지 —
   같은 목적지로 갈 수 있는 하단 고정 탭바가 이미 있으므로 모바일에서는 상단 메뉴
   링크만 숨기고(다크모드 버튼은 유지) 하단 탭바로 내비게이션을 대신한다. */
@media (max-width:640px){.gnb a{display:none}}
.theme-toggle{background:rgba(255,255,255,.16);border:none;color:#fff;border-radius:8px;padding:6px 10px;font-size:15px;cursor:pointer;line-height:1}
.theme-toggle:hover{background:rgba(255,255,255,.28)}
.crumb{font-size:13px;color:var(--sub);padding:14px 0 0}
.crumb a:hover{text-decoration:underline}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:12px 0 4px;border-bottom:1px solid var(--line)}
.tabs a{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:#eef2f7;font-weight:700;font-size:14px;color:var(--sub)}
.tabs a.on{background:var(--sky);color:#fff}
.alertbanner{margin:16px 0 0;border-radius:14px;overflow:hidden;border:1px solid #fca5a5;background:#fef2f2}
.alertbanner.blink-now{animation:alertBlink .6s ease-in-out 5}
:root[data-theme="dark"] .alertbanner{border-color:#7f1d1d;background:#1f1315}
@keyframes alertBlink{0%,100%{opacity:1}50%{opacity:.35}}
.alert-item{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px;color:#991b1b}
:root[data-theme="dark"] .alert-item{color:#fca5a5}
.alert-item+.alert-item{border-top:1px solid #fecaca}
:root[data-theme="dark"] .alert-item+.alert-item{border-top:1px solid #7f1d1d}
.alert-icon{font-size:20px}
.temp-alarm{display:none;margin:16px 0 0;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid #fca5a5;background:#fef2f2;color:#991b1b;font-size:13px;font-weight:700}
:root[data-theme="dark"] .temp-alarm{border-color:#7f1d1d;background:#1f1315;color:#fca5a5}
.temp-alarm.blinking{animation:alertBlink .6s ease-in-out 5}
.temp-alarm-icon{font-size:20px}
.hero{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin:16px 0}
.hero .icon{font-size:56px}
.hero h1{font-size:22px;margin:0 0 4px}
.fav-btn{border:none;background:none;font-size:20px;cursor:pointer;vertical-align:middle;color:var(--gold);margin-left:4px;line-height:1}
.hero .temp{font-size:40px;font-weight:800;color:var(--sky-dark)}
.hero .desc{color:var(--sub);font-size:14px}
.hero-hilo{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.hhl-hi{font-weight:800;font-size:15px;color:#dc2626}
.hhl-lo{font-weight:800;font-size:15px;color:var(--sky-dark)}
.hhl-bar{width:6px;border-radius:999px;background:linear-gradient(180deg,#f87171,var(--sky-dark))}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 16px}
.hstat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 6px;text-align:center}
.hstat .hi{font-size:22px;margin-bottom:4px}
.hstat .hl{font-size:12px;color:var(--sub);margin-bottom:2px}
.hstat .hv{font-size:15px;font-weight:800}
@media (max-width:420px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
.day-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 0}
.day-tabs button{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 0;font-size:15px;font-weight:800;color:var(--sub);cursor:pointer}
.day-tabs button.on{background:var(--sky-dark);border-color:var(--sky-dark);color:#fff}
.day-panel{margin-top:12px}
.ht-icon{font-size:22px}
.ht-temp{font-weight:800;margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:14px 0}
.gitem{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.gitem .t{font-size:12px;color:var(--sub)}
.gitem .i{font-size:22px;margin:4px 0}
.gitem .v{font-weight:700}
.section-title{font-size:16px;font-weight:800;margin:22px 0 10px;display:flex;align-items:center;gap:6px}
.collapsible{margin:0}
.collapsible summary{cursor:pointer;list-style:none;user-select:none}
.collapsible summary::-webkit-details-marker{display:none}
.collapsible summary::after{content:'▾';margin-left:auto;color:var(--sub);transition:transform .2s}
.collapsible[open] summary::after{transform:rotate(180deg)}
.page-title{font-size:21px;font-weight:800;margin:14px 0 6px;display:flex;align-items:center;gap:6px}
.md-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:16px 0}
table.md-table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
table.md-table th,table.md-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
table.md-table thead th{background:#f1f5f9;color:var(--ink);font-weight:800}
:root[data-theme="dark"] table.md-table thead th{background:#16273a}
.wk-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);margin:14px 0}
table.wk-table{border-collapse:collapse;width:100%;font-size:13px;min-width:560px}
table.wk-table th,table.wk-table td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
table.wk-table thead th{background:#f1f5f9;color:var(--ink);font-weight:800;font-size:13px;line-height:1.4}
:root[data-theme="dark"] table.wk-table thead th{background:#16273a}
table.wk-table th:first-child,table.wk-table td:first-child{width:52px;min-width:52px;max-width:52px}
table.wk-table tbody td:first-child,table.wk-table tbody th:first-child{text-align:left;font-weight:700;color:var(--sub);background:var(--card);position:sticky;left:0;padding-left:8px;padding-right:6px;font-size:12px;line-height:1.3}
table.wk-table thead th.wk-sat{color:#2563eb}
table.wk-table thead th.wk-sun{color:#dc2626}
:root[data-theme="dark"] table.wk-table thead th.wk-sat{color:#7dd3fc}
:root[data-theme="dark"] table.wk-table thead th.wk-sun{color:#fca5a5}
.wk-icon{font-size:26px}
.wk-desc{font-size:12px;color:var(--sub);margin-top:2px}
.wk-temp-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.wk-hi{font-weight:800;color:#dc2626}
.wk-lo{font-weight:800;color:var(--sky-dark)}
.wk-bar{width:6px;border-radius:999px;background:linear-gradient(180deg,#f87171,var(--sky-dark))}
.nearby{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}
.nearby a{background:#eef2f7;color:#0f172a;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.nearby a:hover{background:#e0e7ef}
:root[data-theme="dark"] .nearby a{background:#16273a;color:var(--ink)}
:root[data-theme="dark"] .nearby a:hover{background:#1c3149}
.updated{font-size:12px;color:var(--sub);margin:6px 0 0}
.note{font-size:12px;color:var(--sub);margin:8px 0}
.searchbox{margin:18px 0}
.searchbox input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);font-size:15px}
.geo-btn{width:100%;padding:13px 14px;border-radius:12px;border:none;background:var(--sky-dark);color:#fff;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;margin-bottom:8px}
.geo-btn:hover{opacity:.92}
.geo-btn:disabled{opacity:.6;cursor:default}
.sidogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:16px 0}
.sidogrid a{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;font-weight:700;text-align:center}
.sidogrid a:hover{border-color:var(--sky)}
.regionlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:16px 0}
.regionlist a{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;font-weight:600}
.regionlist a:hover{border-color:var(--sky)}
.comparebox{display:flex;align-items:center;gap:10px;margin:16px 0}
.comparebox select{flex:1;min-width:0;padding:12px 10px;border-radius:12px;border:1px solid var(--line);font-size:14px;background:var(--card);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-vs{font-weight:800;color:var(--sub)}
.compare-result{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.cmp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;min-width:0}
.cmp-card h3{margin:0 0 6px;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-icon{font-size:36px}
.cmp-temp{font-size:26px;font-weight:800;color:var(--sky-dark)}
.cmp-desc{color:var(--sub);font-size:13px;margin-bottom:8px}
.cmp-row{font-size:13px;color:var(--sub);border-top:1px solid var(--line);padding:6px 0}
.island-banner{display:block;background:var(--sky-dark);color:#fff;font-weight:700;text-align:center;padding:12px;border-radius:12px;margin:14px 0}
.island-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.island-card{display:block;cursor:pointer}
.island-card:hover{border-color:var(--sky)}
.island-tip{font-size:12px;color:var(--sub);border-top:1px solid var(--line);padding:6px 0 0;margin-top:6px}
.island-unified-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:16px 0}
.island-unified-card.is-expanded{grid-column:1 / -1}
@media (max-width:600px){
  .island-unified-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .island-unified-card{padding:10px 12px}
  .island-unified-card .island-mascot{width:56px;height:56px}
  .island-unified-card .island-mascot-emoji{width:56px;height:56px;font-size:28px}
  .island-unified-name{font-size:14px}
  .island-unified-hook{font-size:11px}
}
.island-unified-card{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:box-shadow .15s,transform .15s}
.island-unified-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.06);transform:translateY(-1px)}
.island-unified-head{all:unset;display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;box-sizing:border-box}
.island-mascot{display:block;width:80px;height:80px;object-fit:contain;flex:none}
.island-mascot-emoji{width:80px;height:80px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:40px;flex:none}
.island-unified-headtext{flex:1;min-width:0}
.island-unified-name{display:block;font-size:15px;font-weight:800}
.island-unified-hook{display:block;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.island-unified-chevron{color:var(--sub);transition:transform .15s;flex:none}
.island-unified-badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.island-badge-temp{font-size:13px;font-weight:800}
.island-badge-wave{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px}
.island-unified-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.island-unified-links{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.island-unified-card .nav-link{display:inline-block;font-size:13px;font-weight:700;color:var(--sky-dark);text-decoration:underline}
.wave-badge-ok{background:#dcfce7;color:#15803d}
.wave-badge-warn{background:#fef3c7;color:#b45309}
.wave-badge-danger{background:#fee2e2;color:#b91c1c}
.wave-badge-neutral{background:var(--bg);color:var(--sub)}
.island-ferry-weather{font-size:13px;color:var(--sub);margin:0 0 8px}
.island-ferry-info{text-align:left;border-top:1px solid var(--line);padding-top:10px;margin-bottom:10px}
.island-ferry-info p{display:flex;gap:6px;align-items:flex-start;font-size:13px;color:var(--sub);line-height:1.6;margin:0}
.island-ferry-info p strong{color:var(--ink);font-weight:800}
.island-ferry-info p+p{margin-top:6px}
.island-ferry-caution{font-size:12px;color:#b45309;background:#fef3c7;text-align:left;line-height:1.5;margin:0 0 8px;padding:8px 10px;border-radius:8px}
:root[data-theme="dark"] .island-ferry-caution{background:#3a2c0f;color:#fbbf7a}
.island-ferry-more{display:inline-block;font-size:12px;font-weight:700;color:var(--sky-dark)}
/* 지역 선택(위 comparebox)이 항상 좌우 배치이므로, 아래 상세 비교 카드도 모바일에서
   상하로 쌓이지 않고 계속 좌우 2열을 유지하도록 한다 — 대신 좁은 화면에서는
   패딩·폰트를 줄여 카드 안 내용이 잘리지 않게 한다. */
@media (max-width:420px){
  .cmp-card{padding:10px 8px}
  .cmp-card h3{font-size:13px}
  .cmp-icon{font-size:28px}
  .cmp-temp{font-size:20px}
  .cmp-desc{font-size:11px}
  .cmp-row{font-size:11px;padding:4px 0}
  .comparebox{gap:6px}
  .comparebox select{font-size:12px;padding:10px 4px}
  .cmp-vs{font-size:12px}
  .save-combo-btn{padding:0 8px;font-size:15px}
}
.outfit-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;min-width:0}
.outfit-card img{width:100%;aspect-ratio:2/3;object-fit:contain;border-radius:10px;display:block;margin-bottom:10px;background:var(--sky-dark);cursor:zoom-in}
.outfit-card-empty{display:flex;align-items:center;justify-content:center;color:var(--sub);min-height:120px}
.outfit-card-links{display:flex;flex-direction:column;gap:6px}
.outfit-card-links .buy-btn{margin-top:0;padding:9px 6px;font-size:13px}
@media (max-width:420px){
  .outfit-card{padding:8px}
  .outfit-card-links .buy-btn{font-size:11px;padding:7px 4px}
}
.mode-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}
.mode-tabs button{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 0;font-size:14px;font-weight:800;color:var(--sub);cursor:pointer;font-family:inherit}
.mode-tabs button.on{background:var(--sky-dark);border-color:var(--sky-dark);color:#fff}
.saved-combos{display:flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.saved-combos-label{font-size:12px;color:var(--sub);font-weight:700;flex-shrink:0}
.saved-combos-list{display:flex;gap:6px;flex-wrap:wrap}
.saved-combo-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px;font-size:12px;color:var(--ink)}
.saved-combo-chip button{border:none;background:none;color:var(--sub);cursor:pointer;font-size:12px;padding:2px;line-height:1}
.save-combo-btn{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:0 14px;font-size:18px;cursor:pointer;color:var(--gold)}
.cmp-summary{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 16px;font-size:14px;line-height:1.6}
.cmp-summary strong{color:var(--sky-dark)}
.cmp-mode-panel{margin:0 0 16px}
.cmp-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.cmp-panel-grid{grid-template-columns:1fr}}
.cmp-panel-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.cmp-panel-card h4{margin:0 0 8px;font-size:14px}
.cmp-panel-card ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7}
.cmp-panel-card p{margin:0;font-size:13px;line-height:1.6;color:var(--sub)}
.cmp-chart-wrap{margin:20px 0}
.cmp-chart{width:100%;height:auto;aspect-ratio:600/220;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;box-sizing:border-box}
.cmp-chart-note{margin:2px 0 8px;font-size:12px}
.cmp-chart-legend{display:flex;flex-wrap:wrap;row-gap:4px;column-gap:16px;justify-content:center;margin-top:8px;font-size:12px;color:var(--sub)}
.cmp-legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.cmp-legend-bar{display:inline-block;width:14px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle;opacity:.5}
.cmp-legend-a{background:#38bdf8}
.cmp-legend-b{background:#f97316}
.share-block{margin:16px 0 0}
.share-label{display:block;font-weight:800;font-size:14px;color:var(--ink);margin-bottom:8px}
.share-btn-row{display:flex;gap:8px}
.share-btn{flex:1;border:none;border-radius:14px;padding:14px 6px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;color:#fff}
.share-btn:hover{opacity:.92}
.share-btn-kakao{background:#fee500;color:#3c1e1e}
.share-btn-sms{background:linear-gradient(135deg,#38bdf8,#0284c7)}
.share-btn-copy{background:linear-gradient(135deg,#94a3b8,#64748b)}
.share-status{margin:8px 0 0;text-align:center}
.img-zoom-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);display:flex;flex-direction:column}
.img-zoom-toolbar{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px}
.img-zoom-btn{width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:16px;cursor:pointer}
.img-zoom-btn:hover{background:rgba(255,255,255,.28)}
.img-zoom-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
.img-zoom-stage.is-dragging{cursor:grabbing}
.img-zoom-stage img{max-width:90%;max-height:90%;user-select:none;-webkit-user-drag:none}
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:16px 0 30px}
.col-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block}
.col-card:hover{border-color:var(--sky)}
.col-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--sky-dark)}
.col-card-body{padding:12px 14px}
.col-card-body h3{font-size:15px;margin:0 0 6px}
.col-card-body p{font-size:13px;color:var(--sub);margin:0 0 8px;line-height:1.5}
.col-date{font-size:12px;color:var(--sub)}
.cat-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin:16px 0 30px}
/* 카테고리(중분류)별 글 묶음의 경계가 흐릿하다는 피드백 반영 — 옅은 배경+테두리로
   그룹 전체를 감싸서, 안쪽의 흰색 대표 카드·목록형 글과 시각적으로 구분되게 한다. */
.cat-topic{display:flex;flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:14px}
.cat-mini-list{display:flex;flex-direction:column;gap:6px}
.cat-mini-item{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;text-decoration:none;color:inherit}
.cat-mini-item img{width:104px;height:104px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--sky-dark)}
.cat-mini-body{min-width:0}
.cat-mini-body h4{font-size:14px;margin:0 0 4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat-mini-body .cat-mini-date{font-size:11px;color:var(--sub);margin:0}
.col-hero{width:100%;max-width:680px;display:block;border-radius:16px;margin:14px auto}
.col-body{max-width:680px;margin:0 auto;font-size:16px;line-height:1.9}
.col-body h2{font-size:19px;margin:34px 0 12px}
.col-body p{margin:0 0 18px}
.col-body ul{margin:0 0 18px;padding-left:20px}
.col-body li{margin-bottom:8px}
.col-body img{max-width:100%;border-radius:12px;margin:6px 0}
.col-body mark.kw{background:#fff5b1;color:#1f2937;padding:2px 4px;border-radius:4px;font-weight:700}
:root[data-theme="dark"] .col-body mark.kw{background:#4a3f14;color:#fef3c7}
.back-link{font-weight:700;color:var(--sky-dark)}
.colpreview{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:14px 0 30px}
.colpreview a{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:block;font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .15s ease,box-shadow .15s ease}
.colpreview a:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.09)}
.colpreview a img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.colpreview a span{display:block;padding:8px 10px}
.ad{margin:18px 0;padding:10px;border:1px dashed var(--line);border-radius:10px;text-align:center;color:var(--sub);font-size:12px}
.foot{border-top:1px solid var(--line);margin-top:32px;padding:22px 0 40px;color:var(--sub);font-size:13px}
.foot a{margin-right:10px}
.foot a:hover{text-decoration:underline}
.foot .src{margin-top:10px;font-size:12px}
.hometitle{padding:36px 0 8px;display:flex;align-items:center;gap:16px}
.hometitle-mascot{width:76px;height:76px;object-fit:contain;flex:0 0 auto}
.hometitle-text{min-width:0}
.hometitle h1{font-size:26px;margin:0 0 6px}
.hometitle p{color:var(--sub)}
@media (max-width:480px){.hometitle-mascot{width:56px;height:56px}}
/* 홈페이지 "바로가기" 그리드 - 토스뱅크류 앱의 둥근 카드+부드러운 그림자+호버 시
   살짝 떠오르는 느낌을 참고했다. 다른 페이지와 공유하지 않는 홈 전용 클래스라
   여기 값만 조정해도 다른 화면에는 영향이 없다. */
.quick-link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin:14px 0 26px}
.quick-link-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;background:var(--card);border:1px solid var(--line);border-radius:20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.quick-link-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.09);border-color:var(--sky)}
.quick-link-icon{width:42px;height:42px;object-fit:contain}
.quick-link-text{font-size:12px;font-weight:700;color:var(--ink);line-height:1.3}
/* 지역 페이지와 마크업을 공유하는 .hero/.hero-stats/.life-index는 그대로 두고,
   홈페이지에서만 붙는 id로만 부드러운 그림자·더 둥근 모서리를 얹는다 - 지역
   페이지 300여 개는 이 규칙의 영향을 받지 않는다. */
#homeWeatherCard.hero{border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
#hwStats .hstat{border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
#lifeIndexCard.life-index{border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
#lifeIndexCard .li-item{border-radius:14px}
.popular{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0 30px}
.popular a{background:linear-gradient(135deg,var(--sky),var(--sky-dark));color:#fff;border-radius:18px;padding:14px;display:block;box-shadow:0 4px 14px rgba(56,189,248,.22);transition:transform .15s ease,box-shadow .15s ease}
.popular a:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(56,189,248,.3)}
.pc-name{display:block;font-weight:800;font-size:14px}
.pc-tip{display:block;font-size:11px;color:rgba(255,255,255,.9);margin-top:3px}
.interestbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.interest-chips{display:flex;flex-wrap:wrap;gap:8px}
.interest-chips button{border:1px solid var(--line);background:#eef2f7;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);font-family:inherit}
.interest-chips button:hover{border-color:var(--sky)}
.interest-chips button.on{background:var(--sky);border-color:var(--sky);color:#fff}
@keyframes chipBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.08)}}
.interest-chips button.chip-blink{animation:chipBlink .66s ease-in-out 3}
.advice-result{margin:12px 0 0;font-size:14px;background:#f0f9ff;border-radius:10px;padding:14px 16px}
:root[data-theme="dark"] .advice-result{background:#0f2536}
.advice-verdict{font-size:15px;margin-bottom:6px}
.advice-desc{margin:0 0 8px;color:var(--sub);line-height:1.6}
.advice-list{margin:0;padding-left:20px}
.advice-list li{margin-bottom:5px;line-height:1.5}
.product-teaser:empty{display:none}
.product-teaser .product-card{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:10px}
.product-teaser .product-card:hover{border-color:var(--sky)}
.product-teaser .product-card img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.product-card-body h4{margin:2px 0 2px;font-size:14px}
.product-card-body p{margin:0;font-size:12px;color:var(--sub)}
.product-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--sky-dark);background:#e0f2fe;border-radius:999px;padding:2px 8px;margin-bottom:3px}
:root[data-theme="dark"] .product-tag{background:#0c3a52;color:var(--sky)}
.buy-btn{display:block;text-align:center;background:#ff5e39;color:#fff;font-weight:800;font-size:15px;padding:12px;border-radius:10px;margin-top:10px}
.buy-btn:hover{opacity:.92}
.buy-btn-disabled{background:var(--line);color:var(--sub);cursor:default}
.compare-wrap{overflow-x:auto;margin:18px 0}
table.compare-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--card);border-radius:12px;overflow:hidden}
table.compare-table th,table.compare-table td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:center}
table.compare-table th{background:#f1f5f9;color:var(--sub);font-weight:700}
:root[data-theme="dark"] table.compare-table th{background:#16273a}
table.compare-table th:first-child,table.compare-table td:first-child{text-align:left;font-weight:700}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:8px 0 20px}
.product-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;overflow-wrap:break-word}
.product-card:hover{border-color:var(--sky)}
.product-card img{width:80px;height:80px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.product-card h4{font-size:14px;margin:0 0 4px;line-height:1.4}
.product-card .price{font-size:13px;color:var(--sub);margin-bottom:2px}
.home-hero{margin:14px 0}
.hero-condition-btn{display:flex;align-items:center;gap:10px;width:100%;background:linear-gradient(135deg,var(--sky),var(--sky-dark));color:#fff;border:none;border-radius:18px;padding:16px 18px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;text-align:left;box-shadow:0 4px 14px rgba(56,189,248,.22);transition:transform .15s ease,box-shadow .15s ease}
.hero-condition-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(56,189,248,.3)}
.hero-emoji{font-size:26px;line-height:1}
.hero-text{flex:1}
.hero-condition-reveal{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:10px}
.hero-reveal-intro{margin:0 0 4px;line-height:1.6;color:var(--sub)}
.live-weather-widget{margin:18px 0}
.live-weather-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,var(--sky),var(--sky-dark));color:#fff;border:none;border-radius:14px;padding:14px 16px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(56,189,248,.22);transition:transform .15s ease,box-shadow .15s ease}
.live-weather-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(56,189,248,.3)}
.live-weather-btn:disabled{opacity:.7;cursor:default;transform:none}
.live-weather-result{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:10px;font-size:15px;line-height:1.7}
.lw-updated{display:block;margin-top:4px;font-size:12px;color:var(--sub)}
.cat-feed{display:flex;flex-direction:column;gap:22px;margin:20px 0}
.cat-feed-item{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.cat-feed-item:hover{border-color:var(--sky);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.08)}
.cat-feed-badge{display:inline-block;font-size:12px;font-weight:800;color:var(--sky-dark);background:#e0f2fe;border-radius:999px;padding:3px 10px;margin-bottom:8px}
:root[data-theme="dark"] .cat-feed-badge{background:#0c3a52;color:var(--sky)}
/* 배지 한 줄만 있고 나머지는 빈 흰 공간으로 남던 것을, 카드 상단 전체를 색이 있는
   띠(리본) 형태로 채워서 여백 없이 꽉 차 보이도록 개선. */
.cat-feed-badge-top{display:flex;align-items:center;padding:16px 16px;background:#e0f2fe}
:root[data-theme="dark"] .cat-feed-badge-top{background:#0c3a52}
.cat-feed-badge-top .cat-feed-badge{background:transparent;color:var(--sky-dark);padding:0;margin-bottom:0;font-size:17px;font-weight:800;letter-spacing:-.2px}
:root[data-theme="dark"] .cat-feed-badge-top .cat-feed-badge{color:var(--sky)}
.cat-feed-item.is-product{padding:16px}
.cat-feed-item.is-product .cat-feed-badge{color:#9a3412;background:#ffedd5}
:root[data-theme="dark"] .cat-feed-item.is-product .cat-feed-badge{background:#4a2a10;color:#fdba74}
.cat-feed-body{display:flex;gap:14px;align-items:flex-start}
.cat-feed-text{flex:1;min-width:0}
.cat-feed-text h3{margin:0 0 4px;font-size:15px}
.cat-feed-text p{margin:0;color:var(--sub);font-size:13px;line-height:1.5}
.cat-feed-product-items{display:flex;gap:10px;overflow-x:auto;margin-top:10px}
.cat-feed-product-items .product-card{flex:0 0 130px;padding:10px}
.cat-feed-product-items .product-card img{width:100%;height:auto;aspect-ratio:1/1;margin-bottom:6px}
.cat-feed-product-items .product-card h4{font-size:12px;margin:0 0 2px}
.hw-label{font-size:14px;font-weight:700;color:var(--sub);margin:0 0 2px}
.hw-curation{margin:8px 0 0;font-size:13px;color:var(--ink);background:#f0f9ff;border-radius:8px;padding:6px 10px;display:inline-block}
:root[data-theme="dark"] .hw-curation{background:#0f2536}
.hw-link{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--sky-dark);text-decoration:underline}
.life-index{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:16px 0}
.li-tip{margin:0 0 12px;font-size:14px;color:var(--ink);background:#f0f9ff;border-radius:10px;padding:10px 12px}
:root[data-theme="dark"] .li-tip{background:#0f2536}
.li-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.li-item{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}
.li-label{font-size:13px;color:var(--sub);margin-bottom:4px}
.li-score{font-size:20px;font-weight:800;color:var(--sky-dark)}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.score-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center}
.score-card .sc-emoji{font-size:32px}
.score-card .sc-score{font-size:26px;font-weight:800;color:var(--sky-dark);margin:4px 0}
.score-card .sc-label{font-size:13px;color:var(--sub);font-weight:700}
.score-card .sc-sub{font-size:12px;color:var(--sub);margin-top:8px}
.score-card .sc-comment{font-size:13px;margin-top:8px;line-height:1.5}
@media (max-width:480px){.score-grid{grid-template-columns:1fr}}
.ranklist{display:flex;flex-direction:column;gap:8px;margin:14px 0 26px}
.rank-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.rank-item:hover{border-color:var(--sky)}
.rank-no{font-weight:800;color:var(--sky-dark);width:22px;flex-shrink:0}
.rank-name{flex:1;font-weight:700}
.rank-score{font-weight:800;color:var(--sky-dark)}
.radar-controls{display:flex;align-items:center;gap:10px;margin:12px 0}
.radar-controls .geo-btn{width:auto;white-space:nowrap;padding:8px 14px;margin-bottom:0}
.spot-list{display:flex;flex-direction:column;gap:12px;margin:14px 0 30px}
.running-course-box{margin:14px 0 30px;padding-top:6px;text-align:center}
.running-mascot{display:block;margin:0 auto 8px;width:120px;height:120px;object-fit:contain}
.running-mascot-title{justify-content:center}
.running-course-box .note,.running-course-box .spot-list{text-align:left}
.course-geo-btn{display:inline-block;width:auto;padding:6px 14px;margin:0 0 8px;border-radius:999px;border:none;background:var(--sky-dark);color:#fff;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.spot-dist-text{font-weight:700}
.spot-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.spot-card h3{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:6px}
.spot-card .spot-addr{font-size:12px;color:var(--sub);margin:0 0 6px}
.spot-card .spot-desc{font-size:13px;margin:0 0 10px;line-height:1.5}
.spot-details{background:var(--bg);border-radius:10px;padding:8px 12px;margin:0 0 10px}
.spot-detail-row{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--sub);line-height:1.5;margin:0}
.spot-detail-row+.spot-detail-row{margin-top:4px}
.spot-links{display:flex;flex-wrap:wrap;gap:14px}
.spot-card .nav-link{display:inline-block;font-size:13px;font-weight:700;color:var(--sky-dark);text-decoration:underline}
.ws-head{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.ws-cat{font-size:11px;font-weight:800;color:var(--sky-dark);background:#e0f2fe;border-radius:999px;padding:2px 9px}
:root[data-theme="dark"] .ws-cat{background:#0c3a52;color:var(--sky)}
.ws-season{font-size:11px;font-weight:700;color:#9a3412;background:#ffedd5;border-radius:999px;padding:2px 9px}
:root[data-theme="dark"] .ws-season{background:#4a2a10;color:#fdba74}
.radius-row{margin:8px 0 12px}
.radius-row label{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:8px}
.radius-row select{font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.cat-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.cat-filter-btn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);font-family:inherit}
.cat-filter-btn:hover{border-color:var(--sky)}
.cat-filter-btn.on{background:var(--sky);border-color:var(--sky);color:#fff}
.ws-group{border:1px solid var(--line);border-radius:14px;margin:0 0 12px;overflow:hidden;background:var(--card)}
.ws-group-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--ink);text-align:left}
.ws-group-header:hover{background:var(--bg)}
.ws-group-header[aria-expanded="true"] .ws-group-arrow{transform:rotate(180deg)}
.ws-group-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.ws-group-icon{font-size:18px}
.ws-group-count{font-weight:700;font-size:12px;color:var(--sub)}
.ws-group-arrow{display:inline-block;font-size:12px;color:var(--sub);transition:transform .2s;flex-shrink:0;margin-left:8px}
.ws-group-blurb{margin:0;padding:0 16px 12px;font-size:12px}
.ws-group-body.spot-list{margin:0;padding:0 14px 14px}
.sunset-cta{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;border-radius:14px;padding:14px 16px;margin:16px 0;box-shadow:0 4px 14px rgba(234,88,12,.28)}
.sunset-cta:hover{opacity:.94}
.sunset-cta-icon{font-size:28px;flex-shrink:0;line-height:1}
.sunset-cta-text{font-size:13px;line-height:1.5}
.sunset-cta-text strong{font-size:15px;display:block;margin-bottom:1px}
.region-col-cta{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#0ea5e9,#0369a1);color:#fff;border-radius:14px;padding:14px 16px;margin:10px 0;box-shadow:0 4px 14px rgba(3,105,161,.28)}
.region-col-cta:hover{opacity:.94}
.region-col-cta-icon{font-size:26px;flex-shrink:0;line-height:1}
.region-col-cta-text{font-size:13px;line-height:1.5}
.region-col-cta-text strong{font-size:15px;display:block;margin-bottom:1px}
.quiz-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:16px 0}
.quiz-img-wrap{margin:0 0 12px;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--bg)}
.quiz-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.quiz-q{font-weight:700;margin:0 0 12px;font-size:15px}
.quiz-choices{display:flex;flex-direction:column;gap:8px}
.quiz-choices button{text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:11px 14px;font-size:14px;color:var(--ink);cursor:pointer;font-family:inherit}
.quiz-choices button:hover:not(:disabled){border-color:var(--sky)}
.quiz-choices button:disabled{cursor:default}
.quiz-choices button.correct{background:#dcfce7;border-color:#22c55e;font-weight:700}
.quiz-choices button.wrong{background:#fee2e2;border-color:#ef4444}
:root[data-theme="dark"] .quiz-choices button.correct{background:#0f3320;color:#86efac}
:root[data-theme="dark"] .quiz-choices button.wrong{background:#3a1616;color:#fca5a5}
.quiz-explain{margin:12px 0 0;font-size:13px;color:var(--sub);line-height:1.6;background:var(--bg);border-radius:10px;padding:10px 12px}
.quiz-next-btn{display:block;margin:14px 0 0;margin-left:auto;background:var(--sky-dark);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.quiz-next-btn:hover{opacity:.92}
.bottom-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.bottom-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 10px;font-size:11px;color:var(--sub);font-weight:600}
.bottom-tabbar a .bt-icon{font-size:19px}
.bottom-tabbar a .bt-icon-img{width:24px;height:24px;object-fit:contain}
.bottom-tabbar a.on{color:var(--sky-dark)}
body{padding-bottom:64px}
.to-top{position:fixed;right:16px;bottom:76px;width:46px;height:46px;border-radius:50%;background:var(--sky-dark);color:#fff;border:none;font-size:18px;box-shadow:0 4px 14px rgba(2,132,199,.35);cursor:pointer;z-index:30;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{opacity:.92}
@media (max-width:600px){.li-grid{grid-template-columns:repeat(3,1fr);gap:6px}.li-score{font-size:17px}}
@media (max-width:380px){.hero{padding:16px;gap:10px}.hero .icon{font-size:44px}.hero h1{font-size:18px}.hero .temp{font-size:32px}}