/* 게임기 사는 곳 지도 (hunmin B+C): 해례본 계선 + 자모 핀. 단일 파랑은 핀 링과 CTA에만. */
.wb{--wb-bg:#0c0c0f;--wb-line:rgba(240,240,250,.5)}
.wb .en{display:inline-block;margin-left:8px;font-size:.78em;font-weight:500;letter-spacing:.02em;color:inherit;opacity:.62}
.wb-hero{padding:var(--s-8) 0 var(--s-9)}
.wb-hgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-8);align-items:center}
.wb-copy h1{font-size:56px;line-height:64px;letter-spacing:-.01em;margin:var(--s-2) 0 var(--s-3);font-weight:800}
.wb-copy h1 span{display:block}
.wb-copy .lead{max-width:30em}
.wb-meta{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-4) 0 0}
.wb-disc{margin:var(--s-5) 0 0;padding-left:var(--s-3);border-left:3px solid var(--c-fg-dark);font-size:var(--fs-cap);line-height:22px;color:var(--c-muted-dark)}
.wb-disc strong{color:var(--c-fg-dark);display:block;font-weight:700}
/* map panel = 해례본 판식: 굵은 외곽선 + 안쪽 가는 계선 */
.wb-fig{margin:0;position:relative}
.wb-frame{position:relative;background:var(--wb-bg);border:3px solid var(--wb-line);box-shadow:inset 0 0 0 4px #000,inset 0 0 0 5px rgba(240,240,250,.28);padding:14px}
.wb-frame>.wb-tl,.wb-frame>.wb-bl{position:absolute;z-index:2;font-size:12px;line-height:16px;letter-spacing:.12em;color:var(--c-muted-dark);pointer-events:none}
.wb-tl{left:26px;top:22px}.wb-bl{left:26px;bottom:20px;letter-spacing:.04em!important}.wb-bl i{font-style:normal;margin-left:8px;opacity:.6}
.wb-svg{display:block;width:100%;height:auto}
.wb-svg.mm{display:none}
.wb-svg .grid line{stroke:rgba(240,240,250,.075);stroke-width:1;vector-effect:non-scaling-stroke}
.wb-svg .gu{fill:rgba(240,240,250,.035);stroke:rgba(240,240,250,.16);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill var(--t)}
.wb-svg .gu.hl{fill:rgba(240,240,250,.075)}
.wb-svg .gu.on{fill:rgba(143,166,245,.22)}
.wb-svg .sd{fill:none;stroke:rgba(240,240,250,.7);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.wb-svg .rv{fill:none;stroke:var(--c-fg-dark);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.wb-svg .rl{font-size:12px;letter-spacing:.34em;fill:rgba(240,240,250,.55);font-weight:600}
.wb-svg .pin{cursor:pointer;outline:none}
.wb-svg .hit{fill:transparent}
.wb-svg .halo{fill:var(--wb-bg)}
.wb-svg .ring{fill:var(--wb-bg);stroke:var(--accent-on-dark);stroke-width:2.5;transition:fill var(--t),stroke var(--t)}
.wb-svg .pn{fill:var(--c-fg-dark);font-weight:700;paint-order:stroke;stroke:var(--wb-bg);stroke-width:6px;stroke-linejoin:round;letter-spacing:-.01em;transition:fill var(--t)}
.wb-svg .pj{pointer-events:none}
.wb-svg .pin.on .ring,.wb-svg .pin:hover .ring,.wb-svg .pin:focus-visible .ring{fill:var(--accent);stroke:#fff}
.wb-svg .pin:focus-visible .halo{fill:none;stroke:#fff;stroke-width:2}
.wb-fig figcaption{margin:var(--s-2) 0 0;font-size:13px;line-height:20px;color:var(--c-muted-dark);max-width:44em}
.wb-fig figcaption a,.wb-disc a{color:var(--c-fg-dark)}
/* legend strip: 가로 계선 + 7칸 */
.wb-lgnav{margin-top:var(--s-8)}
.wb-lgnav .eyebrow{margin-bottom:var(--s-2)}
.wb-lg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:3px solid var(--c-fg-dark)}
.wb-lg li{border-top:0}
.lg{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"j j" "n n" "e e" "c c";row-gap:2px;padding:var(--s-3) var(--s-2) var(--s-3) 0;margin-right:var(--s-2);color:var(--c-fg-dark);text-decoration:none;border-bottom:1px solid var(--c-rule-dark);min-height:132px;transition:background var(--t)}
.lg::before{content:"";position:absolute;left:0;right:var(--s-2);top:-3px;height:3px;background:transparent;transition:background var(--t)}
.lg-j{grid-area:j;margin-bottom:var(--s-2);display:block;height:32px}
.lg-n{grid-area:n;font-size:18px;line-height:26px;font-weight:800}
.lg-e{grid-area:e;font-size:12px;line-height:16px;color:var(--c-muted-dark);letter-spacing:.02em}
.lg-c{grid-area:c;font-size:13px;line-height:20px;color:var(--c-muted-dark);margin-top:var(--s-1)}
.lg:hover,.lg.on{background:linear-gradient(180deg,rgba(240,240,250,.09),transparent 70%)}
.lg:hover::before,.lg.on::before{background:var(--accent-on-dark)}
.lg:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* sticky chips */
.wb-places{padding:0 0 var(--s-10);background:#fff}
.wb-chips{position:sticky;top:var(--nav-h);z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-ink)}
.wb-chips ol{list-style:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none}
.wb-chips ol::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:var(--s-1);min-height:52px;padding:0 var(--s-2);font-size:var(--fs-small);font-weight:700;color:var(--c-muted);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent;transition:color var(--t),box-shadow var(--t)}
.chip:hover{color:var(--c-ink)}
.chip.on{color:var(--c-ink);box-shadow:inset 0 -3px 0 var(--c-ink)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wb-sh{padding:var(--s-9) 0 var(--s-6);max-width:44em}
.wb-sh h2,.wb-misc h2,.wb-chk-sec h2,.wb-lim h2{font-size:var(--fs-h2);line-height:40px;font-weight:800;margin:var(--s-1) 0 0}
.wb-sd{margin:var(--s-2) 0 0;font-size:var(--fs-small);line-height:26px;color:var(--c-muted)}
.wb-sh .eyebrow,.wb-misc .eyebrow,.wb-lim .eyebrow{color:var(--c-muted)}
/* area block: 좌 sticky 머리 + 우 항목 */
.wb-area{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s-7);padding:var(--s-7) 0 var(--s-6);position:relative;border-top:3px solid var(--c-ink);scroll-margin-top:calc(var(--nav-h) + 52px)}
.wb-area::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--c-ink)}
.wb-ah{position:sticky;top:calc(var(--nav-h) + 52px + var(--s-4));align-self:start;display:grid;gap:2px}
.wb-aj{display:block;margin-bottom:var(--s-2);color:var(--c-ink)}
.wb-ah h3{font-size:34px;line-height:42px;font-weight:800;letter-spacing:-.01em;margin:0}
.wb-ae{margin:0;font-size:13px;line-height:20px;color:var(--c-muted);letter-spacing:.03em}
.wb-ag{margin:var(--s-1) 0 0;font-size:var(--fs-small);line-height:24px;color:var(--c-body);font-weight:600}
.wb-up{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s-1);font-size:var(--fs-cap);font-weight:600;color:var(--c-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.wb-up:hover{text-decoration-thickness:2px}
.wb-area:target,.wb-area.on{background:linear-gradient(90deg,var(--c-soft),transparent 42%)}
.pl{padding:var(--s-5) 0;border-top:1px solid var(--c-rule)}
.pl:first-child{padding-top:0;border-top:0}
.pl-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.pl-tag{margin:0;display:flex;align-items:center;font-size:13px}
.pl-tag .tag{display:inline-block;padding:2px 10px;border:1px solid var(--c-ink);border-radius:var(--r-sm);font-weight:700;color:var(--c-ink);line-height:20px}
.pl-date{font-size:13px;line-height:20px;color:var(--c-muted);font-variant-numeric:tabular-nums}
.pl-name{margin:var(--s-2) 0 0;font-size:30px;line-height:38px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink)}
.pl-addr{margin:var(--s-1) 0 0;font-size:17px;line-height:28px;color:var(--c-body)}
.pl-src{display:block;font-size:13px;line-height:20px;color:var(--c-muted);margin-top:2px}
.pl-src a,.pl-lists a,.pl-note a{color:inherit}
.pl-lists,.pl-note{margin:var(--s-2) 0 0;font-size:var(--fs-small);line-height:24px;color:var(--c-body);max-width:42em}
.pl-note{color:var(--c-muted)}
.pl-k{display:block;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);margin-bottom:2px}
.pl-k .en{margin-left:6px;font-weight:500;text-transform:none;letter-spacing:.02em}
.pl-lists .pl-k{margin-bottom:0}
.pl-links{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--c-rule);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);align-items:start}
.pl-offs{display:flex;flex-wrap:wrap;gap:0 var(--s-3)}
.pl-offs .pl-k{flex:0 0 100%}
.pl-off{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small);font-weight:700;color:var(--c-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.pl-off:hover{text-decoration-thickness:2px;color:var(--accent)}
.pl-btns{display:flex;gap:6px;flex-wrap:wrap}
.pl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid var(--c-ink);border-radius:var(--r-sm);font-size:14px;font-weight:700;color:var(--c-ink);text-decoration:none;white-space:nowrap;transition:background var(--t),color var(--t),border-color var(--t)}
.pl-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.pl-btn:active{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.pl-off:focus-visible,.pl-btn:focus-visible,.wb-up:focus-visible,.wb-ch a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pl-name:target{scroll-margin-top:120px}
/* lists / chains */
.wb-misc{padding:var(--s-10) 0}
.wb-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
.wb-lists{grid-template-columns:repeat(2,minmax(0,1fr))}
.wb-chain{margin-top:var(--s-9);padding-top:var(--s-7);border-top:3px solid var(--c-ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
.wb-chain{grid-template-rows:min-content 1fr;row-gap:0}
.wb-chain>.sec-title{grid-column:1}
.wb-chain>.wb-sd{grid-column:1;grid-row:2;margin-top:var(--s-2)}
.wb-ch{grid-column:2;grid-row:1 / span 2;list-style:none;margin:0;padding:0;border-top:1px solid var(--c-ink)}
.ch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--c-rule)}
.ch-n{margin:0;font-size:22px;line-height:30px;font-weight:800;color:var(--c-ink)}
.ch-l{margin:0;grid-column:2;grid-row:1}
.ch-l a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--c-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ch-l a:hover{color:var(--accent);text-decoration-thickness:2px}
.ch-d{margin:0;grid-column:1 / -1;font-size:var(--fs-cap);line-height:22px;color:var(--c-muted)}
.ch-d a{color:inherit}
/* checklist (dark) */
.wb-chk{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
.wb-chk li{display:grid;grid-template-columns:72px minmax(0,1fr);padding:var(--s-4) 0;border-top:1px solid var(--c-rule-dark)}
.wb-chk li:nth-child(-n+2){border-top:3px solid var(--c-fg-dark)}
.wb-chk .figure-num{font-size:32px;line-height:40px;font-weight:800;color:var(--c-muted-dark);font-variant-numeric:tabular-nums}
.wb-chk h3{margin:0;font-size:20px;line-height:30px;font-weight:800;color:var(--c-fg-dark)}
.wb-chk p{margin:var(--s-1) 0 0;font-size:var(--fs-small);line-height:25px;color:var(--c-muted-dark)}
.wb-chk a{color:var(--accent-on-dark)}
.wb-lim{padding:var(--s-4) 0 var(--s-6)}
.wb-lim ul{margin:0;padding:0 0 0 var(--s-3);font-size:var(--fs-small);line-height:26px;color:var(--c-body)}
.wb-lim li{margin:0 0 var(--s-1)}
.wb-lim+.note-line{margin-top:var(--s-4)}
.wb .pick.lst{min-height:0}
@media (max-width:1100px){
 .wb-copy h1{font-size:48px;line-height:56px}
 .wb-lg{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:960px){
 .wb-hero{padding:var(--s-6) 0 var(--s-8)}
 .wb-hgrid{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
 .wb-lgnav{margin-top:var(--s-6)}
 .wb-area{grid-template-columns:minmax(0,1fr);gap:var(--s-3);padding:var(--s-5) 0 var(--s-4)}
 .wb-ah{position:static;grid-template-columns:auto 1fr;grid-template-areas:"j n" "j e" "j g" "u u";column-gap:var(--s-2);align-items:center}
 .wb-aj{grid-area:j;margin:0}.wb-aj svg{width:48px;height:48px}
 .wb-ah h3{grid-area:n;font-size:28px;line-height:34px}.wb-ae{grid-area:e}.wb-ag{grid-area:g;margin:0}.wb-up{grid-area:u}
 .wb-two,.wb-chain{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
 .wb-chain>.sec-title,.wb-chain>.wb-sd,.wb-ch{grid-column:1;grid-row:auto}
 .wb-chk{grid-template-columns:minmax(0,1fr)}
 .wb-chk li:nth-child(2){border-top:1px solid var(--c-rule-dark)}
 .wb-misc{padding:var(--s-8) 0}
 .wb-lists{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
 .wb-copy h1{font-size:40px;line-height:46px}
 .wb-frame{padding:8px;border-width:2px;box-shadow:inset 0 0 0 3px #000,inset 0 0 0 4px rgba(240,240,250,.28)}
 .wb-svg.md{display:none}.wb-svg.mm{display:block}
 .wb-frame>.wb-tl{left:18px;top:15px;font-size:11px}.wb-frame>.wb-bl{display:none}
 .wb-lg{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lg{min-height:0;padding:var(--s-2) var(--s-1) var(--s-2) 0;grid-template-columns:40px 1fr;grid-template-areas:"j n" "j e" "j c";column-gap:var(--s-1);margin-right:var(--s-1)}
 .lg-j{margin:0;height:auto;align-self:center}.lg-j svg{width:32px;height:32px}
 .lg::before{right:var(--s-1)}
 .wb-sh{padding:var(--s-7) 0 var(--s-4)}
 .wb-sh h2,.wb-misc h2,.wb-chk-sec h2,.wb-lim h2{font-size:26px;line-height:34px}
 .pl-name{font-size:24px;line-height:32px}
 .pl-links{grid-template-columns:minmax(0,1fr)}
 .pl-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .pl-btn{padding:0 4px;font-size:13px}
 .ch{grid-template-columns:minmax(0,1fr)}.ch-l{grid-column:1;grid-row:auto}
 .wb-chk li{grid-template-columns:48px minmax(0,1fr)}
 .wb-chk .figure-num{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.wb *{transition:none!important}}
