*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:#1f2a3d;font-family:"Noto Sans KR","Noto Sans Khmer","Khmer OS Battambang","Malgun Gothic",sans-serif;color:#1b2333}
.hidden{display:none!important}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:560px;margin:0 auto;background:#eef2f8;position:relative;overflow:hidden}
.topbar{flex:0 0 auto;display:grid;grid-template-columns:44px 1fr 64px;align-items:center;background:#4a6fdc;color:#fff;padding:6px 8px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.tb-home{color:#fff;text-decoration:none;font-size:24px;text-align:center}
.tb-mid{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;min-width:0}
.tb-mid img{width:30px;height:30px;border-radius:50%;background:#fff;padding:1px}
.tb-mid span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-timer{font-variant-numeric:tabular-nums;font-weight:700;background:rgba(255,255,255,.18);border-radius:12px;padding:3px 6px;text-align:center;font-size:13px}
.tb-timer.warn{background:#e0483e}
#scroller{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen{padding:14px 14px 24px}
#intro,#result{text-align:center}
.biglogo{display:block;margin:10px auto 6px;width:120px;height:120px;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.15)}
.biglogo.sm{width:84px;height:84px}
h1{font-size:22px;margin:8px 0 2px;color:#21409a}
h2{font-size:18px;margin:8px 0;color:#21409a}
.ko-sub{color:#4a5672;font-size:14px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.facts div,.subscores div{background:#fff;border-radius:12px;padding:10px;box-shadow:0 1px 4px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:2px}
.facts b{font-size:18px;color:#4a6fdc}.facts span{font-size:13px;color:#4a5672}
.note{font-size:13px;color:#4a5672;line-height:1.7;background:#fff8e1;border-radius:10px;padding:10px;text-align:left}
.primary{display:block;width:100%;margin:10px 0 0;border:0;border-radius:12px;padding:13px 10px;font:inherit;font-weight:700;font-size:16px;background:#4a6fdc;color:#fff;text-decoration:none;text-align:center;cursor:pointer}
.primary.green{background:#21a366}.primary.gray{background:#7b8599}
.ghost{display:inline-block;margin-top:12px;color:#4a6fdc;font-size:14px}
.secbar{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#21409a;margin-bottom:6px}
#qCount{background:#fff;border:1px solid #c9d3e6;border-radius:10px;padding:1px 8px;font-size:12px;color:#4a5672}
.instr{font-size:15px;font-weight:700;line-height:1.5}
.instr .km{display:block;font-weight:400;font-size:13px;color:#5a6680}
.qcard{background:#fff;border-radius:14px;padding:12px;margin-top:10px;box-shadow:0 1px 5px rgba(0,0,0,.08)}
.qno{font-weight:700;font-size:16px;margin-bottom:8px}
.stem{font-size:19px;line-height:1.7;white-space:pre-wrap;margin:6px 0 12px}
.stem.word{font-size:34px;text-align:center;font-weight:700;letter-spacing:2px;border:2px solid #d5dcea;border-radius:12px;padding:10px}
.stemimg{display:block;margin:4px auto 12px;width:180px;height:180px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid #e3e8f1}
.box{border:2px solid #4a6fdc;border-radius:10px;overflow:hidden;margin:6px 0 12px;font-size:15px}
.box .bt{background:#4a6fdc;color:#fff;font-weight:700;text-align:center;padding:6px}
.box table{width:100%;border-collapse:collapse}.box td{border-top:1px solid #d5dcea;padding:6px 8px}
.box td+td{border-left:1px solid #d5dcea}
.player{display:flex;align-items:center;gap:10px;background:#eef2f8;border-radius:30px;padding:6px 12px 6px 6px;margin:4px 0 12px}
.player button{width:42px;height:42px;border-radius:50%;border:0;background:#4a6fdc;color:#fff;font-size:18px;cursor:pointer;flex:0 0 auto}
.player .bar{flex:1;height:6px;background:#d5dcea;border-radius:3px;overflow:hidden}
.player .bar i{display:block;height:100%;width:0;background:#4a6fdc}
.player small{font-size:12px;color:#5a6680;font-variant-numeric:tabular-nums}
.opts{display:flex;flex-direction:column;gap:8px}
.opts.pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{display:flex;align-items:center;gap:10px;border:2px solid #d5dcea;background:#fff;border-radius:12px;padding:10px;font:inherit;font-size:18px;text-align:left;cursor:pointer;color:inherit;position:relative}
.opts.pics .opt{flex-direction:column;padding:6px 4px 8px;gap:4px}
.opt img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px}
.opt .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:2px solid #9aa6bf;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.opt.sel{border-color:#4a6fdc;background:#eaf0ff}.opt.sel .n{background:#4a6fdc;border-color:#4a6fdc;color:#fff}
.opt.ok{border-color:#21a366;background:#e7f7ef}.opt.ok .n{background:#21a366;border-color:#21a366;color:#fff}
.opt.bad{border-color:#e0483e;background:#fdecea}.opt.bad .n{background:#e0483e;border-color:#e0483e;color:#fff}
.opt .okm{display:block;font-size:13px;color:#4a5672}
.opt .tx{display:flex;flex-direction:column}
.clock{font-family:"Courier New",monospace;font-weight:700;font-size:26px;background:#1b2333;color:#7dfc9a;border-radius:8px;padding:4px 10px;letter-spacing:2px}
.cal{display:inline-flex;flex-direction:column;border:2px solid #e0483e;border-radius:8px;overflow:hidden;min-width:70px;text-align:center}
.cal b{background:#e0483e;color:#fff;font-size:14px;padding:2px 6px}.cal span{font-size:26px;font-weight:700;padding:2px 6px}
.pager{flex:0 0 auto;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;padding:8px;background:#dfe6f3;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.pager button{border:0;border-radius:10px;padding:11px 4px;font:inherit;font-weight:700;background:#fff;color:#21409a;cursor:pointer}
.pager #btnNext{background:#4a6fdc;color:#fff}
.pager #btnNext.submit{background:#21a366}
.sheet{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet-box{background:#fff;width:100%;max-height:85%;overflow:auto;border-radius:16px 16px 0 0;padding:14px}
.sheet-box.small{border-radius:16px;margin:auto 16px;text-align:center;font-size:16px;line-height:1.6}
.sheet-h{display:flex;justify-content:space-between;align-items:center}
.sheet-h button{border:0;background:none;font-size:20px;cursor:pointer}
.gridlbl{font-weight:700;margin:10px 0 4px;color:#21409a}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.grid button{border:1px solid #c9d3e6;background:#fff;border-radius:8px;padding:6px 0;font:inherit;cursor:pointer}
.grid button.done{background:#4a6fdc;color:#fff;border-color:#4a6fdc}
.grid button.cur{outline:2px solid #f0a020}
.row{display:flex;gap:8px}.row .primary{flex:1}
.score{font-size:58px;font-weight:700;color:#21409a;margin:6px 0}.score small{font-size:16px;color:#5a6680;margin-left:4px}
.pass{font-size:16px;font-weight:700;margin-bottom:10px}
.subscores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 6px}
.subscores b{font-size:13px;color:#5a6680}.subscores span{font-size:18px;font-weight:700}
.revhead{display:flex;flex-direction:column;align-items:center}
.revfilter{display:flex;gap:6px;margin-bottom:6px}
.revfilter button{border:1px solid #4a6fdc;background:#fff;color:#4a6fdc;border-radius:16px;padding:4px 14px;font:inherit;cursor:pointer}
.revfilter button.on{background:#4a6fdc;color:#fff}
.rev{background:#fff;border-radius:14px;padding:12px;margin:10px 0;box-shadow:0 1px 5px rgba(0,0,0,.08);border-left:6px solid #21a366}
.rev.wrong{border-left-color:#e0483e}
.rev .rh{display:flex;justify-content:space-between;font-weight:700;margin-bottom:6px}
.rev .rh .r-ok{color:#21a366}.rev .rh .r-bad{color:#e0483e}
.rev .ins{font-size:13px;color:#5a6680;margin-bottom:6px}
.script{background:#f4f6fb;border-radius:10px;padding:8px 10px;font-size:15px;line-height:1.7;margin:6px 0}
.script .sp{display:inline-block;min-width:22px;font-weight:700;color:#4a6fdc}
.kmq{background:#fff8e1;border-radius:10px;padding:8px 10px;font-size:14px;line-height:1.8;margin:8px 0}
.why{background:#e7f7ef;border-radius:10px;padding:8px 10px;font-size:14px;line-height:1.8;margin-top:8px}
.rev .opt{cursor:default;font-size:16px}
.rev .opts.pics .opt img{max-width:110px}
.revfoot{margin-top:10px}