/*
 * Study2Play 부모 Web 고유 스타일 (W5, docs/45 §3.3 P-01~P-08). fonts.css·tokens.css·components.css 다음에 읽는다.
 * - 뼈대(사이드바·상단바·토스트·드로어·<dialog>)는 packages/web 의 S2P.shell / components.css 가 그린다. 여기에는 부모 화면 안의
 *   카드·폼·대시보드·규칙·현황·결제 모양만 둔다.
 * - 색·간격·글자 크기는 tokens.css 변수만 쓴다(색 코드 직접 사용 금지, docs/45 D-01). 차트 데이터 색은 tokens.css 의 --s2p-chart-N 이고 app.js(REPORT_*_COLOR)가 var() 로 SVG 에 준다.
 * - 앱 요소 규칙은 .pw(본문 #views 와 부모 대화상자) 아래로 한정한다. 공통 컴포넌트(s2p-*)에는 영향을 주지 않는다.
 */

/* ===== 바탕 ===== */
/* Zero specificity: it only removes browser margins/paddings and never beats a component class (.s2p-stat, .s2p-callout …). */
:where(.pw, .pw *) { margin: 0; padding: 0; }
.pw { font-size: var(--s2p-text-body); line-height: var(--s2p-leading-body); color: var(--s2p-color-text); min-width: 0; }
.pw :where(a) { color: var(--s2p-color-link); }
.pw :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--s2p-focus-ring-width) solid var(--s2p-focus-ring-color);
  outline-offset: var(--s2p-focus-ring-offset);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#views { display: flex; flex-direction: column; gap: var(--s2p-space-4); min-width: 0; }

/* 상단바의 가족 선택(가족이 둘 이상일 때만, shell 상단바 계정 영역 앞) */
.pw-topbar-family { display: flex; align-items: center; min-width: 0; margin-left: auto; }
.pw-topbar-family select {
  max-width: 260px; min-height: var(--s2p-control-height-sm);
  padding: 0 var(--s2p-space-2);
  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: var(--s2p-text-caption);
}
.pw-topbar-family:not([hidden]) + .s2p-topbar__account { margin-left: var(--s2p-space-2); }

/* ===== 화면 ===== */
.view { display: flex; flex-direction: column; gap: var(--s2p-space-5); min-width: 0; }
.pw-lead { color: var(--s2p-color-text-muted); font-size: var(--s2p-text-body); }
.pw-section-title { font-size: var(--s2p-text-body-lg); font-weight: var(--s2p-weight-bold); margin-top: var(--s2p-space-2); }
.card, .dash-card {
  background: var(--s2p-color-surface);
  border: 1px solid var(--s2p-color-border-subtle);
  border-radius: var(--s2p-radius);
  padding: var(--s2p-space-6);
  box-shadow: var(--s2p-shadow-sm);
  min-width: 0;
}
.card > h3, .dash-card > h3 { font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); line-height: var(--s2p-leading-tight); margin-bottom: var(--s2p-space-2); }
.card h4 { font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-bold); margin: var(--s2p-space-4) 0 var(--s2p-space-2); }
.card-title { font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); margin-bottom: var(--s2p-space-2); }
.card-desc { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); margin-bottom: var(--s2p-space-4); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s2p-space-3); }
.item-card { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius); padding: var(--s2p-space-4); background: var(--s2p-color-surface); display: flex; flex-direction: column; gap: var(--s2p-space-2); min-width: 0; }
.item-card h4 { font-size: var(--s2p-text-body-lg); font-weight: var(--s2p-weight-bold); margin: 0; overflow-wrap: anywhere; }
.item-meta { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); display: flex; flex-direction: column; gap: 2px; }
.item-meta span { overflow-wrap: anywhere; }
.item-card .button-row { margin-top: var(--s2p-space-1); }
.pw-collapse > summary { cursor: pointer; font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-link); font-size: var(--s2p-text-caption); }
.pw-collapse[open] > summary { margin-bottom: var(--s2p-space-3); }
.pw-collapse > p { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); margin-top: var(--s2p-space-2); }

