/* 공공나우 v4 — 나우 공용 틀(맛집나우 v10·계산나우 v15 와 같은 값)을 한 파일로 모았다. 나우마다 다른 것은 주색 4개(--acc --on-acc --acc-soft --acc-ink)와 히어로 색뿐.
   주색 = 청록 #0B7C72 하나(11-10 4차 형님 확정 · 다크 #3CC9B5). 남색·초록 안과 시안 막대 선택지는 걷어냈다. */
:root{--acc:#0B7C72;--on-acc:#fff;--acc-soft:#E0F3F0;--acc-ink:#08675F;--h1:#06524C;--h2:#0A6E66;--h3:#0B7C72;--logo-p:#0B6F6A}
:root[data-theme="dark"]{--acc:#3CC9B5;--on-acc:#04201D;--acc-soft:#123430;--acc-ink:#6FE0CF;--logo-p:#3CC9B5}

:root{--bg:var(--now-page);--card:#fff;--ink:#17202A;--ink2:#333D4B;--sub:var(--now-muted);--faint:var(--now-muted);--line:var(--now-tint-2);--soft:var(--now-tint);
 --shadow-up:0 12px 32px rgba(20,40,40,.12);--hd:rgba(255,255,255,.92);--r:20px;--r2:14px;--w:1360px;--rail:340px;--gap:18px;
 --glass:rgba(255,255,255,.55);--glass-line:rgba(255,255,255,.85);--glass-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35);
 --glass-sh:0 1px 2px rgba(20,60,60,.05),0 8px 24px rgba(20,60,60,.07);--glass-blur:blur(20px) saturate(170%);--glass-pop:rgba(255,255,255,.86);
 --solid:#fff;--hero-glass:rgba(0,24,22,.24);--male:#3F6FD1;--female:#D0647A;--warn:#A23F06;--ok:#067647;color-scheme:light}
:root[data-theme="dark"]{--bg:#0E1214;--card:#191E21;--ink:#EEF2F4;--ink2:#D0D7DC;--sub:var(--now-muted);--faint:var(--now-muted);--line:#2B3236;--soft:#22292D;
 --shadow-up:0 12px 32px rgba(0,0,0,.5);--hd:rgba(16,20,22,.9);--glass:rgba(32,38,42,.55);--glass-line:rgba(255,255,255,.11);--glass-hi:inset 0 1px 0 rgba(255,255,255,.13);
 --glass-sh:0 8px 24px rgba(0,0,0,.35);--glass-pop:rgba(28,33,37,.9);--solid:#1A1F22;--male:#5A86DE;--female:#D86C84;--warn:#F5A15C;--ok:#5FD39A;color-scheme:dark}

*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 45% at 88% 0,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),radial-gradient(50% 40% at 0 62%,color-mix(in srgb,#3B8EEA 14%,transparent),transparent 70%),radial-gradient(45% 35% at 100% 100%,color-mix(in srgb,#19A974 12%,transparent),transparent 70%)}
a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
h1{font-size:32px;line-height:1.25;font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
h2{font-size:21px;line-height:1.35;font-weight:750;letter-spacing:-.02em;margin:0}
h3{font-size:17px;line-height:1.4;font-weight:700;margin:0}
.lead{color:var(--sub);font-size:16px;margin:0 0 22px}
small,.s{font-size:13px;color:var(--sub)}
.num{font-variant-numeric:tabular-nums}

/* 머리 */
.hd{position:sticky;top:0;z-index:20;background:var(--hd)}
.hd-in{max-width:var(--w);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:22px}
.logo{display:inline-flex;align-items:center;flex:none;color:var(--ink)}
.logo .lockup{width:150px;height:auto}
.lockup .lg-p{fill:var(--logo-p)}.lockup .lg-a{fill:var(--acc-ink)}.lockup .lg-b{fill:currentColor}
.nav{display:flex;gap:2px;min-width:0}
.nav a{padding:8px 13px;font-size:15px;white-space:nowrap;font-weight:650}
:root{--navt:var(--acc-ink)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.q{position:relative;width:280px;min-width:0}
.q input{width:100%;height:42px;padding:0 14px 0 40px;border:0;border-radius:21px;background:var(--soft);font-size:15px}
.q input::placeholder{color:var(--faint)}
.q>svg{position:absolute;left:14px;top:12px;width:18px;height:18px;color:var(--faint);pointer-events:none}
.res{position:absolute;left:0;right:0;top:50px;border-radius:var(--r2);z-index:30;max-height:360px;overflow:auto;padding:6px}
.res a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:15px}
.res a:hover,.res a.on{background:var(--soft)}
.thm{width:42px;height:42px;padding:0;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;flex:none}

/* 틀: 본문 + 오른쪽 칸 */
#p-hero:empty{display:none}
.layout{max-width:var(--w);margin:0 auto;padding:28px 24px 64px;display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:32px}
#page{min-width:0}
.rail{min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.layout.full{grid-template-columns:minmax(0,1fr)}.layout.full .rail{display:none}

/* 칸(유리) */
.card,.tile,#p-faq details,.go-n a,.stat{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--glass-sh);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--r)}
.card{padding:22px;min-width:0}.card.sm{padding:18px}
.sec{margin-top:40px}
.sh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sh .s{flex:none}
.grid2,.grid3,.grid4{display:grid;gap:var(--gap)}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button,.chips a{height:40px;padding:0 16px;border:0;border-radius:20px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line),var(--glass-sh);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);font-size:14.5px;font-weight:650;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chips [aria-pressed="true"],.chips a.on{background:var(--ink);color:var(--bg);box-shadow:none}
.chips b{font-weight:800}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:var(--acc-soft);color:var(--acc-ink);font-size:12.5px;font-weight:700;white-space:nowrap}
.chip.g{background:var(--soft);color:var(--sub)}
.chip.ex{background:color-mix(in srgb,var(--warn) 14%,var(--card));color:var(--warn)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 20px;border:0;border-radius:14px;background:var(--acc);color:var(--on-acc);font-weight:700;font-size:15.5px}
.btn.gh{background:var(--soft);color:var(--ink)}
.crumb{font-size:14px;font-weight:600;color:var(--sub);margin:0 0 8px}.crumb a:hover{color:var(--ink)}
.ttl{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.ttl h1{min-width:0}.ttl .nsh-btn{flex:none}
.asof{font-size:12.5px;color:var(--faint);margin:6px 0 0}
.ex-note{font-size:13.5px;color:var(--warn);font-weight:650;margin:0 0 12px}

/* 숫자 칸 */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{display:flex;flex-direction:column;gap:2px;padding:16px 16px 14px;border-radius:18px;min-width:0;transition:transform .25s,box-shadow .2s}
.stat .k{font-size:13.5px;font-weight:650;color:var(--sub);display:flex;align-items:center;gap:6px}
.stat .k i{font-style:normal;font-size:17px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.stat .v em{font-style:normal;font-size:14px;font-weight:700;color:var(--ink2);margin-left:2px}
.stat .d{font-size:13px;color:var(--sub)}
.stat .d b{color:var(--acc-ink)}

/* 주제 칸 */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:18px;min-width:0;transition:transform .25s,box-shadow .2s}
.tile .ic{width:40px;height:40px;border-radius:12px;background:var(--acc-soft);color:var(--acc-ink);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:6px}
.tile b{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.tile span{font-size:13.5px;color:var(--sub);line-height:1.45}
.tile .soon{color:var(--warn);font-weight:700}

/* 목록 */
.lst{list-style:none;margin:0;padding:0}
.lst li{border-top:1px solid var(--line);padding:14px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:start}
.lst li:first-child{border-top:0;padding-top:2px}
.lst .n{font-size:16px;font-weight:750;letter-spacing:-.02em}
.lst .m{grid-column:1;font-size:13.5px;color:var(--sub)}
.lst .r{grid-row:1/3;grid-column:2;text-align:right;font-size:13.5px;font-weight:700;color:var(--acc-ink);white-space:nowrap}
.lst .r small{display:block;font-weight:500}
.lst .tg{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.wk{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:6px}
.wk span{border-radius:8px;background:var(--soft);font-size:11.5px;text-align:center;padding:4px 2px;color:var(--sub);line-height:1.3}
.wk span b{display:block;color:var(--ink2);font-size:11.5px}
.wk span.on{background:var(--acc-soft);color:var(--acc-ink)}.wk span.on b{color:var(--acc-ink)}
.wk span.today{box-shadow:inset 0 0 0 2px var(--acc)}
.more-row{text-align:center;margin-top:14px}
.nmore{cursor:pointer}

/* 막대 그림(한 계열 = 주색 한 색, 값 글자는 먹색) */
.bars{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px 10px;align-items:center;font-size:14px}
.bars .bl{white-space:nowrap;color:var(--ink2);font-weight:600}
.bars .bt{height:14px;border-radius:0 4px 4px 0;background:var(--soft);overflow:hidden}
.bars .bt i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--acc);transform-origin:left;animation:growx .8s cubic-bezier(.2,.9,.3,1) both}
.bars .me .bl,.bars .me+.bt+.bv{color:var(--acc-ink);font-weight:800}
.bars .bv{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.bars .row-hit{display:contents}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pyr{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);row-gap:4px;align-items:center}
.pyr .lb{text-align:center;font-size:12.5px;color:var(--ink2);font-weight:600}
.pyr .tr{height:16px;display:flex;align-items:center;gap:6px}.pyr .tr.m{flex-direction:row-reverse}
.pyr .bar{height:100%;border-radius:4px;min-width:2px}
.pyr .m .bar{background:var(--male);border-radius:4px 0 0 4px}.pyr .f .bar{background:var(--female);border-radius:0 4px 4px 0}
.pyr .pc{white-space:nowrap;flex:none;font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink2);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* 표 */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{font-size:12.5px;color:var(--sub);font-weight:700;text-align:left;padding:0 6px 8px}
.tbl td{padding:9px 6px;border-top:1px solid var(--line);vertical-align:top}
.tbl td.nr,.tbl th.nr{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.me td{background:var(--acc-soft);font-weight:700}
.tbl a{font-weight:700}
.tbl-wrap{overflow-x:auto}

/* 지도 */
.kmap svg{width:100%;height:auto;max-height:520px}
.kmap path{fill:var(--soft);stroke:var(--card);stroke-width:.6;transition:fill .15s}
.kmap a path{fill:color-mix(in srgb,var(--acc) 26%,var(--card))}
.kmap a:hover path,.kmap a:focus-visible path{fill:color-mix(in srgb,var(--acc) 55%,var(--card))}
.kmap a.cur path{fill:var(--acc)}
.kmap text{font-size:9px;font-weight:800;fill:var(--ink);pointer-events:none;paint-order:stroke;stroke:var(--card);stroke-width:2.4px}
.sgg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.sgg-grid a{display:flex;flex-direction:column;padding:10px 12px;border-radius:12px;background:var(--soft);font-weight:700;font-size:14.5px;transition:transform .2s}
.sgg-grid a small{font-weight:500}
.sgg-grid a.cur{background:var(--acc);color:var(--on-acc)}.sgg-grid a.cur small{color:var(--on-acc)}

/* 다른 나우로 */
.go-n{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.go-n a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;min-width:0;transition:transform .25s,box-shadow .2s}
.go-n a i{font-style:normal;font-size:24px;flex:none}
.go-n a span{min-width:0;display:flex;flex-direction:column}
.go-n a b{font-size:15px;font-weight:800}
.go-n a small{font-size:13px}
.go-n a em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--faint);flex:none}

/* 히어로 */
.hero{background:radial-gradient(900px 420px at 88% -10%,var(--h3) 0,transparent 60%),linear-gradient(120deg,var(--h1),var(--h2) 60%,var(--h3));color:#fff}
.hero .in{max-width:var(--w);margin:0 auto;padding:44px 24px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.hero h1{font-size:42px;color:#fff;margin:0 0 10px}
.hero p{margin:0;font-size:17px;color:rgba(255,255,255,.92)}
.hero .hs{margin-top:22px;max-width:620px;position:relative}
.hero .hs input{width:100%;height:56px;border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:0 20px;font-size:17px;background:rgba(255,255,255,.92);color:#17202A;box-shadow:0 8px 24px rgba(0,30,30,.25)}
.hero .hs .res{top:62px;color:var(--ink)}
.hero .glass-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hero .glass-row a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700;color:#fff;background:var(--hero-glass);border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hcards{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px}
.hcard{padding:16px;border-radius:20px;background:var(--hero-glass);border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 40px rgba(0,30,30,.25);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;transition:transform .25s}
.hcard small{display:block;color:rgba(255,255,255,.92);font-size:12.5px;font-weight:700}
.hcard b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin:4px 0}
.hcard span{display:block;font-size:13px;color:rgba(255,255,255,.92)}

/* 띠 */
.band{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding:16px 20px;border-radius:var(--r2);color:#fff;background:linear-gradient(100deg,var(--h1),var(--h2) 60%,var(--h3));box-shadow:0 8px 22px color-mix(in srgb,var(--h2) 30%,transparent);transition:transform .2s}
.band span{min-width:0;font-size:16.5px;font-weight:800;line-height:1.35}
.band small{display:block;color:rgba(255,255,255,.92);font-size:13px;font-weight:500}
.band .go{flex:none;padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:800;background:var(--hero-glass);border:1px solid rgba(255,255,255,.4)}

/* 광고 자리: 광고↔누를 것 40px */
.slot{margin:40px 0;min-width:0}
.ad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;width:100%;margin:0 auto;padding:12px;border-radius:var(--r2);font-weight:700;font-size:15px;color:var(--ink2);background:var(--soft);overflow:hidden}
.ad small{font-weight:500;font-size:12.5px;color:var(--sub)}
.ad-t{position:absolute;left:10px;top:8px;font-size:10.5px;font-weight:600;color:var(--faint)}
.slot[data-size="wide"] .ad{min-height:110px}
.n-coupang{background:linear-gradient(135deg,color-mix(in srgb,#E8452C 12%,var(--card)),var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#E8452C 22%,var(--line))}
.n-ali{background:linear-gradient(135deg,color-mix(in srgb,#FF7A00 13%,var(--card)),var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,#FF7A00 24%,var(--line))}
.n-house{background:var(--acc-soft);color:var(--acc-ink)}
.rail-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rail-pair .ad{aspect-ratio:1/1;padding:8px}
#disc{margin:0 0 16px;font-size:12.5px;line-height:1.5;color:var(--faint)}
.rail-disc{font-size:11.5px;line-height:1.5;color:var(--faint);margin:8px 2px 0}
.aff-box{display:flex;flex-direction:column;gap:8px}
.aff-box a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:14px;font-weight:700}
.aff-box a small{display:block;font-weight:500}

/* 뒷부분 */
#p-faq,#p-tab{margin-top:44px}
#p-faq:empty,#p-tab:empty{display:none}
#p-faq h2,#p-tab h2{margin-bottom:14px}
#p-faq details{border-radius:var(--r2);margin-bottom:10px}
#p-faq summary{padding:16px 20px;cursor:pointer;font-weight:650;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
#p-faq summary::-webkit-details-marker{display:none}
#p-faq summary::after{content:"+";color:var(--faint);font-size:20px;line-height:1;flex:none}
#p-faq details[open] summary::after{content:"−"}
#p-faq details p{margin:0;padding:0 20px 18px;font-size:15px;color:var(--sub)}
.tab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tab-grid div{height:120px;border-radius:var(--r2);display:flex;align-items:flex-end;padding:10px;font-size:12px;font-weight:600;color:var(--faint);background:var(--glass);border:1px solid var(--glass-line)}
.sharebox{margin-top:44px;text-align:center}.sharebox:empty{display:none}.sharebox p{font-weight:700;margin:0 0 12px}
footer.ft{border-top:1px solid var(--line);color:var(--sub);font-size:13.5px;padding:32px 0 40px}
footer.ft .in{max-width:var(--w);margin:0 auto;padding:0 24px}
footer.ft nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px;font-weight:650}
footer.ft p{margin:0}footer.ft .src{margin-top:8px;font-size:12px;line-height:1.5;color:var(--faint)}

/* 떠 있는 판 */
.res,#posmenu,.more,#modal .m-in,#toast,#anchor .ad{background:var(--glass-pop);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--shadow-up);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
#tabbar,#posbar,#anchor{display:none}
#a2hs{margin:0 0 12px}
.x{width:32px;height:32px;border:0;background:var(--soft);border-radius:16px;font-size:13px;line-height:1;flex:none}
#modal{position:fixed;inset:0;z-index:40;background:rgba(10,12,14,.6);display:flex;align-items:center;justify-content:center;padding:16px}
#modal .m-in{position:relative;border-radius:var(--r);padding:24px;width:100%;max-width:560px;max-height:92vh;overflow:auto}
#modal .x{position:absolute;right:12px;top:12px}
#toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:50;max-width:calc(100% - 32px);color:var(--ink);font-size:14px;font-weight:650;padding:10px 16px;border-radius:12px}
.more{position:fixed;left:0;right:0;bottom:0;z-index:36;border-radius:22px 22px 0 0;padding:10px 16px calc(84px + env(safe-area-inset-bottom))}
.more i{display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
.more nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.more a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;font-size:13px;font-weight:650}
.more a b{font-size:24px;line-height:1;font-weight:400}
#posbar a,#posbar button{min-height:40px;display:inline-flex;align-items:center;gap:2px;padding:0 2px;background:none;border:0;min-width:0}
#posbar .pb-t{overflow:hidden;text-overflow:ellipsis;max-width:110px}
#posbar .sep{color:var(--faint);font-style:normal;flex:none}
#posmenu{position:fixed;left:8px;right:8px;top:52px;z-index:31;max-height:60vh;overflow:auto;border-radius:var(--r2);padding:6px}
#posmenu a{display:flex;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:10px;font-size:15px}
#posmenu a.cur{font-weight:700;background:var(--soft)}

/* 떠오르기 — 표준 ③ 값 */
.btn,.tile,.stat,.go-n a,.band,.hcard,.sgg-grid a,.hero .glass-row a{transition:transform .25s,box-shadow .2s,background-color .2s}
@media(hover:hover){.btn:hover,.tile:hover,a.stat:hover,.go-n a:hover,.band:hover,.hcard:hover,.sgg-grid a:hover,.hero .glass-row a:hover{transform:translateY(-2px);box-shadow:var(--lift-sh1)}}

@media (max-width:1180px){:root{--rail:300px}.nav a{padding:8px 9px;font-size:14.5px}.q{width:200px}.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.hero .in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1023px){.layout{grid-template-columns:minmax(0,1fr)}.nav{display:none}.q{width:280px}}
@media (max-width:760px){
 h1{font-size:26px}h2{font-size:19px}.lead{font-size:15px;margin-bottom:18px}
 .hd{position:static}.hd-in{height:auto;padding:12px 16px;flex-wrap:wrap;gap:10px;position:relative}
 .hd-r{flex:0 0 100%;order:3;margin:0}.q{flex:1;width:auto}
 .hd .thm{position:absolute;right:16px;top:9px;width:38px;height:38px;font-size:17px}
 .logo .lockup{width:128px}
 .layout{padding:12px 16px 32px;gap:24px}
 .card{padding:18px;border-radius:18px}.card.sm{padding:16px}
 .grid2,.grid3{grid-template-columns:minmax(0,1fr)}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat .v{font-size:22px}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{padding:14px}
 .go-n{grid-template-columns:minmax(0,1fr)}
 .sec{margin-top:32px}
 .wk{grid-template-columns:repeat(4,minmax(0,1fr))}
 .lst li{grid-template-columns:minmax(0,1fr)}.lst .r{grid-row:auto;grid-column:1;text-align:left}
 .tab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero .in{padding:24px 16px}.hero h1{font-size:28px}.hero p{font-size:15px}.hero .hs input{height:52px;font-size:16px}
 .hcards{grid-template-columns:repeat(2,minmax(0,1fr))}.hcard b{font-size:24px}
 .band{flex-wrap:wrap;padding:14px 16px}.band .go{margin-left:auto}
 .rail-ads{display:none}
 .bars{font-size:13px}
 #posbar{display:flex;position:fixed;left:0;right:0;top:0;z-index:30;height:46px;align-items:center;gap:4px;padding:0 12px;background:var(--hd);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--line);font-size:13.5px;white-space:nowrap;transform:translateY(-110%);visibility:hidden;transition:transform .15s}
 #posbar.on{transform:none;visibility:visible}
 #tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:37;background:var(--hd);-webkit-backdrop-filter:blur(20px) saturate(110%);backdrop-filter:blur(20px) saturate(110%);box-shadow:0 -1px 0 var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 #tabbar a,#tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;justify-content:center;background:none;border:0;font-size:11px;font-weight:650;color:var(--faint);border-radius:12px}
 #tabbar svg{width:23px;height:23px}
 #tabbar [aria-current="page"]{color:var(--ink)}
 body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
 #anchor{display:block;position:fixed;left:8px;right:8px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:20}
 #anchor .ad{min-height:58px;padding:6px 36px;font-size:14px;border-radius:12px}
 #anchor .x{position:absolute;right:6px;top:13px;background:transparent}
 body.has-anchor{padding-bottom:calc(136px + env(safe-area-inset-bottom))}
 #toast{bottom:150px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 숫자 줄(이름 · 값) */
.kv{margin:0;display:grid;gap:10px}
.kvr{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-top:1px solid var(--line);padding-top:10px}
.kvr:first-child{border-top:0;padding-top:0}
.kvr dt{color:var(--sub);font-weight:650;font-size:14px}
.kvr dd{margin:0;text-align:right}.kvr dd b{font-size:18px;font-weight:800}.kvr dd small{display:block;font-size:12.5px;color:var(--sub)}
.lst a.n{color:var(--acc-ink)}

/* 공공나우 v5(11-10 4차) 덧붙임 */
/* ⑬ 이모지 뒤 청록 바탕 없음 — 이모지는 그림 그대로(바탕·네모 없음) */
.tile .ic,.n-house{background:transparent}
.tile .ic{width:auto;height:40px;justify-content:flex-start;font-size:28px}
/* ⑫ 대표 번호 = 누르면 전화(PC 에서도 링크 모양, 휴대폰은 통화 화면) */
a.tel{color:var(--acc-ink);font-weight:700;text-decoration:none;white-space:nowrap}
a.tel:hover{text-decoration:underline}
/* ⑭ 그래프 = 나우 공통 유리 톤(계산나우 관심도·이슈나우 막대와 같은 규칙): 바탕 홈 = 옅은 반투명 판 + 흰 테두리 빛,
   막대 = 주색 반투명 그라데이션(왼쪽 옅고 오른쪽 짙음) + 윗변 흰 빛줄 + 은은한 그림자, 둥근 끝, 왼쪽에서 자라남. '우리 동네' 줄은 짙게 */
.bars .bt{height:12px;border-radius:7px;background:color-mix(in srgb,var(--sub) 10%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.bars .bt i{border-radius:7px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 42%,transparent),color-mix(in srgb,var(--acc) 72%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 8px color-mix(in srgb,var(--acc) 20%,transparent)}
.bars .me+.bt i{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 70%,transparent),var(--acc))}
.pyr .tr{height:14px}
.pyr .bar{border-radius:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 6px rgba(20,30,40,.1)}
.pyr .m .bar{border-radius:7px 0 0 7px;background:linear-gradient(270deg,color-mix(in srgb,var(--male) 85%,transparent),color-mix(in srgb,var(--male) 45%,transparent))}
.pyr .f .bar{border-radius:0 7px 7px 0;background:linear-gradient(90deg,color-mix(in srgb,var(--female) 85%,transparent),color-mix(in srgb,var(--female) 45%,transparent))}
.legend i{border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.kmap a path{fill:color-mix(in srgb,var(--acc) 22%,transparent)}
.kmap a:hover path,.kmap a:focus-visible path{fill:color-mix(in srgb,var(--acc) 48%,transparent)}
.kmap a.cur path{fill:color-mix(in srgb,var(--acc) 85%,transparent)}

/* 공공나우 v6(11-10 5차) 덧붙임 */
/* ⑬ 약국 요일표: 칸 = 요일 이름 + 남은 높이 가운데 글자. '쉼'(한 줄)도 시간 두 줄 칸과 같은 가운데 자리 */
.wk span{display:flex;flex-direction:column;align-items:stretch}
.wk span .t{flex:1;display:flex;align-items:center;justify-content:center;font-style:normal;min-height:2.6em}
/* ⑮ 기간 카운트 칩(NOWDday 한 곳): D-n = 주색 옅은 바탕 · 오늘 = 주색 · 마감·지남 = 흐린 주색 */
.dd-chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;background:var(--now-tint-2);color:var(--now-pill-fg);margin-left:6px;vertical-align:middle}
.dd-chip.today{background:var(--acc);color:var(--on-acc,#fff)}
.dd-chip.al{background:var(--now-tint);color:var(--now-muted);font-weight:700}
.dd-chip.pre{background:var(--now-tint);color:var(--now-pill-fg)}
.band .dd-chip{background:rgba(255,255,255,.22);color:inherit}
.ln-go{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:14px 0 0}
.ln-go .asof{flex-basis:100%;margin:0}
/* ⑯ 운영신청 목록 */
.ops h3{display:flex;gap:10px;align-items:baseline;font-size:16px}
.ops-no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--now-tint-2);color:var(--now-pill-fg);font-size:13px;font-weight:800}
.ops-tag{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.ops-f{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;margin:0;font-size:14px}
.ops-f dt{color:var(--now-muted);font-weight:700}.ops-f dd{margin:0}.ops-f .pre{white-space:pre-line}
.ops-sum p{margin:4px 0}
@media (max-width:640px){.ops-f{grid-template-columns:1fr}.ops-f dt{margin-top:6px}}

/* 공공나우 v7(11-11 6차) 덧붙임 */
/* ⑩ 전국 순위 막대(표 위) */
.rank-bars{margin-bottom:14px}.rank-bars h3{margin-bottom:12px}

/* ⑪ 지도 링크: 청록 카드 위에서 또렷하게 — 보색(산호) 알약. T맵을 넣을지는 app.js MAPS 한 곳(12판).
   대비: #8C2A06 글자 / #FFE6DA 바탕 7.4:1 · 다크 #FFC2A6 / #3A1A10 10:1 (실측 스크립트 pub_check6.py) */
.maps{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.lst .tg .s{display:contents}
.mp{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap;
 color:#8C2A06;background:#FFE6DA;border:1px solid #F6B396;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.mp:hover{background:#FFD6C2;text-decoration:none}
.mp.nv::before,.mp.kk::before,.mp.tm::before{content:"";width:7px;height:7px;border-radius:50%;margin-right:6px;background:currentColor;opacity:.75}
:root[data-theme="dark"] .mp{color:#FFC2A6;background:#3A1A10;border-color:#7A3418;box-shadow:none}
:root[data-theme="dark"] .mp:hover{background:#4A2214}

/* ⑫ 지도 FAB: 우하단. 휴대폰은 아래 탭 줄(60)·광고 띠(58) 위로 */
#mapfab{position:fixed;right:24px;bottom:24px;z-index:35;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#mapfab[hidden]{display:none}
.mf-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 18px 0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.5);cursor:pointer;font:inherit;font-size:15px;font-weight:800;
 color:#fff;background:linear-gradient(160deg,#F2683A,#C8431B);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 26px rgba(200,67,27,.35)}
.mf-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mf-sheet{width:min(300px,calc(100vw - 32px));padding:14px;border-radius:18px;background:var(--card,#fff);color:var(--ink);box-shadow:0 18px 50px rgba(6,40,36,.28),0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent)}
.mf-sheet[hidden]{display:none}
.mf-t{margin:0 0 10px}.mf-t small{display:block;font-size:12px;font-weight:700;color:var(--now-muted)}.mf-t b{font-size:15.5px}
.mf-go{display:flex;flex-wrap:wrap;gap:8px}.mf-go .mp{height:38px;padding:0 14px;font-size:14px}
.mf-h{margin:10px 0 0;font-size:12px;color:var(--now-muted)}
#p-body li.mf-pick{box-shadow:inset 4px 0 0 #E2622F;background:linear-gradient(90deg,rgba(255,230,218,.55),transparent 60%);border-radius:10px;padding-left:12px}
:root[data-theme="dark"] #p-body li.mf-pick{background:linear-gradient(90deg,rgba(122,52,24,.45),transparent 60%)}
#p-body .lst li:has(.maps){cursor:pointer}
@media (max-width:760px){#mapfab{right:12px;bottom:calc(140px + env(safe-area-inset-bottom))}.mf-btn{height:46px}}

/* ⑬ 강서 통합예약 실측 줄: 신청 단추 */
.gsr .ap{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:800;color:var(--on-acc);background:var(--acc);text-decoration:none}

/* ⑭ 전화: 호버 때 밑줄 대신 투명한 유리 알약(자리는 그대로 — 안쪽 여백만큼 바깥 여백을 뺀다) */
a.tel{display:inline-block;padding:2px 9px;margin:-2px -9px;border-radius:999px;transition:background .15s,box-shadow .15s}
a.tel:hover{text-decoration:none;background:color-mix(in srgb,var(--acc) 12%,rgba(255,255,255,.55));box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px color-mix(in srgb,var(--acc) 26%,transparent),0 4px 14px color-mix(in srgb,var(--acc) 16%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="dark"] a.tel:hover{background:color-mix(in srgb,var(--acc) 18%,rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}

/* ⑮ 카운트 보기: 시안 막대에서 고르면 카운트 칩이 잠깐 빛난다 */
.dd-chip.dd-flash{animation:ddf 1.2s ease-out 2}
@keyframes ddf{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.dd-chip.dd-flash{animation:none;outline:2px solid var(--acc)}}

/* 공공나우 v8(11-11 7차) 덧붙임 */
/* ⑫ 표 부품(.tbl) 정렬 한 규칙: 머리 칸과 값 칸은 같은 클래스 = 같은 정렬 · 좌우 안쪽 여백 같은 값.
   .rk 순위 = 가운데·고정 너비 · .nr 숫자 = 오른쪽 · .dt 날짜 = 왼쪽(숫자 폭 고정) · .ct 한 글자 = 가운데 · 나머지 = 왼쪽 */
.tbl th,.tbl td{padding-left:12px;padding-right:12px}
.tbl .rk{width:4.5em;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .dt{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .ct{text-align:center;white-space:nowrap}

/* ⑮ 카운트 칩: 주색 청록의 보색(산호·주황)으로 또렷하게. 남은 시간 24시간 안 = 실시간 시계(공용 NOWDday) — 진한 주황 + 깜박이는 점.
   대비(실측 pub_check7.py): 라이트 D-n #8A2A0A/#FFE3D3 · 시계 #FFFFFF/#C2410C · 접수 전 #7A3B00/#FFF0E0 · 다크 D-n #FFC4A3/#4A1E0C · 시계 #1A0800/#FF8A4C */
.dd-chip{background:#FFE3D3;color:#8A2A0A;box-shadow:inset 0 0 0 1px #F7B08A}
.dd-chip.pre{background:#FFF0E0;color:#7A3B00;box-shadow:inset 0 0 0 1px #F5C995}
.dd-chip.today,.dd-chip.live{background:#C2410C;color:#fff;box-shadow:0 2px 8px rgba(194,65,12,.35)}
.dd-chip.al{background:var(--now-tint);color:var(--now-muted);box-shadow:none}
.dd-chip.live{gap:6px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.dd-chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:ddlive 1s steps(2,jump-none) infinite}
@keyframes ddlive{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dd-chip.live::before{animation:none}}
:root[data-theme="dark"] .dd-chip{background:#4A1E0C;color:#FFC4A3;box-shadow:inset 0 0 0 1px #7A3418}
:root[data-theme="dark"] .dd-chip.pre{background:#3D2410;color:#FFD7A8;box-shadow:inset 0 0 0 1px #6B4318}
:root[data-theme="dark"] .dd-chip.today,:root[data-theme="dark"] .dd-chip.live{background:#FF8A4C;color:#1A0800;box-shadow:none}
:root[data-theme="dark"] .dd-chip.al{background:var(--now-tint);color:var(--now-muted);box-shadow:none}
.band .dd-chip{background:#FFE3D3;color:#8A2A0A}

/* ⑱ 2027 공휴일 표: 연휴 행(설날·추석) ↔ 공휴일 행. 기본 = 보색 구분(연휴 산호 · 공휴일 청록), 시안 막대 '공휴일 표 색'에서 '짙게'(연휴만 진한 청록) */
.hol-key{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.hk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--ink)}
.hk::before{content:"";width:14px;height:14px;border-radius:4px}
.hk.long::before{background:#FFD9C7;box-shadow:inset 3px 0 0 #E2622F}.hk.day::before{background:var(--acc-soft)}
.tbl.hol tr.h-long td{background:#FFE6DA;color:#5A1E06;font-weight:800}
.tbl.hol tr.h-long td:first-child{box-shadow:inset 4px 0 0 #E2622F}
.tbl.hol tr.h-day td{background:color-mix(in srgb,var(--acc) 8%,transparent)}
:root[data-theme="dark"] .tbl.hol tr.h-long td{background:#3F1B0D;color:#FFD3BC}
:root[data-theme="dark"] .hk.long::before{background:#5A2610}
html[data-hol="deep"] .tbl.hol tr.h-long td{background:color-mix(in srgb,var(--acc) 30%,var(--card));color:var(--ink);box-shadow:none}
html[data-hol="deep"] .tbl.hol tr.h-long td:first-child{box-shadow:inset 4px 0 0 var(--acc)}
html[data-hol="deep"] .tbl.hol tr.h-day td{background:transparent}
html[data-hol="deep"] .hk.long::before{background:color-mix(in srgb,var(--acc) 30%,#fff);box-shadow:inset 3px 0 0 var(--acc)}
html[data-hol="deep"] .hk.day::before{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}

/* ⑬ 지도 FAB 고른 곳 칩(✕ = 선택 풀기) */
.mf-chip{display:inline-flex;align-items:center;gap:6px;max-width:min(300px,calc(100vw - 32px));margin:0;padding:4px 4px 4px 12px;border-radius:999px;font-size:13px;color:#5A1E06;background:#FFE6DA;border:1px solid #F6B396;box-shadow:0 6px 18px rgba(200,67,27,.18)}
.mf-chip[hidden]{display:none}
.mf-chip span{font-weight:700;color:#8C2A06;flex:none}.mf-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-chip button{flex:none;width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;font:inherit;font-size:13px;font-weight:800;color:#fff;background:#C8431B}
:root[data-theme="dark"] .mf-chip{color:#FFD3BC;background:#3A1A10;border-color:#7A3418}:root[data-theme="dark"] .mf-chip span{color:#FFC2A6}
.tbl .dd-chip{margin-left:0}

/* 공공나우 v9(11-11 8차) 덧붙임 */
/* ④ 강좌·접수 줄 상태 한 곳: 마감(기간 끝·정원 참) = 회색 바탕 + 흐린 글자 / 접수 중 = 흰 카드 + 왼쪽 주색 띠 / 예정 = 옅은 주황 띠 */
.lst li.open,.lst li.pre,.lst li.closed{border-radius:12px;padding-left:12px;padding-right:12px;margin:0 -4px}
.lst li.open{background:var(--card,#fff);box-shadow:inset 4px 0 0 var(--acc)}
.lst li.open.now{box-shadow:inset 4px 0 0 #C2410C}
.lst li.pre{box-shadow:inset 4px 0 0 #F5A65B}
.lst li.closed{background:color-mix(in srgb,var(--ink,#1b1f27) 7%,var(--card,#fff));box-shadow:inset 4px 0 0 color-mix(in srgb,var(--ink,#1b1f27) 22%,transparent)}
.lst li.closed .n,.lst li.closed .m,.lst li.closed .r{color:var(--now-muted)}
.lst li.closed+li.closed{margin-top:6px}
:root[data-theme="dark"] .lst li.closed{background:color-mix(in srgb,#fff 6%,var(--card,#14171c))}
.src-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:4px;border-radius:999px;font-size:11.5px;font-weight:800;vertical-align:2px;background:var(--now-tint-2);color:var(--now-pill-fg)}
/* ⑤ 카드 아래 알약 줄(카운트 칩·신청하기·지도) = 한 높이·한 가운데·한 글자 크기. 칩 왼쪽 여백 0(줄 간격은 gap 하나) */
.lst .tg{align-items:center;--tg-h:28px}
.lst .tg>.dd-chip,.lst .tg>.ap,.lst .tg .maps>a{height:var(--tg-h);box-sizing:border-box;font-size:12.5px;line-height:1;margin:0;display:inline-flex;align-items:center}
.lst .tg>.dd-chip{padding:0 11px}
.lst .tg>.dd-chip.live{box-shadow:none}
.lst .tg .maps{align-items:center}
.ln-go .btn+.btn{background:var(--card,#fff);color:var(--acc-ink,var(--acc));box-shadow:inset 0 0 0 1.5px var(--acc)}

/* 공공나우 v10(11-11 9차) 덧붙임 */
/* ⑤ 강좌·접수 줄 = 띠 없이 상태 알약 + 줄 바탕·글자 대비. 접수 중 = 청록 옅은 바탕 + 진한 글자 + 청록 알약(가장 또렷) / 예정 = 흰 카드 + 테두리 알약 / 마감 = 바탕 없음 + 흐린 글자 + 흐린 알약.
   카운트(D-n·시계)는 보색(주황) 그대로 — 상태는 청록, 남은 때는 주황. 줄 상태 한 곳 = app.js rowSt */
.lst li.open,.lst li.pre,.lst li.closed{box-shadow:none;border-top:0;border-radius:14px;padding:12px 14px;margin:6px -4px 0}
.lst li.open:first-child,.lst li.pre:first-child,.lst li.closed:first-child{margin-top:0}
.lst li.open{background:color-mix(in srgb,var(--acc) 9%,var(--card,#fff));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 26%,transparent)}
.lst li.open.now{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 45%,transparent)}
.lst li.open .n{color:var(--ink);font-weight:800}
.lst li.pre{background:var(--card,#fff);box-shadow:inset 0 0 0 1px var(--line)}
.lst li.closed{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
.lst li.closed .n{font-weight:600}
.lst li.closed .n,.lst li.closed .m,.lst li.closed .r{color:var(--now-muted)}
.lst li.closed+li.closed{margin-top:6px}
:root[data-theme="dark"] .lst li.closed{background:transparent}
:root[data-theme="dark"] .lst li.open{background:color-mix(in srgb,var(--acc) 16%,var(--card,#14171c))}
.stp{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin:0 7px 0 0;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:-.01em;vertical-align:2px;white-space:nowrap}
.stp.open{background:var(--acc);color:var(--on-acc,#fff)}
.stp.pre{background:var(--now-tint-2);color:var(--now-pill-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
.stp.closed{background:transparent;color:var(--now-muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--now-muted) 45%,transparent)}
/* ⑥ 오늘 자정 마감 예시 줄(시안) 꼬리표 */
.src-tag.demo{background:#FFF1C9;color:#7A4B00}
:root[data-theme="dark"] .src-tag.demo{background:#3A2B05;color:#FFD98A}
/* ⑦ 방문 접수 줄 단추: 주색 테두리 단추(신청하기와 갈라 보이게) */
.lst .tg>.ap.visit{background:var(--card,#fff);color:var(--acc-ink,var(--acc));box-shadow:inset 0 0 0 1.5px var(--acc)}

/* 공공나우 v11(11-11 10차): 서울 25개 구 자치회관 접수 표 */
.tbl.sj th,.tbl.sj td{font-size:13.5px;line-height:1.45;vertical-align:top}
.tbl.sj td:first-child{white-space:nowrap;font-weight:600}
.tbl.sj tr.me td{background:var(--now-tint,rgba(11,111,106,.08));font-weight:700}
.tbl.sj a{color:var(--acc,#0B6F6A);text-decoration:underline;text-underline-offset:2px}
@media (max-width:700px){.tbl.sj{min-width:640px}.tbl-wrap:has(.tbl.sj){overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ═══ 나우 헤더·버튼 표준 v2(11-08 밤: 호버 알약·버튼을 반투명 유리로) — 정본은 한사주이전\시안\v13_parts\header_standard.css 한 곳. v1 — K사주에서 확정(2026-11-08). 나우 사이트는 이 파일 하나를 그대로 불러 쓴다. ═══
   사이트마다 바꾸는 것은 아래 변수 몇 개뿐(글자색 --navt, 바탕 --head). 나머지 값은 손대지 않는다.

   ① 메뉴 알약 — KETAGO 헤더(keta-go.kr, ketago-kadence/style.css, 2026-11-08 공개 쪽에서 읽음)와 같은 유리 알약.
      · 기본: 알약 없음(테두리·회색 바탕 0). 글자만.
      · 마우스를 올리면: 반투명 유리 알약이 글자 뒤에서 scale(.8)→1 로 통통 튀며 커진다
        (KETAGO 값 그대로 — opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1), 모서리 999px, 흐림 8px).
      · 지금 있는 쪽: 같은 유리 알약이 늘 떠 있고 글자가 굵다. 금색 밑줄은 쓰지 않는다.
      · 다크 알약 = KETAGO 검정 헤더 값 그대로: rgba(255,255,255,.14) + blur(8px) + inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.25).
      · 라이트 알약 = KETAGO 밝은 바탕 유리 칩(.kg-chip) 값: rgba(255,255,255,.75) + blur(12px) + 0 4px 14px rgba(15,20,40,.07), inset 0 0 0 1px rgba(255,255,255,.9).
   ② 다크·라이트 버튼 그림 — 하나로 통일: **누르면 될 상태**를 그린다(트롯나우와 같은 규칙).
      라이트 화면 = 🌙(U+1F319), 다크 화면 = ☀️(U+2600 U+FE0F, 컬러 그림 글자 고정). 글자는 CSS 가 넣는다 — 스크립트는 aria-label 만 바꾼다.
   ③ 버튼 호버(모든 알약 버튼 공통 — 사이트의 알약 단추·닫기 X·탭 단추에 class "pill" 을 달면 같은 효과) — 트롯나우(trot.moveinformation.com) 우하단 떠 있는 버튼(.fab)과 같은 값:
      올리면 translateY(-2px) 로 떠오르고 그림자가 0 6px 18px → 0 11px 24px 로 커진다. 벗어나면 그대로 내려온다.
      움직임 시간도 같다 — transform .25s, box-shadow .2s. 그림자 진하기는 트롯나우 값(.26→.34)을 다크에 그대로, 라이트는 밝은 바탕이라 .10→.16.
*/
:root{
  /* 알약(메뉴 호버·선택) — 흰 판이 아니라 반투명 유리: 뒤가 비치고 윗선만 빛난다 */
  --pill-bg:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16));
  --pill-blur:blur(14px) saturate(180%);
  --pill-sh:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.38),0 4px 14px rgba(15,20,40,.08);
  /* 버튼(다크·라이트·햄버거·언어) — 헤더 유리보다 한 겹 진한 유리: 테두리 빛 + 그림자로 헤더와 갈린다 */
  --btn-bg:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.30));
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(15,20,40,.08),0 6px 16px rgba(15,20,40,.12);
  --lift-sh0:0 6px 18px rgba(15,20,40,.10);
  --lift-sh1:0 11px 24px rgba(15,20,40,.16);
}
:root[data-theme="dark"]{
  --pill-bg:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  --pill-blur:blur(10px) saturate(160%);
  --pill-sh:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.25);
  --btn-bg:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.09));
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.35);
  --lift-sh0:0 6px 18px rgba(0,0,0,.26);
  --lift-sh1:0 11px 24px rgba(0,0,0,.34);
}

/* 머리줄 — KETAGO 내린 헤더와 같은 유리(흐림 24px·채도 200%), 아래 선은 그림자 한 줄 */
header{-webkit-backdrop-filter:blur(24px) saturate(200%);backdrop-filter:blur(24px) saturate(200%);border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}

/* ① 메뉴 알약 */
.nav a{position:relative;isolation:isolate;background:none;box-shadow:none;border:0;border-radius:999px;color:var(--ink2);transition:color .35s ease,text-shadow .35s ease}
.nav a::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:999px;background:var(--pill-bg);-webkit-backdrop-filter:var(--pill-blur);backdrop-filter:var(--pill-blur);box-shadow:var(--pill-sh);opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
/* 11-09 형님: 지금 있는 쪽(홈 등)에 알약을 늘 띄우지 않는다 — 알약은 마우스를 올릴 때만, 지금 쪽은 굵은 글자로 표시 */
.nav a:hover::before,.nav a:focus-visible::before{opacity:1;transform:scale(1)}
.nav a:hover,.nav a.on{background:none;color:var(--navt)}
.nav a.on{font-weight:700}
:root[data-theme="dark"] .nav a:hover{text-shadow:0 0 8px rgba(255,236,196,.55)}

/* 머리줄 버튼(다크·라이트·햄버거·언어) — 헤더보다 한 겹 진한 유리. 사이트의 햄버거 단추는 class="hd-btn" 을 같이 단다 */
.thm,.lang,.hd-btn{border:0;background:var(--btn-bg);-webkit-backdrop-filter:var(--pill-blur);backdrop-filter:var(--pill-blur);box-shadow:var(--btn-sh);border-radius:999px;color:var(--ink)}
.lang{padding:0 10px}

/* ② 다크·라이트 버튼 그림 */
.thm::before{content:"🌙"}
:root[data-theme="dark"] .thm::before{content:"☀️"}

/* ③ 버튼 호버 — 떠오르기 */
.pill,.cta,.thm,.lang,.hd-btn,.chips a,.chips button,.dchips a,.dchips button,.sub a,.seg button,.dsearch button,.kp-links a,.pn a,.cpick button,.ys span{transition:transform .25s,box-shadow .2s,background-color .2s,color .2s,filter .2s}
@media(hover:hover){
  .pill:hover,.cta:hover,.thm:hover,.lang:hover,.hd-btn:hover,.chips a:hover,.chips button:hover,.dchips a:hover,.dchips button:hover,.sub a:hover,.seg button:hover,.dsearch button:hover,.kp-links a:hover,.pn a:hover,.cpick button:hover{transform:translateY(-2px);box-shadow:var(--lift-sh1)}
}
.pill:active,.cta:active,.thm:active,.chips a:active,.chips button:active,.dchips button:active,.sub a:active,.seg button:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.nav a::before{transition:none}}

/* ④ 카드 안쪽 여백 한 값(11-08 K사주 확정) — PC 18px · 휴대폰 14px. 사이트마다 카드 이름만 이 목록에 둔다 */
:root{--card-pad:18px}
@media(max-width:760px){:root{--card-pad:14px}}

/* 나우 공용 공유 부품 1판. 이름은 전부 nsh- 로 시작해 다른 시안의 칸과 부딪히지 않는다.
   색은 나우 공용 토큰(--solid --ink --sub --line --acc)을 쓰고, 없으면 기본값으로 그린다. */
.nsh-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:0;border-radius:20px;cursor:pointer;font:inherit;font-size:14.5px;font-weight:700;color:var(--ink,#191F28);
 background:color-mix(in srgb,var(--solid,#fff) 70%,transparent);box-shadow:inset 0 0 0 1px var(--line,rgba(25,31,40,.12)),0 4px 14px rgba(31,45,61,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .15s}
.nsh-btn:hover{transform:translateY(-1px)}.nsh-btn svg{width:18px;height:18px;flex:none}
.nsh-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.nsh-it{display:inline-flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink,#191F28);font:inherit;text-decoration:none}
.nsh-ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.nsh-it:hover .nsh-ic,.nsh-it:focus-visible .nsh-ic{transform:translateY(-2px) scale(1.06);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.nsh-ic svg{width:22px;height:22px}
.nsh-kakao{background:#FEE500}.nsh-telegram{background:#2AABEE}.nsh-whatsapp{background:#25D366}.nsh-naver{background:#03C75A}.nsh-x{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.12)}
/* 11-10 5차: 회색 → 주색 계열(나우 공통 토큰). 토큰이 없는 옛 판은 예전 회색 */
.nsh-more,.nsh-copy{background:var(--now-tint-2,color-mix(in srgb,var(--ink,#191F28) 8%,var(--solid,#fff)));color:var(--now-pill-fg,var(--ink,#191F28))}
.nsh-lb{font-size:12.5px;font-weight:600;color:var(--sub,var(--now-muted));white-space:nowrap}

/* 시트·팝오버 */
.nsh-layer{position:fixed;inset:0;z-index:80}
.nsh-scrim{position:absolute;inset:0;background:rgba(10,12,16,.36)}
.nsh-layer.is-pop .nsh-scrim{background:transparent}
.nsh-panel{position:absolute;color:var(--ink,#191F28);background:color-mix(in srgb,var(--solid,#fff) 82%,transparent);-webkit-backdrop-filter:saturate(170%) blur(22px);backdrop-filter:saturate(170%) blur(22px);
 box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.5)}
.nsh-layer.is-sheet .nsh-panel{left:0;right:0;bottom:0;border-radius:24px 24px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));animation:nshUp .24s cubic-bezier(.2,.8,.3,1)}
.nsh-layer.is-sheet{display:flex;justify-content:center}
.nsh-layer.is-pop .nsh-panel{width:340px;border-radius:20px;padding:14px 16px 16px;animation:nshIn .16s ease}
@media (min-width:761px){.nsh-layer.is-sheet .nsh-panel{left:50%;right:auto;bottom:auto;top:50%;width:400px;transform:translate(-50%,-50%);border-radius:22px;padding:16px 18px 18px;animation:none}}
@keyframes nshUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes nshIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nsh-grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--line,rgba(25,31,40,.18));margin:0 auto 10px}
.nsh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.nsh-head b{font-size:16.5px;font-weight:800}
.nsh-close{width:32px;height:32px;border:0;border-radius:16px;background:var(--soft,var(--now-tint-a));color:inherit;font-size:13px;cursor:pointer}
.nsh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 6px}
.nsh-grid .nsh-ic{width:52px;height:52px}.nsh-grid .nsh-ic svg{width:26px;height:26px}
.nsh-url{display:flex;align-items:center;gap:8px;margin-top:18px;padding:6px 6px 6px 14px;border-radius:14px;background:var(--soft,var(--now-tint-a))}
.nsh-url span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--sub,var(--now-muted))}
.nsh-url button{flex:none;height:34px;padding:0 14px;border:0;border-radius:10px;background:var(--acc,#00955F);color:var(--on-acc,#fff);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.nsh-toast{position:fixed;left:50%;bottom:120px;z-index:90;transform:translate(-50%,12px);opacity:0;pointer-events:none;max-width:calc(100% - 32px);padding:10px 16px;border-radius:12px;background:var(--ink,#191F28);color:var(--bg,#fff);font-size:14px;font-weight:600;line-height:1.4;transition:opacity .2s,transform .2s}
.nsh-toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.nsh-panel,.nsh-ic,.nsh-toast{animation:none!important;transition:none!important}}

/* 나우 공용 홈 화면 추가 안내(11-09 2차 디자인): 앱 아이콘(그 나우 파비콘) + 두 줄 글 + 설치 단추 + 닫기. 유리 카드.
   설치 단추는 먹색 바탕·바탕색 글자(어느 나우·테마에서도 대비 4.5:1 이상) — 나우마다 다른 것은 아이콘뿐 */
.a2hs{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:18px;color:var(--ink,#111);
 background:color-mix(in srgb,var(--card,#fff) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
 border:1px solid color-mix(in srgb,var(--ink,#111) 10%,transparent);box-shadow:0 10px 30px rgba(14,17,22,.14);font-size:14px;line-height:1.35}
.a2hs[hidden]{display:none}
.a2hs .a2-ic{flex:none;width:40px;height:40px;border-radius:11px;background:#fff;padding:4px;box-shadow:0 0 0 1px rgba(14,17,22,.08)}
.a2hs .a2-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.a2hs .a2-t b{font-weight:800;letter-spacing:-.02em}
.a2hs .a2-t small{font-size:12.5px;color:var(--sub,var(--now-muted))}
.a2hs .a2-go{flex:none;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--ink,#111);color:var(--bg,#fff);font:inherit;font-weight:800;cursor:pointer}
.a2hs .a2-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink,#111) 7%,transparent);color:var(--sub,var(--now-muted));font:inherit;font-size:13px;cursor:pointer}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .a2hs{box-shadow:0 10px 30px rgba(0,0,0,.45)}}
:root[data-theme="dark"] .a2hs{box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* 11-10 아이폰판 그림 안내: 공유(□↑) → 홈 화면에 추가(⊞) 두 칸. 공유 단추는 사파리 파란색 그대로 */
.a2hs.a2-ios{align-items:flex-start}
.a2hs .a2-how{display:flex;align-items:center;gap:6px;margin:6px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.a2hs .a2-how li{display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.3}
.a2hs .a2-how li>span:last-child{display:flex;flex-direction:column}
.a2hs .a2-how small{font-size:11px;color:var(--sub,var(--now-muted))}
.a2hs .a2-how .a2-arr{color:var(--sub,var(--now-muted));font-weight:800}
.a2hs .a2-k{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink,#111) 7%,transparent);color:var(--ink,#111)}
.a2hs .a2-k svg{width:19px;height:19px}
.a2hs .a2-k.a2-blue{color:#0A84FF;background:rgba(10,132,255,.12)}

/* 나우 공용 가로 줄(11-09 2차, 11-10 3차 화살표 자리): 넘치는 알약·카드 줄 = 가로 스크롤 + 양끝 페이드 + PC 좌우 화살표 + 마우스 끌기 + 휠 가로 이동, 휴대폰은 손가락 스와이프.
   그림자 자리 규칙(네 시안 공통): 줄은 안쪽에 그림자가 닿는 만큼(위 --room-t · 옆 --room-x · 아래 --room-b) 비우고 같은 만큼 바깥을 당긴다(화면 간격 그대로).
   값은 각 나우가 자기 알약 그림자에 맞춰 준다(기본 6px).
   화살표 자리(11-10, 유튜브·에어비앤비 칩 줄과 같은 방식): PC 에서 그쪽으로 더 밀릴 때만 화살표가 뜨고, 그때 줄 끝 --zone(40px)은 알약을 완전히 지운 '화살표 자리',
   그 안쪽 --fade(28px)는 서서히 나타나는 페이드다 — 화살표 밑에 알약이 겹쳐 보이지 않는다. 끝에 닿은 쪽은 화살표·자리 모두 없어 첫·끝 알약이 다 보인다.
   휴대폰(손가락)은 화살표 없이 페이드만(자리 0).
   페이드는 그림자를 칠하지 않고 줄을 투명하게 지운다(mask) — 어느 바탕 위에서도 회색 띠가 생기지 않는다. */
.hs{position:relative;display:flow-root;--room-t:6px;--room-x:6px;--room-b:6px;--zone:0px;--fade:28px}
.hs-row{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:var(--room-t) var(--room-x) var(--room-b);margin:calc(var(--room-t)*-1) calc(var(--room-x)*-1) calc(var(--room-b)*-1);
 -webkit-mask-image:linear-gradient(90deg,transparent var(--fl0,0px),#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent calc(100% - var(--fr0,0px)));
 mask-image:linear-gradient(90deg,transparent var(--fl0,0px),#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent calc(100% - var(--fr0,0px)))}
.hs-row::-webkit-scrollbar{display:none}
.hs[data-l]>.hs-row{--fl0:calc(var(--room-x) + var(--zone));--fl:calc(var(--room-x) + var(--zone) + var(--fade))}
.hs[data-r]>.hs-row{--fr0:calc(var(--room-x) + var(--zone));--fr:calc(var(--room-x) + var(--zone) + var(--fade))}
.hs-row>*{flex:none}
.hs-row.hs-drag{cursor:grabbing;user-select:none}.hs-row.hs-drag>*{pointer-events:none}
.hs-btn{display:none;position:absolute;top:50%;z-index:2;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;padding:0;cursor:pointer;
 font:700 18px/34px system-ui,sans-serif;color:var(--ink,#111);background:var(--hs-btn-bg,rgba(255,255,255,.92));box-shadow:0 0 0 1px rgba(14,17,22,.1),0 2px 6px rgba(14,17,22,.12)}
.hs-prev{left:0}.hs-next{right:0}
@media (hover:hover) and (pointer:fine){.hs{--zone:40px}.hs[data-l]>.hs-prev,.hs[data-r]>.hs-next{display:block}.hs-row{cursor:grab}}
.hs-btn{transition:transform .2s,box-shadow .2s}
@media (hover:hover){.hs-btn:hover{transform:scale(1.1);box-shadow:0 0 0 1px rgba(14,17,22,.14),0 3px 8px rgba(14,17,22,.18)}}

/* 화살표 그림(11-10 4차): 글자(‹ ›)는 글꼴마다 위아래 자리가 달라 원 가운데에서 어긋났다 → 글자는 숨기고(font-size 0, 읽기용 이름은 aria-label) 같은 꺾쇠 그림 하나를 원 한가운데(50%/50%)에 둔다. 앞 단추는 그림을 좌우로 뒤집는다 */
.hs-btn{font-size:0}
.hs-btn::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:14px;margin:-7px 0 0 -5px;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2.5 1.5 8 7l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2.5 1.5 8 7l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hs-prev::before{transform:scaleX(-1)}

/* 나우 공용 정본 CSS(11-10 3차) — 모든 나우가 이 한 파일을 쓴다(헤더 표준처럼, 나우마다 다른 것은 --acc 주색뿐).
   ① '전체보기·더보기' 알약 .nmore  ② 제휴 면책 문구는 글자만(바탕 상자 없음)  ③ 팝업 틀 포커스 테두리 없음 */

/* ⓪ 회색 → 주색 계열 토큰(11-10 5차 · 모든 나우 공통). 알약·카드 바탕·드롭다운·더보기의 회색과 보조 회색 글자는 이 토큰만 쓴다.
   나우마다 다른 것은 --acc 하나 — 계산 아이리스 보라 · 이슈 빨강 · 맛집 주황 · 공공 청록 · K사주 남색.
   각 나우 CSS 의 회색 하드코딩은 빌드 때 _공유/now_tint.py 한 곳이 이 토큰으로 바꾼다(밝기로 골라 씀).
   글자 대비: --now-muted 는 흰 바탕 5.6:1 이상 · --now-tint-2 위 4.5:1 이상(맛집 주황이 가장 낮음 — 시험에서 잰다). */
:root{--now-page:color-mix(in srgb,var(--acc) 11%,#f5f6f9);--now-tint:color-mix(in srgb,var(--acc) 10%,#fff);--now-tint-2:color-mix(in srgb,var(--acc) 17%,#fff);
 --now-tint-a:color-mix(in srgb,var(--acc) 11%,transparent);--now-muted:color-mix(in srgb,var(--acc) 36%,#4f5460);--now-pill-fg:color-mix(in srgb,var(--acc) 72%,#111)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--now-page:color-mix(in srgb,var(--acc) 6%,#0e1116);--now-tint:color-mix(in srgb,var(--acc) 15%,#1a1d24);--now-tint-2:color-mix(in srgb,var(--acc) 24%,#1a1d24);
 --now-tint-a:color-mix(in srgb,var(--acc) 18%,transparent);--now-muted:color-mix(in srgb,var(--acc) 30%,#b7bcc8);--now-pill-fg:color-mix(in srgb,var(--acc) 55%,#fff)}}
:root[data-theme="dark"]{--now-page:color-mix(in srgb,var(--acc) 6%,#0e1116);--now-tint:color-mix(in srgb,var(--acc) 15%,#1a1d24);--now-tint-2:color-mix(in srgb,var(--acc) 24%,#1a1d24);
 --now-tint-a:color-mix(in srgb,var(--acc) 18%,transparent);--now-muted:color-mix(in srgb,var(--acc) 30%,#b7bcc8);--now-pill-fg:color-mix(in srgb,var(--acc) 55%,#fff)}

/* ① 전체보기·더보기 알약: 그 나우 주색을 옅게 섞은 두 색이 천천히 흐른다(6초 한 바퀴).
   글자 = 주색 60% + 먹색 40%(다크는 흰색) — 가장 진한 바탕 위에서도 대비 4.5:1 이상(시험에서 잰다). 동작 줄이기 설정이면 멈춘다. */
:root .nmore{--nm-base:#fff;--nm-ink:#111;
 --nm-a:color-mix(in srgb,var(--acc) 9%,var(--nm-base));--nm-b:color-mix(in srgb,var(--acc) 24%,var(--nm-base));--nm-c:color-mix(in srgb,var(--acc) 4%,var(--nm-base));
 display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;padding:0 14px;border-radius:999px;
 border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);--nm-fg:color-mix(in srgb,var(--acc) 60%,var(--nm-ink));color:var(--nm-fg);font-weight:700;text-decoration:none;
 background:linear-gradient(105deg,var(--nm-a) 0%,var(--nm-b) 22%,var(--nm-c) 40%,var(--nm-a) 55%,var(--nm-b) 78%,var(--nm-a) 100%) 0 0/300% 100%;
 animation:nmore-flow 6s linear infinite;transition:transform .2s,box-shadow .2s}
/* 호버·누름·포커스 때도 글자색은 알약 글자색 그대로 — 나우마다 있는 '.sh a:hover{color:먹색}' 같은 규칙보다 이 줄이 이긴다(:root:root 로 구체성 0,4,0 — 이슈 '.h a.meta:hover' 0,3,1 보다 큼. 4차 실측: 계산·맛집 호버 때 먹색으로 바뀌던 것) */
:root:root .nmore:is(:hover,:focus-visible,:active,:visited){color:var(--nm-fg)}
:root .nmore:hover{transform:translateY(-1px);box-shadow:0 4px 14px color-mix(in srgb,var(--acc) 22%,transparent)}
@keyframes nmore-flow{to{background-position:-150% 0}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nmore{--nm-base:#15181e;--nm-ink:#fff}}
:root[data-theme="dark"] .nmore{--nm-base:#15181e;--nm-ink:#fff}
@media (prefers-reduced-motion:reduce){.nmore{animation:none;transition:none}}

/* ② 쿠팡·알리·제휴 면책 문구: 어느 나우·어느 자리든 바탕·그림자·흐림 없이 글자만(색은 그 나우 보조 글자색) */
:is(#disc,.rail-disc,.disc-pill,.ad-disc){background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}

/* ③ 팝업 틀(열 때 포커스를 받는 칸)은 테두리를 그리지 않는다 — 테두리는 키보드로 고른 단추·링크에만 */
[data-now-focus-box]:focus{outline:none}

/* ④ 꿀정보 카드(재벌나우 제휴 → 맛집·이슈 오른쪽 칸, _공유/now_aff.js) — 회색 없이 주색 토큰만 */
.naff h3{display:flex;align-items:baseline;gap:6px;margin:0 0 10px}.naff h3 small{font-size:12px;font-weight:600;color:var(--now-muted)}
.naff-c{display:flex;gap:10px;align-items:center;padding:8px;margin:0 -8px;border-radius:12px;text-decoration:none;color:inherit}
.naff-c:hover{background:var(--now-tint)}
.naff-c img{flex:none;width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--now-tint)}
.naff-b{min-width:0;display:grid;gap:2px}.naff-b b{font-size:14px;line-height:1.35}.naff-b small{font-size:12.5px;color:var(--now-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.naff-b em{font-style:normal;display:flex;gap:6px;font-size:11.5px;font-weight:800}
.naff-ad{padding:0 6px;border-radius:6px;background:var(--now-tint-2);color:var(--now-pill-fg)}
.naff-b em .dd{color:var(--now-pill-fg)}.naff-b em .dd.al{color:var(--now-muted)}
.naff-disc{margin:8px 0 0;font-size:11.5px;color:var(--now-muted)}

/* ⑤ 알약 단추 = 유리(11-11 11차 · 모든 나우 공통). 쉼·호버·포커스·고름(aria-pressed/aria-current) 모두 반투명 바탕 + 흐림 + 테 한 줄 — 짙은 단색·색 그림자 없음.
   고른 알약 = 주색을 옅게 섞은 유리 + 주색 테 1.5px(글자 --now-pill-fg). 쓰는 법: 단추·링크에 class="now-pill". 어두운 띠(머리 등) 위에서는 그 띠에 토큰만 다시 정한다.
   글자 대비 4.5:1 이상 · 바탕 알파 < 1 · backdrop-filter 적용을 시험에서 잰다. */
:root{--now-glass:rgba(255,255,255,.6);--now-glass-hover:rgba(255,255,255,.85);--now-glass-line:color-mix(in srgb,var(--acc) 18%,rgba(255,255,255,.5));--now-glass-line-hover:color-mix(in srgb,var(--acc) 34%,transparent);
 --now-glass-hi:rgba(255,255,255,.75);--now-glass-on:color-mix(in srgb,var(--acc) 15%,rgba(255,255,255,.5));--now-glass-on-hover:color-mix(in srgb,var(--acc) 22%,rgba(255,255,255,.55));
 --now-glass-on-line:color-mix(in srgb,var(--acc) 58%,transparent);--now-glass-on-fg:var(--now-pill-fg);--now-glass-blur:blur(10px) saturate(1.5);--now-focus:var(--acc)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--now-glass:rgba(255,255,255,.07);--now-glass-hover:rgba(255,255,255,.14);--now-glass-line:rgba(255,255,255,.14);--now-glass-line-hover:rgba(255,255,255,.3);
 --now-glass-hi:rgba(255,255,255,.1);--now-glass-on:color-mix(in srgb,var(--acc) 24%,rgba(255,255,255,.04));--now-glass-on-hover:color-mix(in srgb,var(--acc) 32%,rgba(255,255,255,.06));--now-glass-on-line:color-mix(in srgb,var(--acc) 65%,transparent)}}
:root[data-theme="dark"]{--now-glass:rgba(255,255,255,.07);--now-glass-hover:rgba(255,255,255,.14);--now-glass-line:rgba(255,255,255,.14);--now-glass-line-hover:rgba(255,255,255,.3);
 --now-glass-hi:rgba(255,255,255,.1);--now-glass-on:color-mix(in srgb,var(--acc) 24%,rgba(255,255,255,.04));--now-glass-on-hover:color-mix(in srgb,var(--acc) 32%,rgba(255,255,255,.06));--now-glass-on-line:color-mix(in srgb,var(--acc) 65%,transparent)}
.now-pill{border:0;background:var(--now-glass);color:var(--now-pill-fg);box-shadow:inset 0 0 0 1px var(--now-glass-line),inset 0 1px 0 var(--now-glass-hi);
 -webkit-backdrop-filter:var(--now-glass-blur);backdrop-filter:var(--now-glass-blur);transition:background-color .15s,box-shadow .15s,transform .15s}
.now-pill:is(:hover,:focus-visible){background:var(--now-glass-hover);box-shadow:inset 0 0 0 1px var(--now-glass-line-hover),inset 0 1px 0 var(--now-glass-hi);transform:translateY(-1px)}
.now-pill:is([aria-pressed="true"],[aria-current]:not([aria-current="false"])){background:var(--now-glass-on);color:var(--now-glass-on-fg);box-shadow:inset 0 0 0 1.5px var(--now-glass-on-line),inset 0 1px 0 var(--now-glass-hi)}
.now-pill:is([aria-pressed="true"],[aria-current]:not([aria-current="false"])):is(:hover,:focus-visible){background:var(--now-glass-on-hover)}
.now-pill:active{transform:none}
.now-pill:focus-visible{outline:2px solid var(--now-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.now-pill{transition:none}.now-pill:is(:hover,:focus-visible){transform:none}}

/* ⑥ 나우 유리 톤(11-11 12차) = 이슈나우 v13 실측값 한 벌(바탕 색 번짐 3개 · 카드 유리 · 머리 띠 유리 · 알약 유리).
   쓰는 법: <html class="now-tone"> → 바탕 번짐 + 알약 톤. 카드·머리 띠는 각 시안이 고르개 목록 하나에 이 토큰만 쓴다(.now-card · .now-head 와 같은 값).
   이슈나우 v13 원문: src_이슈_v13.html '── v4 ──' 글라스 블록 · v5.css .top — 다음 이슈나우 판은 이 토큰을 불러 쓴다(값 한 곳). */
:root{--now-card-glass:rgba(255,255,255,.52);--now-card-hi:rgba(255,255,255,.84);--now-card-ring:rgba(255,255,255,.75);--now-card-edge:rgba(14,17,22,.08);
 --now-blob-a:rgba(255,106,61,.30);--now-blob-b:rgba(43,107,255,.26);--now-blob-c:rgba(160,90,255,.20);
 --now-card-glow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--now-card-edge),0 12px 32px rgba(14,17,22,.08);--now-card-blur:blur(16px) saturate(160%);--now-head-blur:blur(24px) saturate(200%);
 --now-tone-pill:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.30));--now-tone-pill-hover:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.6));--now-tone-pill-blur:blur(14px) saturate(180%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--now-card-glass:rgba(30,34,42,.5);--now-card-hi:rgba(30,34,42,.9);--now-card-ring:rgba(255,255,255,.12);--now-card-edge:rgba(0,0,0,.35);
 --now-blob-a:rgba(255,106,61,.24);--now-blob-b:rgba(70,120,255,.26);--now-blob-c:rgba(160,90,255,.2);--now-card-glow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px var(--now-card-edge),0 12px 32px rgba(0,0,0,.35);
 --now-tone-pill:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));--now-tone-pill-hover:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07))}}
:root[data-theme="dark"]{--now-card-glass:rgba(30,34,42,.5);--now-card-hi:rgba(30,34,42,.9);--now-card-ring:rgba(255,255,255,.12);--now-card-edge:rgba(0,0,0,.35);
 --now-blob-a:rgba(255,106,61,.24);--now-blob-b:rgba(70,120,255,.26);--now-blob-c:rgba(160,90,255,.2);--now-card-glow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px var(--now-card-edge),0 12px 32px rgba(0,0,0,.35);
 --now-tone-pill:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));--now-tone-pill-hover:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07))}
.now-tone{background:var(--now-page)}.now-tone body{background:transparent}
.now-tone body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46vw 40vw at 4% 2%,var(--now-blob-a),transparent 70%),radial-gradient(44vw 40vw at 98% 18%,var(--now-blob-b),transparent 70%),radial-gradient(50vw 44vw at 40% 70%,var(--now-blob-c),transparent 72%),radial-gradient(60vw 50vw at 90% 110%,var(--now-blob-a),transparent 72%)}
html:root.now-tone{--now-glass:var(--now-tone-pill);--now-glass-hover:var(--now-tone-pill-hover);--now-glass-blur:var(--now-tone-pill-blur)}
.now-card{background:var(--now-card-glass);border:1px solid var(--now-card-ring);box-shadow:var(--now-card-glow);-webkit-backdrop-filter:var(--now-card-blur);backdrop-filter:var(--now-card-blur)}
.now-head{background:color-mix(in srgb,var(--now-page) 52%,transparent);box-shadow:inset 0 -1px 0 var(--now-tint);color:var(--ink);-webkit-backdrop-filter:var(--now-head-blur);backdrop-filter:var(--now-head-blur)}

/* ⑦ 가로로 밀리는 줄의 알약 여유(11-12 13차 형님: '나우 시안 만들 때마다 생기는 윗부분 잘림' — 모든 나우 한 규칙).
   가로로 밀리는 줄(overflow-x:auto·scroll)은 위·아래도 잘라 낸다. 알약은 호버 때 뜨고(위치 이동), 포커스 때 테를 두르고, 그림자를 그린다 — 이 셋이 줄 밖으로 나가면 잘린다.
   대상 = overflow-x:auto·scroll 이면서 칸을 가로로 늘어놓는 상자(가로 flex · grid · 줄바꿈 없는 글줄) — 세로로 내려 읽는 팝업·서랍 판은 아님.
   규칙: 줄 안쪽 여유 ≥ 알약이 그리는 범위. 모자라면 모자란 만큼 안쪽 여유를 늘리고 같은 만큼 바깥 여백을 당겨 화면 자리는 그대로 둔다(now_common.js ⑥ NOWRoom 이 줄마다 잰다).
   알약이 그리는 범위 = 아래 토큰(상태가 바뀔 때 더 나가는 몫: 뜸 2 + 포커스 테 3 + 띄움 2 = 7px, 호버 그림자 0 11px 24px 의 위 13·아래 35) 과 그 알약의 쉼 그림자 중 큰 쪽.
   늘린 여유 칸은 눌림을 통과시킨다(줄 위·아래 이웃 링크가 가려지지 않게). */
:root{--now-reach-t:15px;--now-reach-b:37px;--now-reach-x:7px}
[data-now-room]{pointer-events:none}[data-now-room]>*{pointer-events:auto}

/* ⑥-2 나우 유리 톤 알약 = 이슈나우 v13 알약(.chips · .sw) 계산값 그대로(11-12 13차 형님: '알약 배경·활성 톤이 이슈나우와 다르다').
   실측(이슈나우 v13 #/chart 탭, 라이트·다크): 쉼 = 흰 그라데이션 .42→.16 + 안쪽 빛 두 줄 + 그림자 0 4px 14px · 글자 = 주색 36% 섞은 먹색(700)
   호버·누름 = 2px 뜸 + 그림자 0 11px 24px · 포커스 = 주색 테 3px(띄움 2px, 뜨지 않음) · 고름 = 흰 그라데이션 .62→.30 + 주색 글자(800) + 주색 45% 테 1.5px + 그림자 0 6px 16px.
   주색 = 이슈나우 주색(#E8361E · 다크 #FF6A3D) — <html class="now-tone"> 의 모든 .now-pill(메뉴·리그 탭·날짜·단추)이 이 한 벌만 쓴다. */
:root{--now-tone-acc:#E8361E;--now-tone-fg:color-mix(in srgb,var(--now-tone-acc) 36%,#4f5460);--now-tone-ring:color-mix(in srgb,var(--now-tone-acc) 45%,transparent);
 --now-tone-bg:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16));--now-tone-sh:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.38),0 4px 14px rgba(15,20,40,.08);
 --now-tone-lift:0 11px 24px rgba(15,20,40,.16);--now-tone-on-bg:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.30));
 --now-tone-on-sh:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(15,20,40,.08),0 6px 16px rgba(15,20,40,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--now-tone-acc:#FF6A3D;--now-tone-fg:color-mix(in srgb,var(--now-tone-acc) 30%,#b7bcc8);
 --now-tone-bg:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));--now-tone-sh:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.25);
 --now-tone-lift:0 11px 24px rgba(0,0,0,.34);--now-tone-on-bg:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.09));
 --now-tone-on-sh:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--now-tone-acc:#FF6A3D;--now-tone-fg:color-mix(in srgb,var(--now-tone-acc) 30%,#b7bcc8);
 --now-tone-bg:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));--now-tone-sh:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.25);
 --now-tone-lift:0 11px 24px rgba(0,0,0,.34);--now-tone-on-bg:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.09));
 --now-tone-on-sh:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.35)}
html.now-tone .now-pill{border:1px solid transparent;background:var(--now-tone-bg);color:var(--now-tone-fg);font-weight:700;box-shadow:var(--now-tone-sh);-webkit-backdrop-filter:none;backdrop-filter:none;
 transition:transform .25s,box-shadow .2s,background-color .2s,color .2s,border-color .2s}
html.now-tone .now-pill:hover{background:var(--now-tone-bg);transform:translateY(-2px);box-shadow:var(--now-tone-lift)}
html.now-tone .now-pill:focus-visible{background:var(--now-tone-bg);transform:none;box-shadow:var(--now-tone-sh);outline:3px solid var(--now-tone-acc);outline-offset:2px}
html.now-tone .now-pill:is([aria-pressed="true"],[aria-current]:not([aria-current="false"])){background:var(--now-tone-on-bg);color:var(--now-tone-acc);font-weight:800;box-shadow:var(--now-tone-on-sh),0 0 0 1.5px var(--now-tone-ring)}
html.now-tone .now-pill:is([aria-pressed="true"],[aria-current]:not([aria-current="false"])):hover{background:var(--now-tone-on-bg);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){html.now-tone .now-pill{transition:none}html.now-tone .now-pill:hover{transform:none}}

/* ⑧ 누를 단추의 움직임(11-12 13차 형님: '차트 단추에 애니메이션 — 계산나우·다른 나우 단추처럼').
   다른 나우 실측: 계산나우 .btn.grad·.cta2 = 빛 띠가 3.2초마다 단추를 가로지름(sweep) + 화살표 원이 옆으로 살짝 밀림(nudge) · 맛집나우 .shine = 빛 띠 4초 · .go 화살표 2.4초마다 4px 밀림.
   같은 결로 한 벌: class="now-cta" 단추 = 빛 띠(4초 중 뒤 38%만 지나감 · 흰 유리 단추 위에서도 보이게 주색 22% 띠) · 안의 <i>(화살표 원) = 2.4초마다 오른쪽 위로 3px. 동작 줄이기 설정이면 멈춘다. */
.now-cta{position:relative;overflow:hidden;isolation:isolate}
.now-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 22%,transparent),transparent);animation:now-cta-shine 4s ease-in-out infinite}
.now-cta i{animation:now-cta-nudge 2.4s ease-in-out infinite}
@keyframes now-cta-shine{0%,62%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes now-cta-nudge{0%,70%,100%{transform:none}80%{transform:translate(3px,-3px)}90%{transform:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .now-cta::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}}
:root[data-theme="dark"] .now-cta::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
@media (prefers-reduced-motion:reduce){.now-cta::after,.now-cta i{animation:none}}

.slot:empty{display:none}