/* 메뉴 화면(위쪽 메뉴로 여는 화면) 공통 · 프로모션 · 티어 가이드 · 호텔 티어 탭 */
.page{grid-row:3;min-height:0;overflow-y:auto;background:var(--paper)}
.page[hidden],.stage[hidden]{display:none}
.page-in{max-width:1040px;margin:0 auto;padding:28px 24px 64px}
.page-h h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em}
.page-h p{margin:8px 0 0;color:var(--ink-2);max-width:720px}
.page-h .sample-note{display:inline-block;margin-top:12px;padding:6px 12px;border-radius:4px;background:var(--signal-soft);font-size:13px;font-weight:700;color:var(--ink)}
.page-sec{margin-top:30px}
.page-sec>h2{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font-size:17px;font-weight:700}
.page-sec>h2 .num{font-size:17px;color:var(--muted)}
.page-sec>h2 .en{font-family:var(--num);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.page-empty{margin-top:28px;color:var(--muted)}
.page-fine{margin:28px 0 0;font-size:12px;color:var(--muted)}
.linkish{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint);cursor:pointer;text-align:left}
.linkish:hover{text-decoration-color:var(--ink)}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--rule);border-radius:11px;background:var(--card);font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.pill-active{border-color:transparent;background:var(--ink);color:var(--card)}
.pill-upcoming{border-color:var(--ink)}
.pill-ended{color:var(--faint)}
.pill-sample{border-color:transparent;background:var(--signal);color:var(--ink)}
.src{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.src a{color:inherit;font-weight:700}

/* 프로모션 카드 */
.offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.offer{padding:14px 16px 12px;border:1.5px solid var(--ink);border-radius:6px;background:var(--card)}
.offer.is-sample{border-style:dashed}
.offer-h{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 8px}
.offer-h .bi{width:22px;height:22px}
.offer-prog{margin:0;font-size:13px;font-weight:700;color:var(--ink-2)}
.offer-pills{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.offer h3{margin:10px 0 4px;font-size:16px;font-weight:700;line-height:1.35}
.offer-sum{margin:0;font-size:14px;color:var(--ink-2)}
.offer-dl{display:grid;grid-template-columns:34px 1fr;gap:4px 8px;margin:10px 0 0;font-size:13px}
.offer-dl dt{color:var(--muted);font-weight:700}
.offer-dl dd{margin:0}
.offers.is-compact{grid-template-columns:1fr;gap:8px}
.offers.is-compact .offer{padding:10px 12px;border-width:1px}
.offers.is-compact .offer h3{font-size:15px;margin-top:6px}

/* 티어 가이드(tiers.js): 체인 고르기 · 호텔 목록. 가이드 본문 모양은 guide.css */
.prog-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.prog-tabs button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 8px;border:1.5px solid var(--rule);border-radius:21px;background:var(--card);font-weight:700;font-size:14px}
.prog-tabs button:hover{border-color:var(--ink-2)}
.prog-tabs button[aria-pressed="true"]{border-color:var(--ink);background:var(--signal-soft);box-shadow:inset 0 0 0 1px var(--ink)}
.prog-tabs .bi{width:26px;height:26px}
.tier-city{margin-bottom:14px}
.tier-city h3{margin:0 0 6px;font-size:14px;font-weight:700}
.tier-city ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:14px}
.tier-city li{display:inline-flex;align-items:center;gap:6px}

