/* ==========================================================================
   매쓰테스트 모바일 디자인 (방향: 따뜻한 종이 + 절제된 거래형 UI)
   - 팔레트는 사이트 공통(ink/sub/line/paper/accent). 바탕은 흰색, 연한 영역 #f8f9fa.
   - 터치 목표 44px 이상, 입력창 16px 이상, 한글은 keep-all.
   - 새 마크업은 .mm-* 클래스. 공용 헤더/푸터/하단탭은 아래 공통 구간.
   ========================================================================== */

:root {
  --mm-ink: #231d19;
  --mm-sub: #6a5f57;
  --mm-mute: #9a8f86;
  --mm-line: #e6ddd3;
  --mm-line-strong: #cfc3b6;
  --mm-paper: #faf6f0;
  --mm-gray: #f8f9fa;
  --mm-accent: #ae3a1e;
  --mm-accent-deep: #8c2d16;
  --mm-accent-soft: #f7ebe6;
  --mm-ok: #2f6b4f;
  --mm-ok-soft: #e8f2ec;
  --mm-radius: 12px;
  --mm-tab-h: 56px;
}

/* 하단 탭은 모바일 폭에서만 */
.mm-tabbar { display: none; }

/* 학교급 선택 (홈·헤더 검색 공용) */
.mm-seg { display: inline-flex; flex: 0 0 auto; padding: 3px; background: #efe8df; border-radius: 10px; }
.mm-seg input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mm-seg label {
  margin: 0; min-width: 48px; padding: 0 12px; height: 34px; line-height: 34px; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--mm-sub); border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.mm-seg input:checked + label { background: #fff; color: var(--mm-accent); box-shadow: 0 1px 2px rgba(35, 29, 25, .12); }
.mm-seg input:focus-visible + label { outline: 2px solid var(--mm-accent); }

/* ---------- 공통 바탕 ---------- */
html.is-mobile body,
.mm-page {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(174, 58, 30, .12);
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--mm-ink);
  background: #fff;
}
html.is-mobile a { touch-action: manipulation; }
html.is-mobile button, html.is-mobile input, html.is-mobile select, html.is-mobile textarea { touch-action: manipulation; }

/* 모바일에서 OCR 관련 메뉴는 감춘다 (서비스 대상 아님) */
html.is-mobile #sidebar-menu a[href*="ocr"],
html.is-mobile #sidebar-menu a[href*="payment2"],
html.is-mobile .sidebar a[href*="mathtest-ocr"],
html.is-mobile .sidebar a[href*="payment2"],
html.is-mobile .sidebar a[href*="test.mathtest.co.kr"] { display: none !important; }
html.is-mobile .sidebar li:has(> a[href*="ocr"]),
html.is-mobile .sidebar li:has(> a[href*="payment2"]) { display: none !important; }

/* ---------- 헤더 (#header_mo가 보이는 폭에서만 의미 있음: 폰, 모바일 모드 태블릿) ---------- */
/* ---------- 헤더 ---------- */
#header_mo { background: #fff; border-bottom: 1px solid var(--mm-line); }
#header_mo .mm-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 4px 0 16px;
}
#header_mo .mm-logo { display: flex; align-items: center; height: 44px; color: var(--mm-ink); text-decoration: none; }
#header_mo .mm-logo img { height: 28px; width: auto; display: block; }
#header_mo .mm-icons { display: flex; align-items: center; }
#header_mo .mm-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: none;
  color: var(--mm-ink); font-size: 19px; text-decoration: none;
  border-radius: 10px;
}
#header_mo .mm-icon:active { background: var(--mm-paper); }
#header_mo .mm-icon:focus-visible,
.mm-tabbar a:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: -2px; }
#header_mo #search_mo { background: var(--mm-paper); border-bottom: 1px solid var(--mm-line); }
#header_mo #search_mo > div { padding: 12px 16px !important; border: 0 !important; }

/* 검색 입력 (헤더 펼침 / 홈 공용) */
#header_mo .input-group { flex-wrap: nowrap; align-items: center; gap: 8px; }
#header_mo .bo-switch { display: none; }
#header_mo .form-control {
  height: 44px; font-size: 16px; border: 1px solid var(--mm-line-strong); border-radius: 10px; background: #fff; color: var(--mm-ink);
}
#header_mo .form-control:focus { border-color: var(--mm-accent); box-shadow: 0 0 0 3px var(--mm-accent-soft); }
#header_mo .btn.btn-primary {
  height: 44px; width: 48px; border: 0; border-radius: 10px; background: var(--mm-accent); color: #fff;
}
#header_mo .btn.btn-primary:active { background: var(--mm-accent-deep); }
#header_mo .input-group-append { margin: 0; }

