/* KP2 v1.4 — 오늘 대시보드 · 연습 모드 · 녹음 (styles.css 토큰 사용, 빌드/CDN 없음)
   v1.7: --pr-study* 는 styles.css 의 --study* 를 그대로 가리킨다(테마 6종이 --study 를 바꾸면 따라간다). 다크 조건은 :root[data-scheme="dark"] 로만 쓴다. */
:root {
  --pr-study: var(--study, #0b7a5f); --pr-study-fg: var(--study-fg, #0a735a); --pr-study-tint: var(--study-tint, rgba(11, 122, 95, .13)); --pr-on-study: var(--on-study, #ffffff);
  --pr-radius-card: var(--radius-card, 14px); --pr-radius-ctl: var(--radius-ctl, 10px);
  --pr-dur-micro: var(--dur-micro, 120ms); --pr-dur-enter: var(--dur-enter, 220ms); --pr-ease-out: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  --pr-lh-answer: var(--lh-answer, 1.65);
}

/* 기억 수준 4색(DESIGN): 미학습 gray · 학습중 orange · 안정 blue · 숙달 green — 마크에만, 글자는 라벨 색. styles.css 의 --lv-* 가 있으면 그것을 쓴다 */
.lv-new { --lv: var(--lv-new, var(--gray)); } .lv-learning { --lv: var(--lv-learning, var(--orange)); } .lv-stable { --lv: var(--lv-stable, var(--blue)); } .lv-mastered { --lv: var(--lv-mastered, var(--green)); }
/* 평가 4색: 다시 red · 어렵게 orange · 보통 blue · 쉽게 green */
.r-again { --rt: var(--red); --rt-text: var(--red-text); --rt-tint: var(--red-tint); }
.r-hard { --rt: var(--orange); --rt-text: var(--orange-text); --rt-tint: var(--orange-tint); }
.r-good { --rt: var(--blue); --rt-text: var(--blue-text); --rt-tint: var(--blue-tint); }
.r-easy { --rt: var(--green); --rt-text: var(--green-text); --rt-tint: var(--green-tint); }

/* 학습 액션 버튼: styles.css 의 .btn.study 를 그대로 쓴다(없는 구 셸만 폴백) */
.btn.study { background: var(--study, var(--pr-study)); color: var(--on-study, var(--pr-on-study)); } /* 다크 민트 채움은 짙은 글자(흰 글자 1.8:1) */
.btn.study:active { opacity: .75; }
.btn.secondary .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.btn.secondary svg.icon.xs { color: var(--accent); }

/* ===== 오늘 대시보드 ===== */
.today { padding: 4px 0 40px; }
.today-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5em), 1fr)); gap: 12px; margin: 0 16px 24px; }
.today-tiles .tile, .pr-sum-tiles .tile { background: var(--surface, var(--gbg-2)); border-radius: var(--pr-radius-card); padding: 16px 16px 12px; box-shadow: var(--shadow-1); min-width: 0; }
.today-tiles .tile .k, .pr-sum-tiles .tile .k { font-size: var(--t-foot); color: var(--label-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-tiles .tile .v, .pr-sum-tiles .tile .v { font-size: var(--t-num-lg); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--label); }
.today-tiles .tile .v.small, .pr-sum-tiles .tile .v.small { font-size: var(--t-num-sm); line-height: 1.35; }
.today-tiles .tile .v.accent { color: var(--study-fg, var(--study, var(--pr-study-fg))); }
.today-tiles .tile .v.warn { color: var(--red-text); }
.today-tiles .tile .s, .pr-sum-tiles .tile .s { font-size: var(--t-cap); color: var(--label-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
.today-card { padding: 16px; }
.empty-inline { padding: 20px 0; text-align: center; color: var(--label-2); font-size: var(--t-sub); }

/* 기억 수준 누적 막대: 세그먼트 사이 2px 표면 간격, 값은 안에(들어갈 때만) + 범례에 항상 */
/* 막대 안 숫자는 쓰지 않는다: gray(3.3:1)·orange(2.2:1)·green(2.0:1) 위에서는 어떤 글자색도 4.5:1 이 안 되므로 값은 바로 아래 범례가 보여준다. */
.levels-bar { display: flex; gap: 2px; height: 24px; border-radius: var(--radius-xs); overflow: hidden; background: var(--fill-4); }
.levels-bar .seg { flex: 0 1 auto; min-width: 6px; background: var(--lv); }
.levels-bar .seg.empty { flex: 1; background: transparent; }
.levels-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7em), 1fr)); gap: 8px; }
.levels-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-foot); color: var(--label-2); }
.levels-legend .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.levels-legend .n { margin-left: auto; font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
.dot.lv-new, .dot.lv-learning, .dot.lv-stable, .dot.lv-mastered { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--lv); flex: none; }

