/*
 * 기초 문법 회화 (Grammar Talk, webm 25) 전용 화면
 * 시안 new-basic-book/basic-grammar-talk.html 의 스타일을 .cas-bgt 아래로 옮긴 것. 다크 모드는 넣지 않는다(사이트와 통일).
 * 화면: cas-core/src/Books/Pages/BasicGrammarScreen.php
 */
.cas-bgt {
    --bgt-bg: #ffffff;
    --bgt-ink: #1a1c21;
    --bgt-text: #3a3d44;   /* 설명 글 (학습할 영어보다 한 단계 약하게) */
    --bgt-muted: #70757e;
    --bgt-faint: #9196a0;  /* 한국어 해석·번호 */
    --bgt-accent: #2f6db5; /* 보조 강조 (상황 연습 라벨) — 빨강은 문법 패턴 전용이라 따로 둔다 */
    --bgt-line: #e6e7ea;
    --bgt-soft: #f6f6f7;
    --bgt-red: #e3262f;
    --bgt-red-soft: #fdeeee;
    --bgt-ok: #1d7a4f;
    --bgt-ok-soft: #eaf6f0;
    --bgt-font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

    background: var(--bgt-bg);
    color: var(--bgt-ink);
    font-family: var(--bgt-font);
    font-size: 16px;
    line-height: 1.7;
    padding: 0 16px;
}
.cas-bgt *, .cas-bgt *::before, .cas-bgt *::after { box-sizing: border-box; }
.cas-bgt a { color: inherit; }
.cas-bgt button { font: inherit; color: inherit; }
.cas-bgt :focus-visible { outline: 2px solid var(--bgt-red); outline-offset: 2px; border-radius: 4px; }

.cas-bgt__wrap { max-width: 760px; margin: 0 auto; padding: 28px 0 64px; }

/*
 * 글자 위계 (2026-11-05 정리 — 모든 글이 비슷한 크기·굵기라 구분이 약했다)
 *  - 섹션 제목 24px + 번호·구분선 / 학습할 영어(대사·예문·문제·질문) 17px 500 /
 *    설명 글 15px --bgt-text / 한국어 해석 13.5px --bgt-faint
 *  - 빨강은 문법 패턴과 예문 강조 단어에만. 라벨·번호는 회색
 */
.cas-bgt__eyebrow { font-size: 12px; font-weight: 700; color: var(--bgt-muted); letter-spacing: .12em; }
.cas-bgt__h1 { font-size: 30px; line-height: 1.3; margin: 6px 0 12px; font-weight: 800; text-wrap: balance; color: var(--bgt-ink); }
.cas-bgt__ko { font-size: 13.5px; line-height: 1.55; color: var(--bgt-faint); }
.cas-bgt--hide-ko .cas-bgt__ko { display: none !important; }

/* 목차 */
.cas-bgt__book-head { padding-bottom: 24px; border-bottom: 1px solid var(--bgt-line); margin-bottom: 8px; }
.cas-bgt__intro { color: var(--bgt-muted); margin: 0; }
.cas-bgt__intro.cas-bgt__ko { margin-top: 4px; }
.cas-bgt__howto { margin: 16px 0 0; padding: 14px 16px; background: var(--bgt-soft); border-radius: 10px; font-size: 15px; }
.cas-bgt__howto b { color: var(--bgt-ink); }
.cas-bgt__howto ol { margin: 6px 0 0; padding-left: 20px; color: var(--bgt-muted); }
.cas-bgt__howto .cas-bgt__ko { display: block; }
/* 목차 머리: 태그라인 한 줄 + 사용법 항목(소제목 "Before Class | 수업 전" / 영어 / 한국어) */
.cas-bgt__tagline { font-size: 18px; font-weight: 700; color: var(--bgt-ink); margin: -4px 0 10px; }
.cas-bgt__howto li { margin-top: 10px; }
.cas-bgt__howto li:first-child { margin-top: 4px; }
.cas-bgt__howto-t { display: block; font-weight: 700; color: var(--bgt-ink); }
.cas-bgt__howto-t .cas-bgt__ko { display: inline; font-size: inherit; font-weight: 600; color: var(--bgt-muted); }
.cas-bgt__howto-en { display: block; }
.cas-bgt__group-title { font-size: 15px; margin: 32px 0 6px; color: var(--bgt-muted); font-weight: 700; }
.cas-bgt__group-title span { color: var(--bgt-ink); }
.cas-bgt__lesson-link { display: grid; grid-template-columns: 84px 1fr; gap: 4px 12px; padding: 14px 4px; border-bottom: 1px solid var(--bgt-line); text-decoration: none; }
.cas-bgt__lesson-link:hover .cas-bgt__l-title { color: var(--bgt-red); }
.cas-bgt__l-num { font-size: 13px; font-weight: 700; color: var(--bgt-red); padding-top: 3px; grid-row: span 3; }
.cas-bgt__hits { display: block; font-weight: 500; color: var(--bgt-muted); font-size: 12px; }
.cas-bgt__l-title { font-weight: 700; font-size: 17px; }
.cas-bgt__l-sub, .cas-bgt__l-sample { font-size: 14px; color: var(--bgt-muted); }
.cas-bgt__l-sample::before { content: "\201C"; }
.cas-bgt__l-sample::after { content: "\201D"; }
.cas-bgt__empty, .cas-bgt__footer { margin-top: 40px; font-size: 13px; color: var(--bgt-muted); }