@media (max-width: 767.98px) {

  /* ---------- 헤더(고정) ---------- */
  #nt_sticky_wrap { position: sticky; top: 0; z-index: 1030; background: #fff; }

  /* ---------- 하단 탭 ---------- */
  .mobile-bottom-nav { display: none !important; }
  .mm-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--mm-line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mm-tabbar a {
    flex: 1 1 0; min-width: 0; height: var(--mm-tab-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--mm-mute); text-decoration: none; font-size: 11px; line-height: 1; font-weight: 400;
  }
  .mm-tabbar a i { font-size: 20px; line-height: 20px; }
  .mm-tabbar a.on { color: var(--mm-accent); font-weight: 500; }
  .mm-tabbar a:active { background: var(--mm-paper); }
  body { padding-top: 0 !important; padding-bottom: calc(var(--mm-tab-h) + env(safe-area-inset-bottom)) !important; }
  .menu-padding { display: none; }
  .menu-navigation.fixed-top { display: none; }

  /* ---------- 공통 본문 폭 ---------- */
  .nt-container { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   홈
   ========================================================================== */
.mm-home { background: #fff; color: var(--mm-ink); font-size: 14px; line-height: 1.55; padding-bottom: 8px; }
.mm-home a { color: inherit; text-decoration: none; }

.mm-hero { padding: 22px 16px 18px; background: var(--mm-paper); border-bottom: 1px solid var(--mm-line); }
.mm-hero h1 { margin: 0 0 4px; font-size: 20px; line-height: 1.35; font-weight: 500; letter-spacing: -.02em; color: var(--mm-ink); text-wrap: balance; }
.mm-hero p { margin: 0 0 14px; font-size: 13px; color: var(--mm-sub); }
.mm-search { display: flex; flex-direction: column; gap: 8px; }
.mm-search .mm-seg { align-self: flex-start; }
.mm-search .mm-field { display: flex; gap: 8px; }
.mm-search input[type=text] {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px;
  font-size: 16px; color: var(--mm-ink); background: #fff;
  border: 1px solid var(--mm-line-strong); border-radius: 10px; appearance: none; -webkit-appearance: none;
}
.mm-search input[type=text]::placeholder { color: var(--mm-mute); }
.mm-search input[type=text]:focus { outline: 0; border-color: var(--mm-accent); box-shadow: 0 0 0 3px var(--mm-accent-soft); }
.mm-search button {
  flex: 0 0 auto; width: 56px; height: 48px; border: 0; border-radius: 10px;
  background: var(--mm-accent); color: #fff; font-size: 17px;
}
.mm-search button:active { background: var(--mm-accent-deep); }
.mm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mm-chips a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  font-size: 12.5px; color: var(--mm-sub); background: #fff; border: 1px solid var(--mm-line); border-radius: 16px;
}
.mm-chips a:active { background: var(--mm-accent-soft); border-color: var(--mm-accent); color: var(--mm-accent); }

/* 계정 영역 */
.mm-acct { margin: 16px 16px 0; padding: 14px 16px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: #fff; }
.mm-acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mm-acct-name { font-size: 13px; color: var(--mm-sub); }
.mm-acct-name b { color: var(--mm-ink); font-weight: 500; }
.mm-acct-pt { margin-top: 2px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.mm-acct-pt small { font-size: 12px; font-weight: 400; color: var(--mm-sub); margin-left: 2px; }
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 10px;
  font-size: 14px; font-weight: 500; line-height: 1; border: 1px solid transparent; cursor: pointer;
}
.mm-btn-primary { background: var(--mm-accent); color: #fff !important; }
.mm-btn-primary:active { background: var(--mm-accent-deep); }
.mm-btn-ghost { background: #fff; color: var(--mm-ink) !important; border-color: var(--mm-line-strong); }
.mm-btn-ghost:active { background: var(--mm-paper); }
.mm-btn-block { display: flex; width: 100%; }
.mm-acct-guest p { margin: 0 0 10px; font-size: 13px; color: var(--mm-sub); }
.mm-acct-guest .mm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 입구 두 개 */
.mm-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 16px 0; }
.mm-entry a {
  display: block; padding: 16px 14px 14px; border-radius: var(--mm-radius);
  border: 1px solid var(--mm-line); background: #fff; position: relative;
}
.mm-entry a:active { background: var(--mm-paper); }
.mm-entry .mm-e-tag { font-size: 11.5px; color: var(--mm-accent); font-weight: 500; }
.mm-entry .mm-e-ttl { margin-top: 4px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.mm-entry .mm-e-cnt { margin-top: 6px; font-size: 12px; color: var(--mm-sub); }
.mm-entry .fa { position: absolute; right: 12px; top: 14px; color: var(--mm-line-strong); font-size: 16px; }

/* 섹션 */
.mm-sec { margin-top: 28px; }
.mm-sec-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 10px; }
.mm-sec-h h2 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.mm-sec-h a { font-size: 12.5px; color: var(--mm-sub) !important; display: inline-flex; align-items: center; min-height: 32px; }
.mm-tabs { display: flex; gap: 0; margin: 0 16px; border-bottom: 1px solid var(--mm-line); }
.mm-tabs button {
  flex: 0 0 auto; height: 44px; padding: 0 16px; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent;
  font-size: 14px; color: var(--mm-mute); cursor: pointer;
}
.mm-tabs button[aria-selected=true] { color: var(--mm-ink); border-bottom-color: var(--mm-accent); font-weight: 500; }
.mm-tabs button:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: -2px; }
.mm-panel[hidden] { display: none; }

/* 시험 목록 행 (홈·목록 공용) */
.mm-rows { list-style: none; margin: 0; padding: 0; }
.mm-rows li { border-bottom: 1px solid var(--mm-line); }
.mm-rows li:last-child { border-bottom: 0; }
.mm-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; color: var(--mm-ink); }
.mm-row:active { background: var(--mm-paper); }
.mm-row-main { flex: 1 1 auto; min-width: 0; }
.mm-row-ttl { font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.mm-row-ttl small { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--mm-mute); }
.mm-row-meta { margin-top: 3px; font-size: 12.5px; color: var(--mm-sub); display: flex; flex-wrap: wrap; gap: 0 6px; }
.mm-row-meta span + span::before { content: "·"; margin-right: 6px; color: var(--mm-line-strong); }
.mm-row-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mm-row-date { font-size: 11.5px; color: var(--mm-mute); }
.mm-row .fa-angle-right { color: var(--mm-line-strong); font-size: 20px; }
.mm-ftags { display: flex; gap: 4px; }
.mm-ftag { display: inline-block; padding: 2px 7px; font-size: 11px; line-height: 1.5; border-radius: 6px; color: var(--mm-sub); background: var(--mm-paper); border: 1px solid var(--mm-line); }
.mm-ftag.ok { color: var(--mm-ok); background: var(--mm-ok-soft); border-color: #cfe5d8; }
.mm-empty { padding: 40px 16px; text-align: center; color: var(--mm-sub); font-size: 13.5px; }
.mm-more { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 8px 16px 0; font-size: 13.5px; color: var(--mm-sub) !important; border: 1px solid var(--mm-line); border-radius: 10px; }

/* 이용 순서 */
.mm-steps { margin: 0 16px; padding: 4px 16px; list-style: none; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: var(--mm-paper); counter-reset: s; }
.mm-steps li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--mm-line-strong); counter-increment: s; }
.mm-steps li:last-child { border-bottom: 0; }
.mm-steps li::before {
  content: counter(s); flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--mm-accent); color: #fff; font-size: 12px; line-height: 24px; text-align: center; margin-top: 1px;
}
.mm-steps b { display: block; font-size: 14px; font-weight: 500; }
.mm-steps span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--mm-sub); }

