/*
 * 교사 Web 고유 스타일 (W5, docs/45 §3.4 T-01~T-05). fonts.css → tokens.css → components.css 다음에 읽는다.
 * - 뼈대(사이드바·상단바·본문·토스트·드로어)는 packages/web/common/shell.js + components.css 가 그린다. 여기는 교사 화면 안쪽만.
 * - 색·간격·글자 크기는 tokens.css 변수만 쓴다(색 코드 직접 사용 금지).
 * - 버튼 위계: 기본 .s2p-btn(외곽선 보조), 화면당 하나만 .s2p-btn--primary. app.js 의 el("button") 이 .s2p-btn 을 붙인다.
 * - 모든 규칙은 #views(본문) 아래로 한정해 shell 의 사이드바·상단바와 겹치지 않는다.
 */

/* ===== 본문 기본 ===== */
#views { font-size: var(--s2p-text-body); line-height: var(--s2p-leading-body); }
#views :where(h2, h3, h4, h5, p, ul, ol, figure, fieldset) { margin: 0; }
#views h2 { font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); line-height: var(--s2p-leading-tight); margin: var(--s2p-space-6) 0 var(--s2p-space-3); }
#views .card > h2:first-child, #views .card h2:first-child { margin-top: 0; }
#views h3 { font-size: var(--s2p-text-body-lg); font-weight: var(--s2p-weight-bold); margin: var(--s2p-space-4) 0 var(--s2p-space-2); }
#views h5 { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); font-weight: var(--s2p-weight-semibold); margin: var(--s2p-space-4) 0 var(--s2p-space-2); }
#views p + p { margin-top: var(--s2p-space-2); }
#views a:where(:not(.s2p-btn, .s2p-tab)) { color: var(--s2p-color-link); } /* 버튼·탭 링크는 자기 글자색(특이성 그대로) */
#views a:focus-visible, #views :where(button, input, select, textarea, summary):focus-visible {
  outline: var(--s2p-focus-ring-width) solid var(--s2p-focus-ring-color);
  outline-offset: var(--s2p-focus-ring-offset);
}
#views > section > * + * { margin-top: var(--s2p-space-4); }
#views > section > h2 { margin-top: var(--s2p-space-8); }
#views > section > .t-tabs + * { margin-top: 0; }

/* 화면 설명(상단바 제목 아래 한 줄) */
#views .sub { color: var(--s2p-color-text-muted); font-size: var(--s2p-text-body); max-width: 72ch; }
#views .page-actions { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); align-items: center; }
#views .t-back { font-size: var(--s2p-text-body); }

/* ===== 입력 (components .s2p-input 과 같은 모양, 앱이 만드는 요소에 클래스 없이 적용) ===== */
#views label { display: block; font-weight: var(--s2p-weight-semibold); font-size: var(--s2p-text-body); margin: var(--s2p-space-3) 0 var(--s2p-space-1); }
#views :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  display: block; width: 100%;
  min-height: var(--s2p-control-height);
  padding: var(--s2p-space-2) var(--s2p-space-3);
  border: 1px solid var(--s2p-color-border-input);
  border-radius: var(--s2p-radius-sm);
  background: var(--s2p-color-surface);
  color: var(--s2p-color-text);
  font: inherit; font-size: var(--s2p-text-body-lg);
  line-height: 1.4;
}
#views textarea { min-height: 96px; resize: vertical; }
#views textarea.tall { min-height: 260px; }
#views textarea.short { min-height: 72px; }
#views :where(input, select, textarea):disabled { background: var(--s2p-color-surface-muted); color: var(--s2p-color-text-muted); cursor: not-allowed; }
#views input::placeholder, #views textarea::placeholder { color: var(--s2p-color-text-subtle); }
#views :where(input[type=checkbox], input[type=radio]) { width: 18px; height: 18px; accent-color: var(--s2p-color-primary); flex-shrink: 0; }
#views .hint, #views .meta { color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption); margin-top: var(--s2p-space-1); }
#views .check-line, #views .radios label, #views .checklist label {
  display: flex; gap: var(--s2p-space-2); align-items: flex-start;
  font-weight: var(--s2p-weight-regular); margin: var(--s2p-space-2) 0;
}
#views .check-line input, #views .radios input { margin-top: 2px; }
#views .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s2p-space-4); }
@media (max-width: 520px) { #views .two { grid-template-columns: minmax(0, 1fr); } }

/* ===== 버튼 (shell 밖 앱 버튼은 모두 .s2p-btn 을 단다; 링크 버튼만 여기) ===== */
#views .row { display: flex; gap: var(--s2p-space-2); flex-wrap: wrap; align-items: center; margin-top: var(--s2p-space-4); }
#views .linkbtn {
  background: none; border: 0; padding: 0; min-height: 0;
  color: var(--s2p-color-link); font: inherit; text-decoration: underline; cursor: pointer;
}
#views a.s2p-btn { color: var(--s2p-color-text); }
#views a.s2p-btn--primary { color: var(--s2p-color-on-primary); }