/* 7일 추이 SVG: 막대 ≤28px, 끝 4px 둥글림(밑은 각지게), 오늘 = --study, 나머지는 보조색 */
.trend { display: block; width: 100%; height: auto; max-height: 190px; overflow: visible; font-family: var(--font); }
.trend .tr-base { stroke: var(--separator); stroke-width: 1; }
.trend .tr-slot { fill: transparent; }
.trend .tr-bar { fill: var(--fill); }
.trend .tr-bar-base { fill: var(--fill); }
.trend .tr-g.today .tr-bar, .trend .tr-g.today .tr-bar-base { fill: var(--study, var(--pr-study)); }
.trend .tr-zero { fill: var(--label-4); }
.trend .tr-val { font-size: var(--t-cap); font-weight: 600; fill: var(--label); font-variant-numeric: tabular-nums; }
.trend .tr-x { font-size: var(--t-cap); fill: var(--label-2); }
.trend .tr-x.today { fill: var(--label); font-weight: 600; }
.trend .tr-x2 { font-size: var(--t-cap2); fill: var(--label-2); }
@media (hover: hover) { .trend .tr-g:hover .tr-slot { fill: var(--fill-4); } .trend .tr-g:hover .tr-bar { fill: var(--accent); } .trend .tr-g.today:hover .tr-bar { fill: var(--study, var(--pr-study)); } }

/* 중요도 × 수준 표 */
.imp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-foot); }
.imp-table th, .imp-table td { padding: 8px 6px; text-align: right; border-bottom: var(--hairline, .5px) solid var(--separator); white-space: nowrap; }
.imp-table thead th { color: var(--label-2); font-weight: 500; }
.imp-table thead th:first-child, .imp-table tbody th, .imp-table tfoot th { text-align: left; }
.imp-table thead th .dot { margin-right: 4px; vertical-align: 0; }
.imp-table td.num { font-variant-numeric: tabular-nums; }
.imp-table td.zero { color: var(--label-2); }
.imp-table td.sum, .imp-table tfoot td, .imp-table tfoot th { font-weight: 600; }
.imp-table tfoot th, .imp-table tfoot td { border-bottom: 0; border-top: 1px solid var(--separator-opaque); }
.imp-table tbody tr:last-child th, .imp-table tbody tr:last-child td { border-bottom: 0; }
.imp-table .badge { min-width: 28px; height: 20px; font-size: var(--t-cap2); }
.today .twrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 세션 시작 */
.start-group { margin-bottom: 24px; }
.start-card { padding: 12px 16px 16px; display: grid; gap: 12px; }
.start-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.size-ctl { display: inline-flex; align-items: center; gap: 6px; }
.size-ctl .lbl { font-size: var(--t-foot); color: var(--label-2); margin-right: 4px; }
.size-step { width: 44px; height: 44px; border: 0; border-radius: var(--pr-radius-ctl); background: var(--fill-3); color: var(--label); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.size-step:active { background: var(--fill-2); }
.size-val { min-width: 2.2em; text-align: center; font-size: var(--t-title3); font-weight: 600; font-variant-numeric: tabular-nums; }
.start-main { flex-direction: column; gap: 2px; min-height: 56px; padding: 8px 20px; border-radius: var(--pr-radius-card); }
.start-main .t { font-size: var(--t-head); font-weight: 600; }
.start-main .sub { font-size: var(--t-cap); font-weight: 500; } /* opacity .85 는 3.6:1 로 미달 */
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); gap: 8px; }
.start-grid .btn { min-height: 44px; font-size: var(--t-sub); font-weight: 500; border-radius: var(--pr-radius-ctl); padding: 0 12px; gap: 6px; }

