@import url("theme.css");

/* ══════════════════════════════════════════════════════════════════════
   안내문서 공통 서식 — 수업준비_큐브세팅.html · 수업순서.html 이 함께 쓴다.

   ★수업안내.html(소개자료)은 **이 파일을 쓰지 않는다.** 그 파일은 메일 한 통으로
     보내야 하므로 외부 참조가 하나도 없어야 한다 ⟹ 서식을 제 안에 품고 있다.
     여기 있는 것은 그 서식을 그대로 떼어 온 사본이고, 두 문서만 참조한다.
   ★교사용 앱은 이 문서들을 iframe 으로 끼운다 — 그래서 teacher.css 와
     **이름이 겹쳐도 서로 침범하지 않는다**(문서 경계가 곧 격리다).
   ══════════════════════════════════════════════════════════════════ */
/* ★색·글꼴 토큰은 전부 common/theme.css 에 있다 (2026-08-20).
   여기서 색을 새로 만들지 않는다. 바탕도 큐브랩과 같은 **흰색**이다 —
   구획은 색이 아니라 얇은 회색 선과 여백으로 나눈다. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color: var(--tx);
  font: var(--fs-tx)/1.75 var(--font-ui);letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}

/* ── 머리 ── */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hin{max-width:1000px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mark{width:30px;height:30px;flex:0 0 auto}
.mark svg{width:100%;height:100%;fill:none;stroke:var(--ind);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
h1{font-size: var(--fs-h2);margin:0;letter-spacing:-.02em}
h1 small{display:block;font-size: var(--fs-tx);color:var(--dim);font-weight:400;letter-spacing:0}
/* 머리말의 목차 — 탭이 아니다. 한 페이지를 위아래로 오가는 길잡이다
   (2026-08-13 에 두 탭을 한 페이지로 합쳤다). */
.tabs{margin-left:auto;display:flex;gap:6px}
.tabs a{font:inherit;font-size: var(--fs-tx);font-weight:700;text-decoration:none;
  padding:7px 16px;border-radius:99px;border:1px solid var(--line);
  background:#fff;color:var(--dim)}
.tabs a:hover{background:var(--ind-soft);color: var(--acc);border-color:transparent}

main{max-width:1000px;margin:0 auto;padding:26px 24px 70px}
section{scroll-margin-top:74px}

/* 1부 / 2부 머리표 — 한 페이지 안에서 성격이 바뀌는 자리를 눈으로 끊어 준다 */
.partmark{
  display:flex;align-items:center;gap:11px;margin:6px 0 4px;padding:12px 16px;
  background:var(--ind-soft);border-radius:12px;
  font-size: var(--fs-h2);font-weight:700;letter-spacing:-.02em;color: var(--tx)
}
.partmark span{
  background:var(--ind);color:#fff;font-size: var(--fs-tx);font-weight:700;
  padding:3px 11px;border-radius:99px;letter-spacing:0;flex:0 0 auto
}
/* 1부 → 2부 로 넘어가는 다리 */
.bridge{
  display:flex;align-items:center;gap:16px;margin:34px 0 6px;padding:18px 22px;
  background:#fff;border:1px solid var(--line);
  border-radius:14px
}
.bridge b{font-size: var(--fs-h2)}
.bridge p{color:var(--dim);font-size: var(--fs-tx)}
.bridge .down{margin-left:auto;font-size: var(--fs-h2);color: var(--dim);flex:0 0 auto}

h2{font-size: var(--fs-h1);margin:40px 0 6px;letter-spacing:-.02em}
h2:first-child{margin-top:6px}
/* 문서 **안쪽** 단계 번호 (0·1·2 …).
   ★2026-08-14 — 교사용 앱 「수업 준비」가 이 문서를 끼워 보여 주면서, 바깥의 큰 번호
     (1 큐브 세팅 · 2 태블릿 인증 · 3 수업 순서)와 **똑같은 보라색 네모**가 되어
     「3 아래에 또 3」처럼 읽혔다. 같은 색·같은 모양이면 같은 계층으로 읽힌다.
   ⟹ 안쪽 번호는 **속이 빈 민트색 동그라미**로 내린다. 색도 모양도 채움도 다르므로
      한눈에 아래 계층임을 안다. 문서를 혼자 열 때도 자연스럽다(민트는 이 문서의
      보조색이다 — .note · .bridge 가 이미 쓴다). */
h2 .step{display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:50%;
  background:#fff;border:1px solid var(--line-strong);color:var(--dim);
  font-size: var(--fs-tx);font-weight:700;font-family:var(--font-ui);
  margin-right:9px;vertical-align:1px}
h3{font-size: var(--fs-h2);margin:24px 0 6px}
p{margin:8px 0}
.lead{color:var(--dim);font-size: var(--fs-tx);margin:0 0 14px}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin:14px 0}
.fig{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px;margin:16px 0;overflow:hidden}
.fig svg{display:block;width:100%;height:auto}
.cap{font-size: var(--fs-tx);color:var(--dim);margin:10px 4px 0;text-align:center}

.note{background:var(--mint-soft);border:1px solid transparent;border-radius:12px;
  padding:14px 18px;margin:14px 0;font-size: var(--fs-tx)}
.note b{color: var(--ok)}
.warnbox{background:var(--warn-soft);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;margin:14px 0;font-size: var(--fs-tx)}
.warnbox b{color: var(--dim)}

ol,ul{padding-left:22px;margin:10px 0}
li{margin:7px 0}
/* 숫자만 폭을 고정한다 — 글꼴은 본문과 같다 */
h2 .step,.big,.order span,td.n,.parts .n{font-variant-numeric:tabular-nums}
code{font-family:var(--font-num);font-size:var(--fs-tx);background:var(--ind-soft);
  color: var(--acc);padding:1px 6px;border-radius:5px}
kbd{font:inherit;font-size: var(--fs-tx);font-weight:700;background:var(--ind);color:#fff;
  padding:3px 11px;border-radius:7px;white-space:nowrap;display:inline-block}

table{border-collapse:collapse;width:100%;font-size: var(--fs-tx);margin:12px 0}
th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
th{background:var(--subtle);font-size: var(--fs-tx);font-weight:700;white-space:nowrap}
td.n{text-align:right;font-family:var(--font-ui)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}

.big{font-family:var(--font-ui);font-size: var(--fs-h1);color: var(--acc);letter-spacing:.14em;
  background:var(--ind-soft);padding:2px 16px;border-radius:11px;display:inline-block}

.order{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.order span{font-size: var(--fs-tx);font-weight:700;color:var(--dim);background:#fff;
  border:1px solid var(--line);border-radius:99px;padding:6px 15px}
/* 「① 스티커 ▶ ② 번호 ▶ ③ 껐다 켜기」의 지금 자리 — 문서 안쪽 표시이므로
   위의 단계 동그라미와 같은 민트로 맞춘다(바깥의 보라색 큰 번호와 갈라 둔다). */
.order span.on{background:var(--tx-2);border-color:var(--tx-2);color:#fff}
.order .arw{border:0;background:none;color: var(--dim);padding:0;font-size: var(--fs-tx)}
/* 글을 줄이면 사진만 길게 남아 오른쪽이 텅 빈다 — 사진을 줄이고 가운데로 맞춘다 (2026-08-18) */
.stickrow{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:12px 0}
.stickfig{margin:0}
.stickfig img{width:100%;height:auto;display:block}
.stickfig figcaption{font-size: var(--fs-tx);color:var(--dim);margin-top:6px;line-height:1.6}
.sticktxt p{margin:0 0 10px}
.sticktxt ul{margin:10px 0 12px}
.sticktxt li{font-size: var(--fs-tx)}
.hintline{background:var(--warn-soft);border-left:1px solid var(--line-strong);padding:9px 13px;
  border-radius:0 8px 8px 0;font-size: var(--fs-tx);color:var(--dim)}
@media (max-width:760px){.stickrow{grid-template-columns:1fr}}
.qna{border-top:1px solid var(--line);padding:14px 0}
.qna b{display:block;font-size: var(--fs-h2);margin-bottom:2px}
.qna p{margin:0;color:var(--dim);font-size: var(--fs-tx)}

.foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  color: var(--dim);font-size: var(--fs-tx)}

@media print{
  header{position:static} .tabs{display:none}
  body{background:#fff} main{padding:0}
  .card,.fig,.note,.partmark,.bridge{break-inside:avoid}
  h2{break-after:avoid}
}

/* ── 교사용 앱 안에 끼워졌을 때 (iframe) ───────────────────────────────
   ★머리(제목·인쇄 단추)는 **앱 쪽에 이미 있다.** 두 벌이 겹치면 화면 위쪽이
     두 겹으로 두꺼워지고, 어느 인쇄 단추가 무엇을 찍는지 헷갈린다.
     ⟹ 끼워졌을 때만 문서 자신의 머리를 감춘다 (혼자 열면 그대로 나온다).
   ★교사 화면은 이미 좌우 여백이 있으므로 문서가 또 여백을 두면 글이 가운데로
     몰려 줄이 짧아진다 — 위아래만 남기고 좌우는 줄인다. */
body.embed header{display:none}
body.embed main{padding:4px 18px 28px;max-width:none}
body.embed{background:transparent}

/* ⚠️2026-08-18 — 문구 편집기로 한쪽 칸을 통째로 지우면 남은 칸이 절반 폭으로 떠서
   빈 오른쪽이 「뭔가 빠진 화면」으로 읽힌다. 하나만 남으면 가로를 다 쓰게 한다. */
.grid2:has(> :only-child), .grid3:has(> :only-child) { grid-template-columns: 1fr; }
.grid3:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }