/*
Theme Name: kpopsite Renewal
Theme URI: https://kpopsite.com
Author: 케이팝사이트
Description: 콘서트·공연 예매정보 통합 조회 서비스 전용 커스텀 테마. 공연 캘린더 + 티켓오픈 D-day가 본체인 데이터 서비스 UI. 클래식 테마, 페이지빌더/jQuery 미사용. 포스터·장르색·D-day 배지 중심 디자인.
Version: 1.0.0-dev15
Requires PHP: 8.3
Text Domain: kpopsite
*/

/* ==========================================================
   디자인 시스템 — CSS 변수
   원칙: 폰트 굵기 400/500 두 단계, 카드 0.5px 테두리·라운드 12px,
        무거운 그림자·과한 애니메이션 금지, 시스템 폰트(웹폰트 금지).
   ========================================================== */
:root {
  /* 표면 */
  --c-bg: #fbfbfa;            /* 페이지 배경 — 아주 옅은 회색 */
  --c-card: #ffffff;         /* 카드 흰색 */
  --surface-1: #f4f3f0;      /* 칩·플레이스홀더·연한 배경 */
  --c-line: #e7e5e0;         /* 테두리 0.5px */
  --c-line-strong: #d5d2ca;  /* hover 시 강조 테두리 */

  /* 텍스트 */
  --c-text: #1a1a18;         /* 본문 */
  --c-muted: #5f5e5a;        /* 보조 */
  --c-hint: #888780;         /* 힌트 */

  /* 브랜드/인터랙션 (링크·버튼) — 장르색과 구별되는 브랜드 인디고 */
  --c-accent: #5b4bc4;
  --c-accent-weak: #efedfb;

  /* 장르 기본(무용·국악·기타·무장르) */
  --gm: #8c8b85; --gb: var(--surface-1); --gf: #5f5e5a;

  /* 타이포 — 시스템 폰트 스택 (웹폰트 금지: LCP 예산) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard Variable", Pretendard, "Malgun Gothic", "맑은 고딕",
    "Segoe UI", Roboto, "Noto Sans KR", sans-serif;

  /* 치수 */
  --w-max: 1100px;
  --gap: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --touch: 44px;
}

/* ==========================================================
   장르 색 — 배지/dot/강조에 사용 (지시서 §1-1)
   .gc-* 를 요소에 부여하면 --gm(메인)/--gb(연한배경)/--gf(진한글자) 노출.
   ========================================================== */
