/* ============================================================
   practice.css — 학부모 실천 레이어 + 개인화 (담당 D 소유)
   tokens.css 변수만 사용한다. 새 색상/폰트/radius 추가 금지.
   모바일 우선(mobile-first). 클래스는 전부 .prac- 프리픽스로 다른 뷰(detail-*, path-*, uni-*
   등)와 충돌하지 않게 한다. .chip/.chip-row/.badge/.btn/.state-card/.skeleton-row/
   .empty-state/.page-title/.page-desc/.card-grid 는 app.css가 정의한 전역 유틸리티를
   그대로 재사용한다(detail.js/pathways.js와 동일한 기존 관례).
   ============================================================ */

.prac-view { padding: var(--sp-8) 0 var(--sp-10); }

.prac-head { margin-bottom: var(--sp-6); }
.prac-eyebrow {
  display: inline-block; color: var(--brand-link); font-weight: 700; font-size: 13px;
  letter-spacing: .02em; margin: 0 0 var(--sp-2);
}

.prac-subsection-title { font-size: 17px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-3); }

/* ===== 우리 아이 설정 카드 ===== */
.prac-settings-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-5); margin-bottom: var(--sp-6);
}
.prac-settings-desc { color: var(--text-muted); font-size: 14px; margin: 0 0 var(--sp-4); }
.prac-gradeband-row { margin-bottom: var(--sp-2); }
.prac-settings-subhead { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: var(--sp-3) 0 var(--sp-2); }
.prac-subject-row { margin-bottom: 0; }
.prac-subjects-wrap .chip[aria-pressed="true"] { background: var(--brand); color: #fff; }
.prac-settings-saved {
  display: inline-block; min-height: 1em; font-size: 13px; font-weight: 600; color: var(--success);
  margin-top: var(--sp-2);
}

/* ===== 탭(이번 주 해볼 것 / 내 목록) ===== */
.prac-tabs { margin-bottom: var(--sp-5); }
.prac-tabpanel:focus { outline: none; }

/* ===== "이번 주 해볼 것" 카드 그리드 ===== */
.prac-weekly-grid { margin-bottom: 0; }

.prac-card {
  display: flex; flex-direction: column; gap: var(--sp-2); text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-5);
}
.prac-card-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-height: 24px; }
.prac-badge-done { background: var(--success-tint); color: var(--success); }

.prac-card-title {
  display: block; width: 100%; text-align: left; background: none; border: none; padding: 0;
  font-size: 16px; font-weight: 700; color: var(--text-strong); cursor: pointer; line-height: 1.4;
}
.prac-card-title:hover { color: var(--brand-link); text-decoration: underline; }

.prac-card-section { margin: 0; }
.prac-card-label { font-size: 12px; font-weight: 700; color: var(--brand); margin: 0 0 2px; }
.prac-card-text { font-size: 14px; color: var(--text); line-height: 1.6; margin: 0; }

.prac-code-badge { background: var(--surface-2); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.prac-card-controls { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.prac-card-actions { display: flex; gap: var(--sp-2); }
.prac-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--bg); color: var(--text-muted); cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.prac-icon-btn:hover { background: var(--surface-2); }
.prac-icon-btn[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.prac-icon-btn-complete[aria-pressed="true"] { background: var(--success-tint); border-color: var(--success); color: var(--success); }

/* ===== 숙달 상태 3단계(익숙해요/연습 중/먼저 살펴봐요) — 백로그 #5 참고 구성 보강 ===== */
.prac-mastery-row { flex-wrap: wrap; }
.prac-mastery-chip[aria-pressed="true"] { background: var(--brand); color: #fff; }

/* ===== 내 목록 ===== */
.prac-mylist-section { margin-bottom: var(--sp-6); }
.prac-list { display: grid; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
.prac-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.prac-list-title {
  display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0;
  background: none; border: none; padding: 0; text-align: left; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text-strong);
}
.prac-list-title:hover { color: var(--brand-link); }
.prac-list-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prac-list-action { flex-shrink: 0; height: 32px; padding: 0 var(--sp-3); font-size: 13px; }
.prac-empty { color: var(--text-muted); font-size: 14px; background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); margin: 0; }

/* ===== 데이터 초기화("내가 저장한 내용 모두 지우기") — docs/AUDIT-live.md §4 DEXA 대응.
   진입점은 "우리 아이 설정" 카드(.prac-settings-card, background: var(--surface)) 안에 있어
   (v3 잔여 결함 #5) 같은 --surface를 쓰면 경계가 흐려진다 — 대비를 위해 --bg를 쓴다. ===== */
.prac-reset-section {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-5);
}
.prac-reset-desc { color: var(--text-muted); font-size: 13px; margin: 0 0 var(--sp-3); }
.prac-reset-btn { height: 40px; padding: 0 var(--sp-4); font-size: 13px; }
.prac-reset-confirm { color: var(--danger); font-size: 13px; font-weight: 600; margin: 0 0 var(--sp-3); }
.prac-reset-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.prac-reset-confirm-btn {
  height: 40px; padding: 0 var(--sp-4); font-size: 13px;
  background: var(--danger); color: #fff;
}
.prac-reset-confirm-btn:hover { filter: brightness(0.92); }

/* ===== 상세 패널 훅 카드("이 배움을 집에서") — detail.js가 practiceHook()으로 삽입 ===== */
.prac-hook-card {
  background: var(--brand-tint); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3);
}
.prac-hook-heading { font-size: 14px; font-weight: 700; color: var(--brand); margin: 0; }
.prac-hook-card .prac-card-label { color: var(--brand); }

