/* 교사 대시보드 (/teacher/) — assets/lab.css 변수를 쓴다. PC 기준, 태블릿·폰에서도 깨지지 않게 */
.wrap { max-width: 1200px; }
.mono { font-family: var(--f-mono); letter-spacing: .5px; }
.state { min-height: 22px; font-size: 14.5px; }
.state.ok { color: var(--c-ok); font-weight: 500; }
.state.no { color: var(--c-bad); }
.t-narrow { max-width: 760px; width: 100%; margin: 0 auto; display: grid; gap: 10px; }

/* 방 정보 줄 */
.t-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 12px; background: var(--c-primary-l); border: 1px solid #b9dde8; border-radius: 12px; min-width: 0; }
.t-bar .btn { min-height: 38px; padding: 4px 10px; font-size: 14px; }
.t-room b { font-size: 18px; color: var(--c-primary-d); }
.t-name { font-weight: 500; }
.t-bar-sp { flex: 1 1 auto; }

/* 처음 설정 */
.t-setup, .t-login { max-width: 760px; width: 100%; margin: 0 auto; display: grid; gap: 12px; }
.t-steps { display: grid; gap: 8px; list-style: none; counter-reset: s; }
.t-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; counter-increment: s; }
.t-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary-l); color: var(--c-primary-d); font-family: var(--f-mono); font-weight: 700; font-size: 14px; }
.t-login-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.t-cred { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: #f8fbfc; }
.t-cred .k { color: var(--c-muted); font-size: 14px; }
.t-cred .v { font-size: 26px; color: var(--c-primary-d); overflow-wrap: anywhere; min-width: 0; }

/* 목록 */
.t-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.s-cards, .x-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.s-card, .x-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; align-items: center; align-content: center; text-decoration: none; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s; font: inherit; }
.s-card:hover, .x-card:hover { border-color: var(--c-primary); }
.x-card.on { border: 2px solid var(--c-primary); background: #f3fafc; }
.s-card .ic, .x-card .ic { grid-row: 1 / span 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--c-primary-l); font-size: 30px; transform: rotate(-4deg); }
.s-card .nm, .x-card .nm { font-weight: 700; font-size: 17.5px; color: var(--c-primary-d); }
.s-card .tags, .x-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.s-card .ds, .x-card .ds { grid-column: 2; font-size: 13.5px; color: var(--c-muted); }

