/* ==========================================================================
   sentence-workbook-mobile.css — 문장 가르치기 모바일 레이어
   - 599px 이하 폰 폭에서만 활성. 600px 이상은 데스크톱 UI 유지.
   - 학습지 모바일 결(_작업원칙_모바일.md, _작업원칙_디자인_모바일.md) 적용.
   - 본앱 sentence-workbook.css·picture-card.css 일절 수정 X.
   ========================================================================== */

#screen-sentence .swbm-print-orientation-hint {
  display: none;
}

#screen-sentence .swbm-mobile-only {
  display: none !important;
}

/* ==========================================================================
   600px 이상 데스크톱 환경 — 모바일 컨테이너 hide (안전장치)
   ========================================================================== */
@media (min-width: 600px) {
  #screen-sentence .swbm-mobile-only {
    display: none !important;
  }
}

/* ==========================================================================
   폰 폭 레이아웃 — 데스크톱 영역 hide + 모바일 레이어 활성
   ========================================================================== */
@media screen and (max-width: 599px) {
  /* 데스크톱 영역 hide (학습지 결: nav-bar·anon-save-banner도 모바일에서 hide) */
  #screen-sentence .nav-bar,
  #screen-sentence .anon-save-banner,
  #screen-sentence .swb-stage-bar,
  #screen-sentence .swb-cat-bar,
  #screen-sentence .swb-predicate-filter,
  #screen-sentence .swb-main {
    display: none !important;
  }

  /* 모바일 컨테이너 — 본문 padding-bottom으로 dock 가려짐 방지 */
  #screen-sentence .swbm-mobile-only {
    display: block !important;
    padding-bottom: calc(96px + var(--safe-bottom));
  }

  /* ========== 상단 줄 1 — 뒤로가기 + 카운트 + 초기화 ========== */
  #screen-sentence .swbm-top-stat {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px; padding-top: calc(6px + var(--safe-top));
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
  }
  #screen-sentence .swbm-top-back {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 20px; color: var(--text-primary); text-decoration: none;
    border-radius: 50%;
  }
  #screen-sentence .swbm-top-back:active { background: var(--bg-cream); }

  #screen-sentence .swbm-print-count {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; line-height: 1; user-select: none;
  }
  #screen-sentence .swbm-print-count .mwb-count-num {
    display: inline-flex; align-items: baseline; gap: 5px;
  }
  #screen-sentence .swbm-print-count .mwb-count-num b {
    font-size: 22px; font-weight: 800; color: var(--teal-dark); line-height: 1;
  }
  #screen-sentence .swbm-print-count .mwb-count-num span {
    font-size: 13px; color: var(--text-secondary); font-weight: 600;
  }
  #screen-sentence .swbm-print-count.is-full .mwb-count-num b { color: #D84848; }

  /* 담은것만 모드 중 검색·단계dock 비활성 (미리보기 CTA는 유지) */
  body.swb-selected-only #screen-sentence .swbm-search,
  body.swb-selected-only #screen-sentence .swbm-bottom-dock > .swbm-dock-trigger {
    opacity: 0.45; pointer-events: none;
  }

  #screen-sentence .swbm-print-clear {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #D84848; border: 1px solid #D84848;
    border-radius: var(--radius-md);
    color: #fff; cursor: pointer; padding: 0;
  }
  #screen-sentence .swbm-print-clear svg { width: 16px; height: 16px; }
  #screen-sentence .swbm-print-clear[disabled] {
    background: var(--bg-cream); border-color: var(--border);
    color: var(--text-disabled);
    opacity: 0.6; cursor: not-allowed;
  }

  /* ========== 상단 줄 2 — 검색 (sticky) ========== */
  #screen-sentence .swbm-search {
    position: sticky;
    top: 44px; /* swbm-top-stat 높이 (6 + 32 + 6 = 44) */
    z-index: 8;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 8px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
  }
  #screen-sentence .swbm-search[hidden] { display: none !important; }
  #screen-sentence .swbm-search-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 14px;
    padding-left: 4px;
  }
  #screen-sentence .swbm-search-input {
    flex: 1;
    border: 1px solid var(--border);
    outline: none;
    background: var(--bg-white);
    border-radius: var(--radius-full, 999px);
    font-size: 16px; /* 가상 키보드 자동 줌인 방지 */
    color: var(--text-primary);
    min-width: 0;
    padding: 6px 14px;
    height: 34px;
    font-family: inherit;
  }
  #screen-sentence .swbm-search-input::placeholder { color: var(--text-disabled); }
  #screen-sentence .swbm-search-clear {
    border: none;
    background: rgba(0,0,0,0.06);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* ========== 본문 (사이클 3에서 채움) ========== */
  #screen-sentence .swbm-body {
    padding: 8px 12px;
  }

  /* ========== 모바일 검색 결과 — v2 아코디언 ========== */
  /* swbm-top-stat(0~44px) + swbm-search(44~~93px) 다음에 sticky로 붙음 */
  #screen-sentence .swbm-search-meta {
    position: sticky;
    top: 93px; /* swbm-top-stat 44 + swbm-search 49 ≈ 93 */
    z-index: 7;
    background: var(--bg-white);
    font-size: 12px;
    color: var(--text-secondary);
    padding: 7px 12px;
    border-bottom: 1px solid var(--border-light);
    /* swbm-body의 padding(8 12)을 끊고 컨테이너 끝까지 확장 */
    margin: -8px -12px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  #screen-sentence .swbm-search-meta-text { flex: 1; min-width: 0; }
  #screen-sentence .swbm-search-meta strong { color: var(--teal-dark); font-weight: 800; }
  #screen-sentence .swbm-search-bulk-toggles {
    display: inline-flex;
    gap: 5px;
    flex-shrink: 0;
  }
  #screen-sentence .swbm-search-bulk-toggles button {
    background: var(--bg-white);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
  }
  #screen-sentence .swbm-search-bulk-toggles button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* 책별 그룹 — 모바일 아코디언 */
  #screen-sentence .swbm-search-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #screen-sentence .swbm-search-group {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
  }
  #screen-sentence .swbm-search-group.is-open { border-color: var(--teal); }

  #screen-sentence .swbm-search-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    background: var(--bg-cream);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
  }
  #screen-sentence .swbm-search-group.is-open .swbm-search-group-header {
    border-bottom-color: var(--border);
  }

  #screen-sentence .swbm-search-group-caret {
    width: 12px;
    text-align: center;
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  #screen-sentence .swbm-search-group.is-open .swbm-search-group-caret { transform: rotate(90deg); }

  #screen-sentence .swbm-search-group-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #screen-sentence .swbm-search-group-stage {
    font-size: 10px;
    font-weight: 700;
    color: var(--teal-dark);
    background: var(--teal-light);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  #screen-sentence .swbm-search-group-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
  }
  #screen-sentence .swbm-search-bulk-add {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1.5px solid #10B981;
    background: var(--bg-white);
    color: #047857;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
  }
  #screen-sentence .swbm-search-bulk-add.is-all-added {
    border-color: #D84848;
    color: #D84848;
  }
  #screen-sentence .swbm-search-bulk-add:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--border);
    color: var(--text-disabled);
  }

  /* 펼친 본문 */
  #screen-sentence .swbm-search-group-body {
    display: none;
    flex-direction: column;
  }
  #screen-sentence .swbm-search-group.is-open .swbm-search-group-body { display: flex; }

  #screen-sentence .swbm-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--bg-cream);
    font-family: inherit;
  }
  #screen-sentence .swbm-search-row:last-child { border-bottom: none; }
  #screen-sentence .swbm-search-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #10B981;
    flex-shrink: 0;
    cursor: pointer;
  }
  #screen-sentence .swbm-search-row.is-checked { background: #ECFDF5; }
  #screen-sentence .swbm-search-row-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
  }
  #screen-sentence .swbm-search-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
  }
  #screen-sentence .swbm-search-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #10B981;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
  }
  #screen-sentence .swbm-search-card.is-checked {
    background: #ECFDF5;
    border-color: #10B981;
  }
  #screen-sentence .swbm-search-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #screen-sentence .swbm-search-card-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.45;
  }
  #screen-sentence .swbm-search-card-meta {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  #screen-sentence .swbm-search-card-meta .dot { margin: 0 4px; color: var(--text-disabled); }
  #screen-sentence .swbm-search-mark {
    background: #FEF3C7;
    color: #92400E;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 800;
  }
  #screen-sentence .swbm-search-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
  }
  #screen-sentence .swbm-search-empty-icon { font-size: 32px; margin-bottom: 8px; }
  #screen-sentence .swbm-search-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
  #screen-sentence .swbm-search-empty-sub { font-size: 12px; color: var(--text-disabled); }

  /* ========== 하단 dock — 청록 솔리드 (학습지 결) ========== */
  #screen-sentence .swbm-bottom-dock {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    display: flex; align-items: stretch; gap: 8px;
    padding: 12px 14px 16px;
    padding-bottom: calc(16px + var(--safe-bottom));
    background: var(--bg-white); border-top: 1px solid var(--border-light);
  }
  #screen-sentence .swbm-bottom-dock > .swbm-dock-trigger,
  #screen-sentence .swbm-bottom-dock > .swbm-dock-cta {
    flex: 1 1 0; min-width: 0;
  }
  #screen-sentence .swbm-bottom-dock > .swbm-dock-trigger--wide {
    flex: 2 1 0;
  }
  #screen-sentence .swbm-dock-trigger,
  #screen-sentence .swbm-dock-cta {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 56px; padding: 8px;
    background: var(--teal-dark); border: 1px solid var(--teal-dark);
    border-radius: var(--radius-md);
    color: #fff; cursor: pointer; text-align: center; line-height: 1;
    font-family: inherit;
  }
  #screen-sentence .swbm-dock-trigger:active,
  #screen-sentence .swbm-dock-cta:active { filter: brightness(0.92); }
  #screen-sentence .swbm-dock-trigger.is-prompt-target {
    position: relative;
    border-color: #FFD45A;
    box-shadow: 0 0 0 3px rgba(255, 212, 90, 0.55), 0 8px 18px rgba(15, 93, 110, 0.24);
    animation: swbm-prompt-pulse 1.25s ease-in-out infinite;
  }
  #screen-sentence .swbm-dock-trigger.is-prompt-target .swbm-dock-trigger-label,
  #screen-sentence .swbm-dock-trigger.is-prompt-target .swbm-dock-trigger-arrow {
    opacity: 1;
  }
  @keyframes swbm-prompt-pulse {
    0%, 100% {
      transform: translateY(0);
      box-shadow: 0 0 0 3px rgba(255, 212, 90, 0.5), 0 8px 18px rgba(15, 93, 110, 0.22);
    }
    50% {
      transform: translateY(-3px);
      box-shadow: 0 0 0 5px rgba(255, 212, 90, 0.72), 0 12px 22px rgba(15, 93, 110, 0.3);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #screen-sentence .swbm-dock-trigger.is-prompt-target {
      animation: none;
    }
  }
  #screen-sentence .swbm-dock-cta {
    font-size: 15px; font-weight: 800; white-space: nowrap;
  }
  #screen-sentence .swbm-dock-trigger-label {
    font-size: 11px; font-weight: 600; opacity: 0.7; line-height: 1;
  }
  #screen-sentence .swbm-dock-trigger-value {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 14px; font-weight: 800; line-height: 1.1;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #screen-sentence .swbm-dock-trigger-value.is-empty {
    font-weight: 700; opacity: 0.85;
  }
  #screen-sentence .swbm-dock-trigger-arrow {
    font-size: 9px; opacity: 0.7;
  }

  /* ========== 단계·책 시트 — 풀화면 가까이, 좌우 분할 ========== */
  #screen-sentence .swbm-sheet--full { max-height: 88vh !important; }

  #screen-sentence .swbm-split {
    flex: 1; display: flex; min-height: 0;
  }
  #screen-sentence .swbm-split-left {
    flex: 0 0 110px;
    overflow-y: auto;
    border-right: 1px solid var(--border-light);
    background: var(--bg-cream);
    padding: 6px 4px;
  }
  #screen-sentence .swbm-split-right {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    min-width: 0;
  }

  /* 좌측 단계 세로 탭 */
  #screen-sentence .swbm-stage-vtab {
    display: block; width: 100%;
    padding: 12px 10px; margin: 2px 0;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 700; color: var(--text-secondary);
    cursor: pointer; text-align: left;
    font-family: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #screen-sentence .swbm-stage-vtab:active { background: var(--bg-white); }
  #screen-sentence .swbm-stage-vtab.is-active {
    background: var(--teal-dark); color: #fff; border-color: var(--teal-dark);
  }
  #screen-sentence .swbm-stage-vtab:disabled { opacity: 0.35; cursor: not-allowed; }
  #screen-sentence .swbm-stage-vtab small {
    display: block;
    font-size: 10px; font-weight: 500;
    margin-top: 2px; opacity: 0.75;
  }

  /* 우측 책 리스트 — 그룹 헤더 + 카드 */
  #screen-sentence .swbm-book-group {
    font-size: 15px; font-weight: 800; color: var(--teal-dark);
    padding: 14px 4px 6px;
  }
  #screen-sentence .swbm-book-group:first-child { padding-top: 4px; }
  #screen-sentence .swbm-book-card {
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 12px 14px; margin: 4px 0;
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    width: 100%; text-align: left;
  }
  #screen-sentence .swbm-book-card:active { background: var(--bg-cream); }
  #screen-sentence .swbm-book-card.is-selected {
    background: #EEF6FA; border-color: var(--teal-dark);
  }
  #screen-sentence .swbm-book-card-row1 {
    display: flex; align-items: baseline; gap: 8px;
  }
  #screen-sentence .swbm-book-card-name {
    flex: 1; min-width: 0;
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    overflow-wrap: anywhere;
  }
  #screen-sentence .swbm-book-card-meta {
    flex-shrink: 0;
    font-size: 12px; color: var(--text-secondary);
    white-space: nowrap;
  }
  #screen-sentence .swbm-book-empty {
    padding: 40px 20px; text-align: center;
    color: var(--text-secondary); font-size: 13px;
  }

  /* ========== 슬롯 패턴 wrap (시트 책 카드용) ========== */
  #screen-sentence .swbm-book-header-pattern {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    gap: 4px; margin-top: 4px;
    font-size: 12px; line-height: 1.4;
  }

  /* ========== 본문 권 페이지 (학습지 결 + 데스크톱 swb 슬롯 시스템 재사용) ========== */
  #screen-sentence .swbm-book-page {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 14px 18px;
  }
  #screen-sentence .swbm-book-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1.5px solid var(--teal-light);
  }
  #screen-sentence .swbm-book-page-title-wrap {
    flex: 1; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px;
  }
  #screen-sentence .swbm-book-page-header > .swbm-subgroup-add-chip {
    margin-left: 0;
    margin-top: 1px;
  }
  #screen-sentence .swbm-book-page-name {
    font-size: 17px; font-weight: 800; color: var(--text-primary);
  }
  #screen-sentence .swbm-book-page-count {
    flex-shrink: 0;
    display: inline-flex; align-items: baseline;
    gap: 1px;
  }
  #screen-sentence .swbm-book-page-count-num {
    font-size: 18px; font-weight: 800; color: #1e3a8a;
  }
  #screen-sentence .swbm-book-page-count-sep {
    font-size: 14px; color: var(--text-secondary); margin: 0 2px;
  }
  #screen-sentence .swbm-book-page-count-total {
    font-size: 14px; color: var(--text-secondary); font-weight: 700;
  }

  /* 문장 묶음 헤더 — 모바일 2줄 구조:
     1줄: 묶음 라벨 + 모두 담기 칩 (라벨이 아래 문장 소속임을 강조)
     2줄: 슬롯 패턴 (한 줄 폭 다 사용 가능, 슬롯 잘림 방지) */
  #screen-sentence .swbm-subgroup-heading {
    display: flex; flex-direction: column;
    gap: 6px;
  }
  #screen-sentence .swbm-subgroup-heading-row1 {
    display: flex; align-items: center; gap: 8px;
  }
  /* 문장 묶음 라벨 — 데스크톱 14px → 모바일 17px (분류 역할 강조) */
  #screen-sentence .swbm-subgroup-heading-row1 .swb-book-subgroup-label {
    font-size: 17px;
    font-weight: 800;
  }
  #screen-sentence .swbm-subgroup-heading-row2 {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px;
  }
  #screen-sentence .swbm-subgroup-add-chip {
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px 12px;
    background: var(--bg-white);
    border: 1.5px solid var(--teal-dark);
    border-radius: 999px;
    font-size: 11px; font-weight: 800;
    color: var(--teal-dark);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
  }
  #screen-sentence .swbm-subgroup-add-chip:active {
    background: var(--teal-dark); color: #fff;
  }
  #screen-sentence .swbm-subgroup-add-chip.is-all-selected {
    background: var(--teal-dark); color: #fff;
  }

  /* ========== 위로가기 버튼 — 학습지 mwb-scroll-top 결 ========== */
  #screen-sentence .swbm-scroll-top {
    position: fixed;
    right: 12px;
    bottom: calc(96px + var(--safe-bottom) + 12px);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg-white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: none;
    align-items: center; justify-content: center;
    font-size: 20px;
    color: var(--text-secondary);
    z-index: 15;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
  }
  #screen-sentence .swbm-scroll-top.is-visible { display: inline-flex; }
  #screen-sentence .swbm-scroll-top:active { background: var(--bg-cream); }

  /* 문장 카드 (체크박스) — 1열 리스트 */
  #screen-sentence .swbm-sent-list {
    display: flex; flex-direction: column; gap: 6px;
    padding: 4px 0;
  }
  #screen-sentence .swbm-sent-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer; user-select: none;
    font-size: 14px; line-height: 1.4;
    color: var(--text-primary);
  }
  #screen-sentence .swbm-sent-card:active { background: var(--bg-cream); }
  #screen-sentence .swbm-sent-card.is-checked {
    background: #EEF6FA; border-color: var(--teal-dark);
  }
  #screen-sentence .swbm-sent-input {
    position: absolute;
    opacity: 0; pointer-events: none;
  }
  #screen-sentence .swbm-sent-check {
    width: 20px; height: 20px; flex-shrink: 0;
    border: 2px solid var(--border); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-white);
    color: transparent;
    font-size: 11px; font-weight: 800;
  }
  #screen-sentence .swbm-sent-card.is-checked .swbm-sent-check {
    background: var(--teal-dark); border-color: var(--teal-dark); color: #fff;
  }
  #screen-sentence .swbm-sent-text { flex: 1; min-width: 0; }

  /* 본앱 데스크톱 .swb-book-case-section / .swb-book-subgroup 스타일을
     모바일에서도 그대로 활용 (구조 섹션 초록 배지 + 문장 묶음 파란 소제목 + 슬롯).
     단 모바일에서 padding·여백 조정. */
  #screen-sentence .swb-book-case-section {
    padding: 12px 0 4px;
    border-top: 1px solid rgba(15, 118, 110, 0.16);
  }
  #screen-sentence .swb-book-case-section:first-child {
    padding-top: 2px; border-top: none;
  }
  #screen-sentence .swb-book-case-header {
    margin: 0 0 10px 0;
    display: flex;
    justify-content: center;
  }
  #screen-sentence .swbm-section-heading {
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  #screen-sentence .swbm-section-heading .swb-book-case-label {
    min-width: 0;
  }
  #screen-sentence .swbm-section-heading .swbm-subgroup-add-chip {
    margin-left: 0;
  }
  #screen-sentence .swb-book-subgroup {
    margin-bottom: 16px;
  }
  #screen-sentence .swb-book-subgroup:last-child { margin-bottom: 0; }

  /* ========== 빈 상태 (단계·책 미선택 시 손가락 + 안내) — 학습지 결 ========== */
  #screen-sentence .swbm-empty-pick {
    min-height: calc(100vh - 220px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 24px;
    gap: 14px;
  }
  #screen-sentence .swbm-empty-title {
    font-size: 17px; font-weight: 800; color: var(--text-primary); line-height: 1.4;
  }
  #screen-sentence .swbm-empty-desc {
    font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  }
  #screen-sentence .swbm-empty-icon {
    width: 64px; height: 64px;
    animation: swbm-point-down 1.6s ease-in-out infinite;
  }
  @keyframes swbm-point-down {
    0%, 100% { transform: rotate(180deg) translateY(0); }
    50%      { transform: rotate(180deg) translateY(-10px); }
  }

  /* ========== 미리보기 시트 본문 — 본앱 panel CSS override ==========
     데스크톱 .swb-workbook-panel은 사이드바 layout(flex 자식·고정 width/height·padding) 가정.
     모바일 시트 안에서는 풀폭 자연 흐름으로 풀어줌. 학습지 결과 동일. */
  #screen-sentence #swbmPreviewBody {
    padding: 12px;
    --swbm-preview-page-w: 760px;
    --swbm-preview-page-h: 537.37px;
    --swbm-preview-scale: 1;
  }
  #screen-sentence #swbmPreviewBody .swb-workbook-panel,
  #screen-sentence #swbmPreviewBody .wbk-workbook-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    display: block !important;
  }
  #screen-sentence #swbmPreviewBody .swbm-preview-clone {
    display: contents !important;
  }

  /* ========== 그림카드 페이지 — 실제 A4 배치 축소 preview ==========
     모바일에서도 데스크톱/인쇄와 같은 2열×3행 A4 가로 배치를 유지한다.
     기본은 시트 폭에 맞춘 전체 보기, 확대 모드에서는 가로 스크롤로 세부 확인. */
  #screen-sentence #swbmPreviewBody {
    overflow-x: hidden;
  }
  #screen-sentence #swbmPreviewBody.is-zoomed {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-pages-bg {
    padding: 10px;
    width: fit-content;
    max-width: none;
    background: transparent;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-detail-body {
    padding: 0;
  }
  #screen-sentence #swbmPreviewBody .wbk-blank-notice,
  #screen-sentence #swbmPreviewBody .swb-pc-page-wrap + .swb-pc-add-slot {
    display: none !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-page-wrap {
    width: var(--swbm-preview-page-w) !important;
    height: var(--swbm-preview-page-h) !important;
    max-width: none !important;
    box-sizing: border-box;
    transform: scale(var(--swbm-preview-scale));
    transform-origin: top left;
    cursor: zoom-in;
  }
  #screen-sentence #swbmPreviewBody.is-zoomed .swb-pc-page-wrap {
    cursor: zoom-out;
  }
  #screen-sentence .swbm-preview-zoom {
    min-width: 54px;
    height: 32px;
    padding: 0 12px;
    margin-left: auto;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-cream);
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    font-family: inherit;
  }
  #screen-sentence .swbm-preview-zoom[aria-pressed="true"] {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    color: #fff;
  }
  #screen-sentence .swbm-preview-fixed {
    flex-shrink: 0;
    padding: 6px 12px 8px;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
  }
  #screen-sentence .swbm-preview-fixed:empty {
    display: none;
  }
  #screen-sentence .swbm-preview-fixed .wbk-wb-detail-bar {
    position: static;
    top: auto;
    z-index: auto;
    margin-bottom: 0;
    padding: 0 0 7px;
    border-radius: 0;
    border-bottom: none;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }
  #screen-sentence .swbm-preview-fixed .wbk-wb-detail-title {
    display: none;
  }
  #screen-sentence .swbm-preview-fixed .swb-layout-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 92px;
  }
  #screen-sentence .swbm-preview-fixed .swb-layout-switch button {
    min-height: 32px;
    padding: 0 7px;
    font-size: 12px;
  }
  #screen-sentence .swbm-preview-fixed .swb-toggle-labels {
    min-height: 32px;
    gap: 4px;
    margin: 0 2px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }
  #screen-sentence .swbm-preview-fixed .swb-toggle-labels input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }
  #screen-sentence .swbm-preview-fixed .wbk-wb-shuffle,
  #screen-sentence .swbm-preview-fixed .wbk-wb-print {
    min-height: 32px;
    padding: 0 7px;
    gap: 3px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }
  #screen-sentence .swbm-preview-fixed .wbk-wb-shuffle svg,
  #screen-sentence .swbm-preview-fixed .wbk-wb-print svg {
    width: 13px;
    height: 13px;
  }
  #screen-sentence .swbm-preview-fixed .swbm-print-orientation-hint {
    display: block;
    position: static;
    margin: 0;
    padding: 8px 10px;
    border-left: 3px solid var(--teal-dark);
    border-radius: 8px;
    background: #eef8fa;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
  }
}