/* 등급 비교(compare.js): 대표 등급 카드 · 비교표. 머리(.tg-page-h)는 티어 가이드 목록도 쓴다 */
.tg-page-h{padding-bottom:20px;border-bottom:2px solid var(--ink)}
.tg-page-h .tg-eyebrow,.tg-eyebrow{display:block;margin-bottom:6px;font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.tg-page-h p{max-width:780px}
.tg-page-h .tg-source-note{margin-top:12px;font-size:12px;font-weight:700;color:var(--muted)}
.tg-quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.tg-quick{display:flex;flex-direction:column;min-width:0;min-height:220px;padding:16px;border:1px solid var(--rule);border-top:3px solid var(--ch);border-radius:2px;background:var(--card);color:var(--ink)}
.tg-quick:focus-within{border-color:var(--ink)}
.tg-quick-go:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.tg-quick-head{display:flex;align-items:center;gap:10px;min-width:0}
.tg-quick-head .bi{width:30px;height:30px;flex:none}
.tg-quick-head h3{margin:0;font-size:16px;font-weight:700;line-height:1.3}
.tg-quick-head small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.tg-quick dl{display:grid;gap:0;margin:14px 0 12px}
.tg-fact{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;padding:7px 0;border-top:1px solid var(--rule-2)}
.tg-fact dt{font-size:12px;font-weight:700;color:var(--muted)}
.tg-fact dd{min-width:0;margin:0;font-size:13px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.tg-fact dd small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--muted)}
.tg-quick-go{align-self:flex-start;margin-top:auto;padding:8px 0 0;border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tg-hint{display:none;margin:0 0 6px;font-size:12px;color:var(--muted)}
.tg-wrap{overflow-x:auto;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);-webkit-overflow-scrolling:touch}
.tg-mx{width:100%;min-width:calc(112px + var(--cols) * 150px);border-collapse:collapse;table-layout:fixed;font-size:13px;line-height:1.5}
.tg-mx th,.tg-mx td{padding:9px 10px;border-bottom:1px solid var(--rule-2);border-right:1px solid var(--rule-2);text-align:left;vertical-align:top}
.tg-mx th:last-child,.tg-mx td:last-child{border-right:0}
.tg-mx tbody tr:last-child th,.tg-mx tbody tr:last-child td{border-bottom:0}
.tg-mx thead th{width:auto;vertical-align:bottom;background:var(--paper-2);border-bottom:3px solid var(--ch,var(--rule))}
.tg-mx thead th:first-child{width:112px}
.tg-mx thead th b{display:block;margin-top:4px;font-size:15px;font-weight:700}
.tg-mx thead th small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.tg-prog{display:flex;align-items:center;gap:6px;font-family:var(--num);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.tg-prog .bi{width:20px;height:20px;flex:none}
.tg-mx tbody th{position:sticky;left:0;z-index:1;background:var(--paper-2);font-size:13px;font-weight:700;color:var(--ink-2)}
.tg-mx td small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.tg-mx td.best{background:color-mix(in oklch,var(--ch) 11%,var(--card));font-weight:700}
.tg-star{margin-right:3px;color:var(--ch,var(--ink))}
.tg-mx tr.tg-grp td{padding:6px 10px;background:var(--paper-2);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.tg-mx tr.tg-grp td span{position:sticky;left:10px}
.tg-dash{color:var(--faint)}
.tg-b{display:block}
.tg-b small{display:block;margin-top:1px}
.tg-b+.tg-b{margin-top:6px}
.tg-inh{display:block;font-size:12px;color:var(--muted)}

/* 호텔 티어 탭: 호텔·브랜드 참고 */
.tg-tips{margin:0;padding:0 0 0 18px;font-size:14px}
.tg-tips li{padding:3px 0}
.tg-tips li b{margin-right:4px}

/* 티어 가이드 목록 · 체인 가이드 쪽 */
.gd-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.gd-item{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 16px 14px;border:1px solid var(--rule);border-top:3px solid var(--ch);border-radius:2px;background:var(--card);text-align:left}
.gd-item:hover{border-color:var(--ink);border-top-color:var(--ch)}
.gd-item-h{display:flex;align-items:center;gap:10px}
.gd-item-h .bi{width:30px;height:30px;flex:none}
.gd-item-h b{display:block;font-size:14px;font-weight:700}
.gd-item-h small{display:block;font-size:12px;color:var(--muted)}
.gd-item strong{font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.gd-item-lede{font-size:13px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gd-item-f{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:auto;padding-top:8px;border-top:1px solid var(--rule-2);font-size:12px;color:var(--muted)}
.gd-item-go{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.gd-more{margin:16px 0 0;font-size:14px;color:var(--ink-2)}
.gd-page{max-width:820px;margin:0 auto}
.gd-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.gd-nav .prog-tabs{margin:0}
.gd-back{padding:0;border:0;background:none;font-size:14px;font-weight:700;color:var(--ink-2)}
.gd-back:hover{color:var(--ink)}
.gd-loading{margin:32px 0;color:var(--muted)}
.gd-hotels{margin-top:56px;padding-top:20px;border-top:2px solid var(--ink)}

/* 호텔 티어 탭: 등급 선택 · 혜택 목록 */
.tg-tier{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;background:var(--ink);color:var(--card);font-size:12px;font-weight:700}
.tg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.tg-chips button{height:30px;padding:0 12px;border:1.5px solid var(--rule);border-radius:15px;background:var(--card);font-size:13px;font-weight:700}
.tg-chips button:hover{border-color:var(--ink-2)}
.tg-chips button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--card)}
.tg-q{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.tg-h4{margin:12px 0 4px;font-size:13px;font-weight:700}
.tier-list{margin:0;padding:0;list-style:none;border:1px solid var(--ink);border-radius:5px;background:var(--card)}
.tier-list li{display:grid;grid-template-columns:104px 1fr;gap:8px;align-items:start;padding:8px 10px;border-bottom:1px solid var(--rule-2);font-size:13px}
.tier-list li:last-child{border-bottom:0}
.tier-list b{font-weight:700}
.tl-v{display:grid;gap:2px}
.tl-v small{font-size:12px;color:var(--muted)}
.tl-v small.tg-warn{color:var(--ink);font-weight:700}
.tl-na{font-size:13px;color:var(--muted)}

@media (max-width:900px){
  .page-in{padding:20px 16px 48px}
  .page-h h1{font-size:24px}
  .offers{grid-template-columns:1fr}
  .tg-hint{display:block}
}
@media (max-width:520px){
  .gd-index{grid-template-columns:minmax(0,1fr)}
  .gd-nav .prog-tabs button{height:36px;padding:0 12px 0 6px;font-size:13px}
  .gd-nav .prog-tabs .bi{width:22px;height:22px}
  .tg-quick-grid{grid-template-columns:minmax(0,1fr)}
  .tg-quick{min-height:0}
  .tg-mx{font-size:13px;min-width:calc(92px + var(--cols) * 136px)}
  .tg-mx thead th:first-child{width:92px}
}