/* css/ksk-home.css — 새 홈(index.html) 전용 스타일. 색·폰트·그림자·오버레이는 전부
   tokens-ksk.css(worker-20 소유, R2부터 worker-4 도 공동 수정 가능 — master 09-06 10:27
   통보)의 변수만 참조한다(하드코딩 금지 규율 준수). --ksk-on-brand 로컬 선언은 R2에서
   tokens-ksk.css 로 이관해 제거했다(codex R1 H2 REVISE 수리). 데스크톱 1440(컨테이너 1200)
   우선, 390px 모바일 반응형. */

* { box-sizing: border-box; }

.ksk-home-body {
  margin: 0;
  font-family: var(--ksk-font);
  color: var(--ksk-text-primary);
  background: var(--ksk-page-bg);
  font-size: var(--ksk-fs-body);
  line-height: var(--ksk-lh-body);
}

a { color: inherit; text-decoration: none; }

/* ---------- GNB ---------- */
.ksk-gnb {
  background: var(--ksk-gnb-bg);
  border-bottom: 1px solid var(--ksk-border);
  position: sticky; top: 0; z-index: 50;
}
.ksk-gnb-inner {
  max-width: var(--ksk-desktop-max);
  margin: 0 auto;
  display: flex; align-items: center; gap: 32px;
  padding: 14px 20px;
}
.ksk-logo { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 20px; color: var(--ksk-heading-ink); flex: none; }
.ksk-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ksk-brand); color: var(--ksk-on-brand); font-size: 14px; font-weight: 800;
}
.ksk-gnb-menu { display: flex; gap: 24px; flex: 1; }
.ksk-gnb-menu a {
  font-size: var(--ksk-fs-gnb-link); font-weight: var(--ksk-fw-gnb-link);
  color: var(--ksk-text-primary); white-space: nowrap;
}
.ksk-gnb-menu a:hover { color: var(--ksk-brand); }
.ksk-gnb-gamemap { color: var(--ksk-brand) !important; }

/* 여행 드롭다운 */
.ksk-gnb-dropdown { position: relative; }
.ksk-gnb-dropdown-btn {
  border: none; background: transparent; cursor: pointer; padding: 0;
  font-size: var(--ksk-fs-gnb-link); font-weight: var(--ksk-fw-gnb-link); color: var(--ksk-text-primary);
  font-family: var(--ksk-font); display: flex; align-items: center; gap: 4px;
}
.ksk-gnb-dropdown-btn:hover, .ksk-gnb-dropdown.is-open .ksk-gnb-dropdown-btn { color: var(--ksk-brand); }
.ksk-gnb-caret { font-size: 10px; }
.ksk-gnb-dropdown-list {
  position: absolute; top: calc(100% + 14px); left: -12px; margin: 0; padding: 8px 0;
  list-style: none; min-width: 140px; background: var(--ksk-page-bg);
  border: 1px solid var(--ksk-border); border-radius: 8px; box-shadow: var(--ksk-shadow-md);
  z-index: 70;
}
.ksk-gnb-dropdown-list a { display: block; padding: 8px 16px; font-size: 13px; font-weight: 400; color: var(--ksk-text-primary); }
.ksk-gnb-dropdown-list a:hover { background: var(--ksk-brand-light); color: var(--ksk-brand); }
.ksk-gnb-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.ksk-icon-btn {
  border: none; background: transparent; cursor: pointer; font-size: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ksk-icon-btn:hover { background: var(--ksk-brand-light); }
.ksk-gnb-login { font-size: 12px; color: var(--ksk-text-muted); }
.ksk-gnb-login small { font-size: 10px; }
.ksk-gnb-hamburger { display: none; font-size: 20px; }
.ksk-icon-btn.is-prep { color: var(--ksk-disabled); cursor: default; }
.ksk-icon-btn.is-prep:hover { background: none; }

/* ---------- 이용 안내 패널(NOLTRIP-HOME-5ITEMS §3, 2026-09-07) ---------- */
.ksk-gnb-info-wrap { position: relative; }
.ksk-gnb-info-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 260px; z-index: 70;
  background: var(--ksk-page-bg); border: 1px solid var(--ksk-border); border-radius: 8px;
  box-shadow: var(--ksk-shadow-md); padding: 14px 16px;
}
.ksk-gnb-info-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ksk-heading-ink); }
.ksk-gnb-info-list { margin: 0; padding: 0 0 0 18px; font-size: 12px; color: var(--ksk-text-primary); display: flex; flex-direction: column; gap: 6px; }
.ksk-gnb-search-active { background: var(--ksk-brand); color: var(--ksk-on-brand); }
.ksk-gnb-search-active:hover { background: var(--ksk-brand-hover); }

/* ★BRIEF_HOME_FIX_SEARCH_HERO_20260907 [1] — GNB 🔍 왼쪽 검색창. 데스크톱(480px 초과)은
   기본값 그대로 인라인 노출. 모바일 접힘은 아래 480px 블록에서만 재정의(재사용 원칙). */