/* 위저드 */
.w-stepper { margin-top: -4px; }
.w-body { display: grid; gap: 12px; }
.w-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-family: var(--f-title); font-weight: 400; font-size: 24px; }
.step-no { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: #fff; background: var(--c-accent); border-radius: 99px; padding: 2px 12px; transform: translateY(-3px); }
.w-sub { font-size: 16px; font-weight: 700; margin-top: 6px; padding-left: 10px; border-left: 4px solid var(--c-primary); }
.v-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.v-card { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; text-align: left; }
.v-card span { font-size: 13.5px; color: var(--c-muted); font-weight: 400; }
.d-list, .m-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.d-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; cursor: pointer; }
.d-item:hover { border-color: var(--c-primary); }
.d-item input { flex: none; width: 22px; height: 22px; accent-color: var(--c-primary); }
.d-item:has(input:checked) { border-color: var(--c-primary); background: #f3fafc; }
.d-ic { font-size: 22px; }
.g-row { max-width: 320px; }
.g-ctl { display: flex; gap: 8px; align-items: center; }
.g-ctl input { width: 90px; text-align: center; font-size: 20px; }
.w-sum { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; }
.w-sum dt { color: var(--c-muted); font-size: 14px; }
.w-sum dd { font-weight: 500; white-space: pre-wrap; min-width: 0; }
.w-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.w-nav > :last-child { margin-left: auto; }

/* 학생 링크 */
.link-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 12px; }
.lp-qr canvas { display: block; width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; }
.lp-main { display: grid; gap: 12px; min-width: 0; }
.lp-codes { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-code { display: grid; padding: 8px 18px; border: 2px solid var(--c-primary); border-radius: 12px; background: #f3fafc; }
.lp-code .k, .lp-link .k { font-size: 13px; color: var(--c-muted); }
.lp-code b { font-size: 40px; line-height: 1.15; color: var(--c-primary-d); letter-spacing: 3px; }
.lp-link { display: grid; min-width: 0; }
.lp-link a { font-size: 15px; overflow-wrap: anywhere; word-break: break-all; }

/* TV 크게 */
body.tv-open { overflow: hidden; }
.tv-overlay { position: fixed; inset: 0; z-index: 60; background: #fff; display: grid; grid-template-rows: auto 1fr; padding: 24px 32px; gap: 12px; overflow: auto; }
.tv-close { position: absolute; top: 16px; right: 16px; }
.tv-title { font-family: var(--f-title); font-weight: 400; font-size: clamp(28px, 4vw, 52px); color: var(--c-primary-d); padding-right: 140px; }
.tv-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 56px; }
.tv-qr canvas { display: block; image-rendering: pixelated; }
.tv-codes { display: grid; gap: 18px; }
.tv-codes .k { display: block; font-size: clamp(18px, 2vw, 26px); color: var(--c-muted); }
.tv-codes b { font-size: clamp(56px, 8vw, 120px); line-height: 1; color: var(--c-primary-d); letter-spacing: 6px; }
.tv-link { font-size: clamp(16px, 1.8vw, 24px); color: var(--c-muted); overflow-wrap: anywhere; }

/* 상세 */
.d-top { display: flex; }
.d-head { display: grid; gap: 12px; }
.d-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.d-title .ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--c-primary-l); font-size: 34px; transform: rotate(-4deg); }
.d-title > div { min-width: 0; }
.d-link summary { cursor: pointer; color: var(--c-primary-d); font-weight: 500; min-height: 36px; display: flex; align-items: center; }
.card-title .pull-st { font-weight: 400; }
.card-title .btn { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.g-count { margin-bottom: 10px; }
.g-count b { font-size: 18px; color: var(--c-primary-d); }
.g-tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.g-tile { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--c-line); background: #eef2f4; color: #8a9aa2; min-width: 0; }
.g-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.g-tile b { font-size: 18px; }
.g-tile .c { font-size: 14px; font-weight: 500; }
.g-tile .t { font-family: var(--f-mono); font-size: 12.5px; margin-left: auto; }
.g-tile.live { background: #fff; border-color: #b9dde8; color: var(--c-primary-d); }
.g-tile.on { background: var(--c-ok-l); border-color: #86efac; color: var(--c-ok); }
.g-tile.warn { border: 2px solid var(--c-accent); }
/* 학생별 진행 줄 */
.p-lines { list-style: none; display: grid; gap: 3px; }
.p-line { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .78); color: var(--c-text); font-size: 13.5px; }
.p-line .p-nm { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.p-line .p-st { color: var(--c-muted); min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.p-line.meas .p-st { color: #1d4ed8; font-weight: 500; }
.p-line.sub .p-st { color: var(--c-ok); font-weight: 500; }
.p-line.quiet { opacity: .72; }
.p-line.flat .p-st { color: var(--c-accent-d); font-weight: 700; }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; vertical-align: middle; }
.pdot.meas { background: #2563eb; animation: pblink 1.1s ease-in-out infinite; }
.pdot.sub { background: #16a34a; }
.pdot.idle { background: var(--c-primary); }
.pdot.quiet { background: #cbd5e1; }
@keyframes pblink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .pdot.meas { animation: none; } }
.g-legend { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.g-warns { list-style: none; display: grid; gap: 3px; }
.g-warns li { padding: 4px 8px; border-radius: 8px; background: var(--c-accent-l); color: var(--c-accent-d); font-size: 13px; font-weight: 500; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.g-warn-box { display: grid; gap: 3px; min-width: 0; }
.g-more summary { cursor: pointer; font-size: 13px; color: var(--c-accent-d); font-weight: 500; padding: 2px 4px; }
.g-more[open] summary { margin-bottom: 3px; }
.warn-sum { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--c-accent-l); border: 1px solid #fcd34d; color: var(--c-accent-d); font-weight: 700; word-break: keep-all; }
.table td.warn { background: #fef3c7; color: #92400e; font-weight: 700; }
/* 회차 취합 */
.tr-key, .ov-ch, select.ov-ch { width: auto; max-width: 100%; min-height: 36px; padding: 4px 10px; font-size: 14px; }
.tr-table { margin-bottom: 10px; }
.tr-table td.tr-cell { text-align: left; vertical-align: top; }
.tr-table thead th:not(.mk) { text-align: left; }
[data-view=import] > .badge { justify-self: start; }
.tr-table .tr-c { display: block; font-family: var(--f-body); color: var(--c-muted); font-size: 12.5px; }
.tr-table .tr-r { display: block; font-weight: 700; color: var(--c-primary-d); }
.tr-table td.tr-cell.warn .tr-r { color: #92400e; }
.tr-box { height: 340px; }
/* 설정 공유 */
.share-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 12px 14px; border: 2px dashed #b9dde8; border-radius: 12px; background: #f8fbfc; }
.sp-main { display: grid; gap: 8px; min-width: 0; }
.sp-row { display: flex; gap: 8px; min-width: 0; }
.sp-row input { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.sp-qr canvas { display: block; max-width: 200px; height: auto; image-rendering: pixelated; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }
.imp-banner { max-width: 760px; width: 100%; margin: 0 auto; }
.imp-sum { padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: #f8fbfc; }
.recent { list-style: none; display: grid; gap: 4px; margin-top: 6px; }
.recent li { padding: 4px 8px; border-radius: 8px; background: #f6fafb; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 10px; font-size: 13px; }
.ov-leg { display: inline-flex; align-items: center; gap: 6px; }
.ov-leg i { display: inline-block; width: 22px; height: 4px; border-radius: 2px; }
.ov-box { position: relative; width: 100%; height: 380px; min-width: 0; }
.ov-box canvas { display: block; border: 1px solid var(--c-line); border-radius: 10px; }
.a-table td, .q-table td { font-size: 14px; }
.a-table tfoot td { font-weight: 700; color: var(--c-primary-d); }
.q-table td { font-family: var(--f-body); text-align: left; white-space: normal; min-width: 120px; max-width: 360px; }
.q-table th { text-align: left; white-space: normal; min-width: 140px; font-size: 13.5px; }
.q-table td.long summary { cursor: pointer; color: var(--c-primary-d); }
.q-table td.long p { margin-top: 4px; white-space: pre-wrap; }

/* 발표 모드 */
body.presenting { overflow: hidden; }
body.presenting .topbar, body.presenting .legal-foot { display: none; }
.present { position: fixed; inset: 0; z-index: 50; background: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 20px 28px; }
.p-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.p-title { font-family: var(--f-title); font-weight: 400; font-size: clamp(26px, 3.2vw, 44px); color: var(--c-primary-d); line-height: 1.2; min-width: 0; }
.p-n { font-size: 20px; color: var(--c-muted); }
.p-exit { margin-left: auto; }
.p-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 20px; min-height: 0; }
.p-chart { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
.p-chart.two { grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr); }
.ov-legend.big { font-size: 17px; }
.ov-box.big { height: 100%; min-height: 260px; }
.p-avg { display: grid; gap: 12px; align-content: start; overflow: auto; }
.p-card { display: grid; gap: 2px; padding: 14px 18px; border: 2px solid var(--c-primary-l); border-radius: 14px; }
.p-card .k { font-size: 17px; color: var(--c-muted); }
.p-card .v { font-family: var(--f-mono); font-size: 44px; line-height: 1.1; color: var(--c-primary-d); }
.p-card .v small { font-family: var(--f-body); font-size: 20px; color: var(--c-muted); }
.p-card .d { font-size: 14px; color: var(--c-muted); }
.p-empty { font-size: 20px; color: var(--c-muted); }

.legal-foot { text-align: center; font-size: 13px; color: var(--c-muted); padding: 8px 16px 28px; display: grid; gap: 2px; }
.legal-foot a { color: var(--c-muted); }

/* 지능형 과학실 ON — 일련번호 목록 · 타일 전송 건수 */
.scion-box { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px dashed #b9dde8; border-radius: 12px; background: #f7fbfc; }
.scion-list { list-style: none; display: grid; gap: 6px; padding: 0; margin: 0; }
.scion-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; min-width: 0; }
.scion-row.off { grid-template-columns: minmax(0, 1fr); background: #f4f6f7; }
.scion-row .sr-k { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.scion-row .sr-v { font-size: 15px; font-weight: 700; color: var(--c-primary-d); background: var(--c-primary-l); padding: 3px 8px; border-radius: 6px; overflow-wrap: anywhere; word-break: break-all; }
.scion-row .btn { min-height: 38px; padding: 4px 12px; }
.scion-panel { margin-top: 12px; padding: 10px 12px; border: 1px solid #b9dde8; border-radius: 12px; background: #f7fbfc; display: grid; gap: 8px; }
.scion-panel > summary { cursor: pointer; font-weight: 700; color: var(--c-primary-d); }
.scion-panel[open] > summary { margin-bottom: 4px; }
.g-scion { font-size: 13px; font-weight: 500; color: var(--c-primary-d); margin: 0; }
.g-scion.bad { color: var(--c-bad); }

@media (max-width: 900px) {
  .p-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .p-avg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: 34vh; }
}
@media (max-width: 767px) {
  .t-login-grid { grid-template-columns: minmax(0, 1fr); }
  .t-cred { grid-template-columns: minmax(0, 1fr) auto; }
  .t-cred .k { grid-column: 1 / -1; }
  .link-panel { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .lp-main { justify-items: stretch; width: 100%; }
  .lp-code b { font-size: 30px; }
  .ov-box { height: 280px; }
  .w-sum { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .w-sum dd { margin-bottom: 8px; }
  .share-panel { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .sp-main { width: 100%; }
  .scion-row { grid-template-columns: minmax(0, 1fr) auto; }
  .scion-row .sr-k { grid-column: 1 / -1; }
  .tr-box { height: 260px; }
  .tv-overlay { padding: 16px; }
  .tv-title { padding-right: 0; padding-top: 44px; }
}

/* 현미경 사진 모아 보기 */
.ph-groups { display: grid; gap: 14px; }
.ph-group { display: grid; gap: 8px; }
.ph-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ph-card { margin: 0; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--c-line); border-radius: 12px; background: #fafcfd; min-width: 0; align-content: start; }
.ph-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #10232a; }
.ph-none { display: grid; place-items: center; color: #9fb6bf; font-size: 13px; }
.ph-card figcaption { display: grid; gap: 4px; font-size: 13.5px; min-width: 0; }
.ph-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.ph-vs > span { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; min-width: 0; }
.ph-vs .k { font-size: 12px; font-weight: 700; }
.ph-guess { background: var(--c-accent-l); color: #7c4a06; }
.ph-ai { background: var(--c-primary-l); color: var(--c-primary-d); }

.card-title select.ov-ch { width: auto; flex: 0 1 auto; }
/* 관찰 사진(photo 블록) · 관찰 기록표(record 블록) 모아 보기 — 2026-09-27 */
.ph-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-ms { font-family: var(--f-mono); color: var(--c-primary-d); font-size: 13px; overflow-wrap: anywhere; }
.rc-groups { display: grid; gap: 14px; }
.rc-group { display: grid; gap: 6px; min-width: 0; }
.rc-ttable td { font-family: var(--f-mono); }
.rc-ttable td.rc-comp { background: var(--c-accent-l); color: var(--c-accent-d); font-weight: 700; }
.rc-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; background: #10232a; display: block; }

/* 처음 설정 위 「처음이세요? 3분 안내 →」 (/guide/) */
.t-guide { font-size: 14.5px; font-weight: 500; margin-bottom: 4px; }
.t-guide a { text-decoration: none; background: var(--c-primary-l); color: var(--c-primary-d); padding: 3px 12px; border-radius: 99px; display: inline-block; }
.t-guide a:hover { background: #cde9f1; }

/* 위저드 1단계 — 실험 찾기 줄·학년·단원 묶음 (찾기 줄·묶음 제목 모양은 assets/lab.css 공용) */
.x-find { margin-top: 2px; }
.x-list { display: grid; gap: 20px; min-width: 0; }
.x-list .grp-title { font-size: 16px; }