/* 호텔 제휴 신용카드 비교·상세 */
/* 목록 머리말(2026-10-19 운영자: 높이를 줄인다). 넓은 화면은 왼쪽 eyebrow·제목, 오른쪽 설명·확인일을 세로 줄로 나눈다. 좁으면 그대로 쌓는다. */
@media(min-width:901px){
  .tg-page-h.credit-page-h{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"eye lede" "title note";column-gap:28px}
  .tg-page-h.credit-page-h .tg-eyebrow{grid-area:eye;align-self:end}
  .tg-page-h.credit-page-h h1{grid-area:title;align-self:start;line-height:1.15}
  .tg-page-h.credit-page-h p{max-width:none;padding-left:28px;border-left:1px solid var(--rule)}
  .tg-page-h.credit-page-h p:not(.tg-source-note){grid-area:lede;margin:0;font-size:14px;line-height:1.55}
  .tg-page-h.credit-page-h .tg-source-note{grid-area:note;margin:0;padding-top:6px}
}
.credit-table-hint{display:none;margin:0 0 8px;font-size:12px;color:var(--muted)}
@media(max-width:820px){.credit-table-hint{display:block}}
.credit-table-wrap:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.credit-table-wrap{overscroll-behavior-x:contain;overflow-x:auto;border:1px solid var(--rule);border-radius:6px;background:var(--card)}
.credit-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px;line-height:1.5}
.credit-table th,.credit-table td{padding:11px 12px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top}
.credit-table thead th{background:var(--paper-2);font-size:12px;color:var(--ink-2)}
.credit-table tbody tr:last-child>*{border-bottom:0}
.credit-table tbody th{min-width:170px}
.credit-table td:nth-child(2){white-space:nowrap;font-weight:700}
.credit-table-note,.credit-section-lede{margin:9px 0 0;font-size:13px;color:var(--muted)}
/* 한눈에 비교 표: 좁은 화면에서는 가로 스크롤 대신 상품마다 한 덩어리(이름 + 칸 이름·값 줄)로 쌓는다(2026-10-13) */
@media(max-width:820px){.credit-compare-wrap{overflow:visible;border:0;background:none}.credit-table.credit-compare{min-width:0;font-size:13px}
.credit-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.credit-compare,.credit-compare tbody,.credit-compare tr,.credit-compare tbody th,.credit-compare td{display:block;width:auto}
.credit-compare tr{margin-bottom:10px;border:1px solid var(--rule);border-radius:8px;background:var(--card);overflow:hidden}
.credit-compare tbody th{min-width:0;padding:12px;background:var(--paper-2);border-bottom:1px solid var(--rule-2)}
.credit-compare td{display:grid;grid-template-columns:minmax(6.5em,32%) minmax(0,1fr);gap:10px;padding:9px 12px;border-bottom:1px solid var(--rule-2)}
.credit-compare td:nth-child(2){white-space:normal}.credit-compare td::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--muted)}
.credit-compare tbody tr:last-child>*{border-bottom:1px solid var(--rule-2)}.credit-compare tr>td:last-child{border-bottom:0}}
.credit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.credit-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:16px;border:1px solid var(--rule);border-radius:8px;background:var(--card);text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s}
.credit-card:hover,.credit-card:focus-visible{border-color:var(--ink)}
.credit-card-head{display:flex;align-items:center;gap:14px;min-width:0}
.credit-card-head .cc-face{width:132px;transition:transform .2s}
.credit-card:hover .cc-face,.credit-card:focus-visible .cc-face{transform:translateY(-2px) rotate(-1.5deg)}
.credit-card-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.credit-card-name small{font-size:12px;font-weight:700;color:var(--muted)}
.credit-card-name strong{font-size:18px;line-height:1.35;overflow-wrap:anywhere}
.credit-card-go{margin-left:auto;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.credit-card-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:9px 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.credit-card-facts small,.credit-hero-facts small{display:block;font-size:12px;color:var(--muted)}
.credit-card-facts b{display:block;margin-top:3px;font-size:13px;overflow-wrap:anywhere}
.credit-card-foot{display:flex;align-items:flex-end;gap:12px;margin-top:auto}
.credit-card-foot .credit-card-go{flex:none;font-size:13px;font-weight:700}
.credit-card-night{font-size:12px;color:var(--ink-2);line-height:1.5}
.credit-card-events{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:10px 12px;border-radius:6px;background:var(--paper-2)}
.credit-card-event{font-size:12.5px;line-height:1.5;color:var(--ink)}
.credit-card-event small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.credit-closed{align-self:flex-start;margin-top:4px;border-color:transparent;background:var(--paper-2);color:var(--muted)}
.credit-card.is-closed .cc-face{filter:grayscale(.6);opacity:.75}
.credit-closed-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.credit-closed-note .credit-closed{margin-top:0}
.credit-table-event{display:flex;width:max-content;margin-top:6px;height:20px}
.credit-table-name{display:inline-flex;align-items:center;gap:10px;text-align:left}
.credit-table-name .cc-face{width:38px}
.credit-detail-h{display:flex;align-items:center;gap:28px}
.credit-detail-h>div{flex:1;min-width:0}
.credit-detail-h .cc-face{width:230px}

/* 카드 모양 그림(cards.js cardFace). 체인 구분색(--ch)으로 칠하고, 크기는 너비만 정하면 글자가 비례한다(cqw). 실제 카드 디자인이 아니다. */
.cc-face{position:relative;display:block;flex:none;aspect-ratio:1.586;container-type:inline-size;border-radius:3.7% / 5.9%;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,color-mix(in oklch,var(--ch-deep,var(--ch)) 82%,white) 0%,var(--ch-deep,var(--ch)) 42%,color-mix(in oklch,var(--ch-deep,var(--ch)) 62%,black) 100%);
  box-shadow:0 1px 2px rgb(0 0 0/.16),0 8px 16px -8px rgb(0 0 0/.45);line-height:1}
