/* 소리튠 주니어 — 태블릿·PC 배치 (2026-10-23 디자인 정리 B안 · 피그마 04 정리판 「T-* v2」)
 * 휴대폰(< 1024)은 지금 화면 그대로. 1024 이상에서만:
 *   왼쪽 레일(SideRail) + 하단 메뉴 숨김 · 화면별 2열/목록-상세 배치
 * 색·모양은 jr-tokens.css 토큰만 쓴다. */

.jr-rail { display: none; }
/* 새 홈의 태블릿 전용 조각(다음 할 일·오늘 내용·다음 목표·다음 줌) — 휴대폰·세로 태블릿에선 숨긴다 */
.jrt-stage-next, .jrt-detail, .jrt-goal, .jrt-zoomline, .cls-stage, .jrt-hw-week, .listening-week, .exp-me, .exp-members-hd { display: none; }

@media (min-width: 1024px) {
  /* ── 공통: 레일 + 넓은 바탕 ── */
  #bottom-nav { display: none !important; }
  /* 레일 + 본문을 한 덩어리(최대 1280)로 묶어 화면 가운데 — 넓은 PC 에서 레일과 본문 사이가 벌어지지 않게 */
  :root { --jr-shell: min(1280px, calc(100vw - 40px)); --jr-shell-left: calc((100vw - var(--jr-shell)) / 2); }
  .jr-rail:not(.hidden) {
    /* z-index = 하단 탭 바(.bottom-nav 200)와 같게 — 팝업(500~)이 뜨면 함께 어둡게 덮인다(900 이면 팝업 위에 떠 있었다) */
    position: fixed; z-index: 200; left: var(--jr-shell-left); top: 20px; bottom: 20px; width: 88px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 18px 8px 12px; border-radius: var(--jr-radius-overlay);
    background: var(--jr-white); box-shadow: var(--jr-shadow-card);
  }
  .jr-rail-logo { width: 72px; height: auto; margin-bottom: 8px; }
  .jr-rail-item {
    width: 72px; min-height: 62px; border: 0; border-radius: var(--jr-radius-row); background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-family: inherit; font-size: var(--jr-text-caption); font-weight: var(--jr-weight-bold); color: var(--jr-gray-700);
  }
  .jr-rail-item .jr-ic { font-size: 26px; color: var(--jr-gray-600); }
  .jr-rail-item.active { background: var(--jr-orange-soft); color: var(--jr-orange-deep); }
  .jr-rail-item.active .jr-ic { color: var(--jr-orange); }
  .jr-rail-gap { flex: 1; }
  .jr-rail-me {
    width: 72px; border: 0; border-radius: var(--jr-radius-row); background: var(--jr-orange-soft); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font-family: inherit;
  }
  .jr-rail-av {
    width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: var(--jr-orange); color: var(--jr-white); font-weight: var(--jr-weight-black); font-size: 18px;
  }
  .jr-rail-av img { width: 100%; height: 100%; object-fit: cover; }
  .jr-rail-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--jr-text-caption); font-weight: var(--jr-weight-bold); color: var(--jr-gray-900); }
  .jr-rail-coin { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--jr-radius-full); background: var(--jr-yellow-soft); color: var(--jr-olive-deep); font-size: var(--jr-text-caption); font-weight: var(--jr-weight-black); }
  .jr-rail-coin i { font-style: normal; width: 14px; height: 14px; border-radius: 50%; background: var(--jr-yellow); color: var(--jr-olive-deep); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }

  /* 바탕 하늘 그라데이션은 아래 「바탕 고정 층」(≥768) 이 깐다 */
  .student-page .app-container { background: transparent !important; box-shadow: none !important; max-width: var(--jr-shell) !important; width: auto; margin: 0 auto; padding-left: 108px; padding-right: 0; }
  /* 본문 상자의 z-index:1(휴대폰 구름 장식 위로 올리려던 것 — 구름은 768 이상에서 숨김)을 푼다.
   * 그대로 두면 본문 안에 있는 팝업(홈 안내·원정대·축하)이 모두 1층에 갇혀 왼쪽 탭 바(200) 아래에 깔렸다(2026-10-26) */
  .student-page .app-container { z-index: auto; }
  #view-home, #view-class, #view-homework, #view-mypage, #view-ranking, #view-listening, #view-expedition { max-width: none; margin: 0; }

  /* ── 홈 (2026-10-26 새 설계 · 피그마 04-c 「T-홈」) ──
   * 왼쪽: 주황 무대(말풍선 한 줄 + "오늘 할 일 N개 중 M개" + 다음 할 일 카드) → 오늘 할 일(한 줄 목록 + 오늘 내용)
   * 오른쪽: 챔피언 도장판(+다음 목표) → 이번 주 줌 → 공지 → 원정대. 코인은 레일, 등수는 랭킹 탭이 말한다 */
  #view-home:not(.hidden) {
    display: grid; grid-template-columns: minmax(0, 1fr) 382px; grid-template-rows: auto auto auto 1fr;
    column-gap: 16px; row-gap: 14px; align-items: start; padding: 20px 0 16px;
  }
  #view-home > * { margin: 0 !important; min-width: 0; }
  #view-home .home-topbar, #view-home > .mypage-footer { display: none; }
  #home-hero-card:not(.hidden) { display: contents; }
  #home-hero-card .hhero-my { display: none; }
  /* 코인·반·전체 등수 칩 — 무대 오른쪽 위(캐릭터 위 빈자리). 누르면 마이·랭킹(휴대폰과 같은 버튼) */
  #home-hero-card .hhero-chips {
    grid-column: 1; grid-row: 1; align-self: start; justify-self: end; z-index: 1;
    margin: 16px 20px 0 0 !important; flex-wrap: nowrap;
  }
  #home-hero-card .hhero-chip { color: var(--jr-white); }
  #home-hero-card .hhero-top {
    grid-column: 1; grid-row: 1; align-self: stretch; position: relative;
    min-height: 256px; padding: 24px 28px 24px 32px; border-radius: var(--jr-radius-overlay);
    background: var(--jr-orange); box-shadow: var(--jr-shadow-card);
    display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; gap: 20px;
  }
  #home-hero-card .hhero-char { width: 156px; height: 156px; padding: 0; flex: none; align-self: center; }
  #home-hero-card .hhero-talk { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
  #home-hero-card .hhero-bubble {
    background: none; box-shadow: none; padding: 0; border: 0; border-radius: 0;
    color: var(--jr-white); font-size: var(--jr-text-body); font-weight: var(--jr-weight-bold); line-height: 1.45;
  }
  #home-hero-card .hhero-bubble::before, #home-hero-card .hhero-bubble::after { display: none; }
  #home-hero-card .hhero-bubble * { color: var(--jr-white) !important; }
  .jrt-stage-next { display: flex; flex: 1; flex-direction: column; }
  .jrt-count { margin-top: 6px; color: var(--jr-white); font-size: var(--jr-text-title1); font-weight: var(--jr-weight-black); line-height: 1.3; }
  .jrt-count b { color: var(--jr-white); }
  .jrt-next {
    margin-top: auto; display: flex; align-items: center; gap: 16px;
    padding: 14px 16px 14px 20px; border-radius: var(--jr-radius-card); background: var(--jr-white); box-shadow: var(--jr-shadow-raised);
  }
  .jrt-next-txt { flex: 1; min-width: 0; }
  .jrt-next-l { font-size: var(--jr-text-caption); font-weight: var(--jr-weight-bold); color: var(--jr-orange-deep); }
  .jrt-next-t { margin-top: 4px; font-size: var(--jr-text-title3); font-weight: var(--jr-weight-black); color: var(--jr-gray-900); }
  .jrt-next-d { margin-top: 4px; font-size: var(--jr-text-caption); color: var(--jr-gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jrt-next.is-all { display: block; }
  .jrt-next-go {
    flex: none; min-height: 52px; padding: 0 22px; border: 0; border-bottom: 3px solid var(--jr-orange-edge); border-radius: var(--jr-radius-control);
    background: var(--jr-orange); color: var(--jr-white); font-family: inherit; font-size: var(--jr-text-body); font-weight: var(--jr-weight-black); cursor: pointer;
  }
  .jrt-next-go:active { transform: translateY(2px); border-bottom-width: 1px; }

  /* 오른쪽 1: 챔피언 도장판 — 무대와 높이를 맞춘다 */
  #home-hero-card .hboard {
    grid-column: 2; grid-row: 1; align-self: stretch !important; display: flex; flex-direction: column; gap: 14px;
    padding: 20px; border-radius: var(--jr-radius-card); box-shadow: var(--jr-shadow-card);
  }
  .jrt-goal { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 14px 16px; border-radius: var(--jr-radius-row); background: var(--jr-yellow-soft); }
  .jrt-goal-bar { display: block; height: 8px; border-radius: var(--jr-radius-full); background: var(--jr-white); overflow: hidden; }
  .jrt-goal-bar i { display: block; height: 100%; border-radius: inherit; background: var(--jr-yellow); }
  .jrt-goal-t { font-size: var(--jr-text-body-s); font-weight: var(--jr-weight-bold); color: var(--jr-olive-deep); }
  .jrt-goal-t b { color: var(--jr-orange-deep); }

  /* 왼쪽 아래: 오늘 할 일 — 한 줄 목록. 줄마다 오늘 내용(강의 제목·영상 제목 등) */
  #home-todo-card { grid-column: 1; grid-row: 2 / span 3; align-self: stretch; }
  #home-todo-card .htodo-list { display: flex; flex-direction: column; gap: 8px; }
  #home-todo-card .htodo { min-height: 60px; padding: 7px 14px; }
  #home-todo-card .htodo-ic { width: 48px; height: 48px; }
  #home-todo-card .htodo-ic .jr-ic { font-size: 26px; }
  #home-todo-card .htodo-ic.is-img { width: 52px; height: 52px; }
  #home-todo-card .htodo-t { font-size: var(--jr-text-body); }
  .jrt-detail { display: block; margin-top: 3px; font-size: var(--jr-text-caption); color: var(--jr-gray-600); font-weight: var(--jr-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #home-todo-card .htodo-quiz { flex-direction: row; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }   /* 버튼 1개(White)면 min-width 104px 안에서 오른쪽 끝에 붙인다 — 화살표와 끝선 맞춤 */
  #home-todo-card .htodo-quiz-btn { padding: 10px 14px; }

  /* 오른쪽 2~4: 이번 주 줌 → 공지 → 원정대 */
  #home-week-todo-card { grid-column: 2; grid-row: 2; }
  .jrt-zoomline { display: block; margin: 10px 2px 0; font-size: var(--jr-text-body-s); color: var(--jr-gray-800); }
  .jrt-zoomline b { color: var(--jr-sky-deep); font-weight: var(--jr-weight-black); }
  #home-ann-card { grid-column: 2; grid-row: 3; }
  #home-expedition-btn, #home-exp-teaser-btn { grid-column: 2; grid-row: 4; align-self: start; }
  #view-home:not(:has(#home-ann-card:not(.hidden))) #home-expedition-btn,
  #view-home:not(:has(#home-ann-card:not(.hidden))) #home-exp-teaser-btn { grid-row: 3; }
  #home-info-card, #home-quiz-card, #home-listening-card, #home-task-card { grid-column: 1; }
}

@media (min-width: 1024px) {
  /* ── 수업 (2026-10-26 새 설계 · 04-c 「T-수업」): 왼쪽 큰 영상 자리(오늘 강의) · 오른쪽 줌 특강 → VOD 목록 ──
   * 영상 자리를 누르면 cls-vod-ov 가 같은 칸을 덮어 그 자리에서 재생한다 */
  #view-class:not(.hidden) {
    display: grid; grid-template-columns: minmax(0, 1fr) 382px; grid-template-rows: auto auto 1fr;
    column-gap: 16px; row-gap: 14px; align-items: start; padding: 20px 0 16px;
  }
  #view-class > * { grid-column: 2; min-width: 0; margin: 0 !important; }
  #view-class > .cls-header { grid-column: 1 / -1; grid-row: 1; }
  #view-class > .cls-stage, #view-class > .cls-vod-ov { grid-column: 1; grid-row: 2 / span 2; align-self: stretch; }
  #view-class > #cls-zoom-card { grid-row: 2; }
  #view-class > #cls-vod-card { grid-row: 3; }
  /* 오른쪽은 한 화면 안에: 줌 목록·이번 주 강의는 칸 안에서 스크롤. 지난주 복습·시작 가이드는 「전체 강의 보기」 안에 있다 */
  #view-class > .cls-header { padding: 0 4px; }
  #view-class .cls-card { padding: 16px; }
  #view-class #cls-zoom-list { max-height: 160px; overflow-y: auto; overscroll-behavior: contain; }
  #view-class .cls-other-toggle { margin-top: 10px; padding: 8px; }
  #view-class #cls-vod-card > .cls-acc ~ .cls-acc { display: none; }
  #view-class #cls-vod-card .cls-acc-body { max-height: 210px; overflow-y: auto; overscroll-behavior: contain; }
  #view-class #cls-vod-card .cls-vod { padding: 8px 10px; }
  #view-class #cls-vod-card .cls-vod-chips { flex-direction: row; align-items: center; }
  #view-class #cls-vod-card .cls-vod-date, #view-class #cls-vod-card .cls-vod-meta { display: none; }
  #view-class #cls-vod-card .cls-vod.is-done .cls-vod-title::after { content: ' ✓'; color: var(--jr-green-deep); }
  #view-class .cls-vod-all { margin-top: 10px; padding: 10px; }
  .cls-stage:not(.is-empty) {
    display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 20px;
    border-radius: var(--jr-radius-card); background: var(--jr-white); box-shadow: var(--jr-shadow-card);
  }
  .cls-stage.is-empty { display: flex; align-items: center; justify-content: center; border-radius: var(--jr-radius-card); background: var(--jr-white); }
  .cls-stage-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--jr-radius-row); cursor: pointer;
    background: var(--jr-gray-900); display: flex; align-items: center; justify-content: center;
  }
  .cls-stage-play {
    width: 84px; height: 84px; border-radius: 50%; background: var(--jr-white); color: var(--jr-orange);
    display: flex; align-items: center; justify-content: center; font-size: 34px; padding-left: 6px; box-shadow: var(--jr-shadow-overlay);
  }
  .cls-stage-video:active .cls-stage-play { transform: scale(.96); }
  .cls-stage-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cls-stage-chips .cls-vod-prog:empty { display: none; }
  .cls-stage-title { font-size: var(--jr-text-title2); font-weight: var(--jr-weight-black); color: var(--jr-gray-900); line-height: 1.35; }
  .cls-stage-prog { display: flex; justify-content: space-between; font-size: var(--jr-text-label); font-weight: var(--jr-weight-bold); color: var(--jr-gray-700); }
  .cls-stage-prog b { color: var(--jr-orange-deep); }
  .cls-stage-bar { height: 12px; border-radius: var(--jr-radius-full); background: var(--jr-gray-200); overflow: hidden; }
  .cls-stage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--jr-orange); }
  .cls-stage-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
  .cls-stage-prev, .cls-stage-next {
    min-height: 52px; border-radius: var(--jr-radius-control); font-family: inherit; font-size: var(--jr-text-body); font-weight: var(--jr-weight-black); cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 12px;
  }
  .cls-stage-prev { background: var(--jr-white); color: var(--jr-gray-800); border: 2px solid var(--jr-gray-200); border-bottom-width: 3px; }
  .cls-stage-next { background: var(--jr-orange); color: var(--jr-white); border: 0; border-bottom: 3px solid var(--jr-orange-edge); }
  /* 영상을 열면 영상 자리 대신 플레이어 (모달이 아니라 칸 안) */
  #view-class:has(> .cls-vod-ov) > .cls-stage { display: none; }
  #view-class > .cls-vod-ov {
    position: relative; inset: auto; z-index: 1; max-height: none; padding: 16px 0 20px;
    border-radius: var(--jr-radius-card); background: var(--jr-white); box-shadow: var(--jr-shadow-card);
  }
  #view-class > .cls-vod-ov .cls-vod-ov-inner { max-width: none; }
  body:has(#view-class > .cls-vod-ov) { overflow: auto !important; }

  /* ── 과제 (2026-10-26 새 설계 · 04-c 「T-과제」): 왼쪽 오늘 과제(크게) · 오른쪽 이번 주 기록(+전체 60일 격자는 열 때만) ── */
  #view-homework:not(.hidden) {
    display: grid; grid-template-columns: minmax(0, 1fr) 382px; column-gap: 16px; row-gap: 14px; align-items: start;
    padding: 20px 0 16px;
  }
  #view-homework > * { min-width: 0; margin: 0 !important; }
  #view-homework > .hw-header, #view-homework > .hw-pre { grid-column: 1 / -1; }
  #view-homework > .hw-header { padding: 0 4px; display: flex; align-items: baseline; gap: 12px; }
  #view-homework > .mypage-footer { display: none; }
  #view-homework > .hw-today { grid-column: 1; grid-row: 2 / span 3; align-self: stretch; padding: 20px; }
  #view-homework > .jrt-hw-week { grid-column: 2; grid-row: 2; }
  #view-homework > .hw-record { grid-column: 2; grid-row: 3; display: none; }
  #view-homework.jrt-hw-show-all > .hw-record { display: block; }
  #view-homework > .hw-record .card-collection-notice { display: none; }
  #view-homework > .hw-pre ~ .hw-today { grid-row: 3 / span 3; }
  #view-homework > .hw-pre ~ .jrt-hw-week { grid-row: 3; }
  #view-homework > .hw-pre ~ .hw-record { grid-row: 4; }
  #view-homework .hw-hint { display: none; }   /* '아래 날짜를 눌러' — 태블릿은 오른쪽에 있다 */
  #view-homework .hw-sents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #view-homework .hw-sents:has(> .hw-sent:only-child) { grid-template-columns: 1fr; }
  #view-homework .hw-sent { padding: 18px; }
  #view-homework .hw-sent:only-child .hw-sent-en { font-size: var(--jr-text-title1); }
  #view-homework .hw-play { width: 64px; height: 64px; }
  #view-homework .hw-band { min-height: 56px; font-size: var(--jr-text-title3); }

  .jrt-hw-week { display: flex !important; flex-direction: column; gap: 12px; }
  .jrt-hw-days { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; }
  .jrt-hw-day {
    min-height: 84px; border: 2px solid transparent; border-radius: var(--jr-radius-row); background: var(--jr-gray-100); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: inherit; color: var(--jr-gray-800);
  }
  .jrt-hw-day b { font-size: var(--jr-text-body); font-weight: var(--jr-weight-black); }
  .jrt-hw-dow, .jrt-hw-st { font-size: var(--jr-text-caption); font-weight: var(--jr-weight-bold); color: var(--jr-gray-600); min-height: 1em; }
  .jrt-hw-day.is-done { background: var(--jr-green-soft); }
  .jrt-hw-day.is-done .jrt-hw-st { color: var(--jr-green-deep); }
  .jrt-hw-day.is-today { background: var(--jr-orange-soft); border-color: var(--jr-orange); }
  .jrt-hw-day.is-today .jrt-hw-st { color: var(--jr-orange-deep); }
  .jrt-hw-day.is-sel:not(.is-today) { border-color: var(--jr-sky); }
  .jrt-hw-prog { display: flex; justify-content: space-between; font-size: var(--jr-text-label); font-weight: var(--jr-weight-bold); color: var(--jr-gray-700); }
  .jrt-hw-prog b { color: var(--jr-orange-deep); }
  .jrt-hw-bar { height: 12px; border-radius: var(--jr-radius-full); background: var(--jr-gray-200); overflow: hidden; }
  .jrt-hw-bar i { display: block; height: 100%; border-radius: inherit; background: var(--jr-orange); }
  .jrt-hw-note { padding: 12px 14px; border-radius: var(--jr-radius-row); background: var(--jr-purple-soft); color: var(--jr-purple-deep); font-size: var(--jr-text-label); font-weight: var(--jr-weight-bold); }

  /* ── 마이 (2026-10-26 새 설계 · 04-c 「T-마이」): 왼쪽 큰 열 = 내 카드(4열)·코인·지난 기록 / 오른쪽 = 프로필·성장기록·친구 도감·라즈키즈 ── */
  #view-mypage:not(.hidden) {
    display: grid; grid-template-columns: minmax(0, 1fr) 382px; grid-template-rows: auto auto auto 1fr;
    column-gap: 16px; row-gap: 14px; align-items: start; padding: 20px 0 20px; margin: 0;
  }
  #view-mypage .mypage-body { display: contents; }
  #view-mypage .mypage-hero {
    grid-column: 2; grid-row: 1; margin: 0; padding: 20px 20px 18px; border-radius: var(--jr-radius-card);
    background: var(--jr-white); box-shadow: var(--jr-shadow-card); overflow: hidden;
  }
  #view-mypage .mypage-hero-bg, #view-mypage .mypage-hero-top { display: none; }
  #view-mypage .mypage-student-name { color: var(--jr-gray-900); }
  #view-mypage .mypage-profile { padding: 0; margin: 0; }
  #view-mypage .mypage-tag, #view-mypage .mypage-tags .progress-badge { background: var(--jr-gray-100) !important; color: var(--jr-gray-800) !important; border-color: var(--jr-gray-200) !important; }
  /* 코인·반 순위·전체 순위 = 타일 3개 한 줄 */
  #view-mypage .mypage-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #view-mypage .mypage-profile { grid-column: 1 / -1; }
  #view-mypage .mypage-coin-card, #view-mypage .mypage-rankings { display: contents; }
  #view-mypage .coin-card-glow, #view-mypage .coin-card-icon, #view-mypage .rank-divider { display: none; }
  #view-mypage .coin-card-content, #view-mypage .mypage-rank-card {
    margin: 0; padding: 12px 6px; border: 0; border-radius: var(--jr-radius-row); box-shadow: none; backdrop-filter: none;
    display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; text-align: center;
  }
  #view-mypage .coin-card-content { background: var(--jr-yellow-soft); }
  #view-mypage .coin-card-info { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; }
  #view-mypage .mypage-rank-card { background: var(--jr-orange-soft); }
  #view-mypage .mypage-rank-card:last-child { background: var(--jr-sky-soft); }
  #view-mypage .coin-card-value, #view-mypage .rank-card-value { font-size: var(--jr-text-title2) !important; font-weight: var(--jr-weight-black); color: var(--jr-olive-deep) !important; line-height: 1.2; }
  #view-mypage .mypage-rank-card .rank-card-value { color: var(--jr-orange-deep) !important; }
  #view-mypage .mypage-rank-card:last-child .rank-card-value { color: var(--jr-sky-deep) !important; }
  #view-mypage .coin-card-label, #view-mypage .rank-card-label { font-size: var(--jr-text-caption); font-weight: var(--jr-weight-bold); color: var(--jr-gray-700) !important; letter-spacing: 0; text-transform: none; }
  /* 카드 칸은 그림·이름·장수만(설명 줄·안내 3줄은 휴대폰 그대로) */
  #view-mypage .card-collection-notice { font-size: var(--jr-text-caption); }
  #view-mypage #mypage-exam-buttons { grid-column: 2; grid-row: 2; }
  #view-mypage #mypage-exam-buttons:empty { display: none; }
  #view-mypage .mp-side { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; gap: 14px; }
  #view-mypage .mp-side > * { margin: 0 !important; }
  #view-mypage .mp-main { grid-column: 1; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 14px; }
  #view-mypage .mp-main > * { margin: 0 !important; }
  #view-mypage .mp-main > .mypage-footer { display: none; }
  #view-mypage .card-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  #view-mypage .card-list .reward-card { flex-direction: column; text-align: center; margin: 0; }
  #view-mypage .mp-logout-btn { align-self: flex-end; width: auto; padding: 10px 20px; }

  /* ── 랭킹 (2026-10-26 새 설계 · 04-c 「T-랭킹」): 왼쪽 시상대+목록(한 카드, 페이지 스크롤로 더 불러오기) · 오른쪽 내 순위+다음 목표·코인 모으는 법(고정) ── */
  #view-ranking:not(.hidden) { padding: 20px 0 20px; margin: 0; background: none; }
  #view-ranking .ranking-header { background: none; box-shadow: none; padding: 0 4px 14px; justify-content: flex-start; color: var(--jr-gray-900); }
  #view-ranking .ranking-header-title { color: var(--jr-gray-900); font-size: var(--jr-text-title2); }
  #view-ranking .ranking-back-btn, #view-ranking .ranking-header > div:last-child { display: none; }
  #view-ranking .ranking-body {
    display: grid; grid-template-columns: minmax(0, 1fr) 382px; grid-template-rows: auto 1fr; column-gap: 16px; align-items: start;
    padding: 0 !important; margin: 0;
  }
  #view-ranking .ranking-podium {
    grid-column: 1; grid-row: 1; margin: 0; padding: 24px 24px 0; border-radius: var(--jr-radius-card) var(--jr-radius-card) 0 0;
    background: var(--jr-white); box-shadow: var(--jr-shadow-card);
  }
  #view-ranking .ranking-list {
    grid-column: 1; grid-row: 2; margin: 0; padding: 12px 16px 16px; border-radius: 0 0 var(--jr-radius-card) var(--jr-radius-card);
    background: var(--jr-white); box-shadow: var(--jr-shadow-card); clip-path: inset(0 -20px -20px -20px);
  }
  #view-ranking .ranking-podium[style*="none"] + .ranking-list { border-radius: var(--jr-radius-card); grid-row: 1 / span 2; }
  .ranking-aside { display: none; }
  #view-ranking .ranking-aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
  #view-ranking .ranking-aside > .home-card { margin: 0; }
  #view-ranking .ranking-me-bar { display: none !important; }
  .jrt-rk-row { display: flex; align-items: center; gap: 16px; margin: 6px 0 12px; }
  .jrt-rk-n { font-size: var(--jr-text-display); font-weight: var(--jr-weight-black); color: var(--jr-orange-deep); line-height: 1; }
  .jrt-rk-who { display: flex; flex-direction: column; gap: 2px; font-size: var(--jr-text-body); color: var(--jr-gray-900); }
  .jrt-rk-who small { font-size: var(--jr-text-caption); color: var(--jr-gray-600); }
  .jrt-rk-goal { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--jr-radius-row); background: var(--jr-yellow-soft); color: var(--jr-olive-deep); font-size: var(--jr-text-body); font-weight: var(--jr-weight-bold); }
  .jrt-rk-goal b { color: var(--jr-orange-deep); font-weight: var(--jr-weight-black); }
  .jrt-rk-goal small { font-size: var(--jr-text-caption); font-weight: var(--jr-weight-medium); color: var(--jr-gray-700); }
  .jrt-rk-find {
    width: 100%; min-height: 52px; margin-top: 12px; border: 0; border-bottom: 3px solid var(--jr-orange-edge); border-radius: var(--jr-radius-control);
    background: var(--jr-orange); color: var(--jr-white); font-family: inherit; font-size: var(--jr-text-body); font-weight: var(--jr-weight-black); cursor: pointer;
  }
  .jrt-rk-how { display: flex; flex-direction: column; gap: 8px; }
  .jrt-rk-how-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: var(--jr-radius-row); background: var(--jr-purple-soft); color: var(--jr-purple-deep); font-size: var(--jr-text-body-s); font-weight: var(--jr-weight-bold); }
  .jrt-rk-how-row b { padding: 2px 10px; border-radius: var(--jr-radius-full); background: var(--jr-white); color: var(--jr-gray-900); font-size: var(--jr-text-label); }
}