@media (min-width: 641px) {
  .prac-settings-card { padding: var(--sp-6); }
}

/* ============================================================
   journey.js — "우리 아이 경로"(초→중→고 종단 뷰), FAMILY 담당 소유.
   클래스는 전부 .jrn- 프리픽스로 이 파일의 .prac-*와도, 다른 뷰(detail-*/path-*/uni-*)와도
   충돌하지 않게 한다. tokens.css 변수만 사용(신규 색상/폰트/radius 추가 금지).
   ============================================================ */
.jrn-view { padding: var(--sp-8) 0 var(--sp-10); }
.jrn-head { margin-bottom: var(--sp-6); }
.jrn-eyebrow {
  display: inline-block; color: var(--brand-link); font-weight: 700; font-size: 13px;
  letter-spacing: .02em; margin: 0 0 var(--sp-2);
}
.jrn-subsection-title { font-size: 17px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--sp-3); }
.jrn-empty { text-align: center; }

/* ===== 현재 학년군 요약 바 ===== */
.jrn-profile-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  background: var(--brand-tint); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6); font-size: 14px; color: var(--text);
}
.jrn-profile-bar strong { color: var(--brand); }
.jrn-profile-change { margin-left: auto; height: 32px; padding: 0 var(--sp-3); font-size: 13px; }

/* ===== 시작 교과/주제 선택 ===== */
.jrn-subject-section { margin-bottom: var(--sp-5); }
.jrn-subject-chips { margin-bottom: 0; }
.jrn-topic-pick-holder { margin-bottom: var(--sp-6); }
.jrn-topic-pick-title { margin-top: var(--sp-4); }
.jrn-topic-pick-list {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-3);
}
.jrn-topic-pick-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
}
.jrn-topic-pick-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.jrn-topic-pick-chip[aria-pressed="true"] { background: var(--brand); color: #fff; }
.jrn-more-btn { height: 32px; padding: 0 var(--sp-3); font-size: 13px; }
.jrn-empty-note { color: var(--text-muted); font-size: 14px; background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); margin: 0; }

/* ===== 타임라인(초→중→고) ===== */
.jrn-timeline-holder { min-height: 40px; }
.jrn-timeline { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: 560px; }

.jrn-card {
  display: flex; flex-direction: column; gap: var(--sp-2); text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-5);
}
.jrn-card-current { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.jrn-card-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-height: 24px; }
.jrn-level-badge { background: var(--surface-2); color: var(--text-muted); }
.jrn-code-badge { background: var(--surface-2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.jrn-current-badge { background: var(--accent-tint); color: var(--accent-strong); }
.jrn-position-badge { background: var(--surface-2); color: var(--text-muted); }
.jrn-card-title {
  display: block; width: 100%; text-align: left; background: none; border: none; padding: 0;
  font-size: 16px; font-weight: 700; color: var(--text-strong); cursor: pointer; line-height: 1.4;
}
.jrn-card-title:hover { color: var(--brand-link); text-decoration: underline; }

/* ===== 연결선(bridge) ===== */
.jrn-connector {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); margin-left: var(--sp-5);
  border-left: 2px dashed var(--border);
}
.jrn-connector-arrow { color: var(--text-muted); font-size: 14px; line-height: 1; }
.jrn-kind-badge { background: var(--brand-tint); color: var(--brand); }
.jrn-rel-badge { background: var(--surface-2); color: var(--text-muted); }
.jrn-reason { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6; }
.jrn-end-note { color: var(--text-muted); font-size: 13px; margin: var(--sp-2) 0; }

@media (min-width: 641px) {
  .jrn-topic-pick-chip span:last-child { max-width: 420px; }
}