/* ========================================================================
   v2.8.22 — 모바일 종합 재정비 (장모님 모바일 검수 피드백)
   - GNB 햄버거 메뉴
   - 폰트 키우기 (어른 친화)
   - 레이아웃 1컬럼 강제
   - SNS rail / 사이드 요소 정리
   ======================================================================== */

/* ────────────────────────────────────────────
   햄버거 토글 버튼 (모든 화면 공통, mobile에서만 노출)
   ──────────────────────────────────────────── */
.mob-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong, rgba(26,22,20,0.3));
  cursor: pointer;
  padding: 0;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mob-toggle .bars {
  display: flex; flex-direction: column; gap: 5px;
  width: 22px;
}
.mob-toggle .bars span {
  display: block; height: 2px; background: var(--ink, #1A1614);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
body.mob-nav-open .mob-toggle .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mob-nav-open .mob-toggle .bars span:nth-child(2) { opacity: 0; }
body.mob-nav-open .mob-toggle .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 드로어 메뉴 */
.mob-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(26,22,20,0.96);
  z-index: 80;
  padding: 88px 32px 32px;
  flex-direction: column;
  overflow-y: auto;
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
body.mob-nav-open .mob-drawer {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mob-drawer .m-nav {
  display: flex; flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(246,241,232,0.14);
}
.mob-drawer .m-nav a {
  display: block;
  padding: 22px 0;
  font-family: var(--font-serif-kr, 'Nanum Myeongjo', serif);
  font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
  color: var(--hanji, #F6F1E8);
  border-bottom: 1px solid rgba(246,241,232,0.14);
  text-decoration: none;
}
.mob-drawer .m-nav a:active { background: rgba(184,52,42,0.18); }
.mob-drawer .m-nav a .ar {
  float: right; color: rgba(246,241,232,0.4); font-style: italic;
  font-family: var(--font-serif-en, Georgia, serif);
}
.mob-drawer .m-foot {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(246,241,232,0.14);
  font-family: var(--font-mono, monospace);
  font-size: 13px; letter-spacing: 0.04em;
  color: rgba(246,241,232,0.7);
  display: flex; flex-direction: column; gap: 12px;
}
.mob-drawer .m-foot a { color: var(--geumbak-gold, #B8894B); text-decoration: none; }
.mob-drawer .m-cta {
  display: block; margin-top: 24px;
  background: var(--dancheong-red, #B8342A); color: #fff;
  padding: 18px; text-align: center;
  font-family: var(--font-sans-kr, sans-serif);
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  letter-spacing: -0.005em;
}

/* ────────────────────────────────────────────
   ≤900px : Tablet/Mobile 햄버거 모드 진입
   ──────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 헤더 패딩 축소 */
  .hdr {
    padding: 14px 18px !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    background: rgba(246,241,232,0.96) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-hairline, rgba(26,22,20,0.08));
  }
  .hdr .brand img { height: 36px !important; }
  .hdr .brand .stk .kr { font-size: 16px !important; }
  .hdr .brand .stk .en { font-size: 9px !important; letter-spacing: 0.12em !important; }

  /* 데스크톱 nav, util 숨김 */
  .hdr .nav,
  .hdr .util { display: none !important; }

  /* 햄버거 표시 */
  .mob-toggle { display: inline-flex; }
  .mob-drawer { display: flex; }

  /* SNS rail — 모바일에서 작게 + 우하단 fixed */
  .sns-rail {
    right: 12px !important;
    top: auto !important;
    bottom: 80px !important;
    transform: none !important;
    gap: 6px !important;
  }
  .sns-rail a {
    width: 40px !important; height: 40px !important;
    font-size: 18px !important;
    background: rgba(246,241,232,0.95) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .sns-rail a .cafe { font-size: 11px !important; }

  /* 사이드 rail (예매·문의·TOP) — 모바일에서 작게 */
  .rail {
    right: 12px !important;
    bottom: 16px !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
  .rail button {
    width: 44px !important; height: 44px !important;
    font-size: 8px !important;
  }
  .rail button i { font-size: 14px !important; }
}

/* ────────────────────────────────────────────
   ≤768px : 본격 모바일 — 모든 섹션 1컬럼 + 폰트 증가
   ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 본문 기본 폰트 +1pt */
  body { font-size: 15.5px !important; }

  /* HERO — 1컬럼 + 패딩 축소 */
  .hero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important; max-height: none !important;
    padding: 32px 20px 48px !important;
    gap: 32px !important;
  }
  .hero-left h1, .hero-h {
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: 1.05 !important;
  }
  .hero-foot { flex-direction: column !important; gap: 24px !important; align-items: flex-start !important; }
  .hero-foot .lede { font-size: 15.5px !important; line-height: 1.85 !important; }
  .hero-tags { gap: 16px !important; }
  .hero-poster {
    aspect-ratio: 3/4 !important;
    padding: 24px !important;
  }
  .hero-poster h3 { font-size: 28px !important; }
  .hero-poster .psub { font-size: 13.5px !important; }
  .hero-poster .num { font-size: 30px !important; }

  /* SCROLL 인디케이터 모바일에서 숨김 */
  .scroll-ind { display: none !important; }

  /* 일반 섹션 패딩 축소 */
  section,
  .fivel, .notice, .ftr,
  .page-hero, .sec, .upcoming, .notices, .helpline {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .fivel { padding-top: 80px !important; padding-bottom: 80px !important; }
  .notice { padding-top: 80px !important; padding-bottom: 60px !important; }

  /* PHILOSOPHY 섹션 (악단철학) */
  .philos {
    grid-template-columns: 1fr !important;
    padding: 80px 20px !important;
    gap: 32px !important;
  }
  .philos-side { display: none !important; }
  .philos-main h2 { font-size: 36px !important; line-height: 1.15 !important; }
  .philos-main p { font-size: 15.5px !important; line-height: 1.85 !important; }
  .philos-stats { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .philos-stats .v { font-size: 32px !important; }

  /* SEASON / UPCOMING */
  .season-hd {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .season-hd h2 { font-size: 36px !important; }
  .season-hd .right { font-size: 13px !important; }

  /* 공연 카드 */
  .perf {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .perf-thumb, .perf-n { display: none !important; }
  .perf-title h3 { font-size: 22px !important; }
  .perf-cta { justify-content: flex-start !important; padding-top: 8px !important; }

  /* FIVE ELEMENTS — 모바일 1컬럼 (가독성↑) */
  .fivel-hd {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
  }
  .fivel-hd h2 { font-size: 36px !important; }
  .fivel-hd .right { font-size: 14px !important; max-width: none !important; }
  .fivel-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .fivel-cell {
    aspect-ratio: auto !important;
    padding: 28px 24px !important;
    min-height: 180px !important;
  }
  .fivel-cell .ch { font-size: 72px !important; }
  .fivel-cell .nm { font-size: 16px !important; }
  .fivel-cell .cnt { font-size: 14px !important; line-height: 1.65 !important; }

  /* NOTICE 그리드 1컬럼 */
  .notice {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .notice .col h3 { font-size: 24px !important; }
  .notice .feature { padding: 28px !important; }
  .notice .feature h3 { font-size: 28px !important; }
  .nl .tt { font-size: 14.5px !important; line-height: 1.6 !important; }

  /* PARTNERS — 모바일 카드 크기 조정 */
  .partners-strip,
  [data-db="partners-strip"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }

  /* FOOTER */
  .ftr { padding: 64px 20px 32px !important; }
  .ftr .big { font-size: clamp(40px, 12vw, 64px) !important; margin-bottom: 40px !important; }
  .ftr-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    padding-top: 32px !important;
  }
  .ftr-grid .col h4 { font-size: 9px !important; margin-bottom: 12px !important; }
  .ftr-grid .col a.l { font-size: 13.5px !important; line-height: 2 !important; }
  .ftr-addr { font-size: 13px !important; line-height: 1.85 !important; }
  .ftr-bot {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
    margin-top: 40px !important;
  }
  .ftr-bot .fam { gap: 10px !important; font-size: 9px !important; }

  /* PAGE-HERO (about·schedule·notices·tickets·inquiry 공통) */
  .page-hero {
    padding: 100px 20px 40px !important;
  }
  .page-hero h1 {
    font-size: clamp(40px, 13vw, 64px) !important;
    line-height: 0.95 !important;
  }
  .page-hero .lead {
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
    margin-top: 24px !important;
  }
  .page-hero-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 28px !important;
  }
  .crumb { font-size: 10px !important; margin-bottom: 24px !important; gap: 6px !important; flex-wrap: wrap; }

  /* HOW (예매안내 페이지) */
  .how { grid-template-columns: 1fr !important; padding: 24px 20px !important; }
  .how > div { border-right: 0 !important; border-bottom: 1px dashed var(--border-hairline) !important; padding: 24px 0 !important; }
  .how > div:last-child { border-bottom: 0 !important; }

  /* 섹션 헤더 */
  .sec-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .sec-head h2 { font-size: 30px !important; }
  .sec-head .no { font-size: 18px !important; }
  .sec-head .r { font-size: 10px !important; }

  /* VENDORS (예매안내) */
  .vendors { grid-template-columns: 1fr !important; gap: 14px !important; }
  .vendor {
    grid-template-columns: 80px 1fr auto !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  .vendor .logo { height: 60px !important; font-size: 22px !important; }
  .vendor h3 { font-size: 17px !important; }
  .vendor .desc { font-size: 12.5px !important; line-height: 1.6 !important; }

  /* ROW-PERF (공연 행) */
  .row-perf {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 24px 0 !important;
  }
  .row-perf .han { display: none !important; }
  .row-perf .date { flex-direction: row !important; align-items: baseline !important; gap: 12px !important; }
  .row-perf .date .d { font-size: 32px !important; }
  .row-perf .date .m, .row-perf .date .t { font-size: 11px !important; margin-top: 0 !important; }
  .row-perf h4 { font-size: 18px !important; }

  /* HELPLINE */
  .helpline { padding: 64px 20px !important; }
  .helpline .c { grid-template-columns: 1fr !important; gap: 32px !important; }
  .helpline h3 { font-size: 32px !important; }
  .helpline .call { align-items: flex-start !important; }
  .helpline .call .num { font-size: 40px !important; }

  /* NOTICES grid (예매안내 알림) */
  .notices-grid { grid-template-columns: 1fr !important; }
  .note { padding: 24px 0 !important; border-right: 0 !important; border-bottom: 1px dashed var(--border-hairline) !important; }
  .note:last-child { border-bottom: 0 !important; }

  /* MEMBERS GRID (악단소개) */
  .members-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* 통일감 — 모든 섹션 .h-kr 폰트 */
  .h-kr, h2 { word-break: keep-all !important; }

  /* TopBar 띠배너 메시지 잘림 방지 */
  .sejong-topbar { font-size: 12.5px !important; padding: 9px 14px !important; }
  .sejong-topbar .tb-msg { font-size: 12.5px !important; }
}

/* ────────────────────────────────────────────
   v2.8.32 — 마키 horizontal 영구 lock (브레이크포인트 전환 시 세로 reflow 방지)
   미디어쿼리 밖에서 ALL viewports에 적용 — 어떤 해상도/리사이즈 중에도 가로 유지
   ──────────────────────────────────────────── */
.marquee {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.marquee-track,
.marquee-track-readdy {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  /* 애니메이션 부드럽게 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* GPU 합성 강제 */
}
.marquee-track > *,
.marquee-track-readdy > * {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  max-width: none !important;
  align-items: center !important;
}
/* 자식 span 안의 텍스트 노드도 줄바꿈 금지 */
.marquee-track *,
.marquee-track-readdy * {
  white-space: nowrap !important;
}
/* Top 배너 마키도 동일 lock */
.sejong-topbar .tb-content,
.sejong-topbar .tb-msg,
.sejong-topbar .tb-once {
  white-space: nowrap !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
.sejong-topbar .tb-msg {
  display: inline-flex !important;
  width: max-content !important;
  max-width: none !important;
}

/* ────────────────────────────────────────────
   v2.8.26 — 추가 모바일 보강
   - .perf hover 짤림 방지 (실제 클래스명 적용)
   - 마키 모바일 작동 (animation 강제)
   - Top 배너 마키 2배 속도 + 끊김 없는 seamless
   - 예매 바로가기 한 줄 (nowrap)
   - 공지 카테고리 버튼 축소
   - philos stats 보조 글자 축소
   ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* (3) 다가오는 무대 .perf 카드 — 실제 클래스 정확 매칭 */
  .season-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .perf {
    grid-template-columns: 1fr !important;
    grid-column: 1/-1 !important;
    gap: 8px !important;
    padding: 18px 16px !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--border-hairline) !important;
    background: transparent !important;
    color: inherit !important;
    overflow: hidden !important;
  }
  /* v2.8.27: 모바일에서 hover 인버전(흰배경+흰글자) 완전 비활성화 — 색 원복 */
  .perf:hover,
  .perf:focus,
  .perf:active {
    padding: 18px 16px !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
  }
  .perf:hover .perf-title h3,
  .perf:hover .perf-sub,
  .perf:hover .perf-meta,
  .perf:hover .perf-meta .big,
  .perf:hover .perf-n,
  .perf:hover .perf-cta {
    color: inherit !important;
  }
  .perf:hover::before {
    width: 0 !important;
    display: none !important;
  }
  .perf:hover .perf-cta .arrow {
    background: transparent !important;
    color: var(--ink) !important;
    border-color: var(--border-strong) !important;
    transform: none !important;
  }
  .perf-thumb,
  .perf-n { display: none !important; }
  .perf-title h3 {
    font-size: 17px !important;
    line-height: 1.35 !important;
    word-break: keep-all !important;
  }
  .perf-meta {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    font-size: 11px !important;
  }
  .perf-meta .big { font-size: 16px !important; }
  .perf-cta {
    font-size: 12px !important;
    padding-top: 6px !important;
    white-space: nowrap !important;  /* "예매 바로가기" 한 줄 */
  }
  .perf-cta * { white-space: nowrap !important; }

  /* v2.8.28: 메인 배너 아래 한자 마키 — body * {max-width:100vw} 규칙 충돌 해결 */
  .marquee {
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .marquee-track,
  .marquee-track-readdy {
    animation-play-state: running !important;
    will-change: transform;
    max-width: none !important;       /* ★ body * 규칙으로 100vw 클램프되는 것 차단 */
    width: max-content !important;
    flex-shrink: 0 !important;
  }
  .marquee-track > *,
  .marquee-track-readdy > * {
    max-width: none !important;       /* 자식 span도 클램프 차단 */
    flex-shrink: 0 !important;
  }
  /* 모바일에서 좀 더 빠르게 */
  .marquee-track { animation-duration: 22s !important; }
  .marquee-track-readdy { animation-duration: 26s !important; }

  /* v2.8.28: 명인협연 빨간 시일 모바일에서 카드 안으로 (right:-24px → 8px) */
  .seal {
    right: 8px !important;
    top: 16px !important;
    width: 64px !important;
    height: 64px !important;
    font-size: 18px !important;
    transform: rotate(6deg) !important;
  }
  .hero-poster .seal,
  .hero-right .seal {
    right: 8px !important;
    top: 16px !important;
  }

  /* v2.8.28: 구독하기 버튼 한 줄 (구독하/기 분리 방지) */
  .subscribe button,
  .subscribe-form button,
  [data-db="subscribe-form"] button,
  .subscribe input[type="submit"],
  button[class*="subscribe"],
  .subs-btn {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    min-width: 120px !important;
  }
  .subscribe form,
  .subscribe-form {
    flex-wrap: wrap !important;
  }
  /* 마키 폰트 크기 모바일 적정화 */
  .marquee-item { font-size: 18px !important; }
  .marquee-item .en { font-size: 14px !important; }
  .marquee-track-readdy span span { font-size: 14px !important; }

  /* v2.8.30: Top 배너 마키 1.2배 더 빠르게 (11s → 9s) + seamless 반복 */
  .sejong-topbar .tb-msg {
    animation-duration: 9s !important;
    padding-left: 0 !important;
  }
  .sejong-topbar .tb-content {
    overflow: hidden !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }

  /* (2 추가) Philos stats 아래 글자 폰트 살짝 축소 */
  .philos-stats .lbl,
  .philos-stats .k,
  .philos-stats small,
  .philos-stats > * > div:not(:first-child),
  .philos-stats > * > span:last-child {
    font-size: 10.5px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.45 !important;
  }
  /* 큰 숫자(34/1750/first)는 24px 그대로 */
  .philos-stats .v,
  .philos-stats strong,
  .philos-stats .num,
  .philos-stats > * > :first-child {
    font-size: 24px !important;
  }

  /* 공지사항 카테고리 버튼 (PIN, NOTICE, PRESS, RECRUIT 등 칩) */
  .notice-tabs .tab,
  .notice-tabs button,
  .filter-bar .chip,
  [data-db="notices-list"] .tab,
  .pinned-hd .meta,
  .news-cat,
  [class*="cat-pill"],
  .badge-cat,
  .nl .tag {
    font-size: 9px !important;
    padding: 4px 8px !important;
    letter-spacing: 0.06em !important;
  }
  .pin .lbl, .pin .badge {
    font-size: 9px !important;
    padding: 3px 7px !important;
  }
}
@media (max-width: 900px) {
  /* 로고 명시적으로 노출 (다른 규칙에 가려질 가능성 차단) */
  .hdr .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
  }
  .hdr .brand img {
    display: block !important;
    height: 36px !important;
    width: auto !important;
    max-width: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 768px) {
  /* HERO RIGHT 카드(Featured Next Program) 우측 짤림 방지 */
  .hero-right,
  .hero-poster,
  .hero-poster .ptxt,
  .hero-poster h3,
  .hero-poster .psub,
  .hero-poster .pmeta {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .hero-poster {
    aspect-ratio: 4/5 !important;  /* 3/4 → 4/5 (덜 세로로) */
    padding: 22px !important;
    overflow: hidden !important;
  }
  .hero-poster h3 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: keep-all !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }
  .hero-poster .psub {
    font-size: 13px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    word-break: keep-all !important;
  }
  .hero-poster .pmeta {
    font-size: 10px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .hero-poster .pmeta .num {
    font-size: 26px !important;
  }
  .hero-poster .prow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
  }
  .hero-poster .prow .date { font-size: 12px !important; }
  /* 우측 한자 장식 음수 right 차단 */
  .hero-poster .hanja,
  .hero-poster::after,
  .hero-poster::before {
    display: none !important;
  }
  /* hero-rotator dots 우측 잘림 방지 */
  [data-db="hero-rotator"] .dots,
  .hero-poster .dots {
    left: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    max-width: calc(100% - 32px) !important;
  }

  /* v2.8.30: 우측 플로팅 통합 정렬
     [위쪽 그룹 — 한지 톤] 유튜브 → 인스타 → 페북 → 카페
     ─ 갭 ─
     [아래쪽 그룹 — 먹빛 톤] 예매 → 문의 → TOP
     박스 크기 모두 동일 (44×44) */
  .sns-rail {
    position: fixed !important;
    right: 10px !important;
    top: auto !important;
    bottom: 174px !important;          /* rail(3개*44 + gaps + 여유) 위 */
    transform: none !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 50 !important;
  }
  .sns-rail a {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    background: var(--hanji, #F6F1E8) !important;
    color: var(--ink, #1A1614) !important;
    border: 1px solid rgba(26,22,20,0.12) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    border-radius: 0 !important;
  }
  .sns-rail a .cafe { font-size: 12px !important; }

  .rail {
    position: fixed !important;
    right: 10px !important;
    bottom: 10px !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 51 !important;
  }
  .rail button {
    width: 44px !important;
    height: 44px !important;
    background: var(--ink, #1A1614) !important;
    color: var(--hanji, #F6F1E8) !important;
    font-size: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
    border-radius: 0 !important;
  }
  .rail button i { font-size: 14px !important; }
  .rail button span { font-size: 8px !important; }
}

/* 하단 → 상단 순서 보장 (시각적):
   [SNS 그룹 위쪽]  유튜브 → 인스타 → 페북 → 카페 (HTML 순서) → 화면에선 카페→페북→인스타→유튜브 (column-reverse)
   [예매 그룹 아래쪽]  예매 → 문의 → TOP (HTML 순서) → 화면에선 TOP→문의→예매 (column-reverse) */
@media (max-width: 768px) {
  .rail { flex-direction: column-reverse !important; }
  .sns-rail { flex-direction: column-reverse !important; }
}

/* ────────────────────────────────────────────
   v2.8.24 — 17개 모바일 UX 보강
   ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* (1) 상단 띠배너 — 짤림 방지 + 마키 효과 (자세히보기 링크 모바일 숨김) */
  .sejong-topbar {
    padding: 9px 12px !important;
    overflow: hidden !important;
    display: flex !important;
    gap: 8px !important;
  }
  .sejong-topbar .tb-content {
    max-width: none !important;
    width: 100% !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .sejong-topbar .tb-link { display: none !important; }
  .sejong-topbar .tb-msg {
    display: inline-block !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
    animation: tb-marquee 22s linear infinite;
    padding-left: 100%;
    font-size: 13px !important;
  }
  @keyframes tb-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }  /* v2.8.26: 메시지 2회 복사라 50%만 이동 = seamless */
  }
  .sejong-topbar .tb-dots { display: none !important; }
  .sejong-topbar .topbar-close {
    flex-shrink: 0 !important;
    font-size: 20px !important;
    padding: 2px 8px !important;
  }

  /* (2) Philosophy stats — 가로 3열 컴팩트 + 폰트 축소 */
  .philos-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    border-top: 1px solid var(--border-hairline) !important;
    border-bottom: 1px solid var(--border-hairline) !important;
    padding: 18px 0 !important;
    margin-top: 32px !important;
  }
  .philos-stats > * {
    padding: 0 8px !important;
    border-right: 1px dashed var(--border-hairline) !important;
    text-align: center !important;
  }
  .philos-stats > *:last-child { border-right: 0 !important; }
  .philos-stats .v,
  .philos-stats strong,
  .philos-stats .num {
    font-size: 24px !important;
    line-height: 1 !important;
    display: block !important;
    margin-bottom: 4px !important;
  }
  .philos-stats .lbl,
  .philos-stats .k,
  .philos-stats small {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
  }

  /* (3) 다가오는 무대 카드 — 한 줄 배치 + 화면 넘침 방지 */
  .upcoming-grid,
  [data-db="upcoming-grid"],
  [data-db="performances-list"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .perf-card,
  .perf-item,
  [data-db="upcoming-grid"] > *,
  [data-db="performances-list"] > * {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .perf-card:hover,
  .perf-item:hover {
    transform: none !important; /* 모바일에서 hover 변형 제거 — 화면 넘침 방지 */
  }
  .perf-meta-row,
  .perf-date-row,
  [data-db="upcoming-grid"] .meta-line {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
  .perf-card .age-badge,
  .perf-item .age-badge,
  [data-db="upcoming-grid"] .age,
  .perf-card .duration,
  .perf-item .duration { display: none !important; } /* 8세 이상 등 보조 정보는 모바일에서 숨김 */
  .perf-card .title-row,
  .perf-item .title,
  [data-db="upcoming-grid"] h3 {
    font-size: 17px !important;
    line-height: 1.35 !important;
    word-break: keep-all !important;
  }

  /* (4) 다섯 방향 한자 — 모바일에서 더 줄임 (텍스트 겹침 방지) */
  .fivel-cell .ch {
    font-size: 56px !important;
    margin-top: 12px !important;
    opacity: 0.85 !important;
  }
  .fivel-cell {
    padding: 24px 20px !important;
    min-height: 160px !important;
  }
  .fivel-cell .lb,
  .fivel-cell .nm,
  .fivel-cell .cnt { position: relative; z-index: 2; }

  /* (7) (14) (16) 가로 스크롤 방지 — 모든 페이지 공통 */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body { position: relative; }
  /* v2.8.30: 마키·인트로 등 가로 스크롤 콘텐츠는 예외 */
  body *:not(.marquee-track):not(.marquee-track-readdy):not(.marquee-track *):not(.marquee-track-readdy *):not(.tb-msg):not(.tb-msg *):not(.tb-once):not(.sejong-intro *) {
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* 큰 한자 장식이 화면 넘치는 것 차단 */
  .han, .han-bg, [data-han],
  .helpline::before, .ftr::before,
  section::before {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  /* aspect-ratio가 너비를 강제로 설정해서 가로스크롤 만드는 경우 차단 */
  .portrait, .hero-poster, .hero-right, .perf-thumb {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* (8) 공연일정 카드 박스 구분 강화 + 클릭 표시 */
  .row-perf,
  .perf-row,
  [data-db="schedule-list"] > a,
  [data-db="schedule-list"] > div,
  .schedule-item {
    background: var(--paper, #FBF8F2) !important;
    border: 1px solid var(--border-hairline, rgba(26,22,20,0.12)) !important;
    border-left: 3px solid var(--dancheong-red, #B8342A) !important;
    padding: 18px 18px 18px 16px !important;
    margin-bottom: 12px !important;
    display: block !important;
    cursor: pointer !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
  }
  .row-perf:active,
  .perf-row:active,
  [data-db="schedule-list"] > a:active,
  .schedule-item:active {
    border-color: var(--ink, #1A1614) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }
  .row-perf::after,
  .perf-row::after,
  [data-db="schedule-list"] > a::after,
  .schedule-item::after {
    content: "→" !important;
    position: absolute !important;
    right: 14px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--dancheong-red, #B8342A) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    pointer-events: none !important;
  }
  .row-perf {
    position: relative !important;
    padding-right: 36px !important;
  }
  /* 날짜+요일+시간 한 줄로 */
  .row-perf .date,
  .perf-row .date {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .row-perf .date .d {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .row-perf .date .m,
  .row-perf .date .t {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
  }

  /* v2.8.27: 아카이브 페이지네이션 가로 정리 (세로 잘림 방지) */
  .pagi {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 24px 16px 40px !important;
    gap: 4px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pagi::-webkit-scrollbar { display: none; }
  .pagi button {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
  }
  .pagi .arrow { font-size: 14px !important; }

  /* v2.8.27: 아카이브 푸터 위 PRESS 인용구(.qstrip) 글자 축소 */
  .qstrip { padding: 60px 16px !important; }
  .qstrip::before {
    font-size: 240px !important;
    right: -30px !important;
    top: -60px !important;
  }
  .qstrip h2 {
    font-size: 22px !important;
    line-height: 1.5 !important;
    word-break: keep-all !important;
  }
  .qstrip .lbl { font-size: 10px !important; margin-bottom: 16px !important; }
  .qstrip .author {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
  }
  .qstrip .author .nm { font-size: 14px !important; }
  .qstrip .author .src { font-size: 10px !important; margin-left: 0 !important; }

  /* v2.8.27: 아카이브 상단 카운터 - 더 컴팩트 */
  .counter {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 16px 16px 0 !important;
  }
  .counter > div {
    padding: 18px 12px !important;
    border-right: 1px dashed var(--border-hairline) !important;
    border-bottom: 1px dashed var(--border-hairline) !important;
  }
  .counter > div:nth-child(2n) { border-right: 0 !important; }
  .counter > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .counter .n { font-size: 32px !important; line-height: 1 !important; }
  .counter .n .u { font-size: 0.5em !important; }
  .counter .lb { font-size: 9px !important; margin-top: 6px !important; }

  /* (11) 아카이브 상단 큰 숫자 영역 컴팩트 */
  .archive-stats,
  .archive-counter,
  [data-db="archive-counter"],
  .ar-counter {
    padding: 24px 16px !important;
  }
  .archive-stats .big-num,
  .archive-counter .num,
  [data-db="archive-counter"] .num,
  .ar-counter .num {
    font-size: 56px !important;
    line-height: 1 !important;
  }
  .archive-stats .lbl,
  .archive-counter .lbl,
  [data-db="archive-counter"] .lbl {
    font-size: 11px !important;
  }
  /* archive page hero 압축 */
  .page-hero h1.h-archive,
  body[data-page="archive"] .page-hero h1 {
    font-size: clamp(36px, 11vw, 52px) !important;
  }
  /* 큰 통계 그리드 (예: 3개의 큰 숫자) */
  .ar-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 16px !important;
  }
  .ar-stats-grid .num { font-size: 32px !important; }
  .ar-stats-grid .lbl { font-size: 10px !important; }

  /* (12)(13) 아카이브 필터 — 모바일 가로 스크롤로 */
  .archive-filter,
  .ar-filter,
  [data-db="archive-filter"] {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .archive-filter::-webkit-scrollbar,
  .ar-filter::-webkit-scrollbar { display: none; }
  .archive-filter button,
  .archive-filter .chip,
  .ar-filter button,
  .ar-filter .chip {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* v2.8.28: 구독 신청 영역 텍스트 짤림 종합 수정 */
  .sub, section.sub, .sub-box {
    padding: 40px 16px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .sub-box {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 20px !important;
  }
  .sub-box > div:first-child .l {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 12px !important;
  }
  .sub-box h3 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  .sub-box h3 small {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-top: 6px !important;
    color: var(--fg2) !important;
    word-break: keep-all !important;
  }
  .sub-box p {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    word-break: keep-all !important;
  }
  .sub-form .row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .sub-form input[type="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 14px !important;
    font-size: 14px !important;
  }
  .sub-form button {
    width: 100% !important;
    padding: 13px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
  .sub-form .opts {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }
  .sub-form .opts label {
    font-size: 12px !important;
    word-break: keep-all !important;
  }
  .sub-form .fine {
    font-size: 11px !important;
    line-height: 1.6 !important;
    word-break: keep-all !important;
  }

  /* v2.8.28: 페이지네이션 바 정렬 */
  .pagi-bar {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .pagi-bar .pagi-btn,
  .pagi-bar button {
    flex-shrink: 0 !important;
  }

  /* (15) 구독 신청 영역 — 버튼 가운데 정렬 */
  .subscribe,
  .subscribe-form,
  [data-db="subscribe-form"],
  .footer-subscribe {
    text-align: center !important;
    padding: 32px 16px !important;
  }
  .subscribe-form,
  .subscribe form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .subscribe-form input,
  .subscribe input[type="email"] {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }
  .subscribe-form button,
  .subscribe button {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* (17) 문의 폼 의뢰유형 2×2 그리드 */
  .inquiry-type,
  .inq-type,
  [data-db="inquiry-types"],
  fieldset.type-group,
  .form-row.type-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .inquiry-type label,
  .inq-type label,
  fieldset.type-group label,
  .form-row.type-group label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 8px !important;
    border: 1px solid var(--border-strong, rgba(26,22,20,0.3)) !important;
    background: var(--paper, #FBF8F2) !important;
    cursor: pointer !important;
    text-align: center !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
    min-height: 56px !important;
    transition: all 0.2s !important;
    margin: 0 !important;
  }
  .inquiry-type input[type="radio"],
  .inq-type input[type="radio"],
  fieldset.type-group input[type="radio"],
  .form-row.type-group input[type="radio"] {
    display: none !important;
  }
  .inquiry-type input[type="radio"]:checked + label,
  .inq-type input[type="radio"]:checked + label,
  fieldset.type-group input[type="radio"]:checked + label,
  .form-row.type-group input[type="radio"]:checked + label,
  .inquiry-type label:has(input:checked),
  fieldset.type-group label:has(input:checked) {
    background: var(--ink, #1A1614) !important;
    color: var(--hanji, #F6F1E8) !important;
    border-color: var(--ink) !important;
  }

  /* 모든 페이지 — 큰 한자 장식이 가로스크롤 만드는 것 차단 */
  .helpline::before,
  section[id]::before,
  [class*="-bg-han"],
  .han-bg, .han-decoration {
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* v2.8.27: 문의 페이지 전체 모바일 최적화 */
  .hero-title {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-bottom: 20px !important;
    margin-bottom: 32px !important;
  }
  .hero-title h1 {
    font-size: clamp(36px, 11vw, 56px) !important;
    line-height: 1 !important;
    word-break: keep-all !important;
  }
  .hero-title h1 .it {
    font-size: 0.42em !important;
    margin-top: 6px !important;
  }
  .hero-title .meta {
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
  }
  .hero-title .meta strong { font-size: 12px !important; }
  .hero-title .eb { font-size: 10px !important; margin-bottom: 10px !important; }

  /* persona 2열 → 1열, 패딩·폰트 축소 */
  .persona {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .p-tile {
    padding: 28px 22px !important;
    min-height: auto !important;
    gap: 12px !important;
  }
  .p-tile::before {
    font-size: 220px !important;
    right: -30px !important;
    top: -30px !important;
  }
  .p-tile .step { font-size: 10px !important; }
  .p-tile .step .num { font-size: 24px !important; }
  .p-tile h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .p-tile h2 .en { font-size: 0.5em !important; }
  .p-tile .dsc { font-size: 13px !important; line-height: 1.7 !important; }

  /* 폼 영역 */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .form-body {
    padding: 24px 18px !important;
  }
  .form-body .sct {
    font-size: 11px !important;
    margin-bottom: 12px !important;
    padding-top: 24px !important;
  }
  .form-body .sct:first-of-type { padding-top: 0 !important; }
  #form-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  #form-title .it { font-size: 0.55em !important; display: block; margin-top: 6px !important; }
  /* "공연 의뢰를 남겨주세요" 줄임 */
  .form-grid .form-side .lede,
  .form-body > p,
  .form-grid .form-info {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
  .form-body .row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-body label,
  .form-body .fld label {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .form-body input,
  .form-body textarea,
  .form-body select {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
  .form-body button[type="submit"],
  .form-body .submit-btn {
    width: 100% !important;
    padding: 16px !important;
    font-size: 14px !important;
  }

  /* "무엇을 도와드릴까요" 등 가이드 헤더 줄임 */
  .form-grid h3,
  .form-grid .form-title-wrap h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* v2.8.27: 함께하는곳 헤더 정리 */
  .partners-section .partners-hd,
  [class*="partners"] .hd,
  section[data-section="partners"] .hd {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* "IN PARTNERSHIP WITH" / "Cultural Partners · 협력기관" 영문 한 줄 강제 */
  [class*="partners"] [class*="eb"],
  [class*="partners"] [class*="lbl"],
  [class*="partners"] .meta,
  .partners-strip-wrap .eb,
  .partners-strip-wrap .meta {
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
  }
  /* 파트너 카드 — 영문이 두 줄 되어도 카드 높이 통일 (좌우 align) */
  .partner-card-inner,
  [data-db="partners-strip"] .partner-card-inner,
  [data-db="partners-strip"] > * > div {
    min-height: 130px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
    padding: 18px 12px !important;
  }
  /* 텍스트 영역 통일 (한글 + 영문 둘 다 카드 하단 고정) */
  .partner-card-inner > div:last-child,
  [data-db="partners-strip"] .partner-card-inner > div:last-child {
    width: 100% !important;
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }
  /* 영문 폰트 살짝 줄여서 두 줄 방지 우선, 두 줄 되어도 줄간격 통일 */
  [data-db="partners-strip"] .partner-card-inner > div:last-child > div:last-child {
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
}

/* ≤480px 에서 의뢰유형 1열로 (너무 좁으면) */
@media (max-width: 380px) {
  .inquiry-type, .inq-type, fieldset.type-group, .form-row.type-group {
    grid-template-columns: 1fr !important;
  }
  .fivel-cell .ch { font-size: 48px !important; }
}

/* ────────────────────────────────────────────
   ≤480px : 작은 모바일 — 추가 미세 조정
   ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .hdr { padding: 12px 14px !important; }
  /* 로고 텍스트 유지 (작게) */
  .hdr .brand .stk { display: flex !important; }
  .hdr .brand .stk .kr { font-size: 14px !important; letter-spacing: -0.02em !important; }
  .hdr .brand .stk .en { font-size: 8px !important; letter-spacing: 0.10em !important; margin-top: 3px !important; }
  .hdr .brand img { height: 32px !important; }

  section { padding: 60px 16px !important; }
  .hero { padding: 24px 16px 36px !important; }
  .hero-left h1, .hero-h { font-size: 38px !important; }
  .ftr { padding: 48px 16px 28px !important; }
  .ftr-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* v2.8.89: 작은 폰에서도 단원 카드 2명/줄 유지 + 정사각 사진 */
  .members-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .mphoto { aspect-ratio: 1/1 !important; }
  .mcard { padding: 0 0 10px !important; }
  .mname { font-size: 13px !important; margin: 8px 10px 2px !important; }
  .mrole { font-size: 10px !important; margin: 0 10px !important; }

  /* 사이드 rail 더 작게 */
  .sns-rail a { width: 36px !important; height: 36px !important; font-size: 16px !important; }
  .rail button { width: 40px !important; height: 40px !important; }
}