.gc-musical   { --gm:#7f77dd; --gb:#eeedfe; --gf:#3c3489; }
.gc-concert   { --gm:#1d9e75; --gb:#e1f5ee; --gf:#0f6e56; }
.gc-classical { --gm:#185fa5; --gb:#e6f1fb; --gf:#0c447c; }
.gc-theater   { --gm:#d85a30; --gb:#faece7; --gf:#993c1d; }
.gc-dance, .gc-pop-dance, .gc-gugak, .gc-complex, .gc-circus-magic, .gc-etc {
  --gm:#8c8b85; --gb:var(--surface-1); --gf:#5f5e5a;
}

/* ==========================================================
   리셋(최소) + 베이스 — 모바일 퍼스트
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; font-weight: 500; letter-spacing: -.01em; }
h1 { font-size: 1.375rem; }   /* 22px */
h2 { font-size: 1.125rem; }   /* 18px */
h3 { font-size: 1rem; }
strong, b { font-weight: 500; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 var(--gap); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-accent); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

/* 라인 아이콘 (outline SVG, currentColor) — 이모지 금지 */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ==========================================================
   헤더 / 내비게이션
   ========================================================== */
.site-header { border-bottom: .5px solid var(--c-line); background: var(--c-bg); position: relative; z-index: 30; }
.hdr { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.brand { margin: 0; padding: 10px 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -.02em; flex: 0 0 auto; }
.brand a { color: var(--c-text); display: block; }
.brand img { display: block; width: 168px; height: 32px; }
.brand a b { color: var(--c-accent); font-weight: 500; }

/* A-2 유틸리티 바 — 주색 짙은 변형 배경, 높이 고정(CLS 0) */
.util-bar { background: #453a99; color: #e6e2fb; font-size: .78rem; }
.util-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.util-src { margin: 0; opacity: .92; }
.util-tool { color: #fff; font-weight: 600; white-space: nowrap; }
.util-tool:hover { text-decoration: underline; }

/* A-3 메가 드롭다운 — CSS only(hover + focus-within). 외부 JS 0건 */
.gnb { flex: 1 1 auto; min-width: 0; }
.mega { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mega-i { position: relative; }
.mega-top {
  display: flex; align-items: center; min-height: var(--touch); padding: 0 13px;
  color: var(--c-muted); font-weight: 500; font-size: .925rem; white-space: nowrap;
}
.mega-i:hover > .mega-top, .mega-i:focus-within > .mega-top, .current-menu-item > .mega-top {
  color: var(--c-accent); text-decoration: none; box-shadow: inset 0 -2px 0 var(--c-accent);
}
.mega-panel {
  position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 240px; max-width: min(92vw, 340px);
  background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(26,26,24,.13);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
/* 우측 항목의 패널이 화면 밖으로 나가지 않게(§1-B K 실측 결함) */
.mega-i:nth-last-child(-n+3) .mega-panel { left: auto; right: 0; }
.mega-i:hover > .mega-panel, .mega-i:focus-within > .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-panel ul { list-style: none; margin: 0; padding: 0; max-height: min(70vh, 460px); overflow-y: auto; }
.mega-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--c-text); font-size: .875rem; line-height: 1.35;
}
.mega-panel a:hover { background: var(--surface-1); text-decoration: none; color: var(--c-accent); }
.mega-panel em { font-style: normal; color: var(--c-hint); font-size: .78rem; flex: 0 0 auto; }

/* 모바일 햄버거 — checkbox 토글(JS 0건) */
.mnav-btn, .mnav, .mnav-scrim { display: none; }
/* 체크박스는 display:none 대신 화면 밖으로 — [hidden]/display:none은 :checked 형제
   선택자가 적용되지 않는 사례가 있다(2026-08-04 실측). */
.mnav-t { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kw-strip { display: none; }

/* ==========================================================
   공통 컴포넌트
   ========================================================== */
.section { margin: 32px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.section-head .sub { color: var(--c-muted); font-size: .85rem; font-weight: 400; margin: 2px 0 0; }
.section-head .more { font-size: .85rem; white-space: nowrap; font-weight: 500; }
.screen-title { font-size: 1.5rem; }

.card {
  background: var(--c-card); border: .5px solid var(--c-line);
  border-radius: var(--radius); padding: 16px;
}

/* 배지(알약형) — 굵기 500, 검정 글자 금지(WCAG AA, 라벨 텍스트 항상 병기) */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.badge-genre { background: var(--gb); color: var(--gf); }
.badge-fest  { background: #fff4e0; color: #8a5a00; }
/* D-day 배지 색 (지시서 §1-2 — 티켓오픈 임박도) */
.badge-dday-near { background: #fcebeb; color: #a32d2d; }  /* D-3 이내 */
.badge-dday-warn { background: #faeeda; color: #854f0b; }  /* D-7 이내 */
.badge-dday-far  { background: var(--surface-1); color: #5f5e5a; }  /* 여유 */
.badge-dday-end  { background: var(--surface-1); color: var(--c-hint); }  /* 종료/진행중 */

.notice-empty {
  padding: 32px 16px; text-align: center; color: var(--c-muted);
  background: var(--surface-1); border-radius: var(--radius); font-size: .95rem;
  border: .5px solid var(--c-line);
}
.src-note { font-size: .8rem; color: var(--c-hint); margin-top: 8px; line-height: 1.6; }

/* 공연 사실 데이터 표 (2026-08-19, 산문 소개 폐지분 대체) */
.fact-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.fact-list dt { color: var(--c-hint); font-size: .9rem; white-space: nowrap; }
.fact-list dd { margin: 0; font-size: .95rem; word-break: keep-all; }
@media (max-width: 480px) {
	.fact-list { grid-template-columns: 1fr; gap: 2px 0; }
	.fact-list dd { margin-bottom: 8px; }
}

/* 단독 포스터 컨테이너 (상세 등) — 지정 비율로 CLS 방지 */
.poster { aspect-ratio: 3 / 4; background: var(--surface-1); border-radius: var(--radius); overflow: hidden; }
.poster img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   포스터 카드 (핵심 컴포넌트) — 지시서 §2
   ========================================================== */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; list-style: none; margin: 0; padding: 0;
}
.pcard {
  display: flex; flex-direction: column;
  background: var(--c-card); border: .5px solid var(--c-line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease;
}
.pcard:hover { border-color: var(--c-line-strong); text-decoration: none; }
.pcard-figure { position: relative; aspect-ratio: 3 / 4; background: var(--surface-1); }
.pcard-figure img { width: 100%; height: 100%; object-fit: cover; }
/* 포스터 없음 — 장르색 연한 배경 + 라인 아이콘 (깨진 이미지 금지) */
.pcard-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--gb); color: var(--gm); }
.pcard-ph .icon { width: 34px; height: 34px; stroke-width: 1.4; opacity: .75; }
/* 상단 배지 열: 좌 D-day / 우 장르 */
.pcard-top {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
  pointer-events: none;
}
.pcard-top .badge { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pcard-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.pcard-title {
  font-weight: 500; color: var(--c-text); font-size: .9rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard:hover .pcard-title { color: var(--c-accent); }
.pcard-line { font-size: .78rem; color: var(--c-muted); display: flex; align-items: center; gap: 4px; overflow: hidden; }
.pcard-line .icon { width: 13px; height: 13px; color: var(--c-hint); }
.pcard-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-open { font-size: .78rem; color: var(--gf); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.pcard-open .icon { width: 13px; height: 13px; }
.pcard-count { font-variant-numeric: tabular-nums; color: var(--c-muted); font-weight: 400; }

/* ==========================================================
   티켓오픈 D-day 목록 (미니 리스트 — 홈 사이드/상세)
   ========================================================== */
.dday-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dday-item { display: flex; align-items: center; gap: 12px; min-height: var(--touch); padding: 6px 0; border-bottom: .5px solid var(--c-line); }
.dday-item:last-child { border-bottom: 0; }
.dday-item.card { border: .5px solid var(--c-line); padding: 12px 14px; margin-bottom: 10px; border-radius: var(--radius); }
.dday-item .badge { flex: 0 0 auto; }
.dday-item .info { flex: 1 1 auto; min-width: 0; }
.dday-item .info .t { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.dday-item .info .t:hover { color: var(--c-accent); }
/* 예매처 원문 회차 표기(2차 티켓오픈·마지막 티켓오픈·멤버십 선예매 등).
   .t가 nowrap+ellipsis라 인라인 텍스트로 두면 잘린다 — 별도 칩으로 띄운다. */
.dday-item .info .open-type {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  color: var(--c-accent); background: var(--c-accent-weak); border-radius: var(--radius-sm);
}
.dday-item .info .m { font-size: .8rem; color: var(--c-muted); }
.dday-item .count { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--c-muted); }

/* ==========================================================
   공연 캘린더 (실제 <table> — §SEO 시맨틱) + 장르 dot
   ========================================================== */
.cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-nav a, .cal-nav strong {
  display: flex; align-items: center; justify-content: center;
  min-width: var(--touch); min-height: var(--touch); padding: 0 12px;
  border-radius: var(--radius-sm); font-weight: 500;
}
.cal-nav a { background: var(--surface-1); color: var(--c-text); }
.cal-nav a:hover { text-decoration: none; background: var(--c-line); }
.cal-wrap { overflow-x: auto; border: .5px solid var(--c-line); border-radius: var(--radius); }
table.calendar { table-layout: fixed; min-width: 640px; }
table.calendar caption { text-align: left; font-weight: 500; margin-bottom: 6px; caption-side: top; }
table.calendar th {
  padding: 9px 6px; font-size: .78rem; font-weight: 500; color: var(--c-muted);
  border-bottom: .5px solid var(--c-line); background: var(--surface-1);
}
table.calendar th.sun, table.calendar td.sun .day { color: #c0392b; }
table.calendar td {
  vertical-align: top; height: 92px; padding: 6px;
  border: .5px solid var(--c-line); font-size: .78rem;
}
table.calendar td.out { background: #faf9f7; }
table.calendar td.today { outline: 2px solid var(--c-accent); outline-offset: -2px; }
table.calendar td.has a.day-link { color: inherit; }
table.calendar .day { font-weight: 500; display: block; margin-bottom: 4px; }
table.calendar td.today .day { color: var(--c-accent); }
table.calendar ul { list-style: none; margin: 0; padding: 0; }
table.calendar li { overflow: hidden; margin-bottom: 2px; }
/* 장르 dot + 공연명 1줄 (지시서 §3-3) */
table.calendar li a {
  color: var(--c-text); display: flex; align-items: center; gap: 5px;
  min-height: var(--touch); line-height: 1.4; padding: 4px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.calendar li a:hover { text-decoration: none; color: var(--c-accent); }
table.calendar li a .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdot { width: 7px; height: 7px; border-radius: 999px; background: var(--gm); flex: 0 0 auto; }
.gdot-open { width: 8px; height: 8px; border-radius: 999px; border: 2px solid var(--c-accent); background: transparent; box-sizing: border-box; flex: 0 0 auto; }
table.calendar li.more { color: var(--c-hint); font-size: .72rem; padding: 1px 2px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 12px 0 0; font-size: .78rem; color: var(--c-muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* 장르 필터 칩 (캘린더) — 장르색 칩 */
.genre-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.chip {
  min-height: var(--touch); display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px; border: .5px solid var(--c-line); border-radius: 999px;
  font-size: .85rem; font-weight: 500; color: var(--c-text); background: var(--c-card);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--gm); }
.chip.all::before { display: none; }
.chip:hover { text-decoration: none; border-color: var(--gm); }
.chip.on { background: var(--gb); color: var(--gf); border-color: transparent; }
.chip.all.on { background: var(--c-accent); color: #fff; }

/* ==========================================================
   공연 상세 / 허브
   ========================================================== */
.perf-layout { display: grid; gap: 20px; }
.perf-head-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.perf-meta { border: .5px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.perf-meta th {
  width: 96px; text-align: left; padding: 11px 14px;
  color: var(--c-muted); font-weight: 500; font-size: .85rem;
  border-bottom: .5px solid var(--c-line); vertical-align: top; background: var(--surface-1);
}
.perf-meta td { padding: 11px 14px; border-bottom: .5px solid var(--c-line); font-size: .925rem; }
.perf-meta tr:last-child th, .perf-meta tr:last-child td { border-bottom: 0; }
.btn-book {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--touch); padding: 0 22px; margin-top: 10px;
  background: var(--c-accent); color: #fff; font-weight: 500;
  border-radius: var(--radius-sm);
}
.btn-book:hover { text-decoration: none; opacity: .92; }
.btn-book .icon { width: 16px; height: 16px; }

/* 관련 공연 그리드 (구 .perf-grid — 포스터 카드로 통일) */
.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }

/* ==========================================================
   본문(매거진/허브/정적) — 시맨틱 계층
   ========================================================== */
.entry-content { max-width: 760px; }
.entry-content { font-size: 1rem; }
.entry-content h2 { margin-top: 1.7em; padding-bottom: .3em; border-bottom: .5px solid var(--c-line); }
.entry-content h3 { margin-top: 1.4em; }
.entry-content table th, .entry-content table td { border: .5px solid var(--c-line); padding: 9px 11px; font-size: .925rem; }
.entry-content table th { background: var(--surface-1); font-weight: 500; }
.entry-content img { border-radius: var(--radius); }
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.entry-meta { color: var(--c-muted); font-size: .85rem; margin-bottom: 20px; }

/* ==========================================================
   푸터
   ========================================================== */
/* A-5 메가 푸터 — 짙은 주색 배경, 대비 AA */
.site-footer { margin-top: 0; background: #2b2456; color: #d7d2f0; }
.site-footer .wrap { padding-top: 34px; padding-bottom: 28px; }
.fgrid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 26px 22px; }
.fgrid > * { min-width: 0; }
.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol li { margin: 0 0 2px; }
.fcol a { display: inline-flex; align-items: center; gap: 6px; color: #d7d2f0; font-size: .84rem; line-height: 1.5; padding: 4px 0; }
.fcol a:hover { color: #fff; text-decoration: underline; }
.fcol em { font-style: normal; color: #9b93cc; font-size: .76rem; }
.ftitle { margin: 0 0 8px; font-size: .875rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.ftitle-2 { margin-top: 16px; }
.flogo { display: block; margin-bottom: 10px; }
.fdesc { margin: 0 0 12px; font-size: .82rem; line-height: 1.65; color: #b9b2e0; max-width: 42ch; }
.fmeta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: .8rem; }
.fmeta dt { color: #9b93cc; }
.fmeta dd { margin: 0; color: #e7e3fa; }
.fregion { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.fregion li { display: flex; justify-content: space-between; gap: 6px; font-size: .82rem; padding: 3px 0; color: #d7d2f0; }
.fregion em { font-style: normal; color: #9b93cc; }
.fmore { display: inline-block; margin-top: 10px; font-size: .8rem; color: #b8afe8; font-weight: 600; }
.fbottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.footer-note { font-size: .78rem; color: #a49cd4; line-height: 1.7; margin: 0 0 8px; max-width: 92ch; }
.footer-copy { font-size: .78rem; color: #a49cd4; margin: 0; }

/* A-6 모바일 하단 고정 바 — 데스크탑에서는 숨김 */
.mbar { display: none; }

/* ==========================================================
   매거진 아카이브 (/magazine/)
   ========================================================== */
.mag-intro { color: var(--c-muted); font-size: .95rem; margin: 6px 0 22px; max-width: 64ch; }
.mag-list { display: grid; gap: 12px; }
.mag-card { padding: 0; display: flex; overflow: hidden; }
/* 세로 포스터 상단 보존 — object-position: top (§B2) */
.mag-card-thumb { flex: 0 0 40%; max-width: 220px; align-self: stretch; overflow: hidden; background: var(--surface-1); }
.mag-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mag-card-body { flex: 1 1 auto; min-width: 0; padding: 16px 18px; }
.mag-card:not(:has(.mag-card-thumb)) .mag-card-body { padding: 18px; }
.mag-card-title { font-size: 1.08rem; line-height: 1.4; margin: 0 0 6px; }
.mag-card-title a { color: var(--c-text); }
.mag-card-title a:hover { color: var(--c-accent); }
.mag-card-excerpt { color: var(--c-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 8px; }
.mag-card .entry-meta { font-size: .8rem; color: var(--c-hint); margin: 0; }
/* 단일글 대표 이미지 — 중앙 정렬 600px, 세로 포스터 상단 보존 */
.entry-thumb { max-width: 600px; margin: 20px auto 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--surface-1); }
.entry-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pagination { margin: 26px 0 8px; }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; justify-content: center; }
.pagination a, .pagination span { display: inline-block; min-width: 40px; text-align: center; padding: 8px 10px; border: .5px solid var(--c-line); border-radius: var(--radius-sm); font-size: .9rem; }
.pagination .current { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.pagination a:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }

/* ==========================================================
   데스크탑 (768px+)
   ========================================================== */
@media (min-width: 768px) {
  h1 { font-size: 1.6rem; }
  .screen-title { font-size: 1.9rem; }
  h2 { font-size: 1.3rem; }
  .site-header .wrap { flex-wrap: nowrap; }
  .gnb { flex: 1 1 auto; }
  .pgrid, .perf-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
  .perf-layout { grid-template-columns: 320px 1fr; align-items: start; }
  .front-hero { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
}

/* 모바일 — 포스터 그리드 2열 유지 (지시서 §5) */
@media (max-width: 767px) {
  .pgrid, .perf-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* 매거진 카드: 좁은 화면에선 썸네일을 상단 배너로 세워 스택 */
  .mag-card { flex-direction: column; }
  .mag-card-thumb { flex-basis: auto; max-width: none; aspect-ratio: 16 / 9; }
}

/* 가독성 레이어 — 설명 본문(.entry-content) 전용. 매거진·허브·정적 페이지.
   캘린더·포스터 카드·공연 상세(.tool-body/.perf-layout)는 대상 아님.
   강조색은 브랜드 --c-accent 상속(장르색 신설 없음), 굵기는 400/500 유지. */
.entry-content { font-size: 17px; line-height: 1.8; word-break: keep-all; overflow-wrap: break-word; }
.entry-content p { margin: 0 0 1.5em; }
.entry-content h2 {
  font-size: 1.4em; font-weight: 500; line-height: 1.4;
  margin: 2.2em 0 .85em; padding-bottom: .4em;
  border-bottom: 2px solid var(--c-accent);
}
.entry-content h3 {
  font-size: 1.12em; font-weight: 500;
  margin: 1.7em 0 .65em; padding-left: .6em;
  border-left: 4px solid var(--c-accent);
}
.entry-content a { color: var(--c-accent); text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin: 0 0 1.5em; }
.entry-content li { margin: .45em 0; }
.entry-content li::marker { color: var(--c-accent); }
.entry-content blockquote {
  margin: 1.5em 0; padding: 1em 1.2em; background: var(--surface-1);
  border-left: 4px solid var(--c-accent); border-radius: 0 10px 10px 0;
}

/* 형광펜 */
.entry-content mark { background: #fff3d9; padding: 2px 6px; border-radius: 5px; }
.entry-content mark.hl-blue { background: #e5f0ff; }
.entry-content mark.hl-green { background: #e1f5e6; }

/* 표 — 본문 표에만 */
.entry-content .table-wrap { overflow-x: auto; margin: 1.5em 0; -webkit-overflow-scrolling: touch; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .94em; line-height: 1.6; }
.entry-content th { text-align: left; }

/* 이미지·캡션 */
.entry-content figure { margin: 1.8em 0; }
.entry-content figcaption { margin-top: .6em; font-size: .85em; color: var(--c-muted); text-align: center; }

/* FAQ details */
.entry-content details {
  border: .5px solid var(--c-line); border-radius: 10px;
  padding: .9em 1.1em; margin: .6em 0;
}
.entry-content details summary { font-weight: 500; cursor: pointer; }
.entry-content details summary::before { content: "Q. "; color: var(--c-accent); }

/* 목차 — 서버사이드 렌더(CLS 0) */
.rl-anchor { display: block; height: 0; scroll-margin-top: 12px; }
.rl-toc {
  border: .5px solid var(--c-line); border-radius: 12px; background: var(--c-card);
  padding: 1em 1.2em; margin: 0 0 2em; font-size: .93em; max-width: 760px;
}
.rl-toc-title { font-weight: 500; margin-bottom: .5em; }
.rl-toc ol { margin: 0; padding-left: 1.3em; }
.rl-toc li { margin: .3em 0; }
.rl-toc a { text-decoration: none; color: inherit; }
.rl-toc a:hover { color: var(--c-accent); text-decoration: underline; }

/* ==========================================================
   홈 13블록 (A-4 / A-7) — 2026-08-04 전면 재설계
   그리드 항목에는 반드시 min-width:0 (§1-B H — 이 서버 전체에서 반복된 오버플로 원인)
   ========================================================== */
.card-grid > * { min-width: 0; }

/* 섹션 리듬 — 흰색 ↔ surface 교대(A-7). 전폭 배경, 내용은 wrap 폭 유지 */
.sec { margin: 0; padding: 40px 0; }
.sec-alt {
  background: var(--surface-1);
  box-shadow: 0 0 0 100vmax var(--surface-1);
  clip-path: inset(0 -100vmax);
}
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.sec-head-t { min-width: 0; }
.sec-head h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
/* eyebrow — 섹션 리듬의 핵심(A-7) */
.eyebrow {
  margin: 0 0 5px; font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-accent) 60%, var(--c-hint));
}
.sec-more { flex: 0 0 auto; font-size: .84rem; font-weight: 600; color: var(--c-accent); white-space: nowrap; }
.sec-note { margin: 12px 0 0; font-size: .78rem; color: var(--c-hint); line-height: 1.65; }
.pill-lead { margin: 20px 0 10px; font-size: .84rem; color: var(--c-muted); font-weight: 500; }

/* ① 히어로 */
.hero {
  display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 30px;
  padding: 44px 0 40px;
}
.hero > * { min-width: 0; }
.hero-badge {
  display: inline-block; margin: 0 0 12px; padding: 5px 11px;
  background: var(--c-accent-weak); color: var(--c-accent);
  border-radius: 100px; font-size: .76rem; font-weight: 600;
}
.hero h1 { margin: 0 0 12px; font-size: 2.1rem; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; }
.hero-sub { margin: 0 0 20px; font-size: 1rem; color: var(--c-muted); line-height: 1.7; max-width: 52ch; }
.hero-sub strong { color: var(--c-text); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0 20px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .925rem;
}
.btn-p { background: var(--c-accent); color: #fff; }
.btn-p:hover { background: color-mix(in srgb, var(--c-accent) 86%, #000); text-decoration: none; }
.btn-s { background: var(--c-card); color: var(--c-text); border: 1px solid var(--c-line-strong); }
.btn-s:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
/* 이미지 미도착 폴백 — 주색 그라데이션. aspect-ratio로 공간 예약(CLS 0) */
.hero-fig {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: linear-gradient(140deg, #6d5cdc 0%, #4a3da8 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero-fig img { width: 128px; height: 128px; opacity: .96; }
/* 이미지가 들어온 히어로 — 기존 aspect-ratio 예약(4/3, 56rem 이상 16/7)은 그대로 두고
   이미지가 박스를 채운다. 슬롯 비율이 폭마다 달라 cover로 맞춘다(CLS 0 유지). */
.hero-fig--img { display: block; overflow: hidden; position: relative; padding: 0; }
.hero-fig--img picture { display: block; width: 100%; height: 100%; }
.hero-fig--img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; }
/* 그라데이션 스크림 — 어두운 무대 사진과 카드 경계의 대비를 CSS로 보장한다.
   (히어로 텍스트는 .hero-t로 분리돼 있어 그림 여백에 기대지 않는다.) */
.hero-fig--img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,48,0) 55%, rgba(20,16,48,.45) 100%);
}
/* 장르 카드에 이미지가 들어온 경우 — 16:6 예약 유지, 이미지가 채운다. */
.gcard-fig--img { display: block; padding: 0; overflow: hidden; }
.gcard-fig--img picture { display: block; width: 100%; height: 100%; }
.gcard-fig--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 섹션 배너 — 장식용 가로 스트립(2026-08-14 이미지 라운드).
   aspect-ratio로 공간을 먼저 예약하므로 이미지가 늦게 와도 시프트가 없다(CLS 0).
   16:4로 낮게 깐 이유: 이 사이트는 포스터가 이미 화면을 채우고 있어 얹을 자리가 적고,
   16:9로 깔면 포스터 온디맨드 생성으로 확보한 홈 이미지 예산(55KB)을 되돌린다. */
.sec-banner {
  aspect-ratio: 16 / 4; margin: 0 0 20px; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-1);
}
.sec-banner picture { display: block; width: 100%; height: 100%; }
.sec-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ②' 임박한 티켓오픈 (미래 오픈 건이 있을 때만 렌더) */
.open-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.open-list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius);
  padding: 12px 14px;
}
.open-dday {
  flex: none; min-width: 52px; text-align: center;
  font-size: .78rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--c-accent); background: var(--c-accent-weak);
  border-radius: var(--radius-sm); padding: 4px 8px;
}
.open-list a { flex: 1 1 12ch; min-width: 0; font-weight: 600; color: var(--c-text); }
.open-list time { flex: none; font-size: .82rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.open-vendor { flex: none; font-size: .76rem; color: var(--c-hint); }
@media (max-width: 560px) {
  .open-list a { flex-basis: 100%; order: -1; }
}

/* ③ BY THE NUMBERS */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.nums > * { min-width: 0; }
.nums li {
  background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius);
  padding: 18px 16px; text-align: center;
}
.nums b { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; color: var(--c-accent); line-height: 1.15; }
.nums span { display: block; margin-top: 4px; font-size: .82rem; color: var(--c-muted); }

/* ④ 도구 3종 */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tools > * { min-width: 0; }
.tool {
  display: block; padding: 18px; border-radius: var(--radius);
  background: var(--c-card); border: .5px solid var(--c-line); color: var(--c-text);
}
.tool:hover { border-color: var(--c-accent); text-decoration: none; }
.tool .icon { width: 24px; height: 24px; color: var(--c-accent); }
.tool b { display: block; margin: 8px 0 3px; font-size: 1rem; font-weight: 700; }
.tool span { display: block; font-size: .82rem; color: var(--c-muted); line-height: 1.5; }

/* pill 공통 */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 14px; border-radius: 100px;
  background: var(--c-card); border: .5px solid var(--c-line);
  color: var(--c-text); font-size: .865rem; font-weight: 500;
}
.pill:hover { border-color: var(--gm, var(--c-accent)); color: var(--gf, var(--c-accent)); text-decoration: none; }
.pill em { font-style: normal; font-size: .78rem; color: var(--c-hint); }

/* ⑤ 지역 — 단독 URL 부재로 링크가 아닌 라벨(실측 반영) */
.region-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.region-grid > * { min-width: 0; }
.region-grid li {
  background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 12px 10px; text-align: center;
}
.r-name { display: block; font-size: .875rem; font-weight: 600; }
.r-c { display: block; margin-top: 2px; font-size: .78rem; color: var(--c-hint); }
.venue-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; }
.venue-list > * { min-width: 0; }
.venue-list li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius-sm);
  font-size: .85rem;
}
.v-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.v-sido { flex: 0 0 auto; font-size: .76rem; color: var(--c-hint); }
.v-c { flex: 0 0 auto; font-size: .78rem; color: var(--c-accent); font-weight: 600; }

/* ⑥ 장르 카드 — 포스터 대신 장르색 + SVG(B-2 №6) */
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius);
  color: var(--c-text);
}
.gcard:hover { border-color: var(--gm); text-decoration: none; transform: translateY(-1px); }
.gcard-fig {
  aspect-ratio: 16 / 6; background: var(--gb);
  display: flex; align-items: center; justify-content: center;
}
.gicon { width: 64px; height: 64px; fill: none; stroke: var(--gf); stroke-width: 1.7; opacity: .92; stroke-linecap: round; stroke-linejoin: round; }
.gcard-b { padding: 14px 16px 16px; }
.gcard-t { display: flex; align-items: baseline; gap: 8px; font-size: 1.02rem; font-weight: 700; }
.gcard-t em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--gm); }
.gcard-d { display: block; margin-top: 5px; font-size: .82rem; color: var(--c-muted); line-height: 1.55; }

/* ⑦ STEP — 이미지 없이 번호 + 아이콘 */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius); padding: 18px 16px; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-accent-weak); color: var(--c-accent);
  font-size: .82rem; font-weight: 800; margin-bottom: 10px;
}
.steps b { display: block; font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
.steps span { display: block; font-size: .82rem; color: var(--c-muted); line-height: 1.55; }

/* ⑧ 공식 출처 카드 */
.ocards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ocard {
  display: block; padding: 18px; border-radius: var(--radius);
  background: var(--c-card); border: .5px solid var(--c-line); color: var(--c-text);
}
.ocard:hover { border-color: var(--c-accent); text-decoration: none; }
.ocard b { display: block; font-size: .96rem; font-weight: 700; margin-bottom: 5px; }
.ocard span { display: block; font-size: .82rem; color: var(--c-muted); line-height: 1.55; }
.ocard em { display: block; margin-top: 8px; font-style: normal; font-size: .76rem; color: var(--c-accent); }

/* ⑨ WHY */
.whys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.whys li { background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius); padding: 18px 16px; }
.whys b { display: block; font-size: .95rem; font-weight: 700; margin-bottom: 5px; color: var(--c-accent); }
.whys span { display: block; font-size: .82rem; color: var(--c-muted); line-height: 1.6; }

/* ⑩ 매거진 카드 — 포스터 재사용 금지(B-2 №10). 텍스트 카드로 간다 */
.mcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mcard {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius);
  color: var(--c-text);
}
.mcard:hover { border-color: var(--c-accent); text-decoration: none; }
.mcard-badge {
  align-self: flex-start; padding: 3px 9px; border-radius: 100px;
  background: var(--c-accent-weak); color: var(--c-accent); font-size: .72rem; font-weight: 600;
}
.mcard-title {
  font-size: 1rem; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mcard-ex {
  font-size: .82rem; color: var(--c-muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mcard-meta { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; font-size: .76rem; color: var(--c-hint); }

/* ⑪ 허브 카드 */
.hcards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.hcard {
  display: flex; align-items: center; gap: 8px; padding: 14px;
  background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius-sm);
  color: var(--c-text); font-size: .865rem;
}
.hcard:hover { border-color: var(--c-accent); color: var(--c-accent); text-decoration: none; }
.hcard .icon { width: 16px; height: 16px; color: var(--c-accent); flex: 0 0 auto; }
.hcard b { font-weight: 600; }

/* ⑬ FAQ — details/summary(JS 0건) */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--c-card); border: .5px solid var(--c-line); border-radius: var(--radius); }
.faq summary {
  cursor: pointer; list-style: none; padding: 15px 18px;
  font-size: .95rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-accent); font-size: 1.15rem; font-weight: 400; flex: 0 0 auto; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0; padding: 0 18px 16px; font-size: .875rem; color: var(--c-muted); line-height: 1.75; }
.faq a { color: var(--c-accent); font-weight: 500; }

/* ==========================================================
   반응형 — 1080 / 780 / 560
   ========================================================== */
@media (max-width: 1080px) {
  .fgrid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .hcards { grid-template-columns: repeat(3, 1fr); }
  .region-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .gcards, .tools, .ocards, .mcards { grid-template-columns: repeat(2, 1fr); }
  .steps, .whys { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; gap: 22px; }
  .hero-fig { aspect-ratio: 16 / 7; }
  .hero h1 { font-size: 1.75rem; }
}
@media (max-width: 780px) {
  /* 메가 드롭다운 → 햄버거 + 아코디언(같은 데이터, 마크업 동일) */
  .gnb { display: none; }
  .hdr { min-height: 54px; }
  .mnav-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: var(--touch); height: var(--touch); margin-left: auto; cursor: pointer;
  }
  .mnav-btn span { display: block; height: 2px; background: var(--c-text); border-radius: 2px; }
  /* 드로어: transform 대신 right 오프셋을 움직인다. position:fixed + right:0에
     translateX(100%)를 걸면 계산값이 갱신되지 않는 실측 사례가 있었다(2026-08-04). */
  .mnav {
    display: block; position: fixed; top: 0; right: calc(-1 * min(86vw, 340px)); z-index: 60;
    width: min(86vw, 340px); height: 100dvh; overflow-y: auto;
    background: var(--c-card); border-left: .5px solid var(--c-line);
    transition: right .2s ease;
    padding: 18px 16px 80px;
  }
  .mnav-t:checked ~ .mnav { right: 0; }
  .mnav-scrim { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(26,26,24,.42); }
  .mnav-t:checked ~ .mnav-scrim.mnav-scrim { display: block; }
  .mnav-g { border-bottom: .5px solid var(--c-line); }
  .mnav-g summary {
    cursor: pointer; list-style: none; min-height: var(--touch);
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: .95rem;
  }
  .mnav-g summary::-webkit-details-marker { display: none; }
  .mnav-g summary::after { content: "+"; color: var(--c-accent); font-size: 1.1rem; }
  .mnav-g[open] summary::after { content: "−"; }
  .mnav-g ul { list-style: none; margin: 0 0 8px; padding: 0; }
  .mnav-g a { display: flex; align-items: center; gap: 6px; min-height: 40px; font-size: .875rem; color: var(--c-muted); }
  .mnav-g em { font-style: normal; font-size: .76rem; color: var(--c-hint); }
  .mnav-flat { display: flex; align-items: center; min-height: var(--touch); font-weight: 600; font-size: .95rem; border-bottom: .5px solid var(--c-line); }

  /* A-3 모바일 키워드 스트립 — 가로 스크롤. 높이 고정으로 CLS 0 */
  .kw-strip { display: block; border-top: .5px solid var(--c-line); background: var(--c-bg); }
  .kw-inner {
    display: flex; gap: 7px; overflow-x: auto; padding: 9px var(--gap);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .kw-inner::-webkit-scrollbar { display: none; }
  .kw {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 13px; border-radius: 100px; background: var(--surface-1);
    font-size: .82rem; font-weight: 500; color: var(--c-text); white-space: nowrap;
  }
  .kw em { font-style: normal; font-size: .74rem; color: var(--c-hint); }

  /* A-6 모바일 하단 고정 바 */
  .mbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: 56px; padding: 7px 12px;
    background: var(--c-card); border-top: .5px solid var(--c-line);
  }
  .mbar a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--radius-sm); font-size: .86rem; font-weight: 600;
    background: var(--surface-1); color: var(--c-text);
  }
  .mbar a:hover { text-decoration: none; }
  .mbar .icon { width: 17px; height: 17px; }
  .mbar-p { background: var(--c-accent); color: #fff; }
  /* 하단 바 높이만큼 본문 패딩 확보 — CLS 0 */
  body { padding-bottom: 56px; }

  .fgrid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .fcol-about { grid-column: 1 / -1; }
  .region-grid { grid-template-columns: repeat(3, 1fr); }
  .venue-list { grid-template-columns: 1fr; }
  .sec { padding: 32px 0; }
}
@media (max-width: 560px) {
  .nums { grid-template-columns: repeat(2, 1fr); }
  .gcards, .tools, .ocards, .mcards, .steps, .whys, .hcards { grid-template-columns: 1fr; }
  .hero { padding: 28px 0 26px; }
  .hero h1 { font-size: 1.55rem; }
  .sec-head h2 { font-size: 1.28rem; }
  .region-grid { grid-template-columns: repeat(2, 1fr); }
  .util-bar { font-size: .72rem; }
  .util-src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ==========================================================================
   라운드 2026-09-05 — DESIGN-ID.md ③④: 최소 글자 13px, 필·키워드 칩 터치 44px, 보조 문구 명암비
   ========================================================================== */
.util-bar, .mega-panel em, .pcard-line, .pcard-open, table.calendar li a, table.calendar li a .txt, table.calendar th, table.calendar li.more,
.cal-legend, .fcol em, .footer-note, .footer-copy, .sec-note, .open-vendor, .pill em, .r-c, .v-sido, .v-c, .gcard-t em, .ocard em,
.mcard-meta, .mnav-g em, .kw em, .dday-item .info .open-type, .open-dday, .mcard-badge, .eyebrow, time.day, .pill-lead { font-size: .8125rem; }
@media (max-width: 767px) { .util-bar { font-size: .8125rem; } }
.pills .pill, .pill { min-height: var(--touch); }
.kw { min-height: var(--touch); display: inline-flex; align-items: center; }
.sec-note, .pill em, .kw em, .mcard-meta, .open-vendor, .v-sido, .r-c, .mega-panel em, .mnav-g em { color: var(--c-muted); }
.mnav-g li a { display: flex; align-items: center; min-height: var(--touch); }
.badge, .hero-badge, dt, dd, time, .mbar-p { font-size: .8125rem; }
.mbar-p, .mbar a { min-height: var(--touch); display: inline-flex; align-items: center; }

/* ==========================================================================
   라운드 2026-09-07 — 터치 타깃 44px (DESIGN-ID.md 규격)
   대상: 푸터 링크 목록·섹션 더보기·상단 유틸 링크.
   제외: 달력 셀 안 공연 링크(.ev-perf/.ev-open) — td 높이 92px에 항목이 2~3개 들어가는
         월간 격자라 44px를 주면 달력 레이아웃이 깨진다. 본문 산문 안 인라인 링크도 같은 이유로 제외.
   ========================================================================== */
.fcol a { padding: 12px 0; }
.fmore, .sec-more, .util-tool {
	display: inline-flex; align-items: center; min-height: 44px;
}

/* 주간 티켓오픈 아카이브 내비 (2026-09-08 — 주차 9쪽 인바운드 0 해소)
   터치 타깃 44px·최소 13px 규격(DESIGN-ID) 준수. */
.week-archive { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.week-archive h2 { font-size: 1rem; margin: 0 0 12px; color: var(--c-text); }
.week-archive__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.week-archive__list li { margin: 0; }
.week-archive__list a,
.week-archive__cur {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--c-line); border-radius: 12px;
  font-size: 0.875rem; line-height: 1.5; text-decoration: none;
}
.week-archive__list a { color: var(--c-text); background: var(--c-card); }
.week-archive__list a:hover { border-color: var(--c-line-strong); }
.week-archive__cur { color: var(--c-muted); background: transparent; border-style: dashed; }
/* 주차 페이지의 '전체 보기' 되돌아가기 링크 — .src-note(12.8px)를 쓰면 규격 미달이라 별도. */
.week-archive__back { margin-top: 20px; font-size: 0.9375rem; line-height: 1.6; }
.week-archive__back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text); }

/* 2026-09-09 design round: interactive touch targets */
.site-logo, .brand, .brand-lockup { min-height: 44px; } .rl-toc a, .footer-nav a, .article-meta a { display: inline-flex; align-items: center; min-height: 44px; } .footer-nav a { min-width: 44px; }


/* ==========================================================
   Renewal — 공연 상세 정보 구조 (2026-09-23)
   ========================================================== */
.perf-page { padding-top: 32px; padding-bottom: 16px; }
.perf-main { min-width: 0; }
.perf-main h1 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.perf-answer {
  margin: 0 0 18px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-accent) 6%, var(--c-card));
}
.perf-answer-label {
  display: block;
  margin-bottom: 4px;
  color: var(--c-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.perf-answer p { margin: 0; line-height: 1.7; font-size: .98rem; }
.perf-facts {
  margin-top: 0;
  padding: 16px;
  border: .5px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
}
.perf-facts h2 { margin-bottom: 12px; font-size: 1.05rem; }
.perf-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.perf-quicklinks a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 13px;
  border: .5px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-card);
  color: var(--c-text);
  font-size: .86rem;
  font-weight: 500;
}
.perf-quicklinks a:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  text-decoration: none;
  transform: translateY(-2px);
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease;
}
.perf-block {
  margin-top: 32px;
  padding-top: 28px;
  border-top: .5px solid var(--c-line);
}
.perf-block > h2 { margin-bottom: 14px; font-size: 1.35rem; }
.perf-block .entry-content { max-width: none; }
.dday-item.card { flex-wrap: wrap; }
.dday-item.card .btn-book {
  margin-top: 0;
  margin-left: auto;
  flex: 0 0 auto;
}
.perf-faq details {
  margin: 0 0 8px;
  padding: 0;
  border: .5px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-card);
}
.perf-faq summary {
  cursor: pointer;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-weight: 600;
}
.perf-faq details[open] summary { border-bottom: .5px solid var(--c-line); }
.perf-faq details p { margin: 0; padding: 12px 14px 14px; color: var(--c-muted); line-height: 1.7; }
.perf-source {
  margin-top: 30px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--c-muted);
  font-size: .84rem;
  line-height: 1.65;
}
.perf-source strong { color: var(--c-text); }
.perf-source p { margin: 4px 0 0; }
.perf-source a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .perf-page { padding-top: 24px; }
  .perf-answer { padding: 14px; }
  .perf-facts { padding: 14px; }
  .perf-quicklinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-quicklinks a { border-radius: var(--radius-sm); justify-content: center; text-align: center; }
  .dday-item.card .btn-book { flex-basis: 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .perf-quicklinks a:hover { transform: none; transition: none; }
}


/* ==========================================================
   Renewal — artist 공연 허브 (2026-09-23)
   ========================================================== */
.artist-page { padding-top: 30px; padding-bottom: 20px; }
.artist-head { max-width: 840px; }
.artist-kicker {
  margin: 0 0 6px;
  color: var(--c-accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.artist-head h1 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.artist-answer {
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-accent) 6%, var(--c-card));
}
.artist-answer p { margin: 0; line-height: 1.75; }
.artist-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  list-style: none;
  margin: 20px 0 30px;
  padding: 0;
}
.artist-stats li {
  padding: 16px 14px;
  border: .5px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
  text-align: center;
}
.artist-stats strong { display:block; font-size:1.5rem; color:var(--c-accent); line-height:1.2; }
.artist-stats span { display:block; margin-top:5px; font-size:.82rem; color:var(--c-muted); }
.artist-facts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:0 0 32px;
}
.artist-facts > section {
  min-width:0;
  padding:18px;
  border:.5px solid var(--c-line);
  border-radius:var(--radius);
  background:var(--c-card);
}
.artist-facts h2 { font-size:1.1rem; margin-bottom:12px; }
.artist-chips { display:flex; flex-wrap:wrap; gap:8px; }
.artist-chips a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:var(--touch);
  padding:0 13px;
  border:.5px solid var(--c-line);
  border-radius:999px;
  background:var(--surface-1);
  color:var(--c-text);
  font-size:.86rem;
}
.artist-chips a:hover { text-decoration:none; border-color:var(--c-accent); color:var(--c-accent); }
.artist-chips span { color:var(--c-hint); font-size:.78rem; }
.artist-venue-list { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.artist-venue-list li {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:7px 10px;
  border-radius:var(--radius-sm);
  background:var(--surface-1);
}
.artist-venue-list span { flex:1 1 auto; min-width:0; }
.artist-venue-list em { flex:0 0 auto; font-style:normal; color:var(--c-accent); font-size:.8rem; }
.artist-perfs { margin-top: 10px; }
.artist-section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.artist-section-head h2 { margin:0; }
.artist-section-head a {
  display:inline-flex;
  align-items:center;
  min-height:var(--touch);
  flex:0 0 auto;
}
.artist-faq { margin-top:32px; padding-top:28px; border-top:.5px solid var(--c-line); max-width:840px; }
.artist-faq > h2 { margin-bottom:14px; font-size:1.35rem; }
.artist-faq details {
  margin:0 0 8px;
  border:.5px solid var(--c-line);
  border-radius:var(--radius-sm);
  background:var(--c-card);
}
.artist-faq summary {
  cursor:pointer;
  min-height:var(--touch);
  display:flex;
  align-items:center;
  padding:10px 14px;
  font-weight:600;
}
.artist-faq details[open] summary { border-bottom:.5px solid var(--c-line); }
.artist-faq details p { margin:0; padding:12px 14px 14px; color:var(--c-muted); line-height:1.7; }
.artist-source {
  max-width:840px;
  margin-top:28px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:var(--surface-1);
  color:var(--c-muted);
  font-size:.84rem;
  line-height:1.65;
}
.artist-source strong { color:var(--c-text); }
.artist-source p { margin:4px 0 0; }
.artist-source a { display:inline-flex; align-items:center; min-height:var(--touch); padding:0 3px; text-decoration:underline; text-underline-offset:2px; }

@media (max-width: 640px) {
  .artist-page { padding-top:24px; }
  .artist-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .artist-facts { grid-template-columns:1fr; }
  .artist-section-head { align-items:flex-start; flex-direction:column; }
}


/* ==========================================================
   Renewal — artist index root/group routes (2026-09-23)
   ========================================================== */
.artist-index-page { padding-top:30px; padding-bottom:24px; }
.artist-index-head { max-width:820px; }
.artist-index-back { margin:0 0 8px; }
.artist-index-back a,
.artist-search-reset a {
  display:inline-flex; align-items:center; min-height:var(--touch);
  color:var(--c-accent); text-decoration:none;
}
.artist-index-head h1 {
  margin:0 0 12px;
  font-size:clamp(1.75rem,4vw,2.4rem);
  line-height:1.25;
  letter-spacing:-.025em;
}
.artist-index-intro { margin:0; color:var(--c-muted); line-height:1.75; max-width:70ch; }
.artist-search {
  display:flex; gap:8px; margin:20px 0 12px; max-width:520px;
}
.artist-search input {
  flex:1 1 auto; min-width:0; min-height:var(--touch);
  padding:0 14px; border:.5px solid var(--c-line); border-radius:var(--radius-sm);
  background:var(--c-card); color:var(--c-text); font:inherit;
}
.artist-search button {
  flex:0 0 auto; min-height:var(--touch); padding:0 18px;
  border:0; border-radius:var(--radius-sm);
  background:var(--c-accent); color:#fff; font:inherit; font-weight:600; cursor:pointer;
}
.artist-group-nav {
  display:flex; flex-wrap:wrap; gap:8px;
  margin:18px 0 28px;
}
.artist-group-nav a {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:48px; min-height:var(--touch); padding:0 12px;
  border:.5px solid var(--c-line); border-radius:999px;
  background:var(--c-card); color:var(--c-text); font-weight:600;
}
.artist-group-nav a:hover,
.artist-group-nav a[aria-current="page"] {
  border-color:var(--c-accent);
  color:var(--c-accent);
  background:var(--c-accent-weak);
  text-decoration:none;
}
.artist-group-nav em { font-style:normal; color:var(--c-hint); font-size:.78rem; font-weight:500; }
.artist-group-cards > h2,
.artist-index-results > h2,
.artist-index-guide > h2 { font-size:1.3rem; margin-bottom:14px; }
.artist-group-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
}
.artist-group-grid a {
  min-height:82px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:.5px solid var(--c-line); border-radius:var(--radius);
  background:var(--c-card); color:var(--c-text);
}
.artist-group-grid a:hover {
  border-color:var(--c-accent); color:var(--c-accent); text-decoration:none;
  transform:translateY(-2px); transition:transform 180ms ease,border-color 180ms ease,color 180ms ease;
}
.artist-group-grid strong { font-size:1.15rem; }
.artist-group-grid span { margin-top:3px; color:var(--c-muted); font-size:.82rem; }
.artist-index-guide {
  margin-top:28px; padding:18px;
  border:.5px solid var(--c-line); border-radius:var(--radius); background:var(--surface-1);
}
.artist-index-guide ol { margin:0; padding-left:1.25em; }
.artist-index-guide li { margin:.4em 0; }
.artist-index-list {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:8px 12px; list-style:none; margin:0; padding:0;
}
.artist-index-list li { min-width:0; }
.artist-index-list a {
  display:flex; align-items:center; gap:8px; min-height:var(--touch);
  padding:8px 10px; border:.5px solid var(--c-line); border-radius:var(--radius-sm);
  background:var(--c-card); color:var(--c-text);
}
.artist-index-list a:hover { border-color:var(--c-accent); color:var(--c-accent); text-decoration:none; }
.artist-index-list span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artist-index-list em { flex:0 0 auto; font-style:normal; color:var(--c-hint); font-size:.78rem; }
.artist-index-source { margin-top:30px; }
@media (max-width:640px) {
  .artist-index-page { padding-top:24px; }
  .artist-search { max-width:none; }
  .artist-group-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .artist-index-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px) {
  .artist-index-list { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .artist-group-grid a:hover { transform:none; transition:none; }
}


/* ==========================================================
   Renewal — genre archive (2026-09-23)
   ========================================================== */
.genre-page { padding-top:30px; padding-bottom:24px; }
.genre-head { max-width:860px; }
.genre-head h1 {
  margin:0 0 14px;
  font-size:clamp(1.75rem,4vw,2.4rem);
  line-height:1.25;
  letter-spacing:-.025em;
}
.genre-answer {
  padding:15px 16px;
  border:1px solid color-mix(in srgb,var(--c-accent) 18%,var(--c-line));
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--c-accent) 6%,var(--c-card));
}
.genre-answer p { margin:0; line-height:1.75; }
.genre-stats {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
  list-style:none; margin:20px 0; padding:0;
}
.genre-stats li {
  padding:16px 14px; border:.5px solid var(--c-line); border-radius:var(--radius);
  background:var(--c-card); text-align:center;
}
.genre-stats strong { display:block; font-size:1.5rem; color:var(--c-accent); line-height:1.2; }
.genre-stats span { display:block; margin-top:5px; font-size:.82rem; color:var(--c-muted); }
.genre-quicklinks { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.genre-quicklinks a {
  display:inline-flex; align-items:center; min-height:var(--touch); padding:0 13px;
  border:.5px solid var(--c-line); border-radius:999px; background:var(--c-card);
  color:var(--c-text); font-size:.86rem; font-weight:500;
}
.genre-quicklinks a:hover { border-color:var(--c-accent); color:var(--c-accent); text-decoration:none; }
.genre-description { margin:0 0 28px; max-width:860px; }
.genre-results { margin-top:8px; }
.genre-results-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:14px;
}
.genre-results-head h2 { margin:0; }
.genre-results-head a { display:inline-flex; align-items:center; min-height:var(--touch); }
.genre-pagination { margin:28px 0 0; }
.genre-pagination .nav-links { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.genre-pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center; min-width:var(--touch);
  min-height:var(--touch); padding:0 10px; border:.5px solid var(--c-line);
  border-radius:var(--radius-sm); background:var(--c-card); color:var(--c-text);
}
.genre-pagination .page-numbers.current,
.genre-pagination .page-numbers:hover { border-color:var(--c-accent); color:var(--c-accent); text-decoration:none; }
.genre-source {
  max-width:860px; margin-top:28px; padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--surface-1); color:var(--c-muted); font-size:.84rem; line-height:1.65;
}
.genre-source strong { color:var(--c-text); }
.genre-source p { margin:4px 0 0; }
.genre-source a { display:inline-flex; align-items:center; min-height:var(--touch); padding:0 3px; text-decoration:underline; text-underline-offset:2px; }
@media(max-width:640px){
  .genre-page { padding-top:24px; }
  .genre-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .genre-results-head { flex-direction:column; align-items:flex-start; }
}


/* PHASE 3 final touch-target gate */
.perf-source a{display:inline-flex;align-items:center;min-width:var(--touch);min-height:var(--touch);padding:0 3px}
.entry-content a{display:inline-flex;align-items:center;min-width:var(--touch);min-height:var(--touch);padding:0 2px}
.mag-card-title a{display:flex;align-items:center;min-height:var(--touch)}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch);min-height:var(--touch);padding:0 10px}


/* PHASE 4 post metadata touch targets */
.entry-meta a{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 2px}
.magazine-context td a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch);min-height:var(--touch);padding:0 4px}
.magazine-context .context-note a{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 3px}