/* S2P.composer (DEC-162): layout picker, figure slots, <보기> box / table editors and the composed-question preview.
   Shared by Admin Web and Teacher Web. Colours, spacing and type come from design-system/tokens.css only. */

/* ---- layout picker ---- */
.qc-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--s2p-space-2); margin: var(--s2p-space-2) 0; }
.qc-layout {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s2p-space-1);
  padding: var(--s2p-space-2) var(--s2p-space-2) var(--s2p-space-3); min-width: 0;
  border: 1px solid var(--s2p-color-border-input); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-surface);
  color: var(--s2p-color-text-muted); cursor: pointer; text-align: center;
}
.qc-layout:hover { background: var(--s2p-color-surface-muted); }
.qc-layout.is-selected { border-color: var(--s2p-color-primary); box-shadow: inset 0 0 0 1px var(--s2p-color-primary); background: var(--s2p-color-primary-light); color: var(--s2p-color-info-text); }
.qc-layout.is-disabled { cursor: not-allowed; opacity: 0.55; }
.qc-layout:focus-within { outline: var(--s2p-focus-ring-width) solid var(--s2p-focus-ring-color); outline-offset: var(--s2p-focus-ring-offset); }
/* the radio stays in the accessibility tree and keyboard order; the card is its visible face */
.qc-layout__radio { position: absolute; top: var(--s2p-space-2); left: var(--s2p-space-2); margin: 0; }
.qc-layout__name { font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-text); line-height: var(--s2p-leading-tight); }
.qc-layout__hint { font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-muted); }
.qc-sketch { width: 96px; max-width: 100%; height: 64px; color: var(--s2p-color-text-muted); }
.qc-layout.is-selected .qc-sketch { color: var(--s2p-color-primary); }
.qc-sk-text { fill: currentColor; opacity: 0.55; }
.qc-sk-frame { fill: none; stroke: currentColor; stroke-width: 1.4; }
.qc-sk-grid { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.7; }
.qc-sk-ink { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.qc-sk-dot { fill: none; stroke: currentColor; stroke-width: 1; }
.qc-sk-label { fill: var(--s2p-color-surface); stroke: currentColor; stroke-width: 0.8; }

/* ---- shared bits ---- */
.qc-note { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); margin: var(--s2p-space-1) 0 var(--s2p-space-2); }
.qc-section-title { font-size: var(--s2p-text-body-lg); font-weight: var(--s2p-weight-bold); margin: var(--s2p-space-4) 0 var(--s2p-space-1); color: var(--s2p-color-text); }
.qc-field { display: flex; flex-direction: column; gap: var(--s2p-space-1); min-width: 0; margin-top: var(--s2p-space-2); }
.qc-label { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-text); }
.qc-check { display: inline-flex; gap: var(--s2p-space-2); align-items: center; font-size: var(--s2p-text-body); margin: var(--s2p-space-1) 0; }
.qc-actions { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); margin-top: var(--s2p-space-2); align-items: center; }
.qc-range { width: 100%; max-width: 320px; accent-color: var(--s2p-color-primary); }
.qc-msg {
  margin-top: var(--s2p-space-2); padding: var(--s2p-space-2) var(--s2p-space-3); border-radius: var(--s2p-radius-sm);
  background: var(--s2p-color-surface-muted); color: var(--s2p-color-neutral-text); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold);
}
.qc-msg[data-state="loading"] { background: var(--s2p-color-info-light); color: var(--s2p-color-info-text); }
.qc-msg[data-state="success"] { background: var(--s2p-color-success-light); color: var(--s2p-color-success-strong); }
.qc-msg[data-state="error"] { background: var(--s2p-color-danger-light); color: var(--s2p-color-danger-text); }