/* 레슨 상단 */
.cas-bgt__topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cas-bgt__back { padding: 6px 0; color: var(--bgt-muted); font-size: 15px; text-decoration: none; }
.cas-bgt__back:hover { color: var(--bgt-red); }
.cas-bgt__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cas-bgt .cas-bgt__tool { border: 1px solid var(--bgt-line); border-radius: 999px; background: var(--bgt-bg); padding: 3px 12px; font-size: 13px; color: var(--bgt-muted); cursor: pointer; }
.cas-bgt .cas-bgt__tool:hover { border-color: var(--bgt-red); color: var(--bgt-red); }
.cas-bgt .cas-books__view-content-print--loading { cursor: wait; }
.cas-bgt__trans-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bgt-muted); cursor: pointer; user-select: none; margin: 0; }
.cas-bgt__trans-toggle input { accent-color: var(--bgt-red); width: 16px; height: 16px; margin: 0; }
.cas-bgt__lesson-title { border-bottom: 2px solid var(--bgt-ink); padding-bottom: 16px; }
.cas-bgt__lesson-title .cas-bgt__h1 { margin: 4px 0 2px; font-size: 34px; letter-spacing: -0.01em; }
.cas-bgt__sub { margin: 4px 0 0; font-size: 15px; }

/* 섹션: 구분선 + 번호(01, 02…) + 큰 제목 */
.cas-bgt__wrap { counter-reset: bgtsec; }
.cas-bgt__section { padding: 40px 0 8px; margin-top: 8px; border-top: 1px solid var(--bgt-line); }
.cas-bgt__lesson-title + .cas-bgt__section { border-top: 0; }
.cas-bgt__h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--bgt-ink); }
.cas-bgt__h2::before { counter-increment: bgtsec; content: counter(bgtsec, decimal-leading-zero); align-self: center; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--bgt-faint); }
.cas-bgt__h2 small { font-size: 13px; font-weight: 500; color: var(--bgt-faint); }
.cas-bgt__h3 { font-size: 17px; font-weight: 800; margin: 0 0 4px; color: var(--bgt-ink); }
.cas-bgt__h3ko { font-size: 13px; font-weight: 500; margin-left: 6px; }
.cas-bgt p { margin: 0; }

/* 라벨: 회색 대문자 */
.cas-bgt__lab,
.cas-bgt__sit-lab,
.cas-bgt__meta dt { color: var(--bgt-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* 학습할 영어 (대사·예문·문제·질문) */
.cas-bgt .cas-bgt__en,
.cas-bgt__q > div:first-child,
.cas-bgt__talk-q > .cas-bgt__en-t { font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--bgt-ink); }

/* 설명 글 (상황·핵심 정리·상황 연습·언제 쓰나/목표) */
.cas-bgt__sit .cas-bgt__en-t,
.cas-bgt__focus p:not(.cas-bgt__ko),
.cas-bgt__role p:not(.cas-bgt__ko),
.cas-bgt__meta .cas-bgt__en-t { font-size: 15px; color: var(--bgt-text); }

/* Grammar Point: 옅은 빨강 배경 + 왼쪽 막대, 패턴만 빨강 */
.cas-bgt__point-box { background: var(--bgt-red-soft); border-left: 4px solid var(--bgt-red); border-radius: 4px 12px 12px 4px; padding: 20px 22px; display: grid; gap: 14px; }
.cas-bgt__pattern { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--bgt-red); }
.cas-bgt__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.cas-bgt__meta dt { padding-top: 3px; }
.cas-bgt__meta dd { margin: 0; }

