/* Step D refinement: clearer activity flow for materials and calmer 8th-lesson classroom UI. */
.materials-shell .experiment-controls .step-label{display:none!important}
.materials-shell .experiment-controls h2{min-height:0;margin:10px 0 12px;font-size:clamp(20px,2vw,25px)}
.materials-shell .mini-steps{
  display:grid!important;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 12px;padding:0
}
.materials-shell .mini-steps>span{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  min-height:54px;height:auto;background:#eef4ef;border:1px solid #d4e0d7;border-radius:10px;
  font-size:11px!important;color:#55706c!important;line-height:1.15!important;padding:7px 4px!important;
}
.materials-shell .mini-steps>span b{display:block!important;font-size:0!important;line-height:0!important}
.materials-shell .mini-steps>span::before{font-size:18px;line-height:1;margin-bottom:5px}
.materials-shell .mini-steps>span[data-print-step="preview"]::before{content:"📄"}
.materials-shell .mini-steps>span[data-print-step="choose"]::before{content:"☑️"}
.materials-shell .mini-steps>span[data-print-step="print"]::before{content:"📥"}
.materials-shell .mini-steps>span[data-print-step="observe"]::before{content:"👀"}
.materials-shell .mini-steps>span[data-print-step="compare"]::before{content:"⚖️"}
.materials-shell .mini-steps>span.is-current{background:#e6f2eb;border-color:#2a7868;color:#1f5e55!important;box-shadow:inset 0 0 0 2px #2a7868}
.materials-shell .mini-steps>span.is-past{background:#f6faf6;border-color:#bdd2c5;color:#3d6f60!important}
.materials-shell .step-navigation{display:flex;gap:8px;margin:0 0 14px}
.materials-shell .step-nav-button{
  flex:1;min-height:42px;border:1px solid #c8d7ce;background:#fff;border-radius:10px;
  font-size:14px;font-weight:750;color:#264b49
}
.materials-shell .step-nav-button:disabled{opacity:.48;cursor:not-allowed}
.materials-shell .job-summary{border-radius:12px;padding:12px 10px;margin-bottom:12px}
.materials-shell .job-summary strong{font-size:24px}
.materials-shell .method-picker button{border-radius:12px}
.materials-shell .control-actions button{border-radius:12px}
.materials-shell .result-number strong{font-size:32px}
.materials-shell .result-display{min-width:144px;border-radius:10px}
.materials-shell[data-activity-phase="compare"] .step-navigation,
.materials-shell[data-activity-phase="observe"] .step-navigation{margin-bottom:10px}
@media(max-width:1100px){
  .materials-shell .mini-steps{gap:6px}
  .materials-shell .mini-steps>span{min-height:48px;font-size:10px!important;padding:6px 2px!important}
}
@media(max-width:760px){
  .materials-shell .mini-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .materials-shell .mini-steps>span{font-size:0!important;padding:8px 0!important}
  .materials-shell .mini-steps>span::before{margin-bottom:0}
  .materials-shell .step-navigation{margin-bottom:12px}
}

/* 8차시 classroom: shrink instruction card, make weather a badge, and group controls visually. */
.sim-shell[data-lesson="8"] .lesson-guide{
  width:clamp(246px,23vw,290px)!important;top:86px!important;left:clamp(12px,1.6vw,24px)!important;
  padding:10px 11px!important;gap:6px!important;border-left-width:3px!important;border-radius:12px!important;
  background:rgba(252,253,250,.96)!important;box-shadow:0 10px 22px rgba(29,56,53,.10)!important;
}
.sim-shell[data-lesson="8"] .guide-copy{gap:9px!important}
.sim-shell[data-lesson="8"] .guide-index{min-width:34px;padding:4px 5px;border-radius:8px;font-size:11px}
.sim-shell[data-lesson="8"] .guide-message strong{font-size:16px!important;line-height:1.2!important}
.sim-shell[data-lesson="8"] .guide-message p{font-size:12px!important;line-height:1.35!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sim-shell[data-lesson="8"] .desk-mission{display:none!important}
.sim-shell[data-lesson="8"] .guide-actions{margin-left:0!important;display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important}
.sim-shell[data-lesson="8"] .guide-primary{grid-column:1/-1;min-height:40px!important;border-radius:10px!important;font-size:12px!important}
.sim-shell[data-lesson="8"] .trial-action,
.sim-shell[data-lesson="8"] .guide-more{min-height:38px!important;border-radius:10px!important;font-size:12px!important;padding:0 10px!important}
.sim-shell[data-lesson="8"] .guide-feedback{margin-left:0!important;font-size:11px!important}
.sim-shell[data-lesson="8"] .weather-switch{
  top:86px!important;right:clamp(12px,1.6vw,24px)!important;padding:9px 11px!important;gap:8px!important;
  border:1px solid #c9d8d1;border-radius:12px;background:rgba(252,253,250,.96)!important;min-width:126px
}
.sim-shell[data-lesson="8"] .weather-caption{position:relative;padding-left:28px;font-size:10px;color:#667c78}
.sim-shell[data-lesson="8"] .weather-caption::before{position:absolute;left:0;top:1px;font-size:20px;line-height:1}
.sim-shell[data-lesson="8"] .weather-caption small{font-size:16px!important;line-height:1.1}
.play-area[data-weather="sunny"] .weather-caption::before{content:"☀️"}
.play-area[data-weather="cloudy"] .weather-caption::before{content:"☁️"}
.sim-shell[data-lesson="8"] .weather-choice,
.sim-shell[data-lesson="8"] .weather-explain{display:none!important}
.sim-shell[data-lesson="8"] .experiment-dock{
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px!important;padding:9px 10px!important;
  border-radius:14px!important;background:rgba(252,254,250,.98)!important;box-shadow:0 8px 24px rgba(28,49,46,.08)
}
.sim-shell[data-lesson="8"] .dock-set{
  background:#f7faf6;border:1px solid #d6e0da;border-radius:12px;padding:8px 9px;display:flex;align-items:center;gap:6px;flex-wrap:wrap
}
.sim-shell[data-lesson="8"] .dock-label{font-size:12px;font-weight:800;color:#315d59;min-width:28px}
.sim-shell[data-lesson="8"] .dock-divider{display:none!important}
.sim-shell[data-lesson="8"] .switch-chip,
.sim-shell[data-lesson="8"] .blind-chip,
.sim-shell[data-lesson="8"] .desk-visual-toggle,
.sim-shell[data-lesson="8"] .reset-control{min-height:40px!important;border-radius:10px!important}
.sim-shell[data-lesson="8"] .analysis-bar{gap:10px!important}
.sim-shell[data-lesson="8"] .result-explanation{max-width:130px;font-size:11px!important;line-height:1.35}
.sim-shell[data-lesson="8"] .weather-reveal{top:148px;right:clamp(12px,1.6vw,24px);border-radius:12px}
@media (max-width:1150px){
  .sim-shell[data-lesson="8"] .lesson-guide{width:252px!important}
  .sim-shell[data-lesson="8"] .weather-switch{min-width:116px}
}
@media (max-width:920px){
  .sim-shell[data-lesson="8"] .lesson-guide{width:230px!important}
  .sim-shell[data-lesson="8"] .guide-actions{grid-template-columns:1fr}
  .sim-shell[data-lesson="8"] .guide-primary{grid-column:auto}
}
@media (max-width:820px){
  .sim-shell[data-lesson="8"] .lesson-guide{top:88px!important;left:12px!important;width:min(270px,calc(100vw - 24px))!important}
  .sim-shell[data-lesson="8"] .weather-switch{top:auto!important;bottom:84px!important;right:12px!important}
}