/* StayKR 追加樣式（kr.css 是從 StayTW 複製的底，這裡覆蓋＋新增韓文專用元件） */
:root {
  --ac: #2A5CAA; --ac-soft: rgba(42,92,170,.09); --ac2: #C8343F;
  --serif: "Noto Serif KR", "AppleMyungjo", "Songti TC", serif;
  --ko: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
[data-theme="dark"] { --ac: #7FA8EE; --ac-soft: rgba(127,168,238,.12); --ac2: #F07B84; }
body { font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", var(--ko), sans-serif; }
[lang="ko"] { font-family: var(--ko); word-break: keep-all; }
.fc-word[lang="ko"], .vcard-w, .ws-w, .qz-word[lang="ko"], .ph-z, .kr-wod-w, .kr-letter-big, .kr-syl { font-family: var(--ko); font-weight: 700; }
.hd h1 img { width: 30px; height: 30px; }

/* 共用小元件 */
.kr-pr { color: var(--ac2); font-family: var(--ko); font-weight: 600; }
.kr-rr { color: var(--tx3); font-size: .92em; letter-spacing: .01em; }
.hj { font-family: "PingFang TC", "Noto Serif TC", "Songti TC", serif; color: var(--tx2); }
.vcard-py .hj, .fc-py .hj, .ws-p .hj, .qsub .hj, .kr-wod-s .hj { border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 4px; font-size: .92em; }
.kr-exm { color: var(--tx2); font-size: 13.5px; line-height: 1.7; margin-top: 3px; }
.kr-zh { font-family: inherit; }
.kr-learned { color: var(--ok); font-weight: 700; font-size: 13px; }
.kr-lead { color: var(--tx2); font-size: 14px; line-height: 1.8; margin: 0 0 10px; }
.kr-sub { color: var(--tx3); font-weight: 500; font-size: .85em; }
.kr-h { display: block; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.kr-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.kr-card > .kr-lead:last-child { margin-bottom: 0; }
.kr-sec { display: flex; flex-direction: column; gap: 10px; }
.kr-tabs { margin: 4px 0 16px; }
.kr-tagrow { max-height: 96px; overflow-y: auto; padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.kr-select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--tx); font: inherit; font-size: 14px; }
.kr-foot { margin-top: 6px; font-size: 12px; color: var(--tx3); }
.rd-empty { text-align: center; color: var(--tx3); padding: 40px 0; font-size: 14px; }
.kr-bigplay { padding: 14px 28px; font-size: 16px; margin: 6px 0 14px; }
.kr-hjarrow { color: var(--tx3); margin: 0 6px; }
.srs-btn.srs-mid { color: #B07A1F; }
.vlist { display: grid; gap: 10px; }
.vcard .tts-btn { width: 32px; height: 32px; font-size: 14px; }
.vcard-top { align-items: center; }

/* 首頁 */
.kr-hero { flex-direction: column; align-items: stretch; gap: 12px; }
.kr-hero .hb-greet { font-family: inherit; }
.kr-mascot { width: 52px !important; height: 52px !important; flex: none; }
.kr-hiko { display: block; font-size: 13px; font-weight: 500; color: var(--tx3); margin-top: 2px; }
.kr-goalset { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; font: inherit; font-size: 11px; color: var(--tx2); cursor: pointer; }
.kr-hero .hb-goal-top { align-items: center; gap: 8px; }
.kr-hero .hb-goal-top span:first-child { flex: 1; }
.kr-hero .hb-goal-n { cursor: default; }
.kr-wod { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 15px 17px; cursor: pointer; }
.kr-wod-l { font-size: 11px; font-weight: 700; color: var(--tx3); letter-spacing: .06em; }
.kr-wod-b { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.kr-wod-w { font-size: 28px; line-height: 1.2; }
.kr-wod-s { font-size: 13px; margin-top: 2px; }
.kr-wod-m { font-size: 15px; font-weight: 600; margin-top: 6px; }
.kr-lvgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.kr-lvcard { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; cursor: pointer; font: inherit; color: var(--tx); display: flex; flex-direction: column; gap: 5px; }
.kr-lvcard.on { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac) inset; }
.kr-lvcard b { font-size: 16px; }
.kr-lvcard small, .kr-lvcard span { font-size: 11px; color: var(--tx3); }
@media (max-width: 420px) { .kr-lvgrid { grid-template-columns: repeat(2, 1fr); } }

/* 單字表、查字 */
.kr-hjrel { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; }
.kr-hjrel-h { font-size: 13.5px; color: var(--tx2); margin-bottom: 8px; }
.kr-hjrel-h .hj { font-size: 18px; color: var(--tx); }
.kr-hjchip { border: 1px solid var(--line); background: var(--bg2); color: var(--tx); border-radius: 999px; padding: 5px 12px; margin: 0 6px 8px 0; font: inherit; font-size: 13.5px; cursor: pointer; }
.wsheet { max-height: 82vh; overflow-y: auto; }
.ws-top .tts-btn { width: 40px; height: 40px; }

/* 文法 */
.kr-gcard { margin-bottom: 10px; }
.kr-gcard .g-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 18px; cursor: pointer; font-family: inherit; }
.kr-gcard .g-pattern { margin: 0; font-family: var(--ko); font-size: 15px; }
.kr-g-mean { width: 100%; font-size: 13.5px; font-weight: 500; color: var(--tx2); }
.kr-gcard.open { border-color: var(--ac); }
.kr-gcard .g-body { border-top: 1px solid var(--line); padding-top: 14px; }
.kr-form { background: var(--bg3); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7; margin-bottom: 10px; }
.kr-form b { display: inline-block; margin-right: 8px; color: var(--ac); font-size: 12px; }
.kr-gp { font-size: 14px; line-height: 1.85; color: var(--tx); margin: 0 0 10px; }
.kr-gcard .g-ex { color: var(--tx); font-size: 15px; line-height: 1.7; padding: 8px 0; margin: 0; border-bottom: 1px solid var(--line); }
.kr-gcard .g-ex:last-child { border-bottom: 0; }
.kr-gcard .g-ex em { font-style: normal; color: var(--ac); font-weight: 700; }
.kr-gcard .g-ex .tts-btn { width: 28px; height: 28px; font-size: 12px; vertical-align: middle; }
.kr-vs { font-size: 13px; color: var(--tx2); margin: 10px 0; }

/* 會話 */
.kr-phlist { display: grid; gap: 10px; }
.kr-phlist .ph-item { margin: 0; flex-direction: column; gap: 2px; }
.kr-phlist .ph-main { display: flex; align-items: center; gap: 10px; width: 100%; }
.kr-phlist .ph-main .tts-btn { margin-left: auto; width: 32px; height: 32px; font-size: 14px; }

/* 測驗 */
.kr-qzans { font-size: 15px; line-height: 1.7; }
.kr-qzans [lang="ko"] { font-size: 20px; font-weight: 700; }
.qz .qhd { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx3); margin-bottom: 8px; }
.qz-big { text-align: center; margin-bottom: 18px; }
.qz-score { font-size: 40px; font-weight: 700; color: var(--ac); margin: 6px 0; }
.kr-set-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--tx2); }
.kr-set-row span { margin-right: 4px; }

