/* ═══════════════════════════════════════════════════════════
   common.css  —  수학데이 공통 스타일 초안
   Phase 2 산출물 (원본 <style> 블록과 공존 · 덮어쓰기 전략)
   작성일: 2026-04-20
   ⚠️  AdSense 관련 클래스(.ad-row, adsbygoogle)는 클래스명 변경 금지
   ⚠️  기존 인라인 <style> 삭제 금지 — 이 파일은 추가만 함
═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────
   1. CSS VARIABLES
─────────────────────────────────────── */
:root {
  --primary:       #2563EB;
  --primary-light: #EFF6FF;
  --primary-dark:  #1d4ed8;
  --orange:        #F97316;
  --green:         #16A34A;
  --red:           #EF4444;
  --bg:#fff;
  --card:          #fff;
  --text:          #1e293b;
  --muted:         #64748b;
  --border:        #E2E8F0;
  --sidebar-w:     260px;
}

/* ───────────────────────────────────────
   2. RESET
─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  top: 0 !important; /* Google Translate body shift 방지 */
}

/* ───────────────────────────────────────
   3. TOP BAR
─────────────────────────────────────── */
.topbar {
  background: #fff;
  border-bottom: 2px solid var(--border);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  gap: 8px;
}

.logo {
  font-family: 'Gaegu', cursive;
  font-size: 28px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -1px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo span { color: var(--orange); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-ad {
  background: #f1f5f9;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  padding: 6px 24px;
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 1px;
}

/* 햄버거 버튼 (기본 숨김 — mobile.css에서 표시) */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text);
  font-size: 22px;
  flex-shrink: 0;
  transition: background .15s;
  /* lang.js 앵커(.topbar-right)와 분리 — .topbar-right 바깥·좌측 배치 필수 */
}
.hamburger-btn:hover { background: var(--primary-light); }

/* 사이드바 오버레이 (기본 숨김) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 180;
}
.sidebar-overlay.on { display: block; }

/* ───────────────────────────────────────
   4. SCHOOL TABS (토픽바)
─────────────────────────────────────── */
.school-tabs {
  background: #fff;
  border-bottom: 2px solid var(--border);
  display: flex;
  padding: 0 24px;
  gap: 0;
  overflow-x: auto;          /* 모바일에서 가로 스크롤 허용 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.school-tabs::-webkit-scrollbar { display: none; }

.school-tab {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: .15s;
  white-space: nowrap;
  min-height: 44px;           /* 터치 타겟 */
  display: flex;
  align-items: center;
}
.school-tab:hover  { color: var(--primary); }
.school-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ───────────────────────────────────────
   5. LAYOUT
─────────────────────────────────────── */
.layout {
  display: flex;
  min-height: calc(100vh - 98px);
}

/* ───────────────────────────────────────
   6. SIDEBAR
─────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: #fff;
  border-right: 2px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
  transition: width .25s ease, min-width .25s ease,
              border-right-width .25s ease, transform .25s ease;
}
.sb-grade-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: #fff;
  transition: .15s;
  min-height: 44px; /* 터치 타겟 */
}
.sb-grade-btn:hover            { background: var(--primary-light); }
.sb-grade-btn.active           { background: var(--primary-light); color: var(--primary); }
.sb-grade-btn .arrow           { font-size: 10px; transition: .2s; color: var(--muted); }
.sb-grade-btn.open .arrow      { transform: rotate(90deg); }

.sb-grade-body      { display: none; }
.sb-grade-body.open { display: block; }

.sb-sem-label {
  padding: 6px 16px 4px 28px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: #fafafa;
  border-bottom: 1px solid #f1f5f9;
}

.sb-unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 8px 28px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid #f8fafc;
  border-right: 3px solid transparent;
  transition: .15s;
  line-height: 1.4;
  min-height: 44px; /* 터치 타겟 */
}
.sb-unit:hover  { background: var(--primary-light); color: var(--primary); }
.sb-unit.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  border-right-color: var(--primary);
}

