@import url("../common/theme.css?v=20260906a");

/* ============================================================================
 * shell.css — 학생용 통합 앱의 현관 조판 (2026-08-15)
 *
 * common/home.css 를 그대로 쓰고 **여기서는 늘어난 것만** 덧붙인다.
 *   · 탭줄 (탐구 시작 / 모둠 참여 / 수업 안내 / 수업 준비 / 큐브 점검)
 *   · 모둠 참여 카드
 *   · 정본 문서를 끼우는 프레임
 *
 * 색은 학생 앱 규약 그대로다 — 흰 바탕 · 인디고(var(--acc)) + 민트(var(--ok)) · 시스템 글꼴.
 * 외부 폰트·CDN 을 쓰지 않는다(교실은 오프라인이다).
 * ========================================================================= */

/* ── 탭줄 ────────────────────────────────────────────────────────────────
 * 태블릿에서 한 줄에 다 안 들어가면 옆으로 민다. 접히면 어느 탭이 있는지 안 보인다. */
.shelltabs {
  display: flex; gap: 2px; align-items: stretch;
  padding: 0 28px; border-bottom: 1px solid var(--line);
  background: var(--panel);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  position: sticky; top: 0; z-index: 20;
}
.shelltabs::-webkit-scrollbar { height: 0; }
.shelltabs button {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 50px; padding: 0 18px;
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--dim); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.shelltabs button .i { width: 18px; height: 18px; }
.shelltabs button:hover:not(.on) { color: var(--tx); background: var(--panel2); }
.shelltabs button.on {
  color: var(--accent-ink, var(--acc));
  border-bottom-color: var(--acc);
  background: transparent;
}
/* 교사 앱 안에 끼워 넣었을 때는 탭줄을 감춘다 — 탭이 두 겹이 되면 안 된다 */
body[data-embed="1"] .shelltabs { display: none; }

/* ── 판 ─────────────────────────────────────────────────────────────── */
.pane { display: none; }
.pane.on { display: block; }

/* ── 모둠 참여 ───────────────────────────────────────────────────────── */
.joincard {
  max-width: 560px; margin: 0 auto 26px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 26px 22px; box-shadow: var(--shadow, 0 1px 2px rgba(15,23,42,.06));
  text-align: center;
}
.joincard h2 { margin: 0 0 12px; font-size: 15px; color: var(--dim); font-weight: 600; letter-spacing: .02em; }
.joincard input {
  width: 100%; max-width: 340px;
  font: 700 clamp(34px, 8vw, 46px)/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .16em; text-align: center;
  padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--tx);
}
.joincard input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.joincard .hint { font-size: 13.5px; color: var(--dim); line-height: 1.65; margin: 4px 0 16px; }
.joincard .open { width: 100%; max-width: 340px; min-height: 56px; font-size: 17px; }

.seatrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 6px; flex-wrap: wrap; }
.seatrow .lbl { font-size: 13px; font-weight: 600; color: var(--faint, var(--faint)); }
.seats { display: inline-flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
/* 자리 번호 — 손가락으로 누르는 크기. 개인별 제출의 신원이라 잘못 누르면 안 된다 */
.seatbtn {
  min-width: 52px; min-height: 52px; border-radius: 12px;
  font-size: 20px; font-weight: 700;
  background: var(--panel2); color: var(--tx); border: 1px solid var(--line);
}
.seatbtn.on { background: var(--acc); color: #fff; border-color: var(--acc); }

.jmsg { min-height: 20px; margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--dim); }
.jmsg.ok { color: var(--ok); font-weight: 600; }
.jmsg.bad { color: var(--bad); font-weight: 600; }

.howto {
  max-width: 720px; margin: 0 auto;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 24px;
}
.howto h3 { margin: 0 0 10px; font-size: 15px; }
.howto ol { margin: 0 0 12px; padding-left: 22px; }
.howto li { margin: 6px 0; font-size: 14.5px; line-height: 1.7; color: var(--tx-2, var(--tx)); }
.howto .hint { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.7; }

/* ── 정본 문서를 끼우는 판 ────────────────────────────────────────────
 * ★사본을 만들지 않는다 — 같은 파일을 학생·학부모·교육청에도 보내므로
 *   두 벌이 되면 반드시 어긋난다. 그래서 전부 iframe 이다.
 * 높이를 뷰포트에 맞춘다: 안쪽 문서가 스스로 스크롤해야 바깥 화면이 안 흔들린다. */
.docpane { padding: 0; max-width: none; }
.docbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.docbar .hint { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.6; }
.docbar .sp { flex: 1; }
.docpane iframe {
  display: block; width: 100%; height: calc(100vh - 160px); min-height: 420px;
  border: 0; background: #fff;
}
.preptabs { display: flex; gap: 8px; padding: 12px 28px 0; flex-wrap: wrap; }
.preptabs button.on { background: var(--acc); color: #fff; border-color: var(--acc); }

@media (max-width: 720px) {
  .shelltabs { padding: 0 14px; }
  .shelltabs button { padding: 0 12px; font-size: 14px; }
  .docbar { padding: 10px 14px; }
  .docpane iframe { height: calc(100vh - 190px); }
}

/* ── 수업 코드로 들어가기 (2026-08-17) ────────────────────────────────
 * 카메라가 없는 노트북 학생이 주소를 치고 들어와 네 자리만 넣는 자리다.
 * 「탐구 시작」 탭의 맨 위 — QR 을 못 찍은 학생이 가장 먼저 보는 것이어야 한다. */
.classcard { border-color: var(--acc); box-shadow: none; }
.classcard input { max-width: 260px; letter-spacing: .3em; }
.classcard .hint { max-width: 460px; margin-left: auto; margin-right: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   현관 — 문 둘 (2026-08-19 사용자 지정)

   ★좌우로 나란히 둔다. 교실에서 학생이 하는 일은 둘 중 하나이고, 어느 쪽인지는
     선생님이 이미 말해 준다. 위아래로 쌓으면 아래 것이 안 보인다.
   ★세로가 좁은 기기(세로로 든 태블릿·폰)에서는 위아래로 접힌다 —
     그때는 **수업 들어가기가 위**다. 교실에서 훨씬 자주 쓰는 문이다.
   ══════════════════════════════════════════════════════════════════════ */
.gate {
  display: grid; gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  max-width: 1080px; margin: 0 auto 24px;
}
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; } }

.gatecard {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px 24px 20px; text-align: center;
  box-shadow: var(--shadow, 0 1px 2px rgba(15, 23, 42, .06));
}
/* 왼쪽 문은 **오늘 쓰는 문**이다 — 테두리로 그렇게 말한다 */
.gatecard.join { border-color: var(--acc); box-shadow: none; }
.gatecard h2 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: var(--dim);
}

