.results-stage { max-width: 720px; margin: 0 auto; padding: 18px 14px 48px; }
.results-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.results-select, .results-input { min-height: 38px; border: 1px solid var(--ksk-border); border-radius: 10px; padding: 7px 10px; background: var(--ksk-page-bg); color: var(--ink); font: inherit; }
.results-input { flex: 1 1 220px; }
.results-heading { margin: 4px 0 12px; font-size: 20px; }
.results-count { color: var(--ksk-text-muted); font-size: 13px; margin: 0 0 12px; }
.results-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; }
.results-tab { border: 1px solid var(--ksk-border); background: var(--ksk-page-bg); color: var(--ink); border-radius: 18px; padding: 6px 11px; white-space: nowrap; font: inherit; cursor: pointer; }
.results-tab.is-active { background: var(--brand); color: var(--ksk-on-brand); border-color: var(--brand); }
.results-list { display: flex; flex-direction: column; gap: 10px; }
.results-card { display: flex; gap: 11px; align-items: center; padding: 10px; background: var(--card-bg); border: 1px solid var(--ksk-border); border-radius: 12px; color: var(--ink); text-decoration: none; }
.results-card:active { background: var(--ksk-bg-alt); }
.results-thumb, .results-noimg { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }
.results-noimg { display: flex; align-items: center; justify-content: center; background: var(--ksk-placeholder-bg); font-size: 26px; }
.results-card-body { min-width: 0; }
.results-card-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-card-meta, .results-card-address { margin: 2px 0; color: var(--ksk-text-muted); font-size: var(--ksk-fs-body); line-height: var(--ksk-lh-body); }
.results-badge { display: inline-block; margin-right: 5px; padding: 2px 7px; border-radius: 12px; background: var(--ksk-brand-light); color: var(--brand-dark); }
.results-loading, .results-empty { padding: 24px 4px; color: var(--ksk-text-muted); }
.results-error { padding: 24px 4px; color: #b3403a; }
.results-note { margin: 0 0 12px; padding: 9px 10px; background: var(--ksk-bg-alt); border-radius: 10px; color: var(--ksk-text-muted); font-size: 12.5px; line-height: 1.45; }
.results-sigungu { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* ★ 2026-09-06 KSK-LOOK-LIST-DETAIL R2(codex R1 REVISE 수리) — 이 블록은 --ksk-* 토큰 변수만 쓴다(폴백 색상 리터럴 0개). 토큰에 없는 비활성 색(예: 그레이) 은 새 토큰을 여기서 만들지 않고(worker-4 영역) 기존 --ksk-text-muted 에 opacity 를 결합해 표현했다 — EXEC 에 "필요 토큰 후보(--ksk-disabled)"로 별도 기재. */
.results-filter-panel { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 12px; border: 1px solid var(--ksk-border); border-radius: var(--ksk-card-radius); background: var(--ksk-page-bg); }
.results-sort { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--ksk-border); }
.results-sort-btn { border: none; background: none; padding: 8px 12px; font: inherit; font-size: var(--ksk-fs-total-count); font-weight: var(--ksk-fw-total-count); color: var(--ksk-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.results-sort-btn.is-active { color: var(--ksk-brand); border-bottom-color: var(--ksk-brand); }
.results-sort-btn.is-disabled, .results-sort-btn:disabled { color: var(--ksk-text-muted); opacity: 0.5; cursor: not-allowed; }
.results-pagination { display: flex; gap: 6px; justify-content: center; margin: 18px 0 4px; flex-wrap: wrap; }
.results-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--ksk-border); border-radius: 8px; color: var(--ksk-text-primary); text-decoration: none; font-size: 13px; }
.results-page-link.is-current { background: var(--ksk-brand); color: var(--ksk-page-bg); border-color: var(--ksk-brand); }
.results-page-link.is-disabled { color: var(--ksk-text-muted); opacity: 0.5; pointer-events: none; }
.results-heading { font-family: var(--ksk-font); }
.results-card-title { font-family: var(--ksk-font); font-size: var(--ksk-fs-card-title); font-weight: var(--ksk-fw-card-title); color: var(--ksk-text-primary); }

/* ★ 2026-09-06 KSK-LOOK-LIST-DETAIL R3(master 10:45 지시) — 구블록(옛 1~22행) 색 리터럴도 이번에 전량 var(--ksk-*) 로 승격. #b3403a(.results-error, 에러 텍스트)만 브랜드와 무관한 기존 의미색이라 제외(status.css danger 색과 동일 판단 근거 — EXEC 기재). */

/* 데스크톱 그리드(KSK처럼 좌=본문 카드 리스트 · 우=필터 사이드바). ★R3 수정: grid-column만 지정하는 방식은
   auto-placement 커서가 DOM 순서대로 전진만 하고(sparse든 dense든) 후행 컬럼1 항목을 앞선 행으로 되돌리지
   못해 컬럼1에 빈 행(사이드바 여백 버그)이 생겼다(1440px 렌더 실측 재현 — EXEC 기재). 수리 = 사이드바
   항목(filterPanel·tabs·sigungu)을 results.js에서 <aside class="results-sidebar"> 하나로 묶고, 그 하나만
   grid-row:2/-1 로 명시 배치해 컬럼1의 자동배치 커서를 사이드바 행 수와 무관하게 만들었다(표준 홀리그레일
   사이드바 패턴). */
@media (min-width: 1024px) {
  .results-stage { max-width: var(--ksk-desktop-max); display: grid; grid-template-columns: 1fr 300px; column-gap: 32px; align-items: start; }
  .results-heading { font-size: var(--ksk-fs-h2); font-weight: var(--ksk-fw-h2); margin: var(--ksk-mg-h2); }
  .results-stage > .results-heading:first-of-type { grid-column: 1 / -1; }
  .results-main { grid-column: 1; grid-row: 2; }
  .results-sidebar { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 12px; align-self: start; }
  .results-sidebar .results-filter-panel, .results-sidebar .results-tabs, .results-sidebar .results-sigungu { flex-direction: column; align-items: stretch; }
  .results-card { align-items: flex-start; }
  .results-thumb, .results-noimg { width: var(--ksk-thumb-list-w); height: var(--ksk-thumb-list-h); }
}

/* ★BRIEF_LOOK_DUALIZE_20260907 §A/§B/§C — region(가볼래-터·공간축)/festival(축제달력·시간축)
   시각 이원화. 신규 색은 tokens-ksk.css의 --ksk-accent-festival* 뿐(대비비는 그 파일에 기재),
   이 파일은 var()만 쓴다. body[data-results-page] 스코프로만 분기(results.js 최소변경). */
.results-intro { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--ksk-card-radius); }
.results-intro-icon { flex: none; display: flex; width: 26px; height: 26px; }
.results-intro-icon svg { width: 100%; height: 100%; }
.results-intro-text { margin: 0; font-size: var(--ksk-fs-body); color: var(--ksk-text-muted); }

