@charset "utf-8";
/* ============================================================
   CATCHFLAW PC 레이아웃 (2026-10) — Mobbin PC 예약 사이트 패턴 기반
   - 로드 순서: tokens → common → layout → swiper → uplift → mvp → **pc.css(최후순위)**
   - 모바일(≤769px) 규칙은 건드리지 않는다. 넓은 화면에서만 덮어쓴다.
   - --width: 원래 '모바일 칼럼 폭'. 바텀시트·모달·플로팅이 이 값을 쓰므로 PC에서는 시트 폭(560)으로 두고,
     페이지 틀(#wrapper)만 100%로 푼다.
   참고 패턴: 헤더 검색(Tripadvisor·Klook) · 목록+고정지도(Tripadvisor·KAYAK) · 사진 1+4 그리드(KAYAK·Klook)
             · 오른쪽 고정 결정 카드(Airbnb·Turo) · 비교표 왼쪽 항목명 칸(Zillow) · 카드 그리드(Expedia)
   ============================================================ */

/* PC 전용 요소의 기본 숨김은 ds.css(모바일 기본)로 옮김 — pc.css는 media=(min-width:770px) 링크라 모바일에선 실리지 않는다(2026-10-20) */

/* ── 태블릿·작은 노트북(770~1099): 단일 칼럼을 600px로 넓힘 (기존 360 고정 해소) ── */
@media (min-width:770px) and (max-width:1099px){
    :root{--width:600px;--hcard-w:252px;}   /* 캐러셀 카드 폭 = 단일 칼럼(600)의 42% */
}