/* ===== 폼 ===== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s2p-space-3) var(--s2p-space-4); margin-bottom: var(--s2p-space-2); }
.form-group { display: flex; flex-direction: column; gap: var(--s2p-space-1); min-width: 0; }
.form-group.full-width { grid-column: 1 / -1; }
.pw label, .pw .form-label { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-neutral-text); }
.hint { font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-subtle); font-weight: var(--s2p-weight-regular); }
.pw :where(input, select, textarea) {
  font-family: inherit; font-size: var(--s2p-text-body);
  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);
  width: 100%; min-width: 0;
}
.pw :where(textarea) { min-height: 72px; }
.pw :where(input, select, textarea):focus-visible { outline-offset: 1px; border-color: var(--s2p-color-primary); }
.pw :where(input, select)[aria-invalid="true"] { border-color: var(--s2p-color-danger); box-shadow: inset 0 0 0 1px var(--s2p-color-danger); }
.pw :where(input, select):disabled { background: var(--s2p-color-surface-muted); color: var(--s2p-color-text-muted); cursor: not-allowed; }
.pw :where(input[type="checkbox"], input[type="radio"]) { width: auto; min-height: 0; flex: 0 0 auto; accent-color: var(--s2p-color-primary); }
.field-error { color: var(--s2p-color-danger-text); font-size: var(--s2p-text-caption-sm); font-weight: var(--s2p-weight-semibold); }
.field-error:empty { display: none; }
.form-error { color: var(--s2p-color-danger-text); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); margin-top: var(--s2p-space-2); overflow-wrap: anywhere; }
.form-error:empty { display: none; }
.pw fieldset { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); min-width: 0; }
.pw legend { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-bold); padding: 0 var(--s2p-space-1); }
.check-list { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2) var(--s2p-space-4); }
.check-list label { display: flex; align-items: center; gap: var(--s2p-space-2); font-weight: var(--s2p-weight-medium); }

/* ===== 버튼(앱 고유 마크업). 모양은 components.css .s2p-btn 과 같다: 기본=외곽선, .btn-primary=채움, .btn-danger=위험 ===== */
.button-row { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); margin-top: var(--s2p-space-3); align-items: center; }
.pw :where(button:not([class*="s2p-"])) {
  font-family: inherit; font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold);
  min-height: var(--s2p-control-height);
  padding: 0 var(--s2p-space-4);
  border-radius: var(--s2p-radius-sm);
  border: 1px solid var(--s2p-color-border-input);
  background: var(--s2p-color-surface); color: var(--s2p-color-neutral-text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2p-space-2);
  transition: background var(--s2p-duration-fast) var(--s2p-ease), border-color var(--s2p-duration-fast) var(--s2p-ease), color var(--s2p-duration-fast) var(--s2p-ease);
}
.pw :where(button:not([class*="s2p-"]):hover:not(:disabled)) { background: var(--s2p-color-surface-muted); }
.pw :where(button:disabled) { opacity: 0.55; cursor: not-allowed; }
.pw :where(button[aria-busy="true"]) { cursor: progress; }
.pw .btn-primary { background: var(--s2p-color-primary); color: var(--s2p-color-on-primary); border-color: var(--s2p-color-primary); }
.pw .btn-primary:hover:not(:disabled) { background: var(--s2p-color-primary-hover); border-color: var(--s2p-color-primary-hover); }
.pw .btn-danger { background: var(--s2p-color-surface); color: var(--s2p-color-danger-text); border-color: var(--s2p-color-danger); }
.pw .btn-danger:hover:not(:disabled) { background: var(--s2p-color-danger-light); }
.pw .btn-danger-solid { background: var(--s2p-color-danger); color: var(--s2p-color-on-primary); border-color: var(--s2p-color-danger); }
.pw .btn-danger-solid:hover:not(:disabled) { background: var(--s2p-color-danger-hover); border-color: var(--s2p-color-danger-hover); }
.pw .btn-link { background: none; border: none; color: var(--s2p-color-link); padding: 0; min-height: 0; font-weight: var(--s2p-weight-semibold); text-decoration: none; }
.pw .btn-link:hover:not(:disabled) { background: none; text-decoration: underline; }
.pw a.btn-link { font-size: var(--s2p-text-caption); }
.pw .btn-small { min-height: var(--s2p-control-height-sm); padding: 0 var(--s2p-space-3); font-size: var(--s2p-text-caption-sm); }
.pw a.pw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2p-space-2);
  min-height: var(--s2p-control-height); padding: 0 var(--s2p-space-4);
  border: 1px solid var(--s2p-color-border-input); border-radius: var(--s2p-radius-sm);
  background: var(--s2p-color-surface); color: var(--s2p-color-neutral-text);
  font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); text-decoration: none;
}
.pw a.pw-btn:hover { background: var(--s2p-color-surface-muted); }
.pw a.pw-btn.btn-primary { background: var(--s2p-color-primary); color: var(--s2p-color-on-primary); border-color: var(--s2p-color-primary); }

/* ===== 로그인·가입(사이드바·상단바 없는 화면) ===== */
.auth-view { align-items: center; padding-top: 6vh; }
.auth-card { width: 100%; max-width: 440px; }
.auth-brand { display: flex; align-items: center; gap: var(--s2p-space-3); margin-bottom: var(--s2p-space-5); color: var(--s2p-color-primary); }
.auth-brand .s2p-icon { width: 32px; height: 32px; }
.auth-brand .brand-text { font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); color: var(--s2p-color-text); }
.auth-card form .form-group { margin-bottom: var(--s2p-space-3); }
.auth-card .btn-primary.wide { width: 100%; font-size: var(--s2p-text-body); }
.auth-switch { margin-top: var(--s2p-space-4); font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); text-align: center; }
.auth-switch a { font-weight: var(--s2p-weight-semibold); text-decoration: none; }
.auth-footer { margin-top: var(--s2p-space-5); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2p-space-4); font-size: var(--s2p-text-caption-sm); }
.pw .auth-footer a { color: var(--s2p-color-text-muted); text-decoration: none; }
.pw .auth-footer a:hover { text-decoration: underline; }

/* ===== 온보딩: 단계 표시는 .s2p-steps(components.css) ===== */
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s2p-space-3); margin-top: var(--s2p-space-2); }
.pw .choice {
  flex-direction: column; align-items: flex-start; text-align: left; justify-content: flex-start;
  min-height: 0; padding: var(--s2p-space-4); border: 2px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius);
  background: var(--s2p-color-surface); gap: var(--s2p-space-1);
}
.choice strong { font-size: var(--s2p-text-body-lg); color: var(--s2p-color-text); }
.choice span { font-size: var(--s2p-text-caption-sm); font-weight: var(--s2p-weight-medium); color: var(--s2p-color-text-muted); }
.pw .choice:hover:not(:disabled), .pw .choice[aria-pressed="true"] { border-color: var(--s2p-color-primary); background: var(--s2p-color-primary-light); }
.pw .choice:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== 기기 연결 코드(+ QR, DEC-110) ===== */
.code-panel { margin-top: var(--s2p-space-4); border: 1px solid var(--s2p-primary-200); background: var(--s2p-color-primary-light); border-radius: var(--s2p-radius); padding: var(--s2p-space-4); min-width: 0; }
.code-for { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-primary-800); }
.code-value {
  font-family: var(--s2p-font-mono); font-weight: var(--s2p-weight-bold);
  font-size: clamp(28px, 9vw, 48px); letter-spacing: 0.12em;
  display: flex; gap: 0.6em; flex-wrap: wrap; margin: var(--s2p-space-2) 0; color: var(--s2p-primary-900);
}
.code-panel[data-expired="true"] .code-value { opacity: 0.35; text-decoration: line-through; }
.code-body { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2) var(--s2p-space-6); align-items: flex-start; }
.code-body > div:first-child { flex: 1 1 240px; min-width: 0; }
.code-qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s2p-space-1); }
.code-qr svg { width: 168px; height: 168px; background: var(--s2p-color-surface); border: 1px solid var(--s2p-primary-200); border-radius: var(--s2p-radius-sm); }
.code-qr figcaption { font-size: var(--s2p-text-caption-sm); color: var(--s2p-primary-800); text-align: center; max-width: 168px; }
.code-panel[data-expired="true"] .code-qr { opacity: 0.35; }
.code-timer { font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-bold); color: var(--s2p-primary-800); }
.code-panel[data-expired="true"] .code-timer { color: var(--s2p-color-danger-text); }
.code-steps { margin: var(--s2p-space-2) 0 0 18px; font-size: var(--s2p-text-caption); color: var(--s2p-color-neutral-text); }
.pw .code-steps li { margin: 2px 0; }
.pw ol.code-steps { padding-left: 0; }

