:root{
  --bg:#eef1f5; --surface:#ffffff; --surface2:#f6f8fb; --line:#dfe4ec; --line2:#eceff4;
  --text:#18233a; --muted:#66718a; --faint:#9aa3b5;
  --side:#13233f; --side2:#1b3053; --sideText:#d6deeb; --sideMuted:#8796b0; --sideLine:#2a4068;
  --brass:#b8893a; --brassSoft:#f5ecd9; --brassText:#8a6420;
  --ok:#1e7f55; --okSoft:#e3f3ea; --bad:#b93a32; --badSoft:#fbe9e7;
  --en:#2e5aac; --ja:#c0392b; --zh:#1e7f6a;
  --enSoft:#e6edf9; --jaSoft:#f9e7e5; --zhSoft:#e2f2ee;
  --shadow:0 1px 2px rgba(19,35,63,.06),0 6px 20px rgba(19,35,63,.07);
  --radius:12px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1626; --surface:#152035; --surface2:#1a273f; --line:#2a3956; --line2:#223150;
    --text:#e7ecf5; --muted:#9aa7c0; --faint:#6c7a96;
    --side:#0a1220; --side2:#13203a; --sideText:#d6deeb; --sideMuted:#7f8daa; --sideLine:#22324f;
    --brass:#d4a556; --brassSoft:#3a2f1b; --brassText:#e5be78;
    --ok:#4cc08b; --okSoft:#163a2b; --bad:#ef7a70; --badSoft:#3d1f1d;
    --en:#7aa2ec; --ja:#f08072; --zh:#5cc4ab; --enSoft:#1c2d4d; --jaSoft:#3b2224; --zhSoft:#173a33;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1626; --surface:#152035; --surface2:#1a273f; --line:#2a3956; --line2:#223150;
  --text:#e7ecf5; --muted:#9aa7c0; --faint:#6c7a96;
  --side:#0a1220; --side2:#13203a; --sideText:#d6deeb; --sideMuted:#7f8daa; --sideLine:#22324f;
  --brass:#d4a556; --brassSoft:#3a2f1b; --brassText:#e5be78;
  --ok:#4cc08b; --okSoft:#163a2b; --bad:#ef7a70; --badSoft:#3d1f1d;
  --en:#7aa2ec; --ja:#f08072; --zh:#5cc4ab; --enSoft:#1c2d4d; --jaSoft:#3b2224; --zhSoft:#173a33;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.lang-ja{font-family:"Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
.lang-zh{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif}

/* 전체 틀 */
.app{display:flex;height:100%;overflow:hidden}
.side{width:244px;flex:0 0 244px;background:var(--side);color:var(--sideText);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px;cursor:pointer;text-decoration:none;color:inherit}
.brand img{width:40px;height:40px;border-radius:10px;flex:0 0 40px}
.brand b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;letter-spacing:.06em;color:#e9cf93;line-height:1}
.brand small{display:block;font-size:11px;color:var(--sideMuted);letter-spacing:.02em;margin-top:3px;white-space:nowrap}
.nav{padding:4px 10px 18px}
.nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;color:var(--sideText);text-decoration:none;white-space:nowrap;overflow:hidden}
.nav a:hover{background:var(--side2)}
.nav a.on{background:var(--side2);color:#fff;box-shadow:inset 3px 0 0 var(--brass)}
.nav .ico{width:20px;text-align:center;flex:0 0 20px}
.nav .cnt{margin-left:auto;font-size:11px;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--brass);color:#1b1407;display:flex;align-items:center;justify-content:center;font-weight:700}
.nav .lock{margin-left:auto;font-size:11px;color:var(--sideMuted)}
.nav .sep{height:1px;background:var(--sideLine);margin:10px 6px}
.nav .lang{font-weight:600}
.nav .subs{margin:2px 0 6px 20px;border-left:1px solid var(--sideLine);padding-left:8px}
.nav .subs a{height:31px;font-size:13px;color:var(--sideMuted)}
.nav .subs a.on{color:#fff}
.lb{display:inline-flex;align-items:center;justify-content:center;width:26px;height:20px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.04em;flex:0 0 26px;color:#fff}
.lb.en{background:var(--en)}.lb.ja{background:var(--ja)}.lb.zh{background:var(--zh)}
.side-foot{margin-top:auto;padding:12px 18px 16px;font-size:11px;color:var(--sideMuted);border-top:1px solid var(--sideLine)}

.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.top{display:flex;align-items:center;gap:14px;min-height:62px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.burger{display:none;border:0;background:none;font-size:20px;width:36px;height:36px;border-radius:8px}
.top h1{font-size:18px;margin:0;white-space:nowrap;font-weight:700}
.tabs{display:flex;gap:4px;margin-left:12px}
.tabs a{height:34px;padding:0 16px;display:flex;align-items:center;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600;white-space:nowrap}
.tabs a:hover{background:var(--surface2)}
.tabs a.on{background:var(--side);color:#fff}
.topright{margin-left:auto;display:flex;align-items:center;gap:8px}
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 24px 40px}

/* 공통 부품 */
.btn{text-decoration:none;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--side);border-color:var(--side);color:#fff}
.btn.primary:hover{background:var(--side2)}
.btn.brass{background:var(--brass);border-color:var(--brass);color:#1b1407}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.danger.fill{background:var(--bad);color:#fff}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:default}
.ic{width:32px;height:32px;border:0;background:none;border-radius:8px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px}
.ic:hover{background:var(--surface2)}
.fav{color:var(--faint);font-size:18px}.fav.on{color:var(--brass)}
select.sel,input.inp,textarea.inp{height:36px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:0 10px;min-width:0}
textarea.inp{height:auto;padding:8px 10px;resize:none}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.grow{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;white-space:nowrap}
.chip.on{background:var(--side);border-color:var(--side);color:#fff}
kbd{font-size:11px;border:1px solid currentColor;border-radius:4px;padding:0 4px;opacity:.65;margin-left:4px}

/* 대시보드 */
.dash{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hero{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;overflow:hidden}
.hero-l{padding:24px 26px;background:var(--side);color:#fff;position:relative}
.hero-l h2{margin:0 0 4px;font-size:15px;font-weight:600;color:#c9d4e6}
.hero-l .big{font-family:"Cormorant Garamond",Georgia,serif;font-size:56px;line-height:1;color:#e9cf93}
.hero-l .big small{font-family:inherit;font-size:22px;color:#c9d4e6;margin-left:6px}
.bar{height:8px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;margin:16px 0 10px}
.bar i{display:block;height:100%;background:var(--brass);border-radius:4px}
.hero-l .meta{display:flex;gap:18px;font-size:13px;color:#c9d4e6;flex-wrap:wrap}
.hero-l .meta b{color:#fff}
.hero-r{padding:20px 22px;display:flex;flex-direction:column}
.hero-r h3{margin:0 0 12px;font-size:14px}
.week{display:flex;align-items:flex-end;gap:10px;height:110px;flex:1}
.week div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.week i{display:block;width:100%;max-width:30px;border-radius:5px 5px 2px 2px;background:var(--line);min-height:4px}
.week i.on{background:var(--brass)}
.week span{font-size:11px;color:var(--muted)}
.lcard{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.lcard-h{display:flex;align-items:center;gap:10px}
.lcard-h b{font-size:16px}
.lcard .rows{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lcard .rows div{background:var(--surface2);border-radius:8px;padding:10px;text-align:center}
.lcard .rows b{display:block;font-size:18px}
.lcard .rows span{font-size:11.5px;color:var(--muted)}
.lcard .acts{display:flex;gap:6px}
.lcard .acts .btn{flex:1}
.prog-line{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.prog-line .bar{flex:1;margin:0;background:var(--line2);height:6px}

/* 학습 카드 (탑승권 모양) */
.study-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:start}
.ticket{height:460px;display:flex;flex-direction:column;overflow:hidden;position:relative}
.ticket-top{display:flex;align-items:center;gap:8px;height:52px;padding:0 14px 0 18px;border-bottom:1px solid var(--line2);flex:0 0 52px}
.ticket-top .tp{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-top .no{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);white-space:nowrap}
.ticket-front{flex:0 0 190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 24px;text-align:center}
.fx{font-weight:700;line-height:1.2;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fx.s1{font-size:46px}.fx.s2{font-size:32px}.fx.s3{font-size:23px}
.spk{border:1px solid var(--line);background:var(--surface);border-radius:20px;height:38px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.spk span{font-size:17px}
.perf{position:relative;height:0;border-top:2px dashed var(--line);margin:0 18px;flex:0 0 0}
.perf::before,.perf::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.perf::before{left:-30px}.perf::after{right:-30px}
.ticket-back{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 24px;text-align:center;min-height:0}
.ticket-back.hide{visibility:hidden}
.rd{font-size:17px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ko{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ko b{color:var(--brassText);font-weight:700}
.mean{font-size:21px;font-weight:700;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.srline{height:20px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.srline.ok{color:var(--ok)}.srline.bad{color:var(--bad)}
.ticket-foot{flex:0 0 72px;display:flex;align-items:center;gap:8px;padding:0 16px;border-top:1px solid var(--line2);background:var(--surface2)}
.ticket-foot .btn{flex:1;height:44px}
.rate{flex:1;height:48px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;font-weight:700;white-space:nowrap}
.rate small{font-weight:500;font-size:11px;color:var(--muted)}
.rate.r1{border-color:var(--bad);color:var(--bad)}
.rate.r4{border-color:var(--ok);color:var(--ok)}
.rate:hover{background:var(--surface2)}
.end{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
.end .stamp{width:96px;height:96px;border-radius:50%;border:3px double var(--brass);color:var(--brass);display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:700;transform:rotate(-10deg)}
.end h3{margin:0;font-size:19px}
.end .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.aside{padding:16px 18px;display:flex;flex-direction:column;gap:16px}
.aside h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.kv div{background:var(--surface2);border-radius:8px;padding:8px 4px}
.kv b{display:block;font-size:17px}
.kv span{font-size:11px;color:var(--muted)}
.help{font-size:12px;color:var(--muted);line-height:1.8}

/* 퀴즈 */
.quiz{height:460px;display:flex;flex-direction:column;overflow:hidden}
.q-body{flex:0 0 170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 24px;text-align:center}
.q-ask{font-size:12.5px;color:var(--muted)}
.opts{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;padding:0 18px 12px;min-height:0}
.opt{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:0 14px;font-size:16px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.opt:hover{background:var(--surface2)}
.opt.ok{background:var(--okSoft);border-color:var(--ok);color:var(--ok)}
.opt.bad{background:var(--badSoft);border-color:var(--bad);color:var(--bad)}
.q-fb{height:22px;font-size:13px;text-align:center;padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 목록 표 */
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:nowrap}
.search{position:relative;width:260px;flex:0 1 260px}
.search .inp{width:100%;padding-right:30px}
.search .x{position:absolute;right:4px;top:4px;width:28px;height:28px;border:0;background:none;color:var(--muted);border-radius:6px}
.count{font-size:13px;color:var(--muted);white-space:nowrap}
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.tbl th{position:sticky;top:0;background:var(--surface2);font-size:12.5px;color:var(--muted);font-weight:600;text-align:left;height:40px;padding:0 8px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.tbl td{height:44px;padding:0 8px;border-bottom:1px solid var(--line2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--surface2)}
.tbl .c{text-align:center}
.tbl td.ib{padding:0;text-overflow:clip;text-align:center}
.tbl input[type=checkbox]{width:16px;height:16px;vertical-align:middle;accent-color:var(--side)}
.tbl .tx{font-weight:600}
.tbl .kr{color:var(--brassText)}
.tag{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
.tag.due{background:var(--brassSoft);border-color:transparent;color:var(--brassText)}
.tag.new{background:var(--enSoft);border-color:transparent;color:var(--en)}
.empty{padding:46px 20px;text-align:center;color:var(--muted)}

/* 회화 */
.conv{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.clist{padding:8px}
.citem{width:100%;text-align:left;border:0;background:none;border-radius:9px;padding:10px 12px;display:block}
.citem:hover{background:var(--surface2)}
.citem.on{background:var(--side);color:#fff}
.citem b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem span{font-size:12px;opacity:.7}
.cview{overflow:hidden}
.cview-h{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line2);flex-wrap:nowrap}
.cview-h h3{margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.lines{padding:16px;display:flex;flex-direction:column;gap:12px}
.ln{display:flex;gap:10px;max-width:86%}
.ln.B{align-self:flex-end;flex-direction:row-reverse}
.who{flex:0 0 46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--surface2);border:1px solid var(--line);text-align:center;line-height:1.1;padding:2px}
.ln.B .who{background:var(--brassSoft);border-color:transparent;color:var(--brassText)}
.bub{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);min-width:0}
.ln.B .bub{background:var(--surface2)}
.ln.playing .bub{border-color:var(--brass);box-shadow:0 0 0 2px var(--brassSoft)}
.bub .t{font-size:17px;font-weight:700}
.bub .r{font-size:13px;color:var(--muted)}
.bub .k{font-size:13px}
.bub .k b{color:var(--brassText)}
.bub .m{font-size:14px;margin-top:2px}
.bub .row{display:flex;align-items:center;gap:2px;margin-top:4px}
.bub.hidden .t,.bub.hidden .r,.bub.hidden .k{filter:blur(6px);user-select:none}
.mobile-csel{display:none}

/* 설정 */
.setup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.setup .panel{padding:18px 20px}
.setup h3{margin:0 0 4px;font-size:15px}
.setup p.d{margin:0 0 14px;font-size:12.5px;color:var(--muted)}
.vrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vrow .lb{margin-top:0}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1;min-width:0}
.slot{height:46px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:0 8px;text-align:left;overflow:hidden;line-height:1.25}
.slot b{display:block;font-size:12.5px}
.slot span{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.on{border-color:var(--brass);background:var(--brassSoft)}
.frow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-top:1px solid var(--line2)}
.frow:first-of-type{border-top:0}
.frow label{font-weight:600}
.frow .r{display:flex;align-items:center;gap:8px}
input[type=range]{width:150px;accent-color:var(--brass)}
.sw{position:relative;width:42px;height:24px;flex:0 0 42px}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;border-radius:12px;background:var(--line);transition:background .15s}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked+i{background:var(--brass)}
.sw input:checked+i::after{transform:translateX(18px)}
.notice{padding:26px;max-width:640px}
.notice h3{margin:0 0 8px}
.notice p{margin:0 0 8px;color:var(--muted)}

/* 팝업 */
.modal-wrap{position:fixed;inset:0;background:rgba(10,18,32,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-wrap.on{display:flex}
.modal{width:440px;max-width:100%;max-height:calc(100% - 32px);background:var(--surface);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.mh{height:54px;flex:0 0 54px;display:flex;align-items:center;padding:0 20px;font-size:16px;font-weight:700;border-bottom:1px solid var(--line2)}
.mb{padding:18px 20px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
.mf{flex:0 0 64px;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:0 20px;border-top:1px solid var(--line2);background:var(--surface2)}
.mf .btn{min-width:84px}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.fld label{font-size:12.5px;font-weight:600;color:var(--muted)}
.fld .inp{width:100%}
.fld .err{font-size:12px;color:var(--bad);min-height:0}
.target{background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop{position:fixed;z-index:60;display:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px;width:120px}
.pop.on{display:block}
.pop button{display:block;width:100%;height:34px;border:0;background:none;text-align:left;padding:0 12px;border-radius:7px}
.pop button:hover{background:var(--surface2)}
.pop button.danger{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--side);color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;opacity:0;pointer-events:none;transition:all .18s;z-index:70;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.scrim{display:none}

/* 모바일 */
@media (max-width:1100px){
  .dash{grid-template-columns:repeat(2,minmax(0,1fr))}
  .study-grid{grid-template-columns:minmax(0,1fr)}
  .study-grid .aside{order:-1;padding:12px 14px}
  .study-grid .aside .hide-m{display:none}
  .setup{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .2s;padding-top:env(safe-area-inset-top,0px)}
  .side.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(10,18,32,.45);z-index:39}
  .scrim.on{display:block}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .top{padding:8px 12px;flex-wrap:wrap;gap:8px;min-height:56px}
  .top h1{font-size:16px}
  .tabs{order:3;width:100%;margin:0}
  .tabs a{flex:1;justify-content:center;padding:0 6px}
  .content{padding:14px 12px 32px}
  .dash{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr)}
  .ticket,.quiz{height:430px}
  .fx.s1{font-size:38px}.fx.s2{font-size:27px}.fx.s3{font-size:20px}
  .q-body{flex-basis:120px}
  .opt{font-size:14px;padding:0 8px}
  .cview-h h3{display:none}
  .cview-h{padding:10px 12px}
  .hide-s{display:none}
  .toolbar{flex-wrap:wrap}
  .search{flex:1 1 100%;width:auto}
  .conv{grid-template-columns:minmax(0,1fr)}
  .clist{display:none}
  .mobile-csel{display:block;width:100%;margin-bottom:12px}
  .ln{max-width:100%}
  .slots{grid-template-columns:repeat(2,1fr)}
  .vrow{align-items:flex-start}
}
/* v2: 언어 선택 · 메뉴 묶음 */
.lang-pick{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 10px;border:1px solid var(--sideLine);border-radius:10px;background:var(--side2)}
.lang-pick select{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-weight:700;font-size:14px;height:30px;outline:none;cursor:pointer}
.lang-pick select option{color:#18233a;background:#fff}
.nav .grp-h{font-weight:600}
.nav .grp-h.cur{color:#fff}
.nav .subs .cnt{margin-left:auto}

/* 학습 홈 */
.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.hero2{background:var(--side);color:#fff;padding:24px 26px;border-radius:var(--radius);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);min-height:320px}
.native{font-family:"Cormorant Garamond",Georgia,serif;font-size:46px;line-height:1.05;color:#e9cf93;font-weight:700}
.native.lang-ja,.native.lang-zh{font-family:"Hiragino Mincho ProN","Yu Mincho","Songti SC","SimSun",serif}
.lvrow{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.lvb{font-size:22px;color:#fff}
.lv{font-size:13px;color:#c9d4e6;overflow:hidden;text-overflow:ellipsis}
.hero2 .bar{margin:2px 0 6px}
.hero2 .meta{display:flex;gap:16px;font-size:13px;color:#c9d4e6;flex-wrap:wrap}
.hero2 .meta b{color:#fff}
.course{padding:16px 20px;display:flex;flex-direction:column}
.course-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:15px}
.course-h .muted{font-size:12.5px}
.step{display:flex;align-items:center;gap:12px;height:54px;border-top:1px solid var(--line2);text-decoration:none;color:inherit}
.step:first-of-type{border-top:0}
.chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 26px;color:transparent;font-weight:800}
.step.done .chk{background:var(--ok);border-color:var(--ok);color:#fff}
.step .st{flex:1;min-width:0}
.step .st b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.step .st span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step.done .st b{color:var(--muted)}
.step .go{font-size:12.5px;font-weight:700;color:var(--brassText);white-space:nowrap}
.step.done .go{color:var(--ok)}
.cats{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.cat{padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;height:112px;overflow:hidden}
.cat:hover{border-color:var(--brass)}
.cat .ci{font-size:20px;line-height:1}
.cat b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat .bar{margin:auto 0 0;height:5px;background:var(--line2)}
.badges{grid-column:1/-1;padding:16px 20px}
.bdg-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.bdg{text-align:center;padding:10px 4px;border-radius:10px;background:var(--surface2);height:92px;overflow:hidden}
.bdg i{font-style:normal;font-size:24px;display:block;filter:grayscale(1);opacity:.3;line-height:1.3}
.bdg.on i{filter:none;opacity:1}
.bdg b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdg span{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 패턴 */
.pat-hero{padding:18px 20px 6px;text-align:center}
.pat-hero .pt{font-size:30px;font-weight:800;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pat-hero .pm{font-size:16px;color:var(--brassText);font-weight:700;margin-top:4px}
.pat-hero .tip{font-size:12.5px;color:var(--muted);margin-top:4px}
.ln.ex{max-width:100%;align-self:stretch}
.ln.ex .bub{flex:1}
.guide{padding:10px 16px;font-size:12.5px;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--line2)}

/* 훈련 */
.tr-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 22px;text-align:center;min-height:0}
.tr-in{width:100%;max-width:560px;height:46px;font-size:17px;text-align:center}
.res{height:44px;font-size:13px;line-height:22px;width:100%;overflow:hidden}
.res div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkbtn{border:0;background:none;color:var(--brassText);font-weight:700;text-decoration:underline;padding:0}
.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:flex-start;width:100%;max-width:640px;overflow:hidden}
.ansbox{height:88px;border:2px dashed var(--line);border-radius:10px;padding:8px}
.ansbox .ph{font-size:12.5px;align-self:center;margin:auto}
.pool{height:84px}
.tile{height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:16px;font-weight:600;white-space:nowrap}
.tile:hover{border-color:var(--brass)}
.tile.used{visibility:hidden}
.ansbox .tile{background:var(--brassSoft);border-color:transparent}

/* 게임 */
.mgrid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,minmax(0,1fr));grid-auto-flow:column;gap:8px;padding:12px 16px;min-height:0}
.mc{border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:15px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 10px}
.mc:hover{background:var(--surface2)}
.mc.sel{border-color:var(--brass);background:var(--brassSoft)}
.mc.done{visibility:hidden}
.mc.bad{border-color:var(--bad);background:var(--badSoft);color:var(--bad)}
.tbar{height:6px;background:var(--line2);flex:0 0 6px}
.tbar i{display:block;height:100%;background:var(--brass);transition:width .1s linear}

@media (max-width:1100px){
  .cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bdg-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){.study-grid .aside.after{order:1}}
@media (max-width:860px){
  .home{grid-template-columns:minmax(0,1fr)}
  .hero2{min-height:0}
  .native{font-size:38px}
  .cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cat{height:100px;padding:10px}
  .pat-hero .pt{font-size:22px}
  .ansbox{height:80px}
  .pool{height:76px}
  .tile{height:34px;font-size:14px;padding:0 10px}
  .mc{font-size:13px;padding:0 6px}
}

/* v5: 읽기 색상 통일 */
.kr{color:var(--brassText)}
i.kr{font-style:normal}
.small{font-size:12.5px}
.lb{background:#5b6a86;color:#fff}
[class*="lang-"]{unicode-bidi:plaintext}
.lang-zht,.lang-yue{font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif}
.opt,.mc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.opt .ot,.opt .kr,.mc .ot,.mc .kr{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.opt .kr,.mc .kr{font-size:12.5px;font-weight:600}
.mc .kr{font-size:11.5px}
.tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.tile small{font-size:10.5px;font-weight:600}
.pat-hero .pk{font-size:14px;margin-top:2px}

/* 나라 선택 */
.lang-pick{display:flex;align-items:center;gap:9px;width:calc(100% - 24px);margin:0 12px 8px;padding:0 10px;height:50px;border:1px solid var(--sideLine);border-radius:10px;background:var(--side2);color:#fff;text-align:left}
.lang-pick:hover{border-color:var(--brass)}
.lang-pick .cp-n{flex:1;min-width:0}
.lang-pick .cp-n b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-pick .cp-n small{display:block;font-size:11px;color:var(--sideMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-pick .cp-a{color:var(--sideMuted);font-size:12px}
.cpop{position:fixed;z-index:65;display:none;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(10,18,32,.28);overflow:hidden}
.cpop.on{display:flex}
.cp-h{padding:10px;border-bottom:1px solid var(--line2);flex:0 0 auto;display:flex;align-items:center;gap:6px}
.cp-h .search{flex:1;min-width:0;width:auto}
.wide-b{width:100%;margin-top:8px}
.btn.mobile-csel{display:none}
@media (max-width:860px){.btn.mobile-csel{display:flex;width:100%;margin-bottom:12px}}
.clist{max-height:calc(100vh - 140px);overflow-y:auto}
.cp-close{flex:0 0 auto;height:36px;padding:0 10px;font-size:12.5px}
.cp-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px}
.cp-row{display:flex;align-items:center;gap:10px;width:100%;height:46px;border:0;background:none;border-radius:8px;padding:0 10px;text-align:left}
.cp-row:hover{background:var(--surface2)}
.cp-row.on{background:var(--brassSoft)}
.cp-row .cp-n{flex:1;min-width:0}
.cp-row .cp-n b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-row .cp-n small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-ok{color:var(--brassText);font-weight:800}
.cp-f{flex:0 0 30px;display:flex;align-items:center;padding:0 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line2)}

/* 학습 자료 만들기 */
.gen{padding:24px 26px;max-width:760px}
.gen-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gen-h h3{margin:0;font-size:17px}
.gen p{margin:0 0 8px;line-height:1.7}
.gen-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 8px}
.gs{height:44px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px;padding:0 12px;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden}
.gs span{width:22px;height:22px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 22px}
.gs.run{border-color:var(--brass)}
.gs.run span{background:var(--brass);color:#1b1407}
.gs.done span{background:var(--ok);color:#fff}
.gen-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* 번역 */
.tr-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.tr-bar .sel{width:190px}
.ai-st{font-size:12px;white-space:nowrap}
.tr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.tp{height:320px;display:flex;flex-direction:column;overflow:hidden}
.tp-in{flex:1;border:0;resize:none;padding:16px 18px;font-size:17px;line-height:1.6;background:transparent;outline:none;min-height:0}
.tp-out{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-height:0}
.tp-out>*{flex-shrink:0}
.tp-out .ph{margin:auto 0;text-align:center}
.tp-out .tt{font-size:22px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.tp-out .bk{font-size:14px}
.alts{margin-top:6px;border-top:1px solid var(--line2);padding-top:6px;display:flex;flex-direction:column;gap:4px}
.alt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.tp-foot{flex:0 0 56px;display:flex;align-items:center;gap:6px;padding:0 12px;border-top:1px solid var(--line2);background:var(--surface2)}
.cnt2{font-size:12px;white-space:nowrap}
.cmode{margin-top:14px;padding:14px 18px;display:flex;align-items:center;gap:16px}
.cm-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-t .muted{font-size:12.5px}
.cm-btns{display:flex;gap:8px}
.cm-btns .btn{height:48px;padding:0 18px}

@media (max-width:860px){
  .tr-bar .sel{width:auto;flex:1;min-width:0}
  .tr-bar .ai-st{display:none}
  .tr-grid{grid-template-columns:minmax(0,1fr)}
  .tp{height:260px}
  .cmode{flex-direction:column;align-items:stretch}
  .cm-btns{flex-direction:column}
  .gen-steps{grid-template-columns:minmax(0,1fr)}
  .tp-foot .btn kbd{display:none}
}


/* v6: 번역 나라 선택 상자 */
.tr-pick{display:flex;align-items:center;gap:9px;width:250px;height:46px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-align:left;min-width:0}
.tr-pick:hover{border-color:var(--brass)}
.tr-pick .cp-n{flex:1;min-width:0}
.tr-pick .cp-n b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-pick .cp-n small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-pick .cp-a{color:var(--muted);font-size:12px}
.tr-swap{height:46px}
.tr-clr{height:46px;white-space:nowrap}
@media (max-width:860px){.tr-bar .tr-pick{flex:1 1 38%}.tr-clr{order:5;height:32px;margin-left:auto}.ai-st{order:6}}
@media (max-width:860px){.tr-bar{flex-wrap:wrap}.tr-pick{width:auto;flex:1;gap:6px;padding:0 8px}.tr-pick .cp-n small{display:none}.tr-pick[data-side="pair"]{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 배포용: 로그인 화면 · 관리 */
.gate{position:fixed;inset:0;z-index:90;background:var(--side);display:none;align-items:center;justify-content:center;padding:20px}
.gate.on{display:flex}
.gate-card{width:380px;max-width:100%;background:var(--surface);border-radius:16px;padding:30px 28px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.gate-logo{width:72px;height:72px;border-radius:16px}
.gate-brand{font-family:"Cormorant Garamond",Georgia,serif;font-size:32px;font-weight:700;color:var(--brassText);margin-top:10px;letter-spacing:.06em}
.gate-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.gate-msg{font-size:14px;line-height:1.7;margin-bottom:16px;overflow-wrap:anywhere}
.gate-btn{width:100%;height:46px;font-size:15px}
.g-logo{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285f4;font-weight:800;align-items:center;justify-content:center;margin-right:6px}
.gate-err{color:var(--bad);font-size:13px;margin-top:12px;line-height:1.6}
.gate-acts{display:flex;gap:8px}
.gate-acts .btn{flex:1;height:44px}
.gate-or{display:flex;align-items:center;gap:8px;margin:16px 0 10px;font-size:12px;color:var(--muted)}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)}
.gate-in{width:100%;height:42px;margin-bottom:8px;font-size:14px}
.gate-link{display:inline-block;margin-top:10px;font-size:12.5px}
.gate-ok{color:var(--ok);font-size:13px;margin-top:12px;line-height:1.6}
.ad-form .inp:first-child{flex:1;min-width:0}
.ad-form .inp:nth-child(2){width:160px}
@media (max-width:860px){.ad-form{flex-wrap:wrap}.ad-form .inp{flex:1 1 100%;width:auto!important}.ad-form .btn{flex:1 1 100%}}