@media (max-width: 899px) {
  .today-tiles { gap: 8px; }
  .today-tiles .tile, .pr-sum-tiles .tile { padding: 12px; }
  .today-tiles .tile .v, .pr-sum-tiles .tile .v { font-size: var(--t-num); }
  .today-tiles .tile .v.small, .pr-sum-tiles .tile .v.small { font-size: var(--t-title3); }
}
@media (min-width: 900px) {
  .today { max-width: var(--content-max, 860px); margin: 0 auto; width: 100%; }
  .start-main { min-height: 60px; }
}
@media (max-width: 360px) { .today-tiles { grid-template-columns: 1fr 1fr; } .today-tiles .tile:last-child { grid-column: 1 / -1; } }

/* ===== 연습 모드(전체 화면 오버레이) ===== */
.practice-view {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--gbg); color: var(--label);
  animation: pr-in var(--pr-dur-enter) var(--pr-ease-out);
}
@keyframes pr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-head {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: calc(var(--nav-h) + var(--safe-t)); padding: var(--safe-t) 8px 0;
  background: var(--gbg); border-bottom: var(--hairline, .5px) solid var(--separator);
}
.pr-exit { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 10px 0 6px; border: 0; background: none; color: var(--accent-fg); font-size: var(--t-head); border-radius: var(--pr-radius-ctl); flex: none; }
.pr-exit svg { width: 20px; height: 20px; }
@media (hover: hover) { .pr-exit:hover { background: var(--fill-4); } }
.pr-progress { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px; }
.pr-count { font-size: var(--t-sub); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pr-track { width: min(100%, 220px); height: 4px; border-radius: 2px; background: var(--fill-3); overflow: hidden; }
.pr-fill { height: 100%; width: 0; background: var(--study, var(--pr-study)); transition: width var(--pr-dur-enter) var(--pr-ease-out); }
.pr-timer { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--pr-radius-ctl); background: var(--fill-4); color: var(--label); line-height: 1.1; }
.pr-time { font-size: var(--t-title3); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pr-tstate { font-size: var(--t-cap2); color: var(--label-2); margin-top: 2px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.pr-tstate:empty { display: none; }
.pr-timer.paused .pr-time { color: var(--label-2); }
.pr-timer.warn .pr-time { color: var(--orange-text); }
.pr-timer.over { background: var(--red-tint); }
.pr-timer.over .pr-time { color: var(--red-text); }
.pr-timer.stopped { cursor: default; }
@media (hover: hover) { .pr-timer:not(.stopped):hover { background: var(--fill-3); } }

.pr-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; padding: 0 var(--safe-r) 24px var(--safe-l); }
.pr-body { width: 100%; max-width: var(--content-max, 760px); margin: 0 auto; padding: 16px 16px 8px; }
.pr-loading { min-height: 40vh; }
.pr-state { padding-top: 15vh; }

/* 질문 카드: 22~24px, 편집 불가 */
.pr-card { background: var(--gbg-2); border-radius: var(--pr-radius-card); padding: 16px; box-shadow: var(--shadow-1); }
.pr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--t-foot); color: var(--label-2); margin-bottom: 10px; min-height: 22px; }
.pr-meta .pr-no { font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
/* 기억 수준 배지: styles.css 의 .badge.lv-* 가 색을 준다. 없는 구 셸용 폴백 */
.badge.pr-level { background: var(--fill-3); color: var(--label-2); }
.badge.pr-level.lv-new { background: var(--gray-tint); color: var(--lv-new-text, var(--gray-text)); }
.badge.pr-level.lv-learning { background: var(--orange-tint); color: var(--lv-learning-text, var(--orange-text)); }
.badge.pr-level.lv-stable { background: var(--blue-tint); color: var(--lv-stable-text, var(--blue-text)); }
.badge.pr-level.lv-mastered { background: var(--green-tint); color: var(--lv-mastered-text, var(--green-text)); }
.pr-again-tag { color: var(--red-text); font-weight: 600; }
.pr-fav { display: inline-flex; color: var(--accent); }
.pr-q { margin: 0; font-size: var(--t-title); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; }
.pr-q b { font-weight: 700; }
.pr-err { margin-top: 10px; color: var(--red-text); font-size: var(--t-foot); }
.pr-rec-slot { margin-top: 14px; }
.pr-rec-slot:empty { display: none; }

/* 답안 패널(읽기 전용) */
.pr-answer { margin-top: 16px; scroll-margin-top: 8px; animation: pr-fade var(--pr-dur-enter) var(--pr-ease-out); }
@keyframes pr-fade { from { opacity: 0; } to { opacity: 1; } }
.pr-sec { background: var(--gbg-2); border-radius: var(--pr-radius-card); padding: 12px 16px 16px; box-shadow: var(--shadow-1); margin-bottom: 12px; }
.pr-sec.memo { background: var(--yellow-tint); box-shadow: none; }
.pr-sec-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: var(--t-foot); font-weight: 600; color: var(--label-2); letter-spacing: .01em; }
.pr-sec-h .t { flex: none; }
.pr-cnt { margin-left: auto; font-weight: 400; font-size: var(--t-cap); color: var(--label-2); font-variant-numeric: tabular-nums; }
.pr-cnt.over { color: var(--red-text); font-weight: 600; }
.pr-legend { display: inline-flex; align-items: center; gap: 4px 6px; font-weight: 500; font-size: var(--t-cap); color: var(--label-2); }
.pr-legend i { width: 3px; height: 12px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.pr-legend i:first-child { margin-left: 0; }
.pr-legend i.role-def { background: var(--st-def, var(--blue)); } .pr-legend i.role-why { background: var(--st-why, var(--orange)); } .pr-legend i.role-case { background: var(--st-case, var(--study, var(--pr-study))); }
.pr-text { font-size: var(--t-body); line-height: var(--pr-lh-answer); word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.pr-text b, .pr-sent-t b { font-weight: 700; }
.pr-text mark, .pr-sent-t mark { background: var(--mark); color: inherit; border-radius: 2px; }
.pr-text.pr-kw { font-size: var(--t-sub); color: var(--label-2); }
.pr-text.pr-empty { color: var(--label-2); }
.pr-sub + .pr-sub { margin-top: 12px; padding-top: 12px; border-top: var(--hairline, .5px) solid var(--separator); }
.pr-sub-h { font-size: var(--t-body); font-weight: 600; margin-bottom: 4px; line-height: 1.45; display: flex; gap: 6px; align-items: baseline; }
.pr-fu-n { flex: none; color: var(--accent-fg); font-variant-numeric: tabular-nums; }
.pr-sub .pr-cnt { display: block; margin-top: 4px; text-align: right; }

/* 세 문장 색 막대: 좌측 3px 막대 + 역할 캡션. 역할 없는 문장은 옅은 막대 */
.pr-struct { display: grid; gap: 10px; }
.pr-sent { position: relative; padding-left: 14px; }
/* 색 토큰은 styles.css --st-def/--st-why/--st-case/--st-etc(상세 '구조 보기' 와 동일). 없으면 폴백 */
.pr-sent::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--role, var(--st-etc, var(--label-4))); }
.pr-sent.role-def { --role: var(--st-def, var(--blue)); } .pr-sent.role-why { --role: var(--st-why, var(--orange)); } .pr-sent.role-case { --role: var(--st-case, var(--study, var(--pr-study))); }
.pr-sent.role-def .pr-role { color: var(--accent-fg, var(--blue-text)); } .pr-sent.role-why .pr-role { color: var(--orange-text); } .pr-sent.role-case .pr-role { color: var(--study-fg, var(--study, var(--pr-study-fg))); }
.pr-role { display: block; font-size: var(--t-cap); font-weight: 600; letter-spacing: .02em; line-height: 1.2; margin-bottom: 2px; }
.pr-sent-t { display: block; font-size: var(--t-body); line-height: var(--pr-lh-answer); word-break: keep-all; overflow-wrap: anywhere; }