.ksk-gnb-search { display: flex; align-items: center; }
.ksk-gnb-search-input {
  min-width: 0; width: 180px; height: 32px; margin-right: 6px; padding: 0 12px;
  border: 1px solid var(--ksk-border); border-radius: 16px; font: inherit; font-size: 13px;
  background: var(--ksk-page-bg); color: var(--ksk-text-primary);
}
.ksk-gnb-search-input::placeholder { color: var(--ksk-text-muted); }

/* ---------- 히어로 ---------- */
.ksk-hero {
  position: relative; max-width: var(--ksk-desktop-max); margin: 20px auto 0; padding: 0 20px;
}
/* ★R2(codex H1-2) — KSK 는 히어로가 대형 캐러셀(좌)+보조 패널(우) 2단 구성이다(실물
   round/ksk_live_capture_20260906/main_desktop1440_attempt1.png). 우리는 보조 패널을
   진행중 축제 실데이터(오늘 기준)로 채운다 — 지어낸 콘텐츠 없음. 썸네일 치수는
   --ksk-thumb-hero-side-w/h(313.6x160, worker-20 실측)를 그대로 쓴다. */
.ksk-hero-row { display: flex; gap: 16px; align-items: stretch; }
.ksk-hero-main { flex: 1; min-width: 0; }
.ksk-hero-side {
  flex: none; width: var(--ksk-thumb-hero-side-w); display: flex; flex-direction: column; gap: 12px;
}
.ksk-hero-side-title { margin: 0; font-size: 12px; font-weight: 700; color: var(--ksk-text-muted); }
.ksk-hero-side-card {
  display: block; position: relative; border-radius: var(--ksk-card-radius); overflow: hidden;
  width: var(--ksk-thumb-hero-side-w); height: var(--ksk-thumb-hero-side-h);
  background: var(--ksk-placeholder-bg);
}
.ksk-hero-side-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksk-hero-side-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; color: var(--ksk-on-brand);
  background: var(--ksk-overlay-hero); font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ksk-hero-side-empty { display: flex; align-items: center; justify-content: center; color: var(--ksk-disabled); font-size: 12px; }
.ksk-hero-slide {
  position: relative; border-radius: var(--ksk-card-radius); overflow: hidden;
  height: 360px; background: var(--ksk-bg-alt);
}
.ksk-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ★BRIEF_HOME_FIX_SEARCH_HERO_20260907 [6] — 링크가 슬라이드 전체를 덮되(position 상속),
   캡션(.ksk-hero-caption, 뒤에 오는 형제)이 DOM 순서상 나중에 그려져 자동으로 위에 얹힌다
   (양쪽 다 z-index 지정 없음 — 새 z-index 스택 규칙을 만들지 않는다). */
.ksk-hero-img-link { position: absolute; inset: 0; display: block; }
.ksk-hero-caption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 24px 28px; color: var(--ksk-on-brand);
  background: var(--ksk-overlay-hero);
}
.ksk-hero-cap-title { margin: 0 0 4px; font-size: 22px; font-weight: var(--ksk-fw-h2); }
.ksk-hero-cap-sub { margin: 0; font-size: var(--ksk-fs-card-desc); opacity: .9; }
.ksk-hero-weather { margin: 4px 0 0; font-size: 12px; font-weight: 700; opacity: .95; }
.ksk-hero-dots { display: flex; gap: 6px; justify-content: center; margin: 10px 0; }
.ksk-hero-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ksk-border); }
.ksk-hero-dots span.is-active { background: var(--ksk-brand); }
.ksk-hero-search {
  display: flex; gap: 0; margin: -28px auto 0; max-width: 560px; position: relative; z-index: 2;
  background: var(--ksk-page-bg); border-radius: 999px; box-shadow: var(--ksk-shadow-lg);
  padding: 4px;
}
.ksk-hero-search-input {
  flex: 1; border: none; outline: none; padding: 12px 18px; font-size: 14px; font-family: var(--ksk-font);
  border-radius: 999px 0 0 999px; color: var(--ksk-text-primary);
}
.ksk-hero-search-btn {
  border: none; background: var(--ksk-brand); color: var(--ksk-on-brand); font-weight: 700;
  padding: 12px 22px; border-radius: 999px; cursor: pointer; font-family: var(--ksk-font);
}
.ksk-hero-search-btn:hover { background: var(--ksk-brand-hover); }

/* ---------- 섹션 공통 ---------- */
.ksk-section, .ksk-services {
  max-width: var(--ksk-desktop-max); margin: 0 auto; padding: 0 20px;
}
.ksk-section-heading {
  font-size: var(--ksk-fs-h2); font-weight: var(--ksk-fw-h2); color: var(--ksk-heading-ink);
  line-height: var(--ksk-lh-h2); margin: var(--ksk-mg-h2);
}
.ksk-services-heading { font-weight: 400; }
.ksk-services-heading strong { font-weight: var(--ksk-fw-h2); }
.ksk-section-headrow { display: flex; align-items: baseline; justify-content: space-between; margin: var(--ksk-mg-h2); }
.ksk-section-headrow .ksk-section-heading { margin: 0; }
.ksk-more-link { font-size: var(--ksk-fs-more-btn); color: var(--ksk-text-muted); }
.ksk-more-link:hover { color: var(--ksk-brand); }

