:root{--ink:#302927;--muted:#7c6c66;--line:#dacbc4;--paper:#fffdfc;--page:#f5f0ed;--panel:#eee4df;--accent:#805142;--accent-soft:#efe0da;--green:#17665e;--shadow:0 18px 50px rgba(75,55,47,.08)}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{display:grid;grid-template-rows:auto 1fr auto;background:var(--page);color:var(--ink);font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
button,select{font:inherit}
button{cursor:pointer}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;min-height:76px;border-bottom:1px solid var(--line);background:var(--panel);padding:12px clamp(16px,3vw,42px)}
.back{justify-self:start;color:#6d5a54;text-decoration:none;font-size:14px;font-weight:800}
.title-block{text-align:center}
.title-block small{display:block;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.18em}
.title-block h1{margin:2px 0 0;font-size:24px;letter-spacing:-.04em}
.header-actions{justify-self:end}
.header-actions button,.toolbar button,.toolbar select,.lesson-nav button{border:1px solid #cdbdb6;border-radius:7px;background:#fff;color:#5f514c;padding:9px 14px;font-weight:800}
main{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;width:min(1180px,100%);min-height:0;margin:0 auto;padding:18px clamp(14px,3vw,34px)}
.page-tabs{display:flex;justify-content:center;gap:5px}
.page-tabs button{border:1px solid var(--line);background:#fff;color:#7b6963;padding:8px 18px;font-weight:850}
.page-tabs button:first-child{border-radius:999px 4px 4px 999px}
.page-tabs button:last-child{border-radius:4px 999px 999px 4px}
.page-tabs button.active{border-color:var(--accent);background:var(--accent);color:#fff}
.class-progress{display:grid;grid-template-columns:minmax(150px,1fr) 92px minmax(260px,2fr) auto auto;align-items:end;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:10px 12px}
.class-progress label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:850}
.class-progress select,.class-progress input,.class-progress button{height:40px;min-height:40px;border:1px solid #cdbdb6;border-radius:7px;background:#fff;color:#5f514c;padding:7px 10px;font-weight:800}
.class-progress button:disabled{cursor:not-allowed;opacity:.45}
.class-progress .save-progress{border-color:var(--accent);background:var(--accent);color:#fff}
.progress-summary{align-self:end;display:grid;align-content:center;gap:2px;min-width:0;min-height:40px;color:#5f514c;font-size:12px;font-weight:850}
.progress-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress-summary small{min-height:13px;color:#998983;font-size:9px;font-weight:700}
.lesson-range{grid-column:1/-1;display:flex;align-items:end;gap:8px;border-top:1px solid #eee3de;padding-top:9px}
.lesson-range>strong{align-self:center;color:var(--accent);font-size:11px;white-space:nowrap}
.lesson-range label{display:grid;grid-template-columns:auto 72px;align-items:center;gap:6px}
.lesson-range input{width:72px}
.lesson-range>span{align-self:center;color:var(--muted);font-weight:900}
.lesson-range>small{align-self:center;margin-left:auto;color:#9a8a84;font-size:9px}
.verb-number{margin-left:auto;color:var(--accent);font-size:12px;font-weight:900}
.toolbar{display:flex;align-items:center;gap:12px;min-height:42px}
.toolbar label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:850}
.verb-count{display:inline-flex;flex:0 0 68px;align-items:center;justify-content:center;width:68px;margin-left:-5px;border-radius:999px;background:#e9dfda;color:var(--accent);padding:6px 5px;font-size:10px;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.toolbar select{padding:8px 30px 8px 11px}
.lesson-pattern-picker{position:relative;display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:850}
.lesson-pattern-picker>span{line-height:1.2}
#patternToggle{min-width:210px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson-pattern-menu{position:absolute;z-index:12;top:calc(100% + 6px);left:0;width:min(330px,calc(100vw - 36px));border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;box-shadow:0 18px 45px rgba(48,41,39,.18)}
.lesson-pattern-menu[hidden]{display:none}
.lesson-pattern-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}
.lesson-pattern-actions button{width:100%;text-align:center}
#patternAll{border-color:var(--accent);background:var(--accent);color:#fff}
#patternNone{border-color:#cdbdb6;background:#fff;color:#6c5b55}
.lesson-pattern-list{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.lesson-pattern-list label{display:flex!important;align-items:center!important;gap:7px!important;border-radius:7px;padding:8px;color:var(--ink)!important;font-size:12px!important;cursor:pointer}
.lesson-pattern-list label:hover{background:#f5efec}
.lesson-pattern-list input{margin:0;accent-color:var(--accent)}
.lesson-pattern-list span{display:flex;align-items:baseline;gap:5px}
.lesson-pattern-list small{color:#988780;font-size:9px}
.toolbar .word-set-select{width:180px;max-width:180px}
.mode-buttons{display:flex;gap:6px}
.toolbar button{padding:8px 12px;font-size:12px}
.toolbar button.active{border-color:var(--accent);background:var(--accent);color:#fff}
.hint{margin:0 0 0 auto;color:#978782;font-size:11px;font-weight:700}
.slide{display:grid;grid-template-rows:auto 1fr auto auto;min-height:430px;border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:20px clamp(18px,3.5vw,48px) 18px;box-shadow:var(--shadow);user-select:none}
.slide-head{display:flex;align-items:center;justify-content:flex-end;color:var(--muted);font-size:13px;font-weight:850}
.pattern-badge{border-radius:999px;background:var(--accent-soft);color:var(--accent);padding:7px 11px;font-size:11px}
.forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:18px;padding:24px 0 14px}
.form-card{position:relative;display:grid;grid-template-rows:auto 1fr auto;place-items:center;min-height:245px;overflow:hidden;border:1px solid #ded2cd;border-radius:14px;background:#faf7f5;padding:20px 14px;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.form-card.is-visible{border-color:#c5aaa0;background:#fff;transform:translateY(-3px)}
.form-label{align-self:start;color:#8e7d77;font-size:12px;font-weight:900;letter-spacing:.06em}
.form-card strong{align-self:center;max-width:100%;font-size:clamp(34px,4.5vw,64px);line-height:1.05;letter-spacing:-.045em;text-align:center;overflow-wrap:anywhere}
.ipa{min-height:22px;color:#7b6761;font-family:"Times New Roman",serif;font-size:17px}
.covered{position:absolute;inset:38px 0 0;display:grid;place-items:center;background:#f2ece9;color:#b8aaa4;font-size:58px;font-weight:300}
.form-card.is-visible .covered{display:none}
.meaning{justify-self:center;display:flex;align-items:center;gap:12px;min-height:48px;border-radius:10px;background:#f3eeeb;padding:10px 22px;opacity:0;transform:translateY(7px);transition:.2s ease}
.meaning.visible{opacity:1;transform:none}
.meaning span{color:#8e7d77;font-size:11px;font-weight:900}
.meaning strong{font-size:23px;letter-spacing:-.03em}
.step-dots{display:flex;justify-content:center;gap:7px;padding-top:14px}
.step-dots i{width:8px;height:8px;border-radius:50%;background:#d8ccc7}
.step-dots i.active{background:var(--accent)}
.lesson-nav{display:grid;grid-template-columns:120px 140px minmax(200px,280px);justify-content:center;gap:9px}
.lesson-nav button{min-height:46px}
.lesson-nav .primary{border-color:var(--accent);background:var(--accent);color:#fff;font-size:15px}
.game-panel{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;min-height:0}
.game-panel[hidden]{display:none}
.game-setup{display:flex;align-items:end;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:10px 12px}
.game-setup label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:850}
.game-setup select,.game-setup button,.game-nav button{min-height:38px;border:1px solid #cdbdb6;border-radius:7px;background:#fff;color:#5f514c;padding:7px 12px;font-weight:800}
.game-setup .game-start{margin-left:auto;border-color:var(--accent);background:var(--accent);color:#fff}
.game-scope-picker{position:relative;display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:850}
.game-scope-picker>span{line-height:1.2}
#gameScopeToggle{min-width:170px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-scope-menu{position:absolute;z-index:10;top:calc(100% + 6px);left:0;width:min(520px,calc(100vw - 36px));max-height:390px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;box-shadow:0 18px 45px rgba(48,41,39,.18)}
.game-scope-menu[hidden]{display:none}
.game-scope-actions{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px;background:#fff}
.game-scope-actions button{width:100%;text-align:center}
#gameScopeAll{border-color:var(--accent);background:var(--accent);color:#fff}
#gameScopeNone{border-color:#cdbdb6;background:#fff;color:#6c5b55}
.game-scope-list{display:grid;gap:4px}
.game-scope-option{display:flex!important;grid-template-columns:none!important;align-items:flex-start!important;gap:8px!important;border-radius:7px;padding:7px 8px;color:var(--ink)!important;font-size:11px!important;cursor:pointer}
.game-scope-option:hover{background:#f5efec}
.game-scope-option input{margin:2px 0 0;accent-color:var(--accent)}
.game-scope-option span{display:grid;gap:2px;min-width:0}
.game-scope-option b{font-size:12px}
.game-scope-option small{color:#8e7d77;font-size:10px;font-weight:650;line-height:1.35}
.game-empty{grid-column:1/-1;align-self:center;justify-self:center;margin:0;color:#8e7d77;font-size:16px;font-weight:850}
.game-status{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.game-status>div{display:flex;align-items:baseline;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:10px}
.game-status span{color:var(--muted);font-size:11px;font-weight:850}
.game-status strong{color:var(--accent);font-size:30px;line-height:1}
.game-status small{color:var(--muted);font-size:11px;font-weight:800}
.timer-box.warning{border-color:#d48a73;background:#fff3ef;animation:pulse .7s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.015)}}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-height:0}
.game-card{display:flex;align-items:stretch;min-height:82px;overflow:hidden;border:1px solid #ded2cd;border-radius:12px;background:var(--paper);transition:.15s ease}
.game-card.active{border:2px solid var(--accent);box-shadow:0 6px 18px rgba(128,81,66,.14);transform:translateY(-2px)}
.game-card.done{border-color:#a9c7bd;background:#f5fbf8}
.game-word{position:relative;display:grid;flex:1 1 0;align-self:stretch;place-items:center;min-width:0;min-height:100%;padding:10px 6px;border-left:1px solid #eadfda;text-align:center}
.game-word:first-child{border-left:0;background:#f7f1ee}
.game-word small{position:absolute;top:6px;color:#9b8b84;font-size:8px;font-weight:850}
.game-word strong{max-width:100%;font-size:clamp(16px,1.8vw,24px);line-height:1.05;overflow-wrap:anywhere}
.game-word.is-covered strong{color:transparent}
.game-word.is-covered::after{content:"?";position:absolute;color:#c4b7b1;font-size:25px;font-weight:400}
.game-card.active .game-word.is-covered::after{color:#a9897d}
.game-nav{display:grid;grid-template-columns:140px minmax(240px,420px);justify-content:center;gap:9px}
.game-nav .primary{border-color:var(--accent);background:var(--accent);color:#fff;font-size:15px}
.game-nav button:disabled{cursor:not-allowed;opacity:.45}
.time-up{position:absolute;z-index:4;inset:50% auto auto 50%;display:grid;place-items:center;gap:6px;width:min(360px,85%);border:2px solid var(--accent);border-radius:18px;background:rgba(255,253,252,.97);padding:28px;box-shadow:0 24px 70px rgba(48,41,39,.24);transform:translate(-50%,-50%)}
.time-up[hidden]{display:none}
.time-up strong{color:var(--accent);font-size:34px}
.time-up span{font-size:18px;font-weight:800}
footer{display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--line);padding:10px clamp(16px,3vw,42px);color:#8e7d77;font-size:11px;font-weight:700}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid rgba(128,81,66,.28);outline-offset:2px}
body.fullscreen{height:100dvh;min-height:0;overflow:hidden;grid-template-rows:auto minmax(0,1fr)}
body.fullscreen .topbar{min-height:58px;padding-top:max(7px,env(safe-area-inset-top));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:7px;padding-left:max(24px,env(safe-area-inset-left))}
body.fullscreen main{width:100%;height:100%;min-height:0;padding:16px max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
body.fullscreen .slide{height:100%;min-height:0}
body.fullscreen footer{display:none}
body.game-mode main{grid-template-rows:auto minmax(0,1fr)}
body.game-mode .toolbar,body.game-mode .slide,body.game-mode .lesson-nav{display:none}
@media(max-width:760px){.topbar{grid-template-columns:auto 1fr auto}.title-block h1{font-size:20px}.title-block small{display:none}.back{font-size:0}.back::after{content:"‹ 뒤로";font-size:13px}.class-progress{grid-template-columns:1fr 90px}.progress-summary{grid-column:1/-1;grid-row:2}.class-progress button{min-width:0;padding-inline:7px}.lesson-range{flex-wrap:wrap;align-items:center}.lesson-range>strong{width:auto}.lesson-range label{display:flex;align-items:center;gap:5px}.lesson-range input{width:58px}.lesson-range>small{width:100%;margin-left:0}.toolbar{flex-wrap:wrap}#patternToggle{min-width:190px}.toolbar .word-set-select{width:min(72vw,430px)}.hint{display:none}.forms{grid-template-columns:1fr;gap:8px;padding:12px 0}.form-card{grid-template-columns:70px 1fr auto;grid-template-rows:1fr;min-height:92px;padding:14px}.form-label{align-self:center}.form-card strong{font-size:32px}.ipa{align-self:center;font-size:15px}.covered{inset:0}.meaning strong{font-size:19px}.lesson-nav{grid-template-columns:1fr 1fr}.lesson-nav #reset{display:none}.lesson-nav .primary{grid-column:auto}.slide{min-height:520px;padding:16px 14px}.form-card.is-visible{transform:none}footer{display:none}.game-setup{flex-wrap:wrap}.game-setup .game-start{margin-left:0}.game-status strong{font-size:24px}.game-status span{display:none}.game-grid{grid-template-columns:1fr}.game-card{min-height:70px}.game-nav{grid-template-columns:1fr 2fr}.game-panel{min-height:650px}}
@media(max-width:760px){.toolbar .word-set-select{width:160px}}
@media(max-height:720px) and (min-width:761px){.topbar{min-height:62px;padding-block:7px}.title-block h1{font-size:21px}main{gap:9px;padding-block:10px}.slide{min-height:340px;padding-block:14px}.forms{padding:12px 0 8px}.form-card{min-height:190px}.meaning{min-height:40px}.lesson-nav button{min-height:40px}footer{padding-block:7px}}