/* ============================================================
   ab-theme.css — 액티북 인터랙티브/반응형 오버레이
   기존 style.css 위에 얹음(원본 지면 레이아웃 보존). 툴바·TOC·다크·영한토글·스케일.
   ============================================================ */

:root{ --ab-scale:1; --ab-bar-h:52px; }

/* 앱 크롬 배경 */
html[data-theme="dark"] body{ background:#12151a !important; }

/* 툴바 배경(다크) */
html[data-theme="dark"] .ab-toolbar{ background:#1b1f26; border-bottom-color:#2a2f38; }

/* ─── 툴바 ─────────────────────────────────────────── */
.ab-toolbar{
  position:sticky; top:0; z-index:100;
  height:var(--ab-bar-h);
  display:flex; align-items:center; gap:6px;
  padding:0 10px; margin-bottom:14px;
  background:#ffffffee; backdrop-filter:blur(8px);
  border-bottom:1px solid #d9dee5; box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.ab-btn{
  min-width:40px; height:36px; padding:0 10px;
  border:1px solid #d3d9e0; border-radius:9px; background:#fff; color:#222;
  font-size:15px; font-weight:700; cursor:pointer; transition:.12s;
}
.ab-btn:hover:not(:disabled){ background:#eef4ff; border-color:#00acee; }
.ab-btn:disabled{ opacity:.35; cursor:default; }
.ab-btn.on{ background:#00acee; color:#fff; border-color:#00acee; }
html[data-theme="dark"] .ab-btn{ background:#262b33; color:#e8eaed; border-color:#3a414c; }
.ab-count{ font-size:14px; color:#555; padding:0 4px; white-space:nowrap; }
.ab-count b{ color:#00acee; font-size:16px; }
html[data-theme="dark"] .ab-count{ color:#aab; }
.ab-spacer{ flex:1; }
.ab-lang{ min-width:56px; }

/* ─── 페이지 표시(한 장씩) + 반응형 스케일 ─────────────── */
/* ⚠️ '한 장씩 숨김'은 JS(ab-core.js)가 살아있을 때(html.ab-js)만.
   JS 실패/차단 시 전 페이지가 그대로 스크롤로 보임 → 글자 절대 안 사라짐. */
body{ padding-top:0; }
html.ab-js .page{ display:none; }
html.ab-js .page.ab-active{ display:block; zoom:var(--ab-scale); }
/* zoom 미지원 브라우저 폴백: transform */
@supports not (zoom:1){
  html.ab-js .page.ab-active{ transform:scale(var(--ab-scale)); transform-origin:top center; }
}
/* JS 미작동 폴백: 페이지 사이 간격 */
html:not(.ab-js) .page{ margin-bottom:26px; }

/* 다크: 지면 색 반전(토큰 override → style.css var 사용부에 전파) */
html[data-theme="dark"]{
  --paper:#1c2029; --ink:#e8eaed; --ink-soft:#c7ccd4;
  --box-gray:#262b33; --box-gray-2:#2b313a; --note-gray:#9aa3ad; --line-gray:#3a414c;
}
html[data-theme="dark"] .page{ box-shadow:0 10px 34px rgba(0,0,0,.6); }

/* ─── 영/한 토글 ───────────────────────────────────── */
/* EN 모드: 한글(번역/한글컬럼) 숨김 */
html[data-lang="en"] .ko,
html[data-lang="en"] .kt,
html[data-lang="en"] .col-ko,
html[data-lang="en"] .ko-head,
html[data-lang="en"] .ko-body{ display:none !important; }
/* 한글 모드: 영문(영문컬럼/영문 헤드·바디) 숨김 (영문 예문 .en은 유지=학습 대조) */
html[data-lang="ko"] .col-en,
html[data-lang="ko"] .en-head,
html[data-lang="ko"] .en-body{ display:none !important; }

/* ─── TOC 패널 ─────────────────────────────────────── */
.ab-toc{
  position:fixed; top:0; left:0; z-index:400;
  width:300px; max-width:82vw; height:100%;
  background:#fff; box-shadow:4px 0 24px rgba(0,0,0,.25);
  transform:translateX(-105%); transition:transform .22s ease;
  overflow-y:auto;
}
html[data-theme="dark"] .ab-toc{ background:#1b1f26; color:#e8eaed; }
body.ab-toc-open .ab-toc{ transform:translateX(0); }
.ab-toc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; font-size:16px; font-weight:800; color:#00acee;
  border-bottom:1px solid #e5e9ee; position:sticky; top:0; background:inherit;
}
.ab-toc-list{ list-style:none; padding:8px; margin:0; }
.ab-toc-list a{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:9px; text-decoration:none; color:#333; font-size:14px;
}
.ab-toc-list a:hover{ background:#eef4ff; }
html[data-theme="dark"] .ab-toc-list a{ color:#dde; }
html[data-theme="dark"] .ab-toc-list a:hover{ background:#262b33; }
.ab-toc-no{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:#00acee; color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.ab-backdrop{
  position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transition:.22s;
}
body.ab-toc-open .ab-backdrop{ opacity:1; visibility:visible; }

/* ─── 반응형: 모바일 ───────────────────────────────── */
@media (max-width:768px){
  .ab-toolbar{ gap:4px; padding:0 6px; height:48px; }
  .ab-btn{ min-width:36px; height:34px; padding:0 7px; font-size:14px; }
  .ab-lang{ min-width:48px; }
  .ab-count{ font-size:13px; }
}
/* 접근성 */
.ab-btn:focus-visible, .ab-toc-list a:focus-visible{ outline:3px solid #00acee; outline-offset:2px; }

/* ── 단어 팝업 ── */
.ab-word{ border-bottom:2px dotted #1f8a70; cursor:pointer; }
.ab-pop{
  position:absolute; z-index:500; max-width:260px;
  background:#33322c; color:#fff; border-radius:10px; padding:10px 13px;
  font-size:13px; line-height:1.5; box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.ab-pop b{ color:#ffd98a; font-size:15px; }
.ab-pop i{ color:#a9c7bd; font-style:normal; font-size:11px; margin-left:4px; }
.ab-pop span{ display:block; margin-top:4px; color:#e7e0cf; }

/* ── 자가진단 퀴즈 ── */
.ab-quiz{ background:#fffdf7; border:1px solid #e7e0cf; border-left:5px solid #c8912a; border-radius:4px 14px 14px 4px; padding:18px 20px; margin-bottom:15px; }
.ab-quiz .qh{ font-weight:800; color:#c8912a; font-size:14px; margin-bottom:10px; }
.ab-quiz .q{ font-size:15px; font-weight:600; margin:10px 0; color:#33322c; }
.ab-quiz .q .blank{ display:inline-block; min-width:80px; border-bottom:2px solid #1f8a70; }
.ab-quiz .a{ display:none; margin-top:6px; padding:8px 12px; background:#e8f4ee; border-radius:8px; font-size:14px; color:#166b56; font-weight:700; }
.ab-quiz.revealed .a{ display:block; }
.ab-quiz-check{ margin-top:8px; background:#1f8a70; color:#fff; border:none; border-radius:999px; padding:8px 18px; font-size:14px; font-weight:700; cursor:pointer; }
.ab-quiz-check:disabled{ background:#8bbcae; }
html[data-theme="dark"] .ab-quiz{ background:#1c2029; }
html[data-theme="dark"] .ab-quiz .q{ color:#e8eaed; }

/* ── 언어 토글 국기(인라인 SVG) ── */
.ab-lang{ display:inline-flex; align-items:center; gap:4px; min-width:auto; padding:0 10px; }
.ab-flag{ border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15); display:inline-block; vertical-align:middle; }
.ab-lt{ font-size:13px; font-weight:700; }

/* ── 전체 듣기 + 반복 컨트롤 ── */
.ab-playall-ctl{ display:inline-flex; gap:6px; margin-left:10px; vertical-align:middle; }
.kg .ab-playall-ctl{ font-weight:600; }
.ab-playall, .ab-repeat{
  display:inline-flex; align-items:center; gap:4px;
  min-height:32px; padding:4px 11px;
  border:1.5px solid var(--sky,#00aeef); border-radius:999px;
  background:#fff; color:var(--edu-d,#0b6fa4);
  font-size:12.5px; font-weight:700; cursor:pointer; line-height:1;
  transition:.12s; -webkit-tap-highlight-color:transparent;
}
.ab-playall .ic{ font-size:11px; }
.ab-playall:hover, .ab-repeat:hover{ background:#eaf6fc; }
.ab-playall.ab-playall-on{ background:var(--sky,#00aeef); color:#fff; border-color:var(--sky,#00aeef); }
.ab-playall.ab-playall-on .ic::before{ content:"⏸"; }
.ab-playall.ab-playall-on .ic{ font-size:0; }
.ab-playall.ab-playall-on .ic::before{ font-size:11px; }
.ab-repeat.on{ background:var(--gold,#e8890c); color:#fff; border-color:var(--gold,#e8890c); }
.ab-playall:focus-visible, .ab-repeat:focus-visible{ outline:3px solid #0b6299; outline-offset:2px; }
/* 전체듣기 중 현재 재생 항목 강조(단일 .au .playing과 공유) — 펄스는 index.html aupulse가 담당 */
/* 다크모드 */
html[data-theme="dark"] .ab-playall, html[data-theme="dark"] .ab-repeat{
  background:#262b33; color:#8fd4f3; border-color:#2f6d8c;
}
html[data-theme="dark"] .ab-playall:hover, html[data-theme="dark"] .ab-repeat:hover{ background:#2f3742; }
html[data-theme="dark"] .ab-playall.ab-playall-on{ background:#1c9ad6; color:#fff; border-color:#1c9ad6; }
html[data-theme="dark"] .ab-repeat.on{ background:#e8890c; color:#fff; border-color:#e8890c; }
/* 작은 화면: 컨트롤이 제목 아래로 자연 줄바꿈 + 탭타겟 유지 */
@media (max-width:520px){
  .kg{ display:flex; flex-wrap:wrap; align-items:center; }
  .ab-playall-ctl{ margin-left:0; margin-top:6px; width:100%; }
  .ab-playall, .ab-repeat{ min-height:36px; padding:6px 13px; font-size:13px; }
}