/* 하단 고정 동작 바(safe-area) */
.pr-actions { flex: none; padding: 12px 16px calc(12px + var(--safe-b)); background: var(--gbg); border-top: var(--hairline, .5px) solid var(--separator); container-type: inline-size; }   /* v1.7: 평가 바 2×2 전환의 컨테이너 쿼리 기준 */
.pr-actions:empty { display: none; }
.pr-actions > * { max-width: var(--content-max, 760px); margin: 0 auto; }
.pr-actions > .btn { display: flex; } /* .btn 은 inline-flex 라 margin:auto 로 가운데가 안 됨(데스크톱에서 왼쪽으로 쏠리던 문제) */
.pr-reveal { min-height: 56px; font-size: var(--t-head); border-radius: var(--pr-radius-card); position: relative; }
.pr-reveal:disabled { opacity: .6; }
.pr-kbd { display: none; }
.pr-keys { display: none; }
.pr-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* v1.7 큰 글자: 동작 바 내용 폭이 글자 기준 17em 보다 좁으면(390px 에서 글자 22px 이상) 평가 바를 2×2 로, 키 힌트는 숨김 */
@container (max-width: 17em) {
  .pr-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-rate .pr-kbd { display: none; }
  .pr-fb { grid-template-columns: 1fr; }
}
.pr-rate { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 4px; border: 0; border-radius: var(--pr-radius-card); background: var(--rt-tint); color: var(--rt-text); transition: transform var(--pr-dur-micro), background var(--pr-dur-micro); }
.pr-rate .lbl { font-size: var(--t-head); font-weight: 700; }
.pr-rate .iv { font-size: var(--t-cap); font-weight: 500; opacity: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-rate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 var(--pr-radius-card) var(--pr-radius-card); background: var(--rt); opacity: .9; }
/* 눌림: 흰 글자+원색(orange 2.2:1·green 2.0:1)이 아니라 틴트를 짙게 + 2px 링. 글자색은 그대로 4.5:1 이상 */
.pr-rate:active, .pr-rate.pressed { transform: scale(.97); background: color-mix(in srgb, var(--rt) 20%, transparent); box-shadow: inset 0 0 0 2px var(--rt); }
.pr-rate:disabled { opacity: .55; }
.pr-rate:focus-visible { outline-offset: 1px; }
.pr-summary-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 8px; }
.pr-summary-actions .btn { min-height: 52px; border-radius: var(--pr-radius-card); }
.pr-summary-actions .btn.secondary { gap: 6px; }