/* ---------- 서비스 아이콘(HOME-CLEANUP 09-07 — 9개→5개, NOLTRIP-Q6-BUILD-Q1 09-07 —
   5개→4개(여행가이드북 삭제). 삭제 근거는 js/ksk-home.js SERVICES 배열 주석 참고) ---------- */
.ksk-services-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.ksk-service-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ksk-service-item a { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ksk-service-circle {
  width: var(--ksk-icon-circle-size); height: var(--ksk-icon-circle-size); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ksk-brand-light); border: 1px solid var(--ksk-border);
  color: var(--ksk-brand);
}
.ksk-service-circle svg { width: 60%; height: 60%; }
.ksk-service-item.is-prep .ksk-service-circle { background: var(--ksk-bg-alt); opacity: .7; color: var(--ksk-text-muted); }
.ksk-service-label { font-size: 12px; color: var(--ksk-text-primary); font-weight: 500; }
.ksk-service-prep-tag { font-size: 10px; color: var(--ksk-text-muted); display: block; }

/* ---------- 게임형 지도 홈 소개(NOLTRIP-HOME-5ITEMS §4, 2026-09-07) ---------- */
.ksk-gamemap-promo { max-width: var(--ksk-desktop-max); margin: 32px auto; padding: 0 20px; }
.ksk-gamemap-promo-inner {
  display: flex; align-items: center; gap: 24px;
  background: var(--ksk-brand-light); border-radius: var(--ksk-card-radius); padding: 24px 32px;
}
.ksk-gamemap-promo-mascot { width: 96px; height: 96px; object-fit: contain; flex: none; }
.ksk-gamemap-promo-body { flex: 1; min-width: 0; }
.ksk-gamemap-promo-body .ksk-section-heading { margin: 0 0 8px; }
.ksk-gamemap-promo-desc { font-size: var(--ksk-fs-card-desc); color: var(--ksk-text-primary); margin: 0 0 16px; }
.ksk-gamemap-promo-btn {
  display: inline-block; border: none; background: var(--ksk-brand); color: var(--ksk-on-brand); font-weight: 700;
  font-family: var(--ksk-font); padding: 10px 22px; border-radius: 999px; font-size: 14px;
}
.ksk-gamemap-promo-btn:hover { background: var(--ksk-brand-hover); }

/* ---------- 스켈레톤/준비중 카드 ---------- */
.ksk-skeleton-card, .ksk-prep-card {
  background: var(--ksk-bg-alt); border-radius: var(--ksk-card-radius);
  padding: 24px; margin-bottom: 32px;
}
.ksk-prep-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--ksk-on-brand);
  background: var(--ksk-text-muted); border-radius: 4px; padding: 2px 8px; margin: 0 0 8px;
}
.ksk-prep-text, .ksk-prep-card p:last-child { font-size: var(--ksk-fs-card-desc); color: var(--ksk-text-muted); margin: 0; }
.ksk-loading { color: var(--ksk-text-muted); font-size: var(--ksk-fs-body); padding: 24px 0; }

/* ---------- AI 여행 추천(NOLTRIP-AI-RECO, 2026-09-06) ---------- */
.ksk-ai-reco-sub { font-size: var(--ksk-fs-card-desc); color: var(--ksk-text-muted); margin: 0 0 20px; }
/* ---------- AI추천 3진입(NOLTRIP-Q6-BUILD 2026-09-07, 동결스펙 §2) ---------- */
.ksk-ai-entry-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.ksk-ai-entry-btn {
  border: 1px solid var(--ksk-border); background: var(--ksk-page-bg); color: var(--ksk-text-primary);
  border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 700; font-family: var(--ksk-font); cursor: pointer;
}
.ksk-ai-entry-btn:hover { background: var(--ksk-brand-light); color: var(--ksk-brand); }
.ksk-ai-entry-auto { background: var(--ksk-brand); border-color: var(--ksk-brand); color: var(--ksk-on-brand); }
.ksk-ai-entry-auto:hover { background: var(--ksk-brand-hover); color: var(--ksk-on-brand); }
.ksk-ai-entry-auto:disabled { opacity: .6; cursor: default; }
.ksk-ai-reco-form { background: var(--ksk-placeholder-bg); border-radius: var(--ksk-card-radius); padding: 20px; margin-bottom: 24px; }
/* ★BRIEF_AI_QUICKPICK_DAYS_MERGE_20260907 [3] — 미니 픽커는 .ksk-ai-reco-form(박스)·
   .ksk-ai-reco-row/.ksk-ai-reco-field(레이아웃)·.ksk-ai-reco-submit(버튼) 기존 클래스를
   그대로 재사용한다(신규 색 리터럴 0). 제목 한 줄만 신규 스타일. */
