img{width:auto;height:auto}
:root{--sky:#38bdf8;--sky-dark:#0369a1;--btn-a:#0278b8;--btn-b:#075985;--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"] .geo-btn,:root[data-theme="dark"] .day-tabs button.on,:root[data-theme="dark"] .cat-filter-btn.on,:root[data-theme="dark"] .interest-chips button.on,:root[data-theme="dark"] .tabs a.on,:root[data-theme="dark"] .to-top,:root[data-theme="dark"] .kmap-tabs button.on,:root[data-theme="dark"] .course-geo-btn,:root[data-theme="dark"] .quiz-next-btn,:root[data-theme="dark"] .pokedex-popup-close,:root[data-theme="dark"] .island-stage-btn,:root[data-theme="dark"] .island-ferry-more,:root[data-theme="dark"] .tr-sel .tr-dcount{color:#0b1420}
:root[data-theme="dark"] .searchbox input{background:var(--card);color:var(--ink)}
: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;word-break:keep-all;overflow-wrap:anywhere}
@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;white-space:nowrap;flex:none}
.brand-logo{width:30px;height:30px;border-radius:8px;flex:none}
.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}}
/* PC 상단 메뉴: 이모지 위·글자 아래 단추 (2026-10-23). 좁은 PC 창에선 가로로 밀어 본다 */
.gnb a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12.5px;padding:5px 8px;line-height:1.2}
.gnb-i{font-size:20px;line-height:1;height:22px;display:flex;align-items:center}
.gnb-i .e3d{width:22px;height:22px}
.topbar-in{height:62px}
@media (min-width:641px) and (max-width:960px){.gnb{overflow-x:auto;scrollbar-width:none;margin-left:8px}.gnb::-webkit-scrollbar{display:none}.brand-en{display:none}}
@media (max-width:640px){.gnb a{display:none}.topbar-in{height:56px}}
/* PC 아래쪽 바로 가기 줄 — 휴대폰은 .bottom-tabbar 를 쓴다 */
.pc-tabbar{display:none}
@media (min-width:641px){
.pc-tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:32;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.pc-tabbar-in{max-width:920px;margin:0 auto;display:flex;justify-content:space-between;padding:0 8px}
.pc-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 8px;font-size:12px;font-weight:700;color:var(--sub);text-decoration:none;border-radius:10px;white-space:nowrap}
.pc-tabbar a:hover{color:var(--sky-dark);background:var(--bg)}
.pc-tabbar a.on{color:var(--sky-dark)}
.pc-tabbar .gnb-i{font-size:22px;height:26px}
.pc-tabbar .gnb-i .e3d{width:26px;height:26px}
}
.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;min-height:36px;min-width:40px}
.theme-toggle:hover{background:rgba(255,255,255,.28)}
.visitor-badge{font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 10px;white-space:nowrap}
@media (max-width:420px){.visitor-badge{font-size:11px;padding:5px 8px}}
/* 글자 크기 '가가' 단추 (2026-10-24 사용자 요청: 방문자 수 왼쪽). 누를 때마다 보통 → 크게 → 아주 크게 */
.font-toggle{background:rgba(255,255,255,.16);border:none;color:#fff;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:800;cursor:pointer;line-height:1;min-height:36px;white-space:nowrap;font-family:inherit}
.font-toggle b{font-size:16px;margin-left:1px}
.font-toggle:hover{background:rgba(255,255,255,.28)}
:root[data-theme="dark"] .font-toggle{background:rgba(255,255,255,.08)}
:root[data-fs="1"] main.wrap{zoom:1.12}
:root[data-fs="2"] main.wrap{zoom:1.25}
.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-dark);color:#fff}
.heat-badge{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;padding:7px 14px;
  border-radius:999px;background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;
  font-size:13px;font-weight:800}