/* Dialogue (+ 기존 대화 음성 버튼): 줄마다 옅은 배경 번갈아 */
.cas-bgt__sit { border: 1px dashed var(--bgt-line); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; display: grid; gap: 2px; }
.cas-bgt__dialog { display: grid; gap: 4px; }
.cas-bgt .cas-bgt__line { display: grid; grid-template-columns: 76px 1fr 32px; gap: 12px; margin: 0; align-items: start; padding: 10px 12px; border-radius: 10px; }
.cas-bgt .cas-bgt__line:nth-child(odd) { background: var(--bgt-soft); }
.cas-bgt__spk { font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--bgt-muted); padding-top: 3px; }
.cas-bgt__voice { display: flex; justify-content: center; padding-top: 2px; }
.cas-bgt .cas-bgt__voice-btn { width: 28px; height: 28px; border: 1px solid var(--bgt-line); border-radius: 999px; background: var(--bgt-bg); color: var(--bgt-muted); font-size: 11px; line-height: 1; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.cas-bgt .cas-bgt__voice-btn:hover { border-color: var(--bgt-red); color: var(--bgt-red); }
.cas-bgt .cas-books__dl-dialogue_voice_opener { display: flex; }
.cas-bgt .cas-books__dl-dialogue_voice_pause { display: none; }
.cas-bgt .cas-books__dl-dialogue_voice_loading { width: 24px !important; height: 24px; margin: 2px 0 0; }
.cas-bgt .cas-books__dl-dialogue_voice_player { display: none; }
.cas-bgt__listen { display: inline-flex; margin-left: auto; }
.cas-bgt .cas-bgt__listen-btn { border: 1px solid var(--bgt-line); border-radius: 999px; background: var(--bgt-bg); padding: 3px 12px; font-size: 13px; font-weight: 500; color: var(--bgt-muted); cursor: pointer; }
.cas-bgt .cas-bgt__listen-btn:hover { border-color: var(--bgt-red); color: var(--bgt-red); }

/* Grammar Focus */
.cas-bgt__focus { display: grid; gap: 22px; }
.cas-bgt__table-wrap { overflow-x: auto; margin-top: 4px; }
.cas-bgt__table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 420px; }
.cas-bgt__table th, .cas-bgt__table td { border: 1px solid var(--bgt-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.cas-bgt__table th { background: var(--bgt-soft); font-weight: 700; font-size: 14px; }

/* 번호 목록 (Examples / Practice / Let's Talk) */
.cas-bgt__list { margin: 0; padding-left: 0; list-style: none; counter-reset: bgt; display: grid; gap: 18px; }
.cas-bgt__list > li { counter-increment: bgt; display: grid; grid-template-columns: 28px 1fr; gap: 8px; margin: 0; min-width: 0; }
.cas-bgt__list > li::before { content: counter(bgt) "."; font-size: 15px; font-weight: 700; color: var(--bgt-faint); padding-top: 1px; }
.cas-bgt__list > li > div { min-width: 0; }
.cas-bgt__en b { color: var(--bgt-red); font-weight: 700; }

/* Practice */
.cas-bgt__q { display: grid; gap: 4px; }
.cas-bgt__blank { display: inline-block; min-width: 56px; border-bottom: 1.5px solid var(--bgt-ink); text-align: center; }
.cas-bgt__opts { font-size: 14px; color: var(--bgt-muted); }

/* 보기 버튼 → 고르면 정답(초록)/오답(빨강) 표시 + 해설 */
.cas-bgt__opt-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cas-bgt .cas-bgt__opt { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--bgt-line); border-radius: 999px; background: var(--bgt-bg); padding: 6px 14px 6px 8px; font-size: 15px; color: var(--bgt-ink); cursor: pointer; text-align: left; }
.cas-bgt .cas-bgt__opt:hover { border-color: var(--bgt-ink); }
.cas-bgt__opt-letter { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--bgt-soft); font-size: 12px; font-weight: 700; color: var(--bgt-muted); }
.cas-bgt__q.is-done .cas-bgt__opt { cursor: default; }
.cas-bgt__q.is-done .cas-bgt__opt:hover { border-color: var(--bgt-line); }
.cas-bgt__q.is-done .cas-bgt__opt:not(.is-picked):not(.is-answer) { opacity: .45; }
.cas-bgt .cas-bgt__opt.is-answer { border-color: var(--bgt-ok); background: var(--bgt-ok-soft); color: var(--bgt-ok); font-weight: 700; }
.cas-bgt .cas-bgt__opt.is-answer .cas-bgt__opt-letter { background: var(--bgt-ok); color: #fff; }
.cas-bgt .cas-bgt__opt.is-picked:not(.is-answer) { border-color: var(--bgt-red); background: var(--bgt-red-soft); color: var(--bgt-red); text-decoration: line-through; }
.cas-bgt .cas-bgt__opt.is-picked:not(.is-answer) .cas-bgt__opt-letter { background: var(--bgt-red); color: #fff; }
.cas-bgt__feedback { margin-top: 10px; padding: 12px 14px; border-radius: 10px; font-size: 15px; display: grid; gap: 4px; }
.cas-bgt__feedback[hidden] { display: none; }
.cas-bgt__q.is-ok .cas-bgt__feedback { background: var(--bgt-ok-soft); }
.cas-bgt__q.is-bad .cas-bgt__feedback { background: var(--bgt-red-soft); }
.cas-bgt__verdict { font-weight: 800; }
.cas-bgt__verdict--ok { color: var(--bgt-ok); }
.cas-bgt__verdict--bad { color: var(--bgt-red); }
.cas-bgt__verdict .cas-bgt__ko { font-weight: 500; margin-left: 4px; }
.cas-bgt__q.is-ok .cas-bgt__verdict--bad,
.cas-bgt__q.is-bad .cas-bgt__verdict--ok { display: none; }
.cas-bgt__explain-en { color: var(--bgt-text); }
.cas-bgt .cas-bgt__retry { justify-self: start; margin-top: 4px; background: none; border: 0; padding: 0; font-size: 13px; color: var(--bgt-muted); text-decoration: underline; cursor: pointer; }
.cas-bgt .cas-bgt__reveal { margin-top: 4px; background: none; border: 1px solid var(--bgt-line); border-radius: 999px; padding: 3px 12px; font-size: 13px; cursor: pointer; color: var(--bgt-muted); justify-self: start; }
.cas-bgt .cas-bgt__reveal:hover { border-color: var(--bgt-red); color: var(--bgt-red); }
.cas-bgt__answer { font-size: 14px; padding: 8px 12px; background: var(--bgt-ok-soft); border-radius: 8px; margin-top: 4px; }
.cas-bgt__answer[hidden] { display: none; }
.cas-bgt__answer b { color: var(--bgt-ok); }

/* Role Play */
.cas-bgt__role { border: 1px solid var(--bgt-line); border-radius: 12px; padding: 22px; display: grid; gap: 18px; }
.cas-bgt__role .cas-bgt__lab { margin-bottom: 4px; color: var(--bgt-accent); }

/* Let's Talk + AI 작문 박스 (기존 AI 스터디 마크업을 시안 톤으로 정돈) */
.cas-bgt__talk-q { display: grid; gap: 2px; }
.cas-bgt__ai { margin-top: 8px; }
.cas-bgt__ai .cas-books__dl-levels-wrapper--ai-input { margin-top: 0 !important; }
.cas-bgt__ai .cas-books__dl-original-content { border: 1px dashed var(--bgt-line); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--bgt-muted); cursor: pointer; }
.cas-bgt__ai .cas-books__dl-original-content:hover { border-color: var(--bgt-red); }

/* 이전/다음 */
.cas-bgt__pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--bgt-line); }
.cas-bgt__pager-btn { border: 1px solid var(--bgt-line); border-radius: 10px; padding: 10px 14px; text-align: left; max-width: 48%; min-width: 0; text-decoration: none; }
.cas-bgt__pager-btn:hover { border-color: var(--bgt-red); }
.cas-bgt__pager-btn small { display: block; color: var(--bgt-muted); font-size: 12px; }
.cas-bgt__pager-btn--next { text-align: right; margin-left: auto; }

