/* 블록 엔진 화면 — assets/lab.css 변수를 쓴다 */
.exp { display: grid; gap: 16px; min-width: 0; }

.exp-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.exp-icon {
  flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px;
  background: var(--c-card); border: 1px solid var(--c-line); box-shadow: var(--shadow); font-size: 40px; transform: rotate(-4deg);
}
.exp-head-text { min-width: 0; }
.exp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

.step-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-family: var(--f-title); font-weight: 400; font-size: 26px; color: var(--c-text); margin-bottom: 12px; }
.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); }

.blocks { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.side-col, .main-col { display: contents; }
@media (min-width: 900px) {
  .blocks.layout-side { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
  .blocks.layout-side > .side-col, .blocks.layout-side > .main-col { display: grid; gap: 16px; min-width: 0; align-content: start; }
}

.exp-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.exp-nav [data-act=next] { margin-left: auto; }
.exp-nav-end { margin-left: auto; color: var(--c-muted); font-size: 14px; }

/* text */
.md { display: grid; gap: 10px; }
.md .md-h1 { font-family: var(--f-title); font-weight: 400; font-size: 22px; color: var(--c-primary-d); line-height: 1.3; }
.md .md-h2 { font-size: 16.5px; font-weight: 700; margin-top: 4px; }
.md .md-h3 { font-size: 15px; font-weight: 700; color: var(--c-muted); }
.md ul, .md ol { padding-left: 1.4em; display: grid; gap: 4px; }
.md li::marker { color: var(--c-primary); font-weight: 700; }
.md strong { color: var(--c-primary-d); }

/* image */
.fig { display: grid; gap: 8px; max-width: 760px; margin: 0 auto; width: 100%; }
.fig-img { background: #f8fbfc; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; min-height: 120px; }
.fig-img svg, .fig-img img { display: block; width: 100%; height: auto; }
.fig figcaption { font-size: 13.5px; color: var(--c-muted); text-align: center; }

/* checklist */
.checklist { list-style: none; display: grid; gap: 4px; }
.checklist label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.checklist label:hover { background: #f4f9fa; }
.checklist input { flex: none; width: 22px; height: 22px; accent-color: var(--c-primary); cursor: pointer; }
.checklist input:checked + span { color: var(--c-muted); text-decoration: line-through; text-decoration-color: rgba(14, 116, 144, .5); }
.checklist-foot { margin-top: 8px; display: flex; justify-content: flex-end; }

/* sensor */
.sensor { display: grid; gap: 12px; }
.drv-list { display: flex; flex-wrap: wrap; gap: 8px; }
.drv-list .drv { flex: 1 1 140px; justify-content: flex-start; }
.drv-ic { font-size: 20px; }
.sensor select { min-height: 44px; }
.sensor-btns .btn { flex: 1 1 auto; }
.manual-entry { display: flex; align-items: flex-end; gap: 8px; }
.manual-entry .field { flex: 1; }
.manual-entry input { font-size: 20px; }
.sensor-readout { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; background: #f6fafb; border: 1px solid var(--c-line); border-radius: 10px; }
.sensor-side { display: grid; gap: 4px; justify-items: end; text-align: right; }
.sensor-info { font-size: 13px; color: var(--c-muted); }
.num-sm { font-family: var(--f-mono); color: var(--c-text); }
.sensor-msg { min-height: 1.4em; font-size: 14px; color: var(--c-muted); }
.sensor-msg.err { color: var(--c-bad); }

/* chart */
.chart-box { position: relative; height: 320px; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: #fff; }
.chart-box canvas { position: absolute; inset: 0; display: block; }

/* marker */
.mark-btns .btn.idle { opacity: .6; }
.mark-list { list-style: none; display: grid; gap: 2px; margin-top: 8px; font-size: 14px; }
.mark-list li { display: flex; gap: 10px; }
.mk-t { font-family: var(--f-mono); color: var(--c-accent-d); min-width: 64px; }

/* table */
.data-table { max-height: 360px; }
.data-table th:nth-child(1), .data-table td:nth-child(1) { width: 7em; }
.data-table th:nth-child(2), .data-table td:nth-child(2) { width: 9em; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stat { flex: 1 1 110px; display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: #fafcfd; }
.stat .k { font-size: 13px; color: var(--c-muted); }
.stat .v { font-family: var(--f-mono); font-size: 20px; font-weight: 500; }
.stat .u { font-family: var(--f-body); font-size: 13px; color: var(--c-muted); font-weight: 400; }

/* predict */
.predict { display: grid; gap: 8px; }
.predict-box { position: relative; height: 340px; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: #fff; }
.predict-canvas { position: absolute; inset: 0; display: block; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.predict-canvas.locked { cursor: default; }
.predict-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* question */
.question { display: grid; gap: 10px; }
.q-prompt { font-weight: 700; font-size: 16.5px; }
.q-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.q-choice { justify-content: flex-start; }
.q-mark { font-family: var(--f-mono); color: var(--c-primary); }
.q-number { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.q-number input { font-size: 20px; }
.q-unit { color: var(--c-muted); white-space: nowrap; }
.q-hint summary { cursor: pointer; color: var(--c-primary-d); font-size: 14px; min-height: 32px; display: flex; align-items: center; }
.q-hint p { font-size: 14px; color: var(--c-muted); padding: 4px 0 0 4px; }
.q-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.q-feedback { border-left-color: var(--c-ok); background: #f0fdf4; color: #14532d; }

/* summary */
.summary { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sum-sec { min-width: 0; }
.sum-sec h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; padding-left: 10px; border-left: 4px solid var(--c-primary); }
.sum-graph { display: block; width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: 10px; }
.sum-answers { padding-left: 1.4em; display: grid; gap: 10px; }
.sum-q { font-weight: 500; }
.sum-a { margin-top: 2px; padding: 6px 10px; background: #f6fafb; border-radius: 8px; white-space: pre-wrap; }
.sum-a.empty { color: var(--c-muted); }

/* 교과서(출판사 변형) 고르기 */
.variant-badge { cursor: pointer; border: 1px solid #b9dde8; background: #fff; color: var(--c-primary-d); font-weight: 700; min-height: 26px; }
.variant-badge:hover { border-color: var(--c-primary); background: var(--c-primary-l); }
.variant-badge .vb-edit { font-weight: 400; color: var(--c-muted); }
.variant-badge.locked { cursor: default; }
.variant-badge.locked:hover { border-color: #b9dde8; background: #fff; }
.pick-lead { margin-bottom: 14px; color: var(--c-text); }
.variant-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); min-width: 0; }
.variant-card {
  display: grid; gap: 4px; align-content: start; text-align: left; cursor: pointer; font: inherit; color: inherit;
  min-height: 120px; transition: border-color .15s, box-shadow .15s, transform .06s; -webkit-tap-highlight-color: transparent;
}
.variant-card:hover { border-color: var(--c-primary); }
.variant-card:active { transform: translateY(1px); }
.variant-card:focus-visible { outline: 3px solid rgba(14, 116, 144, .35); outline-offset: 2px; }
.variant-card.on { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); background: #f7fcfd; }
.vc-pub { font-family: var(--f-title); font-weight: 400; font-size: 21px; color: var(--c-primary-d); line-height: 1.3; }
.vc-author { font-size: 14.5px; font-weight: 500; }
.vc-page { font-family: var(--f-mono); font-size: 14px; color: var(--c-accent-d); }
.vc-desc { font-size: 13.5px; color: var(--c-muted); margin-top: 4px; }
.vc-on { justify-self: start; margin-top: 6px; }
.pick-note { margin-top: 12px; }

/* 채널 색 점 */
.ch-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none; }

/* sensor: 안내·채널 연결·수동 입력 여러 칸·간격 타이머·여러 현재값 */
.sensor-guide { font-size: 14.5px; color: var(--c-text); }
.ch-map-grid { display: grid; gap: 6px; }
.ch-map-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 8px; font-size: 14.5px; }
.ch-map-row.live { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
.ch-map-row.live select { grid-column: 1 / -1; }
.ch-map-v { font-family: var(--f-mono); font-weight: 700; font-size: 15px; }
.ch-map-row.empty .ch-map-v { color: var(--c-accent-d); font-family: inherit; font-weight: 500; font-size: 13.5px; }
.ch-map-row.empty select { border-color: var(--c-accent); background: var(--c-accent-l); }
.ch-map-hint { display: block; }
.ch-map-btns { margin-top: 6px; }
/* sensor: 센서 여러 대 — 연결된 기기 목록·추가 연결 */
.dev-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--c-line, #dbe3e7); border-radius: 10px; background: #fff; font-size: 14.5px; }
.dev.gone { background: #fff1f2; border-color: #fecdd3; }
.dev-ic { font-size: 20px; }
.dev-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.dev-name { overflow-wrap: anywhere; }
.dev-chs { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--c-muted); }
.dev-v { font-family: var(--f-mono); font-weight: 700; color: var(--c-text); }
.dev-role { display: inline-flex; align-items: center; color: var(--c-text); font-weight: 500; }
.dev-gone { display: inline-flex; align-items: center; gap: 6px; }
.warn-badge { background: var(--c-bad-l); color: var(--c-bad); }
.need-more { margin: 4px 0 0; }
.dev-add { align-items: center; }
.dev-add .btn.need { animation: lab-pulse 1.6s ease-in-out infinite; }
.dev-kind-l { display: inline-flex; align-items: center; gap: 6px; }
.dev-kind-l select { max-width: 260px; }
.manual-entry.multi { flex-wrap: wrap; }
.manual-fields { flex: 1 1 200px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); min-width: 0; }
.manual-fields .field > span { display: flex; align-items: center; }
.manual-entry.multi > .btn { flex: 1 1 100%; }
.manual-timer {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px;
  padding: 10px 12px; border: 1px solid #fcd9a8; background: var(--c-accent-l); border-radius: 10px;
}
.manual-timer .mt-ic { font-size: 22px; grid-row: span 2; }
.manual-timer .mt-text { font-size: 14px; color: #7c4a06; }
.manual-timer .mt-num { font-family: var(--f-mono); font-weight: 700; font-size: 22px; color: var(--c-accent-d); margin-left: 4px; }
.manual-timer .mt-bar { display: block; height: 6px; border-radius: 99px; background: #fde7c3; overflow: hidden; }
.manual-timer .mt-fill { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width .25s linear; }
.manual-timer.due { border-color: var(--c-bad); background: #fff1f2; animation: lab-pulse 1s ease-in-out infinite; }
.manual-timer.due .mt-text, .manual-timer.due .mt-num { color: var(--c-bad); }
@keyframes lab-pulse { 50% { box-shadow: 0 0 0 4px rgba(185, 28, 28, .15); } }
.sensor-vals { display: flex; flex-wrap: wrap; gap: 8px 22px; min-width: 0; }
.sensor-val .hint { display: flex; align-items: center; }
.sensor-readout.multi .num { font-size: 34px; }

/* predict: 선 고르기 */
.line-toggles .line-btn { flex: 1 1 150px; }
.line-sw { display: inline-block; width: 22px; height: 0; border-top: 3px dashed; }
.line-n { font-family: var(--f-mono); font-size: 13px; color: var(--c-muted); font-weight: 400; }

/* analysis */
.analysis { display: grid; gap: 8px; }
.an-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); min-width: 0; }
.an-tile { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: #fafcfd; min-width: 0; }
.an-tile .k { font-size: 13.5px; color: var(--c-muted); font-weight: 500; }
.an-v { display: flex; align-items: baseline; gap: 4px; }
.an-v .v { font-family: var(--f-mono); font-weight: 500; font-size: 36px; line-height: 1.15; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: var(--c-text); }
.an-v .u { font-size: 15px; color: var(--c-muted); }
.an-tile .d { font-size: 13px; color: var(--c-muted); }
.an-tile[data-item=delta][data-sign="-"] .v { color: #b91c1c; }
.an-tile[data-item=delta][data-sign="+"] .v { color: #1d4ed8; }
.an-mix { grid-column: 1 / -1; background: #f7fcfd; border-color: #b9dde8; }
.an-mix-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.an-vs { font-size: 13.5px; color: var(--c-muted); }
.an-meas .v { color: var(--c-primary-d); }
.an-why { color: var(--c-text) !important; font-size: 14px !important; }
.an-tiles:has(> .an-more) > .an-tile { grid-column: 1 / -1; }
.an-more { grid-column: 1 / -1; border: 1px solid var(--c-line); border-radius: 12px; background: #fffdf7; padding: 0 14px; min-width: 0; }
.an-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--c-accent-d, #b45309); }
.an-more[open] > summary { border-bottom: 1px dashed var(--c-line); margin-bottom: 10px; }
.an-more-body { display: grid; gap: 10px; padding-bottom: 12px; min-width: 0; }
.tr-cond-note { margin: 0; }
.an-premise { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-left: 3px solid #b9dde8; background: #f7fcfd; border-radius: 0 8px 8px 0; }
.an-tile[data-item=slopeRatio] .v, .an-tile[data-item=specificHeat] .v { color: var(--c-primary-d); }
.sum-variant { font-size: 15px; font-weight: 500; }


/* sensor — 가상 센서 조절기 */
.sim-reading { margin: 0; font-size: 15px; font-weight: 500; color: var(--c-primary-d); background: #f0fbfd; border: 1px dashed #8ccfe0; }
.sim-controls { display: grid; gap: 10px; padding: 10px 12px; border: 1px dashed #b9dde8; border-radius: 10px; background: #f7fcfd; }
.sim-controls .simc > span { display: flex; justify-content: space-between; gap: 8px; }
.simc-v { font-family: var(--f-mono); color: var(--c-primary-d); font-weight: 500; }
.sim-controls input[type=range] { width: 100%; accent-color: var(--c-primary); min-height: 32px; }

/* trials — 반복 측정 */
.blk { min-width: 0; }
.trials { display: grid; gap: 12px; min-width: 0; }
.tr-table-wrap { min-width: 0; }
.tr-form { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); padding: 12px; border: 1px solid var(--c-line); border-radius: 10px; background: #fafcfd; }
.tr-cond-row { display: flex; align-items: center; gap: 8px; }
.tr-cond-row input { flex: 1 1 auto; min-width: 0; font-size: 20px; }
.tr-cond select { font-size: 16px; }
.tr-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-chip { min-height: 36px; padding: 4px 12px; font-family: var(--f-mono); }
.tr-active { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--c-accent); border-radius: 10px; background: var(--c-accent-l); }
.tr-active-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tr-view { display: grid; gap: 10px; min-width: 0; }
.tr-table-box { max-height: 340px; }
.tr-table td.tr-miss { color: var(--c-accent-d); font-family: var(--f-body); font-size: 13px; }
.tr-table .tr-del { min-height: 34px; padding: 2px 10px; }
.tr-plots { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tr-plots.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-fig { margin: 0; min-width: 0; }
.tr-plot { position: relative; height: 280px; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: #fff; }
.tr-plot canvas { position: absolute; inset: 0; display: block; }
.tr-input { display: grid; gap: 8px; }
.tr-input .tr-cond-row input { font-size: 22px; }
.tr-derived { font-weight: 700; color: var(--c-primary-d); }
.tr-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 14px; color: var(--c-muted); }
.tr-legend[hidden] { display: none; }
.tr-lg { display: inline-flex; align-items: center; gap: 6px; }
.tr-lg-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tr-practice-box { display: grid; gap: 6px; justify-items: start; }
.tr-practice { margin: 0; }

/* param — 학생이 고르는 매개변수(측정 방식) */
.param { display: grid; gap: 8px; min-width: 0; }
.param-pick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.param-opt { display: grid; gap: 4px; justify-items: start; align-content: start; text-align: left; white-space: normal; min-height: 64px; padding: 10px 14px; }
.param-opt.on { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); background: #f7fcfd; }
.po-label { font-weight: 700; font-size: 16.5px; color: var(--c-primary-d); }
.po-desc { font-size: 13.5px; color: var(--c-muted); font-weight: 400; }
.po-on { margin-top: 2px; }

/* scope — 파형·스펙트럼 */
.scope { display: grid; gap: 8px; min-width: 0; }
.scope-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.scope-scale { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-muted); }
.scope-scale select { min-height: 40px; padding: 4px 8px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; }
.scope-lab { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--c-muted); font-weight: 500; margin-top: 4px; }
.scope-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.scope-dot.w { background: #0e7490; }
.scope-dot.s { background: #e65100; }
.scope-box { position: relative; height: 200px; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: #fff; }
.scope-box canvas { position: absolute; inset: 0; display: block; }
.scope-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; min-height: 1.6em; }
.scope-readout b { font-size: 17px; }
.scope-gallery { display: grid; gap: 10px; min-width: 0; }
.snap-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.snap-card { margin: 0; display: grid; gap: 6px; padding: 10px; border: 1px solid var(--c-line); border-radius: 12px; background: #fafcfd; min-width: 0; }
.snap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.snap-head .btn { min-height: 34px; padding: 2px 10px; }
.snap-canvas { position: relative; height: 120px; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; background: #fff; }
.snap-canvas canvas { position: absolute; inset: 0; display: block; }

@media (max-width: 767px) {
  .exp-icon { width: 56px; height: 56px; font-size: 30px; border-radius: 14px; }
  .step-title { font-size: 22px; }
  .chart-box { height: 260px; }
  .tr-plot { height: 240px; }
  .scope-box { height: 170px; }
  .predict-box { height: 280px; }
  .an-v .v { font-size: 30px; }
  .vc-pub { font-size: 19px; }
  .variant-card { min-height: 0; }
  .exp-nav .btn { flex: 1 1 auto; }
  .exp-nav [data-act=reset] { order: 3; flex-basis: 100%; }
}

/* microscope — 현미경 촬영·갤러리·크기 재기·AI */
.microscope { display: grid; gap: 12px; min-width: 0; }
.mc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-tab { flex: 1 1 140px; }
.mc-srchint { margin-top: -2px; }
.mc-capture { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 900px) { .mc-capture { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.mc-vbox { position: relative; aspect-ratio: 4 / 3; background: #10232a; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.mc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.mc-vph { color: #9fb6bf; font-size: 14px; }
.mc-vbox.on .mc-vph { display: none; }
.mc-vbox::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .18s; }
.mc-vbox.flash::after { opacity: .7; transition: none; }
.mc-side { display: grid; gap: 10px; min-width: 0; align-content: start; }
.mc-meta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; min-width: 0; }
.mc-f { flex: 1 1 110px; min-width: 0; }
.mc-f.mc-spec { flex: 1 1 100%; }
.mc-x { padding-bottom: 10px; color: var(--c-muted); font-weight: 700; }
.mc-total { padding-bottom: 10px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-primary-d); white-space: nowrap; }
.mc-actions .btn { flex: 1 1 auto; }
.mc-shot { font-size: 17px; }
.mc-count { font-variant-numeric: tabular-nums; }
.mc-privacy { font-size: 12.5px; color: var(--c-muted); background: #f6fafb; border-radius: 8px; padding: 6px 10px; }
.mc-sub { font-size: 15.5px; margin-top: 2px; }
.microscope .state { min-height: 1.4em; font-size: 14px; color: var(--c-muted); }
.microscope .state.ok { color: var(--c-ok); }
.microscope .state.no { color: var(--c-bad); }
.mc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.mc-item { 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; }
.mc-open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.mc-thumb { aspect-ratio: 4 / 3; background: #10232a; display: grid; place-items: center; }
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-item figcaption { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }
.mc-guess { color: var(--c-accent-d); }
.mc-top { font-weight: 500; }
.mc-item-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-item-btns .btn { min-height: 38px; padding: 4px 10px; font-size: 14px; flex: 1 1 auto; }
.mc-viewer { display: grid; gap: 10px; padding: 12px; border: 2px solid var(--c-primary); border-radius: 14px; background: #fff; min-width: 0; scroll-margin-top: 70px; }
.mc-vhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-cbox { display: grid; justify-items: center; min-width: 0; }
.mc-canvas { display: block; border-radius: 10px; touch-action: none; cursor: crosshair; background: #10232a; }
.mc-modes .btn { flex: 1 1 auto; }
.mc-measure, .mc-aisec { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--c-line); }
.mc-calrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-inline { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-muted); }
.mc-inline input { width: 110px; }
.mc-ai-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--c-line); border-radius: 12px; background: #f8fbfc; min-width: 0; }
.mc-ai-card:empty { display: none; }
.mc-ai-card h5 { font-size: 14.5px; color: var(--c-primary-d); margin-top: 4px; }
.mc-cands { padding-left: 1.3em; display: grid; gap: 8px; }
.mc-cand-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mc-evi, .mc-next { padding-left: 1.2em; font-size: 14px; display: grid; gap: 2px; }
.mc-structs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 14px; }
.mc-structs dt { font-weight: 700; }
.mc-ai-foot { font-size: 13.5px; font-weight: 700; color: var(--c-accent-d); background: var(--c-accent-l); border-radius: 8px; padding: 6px 10px; }
.mc-report { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mc-ritem { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; border: 1px solid var(--c-line); border-radius: 10px; }
.mc-rthumb { aspect-ratio: 1; background: #10232a; border-radius: 8px; overflow: hidden; }
.mc-rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-ritem figcaption { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }
@media (max-width: 520px) { .mc-structs { grid-template-columns: minmax(0, 1fr); } .mc-structs dd { margin-bottom: 4px; } }

/* ---------- photo 블록 (관찰 사진 + 각도·길이 재기) · record 블록 (관찰 기록표) · 사진에서 잰 값 팝업 — 2026-09-27 ---------- */
.photo-block { display: grid; gap: 12px; min-width: 0; }
.pb-capture { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 900px) { .pb-capture { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.pb-vbox { position: relative; aspect-ratio: 4 / 3; background: #10232a; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.pb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.pb-vph { color: #9fb6bf; font-size: 14px; }
.pb-vbox.on .pb-vph { display: none; }
.pb-vbox::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .18s; }
.pb-vbox.flash::after { opacity: .7; transition: none; }
.pb-side { display: grid; gap: 10px; min-width: 0; align-content: start; }
.pb-actions .btn { flex: 1 1 auto; }
.pb-shot { font-size: 17px; }
.pb-count { font-variant-numeric: tabular-nums; }
.pb-privacy { font-size: 12.5px; color: var(--c-muted); background: #f6fafb; border-radius: 8px; padding: 6px 10px; }
.pb-sub { font-size: 15.5px; margin-top: 2px; }
.photo-block .state, .record .state { min-height: 1.4em; font-size: 14px; color: var(--c-muted); }
.photo-block .state.ok, .record .state.ok { color: var(--c-ok); }
.photo-block .state.no, .record .state.no { color: var(--c-bad); }
.pb-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pb-item { 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; }
.pb-open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.pb-thumb { aspect-ratio: 4 / 3; background: #10232a; display: grid; place-items: center; }
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-item figcaption { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }
.pb-mm { color: var(--c-primary-d); font-family: var(--f-mono); font-size: 13px; }
.pb-item-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-item-btns .btn { min-height: 38px; padding: 4px 10px; font-size: 14px; flex: 1 1 auto; }
.pb-viewer { display: grid; gap: 10px; padding: 12px; border: 2px solid var(--c-primary); border-radius: 14px; background: #fff; min-width: 0; scroll-margin-top: 70px; }
.pb-vhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pb-vhead b { min-width: 0; overflow-wrap: anywhere; }
.pb-cbox { display: grid; justify-items: center; min-width: 0; }
.pb-canvas { display: block; border-radius: 10px; touch-action: none; cursor: crosshair; background: #10232a; }
.pb-modes .btn { flex: 1 1 auto; }
.pb-modes .btn.on { border-color: var(--c-primary); background: var(--c-primary-l); color: var(--c-primary-d); font-weight: 700; }
.pb-measure { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--c-line); }
.pb-calrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pb-inline { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-muted); }
.pb-inline input { width: 110px; }
.pb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-tag { min-height: 36px; padding: 4px 12px; font-size: 14px; border-radius: 999px; }
.pb-tag.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.pb-ms { list-style: none; padding: 0; display: grid; gap: 6px; }
.pb-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border: 1px solid var(--c-line); border-radius: 10px; background: #fafcfd; }
.pb-mlabel { flex: 1 1 120px; min-width: 0; max-width: 220px; }
.pb-mv { font-family: var(--f-mono); font-size: 17px; color: var(--c-primary-d); }
.pb-mdel { min-height: 34px; padding: 2px 10px; font-size: 13.5px; margin-left: auto; }
.pb-report { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pb-ritem { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; border: 1px solid var(--c-line); border-radius: 10px; }
.pb-rthumb { aspect-ratio: 1; background: #10232a; border-radius: 8px; overflow: hidden; }
.pb-rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-ritem figcaption { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }

.tr-fromphoto { flex: none; min-height: 40px; padding: 4px 10px; font-size: 14px; white-space: nowrap; }
.pm-pop, .rc-pop { position: relative; z-index: 20; display: grid; gap: 8px; margin-top: 6px; padding: 10px; border: 2px solid var(--c-primary); border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(15, 40, 50, .16); min-width: 0; max-width: 100%; }
.pm-head, .rc-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-head .btn, .rc-pop-head .btn { min-height: 34px; padding: 2px 10px; }
.pm-list { list-style: none; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.pm-item { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 4px 10px; text-align: left; font-family: var(--f-mono); }
.pm-n { font-family: var(--f-body); color: var(--c-muted); font-size: 13px; }
.pm-cap { font-family: var(--f-body); width: 100%; }

.record { display: grid; gap: 10px; min-width: 0; }
.rc-refrow { display: grid; gap: 4px; }
.rc-reff { max-width: 260px; }
.rc-table-box { min-width: 0; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rc-table th, .rc-table td { border-bottom: 1px solid var(--c-line); padding: 6px 6px; text-align: left; vertical-align: middle; position: relative; }
.rc-table thead th { font-size: 13.5px; color: var(--c-muted); font-weight: 700; background: #f6fafb; }
.rc-table .rc-rowh { font-weight: 700; color: var(--c-primary-d); white-space: nowrap; }
.rc-table td .input { width: 100%; min-width: 0; }
.rc-num { display: flex; align-items: center; gap: 6px; }
.rc-num input { flex: 1 1 auto; min-width: 0; max-width: 140px; font-size: 18px; }
.rc-comp { background: var(--c-accent-l); }
.rc-cv { font-family: var(--f-mono); font-weight: 700; color: var(--c-accent-d); font-size: 17px; }
.rc-photo, .rc-colorcell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rc-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #10232a; display: block; }
.rc-pbtn, .rc-cbtn, .rc-pdel, .rc-del { min-height: 36px; padding: 2px 10px; font-size: 14px; }
.rc-color { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-family: var(--f-mono); }
.rc-sw { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--c-line); flex: none; }
.rc-ro { font-family: var(--f-mono); }
.rc-pop { position: absolute; right: 0; left: auto; top: 100%; width: min(340px, 86vw); }
.rc-pop-body { display: grid; gap: 8px; }
.rc-pgrid { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 240px; overflow-y: auto; }
.rc-pick { display: grid; gap: 2px; padding: 4px; border: 1px solid var(--c-line); border-radius: 8px; background: #fafcfd; cursor: pointer; font-size: 12px; min-width: 0; text-align: left; }
.rc-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: #10232a; display: block; }
.rc-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-cvbox { position: relative; aspect-ratio: 4 / 3; background: #10232a; border-radius: 10px; overflow: hidden; }
.rc-cvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-aim { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border: 2px dashed #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none; }
.rc-fig { margin: 0; min-width: 0; }
.rc-btns .btn { flex: 0 1 auto; }
/* 판정 칸 · 색 차 · 카메라 표시 */
.rc-judge { display: grid; gap: 4px; min-width: 0; }
.rc-judge .input { font-size: 15px; }
.rc-why { font-size: 14px !important; }
.rc-judge-ro b { color: var(--c-primary-d); }
.rc-diff { flex: 1 1 100%; font-size: 12.5px; color: var(--c-muted); font-family: var(--f-mono); }
.rc-cam { font-size: 12px; }
.rc-namerow { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-namerow .input { flex: 1 1 160px; min-width: 0; }
/* 시간 경과 타이머 */
.rc-timerrow { display: grid; gap: 8px; }
.rc-tbtns .btn { flex: 0 1 auto; }
.rc-table th.rc-due, .rc-table td.rc-due { background: #fff1f2; box-shadow: inset 0 0 0 2px var(--c-bad); }
/* 입력 열이 많은 표: 넓은 화면에서도 행마다 카드(칸을 격자로) — 가로 스크롤 없음 */
.record.rc-cards .rc-table:not(.rc-compare), .record.rc-cards .rc-table:not(.rc-compare) tbody { display: block; width: 100%; }
.record.rc-cards .rc-table:not(.rc-compare) thead { display: none; }
.record.rc-cards .rc-table:not(.rc-compare) tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; border: 1px solid var(--c-line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
.record.rc-cards .rc-table:not(.rc-compare) th.rc-rowh { grid-column: 1 / -1; border: 0; padding: 0 0 4px; font-size: 17px; }
.record.rc-cards .rc-table:not(.rc-compare) td { border: 0; padding: 4px 0; display: grid; gap: 4px; align-content: start; min-width: 0; }
.record.rc-cards .rc-table:not(.rc-compare) td::before { content: attr(data-label); font-size: 13.5px; color: var(--c-muted); font-weight: 700; }
.record.rc-cards .rc-table:not(.rc-compare) td.rc-act { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.record.rc-cards .rc-table:not(.rc-compare) td.rc-act::before { content: none; }
/* 판정 요약 · 예측과 나란히 */
.rc-summary:empty { display: none; }
.rc-precision:empty { display: none; }
.rc-precision { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; }
.rc-precision .rc-sum-list li { font-family: inherit; }
.rc-practice { display: grid; gap: 6px; justify-items: start; }
.rc-practice-out { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #f7fcfd; border: 1px dashed #b9dde8; justify-self: stretch; min-width: 0; }
.rc-practice-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }
.rc-practice-list li { word-break: keep-all; overflow-wrap: anywhere; }
.an-rise { grid-column: 1 / -1; }
.an-rank { margin: 4px 0 2px; padding-left: 22px; display: grid; gap: 4px; font-size: 16px; }
.an-rank li { word-break: keep-all; overflow-wrap: anywhere; }
.an-rank li b { font-weight: 700; }
.an-rank li.an-miss { color: var(--c-muted); }
.rc-summary { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--c-primary-l, #ecfeff); }
.rc-sum-list { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: 16px; }
.rc-sum-list li { word-break: keep-all; overflow-wrap: anywhere; }
.rc-cmp { display: grid; gap: 2px; font-size: 14.5px; }
.rc-cmp-tag { justify-self: start; font-size: 12px; }
.rc-more > summary { cursor: pointer; font-weight: 700; color: var(--c-primary-d); padding: 4px 0; }
.rc-more[open] > summary { margin-bottom: 6px; }
/* 좁은 화면: 행마다 카드(가로 스크롤 없음) */
@media (max-width: 640px) {
  .rc-table, .rc-table tbody, .rc-table tr, .rc-table th, .rc-table td { display: block; width: 100%; }
  .rc-table thead { display: none; }
  .rc-table tr { border: 1px solid var(--c-line); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; background: #fff; }
  .rc-table th.rc-rowh { border: 0; padding: 0 0 6px; font-size: 17px; }
  .rc-table td { border: 0; padding: 4px 0; display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); align-items: center; gap: 8px; }
  .rc-table td::before { content: attr(data-label); font-size: 13.5px; color: var(--c-muted); font-weight: 700; }
  .rc-table td.rc-act { display: flex; justify-content: flex-end; }
  .rc-table td.rc-act::before { content: none; }
  .rc-table td.rc-comp { background: var(--c-accent-l); border-radius: 8px; padding: 4px 8px; }
  .rc-num input { max-width: none; }
  .rc-pop { width: 100%; }
}