.ch-reference-label{display:block;margin-top:4px;font-family:var(--ko);font-size:12px;font-weight:400;color:var(--muted);white-space:normal}
.ch-reference{color:var(--muted);line-height:1.65}
/* 카드 혜택 호텔(web/menus/card-hotels.js): 지도 걸러 보기 칩·목록 머리 설명, 신용카드 하위 쪽의 지도 바로가기·가격표 보탬.
   가격표·혜택 카드의 바탕 모양은 cards.css(credit-*·ch-*)를 그대로 쓴다. 별도 지도는 그리지 않는다. */
.chip.perk{gap:7px;padding:0 12px;border-color:var(--ink);background:var(--signal-soft);font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.chip.perk .num{font-family:var(--num);font-size:15px;color:var(--ink-2)}
.chip.perk .x{font-size:12px;color:var(--muted)}
.chip.perk:hover .x{color:var(--ink)}
.filter-note{margin:0;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--signal-soft);font-size:13px;line-height:1.5;color:var(--ink)}
.filter-note .text-link{font-weight:700}
.ch-cta{display:flex;align-items:center;gap:14px;width:100%;margin-top:18px;padding:16px 18px;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.ch-cta:hover,.ch-cta:focus-visible{background:var(--signal-soft)}
.ch-cta>span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.ch-cta strong{font-size:17px}
.ch-cta small{font-size:13px;color:var(--ink-2)}
.ch-cta .credit-card-go{margin-left:auto;flex:none;font-size:14px;font-weight:700}
.ch-table .ch-city{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.ch-table td.ch-links{white-space:nowrap}
.ch-table td.ch-links a{display:block;font-size:12px;line-height:1.7}
.ch-notlisted ul{margin:10px 0 0;padding-left:18px;columns:2;column-gap:24px;font-size:13px;line-height:1.8}
.ch-notlisted small{color:var(--muted)}
@media(max-width:600px){.ch-notlisted ul{columns:1}.ch-cta{flex-wrap:wrap}.ch-cta .credit-card-go{margin-left:0}}
/* 공식 목록에 있지만 호텔이 쉬는 동안 할인에서 뺀 호텔(임시 휴업 등) */
.ch-state.is-paused{color:var(--warn)}
/* 카드 무료 숙박권 가능 날짜(web/menus/free-nights.js, 2026-10-10 개편): 한 줄 머리, 나라 상자 단추, 범례·이미지 저장 한 줄,
   호텔 × 금·토·일 표(호텔 칸 고정, 가로 이동). 색은 tokens.css의 --ok(가능)·--rule(불가)·점선(확인 전). */
.fn-page{max-width:none}
.fn-head{padding-bottom:14px;border-bottom:1.5px solid var(--ink)}
.fn-head h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.02em}
.fn-lede{margin:6px 0 0;max-width:none;font-size:15px;line-height:1.55;color:var(--ink-2)}
.fn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:10px 0 0;font-size:13px;color:var(--muted)}
.fn-meta>span:not(:last-child)::after{content:"";display:inline-block;width:1px;height:11px;margin:0 10px;background:var(--rule-2);vertical-align:-1px}
.fn-meta .linkish{font-size:13px}
.fn-ccs{margin-top:16px}
.fn-status{margin:18px 0 0;padding:12px 14px;border-left:4px solid var(--rule);background:var(--card);font-size:14px}
.fn-status.is-error{border-left-color:var(--warn)}
.fn-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;min-height:36px}
.fn-bar .fn-legend{margin-right:auto}
.fn-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.fn-legend>span{display:inline-flex;align-items:center;gap:6px}
.fn-mark-opt{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:13px;color:var(--muted);cursor:pointer}
.fn-mark-opt input{width:16px;height:16px;margin:0}
.fn-save-btn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:var(--card);font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.fn-save-btn:hover,.fn-save-btn:focus-visible{background:var(--signal-soft)}
.fn-save-btn:disabled{opacity:.6;cursor:progress}
/* 표: 칸 하나 = 숙박일 하나. 주말 첫날(wk) 앞에 틈. */
.fn-table{margin-top:10px;overflow-x:auto;border:1px solid var(--rule);border-radius:6px;background:var(--card);scrollbar-width:thin}
.fn-matrix{border-collapse:separate;border-spacing:0;font-size:12px}
.fn-matrix th,.fn-matrix td{padding:0;text-align:center;white-space:nowrap}
.fn-matrix thead th{position:sticky;top:0;background:var(--paper-2);font-weight:700;color:var(--ink-2)}
.fn-mrow th{height:26px;padding:0 6px;border-bottom:1px solid var(--rule);font-size:12px;text-align:left}
.fn-mrow th+th{border-left:1px solid var(--rule)}
.fn-drow th{min-width:26px;height:34px;border-bottom:1px solid var(--rule)}
.fn-drow b{display:block;font-family:var(--num);font-size:13px;line-height:1.1;color:var(--ink)}
.fn-drow small{display:block;font-size:10px;font-weight:400;color:var(--muted)}
.fn-matrix .wk{padding-left:6px}
.fn-matrix td{height:38px;border-bottom:1px solid var(--rule)}
.fn-matrix tbody tr:hover td,.fn-matrix tbody tr:hover .fn-hcol{background:var(--ink-wash)}
.fn-hcol{position:sticky;left:0;z-index:1;width:230px;min-width:230px;max-width:230px;padding:5px 12px!important;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--card);text-align:left!important;white-space:normal!important}
.fn-matrix thead .fn-hcol{z-index:2;background:var(--paper-2);vertical-align:bottom;padding-bottom:8px!important}
.fn-hname{display:flex;align-items:baseline;gap:6px}
.fn-name{min-width:0;overflow:hidden;font-size:13px;font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.fn-matrix .fn-hname{min-width:0;max-width:100%}
.fn-matrix .fn-name{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.fn-hcol small{display:block;font-size:11px;color:var(--muted)}
.fn-count{flex:none;margin-left:auto;font-family:var(--num);font-size:12px;font-weight:700;color:var(--ok-ink)}
.fn-count.is-zero{color:var(--muted)}
.fn-grow .fn-hcol,.fn-grow td{height:28px;padding-top:8px!important;background:var(--paper-2);font-size:12px;font-weight:700;color:var(--ink-2)}
.fn-excl{padding-left:14px!important;text-align:left!important;font-size:12px;color:var(--warn)}
/* 상태 점: 범례와 표가 같이 쓴다 */
.fn-dot{display:inline-block;width:18px;height:18px;border-radius:4px;vertical-align:middle}
.fn-dot.is-yes{background:var(--ok)}
.fn-dot.is-no{background:var(--rule)}
.fn-dot.is-unknown{border:1px dashed color-mix(in oklch,var(--muted) 55%,transparent);background:transparent}
.fn-dot.is-off{width:8px;height:1px;background:var(--rule)}
.fn-dot.is-past{width:8px;height:8px;border:1px solid var(--rule);border-radius:50%}
.fn-date-note{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.fn-mobile-matrix{display:none}
.fn-month-grid{width:100%;table-layout:fixed}
.fn-month-grid col:first-child{width:230px}
.fn-month-grid .fn-drow th{min-width:0}
.fn-month-grid .fn-dot.is-yes,.fn-month-grid .fn-dot.is-no,.fn-month-grid .fn-dot.is-unknown{width:14px;height:18px;max-width:80%}
@media(max-width:900px){.fn-desktop-matrix{display:none}.fn-mobile-matrix{display:block}}
.fn-legend .fn-dot{width:12px;height:12px;border-radius:3px}
.fn-rules{margin-top:22px;font-size:14px}
.fn-rules summary{cursor:pointer;font-weight:700}
.fn-rules ul{margin:8px 0 0;padding-left:18px;line-height:1.8;color:var(--ink-2)}
@media(max-width:600px){
  .fn-head h1{font-size:22px}
  .fn-lede{font-size:14px}
  .fn-hcol{width:150px;min-width:150px;max-width:150px;padding:5px 8px!important}
  .fn-hname{flex-direction:column;gap:0}
  .fn-count{margin-left:0}
  .fn-bar{align-items:flex-start}
  .fn-cc{min-height:36px;padding:0 11px}
}
/* 달 고르기 · 표/달력 전환(2026-10-10). 달·호텔 고르기는 공용 ‹ 고르기 ›(pages.css .step-pick, 2026-10-24) */
.fn-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.fn-tools .step-pick{margin:0}
.fn-pickers{display:flex;align-items:center;gap:16px;flex:1 1 560px;min-width:0}
.fn-pickers .step-pick:first-child{flex:1;min-width:0}
.fn-pickers .step-pick:first-child .step-pick-open{flex:1}
.fn-pickers .step-pick:last-child{flex:0 1 auto;max-width:calc(100% - 80px)}
@media(max-width:600px){
  .fn-pickers{gap:8px}
  .fn-pickers .step-pick{gap:4px}
  .fn-pickers .step-pick-btn{width:32px;height:38px}
  .fn-pickers .step-pick-open{padding-left:10px;padding-right:28px;font-size:13px}
  .fn-pickers .step-pick-open::after{right:11px}
  .fn-pickers .step-pick-count{display:none}
}
@media(max-width:480px){.fn-pickers .step-pick:first-child .step-pick-btn{display:none}}
.fn-mb,.fn-vb{min-height:34px;padding:0 12px;border:1px solid var(--rule);border-radius:999px;background:var(--card);font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.fn-mb:hover,.fn-mb:focus-visible,.fn-vb:hover,.fn-vb:focus-visible{border-color:var(--ink)}
.fn-views{display:inline-flex;padding:2px;border:1px solid var(--rule);border-radius:999px;background:var(--card)}
.fn-vb{min-height:30px;border:0;background:none}
.fn-vb.is-on{background:var(--ink);color:var(--paper);font-weight:700}
/* 달력 보기: 호텔마다 작은 달 카드 */
.fn-cgroup{margin:18px 0 8px;font-size:13px;font-weight:700;color:var(--ink-2)}
.fn-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px}
.fn-cgroup+.fn-cards{margin-top:0}
.fn-card{min-width:0;padding:10px 12px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--card)}
.fn-card .fn-hname{min-width:0}
.fn-card .fn-name{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.fn-card header{margin-bottom:8px}
.fn-card header small{display:block;font-size:11px;color:var(--muted)}
.fn-card .fn-excl{margin:6px 0 0;padding:0!important;font-size:12px}
.fn-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.fn-mdow{font-size:10px;color:var(--muted)}
.fn-mdow.is-on{color:var(--ink-2);font-weight:700}
.fn-md{display:flex;align-items:center;justify-content:center;height:24px;border-radius:4px;font-family:var(--num);font-size:12px;color:var(--faint,var(--muted));opacity:.55}
.fn-md.is-yes,.fn-md.is-no,.fn-md.is-unknown{opacity:1;font-weight:700}
.fn-md.is-yes{background:var(--ok);color:var(--card)}
.fn-md.is-no{background:var(--rule);color:var(--ink-2)}
.fn-md.is-unknown{border:1px dashed color-mix(in oklch,var(--muted) 55%,transparent);color:var(--muted)}
.fn-md.is-past{opacity:.45;background:var(--paper-2);color:var(--muted)}
.fn-hotel-detail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.fn-hotel-detail h2{margin:0;font-size:22px;line-height:1.4;font-weight:700}
.fn-hotel-detail p{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.fn-hotel-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.fn-month-title{margin:0;font-size:15px;line-height:1.6;font-weight:700}
.fn-hotel-months .fn-hname{flex-direction:row;align-items:center}
.fn-hotel-months .fn-count{margin-left:auto}
.fn-hotel-months .fn-md{height:32px;font-size:13px}
@media(max-width:600px){.fn-tools{align-items:flex-start}.fn-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}

/* 박 수 칸: 체크인 날짜 칸마다 확인된 박 수(1박 초록 · 2연박 보라). 누르거나 가리키면 숙박하는 밤과 체크아웃 날을 칠한다. */
.fn-table,.fn-card,.fn-legend{--fn-n1:var(--ok);--fn-n1-tint:color-mix(in oklch,var(--ok) 16%,var(--card));--fn-n2:oklch(50% .16 290);--fn-n2-tint:color-mix(in oklch,var(--fn-n2) 14%,var(--card))}
@media (prefers-color-scheme:dark){.fn-table,.fn-card,.fn-legend{--fn-n2:oklch(72% .13 290)}}
.fn-cards,.fn-hotel-months{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.fn-mini{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;align-items:stretch}
.fn-mini>.fn-checkin-cell,.fn-hotel-months .fn-checkin-cell{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:4px;height:auto;min-height:44px;padding:5px 2px;margin:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--muted);font-family:var(--num);font-size:13px;line-height:1.25;font-weight:400;opacity:1;box-sizing:border-box;min-width:0;transition:background-color .12s}
.fn-mini>.fn-checkin-cell.has-options{border-color:var(--rule-2);color:var(--ink);font-weight:700}
.fn-checkin-cell.is-past .fn-stay-date,.fn-checkin-cell.is-off:not(.has-options) .fn-stay-date{opacity:.45}
.fn-night-options{display:flex;flex-direction:column;gap:3px;align-items:stretch;width:100%;min-width:0}
.fn-night-option{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;min-width:0;margin:0;padding:3px 1px;border:1.5px solid transparent;border-radius:4px;font:inherit;font-family:var(--num);font-size:12px;line-height:1.2;white-space:nowrap;font-weight:700;cursor:pointer;box-sizing:border-box}
.fn-night-option b{font-weight:700}
.fn-night-option.is-n1{background:var(--fn-n1);color:var(--card)}
.fn-night-option.is-n2{background:var(--fn-n2);color:var(--card)}
.fn-night-option:hover{filter:brightness(.94)}
.fn-night-option.is-picked{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.fn-night-option:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* 칠한 일정: 숙박하는 밤은 진하게, 체크아웃 날은 옅게 + 「퇴실」 */
.is-pick-night,.is-peek-night{background:var(--fn-n1-tint)!important}
.is-pick-night[data-fn-tone=n2],.is-peek-night[data-fn-tone=n2]{background:var(--fn-n2-tint)!important}
.is-pick-out,.is-peek-out{background:repeating-linear-gradient(135deg,var(--paper-2) 0 4px,var(--card) 4px 8px)!important;border-color:var(--rule)!important;opacity:1!important;color:var(--ink)!important}
.is-pick-out[data-fn-tag]::after,.is-peek-out[data-fn-tag]::after{content:attr(data-fn-tag);display:block;font-family:var(--ko);font-size:10px;line-height:1.2;font-weight:700;color:var(--ink-2)}
td.is-pick-out[data-fn-tag]::after,td.is-peek-out[data-fn-tag]::after{font-size:9px}
.fn-stay-day{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:100%;min-height:32px;margin:0;padding:2px 1px}
.fn-stay-day .fn-night-option{padding:1px;font-size:10px}
.fn-stay-summary{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}.fn-stay-summary button{min-height:30px;padding:4px 7px;border:0;border-radius:4px;background:var(--fn-n2);color:var(--card);font:inherit;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}
/* 범례: 칸 안과 같은 박 수 모양을 그대로 보인다 */
.fn-stay-key{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;color:var(--ink-2);font-size:12px;white-space:normal}
.fn-legend-chip{display:inline-block;padding:1px 6px;border:1.5px solid transparent;border-radius:4px;font-family:var(--num);font-size:11px;font-weight:700}
.fn-legend-chip.is-n1{background:var(--fn-n1);color:var(--card)}.fn-legend-chip.is-n2{margin-left:6px;background:var(--fn-n2);color:var(--card)}
.fn-legend-ask{color:var(--fn-n2);font-size:11px}
.fn-stay-ask{margin:4px 0 0;padding:5px 8px;border-radius:4px;background:var(--fn-n2-tint);color:var(--ink);font-size:12px;line-height:1.5}
.fn-legend-how{flex-basis:100%;color:var(--muted);font-size:11px}
/* 달력 아래 한 줄: 고른 일정을 문장으로 */
.fn-stays{margin-top:10px;border-top:1px solid var(--rule);padding-top:9px;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.fn-stays [hidden]{display:none}
.fn-stay-hint{margin:0;color:var(--muted);font-size:11px}
.fn-stay-when{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;color:var(--ink);font-family:var(--num);font-size:14px;font-weight:700}
.fn-stay-n{padding:1px 7px;border-radius:4px;background:var(--fn-n1);color:var(--card);font-size:12px}.fn-stay-option.is-n2 .fn-stay-n{background:var(--fn-n2)}
.fn-stay-kind{margin:2px 0 0;color:var(--fn-n1);font-size:12px;font-weight:700}.fn-stay-option.is-n2 .fn-stay-kind{color:var(--fn-n2)}
.fn-stay-facts p{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
@media(max-width:600px){.fn-cards{grid-template-columns:minmax(0,1fr)}.fn-stay-summary button{font-size:10px;padding:4px 5px}.fn-night-option{font-size:11px}}