:root{
  --bg:#f6f4ef; --panel:#ffffff; --ink:#1f2328; --muted:#6b7078; --line:#e3dfd6;
  --accent:#b4462b; --accent-ink:#fff; --accent-soft:#f6e3dc;
  --gold:#a8791a; --ok:#2f7d4f; --kp:#3b5bab; --seen:#fff1c9; --playing:#fff6e0;
  --km-size:26px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16181b; --panel:#1f2226; --ink:#e8e6e1; --muted:#9aa0a8; --line:#33373d;
    --accent:#e0724f; --accent-ink:#16181b; --accent-soft:#3a2620;
    --gold:#d9a640; --ok:#5cc08a; --kp:#8ea8f0; --seen:#4a3d14; --playing:#2d2717;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans KR",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-tap-highlight-color:transparent}
.km,[lang=km]{font-family:"Noto Sans Khmer","Khmer OS","Leelawadee UI",sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 14px;min-height:40px}
button:hover{border-color:var(--accent)}
button.primary,a.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.seg{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.seg button{border-radius:20px;padding:4px 14px;min-height:36px}
.seg button.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);font-weight:600}
.acct-form{display:flex;flex-direction:column;gap:8px;max-width:420px}
.notice{border:1px solid var(--gold);border-radius:12px;padding:10px 12px;font-size:14px;background:var(--playing)}
.notice ul{margin:6px 0 0;padding-left:18px}
.notice li{margin-bottom:4px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.consent input{width:22px;height:22px;margin-top:2px;flex:0 0 auto}
a.btn{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-height:40px;text-decoration:none;color:inherit;background:var(--panel)}
button.small{padding:4px 10px;font-size:15px;min-height:36px}
button:disabled{opacity:.5;cursor:default}
a{color:var(--accent)}
header{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.head-in{max-width:1100px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{font-weight:700;font-size:18px}
.brand small{color:var(--muted);font-weight:400;font-size:13px;margin-left:6px}
.badge{font-size:12px;padding:2px 10px;border-radius:10px;background:var(--accent-soft);color:var(--accent);margin-right:auto}
.badge.on{background:#e3f3ea;color:var(--ok)}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav button{border:none;background:none;border-radius:10px;padding:6px 12px;color:var(--muted)}
nav button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
main{max-width:1100px;margin:0 auto;padding:16px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.tab{display:none}.tab.on{display:block}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
label.f{display:block;font-size:14px;color:var(--muted);margin:0 0 4px}
input[type=text],input[type=search],input[type=password],select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%}
textarea{min-height:320px;resize:vertical;line-height:1.7}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted);font-size:14px}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:10px;display:none}
.progress div{height:100%;width:0;background:var(--accent);transition:width .2s}
.help li{margin-bottom:4px}

.toolbar{position:sticky;top:var(--hdr,57px);z-index:10;background:var(--bg);padding:8px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line);margin-bottom:8px}
.toolbar .sp{flex:1}
.toolbar label{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}
input[type=range]{width:120px;accent-color:var(--accent);min-height:36px}
h2.title{font-size:20px;margin:4px 0 12px}

.card{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;transition:background .2s;scroll-margin-top:calc(var(--hdr,57px) + var(--tb,60px) + 8px)}
.back{cursor:pointer}