/* 한 번만 보이는 값(기기 키·초대 링크·2단계 인증 키) */
.secret-box { margin-top: var(--s2p-space-3); border: 1px solid var(--s2p-color-warning); background: var(--s2p-color-warning-light); color: var(--s2p-color-text); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-3) var(--s2p-space-4); min-width: 0; }
.secret-box p { font-size: var(--s2p-text-caption); }
.secret-box p + p { margin-top: var(--s2p-space-2); }
.secret-row { display: flex; gap: var(--s2p-space-2); margin-top: var(--s2p-space-2); align-items: center; min-width: 0; }
.secret-row input { flex: 1 1 auto; font-family: var(--s2p-font-mono); font-size: var(--s2p-text-caption); }
.secret-key { font-family: var(--s2p-font-mono); font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); letter-spacing: 0.08em; overflow-wrap: anywhere; margin-top: var(--s2p-space-2); }
.recovery-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2p-space-1) var(--s2p-space-3); margin-top: var(--s2p-space-2); font-family: var(--s2p-font-mono); font-size: var(--s2p-text-body); }

/* ===== 표 ===== */
.table-wrap { overflow-x: auto; max-width: 100%; margin-top: var(--s2p-space-3); }
table.data-table, table#dashAuditTable, table#reportWeekSkills { width: 100%; border-collapse: collapse; font-size: var(--s2p-text-caption); }
table.data-table caption, table#dashAuditTable caption { text-align: left; font-weight: var(--s2p-weight-semibold); padding: var(--s2p-space-1) 0 var(--s2p-space-2); }
table.data-table th, table.data-table td,
table#dashAuditTable th, table#dashAuditTable td,
table#reportWeekSkills th, table#reportWeekSkills td { padding: var(--s2p-space-2) var(--s2p-space-3); border-bottom: 1px solid var(--s2p-color-border-subtle); text-align: left; vertical-align: middle; }
table.data-table th, table#dashAuditTable th, table#reportWeekSkills th { background: var(--s2p-color-surface-muted); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-text-muted); white-space: nowrap; }
table.data-table td.actions { white-space: nowrap; }
table.data-table td.actions button + button { margin-left: var(--s2p-space-2); }
table#dashAuditTable { margin-top: var(--s2p-space-3); display: block; overflow-x: auto; }
table#dashAuditTable td, table#reportWeekSkills td { white-space: nowrap; }
table#reportWeekSkills td.dash-week-skill-name { white-space: normal; min-width: 120px; }
table#billPaymentsTable th, table#billPaymentsTable td, table#billRefundsTable th, table#billRefundsTable td { white-space: nowrap; }
table#billRefundsTable td.bill-wrap { white-space: normal; min-width: 160px; overflow-wrap: anywhere; }

/* ===== 배지·상태 글자 ===== */
.badge { display: inline-flex; align-items: center; gap: 2px; background: var(--s2p-color-neutral-light); border-radius: var(--s2p-radius-pill); padding: 2px var(--s2p-space-2); font-size: var(--s2p-text-caption-sm); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-neutral-text); white-space: nowrap; }
.badge-ok, .kind-grant { background: var(--s2p-color-success-light); color: var(--s2p-color-success-strong); }
.badge-warn, .dash-badge-warning { background: var(--s2p-color-warning-light); color: var(--s2p-color-warning-text); }
.badge-me, .kind-solve { background: var(--s2p-color-info-light); color: var(--s2p-color-info-text); }
.badge-danger, .kind-lock { background: var(--s2p-color-danger-light); color: var(--s2p-color-danger-text); }
.kind-device { background: var(--s2p-color-neutral-light); color: var(--s2p-color-neutral-text); }
.muted { color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption); }
.empty-state { padding: var(--s2p-space-4); border: 1px dashed var(--s2p-color-border); border-radius: var(--s2p-radius-sm); color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption); text-align: center; }
.status-line, .dash-status { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-neutral-text); margin-top: var(--s2p-space-2); overflow-wrap: anywhere; }
.status-line:empty, .dash-status:empty { display: none; }
.status-line[data-state="success"], .dash-status[data-state="success"] { color: var(--s2p-color-success-text); }
.status-line[data-state="error"], .dash-status[data-state="error"] { color: var(--s2p-color-danger-text); }
.status-line[data-state="pending"], .dash-status[data-state="pending"] { color: var(--s2p-color-warning-text); }
.boot { display: flex; flex-direction: column; align-items: center; gap: var(--s2p-space-3); padding: 12vh 0; text-align: center; }
.label-text { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-neutral-text); display: block; margin-bottom: var(--s2p-space-2); }
.notice-banner { padding: var(--s2p-space-3) var(--s2p-space-4); border-left: 4px solid currentColor; border-radius: var(--s2p-radius-sm); background: var(--s2p-color-warning-light); color: var(--s2p-color-warning-text); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); }
.bill-limit { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2) var(--s2p-space-3); align-items: center; }
.bill-limit span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }

