/* ═══════════════════════════════════════════════════════════════════
   24-mobile.css — 모바일 전용 레이아웃 (S-182)
   방침: 모바일은 연출을 걷어내고 읽기·조작 가능성을 우선한다.
   브레이크포인트 820px = 제작 라인 isMobile() 및 기존 @media 다수와 동일.
   레이어 미사용(@layer) — 레거시 규칙이 전부 unlayered라 레이어로 감싸면
   오히려 우선순위가 역전된다(S-181 딥리서치 판정).
   본 파일은 styles.css 뒤에 로드되어 동일 특정도에서 후행 승리한다.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* ─────────────────────────────────────────────
     ① 공통 — 터치 타깃 (WCAG 2.2 AA 2.5.8 = 24×24 하한)
     레이아웃 이동을 최소화하려 세로 padding으로만 키운다.
     ───────────────────────────────────────────── */
  .bar__link {
    padding: 9px 6px;
    font-size: 9.5px;
  }
  .bar__link::after { bottom: 7px; left: 6px; right: calc(100% - 6px); }
  .bar__link.is-active::after { right: 6px; }

  .bar__mark { padding: 7px 0; }

  /* 바에 배경이 없어 본문이 바 글자 밑으로 지나간다 → 글자 위 글자 겹침.
     모바일에선 불투명 밴드로 분리한다. */
  .bar {
    background: var(--cream-high);
    box-shadow: 0 6px 12px -8px rgba(16, 21, 16, .28);
  }

  .bar__lang-b { min-width: 30px; min-height: 30px; padding: 6px 4px; }

  /* ── 한국어 줄바꿈 ──
     좁은 폭에서 브라우저 기본값은 음절 단위로 끊어 '패 / 키지'처럼 깨진다.
     keep-all로 어절을 지키고, 끊을 곳이 없는 긴 문자열만 예외로 쪼갠다. */
  .disco, #people-page, .boardpage, .bookingpage, .chapterpage, .index-page {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* 하단 고정 버튼(↓) 밑으로 본문이 지나가 글자가 겹친다 */
  #people-page, .boardpage__inner { padding-bottom: 92px; }

  #globalBooking.bar__cta,
  .bar__cta { min-height: 38px; padding: 11px 14px; }

  .bar__toc,
  #tocOpen {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 푸터 링크 — 22px 였음 */
  .trinity-footer a {
    display: inline-block;
    padding: 9px 2px;
  }
  .program-group__faq { display: inline-block; padding: 10px 2px; }

  /* ─────────────────────────────────────────────
     ② 디스코그래피 — 턴테이블 연출 제거, 커버 그리드
     폴백 커버는 .disco__fallback-deck 내부에 있으므로
     덱을 숨기지 않고 "그리드 컨테이너로 중화"한다.
     ───────────────────────────────────────────── */
  .disco__tonearm { display: none; }

  .disco__fallback {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
  }

  /* 원반 → 평범한 블록 */
  .disco__fallback-deck {
    position: static;
    width: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    padding: 248px 16px 96px;   /* 제목 밴드(실측 최대 230px) 아래에서 시작 */
  }
  .disco__fallback-deck::before,
  .disco__fallback-deck::after { display: none; }
  .disco__fallback-label { display: none; }

  /* 커버 → 3열 그리드 */
  .disco__fallback-covers {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .disco__fallback-covers img {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transform: none;
    border-width: 2px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(16, 21, 16, .12);
  }

  /* 그리드에는 "현재 선택된 한 장" 개념이 없다 — 캡션은 오해를 부른다 */
  .disco.has-fallback .disco__caption { display: none; }

  /* 제목이 그리드 위에 떠 있으면 겹친다 — 불투명 밴드로 고정 */
  .disco.has-fallback .disco__head {
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 113px 18px 14px;   /* 바 실측 103px + 여유 10 */
    background: var(--cream-high);
    box-shadow: 0 8px 14px -8px rgba(16, 21, 16, .25);
  }
  .disco.has-fallback .disco__sub { max-width: none; font-size: 12.5px; }
  .disco.has-fallback .disco__title { font-size: 22px; line-height: 1.25; }

  /* 턴테이블 조작 안내 — 턴테이블이 없으므로 무의미 */
  #disco.has-fallback::after { display: none; }

  /* ─────────────────────────────────────────────
     ③ 인물 · 장비 — 2×2 확장 사분면 → 1열 스택
     확장 오프셋(--dx/--dy, 11.55cqw)이 좁은 폭에서 패널을
     화면 밖으로 밀어 잘림을 만든다. 모바일에선 확장 자체를 끈다.
     ───────────────────────────────────────────── */
  #people-page .quadsec {
    min-height: 0;
    padding: clamp(84px, 11vh, 110px) 16px 44px;
  }

  #people-page .quad {
    width: 100%;
    max-width: 560px;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    container-type: normal;
    transition: none;
  }
  /* 확장 상태 무력화 */
  #people-page .quad.ex-tl,
  #people-page .quad.ex-br {
    --c1: 1fr; --c2: 1fr; --r1: 1fr; --r2: 1fr;
    --dx: 0px; --dy: 0px;
  }

  #people-page .q { min-width: 0; }
  #people-page .q--img { aspect-ratio: 4 / 3; }
  #people-page .q--copy { padding: 18px 16px; }

  #people-page .q__morelabel { font-size: 10px; }
  #people-page .gidx__row { font-size: 12px; gap: 10px; }

  /* 14px 높이였던 CTA */
  #people-page .gidx__cta {
    display: block;
    min-height: 44px;
    padding: 13px 0;
    margin-top: 10px;
    font-size: 12px;
  }

  /* ─────────────────────────────────────────────
     ④ 공지 · 게시판 — 캘린더 잘림, 터치 타깃
     ───────────────────────────────────────────── */
  /* 캘린더 — 글자를 쪼개지 않고 한 줄에 넣는다.
     원인은 폰트가 아니라 폭이었다: 셀 텍스트 26px vs '대체공휴일' 자연폭 41px.
     바깥 여백(inner 16px · bbox 16px · day 5px)을 회수해 45px를 만든다.
     넘치는 긴 이름은 글자 쪼갬이 아니라 말줄임으로 끝낸다. */
  .boardpage__inner { padding-left: 10px; padding-right: 10px; }
  .bbox { padding-left: 9px; padding-right: 9px; }

  .board-calendar__day {
    padding: 3px 0;
    min-height: 62px;
  }
  /* 실제 웹폰트(Pretendard) 폭이 미확보라, 가장 넓은 대체 글꼴 기준으로 여유를 둔다 */
  .board-cal-entry {
    padding: 3px 1px;
    font-size: 8px;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .board-calendar__holiday {
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .board-calendar__today { white-space: nowrap; }

  /* 화살표 · 열기 버튼 */
  #board-calendar-prev,
  #board-calendar-next {
    min-width: 44px;
    min-height: 44px;
  }
  #tocClose.toc-panel__close { min-width: 44px; min-height: 44px; }
  #tocWheelSw.toc-wheel__sw { min-height: 34px; }
  .bbox-viewall,
  .bov-open {
    min-height: 44px;
    padding: 12px 14px;
    display: inline-flex;
    align-items: center;
  }

  /* 전체보기 오버레이 썸네일 — 폭만 조정.
     고유 비율(o1.jpg 460×236) 실측 확인(S-182) 후, 비율 강제는 철회했다.
     강제하면 원본을 세로 35% 잘라낸다. */
  .vov__shot { width: clamp(84px, 26vw, 132px); }

  /* ─────────────────────────────────────────────
     ⑤ 문의 — iOS 자동확대 차단(16px 하한) + 전폭 폼
     ───────────────────────────────────────────── */
  .booking-input,
  .booking-textarea {
    font-size: 16px;
    line-height: 1.45;
  }
  .booking-input { height: 52px; padding: 0 0 9px; }
  .booking-textarea { height: 104px; padding: 8px 0 10px; }

  .booking-head__title {
    white-space: normal;
    word-break: keep-all;
    padding-right: 46px;      /* 닫기(×) 버튼과 글자가 겹치지 않게 */
    font-size: 25px;
    line-height: 1.22;
  }
  .booking-head__sub { padding-right: 46px; }
  .booking-choice__label { word-break: keep-all; }

  .booking-field + .booking-field { margin-top: 6px; }

  .booking-submit,
  .booking-form button[type="submit"] {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
  }

  .booking-consent label,
  .booking-consent a {
    display: inline-block;
    padding: 6px 0;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .booking-consent input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   S-184 추가분 — 실기기(iPhone 14 Pro Max · 430×775) 실측 기반 교정
   방침: 각 챕터 컨테이너의 "안쪽 스크롤"을 실제로 열고,
         상단 고정 바 높이만큼 내용 시작점을 내린다.
   근거: TRI2 프로브 실측 (2026-08-10) — 컨테이너 대비 내용 높이·삐져나감 측정
   앞 절과 동일 브레이크포인트(820px). 같은 파일 후행이므로 앞 규칙을 이긴다.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* ─────────────────────────────────────────────
     ⑥ 상단 바 — ON AIR 표시가 메뉴에 붙어 있던 문제
     ───────────────────────────────────────────── */
  .bar { padding-bottom: 14px; }
  .onair,
  .bar__onair,
  [class*="on-air"],
  [class*="onair"] { margin-top: 8px; }

  /* ─────────────────────────────────────────────
     ⑦ 목차(index) — 시작점 -40px 로 위가 잘리고,
        고정 높이 shell 때문에 아래가 넘쳐나던 문제
        실측: 화면칸 815px / 내용 1090px / top -40
     ───────────────────────────────────────────── */
  .index {
    inset: 0;
    transform: none;
    height: auto;
    margin-top: 40px;
    align-items: flex-start;
    padding-top: 118px;      /* 바 실측 103px + 여유 15 */
    padding-bottom: 40px;
  }
  .index__in { margin: 0; }
  .index__shell { height: auto; }
  .index__detail-stage { min-height: 0; }

  /* ─────────────────────────────────────────────
     ⑧ 작품 아카이브 — 컨테이너가 스크롤 막힘이라
        커버 3,184px 중 775px만 보이던 문제
     ───────────────────────────────────────────── */
  .disco.has-fallback {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .disco.has-fallback .disco__fallback {
    position: static;
    inset: auto;
    height: auto;
    overflow: visible;
    overscroll-behavior: contain;
  }
  /* 제목 밴드 실측 최대 230px — 그 아래에서 커버가 시작해야 한다 */
  .disco.has-fallback .disco__fallback-deck {
    padding-top: 240px;
    padding-bottom: 60px;
  }

  /* ─────────────────────────────────────────────
     ⑨ 인물 · 장비 — 내용이 top 0 에서 시작해 상단 바에 가리던 문제
        + 장비 목록 글자가 과대해 한 화면에 안 들어오던 문제
     ───────────────────────────────────────────── */
  #people-page { padding-top: 0; }
  #people-page .quadsec {
    padding-top: 132px;
    padding-bottom: 56px;
  }
  #people-page #equipment-list,
  #people-page .gear { padding-top: 24px; }

  #people-page #equipment-list .gidx__row {
    font-size: 10.5px;
    gap: 7px;
    padding: 5px 0;
  }
  #people-page #equipment-list h2,
  #people-page #equipment-list .gidx__title { font-size: 17px; }
  #people-page #equipment-list .gidx__group { margin-bottom: 12px; }

  /* ─────────────────────────────────────────────
     ⑩ 프로그램(promap) — 안쪽이 위로 528px 삐져나가
        제목·머리글이 통째로 잘리던 문제
     ───────────────────────────────────────────── */
  #promap { overflow-y: auto; }
  #promap .promap__inner {
    position: static;
    inset: auto;
    height: auto;
    padding-top: 118px;
    padding-bottom: 60px;
  }

  /* ─────────────────────────────────────────────
     ⑪ 공지 · 게시판 — 제목이 화면 위로 나가 공지가 안 보이던 문제
        (열릴 때 scrollTop 198px 로 내려가 있던 것은 JS 25번에서 처리)
     ───────────────────────────────────────────── */
  #board-page .boardpage__inner { padding-top: 128px; }

  /* ─────────────────────────────────────────────
     ⑫ 푸터 — 1,337px(화면 1.7개분)까지 늘어지던 문제
        연출부 축소 + 정보부 2열 가로 배치
     ───────────────────────────────────────────── */
  .trinity-footer {
    font-size: 11.5px;
    line-height: 1.5;
  }

  /* 연출부 */
  .trinity-footer__stage {
    padding-top: 30px;
    padding-bottom: 18px;
  }
  .trinity-footer__lockup { gap: 10px; }
  .trinity-footer__headline {
    font-size: 34px;
    line-height: 1;
  }
  .trinity-footer__record {
    max-height: 96px;
    overflow: hidden;
  }
  .trinity-footer__caption {
    margin-top: 10px;
    font-size: 10.5px;
    line-height: 1.45;
  }

  /* 정보부 — 2열. 첫 칸(소개글)만 전폭 */
  .trinity-footer__rail {
    padding-top: 18px;
    padding-bottom: 12px;
  }
  .trinity-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
  }
  .trinity-footer__cell:first-child { grid-column: 1 / -1; }

  .trinity-footer__wordmark {
    font-size: 15px;
    margin-bottom: 6px;
  }
  .trinity-footer__descriptor {
    font-size: 12px;
    line-height: 1.55;
    max-width: none;
  }
  .trinity-footer__label { margin-bottom: 6px; }
  .trinity-footer__copy {
    font-size: 12px;
    line-height: 1.5;
  }
  .trinity-footer__links { gap: 1px; }
  .trinity-footer__links a {
    font-size: 11.5px;
    line-height: 1.5;
    padding: 2px 0;
  }
  /* 채널 칸 — 한 줄씩 쌓이던 것을 가로로 */
  .trinity-footer__cell:nth-child(4) .trinity-footer__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  /* 하단 저작권·링크 — 가로 배치, 저작권 줄만 전폭 */
  .trinity-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding-top: 12px;
  }
  .trinity-footer__bottom > span { flex: 1 0 100%; }
}

