/* =========================================================
   ONMAM THEATER — 메인 페이지 (화이트 · 볼드 타이포)
   ========================================================= */

:root {
  --bg: #fafaf7;
  --ink: #0b0b0b;
  --mute: #6b6b6b;
  --line: #0b0b0b;
  --line-soft: rgba(11, 11, 11, 0.12);
  /* 포인트 컬러 — 무대공작소(stageworks.kr)와 톤 통일. 여기만 바꾸면 전체 반영 */
  --point: #E8863A;        /* 메인 포인트 (큰 글씨 · 버튼 · 불릿 · 밑줄) */
  --point-hover: #D2742B;  /* 포인트 버튼 호버 */
  --point-ink: #A8561A;    /* 밝은 배경 위 작은 글씨용 (가독성 확보한 진한 톤) */
  --on-point: #0b0b0b;     /* 주황 배경 위 글자색 */
  --gutter: clamp(16px, 3vw, 40px);
  --bar-h: 52px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Archivo", "Noto Sans KR", system-ui, sans-serif;
  --body: "Noto Sans KR", "Archivo", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* 안전장치: 혹시 넘치는 요소가 생겨도 페이지가 가로로 밀리지 않도록
   (clip은 hidden과 달리 스크롤 영역을 만들지 않아 헤더 아래 고정 바(sticky)가 그대로 동작) */
main {
  overflow-x: clip;
  padding-bottom: var(--bar-h);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--point); color: var(--on-point); }

/* 강조 단어 */
.pt { color: var(--point); }

/* 화면에는 숨기고 검색엔진·스크린리더에는 읽히는 텍스트 (제목 보조 설명용) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.line { display: block; overflow: hidden; }
.line .word { display: inline-block; }

/* ---------- 공통 라벨 ---------- */
.sec-label {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 2px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.sec-label span:first-child { color: var(--point-ink); }
.sec-label h2 { font: inherit; letter-spacing: inherit; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;   /* 버튼 글자는 어떤 화면에서도 한 줄 */
  flex-shrink: 0;        /* 글자 폭보다 좁아지지 않음 */
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn i { font-style: normal; transition: transform 0.4s var(--ease); }
.btn:hover i { transform: translateX(4px); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--point); color: var(--on-point); }
.btn-line { border: 2px solid var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }

/* ---------- 인트로 (메인 첫 진입) ----------
   타임라인: 0~0.9s ONMAM 등장 + 주황 선이 그어짐 → ~1.7s 유지 → 1.7~2.4s 오버레이 페이드아웃
   모든 타이밍을 CSS로 처리 → JS가 실패해도 오버레이가 화면을 막은 채 남지 않음 */
#intro { display: none; }
.intro-on #intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  animation: intro-out 0.7s ease 1.7s forwards;
}
#intro.is-skipping { animation: intro-out 0.35s ease forwards; }

.intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  filter: brightness(0.7) saturate(0.8);
  animation: intro-bg 2.4s ease-out forwards;
}

.intro-mark {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}
.intro-word {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--bg);
  opacity: 0;
  transform: translateY(24px);
  animation: intro-word 0.9s var(--ease) 0.15s forwards;
}
.intro-line {
  display: block;
  width: 0;
  height: 2px;
  background: var(--point);
  animation: intro-line 0.9s var(--ease) 0.55s forwards;
}

@keyframes intro-bg   { to { opacity: 0.3; transform: scale(1); } }
@keyframes intro-word { to { opacity: 1; transform: none; } }
@keyframes intro-line { to { width: clamp(56px, 10vw, 150px); } }
@keyframes intro-out  { to { opacity: 0; visibility: hidden; } }

/* 인트로가 걷히는 타이밍에 맞춰 히어로 등장 애니메이션을 뒤로 미룸 (기존 지연 + 1.8초) */
.intro-on .hero-logo .word { animation-delay: 1.8s; }
.intro-on .hero-logo .line:nth-child(2) .word { animation-delay: 1.9s; }
.intro-on .hero-kicker { animation-delay: 2.3s; }
.intro-on .hero-foot { animation-delay: 2.6s; }