.ksk-ai-quickpick-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ksk-heading-ink); }
.ksk-ai-reco-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.ksk-ai-reco-field {
  display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ksk-heading-ink);
  flex: 1; min-width: 140px;
}
.ksk-ai-reco-field select, .ksk-ai-reco-field input {
  font-family: var(--ksk-font); font-size: 14px; font-weight: 400; color: var(--ksk-text-primary);
  border: 1px solid var(--ksk-border); border-radius: 8px; padding: 10px 12px; background: var(--ksk-page-bg);
}
/* ★BRIEF_AI_QUICKPICK_DAYS_MERGE_20260907 [4] — "여행 일수" 한 라벨 안 select 옆에 붙는
   인라인 직접입력 칸(기존 별도 라벨 wrap 제거로 폭이 좁아져도 됨). */
.ksk-ai-reco-days-inline { width: 96px; margin-top: 6px; }
/* ★DESIGN_AI_FORM_REDESIGN_20260907@7D8BCC59 §2-1/§2-3 — .ksk-taste-* 를 .ksk-ai-theme-*
   로 이름만 바꿔 이식(시각 스타일 값 자체는 무변경). 기존 홈페이지 "테마로 떠나는 여행"
   아치밴드가 이미 .ksk-theme-* 를 쓰고 있어(305행 상당) 이름이 겹치면 스타일이 새므로
   이 폼 전용 .ksk-ai-* 네임스페이스로 신설했다. */
.ksk-ai-reco-themes { border: none; padding: 0; margin: 0 0 16px; }
.ksk-ai-reco-themes legend { font-size: 12px; font-weight: 700; color: var(--ksk-heading-ink); padding: 0 0 8px; }
.ksk-ai-theme-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ksk-ai-theme-chip {
  border: 1px solid var(--ksk-border); background: var(--ksk-page-bg); color: var(--ksk-text-primary);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-family: var(--ksk-font); cursor: pointer;
}
.ksk-ai-theme-chip.is-active { background: var(--ksk-brand); border-color: var(--ksk-brand); color: var(--ksk-on-brand); }
.ksk-ai-theme-hint { font-size: 11px; color: var(--ksk-text-muted); margin: 8px 0 0; }
/* ★신규 — 축1(누구와+인원) 그룹 레이아웃, 기존 .ksk-ai-reco-row 와 동일 패턴 재사용. */
.ksk-ai-reco-companion-group { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
/* ★신규 — §3-2b "④" 장기일정 압축 문구 + 원클릭 게이트 안내(§4)가 공유하는 톤.
   .ksk-ai-budget-note(DESIGN_PRICE_IMPL §3-2, 282행 상당)와 동일 스타일. */
.ksk-ai-reco-hint { font-size: 12px; color: var(--ksk-text-muted); margin: 8px 0 0; }
.ksk-ai-reco-note-field input { width: 100%; }
.ksk-ai-reco-submit {
  border: none; background: var(--ksk-brand); color: var(--ksk-on-brand); font-weight: 700; font-family: var(--ksk-font);
  padding: 12px 28px; border-radius: 999px; cursor: pointer; font-size: 14px;
}
.ksk-ai-reco-submit:hover { background: var(--ksk-brand-hover); }
.ksk-ai-reco-submit:disabled { opacity: .6; cursor: default; }
.ksk-ai-reco-result { margin-bottom: 32px; }
.ksk-ai-reco-loading, .ksk-ai-reco-error { font-size: var(--ksk-fs-body); color: var(--ksk-text-muted); padding: 16px 0; }
.ksk-ai-reco-error { color: var(--ksk-brand-hover); }
.ksk-ai-day { margin-bottom: 20px; }
.ksk-ai-day-title { font-size: 16px; font-weight: 800; color: var(--ksk-heading-ink); margin: 0 0 10px; }
.ksk-ai-timeline { display: flex; flex-direction: column; gap: 10px; }
.ksk-ai-card { display: flex; gap: 12px; border: 1px solid var(--ksk-border); border-radius: var(--ksk-card-radius); overflow: hidden; padding: 8px; }
.ksk-ai-card-thumb-link { flex: none; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; display: block; }
.ksk-ai-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksk-ai-card-thumb-empty { width: 100%; height: 100%; background: var(--ksk-placeholder-bg); }
.ksk-ai-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ksk-ai-card-time { font-size: 11px; font-weight: 700; color: var(--ksk-brand-hover); }
.ksk-ai-card-title { font-size: var(--ksk-fs-card-title); font-weight: var(--ksk-fw-card-title); color: var(--ksk-heading-ink); }
.ksk-ai-card-reason { font-size: var(--ksk-fs-card-desc); color: var(--ksk-text-muted); margin: 0; }
.ksk-ai-card-tip {
  align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--ksk-brand-hover);
  background: var(--ksk-brand-light); border-radius: 4px; padding: 2px 8px;
}
.ksk-ai-card-add {
  align-self: flex-start; border: 1px solid var(--ksk-border); background: var(--ksk-page-bg); color: var(--ksk-text-primary);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-family: var(--ksk-font); cursor: pointer; margin-top: 4px;
}
.ksk-ai-card-add:hover { background: var(--ksk-brand-light); color: var(--ksk-brand); }
.ksk-ai-skipped-note { font-size: 12px; color: var(--ksk-text-muted); }
.ksk-ai-subheading { font-size: 16px; font-weight: 800; color: var(--ksk-heading-ink); margin: 20px 0 10px; }
.ksk-ai-budget-table { width: 100%; border-collapse: collapse; }
.ksk-ai-cost-subhead { margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: var(--ksk-heading-ink); }
.ksk-ai-budget-table td { padding: 6px 0; font-size: var(--ksk-fs-body); border-bottom: 1px solid var(--ksk-border); }
.ksk-ai-budget-value { text-align: right; font-weight: 700; color: var(--ksk-heading-ink); }
/* ★DESIGN_PRICE_IMPL_20260907@5442B8BE §3-2 — 3라벨 골격(색 리터럴 0, tokens-ksk.css
   변수만). row-unknown/-estimate 는 배경만 옅게 구분하고, unknown/tag 는 값 옆의 작은
   상태 표시(pill)다. */
