/* 성수 바 고르기
   지도가 화면 전체. 그 위에 밤 색 패널.
   넓은 화면: 왼쪽에 떠 있는 패널 / 좁은 화면: 끌어올리는 바텀시트 */
:root{
  --night:#1F1826;      /* 패널 */
  --night-2:#2A2231;    /* 입력칸, 눌린 행 */
  --night-3:#352C3D;    /* 테두리 강조 */
  --line:#3A3142;
  --text:#F2EBE7;
  --muted:#A99FAF;
  --faint:#7D7385;
  --wine:#D45A7C;
  --whisky:#E2A346;
  --cocktail:#4FC0B0;
  --tj:#A99BF0;
  --beer:#E3CF4A;
  --other:#6E6475;
  --flag:#E9B872;
  --f-name:"Hahmlet","AppleMyungjo",serif;
  --f-ui:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --panel-w:404px;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--f-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;font-feature-settings:"tnum"}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:6px}

/* ---------- 지도 ---------- */
.map{position:fixed;inset:0;background:#2B2430}
.mapmsg{position:fixed;inset:0 0 0 calc(var(--panel-w) + 32px);display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted);z-index:1}
.mapmsg strong{display:block;color:var(--text);font-size:17px;margin-bottom:6px}

/* 핀 */
.kpin{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c);color:#fff;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(20,10,25,.35);transition:transform .15s ease}
.kpin svg{width:18px;height:18px}
.kpin.shop{border-radius:10px;background:var(--night);color:var(--c)}
.kpin .nm{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;color:var(--text);background:var(--night);border-radius:7px;padding:3px 8px;box-shadow:0 2px 8px rgba(20,10,25,.3);opacity:0;pointer-events:none;transition:opacity .15s}
.kpin:hover .nm,.kpin:focus-visible .nm,.kpin.sel .nm,.zoomed .kpin.lbl .nm{opacity:1}
.kpin:hover,.kpin.sel{z-index:5}
.kpin.sel{transform:scale(1.22);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 45%,transparent),0 4px 12px rgba(20,10,25,.4)}
.kpin.dim{opacity:.35}

/* ---------- 패널 ---------- */
.panel{position:fixed;z-index:5;top:16px;left:16px;bottom:16px;width:var(--panel-w);display:flex;flex-direction:column;background:var(--night);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(15,8,20,.45);overflow:hidden}
.grab{flex:none;padding:20px 20px 14px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--line)}
.handle{display:none}
.ph-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.areas{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent)}
.areas::-webkit-scrollbar{display:none}
.areas button{flex:none}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.ph-row .ph-sub{margin:0;min-width:0}
.areas button{font-family:var(--f-name);font-weight:700;font-size:15px;line-height:1;padding:7px 12px;border-radius:999px;background:var(--night-2);color:var(--muted);transition:color .15s,background .15s}
.areas button:hover{color:var(--text)}
.areas button[aria-pressed="true"]{color:var(--night);background:var(--text)}
.ph-sub{margin:4px 0 0;color:var(--muted);font-size:14px;display:flex;align-items:baseline;gap:9px;min-width:0}
.ph-sub #phSub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hood{font-family:var(--f-name);font-weight:700;font-size:31px;line-height:1.05;letter-spacing:-.025em;color:var(--text);white-space:nowrap;flex:none}
.hood:empty{display:none}

.mode{display:flex;padding:3px;border-radius:999px;background:var(--night-2)}
.mode button{padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.mode button[aria-pressed="true"]{background:var(--text);color:var(--night)}

.drinks{display:flex;gap:5px}
.drinks button{flex:1 1 0;min-width:0}
.drinks button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px 9px;border-radius:var(--r-md);background:var(--night-2);border:1.5px solid transparent;font-size:12px;letter-spacing:-.02em;white-space:nowrap;font-weight:600;color:var(--muted);transition:background .15s,border-color .15s,color .15s}
.drinks button svg{width:24px;height:24px;color:var(--c)}
.drinks button:hover{color:var(--text)}
.drinks button[aria-pressed="true"]{color:var(--text);border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,var(--night-2))}

