/* 오른쪽 패널: 전국 개요(도시 × 체인 표) · 도시(체인별 분포·호텔 목록) · 호텔 상세 탭 */
.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 .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}
.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}

/* 호텔 상세 */
.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}
}
@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)}
.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}