@media screen and (max-width: 370px) {
  #screen-sentence .swbm-preview-fixed {
    padding-inline: 10px;
  }
  #screen-sentence .swbm-preview-fixed .wbk-wb-detail-bar {
    gap: 3px;
  }
  #screen-sentence .swbm-preview-fixed .swb-layout-switch {
    width: 86px;
  }
  #screen-sentence .swbm-preview-fixed .swb-layout-switch button,
  #screen-sentence .swbm-preview-fixed .swb-toggle-labels,
  #screen-sentence .swbm-preview-fixed .wbk-wb-shuffle,
  #screen-sentence .swbm-preview-fixed .wbk-wb-print {
    padding-inline: 5px;
    font-size: 11px;
  }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
  #screen-sentence .swbm-body {
    max-width: 980px;
    margin: 0 auto;
    padding: 12px 20px 24px;
  }
  #screen-sentence .swbm-bottom-dock {
    left: 50%;
    right: auto;
    width: min(920px, calc(100vw - 32px));
    transform: translateX(-50%);
    border-radius: 18px 18px 0 0;
  }
  #screen-sentence .swbm-split-left {
    flex-basis: 150px;
    padding: 8px 6px;
  }
  #screen-sentence .swbm-split-right {
    padding: 12px 18px;
  }
  #screen-sentence .swbm-stage-vtab {
    font-size: 15px;
    padding: 14px 12px;
  }
  #screen-sentence .swbm-book-card {
    padding: 14px 16px;
  }
  #screen-sentence #swbmPreviewBody {
    padding-inline: 18px;
  }
}

