/* css/s-lessons.css — 수업 보관함(#/lessons, js/screens/lessons.js). 어른 화면이지만 친구들 모습(크림·둥근 카드).
   폰 320~767: 한 줄(바구니는 아래), 태블릿·노트북 768~1366: 두 칸(왼쪽 카드 목록, 오른쪽 수업 바구니 고정) */
.ls-screen{ background:var(--kid-bg); color:var(--color-ink); padding-bottom:48px; }
.ls-head{ display:flex; align-items:center; gap:8px; }
.ls-sub{ margin:4px 0 12px; font-size:var(--fs-small); color:var(--color-ink); line-height:1.5; }
.ls-tabs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.ls-tab{ min-height:var(--touch-parent); white-space:nowrap; padding-left:6px; padding-right:6px; font-size:var(--fs-small); }
.ls-panes{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.ls-left{ min-width:0; }
.ls-h2{ font-size:var(--fs-section, 20px); margin:8px 0; }
.ls-h3{ font-size:var(--fs-body); margin:12px 0 6px; }
.ls-search, .ls-name{ width:100%; box-sizing:border-box; min-height:var(--touch-parent); padding:8px 14px; font:inherit;
  border:2px solid var(--kid-border, #E6D3BD); border-radius:var(--radius-pill); background:#fff; color:var(--color-ink); }
.ls-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ls-chip{ min-height:40px; }
.ls-row2{ display:grid; gap:6px; }
.ls-list{ margin-top:12px; display:grid; gap:8px; }
.ls-list__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-weight:700; }
.ls-card{ display:grid; grid-template-columns:72px minmax(0,1fr); grid-template-areas:"img txt" "btn btn"; gap:8px 10px; align-items:start;
  background:#fff; border:2px solid var(--kid-border, #E6D3BD); border-left:6px solid var(--pg-c, #C9A27E); border-radius:18px; padding:10px; }
.ls-card.is-on{ background:var(--pg-soft, #FFF0D6); }
.ls-thumb{ grid-area:img; width:72px; height:72px; object-fit:cover; border-radius:12px; background:var(--pg-soft, #F3E9DD); }
.ls-card__txt{ grid-area:txt; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ls-card__t{ font-size:var(--fs-body); overflow-wrap:anywhere; }
.ls-card__s{ font-size:var(--fs-small); line-height:1.4; overflow-wrap:anywhere; }
.ls-card__m, .ls-card__p{ font-size:var(--fs-caption, 13px); color:var(--color-ink); opacity:.85; }
.ls-card__btn{ grid-area:btn; min-height:var(--touch-parent); }
.ls-basket{ background:#fff; border:2px solid var(--kid-border, #E6D3BD); border-radius:var(--radius-card); padding:14px; align-self:start; }
.ls-basket h2{ margin:0 0 8px; font-size:var(--fs-body); }
.ls-basket__list{ margin:0 0 10px; padding-left:22px; display:grid; gap:6px; }
.ls-bi{ display:flex; align-items:center; gap:2px; }
.ls-bi__t{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.ls-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ls-actions > *{ min-height:var(--touch-parent); }
.ls-multi{ margin-top:14px; border-top:1px dashed var(--kid-border, #E6D3BD); padding-top:8px; }
.ls-lesson{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; padding:12px; background:#fff; border-radius:18px; }
.ls-share{ margin-top:8px; display:grid; gap:8px; justify-items:start; }
.ls-after{ background:#fff; border:2px solid #9C8FD6; border-radius:var(--radius-card); padding:14px; margin-bottom:12px; }
.ls-after ul{ margin:6px 0; padding-left:20px; }
.ls-mission{ background:#ECE5FF; border-radius:14px; padding:10px 12px; font-weight:700; }
.ls-rec{ padding-left:20px; }
.ls-run-line{ font-size:var(--fs-small); margin:4px 0; overflow-wrap:anywhere; }
@media (min-width:768px){
  .ls-panes{ grid-template-columns:minmax(0,1fr) minmax(280px, 34%); }
  .ls-basket{ position:sticky; top:12px; max-height:calc(100dvh - 24px); overflow:auto; }
  .ls-row2{ grid-template-columns:1fr 1fr; }
  .ls-list{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width:360px){ .ls-card{ grid-template-columns:56px minmax(0,1fr); } .ls-thumb{ width:56px; height:56px; } }