/* 我的 */
.kr-pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.kr-pf-stats div { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; }
.kr-pf-stats b { display: block; font-size: 22px; }
.kr-pf-stats span { font-size: 11px; color: var(--tx3); }
.kr-hm { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; }
.kr-hm-c { width: 12px; height: 12px; border-radius: 3px; background: var(--bg3); }
.kr-hm-c.l1 { background: color-mix(in srgb, var(--ac) 30%, var(--bg3)); }
.kr-hm-c.l2 { background: color-mix(in srgb, var(--ac) 55%, var(--bg3)); }
.kr-hm-c.l3 { background: color-mix(in srgb, var(--ac) 78%, var(--bg3)); }
.kr-hm-c.l4 { background: var(--ac); }

/* 漢字詞 */
.kr-hjintro p { font-size: 14px; line-height: 1.85; color: var(--tx2); margin: 6px 0 0; }
.kr-hjintro .hj { color: var(--tx); font-weight: 700; }
.kr-hjgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 6px; }
.kr-hjcell { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; cursor: pointer; font: inherit; color: var(--tx); }
.kr-hjcell .hj { font-size: 26px; color: var(--tx); line-height: 1.2; }
.kr-hjcell b { font-size: 15px; color: var(--ac); }
.kr-hjcell small { font-size: 10.5px; color: var(--tx3); }
.kr-hjhero { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 10px; font-size: 44px; font-weight: 700; }
.kr-hjhero .hj { color: var(--tx); }
.kr-hjhero [lang="ko"] { color: var(--ac); }
.kr-hj-big { font-size: 15px; }

