:root{--reading-scale:1}
.accessibility-settings{display:grid;gap:14px;border-top:2px solid #ddd;padding-top:20px;margin-top:20px}.accessibility-settings label{display:grid;gap:8px;font-weight:800}.accessibility-settings .accessibility-motion{display:flex;align-items:center;gap:12px}.accessibility-motion input{width:24px;height:24px}.reading-preview{font-size:calc(20px * var(--reading-scale));font-weight:800;line-height:1.5;background:#f0f7ff;padding:16px;border-radius:14px}
html:not([data-text-size="100"]) .student-shell :is(p,label,input,textarea,select,summary,.block-label,.student-nav-item,.badge){font-size:calc(16px * var(--reading-scale))!important;line-height:1.4}
html:not([data-text-size="100"]) .student-shell :is(button.primary,button.secondary,.bingo-cell,.sloth-action){font-size:calc(17px * var(--reading-scale))!important;line-height:1.4}
html[data-text-size="150"] .student-block-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}html[data-text-size="150"] .student-play-block{min-height:160px!important;height:auto!important}html[data-text-size="150"] .block-label{white-space:normal!important}
html[data-color-mode="protan"],html[data-color-mode="deutan"]{--green:#0066B3;--ink:#14233B;--yellow:#FFCC40;--blue:#0066B3}
html[data-color-mode="tritan"]{--green:#00887D;--blue:#D74770;--yellow:#FFC0CD;--ink:#172A28}
html:not([data-color-mode="standard"]) .student-play-block{border:3px solid #183343!important}html:not([data-color-mode="standard"]) .student-play-block:nth-child(2n){border-style:dashed!important}html:not([data-color-mode="standard"]) .student-play-block:nth-child(3n){border-style:double!important;border-width:5px!important}
html:not([data-color-mode="standard"]) :is(.bingo-cell.drawn,.bingo-draft-map .selected){background:#003F74!important;color:white!important;border:3px solid #FFD447!important}
html[data-color-mode="contrast"] :is(.panel,.modal,.student-play-block,.student-header){background:#fff!important;color:#111!important;border:3px solid #111!important}html[data-color-mode="contrast"] :is(.muted,.badge,small){color:#222!important}html[data-color-mode="contrast"] .primary{background:#111!important;color:white!important}
html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
.bingo-write{max-width:560px;margin:auto}.bingo-write h2{font-size:clamp(24px,5vw,36px)}.bingo-write form{display:grid;gap:12px}.bingo-word-input{font-size:24px!important;min-height:64px}.bingo-draft-map{display:grid;grid-template-columns:repeat(var(--bingo-size),minmax(0,1fr));gap:5px;margin:18px 0}.bingo-draft-map button{min-height:44px;border:2px solid #cbd4e5;border-radius:10px;background:#fff;font-size:12px;overflow-wrap:anywhere}.bingo-draft-map .selected{background:#ffe277;border-color:#213346}.bingo-student-panel .bingo-cell{position:relative;cursor:pointer}.bingo-cell small{position:absolute;right:4px;top:2px;font-weight:900}.bingo-ready-list{margin:16px 0}.bingo-master form{display:grid;gap:12px;margin:14px 0}.bingo-master .primary{min-height:52px}.bingo-master .secondary{margin-bottom:16px}
.student-help-button{border:0;background:#E4F6FC;color:#183343;min-width:44px;min-height:44px;border-radius:14px;font-weight:900;font-size:20px}

.student-main{font-size:calc(16px * var(--reading-scale))}html:not([data-text-size="100"]) .student-shell :is(.cow-main,.cow-soft,.cow-card,.rally-main,.sinking-main){font-size:calc(17px * var(--reading-scale))!important}

.native-board-drawer{margin-top:12px;border:2px solid #C4D7E8;border-radius:18px;overflow:hidden}.native-board-drawer>summary{min-height:48px;padding:12px 16px;font-weight:900;background:#EEF8FD;cursor:pointer}.exam-student{max-width:600px;margin:auto}.exam-options{display:grid;gap:12px;margin:20px 0}.student-answer{min-height:64px;border:3px solid #A8BDD1;border-radius:18px;background:white;padding:12px;text-align:left;font:inherit;font-weight:800}.student-answer b{display:inline-grid;place-items:center;background:#E6F3FF;width:36px;height:36px;border-radius:10px;margin-right:12px}.student-answer.selected{border-color:#1B638A;background:#DBF2FF;box-shadow:0 5px 0 #1B638A}.account-classrooms{display:grid;gap:12px;margin:16px 0}.account-classrooms button{display:grid;gap:5px;text-align:left}.modal fieldset{border:2px solid #D6DFE7;border-radius:18px;padding:16px;margin:16px 0}.modal legend{font-weight:900}
html:not([data-text-size="100"]) :is(.teacher-shell,.student-shell,.modal){font-size:calc(16px * var(--reading-scale))}html:not([data-text-size="100"]) :is(.teacher-shell,.student-shell,.modal) :is(p,label,input,textarea,select,summary,button,small,.badge){font-size:calc(16px * var(--reading-scale))!important;line-height:1.45!important}html:not([data-text-size="100"]) :is(.teacher-shell,.student-shell,.modal) h2{font-size:calc(24px * var(--reading-scale))!important;line-height:1.3}html:not([data-text-size="100"]) :is(.teacher-shell,.student-shell,.modal) h3{font-size:calc(20px * var(--reading-scale))!important;line-height:1.3}html:not([data-text-size="100"]) :is(.classic-cell,.gomoku-cell,.bingo-draft-map button){font-size:calc(13px * var(--reading-scale))!important}html:not([data-color-mode="standard"]) :is(.student-answer.selected,.classic-cell.selected,.classic-cell.is-target){outline:3px dashed #173654!important;outline-offset:-3px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #1766AA;outline-offset:3px}

.native-library-group{border:2px solid #C8D9E5;border-radius:18px;margin-top:14px;overflow:hidden}.native-library-group>summary{min-height:58px;padding:16px;font-weight:900;cursor:pointer;background:#F0F9EC}.native-library-group .boardgame-category{padding:12px}.teacher-ecosystem{flex-wrap:wrap}.native-game-designer [data-native-count]{font-weight:900;padding:12px;background:#E9F6FF;border-radius:12px}.teacher-progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.teacher-progress-card{border:2px solid #CDDDEA;padding:12px;border-radius:18px}.teacher-progress-card img{width:100%;background:white;border:1px solid #CDDDEA;border-radius:12px}

.teacher-coding-map{display:grid;grid-template-columns:repeat(var(--coding-cols),1fr);gap:5px;margin:15px 0}.teacher-coding-map button{min-height:48px;border:2px solid #C3DA9E;background:#F5FFE8;border-radius:10px;font:inherit;font-weight:900}.student-shell .bingo-cell{font-family:inherit;font-size:clamp(18px,4vw,24px);font-weight:800}.teacher-progress-card pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto}

/* Claude Settings reference: scoped to the existing working settings modal. */
.modal:has(.accessibility-settings){background:#F3F8FF;color:#1F2440;border:2px solid #D5DEEE;border-radius:28px;padding:24px;max-width:600px;scroll-padding:24px}
.modal:has(.accessibility-settings) h2{font-family:'Ddanjit Jua',var(--ui-font,system-ui),sans-serif;font-size:clamp(26px,5vw,32px);font-weight:400;line-height:1.25;margin:0 0 20px;color:#1F2440}
.modal:has(.accessibility-settings) :is(button,select,input){touch-action:manipulation}
.modal:has(.accessibility-settings) :is(button,select){min-height:48px}
.modal:has(.accessibility-settings) :is(button,select,input):focus-visible{outline:4px solid #1F2440;outline-offset:4px}
.modal:has(.accessibility-settings) .sensory-settings{gap:12px;color:#1F2440}
.modal:has(.accessibility-settings) .sensory-toggle{min-height:68px;box-sizing:border-box;padding:14px 16px;gap:12px;border:2px solid #D5DEEE;border-radius:22px;background:#FFFFFF;color:#1F2440;box-shadow:0 4px 0 #D5DEEE;transition:transform .08s,box-shadow .08s}
.modal:has(.accessibility-settings) .sensory-toggle:has(input:checked):not(:has(input:disabled)){border-color:#7FAE0B;background:#EAF8B8;box-shadow:0 4px 0 #7FAE0B}
.modal:has(.accessibility-settings) .sensory-toggle:active{transform:translateY(3px);box-shadow:0 1px 0 #D5DEEE}
.modal:has(.accessibility-settings) .sensory-toggle-copy{gap:3px;flex:1;min-width:0}
.modal:has(.accessibility-settings) .sensory-toggle-copy b{font:inherit;font-size:calc(20px * var(--reading-scale));line-height:1.35;font-weight:850;letter-spacing:-.025em}
.modal:has(.accessibility-settings) .sensory-toggle-copy small{font-size:13px;font-weight:500;color:#4A5170;line-height:1.5;max-width:none}
.modal:has(.accessibility-settings) .sensory-toggle input{right:16px;width:68px;height:48px}
.modal:has(.accessibility-settings) .sensory-switch{width:68px;height:40px;box-sizing:border-box;border:0;background:#D5DEEE;box-shadow:none;border-radius:24px;flex-shrink:0;margin-left:30px}
.modal:has(.accessibility-settings) .sensory-switch:before{content:'끔';position:absolute;right:calc(100% + 8px);top:9px;color:#1F2440;font-size:14px;line-height:22px;font-weight:800}
.modal:has(.accessibility-settings) .sensory-switch:after{width:32px;height:32px;box-sizing:border-box;top:4px;left:4px;border:3px solid #1F2440;background:#FFFFFF}
.modal:has(.accessibility-settings) .sensory-toggle input:checked+.sensory-switch{background:#B8E62E}
.modal:has(.accessibility-settings) .sensory-toggle input:checked+.sensory-switch:before{content:'켬'}
.modal:has(.accessibility-settings) .sensory-toggle input:checked+.sensory-switch:after{transform:translateX(28px)}
.modal:has(.accessibility-settings) .sensory-toggle input:focus-visible+.sensory-switch{outline:4px solid #1F2440;outline-offset:4px;box-shadow:none}
.modal:has(.accessibility-settings) .sensory-toggle:has(input:disabled){background:#F3F8FF;border-color:#D5DEEE;color:#4A5170;box-shadow:0 3px 0 #D5DEEE}
.modal:has(.accessibility-settings) .sensory-toggle input:disabled+.sensory-switch{opacity:1;background:#D5DEEE}
.modal:has(.accessibility-settings) .sensory-toggle input:disabled+.sensory-switch:before{content:'지원 안 됨';font-size:11px;right:0;top:calc(100% + 2px);white-space:nowrap}
.modal:has(.accessibility-settings) .sensory-toggle:has(input:disabled){padding-bottom:22px}
.modal:has(.accessibility-settings) .sensory-volume{min-height:68px;box-sizing:border-box;padding:14px 16px;margin:0;gap:10px;background:#FFFFFF;border:2px solid #D5DEEE;border-radius:22px;color:#1F2440}
.modal:has(.accessibility-settings) .sensory-volume b{font-size:18px;font-weight:850}
.modal:has(.accessibility-settings) .sensory-volume output{font-size:16px;color:#1F2440}
.modal:has(.accessibility-settings) .sensory-volume select{width:100%;box-sizing:border-box;min-height:48px;border:2px solid #D5DEEE;border-radius:14px;padding:10px 12px;background:#F3F8FF;color:#1F2440;font:inherit;font-weight:700}
.modal:has(.accessibility-settings) .sensory-volume input[type=range]{height:48px;accent-color:#1F2440;touch-action:pan-y}
.modal:has(.accessibility-settings) .sensory-preview{gap:10px}
.modal:has(.accessibility-settings) .sensory-test{min-height:52px!important;border-color:#D5DEEE!important;color:#1F2440!important;background:#FFFFFF!important;box-shadow:0 4px 0 #D5DEEE!important}
.modal:has(.accessibility-settings) .sensory-test:active{box-shadow:0 1px 0 #D5DEEE!important}
.modal:has(.accessibility-settings) .sensory-status{padding:8px 4px;margin:0;color:#4A5170;font-size:13px;font-weight:500}
.accessibility-settings{margin-top:20px;padding-top:20px;gap:14px;border-top:2px solid #D5DEEE;color:#1F2440}
.accessibility-settings h3{font-family:'Ddanjit Jua',var(--ui-font,system-ui),sans-serif;font-size:22px;font-weight:400;line-height:1.35;margin:0 0 2px}
.modal .accessibility-settings .accessibility-size-group{display:grid;gap:12px;min-width:0;margin:0;padding:16px;border:2px solid #D5DEEE;border-radius:22px;background:#FFFFFF}
.accessibility-size-group legend{padding:0 6px;font-family:'Ddanjit Jua',var(--ui-font,system-ui),sans-serif;font-size:calc(20px * var(--reading-scale));font-weight:400;color:#1F2440}
.accessibility-size-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.accessibility-settings .accessibility-choice{position:relative;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;min-height:68px;box-sizing:border-box;padding:12px 8px;border:2px solid #D5DEEE;border-radius:16px;background:#F3F8FF;color:#1F2440;box-shadow:0 4px 0 #D5DEEE;cursor:pointer;transition:transform .08s,box-shadow .08s;overflow-wrap:anywhere}
.accessibility-choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.accessibility-choice-name{font-size:calc(15px * var(--reading-scale));font-weight:800;line-height:1.4}
.accessibility-size-sample{font-family:inherit;font-size:var(--sample-size);font-weight:850;line-height:1.1}
.accessibility-choice-check{display:none;align-items:center;justify-content:center;gap:3px;font-size:calc(14px * var(--reading-scale));font-weight:850;line-height:1.3;width:100%}
.accessibility-choice:has(input:checked){background:#B8E62E;border-color:#7FAE0B;color:#1F2440;box-shadow:0 4px 0 #7FAE0B}
.accessibility-choice:has(input:checked) .accessibility-choice-check{display:flex}
.accessibility-choice:has(input:focus-visible){outline:4px solid #1F2440;outline-offset:4px}
.accessibility-choice:active{transform:translateY(3px);box-shadow:0 1px 0 #D5DEEE}
.accessibility-preview-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:4px;color:#4A5170;font-size:14px;font-weight:600}
.accessibility-preview-heading output{color:#1F2440;font-weight:800}
.modal:has(.accessibility-settings) .reading-preview{margin:0;padding:16px;border:2px dashed #D5DEEE;border-radius:16px;background:#F3F8FF;color:#1F2440;font-size:calc(20px * var(--reading-scale))!important;line-height:1.5!important;font-weight:800;overflow-wrap:anywhere}
.accessibility-settings .accessibility-color{padding:16px;border:2px solid #D5DEEE;border-radius:22px;background:#FFFFFF;gap:10px;min-height:68px;box-sizing:border-box;font-size:20px;color:#1F2440}
.accessibility-color select{min-height:48px;width:100%;box-sizing:border-box;border:2px solid #D5DEEE;border-radius:14px;background:#F3F8FF;color:#1F2440;font:inherit;font-size:16px;line-height:1.4;padding:10px 12px}
.accessibility-settings .accessibility-motion{min-height:68px;box-sizing:border-box;padding:14px 16px;gap:12px;background:#FFFFFF;border:2px solid #D5DEEE;border-radius:22px;box-shadow:0 4px 0 #D5DEEE;cursor:pointer}
.accessibility-motion-copy{display:grid;gap:3px;flex:1;min-width:0}
.accessibility-motion-copy b{font-size:calc(20px * var(--reading-scale));font-weight:850;line-height:1.35}
.accessibility-motion-copy small{font-size:13px;line-height:1.5;color:#4A5170;font-weight:500}
.accessibility-motion-state{font-size:14px;font-weight:800;color:#1F2440}
.accessibility-motion .accessibility-on{display:none}
.accessibility-motion:has(input:checked){border-color:#7FAE0B;background:#EAF8B8;box-shadow:0 4px 0 #7FAE0B}
.accessibility-motion:has(input:checked) .accessibility-on{display:inline}
.accessibility-motion:has(input:checked) .accessibility-off{display:none}
.accessibility-motion input{width:32px;height:32px;margin:0;flex:none;accent-color:#1F2440}
.accessibility-motion:has(input:focus-visible){outline:4px solid #1F2440;outline-offset:4px}
.accessibility-settings .accessibility-reset{min-height:52px;background:#FFFFFF;color:#1F2440;border:2px solid #D5DEEE;border-radius:16px;box-shadow:0 4px 0 #D5DEEE;font:inherit;font-weight:800;margin:2px 0 6px}
html[data-color-mode=contrast] .modal:has(.accessibility-settings) :is(.sensory-toggle,.sensory-volume,.accessibility-size-group,.accessibility-choice,.accessibility-color,.accessibility-motion,.reading-preview){border-color:#111!important;color:#111!important}
html[data-color-mode=contrast] .modal:has(.accessibility-settings) :is(.sensory-toggle:has(input:checked),.accessibility-choice:has(input:checked),.accessibility-motion:has(input:checked)){background:#FFD43B!important;color:#111!important;outline:2px solid #111;outline-offset:0}
html:not([data-color-mode=standard]) .accessibility-choice:has(input:checked){outline:3px dashed #1F2440;outline-offset:-3px}
@media(max-width:440px){.modal:has(.accessibility-settings){padding:16px;border-radius:24px}.modal:has(.accessibility-settings) .sensory-toggle{padding:12px;gap:8px}.modal:has(.accessibility-settings) .sensory-toggle-copy b{font-size:calc(18px * var(--reading-scale))}.modal:has(.accessibility-settings) .sensory-toggle input{right:12px}.modal:has(.accessibility-settings) .sensory-switch{margin-left:24px}.modal .accessibility-settings .accessibility-size-group{padding:12px}.accessibility-size-options{gap:10px}.accessibility-choice-name{font-size:calc(14px * var(--reading-scale))}.modal:has(.accessibility-settings) .sensory-toggle:has(input:disabled){padding-bottom:22px}}
.accessibility-settings .accessibility-choice:has(input:focus-visible){outline:4px solid #1F2440!important;outline-offset:4px!important}
html[data-reduced-motion=true] :is(.accessibility-choice,.sensory-toggle,.sensory-test):active{transform:none!important}
@media(prefers-reduced-motion:reduce){.accessibility-choice{transition:none}.accessibility-choice:active{transform:none}}