/* ---- figure slot / box / table editors ---- */
.qc-figslot, .qc-boxed, .qc-tabled {
  margin: var(--s2p-space-3) 0; padding: var(--s2p-space-3); min-width: 0;
  border: 1px solid var(--s2p-color-border); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-surface);
}
.qc-figslot__title { font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-bold); margin: 0 0 var(--s2p-space-1); color: var(--s2p-color-text); }
.qc-figslot__preview { padding: var(--s2p-space-2); border: 1px dashed var(--s2p-color-border); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-surface); text-align: center; overflow: hidden; }
.qc-figslot__warnings { margin: var(--s2p-space-2) 0 0; padding-left: 1.2em; font-size: var(--s2p-text-caption); color: var(--s2p-color-warning-text); }
.qc-figslot__width { font-weight: var(--s2p-weight-bold); color: var(--s2p-color-text); }
.qc-ai { margin-top: var(--s2p-space-2); padding: var(--s2p-space-2) var(--s2p-space-3); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-surface-muted); }
.qc-ai__notice { margin: 0; font-size: var(--s2p-text-caption); color: var(--s2p-color-warning-text); font-weight: var(--s2p-weight-semibold); }
.qc-ai__text { min-height: 56px; }
.qc-table-wrap { overflow-x: auto; max-width: 100%; }
.qc-grid { border-collapse: collapse; margin: var(--s2p-space-2) 0; }
.qc-grid td { padding: 2px; }
.qc-grid input { min-width: 6em; width: 100%; }
.qc-grid tr.is-header input { font-weight: var(--s2p-weight-bold); background: var(--s2p-color-surface-muted); }
.qc-rationale-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s2p-space-2) var(--s2p-space-3); margin-bottom: var(--s2p-space-2); }
/* DEC-166 photo slot / rights */
.qc-rights { margin-top: var(--s2p-space-2); padding: var(--s2p-space-2) var(--s2p-space-3); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-surface-muted); }
.qc-rights .qc-check { margin: var(--s2p-space-1) 0; }
.qc-figure-raster { background: #ffffff; }

/* ---- preview (white exam paper) ---- */
.qc-paper { color: var(--s2p-color-text); font-size: var(--s2p-text-body-lg); line-height: 1.7; min-width: 0; overflow-wrap: anywhere; }
.qc-p { margin: var(--s2p-space-2) 0; }
.qc-h { font-size: var(--s2p-text-caption); margin: var(--s2p-space-3) 0 var(--s2p-space-1); color: var(--s2p-color-text-muted); }
.qc-fig { margin: var(--s2p-space-3) 0; text-align: center; }
.qc-fig__img { max-width: 100%; height: auto; }
.qc-fig__caption { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); margin-top: var(--s2p-space-1); }
.qc-fig__missing { padding: var(--s2p-space-4); border: 1px dashed var(--s2p-color-border-input); border-radius: var(--s2p-radius-sm); color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption); }
.qc-math { margin: var(--s2p-space-2) 0; text-align: center; }
.qc-math img, .qc-math-inline { max-width: 100%; vertical-align: middle; }
.qc-table { border-collapse: collapse; margin: var(--s2p-space-3) 0; }
.qc-table th, .qc-table td { border: 1px solid var(--s2p-color-border-input); padding: 5px 9px; text-align: left; min-width: 2em; }
.qc-table th { background: var(--s2p-color-surface-muted); }
.qc-box { border: 1px solid var(--s2p-color-border-input); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); margin: var(--s2p-space-3) 0; }
.qc-box__label { text-align: center; font-weight: var(--s2p-weight-bold); color: var(--s2p-color-text-muted); margin-bottom: var(--s2p-space-1); }
.qc-box .qc-p { margin: var(--s2p-space-1) 0; }
.qc-list { list-style: none; margin: var(--s2p-space-1) 0; padding-left: 0.4em; }
.qc-list li { margin: 3px 0; }
.qc-list__marker { color: var(--s2p-color-link); font-weight: var(--s2p-weight-semibold); }
.qc-blank { display: inline-block; min-width: 2.5em; border-bottom: 1px solid currentColor; }
.qc-mark-bold { font-weight: var(--s2p-weight-bold); }
.qc-mark-underline { text-decoration: underline; text-underline-offset: 3px; }
.qc-mark-italic { font-style: italic; }
.qc-choice { display: flex; gap: var(--s2p-space-2); margin: var(--s2p-space-2) 0; }
.qc-choice__no { min-width: 1.4em; font-weight: var(--s2p-weight-semibold); }
.qc-choice__body { flex: 1; min-width: 0; }
.qc-choice__body .qc-p:first-child { margin-top: 0; }
.qc-choice__body .qc-fig { margin: 0 0 var(--s2p-space-1); text-align: left; }
.qc-choice.is-correct .qc-choice__no { color: var(--s2p-color-success-text); }
.qc-correct { display: inline-flex; align-items: center; margin-left: var(--s2p-space-2); padding: 1px 7px; border-radius: var(--s2p-radius-pill); background: var(--s2p-color-success-light); color: var(--s2p-color-success-strong); font-size: var(--s2p-text-caption-sm); font-weight: var(--s2p-weight-bold); }
.qc-rationale { margin: var(--s2p-space-1) 0; color: var(--s2p-color-text-muted); font-size: var(--s2p-text-body); }