/* 그림 자체가 단추다 — 「어디를 눌러야 카메라가 켜지나」를 묻게 하지 않는다 */
.gatecard .shot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; flex: 1; min-height: 210px;
  padding: 22px 16px; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 16px;
  background: var(--panel2); color: var(--tx);
}
.gatecard .shot:hover { border-color: var(--acc); background: var(--acc-soft); }
.gatecard .shot:active { transform: translateY(1px); }
.gatecard .shot b { font-size: clamp(20px, 3.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.gatecard .shot small { font-size: 13.5px; color: var(--dim); line-height: 1.6; }
/* 카메라가 없는 기기 — 단추를 **지우지 않고** 흐리게 둔다.
   있는 단추가 사라지면 「내 태블릿만 이상한가」로 읽힌다. */
.gatecard .shot.off { opacity: .62; border-style: solid; }

.shotart { display: inline-flex; align-items: center; gap: 12px; }
.shotart .i {
  width: clamp(52px, 9vw, 76px); height: clamp(52px, 9vw, 76px);
  fill: none; stroke: var(--acc); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.gatecard.pick .shotart .i { stroke: var(--ok); }

/* 「또는」 — 가로줄 가운데 글자 하나 */
.gatecard .or {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 0 0; font-size: 12.5px; color: var(--faint, var(--faint));
}
.gatecard .or::before, .gatecard .or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.codebox { display: flex; gap: 10px; align-items: stretch; }
.codebox input {
  flex: 1; min-width: 0;
  font: 700 clamp(28px, 6vw, 38px)/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .22em; text-align: center;
  padding: 8px 6px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--tx);
}
.codebox input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.codebox .open { flex: 0 0 auto; min-height: 58px; padding: 0 22px; font-size: 17px; }

.picknums { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.picknums .chip.lab { border-color: transparent; background: var(--ok-soft); color: var(--ok); }

/* 처음으로 — 판마다 위에 한 줄 */
.backbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto 18px;
}
.backbar .hint { margin: 0; font-size: 13.5px; color: var(--dim); }
.backbar .ghost .i, .docbar .ghost .i { width: 16px; height: 16px; }

/* 머리줄의 작은 링크 (큐브 점검) */
.hlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font-size: 13px; font-weight: 600;
}
.hlink:hover { color: var(--tx); background: var(--panel2); }
.hlink .i { width: 16px; height: 16px; }

/* 랩 카드의 둘째 줄 — 몸으로 하는 활동 여섯 (2026-08-21) */
.labchips.gym { margin-top: 6px; align-items: center; }
.labchips.gym .lbl {
  font-size: 12px; font-weight: 700; color: var(--faint);
  margin-right: 2px; white-space: nowrap;
}
.labchips.gym .chip { border-color: var(--ok); color: var(--ok); background: transparent; }

/* ── 이름표 = 처음으로 (2026-08-21) ──────────────────────────────────────
 * 랩·큐브 모니터링이 머리줄 **아래**로 들어오면서, 돌아가는 길이 늘 같은 자리에
 * 있어야 한다. 왼쪽 위 이름표를 누르면 현관이다(웹에서 가장 오래된 약속).
 * ★생김새는 예전 그대로다 — 단추처럼 보이면 머리줄이 시끄러워진다. */
.homebtn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 2px 6px 2px 2px; margin: -2px 0 -2px -2px;
  background: transparent; border: 0; border-radius: 12px;
  cursor: pointer; color: inherit; text-align: left;
}
.homebtn:hover { background: var(--panel2); }
.homebtn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.homebtn h1 { margin: 0; }

header .teacher-entry {
  flex-shrink: 0; min-height: 32px; padding: 6px 10px;
  font-size: 12px; border-radius: 6px;
}
header .teacher-entry:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── 랩 판 — 머리줄과 안내줄을 뺀 만큼만 쓴다 ───────────────────────────
 * 랩은 자기 안에서 세로로 긴 마법사(실험 고르기 → … → 결과)를 굴린다.
 * 틀 높이를 넉넉히 주지 않으면 그 안에서 두 겹으로 스크롤하게 된다. */
.docpane.labpane iframe { height: calc(100vh - 104px); min-height: 520px; }
@media (max-width: 720px) {
  .docpane.labpane iframe { height: calc(100vh - 128px); }
}