/* 오른쪽 패널: 전국 개요(도시 × 체인 표) · 도시(체인별 분포·호텔 목록) · 호텔 상세 탭 */
.panel{min-height:0;overflow-y:auto;border-left:1px solid var(--rule);background:var(--card);overscroll-behavior:contain}
.loading,.empty{padding:40px 28px;color:var(--muted)}
.p-head{padding:22px 24px 18px;border-bottom:1px solid var(--rule)}
.crumb{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:0;border:0;background:none;font-size:13px;font-weight:700;color:var(--muted)}
.crumb:hover{color:var(--ink);text-decoration:underline}
.p-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.p-title h1,.p-title h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.p-title .en{display:block;margin-top:4px;font-family:var(--num);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.total{text-align:right;white-space:nowrap}
.total .inventory-label{display:block;margin-bottom:6px;font-size:12px}
.total .num{display:block;font-size:44px;font-weight:700;line-height:.9}
.total span{font-size:13px;color:var(--muted);font-weight:700}
.lede{margin:12px 0 0;font-size:14px;color:var(--muted)}
.tier-note{margin-top:6px}
.country-data-info{margin-top:8px;font-size:13px}
.country-data-info>summary{width:fit-content;min-height:24px;padding:4px 0;color:var(--ink);font-weight:700;cursor:pointer}
.country-data-info>summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.country-data-info .coverage-note{margin-top:6px}
.text-link{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.sec{padding:18px 24px 22px;border-bottom:1px solid var(--rule)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.02em}
.sec-h span{font-weight:500;color:var(--muted)}

/* 도시 × 체인 표 */
.matrix{width:100%;border-collapse:collapse;font-size:14px}
.matrix th{height:34px;padding:0 2px;border-bottom:1.5px solid var(--ink);vertical-align:bottom;font-weight:700;font-size:12px;color:var(--muted);text-align:center}
.matrix th:first-child{text-align:left}
.matrix th>img{display:block;margin:0 auto 7px;height:10px;width:auto;max-width:44px}
.matrix th>img.logo-accor{height:15px}
.matrix th i{display:block;width:100%;height:3px;background:var(--c);margin-bottom:-1.5px}
.matrix td{height:38px;padding:0 2px;border-bottom:1px solid var(--rule-2);text-align:center}
.matrix td:first-child{text-align:left;font-weight:700}
.matrix .num{font-size:17px;font-weight:700}
.matrix .zero{color:var(--rule);font-weight:500}
.matrix .tot{font-size:20px}
.matrix tbody tr{cursor:pointer}
.matrix tbody tr:hover td,.matrix tbody tr.hot td{background:var(--signal-soft)}
.matrix tbody tr:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.matrix col.c-city{width:auto}
.matrix col.c-tot{width:52px}
.matrix col.c-ch{width:54px}
.matrix .off{opacity:.25}

/* 도시 안 체인 분포 */
.mix{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mix button{display:grid;grid-template-columns:78px minmax(0,1fr) 36px;align-items:center;gap:12px;width:100%;height:40px;padding:0 10px;border:1.5px solid transparent;border-radius:4px;background:none;text-align:left}
.mix button:hover{background:var(--paper-2)}
.mix button[aria-pressed="true"]{border-color:var(--ink);background:var(--signal-soft)}
.mix button>img{height:15px;width:auto;max-width:74px;display:block}
.mix button>img.logo-accor{height:22px}
.mix .track{height:8px;border-radius:4px;background:var(--rule-2);overflow:hidden}
.mix .track i{display:block;height:100%;border-radius:4px;background:var(--c)}
.mix .num{text-align:right;font-size:20px;font-weight:700}
.mix .off{opacity:.35}

/* 호텔 목록 */
.group{padding:4px 0 8px}
.group-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;margin:0;padding:12px 24px 10px;background:var(--card);border-bottom:1px solid var(--rule-2)}
.group-h::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--c)}
.group-h>img{height:15px;width:auto;max-width:90px}
.group-h>img.logo-accor{height:22px}
.group-h .num{margin-left:auto;font-size:17px;font-weight:700}
.group-h .num small{font-family:var(--ko);font-size:12px;margin-left:1px}
.hotels{list-style:none;margin:0;padding:0}
.hotel{border-bottom:1px solid var(--rule-2)}
.hotel>button{display:block;width:100%;padding:13px 24px 13px 38px;border:0;background:none;text-align:left;position:relative}
.hotel>button::before{content:"";position:absolute;left:24px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--c)}
.hotel>button:hover,.hotel.hot>button{background:var(--paper-2)}
.hotel.on>button{background:var(--signal-soft)}
.hotel .name{display:block;font-weight:700;font-size:15px;line-height:1.35}
.hotel .where{display:block;margin-top:3px;font-size:14px;color:var(--ink-2)}
.hotel .city-tag{display:inline-block;margin-right:6px;font-weight:700;color:var(--muted)}
/* 이름 줄: 이름은 남는 폭, 표시는 오른쪽 끝(이름이 길면 이름만 줄바꿈) */
.h-top{display:flex;align-items:flex-start;gap:8px}
.h-top .name{flex:1;min-width:0}
.h-badges{display:flex;flex:none;gap:4px;margin-top:1px}
.h-badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:10px;background:var(--ink);color:var(--card);font-size:12px;font-weight:700}
.h-badge.soft{background:var(--paper-2);color:var(--ink-2)}
.show-more{display:block;width:calc(100% - 48px);margin:10px 24px 6px;height:40px;border:1.5px solid var(--rule);border-radius:20px;background:none;font-size:14px;font-weight:700}
.show-more:hover{border-color:var(--ink)}
.fine{padding:18px 24px 28px;font-size:12px;color:var(--muted);line-height:1.6}
.fine p{margin:0 0 4px}

