/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V4 */
/* 첫 화면(web/menus/home.js, 시안 docs/design-v27-home.html). 공통 밝은 회색 바탕·흰 카드·짙은 녹색, 놋쇠색은 작은 장식에 쓴다.
   그림자 대신 가는 테두리, 큰 숫자는 Barlow 500. 칸 하나 = 링크 하나(.hm-cover가 칸 전체를 덮고, 칸 안 작은 링크는 그 위에 둔다). */
.app[data-view="home"]>.page>.page-in{max-width:none;padding:0}
.hm{
  --hm-ivory:var(--paper);--hm-sheet:var(--card);--hm-line:var(--rule);--hm-line-2:var(--rule-2);
  --hm-ink:var(--ink);--hm-ink-2:var(--ink-2);--hm-muted:var(--muted);--hm-faint:var(--faint);
  --hm-green:var(--accent);--hm-green-3:var(--accent-hover);--hm-brass:var(--brass);--hm-brass-2:var(--brass-soft);--hm-brass-dark:var(--brass-dark);--hm-cream:var(--card);
  background:var(--hm-ivory);color:var(--hm-ink);-webkit-font-smoothing:antialiased
}
.hm a{color:inherit;text-decoration:none}
.hm-in{max-width:1200px;margin:0 auto;padding:24px 28px 0}

.hm-row{display:grid;gap:14px;margin-bottom:14px}
.hm-r1{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.9fr)}
.hm-r2{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1.2fr))}
.hm-r3{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 한국어 아닌 화면은 한국 카드 전용 칸(조식 지도·숙박권)을 빼서 두 칸 */
.hm-r3.hm-r3-two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 세 줄 높이를 같게(2026-10-15 운영자). 노트북(1366×768)에서 하단 줄 위로 세 줄이 다 보이는 높이. 좁은 화면(900px 이하)은 내용 높이. */
.hm{--hm-row:200px}
.hm-row>.hm-t{height:var(--hm-row);min-height:0!important}

.hm-t{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:176px;padding:24px 26px;border-radius:12px;background:var(--hm-sheet);border:1px solid var(--hm-line);transition:border-color .25s,transform .25s}
.hm-t:hover{border-color:var(--hm-green);transform:translateY(-2px)}
.hm-t:focus-within{border-color:var(--hm-green)}
.hm-cover{position:absolute;inset:0;z-index:1;border-radius:inherit}
.hm-cover:focus-visible{outline:2px solid var(--hm-green);outline-offset:2px}
.hm-t>*:not(.hm-cover){position:relative}
.hm-t h2{margin:0;font-size:20px;font-weight:700;line-height:1.3}
.hm-t p{margin:6px 0 0;font-size:14px;color:var(--hm-muted);line-height:1.55}
.hm-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.hm-big b{font-family:var(--num);font-weight:500;font-size:44px;line-height:.9}
.hm-big small{font-size:14px;color:var(--hm-muted);margin-left:6px}
.hm-arrow{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--hm-line);display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s}
.hm-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hm-t:hover .hm-arrow{background:var(--hm-green);border-color:var(--hm-green);color:var(--hm-cream)}
.hm-logos{display:flex;gap:8px}
.hm-logos img{width:28px;height:28px;object-fit:contain;border-radius:50%;background:var(--icon-bg);padding:4px;box-shadow:0 0 0 1px var(--hm-line)}

