/* 이 파일은 layout.js 가 app.css 다음에 따로 불러와요(app.css 규칙보다 뒤에 와야 덮을 수 있음) */
/* ── 개편안 A "결과 먼저"(2026-11-14): 머리 5탭 · 조건 바 · 조건 시트/패널 · 처음이세요 · 결과 카드 · 지도(시안 색) ──
   시안: docs/mounjaro-price-compare/design/redesign-A (모바일 1·2·3, 데스크톱 w1·w2·w3). app.css 맨 끝에서 불러와 앞 규칙을 덮어요 */

/* ── 머리: 데스크톱은 로고 | 가운데 5탭 | 가·벨. 방문자 수는 발밑으로 ── */
.site-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:10px 0 8px}
.site-nav{margin:0;justify-self:center;display:flex;gap:6px;flex-wrap:nowrap}
.site-nav a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:14px;font-size:16px;font-weight:800;color:var(--sumi-2)}
.site-nav a svg{width:19px;height:19px;flex:none}
.site-nav a:hover{background:var(--washi-2)}
.site-nav a[aria-current=page]{background:var(--ai);color:#fff;box-shadow:0 3px 0 #142740}
.site-foot .visitors{display:inline-flex;margin-top:8px;font-size:12px;padding:3px 10px;background:transparent}
.icon-btn b{font-size:17px}
@media (max-width:1100px) and (min-width:721px){ .site-nav a{padding:0 11px;font-size:15px} .brand small{display:none} }
@media (max-width:720px){
  .site-head{display:flex;padding:8px 0 4px}
  .site-nav{display:none}
  .tabbar a{font-size:12px}
}

/* ── 찾기 홈 틀 ── */
body:has(.home-a) .wrap{max-width:1360px}
.home-a{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.home-a>*{min-width:0}
.find-top{display:flex;flex-direction:column;gap:8px}
.find-sub{display:flex;flex-direction:column;gap:8px;min-width:0}

/* 조건 바 = 나무 주문표(오시나가키) */
.cond-bar{display:grid;grid-template-columns:1.05fr 1.2fr .8fr;background:var(--card);border:2.5px solid var(--wood-line);border-radius:16px;box-shadow:0 4px 0 var(--wood-dark);overflow:hidden}
.cond-cell{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:9px 12px 8px;min-height:56px;cursor:pointer;border-right:1.5px dashed var(--line);min-width:0}
.cond-cell:last-child{border-right:0}
.cond-cell:hover{background:#FFF9EC}
.cond-cell:focus-visible{outline:3px solid var(--ai);outline-offset:-3px}
.cond-cell[aria-expanded=true]{background:var(--tamago-soft)}
.cond-cell small{font-size:12px;color:var(--sumi-2);font-weight:700;white-space:nowrap}
.cond-cell b{font-family:'Jua';font-weight:400;font-size:19px;display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
.cond-cell b>span:not(.caret){overflow:hidden;text-overflow:ellipsis}
.cond-cell .caret{font-size:11px;color:var(--sumi-2);margin-left:auto;flex:none}
.cond-dot{width:17px;height:17px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 4px rgba(255,255,255,.6),0 2px 0 rgba(0,0,0,.12)}

/* 처음이세요? */
.ra-quiz{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ai)}
.ra-quiz svg{flex:none}
.ra-quiz .link{all:unset;cursor:pointer;color:var(--ai);text-decoration:underline;text-underline-offset:3px;font-weight:800}
.ra-quiz .link:focus-visible{outline:3px solid var(--ai);outline-offset:2px;border-radius:4px}
.ra-skip{margin-left:auto;white-space:nowrap;border:0;background:none;color:var(--sumi-2);font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 4px}
html.quiz-done .ra-quiz{display:none}

/* 빠른 칩 */
.ra-chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.ra-chips::-webkit-scrollbar{display:none}
.fchip{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 13px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-size:14px;font-weight:700;color:var(--sumi);white-space:nowrap;text-decoration:none;flex:none;cursor:pointer;font-family:inherit}
.fchip svg.i{width:17px;height:17px}
.fchip.on,.fchip[aria-pressed=true]{background:var(--ai);border-color:var(--ai);color:#fff}
.fchip.more{color:var(--sumi-2)}
.fchip.more.on{color:#fff}
.more-filters{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.more-filters[hidden]{display:none}
.more-filters .st-filters{margin:0}

/* ── 결과 ── */
.ra-area{background:none;border:0;box-shadow:none;padding:0;margin:0}
.ra-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ra-sort{display:flex;background:var(--washi-2);border-radius:13px;padding:3px;gap:2px;min-width:0}
.ra-sort a,.ra-sort button{display:flex;align-items:center;gap:4px;min-height:40px;padding:0 12px;border-radius:10px;border:0;background:none;font-size:14px;font-weight:800;color:var(--sumi-2);text-decoration:none;white-space:nowrap}
.ra-sort small{font-size:11.5px;color:var(--shu-dark);font-weight:800}
.ra-sort [aria-current=true],.ra-sort [aria-pressed=true]{background:#fff;color:var(--sumi);box-shadow:0 1px 0 var(--line)}
.ra-view{display:none;margin-left:auto;border:2px solid var(--ai);border-radius:12px;overflow:hidden}
.ra-view button{display:flex;align-items:center;gap:4px;min-height:38px;padding:0 11px;border:0;background:#fff;font-size:13px;font-weight:800;color:var(--ai)}
.ra-view button svg.i{width:15px;height:15px}
.ra-view [aria-pressed=true]{background:var(--ai);color:#fff}
.ra-meta{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;margin:8px 0 6px;font-size:12.5px;color:var(--sumi-2);font-weight:600;word-break:keep-all}
.ra-meta b{color:var(--sumi);font-weight:800}
.ra-views{margin-left:auto;display:flex;gap:2px}
.ra-views button{border:0;background:none;min-height:32px;padding:0 8px;border-radius:8px;font-size:12.5px;font-weight:800;color:var(--sumi-2)}
.ra-views button[aria-selected=true]{background:var(--ai-soft);color:var(--ai)}
.ra-views b{color:var(--shu)}
.ra-near{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--ai)}
.mm-only{display:none}

/* 결과 카드: 순위 접시 · 이름 · 태그 · 총액 엔/원 · 한국보다 */
.ra-list{background:var(--card);border:2px solid var(--line);border-radius:18px;overflow:hidden}
.ra-list>li+li{border-top:1.5px solid var(--line)}
.ra-list .rank-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;min-height:76px;border-bottom:0}
.ra-plate{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#FFFDF7 0 52%,var(--rc) 53% 100%);box-shadow:0 3px 0 var(--rd)}
.ra-plate b{position:static;min-width:0;height:auto;padding:0;background:none;color:var(--sumi);font-family:'Jua';font-weight:400;font-size:18px;display:block}
.r1{--rc:#E9B949;--rd:#B78A1E}.r2{--rc:#C5CBD3;--rd:#949CA6}.r3{--rc:#D29767;--rd:#A26A3E}.rn{--rc:#EADCC4;--rd:#CDB998}
.ra-list .rank-info{min-width:0}
.ra-list .rank-name{font-size:16px;font-weight:800;line-height:1.25;letter-spacing:-.02em;gap:4px}
.ra-list .badges{gap:4px;margin-top:4px}
.ra-list .badges .chip,.ra-list .badges .stamp{font-size:11.5px;padding:2px 8px}
.ra-list .st-chips,.ra-list [class^="st-"]{font-size:12px}
.rank-acts{display:flex;gap:4px;margin-top:5px}
.rank-acts .eg-save,.rank-acts .cmp-add.compact{min-height:30px;height:30px;padding:0 8px;font-size:12px}
.ra-list .price-col{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;white-space:nowrap}
.ra-list .price-col b{font-family:'Jua';font-weight:400;font-size:22px;line-height:1.1}
.ra-list .price-col b .yen{font-family:'Pretendard Variable',sans-serif;font-size:12.5px;font-weight:800;margin-left:1px}
.ra-list .price-col .won{font-size:12.5px;color:var(--sumi-2);font-weight:600}
.ra-list .save-pill{display:inline-block;transform:none;border:0;border-radius:6px;margin-top:3px;padding:1px 7px;background:var(--shu-soft);color:var(--shu-dark);font-family:'Pretendard Variable',sans-serif;font-size:11.5px;font-weight:800;font-style:italic}
.ra-list .price-col .chip{margin-top:3px}
.rk-go{display:none}
.ra-list .rank-item:hover{background:#FFF9EC}
#rank-list-wrap li.map-on>.rank-item{background:var(--ai-soft);box-shadow:inset 4px 0 0 var(--ai)}
.ra-list li[hidden]{display:none}

/* 아래쪽: 예약 상태 요약·반입·공유·날짜로 찾기·알림·환율 */
.ra-after{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.ra-after>*{margin:0}
.ra-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ra-progress[hidden]{display:none}

/* 지도로 보기(모바일 떠 있는 버튼) */
.map-fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:6px;height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--ai);color:#fff;font-weight:800;font-size:15px;box-shadow:0 4px 0 #142740,0 8px 18px rgba(31,58,95,.28)}
.map-fab svg.i{width:19px;height:19px}
html.sheet-open .map-fab{display:none}
@media (min-width:721px){ .map-fab{bottom:24px} }

/* ── 조건 시트(모바일) · 질문 시트 ── */
.ra-sheet-wrap{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.ra-sheet-wrap[hidden]{display:none}
.ra-dim{position:absolute;inset:0;background:rgba(42,35,32,.45)}
.ra-sheet{position:relative;width:100%;max-width:640px;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto;overscroll-behavior:contain;background:var(--washi);border-radius:22px 22px 0 0;border-top:2px solid var(--line);box-shadow:0 -6px 24px rgba(42,35,32,.18);padding:0 0 0}
.ra-sheet:focus{outline:none}
.ra-grab{width:44px;height:5px;border-radius:9px;background:#CDBFA8;margin:8px auto 4px}
.ra-sh{display:flex;align-items:center;gap:10px;padding:2px 16px 4px}
.ra-sh h2{font-family:'Jua';font-weight:400;font-size:21px;margin:0}
.ra-reset{margin-left:auto;font-size:13px;font-weight:700;color:var(--sumi-2);min-height:44px;display:inline-flex;align-items:center}
.cond-sec{padding:12px 16px 0}
.cond-sec h3{font-size:15.5px;font-weight:800;display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.cond-sec h3 small{font-size:12px;color:var(--sumi-2);font-weight:600}
.cond-sec .dose-rail{gap:6px}
.cond-sec .jaro-stack{display:none}
.ra-seg{display:flex;gap:6px}
.ra-seg a{flex:1;min-height:46px;display:grid;place-items:center;border-radius:12px;background:#fff;border:2px solid var(--line);font-weight:800;font-size:15px;text-decoration:none;color:var(--sumi)}
.ra-seg a[aria-current=true]{background:var(--ai);border-color:var(--ai);color:#fff}
.ra-more-m{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;font-weight:700}
.cond-note{margin:8px 0 0;font-size:12.5px;color:var(--sumi-2);font-weight:600;line-height:1.5}
.cond-city{font-size:14px;font-weight:600;line-height:1.6}
.ra-regions{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:start}
.ra-regionmap{height:152px;background:var(--ai-soft);border-radius:14px;border:2px solid var(--line);overflow:hidden}
.ra-regionmap svg{width:100%;height:100%}
.ra-regionmap circle{transition:r .2s}
.ra-rlist{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rbtn{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:42px;padding:0 9px;border-radius:12px;background:#fff;border:2px solid var(--line);font-size:13.5px;font-weight:800;color:var(--sumi);white-space:nowrap;letter-spacing:-.03em;min-width:0}
.rbtn span{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis}
.rbtn i{width:10px;height:10px;border-radius:3px;flex:none}
.rbtn em{font-style:normal;font-size:12px;color:var(--sumi-2);font-weight:700}
.rbtn.on{border-color:var(--ai)} /* 지금 아래에 도시를 펼쳐 보는 지역 */
.rbtn.sel{border-color:var(--ai);background:var(--ai-soft);color:var(--ai)} /* 이 지역 도시가 골라짐 */
.rbtn.sel > span::after{content:"✓";margin-left:4px;font-weight:900}
/* 대마도(섬) 칸: 이름 아래 "섬 · 숙소로 받기" 두 줄. 온라인 칸은 한 줄 전체 폭 */
.rbtn{min-height:44px}
.rbtn .rb-2{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.15}
.rbtn .rb-2{min-width:0}
.rbtn .rb-2 small{font-size:11px;font-weight:700;color:var(--sumi-2);letter-spacing:-.04em;white-space:normal}
@media (max-width:420px){.rbtn.island{padding:0 7px}.rbtn .rb-2 small{font-size:10.5px}}
.rbtn.on .rb-2 small{color:var(--ai)}
.rbtn.island{min-height:48px}
.rbtn.wide{grid-column:1/-1}
.rbtn svg.i{width:16px;height:16px;flex:none}
/* 도시 칩: 고른 권역 한 줄만(나머지는 권역 칸을 눌러 바꿈) */
.ra-cities{margin-top:10px}
.ra-cities .rg-panel{margin:0;padding:10px;background:#fff;border:2px dashed #C6D2E2;border-radius:14px;box-shadow:none}
.ra-cities .rg-title{display:none}
.ra-cities .rg-top{padding-bottom:6px;margin-bottom:4px}
.ra-cities .rg-rows{display:block}
.ra-cities .rg-row{display:none;grid-template-columns:1fr;padding:2px 0}
.ra-cities .rg-row .rg-h{min-height:0;font-size:12.5px;color:var(--sumi-2);font-weight:700}
.ra-cities .rg-row.ship{margin-top:0;padding-top:2px;border-top:0}
.ra-cities[data-region-open=kanto] .rg-row[data-region=kanto],.ra-cities[data-region-open=kansai] .rg-row[data-region=kansai],
.ra-cities[data-region-open=kyushu] .rg-row[data-region=kyushu],.ra-cities[data-region-open=chubu] .rg-row[data-region=chubu],
.ra-cities[data-region-open=north] .rg-row[data-region=north],.ra-cities[data-region-open=chugoku] .rg-row[data-region=chugoku],
.ra-cities[data-region-open=okinawa] .rg-row[data-region=okinawa],.ra-cities[data-region-open=island] .rg-row[data-region=island],.ra-cities[data-region-open=ship] .rg-row[data-region=ship]{display:grid}
.rg-region-all{font-size:14px;color:var(--ai);border-style:dashed}
.ra-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:var(--washi);border-top:2px solid var(--line)}
.ra-foot .btn{flex:1;height:50px;font-size:18px}
.ra-foot .btn.ghost{flex:.55}
.cond-sum{display:none;font-size:13px;font-weight:700;color:var(--sumi-2)}
html.sheet-open{overflow:hidden}
/* 질문 시트 */
.quiz-step{margin-left:auto;font-weight:800;color:var(--sumi-2);font-size:14px}
.quiz-q{border:0;padding:8px 16px 0;margin:0}
.quiz-q[hidden]{display:none}
.quiz-q legend{font-family:'Jua';font-size:20px;padding:0;margin-bottom:2px}
.quiz-q p{font-size:13px;margin:0 0 10px}
.quiz-q.need legend{color:var(--shu)}
.quiz-q p.quiz-need-msg{display:none;color:var(--shu);font-weight:800;font-size:14px;margin:8px 0 0}
.quiz-q.need p.quiz-need-msg{display:block}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quiz-opt{position:relative;display:flex}
.quiz-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.quiz-opt span{flex:1;display:flex;align-items:center;min-height:50px;padding:6px 12px;border-radius:14px;background:#fff;border:2px solid var(--line);font-weight:800;font-size:15px;line-height:1.3}
.quiz-opt input:checked+span{background:var(--ai);border-color:var(--ai);color:#fff}
.quiz-opt input:focus-visible+span{outline:3px solid var(--ai);outline-offset:2px}
.quiz-opt:first-child:nth-last-child(odd){grid-column:1/-1}

/* ── 지도 ── */
.map-side{padding:0}
.map-box{position:relative;border-radius:20px;overflow:hidden;border:2px solid var(--line);background:#DCE7EE}
.map-side #map{border:0;border-radius:0;background:#DCE7EE}
.map-over{position:absolute;left:10px;top:10px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 70px);pointer-events:none}
.map-over>*{pointer-events:auto}
.map-chip{min-height:38px;background:#fff;border:2px solid var(--line);box-shadow:0 2px 0 var(--line);color:var(--sumi)}
.map-legend{display:block;margin:0;background:rgba(255,253,248,.95);border:2px solid var(--line);border-radius:12px;padding:6px 10px 8px;font-size:12px;font-weight:700;color:var(--sumi-2)}
.map-legend summary{cursor:pointer;font-weight:800;color:var(--sumi);font-size:12.5px;min-height:28px;display:flex;align-items:center;list-style:none}
.map-legend summary::after{content:'▾';margin-left:6px;font-size:10px;color:var(--sumi-2)}
.map-legend:not([open]) summary::after{content:'▸'}
.map-legend p{display:flex;align-items:center;gap:6px;margin:4px 0 0}
.lg{display:inline-grid;place-items:center;flex:none;width:auto;height:18px;min-width:18px;padding:0 5px;border:0;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:800;color:#fff}
.lg-city{background:var(--ai)}
.lg-one{background:var(--shu);border-radius:6px;font-family:'Jua';font-weight:400;font-size:11px}
.lg-approx{width:14px;height:14px;min-width:14px;padding:0;background:#fff;border:2px dashed var(--sumi-2)}
.map-inset{position:absolute;right:10px;bottom:28px;z-index:4;width:112px;height:92px;display:flex;flex-direction:column;align-items:flex-start;padding:6px 8px;border-radius:12px;border:2px dashed #B9C7D3;background:rgba(220,231,238,.9);font-size:12.5px;font-weight:800;color:var(--sumi-2);cursor:pointer}
.map-inset svg{width:80px;height:44px;margin:auto;fill:var(--washi);stroke:#C9B994;stroke-width:1.5}
.map-inset:hover{border-color:var(--ai)}
.map-again{position:absolute;left:50%;transform:translateX(-50%);top:10px;z-index:5;display:flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font-size:13px;font-weight:800;color:var(--ai);box-shadow:0 2px 0 var(--line)}
.map-again[hidden]{display:none}
/* 핀: 남색 묶음(동그라미 = 병원 수 + 최저가), 확대하면 빨간 가격 핀, 고른 핀은 남색 */
.map-pin{position:relative;display:flex;align-items:center;gap:5px;height:32px;min-height:0;padding:0 10px 0 4px;background:#fff;border:2px solid var(--ai);border-radius:999px;font-family:'Pretendard Variable',sans-serif;font-size:13px;font-weight:800;color:var(--sumi);white-space:nowrap;box-shadow:0 3px 0 rgba(31,58,95,.25);cursor:pointer;line-height:1}
.map-pin::after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:inherit;border-right:2px solid var(--ai);border-bottom:2px solid var(--ai);transform:translateX(-50%) rotate(45deg)}
.map-pin.maplibregl-marker-anchor-bottom-left::after{left:14px}
.map-pin.maplibregl-marker-anchor-bottom-right::after{left:auto;right:4px}
.map-pin[class*="maplibregl-marker-anchor-top"]::after{bottom:auto;top:-7px;transform:translateX(-50%) rotate(225deg)}
.map-pin.maplibregl-marker-anchor-top-left::after{left:14px}
.map-pin.maplibregl-marker-anchor-top-right::after{left:auto;right:4px}
.map-pin i{display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:999px;background:var(--ai);color:#fff;font-style:normal;font-size:12px}
.map-pin b{font-weight:800}
.map-pin em{font-style:normal;font-family:'Jua';font-weight:400;font-size:14px;color:var(--shu-dark)}
.map-pin.city:not(.bubble){flex-direction:row;padding:0 10px 0 4px;border-radius:999px}
.map-pin.one{padding-left:10px}
.map-pin.bubble{padding:0 4px;width:auto;min-width:0;height:32px}
.map-pin.price{height:28px;padding:0 8px;background:var(--shu);border-color:var(--shu-dark);color:#fff;font-family:'Jua';font-weight:400;font-size:14px;border-radius:9px;box-shadow:0 3px 0 var(--shu-dark)}
.map-pin.price::after{border-color:var(--shu-dark);width:8px;height:8px;bottom:-6px}
.map-pin.price[class*="maplibregl-marker-anchor-top"]::after{bottom:auto;top:-6px}
.map-pin.moved::after{display:none}
.map-pin.price{z-index:2}.map-dot{z-index:1}
.map-at{width:9px;height:9px;border-radius:50%;background:var(--ai);border:2px solid #fff;box-shadow:0 0 0 1px rgba(31,58,95,.35);pointer-events:none}
.map-pin.approx{border-style:dashed}
.map-pin.best:not(.price) em{color:var(--shu)}
.map-pin.on{outline:0;background:var(--ai);color:#fff;z-index:4}
.map-pin.on em{color:var(--tamago)}
.map-pin.on i{background:#fff;color:var(--ai)}
.map-pin.price.on{background:var(--ai);border-color:#142740;box-shadow:0 3px 0 #142740}
.map-pin.hover{transform:scale(1.1);z-index:3}
.map-dot{width:14px;height:14px;border-radius:50%;background:var(--shu);border:2px solid #fff;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.map-dot.approx{background:#fff;border:2px dashed var(--shu)}
.map-dot.on{background:var(--ai);outline:0}
/* 요약 카드(시안 w2): 지도 위쪽에 */
.map-card{left:50%;right:auto;top:56px;bottom:auto;transform:translateX(-50%);width:min(360px,calc(100% - 20px));border:2.5px solid var(--ai);box-shadow:0 4px 0 #142740,0 12px 28px rgba(31,58,95,.22)}
.map-card-act .btn{flex:1}
.map-card-act .cmp-add{font-size:15px}
.map-side .maplibregl-ctrl-attrib{font-size:9.5px;opacity:.8}
.map-side .maplibregl-ctrl-top-right{top:4px;right:4px}
.map-side .maplibregl-ctrl-group{border-radius:10px;border:2px solid var(--line);box-shadow:none}
.map-side .maplibregl-ctrl-group button{width:38px;height:38px}

/* ── 모바일: 결과 먼저(첫 화면 결과 3곳 이상) ── */
@media (max-width:1023px){
  .map-side,.map-side.open{display:none}
  .rank-split{display:block}
}
@media (max-width:720px){
  .home-a{gap:8px}
  .find-top{display:contents}
  .home-a>.find-top>.cond-bar{order:0}
  .ra-progress{order:5}
  .ra-after{order:6}
  .map-fab{order:7}
  .cond-cell{padding:7px 10px 6px;min-height:52px}
  .cond-cell b{font-size:17px}
  .ra-quiz{font-size:13px}
  .ra-tools{flex-wrap:nowrap}
  .ra-sort a,.ra-sort button{padding:0 10px;font-size:13.5px}
  .ra-meta .mm-hide{display:inline}
  .ra-list .rank-item{grid-template-columns:42px minmax(0,1fr) auto;gap:9px;padding:9px 11px;min-height:72px}
  .ra-list .rank-item .price-col{grid-column:3;grid-row:1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;margin:0;white-space:nowrap}
  .ra-list .rank-item .rank-info{grid-column:2;grid-row:1}
  .ra-list .rank-item .save-pill{grid-column:auto;grid-row:auto}
  .ra-list .rank-name{font-size:15.5px}
  .ra-list .price-col b{font-size:20px}
  .ra-list .badges{flex-wrap:nowrap;overflow:hidden}
  .rank-acts{display:none}
  .ra-plate{width:40px;height:40px}
}
@media (max-width:360px){
  .cond-bar{grid-template-columns:1fr 1.15fr .85fr}
  .cond-cell{padding:6px 8px}
  .cond-cell b{font-size:15.5px;gap:4px}
  .cond-dot{width:13px;height:13px}
  .ra-sort small{display:none}
  .ra-list .rank-item{grid-template-columns:36px minmax(0,1fr) auto;gap:7px;padding:8px}
  .ra-plate{width:34px;height:34px}.ra-plate b{font-size:16px}
  .ra-list .rank-name{font-size:14.5px}
  .ra-list .price-col b{font-size:18px}
  .ra-regions{grid-template-columns:1fr}.ra-regionmap{display:none}
  .quiz-opts{grid-template-columns:1fr}
}

/* 모바일 지도 보기: 위 지도 + 아래 끌어올리는 목록 시트 */
@media (max-width:1023px){
  html.map-mode{overflow:hidden}
  html.map-mode .map-side{display:block;position:fixed;left:0;right:0;top:var(--mm-top,140px);bottom:0;z-index:30;background:#DCE7EE}
  html.map-mode .map-box{height:100%;border:0;border-radius:0;border-top:2px solid var(--line)}
  html.map-mode .map-side #map{height:100%}
  html.map-mode .map-inset{bottom:calc(36vh + 84px)}
  html.map-mode .map-card{top:56px}
  html.map-mode .rank-main{position:fixed;left:0;right:0;bottom:0;z-index:35;height:calc(36vh + 64px + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;background:var(--washi);border-radius:22px 22px 0 0;border-top:2px solid var(--line);box-shadow:0 -6px 24px rgba(42,35,32,.18);padding:0 12px calc(76px + env(safe-area-inset-bottom));transition:height .2s ease}
  html.map-mode .rank-main.mm-full{height:calc(100vh - var(--mm-top,140px) - 10px);height:calc(100dvh - var(--mm-top,140px) - 10px)}
  html.map-mode .mm-only{display:block}
  html.map-mode .ra-meta .mm-only{display:inline}
  html.map-mode .ra-meta .mm-hide,html.map-mode .ra-tools,html.map-mode .ra-views{display:none}
  html.map-mode .ra-meta{position:sticky;top:0;z-index:2;background:var(--washi);margin:0;padding:4px 0 8px;font-family:'Jua';font-size:20px;color:var(--sumi);font-weight:400}
  html.map-mode .ra-meta b{font-weight:400}
  html.map-mode [data-mm-grab]{display:block;width:100%;height:22px;margin:0;background:none;position:sticky;top:0;cursor:grab}
  html.map-mode [data-mm-grab]::before{content:'';display:block;width:44px;height:5px;border-radius:9px;background:#CDBFA8;margin:8px auto 0}
  html.map-mode .map-fab{bottom:calc(36vh + 64px + 14px + env(safe-area-inset-bottom));background:#fff;color:var(--ai);border:2px solid var(--ai);box-shadow:0 3px 0 rgba(31,58,95,.3)}
  html.map-mode .ra-after,html.map-mode .find-sub,html.map-mode .ra-progress,html.map-mode .more-filters,html.map-mode .site-foot{visibility:hidden}
  html.map-mode .rank-more{display:none}
  html.map-mode .rank-list.clamped>li:nth-child(n+31){display:list-item}
}
@media (min-width:721px) and (max-width:1023px){
  html.map-mode .rank-main{bottom:0;padding-bottom:20px;height:40vh}
  html.map-mode .map-fab{bottom:calc(40vh + 14px)}
}

/* ── 데스크톱: 조건 바 | 칩 | 내 준비 한 줄, 아래 목록 + 지도(sticky) ── */
@media (min-width:721px){
  /* 2줄 그리드: [조건 바 | 내 준비] / [빠른 칩 ……… 처음이세요?] */
  .find-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);grid-template-areas:"cond prog" "sub sub";align-items:center;gap:12px 24px}
  .find-top>.cond-bar{grid-area:cond}
  .find-top>.ra-progress{grid-area:prog;width:100%;max-width:420px;justify-self:start}
  .find-top>.find-sub{grid-area:sub;flex-direction:row;align-items:center;gap:8px 20px}
  .find-sub>.ra-chips{order:0;flex:1 1 auto;flex-wrap:wrap;overflow:visible;padding:0;min-width:0}
  .find-sub>.ra-quiz{order:1;flex:none;margin-left:auto;font-size:13.5px;white-space:nowrap;min-height:44px}
  .ra-quiz svg{width:24px;height:24px}
  .ra-quiz .ra-skip{margin-left:4px}
  /* 정렬·알림·목록 토글 같은 높이(46), 요약 줄은 한 줄(넘치면 공식 글만 말줄임) */
  .ra-tools{flex-wrap:nowrap}
  .ra-acts .ra-ib,.ra-acts .eg-share-btn{min-height:46px}
  .ra-view button{min-height:42px}
  .ra-meta{flex-wrap:nowrap;white-space:nowrap;gap:0;min-height:36px}
  .ra-meta .ra-pops{margin-left:8px}
  .ra-meta>*{flex:none}
  .ra-meta .ra-sumtext{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .ra-list .rank-item{grid-template-columns:44px minmax(0,1fr) auto 36px;padding:12px 16px}
  .rk-go{display:block;font-size:13.5px;font-weight:800;color:var(--ai);text-align:right}
}
@media (min-width:721px) and (max-width:1023px){
  .ra-tools{flex-wrap:wrap}
}
@media (min-width:1024px){
  .ra-view{display:flex}
  .map-fab{display:none}
  .rank-split{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:24px;align-items:start}
  .rank-split.list-only{grid-template-columns:minmax(0,1fr)}
  .rank-split.list-only .map-side{display:none}
  .rank-main{border-right:0}
  .map-side,.map-side.open{display:block;position:sticky;top:16px;padding:0}
  .map-side #map{height:calc(100vh - 36px);min-height:460px;max-height:820px}
  .ra-after{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:16px 24px;align-items:start}
  .ra-after>.find-head,.ra-after>.ra-actions{grid-column:1}
  .ra-after>*{grid-column:1 / -1}
  .ra-after>.find-head{grid-column:1}
  /* 조건 패널: 조건 바 바로 아래에 열리는 드롭다운(뒤는 살짝 어둡게) */
  .cond-wrap{display:block}
  .cond-wrap .ra-dim{background:rgba(42,35,32,.28)}
  .cond-wrap .ra-sheet{position:absolute;top:var(--cond-top,150px);left:var(--cond-left,40px);width:min(900px,calc(100vw - 80px));max-height:calc(100vh - var(--cond-top,150px) - 20px);border:2px solid var(--wood-line);border-radius:18px;box-shadow:0 6px 0 var(--wood-dark),0 20px 40px rgba(42,35,32,.22)}
  .cond-wrap .ra-sheet::before{content:'';position:absolute;left:270px;top:-9px;width:16px;height:16px;background:var(--washi);border-left:2px solid var(--wood-line);border-top:2px solid var(--wood-line);transform:rotate(45deg)}
  .cond-wrap .ra-grab,.cond-wrap .ra-sh h2{display:none}
  .cond-wrap .ra-sh{position:absolute;right:16px;bottom:12px;padding:0;z-index:3}
  .cond-wrap .ra-reset{border:2px solid var(--line);border-radius:14px;background:#fff;padding:0 16px;height:48px;font-family:'Jua';font-size:17px;color:var(--sumi);text-decoration:none;box-shadow:0 3px 0 var(--line);margin-right:200px}
  .cond-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px}
  .cond-wrap .cond-sec{padding:16px 20px 0}
  .cond-wrap .ra-foot{position:static;margin-top:18px;padding:12px 20px;justify-content:flex-end;border-radius:0 0 16px 16px}
  .cond-wrap .ra-foot .btn{flex:0 0 auto;height:48px;padding:0 20px}
  .cond-wrap .ra-foot .btn.ghost[data-cond-close]{display:none}
  .cond-sum{display:block;margin-right:auto}
  .quiz-wrap{align-items:center}
  .quiz-wrap .ra-sheet{border-radius:22px;max-width:560px;border:2px solid var(--line)}
}
/* 1024+: 위 그리드 칸을 아래 목록(640)·지도 칸과 같은 선에 맞춤 */
@media (min-width:1024px){ .find-top{grid-template-columns:minmax(0,640px) minmax(0,1fr)} .find-top>.ra-progress{max-width:none} }
/* ── 카드 촘촘하게: 이름 한 줄 + 태그·상태 칩 한 줄(모바일은 넘치면 잘림), 출처 줄은 데스크톱만 ── */
.ra-list .rank-info{display:flex;flex-direction:column;gap:4px}
.ra-list .rank-name{display:flex;align-items:center;flex-wrap:nowrap}
.ra-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ra-tags .badges{display:contents}
.ra-tags .st-status{display:contents}
.ra-tags .st-top:empty{display:none}
.ra-tags .jx-chips{display:contents}
.ra-tags .jx-chip.sm{font-size:11.5px;min-height:24px;padding:1px 7px}
.ra-tags .jx-meta{flex:1 1 100%;font-size:11.5px;color:var(--sumi-2);margin:0}
.ra-tags .jx-meta p{margin:0}
.rank-acts{display:inline-flex;gap:3px;margin:0 0 0 6px;flex:none}
.rank-acts .eg-save,.rank-acts .cmp-add.compact{min-height:28px;height:28px;padding:0 6px;font-size:11.5px;border-radius:8px}
.rank-acts svg.i{width:15px;height:15px}
.ra-list .st-alt{min-height:40px;margin:0 12px 10px 66px;font-size:13px}
/* 묶음 핀 색: 흰 바탕 + 남색 테두리(가장 싼 곳도 같은 모양, 가격 글자만 빨강) */
.map-pin.city,.map-pin.one,.map-pin.city.best,.map-pin.one.best{background:#fff;border-color:var(--ai);color:var(--sumi)}
.map-pin.bubble{background:#fff}
.map-pin.city.on,.map-pin.one.on,.map-pin.bubble.on{background:var(--ai);color:#fff}
.ra-list .price-col b small.yen{display:inline}
@media (min-width:1024px){ .map-side #map{height:calc(100vh - 210px);min-height:520px;max-height:820px} }
@media (max-width:720px){
  .ra-tags{flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .ra-tags .jx-meta{display:none}
  .ra-tags>*,.ra-tags .chip,.ra-tags .jx-chip{flex:none}
  .ra-list .st-alt{margin:0 10px 8px 60px;min-height:36px;font-size:12.5px}
  .ra-meta .opt{display:none}
  .ra-views [data-status-view=list][aria-selected=false]{display:none}
}
@media (max-width:720px){
  .rank-acts{display:none}
  .ra-list .rank-name{white-space:normal;flex-wrap:wrap}
  .fchip{min-height:38px;padding:0 12px;font-size:13.5px}
  .ra-sort a,.ra-sort button{min-height:38px}
  .ra-meta{margin:4px 0 4px}
  .ra-quiz{min-height:36px}
  .ra-skip{min-height:36px}
}
/* ── 마무리(재개): 시트 머리 고정, 팝오버 폭, 지도 보기 버튼 자리 ── */
.cond .ra-grab,.quiz .ra-grab{position:sticky;top:0;z-index:4;margin:0;padding:8px 0 4px;height:auto;background:var(--washi);border-radius:22px 22px 0 0}
.cond .ra-grab::before,.quiz .ra-grab::before{content:'';display:block;width:44px;height:5px;border-radius:9px;background:#CDBFA8;margin:0 auto}
.ra-grab{background:none}
.cond .ra-sh,.quiz .ra-sh{position:sticky;top:17px;z-index:4;background:var(--washi);padding-bottom:6px;border-bottom:1.5px solid var(--line)}
.cond .ra-sh{scroll-margin-top:0}
.cond-sec{scroll-margin-top:72px}
@media (max-width:1023px){
  html.map-mode .map-fab{left:12px;transform:none;bottom:calc(36vh + 64px + 12px + env(safe-area-inset-bottom));height:42px;padding:0 14px;font-size:14px}
  html.map-mode .map-inset{bottom:calc(36vh + 64px + 12px);width:96px;height:78px}
  html.map-mode .map-legend{font-size:11.5px}
}
@media (min-width:721px) and (max-width:1023px){
  html.map-mode .map-fab,html.map-mode .map-inset{bottom:calc(40vh + 14px)}
}
@media (min-width:1024px){
  .cond-wrap .ra-sheet{width:min(980px,calc(100vw - 80px))}
  .cond-cols{grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr)}
  .cond .ra-sh{position:absolute;top:auto;border:0;background:none}
  .cond .ra-grab{display:none}
}
.cond .ra-grab,.quiz .ra-grab{width:auto}
@media (min-width:1024px){ .cond-wrap .ra-sheet{max-width:none} }
/* ── 메인 통합 후 375px 마무리(2026-11-14): 용량 칸 잘림 · 태그 칩 잘림 · 긴 이름과 가격 겹침 ── */
.cond-cell [data-testid=cond-dose]{overflow:visible;text-overflow:clip;flex:none}
@media (max-width:720px){
  .cond-bar{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr)}
  .cond-cell{padding-inline:9px}
  .cond-cell .caret{font-size:10px}
  /* 태그: 자르지 않고 줄바꿈(배지 줄은 서버에서 이미 3개 + "+N") */
  .ra-tags{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ra-tags .jx-chip:nth-of-type(n+2){display:none}
  /* 이름 열은 줄어들 수 있게, 두 줄까지만(말줄임), 가격 열은 고정 폭 */
  .ra-list .rank-item{grid-template-columns:40px minmax(0,1fr) 104px}
  .ra-list .rank-info{min-width:0}
  .ra-list .rank-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
  .ra-list .price-col{width:104px;min-width:0}
  .ra-list .price-col b{font-size:19px}
  .ra-list .save-pill{white-space:nowrap;font-size:11px;padding:1px 5px}
}
@media (max-width:360px){
  .cond-bar{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.8fr)}
  .cond-cell{padding-inline:7px}
  .cond-cell b{font-size:15px;gap:3px}
  .cond-dot{display:none}
  .ra-list .rank-item{grid-template-columns:34px minmax(0,1fr) 92px}
  .ra-list .price-col{width:92px}
  .ra-list .price-col b{font-size:17px}
  .ra-list .save-pill{font-size:10.5px;padding:1px 4px}
}
/* ── 375px 2차: 태그 줄을 이름+가격 아래 카드 폭 한 줄로(최대 2줄, 넘침은 서버 "+N"), 첫 화면 결과 3곳 이상 ── */
@media (max-width:720px){
  .ra-list .rank-item{grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:6px;align-items:start}
  .ra-list .rank-item>.ra-plate{grid-row:1;align-self:center}
  .ra-list .rank-info{display:contents}
  .ra-list .rank-name{grid-column:2;grid-row:1;align-self:center}
  .ra-list .rank-item .price-col{grid-column:3;grid-row:1;width:auto;align-self:center}
  .ra-list .ra-tags{grid-column:2 / -1;grid-row:2;flex-wrap:wrap;max-height:calc(2 * 26px + 4px);overflow:hidden;margin-top:-2px}
  .ra-list .ra-tags .chip,.ra-list .ra-tags .jx-chip,.ra-list .ra-tags .stamp{height:24px;min-height:24px;display:inline-flex;align-items:center}
  .ra-list .rank-item .price-col .chip[data-testid=consult-unknown]{display:none}
}
@media (max-width:360px){
  .ra-list .rank-item{grid-template-columns:34px minmax(0,1fr) auto}
  .ra-list .ra-tags{grid-column:1 / -1}
}
@media (max-width:720px){
  .ra-list .ra-tags .jx-chip~.jx-chip{display:none}
  .ra-list .ra-tags .jx-chip:nth-of-type(n+2){display:inline-flex}
  .ra-list .ra-tags .jx-chip~.jx-chip{display:none}
  .ra-list .rank-item{padding:8px 10px 9px;row-gap:5px}
  .ra-list .price-col{line-height:1.15}
  .ra-list .price-col .won{font-size:12px}
  .ra-list .st-alt{min-height:34px;margin:0 10px 8px 60px;padding:0 10px;font-size:12px;border-radius:10px}
}
@media (max-width:360px){ .ra-list .st-alt{margin-left:10px} }
@media (max-width:720px){
  .ra-list .ra-tags{grid-column:1 / -1;max-height:calc(2 * 24px + 4px)}
  .ra-list .ra-tags .chip,.ra-list .ra-tags .jx-chip,.ra-list .ra-tags .stamp{height:22px;min-height:22px;font-size:11px;padding:0 7px}
  .ra-list .st-alt{margin-left:10px}
  .ra-list .save-pill{margin-top:2px}
}

/* ── home-tools-up C안: 맨 아래 도구를 위로 (여행 날짜 칸·정렬 줄 벨/공유·환율/기준 칩·알림 배너) ── */
.cond-bar{grid-template-columns:1fr 1.1fr 1fr 1fr}
.cond-cell b .cond-pens{font-family:inherit;font-size:12px;color:var(--sumi-2);font-weight:700;flex:none}
.cond-date small{display:inline-flex;align-items:center;gap:3px;color:var(--shu-dark)}
.cond-date small svg.i{width:12px;height:12px}
.cond-date:not(.on) b>span:first-child{color:var(--sumi-2)}
.cond-date.on{background:var(--tamago-soft)}
.cond-prep{margin:10px 0 0;font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

.ra-acts{display:flex;gap:6px;margin-left:auto;flex:none}
.ra-ib,.ra-acts .eg-share-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;height:44px;padding:0 12px;border-radius:13px;border:1.5px solid var(--line);background:#fff;font:800 14px/1 inherit;color:var(--sumi);cursor:pointer;white-space:nowrap;box-shadow:none}
.ra-ib svg.i,.ra-acts .eg-share-btn svg.i{width:19px;height:19px}
.ra-ib.bell{border-color:var(--shu);color:var(--shu-dark);background:#FFF6F2}
.ra-ib:focus-visible,.ra-acts .eg-share-btn:focus-visible,.ra-chip:focus-visible,.ra-alert button:focus-visible,.ra-trip-x:focus-visible{outline:3px solid var(--ai);outline-offset:2px}
.ra-acts .eg-share{position:relative}
.ra-acts .eg-share-menu{right:0;left:auto}

.ra-pops{display:inline-flex;gap:4px;margin-left:6px;align-items:center}
.ra-chip{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 9px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:800 12.5px/1 inherit;color:var(--sumi);white-space:nowrap;cursor:pointer}
.ra-chip .y{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--tamago-soft);color:var(--shu-dark);font-size:11px}
.ra-chip.ra-basis{border-style:dashed;color:var(--sumi-2)}
.ra-chip svg.i{width:15px;height:15px}
.ra-chip[aria-expanded=true]{border-color:var(--ai);background:var(--ai-soft)}
.rank-main{position:relative}
.ra-pop{position:absolute;z-index:40;width:min(340px,100%);background:#fff;border:2px solid var(--wood-line);border-radius:16px;box-shadow:0 10px 28px rgba(42,35,32,.18);padding:12px 14px;font-size:13.5px}
.ra-pop[hidden]{display:none}
.ra-pop:focus{outline:none}
.ra-pop .fx-box{display:flex;align-items:center;gap:6px;font-weight:800;flex-wrap:wrap}
.ra-pop .fx-box .in{width:100px;height:40px}
.ra-pop .fx-box .btn{height:40px;font-size:14px;padding:0 12px}
.ra-pop .muted{font-size:12px;margin:8px 0 0}
.ra-pop .notes{margin:0;padding-left:16px;line-height:1.55;font-size:13px}

.ra-trip{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--ai-soft);color:var(--ai);font-size:13.5px;font-weight:700}
.ra-trip svg.i{width:17px;height:17px;flex:none}
.ra-trip>span{flex:1;min-width:0}
.ra-trip a{color:var(--ai);font-weight:800}
.ra-trip-x{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;text-decoration:none;font-size:18px;flex:none}

.ra-alert{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 4px 6px 12px;border-radius:14px;background:var(--tamago-soft);border:1.5px solid #EBCB77;font-size:14px;font-weight:800;color:var(--sumi)}
.ra-alert svg.i{width:19px;height:19px;color:var(--shu-dark);flex:none}
.ra-alert-t{flex:1;min-width:0;line-height:1.3}
.ra-alert .btn{flex:none;height:38px;padding:0 12px;font-size:14px}
.ra-alert-x{flex:none;width:36px;height:36px;border:0;background:none;color:var(--sumi-2);font-size:20px;cursor:pointer;border-radius:10px}
html.alert-off .ra-alert{display:none}

/* 여행 날짜 시트 */
.trip-form{padding:0}
.trip-lead{margin:0 16px 12px;font-size:13.5px;color:var(--sumi-2);font-weight:600}
.trip-dates{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:0 16px 12px}
.trip-d{display:block;background:#fff;border:2px solid var(--wood-line);border-radius:14px;padding:6px 10px}
.trip-d small{display:block;font-size:12px;color:var(--sumi-2);font-weight:700}
.trip-d input{all:unset;box-sizing:border-box;width:100%;min-height:32px;font-family:'Jua';font-size:18px;color:var(--sumi)}
.trip-d:focus-within{outline:3px solid var(--ai);outline-offset:1px}
.trip-quick{display:flex;gap:6px;flex-wrap:wrap;margin:0 16px 12px}
.trip-result{margin:0 16px}
.trip-daylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.trip-daylist li{display:flex;flex-direction:column;align-items:center;padding:6px 0;border-radius:10px;background:#fff;border:1.5px solid var(--line);font-size:12px;font-weight:800}
.trip-daylist li b{font-size:17px;color:var(--ai);line-height:1.2}
.trip-daylist li small{font-size:11px;color:var(--sumi-2)}
.trip-daylist li.off{opacity:.5}
.trip-daylist li.sun>span{color:var(--shu-dark)}
.trip-daylist li.sat>span{color:var(--ai)}
.trip-unk,.trip-err{margin:10px 16px 0;font-size:12.5px;color:var(--sumi-2);font-weight:600}
.trip-err{color:var(--shu-dark);font-weight:800}
.trip-unk[hidden],.trip-err[hidden]{display:none}
.trip-plan{margin:10px 16px 0;font-size:13.5px;font-weight:800}
@media (min-width:1024px){
  .trip-wrap{align-items:center}
  .trip-wrap .ra-sheet{max-width:560px;border-radius:20px;border:2px solid var(--wood-line)}
  .trip-wrap .ra-foot{border-radius:0 0 18px 18px}
}
@media (max-width:720px){
  .ra-sumtext{display:none!important}
  .ra-acts{gap:5px}
  .ra-ib,.ra-acts .eg-share-btn{width:44px;padding:0}
  .ra-ib-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cond-date .cd-l{display:none}
  .cond-cell b .cond-pens{display:none}
  .ra-pops{margin-left:4px}
  .ra-chip{padding:0 7px}
}
@media (max-width:420px){
  .cond-cell{padding:7px 7px 6px}
  .cond-cell b{font-size:16px;gap:4px}
  .ra-sort a,.ra-sort button{padding:0 8px}
}
@media (max-width:360px){
  .cond-cell .caret,.cond-dot{display:none}
  .cond-cell b{font-size:15px}
  .cond-cell small{font-size:11px}
  .ra-alert{font-size:13px}
}
html.map-mode .ra-pops,html.map-mode .ra-pop,html.map-mode .ra-alert,html.map-mode .ra-trip{display:none}
@media (max-width:720px){
  .ra-meta{flex-wrap:nowrap;white-space:nowrap}
  .ra-meta .ra-views{flex:none}
  .ra-meta .ra-views button{padding:0 5px}
  .ra-basis .rb-l{display:none}
  .ra-chip{min-height:30px;font-size:12px;gap:3px}
  .ra-alert{padding:3px 2px 3px 10px;margin-bottom:8px;font-size:13.5px}
  .ra-alert .btn{height:34px;padding:0 10px;font-size:13.5px}
  .ra-alert-x{width:34px;height:34px}
}
@media (max-width:360px){
  .ra-meta{flex-wrap:wrap}
  .ra-chip .y{display:none}
}
@media (max-width:360px){
  .ra-alert>svg.i{display:none}
  .ra-alert{font-size:12.5px;gap:6px}
  .ra-alert .btn{padding:0 8px;font-size:13px}
}
.ct-short{display:none}
@media (max-width:720px){ .cond-date .ct-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .cond-date .ct-short{display:inline} }
.ra-acts .eg-share-btn{width:44px;padding:0}
.ra-acts .eg-share-btn .ra-ib-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ── 눌림 반응(dead-buttons.md) ── */
/* D3: 도시락 트레이가 있으면 [지도로 보기]를 그 위로 — 트레이의 ×·비교하기를 덮지 않게 */
@media (max-width:720px){ html.has-tray .map-fab{bottom:calc(84px + var(--tray-h,0px) + env(safe-area-inset-bottom))} }
/* D2: 부분 갱신을 기다리는 동안 "눌렸다"를 바로 보여 줌(빠른 응답엔 깜빡이지 않게 조금 늦게) */
#rank-area[aria-busy=true] .rank-split,#rank-area[aria-busy=true] .ra-list{opacity:.55;transition:opacity .15s .12s}
a[data-partial][aria-busy=true],.ra-chips a[aria-busy=true],[data-status-filters] a[aria-busy=true]{opacity:.6}
/* D5: 큰 글씨에서 정렬 줄이 넘쳐 [가까운 순]이 벨 아래로 깔리던 것 → 줄 안에서 옆으로 밀기 */
.ra-sort{flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.ra-sort::-webkit-scrollbar{display:none}
/* P-D1(페르소나 D1): 데스크톱 조건 패널 머리(.ra-sh, [처음 값으로] + 오른쪽 여백 200px)가 [N곳 보기] 위에 겹쳐 마우스 클릭을 모두 먹던 것 → 머리 상자는 클릭을 통과, 안의 링크·버튼만 받음 */
.cond-wrap .ra-sh{pointer-events:none}
.cond-wrap .ra-sh a,.cond-wrap .ra-sh button{pointer-events:auto}
/* 페르소나 K1: 느린 망에서 부분 갱신을 기다리는 동안 흐림만으로는 약함 → 순위 영역 위에 움직이는 진행 막대(0.3초 뒤부터) */
#rank-area{position:relative}
#rank-area[aria-busy=true]::before{content:'';position:sticky;top:0;display:block;height:4px;margin-bottom:-4px;z-index:6;border-radius:2px;background:linear-gradient(90deg,transparent 0,var(--ai) 30%,var(--shu) 60%,transparent 100%) 0 0/200% 100%;opacity:0;animation:sz-busy-in .2s .3s forwards,sz-busy 1.1s linear infinite}
@keyframes sz-busy-in{to{opacity:1}}
@keyframes sz-busy{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){#rank-area[aria-busy=true]::before{animation:sz-busy-in .2s .3s forwards;background:var(--ai)}}

/* 글 줄이기: 아이콘 + 짧은 줄 (가격 기준 팝업, 용량 안내, 한국어 바닥글) */
.ra-pop .notes.ic-notes{list-style:none;padding-left:0;display:grid;gap:8px}
.ic-notes li{display:flex;align-items:flex-start;gap:8px}
.ic-notes li>svg.i{width:16px;height:16px;margin-top:2px;color:var(--ai)}
.cond-note{display:flex;align-items:flex-start;gap:6px}
.cond-note svg.i{width:15px;height:15px;margin-top:1px;color:var(--ai)}
.site-foot .foot-points{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.site-foot .foot-points li{display:inline-flex;align-items:center;gap:5px;line-height:1.4}
.site-foot .foot-points svg.i{width:14px;height:14px;color:var(--sumi-2);stroke-width:2}

/* 당일 수령 필터 안내 */
.st-sameday-note{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:var(--tamago-soft);border:1.5px solid var(--tamago-line);font-size:13.5px;line-height:1.5;color:var(--sumi)}
.st-sameday-note a{font-weight:800;white-space:nowrap}

/* 태블릿(721~1023): 조건 바가 반쪽이라 "오사카·교…"처럼 잘리던 것 — 조건 바를 한 줄 전체로, 내 준비는 아래로 */
@media (min-width:721px) and (max-width:1023px){
  .find-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"cond" "prog" "sub"}
  .find-top>.ra-progress{max-width:none}
}
/* 휴대폰·큰 글씨: 조건 값이 길면 "…"로 자르지 않고 두 줄까지 */
@media (max-width:720px){
  .cond-cell b{white-space:normal;align-items:flex-start}
  .cond-cell b>span:not(.caret){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;word-break:keep-all;overflow-wrap:anywhere}
  .cond-cell .caret{align-self:center}
}