.sb-unit .badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
  margin-left: 6px;
  font-weight: 700;
  letter-spacing: .5px;
}
.badge-ready { background: #dcfce7; color: #16a34a; }
.badge-soon  { background: #f1f5f9; color: #94a3b8; }

/* ───────────────────────────────────────
   7. MAIN CONTENT
─────────────────────────────────────── */
.main {
  flex: 1;
  padding: 24px;
  overflow-x: hidden;
  max-width: 960px;
}

/* AdSense 광고 행 — 클래스명 변경 금지 */
.ad-row {
  background: #f1f5f9;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

/* ───────────────────────────────────────
   8. WELCOME SCREEN
─────────────────────────────────────── */
.welcome { text-align: center; padding: 60px 20px; }
.welcome h2 { font-family: 'Gaegu', cursive; font-size: 32px; color: var(--primary); margin-bottom: 12px; }
.welcome p  { color: var(--muted); font-size: 15px; line-height: 1.8; }
.welcome .stats { display: flex; justify-content: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }

.stat-box { background: #fff; border: 2px solid var(--border); border-radius: 16px; padding: 20px 28px; text-align: center; }
.stat-box .num { font-family: 'Gaegu', cursive; font-size: 36px; color: var(--primary); font-weight: 700; }
.stat-box .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ───────────────────────────────────────
   9. UNIT HEADER
─────────────────────────────────────── */
.unit-header  { margin-bottom: 20px; }
.breadcrumb   { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.breadcrumb span { color: var(--primary); font-weight: 700; }
.unit-title   { font-family: 'Gaegu', cursive; font-size: 28px; color: var(--text); font-weight: 700; }
.unit-desc    { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ───────────────────────────────────────
   10. TYPE CARDS
─────────────────────────────────────── */
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.type-card {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 18px 14px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  position: relative;
  min-height: 44px; /* 터치 타겟 */
}
.type-card:hover  { border-color: var(--primary); box-shadow: 0 4px 16px rgba(37,99,235,.12); transform: translateY(-2px); }
.type-card.active { border-color: var(--primary); background: var(--primary-light); }
.type-card .icon  { font-size: 28px; margin-bottom: 8px; }
.type-card .name  { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4; }
.type-card.active .name { color: var(--primary); }
.type-card .desc  { font-size: 11px; color: var(--muted); margin-top: 4px; }
.type-card .coming {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.85);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: 1px;
}

/* ───────────────────────────────────────
   11. OPTIONS BOX (슬라이더 · 버튼)
─────────────────────────────────────── */
.options-box {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.opt-label  { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .5px; }
.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row input {
  accent-color: var(--primary);
  width: 130px;
  height: 8px;           /* 트랙 8px — 접근성 */
  cursor: pointer;
}
/* 슬라이더 thumb 28px 이상 (WCAG 2.5.5) */
.slider-row input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
.slider-row input[type="range"]::-moz-range-thumb     { width: 28px; height: 28px; }

.slider-val { font-size: 18px; font-weight: 900; color: var(--primary); min-width: 32px; }

.btn-gen {
  padding: 12px 28px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  box-shadow: 0 3px 0 var(--primary-dark);
  transition: .1s;
  margin-left: auto;
  min-height: 44px; /* 터치 타겟 */
}
.btn-gen:active   { box-shadow: 0 1px 0 var(--primary-dark); transform: translateY(2px); }
.btn-gen:disabled { background: #94a3b8; box-shadow: none; cursor: not-allowed; }

/* ───────────────────────────────────────
   12. COMING SOON PANEL
─────────────────────────────────────── */
.coming-soon {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 2px dashed var(--border);
  border-radius: 20px;
}
.coming-soon h3 { font-family: 'Gaegu', cursive; font-size: 26px; color: var(--muted); margin-bottom: 8px; }
.coming-soon p  { font-size: 13px; color: #94a3b8; line-height: 1.8; }

/* ───────────────────────────────────────
   13. PREVIEW
─────────────────────────────────────── */
#preview { display: none; }
#preview.on { display: block; }

.preview-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.btn-t {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1.5px solid var(--primary);
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  transition: .15s;
  min-height: 44px; /* 터치 타겟 */
}
.btn-t:hover      { background: var(--primary); color: #fff; }
.btn-t.fill       { background: var(--primary); color: #fff; }
.btn-t.red        { border-color: var(--red); color: var(--red); }
.btn-t.red:hover  { background: var(--red); color: #fff; }

/* ───────────────────────────────────────
   14. WORKSHEET
─────────────────────────────────────── */
.ws {
  background: #fff;
  padding: 30px 26px;
}
.ws-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid var(--primary);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.ws-title { font-family: 'Gaegu', cursive; font-size: 26px; color: var(--primary); font-weight: 700; }
.ws-sub   { font-size: 11px; color: #888; margin-top: 3px; }
.ws-meta  { font-size: 11.5px; color: #555; text-align: right; line-height: 2; }
.ws-meta b { font-weight: 700; }
.ws-info  {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ws-info div { border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px 10px; font-size: 11px; color: #64748b; }
.ws-info div b { color: var(--text); }

/* ───────────────────────────────────────
   15. PROBLEM GRID
─────────────────────────────────────── */
.pg-std  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
.pg-wide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.pg-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }

.pbox {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 10px;
}
.pnum { font-size: 10px; color: #bbb; font-weight: 700; margin-bottom: 6px; }

/* ───────────────────────────────────────
   16. WORKSHEET CONTENT RENDERERS
   (공통이지만 인라인 <style>에도 잔류 — Phase 4까지 중복 허용)
─────────────────────────────────────── */

/* 가르기/모으기 */
.split-diagram { display: flex; flex-direction: column; align-items: center; }
.split-top {
  font-size: 24px; font-weight: 900; font-family: 'Courier New', monospace;
  width: 42px; height: 42px;
  border: 2.5px solid var(--primary); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.split-lines { width: 80px; height: 22px; position: relative; margin: 2px 0; }
.split-lines::before,
.split-lines::after {
  content: ''; position: absolute; top: 0; width: 2px; background: #999; height: 100%;
}
.split-lines::before { left: 50%; transform: translateX(-50%) rotate(-25deg); transform-origin: top center; }
.split-lines::after  { left: 50%; transform: translateX(-50%) rotate(25deg);  transform-origin: top center; }
.split-bottom        { display: flex; gap: 16px; }
.split-box {
  font-size: 20px; font-weight: 900; font-family: 'Courier New', monospace;
  width: 38px; height: 38px;
  border: 2.5px solid #ccc; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.split-box.filled { border-color: var(--primary); color: var(--primary); }
.split-box.ans    { border-color: var(--green); color: var(--green); }

/* 수식 */
.eq {
  font-size: 18px;
  font-weight: 900;
  font-family: 'Courier New', monospace;
  text-align: center;
  line-height: 2.4;
}
.eq .blank-box {
  display: inline-block;
  width: 44px; height: 28px;
  border: 2.5px solid #333; border-radius: 5px;
  vertical-align: middle; margin: 0 2px;
  line-height: 26px; text-align: center;
}
.eq .blank-box.ans { border-color: var(--green); color: var(--green); font-size: 16px; }
.eq .op { color: var(--primary); }

.eq-pair    { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.eq-given   { font-size: 14px; font-weight: 700; font-family: 'Courier New', monospace; color: #555;  border-radius: 6px; padding: 4px 10px; }
.eq-ask     { font-size: 17px; font-weight: 900; font-family: 'Courier New', monospace; }

/* ───────────────────────────────────────
   17. QR SECTION
─────────────────────────────────────── */
.qr-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px dashed #e2e8f0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.qr-box {
  flex-shrink: 0;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 7px;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
}
.qr-box canvas,
.qr-box img { width: 72px !important; height: 72px !important; }
.qr-info h4 { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.qr-info p  { font-size: 11px; color: #888; line-height: 1.6; }
.qr-seed    { font-size: 10px; color: #aaa; margin-top: 5px; font-family: monospace; }

/* ───────────────────────────────────────
   18. ANSWER OVERLAY / MODAL
─────────────────────────────────────── */
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay.on { display: flex; }

.modal {
  background: #fff;
  border-radius: 16px;
  padding: 26px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.modal h2   { font-family: 'Gaegu', cursive; color: var(--green); font-size: 24px; margin-bottom: 4px; }
.modal .mmeta { font-size: 11px; color: #94a3b8; margin-bottom: 16px; }

.ans-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ans-item { background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 8px; padding: 8px 6px; text-align: center; }
.ans-item .n { font-size: 10px; color: #86efac; font-weight: 700; }
.ans-item .e { font-size: 10px; color: #888; font-family: monospace; margin: 2px 0; }
.ans-item .a { font-size: 18px; font-weight: 900; color: var(--green); font-family: 'Courier New', monospace; }

/* 모달 닫기 버튼 48×48px (WCAG 2.5.5) */
.close-x {
  position: absolute;
  top: 14px; right: 14px;
  width: 48px; height: 48px;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ───────────────────────────────────────
   19. PRINT STYLES
─────────────────────────────────────── */
@media print {
  /* 숨길 요소 */
  .topbar, .school-tabs, .sidebar, .ad-row, .preview-bar, .overlay,
  .unit-header, .type-grid, .options-box, .welcome, .coming-soon,
  .hamburger-btn, .sidebar-overlay { display: none !important; }

  /* 레이아웃 초기화 */
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { width: 100%; margin: 0; padding: 0; }
  .layout { display: block; }
  .main   { padding: 0; max-width: 100%; width: 100%; }
  #preview { display: block !important; }

  /* 워크시트 */
  .ws {
    border: none; border-radius: 0;
    padding: 8mm 10mm;
    width: 100%; max-width: 100%;
    box-sizing: border-box;
  }

  /* 문제 그리드 — 인쇄 너비 고정 */
  .pg-std  { grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
  .pg-wide { grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
  .pg-2col { grid-template-columns: repeat(2, 1fr); gap: 8px 6px; }

  /* 문제 박스 */
  .pbox {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    
    padding: 8px 6px;
    font-size: 13px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pbox svg, .pbox img { max-width: 100%; height: auto; }
  .pbox [style*="display:flex"]    { flex-wrap: wrap; }
  .pbox [style*="min-width:52px"]  { min-width: 44px !important; padding: 4px !important; }
  .pbox [style*="min-width:58px"]  { min-width: 50px !important; padding: 4px !important; }

  /* 수식 크기 축소 */
  .eq          { font-size: 15px; }
  .split-top   { width: 34px; height: 34px; font-size: 20px; }
  .split-box   { width: 30px; height: 30px; font-size: 16px; }

  .qr-section  { margin-top: 12px; padding-top: 10px; }

  @page { margin: 10mm 8mm; size: A4 portrait; }
}

/* ───────────────────────────────────────
   20. GOOGLE TRANSLATE 위젯 억제
─────────────────────────────────────── */
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-te-gadget                     { display: none !important; }
#google_translate_element           { display: none !important; }

/* 언어 선택 <select> 터치 타겟 */
select { min-height: 44px; }


/* ═══════════════════════════════════════
   사이드바 접기/펼치기 손잡이 (Phase 7)
   - 데스크톱(≥768px) 전용
   - 접었을 때 26px 손잡이만 화면 왼쪽에 노출
═══════════════════════════════════════ */
.sidebar-toggle{
  position:fixed; top:120px; left:var(--sidebar-w,260px);
  width:26px; height:62px;
  background:var(--primary,#2563EB); color:#fff;
  border:none; border-radius:0 13px 13px 0;
  cursor:pointer; z-index:150; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:2px 3px 12px rgba(0,0,0,.18);
  transition:left .3s ease, background .15s;
  font-family:'Noto Sans KR',sans-serif;
}
.sidebar-toggle:hover{ background:var(--primary-dark,#1d4ed8); }
.sidebar-toggle-icon{
  font-size:13px; font-weight:900; line-height:1;
  display:inline-block; transition:transform .3s ease;
}
@media(min-width:768px){
  .sidebar{ transition:transform .3s ease, margin-right .3s ease; }
  body.sidebar-collapsed .sidebar{
    transform:translateX(-100%);
    margin-right:calc(-1 * var(--sidebar-w,260px));
  }
  body.sidebar-collapsed .sidebar-toggle{ left:0; }
  body.sidebar-collapsed .sidebar-toggle-icon{ transform:rotate(180deg); }
}
@media(max-width:767px){ .sidebar-toggle{ display:none; } }
@media print{ .sidebar-toggle{ display:none !important; } }

/* ═══════════════════════════════════════
   Google 번역 바 대응
   - <html>에 translated-ltr / translated-rtl 클래스가 붙으면
     상단에 40px 번역바가 얹혀서 고정/스티키 요소를 가림
   - 영향 요소: .topbar, .hamburger-btn, 모바일 .sidebar
═══════════════════════════════════════ */
html.translated-ltr .topbar,
html.translated-rtl .topbar,
html.translated-ltr .hamburger-btn,
html.translated-rtl .hamburger-btn {
  top: 40px;
}

/* 모바일: 사이드바 top = 40(번역바) + 56(topbar 높이) */
@media (max-width: 767px) {
  html.translated-ltr .sidebar,
  html.translated-rtl .sidebar { top: 96px; }
}

/* 소형폰: 사이드바 top = 40(번역바) + 52(topbar 높이) */
@media (max-width: 360px) {
  html.translated-ltr .sidebar,
  html.translated-rtl .sidebar { top: 92px; }
}

/* 인쇄 시 번역바 보정 해제 */
@media print {
  html.translated-ltr .topbar,
  html.translated-rtl .topbar,
  html.translated-ltr .hamburger-btn,
  html.translated-rtl .hamburger-btn,
  html.translated-ltr .sidebar,
  html.translated-rtl .sidebar { top: 0 !important; }
}

/* ═══════════════════════════════════════
   STEP 7 — 모바일 QA 미세 조정
   학생 풀이(solve) · 채점 결과(result) 전용
   적용 범위: solver-ui.js / result-view.js 가 주입하는 요소
═══════════════════════════════════════ */

/* ── 학생 답안 입력창 (.sd-answer) ──────── */
.sd-answer {
  /* JS에서 인라인 style로 설정하지만 CSS로 보완 */
  min-height: 36px !important;
  /* iOS: 포커스 시 자동 줌 방지 — font-size 16px 이상 강제 */
  font-size: max(16px, 1em) !important;
  /* Android 탭 하이라이트 제거 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* 모바일 키보드 올라올 때 layout shift 최소화 */
  will-change: border-color;
}
.sd-answer:focus {
  border-bottom-color: #1d4ed8 !important;
  background: rgba(37,99,235,0.04) !important;
  outline: none;
}

/* ── sticky 하단 바 (#sd-sticky-bar) ────── */
#sd-sticky-bar {
  /* iOS safe-area 대응 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 소형 폰(≤ 360px): sticky bar 버튼 텍스트 줄임 */
@media (max-width: 360px) {
  #sd-sticky-bar {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #sd-timer {
    min-width: 38px;
    font-size: 13px;
  }
}

/* ── 채점 결과 래퍼 (#sd-result-wrap) ───── */
#sd-result-wrap {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ── 채점 행 반응형 ──────────────────────── */
@media (max-width: 480px) {
  /* 긴 문제 문자열 줄바꿈 허용 */
  .result-row .rr-q {
    white-space: normal !important;
    font-size: 13px;
  }
  /* 정답/학생 답 글자 크기 */
  .result-row .rr-you,
  .result-row .rr-ans {
    font-size: 13px;
  }
  /* 점수 패널 숫자 크기 조정 */
  #sd-result-wrap .score-big-num {
    font-size: 34px;
  }
}

/* ── 에러/잘못된 링크 오버레이 버튼 ─────── */
#sd-result-wrap a[href="/"],
#sd-result-wrap a[href*="index"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── 인쇄 시 추가 요소 완전 숨김 ──────────
   (기존 @media print 보완) */
@media print {
  #sd-sticky-bar,
  #sd-result-wrap {
    display: none !important;
  }
}

/* ═══════════════════════════════════════
   Phase 2-A: solve-mode 전용 landing UI 숨김
   solver-ui.js 가 mountSolverUI() 진입 시
   document.body.classList.add('solve-mode') 로 트리거
   ─────────────────────────────────────
   @media print 와 동일한 선택자 세트를 재사용.
   추가: .sidebar-toggle, .preview-bar
═══════════════════════════════════════ */
body.solve-mode .topbar,
body.solve-mode .school-tabs,
body.solve-mode .sidebar,
body.solve-mode .sidebar-overlay,
body.solve-mode .sidebar-toggle,
body.solve-mode .ad-row,
body.solve-mode .unit-header,
body.solve-mode .type-grid,
body.solve-mode .options-box,
body.solve-mode .welcome,
body.solve-mode .coming-soon,
body.solve-mode .hamburger-btn,
body.solve-mode .preview-bar { display: none !important; }

/* 레이아웃: flex → block 으로 전환해 sidebar 공간 제거 */
body.solve-mode .layout { display: block; }

/* #preview: 기본 display:none 을 덮어써서 문제지 표시 */
body.solve-mode #preview  { display: block !important; }

/* ═══════════════════════════════════════
   Phase 2-F: result-mode 전용 landing UI 숨김
   result-view.js 가 mountResultView() 진입 시
   document.body.classList.add('result-mode') 로 트리거
   ─────────────────────────────────────
   solve-mode 와 동일한 선택자 세트 사용.
   result 뷰는 body 에 직접 렌더하므로 #preview 표시 불필요.
═══════════════════════════════════════ */
body.result-mode .topbar,
body.result-mode .school-tabs,
body.result-mode .sidebar,
body.result-mode .sidebar-overlay,
body.result-mode .sidebar-toggle,
body.result-mode .ad-row,
body.result-mode .unit-header,
body.result-mode .type-grid,
body.result-mode .options-box,
body.result-mode .welcome,
body.result-mode .coming-soon,
body.result-mode .hamburger-btn,
body.result-mode .preview-bar { display: none !important; }

/* 레이아웃: flex → block 으로 전환해 sidebar 공간 제거 */
body.result-mode .layout { display: block; }

/* ═══════════════════════════════════════════════════════════
   21. KAKAO ADFIT 광고 슬롯 (2026-04-29 추가)
   ─────────────────────────────────────────────────────────
   - 6개 슬롯: pc_top, mo_top, pc_bottom, mo_bottom, pc_side, mo_inline
   - PC/Mobile 미디어쿼리로 디바이스별 표시 분기
   - 인쇄(@media print), solve-mode, result-mode 시 모두 숨김
   - <ins class="kakao_ad_area">는 ads-loader.js가 동적으로 삽입
═══════════════════════════════════════════════════════════ */
.adfit-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px auto;
  overflow: hidden;
  min-height: 0;
}
.adfit-slot ins.kakao_ad_area { margin: 0 auto; }

/* 슬롯별 최대 너비 가이드 (미수신 시에도 레이아웃 안정) */
.adfit-slot[data-slot="pc_top"]    { max-width: 728px; }
.adfit-slot[data-slot="mo_top"]    { max-width: 320px; }
.adfit-slot[data-slot="pc_bottom"] { max-width: 300px; }
.adfit-slot[data-slot="mo_bottom"] { max-width: 320px; }
.adfit-slot[data-slot="pc_side"]   { max-width: 160px; }
.adfit-slot[data-slot="mo_inline"] { max-width: 300px; }

/* PC 전용 슬롯: 모바일(<768px)에서 숨김 */
@media (max-width: 767px) {
  .adfit-slot[data-slot="pc_top"],
  .adfit-slot[data-slot="pc_bottom"],
  .adfit-slot[data-slot="pc_side"] { display: none !important; }
}

/* 모바일 전용 슬롯: PC(≥768px)에서 숨김 */
@media (min-width: 768px) {
  .adfit-slot[data-slot="mo_top"],
  .adfit-slot[data-slot="mo_bottom"],
  .adfit-slot[data-slot="mo_inline"] { display: none !important; }
}

/* PC 사이드 레일: 좁은 PC(<1024px)에서 숨김 */
.adfit-side-rail {
  width: 160px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: 80px;
  margin: 24px 16px 0 0;
}
@media (max-width: 1023px) {
  .adfit-side-rail,
  .adfit-slot[data-slot="pc_side"] { display: none !important; }
}

/* 인쇄 시 모든 광고 영역 + SEO 개념 본문 숨김 (학부모 출력 시 불필요 요소 미노출) */
@media print {
  .adfit-slot,
  .adfit-side-rail,
  .unit-seo-desc { display: none !important; }
}

/* 학생 풀이/채점 결과 화면에서 광고 숨김 */
body.solve-mode .adfit-slot,
body.solve-mode .adfit-side-rail,
body.result-mode .adfit-slot,
body.result-mode .adfit-side-rail { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   수학데이 자체 광고 (suhakday-ads.js v1.1.0) — STEP 1-5
   AdFit 과 별도 namespace. 매칭 0건 시 data-sds-empty="1" → display:none
   ───────────────────────────────────────────────────────────────────── */
.suhakday-ad {
  display: block;
  margin: 12px auto;
  text-align: center;
  position: relative;
  /* 컨텐츠 로딩 전 layout shift 방지: 빈 상태에서는 height 0 */
}
.suhakday-ad[data-sds-empty="1"],
.suhakday-ad[data-sds-render-failed="1"] {
  display: none !important;
}
.suhakday-ad .sds-ad-link {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
  max-width: 100%;
}
.suhakday-ad .sds-ad-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.suhakday-ad .sds-ad-label {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: #888;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

/* banner_topbar — 탑바 직하단, 좌우 여백은 컨테이너 따름 */
.suhakday-ad[data-slot="banner_topbar"] {
  margin: 0 auto;
  padding: 4px 12px;
  background: #fafbff;
}

/* banner_notice — main 영역 상단, mo_top 직후 */
.suhakday-ad[data-slot="banner_notice"] {
  margin: 8px auto 14px auto;
}

/* banner_ws_bottom — 학습지 하단 */
.suhakday-ad[data-slot="banner_ws_bottom"] {
  margin: 16px auto;
}

/* banner_sidebar — MutationObserver 로 사이드바 안에 동적 주입 */
.suhakday-ad[data-slot="banner_sidebar"] {
  margin: 12px 8px;
  max-width: 200px;
}

/* banner_print — 화면 숨김, @media print 에서만 표시 */
.suhakday-ad[data-slot="banner_print"] {
  display: none;
}

/* 인쇄 시: 화면용 자체 광고는 모두 숨기고, banner_print 만 표시 */
@media print {
  .suhakday-ad { display: none !important; }
  .suhakday-ad[data-slot="banner_print"] {
    display: block !important;
    margin: 6mm auto !important;
    page-break-inside: avoid;
  }
}

/* solve-mode / result-mode 에서도 자체 광고 숨김 */
body.solve-mode .suhakday-ad,
body.result-mode .suhakday-ad { display: none !important; }