/* practice.css, built by generator/practice.py: the question rules of worksheet.css scoped under .pp, then styles/practice.css */
.pp{--paper:#FBF7EE;          
  --card:#FFFDF8;           
  --line:#D8D0C0;           
  --line-strong:#B9AE98;
  --ink:#2A2723; --muted:#6E665A;

  
  --primary:#1F5F5B; --primary-soft:#E3ECE8; --primary-mid:#B9D0CA;
  --accent:#D9A21B;  --accent-ink:#8F6A0C; --accent-soft:#F6EBCB;
  --warn:#B8432F;    --warn-soft:#F4E1D9;
  --correct:#4F7A28; --correct-soft:#E8EEDA;
  --marker:rgba(236,190,55,.55);            
  --marker-edge:rgba(236,190,55,.30);

  
  --lv1-bg:var(--card);         --lv1-ink:var(--primary); --lv1-border:var(--primary-mid);
  --lv2-bg:var(--primary-soft); --lv2-ink:var(--primary); --lv2-border:var(--primary-mid);
  --lv3-bg:var(--primary);      --lv3-ink:var(--card);    --lv3-border:var(--primary);

  
  
  --font-ko:"WS Sans KR","WS Symbols","WS Serif",sans-serif;
  --font-en:"WS Serif","WS Sans KR","WS Symbols",serif;
  --font-num:"WS Num","WS Sans KR",sans-serif;

  
  --fs-body:9.6pt; --fs-en:9.8pt;  --lh-body:1.55;
  --fs-small:8pt; --fs-note:8.3pt; --fs-kicker:8.5pt; --fs-sub:8.6pt; --fs-cell:8.8pt;
  --fs-band-num:34pt; --fs-h1:19pt; --fs-h2:13pt; --fs-h3:10.5pt; --fs-h4:9.3pt;
  --fs-sec-num:24pt;
  --fs-qno:18pt; --fs-stem:9.5pt; --fs-lv:7.5pt; --fs-typebar:10pt;
  --fs-pts:8.6pt; --fs-strategy:8.4pt;
  --fs-running:7pt; --fs-pageno:11pt;

  
  --radius:2px;             

  
  --indent:32px;            
  --col-gap:20px;
  --blank:62px; --blank-w:110px; --blank-l:150px; --blank-xl:200px;
  --answer-line-h:20px;
  --opt-gutter:1.35em;      
  
  --q-gap:7.2px; --pass-my:4px; --pass-pad-y:4.8px;
  --typebar-mt:3.2px; --typebar-mb:6.4px;
  --strategy-mt:4.8px; --strategy-pad-y:4px;
  
  --a-gap:6px; --ans-grid-gap:4px; --ans-grid-mb:10px; --check-mt:8px; --endnote-mt:6px;
  --fs-answer:8.8pt; --lh-answer:1.4;}
.pp .en{font-family:var(--font-en);font-size:var(--fs-en)}
.pp .en .en{font-size:inherit}
.pp b.en, .pp .en b{font-weight:700}
.pp .lbl-sq{display:inline-block;background:var(--primary);color:var(--card);font-weight:700;font-size:var(--fs-lv);
  line-height:1.5;padding:0 5px;border-radius:var(--radius);margin-right:6px;vertical-align:1px;white-space:nowrap}