@media (min-width: 1024px) {
  /* ── 퀴즈(단어·파닉스·블록 · /quiz/): 몰입 화면이라 레일 없음. 가운데 좁은 기둥 → 가로를 나눠 쓴다 ── */
  .qz-app { max-width: 1040px; }
  .qz-main { max-width: 980px; }
  /* 익히기: 카드를 가로로(그림 | 단어·발음·뜻·듣기) */
  .qz-main .qz-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; text-align: left; padding: 28px; }
  .qz-main .qz-card > * { grid-column: 2; }
  .qz-main .qz-card > .qz-card-pic { grid-column: 1; grid-row: 1 / span 6; margin: 0 auto; width: 100%; max-width: 380px; justify-self: center; }
  .qz-main .qz-card.is-white { grid-template-columns: 1fr; text-align: center; }
  .qz-main .qz-card.is-white > * { grid-column: 1; }
  .qz-main .qz-card-word { font-size: 56px; }
  .qz-main .qz-card:not(.is-white) .qz-syll { justify-content: flex-start; }
  .qz-main .qz-card-nav { max-width: 640px; margin-left: auto; margin-right: auto; }
  /* 문제 (2026-10-26 새 설계 · 04-c 「T-퀴즈」): 왼쪽 문제 카드(크게, 보기 높이에 맞춤) · 오른쪽 보기 2×2 큰 타일 · 아래 결과·다음은 한 줄 */
  .qz-main:has(.qz-choices) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 14px; align-items: start;
    align-content: start; }   /* 남는 세로 공간을 줄마다 나눠 주지 않는다 — 결과 줄이 생길 때 위쪽이 들썩였다(2026-10-26) */
  .qz-main:has(.qz-choices) > * { grid-column: 1 / -1; margin-top: 0 !important; margin-bottom: 0 !important; }
  .qz-main:has(.qz-choices) > .qz-qcard {
    grid-column: 1; align-self: stretch; margin: 0; min-height: 420px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  }
  .qz-main:has(.qz-choices) > .qz-choices { grid-column: 2; align-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; gap: 14px; }
  .qz-main:has(.qz-choices) > .qz-check { grid-column: 2; }
  .qz-main .qz-qcard .qz-q-word { font-size: 64px; }
  .qz-main:has(.qz-choices) > .qz-fb { grid-column: 1; }
  .qz-main:has(.qz-choices) > .qz-nextwrap { grid-column: 2; }
  /* 결과·다음 버튼 자리를 미리 비워 둔다 — 답하면 생기는 줄이 아래를 밀지 않게 */
  .qz-main:has(.qz-choices) > .qz-fb, .qz-main:has(.qz-choices) > .qz-nextwrap { min-height: 76px; }
  .qz-main .qz-choice { font-size: var(--jr-text-title1); padding: 22px 16px; min-height: 160px; }
}

/* ── 태블릿 세로(700~1023): 하단 메뉴 그대로, 화면만 넓게 · 할 일은 타일 한 줄 ── */
@media (min-width: 700px) and (max-width: 1023px) {
  .student-page .app-container { max-width: 760px !important; }
  #view-home, #view-class, #view-homework, #view-mypage, #view-ranking { max-width: 720px; }
  #home-todo-card .htodo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #home-todo-card .htodo-quiz { flex-direction: row; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }   /* 버튼 1개(White)면 min-width 104px 안에서 오른쪽 끝에 붙인다 — 화살표와 끝선 맞춤 */
  #view-mypage .card-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

@media (min-width: 1024px) {
  /* ── 리스닝 (2026-10-26 새 설계 · 04-c 「T-리스닝」): 왼쪽 이번 주 영상(크게) · 오른쪽 이번 주 리스닝 칸 → 지난 미션(펼친 채) ── */
  #view-listening:not(.hidden) {
    display: grid; grid-template-columns: minmax(0, 1fr) 382px; grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 14px; align-items: start;
    padding: 20px 0 16px;
  }
  #view-listening > * { grid-column: 1 / -1; min-width: 0; margin: 0 !important; }
  #view-listening > .listening-header { padding: 0 4px; }
  #view-listening > .listening-header .listening-back { display: none; }
  #view-listening > .listening-video-card { grid-column: 1; grid-row: 2 / span 2; }
  #view-listening > .listening-week { grid-column: 2; grid-row: 2; display: flex !important; flex-direction: column; gap: 12px; }
  #view-listening > .listening-past { grid-column: 2; grid-row: 3; border-radius: var(--jr-radius-card); box-shadow: var(--jr-shadow-card); }
  #view-listening > .listening-past.hidden { display: none !important; }
  #view-listening .listening-past-body.hidden { display: block !important; }   /* 태블릿은 펼친 채(오른쪽 열에 자리가 있다) */
  #view-listening .listening-past-toggle { pointer-events: none; }
  #view-listening .listening-past-caret { display: none; }
  #view-listening > .mypage-footer { display: none; }
  .lw-days { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; }
  .lw-day { min-height: 68px; border: 2px solid transparent; border-radius: var(--jr-radius-row); background: var(--jr-gray-100); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--jr-text-caption); font-weight: var(--jr-weight-bold); color: var(--jr-gray-600); }
  .lw-day b { font-size: var(--jr-text-body); color: var(--jr-gray-700); min-height: 1.2em; }
  .lw-day.is-done { background: var(--jr-green-soft); }
  .lw-day.is-done b { color: var(--jr-green-deep); }
  .lw-day.is-today { background: var(--jr-orange-soft); border-color: var(--jr-orange); }
  .lw-day.is-today b { color: var(--jr-orange-deep); font-size: var(--jr-text-label); }
  .lw-note { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--jr-radius-row); background: var(--jr-purple-soft); color: var(--jr-purple-deep); font-size: var(--jr-text-label); }
  .lw-note span { color: var(--jr-gray-700); font-size: var(--jr-text-caption); }

  /* ── 소리원정대 (2026-10-26 새 설계 · 04-c 「T-원정대」): 왼쪽 단체 그림+영상 버튼 · 오른쪽 내 프로필 캐릭터 → 멤버 카드 2열 ── */
  #view-expedition:not(.hidden) { padding: 20px 0 16px; }
  #view-expedition .exp-topbar { padding: 0 4px 14px; }
  #view-expedition .exp-body {
    padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 382px; grid-template-rows: auto auto auto 1fr;
    column-gap: 16px; row-gap: 12px; align-items: start;
  }
  #view-expedition .exp-body > * { grid-column: 1; margin: 0 !important; }
  #view-expedition .exp-hero { justify-self: center; width: auto; max-width: 100%; max-height: calc(100vh - 290px); object-fit: contain; border-radius: var(--jr-radius-overlay); box-shadow: var(--jr-shadow-card); }
  #view-expedition .exp-side {
    grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 12px;
    padding: 16px; border-radius: var(--jr-radius-card); background: var(--jr-white); box-shadow: var(--jr-shadow-card);
  }
  #view-expedition #exp-avatar-btn { display: none; }   /* 오른쪽 '바꾸기' 가 대신한다 */
  #view-expedition .exp-pill-btn { width: 100%; max-width: none; }
  #view-expedition .exp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 0 !important; padding: 0 !important; overflow: visible; scroll-snap-type: none; }
  #view-expedition .exp-cards::before, #view-expedition .exp-cards::after { display: none; }
  #view-expedition .exp-card { width: 100%; max-width: none; flex: none; margin: 0; border-radius: var(--jr-radius-row); scroll-snap-align: none; transform: none !important; opacity: 1 !important; }
  #view-expedition .exp-card.is-clone { display: none; }
  #view-expedition .exp-card.locked { opacity: .75 !important; }
  #view-expedition .exp-carousel-nav { display: none; }
  .exp-me { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--jr-gray-200); }
  .exp-me img, .exp-me-letter { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--jr-orange-soft); display: flex; align-items: center; justify-content: center; font-weight: var(--jr-weight-black); color: var(--jr-orange-deep); }
  .exp-me-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .exp-me-txt small { font-size: var(--jr-text-caption); color: var(--jr-gray-600); font-weight: var(--jr-weight-bold); }
  .exp-me-txt b { font-size: var(--jr-text-title3); color: var(--jr-gray-900); }
  .exp-me-btn { min-height: 40px; padding: 0 16px; border: 2px solid var(--jr-gray-200); border-radius: var(--jr-radius-control); background: var(--jr-white); font-family: inherit; font-size: var(--jr-text-label); font-weight: var(--jr-weight-black); color: var(--jr-gray-800); cursor: pointer; }
  .exp-members-hd { display: block; font-size: var(--jr-text-body); font-weight: var(--jr-weight-black); color: var(--jr-gray-900); }
  .exp-members-hd b { color: var(--jr-orange-deep); }
}