/* ===== 카드·그리드 ===== */
#views .card {
  background: var(--s2p-color-surface);
  border: 1px solid var(--s2p-color-border-subtle);
  border-radius: var(--s2p-radius);
  box-shadow: var(--s2p-shadow-sm);
  padding: var(--s2p-space-5);
  min-width: 0;
}
#views .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s2p-space-4); }
#views .grid > .card h2 { font-size: var(--s2p-text-body-lg); margin: 0 0 var(--s2p-space-2); }
#views .card + .card { margin-top: var(--s2p-space-4); }
#views .grid > .card + .card, #views .dash-grid > .card + .card, #views .rk-boards > .card + .card { margin-top: 0; }

/* ===== 상태 메시지 (.msg + error|ok|info|warn) = callout 모양. app.js show() 가 role 을 건다 ===== */
#views .msg {
  padding: var(--s2p-space-3) var(--s2p-space-4);
  border-left: 4px solid currentColor;
  border-radius: var(--s2p-radius-sm);
  font-size: var(--s2p-text-body);
  background: var(--s2p-color-neutral-light); color: var(--s2p-color-neutral-text);
  overflow-wrap: anywhere;
}
#views .msg.error { background: var(--s2p-color-danger-light); color: var(--s2p-color-danger-text); }
#views .msg.ok { background: var(--s2p-color-success-light); color: var(--s2p-color-success-strong); }
#views .msg.info { background: var(--s2p-color-info-light); color: var(--s2p-color-info-text); }
#views .msg.warn { background: var(--s2p-color-warning-light); color: var(--s2p-color-warning-text); }
#views .msg a { color: inherit; font-weight: var(--s2p-weight-semibold); }
#views .msg .hint { color: inherit; opacity: 0.9; }
#views .card .msg { margin-top: var(--s2p-space-3); }

/* ===== 배지(옛 .badge, 지금은 app.js chip() 이 .s2p-badge 를 만든다) ===== */
#views .chips, #views .queue-badges { display: flex; gap: var(--s2p-space-2); flex-wrap: wrap; margin: var(--s2p-space-2) 0; }

/* ===== 도움말 접기: 공통 .s2p-help(components.css). 아래는 교사 화면의 용어 상자만 ===== */
#views .terms li + li { margin-top: var(--s2p-space-1); }
#views .terms { background: var(--s2p-color-surface-muted); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-3) var(--s2p-space-4) var(--s2p-space-3) var(--s2p-space-8); }

/* ===== 탭(같은 메뉴 안 화면 이동: 활동·내 문항)은 공통 nav.s2p-tabs > a.s2p-tab[aria-current="page"], 목록 거르기 버튼은 공통 .s2p-chips > .s2p-chip[aria-pressed] ===== */

