/* ===== 화성시청소년합창단 — 공통 커스텀 스타일 (라이트 편집 디자인) ===== */

html { font-size: 17px; scroll-behavior: smooth; }
@media (max-width: 640px) { html { font-size: 16px; } }
body { font-family: "Noto Sans KR", system-ui, sans-serif; letter-spacing: -0.005em; }
h1, h2, h3, h4 { word-break: keep-all; }
.font-serif { font-family: "Noto Serif KR", serif; letter-spacing: -0.01em; }
.eyebrow { font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.idx-num { font-variant-numeric: tabular-nums; font-weight: 300; letter-spacing: 0.02em; }

/* ---------- 헤더 ---------- */
#site-header { background: transparent; }
#site-header.is-solid { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(17,24,39,.08); }

/* 데스크톱 GNB 드롭다운 */
/* shadcn menubar 스타일 모션: fade + zoom-95 + slide-from-top */
.gnb-panel { opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top center;
  transition: opacity .16s ease, transform .2s cubic-bezier(.16,.9,.4,1.08), visibility .2s; }
.gnb-group:hover > .gnb-panel, .gnb-group:focus-within > .gnb-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.gnb-card { transition: box-shadow .2s ease; }
.gnb-card { position: relative; }
.gnb-card::before { content: ""; position: absolute; left: 26px; top: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-left: 1px solid rgba(24,21,16,.06); border-top: 1px solid rgba(24,21,16,.06); }
.gnb-item { position: relative; }
.gnb-item::before { content: ""; position: absolute; left: 0; top: 50%; height: 0; width: 3px; background: #bd4a36; transform: translateY(-50%); transition: height .18s ease; border-radius: 0 3px 3px 0; }
.gnb-item:hover::before { height: 60%; }
.gnb-item svg { opacity: 0; transform: translateX(-4px); transition: all .18s ease; }
.gnb-item:hover svg { opacity: 1; transform: translateX(0); }

/* ---------- 사진 플레이스홀더 = 실제 사진 프레임처럼 (전 이미지 = 샘플) ---------- */
.ph { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #FEFCE8; color: #8a7f14;
  border-radius: 1.75rem 1.75rem 1.75rem .5rem; }
.ph--warm { background: #FDF8C4; color: #8a7f14; }
.ph--soft { background: #F5FBEF; color: #6f8f4e; }
.ph::after { /* 은은한 사진 프레임 힌트 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(24,21,16,.05);
}
/* 실제 사진이 채워진 상태 */
.ph-photo { background-size: cover; background-position: center; }
.ph-photo .ph-ico, .ph-photo .ph-cap { display: none; }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ph-ico { position: relative; z-index: 1; opacity: .75; }
.ph-cap { position: relative; z-index: 1; font-size: 12.5px; letter-spacing: .01em; margin-top: 8px; color: inherit; }
.ph-badge { position: absolute; z-index: 2; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.92); color: #4a4338; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; box-shadow: 0 1px 2px rgba(24,21,16,.08); }
.ph-badge::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: #bd4a36; }

/* ---------- 연혁 타임라인 ---------- */
.tl-line { background: linear-gradient(180deg, #FDF8C4, #F5E500, #FDF8C4); }
.tl-dot { box-shadow: 0 0 0 4px rgba(245,229,0,.35); }

/* ---------- 모션 ---------- */
.rise { opacity: 0; transform: translateY(22px); animation: riseIn .9s cubic-bezier(.16,.84,.44,1) forwards; }
@keyframes riseIn { to { opacity: 1; transform: none; } }
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.16,.84,.44,1); }
[data-reveal].revealed { opacity: 1; transform: none; }
.hairline { height: 3px; width: 44px; background: #F5E500; border-radius: 999px; }

/* ---------- 모바일 메뉴 ---------- */
#mobile-menu { transform: translateX(100%); transition: transform .32s cubic-bezier(.16,.84,.44,1); }
#mobile-menu.open { transform: translateX(0); }
#mobile-scrim { opacity: 0; visibility: hidden; transition: opacity .3s ease; }
#mobile-scrim.open { opacity: 1; visibility: visible; }

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* 단원/갤러리 파트 필터 버튼 */
[data-part-btn] { transition: all .18s ease; }
[data-part-btn].is-on { background: #bd4a36; color: #fff; border-color: #bd4a36; }
[data-part-btn].is-on span { color: rgba(255,255,255,.78); }

/* 과거 다크 히어로 잔재 무력화(라이트 전환) */
.staff-lines, .spotlight { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* button-fit — 끊기면 뜻이 상하는 토큰(전화번호) 보호. 정본 clients/_shared/snippets/button-fit.html */
.tel-num { white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* 모바일 하단 스티키바가 푸터 마지막 줄을 덮는 것을 막는다(rubric §1 stickyBarClearsText).
   바 높이(패딩 포함) + safe-area 만큼 문서 아래를 비운다. 1024px 이상에는 바가 없다. */
@media (max-width: 1023.98px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ================================================================
   밝은 톤 · 유아틱 축 (2026-08-22 오너 채택 — 결정로그 참조)
   근거: 06-톤-레퍼런스-실측.md §2 (국내 9개 기관 실측)
        디자인-공통코어.md §3 (색 = 상호작용 신호)
        시립문래청소년센터 표본(clients/_shared/exemplars/harvest/mullae-youth/)
   ================================================================ */

/* --- 1. 색은 상호작용 신호다. 링크·버튼 바깥의 브랜드색을 잉크로 되돌린다. --- */
.text-accent-600:not(a):not(button),
.text-accent-700:not(a):not(button) { color: #111827; }
a.text-accent-600, a.text-accent-700, button.text-accent-600,
a .text-accent-600, a .text-accent-700, button .text-accent-600 { color: #a13a2a; }

/* --- 2. 문장 속 강조는 브랜드색 글자 대신 옐로 형광펜 밑줄로. 면 전용 규칙 준수. --- */
:is(h1, h2, h3, p) > span.text-accent-600 {
  color: #111827;
  background-image: linear-gradient(#F5E500, #F5E500);
  background-size: 100% .34em;
  background-position: 0 100%;
  background-repeat: no-repeat;
  /* 두 줄에 걸친 강조는 줄마다 따로 그린다 — 없으면 띠가 첫 줄 글자를 가로지른다 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .08em;
}

/* --- 3. 헤딩의 명조를 걷는다.
   오너 판정 "오케스트라단 소개 같다"의 실제 원인이고,
   국내 표본 9곳 중 세리프 헤딩은 1곳뿐이다(실측 §1).
   장식체를 새로 들이는 게 아니라 덜어내는 것이라 시공.md §3 과 충돌하지 않는다. --- */
h1.font-serif, h2.font-serif, h3.font-serif {
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}
p.font-serif { font-family: "Noto Sans KR", system-ui, sans-serif; font-weight: 700; }

/* --- 4. 국문 헤딩 상한 인식 (실측 §2-④ 표본 최대 46px) --- */
.text-\[3\.9rem\] { font-size: 3rem; line-height: 1.2; }
@media (max-width: 640px) { .text-\[3\.9rem\] { font-size: 2.1rem; } }

/* --- 5. 눌리는 것은 굵은 알약으로 --- */
a.rounded-full, button.rounded-full { font-weight: 700; }