/* ===== 개발 모드(?dev=1, 이 탭에서만) ===== */
.dev-bar { display: flex; align-items: center; gap: var(--s2p-space-2); flex-wrap: wrap; background: var(--s2p-color-warning-light); border: 1px solid var(--s2p-color-warning); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); font-size: var(--s2p-text-caption-sm); }
.dev-bar input { width: auto; flex: 1 1 180px; min-height: var(--s2p-control-height-sm); }
.dev-log { background: var(--s2p-sidebar-bg); border-radius: var(--s2p-radius-sm); color: var(--s2p-sidebar-text); font-size: var(--s2p-text-caption-sm); }
.dev-log summary { cursor: pointer; padding: var(--s2p-space-2) var(--s2p-space-3); font-weight: var(--s2p-weight-semibold); }
.dev-log pre { padding: var(--s2p-space-3); color: var(--s2p-primary-300); font-family: var(--s2p-font-mono); max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.dev-only-card { border-style: dashed; border-color: var(--s2p-color-warning); }

/* ===== 대화상자: <dialog class="s2p-dialog pw"> 안의 앱 모양. 문제 대화상자(#attemptModal, DEC-120)는 기존 오버레이(포커스 가둠 포함)를 쓴다 ===== */
.s2p-dialog.pw { padding: var(--s2p-space-5) var(--s2p-space-6); gap: var(--s2p-space-2); }
.s2p-dialog.pw > h3 { font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); margin-bottom: var(--s2p-space-2); }
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--s2p-z-dialog);
  background: var(--s2p-color-backdrop);
  display: none; align-items: center; justify-content: center; padding: var(--s2p-space-4);
}
.modal-overlay[data-open="true"] { display: flex; }
.modal-card {
  background: var(--s2p-color-surface); border-radius: var(--s2p-radius);
  box-shadow: var(--s2p-shadow-md);
  max-width: 520px; width: 100%; padding: var(--s2p-space-5) var(--s2p-space-6);
  max-height: 90vh; overflow: auto;
}
.modal-card h3 { font-size: var(--s2p-text-title-sm); margin: 0 0 var(--s2p-space-3); }
.pw .modal-consequences { margin: 0 0 var(--s2p-space-3); padding-left: 18px; font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); }
.pw .modal-consequences li { margin-bottom: var(--s2p-space-1); }
.modal-retained { font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-muted); background: var(--s2p-color-surface-muted); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); margin-bottom: var(--s2p-space-3); }
.s2p-dialog.pw .form-group, .modal-card .form-group { margin-bottom: var(--s2p-space-3); }
.modal-actions { display: flex; gap: var(--s2p-space-2); flex-wrap: wrap; justify-content: flex-end; margin-top: var(--s2p-space-2); }

/* ===== 대시보드(P-01): 자녀 선택 + 오늘 요약 + 빠른 행동 3개 + 문제 배너 ===== */
.dash-toolbar { display: flex; flex-wrap: wrap; gap: var(--s2p-space-3); align-items: flex-end; }
.dash-toolbar .form-group { flex: 1 1 200px; min-width: 0; margin: 0; }
.dash-toolbar .button-row { margin-top: 0; }
.dash-banner { display: block; }
.pw .dash-banner ul { margin: 0; padding-left: 18px; }
.pw .dash-banner li { margin: 2px 0; overflow-wrap: anywhere; }
.dash-card-head { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); align-items: center; justify-content: space-between; margin-bottom: var(--s2p-space-3); }
.dash-card-head h3 { margin: 0; font-size: var(--s2p-text-title-sm); }
.pw .s2p-stats { margin-top: var(--s2p-space-1); }
.pw .s2p-stat__label, .pw .s2p-stat__meta { font-size: var(--s2p-text-caption); }
.pw .s2p-empty { border: 1px dashed var(--s2p-color-border); border-radius: var(--s2p-radius); padding: var(--s2p-space-6) var(--s2p-space-4); }
.dash-devices { margin-top: var(--s2p-space-4); padding-top: var(--s2p-space-3); border-top: 1px dashed var(--s2p-color-border-subtle); }
.dash-devices h4, .dash-today-solves h4 { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-bold); margin: 0 0 var(--s2p-space-1); }
.dash-today-solves { margin-top: var(--s2p-space-4); padding-top: var(--s2p-space-3); border-top: 1px dashed var(--s2p-color-border-subtle); }
.dash-today-solves .button-row { margin-top: var(--s2p-space-2); }
.dash-device-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); margin: var(--s2p-space-2) 0 0; padding: 0; }
.dash-device-list li { background: var(--s2p-color-surface); border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-pill); padding: 2px var(--s2p-space-3); font-size: var(--s2p-text-caption-sm); overflow-wrap: anywhere; }
.pw-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--s2p-space-4); align-items: start; }
.pw-actions > .card { padding: var(--s2p-space-5); display: flex; flex-direction: column; }
.pw-actions > .card > h3 { display: flex; align-items: center; gap: var(--s2p-space-2); }
.pw-actions > .card > h3 .s2p-icon { color: var(--s2p-color-primary); }
.dash-stepper { display: flex; align-items: center; gap: var(--s2p-space-2); max-width: 260px; }
.dash-stepper input { text-align: center; min-width: 0; }
.pw .dash-stepper button { width: var(--s2p-control-height); padding: 0; flex: 0 0 auto; }
.dash-hint { margin-top: var(--s2p-space-2); font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-muted); }
.dash-inline-label { display: flex; justify-content: flex-start; align-items: center; gap: var(--s2p-space-2); font-weight: var(--s2p-weight-semibold); }
/* 과목 [내용 보기]·[예시 문제 보기] (DEC-161) */
.dash-subject-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2p-space-1) var(--s2p-space-2); margin: var(--s2p-space-1) 0; min-width: 0; }
.dash-subject-row .dash-inline-label { min-width: 0; overflow-wrap: anywhere; }
.pw .dash-subject-more { min-height: 0; padding: 2px var(--s2p-space-2); font-size: var(--s2p-text-caption-sm); }
.dash-subject-panel { flex: 1 0 100%; min-width: 0; margin: 0 0 var(--s2p-space-2); padding: var(--s2p-space-1) 0 var(--s2p-space-1) var(--s2p-space-3); border-left: 2px solid var(--s2p-color-border-subtle); }
.dash-subject-skills { margin: 0 0 var(--s2p-space-2); padding-left: 1.2em; font-size: var(--s2p-text-caption); overflow-wrap: anywhere; }
.dash-subject-skills li + li { margin-top: 2px; }
.dash-subject-panel .dash-hint { margin: 0 0 var(--s2p-space-2); }
.attempt-sample + .attempt-sample { border-top: 1px solid var(--s2p-color-border-subtle); margin-top: var(--s2p-space-4); padding-top: var(--s2p-space-3); }
.attempt-sample-meta { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-text-muted); margin: 0 0 var(--s2p-space-2); overflow-wrap: anywhere; }
.dash-result-list { list-style: none; margin: var(--s2p-space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2p-space-2); font-size: var(--s2p-text-caption); }
.dash-result-list li { padding: var(--s2p-space-2) var(--s2p-space-3); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-surface-muted); overflow-wrap: anywhere; }

