*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR",Arial,sans-serif;background:#f5f7fa;color:#222}
button,input{font-family:inherit}
/* 상단 */
header{background:#fff;border-bottom:1px solid #e8eaed}
.header-inner{max-width:1500px;margin:auto;padding:17px 22px 13px}
.brand-title{font-size:26px;font-weight:900;letter-spacing:-.7px}
.brand-sub{margin-top:7px;color:#4b5563;font-size:16px;font-weight:650;letter-spacing:-.15px}
.search-wrap{max-width:1500px;margin:auto;padding:0 22px 14px}
.search-box{display:flex;align-items:center;height:50px;background:#fff;border:1px solid #d9dde3;border-radius:12px;overflow:hidden}
.search-box:focus-within{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.10)}
.search-icon{padding-left:16px;font-size:18px}
#citySearch{flex:1;height:100%;border:0;outline:0;padding:0 13px;font-size:17px}
.search-button{height:100%;padding:0 23px;border:0;background:#4285f4;color:#fff;font-size:16px;font-weight:800;cursor:pointer}
.search-button:hover{background:#3377df}
/* 메인 프리뷰 */
#previewView{display:block}
.main{max-width:1500px;margin:auto;padding:14px 22px 22px}
.content{display:grid;grid-template-columns:350px minmax(0,1fr);gap:14px;height:calc(100vh - 175px);min-height:610px}
.sidebar{background:#fff;border:1px solid #e5e7eb;border-radius:13px;overflow:auto}
.sidebar-head{position:sticky;top:0;z-index:2;padding:16px;background:#fff;border-bottom:1px solid #eee}
.sidebar-title{font-size:18px;font-weight:900}
.sidebar-description{margin-top:5px;color:#888;font-size:13px}
#cityCount{color:#4285f4}
/* 도시 카드 */
.city-card{padding:18px 16px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background .15s}
.city-card:hover{background:#f8faff}
.city-card.active{background:#f2f7ff;box-shadow:inset 3px 0 0 #4285f4}
.city-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.city-name{font-size:21px;font-weight:900}
.city-country{margin-top:5px;color:#777;font-size:13px}
.season-badge{display:inline-flex;align-items:center;padding:6px 9px;border-radius:15px;white-space:nowrap;font-size:12px;font-weight:900}
.season-dry{background:#fff5df;color:#a96800}
.season-rainy{background:#e8f3ff;color:#266da8}
.season-typhoon{background:#fff0ee;color:#c74b3d}
.season-normal{background:#eef1f5;color:#59636e}
.season-snow{background:#eefaff;color:#34708f}
.season-box{margin-top:13px;padding:11px 12px;border-radius:9px;background:#f7f8fa}
.season-date{color:#999;font-size:12px}
.season-summary{margin-top:5px;font-size:15px;font-weight:900}
.season-note{margin-top:5px;color:#777;font-size:12px;line-height:1.5}
.detail-hint{display:inline-block;margin-top:11px;padding:0;border:0;background:transparent;color:#4285f4;font-size:13px;font-weight:900;cursor:pointer;text-decoration:none}
.detail-hint:hover{text-decoration:underline}
.season-disclaimer{margin:13px;padding:10px;border-radius:8px;background:#fafafa;color:#999;font-size:11px;line-height:1.5}
/* 지도 */
.map-wrap{min-width:0;overflow:hidden;background:#ddd;border:1px solid #e5e7eb;border-radius:13px}
#map{width:100%;height:100%}
/* 지도 팝업 */
.weather-card{width:355px;max-width:82vw;padding:6px;color:#222}
.weather-country{color:#888;font-size:14px;margin-bottom:5px}
.weather-city{font-size:27px;font-weight:900}
.weather-main{display:flex;align-items:center;gap:15px;margin-top:15px}
.weather-icon{font-size:48px}
.temperature{font-size:44px;font-weight:900;line-height:1}
.condition{margin-top:6px;color:#666;font-size:16px}
.weather-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}
.weather-item{padding:11px;background:#f5f7fa;border-radius:9px;color:#777;font-size:14px}
.weather-item strong{display:block;margin-top:5px;color:#222;font-size:19px}
.forecast-title{margin-top:19px;padding-top:15px;border-top:1px solid #eee;font-size:17px;font-weight:900}
.forecast-list{margin-top:8px}
.forecast-row{display:grid;grid-template-columns:78px 35px 1fr 90px;align-items:center;min-height:41px;gap:4px;border-bottom:1px solid #f0f0f0;font-size:15px}
.forecast-row:last-child{border-bottom:0}
.forecast-day{font-weight:800}
.forecast-icon{text-align:center;font-size:21px}
.forecast-rain{color:#567a9f;font-size:14px}
.forecast-temp{text-align:right;white-space:nowrap;font-size:16px}
.max-temp{font-size:17px;font-weight:900}
.min-temp{margin-left:5px;color:#999;font-size:15px}
.today{display:inline-block;margin-left:3px;padding:2px 4px;background:#eef1f4;border-radius:4px;color:#555;font-size:11px}
.popup-detail-button{width:100%;margin-top:13px;padding:10px;border:0;border-radius:8px;background:#4285f4;color:#fff;font-size:14px;font-weight:900;cursor:pointer}
/* 상세 */
#detailView{display:none}
.detail-page{max-width:1450px;margin:auto;padding:24px}
.detail-back{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:6px 0;color:#555;font-size:16px;font-weight:800;cursor:pointer}
.detail-header-card{margin-top:8px;padding:0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.detail-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);min-height:205px}
.detail-hero-copy{padding:28px 30px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.detail-country{color:#7b828a;font-size:15px}
.detail-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:7px}
.detail-title{margin:0;font-size:36px;font-weight:900;letter-spacing:-.8px}
.detail-season-text{margin-top:14px;color:#404953;font-size:17px;line-height:1.65;max-width:760px;font-weight:700}
.detail-hero-metrics{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.detail-hero-metric{padding:7px 10px;border:1px solid #e5e9ee;border-radius:999px;background:#f8fafc;color:#4d5661;font-size:13px;font-weight:800}
.detail-hero-metric strong{color:#1f2937}
.detail-hero-visual{position:relative;min-height:205px;overflow:hidden;background:#edf6fb;border-left:1px solid #edf0f3}
.detail-hero-visual svg{display:block;width:100%;height:100%;min-height:205px}
.detail-hero-visual .detail-hero-photo{display:block;width:100%;height:100%;min-height:205px;object-fit:cover;object-position:center}
.city-hub-representative{display:block;width:min(100%,760px);height:150px;object-fit:cover;object-position:center;border-radius:14px;margin:16px auto 4px}
.detail-hero-visual::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 18px 0 30px rgba(255,255,255,.12)}
/* 여행 시기 한눈에 */
.season-guide-section{margin-top:14px;padding:20px 22px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}
.season-guide-eyebrow{color:#4285f4;font-size:13px;font-weight:900}
.season-guide-title{margin-top:4px;font-size:22px;font-weight:900}
.season-guide-summary{margin-top:7px;color:#626b75;font-size:14px;line-height:1.6}
.season-timeline{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;margin-top:16px}
.season-month{appearance:none;border:1px solid transparent;border-radius:10px;padding:10px 4px 9px;min-width:0;cursor:pointer;text-align:center;transition:transform .12s,box-shadow .12s,border-color .12s;background:#f5f6f8;color:#535b65}
.season-month:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.season-month.selected{border-color:#4285f4;box-shadow:0 0 0 2px rgba(66,133,244,.13);transform:translateY(-2px)}
.season-month-number{display:block;font-size:14px;font-weight:900}
.season-month-label{display:block;margin-top:5px;font-size:11px;font-weight:900;white-space:nowrap}
.season-month.season-dry{background:#fff7e6;color:#9a6500}
.season-month.season-rainy{background:#eaf4ff;color:#286da7}
.season-month.season-typhoon{background:#fff0ee;color:#b94a3e}
.season-month.season-normal{background:#f1f3f6;color:#59636e}
.season-month.season-snow{background:#eefaff;color:#34708f}
.season-guide-note{margin-top:10px;color:#8a9098;font-size:12px;line-height:1.55}
/* 출발 직전 확인용 */
.forecast-section{margin-top:17px}
.secondary-section-head{padding:4px 2px 0}
.secondary-section-eyebrow{color:#607086;font-size:13px;font-weight:900}
.secondary-section-title{margin-top:4px;font-size:22px;font-weight:900}
.secondary-section-subtitle{margin-top:6px;color:#7b828a;font-size:14px;line-height:1.55}
.detail-weather-section{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;margin-top:12px}
.current-weather-panel,.week-panel{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:20px}
.week-panel{display:flex;flex-direction:column;justify-content:center}
.section-mini-title{margin-bottom:14px;font-size:17px;font-weight:900}
.detail-current-main{display:flex;align-items:center;gap:17px}
.detail-current-icon{font-size:56px}
.detail-current-temp{font-size:48px;font-weight:900}
.detail-current-condition{margin-top:5px;color:#777;font-size:16px}
.detail-current-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}
.detail-stat{padding:11px;border-radius:9px;background:#f6f7f9;color:#777;font-size:13px}
.detail-stat strong{display:block;margin-top:5px;color:#222;font-size:19px}
.detail-week-grid{display:grid;grid-template-columns:repeat(7,minmax(90px,1fr));gap:8px}
.detail-day{padding:12px 7px;border-radius:9px;background:#f7f8fa;text-align:center}
.detail-day-date{font-size:14px;font-weight:900}
.detail-day-icon{margin:7px 0;font-size:27px}
.detail-day-rain{color:#567a9f;font-size:13px}
.detail-day-temp{margin-top:6px;font-size:15px}
.detail-day-temp strong{font-size:17px}
/* 월별 여행 날씨 분석 */
.climate-section{margin-top:17px;padding:22px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}
.climate-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.climate-title{font-size:24px;font-weight:900}
.climate-subtitle{margin-top:6px;color:#777;font-size:14px}
.climate-top{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:12px;margin-top:18px}
.travel-score-card{padding:18px;border-radius:13px;border:1px solid #e7eaee;background:#fafbfc}
.travel-score-card.score-great{background:#f1f9f0;border-color:#dcefd9}
.travel-score-card.score-good{background:#f7faf1;border-color:#e6efd7}
.travel-score-card.score-watch{background:#fff8eb;border-color:#f5e4bd}
.travel-score-card.score-hard{background:#fff2f1;border-color:#f1d5d2}
.travel-score-label{font-size:13px;color:#777;font-weight:800}
.travel-score-row{display:flex;align-items:flex-end;gap:8px;margin-top:5px}
.travel-score-number{font-size:36px;line-height:1;font-weight:950;letter-spacing:-1.2px}
.travel-score-unit{padding-bottom:4px;color:#777;font-size:14px;font-weight:800}
.travel-score-title{margin-top:13px;font-size:19px;font-weight:900}
.travel-score-text{margin-top:7px;color:#646b73;font-size:14px;line-height:1.65}
.travel-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.travel-tag{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.06);font-size:12px;font-weight:800;color:#555}
.climate-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.climate-metric{padding:14px;background:#f7f8fa;border-radius:11px;min-width:0}
.climate-metric-icon{font-size:17px}
.climate-metric-label{margin-top:7px;color:#858b92;font-size:12px}
.climate-metric-value{margin-top:4px;font-size:22px;font-weight:900;white-space:nowrap}
.climate-metric-note{margin-top:5px;color:#777;font-size:12px;line-height:1.45}
.climate-chart-card{margin-top:12px;padding:16px 16px 12px;border:1px solid #edf0f3;border-radius:13px;background:#fff}
.climate-chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.climate-chart-title{font-size:16px;font-weight:900}
.climate-chart-legend{display:flex;gap:12px;flex-wrap:wrap;color:#6f7680;font-size:12px}
.chart-key{display:flex;align-items:center;gap:5px}
.chart-line{width:15px;height:3px;border-radius:2px;display:inline-block}
.chart-line-high{background:#ef5b5b}
.chart-line-low{background:#4285f4}
.chart-bar{width:10px;height:10px;border-radius:2px;background:#8ec5f4;display:inline-block}
.climate-chart-wrap{margin-top:8px;width:100%;overflow:hidden}
.climate-chart{display:block;width:100%;height:auto;min-height:260px}
.climate-chart-note{margin-top:4px;color:#9a9fa5;font-size:11px;line-height:1.5}
.month-insight{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.month-insight-item{padding:11px 12px;border-radius:10px;background:#f8f9fb;color:#555;font-size:13px;line-height:1.55}
.month-insight-item strong{color:#222}
.climate-loading{padding:36px 10px;text-align:center;color:#777;font-size:15px}
.climate-method-note{margin-top:12px;padding:10px 12px;border-radius:9px;background:#fafafa;color:#969ba1;font-size:11px;line-height:1.55}
/* 여행 환율 */
.currency-section{margin-top:14px;padding:20px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}
.currency-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.currency-title{font-size:19px;font-weight:900}
.currency-subtitle{margin-top:5px;color:#666;font-size:15px}
.currency-date{color:#888;font-size:14px}
.currency-main{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;margin-top:14px}
.currency-rate-card{padding:16px;border-radius:12px;background:#f7f9fc}
.currency-pair{color:#666;font-size:14px;font-weight:800}
.currency-big-rate{margin-top:7px;font-size:27px;line-height:1.25;font-weight:900;letter-spacing:-.4px}
.currency-small-rate{margin-top:7px;color:#666;font-size:14px}
.currency-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.currency-preset{min-width:0;padding:13px 10px;border:1px solid #e6eaf0;border-radius:10px;background:#fff}
.currency-preset-local{color:#666;font-size:14px;font-weight:800;white-space:nowrap}
.currency-preset-krw{margin-top:6px;font-size:18px;font-weight:900;white-space:nowrap}
.currency-calculator{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin-top:12px;padding:13px;border-radius:11px;background:#fafafa}
.currency-input-wrap,.currency-result-wrap{min-width:0}
.currency-input-label,.currency-result-label{margin-bottom:5px;color:#777;font-size:13px;font-weight:800}
.currency-input-box{display:flex;align-items:center;gap:7px;padding:0 11px;height:46px;border:1px solid #dfe4ea;border-radius:9px;background:#fff}
.currency-input-box input{width:100%;min-width:0;border:0;outline:0;font-size:18px;font-weight:800;background:transparent}
.currency-code{color:#666;font-size:14px;font-weight:900;white-space:nowrap}
.currency-arrow{margin-top:17px;color:#8a94a3;font-size:20px;font-weight:900}
.currency-result{display:flex;align-items:center;height:46px;padding:0 12px;border-radius:9px;background:#eef5ff;color:#1f5fbf;font-size:19px;font-weight:900}
.currency-note{margin-top:10px;color:#8a8f98;font-size:13px;line-height:1.5}
.currency-error{margin-top:14px;padding:14px;border-radius:10px;background:#fff4f4;color:#b64343;font-size:15px}
/* 과거 */
.history-section{margin-top:17px;padding:22px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}
.history-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;flex-wrap:wrap}
.history-title{font-size:24px;font-weight:900}
.history-subtitle{margin-top:6px;color:#777;font-size:14px}
.month-tabs{display:flex;gap:6px;flex-wrap:wrap}
.month-button{min-width:44px;padding:8px 10px;border:1px solid #e1e4e8;border-radius:8px;background:#fff;color:#555;font-size:14px;cursor:pointer}
.month-button.active{background:#4285f4;border-color:#4285f4;color:#fff;font-weight:900}
.history-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}
.summary-item{padding:14px;background:#f7f8fa;border-radius:10px}
.summary-label{color:#888;font-size:13px}
.summary-value{margin-top:5px;font-size:22px;font-weight:900}
/* 캘린더 범례 */
.weather-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding:12px 14px;background:#fafbfc;border:1px solid #edf0f3;border-radius:10px}
.legend-title{font-size:13px;font-weight:900;color:#555;margin-right:2px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#666}
.legend-swatch{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.06)}
.legend-no-rain{background:#eef9e8}
.legend-sunny{background:#fff7dc}
.legend-cloudy{background:#f0f2f5}
.legend-rainy{background:#e8f4ff}
.legend-thunder{background:#f2ebff}
.legend-snow{background:#eefaff}
/* 캘린더 배치 */
#historyCalendars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.year-calendar.primary-calendar{grid-column:1 / -1;width:min(920px,100%);justify-self:center;border:2px solid #dce4f0}
.year-calendar.secondary-calendar{width:100%}
.year-calendar{overflow:hidden;border:1px solid #e3e6ea;border-radius:13px;background:#fff}
.calendar-year-title{padding:14px 15px;background:#f7f8fa;border-bottom:1px solid #e5e7eb;font-size:19px;font-weight:900}
.primary-calendar .calendar-year-title{padding:16px 17px;font-size:22px;background:#f3f7fd}
.calendar-year-summary{margin-left:7px;color:#777;font-size:13px;font-weight:600}
.primary-calendar .calendar-year-summary{font-size:14px}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #eee}
.weekday{padding:9px 3px;text-align:center;color:#777;font-size:13px;font-weight:900;background:#fff}
.primary-calendar .weekday{padding:11px 3px;font-size:14px}
.weekday:first-child{color:#d85959}
.weekday:last-child{color:#4776bd}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.calendar-cell{min-height:112px;padding:8px;border-right:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);background:#fff}
.primary-calendar .calendar-cell{min-height:132px;padding:10px}
.calendar-cell:nth-child(7n){border-right:0}
.calendar-empty{background:#fafafa !important}
.calendar-date{font-size:14px;font-weight:900}
.primary-calendar .calendar-date{font-size:16px}
.calendar-weather-icon{margin-top:7px;font-size:25px;text-align:center}
.primary-calendar .calendar-weather-icon{margin-top:9px;font-size:31px}
.calendar-temp{margin-top:7px;text-align:center;white-space:nowrap;font-size:14px}
.calendar-temp strong{font-size:16px}
.primary-calendar .calendar-temp{margin-top:8px;font-size:16px}
.primary-calendar .calendar-temp strong{font-size:18px}
.calendar-min{margin-left:4px;color:#777}
.calendar-rain{margin-top:6px;text-align:center;color:#52718f;font-size:12px}
.primary-calendar .calendar-rain{margin-top:7px;font-size:14px}
/* 날씨별 달력 배경 */
.calendar-cell.weather-no-rain{background:#eef9e8}
.calendar-cell.weather-sunny{background:#fff7dc}
.calendar-cell.weather-cloudy{background:#f0f2f5}
.calendar-cell.weather-rainy{background:#e8f4ff}
.calendar-cell.weather-thunder{background:#f2ebff}
.calendar-cell.weather-snow{background:#eefaff}
.history-loading{grid-column:1 / -1;padding:50px;text-align:center;color:#777;font-size:15px}
.history-note{margin-top:17px;padding:12px;background:#fafafa;border-radius:8px;color:#999;font-size:12px;line-height:1.6}
.loading{padding:18px;text-align:center;color:#777;font-size:15px}
.error{padding:15px;border-radius:8px;background:#fff2f2;color:#d32f2f;font-size:14px}
/* 모바일 */
@media (max-width:950px){
.content{display:flex;flex-direction:column;height:auto}
.detail-hero-grid{grid-template-columns:1fr}
.detail-hero-visual{min-height:190px;border-left:0;border-top:1px solid #edf0f3}
.detail-hero-visual svg,.detail-hero-visual .detail-hero-photo{min-height:190px}
.sidebar{max-height:350px}
.map-wrap{height:600px}
.season-timeline{grid-template-columns:repeat(6,1fr)}
.detail-weather-section{grid-template-columns:1fr}
.detail-week-grid{grid-template-columns:repeat(4,1fr)}
.climate-top{grid-template-columns:1fr}
.climate-metrics{grid-template-columns:repeat(2,1fr)}
#historyCalendars{grid-template-columns:1fr}
.year-calendar.primary-calendar{grid-column:auto;width:100%}
.history-summary{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
.header-inner{padding:14px 15px 10px}
.detail-hero-copy{padding:20px 18px}
.detail-title{font-size:31px}
.detail-season-text{font-size:15px}
.detail-hero-metrics{gap:5px}
.detail-hero-metric{font-size:12px;padding:6px 8px}
.detail-hero-visual,.detail-hero-visual svg,.detail-hero-visual .detail-hero-photo{min-height:165px}
.season-guide-section{padding:14px}
.season-timeline{grid-template-columns:repeat(4,1fr);gap:5px}
.season-month{padding:9px 3px}
.season-month-label{font-size:10px}
.search-wrap{padding:0 15px 10px}
.main,.detail-page{padding:10px}
.map-wrap{height:580px}
.weather-card{width:310px;max-width:78vw}
.temperature{font-size:40px}
.detail-current-temp{font-size:43px}
.detail-week-grid{grid-template-columns:repeat(2,1fr)}
.climate-section{padding:14px}
.currency-section{padding:14px}
.currency-main{grid-template-columns:1fr}
.currency-presets{grid-template-columns:1fr}
.currency-calculator{grid-template-columns:1fr}
.currency-arrow{margin:0;text-align:center;transform:rotate(90deg)}
.climate-metrics{grid-template-columns:repeat(2,1fr)}
.month-insight{grid-template-columns:1fr}
.climate-chart-card{padding:12px 8px 10px}
.climate-chart{min-height:220px}
.weather-legend{gap:9px;padding:10px}
.calendar-cell,.primary-calendar .calendar-cell{min-height:95px;padding:5px}
.calendar-weather-icon,.primary-calendar .calendar-weather-icon{font-size:21px}
.calendar-temp,.primary-calendar .calendar-temp{font-size:12px}
.calendar-temp strong,.primary-calendar .calendar-temp strong{font-size:14px}
.calendar-rain,.primary-calendar .calendar-rain{font-size:11px}
}
/* SEO 정적 랜딩 페이지 */
.seo-topbar{background:#fff;border-bottom:1px solid #e8eaed}.seo-topbar-inner{max-width:1450px;margin:auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px}.seo-brand{color:#222;text-decoration:none;font-size:23px;font-weight:950}.seo-home-link{color:#567083;text-decoration:none;font-weight:800;font-size:14px}.seo-home-link:hover{text-decoration:underline}.seo-breadcrumb{max-width:1450px;margin:12px auto 0;padding:0 24px;color:#7d858e;font-size:13px}.seo-breadcrumb a{color:#5b7289;text-decoration:none}.seo-breadcrumb a:hover{text-decoration:underline}.seo-static-intro{margin-top:12px;padding:14px 16px;background:#f8fafc;border:1px solid #edf0f3;border-radius:11px;color:#56616d;font-size:14px;line-height:1.65}.seo-static-intro strong{color:#222}.seo-month-directory,.seo-related{margin-top:17px;padding:20px 22px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}.seo-section-title{font-size:20px;font-weight:900}.seo-section-sub{margin-top:5px;color:#777;font-size:13px}.seo-link-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}.seo-month-link,.seo-city-link{display:block;padding:10px 8px;border:1px solid #e5e7eb;border-radius:9px;background:#fff;color:#334155;text-decoration:none;text-align:center;font-size:13px;font-weight:850}.seo-month-link:hover,.seo-city-link:hover{border-color:#8eb7f2;background:#f7faff}.seo-month-link.current{background:#eef5ff;border-color:#4285f4;color:#1f5fbf}.seo-adjacent{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.seo-adjacent a{display:block;padding:12px;border:1px solid #e5e7eb;border-radius:10px;color:#334155;text-decoration:none;font-weight:850}.seo-adjacent a:last-child{text-align:right}.seo-footer{max-width:1450px;margin:18px auto 0;padding:18px 24px 30px;color:#8b929a;font-size:12px;line-height:1.6}.city-hub{max-width:1100px;margin:auto;padding:24px}.city-hub-hero{padding:24px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}.city-hub h1{margin:6px 0 0;font-size:34px;letter-spacing:-.7px}.city-hub-summary{margin-top:12px;color:#505b66;line-height:1.7}.city-month-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.city-month-card{padding:14px;border:1px solid #e4e8ed;border-radius:11px;background:#fff;text-decoration:none;color:#222}.city-month-card:hover{border-color:#8eb7f2;background:#f8fbff}.city-month-card strong{display:block;font-size:17px}.city-month-card span{display:inline-flex;margin-top:7px;padding:4px 7px;border-radius:999px;font-size:11px;font-weight:900}.city-month-card p{margin:8px 0 0;color:#707780;font-size:12px;line-height:1.5}.home-seo-directory{max-width:1500px;margin:0 auto 24px;padding:0 22px}.home-seo-card{background:#fff;border:1px solid #e5e7eb;border-radius:13px;padding:18px}.home-seo-card h2{margin:0;font-size:20px}.home-city-links{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:13px}.home-city-links a{display:block;padding:9px;border:1px solid #e7eaf0;border-radius:8px;text-decoration:none;color:#3f4b59;font-weight:800;text-align:center;font-size:13px}.home-city-links a:hover{background:#f7faff;border-color:#a7c6f4}@media(max-width:950px){.seo-link-grid{grid-template-columns:repeat(4,1fr)}.city-month-grid{grid-template-columns:repeat(3,1fr)}.home-city-links{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.city-hub-representative{width:100%;height:108px;max-height:108px;border-radius:11px;margin:12px auto 2px}.seo-topbar-inner,.seo-breadcrumb{padding-left:14px;padding-right:14px}.seo-brand{font-size:20px}.seo-link-grid{grid-template-columns:repeat(3,1fr)}.seo-adjacent{grid-template-columns:1fr}.seo-adjacent a:last-child{text-align:left}.city-hub{padding:12px}.city-hub h1{font-size:29px}.city-month-grid{grid-template-columns:repeat(2,1fr)}.home-city-links{grid-template-columns:repeat(2,1fr)}}
/* === 2026-08 mobile UX + travel calendar refinement === */
.detail-hero-metric-label{margin-right:3px;color:#626b75;font-weight:800}
.hero-travel-score{margin-top:11px;max-width:780px}
.hero-travel-score:empty{display:none}
.hero-score-card{padding:13px 15px}
.hero-score-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-travel-score .travel-score-row{margin-top:4px}
.hero-travel-score .travel-score-number{font-size:30px}
.hero-travel-score .travel-score-title{margin-top:0;text-align:right;font-size:17px}
.hero-travel-score .travel-score-text{margin-top:8px;font-size:13px;line-height:1.55}
.hero-travel-score .travel-tags{margin-top:8px}
/* 공식 관광정보 기반 행사·혼잡 안내 */
.travel-calendar-section{margin-top:14px;padding:20px 22px;background:#fff;border:1px solid #e5e7eb;border-radius:14px}
.travel-calendar-eyebrow{color:#6f55b7;font-size:13px;font-weight:900}
.travel-calendar-title{margin-top:4px;font-size:22px;font-weight:900;letter-spacing:-.3px}
.travel-calendar-subtitle{margin-top:6px;color:#69727d;font-size:14px;line-height:1.55}
.travel-calendar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
.travel-calendar-card{min-width:0;padding:16px;border:1px solid #e6e9ee;border-radius:12px;background:#fafbfc}
.travel-calendar-card.event-card{background:#f7fbff;border-color:#dceaf8}
.travel-calendar-card.caution-card{background:#fffaf1;border-color:#f3e4bf}
.travel-calendar-label{color:#687384;font-size:12px;font-weight:900}
.travel-calendar-card-title{margin-top:7px;color:#222;font-size:18px;font-weight:900;line-height:1.35}
.travel-calendar-period{margin-top:6px;color:#5d6a78;font-size:13px;font-weight:800}
.travel-calendar-card p{margin:9px 0 0;color:#56616d;font-size:13px;line-height:1.65}
.travel-calendar-source{display:inline-block;margin-top:10px;color:#326dc1;text-decoration:none;font-size:12px;font-weight:900}
.travel-calendar-source:hover{text-decoration:underline}
.travel-calendar-note{margin-top:10px;color:#9399a1;font-size:11px;line-height:1.55}
.climate-chart-card-main{margin-top:18px}
@media (max-width:950px){
.travel-calendar-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
/* A: 핵심 수치가 첫눈에 들어오도록 2x2 카드화 */
.detail-hero-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.detail-hero-metric{min-width:0;padding:10px 11px;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:13px;line-height:1.2}
.detail-hero-metric-label{margin:0;font-size:13px;color:#6b7480}
.detail-hero-metric strong{font-size:18px;line-height:1.15;color:#1d2733}
.detail-hero-loading{grid-column:1 / -1;font-size:13px;display:block}
/* B: 도시 대표 이미지는 월별 상세 페이지에서 PC 중심으로 유지 */
.detail-hero-visual{display:none!important}
.detail-hero-grid{display:block;min-height:0}
/* D: A 바로 아래 참고점수는 짧고 선명하게 */
.hero-travel-score{margin-top:9px;max-width:none}
.hero-score-card{padding:11px 12px;border-radius:11px}
.hero-score-top{gap:9px;align-items:flex-end}
.hero-travel-score .travel-score-label{font-size:11px}
.hero-travel-score .travel-score-number{font-size:29px}
.hero-travel-score .travel-score-unit{font-size:12px;padding-bottom:2px}
.hero-travel-score .travel-score-title{font-size:14px;line-height:1.3;text-align:right;margin:0 0 2px}
.hero-travel-score .travel-score-text{margin-top:6px;font-size:12px;line-height:1.45}
.hero-travel-score .travel-tags{gap:4px;margin-top:7px}
.hero-travel-score .travel-tag{padding:4px 6px;font-size:10px}
/* 11: 행사·혼잡 섹션 */
.travel-calendar-section{margin-top:12px;padding:14px}
.travel-calendar-title{font-size:19px}
.travel-calendar-subtitle{font-size:12px}
.travel-calendar-grid{gap:8px;margin-top:12px}
.travel-calendar-card{padding:13px}
.travel-calendar-card-title{font-size:16px}
.travel-calendar-period{font-size:12px}
.travel-calendar-card p{font-size:12px;line-height:1.6}
/* 1~12월 선택은 6칸 x 2줄로 정돈 */
.month-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;width:100%}
.month-button{min-width:0;width:100%;padding:8px 2px;font-size:12px;text-align:center}
/* E: 12개월을 한 화면에 두되 축/월/범례를 읽을 수 있게 */
.climate-chart-card{padding:13px 6px 10px}
.climate-chart-head{align-items:flex-start;gap:8px;padding:0 5px}
.climate-chart-title{font-size:15px}
.climate-chart-legend{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 6px;font-size:10px}
.chart-key{gap:3px;min-width:0;white-space:nowrap}
.chart-line{width:12px}
.climate-chart-wrap{margin-top:10px;width:100%;overflow:visible}
.climate-chart{display:block;width:100%;height:auto;min-height:0}
.climate-chart-note{padding:0 5px;margin-top:3px;font-size:10px}
/* G: 7일이 화면 안에 정확히 들어오도록 캘린더 전용 압축 */
.history-section{padding:14px 8px;overflow:hidden}
.history-head{padding:0 4px}
.history-title{font-size:21px}
.history-subtitle{font-size:12px;line-height:1.5}
.weather-legend{gap:7px;padding:9px 7px;margin-top:13px}
.legend-title,.legend-item{font-size:10px}
.legend-swatch{width:12px;height:12px}
#historyCalendars{width:100%;min-width:0;gap:12px;margin-top:13px}
.year-calendar,.year-calendar.primary-calendar,.year-calendar.secondary-calendar{width:100%;min-width:0;max-width:100%;grid-column:auto;justify-self:stretch}
.calendar-year-title,.primary-calendar .calendar-year-title{padding:10px 9px;font-size:17px;line-height:1.3}
.calendar-year-summary,.primary-calendar .calendar-year-summary{display:block;margin:3px 0 0;font-size:10px}
.calendar-weekdays,.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr));width:100%;min-width:0}
.weekday,.primary-calendar .weekday{min-width:0;padding:7px 0;font-size:11px}
.calendar-cell,.primary-calendar .calendar-cell{box-sizing:border-box;min-width:0;min-height:88px;padding:4px 1px;overflow:hidden}
.calendar-date,.primary-calendar .calendar-date{font-size:12px;padding-left:2px}
.calendar-weather-icon,.primary-calendar .calendar-weather-icon{margin-top:5px;font-size:20px;line-height:1.1}
.calendar-temp,.primary-calendar .calendar-temp{display:flex;justify-content:center;align-items:center;gap:1px;margin-top:5px;font-size:10px;line-height:1.15;white-space:nowrap;letter-spacing:-.35px}
.calendar-temp strong,.primary-calendar .calendar-temp strong{font-size:12px}
.calendar-min{margin-left:0;font-size:10px}
.calendar-rain,.primary-calendar .calendar-rain{margin-top:5px;padding:0;font-size:9px;line-height:1.15;white-space:normal;word-break:keep-all;letter-spacing:-.3px}
}
@media (max-width:360px){
.detail-page{padding:7px}
.history-section{padding-left:5px;padding-right:5px}
.calendar-cell,.primary-calendar .calendar-cell{min-height:84px}
.calendar-weather-icon,.primary-calendar .calendar-weather-icon{font-size:18px}
.calendar-temp strong,.primary-calendar .calendar-temp strong{font-size:11px}
.calendar-min{font-size:9px}
.calendar-rain,.primary-calendar .calendar-rain{font-size:8.5px}
}
/* === 2026-08 annual event schedule clarity === */
.travel-calendar-label{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.travel-calendar-type{min-width:0}
.travel-calendar-month-badge{display:inline-flex;align-items:center;flex:0 0 auto;padding:3px 7px;border-radius:999px;background:#eee9ff;color:#6c4fc4;font-size:10px;font-weight:900;line-height:1.25;white-space:nowrap}
@media (max-width:600px){
.travel-calendar-label{gap:6px}
.travel-calendar-month-badge{padding:3px 6px;font-size:9.5px}
}
/* v5 데이터 연결 안정화 */
.history-fallback,.history-connection-note{grid-column:1/-1;display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid #dfe7f1;border-radius:12px;background:#f8fbff;color:#536273;line-height:1.55}
.history-fallback-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eaf3ff;color:#2f6fb4;font-size:21px;font-weight:900;flex:0 0 auto}
.history-fallback strong,.history-connection-note strong{display:block;color:#243447;font-size:14px}
.history-fallback span,.history-connection-note span{display:block;margin-top:4px;font-size:13px}
.history-retry-button{margin-top:9px;padding:7px 11px;border:1px solid #bfd3ec;border-radius:8px;background:#fff;color:#2d67a7;font-size:12px;font-weight:850;cursor:pointer}
.history-retry-button:hover{background:#eef6ff}
@media(max-width:600px){.history-fallback,.history-connection-note{padding:13px;gap:9px}.history-fallback-icon{width:30px;height:30px;font-size:18px}}
.climate-connection-note{padding:16px;border:1px solid #dfe7f1;border-radius:12px;background:#f8fbff;color:#536273;line-height:1.55}.climate-connection-note strong{display:block;color:#243447;font-size:14px}.climate-connection-note span{display:block;margin-top:4px;font-size:13px}
/* === 2026-08 Korean traveler TOP5 + temperature visual cue === */
.detail-country{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.detail-country-text{min-width:0}
.korean-popularity-badge{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 8px;border:1px solid #eadfbd;border-radius:999px;background:#fffaf0;color:#654f1d;font-size:11px;font-weight:850;line-height:1;vertical-align:middle}
.korean-popularity-badge .rank-medal{font-size:13px;line-height:1}
.korean-popularity-badge .rank-copy{white-space:nowrap}
.korean-popularity-badge .rank-copy strong{color:#7b5710;font-weight:950}
.korean-popularity-badge .rank-source{padding-left:5px;border-left:1px solid rgba(101,79,29,.18);color:#9a8456;font-size:9px;font-weight:800;white-space:nowrap}
.korean-popularity-badge.rank-2{background:#f8fafc;border-color:#dce2e8;color:#52606d}
.korean-popularity-badge.rank-2 .rank-copy strong{color:#465563}
.korean-popularity-badge.rank-2 .rank-source{color:#7f8b96;border-left-color:rgba(82,96,109,.16)}
.korean-popularity-badge.rank-3{background:#fff7f1;border-color:#eed7c6;color:#77563e}
.korean-popularity-badge.rank-3 .rank-copy strong{color:#6b4933}
.korean-popularity-badge.rank-3 .rank-source{color:#9b7b64;border-left-color:rgba(119,86,62,.15)}
.korean-popularity-badge.rank-4,.korean-popularity-badge.rank-5{background:#f7f8fa;border-color:#e3e7eb;color:#5f6974}
.korean-popularity-badge.rank-4 .rank-copy strong,.korean-popularity-badge.rank-5 .rank-copy strong{color:#3f4a56}
.korean-popularity-badge.rank-4 .rank-source,.korean-popularity-badge.rank-5 .rank-source{color:#8b949d;border-left-color:rgba(95,105,116,.14)}
@media (max-width:600px){
.detail-country{gap:7px}
.korean-popularity-badge{padding:5px 7px;font-size:10px}
.korean-popularity-badge .rank-source{font-size:8px}
/* 숫자색은 검정으로 유지하고 카드 자체만 아주 옅게 구분 */
.detail-hero-metric.metric-high{background:#fff5f2;border-color:#f6d9d1}
.detail-hero-metric.metric-low{background:#f3f8ff;border-color:#d8e7f8}
.detail-hero-metric.metric-high .detail-hero-metric-label{color:#8a6258}
.detail-hero-metric.metric-low .detail-hero-metric-label{color:#60788f}
}
/* v11: 검색의도 힌트 · 위험월 후기 바텀시트 */
.city-search-intent-summary{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#f8fafc;color:#475569;font-size:14px;line-height:1.6}
.intent-hint{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 0;padding:10px 12px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;color:#475569;font-size:13px;line-height:1.45}
.intent-hint-label{font-weight:800;color:#334155;white-space:nowrap}
.intent-chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border-radius:999px;background:#f1f5f9;color:#334155;font-weight:750;white-space:nowrap}
.intent-hint-text{flex:1 1 280px;color:#475569}
.traveler-review-teaser{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 0;padding:12px 14px;border:1px solid #dbeafe;border-radius:14px;background:#f8fbff}
.traveler-review-teaser-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.traveler-review-teaser-copy strong{font-size:14px;color:#1e3a5f}
.traveler-review-teaser-copy span{font-size:13px;line-height:1.45;color:#52657a}
.traveler-review-open{flex:0 0 auto;border:0;background:transparent;color:#2563eb;font-size:13px;font-weight:800;cursor:pointer;padding:7px 4px}
.traveler-review-modal[hidden]{display:none!important}
.traveler-review-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.traveler-review-backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.52);cursor:pointer}
.traveler-review-sheet{position:relative;z-index:1;width:min(620px,100%);max-height:min(78vh,760px);overflow:auto;background:#fff;border-radius:20px;padding:18px 20px 20px;box-shadow:0 24px 80px rgba(15,23,42,.28)}
.traveler-review-handle{display:none}
.traveler-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.traveler-review-head h2{margin:0;font-size:20px;line-height:1.3;color:#172033}
.traveler-review-close{border:0;background:#f1f5f9;border-radius:50%;width:34px;height:34px;flex:0 0 34px;color:#475569;font-size:15px;cursor:pointer}
.traveler-review-points{margin:0 0 14px;padding-left:21px;color:#334155;font-size:14px;line-height:1.75}
.traveler-review-summary{margin:0 0 14px;padding:13px 14px;border-radius:13px;background:#f8fafc;color:#334155;font-size:14px;line-height:1.7}
.traveler-review-note{margin:0;color:#64748b;font-size:12px;line-height:1.55}
.traveler-review-sources{display:flex;flex-direction:column;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid #e2e8f0;font-size:12px}
.traveler-review-sources strong{color:#475569}
.traveler-review-sources a{color:#2563eb;text-decoration:none;overflow-wrap:anywhere}
body.review-modal-open{overflow:hidden}
@media(max-width:720px){
.intent-hint{margin-top:8px;padding:9px 10px;gap:6px;font-size:12px}
.intent-hint-text{flex-basis:100%;padding-top:1px}
.traveler-review-teaser{align-items:flex-start;flex-direction:column;gap:5px;padding:11px 12px}
.traveler-review-open{padding:3px 0 0}
.traveler-review-modal{align-items:flex-end;padding:0}
.traveler-review-sheet{width:100%;max-height:82vh;border-radius:20px 20px 0 0;padding:9px 18px calc(20px + env(safe-area-inset-bottom))}
.traveler-review-handle{display:block;width:42px;height:4px;border-radius:999px;background:#cbd5e1;margin:0 auto 12px}
.traveler-review-head h2{font-size:18px}
}
.seo-footer-links{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:7px}
.seo-footer-links a{color:#617b98;text-decoration:none;font-weight:700}
.seo-footer-links a:hover{text-decoration:underline;text-underline-offset:2px}
.seo-footer-links span{color:#c1c8cf}
/* v15 bilingual navigation */
.seo-topbar-inner{gap:12px}.seo-lang-switch{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:850;color:#65788d;white-space:nowrap}.seo-lang-switch a{color:#2e6fc1;text-decoration:none}.seo-lang-switch a[aria-current="page"]{color:#18212b}.seo-lang-switch span{color:#c2cad3}.city-hub .lang-note{margin-top:10px;color:#6f7b88;font-size:12px}.seo-footer-links{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.detail-hero-metric strong small{font-size:.72em;color:#6d7885;font-weight:750}
.brand-mascot-icon{width:32px;height:28px;object-fit:cover;object-position:50% 35%;border-radius:9px;vertical-align:middle;margin-right:3px}
@media(max-width:720px){.brand-mascot-icon{width:28px;height:25px}.seo-brand{display:inline-flex;align-items:center}}
/* === 2026-08 brand icon + EN temperature readability === */
.seo-brand{display:inline-flex;align-items:center;gap:8px}
.brand-mascot-icon{width:36px;height:36px;object-fit:contain;object-position:center;vertical-align:middle;flex:0 0 auto;filter:drop-shadow(0 4px 8px rgba(53,104,181,.12));margin-right:0}
.detail-hero-metric.metric-high strong,.detail-hero-metric.metric-low strong{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.detail-hero-metric.metric-high .temp-main{color:#d9534f}
.detail-hero-metric.metric-low .temp-main{color:#3377df}
.detail-hero-metric .temp-main{font-size:1.14em;line-height:1.05;font-weight:950}
.detail-hero-metric strong small{font-size:.78em;color:#6d7885;font-weight:800;line-height:1.2}
.calendar-temp.has-dual-scale{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:7px;text-align:center;white-space:normal;line-height:1.2}
.calendar-temp-f{display:flex;align-items:baseline;justify-content:center;gap:4px;font-weight:900}
.calendar-temp-f strong{font-size:15px;color:#d9534f}
.calendar-temp-f .calendar-min-f{color:#3377df;font-size:13px;font-weight:900}
.calendar-temp-c{font-size:11px;color:#6f7b88;letter-spacing:-.1px}
.primary-calendar .calendar-temp.has-dual-scale{margin-top:8px;gap:3px}
.primary-calendar .calendar-temp-f strong{font-size:17px}
.primary-calendar .calendar-temp-f .calendar-min-f{font-size:14px}
.primary-calendar .calendar-temp-c{font-size:12px}
@media (max-width:720px){.brand-mascot-icon{width:30px;height:30px}.seo-brand{gap:6px}}
@media (max-width:600px){.detail-hero-metric.metric-high strong,.detail-hero-metric.metric-low strong{gap:1px}.calendar-temp.has-dual-scale,.primary-calendar .calendar-temp.has-dual-scale{gap:1px}.calendar-temp-f strong,.primary-calendar .calendar-temp-f strong{font-size:13px}.calendar-temp-f .calendar-min-f,.primary-calendar .calendar-temp-f .calendar-min-f{font-size:11px}.calendar-temp-c,.primary-calendar .calendar-temp-c{font-size:10px}}
/* === v17 English readability + fast climate fallback UI === */
.detail-current-temp small{font-size:.44em;color:#6f7b88;font-weight:800;margin-left:5px}
.detail-stat strong small{font-size:.72em;color:#7a8693;font-weight:750;margin-left:4px}
.detail-day-temp .forecast-low-f{color:#3377df;font-weight:900}.detail-day-temp strong{color:#d9534f}.detail-day-temp .forecast-celsius{color:#88929e;font-size:10px;font-weight:700}
.calendar-temp.compact-f{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-top:7px;white-space:nowrap;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.25px}
.calendar-high-f{color:#d9534f;font-size:13px;font-weight:950}.calendar-low-f{color:#3377df;font-size:13px;font-weight:950}.calendar-temp-sep{color:#a1a8b0;font-size:10px;font-weight:700}
.primary-calendar .calendar-high-f,.primary-calendar .calendar-low-f{font-size:15px}.primary-calendar .calendar-temp.compact-f{margin-top:8px}
@media(max-width:600px){.calendar-high-f,.calendar-low-f,.primary-calendar .calendar-high-f,.primary-calendar .calendar-low-f{font-size:10px;letter-spacing:-.45px}.calendar-temp-sep{font-size:8px}.calendar-temp.compact-f,.primary-calendar .calendar-temp.compact-f{gap:1px;margin-top:4px}.detail-day-temp .forecast-celsius{font-size:9px}}
@media(max-width:390px){.calendar-high-f,.calendar-low-f,.primary-calendar .calendar-high-f,.primary-calendar .calendar-low-f{font-size:9px}.calendar-temp-sep{font-size:7px}.calendar-cell,.primary-calendar .calendar-cell{padding-left:3px;padding-right:3px}}
/* V22 mobile safety: long English season labels wrap inside 4-column timeline cells. */
@media(max-width:600px){.season-month-label{white-space:normal;overflow-wrap:anywhere;line-height:1.2}}
.forecast-source-note{margin-top:12px;font-size:12px;line-height:1.55;color:#667085;text-align:right}.forecast-source-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}@media(max-width:600px){.forecast-source-note{text-align:left;font-size:11px;overflow-wrap:anywhere}}
@media(max-width:390px){
.calendar-temp:not(.compact-f),.primary-calendar .calendar-temp:not(.compact-f){gap:0;letter-spacing:-.5px}
.calendar-temp:not(.compact-f) strong,.primary-calendar .calendar-temp:not(.compact-f) strong{font-size:10px;letter-spacing:-.5px}
.calendar-temp:not(.compact-f) .calendar-min,.primary-calendar .calendar-temp:not(.compact-f) .calendar-min{font-size:9px;letter-spacing:-.5px}
}
/* === V25 summary metrics + English temperature-unit UX === */
.detail-hero-metrics{gap:8px}
.detail-hero-metric{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:96px;padding:9px 12px;border-radius:12px;line-height:1.18}
.detail-hero-metric-label{display:block;margin:0;color:#626b75;font-size:12px;font-weight:850;line-height:1.2}
.detail-hero-metric strong{display:block;font-size:16px;line-height:1.15}
.detail-hero-metric.metric-high strong,.detail-hero-metric.metric-low strong{align-items:flex-start}
.temp-unit-control{display:inline-flex;align-items:center;gap:5px;width:max-content;margin-top:12px;padding:5px 6px 5px 10px;border:1px solid #dbe4ee;border-radius:999px;background:#f8fafc;box-shadow:0 2px 8px rgba(31,41,55,.04)}
.temp-unit-label{margin-right:3px;color:#566474;font-size:12px;font-weight:900}
.temp-unit-button{min-width:42px;padding:7px 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:#5c6875;font:inherit;font-size:13px;font-weight:900;cursor:pointer;line-height:1}
.temp-unit-button:hover{background:#eef4fb;color:#244f83}.temp-unit-button.is-active{background:#1f6fd1;color:#fff;box-shadow:0 2px 7px rgba(31,111,209,.22)}
.temp-unit-button:focus-visible{outline:3px solid rgba(66,133,244,.28);outline-offset:2px}
.history-head .temp-unit-control{margin-top:0;flex:0 0 auto}
.weather-legend{gap:12px;padding:12px 14px}
.legend-title{font-size:14px}.legend-item{font-size:14px}.legend-swatch{width:15px;height:15px}
.legend-unit-item{font-weight:800;color:#4b5968}.legend-unit-name{font-weight:950;color:#27384c}
.detail-day-temp .forecast-unit{color:#737f8b;font-size:11px;font-weight:800}
@media(max-width:600px){
.detail-hero-metric{padding:10px 11px;border-radius:10px;min-width:0}
.detail-hero-metric-label{font-size:12px}.detail-hero-metric strong{font-size:17px}
.temp-unit-control{margin-top:10px;padding:4px 5px 4px 8px}.temp-unit-label{font-size:11px}.temp-unit-button{min-width:38px;padding:7px 8px;font-size:12px}
.history-head{align-items:flex-start}.history-head .temp-unit-control{margin-top:2px}
.weather-legend{gap:8px;padding:10px 8px}.legend-title,.legend-item{font-size:11px}.legend-swatch{width:13px;height:13px}
}
/* === V27 mobile readability: +2px emphasis in requested planning blocks === */
@media(max-width:600px){
/* Monthly hero metrics */
.detail-hero-metrics{gap:9px}
.detail-hero-metric{padding:12px 13px;border-radius:11px}
.detail-hero-metric-label{font-size:14px}
.detail-hero-metric strong{font-size:19px}
.detail-hero-loading{font-size:15px}
/* Travel Weather Score */
.hero-score-card{padding:13px 14px;border-radius:12px}
.hero-travel-score .travel-score-label{font-size:13px}
.hero-travel-score .travel-score-number{font-size:31px}
.hero-travel-score .travel-score-unit{font-size:14px}
.hero-travel-score .travel-score-title{font-size:16px}
.hero-travel-score .travel-score-text{font-size:14px;line-height:1.5}
.hero-travel-score .travel-tag{padding:5px 8px;font-size:12px}
/* 12-month travel timing */
.season-guide-section{padding:16px}
.season-guide-eyebrow{font-size:15px}
.season-guide-title{font-size:24px}
.season-guide-summary{font-size:16px}
.season-timeline{gap:7px}
.season-month{padding:11px 4px 10px;min-height:72px}
.season-month-number{font-size:16px}
.season-month-label{font-size:12px}
.season-guide-note{font-size:14px}
/* Annual events / crowd periods */
.travel-calendar-section{padding:16px}
.travel-calendar-eyebrow{font-size:15px}
.travel-calendar-title{font-size:21px}
.travel-calendar-subtitle{font-size:14px}
.travel-calendar-grid{gap:10px;margin-top:13px}
.travel-calendar-card{padding:15px}
.travel-calendar-label{font-size:14px}
.travel-calendar-card-title{font-size:18px}
.travel-calendar-period{font-size:14px}
.travel-calendar-card p{font-size:14px;line-height:1.65}
.travel-calendar-source{font-size:14px}
.travel-calendar-note{font-size:13px}
.travel-calendar-month-badge{padding:4px 7px;font-size:11.5px}
/* 12-month climate chart + insights */
.climate-chart-card{padding:15px 8px 12px}
.climate-chart-title{font-size:17px}
.climate-chart-legend{gap:6px 8px;font-size:12px}
.chart-line{width:14px}
.climate-chart-note{font-size:12px;line-height:1.55}
.month-insight{grid-template-columns:repeat(3,1fr);gap:10px}
.month-insight-item{padding:13px 14px;font-size:15px;line-height:1.6}
}
/* === V27.1 English monthly SEO / semantic content === */
h2.season-guide-title,h2.travel-calendar-title,h2.secondary-section-title{margin:4px 0 0}
h2.climate-title,h2.history-title,h2.currency-title,h2.seo-section-title{margin:0}
.monthly-seo-guide{margin:22px 0 0;padding:20px 22px;border:1px solid #dce7f5;border-radius:16px;background:#f8fbff}
.monthly-seo-guide-eyebrow{font-size:12px;font-weight:900;color:#5279aa;letter-spacing:.1px}
.monthly-seo-guide-title{margin:5px 0 8px;font-size:21px;line-height:1.35;font-weight:900;color:#1d2a38}
.monthly-seo-guide p{margin:0;color:#485969;font-size:14px;line-height:1.72}
.monthly-seo-guide p+p{margin-top:8px}
.monthly-seo-guide-takeaway{padding-top:8px;border-top:1px dashed #d9e4f0}
@media(max-width:700px){
.monthly-seo-guide{margin-top:17px;padding:18px 17px;border-radius:14px}
.monthly-seo-guide-eyebrow{font-size:14px}
.monthly-seo-guide-title{font-size:22px;line-height:1.35}
.monthly-seo-guide p{font-size:16px;line-height:1.72}
}
/* V27.2 Munich: static recent 3-year monthly summary */
.munich-history-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.munich-history-card{border:1px solid #e1e7ee;border-radius:16px;padding:16px;background:#f8fbff}.munich-history-year{font-weight:900;font-size:18px;margin-bottom:8px}.munich-history-values{display:grid;gap:6px;color:#4d5c6d;line-height:1.45}.munich-source-note{margin-top:14px;font-size:13px;line-height:1.55;color:#778392}.munich-climate-note{margin-top:14px;padding:12px 14px;border-radius:13px;background:#f7f9fc;color:#687586;font-size:13px;line-height:1.55}@media(max-width:640px){.munich-history-grid{grid-template-columns:1fr}.munich-history-card{padding:15px}.munich-history-year{font-size:19px}}
/* === V27.5 mobile scanability + Japan places pilot === */
.hero-score-top{align-items:flex-start}
.hero-travel-score .travel-score-title{align-self:flex-start;margin-top:0;padding-top:0;color:#1f2937}
.hero-monthly-attractions{margin-top:10px;padding:11px 12px;border:1px solid #d8e8fb;border-radius:13px;background:linear-gradient(135deg,#f3f8ff 0%,#fffaf1 100%)}
.hero-attractions-head{display:flex;align-items:center;gap:5px}
.hero-attractions-icon{font-size:15px;line-height:1}
.hero-attractions-label{font-size:13px;font-weight:950;color:#1f67b2;letter-spacing:-.1px}
.hero-attractions-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.hero-attraction-chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border:1px solid #d6e4f5;border-radius:999px;background:#fff;color:#26384c;font-size:12px;font-weight:850;box-shadow:0 1px 0 rgba(31,103,178,.04)}
.intent-hint{border-color:#cfe0f4;background:#f7fbff;color:#334155;box-shadow:0 1px 0 rgba(37,99,235,.03)}
.intent-hint-label{color:#1766b2;font-weight:950}
.intent-chip{border:1px solid #d5e4f5;background:#eaf3ff;color:#244f7b;font-weight:850}
.intent-hint-text{color:#334155;font-weight:600}
.month-insight{gap:10px}
.month-insight-item{padding:14px 15px;border:1px solid #e7edf3;border-radius:13px;background:#fafbfd;color:#3f4d5c;font-size:14px;line-height:1.5}
.month-insight-heading{display:flex;align-items:center;gap:5px;color:#263341;font-size:15px;font-weight:900}
.month-insight-value{margin-top:6px;color:#172033;font-size:19px;line-height:1.25;font-weight:950;letter-spacing:-.3px}
.month-insight-note{margin-top:7px;color:#465668;font-size:13px;line-height:1.55;font-weight:560}
.month-insight-item.insight-temp{background:#fff8f5;border-color:#f5ded6}
.month-insight-item.insight-temp .month-insight-value{color:#a94a3d}
.month-insight-item.insight-night{background:#f5f9ff;border-color:#dbe8f7}
.month-insight-item.insight-night .month-insight-value{color:#315f96}
.month-insight-item.insight-rain{background:#f3f9ff;border-color:#d4e7f8}
.month-insight-item.insight-rain .month-insight-value{color:#1e66a5}
@media(max-width:600px){
.hero-score-top{align-items:flex-start;gap:8px}
.hero-travel-score .travel-score-title{padding-top:0;margin-top:-1px;font-size:15px}
.hero-monthly-attractions{margin-top:9px;padding:10px 11px;border-radius:12px}
.hero-attractions-label{font-size:13px}
.hero-attractions-chips{margin-top:7px;gap:5px}
.hero-attraction-chip{min-height:27px;padding:4px 8px;font-size:11.5px}
.intent-hint{margin-top:9px;padding:10px 11px;gap:6px;font-size:13px}
.intent-hint-label{font-size:14px}
.intent-chip{font-size:12px}
.intent-hint-text{flex-basis:100%;padding-top:2px;font-size:13px;line-height:1.55}
.month-insight{grid-template-columns:1fr;gap:10px;margin-top:13px}
.month-insight-item{padding:14px 15px}
.month-insight-heading{font-size:16px}
.month-insight-value{font-size:20px;margin-top:5px}
.month-insight-note{font-size:14px;line-height:1.55}
}
/* TWF_MONTH_TOPBAR_NAV_20260917_FINAL3 */
.month-page-topbar{max-width:1450px;margin:12px auto 0;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.month-page-topbar .seo-breadcrumb{max-width:none;margin:0;padding:0;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.month-jump-nav{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.month-jump-link{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:58px;min-height:34px;padding:7px 11px;border:1px solid #d7e3f2;border-radius:999px;background:#fff;color:#315f96;text-decoration:none;font-size:13px;font-weight:900;line-height:1;box-shadow:0 2px 8px rgba(38,96,154,.06);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.month-jump-link:visited{color:#315f96}
.month-jump-link:hover{background:#f5f9ff;border-color:#abc9e8;color:#245d96;text-decoration:none;box-shadow:0 4px 12px rgba(38,96,154,.10)}
.month-jump-link:active{transform:translateY(1px)}
.month-jump-link:focus-visible{outline:3px solid rgba(66,133,244,.18);outline-offset:2px}
.month-jump-next{background:#edf6ff;border-color:#c8def3;color:#245d96}
.month-jump-arrow{font-size:17px;line-height:.8;font-weight:800}
@media(max-width:600px){
.month-page-topbar{padding:0 14px;gap:8px;min-height:34px}
.month-page-topbar .seo-breadcrumb{font-size:12px}
.month-jump-nav{gap:5px}
.month-jump-link{min-width:52px;min-height:32px;padding:6px 9px;font-size:12px;box-shadow:none}
.month-jump-arrow{font-size:16px}
}