/* 학습자료 수학 개념익히기 */

.cv { color: var(--color-text-strong); }

/* 소인수 블록 색은 비문학 지문의 약수 조합표와 맞춘다 */
.cv .is-p1 { --cv-bg: #fbe6dc; --cv-bg-on: #f3c9b6; --cv-line: #ce9a85; --cv-text: #943f2e; }
.cv .is-p2 { --cv-bg: #e1ecf8; --cv-bg-on: #bfd3ec; --cv-line: #97abc6; --cv-text: #264a79; }
.cv .is-p3 { --cv-bg: #e2f0e3; --cv-bg-on: #c2dfc5; --cv-line: #94bd99; --cv-text: #2c6238; }
.cv .is-p4 { --cv-bg: #eee6f5; --cv-bg-on: #d9c8e8; --cv-line: #b39dcb; --cv-text: #5a3a84; }

/* ---------- 소인수 블록으로 약수 개수 찾기 ---------- */

.cv-divisor { max-width: 640px; margin: 0 auto; }

.cv-divisor__pick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-bottom: 20px; }
.cv-divisor__nums { display: flex; }
.cv-divisor__select { height: 34px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cv-divisor__nums .segment__btn { height: 30px; min-width: 48px; font-size: 14px; font-variant-numeric: tabular-nums; }

.cv-divisor__summary {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.cv-divisor__formula { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-divisor__formula sup { font-size: 0.6em; }
.cv-divisor__count { margin: 6px 0 0; font-size: 14px; color: var(--color-text); }
.cv-divisor__count strong { color: var(--color-primary-dark); }

.cv-divisor__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

.cv-divisor__choice {
  padding: 3px 10px;
  border-radius: var(--radius-control);
  background: var(--cv-bg);
  color: var(--cv-text);
  font-size: 13px;
  font-weight: 600;
}

.cv-divisor__scroll { overflow-x: auto; margin-top: 18px; }

.cv-divisor__grid { width: 100%; border-collapse: separate; border-spacing: 6px; text-align: center; }

.cv-divisor__grid th {
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--cv-bg);
  color: var(--cv-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.cv-divisor__grid th em { display: block; font-style: normal; }
.cv-divisor__grid th.is-mix { background: var(--color-neutral-bg); }
.cv-divisor__grid th.is-mix em { color: var(--cv-text); }
.cv-divisor__grid th.is-mix span { color: var(--color-text-strong); }
.cv-divisor__grid th.is-mix.is-on { background: var(--color-border); }
.cv-divisor__grid th span { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.cv-divisor__grid th sup { font-size: 0.68em; line-height: 0; }
.cv-divisor__grid th.is-on { background: var(--cv-bg-on); }
.cv-divisor__grid th[scope="row"] { width: 104px; }
.cv-divisor__grid td { padding: 0; }

.cv-divisor__cell {
  display: block;
  width: 100%;
  min-width: 64px;
  height: 52px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cv-divisor__cell.is-on {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.cv-divisor__detail {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.cv-divisor__detail span { color: var(--cv-text); font-weight: 600; }

@media (max-width: 900px) {
  .cv-divisor__grid { border-spacing: 4px; }
  .cv-divisor__grid th { padding: 6px; font-size: 12px; }
  .cv-divisor__grid th[scope="row"] { width: 84px; }
  .cv-divisor__cell { min-width: 52px; height: 46px; font-size: 16px; }
}

/* 목록의 업데이트 날짜 */
.table td.is-date { color: var(--color-text-muted); font-size: 13px; white-space: nowrap; }

@media (max-width: 900px) {
  .cv-divisor__select { height: 44px; font-size: 16px; }
  .cv-divisor__nums .segment__btn { height: 40px; font-size: 15px; }
  .cv-divisor__count { font-size: 15px; }
}