/* ===== 로그인·가입·비밀번호 찾기·공개 페이지(사이드바 없는 맨 뼈대) ===== */
/* TODO design-system(남은 것): 맨 뼈대 가운데 인증 카드(브랜드 + 카드 + 아래 전환 링크)는 부모·관리자 로그인도 같은 모양이어야 한다. */
#views .t-auth { max-width: 440px; margin: var(--s2p-space-8) auto 0; }
#views .t-auth__brand { display: flex; align-items: center; justify-content: center; gap: var(--s2p-space-2); font-size: var(--s2p-text-body-lg); font-weight: var(--s2p-weight-bold); color: var(--s2p-color-text); }
#views .t-auth__brand .s2p-icon { color: var(--s2p-color-primary); }
#views .t-auth .card { padding: var(--s2p-space-6); }
#views .t-auth h1, #views .t-bare-title { margin: 0 0 var(--s2p-space-2); font-size: var(--s2p-text-title); font-weight: var(--s2p-weight-bold); line-height: var(--s2p-leading-tight); }
#views .t-auth form > .s2p-btn--block { margin-top: var(--s2p-space-5); }
#views .t-auth__aside { margin-top: var(--s2p-space-2); text-align: right; font-size: var(--s2p-text-body); }
#views .t-auth__switch { margin-top: var(--s2p-space-4); text-align: center; font-size: var(--s2p-text-body); color: var(--s2p-color-text-muted); }
#views .t-auth__switch + .t-auth__switch { margin-top: var(--s2p-space-2); }
/* 공개 페이지 제목은 사이드바가 있을 때(로그인 상태) 상단바 제목과 겹치므로 숨긴다 */
.s2p-shell:not(.s2p-shell--bare) #views .t-bare-title { display: none; }
.s2p-shell--bare #views .t-public { max-width: 720px; margin: var(--s2p-space-8) auto 0; }

/* ===== 프로필: 진행 단계 ===== */
#views .t-onboard { padding: var(--s2p-space-4) var(--s2p-space-5); }
#views .t-onboard .s2p-steps { margin-bottom: var(--s2p-space-2); }
#views .t-onboard__next { font-size: var(--s2p-text-body); color: var(--s2p-color-text-muted); }
#views .vf-box { border-top: 1px solid var(--s2p-color-border-subtle); margin-top: var(--s2p-space-5); padding-top: var(--s2p-space-4); }
#views .vf-picked { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-3) var(--s2p-space-4); margin: var(--s2p-space-2) 0; background: var(--s2p-color-surface-muted); }
#views .school-list { list-style: none; padding: 0; margin: var(--s2p-space-2) 0; border: 1px solid var(--s2p-color-border); border-radius: var(--s2p-radius-sm); overflow: hidden; background: var(--s2p-color-surface); }
#views .school-list li + li { border-top: 1px solid var(--s2p-color-border-subtle); }
#views .school-list .s2p-btn.school-opt { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; white-space: normal; padding: var(--s2p-space-2) var(--s2p-space-3); font-weight: var(--s2p-weight-regular); }
#views .school-opt:hover { background: var(--s2p-color-primary-light); }
#views .exp-row { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); align-items: center; padding: var(--s2p-space-2) 0; border-top: 1px solid var(--s2p-color-border-subtle); }
#views .exp-row:first-child { border-top: 0; }

/* ===== 대시보드 ===== */
#views .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s2p-space-4); }
#views .dash-grid .card { display: flex; flex-direction: column; border-top: 4px solid var(--s2p-color-primary); }
#views .dash-grid .card h2 { margin: 0 0 var(--s2p-space-2); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-text-muted); }
#views .dash-grid .card > div { display: flex; flex-direction: column; flex: 1; }
#views .dash-actions { display: flex; gap: var(--s2p-space-2); flex-wrap: wrap; }
#views .stat-num { font-size: var(--s2p-text-title-lg); font-weight: var(--s2p-weight-bold); line-height: var(--s2p-leading-tight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#views .stat-lbl { color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); }
#views .dash-sub { color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption); margin-top: var(--s2p-space-1); overflow-wrap: anywhere; }
#views .dash-kv { display: flex; justify-content: space-between; gap: var(--s2p-space-2); font-size: var(--s2p-text-body); padding: var(--s2p-space-1) 0; border-top: 1px solid var(--s2p-color-border-subtle); }
#views .dash-kv:first-of-type { margin-top: var(--s2p-space-2); }
#views .dash-links { display: flex; gap: var(--s2p-space-1) var(--s2p-space-4); flex-wrap: wrap; margin-top: auto; padding-top: var(--s2p-space-3); font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-semibold); }

