/* HanziPeek · 韩文结构视觉学习法（한글 짜임）· 依据 UI 设计规范 v1.0，并入站点体系 */
.ko-root{--ko-i:#2f6a8a;--ko-m:#b8661c;--ko-f:#4f7a3a;--ko-ink:#1c1a17;--ko-sub:#6b665d;--ko-line:#e4e0d6;--ko-bg:#fbfaf6;--ko-card:#fffefb;--ko-acc:#b23a26;
  font-family:"Noto Sans SC","Noto Sans KR",system-ui,sans-serif;color:var(--ko-ink);background:#f6f4ef;border-radius:16px;padding:14px;outline:none}
.ko-root [lang=ko],.ko-root b,.ko-root .ko-cand b,.ko-root .ko-jamo b{font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif}
.ko-root .ko-composed b,.ko-root .ko-cand b,.ko-root .ko-card-big b,.ko-root .ko-slot b{font-family:"Noto Serif KR","Noto Sans KR",serif}
.ko-root button{font-family:inherit;cursor:pointer}
.ko-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ko-title b{font-size:20px;font-family:"Noto Serif KR",serif;margin-right:8px}
.ko-title span{font-size:13px;color:var(--ko-sub)}
.ko-opt{font-size:12px;color:var(--ko-sub);display:inline-flex;align-items:center;gap:4px}
.ko-mode{margin:0}
.ko-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){.ko-cols{grid-template-columns:1fr}}
.ko-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.ko-panel{background:var(--ko-card);border:1px solid var(--ko-line);border-radius:14px;padding:10px 12px;opacity:.75}
.ko-panel.active{opacity:1;border-color:var(--slot);box-shadow:0 0 0 2px color-mix(in srgb,var(--slot) 18%,transparent)}
.ko-panel.done{opacity:1}
.ko-panel-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600;font-size:14px}
.ko-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--slot,#1c1a17);color:#fff;font-size:12px;font-weight:700}
.ko-panel.done .ko-n{background:var(--slot)}
.ko-groups{display:flex;flex-direction:column;gap:6px}
.ko-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ko-gl{font-size:11px;color:var(--ko-sub);min-width:34px}
.ko-jamo{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;height:60px;padding:0 6px;border:2px solid var(--ko-line);border-radius:8px;background:#fff;color:var(--ko-ink);transition:opacity .15s,border-color .15s;position:relative}
.ko-jamo b{font-size:26px;line-height:1;font-weight:500}
.ko-jamo small{font-size:10px;color:var(--ko-sub);margin-top:2px}
.ko-jamo:hover{border-color:#b9b2a3}
.ko-jamo.on b{font-weight:700}
.ko-jamo.dim{opacity:.35}
.ko-jamo.big{min-width:64px;height:68px}.ko-jamo.big b{font-size:32px}
.ko-none b{font-size:15px;font-weight:600}
.ko-star{position:absolute;top:-6px;right:-4px;font-style:normal;font-size:11px;color:var(--ko-acc)}
.ko-licon{position:relative;display:inline-block;width:26px;height:26px;border:1px solid var(--ko-line);border-radius:4px;background:#fff;margin-right:2px}
.ko-licon i{position:absolute;display:block;border-radius:2px}
/* 字块 */
.ko-block-wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px;background:var(--ko-card);border:1px solid var(--ko-line);border-radius:14px}
.ko-block{position:relative;width:168px;height:168px;background:#fff;border:2px solid var(--ko-line);border-radius:12px}
.ko-block.big{width:220px;height:220px}
.ko-slot{position:absolute;display:flex;align-items:center;justify-content:center;border:2px dashed var(--ko-line);border-radius:8px;font-size:11px;color:#9a948a;box-sizing:border-box}
.ko-slot.filled{border:2px solid var(--slot);background:color-mix(in srgb,var(--slot) 12%,#fff);color:var(--slot);cursor:pointer}
.ko-slot.filled b{font-size:40px;line-height:1}
.ko-block.big .ko-slot.filled b{font-size:54px}
.ko-slot.ghost{pointer-events:none;border-style:dotted;background:transparent;opacity:.6}
.ko-eq{font-size:28px;color:#9a948a}
.ko-composed{display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border-radius:14px;background:#eeebe3;color:#9a948a}
.ko-composed.ok{background:var(--ko-ink);color:#fff}
.ko-composed b{font-size:72px;line-height:1}
.ko-composed small{font-family:"IBM Plex Mono",monospace;font-size:13px;opacity:.8}
.ko-q{font-size:56px}
.ko-status{font-size:15px;line-height:1.5;color:var(--ko-ink);padding:4px 2px}
.ko-layout-note{font-size:12px;color:var(--ko-sub)}
.ko-acts{display:flex;gap:8px}
.ko-spk{border:0;background:#f3efe6;border-radius:50%;width:32px;height:32px;font-size:15px;color:var(--ko-ink);display:inline-flex;align-items:center;justify-content:center}
.ko-spk.light{background:rgba(255,255,255,.2);color:#fff}
.ko-spk.lg{width:40px;height:40px;font-size:18px}
.ko-composed .ko-spk{margin-top:4px;width:26px;height:26px;font-size:12px}
/* 候选 */
.ko-cands{background:var(--ko-card);border:1px solid var(--ko-line);border-radius:14px;padding:10px 12px}
.ko-sec-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:8px}
.ko-sec-t small{color:var(--ko-sub);font-weight:400}
.ko-cand-row{display:flex;flex-wrap:wrap;gap:8px}
.ko-cand{display:inline-flex;flex-direction:column;align-items:center;min-width:56px;padding:6px 8px;border:2px solid var(--ko-line);border-radius:10px;background:#fff;color:var(--ko-ink)}
.ko-cand b{font-size:32px;line-height:1.1;font-weight:500}
.ko-cand small{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ko-sub)}
.ko-cand:hover,.ko-cand:focus{border-color:var(--ko-ink);outline:none}
.ko-cand.rare{opacity:.55}
.ko-cand.big{min-width:72px}.ko-cand.big b{font-size:42px}
/* 详情卡 */
.ko-card{background:#1c1a17;color:#f3efe6;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px}
.ko-card-top{display:flex;gap:16px;flex-wrap:wrap}
.ko-card-big{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:120px}
.ko-card-big b{font-size:92px;line-height:1}
.ko-card-big small{font-family:"IBM Plex Mono",monospace;font-size:14px;opacity:.75}
.ko-card-r{flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px}
.ko-gloss{font-size:15px;line-height:1.5}
.ko-card .ko-layout-note{color:#a8a196}
.ko-decomp{border-collapse:collapse;font-size:13px}
.ko-decomp td{padding:3px 10px 3px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.ko-decomp b{font-size:20px}
.ko-tip{font-size:12px;color:#f3b4a6}
.ko-card-acts{display:flex;gap:6px;flex-wrap:wrap}
.ko-card-acts .kp-act{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.ko-lex{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--ko-card);color:var(--ko-ink);border-radius:12px;padding:12px}
@media (max-width:640px){.ko-lex{grid-template-columns:1fr}}
.ko-words{display:flex;flex-direction:column;gap:6px}
.ko-word{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#fff;border:1px solid var(--ko-line);border-radius:8px;flex-wrap:wrap}
.ko-word b{font-size:20px;font-weight:500}
.ko-word small{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ko-sub)}
.ko-mean{font-size:13px;color:var(--ko-sub);flex:1}
.ko-root mark{background:transparent;color:var(--ko-acc);font-weight:700}
.ko-sent{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed var(--ko-line);font-size:17px}
.ko-sent-tr{width:100%;font-size:13px;color:var(--ko-sub);padding-left:40px}
.ko-kids-acts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;background:var(--ko-card);border-radius:12px;padding:8px}
/* 输入模式 */
.ko-input{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--ko-line);border-radius:12px;padding:8px 12px}
.ko-input-text{flex:1;min-height:32px;font-family:"Noto Sans KR",sans-serif;font-size:22px;line-height:1.5;word-break:break-all}
.ko-input-text u{font-family:"Noto Serif KR",serif;color:var(--ko-acc);text-decoration:underline}
.ko-caret{display:inline-block;width:2px;height:24px;background:var(--ko-acc);vertical-align:-4px;margin-left:1px;animation:koBlink 1s steps(2) infinite}
@keyframes koBlink{to{opacity:0}}
.ko-seq{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.ko-seq-it{border:1px solid var(--ko-line);background:#fff;border-radius:8px;font-size:22px;padding:2px 8px;font-family:"Noto Serif KR",serif}
.ko-danger{color:var(--ko-acc)}
/* 小学生版 */
.ko-root.kids{font-family:"Zen Maru Gothic","Noto Sans KR",sans-serif;border-radius:24px;background:#fffdf7}
.ko-root.kids .ko-panel{border-radius:20px;border-width:2px}
.ko-root.kids .ko-status{font-size:18px;font-weight:700}
.ko-root.kids .ko-cands{border-radius:20px}
.ko-root.kids .ko-card{background:#fff;color:var(--ko-ink);border:2px solid var(--ko-line)}
.ko-root.kids .ko-card-big b{font-size:110px}
.ko-root.kids .ko-spk.light{background:#f3efe6;color:var(--ko-ink)}
.ko-root.kids .ko-decomp td{border-color:var(--ko-line)}
.ko-root.kids .ko-lex{background:#fbfaf6}
/* 日常韩语 */
.ko-phr{margin-top:14px;background:var(--ko-card);border:1px solid var(--ko-line);border-radius:14px;padding:12px}
.ko-phr-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ko-phr-h .ko-sec-t{margin:0;flex:1;flex-wrap:wrap}
.ko-phr-cats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.ko-chip{display:inline-flex;flex-direction:column;align-items:center;padding:4px 12px;border:1px solid var(--ko-line);border-radius:999px;background:#fff;color:var(--ko-ink);font-size:14px;line-height:1.15;font-family:"Noto Sans KR",sans-serif}
.ko-chip small{font-size:10px;color:var(--ko-sub)}
.ko-chip.on{background:var(--ko-ink);color:#fff;border-color:var(--ko-ink)}.ko-chip.on small{color:#cfc9bd}
.ko-phr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.ko-phr-it{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;background:#fff;border:1px solid var(--ko-line);border-radius:10px}
.ko-phr-body{flex:1;min-width:0}
.ko-phr-ko{font-size:22px;line-height:1.5;word-break:keep-all}
.ko-syl{border:0;background:transparent;padding:0 1px;font:inherit;font-family:"Noto Sans KR",sans-serif;font-size:22px;color:var(--ko-ink);border-bottom:2px solid transparent;border-radius:3px}
.ko-syl:hover{background:#fff3ee;border-bottom-color:var(--ko-acc);color:var(--ko-acc)}
.ko-syl-x{font-size:22px}
.ko-phr-rom{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ko-sub)}
.ko-phr-tr{font-size:13px;margin-top:2px}
.ko-phr-tip{color:var(--ko-sub)}
.ko-more{border-style:dashed;opacity:.8}.ko-more b{font-size:24px;color:var(--ko-sub)}
/* ④ 拼句练习 / ⑤ 复习 / ⑥ 教学 */
.ko-phr-btns{display:flex;flex-direction:column;gap:4px}
.ko-build{font-size:14px}
.ko-pr{background:#fff8ee;border:2px solid #f0c9a8;border-radius:14px;padding:10px 12px}
.ko-pr-h{display:flex;align-items:center;gap:8px}
.ko-pr-h .ko-sec-t{margin:0}
.ko-pr-line{font-family:"Noto Sans KR",sans-serif;font-size:26px;line-height:1.6;margin:6px 0;word-break:keep-all}
.ko-pr-syl{display:inline-block;min-width:1.1em;text-align:center;border-bottom:3px solid #e4e0d6;margin:0 1px;color:#c9c3b7}
.ko-pr-syl.now{color:var(--ko-ink);border-bottom-color:var(--ko-acc);background:#fff;border-radius:4px 4px 0 0}
.ko-pr-syl.ok{color:var(--ko-f);border-bottom-color:var(--ko-f)}
.ko-pr-x{display:inline-block;color:var(--ko-sub)}
.ko-pr-msg{font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ko-pr-msg.ng{color:var(--ko-acc)}.ko-pr-msg.ok{color:var(--ko-f);font-weight:700}
.ko-pr-target{font-family:"Noto Serif KR",serif;font-size:34px;color:var(--ko-acc);line-height:1}
.ko-panel.todo{opacity:.55}.ko-panel.todo .ko-panel-h{margin:0}
.ko-panel-s{font-size:12px;color:var(--ko-sub);font-weight:400;margin-left:auto}
.ko-root .vi-review{background:#18a273;color:#fff;border:0;height:28px;border-radius:999px;padding:0 12px}
.ko-root .kp-play{outline:3px solid #ffd23f;outline-offset:2px}
.ko-rev{background:var(--ko-card);border:1px solid var(--ko-line);border-radius:16px;padding:16px;text-align:center;max-width:520px;margin:0 auto}
.ko-rev-n{display:flex;align-items:center;font-size:13px;color:var(--ko-sub)}
.ko-rev-big{font-family:"Noto Serif KR",serif;font-size:120px;line-height:1.1;margin:10px 0}
.ko-rev-rom{font-family:"IBM Plex Mono",monospace;font-size:22px;display:flex;justify-content:center;align-items:center;gap:8px}
.ko-rev-parts{display:flex;justify-content:center;gap:12px;font-size:28px;margin:8px 0}
.ko-rev-btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}
/* ⑦ 描红 / ⑧ 音变 */
.ko-trace{background:var(--ko-card);color:var(--ko-ink);border-radius:12px;padding:10px 12px}
.ko-trace .jp-strokes-h{display:flex;align-items:center;gap:6px}
.ko-trace .ko-sec-t{margin:0}
.ko-trace-holder{position:relative;width:220px;height:220px;margin:8px auto 0;background:#fff;border:2px solid var(--ko-line);border-radius:14px;overflow:hidden}
.ko-trace.kids .ko-trace-holder{width:260px;height:260px}
.ko-trace-svg{width:100%;height:100%;display:block}
.ko-ts{fill:none;stroke:#cfc9bd;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.ko-ts.anim{stroke:#1c1a17}
.ko-tn{font-size:6px;fill:var(--ko-acc);font-family:system-ui,sans-serif}
.ko-trace .kd-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.ko-trace .kd-trace-fb{font-size:14px;font-weight:700;color:#555;text-align:center;margin-top:8px;min-height:20px}
.ko-trace .kd-trace-marks{display:flex;justify-content:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.ko-trace .kd-mark{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;background:#f3efe6;color:#999}
.ko-trace .kd-mark.now{background:#ffe88a;color:#2b2b2b;box-shadow:0 0 0 3px #ffd23f}.ko-trace .kd-mark.ok{background:#2bb3a3;color:#fff}.ko-trace .kd-mark.ng{background:#ff5e5e;color:#fff}
.ko-pron{font-family:"Noto Sans KR",sans-serif;font-size:13px;color:var(--ko-acc)}
.ko-pron small{font-size:10px;color:var(--ko-sub);margin-left:2px}