.pp mark{color:inherit;background-color:transparent;padding:0 .12em;margin:0 -.04em;
  background-image:linear-gradient(100deg, transparent 0, var(--marker-edge) 1.5%, var(--marker) 4%, var(--marker) 95%, var(--marker-edge) 98.5%, transparent 100%);
  background-repeat:no-repeat;background-size:100% 45%;background-position:0 92%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.pp .tq{break-inside:avoid}
.pp .typebar{display:flex;align-items:flex-end;border-bottom:1.5px solid var(--primary);margin:var(--typebar-mt) 0 var(--typebar-mb)}
.pp .cols > .tq:not(:first-child) .typebar{margin-top:calc(var(--typebar-mt) + 6px)}
.pp .typebar .t{font-weight:800;font-size:9pt;background:var(--primary);color:var(--card);border-radius:var(--radius) var(--radius) 0 0;padding:3px 10px 2px}
.pp .typebar .t{flex:none}
.pp .typebar .name{font-weight:800;font-size:var(--fs-typebar);color:var(--primary);padding:0 8px 2px;flex:1;line-height:1.3}
.pp .typebar .freq{font-size:var(--fs-small);color:var(--accent-ink);white-space:nowrap}
.pp .typebar .freq{padding-bottom:2px}
.pp .cols{columns:2;column-gap:var(--col-gap);column-rule:1px solid var(--line)}
.pp .qq{break-inside:avoid;margin:0 0 var(--q-gap)}
.pp .qq .head{display:flex;gap:6px;align-items:flex-start}
.pp .qq .no{font-family:var(--font-num);font-size:var(--fs-qno);font-weight:600;color:var(--primary);line-height:.95;min-width:26px}
.pp .qq .stem{font-weight:700;font-size:var(--fs-stem)}
.pp .lv{display:inline-block;font-size:var(--fs-lv);font-weight:800;border-radius:var(--radius);padding:0 4px;margin-right:5px;vertical-align:1px;line-height:1.45;border:1px solid}
.pp .lv.l1{background:var(--lv1-bg);color:var(--lv1-ink);border-color:var(--lv1-border)}
.pp .lv.l2{background:var(--lv2-bg);color:var(--lv2-ink);border-color:var(--lv2-border)}
.pp .lv.l3{background:var(--lv3-bg);color:var(--lv3-ink);border-color:var(--lv3-border)}
.pp .hot{display:inline-block;font-size:var(--fs-lv);font-weight:800;background:var(--warn);color:var(--card);border-radius:var(--radius);padding:0 4px;margin-left:4px;vertical-align:1px;line-height:1.45}
.pp .pass{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pass-pad-y) 9px;margin:var(--pass-my) 0 var(--pass-my) var(--indent)}
.pp .pass.ko{font-size:9pt}
.pp .opts{margin:3px 0 0 var(--indent);display:grid;grid-template-columns:1fr 1fr;gap:1px 10px}
.pp .opts.one{grid-template-columns:1fr}
.pp .opts.three{grid-template-columns:1fr 1fr 1fr}
.pp .opts .opt{display:flex;align-items:baseline}
.pp .opts .cn{flex:none;width:var(--opt-gutter)}
.pp .opts .ot{flex:1;min-width:0}
.pp .resp{margin-left:var(--indent)}
.pp .blank{display:inline-block;min-width:var(--blank);border-bottom:1px solid var(--ink);height:1em}
.pp .blank.w{min-width:var(--blank-w)}
.pp .blank.l{min-width:var(--blank-l)}
.pp .blank.xl{min-width:var(--blank-xl)}
.pp .blank.full{min-width:100%}
.pp .line{border-bottom:1.2px dotted var(--line-strong);height:var(--answer-line-h);margin:0 0 0 var(--indent)}
.pp .u{text-decoration:underline;text-underline-offset:2px}
.pp .bogi, .pp .cond{position:relative;margin:10px 0 5px var(--indent);border-radius:var(--radius);padding:7px 9px 4px;background:var(--card)}
.pp .bogi{border:1px solid var(--line-strong)}
.pp .cond{border:1px dashed var(--line-strong);font-size:var(--fs-sub)}
.pp .bogi > .lbl, .pp .cond > .lbl{position:absolute;top:-.8em;left:8px;padding:0 4px;line-height:1.5;font-size:var(--fs-small);font-weight:800;color:var(--primary);
  background:linear-gradient(var(--paper) 50%, var(--card) 50%);font-family:var(--font-ko)}