/* ---------- 헤더 ---------- */
.hd {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 var(--gutter);
  background: rgba(250, 250, 247, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.hd-logo {
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.hd-logo span { font-size: 0.5em; vertical-align: top; margin-left: 2px; color: var(--point); }
.hd-nav { display: flex; gap: clamp(18px, 3vw, 40px); font-weight: 500; font-size: 15px; }
.hd-nav a { position: relative; }
.hd-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--point);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.hd-nav a:hover::after,
.hd-nav a.active::after { transform: scaleX(1); transform-origin: left; }
.hd-nav a.active { color: var(--point-ink); font-weight: 700; }
.hd-cta {
  justify-self: end;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--point);
  color: var(--on-point);
  font-weight: 700;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
}
.hd-cta:hover { background: var(--ink); color: var(--bg); }

/* ---------- 히어로 ---------- */
.hero {
  min-height: calc(100vh - var(--bar-h));
  min-height: calc(100svh - var(--bar-h));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 104px var(--gutter) 40px;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  opacity: 0;
  animation: fade 1s ease 0.5s forwards;
}
.hero-kicker .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--point);
  animation: pulse 1.8s ease-in-out infinite;
}

.hero-logo {
  font-family: var(--display);
  font-weight: 900;
  /* "THEATER"(Archivo 900) 폭 ≈ 4.9em → 좌우 여백을 뺀 화면 폭에 꽉 차도록 */
  font-size: calc((100vw - 2 * var(--gutter) - 20px) / 4.9);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: clamp(16px, 2.2vw, 30px) 0;   /* 하단 소개문 3줄 + 무대공작소 배지가 첫 화면에 들어오도록 여백 축소 */
  white-space: nowrap;
}
.hero-logo .line:nth-child(2) { color: var(--point); }
.hero-logo .word {
  transform: translateY(102%);
  animation: rise 1.3s var(--ease) forwards;
}
.hero-logo .line:nth-child(2) .word { animation-delay: 0.1s; }

.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 2px solid var(--line);
  opacity: 0;
  animation: fade 1s ease 0.8s forwards;
}
.hero-sub { font-size: clamp(15px, 1.3vw, 18px); font-weight: 500; line-height: 1.75; word-break: keep-all; }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* 무대공작소 배지 — stageworks.kr 브랜드 배지(빛나는 점 + 자간 넓은 굵은 영문 + 얇은 한글) 재현, 검정 알약 배경 */
.sw-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  background: #111;
  color: var(--bg);
  line-height: 1;
  transition: background 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.sw-badge:hover {
  background: #262626;
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.sw-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--point);
  box-shadow: 0 0 10px var(--point);
  animation: pulse 3.2s ease-in-out infinite;
}
.sw-mk {
  font-family: var(--display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2em;
}
.sw-kr {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 247, 0.62);
}
/* 외부 링크 화살표 — 클릭 가능하다는 표시, 호버 시 오른쪽 위로 살짝 이동 */
.sw-arrow {
  margin-left: -2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--point);
  transition: transform 0.3s var(--ease);
}
.sw-badge:hover .sw-arrow { transform: translate(2px, -2px); }

@keyframes rise  { to { transform: translateY(0); } }
@keyframes fade  { to { opacity: 1; } }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ---------- 키워드 그리드 ---------- */
.keywords { padding: clamp(80px, 12vw, 160px) var(--gutter); }