/* ════ 하위 화면(레일 없음): 시험·평가 리포트·인증서·레벨테스트 ════ */
@media (min-width: 700px) {
  /* 인증서(시험·ACE·BRAVO): 360px 고정 카드를 화면에 맞게 키운다. 이미지 저장은 원래 크기로(각 페이지 JS 가 저장 순간 zoom 을 끈다) */
  .jr-cert-page #certificate { zoom: 1.4; }
  /* 레벨테스트 2.0 · 복귀 레벨테스트: 카드를 크게 */
  .jr-lt-page #app, .jr-lt-page .app-container { zoom: 1.3; }
}
@media (min-width: 1024px) {
  .jr-cert-page #certificate { zoom: 1.6; }
  .jr-cert-page .cert-actions { margin-top: 20px; }

  /* 시험: 넓게 + 문항 2열(제목·안내·지문은 한 줄 전체) */
  .exam-page .app-container, .exam-report-page .app-container { max-width: 1040px !important; }
  .exam-page .exam-wrap { max-width: 1000px; }
  .exam-page :has(> .exam-q) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .exam-page :has(> .exam-q) > :not(.exam-q) { grid-column: 1 / -1; }

  /* 평가 리포트(기말·ACE·BRAVO): 넓게 + 카드 2열 */
  .exam-report-page .exam-wrap { max-width: 1000px; }
  .exam-report-page #report-content .exam-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .exam-report-page #report-content .exam-wrap > * { grid-column: 1 / -1; }
  .exam-report-page #report-content .exam-wrap > .exam-card { grid-column: auto; margin-top: 0; }
  .ace-report-page .report-container, .bravo-report-page .report-container { max-width: 1000px; }
  .ace-report-page #report-content, .bravo-report-page #report-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .ace-report-page #report-content > *, .bravo-report-page #report-content > * { grid-column: 1 / -1; }
  .ace-report-page #report-content > .report-section, .bravo-report-page #report-content > .report-section { grid-column: auto; }

  .jr-lt-page #app, .jr-lt-page .app-container { zoom: 1.5; }
}

