
:root{--night:#0E1430;--navy:#1E2A5A;--blue:#5883FD;--sky:#8FB0FF;--sun:#FFD84D;--ear:#FF9DB5;--paper:#FBFAF6;--ink2:#4A5274;--line:#E6E3DA;
--mono:'SF Mono',Menlo,Consolas,'Pretendard Variable',Pretendard,monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--paper);color:var(--navy);word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
/* 밤하늘 머리띠 */
.sky{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 0%,#2C3F8F 0%,transparent 60%),linear-gradient(180deg,#0B1028 0%,#16204F 100%);color:#fff;padding:28px 0 0}
.sky .wrap{position:relative}
.rain{position:absolute;inset:0;pointer-events:none}
.rain i{position:absolute;top:-40px;width:1.5px;height:26px;background:linear-gradient(transparent,rgba(143,176,255,.55));animation:fall linear infinite}
@keyframes fall{to{transform:translateY(520px)}}
.rain i:nth-child(1){left:0%;animation-delay:0.00s;animation-duration:1.10s}.rain i:nth-child(2){left:37%;animation-delay:0.29s;animation-duration:1.28s}.rain i:nth-child(3){left:74%;animation-delay:0.58s;animation-duration:1.46s}.rain i:nth-child(4){left:11%;animation-delay:0.87s;animation-duration:1.64s}.rain i:nth-child(5){left:48%;animation-delay:1.16s;animation-duration:1.82s}.rain i:nth-child(6){left:85%;animation-delay:1.45s;animation-duration:1.10s}.rain i:nth-child(7){left:22%;animation-delay:0.14s;animation-duration:1.28s}.rain i:nth-child(8){left:59%;animation-delay:0.43s;animation-duration:1.46s}.rain i:nth-child(9){left:96%;animation-delay:0.72s;animation-duration:1.64s}.rain i:nth-child(10){left:33%;animation-delay:1.01s;animation-duration:1.82s}.rain i:nth-child(11){left:70%;animation-delay:1.30s;animation-duration:1.10s}.rain i:nth-child(12){left:7%;animation-delay:1.59s;animation-duration:1.28s}.rain i:nth-child(13){left:44%;animation-delay:0.28s;animation-duration:1.46s}.rain i:nth-child(14){left:81%;animation-delay:0.57s;animation-duration:1.64s}.rain i:nth-child(15){left:18%;animation-delay:0.86s;animation-duration:1.82s}.rain i:nth-child(16){left:55%;animation-delay:1.15s;animation-duration:1.10s}.rain i:nth-child(17){left:92%;animation-delay:1.44s;animation-duration:1.28s}.rain i:nth-child(18){left:29%;animation-delay:0.13s;animation-duration:1.46s}.rain i:nth-child(19){left:66%;animation-delay:0.42s;animation-duration:1.64s}.rain i:nth-child(20){left:3%;animation-delay:0.71s;animation-duration:1.82s}.rain i:nth-child(21){left:40%;animation-delay:1.00s;animation-duration:1.10s}.rain i:nth-child(22){left:77%;animation-delay:1.29s;animation-duration:1.28s}.rain i:nth-child(23){left:14%;animation-delay:1.58s;animation-duration:1.46s}.rain i:nth-child(24){left:51%;animation-delay:0.27s;animation-duration:1.64s}.rain i:nth-child(25){left:88%;animation-delay:0.56s;animation-duration:1.82s}.rain i:nth-child(26){left:25%;animation-delay:0.85s;animation-duration:1.10s}
@media (prefers-reduced-motion:reduce){.rain i{animation:none;display:none}}
.station{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--sky);align-items:center}
.sky h1{margin-top:22px;font-size:clamp(40px,8.5vw,68px);line-height:1.05;font-weight:800;letter-spacing:-.04em}
.sky>.wrap>p{margin-top:16px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)}
.gauges{display:flex;gap:10px;margin-top:26px;position:relative;z-index:1;max-width:calc(100% - 150px)}
.gauges div{flex:1;min-width:0;border:1px solid rgba(143,176,255,.3);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04)}
.gauges b{display:block;font-size:26px;font-weight:800;margin-top:2px}
.gauges small{display:block;font-size:11px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pig{position:absolute;right:16px;bottom:-14px;width:150px;border-radius:50% 50% 0 0;filter:drop-shadow(0 -6px 24px rgba(88,131,253,.5))}
.sky:not(.small){padding-bottom:0}.sky:not(.small) .wrap{padding-bottom:34px}
.wx{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:15px;line-height:1;flex:none;letter-spacing:0}
.wx.sun{background:var(--sun);color:#7A5A00}.wx.umb{background:var(--sky);color:var(--night)}.wx.bolt{background:var(--ear);color:#5A1530}.wx.cloud{background:#DDE3F7;color:var(--navy)}
/* 범례·검색 */
.tools-bar{position:sticky;top:0;z-index:5;background:var(--paper);padding:16px 0 12px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.legend{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.legend button{flex:none;font:inherit;font-size:13px;font-weight:700;color:var(--ink2);background:transparent;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}
.legend button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.find input{width:100%;font:inherit;font-size:15px;border:0;border-bottom:2px solid var(--navy);background:transparent;padding:8px 2px;outline:0;color:var(--navy)}
.find input::placeholder{color:#A9A79E}
/* 날짜별 줄 */
.day{margin-top:26px}
.day[hidden]{display:none}
.day h2{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:#8C8A80;margin-bottom:8px}
.day h2::after{content:'';flex:1;height:1px;background:var(--line)}
.row{display:grid;grid-template-columns:28px 76px 1fr 20px;gap:14px;align-items:center;padding:14px 4px;border-bottom:1px dashed var(--line);transition:background .15s}
.row:hover{background:#F2F0E8}
.row[hidden]{display:none}
.row img{width:76px;height:95px;object-fit:cover;border-radius:10px;box-shadow:0 6px 14px rgba(14,20,48,.14)}
.txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.txt b{font-size:17px;font-weight:800;line-height:1.35;letter-spacing:-.02em}
.txt .sub{font-size:14px;line-height:1.5;color:var(--ink2)}
.txt .tools{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.02em}
.go{font-size:18px;color:#B9B7AE;transition:transform .15s}
.row:hover .go{transform:translateX(3px);color:var(--navy)}
.empty{text-align:center;color:var(--ink2);padding:48px 0}
.list{padding-bottom:40px}
/* 상세 */
.sky.small{padding:22px 0 34px}
.back{display:inline-block;font-size:13px;font-weight:700;color:var(--sky);margin-bottom:22px}
.dh{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:end}
.dh img{width:100%;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.dh h1{margin-top:12px;font-size:clamp(26px,5vw,36px);line-height:1.2;font-weight:800;letter-spacing:-.03em}
.dh p{margin-top:8px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.75)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--sky);border:1px solid rgba(143,176,255,.4);border-radius:6px;padding:3px 7px;white-space:nowrap}
.igbtn{display:inline-block;margin-top:16px;background:var(--sun);color:var(--night);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:800}
.detail{padding-top:26px;padding-bottom:40px}
.ticket{position:relative;background:#fff;border:1.5px solid var(--navy);border-radius:4px;margin-bottom:16px;box-shadow:4px 4px 0 var(--navy)}
.th{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1.5px dashed var(--navy)}
.no{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;background:var(--navy);color:#fff;padding:3px 7px;border-radius:3px;flex:none}
.lb{flex:1;font-size:14px;font-weight:800;min-width:0}
.copy{font:inherit;font-size:13px;font-weight:800;border:1.5px solid var(--navy);background:var(--sun);color:var(--navy);border-radius:6px;padding:6px 12px;cursor:pointer;flex:none}
.copy.done{background:var(--navy);color:#fff}
pre{white-space:pre-wrap;word-break:break-word;font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:15px;line-height:1.7;padding:16px 16px 18px;color:var(--navy)}
.note{border-left:3px solid var(--blue);padding:4px 0 4px 16px;margin:22px 0}
.note h3{font-size:13px;font-family:var(--mono);letter-spacing:.08em;color:var(--blue);margin-bottom:8px;font-weight:700}
.note ol{padding-left:18px}
.note li{font-size:15px;line-height:1.65;margin:3px 0;color:var(--ink2)}
.note p{font-size:15px;line-height:1.7;color:var(--ink2)}
.src ul{list-style:none}.src li{margin:5px 0}
.src a{font-size:14px;font-weight:700;color:var(--navy);border-bottom:1.5px solid var(--sun)}
/* 비밀번호 문 */
.sky.gate{min-height:100vh;padding-top:48px}.sky.gate .wrap{padding-bottom:180px}
.gateform{margin-top:30px;max-width:420px}.gateform label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--sky);margin-bottom:8px}
.gaterow{display:flex;gap:8px}.gaterow input{flex:1;min-width:0;font:inherit;font-size:17px;padding:13px 14px;border-radius:10px;border:1.5px solid rgba(143,176,255,.45);background:rgba(255,255,255,.08);color:#fff;outline:0}.gaterow input:focus{border-color:var(--sun)}
.gaterow button{font:inherit;font-size:15px;font-weight:800;border:0;border-radius:10px;padding:0 20px;background:var(--sun);color:var(--night);cursor:pointer}
.err{margin-top:10px;font-size:14px;color:var(--ear);font-weight:700}.hint{margin-top:28px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.6)}.hint a{color:var(--sky);font-weight:700}
footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:30px 20px 44px;border-top:1px solid var(--line);margin-top:10px}
footer img{width:40px;height:40px;border-radius:50%}
footer b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
footer span{font-size:12px;color:#8C8A80}footer a{font-weight:700;color:var(--navy)}
@media (min-width:720px){.tools-bar{flex-direction:row;align-items:center}.find{flex:0 0 220px}}
@media (max-width:560px){.pig{width:96px;right:8px}.gauges{max-width:calc(100% - 96px);gap:6px}.gauges div{padding:8px}.gauges b{font-size:20px}
.row{grid-template-columns:24px 64px 1fr;gap:12px}.row img{width:64px;height:80px}.go{display:none}.wx{width:24px;height:24px;font-size:13px}.txt b{font-size:15px}.txt .sub{font-size:13px}
.dh{grid-template-columns:96px 1fr;gap:16px;align-items:start}}