.kw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 2px solid var(--line);
  border-top: 2px solid var(--line);
}
.kw {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(180px, 22vw, 320px);
  padding: clamp(16px, 2vw, 28px);
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

/* 배경 사진 ↔ 텍스트 교차 전환
   평소: 사진은 흑백으로 은은하게(25%) / 호버: 사진은 컬러로 선명하게, 텍스트는 흐려지며 사라짐 */
.kw-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: grayscale(1) contrast(0.9);
  transform: scale(1.06);
  transition: opacity 0.7s ease, filter 0.9s ease, transform 1.4s var(--ease);
  pointer-events: none;
}
.kw:hover .kw-bg {
  opacity: 1;
  filter: grayscale(0) contrast(1);
  transform: scale(1);
}
/* F칸(LIVE & STUDIO) 사진: 확대 없이, 오른쪽 기준으로 맞춰
   두 출연자 + 우측 상단 '조은님의 뮤직파워' 로고가 함께 보이도록 (칸보다 가로로 긴 사진이라 왼쪽 가장자리만 잘림) */
.kw-bg.kw-bg-live,
.kw:hover .kw-bg.kw-bg-live { transform: none; object-position: 100% 50%; }

.kw-no,
.kw-text {
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.kw:hover .kw-no,
.kw:hover .kw-text {
  opacity: 0;
  filter: blur(6px);
}

/* 포인트 컬러: 호버 시 칸 하단에 주황 라인 */
.kw::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.kw:hover::after { transform: scaleX(1); }

/* 터치 기기(호버 없음): 평소엔 사진 25%, 칸을 탭하면 PC 호버와 같은 교차 전환
   - 탭 후 남는 '끈적한 :hover'는 무시하고, js/home.js가 붙이는 .is-active로만 전환 */
@media (hover: none) {
  .kw { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .kw-bg { opacity: 0.25; }
  .kw:hover .kw-bg { opacity: 0.25; filter: grayscale(1) contrast(0.9); transform: scale(1.06); }
  .kw:hover .kw-no,
  .kw:hover .kw-text { opacity: 1; filter: none; }
  .kw:hover::after { transform: scaleX(0); }

  .kw.is-active .kw-bg { opacity: 1; filter: grayscale(0) contrast(1); transform: scale(1); }
  .kw .kw-bg.kw-bg-live { transform: none; }   /* 터치 기기에서도 F칸 사진은 확대 없이 */
  .kw.is-active .kw-no,
  .kw.is-active .kw-text { opacity: 0; filter: blur(6px); }
  .kw.is-active::after { transform: scaleX(1); }
}

.kw-no { font-family: var(--display); font-weight: 700; font-size: 13px; }
/* 2단 라벨: 큰 영문 키워드 + 한글 서브텍스트 */
.kw-en {
  font-weight: 900;
  /* 영문 키워드가 길어(FAN MEETING, POP-UP & EVENT 등) 칸 안에서 두 줄까지 자연스럽게 떨어지도록 조정 */
  font-size: clamp(26px, 4.4vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.kw-ko {
  margin-top: clamp(8px, 1vw, 14px);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0.7;
}

/* 그리드 아래 '포트폴리오 더 보러가기' 버튼 */
.kw-more {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(20px, 2.4vw, 32px);
}

.kw-note {
  word-break: keep-all;   /* 한글 단어 중간 줄바꿈 방지 */
  max-width: 720px;
  margin-top: clamp(40px, 6vw, 72px);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.8;
}

/* ---------- 대관 한눈에 보기 ---------- */
.quick { padding: 0 var(--gutter) clamp(80px, 12vw, 160px); }

.quick-title {
  font-weight: 900;
  font-size: clamp(40px, 6.4vw, 104px);
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.q {
  padding: 24px 0 0;
  border-top: 2px solid var(--line);
}
.q-label { font-weight: 700; font-size: 14px; color: var(--mute); }
.q-big {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(56px, 7vw, 112px);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 12px 0 16px;
}
.q-big small {
  font-family: var(--body);
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-left: 4px;
}
.q-desc { font-size: 15px; color: var(--mute); line-height: 1.65; }

.quick-links {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 2px solid var(--line);
}
.ql {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 26px);
  letter-spacing: -0.03em;
  transition: color 0.3s, padding 0.5s var(--ease);
}
.ql i { font-style: normal; transition: transform 0.5s var(--ease); }
.ql:hover { color: var(--point-ink); padding-left: 12px; }
.ql i { color: var(--point); }
.ql:hover i { transform: translateX(-6px); }

/* ---------- 공연장 사진 ---------- */
.space { padding: 0 var(--gutter) clamp(80px, 12vw, 160px); }

/* 2장-2장-3장 배열: 6칸 그리드에서 2장 줄은 3칸씩(ph-2), 3장 줄은 2칸씩(ph-3) */
.space-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.ph { min-width: 0; }
.ph-2 { grid-column: span 3; }
.ph-3 { grid-column: span 2; }
.ph-img { overflow: hidden; aspect-ratio: 16 / 9; background: #e9e9e4; }
.ph-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.ph:hover .ph-img img { transform: scale(1.05); }
.ph figcaption { margin-top: 10px; font-weight: 700; font-size: 14px; }

/* ---------- 마무리 (검정) ---------- */
.outro {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(80px, 12vw, 160px) var(--gutter) 0;
}
.outro-big {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(72px, 17vw, 300px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  transition: color 0.4s;
}
.outro-big .accent { color: var(--point); }
.outro-big:hover { color: var(--point); }
.outro-big:hover .accent { color: var(--bg); }

.outro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: clamp(56px, 8vw, 112px);
  padding-top: 24px;
  border-top: 2px solid var(--bg);
  font-size: 15px;
}
.o-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 247, 0.55);
  margin-bottom: 8px;
}
.outro-grid a:hover { color: var(--point); }
.o-more { display: inline-block; margin-top: 6px; font-weight: 700; }

/* 브랜드 관계 문구 (무대공작소 ↔ 온맘씨어터) */
.brand-rel {
  display: grid;
  gap: 6px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 20px;
  border-top: 1px solid rgba(250, 250, 247, 0.2);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(250, 250, 247, 0.6);
}
.brand-rel b { color: var(--bg); font-weight: 700; }
.brand-rel a:hover b { color: var(--point); }
/* 외부 링크 화살표 — 무대공작소 배지(.sw-arrow)와 같은 스타일 */
.ext-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--point);
  transition: transform 0.3s var(--ease);
}
.brand-rel a:hover .ext-arrow { transform: translate(2px, -2px); }

.ft {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(56px, 8vw, 112px);
  padding: 20px 0;
  border-top: 1px solid rgba(250, 250, 247, 0.2);
  font-family: var(--display);
  font-size: 12px;
  color: rgba(250, 250, 247, 0.55);
}

/* ---------- 하단 '지금 재생 중' 바 ---------- */
.np {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--bar-h);
  background: var(--bg);
  border-top: 2px solid var(--line);
  font-size: 13px;
  font-weight: 700;
}
.np-sound {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0 var(--gutter);
  border-right: 2px solid var(--line);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 150px;
}
.np-sound:hover { background: var(--ink); color: var(--bg); }

