:root{--card-bg:#0f1724;--card-fg:#fff;--muted:#9aa4b2}
body{font-family:system-ui,-apple-system,Roboto,'Noto Sans KR',sans-serif;background:#0b1220;color:var(--card-fg);padding:10px;margin:0;height:100vh;overflow:hidden}
.dashboard{display:grid;grid-template-columns:3fr 7fr;gap:12px;margin:0 auto;height:100vh;max-height:100vh}
@media (max-width:900px){
	.dashboard{grid-template-columns:1fr;}
}
.card{background:linear-gradient(180deg,#0f1724,#0b1220);padding:16px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6);overflow:auto}
.current-weather{height:100%;display:flex;flex-direction:column}
.current-weather .header p{margin:0;font-size:20px;color:var(--muted)}
.current-weather .content{display:flex;align-items:center;gap:12px}
.current-weather .temp{font-size:100px;font-weight:700;margin:10px 0}
.weather-details{display:flex;align-items:center;gap:10px}
.weather-icon svg{width:48px;height:48px;color:#ffd54f}
.additional-stats{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.stat-item{background:rgba(255,255,255,0.03);padding:12px;border-radius:8px;text-align:center;min-width:90px;flex:1}
.stat-item .value{font-size:28px;font-weight:600}
.stat-item .label{font-size:16px;color:var(--muted);margin-top:6px}
.day-forecast .header{display:flex;justify-content:space-between;align-items:center}
.chart-container{margin-top:12px}
.controls{margin-top:12px; display:none;}
button{padding:8px 12px;border-radius:8px;border:0;background:#0b2540;color:var(--card-fg);cursor:pointer}
button:hover{opacity:.95}

.week-grid{display:flex;gap:10px;margin-top:12px;flex-wrap:nowrap;overflow-x:auto}
.week-item{background:rgba(255,255,255,0.03);padding:10px;border-radius:8px;min-width:95px;text-align:center;flex-shrink:0}
.week-item .day{font-size:18px;color:var(--muted)}
.week-item .icon svg{width:40px;height:40px}
.week-item .temps{font-weight:700;margin-top:6px;display:flex;justify-content:center;gap:8px;font-size:20px}
.week-item .tmin{color:var(--muted)}
.week-item .tmax{font-weight:800}
.week-item .pop{font-size:16px;color:var(--muted);margin-top:6px}

/* right column stacks two cards */
.right-column{display:flex;flex-direction:column;gap:12px;height:100%;overflow:hidden}
.chart-card{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.chart-card .chart-container{flex:0 1 auto;min-height:200px;position:relative}
.chart-card .hourly-weather-bar{flex:0 0 auto;margin:0;padding:10px 0}
.week-card{flex:0 0 auto}
.week-card .week-content{margin-top:8px}
.week-card .header p{font-size:24px;font-weight:600;margin:0}

/* card separation visual tweak */
.card.headerless{padding-top:12px}

/* Hourly weather bar */
.hourly-weather-bar{
  margin-top:0;
  margin-bottom:10px;
  position:relative;
  height:60px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.1);
  box-sizing:border-box;
  overflow:visible
}
.weather-segment{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:6px 8px;
  border-radius:6px;
  background:rgba(255,255,255,0.05);
  gap:6px;
  min-width:0;
  height:100%;
  box-sizing:border-box;
  overflow:hidden
}
.weather-segment .weather-icon-container{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-shrink:0;
  width:28px
}
.weather-segment .weather-icon-container svg{
  width:24px;
  height:24px;
  color:#fff
}
.weather-segment .hours-container{
  display:flex;
  flex-direction:row;
  gap:3px;
  flex-wrap:wrap;
  flex:1;
  min-width:0;
  align-items:center
}
.weather-segment .hour-label{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  padding:2px 4px;
  background:rgba(255,255,255,0.05);
  border-radius:3px;
  white-space:nowrap;
  display:inline-block
}
.weather-segment.sunny{background:rgba(255,213,79,0.15)}
.weather-segment.cloudy{background:rgba(158,158,158,0.15)}
.weather-segment.rainy{background:rgba(74,158,255,0.15)}
.weather-segment.snowy{background:rgba(255,255,255,0.15)}