.pp table.data{border-collapse:collapse;margin:5px 0 5px var(--indent);width:calc(100% - var(--indent));font-size:var(--fs-cell);background:var(--card)}
.pp table.data th, .pp table.data td{border:1px solid var(--line);padding:3px 6px;text-align:left}
.pp table.data th{background:var(--primary-soft)}
.pp .pts{font-weight:700;font-size:var(--fs-pts);white-space:nowrap;color:var(--accent-ink)}
.pp .strategy{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:var(--strategy-pad-y) 9px;margin:var(--strategy-mt) 0 2px var(--indent);font-size:var(--fs-strategy)}
.pp .strategy .st-h{margin-bottom:2px}
.pp .strategy .st-h .lbl-sq{background:var(--accent-ink)}
.pp .strategy p{margin:1px 0}
.pp .strategy .st-k{display:inline-block;font-weight:700;font-size:var(--fs-lv);color:var(--muted);border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);padding:0 3px;margin-right:4px;vertical-align:1px}
.pp .grp{break-inside:avoid}
.pp .grp > .pass{margin-left:0;margin-bottom:8px}
.pp .typebar.tb .t{padding:3px 12px 2px}
.pp .nw{white-space:nowrap}
.pp .opt{word-break:keep-all;overflow-wrap:break-word}
.pp .cond{word-break:keep-all;overflow-wrap:break-word}

/* =====================================================================
   문제 풀기 (practice), hand-written part (P002; docs/practice.md §9).
   generator/practice.py puts the scoped question rules of worksheet.css BEFORE this file (tokens and components under
   .pp), so everything here may use the worksheet tokens. Paper mode = the worksheet look at screen sizes; Focus mode
   (.pf-*) = the site's look (site.css tokens: --navy, --line-2 …). Marks ○ ／ are --red in both modes and always come
   with a text label. No library, no gradients, corners 0-4px.
   ===================================================================== */

