/* Student page — lighter friendly tone */
:root {
    --student-primary: #3b82f6;
    --student-primary-dark: #1d4ed8;
    --student-bg: #e9f1fb;
}


/* ===== 학습단계별 색 =====
   단계를 넘길 때마다 화면 색이 바뀐다. 무작위가 아니라 단계에 묶여 있어서
   같은 단계는 언제나 같은 색 — 색이 곧 '지금 무슨 학습인지'를 알려준다.
   색상환을 한 바퀴 돌게 배치해 앞뒤 단계가 확실히 달라 보이도록 했다. */
.student-body {
    --step-accent: #1d4ed8;
    --step-head:   #eef4fd;
    --step-soft:   #e9f1fb;
    --step-line:   #c3d5ec;
}
/* 스텝 테마 — 파랑 한 계열, 명도만 6단계로 나눠 단계를 구분한다.
   (색을 일곱 가지로 쓰면 화면이 스텝마다 다른 서비스처럼 보였다) */
/* Vocabulary — 밝은 하늘빛 */
.student-body[data-step="VC"], .student-body[data-step="ME"], .student-body[data-step="SL"] {
    --step-accent:#2f74c0; --step-head:#e7f1fb; --step-soft:#eaf3fc; --step-line:#c0daf1;
}
/* Listening — 파랑 */
.student-body[data-step="LC"], .student-body[data-step="LR"] {
    --step-accent:#2563b8; --step-head:#e6eff9; --step-soft:#e9f1fb; --step-line:#bcd3ee;
}
/* Speaking — 중간 파랑 */
.student-body[data-step="SP"], .student-body[data-step="SA"], .student-body[data-step="SB"],
.student-body[data-step="SC"], .student-body[data-step="SD"], .student-body[data-step="RR"] {
    --step-accent:#2547a7; --step-head:#e6ecf8; --step-soft:#eaf0fa; --step-line:#bdcdea;
}
/* Puzzle — 짙은 파랑 */
.student-body[data-step="PZ"] {
    --step-accent:#1e56a0; --step-head:#e4ecf7; --step-soft:#e8eff9; --step-line:#b8cbe8;
}
/* Dictation — 남색 쪽 파랑 */
.student-body[data-step="DT"] {
    --step-accent:#1c4894; --step-head:#e3eaf6; --step-soft:#e7edf8; --step-line:#b5c7e5;
}
/* Writing — 더 짙은 남색 */
.student-body[data-step="CP"], .student-body[data-step="ES"], .student-body[data-step="SE"],
.student-body[data-step="WO"], .student-body[data-step="GC"] {
    --step-accent:#1a3d80; --step-head:#e2e8f4; --step-soft:#e6ebf6; --step-line:#b2c2e0;
}
/* Quiz — 가장 짙은 네이비 */
.student-body[data-step="QZ"] {
    --step-accent:#16305f; --step-head:#e0e6f0; --step-soft:#e4e9f3; --step-line:#aebbd4;
}
/* 색이 툭 튀지 않고 스르륵 넘어가게 */
.student-body, .ply-head, .ply-step-pills, .player-shell {
    transition: background-color .35s ease, border-color .35s ease;
}
@media (prefers-reduced-motion: reduce) {
    .student-body, .ply-head, .ply-step-pills, .player-shell { transition: none; }
}

