/* homeschool/math 공통 셸 — 툴바 / A4 시트 / 인쇄 / 정답 토글
   (tokei-jikan.html 의 셸에서 추출. 새 학습지는 이 파일 + common.js 를 로드) */
:root{
  --ink:#1d1d1d;
  --frame:#1d1d1d;
  --answer:#d23b2e;
  --paper:#ffffff;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
  background:#e9e6df;
  color:var(--ink);
}

/* ===== 컨트롤 바 (인쇄 시 숨김) ===== */
.toolbar{
  position:sticky; top:0; z-index:10;
  background:#2f3a46; color:#fff;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:12px 16px;
}
.toolbar a.home{color:#8ecae6; text-decoration:none; font-size:14px; margin-right:4px;}
.toolbar button, .toolbar select{
  font-size:15px; padding:9px 16px; border-radius:8px;
  border:none; cursor:pointer; font-family:inherit;
}
.btn-new{background:#ffb703; color:#2f3a46; font-weight:bold;}
.btn-print{background:#8ecae6; color:#16313f; font-weight:bold;}
.btn-new, .btn-print, .btn-ans{display:inline-flex; align-items:center; gap:5px;}
.btn-ic{width:15px; height:15px;}
/* 돌아가기: 어두운 툴바 위라 아이콘을 흰색으로 (배경 없는 링크) */
.toolbar a.home{display:inline-flex; align-items:center; padding:7px 9px;}
.toolbar a.home .btn-ic{width:18px; height:18px; filter:brightness(0) invert(1);}
.btn-ans{background:#fff; color:#2f3a46; font-weight:bold;}
.btn-ans.on{background:var(--answer); color:#fff;}
.btn-ans.on .btn-ic{filter:brightness(0) invert(1);}  /* 정답 표시(빨강 배경)일 때 눈 아이콘 흰색 */
.lang-group{margin-left:auto; display:flex; gap:6px;}
.btn-lang{background:#fff; padding:3px 8px; font-size:20px; line-height:1.1; opacity:.4; border:2px solid transparent !important;}
.btn-lang.active{opacity:1; border-color:#ffb703 !important;}
.toolbar label{font-size:14px; display:flex; align-items:center; gap:6px;}

/* ===== A4 용지 ===== */
.sheet{
  width:210mm; min-height:297mm;
  margin:16px auto; padding:12mm 14mm;
  background:var(--paper);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
}
/* 문제 영역이 A4 세로를 꽉 채우도록 — 남는 공간을 흡수.
   flex-shrink:0 → 내용이 297mm 를 넘겨도 줄어들지(눌리지) 않아 흰 배경 밖으로
   넘치지 않는다(모바일 하단 침범 버그 fix). 화면 슬랙은 grow 로 분산. */
#problems{ flex:1 0 auto; }

/* 헤더 */
.head{display:flex; gap:8mm; align-items:stretch; margin-bottom:6mm;}
.titlebox{
  border:2.5px solid var(--frame); border-radius:10px;
  padding:3mm 6mm; flex:0 0 auto;
}
.titlebox h1{font-size:19px; letter-spacing:1px;}
.titlebox p{font-size:13px; margin-top:1mm;}
.namefield{
  flex:1; display:flex; align-items:flex-end; gap:4mm;
  font-size:12px; padding-bottom:1mm;
}
.nameline{flex:1; border-bottom:1.5px solid var(--ink); height:9mm;}
.datefield{font-size:13px; align-self:flex-start; padding-top:1mm; white-space:nowrap;}

.lead{font-size:13.5px; line-height:1.7; margin-bottom:4mm;}

/* 정답 표시 */
.ans{color:var(--answer); font-weight:bold; visibility:hidden;}
body.show-answers .ans{visibility:visible;}

/* 하단 'OOOO 연습 프린트' 푸터 텍스트 — 화면·인쇄 모두 숨김 (사용자 요청) */
footer.sheetfoot{ display:none; }

/* 분수 표기 */
.frac{display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; line-height:1.15; margin:0 2px;}
.frac .fn{padding:0 5px;}
.frac .fd{border-top:1.8px solid currentColor; padding:0 5px;}
.mixed{display:inline-flex; align-items:center; gap:2px;}

/* ===== 인쇄 ===== */
/* @page margin:0 → 브라우저 기본 머리글/바닥글(URL·날짜·페이지번호) 억제(Chrome/Edge).
   실제 여백은 .sheet 패딩으로 확보. */
@page{ size:A4; margin:0; }
@media print{
  body{background:#fff;}
  .toolbar{display:none;}
  .sheet{
    width:auto; min-height:0; height:auto;
    margin:0; padding:10mm 12mm;
    box-shadow:none;
  }
  .head{margin-bottom:4mm;}
  .lead{margin-bottom:3mm;}
  footer.sheetfoot{display:none;}
  .sheet-wrap{height:auto !important; overflow:visible; display:block;}
  .sheet{transform:none !important;}
  html, body{height:auto; overflow:visible;}
}

/* 화면에서는 A4 비율 그대로 축소해서 표시 */
.sheet-wrap{
  width:100%; overflow:hidden;
  display:flex; justify-content:center;
  align-items:flex-start;  /* stretch 금지 — 안 그러면 .sheet 가 wrap(축소)높이로 눌려 내용이 흰 배경 밖으로 넘침(모바일 버그) */
}
.sheet{transform-origin:top center; flex:0 0 auto;}

/* ===== 모바일: 툴바 버튼 축소 + 아이콘만 표시 ===== */
@media (max-width:600px){
  .toolbar{ padding:8px 10px; gap:6px; }
  .toolbar a.home{ font-size:13px; padding:7px 9px; }
  .toolbar button, .toolbar select{ font-size:13px; padding:7px 9px; }
  /* 텍스트 라벨 숨기고 아이콘만 (다시 출제 / 인쇄 / 정답 보기) */
  .btn-new span, .btn-print span, .btn-ans .ans-label{ display:none; }
  .btn-new, .btn-print, .btn-ans{ padding:7px 10px; gap:0; }
  .btn-ic{ width:17px; height:17px; }
  .btn-lang{ font-size:18px; padding:2px 6px; }
  .toolbar label{ font-size:12px; }
}