/* css/s-session40.css — 40분 회기·부모와 함께 하는 회기(js/screens/session40.js, js/screens/play-session40.js)
   + 수업 보관함 주제 카드(js/screens/lessons.js .ls-topic). 어른 띠는 아이 단추와 헷갈리지 않게 회색 점선·작은 글씨, 그래도 손 닿기 쉬운 크기. */

/* ── 단계 띠 ── */
.s40-bar{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; }
.s40-bar__s{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; border-radius:12px; background:#F4EEE6; color:#6B5B4B; text-align:center; min-width:0; }
.s40-bar__s[data-state="done"]{ background:#E3F1E6; color:#2F5D3A; }
.s40-bar__s[data-state="cur"]{ background:#FFE3A8; color:#4A3410; box-shadow:0 0 0 2px #F0B43C inset; }
.s40-bar__n{ font-weight:800; font-size:var(--fs-body); line-height:1; }
.s40-bar__t{ font-size:12px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.s40-bar__l{ font-size:10px; color:#8A7D70; line-height:1.1; overflow-wrap:anywhere; }
@media (max-width:480px){ .s40-bar__l{ display:none; } .s40-bar__t{ font-size:11px; } }

/* ── 어른 띠(놀이 화면 위, 늘 보임) ── */
.s40-strip{ position:sticky; top:0; z-index:5; display:grid; gap:6px; padding:8px 10px; margin:0 0 8px; background:#FBF8F3; border-bottom:2px dashed #CDBFAF; }
.s40-adult{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.s40-adult__tag{ flex:0 0 auto; font-size:12px; font-weight:800; color:#fff; background:#7A6A5A; border-radius:999px; padding:2px 8px; line-height:1.6; }
.s40-adult__guide{ flex:1 1 220px; margin:0; font-size:var(--fs-small); line-height:1.45; color:#4E4237; }
.s40-adult__timer{ flex:0 0 auto; font-size:13px; font-variant-numeric:tabular-nums; color:#6B5B4B; background:#EFE7DC; border-radius:8px; padding:2px 8px; }
.s40-adult__timer.is-over{ background:#FCE4CC; color:#8A4B12; }
.s40-adult__btns{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.s40-ab{ min-height:40px; border:1.5px dashed #A8998A !important; background:#fff !important; color:#4E4237 !important; font-size:13px; }
.s40-ab--next{ border-style:solid !important; border-color:#7A6A5A !important; font-weight:800; }
.s40-ab[disabled]{ opacity:.45; }

/* ── 아이 화면 ── */
.s40-q__tag{ display:inline-block; margin:0 0 6px; padding:2px 10px; border-radius:999px; background:#ECE5FF; color:#4B3B8F; font-weight:800; font-size:var(--fs-small); }
.s40-q__quote{ margin:8px 0; padding:10px 14px; background:#fff; border:2px solid #E6D3BD; border-radius:16px; font-size:var(--fs-body); line-height:1.5; }
.s40-opt.is-right{ outline:3px solid #4CAF6A; }
.s40-opt.is-wrong{ opacity:.5; }
.s40-good{ color:#2F7A45; }
.s40-retry{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.s40-retry > *{ min-height:var(--touch-kid, 56px); }
.s40-card{ display:grid; gap:8px; margin:10px 0; padding:14px; background:#FFF8E8; border:3px solid #F0B43C; border-radius:20px; }
.s40-card__row{ display:grid; grid-template-columns:minmax(84px, 30%) minmax(0,1fr); gap:8px; align-items:start; font-size:var(--fs-body); line-height:1.45; }
.s40-card__row b{ color:#8A5A10; }
.s40-tone__head{ display:flex; align-items:center; gap:10px; }
.s40-tone__model{ font-weight:700; }
.s40-cues{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.s40-cue{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:16px; background:#fff; border:2px solid #E6D3BD; }
.s40-cue__i{ font-size:22px; line-height:1; }
.s40-cue__k{ font-size:12px; color:#8A7D70; }
.s40-cue__w{ font-size:var(--fs-body); }
.s40-tone__hear{ min-height:var(--touch-kid, 56px); }

/* ── 어른 평가(⑤) ── */
.s40-rate{ background:#FBF8F3; border:2px dashed #CDBFAF; border-radius:20px; padding:12px; }
.s40-rate__head{ display:flex; gap:8px; align-items:center; margin:0 0 6px; font-size:var(--fs-small); }
.s40-rate__meas{ margin:4px 0 8px; font-size:13px; color:#5B6B7A; background:#EEF3F8; border-radius:10px; padding:6px 10px; }
.s40-rate__row{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px; align-items:center; margin:6px 0; }
.s40-rate__btns{ display:flex; flex-wrap:wrap; gap:6px; }
.s40-rate__b{ min-height:44px; }
.s40-rate__b[aria-pressed="true"]{ background:#FFE3A8 !important; border-color:#F0B43C !important; font-weight:800; }

/* ── 회기 화면(#/session40) ── */
.s40-screen{ background:var(--kid-bg); color:var(--color-ink); padding-bottom:48px; }
.s40-head{ display:flex; align-items:center; gap:8px; }
.s40-lead{ margin:4px 0 12px; font-size:var(--fs-small); line-height:1.5; }
.s40-h2{ font-size:var(--fs-body); margin:14px 0 8px; }
.s40-h3{ font-size:var(--fs-body); margin:12px 0 4px; }
.s40-kids{ display:flex; flex-wrap:wrap; gap:6px; }
.s40-kid{ min-height:var(--touch-parent, 48px); }
.s40-topics{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.s40-topic{ display:flex !important; flex-direction:column; align-items:stretch; gap:0; padding:0 !important; overflow:hidden; border-radius:20px !important;
  background:#fff !important; border:2px solid #E6D3BD !important; text-align:left; min-height:0; }
.s40-topic__img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:#F3E9DD; display:block; }
.s40-topic__txt{ display:flex; flex-direction:column; gap:2px; padding:8px 10px 10px; }
.s40-topic__name{ font-size:var(--fs-body); color:var(--color-ink); }
.s40-topic__line{ font-size:13px; line-height:1.35; color:#5A4C40; }
.s40-topic__n{ font-size:12px; color:#8A7D70; }
.s40-topic__go{ margin-top:6px; align-self:flex-start; background:#F0B43C; color:#3A2A08; font-weight:800; border-radius:999px; padding:4px 12px; }
.s40-topic.is-big{ max-width:420px; }
.s40-note{ font-size:13px; color:#6B5B4B; margin-top:12px; }
.s40-adult--end{ margin:10px 0; padding:8px 10px; background:#FBF8F3; border:2px dashed #CDBFAF; border-radius:14px; }
.s40-sum{ background:#fff; border:2px solid #9C8FD6; border-radius:var(--radius-card, 20px); padding:14px; margin-top:10px; }
.s40-sum h2{ margin:0 0 6px; font-size:var(--fs-section, 20px); }
.s40-sum__t{ margin:0 0 6px; }
.s40-list{ margin:4px 0; padding-left:20px; line-height:1.5; }
.s40-list--good li::marker{ color:#4CAF6A; }
.s40-list--hard li::marker{ color:#E08A2C; }
.s40-mission{ background:#ECE5FF; border-radius:14px; padding:10px 12px; font-weight:700; }
.s40-sum__tip{ font-size:var(--fs-small); background:#F4EEE6; border-radius:12px; padding:8px 10px; }
.s40-actions, .s40-more{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.s40-actions > *, .s40-more > *{ min-height:var(--touch-parent, 48px); }

/* ── 기관 모드·수업 보관함 입구 ── */
.cl-s40{ width:100%; min-height:64px; font-size:var(--fs-section, 20px); margin:6px 0 2px; }
.cl-s40-sub{ margin:0 0 10px; font-size:13px; }
.ls-s40{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 12px; padding:10px 12px; background:#FFF3D6; border:2px solid #F0B43C; border-radius:18px; }
.ls-s40__go{ min-height:var(--touch-parent, 48px); }
.ls-s40__sub{ font-size:var(--fs-small); }
.ls-h3--big{ font-size:var(--fs-section, 20px); }
.ls-topics{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.ls-topic{ display:flex !important; align-items:center; gap:10px; text-align:left; padding:10px 12px !important; min-height:64px; border-radius:18px !important;
  background:#fff !important; border:2px solid #E6D3BD !important; color:var(--color-ink) !important; }
.ls-topic.is-on{ background:#FFF0D6 !important; border-color:#F0B43C !important; box-shadow:0 0 0 2px #F0B43C inset; }
.ls-topic__i{ font-size:26px; line-height:1; flex:0 0 auto; }
.ls-topic__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ls-topic__txt b{ font-size:var(--fs-body); overflow-wrap:anywhere; }
.ls-topic__txt small{ font-size:12px; line-height:1.3; color:#5A4C40; overflow-wrap:anywhere; }
.ls-topic-go{ margin:10px 0; padding:12px; background:#fff; border:2px solid #F0B43C; border-radius:18px; }
.ls-topic-go__t{ margin:0; font-weight:800; }
.ls-more{ margin:10px 0; border:2px solid #E6D3BD; border-radius:16px; background:#fff; padding:4px 12px; }
.ls-more__sum{ cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:700; }
.ls-mini{ position:sticky; bottom:0; z-index:4; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding:8px 12px;
  background:#FFF8E8; border:2px solid #F0B43C; border-radius:16px; }
.ls-mini > span{ flex:1 1 auto; font-weight:700; }
@media (min-width:1024px){ .ls-mini{ display:none; } }
/* 폰·작은 태블릿: 두 칸을 풀어 카드 목록이 바구니에 눌리지 않게(s-lessons.css 의 768px 두 칸을 1024px부터로) */
@media (min-width:768px) and (max-width:1023px){
  .ls-panes{ grid-template-columns:minmax(0,1fr) !important; }
  .ls-basket{ position:static !important; max-height:none !important; }
}