/* ═══════════════════════════════════════════════════════════════
   ARTFORM — 모바일 반응형 단일 소스 (mobile.css)
   · 데스크톱 마크업/스타일은 그대로 두고 모바일에서만 오버라이드
   · 모든 페이지(index + 서브페이지)에 마지막으로 링크
   · 브레이크포인트: 980px(태블릿 진입) / 600px(폰 미세조정)
   · mobile-nav.js 가 만드는 .m-burger / .m-nav 표시도 여기서 제어
   ═══════════════════════════════════════════════════════════════ */

/* 데스크톱에선 모바일 전용 요소 숨김 */
.m-burger, .m-nav { display: none; }

@media (max-width: 980px) {

  /* ── 0) 전역 안전장치 ────────────────────────── */
  html, body { overflow-x: hidden; max-width: 100%; }
  body { min-width: 0 !important; }   /* desktop-first 1440 고정 해제 */
  img, svg, video, image-slot { max-width: 100%; }
  .wrap, .wrap-wide, .wrap-i, .av3-wrap {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }
  /* 고정폭 !important 규칙(header-index.css / index 인라인) 동급 무력화 */
  header.site .wrap-wide, .utility .wrap-wide {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* index 인라인 .info-session 2단 → 스택 */
  .info-session .row { grid-template-columns: 1fr !important; padding: 48px 20px !important; gap: 28px !important; max-width: 100% !important; }

  /* ── 1) 유틸바 — 핵심만(전화 pill) 남기고 정리 ── */
  .utility .left, .utility .ticker { display: none !important; }
  .utility .wrap-wide, .utility .row { justify-content: flex-end !important; }
  .utility .right { gap: 12px; }
  .utility .right a:not(.pill) { display: none !important; }

  /* ── 2) 헤더 — 데스크톱 네비/CTA 숨기고 햄버거 노출 ── */
  header.site .row { height: 64px !important; grid-template-columns: 1fr auto !important; }
  header.site .wrap-wide { padding: 0 20px !important; }
  nav.primary { display: none !important; }
  header.site .end { display: none !important; }
  header.site .logo img, header.site .logo .logo-img { height: 34px !important; }

  .m-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box;
    background: none; border: none; cursor: pointer; justify-self: end;
  }
  .m-burger span {
    display: block; height: 2px; width: 24px; background: var(--ink, #15161a);
    border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
  }
  .m-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-burger.is-open span:nth-child(2) { opacity: 0; }
  .m-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 모바일 메뉴 패널 */
  .m-nav {
    display: block; position: fixed; left: 0; right: 0;
    top: 0; height: 100dvh;
    background: var(--bg, #fcfcfb);
    transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 200; padding: 88px 28px 40px; box-sizing: border-box;
    overflow-y: auto;
  }
  body.m-nav-open .m-nav { transform: translateX(0); }
  body.m-nav-open { overflow: hidden; }
  .m-nav .m-links { display: flex; flex-direction: column; }
  .m-nav .m-links a {
    display: flex; align-items: baseline; gap: 12px;
    padding: 20px 4px; border-bottom: 1px solid var(--line-2, #e6e3da);
    text-decoration: none;
  }
  .m-nav .m-links a .nm {
    font-family: var(--display-kr, var(--display, sans-serif));
    font-weight: 700; font-size: 24px; letter-spacing: -0.03em; color: var(--ink, #15161a);
  }
  .m-nav .m-links a .en {
    font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted, #9a978d);
  }
  .m-nav .m-cta-wrap { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
  .m-nav .m-cta {
    height: 58px; border-radius: 999px; background: var(--ink, #15161a); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-weight: 700; font-size: 16px; text-decoration: none;
  }
  .m-nav .m-cta .arr { color: var(--accent, #fe5000); }
  .m-nav .m-phone {
    text-align: center; font-family: var(--display-kr, sans-serif); font-weight: 700;
    font-size: 22px; letter-spacing: -0.02em; color: var(--ink, #15161a); text-decoration: none;
    padding: 8px;
  }

  /* ── 3) 큰 타이포 축소 (본문 섹션 한정) ────────── */
  main h1, section h1, .av3-hero h1, .pg-head h1 { font-size: clamp(30px, 8.5vw, 46px) !important; line-height: 1.08 !important; }
  section h2, .cb-top h2 { font-size: clamp(25px, 6.8vw, 38px) !important; line-height: 1.14 !important; }
  section h3 { font-size: clamp(20px, 5.2vw, 28px) !important; }
  /* 장식용 초대형 숫자/이탤릭 톤다운 */
  .av3-cta h2, .mp-res .head h2, .hof .top .meta-rt .y { font-size: clamp(30px, 8vw, 44px) !important; }

  /* ── 4) 다단 그리드 → 1열 (전역 + 커스텀 컨테이너) ── */
  [class*="grid"], .cols, .triad, .scoreboard, .winners, .masonry,
  .gl-imgs, .gal-grid, .stations, .strip, .board-grid, .cb-top,
  .av3-class .t, .av3-board .lf .stats, .av3-esg .hrd, .mp-feat .inner,
  .mp-prin .grid, .roster, .cp-card .body {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* 섹션 헤더(타이틀+설명 2단) → 세로 스택 */
  [class*="av3-"] .head, .mp-feat .head, .mp-res .head, .mp-dir-idx .head,
  .gl-head, .hof .top, .nw-head {
    grid-template-columns: 1fr !important; gap: 16px !important;
  }
  [class*="av3-"] .head .rt, .mp-feat .head .rt, .mp-res .head .rt {
    text-align: left !important; justify-self: start !important; max-width: 100% !important;
  }

  /* 강사/작품 등은 2열 유지가 자연스러움 */
  .cp-card .faculty .roster, .mp-dir-idx .roster, .av3-core .grid,
  .av3-result .grid, .av3-with .grid, .av3-esg .grid, .gl-imgs, .gal-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 5열 로고 → 2열 */
  .av3-group .row { grid-template-columns: 1fr !important; gap: 16px !important; }
  .av3-group .row .label { padding-top: 0 !important; }
  .av3-group .row .label h4 { font-size: 20px !important; }
  .av3-group .row .logos { grid-template-columns: repeat(2, 1fr) !important; }
  .av3-group .row .logos .lg { min-height: 140px !important; }
  .av3-group .row .logos .lg .logo { height: 72px !important; }
  /* 캠퍼스 비교표 — 가로 스크롤 허용 */
  .cp-table table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 12px; }

  /* ── 5) 무거운 장식/비핵심 — 모바일 숨김 ───────── */
  .cp-hero .collage { display: none !important; }          /* 캠퍼스 12칸 콜라주 */
  .av3-time .stations::before, .av3-time .stations::after { display: none !important; }

  /* ── 6) 푸터 정리 ──────────────────────────────── */
  footer.site { padding: 56px 0 28px !important; }
  footer.site .cols { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }
  footer.site .col.brand { grid-column: 1 / -1; }
  footer.site .meta { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; }

  /* ── 7) 공용 상담 밴드 ─────────────────────────── */
  .consult-band .wrap { padding: 56px 20px 48px !important; }
  .cb-actions { justify-self: stretch !important; max-width: 100% !important; }
  .cb-related .grid { grid-template-columns: 1fr !important; }

  /* ── 8) 카드 내부 2단(이미지+텍스트) 스택 ──────── */
  .av3-class .t { gap: 20px !important; padding: 24px !important; }
  .av3-board .lf .stats .s + .s { border-left: none !important; padding-left: 0 !important; }
  .mp-feat .portrait-block { max-width: 420px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   9) 컨텍스트별 초대형 타이포·그리드 강제 축소 (특이도/!important 대응)
   데스크톱 인라인 CSS가 클래스 컨텍스트로 거대 폰트를 지정 →
   동일 이상 특이도 + 후순위 + !important 로 확실히 덮는다.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {

  /* ── 0) catch-all: 클래스 없이 부모 컨텍스트로 지정된 초대형 헤딩까지
     확실히 캡 (구체 규칙이 더 구체적이라 그대로 우선) ── */
  h1 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.06 !important; }
  h2 { font-size: clamp(26px, 7vw, 38px) !important; line-height: 1.08 !important; }
  h3 { font-size: clamp(20px, 5.4vw, 30px) !important; line-height: 1.12 !important; }

  /* 헤딩: <br>는 유지하되 keep-all + balance 로 단어 붙음/한글자 밀림 방지 */
  h1, h2, h3, h4 { word-break: keep-all !important; text-wrap: balance !important; }

  /* ── 캠퍼스 카드 ── */
  .cp-card { padding: 48px 22px !important; }
  .cp-card .top h2 { font-size: clamp(30px, 8.5vw, 42px) !important; line-height: 1.05 !important; }
  .cp-card .top h2 .en { font-size: 15px !important; margin-top: 8px !important; }
  .cp-card .top .ix { font-size: clamp(46px, 13vw, 64px) !important; }
  .cp-card.c5 { padding: 48px 22px !important; }
  .cp-card .top { flex-direction: column !important; gap: 14px !important; }
  .cp-card .top .rt { align-items: flex-start !important; }

  /* ── 캠퍼스 비교표 헤더 ── */
  .cp-table .head { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cp-table .head h2 { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1 !important; }
  .cp-table .head h2 .it { font-size: clamp(26px, 7vw, 36px) !important; }

  /* ── 맨파워: 원칙/스포트라이트/채용 헤딩 ── */
  .mp-prin .head h2, .mp-feat .head h2, .mp-hire .lf h2 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.04 !important; }
  .mp-prin .head h2 .it, .mp-feat .head h2 .it, .mp-hire .lf h2 .it { font-size: clamp(26px, 7vw, 38px) !important; }
  .mp-prin .head, .mp-feat .head, .mp-hire .inner { grid-template-columns: 1fr !important; display: block !important; }
  .mp-prin .head .rt, .mp-feat .head .rt, .mp-hire .lf p { max-width: 100% !important; text-align: left !important; margin-top: 14px !important; }
  .mp-prin .triad { grid-template-columns: 1fr !important; }
  .mp-prin .triad .cell { padding: 32px 24px !important; }
  .mp-prin .triad .cell .ix { font-size: clamp(40px, 11vw, 54px) !important; }
  .mp-feat .portrait-block .frame .yrs { font-size: clamp(56px, 18vw, 90px) !important; }
  .mp-feat .portrait-block .frame .nm-overlay .k { font-size: clamp(34px, 9vw, 50px) !important; }
  .mp-hire { padding-left: 0 !important; padding-right: 0 !important; }

  /* ── 인덱스 홈: 자체 !important 그리드/폰트 무력화 ── */
  .powers .triad { grid-template-columns: 1fr !important; }
  .powers .triad .cell { padding: 36px 24px !important; }
  .powers .triad .cell .ix { font-size: clamp(40px, 11vw, 54px) !important; }
  .powers .head { grid-template-columns: 1fr !important; display: block !important; }
  .powers .head .rt { max-width: 100% !important; margin-top: 14px !important; }
  .gallery .gal-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .manpower .roster { grid-template-columns: repeat(2, 1fr) !important; }
  .manpower .tcard:last-child { display: block !important; }
  .campus .map-grid { grid-template-columns: 1fr !important; }
  .news .grid, .hof .winners { grid-template-columns: 1fr !important; }
  .hof .scoreboard { grid-template-columns: repeat(3, 1fr) !important; }
  /* 인덱스 히어로·섹션 대형 헤딩 — 원본 !important 셀렉터와 동일 특이도로 후순위 우선 */
  .hero .corner h1 { font-size: clamp(30px, 8.5vw, 46px) !important; line-height: 1.04 !important; }
  .hero .corner h1 .it { font-size: clamp(28px, 8vw, 42px) !important; }
  .powers .head .lf h2,
  .hof .top h2,
  .info-session .lf h2,
  .consult h2 { font-size: clamp(28px, 7.5vw, 42px) !important; line-height: 1.05 !important; }
  .powers .head .lf h2 .it,
  .consult h2 .it,
  .info-session .lf h2 .it { font-size: clamp(26px, 7vw, 38px) !important; }
  .essence .head .rt h2, .essence h2 { font-size: clamp(28px, 7.5vw, 42px) !important; }
  .campus .head h2, .gallery h2, .news h2, .manpower h2, .featured .rt h2,
  .contrib h2, .passer-list h2, .interviews h2, .cta-band h2 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.06 !important; }
  /* 맨파워 강사 인덱스 헤딩 */
  .mp-dir-idx .head h2 { font-size: clamp(28px, 7.5vw, 42px) !important; line-height: 1.05 !important; }

  /* ── 섹션 헤더(제목+설명 2단/grid/flex) 전부 세로 1열로 강제 ──
     원인: .head/.top 컨테이너가 모바일에서도 grid 2-col → 제목이 좁은 칸에
     갇혀 글자가 세로로 찢어짐(최대 16줄). 풀폭 블록으로 풀어준다. */
  section .head, section .top, .wrap .head, .wrap .top, .av3-wrap .head,
  .gl-head, .nw-head, .cp-table .head, .hof .top, .mp-dir-idx .head {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  section .head > *, section .top > *, .wrap .head > *, .wrap .top > * {
    max-width: 100% !important;
    width: auto !important;
    text-align: left !important;
    justify-self: start !important;
  }
  /* 헤더 설명문은 제목 아래로 간격 */
  section .head > * + *, section .top > * + * { margin-top: 12px !important; }

  /* 본문 단락: 한 글자 고아·중간 끊김 방지 (<br>는 유지) */
  p, .desc, .sub, .lede, .lead, li { word-break: keep-all; text-wrap: pretty; }

  /* about — Operation 타임라인(.ops) 다단 → 1열, 항목 내부 풀폭 */
  .av3-time .ops { grid-template-columns: 1fr !important; gap: 28px !important; }
  .av3-time .ops .op { display: block !important; }
  .av3-time .ops .op h4, .av3-time .ops .op p { width: auto !important; max-width: 100% !important; margin-top: 10px !important; }

  /* index 푸터 뉴스레터 2단 → 1열 (제목이 37px로 찢어지던 문제) */
  footer.site .newsletter { grid-template-columns: 1fr !important; display: block !important; gap: 20px !important; }
  footer.site .newsletter > * { max-width: 100% !important; width: auto !important; }
  footer.site .newsletter .copy { width: auto !important; }
  footer.site .newsletter .copy h4 { font-size: clamp(24px, 6.5vw, 34px) !important; line-height: 1.12 !important; }

  /* index .campus 섹션 헤더 풀폭 강제 */
  .campus .head { width: 100% !important; max-width: none !important; }
  .campus .head > *, .campus .head > * > * { width: 100% !important; max-width: none !important; }

  /* 서브페이지 히어로(.pg-head .row 2단 grid) → 1열, 제목 풀폭
     (campus/gallery/hall-of-fame/news 공통 — 제목이 104px로 갇히던 문제) */
  .pg-head .row { grid-template-columns: 1fr !important; display: block !important; }
  .pg-head .row > * { width: auto !important; max-width: 100% !important; }
  .pg-head .row > * + * { margin-top: 20px !important; }

  /* campus CTA 중앙 헤딩 — 원래 <br> 3줄 구조가 깔끔 → 복원 */
  .cp-cta h2 br { display: revert !important; }
  .cp-cta h2 .it { display: inline !important; }
  .cp-cta h2 { line-height: 1.35 !important; font-size: clamp(22px, 6vw, 30px) !important; }

  /* consult 섹션 2단 grid 잔존 → 1열 (제목 w224로 갇히던 문제) */
  .consult .grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* 캠퍼스 카드 제목: 한글 2줄+영문 → 폰트 살짝 축소, 영문 작게 */
  .cp-card .top h2 { font-size: clamp(28px, 7.2vw, 34px) !important; }
  .cp-card .top h2 .en { font-size: 13px !important; margin-top: 6px !important; }

  /* 섹션 패딩 56px가 남아 제목 폭을 좁히던 문제 — 더 높은 특이도로 강제 */
  section.wrap, section.wrap-wide, section.wrap-i,
  div.wrap, div.wrap-wide, div.wrap-i,
  .campus.wrap, .pg-head.wrap, .consult.wrap, .hof.wrap,
  .gallery.wrap, .news.wrap, .manpower.wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* index 히어로 코너 — 62%로 갇혀 제목이 좁게 찢어지던 문제 */
  .hero .corner { max-width: 92% !important; left: 20px !important; right: 20px !important; }

  /* ═══════════════════════════════════════════════════════════
     10) 모바일 콘텐츠 압축 — 페이지가 과도하게 길던 문제(최대 21,600px)
     섹션 패딩 축소 + 빈 이미지 슬롯 높이 캡 + 긴 리스트 정리
     ═══════════════════════════════════════════════════════════ */
  /* 섹션 세로 패딩 대폭 축소 (160px → 56px급) */
  .av3-section, .av3-class, .av3-result, .av3-group, .av3-time, .av3-core,
  .av3-why, .av3-board, .av3-esg, .av3-with, .av3-hero,
  .powers, .campus, .hof, .gallery, .news, .manpower, .consult, .essence,
  .info-session, .featured, .interviews, .contrib,
  .mp-feat, .mp-prin, .mp-dir, .mp-dir-idx, .mp-hire, .cp-hero, .cp-cta,
  .consult-band, .pg-head {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* 카드/항목 내부 과한 패딩 축소 */
  .av3-class .t { padding: 24px !important; }
  .cp-card { padding: 40px 20px !important; }
  .mp-prin .triad .cell, .powers .triad .cell { padding: 32px 22px !important; }

  /* 빈 이미지 슬롯이 세로로 거대하게 쌓이던 문제 — 높이 캡 */
  image-slot { max-height: 320px !important; }
  .hof image-slot, .featured image-slot, .gallery image-slot,
  .av3-result image-slot, .mp-feat image-slot { max-height: 280px !important; }
  /* 강사 포트레이트(세로형)는 적정 비율 유지 */
  .mp-dir-idx .roster image-slot, .cp-card .faculty image-slot { max-height: 240px !important; }
  /* 단, 스포트라이트 포트레이트는 프레임 오버레이(이름/연차)와 어긋나지 않게 캡 해제 */
  .mp-feat .portrait-block .frame image-slot { max-height: none !important; }
  /* mp-feat 2단(.inner)이 남아 포트레이트가 0폭으로 붕괴 → 1열 스택 */
  .mp-feat .inner { grid-template-columns: 1fr !important; display: block !important; }
  .mp-feat .portrait-block { max-width: 420px !important; margin: 0 auto 28px !important; width: auto !important; }

  /* campus 히어로 퀵스탯(.cp-net)이 화면 밖으로 넘치던 문제 → 줄바꿈/스택 */
  .cp-hero .cp-net { flex-wrap: wrap !important; gap: 14px 20px !important; }
  .cp-hero .cp-net .quick { flex-wrap: wrap !important; }
  .cp-net, .cp-net > * { max-width: 100% !important; }

  /* 모바일에서 비핵심 장식 요소 숨김(길이/잡음 감소) */
  .hero .marquee, .marquee { display: none !important; }

  /* ═══════════════════════════════════════════════════════════
     11) 모바일 콘텐츠 간소화 — 항목은 유지하되 군더더기/프리뷰 길이 축소
     ═══════════════════════════════════════════════════════════ */
  /* about 수업 카드: 키워드 칩 숨겨 컴팩트 (6개 항목·설명은 유지) */
  .av3-class .t .rt .keys { display: none !important; }
  .av3-class .t { gap: 16px !important; }

  /* about 협력기업 로고월: 파트너 설명문 숨김(로고/이름만) */
  .av3-group .row .label p { display: none !important; }

  /* manpower 강사 인덱스: 모바일은 8명만 노출(헤더에 ‘전체 보기’ 존재) */
  .mp-grid .tcard:nth-child(n+9) { display: none !important; }

  /* index 갤러리 프리뷰 6 → 4개 */
  .gallery .gal-grid .work:nth-child(n+5) { display: none !important; }
  /* index 강사 프리뷰 카드 12 → 6개 */
  .manpower .tcard:nth-child(n+7) { display: none !important; }

  /* ── PC 배열 잔재로 과압축된 그리드 정리 ── */
  /* about 합격대학 리스트 3열(68/44/57px) → 1열 */
  .av3-result .schools { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* campus 카드 .extra 2열 → 1열 (작품영역이 102px로 갇히던 문제) */
  .cp-card .extra { grid-template-columns: 1fr !important; display: block !important; }
  .cp-card .extra > * + * { margin-top: 18px !important; }
  .cp-card .extra > * { width: auto !important; max-width: 100% !important; }
  .cp-card .works { width: 100% !important; }
  .cp-card .works .row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  /* manpower 강사 필터 3열(79px) → 1열 스택 */
  .mp-filters { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* 9~10px 초소형 라벨 → 최소 가독 크기 보정 */
  .stmp, .tag, .stamp, .lbl, .badge { font-size: 11px !important; }
}

/* ── 폰 미세조정 ──────────────────────────────────── */
@media (max-width: 600px) {
  .av3-core .grid, .av3-result .grid, .av3-with .grid, .av3-esg .grid,
  .cp-card .faculty .roster, .mp-dir-idx .roster {
    grid-template-columns: 1fr 1fr !important;
  }
  .gl-imgs, .gal-grid, .masonry { grid-template-columns: 1fr 1fr !important; }
  .wrap, .wrap-wide, .wrap-i, .av3-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  section h1, .av3-hero h1, .pg-head h1 { font-size: clamp(28px, 9vw, 38px) !important; }
}