/* ══════════════════════ PC (≥1100px) ══════════════════════ */
@media (min-width:1100px){
    :root{--width:560px;--pc-max:1184px;--pc-x:32px;--fs-num-xl:72px;--fs-hero:48px;--section-pt:48px;--section-pb:48px;--head-gap:24px;--h-sheet-head:64px;}   /* PC 틀 = 내용 1120 + 좌우 32(--pc-max 1184): 헤더 로고·홈·검색 목록·상세·비교·허브·소개·최근 본의 왼쪽 끝을 한 줄에(v3 §4-1·§7-4). PC 전용: 히어로 숫자 72·홈 히어로 48(v3 §2-1), 문서 리듬 48/48·제목→내용 24(§4-2) */
    body,#wrapper{background:var(--surface-card);}
    #wrapper{width:100%;}

    /* ── 공통 헤더: 로고 · 검색 · 가로 메뉴 (뒤로가기·햄버거 숨김) ── */
    .det-header{justify-content:flex-start;gap:var(--sp-8);height:64px;padding:0 max(var(--pc-x), calc((100% - var(--pc-max)) / 2 + var(--pc-x)));}
    .det-header .dh-back,.det-header .dh-back-empty,.det-header .dh-menu{display:none;}
    .det-header .dh-logo{height:18px;}
    .det-header .dh-search{display:flex;align-items:center;gap:var(--sp-2);width:360px;height:40px;padding:0 var(--sp-2) 0 var(--sp-4);border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--surface);}
    .det-header .dh-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:var(--fs-caption);color:var(--ink);}
    .det-header .dh-search button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:none;color:var(--ink-2);cursor:pointer;}
    .det-header .dh-search:focus-within{border-color:var(--primary);background:var(--surface-card);}
    .det-header .dh-nav{display:flex;align-items:center;gap:var(--sp-8);margin-left:auto;flex:none;}   /* 메뉴 6개: 줄지 않고, 좁은 PC(1100~)에선 검색창이 대신 줄어든다 */
    .det-header .dh-nav a{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--ink-2);white-space:nowrap;}
    .det-header .dh-nav a:hover,.det-header .dh-nav a[aria-current="page"]{color:var(--primary);}

    /* ── 공통 푸터·플로팅 ── */
    #site-foot{max-width:var(--pc-max);margin:0 auto;padding-left:var(--pc-x);padding-right:var(--pc-x);border-top:1px solid var(--line);}
    .cmp-tray,.cmp-tray.on-detail{left:auto;right:calc(var(--pc-x) + 64px);bottom:var(--sp-6);transform:none;}
    html.is-scroll-down .cmp-tray,html.is-scroll-down .cmp-tray.on-detail{transform:translateY(130%);}   /* PC는 가로 이동 없음 */

    /* ════════ 상세: 제목줄 → 사진 그리드 → [본문 | 고정 결정 카드] ════════ */
    #detail{--h-header:64px;--sticky-top:var(--h-header);}   /* 4A: 상세 PC 헤더 64 — sticky 오프셋(탭·결정 카드·앵커)이 이 토큰을 따른다 */
    #detail .det-header{height:var(--h-header);}
    #detail .content{display:grid;grid-template-columns:minmax(0,1fr) 373px;column-gap:94px;align-items:start;max-width:var(--pc-max);margin:0 auto;padding:var(--sp-4) var(--pc-x) var(--sp-12);}   /* 1120 = 653 / 94 / 373 (v3 §7-3) */
    #detail .content > *{grid-column:1;min-width:0;}
    #detail .content > .visual{display:none;}                       /* 모바일 스와이프 갤러리 → PC 사진 그리드 */
    #detail > .button{display:none;}                                  /* 모바일 하단 CTA 바 → 결정 카드 CTA */

    /* 제목줄(정보 섹션): 경로 · 호텔명·메타 · 3칸 요약 행(sum, 가로 560 안) — v3 §7-3 (4) */
    #detail .content > .information{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"crumb" "cont" "sum" "ans" "note";margin-top:0;padding:var(--sp-2) 0 var(--sp-5);border-radius:0;overflow:visible;}
    #detail .information .pc-crumb{grid-area:crumb;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);font-size:var(--fs-meta);color:var(--ink-3);}
    #detail .information .pc-crumb a{color:var(--ink-3);}
    #detail .information .pc-crumb a:hover{color:var(--ink);text-decoration:underline;}
    #detail .information .pc-crumb b{font-weight:var(--fw-semi);color:var(--ink);}
    #detail .information .info-cont{grid-area:cont;}
    #detail .information .info-cont .name .name-ko{font-size:var(--fs-title);line-height:var(--lh-title);}   /* PC도 모바일과 같은 26(v3 §2-1) */
    #detail .information .info-meta .dsep{display:inline;height:auto;overflow:visible;}   /* PC는 한 줄: '후쿠오카 · 3성급 호텔 · 텐진역 도보 3분' */
    #detail .information .info-sum{grid-area:sum;max-width:560px;}
    #detail .information .info-answer{grid-area:ans;max-width:560px;}   /* 답 문단(SEO-CRAWL §4): 모바일과 같은 순서(요약 3칸 → 문단 → 리뷰 적음 주의), 같은 폭 */
    #detail .information .lowrev-note{grid-area:note;max-width:560px;}
    #detail .information .is-gnote{display:none;}   /* '최근 1년 구글 ★4.1 · 1~2점 7%'는 PC에선 결정 카드 행(평균까지)이 맡는다 — SCORE-LOWSTAR §4-3 */
    #detail .information .info-price{display:none;}   /* PC는 오른쪽 결정 카드에 평일·주말 가격 + '가격 기준 ?'(2026-10-12) */

    /* 사진 그리드: 장수별 배치 (호텔당 사진 1~2장이 대부분) */
    #detail .content > .pc-gallery{grid-column:1 / -1;grid-row:2;position:relative;display:grid;gap:var(--sp-2);height:500px;margin-bottom:var(--sp-8);overflow:hidden;border-radius:var(--radius-box);}
    #detail .pc-gallery .pg-cell{position:relative;min-height:0;overflow:hidden;background:var(--surface);}
    #detail .pc-gallery img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s;}
    #detail .pc-gallery .pg-cell:hover img{transform:scale(1.03);}
    #detail .pc-gallery .pg-cell,#detail .pc-gallery .pg-count{cursor:zoom-in;}
    #detail .pc-gallery.g1{grid-template-columns:1fr;}
    #detail .pc-gallery.g2{grid-template-columns:2fr 1fr;}
    #detail .pc-gallery.g3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;}
    #detail .pc-gallery.g3 .pg-0{grid-row:1 / 3;}
    #detail .pc-gallery.g4{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;}
    #detail .pc-gallery.g4 .pg-0{grid-row:1 / 3;}
    #detail .pc-gallery.g4 .pg-1{grid-column:2 / 4;}
    #detail .pc-gallery.g5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;}
    #detail .pc-gallery.g5 .pg-0{grid-row:1 / 3;}
    #detail .pc-gallery .pg-count{position:absolute;right:var(--sp-4);bottom:var(--sp-4);height:32px;padding:0 var(--sp-3);display:flex;align-items:center;border-radius:var(--radius-box);background:rgb(25 27 31 / 70%);color:var(--ink-inverse);font-size:var(--fs-caption);font-weight:var(--fw-bold);}

    /* 오른쪽 고정 결정 카드(v3 §7-3 (4)): 실망 확률 14 → 숫자 22/700(히어로 숫자는 왼쪽 섹션 72 하나뿐) → 판정 16/700 + 8px 점 → 행 14 → 브랜드 CTA 48 */
    #detail .content > .pc-side{grid-column:2;grid-row:3 / span 60;position:sticky;top:calc(var(--sticky-top) + var(--sp-6));display:block;padding:var(--sp-6);border:1px solid var(--line-strong);border-radius:var(--radius-box);background:var(--surface-card);box-shadow:var(--shadow-float);}
    .pc-side .ps-eyebrow{font-size:var(--fs-meta);font-weight:var(--fw-regular);color:var(--ink-3);}
    .pc-side .ps-pct{margin-top:var(--sp-1);font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-title);letter-spacing:var(--ls-title);color:var(--ink);font-variant-numeric:tabular-nums;}
    .pc-side .ps-verdict{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1);font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--ink);}
    .pc-side .ps-collect{margin-top:var(--sp-1);font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--ink);}
    .pc-side .ps-avg{margin-top:var(--sp-1);font-size:var(--fs-meta);color:var(--ink-3);}
    #detail .disappear .ev-row{font-size:var(--fs-body);}
    .pc-side .ps-rows{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);}
    .pc-side .ps-rows li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;font-size:var(--fs-meta);line-height:var(--lh-ui);color:var(--ink-3);}
    .pc-side .ps-rows li span:last-child{color:var(--ink);text-align:right;}
    .pc-side .ps-rows li.ps-pnote{padding-top:0;}
    .pc-side .ps-rows li.ps-pnote span{color:var(--ink-3);text-align:left;}
    .pc-side .ps-rows b{font-weight:var(--fw-semi);color:var(--ink);}
    .pc-side .ps-cta{margin-top:var(--sp-5);}
    .pc-side .ps-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-2);}
    .pc-side .ps-actions .ps-share:only-child{grid-column:1 / -1;}
    .pc-side .ps-note{margin-top:var(--sp-4);font-size:var(--fs-meta);color:var(--ink-3);text-align:center;}
    .pc-side .ps-note a{color:var(--ink);text-decoration:underline;}

    /* 본문(왼쪽 칼럼): 섹션 구분은 얇은 선 + 넉넉한 위 여백 */
    #detail .content > .sect{padding:var(--section-pt) 0 var(--section-pb);}
    #detail .content > .sect::before{left:0 !important;right:0 !important;}   /* ds.css 구분선: PC 본문 칼럼은 좌우 여백이 없으므로 끝까지 */
    #detail .content > .sect.glance{padding:var(--sp-6) 0;}
    #detail .det-tabs{top:var(--sticky-top);}
    #detail .who .who-chips{flex-wrap:wrap;margin-inline:0;padding-inline:0;}   /* PC 본문 칼럼은 좌우 여백이 없다 — 끝까지 늘이지 않음 */
    #detail .det-tabs{padding:0;}   /* PC 본문 칼럼은 좌우 여백이 없다 — 첫 탭 글자를 본문 왼쪽 끝에 */
    #detail .det-tabs > a:first-child{padding-left:0;}
    #detail .det-tabs > a:first-child::after{left:0;}
    #detail .sect[id],#detail .sec-anchor{scroll-margin-top:calc(var(--sticky-top) + var(--h-tab) + var(--sp-1));}
    #detail .location .map iframe{aspect-ratio:auto;height:360px;}     /* 모바일 32:22 비율은 PC 폭에서 너무 큼 */
    /* 대안·추천 슬라이더 → 4열 카드 그리드 (Expedia 패턴, 8곳 = 2줄) — 홈·상세 공용 .hotel-slider */
    .hotel-slider{margin-right:0;}
    .hotel-slider .swiper-wrapper{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-8) var(--sp-5);transform:none !important;}
    .hotel-slider .swiper-slide{width:auto !important;margin:0 !important;}
    .hcard--carousel .hcard-photo{aspect-ratio:4/3;}
    .hcard:hover .hcard-photo img{transform:scale(1.03);}
    #hub .hub-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8) var(--sp-6);}   /* 허브 와이드 카드: PC 틀 1120에서 3열(카드 폭 약 357 — 검색 2열 카드와 비슷)*/
    /* ════════ 검색: [목록 63% | 고정 지도 37%] — 상단 줄·칩 줄은 목록 위, 지도는 오른쪽 끝까지(v3 §7-2) ════════ */
    body[data-page=search] .det-header{display:flex;}   /* 모바일에서 숨긴 헤더(로고·메뉴)는 PC에서 그대로 */
    #title{position:static;max-width:none;margin:0;padding:var(--sp-5) 0 0;border-bottom:0;box-shadow:none;transform:none;}   /* PC는 sticky 아님 → iOS 이음매 보정 해제. #search 그리드의 목록 칸 안(지도는 헤더 바로 아래부터) */
    .st-back{display:none;}
    .st-row{justify-content:flex-start;min-height:0;}
    #title .search{flex:0 1 560px;}
    #title .search .ac-box{right:auto;width:min(560px, 100%);}
    .f-bar{flex-wrap:wrap;margin:0;padding:var(--sp-3) 0 0;overflow:visible;}
    html.rec-mode #title{display:none;}
    #search{display:grid;grid-template-columns:minmax(0,63fr) minmax(0,37fr);column-gap:var(--sp-6);align-items:start;padding:0 0 var(--sp-12) max(var(--pc-x), calc((100% - var(--pc-max)) / 2 + var(--pc-x)));}
    #search > *{grid-column:1;min-width:0;}
    #search .list-head{padding-left:0;padding-right:0;}
    #search .list,#search .notice{padding:0;}
    #search .search-all{padding-left:0;padding-right:0;}
    #search .rec-header{padding-left:0;padding-right:0;}
    #results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) var(--sp-6);}
    #results > .rec-group,#results > .rec-more-wrap,#results > .rec-empty{grid-column:1 / -1;}
    #results .hcard--wide .hcard-photo{aspect-ratio:20/19;}
    #results .hcard:hover .hcard-photo img{transform:scale(1.03);}
    #search > .map-wrap{grid-column:2;grid-row:1 / span 60;position:sticky;top:64px;margin:0;height:calc(100vh - 64px);border-radius:0;}   /* 헤더 아래 전체 높이, 오른쪽 끝까지 붙임 r0 */
    #search > .map-wrap #map{height:100%;}
    #search .map-toggle,html.has-cmp #search .map-toggle{display:none;}
    .map-card{left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);}
    .rec-header .rh-chips{margin:var(--sp-3) 0 0;padding-left:0;padding-right:0;flex-wrap:wrap;overflow:visible;}


    /* ════════ 홈 ════════ */
    #main{max-width:var(--pc-max);margin:0 auto;background:var(--surface-card);}
    /* 히어로(v3 §7-1): 왼쪽 글(제목 48·검색 알약·보라 CTA·이동 칩) + 오른쪽 사진 1장(r20). 흰 바탕 */
    #main .sec-1{margin:0 var(--pc-x);}
    #main .search-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);grid-template-areas:"title photo" "input photo" "cities photo" "cta photo";grid-template-rows:auto auto auto auto;align-content:center;column-gap:var(--sp-12);padding:var(--sp-8) 0 var(--sp-6);}
    #main .search-box .title{grid-area:title;align-self:end;}
    #main .search-box .title .tit{font-size:var(--fs-hero);line-height:var(--lh-title);}   /* PC 홈 히어로 48 */
    #main .search-box .title .txt{margin-top:var(--sp-3);font-size:var(--fs-body);line-height:var(--lh-body);}
    #main .search-box .input{grid-area:input;max-width:560px;margin-top:var(--sp-6);}
    #main .search-box .btn-airec{position:static;grid-area:cta;width:auto;max-width:560px;margin-top:var(--sp-3);padding:0 var(--sp-6);transform:none;border-radius:var(--radius-btn);box-shadow:none;}   /* PC는 히어로 안(모바일만 떠 있음) */
    html.has-cmp #main .search-box .btn-airec{bottom:auto;}
    body:has(#main .btn-airec) #site-foot{padding-bottom:var(--sp-12);}
    #main .search-box .city-tile{width:84px;height:64px;}   /* PC: 6칸이 왼쪽 칸(560) 한 줄 */
    #main .search-box .city-row{grid-area:cities;flex-wrap:nowrap;max-width:560px;margin-left:0;margin-right:0;padding-left:0;padding-right:0;overflow:visible;}
    #main .search-box .hero-bg{left:calc(50% - 50vw);right:calc(50% - 50vw);top:0;bottom:0;width:auto;}   /* PC: 가로형 1600×900을 화면 끝까지 cover */
    #main .search-box .hero-bg img{position:static;width:100%;height:100%;object-fit:cover;object-position:right 40%;}
    /* (옛 .hero-photo 자리) 2026-10-10: 오른쪽 사진 카드 대신 히어로 전체 뒤 풍경(모바일과 같은 사진) */
    #main .search-box .hero-mascot{display:block;position:absolute;z-index:-1;left:calc(100% - 480px + var(--sp-8));bottom:var(--sp-4);width:300px;pointer-events:none;}   /* 수달(2026-10-11): 오른쪽 칸(480) 왼쪽, 수영장 데크 위에 서서 돋보기로 검색창 쪽을 본다. 사진(::before)과 같은 −1 층, 문서 순서상 사진 위 */
    #main .search-box .hero-mascot img{display:block;width:100%;height:auto;}
    #main .search-box{background:var(--surface-card);}   /* 모바일의 왼쪽 위 보라 톤은 PC에선 빼고 사진 그라데이션만 */
    body{overflow-x:clip;}   /* 히어로 사진을 화면 양끝까지(아래) 펼칠 때 스크롤바 폭만큼 가로 스크롤이 생기지 않게 — clip은 스크롤 상자를 만들지 않아 sticky 유지 */
    #main .search-box::before{left:calc(50% - 50vw);right:calc(50% - 50vw);   /* 본문 폭(1120)에서 끊기지 않고 화면 끝까지 — '잘린 사각형' 느낌 제거 */
      background:linear-gradient(to right, var(--surface-card) 0%, var(--surface-card) 28%, transparent 60%),
                 linear-gradient(to bottom, transparent 0%, transparent 80%, var(--surface-card) 100%),
                 transparent;}   /* PC 사진은 .hero-bg <img>(picture source) — 2026-10-20 */
    #main .map-wrap #map{height:440px;}
    #main .hotel-list,#main .sec-collections,#main .sec-map > *{padding-left:var(--pc-x);padding-right:var(--pc-x);}
    #main .sec-intro .intro-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);padding:0 var(--pc-x);overflow:visible;}   /* PC: 두 장 나란히(한 장만 남으면 왼쪽 칸) */
    #main .sec-intro .intro-card{min-height:136px;}
    #main .hub-home-row .hh-label{font-size:var(--fs-h3);}
    /* 홈 캐러셀(§7-1): 행마다 5장 한 줄 가로 스크롤 + 제목 오른쪽 원형 이전·다음 32, 사진 20:19, 카드 간격 24 */
    #main .hotel-slider{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
    #main .hotel-slider::-webkit-scrollbar{display:none;}
    #main .hotel-slider .swiper-wrapper{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--sp-6) * 4) / 5);gap:0 var(--sp-6);}
    #main .hcard--carousel .hcard-photo{aspect-ratio:20/19;}
    #main .slider-nav{display:inline-flex;gap:var(--sp-2);}
    #main .slider-nav button{position:relative;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface-card);cursor:pointer;}
    #main .slider-nav button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -2px;border-top:2px solid var(--ink);border-left:2px solid var(--ink);transform:rotate(-45deg);}
    #main .slider-nav .sn-next::before{margin-left:-6px;transform:rotate(135deg);}
    #main .slider-nav button:hover:not(:disabled){background:var(--surface);}
    #main .slider-nav button:disabled{opacity:.35;cursor:default;}
    /* ════════ 비교: 왼쪽 항목명 칸 200 + 호텔 칸 (Zillow Compare homes) — v3 §7-4 ════════ */
    #cmp{max-width:var(--pc-max);margin:0 auto;padding:0 var(--pc-x);background:var(--surface-card);min-height:100vh;}
    #cmp > .page-title{margin-left:0;margin-right:0;}
    .cmp-top,.cmp-hd{grid-template-columns:200px repeat(var(--n,3),minmax(0,1fr));padding-left:0;padding-right:0;}
    .cmp-h-sp{display:block;}
    #detail .glance .gl-rg{grid-template-columns:repeat(4,minmax(0,1fr));}   /* PC: 치명적 리뷰 4칸 한 줄 */
    #detail .glance .gl-rg li:nth-child(odd){border-right:0;}
    #detail .glance .gl-rg li:not(:last-child){border-right:1px solid var(--line);}
    .cmp-img{max-width:240px;}   /* PC 칸이 넓어 사진은 240까지 */
    .cmp-addbar{margin-left:0;margin-right:0;}
    .cmp-viz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-12);align-items:start;}   /* 왼쪽 방사형 · 오른쪽 건수 표 + 가격 */
    .cv-svg{max-width:420px;}
    .cmp-nm{font-size:var(--fs-body);}
    .cmp-sum,.cmp-gt,.cmp-gs{padding-left:0;padding-right:0;}
    .cmp-note{padding-left:0;padding-right:0;}
    .cmp-tr{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start;padding:var(--sp-4) 0;}
    .cmp-k{margin:0;padding:var(--sp-2) var(--sp-4) 0 0;font-size:var(--fs-body);}   /* PC는 왼쪽 200 칸이라 16/700 */
    .cmp-v{margin:0;}
    .cmp-cell{font-size:var(--fs-body);}
    .cmp-line{font-size:var(--fs-meta);}
    #cmp .page-empty{max-width:none;margin:0;padding:0 0 var(--sp-12);}

    /* ── 맞춤 추천 페이지: 가운데 720 칼럼 · 아래 막대는 칼럼 안 떠 있는 카드 ── */
    #recp{padding:var(--sp-12) var(--pc-x) var(--sp-12);}
    #recp .rw-head,#recp .rw-steps,#recp .rw-how{max-width:720px;margin-left:auto;margin-right:auto;}
    #recp .rw-steps{margin-top:var(--sp-8);}
    #recp .rw-step.is-open{padding:var(--sp-8);}
    #recp .rw-row{padding:var(--sp-4) var(--sp-8);}
    #recp .rw-opt{cursor:pointer;}
    #recp .rw-opt:not(.is-off):hover .rw-opt-t{text-decoration:underline;text-underline-offset:3px;}
    #recp .rw-bar{position:sticky;left:auto;bottom:var(--sp-6);transform:none;width:auto;max-width:720px;margin:var(--sp-6) auto 0;padding:var(--sp-4) var(--sp-6);border:0;border-radius:var(--radius-card);box-shadow:var(--shadow-pop);}
    body[data-page="recommend"] #site-foot{padding-bottom:var(--sp-12);}
    body[data-page="recommend"] .cf-toast{bottom:120px;}



    /* ════════ §v3 오버레이 PC 변환(DESIGN-SYSTEM-V3 §5-6): 시트·바텀 시트·다이얼로그 모두 가운데 모달(네 모서리 32) ════════
       폭 400(확인)·568(기본)·780(긴 목록)·1032(리뷰 근거 2단) · 위 40 · 최대 높이 100vh−80 · 헤더 64(--h-sheet-head) · 푸터 80 · 딤 40% */
    .ov{justify-content:center;padding:40px var(--pc-x);}
    .ov-panel{width:var(--ov-w-md);max-width:100%;max-height:calc(100vh - 80px);border-radius:var(--radius-sheet);box-shadow:var(--shadow-sheet);opacity:0;transform:scale(.98);transition:opacity .2s, transform .2s;}
    .ov.ov-on > .ov-panel{opacity:1;transform:none;}
    .ov.ov-on.ov-under > .ov-panel{transform:scale(.96);transform-origin:50% 50%;}
    .ov[data-ov=sheet] > .ov-panel{height:min(calc(100vh - 80px), 800px);}
    .ov-panel.ov-w-sm{width:var(--ov-w-sm);}
    .ov-panel.ov-w-lg{width:var(--ov-w-lg);}
    .ov-panel.ov-w-xl{width:var(--ov-w-xl);}
    .ov-foot{padding:var(--sp-4) var(--sp-6);}
    .ov-close:hover,.ov-back:hover{background:var(--surface);}
    .ov-head--large .ov-mini{left:var(--h-sheet-head);right:var(--h-sheet-head);}
    /* 리뷰 근거 2단(1032): 왼쪽 300(호텔명 + 항목 행 56·1px, 흰 면) · 간격 64 · 오른쪽(머리 22 + 칩 + 목록). 실망·FAQ 모드는 780 1단 */
    .rs.is-cat .rs-tm{display:none;}
    .rs.is-cat .rs-tp{display:inline;}
    .rs:not(.is-cat) > .ov-panel{width:var(--ov-w-lg);}
    .rs-wrap{gap:64px;padding:0 var(--sp-8);}
    .rs.is-cat .rs-side{display:flex;flex-direction:column;flex:none;width:300px;min-height:0;overflow-y:auto;padding:var(--sp-6) 0;}
    .rs-body{flex:1;min-width:0;padding:var(--sp-6) 0 var(--sp-8);}
    .rs-tabs{display:none;}
    .rs.is-cat .rs-h{display:block;margin:0 0 var(--sp-4);font-size:var(--fs-h2);line-height:var(--lh-title);font-weight:var(--fw-bold);letter-spacing:var(--ls-title);color:var(--ink);}
    .rs-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0;}
    .rs-chip:not(.on):hover{background:var(--line);}
    .ss-hotel{margin:0;font-size:var(--fs-body);line-height:var(--lh-ui);font-weight:var(--fw-semi);color:var(--ink);}
    .ss-sub{margin:var(--sp-1) 0 var(--sp-4);font-size:var(--fs-meta);line-height:var(--lh-ui);color:var(--ink-3);}
    .ss-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
    .ss-cat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot name cnt" ". score cnt";column-gap:var(--sp-2);align-items:center;min-height:56px;padding:var(--sp-2) var(--sp-3);border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;}
    .ss-cat:hover{background:var(--surface-2);}
    .ss-cat.is-on{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--ink);}
    .ss-cat[disabled]{cursor:default;}
    .ss-cat[disabled] .ss-name,.ss-cat[disabled] .ss-score{color:var(--ink-3);}
    .ss-dot{grid-area:dot;width:8px;height:8px;border-radius:50%;background:var(--safe);}
    .ss-dot.is-warning{background:var(--warning);}
    .ss-dot.is-danger{background:var(--danger);}
    .ss-name{grid-area:name;font-size:var(--fs-body);line-height:var(--lh-ui);font-weight:var(--fw-semi);color:var(--ink);}
    .ss-score{grid-area:score;font-size:var(--fs-meta);line-height:var(--lh-ui);color:var(--ink);}
    .ss-cnt{grid-area:cnt;font-size:var(--fs-meta);line-height:var(--lh-ui);color:var(--ink-3);}
    .ss-note{margin:auto 0 0;padding-top:var(--sp-5);font-size:var(--fs-meta);line-height:var(--lh-ui);color:var(--ink-3);}
    /* 토스트: 왼쪽 아래 32 */
    .cf-toast{left:var(--sp-8);right:auto;bottom:var(--sp-8);margin:0;}
    .cf-toast.has-act{width:auto;min-width:322px;min-height:64px;}

    /* ════════ 컬렉션 허브·소개·최근 본 ════════ */
    #hub{max-width:var(--pc-max);margin:0 auto;padding:var(--sp-8) var(--pc-x) var(--sp-12);}
    #hlist{max-width:var(--pc-max);margin:0 auto;padding:var(--sp-8) var(--pc-x) var(--sp-12);}   /* 전체 호텔 목록: 허브와 같은 틀, 리드만 읽는 폭 */
    #hlist .page-title{margin-top:0;}
    #hlist .hl-lead{max-width:736px;}
    #about,#privacy{max-width:var(--pc-max);margin:0 auto;padding:var(--sp-8) var(--pc-x) var(--sp-12);}
    #about > *,#privacy > *{max-width:736px;}   /* 읽는 폭은 그대로, 왼쪽 끝만 틀에 맞춤 */
    .page-empty{max-width:var(--pc-max);margin:0 auto;padding:var(--sp-5) var(--pc-x) var(--sp-12);}
    .page-empty > *{max-width:736px;}
    .page-empty .page-title,.page-empty .pe-txt,.page-empty .pe-btns{margin-left:0;margin-right:0;}
    /* 최근 본(v3 §7-5): 4열 그리드, 간격 24 */
    #recent{max-width:var(--pc-max);margin:0 auto;padding:0 var(--pc-x) var(--sp-12);}
    #recent .page-title{margin-left:0;margin-right:0;}
    #recent .page-empty{max-width:none;margin:0;padding:0 0 var(--sp-12);}
    .rc-head{padding-right:0;}
    .rc-gt{margin-left:0;}
    .rc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-8) var(--sp-6);padding:0;}

    /* 홈 재구성(HOME-CONCEPT §2.3): 히어로 칩 행 · 비교 카드 4열 */
    #main .sec-vs .home-vs{padding-left:var(--pc-x);padding-right:var(--pc-x);}
    #main .home-vs .vs-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);overflow:visible;align-items:stretch;}   /* 모바일 flex의 align-items:flex-start를 풀어 4장 높이 통일 */
    #main .vs-card{flex:auto;}

    /* 한 줄 호텔 행 .hrow(SEO-CRAWL §3-1): 이름 왼쪽 · 메타 오른쪽 한 줄 — 메타가 안 들어가면 줄을 바꿔 2줄 유지 */
    .hrow{flex-direction:row;flex-wrap:wrap;align-items:baseline;align-content:center;justify-content:space-between;column-gap:var(--sp-6);}
    .hrow-meta{white-space:nowrap;}
}