/* 숲세권 라이브 — 디자인 토큰과 공통 구성 요소.
   기준: Claude Design의 '숲세권 라이브' 디자인 시스템(forrestlive.com 랜딩과 같은 결). 값을 바꾸면 그쪽 tokens.json과 함께 바꾼다.
   Layout: 흰 헤더 → 무대 사진 히어로 → 다가오는 공연 → 지난 공연 → 공간 → 함께 만든 공연 → 사진 위 문의와 푸터 */
@import url("assets/fonts/pretendard.css");
@import url("assets/fonts/noto-serif-kr.css");
@import url("assets/fonts/inter.css");

:root {
  /* 원색: forrestlive.com에서 가져온 값 */
  --sage: #719c91;
  --sage-deep: #4f7a6f;
  --olive: #919465;
  --forest: #194931;
  --deep: #0f2a1d;
  --bulb: #eac46b;
  --ink: #2e3231;
  --gray: #535956;

  /* 쓰임 */
  --bg: #ffffff;
  --surface: #fafafa;
  --card: #ffffff;
  --text: var(--ink);
  --muted: var(--gray);
  --heading: var(--sage);
  --line: #e4e8e6;
  --chip: #f1f4f2;
  --accent: var(--sage-deep);
  --on-accent: #ffffff;
  --focus: var(--sage-deep);
  --on-photo: #ffffff;

  --font-serif: "Noto Serif KR", "AppleMyungjo", serif;
  --font-ui: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-label: "Inter", "Pretendard Variable", system-ui, sans-serif;

  --t-12: 0.75rem; --t-13: 0.8125rem; --t-15: 0.9375rem; --t-17: 1.0625rem; --t-20: 1.25rem;
  --t-21: 1.3125rem; --t-30: 1.875rem; --t-42: 2.625rem;
  --t-display: clamp(2.5rem, 6.2vw, 5rem);
  --t-section: clamp(1.875rem, 3.6vw, 2.625rem);

  --s-1: 4px; --s-2: 8px; --s-3: 14px; --s-4: 16px; --s-5: 28px; --s-6: 40px; --s-7: 72px; --s-8: 120px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --max: 1160px;
  --tap: 44px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121715; --surface: #181e1b; --card: #1d2420; --text: #e8ece9; --muted: #a9b2ad; --heading: #8fb5a9;
    --line: #2a322e; --chip: #222a26; --accent: #8fb5a9; --on-accent: #10241b; --focus: #8fb5a9;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121715; --surface: #181e1b; --card: #1d2420; --text: #e8ece9; --muted: #a9b2ad; --heading: #8fb5a9;
  --line: #2a322e; --chip: #222a26; --accent: #8fb5a9; --on-accent: #10241b; --focus: #8fb5a9;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--t-17); line-height: 1.75;
  word-break: keep-all; overflow-wrap: anywhere;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.3; margin: 0; text-wrap: balance; color: var(--text); letter-spacing: -0.02em; }
p { margin: 0; }
.wrap {
  max-width: var(--max); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* 머리말: 섹션 제목 위 영문 한 단어 (랜딩의 FOREST, ABOUT 같은 결) */
.label { display: block; font: 600 var(--t-12)/1.4 var(--font-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); }

/* 헤더: 흰 띠 */
.site-header { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 68px; }
.site-header .logo img { height: 24px; width: auto; }
.site-nav { display: flex; gap: var(--s-1); flex-wrap: nowrap; }
.site-nav a { text-decoration: none; font-size: var(--t-15); font-weight: 500; letter-spacing: 0.02em; color: var(--muted); padding: 6px 12px; min-height: var(--tap); display: inline-flex; align-items: center; border-radius: var(--radius-pill); }
.site-nav a:hover { color: var(--accent); background: var(--chip); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header .logo img { filter: brightness(0) invert(1); } }

/* 버튼: 모두 알약 모양 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--t-15); line-height: 1; min-height: 42px; padding: 12px 22px; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn-sm { min-height: 0; padding: 7px 14px; font-size: var(--t-13); }
.btn-book { background: var(--accent); color: var(--on-accent); }
.btn-book:hover { background: var(--forest); }
.btn-line { background: transparent; color: var(--accent); border-color: currentColor; }
.btn-line:hover { background: var(--chip); }
.btn[aria-disabled="true"] { background: var(--chip); color: var(--muted); cursor: default; }
.on-photo .btn-line { color: var(--on-photo); }
.on-photo .btn-line:hover { background: rgba(255,255,255,.12); }
.on-photo .btn-book { background: var(--on-photo); color: var(--sage-deep); }
.on-photo .btn-book:hover { background: #eef3f1; }

/* 상태 표시: 글자와 모양으로 구분. 전구색은 '예매중' 점에만 남긴다 */
.state { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-13); font-weight: 600; line-height: 1.4; padding: 4px 11px 4px 9px; border-radius: var(--radius-pill); }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state-on { background: var(--chip); color: var(--text); }
.state-on::before { background: var(--bulb); box-shadow: 0 0 0 3px rgba(234,196,107,.35); }
.state-soon { border: 1px solid var(--accent); color: var(--accent); }
.state-soon::before { background: transparent; border: 1.5px solid var(--accent); }
.state-out { background: var(--chip); color: var(--muted); text-decoration: line-through; }
.state-past { color: var(--muted); padding-left: 0; }
.state-past::before { display: none; }

/* 칩 */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-15); line-height: 1; min-height: 40px; padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* 포스터 + 날짜 레이어 */
.poster { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--forest); }
.poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster .blank {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 70% at 70% 0%, rgba(113,156,145,.35), transparent 60%), linear-gradient(160deg, #2b5f4a, var(--deep));
}
.poster .blank img { width: 26%; max-width: 88px; opacity: .55; margin-top: -18%; }
/* 배지: 포스터 왼쪽 위. 오픈 예정·매진처럼 예외일 때만 */
.badge { position: absolute; top: 12px; left: 12px; z-index: 1; font: 600 var(--t-12)/1 var(--font-ui); letter-spacing: 0.02em; color: var(--ink); background: rgba(255,255,255,.92); backdrop-filter: blur(6px); padding: 7px 11px; border-radius: var(--radius-pill); }