.ksk-ai-budget-row-unknown { background: var(--ksk-placeholder-bg); }
.ksk-ai-budget-unknown { color: var(--ksk-text-muted); font-weight: 700; }
.ksk-ai-budget-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--ksk-brand-light); color: var(--ksk-brand); font-size: 11px; font-weight: 700;
}
.ksk-ai-budget-note { font-size: 12px; color: var(--ksk-text-muted); margin: 8px 0 0; }
.ksk-ai-map { height: 320px; border-radius: var(--ksk-card-radius); overflow: hidden; margin: 16px 0; border: 1px solid var(--ksk-border); }
.ksk-ai-map-legend { margin: -8px 0 16px; font-size: 11.5px; color: var(--ksk-text-muted); }
.ksk-ai-planb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ksk-ai-planb-item { font-size: var(--ksk-fs-body); }
.ksk-ai-planb-item a { color: var(--ksk-brand-hover); font-weight: 700; }
.ksk-ai-planb-why { margin: 2px 0 0; color: var(--ksk-text-muted); font-size: var(--ksk-fs-card-desc); }
.ksk-ai-notes { font-size: var(--ksk-fs-body); color: var(--ksk-text-muted); background: var(--ksk-placeholder-bg); border-radius: 8px; padding: 12px 16px; }
.ksk-ai-disclosure { font-size: 11px; color: var(--ksk-text-muted); }
.ksk-ai-mock-badge { font-size: 11px; font-weight: 700; color: var(--ksk-brand-hover); }

/* ---------- AI추천 로딩 스켈레톤(NOLTRIP-Q6-BUILD §3, 동결스펙 — 결과와 같은 그리드 뼈대,
   가짜 진행률(%) 없음) ---------- */
.ksk-ai-skel-line {
  background: var(--ksk-bg-alt); border-radius: 4px; height: 12px; margin: 0 0 6px;
}
.ksk-ai-skel-line-daytitle { width: 90px; height: 18px; margin-bottom: 10px; }
.ksk-ai-skel-line-time { width: 48px; height: 10px; }
.ksk-ai-skel-line-title { width: 70%; height: 14px; }
.ksk-ai-skel-line-reason { width: 90%; margin-bottom: 0; }
.ksk-ai-skel-thumb { flex: none; width: 84px; height: 84px; border-radius: 8px; background: var(--ksk-bg-alt); }
.ksk-ai-skel-card { pointer-events: none; }

/* ---------- 테마 아치 밴드(R2 부록 A1 — KSK "색다른 주제로 떠나는 여행" 재현) ---------- */
.ksk-theme-grid {
  list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 20px; overflow-x: auto;
}
.ksk-theme-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 96px; text-align: center; }
.ksk-theme-item a { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ksk-theme-circle {
  width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ksk-brand-light); color: var(--ksk-brand);
}
.ksk-theme-circle svg { width: 55%; height: 55%; }
.ksk-theme-label { font-size: 12px; font-weight: 500; color: var(--ksk-text-primary); }
.ksk-theme-count { font-size: 11px; color: var(--ksk-text-muted); }

/* ---------- 모바일 개인화 섹션(R2 부록 A3 — KSK 도 데스크톱엔 없고 모바일에만 있음, 동일 비대칭) ---------- */
.ksk-mobile-personal { display: none; }

/* ---------- 카드 그리드(축제·코스·이벤트·뉴스) ---------- */
.ksk-card-grid, .ksk-scroller {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px;
}
.ksk-card-grid-prep { grid-template-columns: repeat(2, 1fr); }
.ksk-card-grid-3 { grid-template-columns: repeat(3, 1fr); } /* AI요약·여행소식 — KSK 실물 3카드 밀도 맞춤(R2) */
.ksk-scroller { grid-auto-flow: column; grid-auto-columns: 200px; overflow-x: auto; grid-template-columns: none; }

