/* exam_builder.css — 「시험문제 만들기」 화면. 이 컴퓨터 화면(style.css)의 색 변수가 있으면 그것을 쓰고,
   없으면(온라인 쪽) 아래 값으로 선다. 시험지 칸은 어두운 화면에서도 흰 종이로 둔다. */
.xb {
  --xb-card: var(--card, #ffffff);
  --xb-ink: var(--ink, #1b1f24);
  --xb-mut: var(--ink-2, #5b6470);
  --xb-line: var(--line, #dfe3e8);
  --xb-accent: var(--accent, #1f5fd6);
  --xb-accent-soft: var(--accent-soft, #e8f0fe);
  --xb-warn: var(--warn, #b45309);
  --xb-ok: var(--ok, #157347);
  --xb-err: #c62828;
  --xb-radius: var(--radius, 10px);
  color: var(--xb-ink);
  font-size: 15px;
  line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .xb {
    --xb-card: var(--card, #1c2127);
    --xb-ink: var(--ink, #e8eaed);
    --xb-mut: var(--ink-2, #9aa4b0);
    --xb-line: var(--line, #2c333c);
    --xb-accent: var(--accent, #6f9df5);
    --xb-accent-soft: var(--accent-soft, #1d2a42);
    --xb-warn: var(--warn, #f0b849);
    --xb-ok: var(--ok, #5cc48a);
    --xb-err: #ff8a80;
  }
}
.xb *, .xb-print-root * { box-sizing: border-box; }
.xb [hidden], .xb-print-root [hidden] { display: none !important; }

/* ── 고르는 칸 ── */
.xb-card {
  background: var(--xb-card);
  border: 1px solid var(--xb-line);
  border-radius: var(--xb-radius);
  padding: 16px 18px;
}
.xb-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.xb-row.xb-top { align-items: flex-start; }
.xb-row:last-child { margin-bottom: 0; }
.xb-label { flex: 0 0 64px; font-size: 13px; font-weight: 600; color: var(--xb-mut); padding-top: 2px; }
.xb-grow { flex: 1 1 0; min-width: 0; }
.xb-dim { color: var(--xb-mut); font-size: 12.5px; }
.xb-input {
  font: inherit; font-size: 14px; color: var(--xb-ink); background: var(--xb-card);
  border: 1px solid var(--xb-line); border-radius: 7px; padding: 6px 9px;
}
select.xb-input { min-width: 160px; }
.xb-input:focus { outline: 2px solid var(--xb-accent); outline-offset: -1px; }

.xb-unitbtns { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.xb-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; }
.xb-area { break-inside: avoid; margin-bottom: 6px; }
.xb-areaname { font-size: 12px; font-weight: 700; color: var(--xb-mut); margin: 2px 0 2px; }
.xb-unit { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; cursor: pointer; font-size: 14px; }
.xb-unit input { margin: 0; transform: translateY(1px); }
.xb-unit .xb-dim { margin-left: auto; white-space: nowrap; font-size: 11.5px; }

.xb-counts { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.xb-count { display: flex; align-items: center; gap: 8px; }
.xb-num { width: 64px; text-align: right; }
.xb-lv {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 13px; font-weight: 700; background: var(--xb-accent-soft); color: var(--xb-accent);
}
.xb-sum { font-weight: 600; font-size: 14px; }
.xb-warn { color: var(--xb-warn) !important; font-weight: 600; }

.xb-btn {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--xb-ink); background: var(--xb-card);
  border: 1px solid var(--xb-line); border-radius: 7px; padding: 7px 14px;
}
.xb-btn:hover:not(:disabled) { border-color: var(--xb-accent); color: var(--xb-accent); }
.xb-btn:disabled { opacity: 0.5; cursor: default; }
.xb-btn.xb-small { font-size: 12.5px; padding: 3px 10px; }
.xb-btn.xb-primary { background: var(--xb-accent); border-color: var(--xb-accent); color: #fff; font-weight: 600; }
.xb-btn.xb-primary:hover { filter: brightness(1.08); color: #fff; }
.xb-actions { gap: 8px; }
.xb-msg { font-size: 13px; color: var(--xb-mut); }
.xb-msg.xb-ok { color: var(--xb-ok); }
.xb-msg.xb-error { color: var(--xb-err); }

/* ── 결과 ── */
.xb-result { margin-top: 16px; }
.xb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.xb-summary { font-weight: 600; font-size: 14px; }
.xb-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; margin-right: 4px; }
.xb-notice {
  font-size: 13px; color: var(--xb-warn); border: 1px solid var(--xb-line);
  border-radius: 7px; padding: 7px 11px; margin-bottom: 10px;
}

/* ── 시험지(종이) — 어두운 화면에서도 흰 바탕 ── */
.xb-paper {
  background: #fff; color: #111;
  border: 1px solid #d5d9de; border-radius: 4px;
  padding: 28px 30px 34px;
  font-family: 'Batang', '바탕', 'Noto Serif KR', 'Nanum Myeongjo', 'Times New Roman', serif;
  font-size: 15px; line-height: 1.75;
}
.xb-head { text-align: center; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 16px; }
.xb-title { font-size: 21px; margin: 0 0 4px; letter-spacing: -0.01em; font-weight: 700; }
.xb-meta { font-size: 13px; color: #444; }
.xb-name { font-size: 13px; color: #222; margin-top: 8px; text-align: right; }
.xb-blank { display: inline-block; width: 90px; }

.xb-cols { column-count: 2; column-gap: 30px; column-rule: 1px solid #bbb; }
@media (max-width: 820px) { .xb-cols { column-count: 1; } }
.xb-q { break-inside: avoid; padding: 2px 0 26px; }
.xb-stem { white-space: normal; }
.xb-text { white-space: pre-wrap; }
.xb-no { font-weight: 700; margin-right: 2px; }
.xb-edu {
  display: inline-block; font-family: 'Pretendard', 'Malgun Gothic', system-ui, sans-serif;
  font-size: 10.5px; line-height: 1.4; color: #555; border: 1px solid #bbb; border-radius: 3px;
  padding: 0 4px; margin-right: 3px; vertical-align: 2px; white-space: nowrap;
}
.xb-pts { white-space: nowrap; }
.xb-table { border-collapse: collapse; margin: 6px 0; font-size: 14px; }
.xb-table th, .xb-table td { border: 1px solid #555; padding: 1px 10px; text-align: center; }
.xb-table th { font-weight: 600; background: #f3f3f3; }
.xb-figwrap { text-align: center; margin: 8px 0 4px; }
.xb-fig { max-width: 100%; height: auto; }

.xb-choices { list-style: none; margin: 8px 0 0; padding: 0 0 0 6px; display: grid; gap: 2px 10px; }
.xb-ch5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.xb-ch3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xb-ch1 { grid-template-columns: 1fr; }
.xb-choices li { white-space: pre-wrap; }
.xb-mark { margin-right: 1px; }

.xb-answers { margin-top: 18px; border-top: 2px solid #111; padding-top: 12px; }
.xb-anstitle { font-size: 17px; margin: 0 0 10px; text-align: center; }
.xb-quick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 3px 10px;
  font-size: 14px; border: 1px solid #bbb; padding: 8px 12px; margin-bottom: 14px;
}
.xb-sol { break-inside: avoid; padding-bottom: 12px; font-size: 13.5px; line-height: 1.65; }
.xb-solhead { font-weight: 600; }
.xb-soltag { font-weight: 400; color: #666; font-size: 12px; margin-left: 4px; }
.xb-steps { margin: 2px 0 0 14px; }
.xb-steps p { margin: 0; white-space: pre-wrap; }
.xb-paper .xb-dim { color: #777; }

@media (max-width: 600px) {
  .xb-label { flex-basis: 100%; }
  .xb-paper { padding: 18px 14px; }
  .xb-ch5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 인쇄: 시험지 사본(.xb-print-root)만 찍는다 ── */
.xb-print-root { display: none; }
@media print {
  @page { size: A4; margin: 13mm 12mm 14mm; }
  body.xb-printing { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.xb-printing > *:not(.xb-print-root) { display: none !important; }
  body.xb-printing > .xb-print-root { display: block; }
  .xb-print-root .xb-paper {
    border: 0; border-radius: 0; padding: 0; font-size: 10.5pt; line-height: 1.7;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .xb-print-root .xb-cols { column-count: 2; column-gap: 8mm; column-rule: 0.6pt solid #777; }
  .xb-print-root .xb-q { padding-bottom: 16mm; }
  .xb-print-root .xb-title { font-size: 16pt; }
  .xb-print-root .xb-answers { break-before: page; border-top: 0; margin-top: 0; padding-top: 0; }
  .xb-print-root .xb-sol { font-size: 9.5pt; }
}