/* ═══════════════════════════════════════════════
   S-185 · 공지 화면 상자 붕괴 교정
   .bbox 가 flex:1 1 0px 이라 세로가 좁으면 32px 까지
   찌부러져 제 머리글까지 잘라먹었다. 기준을 내용 높이로 돌린다.
   실기기 육안 통과 2026-08-11
   ═══════════════════════════════════════════════ */
@media (max-width: 820px) {
  .bcol { height: auto; min-height: 0; align-items: stretch; }
  #board-page .bcol > .bbox,
  section.bbox {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #board-page .bcol > .bbox > .bbox__body,
  section.bbox .bbox__body {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════
   S-186 · 사파리 vh 넘침 교정
   .stage 가 100vh(=853, 주소창 접힌 기준)로 잡혀 실제 가시영역 745 를
   108px 넘겼다. sticky 가 활주로 끝에서 그만큼 밀려 목차 제목이
   헤더 밑으로 들어갔다. svh = 주소창 펼친 기준 → 항상 화면 안.
   프로덕션은 별건 — padding-top 이 헤더(107)보다 작아 제목이 붙었다.
   실기기 실측 2026-08-11 (iPhone · vh853 / lvh853 / dvh745 / svh745)
   ═══════════════════════════════════════════════ */
@media (max-width: 820px) {
  .stage { height: 100svh; }
  #service-page .servicepage__inner { padding-top: 118px !important; }
}

/* ===== S-188 문의 화면 모바일 전용 재구성 ===== */
@media (max-width:740px){
  .bookingpage{ background:#D3DAC4; }
  .booking-scene{ display:none !important; }
  .booking-glass{
    background:#FAFAF8 !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important; border:0 !important;
    box-shadow:none !important; border-radius:14px !important;
    margin:82px 16px 24px !important; width:auto !important;
  }
  .booking-glass::before,.booking-glass::after{ display:none !important; }
  .booking-head{ padding:20px 16px 4px !important; border-bottom:0 !important; }
  .booking-head__eyebrow{ display:none !important; }
  .booking-head__title{ font-size:24px !important; line-height:1.25 !important; }
  .booking-head__sub{ font-size:13px !important; margin-top:6px !important; }
  .booking-choices{ display:none !important; }
  .booking-marquee{ display:none !important; }
  .booking-formpane{ padding:4px 16px 20px !important; min-height:0 !important;
                     display:flex !important; flex-direction:column !important; }
  .mi-field{ display:block; margin:14px 0 0; }
  .mi-label{ display:block; margin:0 0 6px; font-family:var(--tri-ui);
             font-size:11px; letter-spacing:.12em; color:#6b675f; }
  .mi-select{ width:100%; height:50px; padding:0 12px; background:#fff;
              border:1px solid #b9b6ac; border-radius:8px; font-size:15px;
              color:#211D1A; font-family:var(--tri-ui); }
  .booking-input,.booking-textarea{
    border:1px solid #b9b6ac !important; border-radius:8px !important;
    background:#fff !important; padding:0 12px !important; font-size:15px !important; }
  .booking-input{ height:50px !important; }
  .booking-textarea{ height:88px !important; padding:12px !important; }
  .booking-fields,.booking-grid{ gap:14px !important; }
  .booking-actions{ order:9 !important; margin-top:18px !important; }
  .booking-consent{ order:8 !important; position:static !important;
    top:auto !important; margin:18px 0 0 !important; font-size:11.5px !important;
    line-height:1.5 !important; color:#4a463f !important; }
  .booking-submit{ width:100% !important; min-height:54px !important;
    border-radius:27px !important; background:#211D1A !important;
    color:#FAFAF8 !important; box-shadow:none !important; }
  .booking-direct{ order:10 !important; margin-top:16px !important;
    display:flex !important; gap:10px !important; width:100% !important; }
  .booking-channel{ flex:1 !important; height:48px !important; border:1px solid #8f8c83 !important;
    border-radius:10px !important; justify-content:center !important; font-size:14px !important; }
}

/* ===== S-188b 여백 보정 · 채널 2줄 ===== */
@media (max-width:740px){
  .booking-textarea{ margin-bottom:0 !important; }
  .booking-actions{ margin-top:16px !important; padding-top:0 !important; }
  .booking-formpane{ padding-bottom:16px !important; }
  .booking-consent{ margin:12px 0 0 !important; padding:0 4px 4px !important; }
  .booking-direct{ display:grid !important; grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important; margin-top:14px !important; }
  .booking-channel{ width:auto !important; height:50px !important; font-size:15px !important; }
  .booking-glass{ margin-bottom:16px !important; }
}

/* ===== S-188c 마지막 여백 ===== */
@media (max-width:740px){
  .booking-fields > *:last-child,
  .booking-grid > *:last-child{ margin-bottom:0 !important; }
  .booking-fields{ padding-bottom:0 !important; }
  .booking-actions{ margin-top:8px !important; }
}

/* ===== S-189 문의 화면 보정 (S-188/b/c 대체 · 바 실측 106 근거) ===== */
@media (max-width:740px){
  body.booking-page-open .bar{ color:#211D1A !important; text-shadow:none !important; }
  body.booking-page-open .bar__mark{ color:#211D1A !important; }
  body.booking-page-open .bar__nav,
  body.booking-page-open .bar__nav a,
  body.booking-page-open .bar__cta{ color:#4a463f !important; text-shadow:none !important; }

  .booking-glass{ margin:65px 16px 32px !important; }

  .booking-close{ width:28px !important; height:28px !important;
    right:9px !important; top:9px !important; font-size:19px !important; }

  .mi-field{ display:block !important; margin:0 !important; }

  .booking-actions{ display:flex !important; flex-direction:column !important;
    margin-top:14px !important; padding-top:0 !important; }
  .booking-consent{ order:1 !important; position:static !important;
    width:auto !important; margin:0 0 12px !important; padding:0 !important;
    text-align:left !important; font-size:11.5px !important;
    line-height:1.55 !important; color:#4a463f !important;
    text-shadow:none !important; pointer-events:auto !important; }
  .booking-submit{ order:2 !important; }
  .booking-direct{ order:3 !important; margin-top:16px !important; }
}

/* ===== S-189b 바 슬림 · 닫기 통합 · 한글 자간 (booking 화면 한정) ===== */
@media (max-width:740px){
  body.booking-page-open .bar{
    background:transparent !important; box-shadow:none !important;
    border:0 !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    padding:0 16px !important; min-height:0 !important; }
  body.booking-page-open .bar__nav{ display:none !important; }
  body.booking-page-open .bar__cta{
    padding:7px 14px !important; font-size:10.5px !important;
    min-height:0 !important; height:auto !important;
    border-radius:999px !important; }
  .booking-close{ display:none !important; }
  .booking-line__label,.mi-label{
    letter-spacing:0 !important; font-size:11px !important;
    text-transform:none !important; }
  .booking-line__optional{ letter-spacing:0 !important; }
}

/* S-192 bar-slim-global: booking 53px pattern -> all screens (height only) */
@media (max-width:820px){
  .bar__nav{display:none !important}
  .bar{padding:0 16px !important;min-height:0 !important}
}

/* S-193 lang-toggle touch target (2026-08-13) */
@media (max-width:820px){
  .bar__lang-b{min-width:44px;min-height:44px;margin:-7px -7px;
    display:inline-flex;align-items:center;justify-content:center}
}