.ksk-preview-card { display: block; position: relative; border-radius: var(--ksk-card-radius); overflow: hidden; border: 1px solid var(--ksk-border); }
/* ---------- D-day 배지(HOME-R2 §2 — 실데이터 event_end 기반) ---------- */
.ksk-dday-badge {
  position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700;
  color: var(--ksk-on-brand); background: var(--ksk-brand); border-radius: 999px; padding: 3px 9px;
  z-index: 2;
}
.ksk-preview-thumb { width: 100%; height: var(--ksk-thumb-list-h); object-fit: cover; display: block; background: var(--ksk-bg-alt); }
.ksk-preview-body { padding: 10px 12px; }
.ksk-preview-title {
  font-size: var(--ksk-fs-card-title); font-weight: var(--ksk-fw-card-title); color: var(--ksk-heading-ink);
  margin: 0 0 4px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ksk-preview-meta { font-size: var(--ksk-fs-card-desc); font-weight: var(--ksk-fw-card-desc); color: var(--ksk-text-muted); margin: 0; }

.ksk-prep-card { text-align: center; }

/* ---------- 가로 캐러셀(HOME-Q5 — 축제·여행소식 공통, 3개씩·최대 9개(3페이지),
   더보기 클릭 없이 옆으로 이동. 뷰포트는 overflow-x 네이티브 스크롤+scroll-snap 이라
   좌우 화살표뿐 아니라 터치 스와이프·트랙패드 가로스크롤도 그대로 동작한다.
   js/ksk-home.js initHCarousel 참고. KSK 가로 캐러셀 룩 참고(카드 자체는 기존
   .ksk-preview-card/.ksk-news-card 재사용, 새 스타일은 틀·화살표·점뿐). ---------- */
.ksk-hcarousel { position: relative; padding: 0 0 8px; margin-bottom: 32px; }
.ksk-hcarousel-viewport {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.ksk-hcarousel-viewport::-webkit-scrollbar { display: none; }
.ksk-hcarousel-track { display: flex; width: 100%; }
.ksk-hcarousel-page {
  flex: 0 0 100%; scroll-snap-align: start;
  /* ★BRIEF_CAROUSEL_3TO5_20260907 — 데스크톱 3칸→5칸(제이크 지시). 페이지당 아이템도
     js/ksk-home.js initHCarousel()에서 5개로 맞춰뒀다(대칭). */
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.ksk-hcarousel-nav {
  position: absolute; top: 40%; transform: translateY(-50%); border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; background: var(--ksk-page-bg); box-shadow: var(--ksk-shadow-md);
  color: var(--ksk-text-primary); font-size: 16px; z-index: 5;
}
.ksk-hcarousel-prev { left: -18px; }
.ksk-hcarousel-next { right: -18px; }
.ksk-hcarousel-nav:disabled { opacity: .35; cursor: default; }
.ksk-hcarousel.is-single-page .ksk-hcarousel-nav, .ksk-hcarousel.is-single-page .ksk-dots { display: none; }
.ksk-hcarousel .ksk-dots { margin-top: 12px; }

/* ---------- 여행소식 카드(HOME-CLEANUP §3 — 실제 보도자료, 썸네일 없음 정직) ---------- */
.ksk-news-card {
  background: var(--ksk-placeholder-bg); border-radius: var(--ksk-card-radius);
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.ksk-news-date { font-size: 11px; color: var(--ksk-text-muted); margin: 0; }
.ksk-news-title {
  font-size: var(--ksk-fs-card-title); font-weight: var(--ksk-fw-card-title); color: var(--ksk-heading-ink);
  margin: 0; line-height: 1.35;
}
.ksk-news-summary { font-size: var(--ksk-fs-card-desc); color: var(--ksk-text-muted); margin: 0; flex: 1; }
.ksk-news-link { font-size: 12px; font-weight: 700; color: var(--ksk-brand-hover); align-self: flex-start; margin-top: 4px; }
.ksk-news-link:hover { color: var(--ksk-brand); }

/* ---------- 코스 캐러셀(중앙 확대 원근 — KSK "월간 Best 코스" 재현, 외부 라이브러리 없이
   CSS transform 자체 구현. R2 codex H1-6) ---------- */
.ksk-course-carousel { position: relative; padding: 8px 0 40px; }
.ksk-course-track {
  position: relative; height: 240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.ksk-course-card-abs {
  position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border-radius: var(--ksk-card-radius); overflow: hidden; box-shadow: var(--ksk-shadow-md);
  transition: transform .4s ease, opacity .4s ease;
  background: var(--ksk-placeholder-bg);
}
.ksk-course-card-abs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksk-course-card-abs .ksk-preview-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; color: var(--ksk-on-brand);
  background: var(--ksk-overlay-hero);
}
.ksk-course-card-abs .ksk-preview-title, .ksk-course-card-abs .ksk-preview-meta { color: var(--ksk-on-brand); }
.ksk-course-nav {
  position: absolute; top: 50%; transform: translateY(-50%); border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; background: var(--ksk-page-bg); box-shadow: var(--ksk-shadow-md);
  color: var(--ksk-text-primary); font-size: 16px; z-index: 5;
}
.ksk-course-prev { left: 0; }
.ksk-course-next { right: 0; }
.ksk-dots { display: flex; gap: 2px; justify-content: center; margin: 12px 0 0; padding: 0; list-style: none; }
/* Lighthouse target-size: 시각 점은 6px 유지하되 히트영역은 24x24로 확장(가운데 점만 배경) */
.ksk-dots button {
  width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ksk-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ksk-border); }
.ksk-dots button.is-active::before { background: var(--ksk-brand); }

/* ---------- 통계 스트립(R2 codex H1-4, 실측 수치) ---------- */
.ksk-stats {
  background: var(--ksk-placeholder-bg); padding: 24px 20px; margin: 40px 0 0;
}
.ksk-stats-inner {
  max-width: var(--ksk-desktop-max); margin: 0 auto;
  display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px; text-align: center;
}
.ksk-stat-num { display: block; font-size: 22px; font-weight: var(--ksk-fw-h2); color: var(--ksk-brand-hover); } /* Lighthouse: --ksk-brand(4.05:1)이 --ksk-placeholder-bg 위에서 미달해 --ksk-brand-hover(5.73:1)로 정정 */
.ksk-stat-label { display: block; font-size: 12px; color: var(--ksk-text-muted); margin-top: 2px; }

/* ---------- 푸터(R2 codex H1-5 — KSK 2단 구조 재현, 놀루트립 자체 브랜드.
   ★한국관광공사 로고·기관명·인증배지 복제 없음 — 실존 페이지 링크만 나열) ---------- */
.ksk-footer { background: var(--ksk-bg-alt); margin-top: 0; position: relative; }
.ksk-footer-top, .ksk-footer-cols, .ksk-footer-bottom {
  max-width: var(--ksk-desktop-max); margin: 0 auto; padding: 20px 20px;
}
.ksk-footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding-top: 28px; }
.ksk-footer-brand { flex: 1; min-width: 240px; }
.ksk-footer-logo { font-weight: 800; font-size: 16px; color: var(--ksk-heading-ink); margin: 0 0 8px; }
.ksk-footer-line { font-size: 12px; color: var(--ksk-text-muted); margin: 0 0 4px; }
.ksk-footer-guide-link { font-size: 12px; font-weight: 700; color: var(--ksk-brand-hover); white-space: nowrap; }
.ksk-footer-guide-link:hover { color: var(--ksk-brand); }
.ksk-footer-divider { max-width: var(--ksk-desktop-max); margin: 0 auto; border-top: 1px solid var(--ksk-border); }
.ksk-footer-copy { font-size: 11px; color: var(--ksk-text-muted); margin: 0 0 4px; } /* Lighthouse 접근성: text-muted-alt(#71717c)가 --ksk-bg-alt 위에서 4.23:1로 미달해 text-muted(#666666, 5.04:1)로 정정 */
.ksk-footer-bottom { padding-bottom: 32px; }
.ksk-footer-cols { display: flex; gap: 40px; flex-wrap: wrap; }
.ksk-footer-col-title { font-size: 12px; font-weight: 700; color: var(--ksk-heading-ink); margin: 0 0 10px; }
.ksk-footer-links { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ksk-footer-links a { font-size: 12px; color: var(--ksk-text-primary); }
.ksk-footer-links a:hover { color: var(--ksk-brand); }
.ksk-footer-badge-col { display: flex; align-items: flex-start; margin-left: auto; }
.ksk-footer-badge {
  font-size: 11px; font-weight: 700; color: var(--ksk-text-muted); border: 1px solid var(--ksk-border);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.ksk-scroll-top {
  position: fixed; right: 24px; bottom: 24px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--ksk-border); background: var(--ksk-page-bg); box-shadow: var(--ksk-shadow-md);
  color: var(--ksk-text-primary); font-size: 16px; cursor: pointer; z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ksk-scroll-top.is-visible { opacity: 1; pointer-events: auto; }

/* ---------- 모바일 390px ---------- */
@media (max-width: 480px) {
  .ksk-gnb-inner { padding: 10px 14px; gap: 12px; position: relative; }
  .ksk-gnb-hamburger { display: flex; }
  /* ★BRIEF_HOME_FIX_SEARCH_HERO_20260907 [1] — 공간 부족: 기본 접힘(폭 0), 폼 내부에
     포커스가 있으면(:focus-within — input 포커스든 제출버튼 포커스든) 펼침. 새 클래스·JS
     상태 없이 CSS만으로 폈다 접었다(js는 첫 클릭시 focus()만 준다 — initGnbSearch). */
  .ksk-gnb-search-input {
    width: 0; padding: 0; margin-right: 0; border-width: 0; opacity: 0;
    transition: width .2s ease, opacity .2s ease, padding .2s ease, margin .2s ease;
  }
  .ksk-gnb-search:focus-within .ksk-gnb-search-input {
    width: 120px; padding: 0 10px; margin-right: 6px; border-width: 1px; opacity: 1;
  }
  .ksk-gnb-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--ksk-gnb-bg); border-bottom: 1px solid var(--ksk-border);
    box-shadow: var(--ksk-shadow-sm); z-index: 60;
  }
  .ksk-gnb-menu.is-open { display: flex; }
  .ksk-gnb-menu a { padding: 12px 16px; border-bottom: 1px solid var(--ksk-border); }
  /* 모바일에서는 "여행" 드롭다운을 별도 팝업이 아니라 펼침 목록 안에 그대로 이어 붙인다 */
  .ksk-gnb-dropdown-btn { width: 100%; padding: 12px 16px; border-bottom: 1px solid var(--ksk-border); justify-content: space-between; }
  .ksk-gnb-dropdown-list { position: static; box-shadow: none; border: none; border-radius: 0; padding: 0; background: var(--ksk-bg-alt); }
  .ksk-gnb-dropdown-list a { padding-left: 32px; }
  .ksk-gamemap-promo { padding: 0 14px; margin: 24px auto; }
  .ksk-gamemap-promo-inner { flex-direction: column; text-align: center; padding: 20px; gap: 12px; }
  .ksk-gamemap-promo-mascot { width: 72px; height: 72px; }
  .ksk-hero { padding: 0 12px; margin-top: 12px; }
  .ksk-hero-row { flex-direction: column; }
  .ksk-hero-slide { height: 220px; }
  .ksk-hero-side { width: 100%; flex-direction: row; }
  .ksk-hero-side-card { width: 100%; height: 96px; flex: 1; }
  .ksk-hero-search { margin-top: -22px; max-width: 100%; }
  .ksk-section, .ksk-services { padding: 0 14px; }
  .ksk-section-heading { font-size: 18px; margin: 32px 0 16px; }
  .ksk-section-headrow { margin: 32px 0 16px; }
  .ksk-services-grid { grid-template-columns: repeat(4, 1fr); gap: 8px 4px; row-gap: 16px; }
  .ksk-service-circle { width: 52px; height: 52px; }
  .ksk-card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ksk-card-grid-prep { grid-template-columns: 1fr; }
  .ksk-card-grid-3 { grid-template-columns: 1fr; }
  .ksk-scroller { grid-auto-columns: 150px; }
  .ksk-course-track { height: 180px; }
  .ksk-course-card-abs { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  /* ★BRIEF_CAROUSEL_3TO5_20260907 §모바일 — 의도적으로 3칸 그대로 둔다(값 변경 아님).
     페이지당 아이템 수는 5개로 늘었지만(js) 이 그리드는 여전히 3열이라 남는 2개가
     자동으로 2번째 줄로 랩된다(카드 1개 폭·탭 가능 크기는 오늘과 완전히 동일 —
     "모바일은 탭 가능 크기 유지" 요구를 CSS 그리드 자동 줄바꿈만으로 충족). */
  .ksk-hcarousel-page { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ksk-hcarousel-nav { width: 28px; height: 28px; font-size: 14px; opacity: .85; }
  .ksk-hcarousel-prev { left: 2px; }
  .ksk-hcarousel-next { right: 2px; }
  .ksk-hcarousel .ksk-preview-body { padding: 6px 8px; }
  .ksk-hcarousel .ksk-preview-title { font-size: 11px; }
  .ksk-hcarousel .ksk-preview-meta { font-size: 10px; }
  .ksk-hcarousel .ksk-news-card { padding: 8px; gap: 4px; }
  .ksk-hcarousel .ksk-news-title { font-size: 11px; }
  .ksk-hcarousel .ksk-news-summary {
    font-size: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ksk-hcarousel .ksk-news-link { font-size: 10px; }
  .ksk-stats-inner { gap: 20px; }
  .ksk-stat-num { font-size: 18px; }
  .ksk-footer-top { flex-direction: column; gap: 12px; }
  .ksk-footer-cols { gap: 24px; }
  .ksk-footer-badge-col { margin-left: 0; }
  .ksk-scroll-top { right: 14px; bottom: 14px; width: 36px; height: 36px; }
  .ksk-mobile-personal { display: block; }
  .ksk-theme-circle { width: 64px; height: 64px; }
  .ksk-theme-item { width: 80px; }
  .ksk-ai-reco-row, .ksk-ai-reco-companion-group { flex-direction: column; gap: 12px; }
  .ksk-ai-reco-field { min-width: 0; }
  .ksk-ai-card { flex-direction: row; }
  .ksk-ai-card-thumb-link { width: 64px; height: 64px; }
}