/* ===== 규칙 설정(#/rules, P-01): 묶음 탭 + 하단 고정 저장 바 ===== */
.rules-tabs { margin-bottom: 0; }
.pw .s2p-tab .dash-changed-mark { margin-left: var(--s2p-space-1); }
.rules-notes { display: flex; flex-direction: column; gap: var(--s2p-space-2); }
.dash-policy-group { margin-top: var(--s2p-space-4); padding: var(--s2p-space-4); border: 1px solid var(--s2p-color-border-subtle); border-left: 4px solid var(--s2p-color-border); border-radius: var(--s2p-radius-sm); min-width: 0; }
.dash-policy-group.dash-group-changed { border-left-color: var(--s2p-color-warning); background: var(--s2p-color-warning-light); }
.dash-policy-group h4 { font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-bold); margin: 0 0 var(--s2p-space-3); display: flex; align-items: center; gap: var(--s2p-space-2); }
.pw .dash-policy-group fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.dash-changed-mark, .dash-dirty-badge { font-size: var(--s2p-text-caption-sm); font-weight: var(--s2p-weight-bold); color: var(--s2p-color-warning-text); background: var(--s2p-color-warning-light); border-radius: var(--s2p-radius-pill); padding: 0 var(--s2p-space-2); }
.dash-scope { 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-warning-light); color: var(--s2p-color-warning-text); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); }
.dash-cap-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2p-space-2); }
.dash-cap-grid .form-group { min-width: 0; }
.dash-cap-grid label { text-align: center; }
.dash-cap-grid input { text-align: center; padding-left: var(--s2p-space-1); padding-right: var(--s2p-space-1); }
.dash-guess-tools, .dash-combo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2p-space-2); margin-top: var(--s2p-space-2); }
.dash-guess-tools .dash-hint, .dash-combo-tools .dash-hint { margin: 0; flex: 1 1 220px; }
.dash-guess-item, .dash-combo-item { margin-top: var(--s2p-space-3); padding-top: var(--s2p-space-3); border-top: 1px dashed var(--s2p-color-border-subtle); min-width: 0; }
.dash-guess-title, .dash-combo-title { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-bold); color: var(--s2p-color-neutral-text); }
.dash-guess-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 200px)); gap: var(--s2p-space-2) var(--s2p-space-3); margin-top: var(--s2p-space-2); }
.dash-combo-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 260px)); gap: var(--s2p-space-2) var(--s2p-space-3); margin-top: var(--s2p-space-2); }
.dash-guess-check { margin-top: var(--s2p-space-2); font-weight: var(--s2p-weight-medium); }
.dash-guess-check span { min-width: 0; overflow-wrap: anywhere; }
.dash-slot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2p-space-2); margin: var(--s2p-space-2) 0; }
.dash-slot-copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2p-space-2); }
.dash-slot-copy select { width: auto; }
.dash-slot-touch-hint { display: none; }
.dash-slot-grid { --slot-h: 22px; display: grid; grid-template-columns: 30px repeat(48, minmax(0, 1fr)); grid-auto-flow: row; gap: 1px; min-width: 0; user-select: none; -webkit-user-select: none; margin-top: var(--s2p-space-2); }
.dash-slot-row { display: contents; }
.dash-slot-head { font-size: 10px; color: var(--s2p-color-text-subtle); line-height: 1; display: flex; align-items: flex-end; overflow: visible; white-space: nowrap; height: 14px; }
.dash-slot-head.dash-slot-hour-odd, .dash-slot-head.dash-slot-half { visibility: hidden; }
.dash-slot-day { font-size: var(--s2p-text-caption-sm); font-weight: var(--s2p-weight-bold); color: var(--s2p-color-neutral-text); display: flex; align-items: center; height: var(--slot-h); }
.dash-slot { height: var(--slot-h); background: var(--s2p-color-border-subtle); border-radius: 2px; cursor: pointer; position: relative; touch-action: none; outline: none; }
.dash-slot.dash-ok { background: var(--s2p-primary-500); }
.dash-slot.dash-slot-hourline { box-shadow: inset 1px 0 0 var(--s2p-color-border); }
.dash-slot.dash-cell-changed::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--s2p-color-warning); box-shadow: 0 0 0 1px var(--s2p-color-surface); }
.dash-slot:focus-visible { box-shadow: 0 0 0 2px var(--s2p-color-text); z-index: 1; }
.dash-slot-grid.dash-slot-locked .dash-slot { opacity: 0.55; }
.dash-slot-grid[aria-disabled="true"] .dash-slot { cursor: not-allowed; opacity: 0.45; }
.dash-legend { display: flex; flex-wrap: wrap; gap: var(--s2p-space-3); list-style: none; margin: var(--s2p-space-2) 0 0; padding: 0; font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-muted); }
.dash-legend li { display: flex; align-items: center; gap: var(--s2p-space-1); }
.dash-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.dash-swatch.dash-ok { background: var(--s2p-primary-500); }
.dash-swatch.dash-outside { background: var(--s2p-color-border-subtle); border: 1px solid var(--s2p-color-border); }
.dash-swatch.dash-changed { background: var(--s2p-color-warning); border-radius: 50%; }
.dash-slot-summary { list-style: none; margin: var(--s2p-space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s2p-space-1) var(--s2p-space-4); font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-neutral-text); }
.dash-slot-summary b { display: inline-block; min-width: 3em; }
/* 하단 고정 저장 바: 규칙 화면에만(P-01). 저장 안 한 변경이 있으면 위쪽 선을 경고색으로 */
.dash-policy-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin: var(--s2p-space-4) calc(-1 * var(--s2p-space-6)) calc(-1 * var(--s2p-space-6));
  padding: var(--s2p-space-3) var(--s2p-space-6);
  background: var(--s2p-color-surface);
  border-top: 1px solid var(--s2p-color-border-subtle);
  border-radius: 0 0 var(--s2p-radius) var(--s2p-radius);
  box-shadow: 0 -4px 12px var(--s2p-color-border-subtle);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2p-space-2);
}
.dash-policy-actions.is-dirty { border-top: 2px solid var(--s2p-color-warning); }
.dash-policy-actions .dash-hint { margin: 0; flex: 1 1 220px; font-weight: var(--s2p-weight-semibold); }
.dash-policy-actions .button-row { margin: 0; }
/* 학습 계획(#/rules?tab=plan): 과목별 진도 줄과 복습·선행 추가 줄. 좁은 폭에서 접히고 넘치지 않는다. */
.dash-plan-progress { margin-top: var(--s2p-space-3); padding-top: var(--s2p-space-3); border-top: 1px solid var(--s2p-color-border-subtle); min-width: 0; }
.dash-plan-progress:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dash-plan-progress-head { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); align-items: center; }
.dash-plan-radios { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2) var(--s2p-space-4); margin-top: var(--s2p-space-2); }
.dash-plan-radio { font-weight: var(--s2p-weight-regular); }
.dash-plan-manual { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); align-items: center; margin-top: var(--s2p-space-2); min-width: 0; }
.dash-plan-manual select { max-width: 100%; min-width: 0; }
.dash-plan-unit { overflow-wrap: anywhere; }
.dash-plan-track-add { display: flex; flex-wrap: wrap; gap: var(--s2p-space-3); align-items: flex-end; margin-top: var(--s2p-space-3); }
.dash-plan-track-add .form-group { flex: 1 1 160px; margin: 0; min-width: 0; }
.dash-plan-track-add button { flex: 0 0 auto; }
.dash-result-list li .dash-plan-track-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dash-week-bars { display: flex; flex-direction: column; gap: var(--s2p-space-2); margin-top: var(--s2p-space-3); }
.dash-week-day { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: var(--s2p-space-2); align-items: center; font-size: var(--s2p-text-caption-sm); }
.dash-week-day-label { color: var(--s2p-color-text-muted); white-space: nowrap; }
.dash-week-bar-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-week-day-text { white-space: nowrap; color: var(--s2p-color-neutral-text); }
.dash-week-totals { margin-top: var(--s2p-space-3); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); }
.dash-week-section { margin-top: var(--s2p-space-4); }
.dash-week-section h4 { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-bold); margin: 0 0 var(--s2p-space-2); }
.dash-week-table-wrap { overflow-x: auto; max-width: 100%; }
.dash-week-papers { margin-top: var(--s2p-space-4); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); }
/* 앱 규칙·휴대폰 앱 사용(DEC-124/133) */
.dash-app-list { list-style: none; margin: var(--s2p-space-2) 0 0; padding: 0; max-height: 420px; overflow-y: auto; border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); }
.dash-app-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2p-space-1) var(--s2p-space-4); padding: var(--s2p-space-2) var(--s2p-space-3); border-bottom: 1px solid var(--s2p-color-border-subtle); }
.dash-app-row:last-child { border-bottom: 0; }
.dash-app-row label { display: inline-flex; align-items: center; gap: var(--s2p-space-2); font-size: var(--s2p-text-caption); cursor: pointer; }
.pw .dash-restrict-group { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); margin: var(--s2p-space-2) 0; display: flex; flex-wrap: wrap; gap: var(--s2p-space-2) var(--s2p-space-4); }
.dash-restrict-group label { display: inline-flex; align-items: center; gap: var(--s2p-space-2); font-size: var(--s2p-text-caption); cursor: pointer; }
.dash-restrict-group .dash-hint { flex: 1 0 100%; margin: 2px 0 0; }
.dash-rec { color: var(--s2p-color-success-text); font-size: var(--s2p-text-caption-sm); font-weight: var(--s2p-weight-semibold); }
.dash-hint-inline { color: var(--s2p-color-text-muted); font-size: var(--s2p-text-caption-sm); }
.dash-unlock-row { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2) var(--s2p-space-3); align-items: center; margin: var(--s2p-space-2) 0; }
.dash-unlock-row .dash-status { margin: 0; }
.dash-app-modes { display: inline-flex; flex-wrap: wrap; gap: var(--s2p-space-1) var(--s2p-space-3); }
.dash-app-modes label { display: inline-flex; align-items: center; gap: var(--s2p-space-1); font-size: var(--s2p-text-caption); cursor: pointer; }
.dash-app-ident { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: var(--s2p-space-3); }
.dash-app-main { flex: 1 1 auto; min-width: 0; }
/* DEC-155: app picture (or the first letter of the name when there is none) at the start of each app row */
.dash-app-icon { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--s2p-radius-sm); object-fit: contain; }
.dash-app-icon-fallback { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--s2p-color-primary-light); color: var(--s2p-color-primary); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-bold); line-height: 1; }
.dash-app-main span { overflow-wrap: anywhere; }
.dash-app-pkg { display: block; font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-subtle); overflow-wrap: anywhere; }
.dash-app-allowtxt { font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-neutral-text); }
.dash-app-gone { font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-warning-text); }
.dash-app-fixed-note { display: block; font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-muted); }
.dash-app-lock { color: var(--s2p-color-neutral-text); }
.dash-usage-apps { margin: var(--s2p-space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2p-space-2); font-size: var(--s2p-text-caption); }
.dash-usage-apps li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px var(--s2p-space-2); align-items: center; }
.dash-usage-apps .dash-app-icon { grid-area: 1 / 1 / 3 / 2; align-self: center; }
.dash-usage-apps .s2p-progress { grid-area: 2 / 2 / 3 / -1; }
.dash-usage-name { overflow-wrap: anywhere; }
.dash-hour-bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin-top: var(--s2p-space-2); padding-bottom: 18px; border-bottom: 1px solid var(--s2p-color-border-subtle); position: relative; }
.dash-hour-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; position: relative; }
.dash-hour-bar { width: 100%; min-height: 1px; background: var(--s2p-primary-500); border-radius: 3px 3px 0 0; }
.dash-hour-bar.dash-hour-zero { background: var(--s2p-color-border-subtle); }
.dash-hour-tick { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--s2p-color-text-subtle); }