/* 세션 요약 */
.pr-summary { padding: 8px 0 0; }
.pr-sum-icon { display: flex; justify-content: center; color: var(--study, var(--pr-study)); margin: 24px 0 8px; }
.pr-sum-icon svg { width: 56px; height: 56px; stroke-width: 1.4; }
.pr-summary h2 { margin: 0; text-align: center; font-size: var(--t-num); font-weight: 700; letter-spacing: -.02em; }
.pr-sum-sub { text-align: center; color: var(--label-2); font-size: var(--t-foot); margin: 4px 0 24px; }
.pr-sum-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5em), 1fr)); gap: 12px; margin: 0 0 24px; }
.pr-summary .group { margin: 0; }
.pr-dist { padding: 12px 16px; display: grid; gap: 12px; }
.pr-dist-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 2.2em; align-items: center; gap: 12px; font-size: var(--t-foot); }
.pr-dist-row .lbl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--label); font-weight: 500; }
.pr-dist-row .lbl i { width: 9px; height: 9px; border-radius: 50%; background: var(--rt); display: inline-block; }
.pr-dist-row .bar { height: 12px; border-radius: var(--radius-xxs); background: var(--fill-4); overflow: hidden; display: block; }
.pr-dist-row .fill { display: block; height: 100%; background: var(--rt); border-radius: 0 var(--radius-xxs) var(--radius-xxs) 0; min-width: 0; transition: width var(--pr-dur-enter) var(--pr-ease-out); }
.pr-dist-row .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 899px) {
  .pr-body { padding: 12px 16px 8px; }
  .pr-card { padding: 12px 16px; }
  .pr-q { font-size: var(--t-title); }
  .pr-rate .lbl { font-size: var(--t-body); }
  .pr-sum-tiles { gap: 8px; }
  .pr-summary h2 { font-size: var(--t-num-sm); }
}
@media (min-width: 900px) {
  .pr-head { padding-left: 16px; padding-right: 16px; min-height: 56px; }
  .pr-body { padding: 32px 24px 16px; }
  .pr-q { font-size: var(--t-num-sm); }
  .pr-card { padding: 24px 24px 20px; }
  .pr-sec { padding: 16px 24px; }
  .pr-actions { padding: 12px 24px calc(12px + var(--safe-b)); }
  .pr-reveal { min-height: 56px; }
  /* 키 힌트 칩: 채움 위에 반투명 '잉크'(검정 18%)를 얹어 라이트(흰 글자)·다크(짙은 글자) 모두 대비가 오른다(흰 22% 는 라이트 3.0·다크 1.6) */
  .pr-kbd { display: inline-block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--t-cap2); font-weight: 600; padding: 2px 6px; border-radius: var(--radius-xxs); background: var(--overlay-ink); color: inherit; }
  /* v1.7: 틴트 채움 위 틴트 칩은 3.3~3.9:1 이라 채움 없이 테두리만(글자색 = 라벨색과 같아 ≥ 4.5:1) */
  .pr-rate .pr-kbd { right: 8px; top: 8px; transform: none; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); font-size: var(--t-tab); padding: 1px 5px; }
  .pr-rate:active .pr-kbd, .pr-rate.pressed .pr-kbd { background: color-mix(in srgb, var(--rt) 30%, transparent); }
  .pr-keys { display: flex; justify-content: center; gap: 16px; margin-top: 8px; font-size: var(--t-cap); color: var(--label-2); }
  .pr-keys kbd { font-family: var(--font-mono); font-size: var(--t-cap2); padding: 1px 5px; border-radius: var(--radius-xxs); background: var(--fill-3); color: var(--label); margin-right: 4px; }
  .pr-rate { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-view, .pr-answer { animation: none; }
  .pr-fill, .pr-rate, .pr-dist-row .fill { transition: none; }
  .pr-scroll { scroll-behavior: auto; }
}
/* 연습 중(html.practicing) 토스트는 하단 동작 바 위로 */
html.practicing #toast-root { padding-bottom: calc(128px + var(--safe-b)) !important; } /* 동작 바(평가 4단 ≤ 100px) 위 ≥ 24px */

