/* 숲세권 라이브 — 디자인 토큰과 공통 구성 요소.
   기준: Claude Design의 '숲세권 라이브' 디자인 시스템. 값을 바꾸면 그쪽 tokens.json과 함께 바꾼다.
   Layout: 숲 띠 헤더 → 무대 사진 히어로 → 공연 카드 그리드 → 아카이브 → 공간 → 문의 → 숲 띠 푸터 */
@import url("assets/fonts/pretendard.css");
@font-face { font-family: "MaruBuri"; src: url("assets/fonts/MaruBuri-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MaruBuri"; src: url("assets/fonts/MaruBuri-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --forest: #194931;
  --deep: #0f2a1d;
  --bulb: #eac46b;
  --sage: #719c91;
  --sage-line: #4f7a6f;
  --focus: #194931;
  --moss: #97913f;
  --mist: #f2f5f0;
  --ink: #15231b;

  --bg: var(--mist);
  --surface: #ffffff;
  --text: var(--ink);
  --muted: #56655b;
  --line: #d3ddd5;
  --heading: var(--forest);
  --chip: #e4ebe5;
  --on-forest: #f2f5f0;
  --on-bulb: var(--deep);

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

  --t-13: 0.8125rem; --t-15: 0.9375rem; --t-17: 1.0625rem; --t-21: 1.3125rem;
  --t-26: 1.625rem; --t-34: 2.125rem; --t-44: 2.75rem; --t-56: 3.5rem;
  --radius: 6px;
  --max: 1160px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1813; --surface: #16221b; --text: #e7ece5; --muted: #9daa9f; --line: #28362d;
    --heading: #b7d1bf; --chip: #1d2b23; --sage-line: #719c91; --focus: #eac46b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1813; --surface: #16221b; --text: #e7ece5; --muted: #9daa9f; --line: #28362d;
  --heading: #b7d1bf; --chip: #1d2b23; --sage-line: #719c91; --focus: #eac46b;
  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-serif); font-size: var(--t-17); line-height: 1.8;
  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: 2px; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.3; margin: 0; text-wrap: balance; color: var(--heading); letter-spacing: -0.01em; }
p { margin: 0; }
.ui, button, .btn, .chip, .state, .site-nav, .meta, small, dt { font-family: var(--font-ui); }
.wrap {
  max-width: var(--max); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* 헤더: 숲 띠 */
.site-header { background: var(--forest); color: var(--on-forest); 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(--forest); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.site-header .logo img { height: 24px; width: auto; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a { text-decoration: none; font-size: var(--t-15); padding: 6px 10px; border-radius: var(--radius); opacity: .88; }
.site-nav a:hover { opacity: 1; background: rgba(255,255,255,.1); }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: var(--t-15); line-height: 1; padding: 13px 20px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
}
.btn-book { background: var(--bulb); color: var(--on-bulb); }
.btn-book:hover { filter: brightness(1.06); }
.btn-line { background: transparent; color: var(--heading); border-color: currentColor; }
.btn-line:hover { background: var(--chip); }
.btn[aria-disabled="true"] { background: var(--chip); color: var(--muted); cursor: default; }

/* 상태 표시: 글자와 모양으로 구분 */
.state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 600; line-height: 1.4; padding: 3px 10px 3px 8px; border-radius: 999px; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state-on { background: rgba(234,196,107,.3); color: var(--text); }
.state-on::before { background: var(--bulb); box-shadow: 0 0 0 3px rgba(234,196,107,.35); }
.state-soon { border: 1.5px solid var(--sage-line); color: var(--heading); }
.state-soon::before { background: transparent; border: 1.5px solid var(--sage-line); }
.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: 8px; }
.chip { font-weight: 500; font-size: var(--t-15); line-height: 1; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--forest); color: var(--on-forest); border-color: var(--forest); }

/* 포스터 + 날짜 레이어 */
.poster { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: var(--radius); 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(234,196,107,.2), transparent 60%), linear-gradient(160deg, #1f5a3d, var(--deep));
}
.poster .blank img { width: 26%; max-width: 88px; opacity: .55; margin-top: -18%; }
.date-layer {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 18px 16px;
  background: linear-gradient(180deg, rgba(15,42,29,0) 0%, rgba(15,42,29,.78) 55%, rgba(15,42,29,.92) 100%);
  color: #fff; display: flex; flex-direction: column; gap: 2px;
}
.date-layer b { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-26); line-height: 1.2; letter-spacing: -0.01em; }
.date-layer span { font-family: var(--font-ui); font-size: var(--t-15); opacity: .88; }