/* 쫑쫑 디렉터리 — 리디자인 v1 · KO 쫑쫑 / EN PerkPaw
가족 DNA: Pretendard · 앰버 #E8A24A · 웜 페이퍼 · eyebrow 라벨 · 밤 인디고(제품) */
:root{
--paper:#FAF8F3; --card:#FFFFFF; --ink:#171B31; --ink2:#5A5E72;
--amber:#E8A24A; --amber-deep:#9E5E10; --amber-link:#9E5E10; --amber-soft:#FBEFDD;
--night:#1B203A; --night-ink:#EEEAF7; --night-mut:#A9AECB;
--line:#EAE4D8; --dot:#D8D2C4;
--r:16px; --r-sm:12px;
--shadow:0 1px 2px rgba(23,27,49,.05),0 10px 30px -14px rgba(23,27,49,.14);
--shadow-lift:0 2px 4px rgba(23,27,49,.06),0 18px 40px -16px rgba(23,27,49,.22);
--svg-mag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E");
--svg-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.85 21 3 13.15 3 3.5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2Z'/%3E%3C/svg%3E");
--svg-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a7.3 7.3 0 0 0-7.3 7.3C4.7 14.7 12 22 12 22s7.3-7.3 7.3-12.7A7.3 7.3 0 0 0 12 2Zm0 9.8a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2Z'/%3E%3C/svg%3E");
--svg-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
--svg-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z'/%3E%3C/svg%3E");
--svg-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
--svg-arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15m-6.5-6.5L19.5 12 13 18.5'/%3E%3C/svg%3E");
--svg-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
line-height:1.6;word-break:keep-all}
a{color:var(--amber-link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
.num,.cnt,.trn,.stat b,.scard .n{font-variant-numeric:tabular-nums}

/* icons (currentColor masks) */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background:currentColor;
-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-mag{--i:var(--svg-mag)}
.i-tel{--i:var(--svg-tel)}
.i-pin{--i:var(--svg-pin)}
.i-clock{--i:var(--svg-clock)}
.i-moon{--i:var(--svg-moon)}
.i-check{--i:var(--svg-check)}
.i-arr{--i:var(--svg-arr)}

/* header */
.top{background:rgba(250,248,243,.92);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{display:flex;align-items:center;gap:9px;font-size:1.15rem;font-weight:800;
color:var(--ink);letter-spacing:-.01em}
.brand b{font-weight:600;color:var(--ink2);font-size:.92rem}
.brand:hover{text-decoration:none}
.mark{width:30px;height:24px;flex:none}
.by{font-size:.8rem;color:var(--ink2)}

/* 쫑쫑 고양이 로고 (래스터)
   그림이 정사각에 가깝다(714:682 = 1:0.955). 옛 귀 마크의 30×24 자리에 그대로
   넣으면 찌그러지므로 **높이를 고정하지 않는다** — 폭만 주고 비율은 aspect-ratio 가
   지킨다(로드 전에도 자리가 잡혀 CLS 가 없다). `.frame img` 에서 height:auto 를
   빠뜨려 이미지가 찌그러졌던 사고가 이 규칙의 이유다.
   object-fit 은 폴백을 위한 것 — 자산 누락 시 onerror 가 끼워 넣는 귀 마크 SVG 는
   4:3 이라, 비율이 다른 자리에 들어가도 늘어나지 않게 한다. */
.catmark{display:block;flex:none;width:34px;height:auto;aspect-ratio:714/682;
object-fit:contain}
.catmark-hero{width:78px;margin:0 auto 2px}
.catmark-pitch{width:44px}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}
/* 밴드 안 탭의 위 여백은 .heroband 의 padding-top 이 책임진다(마진 상쇄 방지) */
.hb-night .tabs{justify-content:center;margin-top:0}
.hb-night .tabs a{background:rgba(255,255,255,0.07);color:#D6DCE8;border-color:rgba(255,255,255,0.16)}
.hb-night .tabs a:hover{border-color:var(--amber);color:#fff}
.hb-night .tabs a.on{background:var(--amber);color:var(--night);border-color:var(--amber);font-weight:700}
.tabs a{padding:7px 15px;border-radius:999px;background:var(--card);
border:1px solid var(--line);font-weight:650;font-size:.88rem;color:var(--ink);
box-shadow:0 1px 2px rgba(23,27,49,.05)}
.tabs a:hover{border-color:var(--amber);text-decoration:none}
.tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* eyebrow · section head */
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--amber-deep);
text-transform:uppercase;margin:0 0 .5em}
.sect{margin:44px 0 0}
.sect h2,.night24 h2{font-size:1.45rem;letter-spacing:-.02em;line-height:1.3;margin:0 0 .8em}
h2{font-size:1.2rem;letter-spacing:-.01em;margin:2em 0 .7em}

/* hero band
   상단 여백은 **밴드가 직접** 갖는다(padding-top). 첫 자식(.tabs)의 margin-top 으로
   두면 그 마진이 부모 밖으로 상쇄돼(margin collapsing) 밴드 자체가 40px 아래로 밀리고,
   밀려난 자리에 body 페이퍼색이 드러난다 — 헤더와 다크 밴드 사이의 정체불명 띠가 그것.
   부모의 padding-top 은 첫 자식 마진의 상쇄를 구조적으로 막으므로, 앞으로 어떤 요소가
   첫 자식이 되든(24h 페이지의 .bc 등) 같은 버그가 재발하지 않는다. */
.heroband{padding:40px 0 104px}
.hero{text-align:center;padding:40px 0 0}
.hero h1{font-size:clamp(2rem,5.2vw,2.9rem);font-weight:800;letter-spacing:-.035em;
line-height:1.22;margin:.35em 0 .3em}
.hero .eyebrow{margin-bottom:0}
.hero .sub{margin:.2em auto 1.5em;max-width:34em}
.hero .earmark{width:64px;height:46px;margin:0 auto;display:block}
/* dark variant */
.hb-night{background:
radial-gradient(720px 340px at 50% -120px,rgba(232,162,74,.32),transparent 72%),
radial-gradient(1.5px 1.5px at 18% 34%,rgba(255,255,255,.5) 99%,transparent),
radial-gradient(1.5px 1.5px at 78% 22%,rgba(255,255,255,.42) 99%,transparent),
radial-gradient(1px 1px at 64% 58%,rgba(255,255,255,.35) 99%,transparent),
radial-gradient(1px 1px at 30% 70%,rgba(255,255,255,.3) 99%,transparent),
linear-gradient(180deg,#151A31,var(--night) 60%,#20264A)}
.hb-night .hero h1{color:#fff}
.hb-night .hero h1 em{font-style:normal;color:var(--amber)}
.hb-night .sub{color:var(--night-mut)}
.hb-night .sub b{color:#F3C078}
.hb-night .tabs a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
color:var(--night-ink);box-shadow:none}
.hb-night .tabs a:hover{border-color:var(--amber)}
.hb-night .tabs a.on{background:var(--amber);border-color:var(--amber);color:var(--night)}

/* search */
.search{position:relative;max-width:620px;margin:0 auto 18px}
.search>.i-mag{position:absolute;left:22px;top:20px;width:20px;height:20px;color:var(--ink2);z-index:2}
#q{width:100%;height:60px;padding:0 24px 0 54px;font:inherit;font-size:1.02rem;color:var(--ink);
background:var(--card);border:1px solid var(--line);border-radius:999px;outline:none;
box-shadow:0 2px 6px rgba(23,27,49,.06),0 16px 40px -12px rgba(23,27,49,.18)}
#q::placeholder{color:#9B9FB1}
#q:focus{border-color:var(--amber);box-shadow:0 0 0 4px rgba(232,162,74,.28),0 16px 40px -12px rgba(23,27,49,.18)}
.hb-night #q{border-color:transparent;
box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 44px -6px rgba(0,0,0,.5),0 0 60px -12px rgba(232,162,74,.45)}
.hb-night #q:focus{box-shadow:0 0 0 4px rgba(232,162,74,.4),0 10px 44px -6px rgba(0,0,0,.5)}
#res{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:60vh;overflow:auto;
background:var(--card);border:1px solid var(--line);border-radius:var(--r);
box-shadow:0 0 0 1px rgba(23,27,49,.06),0 18px 56px -8px rgba(23,27,49,.28);z-index:30;text-align:left;
list-style:none;margin:0;padding:6px}
#res li{border-top:1px dotted var(--dot)}
#res li:first-child{border-top:0}
#res li.act,#res li:hover{background:var(--amber-soft);border-radius:10px}
#res li.act{outline:0}
#res .row{display:block;padding:10px 12px;color:var(--ink)}
#res .row:hover{text-decoration:none}
/* 인기 칩 */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:0}
.chips-t{font-size:.78rem;font-weight:700;color:var(--ink2);letter-spacing:.08em}
.hb-night .chips-t{color:var(--night-mut)}
.chips a{padding:6px 14px;border-radius:999px;font-size:.85rem;font-weight:650;
background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(23,27,49,.05)}
.chips a:hover{border-color:var(--amber);text-decoration:none}
.hb-night .chips a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:var(--night-ink);box-shadow:none}
.chips a.c24{color:var(--amber-deep);background:var(--amber-soft);border-color:#EED3A8}
.hb-night .chips a.c24{color:#F3C078;background:rgba(232,162,74,.14);border-color:rgba(232,162,74,.4)}

/* stat strip */
.statstrip{position:relative;z-index:2;margin-top:-52px;background:var(--card);
border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:20px 8px 16px}
.stat{text-align:center;padding:2px 8px;border-left:1px dotted var(--dot)}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.stat span{font-size:.8rem;color:var(--ink2)}
.stat a{color:inherit}
.trust{grid-column:1/-1;text-align:center;margin:12px 0 0;padding-top:12px;
border-top:1px dotted var(--dot);font-size:.78rem;color:var(--ink2)}
.trust .ic{color:var(--amber-deep);margin-right:4px}

/* top regions */
.trgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.trc{position:relative;display:block;background:var(--card);border:1px solid var(--line);
border-radius:var(--r);padding:14px 16px 12px;box-shadow:var(--shadow);color:var(--ink);
transition:transform .15s,box-shadow .15s,border-color .15s}
.trc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--amber);text-decoration:none}
.trk{position:absolute;top:12px;right:14px;font-size:.7rem;font-weight:800;color:#706A58;letter-spacing:.06em}
.trc b{display:block;font-weight:750;letter-spacing:-.01em}
.trs{display:block;font-size:.75rem;color:var(--ink2);margin-top:-2px}
.trn{display:block;font-size:1.5rem;font-weight:800;color:var(--amber-deep);letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.trn em{font-style:normal;font-size:.72rem;font-weight:650;color:var(--ink2);margin-left:2px}

/* sido grid */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.scard{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
padding:13px 16px;box-shadow:0 1px 2px rgba(23,27,49,.05);color:var(--ink);
transition:transform .15s,box-shadow .15s,border-color .15s}
.scard b{font-weight:720;min-width:0;overflow-wrap:anywhere}
.scard .n{color:var(--amber-deep);font-weight:750;font-size:.9rem;white-space:nowrap}
.scard .n::after{content:"곳";font-size:.72em;font-weight:600;color:var(--ink2);margin-left:1px}
.scard:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:var(--shadow-lift);text-decoration:none}
.scard.lg{grid-column:span 2;padding:15px 18px 13px;border-radius:var(--r);
display:block}
.scard.lg b{font-size:1.12rem}
.scard.lg .n{font-size:1.3rem;float:right}
.scard.lg .tops{display:block;clear:both;margin-top:6px;padding-top:8px;
border-top:1px dotted var(--dot);font-size:.78rem;color:var(--ink2);
font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 24h night card */
.night24{margin:48px 0 0;position:relative;overflow:hidden;border-radius:20px;
background:
radial-gradient(420px 220px at 88% -40px,rgba(232,162,74,.3),transparent 70%),
radial-gradient(1.5px 1.5px at 22% 30%,rgba(255,255,255,.5) 99%,transparent),
radial-gradient(1px 1px at 55% 65%,rgba(255,255,255,.35) 99%,transparent),
radial-gradient(1.5px 1.5px at 80% 50%,rgba(255,255,255,.4) 99%,transparent),
linear-gradient(120deg,#151A31,var(--night) 55%,#2A3157);
color:var(--night-ink);padding:30px 32px;display:flex;align-items:center;gap:24px;
box-shadow:0 24px 60px -24px rgba(21,26,49,.55)}
.night24 .eyebrow{color:#F3C078}
.night24 h2{color:#fff;margin:0 0 .35em}
.night24 p{margin:.2em 0;color:var(--night-mut);font-size:.95rem}
.night24 p b{color:#F3C078}
.n24-copy{flex:1;min-width:0}
.n24-cities{font-size:.82rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.btn-amber{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--amber);
color:var(--night);font-weight:800;padding:14px 24px;border-radius:999px;
box-shadow:0 6px 24px -6px rgba(232,162,74,.6);transition:transform .15s,box-shadow .15s}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 10px 30px -6px rgba(232,162,74,.75);text-decoration:none}
.btn-amber .ic{width:1.05em;height:1.05em}

/* category cards */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cat{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:20px;box-shadow:var(--shadow);color:var(--ink);
transition:transform .15s,box-shadow .15s,border-color .15s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--amber);text-decoration:none}
.cat svg{width:44px;height:44px;display:block;margin-bottom:12px}
.cat b{display:block;font-weight:750;letter-spacing:-.01em}
.cat .n{color:var(--amber-deep);font-weight:750;font-size:.88rem;font-variant-numeric:tabular-nums}
.cat .go{display:block;margin-top:10px;font-size:.8rem;color:var(--ink2)}
.cat:hover .go{color:var(--amber-deep)}
.cat .go .ic{width:.9em;height:.9em;margin-left:3px}

/* 쫑쫑 pitch */
.pitch{display:flex;align-items:center;gap:16px;background:var(--amber-soft);
border:1px solid #F3DDBB;border-radius:var(--r);padding:16px 20px;margin:44px 0 0}
.pitch .earmark{width:40px;height:30px;flex:none}
.pitch p{margin:0;color:#6B4A17;font-size:.92rem}
.pitch b{color:var(--amber-deep)}

/* breadcrumb */
.bc{font-size:.82rem;color:var(--ink2);margin:18px 0 0}
.bc span{color:var(--ink2)}

/* region summary head */
.rhead h1{font-size:1.7rem;letter-spacing:-.025em;line-height:1.3;margin:.5em 0 .15em}
h1{font-size:1.7rem;line-height:1.3;letter-spacing:-.02em;margin:.9em 0 .3em}
.cnt{color:var(--amber-deep);font-weight:750;font-size:.72em;vertical-align:3px;margin-left:2px}
.sub{color:var(--ink2);margin:.2em 0 1.2em}
.rsum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
/* 자식 선택자여야 한다. `.rsum span` 은 칩 안의 아이콘(<span class="ic">)까지 잡아
   (0,1,1 > 0,1,0 으로 .ic 를 이긴다) 아이콘을 28×13px 짜리 흰 알약으로 바꿔놨다:
   padding 5/13 이 붙고 background 가 currentColor→var(--card) 로 덮여 마스크가
   카드색으로 칠해지니 글리프는 안 보이고 빈 자리만 남았다. 칩마다 그 유령 알약의
   높이가 텍스트와 어긋나 세 칩이 삐뚤어 보인다. */
.rsum>span{display:inline-flex;align-items:center;gap:6px;background:var(--card);
border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:.8rem;
font-weight:650;color:var(--ink2);font-variant-numeric:tabular-nums}
.rsum b{color:var(--ink);font-weight:750}
.rsum .ic{color:var(--amber-deep)}
.rsum .s24 b{color:var(--amber-deep)}

/* list rows(카드형) */
.list{list-style:none;margin:0 0 1.5em;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{display:flex;align-items:center;gap:10px;background:var(--card);
border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(23,27,49,.05);
padding-right:12px;transition:border-color .15s,box-shadow .15s}
.list li:hover{border-color:var(--amber);box-shadow:var(--shadow)}
.row{flex:1;display:block;padding:13px 0 13px 16px;color:var(--ink);min-width:0}
.row:hover{text-decoration:none}
.row:hover .rname{color:var(--amber-deep)}
/* min-width:0 이 없으면 이 블록이 제 콘텐츠 폭을 최소 폭으로 주장해서, 부모
   flex 아이템(.row)이 아무리 min-width:0 여도 긴 상호가 카드 밖으로 삐져나간다.
   overflow-wrap:anywhere 는 띄어쓰기 없는 긴 상호(영문·괄호 표기)를 위한 것 —
   자르지 않고 접는다. 순위형 목록은 순번이 좌측을 먹어 남는 폭이 더 좁다. */
.rname{display:block;min-width:0;overflow-wrap:anywhere;
font-weight:720;letter-spacing:-.01em}

/* 순위형 목록의 순번(.rk)·정렬 기준 줄(.lorder)·시군구 순번(.srk) 은 여기 두지
   않는다 — 지역 페이지가 인라인으로 싣는 fragments.REGION_CSS 가 단일 출처다.
   양쪽에 두면 인라인이 항상 이겨서, 여기를 고쳐도 화면이 안 바뀐다(실제로 그렇게
   40.8px 짜리 순번이 살아남아 상호를 잘랐다). */
.raddr{display:block;color:var(--ink2);font-size:.85rem;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.raddr::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:4px;
vertical-align:-.08em;background:#B9B3A4;
-webkit-mask:var(--svg-pin) center/contain no-repeat;
mask:var(--svg-pin) center/contain no-repeat}
#res .raddr::before{content:none}
a.tel{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
font-size:.84rem;font-weight:650;color:var(--amber-deep);background:var(--amber-soft);
border:1px solid #EED3A8;border-radius:999px;padding:6px 13px;font-variant-numeric:tabular-nums}
a.tel::before{content:"";width:.9em;height:.9em;background:currentColor;
-webkit-mask:var(--svg-tel) center/contain no-repeat;
mask:var(--svg-tel) center/contain no-repeat}
a.tel:hover{background:#F7E4C4;text-decoration:none}
dd a.tel,.pcard a.tel{background:transparent;border:0;padding:0;font-size:inherit}
.info a.tel::before{content:none}

/* badges */
.bdg{display:inline-block;font-size:.68rem;font-weight:750;border-radius:999px;
padding:2px 9px;margin-left:6px;vertical-align:2px;letter-spacing:.01em}
.b24{background:var(--night);color:#F3C078}
.b24::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:3px;
vertical-align:-.08em;background:currentColor;
-webkit-mask:var(--svg-moon) center/contain no-repeat;
mask:var(--svg-moon) center/contain no-repeat}
/* 24시간 배지 부속: 확인 기준(.b24on) + 상시 전화 확인 문구(.b24call).
   응급 정보라 배지만 두고 끝내지 않는다. .bnight 는 야간진료(24시간 아님). */
.b24on,.b24call{display:inline;margin-left:6px;font-size:.72rem;
font-weight:600;color:var(--ink2);vertical-align:1px}
/* 배지 부속 문구는 줄바꿈을 허용해야 한다 — nowrap 이면 좁은 화면에서
   페이지 자체가 가로로 밀린다. 문구 안에서만 끊기지 않게 잡는다. */
.b24on>span,.b24call>span{white-space:nowrap}
.b24call::before{content:"";display:inline-block;width:.75em;height:.75em;
margin-right:3px;vertical-align:-.05em;background:currentColor;
-webkit-mask:var(--svg-tel) center/contain no-repeat;
mask:var(--svg-tel) center/contain no-repeat}
.bnight{background:#E7E9F5;color:#3D4470;border:1px solid #CFD4EA}
.bnight::before{content:"";display:inline-block;width:.8em;height:.8em;
margin-right:3px;vertical-align:-.08em;background:currentColor;
-webkit-mask:var(--svg-moon) center/contain no-repeat;
mask:var(--svg-moon) center/contain no-repeat}
.h24ev{margin:.5em 0 0;font-size:.82rem;color:var(--ink2);line-height:1.7}
.b24note{width:100%;margin:.4em 0 0;font-size:.8rem;color:var(--ink2)}
.h24ev q{font-style:normal}
.h24intro{margin:0 0 1.4em;padding:14px 16px;border:1px solid var(--line);
border-radius:14px;background:var(--card);color:var(--ink2);
font-size:.88rem;line-height:1.7}
.h24intro b{color:var(--ink)}
.h24sec{margin:2em 0 .4em}
.h24sec h2{margin:0 0 .2em;font-size:1.15rem}
.h24sec p{margin:0;color:var(--ink2);font-size:.86rem}
.bc2{background:var(--amber-soft);color:#8A4E0E;border:1px solid #E8CFA4}
.bk{background:#EFEDE6;color:var(--ink2);font-weight:600;margin:0 6px 6px 0}
/* 분류 배지 — 검색이 네 버티컬을 함께 훑으므로 각 행이 어느 분류인지 밝힌다.
   분류마다 색을 하나씩 배정하면 결과창이 무지개가 된다. 색은 '지금 보고 있는 분류
   (.bcur, 앰버) / 그 외(중립 회색)' 두 톤뿐이고, 무엇인지는 라벨 글자가 말한다.
   대비: #4A4E60 on #F2F0EA = 7.2:1, #8A4E0E on #FBEFDD = 5.9:1 (둘 다 AA 통과) */
.bcat{margin:0 3px 0 0;background:#F2F0EA;color:#4A4E60;border:1px solid #E2DDD0;
font-weight:700}
.bcat.bcur{background:var(--amber-soft);color:#8A4E0E;border-color:#E8CFA4}
.bdgs{margin:.2em 0 1em}
.bdgs .bdg{margin:0 6px 6px 0;font-size:.78rem;padding:4px 12px;vertical-align:0}

/* detail: place hero card */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:20px;
box-shadow:var(--shadow);padding:24px 28px 22px;margin:16px 0 0}
.pcard .eyebrow{margin:0 0 .2em}
.pcard h1{margin:.1em 0 .2em;font-size:1.75rem}
.pcard .bdgs{margin:.1em 0 .9em}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding-top:16px;
border-top:1px dotted var(--dot)}
.acts a{display:inline-flex;align-items:center;gap:8px;border-radius:999px;
padding:10px 19px;font-weight:700;font-size:.92rem;background:var(--card);
border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(23,27,49,.05);
transition:transform .15s,border-color .15s,box-shadow .15s}
.acts a:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:var(--shadow);text-decoration:none}
.acts a.pri{background:var(--amber);border-color:var(--amber);color:var(--night)}
.acts a.pri:hover{box-shadow:0 8px 24px -8px rgba(232,162,74,.8)}
.acts .ic{width:1em;height:1em}
/* legacy maps row(구조 유지 시) */
.maps{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.maps a{background:var(--card);border:1px solid var(--line);border-radius:999px;
padding:9px 18px;font-weight:650;box-shadow:0 1px 2px rgba(23,27,49,.05);color:var(--ink)}
.maps a:hover{border-color:var(--amber);text-decoration:none}
.ext a{background:var(--amber-soft);border-color:#EED3A8;color:var(--amber-deep)}

/* detail: info */
.info{display:grid;grid-template-columns:88px 1fr;gap:10px 14px;margin:1em 0;
background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:18px 20px;box-shadow:var(--shadow)}
.info dt{color:var(--ink2);font-size:.85rem;padding-top:2px;display:flex;align-items:center;gap:7px}
.info dt::before{content:"";width:.95em;height:.95em;flex:none;background:var(--amber-deep);
-webkit-mask:var(--i,var(--svg-dot)) center/contain no-repeat;
mask:var(--i,var(--svg-dot)) center/contain no-repeat}
.info dt.i-pin::before{--i:var(--svg-pin)}
.info dt.i-tel::before{--i:var(--svg-tel)}
.info dt.i-clock::before{--i:var(--svg-clock)}
.info dd{margin:0}

/* nearby pills */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{background:var(--card);border:1px solid var(--line);border-radius:999px;
padding:8px 15px;font-size:.88rem;font-weight:650;color:var(--ink);
box-shadow:0 1px 2px rgba(23,27,49,.05)}
.pill:hover{border-color:var(--amber);color:var(--amber-deep);text-decoration:none}
.pmore{color:var(--amber-deep);background:var(--amber-soft);border-color:#EED3A8}

/* weather strip */
.wx{background:var(--card);border:1px solid var(--line);border-radius:999px;
padding:8px 16px;margin:14px 0 0;font-size:.86rem;color:var(--ink2);display:inline-block}

/* 리뷰·정보수정 위젯 */
.pw{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:22px;margin:1.6em 0;box-shadow:var(--shadow)}
.pw h2{margin:.2em 0 .6em}
.pw h3{font-size:1rem;margin:1.6em 0 .5em;padding-top:1.2em;border-top:1px dotted var(--dot)}
.rev{list-style:none;margin:0;padding:0}
.rev li{border-top:1px dotted var(--dot);padding:12px 0}
.rev li:first-child{border-top:0;padding-top:4px}
.rev .rhead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.rev .rnick{font-weight:720}
.rev .rdate{color:var(--ink2);font-size:.8rem}
.rev .rbody{margin:.3em 0 0;white-space:pre-wrap}
.rev .rphotos{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.rev .rphotos img{width:96px;height:96px;object-fit:cover;border-radius:10px;
border:1px solid var(--line)}
.rstars{color:var(--amber-deep);letter-spacing:2px}
.ravg{font-weight:750;color:var(--amber-deep)}
.pwempty{color:var(--ink2)}
.pwform label{display:block;font-size:.85rem;color:var(--ink2);margin:12px 0 4px}
.pwform input[type=text],.pwform input[type=file],.pwform textarea,.pwform select{
width:100%;font:inherit;color:var(--ink);background:var(--paper);
border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pwform input[type=text]:focus,.pwform textarea:focus,.pwform select:focus{
outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,162,74,.22)}
.pwform textarea{min-height:110px;resize:vertical}
.pwform button{font:inherit;font-weight:750;color:var(--night);background:var(--amber);
border:0;border-radius:999px;padding:11px 24px;margin-top:14px;cursor:pointer;
box-shadow:0 4px 16px -4px rgba(232,162,74,.55);transition:transform .15s,box-shadow .15s}
.pwform button:hover{transform:translateY(-1px);box-shadow:0 8px 22px -6px rgba(232,162,74,.7)}
.pwform button[disabled]{opacity:.5;cursor:default;transform:none}
.starpick{display:inline-flex;flex-direction:row-reverse;gap:2px;font-size:1.5rem}
.starpick input{position:absolute;opacity:0;width:1px;height:1px}
.starpick label{cursor:pointer;color:#D8D2C4;margin:0;font-size:inherit}
.starpick input:checked ~ label,.starpick label:hover,.starpick label:hover ~ label{color:var(--amber-deep)}
.starpick input:focus-visible + label{outline:2px solid var(--amber);border-radius:4px}
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
.pwmsg{margin:.8em 0 0;font-size:.9rem}
.pwmsg.ok{color:#2C6E31}
.pwmsg.err{color:#A33A2A}
.pwnote{color:var(--ink2);font-size:.78rem;margin:.6em 0 0}
.fixreq{margin-top:1.4em;border-top:1px dotted var(--dot);padding-top:12px}
.fixreq summary{cursor:pointer;font-weight:650;color:var(--ink2)}

/* 24h page hero */
.hb-24{padding-bottom:40px}
.hb-night h1{color:#fff}
.hb-night .cnt{color:var(--amber)}
.hb-24 h1{font-size:clamp(1.7rem,4.5vw,2.3rem);margin:.25em 0 .2em}
.hb-24 .eyebrow{color:#F3C078;margin:26px 0 0}
.hb-24 .bc{color:var(--night-mut)}
.hb-24 .bc a{color:var(--night-mut)}
.hb-24 .sub{margin-bottom:0}

/* footer */
.foot{border-top:1px dotted var(--dot);margin-top:56px;padding:26px 0 40px;
color:var(--ink2);font-size:.8rem}
.foot nav{margin-bottom:8px}
.foot p{margin:.3em 0}

/* responsive */
@media (max-width:760px){
.trgrid{grid-template-columns:repeat(3,1fr)}
.catgrid{grid-template-columns:1fr 1fr}
.statstrip{grid-template-columns:repeat(2,1fr);row-gap:14px}
.stat:nth-child(3){border-left:0}
}
@media (max-width:560px){
.hero{padding-top:26px}
.heroband{padding-bottom:72px}
.hero h1{font-size:1.9rem}
#q{height:56px;font-size:.95rem;padding-left:48px}
.search>.i-mag{top:19px;left:19px;width:18px;height:18px}
.cat{display:grid;grid-template-columns:42px 1fr;column-gap:14px;align-items:center;padding:16px 18px}
.cat svg{grid-row:span 3;width:42px;height:42px;margin:0}
.cat .go{margin-top:2px}
.trgrid{grid-template-columns:repeat(2,1fr)}
.sgrid{grid-template-columns:repeat(2,1fr)}
.scard.lg{grid-column:span 2}
.catgrid{grid-template-columns:1fr}
.night24{flex-direction:column;align-items:flex-start;padding:24px 22px;gap:16px}
.stat b{font-size:1.45rem}
.list li{flex-wrap:wrap;padding-right:16px}
.list li a.tel{margin:0 0 12px 16px}
.pcard{padding:20px 18px 18px}
.info{grid-template-columns:1fr;gap:2px 0;padding:16px}
.info dt{margin-top:10px}
.info dt:first-child{margin-top:0}
.acts a{flex:1 1 calc(50% - 5px);justify-content:center}
.acts a.pri{flex-basis:100%}
}

/* ── 생성기 잔여 컴포넌트 (리디자인 톤 정합 보완) ── */
.sub.en{margin:-.1em 0 .9em;font-size:.9rem;color:var(--ink2)}
.ctx{color:var(--ink);margin:.2em 0 1em;font-size:.95rem}
.since{color:var(--ink2);font-size:.88em}
.er{display:flex;align-items:flex-start;gap:10px;background:var(--card);
border:1px solid #E5C9C0;border-radius:var(--r-sm);padding:12px 16px;margin:14px 0 0;
font-size:.92rem;color:var(--ink);box-shadow:0 1px 2px rgba(23,27,49,.05)}
.erdot{width:10px;height:10px;border-radius:50%;background:#A33A2A;flex:none;margin-top:7px}
.er a{font-weight:700}
.erdist{color:var(--ink2);font-size:.88em}
.erself{background:var(--amber-soft);border-color:#F3DDBB}
.erself .erdot{background:var(--amber-deep)}
.pill .pdist{color:var(--ink2);font-weight:500;font-size:.8rem}
.pill .pcat{display:inline-block;background:#EFEDE6;color:var(--ink2);font-size:.72rem;
font-weight:600;border-radius:6px;padding:1px 7px;margin-right:7px;vertical-align:1px}

/* ── 진료 정보 카드 (크롤 보강) ── */
.care{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:20px 22px;margin:1.2em 0;box-shadow:var(--shadow)}
.care h2{margin:0 0 .8em;font-size:1.05rem}
/* 1fr 은 minmax(auto,1fr) 이라 그리드 아이템이 **내용보다 작아지지 않는다** —
   배지가 11개 붙은 dd 가 트랙을 밀어내 카드째 화면 밖으로 나갔다(390px 실측).
   minmax(0,1fr) 로 바닥을 열어 줘야 안쪽 flex-wrap 이 실제로 접힌다. */
.care dl{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px 14px;margin:0}
.care dt{color:var(--ink2);font-size:.85rem;padding-top:2px;display:flex;align-items:flex-start;gap:7px}
.care dt::before{content:"";width:.95em;height:.95em;flex:none;margin-top:.3em;background:var(--amber-deep);
-webkit-mask:var(--i,var(--svg-dot)) center/contain no-repeat;
mask:var(--i,var(--svg-dot)) center/contain no-repeat}
.care dt.i-clock::before{--i:var(--svg-clock)}
.care dd{margin:0;min-width:0}
.hours{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.hours li{display:flex;gap:12px;padding:1px 0}
.hours .d{color:var(--ink2);flex:none;min-width:4.5em}
.hraw{margin:0;padding:2px 0 2px 12px;border-left:3px solid #EED3A8;
color:var(--ink2);font-size:.92rem}
/* 배지는 `</span><span>` 로 공백 없이 이어 붙는다 — 인라인은 **공백에서만** 줄이
   바뀌므로 그 상태로는 줄바꿈 지점이 없어 좁은 화면에서 통째로 넘친다(390px 실측:
   진료과목 11개가 한 줄로 뻗어 잘렸다). flex-wrap 은 공백과 무관하게 항목 사이를
   끊어 주므로 마크업을 건드리지 않고 해결된다. */
.cbdg{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.cbdg .bdg{margin:0;vertical-align:0}
.carenote{margin:1em 0 0;padding-top:10px;border-top:1px dotted var(--dot);
font-size:.76rem;color:var(--ink2)}
.enotice{margin:.9em 0 0;font-size:.85rem;color:var(--ink2)}
.info .isrc{color:var(--ink2);font-size:.78rem;white-space:nowrap}

/* ── 시설·장비 배지 (진료과목 칩과 동일 패턴 + 카테고리 라벨) ── */
/* .cbdg 는 flex 행이라 그대로 두면 그룹 div 셋이 한 줄에 나란히 흘러
   '영상검사 [CT] 수술·처치 [수술실]' 처럼 라벨과 배지가 섞여 보인다(실측).
   시설 행만 세로로 쌓아 그룹당 한 줄 — 라벨 열이 min-width 로 정렬된다. */
.cbdg.fac{flex-direction:column;align-items:stretch;gap:0}
.fac .facg{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:6px}
.fac .facg:last-child{margin-bottom:0}
.facl{flex:none;min-width:4.6em;color:var(--ink2);font-size:.76rem;font-weight:600}
.facb{min-width:0}
.bam{background:var(--amber);color:#3A2405;font-weight:750;border:1px solid #D08C2C}

/* ── 진료비 시세 (농림축산식품부 공개 데이터) ── */
.fee{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:20px 22px;margin:1.6em 0;box-shadow:var(--shadow)}
.fee h2{margin:0 0 .45em;font-size:1.05rem}
.feeh3{margin:1.1em 0 .5em;font-size:.92rem;color:var(--ink2);font-weight:700}
.feeh3:first-of-type{margin-top:.2em}
.feesub{margin:0 0 .9em;font-size:.88rem;color:var(--ink2)}
.feepct{margin:0 0 1em;padding:11px 14px;background:var(--amber-soft);
border:1px solid #EED3A8;border-radius:12px;font-size:.9rem;line-height:1.55}
.feerank{color:var(--amber-deep);font-weight:750;white-space:nowrap}
.feewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.feetab{width:100%;border-collapse:collapse;font-size:.9rem;
font-variant-numeric:tabular-nums}
.feetab th,.feetab td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right}
.feetab thead th{font-size:.76rem;color:var(--ink2);font-weight:600;
border-bottom:1px solid var(--dot);white-space:nowrap}
.feetab thead th:first-child,.feetab tbody th{text-align:left;font-weight:600}
.feetab tbody th{white-space:normal}
.feetab tbody tr:last-child th,.feetab tbody tr:last-child td{border-bottom:0}
.feetab .favg{font-weight:750;color:var(--ink)}
.fani{display:block;color:var(--ink2);font-size:.72rem;font-weight:500}
.fbk{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;
background:#EFEDE6;color:var(--ink2);font-size:.68rem;font-weight:600}
.feevs{margin:.8em 0 0;font-size:.85rem;color:var(--ink2)}
.feenote{margin:1em 0 0;padding-top:10px;border-top:1px dotted var(--dot);
font-size:.76rem;color:var(--ink2);line-height:1.6}
.pharm{margin:1.6em 0}
.pharm .sub{margin:.2em 0 .8em}
/* 약국 필의 **폭**은 상호 길이 × 폰트에 달렸다. Pretendard 는 CDN 에서 오는데,
   늦게 도착하면 폴백 지표로 잡혔던 폭이 한 번에 바뀌며 필이 1줄 ↔ 2줄로 재배치되고
   그 아래 섹션이 통째로 밀린다 — 상세 CLS 0.0789 의 주범이다.
   높이를 숫자로 예약하지 않고 **줄 수가 변할 여지 자체를 없앤다**:
     · 줄 높이를 line-height 로 고정 → 폰트 지표가 바뀌어도 한 줄 높이는 그대로
     · 좁은 화면에선 필을 세로로 쌓는다 → 줄 수 = 약국 수. 폭이 어떻든 안 바뀐다
   상호가 중앙값 5자·최장 21자로 들쭉날쭉해 '몇 줄이 될지'를 맞힐 수 없으니,
   맞히는 대신 결정론으로 만든다. 덕분에 약국이 1곳일 때 빈 자리를 예약하는
   낭비도 없다. */
.pharm .pill{line-height:1.3}
@media (max-width:560px){
.pharm .pills{flex-direction:column;align-items:flex-start;gap:6px}
}
/* 넓은 화면은 한 줄에 들어가는 게 보통이지만, 3곳 + 긴 상호면 2줄이 될 수 있다.
   그 경우만 2줄치를 미리 잡는다. */
@media (min-width:561px){
.pharm .pills[data-n="3"]{min-height:72px;align-content:flex-start}
}
.pharm .feenote{border-top:0;padding-top:6px}
@media (max-width:560px){
.care dl{grid-template-columns:minmax(0,1fr);gap:2px 0}
.care dt{margin-top:10px}
.care dt:first-child{margin-top:0}
.fee{padding:18px 16px}
.feetab{font-size:.84rem}
.feetab th,.feetab td{padding:8px 7px}
.facl{min-width:100%}
}

/* ── 내 주변 (위치 기반) — 좌표는 브라우저에만 있다. search.js 가 켠다 ── */
/* 버튼은 서버가 hidden 으로 내보내고 JS 가 푼다 → 여기 스타일은 켜진 뒤에만 보인다 */
.chips .cnear{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
border-radius:999px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
color:var(--amber-deep);background:transparent;border:1.5px solid var(--amber);
box-shadow:none;transition:background-color .15s,box-shadow .15s,color .15s}
.chips .cnear:hover{background:var(--amber-soft);box-shadow:0 1px 2px rgba(23,27,49,.05)}
.chips .cnear:focus-visible{outline:3px solid rgba(232,162,74,.5);outline-offset:2px}
.chips .cnear[disabled]{cursor:progress;opacity:.75}
.hb-night .chips .cnear{color:#F3C078;background:rgba(232,162,74,.1);
border-color:rgba(232,162,74,.55)}
.hb-night .chips .cnear:hover{background:rgba(232,162,74,.22)}
.cnear .npin{flex:none;margin-top:-1px}

/* 결과 패널 — 검색 드롭다운(#res)과 같은 자리·같은 상자 */
.geop{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:66vh;overflow:auto;
background:var(--card);border:1px solid var(--line);border-radius:var(--r);
box-shadow:0 0 0 1px rgba(23,27,49,.06),0 18px 56px -8px rgba(23,27,49,.28);
z-index:31;text-align:left;padding:6px}
.geoh{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 10px 9px;border-bottom:1px solid var(--line)}
.geoh b{font-size:.82rem;font-weight:750;color:var(--ink2);letter-spacing:.01em}
.geox{flex:none;border:0;background:transparent;color:var(--ink2);cursor:pointer;
font:inherit;font-size:.9rem;line-height:1;padding:5px 7px;border-radius:8px}
.geox:hover{background:var(--amber-soft);color:var(--amber-deep)}
.geol{list-style:none;margin:0;padding:0}
.geol li{display:flex;align-items:center;gap:8px;padding-right:8px;
border-top:1px dotted var(--dot)}
.geol li:first-child{border-top:0}
.geol li:hover{background:var(--amber-soft);border-radius:10px}
.geop .row{flex:1;display:block;padding:10px 12px;color:var(--ink);min-width:0}
.geop .row:hover{text-decoration:none}
.geop .raddr::before{content:none}
.geon{margin:8px 4px 4px;font-size:.72rem;color:var(--ink2);line-height:1.5}

/* 거리 배지 */
.gdist{flex:none;white-space:nowrap;font-weight:700;color:var(--amber-deep);
font-variant-numeric:tabular-nums}
.geol .gdist{font-size:.82rem;padding-right:2px}
/* 목록 행에서는 이름 줄의 배지로 흐른다 — 주소·전화의 가로폭을 건드리지 않는다 */
.rname .gdist{display:inline-block;margin-left:6px;padding:2px 9px;font-size:.7rem;
border-radius:999px;background:var(--amber-soft);border:1px solid #EED3A8;
vertical-align:2px}

/* 지역 페이지 필터·정렬 바 (search.js 가 주입 — JS 없으면 목록만 그대로 보인다) */
.lfbar{margin:0 0 14px}
.lfrow{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
/* 칩은 줄바꿈하지 않고 가로로 흐른다 — 좁은 화면에서 목록이 두세 줄 아래로
   밀려나면 정작 봐야 할 병원이 첫 화면에서 사라진다. */
.lfchips{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;
overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
scrollbar-width:none;padding:2px 2px 2px 0}
.lfchips::-webkit-scrollbar{display:none}
.lfc{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;
border:1.5px solid var(--amber);background:transparent;color:var(--amber-deep);
border-radius:999px;padding:0 16px;font:inherit;font-size:.82rem;font-weight:700;
white-space:nowrap;cursor:pointer;transition:background-color .15s}
.lfc:hover{background:var(--amber-soft)}
.lfc[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#3A2405}
.lfc:focus-visible{outline:3px solid rgba(232,162,74,.5);outline-offset:2px}
.lfc[disabled]{cursor:progress;opacity:.7}
.lfs{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.lfs label{font-size:.78rem;font-weight:700;color:var(--ink2);white-space:nowrap}
.lfs select{min-height:44px;max-width:11.5em;border:1px solid var(--line);
background:var(--card);color:var(--ink);border-radius:12px;padding:0 8px;
font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.lfs select:focus-visible{outline:3px solid rgba(232,162,74,.5);outline-offset:2px}
.lfn{margin:9px 4px 0;font-size:.82rem;font-weight:600;color:var(--ink2);
font-variant-numeric:tabular-nums}
.lfn b{color:var(--ink);font-weight:750}
.lfmsg{margin:6px 4px 0;font-size:.78rem;color:var(--amber-deep)}
.lfnote{margin:4px 4px 0;font-size:.72rem;color:var(--ink2);line-height:1.55}
.lfempty{margin:0 0 1.5em;padding:22px 16px;text-align:center;background:var(--card);
border:1px dashed var(--dot);border-radius:14px;color:var(--ink2);font-size:.9rem}
.lfclear{min-height:44px;margin-left:4px;border:1.5px solid var(--amber);
background:transparent;color:var(--amber-deep);border-radius:999px;padding:0 14px;
font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.lfclear:hover{background:var(--amber-soft)}
.lfclear:focus-visible{outline:3px solid rgba(232,162,74,.5);outline-offset:2px}
/* .list li 보다 한 겹 구체적이어야 flex 를 이긴다 */
.list>li[hidden]{display:none}

/* 상세 히어로 칩 */
.bdgs .geoc{background:#EEF1FA;color:#3A4166;border:1px solid #D9DEEE}
.geoc::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:4px;
vertical-align:-.08em;background:currentColor;
-webkit-mask:var(--svg-pin) center/contain no-repeat;
mask:var(--svg-pin) center/contain no-repeat}

@media (max-width:560px){
.chips .cnear{width:100%;justify-content:center;order:-1;margin-bottom:2px}
.geop{max-height:70vh}
.geol li{gap:6px}
.geol .gdist{font-size:.78rem}
/* 칩 줄과 정렬 셀렉트를 위아래로 나눈다 — 칩은 그 줄 안에서 계속 가로 스크롤 */
.lfrow{flex-wrap:wrap;gap:6px 10px}
.lfchips{flex:1 0 100%;order:1}
.lfs{order:2;width:100%}
.lfs select{flex:1;max-width:none}
}
@media (prefers-reduced-motion:reduce){
.chips .cnear,.lfc,.lfclear{transition:none}
}

/* 지역 페이지 — 목록 위에는 백분위 한 줄만, 항목별 표는 목록 아래로 */
.feelead{margin:0 0 18px}
.feelead .feepct{margin:0}

/* ================================================================ 지도
 *
 * 레이아웃 원칙 하나만 기억하면 된다: **DOM 순서와 시선 순서를 어긋내지 않는다.**
 * 상세는 지도가 마크업에서 먼저 오고, 모바일에선 주소 위·데스크톱에선 주소 왼쪽에
 * 놓인다. 지역도 지도 패널이 목록보다 먼저 오고, 모바일에선 목록 위·데스크톱에선
 * 오른쪽 열이다(grid-column 으로 열만 지정할 뿐 order 로 뒤집지 않는다).
 * 그래서 키보드 초점이 화면을 건너뛰는 일이 없다.
 */

/* ---- 상세: 주소 카드 + 정적 지도 ---- */
.infowrap{display:grid;gap:14px;margin:1em 0}
.infowrap .info{margin:0}
/* 오른쪽 열. 날씨 칩(.wx)은 내용만큼만 차지하고, 주소 카드는 열 폭을 다 쓴다.
   여기를 grid 로 하면 .wx 가 늘어나므로(justify-items 기본 stretch) flex 로 둔다. */
.iwcol{display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:0}
.iwcol>.info{align-self:stretch}
.iwcol>.wx{margin:0}
@media (min-width:760px){
.infowrap{grid-template-columns:300px minmax(0,1fr);align-items:start}
}

.smap{margin:0;background:var(--card);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.smap>a{display:block;position:relative;line-height:0}
.smap>a:hover{text-decoration:none}
/* 이미지가 도착하기 전에도 자리를 차지하도록 배경색을 깔아 둔다. width/height
   속성이 종횡비를 잡아 주므로 레이아웃은 이미 확정돼 있다(CLS 0). */
.smap img{display:block;width:100%;height:auto;background:#EDEAE2}
.smapo{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;
gap:5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.94);
color:var(--amber-deep);font-size:.76rem;font-weight:700;line-height:1.4;
box-shadow:0 1px 3px rgba(23,27,49,.22)}
.smap>a:hover .smapo{background:var(--amber-deep);color:#fff}
.smap figcaption{padding:9px 13px 11px;font-size:.74rem;color:var(--ink2);line-height:1.45}

/* 길찾기 — 서버가 hidden 으로 내보내고 map.js 가 연다 */
.rout{padding:11px 13px 0;border-top:1px dotted var(--dot)}
.routb{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
background:var(--amber-soft);border:1px solid #EED3A8;color:var(--amber-deep);
font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
transition:background .15s,border-color .15s}
.routb:hover{background:var(--amber);border-color:var(--amber);color:var(--night)}
.routb[disabled]{opacity:.6;cursor:default}
.routr{margin:7px 0 0;font-size:.85rem;color:var(--ink2);line-height:1.5}
.routr:empty{display:none}
.routr.ok{color:var(--ink);font-size:.98rem;font-weight:800;font-variant-numeric:tabular-nums}
.routp{margin:5px 0 0;font-size:.72rem;color:var(--ink2);line-height:1.45}

/* ---- 지역: 목록 + 동적 지도 ---- */
.withmap{display:grid;gap:16px;margin:0 0 1.5em}
.wmlist{min-width:0}
.wmlist .list{margin-bottom:0}
@media (min-width:980px){
/* 두 자식 모두 1행에 명시적으로 앉힌다 — 지도는 오른쪽, 목록은 왼쪽.
   **.hasmap 이 붙었을 때만** 2열이다. `hidden` 은 아이템을 배치에서 뺄 뿐 grid
   트랙은 그대로 남기므로, 무조건 2열로 두면 패널이 없는 경우(좌표가 하나도 없는
   지역·JS 미실행·NCP 인증 실패)에 오른쪽 340px 이 빈 칼럼으로 남고 목록만 왼쪽에
   쪼그라든다. 그래서 기본은 1열이고, map.js 가 패널을 실제로 띄우는 순간에만
   이 클래스를 건다 (initRegion 의 showPanel). */
.withmap.hasmap{grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.withmap.hasmap .wmap{grid-column:2;grid-row:1;position:sticky;top:76px}
.withmap.hasmap .wmlist{grid-column:1;grid-row:1}
}

.wmapb{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
background:var(--card);border:1px solid var(--line);color:var(--ink);
font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow);
transition:border-color .15s,color .15s}
.wmapb:hover{border-color:var(--amber);color:var(--amber-deep)}
.wmapc{margin-top:10px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.wmapcv{height:340px;background:#EDEAE2}
@media (min-width:980px){
.wmapb{width:100%;justify-content:center}
.wmapcv{height:min(560px,calc(100vh - 190px))}
}
.wmapn{margin:0;padding:8px 12px 10px;font-size:.72rem;color:var(--ink2);line-height:1.45;
border-top:1px solid var(--line)}
/* SDK 를 받는 동안의 자리. 스피너를 돌리지 않는 건 감속 설정을 존중하는 쪽이
   기본값으로 안전해서다 — 정지된 회색 판이면 아무도 어지럽지 않다. */
.wmap.loading .wmapcv{background:
linear-gradient(90deg,#EDEAE2 0%,#F5F2EA 50%,#EDEAE2 100%)}

/* 번호 마커 — 목록의 .rk 와 같은 숫자다 */
.nmk{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
border-radius:50%;background:var(--amber-deep);color:#fff;
font:800 .8rem/1 "Pretendard Variable",Pretendard,system-ui,sans-serif;
font-variant-numeric:tabular-nums;border:2px solid #fff;
box-shadow:0 2px 6px rgba(23,27,49,.35);cursor:pointer;
transition:transform .15s,background .15s}
.nmk.on{background:var(--night);transform:scale(1.28)}
/* 마커 ↔ 목록 상호 강조 */
.list li.mkon{border-color:var(--amber);background:var(--amber-soft);
box-shadow:var(--shadow-lift)}

@media (prefers-reduced-motion:reduce){
.routb,.wmapb,.nmk{transition:none}
.nmk.on{transform:none}
.wmap.loading .wmapcv{background:#EDEAE2}
}

/* 근거가 약한 24시간 표기 — 확정 배지와 시각적으로 구분한다 */
.bdg.b24.weak{background:transparent;border-style:dashed;color:var(--ink2)}

/* ── 리뷰 사진 드롭존 — 네이티브 파일 버튼 대체 (클릭·드래그앤드롭 겸용) ── */
.drop{border:1.5px dashed var(--dot);border-radius:12px;background:var(--paper);
padding:18px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop:focus-visible{border-color:var(--amber);outline:none}
.drop.over{border-color:var(--amber);background:var(--amber-soft)}
.dropmsg{display:block;font-size:.88rem;color:var(--ink2)}
.dropmsg b{color:var(--amber-deep)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumbs:empty{margin-top:0}
.thumb{position:relative;display:inline-block}
.thumb img{width:72px;height:72px;object-fit:cover;border-radius:10px;
border:1px solid var(--line);display:block}
.thumbx{position:absolute;top:-7px;right:-7px;width:20px;height:20px;line-height:1;
border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink2);
font-size:13px;cursor:pointer;padding:0}
.thumbx:hover{color:#A8455C;border-color:#A8455C}

/* ── 홈 '최근 소식' — 무언가 실제로 일어난 병원 목록 ── */
.aklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.akr{display:flex;align-items:baseline;gap:10px;padding:12px 14px;background:var(--card);
border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.akr:hover{border-color:var(--amber)}
.akr b{font-weight:600;font-size:.95rem;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.akb{flex:none;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px}
.ak-chk{background:var(--amber-soft);color:var(--amber-deep)}
.ak-new{background:#E7F2E4;color:#3E6B33}
.ak-blog{background:#EAF0F7;color:#3F5E86}
.aks{flex:none;font-size:.78rem;color:var(--ink2)}
.akd{flex:none;margin-left:auto;font-size:.78rem;color:var(--ink2);
font-variant-numeric:tabular-nums}