.cc-face::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 100% 0%,rgb(255 255 255/.24),transparent 52%),repeating-linear-gradient(115deg,rgb(255 255 255/.035) 0 2cqw,transparent 2cqw 4cqw)}
.cc-face.is-premium{background:linear-gradient(135deg,color-mix(in oklch,var(--ch-deep,var(--ch)) 24%,oklch(36% .01 260)) 0%,oklch(19% .01 260) 55%,color-mix(in oklch,var(--ch-deep,var(--ch)) 18%,oklch(27% .01 260)) 100%)}
.cc-face.is-premium::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2cqw;background:var(--ch-deep,var(--ch))}
.cc-issuer{position:absolute;left:7cqw;top:7cqw;font-size:8cqw;font-weight:700;letter-spacing:.01em}
.cc-chip{position:absolute;left:7cqw;top:24cqw;width:14cqw;height:10.5cqw;border-radius:2cqw;
  background:linear-gradient(90deg,transparent 32%,rgb(120 90 20/.35) 32% 35%,transparent 35% 65%,rgb(120 90 20/.35) 65% 68%,transparent 68%),linear-gradient(0deg,transparent 46%,rgb(120 90 20/.35) 46% 54%,transparent 54%),linear-gradient(135deg,#f3dc9a,#c9a24b 60%,#e9cf86)}
.cc-program{position:absolute;left:7cqw;bottom:7cqw;max-width:52cqw;font-size:6.4cqw;font-weight:700;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;opacity:.95}
.cc-net{position:absolute;right:7cqw;bottom:7cqw;font-weight:700}
.cc-net-visa{font-size:11cqw;font-style:italic;letter-spacing:-.02em}
.cc-net-amex{padding:1.2cqw 1.8cqw;border:.7cqw solid currentColor;border-radius:1.2cqw;font-size:6cqw;letter-spacing:.04em}
.cc-net-mastercard{font-size:6.5cqw}
.cc-face.is-mini{border-radius:3px;box-shadow:0 1px 2px rgb(0 0 0/.25)}
.cc-face.is-mini .cc-chip{top:28cqw;left:12cqw;width:24cqw;height:18cqw}
/* 카드사 공식 카드 그림(cards.json image, web/assets/cards/). 그림 자체의 모서리·그림자 대신 실제 카드 비율 모서리로 자른다.
   세로 카드(롯데·우리)는 가로 카드와 같은 높이로 좁게(폭 × 0.397 = 1 ÷ 1.586²) 놓는다. */
.cc-face.has-img{background:none}
.cc-face.has-img::before,.cc-face.has-img::after{display:none}
.cc-face.has-img img{display:block;width:100%;height:100%;object-fit:cover}
.cc-face.is-portrait{aspect-ratio:.6305;border-radius:5.9% / 3.7%}
.credit-card-head .cc-face.is-portrait{width:52px}
.credit-table-name .cc-face.is-portrait{width:15px}
.credit-detail-h .cc-face.is-portrait{width:91px}
.cc-face.is-mini.has-img{border-radius:2px}
@media(max-width:700px){.credit-detail-h .cc-face.is-portrait{width:min(87px,25vw)}}
@media(max-width:400px){.credit-card-head .cc-face.is-portrait{width:41px}}
.credit-detail{max-width:820px;margin:auto}
.credit-nav{margin-bottom:18px}
.credit-hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:22px}
.credit-hero-facts>div{padding:12px;border:1px solid var(--rule);background:var(--card)}
.credit-hero-facts strong{display:block;margin-top:4px;font-size:17px;overflow-wrap:anywhere}
.credit-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:10px;margin-top:12px}
.credit-benefit{padding:15px;border:1px solid var(--rule);background:var(--card)}
.credit-benefit.is-ended{opacity:.7}
.credit-benefit-head{display:flex;gap:6px;flex-wrap:wrap}
.credit-benefit h3{margin:9px 0 6px;font-size:16px;line-height:1.45}
.credit-benefit ul{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.credit-benefit li+li{margin-top:5px}
.credit-period{margin:4px 0;font-size:12px;font-weight:700;color:var(--muted)}
.credit-past{margin-top:28px;padding:14px;border:1px solid var(--rule)}
.credit-past summary{font-weight:700;cursor:pointer}
.credit-sources ul{padding-left:18px;font-size:13px;line-height:1.7}
.credit-sources a{color:var(--ink);font-weight:700}
.credit-sources small{color:var(--muted)}
@media(max-width:700px){.credit-hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-table{min-width:680px}.credit-detail-h{flex-direction:column-reverse;align-items:flex-start;gap:16px}.credit-detail-h .cc-face{width:min(220px,62vw)}}
@media(max-width:400px){.credit-grid,.credit-benefits{grid-template-columns:minmax(0,1fr)}.credit-card-head .cc-face{width:104px}.credit-card-name strong{font-size:16px}}

/* 바로가기 상자(카드 고르기·카드 혜택 호텔 지도·숙박권 날짜·마일리지 가이드): 모두 표시 28px · 글 · → 한 줄.
   폭이 좁아도 줄을 바꾸지 않고, 휴대폰에서는 → 만 남긴다. 왼쪽 색 띠 없음(2026-10-24) */
.credit-map-links{display:grid;gap:8px;margin-top:20px}
.credit-map-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}.credit-map-row>.credit-map-links{margin-top:0;grid-auto-rows:1fr}.credit-map-row .credit-map-link{height:100%;box-sizing:border-box}
.credit-map-links+.credit-map-row{margin-top:8px}
@media(max-width:820px){.credit-map-row{grid-template-columns:minmax(0,1fr)}}
.credit-map-link{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:3px;background:var(--card);text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.credit-map-link:hover,.credit-map-link:focus-visible{border-color:var(--ink)}
.credit-map-link .bi{width:28px;height:28px;flex:none}
.credit-map-mark{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:6px;background:var(--ink);color:var(--paper);font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.04em}
.credit-map-text{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}
.credit-map-text small{font-size:12px;font-weight:700;color:var(--muted)}
.credit-map-text strong{font-size:16px;line-height:1.35}
.credit-map-text>span{font-size:13px;line-height:1.45;color:var(--ink-2)}
.credit-map-link .credit-card-go{flex:none;font-size:13px;font-weight:700}
@media(max-width:520px){.credit-map-link .credit-card-go{font-size:17px;text-decoration:none}.credit-map-link .credit-card-go>span{display:none}}

/* 카드 혜택 호텔 지도(card-hotels.js): 할인 가능 = --ok, 시작 예정 = --warn, 목록에 없음 = 속 빈 회색 */
.ch-dot{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;background:var(--ok);vertical-align:-1px}
.ch-dot.is-soon{background:var(--card);box-shadow:inset 0 0 0 2.5px var(--warn)}
.ch-dot.is-no{background:var(--card);box-shadow:inset 0 0 0 2px var(--faint)}
.ch-dot.is-all{background:linear-gradient(90deg,var(--ok) 50%,var(--faint) 50%)}
.ch-chips,.ch-areas{display:flex;flex-wrap:wrap;gap:8px}
.ch-chips{margin-top:24px}
.ch-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;border:1.5px solid var(--rule);border-radius:18px;background:var(--card);font:inherit;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;cursor:pointer}
.ch-chip .num{font-family:var(--num);font-size:15px;color:var(--muted)}
.ch-chip:hover{border-color:var(--ink-2)}
.ch-chip[aria-pressed="true"]{border-color:var(--ink);background:var(--signal-soft);box-shadow:inset 0 0 0 1px var(--ink)}
.ch-areas .ch-chip{height:32px;padding:0 12px;font-size:13px}
.ch-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;margin-top:14px}
.ch-mapcol{display:grid;gap:10px;min-width:0;scroll-margin-top:12px}
.ch-map{position:relative;height:min(68vh,620px);min-height:420px;border:1px solid var(--rule);border-radius:6px;background:var(--sea);overflow:hidden}
.ch-map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ch-map-msg{position:absolute;left:12px;bottom:10px;margin:0;padding:4px 10px;border-radius:12px;background:var(--glass);font-size:12px;color:var(--muted)}
.ch-pin{stroke:var(--card);stroke-width:2;fill:var(--ok);cursor:pointer}
.ch-pin.is-soon{fill:var(--card);stroke:var(--warn);stroke-width:3}
.ch-pin.is-no{fill:var(--card);stroke:var(--faint);stroke-width:2}
.ch-pin.on{stroke:var(--ink);stroke-width:3}
.ch-pin.is-no.on{stroke:var(--ink)}
.ch-leg{stroke:var(--faint);stroke-width:1}
.ch-label{font-size:12px;font-weight:700;fill:var(--ink-2);paint-order:stroke;stroke:var(--card);stroke-width:3.5px;stroke-linejoin:round;cursor:pointer}
.ch-label.is-yes{fill:var(--ok-ink)}
.ch-label.is-soon{fill:var(--warn-ink)}
.ch-label.is-no{fill:var(--muted);font-weight:500}
.ch-label.on{fill:var(--ink);text-decoration:underline}
.ch-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0;font-size:12px;color:var(--muted)}
.ch-legend>span{display:inline-flex;align-items:center;gap:6px}
.ch-detail{padding:16px;border:1px solid var(--rule);border-radius:6px;background:var(--card)}
.ch-detail-empty{margin:0;font-size:13px;color:var(--muted)}
.ch-detail-h{display:flex;gap:10px;align-items:flex-start}
.ch-detail-h .ch-dot{margin-top:7px}
.ch-detail h3{margin:0;font-size:17px;line-height:1.4}
.ch-where{margin:3px 0 0;font-size:13px;color:var(--muted)}
.ch-state{font-weight:700;color:var(--ok-ink)}
.ch-state.is-soon{color:var(--warn-ink)}
.ch-state.is-no{color:var(--muted)}
.ch-prices{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:14px 0 0;font-size:14px}
.ch-prices dt{color:var(--muted)}
.ch-prices dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.ch-prices b,.ch-table b{color:var(--ok-ink)}
.ch-under{font-size:12px;font-weight:500;color:var(--muted)}
.ch-note{margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.ch-caution{margin:10px 0 0;padding:8px 10px;border-radius:4px;background:var(--warn-soft);font-size:13px;color:var(--ink)}
.ch-detail h4,.ch-tab h4{margin:16px 0 6px;font-size:13px;color:var(--muted)}
.ch-src{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:8px;font-size:13px}
.ch-src li{line-height:1.5}
.ch-src .pill{height:20px;padding:0 7px;margin-right:2px}
.ch-src a{font-weight:700;color:var(--ink)}
.ch-src-kind{color:var(--muted);font-size:12px}
.ch-src small{display:block;color:var(--muted);font-size:12px}
.ch-list-box{border:1px solid var(--rule);border-radius:6px;background:var(--card);overflow:hidden}
.ch-list-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.ch-list-h h2{margin:0;font-size:15px}
.ch-list-n{font-size:13px;color:var(--muted)}
.ch-list{max-height:min(68vh,620px);overflow-y:auto}
.ch-group{padding:10px 14px 4px;font-size:12px;font-weight:700;color:var(--muted)}
.ch-group .num{font-family:var(--num)}
.ch-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:start;width:100%;padding:9px 14px;border:0;border-top:1px solid var(--rule-2);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.ch-group+.ch-row{border-top:0}
.ch-row .ch-dot{margin-top:5px}
.ch-row:hover{background:var(--paper-2)}
.ch-row[aria-pressed="true"]{background:var(--signal-soft)}
.ch-row-main{display:flex;flex-direction:column;min-width:0}
.ch-row-main b{font-size:14px;font-weight:700;line-height:1.4}
.ch-row-main small{font-size:12px;color:var(--muted)}
.ch-tag{font-size:12px;font-weight:700;color:var(--ok-ink);white-space:nowrap;padding-top:2px}
.ch-row.is-soon .ch-tag{color:var(--warn-ink)}
.ch-row.is-no .ch-tag{color:var(--faint);font-weight:500}
.ch-table{min-width:720px}
.ch-table .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.credit-table.ch-table td:nth-child(2){white-space:normal;font-weight:400}
.ch-table tbody th{font-weight:400}
.ch-table tbody th .ch-state{font-size:12px}
.ch-table a{color:var(--ink);font-weight:700;white-space:nowrap}
.ch-tab-card{margin:0;font-size:12px;font-weight:700;color:var(--muted)}
.ch-tab-title{margin:2px 0 0;font-size:15px;font-weight:700}
@media(max-width:900px){
  .ch-layout{grid-template-columns:minmax(0,1fr)}
  .ch-map{height:min(60svh,460px);min-height:320px}
  .ch-list{max-height:none}
}
@media(max-width:520px){
  .ch-chip{height:40px}
}

/* 상황별 호텔 제휴 카드 고르기(hotel-card-guide.js): 본문은 동남아 가이드의 .ss-guide·.ss-gtable 규칙을 쓰고, 상황 상자만 여기 */
.hcg{padding-top:8px}
.hcg-note{font-size:13px;color:var(--muted)}
.hcg-pick{margin:18px 0 0;padding:16px 18px;border:1px solid var(--rule);border-left:4px solid var(--ink);border-radius:3px;background:var(--card)}
.hcg-pick.c-marriott{border-left-color:var(--marriott)}.hcg-pick.c-hilton{border-left-color:var(--hilton)}.hcg-pick.c-accor{border-left-color:var(--accor)}
.hcg-pick h4{margin:0;font-size:17px;font-weight:700;line-height:1.45}
.hcg-ans{display:flex;align-items:center;gap:8px;margin:8px 0 0!important;font-weight:700;color:var(--ink)}
.hcg-ans .bi{width:22px;height:22px;flex:none}
.hcg-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}
.hcg-card{font-weight:700}
@media(max-width:560px){.hcg-pick{padding:14px}}