.views{flex:1;min-height:0;position:relative}
.view{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* 목록 */
.tools{padding:14px 20px 4px;display:flex;flex-direction:column;gap:10px}
.search{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:var(--r-sm);background:var(--night-2)}
.search svg{width:18px;height:18px;color:var(--faint);flex:none}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;padding:10px 0;outline:none}
.search input::placeholder{color:var(--faint)}
.search:focus-within{box-shadow:0 0 0 1.5px var(--muted)}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;width:fit-content}
.toggle input{accent-color:var(--text);width:16px;height:16px;margin:0}

.count{margin:10px 20px 2px;font-size:13px;color:var(--muted)}
.count strong{color:var(--text);font-weight:600}
.rows{list-style:none;margin:0;padding:0 8px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name main" "where where" "pour pour";gap:2px 12px;width:100%;text-align:left;padding:13px 12px;border-radius:var(--r-md);transition:background .12s}
.row:hover{background:var(--night-2)}
.row.sel{background:var(--night-3)}
.r-name{grid-area:name;font-family:var(--f-name);font-weight:700;font-size:18px;line-height:1.3;display:flex;align-items:center;gap:6px;min-width:0}
.r-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-name svg{width:15px;height:15px;color:var(--cocktail);flex:none}
.r-main{grid-area:main;align-self:center;font-size:13px;font-weight:600;color:var(--c)}
.r-where{grid-area:where;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pour{grid-area:pour;display:flex;height:4px;border-radius:2px;overflow:hidden;background:var(--other);margin-top:8px}
.pour i{display:block;height:100%}
.rows li+li .row{position:relative}
.empty{margin:24px 20px;padding:24px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-md);font-size:14px}

.tail{padding:16px 20px 28px;display:flex;flex-direction:column;gap:14px}
.addplace{display:flex;flex-direction:column;gap:2px;text-align:left;padding:14px 16px;border-radius:var(--r-md);border:1px dashed var(--night-3);transition:border-color .15s,background .15s}
.addplace:hover{border-color:var(--muted);background:var(--night-2)}
.addplace strong{font-weight:600}
.addplace span{font-size:13px;color:var(--muted)}
.about{font-size:13px;color:var(--muted)}
.about summary{cursor:pointer;width:fit-content}
.about p{margin:8px 0;max-width:60ch;line-height:1.6}
.linkbtn{color:var(--text);text-decoration:underline;text-underline-offset:3px;font-size:13px}

/* 상세 */
.detail{padding:6px 20px 28px}
.back{display:inline-flex;align-items:center;gap:2px;margin:8px 0 6px -6px;padding:6px 8px 6px 4px;border-radius:8px;color:var(--muted);font-size:14px}
.back:hover{color:var(--text);background:var(--night-2)}
.back svg{width:20px;height:20px}
.d-kind{margin:6px 0 0;font-size:13px;color:var(--muted)}
.d-name{margin:2px 0 4px;font-family:var(--f-name);font-weight:700;font-size:30px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.d-where{margin:0;color:var(--muted);font-size:14px}
.d-flag{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;color:var(--flag);background:color-mix(in srgb,var(--flag) 14%,transparent);padding:4px 9px;border-radius:7px}

.glass{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:center;margin:22px 0 20px;padding:18px;border-radius:var(--r-lg);background:var(--night-2)}
.glass svg{width:104px;height:auto;display:block;overflow:visible}
.glass .rim{fill:none;stroke:color-mix(in srgb,var(--text) 55%,transparent);stroke-width:2.5;stroke-linejoin:round}
.glass .shine{fill:none;stroke:color-mix(in srgb,#fff 30%,transparent);stroke-width:3;stroke-linecap:round}
.glass .liquid{transform-box:view-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.glass .liquid{animation:pour .8s cubic-bezier(.2,.7,.2,1) both}}
@keyframes pour{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.mixlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mixlist li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:15px}
.mixlist i{width:10px;height:10px;border-radius:3px}
.mixlist b{font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mixlist .lead b{font-size:26px}
.mixlist li.mixcap{display:block;margin:-2px 0 0;font-size:12px;color:var(--faint)}

.d-note{margin:0 0 14px;font-size:16px;line-height:1.65;max-width:60ch}
.d-facts{margin:0 0 16px;padding:4px 14px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:14px}
.d-facts div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:9px 0}
.d-facts div+div{border-top:1px solid var(--line)}
.d-facts dt{color:var(--faint)}
.d-facts dd{margin:0;color:var(--text);line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.tags span{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--night-2);color:var(--muted)}
.near{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 0 18px;padding:14px 16px;border-radius:var(--r-md);background:color-mix(in srgb,var(--wine) 12%,var(--night-2))}
.near svg{width:26px;height:26px;flex:none;color:var(--wine)}
.near span{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.near strong{color:var(--text);font-size:15px;font-weight:600}
button.near:hover{background:color-mix(in srgb,var(--wine) 20%,var(--night-2))}

.d-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 14px;border-radius:var(--r-sm);font-size:14px;font-weight:600;text-decoration:none;color:var(--text);transition:background .15s,border-color .15s}
.btn.solid{background:var(--text);color:var(--night)}
.btn.solid:hover{background:#fff}
.btn.ghost{border:1px solid var(--line)}
.btn.ghost:hover{background:var(--night-2)}
.btn[aria-pressed="true"]{border-color:var(--cocktail);color:var(--cocktail)}
.btn svg{width:16px;height:16px}
.btn:disabled{opacity:.5;cursor:default}
.d-small{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:12px;color:var(--faint)}
.d-small a,.d-small button{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.d-small a:hover,.d-small button:hover{color:var(--text)}

/* ---------- 제보 창 ---------- */
dialog#report{width:min(500px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--night);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.5)}
dialog#report::backdrop{background:rgba(15,8,20,.6);backdrop-filter:blur(2px)}
#rp-form,.rp-done{padding:22px;display:flex;flex-direction:column;gap:16px}
.rp-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rp-head h2,.rp-done h2{margin:0;font-family:var(--f-name);font-weight:700;font-size:23px}
.rp-head .x{background:var(--night-2);border-radius:9px;width:34px;height:34px;font-size:19px;line-height:1;flex:none}
.rp-place{margin:-8px 0 0;color:var(--muted);font-size:14px}
.rp-place strong{color:var(--text);font-weight:600}
dialog fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
dialog legend{font-size:13px;font-weight:600;margin-bottom:8px;padding:0}
dialog legend span,.fld em{font-weight:400;font-style:normal;color:var(--faint);margin-left:4px}
.issues label{display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:var(--r-sm);background:var(--night-2);border:1px solid transparent;cursor:pointer;font-size:14px}
.issues label:has(input:checked){border-color:var(--text)}
.issues input{accent-color:var(--text);width:16px;height:16px;margin:0}
.seg{flex-direction:row!important;flex-wrap:wrap}
.seg legend{width:100%}
.seg label{position:relative;cursor:pointer;padding:7px 13px;border-radius:999px;background:var(--night-2);font-size:13px;color:var(--muted)}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--text);color:var(--night);font-weight:600}
.seg label:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px}
.fld{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600}
.fld input,.fld textarea{font:inherit;font-weight:400;font-size:15px;padding:11px 13px;border-radius:var(--r-sm);border:1px solid transparent;background:var(--night-2);color:var(--text);resize:vertical;width:100%}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--muted)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rp-err{margin:0;font-size:13px;color:var(--flag);background:color-mix(in srgb,var(--flag) 14%,transparent);padding:9px 12px;border-radius:8px}
.rp-actions{display:flex;justify-content:flex-end;gap:8px}
.rp-done{align-items:flex-start}
.rp-done p{margin:0;color:var(--muted)}

/* ---------- 좁은 화면: 바텀시트 ---------- */
@media (max-width:899px){
  .mapmsg{inset:0 0 auto 0;height:45vh;padding-top:max(24px,env(safe-area-inset-top))}
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;height:calc(100dvh - max(56px,env(safe-area-inset-top) + 24px));border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 40px rgba(15,8,20,.4);transform:translateY(var(--sheet-y,60%));will-change:transform}
  .panel.anim{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .grab{padding:6px 16px 12px;touch-action:none;cursor:grab;gap:12px}
  .handle{display:block;align-self:center;width:44px;height:5px;margin:4px 0 2px;border-radius:3px;background:var(--night-3)}
  .handle::before{content:"";display:block;margin:-12px -20px;height:29px}
  .panel.detailing .grab > :not(.handle){display:none}
  .panel.detailing .grab{border-bottom:0;padding-bottom:0}

  .ph-sub{font-size:13px}
  .hood{font-size:27px}
  .areas{margin:0 -16px;padding:0 16px}
  .drinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .drinks button{flex-direction:row;justify-content:center;padding:8px 4px;gap:4px;font-size:13px}
  .drinks button svg{width:20px;height:20px}
  .tools{padding:12px 16px 4px}
    .count{margin:10px 16px 2px}
  .rows{padding:0 4px}
  .tail{padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
  .detail{padding:0 16px calc(28px + env(safe-area-inset-bottom))}
  .d-name{font-size:27px}
  .glass{grid-template-columns:84px minmax(0,1fr);padding:16px;gap:16px}
  .glass svg{width:84px}
}
@media (max-width:360px){.drinks button{font-size:12px}.drinks button svg{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.r-main .est{font-style:normal;font-weight:500;font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:0 6px;margin-left:6px;vertical-align:1px}
.count .sortby{float:right;color:var(--faint);font-size:12px}
.ph-row .mode{margin-left:auto}
.d-open{display:inline-block;margin-left:6px;font-size:12px;font-weight:600;color:var(--cocktail)}
.d-open.off{color:var(--faint)}
/* 멀리서 볼 때는 핀을 작은 점으로 */
.far .kpin:not(.sel){width:14px;height:14px;border-width:2px}
.far .kpin:not(.sel) svg{display:none}
.far .kpin:not(.sel):hover{transform:scale(1.6)}
/* 동네·역 이동 */
.jump{position:relative;display:flex;gap:8px}
.jsearch{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 12px;height:42px;border-radius:var(--r-sm);background:var(--night-2);border:1px solid var(--line)}
.jsearch svg{width:18px;height:18px;color:var(--wine);flex:none}
.jsearch input{flex:1;min-width:0;height:100%;background:none;border:0;color:var(--text);font:inherit;font-size:15px;outline:none}
.jsearch input::placeholder{color:var(--faint)}
.jsearch:focus-within{border-color:var(--muted)}
.locate{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--night-2);border:1px solid var(--line);color:var(--text)}
.locate svg{width:20px;height:20px}
.locate.busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.jres{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;background:var(--night-2);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 12px 30px rgba(10,5,15,.45)}
.jres button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;color:var(--text);font-size:14px}
.jres button span{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.jres button:hover,.jres button:focus-visible{background:var(--night-3)}
.jres .none{padding:9px 10px;color:var(--faint);font-size:13px}
.me{width:16px;height:16px;border-radius:50%;background:#4C8DF6;border:3px solid #fff;box-shadow:0 0 0 6px rgba(76,141,246,.25)}
.count .more{display:block;margin-top:4px;font-weight:400;color:var(--faint);font-size:12px}
.r-price{font-style:normal;font-family:var(--f-body,inherit);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;flex:none}
.d-facts .faint{color:var(--faint);font-size:12px;margin-left:4px}

/* ---------- 필터 ---------- */
.srow{display:flex;gap:8px}
.srow .search{flex:1;min-width:0}
.fbtn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border-radius:var(--r-sm);background:var(--night-2);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--muted)}
.fbtn svg{width:18px;height:18px}
.fbtn:hover{color:var(--text)}
.fbtn.on{color:var(--text);border-color:var(--text)}
.fbtn b{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--wine);color:#fff;font-size:12px;display:grid;place-items:center}
.factive{display:flex;flex-wrap:wrap;gap:6px}
.factive button{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 6px 4px 10px;border-radius:999px;background:var(--night-2);color:var(--text)}
.factive button span{color:var(--faint);font-size:14px;line-height:1;padding:0 2px}
.factive button:hover span{color:var(--text)}
dialog#filters{width:min(440px,calc(100vw - 24px));max-height:min(720px,calc(100dvh - 32px));padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--night);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.5);overflow:hidden}
dialog#filters[open]{display:flex}
dialog#filters::backdrop{background:rgba(15,8,20,.55);backdrop-filter:blur(2px)}
.f-wrap{display:flex;flex-direction:column;width:100%;min-height:0}
.f-wrap .rp-head{padding:20px 22px 6px}
.f-body{flex:1;min-height:0;overflow-y:auto;padding:8px 22px 18px;display:flex;flex-direction:column;gap:22px}
.f-sec h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{font-size:14px;padding:8px 14px;border-radius:999px;background:var(--night-2);border:1px solid transparent;color:var(--text);transition:background .15s,border-color .15s}
.chips button:hover{border-color:var(--line)}
.chips button[aria-pressed="true"]{background:var(--text);color:var(--night);font-weight:600}
#f-price{display:grid;grid-template-columns:repeat(3,1fr)}
#f-price button{display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:var(--r-md);padding:10px 6px}
#f-price strong{font-size:16px;letter-spacing:.04em}
#f-price span{font-size:12px;color:var(--muted)}
#f-price button[aria-pressed="true"] span{color:var(--night)}
.f-toggles{display:flex;flex-direction:column;gap:12px}
.f-toggles .toggle{font-size:14px;color:var(--text)}
.f-foot{display:grid;grid-template-columns:1fr 2fr;gap:8px;padding:14px 22px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
@media (max-width:899px){
  dialog#filters{width:100%;max-width:none;max-height:86dvh;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
  .f-wrap .rp-head{padding:18px 18px 4px}
  .f-body{padding:8px 18px 16px}
  .f-foot{padding:12px 18px calc(16px + env(safe-area-inset-bottom))}
}
.jres button.is-bar{position:relative;padding-left:24px}
.jres button.is-bar::before{content:"";position:absolute;left:10px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--wine)}


/* ---------- 가게 성격: 바 / 다이닝 바 / 식당 ---------- */
:root{--k-bar:var(--text);--k-meal:#E9B872;--k-dine:#9C8FA6}
.kinds{display:flex;gap:6px}
.kinds button[data-k]{flex:1 1 0;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;text-align:left;padding:6px 10px;border-radius:var(--r-sm);background:var(--night-2);border:1.5px solid transparent;font-size:13px;font-weight:600;color:var(--faint);white-space:nowrap;line-height:1.25;transition:background .15s,border-color .15s,color .15s}
.kinds button[data-k] svg{grid-row:1/3;width:17px;height:17px;flex:none;color:var(--kc)}
.kinds button[data-k] span{overflow:hidden;text-overflow:ellipsis}
.kinds button[data-k] b{font-weight:500;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.kinds button[data-k] b::after{content:"곳"}
.kinds [data-k="bar"]{--kc:var(--k-bar)} .kinds [data-k="meal"]{--kc:var(--k-meal)} .kinds [data-k="dine"]{--kc:var(--k-dine)}
.kinds button[data-k]:hover{color:var(--text)}
.kinds button[data-k][aria-pressed="true"]{color:var(--text);border-color:color-mix(in srgb,var(--kc) 70%,transparent);background:color-mix(in srgb,var(--kc) 12%,var(--night-2))}
.kinds button[data-k][aria-pressed="true"] b{color:var(--muted)}
.kinds button[data-k][aria-pressed="false"] svg{opacity:.55}
.kinds button[data-k][aria-pressed="false"] span{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--faint) 60%,transparent)}
.kinds button.none{opacity:.55}
.kinds button.nudge{animation:nudge .3s}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.kinfo{flex:none;width:34px;align-self:stretch;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--faint)}
.kinfo svg{width:19px;height:19px}
.kinfo:hover,.kinfo[aria-expanded="true"]{color:var(--text);background:var(--night-2)}
.kexp{margin-top:-2px;padding:12px 14px;border-radius:var(--r-sm);background:var(--night-2);font-size:13px;color:var(--muted);line-height:1.55}
.kexp p{margin:0 0 6px;display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px}
.kexp p b{font-weight:700;color:var(--text)}
.kexp p.kexp-src{display:block}
.kexp .k-meal{color:var(--k-meal)} .kexp .k-dine{color:var(--k-dine)}
.kexp .kexp-src{margin:8px 0 0;font-size:12px;color:var(--faint)}
/* 목록 행의 성격 표시 */
.r-kind{font-style:normal;font-size:12px;font-weight:600;margin-right:6px}
.r-kind.k-meal{color:var(--k-meal)}
.r-kind.k-dine{color:var(--k-dine)}
.r-kind.k-dine::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--k-dine);margin-right:5px;vertical-align:1px}
.r-kind.k-meal::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--k-meal);margin-right:5px;vertical-align:1px}
.khint{display:block;margin-top:6px;font-size:12px;color:var(--muted);text-align:left}
.khint u{color:var(--text);text-underline-offset:3px;margin-left:4px}
/* 지도: 식당 핀은 속이 빈 점선 핀 */
.kpin.dine{background:var(--night);color:var(--c);border:2px dashed color-mix(in srgb,var(--c) 80%,#fff)}
.far .kpin.dine:not(.sel){background:var(--night);border-width:2px}
/* 상세: 술만 마셔도 될까 */
.d-type{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px 12px;align-items:start;margin:16px 0 0;padding:13px 14px;border-radius:var(--r-md);background:var(--night-2);border:1px solid var(--line)}
.d-type svg{width:24px;height:24px;color:var(--kc);margin-top:1px}
.d-type.k-bar{--kc:var(--cocktail)} .d-type.k-meal{--kc:var(--k-meal)} .d-type.k-dine{--kc:var(--k-dine);border-style:dashed}
.d-type strong{display:block;font-size:15px;font-weight:700;color:var(--text)}
.d-type span{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.d-type button{grid-column:2;justify-self:start;font-size:12px;color:var(--faint);text-decoration:underline;text-underline-offset:3px;margin-top:2px}
.d-type button:hover{color:var(--text)}
.d-type + .glass{margin-top:14px}

/* ---------- 필터 창 다듬기 ---------- */
.chips button{display:inline-flex;align-items:center;gap:7px}
.chips .c-n{font-style:normal;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.chips button[aria-pressed="true"] .c-n{color:color-mix(in srgb,var(--night) 65%,transparent)}
.chips button.none{opacity:.38}
.chips.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.chips.cards button{flex-direction:column;align-items:center;gap:1px;border-radius:var(--r-md);padding:10px 6px 9px;text-align:center}
.chips.cards .c-t{display:flex;flex-direction:column;align-items:center}
.chips.cards strong{font-size:15px;font-weight:700}
.chips.cards small{font-size:11.5px;color:var(--muted);line-height:1.35}
.chips.cards button[aria-pressed="true"] small{color:color-mix(in srgb,var(--night) 75%,transparent)}
#f-price strong{letter-spacing:.04em}
#f-kind button[data-key="k:meal"][aria-pressed="true"]{background:var(--k-meal)}
#f-kind button[data-key="k:dine"][aria-pressed="true"]{background:#C9BED2}
.switch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:10px;align-items:center;padding:11px 0;cursor:pointer}
.switch + .switch{border-top:1px solid var(--line)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.sw-t b{display:block;font-size:14px;font-weight:600;color:var(--text)}
.sw-t small{display:block;font-size:12px;color:var(--faint);margin-top:1px}
.sw-n{font-style:normal;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.switch i{width:44px;height:26px;border-radius:999px;background:var(--night-3);position:relative;transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.switch input:checked ~ i{background:var(--cocktail)}
.switch input:checked ~ i::after{transform:translateX(18px);background:#fff}
.switch input:focus-visible ~ i{outline:2px solid var(--text);outline-offset:2px}
.switch.off{cursor:default}
.switch.off b,.switch.off i{opacity:.45}
.f-toggles{gap:0}
.factive .clear{background:none;color:var(--faint);text-decoration:underline;text-underline-offset:3px;padding:4px 6px}
.f-done.zero,#f-done.zero{opacity:.6}
.f-wrap .rp-head{border-bottom:1px solid transparent}