/* ════ 한 화면 맞춤 (2026-10-26) — 태블릿·PC 가로에서 "지금 할 일" 화면(홈·수업·과제·리스닝·원정대·퀴즈)을 보이는 높이에 맞춘다.
 * 기준 = 아이패드 가로 사파리(보이는 높이 ~740). 높이에 따라 무대·그림·여백이 먼저 줄고, 긴 목록은 카드 안에서 스크롤한다.
 * 글자·버튼은 줄이지 않는다. 높이 600 미만(작은 창)은 이 블록을 건너뛰어 예전처럼 페이지가 스크롤된다. 랭킹·마이(목록 화면)는 대상 아님. */
:root { --jr-vh: 100vh; }
@supports (height: 100dvh) { :root { --jr-vh: 100dvh; } }

@media (min-width: 1024px) and (min-height: 600px) {
  /* 홈 */
  #view-home:not(.hidden) {
    box-sizing: border-box; height: var(--jr-vh); padding: 16px 0;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  #home-hero-card .hhero-top { min-height: clamp(184px, calc(var(--jr-vh) * .3), 320px); padding-top: clamp(16px, 2.6vh, 28px); padding-bottom: clamp(16px, 2.6vh, 28px); }
  #home-hero-card .hhero-char { width: clamp(110px, calc(var(--jr-vh) * .2), 170px); height: clamp(110px, calc(var(--jr-vh) * .2), 170px); }
  #home-hero-card .hboard { gap: clamp(8px, 1.4vh, 14px); padding-top: clamp(14px, 2vh, 20px); padding-bottom: clamp(14px, 2vh, 20px); }
  #home-todo-card { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  #home-todo-card .htodo-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* flex-shrink:0 — 줄이 목록 높이보다 많으면 줄을 누르지 말고 목록이 스크롤한다.
   * 없으면 세로가 낮은 태블릿(갤럭시탭 가로 등)에서 줄이 내용보다 낮게 눌려 글자가 서로 겹쳤다(2026-10-28) */
  #home-todo-card .htodo { flex-shrink: 0; min-height: clamp(46px, calc(var(--jr-vh) * .072), 70px); padding-top: 4px; padding-bottom: 4px; }
  #home-todo-card .htodo-reward { flex: none; }
  #home-ann-card { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

  /* 수업 — 영상 자리는 높이에 맞춰 폭을 줄이고, 줌·VOD 목록은 남는 높이를 나눠 카드 안에서 스크롤 */
  #view-class:not(.hidden) {
    box-sizing: border-box; height: var(--jr-vh); padding: 16px 0;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  }
  #view-class > .cls-stage:not(.is-empty) { min-height: 0; overflow: hidden; }
  #view-class .cls-stage-video { width: min(100%, calc((var(--jr-vh) - 330px) * 16 / 9)); align-self: center; }
  #view-class > .cls-vod-ov { min-height: 0; overflow-y: auto; }
  #view-class > #cls-zoom-card, #view-class > #cls-vod-card { align-self: stretch; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  #view-class #cls-zoom-list { max-height: none; flex: 1 1 0; min-height: 0; }
  #view-class #cls-vod-card { overflow-y: auto; overscroll-behavior: contain; }
  #view-class #cls-vod-card .cls-acc-body { max-height: none; overflow: visible; }

  /* 과제 — 오늘 과제 카드는 남는 높이를 다 쓰고, 문장이 많으면 카드 안에서 스크롤 */
  #view-homework:not(.hidden) {
    box-sizing: border-box; height: var(--jr-vh); padding: 16px 0;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  #view-homework:has(> .hw-pre):not(.hidden) { grid-template-rows: auto auto auto minmax(0, 1fr); }
  #view-homework > .hw-today { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #view-homework > .hw-record { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

  /* 리스닝 — 영상은 높이에 맞춰 폭을 줄이고, 지난 미션은 카드 안에서 스크롤 */
  #view-listening:not(.hidden) { box-sizing: border-box; height: var(--jr-vh); padding: 16px 0; grid-template-rows: auto auto minmax(0, 1fr); }
  #view-listening > .listening-video-card { align-self: stretch; min-height: 0; overflow-y: auto; }
  #view-listening .listening-video-card .listening-player-wrap { width: min(100%, calc((var(--jr-vh) - 350px) * 16 / 9)); margin-left: auto; margin-right: auto; padding-top: 0; aspect-ratio: 16 / 9; }
  #view-listening > .listening-past { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

  /* 원정대 — 그림은 높이에 맞추고, 멤버 카드는 카드 안에서 스크롤 */
  #view-expedition:not(.hidden) { padding: 16px 0; }
  #view-expedition .exp-hero { max-height: calc(var(--jr-vh) - 270px); }
  #view-expedition .exp-side { max-height: calc(var(--jr-vh) - 84px); overflow-y: auto; overscroll-behavior: contain; }
}
/* ════ 바탕 고정 층 (2026-10-29) — 태블릿·PC(≥768)
 * 전에는 html·body 에 `background: … fixed` 였는데, 태블릿 브라우저(아이패드 사파리·갤럭시탭)는 fixed 를 무시해서
 * 그라데이션이 페이지 길이만큼 늘어났다 → 마이·랭킹처럼 긴 화면은 아래로 갈수록 거의 흰색만 보였다.
 * 화면에 붙은 별도 층(body::before, position:fixed)으로 깔면 어느 브라우저든 늘 같은 하늘색이다.
 * body::before 는 휴대폰 구름 장식 자리인데 768 이상에선 원래 숨긴다(student.css). ════ */
