/* 학습계획의 종이·잉크·지표 카드 언어를 학습이력에 함께 적용한다. */
.sp-hx-view{
  --sp-ink:#172234;--sp-muted:#5f6e81;--sp-line:#dbe1e8;--sp-paper:#fffefa;
  --sp-canvas:#f2f0e9;--sp-navy:#18283e;--sp-coral:#ed795f;--sp-yellow:#f3c856;
  --sp-teal:#4ea999;--sp-blue:#5b83c4;
  --surface:#fffefa;--surface2:#f3f6fa;--border:#dbe1e8;--text:#172234;
  --text2:#526174;--text3:#687386;--accent:#315b9a;
  --confirm-danger:#9d351d;
  --add-active-bg:#eaf2ff;--add-active-border:#bdd2fb;--add-active-text:#294fa6;
  display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(12px,2vw,24px);
  border:1px solid #dedbd2;border-radius:22px;color:var(--sp-ink);color-scheme:light;
  background:radial-gradient(circle at 100% 0,rgba(91,131,196,.13),transparent 30%),linear-gradient(150deg,#fbfaf5,var(--sp-canvas));
  box-shadow:0 18px 50px rgba(20,34,52,.11)
}
.sp-hx-view .sp-panel,.sp-hx-view .sp-hx-sec,.sp-hx-view .sp-hx-day,.sp-hx-view .sp-hi{
  border-color:var(--sp-line);border-radius:18px;background:var(--sp-paper);box-shadow:0 10px 26px rgba(26,41,61,.07)
}
.sp-hx-view .sp-hx-summary-panel{padding:16px 18px}
.sp-hx-view .sp-hx-plan{
  margin:0 0 12px;padding:16px 18px;border:0;border-radius:17px;
  background:linear-gradient(120deg,var(--sp-navy),#2c4666);color:#fff;
  box-shadow:0 12px 28px rgba(24,40,62,.2)
}
.sp-hx-view .sp-hx-plan-name{color:#fff;font-size:17px;line-height:1.35}
.sp-hx-view .sp-hx-plan .sp-hx-badge{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff}
.sp-hx-view .sp-hx-plan .sp-hx-rbtn{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff}
.sp-hx-view .sp-hx-plan .sp-hx-rbtn:hover{background:rgba(255,255,255,.22);color:#fff}
.sp-hx-view .sp-hx-summary-panel>.sp-hx-sec{margin-bottom:12px;box-shadow:none}
.sp-hx-view .sp-hx-sum{gap:9px}
.sp-hx-view .sp-hx-sum-cell{
  position:relative;overflow:hidden;min-height:83px;padding:12px 14px;border-color:var(--sp-line);
  border-radius:15px;background:var(--sp-paper)
}
.sp-hx-view .sp-hx-sum-cell::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--sp-coral)}
.sp-hx-view .sp-hx-sum-cell:nth-child(2)::before{background:var(--sp-blue)}
.sp-hx-view .sp-hx-sum-cell:nth-child(3)::before{background:var(--sp-teal)}
.sp-hx-view .sp-hx-sum-l{color:var(--sp-muted);font-weight:700}
.sp-hx-view .sp-hx-sum-v{color:var(--sp-navy);font-size:var(--ui-font-metric)}
.sp-hx-view .sp-hx-sum-basis,.sp-hx-view .sp-hx-sum-foot{color:var(--sp-muted)}
.sp-hx-view .sp-hx-sum-basis{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.sp-hx-view .sp-hx-baseline-edit{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-hx-view .sp-hx-baseline-edit label{font-weight:700;color:var(--sp-ink)}
.sp-hx-view .sp-hx-baseline-edit input{height:44px;min-width:140px;padding:0 9px;border:1px solid var(--sp-line);border-radius:10px;background:var(--sp-paper);color:var(--sp-ink);font:inherit}
.sp-hx-view .sp-hx-baseline-edit .sp-hx-rbtn{min-height:44px;padding:8px 14px}
.sp-hx-view .sp-btn,.sp-hx-view .sp-hx-rbtn{border-color:#d7dde5;background:var(--sp-paper);color:var(--sp-ink);font-weight:720}
.sp-hx-view .sp-btn:hover,.sp-hx-view .sp-hx-rbtn:hover{border-color:#8795a8;color:var(--sp-ink)}
.sp-hx-view .sp-btn.primary{border-color:var(--sp-coral);background:var(--sp-coral);color:#172234}
.sp-hx-view .sp-hx-sec>summary{font-size:14px}
.sp-hx-view .sp-hx-day{margin-top:0}
.sp-hx-view .sp-hx-hint,.sp-hx-view .sp-hx-loop{color:var(--sp-muted)}
.sp-hx-view .sp-hi-grid>article,.sp-hx-view .sp-hi-checkpoint{border-color:var(--sp-line);background:#f5f8fd}
.sp-hx-view .sp-hi-metric{border-color:var(--sp-line);background:var(--sp-paper)}
.sp-hx-charts{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);gap:14px;min-width:0}
.sp-hx-chart-card{
  min-width:0;padding:18px 20px;border:1px solid var(--sp-line);border-radius:18px;
  background:var(--sp-paper);box-shadow:0 10px 26px rgba(26,41,61,.07)
}
.sp-hx-chart-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sp-hx-chart-heading h3,.sp-hx-completion h3{margin:4px 0 0;font-size:17px;line-height:1.35;color:var(--sp-navy)}
.sp-hx-chart-heading>strong{font-size:20px;color:var(--sp-navy);white-space:nowrap}
.sp-hx-chart-heading small{font-size:11px;color:var(--sp-muted);font-weight:650}
.sp-hx-chart-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:clamp(2px,.6vw,7px);margin-top:16px;min-width:0}
.sp-hx-chart-day{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.sp-hx-chart-count{height:14px;color:var(--sp-ink);font-size:10px;font-weight:800;line-height:14px}
.sp-hx-chart-track{display:flex;align-items:flex-end;justify-content:center;width:100%;height:116px;border-bottom:1px solid var(--sp-line)}
.sp-hx-chart-bar{display:block;width:min(100%,28px);min-height:2px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--sp-blue),var(--sp-teal))}
.sp-hx-chart-bar.is-zero{background:#dce2e8}
.sp-hx-chart-day time{color:var(--sp-muted);font-size:10px;font-variant-numeric:tabular-nums}
.sp-hx-chart-note{margin:12px 0 0;color:var(--sp-muted);font-size:11.5px;line-height:1.5}
.sp-hx-completion{display:flex;align-items:center;gap:18px}
.sp-hx-completion .sp-calendar-progress-ring{flex:0 0 105px;width:105px;height:105px}
.sp-hx-completion p{margin:7px 0 0;color:var(--sp-muted);font-size:12px;line-height:1.5}
.sp-hx-completion p b{color:var(--sp-ink)}
.sp-hx-view :is(button,summary,input,select):focus-visible{outline:3px solid var(--sp-blue);outline-offset:2px}
@media(max-width:900px){.sp-hx-charts{grid-template-columns:minmax(0,1fr)}.sp-hx-completion{justify-content:flex-start}}
@media(max-width:600px){
  .sp-hx-view{padding:9px;border-radius:15px}
  .sp-hx-view .sp-hx-summary-panel{padding:10px}
  .sp-hx-view .sp-hx-plan{padding:13px}
  .sp-hx-view .sp-hx-sum-cell{min-height:72px;padding:10px 8px 10px 11px}
  .sp-hx-chart-card{padding:15px 12px}
  .sp-hx-chart-track{height:92px}
  .sp-hx-chart-day time{font-size:9px}
  .sp-hx-completion .sp-calendar-progress-ring{flex-basis:80px;width:80px;height:80px}
}
/* 다크 모드(앱 기본 테마) — 2026-09-27 운영 되읽기에서 관찰: 학습계획표(calendar.css)는 #1229로 다크를 따르는데 같은 패널의
   「학습이력관리」는 위 팔레트가 앱 색 토큰(--surface·--text…)까지 라이트 값으로 덮어써 다크에서도 밝은 카드·짙은 글자로 떴다
   (형제 누락). 다크에서는 덮어쓴 앱 토큰을 부모 값으로 되돌리고(inherit), 팔레트를 그 토큰에 잇는다. 라이트는 위 규칙 그대로다. */
html:not([data-theme="light"]) .sp-hx-view{
  --surface:inherit;--surface2:inherit;--border:inherit;--text:inherit;--text2:inherit;--text3:inherit;--accent:inherit;
  --confirm-danger:inherit;--add-active-bg:inherit;--add-active-border:inherit;--add-active-text:inherit;
  --sp-ink:var(--text);--sp-muted:var(--text2);--sp-line:var(--border);--sp-paper:var(--surface);--sp-canvas:var(--surface2);--sp-navy:#9fb7d8;
  color-scheme:dark;border-color:var(--border);
  background:radial-gradient(circle at 100% 0,rgba(91,131,196,.14),transparent 30%),linear-gradient(150deg,var(--surface),var(--surface2));
  box-shadow:0 18px 50px rgba(0,0,0,.35)
}
html:not([data-theme="light"]) .sp-hx-view .sp-panel,html:not([data-theme="light"]) .sp-hx-view .sp-hx-sec,html:not([data-theme="light"]) .sp-hx-view .sp-hx-day,html:not([data-theme="light"]) .sp-hx-view .sp-hi,html:not([data-theme="light"]) .sp-hx-chart-card{box-shadow:none}
html:not([data-theme="light"]) .sp-hx-view .sp-hx-plan{background:linear-gradient(120deg,#1a2b44,#243a58);box-shadow:0 12px 28px rgba(0,0,0,.35)}
html:not([data-theme="light"]) .sp-hx-view .sp-btn,html:not([data-theme="light"]) .sp-hx-view .sp-hx-rbtn{border-color:var(--button-border,var(--border));background:var(--button-bg,var(--surface2))}
html:not([data-theme="light"]) .sp-hx-view .sp-btn:hover,html:not([data-theme="light"]) .sp-hx-view .sp-hx-rbtn:hover{border-color:var(--text2)}
/* 위 두 줄이 이기지 않게 계획 막대 위 반투명 버튼과 주 동작(코랄·어두운 글자 5.6:1)은 다크에서도 원래 모양을 지킨다. */
html:not([data-theme="light"]) .sp-hx-view .sp-hx-plan .sp-hx-rbtn{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff}
html:not([data-theme="light"]) .sp-hx-view .sp-btn.primary{border-color:var(--sp-coral);background:var(--sp-coral);color:#172234}
html:not([data-theme="light"]) .sp-hx-view .sp-hi-grid>article,html:not([data-theme="light"]) .sp-hx-view .sp-hi-checkpoint{background:var(--surface2)}
html:not([data-theme="light"]) .sp-hx-chart-bar.is-zero{background:var(--border)}
@media(forced-colors:active){
  .sp-hx-view .sp-hx-day-status.warn,.sp-hx-view .sp-hx-day-status.error{color:Highlight}
  /* 다크 규칙(html:not([data-theme="light"]) …, 특정도 0,4,1)보다 높아야 강제 색상에서 주 동작이 구별된다. */
  .sp-hx-view .sp-hx-day .sp-btn.primary,
  html:not([data-theme="light"]) .sp-hx-view .sp-hx-day .sp-btn.primary{background:Highlight;color:HighlightText;border-color:Highlight}
}