/* 마이리얼트립 제휴 상자(web/js/trip-prep.js): 도시 화면 호텔 목록 앞(가로 한 줄, .is-strip), 동남아 호텔살기 결과 아래·날씨 상세 창(펼친 상자, .is-flat).
   상품마다 왼쪽 작은 사진(우리 사이트의 240×180 썸네일) + 이름 두 줄 + 시작가·평점. */
.trip-prep{margin:18px 24px 0;border:1.5px solid var(--rule);border-radius:10px;background:var(--card)}
.trip-prep summary,.trip-prep-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:12px 14px}
.trip-prep summary{cursor:pointer;list-style:none}
.trip-prep summary::-webkit-details-marker{display:none}
.trip-prep summary::after{content:'+';margin-left:auto;font-weight:700;color:var(--muted)}
.trip-prep[open] summary::after{content:'−'}
.trip-prep-title{font-size:14px;font-weight:700}
.trip-prep-sub{font-size:12px;color:var(--muted)}
.trip-prep section{padding:0 14px 6px}
.trip-prep h4{margin:4px 0 2px;font-size:12px;color:var(--muted)}
.trip-prep ul{margin:0;padding:0;list-style:none}
.trip-prep li+li{border-top:1px solid var(--rule-2)}
.trip-prep a{display:flex;align-items:center;gap:12px;padding:8px 0;color:inherit;text-decoration:none}
.trip-prep a:hover .trip-prep-name{text-decoration:underline}
.trip-prep-img{flex:none;width:72px;height:54px;border-radius:6px;object-fit:cover;background:var(--paper-2)}
.trip-prep-text{flex:1;min-width:0}
.trip-prep-name{display:-webkit-box;overflow:hidden;font-size:13px;font-weight:700;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.trip-prep-meta{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.trip-prep-note{margin:0;padding:8px 14px 12px;border-top:1px solid var(--rule-2);font-size:11px;line-height:1.5;color:var(--muted)}
/* 넓은 화면의 펼친 상자(호텔살기)는 칸을 나란히 */
@media (min-width:901px){.ss-page .trip-prep.is-flat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.ss-page .trip-prep.is-flat>.trip-prep-head,.ss-page .trip-prep.is-flat>.trip-prep-note{grid-column:1/-1}}
.ss-page .trip-prep{margin:20px 0 0}
.weather-details .trip-prep{margin:18px 0 0}
.weather-details .trip-prep ul{padding:0}
.weather-details .trip-prep li{margin:0}
/* 도시 화면: 체인 구성 아래 가로로 넘기는 한 줄(.is-strip). 카드 = 위 사진 + 탭 이름 + 이름 두 줄 + 시작가. */
.trip-prep.is-strip{margin:4px 24px 14px}
.trip-prep.is-strip .trip-prep-head{padding:10px 14px 6px}
.trip-prep-row{display:flex;gap:10px;padding:2px 14px 10px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.trip-prep.is-strip li{flex:none;width:148px;border:0!important;scroll-snap-align:start}
.trip-prep.is-strip a{display:block;padding:0}
.trip-prep.is-strip .trip-prep-img{display:block;width:148px;height:111px;margin-bottom:6px}
.trip-prep-tag{display:inline-block;margin-bottom:3px;padding:1px 6px;border-radius:4px;background:var(--paper-2);font-size:11px;font-weight:700;color:var(--muted)}
.trip-prep.is-strip .trip-prep-name{font-size:12.5px}
.trip-prep.is-strip .trip-prep-note{padding:6px 14px 10px}
/* 연간 비교표 펼친 줄의 왼쪽 칸: 카드 4장을 넘기지 않고 칸 너비에 맞춰 나눈다. 좁으면 2장씩 두 줄. */
.weather-inline-main{min-width:0}
.weather-inline-main .trip-prep.is-strip{margin:22px 0 0}
.weather-inline-main .trip-prep-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
.weather-inline-main .trip-prep.is-strip li{width:auto;min-width:0}
.weather-inline-main .trip-prep.is-strip .trip-prep-img{width:100%;height:auto;aspect-ratio:4/3}
@media(max-width:1180px){.weather-inline-main .trip-prep-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 호텔 상세 */
.more{padding:0 24px 16px 38px;margin-top:-4px;background:var(--signal-soft)}
.more dl{display:grid;grid-template-columns:62px 1fr;gap:5px 10px;margin:0 0 12px;font-size:13px}
.more dt{color:var(--muted);font-weight:700}
.more dd{margin:0;overflow-wrap:anywhere}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{display:inline-flex;align-items:center;height:34px;padding:0 13px;border:1.5px solid var(--ink);border-radius:17px;background:var(--card);font-size:13px;font-weight:700;text-decoration:none}
.links a:hover{background:var(--ink);color:var(--card)}
.htabs{display:flex;gap:4px;margin:0 0 12px;padding-top:4px;border-bottom:1.5px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.htabs button{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border:0;border-radius:4px 4px 0 0;background:none;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}
.htabs button[aria-selected="true"]{background:var(--ink);color:var(--card)}
.htabs .num{font-size:12px;opacity:.8}
.tab-lede{margin:0 0 8px;font-size:13px;font-weight:700}
.tab-empty{margin:4px 0 8px;font-size:14px;color:var(--muted)}
.tab-fine{margin:10px 0 0;font-size:12px;color:var(--muted)}

@media (max-width:1180px){.matrix col.c-ch{width:46px}}
@media (max-width:900px){
  .panel{overflow:visible;border-left:0}
  .p-head,.sec{padding-left:16px;padding-right:16px}
  .group-h{top:56px;padding-left:16px;padding-right:16px}
  .hotel>button{padding-left:30px;padding-right:16px}
  .hotel>button::before{left:16px}
  .more{padding-left:30px;padding-right:16px}
  .show-more{width:calc(100% - 32px);margin-left:16px;margin-right:16px}
  .fine{padding-left:16px;padding-right:16px}
  .trip-prep{margin-left:16px;margin-right:16px}
  /* 폰: 가로 한 줄은 테두리 상자를 풀고 화면 폭을 다 쓴다. 왼쪽 시작은 호텔 목록 점(16px)에 맞추고, 카드는 오른쪽 끝까지 넘어간다. */
  .trip-prep.is-strip{margin:4px 0 12px;border-left:0;border-right:0;border-radius:0}
  .trip-prep.is-strip .trip-prep-head,.trip-prep.is-strip .trip-prep-note{padding-left:16px;padding-right:16px}
  .trip-prep.is-strip .trip-prep-row{padding-left:16px!important;padding-right:16px!important;scroll-padding-left:16px}
}
@media (max-width:420px){
  .p-title h1,.p-title h2{font-size:24px}
  .total .num{font-size:38px}
  .matrix col.c-ch{width:38px}
  .matrix col.c-tot{width:42px}
  .matrix th>img{max-width:34px}
  .matrix td{height:40px}
  .mix button{grid-template-columns:70px minmax(0,1fr) 30px;gap:10px}
}
/* 실제 제한·예외는 주의 표시. 단순 자료 미확인은 중립 안내만 표시한다. */
.h-badge.warn{background:var(--warn-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--warn)}
/* 목록 칩(2026-11-01): 레드핫은 빨간 칩, 오퍼는 테두리 칩 */
.h-badge.is-hot{background:var(--bad);color:var(--card)}
.h-badge.is-line{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* 「정보」 탭(2026-11-01): 호텔 한 줄 → 특가 → 주소·링크 → 티어 칩. 묶음은 가는 줄과 간격으로만 나눈다. */
.hi-blk{padding:12px 0;border-top:1px solid var(--rule)}
.hi-blk:first-of-type{padding-top:2px;border-top:0}
.program-info+.hi-blk,.caution+.hi-blk{border-top:0;padding-top:2px}
.hi-id{margin:0;font-size:13px;color:var(--ink-2)}
.hi-id b{color:var(--ink)}
.hi-en{margin:2px 0 0;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.hi-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px;font-size:12px;font-weight:700;color:var(--muted)}
.more .hi-kv{grid-template-columns:62px minmax(0,1fr);gap:8px 10px;margin:0;font-size:14px;line-height:1.45}
.more .hi-kv dt{padding-top:2px;font-size:13px}
.more .hi-tier-rows{grid-template-columns:84px minmax(0,1fr);margin-top:12px}
.hi-kv dd small{display:block;margin-top:1px;font-size:12px;color:var(--muted)}
.hi-big{font-family:var(--num);font-size:22px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.hi-off{margin-left:6px;font-family:var(--num);font-size:16px;font-weight:700;color:var(--bad)}
.hi-sub{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--muted)}
.hi-new{color:var(--bad)}
.hi-na,.more .hi-kv .tl-na{color:var(--faint)}
.hi-go{display:inline-block;margin-top:2px;padding:0;border:0;border-bottom:1.5px solid var(--rule);background:none;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.hi-go:hover{border-color:var(--ink)}
.hi-h .hi-go{margin:0;font-size:12px}
.hi-addr{margin:0 0 10px;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.hi-blk .links{margin-top:2px}
.hi-chips{display:flex;flex-wrap:wrap;gap:4px}
.hi-chips button{height:28px;padding:0 10px;border:1px solid var(--rule);border-radius:14px;background:var(--card);font-size:12px;font-weight:700;color:var(--ink-2)}
.hi-chips button:hover{border-color:var(--ink)}
.hi-chips button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--card)}
.hi-hint{margin:8px 0 0;font-size:12px;color:var(--muted)}
.caution{margin:0 0 10px;padding:8px 10px;border-radius:6px;border-left:3px solid var(--warn);background:var(--warn-soft);color:var(--ink);font-size:13px;line-height:1.5}
.program-info{margin:0 0 10px;padding:8px 10px;border-radius:6px;background:var(--paper-2);color:var(--ink-2);font-size:13px;line-height:1.5}

/* 어두운 화면: 0을 뜻하는 「–」는 바탕 선 색이면 거의 안 보여 한 단계 밝게, 탭 개수는 흐리게 하지 않는다 */
@media (prefers-color-scheme:dark){.matrix .zero,.cc-table .zero{color:color-mix(in oklch,var(--faint) 55%,var(--rule))}.htabs .num{opacity:1}}