/* 필터 칩(기간·기록 종류·기록 분류)은 공통 .s2p-chips > .s2p-chip(components.css) */

/* ===== 학습·사용 현황(#/report) ===== */
.report-toolbar { display: flex; flex-wrap: wrap; gap: var(--s2p-space-3) var(--s2p-space-4); align-items: flex-end; }
.report-toolbar .form-group { flex: 1 1 200px; margin: 0; }
.report-toolbar .report-range-group { flex: 2 1 280px; }
.report-range { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2) var(--s2p-space-3); align-items: flex-end; margin-top: var(--s2p-space-3); }
.report-range .form-group { flex: 1 1 150px; margin: 0; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s2p-space-3); margin: 0; }
.tile { border: 1px solid var(--s2p-color-border-subtle); border-top: 4px solid var(--s2p-color-primary); border-radius: var(--s2p-radius); background: var(--s2p-color-surface); padding: var(--s2p-space-3) var(--s2p-space-4); min-width: 0; box-shadow: var(--s2p-shadow-sm); }
.tile dt { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-text-muted); }
.tile dd { margin: var(--s2p-space-1) 0 0; min-width: 0; }
.tile-value { display: block; font-size: var(--s2p-text-title); font-weight: var(--s2p-weight-bold); line-height: var(--s2p-leading-tight); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tile-sub { display: block; font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.signal-card h4 { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-bold); margin: var(--s2p-space-4) 0 var(--s2p-space-2); }
.signal-bars { display: flex; flex-direction: column; gap: var(--s2p-space-2); }
.signal-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s2p-space-2); align-items: center; font-size: var(--s2p-text-caption-sm); }
.signal-label { color: var(--s2p-color-text-muted); white-space: nowrap; }
.signal-value { color: var(--s2p-color-neutral-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-wrap { min-width: 0; margin-top: var(--s2p-space-2); }
.chart-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.chart-svg text { font-family: var(--s2p-font-sans); fill: var(--s2p-color-text-subtle); font-size: 11px; }
.chart-svg .chart-grid { stroke: var(--s2p-color-border-subtle); stroke-width: 1; }
.chart-svg .chart-hit { fill: transparent; cursor: pointer; }
.chart-svg .chart-hit[data-selected="true"] { fill: var(--s2p-color-primary-light); fill-opacity: 0.6; }
.chart-readout { font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-neutral-text); min-height: 1.5em; margin-top: var(--s2p-space-2); overflow-wrap: anywhere; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2p-space-2) var(--s2p-space-4); font-size: var(--s2p-text-caption-sm); color: var(--s2p-color-neutral-text); margin: var(--s2p-space-2) 0 0; padding: 0; }
.chart-legend li { display: flex; align-items: center; gap: var(--s2p-space-2); }
/* 범례 색 칸은 공통 .s2p-chart-swatch, 색은 app.js 가 차트와 같은 토큰(--s2p-chart-N)으로 칠한다. */
.data-details { margin-top: var(--s2p-space-2); }
.data-details summary { cursor: pointer; font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-link); }
.donut-row { display: flex; flex-wrap: wrap; gap: var(--s2p-space-4) var(--s2p-space-7); align-items: center; min-width: 0; }
.donut-row svg { width: 168px; height: 168px; flex: 0 0 auto; }
.donut-row svg text { font-family: var(--s2p-font-sans); fill: var(--s2p-color-text); }
.donut-legend { list-style: none; display: flex; flex-direction: column; gap: var(--s2p-space-2); font-size: var(--s2p-text-caption); flex: 1 1 200px; min-width: 0; margin: 0; padding: 0; }
.donut-legend li { display: flex; align-items: center; gap: var(--s2p-space-2); min-width: 0; }
.donut-legend .donut-name { overflow-wrap: anywhere; min-width: 0; }
.donut-legend .donut-value { margin-left: auto; color: var(--s2p-color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline { list-style: none; display: flex; flex-direction: column; gap: var(--s2p-space-2); margin: var(--s2p-space-3) 0 0; padding: 0; }
.timeline li { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); display: flex; flex-wrap: wrap; gap: var(--s2p-space-1) var(--s2p-space-3); align-items: center; font-size: var(--s2p-text-caption); min-width: 0; background: var(--s2p-color-surface); }
.timeline time { color: var(--s2p-color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline .tl-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* ===== 기기 카드 ===== */
.device-head { display: flex; align-items: center; gap: var(--s2p-space-3); min-width: 0; }
.device-icon { width: 36px; height: 36px; border-radius: var(--s2p-radius-sm); background: var(--s2p-color-primary-light); color: var(--s2p-color-primary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.device-warn { border: 1px solid var(--s2p-color-warning); background: var(--s2p-color-warning-light); color: var(--s2p-color-warning-text); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); font-size: var(--s2p-text-caption-sm); font-weight: var(--s2p-weight-semibold); overflow-wrap: anywhere; }
.device-badges { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); }

/* ===== 이용권·결제(#/billing PW-BILL-001, #/billing/success|fail PW-BILL-002) ===== */
.bill-note { margin-top: var(--s2p-space-2); }
.bill-gap { margin-top: var(--s2p-space-3); }
.bill-sum { margin-top: var(--s2p-space-3); font-size: var(--s2p-text-caption); }
.bill-terms { margin-top: var(--s2p-space-3); align-items: flex-start; }
.bill-terms input { margin-top: 3px; }
.pw .bill-coupon-row button { flex: 0 0 auto; }
.choice .bill-price { font-size: var(--s2p-text-title-sm); }
div.bill-price-card { display: flex; }
.pw div.bill-price-card:hover { border-color: var(--s2p-color-border-subtle); background: var(--s2p-color-surface); }
.pw .bill-limit button { min-height: var(--s2p-control-height-sm); }
#tossMethods, #tossAgreement { min-width: 0; }

/* ===== 계정 설정 ===== */
.toggle-list { display: flex; flex-direction: column; gap: var(--s2p-space-2); }
.toggle-list label { display: flex; gap: var(--s2p-space-2); align-items: flex-start; font-weight: var(--s2p-weight-medium); }
.toggle-list input { margin-top: 3px; }
.settings-group { display: flex; flex-direction: column; gap: var(--s2p-space-3); min-width: 0; }
.settings-group > h3 { font-size: var(--s2p-text-body-lg); font-weight: var(--s2p-weight-bold); color: var(--s2p-color-neutral-text); }

/* ===== 학습 기록 줄과 문제 대화상자(DEC-120) ===== */
.pw .activity-row { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; font-weight: var(--s2p-weight-regular); text-align: left; justify-content: flex-start; overflow-wrap: anywhere; cursor: pointer; }
.pw .activity-row:hover:not(:disabled) { background: none; text-decoration: underline; }
.attempt-card { max-width: 680px; }
.attempt-meta { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); margin-bottom: var(--s2p-space-2); overflow-wrap: anywhere; }
.attempt-result { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); align-items: center; margin-bottom: var(--s2p-space-1); font-size: var(--s2p-text-caption); }
.attempt-section { margin-top: var(--s2p-space-3); min-width: 0; }
.attempt-section h4 { font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-bold); margin: 0 0 var(--s2p-space-2); }
.attempt-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--s2p-text-body); }
.attempt-body p { margin: 0 0 var(--s2p-space-2); overflow-wrap: anywhere; font-size: var(--s2p-text-body); }
.attempt-choices { list-style: none; display: flex; flex-direction: column; gap: var(--s2p-space-2); margin: 0; padding: 0; }
.attempt-choice { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); display: flex; gap: var(--s2p-space-2); align-items: flex-start; min-width: 0; font-size: var(--s2p-text-body); background: var(--s2p-color-surface); }
.attempt-choice.is-correct { border-color: var(--s2p-color-success); background: var(--s2p-color-success-light); }
.attempt-choice.is-wrong { border-color: var(--s2p-color-danger); background: var(--s2p-color-danger-light); }
.attempt-choice-no { flex: 0 0 auto; min-width: 1.6em; font-weight: var(--s2p-weight-bold); color: var(--s2p-color-text-muted); }
.attempt-choice-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.attempt-choice-body p:last-child { margin-bottom: 0; }
.attempt-tags { display: flex; flex-wrap: wrap; gap: var(--s2p-space-1); margin-top: var(--s2p-space-1); }
.attempt-note { font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); background: var(--s2p-color-surface-muted); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-2) var(--s2p-space-3); margin-top: var(--s2p-space-3); overflow-wrap: anywhere; }
.attempt-note + .attempt-credit { margin-top: var(--s2p-space-2); }
.attempt-table-wrap { overflow-x: auto; margin: var(--s2p-space-2) 0; }
.attempt-body table { border-collapse: collapse; font-size: var(--s2p-text-caption); }
.attempt-body th, .attempt-body td { border: 1px solid var(--s2p-color-border-subtle); padding: var(--s2p-space-1) var(--s2p-space-2); text-align: left; }
.block-math { text-align: center; margin: var(--s2p-space-2) 0; }
.block-figure { margin: var(--s2p-space-2) 0; }
.block-figure img, .block-math img { max-width: 100%; }
.qc-figure-raster { background: #ffffff; }
.block-box { border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); padding: var(--s2p-space-3); margin: var(--s2p-space-2) 0; background: var(--s2p-color-bg); }
.block-box-label { font-weight: var(--s2p-weight-bold); font-size: var(--s2p-text-caption); margin-bottom: var(--s2p-space-1); }
.block-list { list-style: none; margin: var(--s2p-space-2) 0; padding: 0; font-size: var(--s2p-text-body); }
.block-blank { display: inline-block; min-width: 3em; border-bottom: 2px solid var(--s2p-color-text); }
.mark-bold { font-weight: var(--s2p-weight-bold); }
.mark-underline { text-decoration: underline; }
.mark-italic { font-style: italic; }