:root[data-theme="dark"] .heat-badge{background:#1f1315;border-color:#7f1d1d;color:#fca5a5}
.heat-badge-icon{display:inline-block;animation:heatBadgeBlink 1s ease-in-out infinite}
@keyframes heatBadgeBlink{0%,100%{opacity:1}50%{opacity:.35}}
.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{position:relative;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}
.wicon{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;line-height:1}
.wicon img.e3d{width:100%;height:100%;margin:0;vertical-align:top}
.wicon svg{width:100%;height:100%;display:block}
.hero h1,.hero .hero-h{font-size:22px;margin:0 0 4px;font-weight:700}
.fav-btn{border:none;background:none;font-size:20px;cursor:pointer;vertical-align:middle;color:var(--gold);margin-left:4px;line-height:1}
.hero .fav-btn{position:absolute;top:6px;right:6px;width:40px;height:40px;margin:0;font-size:22px}
.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:var(--warn)}
.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(3,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}
.aq-section{margin:0 0 16px}
.aq-title{font-size:13px;font-weight:800;color:var(--sub);margin:0 0 8px}
.aq-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.aq-gauge{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 6px;text-align:center}
.aq-gauge-ring{position:relative;width:76px;height:76px;margin:0 auto 8px}
.aq-gauge-ring svg{width:100%;height:100%;display:block}
.aq-gauge-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.aq-gauge-val .n{font-size:16px;font-weight:800;color:var(--ink);line-height:1.1}
.aq-gauge-val .u{font-size:10px;font-weight:600;color:var(--sub)}
.aq-gauge-label{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.3}
.aq-badge{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px}
.aq-badge-ok{background:#dcfce7;color:#15803d}
.aq-badge-warn{background:#fef3c7;color:#b45309}
.aq-badge-danger{background:#fee2e2;color:#b91c1c}
@media (max-width:380px){.aq-gauge-ring{width:64px;height:64px}.aq-gauge-val .n{font-size:14px}}
.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}
.pop-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:44px}
.pop-val{font-size:12px;font-weight:700;color:var(--ink)}
.pop-bar{width:10px;min-height:2px;border-radius:3px 3px 0 0;background:var(--sky)}
.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}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
.col-head .page-title{margin:0}
.col-seg{display:inline-flex;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--sky) 12%,var(--card));border:1px solid var(--line);flex-shrink:0}
.col-seg button{border:0;background:transparent;color:var(--sub);font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:32px;transition:background .2s,color .2s,box-shadow .2s}
.col-seg button span{font-size:14px;line-height:1}
.col-seg button.on{background:var(--card);color:var(--sky-dark);box-shadow:0 1px 4px rgba(15,23,42,.14)}
.col-seg button:focus-visible{outline:2px solid var(--sky);outline-offset:1px}
:root[data-theme="dark"] .col-seg button.on{color:var(--sky);background:#1b2a3d}
.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-fit{min-width:0}
table.md-table-fit th,table.md-table-fit td{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:480px){table.md-table-fit th,table.md-table-fit td{padding:9px 8px}}
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:#b91c1c}
: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}
table.wk-table-hourly{table-layout:fixed}
table.wk-table-hourly th:not(:first-child),table.wk-table-hourly td:not(:first-child){width:48px}
.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:var(--warn)}
.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:10px 14px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;min-height:40px;box-sizing:border-box}
.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}
.updated-top{margin:2px 0 8px}
/* 홈 = 오늘 날씨 한눈에 (render_home_today, 2026-10-22). 1순위 기온, 2순위 어제와 차이, 3순위 옷차림 */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.td-hero{background:linear-gradient(160deg,#e0f2fe,var(--card) 70%);border:1px solid var(--line);border-radius:20px;padding:18px 20px 20px;margin:16px 0 12px}
:root[data-theme="dark"] .td-hero{background:linear-gradient(160deg,#0f2942,var(--card) 70%)}
/* 오늘 날씨 박스 날씨 효과 (2026-10-24 사용자 요청 "이 박스만 봐도 오늘의 날씨를 느낄 수 있게") — TD_FX_JS 가 fx-* 클래스와 알갱이를 넣는다 */
.td-hero{position:relative;isolation:isolate;transition:background .6s}
.td-hero>:not(.td-fx){position:relative;z-index:1}
.td-hero[class*="fx-"] .td-detail{background:var(--card);border-radius:999px;padding:4px 10px;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.td-fx{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.td-fx i{position:absolute;display:block}
.td-hero.fx-sun{background:linear-gradient(160deg,#fef3c7,#e0f2fe 55%,var(--card) 90%)}
.td-hero.fx-hot{background:linear-gradient(160deg,#fdba74,#fde68a 45%,#fff7ed 90%)}
.td-hero.fx-cloud{background:linear-gradient(160deg,#d5dee8,#eaf0f5 55%,var(--card) 90%)}
.td-hero.fx-sun.fx-cloud{background:linear-gradient(160deg,#fdf0c4,#dbeafe 55%,var(--card) 90%)}
.td-hero.fx-rain{background:linear-gradient(160deg,#b8c4d4,#dde4ec 50%,var(--card) 92%)}
.td-hero.fx-storm{background:linear-gradient(160deg,#8796ab,#c3ccd8 50%,var(--card) 92%)}
.td-hero.fx-snow{background:linear-gradient(160deg,#dbe4f5,#f1f5fb 55%,var(--card) 90%)}

.td-hero.fx-fog{background:linear-gradient(160deg,#dcdfe4,#eceef1 55%,var(--card) 90%)}
:root[data-theme="dark"] .td-hero.fx-sun{background:linear-gradient(160deg,#3b3112,var(--card) 70%)}
:root[data-theme="dark"] .td-hero.fx-hot{background:linear-gradient(160deg,#5a2a0c,#3b2410 50%,var(--card) 90%)}
:root[data-theme="dark"] .td-hero.fx-cloud,:root[data-theme="dark"] .td-hero.fx-fog{background:linear-gradient(160deg,#283342,var(--card) 70%)}
:root[data-theme="dark"] .td-hero.fx-sun.fx-cloud{background:linear-gradient(160deg,#33301c,#1c2b3d 55%,var(--card) 90%)}
:root[data-theme="dark"] .td-hero.fx-rain{background:linear-gradient(160deg,#1c2a3c,var(--card) 70%)}
:root[data-theme="dark"] .td-hero.fx-storm{background:linear-gradient(160deg,#0b111c,#1c2533 50%,var(--card) 90%)}
:root[data-theme="dark"] .td-hero.fx-snow{background:linear-gradient(160deg,#22304d,var(--card) 70%)}

/* 비 */
.td-fx .rd{top:-30px;width:2px;border-radius:2px;background:linear-gradient(transparent,rgba(37,99,235,.6));animation:tdRain .7s linear infinite}
:root[data-theme="dark"] .td-fx .rd{background:linear-gradient(transparent,rgba(147,197,253,.7))}
.fx-heavy .td-fx .rd{width:2.5px}
@keyframes tdRain{to{transform:translateY(460px)}}
.fx-wind .td-fx .rd{rotate:18deg;animation-name:tdRainW}
@keyframes tdRainW{to{transform:translate(-150px,460px)}}
.td-fx .flash{inset:0;background:#fff;opacity:0;animation:tdFlash 7s infinite}
@keyframes tdFlash{0%,88%,92%,96%,100%{opacity:0}90%{opacity:.55}94%{opacity:.35}}
/* 눈 */
.td-fx .sf{top:-12px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(100,116,139,.25),0 1px 4px rgba(51,65,85,.45);animation:tdSnow 8s linear infinite}
@keyframes tdSnow{0%{transform:translate(0,0)}25%{transform:translate(var(--sx),115px)}50%{transform:translate(0,230px)}75%{transform:translate(var(--sx),345px)}100%{transform:translate(0,460px)}}
.fx-wind .td-fx .sf{animation-name:tdSnowW}
@keyframes tdSnowW{to{transform:translate(-220px,460px)}}
/* 바람 */
.td-fx .wl{left:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(71,85,105,.6),transparent);animation:tdWind 2s linear infinite}
:root[data-theme="dark"] .td-fx .wl{background:linear-gradient(90deg,transparent,rgba(203,213,225,.45),transparent)}
@keyframes tdWind{from{transform:translateX(-180px)}to{transform:translateX(1200px)}}
.td-fx .lf{left:0;width:12px;height:7px;border-radius:0 100%;background:#f59e0b;animation:tdLeaf 3.5s linear infinite}
.td-fx .lf:nth-child(2n){background:#84cc16}
@keyframes tdLeaf{0%{transform:translate(-30px,0) rotate(0)}50%{transform:translate(560px,-30px) rotate(400deg)}100%{transform:translate(1200px,25px) rotate(800deg)}}
/* 바람 5단계 (2026-10-26, TD_FX_JS WIND_LV): 줄 수·빠르기는 JS, 여기선 굵기·비 기울기·구름 빠르기·아이콘 흔들림 */
.fx-w2 .td-fx .wl{opacity:.55}
.fx-w4 .td-fx .wl{height:2.5px}
.fx-w5 .td-fx .wl{height:3px;background:linear-gradient(90deg,transparent,rgba(51,65,85,.75),transparent)}
.fx-w2 .td-fx .rd{rotate:6deg;animation-name:tdRainW2}
@keyframes tdRainW2{to{transform:translate(-50px,460px)}}
.fx-w5 .td-fx .rd{rotate:30deg;animation-name:tdRainW5}
@keyframes tdRainW5{to{transform:translate(-270px,460px)}}
.fx-w4 .td-fx .cl{animation-duration:28s!important}
.fx-w5 .td-fx .cl{animation-duration:14s!important}
.fx-w4 .td-icon{animation:tdSway 2.6s ease-in-out infinite;transform-origin:50% 90%}
.fx-w5 .td-icon{animation:tdSway 1.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes tdSway{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg) translateX(-3px)}60%{transform:rotate(3deg)}}
.td-obs,.hero-obs{margin:4px 0 0;font-size:12px;color:var(--sub)}
.td-wind{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.6);font-size:13px;color:var(--sub);position:relative}
.td-wind b{color:var(--ink)}
.td-wind small{font-size:12px}
.td-wbar{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.td-wbar i{display:block;width:4px;border-radius:2px;background:rgba(100,116,139,.25)}
.td-wbar i:nth-child(1){height:5px}.td-wbar i:nth-child(2){height:7px}.td-wbar i:nth-child(3){height:9px}.td-wbar i:nth-child(4){height:11px}.td-wbar i:nth-child(5){height:14px}
.td-wind.w1 .td-wbar i.on,.td-wind.w2 .td-wbar i.on{background:#22c55e}
.td-wind.w3 .td-wbar i.on{background:#eab308}
.td-wind.w4 .td-wbar i.on{background:#f97316}
.td-wind.w5 .td-wbar i.on{background:#ef4444}
:root[data-theme="dark"] .td-wind,.fx-night .td-wind{background:rgba(255,255,255,.1)}
/* 해 */
.td-fx .sun{right:-50px;top:-20px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(253,224,71,.95) 0 16%,rgba(251,191,36,.45) 32%,rgba(251,191,36,0) 68%);animation:tdPulse 4s ease-in-out infinite}
.td-fx .rays{inset:-70px;border-radius:50%;background:repeating-conic-gradient(rgba(253,224,71,.4) 0 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(circle,transparent 18%,#000 24%,transparent 62%);mask:radial-gradient(circle,transparent 18%,#000 24%,transparent 62%);animation:tdSpin 50s linear infinite}
@keyframes tdPulse{50%{transform:scale(1.08)}}
@keyframes tdSpin{to{transform:rotate(360deg)}}
.fx-hot .td-fx .sun{width:340px;height:340px;right:-80px;top:-60px;background:radial-gradient(circle,rgba(255,237,120,1) 0 15%,rgba(249,115,22,.5) 34%,rgba(249,115,22,0) 70%);animation-duration:2.4s}
.fx-hot .td-fx .rays{background:repeating-conic-gradient(rgba(251,146,60,.45) 0 6deg,transparent 6deg 14deg);animation-duration:25s}
.td-fx .heat{left:0;right:0;bottom:0;height:60%;background:repeating-linear-gradient(0deg,rgba(249,115,22,.07) 0 3px,transparent 3px 14px);filter:blur(1.5px);animation:tdHeat 3s linear infinite}
@keyframes tdHeat{from{transform:translateY(0)}to{transform:translateY(-28px)}}
/* 구름 */
.td-fx .cl{left:0;width:150px;height:46px;border-radius:46px;background:rgba(255,255,255,.85);box-shadow:0 6px 14px rgba(100,116,139,.18);animation:tdCloud 60s linear infinite}
.td-fx .cl::before,.td-fx .cl::after{content:"";position:absolute;border-radius:50%;background:inherit}
.td-fx .cl::before{width:66px;height:66px;left:22px;top:-32px}
.td-fx .cl::after{width:50px;height:50px;left:72px;top:-22px}
:root[data-theme="dark"] .td-fx .cl{background:rgba(148,163,184,.28);box-shadow:none}
@keyframes tdCloud{from{transform:translateX(-200px) scale(var(--cs))}to{transform:translateX(1200px) scale(var(--cs))}}
/* 별·안개 */
.td-fx .st{border-radius:50%;background:#4f46e5;animation:tdTwinkle 2.5s ease-in-out infinite}
:root[data-theme="dark"] .td-fx .st{background:#e0e7ff}
@keyframes tdTwinkle{50%{opacity:.15;transform:scale(.6)}}
/* 밤 (2026-10-24 "야간에는 달 또는 별을"): 라이트·다크 모두 밤하늘. 비·눈 위에도 덮이게 다른 fx 배경보다 뒤에 둔다. 박스 안 글자색은 밤에 맞게 다시 정한다 */
.td-hero.fx-night,:root[data-theme="dark"] .td-hero.fx-night{background:linear-gradient(170deg,#0b1026,#1e1b4b 55%,#3b3a7a);--ink:#eef2ff;--sub:#c3cbe0;--sky-dark:#a5d8ff;--sky:#a5d8ff;--card:#1f2752;--line:#3b4577;border-color:#2a3260}
.td-hero.fx-night.fx-rain,.td-hero.fx-night.fx-overcast,.td-hero.fx-night.fx-fog,.td-hero.fx-night.fx-snow{background:linear-gradient(170deg,#111827,#1f2a44 55%,#334155)}
.td-hero.fx-night .td-diff,.td-hero.fx-night .td-diff.up,.td-hero.fx-night .td-diff.down{background:rgba(255,255,255,.1);color:var(--ink)}
.td-hero.fx-night .td-diff.up{color:#fca5a5}
.td-hero.fx-night .td-diff.down{color:#93c5fd}
.fx-night .td-fx .st{background:#fff;box-shadow:0 0 4px rgba(255,255,255,.8)}
.fx-night .td-fx .cl{background:rgba(148,163,184,.14);box-shadow:none}
.fx-night .td-fx .rd{background:linear-gradient(transparent,rgba(165,216,255,.75))}
.fx-night .td-fx .fg{background:rgba(148,163,184,.2)}
.td-fx .moon{right:200px;top:24px;width:64px;height:64px;filter:drop-shadow(0 0 12px rgba(253,246,216,.7));animation:tdMoon 6s ease-in-out infinite}
.td-fx .moon svg{display:block;width:100%;height:100%}
@keyframes tdMoon{50%{filter:drop-shadow(0 0 20px rgba(253,246,216,.95))}}
@media (max-width:520px){.td-fx .moon{right:24px;top:96px;width:50px;height:50px}}
.td-fx .fg{left:-30%;width:160%;height:70px;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(16px);animation:tdFog 14s ease-in-out infinite alternate}
:root[data-theme="dark"] .td-fx .fg{background:rgba(148,163,184,.18)}
@keyframes tdFog{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
@media (prefers-reduced-motion:reduce){.td-fx i,.td-icon,.pc-icon > *{animation:none!important}.td-fx .rd,.td-fx .sf,.td-fx .wl,.td-fx .lf,.td-fx .flash,.td-fx .heat{display:none}}
.td-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.td-loc{margin:0;font-size:15px;color:var(--sub)}
.td-loc b{color:var(--ink);font-size:17px;margin-right:4px}
.td-btns{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.td-detail{font-size:13px;font-weight:700;color:var(--sky-dark);white-space:nowrap;padding:2px 4px}
:root[data-theme="dark"] .td-detail{color:var(--sky)}
.td-top{align-items:flex-start}
.td-geo{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;min-height:36px;white-space:nowrap}
.td-status{margin:4px 0 0;font-size:12px;color:var(--sub);min-height:0}
.td-status:empty{display:none}
.td-main{display:flex;align-items:center;gap:16px;margin:8px 0 12px}
.td-char{width:120px;height:120px;margin-left:auto;flex:none;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(30,60,120,.18));animation:tdCharBob 3.2s ease-in-out infinite}
@keyframes tdCharBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:560px){.td-char{width:76px;height:76px}}
@media (prefers-reduced-motion:reduce){.td-char{animation:none}}
.td-icon{font-size:84px;line-height:1;flex-shrink:0}
.td-temp{font-size:72px;font-weight:800;line-height:1;color:var(--sky-dark);letter-spacing:-2px}
:root[data-theme="dark"] .td-temp{color:var(--sky)}
.td-desc{font-size:15px;color:var(--sub);margin-top:6px}
.td-diff{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;border-radius:14px;padding:12px 14px;background:#f1f5f9;color:var(--ink)}
.td-diff b{font-size:20px;font-weight:800}
.td-diff span{font-size:13px;color:var(--sub)}
.td-diff.up{background:#fef2f2;color:#b91c1c}
.td-diff.down{background:#eff6ff;color:#1d4ed8}
:root[data-theme="dark"] .td-diff{background:#16273a}
:root[data-theme="dark"] .td-diff.up{background:#2a1517;color:#fca5a5}
:root[data-theme="dark"] .td-diff.down{background:#10233f;color:#93c5fd}
.td-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:0 0 12px}
.td-h{font-size:14px;color:var(--sub);margin:0 0 8px;font-weight:700}
.td-outfit{margin:0 0 10px;font-size:20px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.td-outfit-emoji{font-size:32px;line-height:1}
.td-basis{font-size:13px;color:var(--sub)}
.td-chips{display:flex;flex-wrap:wrap;gap:6px}
.td-chips span{background:#e0f2fe;color:#075985;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}
:root[data-theme="dark"] .td-chips span{background:#0f2942;color:#bae6fd}
.td-wear{margin:0 0 10px}
.td-wear-h{margin:0 0 6px;font-weight:800;font-size:15px}
.td-wear-h small{font-weight:600;font-size:12px;color:var(--sub);margin-left:4px}
.td-wear-tip{margin:6px 0 0;font-size:13px;color:var(--sub)}
.td-wear-trip .td-chips span{background:#fef3c7;color:#92400e}
.td-ads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
/* 휴대폰 2×2 (2026-10-25 사용자 요청), 이름 td-ad 는 광고 차단 목록(EasyList ##.td-ad)에 걸려 PC 에서 숨겨져 td-pick 으로 */
@media (max-width:520px){.td-ads{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.td-ad-k{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.td-ads[hidden],.td-ad-note[hidden]{display:none}
.td-pick{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none;min-width:0}
.td-pick img{width:100%;aspect-ratio:1;height:auto;object-fit:cover;border-radius:8px}
.td-ad-k{align-self:flex-start;font-size:11px;font-weight:800;color:#075985;background:#e0f2fe;border-radius:999px;padding:2px 8px}
.td-wear-trip .td-ad-k{background:#fef3c7;color:#92400e}
:root[data-theme="dark"] .td-ad-k{background:#0f2942;color:#bae6fd}
:root[data-theme="dark"] .td-wear-trip .td-ad-k{background:#3a2a0a;color:#fde68a}
.td-ad-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:700;line-height:1.4;word-break:keep-all}
.td-ad-note{margin:4px 0 8px;font-size:11px;color:var(--sub)}
.sec-ads-box{margin:10px 0 22px}
.sec-ads-h{margin:0;font-size:13px;font-weight:800;color:var(--sub)}
.sec-ads-h small{font-weight:600;font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 5px;margin-left:4px}
:root[data-theme="dark"] .td-wear-trip .td-chips span{background:#3a2a0a;color:#fde68a}
.td-tips{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;font-size:14px}
.td-stats{margin-bottom:12px}
.td-more{display:block;text-align:center;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:#fff;border-radius:14px;padding:15px 16px;font-size:16px;margin:0 0 8px;box-shadow:0 4px 14px rgba(56,189,248,.22)}
.td-region{display:block;text-align:center;color:var(--sky-dark);font-size:14px;font-weight:700;padding:8px 0 4px}
:root[data-theme="dark"] .td-region{color:var(--sky)}
.td-search{margin-top:8px}
@media (max-width:420px){.td-icon{font-size:64px}.td-temp{font-size:60px}.td-diff b{font-size:18px}}
.stale-warn{color:#c2410c;font-weight:600}
.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)}
.regionlist a.fav-card{display:flex;flex-direction:column;align-items:center;gap:4px}
.fav-w{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);font-weight:600}
.fav-w .wicon{font-size:22px}
.fav-w b{font-size:18px;color:var(--ink)}
.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-feature-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--btn-a) 0%,var(--btn-b) 100%);color:#fff;border-radius:16px;padding:16px 18px;margin:14px 0;text-decoration:none}
.ifc-icon{font-size:32px;flex:0 0 auto}
.ifc-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ifc-title{font-weight:800;font-size:16px}
.ifc-desc{font-size:12px;opacity:.9}
.ifc-arrow{font-size:20px;flex:0 0 auto}
.kmap-tabs{display:flex;gap:8px;margin:14px 0 10px}
.kmap-tabs button{flex:1;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;font-size:14px}
.kmap-tabs button.on{background:var(--sky-dark);color:#fff;border-color:var(--sky-dark)}
.kmap-canvas{position:relative;width:100%;max-height:520px;margin:0 auto;background:#eaf4fb;overflow:hidden}
@media (max-width:420px){.kmap-spot{padding:2px 5px}}
:root[data-theme="dark"] .kmap-canvas{background:#0f2136}
.kmap-bg{position:absolute;inset:0;width:100%;height:100%}
.kmap-bg path{fill:var(--card);stroke:var(--line);stroke-width:0.6;vector-effect:non-scaling-stroke}
.kmap-spot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px 7px;box-shadow:0 1px 4px rgba(0,0,0,.12);white-space:nowrap;font-size:11px}
.kmap-name{font-weight:700;color:var(--sub);font-size:12px}
#sunsetJump{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:14px;font-family:inherit}
.kmap-val{display:flex;align-items:center;gap:3px;font-weight:800;font-size:12px}
.kmap-val[hidden]{display:none}
.kmap-val .wicon svg{width:16px;height:16px}
.kmap-unit-label{position:absolute;right:8px;bottom:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:11px;color:var(--sub)}
.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:12px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
.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;padding:10px 0;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:block;padding-left:22px;text-indent:-22px;font-size:13px;color:var(--sub);line-height:1.6;margin:0}
.island-ferry-info p>span:first-child{display:inline-block;width:22px;text-indent: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:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;color:#fff;background:var(--sky-dark);border-radius:10px;padding:12px;margin:10px 0}
.island-ferry-more:hover{opacity:.92}
.island-col-list{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.island-col-item{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px}
.island-col-item:hover{border-color:var(--sky)}
.island-col-item img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.island-col-item-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.island-col-item-title{font-size:13px;font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.island-col-item-date{font-size:12px;color:var(--sub)}
.wave-chart{display:flex;align-items:center;gap:10px;text-align:left;margin:0 0 12px}
.wave-chart-label{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--ink)}
.wave-chart .scroll{flex:1;min-width:0;overflow-x:auto}
.wave-chart-svg{display:block;height:130px}
.wave-chart-hourly{gap:0;margin:0}
.wave-chart-hourly .wave-chart-label{flex:0 0 52px;position:sticky;left:0;z-index:1;background:var(--card);padding-left:8px;box-sizing:border-box}
.wave-chart-hourly .wave-chart-svg-clip{flex:0 0 auto;overflow:hidden}
.wave-chart-hourly .wave-chart-svg{flex:0 0 auto;display:block}
.wc-lbl{font-size:12px;font-weight:700}
.wc-lbl-hi{fill:var(--sky-dark)}
.wc-lbl-lo{fill:var(--sky)}
/* 지역 선택(위 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:12px}
  .cmp-row{font-size:12px;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(--line);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}
@media (max-width:420px){.product-grid .buy-btn{font-size:13px;padding:10px 4px;white-space:nowrap}.share-btn{white-space:nowrap;font-size:12px}}
.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,var(--btn-a),var(--btn-b))}
.share-btn-copy{background:linear-gradient(135deg,#64748b,#475569)}
.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{position:relative}
.col-rank{position:absolute;top:10px;left:10px;z-index:1;background:#ea580c;color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.col-card.col-hot{border-color:#fdba74}
.col-rank.col-top{background:linear-gradient(135deg,#ef4444,#f97316);font-size:13px;letter-spacing:.3px}
.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(--line)}
.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}
/* 칼럼 목록 '🖼 제목·사진만' 보기 (2026-10-23) — 여행·축제 .tr-thumb 와 같은 크기·모양 */
.col-thumbs .colgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.col-thumbs .col-card{border-radius:12px}
.col-thumbs .col-card img{aspect-ratio:4/3}
.col-thumbs .col-card-body{padding:8px 10px 10px}
.col-thumbs .col-card-body h3{font-size:14px;font-weight:800;line-height:1.35;margin:0;word-break:keep-all}
.col-thumbs .col-card-body p,.col-thumbs .col-date{display:none}
.col-thumbs .col-rank{top:6px;left:6px;font-size:11px;padding:3px 8px}
.col-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.col-fold-btn{flex:none;border:1px solid var(--line);background:var(--card);color:var(--sky-dark);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
.col-fold-btn:hover{border-color:var(--sky)}
.col-sec.col-folded .colgrid,.col-sec.col-folded .col-more-btn{display:none}
.col-sec.col-folded{margin-bottom:8px}
.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(--line)}
.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:12px;color:var(--sub);margin:0}
.col-hero{width:100%;max-width:680px;height:auto;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-fig{margin:6px 0 22px}
.map-go-wrap{text-align:center;margin:4px 0 22px}.map-go{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;background:#02803a;color:#fff!important;text-decoration:none!important;font-weight:800;font-size:15px;border-radius:999px;padding:10px 18px;box-shadow:0 2px 8px rgba(3,199,90,.25)}.map-go span{font-weight:600;font-size:13px;opacity:.9}.map-go.sm{font-size:12px;padding:3px 9px;box-shadow:none;margin-left:4px;vertical-align:middle;white-space:nowrap}
.col-fig img{display:block;width:100%;margin:0}
.col-fig figcaption{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.5}
.col-center p,.col-center h2,.col-center h3,.col-center li,.col-center figcaption{text-align:center}
.col-center ul,.col-center ol{list-style-position:inside;padding-left:0}
.col-stk{text-align:center;margin:8px 0 18px}
.col-stk img{display:inline-block;width:auto;max-width:60%;margin:0 auto}
.guide-links{max-width:680px;margin:18px auto 8px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.guide-links-h{margin:0 0 8px;font-size:15px;font-weight:800;color:var(--ink)}
.guide-links ul{margin:0;padding:0;list-style:none}
.guide-links li{border-top:1px solid var(--line)}
.guide-links li:first-child{border-top:0}
.guide-links a{display:block;padding:10px 2px;font-size:15px;line-height:1.5;color:var(--sky-dark);font-weight:700;word-break:keep-all}
.guide-links ul.post-rows li,.guide-links li:has(.post-row){border-top:0}
.post-row{position:relative;display:flex!important;align-items:center;gap:10px;padding:7px 10px 7px 7px!important;margin:6px 0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)!important;text-decoration:none;text-align:left}
.post-row:hover{border-color:var(--sky-dark)}
.post-row-ic{flex:0 0 56px;width:56px;height:56px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--card);font-size:24px}
.post-row-ic img{width:100%!important;height:100%!important;object-fit:cover;margin:0!important}
.post-row-tt{min-width:0;font-size:14px;font-weight:700;line-height:1.35;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-row-tt small{display:block;font-size:11px;font-weight:600;color:var(--sub)}
.post-row .col-rank{position:static;flex:0 0 auto;font-size:11px;padding:3px 7px;box-shadow:none}
.guide-spots{margin-top:12px}
.col-tags{max-width:680px;margin:6px auto 18px;font-size:14px;font-weight:700;color:var(--sky-dark);line-height:1.8;word-break:keep-all}
.col-body mark.kw{--hl:#fff176;--ink:#1d4ed8;color:var(--ink);font-weight:900;font-size:1.1em;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.col-body mark.kw.kw-hl{background:var(--hl);border-radius:4px;padding:1px 4px;color:var(--ink)}
.col-body mark.kw.kw-ul{background:linear-gradient(transparent 48%,var(--hl) 48%)}
.col-body mark.kw.kw-bd{background:none;font-size:1.15em;text-decoration:underline;text-decoration-color:var(--hl);text-decoration-thickness:.22em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.col-body mark.kw.kw0{--hl:#fff176;--ink:#1d4ed8}
.col-body mark.kw.kw1{--hl:#a7f3d0;--ink:#047857}
.col-body mark.kw.kw2{--hl:#fbcfe8;--ink:#be185d}
.col-body mark.kw.kw3{--hl:#bae6fd;--ink:#0369a1}
.col-body mark.kw.kw4{--hl:#fed7aa;--ink:#c2410c}
.col-body mark.kw.kw5{--hl:#ddd6fe;--ink:#6d28d9}
.col-body mark.kw.kw6{--hl:#d9f99d;--ink:#4d7c0f}
.col-body mark.kw.kw7{--hl:#fecaca;--ink:#b91c1c}
.col-body mark.kw.kw-tc{background:none;padding:0 1px}
.col-body p.hlp{--hp:#fff3a3;background:var(--hp);border-radius:10px;padding:12px 16px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.col-body p.hlp-y{--hp:#fff3a3}.col-body p.hlp-m{--hp:#c6f6dd}.col-body p.hlp-p{--hp:#ffd8e8}
.col-body p.hlp-s{--hp:#d2ebff}.col-body p.hlp-o{--hp:#ffe0bf}.col-body p.hlp-v{--hp:#e6dcff}
:root[data-theme="dark"] .col-body p.hlp-y{--hp:rgba(250,204,21,.22)}:root[data-theme="dark"] .col-body p.hlp-m{--hp:rgba(52,211,153,.2)}
:root[data-theme="dark"] .col-body p.hlp-p{--hp:rgba(244,114,182,.2)}:root[data-theme="dark"] .col-body p.hlp-s{--hp:rgba(56,189,248,.2)}
:root[data-theme="dark"] .col-body p.hlp-o{--hp:rgba(251,146,60,.2)}:root[data-theme="dark"] .col-body p.hlp-v{--hp:rgba(167,139,250,.22)}
.col-body.col-gap p:not([class]),.col-body.col-gap p.hlp{margin-bottom:1.85em}
:root[data-theme="dark"] .col-body mark.kw.kw0{--hl:rgba(250,204,21,.38);--ink:#fde047}
:root[data-theme="dark"] .col-body mark.kw.kw1{--hl:rgba(52,211,153,.35);--ink:#6ee7b7}
:root[data-theme="dark"] .col-body mark.kw.kw2{--hl:rgba(244,114,182,.35);--ink:#f9a8d4}
:root[data-theme="dark"] .col-body mark.kw.kw3{--hl:rgba(56,189,248,.35);--ink:#7dd3fc}
:root[data-theme="dark"] .col-body mark.kw.kw4{--hl:rgba(251,146,60,.35);--ink:#fdba74}
:root[data-theme="dark"] .col-body mark.kw.kw5{--hl:rgba(167,139,250,.38);--ink:#c4b5fd}
:root[data-theme="dark"] .col-body mark.kw.kw6{--hl:rgba(163,230,53,.33);--ink:#bef264}
:root[data-theme="dark"] .col-body mark.kw.kw7{--hl:rgba(248,113,113,.35);--ink:#fca5a5}
.col-body p.col-credit{font-size:12px;color:var(--sub);margin-top:26px}
.wxp-slot{max-width:680px;margin:26px auto;text-align:left}
.wxp-label{font-size:11px;color:var(--sub);margin:0 0 6px!important;text-align:left!important}
.wxp-label a{color:var(--sub)}
.wxp-card{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none;text-align:left}
.wxp-card img{width:96px;height:96px;object-fit:cover;border-radius:8px;flex:none}
.wxp-card .wxp-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700;font-size:15px;line-height:1.45;word-break:keep-all}
.wxp-card .wxp-d{display:block;color:var(--sub);font-size:13px;margin-top:4px}
.wxp-card .wxp-btn{display:inline-block;margin-top:8px;background:var(--btn-a);color:#fff;border-radius:8px;padding:5px 10px;font-size:13px;font-weight:700}
.wxp-note{font-size:11px!important;color:var(--sub);margin:6px 0 0!important;text-align:left!important}
.col-nonote .wxp-note,.col-nonote ~ * .wxp-note{display:none}
.col-tabs{margin:6px 0 4px}
/* 휴대폰: 주제 칩을 여러 줄로 감싸 한 번에 다 보이게 (2026-10-24 사용자 요청, 예전엔 한 줄 가로 밀기) */
@media (max-width:719px){.tr-chips.col-tabs{flex-wrap:wrap;gap:6px}.col-tabs .tr-chip{white-space:nowrap;padding:6px 10px;font-size:13px}}
.adk-item{display:flex;flex-direction:column}.adk-item .wxp-card{flex:1}
.adk-meta{margin:4px 2px 0;font-size:12px;color:var(--sub)}.adk-off{opacity:.55}
.adk-sec h2 small{font-size:13px;font-weight:600;color:var(--sub)}
.wxp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0 26px}
.wxp-fix{margin:30px auto}
.col-body .wxp-lead,.wxp-lead{font-size:16px;line-height:1.8;color:var(--ink);margin:0 auto 14px!important;text-align:center!important;word-break:keep-all;white-space:pre-line;text-wrap:balance;max-width:26em}
@media (max-width:600px){.col-body .wxp-lead,.wxp-lead{font-size:16.5px;line-height:1.85;max-width:20em}}
.wxp-card-lg{position:relative;gap:18px;padding:22px 20px 20px;border:1.5px solid var(--line);box-shadow:0 2px 10px rgba(15,23,42,.06);transition:transform .15s,box-shadow .15s}
.wxp-card-lg:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.12)}
.wxp-card-lg img{width:160px;height:160px;border-radius:12px}
.wxp-card-lg .wxp-t{font-size:18px}
.wxp-card-lg .wxp-d{font-size:15px;margin-top:6px}
.wxp-badge{position:absolute;top:-9px;left:12px;background:#c2410c;color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em;border-radius:6px;padding:2px 8px;line-height:1.5}
.wxp-card .wxp-why{display:block;font-size:12px;font-weight:600;color:var(--sub);margin-bottom:2px;word-break:keep-all}
.wxp-card .wxp-k{display:block;font-size:12px;font-weight:800;color:var(--sky-dark);margin-bottom:3px;word-break:keep-all}
.wxp-card-lg .wxp-btn{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));margin-top:12px;padding:11px 20px;font-size:16px;border-radius:999px}
.wxp-card-lg .wxp-why{font-size:13px;margin-bottom:4px}
.wxp-card-lg .wxp-k{font-size:14px;margin-bottom:4px}
.wxp-fix .wxp-note{font-size:12px!important;line-height:1.5}
@media (max-width:420px){.wxp-card-lg{gap:12px;padding:18px 14px 14px}.wxp-card-lg img{width:104px;height:104px}.wxp-card-lg .wxp-t{font-size:16px}.wxp-card-lg .wxp-btn{font-size:14px;padding:9px 14px}}
@media (prefers-reduced-motion:reduce){.wxp-card-lg,.wxp-card-lg:hover{transition:none;transform:none}}
.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)}
.visitor-counter{font-size:12px;color:var(--sub);margin:0 0 14px;text-align:right}
@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-emoji{display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1}
.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{position:relative;overflow:hidden;background:linear-gradient(160deg,#e0f2fe,var(--card) 62%);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.popular a:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:0 8px 20px rgba(56,189,248,.18)}
:root[data-theme="dark"] .popular a{background:linear-gradient(160deg,#0f2942,var(--card) 62%)}
.pc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pc-icon{font-size:40px;line-height:1}
/* 인기 지역 아이콘 애니메이션 (2026-10-26 사용자 요청): 날씨마다 움직임이 다르고, 카드마다 박자를 어긋나게 */
.pc-icon > *{display:inline-block;animation:pcFloat 3.2s ease-in-out infinite}
.pc-icon.pc-sun > *{animation:pcSun 6s ease-in-out infinite}
.pc-icon.pc-rain > *{animation:pcRain 1.6s ease-in-out infinite}
.pc-icon.pc-snow > *{animation:pcSnow 3s ease-in-out infinite}
.pc-icon.pc-storm > *{animation:pcStorm 2.4s ease-in-out infinite}
.pc-icon.pc-cloud > *{animation:pcCloud 4s ease-in-out infinite}
.popular a:nth-child(2n) .pc-icon > *{animation-delay:-.8s}
.popular a:nth-child(3n) .pc-icon > *{animation-delay:-1.6s}
.popular a:hover .pc-icon > *{animation-duration:1s}
@keyframes pcFloat{50%{transform:translateY(-4px)}}
@keyframes pcSun{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(14deg) scale(1.08)}}
@keyframes pcRain{0%,100%{transform:translateY(0)}40%{transform:translateY(3px) rotate(-3deg)}70%{transform:translateY(-2px)}}
@keyframes pcSnow{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(3px,-3px) rotate(8deg)}}
@keyframes pcStorm{0%,86%,100%{transform:translateX(0);filter:none}88%{transform:translateX(-2px);filter:brightness(1.6)}92%{transform:translateX(2px)}95%{filter:brightness(1.4)}}
@keyframes pcCloud{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.pc-temp{animation:pcPop .6s ease-out both}
@keyframes pcPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pc-temp{font-size:26px;font-weight:800;color:var(--sky-dark);letter-spacing:-1px}
:root[data-theme="dark"] .pc-temp{color:var(--sky)}
.pc-name{display:block;font-weight:800;font-size:15px}
.pc-now{display:block;font-size:12px;color:var(--sub)}
.pc-hl{display:block;font-size:12px;font-weight:700}
.pc-tip{display:block;font-size:12px;color:var(--sub);margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);line-height:1.45;word-break:keep-all}
.interestbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
/* '🎯 오늘 뭐 하고 놀까?' (activity_hub_html, 2026-10-24) — 타일 + 오늘 판정 배지 */
.act-hub-sub{margin:0 0 10px;font-size:13px;color:var(--sub)}
.act-hub .act-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:520px){.act-hub .act-chips{grid-template-columns:repeat(4,minmax(0,1fr))}}
.act-hub .act-chips button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;padding:10px 4px 8px;min-height:86px;background:var(--bg);font-size:13px}
.act-i{font-size:28px;line-height:1}
.act-n{font-weight:800;white-space:nowrap}
.act-b{font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px;line-height:1.5}
.act-b:empty{display:none}
.act-hub .act-chips button{position:relative}
.act-r{position:absolute;top:4px;left:4px;font-size:10px;font-weight:900;line-height:1;padding:3px 5px;border-radius:999px;background:var(--card);color:var(--sub);border:1px solid var(--line)}
.act-r:empty{display:none}
.act-r.n1,.act-c-no.n1{background:#F2B544;color:#1F2A44;border-color:transparent}
.act-r.n2,.act-c-no.n2{background:#C9D1E3;color:#1F2A44;border-color:transparent}
.act-r.n3,.act-c-no.n3{background:#E0A57A;color:#1F2A44;border-color:transparent}
.act-c-no{display:inline-block;margin-right:6px;font-size:11px;font-weight:900;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.act-more-btn{margin:12px auto 0}
.act-b.g{background:#dcfce7;color:#166534}.act-b.m{background:#fef3c7;color:#92400e}.act-b.b{background:#fee2e2;color:#991b1b}
:root[data-theme="dark"] .act-b.g{background:#14361f;color:#86efac}:root[data-theme="dark"] .act-b.m{background:#3a2a0a;color:#fde68a}:root[data-theme="dark"] .act-b.b{background:#3b1414;color:#fca5a5}
.act-hub .product-teaser{display:none}
#actHubTop{scroll-margin-top:72px}
.act-courses{margin:12px 0 0}
.act-courses[hidden],.act-ads-box[hidden]{display:none}
.act-c-h{margin:0 0 8px;font-size:16px;font-weight:800}
/* 활동 코스 원형 둘러보기 (2026-10-24) — .tr-radar 모양 + 가운데 활동 캐릭터 */
.act-radar{max-width:480px}
.act-me{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle,var(--card) 58%,color-mix(in srgb,var(--btn-a) 22%,var(--card)));box-shadow:0 0 0 0 color-mix(in srgb,var(--btn-a) 45%,transparent);animation:trPulse 2.4s infinite}
.act-me img{width:86%;height:86%;object-fit:contain;margin-top:-8%}
.act-me span{font-size:40px}
.act-me b{position:absolute;bottom:-6px;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));border-radius:999px;padding:2px 8px;white-space:nowrap}
.act-rb .tr-rb-img{background:var(--card);font-size:22px}
.act-rb.dot .tr-rb-img{font-size:13px}
.act-rb .tr-rb-img img.act-ic{width:74%;height:74%;object-fit:contain}
.act-rb.dot .tr-rb-name{font-size:9.5px;max-width:62px;opacity:.85}
@media (max-width:520px){.act-rb.dot .tr-rb-name{display:none}.act-rb .tr-rb-name{max-width:64px}}
.act-radar-note{text-align:center;margin:0 0 10px}
.act-c{scroll-margin-top:80px}
.act-c-hl{animation:actHl 1.6s ease}
@keyframes actHl{0%,40%{box-shadow:0 0 0 3px var(--sky)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.act-me{animation:none}}
.act-c-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.act-c-list{grid-template-columns:1fr}}
.act-c{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card);min-width:0}
.act-c-top{margin:0 0 4px;display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--sub)}
.act-c-reg{font-weight:700;color:var(--sky-dark)}
:root[data-theme="dark"] .act-c-reg{color:var(--sky)}
.act-c-cat{background:var(--bg);border-radius:999px;padding:1px 8px;font-weight:700}
.act-c h3{margin:0 0 4px;font-size:15px;line-height:1.4;word-break:keep-all}
.act-c-addr,.act-c-desc{margin:0 0 4px;font-size:13px;color:var(--sub);line-height:1.5}
.act-c-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.act-c-meta{margin:0 0 6px;font-size:12px;color:var(--sub);display:flex;flex-direction:column;gap:2px}
.act-c-w{font-size:13px;font-weight:700}
.act-c-foot{display:flex;gap:8px;margin:12px 0 0}
.act-top,.act-all{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:12px;padding:12px 10px;font-size:14px;font-weight:800;min-height:46px;text-decoration:none;cursor:pointer;font-family:inherit}
.act-top{border:none;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:#fff}
.act-all{border:1px solid var(--line);background:var(--card);color:var(--ink)}
.act-ads-box{margin:12px 0 0}
.act-more{margin:12px 0 0;font-size:13px;color:var(--sub);text-align:center}
.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;min-height:40px}
.interest-chips button:hover{border-color:var(--sky)}
.interest-chips button.on{background:var(--sky-dark);border-color:var(--sky-dark);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)}
.product-teaser-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px}
.product-teaser-blurb{font-size:13px;color:var(--ink);line-height:1.6;margin:4px 0 10px}
.teaser-items{display:flex;flex-direction:column;gap:8px}
.teaser-item{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:10px;padding:8px}
.teaser-item img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.teaser-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.teaser-item-body h5{margin:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teaser-item-price{font-size:12px;color:var(--sub);font-weight:700}
.teaser-item .buy-btn{margin-top:4px;padding:8px;font-size:12px}
.buy-btn{display:block;text-align:center;background:#d63c16;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;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.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(--btn-a),var(--btn-b));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(--btn-a),var(--btn-b));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:2px;padding:10px 0;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;padding:10px 0;font-size:13px;font-weight:700;color:var(--sky-dark);text-decoration:underline}
.spot-card h3 a{color:var(--sky-dark);text-decoration:none}
.spot-card h3 a:hover{text-decoration:underline}
.gc-detail-badge{font-size:10px;font-weight:800;color:var(--sky-dark);background:#e0f2fe;border-radius:999px;padding:2px 8px;vertical-align:middle}
:root[data-theme="dark"] .gc-detail-badge{background:#0c3a52;color:var(--sky)}
.gc-detail-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 16px;margin:0 0 16px}
.gc-detail-row{font-size:13px;line-height:1.6;padding:12px 0;border-bottom:1px solid var(--line)}
.gc-detail-row:last-child{border-bottom:none}
.gc-detail-row b{display:block;margin-bottom:2px}
.gc-restaurant-list,.gc-source-list{padding:0 0 0 20px;margin:0 0 16px;font-size:13px;line-height:1.7}
.gc-source-list{list-style:none;padding-left:0}
.gc-source-list li{margin-bottom:4px}
.ws-head{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.ws-cat{font-size:12px;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:9px 14px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);font-family:inherit;min-height:40px}
.cat-filter-btn:hover{border-color:var(--sky)}
.cat-filter-btn.on{background:var(--sky-dark);border-color:var(--sky-dark);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}
@media (min-width:641px){.bottom-tabbar{display:none!important}
.bt-sheet .bt-sheet-in{top:118px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:min(560px,92vw);border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.2)}}
@media (min-width:641px){body{padding-bottom:72px}.pokedex-fab,.to-top{bottom:84px}.capture-toast{bottom:88px}}
.bottom-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:32;display:flex;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom)}
.bottom-tabbar a,.bottom-tabbar button{flex:1;min-width:0;white-space:nowrap;letter-spacing:-.3px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 9px;font-size:12px;color:var(--sub);font-weight:700;background:none;border:none;font-family:inherit;cursor:pointer;text-decoration:none}
.bottom-tabbar a.bt-wide{flex:1.5}
@media (max-width:374px){.bottom-tabbar a,.bottom-tabbar button{font-size:11px;letter-spacing:-.6px}}
.bottom-tabbar .bt-icon{font-size:22px;line-height:1;height:26px;display:flex;align-items:center}
.bottom-tabbar .bt-icon .e3d{width:26px;height:26px}
.bottom-tabbar a.on,.bottom-tabbar button.on,.bottom-tabbar button.open{color:var(--sky-dark)}
.bt-sheet{position:fixed;inset:0;z-index:31;background:rgba(0,0,0,.35)}
.bt-sheet[hidden]{display:none}
.bt-sheet-in{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));background:var(--card);border-radius:20px 20px 0 0;padding:16px 16px 12px;box-shadow:0 -8px 30px rgba(0,0,0,.15)}
.bt-sheet-h{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--sub)}
.bt-sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bt-sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;background:var(--bg);font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;text-align:center}
.bt-sheet-grid a.on{outline:2px solid var(--sky-dark)}
.bt-sheet-grid .bt-icon{font-size:28px;line-height:1}
.bt-sheet-grid .bt-icon .e3d{width:34px;height:34px}
.capture-toast{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;z-index:40;display:flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:10px 16px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:13px;line-height:1.4;text-decoration:none;transition:opacity .3s,transform .3s;width:max-content;max-width:calc(100% - 32px);white-space:nowrap}
.capture-toast.show{opacity:1;transform:translate(-50%,0)}
.capture-toast .ct-emo{font-size:26px;line-height:1}
.capture-toast .ct-emo .e3d{width:32px;height:32px}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.to-top{position:fixed;right:12px;bottom:84px;width:42px;height:42px;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)}
.pokedex-fab{transition:opacity .2s}.pokedex-fab:not(.show){opacity:0;pointer-events:none}
.pokedex-fab{position:fixed;left:12px;bottom:84px;width:40px;height:40px;opacity:.9;border-radius:50%;background:#f59e0b;color:#fff;box-shadow:0 4px 14px rgba(245,158,11,.4);z-index:30;display:flex;align-items:center;justify-content:center;font-size:20px;text-decoration:none}
.pokedex-header{font-size:15px;font-weight:800;margin:10px 0 16px;color:var(--ink)}
.pokedex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pokedex-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center;cursor:pointer}
.pokedex-card:hover{border-color:var(--sky)}
.pokedex-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:6px;background:var(--bg)}
.pokedex-card-emoji{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:36px;border-radius:10px;margin-bottom:6px;background:var(--bg)}
.pokedex-card-emoji-lg{width:120px;height:120px;font-size:56px;margin:0 auto 10px}
.pokedex-card-name{font-size:12px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pokedex-card-race{font-size:11px;font-weight:700;color:var(--sky-dark);margin:2px 0}
.pdx-races{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.pdx-race{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer}
.pdx-race span{color:var(--sub);font-weight:600}
.pdx-race.on{background:var(--btn-a);border-color:var(--btn-a);color:#fff}.pdx-race.on span{color:#e0f2fe}
.pokedex-card-level{font-size:12px;color:var(--sky-dark);font-weight:800}
.pokedex-card-visits{font-size:12px;color:var(--sub)}
.pokedex-card-desc{font-size:10px;color:var(--sub);margin-top:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pokedex-card.locked{opacity:.55}
.pokedex-silhouette{filter:brightness(0);opacity:.65}
/* 2026-10-27: 그림 뒤 바탕색까지 검게 칠해져 회색 네모가 되던 것 → 바탕을 비워 캐릭터 모양만 실루엣으로 */
img.pokedex-silhouette{background:transparent!important;opacity:.55}
.pokedex-dl{display:inline-block;margin:0 8px 0 0;background:var(--card);color:var(--sky-dark);border:1.5px solid var(--sky-dark);font-weight:700;padding:9px 18px;border-radius:999px;font-size:14px;text-decoration:none}
.pokedex-card-dl{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--sky-dark);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--card)}
.pokedex-card-dl:hover,.pokedex-dl:hover{background:var(--sky-dark);color:#fff}
.legendary-capture-box{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#7c3aed,#1e1b4b);color:#fff;border-radius:16px;padding:16px;margin:14px 0}
.legendary-egg,.legendary-real{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:32px;flex:0 0 auto;object-fit:cover}
.legendary-text{flex:1;min-width:0}
.legendary-text .section-title{color:#fff}
.legendary-capture-box .note{color:rgba(255,255,255,.85)}
.legendary-capture-box .legendary-capture-msg{color:rgba(255,255,255,.85)}
.pokedex-card.locked .pokedex-card-name{color:var(--sub)}
.pokedex-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.pokedex-popup{background:var(--card);border-radius:20px;padding:28px 24px;text-align:center;max-width:280px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.pokedex-popup-emoji{font-size:56px;margin-bottom:10px}
.pokedex-popup img{width:120px;height:120px;object-fit:cover;border-radius:16px;margin:0 auto 10px;display:block}
.pokedex-popup-title{font-size:17px;font-weight:800;margin:0 0 6px;color:var(--ink)}
.pokedex-popup-desc{font-size:13px;color:var(--sub);margin:0 0 18px}
.pokedex-popup-close{display:inline-block;background:var(--sky-dark);color:#fff;font-weight:700;padding:10px 24px;border-radius:999px;border:none;font-size:14px;cursor:pointer;font-family:inherit}
.island-mascot-real{display:contents}
.island-mascot-slot{display:contents}
.island-capture-box{text-align:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.island-capture-btn{background:#b45309;color:#fff;font-weight:800;font-size:14px;padding:10px 22px;border-radius:999px;border:none;cursor:pointer;font-family:inherit}
.island-capture-btn:hover{opacity:.92}
.island-capture-msg{font-size:13px;color:var(--sub);margin:8px 0 0}
.island-capture-msg:empty{display:none}
.island-stage-btn{background:var(--sky-dark);color:#fff;font-weight:700;font-size:13px;padding:8px 18px;border-radius:999px;border:none;cursor:pointer;font-family:inherit;margin-left:6px}
.island-stage-btn:hover{opacity:.92}
.pokedex-popup:has(.island-stage-gallery){max-width:340px}
.island-stage-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0;text-align:center}
.island-stage-item img{width:100%;height:90px;object-fit:contain;border-radius:10px;background:var(--bg)}
.island-stage-item-label{font-size:12px;font-weight:800;margin:4px 0 2px;color:var(--ink)}
.island-stage-item-desc{font-size:11px;color:var(--sub);margin:0}
.region-char-section .pokedex-card{width:140px;margin:0 auto}
.region-char-section .pokedex-card-name,.region-char-section .pokedex-card-level,.region-char-section .pokedex-card-visits{white-space:normal}
.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,.hero .hero-h{font-size:18px}.hero .temp{font-size:32px}}
.tr-tabs{display:flex;gap:8px;margin:16px 0}
.tr-tab{flex:1;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:12px 8px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit}
.tr-tab.on{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:#fff;border-color:transparent}
@media (max-width:480px){.tr-tabs{gap:6px}.tr-tab{font-size:13px;padding:9px 2px;letter-spacing:-.3px;white-space:nowrap}.tr-ico{display:block;font-size:18px;margin-bottom:2px}}
.tr-mine{display:inline-block;padding:8px 0;font-weight:800;color:var(--ink);text-decoration:none}
.tr-fest-name a.tr-detail,a.tr-detail{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;vertical-align:middle;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));border:0}
.tr-km{display:flex;flex-wrap:nowrap;gap:6px}.tr-km .tr-chip{flex:1;padding:8px 0;text-align:center}
.tr-nearbtn{display:block;width:100%;border:0;border-radius:12px;padding:14px 12px;font-weight:800;font-size:16px;cursor:pointer;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));margin:4px 0 12px}
.tr-km{margin-bottom:6px}
.tr-now{margin-bottom:6px;align-items:center}
.tr-kind{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;max-width:100%}
.tr-band{margin-top:18px}
/* 내 주위 '둘러보기' — 가운데 = 나, 거리·방향대로 사진이 떠 있다 (사용자 요청 2026-10-23) */
.tr-radar{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;margin:10px auto 6px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--btn-a) 14%,var(--card)) 0%,var(--card) 72%);border:1px solid var(--line)}
.tr-ring{position:absolute;left:50%;top:50%;border:1px dashed color-mix(in srgb,var(--btn-a) 45%,transparent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.tr-ring b{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);font-size:11px;font-weight:800;color:var(--btn-a);background:var(--card);padding:0 5px;border-radius:8px}
.tr-axis{position:absolute;font-size:11px;font-weight:800;color:var(--muted,#888);pointer-events:none}
.tr-me{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 0 0 0 color-mix(in srgb,var(--btn-a) 50%,transparent);animation:trPulse 2s infinite}
@keyframes trPulse{70%{box-shadow:0 0 0 18px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tr-rb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);z-index:2;
  transition:left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1),opacity .6s;opacity:0}
.tr-rb.in{opacity:1}
.tr-rb-float{display:flex;flex-direction:column;align-items:center;animation:trFloat var(--dur,4s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes trFloat{from{transform:translate(0,0)}to{transform:translate(var(--fx,4px),var(--fy,-6px))}}
.tr-rb-img{width:clamp(40px,11vw,60px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.25);background:var(--line);display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .2s}
.tr-rb-img img{width:100%;height:100%;object-fit:cover;display:block}
.tr-rb.dot .tr-rb-img{width:clamp(26px,7vw,34px);font-size:14px;border-width:2px}
.tr-rb-name{margin-top:3px;max-width:74px;font-size:10.5px;font-weight:800;line-height:1.2;text-align:center;background:color-mix(in srgb,var(--card) 88%,transparent);border-radius:6px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-rb-km{font-size:10px;color:var(--btn-a);font-weight:800}
.tr-rb:hover,.tr-rb:focus-visible{z-index:5}
.tr-rb:hover .tr-rb-img,.tr-rb:focus-visible .tr-rb-img{transform:scale(1.25)}
.tr-rb:hover .tr-rb-name{max-width:160px;white-space:normal}
@media (prefers-reduced-motion:reduce){.tr-rb,.tr-rb-float,.tr-me{transition:none;animation:none}}
.tr-dist{display:inline-block;min-width:52px;font-weight:800;color:var(--accent,#0057FF);font-size:13px;margin-right:6px}
.tr-monthbar{display:flex;align-items:center;justify-content:space-between;margin:8px 0 10px}
.tr-monthbar strong{font-size:20px;color:var(--ink)}
.tr-nav{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;width:44px;height:40px;font-size:15px;cursor:pointer}
.tr-nav:disabled{opacity:.35;cursor:default}
.tr-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tr-wd{text-align:center;font-size:12px;font-weight:700;color:var(--sub);padding:4px 0}
.tr-wd:first-child{color:var(--warn)}
.tr-day{position:relative;min-height:52px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-family:inherit;color:var(--ink)}
.tr-empty{border:none;background:none;cursor:default}
.tr-past{opacity:.5}
.tr-today{border:2px solid var(--sky-dark)}
.tr-sel{background:var(--btn-b);color:#fff;border-color:var(--btn-b)}
.tr-dnum{font-size:14px;font-weight:700}
.tr-dcount{font-size:12px;font-weight:700;color:var(--sky-dark);line-height:1.2}
.tr-sel .tr-dcount{color:#fff}
.tr-dcount.tr-open{color:var(--warn)}
.tr-legend{margin-top:8px}
.tr-festlist,.tr-places{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:8px}
.tr-fest,.tr-place{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tr-fest-name,.tr-place a{font-weight:700;color:var(--ink)}
.tr-fest-name a{color:var(--ink)}
.tr-fest-meta,.tr-place-meta{width:100%;font-size:13px;color:var(--sub)}
.tr-place-meta b{color:var(--sky-dark)}
.tr-fest>a.tr-detail,.tr-place>a.tr-detail{margin-left:0}
.tr-view{display:flex;gap:6px;margin:4px 0 8px}
.tr-festlist.tr-thumbs,.tr-rec .tr-places.tr-thumbs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tr-rec .tr-places.tr-thumbs{margin:4px 0 12px}
.tr-thumb{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tr-thumb>a,.tr-thumb>span{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
.tr-thumb-img{aspect-ratio:4/3;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden}
.tr-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.tr-thumb-name{padding:8px 10px 10px;font-weight:800;font-size:14px;line-height:1.35;word-break:keep-all}
.tr-thumbs>li:not(.tr-thumb){grid-column:1/-1}
.tr-place>a.tr-detail{color:#fff}
.tr-badge{font-size:11px;font-weight:800;color:#fff;background:var(--btn-b);border-radius:6px;padding:2px 6px}
.tr-badge.tr-guess{background:#64748b}
.tr-wlink{font-weight:700;color:var(--sky-dark);margin-left:4px;white-space:nowrap}
.tr-reclist{display:grid;gap:8px;margin-bottom:16px}
.tr-rec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 14px}
.tr-rec summary{display:flex;justify-content:space-between;align-items:center;padding:10px 0;cursor:pointer;font-weight:800;color:var(--ink)}
.tr-rec-count{font-size:13px;font-weight:600;color:var(--sub)}
.tr-rec .tr-place{border:none;border-top:1px solid var(--line);border-radius:0;padding:10px 0;background:none}
.tr-rec .tr-places{gap:0;margin:0 0 8px}
.tr-more{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--sky-dark);border-radius:10px;padding:10px;font-weight:700;cursor:pointer;font-family:inherit;margin-bottom:10px}
.tr-searchbox input{width:100%;box-sizing:border-box}
.tr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.tr-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.tr-chip.on{background:var(--btn-b);color:#fff;border-color:var(--btn-b)}
.tr-wchips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.tr-wchip{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:700;font-size:13px;color:var(--sky-dark)}
.tr-src{margin-top:20px}
@media (max-width:380px){.tr-day{min-height:46px}.tr-dnum{font-size:13px}}

img.e3d{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.28em;object-fit:contain;margin:0 .04em;border-radius:0;box-shadow:none;background:none}
.quick-link-emoji .e3d{width:44px;height:44px;margin:0}
.jump-nav{position:sticky;top:56px;z-index:9;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px -16px 4px;padding:8px 16px;background:var(--bg)}
.jump-nav::-webkit-scrollbar{display:none}
.jump-nav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.jump-nav a:hover{border-color:var(--sky)}
.jump-anchor{scroll-margin-top:110px}
.col-sec.collapsible:not(.open) .col-more{display:none}
.col-more-btn{display:block;width:100%;margin:12px 0 4px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--sky-dark);font-weight:800;font-size:14px;cursor:pointer;font-family:inherit}
.col-sec.open .col-more-btn{display:none}

/* ── 2026-10-26 디자인 변경 (사용자 시안 '데스크톱 홈'·'모바일 여행·축제 달력') ──
   색: 바탕 #F5F7FF · 카드 흰색 · 선 #E3E8F6 · 글 #1F2A44/#5B6478 · 주색 #3B5BDB · 강조 분홍 #E8517A/#D6336C · 노랑 #F2B544
   글꼴: Noto Sans KR(본문)·Jua(로고). 카드 모서리 16, 칩·버튼은 알약 모양. 위 CSS 를 지우지 않고 여기서 덮어쓴다. */
:root{--sky:#5C7CFA;--sky-dark:#3B5BDB;--btn-a:#3B5BDB;--btn-b:#2F4AB8;--ink:#1F2A44;--sub:#5B6478;--line:#E3E8F6;--bg:#F5F7FF;--card:#ffffff;
  --soft:#EEF2FF;--soft2:#F8FAFF;--tint:#DCE4FF;--pink:#E8517A;--pink-d:#D6336C;--amber:#F2B544;--faint:#A0A8BC}
:root[data-theme="dark"]{--sky:#8FA5FF;--sky-dark:#8FA5FF;--btn-a:#4C6EF5;--btn-b:#3B5BDB;--ink:#E8ECF7;--sub:#9AA3B8;--line:#2A3450;--bg:#0F1526;--card:#172038;
  --soft:#1E2944;--soft2:#1A2440;--tint:#2A3A6B;--pink:#F07397;--pink-d:#F07397;--faint:#6B7590}
body{font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--sky-dark);outline-offset:2px}
main.wrap.wide{max-width:1232px}
/* 머리: 흰 바탕 · 로고 · 검색 · 지역/날짜 + 글자 탭 줄 */
.topbar,:root[data-theme="dark"] .topbar{background:var(--card);color:var(--ink);box-shadow:none;border-bottom:1px solid var(--line)}
.topbar .wrap{max-width:1232px}
.topbar-in{height:68px;gap:20px;justify-content:flex-start}
.brand{gap:8px}
.brand-logo{width:34px;height:34px;border-radius:10px}
.brand-t{font-family:"Jua","Noto Sans KR",sans-serif;font-weight:400;font-size:26px;color:var(--sky-dark);letter-spacing:-.5px}
.brand img.brand-ko{width:auto;height:60px;border-radius:0;margin:-6px 0}
.page-emo{float:right;width:96px;height:96px;margin:-6px 0 4px 10px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.12))}
@media (max-width:640px){.page-emo{width:72px;height:72px}}
@media (max-width:760px){.brand img.brand-ko{height:46px;margin:-4px 0}}
.hd-search{flex:1;max-width:470px;display:flex;align-items:center;background:var(--soft2);border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 18px}
.hd-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);outline:none;padding:6px 0}
.hd-search input::placeholder{color:var(--faint)}
.hd-search button{width:36px;height:36px;border-radius:50%;border:0;background:var(--sky-dark);color:#fff;cursor:pointer;font-size:15px;flex:none;display:flex;align-items:center;justify-content:center}
.hd-search button .e3d{width:18px;height:18px}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.hd-loc{background:var(--soft);color:var(--sky-dark);font-weight:700;font-size:13px;border-radius:999px;padding:8px 14px}
.hd-loc .e3d{width:15px;height:15px;vertical-align:-2px}
.hd-date{font-size:13px;color:var(--sub);margin-right:4px}
.hd-sbtn{display:none}
.theme-toggle,.font-toggle,.visitor-badge,:root[data-theme="dark"] .theme-toggle,:root[data-theme="dark"] .font-toggle{background:var(--soft);color:var(--sub)}
.theme-toggle:hover,.font-toggle:hover{background:var(--tint)}
.visitor-badge{font-weight:600}
.gnb{display:block;border-top:0}
.gnb-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.gnb-in::-webkit-scrollbar{display:none}
.gnb a,.gnb a:hover,.gnb a.on,:root[data-theme="dark"] .gnb a:hover,:root[data-theme="dark"] .gnb a.on{display:block;flex:none;background:none;border-radius:0;opacity:1;
  padding:10px 12px 12px;font-size:14px;font-weight:700;color:var(--ink);border-bottom:3px solid transparent;line-height:1.2}
.gnb a:hover{color:var(--sky-dark)}
.gnb a.on{color:var(--sky-dark);border-bottom-color:var(--sky-dark)}
.gnb-more{flex:none;margin-left:auto;background:none;border:0;border-bottom:3px solid transparent;padding:10px 12px 12px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.2}
.gnb-more:hover,.gnb-more[aria-expanded="true"]{color:var(--sky-dark)}
.gnb-more.on{color:var(--sky-dark);border-bottom-color:var(--sky-dark)}
.pc-tabbar{display:none!important}
@media (min-width:641px){body{padding-bottom:0}.to-top{bottom:24px}.capture-toast{bottom:28px}}
@media (max-width:1100px){.hd-date,.visitor-badge{display:none}}
@media (max-width:860px){.hd-loc{display:none}}
@media (max-width:640px){
  .topbar-in{height:56px;gap:8px}
  .brand-t{font-size:23px}
  .brand-logo{width:30px;height:30px}
  .gnb{display:none}
  .hd-search{display:none;position:absolute;left:12px;right:12px;top:60px;max-width:none;background:var(--card);box-shadow:0 8px 24px rgba(20,30,60,.15)}
  .hd-search.open{display:flex}
  .hd-sbtn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;background:var(--soft);cursor:pointer;font-size:16px}
  .topbar{position:sticky}
}
/* 휴대폰 아래 탭: 흰 바탕, 고른 칸은 주색 */
.bottom-tabbar{background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(20,30,60,.06)}
.bottom-tabbar a,.bottom-tabbar button{color:var(--sub);font-weight:500}
.bottom-tabbar a.on,.bottom-tabbar button.on,.bottom-tabbar button.open{color:var(--sky-dark);font-weight:800}
/* 바닥: 진한 남색 */
.foot{background:#1F2A44;color:#C9D2E8;border-top:0;margin-top:40px;padding:26px 0 30px}
:root[data-theme="dark"] .foot{background:#0A0F1D}
.foot .wrap{max-width:1232px}
.foot a{color:#E3E8F6}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-brand{font-family:"Jua","Noto Sans KR",sans-serif;font-weight:400;font-size:22px;color:#fff}
.foot .src{color:#A0A8BC}
@media (max-width:640px){.foot{padding-bottom:calc(90px + env(safe-area-inset-bottom))}}
/* 공통 부품 */
.section-title{font-size:18px;font-weight:800;letter-spacing:-.3px}
.tabs a{background:var(--soft);color:var(--sub)}
.tabs a.on{background:var(--sky-dark);color:#fff}
.hstat{border-radius:12px;background:var(--soft2)}
.hstat .hv{color:var(--sky-dark)}
.td-pick{border-radius:14px;border-color:var(--line)}
.td-pick img{border-radius:10px}
.td-ad-k{color:var(--pink-d)}
.searchbox input{border-radius:999px}
.tr-chip{background:var(--card);border-color:var(--line)}
.tr-chip.on{background:var(--sky-dark);border-color:var(--sky-dark);color:#fff}

/* ── 홈 ── */
.hm{padding-top:20px}
.hm-top{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px}
/* 큰 배너 3장 (2026-10-26 사용자 요청 "1·2·3 크기 동일하게"): 세 장을 한 칸(grid 1/1)에 겹쳐 두고 .on 만 보이게 → 높이가 늘 같음.
   PC 340px 고정, 휴대폰은 가장 긴 장(날씨) 높이에 맞춰짐. 넘길 때 0.3초 페이드 */
.hm-slider{position:relative;display:grid;height:340px;border-radius:16px;overflow:hidden}
.hm-slider>.hm-slide{grid-area:1/1;min-width:0;opacity:1;transition:opacity .3s ease,visibility 0s}
.hm-slider>.hm-slide:not(.on){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
/* 날씨 장: 왼쪽 기온 덩어리 · 오른쪽 '오늘 한 줄' 카드 */
.hm-slider .td-hero{margin:0;height:auto;min-height:0;border-radius:16px;padding:22px 28px 22px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,330px);grid-template-rows:auto auto 1fr;column-gap:24px;align-content:start}
.hm-slider .td-hero>.td-fx{grid-area:1/1/-1/-1}
.hm-slider .td-hero>.td-top,.hm-slider .td-hero>.td-status{grid-column:1/-1}
.hm-slider .td-hero>.td-main{grid-column:1;grid-row:3;align-self:center;margin:0 0 30px}
.hm-slider .td-hero .td-icon{font-size:96px}
.hm-slider .td-hero .td-temp{font-size:84px}
.hm-side{grid-column:2;grid-row:3;align-self:center;position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  margin-bottom:30px;padding:16px;border-radius:14px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(4px)}
.hm-side .hm-say{margin:0;font-size:19px;line-height:1.3}
.hm-side .td-diff{width:100%;box-sizing:border-box;margin:0;padding:10px 12px}
.hm-side .td-diff b{font-size:17px}
.hm-side .td-wind{margin:0}
.td-hero.fx-night .hm-side,:root[data-theme="dark"] .hm-side{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
.hm-slider .td-fx .moon{right:auto;left:min(46%,440px);top:34px}
/* 사진 장(축제·칼럼): 썸네일엔 글자가 박혀 있어 그 위에 글을 얹지 않고 왼쪽 글 칸 · 오른쪽 사진으로 나눔 */
.hm-pic{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;border-radius:16px;overflow:hidden;color:#fff;background:#2F4AB8}
:root[data-theme="dark"] .hm-pic{background:#1E2A5A}
.hm-pic img{grid-column:2;grid-row:1;width:340px;height:340px;object-fit:cover;display:block}   /* 썸네일은 800×800 정사각형 → 통째로 */
.hm-cap{grid-column:1;grid-row:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:28px 30px 56px 34px;min-width:0}
.hm-tag{background:rgba(255,255,255,.18);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
.hm-big{font-size:26px;line-height:1.3;font-weight:900;letter-spacing:-.6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hm-sub{font-size:14px;opacity:.92;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-cta{margin-top:10px;background:#fff;color:#1F2A44;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700}
.hm-ctrl{position:absolute;right:16px;bottom:14px;z-index:3;display:flex;align-items:center;gap:6px}
.hm-ctrl button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(20,30,60,.45);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.hm-ctrl span{background:rgba(20,30,60,.45);color:#fff;border-radius:999px;padding:4px 14px;font-size:12px;font-weight:700}
.hm-say{margin:0 0 10px;font-size:22px;font-weight:900;letter-spacing:-.4px;color:var(--ink)}
.hm-say span{color:var(--sky-dark)}
.td-hero.fx-night .hm-say span{color:#C5D0FF}
.hm-ad{position:relative;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.hm-adb{position:absolute;top:12px;right:12px;background:var(--sky-dark);color:#fff;border-radius:6px;padding:1px 6px;font-size:10px;font-weight:800;z-index:2}
.hm-ad-h{margin:0;font-size:13px;font-weight:800;color:var(--sky-dark)}
.hm-ad .td-ads{grid-template-columns:1fr;margin:0}
.hm-ad .td-pick img{aspect-ratio:4/3}
.hm-ad-note{margin:auto 0 0;font-size:11px;color:var(--faint)}
.hm-trip{display:flex;align-items:center;gap:12px;margin:12px 0 14px;padding:12px 16px;border-radius:16px;background:linear-gradient(100deg,#3B5BDB,#7048E8);color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(59,91,219,.25)}
.hm-trip-i{font-size:28px;line-height:1}.hm-trip-t{flex:1;min-width:0;display:flex;flex-direction:column}.hm-trip-t b{font-size:17px}.hm-trip-t small{font-size:13px;opacity:.92}
.hm-trip-go{font-size:28px;font-weight:300}.hm-trip:hover{filter:brightness(1.06)}
.pl-from{margin-left:auto;max-width:170px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:13px}
.trip-with{background:#EEF2FF;border-color:#C5D0FA}:root[data-theme="dark"] .trip-with{background:#232a4a;border-color:#3b4a8a}
.hm-icons{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 12px;margin:16px 0}
.hm-ic{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);text-align:center}
.hm-ic-c{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;transition:transform .18s,box-shadow .18s}
.hm-ic-c .e3d{width:32px;height:32px}
.hm-ic:hover .hm-ic-c{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 22px rgba(59,91,219,.14)}
.hm-ic-c.c1{background:#E4EEFF}.hm-ic-c.c2{background:#FDE6F0}.hm-ic-c.c3{background:#E3F4E8}.hm-ic-c.c4{background:#ECE6FD}.hm-ic-c.c5{background:#FFF0DC}
.hm-ic-c.c6{background:#DFF4F7}.hm-ic-c.c7{background:#FFE6DA}.hm-ic-c.c8{background:#E4E9FF}.hm-ic-c.c9{background:#FDE4EC}
:root[data-theme="dark"] .hm-ic-c{background:var(--soft)!important}
.hm-row{display:grid;gap:16px;margin:0 0 16px}
.hm-r-fest{grid-template-columns:360px minmax(0,1fr)}
.hm-r-promo,.hm-r-half{grid-template-columns:repeat(2,minmax(0,1fr))}
.hm-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;min-width:0}
.td-card.hm-card{margin:0 0 16px;padding:18px}
.hm-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.hm-h h2,.hm-h .td-h{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.hm-h a{font-size:12px;color:var(--sub);white-space:nowrap}
.hm-cp{font-size:12px;color:var(--pink-d);font-weight:700}
.hm-cal-m{text-align:center;font-weight:800;font-size:15px;margin:0 0 6px}
.hm-cal{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;text-align:center}
.hm-wd{font-size:12px;color:var(--sub);padding:4px 0}
.hm-wd.sun,.hm-d.sun{color:var(--pink-d)}
.hm-wd.sat,.hm-d.sat{color:var(--sky-dark)}
.hm-d{position:relative;font-size:13px;color:var(--ink);height:34px;line-height:34px;border-radius:999px;margin:0 auto;width:34px;font-variant-numeric:tabular-nums}
.hm-d:hover{background:var(--soft)}
.hm-d.past{opacity:.55}
.hm-d i{position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--pink)}
.hm-d.today{background:var(--sky-dark);color:#fff;font-weight:800;width:44px}
.hm-d.today i{background:#fff}
.hm-legend{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:11px;color:var(--sub)}
.hm-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.hm-legend .dot-f{background:var(--pink)}.hm-legend .dot-t{background:var(--sky-dark);margin-left:8px}
.hm-fests{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hm-fest{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);background:var(--card);transition:transform .18s,box-shadow .18s}
.hm-fest:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(59,91,219,.12)}
.hm-fest-img{position:relative;aspect-ratio:16/10;background:#FDE6F0;display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden}
.hm-fest-img img{width:100%;height:100%;object-fit:cover}
.hm-badge,.tr-badge{position:absolute;top:8px;left:8px;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800;line-height:1.6}
.hm-badge.hot,.tr-badge.hot{background:var(--pink-d);color:#fff}
.hm-badge.on,.tr-badge.on{background:#fff;color:#1F2A44}
:root[data-theme="dark"] .hm-d.today{background:#4C6EF5}
:root[data-theme="dark"] .hd-search button,:root[data-theme="dark"] .hm-btn{background:#4C6EF5}
@media (max-width:960px){.hm-ad .td-ads.sec-ads{grid-template-columns:1fr}.hm-ad .td-pick{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;align-items:start}.hm-ad .td-pick img{grid-row:1/3;width:96px;aspect-ratio:1}.hm-ad .td-ad-k{justify-self:start}.hm-ad-note{margin-top:0}}
.tr-badge.done{background:rgba(31,42,68,.7);color:#fff}
.tr-done .tr-thumb-img img{filter:grayscale(.6)}
.tr-done .tr-bar i{background:var(--faint)}
.hm-ad .td-pick{flex:1}
.hm-more .cat-feed .col-card > img{max-height:340px;width:100%;object-fit:cover}  /* 큰 대표 사진만 — 작은 목록(.cat-mini-item) 썸네일은 104px 그대로 (2026-10-26 깨짐 수정) */
.hm-more .colpreview img{max-height:220px;object-fit:cover}
.hm-fest-n{padding:10px 12px 2px;font-size:14px;font-weight:800;line-height:1.35}
.hm-fest-d{padding:0 12px;font-size:12px;font-weight:700;color:var(--pink-d)}
.hm-fest-r{padding:0 12px 12px;font-size:12px;color:var(--sub)}
.hm-wear2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hm-card .td-stats{margin:14px 0 12px}
.hm-card .td-search{margin:0}
.td-chips span{background:var(--soft);color:var(--ink);border:0}
.hm-adbox{position:relative;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px}
.hm-adbox .td-ads{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.hm-adbox .td-pick{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:10px;align-items:start}
.hm-adbox .td-pick img{grid-row:1/3;width:72px}
.hm-adbox .td-ad-k{justify-self:start}
.hm-promo{position:relative;display:flex;align-items:center;gap:16px;background:#FFF4E8;border:1px solid #F6E3D2;border-radius:16px;padding:20px 22px;color:#1F2A44;overflow:hidden}
:root[data-theme="dark"] .hm-promo{background:#2A2218;border-color:#4A3A28;color:var(--ink)}
.hm-promo-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.hm-promo-t small{font-size:12px;font-weight:700;color:#C2410C}
.hm-promo-t b{font-size:18px;font-weight:900;letter-spacing:-.3px}
.hm-promo-t span{font-size:13px;color:var(--sub)}
.hm-promo-art{font-size:54px;line-height:1}
.hm-promo-art .e3d{width:64px;height:64px}
.hm-btn{background:var(--sky-dark);color:#fff;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;white-space:nowrap}
.hm-pop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
/* 지역별 여행 날씨 카드 (2026-10-26 사용자 요청 "디자인 변경"): 낮 하늘+잔디 그림 띠 → 날씨·밤낮에 따라 카드 전체 색이 바뀌는 위젯형 */
.hm-pop a{display:grid;grid-template-columns:1fr;grid-template-areas:"name" "top" "now" "hl";align-items:center;gap:2px 8px;
  padding:14px 14px 12px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(155deg,#EEF2FF,var(--card) 75%)}
.hm-pop a.pk-sun{background:linear-gradient(155deg,#FFF1D2,var(--card) 75%)}
.hm-pop a.pk-cloud{background:linear-gradient(155deg,#E9EEF6,var(--card) 75%)}
.hm-pop a.pk-rain,.hm-pop a.pk-storm{background:linear-gradient(155deg,#DCE7FA,var(--card) 75%)}
.hm-pop a.pk-snow{background:linear-gradient(155deg,#EEF5FF,var(--card) 75%)}
.hm-pop a.pk-night{background:linear-gradient(155deg,#1E2756,#2F3B7A);border-color:#2F3B7A;color:#EEF1FF}
.hm-pop .pc-name{grid-area:name;padding:0;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-pop .pc-top{grid-area:top;margin:4px 0 6px;padding:0;height:auto;background:none;display:flex;align-items:center;justify-content:space-between}
.hm-pop .pc-icon{font-size:40px}
.hm-pop .pc-temp{color:var(--ink);font-size:32px;font-weight:800;letter-spacing:-1.5px;text-shadow:none}
.hm-pop .pc-now{grid-area:now;padding:0;font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-pop .pc-hl{grid-area:hl;font-size:13px;font-weight:700;white-space:nowrap}
.pc-hl .hi{color:var(--pink-d)}.pc-hl .lo{color:var(--sky-dark)}.pc-hl i{font-style:normal;color:var(--faint);margin:0 2px}
.hm-pop a.pk-night .pc-temp{color:#fff}
.hm-pop a.pk-night .pc-now{color:#C3CAEB}
.hm-pop a.pk-night .pc-hl .hi{color:#FF9DBA}.hm-pop a.pk-night .pc-hl .lo{color:#AFC0FF}.hm-pop a.pk-night .pc-hl i{color:#7F8AC0}
:root[data-theme="dark"] .hm-pop a{background:linear-gradient(155deg,#1E2944,var(--card) 75%)}
:root[data-theme="dark"] .hm-pop a.pk-sun{background:linear-gradient(155deg,#3A3018,var(--card) 75%)}
:root[data-theme="dark"] .hm-pop a.pk-cloud{background:linear-gradient(155deg,#242C40,var(--card) 75%)}
:root[data-theme="dark"] .hm-pop a.pk-rain,:root[data-theme="dark"] .hm-pop a.pk-storm{background:linear-gradient(155deg,#16284A,var(--card) 75%)}
:root[data-theme="dark"] .hm-pop a.pk-snow{background:linear-gradient(155deg,#22304D,var(--card) 75%)}
:root[data-theme="dark"] .hm-pop a.pk-night{background:linear-gradient(155deg,#141B3E,#232C5C);border-color:#2F3B7A}
.hm-pop .pc-tip{display:none}
.hm-dex{display:flex;align-items:center;gap:16px;background:#F1ECFF;border-color:#D9CCFA;color:#1F2A44}
:root[data-theme="dark"] .hm-dex{background:#221C3D;border-color:#3A2F66;color:var(--ink)}
.hm-dex-t{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.hm-dex-t b{font-size:18px;color:#5B3FC4;font-weight:900}
:root[data-theme="dark"] .hm-dex-t b{color:#B9A6FF}
.hm-dex-t>span:not(.hm-pill){font-size:13px;color:var(--sub)}
.hm-dex-t>span.hm-dex-n{font-size:15px;font-weight:800;color:#1F2A44}
.hm-dex-n em{font-style:normal;color:#E8517A;font-size:18px}
:root[data-theme="dark"] .hm-dex-t>span.hm-dex-n{color:var(--ink)}
:root[data-theme="dark"] .hm-dex-n em{color:#FF8AAE}
.hm-pill{align-self:flex-start;margin-top:4px;background:var(--card);border:1px solid #D9CCFA;color:#5B3FC4;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700}
.hm-dex-imgs{display:flex;gap:4px;flex:none}
.hm-dex-imgs img{width:58px;height:58px;object-fit:contain;animation:hmBob 2.6s ease-in-out infinite}
.hm-dex-imgs img:nth-child(2n){animation-delay:-1.3s}
@keyframes hmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hm-spot{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:12px;padding-bottom:0}
.hm-spot-t h2{margin:0 0 6px;font-size:17px;font-weight:800}
.hm-spot-t p{margin:0 0 10px;font-size:13px;color:var(--sub)}
.hm-chips{display:flex;flex-wrap:wrap;gap:6px}
.hm-chips a{background:var(--soft);color:var(--sky-dark);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700}
.hm-spot-map{border-radius:12px;background:linear-gradient(135deg,#EAF3EC,#DCEBFA);display:flex;align-items:center;justify-content:center;font-size:40px;min-height:110px}
.hm-spot-go{grid-column:1/-1;text-align:center;border-top:1px solid var(--line);margin:0 -18px;padding:12px;font-size:14px;font-weight:700;color:var(--sky-dark)}
@media (prefers-reduced-motion:reduce){.hm-dex-imgs img{animation:none}.hm-fest,.hm-ic-c{transition:none}}
@media (max-width:1100px){.hm-fests{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-pop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .hm-top{grid-template-columns:1fr}
  .hm-r-fest,.hm-r-promo,.hm-r-half{grid-template-columns:1fr}
  .hm-icons{grid-template-columns:repeat(5,1fr);row-gap:16px}
}
@media (max-width:640px){
  .hm{padding-top:12px}
  .hm-slider{height:auto}
  .hm-slider .td-hero{padding:18px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto}
  .hm-slider .td-hero>.td-main{grid-row:3;margin:6px 0 12px}
  .hm-slider .td-hero .td-icon{font-size:64px}
  .hm-slider .td-hero .td-temp{font-size:58px}
  .hm-slider .td-hero>.td-main{margin:2px 0 10px}
  .hm-side{grid-column:1;grid-row:4;margin:0 0 36px;padding:10px 12px;gap:8px;align-self:start}
  .hm-side .hm-say{font-size:17px}
  .hm-side .td-diff{padding:8px 10px}
  .hm-side .td-diff b{font-size:15px}
  .hm-slider .td-fx .moon{left:auto;right:18px;top:84px;width:36px;height:36px}
  .hm-pic{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .hm-pic img{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:16/9;object-position:center top}   /* 썸네일 글자는 위쪽에 있음, 16:9 로 납작하게 (빈 공간 줄이기) */
  .hm-cap{grid-column:1;grid-row:2;justify-content:center;gap:6px;padding:12px 18px 14px}   /* 단추 줄이 넘기기 단추(오른쪽 아래)와 같은 줄 */
  .hm-pic .hm-sub{-webkit-line-clamp:1}
  .hm-pic .hm-big{-webkit-line-clamp:2}
  .hm-cta{margin-top:4px}
  .hm-big{font-size:22px}
  .hm-say{font-size:18px}
  .hm-icons{grid-template-columns:repeat(3,1fr);padding:16px 8px}
  .hm-ic-c{width:50px;height:50px}
  .hm-wear2{grid-template-columns:1fr}
  .hm-promo-art{display:none}
  .hm-dex{flex-direction:column;align-items:flex-start}
  .hm-dex-imgs img{width:48px;height:48px}
  .hm-spot{grid-template-columns:1fr}
  .hm-spot-map{display:none}
  .hm-adbox .td-ads{grid-template-columns:1fr}
}
/* 작은 휴대폰(≤400px, 2026-10-27): 날씨 장의 날짜·'최고/최저' 줄이 두 줄로 넘어가 세 장이 같이 길어지던 것 → 글자를 조금 줄여 한 줄로 */
@media (max-width:400px){
  .hm-slider .td-hero{padding:16px 14px}
  .hm-slider .td-loc{font-size:13px}
  .hm-slider .td-loc b{font-size:15px}
  .hm-slider .td-desc{font-size:13px;letter-spacing:-.3px}
  .hm-slider .td-hero .td-icon{font-size:56px}
  .hm-slider .td-hero .td-temp{font-size:52px}
  .hm-side .hm-say{font-size:16px}
}

/* ── 여행·축제 달력 ── */
.trh{margin:0 -16px;padding:24px 20px 20px;background:#FFF4E8}
:root[data-theme="dark"] .trh{background:#241C14}
.trh-title{margin:0;font-size:32px;line-height:1.25;font-weight:900;letter-spacing:-.8px;color:var(--ink)}
.trh-kick{display:block;font-size:12px;font-weight:700;color:var(--pink-d);letter-spacing:0;margin-bottom:10px}
.trh-path{display:block;width:100%;max-width:360px;height:44px;margin:6px 0 4px}
.trh-path circle{fill:var(--amber)}
.trh-path path{fill:none;stroke:var(--pink);stroke-width:2;stroke-dasharray:5 6}
.trh-path path.pl{fill:var(--ink);stroke:none}
.trh-lbl{margin:6px 0 8px;font-size:12px;color:var(--sub);font-weight:700}
.trh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.trh-list a{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid #F6E3D2;border-radius:12px;padding:10px 12px;color:var(--ink)}
:root[data-theme="dark"] .trh-list a{border-color:var(--line)}
.trh-end{font-size:14px;font-weight:700;color:var(--pink-d);font-variant-numeric:tabular-nums;flex:none;width:44px}
.trh-n{flex:1;min-width:0;display:flex;flex-direction:column}
.trh-n b{font-size:15px;font-weight:800;line-height:1.3}
.trh-n small{font-size:11px;color:var(--sub)}
.trh-dl{flex:none;font-size:12px;font-weight:800;color:var(--pink-d);background:#FDE6F0;border-radius:6px;padding:3px 8px}
.trh-dl.urgent{background:var(--pink-d);color:#fff}
.trw-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 6px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.trw{display:flex;align-items:center;gap:10px;padding:14px}
.trw+.trw{border-left:1px solid var(--line)}
.trw-d{font-size:30px;font-weight:300;color:var(--ink);line-height:1}
.trw-i{font-size:26px;line-height:1}
.trw-i .e3d{width:28px;height:28px}
.trw-t{display:flex;flex-direction:column;min-width:0}
.trw-t b{font-size:14px;font-weight:800}
.trw-t small{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.trw-note{margin:0 0 6px;font-size:12px;color:var(--sub)}
.tr-tab{border-radius:999px;font-size:14px}
.tr-tab.on{background:var(--sky-dark)}
.tr-monthbar strong{font-size:18px}
.tr-cal{gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px}
.tr-wd{font-size:12px;color:var(--sub)}
/* 달력 칸 (2026-10-26 사용자 요청 "디자인 변경"): 칸 전체를 진한 색으로 칠하던 것 → 흰 칸 + 축제 수 알약 칩만 4단계 진하기,
   지난 날은 회색 칸(반투명 X), 일·토 날짜 색, 오늘은 노란 테두리, 고른 날은 주색으로 채움 */
.tr-day{align-items:flex-start;justify-content:space-between;padding:7px 7px 6px;min-height:58px;border:1px solid var(--line);background:var(--card);border-radius:10px;color:var(--ink);font-weight:700;transition:border-color .12s,transform .12s}
.tr-day:hover{border-color:var(--sky-dark);transform:translateY(-1px)}
.tr-dnum{font-size:15px;line-height:1.1}
.tr-sun .tr-dnum{color:var(--pink-d)}.tr-sat .tr-dnum{color:var(--sky-dark)}
.tr-dcount{font-size:11px;font-weight:800;line-height:1.5;border-radius:999px;padding:0 7px;background:var(--soft);color:var(--sky-dark);opacity:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-dcount small{font-size:9px;font-weight:700;margin-left:1px}
.tr-dcount.tr-open{color:var(--sky-dark)}
.tr-dcount.tr-open::after{content:"";position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--pink)}
.tr-day.tr-h1 .tr-dcount{background:#EEF2FF;color:#3B5BDB}
.tr-day.tr-h2 .tr-dcount{background:#DCE4FF;color:#2F4AB8}
.tr-day.tr-h3 .tr-dcount{background:#8FA5FF;color:#fff}
.tr-day.tr-h4 .tr-dcount{background:#3B5BDB;color:#fff}
.tr-day.tr-past{opacity:1;background:var(--soft2);border-color:transparent}
.tr-day.tr-past .tr-dnum{color:var(--faint)}
.tr-day.tr-past .tr-dcount{background:none;color:var(--faint);padding:0}
.tr-today,.tr-day.tr-today{border:2px solid var(--amber);background:#FFF8E6}
.tr-sel,.tr-day.tr-sel{background:var(--sky-dark);color:#fff;border-color:var(--sky-dark)}
.tr-day.tr-sel .tr-dnum{color:#fff}
.tr-day.tr-sel .tr-dcount{background:rgba(255,255,255,.22);color:#fff}
:root[data-theme="dark"] .tr-day.tr-h1 .tr-dcount{background:#1E2944;color:#AFC0FF}
:root[data-theme="dark"] .tr-day.tr-h2 .tr-dcount{background:#2A3A6B;color:#D3DCFF}
:root[data-theme="dark"] .tr-day.tr-h3 .tr-dcount{background:#4C6EF5;color:#fff}
:root[data-theme="dark"] .tr-day.tr-h4 .tr-dcount{background:#8FA5FF;color:#0F1526}
:root[data-theme="dark"] .tr-day.tr-today{background:#2E2814}
:root[data-theme="dark"] .tr-day.tr-sel{background:#8FA5FF;border-color:#8FA5FF;color:#0F1526}
:root[data-theme="dark"] .tr-day.tr-sel .tr-dnum,:root[data-theme="dark"] .tr-day.tr-sel .tr-dcount{color:#0F1526}
:root[data-theme="dark"] .tr-day.tr-sel .tr-dcount{background:rgba(15,21,38,.14)}
.tr-cal{grid-template-columns:repeat(7,minmax(0,1fr))}
.tr-day.tr-empty{border:0;background:none;cursor:default;transform:none}
:root[data-theme="dark"] .tr-day.tr-past .tr-dcount{background:none;color:var(--faint)}
.tr-day{min-width:0;overflow:hidden}
@media (max-width:480px){.tr-day{padding:6px 4px 5px;min-height:52px}.tr-dcount{padding:0 5px;font-size:10px}.tr-dcount small{display:none}.tr-dcount.tr-open::after{top:5px;right:4px}}
.tr-nowbox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--soft);border-radius:14px;padding:16px 18px;margin:14px 0 6px}
.tr-nowbox span{display:flex;flex-direction:column;font-size:14px;color:var(--ink)}
.tr-nowbox small{font-size:12px;color:var(--pink-d);font-weight:700}
.tr-nowbox b{font-size:34px;font-weight:300;color:var(--ink);font-variant-numeric:tabular-nums}
.tr-nowbox b small{font-size:13px;color:var(--ink);font-weight:500;margin-left:2px}
.tr-fsido{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:6px 0 12px}
.tr-fsido::-webkit-scrollbar{display:none}
.tr-fsido .tr-chip{flex:none}
.tr-fkids{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:6px 0 0}
.tr-fkids::-webkit-scrollbar{display:none}
.tr-fkids .tr-chip{flex:none}
.tr-fkids .tr-chip.on[data-fk="k"]{background:#FFB703;border-color:#FFB703;color:#3a2a00}
.tr-kid{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:1px 7px;background:#FFF1C2;color:#7a5200;margin-left:4px;vertical-align:1px}
.tr-thumbs{gap:12px}
.tr-thumb{border-radius:14px}
.tr-thumb-img{position:relative;background:#F6E3D2}
.tr-noimg{font-size:38px}
.tr-fcard .tr-fc-r{padding:8px 10px 0;font-size:11px;color:var(--sub)}
.tr-fcard .tr-thumb-name{padding:2px 10px 6px;font-size:14px}
.tr-bar{display:block;height:4px;margin:auto 10px 0;border-radius:2px;background:var(--line);overflow:hidden}
.tr-bar i{display:block;height:100%;background:var(--sky-dark);border-radius:2px}
.tr-bar.hot i{background:var(--pink-d)}
.tr-fc-d{display:flex;justify-content:space-between;padding:4px 10px 10px;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.tr-more{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:12px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
@media (max-width:640px){.trh-title{font-size:28px}}
/* 다크 모드 초록·분홍 글자 진하게 (2026-10-26 사용자 요청) — 밝은 바탕용 연한 배지가 다크에서도 그대로 남아 눈부시고 글자가 흐렸음 */
:root[data-theme="dark"]{--pink:#FF8AAE;--pink-d:#FF8AAE}
:root[data-theme="dark"] .trh-dl{background:rgba(255,138,174,.16);color:#FF9DBA}
:root[data-theme="dark"] .trh-dl.urgent{background:#FF8AAE;color:#2A0A16}
:root[data-theme="dark"] .hm-badge.hot,:root[data-theme="dark"] .tr-badge.hot{background:#FF8AAE;color:#2A0A16}
:root[data-theme="dark"] .hm-fest-img{background:#2A1C2A}
:root[data-theme="dark"] .aq-badge-ok,:root[data-theme="dark"] .wave-badge-ok{background:#14361f;color:#86efac}
:root[data-theme="dark"] .aq-badge-warn,:root[data-theme="dark"] .wave-badge-warn{background:#3a2a0a;color:#fde68a}
:root[data-theme="dark"] .aq-badge-danger,:root[data-theme="dark"] .wave-badge-danger{background:#3b1414;color:#fca5a5}
:root[data-theme="dark"] .hm-promo-t small,:root[data-theme="dark"] .stale-warn{color:#FDBA74}
:root[data-theme="dark"] .tr-tab.on,:root[data-theme="dark"] .tr-chip.on,:root[data-theme="dark"] .hm-adb{color:#0F1526}

.wkd-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 10px}
.wkd-tab{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:14px;padding:12px 6px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.wkd-tab small{font-size:12px;font-weight:600;color:var(--sub)}
.wkd-tab.on{background:var(--sky-dark);border-color:var(--sky-dark);color:#fff}
.wkd-tab.on small{color:#fff;opacity:.85}
.wkd-sort{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.wkd-sort button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.wkd-sort button.on{border-color:var(--sky-dark);color:var(--sky-dark);background:#EEF2FF}
:root[data-theme="dark"] .wkd-sort button.on{background:#1F2A55;color:#C7D2FE}
.wkd-h{font-size:19px;margin:16px 0 10px}
.wkd-h small{font-size:13px;color:var(--sub);font-weight:600;margin-left:6px}
.wkd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.wkd-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.wkd-th{position:relative;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#E7EDFF,#F3EEFF);display:flex;align-items:center;justify-content:center}
:root[data-theme="dark"] .wkd-th{background:linear-gradient(135deg,#1C2446,#251E40)}
.wkd-th>img,.wkd-th-a>img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
.wkd-th-a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:filter .15s}
.wkd-th-a:hover{filter:brightness(1.06)}
.wkd-body h3 a{color:inherit;text-decoration:none}
.wkd-body h3 a:hover{color:var(--sky-dark);text-decoration:underline}
.wkd-th.no-ph{aspect-ratio:auto;height:92px}
/* 썸네일 전체 보이기 (2026-11-07 사용자 "썸네일이 화면에 보이게"): 1:1 글자 썸네일이 16:9 로 잘리던 것 → 4:3 틀에 통째로, 양옆은 같은 사진 흐리게 */
.wkd-th[data-bg]{aspect-ratio:4/3}
.wkd-th[data-bg]:before{content:"";position:absolute;inset:-16px;background:var(--bg) center/cover no-repeat;filter:blur(16px) brightness(.82) saturate(1.1)}
.wkd-th[data-bg]>img,.wkd-th[data-bg] .wkd-th-a>img{object-fit:contain}
.wkd-th[data-bg] .wkd-th-a{z-index:1}
.wkd-th[data-bg] .wkd-no,.wkd-th[data-bg] .wkd-badge,.wkd-th[data-bg] .rk-no{z-index:2}
.wkd-ti{font-size:22px;line-height:1}
.wkd-ti img{width:28px;height:28px}
.wkd-emo{font-size:44px}
.wkd-emo img{width:52px;height:52px}
.wkd-badge{position:absolute;top:10px;right:10px;border-radius:999px;padding:5px 11px;font-size:13px;font-weight:800;background:#fff;box-shadow:0 2px 8px rgba(31,42,68,.15)}
.wkd-badge.b-best{background:#3B5BDB;color:#fff}
.wkd-badge.b-ok{background:#fff;color:#2B8A3E}
.wkd-badge.b-bad{background:#fff;color:#D6336C}
:root[data-theme="dark"] .wkd-badge.b-ok,:root[data-theme="dark"] .wkd-badge.b-bad{background:#141B33}
:root[data-theme="dark"] .wkd-badge.b-ok{color:#8CE99A}
:root[data-theme="dark"] .wkd-badge.b-bad{color:#FF8AAE}
.wkd-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.wkd-body h3{margin:0;font-size:17px}
.wkd-where{margin:0;font-size:13px;color:var(--sub)}
.wkd-days{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wkd-day{display:flex;align-items:center;gap:5px;background:var(--bg);border-radius:10px;padding:6px 8px;font-size:13px;flex-wrap:wrap}
.wkd-day b{font-size:12px;color:var(--sub);width:100%}
.wkd-day img,.wkd-day svg{width:24px;height:24px}
.wkd-hl{font-weight:800}
.wkd-pop{color:var(--sub);font-size:12px;margin-left:auto}
.wkd-extra{margin:0;font-size:13px;font-weight:600}
.wkd-why{margin:0;font-size:13px;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wkd-links{margin:auto 0 0;display:flex;gap:6px;flex-wrap:wrap;padding-top:4px}
.wkd-links a{font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:5px 11px;text-decoration:none;color:var(--sky-dark)}
.wkd-more{display:block;margin:14px auto 0;border:1.5px solid var(--sky-dark);background:var(--card);color:var(--sky-dark);border-radius:999px;padding:10px 22px;font:inherit;font-weight:800;cursor:pointer}
.wkd-more[hidden],.wkd-card[hidden],.wkd-pane[hidden]{display:none}
.wkd-all{text-align:center;margin:10px 0 0;font-size:14px}
.cctv-near{margin:22px 0 8px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.cctv-near .section-title{margin:0 0 6px}
.cctv-near-sub{margin:0 0 10px;font-size:14px;color:var(--sub)}
.cctv-near ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cctv-near li a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit}
.cctv-near li b{font-size:15px;overflow-wrap:anywhere}
.cctv-near li span{font-size:13px;color:var(--sub)}
.cctv-near-go{margin:10px 0 4px;text-align:center;font-weight:800}
.cctv-near-src{margin:0;font-size:12px;color:var(--sub);text-align:center}
.hrt-near li em{flex-basis:100%;font-style:normal;font-size:13px;color:var(--sub);line-height:1.5}
.photo-credit{margin:18px 0 6px;font-size:12px;line-height:1.6;color:var(--sub);overflow-wrap:anywhere}
.photo-credit a{color:inherit;text-decoration:underline}
@media (max-width:640px){.col-body p.ad-lead{text-align:center}}
.lc li{border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.lc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.lc-head b{font-size:15px;overflow-wrap:anywhere}
.lc-play{text-decoration:none;display:inline-block;border:1.5px solid var(--sky-dark);background:var(--card);color:var(--sky-dark);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.lc-box{margin-top:8px}.lc-box[hidden]{display:none}
.lc-box video{width:100%;max-height:60vh;border-radius:8px;background:#000;display:block}
.lc-err{margin:0;font-size:13px;color:var(--sub)}
.wkd-n{display:inline-flex;gap:6px;margin-left:auto}
.wkd-n button.on{background:var(--btn-b);border-color:var(--btn-b);color:#fff}
:root[data-theme="dark"] .wkd-n button.on{background:var(--btn-b);color:#fff}
.wkd-no{position:absolute;top:10px;left:10px;z-index:1;height:30px;padding:0 11px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;white-space:nowrap;background:#fff;color:#1F2A44;box-shadow:0 2px 8px rgba(31,42,68,.2)}
.wkd-no:empty{display:none}
.wkd-no.n1{background:#F2B544}.wkd-no.n2{background:#C9D1E3}.wkd-no.n3{background:#E0A57A}
.wx-pick-btn{border:1.5px solid var(--btn-b);background:var(--card);color:var(--btn-b);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.wx-pick-btn:hover{background:var(--btn-b);color:#fff}
:root[data-theme="dark"] .wx-pick-btn{color:#C7D2FE;border-color:#6F8DF5}
.wx-pick-msg{margin:8px 0;padding:10px 12px;border-radius:12px;background:#FFF7E0;color:#1F2A44;font-size:14px;line-height:1.5}
:root[data-theme="dark"] .wx-pick-msg{background:#2A2410;color:#FDE68A}
.wx-pick-msg small{color:inherit;opacity:.7}
.wx-pick-msg[hidden]{display:none}
.wx-picked{outline:3px solid #F2B544;outline-offset:2px;animation:wxPk 1s ease 2}
@keyframes wxPk{50%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.wx-picked{animation:none}}
@media (max-width:520px){.wkd-tab{font-size:14px;padding:10px 2px}.wkd-grid{grid-template-columns:1fr}}