/**
 * 体験型インタラクティブ講座 共通CSS
 * lesson.css - Version: 1.0.0
 * でんけんマッスル
 */

/* ============================================================
   CSS RESET & VARIABLES
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* --- Colors --- */
  --em-efield:     #E8553A;
  --em-efield-bg:  #FFF5F0;
  --em-mfield:     #3A7BD5;
  --em-mfield-bg:  #F0F5FF;
  --em-minus:      #2A5DB0;
  --em-bg:         #F5F5F0;
  --em-card-bg:    #FFFFFF;
  --em-correct:    #4CAF50;
  --em-wrong:      #E57373;
  --em-text:       #333333;
  --em-sub:        #777777;
  --em-accent:     #43A047;
  --em-cta:        #FF9800;
  --em-border:     #E0E0E0;
  --em-canvas-bg:  #FAFAFA;

  /* --- Spacing --- */
  --em-section-gap:  64px;
  --em-card-pad:     24px;
  --em-radius-card:  12px;
  --em-radius-btn:   8px;

  /* --- Typography --- */
  --em-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --em-font-accent: "Rounded Mplus 1c", "Noto Sans JP", sans-serif;
}

@media(max-width:599px){
  :root{
    --em-section-gap: 48px;
    --em-card-pad:    16px;
  }
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.em-progress{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--em-border);
  z-index: 1000;
}
.em-progress__bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--em-efield), var(--em-mfield));
  transition: width .3s ease;
  will-change: width;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.em-main{
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px 80px;
}
@media(min-width:600px){
  .em-main{ padding: 48px 24px 100px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.em-header{
  text-align: center;
  margin-bottom: var(--em-section-gap);
  padding-top: 16px;
}
.em-header__title{
  font-family: var(--em-font-accent);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--em-text);
  margin-bottom: 12px;
}
.em-header__title span.em-efield-text{ color: var(--em-efield); }
.em-header__title span.em-mfield-text{ color: var(--em-mfield); }
.em-header__lead{
  font-size: 1rem;
  color: var(--em-sub);
}
.em-header__time{
  display: inline-block;
  margin-top: 12px;
  font-size: .85rem;
  color: var(--em-sub);
  background: #fff;
  padding: 4px 16px;
  border-radius: 20px;
  border: 1px solid var(--em-border);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.em-section{
  margin-bottom: var(--em-section-gap);
}
.em-section__heading{
  font-family: var(--em-font-accent);
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  padding-left: 16px;
  border-left: 4px solid var(--em-border);
}
/* Section-specific heading accents */
.em-section--intro  .em-section__heading{ border-left-color: var(--em-cta); }
.em-section--efield .em-section__heading{ border-left-color: var(--em-efield); }
.em-section--mfield .em-section__heading{ border-left-color: var(--em-mfield); }
.em-section--screw  .em-section__heading{ border-left-color: var(--em-mfield); }
.em-section--electron .em-section__heading{ border-left-color: var(--em-cta); }
.em-section--quiz   .em-section__heading{ border-left-color: var(--em-accent); }
.em-section--exam   .em-section__heading{ border-left-color: var(--em-efield); }
.em-section--summary .em-section__heading{ border-left-color: var(--em-accent); }

.em-section__lead{
  font-size: .95rem;
  color: var(--em-sub);
  margin-bottom: 20px;
}

/* Section summary (appears after interaction) */
.em-section__summary{
  margin-top: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fdf8 0%, #f0faf0 100%);
  border-left: 4px solid var(--em-accent);
  border-radius: 0 var(--em-radius-btn) var(--em-radius-btn) 0;
  font-size: .95rem;
  line-height: 1.7;
  animation: fadeSlideUp .4s ease;
}

/* ============================================================
   CARDS
   ============================================================ */
.em-card{
  background: var(--em-card-bg);
  border-radius: var(--em-radius-card);
  padding: var(--em-card-pad);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border: 1px solid var(--em-border);
}
.em-card--interactive{
  border: 1px solid var(--em-border);
  position: relative;
}
.em-card--info{
  background: #FAFAFA;
  border: 1px solid var(--em-border);
  margin-top: 16px;
}
.em-card--info p{ margin-bottom: 6px; }
.em-card--info p:last-child{ margin-bottom: 0; }
.em-card__emphasis{
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 8px !important;
}
.em-card__subtitle{
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}
.em-card--efield-panel .em-card__subtitle{ color: var(--em-efield); }
.em-card--mfield-panel .em-card__subtitle{ color: var(--em-mfield); }

/* ============================================================
   BUTTONS
   ============================================================ */
.em-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: var(--em-radius-btn);
  border: 2px solid transparent;
  font-family: var(--em-font);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.em-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.em-btn:active{
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.em-btn:focus-visible{
  outline: 3px solid var(--em-mfield);
  outline-offset: 2px;
}
.em-btn--positive{  background: var(--em-efield); color: #fff; }
.em-btn--negative{  background: var(--em-mfield); color: #fff; }
.em-btn--primary{   background: var(--em-accent);  color: #fff; }
.em-btn--accent{    background: var(--em-cta);     color: #fff; }
.em-btn--reset{     background: var(--em-border);  color: #555; }
.em-btn--play{      background: var(--em-accent);  color: #fff; }
.em-btn--ghost{
  background: transparent;
  color: var(--em-mfield);
  border: 2px solid var(--em-mfield);
}
.em-btn--ghost:hover{
  background: var(--em-mfield);
  color: #fff;
}
.em-btn--active{
  box-shadow: inset 0 2px 6px rgba(0,0,0,.2);
  transform: translateY(1px);
}
.em-btn[disabled]{
  opacity: .5;
  pointer-events: none;
}

/* ============================================================
   CONTROLS GROUP
   ============================================================ */
.em-controls{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.em-controls--center{
  justify-content: center;
  margin-top: 16px;
}

/* ============================================================
   SVG CANVAS AREA
   ============================================================ */
.em-canvas-wrap{
  background: var(--em-canvas-bg);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-btn);
  overflow: hidden;
  touch-action: none;
  position: relative;
}
.em-svg{
  width: 100%;
  height: auto;
  display: block;
}
.em-svg--efield{ background: linear-gradient(135deg, var(--em-efield-bg) 0%, var(--em-canvas-bg) 100%); }
.em-svg--mfield{ background: linear-gradient(135deg, var(--em-mfield-bg) 0%, var(--em-canvas-bg) 100%); }

.em-canvas-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--em-sub);
  font-size: .9rem;
  text-align: center;
  padding: 20px;
}

/* ============================================================
   HINT TEXT
   ============================================================ */
.em-hint{
  margin-top: 14px;
  font-size: .9rem;
  color: var(--em-sub);
  padding: 8px 12px;
  background: #FFFDE7;
  border-radius: 6px;
  border-left: 3px solid #FDD835;
}

/* ============================================================
   SLIDER
   ============================================================ */
.em-slider-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.em-slider-label{
  font-size: .9rem;
  color: var(--em-sub);
  white-space: nowrap;
}
.em-slider{
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--em-border);
  outline: none;
}
.em-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--em-mfield);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.em-slider::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--em-mfield);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ============================================================
   COMPARE CARDS (電場 vs 磁場)
   ============================================================ */
.em-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.em-compare__card{
  padding: 16px;
  border-radius: var(--em-radius-btn);
  text-align: center;
  border: 2px solid;
}
.em-compare__card h3{
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.em-compare__card p{
  font-size: .9rem;
  margin-bottom: 4px;
}
.em-compare__card--efield{
  background: var(--em-efield-bg);
  border-color: var(--em-efield);
}
.em-compare__card--efield h3{ color: var(--em-efield); }
.em-compare__card--mfield{
  background: var(--em-mfield-bg);
  border-color: var(--em-mfield);
}
.em-compare__card--mfield h3{ color: var(--em-mfield); }

/* ============================================================
   DUAL PANEL (体験4)
   ============================================================ */
.em-dual-panel{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media(max-width:599px){
  .em-dual-panel{
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SCREW SECTION
   ============================================================ */
.em-screw-step{ margin-top: 16px; }
.em-screw-question{
  font-weight: 600;
  margin-bottom: 8px;
}
.em-screw-feedback{
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--em-radius-btn);
  font-size: .95rem;
  line-height: 1.7;
  animation: fadeSlideUp .3s ease;
}
.em-screw-feedback--correct{
  background: #E8F5E9;
  border-left: 4px solid var(--em-correct);
}
.em-screw-feedback--wrong{
  background: #FFEBEE;
  border-left: 4px solid var(--em-wrong);
}

/* ============================================================
   QUIZ
   ============================================================ */
.em-quiz-progress{
  text-align: center;
  font-size: .9rem;
  color: var(--em-sub);
  margin-bottom: 16px;
}
.em-quiz-question{
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.6;
}
.em-quiz-choices{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.em-quiz-choice{
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid var(--em-border);
  border-radius: var(--em-radius-btn);
  background: #fff;
  font-family: var(--em-font);
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
}
.em-quiz-choice:hover{
  border-color: var(--em-mfield);
  background: #f7f9ff;
}
.em-quiz-choice--correct{
  border-color: var(--em-correct) !important;
  background: #E8F5E9 !important;
  font-weight: 600;
}
.em-quiz-choice--wrong{
  border-color: var(--em-wrong) !important;
  background: #FFEBEE !important;
}
.em-quiz-choice--disabled{
  pointer-events: none;
  opacity: .7;
}
.em-quiz-feedback{
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--em-radius-btn);
  font-size: .95rem;
  line-height: 1.7;
  animation: fadeSlideUp .3s ease;
}
.em-quiz-feedback--correct{
  background: #E8F5E9;
  border-left: 4px solid var(--em-correct);
}
.em-quiz-feedback--wrong{
  background: #FFEBEE;
  border-left: 4px solid var(--em-wrong);
}
.em-quiz-result{
  text-align: center;
  padding: 32px var(--em-card-pad);
  background: var(--em-card-bg);
  border-radius: var(--em-radius-card);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border: 1px solid var(--em-border);
  animation: fadeSlideUp .4s ease;
}
.em-quiz-score{
  font-size: 2.5rem;
  font-weight: 800;
  font-family: var(--em-font-accent);
  margin-bottom: 8px;
}
.em-quiz-message{
  font-size: 1rem;
  color: var(--em-sub);
}

/* ============================================================
   EXAM PATTERNS
   ============================================================ */
.em-exam-pattern{
  margin-bottom: 24px;
}
.em-exam-pattern__title{
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--em-efield);
}
.em-card--exam{
  font-size: .93rem;
  line-height: 1.8;
}
.em-card--exam .em-exam-q{
  font-weight: 600;
  margin-bottom: 8px;
}
.em-card--exam ol{
  padding-left: 1.5em;
  margin-bottom: 12px;
}
.em-card--exam .em-exam-answer{
  font-weight: 700;
  color: var(--em-accent);
  margin-bottom: 8px;
}
.em-card--exam .em-exam-link{
  margin-top: 10px;
  padding: 10px 14px;
  background: #f5f7f5;
  border-radius: 6px;
  font-size: .88rem;
  color: var(--em-sub);
}
.em-card--exam .em-exam-link strong{ color: var(--em-text); }

/* ============================================================
   SUMMARY SECTION
   ============================================================ */
.em-card--summary{
  background: linear-gradient(135deg, #f8fdf8 0%, #f0faf0 100%);
  border: 2px solid var(--em-accent);
}
.em-summary-list{
  padding-left: 1.4em;
  margin-bottom: 16px;
}
.em-summary-list li{
  margin-bottom: 10px;
  line-height: 1.7;
}
.em-summary-closing{
  font-weight: 600;
  text-align: center;
  color: var(--em-accent);
}

/* ============================================================
   RELATED LINKS
   ============================================================ */
.em-related{
  margin-top: var(--em-section-gap);
  padding-top: 32px;
  border-top: 1px solid var(--em-border);
}
.em-related__heading{
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.em-related__list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.em-related__list a{
  display: block;
  padding: 14px 18px;
  background: var(--em-card-bg);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-btn);
  color: var(--em-mfield);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  transition: all .2s ease;
}
.em-related__list a:hover{
  background: var(--em-mfield-bg);
  border-color: var(--em-mfield);
  transform: translateX(4px);
}

/* ============================================================
   INTRO CHOICES
   ============================================================ */
.em-intro-choices{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.em-intro-choice{
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 14px 18px;
  border: 2px solid var(--em-border);
  border-radius: var(--em-radius-btn);
  background: #fff;
  font-family: var(--em-font);
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1.5;
}
.em-intro-choice:hover{
  border-color: var(--em-cta);
  background: #FFF8E1;
}
.em-intro-choice--selected{
  border-color: var(--em-cta);
  background: #FFF8E1;
  font-weight: 600;
}
.em-intro-choice--disabled{
  pointer-events: none;
  opacity: .6;
}
.em-intro-feedback{
  margin-top: 16px;
  padding: 16px 20px;
  background: #FFF8E1;
  border-left: 4px solid var(--em-cta);
  border-radius: 0 var(--em-radius-btn) var(--em-radius-btn) 0;
  font-size: .95rem;
  line-height: 1.7;
  animation: fadeSlideUp .3s ease;
}

/* ============================================================
   CONFETTI
   ============================================================ */
.em-confetti-piece{
  position: fixed;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  opacity: 1;
  z-index: 2000;
  pointer-events: none;
  animation: confettiFall 2.5s ease-out forwards;
}
@keyframes confettiFall{
  0%  { transform: translateY(0) rotate(0deg); opacity:1; }
  100%{ transform: translateY(100vh) rotate(720deg); opacity:0; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeSlideUp{
  0%  { opacity:0; transform:translateY(12px); }
  100%{ opacity:1; transform:translateY(0); }
}
@keyframes bounceIn{
  0%  { transform: scale(.8); }
  50% { transform: scale(1.05); }
  100%{ transform: scale(1); }
}
@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.06); }
}

/* ============================================================
   RESPONSIVE: PC / TABLET LANDSCAPE (900px+)
   ============================================================ */
@media(min-width:900px){
  html{
    font-size: 18px;  /* base 16px → 18px: all rem values scale up ~12% */
  }
  :root{
    --em-section-gap: 80px;
    --em-card-pad:    32px;
  }

  /* Main layout: wider + larger base font */
  .em-main{
    max-width: 960px;
    padding: 56px 40px 120px;
    font-size: 1.08rem;
    line-height: 1.85;
  }

  /* Header */
  .em-header__title{
    font-size: 2.2rem;
    margin-bottom: 16px;
  }
  .em-header__lead{
    font-size: 1.15rem;
  }
  .em-header__time{
    font-size: .95rem;
    padding: 6px 20px;
  }

  /* Section headings & lead */
  .em-section__heading{
    font-size: 1.6rem;
    margin-bottom: 12px;
    padding-left: 20px;
    border-left-width: 5px;
  }
  .em-section__lead{
    font-size: 1.08rem;
    margin-bottom: 24px;
  }
  .em-section__summary{
    font-size: 1.05rem;
    padding: 20px 28px;
  }

  /* Cards */
  .em-card{
    padding: var(--em-card-pad);
    box-shadow: 0 3px 12px rgba(0,0,0,.07);
  }
  .em-card--info p{
    font-size: 1.05rem;
    margin-bottom: 8px;
    line-height: 1.85;
  }
  .em-card__subtitle{
    font-size: 1.15rem;
    margin-bottom: 14px;
  }
  .em-card__emphasis{
    font-size: 1.15rem;
  }
  .em-card--hint{
    font-size: 1.02rem;
    padding: 16px 20px;
  }

  /* Buttons */
  .em-btn{
    font-size: 1.05rem;
    padding: 12px 28px;
    min-height: 52px;
  }

  /* Controls & Sliders */
  .em-controls{
    gap: 14px;
  }
  .em-slider-wrap{
    gap: 14px;
    margin-top: 18px;
  }
  .em-slider-label{
    font-size: 1rem;
  }

  /* Hint */
  .em-hint{
    font-size: 1rem;
    padding: 10px 16px;
  }

  /* Quiz */
  .em-quiz-question{
    font-size: 1.15rem;
    margin-bottom: 20px;
  }
  .em-quiz-choice{
    font-size: 1.05rem;
    padding: 14px 22px;
    min-height: 52px;
  }
  .em-quiz-feedback{
    font-size: 1.05rem;
    padding: 16px 22px;
  }
  .em-quiz-score{
    font-size: 3rem;
  }
  .em-quiz-message{
    font-size: 1.1rem;
  }

  /* Exam patterns */
  .em-exam-pattern__title{
    font-size: 1.1rem;
  }
  .em-card--exam{
    font-size: 1.02rem;
  }
  .em-card--exam .em-exam-link{
    font-size: .98rem;
  }

  /* Compare cards */
  .em-compare__card h3{
    font-size: 1.1rem;
  }
  .em-compare__card p{
    font-size: 1rem;
  }

  /* Summary */
  .em-summary-list li{
    font-size: 1.05rem;
    margin-bottom: 12px;
  }
  .em-summary-closing{
    font-size: 1.1rem;
  }

  /* Related links */
  .em-related__heading{
    font-size: 1.2rem;
  }
  .em-related__list a{
    font-size: 1.05rem;
    padding: 16px 22px;
  }

  /* Intro choices */
  .em-intro-choice{
    font-size: 1.05rem;
    padding: 16px 22px;
  }
  .em-intro-feedback{
    font-size: 1.05rem;
  }

  /* Screw */
  .em-screw-question{
    font-size: 1.08rem;
  }
  .em-screw-feedback{
    font-size: 1.05rem;
  }

  /* Dual panel gap */
  .em-dual-panel{
    gap: 24px;
  }
}

/* ============================================================
   RESPONSIVE: WIDE PC (1200px+)
   ============================================================ */
@media(min-width:1200px){
  html{
    font-size: 19px;  /* wider screens: 19px base */
  }
  .em-main{
    max-width: 1040px;
    padding: 64px 48px 140px;
    font-size: 1.12rem;
  }

  .em-header__title{
    font-size: 2.5rem;
  }
  .em-header__lead{
    font-size: 1.2rem;
  }

  .em-section__heading{
    font-size: 1.75rem;
  }
  .em-section__lead{
    font-size: 1.12rem;
  }

  .em-card--info p{
    font-size: 1.1rem;
  }
  .em-card__subtitle{
    font-size: 1.2rem;
  }
  .em-card--hint{
    font-size: 1.08rem;
  }

  .em-btn{
    font-size: 1.1rem;
    padding: 14px 32px;
  }

  .em-quiz-question{
    font-size: 1.2rem;
  }
  .em-quiz-choice{
    font-size: 1.1rem;
  }

  .em-summary-list li{
    font-size: 1.1rem;
  }
}

/* ============================================================
   UTILITY
   ============================================================ */
[hidden]{ display: none !important; }
.em-sr-only{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}