#views .rep, #views .pledge-row { border-top: 1px solid var(--s2p-color-border-subtle); padding: var(--s2p-space-2) 0; font-size: var(--s2p-text-body); }

/* ===== 검수 ===== */
#views .queue-filter { max-width: 260px; }
#views .queue-stem { margin: var(--s2p-space-2) 0; overflow-wrap: anywhere; }
#views .choice {
  display: flex; gap: var(--s2p-space-3); align-items: flex-start;
  border: 1px solid var(--s2p-color-border); border-radius: var(--s2p-radius-sm);
  padding: var(--s2p-space-3) var(--s2p-space-4); margin: var(--s2p-space-2) 0;
  background: var(--s2p-color-surface); font-weight: var(--s2p-weight-regular);
}
#views .choice.pick { border-color: var(--s2p-color-primary); background: var(--s2p-color-primary-light); }
#views .choice.correct { border-color: var(--s2p-color-success); background: var(--s2p-color-success-light); }
#views .choice.wrong { border-color: var(--s2p-color-danger); background: var(--s2p-color-danger-light); }
#views .choice input { margin-top: 3px; }
#views .choice .no { font-weight: var(--s2p-weight-bold); }
#views .choice .body { flex: 1; min-width: 0; }
#views .correct-mark { color: var(--s2p-color-success-text); font-weight: var(--s2p-weight-bold); font-size: var(--s2p-text-caption); margin-left: var(--s2p-space-2); }
#views mark.ev { background: var(--s2p-color-warning-light); color: inherit; border-radius: 3px; padding: 0 1px; }

/* BLOCKS_V1 문항 본문 */
#views .block-box { border: 1px solid var(--s2p-color-border); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-3); margin: var(--s2p-space-2) 0; background: var(--s2p-color-surface-muted); }
#views .block-box-label { font-weight: var(--s2p-weight-bold); font-size: var(--s2p-text-caption); margin-bottom: var(--s2p-space-1); }
#views .block-list { list-style: none; padding: 0; margin: var(--s2p-space-2) 0; }
#views .block-figure { margin: var(--s2p-space-2) 0; }
#views .block-figure img, #views .block-math img { max-width: 100%; }
#views .block-blank { border-bottom: 2px solid var(--s2p-color-text); display: inline-block; min-width: 3em; }
#views .mark-bold { font-weight: var(--s2p-weight-bold); }
#views .mark-underline { text-decoration: underline; }
#views .mark-italic { font-style: italic; }
#views table:not(.s2p-table) { border-collapse: collapse; margin: var(--s2p-space-2) 0; max-width: 100%; }
#views table:not(.s2p-table) :where(th, td) { border: 1px solid var(--s2p-color-border); padding: var(--s2p-space-1) var(--s2p-space-2); }
#views .s2p-table-wrap { margin-top: var(--s2p-space-2); }