/* 바로가기 */
.mm-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 16px 0; }
.mm-links a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 76px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); font-size: 12.5px; color: var(--mm-ink);
}
.mm-links a:active { background: var(--mm-paper); }
.mm-links i { font-size: 20px; color: var(--mm-accent); }

/* 푸터 */
.mm-foot { margin-top: 32px; padding: 20px 16px 24px; background: var(--mm-gray); border-top: 1px solid var(--mm-line); font-size: 12px; color: var(--mm-sub); line-height: 1.7; }
.mm-foot-links { display: flex; flex-wrap: wrap; gap: 0 14px; margin-bottom: 10px; }
.mm-foot-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--mm-ink) !important; }
.mm-foot details summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 40px; color: var(--mm-ink); }
.mm-foot details summary::-webkit-details-marker { display: none; }
.mm-foot details summary::after { content: "\f107"; font-family: FontAwesome; color: var(--mm-mute); }
.mm-foot details[open] summary::after { content: "\f106"; }
.mm-foot dl { margin: 6px 0 0; }
.mm-foot dt { float: left; clear: left; width: 112px; color: var(--mm-mute); font-weight: 400; }
.mm-foot dd { margin: 0 0 0 112px; }
.mm-foot .mm-copy { margin-top: 12px; color: var(--mm-mute); }

