/* =====================================================================
   KOREARO 반응형 (태블릿·모바일 전용)
   - 모든 규칙은 1199px 이하에서만 동작 → PC(1200px 이상) 화면은 전혀 바뀌지 않는다.
   - includes/head-i18n.php 에서 각 페이지의 다른 CSS·인라인 <style> 뒤에 불러온다(가장 나중 = 우선).
   - 구간: 태블릿 768~1199 / 모바일 ~767 / 작은 모바일 ~374
   ===================================================================== */

/* 언어 전체 이름(lang_name)은 햄버거 메뉴창 버튼에서만 보임 — PC 상단 버튼은 기존 짧은 표기(한/EN/VI) 그대로 */
.btn-lang .lang-name { display: none; }

/* =========================== 태블릿 + 모바일 (~1199) =========================== */
@media (max-width: 1199.98px) {

  /* --- 가로 넘침 방지: 푸터 방문자 줄이 한 줄로 고정돼 화면 밖으로 밀리던 문제 --- */
  .footer-visits { flex-wrap: wrap; margin-left: 0; row-gap: .35rem; }

  /* --- 고정 배경(background-attachment: fixed)은 모바일 사파리에서 확대·깨짐 → 일반 배경으로 --- */
  .section-stats,
  .section-shortcuts { background-attachment: scroll; }

  /* --- 햄버거 메뉴 패널: 흰 바탕 목록형 + 언어 선택(맨 위, 펼침 목록 — 언어가 20개로 늘어도 그대로) --- */
  .navbar .offcanvas { width: min(86vw, 360px); background: #fff; }
  .navbar .offcanvas-header { padding: .95rem 1.25rem; border-bottom: 1px solid #edf0ee; }
  .navbar .offcanvas-title { font-weight: 900; font-size: 1.12rem; letter-spacing: -.01em; color: var(--heading) !important; }
  .navbar .offcanvas-body { padding: .9rem 1.25rem 2rem; display: flex; flex-direction: column; }

  /* 언어: 현재 언어 버튼 → 누르면 아래로 세로 목록(많아지면 목록 안에서 스크롤) */
  .navbar .offcanvas .dropdown { order: -1; margin: 0 0 .4rem !important; }
  .navbar .offcanvas .btn-lang {
    display: flex; align-items: center; gap: .4rem; width: 100%;
    padding: .6rem .9rem; border: 1px solid #dfe5e1 !important; border-radius: 10px;
    font-size: .9rem; font-weight: 600; color: var(--heading) !important; background: #fff; text-align: left;
  }
  .navbar .offcanvas .btn-lang .bi { color: var(--accent-dark); }
  .navbar .offcanvas .btn-lang [data-i18n="lang_current"] { display: none; }
  .navbar .offcanvas .btn-lang .lang-name { display: inline; }
  .navbar .offcanvas .btn-lang.dropdown-toggle::after { margin-left: auto; }
  .navbar .offcanvas .dropdown-menu {
    position: static !important; inset: auto !important; transform: none !important;
    width: 100%; margin: .35rem 0 0 !important; padding: .3rem;
    max-height: 50vh; overflow-y: auto;
    border: 1px solid #e3e8e5; border-radius: 10px; box-shadow: none;
  }
  .navbar .offcanvas .dropdown-item { padding: .6rem .75rem; border-radius: 7px; font-size: .9rem; color: var(--text); }
  .navbar .offcanvas .dropdown-item:hover { background: #f4f6f5; }
  .navbar .offcanvas .dropdown-item.active { background: #f0fbf4; color: var(--accent-dark); font-weight: 700; }

  /* 메뉴 목록: 분류 이름(굵게) + 하위 메뉴 글자 링크, 분류 사이 얇은 선 */
  .navbar .offcanvas .navbar-nav { margin: 0 !important; gap: 0 !important; }
  .navbar .offcanvas .nav-item { padding: .85rem 0; border-bottom: 1px solid #eef1ef; }
  .navbar .offcanvas .nav-item:last-child { border-bottom: 0; }
  .navbar .offcanvas .nav-link {
    display: block; padding: .15rem 0 !important;
    font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35;
    color: var(--heading) !important;
  }
  .navbar .offcanvas .nav-link::after { display: none; }
  .navbar .offcanvas .nav-link:hover { transform: none; color: var(--accent-dark) !important; }
  .navbar .offcanvas .nav-link.active { color: var(--accent-dark) !important; }
  .navbar .offcanvas .nav-sub {
    display: flex; flex-wrap: wrap; gap: .1rem 1.15rem;
    margin: .3rem 0 0; padding: 0; border: 0; list-style: none;
  }
  .navbar .offcanvas .nav-sub a {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0;
    background: none; border-radius: 0;
    font-size: .9rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em;
    color: var(--text-light) !important; word-break: keep-all;
  }
  .navbar .offcanvas .nav-sub a:hover { color: var(--heading) !important; }
  .navbar .offcanvas .nav-sub a.is-active { color: var(--accent-dark) !important; font-weight: 700; }

  /* --- 메인: 숫자 카드 — 큰 숫자가 두 줄로 쪼개지지 않게 --- */
  .stat-card { padding: 1.6rem 1rem; }
  .stat-card .stat-number { font-size: 1.75rem; letter-spacing: -.02em; }

  /* --- 메인: 단계 카드(Bento) 태블릿 배치 — 위 2장 크게, 아래 3장 --- */
  .section-steps .row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: 150px;
  }
  .section-steps .row > [class*="col"]:nth-child(n) { grid-column: span 2; grid-row: span 1; }
  .section-steps .row > [class*="col"]:nth-child(1),
  .section-steps .row > [class*="col"]:nth-child(2) { grid-column: span 3; }
  .section-steps .row > [class*="col"]:nth-child(1) .step-card,
  .section-steps .row > [class*="col"]:nth-child(5) .step-card {
    padding: 1.2rem 1.4rem; flex-direction: column; align-items: flex-start; gap: 0;
  }
  .section-steps .row > [class*="col"]:nth-child(1) .step-title,
  .section-steps .row > [class*="col"]:nth-child(2) .step-title { font-size: 1.3rem; }
  .section-steps .row > [class*="col"]:nth-child(5) .step-title { font-size: 1.1rem; }
  .section-steps .row > [class*="col"]:nth-child(1) .step-sub { font-size: .9rem; }
  .section-steps .row > [class*="col"]:nth-child(1) .step-watermark { font-size: 9rem; right: -8px; bottom: -30px; }

  /* --- 아코디언 질문(h2)이 섹션 제목 규칙(밑줄·아래 여백)을 물려받아 닫힌 질문 아래 빈칸이 생기던 문제 --- */
  .docs-content .subpage-section .accordion h2.accordion-header,
  .docs-content.section-flow .subpage-section .accordion h2.accordion-header { padding: 0; margin: 0; border: 0; font-size: inherit; }

  /* --- 수치 카드·아이콘 목록: 번역 글이 길어도 칸 밖으로 밀리지 않게 --- */
  .info-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-stat-card { min-width: 0; overflow-wrap: break-word; }
  .icon-list strong { flex: 0 1 auto; min-width: 0; }

  /* --- 대학찾기: 지도 가운데 정렬 --- */
  #krMap { margin: 0 auto; }
}

/* =========================== 태블릿 (768~1199) =========================== */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .docs-layout { padding-left: 1.5rem; padding-right: 1.5rem; }
  /* 메인: 주요 학과 6장 → 3장씩 두 줄 */
  .section-majors-preview .row > .col-lg-2 { flex: 0 0 auto; width: 33.3333%; }
}

/* =========================== 모바일 (~767) =========================== */
@media (max-width: 767.98px) {

  /* 기준 글자 16px → 15px: rem으로 잡힌 본문·제목·카드·여백이 같은 비율로 한 단계 작아짐(보편 정보 사이트 본문 14~16px) */
  html { font-size: 15px; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* 기준 글자를 내려도 너무 작아지지 않게 작은 표시 글자 하한 11px */
  .cc-chip, .stat-card .stat-source, .timeline-item .tl-tag, .country-card .country-tag, .section-label { font-size: 11px; }
  /* 짧은 제목·라벨은 줄 길이를 고르게(한 글자만 다음 줄로 떨어지는 것 방지) */
  .section-title, .section-sub, .hero-headline, .hero-sub, .intro-text h2, .cta-banner-inner h2,
  .stat-card .stat-label, .help-card p, .major-preview-card h4, .major-preview-card p,
  .info-stat-card .lbl, .tool-preview-card h3, .gs-hero h1 { text-wrap: balance; }
  /* 제목은 낱말 단위 줄바꿈(한국어 '있 / 습니다'처럼 글자 중간 끊김 방지) */
  h1, h2, h3, h4, h5, h6 { word-break: keep-all; overflow-wrap: break-word; }
  .container { padding-left: 16px; padding-right: 16px; }

  /* ---------- 헤더 ---------- */
  .navbar { padding: 10px 0; }
  .navbar-brand { font-size: 1.12rem; }
  .navbar-brand i { font-size: 1.35rem; }
  .navbar-toggler { padding: 6px 4px; }

  /* ---------- 공통 섹션 헤더 ---------- */
  .section-header { margin-bottom: 1.75rem; }
  .section-label { font-size: .72rem; letter-spacing: .12em; }
  .section-title { font-size: 1.42rem; line-height: 1.35; letter-spacing: -.02em; padding-bottom: 10px; word-break: keep-all; }
  .section-title::after { width: 44px; }
  .section-sub { font-size: .92rem; line-height: 1.6; word-break: keep-all; }

  /* ---------- 메인 히어로 ---------- */
  .hero-section { min-height: 100svh; padding-top: 88px; padding-bottom: 72px; }
  .hero-headline { font-size: 1.72rem; line-height: 1.32; letter-spacing: -.03em; margin-bottom: .75rem; word-break: keep-all; }
  .hero-sub { font-size: .95rem; line-height: 1.55; margin-bottom: 1.5rem; word-break: keep-all; }
  .search-wrap { max-width: none; margin-bottom: 1.6rem; }
  .search-input { font-size: 1rem; padding: 13px 16px 13px 44px; }
  .search-icon { left: 16px; font-size: 1.05rem; }
  .hero-audience-label { font-size: .85rem; margin-bottom: .6rem; }
  .btn-hero-pill { padding: 7px 14px; font-size: .86rem; }
  .hero-controls { bottom: 18px; }

  /* ---------- 메인 섹션 간격 ---------- */
  .section-steps,
  .section-stats,
  .section-intro,
  .section-shortcuts,
  .section-tools-preview,
  .section-majors-preview,
  .section-faq,
  .section-cta-banner,
  .section-help { padding: 3.25rem 0; }
  .section-countries { padding: 3.25rem 0 3rem; }

  /* ---------- 메인: 유학의 모든 여정 → 세로 목록형 ---------- */
  .section-steps .row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto;
    gap: 8px !important;
  }
  .section-steps .row > [class*="col"]:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .section-steps .row > [class*="col"]:nth-child(n) .step-card {
    display: grid !important;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    grid-template-areas: "num title" "num sub";
    column-gap: .4rem;
    align-items: center;
    padding: 1rem 1.1rem;
    min-height: 76px;
  }
  .section-steps .step-card .step-number { grid-area: num; align-self: center; font-size: .82rem; margin: 0 !important; color: var(--accent-dark) !important; }
  .section-steps .row > [class*="col"]:nth-child(n) .step-title { grid-area: title; font-size: 1.05rem; line-height: 1.35; margin: 0 0 .1rem !important; letter-spacing: -.01em; }
  .section-steps .row > [class*="col"]:nth-child(n) .step-sub { grid-area: sub; font-size: .84rem; }
  .section-steps .row > [class*="col"]:nth-child(n) .step-watermark { font-size: 4.6rem; right: 10px; bottom: -14px; opacity: .45; }
  .section-steps .step-card:hover { transform: none; }

  /* ---------- 메인: 숫자로 보는 한국 유학 (2×2) ---------- */
  .section-stats .row { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
  .stat-card { padding: 1.15rem .6rem 1rem; }
  .stat-card > i { font-size: 1.05rem; }
  .stat-card .stat-number { font-size: 1.42rem; margin: .2rem 0 .35rem; }
  .stat-card .stat-label { font-size: .8rem; line-height: 1.4; word-break: keep-all; }
  .stat-card .stat-source { font-size: .7rem; margin-top: .35rem; }

  /* ---------- 메인: 왜 전문대학교 유학인가요? ---------- */
  .section-intro .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1.5rem; }
  .intro-img { aspect-ratio: 16 / 10; border-radius: 12px; }
  .intro-text h2 { font-size: 1.42rem; letter-spacing: -.02em; line-height: 1.35; margin-bottom: .75rem; word-break: keep-all; }
  .intro-text p,
  .home .intro-text p { font-size: .97rem; line-height: 1.75; }
  .intro-feature-row { margin-top: 1.25rem; --bs-gutter-y: .9rem; }
  .intro-feature strong { font-size: .95rem; }
  .intro-feature span { font-size: .86rem; }

  /* ---------- 메인: 출신국 롤링 ---------- */
  .countries-marquee::before,
  .countries-marquee::after { width: 36px; }
  .countries-track { gap: 10px; }
  .countries-track .country-card { flex: 0 0 148px; padding: 1.1rem .7rem; }
  .country-card .country-flag { font-size: 2.2rem; margin-bottom: .4rem; }
  .country-card .country-name { font-size: .96rem; }
  .country-card .country-count { font-size: .8rem; }

  /* ---------- 메인: 바로가기 → 2열 버튼 ---------- */
  .section-shortcuts .d-flex.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem !important;
  }
  .shortcut-btn {
    justify-content: flex-start;
    padding: .8rem .9rem;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 10px;
    white-space: normal;
    line-height: 1.3;
    word-break: keep-all;
  }
  .shortcut-btn:hover { transform: none; }
  .section-shortcuts .shortcut-btn:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }

  /* ---------- 메인: 계산기 미리보기 ---------- */
  .section-tools-preview .row { --bs-gutter-y: .8rem; }
  .tool-preview-card { padding: 1.35rem 1.25rem; }
  .tool-preview-card .tool-icon { width: 42px; height: 42px; font-size: 1.2rem; margin-bottom: .85rem; }
  .tool-preview-card h3 { font-size: 1.12rem; }
  .tool-preview-card p,
  .home .tool-preview-card p { font-size: .92rem; line-height: 1.65; margin-bottom: 1rem; }
  .tool-preview-card:hover { transform: none; }

  /* ---------- 메인: 주요 학과 (2열) ---------- */
  .section-majors-preview .row { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
  .major-preview-card .major-thumb { aspect-ratio: 16 / 10; }
  .major-preview-card .major-content { padding: .75rem .8rem .85rem; }
  .major-preview-card .major-content i { font-size: 1rem; margin-bottom: .25rem; }
  .major-preview-card h4 { font-size: .92rem; line-height: 1.35; letter-spacing: -.01em; word-break: keep-all; }
  .major-preview-card p { font-size: .76rem; line-height: 1.45; word-break: keep-all; }
  .section-majors-preview .text-muted.small { font-size: .78rem; line-height: 1.6; word-break: keep-all; }

  /* ---------- 메인: 자주 묻는 질문 ---------- */
  .faq-accordion .accordion-button {
    padding: 1.05rem .2rem 1.05rem .85rem;
    font-size: .98rem;
    line-height: 1.45;
    letter-spacing: -.01em;
    word-break: keep-all;
  }
  .faq-accordion .accordion-button::after { width: 26px; height: 26px; margin-left: .75rem; }
  .faq-accordion .accordion-body,
  .home .faq-accordion .accordion-body {
    padding: 0 .85rem 1.2rem;
    font-size: .93rem;
    line-height: 1.75;
  }

  /* ---------- 메인: CTA 배너 ---------- */
  .cta-banner-inner { gap: 1.4rem; }
  .cta-banner-inner h2 { font-size: 1.45rem; letter-spacing: -.02em; line-height: 1.35; }
  .cta-banner-inner p { font-size: .95rem; line-height: 1.6; word-break: keep-all; }
  .cta-banner-buttons { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .cta-banner-buttons .btn { display: flex; align-items: center; justify-content: center; padding: .75rem .6rem; font-size: .9rem; line-height: 1.3; white-space: normal; word-break: keep-all; }

  /* ---------- 메인: 도움이 필요할 때 ---------- */
  .section-help .row { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
  .help-card { padding: 1.15rem .6rem; }
  .help-card i { font-size: 1.5rem; margin-bottom: .45rem; }
  .help-card p { font-size: .88rem; line-height: 1.35; word-break: keep-all; }
  .help-card:hover { transform: none; }

  /* ---------- 푸터 ---------- */
  .site-footer { padding: 2.75rem 0 1.5rem; font-size: .88rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; margin-bottom: 2rem; }
  .footer-col-brand { grid-column: 1 / -1; }
  .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
  .footer-grid > .footer-col:last-child ul { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.1rem; }
  .footer-desc { max-width: none; font-size: .88rem; }
  .site-footer h5 { margin-bottom: .75rem; font-size: .76rem; }
  .site-footer ul { gap: .5rem; }
  .site-footer ul li a { font-size: .88rem; }
  .footer-bottom { gap: .8rem; }
  .footer-visits { gap: .3rem .45rem; font-size: .78rem; }

  /* ---------- 맨 위로 버튼 ---------- */
  .scroll-top-btn { width: 42px; height: 42px; right: 14px; bottom: 16px; font-size: 1.1rem; }

  /* ---------- 오픈 예정 팝업 ---------- */
  .kr-popup { padding: 16px; }
  .kr-popup-card { padding: 1.6rem 1.25rem 1.25rem; }
  .kr-popup-title { font-size: 1.15rem; }
  .kr-popup-msg { font-size: .93rem; }

  /* ================= 하위(콘텐츠) 페이지 ================= */

  .docs-layout { padding: 0 16px 2.5rem; }

  /* 페이지 제목 바: 제목 한 줄 + 섹션 메뉴는 가로로 밀어 보기 */
  body.headbar .page-headbar {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: .6rem; padding: .85rem 0 .7rem; margin-bottom: .9rem;
  }
  body.headbar .page-headbar .ph-title { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
  body.headbar .page-headbar .ph-kicker { font-size: .8rem; }
  body.headbar .page-headbar h1 { font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.3; }
  body.headbar .page-headbar .page-toc {
    margin: 0 -16px; padding: 0 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.headbar .page-headbar .page-toc::-webkit-scrollbar { display: none; }
  body.headbar .page-toc .ptc { flex-wrap: nowrap; justify-content: flex-start !important; gap: 4px; }
  body.headbar .page-toc .ptc a { padding: 6px 12px 6px 6px; font-size: .82rem; gap: 6px; }
  body.headbar .page-toc .ptc a::before { width: 19px; height: 19px; font-size: .7rem; }

  body.headbar .docs-lead-row { margin: .4rem 0 .6rem; gap: 7px; }
  body.headbar .docs-lead-row .docs-lead { font-size: .97rem; line-height: 1.6; }

  /* 섹션 패널(정돈형) 여백 */
  .docs-content .subpage-section { padding: 1.2rem 1.1rem 1.35rem; border-radius: 14px; margin-bottom: 1.25rem; }
  .docs-content.section-flow .subpage-section { padding: 0; border-radius: 0; margin-bottom: 0; }
  .docs-content.section-flow .subpage-section + .subpage-section { margin-top: 3rem; padding-top: 1.5rem; }

  /* 제목 단계 */
  .docs-content .subpage-section h2,
  .docs-content.section-flow .subpage-section h2 {
    font-size: 1.24rem; line-height: 1.4; letter-spacing: -.02em;
    padding-bottom: .7rem; margin-bottom: 1.1rem; word-break: keep-all;
  }
  .docs-content .subpage-section h4 { font-size: 1.02rem; line-height: 1.45; margin: 1.6rem 0 .8rem !important; word-break: keep-all; }
  .docs-content .subpage-section h4.sec-head { font-size: 1.1rem; letter-spacing: -.015em; margin-top: 2.4rem !important; }
  .docs-content .subpage-section h2 + h4.sec-head { margin-top: 1.2rem !important; }
  .docs-content h5 { word-break: keep-all; }

  /* 본문 글자 */
  .docs-content.section-flow .subpage-section p,
  .docs-content.section-flow .subpage-section li { font-size: 1rem; line-height: 1.8; letter-spacing: -.003em; }
  .docs-content.section-flow .subpage-section > p { margin: 1rem 0; }
  .subpage-section p { line-height: 1.8; }

  /* 도입 이미지(미디어 히어로) */
  .media-hero { border-radius: 12px; margin-bottom: 1.2rem; }
  .media-hero .mh-figure img { height: 180px; }
  .media-hero .mh-cap { left: 12px; right: 12px; bottom: 12px; }
  .docs-content .media-hero .mh-cap h4.mh-title { font-size: .88rem; padding: 7px 12px; border-radius: 8px; line-height: 1.4; }
  .media-hero .mh-body { padding: 16px 16px 18px; }
  .media-hero .mh-figure:hover img { transform: none; }

  /* 수치 카드 */
  .info-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 1.1rem 0 0; }
  .info-stat-card { padding: .95rem .5rem .85rem; border-radius: 10px; }
  .info-stat-card i { font-size: 1.2rem; margin-bottom: .3rem; }
  .info-stat-card .num { font-size: 1.32rem; letter-spacing: -.02em; }
  .info-stat-card .lbl { font-size: .78rem; line-height: 1.35; word-break: keep-all; }

  /* 아이콘 목록: 아이콘·제목 한 줄, 설명은 아래 전체 폭 */
  .icon-list li { flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 0; }
  .icon-list li > div { display: contents; }
  .icon-list .il-icon { width: 30px; height: 30px; font-size: .92rem; border-radius: 7px; }
  .icon-list strong { flex: 1 1 0; min-width: 0; font-size: 1rem; }
  .icon-list p { flex: 0 0 100%; border-left: 0; padding-left: 0; font-size: .95rem !important; line-height: 1.75 !important; }

  /* 정보 카드 */
  .info-card { padding: 1rem 1.05rem; }
  .info-card-title { font-size: 1rem; line-height: 1.4; word-break: keep-all; }
  .info-card ul { padding-left: 1.1rem; }

  /* 강조 박스 */
  .callout { padding: .9rem 1rem; font-size: .93rem; line-height: 1.7; }
  .pull-quote { padding: 1.05rem 1.1rem; font-size: 1rem; }
  .docs-content div:has(> span.stat-highlight) { padding: 12px 14px 6px; margin: 1.3rem 0; }
  .docs-content span.stat-highlight { flex-wrap: wrap; gap: 4px 10px; font-size: .92rem; padding: 11px 0; }
  .docs-content span.stat-highlight strong { padding-left: 0; }

  /* 표: 칸 안에서 줄바꿈 + 칸 최소폭, 넘치면 가로로 밀어 보기(오른쪽 그림자로 표시) */
  .table-scroll {
    margin: 1rem 0;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right center / 10px 100% no-repeat scroll;
  }
  .table-scroll .compare-table { width: 100%; min-width: 100%; }
  .table-scroll .compare-table th,
  .table-scroll .compare-table td { white-space: normal; min-width: 6.5em; }
  .compare-table { font-size: .86rem; }
  .docs-content .compare-table th,
  .docs-content .compare-table td { padding: 9px 10px; line-height: 1.5; word-break: keep-all; }

  /* 타임라인 */
  .timeline-item { padding-left: 40px; }
  .timeline::before { left: 14px; }
  .timeline-item .tl-dot { left: 4px; }
  .timeline-item h4 { font-size: 1rem; line-height: 1.45; }
  .timeline-item .tl-tag { margin-left: 0; margin-top: 2px; }

  /* 가로 단계 흐름 */
  .h-timeline { gap: 1rem .6rem; margin: 1.4rem 0; }
  .h-timeline .htl-dot { width: 42px; height: 42px; font-size: .95rem; }
  .h-timeline-text .htl-dot { width: auto; padding: 0 12px; font-size: .9rem; }

  /* 비교 박스·체크리스트·일러스트 */
  .vs-side { padding: 1.1rem 1.1rem; }
  .checklist-box { padding: 1.1rem 1.1rem; }
  .illust-block { padding: 1.2rem 1.1rem; gap: 1rem; }

  /* 사계절 카드 */
  .docs-content .season-cards { gap: 8px; }
  .docs-content .season-cards .sc-item { padding: 14px 8px; border-radius: 12px; }
  .docs-content .season-cards .sc-tp { font-size: .8rem; line-height: 1.45; word-break: keep-all; }

  /* 행정구역 지도 */
  .region-map-fig #koreaRegionMap { height: 300px; }

  /* 아코디언(하위 페이지) */
  body.headbar .accordion-item { border-radius: 12px !important; margin-bottom: 8px; }
  body.headbar .accordion-button {
    padding: 14px 14px; gap: 10px;
    font-size: .97rem; line-height: 1.45; letter-spacing: -.01em; word-break: keep-all;
    align-items: flex-start;
  }
  body.headbar .accordion-button::after { width: 24px; height: 24px; background-size: 14px 14px; border-radius: 7px; margin-top: -1px; }
  body.headbar .accordion-body { padding: 0 14px 16px; font-size: .94rem; line-height: 1.75; }
  body.headbar .accordion-body p,
  body.headbar .accordion-body li { font-size: .94rem !important; }

  /* 이전/다음 페이지 버튼: 긴 제목은 줄바꿈 */
  .docs-page-nav { gap: .5rem; margin-top: 2rem; }
  .docs-page-nav a { flex: 1 1 0; min-width: 0; white-space: normal; justify-content: center; text-align: center; padding: .6rem .8rem; }
  .docs-page-nav .pn-next { margin-left: 0; }
  .docs-page-nav .pn-title { font-size: .86rem; line-height: 1.3; word-break: keep-all; }

  /* ================= 도구 페이지 ================= */

  /* 생활비·근로시간 계산기 */
  .tool-grid { gap: 1rem; }
  .calc-panel { padding: 1.2rem 1.1rem; border-radius: 14px; }
  .calc-panel .form-select,
  .calc-panel .form-control { font-size: 1rem; min-height: 46px; }
  .calc-go { padding: .8rem 1rem; font-size: 1rem; }
  .res-card { padding: 1.25rem 1.2rem; border-radius: 14px; position: static; }
  .res-card .res-big { font-size: 1.9rem; }
  .res-row .rl { width: 64px; }
  .mini-card { padding: .9rem 1rem; }

  /* 대학찾기 */
  .cf-top { padding: 1rem; gap: 1rem; margin-bottom: 1.2rem; border-radius: 12px; }
  .cf-map-wrap { max-width: 320px; }
  #krMap { height: 340px; }
  .cf-controls { gap: 10px; }
  .cf-controls .cf-field { flex: 1 1 calc(50% - 5px); }
  .cf-controls .form-select,
  .cf-controls .form-control { font-size: 1rem; }
  .cc-head { min-height: 0; padding: .85rem .95rem; }
  .cf-detail.is-shown { padding: .9rem 1rem 1rem; }

  /* 글로벌 현황 */
  .gs-hero h1 { font-size: 1.35rem; }
  .gs-stats { gap: .5rem; }
  .gs-stat { flex: 1 1 0; min-width: 0; padding: .85rem .6rem; }
  .gs-num { font-size: 1.3rem; }
  .gs-map-card,
  .gs-rank-card { padding: .9rem .9rem; border-radius: 14px; }
  #worldMap { height: 240px; }
  .gs-filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .6rem; }
  .gs-periods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gs-periods button { padding: .5rem .15rem; font-size: .74rem; line-height: 1.2; white-space: normal; }
  .gs-daterange { display: flex; }
  .gs-daterange .gs-date { flex: 1 1 0; min-width: 0; font-size: .9rem; padding: .5rem; }
  .gs-cfilter .gs-csel { flex: 1 1 auto; max-width: none; font-size: .95rem; }
  .gs-rk .nm { width: 78px; }
  .gs-rk .vv { width: 58px; }

  /* 용어 풀이 */
  .gl-cat-title { font-size: 1.15rem; margin-top: 2rem; }
  .gl-entry h3 { font-size: 1.03rem; }
  .gl-catnav a { font-size: .82rem; }
}

/* =========================== 작은 모바일 (~374) =========================== */
@media (max-width: 374.98px) {
  .hero-headline { font-size: 1.5rem; }
  .section-title { font-size: 1.3rem; }
  .stat-card .stat-number { font-size: 1.25rem; }
  .cta-banner-buttons { grid-template-columns: 1fr; }
  .btn-hero-pill { padding: 6px 11px; font-size: .82rem; }
}

/* =========================== 문장 양끝정렬 (태블릿·모바일, 모든 언어) ===========================
   - 문단·목록·아코디언 본문·강조 박스 같은 '문장'만. 제목·버튼·표 칸·가운데 정렬 캡션은 제외.
   - 낱말 사이가 벌어지지 않게:
     · 한국어: 양끝정렬 문단만 글자 단위 줄바꿈 허용(word-break: normal) → 줄 끝 여백이 한 글자 미만이라 낱말 간격이 거의 그대로.
     · 영어·베트남어: 긴 단어는 줄 끝에서 하이픈으로 나눔(hyphens: auto, 페이지 lang 기준).
     · 이어 쓴 긴 문자열(주소 등)은 어디서든 줄바꿈(overflow-wrap: anywhere).
   - 문단 마지막 줄은 왼쪽 정렬(양끝정렬 기본 동작). */
@media (max-width: 1199.98px) {
  .docs-content p, .docs-content li,
  .docs-content .docs-lead,
  .docs-content .accordion-body,
  .docs-content .callout,
  .docs-content .pull-quote,
  .subpage-body p, .subpage-body li,
  .media-hero .mh-body p,
  .home .intro-text p,
  .home .tool-preview-card p,
  .home .faq-accordion .accordion-body,
  .cta-banner-inner p,
  .footer-desc,
  .mini-card p,
  .res-card .res-empty, .res-card .res-note,
  .gl-note, .gl-entry p,
  .cf-side-note, .cf-detail-note, .cc-value {
    text-align: justify;
    text-justify: inter-word;
    word-break: normal;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: wrap;
  }
  /* 늘어날 폭을 띄어쓰기 몇 칸에 몰지 않고 글자 사이에 아주 조금씩 나눔 → 낱말 간격이 벌어지지 않음(모든 언어).
     영어는 줄 끝 하이픈 나누기와 함께 쓰여 글자 사이 증가가 1px 미만. 이 방식을 지원하지 않는 사파리(아이폰)는 띄어쓰기 기준 + 하이픈 나누기 */
  :is(.docs-content p, .docs-content li, .docs-content .docs-lead, .docs-content .accordion-body,
    .docs-content .callout, .docs-content .pull-quote, .subpage-body p, .subpage-body li, .media-hero .mh-body p,
    .home .intro-text p, .home .tool-preview-card p, .home .faq-accordion .accordion-body, .cta-banner-inner p,
    .footer-desc, .mini-card p, .res-card .res-empty, .res-card .res-note, .gl-note, .gl-entry p,
    .cf-side-note, .cf-detail-note, .cc-value) { text-justify: inter-character; }
  /* 한국어 페이지: 이메일·영문 묶음처럼 끊을 수 없는 문자열도 줄 끝에서 끊음(한국 신문 조판 방식) → 그 앞 줄이 벌어지지 않음 */
  html:lang(ko) :is(.docs-content p, .docs-content li, .docs-content .docs-lead, .docs-content .accordion-body,
    .docs-content .callout, .docs-content .pull-quote, .subpage-body p, .subpage-body li, .media-hero .mh-body p,
    .home .intro-text p, .home .tool-preview-card p, .home .faq-accordion .accordion-body, .cta-banner-inner p,
    .footer-desc, .mini-card p, .res-card .res-empty, .res-card .res-note, .gl-note, .gl-entry p,
    .cf-side-note, .cf-detail-note, .cc-value) { word-break: break-all; }
  /* 문장 안에 들어 있는 독립 라벨(굵은 소제목·용어 등 블록)은 양끝정렬하지 않음 */
  .docs-content :is(strong, b, h1, h2, h3, h4, h5, h6, .info-card-title, .gl-term, .cc-label, .q-head, .sh-title):not(:is(p, li, .accordion-body, .callout) > :is(strong, b)),
  .icon-list strong, .subpage-body :is(h1, h2, h3, h4, h5, h6) { text-align: left; }
  /* 원래 가운데 정렬인 캡션·카드 글자는 그대로 */
  .docs-content .text-center, .docs-content .text-center p,
  .subpage-body .text-center, .subpage-body .text-center p,
  .docs-content .info-stat-card *, .docs-content .htl-step *, .docs-content .season-cards *,
  .gs-hero p, .gs-prep p { text-align: center; }
}

/* 좁은 칸(태블릿 3~4칸 카드 등, 260px 이하)의 영어·베트남어 문장은 한 줄에 낱말이 두세 개뿐이라
   양끝정렬하면 간격이 벌어짐 → 그런 칸에서만 왼쪽 정렬. 한국어는 좁은 칸에서도 고르게 맞춰지므로 그대로 양끝정렬 */
@media (max-width: 1199.98px) {
  .docs-content :is(.info-card, .vs-side, .checklist-box, .illust-block), .mini-card { container-type: inline-size; }
}
@container (max-width: 260px) {
  html:not(:lang(ko)) :is(p, li, .callout, .accordion-body) { text-align: left; }
}