/* ===== 내 문항 목록 ===== */
#views .mq-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s2p-space-2); }
@media (max-width: 700px) { #views .mq-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #views .mq-filters input { grid-column: 1 / -1; } }
#views .mq-list { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius); background: var(--s2p-color-surface); overflow: hidden; box-shadow: var(--s2p-shadow-sm); }
#views .mq-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2p-space-1) var(--s2p-space-3); padding: var(--s2p-space-3) var(--s2p-space-4); color: inherit; text-decoration: none; }
#views .mq-row + .mq-row { border-top: 1px solid var(--s2p-color-border-subtle); }
#views a.mq-row:hover { background: var(--s2p-color-surface-muted); }
#views a.mq-row:focus-visible { outline-offset: -3px; }
#views .mq-kind { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); white-space: nowrap; }
#views .mq-pv { flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#views .mq-nums, #views .mq-date { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); white-space: nowrap; }
#views .pager { display: flex; gap: var(--s2p-space-3); align-items: center; justify-content: center; }

/* 순위 */
#views .rk-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--s2p-space-4); align-items: start; }
#views .rk-row { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: var(--s2p-space-2); align-items: center; padding: var(--s2p-space-1) var(--s2p-space-2); border-radius: var(--s2p-radius-sm); font-size: var(--s2p-text-body); }
#views .rk-row .rk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#views .rk-row .rk-rank { color: var(--s2p-color-text-muted); font-weight: var(--s2p-weight-bold); }
#views .rk-row.me { background: var(--s2p-color-primary-light); font-weight: var(--s2p-weight-bold); }
#views .rk-mine { margin-top: var(--s2p-space-3); padding-top: var(--s2p-space-2); border-top: 1px solid var(--s2p-color-border-subtle); font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-semibold); }

/* 선물 이용권 */
#views .gift-stats { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
#views .gift-pass.is-new { border-color: var(--s2p-color-primary); background: var(--s2p-color-primary-light); }
#views .gift-code { font-size: var(--s2p-text-title); font-weight: var(--s2p-weight-bold); margin: var(--s2p-space-1) 0; }
#views .gift-link { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); }
#views .gift-memo { display: flex; gap: var(--s2p-space-2); flex-wrap: wrap; align-items: center; margin-top: var(--s2p-space-3); }
#views .gift-memo input { flex: 1; min-width: 180px; width: auto; }
#views .mono { font-family: var(--s2p-font-mono); letter-spacing: 0.06em; word-break: break-all; }

/* 학습지 범위 */
#views .scope-box { border: 1px solid var(--s2p-color-border); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-4) var(--s2p-space-3); margin-top: var(--s2p-space-4); }
#views .scope-box legend { font-weight: var(--s2p-weight-semibold); font-size: var(--s2p-text-body); padding: 0 var(--s2p-space-1); }

/* ===== 문항·지문 작성(2열) ===== */
#views .compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2p-space-4); }
@media (min-width: 1100px) {
  #views .compose { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #views .compose .pane-preview { position: sticky; top: calc(var(--s2p-topbar-height) + var(--s2p-space-4)); align-self: start; max-height: calc(100vh - var(--s2p-topbar-height) - var(--s2p-space-8)); overflow: auto; }
}
#views .pane-form > * + *, #views .pane-preview > * + * { margin-top: var(--s2p-space-4); }
#views .choice-edit { display: flex; gap: var(--s2p-space-2); align-items: center; margin: var(--s2p-space-2) 0; }
#views .choice-edit input[type=text] { flex: 1; }
/* DEC-173: a choice is a rich field (box + [수식] bar), so the radio and [삭제] line up with its first line */
#views #cqChoices .choice-edit { align-items: flex-start; }
#views #cqChoices .choice-edit > .qc-richbox { flex: 1; min-width: 0; }
#views #cqChoices .choice-edit > input[type=radio] { margin-top: calc((var(--s2p-control-height) - 18px) / 2); }
#views .rat-row { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); margin: var(--s2p-space-2) 0; background: var(--s2p-color-surface-muted); }
#views .credit { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); margin-top: var(--s2p-space-2); }
#views .credit .vt { color: var(--s2p-color-success-text); font-weight: var(--s2p-weight-bold); margin-left: var(--s2p-space-2); }
#views .qcard .pv { color: var(--s2p-color-text-muted); font-size: var(--s2p-text-body); margin: var(--s2p-space-1) 0; }

/* ===== DEC-162 문항 작성: 개정 자동 안내·작성 기본값·레이아웃 견본(모양은 /web/question-composer/composer.css) ===== */
#views .cq-hint { margin: 2px 0 0; font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); overflow-wrap: anywhere; }
#views .cq-hint[data-state="error"] { color: var(--s2p-color-danger-text); font-weight: var(--s2p-weight-semibold); }
#views .cq-hint[data-state="success"] { color: var(--s2p-color-success-text); font-weight: var(--s2p-weight-semibold); }
#views .cq-hint[data-state="loading"] { color: var(--s2p-color-info-text); }
#views .cq-defaults { margin: var(--s2p-space-4) 0 0; padding: var(--s2p-space-2) var(--s2p-space-3); border: 1px dashed var(--s2p-color-border); border-radius: var(--s2p-radius-sm); }
#views .cq-defaults .row { margin-top: 0; }
#views .cq-title { margin-top: 0; }
#views .cq-layout, #views .cq-parts { min-width: 0; }
/* 위 "#views label / p / h3 …" 규칙은 공용 composer.css 의 한 단계 약한 규칙을 이기므로, 공용 모듈 요소만 원래 모양으로 되돌린다. */
#views .qc-layout { display: flex; margin: 0; font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-regular); }
#views .qc-label { margin: 0; font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); }
#views .qc-check { display: inline-flex; margin: var(--s2p-space-1) 0; font-weight: var(--s2p-weight-regular); }
#views input.qc-range { min-height: 0; padding: 0; border: 0; background: none; }
#views .qc-note { margin: var(--s2p-space-1) 0 var(--s2p-space-2); }
#views .qc-section-title { margin: var(--s2p-space-4) 0 var(--s2p-space-1); }
#views .qc-msg { margin-top: var(--s2p-space-2); }
#views .qc-figslot__title { margin: 0 0 var(--s2p-space-1); }
#views .qc-figslot__warnings { margin: var(--s2p-space-2) 0 0; }
#views .qc-grid td { border: 0; padding: 2px; }
#views .qc-grid { margin: var(--s2p-space-2) 0; }
#views .qc-h { margin: var(--s2p-space-3) 0 var(--s2p-space-1); }
#views .qc-p { margin: var(--s2p-space-2) 0; }
#views .qc-box .qc-p { margin: var(--s2p-space-1) 0; }
#views .qc-choice__body .qc-p:first-child { margin-top: 0; }
#views .qc-fig { margin: var(--s2p-space-3) 0; }
#views .qc-choice__body .qc-fig { margin: 0 0 var(--s2p-space-1); }
#views .qc-list { margin: var(--s2p-space-1) 0; }
#views .qc-table { margin: var(--s2p-space-3) 0; }
#views .qc-rationale { margin: var(--s2p-space-1) 0; }

/* ===== 계정 ===== */
#views .t-secret { font-family: var(--s2p-font-mono); font-size: var(--s2p-text-body-lg); letter-spacing: 0.08em; word-break: break-all; padding: var(--s2p-space-3); background: var(--s2p-color-surface-muted); border-radius: var(--s2p-radius-sm); }
#views .t-codes { columns: 2; font-family: var(--s2p-font-mono); padding-left: var(--s2p-space-5); }

/* ===== 개발 상자(?dev=1) ===== */
#views .dev { background: var(--s2p-color-warning-light); border: 1px dashed var(--s2p-color-warning); padding: var(--s2p-space-3); border-radius: var(--s2p-radius-sm); }
#views .dev pre { white-space: pre-wrap; font-size: var(--s2p-text-caption-sm); max-height: 200px; overflow: auto; margin: var(--s2p-space-2) 0 0; }

/* ===== 확인서·학습지(A4 종이) ===== */
#views .sheet { background: var(--s2p-color-surface); border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius); padding: var(--s2p-space-7) var(--s2p-space-8); margin: 0 auto; max-width: 794px; box-shadow: var(--s2p-shadow-sm); color: var(--s2p-color-text); }
#views .sheet + .sheet { margin-top: var(--s2p-space-5); }
#views .sheet h1 { font-size: var(--s2p-text-title); margin: 0 0 2px; }
#views .cert-frame { border: 3px double var(--s2p-color-neutral-text); padding: var(--s2p-space-6) var(--s2p-space-7); text-align: center; }
#views .cert-brand { letter-spacing: 0.25em; color: var(--s2p-color-text-muted); font-weight: var(--s2p-weight-bold); }
#views .cert-title { font-size: var(--s2p-text-title-lg); margin: var(--s2p-space-2) 0 var(--s2p-space-1); }
#views .cert-no { color: var(--s2p-color-text-muted); }
#views .cert-name { font-size: var(--s2p-text-title-sm); margin: var(--s2p-space-4) 0 var(--s2p-space-2); }
#views .cert-name strong { border-bottom: 1px solid var(--s2p-color-text); padding: 0 var(--s2p-space-4); }
#views .cert-name-note { font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-muted); margin: 0 0 var(--s2p-space-2); }
#views .cert-lead { margin: var(--s2p-space-2) 0 var(--s2p-space-4); }
#views .cert-facts { width: 100%; text-align: left; margin: var(--s2p-space-2) 0; }
#views .cert-facts th { width: 44%; background: var(--s2p-color-surface-muted); font-weight: var(--s2p-weight-semibold); text-align: left; }
#views .cert-sub { font-weight: var(--s2p-weight-bold); text-align: left; margin: var(--s2p-space-4) 0 var(--s2p-space-1); }
#views .cert-issued { margin-top: var(--s2p-space-4); text-align: right; }
#views .cert-verify { margin-top: var(--s2p-space-4); font-size: var(--s2p-text-body); text-align: left; border-top: 1px solid var(--s2p-color-border); padding-top: var(--s2p-space-3); }
#views .cert-note { margin-top: var(--s2p-space-3); font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-muted); text-align: left; }
#views .ws-head { border-bottom: 2px solid var(--s2p-color-text); padding-bottom: var(--s2p-space-2); margin-bottom: var(--s2p-space-3); }
#views .ws-name { display: flex; gap: var(--s2p-space-7); margin-top: var(--s2p-space-3); }
#views .ws-line { display: inline-block; min-width: 9em; border-bottom: 1px solid var(--s2p-color-text); }
#views .ws-passage { border: 1px solid var(--s2p-color-border); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-3) var(--s2p-space-4); margin: var(--s2p-space-4) 0 var(--s2p-space-2); background: var(--s2p-color-surface-muted); }
#views .ws-range { font-weight: var(--s2p-weight-bold); margin-bottom: var(--s2p-space-2); }
#views .ws-q { display: flex; gap: var(--s2p-space-2); margin: var(--s2p-space-3) 0; }
#views .ws-no { font-weight: var(--s2p-weight-bold); min-width: 1.9em; }
#views .ws-body { flex: 1; min-width: 0; }
#views .ws-choice { display: flex; gap: var(--s2p-space-2); margin: 3px 0; }
#views .ws-cno { min-width: 1.6em; }
#views .ws-ans-line { margin-top: var(--s2p-space-2); }
#views .ws-a { margin: var(--s2p-space-3) 0; padding-bottom: var(--s2p-space-2); border-bottom: 1px dotted var(--s2p-color-border); }
#views .ws-a-head { font-weight: var(--s2p-weight-bold); }
#views .sheet-foot { text-align: center; color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption-sm); margin-top: var(--s2p-space-4); padding-top: var(--s2p-space-2); border-top: 1px solid var(--s2p-color-border); }
#views .ws-draft { display: inline-block; border: 1px solid var(--s2p-color-warning); color: var(--s2p-color-warning-text); border-radius: 4px; font-size: var(--s2p-text-caption-sm); line-height: 1.5; font-weight: var(--s2p-weight-bold); padding: 0 var(--s2p-space-2); margin: 0 0 var(--s2p-space-1); }
#views .ws-a-head .ws-draft { margin: 0 0 0 var(--s2p-space-2); }
#views .ws-draftnote { font-size: var(--s2p-text-caption); color: var(--s2p-color-warning-text); margin: var(--s2p-space-2) 0 0; }
@media (max-width: 760px) {
  #views .sheet { padding: var(--s2p-space-4); }
  #views .cert-frame { padding: var(--s2p-space-4); }
  #views .ws-name { flex-direction: column; gap: var(--s2p-space-2); }
}

/* ===== 인쇄 ===== */
@page { size: A4; margin: 16mm 14mm 20mm; }
/* 학습지: 꼬리말은 @page 여백 상자(Chromium 131+, Edge). 지원하지 않는 브라우저는 아래 position:fixed 꼬리말 */
@page worksheet { size: A4; margin: 16mm 14mm 20mm; @bottom-center { content: "Study2Play 교사 수업용 · 재배포 금지"; font-size: 9pt; color: var(--s2p-color-neutral-text); } }
#view-worksheet { page: worksheet; }
@media print {
  html, body { background: var(--s2p-color-surface); color: var(--s2p-color-text); }
  .s2p-sidebar, .s2p-topbar, .s2p-skip, .s2p-toast-region, .s2p-shell__backdrop,
  #views .dev, #views .msg, #views .no-print, #views .s2p-help, #views .t-tabs, dialog, button { display: none !important; }
  .s2p-shell { display: block; min-height: 0; }
  .s2p-main__inner { padding: 0; max-width: none; margin: 0; }
  #views .sheet { border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; }
  #views .sheet-foot { display: none; }
  html:not(.pg-margins) #views .sheet-foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; margin: 0; border: 0; padding: 0; font-size: 9pt; background: var(--s2p-color-surface); }
  #views .cert-frame { padding: 10mm 8mm; }
  #views .ws-answers { break-before: page; page-break-before: always; }
  #view-worksheet[data-print=a] .ws-questions, #view-worksheet[data-print=q] .ws-answers { display: none !important; }
  #view-worksheet[data-print=a] .ws-answers { break-before: auto; page-break-before: auto; }
  #views :where(.ws-q, .ws-a, .cert-facts tr, .block-figure, .ws-choice) { break-inside: avoid; page-break-inside: avoid; }
  #views .ws-head { break-after: avoid; }
  #views a { color: inherit; text-decoration: none; }
  #views .cert-facts th { background: var(--s2p-color-surface-muted); }
  #views .ws-passage { background: var(--s2p-color-surface); }
  #views .ws-draft { border-color: var(--s2p-color-text); color: var(--s2p-color-text); }
  #views .ws-draftnote { color: var(--s2p-color-text); }
}

/* ===== 묶음(fieldset): 테두리 없이 제목(legend)만 label 처럼 ===== */
#views fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#views legend.t-legend, #views fieldset:not(.scope-box) > legend:not(.s2p-visually-hidden) { display: block; padding: 0; font-weight: var(--s2p-weight-semibold); font-size: var(--s2p-text-body); margin: var(--s2p-space-3) 0 var(--s2p-space-1); }

/* ===== 화면 안 묶음(게이트 뒤 본문 등)의 세로 간격 ===== */
#views :is(#my-questions-body, #worksheets-body, #author-body, #stats-body, #compose-body, #stimulus-body, #profileBody, #step2, #giftBody) > * + * { margin-top: var(--s2p-space-4); }
#views :is(#mqQuestions, #mqStimuli) > * + * { margin-top: var(--s2p-space-3); }
#views #mqQuestions { margin-top: var(--s2p-space-3); }
/* 아직 비어 있는 검사 칸은 그리지 않는다 / 카드 첫 요소의 위 여백 없애기 */
#views :is(#cqCheck, #stCheck):empty { display: none; }
#views .card > :first-child { margin-top: 0; }