/* ---- DEC-173: the rich text field (S2P.mathField: text with formula pictures) and the formula editor (MathLive) ---- */
.qc-richbox { min-width: 0; }
.qc-rich {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; 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: 16px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
.qc-rich--multi { min-height: 6.5em; }
.qc-rich:focus-visible { outline: var(--s2p-focus-ring-width) solid var(--s2p-focus-ring-color); outline-offset: 1px; border-color: var(--s2p-color-primary); }
.qc-rich[aria-invalid="true"] { border-color: var(--s2p-color-danger); }
.qc-rich:empty::before { content: attr(data-placeholder); color: var(--s2p-color-text-subtle); pointer-events: none; }
.qc-rich__math { cursor: pointer; margin: 0 1px; border-radius: 3px; max-width: 100%; }
.qc-rich__math:hover { outline: 1px solid var(--s2p-color-primary); }
.qc-rich__chip {
  display: inline-block; padding: 0 var(--s2p-space-2); border: 1px dashed var(--s2p-color-border-input); border-radius: var(--s2p-radius-pill);
  background: var(--s2p-color-surface-muted); color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption); line-height: 1.5; cursor: pointer; user-select: none;
}
.qc-rich__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2p-space-1) var(--s2p-space-2); margin-top: var(--s2p-space-1); min-width: 0; }
.qc-rich__count { margin-left: auto; font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); }
.qc-rich__count.is-over { color: var(--s2p-color-danger-text); font-weight: var(--s2p-weight-bold); }
.qc-rich__error { flex-basis: 100%; font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-danger-text); }
.qc-richbox--compact .qc-rich { min-height: 2.4em; padding: 4px 6px; font-size: 15px; }
.qc-richbox--compact .qc-rich__bar { margin-top: 2px; }
.qc-richbox--compact .qc-rich__btn { min-width: 2em; padding-left: 6px; padding-right: 6px; }
.qc-grid .qc-richbox { min-width: 9em; }
.qc-grid tr.is-header .qc-rich { font-weight: var(--s2p-weight-bold); background: var(--s2p-color-surface-muted); }
/* MathLive's virtual keyboard is a fixed layer on <body> with z-index var(--keyboard-zindex, 105): below the app sidebar (200), which
   would cover its left part at widths where the sidebar is shown. Keep it above the sidebar and the mobile drawer, below dialogs. */
:root { --keyboard-zindex: 420; }
.qc-matheditor {
  margin: var(--s2p-space-2) 0 var(--s2p-space-3); padding: var(--s2p-space-3); min-width: 0; box-sizing: border-box;
  border: 2px solid var(--s2p-color-primary); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-surface);
}
.qc-matheditor--floating { position: fixed; left: var(--s2p-space-3); right: var(--s2p-space-3); top: var(--s2p-space-4); z-index: 50; margin: 0; max-width: 720px; }
.qc-matheditor__title { margin: 0 0 var(--s2p-space-2); font-weight: var(--s2p-weight-bold); color: var(--s2p-color-text); }
.qc-matheditor__field { margin-bottom: var(--s2p-space-2); min-width: 0; }
.qc-matheditor__mf {
  display: block; box-sizing: border-box; width: 100%; min-height: 3.2em; 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-size: 26px;
}
.qc-matheditor__mf::part(menu-toggle), .qc-matheditor__mf::part(virtual-keyboard-toggle) { display: none; }
.qc-matheditor__mf:focus-within { outline: var(--s2p-focus-ring-width) solid var(--s2p-focus-ring-color); outline-offset: 1px; border-color: var(--s2p-color-primary); }
.qc-matheditor__actions { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); }
.qc-matheditor__status { margin: var(--s2p-space-2) 0 0; font-size: var(--s2p-text-caption); color: var(--s2p-color-info-text); font-weight: var(--s2p-weight-semibold); }
.qc-matheditor__error { margin: var(--s2p-space-2) 0 0; padding: var(--s2p-space-2) var(--s2p-space-3); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-danger-light); color: var(--s2p-color-danger-text); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); }
.qc-matheditor__help, .qc-matheditor__note { margin: var(--s2p-space-2) 0 0; font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); }
.qc-matheditor__capture { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2p-space-1) var(--s2p-space-2); margin-top: var(--s2p-space-2); min-width: 0; }
.qc-matheditor__readnote { flex: 1 1 14em; min-width: 0; font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); }

@media (max-width: 600px) {
  .qc-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qc-rationale-row { grid-template-columns: minmax(0, 1fr); }
  .qc-sketch { width: 72px; height: 48px; }
}