@media (min-width: 768px) {
  html:has(body.student-page) { background: var(--jr-sky-bg-100); }   /* 위·아래로 당겼을 때(오버스크롤) 보이는 색 */
  body.student-page { background: transparent; }
  body.student-page::before {
    display: block; content: ''; position: fixed; inset: 0; top: 0; left: 0; width: auto; height: auto;
    border-radius: 0; box-shadow: none; animation: none; background: var(--jr-bg-sky); z-index: -1; pointer-events: none;
  }
}

/* 높이가 낮은 화면(아이패드 미니·노트북): 원정대 멤버 카드 3열 · 홈 여백 줄임 */
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 780px) {
  /* 홈: 무대·할 일 줄의 안쪽 여백과 아이콘만 줄인다(글자·버튼 크기는 그대로) */
  #home-hero-card .hhero-top { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .jrt-count { font-size: 24px; }
  .jrt-next { padding-top: 10px; padding-bottom: 10px; }
  #home-todo-card { padding-top: 12px; padding-bottom: 12px; }
  #home-todo-card .htodo-list { gap: 6px; }
  #home-todo-card .htodo { min-height: 0; padding-top: 2px; padding-bottom: 2px; }
  #home-todo-card .htodo-ic { width: 40px; height: 40px; }
  #home-todo-card .htodo-ic .jr-ic { font-size: 22px; }
  #home-todo-card .htodo-ic.is-img { width: 44px; height: 44px; }
  #home-todo-card .htodo-reward { padding-top: 8px; padding-bottom: 8px; margin-top: 8px; }
  #view-expedition .exp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

  /* 퀴즈 — 문제 카드·보기 높이를 화면에 맞춘다(보기는 문제 카드 높이를 2줄로 나눠 쓴다) */
  .qz-main:has(.qz-choices) > .qz-qcard { min-height: 0; height: clamp(260px, calc(var(--jr-vh) - 330px), 540px); }
  .qz-main:has(.qz-choices) > .qz-choices { height: clamp(260px, calc(var(--jr-vh) - 330px), 540px); }
  .qz-main .qz-choice { min-height: 0; }
}