/* ==========================================================================
   인쇄 — 모바일 컨테이너 안에서 미리보기 시트만 남기고 hide.
          시트 release 자체는 mobile-sheet.css의 @media print 결.
   ========================================================================== */
@media print {
  #screen-sentence .swbm-mobile-only {
    display: block !important;
    padding: 0 !important;
  }
  #screen-sentence .swbm-mobile-only > *:not(#swbmPreviewSheet) {
    display: none !important;
  }
  /* 미리보기 시트 본문에 본앱 panel cruft 안 보이게 (학습지 §4-5 결) */
  #screen-sentence #swbmPreviewBody .swb-coming-soon {
    display: none !important;
  }
  #screen-sentence .swbm-preview-fixed,
  #screen-sentence #swbmPreviewBody .wbk-wb-detail-bar,
  #screen-sentence #swbmPreviewBody .swbm-print-orientation-hint,
  #screen-sentence #swbmPreviewBody .swb-pc-add-slot,
  #screen-sentence #swbmPreviewBody .swb-pc-empty,
  #screen-sentence #swbmPreviewBody .wbk-blank-notice,
  #screen-sentence #swbmPreviewBody .swb-blank-notice {
    display: none !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-pages-bg {
    background: #fff !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-detail-body {
    padding: 0 !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-page-wrap {
    aspect-ratio: auto !important;
    width: 297mm !important;
    height: 210mm !important;
    margin: 0 !important;
    padding: 6mm !important;
    transform: none !important;
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    overflow: hidden !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-page-wrap:last-child,
  #screen-sentence #swbmPreviewBody .swb-pc-page-wrap:has(+ .swb-pc-add-slot) {
    page-break-after: auto !important;
    break-after: auto !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card {
    padding: 3mm 4mm !important;
    gap: 2mm !important;
    border-width: 1.5px !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card.long {
    --swb-img-size: 48mm !important;
    --swb-img-gap: 4mm !important;
    --swb-negative-size: 37mm !important;
    --swb-negative-stroke: 2.2mm !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card.img-count-1 {
    --swb-img-size: 44mm !important;
    --swb-img-gap: 4mm !important;
    --swb-negative-size: 34mm !important;
    --swb-negative-stroke: 2mm !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card.img-count-2 {
    --swb-img-size: 42mm !important;
    --swb-img-gap: 4mm !important;
    --swb-negative-size: 33mm !important;
    --swb-negative-stroke: 1.9mm !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card.img-count-3 {
    --swb-img-size: 36mm !important;
    --swb-img-gap: 4mm !important;
    --swb-negative-size: 28mm !important;
    --swb-negative-stroke: 1.6mm !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card.img-count-4,
  #screen-sentence #swbmPreviewBody .swb-pc-card.img-count-5 {
    --swb-img-size: 34mm !important;
    --swb-img-gap: 4mm !important;
    --swb-negative-size: 27mm !important;
    --swb-negative-stroke: 1.5mm !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card.long {
    --swb-img-size: 48mm !important;
    --swb-img-gap: 4mm !important;
    --swb-negative-size: 37mm !important;
    --swb-negative-stroke: 2.2mm !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card-empty {
    visibility: hidden !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-row {
    gap: var(--swb-img-gap) !important;
    justify-content: space-evenly !important;
    flex-wrap: nowrap !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-img-box {
    width: var(--swb-img-size) !important;
    padding: 0 !important;
    border-width: 1px !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-img,
  #screen-sentence #swbmPreviewBody .swb-pc-img-fallback {
    width: var(--swb-img-size) !important;
    height: var(--swb-img-size) !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-img-label {
    font-size: 11pt !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-inline {
    font-size: 14pt !important;
    margin-top: -3mm !important;
  }
  #screen-sentence #swbmPreviewBody .swb-pc-card.long .swb-pc-inline {
    font-size: 14pt !important;
    margin-top: -3mm !important;
  }
  body.swb-print-active #screen-sentence #swbmPreviewBody .swb-pc-pages-bg {
    width: auto !important;
    max-width: none !important;
  }
  /* 화면용 축소 preview inline/style이 인쇄에 새지 않게 A4 출력 결을 명시 복구한다. */
  body.swb-print-active #screen-sentence #swbmPreviewBody .swb-pc-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 3mm !important;
  }
  body.swb-print-active #screen-sentence #swbmPreviewBody .swb-pc-card.long {
    grid-column: span 2 !important;
  }
  body.swb-print-active #screen-sentence #swbmPreviewBody .swb-pc-pages-bg.swb-layout-large2 .swb-pc-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }
  body.swb-print-active #screen-sentence #swbmPreviewBody .swb-pc-pages-bg.swb-layout-large2 .swb-pc-card.long {
    grid-column: span 1 !important;
  }
  body.swb-print-active #screen-sentence #swbmPreviewBody .swb-pc-row {
    flex-wrap: nowrap !important;
  }
}