/* 집중 화면: 재생 중 메뉴를 숨기고 본문만 크게. 화면을 터치하면 메뉴 복귀 */
body.focus header,body.focus .toolbar,body.focus .actions,body.focus .back,body.focus #prepMsg,body.focus h2.title{display:none}
body.focus main{padding-top:8px;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
body.focus .card{scroll-margin-top:8px}
#minibar{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);z-index:30}
body.focus #minibar{display:flex}
#minibar button{min-height:46px;font-size:17px}
.card.playing{background:var(--playing);border-color:var(--gold)}
.num{flex:0 0 28px;color:var(--muted);font-size:13px;padding-top:3px;text-align:right}
.body{flex:1;min-width:0}
.ko{font-size:calc(var(--km-size) * 0.72)}   /* 글자 크기 슬라이더로 한글·크메르어·발음이 함께 커짐 */
.card .rom{font-size:calc(var(--km-size) * 0.54)}
.card .kp{font-size:calc(var(--km-size) * 0.6)}
.ko .w{cursor:pointer;border-radius:4px;padding:0 1px}
.ko .w:hover{background:var(--accent-soft);color:var(--accent)}
.ko .w.g{border-bottom:2px dotted var(--gold)}   /* 준비된 뜻이 있는 단어 */
.ko .w.seen{background:var(--seen)}

/* 준비 단계 표시 */
.step{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
.step .st{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.step .mark{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);text-align:center;font-size:14px;line-height:19px}
.step.done{border-color:var(--ok)}
.step.done .mark{background:var(--ok);border-color:var(--ok);color:#fff}
.step.done .mark::before{content:"✓"}
.step.part .mark{border-color:var(--gold)}
.step.part .mark::before{content:"…";color:var(--gold)}
.km{font-size:var(--km-size);line-height:1.9;margin-top:4px;word-break:break-word}
.km .p{cursor:pointer;border-radius:4px}
.km .p:hover{background:var(--accent-soft)}
.km .p.now{background:var(--seen)}
.km[contenteditable=true],.ko[contenteditable=true]{outline:2px dashed var(--accent);border-radius:6px;padding:2px 6px;cursor:text}
.actions .gen{font-size:13px}
.rom{color:var(--gold);font-size:14px;font-style:italic}
.kp{color:var(--kp);font-size:15px}
body.norom .rom{display:none}
body.nokp .kp{display:none}
.back{font-size:14px;color:var(--ok);margin-top:2px}
.back:empty,.kp:empty,.rom:empty{display:none}
.edited{font-size:12px;color:var(--accent);margin-left:6px}
.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pending{color:var(--muted);font-size:14px}
.err{color:var(--accent);font-size:14px}
.gap{height:8px}

#pop{position:absolute;z-index:50;width:min(380px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:14px;display:none}
#pop .h{font-size:20px;font-weight:700;padding-right:24px}
#pop .k{font-size:28px;margin:2px 0}
#pop .sub{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
#pop .x{position:absolute;right:6px;top:4px;border:none;background:none;font-size:22px;color:var(--muted);min-height:0}
#pop .rom,#pop .kp{display:block}
.tag{display:inline-block;font-size:12px;background:var(--accent-soft);color:var(--accent);padding:1px 8px;border-radius:10px;font-weight:400}
.alts,.note{font-size:14px;color:var(--muted);margin-top:4px}

.vlist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.vitem{display:grid;grid-template-columns:1fr 1.3fr auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.vitem .vk{font-size:24px}
.vitem .ctx{grid-column:1/-1;font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:4px;display:none}
.vitem.open .ctx{display:block}
.vitem.mastered{opacity:.6}
.stars{color:var(--gold);font-size:13px}
@media (max-width:640px){.vitem{grid-template-columns:1fr}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:none;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex}
.fc{background:var(--panel);border-radius:18px;padding:24px;width:min(480px,100%);text-align:center}
.fc .q{font-size:32px;font-weight:700;min-height:48px}
.fc .a{min-height:120px;margin:14px 0}
.fc .a .k{font-size:36px}
.stats{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.stat b{font-size:20px;display:block}
#toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:20px;font-size:15px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:80;max-width:90vw;text-align:center}
.srm{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}

@media print{
  header,.toolbar,.actions,#pop,#prepMsg,.tab:not(#tab-practice){display:none!important}
  #tab-practice{display:block!important}
  body{background:#fff;color:#000}
  .card{break-inside:avoid;border-color:#ccc}
  .ko .w.seen{background:none}
}