/* study 관리자 학습 탭 공통 프리미티브 — 자료탭(html-library.css) 문법을
   관리자 셸 인디고 토큰(styles.css :root)으로 이식. 2026-10-14 학습탭 재구조.
   스코프: .learn-rules-panel 및 학습 탭 공통. 틸(#0f766e)은 html-library 전용. */

.learn-rules-panel [hidden] { display: none !important; }

/* ── 섹션 헤더·타이포그래피 (h2 1.25 / h3 1.05 / h4 .95 / 본문 .875 / 보조 .85) ── */
.learn-rules-panel .section-header {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px;
}
.learn-rules-panel h2 { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; color: var(--text); }
.learn-rules-panel .section-meta { font-size: .85rem; color: var(--muted); }

/* ── 요약 카드 목록 (읽기 전용) ── */
.rule-summary-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.rule-summary-card {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.rule-summary-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow); }
.rule-summary-card.is-inactive { background: var(--bg); }
.rule-summary-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.rule-summary-name { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; }
.rule-summary-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rule-summary-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 16px; margin: 10px 0 0; padding: 0;
}
.rule-summary-facts > div { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.rule-summary-facts dt { font-size: .8rem; color: var(--muted); flex: none; }
.rule-summary-facts dd { margin: 0; font-size: .875rem; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.rule-summary-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.learning-workspace .rule-summary-facts dt { white-space: nowrap; }
@media (max-width: 640px) {
  .learning-workspace .rule-summary-facts { grid-template-columns: minmax(0, 1fr); }
}


/* ── 비활성 보관 접힘 ── */
.learn-inactive-disclosure { border: 1px dashed var(--line); border-radius: 10px; margin: 6px 0 18px; }
.learn-inactive-disclosure > summary {
  cursor: pointer; padding: 10px 14px; font-size: .875rem; font-weight: 600; color: var(--muted);
  display: flex; gap: 8px; align-items: center; list-style: none;
}
.learn-inactive-disclosure > summary::-webkit-details-marker { display: none; }
.learn-inactive-disclosure > summary::before { content: "▸"; transition: transform .15s ease; }
.learn-inactive-disclosure[open] > summary::before { transform: rotate(90deg); }
.learn-inactive-disclosure[open] { border-style: solid; }
.learn-inactive-disclosure > .inactive-rules-note { margin: 0; padding: 0 14px 10px; }
.learn-inactive-disclosure .rule-summary-list { padding: 0 14px 14px; }

/* ── 단일 규칙 편집기 (자료탭 관리패널 문법) ── */
.rule-editor-panel { border: 1px solid #c7d2fe; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); padding: 14px 16px 16px; margin: 6px 0 18px; }
.editor-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.editor-tabs [role="tab"] {
  min-height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--muted); font-weight: 600; font-size: .875rem; padding: 0 12px;
}
.editor-tabs [role="tab"]:hover { color: var(--text); background: var(--surface-2); }
.editor-tabs [role="tab"][aria-selected="true"] { color: var(--primary); background: var(--surface-2); border-color: #c7d2fe; }
.mgmt-subpanel { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.editor-footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.editor-footer [data-draft-status] { margin-left: auto; }

/* 편집기 내부 폼 격자 — modern-form-field 호환, 간격 통일 */
.mgmt-subpanel .form-row { margin-bottom: 10px; }
.mgmt-subpanel .form-row:last-child { margin-bottom: 0; }
.mgmt-subpanel .modern-form-field { margin-bottom: 10px; }
.mgmt-subpanel .modern-form-field:last-child { margin-bottom: 0; }

/* 덱별 필터 폴드 — learning-progress.js .learning-range 문법 재사용 */
.deck-filter-fold { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: 8px; }
.deck-filter-fold > summary {
  cursor: pointer; padding: 8px 12px; font-size: .85rem; font-weight: 600; color: var(--text);
  display: flex; gap: 8px; align-items: center; list-style: none; flex-wrap: wrap;
}
.deck-filter-fold > summary::-webkit-details-marker { display: none; }
.deck-filter-fold > summary::before { content: "▸"; transition: transform .15s ease; color: var(--muted); }
.deck-filter-fold[open] > summary::before { transform: rotate(90deg); }
.deck-filter-fold .grade-filter-section,
.deck-filter-fold .lesson-filter-section,
.deck-filter-fold .direction-filter-section,
.deck-filter-fold .day-filter-section,
.deck-filter-fold .quiz-type-filter-section,
.deck-filter-fold .stage-filter-section,
.deck-filter-fold .theme-filter-section,
.deck-filter-fold .track-filter-section,
.deck-filter-fold .main-topic-filter-section { border-top: 1px dashed var(--line); margin: 0; padding: 10px 12px; }

/* 학습 탭 공통 툴바 */
.learn-rules-toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }

/* 메달 칩 — 색만이 아닌 텍스트(1위/2위/3위)로 순위 전달(색약 안전) */
.medal-chip { display: inline-block; border-radius: 9999px; padding: 1px 8px; margin-right: 3px; font-size: .75rem; font-weight: 600; border: 1px solid transparent; }
.medal-chip.m1 { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.medal-chip.m2 { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.medal-chip.m3 { background: #fce8d9; color: #7c4a1e; border-color: #f5c9a8; }
.medal-cell .medal-chip { white-space: nowrap; }

/* 학습 탭 공통 인라인 태그 칩 및 체크박스 라벨 — 불필요한 줄바꿈 방지 */
.mgmt-subpanel label.modern-tag-chip,
.learn-rules-panel label.modern-tag-chip,
main.learning-workspace label.modern-tag-chip,
main.learning-workspace label:has(input[type="checkbox"]),
main.learning-workspace label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
main.learning-workspace input[type="checkbox"],
main.learning-workspace input[type="radio"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

/* 학습 탭 전체 타이포그래피 통일 — decorate()가 6개 세부탭 컨테이너에
   learning-workspace 클래스를 부여한다. styles.css의 main.learning-workspace 규칙과
   동일 명시도로 뒤에서 덮어쓴다(문서 순서 우선). */
main.learning-workspace .panel h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 0 0 12px; }
main.learning-workspace .panel h3 { font-size: 1.05rem; font-weight: 600; color: var(--text); }
main.learning-workspace .panel h4 { font-size: .95rem; font-weight: 600; color: var(--text); }
main.learning-workspace .panel { border-radius: 10px; }
main.learning-workspace .muted { color: var(--muted); font-size: .85rem; }

@media (max-width: 640px) {
  .rule-summary-facts { grid-template-columns: 1fr 1fr; }
  .editor-tabs [role="tab"] { flex: 1 1 auto; }
}