/* 디자인 규격 = shop-final.html 정본
   글자 22/17/15/14/13/12/11 · 좌우 16 · 섹션 24 · 모서리 12
   사진 4:3 · 썸네일 72x54 · 예약 48 · 그림자 없음 · 이모지 없음 */
:root{
  --bg:#f5f4f0; --card:#fff; --line:#e3e1da; --line2:#c9c6bc;
  --t1:#1f1f1d; --t2:#5f5e5a; --t3:#95938c;
  --gDeep:#3B6D11; --gSoft:#EAF3DE; --gSoftT:#173404;
  --blueBg:#E6F1FB; --blueT:#042C53;
  --r:12px; --rs:8px; --rc:20px; --gut:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scrollbar-gutter:stable}
html,body{margin:0;background:var(--bg)}
body{color:var(--t1);line-height:1.6;letter-spacing:-.2px;font-size:13px;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  -webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;padding:0;cursor:pointer;color:inherit}
.wrap{max-width:520px;margin:0 auto;background:var(--card);min-height:100vh;
  display:flex;flex-direction:column}
/* 🔴 내용이 짧은 화면에서 회사 정보 아래에 «빈 흰 칸»이 남던 것 (2026-09-06 대표님 지적).
   회사 정보를 화면 맨 아래로 밀고, 남는 자리는 회사 정보와 같은 색으로 채운다. */
.wrap > .foot{margin-top:auto}
.wrap::after{content:'';display:block;flex:0 0 auto;height:0}
body{background:var(--bg)}

.f24{font-weight:700;font-size:24px;font-weight:600;letter-spacing:-.6px}
.f20{font-weight:700;font-size:20px;font-weight:600;line-height:1.35;letter-spacing:-.5px}
.f17{font-size:17px;font-weight:600}
.f15{font-size:15px;font-weight:600}

.f13{font-size:13px}
.f12{font-size:12px}
.f11{font-size:11px;font-weight:600}
.mut{color:var(--t2)}.mut3{color:var(--t3)}

.stick{position:sticky;top:0;z-index:9;background:var(--card);border-bottom:1px solid var(--line)}
.bar{padding:16px var(--gut);display:flex;align-items:center;gap:8px}
.wherebar{padding:0 var(--gut) 16px}
.where{width:100%;padding:12px 16px;border:1px solid var(--line2);border-radius:var(--r);
  display:flex;align-items:center;background:var(--card);font-size:13px;text-align:left}
.sec{padding:24px var(--gut) 0}
.sec-h{display:flex;align-items:baseline;gap:8px}
.sep{height:8px;background:var(--bg)}