.student-body {
    background: #ffffff;   /* 플레이어 바깥 배경 흰색 고정 (안쪽은 단계별) */
    margin: 0;
    font-family: 'Noto Sans KR', sans-serif;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
}
.student-body h1 { font-size: 26px; font-weight: 800; letter-spacing: -.6px; color: #0f172a; }
.student-body h2 { font-size: 20px; font-weight: 700; color: #0f172a; }
.student-body h3 { font-size: 18px; font-weight: 700; color: #0f172a; }

.student-topbar {
    background: linear-gradient(180deg, #d1fae5 0%, #a7f3d0 100%);
    border-bottom: 1px solid #6ee7b7;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(15,23,42,.04);
}
.stb-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.stb-brand {
    display: flex; align-items: center; gap: 10px;
    margin-left: 20px;
    /* 학원명 — 민트 배경 위에서 따뜻하게 받도록 다크 브라운 */
    color: #5D4037;
    font-weight: 700;
    text-decoration: none;
}
.stb-brand span { font-size: 20px; }
.stb-mark {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(29,78,216,.3);
}
.stb-logo-img {
    width: 36px; height: 36px;
    border-radius: 10px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15,23,42,.15);
}
.stb-menu {
    display: flex; gap: 4px;
    margin-left: auto;   /* 브랜드 옆이 아니라 우측 사용자 chip 쪽으로 밀어 붙임 */
    padding-right: 12px;
}
.stb-link {
    color: #334155;
    font-size: 20px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: all .15s;
}
.stb-link:hover { background: rgba(255,255,255,.6); color: #1e293b; }
/* 홈 아이콘 — 글자보다 약간 작게 해서 텍스트와 눈높이를 맞춘다 */
.stb-link .bi { font-size: 17px; vertical-align: -1px; margin-right: 2px; }
/* 현재 메뉴 — 흰 박스 대신 글자색으로 알린다. 배경이 빠진 만큼 색을 더 진하게. */
/* 민트 배경 위에선 밝은 골드가 묻힌다 -> 같은 계열의 진한 톤으로 */
.stb-link.active { color: #ea580c; background: transparent; font-weight: 600; box-shadow: none; }

/* 로그아웃 — 초등생도 바로 알아보게 명확한 라벨 + 색 대비 */
.btn-logout {
    display: inline-flex; align-items: center; gap: 6px;
    background: #6ee7b7 !important;
    color: #065f46;
    border: 1px solid #34d399;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.btn-logout i { font-size: 14px; }
.btn-logout:hover {
    /* 파란 글씨가 보이려면 배경이 밝아야 한다 — 진한 초록 위 파랑은 대비가 안 난다. */
    background: #d1fae5;
    color: #1d4ed8;
    border-color: #34d399;
    box-shadow: 0 2px 6px rgba(29,78,216,.18);
}
/* 좌측 브랜드가 padding 24 + margin-left 20 = 44px 띄워져 있어서,
   우측이 24px 뿐이면 로그아웃만 끝에 붙어 보인다. 같은 값으로 맞춘다. */
.stb-right { display: flex; align-items: center; gap: 10px; margin-right: 20px; }

.student-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 24px 80px;
}

/* Hero */
.student-hero {
    background: linear-gradient(135deg, #1e293b 0%, #1f3a5f 100%);
    color: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.hero-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
}
.hero-sub {
    margin: 0;
    color: #cbd5e1;
    font-size: 16px;
}
.hero-sub strong { color: #fff; }
.hero-streak {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
}
.streak-num {
    font-size: 32px;
    font-weight: 700;
    color: #fbbf24;
    line-height: 1;
}
.streak-num span { font-size: 16px; font-weight: 500; color: #fff; margin-left: 2px; }
.streak-label { font-size: 13px; color: #cbd5e1; margin-top: 4px; }

/* Hero 통계 3종 — Since / 총 학습 / 총 학습시간(실시간) */
.hero-left { flex: 0 0 auto; min-width: 200px; }
.hero-stats {
    flex: 1;
    display: flex; justify-content: center; align-items: center; gap: 60px;
    padding: 0 20px;
}
/* 라벨(고정 텍스트) 윗줄 / 값(숫자) 아랫줄 — 한 줄로 쭉 늘어놓으면 밋밋하고,
   값이 라벨에 묻혀 눈에 안 들어온다. */
.hero-stat {
    display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 16px;
    color: #cbd5e1;
}
.hero-stat .hs-top { display: inline-flex; align-items: center; gap: 5px; }
.hero-stat i {
    font-size: 15px;
    color: #fbbf24;
}
.hero-stat .hs-label { color: #94a3b8; font-size: 13.5px; }
.hero-stat .hs-val {
    color: #fff; font-weight: 700; font-size: 20px;
    font-variant-numeric: tabular-nums;   /* 초 카운터가 흔들리지 않도록 */
    line-height: 1.2;
}

@media (max-width: 900px) {
    .hero-stats { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 14px 20px; padding: 12px 0; }
}

/* Block */
.block {
    background: #fff;
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.block-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sec-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 18px;
    color: #fff;
}

/* 초등생용 톤 — 섹션마다 색감 다르게, 좌측 두꺼운 액센트 라인 + 헤더 배경 살짝 */
/* 오늘/다가오는 색 세트 교환 (2026-07-19) — 배경만 바꾸면 아이콘·테두리가 어긋나서 세트로 옮겼다. */
.block-today {
    background: linear-gradient(180deg, #fef3c7 0%, #fff 40%);
    border-left: 5px solid #f59e0b;
    padding-bottom: 12px;   /* 카드 아래 여백 약간 축소 */
}
.block-today .sec-icon { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 3px 6px rgba(217,119,6,.3); }
.block-today .block-title { color: #92400e; }

.block-upcoming {
    background: linear-gradient(180deg, #eff6ff 0%, #fff 40%);
    border-left: 5px solid #3b82f6;
}
.block-upcoming .sec-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); box-shadow: 0 3px 6px rgba(37,99,235,.3); }
.block-upcoming .block-title { color: #1e40af; }

.block-free {
    background: linear-gradient(180deg, #dcfce7 0%, #fff 40%);
    border-left: 5px solid #22c55e;
}
.block-free .sec-icon { background: linear-gradient(135deg, #5b9be0, #2547a7); box-shadow: 0 3px 6px rgba(37,71,167,.3); }
.block-free .block-title { color: #2547a7; }

.block-exam {
    background: linear-gradient(180deg, #e6ecf8 0%, #fff 40%);
    border-left: 5px solid #2547a7;
}
.block-exam .sec-icon { background: linear-gradient(135deg, #4a86d4, #1a3d80); box-shadow: 0 3px 6px rgba(26,61,128,.3); }
.block-exam .block-title { color: #1a3d80; }

/* Two-column layout */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.two-col .block { margin-bottom: 0; }

/* Today's todo */
.todo-grid {
    padding: 4px 16px 8px 4px;  /* 우측: 스크롤바 여백. 높이(2줄)는 JS가 실측 제어 */
    display: grid;
    /* minmax(0,1fr) 필수 — 그냥 1fr 은 minmax(auto,1fr) 이라 컬럼이 내용의
       min-content 밑으로 못 줄어든다. 카드 안에 nowrap 요소가 있으면 컬럼이
       제각각 부풀어 그리드 밖으로 삐져나간다. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
}
.todo-card {
    /* 오늘 숙제는 모두 동등하므로 카드 톤도 하나로 통일한다 (2026-07-19).
       예전엔 첫 카드에만 .primary 로 이 배경을 줬는데, 순서일 뿐인 걸
       우선순위처럼 읽히게 만들었다. */
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 24px;
    background: #f7fbff;
    display: flex;
    flex-direction: column;
    gap: 30px;   /* 제목 · 스텝 · 학습하기 사이 숨통 */
    transition: all .15s;
}
/* 버튼 모서리를 카드(12px)와 맞춘다 — 6px 기본값이면 카드 안에서 각져 보인다. */
.student-main .btn { border-radius: 12px; }
/* 카드 자체가 hover 에서 뜨므로 버튼은 그림자만 — 둘 다 움직이면 산만하다. */
.todo-card .btn:hover { box-shadow: 0 4px 10px rgba(15,23,42,.13); }

/* 완료한 학습 — 같은 파랑 계열을 유지하되 채도를 낮춰 '이미 했다'를 색으로 알린다.
   초록으로 빼면 카드마다 색 계열이 갈려 버튼이 제각각으로 보인다. */
.btn-done {
    /* 카드 배경이 연한 파랑이라 같은 계열로 칠하면 버튼이 사라진다 -> 흰 바탕 */
    background: #fff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}
.btn-done:hover { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }

.todo-card:hover {
    border-color: #1f3a5f;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(15,23,42,.08);
}
/* 제목 · 유닛 한 줄. 제목이 길면 말줄임 (전체는 title 속성).
   간격은 flex gap 이 아니라 구분점이 만든다 — 다가오는 학습 / 자유학습의
   "제목 · 유닛" 과 같은 모양으로 보이게. */
.todo-head {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
}
.todo-book {
    /* grow 0 — 늘어나면 유닛이 오른쪽 끝으로 밀린다. 길면 shrink 로 말줄임. */
    flex: 0 1 auto;
    min-width: 0;
    font-size: 16px;   /* .todo-unit 과 항상 같은 값 — 한 줄에 같이 있다 */
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.todo-unit {
    flex: 0 0 auto;
    font-size: 16px;   /* .todo-book 과 항상 같은 값 */
    font-weight: 500;
    line-height: 1.4;
    color: #64748b;
    white-space: nowrap;
}
.todo-unit::before { content: ' · '; white-space: pre; }
/* 스텝칩 + 진행률 한 줄 */
.todo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 수행률 — 학생이 한눈에 찾아야 하는 값이라 붉은색으로 띄운다.
   (다른 보조 텍스트는 회색 #64748b 유지 — 여기만 예외) */
.todo-rate {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
    white-space: nowrap;
}
.todo-pattern {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; flex-wrap: wrap;
    gap: 4px;
}
.step {
    display: inline-block;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}
/* 스텝 상태 3종. 색만으로 구분되므로 각 칩에 title 로 상태명도 붙인다.
   (primary 카드용 오버라이드는 제거 — 특정도가 높아 상태색을 덮어썼다) */
.step-done {                      /* 완료 */
    background: #007BFF;
    border-color: #007BFF;
    color: #fff;
}
.step-current {                   /* 진행중 — 지금 할 차례 */
    background: #FD7E14;
    border-color: #FD7E14;
    /* 주황에 흰 글씨는 명암비 2.57 로 흐리다. 배경은 유지하고 글씨만 검정(7.4). */
    color: #212529;
}
.step-todo {                      /* 미진행 — 아무것도 안 했으니 배경도 없다 (.step 기본값) */
    background: #fff;
    border-color: #cbd5e1;
    color: #6C757D;
}
/* .todo-meta 제거 — 진행률은 .todo-rate 로 스텝칩과 같은 줄에 붙었다.
   (빈 .todo-meta 가 gap 만 먹어 카드 높이가 들쭉날쭉하던 원인) */
.todo-card .btn {
    display: block; width: 100%;
    padding: 11px 12px;
    border-radius: 8px;
    font-weight: 600; font-size: 14px;
    text-align: center; text-decoration: none;
    background: var(--student-primary);
    border: 1.5px solid var(--student-primary);
    color: #fff;
    cursor: pointer;
}
.todo-card .btn-outline-primary {
    background: #fff;
    color: var(--student-primary);
    border: 1.5px solid var(--student-primary);
}
.todo-card .btn-outline-primary:hover { background: #eff6ff; }

/* My books */
.my-books { display: flex; flex-direction: column; gap: 14px; }
.mb-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.mb-cover {
    width: 44px; height: 44px;
    background: #f1f5f9;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.mb-meta { flex: 1; }
.mb-title { font-weight: 600; font-size: 16px; }
.mb-sub { font-size: 13px; color: #64748b; margin-top: 2px; }

/* My history */
.my-history { list-style: none; padding: 0; margin: 0; }
.my-history li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
}
.my-history li:last-child { border-bottom: none; }
.step-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.step-pill.ok { background: #dcfce7; color: #15803d; }
.step-pill.mic { background: #dbeafe; color: #1d4ed8; }
.my-history .meta { font-size: 15px; }
.my-history .muted { color: #64748b; font-size: 13px; margin-top: 2px; }

/* 최근 자유학습 — 한 줄에 컬럼처럼 정렬. 10줄이 넘으면 목록 안에서만 스크롤.
   (.my-history 는 "최근 완료한 학습" 과 공용이라 .free-log 로만 한정한다) */
.my-history.free-log {
    /* 행 높이를 고정해야 10줄 지점이 정확히 떨어진다 (내용 기반이면 39.14px 같은
       소수 높이가 나와 10줄 계산이 어긋남) */
    --free-row: 40px;
    max-height: calc(var(--free-row) * 10);
    overflow-y: auto;
}
.my-history.free-log li {
    display: grid;
    grid-template-columns: 64px 62px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr);
    box-sizing: border-box;
    height: var(--free-row);
    padding: 0 8px 0 0;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
/* 0점/70점/100점 자릿수에 따라 배지 폭이 달라지면 뒤 컬럼이 전부 밀린다 */
.my-history.free-log .step-pill {
    min-width: 48px;
    text-align: center;
    justify-self: start;
    font-variant-numeric: tabular-nums;
}
.my-history.free-log .free-date {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 13px;
    justify-self: start;
    font-variant-numeric: tabular-nums;
}
/* 제목은 온라인 시험 카드(.exam-title)와 동일 —
   14px / 700 / #1f3a5f. 교재명과 유닛이 한 덩어리로 읽히게 strong 도 상속. */
.my-history.free-log .free-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #1f3a5f;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-history.free-log .free-title strong { font-weight: inherit; }
.my-history.free-log .free-steps,
.my-history.free-log .free-kind {
    font-size: 14px;   /* 제목과 동일 크기 */
    text-align: center;
    margin-top: 0;   /* .my-history .muted 의 margin-top 상쇄 */
}

/* Encourage */
.block.encourage {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fcd34d;
}
.enc-title {
    font-size: 18px;
    font-weight: 700;
    color: #78350f;
    margin-bottom: 14px;
}
.enc-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.enc-stat {
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}
.enc-stat-num { font-size: 18px; font-weight: 700; color: #2547a7; }
.enc-stat-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
.enc-msg { font-size: 15px; color: #78350f; margin: 0; line-height: 1.6; }

.link-more { color: #64748b; font-size: 13px; text-decoration: none; }
.link-more:hover { color: var(--student-primary); }

/* Responsive */
@media (max-width: 960px) {
    /* 데스크톱과 같은 이유로 minmax(0,1fr) — 그냥 1fr 이면 카드 안 nowrap
       요소가 컬럼을 부풀려 그리드 밖으로 삐져나간다 */
    .todo-grid { grid-template-columns: minmax(0, 1fr); }
    .two-col { grid-template-columns: minmax(0, 1fr); }
    .stb-menu { display: none; }
}
@media (max-width: 600px) {
    .student-hero { flex-direction: column; align-items: flex-start; }
    .hero-streak { align-self: stretch; }
    .enc-row { grid-template-columns: 1fr; }
}

/* ===== Player (학습 플레이어) — 대시보드 톤 통일 ===== */
.player-shell {
    background: #fff;
    border-radius: 8px;
    padding: 0;
    max-width: 1120px;
    margin: 0 auto 24px;
    box-shadow: 0 4px 14px rgba(15,23,42,.1);
    border: 2px solid #cbd5e1;
    overflow: hidden;
}

/* 학습 플레이어 — 데스크탑/태블릿에서 상단정렬 (모바일 full-bleed는 제외) */
@media (min-width: 721px) {
    .student-main:has(> .player-shell) {
        min-height: calc(100vh - 64px);
        display: flex;
        flex-direction: column;
        justify-content: safe center;
        align-items: center;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .student-main:has(> .player-shell) > .player-shell {
        width: 100%;
        margin-bottom: 0;
    }
}

/* 관리자 팝업(embed=1) — 상단바가 없으니 뷰포트 강제·세로중앙정렬을 끈다.
   그대로 두면 64px 오프셋+centering 때문에 빈 공간과 스크롤이 생긴다. */
body.embed-mode .student-main:has(> .player-shell) {
    min-height: 100vh;
    padding-top: 12px;
    padding-bottom: 12px;
    justify-content: safe center;
}
body.embed-mode .player-shell { margin: 0 auto 6px; }

/* 헤더 — 그레이 톤 (콘텐츠에 집중되게 낮고 얕게) */
.ply-head { position: relative;
    background: var(--step-head, #eef4fd);
    color: #0f172a;
    padding: 12px 52px;   /* 헤더·탭·본문 공통 좌우 기준선 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--step-line, #c3d5ec);
}
.ply-head > div:first-child { min-width: 0; flex: 1; }
.ply-head .muted, .ply-head .small { color: #64748b !important; }
.ply-title {
    font-size: 17px;
    font-weight: 600;
    margin: 2px 0 0;
    color: #0f172a;
    letter-spacing: -0.2px;
}
.ply-progress { text-align: right; min-width: 180px; color: #64748b; font-size: 13px; }
.ply-progress .ply-count { color: #0f172a; font-weight: 700; font-variant-numeric: tabular-nums; }
.ply-bar {
    height: 5px;
    background: rgba(15,23,42,.08);
    border-radius: 3px;
    margin-top: 4px;
    overflow: hidden;
}
.ply-bar-fill {
    height: 100%;
    background: var(--step-accent, #2563eb);
    transition: width .3s, background-color .35s ease;
}

/* Step pills — 완료/현재/미완료 대비 강화 */
.ply-step-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 52px;   /* 헤더·본문과 같은 좌우 기준선 */
    background: var(--step-soft, #f4f8ff);
    border-bottom: 1px solid var(--step-line, #c3d5ec);
}
.ply-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px;
    border-radius: 12px;
    background: #fff;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--step-line, #c3d5ec);
    transition: all .15s;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    letter-spacing: -.01em;
}
.ply-pill:hover:not(.active) {
    border-color: #cbd5e1;
    color: #475569;
    background: #f8fafc;
    transform: translateY(-1px);
}
.ply-pill:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
/* 선택된 학습단계 — 진한 남회색이라 화면에서 너무 세게 튀었다. 한 단계 연하게. */
/* 선택된 학습단계 — 배경은 연하게, 글자는 파랑으로 알린다. */
.ply-pill.active {
    background: #fff;
    color: var(--step-accent, #1d4ed8);
    border-color: var(--step-accent, #1d4ed8);
    box-shadow: none;
}
.ply-pill.visited {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.ply-pill.done {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}
.ply-pill-check { font-size: 13px; margin-left: 2px; }
.ply-pill-dot { font-size: 18px; margin: 0 -6px 0 -4px; color: #3b82f6; }

/* Body */
.ply-body {
    padding: 28px 52px;
    min-height: 320px;
}
.ply-step-meta {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
    font-size: 18px;
    flex-wrap: wrap;
}
.ply-player-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.ply-player-badge.player-word     { background: #dbeafe; color: #1d4ed8; }
.ply-player-badge.player-basic    { background: #e7f1fb; color: #2f74c0; }
.ply-player-badge.player-speech   { background: #e6ecf8; color: #2547a7; }
.ply-player-badge.player-grammar  { background: #e2e8f4; color: #1a3d80; }
.ply-player-badge.player-video    { background: #e2e8f4; color: #1a3d80; }
.ply-step-meta strong { font-size: 20px; color: #1e293b; }

.step-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: #1e293b; }

.content-block {
    background: #f8fafc;
    border: 2px solid var(--step-line, #c3d5ec);
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    padding: 18px 22px;
    margin-top: 12px;
}

.save-hint {
    margin-left: 12px;
    color: #b91c1c;
    font-size: 13px;
}
.repeat-chip {
    background: #e6ecf8;
    color: #2547a7;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
}
[x-cloak] { display: none !important; }

/* Listening — 오디오 카드 + 속도 버튼 */
.audio-mock {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 12px;
    padding: 18px 24px;
}
.audio-mock i { font-size: 32px; color: #1d4ed8; }
.audio-mock .flex-fill { flex: 1; min-width: 0; }
/* TTS 폴백 상태 — 보라 톤으로 오디오와 구분 */
.audio-mock--tts {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-color: #a78bfa;
}
.audio-mock--tts i { color: #2547a7; }
.tts-badge {
    background: #2547a7;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 10px;
    align-self: flex-start;
}
/* LC 재생 시작 히어로 */
.lc-play-start {
    text-align: center;
    padding: 13px 20px 11px;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
    border: 1px solid #93c5fd;
    border-radius: 14px;
    margin-bottom: 14px;
}
.lc-play-big {
    padding: 8px 24px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    /* 동그란 pill + 부드러운 펄스 — 여기를 누르면 시작한다는 걸 한눈에 */
    border-radius: 999px !important;
    animation: lc-play-pulse 2.2s ease-in-out infinite;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(29, 78, 216, .35);
    display: inline-flex; align-items: center; gap: 10px;
    transition: transform .12s, box-shadow .12s;
}
@keyframes lc-play-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 8px 20px rgba(29, 78, 216, .35); }
    50%      { transform: scale(1.04); box-shadow: 0 14px 30px rgba(29, 78, 216, .45); }
}
/* 움직임을 불편해하는 사용자에게는 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) { .lc-play-big { animation: none; } }
.lc-play-big i { font-size: 17px; vertical-align: -2px; margin-right: 3px; }

.lc-play-sub { margin-top: 6px; color: #94a3b8; font-size: 12px; }

.lc-play-big:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(29, 78, 216, .45);
}
.lc-play-big i { font-size: 24px; }

/* LC 3-stage auto play */
/* 모드 버튼 + 재생 상태를 한 줄에. 좁으면 자연스럽게 줄바꿈. */
.lc-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 자동재생 중 탭을 눌렀을 때 뜨는 안내 — 잠깐 보였다 사라진다 */
.lc-lock-notice {
    margin: 0 52px;
    padding: 10px 14px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-size: 14px;
}
.lc-head-row .vc-mode-tabs { flex: 0 0 auto; }
.lc-head-row .lc-auto-head { flex: 1 1 320px; min-width: 280px; }

.lc-auto-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    background: linear-gradient(90deg, #f8fafc 0%, #fff 100%);
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 12px;
    margin-bottom: 14px;
}
.lc-stage-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    background: var(--step-line, #c3d5ec);
    color: #64748b;
}
.lc-stage-badge.stage-1 { background: #e7f1fb; color: #2f74c0; }
.lc-stage-badge.stage-2 { background: #e3eaf6; color: #1c4894; }
.lc-stage-badge.stage-3 { background: #dbeafe; color: #1d4ed8; }
.lc-stage-badge.stage-4 { background: #dcfce7; color: #15803d; }
.lc-sentence-progress {
    min-width: 200px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px; color: #64748b; font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.lc-free-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #dcfce7; color: #15803d;
    padding: 3px 10px; border-radius: 12px;
    font-weight: 700; font-size: 13px;
    margin-left: 6px;
}

.lc-list {
    list-style: none;
    margin: 0; padding: 0;
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 16px;
    /* 문장이 많아도 목록 안에서만 스크롤 — 재생 중인 문장이 화면 밖으로 나가지 않는다 */
    position: relative;
    max-height: calc(100vh - 330px);
    min-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}
.lc-item {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #dfe9f7;
    align-items: center;
    font-size: 21px;
    /* 배속 재생에서는 색이 서서히 바뀌면 소리보다 늦게 보인다 — 즉시 반전 */
}
.lc-item:last-child { border-bottom: none; }
/* 지금 들리는 문장 — 빠르게 지나가도 눈에 박히도록 또렷하게 */
.lc-item.is-current {
    background: #1d4ed8;
    border-left: 3px solid #1e3a8a;
    padding-left: 15px;
}
.lc-item.is-current .lc-item-text { color: #fff; font-weight: 700; }
.lc-item.is-current .lc-item-ko { color: #dbeafe !important; }
.lc-item.is-done .lc-item-text { color: #15803d; }
.lc-item input[type=checkbox] { accent-color: #22c55e; }
.lc-item-text { font-weight: 600; color: #1e293b; }
.lc-item-ko { grid-column: 2; margin-top: -4px; }

/* SP 문장별 재생 버튼 */
.btn-play-mini {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: 0;
    color: #fff;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
}
.btn-play-mini:hover { box-shadow: 0 2px 8px rgba(29, 78, 216, .35); }

/* DT/CP 입력창 */
.dt-input {
    font-size: 20px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 2px solid #cbd5e1;
}
.dt-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); outline: none; }
.dt-progress {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 14.5px; color: #64748b; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cp-ko {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #eef2f8, #fff);
    border-left: 3px solid #1f3a5f;
    border-radius: 8px;
    color: #1f3a5f;
    font-size: 19px; font-weight: 600;   /* 퍼즐/딕테이션 제시어와 동일 + 중앙정렬 */
}
.cp-ko i { color: #1f3a5f; font-size: 17px; }

/* 한글 힌트 강조 통일 — 마크업에 <strong> 이 있는 단계(Writing·Dictation·
   Shadowing)는 700, Puzzle 은 500, 어순드릴·VideoShadow 는 400 으로 제각각이었다.
   블록 자체를 600 으로 고정하고 안쪽 strong 도 같은 값으로 맞춘다. */
.cp-ko, .dt-hint, .puzzle-hint-ko, .sb-tr-ko, .wo-ko, .vs-title-ko { font-weight: 600; }
.cp-ko strong, .dt-hint strong, .puzzle-hint-ko strong,
.sb-tr-ko strong, .wo-ko strong, .vs-title-ko strong { font-weight: 600; }

/* VC 4지선다 매칭 게임 — 레거시 word/index.php 형식 */
.vc-match {
    display: flex; flex-direction: column;
    gap: 22px;
    padding: 6px 0;   /* 좌우는 본문 여백이 기준 — 여기서 더 주면 헤더와 끝선이 어긋난다 */
}
.vc-match-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 15px;
    /* 본문 좌우 여백(52px)이 기준선이다. 여기서 더 넣으면 Speaking 단계와 끝선이 어긋난다. */
}
.vc-match-progress { font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; }
.vc-word-card {
    display: block; width: 100%;
    /* 제시 상태는 차분한 네이비 — 빨강은 오답에 양보한다 */
    background: linear-gradient(135deg, #3151a6, #1e3a8a);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 56px;
    font-weight: 700;
    padding: 48px 24px;
    box-shadow: 0 6px 20px rgba(30,58,138,.3);
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
.vc-word-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30,58,138,.35); }
.vc-word-card.is-correct { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 6px 20px rgba(22,163,74,.3); }
/* 정답 시 제시 단어 깜빡 펄스 (2초 텀 동안 각인) */
@keyframes vc-word-blink {
    0%   { transform: scale(1);    filter: brightness(1); }
    18%  { transform: scale(1.07); filter: brightness(1.3); }
    36%  { transform: scale(1);    filter: brightness(1); }
    54%  { transform: scale(1.07); filter: brightness(1.3); }
    72%  { transform: scale(1);    filter: brightness(1); }
}
.vc-word-card.is-correct { animation: vc-word-blink 1.6s ease-in-out; }
/* 오답은 빨강 — 틀렸다는 신호가 분명해야 한다 */
.vc-word-card.is-wrong { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 6px 20px rgba(220,38,38,.3); }
/* 뜻 보여주는 순간 — 기본(네이비)과 구분되게 민트로 */
.vc-word-card.is-meaning { background: linear-gradient(135deg, #41cdae, #0ea888); box-shadow: 0 6px 20px rgba(14,168,136,.3); }
.vc-choices {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.vc-choice {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 36px 24px;
    font-size: 28px;
    font-weight: 500;
    color: #1f2937;
    min-height: 110px;
    transition: all .15s;
    cursor: pointer;
}
.vc-choice:hover:not(:disabled) { border-color: #1f3a5f; background: #f8fafc; transform: translateY(-1px); }
.vc-choice:disabled { cursor: default; opacity: 0.85; }
.vc-choice.is-correct {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color: #22c55e;
    color: #14532d;
}
.vc-choice.is-wrong {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-color: #ef4444;
    color: #7f1d1d;
    animation: vc-shake .3s;
}
@keyframes vc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.vc-match-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 4px;
}

/* 하트 / 콤보 배지 */
.vc-hearts { display: inline-flex; gap: 3px; font-size: 18px; }
.vc-hearts .bi-heart-fill { animation: vc-heartbeat 1.4s ease-in-out infinite; }
@keyframes vc-heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.vc-combo {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 15px; font-weight: 700;
    border-radius: 999px;
    animation: vc-pulse 1s ease-out;
}
@keyframes vc-pulse {
    0% { transform: scale(0.6); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* VC 모드 스위처 */
.vc-mode-tabs {
    display: flex; gap: 6px;
    margin-bottom: 16px;
}
.vc-mode-tabs .btn { padding: 6px 14px; font-weight: 600; }

/* 매칭 페어 카드 그리드 */
.vc-pair {
    display: flex; flex-direction: column; gap: 18px;
}
.vc-pair-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 15px;
}
.vc-pair-stats { display: inline-flex; gap: 6px; }
.vc-pair-stats .badge { font-size: 15px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.vc-pair-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.vc-pair-card {
    background: #fff;
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 12px;
    padding: 24px 12px;
    font-size: 18px; font-weight: 700;
    color: #1f2937;
    min-height: 84px;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1.25;
}
.vc-pair-card.is-e {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e3a8a;
    border-color: #93c5fd;
}
.vc-pair-card.is-k {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #78350f;
    border-color: #fcd34d;
}
.vc-pair-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.vc-pair-card.is-picked {
    border-color: #1f3a5f;
    box-shadow: 0 0 0 3px rgba(31,58,95,.22);
    transform: translateY(-2px);
}
.vc-pair-card.is-matched {
    opacity: 0.35;
    cursor: default;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    box-shadow: none;
}
.vc-pair-card.is-flash-wrong {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    border-color: #ef4444 !important;
    color: #7f1d1d !important;
    animation: vc-shake .3s;
}
.vc-pair-foot {
    text-align: center;
    padding: 20px;
    background: linear-gradient(180deg, #ecfdf5, #fff);
    border: 1px solid #a7f3d0;
    border-radius: 12px;
}
.vc-pair-done {
    font-size: 18px; font-weight: 700; color: #065f46;
}
.vc-pair-done .bi-trophy-fill { color: #f59e0b; margin-right: 6px; }
@media (max-width: 640px) {
    .vc-pair-grid { grid-template-columns: repeat(2, 1fr); }
    .vc-pair-card { padding: 16px 8px; font-size: 16px; min-height: 66px; }
}

/* SP 클래식 — 문장 카드 + 4버튼 (녹음/재생/듣기/제출) */
.sp-classic {
    display: flex; flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}
.sp-topbar {
    display: flex; align-items: center; gap: 12px;
    /* monospace 를 빼서 상단 헤더 진행 표시와 같은 서체로 */
    font-size: 15px;
}
/* 진행바가 남는 폭을 채워야 숫자가 오른쪽 끝으로 간다 */
.sp-topbar .ply-bar { flex: 1; }
/* 상단 헤더 진행 표시(.ply-count)와 같은 서체·굵기로 맞춘다 */
.sp-progress-num { font-size: 13px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: 10px; }
.sp-e-card {
    /* 따라 읽을 문장 — 제시 상태이므로 네이비 */
    background: linear-gradient(135deg, #3151a6, #1e3a8a);
    color: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -.005em;
    line-height: 1.3;
    box-shadow: 0 4px 14px rgba(220,38,38,.22);
    margin-top: 24px;   /* 박스 아래로 조금 */
}
.sp-k-card {
    background: #eef2f8;
    color: #1f3a5f;
    padding: 14px 20px;
    border-radius: 8px;
    border: 1px solid #d5deea;
    font-size: 19px;
    text-align: center;
    font-weight: 600;
}
.sp-k-reveal { color: #94a3b8; font-weight: 500; font-size: 15px; }   /* 번역 숨김 placeholder */
.sp-controls {
    display: flex; justify-content: center; gap: 14px;
    padding: 60px 0 20px;
}
.sp-btn {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,.14);
}
.sp-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.sp-btn:disabled { opacity: .45; cursor: default; }
.sp-btn-play { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.sp-btn-mic { background: linear-gradient(135deg, #64748b, #475569); }
.sp-btn-mic.is-recording {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    animation: sp-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes sp-rec-pulse {
    0%, 100% { box-shadow: 0 3px 8px rgba(220,38,38,.4); }
    50% { box-shadow: 0 3px 20px rgba(220,38,38,.9), 0 0 0 6px rgba(220,38,38,.15); }
}
.sp-btn-listen { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.sp-btn-submit { background: linear-gradient(135deg, #1f3a5f, #16294a); }
.sp-btn-submit.is-done { background: linear-gradient(135deg, #16a34a, #15803d); }
.sp-record-bar {
    height: 4px;
    background: var(--step-line, #c3d5ec);
    border-radius: 2px;
    overflow: hidden;
}
.sp-record-fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #f59e0b);
    transition: width .1s linear;
}
.sp-message {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 16px; font-weight: 600;
    animation: sp-msg-in .3s ease;
}
@keyframes sp-msg-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.sp-message--ok {
    background: linear-gradient(90deg, #d1fae5, #ecfdf5);
    color: #065f46;
    border-left: 4px solid #16a34a;
}
.sp-message--warn {
    background: linear-gradient(90deg, #fef3c7, #fefce8);
    color: #78350f;
    border-left: 4px solid #f59e0b;
}
.sp-message--bad {
    background: linear-gradient(90deg, #fee2e2, #fef2f2);
    color: #7f1d1d;
    border-left: 4px solid #dc2626;
}
.sp-transcript {
    margin-left: auto;
    padding-left: 12px;
    font-size: 14.5px;
    color: #475569;
    font-weight: 500;
}
.sp-transcript em { font-style: normal; font-family: ui-monospace, monospace; color: #1f2937; }
.sp-nav {
    display: flex; justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--step-line, #c3d5ec);
}

/* CP 워드 뱅크 */
.cp-bank { display: flex; flex-direction: column; gap: 12px; }
.cp-bank-line {
    min-height: 60px;
    padding: 14px 16px;
    background: #fff;
    border: 2px solid #1f3a5f;
    border-radius: 10px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    cursor: pointer;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.cp-bank-caret {
    color: #94a3b8; font-style: italic; font-size: 14.5px;
    font-family: inherit;
}
.cp-bank-pool {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px 12px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    min-height: 60px;
}
.cp-bank-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px;
    background: #fff;
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 14.5px; font-weight: 700;
    color: #1f2937;
    cursor: pointer;
    transition: all .12s;
}
.cp-bank-chip:hover:not(:disabled) {
    border-color: #1f3a5f;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.08);
}
.cp-bank-chip.is-used {
    opacity: 0.35;
    cursor: default;
}
.cp-bank-chip.is-used:hover { transform: none; box-shadow: none; }
.cp-bank-chip--picked {
    background: linear-gradient(135deg, #1f3a5f, #16294a);
    color: #fff;
    border-color: transparent;
}
.cp-bank-chip--picked:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.cp-bank-chip--picked .bi { font-size: 15px; }
.cp-bank-foot {
    display: flex; align-items: center; gap: 12px;
    padding-top: 4px;
}

/* DT 타이핑 러시 HUD */
.dt-rush-hud {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #f8fafc;
    border-radius: 12px;
    margin-bottom: 12px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.dt-rush-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    font-size: 16px; font-weight: 700;
    transition: all .2s;
}
.dt-rush-badge.is-hot {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 0 20px rgba(245,158,11,.5);
    animation: dt-hot 1.2s ease-in-out infinite;
}
@keyframes dt-hot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.dt-rush-badge strong { font-size: 18px; }
.dt-rush-badge small { font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .1em; margin-left: 2px; }
.dt-rush-wpm {
    padding: 6px 14px;
    background: rgba(59,130,246,.2);
    border-radius: 8px;
    font-size: 16px;
    color: #93c5fd;
}
.dt-rush-wpm strong { font-size: 20px; color: #fff; font-weight: 800; }
.dt-rush-wpm small { font-size: 10px; opacity: .7; letter-spacing: .1em; text-transform: uppercase; margin-left: 3px; }
.dt-rush-best {
    margin-left: auto;
    padding: 5px 10px;
    background: rgba(217,119,6,.18);
    color: #fbbf24;
    border-radius: 6px;
    font-size: 13px;
}
.dt-rush-best strong { font-size: 16px; color: #fff; }

.dt-rush-summary {
    padding: 20px;
    background: linear-gradient(180deg, #0f172a, #1e293b);
    color: #fff;
    border-radius: 12px;
}
.dt-rush-summary-title { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.dt-rush-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dt-rush-stat {
    text-align: center;
    padding: 10px;
    background: rgba(255,255,255,.06);
    border-radius: 8px;
}
.dt-rush-stat-value {
    display: block;
    font-size: 26px; font-weight: 800;
    font-family: ui-monospace, monospace;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.dt-rush-stat-label {
    display: block;
    font-size: 13px;
    opacity: .75;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Shadowing 낭독 플레이어 (SA/SB/SC/SD/RR/LR) */
.shd-player {
    display: flex; flex-direction: column;
    gap: 12px;
}
.shd-scroll {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px 0;
    border-top: 1px solid var(--step-line, #c3d5ec);
    border-bottom: 1px solid var(--step-line, #c3d5ec);
    background: #fff;
}
.shd-line {
    padding: 12px 18px;
    font-size: 21px; line-height: 1.55;
    color: #0f172a;
    font-weight: 600;   /* 듣기 단계(lc-item-text)와 동일한 굵기 */
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s;
}
.shd-line:hover:not(.is-current) { background: #f8fafc; }
.shd-line.is-current {
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
    color: #fff;
    font-weight: 700;
}
.shd-blank {
    display: inline-block;
    color: transparent;
    background: rgba(15,23,42,.12);
    border-radius: 3px;
    letter-spacing: 0;
    padding: 0 3px;
}
.shd-line.is-current .shd-blank { background: rgba(255,255,255,.35); }

.shd-controls {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 8px;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 10px;
    flex-wrap: wrap;
}
.shd-rate {
    display: flex; align-items: center; gap: 6px;
    padding-left: 8px;
    border-left: 1px solid var(--step-line, #c3d5ec);
}
.shd-rate .form-select { max-width: 80px; font-size: 15px; }
.shd-progress { font-size: 15px; color: #475569; font-weight: 600; }

/* LC 순서 맞추기 (폴링 방식) */
.lc-fall { display: flex; flex-direction: column; gap: 14px; }
.lc-fall-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.lc-fall-need {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    font-size: 14.5px;
}
.lc-fall-stage {
    position: relative;
    height: 300px;
    background: linear-gradient(180deg, #f8fafc 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 12px;
    overflow: hidden;
}
.lc-fall-card {
    position: absolute;
    top: -60px;
    padding: 12px 20px;
    background: #fff;
    border: 2px solid #1f3a5f;
    color: #1f3a5f;
    border-radius: 10px;
    font-size: 17px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(31,58,95,.18);
    max-width: 46%;
    text-align: left;
    line-height: 1.35;
    animation-name: lc-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transition: transform .1s ease;
}
.lc-fall-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 22px rgba(31,58,95,.3);
    z-index: 2;
}
.lc-fall-card.is-shake {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-color: #ef4444;
    color: #7f1d1d;
    animation: vc-shake .4s;
}
@keyframes lc-fall {
    0% { transform: translateY(0); }
    100% { transform: translateY(360px); }
}
@media (prefers-reduced-motion: reduce) {
    .lc-fall-card { animation-duration: 0s; top: 40%; }
}

.lc-fall-slots {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.lc-fall-slot {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    min-height: 44px;
    transition: all .15s;
}
.lc-fall-slot.is-filled {
    background: linear-gradient(90deg, #dcfce7, #fff);
    border-style: solid;
    border-color: #22c55e;
    animation: pz-slot-pop .3s ease;
}
.lc-fall-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: #1f3a5f; color: #fff;
    border-radius: 50%;
    font-family: ui-monospace, monospace;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.lc-fall-slot.is-filled .lc-fall-num { background: #22c55e; }
.lc-fall-slot-text { flex: 1; font-size: 14.5px; color: #1f2937; }
.lc-fall-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 4px;
}

/* LC 순서 맞추기 게임 (구 고정형 · 잔존 스타일) */
.lc-order { display: flex; flex-direction: column; gap: 16px; }
.lc-order-head {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.lc-order-slots {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.lc-order-slot {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    min-height: 52px;
    transition: all .15s;
}
.lc-order-slot.is-filled {
    background: #fff;
    border-style: solid;
    border-color: #1f3a5f;
}
.lc-order-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: #1f3a5f;
    color: #fff;
    border-radius: 50%;
    font-family: ui-monospace, monospace;
    font-size: 15px; font-weight: 700;
    flex-shrink: 0;
}
.lc-order-slot-text { flex: 1; font-size: 17px; color: #1f2937; }
.lc-order-unpick {
    background: transparent; border: 0;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 18px;
}
.lc-order-unpick:hover { background: #fee2e2; color: #dc2626; }

.lc-order-pool {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed var(--step-line, #c3d5ec);
}
.lc-order-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 10px;
    transition: all .15s;
}
.lc-order-card.is-used { opacity: 0.4; background: #f1f5f9; }
.lc-order-card.is-shake { animation: vc-shake .4s; }
.lc-order-play {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: 0; color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lc-order-play:hover { box-shadow: 0 2px 8px rgba(29,78,216,.35); }
.lc-order-text { flex: 1; font-size: 14.5px; color: #1f2937; }
.lc-order-pick {
    background: #1f3a5f; color: #fff;
    border: 0;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14.5px; font-weight: 700;
    cursor: pointer;
    min-width: 56px;
}
.lc-order-pick:hover:not(:disabled) { background: #16294a; }
.lc-order-pick:disabled { background: #cbd5e1; color: #64748b; cursor: default; }

.lc-order-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 4px;
}

/* PZ 폴링 워드 게임 */
.pz-fall {
    display: flex; flex-direction: column;
    gap: 14px;
}
.pz-fall-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 15px;
    gap: 12px;
}
.pz-fall-hint {
    color: #1f3a5f;
    background: linear-gradient(90deg, #eef2f8, #fff);
    padding: 5px 10px;
    border-radius: 6px;
    border-left: 3px solid #1f3a5f;
    font-size: 14.5px;
}
.pz-fall-stage {
    position: relative;
    height: 320px;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
}
.pz-fall-word {
    position: absolute;
    top: -50px;
    padding: 8px 16px;
    background: #fff;
    border: 2px solid #64748b;
    color: #334155;
    border-radius: 999px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 17px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
    white-space: nowrap;
    animation-name: pz-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transition: transform .1s ease;
}
.pz-fall-word:hover { transform: scale(1.08); box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.pz-fall-word.is-shake {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-color: #ef4444;
    color: #7f1d1d;
    animation: vc-shake .35s;
}
@keyframes pz-fall {
    0% { transform: translateY(0); }
    100% { transform: translateY(360px); }
}
@media (prefers-reduced-motion: reduce) {
    .pz-fall-word { animation-duration: 0s; top: 40%; }
}
.pz-fall-target {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    padding: 14px 16px;
    background: #fff;
    border: 2px dashed #1f3a5f;
    border-radius: 10px;
    min-height: 60px;
}
.pz-slot {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 12px;
    min-width: 46px; min-height: 32px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #94a3b8;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 16px; font-weight: 700;
}
.pz-slot.is-filled {
    background: #1f3a5f;
    color: #fff;
    animation: pz-slot-pop .3s ease;
}
@keyframes pz-slot-pop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.pz-fall-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 2px;
}

/* 게임오버 카드 */
.vc-gameover {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(180deg, #fef2f2, #fff);
    border: 1px solid #fecaca;
    border-radius: 14px;
}
.vc-gameover-icon { font-size: 56px; color: #dc2626; margin-bottom: 8px; }
.vc-gameover-title { font-size: 22px; font-weight: 800; color: #7f1d1d; margin-bottom: 10px; }
@media (max-width: 640px) {
    .vc-word-card {
    display: block; width: 100%;
    /* 제시 상태는 차분한 네이비 — 빨강은 오답에 양보한다 */
    background: linear-gradient(135deg, #3151a6, #1e3a8a);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 56px;
    font-weight: 700;
    padding: 48px 24px;
    box-shadow: 0 6px 20px rgba(30,58,138,.3);
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
    .vc-choices { grid-template-columns: 1fr; }
    .vc-choice {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 36px 24px;
    font-size: 28px;
    font-weight: 500;
    color: #1f2937;
    min-height: 110px;
    transition: all .15s;
    cursor: pointer;
}
}

.lc-mode-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: linear-gradient(90deg, #f8fafc, #fff);
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 10px;
    margin-top: 12px;
}
.lc-mode-bar .btn { padding: 6px 14px; font-size: 14.5px; font-weight: 600; }

.lc-freebar {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 12px 16px;
    background: linear-gradient(90deg, #dcfce7, #f0fdf4);
    border: 1px solid #86efac;
    border-radius: 10px;
}

.lc-free-msg {
    background: linear-gradient(90deg, #dcfce7 0%, #f0fdf4 100%);
    border-left: 4px solid #22c55e;
    color: #14532d;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14.5px;
    margin: 0 0 12px;
}
.lc-free-msg i { color: #15803d; margin-right: 4px; }
.lc-free-msg strong { color: #15803d; }

/* A-B 구간 반복 */
.ab-loop {
    padding: 14px 18px;
    background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
    border: 1px solid #86efac;
    border-radius: 10px;
}
.ab-loop-title {
    font-weight: 700;
    color: #15803d;
    margin-bottom: 10px;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ab-loop-title i { color: #22c55e; }
.ab-loop-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ab-loop-controls .btn {
    padding: 6px 12px;
    font-size: 14.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ab-time {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    background: rgba(0,0,0,.08);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.speed-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}
.speed-control .btn {
    padding: 12px 14px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.speed-control .btn-outline-dark { border-color: #cbd5e1; color: #64748b; }
.speed-control .btn-dark { background: #1f3a5f; border-color: #1f3a5f; }
.speed-control .btn:disabled { opacity: .4; cursor: not-allowed; }

/* Puzzle */
.puzzle-answer {
    margin-top: 48px;   /* 답 영역을 더 아래로 (세로 공간 활용) */
    min-height: 62px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
    border: 2px dashed #93c5fd;
    border-radius: 12px;
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    align-items: center;
}
.puz-pick {
    padding: 8px 14px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;      /* 한글 문장(19px)보다 +1 */
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(29,78,216,.25);
    transition: all .15s;
}
.puz-pick:hover { background: linear-gradient(135deg, #3f6fd8, #2547A7); transform: translateY(-1px); }
.puzzle-pool {
    margin-top: 16px;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 2px solid var(--step-line, #c3d5ec);
}
.puz-tok {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;      /* 한글 문장(19px)보다 +1 */
    font-weight: 600;
    transition: all .15s;
}
.puz-tok:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    transform: translateY(-1px);
}
/* Puzzle 문장 듣기 — 처음 1회 자동재생 + 이 버튼으로 반복 청취 */
/* 한글 문장 줄 — 문장은 가운데, 듣기 스피커는 오른쪽 끝 */
.pz-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 12px;
}
.pz-line .puzzle-hint-ko { flex: 1 1 auto; margin: 0; }
.pz-audio-ico {
    margin-left: auto;      /* 한글 문장이 없는 문장에서도 오른쪽에 붙는다 */
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    font-size: 19px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #3f6fd8, #2547A7);
    box-shadow: 0 2px 10px rgba(37, 71, 167, .28);
}
.pz-audio-ico:hover { filter: brightness(1.06); }
.pz-audio-ico.is-playing { background: linear-gradient(135deg, #41cdae, #0ea888); }
.pz-audio-btn--sm {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #3f6fd8, #2547A7);
}
.pz-audio-btn--sm.is-playing { background: linear-gradient(135deg, #41cdae, #0ea888); }
/* Puzzle 한글 힌트 (실 콘텐츠에 k_script가 있을 때 위쪽에 노출) */
.puzzle-hint-ko {
    display: flex;
    align-items: center;
    justify-content: center;   /* 문장 중앙정렬 (이미지는 앞에 유지) */
    gap: 8px;
    background: linear-gradient(90deg, #eef2f8 0%, #fff 100%);
    border-left: 3px solid #1f3a5f;
    padding: 8px 14px;
    border-radius: 8px;
    color: #1f3a5f;
    font-size: 19px;      /* 스피킹 한글(sp-k-card)과 동일 크기 */
    font-weight: 600;
    margin: 28px 0 12px;   /* 문장을 조금 아래로 */
}
.puzzle-hint-ko i { color: #1f3a5f; font-size: 17px; }

/* 오답 시 흔들림 애니메이션 */
@keyframes puzShake {
    0%, 100% { transform: translateX(0); background:#fee2e2; border-color:#f87171; color:#b91c1c; }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.puz-tok--shake { animation: puzShake .4s ease-in-out; }

/* 퍼즐 상단 통계 바 (오답/힌트/힌트버튼) */
.puzzle-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pz-stat {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.pz-stat--wrong { background: #fee2e2; color: #b91c1c; }
.pz-stat--hint  { background: #fef3c7; color: #b45309; }
.puzzle-stats .btn-outline-warning {
    border-color: #fbbf24;
    color: #b45309;
    padding: 5px 12px;
    font-weight: 600;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.puzzle-stats .btn-outline-warning:hover:not(:disabled) {
    background: #fef3c7;
    color: #b45309;
}
.puzzle-stats .ms-auto { margin-left: auto !important; }

/* 완성 카드 */
.puzzle-complete {
    padding: 18px 20px;
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    text-align: center;
}
.pz-done-title {
    font-weight: 700;
    color: #15803d;
    font-size: 17px;
    margin-bottom: 8px;
}
.pz-done-title i { color: #22c55e; margin-right: 4px; font-size: 18px; }
.pz-done-sentence {
    font-size: 18px;
    font-weight: 600;
    color: #14532d;
    margin-bottom: 8px;
}
.pz-done-hint { font-size: 15px; color: #15803d; }
.pz-done-hint strong { font-size: 17px; }
/* 정답을 보고 따라 놓은 경우 — 스스로 맞춘 것과 한눈에 구분되게 */
.puzzle-complete.pz-miss {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    border-color: #fca5a5;
}
.puzzle-complete.pz-miss .pz-done-title { color: #b91c1c; }
.puzzle-complete.pz-miss .pz-done-title i { color: #ef4444; }
.puzzle-complete.pz-miss .pz-done-sentence { color: #7f1d1d; }
.puzzle-complete.pz-miss .pz-done-hint { color: #b91c1c; }

/* Quiz */
.quiz-progress {
    display: flex; flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    font-size: 14.5px;
    color: #64748b;
    font-weight: 600;
}
.quiz-progress .ply-bar { background: var(--step-line, #c3d5ec); }
.quiz-progress .ply-bar-fill { background: linear-gradient(90deg, #22c55e, #15803d); box-shadow: none; }
.quiz-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.quiz-type-badge.type-word      { background: #dbeafe; color: #1d4ed8; }
.quiz-type-badge.type-puzzle    { background: #e4ecf7; color: #1e56a0; }
.quiz-type-badge.type-dictation { background: #e3eaf6; color: #1c4894; }
.quiz-type-badge.type-writing   { background: #e2e8f4; color: #1a3d80; }
.quiz-mock-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.quiz-mock-options .btn {
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    border-radius: 10px;
}

/* Footer */
.ply-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 20px 28px;
    background: #f8fafc;
    border-top: 1px solid var(--step-line, #c3d5ec);
}
.ply-foot .btn { padding: 10px 20px; font-weight: 600; border-radius: 10px; }
.ply-foot .btn-dark { background: #1f3a5f; border-color: #1f3a5f; box-shadow: 0 2px 6px rgba(31,58,95,.25); }
.ply-foot .btn-dark:hover:not(:disabled) { background: #16294a; border-color: #16294a; }
.ply-foot .btn-success {
    background: linear-gradient(135deg, #22c55e, #15803d);
    border: none;
    color: #fff;
    box-shadow: 0 3px 8px rgba(21,128,61,.3);
}
.ply-foot .btn-success:hover { box-shadow: 0 4px 12px rgba(21,128,61,.4); transform: translateY(-1px); }

/* Listening Quiz — 실 4지선다 */
.real-quiz-card { padding: 22px 24px; }
.rq-question { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 18px; text-align: center; }
.rq-question strong { color: #1e293b; }
.rq-play {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 18px;
}
.rq-ko { margin-top: 6px; text-align: center; }
.rq-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rq-opt {
    padding: 14px 18px !important;
    text-align: center;
    font-weight: 500;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    justify-content: center !important;
}
.rq-letter {
    display: inline-flex;
    width: 26px; height: 26px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--step-line, #c3d5ec);
    color: #64748b;
    font-weight: 700;
    font-size: 14.5px;
    flex-shrink: 0;
}
.rq-opt.btn-success .rq-letter { background: #fff; color: #15803d; }
.rq-opt.btn-danger .rq-letter { background: #fff; color: #b91c1c; }
.rq-msg { font-weight: 700; }
.rq-msg-ok { color: #15803d; }
.rq-msg-bad { color: #b91c1c; }

/* Grammar 개념/예문/타깃 */
.grammar-concept.content-block { border-left-color: #f59e0b; background: linear-gradient(180deg,#fef3c7 0%, #fff 100%); }
.gc-concept { font-weight: 700; font-size: 18px; color: #78350f; margin-bottom: 4px; }
.gc-ko { margin: 0; color: #92400e !important; }
.gc-ex-title { font-size: 14.5px; font-weight: 700; color: #2547a7; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.gc-ex-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gc-ex-list li { padding: 10px 14px; background: #fff; border: 1px solid #fef3c7; border-radius: 8px; display: flex; flex-direction: column; }
.gc-ex-en { font-weight: 600; color: #1e293b; }
.gc-ex-ko { color: #64748b !important; }
.grammar-target.content-block {
    background: linear-gradient(90deg, #eff6ff 0%, #fff 100%);
    border-left-color: #3b82f6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1e40af;
}
.grammar-target.content-block strong { font-size: 18px; }
.grammar-target i { color: #1d4ed8; }

/* Video 스텝 카드 */
.video-step { display: flex; flex-direction: column; gap: 12px; }
.vs-hint {
    background: linear-gradient(90deg, #e6ecf8 0%, #fff 100%);
    border-left: 4px solid #2547a7;
    padding: 10px 14px;
    border-radius: 8px;
    color: #831843;
    font-size: 14.5px;
}
.vs-hint i { color: #2547a7; margin-right: 4px; }
.vs-hint strong { color: #2547a7; }
.video-frame {
    width: 100%;
    max-width: 900px;      /* 프레임 폭. 영상이 가로를 꽉 채움 */
    margin: 0 auto;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    display: block;
}
.video-frame video {
    display: block;
    width: 100%;           /* 프레임 가로를 꽉 채움 → 좌우 검은 여백 제거 (와이드) */
    height: auto;          /* 원본 비율 유지 (왜곡 없음) */
    background: #000;
}
.video-speed-bar {
    display: flex; gap: 6px; flex-wrap: wrap;
    align-items: center; justify-content: center;
    padding: 10px 12px;
    background: #f8fafc;
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 10px;
    max-width: 1200px;
    margin: 10px auto 0;
}
.video-subtitle {
    padding: 14px 18px;
    background: #f8fafc;
    border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 12px;
    text-align: center;
}
.vs-title-en { font-size: 18px; font-weight: 600; color: #1e293b; margin-bottom: 4px; }
.vs-title-ko {
    font-size: 19px;      /* 다른 단계 제시어와 동일 */
    color: #64748b;
    padding-top: 6px;
    border-top: 1px dashed #cbd5e1;
    margin-top: 6px;
    text-align: center;
}
.vs-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.vs-controls .btn { padding: 6px 14px; font-weight: 600; font-size: 14.5px; }
.vs-controls .btn-primary {
    background: linear-gradient(135deg, #3f6fd8, #2547A7);
    border-color: transparent;
    color: #fff;
}
.vs-controls .btn-outline-primary { border-color: #a8c4ec; color: #2547a7; }

/* Shadowing 모드 배너 (speech 스텝 상단) */
.shadowing-banner {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    margin-bottom: 16px;
    background: #fff;
}
.shadowing-banner.sb-mode-original {
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    border-color: #a78bfa;
}
.shadowing-banner.sb-mode-roleplay {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: #93c5fd;
}
.shadowing-banner.sb-mode-translate {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-color: #fbbf24;
}
.sb-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.sb-mode-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: .02em;
}
.sb-mode-original .sb-mode-badge { background: #2f74c0; color: #fff; }
.sb-mode-roleplay .sb-mode-badge { background: #1d4ed8; color: #fff; }
.sb-mode-translate .sb-mode-badge { background: #1a3d80; color: #fff; }
.sb-repeat {
    background: rgba(255,255,255,.6);
    color: #1e293b;
    font-size: 13.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}
/* 녹음에 집중되게 안내는 얇게 — 배너가 화면을 크게 먹고 있었다 */
.sb-hint { font-size: 13px; color: #475569; line-height: 1.45; }
.sb-hint strong { font-weight: 700; }

/* Role-playing 대사 카드 */
.sb-roleplay { display: flex; flex-direction: column; gap: 6px; }
.sb-role {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid var(--step-line, #c3d5ec);
    font-size: 16px;
}
.sb-role-tag {
    display: inline-flex; align-items: center;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 700;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.sb-role--mine {
    border-color: #3b82f6;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.sb-role--mine .sb-role-tag { background: #1d4ed8; color: #fff; }
.sb-role--mine span:last-child { color: #1e40af; font-weight: 600; }
.sb-role-hint { color: #1e40af !important; }

/* Translate 프롬프트 카드 */
.sb-translate {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #fbbf24;
    text-align: center;
}
.sb-tr-ko {
    color: #1c4894;
    font-size: 19px;      /* 다른 단계 제시어와 동일 */
    display: inline-flex; align-items: center; gap: 8px;
}
.sb-tr-ko i { font-size: 17px; }
.sb-tr-arrow { color: #1c4894; font-weight: 700; font-size: 14.5px; }
.sb-tr-en { font-style: italic; }

/* 자유학습 카드 진행률 + 상태 강조 */
.free-progress {
    margin: 10px 0 8px;
}
.fp-bar {
    height: 6px;
    background: var(--step-line, #c3d5ec);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.fp-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #15803d);
    transition: width .3s;
    border-radius: 3px;
}
.fp-txt {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.free-card.is-started {
    border-color: #86efac;
    background: linear-gradient(180deg, #f0fdf4 0%, #fff 40%);
}
.free-card.is-done {
    /* 끝낸 카드는 완료색(초록)으로 — 호박은 '오늘 할 일'에만 쓴다 */
    border-color: #86efac;
    background: linear-gradient(180deg, #e8f7ed 0%, #fff 40%);
}
.free-card.is-done .free-cta { color: #15803d; }
.free-card.is-started:not(.is-done) .free-cta { color: #2547a7; }

/* 플레이어 헤더 안 유닛 네비게이션 */
.ply-unit-nav {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
    min-width: 0;
    max-width: 100%;
}
.ply-unit-nav-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: .04em;
}
.ply-unit-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.ply-unit-chips::-webkit-scrollbar { height: 4px; }
.ply-unit-chips::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.ply-unit-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #e2e8f0;
    color: #475569;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
    border: 1px solid #cbd5e1;
    white-space: nowrap;
    flex-shrink: 0;
}
.ply-unit-chip:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
}
.ply-unit-chip.is-current {
    background: #64748b;
    color: #fff;
    border-color: #475569;
    font-weight: 600;
}
.ply-unit-chip.is-studied {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
}
.ply-unit-chip.is-studied.is-current {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
    border-color: transparent;
}
.ply-unit-chip i { color: #22c55e; font-size: 13px; }
.ply-unit-chip.is-current i { color: #fff; }

/* 요약 카드 안 "다음 유닛" 버튼 */
.summary-actions .btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    color: #fff;
    box-shadow: 0 3px 8px rgba(29, 78, 216, .3);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    gap: 2px;
}
.summary-actions .btn-primary .btn-sub {
    font-size: 13px;
    font-weight: 500;
    opacity: .85;
}

/* ===== 결과 요약 카드 (마지막 스텝 완료 후) ===== */
.summary-overlay {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}
.summary-card {
    background: linear-gradient(180deg, #fef3c7 0%, #fff 40%);
    border: 1px solid #fbbf24;
    border-radius: 20px;
    padding: 40px 36px 28px;
    max-width: 640px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(180, 83, 9, .15);
    text-align: center;
}
.summary-head { margin-bottom: 22px; }
.summary-stars {
    display: flex; justify-content: center; gap: 6px;
    margin-bottom: 10px;
}
.summary-stars i { font-size: 40px; }
.summary-stars .star-on {
    color: #f59e0b;
    text-shadow: 0 2px 8px rgba(245, 158, 11, .5);
    animation: starPop .5s ease-out backwards;
}
.summary-stars .star-on:nth-child(1) { animation-delay: 0s; }
.summary-stars .star-on:nth-child(2) { animation-delay: .12s; }
.summary-stars .star-on:nth-child(3) { animation-delay: .24s; }
.summary-stars .star-off { color: var(--step-line, #c3d5ec); }
@keyframes starPop {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(8deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.summary-title {
    font-size: 28px;
    font-weight: 800;
    color: #92400e;
    margin: 0 0 4px;
    letter-spacing: -0.5px;
}
.summary-sub { color: #78350f; margin: 0; font-size: 16px; }
.summary-sub strong { color: #92400e; }

.summary-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
    padding: 16px;
    background: rgba(255,255,255,.7);
    border-radius: 14px;
}
.sk-item { text-align: center; }
.sk-label { font-size: 13px; color: #78350f; font-weight: 600; margin-bottom: 4px; }
.sk-value { font-size: 22px; font-weight: 800; color: #92400e; letter-spacing: -0.3px; }

.summary-steps { text-align: left; margin-bottom: 22px; }
.ss-title {
    font-size: 15px;
    font-weight: 700;
    color: #78350f;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ss-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #fbbf24;
}
.ss-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 14.5px;
    border-bottom: 1px solid #fef3c7;
}
.ss-row:last-child { border-bottom: none; }
.ss-row.ss-skip { opacity: .5; }
.ss-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.ss-badge.player-word     { background: #dbeafe; color: #1d4ed8; }
.ss-badge.player-basic    { background: #e7f1fb; color: #2f74c0; }
.ss-badge.player-speech   { background: #e6ecf8; color: #2547a7; }
.ss-badge.player-grammar  { background: #e2e8f4; color: #1a3d80; }
.ss-step { flex: 1; color: #1e293b; font-weight: 500; }
.ss-score {
    font-weight: 700;
    color: #15803d;
    font-variant-numeric: tabular-nums;
    background: #dcfce7;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
}
.ss-skip-txt { background: transparent; color: #94a3b8; }

.summary-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.summary-actions .btn {
    padding: 11px 22px;
    font-weight: 700;
    border-radius: 10px;
}
.summary-actions .btn-success {
    background: linear-gradient(135deg, #22c55e, #15803d);
    border: none;
    box-shadow: 0 3px 8px rgba(21, 128, 61, .3);
}

/* Player 반응형 */
@media (max-width: 900px) {
    /* 태블릿 세로 (768~900px) — 여백만 살짝 조정 */
    .student-main { padding: 20px 16px 60px; }
    .free-grid { grid-template-columns: repeat(2, 1fr); }
    .summary-card { padding: 32px 24px 24px; }
    .summary-title { font-size: 24px; }
}

@media (max-width: 720px) {
    .player-shell { border-radius: 12px; margin: 0 -8px 16px; }
    .ply-head { position: relative; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 18px; }
    .ply-progress { text-align: left; min-width: 0; }
    .ply-body { padding: 20px 18px; }
    /* Step pills — 모바일에선 한 줄 가로 스크롤로 스텝 전체를 훑을 수 있게 */
    .ply-step-pills {
        padding: 12px 18px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ply-step-pills::-webkit-scrollbar { display: none; }
    .ply-pill { flex-shrink: 0; }
    /* 유닛 chip 스크롤 영역도 세로 스크롤 → 가로 스크롤로 (엄지 편함) */
    .ply-unit-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-height: none;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .ply-unit-chips::-webkit-scrollbar { display: none; }
    .ply-unit-chip { flex-shrink: 0; padding: 6px 12px; font-size: 14.5px; }

    .speed-control { grid-template-columns: 1fr; gap: 8px; }
    .speed-control .btn { padding: 14px 16px; font-size: 17px; }
    .quiz-mock-options { grid-template-columns: 1fr; }
    .quiz-mock-options .btn { padding: 14px 16px; font-size: 17px; }

    .ab-loop-controls .btn { padding: 8px 14px; font-size: 15px; }

    /* Footer — 터치 영역 확대 */
    .ply-foot { padding: 14px 18px; flex-wrap: wrap; gap: 8px; }
    .ply-foot .btn { flex: 1; min-width: 100px; padding: 13px 18px; font-size: 16px; }

    /* Puzzle — 카드 스텝 안쪽 여백 */
    .puz-tok, .puz-pick { padding: 10px 14px; font-size: 18px; }
    .puzzle-stats .btn-outline-warning { padding: 7px 12px; font-size: 13px; }

    /* Summary — 모바일 세로 흐름 */
    .summary-overlay { padding: 24px 12px; }
    .summary-card { border-radius: 14px; padding: 28px 20px 20px; }
    .summary-stars i { font-size: 32px; }
    .summary-title { font-size: 22px; }
    .summary-kpis {
        grid-template-columns: 1fr 1fr;
        padding: 12px;
        gap: 10px;
    }
    .summary-kpis .sk-item:last-child { grid-column: 1 / -1; }
    .sk-value { font-size: 19px; }
    .summary-actions .btn { flex: 1 1 100%; padding: 12px 16px; }

    /* Shadowing banner — 모바일에선 폭 확보 */
    .shadowing-banner { padding: 12px 14px; }

    /* Free study grid — 폰은 한 줄 한 카드 */
    .free-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .student-main { padding: 16px 12px 60px; }
    .student-hero { padding: 20px 20px; border-radius: 14px; margin-bottom: 20px; }
    .hero-title { font-size: 20px; }
    .stb-inner { padding: 0 14px; height: 56px; gap: 12px; }
    .stb-right { margin-right: 6px; }
    .stb-brand span { font-size: 16px; }
    .user-meta { display: none; }
    .btn-logout span { display: none; }
    .btn-logout { padding: 3px 8px; }

    .ply-title { font-size: 18px; }
    .ply-step-meta { font-size: 18px; gap: 8px; }
    .ply-step-meta strong { font-size: 18px; }

    .summary-actions { flex-direction: column; }
    .summary-actions .btn { width: 100%; }
}

.shd-line--readonly { cursor: default; }
.shd-line--readonly:hover:not(.is-current) { background: transparent; }

.shd-auto-upload {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
    padding: 4px 10px;
    border: 2px solid var(--step-line, #c3d5ec); border-radius: 6px;
    background: #f8fafc;
}
.shd-auto-upload input[type="checkbox"] { margin: 0; }

.ply-title { font-size: 16px !important; font-weight: 400 !important; margin: 0; }

/* 플레이어 세로 통일 — 스텝별 높이 편차 제거 */
.ply-body {
    min-height: 620px;
    display: flex;
    flex-direction: column;
}
.ply-body > template + template,
.ply-body > template {
    flex: 1;
}
@media (max-width: 768px) {
    .ply-body { min-height: 460px; }
}


/* 한글만 시각적으로 1단계 작게 (unicode-range 기반) */
@font-face {
    font-family: 'Noto Sans KR Scaled';
    src: local('Noto Sans KR');
    unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
    size-adjust: 90%;
}
.student-body { font-family: 'Noto Sans KR Scaled', 'Noto Sans KR', sans-serif; }
.rq-msg-bad, .rq-msg-ok { display: none !important; } .rq-msg-bad.rq-msg-force-show, .rq-msg-ok.rq-msg-force-show { display: inline-flex !important; }

/* Video 배속 버튼 그룹 */
.video-speed-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 12px;
    background: #f8fafc;
    border-top: 1px solid var(--step-line, #c3d5ec);
}
.video-speed-bar .btn { padding: 3px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }

.bc-cover-title {
    font-size: 15px !important;
    display: flex; align-items: center; justify-content: center;
    padding: 8px 10px;
    width: 100%; height: 100%;
    font-size: 12px; font-weight: 600;
    color: #334155;
    background: linear-gradient(135deg, #fefce8, #fef3c7);
    text-align: center; line-height: 1.35;
    word-break: keep-all;
}

.vs-record-bar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 12px 16px;
    background: #f8fafc; border: 2px solid var(--step-line, #c3d5ec); border-radius: 10px;
    position: relative;
}
.vs-record-bar .sp-btn { width: 46px; height: 46px; font-size: 18px; }

/* 북마크 이어보기 배너 */
.bm-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 20px; margin: 0 0 16px 0;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    border: 1px solid #93c5fd; border-radius: 10px;
}
.bm-banner-text { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #1e40af; }
.bm-banner-text i { font-size: 18px; }
.bm-banner-actions { display: flex; align-items: center; gap: 8px; }

/* Shadowing 녹음 파형 */
.shd-waveform-wrap {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px;
}
.shd-waveform { width: 100%; height: 60px; display: block; }

/* VC 문항 여백 확대 */
.vc-choices {
    margin: 32px 0 40px;
    gap: 14px 20px;
}
.vc-choice {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 36px 24px;
    font-size: 28px;
    font-weight: 500;
    color: #1f2937;
    min-height: 110px;
    transition: all .15s;
    cursor: pointer;
}
.vc-match-foot {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

/* SL 단어 깜빡임 (blank_percent) */
@keyframes sl-flash-anim {
    0% { opacity: 0; transform: scale(0.9); }
    20% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1); }
}
.sl-word-mask span { transition: color .2s; }

/* VC 프리뷰 깜빡임 */
.vc-flash { animation: vc-flash-anim .7s ease-out; }
@keyframes vc-flash-anim {
    0% { opacity: 0; transform: scale(0.95); }
    30% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* 자동시작 스텝의 "학습 시작" 버튼 시각적 숨김 (autoplay 실패 시 fallback 클릭용)
   ※ 듣기의 '재생 시작'(.lc-play-big)은 학생이 눌러야 하는 진짜 버튼이므로 제외한다.
     예전엔 이 규칙이 그것까지 투명하게 만들어 버튼이 사라져 보였다. */
.btn-primary.btn-lg:not(.lc-play-big) {
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1px !important;
    padding: 4px 8px !important;
    min-height: 0 !important;
}
.btn-primary.btn-lg:not(.lc-play-big) i,
.btn-primary.btn-lg:not(.lc-play-big)::before {
    display: none !important;
}

/* 이름과 반을 한 줄에 — 세로로 쌓여 두 줄을 차지하던 걸 나란히 붙인다. */
.hero-user { display: flex; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hero-user-name { font-size: 22px; font-weight: 700; color: #fff; }
.hero-user-sub { font-size: 13px; color: #cbd5e1; }
.hero-user-sub:empty { display: none; }   /* 반 미배정이면 여백도 없애기 */
/* 연속학습 박스에 바짝 붙어 있어 오른쪽 끝에 몰려 보였다 -> 여백 줘서 왼쪽으로 */
.hero-points { color: #fbbf24 !important; margin-right: 36px; }
.hero-points .hs-val { color: #fbbf24 !important; }

/* Sharper borders for readability (global student) */
.block, .card, .panel, .kpi-card, .todo-card, .up-card, .free-card,
.item-card, .book-card, .exam-card, .content-card,
.form-control, .form-select, table.table {
    border-color: #94a3b8 !important;
}
.block, .card, .panel, .kpi-card, .todo-card, .up-card, .free-card,
.item-card, .book-card, .exam-card, .content-card {
    border-width: 2px !important;
    border-style: solid !important;
}

/* Cloze inline input (DT / CP with blanks) */
.cloze-line {
    font-size: 22px; line-height: 2.6; letter-spacing: 0.02em;
    padding: 30px 20px; text-align: center;
}
.cloze-word { font-weight: 600; color: #1f3a5f; }
.cloze-input {
    display: inline-block;
    min-width: 60px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    font-family: inherit; font-size: inherit; font-weight: 600;
    text-align: center;
    color: #1f3a5f;
    outline: none;
    caret-color: #1f3a5f;
}
.cloze-input::placeholder { color: #1f3a5f; letter-spacing: 0.05em; opacity: 1; }
.cloze-input:disabled { color: #64748b; }

/* DT 힌트 상단 배지 · 오디오 행 */
.dt-hint {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    padding: 8px 14px; margin-bottom: 14px;
    background: #eef2f8; color: #1f3a5f;
    border-radius: 12px; font-size: 19px; font-weight: 600;   /* 퍼즐 문장과 동일 + 중앙정렬 */
}
.dt-hint i { font-size: 17px; }
.dt-audio-row { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; }
/* 재생/느리게 — 테두리 없는 깔끔한 스피커 버튼 */
.dt-audio-btn {
    border: 0; background: transparent;
    color: #2563eb; font-size: 15px; font-weight: 600;
    padding: 6px 12px; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background .12s;
}
.dt-audio-btn:hover { background: #eff6ff; }
.dt-audio-btn i { font-size: 19px; }
.dt-audio-btn--slow { color: #60a5fa; }
.dt-audio-btn--slow:hover { background: #eff6ff; }

.ply-sfx-toggle {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    z-index: 5;
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #1f3a5f !important;
    padding: 4px 10px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
}
.ply-sfx-toggle:hover { background: #f1f5f9 !important; }
.dt-auto-badge {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    background: #eef7fc; color: #1f3a5f;
    margin-left: 8px;
}
.dt-auto-badge.is-done { background: #f1f5f9; color: #64748b; }

/* ========== 학생 모바일 최적화 ========== */
[x-cloak] { display: none !important; }

/* 햄버거 버튼 — 기본 숨김, 모바일에서만 노출 */
.stb-burger {
    display: none;
    background: transparent; border: 0; padding: 6px 8px;
    color: #334155; font-size: 22px;
    border-radius: 6px; cursor: pointer;
    margin-right: 4px;
}
.stb-burger:hover { background: rgba(15,23,42,.06); }

/* 드로어 (기본 숨김) */
.stb-drawer-back {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 1040;
}
.stb-drawer {
    display: none;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 82vw;
    background: #fff;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 20px rgba(15,23,42,.15);
    display: flex; flex-direction: column;
}
.stb-drawer.is-open { transform: translateX(0); }
.stb-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--step-line, #c3d5ec);
}
.stb-drawer-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; color: #0f172a;
}
.stb-drawer-brand .stb-mark {
    width: 32px; height: 32px; border-radius: 6px;
    background: #1d4ed8; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
}
.stb-drawer-brand .stb-logo-img { height: 32px; width: auto; }
.stb-drawer-close {
    background: transparent; border: 0;
    color: #64748b; font-size: 20px; padding: 4px 8px;
    border-radius: 6px; cursor: pointer;
}
.stb-drawer-close:hover { background: #f1f5f9; color: #0f172a; }
.stb-drawer-menu {
    flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px;
}
.stb-drawer-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 8px;
    font-size: 15px; font-weight: 600; color: #334155;
    text-decoration: none;
}
.stb-drawer-menu a i { width: 20px; text-align: center; font-size: 17px; color: #64748b; }
.stb-drawer-menu a:hover { background: #f1f5f9; color: #0f172a; }
.stb-drawer-menu a.active { background: #eff6ff; color: #1d4ed8; }
.stb-drawer-menu a.active i { color: #1d4ed8; }
.stb-drawer-foot { padding: 14px 18px; border-top: 1px solid var(--step-line, #c3d5ec); }
.stb-drawer-foot button {
    width: 100%; padding: 11px 14px;
    background: #fff; border: 2px solid var(--step-line, #c3d5ec);
    border-radius: 8px; color: #334155;
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.stb-drawer-foot button:hover { background: #f8fafc; color: #dc2626; border-color: #fecaca; }

/* ---- 모바일 뷰포트: 햄버거 + 드로어 활성화 ---- */
@media (max-width: 720px) {
    .stb-burger { display: inline-flex; align-items: center; justify-content: center; }
    .stb-drawer-back { display: block; }
    .stb-drawer { display: flex; }
    .stb-menu { display: none !important; }
    .stb-brand { font-size: 14px; gap: 6px; }
    .stb-brand span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stb-inner { padding: 8px 12px; gap: 6px; }
    .stb-right .btn-logout span { display: none; }
    .stb-right .btn-logout { padding: 8px 10px; }
    .stb-right .btn-icon { padding: 6px 8px; }
    .student-main { padding: 14px 12px 40px; }
    .student-body h1 { font-size: 20px; }
    .student-body h2 { font-size: 17px; }
    .student-hero { padding: 18px 16px; border-radius: 10px; }
    .hero-title { font-size: 18px !important; }
    .todo-card { padding: 14px 14px 12px; }
    .todo-title { font-size: 15px; }
}

/* ========== 학습 플레이어 모바일 세로 압축 ========== */
@media (max-width: 720px) {
    /* 컨테이너 */
    .player-shell { border-radius: 0; border-left: 0; border-right: 0; margin: 0 -12px 20px; box-shadow: none; }
    .ply-head { padding: 8px 12px; gap: 8px; }
    .ply-title { font-size: 14px; }
    .ply-progress { min-width: 0; font-size: 11.5px; }
    .ply-progress .ply-count { font-size: 12.5px; }
    .ply-bar { height: 3px; }
    .ply-step-pills { padding: 8px 10px; gap: 4px; }
    .ply-pill { padding: 6px 10px; font-size: 11.5px; }
    .ply-body { padding: 12px 12px 60px; }

    /* Vocabulary 카드 */
    .vc-word-card { font-size: 34px; padding: 22px 14px; border-radius: 10px; }
    .vc-choices { gap: 8px; }
    .vc-choice { font-size: 16px; padding: 14px 10px; min-height: 56px; border-radius: 10px; border-width: 1.5px; }
    .vc-match-foot { flex-wrap: wrap; gap: 6px; font-size: 13px; }
    .vc-mode-tabs { gap: 4px; }
    .vc-mode-tabs .btn { padding: 4px 10px; font-size: 12.5px; }

    /* Sfx toggle */
    .ply-sfx-toggle { right: 8px !important; top: 8px !important; padding: 4px 8px; }

    /* Meaning/Example/Spelling 등 */
    .me-card, .es-card, .sl-card { font-size: 20px !important; padding: 20px 14px !important; }

    /* Listening 문장/버튼 */
    .lc-sentence { font-size: 17px; padding: 10px 12px; }
    .lc-controls .btn { padding: 6px 12px; font-size: 13px; }

    /* Puzzle/DT/CP 카드 */
    .pz-blank, .dt-blank, .cp-blank { font-size: 15px !important; padding: 8px 10px !important; }
}

/* 가로 모드 진입 버튼 (세로에서만 노출) */
.ply-rotate-btn {
    display: none;
    position: fixed; bottom: 16px; right: 16px; z-index: 100;
    background: #1f3a5f; color: #fff; border: 0;
    border-radius: 999px; padding: 10px 18px;
    font-size: 13px; font-weight: 700;
    box-shadow: 0 4px 16px rgba(15,23,42,.3);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
@media (max-width: 720px) and (orientation: portrait) {
    .ply-rotate-btn { display: inline-flex; }
}
@media (min-width: 721px), (orientation: landscape) {
    .ply-rotate-btn { display: none !important; }
}

/* ========== 하단 고정 탭바 (모바일 전용) ========== */
.stb-bottombar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--step-line, #c3d5ec);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    z-index: 1030;
    justify-content: space-around;
    box-shadow: 0 -4px 12px rgba(15,23,42,.04);
}
.stb-bottombar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px;
    text-decoration: none;
    color: #64748b;
    font-size: 11px; font-weight: 600;
    transition: color .12s;
    -webkit-tap-highlight-color: transparent;
}
.stb-bottombar a i { font-size: 20px; line-height: 1; }
.stb-bottombar a.active { color: #1d4ed8; }
.stb-bottombar a.active i { color: #1d4ed8; }
@media (max-width: 720px) {
    .stb-bottombar { display: flex; }
    .student-main { padding-bottom: 76px !important; }
}


/* SP 녹음 완료 → 넥스트 버튼 pulse 강조 (형아 요청 2026-07-13) */
.sp-btn-submit.is-pulse {
    animation: sp-next-pulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(37, 71, 167, .55);
}
@keyframes sp-next-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 71, 167, .55); transform: scale(1); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 71, 167, 0);  transform: scale(1.06); }
    100% { box-shadow: 0 0 0 0 rgba(37, 71, 167, 0);  transform: scale(1); }
}


/* ===== Grammar & Writing 플레이어 (2026-07-13) ===== */
.gw-step .step-title { font-size: 20px; font-weight: 700; color: #1f3a5f; margin-bottom: 6px; }
.gc-explain { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #fcd34d; color: #78350f; line-height: 1.7; font-size: 15px; }
.gw-se-prompt.content-block { border-left-color: #2547A7; background: linear-gradient(180deg,#eff5ff 0%, #fff 100%); }
.gw-se-keyword { font-size: 22px; color: #1e293b; margin-top: 6px; }
.gw-se-keyword i { color: #2547A7; }
.gw-se-input .form-control { font-size: 18px; }
.gw-se-result.content-block { border-left-width: 4px; }
.gw-se-result.gw-ok { border-left-color: #16a34a; background: linear-gradient(180deg,#f0fdf4 0%, #fff 100%); }
.gw-se-result.gw-warn { border-left-color: #f59e0b; background: linear-gradient(180deg,#fffbeb 0%, #fff 100%); }
.gw-se-score { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; color: #1f3a5f; margin-bottom: 6px; }
.gw-se-fb { color: #334155; font-size: 15.5px; line-height: 1.6; }
.gw-se-model { margin-top: 6px; }


/* ── Word Order Drill (어순 배열) ── */
.wo-root {
    max-width: 760px; margin: 0 auto; padding: 8px 0;
    flex: 1;                 /* .ply-body(min-height 620px) 안에서 세로로 채움 */
    display: flex; flex-direction: column; justify-content: center; /* 콘텐츠 세로 중앙 */
}
.wo-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
/* 카드 세로 공간 채우기 — 진도(head)는 상단 고정, 본문은 남은 공간 중앙에 여유배치 */
.wo-card { flex: 1; display: flex; flex-direction: column; width: 100%; position: relative; }
.wo-penalty { position:absolute; top:0; right:0; background:#fee2e2; color:#dc2626; font-weight:700; font-size:15px; padding:5px 14px; border-radius:14px; box-shadow:0 2px 6px rgba(220,38,38,.15); z-index:2; }
.wo-head { flex-shrink: 0; margin-bottom: 20px; }
.wo-card > .wo-expose,
.wo-card > .wo-shadow,
.wo-card > .wo-arrange,
.wo-card > .wo-type,
.wo-card > .wo-done { margin-top: auto; margin-bottom: auto; }
.wo-level { background:#1f3a5f; color:#fff; font-size:12px; font-weight:600; padding:3px 12px; border-radius:12px; }
.wo-en { font-size:24px; font-weight:700; color:#0f172a; line-height:1.45; }
.wo-ko { font-size:19px; color:#475569; margin-top:6px; text-align:center; }   /* 다른 단계 제시어와 동일 + 중앙 */
.wo-koline { margin-top:20px; font-size:17px; color:#1f3a5f; font-weight:600; background:#f1f5f9; border-radius:10px; padding:12px 16px; line-height:1.6; }
.wo-tts { border:0; background:#e0f2fe; color:#0369a1; width:38px; height:38px; border-radius:50%; margin-top:10px; cursor:pointer; font-size:16px; }
.wo-tts:hover { background:#bae6fd; }
.wo-expose { text-align:center; padding:14px 0; }
.wo-start { margin-top:44px; padding:10px 30px; font-weight:600; }
.wo-slots { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.wo-slot { display:flex; align-items:center; gap:14px; border:1.5px dashed #cbd5e1; border-radius:10px; padding:10px 16px; min-height:54px; }
.wo-slot.filled { border-style:solid; border-color:#93c5fd; background:#f0f9ff; }
/* 한글 어순 힌트 — 14px 연회색이라 영어 조각(17px) 옆에서 너무 작고 흐렸다 */
.wo-slot-ko { min-width:130px; color:#0f172a; font-size:16px; font-weight:500; }
.wo-slot-en { font-size:18px; font-weight:600; color:#0f172a; }
.wo-bank { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.wo-tile { border:1.5px solid #1f3a5f; background:#fff; color:#1f3a5f; font-size:17px; font-weight:600; padding:10px 18px; border-radius:10px; cursor:pointer; transition:transform .1s, background .12s; }
.wo-tile:hover:not(:disabled) { background:#1f3a5f; color:#fff; }
.wo-tile.used { opacity:.22; cursor:default; }
.wo-tile.wrong { animation: wo-shake .4s; border-color:#dc2626; color:#dc2626; }
@keyframes wo-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} }
.wo-hint { text-align:center; margin-top:18px; }
.wo-done { text-align:center; padding:28px 0; }
.wo-done-badge { color:#16a34a; font-size:20px; font-weight:700; margin-bottom:16px; }
.wo-en-final { color:#16a34a; }
.wo-done-actions { display:flex; gap:10px; justify-content:center; margin-top:48px; }
.wo-alldone { text-align:center; padding:52px 0; }
.wo-alldone i { font-size:52px; color:#f59e0b; }
.wo-alldone-title { font-size:22px; font-weight:700; margin:14px 0 4px; }


/* 어순 드릴 — 쉐도잉 녹음 단계 */
.wo-shadow { text-align:center; padding:12px 0; }
.wo-shadow-count { font-size:15px; color:#64748b; margin-top:22px; }
.wo-shadow-num { font-size:34px; font-weight:800; color:#1f3a5f; vertical-align:-4px; }
.wo-shadow-dots { display:flex; gap:7px; justify-content:center; margin:12px 0 4px; flex-wrap:wrap; }
.wo-dot { width:14px; height:14px; border-radius:50%; background:#e2e8f0; transition:background .15s; }
.wo-dot.on { background:#1f3a5f; }
.wo-shadow-ctrl { display:flex; gap:16px; justify-content:center; align-items:center; margin:22px 0 6px; }
.wo-mic { width:64px; height:64px; border-radius:50%; border:0; background:linear-gradient(135deg,#64748b,#475569); color:#fff; font-size:24px; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.16); }
.wo-mic.rec { background:linear-gradient(135deg,#dc2626,#b91c1c); animation: wo-pulse 1s infinite; }
.wo-mic-play { width:52px; height:52px; font-size:20px; background:linear-gradient(135deg,#3b82f6,#2563eb); }
.wo-mic:disabled { opacity:.4; cursor:default; }
@keyframes wo-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)} 50%{box-shadow:0 0 0 12px rgba(220,38,38,0)} }


/* 어순 드릴 — 완전 영작 */
.wo-type { text-align:center; padding:12px 0; }
.wo-type-input { max-width:680px; margin:0 auto; text-align:center; font-weight:600;
    border:none; border-bottom:2px solid #cbd5e1; border-radius:0;
    background:transparent; box-shadow:none !important; padding:8px 4px; font-size:18px; }
.wo-type-input:focus { border-bottom-color:#1f3a5f; outline:none; }
.wo-type-input::placeholder { color:#cbd5e1; font-weight:400; }
.wo-type-fb { margin-top:16px; font-weight:600; font-size:16px; }
.wo-type-fb.wo-ok { color:#16a34a; }
.wo-type-fb.wo-warn { color:#dc2626; }
.wo-type-hint strong { color:#0f172a; }
.wo-type-actions { display:flex; gap:10px; justify-content:center; margin-top:36px !important; }
/* 어순 드릴 — 완성 후 한글 어순 낭독 녹음 */
.wo-read { margin-top:8px; padding-top:14px; border-top:1px dashed #e2e8f0; }
.wo-read-title { font-weight:700; color:#1f3a5f; margin-bottom:12px; font-size:15px; }
.wo-read-lines { max-height:240px; overflow-y:auto; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px 16px; text-align:left; }
.wo-read-scroll { max-height:210px; border:1px solid #cbd5e1; border-radius:14px; }
.wo-root.wo-wide {
    max-width: none;
    /* 내용이 길어 가운데 정렬하면 위쪽에 큰 빈 공간이 생긴다 — 위에서부터 */
    justify-content: flex-start;
}
.wo-root.wo-wide .wo-read-scroll { max-height: 52vh; }   /* 남은 공간을 목록에 준다 */
.wo-read-scroll .shd-line { font-size: 17px; padding: 5px 14px; line-height: 1.5; }
.wo-wave { flex: 1; min-width: 0; max-width: 560px; height: 48px; border-radius: 8px; margin-left: 14px; background: #f8fafc; }
/* 녹음 전/중 폭 동일하게 고정 (파형 유무 무관) */
.wo-read-phase, .wo-read-phase .shd-scroll, .wo-read-phase .shd-controls { width: 100%; box-sizing: border-box; }
.wo-root:has(.wo-read-phase) { max-width: none; width: 100%; margin: 0; align-self: stretch; }
.wo-root:has(.wo-read-phase) .wo-card { width: 100%; }
.wo-root:has(.wo-read-phase) .shd-scroll,
.wo-root:has(.wo-read-phase) .shd-controls { width: 100%; }
.wo-read-phase .wo-read-title { margin-top: 0; }
.wo-root.wo-wide .shd-controls { padding-top: 6px; }
.wo-read-line { font-size:15px; color:#1f3a5f; font-weight:600; line-height:1.7; padding:2px 0; }
.wo-read-ctrl { display:flex; gap:16px; justify-content:center; align-items:center; margin:10px 0 4px; }
.wo-read-status { margin-top:10px; min-height:32px; }
.wo-read-done { color:#16a34a; font-weight:600; }


/* 어순 드릴 — 유사문장 반복 */
.wo-similar { width:720px; max-width:100%; margin:22px auto 0; text-align:center; background:#fff; border:1px solid #cbd5e1; border-radius:14px; padding:18px 22px; }
.wo-similar-title { font-size:13px; font-weight:600; color:#64748b; margin-bottom:10px; }
.wo-similar-item { display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 0; border-top:1px solid #eef2f7; font-size:15px; color:#0f172a; }
.wo-similar-item:first-of-type { border-top:0; }
.wo-similar-tts { border:0; background:#e0f2fe; color:#0369a1; width:30px; height:30px; border-radius:50%; cursor:pointer; flex-shrink:0; }


/* 어순 드릴 — 상급 피라미드 */
.wo-pyramid { display:flex; flex-direction:column; gap:8px; align-items:center; margin-top:16px; }
.wo-pyr-line { background:#f1f5f9; border-radius:8px; padding:8px 14px; font-size:15px; color:#1f3a5f; font-weight:600; line-height:1.4; max-width:92%; }
.wo-pyr-line:last-child { background:#1f3a5f; color:#fff; }

/* 쉐도잉 업로드 완료 후 바로 다음으로 — 메시지 줄 오른쪽 끝 */
.shd-next-btn {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 6px 14px;
    border: 0; border-radius: 6px;
    background: #1d4ed8; color: #fff;
    font-size: 14px; font-weight: 700;
    white-space: nowrap; cursor: pointer;
}
.shd-next-btn:hover { background: #1e40af; }
.shd-next-btn .bi { font-size: 18px; }

/* === 어순 드릴 노출 단계 — 각인 대상(한국어 어순)을 주인공으로 === */
/* 영문은 참고용이라 한 단계 뒤로 물린다 */
.wo-en-sub {
    font-size: 17px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    line-height: 1.45;
    margin-bottom: 6px;
}
/* 조각을 칩으로 끊어 보여줘야 '덩어리 순서'로 읽힌다 */
.wo-chips {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 10px;
    margin: 18px 0 26px;
}
.wo-chip {
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    color: #cbd5e1;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    /* 켜지는 순간이 소리와 같아야 해서 서서히 바꾸지 않는다 */
}
/* 지나간 조각 — 읽었다는 흔적 */
.wo-chip.is-past {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}
/* 지금 소리나는 조각 */
.wo-chip.is-on {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(29, 78, 216, .3);
}
@media (prefers-reduced-motion: reduce) {
    .wo-chip { transition: none; }
    .wo-chip.is-on { transform: none; }
}
.wo-expose-hint { margin-top: 10px; text-align: center; }
.wo-start:disabled { opacity: .45; cursor: not-allowed; }

/* 노출 반복 횟수 — 쉐도잉 단계와 같은 표시 */
.wo-expose-count {
    text-align: center;
    font-size: 15px; font-weight: 600; color: #64748b;
    margin-top: 14px;
}
.wo-expose-count .wo-expose-num { font-size: 20px; font-weight: 800; color: #1d4ed8; }
.wo-expose-dots {
    display: flex; justify-content: center; gap: 6px;
    margin: 8px 0 4px;
}

/* 연습 모드(서브 모드) 안내 배너 — 점수 미반영 알림 */
.practice-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 16px;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    color: #9a3412;
    font-size: 13.5px;
    line-height: 1.5;
}
.practice-banner .bi { font-size: 15px; line-height: 1.5; flex-shrink: 0; }
.practice-banner strong { font-weight: 700; }

/* 완성 문장 + 스피커 인라인 (스피커를 문장 끝으로 이동) */
.wo-en-row { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.wo-en-row .wo-tts { margin-top:0; width:34px; height:34px; font-size:15px; }

/* 완성 문장 영역 카드 (테두리 살림 — 같은패턴 카드와 짝) */
.wo-done-main { width:720px; max-width:100%; margin:0 auto; border:1px solid #cbd5e1; border-radius:14px; padding:26px 22px; background:#fff; }


/* expose 단계 상단(문장+스피커+칩) 카드 — 완성 카드와 동일 사이즈/테두리 */
.wo-expose-box { width:720px; max-width:100%; margin:0 auto; border:1px solid #cbd5e1; border-radius:14px; padding:26px 22px; background:#fff; }
.wo-expose-box .wo-chips { margin-bottom:0; }

/* 타이핑 단계 — 한글어순 카드 안에서 koline 은 가운데 pill 유지, 입력 카드 간격 */
.wo-expose-box .wo-koline { display:inline-block; margin-top:0; }
.wo-type-inputbox { margin-top:44px; }

/* 워드카드 스피커 배지 — 클릭하면 재생됨을 알리는 앙증맞은 표시 */
.vc-word-card { position: relative; }
.vc-word-speaker {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); border-radius: 50%;
    font-size: 19px; color: rgba(255,255,255,.95);
    pointer-events: none; transition: transform .15s, background .15s;
}
.vc-word-card:hover .vc-word-speaker { transform: translateY(-50%) scale(1.12); background: rgba(255,255,255,.34); }
@media (max-width: 480px) { .vc-word-speaker { right: 14px; width: 34px; height: 34px; font-size: 16px; } }

/* 문장 클릭 재생 — 커서/호버/선택 하이라이트 (is-current[재생중]와 구분) */
.lc-item { cursor: pointer; transition: background .12s; position: relative; }
.lc-item:hover:not(.is-current) { background: #f1f5f9; }
.lc-item.is-selected:not(.is-current) { background: #e0edff; border-left: 3px solid #3b82f6; padding-left: 15px; }
/* 재생 중인 문장 — 오디오가 실제 나오는 동안 강조(클릭했는데 멈춘 것처럼 보이지 않게) */
.lc-item.is-playing:not(.is-current) { background: #dbeafe; border-left: 3px solid #274a86; padding-left: 15px; }
.lc-item.is-playing::after {
    content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%; background: #274a86;
    box-shadow: 0 0 0 0 rgba(39,74,134,.55); animation: lcPlayDot 1s ease-out infinite; pointer-events: none;
}
@keyframes lcPlayDot { 0% { box-shadow: 0 0 0 0 rgba(39,74,134,.55); } 100% { box-shadow: 0 0 0 11px rgba(39,74,134,0); } }

/* LC 클래식 통합 제어바 */
.lc-ctrlbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:18px; padding:10px 14px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:12px; }
.lc-cb-transport { display:flex; gap:6px; }
.lc-cb-btn { width:40px; height:40px; border-radius:10px; border:1px solid #b6c0cc; background:#cbd5e1; color:#334155; font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .12s, transform .05s; }
.lc-cb-btn:hover { background:#bcc7d4; }
.lc-cb-btn:active { transform:scale(.95); }
.lc-cb-btn.is-playing { background:#16a34a; color:#fff; border-color:#15803d; }
.lc-cb-modes { display:flex; gap:4px; }
.lc-cb-modes button { padding:7px 12px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; color:#475569; font-size:13px; font-weight:600; cursor:pointer; }
.lc-cb-modes button.is-on { background:#cbd5e1; color:#334155; border-color:#b6c0cc; }
.lc-cb-repeat { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#475569; cursor:pointer; user-select:none; }
.lc-cb-repeat.is-on { color:#1f3a5f; }
.lc-cb-repeat input { width:16px; height:16px; accent-color:#1f3a5f; }
.lc-cb-speed { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#475569; }
.lc-cb-speed select { padding:6px 8px; border-radius:8px; border:1px solid #cbd5e1; font-size:13px; }
.lc-cb-restart { margin-left:auto; padding:8px 14px; border-radius:9px; border:1px solid #2563eb; background:#2563eb; color:#fff; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.lc-cb-restart:hover { background:#1d4ed8; border-color:#1d4ed8; }
@media (max-width:640px) { .lc-cb-restart { margin-left:0; } }

/* ===== AI 실시간 회화 =====
   폭·카드·글자 크기는 학생 화면 표준(.student-main 1280 / .block / 20px 제목)을
   그대로 따른다. 회화만 좁고 다른 톤이면 같은 사이트로 안 느껴진다.
   색은 말하기 계열(보라) — 학생이 색만 보고 "말하기구나" 안다. */
.student-body[data-step="CV"] {
    --step-accent:#2547a7; --step-head:#e6ecf8; --step-soft:#eaf0fa; --step-line:#bdcdea;
}

.cv-wrap {
    --cv-accent: #2547a7;
    --cv-soft: #f1edfd;
    --cv-line: #d3c6f4;
}

/* 카드 = .block 과 동일 규격 */
.cv-card {
    background: #fff;
    border: 2px solid var(--cv-line);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
}

.cv-head { margin-bottom: 20px; }
.cv-head h1 {
    font-size: 20px; font-weight: 700; color: #0f172a;
    margin: 0 0 8px; word-break: keep-all; overflow-wrap: break-word;
}
.cv-sub { margin: 0; font-size: 14px; color: #64748b; display: flex; flex-wrap: wrap; gap: 6px; }

.cv-badge {
    display: inline-flex; align-items: center;
    background: var(--cv-accent); color: #fff;
    font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
}
.cv-badge-soft { background: var(--cv-soft); color: #5b21b6; }

.cv-field { margin-bottom: 20px; }
.cv-label { display: block; font-size: 15px; font-weight: 600; color: #334155; margin-bottom: 10px; }
.cv-hint { font-weight: 400; color: #94a3b8; font-size: 13px; margin-left: 4px; }

.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chip {
    background: #f8fafc; border: 1px solid #cbd5e1; color: #334155;
    border-radius: 999px; padding: 9px 16px;
    font-size: 15px; font-weight: 500; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.cv-chip:hover { background: #f1f5f9; }
.cv-chip.is-on { background: var(--cv-accent); border-color: var(--cv-accent); color: #fff; }

.cv-notice {
    display: flex; gap: 8px; align-items: flex-start;
    background: #fef3c7; border: 1px solid #fcd34d; color: #78350f;
    border-radius: 10px; padding: 11px 14px; font-size: 14px;
    margin-bottom: 16px; word-break: keep-all;
}
.cv-tip {
    background: var(--cv-soft); border-radius: 10px;
    padding: 13px 16px; font-size: 14px; color: #1a3d80;
    margin: 0 0 20px; word-break: keep-all; overflow-wrap: break-word;
}
.cv-tip .bi { margin-right: 6px; }

.cv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent; border-radius: 10px;
    padding: 12px 22px; font-size: 15px; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: opacity .12s, background .12s;
}
.cv-btn:disabled { opacity: .5; cursor: default; }
.cv-btn-main { background: var(--cv-accent); color: #fff; }
.cv-btn-main:hover:not(:disabled) { background: #5b21b6; color: #fff; }
.cv-btn-ghost { background: #fff; border-color: #cbd5e1; color: #475569; }
.cv-btn-ghost:hover { background: #f8fafc; color: #334155; }
.cv-btn-stop { background: #dc2626; color: #fff; padding: 9px 16px; font-size: 14px; }
.cv-btn-stop:hover { background: #b91c1c; color: #fff; }

.cv-error { color: #dc2626; font-size: 14px; margin: 14px 0 0; word-break: keep-all; }

.cv-blocked { text-align: center; padding: 48px 24px; }
.cv-blocked .bi { font-size: 40px; color: #94a3b8; display: block; margin-bottom: 14px; }
.cv-blocked p { color: #64748b; margin: 0 0 22px; font-size: 15px; }
.cv-blocked .cv-btn { display: inline-flex; }

/* ---- 대화 중 ---- */
.cv-live {
    background: #fff; border: 2px solid var(--cv-line); border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column;
    height: calc(100vh - 210px); min-height: 440px;
}
.cv-live-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 20px; border-bottom: 1px solid #e2e8f0; background: var(--cv-soft);
}
.cv-live-state {
    display: flex; align-items: center; gap: 7px;
    font-size: 15px; font-weight: 600; color: #64748b; flex: 1 1 auto; min-width: 0;
}
.cv-live-state.is-hot { color: var(--cv-accent); }
.cv-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: none; }
.cv-live-state.is-hot .cv-dot { background: var(--cv-accent); animation: cvPulse 1.1s infinite; }
@keyframes cvPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.35); } }

.cv-timer {
    font-size: 18px; font-weight: 700; color: #334155;
    font-variant-numeric: tabular-nums; flex: none;
}
.cv-timer.is-low { color: #dc2626; }

.cv-stream {
    flex: 1 1 auto; overflow-y: auto; padding: 20px 24px;
    display: flex; flex-direction: column; gap: 12px; background: #fbfbfe;
}
.cv-stream-done {
    max-height: 360px; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 20px;
}

/* 폭이 넓어도 한 줄이 길어지지 않게 말풍선 자체를 제한한다(가독성). */
.cv-msg { max-width: min(72%, 620px); }
.cv-msg p {
    margin: 0; padding: 12px 16px; border-radius: 14px;
    font-size: 16px; line-height: 1.6; word-break: break-word;
}
.cv-msg-who { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 4px; font-weight: 600; }
.cv-msg.is-ai p { background: #fff; border: 1px solid #e2e8f0; color: #1e293b; border-top-left-radius: 4px; }
.cv-msg.is-me { align-self: flex-end; text-align: right; }
.cv-msg.is-me p { background: var(--cv-accent); color: #fff; border-top-right-radius: 4px; text-align: left; }

.cv-empty { color: #94a3b8; font-size: 15px; text-align: center; margin: auto 0; }
.cv-diag { margin-top: 10px; font-size: 13px; color: #94a3b8; font-variant-numeric: tabular-nums; }

.cv-mockbar { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid #e2e8f0; background: #fff; }
.cv-mockinput {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid #cbd5e1; border-radius: 10px; padding: 11px 16px; font-size: 16px;
}
.cv-mockinput:focus { outline: 2px solid var(--cv-line); outline-offset: 1px; border-color: var(--cv-accent); }

/* ---- 숙제 CV 스텝 (플레이어 안) ---- */
.cv-instep-block { text-align: center; padding: 28px 24px; }
.cv-instep-title { font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.cv-instep-sub { font-size: 15px; color: #64748b; margin: 0 0 16px; word-break: keep-all; }
.cv-instep-meta { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.cv-live-instep { height: min(60vh, 520px); }

/* ---- 학습홈 진입 카드 ---- */
.cv-enter {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, #1a3d80, #2f74c0);
    color: #fff; border-radius: 14px; padding: 20px 24px;
    text-decoration: none; margin-bottom: 20px;
}
.cv-enter:hover { color: #fff; opacity: .94; }
.cv-enter .bi { font-size: 26px; flex: none; }
.cv-enter-txt { flex: 1 1 auto; min-width: 0; }
.cv-enter-title { display: block; font-size: 17px; font-weight: 700; }
.cv-enter-sub { display: block; font-size: 14px; opacity: .85; word-break: keep-all; }
.cv-enter-go { flex: none; font-size: 20px; }

@media (max-width: 720px) {
    .cv-card { padding: 18px 16px; }
    .cv-head h1 { font-size: 18px; }
    .cv-live { height: calc(100vh - 230px); }
    .cv-live-bar { padding: 11px 14px; }
    .cv-stream { padding: 16px 14px; }
    .cv-msg { max-width: 88%; }
    .cv-msg p { font-size: 15px; }
}

/* ── 단계 완료 패널 ─────────────────────────────────────────
   자동으로 다음 단계로 넘어가던 것을 멈추고, 결과를 보여준 뒤
   학생이 [다음 단계] 를 눌러야 진행되게 한다. */
.stepdone-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.stepdone-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 32px 28px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .28);
}
.stepdone-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    background: linear-gradient(135deg, #41cdae, #0ea888);
    box-shadow: 0 6px 18px rgba(14, 168, 136, .35);
}
.stepdone-title {
    margin: 0 0 4px;
    font-size: 23px;
    font-weight: 800;
    color: #16233a;
}
.stepdone-msg {
    margin: 0 0 20px;
    font-size: 15px;
    color: #64748b;
    font-weight: 600;
}
.stepdone-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}
.stepdone-stats .sd-item {
    flex: 1 1 0;
    background: #f4f7fb;
    border-radius: 12px;
    padding: 12px 8px;
}
.stepdone-stats .sd-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 4px;
}
.stepdone-stats .sd-value {
    font-size: 22px;
    font-weight: 800;
    color: #2547A7;
    font-variant-numeric: tabular-nums;
}
.stepdone-stats .sd-value small { font-size: 13px; font-weight: 700; color: #94a3b8; }
.stepdone-stats .sd-value--time { font-size: 19px; color: #16233a; }
.stepdone-actions {
    display: flex;
    gap: 10px;
}
.sd-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}
.sd-btn-ghost {
    background: #fff;
    border-color: #cbd5e1;
    color: #475569;
}
.sd-btn-ghost:hover { background: #f8fafc; }
.sd-btn-go {
    flex: 1.4 1 0;
    background: linear-gradient(135deg, #3f6fd8, #2547A7);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 71, 167, .3);
}
.sd-btn-go:hover { filter: brightness(1.06); }
@media (max-width: 480px) {
    .stepdone-card { padding: 26px 20px 20px; }
    .stepdone-stats { gap: 6px; }
    .stepdone-stats .sd-value { font-size: 19px; }
    .stepdone-actions { flex-direction: column; }
}


/* ==========================================================================
   어순 드릴 — 모바일
   폰에서는 칩 한 줄에 세 조각이 들어가지 않는다. 줄여서 억지로 끼우기보다
   확실히 접히게 하고, 글자는 읽을 수 있는 선까지만 줄인다.
   ========================================================================== */
@media (max-width: 720px) {
    .wo-root { max-width: 100%; padding: 4px 0; }
    .wo-card { min-width: 0; }

    /* 제시 문장 */
    .wo-en { font-size: 19px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
    .wo-ko { font-size: 16px; }
    .wo-koline { font-size: 15px; padding: 10px 12px; margin-top: 14px; }

    /* 조각 칩 — 넘치면 반드시 다음 줄로 */
    .wo-chips { gap: 7px; margin: 14px 0 18px; }
    .wo-chip {
        font-size: 19px; padding: 8px 13px; border-radius: 9px;
        max-width: 100%; word-break: keep-all;
    }
    .wo-chip.is-on { transform: none; }   /* 좁은 화면에서 확대는 넘침만 만든다 */

    /* 슬롯 — 한글 라벨 고정폭(130px)이 좁은 화면을 잡아먹었다 */
    .wo-slot { flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px 12px; min-height: 0; }
    .wo-slot-ko { min-width: 0; font-size: 14px; color: #64748b; }
    .wo-slot-en { font-size: 16.5px; }
    .wo-slots { gap: 8px; margin-bottom: 16px; }

    /* 단어 타일 */
    .wo-bank { gap: 7px; }
    .wo-tile { font-size: 15.5px; padding: 9px 13px; }

    /* 쉐도잉 — 버튼과 파형이 한 줄에 안 들어간다 */
    .wo-shadow-ctrl { flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
    .wo-mic { width: 56px; height: 56px; font-size: 21px; }
    .wo-mic-play { width: 46px; height: 46px; font-size: 18px; }
    .wo-wave { max-width: 100%; margin-left: 0; flex: 1 1 100%; height: 40px; }
    .wo-shadow-num { font-size: 28px; }
    .wo-shadow-count { font-size: 14px; margin-top: 16px; }

    /* 타이핑 */
    .wo-type-input { max-width: 100%; }
    .wo-type-actions { margin-top: 22px !important; flex-wrap: wrap; }

    /* 완료 */
    .wo-done { padding: 18px 0; }
    .wo-done-actions { margin-top: 26px; flex-wrap: wrap; }
    .wo-alldone { padding: 34px 0; }
    .wo-alldone i { font-size: 42px; }
    .wo-alldone-title { font-size: 19px; }

    .wo-start { margin-top: 26px; }
    .wo-read-lines { max-height: 190px; padding: 10px 12px; }
    .wo-read-scroll .shd-line { font-size: 15.5px; padding: 4px 10px; }
    .wo-penalty { font-size: 13px; padding: 4px 10px; }
}

/* 아주 좁은 화면 */
@media (max-width: 400px) {
    .wo-en { font-size: 17.5px; }
    .wo-chip { font-size: 17px; padding: 7px 11px; }
    .wo-tile { font-size: 15px; padding: 8px 11px; }
}

/* ==========================================================================
   학생 화면 — 모바일 공통
   ========================================================================== */
@media (max-width: 720px) {

    /* ---- 헤더 ----
       제목·설명·탭·버튼을 한 줄에 밀어넣지 않고 위에서 아래로 흐르게 둔다. */
    .block-head,
    .stu-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .block-title { font-size: 17.5px; }
    .stu-page-title { font-size: 19px; }
    .stu-page-sub, .block-head .muted { font-size: 13.5px; }
    /* 헤더 오른쪽에 붙던 '전체보기' 같은 링크는 아래 줄에서 오른쪽으로 */
    .block-head .see-all-link { align-self: flex-end; }

    /* ---- 목록 표 ----
       머리글을 접고 카드처럼 배치한다. 제목 칸이 첫 줄을 통째로 쓰고
       나머지(날짜·상태·점수)는 그 아래 한 줄에 나란히 놓인다. */
    .exam-list thead,
    .lesson-list-table thead,
    .pts-table thead { display: none; }

    .exam-list tbody tr,
    .lesson-list-table tbody tr,
    .pts-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px 10px; padding: 12px 14px;
        border-bottom: 1px solid #e5e9ef;
    }
    .exam-list tbody tr:last-child,
    .lesson-list-table tbody tr:last-child,
    .pts-table tbody tr:last-child { border-bottom: none; }

    .exam-list tbody td,
    .lesson-list-table tbody td,
    .pts-table tbody td {
        display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
        width: auto; padding: 0; border: none;
        font-size: 13px; text-align: left !important;
        min-width: 0;
    }

    /* 각 표에서 '제목'에 해당하는 칸을 첫 줄로 끌어올린다 */
    .exam-list tbody td:nth-child(2),          /* 학습·유닛 / 테스트 명 */
    .lesson-list-table tbody td:nth-child(1),  /* 교재명 */
    .pts-table tbody td:nth-child(3) {         /* 내용 */
        order: -1; flex: 1 1 100%;
        font-size: 14.5px; font-weight: 500; color: #0f172a;
        word-break: keep-all; overflow-wrap: anywhere;
    }

    /* 날짜처럼 부수적인 값은 눈에 덜 띄게 */
    .exam-list tbody td:nth-child(1),
    .pts-table tbody td:nth-child(1) { color: #64748b; font-size: 12.5px; }

    /* 점수·포인트는 줄 끝으로 */
    .exam-list tbody td:last-child,
    .pts-table tbody td:last-child { margin-left: auto; font-weight: 600; }

    /* 표 자체가 가로로 넘치지 않게 — 래퍼에 걸린 최소폭을 푼다 */
    .exam-list, .lesson-list-table, .pts-table { min-width: 0; width: 100%; }
    .exam-list-wrap, .table-responsive { overflow-x: visible; }
}