:root{--ink:#0f2536;--ink-2:#3b5568;--muted:#6a8193;--line:#dbe8f2;--bg:#f2f8fc;--card:#fff;--brand:#1560a8;--brand-2:#2fb5e8;--seen:#ef5a3c;--not:#8a9aa8;--zone:#1560a8;--warn-bg:#fff4e5;--warn-ink:#8a4b00;--info-bg:#e8f4fd;--info-ink:#0d4a7c;--radius:18px;--shadow:0 10px 30px rgba(15,60,100,.08)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;height:auto}
a{color:var(--brand)}
h1,h2,h3{line-height:1.25}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:8px 12px;z-index:50}
.skip:focus{left:8px;top:8px}
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top__in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--brand);font-family:"Jua",sans-serif;font-size:21px;white-space:nowrap;min-width:0}
.brand img{width:52px;height:auto;flex:0 0 auto}
.top__nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.top__nav a{padding:6px 10px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:700}
.top__nav a:hover,.top__nav a:focus-visible{background:var(--info-bg);color:var(--brand)}
.hero{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;justify-content:center;padding:28px 16px 36px;background:#1560a8}
.hero__scene{position:absolute;inset:0}
.hero__scene svg{width:100%;height:100%;display:block}
.hero__in{position:relative;z-index:1;width:100%;max-width:720px;text-align:center;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:22px 22px 20px;box-shadow:0 20px 50px rgba(4,30,60,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.badge{display:inline-block;margin:0 0 6px;padding:4px 12px;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;font-weight:700}
.hero__title{font-family:"Jua",sans-serif;font-weight:400;font-size:clamp(34px,6vw,52px);margin:2px 0 8px;color:#0a4e86}
.hero__lead{margin:0 auto 14px;max-width:600px;color:var(--ink-2)}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 8px;min-width:0}
.stat--hot{border-color:#ffd0c4;background:#fff7f4}
.stat__k{display:block;font-size:12px;color:var(--muted);font-weight:700}
.stat__v{display:block;font-size:16px;color:var(--ink)}
.stat--hot .stat__v{color:var(--seen)}
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 8px}
.grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:18px;margin-bottom:18px;align-items:start}
.grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0;margin-bottom:18px}
.grid>.panel{margin-bottom:0}
.panel h2{font-family:"Jua",sans-serif;font-weight:400;font-size:24px;margin:0 0 10px;color:#0a4e86}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.muted,.live{font-size:13px;color:var(--muted)}
.live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2ecc71;margin-right:6px;vertical-align:1px}
.live--off::before{background:var(--not)}
.map{height:480px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#d9eef9}
.map.is-picking{outline:3px solid var(--seen);outline-offset:2px}
.map.is-picking .leaflet-container,.map.is-picking{cursor:crosshair}
.map__nojs{padding:16px}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 4px;padding:0;font-size:14px;color:var(--ink-2)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.dot--seen{background:var(--seen)}
.dot--not{background:var(--not)}
.dot--zone{background:#fff;border:3px solid var(--zone)}
.note{font-size:13px;color:var(--muted);margin:8px 0 0}
.rform{display:grid;gap:12px}
.kind{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kind legend{font-weight:700;margin-bottom:6px;padding:0}
.kind__opt{position:relative;display:block}
.kind__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kind__opt span{display:block;text-align:center;padding:14px 8px;border-radius:14px;border:2px solid var(--line);font-weight:700;font-size:17px;background:#fff;transition:all .15s}
.kind__opt--seen input:checked+span{border-color:var(--seen);background:#fff1ec;color:#c23b1f}
.kind__opt--not input:checked+span{border-color:var(--not);background:#f1f4f6;color:#44525e}
.kind__opt input:focus-visible+span{outline:3px solid var(--brand-2);outline-offset:2px}
.field{display:grid;gap:6px}
.field__k{font-weight:700;font-size:15px}
.field__k small{font-weight:400;color:var(--muted)}
select,input[type=text],input[type=email]{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #c9d9e6;border-radius:12px;background:#fff;color:var(--ink);min-width:0}
select:focus,input[type=text]:focus,input[type=email]:focus,.inq textarea:focus{outline:3px solid rgba(47,181,232,.35);border-color:var(--brand-2)}
.pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick__info{font-size:13px;color:var(--muted)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;border-radius:12px;padding:10px 16px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:#0f4f8c}
.btn--primary:disabled{opacity:.6;cursor:wait}
.btn--ghost{background:#fff;border-color:#c9d9e6;color:var(--brand)}
.btn--ghost[aria-pressed=true]{background:#fff1ec;border-color:var(--seen);color:#c23b1f}
.btn--wide{width:100%;padding:14px 16px;font-size:17px}
.rmsg{margin:0;font-weight:700}
.rmsg:empty{display:none}
.rmsg--ok{color:#138a4a}
.rmsg--err{color:#c23b1f}
.news{margin:0;padding:0;list-style:none;counter-reset:n}
.news__item{counter-increment:n;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.news__item:first-child{border-top:0}
.news__item::before{content:counter(n);grid-row:1/3;width:26px;height:26px;border-radius:50%;background:var(--info-bg);color:var(--brand);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.news__a{font-weight:700;color:var(--ink);text-decoration:none}
.news__a:hover,.news__a:focus-visible{color:var(--brand);text-decoration:underline}
.news__meta{font-size:13px;color:var(--muted)}
.empty{color:var(--muted);list-style:none}
.feed{list-style:none;margin:0;padding:0}
.feed__item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:9px 0 9px 12px;border-top:1px solid var(--line);border-left:4px solid var(--not)}
.feed__item:first-child{border-top:0}
.feed__item--seen{border-left-color:var(--seen)}
.feed__item b{font-size:15px}
.feed__item--seen b{color:#c23b1f}
.feed__item span{font-size:14px;color:var(--ink-2)}
.feed__item q{flex-basis:100%;font-size:14px;color:var(--ink-2)}
.notices{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notice{padding:12px 14px;border-radius:12px;font-weight:500}
.notice--warn{background:var(--warn-bg);color:var(--warn-ink)}
.notice--info{background:var(--info-bg);color:var(--info-ink)}
.zones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zone{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:14px}
.zone--main{border-color:#ffd0c4;background:#fff7f4}
.zone__code{flex:0 0 32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.zone div b{display:block}
.zone div span{font-size:14px;color:var(--ink-2)}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.faq__item{padding:14px;border-radius:14px;background:#f7fbfe;border:1px solid var(--line)}
.faq__q{margin:0 0 6px;font-size:17px;color:#0a4e86}
.faq__a{margin:0;color:var(--ink-2)}
.foot{background:#0b2f52;color:#cfe3f3;margin-top:10px}
.foot__in{max-width:1180px;margin:0 auto;padding:22px 16px 28px;font-size:14px}
.foot__in p{margin:0 0 8px}
.foot__brand{display:flex;align-items:center;gap:8px;color:#fff}
.foot__brand img{width:42px}
.foot__sub{font-size:11px;opacity:.6}
.zwrap{position:relative;display:block;width:0;height:0}
.zpin{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--zone);box-sizing:border-box}
.zpin--main{border-color:var(--seen)}
.zlabel{position:absolute;left:0;bottom:10px;background:#fff;border:2px solid var(--zone);border-radius:999px;padding:2px 8px;font-weight:700;font-size:12px;line-height:1.4;color:var(--zone);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.15);transform:translateX(-50%)}
.zlabel--main{border-color:var(--seen);color:#c23b1f}
.zicon{background:none;border:0}
.leaflet-popup-content{font-family:inherit;font-size:14px;line-height:1.5}
.nf{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px;text-align:center}
.nf__box{background:#fff;border-radius:22px;padding:28px 22px;box-shadow:var(--shadow);max-width:420px}
.nf__box h1{font-family:"Jua",sans-serif;font-weight:400;color:#0a4e86}
@media (max-width:980px){.grid{grid-template-columns:minmax(0,1fr)}.map{height:420px}}
@media (max-width:760px){.grid--two,.faq,.zones{grid-template-columns:minmax(0,1fr)}.top__nav a{padding:6px 8px;font-size:13px}.hero{min-height:0;padding:18px 12px 150px}.hero__in{padding:18px 14px 16px;border-radius:22px}.stat__v{font-size:14px}.map{height:360px}.panel{padding:16px 14px}}
@media (max-width:480px){.top__in{flex-wrap:wrap;padding:8px 12px;gap:4px}.brand{font-size:19px}.top__nav{width:100%;justify-content:space-between}.stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.stat--hot{grid-column:1/-1}.hero__lead{font-size:15px}.map{height:320px}.kind__opt span{padding:12px 6px;font-size:16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.patrol{animation:patrol 24s ease-in-out infinite}
.flip{transform-box:fill-box;transform-origin:50% 50%;animation:flip 24s step-end infinite}
.swim{animation:swim 26s linear infinite}
.swim--baby{animation-duration:34s;animation-delay:-12s}
.bob{animation:bob 3s ease-in-out infinite}
.bob--slow{animation-duration:4.2s}
.bk-tail{transform-box:fill-box;transform-origin:100% 50%;animation:tail .6s ease-in-out infinite alternate}
.bk-fin{transform-box:fill-box;transform-origin:50% 0;animation:flap 1.2s ease-in-out infinite alternate}
.bk-eye{transform-box:fill-box;transform-origin:50% 50%;animation:blink 4.5s infinite}
.fin{animation:fin 30s linear infinite;animation-delay:-8s}
.wave--back{animation:wave 16s linear infinite}
.wave--mid{animation:wave 11s linear infinite reverse}
.wave--front{animation:wave 8s linear infinite}
.cloud--a{animation:drift 70s linear infinite}
.cloud--b{animation:drift 95s linear infinite;animation-delay:-40s}
.cloud--c{animation:drift 120s linear infinite;animation-delay:-70s}
.gull{animation:gull 2.2s ease-in-out infinite alternate}
.gull--b{animation-delay:-.7s}
.gull--c{animation-delay:-1.3s}
.gulls{animation:glide 40s linear infinite}
.sun{animation:glow 6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%}
.rays{animation:shimmer 5s ease-in-out infinite alternate}
.spark{transform-box:fill-box;transform-origin:50% 50%;animation:twinkle 2.6s ease-in-out infinite;opacity:0}
.s2{animation-delay:-.6s}
.s3{animation-delay:-1.2s;animation-duration:3.2s}
.s4{animation-delay:-1.8s}
.s5{animation-delay:-2.2s;animation-duration:2.2s}
.bubble{animation:bubble 7s ease-in infinite;opacity:0}
.b2{animation-delay:-1.5s;animation-duration:6s}
.b3{animation-delay:-3s;animation-duration:8s}
.b4{animation-delay:-4.5s}
.b5{animation-delay:-2s;animation-duration:9s}
.b6{animation-delay:-5.5s;animation-duration:6.5s}
@keyframes patrol{0%{transform:translateX(420px)}46%{transform:translateX(1060px)}50%{transform:translateX(1060px)}96%{transform:translateX(420px)}100%{transform:translateX(420px)}}
@keyframes flip{0%{transform:scaleX(1)}48%{transform:scaleX(-1)}98%{transform:scaleX(1)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.95;transform:scale(1)}}
@keyframes swim{from{transform:translateX(-260px)}to{transform:translateX(1700px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.5deg)}}
@keyframes flap{from{transform:rotate(-8deg)}to{transform:rotate(12deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes tail{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes fin{from{transform:translate(1500px,556px)}to{transform:translate(-80px,556px)}}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
@keyframes drift{from{transform:translateX(-400px)}to{transform:translateX(1500px)}}
@keyframes glide{from{transform:translateX(-200px)}to{transform:translateX(1300px)}}
@keyframes gull{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-8px) scaleY(.6)}}
@keyframes glow{from{transform:scale(1);opacity:.85}to{transform:scale(1.08);opacity:1}}
@keyframes shimmer{from{opacity:.5}to{opacity:1}}
@keyframes bubble{0%{transform:translateY(0);opacity:0}10%{opacity:.8}100%{transform:translateY(-320px);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero__scene *{animation:none!important}.patrol{transform:translateX(720px)}.fin{transform:translate(1100px,556px)}}
.dot--press{border-radius:3px;background:#0f2536}
.picon{background:none;border:0}
.pmark{position:absolute;left:0;top:10px;transform:translateX(-50%);background:#0f2536;color:#fff;border:2px solid #fff;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;line-height:1.4;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.press{list-style:none;margin:0;padding:0}
.press__item{display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:4px 12px;padding:10px 0;border-top:1px solid var(--line)}
.press__item:first-child{border-top:0}
.press__date{font-weight:700;color:var(--ink);font-size:14px}
.press__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.press__body span{font-size:14px;color:var(--ink-2)}
.press__body a{font-size:13px;color:var(--brand);overflow-wrap:anywhere}
.feed__item .feed__who{font-weight:700;color:var(--ink)}
.ex{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px;margin-left:4px}
@media (max-width:420px){.press__item{grid-template-columns:minmax(0,1fr)}}
.ppop p{margin:6px 0 0;font-size:13px;line-height:1.45}
.btn--foot{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);padding:8px 16px;font-size:14px}
.btn--foot:hover,.btn--foot:focus-visible{background:rgba(255,255,255,.12)}
.inq{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:0;border-radius:var(--radius);padding:0;box-shadow:0 20px 60px rgba(0,0,0,.3);color:var(--ink);background:var(--card)}
.inq::backdrop{background:rgba(15,37,54,.55)}
.inq__form{padding:20px}
.inq__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.inq__head h2{margin:0}
.inq__x{border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--muted);padding:4px 8px}
.inq textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #c9d9e6;border-radius:12px;resize:vertical;min-height:120px}
.inq__agree{align-items:flex-start;line-height:1.5;color:var(--ink-2)}
.inq__agree input{margin-top:4px;flex:0 0 auto}