.brail{display:flex;gap:0;padding:16px 0 0;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.brail::-webkit-scrollbar{display:none}
.brail>*{scroll-snap-align:start}
.bn{flex:0 0 100%;height:148px;padding:20px;
  display:flex;flex-direction:column;justify-content:flex-end;scroll-snap-align:start}
.bn-dark{background:var(--t1);color:#fff}
.bn-light{background:#eceae4;color:var(--t1)}
.bn-accent{background:var(--blueBg);color:var(--blueT)}
.bn-k{font-size:11px;font-weight:600;opacity:.72;margin-bottom:4px}
.bn-t{font-size:17px;font-weight:600;line-height:1.4}
.bn-s{font-size:12px;opacity:.78;margin-top:4px}
.dots{display:flex;gap:4px;justify-content:center;padding-top:12px}
.dot{width:6px;height:3px;border-radius:2px;background:var(--line2)}
.dot.on{width:16px;background:var(--t2)}

.prail{display:flex;align-items:stretch;gap:12px;padding:16px var(--gut) 24px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.prail::-webkit-scrollbar{display:none}
.pcard{width:100%;height:100%;display:flex;flex-direction:column}
.pimg{position:relative;display:block;padding-top:100%;background:#e7eaed;border-radius:var(--r);overflow:hidden}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pbadges{position:absolute;left:8px;top:8px;display:flex;gap:4px;flex-wrap:wrap}
.pcat,.pbadge{background:#fff;color:var(--t1);font-size:11px;font-weight:600;
  padding:4px 8px;border-radius:var(--rs)}
.pbadge{color:var(--t2);border:1px solid var(--line)}
.ptitle{display:-webkit-box;font-size:13px;font-weight:600;line-height:1.45;margin-top:8px;
  height:38px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 별점 한 줄 (§37 · 2026-09-08) — 상품 이름 아래·값 위. 평점이 있는 카드에만 그려진다.
   🔴 값(.pprice)이 margin-top:auto 로 늘 카드 맨 아래에 붙으므로, 이 줄이 생겨도
      값의 자리는 그대로다 — 한 줄 높이(약 21px)만 늘어난다.
   🔴 이 줄에 새 색을 만들지 않는다. ★ 는 글자라 --t1, 후기 수는 --t2 로 한 단계 낮춘다. */
.prate{display:flex;align-items:center;gap:3px;margin-top:4px;
  font-size:12px;font-weight:600;color:var(--t1);line-height:1.4}
.pstar{font-size:11px;line-height:1}
.prcnt{font-weight:400;color:var(--t2)}
.pprice{display:block;font-size:15px;font-weight:700;margin-top:auto;padding-top:8px}
.pfrom{font-size:12px;font-weight:400;color:var(--t2);margin-left:2px}
/* 할인 전 값(정가) — 값 바로 옆에 줄을 그어 둔다 (2026-09-08 대표님 이미지 지시).
   🔴 카드가 좁으면 아랫줄로 자연스럽게 내려가게 둔다. 억지로 한 줄에 밀어 넣으면
      휴대폰(카드 175px)에서 숫자가 서로 붙어 읽히지 않는다. */
.plist{font-size:12px;font-weight:400;color:var(--t3);text-decoration:line-through;
  text-decoration-thickness:1px;margin-left:6px;white-space:nowrap}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--gut) 24px}
button.more{width:100%}
.pmore{flex:0 0 88px;min-width:88px;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:var(--t2);padding-bottom:28px}
.pmore-c{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center}
.crail{display:flex;gap:8px;padding:16px var(--gut);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.crail::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line2);border-radius:var(--rc);
  padding:8px 16px;font-size:13px;font-weight:600;white-space:nowrap}
.chip.all{background:var(--t1);color:#fff;border-color:var(--t1)}

.card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ph{position:relative;padding-top:75%;background:#e7eaed}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 사진 여러 장 — 좌우로 밀어 넘겨 본다 (2026-09-10 대표님: «화살표 생기면 이상함»).
   🔴 사진이 한 장이면 이 규격이 쓰이지 않는다 — 지금과 똑같이 보인다. */
.hero .phs,.ph .phs{position:absolute;inset:0}
.phs{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;cursor:grab;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.phs::-webkit-scrollbar{display:none}
.phs > img{-webkit-user-drag:none;user-select:none;position:relative;inset:auto;flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
/* 🔴 화살표 — 평소엔 «안 보이고» 사진 위에 마우스를 올렸을 때만 나타난다 (2026-09-10).
   크기 32px 는 마우스 클릭에 넉넉하면서 사진을 가리지 않는 선이다(아고다·마이리얼트립과 같은 급).
   🔴 손가락 기기에서는 아예 나오지 않는다 — @media (hover:none). */
.phnav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.18);border:0;padding:0;z-index:2;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .15s ease}
.phnav svg{width:14px;height:14px;fill:none;stroke:var(--t1);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.phnav.l{left:12px}
.phnav.r{right:12px}
.hero:hover .phnav,.ph:hover .phnav{opacity:1}
.phnav:disabled{opacity:0!important;pointer-events:none}
@media (hover:none){.phnav{display:none}}
/* 🔴 사진이 몇 장인지 알린다 — Baymard: 「점만 있고 안내가 없으면 사진이 더 있는 줄 모른다」 */
.phnum{position:absolute;right:12px;top:12px;z-index:2;pointer-events:none;
  font-size:11px;font-weight:600;color:#fff;letter-spacing:0;
  background:rgba(0,0,0,.5);border-radius:999px;padding:3px 8px}
.phdot{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:5px;justify-content:center;pointer-events:none}
.phdot i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 2px rgba(0,0,0,.35);transition:background .2s,width .2s}
.phdot i.on{background:#fff;width:14px;border-radius:3px}
.badge{position:absolute;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap}
.playtag{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:4px;
  background:rgba(20,20,18,.72);color:#fff;font-size:11px;font-weight:600;line-height:1;
  padding:4px 8px 4px 6px;border-radius:var(--rs);backdrop-filter:blur(4px)}
.playtag svg{width:12px;height:12px;fill:#fff;stroke:none;flex:none}
.playtag svg{width:14px;height:14px;fill:#fff;stroke:none}
.tag{background:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:var(--rs)}
.deep{background:var(--gDeep);color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:var(--rs)}
.soft{background:var(--gSoft);color:var(--gSoftT);font-size:12px;font-weight:600;padding:4px 8px;border-radius:var(--rs)}
.pd{padding:16px}
.star{font-size:12px;font-weight:600;color:var(--t2)}
/* 숙소 유형 이름표 — 이름으로 «확실히» 아는 것만 붙인다 (2026-09-09 대표님 지시).
   🔴 새 색을 만들지 않는다. 성급과 같은 --t2, 테두리는 --line2. */
.ptype{font-size:11px;font-weight:600;color:var(--t2);border:1px solid var(--line2);
  border-radius:var(--rs);padding:1px 6px;margin-left:6px;white-space:nowrap}
.hname{font-weight:700;font-size:20px;font-weight:600;line-height:1.35;margin-top:4px;letter-spacing:-.5px}
.hen{font-size:13px;color:var(--t3);margin-top:4px}
.locrow{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--t2);margin-top:8px}
.rw .locrow{display:inline-flex;margin-top:0}
.pin{width:6px;height:6px;border-radius:50%;border:2px solid var(--t2);flex:none}
.htop{display:flex;align-items:flex-start;gap:12px}
.hgrow{flex:1;min-width:0}
.icons{display:flex;gap:4px;flex:none;margin-top:4px}
.ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.ic-sm{width:30px;height:30px}
.ic-sm svg{width:18px;height:18px}
.ic svg{width:22px;height:22px;stroke:var(--t1);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic.on svg{stroke:#D64545;fill:#D64545}
.loc{font-size:12px;color:var(--t2);margin-top:8px}
.cmp{display:flex;align-items:flex-end;gap:12px;margin-top:20px}
.cmp-l,.cmp-r{flex:1;min-width:0}
.saveband{background:var(--gSoft);border-radius:var(--rs);padding:12px;margin-top:12px;
  text-align:center;font-size:15px;font-weight:600;color:var(--gSoftT)}
.daterow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border-top:1px solid var(--line);margin-top:12px;padding:12px 0 0}
.best{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--rs);
  padding:8px 12px;margin-top:12px}
.bestd{font-size:12px;color:var(--t2)}
.bestp{font-size:15px;font-weight:600;margin-left:auto}
.more{display:block;text-align:center;border:1px solid var(--line2);border-radius:var(--r);
  height:44px;line-height:44px;font-size:13px;font-weight:600;margin-top:8px}
.mtab{display:flex;gap:8px;padding:16px 0;overflow-x:auto;scrollbar-width:none}
.mtab::-webkit-scrollbar{display:none}
.mt{flex:none;border:1px solid var(--line2);border-radius:var(--rc);padding:8px 16px;font-size:13px;font-weight:600}
.mt.on{background:var(--t1);color:#fff;border-color:var(--t1)}
.mbest{background:var(--gSoft);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:8px}
.mbest .d{font-size:12px;color:var(--gSoftT)}
.mbest .p{margin-left:auto;font-size:15px;font-weight:600;color:var(--gSoftT)}
.wk{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.wk:last-child{border-bottom:none}
.wkd{width:62px;flex:none}
.wkbar{flex:1;height:6px;border-radius:3px;background:#efeee9;overflow:hidden}
.wkbar>i{display:block;height:100%;background:var(--line2);border-radius:3px}
.wkp{flex:none;font-weight:600}
.wk.low{background:var(--gSoft);margin:0 -16px;padding-left:16px;padding-right:16px}
.wk.low .wkd,.wk.low .wkp{color:var(--gSoftT)}
.wk.low .wkbar>i{background:var(--gDeep)}
.backbtn{width:36px;height:36px;margin-left:-8px;display:flex;align-items:center;justify-content:center;flex:none}
/* 홈 단추 — 뒤로가기 오른쪽. 뒤로와 한 짝이라 같은 진한 색·같은 36 칸 */
.homebtn{margin-left:-4px;flex:none}
.homebtn svg{width:22px;height:22px;stroke:var(--t1);stroke-width:1.6}
.arwl{width:10px;height:10px;border-left:1.7px solid var(--t1);border-bottom:1.7px solid var(--t1);transform:rotate(45deg)}
.arw{width:6px;height:6px;border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);
  transform:rotate(-45deg);flex:none}
.bestsm{font-size:13px;font-weight:600;color:var(--gDeep);text-align:left}
/* 「더보기」·「주말 날짜별 가격」 — 누를 수 있는 곳임을 글자 진하기로 알린다 (대표님 2026-09-05) */
.morelink{margin-left:auto;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--t1)}
.wklink{margin-left:auto;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--t1)}
.morelink .arw,.wklink .arw{border-color:var(--t1)}
.vid{display:inline-block;font-size:11px;color:var(--t2);border-bottom:1px solid var(--line2)}
.btn{display:block;height:48px;line-height:48px;background:var(--t1);color:#fff;
  text-align:center;font-size:15px;font-weight:700;border-radius:var(--r);margin-top:16px}

.rw{display:flex;gap:12px;padding:12px;align-items:stretch;border-bottom:none;
  transition:background .12s}
.rw:active{background:#f0efea}
.bestrow:active{background:#f0efea}
.card>.rw+.rw{border-top:1px solid var(--line)}
.rw:last-child{border-bottom:none}
/* 사진 안 오른쪽 아래에 얹는 「소개 영상 보기」 (D-33 검은 반투명 = 동작) */
.thumblink{position:absolute;inset:0;display:block}
.vidtag{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;border-radius:var(--rs);white-space:nowrap;
  padding:4px 8px 4px 6px;background:rgba(20,20,18,.72);color:#fff;
  font-size:11px;font-weight:600;line-height:1;backdrop-filter:blur(4px)}
.vidtag svg{width:12px;height:12px;fill:#fff;stroke:none;flex:none}
.vidtag svg{width:12px;height:12px;fill:#fff;stroke:none;flex:none}
.thumbwrap{position:relative;width:120px;min-height:120px;flex:none;display:block}
.thumb{width:120px;height:100%;min-height:120px;border-radius:var(--r);object-fit:cover;
  background:#e7eaed;display:block;position:absolute;inset:0}
.tagsm{position:absolute;left:8px;top:8px;font-size:11px;padding:4px 8px}
.bestrow{padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line);border-bottom:none;
  width:100%;text-align:left;align-items:center;gap:8px}
.gr{flex:1;min-width:0}
.el{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 호텔 이름 — 두 줄까지 (2026-09-17 대표님: «호텔명이 잘려서 정확하지 않다»)
   한 줄 자르기(.el)는 «… 아파트호텔 유니버시티 오…»처럼 이름의 뒤 절반이 사라졌다.
   🔴 두 줄까지 보여주고 넘칠 때만 줄임표 · 한국어는 단어 단위로 줄바꿈(keep-all) · 긴 영문 한 단어는 끊어서라도 넣는다 */
.hname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:keep-all;overflow-wrap:anywhere;line-height:1.35}
.rt{text-align:right;flex:none}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.box{border:1px solid var(--line);border-radius:var(--r);padding:16px}

.srch{display:flex;gap:8px;margin-top:16px}
.srch input{flex:1;border:1px solid var(--line2);border-radius:var(--r);
  padding:12px 16px;font-size:13px;font-family:inherit;background:var(--card);color:var(--t1)}
.srch button{border:1px solid var(--line2);border-radius:var(--r);padding:12px 16px;font-size:13px;font-weight:600;
  flex:none;white-space:nowrap}

.foot{background:var(--bg);padding:24px var(--gut) 40px;font-size:11px;color:var(--t3);line-height:1.9;margin-top:32px}
.foot a{text-decoration:underline}

.sheet{position:fixed;inset:0;z-index:20;display:none}
.sheet.on{display:block}
.dim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.panel{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:var(--card);
  border-radius:16px 16px 0 0;max-height:80vh;overflow:auto;padding:16px;overscroll-behavior:contain}
.grab{width:36px;height:4px;background:var(--line2);border-radius:2px;margin:0 auto 16px}
.shrow{display:flex;align-items:center;gap:16px;width:100%;padding:12px 4px;text-align:left}
.shic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.shic svg{width:22px;height:22px;fill:none;stroke:var(--t1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.grp{font-size:13px;font-weight:600;color:var(--t2);margin:20px 0 8px}
.gchips{display:flex;gap:8px;flex-wrap:wrap}
.gchip{border:1px solid var(--line2);border-radius:18px;padding:8px 16px;font-size:13px}
/* 지금 보고 있는 도시 — 도시 줄의 검은 알약과 같은 표시 */
.gchip.on{background:var(--t1);color:#fff;border-color:var(--t1)}

.load{padding:48px var(--gut);text-align:center;color:var(--t2);font-size:13px}
.err{margin:var(--gut);padding:16px;border:1px solid var(--line2);border-radius:var(--r);font-size:13px;color:var(--t2)}

/* 신상 호텔 (D-117) — 부품은 shop.js, 규격은 여기 한 장 */
.chip.on{background:var(--t1);color:#fff;border-color:var(--t1)}
.chip.sm{font-size:12px;padding:8px 12px}
.nrail{display:flex;gap:12px;padding:4px var(--gut) 24px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
/* 🔴 scroll-padding-inline 이 없으면 스냅이 왼쪽 여백을 먹어 카드가 제목보다 왼쪽으로 밀린다
   (2026-09-06 대표님 지적 · .prail 에는 있는데 .nrail 에 빠져 있었다) */
.nrail::-webkit-scrollbar{display:none}
.ncard{flex:0 0 48%;max-width:220px;min-width:168px;scroll-snap-align:start;
  display:flex;flex-direction:column}
/* 🔴 폭을 % 로만 잡으면 넓은 화면에서 사진이 455px 까지 커진다(2026-09-05 대표님 지적).
   고정 px 로만 잡으면 휴대폰에서 작아진다. 둘 다 걸어 폰 187px · 데스크톱 220px 로 묶는다.
   비율은 4:3 — 아고다 원본이 2000x1500 이라 정사각으로 자르면 방 사진 위아래가 잘린다. */
.nimg{position:relative;display:block;padding-top:75%;background:#e7eaed;border-radius:var(--r);overflow:hidden}
.nimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nyear{position:absolute;left:8px;top:8px;background:#fff;color:var(--t1);font-size:11px;font-weight:700;
  padding:4px 8px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.nstar{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;
  background:rgba(0,0,0,.56);color:#fff;line-height:1;
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:var(--rs);backdrop-filter:blur(4px)}
.ntitle{margin-top:8px;font-size:13px;font-weight:600;line-height:1.4;color:var(--t1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nprice{margin-top:4px;font-size:12px;color:var(--t3)}
.nprice b{font-size:13px;font-weight:700;color:var(--t1)}
.nsub{margin-top:4px;font-size:12px;color:var(--t3)}
/* 🔴 차액(정보)과 「주말별」(누르는 곳)을 같은 초록 글자로 붙여두니 어디가 눌리는지 안 보였다
   (2026-09-06 대표님 지적). 왼쪽=정보 · 오른쪽=버튼으로 가른다. */
.nsaverow{margin-top:4px;display:flex;align-items:center;gap:8px}
.nsave{font-size:11px;font-weight:600;color:var(--ok,#1b7f4b);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nwk{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:2px;
  font-size:11px;font-weight:600;color:var(--t1);
  border:0.5px solid var(--border-strong,#c9c7c0);border-radius:999px;padding:4px 8px}

/* 호텔 세부 페이지 (D-117) */
.hero{position:relative;width:100%;padding-top:66%;background:#e7eaed;overflow:hidden}
.heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.herotag{position:absolute;left:16px;top:16px}
.herostar{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;
  background:rgba(0,0,0,.56);color:#fff;line-height:1;
  font-size:12px;font-weight:600;padding:6px 10px;border-radius:var(--rs);backdrop-filter:blur(4px)}
.heroplay{position:absolute;right:16px;left:auto;transform:none;bottom:16px}
/* 🔴 소개 영상이 있으면 성급을 왼쪽 아래로 옮긴다 — 오른쪽에서 겹쳐 성급이 가려졌다 (2026-09-06) */
.herostar.left{right:auto;left:16px}
.bookbtn{display:block;text-align:center;background:var(--t1);color:#fff;text-decoration:none;
  padding:16px;border-radius:var(--r);font-size:15px;font-weight:600}
.f24{font-size:24px}

/* 옆으로 넘기는 칸 — PC 에서 «끌 수 있다»는 것이 손 모양으로 보여야 한다 (2026-09-06) */
@media (hover:hover) and (pointer:fine){
  .brail,.crail,.prail,.nrail{cursor:grab}
  .brail:active,.crail:active,.prail:active,.nrail:active{cursor:grabbing}
}
/* 🔴 사진·링크를 끌면 브라우저가 «이미지를 다른 곳으로 옮기기»로 가로챈다.
   카드의 대부분이 사진이라, 이걸 막지 않으면 손님은 «끌리지 않는다»고 느낀다
   (2026-09-06 대표님 지적 — 코드는 붙어 있었는데 사진 위에서 끌면 안 먹었다). */
.brail img,.crail img,.prail img,.nrail img,
.brail a,.crail a,.prail a,.nrail a{-webkit-user-drag:none;user-drag:none}

/* 예약 버튼 안 조건 표시 — 버튼 아래 따로 두면 빈 칸이 생긴다 (2026-09-06 대표님 지적) */
.bookas{display:block;margin-top:4px;font-size:12px;font-weight:400;opacity:.72}

/* 소개한 호텔 카드의 「소개 영상」 표시 — 성급과 겹치지 않게 왼쪽 아래 (2026-09-06) */
.nvid{position:absolute;left:8px;bottom:8px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(20,20,18,.72);color:#fff;font-size:11px;font-weight:600;line-height:1;
  padding:4px 8px 4px 6px;border-radius:var(--rs);backdrop-filter:blur(4px)}
.nvid svg{width:12px;height:12px;fill:#fff;stroke:none;flex:none}

/* 글 안에서 누르는 작은 링크 (2026-09-06 검색 화면) */
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--t1);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* 내가 담은 상품 — 담기 단추 (D-117 · 2026-09-06)
   🔴 호텔 찜은 «하트», 상품 담기는 «+». 뜻이 다르니 모양도 달라야 한다. */
.pwrap{position:relative;display:block;flex:0 0 46%;scroll-snap-align:start}
/* 🔴 2026-09-07 — 카드 줄이 뒤죽박죽이던 원인.
   담기 단추(+)를 붙이면서 카드를 .pwrap 으로 한 겹 쌌는데, 너비 규격(46%)은 안쪽 .pcard 에만
   남아 있었다. 줄(.prail)이 실제로 늘어놓는 것은 .pwrap 이라 규격이 먹지 않았고,
   그림 크기와 카드 너비가 카드마다 달라졌다. 규격을 «줄이 보는 쪽»으로 옮긴다. */
.cartb{position:absolute;right:8px;top:8px;z-index:3;width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:rgba(255,255,255,.92);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.16);backdrop-filter:blur(4px)}
/* 🔴 2026-09-08 — 켜지면 «배경»이 검정으로 차던 것을 없앴다. 대표님: «검정색이라서 이상해».
   호텔 찜(.ic.on)과 같은 하트·같은 빨강으로 맞춘다. 배경 흰 동그라미는 그대로 둔다
   (사진 위에 얹히므로 없으면 밝은 사진에서 하트가 사라진다). */
.cartb svg{width:17px;height:17px;fill:none;stroke:var(--t1);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cartb.on svg{stroke:#D64545;fill:#D64545}

/* 예약 수 딱지 — 사진 안 «왼쪽 아래» (2026-09-09).
   🔴 갈래 딱지(.pcat, 흰 바탕)와 «다른 옷»을 입힌다. 같은 흰 바탕이면 손님이 둘을
      같은 종류로 읽는다. 갈래는 「무엇인가」, 예약 수는 「얼마나 팔렸나」로 뜻이 다르다.
   🔴 사진이 밝든 어둡든 읽혀야 하므로 반투명 검정 위 흰 글씨로 둔다. */
.pbook{position:absolute;left:8px;bottom:8px;z-index:2;
  background:rgba(0,0,0,.58);color:#fff;font-size:11px;font-weight:600;
  padding:3px 7px;border-radius:var(--rs);letter-spacing:-.3px;white-space:nowrap}

/* 할인 딱지 — 사진 안 오른쪽 «아래» (2026-09-08 대표님 지시).
   위는 하트, 왼쪽 위는 갈래 딱지가 쓰므로 남은 자리는 여기다.
   🔴 할인율이 있는 상품에만 그려진다. 지금 창고에는 0개 — 자리만 열어 둔 상태다. */
.poff{position:absolute;right:8px;bottom:8px;z-index:2;
  background:#D64545;color:#fff;font-size:11px;font-weight:700;
  padding:3px 7px;border-radius:var(--rs);letter-spacing:-.3px}

/* 로그인 버튼 (D-117) — 카카오를 맨 위 노란색으로. 설명 문구는 붙이지 않는다. */
.sso{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  font-size:15px;font-weight:600;color:var(--t1);text-decoration:none;margin-bottom:9px;cursor:pointer}
.sso.kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.sso svg{width:17px;height:17px;flex:none}

/* 🔴 누르는 것에는 글자가 «잡히지» 않게 한다 (2026-09-07 대표님 화면에서 발견).
   손가락이나 마우스로 화면을 내릴 때 버튼·제목 글자가 파랗게 선택돼 남았다.
   🔴 «누르는 것»에만 건다 — 호텔 이름·값·설명은 손님이 복사할 수 있어야 하므로 건드리지 않는다. */
.bookbtn,.btn,.more,.morelink,.wklink,.chip,.where,.nav,.tag,.tagsm,
.sec-h,.backbtn,.homebtn,.ic{-webkit-user-select:none;user-select:none}

/* 상단바 단추 — 누르는 칸 44px (2026-09-17)
   애플 HIG 최소 44pt · 머티리얼 48dp. 전에는 36px 였다.
   🔴 상단바 높이는 그대로 둔다 — 위아래 -4px 로 늘어난 만큼 되돌린다(그림 22px 도 그대로). */
.bar .ic,.bar .backbtn{width:44px;height:44px;margin-top:-4px;margin-bottom:-4px}
.bar .backbtn{margin-left:-12px}
.bar .homebtn{margin-left:-12px}
/* 오른쪽 «내 정보» — 로그인 전후 같은 아이콘·같은 자리. 로그인하면 «선 색»만 초록으로 (2026-09-17 대표님) */
.mebtn{margin-left:auto;margin-right:-4px}
.meic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px solid transparent;transition:border-color .2s,background .2s}
.mebtn.on .meic{border-color:var(--gDeep);background:var(--gSoft)}
/* 🔴 찜 하트의 «.ic.on svg{빨간 채움}» 규칙이 여기에도 걸린다 — 채움을 확실히 끈다 */
.bar .mebtn.on .meic svg{stroke:var(--gDeep);fill:none;width:20px;height:20px;stroke-width:1.8}

/* 켜고 끄는 스위치 — 설정에서 쓴다 (2026-09-07). 이모지·그림자 없이 */
.tgl{width:44px;height:26px;border-radius:20px;background:var(--line2);position:relative;flex:none;
  transition:background .15s;border:0;padding:0;cursor:pointer}
.tgl>span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:left .15s;display:block}
.tgl.on{background:var(--gDeep)}
.tgl.on>span{left:21px}

/* 🔴 2026-09-12 — 첫 화면 배너 (대표님 지시: 좌우가 화면에 딱 붙지 않게 · 아래 사진 카드와 같은 여백)
   · 좌우 여백은 카드와 같은 --gut(16px)
   · PC 에서 너무 커지지 않게 최대 높이 180 */
#banners{padding:16px var(--gut) 0}
#banners .brail{padding:0;gap:8px}
#banners .bslide{border-radius:var(--rc);overflow:hidden}
#banners .bslide > div{max-height:180px}
@media (max-width:420px){ #banners .bslide > div{max-height:160px} }

/* 🔴 2026-09-13 3차 — 도시 고르기 시트: «지역 탭»(대표님 선택 C안)
   ① «많이 찾는 곳»을 뺐다 — 탭 위에 칩이 깔리면 «탭»과 «도시»가 섞여 보인다(대표님 지적)
   ② 탭 안은 전부 보인다 — 접히는 곳이 없다 */
.rtabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;position:sticky;top:0;background:var(--card);z-index:2;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
/* 🔴 2026-09-17 대표님: «좌우 바가 만들다 만 것 같다» — 브라우저 기본 스크롤 막대(화살표)가 드러나 있었다.
   다른 가로 칸(.crail·.prail…)처럼 막대를 숨기고, «뒤에 더 있다»는 것은 가장자리 흐림으로 알린다(edgeFade). */
.rtabs::-webkit-scrollbar,.evtabs::-webkit-scrollbar{display:none}
.evtabs{scrollbar-width:none}
.fade-r{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
.fade-l{-webkit-mask-image:linear-gradient(to left,#000 82%,transparent);mask-image:linear-gradient(to left,#000 82%,transparent)}
.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
.rtab{flex:0 0 auto;white-space:nowrap;border:1px solid var(--line2);background:var(--card);color:var(--t2);
  border-radius:999px;padding:8px 13px;font-size:13.5px;font-family:inherit}
.rtab b{font-weight:400;opacity:.55;margin-left:4px;font-size:12px}
.rtab.on{background:var(--t1);color:#fff;border-color:var(--t1);font-weight:700}
.rtab.on b{opacity:.65}
.rbody{padding-top:2px}
.crow{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.cname{flex:0 0 78px;font-size:12.5px;color:var(--t2);padding-top:7px}
.crow .gchips{flex:1;margin:0}
.crow .gchip{padding:7px 12px;font-size:13.5px}

/* 🔴 2026-09-21 대표님 «호텔 보이는 영역의 크기는 다 같이» — 이름이 한 줄이어도 두 줄 자리를 둔다
   (목록 카드 · 가로 카드). 빠질 수 있는 줄은 shop.js 의 slot() 이 자리를 지킨다. */
.rw .hname{min-height:2.7em}
.ntitle{min-height:2.8em}