.pp-head { margin: 4px 0 14px; }
.pp-h1 { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 800; letter-spacing: -0.8px; }
.pp-noscript { margin: 0 0 16px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: 15px; }
.pp-privacy { margin: 18px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- tokens on screen (the worksheet's pt sizes are for A4) ---------- */
.pp {
  --red: #C8102E;
  --fs-body: 15px; --fs-en: 16.5px; --lh-body: 1.6;
  --fs-small: 12.5px; --fs-note: 13px; --fs-kicker: 13px; --fs-sub: 14px; --fs-cell: 14px;
  --fs-qno: 28px; --fs-stem: 15.5px; --fs-lv: 12px; --fs-typebar: 16px; --fs-pts: 13px; --fs-strategy: 13px;
  --font-ko: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-en: Georgia, "Times New Roman", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-num: var(--font-ko);
  --indent: 40px; --q-gap: 18px; --col-gap: 36px; --pass-my: 8px; --pass-pad-y: 9px; --typebar-mt: 8px; --typebar-mb: 12px;
  --blank: 84px; --blank-w: 124px; --blank-l: 170px; --blank-xl: 240px; --opt-gutter: 1.7em;
  --strategy-mt: 8px; --strategy-pad-y: 7px;
  position: relative; color: var(--ink); font-family: var(--font-ko); font-size: var(--fs-body); line-height: var(--lh-body);
  word-break: keep-all; overflow-wrap: break-word;
}
.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
.pp .typebar .t { font-size: 14px; padding: 4px 12px 3px; }
.pp .pass.ko { font-size: 14.5px; }
.pp .qq .no { min-width: 38px; position: relative; display: inline-block; text-align: center; font-weight: 700; }
.pp .qq .head { gap: 8px; }
.pp .qq { break-inside: avoid; scroll-margin-top: 120px; }
.pp .cols { columns: 1; column-rule: 0; }
.pp .grp { break-inside: avoid; }
.pp .tq { break-inside: avoid; }
.pp .bogi > .lbl, .pp .cond > .lbl { font-family: var(--font-ko); }
.pp .en, .pp .pass.en, .pp .resp { font-family: var(--font-en); font-size: var(--fs-en); }
.pp .blank { height: auto; }

/* ---------- Paper mode: the sheet ---------- */
.pp-sheet { background: var(--paper); border: 1px solid var(--line); padding: 22px 16px 14px; margin-top: 10px; }
@media (min-width: 640px) { .pp-sheet { padding: 26px 32px 18px; } }
@media (min-width: 1000px) { .pp[data-mode="paper"] .cols { columns: 2; column-gap: var(--col-gap); column-rule: 1px solid var(--line); } }

/* ---------- the unit bar ---------- */
.pp-bar { position: sticky; top: 0; z-index: 30; background: var(--bg, #fff); border: 1px solid var(--line-2); border-radius: 2px;
          padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pp-bar__title { font-weight: 800; font-size: 15px; letter-spacing: -0.4px; }
.pp-bar__sp { flex: 1; min-width: 4px; }
.pp-switch { display: inline-flex; border: 1px solid var(--navy); border-radius: 2px; overflow: hidden; }
.pp-switch button { min-height: 44px; min-width: 76px; padding: 0 14px; border: 0; background: #fff; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.pp-switch button + button { border-left: 1px solid var(--navy); }
.pp-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.pp-prog { font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 14px; }
.pp-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.pp-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--ink-2, #4B515C); border-radius: 2px; background: #fff; color: var(--ink);
          font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pp-btn:hover { background: var(--bg-2, #F7F8FA); text-decoration: none; color: var(--ink); }
.pp-btn--solid { background: var(--navy-deep, #0F1E46); border-color: var(--navy-deep, #0F1E46); color: #fff; }
.pp-btn--solid:hover { background: var(--navy, #1F3C88); color: #fff; }
.pp-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pp-notice { margin: 8px 0 0; padding: 8px 12px; border: 1px dashed var(--line-3, #C9CFDA); background: var(--bg-2, #F7F8FA); font-size: 14px; }
.pp-confirm { margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--ink); background: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pp-confirm p { margin: 0; flex: 1; min-width: 200px; font-weight: 700; }
.pp-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- inside a question: inputs, options, marks, tools, the answer slip ---------- */
.pp input.pq-text { font: inherit; font-family: var(--font-en); font-size: var(--fs-en); line-height: 1.3; color: var(--ink); background-color: transparent;
                    border: 0; border-radius: 0; height: 44px; margin: -10px 0; padding: 0 4px; vertical-align: baseline; max-width: 100%;
                    /* the printed blank: one rule under the text, a 44px hit area around it */
                    background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 100% 1.5px; background-position: 0 calc(50% + .72em); }
.pp input.pq-text:focus-visible, .pp textarea.pq-area:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; background-color: #fff; }
.pp input.pq-text.full { display: block; width: 100%; margin: -4px 0; }
.pp textarea.pq-area { display: block; width: calc(100% - var(--indent)); margin: 6px 0 0 var(--indent); font-family: var(--font-en); font-size: var(--fs-en);
                       line-height: 1.6; background: var(--card); border: 1px solid var(--line-strong); border-radius: 2px; padding: 8px 10px; min-height: 96px; resize: vertical; color: var(--ink); }
.pp .pq-hideline { display: none; }
.pp label.opt { cursor: pointer; min-height: 44px; align-items: center; padding: 2px 6px 2px 0; position: relative; }
.pp label.opt .cn { font-size: 1.05em; }
.pp label.opt input.pq-in { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; left: 0; top: 0; cursor: pointer; }
.pp label.opt:focus-within { outline: 3px solid var(--accent); outline-offset: 1px; }
.pp label.opt.is-picked .cn { font-weight: 900; color: var(--primary); }
.pp label.opt.is-picked .ot, .pp label.opt.is-picked .cn { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--primary); }
.pp label.opt.is-picked { background: var(--primary-soft); }
.pp .pq-tag { flex: none; margin-left: 8px; font-family: var(--font-ko); font-size: 12px; font-weight: 800; padding: 0 5px; border: 1px solid; border-radius: 2px; line-height: 1.5; }
.pp .pq-tag--right { color: var(--correct); border-color: var(--correct); background: var(--correct-soft); }
.pp .pq-tag--wrong { color: var(--red); border-color: var(--red); background: #fff; }
.pp .opts.pq-inp .opt .ot { display: none; }
.pp .opts.pq-inp { grid-template-columns: repeat(5, minmax(44px, 1fr)); }

.pp .pq-mark { position: absolute; left: -6px; top: -10px; width: 52px; height: 48px; pointer-events: none; color: var(--red);
               font-family: var(--font-ko); font-weight: 400; font-size: 48px; line-height: 48px; text-align: center; display: none; }
.pp .pq-mark[data-s="right"], .pp .pq-mark[data-s="wrong"] { display: block; }
.pp .pq-mark[data-s="wrong"] { font-size: 54px; }
.pp .pq-tools { margin: 8px 0 0 var(--indent); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp .pq-slip { margin: 8px 0 4px var(--indent); padding: 9px 12px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
               font-size: 14px; line-height: 1.55; }
.pp .pq-slip[data-s="right"] { border-left-color: var(--correct); }
.pp .pq-slip[data-s="wrong"] { border-left-color: var(--red); }
.pp .pq-slip[data-s="pending"] { border-left-color: var(--accent); }
.pp .pq-slip p { margin: 3px 0; }
.pp .pq-badge { display: inline-block; font-weight: 800; font-size: 13px; padding: 0 7px; border: 1px solid; border-radius: 2px; margin-right: 8px; }
.pp .pq-badge--right { color: var(--correct); border-color: var(--correct); background: var(--correct-soft); }
.pp .pq-badge--wrong { color: var(--red); border-color: var(--red); background: #fff; }
.pp .pq-badge--pending { color: var(--accent-ink); border-color: var(--accent-ink); background: var(--accent-soft); }
.pp .pq-k { display: inline-block; font-weight: 700; font-size: 12px; color: var(--muted); border: 1px solid var(--line); background: var(--paper);
            border-radius: 2px; padding: 0 4px; margin-right: 6px; vertical-align: 1px; }
.pp .pq-ans { font-weight: 800; color: var(--red); }
.pp .pq-hint { color: var(--muted); font-size: 13px; }
.pp .pq-selfbtns { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pp .pq-selfbtns .pp-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- the end of the sheet: 채점표, 유형별 결과 ---------- */
.pp-result { margin-top: 22px; padding: 18px 16px; background: var(--paper); border: 1px solid var(--line); }
@media (min-width: 640px) { .pp-result { padding: 22px 32px; } }
.pp-result h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--primary); letter-spacing: -0.4px; }
.pp-result h2 + .pp-score, .pp-result .pp-score { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.pp-result .pp-pend { margin: 0 0 10px; color: var(--accent-ink); font-weight: 700; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; margin: 6px 0 18px; padding: 0; list-style: none; }
.pp-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 4px 4px; border: 1px solid var(--line);
           background: var(--card); border-radius: 2px; color: var(--ink); text-decoration: none; font-size: 12.5px; line-height: 1.3; cursor: pointer; font-family: inherit; }
.pp-cell:hover { background: #fff; text-decoration: none; color: var(--ink); }
.pp-cell b { font-weight: 800; font-size: 15px; color: var(--primary); font-variant-numeric: tabular-nums; }
.pp-cell .m { color: var(--red); font-weight: 800; font-size: 15px; line-height: 1; }
.pp-cell[data-s="right"] { border-color: var(--correct); }
.pp-cell[data-s="wrong"] { border-color: var(--red); }
.pp-cell[data-s="pending"] { border-color: var(--accent-ink); background: var(--accent-soft); }
.pp-cell[aria-current="true"] { outline: 3px solid var(--navy); outline-offset: 1px; }
.pp-types { margin: 6px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pp-types li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.pp-types .t { font-weight: 700; }
.pp-types .t small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.pp-bar2 { grid-column: 1 / -1; height: 10px; background: var(--line); border-radius: 2px; overflow: hidden; }
.pp-bar2 > i { display: block; height: 100%; background: var(--primary); }
.pp-types .w { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink); }
.pp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- Focus mode: one question per screen, the site's look ---------- */
.pp[data-mode="focus"] {
  --paper: #FFFFFF; --card: #F7F8FA; --line: #E6E8EC; --line-strong: #C9CFDA; --ink: #1F2329; --muted: #80858F;   /* = site.css */
  --primary: #1F3C88; --primary-soft: #E9EEF8; --primary-mid: #C5D0E8; --accent: #1F3C88; --accent-ink: #1F3C88; --accent-soft: #FFF8CC;
  --correct: #1F6B3A; --correct-soft: #E7F3EA;
}
.pf-only { display: none; }
.pp[data-mode="focus"] .pf-only { display: block; }
.pp[data-mode="focus"] .cols > *:not(.pf-in) { display: none; }
.pp[data-mode="focus"] .qq:not(.pf-cur) { display: none; }
.pp[data-mode="focus"] .typebar { display: none; }
.pp[data-mode="focus"] .pp-sheet { border-color: var(--line-2); border-radius: 2px; padding: 22px 16px 16px; }
@media (min-width: 640px) { .pp[data-mode="focus"] .pp-sheet { padding: 28px 40px 22px; } }
.pp[data-mode="focus"] .grp-h { font-size: 15px; }
.pp[data-mode="focus"] .pp-result { border-color: var(--line-2); background: #fff; }
.pp[data-mode="focus"][data-view="result"] .pp-sheet, .pp[data-mode="focus"][data-view="result"] .pf-row, .pp[data-mode="focus"][data-view="result"] .pf-type,
.pp[data-mode="focus"][data-view="result"] .pf-list { display: none; }
.pp[data-mode="focus"][data-view="card"] .pp-result { display: none; }
.pp[data-mode="paper"] .pf-row, .pp[data-mode="paper"] .pf-type, .pp[data-mode="paper"] .pf-list { display: none; }
.pf-type { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--navy); font-size: 15px; }
.pf-type b { background: var(--navy); color: #fff; padding: 2px 10px; border-radius: 2px; font-size: 13px; }
.pf-type .st { color: var(--accent-ink); font-weight: 400; }
.pf-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pf-row .sp { flex: 1; }
.pf-filter { margin: 8px 0 0; padding: 8px 12px; background: var(--hl-pale, #FFF8CC); border: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.pf-list { margin-top: 10px; padding: 12px; border: 1px solid var(--line-2); background: #fff; }
.pf-list .pp-grid { margin: 0; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.pf-list[hidden] { display: none; }
@media (max-width: 700px) {
  .pf-list { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; max-height: 55vh; overflow: auto; border-width: 2px 0 0; box-shadow: 0 -4px 0 rgba(15,30,70,.08); }
  .pp .pp-bar { position: static; }
  .pp-h1 { font-size: 22px; }
  .pp .pq-tools, .pp .pq-slip { margin-left: 0; }
  .pp textarea.pq-area { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pp * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- small fixes ---------- */
.pp [hidden] { display: none !important; }
.pp input.pq-text { width: max(var(--blank), var(--need, 0ch)); min-width: var(--blank); }
.pp input.pq-text.w { width: max(var(--blank-w), var(--need, 0ch)); min-width: var(--blank-w); }
.pp input.pq-text.l { width: max(var(--blank-l), var(--need, 0ch)); min-width: var(--blank-l); }
.pp input.pq-text.xl { width: max(var(--blank-xl), var(--need, 0ch)); min-width: var(--blank-xl); }
.pp input.pq-text.full { width: 100%; }

/* a tagged option (정답 / 오답) in one column on a phone, so the tag never squeezes the option text */
@media (max-width: 479px) { .pp .opts.pq-tagged { grid-template-columns: 1fr !important; } }

/* P006: per-blank marks after a wrong answer with several blanks (symbol + hidden text, never colour alone) */
.pp .pq-bm { color: var(--red); font-family: var(--font-ko); font-weight: 800; font-size: 14px; margin-left: 2px; }
.pp .pq-bm[data-s="right"] { color: var(--correct); }
.pp .pq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp input.pq-bad { background-image: linear-gradient(var(--red), var(--red)); }
.pp input.pq-ok { background-image: linear-gradient(var(--correct), var(--correct)); }