/* 밤코아 사이트 CSS — bamcoa/design/master_tpl.html 시안에서 추출. 문서(탭) 전용 규칙 제거.
폰트는 게이트 12(외부 연결 0)에 맞춰 자체 호스팅 Pretendard 로 바꿨다. */
:root{--gut:18px;--kr:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',sans-serif;--krm:'Pretendard Variable',ui-monospace,monospace}
/* 밤 업종 사이트 — 다크 단일 테마로 고정한다. OS 설정을 따르지 않는다. */
:root{
--bg:#08060C; --panel:#120F1A; --panel2:#181423; --sunk:#1E1930; --rule:#2A2440;
--ink:#F0EDF5; --ink2:#AFA7C0; --muted:#726A85;
--pink:#FF2E88; --pinkd:#B01A5C; --pinkbg:#220914;
--cyan:#00E5FF; --cyand:#0A93A8; --cyanbg:#04202A;
--ok:#3DD68C; --okbg:#0E2A1E; --wait:#E0A54C; --waitbg:#2A2113; --no:#E0705F;
--disp:var(--kr),'Apple SD Gothic Neo',sans-serif;
--sans:var(--kr),'Apple SD Gothic Neo',sans-serif;
--mono:var(--krm),ui-monospace,monospace;
--w:1080px; --wdoc:960px;
color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--sans);line-height:1.7;font-size:15.5px;margin:0}
img{max-width:100%;display:block}
a{color:var(--cyan)}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(28px,5.4vw,42px);line-height:1.16;font-weight:800;margin:0 0 12px}
h1,h2,h3{word-break:keep-all;overflow-wrap:anywhere}
h2{font-size:clamp(20px,3.6vw,25px);line-height:1.3;font-weight:800;margin:0 0 12px}
h3{font-size:16.5px;font-weight:700;margin:0 0 8px}
p{margin:0 0 13px;color:var(--ink2)}
strong{color:var(--ink);font-weight:600}
code{font-family:var(--mono);font-size:12.5px;background:var(--sunk);padding:1px 6px;border-radius:4px;color:var(--ink)}
mark{background:var(--cyanbg);color:var(--cyan);padding:1px 5px;border-radius:3px;font-weight:500}
.scroll{overflow-x:auto;margin:16px 0 20px;border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums;min-width:560px}
th{background:var(--sunk);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);font-weight:600;padding:9px 12px;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12.5px;white-space:nowrap}
td:first-child{font-family:var(--sans);font-size:13.5px;font-weight:500;white-space:normal}
td.tx{text-align:left;font-family:var(--sans);font-size:13px;white-space:normal;font-weight:400;color:var(--ink2)}
tbody tr:last-child td{border-bottom:0}
tfoot td{background:var(--sunk);font-weight:600;border-top:2px solid var(--rule)}
caption{caption-side:bottom;text-align:left;padding:9px 12px;font-size:11.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--rule)}.n{color:var(--no);font-weight:600}.w{color:var(--wait);font-weight:600}.c{color:var(--cyan);font-weight:600}.hl{color:var(--pink);font-weight:600}
.note{border-left:3px solid var(--cyan);background:var(--cyanbg);padding:15px 19px;border-radius:0 9px 9px 0;margin:18px 0;font-size:14px;color:var(--ink)}
.note b{color:var(--cyan)}
.note.w{border-left-color:var(--no);background:#2A1512}.note.w b{color:var(--no)}
.note.g{border-left-color:var(--ok);background:var(--okbg)}.note.g b{color:var(--ok)}
.code{background:var(--panel);border:1px solid var(--rule);border-radius:9px;padding:16px 18px;margin:16px 0;
font-family:var(--mono);font-size:12px;line-height:1.85;overflow-x:auto;white-space:pre;color:var(--ink2)}
.code b{color:var(--pink);font-weight:600}.code i{color:var(--muted);font-style:normal}.code em{color:var(--ok);font-style:normal;font-weight:600}
ol.rm{list-style:none;padding:0;margin:20px 0;counter-reset:r}
ol.rm>li{counter-increment:r;position:relative;padding:0 0 22px 46px;border-left:1px solid var(--rule);margin-left:12px}
ol.rm>li:last-child{border-left-color:transparent;padding-bottom:0}
ol.rm>li::before{content:counter(r);position:absolute;left:-12px;top:-2px;width:25px;height:25px;border-radius:7px;
background:var(--panel);border:1.5px solid var(--rule);color:var(--muted);font-family:var(--mono);font-size:11.5px;font-weight:600;display:grid;place-items:center}
ol.rm>li.now::before{border-color:var(--pink);color:var(--pink);box-shadow:0 0 0 3px var(--pinkbg)}
ol.rm h4{margin:0 0 5px;font-size:15px;font-weight:600}
ol.rm p{margin:0 0 7px;font-size:14px;max-width:62ch}
/* ── 사이트 시안 공통 ── */
/* top:48px 은 시안에 있던 알림 띠 자리다. 띠를 안 쓰는데 값만 남아서 상단바 위로
48px 이 뚫렸고, 그 틈으로 본문이 지나갔다(2026-09-04 사장님 지적). */
header.top{position:sticky;top:0;z-index:120;background:rgba(8,6,12,.88);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--rule)}
.tin{max-width:var(--w);margin:0 auto;padding:0 18px;height:58px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.mk{width:34px;height:34px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 50% 42%,#1D0913,#050308);
border:1.5px solid var(--cyan);display:grid;place-items:center;box-shadow:0 0 12px rgba(0,229,255,.4),inset 0 0 9px rgba(0,229,255,.16)}
.mk b{font-family:var(--disp);font-size:15px;font-weight:800;color:#fff;letter-spacing:-.05em;text-shadow:0 0 7px var(--pink),0 0 14px rgba(255,46,136,.75)}
.wm{display:flex;flex-direction:column;line-height:1}
.wm .nm{font-family:var(--disp);font-size:18px;font-weight:800;letter-spacing:-.045em;color:var(--ink)}
.wm .e{font-family:var(--mono);font-size:7.5px;letter-spacing:.3em;color:var(--cyan);margin-top:3px}
.tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{font-size:13.5px;font-weight:500;color:var(--ink2);text-decoration:none;padding:7px 11px;border-radius:8px;white-space:nowrap}
.tabs a:hover{background:var(--sunk);color:var(--ink)}
.tabs a.on{color:var(--pink);background:var(--pinkbg)}
.tright{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.live{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:5px 11px}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block;box-shadow:0 0 7px var(--ok);animation:bp 2.4s infinite}@keyframes bp{0%,100%{opacity:1}50%{opacity:.35}}
.live b{color:var(--ink);font-weight:600}
.ask{background:var(--pink);color:#fff;font-size:13px;font-weight:600;padding:8px 15px;border-radius:9px;text-decoration:none;white-space:nowrap}@media(max-width:900px){.live{display:none}}@media(max-width:640px){.wm .e{display:none}}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.ssec{padding:38px 0;border-top:1px solid var(--rule)}@media(min-width:760px){.ssec{padding:52px 0}}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.shead .more{font-size:12.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.shead .more:hover{color:var(--cyan)}
.ans{background:linear-gradient(100deg,var(--pinkbg),transparent 70%);border-left:3px solid var(--pink);border-radius:0 10px 10px 0;padding:13px 17px;margin:0 0 16px}
.ans p{margin:0;color:var(--ink);font-size:15px;line-height:1.72}
.ans b{color:var(--pink)}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(1.5px) saturate(120%);opacity:.62;transform:scale(1.06)}
.hov{position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 20%,rgba(255,46,136,.22),transparent 58%),linear-gradient(180deg,rgba(8,6,12,.55),rgba(8,6,12,.92))}
.hin{position:relative;max-width:var(--w);margin:0 auto;padding:44px var(--gut) 40px;display:grid;gap:26px;align-items:center}@media(min-width:940px){.hin{grid-template-columns:1fr 380px;padding:62px var(--gut) 56px}}
.eyeb{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:13px}
@media(max-width:639px){.eyeb{font-size:10px;letter-spacing:.1em}}
.hero h1 .gg{color:var(--pink);text-shadow:0 0 26px rgba(255,46,136,.4)}
.hero .hsub{font-size:16px;color:var(--ink2);max-width:40ch;margin-bottom:20px}
.hbtns{display:flex;gap:9px;flex-wrap:wrap}
.b1{background:var(--pink);color:#fff;padding:12px 22px;border-radius:10px;font-weight:600;text-decoration:none;font-size:14.5px;min-height:46px;line-height:22px}
.b2{border:1px solid var(--cyand);color:var(--cyan);padding:12px 22px;border-radius:10px;font-weight:600;text-decoration:none;font-size:14.5px;min-height:46px;line-height:22px;background:var(--cyanbg)}
.calc{background:var(--panel);border:1px solid var(--rule);border-radius:15px;padding:19px;box-shadow:0 18px 46px rgba(0,0,0,.45)}
.calc .ct{font-family:var(--disp);font-size:16px;font-weight:800;color:var(--ink);margin-bottom:3px}
.calc .cs{font-size:12px;color:var(--muted);margin-bottom:15px}
.fg{margin-bottom:12px}
.fl{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.opt{flex:1;min-width:0;padding:9px 6px;border-radius:9px;border:1px solid var(--rule);background:var(--sunk);color:var(--ink2);font-size:12.5px;cursor:pointer;font-family:var(--sans);white-space:nowrap;position:relative}
.opt[aria-pressed="true"]{background:var(--cyanbg);border-color:var(--cyan);color:var(--cyan);font-weight:600}
.opt .dcb{position:absolute;top:-7px;right:-4px;background:var(--pink);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;font-family:var(--mono)}
.brk{border-top:1px solid var(--rule);margin-top:15px;padding-top:13px}
.li{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--ink2)}
.li b{font-family:var(--mono);color:var(--ink);font-weight:500}
.tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);margin-top:10px;padding-top:12px}
.tot span{font-size:13.5px;font-weight:600;color:var(--ink)}
.tot b{font-family:var(--disp);font-size:23px;font-weight:800;color:var(--pink);letter-spacing:-.02em}
.cnote{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.6}
.grid{display:grid;gap:13px}@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}@media(min-width:880px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:13px;overflow:hidden;text-decoration:none;display:block;transition:border-color .16s,transform .16s}
.card:hover{border-color:var(--pink);transform:translateY(-2px)}
.thumb{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative}
.thumb .pin{position:absolute;left:9px;top:9px;background:rgba(8,6,12,.78);color:#fff;font-size:10.5px;font-family:var(--mono);padding:3px 8px;border-radius:6px}
.thumb .cnt{position:absolute;right:9px;bottom:9px;background:rgba(8,6,12,.78);color:var(--cyan);font-size:10px;font-family:var(--mono);padding:3px 8px;border-radius:6px}
.cbody{padding:13px 14px 14px}
.cbody .nm{font-family:var(--disp);font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.cbody .dsc{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:9px}
.tg{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.tg span{font-size:11px;color:var(--ink2);background:var(--sunk);border-radius:6px;padding:3px 7px}
.cprice{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);padding-top:9px;font-size:12px;color:var(--muted)}
.cprice b{font-family:var(--mono);color:var(--pink);font-size:13px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.chip{background:var(--panel);border:1px solid var(--rule);border-radius:9px;padding:8px 13px;font-size:13.5px;color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--pink);color:var(--ink)}
.chip b{color:var(--ink);font-weight:600}.chip .n{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.chip.on{border-color:var(--pink);background:var(--pinkbg)}.chip.on b{color:var(--pink)}
.links{display:grid;gap:8px}@media(min-width:620px){.links{grid-template-columns:1fr 1fr}}
/* .links 안의 링크에 스타일이 없어 기본 파란 밑줄로 나가고 있었다(2026-09-04 실측) */
/* 홈의 가이드 20편은 세로로 쌓으면 화면 하나를 통째로 먹는다 — 두 줄로 접는다. */
.links.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:340px){.links.g2{grid-template-columns:1fr}}
.links>a{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:13px 15px;border:1px solid var(--rule);border-radius:11px;background:var(--panel);
color:var(--ink2);text-decoration:none;font-size:14px;min-height:46px}
.links>a::after{content:"";width:7px;height:7px;border-top:1.5px solid var(--muted);
border-right:1.5px solid var(--muted);transform:rotate(45deg);flex:0 0 auto}
.links>a:hover{border-color:var(--pinkd);color:var(--ink)}
.links>a:hover::after{border-color:var(--pink)}
.links>a small{color:var(--muted);font-family:var(--mono);font-size:11px}
.lk{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:12px 15px;text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.lk:hover{border-color:var(--cyan)}
.links.eq .lk{min-height:56px}.links.eq .lk .t,.links.eq .lk .a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lk .t{font-size:13.5px;color:var(--ink);font-weight:500}.lk .a{font-family:var(--mono);font-size:11px;color:var(--muted)}
.pmeta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.pmeta b{color:var(--ink)}
.crumb{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em;margin-bottom:10px}
.crumb a{color:var(--muted);text-decoration:none}
.vn{background:var(--panel);border:1px solid var(--rule);border-radius:12px;overflow:hidden;display:flex}
.vn .vt{width:118px;flex:0 0 auto;background-size:cover;background-position:center;background-image:linear-gradient(140deg,#1E1930,#120F1A)}
.vn .vb{padding:13px 15px;flex:1;min-width:0}
.vn .vh{display:flex;justify-content:space-between;align-items:baseline;gap:9px;margin-bottom:4px}
.vn .nm{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--ink)}
.vn .st{font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:10px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.vn .st.open{color:var(--ok)}
.vn .mt{font-size:12.5px;color:var(--muted);line-height:1.65}
.vn.slot{border-style:dashed;border-color:var(--cyand);background:transparent}.vn.slot .nm{color:var(--cyan)}
.vlist{display:grid;gap:10px}
details{border:1px solid var(--rule);border-radius:11px;background:var(--panel);margin-bottom:7px}
summary{padding:13px 16px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--pink);font-weight:700}
details[open] summary::after{content:"−"}
details p{padding:0 16px 14px;margin:0;font-size:13.5px}
.cta{background:linear-gradient(150deg,var(--pinkbg),var(--panel) 65%);border:1px solid var(--pinkd);border-radius:15px;padding:24px 20px;text-align:center}
.cta h3{margin:0 0 7px;font-size:19px}.cta p{font-size:13px;margin-bottom:15px}
.btns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;min-height:46px;line-height:22px}
.btn.tg{background:var(--cyan);color:#04222A}.btn.kk{background:#FEE500;color:#191600}
.float{position:fixed;right:14px;bottom:16px;z-index:150;display:none;flex-direction:column;gap:8px}
.float.on{display:flex}
.float a{background:var(--panel);border:1px solid var(--rule);border-radius:26px;padding:10px 15px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.45);display:flex;align-items:center;gap:7px;min-height:44px}
.float a.p{background:var(--pink);border-color:var(--pink);color:#fff}
footer.f{border-top:1px solid var(--rule);margin-top:34px;padding:24px 0 84px;font-size:12px;color:var(--muted);line-height:1.85}
footer.f b{color:var(--ink2)}
/* ── 햄버거 · 서랍 (비사이드 구조) ── */
.mbtn{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--rule);background:var(--panel);cursor:pointer;padding:0;place-items:center}
.mbtn i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;margin:2px auto}
.drw{position:fixed;inset:0;z-index:500;display:none}
.drw.on{display:block}
.drw .bg{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.drw .pn{position:absolute;top:0;right:0;bottom:0;width:min(86vw,350px);background:var(--panel);border-left:1px solid var(--rule);overflow-y:auto;padding:16px var(--gut) 40px;animation:sl .18s ease-out}@keyframes sl{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.drw .pn{animation:none}}
.drw .dh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.drw .dh .nm{font-family:var(--disp);font-size:19px;font-weight:800;letter-spacing:-.04em}
.drw .dh .nm i{font-family:var(--mono);font-style:normal;font-size:8px;letter-spacing:.3em;color:var(--cyan);display:block;font-weight:500}
.drw .x{width:38px;height:38px;border-radius:10px;border:1px solid var(--rule);background:var(--sunk);color:var(--ink);font-size:20px;cursor:pointer;line-height:1}
.drw .st{display:grid;grid-template-columns:1fr 1fr;background:var(--sunk);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.drw .st b{color:var(--ink);font-size:15px;margin-left:6px;font-weight:600}
.drw .st span:last-child{text-align:right;border-left:1px solid var(--rule)}
.drw .cta2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.drw .cta2 a{padding:12px 8px;border-radius:10px;font-size:14px;font-weight:600;text-align:center;text-decoration:none;min-height:46px;line-height:22px}
.drw .cta2 .tg{background:var(--cyan);color:#04222A}.drw .cta2 .kk{background:#FEE500;color:#191600}
.drw .sc{display:flex;align-items:center;gap:10px;background:var(--pinkbg);border:1px solid var(--pinkd);border-radius:11px;padding:12px 14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:8px}
.drw .sc i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--pink);font-weight:600}
.drw .gl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:20px 0 6px;padding-top:16px;border-top:1px solid var(--rule)}
.drw .ls a{display:flex;justify-content:space-between;align-items:center;padding:11px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:15px;min-height:44px}
.drw .ls a.on{background:var(--sunk);color:var(--pink)}
.drw .ls a small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.drw .ls .lv{font-family:var(--mono);font-size:9.5px;color:#fff;background:var(--pinkd);padding:2px 7px;border-radius:9px;letter-spacing:.06em}
.drw .rg{display:flex;flex-wrap:wrap;gap:6px}
.drw .rg a{background:var(--sunk);border:1px solid var(--rule);border-radius:8px;padding:7px 11px;font-size:13px;color:var(--ink2);text-decoration:none}
.ans p{text-wrap:pretty}@media(max-width:639px){
header.top{top:0}}@media(max-width:939px){
.tabs{display:none}
.mbtn{display:grid}
.tin{gap:10px;height:56px}
.live{display:flex}
.tin .ask{display:none}}@media(max-width:400px){.wm .nm{font-size:17px}.live{padding:5px 9px}}@media(max-width:639px){
:root{--gut:16px}
body{font-size:15px}
.ssec{padding:28px 0}
.hin{padding:30px 16px 30px;gap:22px}
.hero .hsub{font-size:15px;margin-bottom:16px}
.wrap{padding:0 var(--gut)}
.pmeta{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.grid{grid-template-columns:1fr 1fr;gap:9px}
.cbody{padding:10px 11px 11px}
.cbody .nm{font-size:14px;margin-bottom:0}
.cbody .dsc,.cbody .tg{display:none}
.cprice{font-size:11px;margin-top:8px}
.cprice b{font-size:12.5px}
.thumb .cnt{font-size:9.5px}
.vn .vt{width:92px}
.vn .vb{padding:11px 12px}
.calc{padding:16px}
.code{white-space:pre-wrap;word-break:break-all;font-size:11.5px}
.cta{padding:20px 16px}
.float{left:0;right:0;bottom:0;flex-direction:row;gap:8px;background:rgba(8,6,12,.96);border-top:1px solid var(--rule);
padding:8px 12px calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(10px)}
.float a{flex:1;justify-content:center;border-radius:10px;box-shadow:none}
footer.f{padding-bottom:96px}
/* 표 → 행 카드. 가로 스크롤 없음. 라벨은 thead 에서 JS 가 data-l 로 옮긴다 */
.scroll{border:0;background:transparent;overflow:visible;margin:12px 0 16px}
table{min-width:0;display:block}
thead{display:none}
tbody,tfoot{display:block}
tr{display:block;background:var(--panel);border:1px solid var(--rule);border-radius:11px;margin-bottom:8px;padding:4px 13px}
tfoot tr{background:var(--sunk)}
td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right;border-bottom:1px solid var(--rule);padding:8px 0;white-space:normal;font-size:13px}
td:first-child{font-size:14.5px;font-weight:600;color:var(--ink);padding:10px 0 8px}
td::before{content:attr(data-l);color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;text-align:left;flex:0 0 auto}
td:first-child::before,td[data-l=""]::before{display:none}
td.tx{flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
tr td:last-child{border-bottom:0}
caption{display:block;border:0;padding:2px 2px 0}}
/* ── 다듬기 2차 ── */
:root{--muted:#837B98}
.tright{margin-left:auto}
.two{display:grid;gap:22px}@media(min-width:940px){.two{grid-template-columns:1fr 380px;align-items:start}.two .calc{position:sticky;top:78px}}
footer.ft{border-top:1px solid var(--rule);margin-top:44px;padding:34px 0 40px}
.fg4{display:grid;gap:26px;grid-template-columns:1.5fr 1fr 1fr 1fr}@media(max-width:760px){.fg4{grid-template-columns:1fr 1fr;gap:22px 18px}.fb{grid-column:1/-1}}
.fg4 h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:600}
.fg4 .col a{display:block;color:var(--ink2);text-decoration:none;font-size:13.5px;padding:4px 0;min-height:28px}
.fg4 .col a:hover{color:var(--ink)}
.fg4 .col a.mo{color:var(--cyan);font-family:var(--mono);font-size:11.5px;margin-top:4px}
.fb p{font-size:13px;color:var(--muted);margin:12px 0 14px;max-width:30ch}
.fch{display:flex;gap:8px;flex-wrap:wrap}
.fch a{display:inline-block;padding:8px 13px;border:1px solid var(--rule);border-radius:9px;font-size:12.5px;color:var(--ink);background:var(--panel);text-decoration:none}
.fbt{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;border-top:1px solid var(--rule);margin-top:26px;padding-top:16px;font-size:12px;color:var(--muted)}
.fbt a{color:var(--muted);text-decoration:none;margin-right:14px}
.fbt span:last-child a:last-child{margin-right:0}@media(max-width:639px){
footer.ft{padding-bottom:100px}
/* 지역 카드 : 가로 스와이프, 다음 카드가 살짝 보이게 */
.grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
.grid::-webkit-scrollbar{display:none}
.card{flex:0 0 74%;scroll-snap-align:start}
.cbody{padding:12px 13px 13px}.cbody .nm{font-size:15px;margin-bottom:4px}
.cbody .dsc{display:block}.cbody .tg{display:flex}.cprice{font-size:12px}
/* 숫자만 있는 표는 표로 남긴다 — 390px 에 4열이 들어간다 */
/* 3열 이상 표는 폭이 모자라 넘친다 — 컨테이너 «안에서» 가로로 넘기게 둔다.
overflow:hidden 이면 잘려서 보이지 않는다(2026-09-04 실측). */
.scroll:has(table.tight){border:1px solid var(--rule);background:var(--panel);
overflow-x:auto;overflow-y:hidden;border-radius:12px;margin:14px 0 18px;scrollbar-width:none}
.scroll:has(table.tight)::-webkit-scrollbar{display:none}
table.tight{min-width:max-content}
table.tight th,table.tight td{white-space:nowrap}
table.tight td.tx{white-space:normal;min-width:150px}
/* 3열 이상 숫자 표는 모바일에서 폭이 모자란다 — 컨테이너 안에서 가로로 넘긴다 */
.scroll{overflow-x:auto;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
table.tight{display:table;width:100%;min-width:0}
table.tight thead{display:table-header-group}
table.tight tbody,table.tight tfoot{display:table-row-group}
table.tight tr{display:table-row;background:transparent;border:0;border-radius:0;margin:0;padding:0}
table.tight th{display:table-cell;padding:8px 8px;font-size:9.5px;white-space:normal;line-height:1.3}
table.tight td{display:table-cell;padding:10px 8px;font-size:12px;text-align:left;border-bottom:1px solid var(--rule)}
table.tight th:first-child,table.tight td:first-child{text-align:left;padding-left:12px}
table.tight td:first-child{font-size:13px}
table.tight td::before{content:none}
table.tight tbody tr:last-child td{border-bottom:0}
table.tight.drop5 th:nth-child(5),table.tight.drop5 td:nth-child(5){display:none}
table.tight caption{display:table-caption;padding:8px 12px;border-top:1px solid var(--rule)}}@media(max-width:639px){
.fg4{grid-template-columns:1fr;gap:18px}
.fg4 .col a{display:inline-block;padding:6px 11px;margin:0 6px 6px 0;background:var(--panel);border:1px solid var(--rule);border-radius:8px;font-size:12.5px;min-height:0;color:var(--ink2)}
.fg4 .col a.mo{border-color:var(--cyand);margin-top:0}
footer.ft{margin-top:30px;padding-top:26px}}
.twoin{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.twoin h2{font-size:19px}
/* ── 선택기 · 검색 · 격자 규칙 : 같은 종류의 선택지는 같은 크기의 칸 ── */
.tin{gap:12px}
.tabs a{font-size:13px;padding:7px 9px}
.rgn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink2);background:var(--panel);border:1px solid var(--rule);border-radius:9px;padding:7px 12px;cursor:pointer;white-space:nowrap;font-family:var(--sans);flex:0 0 auto}
.rgn:hover{border-color:var(--cyan);color:var(--ink)}
.rgn i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--muted)}
.srch{display:flex;align-items:center;gap:6px;background:var(--sunk);border:1px solid var(--rule);border-radius:9px;padding:0 10px;height:36px;width:160px;flex:0 0 auto}
.srch svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;flex:0 0 auto}
.srch input{background:none;border:0;outline:0;color:var(--ink);font-family:var(--sans);font-size:13px;width:100%;min-width:0}
.srch input::placeholder{color:var(--muted)}
.srch.full{width:100%;height:44px;margin-bottom:12px}@media(max-width:1279px){.tin .srch{display:none}}@media(max-width:939px){.tin .rgn{display:none}}
.rpick .grp{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.rpick .grp button{font-family:var(--sans);font-size:13px;font-weight:600;padding:8px 4px;border-radius:9px;border:1px solid var(--rule);background:var(--panel);color:var(--ink2);cursor:pointer;min-height:46px;line-height:1.2}
.rpick .grp button.on{background:var(--pink);border-color:var(--pink);color:#fff}
.rpick .grp button small{display:block;font-family:var(--mono);font-size:10px;font-weight:500;opacity:.7;margin-top:2px}
.rpick .rc{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.rpick .rc a{padding:8px 4px;border-radius:8px;background:var(--sunk);border:1px solid var(--rule);color:var(--ink2);text-decoration:none;font-size:13px;min-height:40px;display:flex;align-items:center;justify-content:center}
.rpick .rc a:hover{border-color:var(--ink2);color:var(--ink)}
.rpick .rc a.on{border-color:var(--cyan);color:var(--cyan);background:var(--cyanbg);font-weight:600}@media(max-width:639px){.rpick .grp{grid-template-columns:repeat(4,1fr)}.rpick .grp button{font-size:12.5px;padding:8px 2px}.rpick .rc{grid-template-columns:repeat(4,1fr)}}
.jgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.jgrid a{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:12px 6px;text-align:center;text-decoration:none;min-height:66px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.jgrid a:hover{border-color:var(--pink)}
.jgrid a.on{border-color:var(--pink);background:var(--pinkbg)}
.jgrid a b{color:var(--ink);font-size:14px;font-weight:600}
.jgrid a span{font-family:var(--mono);font-size:11px;color:var(--muted)}@media(max-width:639px){.jgrid{grid-template-columns:repeat(3,1fr);gap:7px}.jgrid a{min-height:62px;padding:10px 4px}}
.pk{position:fixed;inset:0;z-index:520;display:none}.pk.on{display:block}
.pk .bg{position:absolute;inset:0;background:rgba(0,0,0,.64)}
.pk .pn{position:absolute;left:50%;top:76px;transform:translateX(-50%);width:min(92vw,720px);max-height:calc(100vh - 110px);overflow:auto;background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:20px 22px 22px;box-shadow:0 30px 70px rgba(0,0,0,.5)}@media(max-width:639px){.pk .pn{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:88vh;border-radius:16px 16px 0 0;padding:14px 16px 28px}}
.pk .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pk .ph b{font-family:var(--disp);font-size:17px;font-weight:800}
.pk .x{width:36px;height:36px;border-radius:9px;border:1px solid var(--rule);background:var(--sunk);color:var(--ink);font-size:18px;cursor:pointer}
.pk .gl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.pk .jg,.pnl .jg{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}@media(max-width:639px){.pk .jg,.pnl .jg{grid-template-columns:repeat(4,1fr)}}
.pk .jg a,.pnl .jg a{padding:9px 4px;text-align:center;border-radius:9px;border:1px solid var(--rule);background:var(--sunk);color:var(--ink2);font-size:13px;text-decoration:none;min-height:42px;display:flex;align-items:center;justify-content:center}
.pk .jg a.on,.pnl .jg a.on{background:var(--pinkbg);border-color:var(--pink);color:var(--pink);font-weight:600}
.pk .now{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
.pk .now b{color:var(--ink);font-weight:600}
.pk .now a{background:var(--pink);color:#fff;padding:9px 16px;border-radius:9px;text-decoration:none;font-weight:600;font-size:13.5px;white-space:nowrap}@media(max-width:639px){
.fg4{grid-template-columns:1fr 1fr;gap:18px 16px}
.fb{grid-column:1/-1}
.fg4 .col a{display:block;padding:5px 0;margin:0;background:none;border:0;border-radius:0;font-size:13.5px;min-height:0;color:var(--ink2)}
.fg4 .col a.mo{border:0;color:var(--cyan)}
.fg4 .col:last-child{grid-column:1/-1}
.fg4 .col:last-child a{display:inline-block;margin-right:16px}}
/* 클래스 충돌 수리 : 카드 태그 줄(.tg)과 텔레그램 버튼(.tg) */
.btns .btn.tg,.drw .cta2 a.tg{display:inline-flex;align-items:center;justify-content:center;gap:0;margin:0;flex-wrap:nowrap}
.btns .btn,.drw .cta2 a,.fch a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
/* 터치 영역 36px 이상 */
.shead .more,.crumb a,.fbt a{display:inline-flex;align-items:center;min-height:36px}
.fg4 .col a{min-height:36px;display:flex;align-items:center}@media(max-width:639px){.fg4 .col a{min-height:36px;padding:0}.fg4 .col:last-child a{display:inline-flex}}
/* 선택기 : 한 줄 세그먼트로 압축 */
.rpick .grp{gap:4px;margin-bottom:8px;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:4px}
.rpick .grp button{min-height:34px;padding:5px 4px;font-size:12.5px;border:0;background:transparent;border-radius:7px;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:5px}
.rpick .grp button small{display:inline;font-size:10px;margin:0;opacity:.65}
.rpick .grp button.on{background:var(--pink);color:#fff}
.rpick .rc{gap:5px}
.rpick .rc a{min-height:34px;padding:6px 4px;font-size:12.5px;border-radius:7px}@media(max-width:639px){.rpick .grp button{font-size:12px;padding:5px 2px}.rpick .grp button small{display:none}}
/* ── 상단바 두 축 선택기 ── */
header.top{position:sticky}
.sel{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.sel:hover,.sel.on{border-color:var(--pink);color:var(--pink)}
.sel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.sel i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6;margin-left:2px}
.sbtn{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--rule);background:var(--panel);cursor:pointer;place-items:center;flex:0 0 auto}
.sbtn svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2}
.tin .srch{width:200px;height:38px}@media(max-width:1279px){.tin .srch{display:none}.sbtn{display:grid}}@media(max-width:939px){.tin .live{display:none}.tin{gap:8px;padding:0 14px}.sel{padding:0 10px;font-size:13px;gap:6px}}@media(max-width:430px){.wm{display:none}.sel svg{display:none}}
.pnl{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--rule);box-shadow:0 24px 50px rgba(0,0,0,.5);display:none;max-height:calc(100vh - 120px);overflow:auto}
.pnl.on{display:block}
.pin{max-width:var(--w);margin:0 auto;padding:16px var(--gut) 18px}
.pt{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:15.5px;color:var(--ink);margin-bottom:12px}
.pt i{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.pt .x{margin-left:auto;width:34px;height:34px;border-radius:8px;border:1px solid var(--rule);background:var(--sunk);color:var(--ink);font-size:18px;cursor:pointer;line-height:1}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.g4.g6{grid-template-columns:repeat(6,1fr)}@media(max-width:639px){.g4.g6{grid-template-columns:repeat(4,1fr)}}
.g4 a,.g4 button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:42px;padding:6px 4px;border-radius:8px;border:1px solid var(--rule);background:var(--sunk);color:var(--ink2);font-family:var(--sans);font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;line-height:1.2}
.g4 a:hover,.g4 button:hover{border-color:var(--ink2);color:var(--ink)}
.g4 a.on,.g4 button.on{background:var(--pink);border-color:var(--pink);color:#fff}
.g4 small{font-family:var(--mono);font-size:10px;font-weight:500;opacity:.7}
.tl{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:0 4px;margin-top:10px}
.tl a{display:flex;align-items:center;min-height:40px;padding:0 10px;color:var(--ink2);font-size:14.5px;text-decoration:none;border-radius:6px}
.tl a:hover{color:var(--ink);background:var(--sunk)}
.tl a.on{color:var(--pink);font-weight:600}
.tl .sub{font-size:13px;color:var(--muted);padding-left:16px;position:relative}.tl .sub::before{content:"└";position:absolute;left:4px;top:50%;transform:translateY(-55%);font-size:11px;opacity:.6}
.tl .pw{display:flex;align-items:center;min-width:0}.tl .pw>a{flex:1 1 auto;min-width:0}.tl .tg{flex:0 0 auto;min-width:34px;height:34px;margin-left:2px;padding:0 6px;border:1px solid var(--rule);border-radius:6px;background:var(--sunk);color:var(--muted);font:600 12px/1 var(--mono);cursor:pointer}.tl .tg:hover,.tl .tg.on{color:var(--pink);border-color:var(--pinkd)}
.ps{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--muted)}
.ps b{color:var(--ink);font-weight:600}
.ps .go{margin-left:auto;background:var(--pink);color:#fff;padding:8px 18px;border-radius:8px;font-weight:600;text-decoration:none;font-size:13.5px}
.rpick[data-rp="grp"] .g4{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:4px;gap:4px}
.rpick[data-rp="grp"] .g4 button{border:0;background:transparent;min-height:34px;font-size:12.5px;border-radius:7px}
.rpick[data-rp="grp"] .g4 button.on{background:var(--pink)}@media(max-width:639px){.pin{padding:14px 16px 16px}.g4 a,.g4 button{font-size:13px}.tl{grid-template-columns:repeat(4,1fr)}.tl a{font-size:14px;justify-content:center;padding:0 4px}}@media(max-width:639px){.g4 small{display:none}.g4 a,.g4 button{white-space:nowrap}}
/* 푸터 : 상단 선택기와 겹치는 지역·업종 목록은 두지 않는다 */
footer.ft{margin-top:40px;padding:30px 0 34px}
.fx{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:start}
.fl2{display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:flex-end;max-width:600px}
.fl2 a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;color:var(--ink2);text-decoration:none;font-size:13.5px;border-radius:7px}
.fl2 a:hover{color:var(--ink);background:var(--sunk)}
.fb p{margin:10px 0 12px}@media(max-width:760px){.fx{grid-template-columns:1fr}.fl2{justify-content:flex-start;max-width:none;margin-left:-10px}}@media(max-width:639px){footer.ft{margin-top:28px;padding:24px 0 100px}}
/* 홈 히어로 : 선택기를 펼쳐 둔다 */
.hpick{background:rgba(18,15,26,.86);border:1px solid var(--rule);border-radius:14px;padding:16px 18px;backdrop-filter:blur(8px);margin-top:2px}
.hpick .gl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.hpick .g4{margin-bottom:14px}
.hpick .rpick .g4{margin-bottom:0}
.hpick .tl a{min-height:36px}
.hpick .ps{margin-top:12px}
.hero .hsub{margin-bottom:16px}@media(max-width:639px){.hpick{padding:14px 14px}.hpick .ps{flex-wrap:wrap}.hpick .ps .go{margin-left:auto}}@media(max-width:639px){.tl a{min-height:34px;font-size:13.5px}}
.tl{max-height:none}
/* ── PC 텍스트 내비 · 서랍 정보구조 ── */
.pcnav{display:flex;gap:2px;margin-left:2px;flex:0 0 auto}
.pcnav a{font-size:13.5px;color:var(--ink2);text-decoration:none;padding:7px 10px;border-radius:8px;white-space:nowrap}
.pcnav a:hover{color:var(--ink);background:var(--sunk)}@media(max-width:939px){.pcnav{display:none}}
.drw .ls a{min-height:42px;padding:9px 10px;font-size:14.5px}
.drw .gl{margin:16px 0 4px;padding-top:14px}
.drw .ls a .ar{font-family:var(--mono);font-size:12px;color:var(--muted)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 12px}
.steps li{counter-increment:s;position:relative;padding:0 0 10px 34px;font-size:14.5px;color:var(--ink2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:6px;background:var(--sunk);border:1px solid var(--rule);color:var(--cyan);font-family:var(--mono);font-size:11px;display:grid;place-items:center}
.steps b{color:var(--ink)}
.rv{display:grid;gap:8px}@media(min-width:640px){.rv{grid-template-columns:1fr 1fr 1fr}}
.rv div{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:12px 14px}
.rv b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.rv span{font-size:12.5px;color:var(--muted);line-height:1.6}
.rv i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--cyan)}
/* 모바일 : 히어로 선택기는 접어 두고 「바꾸기」로 펼친다 */
.chg{display:none}@media(max-width:639px){
.hpick{padding:12px 14px}
.hpick.fold .gl,.hpick.fold .g4,.hpick.fold .rpick{display:none}
.hpick.fold .ps{margin:0;padding:0;border:0}
.chg{display:inline-flex;align-items:center;gap:5px;margin-left:auto;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--rule);background:var(--sunk);color:var(--ink2);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer}
.chg i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6}
.hpick:not(.fold) .chg i{transform:rotate(180deg)}
.hpick .ps .go{margin-left:8px;padding:8px 12px;font-size:13px}
.hpick .ps{font-size:13px;gap:6px}}@media(min-width:940px){
.hin{align-items:stretch}
.hin>div:first-child{display:flex;flex-direction:column;justify-content:flex-start}
.hpick{flex:1;display:flex;flex-direction:column}
.hpick .ps{margin-top:auto}
.hin .calc{display:flex;flex-direction:column}
.hin .calc .cnote{margin-top:auto;padding-top:10px}}
ul.spec,ol.spec{margin:10px 0 16px;padding-left:22px}
/* ── 실장 랭킹 (4단계) — 낮은 가로 카드, 표처럼 쌓인다 ── */
.mg{display:grid;gap:6px}
.mgr{display:grid;grid-template-columns:44px minmax(0,1.3fr) minmax(0,1.6fr) auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:8px 12px;min-height:64px}
.mgr .rk{font-family:var(--disp);font-size:17px;font-weight:800;color:var(--muted);text-align:center}
.mgr.top .rk{color:var(--pink)}
.mgr .ph{width:44px;height:44px;border-radius:10px;background:linear-gradient(140deg,#2A1F3D,#120F1A);border:1px solid var(--rule);display:grid;place-items:center;font-family:var(--disp);font-weight:800;color:var(--ink2);font-size:15px;overflow:hidden}
.mgr .ph img{width:100%;height:100%;object-fit:cover}
.mgr .who{min-width:0}
.mgr .nm{font-family:var(--disp);font-size:14.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.2}
.mgr .lb{font-family:var(--mono);font-size:9px;font-weight:600;padding:2px 6px;border-radius:5px;background:var(--sunk);color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.mgr .lb.sp{background:var(--cyanbg);color:var(--cyan)}.mgr .lb.me{background:var(--pinkbg);color:var(--pink)}.mgr .lb.ev{background:#2A1F0E;color:var(--wait)}.mgr .lb.t3{background:var(--okbg);color:var(--ok)}
.mgr .vn2{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgr .st2{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mgr .st2 span{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;line-height:1.3}
.mgr .st2 b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;font-family:var(--sans)}
.mgr .go2{background:var(--pink);color:#fff;padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;height:36px;display:inline-flex;align-items:center}
.mgr.new .rk{font-size:13px}@media(max-width:639px){
.mgr{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"ph who go" "st st st";gap:8px 10px;padding:9px 11px}
.mgr .rk{grid-area:rk}.mgr .ph{grid-area:ph;width:40px;height:40px}.mgr .who{grid-area:who}.mgr .go2{grid-area:go;height:34px;padding:0 11px}
.mgr .st2{grid-area:st;border-top:1px solid var(--rule);padding-top:7px}}
/* 실장 실시간 현황 — 봇 /status 로 실장이 직접 갱신, Worker 에서 읽어 옴 */
.mgr .lv2{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;padding:4px 9px;border-radius:14px;background:var(--sunk);color:var(--ink2);white-space:nowrap;margin-top:6px}
.mgr .lv2 i{width:7px;height:7px;border-radius:50%;background:var(--muted);display:block}
.mgr .lv2.ok{background:var(--okbg);color:var(--ok)}.mgr .lv2.ok i{background:var(--ok);box-shadow:0 0 6px var(--ok);animation:bp 2.4s infinite}
.mgr .lv2.wait{background:var(--waitbg);color:var(--wait)}.mgr .lv2.wait i{background:var(--wait)}
.mgr .lv2.full{background:#2A1512;color:var(--no)}.mgr .lv2.full i{background:var(--no)}
.mgr .lv2 small{opacity:.6;font-size:9.5px}@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes glow{0%,100%{box-shadow:0 0 0 1px var(--pinkd),0 0 10px rgba(255,46,136,.12)}50%{box-shadow:0 0 0 1px var(--pink),0 0 22px rgba(255,46,136,.32)}}@keyframes chipok{0%,100%{box-shadow:0 0 0 0 rgba(61,214,140,0)}50%{box-shadow:0 0 0 4px rgba(61,214,140,.18)}}@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.mgr{position:relative}
.mgr.new::before{content:"";position:absolute;inset:-1px;border-radius:11px;padding:1px;pointer-events:none;
background:linear-gradient(115deg,transparent 35%,rgba(0,229,255,.75) 50%,transparent 65%);background-size:250% 100%;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:shine 4.5s linear infinite}
.mgr.vet{animation:glow 4s ease-in-out infinite}
.mgr .lv2.ok{animation:chipok 2.4s ease-in-out infinite}
.mgr .lv2.wait i{animation:blink 2s linear infinite}
.mgr .lv2.full{animation:chipok 1.2s ease-in-out infinite;box-shadow:0 0 0 0 rgba(224,112,95,0)}
.mgr .lv2.full i{animation:blink 1.1s steps(1) infinite}
.mgr .lb.ev{background:linear-gradient(90deg,#2A1F0E 0%,#6A4A12 50%,#2A1F0E 100%);background-size:200% 100%;animation:shimmer 3s linear infinite}
.mgr .lb.vt{background:var(--pinkbg);color:var(--pink)}
.vn .st.open::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:5px;box-shadow:0 0 6px var(--ok);animation:bp 2.4s infinite;vertical-align:1px}
.nb{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--cyanbg);color:var(--cyan);margin-left:8px;vertical-align:middle;letter-spacing:.06em}
.nb i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);animation:bp 2.4s infinite;display:block}
.drw .ls .lv{animation:chipok 2.4s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.mgr.new::before,.mgr.vet,.mgr .lv2,.mgr .lv2 i,.mgr .lb.ev,.vn .st.open::before,.nb i,.live i,.drw .ls .lv{animation:none!important}}
/* 업소 카드 — 이 사이트의 본체. 항목이 많아 표처럼 정렬한다 */
/* 업소 카드 사진 — 카드 높이만큼 늘리면 96px 폭에 280px 높이의 극단적인 세로 조각이 되어
룸이 안 보인다(사장님 지적 2026-09-04). 모바일은 위쪽 가로 배너, PC 는 정사각에 가깝게. */
/* 업소 카드는 가로다. 사진을 위로 올리면 카드 하나가 화면 반을 먹는다(사장님 지적
2026-09-04). 사진은 4:3 으로 고정하고 위쪽 정렬 — 카드 높이만큼 늘리면 세로 조각이 된다. */
/* 사진이 카드 높이를 채우고, 오른쪽은 그 높이에 들어가게 압축한다(사장님 지적). */
.vn.wide{align-items:flex-start}
.vn.wide>a{flex:0 0 auto;display:flex;padding:10px 0 10px 10px}
/* max-width 가 낮으면 aspect-ratio 를 지킬 수 없어 사진이 세로로 길어진다(2026-09-04 실측:
132×180). 폭 상한을 넉넉히 두면 카드 높이만큼 커지면서 4:3 에 가깝게 남는다. */
.vn.wide .vt{align-self:stretch;width:auto;aspect-ratio:4/3;min-width:126px;max-width:230px;
border-radius:10px}
/* 키·값을 그대로 두되(사장님 지시) 줄을 촘촘하게 해서 사진 높이 안에 들어가게 한다.
값은 자르지 않는다 — 줄바꿈은 하되 잘라 먹지 않는다. */
.vn .vb{padding:11px 14px 11px 13px;display:flex;flex-direction:column;justify-content:center}
.vn .vd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 14px;margin-top:5px}
.vn .vr{display:grid;grid-template-columns:40px 1fr;gap:8px;font-size:12.5px;line-height:1.45;
min-width:0}
.vn .vr.w{grid-column:1/-1}
.vn .vr>span{padding-top:1px}
.vn .vr>b{min-width:0;overflow-wrap:anywhere}
.vn .vd{display:grid;gap:5px;margin-top:8px}
.vn .vr{display:grid;grid-template-columns:52px 1fr;gap:10px;font-size:12.5px;line-height:1.6}
.vn .vr>span{color:var(--muted);font-family:var(--mono);font-size:10.5px;padding-top:2px}
.vn .vr>b{color:var(--ink2);font-weight:400}
@media(max-width:639px){
.vn.wide>a{padding:9px 0 9px 9px}
.vn.wide .vt{min-width:118px;max-width:152px}
.vn .vb{padding:9px 11px 9px 10px}
.vn .vd{grid-template-columns:1fr;gap:2px;margin-top:4px}
.vn .vr{grid-template-columns:36px 1fr;gap:7px;font-size:11.8px;line-height:1.4}
.vn .vm{margin-top:5px;padding-top:5px}
}
/* 부기 — 알아 두면 좋지만 읽지 않아도 되는 말. 본문과 눈에 띄게 구분한다 */
.fine{font-size:12.5px;line-height:1.75;color:var(--muted);margin:10px 0 0}
/* 업소 사진 자리 — 사진이 없으면 이니셜. 빈 상자를 두지 않는다 */
.vn .vt.ini{display:grid;place-items:center;background:linear-gradient(140deg,#241C36,#120F1A)}
.vn .vt.ini span{font-family:var(--disp);font-size:20px;font-weight:800;color:var(--muted);letter-spacing:-.04em}
/* 다른 업종 — 가로 스크롤. 세로로 쌓으면 공간만 먹는다 */
.jrow{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:2px var(--gut) 8px;scrollbar-width:none;scroll-padding-inline:var(--gut)}
.jrow::-webkit-scrollbar{display:none}
.jc{flex:0 0 148px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--rule);border-radius:11px;
padding:13px 14px;text-decoration:none;display:flex;flex-direction:column;gap:5px}
.jc:hover{border-color:var(--pink)}
.jc b{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--ink)}
.jc .p{font-family:var(--mono);font-size:12.5px;color:var(--pink);font-weight:600}
.jc .d{font-size:11.5px;color:var(--muted);line-height:1.5}
@media(max-width:639px){.jrow{margin:0 -16px;padding:2px 16px 8px}.jc{flex:0 0 136px}}
/* 아직 안내하지 않는 업종·지역 — 링크가 아니라 글자 */
.off{color:var(--muted);opacity:.55;cursor:default}
.g4 .off,.jg .off{display:flex;align-items:center;justify-content:center;min-height:42px;padding:6px 4px;
border-radius:8px;border:1px dashed var(--rule);background:transparent;font-size:13px}
.tl .off{display:flex;align-items:center;min-height:40px;padding:0 10px;font-size:14.5px}
.go.off{background:var(--sunk);color:var(--muted);pointer-events:none}
.drw .jg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.drw .jg a,.drw .jg .off{display:flex;align-items:center;justify-content:center;min-height:40px;
border:1px solid var(--rule);border-radius:8px;background:var(--sunk);color:var(--ink2);
text-decoration:none;font-size:13px}
.drw .jg a.on{border-color:var(--pink);color:var(--pink)}
/* 업소 카드 — 고르는 데 필요한 넷만 펴 두고 나머지는 접는다(사장님 지적 2026-09-04) */
.vn>a{text-decoration:none;display:block;flex:0 0 auto}
.vn a.nm{text-decoration:none}
.vn a.nm:hover{color:var(--pink)}
.vn .vm{margin-top:9px;border-top:1px solid var(--rule);padding-top:8px;display:inline-flex;
align-items:center;gap:5px;font-size:11.5px;font-family:var(--mono);color:var(--muted);
text-decoration:none;width:100%}
.vn .vm::after{content:"";width:6px;height:6px;border-top:1.4px solid currentColor;
border-right:1.4px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.vn .vm:hover{color:var(--pink)}
.vn .vm:hover::after{transform:rotate(45deg) translateX(2px)}
/* 상단바 텍스트 내비 — PC 에서만(모바일은 서랍이 맡는다, §4.1) */
.tnav{display:none;gap:14px;margin-left:6px}
@media(min-width:940px){.tnav{display:flex}}
.tnav a{color:var(--muted);font-size:13.5px;text-decoration:none;white-space:nowrap;padding:6px 2px}
.tnav a:hover{color:var(--ink)}
/* 업소 페이지 사진 — 설명이 붙은 격자(사장님 요청 2026-09-04) */
/* 사진은 세로로 쌓지 않고 가로로 넘긴다(사장님 지시 2026-09-04) */
.phg{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
padding:2px var(--gut) 8px;scrollbar-width:none;box-sizing:border-box;scroll-padding-inline:var(--gut)}
.phg::-webkit-scrollbar{display:none}
.phg .ph{flex:0 0 86%;scroll-snap-align:start}
@media(min-width:760px){
.phg{width:auto;max-width:none;margin:0;padding:0 0 8px}
.phg .ph{flex:0 0 300px}
}
.phg .ph{margin:0}
/* height:auto 가 없으면 img 의 height 속성이 aspect-ratio 를 이겨 세로로 길어진다
(2026-09-04 실측: 174×400). 비율은 정사각에 가까운 4:3. */
.phg .ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;
display:block;border:1px solid var(--rule);background:var(--sunk)}
.phg .ph figcaption{margin-top:6px;font-size:12px;color:var(--muted);font-family:var(--mono)}
/* 분위기 이미지 — 업소와 무관한 페이지 장식(§18). 본문 위에 얹지 않고 한 자리만 차지한다. */
/* 분위기 이미지 — 업소 사진과 «형태»가 달라야 구분된다(사장님 지적). 업소 사진은
카드 안의 작은 4:3, 이건 폭을 다 쓰는 시네마 비율에 아래로 어두워지는 띠. */
.mood{position:relative;margin:0 0 18px;border-radius:14px;overflow:hidden}
.mood img{width:100%;height:auto;aspect-ratio:24/7;max-height:230px;object-fit:cover;
object-position:center 26%;display:block}
.mood::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,6,12,.15) 0%,rgba(8,6,12,0) 38%,rgba(8,6,12,.72) 100%)}
@media(max-width:639px){.mood img{aspect-ratio:16/7}}
/* 업소 목록 — 가로 스크롤, 카드는 가로로 길고 세로로 짧은 직사각형(사장님 지시 2026-09-04).
카드 전체가 링크라 「자세히」 줄이 없고, 그만큼 세로가 짧다. */
/* 음수 여백 + 좌우 패딩은 스크롤 컨테이너 자체를 뷰포트보다 넓게 만든다(문서 392px).
폭을 100vw 로 못 박고 넘침을 자기 안에서 처리한다. */
.vlist{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;width:100vw;max-width:100vw;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
padding:2px var(--gut) 10px;scrollbar-width:none;box-sizing:border-box;scroll-padding-inline:var(--gut)}
.vlist::-webkit-scrollbar{display:none}
/* 390px 에서 «가로로 길고 세로로 짧게 + 큰 사진 + 글 안 잘림」은 동시에 안 된다.
사진을 4:3 으로 «고정»하고 위쪽에 붙인 뒤, 남는 폭을 글에 준다. */
/* 높이를 못 박으면 빈 칸이 남는다. 가로 스크롤은 flex 라 줄에서 «가장 큰 카드»에
높이가 맞춰지므로, 못 박지 않고 사진이 그 높이를 채우게 둔다. */
/* 카드 높이는 줄 안에서 같게 맞추고(높이가 들쭉날쭉하면 그게 더 지저분하다),
사진과 글을 세로 가운데로 둔다 — 그러면 아래쪽만 비는 일이 없다. */
.vlist{align-items:stretch}
.vlist>.vn{flex:0 0 92%;scroll-snap-align:start;min-height:0;text-decoration:none}
/* 사진을 늘려 카드 높이를 채우려 하면 글 폭을 잡아먹어 값이 밀린다. 4:3 «고정»으로
두고 위에 붙인다 — 카드끼리 높이는 flex stretch 가 맞춰 준다(2026-09-04 실측). */
.vlist>.vn .vt{align-self:center;width:132px;min-width:132px;max-width:132px;
aspect-ratio:4/3;height:auto}
.vlist>.vn>a{display:flex;align-items:center;padding:10px 0 10px 10px}
.vlist>.vn .vb{padding:11px 12px;min-width:0;justify-content:center}
.vlist>.vn .vh{margin-bottom:4px}
.vlist>.vn .nm{font-size:14.5px}
.vlist>.vn .vd{grid-template-columns:1fr;gap:2px;margin-top:0}
.vlist>.vn .vr{grid-template-columns:34px 1fr;gap:7px;font-size:11.4px;line-height:1.4}
@media(min-width:760px){
.vlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
align-items:stretch;overflow:visible;width:auto;max-width:none;margin:0;padding:0}
.vlist>.vn{flex:none}
.vlist>.vn .vt{width:182px;min-width:182px;max-width:182px}
.vlist>.vn .vr{font-size:12.3px;grid-template-columns:38px 1fr}
}
/* 업소 주류·안주 — 이름만 늘어놓는 자리라 표가 아니라 칩 묶음이 읽기 쉽다 */
.mn{margin:0 0 14px}
.mn .mh{font-size:12px;font-family:var(--mono);color:var(--muted);letter-spacing:.04em;margin-bottom:8px}
.mn .mh small{color:var(--pink);font-size:11px}
/* 주류 35종을 세로로 쌓으면 화면을 통째로 먹는다 — 두 줄짜리 가로 스크롤로 */
.mn .mg{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:6px;
overflow-x:auto;scroll-snap-type:x proximity;
width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
padding:2px var(--gut) 8px;scrollbar-width:none;box-sizing:border-box;
scroll-padding-inline:var(--gut)}
.mn .mg::-webkit-scrollbar{display:none}
.mn .mg span{white-space:nowrap;scroll-snap-align:start}
@media(min-width:760px){
.mn .mg{width:auto;max-width:none;margin:0;padding:0 0 6px}
}
.mn .mg span{padding:5px 10px;border-radius:8px;background:var(--sunk);border:1px solid var(--rule);
font-size:12.5px;color:var(--ink2)}
/* 라벨·값 2열 표 — 모바일에서도 표로 둔다. 행 카드로 바꾸면 「내용」 라벨이 줄마다
되풀이되면서 카드 더미가 된다(2026-09-04 사장님 지적). */
@media(max-width:639px){
table.kv{display:block;min-width:0}
table.kv thead{display:none}
table.kv tbody{display:block}
table.kv tr{display:grid;grid-template-columns:96px 1fr;gap:11px;background:transparent;
border:0;border-bottom:1px solid var(--rule);border-radius:0;margin:0;padding:9px 2px}
table.kv tbody tr:last-child{border-bottom:0}
table.kv td{display:block;padding:0;border:0;text-align:left;white-space:normal;
font-size:13px;line-height:1.55;color:var(--ink2);font-family:var(--sans)}
table.kv td::before{content:none}
table.kv td:first-child{font-size:11.5px;font-family:var(--sans);color:var(--muted);
font-weight:400;letter-spacing:0;padding-top:2px;word-break:keep-all}
table.kv caption{display:block;border:0;padding:8px 2px 0}
.scroll:has(table.kv){border:1px solid var(--rule);background:var(--panel);border-radius:12px;
padding:2px 13px;margin:12px 0 16px}
}
/* 이용 규칙 — 3열 표를 행 카드로 펴면 화면을 통째로 먹는다. 항목별로 접어 둔다. */
details.rl{border:1px solid var(--rule);border-radius:11px;background:var(--panel);margin-bottom:7px}
details.rl>summary{list-style:none;cursor:pointer;padding:12px 15px;font-size:14px;
font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
details.rl>summary::-webkit-details-marker{display:none}
details.rl>summary small{color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:400}
details.rl>summary::after{content:"";margin-left:auto;width:7px;height:7px;
border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
transform:rotate(45deg) translateY(-2px);transition:transform .15s}
details.rl[open]>summary::after{transform:rotate(-135deg)}
details.rl .ri{padding:0 15px 12px;border-top:1px solid var(--rule);padding-top:10px}
details.rl .ri p{margin:0 0 4px;font-size:13px;line-height:1.6;color:var(--ink2)}
details.rl .ri span{font-size:11.5px;color:var(--muted);font-family:var(--mono)}
/* 자체 제작 이미지 — 그 업소 실물이 아니라는 표시(§17) */
.vn .vt.gen{position:relative}
.vn .vt.gen[data-lb]::after{content:attr(data-lb)}
.vn .vt.gen::after{content:"참고 이미지";position:absolute;left:6px;bottom:6px;
background:rgba(8,6,12,.78);color:var(--muted);font-size:9.5px;font-family:var(--mono);
padding:2px 6px;border-radius:5px}
/* 주류 — 이름만 칩으로 두지 않고 병 사진 카드로 늘어놓는다(가로 스크롤) */
.brow{margin:0 0 16px}
.brow .bh{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;
font-size:12px;font-family:var(--mono);color:var(--muted);letter-spacing:.06em}
.brow .bh span{color:var(--pink);font-size:11px}
.brail{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
padding:2px var(--gut) 8px;box-sizing:border-box;scroll-padding-inline:var(--gut)}
.brail::-webkit-scrollbar{display:none}
.bc{flex:0 0 124px;height:176px;scroll-snap-align:start;position:relative;
border:1px solid var(--rule);border-radius:13px;background:var(--panel);
padding:11px 10px;display:flex;flex-direction:column;justify-content:flex-end}
.bc .bimg{position:absolute;left:11px;right:11px;top:12px;height:104px;background-size:contain;
background-repeat:no-repeat;background-position:center bottom;
filter:drop-shadow(0 8px 14px rgba(0,0,0,.7))}
.bc .bimg.none{background:radial-gradient(circle at 50% 70%,var(--sunk),transparent 70%)}
.bc b{font-size:12px;font-weight:600;line-height:1.35;color:var(--ink);word-break:keep-all}
@media(min-width:760px){
.brail{width:auto;max-width:none;margin:0;padding:2px 0 8px}
.bc{flex:0 0 138px;height:190px}
}
/* 검색 결과 — 상단바 폼 아래로 펴지는 목록과 패널 안의 목록이 같은 모양을 쓴다. */
.sres{display:none;margin-top:10px}
.sres.on{display:block}
.sres.pop{position:absolute;top:46px;right:0;width:min(340px,86vw);z-index:60;
background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:6px;
box-shadow:0 16px 40px rgba(0,0,0,.45);max-height:60vh;overflow-y:auto}
.sres a{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:9px;
text-decoration:none;color:var(--ink);font-size:14px}
.sres a:hover{background:var(--sunk)}
.sres a b{font-weight:600}
.sres a span{font-size:12px;color:var(--muted);font-family:var(--mono)}
.sres .none{margin:0;padding:10px 11px;font-size:13px;color:var(--muted)}
.tin{position:relative}
/* 가이드 허브의 편 목록 — 표로 두면 이름 열이 모바일에서 넘친다. */
.gcards{display:grid;gap:8px}
@media(min-width:760px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gcards a{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:11px;
background:var(--sunk);border:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.gcards a:hover{border-color:var(--brand)}
.gcards a b{font-size:15px;font-weight:600}
.gcards a span{font-size:12.5px;color:var(--muted);line-height:1.5}
/* 카드 사진을 img 로 옮겼다 — 배경 이미지는 화면 밖에서도 전부 내려받는다. */
.vn .vt{overflow:hidden;position:relative}
.vn .vt>img{width:100%;height:100%;object-fit:cover;display:block}
.bc .bimg>img{width:100%;height:100%;object-fit:contain;display:block}
.bc .bimg.ph>img{object-fit:cover;border-radius:8px}
/* 선택기의 「전체」 — 고른 조건을 되돌리는 자리. 다른 칸과 같은 크기로 두되 표시를 준다. */
.jg .all,.tl .all{border-color:var(--brand);color:var(--brand)}
/* 계산기에서 바로 업소 목록으로 — 값을 본 다음에 갈 곳이 있어야 한다. */
.calc .cgo{display:block;margin:12px 0 0;padding:12px 14px;border-radius:11px;text-align:center;
background:var(--brand);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none}
.calc .cgo:hover{filter:brightness(1.06)}
/* 다국어 페이지(§2.1) — 한국어 서랍·선택기 대신 다섯 장을 가로로 세운 얇은 머리만 둔다.
외국인 손님에게 133개 지역 선택기를 내밀어 봐야 읽지 못한다. */
.lnav{display:flex;gap:6px;overflow-x:auto;padding:0 var(--gut) 10px;
scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch}
.lnav::-webkit-scrollbar{display:none}
.lnav a{flex:0 0 auto;padding:7px 13px;border:1px solid var(--rule);border-radius:999px;
font-size:13px;color:var(--muted);background:var(--panel);text-decoration:none;white-space:nowrap}
.lnav a.on{color:var(--ink);border-color:var(--pinkd);background:var(--pinkbg)}
.lsw{margin-left:auto;display:flex;gap:6px}
.lsw a{padding:6px 11px;border:1px solid var(--rule);border-radius:8px;font-size:12.5px;
color:var(--muted);text-decoration:none;white-space:nowrap}
.lsw a:hover{color:var(--ink)}
/* 표 안의 링크 — 다국어 지역 표가 한국어 본문으로 내려가는 길이다(2026-09-05).
기본 파란 밑줄이 그대로 나오면 사이트 안에서 그 자리만 남의 것처럼 보인다. */
table a{color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--cyand)}
table a:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* 지역으로 찾기 — 130곳을 한 줄씩 늘어놓으면 홈이 끝없이 길어진다(2026-09-05).
권역으로 접고 안은 격자로 깐다. 역 이름은 상호보다 작게 두어 한 칸에 들어간다. */
.rg{border:1px solid var(--rule);border-radius:10px;margin:0 0 8px;background:var(--panel)}
.rg summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:14px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.rg summary::-webkit-details-marker{display:none}
.rg summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:8px;transition:transform .15s}
.rg[open] summary::after{transform:rotate(-135deg)}
.rg summary span{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:500;margin-left:auto;margin-right:6px}
.rgg{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:0 10px 10px}
.rgg a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:7px 3px;border-radius:8px;background:var(--sunk);border:1px solid var(--rule);text-decoration:none;min-height:42px}
.rgg a b{color:var(--ink);font-size:13px;font-weight:600;line-height:1.15}
.rgg a i{font-family:var(--mono);font-style:normal;font-size:9.5px;color:var(--muted);line-height:1.15}
.rgg a:hover{border-color:var(--pink)}.rgg a:hover b{color:var(--pink)}
@media(max-width:639px){.rgg{grid-template-columns:repeat(3,1fr)}}
/* 서랍의 지역 목록도 한 줄에 하나씩이라 길었다 — 두 칸으로 깐다. */
.drw .ls.two{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.drw .ls.two a{padding:9px 8px;font-size:14px;min-height:40px}
/* 긴 표는 앞머리만 보이고 접어 둔다 — 예순 줄을 펼치면 휴대폰에서 화면 몇 개다. */
details.more{margin:8px 0 0}
details.more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--rule);border-radius:9px;background:var(--panel);color:var(--ink2);font-size:13px;font-weight:600}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"";width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-3px}
details.more[open] summary::after{transform:rotate(-135deg);margin-top:2px}
details.more summary:hover{border-color:var(--pink);color:var(--pink)}
details.more .scroll{margin-top:8px}
/* 권역별 표가 연달아 붙을 때 숨 쉴 자리 */
.scroll + h3,.sec h3 + .scroll{margin-top:14px}
/* 계산기 결과 아래 문의 — 금액을 본 직후가 문의 확률이 가장 높다(명세 §21). */
.calc .cask{display:block;text-align:center;margin:7px 0 0;padding:11px 12px;border-radius:10px;
background:var(--pink);color:#fff;text-decoration:none;font-size:14px;font-weight:700}
.calc .cask:hover{filter:brightness(1.08)}
/* 표 아래 한 줄짜리 문의 — 금액을 본 자리에서 바로 물을 수 있게(명세 §11). */
.askl{margin:-6px 0 18px}
.askl a{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;
color:var(--pink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.askl a:hover{border-bottom-color:var(--pink)}
/* 제목 아래 작은 문의 링크 — 큰 버튼이 아니라 한 줄이라야 광고 사이트로 안 읽힌다. */
.askt{margin:9px 0 0}
.askt a{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;
color:var(--pink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.askt a:hover{border-bottom-color:var(--pink)}
/* 서랍의 「업종 선택 · 지역 선택」 두 줄 — 목록 대신 상단 패널을 연다(§4.4). */
.drw .ls button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:11px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;min-height:44px;cursor:pointer;text-align:left}
.drw .ls button small{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:500}
.drw .ls button:hover{background:var(--sunk);color:var(--pink)}
/* 접힌 절 — 손님이 먼저 볼 것(시세·업소·문의)만 펼쳐 두고 나머지는 제목만 보인다(사장님 2026-09-06: 심플하게) */
details.fold{padding:0}details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}details.fold>summary::-webkit-details-marker{display:none}details.fold>summary h2{margin:0;font-size:16px;font-weight:600;color:var(--ink2)}details.fold>summary::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-right:6px;transition:transform .15s}details.fold[open]>summary::after{transform:rotate(-135deg)}details.fold[open]>summary h2{color:var(--ink)}details.fold>*:not(summary){margin-bottom:22px}
/* ── 새 뼈대(2026-09-07 시안): 첫 화면 숫자 셋·버튼·안내판, 여섯 절, 하단 바, 선택기 하나 ── */
.v2h{position:relative;border-bottom:1px solid var(--rule);background:linear-gradient(180deg,#1b1330,var(--bg))}
.v2h.img{background-size:cover;background-position:center}.v2h.img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,12,.32),rgba(8,6,12,.90))}
.v2in{position:relative;max-width:var(--w);margin:0 auto;padding:30px var(--gut) 22px}
.v2in h1{font-size:30px;line-height:1.18;margin:0 0 8px;letter-spacing:-.02em}
.v2in .hsub{font-size:15px;color:var(--ink2);max-width:62ch;margin:0 0 14px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;max-width:560px}
.facts div{background:rgba(255,255,255,.04);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;min-width:0}
.facts b{display:block;font-family:var(--mono);font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.facts span{font-size:11.5px;color:var(--muted)}
.hbtns{display:flex;gap:8px;flex-wrap:wrap}.hbtns .btn{border:1px solid var(--rule);background:var(--sunk);color:var(--ink);padding:0 16px;min-height:42px;display:inline-flex;align-items:center}.hbtns .btn.p{background:var(--pink);border-color:var(--pink);color:#fff}
.guide{border-bottom:1px solid var(--rule);background:var(--panel)}.gin{max-width:var(--w);margin:0 auto;padding:10px var(--gut);display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.gin::-webkit-scrollbar{display:none}
.gin a{flex:0 0 auto;font-size:12.5px;color:var(--ink2);text-decoration:none;padding:6px 11px;border-radius:999px;border:1px solid var(--rule);min-height:32px;display:inline-flex;align-items:center}.gin a b{color:var(--pink);font-family:var(--mono);font-size:11px;margin-right:5px}
.ssec.v2 h2 em{font-style:normal;color:var(--pink);font-family:var(--mono);font-size:12px;margin-right:8px;vertical-align:middle}
details.sub{border:1px solid var(--rule);border-radius:10px;background:var(--panel);margin:12px 0 0}details.sub>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}details.sub>summary::-webkit-details-marker{display:none}
details.sub>summary h3{margin:0;font-size:14.5px;font-weight:600;color:var(--ink2)}details.sub>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-right:4px;flex:0 0 auto}details.sub[open]>summary::after{transform:rotate(-135deg)}details.sub>*:not(summary){padding:0 14px 14px}details.sub .ans{margin-top:0}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}.steps div{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;font-size:13.5px}.steps b{display:block;color:var(--wait);font-family:var(--mono);font-size:11.5px;margin-bottom:2px}
.fbar{display:flex;gap:6px;flex:1 1 auto;min-width:0}.fbar .sel{flex:1 1 0;min-width:0;justify-content:space-between;gap:6px}.fbar .sel b{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fbar .sel span{color:var(--muted);font-weight:500;flex:0 0 auto}
.rp3{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.rp3 .col{background:var(--sunk);border:1px solid var(--rule);border-radius:10px;padding:6px;max-height:340px;overflow-y:auto}.rp3 .col a,.rp3 .col span{display:flex;justify-content:space-between;align-items:center;min-height:38px;padding:0 10px;border-radius:7px;color:var(--ink2);text-decoration:none;font-size:13.5px}.rp3 .col a.on{background:rgba(255,46,136,.14);color:var(--pink);font-weight:700}.rp3 .col a small{color:var(--muted);font-family:var(--mono);font-size:11px}.rp3 .col span.off{color:var(--muted);opacity:.6}.rp3 .col a:hover{background:var(--panel)}
.rp3 .col .all{color:var(--ink);font-weight:600;border-bottom:1px solid var(--rule);border-radius:0;margin-bottom:4px}
.tg3{display:grid;gap:8px}.tg3>div{background:var(--sunk);border:1px solid var(--rule);border-radius:10px;padding:8px 10px}.tg3 .gl{margin:0 0 6px}.tg3 .jg{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}.tg3 .jg a,.tg3 .jg span{min-height:34px;padding:0 12px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--rule);background:var(--panel);font-size:13px;color:var(--ink2);text-decoration:none}.tg3 .jg a.on{border-color:var(--pink);color:var(--pink)}.tg3 .jg span.off{opacity:.45}
.float.v2bar{gap:6px}.float.v2bar a{flex:1 1 0;min-height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}.float.v2bar a.p{flex:2 1 0}
.hchips{display:flex;flex-wrap:wrap;gap:6px}.hchips a{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:var(--panel);color:var(--ink2);text-decoration:none;font-size:13px}.hchips a small{color:var(--muted);font-family:var(--mono);font-size:11px}
@media(max-width:639px){.v2in{padding:22px 16px 18px}.v2in h1{font-size:25px}.facts b{font-size:15px}.hbtns .btn{flex:1 1 auto;justify-content:center}.rp3 .col{max-height:300px}}
.vn .vt.gen img{width:100%;height:100%;object-fit:cover;display:block}
html{scroll-behavior:smooth}.ssec,[id]{scroll-margin-top:64px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* flow — 사진 한 장 + 번호 + 설명(2026-09-07) */
.flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}.flow .fs{background:var(--panel);border:1px solid var(--rule);border-radius:12px;overflow:hidden}.flow .fs img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.flow .fs b{display:block;padding:10px 12px 2px;color:var(--wait);font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}.flow .fs p{margin:0;padding:0 12px 10px;font-size:13.5px;line-height:1.6;color:var(--ink2)}.flow .fs p:last-child{padding-bottom:12px}@media(max-width:639px){.flow{grid-template-columns:1fr}}
details.sub .jrow{margin:0;padding:2px 0 8px;scroll-padding-inline:0}
/* 다음 판 비례(2026-09-07) — 제목 46/30, 절 간격 88, 강조색은 문의 버튼과 값에만 */
.v2in{padding:44px var(--gut) 34px}
.v2in h1{font-size:46px;line-height:1.1;letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance}
.v2in .hsub2{font-size:21px;font-weight:700;color:#cdb0ff;margin:0 0 12px;letter-spacing:-.01em}
.v2in .hsub{font-size:16.5px;max-width:60ch;margin:0 0 22px}
.hgrid{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:end}
.hbox{background:rgba(21,18,32,.85);border:1px solid var(--rule);border-radius:14px;padding:16px 18px}
.hbox .t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--wait);margin-bottom:8px}
.hbox .r{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--rule);font-size:14px}.hbox .r:first-of-type{border-top:0}.hbox .r span{color:var(--muted);flex:0 0 auto}.hbox .r b{font-weight:700;text-align:right;min-width:0}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:var(--w);margin:26px auto 0;padding:0 var(--gut)}
.four div{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:16px 16px 14px}
.four i{font-family:var(--mono);font-size:11px;color:var(--wait);letter-spacing:.14em;font-style:normal}.four b{display:block;font-size:17px;margin:6px 0 4px}.four p{margin:0;font-size:13.5px;color:var(--muted)}
.ssec.v2{padding:88px 0 0;border-top:0}.ssec.v2:last-of-type{padding-bottom:70px}
.ssec.v2 .eye{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--wait);margin-bottom:8px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.ssec.v2 h2{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.ssec.v2 h2 em{display:none}
.ssec.v2>.ans{background:none;border:0;padding:0;margin:0 0 22px;border-radius:0}.ssec.v2>.ans p{font-size:16px;color:var(--ink2);max-width:62ch}.ssec.v2>.ans b{color:var(--ink)}
.askl a{color:var(--ink2)}.jc .p{color:var(--ink)}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}.cards4.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards4>div{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:16px 16px 14px;position:relative;overflow:visible}
.cards4 i{font-family:var(--mono);font-size:11px;color:var(--wait);letter-spacing:.14em;font-style:normal}.cards4 b{display:block;font-size:17px;margin:8px 0 6px;line-height:1.3}.cards4 p{margin:0;font-size:14px;color:var(--ink2)}
.cards4 .n{position:absolute;right:14px;bottom:-14px;font-size:68px;font-weight:900;color:rgba(255,255,255,.05);line-height:1}
.wrap p{max-width:70ch}
@media(max-width:639px){.cards4>div{padding:12px 12px 11px}.cards4 b{font-size:15px;margin:6px 0 5px}.cards4 p{font-size:13px;line-height:1.55;word-break:keep-all}.cards4 i{font-size:10px;letter-spacing:.06em}.cards4 .n{font-size:44px;right:10px;bottom:-8px;color:rgba(255,255,255,.035)}.v2in{padding:30px 16px 24px}.v2in h1{font-size:33px}.v2in .hsub2{font-size:17px}.hgrid{grid-template-columns:1fr;gap:16px}.four{grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding:0 16px}.four b{font-size:15px}.ssec.v2{padding:56px 0 0}.ssec.v2 h2{font-size:24px}.cards4,.cards4.c3{grid-template-columns:1fr 1fr}}
@media(min-width:640px) and (max-width:939px){.hgrid{grid-template-columns:1fr}.cards4{grid-template-columns:1fr 1fr}}
/* 세로 업소 카드 · 격자 · 더 보기(2026-09-07 다음 판) */
.vlist.tall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.vn.tall{display:flex;flex-direction:column;align-items:stretch;padding:0;border-radius:14px}
.vn.tall .vt{width:auto;min-width:0;max-width:none;aspect-ratio:4/3;position:relative}
.vn.tall .vt img{width:100%;height:100%;object-fit:cover;display:block}
.vn.tall .vt.ini{display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:26px;color:var(--ink2);background:linear-gradient(140deg,#2A1F3D,#120F1A)}
.vn.tall .vt.gen::after{content:"참고 이미지";position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:10px;background:rgba(0,0,0,.55);color:#cfc8d6;padding:2px 7px;border-radius:999px}
.vn.tall .vb{padding:11px 13px 13px}
.vn.tall .vh{align-items:center;margin-bottom:5px}.vn.tall .nm{font-size:15.5px;line-height:1.25}
.vn.tall .vl{font-size:13px;color:var(--ink2);line-height:1.5}.vn.tall .vl2{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.vmore{margin-top:14px}.vmore>summary{list-style:none;cursor:pointer;text-align:center;padding:12px;border:1px dashed var(--rule);border-radius:12px;color:var(--ink2);font-weight:600}.vmore>summary::-webkit-details-marker{display:none}.vmore[open]>summary{margin-bottom:14px}
@media(max-width:939px){.vlist.tall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:639px){.vlist.tall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.vn.tall .vb{padding:9px 10px 11px}.vn.tall .nm{font-size:14px}.vn.tall .vl{font-size:12px}.vn.tall .vl2{font-size:11.5px}}
/* 방문 직전 확인(4단계) */
.chk{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}.chk div{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:13px 15px;display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55}.chk div::before{content:"✓";color:var(--ok);font-weight:900;flex:0 0 auto}
@media(max-width:639px){.chk{grid-template-columns:1fr}}
/* 후기 카드(5.2) · 신선도 줄(5.1) */
.rvw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rv{border:1px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--panel)}
.rv .rd{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:6px}.rv p{margin:0;font-size:14px;line-height:1.6}
@media(max-width:639px){.rvw{grid-template-columns:1fr}}
.hbox .r.fr b{color:var(--wait)}
/* 2026-09-09 외관 전수조사 보수 — 잘림·대비·터치·작은 글씨 */
:root{--pinkbtn:#E01F70} /* 흰 글씨를 얹는 버튼용 진한 핑크(대비 4.57:1) */
.btn.p,.hbtns .btn.p,.ask{background:var(--pinkbtn);border-color:var(--pinkbtn)}
@media(max-width:639px){
.facts{grid-template-columns:1fr 1fr} /* 3칸에 「00:00~15:00」이 안 들어가 말줄임으로 잘렸다 */
.facts b{font-size:14px}
.facts div:last-child{grid-column:1 / -1}
.cards4 .n{color:rgba(255,255,255,.028)}
table th{font-size:11px}
table td,table th{padding-top:9px;padding-bottom:9px} /* 표 안 링크 터치 영역 */
table td a,table th a{display:inline-block;padding:3px 0}
small{font-size:11px}
}
/* 2026-09-09 접기 남발 정리 — 펼쳐 둘 절은 평문(.plain), 접는 절은 상자 대신 구분선 */
.plain{margin:16px 0 0}
.plain>h3{margin:0 0 8px;font-size:14.5px;font-weight:700;color:var(--ink)}
.plain>h3::before{content:"";display:inline-block;width:3px;height:13px;background:var(--pink);
border-radius:2px;margin-right:8px;vertical-align:-1px}
details.sub{border:0;border-top:1px solid var(--rule);border-radius:0;background:transparent;margin:0}
details.sub>summary{padding:12px 2px}
details.sub>summary h3{color:var(--ink2)}
details.sub[open]>summary h3{color:var(--ink)}
details.sub>div,details.sub>p,details.sub>table,details.sub>.ans{margin-bottom:14px}
/* 2026-09-09 표 가독성·터치 — table.tight th 가 9.5px 로 특이도에서 이겨 안 바뀌었다 */
@media(max-width:639px){
table.tight th{font-size:11px}
table.tight td,table.tight th{padding-top:9px;padding-bottom:9px}
table td a{display:inline-block;padding:4px 0;min-height:22px}
}
/* 2026-09-09 가독성 2차 — 작은 글씨 하한 11px · 흰 글씨 얹는 분홍은 전부 --pinkbtn · 보조색 대비 */
:root{--muted:#7F7794} /* 4.25:1 → 4.62:1 (본문 보조 텍스트가 여기 다 걸려 있다) */
.cask{background:var(--pinkbtn)}
.dcb{background:var(--pinkbtn);font-size:10px}
.st{font-size:11px}
.fl{font-size:11px;letter-spacing:.06em}
.gl{font-size:11px;letter-spacing:.1em}
.eyeb{font-size:11.5px;letter-spacing:.14em}
.crumb{font-size:12px}
small{font-size:11.5px}
.drw .ls .lv{font-size:11px}
@media(max-width:639px){
.eyeb{font-size:11px;letter-spacing:.1em}
.four i,.cards4 i{font-size:11px}
}
/* 긴 표의 「+N」 토글 — 표 바로 아래 붙어 한 덩어리로 읽히게 */
details.tmore{margin:-2px 0 14px}
details.tmore>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
padding:7px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);
color:var(--ink2);font-family:var(--mono);font-size:11.5px;min-height:32px}
details.tmore>summary::-webkit-details-marker{display:none}
details.tmore>summary::after{content:"▾";font-size:10px;color:var(--muted)}
details.tmore[open]>summary::after{content:"▴"}
details.tmore>.scroll{margin-top:8px}
/* 2026-09-09 가독성 3차 — --sunk 배경 위에서도 4.5:1 을 넘기고, 라벨 하한을 11.5px 로 */
:root{--muted:#8C84A0}
.eyeb,.gl,.t,.fl,.st,small,.crumb{font-size:11.5px}
.cards4 i,.four i{font-size:11.5px}
a,summary,button{min-height:34px}
a.tag,a.chip,.lnav a,.tnav a{padding:6px 10px}
table td a{padding:5px 0;min-height:26px}
/* 2026-09-09 가독성 4차 — 부모로 한정된 규칙이 이겨서 3차가 일부 안 먹었다(특이도 맞춤) */
.calc .cask{background:var(--pinkbtn)}
.opt .dcb{background:var(--pinkbtn);font-size:10.5px}
.lk .a{font-size:11.5px}
.hbox .t{font-size:11.5px}
.vn .st,.vh .st,.st.open{font-size:11.5px}
.mgr .st2 span{font-size:11.5px}
/* 카드 안 인라인 링크는 세로 여백이 없어 손가락이 닿지 않는다 */
.cards4 a,.four a,.lk a,.vn a{display:inline-block;padding:3px 0}
/* 2026-09-09 가독성 5차 — 남은 10~11px 라벨과 표 안 링크 터치 높이 */
.tright .live{font-size:11.5px}
.bh span{font-size:11.5px}
.opt .dcb{font-size:11.5px;padding:2px 6px}
.calc .cnote{font-size:11.5px}
.pn .gl{font-size:11.5px}
table td.tx a{padding:7px 0;min-height:34px}
/* 2026-09-09 마무리 — 남은 라벨 하한, 다국어 지역 링크 터치, 절 간격 소폭 압축 */
.bh span,.vh span,.pk span{font-size:11.5px}
.lnav a,.tnav a{padding:7px 11px;display:inline-block}
@media(max-width:639px){.ssec.v2{padding-top:42px}.ssec.v2:last-of-type{padding-bottom:54px}}
.brow .bh span{font-size:11.5px}
/* ── 로고 2026-09-09 ─────────────────────────────────────────────
「밤」 한 글자만 보이던 원형을 «초승달 심볼 + 밤코아 + NIGHT KOREA» 로 바꿨다.
모바일에서 워드마크를 통째로 숨기고 있어 브랜드 이름이 화면에 없었다(사장님 지적). */
.mk{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:radial-gradient(circle at 50% 38%,#1B0A14 0%,#0A0610 62%,#060409 100%);
border:0;position:relative;overflow:visible;
box-shadow:0 0 0 1px rgba(0,229,255,.30), 0 0 14px rgba(255,46,136,.16)}
.mk::after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
background:conic-gradient(from 210deg,rgba(0,229,255,.55),rgba(255,46,136,.55),rgba(0,229,255,0) 62%);
-webkit-mask:radial-gradient(circle,transparent 0 15px,#000 15.6px);
mask:radial-gradient(circle,transparent 0 15px,#000 15.6px);opacity:.9}
.mk svg{width:26px;height:26px;display:block;position:relative;z-index:1}
.mk .rg{fill:none;stroke:rgba(240,237,245,.16);stroke-width:1.2}
.mk .mn{fill:#F4F1F8;filter:drop-shadow(0 0 4px rgba(0,229,255,.45))}
.mk .cr{fill:var(--pink);filter:drop-shadow(0 0 5px rgba(255,46,136,.9))}
.brand{gap:10px}
.wm{display:flex;flex-direction:column;line-height:1;gap:4px}
.wm .nm{font-family:var(--disp);font-size:19px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
background:linear-gradient(96deg,#FFFFFF 0%,#EAE4F2 46%,#BFE9F5 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wm .e{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.26em;
color:var(--cyan);margin:0;opacity:.92;text-indent:.26em}
@media(max-width:640px){.wm .e{display:block}}
@media(max-width:430px){
.wm{display:flex}
.mk{width:31px;height:31px}
.mk svg{width:22px;height:22px}
.wm .nm{font-size:16.5px}
.wm .e{font-size:8.2px;letter-spacing:.2em;text-indent:.2em}
.brand{gap:8px}
}
/* 로고 비율 — 「밤코아」를 키우고 NIGHT KOREA 는 작게(사장님 2026-09-09) */
.wm .nm{font-size:23px;letter-spacing:-.045em}
.wm .e{font-size:8.5px;letter-spacing:.24em;text-indent:.24em;opacity:.85}
.mk{width:40px;height:40px}
.mk svg{width:29px;height:29px}
@media(max-width:430px){
.wm .nm{font-size:19.5px}
.wm .e{font-size:7.8px;letter-spacing:.19em;text-indent:.19em}
.mk{width:34px;height:34px}
.mk svg{width:25px;height:25px}
}
/* 행 카드 압축 — 3열 이상 문장 표(.rc)가 모바일에서 한 행 175~247px 이었다. 라벨을 값 위에
한 줄 더 쌓던 것을 왼쪽 라벨 열로 바꾸고 여백을 줄인다(사장님 2026-09-09: 「세로로 쌓아
두는 구조라 공간을 더 차지하고 카드도 커 보인다」). 담는 정보는 그대로다. */
@media(max-width:639px){
table.rc tr{padding:2px 12px;margin-bottom:6px;border-radius:9px}
table.rc td{padding:5px 0;font-size:12.5px;line-height:1.45}
table.rc td:first-child{font-size:13.5px;padding:7px 0 4px}
table.rc td.tx{display:grid;grid-template-columns:54px 1fr;align-items:baseline;
gap:2px 10px;text-align:left}
table.rc td.tx::before{font-size:9.5px;line-height:1.7;word-break:keep-all}
table.rc caption{padding:4px 2px 0}
}
/* 행 카드를 좁히면서 표 안 링크가 31px 이 됐다(터치 최소 32px) — 링크에만 여백을 주고
음수 마진으로 되돌려, 누르는 자리는 넓히되 카드 높이는 그대로 둔다. */
@media(max-width:639px){
table.rc td a{display:inline-flex;align-items:center;min-height:34px;margin:-6px 0;line-height:1.4}
}