/* Be Vietnam Pro is self-hosted (see /fonts.css, linked from index.html) so
   Vietnamese letters (ư ơ đ ệ …) always render even if Google Fonts is
   unreachable. Korean uses the device's built-in Korean font. */

:root{
  --bg:#f3f5f4;--card:#ffffff;--ink:#17242b;--muted:#5f6f70;--line:#dde4e2;
  --ko:#0d5c63;--vi:#b4532a;--soft:#e6f0ef;--rec:#7a4fb5;--focus:#0d5c63;
  --f-ko:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --f-vi:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111a1d;--card:#18252a;--ink:#e6eeee;--muted:#9bb0b1;--line:#2a3b40;
  --ko:#6cc6cc;--vi:#f0a27c;--soft:#1f3236;--rec:#b996ec;--focus:#6cc6cc;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111a1d;--card:#18252a;--ink:#e6eeee;--muted:#9bb0b1;--line:#2a3b40;
  --ko:#6cc6cc;--vi:#f0a27c;--soft:#1f3236;--rec:#b996ec;--focus:#6cc6cc;color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-vi);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 40px}
.wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:18px}

header h1{font-family:var(--f-ko);font-weight:900;font-size:clamp(24px,6vw,32px);margin:0;text-wrap:balance;letter-spacing:-.5px}
header h1 span{color:var(--ko)}
header p{margin:4px 0 0;color:var(--muted);font-size:14px}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--ink);padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ko);color:var(--card)}
.stop{margin-left:auto}
select{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--card);color:var(--ink)}

button{font-family:inherit}
button:focus-visible,label:focus-within,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pill{border:1px solid var(--ko);color:var(--ko);background:transparent;border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer}
.pill.solid{background:var(--ko);color:var(--card)}
.pill.rec{border-color:var(--rec);color:var(--rec)}

section{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 14px 6px}
.sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:6px}
.sh h2{margin:0;font-size:17px;font-weight:700}
.sh h2 small{font-family:var(--f-ko);font-weight:700;color:var(--muted);font-size:13px;margin-left:4px}
.sh .hint{color:var(--muted);font-size:13px;flex-basis:100%}
.sh .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

.row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.row.playing{background:var(--soft);border-radius:8px}
.num{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.ko{font-family:var(--f-ko);font-weight:700;font-size:18px;color:var(--ink);word-break:keep-all}
.pr{color:var(--ko);font-size:13px}
.vi{color:var(--vi);font-size:14px}
.ctl{display:flex;gap:6px;align-items:center}
.ib{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0}
.ib.k{border-color:var(--ko);color:var(--ko)}
.ib.v{border-color:var(--vi);color:var(--vi)}
.ib.k.mine{background:var(--ko);color:var(--card)}
.ib.v.mine{background:var(--vi);color:var(--card)}
.ib.r{border-color:var(--rec);color:var(--rec)}
.ib.r.recording{background:var(--rec);color:var(--card);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}

.ptitle{font-family:var(--f-ko);font-weight:700;margin:10px 0 2px}
.ptitle .vi{font-family:var(--f-vi);font-weight:400}
/* mixed Vietnamese + Korean (e.g. "Có patchim → 이에요"): Vietnamese font first,
   Korean glyphs fall back to the device Korean font per-glyph */
.rule{font-family:var(--f-vi);font-size:13px;color:var(--muted);margin:-2px 0 4px}

/* recorder-only pieces */
.recpanel{grid-column:1/-1;display:none;gap:8px;align-items:center;flex-wrap:wrap;background:var(--soft);border-radius:10px;padding:8px 10px;margin-top:4px}
.row.editing .recpanel{display:flex}
.recpanel audio{height:34px;max-width:100%}
.recpanel button{border:0;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.recpanel .save{background:var(--rec);color:var(--card)}
.recpanel .save:disabled{opacity:.45;cursor:default}
.recpanel .del{background:transparent;color:var(--rec);text-decoration:underline}
.recpanel .msg{font-size:12px;color:var(--muted)}

.loginbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.loginbox input{font:inherit;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--bg);color:var(--ink)}
.loginbox button{background:var(--rec);color:var(--card);border:0;border-radius:999px;padding:7px 14px;cursor:pointer}
.loginbox .msg{font-size:13px;color:var(--vi)}

.tip{background:var(--soft);border-radius:12px;padding:10px 12px;font-size:14px}
.tip b{font-family:var(--f-ko);color:var(--ko)}
.note{color:var(--muted);font-size:13px;text-align:center}

@media (max-width:440px){.ko{font-size:16px}.ib{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}