:root { color-scheme: dark; --bg:#0b1020; --surface:#141b31; --surface2:#1a2440; --line:rgba(255,255,255,.1); --text:#f7f8fc; --muted:#9ca8c2; --accent:#7c9cff; --mint:#4de1c1; --sun:#ffd166; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; background:radial-gradient(circle at 85% 0,#253765 0,transparent 30rem),var(--bg); color:var(--text); }
main { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:42px 0 56px; }
header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }
h1 { margin:0; font-size:clamp(28px,4vw,42px); letter-spacing:-.055em; }
.today { color:var(--muted); margin:7px 0 0; }
button { font:inherit; color:inherit; cursor:pointer; }
.icon-btn { padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.05); }
.icon-btn:hover { border-color:var(--accent); }
.grid { display:grid; gap:16px; }
.top { grid-template-columns:1.25fr .75fr; }
.bottom { grid-template-columns:1fr 1fr; margin-top:16px; }
.card { border:1px solid var(--line); border-radius:18px; padding:24px; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); box-shadow:0 16px 40px rgba(0,0,0,.18); }
.eyebrow { margin:0 0 12px; color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.weather-main { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.place { margin:0 0 5px; font-weight:700; font-size:18px; }
.temp { margin:0; font-size:64px; font-weight:750; letter-spacing:-.07em; line-height:.95; }
.condition { margin:10px 0 0; color:var(--muted); }
.weather-icon { font-size:64px; line-height:1; }
.weather-stats { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:25px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.weather-stats b { color:var(--text); margin-left:6px; }
.weather-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.weather-heading .eyebrow { margin-bottom:12px; }.weather-heading .icon-btn { margin-top:-8px; padding:7px 10px; font-size:13px; }
.clock-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
.clock { min-width:0; text-align:center; }
.clock-face { position:relative; width:112px; height:112px; margin:0 auto 10px; border:2px solid rgba(255,255,255,.65); border-radius:50%; background:radial-gradient(circle,var(--surface2) 0 66%,transparent 67%),repeating-conic-gradient(from -1deg,rgba(255,255,255,.72) 0 2deg,transparent 2deg 30deg); }
.clock-face::before { content:""; position:absolute; inset:13px; border:1px solid var(--line); border-radius:50%; }
.hand { position:absolute; bottom:50%; left:50%; width:2px; transform-origin:bottom; transform:translateX(-50%) rotate(var(--angle)); border-radius:2px; z-index:2; }
.hour-hand { height:29px; background:var(--text); }.minute-hand { height:40px; background:var(--mint); }
.clock-pin { position:absolute; top:calc(50% - 4px); left:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:var(--text); z-index:4; }
.clock-mark { position:absolute; color:var(--muted); font-size:10px; font-weight:700; line-height:1; }.m12{top:7px;left:50%;transform:translateX(-50%)}.m3{right:8px;top:50%;transform:translateY(-50%)}.m6{bottom:7px;left:50%;transform:translateX(-50%)}.m9{left:8px;top:50%;transform:translateY(-50%)}
.city { display:block; font-weight:700; } .zone { display:block; margin-top:3px; color:var(--muted); font-size:12px; }.time { display:block; margin-top:5px; color:var(--mint); font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; }
.rates { display:grid; gap:0; }
.rate { display:grid; grid-template-columns:1fr auto; align-items:center; padding:17px 0; border-bottom:1px solid var(--line); }
.rate:last-child { border:0; padding-bottom:0; }.pair { font-size:15px; font-weight:750; }.rate small { display:block; margin-top:4px; color:var(--muted); }.value { color:var(--mint); font-size:24px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.updated { margin:18px 0 0; color:var(--muted); font-size:12px; }
.forecast { display:flex; justify-content:space-between; gap:8px; margin-top:18px; }.day { width:20%; text-align:center; color:var(--muted); font-size:13px; }.day b { display:block; margin:7px 0; font-size:24px; color:var(--text); }.day span { color:var(--sun); font-size:18px; }
.forecast-title { margin:20px 0 -2px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.stock-list { display:grid; gap:0; --tv-widget-background-color:transparent; color-scheme:dark; }.stock-widget { min-height:70px; padding:10px 0; border-bottom:1px solid var(--line); }.stock-widget:last-child { border-bottom:0; padding-bottom:0; }.stock-widget tv-single-ticker { display:block; min-height:50px; color-scheme:dark; }
.tools-card { grid-column:1 / -1; }.tools-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.converter + .converter { padding-left:28px; border-left:1px solid var(--line); }.converter-title { margin:0 0 14px; font-size:17px; letter-spacing:-.03em; }.converter-controls { display:grid; grid-template-columns:1fr 110px; gap:8px; }.converter-controls input,.converter-controls select { width:100%; margin:0; padding:10px; border:1px solid var(--line); border-radius:9px; background:#0c1223; color:var(--text); font:inherit; }.conversion-grid,.base-grid { display:grid; grid-template-columns:1fr; gap:6px; margin-top:14px; }.conversion-value { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:12px; min-width:0; padding:10px; border-radius:9px; background:rgba(255,255,255,.045); }.conversion-value span { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.05em; }.conversion-value code { display:block; min-width:0; overflow-x:auto; color:var(--mint); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; font-weight:700; white-space:nowrap; }.converter-note { min-height:16px; margin:9px 0 0; color:var(--muted); font-size:12px; }.converter-note.error { color:#ff8fa3; }
dialog { width:min(420px,calc(100% - 32px)); border:1px solid var(--line); border-radius:16px; padding:24px; color:var(--text); background:var(--surface2); box-shadow:0 30px 100px rgba(0,0,0,.55); } dialog::backdrop { background:rgba(0,0,0,.55); } dialog h2 { margin:0 0 16px; font-size:21px; } label { display:block; color:var(--muted); font-size:14px; } input { width:100%; margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#0c1223; color:var(--text); font:inherit; } .actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }.primary { border:0; border-radius:9px; padding:10px 14px; background:var(--accent); color:#101a35; font-weight:750; }.secondary { border:0; padding:10px 12px; background:transparent; color:var(--muted); }
@media (max-width:720px) { main { padding-top:26px; } header { align-items:start; flex-direction:column; }.top,.bottom { grid-template-columns:1fr; }.temp{font-size:55px}.card{padding:20px}.tools-grid{grid-template-columns:1fr;gap:22px}.converter + .converter{padding:22px 0 0;border-top:1px solid var(--line);border-left:0} }