/* 모바일 정돈 시안(2026-10-28): 휴대폰(640px 이하)에서만 적용한다.
   고정 UI 경량화 · 카드 표면 통일 · 라벨 톤 낮춤 · 터치 영역 44px · 표/푸터 정리. */
@media (max-width: 640px) {
  /* 1. 화면 하단 고정 UI: 떠 있는 메뉴 버튼은 상단 메뉴와 중복이라 숨기고, 상담 바는 얇은 알약형으로 */
  .mobile-menu-fab { display: none !important; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-decision-bar {
    width: auto;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.88);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
  .mobile-decision-bar a {
    min-height: 44px;
    border-radius: 0;
    font-size: 15px;
    letter-spacing: -0.01em;
  }
  .mobile-decision-bar a:first-child { border-color: var(--line-strong); }

  /* 2. 섹션 라벨: 빨간 영문 대문자가 반복되면 산만해서, 히어로 외에는 차분한 회색 톤으로.
     기존 body.site-premium 규칙보다 우선하도록 body[class]를 붙인다. */
  body[class] main .kicker:not(.t-tag),
  body[class] main .eyebrow,
  body[class] main .section-label,
  body[class] main .home-section__index { color: var(--muted); letter-spacing: 0.14em; }

  /* 2-1. 본문의 빨강은 흰 배경 대비가 4.5:1에 못 미쳐(4.3:1) 한 단계 진한 빨강으로.
     히어로 라벨은 빨강을 유지한다. */
  body[class] main { --red: #c92b23; }
  body[class] main .home-hero .kicker,
  body[class] main .hero .kicker,
  body[class] main .template-hero .kicker,
  body[class] main .teacher-hero .kicker,
  body[class] main .decision-page__intro .kicker { color: var(--red); }

  /* 3. 카드 표면 통일: 얇은 선 + 아주 옅은 그림자 + 동일한 모서리 */
  .course-card,
  .content-review-card,
  .news-latest-card,
  .direction-info-card,
  .study-level-card,
  .program-choice-card,
  .home-experience,
  .info-card,
  .album-card,
  .schedule-directory__row {
    overflow: hidden;
    border: 1px solid var(--line) !important;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(13, 13, 13, 0.03), 0 10px 28px rgba(13, 13, 13, 0.05);
  }
  .schedule-directory__row { padding: 20px !important; margin-bottom: 12px; }

  /* 3-1. 섹션 여백: 위아래 80px씩이면 섹션 사이 빈 공간이 화면의 1/4가량이라 56px로 */
  body[class] main :is(.section, .home-section, .closing-cta, .schedule-directory, .news-board-section, .news-start-cta) {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  body[class] main .home-scenes__captions > p:last-child { padding-bottom: 0; }
  body.site-premium { --premium-section-space: 56px; }

  /* 3-2. 프로그램 이름표: 분홍 알약 대신 짧은 선 + 글자로 (각진 사이트 톤에 맞춤) */
  body[class] main .program-choice-card__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  body[class] main .program-choice-card__label::before {
    content: "";
    width: 16px;
    height: 1px;
    background: currentColor;
  }

  /* 3-3. 긴 페이지 바로가기: 헤더 아래에 붙어 따라오는 가로 스크롤 탭 */
  .page-jump {
    position: sticky;
    top: 78px;
    z-index: 40;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    scrollbar-width: none;
  }
  .page-jump::-webkit-scrollbar { display: none; }
  .page-jump a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line-strong, #d4d0c8);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  main section[id] { scroll-margin-top: 140px; }

  /* 3-4. 후기 출처·분류 배지: 알약 대신 각진 모서리로 */
  body[class] main :is(.review-provenance__brand, .review-category) { border-radius: 2px; }

  /* 3-5. 달력의 지난달·다음달 날짜가 거의 안 보여서 한 단계 진하게 */
  body[class] .monthly-calendar-day.is-outside .monthly-calendar-day-number { color: #8a8a85; }

  /* 3-6. 메뉴는 툭 나타나지 않고 짧게 내려오며 나타나게 */
  html.is-menu-open #primary-navigation { animation: mobile-nav-in 0.22s ease-out; }
  @keyframes mobile-nav-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }

  /* 4. 터치 영역: 작은 글자 링크도 최소 44px */
  .schedule-directory__row h2 a,
  main .text-link,
  .direction-info-card a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 5. 환불 기준 표: 가로 스크롤 대신 위아래 카드형 */
  .academy-policy-table,
  .academy-policy-table tbody,
  .academy-policy-table tr,
  .academy-policy-table td { display: block; width: 100%; }
  .academy-policy-table thead { display: none; }
  .academy-policy-table caption { display: block; margin-bottom: 8px; text-align: left; }
  .academy-policy-table tr { padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 8px; }
  .academy-policy-table td { padding: 0; border: 0; }
  .academy-policy-table td:first-child { color: var(--muted); font-size: 13px; }
  .academy-policy-table td:last-child { margin-top: 4px; font-weight: 700; }

  /* 6. 푸터 링크: 한 줄 나열 대신 2열 그리드, 줄마다 44px */
  .site-footer .footer-links nav { display: grid; width: 100%; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .site-footer .footer-links nav a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); }
}

/* 바로가기 탭은 휴대폰 전용 */
@media (min-width: 641px) { .page-jump { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html.is-menu-open #primary-navigation { animation: none; }
}