/* ════ 타이틀 정리 (2026-10-26) — 카드 윗선을 왼쪽 메뉴 윗선(20px)에 맞춘다 ════
 * 탭 화면(수업·과제·랭킹): 타이틀 숨김 — 왼쪽 메뉴가 어느 탭인지 말한다.
 * 하위 화면(리스닝·원정대): [‹ 홈]을 왼쪽 카드·그림 안 왼쪽 위에 얹어 세 열(메뉴·왼쪽·오른쪽)의 윗선을 맞춘다(10-27).
 *   전에는 [‹ 홈]+제목 줄이 왼쪽 열 위에 따로 있어 가운데 카드만 한 줄 아래로 꺼져 보였다. 휴대폰은 그대로. */
@media (min-width: 1024px) {
  #view-home:not(.hidden), #view-class:not(.hidden), #view-homework:not(.hidden), #view-mypage:not(.hidden),
  #view-ranking:not(.hidden), #view-listening:not(.hidden), #view-expedition:not(.hidden) { padding-top: 20px; }

  /* 수업 */
  #view-class > .cls-header { display: none; }
  #view-class:not(.hidden) { grid-template-rows: auto 1fr; }
  #view-class > .cls-stage, #view-class > .cls-vod-ov { grid-row: 1 / span 2; }
  #view-class > #cls-zoom-card { grid-row: 1; }
  #view-class > #cls-vod-card { grid-row: 2; }

  /* 과제 */
  #view-homework > .hw-header { display: none; }
  #view-homework > .hw-today { grid-row: 1 / span 2; }
  #view-homework > .jrt-hw-week { grid-row: 1; }
  #view-homework > .hw-record { grid-row: 2; }
  #view-homework > .hw-pre { grid-row: 1; }
  #view-homework > .hw-pre ~ .hw-today { grid-row: 2 / span 2; }
  #view-homework > .hw-pre ~ .jrt-hw-week { grid-row: 2; }
  #view-homework > .hw-pre ~ .hw-record { grid-row: 3; }

  /* 랭킹 */
  #view-ranking .ranking-header { display: none; }

  /* 리스닝: 영상 카드가 맨 위부터. [‹ 홈]+제목 줄은 카드 머리 자리에 겹쳐 얹고(같은 칸·위 정렬),
   * 카드 머리의 아이콘·'이번 주 미션 영상'은 숨긴다(페이지 제목과 같은 말). 상태 칩은 오른쪽 끝 그대로.
   * 마크업은 안 바꾼다 — 리스닝 영상 방식이 바뀌어도(.listening-header·.home-card-hd 구조만 같으면) 그대로 맞는다. */
  #view-listening:not(.hidden) { grid-template-rows: auto auto 1fr; }
  #view-listening > .listening-header {
    grid-column: 1; grid-row: 1; justify-self: start; align-self: start; position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px; padding: var(--space-md, 16px); border-radius: var(--jr-radius-card) 0 var(--jr-radius-row) 0; background: var(--jr-white);
  }
  #view-listening > .listening-header .listening-back { display: inline-flex; margin: 0; }
  #view-listening > .listening-header .listening-title { margin: 0; font-size: var(--jr-text-title3); white-space: nowrap; }
  #view-listening > .listening-header .listening-sub { display: none; }
  #view-listening > .listening-video-card { grid-row: 1 / span 3; }
  #view-listening .listening-video-card > .home-card-hd { min-height: 40px; }
  #view-listening .listening-video-card > .home-card-hd > .home-ic,
  #view-listening .listening-video-card > .home-card-hd > .home-card-title { display: none; }
  #view-listening .listening-video-card > .home-card-hd > .listening-status { margin-left: auto; }
  #view-listening > .listening-week { grid-row: 1 / span 2; }
  #view-listening > .listening-past { grid-row: 3; }

  /* 원정대: 그림이 맨 위부터 · [‹ 홈]은 그림 왼쪽 위 모서리에 얹음(제목은 그림 안에 이미 있다) · 영상 버튼 / 오른쪽 내 캐릭터·멤버(맨 위부터).
   * 그림(정사각)은 왼쪽에 붙이고 영상 버튼 폭을 그림 폭에 맞춘다(--exp-hero-h). */
  #view-expedition:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) 382px; grid-template-rows: auto auto auto auto 1fr; column-gap: 16px; row-gap: 12px; align-items: start; }
  #view-expedition .exp-topbar { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; position: relative; z-index: 1; padding: 16px 0 0 16px; }
  #view-expedition .exp-topbar > div:last-child, #view-expedition .exp-title { display: none; }
  #view-expedition .exp-body { display: contents; }
  #view-expedition .exp-hero { grid-column: 1; grid-row: 1 / span 2; justify-self: start; }
  #view-expedition .exp-body > .exp-pill-btn { justify-self: start; width: min(100%, var(--exp-hero-h, 100%)); }
  #view-expedition .exp-side { grid-column: 2; grid-row: 1 / span 5; }
  #view-expedition .exp-body > .exp-pill-btn { grid-column: 1; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  #view-home:not(.hidden), #view-class:not(.hidden), #view-homework:not(.hidden), #view-listening:not(.hidden) { padding-top: 20px; }
  #view-class:not(.hidden) { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  #view-homework:not(.hidden) { grid-template-rows: auto minmax(0, 1fr); }
  #view-homework:has(> .hw-pre):not(.hidden) { grid-template-rows: auto auto minmax(0, 1fr); }
  #view-listening:not(.hidden) { grid-template-rows: auto auto minmax(0, 1fr); }
  #view-expedition:not(.hidden) { box-sizing: border-box; height: var(--jr-vh); padding-bottom: 16px; }
  #view-expedition:not(.hidden) { --exp-hero-h: calc(var(--jr-vh) - 200px); }
  #view-expedition .exp-hero { max-height: var(--exp-hero-h); }
  #view-expedition .exp-side { max-height: calc(var(--jr-vh) - 36px); }
}