.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i {
  display: block;
  width: 3px;
  height: 3px;
  background: currentColor;
  transition: height 0.3s;
}
.np-sound[aria-pressed="true"] .eq i { animation: eq 0.9s ease-in-out infinite alternate; }
.np-sound[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -0.3s; }
.np-sound[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -0.6s; }
.np-sound[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: -0.15s; }
/* 스피커 아이콘 (모바일 전용 — PC에서는 숨김) */
.np-ico { display: none; }
.np-ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.np-ico .ico-on { display: none; }
.np-sound[aria-pressed="true"] .ico-on { display: block; }
.np-sound[aria-pressed="true"] .ico-off { display: none; }
.np-sound[aria-pressed="true"] { background: var(--point); color: var(--on-point); }
.np-sound[aria-pressed="true"]:hover { background: var(--point-hover); color: var(--on-point); }
@keyframes eq { 0% { height: 3px; } 100% { height: 14px; } }

.np-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 100%;
  padding-left: 16px;
}
.np-tag {
  flex: none;
  padding: 3px 8px;
  background: var(--point);
  color: var(--on-point);
  font-family: var(--display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.np-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.np-run {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.np-run span { padding-right: 48px; }
.np-run span::before { content: "●"; margin-right: 12px; color: var(--point); font-size: 9px; vertical-align: 2px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.np-cta {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--gutter);
  background: var(--point);
  color: var(--on-point);
  transition: background 0.3s, color 0.3s;
}
.np-cta:hover { background: var(--ink); color: var(--bg); }

/* =========================================================
   스크롤 등장 애니메이션 (js/home.js가 .in 클래스 부여)
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s var(--ease), transform 1s var(--ease),
              background 0.45s var(--ease), color 0.45s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

.js .kw.reveal .kw-text {
  transform: translateY(40%);
  transition: transform 1.1s var(--ease), opacity 0.5s ease, filter 0.5s ease;
}
.js .kw.reveal.in .kw-text { transform: none; }

.js .reveal-img .ph-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s var(--ease);
}
.js .reveal-img.in .ph-img { clip-path: inset(0 0 0 0); }

/* ---------- 반응형 ---------- */
@media (max-width: 960px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .outro-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}

@media (max-width: 760px) {
  .hd { grid-template-columns: auto 1fr; }
  .hd-nav { justify-self: end; gap: 14px; font-size: 13px; }
  .hd-cta { display: none; }   /* 모바일에서는 하단 바의 '대관 문의' 사용 */
  .kw-grid { grid-template-columns: repeat(2, 1fr); }
  /* 모바일: 2열. 2장 줄은 그대로 2장, 3장 줄은 2장 + 마지막 1장을 가로 전체로 */
  .space-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-2, .ph-3 { grid-column: span 1; }
  .ph-3:last-child { grid-column: 1 / -1; }
  .np-sound { min-width: 0; justify-content: center; }
  .np-sound-label,
  .np-sound .eq { display: none; }        /* 모바일: 텍스트·막대 대신 스피커 아이콘 */
  .np-ico { display: inline-flex; }
}

@media (max-width: 480px) {
  .quick-grid,
  .outro-grid { grid-template-columns: 1fr; }
  /* 모바일: 버튼 영역을 화면 폭 전체로 넓힌 뒤 두 버튼이 나눠 가짐 (글자 폭보다는 줄어들지 않음) */
  .hero-btns { width: 100%; flex-wrap: nowrap; }
  .hero-btns .btn { flex: 1 0 auto; justify-content: center; padding: 0 18px; }
  .np-cta { padding: 0 14px; }
  /* 메뉴 4개(공연장 소개·포트폴리오·대관 안내·Contact)가 한 줄에 들어가도록 */
  .hd-logo { font-size: 17px; }
  .hd-nav { gap: 10px; font-size: 12px; letter-spacing: -0.02em; }
  .kw-more .btn { width: 100%; justify-content: center; }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* 예외: 하단 티커는 이 설정에서도 계속 흐르게 */
  .np-run {
    animation-duration: 40s !important;
    animation-iteration-count: infinite !important;
  }
  /* 예외: 인트로도 이 설정과 관계없이 PC·모바일 동일하게 재생 (위 전역 규칙이 시간을 0으로 만드는 것을 되돌림) */
  .intro-on #intro   { animation-duration: 0.7s !important;  animation-delay: 1.7s !important; }
  #intro.is-skipping { animation-duration: 0.35s !important; animation-delay: 0s !important; }
  .intro-bg          { animation-duration: 2.4s !important;  animation-delay: 0s !important; }
  .intro-word        { animation-duration: 0.9s !important;  animation-delay: 0.15s !important; }
  .intro-line        { animation-duration: 0.9s !important;  animation-delay: 0.55s !important; }
}