:root{font-family:Pretendard,"Noto Sans KR",system-ui,-apple-system,sans-serif;--ink:#3f322d;--frame:#6e4a3b;--sky-top:#83c8ef;--sky-bottom:#f5dca9;--land-far:#80a37f;--land-near:#4f735d;--cloud:rgba(255,255,255,.88);--ease:900ms cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 78% 14%,rgba(255,255,255,.6),transparent 24rem),linear-gradient(145deg,#eadbc7,#cda984)}button,select{font:inherit}.room{min-height:100svh;padding:clamp(1rem,3vw,2.5rem);overflow:hidden;position:relative}.room:after{content:"";position:fixed;inset:auto 0 0;height:12vh;background:linear-gradient(#a67959,#896044);box-shadow:inset 0 7px rgba(76,49,37,.15);z-index:-1}.topbar{max-width:1080px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem}.back-link{color:var(--ink);text-decoration:none;font-weight:750;padding:.65rem .85rem;border-radius:999px}.back-link:hover{background:rgba(255,255,255,.44)}.privacy-note{margin:0;font-size:.78rem;opacity:.7}.weather-experience{width:min(100%,980px);margin:clamp(1rem,3vh,2rem) auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:end;gap:clamp(1.25rem,4vw,4rem)}
.window-wrap{position:relative;padding:1.1rem 1.1rem 2rem}.window{position:relative;width:100%;aspect-ratio:4/5;max-height:72vh;border:clamp(12px,2vw,22px) solid var(--frame);border-radius:45% 45% 4px 4px/16% 16% 4px 4px;background:var(--frame);box-shadow:0 1.8rem 3.6rem rgba(71,43,30,.25);transition:border-color var(--ease)}.view{position:absolute;inset:0;overflow:hidden;border-radius:39% 39% 0 0/14% 14% 0 0;background:linear-gradient(var(--sky-top),var(--sky-bottom));transition:background var(--ease)}.sun-moon{position:absolute;width:4.2rem;height:4.2rem;top:16%;right:15%;border-radius:50%;background:#ffe59a;box-shadow:0 0 36px #ffe59acc;transition:all var(--ease)}.stars{position:absolute;inset:0;opacity:0;transition:opacity var(--ease);background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:54px 47px}.cloud{position:absolute;width:7rem;height:2rem;border-radius:999px;background:var(--cloud);filter:drop-shadow(0 5px 8px rgba(50,60,65,.1));opacity:.82;transition:background var(--ease),opacity var(--ease);animation:drift 18s linear infinite alternate}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:3.6rem;height:3.6rem;left:1rem;bottom:.35rem}.cloud:after{width:2.8rem;height:2.8rem;right:1rem;bottom:.25rem}.cloud-one{top:27%;left:-10%}.cloud-two{top:42%;right:-7%;transform:scale(.72);animation-delay:-7s}.cloud-three{top:14%;left:24%;transform:scale(.55);opacity:0}@keyframes drift{to{translate:2.4rem 0}}
.landscape{position:absolute;left:-8%;right:-8%;bottom:0;transition:background var(--ease)}.landscape.far{height:38%;background:var(--land-far);clip-path:polygon(0 49%,18% 21%,35% 57%,53% 9%,72% 52%,87% 25%,100% 57%,100% 100%,0 100%)}.landscape.near{height:23%;background:var(--land-near);clip-path:polygon(0 28%,12% 42%,28% 18%,45% 48%,61% 24%,78% 44%,100% 17%,100% 100%,0 100%)}.city-lights{position:absolute;left:8%;right:8%;bottom:7%;height:17%;opacity:0;transition:opacity var(--ease);background:linear-gradient(90deg,transparent 0 4%,#142526 4% 13%,transparent 13% 18%,#1a2b2b 18% 30%,transparent 30% 35%,#142526 35% 48%,transparent 48% 56%,#1a2b2b 56% 69%,transparent 69% 76%,#142526 76% 91%,transparent 91%);clip-path:polygon(0 100%,0 70%,4% 70%,4% 42%,13% 42%,13% 61%,18% 61%,18% 28%,30% 28%,30% 68%,35% 68%,35% 48%,48% 48%,48% 72%,56% 72%,56% 35%,69% 35%,69% 62%,76% 62%,76% 22%,91% 22%,91% 68%,100% 68%,100% 100%)}.city-lights:after{content:"";position:absolute;inset:30% 5% 10%;opacity:.6;background-image:radial-gradient(circle,#f4d88c 0 1px,transparent 1.7px);background-size:20px 16px}.rain,.snow{position:absolute;inset:0;opacity:0;transition:opacity var(--ease)}.rain{overflow:hidden}.rain:before,.rain:after{content:"";position:absolute;inset:-25% 0;background-image:repeating-linear-gradient(168deg,transparent 0 24px,rgba(222,240,250,.58) 25px 26px,transparent 27px 48px);background-size:52px 94px;animation:rain 1s linear infinite}.rain:after{opacity:.38;scale:.7 1.1;animation-duration:1.35s;animation-delay:-.6s}@keyframes rain{to{translate:-12px 94px}}.snow{background-image:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#fff 0 3px,transparent 4px);background-size:48px 64px,82px 95px;animation:snow 7s linear infinite}@keyframes snow{to{background-position:35px 128px,-30px 205px}}
.glass-shine{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.24),transparent 28%,transparent 67%,rgba(255,255,255,.08));pointer-events:none}.frame{position:absolute;z-index:4;background:var(--frame);box-shadow:0 2px 3px rgba(44,28,23,.2)}.frame.vertical{width:clamp(10px,2vw,16px);height:100%;left:50%;top:0;translate:-50% 0}.frame.horizontal{height:clamp(10px,2vw,16px);width:100%;left:0;top:54%;translate:0 -50%}.window-sill{position:absolute;z-index:5;left:-8%;right:-8%;bottom:-2.1rem;height:2.5rem;border-radius:4px;background:linear-gradient(#8d6551,#614235);box-shadow:0 12px 20px rgba(66,40,28,.25)}.plant{position:absolute;right:-1rem;bottom:.2rem;width:6rem;height:9rem;z-index:6}.pot{position:absolute;bottom:0;left:1.2rem;width:4rem;height:3.4rem;background:#bd7255;clip-path:polygon(7% 0,93% 0,80% 100%,20% 100%)}.stem{position:absolute;bottom:3rem;left:3rem;width:3px;height:5.4rem;background:#55724c;transform:rotate(-4deg)}.leaf{position:absolute;width:2.5rem;height:1.2rem;border-radius:100% 0 100% 0;background:#66885d}.leaf-a{left:.6rem;top:1.5rem;rotate:25deg}.leaf-b{right:.3rem;top:2.7rem;rotate:155deg}.leaf-c{left:.5rem;top:4.2rem;rotate:42deg}.leaf-d{right:.2rem;top:5.2rem;rotate:140deg}
.weather-card{align-self:center;padding:clamp(1.2rem,3vw,2rem);border:1px solid rgba(255,255,255,.5);border-radius:1.5rem;background:rgba(255,250,244,.54);backdrop-filter:blur(16px);box-shadow:0 1rem 2rem rgba(72,45,33,.11)}.eyebrow{margin:0 0 .6rem;font-size:.82rem;font-weight:800;letter-spacing:.06em;opacity:.67}h1{margin:0;font-size:clamp(1.65rem,3.5vw,2.6rem);line-height:1.18;letter-spacing:-.04em}.description{margin:.8rem 0 0;line-height:1.65;opacity:.75}.temperature{margin:1.5rem 0 0;font-size:clamp(4.2rem,9vw,7rem);line-height:.85;font-weight:300;letter-spacing:-.09em}.temperature span{font-size:.55em;vertical-align:top}.fallback-panel{grid-column:2;padding:1rem 1.2rem;border-radius:1rem;background:rgba(255,250,244,.68)}.fallback-panel p{margin:0 0 .8rem;font-size:.9rem;line-height:1.5}.city-form{display:flex;gap:.5rem}.city-form select{width:100%;border:1px solid rgba(71,50,42,.3);border-radius:.7rem;padding:.7rem .8rem;background:#fffaf5}.city-form button{flex:none;border:0;border-radius:.7rem;padding:.7rem .85rem;color:#fff;background:#59433a;cursor:pointer}.text-button{border:0;padding:.65rem .4rem .2rem;color:#55433a;background:transparent;text-decoration:underline;cursor:pointer}.source-note{width:min(100%,980px);margin:1rem auto 0;text-align:right;font-size:.72rem;opacity:.68}.source-note a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.forecast-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:.7rem;padding:1rem;border:1px solid rgba(255,255,255,.5);border-radius:1.4rem;background:rgba(255,250,244,.48);backdrop-filter:blur(14px);box-shadow:0 .8rem 1.8rem rgba(72,45,33,.08)}.forecast-panel[hidden]{display:none}.hourly-section,.weekly-section{min-width:0;padding:.4rem}.weekly-section{padding-top:.8rem;border-top:1px solid rgba(63,50,45,.1)}.forecast-heading{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0 .2rem .65rem}.forecast-heading h2{margin:0;font-size:.92rem;letter-spacing:-.02em}.forecast-heading p{margin:.18rem 0 0;font-size:.68rem;opacity:.55}.hourly-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem}.weekly-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}.hour-button,.day-button{appearance:none;min-width:0;border:1px solid transparent;border-radius:1rem;color:var(--ink);background:rgba(255,255,255,.36);cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease;padding:.65rem .3rem;display:grid;place-items:center;gap:.2rem}.hour-button:hover,.day-button:hover{transform:translateY(-2px);background:rgba(255,255,255,.68)}.hour-button.is-selected,.day-button.is-selected{border-color:rgba(63,50,45,.42);background:rgba(255,255,255,.82);box-shadow:0 5px 14px rgba(72,45,33,.09)}.forecast-label{font-size:.68rem;font-weight:750;white-space:nowrap}.forecast-detail{font-size:.68rem;opacity:.65}.weather-icon{font-family:"Segoe UI Symbol","Apple Symbols",sans-serif;font-size:1.45rem;line-height:1;filter:saturate(.72)}.play-button{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(63,50,45,.16);border-radius:999px;padding:.5rem .75rem;color:var(--ink);background:rgba(255,255,255,.64);font-size:.72rem;font-weight:750;cursor:pointer;transition:background .2s ease,transform .2s ease}.play-button:hover{transform:translateY(-1px);background:#fff}.play-button.is-playing{color:#fff;background:#5f493f}.play-button.is-playing span:first-child{animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}
.window[data-weather=cloudy]{--sky-top:#9aa9af;--sky-bottom:#d3c8b5;--cloud:#d5dadb}.window[data-weather=rain]{--sky-top:#667784;--sky-bottom:#a3a6a2;--cloud:#aeb6ba;--land-far:#5f736c;--land-near:#3f5d54}.window[data-weather=snow]{--sky-top:#bdccd5;--sky-bottom:#eef0eb;--cloud:#e3e8e9;--land-far:#d8e2df;--land-near:#aebfba}.window[data-weather=cloudy] .cloud-three,.window[data-weather=rain] .cloud-three,.window[data-weather=snow] .cloud-three{opacity:.85}.window[data-weather=rain] .rain,.window[data-weather=snow] .snow{opacity:1}.window[data-weather=error]{--sky-top:#aaa49f;--sky-bottom:#d1c3b0;filter:saturate(.7)}.window[data-time=night]{--sky-top:#17243d;--sky-bottom:#46526b;--land-far:#263c3c;--land-near:#172b2b;--cloud:rgba(128,140,154,.72)}.window[data-time=night] .sun-moon{width:3.6rem;height:3.6rem;background:#f2edcf;box-shadow:0 0 25px rgba(242,237,207,.36),inset -11px -4px rgba(184,184,168,.25)}.window[data-time=night] .stars,.window[data-time=night] .city-lights{opacity:.8}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #315f7b;outline-offset:3px}
@media(max-width:760px){.room{padding:1rem}.weather-experience{grid-template-columns:1fr;margin-top:.5rem;gap:.7rem}.window-wrap{width:min(90vw,430px);justify-self:center;padding:.7rem .7rem 1.4rem}.window{aspect-ratio:4/4.5;max-height:56svh}.window-sill{bottom:-1.6rem;height:2rem}.weather-card{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding:1rem 1.2rem}.temperature{margin:0;font-size:3.6rem;flex:none}h1{font-size:1.5rem}.description{font-size:.86rem;margin-top:.4rem}.forecast-panel{padding:.75rem}.hourly-list{grid-template-columns:repeat(3,minmax(0,1fr))}.weekly-list{grid-template-columns:repeat(5,minmax(0,1fr))}.day-button{padding:.6rem .12rem}.day-button .forecast-label{font-size:.6rem}.forecast-heading p{display:none}.fallback-panel{grid-column:1}.plant{transform:scale(.78);transform-origin:bottom right}.source-note{text-align:center}}
@media(max-width:430px){.privacy-note{max-width:10rem;text-align:right}.temperature{font-size:3rem}.city-form{flex-wrap:wrap}.city-form button{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}