/*
 * 브라우저 인쇄(Ctrl+P): 레슨 본문만 남긴다. 사이트 헤더·푸터는 숨김.
 * 펼친 정답·예시 답은 화면 그대로 인쇄되고, 접힌 것은 인쇄되지 않는다. 한국어 해석도 화면 설정을 따른다.
 */
@media print {
    @page { margin: 14mm 12mm; }
    body * { visibility: hidden; }
    .cas-bgt, .cas-bgt * { visibility: visible; }
    .cas-bgt { position: absolute; left: 0; top: 0; width: 100%; padding: 0; font-size: 13px; }
    .cas-bgt__wrap { max-width: none; padding: 0; }
    .cas-bgt__topbar, .cas-bgt__pager, .cas-bgt__listen, .cas-bgt__voice,
    .cas-bgt__ai, .cas-bgt__reveal, .cas-bgt__retry { display: none !important; }
    .cas-bgt .cas-bgt__line { grid-template-columns: 76px 1fr; }
    .cas-bgt__section { padding-top: 20px; }
    .cas-bgt__h2 { break-after: avoid; }
    .cas-bgt__point-box, .cas-bgt__role, .cas-bgt__sit, .cas-bgt__line,
    .cas-bgt__list > li, .cas-bgt__focus > div, .cas-bgt__table { break-inside: avoid; }
    .cas-bgt, .cas-bgt * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 520px) {
    .cas-bgt__h1 { font-size: 25px; }
    .cas-bgt__lesson-title .cas-bgt__h1 { font-size: 28px; }
    .cas-bgt__h2 { font-size: 21px; }
    .cas-bgt__section { padding-top: 32px; }
    .cas-bgt__lesson-link { grid-template-columns: 70px 1fr; }
    .cas-bgt .cas-bgt__line { grid-template-columns: 1fr 32px; gap: 0 8px; }
    .cas-bgt .cas-bgt__line .cas-bgt__spk { grid-column: 1 / -1; }
    .cas-bgt__point-box, .cas-bgt__role { padding: 16px; }
}