/* ===== 좁은 화면(960px 이하 사이드바는 shell 드로어, 아래는 본문만) ===== */
@media (max-width: 960px) {
  .dash-policy-actions { margin-left: calc(-1 * var(--s2p-space-4)); margin-right: calc(-1 * var(--s2p-space-4)); margin-bottom: calc(-1 * var(--s2p-space-4)); padding-left: var(--s2p-space-4); padding-right: var(--s2p-space-4); }
}
@media (max-width: 600px) {
  .card, .dash-card { padding: var(--s2p-space-4); }
  .pw-topbar-family select { max-width: 120px; }
  .dash-toolbar .form-group { flex: 1 1 100%; }
  .dash-week-day { grid-template-columns: 64px minmax(0, 1fr); }
  .dash-week-day-text { grid-column: 1 / -1; }
  .dash-cap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-slot-touch-hint { display: block; }
  .dash-slot-grid { --slot-h: 20px; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); grid-template-rows: 22px repeat(48, var(--slot-h)); grid-auto-flow: column; }
  .dash-slot-head { height: auto; align-items: center; justify-content: flex-end; padding-right: var(--s2p-space-2); touch-action: pan-y; }
  .dash-slot-head.dash-slot-hour-odd { visibility: visible; }
  .dash-slot-day { justify-content: center; height: auto; }
  .dash-slot.dash-slot-hourline { box-shadow: inset 0 1px 0 var(--s2p-color-border); }
  .dash-policy-group { padding: var(--s2p-space-3) var(--s2p-space-2); }
  .dash-policy-actions { margin-left: calc(-1 * var(--s2p-space-4)); margin-right: calc(-1 * var(--s2p-space-4)); margin-bottom: calc(-1 * var(--s2p-space-4)); }
  .auth-view { padding-top: 2vh; }
  .secret-row { flex-wrap: wrap; }
  .donut-row svg { width: 148px; height: 148px; }
  .s2p-dialog.pw { padding: var(--s2p-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .pw * { transition: none !important; }
}

/* ===== 작은 배치 도우미(옛 인라인 style 속성 대신) ===== */
.pw-grow { flex: 3 1 300px; }
.pw-w-sm { max-width: 280px; }
.pw-w-md { max-width: 360px; }
.pw-mt-1 { margin-top: var(--s2p-space-1); }
.pw-mt-2 { margin-top: var(--s2p-space-2); }
.pw-mt-3 { margin-top: var(--s2p-space-3); }
.pw-mt-4 { margin-top: var(--s2p-space-4); }