/* ==========================================================================
   게시판 목록 / 상세
   ========================================================================== */
.mm-board { background: #fff; color: var(--mm-ink); font-size: 14px; }
.mm-board a { color: inherit; text-decoration: none; }
.mm-bh { padding: 18px 16px 14px; border-bottom: 1px solid var(--mm-line); background: var(--mm-paper); }
.mm-bh h1 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.mm-bh p { margin: 3px 0 12px; font-size: 12.5px; color: var(--mm-sub); }
.mm-bh p b { color: var(--mm-accent); font-weight: 500; }
.mm-boards { display: flex; gap: 6px; margin-bottom: 12px; }
.mm-boards a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; font-size: 13px; border-radius: 18px; border: 1px solid var(--mm-line-strong); background: #fff; color: var(--mm-sub) !important; }
.mm-boards a.on { background: var(--mm-ink); border-color: var(--mm-ink); color: #fff !important; }
.mm-filter { display: flex; gap: 8px; }
.mm-filter input[type=text] {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; font-size: 16px; color: var(--mm-ink); background: #fff;
  border: 1px solid var(--mm-line-strong); border-radius: 10px; appearance: none; -webkit-appearance: none;
}
.mm-filter input[type=text]:focus { outline: 0; border-color: var(--mm-accent); box-shadow: 0 0 0 3px var(--mm-accent-soft); }
.mm-filter button { flex: 0 0 52px; height: 46px; border: 0; border-radius: 10px; background: var(--mm-accent); color: #fff; font-size: 16px; }
.mm-filter button:active { background: var(--mm-accent-deep); }
.mm-count { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; font-size: 12.5px; color: var(--mm-sub); }
.mm-count b { color: var(--mm-ink); font-weight: 500; }
.mm-count a { color: var(--mm-sub) !important; text-decoration: underline; }

.mm-pager { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 20px 8px 12px; flex-wrap: wrap; }
.mm-pager a, .mm-pager span {
  min-width: 40px; height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; border-radius: 10px; color: var(--mm-sub) !important; border: 1px solid transparent;
}
.mm-pager a:active { background: var(--mm-paper); }
.mm-pager .cur { background: var(--mm-ink); color: #fff !important; }
.mm-pager .dim { color: var(--mm-line-strong) !important; }

/* 상세 */
.mm-vh { padding: 18px 16px 16px; border-bottom: 1px solid var(--mm-line); background: var(--mm-paper); }
.mm-vh .mm-crumb { font-size: 12.5px; color: var(--mm-sub); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.mm-vh .mm-crumb a { color: var(--mm-sub) !important; }
.mm-vh h1 { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.mm-vh .mm-vmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mm-vmeta span { padding: 4px 10px; font-size: 12px; color: var(--mm-ink); background: #fff; border: 1px solid var(--mm-line); border-radius: 14px; }
.mm-vsec { padding: 20px 16px 4px; }
.mm-vsec h2 { margin: 0 0 4px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.mm-vsec .mm-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--mm-sub); }

.mm-kit { margin-bottom: 14px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); overflow: hidden; background: #fff; }
.mm-kit-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--mm-paper); border-bottom: 1px solid var(--mm-line); }
.mm-kit-h b { font-size: 15px; font-weight: 500; }
.mm-kit-h em { font-style: normal; font-size: 12px; color: var(--mm-sub); }
.mm-kit-h em.paid { color: var(--mm-ok); }
.mm-file { padding: 12px 14px; border-top: 1px solid var(--mm-line); }
.mm-file:first-of-type { border-top: 0; }
.mm-kit-h + .mm-file { border-top: 0; }
.mm-file-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mm-badge { flex: 0 0 auto; min-width: 40px; text-align: center; padding: 3px 0; font-size: 11.5px; font-weight: 500; border-radius: 6px; color: #fff; }
.mm-badge.pdf { background: var(--mm-accent); }
.mm-badge.hwp { background: #4a6f8a; }
.mm-file-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--mm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-file-size { flex: 0 0 auto; font-size: 12px; color: var(--mm-mute); }
.mm-file-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-file-act.one { grid-template-columns: 1fr; }
.mm-note { margin: 0 0 14px; padding: 12px 14px; font-size: 12.5px; line-height: 1.6; color: var(--mm-sub); background: var(--mm-gray); border-radius: 10px; }
.mm-note b { color: var(--mm-ink); font-weight: 500; }

.mm-vnav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px 0; }
.mm-vnav a { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 12px; font-size: 12.5px; color: var(--mm-ink) !important; border: 1px solid var(--mm-line); border-radius: 10px; }
.mm-vnav a small { display: block; font-size: 11px; color: var(--mm-mute); margin-bottom: 1px; }
.mm-vnav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-vnav a.next { text-align: right; }
.mm-vback { padding: 12px 16px 0; }

/* 확인 시트 */
.mm-sheet-bg { position: fixed; inset: 0; z-index: 2000; background: rgba(35, 29, 25, .45); display: none; }
.mm-sheet-bg.open { display: block; }
.mm-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; background: #fff; border-radius: 18px 18px 0 0;
  padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .22s ease-out; max-height: 85dvh; overflow: auto; overscroll-behavior: contain;
}
.mm-sheet.open { transform: none; }
.mm-sheet h3 { margin: 0 0 6px; font-size: 17px; font-weight: 500; }
.mm-sheet .mm-s-file { margin: 0 0 12px; font-size: 12.5px; color: var(--mm-sub); word-break: break-all; }
.mm-sheet ul { margin: 0 0 16px; padding: 12px 14px 12px 28px; background: var(--mm-paper); border-radius: 10px; font-size: 13px; line-height: 1.7; color: var(--mm-ink); }
.mm-sheet .mm-s-act { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }

/* PDF 뷰어 */
.mm-pdf { position: fixed; inset: 0; z-index: 3000; display: none; flex-direction: column; background: #3a342f; }
.mm-pdf.open { display: flex; }
.mm-pdf-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 4px 0 4px; padding-top: env(safe-area-inset-top); box-sizing: content-box; background: #231d19; color: #fff; }
.mm-pdf-bar button {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px;
  border: 0; background: none; color: #fff; font-size: 17px; border-radius: 10px;
}
.mm-pdf-bar button:active { background: rgba(255, 255, 255, .14); }
.mm-pdf-bar button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mm-pdf-ttl { flex: 1 1 auto; min-width: 0; font-size: 13px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-pdf-ttl small { display: block; font-size: 11px; color: #cfc3b6; }
.mm-pdf-body { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; padding: 8px 0 24px; text-align: center; }
.mm-pdf-page { display: block; margin: 0 auto 8px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); max-width: none; }
.mm-pdf-msg { padding: 60px 24px; color: #e6ddd3; font-size: 14px; line-height: 1.7; }
.mm-pdf-msg .spin { display: block; width: 28px; height: 28px; margin: 0 auto 14px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: mmspin .8s linear infinite; }
@keyframes mmspin { to { transform: rotate(360deg); } }
.mm-pdf-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #231d19; color: #e6ddd3; font-size: 12.5px; }
.mm-pdf-foot button { height: 40px; min-width: 44px; border: 1px solid rgba(255, 255, 255, .25); background: none; color: #fff; border-radius: 10px; font-size: 14px; }
.mm-pdf-foot button:active { background: rgba(255, 255, 255, .14); }
body.mm-lock { overflow: hidden; }

/* ==========================================================================
   콘텐츠 페이지 (이용안내 등), 포인트충전, 로그인
   ========================================================================== */
@media (max-width: 767.98px) {
  /* 이용안내 .mtd */
  .mtd { padding: 20px 16px 8px; font-size: 14px; line-height: 1.75; color: var(--mm-ink); word-break: keep-all; }
  .mtd-head { margin-bottom: 8px; }
  .mtd-title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
  .mtd-h { margin: 28px 0 10px; padding-top: 18px; border-top: 1px solid var(--mm-line); font-size: 16px; font-weight: 500; }
  .mtd ol { padding-left: 20px; }
  .mtd li { margin-bottom: 6px; }
  .mtd-table-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--mm-line); border-radius: 10px; }
  .mtd-table { width: 100%; font-size: 13px; }
  .mtd-table th, .mtd-table td { padding: 10px 12px; border-bottom: 1px solid var(--mm-line); }
  .mtd-num { text-align: right; white-space: nowrap; }

  /* 포인트충전 .wetoz (plugin/wz.chargepoint): 화면 자체 스타일은 pay.css. 여기서는 바깥 여백만 */
  .wetoz { padding: 0 !important; }
  .wetoz .col-md-12 { padding-left: 16px; padding-right: 16px; }

  /* 본문 오른쪽 열(로그인·통계 등)은 모바일에서 감춘다: 하단 탭과 홈에 같은 기능이 있다 */
  #nt_body .na-row > .col-md-3.na-col, #nt_body .na-row > .col-md-4.na-col { display: none; }
  #nt_body .na-row > .na-col { flex: 0 0 100%; max-width: 100%; }
  #nt_body .nt-container, #nt_body .nt-container-wide { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* 로그인 (mobile/skin/member/basic) : 소셜 버튼 이미지는 그대로 둔다 */
  #mb_login.mbskin { padding: 28px 16px 8px; max-width: 480px; margin: 0 auto; }
  #mb_login h1 { margin: 0 0 20px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--mm-ink); }
  #mb_login #login_frm { display: grid; gap: 10px; }
  #mb_login .frm_input {
    width: 100%; height: 50px; padding: 0 14px; font-size: 16px; color: var(--mm-ink); background: #fff;
    border: 1px solid var(--mm-line-strong); border-radius: 10px; appearance: none; -webkit-appearance: none;
  }
  #mb_login .frm_input:focus { outline: 0; border-color: var(--mm-accent); box-shadow: 0 0 0 3px var(--mm-accent-soft); }
  #mb_login #login_info { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--mm-sub); }
  #mb_login .btn_submit {
    width: 100%; height: 52px; border: 0; border-radius: 10px; background: var(--mm-accent); color: #fff;
    font-size: 16px; font-weight: 500;
  }
  #mb_login .btn_submit:active { background: var(--mm-accent-deep); }
  #mb_login .mb_login_join { margin-top: 8px; }
  #mb_login .mb_login_join h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #mb_login .mb_login_join > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #mb_login .mb_login_join a {
    display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 14px;
    color: var(--mm-ink); border: 1px solid var(--mm-line); border-radius: 10px; text-decoration: none; background: #fff;
  }
  #mb_login .mb_login_join a:active { background: var(--mm-paper); }
}

/* 이용안내: 모바일 상단 이용 방법 */
.mtd-quick { margin: 14px 0 6px; padding: 16px; background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); }
.mtd-quick h3 { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.mtd-quick ol { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: q; }
.mtd-quick li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--mm-line-strong); counter-increment: q; font-size: 13px; line-height: 1.6; padding-left: 0; margin: 0; }
.mtd-quick li:last-child { border-bottom: 0; }
.mtd-quick li b { flex: 0 0 44px; font-weight: 500; color: var(--mm-accent); }
.mtd-quick li span { flex: 1 1 auto; color: var(--mm-ink); }
.mtd-quick-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 10px; background: var(--mm-accent); color: #fff !important; font-size: 14px; font-weight: 500; text-decoration: none; }

/* ==========================================================================
   태블릿 (갤럭시 탭·아이패드, 폭 768px 이상)
   - 갤럭시 탭은 모바일로, 아이패드는 head.sub.php 스크립트가 모바일로 맞춘다.
   - 폰용 한 줄 목록을 2열 카드로, 본문 폭은 읽기 좋은 폭으로 제한한다.
   - 헤더/메뉴는 PC 헤더를 그대로 쓰고 하단 탭은 폰에서만 보인다.
   ========================================================================== */
@media (min-width: 768px) {
  /* 태블릿(모바일 모드): 폰용 헤더를 쓰고 PC 헤더·메뉴는 감춘다 */
  html.is-mobile #header_mo { display: block !important; }
  html.is-mobile #nt_lnb, html.is-mobile #header_pc, html.is-mobile #nt_menu, html.is-mobile #nt_menu_wrap { display: none !important; }
  html.is-mobile #nt_sticky_wrap { position: sticky; top: 0; z-index: 1030; background: #fff; }
  html.is-mobile body { padding-top: 0 !important; }
  html.is-mobile .menu-padding { display: none; }
  #header_mo .mm-bar { height: 60px; padding: 0 12px 0 24px; }
  #header_mo .mm-logo img { height: 34px; }
  #header_mo #search_mo > div { max-width: 1000px; margin: 0 auto; padding: 14px 24px !important; }
  html.is-mobile #nt_menu a[href*="ocr"],
  html.is-mobile #nt_menu a[href*="payment2"] { display: none !important; }
  html.is-mobile #nt_menu li:has(> a[href*="ocr"]),
  html.is-mobile #nt_menu li:has(> a[href*="payment2"]) { display: none !important; }

  /* 모바일 모드(갤럭시 탭·아이패드)에서는 오른쪽 사이드 열을 감추고 본문을 넓게 */
  html.is-mobile #nt_body .na-row > .col-md-3.na-col, html.is-mobile #nt_body .na-row > .col-md-4.na-col { display: none; }
  html.is-mobile #nt_body .na-row > .na-col { flex: 0 0 100%; max-width: 100%; }
  .mm-home, .mm-board { max-width: 1000px; margin: 0 auto; }
  /* 연한 종이색 띠는 화면 끝까지 */
  .mm-hero, .mm-bh, .mm-vh { border-bottom: 0; box-shadow: 0 0 0 100vmax var(--mm-paper); clip-path: inset(0 -100vmax); position: relative; }
  .mm-hero { padding: 32px 24px 26px; }
  .mm-hero h1 { font-size: 26px; }
  .mm-hero p { font-size: 14px; }
  .mm-search { max-width: 560px; }
  .mm-bh { padding: 28px 24px 20px; }
  .mm-bh h1 { font-size: 24px; }
  .mm-filter { max-width: 560px; }
  .mm-vh { padding: 26px 24px 22px; }
  .mm-vh h1 { font-size: 24px; }
  .mm-acct, .mm-entry, .mm-links, .mm-steps, .mm-tabs { margin-left: 24px; margin-right: 24px; }
  .mm-sec-h, .mm-count, .mm-vsec, .mm-vnav, .mm-vback { padding-left: 24px; padding-right: 24px; }
  .mm-more { margin-left: 24px; margin-right: 24px; }
  .mm-acct-guest .mm-two { max-width: 360px; }
  .mm-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; padding: 6px 20px; }
  .mm-steps li { border-bottom: 0; flex-direction: column; gap: 8px; padding: 14px 0; }
  .mm-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-links a { min-height: 88px; font-size: 13.5px; }

  /* 시험 목록: 2열 카드 */
  .mm-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 24px 0; }
  .mm-rows li { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: #fff; overflow: hidden; }
  .mm-rows li:last-child { border-bottom: 1px solid var(--mm-line); }
  .mm-row { height: 100%; min-height: 76px; }
  .mm-pager { padding-top: 28px; }

  /* 상세: 정답·해설을 나란히 */
  .mm-vsec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .mm-vsec > h2, .mm-vsec > .mm-hint, .mm-vsec > .mm-note, .mm-vsec > .mm-empty { grid-column: 1 / -1; }
  .mm-vnav { max-width: 640px; }
  .mm-vback { max-width: 640px; }

  /* 확인 시트는 가운데 카드로 */
  .mm-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(460px, calc(100% - 48px)); border-radius: 18px; transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: transform .2s ease-out, opacity .2s; padding-bottom: 20px; }
  .mm-sheet.open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }

  /* 이용안내·로그인 */
  .mtd { max-width: 760px; margin: 0 auto; padding: 28px 24px 8px; font-size: 15px; }
  .mtd-quick { display: none; }
  #mb_login.mbskin { max-width: 440px; padding-top: 48px; }
}
@media (min-width: 1024px) {
  .mm-rows { gap: 14px; }
  .mm-vsec { column-gap: 20px; }
}