/* §A region = 기존 브랜드 계열 유지 */
[data-results-page="region"] .results-intro { background: var(--ksk-brand-light); }
[data-results-page="region"] .results-intro-icon { color: var(--ksk-brand); }

/* §A·§C festival = 신규 액센트 1종(밴드·활성탭·배지에만, 본문 가독성 토큰 무변경) */
[data-results-page="festival"] .results-intro { background: var(--ksk-accent-festival-light); }
[data-results-page="festival"] .results-intro-icon { color: var(--ksk-accent-festival); }
[data-results-page="festival"] .results-tab.is-active { background: var(--ksk-accent-festival); border-color: var(--ksk-accent-festival); }
[data-results-page="festival"] .results-sort-btn.is-active { color: var(--ksk-accent-festival); border-bottom-color: var(--ksk-accent-festival); }

/* §B region 카드 = 카테고리 배지 + 주소 강조(구조는 results.js 기존 유지, CSS만) */
.results-card--region .results-badge { font-weight: 700; }
.results-card--region .results-card-address { color: var(--ksk-text-primary); font-weight: 600; }

/* §B festival 카드 = 기간 강조 + 진행중/D-N/종료 배지(제목 위, results.js festivalBadge()) */
.results-card-period { display: inline-block; margin: 0 0 4px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.results-card-period--ongoing { background: var(--ksk-accent-festival); color: var(--ksk-on-brand); }
.results-card-period--upcoming { background: var(--ksk-accent-festival-light); color: var(--ksk-accent-festival); }
.results-card-period--ended { background: var(--ksk-bg-alt); color: var(--ksk-text-muted); }
.results-card--festival .results-card-meta { font-weight: 600; }

/* ★BRIEF_THEME_MAP_20260907 — theme.html 전용 "리스트+지도 한 화면". 신규 색 리터럴 0
   (tokens-ksk.css 변수만). 모바일(기본, 이 규칙) = 전폭 스택, 필터→지도→리스트 순서로
   DOM 그대로 쌓인다(results.js가 sidebar 다음·main 앞에 삽입). 지도는 카카오 SDK가
   컨테이너 높이를 실제로 채워야 렌더되므로(내용 기반 auto-height 불가) min-height를
   명시한다(확대·축소 조작이 가능한 최소 크기). */
.results-theme-map-wrap {
  min-height: 320px; margin: 0 0 20px; border: 1px solid var(--ksk-border);
  border-radius: var(--ksk-card-radius); overflow: hidden; background: var(--ksk-page-bg);
}

/* 데스크톱 = 리스트(1fr)·필터 사이드바(260px)·지도(360px, sticky) 3열. 기존 2열
   그리드(45행 상당 @media 블록)는 region/festival 그대로 두고, theme 페이지에서만
   3열로 넓힌다(body[data-results-page="theme"] 스코프 — results.js 최소변경 원칙과
   동일하게 CSS도 스코프 분기만 추가). "지도 sticky 패널" 요구 — 리스트를 스크롤해도
   지도가 화면에 붙어있게 실제 position:sticky를 쓴다(기존 사이드바는 grid 안에서
   align-self:start만 써서 스크롤 추종은 안 함 — 지도는 명시적으로 다르게 처리). */
@media (min-width: 1024px) {
  [data-results-page="theme"] .results-stage { grid-template-columns: 520px 240px 1fr; }
  [data-results-page="theme"] .results-main { grid-column: 3; }
  [data-results-page="theme"] .results-theme-map-wrap {
    grid-column: 1; grid-row: 2; margin: 0; position: sticky; top: 20px;
    min-height: 760px; align-self: start;
  }
}