/* 홈 캐릭터: 무대 오른쪽 아래 모서리에 붙여 크게(그림 양옆 투명 여백 때문에 가운데 둥실 떠 보이던 것) — 2026-10-26 */
@media (min-width: 1024px) {
  #home-hero-card .hhero-top { padding-right: 16px; }
  #home-hero-card .hhero-char {
    align-self: flex-end; width: clamp(140px, calc(var(--jr-vh, 100vh) * .26), 210px); height: clamp(140px, calc(var(--jr-vh, 100vh) * .26), 210px);
    margin: 0 -4px calc(-1 * clamp(16px, 2.6vh, 28px)) 0;
  }
  #home-hero-card .hhero-char img { object-position: 50% 100%; }
}
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 780px) {
  #home-hero-card .hhero-char { margin-bottom: -14px; }
}
/* ════ 더 낮은 화면(≤700 — 갤럭시탭 가로 등, 2026-10-29): 오늘 할 일 5줄을 스크롤 없이 한 화면에 ════
 * 갤럭시탭은 16:10 이라 브라우저 주소창·탭 줄을 빼면 보이는 높이가 650 안팎(아이패드 ≈740).
 * - 할 일 줄: 제목·오늘 내용을 한 줄로(두 줄 → 한 줄), 3D 그림 44 → 38
 * - 아래 「꾸준왕 카드」 안내 띠는 640 이하에서만 숨김 — 오른쪽 「챔피언 도전」 카드에 같은 안내가 있다
 * - 오른쪽 챔피언 도장판도 같이 줄인다(무대와 같은 줄이라 그 높이가 무대 높이를 정한다)
 * - 무대(주황 카드): 여백·글자·캐릭터를 줄이고 「다음 할 일」의 설명 줄을 뺀다(아래 목록 첫 줄과 같은 말) */
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 700px) {
  #home-hero-card .hhero-top { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  #home-hero-card .hhero-char { width: 120px; height: 120px; margin-bottom: -12px; }
  .jrt-count { margin-top: 2px; font-size: var(--jr-text-title2); }
  .jrt-next { margin-top: 10px; padding-top: 8px; padding-bottom: 8px; }
  .jrt-next-t { margin-top: 2px; }
  .jrt-next-d { display: none; }
  .jrt-next-go { min-height: 44px; }
  #home-todo-card .htodo-main { flex-direction: row; align-items: baseline; gap: 10px; }
  #home-todo-card .htodo-t { flex: none; }
  #home-todo-card .htodo-main .jrt-detail { min-width: 0; margin-top: 0; }
  #home-todo-card .htodo-ic.is-img { width: 38px; height: 38px; }
  #home-todo-card .htodo-ic.is-img img { width: 38px; height: 38px; }
  #home-todo-card .htodo-reward { margin-top: 6px; padding-top: 6px; padding-bottom: 6px; }
  /* 오른쪽 챔피언 도장판이 무대와 같은 줄 높이를 정하므로 같이 줄인다(안 줄이면 무대도 그 높이에 묶인다) */
  #home-hero-card .hboard { gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  #home-hero-card .hboard-hd { margin-bottom: 4px; }
  #home-hero-card .hboard-cell { aspect-ratio: auto; height: 40px; }
  .jrt-goal { gap: 4px; padding: 8px 14px; }
}
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 640px) {
  #home-todo-card .htodo-reward { display: none; }
}

/* ── 퀴즈 ② 스펠링 맞히기도 2단 (2026-10-26) — ① 뜻 고르기와 같은 자리·크기의 왼쪽 카드, 오른쪽에 빈칸·글자 타일·확인하기.
 * ①→② 로 넘어갈 때 카드 위치가 그대로라 화면이 바뀌는 느낌이 없다. 빈칸·타일은 손가락 크기로 키운다. ── */
@media (min-width: 1024px) {
  .qz-main:has(.qz-tiles) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 14px;
    align-items: center; align-content: start;
  }
  .qz-main:has(.qz-tiles) > * { grid-column: 1 / -1; margin-top: 0 !important; margin-bottom: 0 !important; }
  .qz-main:has(.qz-tiles) > .qz-qcard {
    grid-column: 1; grid-row: span 3; align-self: stretch; margin: 0;
    min-height: 0; height: clamp(260px, calc(var(--jr-vh, 100vh) - 330px), 540px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  }
  .qz-main:has(.qz-tiles) .qz-q-pic { max-width: 320px; margin-bottom: 4px; }
  .qz-main:has(.qz-tiles) .qz-q-mean { font-size: var(--jr-text-title1); }
  .qz-main:has(.qz-tiles) > .qz-slots { grid-column: 2; align-self: end; gap: 8px; }
  .qz-main:has(.qz-tiles) > .qz-tiles { grid-column: 2; align-self: center; gap: 10px; }
  .qz-main:has(.qz-tiles) > .qz-check { grid-column: 2; align-self: start; min-height: 56px; font-size: var(--jr-text-title3); }
  .qz-main:has(.qz-tiles) .qz-slot { min-width: 46px; height: 60px; font-size: 30px; }
  .qz-main:has(.qz-tiles) .qz-slots.is-long .qz-slot { min-width: 34px; height: 48px; font-size: 22px; }
  .qz-main:has(.qz-tiles) .qz-tile { min-width: 58px; height: 62px; font-size: 28px; border-radius: 14px; }
  .qz-main:has(.qz-tiles) > .qz-fb { grid-column: 1; }
  .qz-main:has(.qz-tiles) > .qz-nextwrap { grid-column: 2; }
  .qz-main:has(.qz-tiles) > .qz-fb, .qz-main:has(.qz-tiles) > .qz-nextwrap { min-height: 76px; }
}