/* ① 티어 가이드 · 프로모션 · 호텔 요금 추적(2026-10-19) */
.hm-r1 .hm-t{gap:12px;padding:20px 22px;justify-content:flex-start}
.hm-r1 .hm-foot{margin-top:auto;align-items:center}
/* 티어 가이드(2026-10-19 운영자: 좌우 배치가 빈 곳이 많았다): 제목 줄 오른쪽에 하위 메뉴 알약, 아래 줄 전체에 등급 단계(맨 위 등급은 놋쇠색 굵게). */
.hm-tiers-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.hm-pills{display:flex;flex-wrap:wrap;gap:6px;z-index:2}
.hm-pills a{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border:1px solid var(--hm-line);border-radius:999px;background:var(--hm-sheet);font-size:12px;font-weight:700;color:var(--hm-ink-2);white-space:nowrap;transition:border-color .2s,color .2s}
.hm-pills a:hover{border-color:var(--hm-green);color:var(--hm-green)}
.hm-pills a:focus-visible,.hm-coll a:focus-visible{outline:2px solid var(--hm-green);outline-offset:2px}
.hm-offers-head{display:flex;align-items:center;gap:14px}
.hm-offers-head h2{flex:1}
.hm-offers-head .hm-big b{font-size:30px}
.hm-offers-head .hm-big small{font-size:13px}
.hm-ladders{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid var(--hm-line);min-width:0;display:flex;flex-direction:column;gap:5px}
.hm-ladders li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:center;font-size:12.5px;line-height:18px}
.hm-ladders img{width:18px;height:18px;object-fit:contain;border-radius:50%;background:var(--icon-bg);padding:2px;box-shadow:0 0 0 1px var(--hm-line)}
.hm-ladders span{color:var(--hm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-ladders b{font-weight:700;color:var(--hm-brass-dark)}
.hm-ladders i{font-style:normal;margin:0 4px;color:var(--hm-faint)}
/* 호텔 요금 추적 장식: 7칸 세 주 달력 */
.hm-rate-cal{display:grid;grid-template-columns:repeat(7,12px);gap:3px}
.hm-rate-cal i{height:12px;border-radius:2px;background:color-mix(in oklch,var(--hm-green) calc(var(--v) * 20%),var(--hm-line-2))}
.hm-rate-cal i.is-best{box-shadow:0 0 0 1.5px var(--hm-brass)}
.hm-offers{list-style:none;margin:0;padding:0}
.hm-offers li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--hm-line-2);font-size:14px}
.hm-offers li:last-child{border-bottom:1px solid var(--hm-line-2)}
.hm-offers img{width:22px;height:22px;object-fit:contain;border-radius:50%;background:var(--icon-bg);padding:3px;box-shadow:0 0 0 1px var(--hm-line)}
.hm-offers b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ② 5대 체인 지도 · 호텔 컬렉션 · 나의 호텔 */
.hm-r2 .hm-t{padding:22px;gap:16px;justify-content:flex-start}
.hm-r2 .hm-foot{margin-top:auto;align-items:center}
.hm-map{background:radial-gradient(120% 140% at 85% 10%,var(--hm-green-3) 0%,var(--hm-green) 55%,#10302a 100%);color:var(--hm-cream);border-color:transparent}
.hm-map:hover{border-color:var(--hm-brass)}
.hm-map p,.hm-map .hm-big small{color:#f8f5eba6}
.hm-t>.hm-world{position:absolute;inset:0;width:100%;height:100%}
.hm-world path{fill:#f8f5eb;opacity:.1}
.hm-world circle{fill:var(--hm-brass-2);opacity:.55}
.hm-map .hm-logos img{box-shadow:none}
.hm-coll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;z-index:2;margin-top:auto}
.hm-coll a{display:flex;justify-content:space-between;align-items:center;gap:4px;min-height:38px;font-size:13px;font-weight:700;padding:6px 0;border-bottom:1px solid var(--hm-line);color:var(--hm-ink-2);white-space:nowrap}
.hm-coll a::after{content:'↗';font-size:14px;color:var(--hm-brass-dark)}
.hm-coll a:hover{background:var(--hm-ivory);color:var(--hm-green)}
.hm-mine{background:var(--signal-soft);border-color:var(--hm-line)}
.hm-mine h2{color:var(--hm-green)}
.hm-mine .hm-arrow{border-color:var(--hm-brass-2);color:var(--hm-brass-dark)}
.hm-mine:hover .hm-arrow{color:var(--hm-cream)}
.hm-journey-map{width:156px;max-width:calc(100% - 48px);height:auto;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hm-journey-road{stroke:var(--hm-line);stroke-width:1.5}
.hm-journey-route{stroke:var(--hm-brass);stroke-width:2;stroke-dasharray:3 5}
.hm-journey-pin{fill:var(--hm-green);stroke:var(--hm-cream);stroke-width:3}
.hm-journey-hotel{stroke:var(--hm-green);stroke-width:1.5}

/* ③ 신용카드 · 조식 지도 · 무료 숙박권 */
.hm-cards{display:flex;align-items:flex-end}
.hm-cards i{width:52px;height:33px;border-radius:5px;margin-left:-22px;box-shadow:0 1px 2px #0003,inset 0 0 0 1px #ffffff1f}
.hm-cards i:first-child{margin-left:0;background:linear-gradient(135deg,#22262a,#4a4f55)}
.hm-cards i:nth-child(2){background:linear-gradient(135deg,#1d3d6e,#36639e);transform:translateY(-4px)}
.hm-cards i:nth-child(3){background:linear-gradient(135deg,#9c7a3f,#d8bd85);transform:translateY(-8px)}
/* ③ 줄: 노트북(1366×768)에서도 세 줄이 한 화면에 들어오게 조금 낮춘다(2026-10-15). */
.hm-r3 .hm-t{padding:20px 22px;gap:16px}
/* ③ 줄 네 번째 칸 동남아 호텔살기: 월별 요금표 모양 작은 장식(실제 요금 아님). */
.hm-stay-grid{display:grid;grid-template-columns:repeat(6,14px);gap:3px}
.hm-stay-grid i{height:11px;border-radius:2px;background:color-mix(in oklch,var(--hm-green) calc(var(--v) * 20%),var(--hm-line-2))}
.hm-week{display:flex;gap:6px}
.hm-week i{width:30px;height:6px;border-radius:3px;background:var(--hm-line)}
.hm-week i:nth-child(odd){background:var(--hm-green)}

/* 나머지 메뉴 */
.hm-sitemap{margin-top:42px;background:var(--hm-green);color:var(--hm-cream)}
.hm-sitemap .hm-in{padding:40px 28px 48px}
.hm-sitemap h2{margin:0 0 26px;font-size:15px;font-weight:700;color:var(--hm-brass-2)}
.hm-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.hm-cols h3{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid #f8f5eb26;font-size:13px;font-weight:700;color:#f8f5ebb3}
.hm-cols a{display:block;padding:7px 0;font-size:15px;font-weight:700}
.hm-cols a:hover{color:var(--hm-brass-2)}
.hm-cols a span{display:block;font-size:13px;font-weight:400;color:#f8f5ebb3}

/* 노트북 폭: ① 줄은 티어 가이드를 한 줄 전체로, 프로모션·호텔 요금 추적을 다음 줄 반씩 */
@media(min-width:901px) and (max-width:1180px){
  .hm-r1{grid-template-columns:1fr 1fr}
  .hm-r1 .hm-tiers{grid-column:1/-1}
}
@media(max-width:900px){
  .hm-row>.hm-t{height:auto}
  .hm-r1,.hm-r3,.hm-r3.hm-r3-two{grid-template-columns:1fr}
  .hm-r2{grid-template-columns:1fr 1fr}
  .hm-r2 .hm-map{grid-column:span 2}
  .hm-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .hm-in{padding:20px 16px 0}
  .hm-r2{grid-template-columns:1fr}
  .hm-r2 .hm-map{grid-column:auto}
  .hm-t,.hm-r1 .hm-t,.hm-r2 .hm-t,.hm-r3 .hm-t{min-height:0;padding:20px}
  .hm-big b{font-size:38px}
  .hm-sitemap .hm-in{padding:32px 16px 36px}
}

/* 어두운 화면: 5대 체인 지도 칸과 아래 메뉴 모음은 짙은 녹색 면에 크림색 글자 그대로 둔다(--accent가 밝은 초록으로 바뀌므로 값을 고정). */
@media (prefers-color-scheme:dark){
  .hm-map,.hm-sitemap{--hm-green:#234b40;--hm-green-3:#315e50;--hm-cream:#f8f5eb;--hm-brass-2:#d6c9ac}
  .hm-sitemap{border-top:1px solid var(--hm-line)}
}