/* Unified quiz experience. Exact same UI selectors across / and /jp/. */
:root{--dl-ink:#202746;--dl-line:#e5e9f3;--dl-muted:#72809b;--dl-accent:#535fc7;--dl-surface:#fff}
body.dl-app{background:#f5f6fb;color:var(--dl-ink);font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
body.dl-app main{max-width:980px;margin:auto;padding:18px 16px 48px}
body.dl-app header{background:linear-gradient(120deg,#202e62,#303e82 75%,#6554a5);color:#fff;border-radius:24px;min-height:176px;padding:25px 28px}
body.dl-app .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}
body.dl-app .stat{border:1px solid var(--dl-line);background:#fff;border-radius:16px;padding:14px 15px;min-width:0}
body.dl-app .stat b{font-size:23px;color:var(--dl-ink);letter-spacing:-.5px}
body.dl-app .stat small,body.dl-app .stat span,body.dl-app .stat>small{font-size:12px;color:var(--dl-muted)}
body.dl-app #tabs{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none;background:#e9ecf5;padding:5px;border-radius:16px}
body.dl-app #tabs .tab{border:0;background:transparent;border-radius:12px;font-size:13px;min-height:44px;white-space:nowrap;flex:1 0 auto;padding:10px 13px;font-weight:750;color:#5f6a84;box-shadow:none}
body.dl-app #tabs .tab.active{background:#fff;color:#444cab;box-shadow:0 2px 10px #202c4812}
body.dl-app .toolbar,body.dl-app .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:15px 0 12px}
body.dl-app .filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.dl-app .filters select{font-size:13px;padding:9px 12px;border-radius:10px;border:1px solid #dce2ef;background-color:#fff;min-width:100px;color:#34405b}
body.dl-app .quiz-card,body.dl-app section.card{background:white;border:1px solid var(--dl-line);border-radius:20px;box-shadow:0 10px 32px #14234c0a;overflow:hidden}
body.dl-app .primary{background:#545fcd;color:white;border-radius:11px;box-shadow:none;min-height:44px}
body.dl-app .choice{border:1px solid #e0e5f1;border-radius:12px;color:#283654}
body.dl-app .choice.correct,body.dl-app .choice.good{border-color:#4bb89c;background:#effaf5;color:#0e674f}
body.dl-app .choice.wrong,body.dl-app .choice.bad{border-color:#e9a5ab;background:#fff2f3;color:#a53c47}
body.dl-app .tag,body.dl-app #tag{color:#4f51ab;font-weight:800;font-size:12px}
body.dl-app .audio,body.dl-app .audio-box{border:1px solid #dddffd;background:#f1f2ff;border-radius:14px;color:#404bb3}
body.dl-app .dl-show-results{border:1px solid #dfe3f1;background:white;border-radius:10px;padding:9px 13px;color:#4c55a3;font-size:13px;font-weight:800;white-space:nowrap;min-height:40px}
body.dl-app .dl-replay{margin-top:12px;border:1px solid #d2d9f6;border-radius:10px;background:#fff;color:#4b54b8;font-size:13px;padding:10px 13px;font-weight:800}
body.dl-app .dl-finish{text-align:center;padding:38px 18px}
body.dl-app .dl-finish-mark{font-size:42px}
body.dl-app .dl-finish h2{font-size:23px;margin:12px 0 9px;line-height:1.5}
body.dl-app .dl-finish-score{font-size:44px;font-weight:900;letter-spacing:-1px;color:#4e5fcb}
body.dl-app .dl-finish-score small{font-size:17px;letter-spacing:0;font-weight:650;color:#76829c}
body.dl-app .dl-finish-context{font-size:13px;color:#737f98;margin:5px 0}
body.dl-app .dl-finish-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:20px}
body.dl-app .dl-finish-actions .secondary{padding:11px 15px;border:1px solid #e1e5f1;border-radius:11px;background:#fff;color:#4c5682;min-height:44px}
.dl-report-overlay{position:fixed;inset:0;background:#131c3a99;z-index:99;display:grid;place-items:center;padding:15px}
.dl-report-card{width:min(100%,475px);background:white;color:#202746;padding:23px;border-radius:19px;box-shadow:0 15px 60px #121a3550}
.dl-report-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:18px}
.dl-close-report{border:1px solid #e0e5ef;border-radius:9px;background:white;padding:8px 11px;font-size:12px;color:#616d83}
.dl-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0}
.dl-report-grid>div{background:#f5f6fc;border-radius:12px;text-align:center;padding:13px 6px}
.dl-report-grid span{display:block;color:#73819a;font-size:11px}
.dl-report-grid b{display:block;margin-top:3px;font-size:23px}
.dl-report-last{padding:14px;border:1px solid #e5e9f3;border-radius:13px}
.dl-report-last>strong{font-size:13px}
.dl-report-strong{font-size:20px;font-weight:850;margin:7px 0}
.dl-report-last p,.dl-report-note{font-size:12px;color:#78849b;line-height:1.6}
.dl-report-note{margin:13px 0 0}
body.dl-app .dl-quiz-save{border:1px solid #e1e5ef;background:#fff;border-radius:9px;font-size:19px;color:#8a93a6;width:36px;height:36px}
body.dl-app .dl-quiz-save.saved{color:#c88b19;background:#fff7dd;border-color:#f0dc9d}
@media(max-width:700px){body.dl-app main{padding:10px 10px 42px}body.dl-app header{padding:21px 19px;min-height:145px;border-radius:19px}body.dl-app .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body.dl-app .stat{padding:11px 12px}body.dl-app #tabs .tab{padding:10px 11px}body.dl-app .filters select{min-width:0}body.dl-app .dl-report-grid b{font-size:19px}}

/* Shared audio controls, layout rhythm and icons for both languages. */
body.dl-app .brandmark,body.dl-app .mark{display:inline-grid;place-items:center;background:#b9f18f;color:#17305f;width:34px;height:34px;border-radius:10px;font-size:21px;letter-spacing:0;flex-shrink:0}
body.dl-app .brand{font-size:12px;font-weight:800;letter-spacing:2px;color:#e3eaff}
body.dl-app header h1{font-size:clamp(25px,4vw,35px);line-height:1.3;font-weight:850;letter-spacing:-1px;margin:11px 0 8px}
body.dl-app .hero-goal,body.dl-app .daily-goal{border:1px solid #ffffff40;border-radius:18px;background:#ffffff18;min-width:116px;padding:12px 16px;flex-shrink:0;text-align:center}
body.dl-app .hero-goal .big,body.dl-app .daily-goal>b{font-size:30px;line-height:1.25}
body.dl-app .dl-results-toolbar{display:flex;justify-content:flex-end;margin:-2px 0 10px}
body.dl-app .toolbar p,body.dl-app .bar strong{font-size:13px;color:#596680;font-weight:750;margin:0}
body.dl-app .answers{grid-template-columns:1fr;gap:8px}
body.dl-app .choice{font-size:14px;font-weight:650;min-height:58px;padding:12px 14px;margin:0 0 8px;line-height:1.5}
body.dl-app #area .choice{width:100%}
body.dl-app .question h2,body.dl-app h2.question{font-size:clamp(21px,3vw,25px);line-height:1.45;font-weight:820;letter-spacing:-.5px;margin:10px 0 17px}
body.dl-app .dl-audio-controls{display:flex;align-items:stretch;gap:9px;margin:12px 0 14px}
body.dl-app .dl-audio-play{flex:1;display:flex;align-items:center;justify-content:center;min-height:59px;background:#f0f1ff;color:#404ab1;font-weight:800;border:1px solid #d8dcff;border-radius:13px;padding:12px}
body.dl-app .dl-audio-slow{background:#fff;border:1px solid #dee1f8;color:#4a53b7;font-size:12px;font-weight:750;padding:10px 13px;border-radius:12px;min-width:108px}
body.dl-app .dl-quiz-save{display:inline-grid;place-items:center}
body.dl-app .dl-question-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.dl-app .dl-replay:focus-visible,body.dl-app .dl-audio-play:focus-visible,body.dl-app .dl-audio-slow:focus-visible,body.dl-app .dl-show-results:focus-visible{outline:3px solid #a6a1f1;outline-offset:3px}
body.dl-app.dl-ja section.card{padding:21px 23px}
body.dl-app.dl-ja section.card .card-top{padding:0}
body.dl-app.dl-ja section.card .meter{margin:16px 0 20px}
body.dl-app.dl-ja #area .choice.good{border-color:#53be9c;background:#e9f8f1}
body.dl-app.dl-ja #area .choice.bad{border-color:#e49a9d;background:#fff0f1}
body.dl-app.dl-ja .answer-feedback{padding:16px;border-radius:13px}
body.dl-app .stat b small{font-size:12px;letter-spacing:0}
@media(max-width:700px){body.dl-app header h1{font-size:25px}body.dl-app .dl-audio-controls{gap:7px}body.dl-app .dl-audio-play{font-size:13px;min-height:55px}body.dl-app .dl-audio-slow{min-width:95px;padding:9px 8px;font-size:11px}body.dl-app.dl-ja section.card{padding:18px 15px}body.dl-app .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Consistent mobile-safe question navigation for both languages */
body.dl-app .dl-quiz-navigation{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;width:100%;padding:15px 22px 18px;border-top:1px solid #eef1f7}
body.dl-app .dl-quiz-navigation button{white-space:nowrap;word-break:keep-all;overflow-wrap:normal;min-width:0;min-height:43px;border-radius:11px;padding:10px 15px;font-size:13px;font-weight:800;line-height:1.25;box-shadow:none}
body.dl-app .dl-nav-back{grid-column:1;justify-self:start;background:#fff;border:1px solid #dbe2f1;color:#516078}
body.dl-app .dl-nav-skip{grid-column:2;background:#fff;border:1px solid #dbe2f1;color:#69748a}
body.dl-app .dl-nav-grade,body.dl-app .dl-nav-next{grid-column:3;background:#535fc7;color:#fff;border:1px solid #535fc7}
body.dl-app .dl-quiz-navigation button:disabled{opacity:.38;cursor:not-allowed}
body.dl-app.dl-ja .actions{display:block;padding:0;margin:14px -23px -21px}
body.dl-app.dl-ja .actions .dl-quiz-navigation{padding:14px 23px 18px}
@media(max-width:500px){
 body.dl-app .dl-quiz-navigation{grid-template-columns:repeat(3,minmax(0,1fr));padding:13px 13px 15px;gap:7px}
 body.dl-app .dl-quiz-navigation button{justify-self:stretch;width:100%;padding:10px 5px;font-size:12px}
 body.dl-app.dl-ja .actions{margin:14px -15px -18px}
 body.dl-app.dl-ja .actions .dl-quiz-navigation{padding:13px 15px 15px}
}
@media(max-width:360px){
 body.dl-app .dl-quiz-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.dl-app .dl-nav-back{grid-column:1}
 body.dl-app .dl-nav-skip{grid-column:2}
 body.dl-app .dl-nav-next{grid-column:2}
 body.dl-app .dl-nav-grade{grid-column:1 / -1;grid-row:2}
}