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

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: #ff6321; 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: #ff6321; }

/* ---------- 연혁 타임라인 ---------- */
.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: #ff6321; color: #111827; border-color: #ff6321; }
[data-part-btn].is-on span { color: #1f2937; }

/* 과거 다크 히어로 잔재 무력화(라이트 전환) */
.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: #c9440c; }

/* --- 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; }
/* 히어로 슬로건만 얇게 — 고객 2026-09-11 「글씨가 너무 두껍고 크다 → 얇고 작은 포인트로」.
   §3 규칙(h1.font-serif = 800)과 특이도가 같아 뒤에 두어 이긴다. 크기는 index.html 클래스(28/36/44px). */
h1.hero-h1 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; } /* sm:text-4xl 의 line-height 2.5rem 이 leading-[1.3] 을 덮어서 여기서 잠근다 */
h1.hero-h1 > span.text-accent-600 { background-size: 100% .28em; }

/* --- 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; }

/* --- 6. 카드 호버 채움 (2026-09-04 오너 지시 — 월드비전합창단 www.wvchoir.or.kr 홈 Schedule 카드 이식)
   레퍼 실측(헤드리스 DOM):
     <div class="group bg-gray-50 hover:bg-[#FF6321] transition-colors rounded-3xl p-8">
       h3.group-hover:text-white · p.group-hover:text-white/80
   우리 판: 채움은 accent-500 #FF6321 그대로, 글자는 흰색이 아니라 **잉크로** 반전한다 —
   흰 글자는 #FF6321 위 2.98:1 로 D13 저대비 하드 게이트(큰 글자 3.0 · 본문 4.5)에 걸린다. 잉크 #111827 은 5.96:1.
   레퍼처럼 @media (hover) 조건 없이 건다 — 터치에서는 탭한 카드가 주황으로 남는데 레퍼도 같다(헤드리스는 hover:none 이라 조건을 걸면 검증이 안 된다).
   적용 대상 = 본문 카드(둘러보기·이유·단계·모집안내·공연종류·단원·일정 준비중). 폼 카드·표·사진 타일은 제외. --- */
.card-hover { transition: opacity .7s ease-out, transform .45s cubic-bezier(.16,.84,.44,1), background-color .25s ease, box-shadow .25s ease; }
.card-hover :where(h2, h3, h4, p, dt, dd) { transition: color .25s ease; }
.card-hover:hover, .card-hover:focus-within {
  background-color: #ff6321;
  box-shadow: 0 0 0 1px #ff6321, 0 16px 32px -14px rgba(255,99,33,.55);
}
.card-hover:hover :where(h2, h3, h4, p, span, a, dt, dd, li, b, strong, small, time),
.card-hover:focus-within :where(h2, h3, h4, p, span, a, dt, dd, li, b, strong, small, time) { color: #111827; }
.card-hover:hover :where(.text-ink-400, .text-ink-500, .text-ink-600),
.card-hover:focus-within :where(.text-ink-400, .text-ink-500, .text-ink-600) { color: #1f2937; }
/* 카드 안의 연한 면(아이콘 타일·분류 알약)은 반투명 흰색으로 띄운다 */
.card-hover:hover :where(.bg-accent-50, .bg-ink-100, .bg-secondary-100, .bg-base-100),
.card-hover:focus-within :where(.bg-accent-50, .bg-ink-100, .bg-secondary-100, .bg-base-100) {
  background-color: rgba(255,255,255,.62); color: #111827; --tw-ring-color: rgba(255,255,255,.45);
}

/* --- 7. 인사말 편지지 (2026-09-04 오너 지시 「가운데 정렬 · 편지 느낌 · 배경 사진」)
   흰 편지지 카드 + 안쪽 얇은 브랜드색 테두리(문구지 느낌) + 본문만 명조.
   §3 「헤딩의 명조를 걷는다」는 그대로다 — 편지 본문(.letter-body p)에만 Noto Serif KR 500 을 쓴다. --- */
.letter { position: relative; box-shadow: 0 30px 60px -30px rgba(17,24,39,.28), 0 1px 0 rgba(17,24,39,.04); }
.letter::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,99,33,.22); border-radius: 1.25rem; pointer-events: none; }
.letter-body p { font-family: "Noto Serif KR", serif; font-weight: 500; word-break: keep-all; }