/* J-3 + J-4, classroom / rooftop / result dialogs. 2026-10-10.
   Overlay for presentation only: DO NOT change visibility, hit areas, svg game layers,
   simulation state, lesson-specific restrictions, event targets or saved results. */
/* Shared structure: editorial rather than floating pastels. */
.roof-shell,.sim-shell{--ui-brd:var(--ui-line);--ui-weak:var(--ui-soft-line);--ui-tone:var(--ui-primary)}
.roof-shell :is(button,a):focus-visible,.sim-shell :is(button,a):focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
.roof-shell .ui-icon,.sim-shell .ui-icon{width:19px;height:19px;display:inline-block;flex:none;vertical-align:middle;color:inherit;pointer-events:none}
.roof-shell :is(.roof-nav,.roof-controls) .ui-icon,.sim-shell :is(.header-controls,.guide-actions,.plan-tools,.experiment-dock,.comparison-dialog) .ui-icon{width:18px;height:18px}
.roof-shell button,.sim-shell button{transition-property:color,background-color,border-color;transition-duration:.15s}
/* Roof: keep full-size instructional illustration and 8-cell power board. */
.roof-shell{background:var(--ui-canvas);color:var(--ui-ink)}
.roof-shell .roof-main{background:var(--ui-canvas)}
.roof-shell .roof-titleline{border:0}
.roof-shell .simulation-tag{background:transparent;border-color:var(--ui-line);border-radius:4px;color:var(--ui-muted)}
.roof-shell .roof-workspace{border:1px solid var(--ui-line);border-radius:4px;background:#fff;box-shadow:none}
.roof-shell .roof-controls{background:#fff;border-left:1px solid var(--ui-line)}
.roof-shell .roof-controls h2{color:var(--ui-ink);letter-spacing:-.025em}
.roof-shell :is(.roof-kicker,.controls-eyebrow){color:var(--ui-primary)}
.roof-shell :is(.controls-description,.indicator-note,.roof-caveat,.supply-guidance){color:var(--ui-muted)}
.roof-shell .solar-progress{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.roof-shell .solar-progress > span{background:transparent;border:0;border-bottom:2px solid var(--ui-soft-line);border-radius:0;color:var(--ui-muted)}
.roof-shell .solar-progress > span.is-current{background:transparent;border-bottom-color:var(--ui-primary);color:var(--ui-primary)}
.roof-shell .solar-progress > span.is-observed{color:var(--ui-success)}
.roof-shell .solar-progress > span.is-observed.is-current{border-bottom-color:var(--ui-primary)}
.roof-shell .roof-next-action{background:transparent;border:0;border-left:3px solid var(--ui-primary);padding-left:10px;border-radius:0;color:var(--ui-ink)}
.roof-shell :is(.roof-energy-station,.roof-power-board,.supply-summary){background:#fff;border-radius:4px;box-shadow:none;border-color:var(--ui-line)}
.roof-shell .roof-power-board{background:#fff}
.roof-shell .power-board-head{border-color:var(--ui-soft-line)}
.roof-shell .power-board-head strong,.roof-shell .supply-heading h3{color:var(--ui-ink)}
.roof-shell .power-board-message{background:transparent;border:0;color:var(--ui-muted);border-radius:0}
.roof-shell .power-source-actions{gap:7px}
.roof-shell .power-source-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid var(--ui-line);box-shadow:none;border-radius:6px;color:var(--ui-ink)}
.roof-shell .power-source-actions button:hover:not(:disabled){border-color:var(--ui-primary);background:#f8faf8}
.roof-shell .power-source-actions button[aria-pressed=true]{border-color:var(--ui-primary);color:var(--ui-success);background:#fff}
.roof-shell .power-source-actions .source-circle{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ui-primary)!important;min-width:0;min-height:0;width:20px;height:20px;border-radius:0!important;font-size:0}
.roof-shell .power-source-actions .source-circle>.ui-icon{width:20px;height:20px}
.roof-shell .power-source-actions .send-symbol{opacity:.45}
.roof-shell .roof-install-actions{background:#fff;border-top:1px solid var(--ui-soft-line);box-shadow:none;border-radius:0}
.roof-shell #roof-panel-tool{background:#fff;border:1px solid var(--ui-line);border-radius:5px;box-shadow:none}
.roof-shell #roof-panel-tool:hover{border-color:var(--ui-primary)}
.roof-shell #roof-remove-panel{display:inline-flex;gap:7px;align-items:center;justify-content:center;border-radius:5px;background:#fff;border:1px solid var(--ui-line);color:var(--ui-primary);box-shadow:none}
.roof-shell :is(.control-section,.weather-section){border-color:var(--ui-soft-line)}
.roof-shell .weather-buttons{border-color:var(--ui-line);border-radius:6px;background:#fff;box-shadow:none}
.roof-shell .weather-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:4px;box-shadow:none;color:var(--ui-muted)}
.roof-shell .weather-buttons button[aria-pressed=true]{background:var(--ui-primary);color:#fff;box-shadow:none}
.roof-shell .weather-buttons button>.ui-icon{width:18px;height:18px;fill:none;stroke:none}
.roof-shell .supply-summary{border-top:1px solid var(--ui-line);box-shadow:none}
.roof-shell .supply-line{color:var(--ui-ink)}
.roof-shell .supply-line strong{color:var(--ui-ink)}
.roof-shell :is(.energy-insight,.supply-guidance){background:transparent;border:0;border-radius:0;box-shadow:none}
.roof-shell .compare-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;box-shadow:none;background:var(--ui-primary);color:#fff;border:1px solid var(--ui-primary)}
.roof-shell .compare-action:hover{background:var(--ui-primary-hover)}
/* Rooftop's floating labels are tied to the drawing and communicate actual state: flatten them. */
.roof-shell :is(.roof-stage-caption,.sky-status,.roof-ground-indicator,.roof-legend){border-radius:2px;box-shadow:none;backdrop-filter:none;background:rgba(255,255,255,.88);color:var(--ui-ink);border:0}
.roof-shell .roof-stage-caption{padding:7px 9px;border-left:2px solid var(--ui-primary)}
.roof-shell .sky-status{padding:7px 9px;gap:6px;border-bottom:1px solid var(--ui-line)}
.roof-shell .sky-status>.ui-icon{width:20px;height:20px;fill:none;stroke:none;color:var(--ui-primary)}
.roof-shell .roof-ground-indicator{padding:8px 11px;border-left:2px solid var(--ui-primary)}
.roof-shell .roof-ground-indicator strong{color:var(--ui-ink)}
.roof-shell .roof-legend{padding:6px 8px;font-size:12px}
.roof-shell .flow-notice{border-radius:3px;box-shadow:none}
.roof-shell .roof-drop-zone{border-radius:5px;box-shadow:none}
.roof-shell .roof-footer{background:#eef1ee;color:var(--ui-muted);border-top:1px solid var(--ui-line)}
/* Comparison — roof scenario data remains in DOM; consistent lines and tabs. */
.roof-shell .compare-dialog{background:#fff;color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:8px;box-shadow:0 18px 50px #172b2c22}
.roof-shell .compare-dialog .dialog-top{border-bottom:1px solid var(--ui-line);background:#fff}
.roof-shell .close-dialog{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:transparent;border:1px solid var(--ui-line);border-radius:6px;color:var(--ui-ink)}
.roof-shell .scenario-row{background:#fff;border:1px solid var(--ui-line);border-radius:5px;box-shadow:none;color:var(--ui-ink)}
.roof-shell .scenario-row.is-current{border-color:var(--ui-primary);box-shadow:inset 3px 0 var(--ui-primary)}
.roof-shell .scenario-row:not(:disabled):hover{background:#f8faf8;border-color:var(--ui-primary)}
.roof-shell .comparison-key{border:0;border-top:1px solid var(--ui-soft-line);padding-top:8px;color:var(--ui-muted)}
.roof-shell .discovery-choices button{background:#fff;border:1px solid var(--ui-line);color:var(--ui-ink);border-radius:5px;min-height:44px}
.roof-shell .discovery-choices button[aria-pressed=true]{background:var(--ui-primary);color:#fff;border-color:var(--ui-primary)}
.roof-shell .dialog-done{background:var(--ui-primary);border:1px solid var(--ui-primary);border-radius:6px;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* Classroom: never undo Step E/G physical separation of overview, stage, tools, results. */
.sim-shell{background:var(--ui-canvas);color:var(--ui-ink)}
.sim-shell .sim-header{background:var(--ui-navy);border-color:#3d5052}
.sim-shell .sim-header :is(.utility-control,.lesson-picker){border-radius:5px;box-shadow:none}
.sim-shell .sim-header .utility-control[aria-pressed=true]{background:transparent;color:#fff;border-color:#a3c1b7}
.sim-shell.classroom-stage-ready .classroom-overview{background:#fff;border-bottom:1px solid var(--ui-line);box-shadow:none}
.sim-shell.classroom-stage-ready .classroom-overview .experiment-heading .phase-marker{border-left:2px solid var(--ui-primary);color:var(--ui-primary);padding-left:9px;background:transparent}
.sim-shell.classroom-stage-ready .classroom-overview #experiment-heading{color:var(--ui-ink);font-weight:750}
.sim-shell.classroom-stage-ready .classroom-overview .guide-index{background:transparent;border-right:1px solid var(--ui-line);color:var(--ui-primary);border-radius:0;padding:0 10px 0 0;font-size:13px!important;min-width:32px}
.sim-shell.classroom-stage-ready .classroom-overview .guide-message strong{color:var(--ui-ink)}
.sim-shell.classroom-stage-ready .classroom-overview .guide-actions :is(.guide-primary,.guide-more,.trial-action){border-radius:5px!important;box-shadow:none!important;min-height:44px!important;height:auto!important;padding:5px 11px!important;gap:6px!important;font-size:13px!important}
.sim-shell.classroom-stage-ready .classroom-overview .guide-primary{background:var(--ui-primary);border:1px solid var(--ui-primary);color:#fff}
.sim-shell.classroom-stage-ready .classroom-overview .guide-primary:hover:not(:disabled){background:var(--ui-primary-hover)}
.sim-shell.classroom-stage-ready .classroom-overview :is(.guide-more,.trial-action){background:#fff;color:var(--ui-primary);border:1px solid var(--ui-line)}
.sim-shell.classroom-stage-ready .classroom-overview :is(.guide-more,.trial-action):hover{border-color:var(--ui-primary);background:#f8faf8}
/* Weather label: one duotone glyph, not the legacy unicode sun/cloud pseudo element. */
.sim-shell.classroom-stage-ready .classroom-overview .weather-switch{background:transparent!important;border:0!important;box-shadow:none!important;border-left:1px solid var(--ui-line)!important;padding:7px 0 7px 16px!important;border-radius:0!important}
.sim-shell.classroom-stage-ready .classroom-overview .weather-caption{position:relative;display:grid;grid-template-columns:25px 1fr;grid-template-rows:auto auto;gap:0 7px;color:var(--ui-muted);align-items:center}
.sim-shell.classroom-stage-ready .classroom-overview .weather-caption::before{content:none!important;display:none!important}
.sim-shell.classroom-stage-ready .classroom-overview .weather-caption>.ui-icon{grid-column:1;grid-row:1/3;width:24px;height:24px;color:var(--ui-primary);stroke:none;fill:none}
.sim-shell.classroom-stage-ready .classroom-overview .weather-caption>.ui-weather-cloud{display:none}
.sim-shell.classroom-stage-ready .classroom-overview[data-weather="cloudy"] .weather-caption>.ui-weather-sun{display:none}
.sim-shell.classroom-stage-ready .classroom-overview[data-weather="cloudy"] .weather-caption>.ui-weather-cloud{display:inline-block;color:#4c7c8d}
.sim-shell.classroom-stage-ready .classroom-overview .weather-caption small{grid-column:2;grid-row:2;color:var(--ui-ink)}
.sim-shell.classroom-stage-ready .classroom-overview #weather-compare-short{background:transparent;border:1px solid var(--ui-line);border-radius:5px;color:var(--ui-primary);display:inline-flex;gap:5px;min-height:40px}
.sim-shell.classroom-stage-ready .classroom-overview #weather-compare-short[hidden]{display:none!important}
.sim-shell.classroom-stage-ready .classroom-overview .weather-explain{color:var(--ui-muted)}
.sim-shell.classroom-stage-ready .classroom-action-bar{background:#fff;border-top:1px solid var(--ui-line);box-shadow:none}
.sim-shell.classroom-stage-ready .classroom-action-bar .dock-label{color:var(--ui-muted);font-weight:700}
.sim-shell.classroom-stage-ready .classroom-action-bar .dock-divider{background:var(--ui-soft-line)}
.sim-shell.classroom-stage-ready .classroom-action-bar :is(.switch-chip,.blind-chip,.desk-visual-toggle,.reset-control){display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:5px!important;background:#fff;border:1px solid var(--ui-line);box-shadow:none;color:var(--ui-ink);min-height:44px!important;height:auto!important}
.sim-shell.classroom-stage-ready .classroom-action-bar :is(.switch-chip,.blind-chip,.desk-visual-toggle)[aria-pressed=true]{background:#fff;border-color:var(--ui-primary);color:var(--ui-primary);box-shadow:inset 0 -2px var(--ui-primary)}
.sim-shell.classroom-stage-ready .classroom-action-bar .switch-chip[aria-pressed=false]{color:var(--ui-muted);border-color:var(--ui-line);box-shadow:none}
.sim-shell.classroom-stage-ready .classroom-action-bar .switch-chip[aria-pressed=false] .switch-state{color:var(--ui-warning)}
.sim-shell.classroom-stage-ready .classroom-action-bar .switch-indicator{box-shadow:none}
.sim-shell.classroom-stage-ready .classroom-action-bar .reset-control{border-color:transparent;color:var(--ui-muted)}
.sim-shell.classroom-stage-ready .classroom-action-bar .reset-control:hover{color:var(--ui-primary);background:#f7f9f7}
.sim-shell.classroom-stage-ready .analysis-bar{background:#fff;border-top:1px solid var(--ui-line);color:var(--ui-ink)}
.sim-shell.classroom-stage-ready .analysis-bar .analysis-title{color:var(--ui-ink);font-weight:750}
.sim-shell.classroom-stage-ready .analysis-bar .measure-mark{background:var(--ui-primary);box-shadow:none}
.sim-shell.classroom-stage-ready .analysis-bar .reading{border-left-color:var(--ui-line)}
.sim-shell.classroom-stage-ready .analysis-bar .reading-label{color:var(--ui-muted)}
/* Keep semantic success/warning colors on results, not large colored containers. */
.sim-shell.classroom-stage-ready .analysis-bar .reading strong{letter-spacing:-.02em}
/* Expanded tools are a deliberate modal-like secondary surface, not a permanent floating island. */
.sim-shell .plan-tools.is-open{background:#fff;border:1px solid var(--ui-line);border-radius:7px;box-shadow:0 12px 34px #172d2e21}
.sim-shell .plan-tools .plan-eyebrow{color:var(--ui-muted);font-weight:680;padding-bottom:5px;border-bottom:1px solid var(--ui-soft-line)}
.sim-shell .plan-tools :is(.plan-save,.plan-load,.phase-action,.phase-compare){display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:5px;box-shadow:none;background:#fff;border:1px solid var(--ui-line);color:var(--ui-primary);min-height:44px}
.sim-shell .plan-tools :is(.plan-save,.phase-action):not(:disabled){background:var(--ui-primary);color:#fff;border-color:var(--ui-primary)}
.sim-shell .plan-tools :is(.plan-save,.plan-load,.phase-action,.phase-compare):disabled{opacity:.48;color:var(--ui-muted);background:#fff}
.sim-shell .blind-popover:not([hidden]),.sim-shell .desk-inspector:not([hidden]),.sim-shell .help-note:not([hidden]){background:#fff;border:1px solid var(--ui-line);border-radius:6px;box-shadow:0 9px 26px #172d2e1e;color:var(--ui-ink)}
.sim-shell .blind-popover :is(button,[aria-pressed]){border-radius:4px}
.sim-shell .confirmation-dialog{background:#fff;color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:8px;box-shadow:0 20px 50px #182e302b}
.sim-shell .confirmation-dialog button{border-radius:6px;min-height:44px}
.sim-shell .confirmation-dialog :is(#overwrite-confirm,#cloudy-overwrite-confirm){background:var(--ui-primary);border-color:var(--ui-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px}
/* Side-by-side comparison: distinct content rows, not nested pastel cards. */
.sim-shell .comparison-dialog{background:#fff;color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:8px;box-shadow:0 22px 54px #182c2c36}
.sim-shell .comparison-fixed-head{background:#fff;border-bottom:1px solid var(--ui-line)}
.sim-shell .comparison-top h2{color:var(--ui-ink);letter-spacing:-.03em}
.sim-shell .comparison-lead{color:var(--ui-muted)}
.sim-shell #comparison-close{background:#fff;border:1px solid var(--ui-line);color:var(--ui-primary);border-radius:6px;box-shadow:none;display:inline-flex;align-items:center;gap:7px;min-height:44px}
.sim-shell .comparison-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--ui-muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
.sim-shell .comparison-tabs button[aria-pressed=true]{background:transparent;color:var(--ui-primary);border-bottom-color:var(--ui-primary)}
.sim-shell .comparison-tabs button:disabled{opacity:.38}
.sim-shell .comparison-changes{margin:0 0 12px;padding:7px 0 7px 10px;background:transparent;border:0;border-left:3px solid var(--ui-primary);border-radius:0;color:var(--ui-primary);font-size:13px}
.sim-shell .comparison-side{background:transparent;border:0;border-radius:0;box-shadow:none}
.sim-shell .comparison-side h3{color:var(--ui-ink)}
.sim-shell .comparison-setting{color:var(--ui-muted)}
.sim-shell .comparison-scene{background:#f1f4f1;border:1px solid var(--ui-soft-line);border-radius:4px;box-shadow:none}
.sim-shell .comparison-readout{background:transparent;border:0;box-shadow:none}
.sim-shell .comparison-readout span{background:transparent;border-left:1px solid var(--ui-line);border-radius:0;box-shadow:none;color:var(--ui-ink)}
.sim-shell .comparison-readout small{color:var(--ui-muted)}
.sim-shell .comparison-insight{background:transparent;border-top:1px solid var(--ui-line);border-radius:0;box-shadow:none;color:var(--ui-ink)}
.sim-shell .comparison-question{color:var(--ui-primary)}
.sim-shell .comparison-map-key{color:var(--ui-muted)}
.sim-shell .comparison-caveat{color:var(--ui-muted)}
@media(max-width:920px){
 .sim-shell.classroom-stage-ready .classroom-overview .guide-actions :is(.guide-primary,.guide-more,.trial-action){font-size:12px!important;padding-inline:7px!important}
 .sim-shell.classroom-stage-ready .classroom-overview .guide-actions .ui-icon{width:16px;height:16px}
}
@media(max-width:700px){
 .sim-shell .comparison-tabs button{font-size:12px;gap:4px}
 .sim-shell .comparison-tabs .ui-icon{width:15px;height:15px}
 .roof-shell .roof-ground-indicator{max-width:70%}
}
@media(prefers-reduced-motion:reduce){.roof-shell button,.sim-shell button{transition:none}}

/* Remove duplicate decorative arrows after replacing them with the shared SVG family. */
.sim-shell .classroom-overview .guide-primary > span[aria-hidden="true"],
.roof-shell #compare-supply > span[aria-hidden="true"] {display:none!important}
.sim-shell .help-button .ui-icon {width:20px;height:20px}

/* 8차시 개인 연습: 모둠 대표안이 없는 브라우저에서만 날씨 선택 표시.
   Step D의 숨김 규칙을 제한적으로 해제하고 패널을 장식 없이 유지한다. */
.sim-shell[data-lesson="8"].personal-weather-exploration .classroom-overview .weather-switch {
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:5px!important;
  padding-left:9px!important;min-width:122px!important;
}
.sim-shell[data-lesson="8"].personal-weather-exploration .classroom-overview .weather-caption{font-size:10px!important}
.sim-shell[data-lesson="8"].personal-weather-exploration .classroom-overview .weather-choice{
  display:inline-flex!important;min-height:30px!important;min-width:0!important;justify-content:flex-start!important;
  padding:4px 7px!important;font-size:12px!important;border:1px solid var(--ui-line)!important;border-radius:4px!important;
}
.sim-shell[data-lesson="8"].personal-weather-exploration .classroom-overview .weather-choice[aria-pressed="true"]{border-color:var(--ui-primary)!important}
.sim-shell[data-lesson="8"].personal-weather-exploration .classroom-overview .weather-explain{display:none!important}
.sim-shell .comparison-setting{overflow-wrap:anywhere;line-height:1.45}
/* Narrow tablet: show just two labeled weather actions during individual practice;
   the current selection is conveyed by aria-pressed and the selected button. */
.sim-shell[data-lesson="8"].personal-weather-exploration .classroom-overview .weather-caption{display:none!important}
.sim-shell[data-lesson="8"].personal-weather-exploration .classroom-overview .weather-switch{min-height:70px!important}