/* 字母 */
.kr-letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kr-letter { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.kr-letter-big { font-size: 48px; line-height: 1; color: var(--ac); background: var(--ac-soft); border: 0; border-radius: 14px; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
div.kr-letter-big { cursor: default; }
.kr-letter-meta { font-size: 14px; }
.kr-letter-tip { font-size: 13.5px; line-height: 1.75; color: var(--tx2); margin: 0; }
.kr-exrow { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.kr-exchip { border: 1px solid var(--line); background: var(--bg); color: var(--tx); border-radius: 10px; padding: 5px 10px; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.kr-exchip small { color: var(--tx3); }
.kr-exchip em { font-style: normal; color: var(--tx2); font-size: 12.5px; }
.kr-done-btn { width: 100%; padding: 13px; margin-bottom: 14px; }
.kr-dbl { display: grid; gap: 0; }
.kr-dbl-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kr-dbl-row:last-child { border-bottom: 0; }
.kr-dbl-row .kr-exrow { grid-column: 2; border-top: 0; padding-top: 0; }
.kr-dbl-c { font-size: 30px; color: var(--ac); grid-row: span 2; }
.kr-parts { display: grid; gap: 10px; margin-top: 8px; }
.kr-parts div { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.kr-parts p { font-size: 13px; color: var(--tx2); margin: 4px 0 0; line-height: 1.7; }
.kr-sylrow { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-sylex { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--tx); }
.kr-syl { font-size: 32px; color: var(--ac); line-height: 1.2; }
.kr-sylex small { font-size: 11.5px; color: var(--tx3); }
.kr-hgopts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 10px; }
.kr-hgopt { font-size: 34px; padding: 14px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--tx); cursor: pointer; }
.kr-hgopt.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.kr-hgopt.ng { background: var(--ac2); border-color: var(--ac2); color: #fff; }

/* 發音規則 */
.kr-rules { display: grid; gap: 10px; }
.kr-rule { display: flex; align-items: center; gap: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--tx); text-align: left; }
.kr-rule-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ac-soft); color: var(--ac); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.kr-rule-tx { flex: 1; min-width: 0; }
.kr-rule-tx b { display: block; font-size: 15.5px; }
.kr-rule-tx small { display: block; font-size: 12.5px; color: var(--tx2); line-height: 1.6; margin-top: 2px; }
.kr-sum { font-size: 15px; font-weight: 600; margin: 4px 0 10px; }
.kr-pats { display: grid; gap: 8px; margin-top: 10px; }
.kr-pat { background: var(--bg3); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.kr-pat small { display: block; color: var(--tx3); margin-top: 4px; font-size: 12.5px; }
.kr-prex { display: grid; }
.kr-prex-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--tx); cursor: pointer; text-align: left; }
.kr-prex-row:last-child { border-bottom: 0; }
.kr-prex-w { font-size: 18px; font-weight: 700; }
.kr-prex-row .kr-pr { font-size: 18px; }
.kr-prex-row small { color: var(--tx3); font-size: 12.5px; }
.kr-prex-row em { font-style: normal; color: var(--tx2); font-size: 13px; margin-left: auto; }
.kr-prq { font-size: 34px; font-weight: 700; vertical-align: middle; }

/* 修正：StayTW 的 pa-found 是 div 結構，這裡用 span 要補 block */
.pa-found-t, .pa-found-d { display: block; }
.pa-found { margin: 0; }
.btn.primary { background: var(--ac); border-color: var(--ac); color: #fff; }
.btn.primary:disabled { opacity: .45; }
/* 答錯用紅色（主色改藍之後，原本 .ng 用 --ac 會看起來像「選中」） */
.qz-opt.ng { background: var(--ac2); border-color: var(--ac2); }
[data-theme="dark"] .btn.primary { color: #0E1A30; }

/* 做題：選取 → 送出 → 詳解 → 下一題 */
.qz-opt.sel, .kr-hgopt.sel { border-color: var(--ac); background: var(--ac-soft); box-shadow: 0 0 0 1px var(--ac) inset; }
.kr-submit { display: block; width: 100%; padding: 13px; margin-top: 14px; }
.qz-fb { text-align: left; margin-top: 16px; }
.qz-fb > b { display: block; font-size: 16px; margin-bottom: 8px; }
.qz-fb.ok > b { color: var(--ok); }
.qz-fb.ng > b { color: var(--ac2); }
.qz-fb.ng { border-color: var(--ac2); background: color-mix(in srgb, var(--ac2) 7%, var(--bg2)); }
.kr-explain { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.7; }
.kr-ex-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 16px; }
.kr-ex-main [lang="ko"] { font-size: 20px; font-weight: 700; }
.kr-ex-main .tts-btn, .kr-ex-eg .tts-btn, .kr-ex-pick .tts-btn { width: 28px; height: 28px; font-size: 12px; vertical-align: middle; }
.kr-ex-m { font-weight: 600; }
.kr-ex-note { color: var(--tx2); border-top: 1px dashed var(--line); padding-top: 8px; }
.kr-ex-eg { border-top: 1px dashed var(--line); padding-top: 8px; }
.kr-ex-pick { background: color-mix(in srgb, var(--ac2) 8%, var(--bg)); border-radius: 10px; padding: 9px 11px; color: var(--tx); }
/* 錯題紀錄 */
.kr-wblist { display: grid; gap: 12px; }
.kr-wb { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.kr-wb-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kr-wb-top .vcard-pos { margin-left: 0; }
.kr-wb-n { font-size: 12px; color: var(--tx3); flex: 1; }
.kr-wb-del { background: none; border: 0; color: var(--tx3); font-size: 15px; cursor: pointer; padding: 2px 6px; }
.kr-wb-q { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.kr-wb-row { font-size: 14px; padding: 3px 0; }
.kr-wb-ng span { color: var(--ac2); font-weight: 600; }
.kr-wb-ok span { color: var(--ok); font-weight: 600; }
.kr-wb-exp { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.qz-fb .kr-ex-main .kr-pr, .kr-wb-exp .kr-ex-main .kr-pr { color: var(--ok); }

/* 付費牆 */
.kr-lock { width: 13px; height: 13px; vertical-align: -2px; }
.kr-locked { opacity: .62; }
.kr-hjcell.kr-locked small { color: var(--tx3); }
.pw-quota.kr-free { color: var(--ok); }
.btn.primary .kr-lock { stroke: currentColor; }

/* 韓國文化 */
.kr-culist { display: grid; gap: 10px; }
.kr-cucard { display: flex; align-items: center; gap: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--tx); text-align: left; }
.kr-cu-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--ac-soft); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.kr-cu-ic.big { width: 56px; height: 56px; font-size: 30px; }
.kr-cu-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-cu-tx small { font-size: 11.5px; color: var(--ac); font-weight: 700; }
.kr-cu-tx b { font-size: 15.5px; line-height: 1.45; }
.kr-cu-tx em { font-style: normal; font-size: 12.5px; color: var(--tx2); line-height: 1.55; }
.kr-cu-art { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px; margin: 12px 0 14px; }
.kr-cu-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.kr-cu-head small { font-size: 12px; color: var(--ac); font-weight: 700; }
.kr-cu-head h2 { font-size: 21px; line-height: 1.4; margin: 2px 0 0; }
.kr-cu-p { font-size: 15px; line-height: 1.95; margin: 0 0 12px; }
.kr-cu-sec { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
.kr-cu-sec h3 { font-size: 17px; margin: 0 0 10px; }
.kr-cu-kos { display: grid; gap: 8px; }
.kr-cu-ko { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; cursor: pointer; }
.kr-cu-ko [lang="ko"] { font-size: 17px; font-weight: 700; }
.kr-cu-ko .tts-btn, .kr-cu-line .tts-btn { width: 28px; height: 28px; font-size: 12px; vertical-align: middle; }
.kr-cu-m { font-size: 13.5px; color: var(--tx2); margin-top: 2px; }
.kr-cu-note { font-size: 12.5px; color: var(--ac); margin-top: 5px; line-height: 1.6; }
.kr-cu-dlg { display: grid; gap: 0; }
.kr-cu-line { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.kr-cu-line:last-child { border-bottom: 0; }
.kr-cu-line.on { background: var(--ac-soft); }
.kr-cu-s { font-size: 12.5px; font-weight: 700; color: var(--ac); padding-top: 3px; }
.kr-cu-line [lang="ko"] { font-size: 16px; }
.kr-cu-voc { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-cu-tip { background: color-mix(in srgb, var(--ac) 7%, var(--bg)); border-radius: 12px; padding: 13px 15px; margin-top: 18px; font-size: 14px; line-height: 1.85; }
.kr-cu-tip b { display: block; color: var(--ac); margin-bottom: 4px; }
.kr-cu-q { font-size: 15.5px; font-weight: 600; line-height: 1.7; margin: 0 0 12px; }

/* 追星韓文 */
.kr-cucard.kr-on { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac) inset; }
.kr-fc-pick { display: grid; gap: 8px; }
.kr-fan-name { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.kr-fan-name label { font-size: 12.5px; font-weight: 700; color: var(--tx2); }
.kr-fan-name small { font-size: 12px; color: var(--tx3); }
.kr-fan-name .search { max-width: none; }
.kr-fan-tpl { display: grid; gap: 10px; background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 14px; }
.kr-fan-tpl [lang="ko"] { font-size: 15.5px; }
.kr-easy { font-size: 11px; color: var(--ok); border: 1px solid var(--ok); border-radius: 5px; padding: 0 5px; }
.kr-fc-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.kr-fc-head b { font-size: 17px; }
.kr-fc-head small { color: var(--tx3); font-size: 12px; }
.kr-fc-log { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 14px 2px; }
.kr-bub { max-width: 86%; border-radius: 16px; padding: 10px 13px; font-size: 14.5px; line-height: 1.6; }
.kr-bub.ai { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.kr-bub.me { align-self: flex-end; background: var(--ac-soft); border: 1px solid color-mix(in srgb, var(--ac) 30%, var(--line)); border-bottom-right-radius: 4px; }
.kr-bub [lang="ko"] { font-size: 16px; }
.kr-bub .tts-btn { width: 26px; height: 26px; font-size: 11px; vertical-align: middle; }
.kr-typing { color: var(--tx3); letter-spacing: 3px; }
.kr-fix { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--tx2); }
.kr-fix [lang="ko"] { color: var(--ok); font-weight: 700; font-size: 14px; }
.kr-fc-hints { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.kr-fc-hints small { width: 100%; color: var(--tx3); font-size: 12px; }
.kr-fc-input { display: flex; gap: 8px; }
.kr-fc-input .search { flex: 1; max-width: none; }
.kr-fc-end { text-align: center; color: var(--tx2); font-size: 14px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kr-ta { width: 100%; min-height: 130px; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--tx); font: inherit; font-size: 15px; line-height: 1.7; resize: vertical; }
.kr-fx-g { padding: 10px 0; border-bottom: 1px solid var(--line); }
.kr-fx-g:last-child { border-bottom: 0; }
.kr-yt-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 12px 0; border-radius: 14px; overflow: hidden; background: #000; }
.kr-yt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kr-yt-line { cursor: default; }
.kr-yt-ctl { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.kr-yt-score { font-weight: 700; font-size: 14px; }
.kr-yt-score.ok { color: var(--ok); } .kr-yt-score.mid { color: #B07A1F; } .kr-yt-score.ng { color: var(--ac2); }

/* 闖關路線（sample） */
.kr-path-try { width: 100%; padding: 13px; border-radius: 14px; border: 1px dashed var(--ac); background: var(--ac-soft); color: var(--ac); font: inherit; font-weight: 700; cursor: pointer; }
.kr-path-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.kr-path-top h2 { font-size: 30px; margin: 0; flex: 1; }
.kr-seg { display: flex; background: var(--bg3); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.kr-seg button { border: 0; background: none; color: var(--tx2); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.kr-seg button.on { background: var(--bg2); color: var(--tx); box-shadow: var(--sh2); }
.kr-path-hero { background: var(--bg2); border: 1px solid var(--line); border-radius: 22px; padding: 20px 20px 18px; margin-bottom: 22px; }
.kr-path-hero-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.kr-path-hero-top span:first-child { color: var(--ac2); }
.kr-path-hero-top span:last-child { color: var(--tx2); white-space: nowrap; }
.kr-path-eg { font-family: var(--ko); font-size: 30px; font-weight: 700; line-height: 1.35; margin: 16px 0 6px; }
.kr-path-eg em { font-style: normal; color: var(--ac2); }
.kr-path-egm { color: var(--tx2); font-size: 15px; margin-bottom: 16px; }
.kr-path-bar { display: block; height: 6px; border-radius: 999px; background: var(--bg3); overflow: hidden; margin-top: 8px; }
.kr-path-bar i { display: block; height: 100%; background: var(--ac2); border-radius: 999px; transition: width .4s var(--ease); }
.kr-path-bar.big { height: 8px; flex: 1; margin: 0; }
.kr-path-sec { display: flex; align-items: center; gap: 12px; color: var(--tx3); font-size: 14px; font-weight: 700; margin: 6px 4px 12px; }
.kr-path-sec i { flex: 1; height: 1px; background: var(--line); }
.kr-path-units, .kr-path-lessons { display: grid; gap: 10px; margin-bottom: 22px; }
.kr-path-unit, .kr-path-lesson { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--tx); }
.kr-path-unit.cur { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac) inset; }
.kr-path-num { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--tx2); }
.kr-path-unit.cur .kr-path-num { background: var(--ac); color: #fff; }
.kr-path-ut { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-path-ut b { font-size: 16px; }
.kr-path-ut small { font-size: 12.5px; color: var(--tx3); }
.kr-path-cnt { flex: none; font-weight: 700; color: var(--ac2); font-size: 15px; }
.kr-path-stars { flex: none; color: #E0A526; letter-spacing: 1px; }
.kr-path-uhead { margin: 14px 2px 16px; }
.kr-path-uhead small { color: var(--ac2); font-weight: 700; }
.kr-path-uhead h2 { margin: 4px 0; font-size: 24px; }
.kr-path-uhead p { color: var(--tx2); margin: 0; }
.kr-lesson-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.kr-lesson-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; padding: 20px 18px; }
.kr-lesson-k { color: var(--ac2); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; }
.kr-lesson-pat { font-family: var(--ko); font-size: 30px; font-weight: 700; margin: 10px 0 4px; }
.kr-lesson-g { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.kr-lesson-egs { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 12px; }
.kr-lesson-eg { padding: 12px 2px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 17px; }
.kr-lesson-eg:last-child { border-bottom: 0; }
.kr-lesson-eg em, .kr-lesson-qk em { font-style: normal; color: var(--ac2); font-weight: 700; }
.kr-lesson-eg .tts-btn { width: 28px; height: 28px; font-size: 12px; vertical-align: middle; }
.kr-lesson-words { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.kr-lesson-word { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.kr-lesson-word [lang="ko"] { font-size: 20px; font-weight: 700; }
.kr-lesson-word .tts-btn { width: 26px; height: 26px; font-size: 11px; vertical-align: middle; }
.kr-lesson-wm { font-size: 12.5px; }
.kr-lesson-q { text-align: center; margin: 14px 0 18px; }
.kr-lesson-qk { font-size: 22px; font-weight: 700; line-height: 1.5; margin-bottom: 6px; }
.kr-lesson-qw { font-size: 38px; font-weight: 700; }
.kr-blank { display: inline-block; min-width: 3em; border-bottom: 2px solid var(--ac2); color: var(--ac2); }
.kr-lesson-stars { font-size: 44px; color: #E0A526; letter-spacing: 4px; }
.kr-lesson-stars span { color: var(--line); }
@media (max-width: 420px) { .kr-path-top h2 { font-size: 26px; } .kr-seg button { padding: 7px 11px; font-size: 13px; } }
.kr-path-home { margin-bottom: 0; }
.kr-path-all { display: block; width: 100%; margin-top: 10px; background: none; border: 0; color: var(--tx2); font: inherit; font-size: 13.5px; cursor: pointer; }
/* 付費牆方案（2026-09-24 定價） */
.kr-pw-plans { display: grid; grid-template-columns: 1fr; gap: 8px; }
.kr-pw-plans .pw-plan { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; text-align: left; padding: 12px 14px; }
.kr-pw-plans .pw-plan > span:not(.pw-tag) { font-size: 13.5px; font-weight: 700; }
.kr-pw-plans .pw-plan b { grid-row: span 2; font-size: 20px; }
.kr-pw-plans .pw-plan .pw-per { grid-column: 1; font-size: 12px; }
.kr-pw-life { position: relative; }
.kr-pw-life .pw-tag { position: absolute; top: -9px; right: 12px; }
.kr-pw-was { grid-column: 2; font-size: 12.5px; color: var(--tx3); text-align: right; }
.kr-pw-timer { color: #D08A10 !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.kr-pm { font-size: 10px; font-weight: 700; color: var(--ac); border: 1px solid var(--ac); border-radius: 5px; padding: 0 4px; margin-left: 3px; vertical-align: 1px; }