/* ===== 녹음 ===== */
.recorder { display: grid; gap: 8px; }
.rec-row { display: flex; align-items: center; gap: 12px; }
.rec-btn { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--accent-tint); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; transition: background var(--pr-dur-micro), color var(--pr-dur-micro); }
.rec-btn svg { width: 24px; height: 24px; }
.rec-btn:disabled { opacity: .45; }
@media (hover: hover) { .rec-btn:not(:disabled):hover { background: var(--accent-bg); color: var(--on-accent); } }
.recorder.recording .rec-btn { background: var(--red-bg); color: var(--on-color); animation: rec-pulse 1.6s ease-in-out infinite; } /* 1.6s 맥동 = 녹음 중 주의 표시(기능적) */
.recorder.recording .rec-btn svg.fill { fill: currentColor; }
@keyframes rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 35%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
.rec-main { flex: 1; min-width: 0; }
.rec-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: var(--t-foot); color: var(--label-2); margin-bottom: 8px; }
.rec-time { font-size: var(--t-head); font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
.rec-status { margin-left: auto; font-size: var(--t-cap); }
.recorder.recording .rec-status { color: var(--red-text); font-weight: 600; }
.rec-bar { height: 6px; border-radius: 3px; background: var(--fill-3); overflow: hidden; }
.rec-fill { height: 100%; width: 0; background: var(--accent); transition: width var(--pr-dur-enter) linear; }
.recorder.recording .rec-fill { background: var(--study, var(--pr-study)); }
.recorder.over .rec-fill { background: var(--red); }
.recorder.over .rec-time { color: var(--red-text); }
.rec-msg { font-size: var(--t-foot); color: var(--red-text); line-height: 1.45; padding: 8px 12px; border-radius: var(--pr-radius-ctl); background: var(--red-tint); }
.rec-msg.info { color: var(--label-2); background: var(--fill-4); }
.rec-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline, .5px) solid var(--separator); }
.rec-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: var(--hairline, .5px) solid var(--separator); }
.rec-item:last-child { border-bottom: 0; }
.rec-play { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fill-3); color: var(--label); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; position: relative; }
.rec-play::after { content: ""; position: absolute; inset: -4px; }
.rec-play svg { width: 18px; height: 18px; }
.rec-play svg.fill { fill: currentColor; stroke: none; }
.rec-item.playing .rec-play { background: var(--accent-bg); color: var(--on-accent); }
.rec-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rec-date { font-size: var(--t-sub); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-date .rel { color: var(--label-2); font-weight: 400; }
.rec-sub { font-size: var(--t-cap); color: var(--label-2); font-variant-numeric: tabular-nums; }
.rec-del { color: var(--label-2); }
.rec-empty { padding: 12px 0; color: var(--label-2); font-size: var(--t-foot); }
.recorder.list-only .rec-list { border-top: 0; }
@media (hover: hover) { .rec-del:hover { color: var(--red-fg); background: var(--red-tint); } }
@media (prefers-reduced-motion: reduce) { .recorder.recording .rec-btn { animation: none; box-shadow: 0 0 0 3px var(--red-tint); } .rec-fill { transition: none; } }

/* 상세·인스펙터 안에 둘 때(카드 안) */
.card .recorder, .field .recorder { padding: 12px 16px; }
.inspector .recorder { padding: 8px 0; }

/* ===== v1.5 — 피드백 메모(답안을 연 상태, 평가 바 위) · 세션 요약 피드백 목록 ===== */
.pr-fb { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; margin-bottom: 10px; }
.pr-fb-l { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: var(--t-foot); font-weight: 600; color: var(--label-2); white-space: nowrap; }
.pr-fb-l svg { width: 16px; height: 16px; stroke-width: 2; }
.pr-kbd-inline { display: none; }
.pr-fb-in { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 11px 12px; border: 0; border-radius: var(--pr-radius-ctl); background: var(--fill-3); color: var(--label); font: inherit; font-size: var(--t-sub); line-height: 1.4; resize: none; outline: none; transition: background var(--pr-dur-micro); }
.pr-fb-in::placeholder { color: var(--placeholder); }
.pr-fb-in:focus { box-shadow: 0 0 0 2px var(--accent); background: var(--surface); }
.pr-fb-in:disabled { opacity: .6; }
@media (max-width: 899px) {
  .pr-fb { grid-template-columns: 1fr; gap: 0; margin-bottom: 8px; }
  .pr-fb-l { display: none; } /* 모바일: 자리표시자·aria-label 이 이름을 준다(세로 공간 절약) */
  .pr-fb-in { font-size: var(--t-body); }
}
@media (min-width: 900px) {
  .pr-kbd-inline { display: inline-block; font-family: var(--font-mono); font-size: var(--t-cap2); font-weight: 600; padding: 1px 5px; border-radius: var(--radius-xxs); background: var(--fill-3); color: var(--label); margin-left: 2px; }
}
/* 답안을 연 동안 동작 바가 높아지므로(메모 + 평가 4단) 토스트를 더 위로 */
html.practicing.pr-revealed #toast-root { padding-bottom: calc(196px + var(--safe-b)) !important; }
.pr-summary .pr-fb-sum { margin-top: 16px; }
.pr-fb-sum .fb-text { font-size: var(--t-body); }
.pr-sum-tiles .tile:first-child .s { white-space: normal; } /* "문항 n개 · 피드백 n건" 이 좁은 타일에서 잘리지 않게 두 줄 허용 */