/* Shared UX surfaces. Solid backgrounds pair with explicit text in both themes. */
html[data-eco-theme=dark]{--ux-panel:#142638;--ux-ink:#f4fff8;--ux-muted:#c4d8d0;--ux-soft:#20394a;--ux-line:#85b8a8;--ux-accent:#b8efd3;--ux-on-accent:#17382c}
html[data-eco-theme=white]{--ux-panel:#ffffff;--ux-ink:#17382c;--ux-muted:#405c51;--ux-soft:#edf4f0;--ux-line:#56776a;--ux-accent:#17654c;--ux-on-accent:#ffffff}
html[data-eco-theme] body header nav,html[data-eco-theme] body .mobile-menu,html[data-eco-theme] body .topics{background:var(--ux-panel)!important;color:var(--ux-ink)!important}
html[data-eco-theme] body :is(header nav,.mobile-menu,.topics) a{color:var(--ux-ink)!important;background:var(--ux-panel)!important;opacity:1!important;text-shadow:none!important;min-height:44px;display:inline-flex;align-items:center}
html[data-eco-theme] body :is(.eco-ux-home button,.eco-ux-home a,.eco-welcome-dialog button){font:700 16px/1.5 system-ui;min-height:46px;border:1px solid var(--ux-line);border-radius:12px;padding:10px 16px;cursor:pointer;background:var(--ux-soft);color:var(--ux-ink);text-decoration:none}
.eco-ux-home{max-width:1280px;margin:auto}.eco-ux-home>section{margin:0 0 36px}.eco-ux-hero,.eco-ux-learning{border:1px solid var(--ux-line);background:var(--ux-panel);padding:clamp(22px,5vw,48px);border-radius:24px;color:var(--ux-ink)}
.eco-ux-home h1{white-space:pre-line;font:800 clamp(30px,5vw,52px)/1.2 system-ui;letter-spacing:-.04em;margin:14px 0;color:var(--ux-ink)!important}.eco-ux-home h2{font:800 clamp(23px,3.2vw,30px)/1.4 system-ui;color:var(--ux-ink)!important}.eco-ux-home h3{font:800 21px/1.4 system-ui;margin:10px 0;color:var(--ux-ink)!important}
.eco-ux-home p{font-size:17px;line-height:1.65;color:var(--ux-muted)!important}.eco-ux-home small,.eco-ux-home .english-eyebrow{color:var(--ux-muted)!important}.eco-ux-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 10px}
html[data-eco-theme] body .eco-ux-primary{background:var(--ux-accent)!important;color:var(--ux-on-accent)!important;border-color:var(--ux-accent)!important}
.eco-purpose-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.eco-purpose-grid a,.eco-purpose-grid button{text-align:center;display:flex;align-items:center;justify-content:center}.eco-recommend-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.eco-recommend-grid article{padding:20px;border:1px solid var(--ux-line);border-radius:18px;background:var(--ux-panel);color:var(--ux-ink)}.eco-recommend-grid article>span{font-size:32px}.eco-recommend-grid p{font-size:16px}.eco-recommend-grid .eco-ux-actions{display:grid}.eco-ux-home .english-family-card{padding:0!important}.eco-ux-home .english-family-art{border:0!important}.eco-ux-home .english-family-copy{padding:18px}.eco-ux-home .english-family-copy small{font-size:14px;display:block;margin:8px 0}.eco-ux-home .english-family-heading{margin-top:36px}.eco-ux-home .english-family-grid{margin-bottom:36px}.eco-ux-home .english-family-copy p{font-size:16px}.eco-ux-home .english-family-art{animation:none!important}.eco-ux-home .english-category button{font-size:15px!important}
.eco-welcome-dialog{box-sizing:border-box;width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:2px solid var(--ux-line);border-radius:22px;padding:26px;background:var(--ux-panel);color:var(--ux-ink);font:17px/1.65 system-ui;overscroll-behavior:contain}.eco-welcome-dialog::backdrop{background:#041916bd}.eco-welcome-dialog h2{font-size:27px;line-height:1.4;clear:both}.eco-welcome-dialog p{color:var(--ux-ink)}.eco-welcome-dialog small{color:var(--ux-muted);display:block}.eco-welcome-dialog label{display:flex;align-items:center;gap:10px;font-size:14px;min-height:44px}.eco-welcome-dialog input{width:20px;height:20px;accent-color:var(--ux-accent)}.eco-dialog-close{float:right;margin-bottom:12px}.eco-preview-dialog{width:min(720px,calc(100% - 24px))}.eco-preview-dialog video{width:100%;max-height:60dvh;background:#0a1220;border-radius:12px}
html[data-eco-theme] .eco-guide-summary{display:grid;gap:12px;margin:16px 0;text-align:left}.eco-guide-summary>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--ux-line);border-radius:12px;background:var(--ux-soft)}.eco-guide-summary dt{font-weight:800;font-size:18px}.eco-guide-summary dd{margin:0;font-size:18px;line-height:1.55;color:var(--ux-ink)}.eco-guide-details summary{min-height:44px;cursor:pointer;font-size:17px;padding:10px}.eco-silent-note{font-size:15px!important;line-height:1.5!important;color:var(--ux-muted)!important}.eco-play-guide .eco-guide-continue{position:static!important;padding:0!important}.eco-guide-help-button{width:auto!important;max-width:none!important;font-size:14px!important;white-space:nowrap;padding:7px 10px!important}.game-header .head-actions button{font-size:14px;white-space:nowrap}
/* All existing question/goal panels share this readable card contract. */
html[data-eco-theme] body :is(.game-modal,.game-shell,.eco-english-game) :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.runner-quiz,.eco-goal-cue){background:var(--ux-panel)!important;color:var(--ux-ink)!important;border:2px solid var(--ux-line)!important;box-shadow:0 2px 6px #0002!important;animation:none!important;background-image:none!important;text-shadow:none!important;isolation:isolate}
html[data-eco-theme] body :is(.game-modal,.game-shell,.eco-english-game) :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.runner-quiz,.eco-goal-cue)::before{background:var(--ux-soft)!important;color:var(--ux-ink)!important;box-shadow:none!important;animation:none!important;font-size:13px}
html[data-eco-theme] body :is(.sky-question-title,.wb-quiz h3,.sentence-prompt,.em-mission,.eco-match-check h3,.safari-study-guide,.eco-study-question,.runner-quiz,.eco-goal-cue)::after{display:none!important;animation:none!important}
html[data-eco-theme] body .eco-question-text{padding-right:0!important;font:inherit;line-height:inherit}
html[data-eco-theme] body .eco-question-text>.eco-question-glow{color:var(--ux-ink)!important;-webkit-text-fill-color:var(--ux-ink)!important;background:none!important;background-image:none!important;text-shadow:none!important;animation:none!important;filter:none!important}
html[data-eco-theme] body :is(.sky-question-meaning,.wb-quiz h3,.sentence-prompt strong,.em-mission h3,.eco-match-check h3,.eco-study-question,.game-shell .runner-question,.game-shell .eco-goal-cue strong){font-size:clamp(20px,3.6vw,28px)!important;line-height:1.45!important;color:var(--ux-ink)!important;text-shadow:none!important;word-break:keep-all;overflow-wrap:anywhere}
html[data-eco-theme] body :is(.sky-question-caption,.sentence-prompt small,.em-mission small,.safari-study-guide p,.runner-quiz-meta,.runner-answer-hint,.runner-explanation){color:var(--ux-ink)!important;text-shadow:none!important}
html[data-eco-theme] body .runner-quiz.is-correct{border-color:#39976a!important}html[data-eco-theme] body .runner-quiz.is-wrong{border-color:#c47738!important}
html[data-eco-theme] body .runner-quiz.is-correct::before{content:'✓ 정답 확인'}html[data-eco-theme] body .runner-quiz.is-wrong::before{content:'정답과 해설 확인'}
.eco-stick-group{display:flex;align-items:center;gap:14px;justify-content:flex-start;width:100%;padding:4px}.eco-stick-group small{font-size:14px;max-width:140px;line-height:1.4}.eco-joystick{position:relative;width:104px;height:104px;flex:0 0 104px;border-radius:50%;border:2px solid var(--ux-line);background:var(--ux-soft);touch-action:none;user-select:none;cursor:grab;display:grid;place-items:center}.eco-joystick[aria-disabled=true]{opacity:.45}.eco-stick-arrows{text-align:center;font:700 15px/1.5 system-ui;color:var(--ux-ink);pointer-events:none}.eco-stick-knob{position:absolute;width:42px;height:42px;border-radius:50%;background:var(--ux-accent);border:2px solid var(--ux-ink);pointer-events:none;box-shadow:0 2px 6px #0003}.game-shell .mobile-controls:has(.eco-joystick){height:auto!important;min-height:114px!important;overflow:visible!important;justify-content:flex-start}
@media(max-width:760px){.eco-recommend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.eco-purpose-grid{grid-template-columns:1fr}.eco-guide-summary>div{grid-template-columns:1fr;gap:5px}.eco-guide-summary dd{font-size:18px}.eco-ux-home .english-family-heading{align-items:flex-start;flex-direction:column}.eco-ux-home .english-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.eco-ux-home .english-family-copy{padding:12px}.eco-ux-home .english-family-copy h3{font-size:19px}.eco-recommend-grid article{padding:15px}}
@media(max-width:420px){.eco-ux-home .english-family-grid{grid-template-columns:1fr}.eco-ux-actions button{width:100%}.eco-recommend-grid{gap:10px}.eco-recommend-grid h3{font-size:18px}.eco-recommend-grid p{font-size:15px}.eco-ux-hero{padding:22px 18px}}
@media(prefers-reduced-motion:reduce){.eco-ux-home *, .eco-welcome-dialog *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Preserve room for the longer, explicit help label and offline notices. */
html[data-eco-theme] body .game-modal .eco-guide-help-button{font-size:14px!important;width:94px!important;padding:7px 5px!important;right:106px!important}
html[data-eco-theme] body .game-modal:has(.eco-guide-help-button) .game-modal-head>div{max-width:calc(100% - 204px)!important;padding-right:0!important}
html[data-eco-theme] body .game-modal:has(.eco-guide-help-button) .eco-screen-options:not([data-open=true]){right:58px!important}
html[data-eco-theme] body .game-shell .game-header .head-actions button[aria-label="게임방법 보기"]{width:auto!important;font-size:14px!important;padding:6px!important}
html[data-eco-theme] body .game-shell .play-column>.notice{position:relative!important;inset:auto!important;grid-column:1/-1;grid-row:auto;max-height:44px;font-size:12px;line-height:1.4;background:var(--ux-panel);margin:0}
.game-shell .eco-ready-summary{grid-column:1/-1;width:100%}
html[data-eco-theme] body header .menu{color:var(--ux-ink)!important;background:var(--ux-panel)!important;border:1px solid var(--ux-line);min-width:44px;min-height:44px}
html[data-eco-theme] body :is(header nav,header nav a,header .menu,.mobile-menu,.topics){transition:none!important}
html[data-eco-theme] body .game-shell :is(.game-header,.hud,.mobile-controls) button{background:var(--ux-soft)!important;color:var(--ux-ink)!important;border-color:var(--ux-line)!important;transition:none!important}
html[data-eco-theme] body .game-shell :is(.game-header,.hud,.mobile-controls) button :is(span,b,small){color:inherit!important}