:root{
  --bg:#f1f5f9;
  --card:#ffffff;
  --ink:#0f172a;            /* 본문 — 더 진하게 (가독성 ↑) */
  --ink2:#374151;           /* 보조 — 회색 대비 강화 (#4b5563 → #374151) */
  --ink3:#5b6470;           /* 더 옅은 보조 */
  --line:#d6dae0;
  /* 군·관 사이트 3색 팔레트 */
  --c1:#4f46e5;       /* 인디고 — 주 (drillstudy 톤) */
  --c1-soft:#e0e7ff;
  --c2:#1f3a2b;       /* 국방색 — 긍정 */
  --c2-soft:#d8e2dc;
  --c3:#a16207;       /* 골드 — 강조·휘장 */
  --c3-soft:#eef2ff;
  --accent:var(--c1);
  --accent-soft:var(--c1-soft);
  --ok:var(--c2);
  --ok-soft:var(--c2-soft);
  --warn:var(--c3);
  --warn-soft:var(--c3-soft);
  --err:var(--c3);
  --err-soft:var(--c3-soft);
  --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 4px 12px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'kern','liga','calt'}
::selection{background:rgba(99,102,241,.20);text-shadow:none}
button{font-family:inherit;cursor:pointer}
.mono{font-family:'JetBrains Mono','Noto Sans KR',monospace;font-feature-settings:'tnum','zero'}
/* 미세 조정 — 부드러운 폰트 렌더링 */
h1,h2,h3,h4{letter-spacing:-.018em;font-weight:800;font-family:'Pretendard Variable','Pretendard','Noto Sans KR',-apple-system,sans-serif}
.brand .brand-title, .step h2, .card h2{font-family:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif !important}

/* === 헤더 3단 구조 (nav-top + nav-tabs + nav-stats) === */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
/* 1단: 브랜드 + 유틸 */
.nav-top{max-width:1400px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-utils{display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:-.015em;color:var(--ink);min-width:0;font-family:'Pretendard Variable','Pretendard',inherit}
.brand .logo{width:32px;height:32px;border-radius:6px;background:var(--c1);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800;letter-spacing:-.02em;flex-shrink:0}
.brand .brand-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--ink2);letter-spacing:0;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 2단: 메뉴 탭 (네이버 카페 스타일 가로 스크롤) */
.nav-tabs{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;border-top:1px solid var(--line)}
.nav-tabs > .nav-tab{flex:1 1 0;text-align:center}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{background:transparent;border:none;padding:14px 18px;min-height:46px;font-size:14.5px;font-weight:600;color:var(--ink2);cursor:pointer;font-family:'Pretendard Variable','Pretendard',inherit;letter-spacing:-.01em;white-space:nowrap;border-bottom:2.5px solid transparent;transition:color .12s ease,border-color .12s ease;position:relative;flex-shrink:0;scroll-snap-align:start;touch-action:manipulation;display:inline-flex;align-items:center;gap:4px}
.nt-ic{width:13px;height:13px;stroke:currentColor;flex-shrink:0}
@media(max-width:640px){.nt-ic{display:none}}
.nav-tab:hover{color:var(--ink)}
.nav-tab.active{color:var(--c1);border-bottom-color:var(--c1);font-weight:700}
.nav-tab.soon::after{content:"준비 중";position:absolute;top:5px;right:4px;background:#6366f1;color:#fff;font-size:8.5px;padding:1px 5px;border-radius:8px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
/* 3단: 실시간 통계 띠 */
.nav-stats{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink2);font-weight:500;letter-spacing:-.005em;font-family:'Pretendard Variable',inherit;margin-left:18px;flex:1;min-width:0;flex-wrap:wrap}
.nav-stats b{color:var(--ink);font-weight:700;font-family:'JetBrains Mono',monospace;font-feature-settings:'tnum'}
.nav-stats .sep{color:var(--line)}
.nav-stats .live-dot{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.16);animation:pulse 1.6s infinite}
/* 다크 — 영롱한 네뷸라 톤 */
html[data-theme="dark"] .nav{background:rgba(11,9,32,.82) !important;border-bottom-color:rgba(192,132,252,.2) !important;backdrop-filter:saturate(180%) blur(24px)}
html[data-theme="dark"] .nav-tabs{border-top-color:rgba(192,132,252,.15)}
html[data-theme="dark"] .nav-tab{color:var(--ink2)}
html[data-theme="dark"] .nav-tab:hover{color:var(--ink)}
html[data-theme="dark"] .nav-tab.active{color:var(--c3);border-bottom-color:var(--c3);text-shadow:0 0 12px rgba(253,230,138,.4)}
html[data-theme="dark"] .nav-stats{color:var(--ink2)}
html[data-theme="dark"] .nav-stats b{color:var(--c1);text-shadow:0 0 8px rgba(103,232,249,.3)}
html[data-theme="dark"] .nav-stats .sep{color:rgba(192,132,252,.3)}
/* 모바일 반응형 */
@media (max-width:720px){
  .nav-top{padding:8px 14px}
  .brand{font-size:14px;gap:8px}
  .brand .brand-title{font-size:14px}
  .brand small{display:none}
  .brand .logo{width:28px;height:28px;font-size:13px}
  /* 모바일: 탭이 다 안 들어가면 가려지지 않고 가로 스크롤로 닿을 수 있게(예: 좁은 세로화면에서
     '면접대비'가 overflow-x:hidden에 잘려 아예 안 보이던 문제) */
  .nav-tabs{padding:0 4px;justify-content:space-between;overflow-x:auto}
  .nav-tab{padding:13px 4px;min-height:46px;font-size:12.5px;flex:1 1 0;min-width:0;text-align:center;font-size:0}
  .nav-tab[data-short]::before{content:attr(data-short);font-size:11px;font-weight:inherit;letter-spacing:-.03em}
  .nav-tab.soon::after{top:1px;right:2px;font-size:7.5px;padding:1px 3px}
  .nav-stats{font-size:10.5px;gap:5px;margin-left:8px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-stats .mob-hide{display:none}
  .nav-stats > span{flex-shrink:0}
}

/* === 독립 페이지 (모의고사·면접·게시판) === */
.standalone-page{display:none;max-width:1100px;margin:0 auto;padding:40px 24px 120px;min-height:calc(100vh - 200px)}
.standalone-page.show{display:block;animation:fadeUp .3s ease}
/* standalone 페이지 진입 시 — home 내부 콘텐츠(step·footer) 숨김 */
body[data-section="mock"] #home .wrap,
body[data-section="interview"] #home .wrap,
body[data-section="board"] #home .wrap{display:none !important}

/* === 섹션별 진짜 분리 — 학습 메뉴별로 필요한 카드 그룹만 보임 ===
   각 메뉴 = 독립 페이지처럼 동작 → 페이지뷰·광고 노출 ↑
   "처음 학습"   → 시험일·법령 + 1·2회독·해설 카드만 (4번 학습모드 숨김)
   "회독 학습"   → 시험일·법령 + 기본 모드 카드만 (3번 첫 공부 그룹 숨김, 4번에서 기본만)
   "빈칸 학습"   → 시험일·법령 + 빈칸·랜덤·함정·변조 카드만 */
body[data-section="first"] #modeGroup{display:none !important}
body[data-section="first"] #modeFull,
body[data-section="first"] #modeEyeRead,
body[data-section="first"] #modeBlank,
body[data-section="first"] #modeRandom,
body[data-section="first"] #modeTrap,
body[data-section="first"] #modeCompare{display:none !important}

body[data-section="reading"] #modeExplain,
body[data-section="reading"] #modeExamPrep,
body[data-section="reading"] #modeTrap{display:none !important}

body[data-section="lecture"] #modeGroup{display:none !important}
body[data-section="lecture"] #modeHuidok1,
body[data-section="lecture"] #modeHuidok2,
body[data-section="lecture"] #modeFull,
body[data-section="lecture"] #modeEyeRead,
body[data-section="lecture"] #modeBlank,
body[data-section="lecture"] #modeRandom,
body[data-section="lecture"] #modeTrap,
body[data-section="lecture"] #modeCompare{display:none !important}

body[data-section="blank"] #firstStudyGroup{display:none !important}
body[data-section="blank"] #modeHuidok1,
body[data-section="blank"] #modeHuidok2,
body[data-section="blank"] #modeExplain,
body[data-section="blank"] #modeFull,
body[data-section="blank"] #modeEyeRead{display:none !important}

/* '틀린 조문만 회독' CTA는 회독 학습 탭에서만 노출 — 강의 등 다른 탭에선 숨김 */
body:not([data-section="reading"]) #wrongStudyCta{display:none !important}
.page-head{margin-bottom:30px}
.page-head h1,.page-head h2{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;font-family:'Pretendard Variable',sans-serif}
.page-head .page-sub{font-size:15px;color:var(--ink2);font-weight:500;line-height:1.6}
@media (max-width:720px){
  .standalone-page{padding:24px 14px 100px}
  .page-head h1,.page-head h2{font-size:24px}
  .page-head .page-sub{font-size:13.5px}
}

/* === 게시판 페이지 (모달 X, 독립 페이지) === */
.board-page-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(15,23,42,.04)}
.board-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0}
.board-tab{flex:1;min-width:80px;padding:13px 8px;background:transparent;border:none;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;border-bottom:2px solid transparent;font-family:'Pretendard Variable',inherit;white-space:nowrap;letter-spacing:-.005em;transition:all .12s}
.board-tab:hover{color:var(--ink);background:rgba(29,78,216,.04)}
.board-tab.active{color:#6366f1;border-bottom-color:#6366f1;background:rgba(29,78,216,.06)}
.board-body{padding:22px}
.board-pane{display:none}
.board-pane.active{display:block}
.board-empty{text-align:center;padding:40px 20px;color:var(--ink3);font-size:14px;line-height:1.7}
/* 공지사항 글 목록 */
.notice-list{display:flex;flex-direction:column;gap:18px}
.notice-post{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;transition:box-shadow .15s}
.notice-post:hover{box-shadow:0 4px 16px rgba(15,23,42,.06)}
.notice-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.notice-head h3{font-size:17px;font-weight:800;color:var(--ink);margin:0;letter-spacing:-.015em;font-family:'Pretendard Variable',sans-serif}
.notice-head time{font-size:12px;color:var(--ink3);font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:0}
.notice-body{font-size:14px;line-height:1.75;color:var(--ink2)}
.notice-body p{margin:0 0 10px}
.notice-body p:last-child{margin-bottom:0}
.notice-body b{font-weight:700;color:var(--ink)}
.notice-body ul{margin:8px 0 12px;padding-left:20px}
.notice-body li{margin-bottom:6px}
.notice-sign{margin-top:14px !important;color:var(--ink3);font-style:italic;font-size:13px;text-align:right}
@media (max-width:720px){
  .notice-post{padding:16px 18px}
  .notice-head h3{font-size:15.5px}
  .notice-body{font-size:13px;line-height:1.7}
  .notice-body ul{padding-left:18px}
}
html[data-theme="dark"] .notice-post{background:rgba(15,12,38,.6);border-color:rgba(192,132,252,.18)}
html[data-theme="dark"] .notice-post:hover{box-shadow:0 4px 24px rgba(192,132,252,.1)}
html[data-theme="dark"] .notice-head{border-bottom-color:rgba(192,132,252,.18)}
/* 운영자 글쓰기 UI */
.notice-admin{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px 14px;background:linear-gradient(135deg,#eef2ff,#c7d2fe);border:1px solid #a5b4fc;border-radius:10px;flex-wrap:wrap}
.notice-admin-tag{font-size:11.5px;font-weight:700;color:#3730a3;letter-spacing:.02em;flex:1}
.notice-write-btn{padding:8px 16px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.005em;transition:background .15s}
.notice-write-btn:hover{background:#4f46e5}
.notice-logout{padding:6px 12px;background:transparent;color:#3730a3;border:1px solid #4f46e5;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.notice-logout:hover{background:rgba(217,119,6,.1)}
.notice-form-wrap{margin-bottom:18px;padding:18px 20px;background:#fff;border:2px solid #6366f1;border-radius:12px;box-shadow:0 8px 24px rgba(29,78,216,.12)}
.notice-title-input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-size:16px;font-weight:700;font-family:'Pretendard Variable',inherit;margin-bottom:10px;box-sizing:border-box}
.notice-title-input:focus{outline:none;border-color:#6366f1}
.notice-body-input{width:100%;min-height:220px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:'Pretendard Variable',inherit;line-height:1.7;resize:vertical;box-sizing:border-box}
.notice-body-input:focus{outline:none;border-color:#6366f1}
.notice-form-actions{display:flex;gap:8px;margin-top:12px;align-items:center}
.notice-submit-btn{padding:9px 22px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit}
.notice-submit-btn:hover{background:#4f46e5}
.notice-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.notice-cancel-btn{padding:9px 16px;background:#f1f5f9;color:#475569;border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.notice-cancel-btn:hover{background:#e2e8f0}
.notice-form-msg{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink3)}
.notice-form-msg.ok{color:#15803d}
.notice-form-msg.err{color:#dc2626}
.notice-delete{margin-left:auto;background:transparent;color:#dc2626;border:1px solid #fca5a5;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.notice-delete:hover{background:#fee2e2}
html[data-theme="dark"] .notice-admin{background:linear-gradient(135deg,rgba(253,230,138,.15),rgba(251,191,36,.1));border-color:rgba(251,191,36,.4)}
html[data-theme="dark"] .notice-admin-tag{color:#c7d2fe}
html[data-theme="dark"] .notice-form-wrap{background:rgba(15,12,38,.7);border-color:#67e8f9}
html[data-theme="dark"] .notice-title-input,
html[data-theme="dark"] .notice-body-input{background:rgba(11,9,32,.6);color:var(--ink);border-color:rgba(192,132,252,.25)}
html[data-theme="dark"] .notice-cancel-btn{background:rgba(15,12,38,.6);color:var(--ink2);border-color:rgba(192,132,252,.25)}

/* 게시판 서브 탭 (공지사항) */
.board-subtabs{display:flex;border-bottom:1px solid var(--line);background:#fafbfc;flex-shrink:0;overflow-x:auto}
.board-subtab{flex:1;min-width:140px;padding:14px 12px;background:transparent;border:none;font-size:14px;font-weight:700;color:var(--ink2);cursor:pointer;border-bottom:3px solid transparent;font-family:'Pretendard Variable',inherit;white-space:nowrap;letter-spacing:-.01em;transition:all .15s}
.board-subtab:hover{color:var(--ink);background:rgba(29,78,216,.04)}
.board-subtab.active{color:#6366f1;border-bottom-color:#6366f1;background:#fff}
.board-subpane{padding:20px 24px 24px}
@media (max-width:720px){
  .board-subtab{font-size:13px;padding:12px 10px;min-width:110px}
  .board-subpane{padding:14px 16px 20px}
}
html[data-theme="dark"] .board-subtabs{background:rgba(11,9,32,.6);border-bottom-color:rgba(192,132,252,.18)}
html[data-theme="dark"] .board-subtab{color:var(--ink2)}
html[data-theme="dark"] .board-subtab:hover{background:rgba(192,132,252,.06);color:var(--ink)}
html[data-theme="dark"] .board-subtab.active{color:var(--c3);border-bottom-color:var(--c3);background:transparent;text-shadow:0 0 10px rgba(253,230,138,.25)}

/* === 다크모드 — 누락된 모달들 일괄 적용 === */
html[data-theme="dark"] .legal-modal,
html[data-theme="dark"] .bid-modal,
html[data-theme="dark"] .modal{
  background:#1a1838;
  border:1px solid rgba(192,132,252,.2);
  color:var(--ink);
}
html[data-theme="dark"] .legal-modal h2,
html[data-theme="dark"] .bid-modal h2,
html[data-theme="dark"] .modal h2{color:var(--ink)}
html[data-theme="dark"] .legal-body{color:var(--ink2)}
html[data-theme="dark"] .legal-body b,
html[data-theme="dark"] .legal-body strong{color:var(--ink)}
html[data-theme="dark"] .legal-close{background:rgba(192,132,252,.15);color:var(--ink);border-color:rgba(192,132,252,.3)}
html[data-theme="dark"] .legal-close:hover{background:rgba(192,132,252,.28)}
.board-empty b{color:var(--ink);display:block;font-size:16px;margin-bottom:4px;font-family:'Pretendard Variable',sans-serif}
.board-notice{padding:14px 18px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;color:#78350f;line-height:1.65;font-size:13.5px;font-weight:500}
.board-notice-warn{background:linear-gradient(135deg,#fff7ed,#ffedd5);border-color:#fdba74;color:#7c2d12}
.board-notice-warn b{color:#9a3412}
html[data-theme="dark"] .board-notice-warn{background:linear-gradient(135deg,rgba(251,146,60,.12),rgba(245,158,11,.08));border-color:rgba(251,146,60,.4);color:#fed7aa}
html[data-theme="dark"] .board-notice-warn b{color:#fdba74}
.board-form textarea{width:100%;min-height:140px;padding:14px;border:1px solid var(--line);border-radius:10px;font-family:'Pretendard Variable',inherit;font-size:14px;line-height:1.6;resize:vertical;background:#fff;color:var(--ink)}
.board-form textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.board-form .form-row{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap}
.board-form .submit{padding:10px 22px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.board-form .submit:hover{filter:brightness(1.1)}
.board-form small{color:var(--ink3);font-size:12px;line-height:1.5;flex:1;min-width:200px}
.board-msg{margin-top:10px;font-size:13px;font-weight:600}
.board-msg.ok{color:#15803d}
.board-msg.err{color:#dc2626}
/* 게시판 툴바 (글 수 + 글쓰기 버튼) */
.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.board-count{font-size:13px;color:var(--ink2);font-weight:600;letter-spacing:-.01em}
.board-count b{color:var(--ink);font-weight:800;font-family:'JetBrains Mono',monospace}
.board-write-btn{padding:9px 16px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:'Pretendard Variable',inherit;letter-spacing:-.01em;transition:filter .12s,transform .08s}
.board-write-btn:hover{filter:brightness(1.08)}
.board-write-btn:active{transform:scale(.97)}
.board-cancel-btn{padding:10px 18px;background:transparent;color:var(--ink2);border:1px solid var(--line);border-radius:8px;font-weight:600;font-size:13.5px;cursor:pointer;font-family:'Pretendard Variable',inherit}
.board-cancel-btn:hover{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .board-toolbar{border-bottom-color:rgba(192,132,252,.2)}
html[data-theme="dark"] .board-count{color:var(--ink2)}
html[data-theme="dark"] .board-count b{color:var(--c1)}
html[data-theme="dark"] .board-write-btn{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}
html[data-theme="dark"] .board-cancel-btn{border-color:rgba(192,132,252,.25);color:var(--ink2)}

.board-form-wrap{margin-bottom:18px;padding:16px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;animation:formSlideIn .18s ease-out}
@keyframes formSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="dark"] .board-form-wrap{background:rgba(28,24,62,.5);border-color:rgba(192,132,252,.2)}
.board-form-wrap input.post-title{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:'Pretendard Variable',inherit;margin-bottom:8px;background:#fff;color:var(--ink)}
.board-form-wrap input.post-title:focus{outline:none;border-color:#6366f1}
.board-form-wrap textarea{width:100%;min-height:110px;padding:13px;border:1px solid var(--line);border-radius:8px;font-family:'Pretendard Variable',inherit;font-size:14px;line-height:1.6;resize:vertical;background:#fff;color:var(--ink)}
.board-form-wrap textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(29,78,216,.08)}
.board-form-wrap input.post-nick{flex:1;min-width:160px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:'Pretendard Variable',inherit;background:#fff;color:var(--ink)}
.board-form-wrap input.post-nick:focus{outline:none;border-color:#6366f1}
.board-sep{border:none;border-top:1px solid var(--line);margin:18px 0 14px}
.post-list{display:flex;flex-direction:column;gap:10px}
.post-item{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:14px 16px;transition:all .12s}
.post-item:hover{border-color:#cbd5e1;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.post-item .post-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px;flex-wrap:wrap}
.post-item .post-nick-display{font-size:12px;font-weight:700;color:#6366f1;font-family:'Pretendard Variable',inherit}
.post-item .post-time{font-size:11px;color:var(--ink3);font-family:'JetBrains Mono',monospace}
.post-item .post-title-display{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:5px;font-family:'Pretendard Variable',inherit;letter-spacing:-.005em;line-height:1.4}
.post-item .post-body{font-size:13.5px;line-height:1.7;color:var(--ink2);white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word}
.post-item .post-body a{color:#6366f1;text-decoration:underline}
.post-more{display:block;width:100%;margin-top:12px;padding:10px;background:#f1f5f9;border:1px solid var(--line);border-radius:8px;color:var(--ink2);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.post-more:hover{background:#e2e8f0}
.post-more:disabled{opacity:.5;cursor:default}

/* 인기글 섹션 */
.popular-section{background:linear-gradient(180deg,#eef2ff,#eef2ff);border:1.5px solid #c7d2fe;border-radius:14px;padding:14px 16px;margin-bottom:14px}
.popular-head{font-size:14px;font-weight:800;color:#3730a3;margin-bottom:10px;font-family:'Pretendard Variable',inherit;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.popular-head small{font-size:11px;font-weight:600;color:#a16207;letter-spacing:-.005em}
.popular-section .post-item{background:#fff;border-color:#c7d2fe;box-shadow:0 2px 8px rgba(251,191,36,.15)}
.popular-section .post-item:hover{border-color:#6366f1}
.popular-badge{background:linear-gradient(135deg,#6366f1,#dc2626);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:-.005em;font-family:'Pretendard Variable',inherit}
.post-section-sep{font-size:12px;font-weight:700;color:var(--ink3);letter-spacing:.04em;margin:18px 0 10px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;padding-bottom:6px;border-bottom:1px solid var(--line)}

/* 광고 감지 시 자동 안내 블록 */
.ad-pitch{margin-top:12px;padding:12px 14px;border:1px dashed #6366f1;background:linear-gradient(180deg,#eef2ff,#eef2ff);border-radius:10px;font-size:12.5px;line-height:1.55}
.ad-pitch-title{font-weight:800;color:#3730a3;margin-bottom:4px;font-size:13px}
.ad-pitch-body{color:#78350f}
.ad-pitch-mail{margin-top:6px;font-weight:800;color:#7c2d12;font-size:14px;letter-spacing:.2px}
.ad-pitch-foot{margin-top:4px;color:#a16207;font-size:11.5px}
html[data-theme="dark"] .ad-pitch{background:linear-gradient(180deg,rgba(245,158,11,.08),rgba(245,158,11,.04));border-color:rgba(253,224,71,.4)}
html[data-theme="dark"] .ad-pitch-title{color:#c7d2fe}
html[data-theme="dark"] .ad-pitch-body{color:#eef2ff}
html[data-theme="dark"] .ad-pitch-mail{color:#fde047}
html[data-theme="dark"] .ad-pitch-foot{color:#c7d2fe}

/* 좋아요·댓글 액션 바 */
.post-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);align-items:center}
.post-like,.post-comment-toggle{background:transparent;border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:all .12s}
.post-like:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}
.post-like.liked{background:#fef2f2;border-color:#dc2626;color:#dc2626}
.post-comment-toggle:hover{border-color:#6366f1;color:#6366f1;background:#eff6ff}
.post-delete{margin-left:auto;background:transparent;border:1px solid rgba(220,38,38,.25);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;color:#dc2626;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;transition:all .12s}
.post-delete:hover{background:#fef2f2;border-color:#dc2626}
html[data-theme="dark"] .post-delete{color:#fca5a5;border-color:rgba(252,165,165,.3)}
html[data-theme="dark"] .post-delete:hover{background:rgba(252,165,165,.1);border-color:#fca5a5}
.post-comments{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.cm-loading{text-align:center;padding:14px;color:var(--ink3);font-size:13px}
.cm-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.cm-empty{text-align:center;padding:14px;color:var(--ink3);font-size:13px}
.cm-item{background:#f7f8fa;padding:10px 12px;border-radius:8px;border:1px solid var(--line)}
.cm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:6px}
.cm-nick{font-size:12px;font-weight:700;color:#6366f1;font-family:'Pretendard Variable',inherit}
.cm-time{font-size:10.5px;color:var(--ink3);font-family:'JetBrains Mono',monospace}
.cm-body{font-size:13px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-break:keep-all}
.cm-body a{color:#6366f1;text-decoration:underline}
.cm-form{display:flex;flex-direction:column;gap:6px;padding:10px;background:#fafbfc;border:1px solid var(--line);border-radius:8px}
.cm-nick-input{padding:7px 10px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-family:inherit;background:#fff;color:var(--ink)}
.cm-form textarea{min-height:56px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-family:'Pretendard Variable',inherit;line-height:1.55;resize:vertical;background:#fff;color:var(--ink)}
.cm-form textarea:focus,.cm-nick-input:focus{outline:none;border-color:#6366f1}
.cm-row{display:flex;align-items:center;gap:10px}
.cm-submit{padding:7px 16px;background:#6366f1;color:#fff;border:none;border-radius:6px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.cm-submit:hover{background:#4338ca}
.cm-msg{font-size:12px;font-weight:600;flex:1}
.cm-msg.err{color:#dc2626}
.cm-msg.ok{color:#15803d}

/* === 학습 종료 후 추천 카드 3개 === */
.next-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0;max-width:760px;margin-left:auto;margin-right:auto}
.next-card{padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:all .15s ease;text-align:left;font-family:'Pretendard Variable',inherit;display:flex;flex-direction:column;gap:6px}
.next-card:hover{transform:translateY(-2px);border-color:var(--c1);box-shadow:0 8px 24px rgba(29,78,216,.12)}
.next-card .next-icon{font-size:22px;line-height:1}
.next-card .next-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.next-card .next-desc{font-size:12.5px;color:var(--ink2);line-height:1.5;font-weight:500}
@media (max-width:720px){.next-actions{grid-template-columns:1fr;max-width:none}}

/* 다크모드 — 영롱한 네뷸라 톤 */
html[data-theme="dark"] .board-page-card{background:linear-gradient(180deg,rgba(22,20,50,.85),rgba(11,9,32,.92));border-color:rgba(192,132,252,.22);box-shadow:0 12px 36px rgba(0,0,0,.4)}
html[data-theme="dark"] .board-tabs{border-bottom-color:rgba(192,132,252,.22);background:rgba(11,9,32,.5)}
html[data-theme="dark"] .board-tab{color:var(--ink2)}
html[data-theme="dark"] .board-tab.active{color:var(--c3);border-bottom-color:var(--c3);background:linear-gradient(180deg,rgba(253,230,138,.1),transparent);text-shadow:0 0 10px rgba(253,230,138,.3)}
html[data-theme="dark"] .board-empty b{color:var(--ink)}
html[data-theme="dark"] .board-notice{background:rgba(253,230,138,.08);border-color:rgba(253,230,138,.3);color:var(--c3)}
html[data-theme="dark"] .board-form textarea,
html[data-theme="dark"] .board-form-wrap input.post-title,
html[data-theme="dark"] .board-form-wrap input.post-nick,
html[data-theme="dark"] .board-form-wrap textarea{background:rgba(255,255,255,.04);color:var(--ink);border-color:rgba(167,139,250,.25)}
html[data-theme="dark"] .board-form-wrap input:focus,
html[data-theme="dark"] .board-form-wrap textarea:focus,
html[data-theme="dark"] .board-form textarea:focus{border-color:var(--c1);box-shadow:0 0 0 3px rgba(103,232,249,.15)}
html[data-theme="dark"] .board-form .submit{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}
html[data-theme="dark"] .board-sep{border-top-color:rgba(192,132,252,.18)}
html[data-theme="dark"] .post-item{background:linear-gradient(135deg,rgba(28,24,62,.55),rgba(18,16,42,.7));border-color:rgba(167,139,250,.18);color:var(--ink)}
html[data-theme="dark"] .post-item:hover{border-color:rgba(103,232,249,.35);background:linear-gradient(135deg,rgba(28,24,62,.75),rgba(18,16,42,.85));box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 24px rgba(103,232,249,.08)}
html[data-theme="dark"] .post-item .post-nick-display{color:var(--c1);text-shadow:0 0 8px rgba(103,232,249,.25)}
html[data-theme="dark"] .post-item .post-title-display{color:var(--ink)}
html[data-theme="dark"] .post-item .post-body{color:var(--ink2)}
html[data-theme="dark"] .post-item .post-body a{color:var(--c3)}
html[data-theme="dark"] .post-more{background:rgba(167,139,250,.08);border-color:rgba(192,132,252,.25);color:var(--ink2)}
html[data-theme="dark"] .post-more:hover{background:rgba(192,132,252,.18);color:var(--ink)}
html[data-theme="dark"] .popular-section{background:linear-gradient(180deg,rgba(253,230,138,.12),rgba(240,171,252,.08));border-color:rgba(253,230,138,.4);box-shadow:0 0 40px rgba(253,230,138,.12)}
html[data-theme="dark"] .popular-head{color:var(--c3);text-shadow:0 0 12px rgba(253,230,138,.4)}
html[data-theme="dark"] .popular-head small{color:rgba(253,230,138,.7)}
html[data-theme="dark"] .popular-section .post-item{background:linear-gradient(135deg,rgba(28,24,62,.85),rgba(18,16,42,.92));border-color:rgba(253,230,138,.35);box-shadow:0 4px 18px rgba(253,230,138,.15)}
html[data-theme="dark"] .popular-badge{background:linear-gradient(135deg,#c7d2fe,#f0abfc);color:#0a0918}
html[data-theme="dark"] .post-section-sep{color:var(--ink3);border-bottom-color:rgba(192,132,252,.18)}
html[data-theme="dark"] .post-actions{border-top-color:rgba(192,132,252,.15)}
html[data-theme="dark"] .post-like,
html[data-theme="dark"] .post-comment-toggle{background:rgba(167,139,250,.06);border-color:rgba(192,132,252,.25);color:var(--ink2)}
html[data-theme="dark"] .post-like:hover{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.5);color:var(--err)}
html[data-theme="dark"] .post-like.liked{background:rgba(251,113,133,.18);border-color:rgba(251,113,133,.55);color:var(--err);box-shadow:0 0 12px rgba(251,113,133,.22)}
html[data-theme="dark"] .post-comment-toggle:hover{background:rgba(103,232,249,.12);border-color:rgba(103,232,249,.5);color:var(--c1)}
html[data-theme="dark"] .post-comments{border-top-color:rgba(192,132,252,.15)}
html[data-theme="dark"] .cm-item{background:rgba(11,9,32,.4);border-color:rgba(167,139,250,.18)}
html[data-theme="dark"] .cm-nick{color:var(--c1);text-shadow:0 0 8px rgba(103,232,249,.25)}
html[data-theme="dark"] .cm-body{color:var(--ink)}
html[data-theme="dark"] .cm-form{background:rgba(11,9,32,.45);border-color:rgba(167,139,250,.2)}
html[data-theme="dark"] .cm-nick-input,
html[data-theme="dark"] .cm-form textarea{background:rgba(255,255,255,.04);color:var(--ink);border-color:rgba(167,139,250,.25)}
html[data-theme="dark"] .cm-nick-input:focus,
html[data-theme="dark"] .cm-form textarea:focus{border-color:var(--c1)}
html[data-theme="dark"] .cm-submit{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}
html[data-theme="dark"] .next-card{background:linear-gradient(165deg,rgba(28,24,62,.7),rgba(18,16,42,.85));border-color:rgba(167,139,250,.18);color:var(--ink)}
html[data-theme="dark"] .next-card:hover{border-color:rgba(103,232,249,.5);box-shadow:0 12px 36px rgba(103,232,249,.18),0 0 0 1px rgba(103,232,249,.3) inset}
html[data-theme="dark"] .next-card .next-title{color:var(--ink)}
html[data-theme="dark"] .next-card .next-desc{color:var(--ink2)}
/* 다크 — footer 컴팩트 */
html[data-theme="dark"] #siteFooter{background:rgba(11,9,32,.6) !important;border-top-color:rgba(192,132,252,.18) !important;color:var(--ink3)}
html[data-theme="dark"] #siteFooter a{color:var(--ink2)}
html[data-theme="dark"] #siteFooter a[href*="mailto"]{color:var(--c3)}
html[data-theme="dark"] #siteFooter span[style*="color:var(--ink)"]{color:var(--ink) !important}

/* === 학습 시작 확인 모달 === */
.start-confirm-bg{
  position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(6px);
  z-index:9500;display:none;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s ease;
}
.start-confirm-bg.show{display:flex}
.start-confirm-box{
  background:#fff;border-radius:18px;max-width:500px;width:100%;max-height:92vh;
  overflow-y:auto;padding:32px 28px 24px;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  animation:fadeUp .25s ease;font-family:'Pretendard Variable',inherit;
}
.sc-close{
  position:absolute;top:12px;right:14px;background:transparent;border:none;
  width:34px;height:34px;border-radius:50%;font-size:16px;color:var(--ink2);
  cursor:pointer;font-family:inherit;transition:all .12s;
}
.sc-close:hover{background:#f1f5f9;color:var(--ink)}
.sc-head{text-align:center;margin-bottom:24px}
.sc-head h2{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.sc-head .sc-sub{margin:0;font-size:13px;color:var(--ink2);font-weight:500;letter-spacing:-.005em}
.sc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.sc-stat{
  padding:16px 12px;text-align:center;background:#f7f8fa;border:1px solid var(--line);
  border-radius:12px;
}
.sc-stat-icon{font-size:22px;margin-bottom:6px;line-height:1}
.sc-stat-num{font-size:24px;font-weight:900;color:var(--c1);font-family:'JetBrains Mono',monospace;line-height:1;margin-bottom:4px}
.sc-stat-label{font-size:11px;color:var(--ink2);font-weight:600;letter-spacing:-.005em}
.sc-motivation{
  padding:14px 18px;background:linear-gradient(135deg,#eef2ff,#eef2ff);
  border:1px solid #c7d2fe;border-radius:10px;color:#78350f;
  font-size:13.5px;line-height:1.6;font-weight:600;text-align:center;
  margin-bottom:16px;letter-spacing:-.005em;
}
.sc-actions{display:flex;gap:10px}
.sc-cancel,.sc-start{
  flex:1;padding:14px 20px;border-radius:12px;font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;border:none;letter-spacing:-.005em;
  transition:all .15s ease;
}
.sc-cancel{background:#f1f5f9;color:var(--ink2);border:1px solid var(--line)}
.sc-cancel:hover{background:#e2e8f0;color:var(--ink)}
.sc-start{
  background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;
  box-shadow:0 6px 20px rgba(29,78,216,.3);
}
.sc-start:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 10px 28px rgba(29,78,216,.45)}

/* 다크 — 영롱한 네뷸라 톤 */
html[data-theme="dark"] .start-confirm-bg{background:rgba(0,0,5,.85)}
html[data-theme="dark"] .start-confirm-box{
  background:linear-gradient(180deg,rgba(22,20,50,.98),rgba(11,9,32,.96));
  border:1px solid rgba(192,132,252,.3);
  box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 80px rgba(192,132,252,.1);
  color:var(--ink);
}
html[data-theme="dark"] .sc-close{color:var(--ink2)}
html[data-theme="dark"] .sc-close:hover{background:rgba(167,139,250,.14);color:var(--ink)}
html[data-theme="dark"] .sc-head h2{color:var(--ink)}
html[data-theme="dark"] .sc-head .sc-sub{color:var(--ink2)}
html[data-theme="dark"] .sc-stat{background:rgba(11,9,32,.5);border-color:rgba(167,139,250,.2)}
html[data-theme="dark"] .sc-stat-num{color:var(--c3);text-shadow:0 0 12px rgba(253,230,138,.35)}
html[data-theme="dark"] .sc-stat-label{color:var(--ink2)}
html[data-theme="dark"] .sc-motivation{
  background:linear-gradient(135deg,rgba(253,230,138,.12),rgba(240,171,252,.08));
  border-color:rgba(253,230,138,.3);
  color:var(--c3);
  text-shadow:0 0 10px rgba(253,230,138,.2);
}
html[data-theme="dark"] .sc-cancel{background:rgba(167,139,250,.08);border-color:rgba(192,132,252,.25);color:var(--ink2)}
html[data-theme="dark"] .sc-cancel:hover{background:rgba(167,139,250,.18);color:var(--ink)}
html[data-theme="dark"] .sc-start{
  background:linear-gradient(135deg,#67e8f9 0%,#818cf8 55%,#c084fc 100%);
  color:#0a0918;
  box-shadow:0 8px 24px rgba(103,232,249,.35);
}
html[data-theme="dark"] .sc-start:hover{box-shadow:0 12px 36px rgba(103,232,249,.5),0 0 40px rgba(192,132,252,.25)}
@media (max-width:540px){
  .start-confirm-box{padding:24px 18px 18px;border-radius:14px}
  .sc-head h2{font-size:18px}
  .sc-stat{padding:12px 8px}
  .sc-stat-num{font-size:20px}
  .sc-stat-icon{font-size:18px}
  .sc-stat-label{font-size:10px}
}

@media (max-width:780px){
  /* 모바일: nav-live 컴팩트 표시 — "X명 공부 중" + 나의 회독만 (중복 정보 숨김) */
  .nav-live{
    font-size:10.5px !important;
    padding:5px 9px !important;
    gap:5px !important;
    border-radius:999px !important;
    flex-shrink:1 !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  /* 모바일에선 "오늘 방문자"·"전체 평균" 같은 중복 정보 숨김 — 핵심 2개만 (공부 중·나의) */
  .nav-live .mob-hide{display:none !important}
  .nav-live b{font-size:11px !important}
  /* 브랜드 제목 — 30~50대 가독성 강화 */
  .brand{font-size:14px;gap:8px;flex:0 1 auto;min-width:0}
  .brand .brand-title{font-size:13.5px;letter-spacing:-.015em}
  .brand small{display:none}
  /* nav-inner도 wrap 허용해서 brand가 짤리지 않게 */
  .nav-inner{flex-wrap:wrap;gap:6px}
}

/* 광고 자리는 하단 strip 5자리로 일원화 — 인라인 placeholder CSS 제거 */

/* 하단 고정 — 광고 파트너 학원 바 */
.academy-strip{position:fixed;bottom:var(--kbd-h, 0);left:0;right:0;background:linear-gradient(180deg,#eef2ff 0%,#eef2ff 100%);border-top:1px solid #c7d2fe;padding:9px 20px;z-index:70;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:500;color:#78350f;box-shadow:0 -2px 12px rgba(120,90,30,.08);transition:bottom .15s}
body.kbd-open .academy-strip{display:none}
.academy-strip .strip-label{font-weight:700;letter-spacing:-.005em;color:#78350f;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.academy-strip .strip-label .star{color:#4f46e5;font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:800;letter-spacing:.06em;background:#eef2ff;padding:3px 6px;border-radius:3px;border:1px solid #c7d2fe}
.academy-strip .strip-sponsors{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.academy-strip .strip-sponsors:empty{display:none}
.academy-strip .sponsor-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;background:#fff;border:1px solid #c7d2fe;border-radius:999px;font-size:12px;font-weight:700;color:#3730a3;text-decoration:none;transition:all .15s;letter-spacing:-.005em}
.academy-strip .sponsor-chip:hover{background:linear-gradient(135deg,#eef2ff,#c7d2fe);border-color:#4f46e5;transform:translateY(-1px);box-shadow:0 2px 8px rgba(217,119,6,.2)}
.academy-strip .sponsor-chip .ad-tag{font-size:9px;color:#a16207;font-family:'JetBrains Mono',monospace;letter-spacing:.06em;font-weight:700;background:#eef2ff;padding:2px 5px;border-radius:3px}
.academy-strip .strip-contact{font-size:11.5px;color:#78350f;opacity:.92;white-space:nowrap}
.academy-strip .strip-contact a{color:#3730a3;font-family:'JetBrains Mono',monospace;font-weight:700;text-decoration:underline;margin-left:4px}
/* 빈 슬롯(입찰 모집) 칩 */
.academy-strip .sponsor-chip.slot-empty{background:#eef2ff;border-color:#c7d2fe;border-style:dashed;color:#a16207;font-family:inherit;cursor:pointer}
.academy-strip .sponsor-chip.slot-empty:hover{background:linear-gradient(135deg,#eef2ff,#c7d2fe);border-style:solid;border-color:#4f46e5}

/* 입찰 안내 모달 */
/* 약관·개인정보처리방침 모달 */
/* z-index 100000 — 이 모달은 로그인 모달(9999)·마이페이지(290) 등 여러 화면 안에서 열릴 수
   있다(로그인 체크박스의 약관 링크·마이페이지 목록·하단 고지 링크 등). 특정 부모보다만
   높게 잡으면 다른 부모 안에서는 또 가려진다 — 사이트에서 쓰는 가장 높은 z-index
   (master-diagram-overlay·study-reward-toast, 99999)보다도 위에 둔다. */
.legal-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(2px);z-index:100000;display:none;align-items:center;justify-content:center;padding:20px}
.legal-modal-bg.show{display:flex;animation:fadeIn .18s ease}
.legal-modal{position:relative;background:#fff;border-radius:14px;max-width:680px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.28);animation:zoomIn .2s ease}
.legal-modal .legal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;background:#f1f5f9;border:none;border-radius:50%;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink2);display:flex;align-items:center;justify-content:center;line-height:1;padding:0;z-index:1}
.legal-modal .legal-close:hover{background:#dc2626;color:#fff}
.legal-modal h2{margin:0;padding:24px 28px 16px;font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--ink);border-bottom:1px solid var(--line)}
.legal-modal .legal-body{padding:20px 28px;overflow-y:auto;flex:1;font-size:13px;line-height:1.75;color:var(--ink);letter-spacing:-.005em}
.legal-modal .legal-body h3{font-size:14px;font-weight:800;color:var(--ink);margin:18px 0 8px;letter-spacing:-.01em}
.legal-modal .legal-body h3:first-child{margin-top:0}
.legal-modal .legal-body p{margin:0 0 8px}
.legal-modal .legal-body ul{margin:4px 0 10px;padding-left:18px}
.legal-modal .legal-body li{margin:3px 0;color:var(--ink2);font-size:12.5px}
.legal-modal .legal-body strong{color:var(--ink);font-weight:700}
.legal-modal .legal-body .legal-meta{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:11px;color:var(--ink2);font-family:'JetBrains Mono',monospace}
.legal-modal .legal-footer{display:flex;gap:0;border-top:1px solid var(--line);background:#fafbfc;border-radius:0 0 14px 14px}
.legal-modal .legal-tab{flex:1;padding:14px;background:transparent;border:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink2);transition:all .12s;font-family:inherit}
.legal-modal .legal-tab:hover{background:#f1f5f9;color:var(--ink)}
.legal-modal .legal-tab.active{color:var(--c1);font-weight:800;background:#fff;border-top:2px solid var(--c1);margin-top:-1px}
@media (max-width:540px){.legal-modal{max-height:92vh}.legal-modal h2{font-size:17px;padding:18px 20px 12px}.legal-modal .legal-body{padding:16px 20px;font-size:12px}}

.bid-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.bid-modal-bg.show{display:flex;animation:fadeIn .18s ease}
.bid-modal{position:relative;background:#fff;border-radius:14px;max-width:520px;width:100%;padding:32px 28px 24px;box-shadow:0 24px 64px rgba(0,0,0,.28);max-height:90vh;overflow-y:auto;animation:zoomIn .2s ease}
.bid-modal .bid-close{position:absolute;top:14px;right:14px;width:30px;height:30px;background:#f1f5f9;border:none;border-radius:50%;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink2);display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.bid-modal .bid-close:hover{background:#dc2626;color:#fff}
.bid-modal .bid-tag{display:inline-block;font-size:10px;font-weight:800;color:#3730a3;background:#eef2ff;padding:4px 10px;border-radius:4px;border:1px solid #c7d2fe;font-family:'JetBrains Mono',monospace;letter-spacing:.06em;margin-bottom:14px}
.bid-modal h2{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bid-modal .bid-sub{margin:0 0 18px;font-size:13px;color:var(--ink2);line-height:1.55}
.bid-promo{background:linear-gradient(135deg,#eef2ff,#c7d2fe);border:1px solid #6366f1;border-radius:10px;padding:16px 18px;margin-bottom:16px;text-align:center}
.bid-promo-tag{font-size:11px;font-weight:800;color:#78350f;letter-spacing:.04em;margin-bottom:8px;font-family:'JetBrains Mono',monospace}
.bid-promo-price{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.bid-promo-price .strike{font-size:14px;color:#3730a3;text-decoration:line-through;opacity:.7;font-weight:600}
.bid-promo-price .now{font-size:24px;font-weight:900;color:#3730a3;font-family:'JetBrains Mono',monospace;letter-spacing:-.01em}
.bid-promo-price .off{font-size:11px;font-weight:800;color:#fff;background:#dc2626;padding:3px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.bid-promo-desc{font-size:12px;color:#78350f;line-height:1.55}
.bid-promo-desc b{color:#3730a3}
.bid-info-grid{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.bid-info-grid .bid-row{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline}
.bid-info-grid .bid-row:last-child{border-bottom:none}
.bid-info-grid .bid-row .k{color:var(--ink2);font-weight:700;font-size:12px}
.bid-info-grid .bid-row .v{color:var(--ink);font-weight:500;line-height:1.5}
.bid-info-grid .bid-row .v.big{font-size:18px;font-weight:900;color:#3730a3;font-family:'JetBrains Mono',monospace;letter-spacing:-.01em}
.bid-modal .bid-note{font-size:11.5px;color:var(--ink2);line-height:1.65;padding:10px 14px;background:#fafbfc;border-radius:8px;border:1px dashed var(--line);margin-bottom:18px}
.bid-modal .bid-apply{display:block;text-align:center;padding:13px 18px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;border-radius:10px;font-size:14px;font-weight:800;text-decoration:none;letter-spacing:-.005em;transition:all .15s}
.bid-modal .bid-apply:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(30,58,138,.32)}
.bid-modal .bid-contact{margin-top:10px;text-align:center;font-size:12px;color:var(--ink2)}
.bid-modal .bid-contact a{color:var(--c1);font-family:'JetBrains Mono',monospace;font-weight:700;text-decoration:underline}
@media (max-width:540px){.bid-modal{padding:24px 18px 18px}.bid-modal h2{font-size:18px}.bid-info-grid .bid-row{grid-template-columns:90px 1fr;font-size:12px;padding:10px 12px}}

/* 학습 중에는 숨김 */
body.studying .academy-strip{display:none !important}

/* 모바일 대응 */
@media (max-width:540px){
  .academy-strip{padding:8px 12px;gap:10px;font-size:11px}
  .academy-strip .strip-contact{width:100%;text-align:center}
}

/* 페이지 하단에 학원바 sticky 높이만큼 여유 */
body{padding-bottom:46px}
@media (max-width:540px){body{padding-bottom:64px}}

.wrap{max-width:1400px;margin:0 auto;padding:32px 28px 80px}

/* (구) 슬림 배너 — 미사용 */
.tribute-banner{display:none}
body[data-build="free"] .tribute-banner{position:relative;margin:0 -24px 0;padding:9px 24px;background:#1f3a2b;color:#e8f0e9;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;letter-spacing:-.005em}
.tribute-banner .medal{font-size:18px;animation:medalPulse 2s ease-in-out infinite}
@keyframes medalPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.tribute-banner b{color:#fde047;font-weight:800}
.tribute-banner .free-tag{padding:3px 10px;background:#fde047;color:#14532d;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.05em}
.tribute-banner .countdown{font-family:'JetBrains Mono',monospace;color:#fde047;font-weight:800}
@media (max-width:720px){
  .tribute-banner{padding:10px 14px;font-size:11px;gap:8px}
  .tribute-banner .medal{font-size:14px}
}

/* 긴급 경고 배너 — 미니멀 */
/* 긴급 배너 — hero 큰 글자 바로 아래 인라인 (sticky X, 최초 위치) */
.urgent-banner{position:relative;margin:24px auto 0;padding:10px 20px;background:#fff;color:var(--ink);border:1px solid #c7d2fe;border-radius:999px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;letter-spacing:-.005em;box-shadow:0 2px 8px rgba(220,38,38,.06)}
.urgent-banner .dot{color:var(--line);opacity:.85}
.urgent-banner .note{opacity:.55;font-size:10px;font-weight:500;margin-left:6px}
.urgent-banner .pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.18);animation:urgentPulse 1.4s infinite}
.urgent-banner b{color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;font-feature-settings:'tnum'}
@media (max-width:540px){
  .urgent-banner{padding:8px 14px;font-size:11px;gap:8px}
  .urgent-banner .note{display:none}
}
@keyframes urgentPulse{0%,100%{box-shadow:0 0 0 3px rgba(220,38,38,.18)}50%{box-shadow:0 0 0 6px rgba(220,38,38,.06)}}
.urgent-banner .dday-time{font-size:11px;font-weight:700;color:#dc2626;margin-left:4px;letter-spacing:.02em;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace}
/* sub-second tick (1초당 10단계, 더 작고 흐릿하게) */
.urgent-banner .dday-tick{font-size:10px;font-weight:600;color:#f97316;margin-left:1px;opacity:.85;display:inline-block;min-width:14px}

/* 위기감 카드 */
.warning-section{margin:30px 0;padding:32px;background:linear-gradient(135deg,#eef2ff 0%,#eef2ff 100%);border-radius:18px;border:1px solid #c7d2fe;position:relative;overflow:hidden}
.warning-section::before{content:"";position:absolute;top:-30px;right:-30px;width:160px;height:160px;border-radius:50%;background:rgba(217,119,6,.08)}
.warning-section h2{margin:0 0 8px;font-size:24px;font-weight:900;color:#78350f;letter-spacing:-.02em}
.warning-section .lead{margin:0 0 20px;color:#3730a3;font-size:15px;font-weight:500}
.warning-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:1}
.warning-tile{background:#fff;padding:20px;border-radius:12px;border-left:4px solid #4f46e5}
.warning-tile .label{font-size:12px;color:#3730a3;font-weight:700;margin-bottom:6px;letter-spacing:.02em}
.warning-tile .value{font-size:32px;font-weight:900;color:#78350f;font-family:'JetBrains Mono',monospace;line-height:1;letter-spacing:-.02em}
.warning-tile .value .unit{font-size:14px;color:#4338ca;margin-left:3px;font-weight:700}
.warning-tile .desc{font-size:11px;color:var(--ink2);margin-top:8px;line-height:1.5}
@media (max-width:720px){
  .warning-grid{grid-template-columns:1fr}
  .warning-section{padding:22px;margin:20px 0}
  .warning-section h2{font-size:20px}
}

.mode-card .pro-badge{position:absolute;top:12px;right:14px;padding:3px 10px;color:#fff;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em;z-index:3}
.mode-card.locked{cursor:pointer;position:relative;background:#fafbfc}
.mode-card.locked > *:not(.lock-overlay):not(.pro-badge){opacity:.55}
.mode-card.locked .lock-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;z-index:2;opacity:1;background:rgba(255,255,255,.5);border-radius:14px}
.mode-card.locked .lock-overlay .lock{font-size:34px}
.mode-card.locked .lock-overlay .pro{padding:5px 14px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.05em;box-shadow:0 4px 12px rgba(124,58,237,.3)}
.mode-card .mode-icon-box{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px;flex-shrink:0}.mode-card .mode-icon-box svg{width:22px;height:22px;stroke:currentColor}
.mode-card .mode-stage-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:5px;margin-bottom:8px}
.mode-card .mode-eff{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.mode-card .eff-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.mode-card .eff-row:last-child{margin-bottom:0}
.mode-card .eff-lbl{font-size:10px;color:var(--ink2);flex-shrink:0;min-width:70px}
.mode-card .eff-track{flex:1;height:3px;background:var(--line);border-radius:999px;overflow:hidden}
.mode-card .eff-bar{height:100%;border-radius:999px}
.mode-card .eff-val{font-size:10px;font-weight:800;flex-shrink:0;min-width:28px;text-align:right}
/* icon box colors per mode */
#modeExplain .mode-icon-box{background:#eff6ff;color:#4f46e5}
#modeExamPrep .mode-icon-box{background:#fff7ed;color:#ea580c}
#modeHuidok1 .mode-icon-box{background:#f0fdf4;color:#16a34a}
#modeHuidok2 .mode-icon-box{background:#eef2ff;color:#4f46e5}
#modeFull .mode-icon-box{background:#f5f3ff;color:#7c3aed}
#modeBlank .mode-icon-box{background:#fef2f2;color:#dc2626}
#modeRandom .mode-icon-box{background:#f0f9ff;color:#0284c7}
#modeTrap .mode-icon-box{background:#1e293b;color:#f8fafc}
#modeCompare .mode-icon-box{background:#fdf4ff;color:#9333ea}
#modeEyeRead .mode-icon-box{background:#f0fdfa;color:#0d9488}
body.dark #modeTrap .mode-icon-box{background:#334155;color:#e2e8f0}
body.dark #modeEyeRead .mode-icon-box{background:#134e4a;color:#5eead4}
.mode-card .why{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:11px;color:var(--ink2);line-height:1.5}
.mode-card .why b{color:#6366f1;font-weight:700}

/* 학습 시작 후 1회 안내 토스트 */
/* 🔴 전에는 `top:80px` 라 **툴바 위에 얹혀** 단추를 못 누르게 막았다(실측 y=70~144).
   2초짜리 하루 1회 안내가 조작부를 가릴 이유가 없다 — 아래(앱바 위)로 내린다(R116). */
.study-tip{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);max-width:560px;width:calc(100% - 32px);padding:14px 20px;background:#fff;border:1px solid #bfdbfe;border-left:4px solid #6366f1;border-radius:10px;box-shadow:0 6px 20px rgba(15,23,42,.1);z-index:50;animation:tipDown .3s ease;font-size:13px;color:#4f46e5;display:flex;gap:10px;align-items:flex-start}
@keyframes tipDown{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.study-tip .em{font-size:18px;flex-shrink:0}
.study-tip b{font-weight:800;color:#0f172a}
.study-tip .x{margin-left:auto;background:none;border:none;color:#64748b;font-size:18px;cursor:pointer;padding:0;line-height:1}
.study-tip .x:hover{color:#dc2626}

/* ============================================================
   광고 슬롯 (프리미엄 시 숨김)
   ============================================================ */
body.premium .ad-slot, body.premium .ad-sticky-bottom, body.premium .ad-side, body.premium .ad-float{display:none !important}

.ad-slot{position:relative;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#f8fafc 0,#f8fafc 10px,#f1f5f9 10px,#f1f5f9 20px);border:1.5px dashed #cbd5e1;border-radius:8px;color:#64748b;font-weight:600;text-align:center;margin:18px auto;max-width:100%;overflow:hidden}
.ad-slot::before{content:"AD · 광고";position:absolute;top:6px;left:8px;font-size:9px;background:#1e293b;color:#fff;padding:2px 6px;border-radius:3px;letter-spacing:.05em;font-weight:700}
.ad-slot .ad-info{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px}
.ad-slot .ad-info .size{font-family:'JetBrains Mono',monospace;font-size:14px;color:#475569;font-weight:800}
.ad-slot .ad-info .unit{font-size:10px;color:#94a3b8;font-family:'JetBrains Mono',monospace}
.ad-slot .ad-info .no-ads{margin-top:6px;padding:4px 10px;background:#6366f1;color:#fff;border-radius:999px;font-size:10px;font-weight:800;cursor:pointer;border:none;text-decoration:none}
.ad-slot .ad-info .no-ads:hover{background:#4338ca}

/* 표준 사이즈별 슬롯 */
.ad-728{width:728px;height:90px;max-width:100%}
.ad-320{width:320px;height:100px;max-width:100%}
.ad-300{width:300px;height:250px;max-width:100%}
.ad-160{width:160px;height:600px}
.ad-320s{width:320px;height:50px;max-width:100%}

/* 두 칸 배치 */
.ad-pair{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:18px 0}

/* 좌측 고정 사이드 (PC) */
@media (min-width:1280px){
  .ad-side{position:fixed;left:12px;top:120px;z-index:50}
}
@media (max-width:1279px){.ad-side{display:none}}

/* 하단 sticky */
.ad-sticky-bottom{position:fixed;bottom:0;left:0;right:0;background:#0f172a;color:#fff;padding:8px 20px;z-index:80;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:13px;font-weight:600;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
.ad-sticky-bottom .ad-slot{margin:0;background:repeating-linear-gradient(45deg,#1e293b 0,#1e293b 10px,#334155 10px,#334155 20px);border-color:#475569;color:#cbd5e1}
.ad-sticky-bottom .ad-slot::before{background:#fff;color:#0f172a}
.ad-sticky-bottom .ad-slot .ad-info .size{color:#e2e8f0}
.ad-sticky-bottom .close{width:24px;height:24px;background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:50%;font-size:14px;font-weight:700;cursor:pointer;flex-shrink:0}
.ad-sticky-bottom .nag{font-size:12px;color:#cbd5e1}
.ad-sticky-bottom .nag b{color:#fde047}
.ad-sticky-bottom .upgrade{padding:6px 12px;background:#6366f1;border:none;color:#fff;border-radius:6px;font-weight:800;font-size:12px;cursor:pointer}

/* 학습 시작 직전 인터스티셜 */
.ad-interstitial{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.ad-interstitial.show{display:flex;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ad-interstitial-box{max-width:520px;width:100%;background:#fff;border-radius:16px;overflow:hidden;animation:zoomIn .3s ease}
@keyframes zoomIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.ad-interstitial-box .head{padding:14px 20px;background:#0f172a;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:space-between}
.ad-interstitial-box .body{padding:24px}
.ad-interstitial-box .body .ad-slot{margin:0 auto 16px}
.ad-interstitial-box h3{margin:0 0 6px;font-size:18px;color:#0f172a;font-weight:800;text-align:center}
.ad-interstitial-box p{margin:0 0 16px;color:#475569;font-size:13px;text-align:center}
.ad-interstitial-box .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ad-interstitial-box .skip{padding:10px 20px;background:#f3f4f6;color:#6b7280;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px}
.ad-interstitial-box .skip:disabled{cursor:not-allowed;opacity:.5}
.ad-interstitial-box .premium{padding:10px 20px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;border:none;border-radius:8px;font-weight:800;cursor:pointer;font-size:13px}

/* 우측 하단 floating */
.ad-float{position:fixed;bottom:90px;right:20px;width:280px;background:#fff;border:2px solid #6366f1;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:75;padding:14px;animation:floatIn .4s ease}
@keyframes floatIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.ad-float .x{position:absolute;top:6px;right:6px;width:22px;height:22px;background:#f1f5f9;border:none;border-radius:50%;cursor:pointer;font-size:12px;font-weight:700;color:#64748b}
.ad-float .x:hover{background:#dc2626;color:#fff}
.ad-float h5{margin:0 0 6px;font-size:13px;font-weight:900;color:#4f46e5;padding-right:20px}
.ad-float p{margin:0 0 10px;font-size:11px;color:#475569;line-height:1.5}
.ad-float .price{font-size:18px;font-weight:900;color:#6366f1;font-family:'JetBrains Mono',monospace;margin-bottom:8px}
.ad-float .price .strike{font-size:12px;color:#94a3b8;text-decoration:line-through;margin-right:6px}
.ad-float .btn-up{display:block;width:100%;padding:8px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;border:none;border-radius:7px;font-weight:800;cursor:pointer;font-size:12px}
@media (max-width:720px){.ad-float{display:none}}

/* premium 활성 표시 (nav) */
.premium-on{display:none;padding:4px 10px;background:linear-gradient(135deg,#a5b4fc,#6366f1);color:#7c2d12;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.05em}
body.premium .premium-on{display:inline-flex;align-items:center;gap:4px}
body.premium .upgrade-cta{display:none}
body.premium .ad-strip-top{display:none !important}

/* STEP 1 (랜딩 첫 화면)에서는 모든 광고 숨김 */
body[data-step="1"] .ad-strip-top,
body[data-step="1"] .ad-sticky-bottom,
body[data-step="1"] .ad-side,
body[data-step="1"] .ad-float{display:none !important}

/* FREE BUILD 모드 — 광고·결제 UI 모두 숨김 (트래픽 모이면 토글) */
body[data-build="free"] .ad-slot,
body[data-build="free"] .ad-strip-top,
body[data-build="free"] .ad-sticky-bottom,
body[data-build="free"] .ad-side,
body[data-build="free"] .ad-float,
body[data-build="free"] .upgrade-cta,
body[data-build="free"] .pro-badge,
body[data-build="free"] .premium-on,
body[data-build="free"] .ad-interstitial,
body[data-build="free"] .modal-bg{display:none !important}
/* 광고 슬롯 컨테이너 (양쪽 padding) 도 free 모드에선 안 차지 */
body[data-build="free"] .ad-pair{display:none !important}

/* nav 광고 없애기 버튼 */
.no-ads-cta{display:inline-block;padding:6px 12px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;border:none;border-radius:999px;font-size:11px;font-weight:800;cursor:pointer}
.no-ads-cta:hover{filter:brightness(1.1)}

/* 프리미엄 모달 */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);z-index:400;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.show{display:flex;animation:fadeIn .2s}
.modal{max-width:520px;width:100%;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.3);max-height:92vh;overflow-y:auto;animation:zoomIn .3s ease}
.modal-head{padding:32px 28px 20px;background:linear-gradient(135deg,#4f46e5 0%,#6366f1 100%);color:#fff;text-align:center;position:relative}
.modal-head .pill{display:inline-block;padding:5px 12px;background:rgba(255,255,255,.18);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;margin-bottom:10px}
.modal-head h2{margin:0 0 6px;font-size:22px;font-weight:900}
.modal-head p{margin:0;color:#dbeafe;font-size:13px}
.modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;border:none;font-size:16px;cursor:pointer;font-weight:700}
.modal-close:hover{background:rgba(255,255,255,.3)}
.modal-body{padding:24px 28px}
/* ── 홈 공지 팝업 (세 블록 통합) ─────────────────────────────────────────── */
/* 홈에 남는 재열기 칩 — 팝업을 끈 사람도 공지에 닿을 수 있어야 한다 */
.home-notice-bar{margin:14px 0 4px}
.hnb-btn{display:flex;align-items:center;gap:8px;width:100%;padding:12px 14px;border:1px solid var(--line,#e2e8f0);
  background:var(--card,#fff);border-radius:14px;cursor:pointer;font-size:14px;color:var(--ink,#0f172a);
  text-align:left;white-space:nowrap}
.hnb-btn:hover{border-color:#a5b4fc}
.hnb-btn b{flex-shrink:0}
.hnb-sub{color:var(--ink2,#64748b);font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hnb-arrow{margin-left:auto;color:#6366f1;font-weight:800;font-size:13px;flex-shrink:0;padding-left:8px}
/* 좁은 화면에서는 부제를 접는다 — 두 줄로 깨지는 것보다 낫다 */
@media (max-width:430px){ .hnb-sub{display:none} }
body.dark .hnb-btn{background:rgba(30,27,58,.6);border-color:rgba(192,132,252,.22);color:#e2e8f0}

.hnp-modal{max-width:640px}
.hnp-body{padding:18px 20px 8px}
/* 팝업 안에서는 세 블록의 바깥 여백만 정리한다 — 내용·클래스는 그대로 둔다 */
/* 팝업 안에서는 공지 목록의 바깥 여백만 정리한다 — 클래스·내용은 그대로 둔다 */
.hnp-body .home-notice{margin:0}
.hnp-body .home-notice .hn-item{padding:11px 0}
.hnp-body .home-notice .hn-title{font-size:14px}
.hnp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px 18px;border-top:1px solid var(--line,#e2e8f0);position:sticky;bottom:0;background:inherit}
.hnp-week{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink2,#64748b);cursor:pointer;user-select:none}
.hnp-week input{width:16px;height:16px;accent-color:#6366f1;cursor:pointer}
.hnp-ok{padding:9px 22px;border:none;border-radius:10px;background:#6366f1;color:#fff;font-size:14px;font-weight:800;cursor:pointer}
.hnp-ok:hover{background:#4f46e5}
body.dark .hnp-foot{border-top-color:rgba(192,132,252,.2);background:#1e1b3a}
body.dark .hnp-week{color:#94a3b8}
@media (max-width:480px){ .hnp-body{padding:14px 14px 6px} .hnp-foot{padding:12px 14px 16px} }

.modal-body .perks{list-style:none;padding:0;margin:0 0 18px}
.modal-body .perks li{display:flex;gap:10px;padding:8px 0;font-size:14px;color:#0f172a;align-items:center}
.modal-body .perks li::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;background:#dcfce7;color:#15803d;border-radius:50%;font-weight:900;font-size:12px;flex-shrink:0}
.price-box{margin:8px 0 20px;padding:20px;background:linear-gradient(135deg,#eff6ff,#dbeafe);border-radius:14px;text-align:center;border:1px solid #bfdbfe}
.price-box .strike{color:var(--ink2);text-decoration:line-through;font-size:15px;margin-right:6px}
.price-box .now{font-size:34px;font-weight:900;color:#6366f1;font-family:'JetBrains Mono',monospace}
.price-box .month{font-size:13px;color:var(--ink2)}
.price-box .badge{display:inline-block;margin-bottom:6px;padding:3px 10px;background:#eef2ff;color:#3730a3;border-radius:999px;font-size:11px;font-weight:800}
.modal-cta{display:flex;gap:8px;margin-top:14px}
.modal-cta button{flex:1;padding:12px;border-radius:8px;border:none;font-weight:800;cursor:pointer;font-size:14px}
.modal-cta .ok{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;box-shadow:0 4px 14px rgba(29,78,216,.3)}
.modal-cta .ok:hover{filter:brightness(1.08)}
.modal-cta .later{background:#f1f5f9;color:var(--ink2)}

/* (프리미엄 모달은 위에 정의됨) */

/* 피드백 버튼 — academy-strip(46~64px) 위로 띄움 */
.fb-fab{position:fixed;bottom:64px;left:20px;z-index:80;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:0 8px 24px rgba(29,78,216,.35);transition:all .15s;display:grid;place-items:center}
/* 모바일에선 숨김 (하단 고정바·academy-strip과 겹침. 푸터 이메일로 대체) */
@media (max-width:780px){.fb-fab{display:none !important}}
.fb-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 32px rgba(29,78,216,.45)}
.fb-fab .label{position:absolute;left:60px;top:50%;transform:translateY(-50%);background:#0f172a;color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.fb-fab:hover .label{opacity:1}
@media (max-width:720px){.fb-fab .label{display:none}}
body.studying .fb-fab{display:none}

.fb-modal{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);z-index:400;display:none;align-items:center;justify-content:center;padding:20px}
.fb-modal.show{display:flex;animation:fadeIn .2s}
.fb-box{max-width:520px;width:100%;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.3);max-height:92vh;overflow-y:auto;animation:zoomIn .3s ease}
.fb-head{padding:24px 24px 16px;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;position:relative}
.fb-head h3{margin:0 0 4px;font-size:18px;font-weight:800}
.fb-head p{margin:0;font-size:12px;color:#cbd5e1}
.fb-head .x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;border:none;font-size:16px;cursor:pointer}
.fb-body{padding:20px 24px}
.fb-body label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin:10px 0 6px}
.fb-body select, .fb-body input[type=text], .fb-body input[type=email], .fb-body textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink);outline:none}
.fb-body select:focus, .fb-body input:focus, .fb-body textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.fb-body textarea{resize:vertical;min-height:100px;font-family:inherit}
.fb-body .meta{font-size:11px;color:var(--ink2);background:#f8fafc;padding:8px 10px;border-radius:6px;margin-top:6px;font-family:'JetBrains Mono',monospace}
.fb-actions{display:flex;gap:8px;margin-top:16px}
.fb-actions button{flex:1;padding:11px;border-radius:8px;border:none;font-weight:700;cursor:pointer;font-size:13px}
.fb-actions .send{background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff}
.fb-actions .send:hover{filter:brightness(1.1)}
.fb-actions .cancel{background:#f1f5f9;color:var(--ink2)}
.fb-note{margin-top:10px;font-size:10px;color:var(--ink2);text-align:center}

/* 학습 중 빠른 신고 팝오버 */
.qr-pop{position:fixed;z-index:500;background:#fff;border:1px solid #6366f1;border-radius:12px;box-shadow:0 14px 40px rgba(15,23,42,.25);padding:14px 16px;min-width:300px;max-width:380px;display:none;animation:zoomIn .15s ease}
.qr-pop.show{display:block}
.qr-pop .qr-head{font-size:12px;color:#5d6477;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.qr-pop .qr-head::before{content:"🚩";font-size:14px}
.qr-pop .qr-ctx{font-size:11px;color:#4f46e5;background:#eff6ff;padding:6px 10px;border-radius:6px;margin-bottom:10px;font-family:'Noto Sans KR',sans-serif;line-height:1.4}
.qr-pop .qr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.qr-pop .qr-chip{padding:5px 11px;background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;border-radius:999px;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s}
.qr-pop .qr-chip:hover{background:#dbeafe;border-color:#6366f1;color:#6366f1}
.qr-pop .qr-chip.on{background:#6366f1;border-color:#6366f1;color:#fff}
.qr-pop input.qr-memo{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-family:inherit;outline:none}
.qr-pop input.qr-memo:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.qr-pop .qr-actions{display:flex;gap:6px;margin-top:8px}
.qr-pop .qr-btn{padding:7px 12px;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer}
.qr-pop .qr-btn.send{background:#6366f1;color:#fff;flex:1}
.qr-pop .qr-btn.cancel{background:#f1f5f9;color:#5d6477}
.qr-pop .qr-hint{font-size:10px;color:var(--ink2);margin-top:6px;text-align:center}

/* 토스트 */
.qr-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#15803d;color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:700;z-index:600;box-shadow:0 8px 24px rgba(21,128,61,.35);animation:toastIn .3s ease;display:none}
.qr-toast.show{display:block}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}

/* 신고함 (학습 nav 우측) */
.qr-inbox-btn{position:fixed;top:14px;right:160px;z-index:101;padding:7px 12px;background:#fff;color:#6366f1;border:1px solid #6366f1;border-radius:999px;font-size:11px;font-weight:800;cursor:pointer;display:none}
body.studying .qr-inbox-btn.has-items{display:block}
.qr-inbox-btn .badge{display:inline-block;min-width:18px;height:18px;line-height:18px;background:#dc2626;color:#fff;border-radius:9px;text-align:center;font-size:10px;margin-left:4px;padding:0 5px}

/* 신고함 모달 */
.qr-inbox-modal{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);z-index:450;display:none;align-items:center;justify-content:center;padding:20px}
.qr-inbox-modal.show{display:flex;animation:fadeIn .2s}
.qr-inbox-box{max-width:640px;width:100%;background:#fff;border-radius:16px;overflow:hidden;max-height:88vh;display:flex;flex-direction:column}
.qr-inbox-head{padding:18px 22px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:space-between}
.qr-inbox-head h3{margin:0;font-size:16px;font-weight:800}
.qr-inbox-head .x{background:rgba(255,255,255,.18);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-weight:700}
.qr-inbox-list{flex:1;overflow-y:auto;padding:14px 18px}
.qr-item{padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.qr-item .top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.qr-item .type{padding:2px 8px;background:#dbeafe;color:#4f46e5;border-radius:4px;font-size:10px;font-weight:800}
.qr-item .type.오타{background:#fee2e2;color:#991b1b}
.qr-item .type.띄어쓰기{background:#eef2ff;color:#3730a3}
.qr-item .type.변조이상{background:#fce7f3;color:#9d174d}
.qr-item .type.내용오류{background:#e0e7ff;color:#3730a3}
.qr-item .type.기타{background:#f1f5f9;color:#475569}
.qr-item .ts{font-size:10px;color:var(--ink2);margin-left:auto}
.qr-item .ctx{font-size:11px;color:#4338ca;margin-bottom:4px}
.qr-item .memo{font-size:13px;color:var(--ink)}
.qr-item .del{margin-left:auto;background:none;border:none;color:#dc2626;cursor:pointer;font-size:11px;font-weight:700}
.qr-inbox-foot{padding:14px 22px;background:#f8fafc;border-top:1px solid var(--line);display:flex;gap:8px}
.qr-inbox-foot button{flex:1;padding:11px;border:none;border-radius:8px;font-weight:800;cursor:pointer;font-size:13px}
.qr-inbox-foot .send-all{background:#6366f1;color:#fff}
.qr-inbox-foot .clear-all{background:#fee2e2;color:#991b1b}

/* 다단계 화면 전환 */
.step{display:none}
.step.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* 단계 인디케이터 */
.stepper{display:flex;justify-content:center;gap:0;margin:24px 0 0;padding:0 24px}
body[data-step="3"] .stepper{display:none}

/* === 사용 가이드 — 2단계 접기 === */
.guide-root{cursor:default}
.guide-root > summary.guide-root-summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:6px 4px;font-size:18px;font-weight:700;color:var(--ink)}
.guide-root > summary.guide-root-summary::-webkit-details-marker{display:none}
.guide-root > summary .guide-chev{font-size:14px;color:var(--ink2);transition:transform .2s}
.guide-root[open] > summary .guide-chev{transform:rotate(180deg)}
.guide-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.guide-item{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.guide-item:hover{border-color:#cbd5e1}
.guide-item[open]{border-color:#94a3b8;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.guide-item > summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px;letter-spacing:-.005em}
.guide-item > summary::-webkit-details-marker{display:none}
.guide-item > summary::after{content:"▾";font-size:11px;color:var(--ink2);transition:transform .2s;flex-shrink:0;margin-left:auto}
.guide-item[open] > summary::after{transform:rotate(180deg)}
.guide-item .guide-body{padding:0 14px 14px;font-size:13px;line-height:1.65;color:var(--ink2)}
.guide-pill{font-size:10px;font-weight:600;color:#6366f1;letter-spacing:.05em;background:#fff;padding:2px 7px;border-radius:999px;border:1px solid #bfdbfe;margin-left:6px}
/* 톤 색상 */
.guide-item[data-tone="blue"]{background:#eff6ff;border-color:#bfdbfe}
.guide-item[data-tone="blue"] > summary{color:#4f46e5}
.guide-item[data-tone="blue"] .guide-body{color:#4f46e5}
.guide-item[data-tone="amber"]{background:#eef2ff;border-color:#c7d2fe}
.guide-item[data-tone="amber"] > summary{color:#3730a3}
.guide-item[data-tone="amber"] .guide-body{color:#78350f}
.guide-item[data-tone="sky"]{background:#f0f9ff;border-color:#bae6fd}
.guide-item[data-tone="sky"] > summary{color:#075985}
.guide-item[data-tone="sky"] .guide-body{color:#0c4a6e}
.guide-item[data-tone="teal"]{background:#f0fdfa;border-color:#99f6e4}
.guide-item[data-tone="teal"] > summary{color:#0f766e}
.guide-item[data-tone="teal"] .guide-body{color:#134e4a}
.guide-item[data-tone="red"]{background:#fee2e2;border-color:#fecaca}
.guide-item[data-tone="red"] > summary{color:#991b1b}
.guide-item[data-tone="red"] .guide-body{color:#7f1d1d}
.guide-item[data-tone="dashed"]{background:#fff;border-style:dashed}

/* Progressive Form 제거 — 단순 표시 모드로 환원 */
.stepper .seg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);font-weight:500;cursor:pointer;letter-spacing:-.005em}
.stepper .seg .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:11px;background:#fff;color:var(--ink2);border:1px solid var(--line);transition:all .2s;font-family:'JetBrains Mono',monospace}
.stepper .seg.active{color:var(--ink);font-weight:600}
.stepper .seg.active .dot{background:var(--ink);color:#fff;border-color:var(--ink)}
.stepper .seg.done .dot{background:var(--ink);color:#fff;border-color:var(--ink)}
.stepper .seg.done{color:var(--ink)}
.stepper .bar{width:48px;height:1px;background:var(--line);margin:0 12px;align-self:center}
.stepper .bar.done{background:var(--ink)}

/* Hero — 미니멀 프로 디자인 */
/* Hero: full-width 영역 (container 밖으로 break out) + 자체 그라디언트 배경 */
.hero{
  /* Full-width 트릭 — wrap 컨테이너 밖으로 100vw로 확장 */
  position:relative;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding:48px 24px 28px;
  text-align:center;
  /* drillstudy 톤 — 차분한 슬레이트 그라디언트 */
  background:linear-gradient(180deg,#fbfcfe 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
  min-height:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  overflow:hidden;
}
/* 차분한 인디고 글로우 (위기감 톤 제거) */
.hero::before{
  content:"";
  position:absolute;
  top:18%;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:1400px;
  height:200px;
  background:radial-gradient(ellipse,rgba(79,70,229,.05) 0%,rgba(79,70,229,0) 65%);
  pointer-events:none;
  z-index:0;
}
.hero > *{position:relative;z-index:1}
/* Hero 작은 기준 안내 (카운트다운 출처) */
.hero-disclaimer{
  font-size:11px;
  color:var(--ink2);
  opacity:.6;
  margin:-14px 0 18px;
  text-align:center;
  letter-spacing:-.005em;
  font-weight:500;
}
@media (max-width:720px){.hero-disclaimer{font-size:10px;margin:-9px 0 12px}}

/* Hero 라벨 — 작은 prefix "제 79회차 시험까지" */
.hero-label{
  font-size:clamp(15px, 1.8vw, 24px);
  font-weight:800;
  letter-spacing:.04em;
  color:#7c2d12;
  text-transform:none;
  margin:0 0 14px;
  font-family:'JetBrains Mono',monospace;
  text-align:center;
}

/* Hero 큰 카운트다운 — 사이트에서 가장 큰 글자 (위기감 우선) */
.hero-countdown{margin:0 0 36px;font-weight:900;line-height:.98;letter-spacing:-.045em;text-align:center;font-feature-settings:'kern'}
/* ======================================
   📊 나의 학습 현황 카드 — 회독·스트릭·마일스톤
====================================== */
.myprogress-card{margin:24px auto 8px;max-width:1052px;background:linear-gradient(135deg,#fff8e6 0%,#eef2ff 100%);border:1.5px solid #c7d2fe;border-radius:14px;padding:18px 22px;box-shadow:0 4px 14px rgba(217,119,6,.12);position:relative;overflow:hidden}
.myprogress-card::before{content:"";position:absolute;top:-20px;right:-20px;width:120px;height:120px;background:radial-gradient(circle,rgba(251,191,36,.18) 0%,transparent 70%);pointer-events:none}
.mpc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:stretch}
.mpc-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 4px;text-align:center;position:relative;z-index:1}
.mpc-cell + .mpc-cell{border-left:1px solid rgba(217,119,6,.18)}
.mpc-icon{font-size:24px;line-height:1}
.mpc-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.mpc-num{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:900;color:#78350f;line-height:1;letter-spacing:-.02em}
.mpc-lbl{font-size:11px;color:#3730a3;font-weight:700;letter-spacing:-.005em}
.mpc-sub{font-size:10.5px;color:#a16207;opacity:.85;margin-top:2px;font-weight:500;line-height:1.3}
.mpc-progress{margin-top:14px;position:relative;z-index:1}
.mpc-progress-bar{width:100%;height:8px;background:rgba(217,119,6,.15);border-radius:999px;overflow:hidden}
.mpc-progress-fill{height:100%;background:linear-gradient(90deg,#6366f1 0%,#dc2626 100%);border-radius:999px;transition:width .6s ease-out}
.mpc-progress-label{margin-top:6px;font-size:11px;color:#3730a3;text-align:center;font-weight:600}
/* 강조 상태 */
.myprogress-card.streak-hot .mpc-cell-streak{animation:streakPulse 2s ease-in-out infinite}
@keyframes streakPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.myprogress-card.streak-broken .mpc-cell-streak .mpc-num{color:#9ca3af}
.myprogress-card.streak-broken .mpc-cell-streak .mpc-icon{filter:grayscale(1);opacity:.6}
@media (max-width:720px){
  .myprogress-card{margin:14px 8px 4px;padding:14px 12px;border-radius:12px}
  .mpc-row{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .mpc-cell{padding:4px 2px;gap:4px}
  .mpc-cell + .mpc-cell{border-left:1px solid rgba(217,119,6,.15)}
  .mpc-icon{font-size:20px}
  .mpc-num{font-size:22px}
  .mpc-lbl{font-size:10px}
  .mpc-sub{font-size:9.5px;display:none}
  .mpc-progress{margin-top:10px}
  .mpc-progress-bar{height:6px}
  .mpc-progress-label{font-size:10.5px;margin-top:4px}
}
.hero-countdown .hc-time{
  color:var(--c1);
  font-family:'JetBrains Mono',monospace;
  font-feature-settings:'tnum';
  display:inline-block;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  font-size:clamp(20px, 3.6vw, 44px);
  font-weight:900;
  white-space:nowrap;
  max-width:100%;
  animation:none;
  text-shadow:none;
}
@keyframes critPulse{
  0%,100%{ opacity:1; text-shadow:0 0 8px rgba(220,38,38,.22), 0 0 0 transparent; }
  50%    { opacity:.78; text-shadow:0 0 36px rgba(220,38,38,.55), 0 0 70px rgba(220,38,38,.18); }
}
/* urgent banner 카운트다운도 동일 톤 */
.dday-time, .dday-time.tier-critical{color:var(--c1) !important;animation:none}

/* H1 — 사이트 정체성 메시지, 가장 강하게 */
.hero h1{
  margin:0 0 28px;
  font-size:clamp(34px, 7vw, 78px);    /* H1: 카운트다운보다 크게 */
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.04em;
  color:var(--ink);
  font-feature-settings:'kern';
}
.hero h1 .accent{color:var(--c1)}
.hero h1 .accent2{color:var(--c2)}
.hero .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:transparent;color:var(--c1);border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:600;margin-bottom:24px;letter-spacing:.04em;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.hero .pill::before{content:"";display:inline-block;width:6px;height:6px;background:var(--c1);border-radius:50%}
.hero .sub{margin:0 auto 28px;font-size:17px;color:var(--ink2);line-height:1.65;font-weight:500;max-width:680px;letter-spacing:-.005em}
.hero .sub b{color:var(--ink);font-weight:700;background:linear-gradient(transparent 60%,#eef2ff 60%);padding:0 2px}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:0}
.hero .cta-row .btn-lg{padding:16px 32px;font-size:16px}
/* 모바일 — 카운트다운은 clamp()으로 자동 축소 (40px까지) */
@media (max-width:720px){
  .hero{padding:30px 16px 22px;min-height:auto}
  .hero-label{margin-bottom:6px}
  .hero-countdown{margin-bottom:24px}
  .hero h1{margin-bottom:32px}
  .hero .pill{margin-bottom:14px}
  .hero .sub{font-size:14px;margin-bottom:18px}
  .hero .cta-row .btn-lg{padding:14px 24px;font-size:15px}
}

/* 컴팩트 LIVE 한 줄 */
.hero-proof{display:inline-flex;align-items:center;gap:14px;padding:10px 20px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink2);font-weight:500;flex-wrap:wrap;justify-content:center;letter-spacing:-.005em}
.hero-proof b{color:var(--ink);font-weight:700;font-family:'JetBrains Mono',monospace;font-feature-settings:'tnum'}
.hero-proof .sep{color:var(--line)}
.hero-proof .live-dot{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.16);animation:pulse 1.6s infinite}


/* 실시간 학습 현황 — nav 아래 상단 띠 */
.live-stats-wrap{background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);border-bottom:1px solid #bfdbfe}
.live-stats{max-width:1100px;margin:0 auto;padding:14px 24px;position:relative}
.live-stats-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:11px;font-weight:800;color:#4338ca;letter-spacing:.08em;text-transform:uppercase}
.live-stats-head .dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.2)}50%{box-shadow:0 0 0 7px rgba(16,185,129,.05)}}
.live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:900px){.live-grid{grid-template-columns:repeat(2,1fr)}}
.live-tile{background:#fff;border-radius:10px;padding:12px 16px;border:1px solid #dbeafe;display:flex;align-items:center;gap:14px;transition:transform .15s}
.live-tile:hover{transform:translateY(-1px)}
.live-tile .label{font-size:11px;color:var(--ink2);font-weight:600;flex-shrink:0}
.live-tile .value{font-size:24px;font-weight:900;color:#0f172a;font-family:'JetBrains Mono',monospace;line-height:1;letter-spacing:-.02em;margin-left:auto}
.live-tile .value .unit{font-size:12px;color:var(--ink2);margin-left:2px;font-weight:700}
.live-tile .value.accent{color:#6366f1}
.live-tile .value.accent2{color:#059669}
.live-tile .delta{display:none}

@media (max-width:720px){
  .live-stats{padding:10px 16px}
  .live-grid{grid-template-columns:1fr;gap:6px}
  .live-tile{padding:8px 12px}
  .live-tile .value{font-size:20px}
}


/* 과학적 근거 섹션 */
/* 홈 페이지 섹션별 배경색 — K-MOOC 식 시각 분리 */
.hero{background:radial-gradient(ellipse 92% 72% at 50% 0%,#eef2ff 0%,#f5f7fd 52%,#ffffff 100%);border-bottom:1px solid #e8ebf3}
/* 강의 맛보기 카드 (히어로 하단) */
.hero-samples{display:flex;gap:20px;max-width:1100px;margin:24px auto 0;padding:0 16px;width:100%;justify-content:center;flex-wrap:wrap}

/* ============ 내 학습 진행 카드 (홈 hero 아래) ============ */
.my-progress{max-width:1100px;margin:28px auto 0;padding:0 16px}
.mp-card{display:flex;gap:18px;align-items:stretch;background:#fff;border:1.5px solid #e5e7eb;border-radius:16px;padding:18px 22px;box-shadow:0 4px 18px rgba(0,0,0,.04);flex-wrap:wrap}
.mp-card .mp-stats{flex:1;min-width:280px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center}
.mp-card .mp-stat{text-align:center;padding:6px 4px;border-right:1px solid #e5e7eb}
.mp-card .mp-stat:last-child{border-right:none}
.mp-card .mp-stat ._lbl{font-size:10.5px;color:#64748b;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.mp-card .mp-stat ._val{font-size:22px;font-weight:900;color:#1e293b;line-height:1.2;margin-top:4px}
.mp-card .mp-stat ._val .mp-frac{color:#64748b}
.mp-card .mp-stat ._sub{font-size:10.5px;color:#64748b;margin-top:2px}
.mp-card .mp-cta{flex:0 0 280px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#1e293b,#4f46e5);color:#fff;padding:16px 20px;border-radius:12px;text-decoration:none}
.mp-card .mp-cta ._tag{font-size:10.5px;letter-spacing:.6px;font-weight:800;color:#fde047;margin-bottom:6px}
.mp-card .mp-cta ._title{font-size:16px;font-weight:900;letter-spacing:-.3px;margin-bottom:4px}
.mp-card .mp-cta ._desc{font-size:12.5px;color:#cbd5e1;margin-bottom:12px;line-height:1.5}
.mp-card .mp-cta ._btn{display:inline-flex;align-self:flex-start;background:#fde047;color:#1e293b;padding:8px 16px;border-radius:8px;font-weight:800;font-size:13px}
.mp-card .mp-cta:hover ._btn{background:#a5b4fc}
/* 비로그인 사용자 백업 안내 배너 (홈 My Progress 위) */
.mp-login-hint{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#eef2ff,#eef2ff);border:1.5px solid #a5b4fc;border-radius:12px;padding:12px 16px;margin-bottom:14px;flex-wrap:wrap}
.mp-login-hint ._msg{flex:1;min-width:240px;font-size:13.5px;color:#78350f;line-height:1.55;font-weight:600}
.mp-login-hint ._msg b{color:#1e293b;font-weight:800}
.mp-login-hint ._btn{padding:8px 18px;background:#1e293b;color:#fff;border:none;border-radius:8px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:-.01em;white-space:nowrap}
.mp-login-hint ._btn:hover{background:#162a44}
.mp-wrongnote{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fef2f2,#fee2e2);border:1.5px solid #fca5a5;border-radius:12px;padding:12px 16px;margin-bottom:14px;text-decoration:none;transition:all .15s}
.mp-wrongnote:hover{border-color:#dc2626;box-shadow:0 4px 14px rgba(220,38,38,.15)}
.mp-wrongnote ._ic{font-size:20px;flex-shrink:0}
.mp-wrongnote ._msg{flex:1;min-width:0;font-size:13.5px;color:#991b1b;line-height:1.5;font-weight:600}
.mp-wrongnote ._msg b{color:#dc2626;font-weight:900}
.mp-wrongnote ._go{flex-shrink:0;background:#dc2626;color:#fff;padding:7px 14px;border-radius:8px;font-weight:800;font-size:12.5px;white-space:nowrap}
body.dark .mp-wrongnote{background:linear-gradient(135deg,#450a0a,#7f1d1d);border-color:#991b1b}
body.dark .mp-wrongnote ._msg{color:#fecaca}
body.dark .mp-login-hint{background:linear-gradient(135deg,#451a03,#78350f);border-color:#3730a3}
body.dark .mp-login-hint ._msg{color:#c7d2fe}
body.dark .mp-login-hint ._msg b{color:#fde047}
@media (max-width:720px){
  .mp-card{padding:14px 16px}
  .mp-card .mp-stats{grid-template-columns:repeat(2,1fr);min-width:auto}
  .mp-card .mp-stat:nth-child(2){border-right:none}
  .mp-card .mp-cta{flex:1 1 100%}
  .mp-card .mp-stat ._val{font-size:18px}
}
body.dark .mp-card{background:#1e293b;border-color:#475569}
body.dark .mp-card .mp-stat{border-right-color:#475569}
body.dark .mp-card .mp-stat ._val{color:#fde047}
body.dark .mp-card .mp-stat ._lbl{color:#94a3b8}
body.dark .mp-card .mp-stat ._sub{color:#94a3b8}
body.dark .mp-card .mp-stat ._val .mp-frac{color:#94a3b8}
/* 모바일: manifesto 압도 방지 — 작게 + 접힘 */
@media (max-width:720px){
  #manifesto{padding:14px 18px !important;margin:14px 0 12px !important;cursor:pointer}
  #manifesto .manifesto-h{font-size:14px !important;margin:0 0 6px !important}
  #manifesto p, #manifesto div{font-size:11.5px !important;line-height:1.5 !important}
  #manifesto:not(.expanded){max-height:80px;overflow:hidden;position:relative}
  #manifesto:not(.expanded)::after{content:'⌄ 더 보기';position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:10.5px;color:#7c2d12;font-weight:800;background:#c7d2fe;padding:2px 10px;border-radius:10px;z-index:1}
}
.hero-sample-card{flex:1;min-width:260px;max-width:480px;border-radius:16px;padding:18px 22px;transition:transform .15s,box-shadow .15s}
.hero-sample-card:hover{transform:translateY(-2px)}
.hero-sample-card.hero-sample-easy{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:2px solid #60a5fa;box-shadow:0 6px 18px rgba(37,99,235,.12)}
.hero-sample-card.hero-sample-easy:hover{box-shadow:0 10px 26px rgba(37,99,235,.2)}
.hero-sample-card.hero-sample-easy .hs-badge{background:#60a5fa;color:#fff}
.hero-sample-card.hero-sample-easy .hs-title{color:#4f46e5}
.hero-sample-card.hero-sample-exam{background:linear-gradient(135deg,#eef2ff,#eef2ff);border:2px solid #c7d2fe;box-shadow:0 6px 18px rgba(217,119,6,.10)}
.hero-sample-card.hero-sample-exam:hover{box-shadow:0 10px 26px rgba(217,119,6,.18)}
.hero-sample-card.hero-sample-exam .hs-badge{background:#4f46e5;color:#fff}
.hero-sample-card.hero-sample-exam .hs-title{color:#3730a3}
.hero-sample-card .hs-badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:800;margin-bottom:8px}
.hero-sample-card .hs-title{font-size:15px;font-weight:800;margin-bottom:10px;line-height:1.4}
/* 모바일 컴팩트 아이콘 버튼 — PC에선 숨김, 모바일에서만 노출 */
.hs-mobile-btn{display:none}
@media (max-width:720px){
  .hero-samples{gap:10px;margin:14px auto 0;padding:0 8px}
  .hero-sample-card{padding:10px 14px;min-width:auto;flex:1}
  .hero-sample-card .hs-badge,
  .hero-sample-card .hs-title,
  .hero-sample-card audio{display:none}
  .hs-mobile-btn{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;cursor:pointer;font-family:inherit;text-align:left;color:inherit;padding:4px 0}
  .hs-mobile-icon{font-size:28px;line-height:1}
  .hs-mobile-text{font-size:12px;line-height:1.35;color:#4f46e5}
  .hs-mobile-text b{font-size:13px;font-weight:800}
  .hs-mobile-status{font-size:11px;opacity:.8;font-weight:600}
  .hero-sample-card.hero-sample-exam .hs-mobile-text{color:#7c2d12}
}
.hero-sample-card audio{width:100%;height:40px}
body.dark .hero-sample-card{background:linear-gradient(135deg,#3a3372,#1e1b4b);border-color:#a5b4fc;color:#eef2ff}
body.dark .hero-sample-card .hs-title{color:#fde047}
.wt-compare{background:linear-gradient(180deg,#f0f9ff,#ffffff);padding:36px 28px;margin:28px 0;border-radius:24px;border:1px solid #bae6fd}
body.dark .hero{background:linear-gradient(180deg,#1e1b4b,#0f172a);border-bottom-color:#3a3372}
body.dark .wt-compare{background:linear-gradient(180deg,#172554,#0f172a);border-color:#4f46e5}

.science{margin:48px -8px 32px;padding:48px 32px;background:linear-gradient(180deg,#eef2ff 0%,#eef2ff 100%);border-radius:24px;border:1px solid #fde047}
.science-head{text-align:center;margin-bottom:36px}
.science-head .pill{display:inline-block;padding:6px 14px;background:#dcfce7;color:#15803d;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:14px;letter-spacing:.02em}
.science-head h2{margin:0 0 8px;font-size:30px;font-weight:900;letter-spacing:-.02em;color:#0f172a}
.science-head p{margin:0;color:var(--ink2);font-size:15px}
.science-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:960px;margin:0 auto}
.science-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:all .15s}
.science-card:hover{border-color:#6366f1;box-shadow:0 6px 20px rgba(29,78,216,.08);transform:translateY(-2px)}
.science-card .icon{font-size:28px;margin-bottom:10px}
.science-card h3{margin:0 0 6px;font-size:17px;font-weight:800;color:#0f172a;letter-spacing:-.01em}
.science-card .num{display:block;font-size:32px;font-weight:900;color:#6366f1;font-family:'JetBrains Mono',monospace;line-height:1;margin:8px 0 10px}
.science-card p{margin:0;color:var(--ink2);font-size:13px;line-height:1.65}
.science-card cite{display:block;margin-top:10px;font-size:11px;color:#94a3b8;font-style:normal}

@media (max-width:720px){
  .science{padding:32px 18px;margin:32px -8px}
  .science-head h2{font-size:22px}
  .science-grid{grid-template-columns:1fr}
}

.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px;box-shadow:none;margin-bottom:12px}
.card h2{margin:0 0 18px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px;color:var(--ink);letter-spacing:-.012em;padding-bottom:14px;border-bottom:1px solid var(--line)}
.card h2 .num{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--ink);color:#fff;border-radius:3px;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:0}

.row{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px;font-weight:500;transition:all .15s;display:inline-flex;align-items:center;gap:8px;letter-spacing:-.005em}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--c1);color:#fff;border-color:var(--c1);font-weight:600}
.chip .cnt{font-size:11px;color:var(--ink2);font-weight:500;font-family:'JetBrains Mono',monospace}
.chip .chip-sub{font-size:11.5px;color:#64748b;font-weight:600;letter-spacing:-.005em}
.chip.on .chip-sub{color:#cbd5e1}
.chip.on .cnt{color:rgba(255,255,255,.7)}

/* 법령 칩 진도 바 */
.chip.chip-law-prog{display:flex;flex-direction:column;gap:5px;padding:10px 14px;border-radius:12px;min-width:76px;text-align:left;height:auto;white-space:normal}
.chip.chip-law-prog .clp-name{font-size:12.5px;font-weight:700;line-height:1}
.chip.chip-law-prog .clp-bar{height:4px;background:rgba(99,102,241,.12);border-radius:999px;overflow:hidden;display:block;width:100%}
.chip.chip-law-prog .clp-fill{display:block;height:100%;background:#6366f1;border-radius:999px;transition:width .5s}
.chip.chip-law-prog .clp-pct{font-size:10px;color:var(--ink2);font-weight:700}
.chip.chip-law-prog.on .clp-fill{background:#fff}
.chip.chip-law-prog.on .clp-bar{background:rgba(255,255,255,.25)}
.chip.chip-law-prog.on .clp-pct{color:rgba(255,255,255,.85)}
.chip.chip-law-prog.on .clp-name{color:#fff}
.chip.chip-locked{border-color:var(--line);background:var(--bg);opacity:.75;cursor:pointer}
.chip.chip-locked:hover{opacity:1;border-color:var(--c1b);background:var(--c1soft)}

.summary-bar{background:transparent;border:none;padding:0;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;letter-spacing:-.005em;position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:200;width:auto;max-width:90%;box-shadow:none}
.summary-bar .btn-primary{width:auto;min-width:280px;font-size:16px;padding:16px 56px;border-radius:14px;letter-spacing:-.005em;font-weight:700;white-space:nowrap;box-shadow:0 14px 36px rgba(15,23,42,.18),0 6px 14px rgba(15,23,42,.1)}
@media (max-width:720px){
  .summary-bar{bottom:14px}
  .summary-bar .btn-primary{min-width:240px;padding:14px 40px;font-size:15px}
}
body.studying .summary-bar{display:none}
/* @media (max-width:720px) summary-bar 옛 규칙 제거 — 위 새 중앙 정렬 규칙으로 대체 */
/* 본문 하단 여유 (고정 바에 가리지 않도록) */
.wrap{padding-bottom:120px !important}
@media (max-width:720px){.wrap{padding-bottom:140px !important}}
.summary-bar b{font-size:20px;font-family:'JetBrains Mono',monospace;color:#fff;font-weight:700;font-feature-settings:'tnum'}
.summary-bar .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.summary-bar .btn-primary:hover{background:var(--c1);color:#fff;border-color:var(--c1);transform:translateY(-1px)}

.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* 빈칸 학습: 4개 카드 한 줄 */
body[data-section="blank"] .mode-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:720px){
  .mode-grid,
  body[data-section="blank"] .mode-grid{grid-template-columns:1fr}
}

.mode-card{position:relative;border:1px solid var(--line);border-radius:12px;padding:24px 22px;cursor:pointer;transition:all .15s;background:#fff}
.mode-card:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.mode-card.active{border-color:var(--ink);background:#fff;box-shadow:0 0 0 2px var(--ink) inset}
/* 이모지 아이콘 숨김 — 텍스트 중심 깔끔한 디자인 (사용자 요청) */
.mode-card .icon{display:none}
.mode-card h3{
  margin:0 0 8px;
  font-size:20px;            /* 15 → 20px 키움 */
  font-weight:700;
  letter-spacing:-.02em;
  font-family:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;
  line-height:1.3;
}
.mode-card p{
  margin:0;
  font-size:14px;            /* 12 → 14px 키움 */
  color:var(--ink2);
  line-height:1.55;
  font-family:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;
  font-weight:500;
}
.mode-card.active::after{content:"✓";position:absolute;top:16px;right:16px;width:24px;height:24px;background:var(--ink);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700}
@media (max-width:720px){
  .mode-card{padding:18px 16px}
  .mode-card h3{font-size:17px}
  .mode-card p{font-size:13px}
}

.btn{padding:11px 22px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:8px;letter-spacing:-.005em}
.btn-primary{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn-primary:hover{background:#000;border-color:#000;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn-primary:disabled{background:var(--line);border-color:var(--line);color:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary:disabled{background:#cbd5e1;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px}
.btn-ghost:hover{border-color:var(--ink);background:#fff;transform:translateY(-1px)}
.btn-lg{padding:14px 26px;font-size:15px;font-weight:600}

.articles-box{max-height:520px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fafbfc}
.articles-box::-webkit-scrollbar{width:8px}
.articles-box::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.article-controls{display:flex;gap:8px;margin-bottom:10px;font-size:12px;align-items:center;flex-wrap:wrap}
.article-controls a{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:underline}
.article-controls .resume{margin-left:auto;font-size:12px;color:var(--ink2)}
.article-controls .resume b{color:var(--accent)}

.type-group{margin-bottom:10px}
.type-group-head{font-size:11px;font-weight:800;color:var(--ink2);padding:8px 6px 6px;letter-spacing:.05em;text-transform:uppercase}

.chap-block{margin:4px 0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.chap-head{display:flex;align-items:center;gap:10px;padding:10px 14px;user-select:none;transition:background .12s}
.chap-head:hover{background:#f5f7fb}
.chap-head .arrow{font-size:11px;color:var(--ink2);transition:transform .2s;width:14px;cursor:pointer;text-align:center}
.chap-head.open .arrow{transform:rotate(90deg)}
.chap-head .chk{width:18px;height:18px;border:2px solid var(--line);border-radius:5px;display:inline-grid;place-items:center;font-size:12px;font-weight:900;cursor:pointer;background:#fff;color:transparent;transition:all .12s;flex-shrink:0}
.chap-head .chk:hover{border-color:var(--accent)}
.chap-head .chk.all{background:var(--accent);border-color:var(--accent);color:#fff}
.chap-head .chk.partial{background:#fff;border-color:var(--accent);color:var(--accent)}
.chap-head .chk.partial::after{content:"●";font-size:10px}
.chap-head .name-area{flex:1;cursor:pointer;display:flex;align-items:center;gap:8px;min-width:0}
.chap-head .name{font-weight:700;font-size:14px;color:var(--ink)}
.chap-head.has-sel .name{color:var(--accent)}
.chap-head .stats{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink2)}
.chap-head .pct{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--accent);min-width:42px;text-align:right}
.chap-head .pct.done{color:var(--ok)}
.chap-progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden;width:100px}
.chap-progress .fill{height:100%;background:linear-gradient(90deg,#6366f1,#3b82f6);transition:width .3s}
.chap-progress .fill.done{background:var(--ok)}

.chap-body{padding:8px 12px 12px;border-top:1px solid var(--line);background:#fafbfc;display:none}
.chap-block.open .chap-body{display:block}
.sub-type{display:flex;align-items:center;gap:8px;padding:8px 4px 4px;font-size:12px;border-bottom:1px dashed var(--line);margin-bottom:4px}
.sub-type:not(:first-child){margin-top:8px}
.sub-chk{width:16px;height:16px;border:2px solid var(--line);border-radius:4px;display:inline-grid;place-items:center;font-size:10px;font-weight:900;cursor:pointer;background:#fff;color:transparent;transition:all .12s;flex-shrink:0}
.sub-chk:hover{border-color:var(--accent)}
.sub-chk.all{background:var(--accent);border-color:var(--accent);color:#fff}
.sub-chk.partial{border-color:var(--accent);color:var(--accent)}
.sub-label{font-weight:700;color:var(--ink);font-size:12px}
.sub-count{margin-left:auto;font-size:11px;color:var(--ink2);font-family:'JetBrains Mono',monospace}
.sub-articles{margin-bottom:4px}

.article-chip{display:inline-flex;align-items:center;gap:6px;margin:3px;padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:12px;cursor:pointer;font-weight:600;transition:all .12s;position:relative}
.article-chip:hover{border-color:var(--accent)}

.article-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.article-chip .pct{font-size:10px;color:var(--ok);font-weight:700}
.article-chip.on .pct{color:#bbf7d0}
.article-chip.completed{border-color:var(--ok);background:#ecfdf5}
.article-chip.completed::before{content:"✓";color:var(--ok);font-weight:900;margin-right:2px}
.article-chip.partial::before{content:"●";color:var(--warn);margin-right:2px;font-size:8px}

/* STUDY OVERLAY — 학습용 세피아 톤 (E-ink 영감) */
.study{position:fixed;inset:0;background:#fbf6e9;color:#2d3748;z-index:100;display:none;flex-direction:column}
.study.show{display:flex}
/* 🔴 학습 중에는 **뒤 문서가 스크롤되면 안 된다.**
   `.study` 는 position:fixed;inset:0 이라 화면을 덮지만, 그 **뒤의 홈 화면은 그대로 남아 있고**
   body 가 그 높이(1,981px)까지 늘어나 html 이 그것을 스크롤했다. 갈 곳이 「숨은 홈 화면」뿐인
   1,181px 짜리 스크롤이다 — 태블릿에서 스크롤하면 밑에 있던 SEO 글(「…미니문제로 준비」)이
   리더 위로 올라와 화면을 가렸다(2026-08-25 사용자 제보 · 실기기 사진).
   body 를 화면 높이에 묶으면 스크롤할 것이 사라진다. `.study` 는 fixed 라 영향이 없고,
   리더 안쪽 스크롤 칸(회독·빈칸 모드)도 그대로다 — 세 모드에서 확인했다. */
body.studying{height:100vh !important;max-height:100vh !important;overflow:hidden !important}
/* 🔴 **「스크롤을 막는다」에 기대지 마라 — 엔진마다 지키는 정도가 다르다.**
   위의 잠금은 Chromium 에서는 완벽하다(문서 높이 = 화면 높이 · 끝까지 밀어도 scrollY 0).
   그런데 실기기에서는 **같은 증상이 그대로 났다**(2026-08-25 · 사용자 "여전히안된대" ·
   같은 사진 두 번). 배포는 닿아 있었다 — `styles.css?v=` 가 새 주소라 캐시가 아니다.
   즉 **자를 더 대는 것이 아니라 전제를 바꿔야 한다**(R132).
   막는 대신 **뒤 문서가 자리를 아예 안 차지하게** 한다 — 그러면 막을 스크롤 자체가 없다.
   흐름에 있는 것은 실측으로 이 넷뿐이다(홈 1,804px · 푸터 94px · 띠 51px · 나머지 0).
   🔴 **고정 오버레이(모달·토스트·앱바·마이페이지)는 여기 적지 마라** — 흐름에 없어서
      문서 높이에 안 보태고, 적으면 학습 중에 떠야 할 것이 안 뜬다.
   🔴 목록은 낡는다 — `check-study-scrolllock-live.mjs` 가 **잠금을 풀고** 문서 높이를 재서
      새 흐름 컨테이너가 생기면 빨개진다(R43 — 목록이 아니라 조건으로 감시한다). */
body.studying > #home,
body.studying > #pageMock,
body.studying > #pageInterview,
body.studying > #pageBoard,
body.studying > #_promoStrip,
body.studying > footer{display:none !important}
/* 🔴 **확대(핀치 줌)하면 리더 밖이 드러난다** (2026-08-25 · 사용자 사진 · 「확대하니까 저게 뜨는거야」).
   `position:fixed` 는 **레이아웃 뷰포트**에 붙는다. 핀치로 확대하면 보이는 창(visual viewport)이
   그 안을 돌아다니는데, 아래로 밀면 리더 상자의 **바닥을 지나쳐** 뒤 캔버스가 보인다.
   위 고침으로 홈 카드는 이제 안 나온다 — 대신 **색이 다른 빈 판**이 보였다(리더는 크림 #fbf6e9,
   캔버스는 --bg 회청색).
   🔴 **확대를 막지 마라** — 사용자가 도식을 키워 보려고 하는 것이다. 막으면 기능을 뺏는다.
   그래서 **드러나는 자리를 같은 색으로 칠한다.** 그림자를 색판으로 쓰면 `.study` 자신의 칠이라
   엔진·`:has()` 지원과 무관하고, 확대 배율이 얼마든 100vmax 가 덮는다. */
.study.show{box-shadow:0 0 0 100vmax #fbf6e9}
.study-head{padding:14px 28px;background:#f5efde;border-bottom:1px solid #e3dcc7;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.study-head .info{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.study-head .info b{font-size:15px;color:#1a202c;font-weight:800}
.study-head .info span.label{font-size:13px;color:#4a5568}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#e3dcc7;color:#5d6477}
.tag.law{background:#dbeafe;color:#4338ca}
.tag.exam{background:#eef2ff;color:#3730a3}
.tag.rev{background:#fce7f3;color:#9d174d}

.study-progress{flex:1;min-width:180px;max-width:380px}
.progress-bar{height:6px;background:#e3dcc7;border-radius:3px;overflow:hidden}
.progress-bar .fill{height:100%;background:linear-gradient(90deg,#4338ca,#3b82f6);transition:width .3s}
.progress-text{font-size:11px;color:#5d6477;margin-top:4px;font-family:'JetBrains Mono',monospace}

.study-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.study-actions .study-btn{white-space:nowrap}
/* 그룹화 */
.study-actions .sa-group,.ex-header-controls .sa-group{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}
/* 🔴 좁은 화면에서는 그룹도 접힌다 — `nowrap` 때문에 그룹이 통째로 화면 밖으로 나갔다.
   실측(430px · 눈회독): .study-actions 가 445px 인데 402px 만 보여 `studySpeedInput` 이 잘렸다.
   ⚠️ `overflow-x:auto` 로는 못 고친다 — 그룹 안의 안내 팝업(.info-pop)이 같이 잘린다(R113). */
/* 🔴 강의 머리(.ex-header-controls)에도 같이 건다 — 여기만 빠져 있어서 폰에서 줄이 안 바뀌고
   그 자리의 딱지가 찌그러졌다(2026-09-08). 자를 한쪽에만 두면 다른 쪽이 조용히 깨진다. */
@media(max-width:560px){ .study-actions .sa-group,.ex-header-controls .sa-group{flex-wrap:wrap} }
.study-actions .sa-divider,.ex-header-controls .sa-divider{display:inline-block;width:1px;align-self:stretch;background:rgba(31,58,95,.18);margin:0 4px;min-height:24px}
body.dark .study-actions .sa-divider,.ex-header-controls .sa-divider{background:rgba(255,255,255,.12)}
/* 시스템 버튼 — 아이콘만 (작게) */
.study-actions .sa-icon,.ex-header-controls .sa-icon{padding:6px 9px;font-size:14px;min-width:32px;line-height:1}
.study-actions .sa-icon,.ex-header-controls .sa-icon.danger{background:#fee2e2;color:#991b1b}
.study-actions .sa-icon,.ex-header-controls .sa-icon.danger:hover{background:#fecaca}
/* 다크모드: 속도 컨트롤 + 시스템 아이콘 버튼 가독성 */
body.dark .study-speed-ctl{background:#1e293b !important;border-color:#475569 !important;color:#cbd5e1 !important}
body.dark .study-speed-ctl span{color:#94a3b8 !important}
body.dark .study-speed-ctl select,
body.dark .study-speed-ctl input{background:#0f172a !important;color:#fde047 !important;border-color:#475569 !important}
body.dark .ex-header-speed{background:#1e293b !important;border-color:#475569 !important;color:#cbd5e1 !important}
body.dark .ex-header-speed > span:first-child{color:#94a3b8 !important}
body.dark .ex-header-speed select,
body.dark .ex-header-speed input{background:#0f172a !important;color:#fde047 !important;border-color:#475569 !important}
body.dark .study-actions .sa-icon,.ex-header-controls .sa-icon.danger{background:#7f1d1d;color:#fecaca}
body.dark .study-actions .sa-icon,.ex-header-controls .sa-icon.danger:hover{background:#991b1b}
/* 모바일 시스템 ⋯ 메뉴 — 데스크탑에서는 숨김 */
.sa-sys-menu-btn{display:none}
.sa-sys-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);min-width:160px;z-index:1100;padding:6px;flex-direction:column;gap:2px}
.sa-sys-menu.open{display:flex}
.sa-sys-menu button{background:transparent;border:none;padding:10px 14px;text-align:left;font-size:13px;font-weight:700;color:#1e293b;font-family:inherit;cursor:pointer;border-radius:6px;white-space:nowrap}
.sa-sys-menu button:hover{background:#f1f5f9}
.sa-sys-menu button.danger{color:#991b1b}
.sa-sys-menu button.danger:hover{background:#fee2e2}
.study-actions .sa-group.sa-sys,.ex-header-controls .sa-group.sa-sys{position:relative}
body.dark .sa-sys-menu{background:#1e293b;border-color:#475569}
body.dark .sa-sys-menu button{color:#fde047}
body.dark .sa-sys-menu button:hover{background:#334155}
body.dark .sa-sys-menu button.danger{color:#fca5a5}
body.dark .sa-sys-menu button.danger:hover{background:#7f1d1d}
@media (max-width:720px){
  /* 시스템 그룹의 3개 아이콘 숨기고 ⋯ 메뉴 버튼만 노출 */
  .sa-group.sa-sys > .sa-icon:not(.sa-sys-menu-btn){display:none !important}
  .sa-sys-menu-btn{display:inline-flex !important;align-items:center;justify-content:center}
}
.study-btn{padding:8px 14px;border-radius:8px;background:#fff;color:#2d3748;border:1px solid #d6cfb8;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s}
.study-btn:hover{background:#f5efde;border-color:#4338ca;color:#4338ca}
.study-btn.danger:hover{background:#fee2e2;border-color:#b91c1c;color:#991b1b}

.study-body{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:0;padding:0;overflow:hidden;min-height:0}
@media (max-width:900px){.study-body{grid-template-columns:1fr;grid-template-rows:1fr auto}}
/* 원문변조(compare)에서는 '전체 듣기' 버튼 숨김 */
body[data-mode="compare"] #stPlayAll{display:none !important}
body[data-mode="compare"] #audioBaitInline{display:none !important}
body[data-mode="compare"] .study-speed-ctl{display:none !important}
body[data-mode="huidok2"] .study-speed-ctl{display:none !important}
/* explain 모드: study-head 상단바 영구 숨김 (필수 버튼들은 .ex-header-controls 로 이동) */
body[data-mode="explain"].studying .study-head{display:none !important}
/* 기초강의(explain) — explain-header 가 법령·조·제목·진척도·목차·북마크 다 제공하므로
   윗줄 study-head 의 중복 항목 숨김 (공유·종료만 study-head 에 남김) */
body[data-mode="explain"] .study-head .info,
body[data-mode="explain"] .study-head .study-progress,
body[data-mode="explain"] #stToc,
body[data-mode="explain"] #stBookmark{display:none !important}
/* 원문전체회독(full) — 음성 따라읽기 다시 활성화 (AI nova MP3 사용) */
/* 함정찾기·원문변조 — 우측 메모장 없으니 본문이 전체 폭 사용 */
body[data-mode="trap"] .study-body,
/* 🔴 **우측 독을 숨긴 모드는 트랙도 없앤다**(2026-08-27 사용자 제보 — 「태블릿 가로로 보니까
   눈회독 우측에 도식 자리 있던데 그거 빼고 본문으로 채워야 함」).
   `.study-body` 는 `1.4fr 1fr` 2단 그리드다. 독을 `display:none` 해도 **트랙은 남는다** —
   `fr` 은 내용이 아니라 남은 자리를 나누기 때문이다. 900px 아래에서만 1단이라
   **태블릿 가로(1024px)가 정확히 그 사이에 낀다.**
   🔬 고치기 전 실측(눈회독): 1024×768 본문 597px(58%) · **우측 빈칸 427px(42%)** ·
      1440×900 은 빈칸 **600px**. 도식독·메모독 둘 다 안 보이는데 자리만 남아 있었다.
   ⚠️ compare 는 원래부터 1단이었다(아래 줄). trap·explain·eyeread 가 같은 병을 앓고 있었다 —
      셋 다 바로 위에서 `.type-dock` 을 숨긴다. */
/* ⬜ **trap·explain 은 안 건드렸다** — 같은 병일 가능성이 크지만(둘 다 위에서 `.type-dock` 을
      숨긴다) 검사 하네스에서 그 두 모드가 안 그려져 **재지 못했다.** 못 잰 것을 고치면
      「고쳤다」가 아니라 「안 재고 바꿨다」다(R45). trap 은 은퇴한 모드이기도 하다. */
body[data-mode="compare"] .study-body,
body[data-mode="eyeread"] .study-body{grid-template-columns:1fr !important}
/* 빈칸·랜덤 모드 — PC는 좌(본문) / 우(입력) 분할 grid 유지, 모바일만 위·아래 stack */
@media (max-width:900px){
  body[data-mode="blank"] .study-body,
  body[data-mode="random"] .study-body{display:flex !important;flex-direction:column}
}

/* 깜빡임/따라읽기 — 기본 모드(full) + 1회독(huidok1)에서 노출. 2회독(huidok2)·빈칸·함정·비교·해설 모드는 흐름 방해라 숨김 */
body[data-mode="blank"] .blink-info,
body[data-mode="random"] .blink-info,
body[data-mode="trap"] .blink-info,
body[data-mode="compare"] .blink-info,
body[data-mode="explain"] .blink-info,
body[data-mode="huidok2"] .blink-info{display:none !important}
/* 2회독 — 음성 전체 듣기 버튼도 숨김 */
body[data-mode="huidok2"] #stPlayAll{display:none !important}
/* 효과 비활성: 빈칸·함정·비교·해설 모드 */
body[data-mode="blank"].blink-mode .law-line.current > *:not(.blank),
body[data-mode="random"].blink-mode .law-line.current > *:not(.blank),
body[data-mode="trap"].blink-mode .law-line.current > *:not(.blank),
body[data-mode="compare"].blink-mode .law-line.current > *:not(.blank),
body[data-mode="explain"].blink-mode .law-line.current > *:not(.blank){animation:none !important}
body[data-mode="blank"].follow-mode .law-line.current .ch,
body[data-mode="random"].follow-mode .law-line.current .ch,
body[data-mode="trap"].follow-mode .law-line.current .ch,
body[data-mode="compare"].follow-mode .law-line.current .ch,
body[data-mode="explain"].follow-mode .law-line.current .ch{color:inherit !important}
/* 빈칸·랜덤 모드 type-dock — 모바일에서만 위/아래 stack, PC에서는 우측 풀 높이 */
@media (max-width:900px){
  body[data-mode="blank"] .type-dock,
  body[data-mode="random"] .type-dock{border-left:none;border-top:1px solid #d6cfb8;flex:0 0 auto}
  body[data-mode="blank"] .type-input.type-pad,
  body[data-mode="random"] .type-input.type-pad{flex:none;height:auto;min-height:54px;max-height:80px;padding:14px 20px}
}
/* PC: 빈칸·랜덤 모드 우측 메모장 풀 높이 (좌·우 grid 1.4fr 1fr 구조) */
@media (min-width:901px){
  body[data-mode="blank"] .type-dock,
  body[data-mode="random"] .type-dock{
    display:flex !important;flex-direction:column !important;
    height:100% !important;min-height:0 !important;
    padding:18px 22px !important;
  }
  body[data-mode="blank"] .type-input.type-pad,
  body[data-mode="random"] .type-input.type-pad{
    flex:1 !important;height:auto !important;min-height:0 !important;max-height:none !important;
    padding:18px 22px !important;font-size:17px !important;line-height:1.7 !important;
    resize:none !important;
  }
}

/* 본문 페이지: 세피아 종이 느낌 */
.law-page{flex:1;overflow-y:auto;overflow-x:hidden;padding:40px 56px 80px;font-size:18px;line-height:2.1;font-family:'Noto Sans KR',sans-serif;font-weight:500;letter-spacing:.005em;background:#fbf6e9;word-break:keep-all;overflow-wrap:break-word;scroll-behavior:smooth}
.law-page::-webkit-scrollbar{width:10px}
.law-page::-webkit-scrollbar-thumb{background:#c9c0a3;border-radius:5px}
.law-page::-webkit-scrollbar-track{background:#f5efde}

.law-line{padding:6px 16px;margin:2px 0;border-radius:8px;border-left:3px solid transparent;transition:background .2s,border-color .2s,color .2s;max-width:1100px;word-break:keep-all;overflow-wrap:break-word;white-space:pre-wrap}
.law-line.appendix-image{white-space:normal;padding:14px 16px;margin:10px 0;border-left-color:#4f46e5;color:#1e293b}
.law-line.appendix-image.current{background:#eff6ff;border-left-color:#6366f1;color:#0f172a;box-shadow:0 2px 10px rgba(37,99,235,.12)}
.study-appendix-card{display:grid;gap:10px;max-width:min(100%,920px)}
.study-appendix-lead{font-weight:700;color:#475569;line-height:1.75}
.study-appendix-title{font-size:15px;font-weight:900;color:#0f172a;line-height:1.5}
.study-appendix-pages{display:grid;gap:12px}
.study-appendix-page{position:relative;background:#fff;border:1px solid #dbe4f0;border-radius:10px;padding:8px;box-shadow:0 4px 12px rgba(15,23,42,.08);overflow:hidden}
.study-appendix-page img{display:block;width:100%;height:auto;border-radius:6px}
.study-appendix-page-num{position:absolute;right:12px;top:12px;background:rgba(15,23,42,.76);color:#fff;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800;letter-spacing:0}
.law-line.appendix-hidden{display:none !important}
/* 별표/별지 빈칸 오버레이 */
.apx-blank-wrap{position:relative;display:inline-block;width:100%}
.apx-blank-wrap img{display:block;width:100%;height:auto;border-radius:6px}
.apx-blank-cover{position:absolute;background:var(--c1,#6d28d9);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .3s,transform .2s;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:2}
.apx-blank-cover:hover{transform:scale(1.04);box-shadow:0 3px 12px rgba(0,0,0,.35)}
.apx-blank-q{color:#fff;font-weight:900;font-size:clamp(11px,2.5vw,18px);text-shadow:0 1px 3px rgba(0,0,0,.3);pointer-events:none}
.apx-blank-cover.revealed{opacity:0;pointer-events:none;transform:scale(.9)}
.apx-blank-answer{position:absolute;background:rgba(22,163,74,.92);border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:1;opacity:0;transition:opacity .3s}
.apx-blank-answer.show{opacity:1}
.apx-blank-answer span{color:#fff;font-weight:900;font-size:clamp(10px,2.2vw,15px);text-shadow:0 1px 2px rgba(0,0,0,.2);padding:2px 6px;text-align:center;line-height:1.2}
.apx-blank-hint{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:12px;font-weight:700;color:var(--c1,#6d28d9);opacity:0;transition:opacity .3s}
.apx-blank-hint.show{opacity:1}
.apx-blank-score{text-align:center;margin:8px 0 0;font-size:13px;font-weight:700;color:var(--ink2,#64748b)}
.apx-blank-score b{color:var(--c1,#6d28d9)}
html[data-theme="dark"] .apx-blank-cover{background:var(--c3,#a78bfa);box-shadow:0 2px 8px rgba(0,0,0,.5)}
html[data-theme="dark"] .apx-blank-answer{background:rgba(22,163,74,.95)}
html[data-theme="dark"] .apx-blank-hint{color:var(--c3,#a78bfa)}
/* 앞으로 칠 줄: 흐린 회색 (시야에 잡히되 방해 안 됨) */
.law-line.upcoming{color:#a8a08a}
/* 현재 줄: 형광펜 효과 (연노랑) — 단기기억 자극 */
.law-line.current{background:#eef2ff;border-left:4px solid #4f46e5;color:#1a202c;box-shadow:0 1px 4px rgba(180,83,9,.10);font-weight:600}
/* 클릭으로 그 줄로 이동 — 호버 표시 */
.law-line:not(.header):not(.current){cursor:pointer}
.law-line:not(.header):not(.current):hover{background:#f5efde;border-left-color:#94a3b8;transition:background .12s,border-color .12s}
.law-line:not(.header):not(.current):hover::after{content:"↩ 이 줄부터 학습";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;color:#6366f1;font-weight:700;background:#dbeafe;padding:3px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.law-line{position:relative}

/* 깜빡임 모드 — 갑자기 ON/OFF (fade 없음) + "입력하세요" 안내 */
@keyframes blinkText{
  0%, 49.99% { opacity: 1; }
  50%, 99.99% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes blinkPlaceholder{
  0%, 49.99% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
  50%, 99.99% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}
body.blink-mode .law-line.current{position: relative; min-height: 60px}
body.blink-mode .law-line.current > *:not(.blank){animation: blinkText var(--blink-duration, 2s) linear infinite}
body.blink-mode .law-line.current::after{
  content: "∞ 입력하세요";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.95);
  font-size: 14px;
  font-weight: 600;
  color: #3730a3;
  letter-spacing: .05em;
  pointer-events: none;
  white-space: nowrap;
  font-style: italic;
  opacity: 0;
  animation: blinkPlaceholder var(--blink-duration, 2s) linear infinite;
  text-shadow: 0 0 12px rgba(254, 249, 195, .8);
}
body.blink-mode .law-line.current .blank{animation: none !important}

/* 눈회독 깜빡임 — 타이핑 모드는 `.law-line.current > *`(글자 span)만 깜빡이고 나머지 텍스트는
   escapeHtml한 순수 텍스트 노드라 셀렉터가 못 잡는다(눈회독은 renderLineHTML을 안 거친다 —
   activateLine 주석 참고). 그래서 줄 전체(컨테이너)에 걸어 통째로 사라졌다 나타나게 한다.
   "∞ 입력하세요" 안내도 지운다 — 눈회독엔 입력창이 없어 그 문구가 맞지 않는다. */
body[data-mode="eyeread"].blink-mode .law-line.current{
  animation: blinkText var(--blink-duration, 2s) linear infinite;
}
body[data-mode="eyeread"].blink-mode .law-line.current::after{ content: none; }

/* 따라읽기 모드 — 진한 노란 밑줄이 부드럽게 그어짐, 1초 hold 후 리셋 (JS-driven) */
body.follow-mode .law-line.current .ch{
  color: #1a202c !important;          /* 글자는 항상 검정 (어떤 모드 조합에서도 보이게) */
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 500;
  position: relative;
  display: inline;                     /* inline-block 제거 — 한국어 wrap·visibility 충돌 회피 */
  animation: none !important;
}
/* 따라읽기 활성 시: 현재 줄 전체도 또렷하게 (자식 .ch 가리는 부모 애니메이션 차단) */
body.follow-mode .law-line.current{
  opacity: 1 !important;
  animation: none !important;
}
body.follow-mode .law-line.current > *{
  opacity: 1 !important;
  animation: none !important;
}
body.follow-line-mode .law-line.current .ch::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: rgba(234, 179, 8, 0.6);   /* 진한 노랑 60% 투명도 */
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  /* 기본: transition 없음 — 클래스 제거 시 즉시 리셋 */
}
/* 그려진 상태 — JS가 .draw-on 클래스 토글, 이때만 transition 적용 */
body.follow-line-mode .law-line.current.draw-on .ch::after{
  transform: scaleX(1);
  opacity: 1;
  transition: transform .35s ease-out, opacity .15s ease-out;
  /* 청크별 stagger */
  transition-delay: calc(var(--pos, 0) * var(--follow-step, 2.20s));
}
body.follow-mode .law-line.current .blank{opacity: 1 !important}
body.follow-mode .law-line.current .blank::after{display: none !important}

/* 깜빡임 버튼 */
.study-btn.on{background:#6366f1 !important;color:#fff !important}
.blink-info{position:relative;display:inline-flex;align-items:center}
.blink-info .info-icon{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid #cbd5e1;border-radius:50%;font-size:10px;color:#64748b;font-weight:800;margin-left:4px;cursor:help;background:#fff}
.blink-info .info-icon:hover{background:#dbeafe;color:#6366f1;border-color:#6366f1}
.blink-info .info-pop{display:none;position:absolute;top:30px;right:-10px;width:300px;max-height:calc(100vh - 100px);overflow-y:auto;background:#0f172a;color:#e2e8f0;padding:12px 14px;border-radius:8px;font-size:11px;line-height:1.6;font-weight:500;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.3);scrollbar-width:thin;scrollbar-color:#475569 #1e293b}
.blink-info .info-pop::-webkit-scrollbar{width:6px}
.blink-info .info-pop::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}
.blink-info .info-pop::-webkit-scrollbar-track{background:#1e293b}
.blink-info .info-pop::before{content:"";position:absolute;top:-6px;right:14px;width:10px;height:10px;background:#0f172a;transform:rotate(45deg)}
.blink-info .info-pop b{color:#fde047}
.blink-info .info-pop .pop-x{position:absolute;top:6px;right:8px;width:28px;height:28px;border:none;background:rgba(255,255,255,.08);color:#cbd5e1;border-radius:50%;font-size:16px;font-weight:700;cursor:pointer;display:grid;place-items:center;line-height:1;padding:0}
.blink-info .info-pop .pop-x:hover{background:#dc2626;color:#fff}
@media (max-width:720px){
  .blink-info .info-pop .pop-x{width:36px;height:36px;font-size:18px;top:4px;right:4px}
}
/* info-pop 표시: 클릭(.show)으로만 토글 - hover 자동 표시는 X 버튼 안 닫힘 문제로 비활성 */
.blink-info.show .info-pop{display:block;animation:fadeIn .15s ease}
/* 속도 프리셋 — 학습 헤더 우상단 인라인 노출 (5단계 1~5) */
.speed-quick{display:inline-flex;align-items:center;gap:2px;margin-left:4px;
  background:#f5efde;border:1px solid #d6cfb8;border-radius:8px;padding:2px;
}
.speed-quick::before{
  content:"함께";font-size:11px;font-weight:700;color:#5d6477;
  padding:0 6px 0 4px;display:inline-flex;align-items:center
}
.speed-quick[data-target="blink"]::before{content:"속도"}
.speed-quick.speed-quick-line::before{content:"🌊 밑줄";color:#6366f1}
.speed-quick.speed-quick-line{background:#eff6ff;border-color:#bfdbfe;margin-left:2px}
.speed-quick.speed-quick-line button.on{background:#6366f1}
.speed-quick button{
  border:none;background:transparent;color:#5d6477;
  width:26px;min-height:28px;padding:0;border-radius:5px;cursor:pointer;
  font-size:12px;line-height:1;display:inline-grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;transition:all .12s
}
.speed-quick button:hover{background:#fff;color:#6366f1}
.speed-quick button.on{background:#6366f1;color:#fff;font-weight:800}
@media (max-width:720px){
  .speed-quick{margin-left:2px}
  .speed-quick::before{font-size:10.5px;padding:0 4px 0 3px}
  .speed-quick button{width:28px;min-height:32px;font-size:12.5px}
}
/* 속도 슬라이더 (인포 팝오버 안 — 어두운 배경) */
.speed-ctrl{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15)}
.speed-ctrl .sc-row{display:flex;align-items:center;gap:8px}
.speed-ctrl .sc-label{font-size:10px;color:#94a3b8;font-weight:700;flex-shrink:0}
.speed-ctrl .sc-value{font-size:11px;color:#fde047;font-weight:700;font-family:'JetBrains Mono',monospace;min-width:34px;text-align:right;flex-shrink:0}
.speed-ctrl .sc-input{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:#334155;border-radius:999px;outline:none;cursor:pointer;border:none;padding:0}
.speed-ctrl .sc-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#6366f1;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .1s}
.speed-ctrl .sc-input::-webkit-slider-thumb:hover,.speed-ctrl .sc-input:active::-webkit-slider-thumb{transform:scale(1.2)}
.speed-ctrl .sc-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#6366f1;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.speed-ctrl .sc-marks{display:flex;justify-content:space-between;margin-top:4px;font-size:9px;color:#64748b;font-weight:600}

/* 전체 읽기 토글 — 따라읽기 info-pop 안 */
.read-all-toggle{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);cursor:pointer;font-size:11px;color:#cbd5e1;line-height:1.5}
.read-all-toggle input[type="checkbox"]{margin:2px 0 0 0;width:18px;height:18px;cursor:pointer;accent-color:#fde047;flex-shrink:0}
.read-all-toggle b{color:#fde047;font-weight:800}
.read-all-toggle:hover{color:#fff}
/* 완료 줄: 진한 차콜 (성취감 + 가독성) */
.law-line.done{color:#2d3748}
/* 헤더 줄: 네이비 (집중 유도) */
.law-line.header{font-weight:800;color:#4f46e5;margin-top:28px;font-size:19px;letter-spacing:-.005em}
.law-line.header.upcoming{color:#9ca3af;opacity:.65}
.law-line.header.done{color:#4338ca}
.law-line.header.current{background:#dbeafe;border-left-color:#4338ca;color:#4f46e5}
/* 모의고사 오답 횟수 배지 — 조문 좌측 빨강 숫자 */
.mock-wrong-badge{display:inline-block;background:#dc2626;color:#fff;font-size:12px;font-weight:900;padding:1px 8px;border-radius:99px;margin-right:8px;vertical-align:middle;letter-spacing:-.3px;box-shadow:0 1px 3px rgba(220,38,38,.3)}
body.dark .mock-wrong-badge{background:#ef4444}
/* 미니문제 오답 배지 — 모의고사 배지(빨강 ✕N)와 **나란히, 색을 달리** 둔다.
   🔴 두 수는 뜻이 다르다: ✕N = 모의고사에서 N번 틀림 · 미N = 미니문제에서 아직 못 푸는 문항 N개 */
.wba-badge{display:inline-block;background:#7c3aed;color:#fff;font-size:12px;font-weight:900;padding:1px 8px;border-radius:99px;margin-right:8px;vertical-align:middle;letter-spacing:-.3px;box-shadow:0 1px 3px rgba(124,58,237,.3)}
body.dark .wba-badge{background:#8b5cf6}
/* 눈회독 조문 참조 팝업 — drill.html의 article-cite.js와 짝을 이루는 CSS.
   변수명은 index.html 쪽 표기(--c1-soft, 하이픈 있음)로 맞췄다 — drill.html은 --c1soft. */
.qstem-art{display:inline-block;font-size:.88em;margin-bottom:2px}
.art-link{color:var(--ink2);font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;text-decoration-color:var(--ink3);border-radius:3px;transition:background .15s}
.art-link:hover,.art-link:active{background:rgba(107,114,128,.14)}
.art-link.loading{opacity:.6;cursor:wait}
.art-box{margin:8px 0;padding:10px 12px;background:var(--c1-soft);border:1px solid var(--c1);border-radius:10px;font-size:12.5px;line-height:1.6;color:var(--ink);max-height:46vh;overflow-y:auto;overscroll-behavior:contain}
.art-box-h{font-size:12px;font-weight:800;color:var(--c1);display:flex;align-items:center;gap:5px;position:sticky;top:-10px;background:var(--c1-soft);margin:-10px -12px 4px;padding:10px 12px 5px;z-index:1}
.art-box-h .art-close{margin-left:auto;background:none;border:none;color:var(--ink3);cursor:pointer;font-size:14px;padding:0 2px}
.art-box-p{margin:3px 0;padding-left:2px}
.art-box-p.ho{padding-left:14px}
.art-box-p.mok{padding-left:28px;color:var(--ink2)}
.law-line.exam-pt{position:relative}
.law-line.exam-pt::before{content:"⭐";position:absolute;left:-26px;top:8px;font-size:11px;opacity:.7}

.ch{transition:color .08s, background-color .08s}
/* 기본 모드(full): 본문 글자 항상 검정 — 입력 색상 변화 없음 (깜빡임/따라읽기 효과만 작동) */
body[data-mode="full"] .law-line.current .ch,
body[data-mode="huidok1"] .law-line.current .ch,
body[data-mode="huidok2"] .law-line.current .ch{color:#1a202c;font-weight:600}
/* 빈칸 모드(blank/random)에서만 입력 follow 색상 동작 */
body[data-mode="blank"] .law-line.current .ch,
body[data-mode="random"] .law-line.current .ch{color:#a8a08a;font-weight:500}
body[data-mode="blank"] .law-line.current .ch.upcoming,
body[data-mode="random"] .law-line.current .ch.upcoming{color:#a8a08a;font-weight:500}
body[data-mode="blank"] .law-line.current .ch.done,
body[data-mode="random"] .law-line.current .ch.done{color:#1a202c;font-weight:700}
body[data-mode="blank"] .law-line.current .ch.wrong,
body[data-mode="random"] .law-line.current .ch.wrong{color:#7f1d1d;background:#fecaca;font-weight:700;border-radius:2px}
body[data-mode="blank"] .law-line.current .ch.cursor,
body[data-mode="random"] .law-line.current .ch.cursor{color:#6366f1;font-weight:800;background:#dbeafe;border-radius:2px;animation:chCursorBlink 1s ease-in-out infinite}
@keyframes chCursorBlink{0%,100%{box-shadow:inset 0 -2px 0 #6366f1}50%{box-shadow:inset 0 -2px 0 transparent}}
@keyframes blink{50%{opacity:.4}}

/* 인라인 빈칸 + 카운트다운 */
.blank{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:0 8px;margin:0 1px;border-bottom:2px solid #c2410c;color:#9a3412;background:#fed7aa;font-weight:700;font-family:'JetBrains Mono',monospace;border-radius:3px 3px 0 0;transition:all .2s;vertical-align:baseline}
.blank.active{background:#fdba74;box-shadow:0 0 0 2px rgba(234,88,12,.35)}
.blank.revealed{color:#15803d;border-bottom-color:#15803d;background:#bbf7d0}
.blank.typing{color:#4338ca;border-bottom-color:#4338ca;background:#bfdbfe}
.blank .cd{font-size:20px;font-weight:900;animation:cdPop .35s ease}
@keyframes cdPop{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}

/* 입력 영역 — 살짝 떠 있는 종이 느낌 */
.type-dock{flex-shrink:0;background:#f5efde;border-left:1px solid #d6cfb8;padding:16px 22px;box-shadow:-6px 0 20px rgba(120,90,30,.04);display:flex;flex-direction:column;overflow:hidden;min-height:0}
@media (max-width:900px){.type-dock{border-left:none;border-top:1px solid #d6cfb8}}
.type-input.type-pad{flex:1;min-height:0;width:100%;padding:18px 22px;font-size:17px;font-family:'Noto Sans KR',sans-serif;font-weight:500;border:2px solid #d6cfb8;border-radius:10px;background:#fff;color:#1a202c;outline:none;transition:all .15s;display:block;resize:none;line-height:1.7;overflow-y:auto}
.type-input.type-pad::placeholder{font-size:12px;font-weight:500;color:#94a3b8}
.type-input{width:100%;padding:14px 20px;font-size:18px;font-family:'Noto Sans KR',sans-serif;font-weight:500;border:2px solid #d6cfb8;border-radius:10px;background:#fff;color:#1a202c;outline:none;transition:all .15s;max-width:1100px;margin:0 auto;display:block}
.type-input:focus{border-color:#4338ca;box-shadow:0 0 0 4px rgba(30,64,175,.12)}
.type-hint{margin:8px auto 0;font-size:12px;color:#5d6477;display:flex;justify-content:space-between;max-width:1100px}

/* PRO 잠금 모드 카드 — 비프리미엄 시 흐리게 + 자물쇠 오버레이 */
.mode-card.pro-locked{position:relative}
body:not(.premium) .mode-card.pro-locked{opacity:.55;cursor:pointer}
body:not(.premium) .mode-card.pro-locked:hover{opacity:.75;border-color:#6366f1}
body:not(.premium) .mode-card.pro-locked::after{
  content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(251,191,36,.04) 0,rgba(251,191,36,.04) 6px,transparent 6px,transparent 12px);pointer-events:none;border-radius:inherit;
}
body.premium .mode-card.pro-locked{opacity:1}
body.premium .mode-card.pro-locked .pro-badge{background:linear-gradient(135deg,#10b981,#059669) !important;color:#fff !important}
body.premium .mode-card.pro-locked .pro-badge::before{content:"✓ ";font-size:11px}

/* ============================================================
   모바일 = 읽기 전용 모드 (B안)
   - 입력·빈칸·랜덤 모드 비활성 (PC 전용 뱃지)
   - 함정찾기·원문비교는 클릭만 가능 (모바일에서도 OK)
   - 학습 시작 시 자동으로 함정찾기 모드 + 따라읽기 + 전체 읽기 ON
   ============================================================ */
/* 🔴 구역이 정해진 배너는 그 구역 밖에서 숨는다(2026-08-24).
   기본이 **숨김**이다 — navTo() 가 그 구역에 들어갈 때만 열어 준다.
   기본을 노출로 두면 홈에서 한 번 번쩍이고, 그게 제일 나쁘다. */
[data-only-section]{display:none !important}
body.mobile-mode [data-only-section][data-section-hidden=""]{display:flex !important}
/* ======================================
   📲 PWA 설치 배너 (모바일 하단 슬라이드업)
====================================== */
.pwa-install-banner{
  position:fixed;left:8px;right:8px;bottom:8px;z-index:9990;
  background:#fff;border:1px solid #e5e7eb;
  border-radius:14px;padding:12px 14px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
  animation: pibSlideUp .35s cubic-bezier(.16,.84,.3,1.06);
  font-family:inherit;
}
@keyframes pibSlideUp{
  0%{transform:translateY(120%);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
.pib-icon{font-size:28px;flex-shrink:0}
.pib-body{flex:1;min-width:0;line-height:1.35}
.pib-title{font-size:13.5px;font-weight:800;color:#0f172a;letter-spacing:-.005em}
.pib-desc{font-size:11.5px;color:#5b6470;margin-top:2px}
.pib-btn{flex-shrink:0;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-family:inherit}
.pib-install{background:#4f46e5;color:#fff;padding:9px 16px;font-size:13px;min-height:38px}
.pib-install:hover{background:#4338ca}
.pib-close{background:transparent;color:#9ca3af;width:32px;height:32px;font-size:20px;display:grid;place-items:center;padding:0}
.pib-close:hover{background:#f3f4f6;border-radius:8px;color:#4b5563}
@media (min-width:721px){
  .pwa-install-banner{display:none !important}
}
@media (max-width:380px){
  .pwa-install-banner{padding:10px 12px;gap:8px}
  .pib-icon{font-size:24px}
  .pib-title{font-size:12.5px}
  .pib-desc{font-size:10.5px}
  .pib-install{padding:8px 12px;font-size:12px;min-height:36px}
}
/* iOS 설치 가이드 */
.pwa-ios-guide{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.5);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
}
.pig-card{
  background:#fff;width:100%;max-width:520px;
  border-radius:16px 16px 0 0;
  padding:24px 20px 32px;
  position:relative;text-align:center;
  animation: pigSlideUp .3s ease-out;
}
@keyframes pigSlideUp{
  0%{transform:translateY(100%)}
  100%{transform:translateY(0)}
}
.pig-close{position:absolute;top:10px;right:12px;background:transparent;border:none;font-size:24px;color:#9ca3af;cursor:pointer;width:36px;height:36px;border-radius:8px;display:grid;place-items:center}
.pig-close:hover{background:#f3f4f6;color:#374151}
.pig-icon{font-size:42px;margin-bottom:8px}
.pig-card h3{margin:6px 0 16px;font-size:18px;color:#0f172a;font-weight:800}
.pig-card ol{margin:0 0 16px;padding-left:0;list-style:none;counter-reset:pig;text-align:left;display:inline-block}
.pig-card ol li{margin:10px 0;padding-left:34px;position:relative;font-size:14px;color:#1a202c;line-height:1.5;counter-increment:pig}
.pig-card ol li::before{content:counter(pig);position:absolute;left:0;top:0;width:24px;height:24px;background:#6366f1;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;font-family:'JetBrains Mono',monospace}
.pig-card ol li b{color:#6366f1}
.pig-note{font-size:11.5px;color:#6b7280;line-height:1.5}
@media (min-width:721px){.pwa-ios-guide{display:none !important}}
/* 입력 모드 카드 비활성 (모바일) */
/* 모바일 모드 카드 — 차단 없이 외장키보드 권장 뱃지만 표시 (full/blank/random) */
body.mobile-mode .mode-card[data-mode="full"]::after,
body.mobile-mode .mode-card[data-mode="blank"]::after,
body.mobile-mode .mode-card[data-mode="random"]::after{
  content:"∞ 큰 화면 권장";
  position:absolute;bottom:10px;right:10px;top:auto;
  background:#dbeafe;color:#4338ca;padding:3px 9px;border-radius:999px;
  font-size:9.5px;font-weight:800;letter-spacing:-.005em;
  border:1px solid #bfdbfe;font-family:inherit;
}

/* 모바일 학습 화면 글씨 (세로모드) — 한 화면에 본문만 */
body.mobile-mode .law-line{font-size:17px !important;line-height:2.0 !important;padding:14px 16px !important}
body.mobile-mode .law-line.current{font-size:18.5px !important;font-weight:600 !important}

/* 출제 빈칸 — 난이도 선택기 */
.diff-picker{margin-top:8px}
.diff-btn{
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink2);font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:-.005em;transition:all .15s ease;
}
@media (max-width:480px){
  #blankDiffPicker{gap:4px !important;margin:6px 0 2px !important;flex-wrap:nowrap !important}
  #blankDiffPicker .diff-btn{padding:4px 8px;font-size:10.5px;letter-spacing:-.02em;flex:1;min-width:0;white-space:nowrap}
}
.diff-btn:hover{border-color:var(--accent);color:var(--accent)}
.diff-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 12px rgba(29,78,216,.25)}
html[data-theme="dark"] .diff-btn{
  background: rgba(167,139,250,.08);
  color: var(--ink2);
  border: 1px solid rgba(167,139,250,.22);
}
html[data-theme="dark"] .diff-btn:hover{
  background: rgba(103,232,249,.14);
  border-color: rgba(103,232,249,.5);
  color: var(--c1);
}
html[data-theme="dark"] .diff-btn.active{
  background: linear-gradient(135deg, #67e8f9, #c084fc);
  color: #0a0918;
  border: none;
  box-shadow: 0 0 0 1px rgba(192,132,252,.4), 0 0 16px rgba(192,132,252,.3);
}

/* === trap/compare/explain/eyeread 모드 — 우측 메모장 전체 디바이스 공통 숨김 (PC 포함) === */
html body[data-mode="trap"] .type-dock,
html body[data-mode="compare"] .type-dock,
html body[data-mode="explain"] .type-dock,
html body[data-mode="eyeread"] .type-dock{display:none !important}
/* 🔴 눈회독은 **키보드가 필요 없다** — 타이핑용 안내가 그대로 떠서 화면 위쪽을
   먹고 있었다("휴대폰 화면 작아 학습 불편 · 큰 화면 + 키보드 권장").
   폰에서 머리가 화면의 1/3 을 차지하던 원인 중 하나다. */
body[data-mode="eyeread"] #kbdHintBanner{display:none !important}

/* ── 찔린 자리 (W3) — 기출이 실제로 바꾼 낱말 ────────────────────────
   🔴 **함정 밑줄(노랑 실선)·빈칸과 꼴이 달라야 한다**(R111) — 형광펜 밑칠로 그린다.
      평소엔 옅게, **지금 읽는 줄에서만** 진해지고 작은 점이 붙는다.
   🔵 누르면 기출이 바꾼 말이 **그 낱말 바로 밑에** 뜬다(루비) — 원문을 안 가린다.
      원문은 이미 그 자리에 칠해져 있으니 되풀이하지 않는다(사용자: 「원문은 어차피 있잖아」). */
/* 🔴 **점선 밑줄로 바꿨다**(2026-08-27 사용자 지시 — 「함정자리에 점선 밑줄 치는 것으로」).
   그 전엔 주황 형광 밑칠이었다. 형광은 글자 뒤를 칠해 **원문 글자의 대비를 떨어뜨린다** —
   읽으라고 만든 화면에서 읽기를 방해했다.
   🔴 **낱말 도식(`.wd`)과 꼴이 겹치면 안 된다**(R111). 둘을 다르게 둔다:
      찔린 자리 = **주황 · 점선(dotted) · 2px**  ·  낱말 도식 = 남색 · 파선(dashed) · 1px.
      굵기·색·선 모양이 전부 다르므로 색을 못 가려도 갈린다.
   🔴 **`border-bottom` 이 아니라 `text-decoration` 이다.** 루비는 열리면 `rt` 가 글자 밑에
      붙는데, 테두리는 **상자 바닥**에 그려져 밑줄이 `rt` 아래로 밀려난다. 밑줄은 글자에 붙어야 한다.
   ⚠️ 사파리는 `text-decoration-style|color` 를 `-webkit-` 없이 안 먹는다 — 같이 적는다. */
ruby.tw{ruby-position:under;ruby-align:center;cursor:pointer;
  -webkit-text-decoration:underline dotted rgba(194,65,12,.72);
  text-decoration:underline dotted rgba(194,65,12,.72);
  text-decoration-thickness:2px;text-underline-offset:3px}
.law-line.current ruby.tw{
  -webkit-text-decoration:underline dotted #c2410c;
  text-decoration:underline dotted #c2410c;text-decoration-thickness:2px}
.law-line.current ruby.tw::after{content:"";display:inline-block;width:4px;height:4px;
  border-radius:50%;background:#c2410c;vertical-align:super;margin-left:2px}
ruby.tw>rt{display:none;-webkit-text-decoration:none;text-decoration:none}
ruby.tw.open{
  -webkit-text-decoration:underline dotted #c2410c !important;
  text-decoration:underline dotted #c2410c !important;
  text-decoration-thickness:3px !important;background:rgba(194,65,12,.07)}
ruby.tw.open>rt{display:ruby-text;font-size:11.5px;font-weight:700;color:#c2410c;
  line-height:1.5;padding-top:2px;letter-spacing:-.01em;text-align:center}
/* 🔴 **강의 지면은 「함정」 단추로 한 번에 다 편다** (2026-08-31 사용자 지시 —
   「강의는 함정 버튼누르면 전체다보이게해」). 눈회독은 하나씩 눌러 보지만,
   강의는 듣는 지면이라 하나씩 누를 손이 없다. 여는 모양은 `.open` 과 **글자까지 같다**(R31). */
#exOriginal.tw-all ruby.tw{
  -webkit-text-decoration:underline dotted #c2410c !important;
  text-decoration:underline dotted #c2410c !important;
  text-decoration-thickness:3px !important;background:rgba(194,65,12,.07)}
#exOriginal.tw-all ruby.tw>rt{display:ruby-text;font-size:11.5px;font-weight:700;color:#c2410c;
  line-height:1.5;padding-top:2px;letter-spacing:-.01em;text-align:center;white-space:nowrap}
/* 🔴 47개를 한꺼번에 펴면 **주석끼리 세로로 부딪힌다** — 그 모드에서만 줄을 벌린다.
   (하나씩 열 때는 벌릴 이유가 없다. 읽는 지면이 흔들린다.) */
#exOriginal.tw-all .ex-body-line,#exOriginal.tw-all .ex-chunk{line-height:2.9}
/* 눈읽기 「함정 전체」 — 강의 지면과 같은 규칙(2026-09-02 · 누를 때마다 다음 함정) */
#lawPage.tw-all ruby.tw{-webkit-text-decoration:underline dotted #c2410c !important;text-decoration:underline dotted #c2410c !important;text-decoration-thickness:3px !important;background:rgba(194,65,12,.07)}
#lawPage.tw-all ruby.tw>rt{display:ruby-text;font-size:11.5px;font-weight:700;color:#c2410c;line-height:1.5;padding-top:2px;letter-spacing:-.01em;text-align:center;white-space:nowrap}
#lawPage.tw-all .law-line{line-height:2.6}
body.dark #exOriginal.tw-all ruby.tw{
  -webkit-text-decoration:underline dotted #fb923c !important;
  text-decoration:underline dotted #fb923c !important;background:rgba(251,146,60,.1)}
body.dark #exOriginal.tw-all ruby.tw>rt{color:#fdba74}
.ex-trap-btn{margin-left:6px;padding:2px 9px;border:1px solid rgba(194,65,12,.4);border-radius:999px;
  background:transparent;color:#c2410c;font-size:11.5px;font-weight:800;cursor:pointer;line-height:1.6}
.ex-trap-btn[aria-pressed="true"]{background:#c2410c;color:#fff;border-color:#c2410c}
.ex-diag-btn{border-color:rgba(79,70,229,.4);color:#4f46e5}
body.dark .ex-diag-btn{color:#a5b4fc;border-color:rgba(165,180,252,.45)}
body.dark .ex-trap-btn{color:#fdba74;border-color:rgba(251,146,60,.45)}
body.dark .ex-trap-btn[aria-pressed="true"]{background:#c2410c;color:#fff}

body.trap-off ruby.tw{-webkit-text-decoration:none !important;text-decoration:none !important;background:none !important}
body.trap-off ruby.tw::after{content:"" !important;display:none}
body.trap-off ruby.tw>rt{display:none !important}
/* 🔴 **자리를 못 찾은 기출 오답** — 줄 밑에 **접어서**(2026-08-30).
   오답만 나열하면 뜻이 안 통해 공부가 안 된다 — **정답 문장과 쌍으로** 보여 준다.
   기본은 접혀 있다. 원문 읽는 지면이 시끄러워지면 학생이 원문을 안 읽는다. */
.tw-notes{margin:4px 0 0;font-size:11.5px;line-height:1.6}
.tw-notes>summary{display:inline-block;cursor:pointer;color:#a3573a;opacity:.75;
  padding:1px 7px;border:1px solid rgba(194,65,12,.28);border-radius:99px;list-style:none}
.tw-notes>summary::-webkit-details-marker{display:none}
.tw-notes[open]>summary{opacity:1;font-weight:600}
.twn-body{margin:6px 0 2px;padding:7px 9px;border-left:2px solid rgba(194,65,12,.35);
  background:rgba(194,65,12,.045);border-radius:0 7px 7px 0}
.twn-row{margin-bottom:5px}
.twn-o{display:block;color:#6b6459;font-size:11.5px;line-height:1.6}
.twn-x{display:inline-block;margin-top:1px;color:#c2410c;font-weight:700;font-size:12px}
/* 🔵 **회차 딱지**(2026-09-01) — 「몇 회에 실제로 이렇게 냈다」. 조각보다 이것이 세다.
   🔴 딱지는 오답보다 **약하게** 그린다 — 학생이 볼 것은 바뀐 말이지 회차가 아니다. */
.twn-rd{display:inline-block;margin-left:6px;padding:0 5px;border-radius:99px;
  border:1px solid rgba(120,113,100,.35);color:#6b6459;font-size:10.5px;font-weight:600;
  vertical-align:1px}
body.dark .twn-rd{border-color:rgba(170,163,150,.35);color:#aaa396}
.twn-memo{margin-top:5px;padding-top:5px;border-top:1px dashed rgba(194,65,12,.22);
  color:#9a9184;font-size:11px}
body.trap-off .tw-notes{display:none}
body.dark .tw-notes>summary{color:#fdba74;border-color:rgba(251,146,60,.3)}
body.dark .twn-body{border-left-color:rgba(251,146,60,.4);background:rgba(251,146,60,.06)}
body.dark .twn-o{color:#aaa396}
body.dark .twn-x{color:#fdba74}
body.dark .twn-memo{color:#8b8578}
/* 🔴 조문 메모 — 줄에 못 붙은 기출 함정이 **조문 끝**에 모인다(2026-08-31).
   줄 메모와 **눈에 띄게 갈라 둔다** — 「이 줄」이 아니라 「이 조문 어딘가」라는 뜻이다. */
.tw-art-notes{margin-top:6px;border-left:3px solid rgba(194,65,12,.35);padding-left:8px}
.tw-art-notes > summary{color:#9a3412;opacity:.9}
.twn-memo-in{color:#6b6558;font-size:12px}
body.dark .twn-memo-in{color:#8b8578}
body.dark .tw-art-notes > summary{color:#fdba74}
/* 🔴 기출 정리표 — 조문이 아니라 **과목**에 붙는 정리표다(2026-08-31).
   지면 맨 위에 접어 둔다 · 펴면 책의 그 쪽 순서 그대로. 색을 함정(주황)과 갈라 **파랑**으로 —
   「내가 틀린 자리」가 아니라 「외울 표」라는 뜻이다. */
.tw-ref{margin:0 0 10px}
.tw-ref>summary{color:#1d4ed8;border-color:rgba(29,78,216,.3)}
.tw-ref .twn-body{border-left-color:rgba(29,78,216,.4);background:rgba(29,78,216,.045);
  max-height:60vh;overflow-y:auto}
.twr-page{margin-bottom:10px}
.twr-head{font-weight:700;font-size:12px;color:#1e40af;margin-bottom:4px}
.twr-blk{margin:0 0 7px;padding-left:6px;border-left:1px dashed rgba(29,78,216,.25)}
.twr-line{font-size:12px;line-height:1.65;color:#3f3a33;white-space:pre-wrap}
.twr-memo{color:#6b6558;font-size:11.5px}
body.dark .tw-ref>summary{color:#93c5fd;border-color:rgba(147,197,253,.3)}
body.dark .tw-ref .twn-body{border-left-color:rgba(147,197,253,.4);background:rgba(147,197,253,.06)}
body.dark .twr-head{color:#93c5fd}
body.dark .twr-line{color:#cfc9bd}
body.dark .twr-memo{color:#9a9184}
body.dark .twr-blk{border-left-color:rgba(147,197,253,.25)}
/* 🔴 **읽기 지면(종이/세피아/밤)은 다크 모드와 다른 축이다** — 지면 위에 뜨는 것은
   전부 그 지면을 따라야 한다(R149). 안 걸면 밤 지면에서 **어두운 글자가 어두운 바탕에** 앉는다. */
html body[data-rdtheme="paper"] .twr-line{color:#2c2a24}
html body[data-rdtheme="paper"] .twr-memo{color:#5d5647}
html body[data-rdtheme="paper"] .twr-head{color:#1e40af}
html body[data-rdtheme="sepia"] .twr-line{color:#463a26}
html body[data-rdtheme="sepia"] .twr-memo{color:#6b5c40}
html body[data-rdtheme="sepia"] .twr-head{color:#1e3a8a}
html body[data-rdtheme="sepia"] .tw-ref .twn-body{background:rgba(70,58,38,.05)}
html body[data-rdtheme="night"] .twr-line{color:#c6c3ba}
html body[data-rdtheme="night"] .twr-memo{color:#a9a69e}
html body[data-rdtheme="night"] .twr-head{color:#93c5fd}
html body[data-rdtheme="night"] .tw-ref>summary{color:#93c5fd;border-color:rgba(147,197,253,.35)}
html body[data-rdtheme="night"] .tw-ref .twn-body{background:rgba(147,197,253,.07);border-left-color:rgba(147,197,253,.45)}
html body[data-rdtheme="night"] .twr-blk{border-left-color:rgba(147,197,253,.25)}
body.dark ruby.tw{-webkit-text-decoration:underline dotted rgba(251,146,60,.75);
  text-decoration:underline dotted rgba(251,146,60,.75)}
body.dark .law-line.current ruby.tw,body.dark ruby.tw.open{
  -webkit-text-decoration:underline dotted #fb923c;text-decoration:underline dotted #fb923c}
body.dark .law-line.current ruby.tw::after{background:#fb923c}
body.dark ruby.tw.open>rt{color:#fdba74}
/* 함정 단추 — 눈회독에서만 */
#stTrapMark{display:none}
body[data-mode="eyeread"] #stTrapMark{display:inline-flex}
/* 🔴 `.study-btn.on{background:#6366f1 !important}` 이 있어서 !important 로 맞선다.
   찔린 자리는 **함정 색(주황)**이어야 한다 — 다른 토글과 같은 파랑이면 무슨 단추인지 안 보인다. */
#stTrapMark.on{background:#c2410c !important;border-color:#c2410c !important;color:#fff !important}

/* ── 낱말 도식 (W5) — 누르면 그 낱말을 설명하는 도식이 뜬다 ──────────────
   🔴 **찔린 자리(주황 형광 밑칠)와 꼴이 달라야 한다**(R111). 두 표시가 한 줄에 같이 있다.
      찔린 자리 = 기출이 바꾼 자리(주황·형광) · 낱말 도식 = 설명이 있는 자리(남색·점선).
      점선은 「눌러 볼 것이 있다」는 웹의 오래된 약속이라 배울 것이 없다.
   🔵 지금 읽는 줄에서만 조금 진해진다 — 안 읽는 줄까지 진하면 원문이 지저분하다. */
.wd{cursor:pointer;border-bottom:1px dashed rgba(79,70,229,.5);border-radius:2px}
.law-line.current .wd{border-bottom-color:rgba(79,70,229,.85);background:rgba(79,70,229,.06)}
.wd:hover,.wd:focus-visible{background:rgba(79,70,229,.12);outline:none}
.wd:focus-visible{box-shadow:0 0 0 2px rgba(79,70,229,.35)}
body.wd-off .wd{border-bottom:none !important;background:none !important;cursor:inherit}
body.dark .wd{border-bottom-color:rgba(165,180,252,.55)}
body.dark .law-line.current .wd{border-bottom-color:#a5b4fc;background:rgba(99,102,241,.14)}
/* 낱말 도식 단추 — 눈회독에서만 */
/* 🔴 눈회독 전용이 아니다 — 원문을 보는 **모든 회독 모드**에서 뜬다
   (2026-08-25 사용자 지시 「눈회독말고 모든곳에」). 끄는 길이 없으면 껄끄럽다. */
#stWordDiag{display:none}
body.studying #stWordDiag{display:inline-flex}
#stWordDiag.on{background:#4338ca !important;border-color:#4338ca !important;color:#fff !important}

/* ── 조문 끝 확인 OX (W6-④) ──────────────────────────────────────────
   🔴 **원문처럼 보이면 안 된다** — 학생이 지문을 조문으로 읽는다.
      원문(세리프·베이지)과 다른 판형: 흰 카드 · 둥근 모서리 · 산세리프.
   🔵 문항이 없는 조문은 자리도 안 만든다(`.art-check` 는 `.on` 일 때만 보인다). */
.art-check{display:none}
.art-check.on{display:block;margin:18px 0 26px;padding:14px 16px 12px;background:#fff;
  border:1px solid #dfe3ea;border-left:4px solid #6366f1;border-radius:12px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 2px 8px rgba(30,41,59,.05)}
.art-check.ok{border-left-color:#16a34a}
.art-check.no{border-left-color:#dc2626}
.art-check .ac-head{font-size:12px;font-weight:800;color:#6366f1;letter-spacing:-.01em;margin-bottom:7px}
.art-check.ok .ac-head{color:#16a34a}
.art-check.no .ac-head{color:#dc2626}
.art-check .ac-n{font-weight:700;color:#94a3b8;margin-left:4px}
.art-check .ac-q{font-size:14.5px;line-height:1.62;color:#1f2937;letter-spacing:-.01em}
.art-check .ac-r{margin-top:8px;font-size:13px;color:#475569}
.art-check .ac-r b{font-size:15px;color:#1f2937}
.art-check .ac-btns{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.art-check .ac-b{flex:0 0 auto;min-width:64px;padding:9px 16px;font-size:15px;font-weight:800;
  border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc;color:#334155;cursor:pointer}
.art-check .ac-b:hover{background:#eef2ff;border-color:#a5b4fc}
.art-check .ac-b.ac-again{font-weight:700;font-size:13.5px;background:#fff1f2;border-color:#fecdd3;color:#9f1239}
body.ac-off .art-check{display:none !important}
body.dark .art-check.on{background:#1a1738;border-color:#3a3372}
body.dark .art-check .ac-q{color:#e5e7eb}
body.dark .art-check .ac-b{background:#312e81;border-color:#4f46e5;color:#c7d2fe}
/* 확인 OX 단추 — 눈회독에서만(조문 끝 카드가 눈회독에만 그려진다) */
#stArtCheck{display:none}
body[data-mode="eyeread"] #stArtCheck{display:inline-flex}
#stArtCheck.on{background:#16a34a !important;border-color:#16a34a !important;color:#fff !important}

/* ═══ 머리 — 깔끔·고급·안 튐·통일 (2026-08-25 사용자 지시 · A안 · **전 모드**) ═══════
   🔬 고치기 전 실측 — 430px 머리 **279px = 화면의 32%**, 320px 은 **297px = 46%**.
      보이는 단추 14개 · **단추 배경색 6가지**(진초록·주황·남색·초록·분홍·흰색).
      사용자: 「너무 크고 많아서 불편」 · 「깔끔하고 고급스럽지만 튀지않게 모두 통일」.
   🔴 **색으로 기능을 구분하지 않는다.** 전부 중립 테두리, **켜진 것만** 은은한 남색.
      원색 셋은 `#id{...!important}` 로 박혀 있어 **같은 명시도로 맞서야** 한다.
   🔴 진행 막대는 숫자(「2 / 783」)를 빼고 머리 **밑 2px 실선**으로 — 정보는 남기고 자리는 뺀다.
   🔴 **눈회독만이 아니라 타이핑·빈칸·구조파악까지 같이** 정리한다(사용자 지시).
      모드마다 밖에 둘 다섯이 다르다 — 표는 `app.js` 의 `_머리주요` 하나다(R31). */
.study-head{position:relative}
.study-head .sa-drawer{display:contents}
#hdMore{display:none}
body.studying .study-head{padding:8px 12px 0;gap:0;display:block}
body.studying .study-head .info{gap:7px;margin-bottom:7px;align-items:baseline;flex-wrap:nowrap;overflow:hidden}
body.studying .study-head .info b{font-size:14px;font-weight:800;color:#1f2937;flex:0 0 auto}
body.studying .study-head .info span.label{font-size:13px;color:#4b5563;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.studying .study-head .info .tag{font-size:10.5px;padding:1.5px 7px;border-radius:999px;border:none;font-weight:800;flex:0 0 auto}
body.studying .study-head .info .tag.law{background:rgba(79,70,229,.09);color:#4338ca}
body.studying .study-head .info .tag.exam{background:rgba(180,83,9,.10);color:#b45309}
body.studying .study-head .info .tag.rev{background:rgba(2,132,199,.10);color:#0369a1}
/* 진행 — 머리 밑에 붙는 실선 한 줄 */
body.studying .study-head .study-progress{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0;height:2px}
body.studying .study-head .study-progress .progress-bar{height:2px;border-radius:0;background:rgba(120,110,90,.14)}
body.studying .study-head .study-progress .fill{background:#6366f1}
body.studying .study-head .study-progress .progress-text{display:none}
/* 단추 — 한 줄, 같은 꼴 */
body.studying .study-head .study-actions{gap:5px;align-items:center;flex-wrap:nowrap;overflow:hidden;padding-bottom:8px}
body.studying .study-head #hdMore{margin-left:auto;flex:0 0 auto;display:inline-flex}
/* 서랍 — ⋯ 로 연다 */
body.studying .sa-drawer{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
  background:var(--card,#fdfbf4);border-bottom:1px solid rgba(120,110,90,.16);
  box-shadow:0 10px 24px rgba(60,45,15,.10);padding:10px 12px;flex-wrap:wrap;gap:6px;align-items:center}
body.studying.sa-drawer-open .sa-drawer{display:flex}
body.studying.eyeread-head-hide .sa-drawer{display:none}
body.studying .sa-drawer .sa-group:empty{display:none}
/* 🔴 깜빡임은 **눈회독에서만** 뺀다(사용자 지시 ①) — 타이핑에서는 능동 인출을 강제하는 기능이라 남긴다 */
body[data-mode="eyeread"].studying #blinkInfoWrap,
body[data-mode="eyeread"].studying .blink-speed{display:none !important}
/* 🔴 색을 하나로 — 켜진 것만 알린다. 원색이 박힌 id 들과 같은 명시도로 맞선다. */
body.studying .study-head .study-btn,
body.studying .study-head #stPlayAll,
body.studying .study-head #stTrapMark,
body.studying .study-head #stWordDiag,
body.studying .study-head #stArtCheck,
body.studying .study-head #stFontDown,
body.studying .study-head #stFontUp,
body.studying .study-head #stFontVal{
  background:transparent !important;border:1px solid rgba(120,110,90,.20) !important;color:#3f3a30 !important;
  font-size:12.5px !important;font-weight:700 !important;padding:6px 10px !important;border-radius:8px !important;
  min-height:34px !important;box-shadow:none !important;letter-spacing:-.02em !important;white-space:nowrap}
body.studying .study-head .study-btn.sa-icon{padding:6px 9px !important;min-width:34px}
body.studying .study-head .study-btn.on,
body.studying .study-head #stPlayAll.on,
body.studying .study-head #stFollow.on,
body.studying .study-head #stBlink.on,
body.studying .study-head #stTrapMark.on,
body.studying .study-head #stWordDiag.on,
body.studying .study-head #stArtCheck.on{
  background:rgba(79,70,229,.10) !important;border-color:rgba(79,70,229,.42) !important;color:#4338ca !important}
body.studying .study-head .study-btn.danger{
  color:#9f1239 !important;border-color:rgba(159,18,57,.25) !important;background:transparent !important}
body.studying .study-head .sa-group{gap:4px}
body.studying .study-head .sa-divider{display:none}
/* 속도 칸도 같은 톤으로 — 여기만 회색 상자면 그것이 튄다 */
body.studying .study-head .study-speed-ctl{background:transparent !important;border:1px solid rgba(120,110,90,.20) !important;
  color:#3f3a30 !important;border-radius:8px !important;font-size:12px !important}
/* 다크 */
body.dark.studying .study-head .info b{color:#e8e6f5}
body.dark.studying .study-head .info span.label{color:#b9b6cf}
body.dark.studying .sa-drawer{background:#151235;border-bottom-color:rgba(255,255,255,.10)}
body.dark.studying .study-head .study-btn,
body.dark.studying .study-head #stPlayAll,
body.dark.studying .study-head #stTrapMark,
body.dark.studying .study-head #stWordDiag,
body.dark.studying .study-head #stArtCheck,
body.dark.studying .study-head #stFontDown,
body.dark.studying .study-head #stFontUp,
body.dark.studying .study-head #stFontVal,
body.dark.studying .study-head .study-speed-ctl{
  border-color:rgba(255,255,255,.16) !important;color:#cfccdf !important}
body.dark.studying .study-head .study-btn.on,
body.dark.studying .study-head #stPlayAll.on,
body.dark.studying .study-head #stFollow.on,
body.dark.studying .study-head #stBlink.on,
body.dark.studying .study-head #stTrapMark.on,
body.dark.studying .study-head #stWordDiag.on,
body.dark.studying .study-head #stArtCheck.on{
  background:rgba(129,140,248,.18) !important;border-color:rgba(129,140,248,.5) !important;color:#c7d2fe !important}

/* ── 회독 배지 (W6-⑥) ────────────────────────────────────────────────
   🔴 `✕N`(모의고사 오답)·`미N`(미해결 문항)과 **뜻이 다르다** — 꼴도 색도 다르게 둔다.
      저 둘은 빨강(내 약점)이고 이건 **내가 한 일**이라 초록 테두리만 준다. */
.read-badge{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:800;line-height:1.7;letter-spacing:-.02em;
  background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;vertical-align:middle;
  font-family:system-ui,-apple-system,sans-serif}
body.dark .read-badge{background:#052e16;border-color:#166534;color:#86efac}

/* ── 오늘 읽을 것 (W6-⑤) ─────────────────────────────────────────────
   🔴 **모드 카드보다 위**에 한 줄로 둔다 — 「어디를 읽지」에서 멈추는 자리다.
   🔵 카드가 아니라 **띠**다. 카드로 만들면 모드 카드와 경쟁해서 더 헷갈린다. */
.today-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  margin:0 0 14px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(135deg,#f0fdfa,#eef2ff);border:1px solid #ccfbf1}
.today-pick .tp-l{font-size:11.5px;font-weight:800;color:#0d9488;letter-spacing:-.02em;
  flex:0 0 100%}
.today-pick .tp-t{font-size:15px;font-weight:800;color:#134e4a;letter-spacing:-.02em;flex:1 1 auto;min-width:0}
.today-pick .tp-m{font-size:12.5px;color:#475569;flex:0 0 100%;letter-spacing:-.01em}
.today-pick .tp-m b{color:#dc2626}
.today-pick .tp-b{flex:0 0 auto;padding:8px 14px;font-size:13.5px;font-weight:800;
  border:none;border-radius:9px;background:#0d9488;color:#fff;cursor:pointer;white-space:nowrap}
.today-pick .tp-b:hover{background:#0f766e}
.today-pick.lec-resume{background:linear-gradient(135deg,#fff7ed,#ffedd5)}
.today-pick.lec-resume .tp-l{color:#c2410c}
.today-pick.lec-resume .tp-t{color:#7c2d12}
.today-pick.lec-resume .tp-b{background:#ea580c}
.today-pick.lec-resume .tp-b:hover{background:#c2410c}
body.dark .today-pick.lec-resume{background:linear-gradient(135deg,#3b2a1a,#2a1f14)}
body.dark .today-pick.lec-resume .tp-t{color:#fed7aa}
body.dark .today-pick{background:linear-gradient(135deg,#042f2e,#1e1b4b);border-color:#134e4a}
body.dark .today-pick .tp-t{color:#99f6e4}
body.dark .today-pick .tp-m{color:#cbd5e1}

/* ── 눈회독 — 읽는 동안 머리를 접는다 ────────────────────────────────
   🔴 왜: 실측으로 머리가 **269px** 였다 — 880px 화면의 31%. 글을 읽는 동안
      조문 이름·진행바·툴바가 계속 자리를 먹는다. 모바일 브라우저 주소창과 같은 몸짓으로
      **아래로 읽으면 접고, 위로 올리면 곧바로 편다.** 맨 위에서는 늘 펴져 있다.
   🔴 눈회독에서만 한다 — 타이핑은 입력창이 머리와 함께 움직이면 안 된다.
   ⚠️ `position:absolute` 로 바꿔야 자리까지 없어진다(transform 만으로는 빈 칸이 남는다).
      전체화면(study-fs-active)이 쓰는 것과 같은 방식이다(R31). */
body[data-mode="eyeread"].studying.eyeread-head-hide .study-head{
  position:absolute;top:0;left:0;right:0;z-index:1000;
  transform:translateY(-100%);opacity:0;pointer-events:none;
}
body[data-mode="eyeread"].studying .study-head{transition:transform .22s ease,opacity .18s ease}
/* 머리가 접혔을 때 살짝 보이는 손잡이 — 「위로 올리면 나온다」를 알려 준다 */
body[data-mode="eyeread"].studying.eyeread-head-hide .study-body::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:38px;height:3px;border-radius:0 0 3px 3px;background:rgba(120,90,30,.22);z-index:6;pointer-events:none;
}

/* 눈회독 우측 도식 패널 — 없애기로 했다(2026-08-27 사용자 지시). 항상 접어 둔다.
   PC·모바일 다 조문 헤더의 📊 버튼(팝업, .eyeread-diagram-btn)으로 문을 하나로 뒀다(R31) —
   그 버튼과 여는 모달은 안 건드렸다. `_renderEyeReadDiagrams` 를 부르는 스크롤 추적 JS는
   그대로 두되(DOM 에 dock 이 살아 있어 부작용 없음), 화면에는 절대 안 뜨게 막는다. */
.eyeread-dock{display:none !important;flex-shrink:0;background:#f5efde;border-left:1px solid #d6cfb8;padding:16px 22px;box-shadow:-6px 0 20px rgba(120,90,30,.04);flex-direction:column;overflow-y:auto;min-height:0}
.eyeread-dock-head{font-size:13px;font-weight:800;color:#78716c;letter-spacing:.03em;margin-bottom:12px}
.eyeread-dock-empty{font-size:13px;color:#a8a29e;text-align:center;padding:24px 8px}
.eyeread-dock-art{font-size:13.5px;font-weight:700;color:#4f46e5;margin-bottom:10px}
body.dark .eyeread-dock{background:#1e1b30;border-color:#3a3372}
body.dark .eyeread-dock-head{color:#a8a29e}
body.dark .eyeread-dock-empty{color:#78716c}
body.dark .eyeread-dock-art{color:#a5b4fc}
@media (orientation:portrait){.eyeread-dock{display:none !important}}

/* 눈회독 조문 헤더의 📊 도식 버튼 — 모바일(패널 없는 화면)의 진입점 */
.eyeread-diagram-btn{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:2px 9px;border:1px solid #a5b4fc;border-radius:999px;background:#eef2ff;color:#4f46e5;font-size:12px;font-weight:700;cursor:pointer;vertical-align:middle}
.eyeread-diagram-btn:hover{background:#e0e7ff}
body.dark .eyeread-diagram-btn{background:#312e81;border-color:#4f46e5;color:#c7d2fe}

/* 눈회독 법 간 비교 버튼 */
.eyeread-cmp-btn{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:2px 9px;border:1px solid #c084fc;border-radius:999px;background:#f5f3ff;color:#7c3aed;font-size:12px;font-weight:700;cursor:pointer;vertical-align:middle}
.eyeread-cmp-btn:hover{background:#ede9fe}
body.dark .eyeread-cmp-btn{background:#3b0764;border-color:#7c3aed;color:#d8b4fe}

/* 눈회독 도식 팝업(모바일) */
/* ── 도식 창 — **떠 있고 끌어서 옮긴다** (W4 · 2026-08-25 사용자 지시) ──────────
   🔴 전에는 까만 배경(rgba(15,23,42,.72))으로 **원문을 통째로 덮었다.**
      사용자: 「도식도 이리저리 움직일수있게해서 원문보면서 도식도보고 그럼 좋을듯」
      배경을 없애고 창만 띄운다 — 뒤의 원문이 계속 읽히고, 머리를 잡아 옮긴다.
   🔴 **화면 밖으로 못 나가게 가둔다** — 놓치면 다시 못 잡는다.
   🔴 세로 폰에서도 뜬다 — 우측 도식 칸은 `orientation:portrait` 에서 통째로 숨겨진다(P3 해소). */
.eyeread-diagram-overlay{display:none;position:fixed;inset:0;background:none;z-index:9500;padding:0;pointer-events:none}
.eyeread-diagram-overlay.show,
.eyeread-diagram-overlay[style*="display: flex"]{display:flex}
.eyeread-diagram-modal{pointer-events:auto;position:absolute;background:#fffdf7;border-radius:18px;
  width:min(520px,calc(100vw - 24px));height:min(340px,46vh);min-width:220px;min-height:150px;
  border:1px solid #e7e0cc;box-shadow:0 18px 48px rgba(60,45,15,.24),0 3px 10px rgba(60,45,15,.08);
  display:flex;flex-direction:column;overflow:hidden}
.eyeread-diagram-modal .dfw-grip{width:22px;height:4px;border-radius:2px;background:#e0d8c2;flex:0 0 auto;margin-right:8px}
.eyeread-diagram-modal .dfw-rz{position:absolute;right:0;bottom:0;width:26px;height:26px;cursor:nwse-resize;touch-action:none}
.eyeread-diagram-modal .dfw-rz::after{content:"";position:absolute;right:8px;bottom:8px;width:7px;height:7px;
  border-right:2px solid #a8a29e;border-bottom:2px solid #a8a29e;border-radius:0 0 2px 0}
.dfw-grabbing,.dfw-grabbing *{cursor:grabbing !important}
.eyeread-diagram-modal-head{display:flex;align-items:center;gap:6px;padding:11px 12px 10px 14px;
  border-bottom:1px solid #ece5d3;font-weight:800;font-size:13.5px;color:#2a2620;
  background:linear-gradient(180deg,#fffdf7,#faf6ec);cursor:grab;touch-action:none;user-select:none}
#eyeReadDiagramModalTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eyeread-diagram-modal-close{border:none;background:#f1f5f9;width:30px;height:30px;border-radius:999px;font-size:14px;cursor:pointer;color:#475569}
.eyeread-diagram-modal-body{flex:1;min-height:0;overflow:auto;padding:12px 14px 18px;-webkit-overflow-scrolling:touch}
body.dark .eyeread-diagram-modal{background:#1a1738}
body.dark .eyeread-diagram-modal{background:#1a1738;border-color:#3a3372}
body.dark .eyeread-diagram-modal-head{border-color:#3a3372;color:#eef2ff;background:linear-gradient(180deg,#211d47,#1a1738)}
body.dark .eyeread-diagram-modal .dfw-grip{background:#4c46a0}
body.dark .eyeread-diagram-modal .dfw-rz::after{border-color:#6b64c8}
body.dark .eyeread-diagram-modal-close{background:#312e81;color:#c7d2fe}

/* 모바일 가로모드(landscape, 짧은 화면) — trap·compare는 PC처럼 풀폭 활용
   세로엔 짧으니 좌우로 넓게 펴서 한 눈에 본문 + 버튼 보이게 */
@media (orientation:landscape) and (max-width:1100px){
  body[data-mode="trap"] .study-body,
  body[data-mode="compare"] .study-body{
    display:block !important;
    grid-template-columns: none !important;
  }
  body[data-mode="trap"] .trap-stage,
  body[data-mode="compare"] .trap-stage,
  body[data-mode="compare"] .cf-stage{
    padding: 12px 20px 90px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: calc(100dvh - 60px) !important;
    max-height: none !important;
    width: 100% !important;
  }
  /* HUD·카드·버튼 모두 풀폭 사용 */
  body[data-mode="trap"] .trap-hud,
  body[data-mode="trap"] .trap-card,
  body[data-mode="trap"] .trap-feedback,
  body[data-mode="trap"] .trap-actions,
  body[data-mode="compare"] .trap-hud,
  body[data-mode="compare"] .trap-card,
  body[data-mode="compare"] .cf-card,
  body[data-mode="compare"] .trap-feedback,
  body[data-mode="compare"] .trap-actions{
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* 본문 폰트 — 가로 모드에서 좀 더 크게 (한 줄 가독성) */
  body[data-mode="trap"] .trap-line{font-size: 17px !important; line-height: 1.85 !important}
  /* 원문 vs 변조 — 좌우 컬럼 좌우 분할 (가로 모드라 적합) */
  body[data-mode="compare"] .compare-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* 상단 헤더 컴팩트 */
  body[data-mode="trap"] .study-head,
  body[data-mode="compare"] .study-head{padding: 8px 14px !important; gap: 8px !important}
  /* 버튼 행 — 좌측 정렬·간격 압축 */
  body[data-mode="trap"] .trap-actions,
  body[data-mode="compare"] .trap-actions{
    padding: 12px 0 !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  body[data-mode="trap"] .trap-btn,
  body[data-mode="compare"] .trap-btn{
    min-width: 120px !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    flex: 0 1 auto !important;
  }
}

/* 세로모드(portrait) — 비입력 모드만 본문만 가득. 입력 모드는 본문 위/입력 아래 분할 */
@media (orientation:portrait){
  /* trap/compare는 flex 레이아웃 유지 — study(고정 전체화면) 기준 실제 남은 높이를 flex:1로
     정확히 계산해야 헤더 높이(배너 유무 등으로 가변)와 무관하게 하단 앱바에 버튼이 가려지지 않음.
     display:block으로 바꾸면 .trap-stage의 flex:1이 무효화돼 고정 calc() 추정치에 의존하게 되어 깨짐. */
  body.mobile-mode[data-mode="explain"] .study-body{display:block !important}
  /* 세로 보기 — 학습 영역 풀폭 + 스크롤 보장 */
  .study.show{flex-direction:column !important}
  .study-body{flex:1 !important; min-height: 0 !important; display:flex; flex-direction:column}
  .law-page, .trap-stage, .cf-stage, .app-stage{
    flex:1 !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* max-height(상한)는 내용이 그보다 짧으면 아무 효과가 없어 하단 앱바에 버튼이 가려지는
       문제가 있었음(가로모드 규칙은 이미 height로 올바르게 처리 — 2459줄 참고) — 실제 height로 강제해
       내용이 넘치면 이 컨테이너 내부에서 진짜로 스크롤되도록 함 */
    height: calc(100dvh - 80px) !important;
    padding-bottom: 140px !important;
  }
  /* .study는 position:fixed;inset:0(전체화면)라 하단 앱바(별도의 고정 요소, 더 높은 z-index)의
     존재를 모르고 flex:1이 화면 끝까지 채움 — 앱바가 실제로 보이는 폭에서만 그 높이만큼 여백 확보 */
  @media (max-width:720px){
    .trap-stage, .cf-stage{ margin-bottom: calc(64px + env(safe-area-inset-bottom,0px)) !important; }
  }
  body.mobile-mode[data-mode="trap"] .type-dock,
  body.mobile-mode[data-mode="compare"] .type-dock,
  body.mobile-mode[data-mode="explain"] .type-dock{display:none !important}
  body.mobile-mode .law-frame{width:100% !important;flex:1 !important}
  /* 입력 모드(full/blank/random/huidok) — 위 본문 / 아래 입력 강제 분할 */
  body.mobile-mode[data-mode="full"] .study-body,
  body.mobile-mode[data-mode="blank"] .study-body,
  body.mobile-mode[data-mode="random"] .study-body,
  body.mobile-mode[data-mode="huidok1"] .study-body,
  body.mobile-mode[data-mode="huidok2"] .study-body{
    display:flex !important;flex-direction:column;grid-template-columns:none !important
  }
  body.mobile-mode[data-mode="full"] .type-dock,
  body.mobile-mode[data-mode="blank"] .type-dock,
  body.mobile-mode[data-mode="random"] .type-dock,
  body.mobile-mode[data-mode="huidok1"] .type-dock,
  body.mobile-mode[data-mode="huidok2"] .type-dock{
    display:flex !important;border-top:1px solid #d6cfb8;border-left:none;flex:0 0 auto;padding:10px 14px
  }
  body.mobile-mode[data-mode="full"] .law-page,
  body.mobile-mode[data-mode="blank"] .law-page,
  body.mobile-mode[data-mode="random"] .law-page,
  body.mobile-mode[data-mode="huidok1"] .law-page,
  body.mobile-mode[data-mode="huidok2"] .law-page{flex:1;min-height:0}
}

/* 가로모드(landscape) — PC와 동일한 좌우 분할 (외장키보드 학습 환경) */
@media (orientation:landscape) and (max-width:1024px){
  /* 🔴 2026-08-01 사용자 지시로 뺐다 — "자동회전하도록 코딩했었는데 그거만 하지 말라".
     가로로 눕히면 study-body 를 좌우 2단(1.4fr 1fr)으로 **자동 전환**하던 자리다.
     이제 가로에서도 세로와 같은 한 단 배치를 쓴다. 아래 글자·여백 조정은 남긴다 —
     그건 회전 동작이 아니라 짧은 화면 대응이다.
     ⚠️ 되살리려면 이 두 줄이다. 화면을 아예 잠그는 것(orientation.lock)은 **하지 마라** —
        사용자가 "아예 고정시키는 게 아니라" 라고 못박았다.
  body.mobile-mode .study-body{display:grid !important;grid-template-columns:1.4fr 1fr !important;grid-template-rows:1fr !important}
  body.mobile-mode .type-dock{display:flex !important;border-left:1px solid #d6cfb8;border-top:none;padding:10px 14px} */
  body.mobile-mode .law-line{font-size:14.5px !important;line-height:1.7 !important;padding:8px 12px !important}
  body.mobile-mode .law-line.current{font-size:15px !important}
  body.mobile-mode .law-page{padding:14px 18px 30px;font-size:14.5px;line-height:1.7}
  body.mobile-mode .type-input.type-pad{font-size:16px;padding:14px 18px;line-height:1.7}
  body.mobile-mode .study-head{padding:8px 12px;gap:8px}
  body.mobile-mode .study-head .info{font-size:12px;gap:8px}
  body.mobile-mode .study-head .info b{font-size:14px}
  body.mobile-mode .study-progress{order:99;width:100%;max-width:none;flex:0 0 100%;display:none}
  body.mobile-mode .study-btn{padding:9px 12px;font-size:12.5px;min-height:44px}
  body.mobile-mode .blink-info .info-icon{display:none}
  body.mobile-mode #stBlink,body.mobile-mode #stFollow{display:inline-flex !important}
  body.mobile-mode .type-hint{font-size:11px;margin-top:5px}
  /* 모바일 슬라이더 thumb 확대 — 30~50대 손가락 친화 */
  body.mobile-mode input[type=range]::-webkit-slider-thumb,
  body.mobile-mode .speed-ctrl .sc-input::-webkit-slider-thumb{width:22px;height:22px}
  body.mobile-mode input[type=range]::-moz-range-thumb,
  body.mobile-mode .speed-ctrl .sc-input::-moz-range-thumb{width:22px;height:22px}
  /* 모바일 체크박스 — 더 큼 */
  body.mobile-mode .read-all-toggle input[type="checkbox"]{width:20px;height:20px}
  /* explain 모드 — 가로 좌우 분할 정상 */
  body.mobile-mode .explain-body{grid-template-columns:1fr 1fr !important;grid-template-rows:1fr !important}
}

/* === 모바일 가상 키보드 대응 (visualViewport 기반) === */
/* 키보드 높이 만큼 body 하단 여백 (학습 외 페이지에서 sync·피드백 입력 시 컨텐츠 보호) */
body{padding-bottom:var(--kbd-h, 0)}
body.studying{padding-bottom:0;padding-top:0 !important;overflow:hidden} /* 학습 중에만 스크롤 잠금 + safe-area 여백 제거 (Fullscreen에서 빈공간 방지) */
/* 학습 화면은 viewport 전체 사용 — Fullscreen 시 상단 여백 제거 */
body.studying .study{top:0 !important;padding-top:0 !important}
body:not(.studying){overflow-y:auto}
/* 키보드 열려있을 때 학습 화면 — study-actions(상단 버튼들) 더 컴팩트 */
body.kbd-open .study-head{padding:4px 8px;gap:4px;flex-wrap:nowrap;overflow-x:auto}
body.kbd-open .study-head .info{font-size:10px;gap:4px;flex-shrink:0;white-space:nowrap}
body.kbd-open .study-head .info b{font-size:11px}
body.kbd-open .study-progress{display:none}
body.kbd-open .study-actions{gap:3px}
body.kbd-open .study-btn{padding:4px 7px;font-size:10px;min-height:28px}
/* 키보드 열림 시 본문 영역 축소 — 단 사용자 글씨 배율은 유지 */
body.kbd-open .law-page{padding:8px 12px 14px;font-size:calc(15px * var(--font-scale,1));line-height:1.7}
body.kbd-open .law-line{padding:4px 8px !important;font-size:calc(13px * var(--font-scale,1)) !important;line-height:1.55 !important;margin:1px 0 !important}
body.kbd-open .law-line.current{font-size:calc(13.5px * var(--font-scale,1)) !important}
/* 입력 영역(우측)을 viewport 가용 공간 안으로 — type-dock 압축 */
body.kbd-open .type-dock{padding:4px 8px}
body.kbd-open .type-input.type-pad{font-size:14px;padding:6px 10px;line-height:1.4;min-height:0;max-height:none}
body.kbd-open .type-hint{font-size:9.5px;margin-top:2px}
/* 가로모드 + 키보드 열림 — study 그리드 비율 조정 (입력 영역 우선 노출) */
/* 🔴 위 2단 전환을 전제로 비율만 바꾸던 블록 — 같이 뺐다(2026-08-01 사용자 지시)
@media (orientation:landscape){
  body.kbd-open.mobile-mode .study-body{grid-template-columns:1fr 1.4fr !important}
} */
/* 세로모드 + 키보드 열림 — type-dock 가시성 우선 (typing 모드만) */
@media (orientation:portrait){
  body.kbd-open.mobile-mode[data-mode="full"] .study-body,
  body.kbd-open.mobile-mode[data-mode="blank"] .study-body,
  body.kbd-open.mobile-mode[data-mode="random"] .study-body,
  body.kbd-open.mobile-mode[data-mode="huidok1"] .study-body,
  body.kbd-open.mobile-mode[data-mode="huidok2"] .study-body{
    display:flex !important;flex-direction:column !important
  }
  body.kbd-open.mobile-mode[data-mode="full"] .type-dock,
  body.kbd-open.mobile-mode[data-mode="blank"] .type-dock,
  body.kbd-open.mobile-mode[data-mode="random"] .type-dock,
  body.kbd-open.mobile-mode[data-mode="huidok1"] .type-dock,
  body.kbd-open.mobile-mode[data-mode="huidok2"] .type-dock{
    display:flex !important;flex:0 0 auto;border-top:1px solid #d6cfb8
  }
  body.kbd-open.mobile-mode .law-page{flex:1;min-height:80px}
}

/* 가로모드 안내 — 세로모드일 때만 노출 */
.kbd-hint-banner{display:none}
body.mobile-mode .study.show .kbd-hint-banner{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 14px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  color:#4f46e5;font-size:11.5px;font-weight:700;border-bottom:1px solid #93c5fd;
  letter-spacing:-.005em
}
/* 강의 모드(explain/examPrep)는 키보드 불필요 → 배너 자동 숨김 (헤더 중복 제거) */
body.mobile-mode[data-mode="explain"] .study.show .kbd-hint-banner,
body.mobile-mode[data-mode="examPrep"] .study.show .kbd-hint-banner{display:none}
@media (orientation:landscape){body.mobile-mode .study.show .kbd-hint-banner{display:none}}
.kbd-hint-banner .x-btn{margin-left:auto;background:transparent;border:none;color:#4f46e5;cursor:pointer;font-size:14px;font-weight:700}
/* 🔴 3초 뒤 스스로 사라진다(2026-09-06 사용자 지시) — app.js 가 .fading 을 달고 0.4초 뒤 display:none */
.kbd-hint-banner{transition:opacity .4s ease}
.kbd-hint-banner.fading{opacity:0}

/* 모바일 깜빡임 토글 — 세로·가로 모두 노출 (사용자 요청) */

/* 모바일 추천 학습 모드 배지 — 함정찾기·원문비교에 "📱 추천" */
body.mobile-mode .mode-card[data-mode="trap"]::before,
body.mobile-mode .mode-card[data-mode="compare"]::before{
  content:"📱 모바일 추천";
  position:absolute;top:10px;left:10px;
  background:#dcfce7;color:#15803d;padding:3px 9px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:-.005em;
  border:1px solid #bbf7d0;
}

.exam-hint{margin:8px auto 0;padding:8px 14px;background:#eef2ff;border-left:3px solid #4f46e5;border-radius:6px;font-size:12px;color:#78350f;max-width:1100px}
.exam-hint b{color:#3730a3}
.exam-hint code{background:#c7d2fe;padding:2px 6px;border-radius:4px;margin:0 2px;font-family:'JetBrains Mono',monospace;color:#78350f}

/* ============================================================
   함정 찾기 / 비교 모드
   ============================================================ */
/* explain 모드 진입 시 type-dock(우측 메모장) 숨김 */
body[data-mode="explain"].studying .type-dock{display:none !important}
/* explain 모드 — study-body 그리드 → 풀폭 단일 컬럼 (우측 여백 제거) */
body[data-mode="explain"].studying .study-body{grid-template-columns:1fr !important;display:flex !important;flex-direction:column}
/* ─── 빈칸(blank) 모드: 클릭공개 학습으로 전환 — 타이핑 메모장 완전 제거(전 디바이스·전 방향) ───
   빈칸 모드는 '노란 빈칸을 눌러 정답 확인'하는 클릭공개 방식이므로 우측 타이핑 메모장이 불필요.
   여러 미디어쿼리에서 blank 을 입력모드(full/random/huidok)와 함께 묶어 dock 을 노출시키므로
   그 모든 규칙을 이기도록 마지막에 최우선(높은 명시도) 오버라이드를 둔다. */
html body[data-mode="blank"] .type-dock,
html body.mobile-mode[data-mode="blank"] .type-dock,
html body.kbd-open.mobile-mode[data-mode="blank"] .type-dock{display:none !important}
html body[data-mode="blank"] .study-body,
html body.mobile-mode[data-mode="blank"] .study-body,
html body.kbd-open.mobile-mode[data-mode="blank"] .study-body{
  display:flex !important;flex-direction:column !important;
  grid-template-columns:none !important;grid-template-rows:none !important;
}
html body[data-mode="blank"] .law-page,
html body.mobile-mode[data-mode="blank"] .law-page,
html body.kbd-open.mobile-mode[data-mode="blank"] .law-page{
  flex:1 !important;min-height:0 !important;width:100% !important;max-width:none !important;
}
/* explain 모드 — 상단 헤더의 이전/건너뛰기 버튼 숨김 (조 단위 navigation 별도) */
body[data-mode="explain"].studying #stPrev,
body[data-mode="explain"].studying #stSkip{display:none !important}
/* explain 모드 — 상단 진도바·왼쪽 메타도 정리 (어차피 조 단위라 불필요) */
body[data-mode="explain"].studying .study-progress{display:none !important}

/* AI 강의 모드 stage */
.explain-stage{flex:1;display:flex;flex-direction:column;background:#fbf6e9;overflow:hidden}
.explain-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid #d6cfb8;gap:12px;flex-wrap:wrap}
.explain-header-nav{display:flex;align-items:center;gap:14px;flex:0 1 auto}
.explain-header .ex-nav-group{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.ex-header-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 모바일 세로 — 학습 헤더 컨트롤 한 줄에 다 안 들어가면 줄바꿈 + 작은 버튼 */
@media (max-width:720px){
  .explain-header{padding:8px 10px !important;flex-wrap:wrap;gap:6px}
  .explain-header-nav{flex:1;min-width:0;flex-wrap:wrap;gap:4px}
  .ex-header-controls{width:100%;justify-content:space-between;gap:4px}
  .ex-header-play{padding:8px 12px;font-size:13px;flex:1}
  .ex-header-all{padding:8px 10px;font-size:12px;flex:1}
  .ex-header-stop{padding:8px 10px;font-size:12px;min-width:36px}
  .explain-header .ex-nav{padding:6px 8px;font-size:11px}
  .explain-header .ex-meta-inline{gap:5px;font-size:11px}
  .explain-header .ex-art{font-size:14px}
  .explain-header .ex-title{font-size:12px}
  .explain-header .ex-law{font-size:10px}
  .explain-header .ex-prog{font-size:11px;margin-left:6px;padding-left:6px}
}
.ex-header-play{background:linear-gradient(135deg,#C0392B,#dc2626);color:#fff;border:none;padding:10px 22px;font-size:14px;font-weight:800;border-radius:10px;cursor:pointer;box-shadow:0 3px 10px rgba(192,57,43,.25);transition:transform .12s,box-shadow .12s;white-space:nowrap;font-family:inherit}
.ex-header-play:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(192,57,43,.35)}
.ex-header-play.playing{background:linear-gradient(135deg,#3730a3,#4338ca)}
.ex-header-all{background:linear-gradient(135deg,#15803d,#16a34a);color:#fff;border:none;padding:10px 16px;font-size:13px;font-weight:800;border-radius:10px;cursor:pointer;box-shadow:0 3px 10px rgba(21,128,61,.2);transition:transform .12s;white-space:nowrap;font-family:inherit}
.ex-header-all:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(21,128,61,.3)}
.ex-header-all.playing{background:linear-gradient(135deg,#7c2d12,#4338ca)}
.ex-header-stop{background:#475569;color:#fff;border:none;padding:10px 13px;font-size:13px;font-weight:800;border-radius:10px;cursor:pointer;transition:transform .12s;white-space:nowrap;font-family:inherit}
.ex-header-stop:hover{background:#64748b}
.ex-header-stop:disabled{opacity:.4;cursor:not-allowed}
body.dark .ex-header-play{box-shadow:0 3px 10px rgba(192,57,43,.4)}
.explain-header .ex-nav{padding:8px 14px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap}
.explain-header .ex-nav:hover{background:#6366f1;transform:translateY(-1px)}
.explain-header .ex-nav:disabled{opacity:.4;cursor:not-allowed;transform:none}
.explain-header .ex-textbook-btn{background:#4338ca}
.explain-header .ex-textbook-btn:hover{background:#3730a3}
.explain-header .ex-toc-btn{background:#0f766e}
.explain-header .ex-toc-btn:hover{background:#0d5e58}
.explain-header .ex-bm-btn{background:#3730a3}
.explain-header .ex-bm-btn:hover{background:#78350f}
.explain-header .ex-bm-btn.active{background:linear-gradient(135deg,#a5b4fc,#6366f1);color:#fff;box-shadow:0 2px 8px rgba(217,119,6,.45)}
.textbook-modal{position:fixed;inset:0;background:rgba(15,23,42,.72);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;backdrop-filter:blur(4px)}
.textbook-modal .textbook-box{background:#fbf6e9;border-radius:12px;max-width:900px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.4);overflow:hidden}
.textbook-modal .textbook-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:#4f46e5;color:#fff;border-bottom:2px solid #4338ca}
.textbook-modal .textbook-title{font-size:18px;font-weight:900;letter-spacing:-.01em}
.textbook-modal .textbook-close{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:6px 12px;font-size:14px;cursor:pointer;font-family:inherit;font-weight:700}
.textbook-modal .textbook-close:hover{background:rgba(255,255,255,.15)}
.textbook-modal .textbook-body{flex:1;overflow-y:auto;padding:24px 32px;font-size:15.5px;line-height:1.85;color:#1a202c;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;letter-spacing:-.005em}
.textbook-modal .textbook-body h1{font-size:22px;font-weight:900;color:#4f46e5;margin:24px 0 12px;padding-bottom:8px;border-bottom:2px solid #4338ca}
.textbook-modal .textbook-body h1:first-child{margin-top:0}
.textbook-modal .textbook-body h2{font-size:18px;font-weight:800;color:#3730a3;margin:22px 0 10px}
.textbook-modal .textbook-body h3{font-size:16px;font-weight:800;color:#4f46e5;margin:18px 0 8px}
.textbook-modal .textbook-body p{margin:8px 0}
.textbook-modal .textbook-body em{color:#4338ca;font-weight:700;font-style:normal}
.explain-header .ex-meta{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.explain-header .ex-meta.ex-meta-inline{flex-direction:row;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.explain-header .ex-law{font-size:12px;color:#94a3b8;font-weight:600;letter-spacing:-.005em}
.explain-header .ex-art{font-size:17px;font-weight:900;color:#1a202c;letter-spacing:-.015em}
.explain-header .ex-title{font-size:14px;color:#475569;font-weight:600}
.explain-header .ex-title:not(:empty)::before{content:"(";color:#4f46e5;margin-right:1px}
.explain-header .ex-title:not(:empty)::after{content:")";color:#4f46e5;margin-left:1px}
.explain-header .ex-prog{font-size:13px;color:#64748b;font-family:'JetBrains Mono',monospace;font-weight:700;margin-left:12px;padding-left:12px;border-left:1px solid #d6cfb8}
@media (max-width:720px){
  .explain-header .ex-meta.ex-meta-inline{gap:6px;font-size:.9em}
  .explain-header .ex-law{font-size:13px}
  .explain-header .ex-art{font-size:17px}
  .explain-header .ex-title{font-size:14px}
  .explain-header .ex-prog{font-size:12px;margin-left:6px;padding-left:8px}
}

/* 강의학습 헤더 버튼 — 회독학습(.study-btn) 톤과 동일하게 통일 (흰 배경·베이지 보더·다크 텍스트) */
.explain-header .ex-nav,
.explain-header .ex-textbook-btn,
.explain-header .ex-toc-btn,
.explain-header .ex-bm-btn,
.explain-header .ex-header-play,
.explain-header .ex-header-all,
.explain-header .ex-header-stop{
  background:#fff !important;
  color:#2d3748 !important;
  border:1px solid #d6cfb8 !important;
  box-shadow:none !important;
  font-weight:600;
}
.explain-header .ex-nav:hover,
.explain-header .ex-textbook-btn:hover,
.explain-header .ex-toc-btn:hover,
.explain-header .ex-bm-btn:hover,
.explain-header .ex-header-play:hover,
.explain-header .ex-header-all:hover,
.explain-header .ex-header-stop:hover{
  background:#f5efde !important;
  color:#4338ca !important;
  border-color:#4338ca !important;
  transform:none !important;
  box-shadow:none !important;
}
.explain-header .ex-header-play.playing,
.explain-header .ex-header-all.playing,
.explain-header .ex-bm-btn.active{
  background:#6366f1 !important;
  color:#fff !important;
  border-color:#6366f1 !important;
}
body.dark .explain-header .ex-nav,
body.dark .explain-header .ex-textbook-btn,
body.dark .explain-header .ex-toc-btn,
body.dark .explain-header .ex-bm-btn,
body.dark .explain-header .ex-header-play,
body.dark .explain-header .ex-header-all,
body.dark .explain-header .ex-header-stop{
  background:#1e293b !important;
  color:#cbd5e1 !important;
  border-color:#334155 !important;
}
body.dark .explain-header .ex-nav:hover,
body.dark .explain-header .ex-textbook-btn:hover,
body.dark .explain-header .ex-toc-btn:hover,
body.dark .explain-header .ex-bm-btn:hover,
body.dark .explain-header .ex-header-play:hover,
body.dark .explain-header .ex-header-all:hover,
body.dark .explain-header .ex-header-stop:hover{
  background:#334155 !important;
  color:#fff !important;
  border-color:#60a5fa !important;
}

.explain-body{flex:1;display:flex;flex-direction:row;gap:0;overflow:hidden}
.explain-body > .ex-pane{flex:1 1 0;min-width:0;position:relative;transition:flex 0.25s ease}
/* 접힌 패널: 32px 세로 막대 */
.explain-body > .ex-pane.collapsed{flex:0 0 36px;cursor:pointer}
.explain-body > .ex-pane.collapsed > *:not(.ex-collapsed-bar){display:none !important}
.explain-body > .ex-pane:not(.collapsed) > .ex-collapsed-bar{display:none}
.ex-collapsed-bar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:mixed;background:#4f46e5;color:#fff;font-size:12px;font-weight:800;cursor:pointer;padding:12px 0;letter-spacing:2px;user-select:none}
.ex-collapsed-bar:hover{background:#1e293b}
.ex-collapse-btn{margin-left:auto;background:#fff;border:1px solid #cbd5e1;border-radius:4px;color:#1e293b;font-size:14px;font-weight:800;width:22px;height:22px;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.ex-collapse-btn:hover{background:#1e293b;color:#fff;border-color:#1e293b}
.ex-section-tag{display:flex;align-items:center;gap:6px}
/* 도식 미사용 시 middle 숨김 (기본) */
.explain-body:not(.has-middle) #exMiddle{display:none !important}
/* 판 고르기(2026-09-03) — 자리는 flex order 로만 바뀐다. 경계선은 「첫째 판」에만 · 도식 판은 둘 중 하나가 되면 반반 */
.explain-body.lp > .ex-pane{border-right:none;border-bottom:none}
.explain-body.lp > .ex-pane[data-slot="a"]{border-right:1px solid #d6cfb8}
.explain-body.lp.has-middle > #exMiddle{flex:1 1 0;max-height:none}
.explain-body.lp > .ex-pane > .ex-section-tag[draggable="true"]{cursor:grab}
.ex-header-controls .sa-panes .ex-pane-sel{padding:4px 6px;border:1px solid #94a3b8;border-radius:6px;font-size:12px;font-weight:700;background:#fff;color:#1e293b;font-family:inherit;max-width:110px}
body.dark .ex-header-controls .sa-panes .ex-pane-sel{background:#1e293b;color:#fde047;border-color:#475569}
@media (max-width:900px) and (orientation:portrait){
  .explain-body.lp > .ex-pane[data-slot="a"]{border-right:none;border-bottom:1px solid #d6cfb8}
  .explain-body.lp.has-middle > #exMiddle{flex:1 1 0;max-height:none}
}
.explain-left{overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column}
.explain-middle{overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;background:#f5f7fa;border-right:1px solid #d6cfb8}
.explain-middle .ex-section-tag{font-size:11px;font-weight:800;color:#5d6477;letter-spacing:.06em;margin-bottom:12px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;flex-shrink:0}
.explain-middle .ex-content{flex:1;display:flex;flex-direction:column;gap:14px}
.explain-middle .lec-mermaid-box{background:#fff;border:1.5px solid #cbd5e1;border-radius:10px;padding:14px;text-align:center;margin:0}
.explain-middle .lec-mermaid-box .mmd-cap{font-size:12px;font-weight:800;color:#4f46e5;margin-bottom:10px}
.explain-middle .mermaid{background:transparent;display:flex;justify-content:center}
.explain-middle .mermaid svg{max-width:100%;height:auto}
body.dark .explain-middle{background:#0f172a;border-right-color:#3a3372}
/* 🔴 다크에서도 도식 상자는 밝게 — 도식 소스가 밝은 파스텔 fill 을 박아 놨다
   (실측: 다크 테마로 그리면 노드 대비가 1.19 까지 떨어진다 · index.html 의 _ensureMermaid 주석) */
body.dark .explain-middle .lec-mermaid-box{background:#f8fafc;border-color:#3a3372}
body.dark .explain-middle .lec-mermaid-box .mmd-cap{color:#cbd5e1}
.explain-right{overflow-y:hidden;padding:0;display:flex;flex-direction:column}
.explain-left{background:#fbf6e9;border-right:1px solid #d6cfb8}
.explain-right{background:#fff8e6}
.explain-left .ex-section-tag,
.explain-right .ex-section-tag{font-size:11px;font-weight:800;color:#5d6477;letter-spacing:.06em;margin-bottom:12px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;flex-shrink:0}
.explain-left .ex-content{font-size:14.5px;line-height:1.85;color:#1a202c;font-weight:500;flex:1}
.explain-left .ex-line{margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed rgba(214,207,184,.6)}
/* 발표자 포인터 — TTS가 현재 해설하는 줄에 부드러운 밑줄 + 좌측 강조 */
.explain-left .ex-body-line{
  position:relative;
  padding:6px 4px 8px;
  border-radius:4px;
}
/* 활성 줄 표시 안 함 — 원문은 정적 유지 */
.explain-left .ex-art-head{font-size:18px;font-weight:800;color:#4f46e5;margin:0 0 14px;padding:10px 14px;background:#dbeafe;border-radius:8px;border-left:4px solid #4f46e5;border-bottom:none;letter-spacing:-.015em}
.explain-left .ex-art-head b{color:#4f46e5}
/* 그룹 내 시행령·시행규칙 sub-header */
.explain-left .ex-sub-head{font-size:14.5px;font-weight:700;color:#475569;margin:14px 0 8px;padding:6px 12px;background:#f1f5f9;border-radius:6px;border-left:3px solid #94a3b8;letter-spacing:-.01em}
.explain-left .ex-sub-head b{color:#1e293b;margin-right:6px}
body.dark .explain-left .ex-sub-head{background:#1e293b;color:#cbd5e1;border-left-color:#475569}
body.dark .explain-left .ex-sub-head b{color:#e2e8f0}
@media (max-width:720px){
  .explain-left .ex-sub-head{font-size:13.5px;padding:5px 10px;margin:10px 0 6px}
}
.explain-left .ex-line:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.explain-right .ex-section-tag{padding:16px 28px 0;flex-shrink:0}
.explain-right .ex-content{font-size:15px;line-height:1.85;color:#1a202c;font-weight:500;flex:1;overflow-y:auto;padding:12px 28px 8px;letter-spacing:-.005em}
.explain-right .ex-content p{margin:0 0 16px}
.explain-right .ex-content p b:first-child{display:inline-block;margin-bottom:6px;font-size:13.5px}
.explain-right .ex-content b{font-weight:800}
.explain-right .ex-content b:not([style]){color:#3730a3;background:linear-gradient(transparent 60%,#eef2ff 60%);padding:0 2px}

/* TTS 컨트롤 — 하단 고정 (flex-shrink:0) */
/* 기초·시험대비 강의 하단 sticky TTS 패널 — 위쪽 .explain-header 와 중복(▶강의시작·▶▶전체·■정지)이므로 숨김.
   DOM 은 유지(MutationObserver 가 위 헤더 버튼을 미러링하는 소스로 사용) */
.explain-tts-sticky{display:none !important;flex-shrink:0;z-index:5;background:rgba(255,248,230,.96);backdrop-filter:blur(6px);padding:8px 16px;border-top:1px solid #e8dfc4}
/* 속도는 위 .ex-header-controls 에 추가됐으므로 sticky 패널은 계속 숨김 (기존대로) */
.explain-tts{padding:6px 8px;background:#fff;border:1px solid #e8dfc4;border-radius:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;box-shadow:0 1px 3px rgba(120,90,30,.06)}
.explain-tts-tip{flex-basis:100%}
.explain-tts .tts-row{display:flex;gap:6px;flex-shrink:0}
.tts-btn{padding:6px 12px;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:background .12s,transform .08s;font-family:inherit;letter-spacing:-.005em;white-space:nowrap;min-height:32px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tts-btn.tts-play{background:#6366f1;color:#fff;padding:6px 14px}
.tts-btn.tts-play:hover:not(:disabled){background:#4f46e5}
.tts-btn.tts-play.playing{background:#dc2626}
.tts-btn.tts-play.playing:hover:not(:disabled){background:#991b1b}
.tts-btn.tts-playall{background:#15803d;color:#fff;padding:6px 12px}
.tts-btn.tts-playall:hover:not(:disabled){background:#166534}
.tts-btn.tts-playall.playing{background:#dc2626}
.tts-btn.tts-playall.playing:hover:not(:disabled){background:#991b1b}
.tts-btn.tts-stop{background:#f1ebd5;color:#5d4e2a}
.tts-btn.tts-stop:hover:not(:disabled){background:#e8dfc4;color:#3d3318}
.tts-btn:disabled{opacity:.45;cursor:not-allowed}
.tts-engine-row{display:flex;gap:4px;flex-shrink:0}
.tts-engine-btn{padding:4px 9px;border-radius:20px;border:1.5px solid #d6cfb8;background:#f5efde;color:#5d4a1d;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.tts-engine-btn:hover{border-color:#a78956;background:#ede4cf}
.tts-engine-btn.active{background:#5b21b6;color:#fff;border-color:#5b21b6}
.tts-mode-tag{display:none}
/* 시스템 음성으로 넘어간 **이유**는 보여 준다(2026-09-03) — 이유 없는 폴백은 제보로도 못 고친다 */
/* 🔴 이 딱지는 flex 줄(.sa-group) 안에 있다. flex-shrink 를 안 막으면 자리가 모자랄 때
   **한 글자 폭까지 찌그러져 세로로 늘어선다**(2026-09-08 스샷 — 화면 절반을 먹었다).
   줄이지 말고 줄바꿈도 하지 말 것 — 자리가 없으면 아래 규칙이 줄을 바꾼다. */
.tts-mode-tag.web{display:inline-block;flex:0 0 auto;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
body.dark .tts-mode-tag.web{background:#3b2f0b;color:#fde68a;border-color:#a16207}
.tts-voice-row{display:flex;align-items:center;gap:6px;font-size:11.5px;flex:1 1 200px;min-width:0}
.tts-voice-row .tts-label{color:#7a6a3d;font-weight:600;flex-shrink:0;font-size:11px}
.tts-voice-row .tts-voice{flex:1;min-width:0;max-width:260px;padding:5px 8px;border:1px solid #d6cfb8;border-radius:5px;background:#fffdf6;font-size:11.5px;font-family:inherit;cursor:pointer;color:#1a202c;height:30px;text-overflow:ellipsis}
.tts-voice-row .tts-voice:focus{outline:none;border-color:#6366f1}
.tts-rate-row{display:flex;align-items:center;gap:8px;font-size:11.5px;flex:0 0 auto;padding-right:4px}
.tts-rate-row .tts-label{color:#7a6a3d;font-weight:600;flex-shrink:0;font-size:11px}
.tts-rate-row .tts-rate{width:120px;height:3px;-webkit-appearance:none;appearance:none;background:#e8dfc4;border-radius:999px;outline:none;cursor:pointer}
.tts-rate-row .tts-rate::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#6366f1;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tts-rate-row .tts-rate::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#6366f1;cursor:pointer;border:2px solid #fff}
.tts-rate-row .tts-rate-val{font-family:'JetBrains Mono',monospace;font-weight:700;color:#6366f1;min-width:38px;text-align:right;font-size:11px;flex-shrink:0}
.explain-tts-tip{font-size:10.5px;color:#8a7748;padding:3px 4px 0;line-height:1.4}
.explain-tts-tip b{color:#5d4e2a;font-weight:700}

/* TTS 음성·속도 토글 버튼 — 모바일 전용 */
.tts-tog-btn{display:none;align-items:center;justify-content:center;
  padding:0 12px;font-size:14px;min-height:42px;
  border:1px solid #c7d2fe;background:#fff;color:#5d6477;
  border-radius:8px;cursor:pointer;font-family:inherit;flex-shrink:0
}
.tts-tog-btn:hover{background:#eef2ff;color:#3730a3}
@media (max-width:768px){
  .tts-tog-btn{display:inline-flex}
  .explain-tts.expand-tts .tts-tog-btn{background:#eef2ff;color:#3730a3}
}

/* 우측 해설 — 문장 클릭 시 그 지점부터 재생 */
.ex-narrative .ex-sent{
  cursor:pointer;
  border-radius:4px;
  padding:1px 2px;
  transition:background-color .15s, box-shadow .15s
}
.ex-narrative .ex-sent:hover{background:#eef2ff;box-shadow:0 0 0 1px #c7d2fe}
/* 🔴 **지금 읽는 한 줄만** 칠한다(2026-09-07 사용자 「해당되는 음성 줄만 강조하자」).
   전에는 문단 전체(.ex-active)에 밑줄이 그어져 **어디를 읽는지 알 수 없었다.** */
.ex-narrative .ex-sent.ex-sent-now{
  background:#eef2ff;box-shadow:none;
  text-decoration:underline;
  text-decoration-color:#6366f1;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  color:#78350f;
}
body.dark .ex-narrative .ex-sent:hover{background:#451a03;box-shadow:0 0 0 1px #3730a3}
body.dark .ex-narrative .ex-sent.ex-sent-now{
  background:#312e81;box-shadow:none;
  text-decoration:underline;
  text-decoration-color:#a5b4fc;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  color:#e0e7ff;
}

/* 해설 섹션 — 각 항목별 박스 */
.ex-article-header{font-size:18px;font-weight:800;color:#1a202c;margin-bottom:12px;padding-bottom:12px;border-bottom:2px solid #c7d2fe;letter-spacing:-.015em}
.ex-intro{font-size:14px;color:#1a202c;line-height:1.8;margin-bottom:18px;padding:12px 14px;background:#eef2ff;border-radius:10px;border-left:4px solid #4f46e5}
.ex-intro b{color:#3730a3;font-weight:800}
.ex-section{margin-bottom:18px;border:1px solid #e8dfb8;border-radius:10px;overflow:hidden;background:#fff}
.ex-section-num{background:linear-gradient(135deg,#eef2ff,#c7d2fe);padding:10px 14px;font-size:14px;font-weight:800;color:#78350f;letter-spacing:-.01em;border-bottom:1px solid #c7d2fe}
.ex-section-quote{padding:10px 14px;font-size:13px;color:#475569;font-style:italic;background:#f8fafc;border-bottom:1px solid #e8dfb8;line-height:1.7;font-family:'JetBrains Mono',monospace}
.ex-section-quote::before{content:"📜 원문: ";font-style:normal;font-weight:700;color:#6366f1;font-family:inherit}
.ex-section-explain{padding:14px;font-size:14px;line-height:1.85;color:#1a202c}
.ex-section-explain b{color:#3730a3;font-weight:800;background:linear-gradient(transparent 60%,#eef2ff 60%);padding:0 2px}
.ex-section-explain .ex-tip-inline{margin-top:10px;padding:9px 12px;background:#eef2ff;border-left:3px solid #6366f1;border-radius:5px;font-size:12.5px;color:#78350f;line-height:1.65}
.ex-section-explain .ex-tip-inline b{color:#3730a3;background:transparent;padding:0}

/* 시험 포인트 — 마지막 강조 박스 */
.ex-tip{margin-top:18px;padding:14px 16px;background:linear-gradient(135deg,#eef2ff,#c7d2fe);border-radius:10px;border:1px solid #6366f1;font-size:13.5px;line-height:1.8;color:#78350f}
.ex-tip b{color:#3730a3;font-weight:800}

/* 강의자 narrative — 단락 흘려쓰기 */
.ex-narrative{font-size:15px;line-height:1.95;color:#1a202c;letter-spacing:-.005em}
.ex-narrative p{margin:0 0 14px;text-indent:0}
.ex-narrative p:first-child{font-weight:600;color:#1a202c}

/* AI 음성 업데이트 안내 배너 */
.ai-voice-status{
  position:relative;background:linear-gradient(135deg,#eef2ff 0%,#c7d2fe 100%);
  border:1px solid #6366f1;border-radius:8px;padding:9px 30px 9px 12px;margin:6px 8px 10px;
  font-size:12.5px;line-height:1.55;color:#78350f;
}
.ai-voice-status .ai-voice-detail{display:block;margin-top:3px;font-size:11.5px;color:#3730a3}
.ai-voice-status .ai-voice-close{
  position:absolute;top:4px;right:6px;background:transparent;border:none;
  font-size:18px;line-height:1;color:#78350f;cursor:pointer;padding:2px 6px;
  border-radius:4px;font-weight:700
}
.ai-voice-status .ai-voice-close:hover{background:rgba(0,0,0,.08)}
[data-theme="dark"] .ai-voice-status{
  background:linear-gradient(135deg,#451a03 0%,#78350f 100%);
  border-color:#4338ca;color:#c7d2fe
}
[data-theme="dark"] .ai-voice-status .ai-voice-detail{color:#c7d2fe}
[data-theme="dark"] .ai-voice-status .ai-voice-close{color:#c7d2fe}
[data-theme="dark"] .ai-voice-status .ai-voice-close:hover{background:rgba(255,255,255,.1)}

/* 좌측 원문 — TTS 재생 시 현재 청크 하이라이트 */
.ex-content .ex-chunk{transition:background-color .25s,padding .15s,border-radius .15s}
.ex-content .ex-chunk.ex-active{
  background:#fef08a;
  padding:0 4px;
  border-radius:3px;
  box-shadow:0 0 0 2px #6366f1;
}
/* 우측 강의 ↔ 좌측 본문 매칭 — 약한 형광펜 (강의가 지금 말하는 부분의 원문) */
.ex-content .ex-chunk.ex-chunk-spot{
  background:rgba(254, 240, 138, .55);
  padding:0 2px;
  border-radius:2px;
}
[data-theme="dark"] .ex-content .ex-chunk.ex-chunk-spot{
  background:rgba(234, 179, 8, .25);
}

/* 🔴 **폰 세로에서 강의 지면이 좌우 2단이었다**(2026-08-30 · 사용자 지시).
   390px 실측 — exLeft 173px | exMiddle 189px · 원문 칸 **145px**(한 줄에 예닐곱 글자).
   뿌리는 임계값이 아니라 **레이아웃 모델이 바뀐 것**이다 —
   `.explain-body` 는 `display:flex`(2678줄)인데 폰 규칙 셋(2441·아래·3322)이 전부
   `grid-template-columns` 를 쓴다. **flex 컨테이너에서 grid 속성은 아무 일도 안 한다.**
   옛 grid 시절 규칙이 죽은 채로 남아 「고쳐져 있다」처럼 보였다(R114 — 없는 규칙은 grep 에 안 걸린다).
   🔵 **가로(landscape)는 그대로 둔다** — 2412줄이 태블릿 가로용이고 거기선 2단이 맞다.
      그래서 `orientation:portrait` 로 못 박는다(폰 가로 844×390 은 세로 높이가 없다).
   🔴 새 원고는 평균 6,051자다 — 145px 칸에 넣으면 못 읽는다. */
@media (max-width:900px) and (orientation:portrait){
  .explain-body{flex-direction:column}
  .explain-body > .ex-pane{flex:1 1 0;min-width:0;min-height:0}
  .explain-body.has-middle > #exMiddle{flex:0 1 auto;max-height:40vh}
  .explain-body > .ex-pane + .ex-pane{border-top:1px solid #d6cfb8}
}

/* 모바일 — 위아래 분할 */
@media (max-width:900px){
  .explain-body{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .explain-body.has-middle{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}
  .explain-body.has-middle .explain-middle{max-height:40vh;border-right:none;border-bottom:1px solid #d6cfb8}
  .explain-left{border-right:none;border-bottom:1px solid #d6cfb8}
  .explain-header .ex-nav{padding:7px 10px;font-size:12px}
  .explain-header .ex-art{font-size:16px}
  .explain-left .ex-content{font-size:14px;line-height:1.85}
  .explain-right .ex-content{font-size:13.5px;line-height:1.75}
}

.trap-stage{flex:1;overflow-y:auto;padding:32px 48px;background:#fbf6e9}
/* 세로 모바일: 하단 앱탭바(약 62px)가 트랩·비교·해설 스크롤 영역 마지막 버튼을 가리는 문제 — 여백 확보 */
@media (max-width:720px) and (orientation:portrait){
  .trap-stage,
  .cf-stage,
  .app-stage,
  .law-page{ padding-bottom: calc(80px + env(safe-area-inset-bottom,0px)) !important; }
}
.trap-stage::-webkit-scrollbar{width:10px}
.trap-stage::-webkit-scrollbar-thumb{background:#c9c0a3;border-radius:5px}

.trap-hud{max-width:1100px;margin:0 auto 18px;display:flex;align-items:center;gap:18px;padding:14px 20px;background:#fff;border:1px solid #e3dcc7;border-radius:12px;flex-wrap:wrap}
.trap-hud .stat{display:flex;flex-direction:column;font-size:11px;color:#5d6477;font-weight:600}
.trap-hud .stat b{font-size:22px;font-weight:900;color:#1a202c;font-family:'JetBrains Mono',monospace;line-height:1}
.trap-hud .stat.score b{color:#6366f1}
.trap-hud .stat.acc b{color:#059669}
.trap-hud .stat.miss b{color:#dc2626}
.trap-hud .progress{flex:1;min-width:120px;height:6px;background:#e3dcc7;border-radius:3px;overflow:hidden}
.trap-hud .progress .fill{height:100%;background:linear-gradient(90deg,#6366f1,#3b82f6);transition:width .3s}

.trap-card{max-width:1100px;margin:0 auto 18px;background:#fff;border:1px solid #e3dcc7;border-radius:14px;padding:24px 28px;box-shadow:0 2px 8px rgba(120,90,30,.05)}
.trap-card .head{font-size:13px;color:#4f46e5;font-weight:800;margin-bottom:12px;letter-spacing:-.005em}
.trap-card .head .law{color:#5d6477;font-weight:600}
.trap-line{font-size:19px;line-height:2;color:#2d3748;font-weight:500;letter-spacing:.005em;word-break:keep-all}
.trap-line .word{display:inline-block;padding:1px 4px;margin:0 1px;border-radius:5px;cursor:pointer;transition:all .12s;border:2px solid transparent}
.trap-line .word:hover{background:#eef2ff}
.trap-line .word.suspect{background:#fee2e2;border-color:#dc2626;color:#991b1b;font-weight:700}
.trap-line .word.correct{background:#bbf7d0;border-color:#15803d;color:#14532d;font-weight:800}
.trap-line .word.wrong{background:#fecaca;border-color:#dc2626;color:#7f1d1d;font-weight:800;text-decoration:line-through}
.trap-line .word.missed{background:#eef2ff;border-color:#4f46e5;color:#78350f;font-weight:800;animation:missedPulse .8s 2}
@keyframes missedPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.trap-feedback{max-width:1100px;margin:0 auto 12px;padding:14px 20px;border-radius:10px;font-size:14px;display:none;align-items:center;gap:10px}
.trap-feedback.show{display:flex}
.trap-feedback.ok{background:#dcfce7;border:1px solid #86efac;color:#14532d}
.trap-feedback.ng{background:#fee2e2;border:1px solid #fca5a5;color:#7f1d1d}
.trap-feedback .em{font-size:24px}
.trap-feedback b{font-weight:900}
.trap-feedback .answer{margin-left:auto;font-size:13px}
.trap-feedback .answer code{background:rgba(255,255,255,.6);padding:2px 8px;border-radius:4px;margin:0 4px;font-family:'JetBrains Mono',monospace;font-weight:700}

.trap-actions{max-width:1100px;margin:0 auto;display:flex;gap:10px;padding:14px 0 30px;justify-content:center}
.trap-btn{padding:14px 32px;border-radius:10px;border:none;font-size:15px;font-weight:800;cursor:pointer;transition:all .12s}
.trap-btn.confirm{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;box-shadow:0 4px 14px rgba(29,78,216,.25)}
.trap-btn.confirm:hover{filter:brightness(1.1)}
.trap-btn.confirm:disabled{background:#cbd5e1;cursor:not-allowed;box-shadow:none}
.trap-btn.next{background:#10b981;color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.25)}
.trap-btn.next:hover{filter:brightness(1.1)}
.trap-btn.skip{background:#f1f5f9;color:#64748b}

/* 별표·별지 집중 모드 */
.app-stage{flex:1;overflow-y:auto;padding:32px 32px 80px;background:#fbf6e9;display:grid;grid-template-columns:280px 1fr;gap:20px}
@media (max-width:900px){.app-stage{grid-template-columns:1fr}}
.app-list{background:#fff;border:1px solid #e3dcc7;border-radius:12px;padding:14px;max-height:calc(100vh - 180px);overflow-y:auto;position:sticky;top:0}
.app-list h4{margin:0 0 10px;font-size:13px;color:#1a202c;font-weight:800}
.app-list .group{margin-bottom:14px}
.app-list .group-name{font-size:11px;color:#5d6477;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;padding:6px 8px;background:#f5efde;border-radius:6px}
.app-list .item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .12s}
.app-list .item:hover{background:#f5efde}
.app-list .item.active{background:#dbeafe;color:#4f46e5;font-weight:700}
.app-list .item .badge{margin-left:auto;font-size:10px}
.app-list .item.exam::after{content:"⭐";font-size:10px;margin-left:4px}
.app-list .item.done::before{content:"✓";color:#15803d;font-weight:900;margin-right:2px}
.app-viewer{background:#fff;border:1px solid #e3dcc7;border-radius:12px;padding:24px;text-align:center}
.app-viewer h3{margin:0 0 6px;font-size:18px;color:#1a202c;font-weight:800}
.app-viewer .meta{font-size:12px;color:#5d6477;margin-bottom:18px}
.app-viewer img{max-width:100%;height:auto;border:1px solid #e3dcc7;border-radius:8px;box-shadow:0 4px 14px rgba(120,90,30,.08);cursor:zoom-in}
.app-viewer .ctrl{margin-top:18px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.app-empty{padding:40px;text-align:center;color:#94a3b8;font-size:14px}
.app-zoom{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.app-zoom.show{display:flex}
.app-zoom img{max-width:95vw;max-height:95vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5);border-radius:6px}

/* 헷갈리는 부분 정리 (PRO) */
.cf-stage{flex:1;overflow-y:auto;padding:32px 48px 80px;background:#fbf6e9}
.cf-stage::-webkit-scrollbar{width:10px}
.cf-stage::-webkit-scrollbar-thumb{background:#c9c0a3;border-radius:5px}
.cf-card{max-width:980px;margin:0 auto 24px;background:#fff;border:1px solid #e3dcc7;border-radius:14px;padding:24px 28px;box-shadow:0 2px 8px rgba(120,90,30,.05)}
.cf-card .cf-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cf-card .cf-head .icon{font-size:24px}
.cf-card .cf-head h3{margin:0;font-size:18px;color:#1a202c;font-weight:800}
.cf-card .cf-head .tag{margin-left:auto;padding:3px 10px;background:#eef2ff;color:#3730a3;border-radius:999px;font-size:10px;font-weight:800}
.cf-card .cf-desc{font-size:13px;color:#5d6477;margin-bottom:16px;line-height:1.6}
.cf-table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:13px}
.cf-table th{background:#f5efde;color:#1a202c;padding:10px 12px;text-align:left;font-weight:800;border:1px solid #d6cfb8}
.cf-table td{padding:10px 12px;border:1px solid #e3dcc7;color:#2d3748;line-height:1.55;vertical-align:top}
.cf-table tr:nth-child(odd) td{background:#fefcf6}
.cf-table .cell-key{font-weight:700;background:#dbeafe;color:#4f46e5}
.cf-trap{margin-top:12px;padding:10px 14px;background:#eef2ff;border-left:3px solid #4f46e5;border-radius:6px;font-size:12px;color:#78350f}
.cf-trap b{color:#3730a3}
.cf-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;max-width:980px;margin-left:auto;margin-right:auto}
.cf-tab{padding:7px 14px;border-radius:999px;border:1px solid #d6cfb8;background:#fff;color:#5d6477;font-size:12px;font-weight:600;cursor:pointer}
.cf-tab.on{background:#6366f1;color:#fff;border-color:#6366f1}

/* 좌우 비교 모드 */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1200px;margin:0 auto}
@media (max-width:900px){.compare-grid{grid-template-columns:1fr}}
.compare-col{background:#fff;border:1px solid #e3dcc7;border-radius:12px;padding:20px 22px}
.compare-col .label{font-size:11px;font-weight:800;color:#5d6477;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.compare-col.original .label{color:#15803d}
.compare-col.tampered .label{color:#dc2626}
.compare-col .text{font-size:16px;line-height:1.95;color:#2d3748;word-break:keep-all}
.compare-col.original .text{color:#5d6477;cursor:default}
.compare-col.tampered .text .word{cursor:pointer}

/* 비교 모드 — 채점 후 원문 정답 위치 강조 */
.compare-col .word.correct{background:#bbf7d0;border:2px solid #15803d;color:#14532d;font-weight:800;padding:1px 4px;margin:0 1px;border-radius:5px}
.compare-col .word.suspect{background:#fee2e2;border:2px solid #dc2626;color:#991b1b;font-weight:700;padding:1px 4px;margin:0 1px;border-radius:5px}
.compare-col .word.wrong{background:#fecaca;border:2px solid #dc2626;color:#7f1d1d;font-weight:800;padding:1px 4px;margin:0 1px;border-radius:5px;text-decoration:line-through}
.compare-col .word.missed{background:#eef2ff;border:2px solid #4f46e5;color:#78350f;font-weight:800;padding:1px 4px;margin:0 1px;border-radius:5px}
/* 원문 컬럼 정답: 변조문이 missed/wrong일 때 더 강조 */
.compare-col.original .word.correct{background:#86efac;border-color:#15803d;animation:correctFlash .6s ease 2}
@keyframes correctFlash{0%,100%{transform:scale(1)}50%{transform:scale(1.06);box-shadow:0 0 0 4px rgba(21,128,61,.2)}}

.result-box{max-width:600px;margin:40px auto;padding:32px;background:#1e293b;border-radius:16px;border:1px solid #334155;text-align:center}
.result-box h2{margin:0 0 24px;font-size:24px;color:#fff}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.result-stat{padding:18px;background:#0f172a;border-radius:12px}
.result-stat b{display:block;font-size:28px;font-weight:900;color:#60a5fa;font-family:'JetBrains Mono',monospace}
.result-stat span{font-size:12px;color:#94a3b8}

@media (max-width:720px){
  .hero{padding:24px 20px}
  .hero h1{font-size:22px}
  .law-page{font-size:15px;padding:20px 18px 40px}
  .type-dock{padding:10px 14px}
  .type-input{font-size:16px;padding:12px 14px}
  .mode-grid{grid-template-columns:1fr}
  .study-head{padding:10px 14px}
  .study-body{padding:20px 14px}
}

/* === 모바일 안정화 — 스크롤 보장 + 풀폭 카드 + wrap padding 유지 === */
@media (max-width:720px){
  /* iOS 모멘텀 스크롤만 켜고, contain은 빼기 (pull-to-refresh + scroll chaining 살림) */
  html,body{-webkit-overflow-scrolling:touch}
  body{background:var(--bg);font-size:15px;line-height:1.65}
  /* wrap 좌우 padding 보존(인라인 스타일 호환), 하단만 학습시작바를 위한 여백 */
  .wrap{padding:14px 14px 140px !important;max-width:100%}
  /* 카드 — 풀폭에 가깝게, 좌우 padding은 안쪽 콘텐츠 보호 */
  .card{margin:0 0 10px;border-radius:10px;padding:16px 14px;box-shadow:none}
  .card.first-study-card{border-radius:10px;margin:0 0 10px}
  /* 입력 폼·버튼 — 터치 친화 */
  button,.btn{touch-action:manipulation}
  /* 모바일에서 hero full-bleed 100vw 트릭 제거 — 컨테이너 안에 안전하게 위치 */
  .hero{width:auto !important;left:auto !important;right:auto !important;margin-left:0 !important;margin-right:0 !important}
  /* 학습 화면·모달 외 body는 항상 스크롤 가능 보장 */
  body:not(.studying){overflow-y:auto !important}
  body.studying{overscroll-behavior-x:none}
  /* === 가독성 향상 — 폰트 일괄 상향 (40~50대 응시자 다수) === */
  .card h2{font-size:17px}
  .card p,.card li{font-size:14px;line-height:1.65}
  .mode-card h3{font-size:15.5px}
  .mode-card p{font-size:13px;line-height:1.6}
  .mode-card .why{font-size:12px;line-height:1.55}
  .chip{font-size:13.5px;padding:9px 14px}
  .chip .chip-sub{font-size:12px}
  .chip .cnt{font-size:11.5px}
  .guide-item > summary{font-size:14.5px;padding:13px 14px}
  .guide-item .guide-body{font-size:13.5px;line-height:1.7}
  .tools-tab{font-size:13.5px;padding:12px 14px}
  .tools-row .label,.tools-row > div > div:first-child{font-size:14px}
  .tools-row .desc{font-size:12.5px}
  /* 회색 텍스트 대비 강화 — 흐릿한 #a8a08a 류 더 진하게 */
  .law-line.upcoming{color:#74695a}
}
/* 앱 모드(PWA standalone)에서 안전영역 처리 */
@media (display-mode:standalone){
  body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .summary-bar{bottom:calc(46px + env(safe-area-inset-bottom)) !important}
  .academy-strip{padding-bottom:calc(9px + env(safe-area-inset-bottom))}
}

/* ============================================================
   MOBILE OVERHAUL — 모바일 전면 검토 (10-pass review)
   - 단일 출처: 본 블록이 모바일 레이아웃의 최종 우선순위
   ============================================================ */

/* 모든 디바이스 공통: 가로 스크롤 차단 + 16px 입력 폰트(iOS 줌 방지) */
/* html에는 overflow:auto 유지 — body 가로 overflow만 차단 (iOS Safari 세로 스크롤 정상 작동 보장) */
html{overflow-x:clip}
body{max-width:100vw;overflow-x:clip}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
input[type=text],input[type=email],input[type=number],input[type=tel],input[type=search],textarea,select{font-size:16px}
/* 모바일 터치 타겟 44px 보장 (close 버튼류) */
@media (max-width:720px){
  .legal-modal .legal-close,.bid-modal .bid-close,.fb-head .x,.qr-inbox-head .x,.tools-head .x,.ad-float .x{min-width:44px;min-height:44px}
  .study-tip .x{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* === ≤768px: 태블릿~중형 모바일 === */
@media (max-width:768px){
  .wrap{padding:20px 14px 60px}
  .nav-inner{padding:10px 14px}
  .brand{font-size:14px;gap:8px}
  .brand .logo{width:28px;height:28px;font-size:13px}
  .brand small{display:none}
  .no-ads-cta,.upgrade-cta{padding:6px 10px;font-size:10px}
  .premium-on{font-size:10px;padding:3px 8px}

  /* Stepper — 컴팩트 */
  .stepper{padding:0 10px;margin:14px 0 0;gap:0;flex-wrap:nowrap}
  .stepper .seg{font-size:11px;gap:5px}
  .stepper .seg .dot{width:20px;height:20px;font-size:10px}
  .stepper .bar{width:24px;margin:0 6px}

  /* Hero */
  .hero{padding:18px 14px 24px;min-height:auto}
  .hero-label{font-size:13px;margin-bottom:4px}
  .hero-countdown{margin:0 0 14px}
  .hero h1{font-size:clamp(22px,5.6vw,36px);margin:0 0 12px}
  .hero .pill{font-size:10px;padding:4px 10px;margin-bottom:10px}
  .hero .sub{font-size:13px;margin-bottom:14px;line-height:1.55}
  .hero .sub br{display:none}
  .hero .cta-row{gap:8px;width:100%}
  .hero .cta-row .btn{flex:1;justify-content:center}
  .btn-lg{padding:12px 18px;font-size:14px}

  /* Live stats */
  .live-stats{padding:8px 12px}
  .live-stats-head{font-size:10px;margin-bottom:6px}
  .live-grid{gap:5px;grid-template-columns:1fr 1fr}
  .live-tile{padding:7px 10px;gap:8px}
  .live-tile .label{font-size:10px}
  .live-tile .value{font-size:16px}

  /* Tribute banner */
  body[data-build="free"] .tribute-banner{margin:0 -14px;padding:8px 14px;font-size:11px;gap:6px}

  /* 위기감 카드 */
  .warning-section{padding:18px 16px;margin:16px 0;border-radius:14px}
  .warning-section h2{font-size:18px}
  .warning-section .lead{font-size:13px;margin-bottom:14px}
  .warning-tile{padding:14px 16px}
  .warning-tile .value{font-size:24px}
  .warning-tile .desc{font-size:10.5px}

  /* 과학 섹션 */
  .science{padding:24px 14px;margin:20px -8px;border-radius:18px}
  .science-head{margin-bottom:22px}
  .science-head h2{font-size:19px;line-height:1.3}
  .science-head p{font-size:13px}
  .science-card{padding:18px}
  .science-card .icon{font-size:24px}
  .science-card h3{font-size:15px}
  .science-card .num{font-size:26px}
  .science-card p{font-size:12.5px}

  /* Card · Step3 카드 */
  .card{padding:18px 16px;border-radius:10px}
  .card h2{font-size:14px;margin:0 0 14px;padding-bottom:10px}
  .row{gap:6px}
  .chip{padding:8px 12px;font-size:12px}

  /* 5번 카드: 학습 속도 추천 — 3열 그리드 → 2열 + 버튼 풀폭 */
  .card .card-recom-grid,
  .card div[style*="grid-template-columns:1fr 1fr auto"]{
    grid-template-columns:1fr 1fr !important;gap:10px !important;
  }
  .card div[style*="grid-template-columns:1fr 1fr auto"] > button{
    grid-column:1/-1 !important;width:100%;height:42px !important;
  }

  /* 면접 페이지 모바일 — 2열 → 1열 */
  #pageInterview [style*="grid-template-columns:repeat(2,1fr)"],
  #pageInterview [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  #pageInterview [style*="padding:40px"]{padding:28px 20px 24px !important}
  #pageInterview [style*="font-size:22px"][style*="font-weight:900"]{font-size:19px !important}

  /* 모드 카드 — 1열, 패딩·뱃지 자리 정리 */
  .mode-grid{gap:10px}
  .mode-card{padding:16px 14px 14px;border-radius:10px}
  .mode-card .icon{font-size:22px;margin-bottom:6px}
  .mode-card h3{font-size:14px}
  .mode-card p{font-size:11.5px}
  .mode-card .why{font-size:10.5px;line-height:1.45}
  .mode-card .pro-badge{top:10px;right:10px;font-size:9px;padding:2px 8px}
  /* NEW badge (왼쪽) — 모바일 추천 ::before 와 충돌 방지: NEW를 중앙으로 */
  body.mobile-mode .mode-card[data-mode="explain"] .pro-badge[style*="left:10px"],
  body.mobile-mode .mode-card[data-mode="huidok1"] .pro-badge[style*="left:10px"],
  body.mobile-mode .mode-card[data-mode="huidok2"] .pro-badge[style*="left:10px"]{
    left:auto !important;right:60px !important;
  }
  body.mobile-mode .mode-card[data-mode="trap"]::before,
  body.mobile-mode .mode-card[data-mode="compare"]::before{
    display:none !important;content:none !important;
  }
  .reco-badge{display:none !important}

  /* Articles box — chap-head, chap-progress 축소 */
  .articles-box{max-height:380px;padding:6px}
  .chap-head{padding:8px 10px;gap:8px;flex-wrap:wrap}
  .chap-head .name{font-size:13px}
  .chap-head .stats{gap:6px;font-size:11px;flex-wrap:wrap}
  .chap-progress{width:60px;flex-shrink:0}
  .chap-head .pct{min-width:36px;font-size:11px}
  .chap-body{padding:6px 8px 8px}
  .article-chip{padding:5px 10px;font-size:11px;margin:2px}

  /* summary-bar */
  .summary-bar{padding:14px 16px;font-size:13px;flex-direction:column;align-items:stretch;gap:10px}
  .summary-bar > div{text-align:center}
  .summary-bar .btn-lg{width:100%;justify-content:center}

  /* 사용 가이드 grid */
  .card[style*="background:#fafbfc"] > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  /* Footer */
  footer{margin:32px -14px 0 !important;padding:24px 16px !important}
  footer > div{grid-template-columns:1fr !important;text-align:left !important;gap:14px !important}
  footer > div > div[style*="text-align:right"]{text-align:left !important}
  footer > div:last-child{flex-direction:column;gap:8px !important;align-items:flex-start !important}

  /* 모달 (premium / fb / textbook) */
  .modal-bg,.fb-modal,.textbook-modal,.legal-modal-bg{padding:10px}
  .modal,.fb-box{max-height:94vh}
  .modal-head{padding:24px 20px 16px}
  .modal-head h2{font-size:18px}
  .modal-body{padding:18px 20px}
  .modal-body .perks li{font-size:13px;padding:6px 0}
  .price-box{padding:16px}
  .price-box .now{font-size:28px}
  .modal-cta button{padding:13px 8px;font-size:13px;min-height:48px}

  .fb-head{padding:18px 18px 14px}
  .fb-head h3{font-size:16px}
  .fb-body{padding:16px 18px}
  .fb-actions button{min-height:44px}

  /* 텍스트북 모달 */
  .textbook-modal .textbook-box{max-height:92vh;border-radius:10px}
  .textbook-modal .textbook-head{padding:14px 18px}
  .textbook-modal .textbook-title{font-size:15px}
  .textbook-modal .textbook-close{padding:10px 14px;font-size:13px;min-height:44px}
  .textbook-modal .textbook-body{padding:18px 18px;font-size:14.5px;line-height:1.78}
  .textbook-modal .textbook-body h1{font-size:18px;margin:18px 0 10px}
  .textbook-modal .textbook-body h2{font-size:16px;margin:16px 0 8px}
  .textbook-modal .textbook-body h3{font-size:14.5px;margin:14px 0 6px}

  /* Legal modal */
  .legal-modal{max-height:94vh;border-radius:12px}
  .legal-modal h2{font-size:17px;padding:16px 18px 12px}
  .legal-modal .legal-body{padding:14px 18px;font-size:12.5px}
  .legal-footer{padding:10px 14px;gap:6px}
  .legal-tab{flex:1;padding:10px 6px;font-size:12px;min-height:44px}

  /* Floating action buttons (FAB) */
  .fb-fab{bottom:16px;left:14px;width:46px;height:46px;font-size:19px}
  body.mobile-mode .fb-fab{bottom:16px}

  /* QR 신고 팝오버 — 모바일에선 화면 양쪽 끝 클램프 */
  .qr-pop{left:10px !important;right:10px !important;min-width:auto !important;max-width:none !important;width:auto !important;top:auto !important;bottom:80px}
  .qr-pop .qr-chip{padding:7px 12px;font-size:12px;min-height:32px}
  .qr-actions .qr-btn{min-height:44px}

  /* QR 신고함 버튼 */
  .qr-inbox-btn{padding:8px 12px;font-size:12px}

  /* Study overlay — head + actions */
  .study-head{padding:8px 12px;gap:8px}
  .study-head .info{gap:8px;font-size:12px}
  .study-head .info b{font-size:14px}
  .study-progress{order:99;width:100%;flex:0 0 100%;max-width:none;min-width:0}
  .study-actions{gap:6px;width:100%;justify-content:flex-start;flex-wrap:wrap}
  .study-btn{padding:12px 14px;font-size:12px;min-height:44px;flex-shrink:0}
  .blink-info{display:inline-flex}
  .blink-info .info-pop{
    position:fixed !important;
    top:auto !important;
    bottom:80px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    z-index:300;
  }
  .blink-info .info-pop::before{display:none}

  /* 학습 본문 */
  .law-page{padding:18px 14px 60px;font-size:15px;line-height:1.95}
  .law-line{padding:8px 10px;margin:1px 0}
  .law-line.header{font-size:16px;margin-top:18px}
  .law-line:not(.header):not(.current):hover::after{display:none}
  .blank{min-width:42px;padding:0 6px;font-size:13px}

  /* 함정 찾기 mode — 모바일에서 trap-actions 버튼 도달 가능하도록 충분한 bottom padding + 명시적 스크롤 */
  .trap-stage, .cf-stage{
    padding:18px 14px 140px !important;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    min-height: 0;
    /* 모바일 viewport 변동(주소창 등) 대비 — 충분한 max-height */
    max-height: calc(100dvh - 100px);
  }
  .trap-hud{padding:10px 14px;gap:10px;border-radius:10px;margin-bottom:12px}
  .trap-hud .stat b{font-size:18px}
  .trap-hud .progress{min-width:60px}
  .trap-card{padding:16px 16px;border-radius:10px;margin-bottom:12px}
  .trap-line{font-size:16px;line-height:1.95}
  .trap-line .word{padding:3px 5px;margin:1px 1px;border-radius:4px}
  .trap-feedback{padding:10px 14px;font-size:12.5px;border-radius:8px;flex-wrap:wrap}
  .trap-feedback .em{font-size:18px}
  .trap-feedback .answer{margin-left:0;font-size:11.5px;width:100%}
  .trap-actions{gap:6px;padding:10px 0 24px;flex-wrap:wrap;justify-content:stretch}
  .trap-btn{padding:11px 18px;font-size:13px;min-height:44px;flex:1;min-width:120px}

  /* 비교 모드 */
  .cf-stage{padding:18px 14px 60px}
  .cf-card{padding:16px 16px;border-radius:10px;margin-bottom:14px}
  .cf-card .cf-head h3{font-size:15px}
  .cf-table{font-size:12px}
  .cf-table th,.cf-table td{padding:7px 8px}
  .cf-tabs{gap:4px;margin-bottom:12px}
  .cf-tab{padding:10px 12px;font-size:11px;min-height:44px}
  .compare-grid{gap:10px}
  .compare-col{padding:14px 16px;border-radius:10px}
  .compare-col .text{font-size:14px;line-height:1.85}

  /* App stage (별표) */
  .app-stage{padding:18px 14px 60px;gap:12px}
  .app-list{padding:10px;max-height:240px;position:static}
  .app-viewer{padding:18px 14px}
  .app-viewer h3{font-size:16px}

  /* AI 강의 (explain) — 헤더 정렬 + 본문 비율 */
  .explain-header{padding:10px 12px;gap:6px}
  .explain-header .ex-meta{order:0;flex:1 0 100%;text-align:center;gap:1px;margin-bottom:2px}
  .explain-header .ex-art{font-size:15px}
  .explain-header .ex-title{font-size:11px}
  .explain-header .ex-law,.explain-header .ex-prog{font-size:10px}
  .explain-header .ex-nav{padding:10px 10px;font-size:11px;min-height:44px;flex:1}
  .explain-header .ex-textbook-btn{flex:1.2}
  /* 모바일 세로: 위(원문)·아래(해설) 1:1 분할, 각각 독립 스크롤 */
  .explain-body{grid-template-columns:1fr !important;grid-template-rows:1fr 1fr !important}
  .explain-left,.explain-right{padding:14px 14px}
  .explain-left .ex-content{font-size:12.5px;line-height:1.7}
  .explain-right .ex-content{font-size:13px;line-height:1.72}
  .explain-left .ex-line{margin-bottom:8px;padding-bottom:6px}
  /* 모바일 TTS 하단 */
  .explain-tts-sticky{padding:6px 10px}
  .explain-right .ex-section-tag{padding:10px 14px 0}
  .explain-right .ex-content{padding:8px 14px 6px}
  .explain-tts{padding:6px 8px;gap:6px;background:#fff;border:1px solid #e8dfc4;box-shadow:0 1px 3px rgba(120,90,30,.06);flex-direction:row;align-items:center;flex-wrap:wrap}
  .explain-tts .tts-row{flex:0 0 auto;gap:5px}
  .tts-btn{padding:7px 13px;font-size:13px;min-height:44px;min-width:72px;border-radius:8px;touch-action:manipulation}
  .tts-btn.tts-play{padding:7px 15px}
  .tts-engine-row{flex:1 1 auto;justify-content:flex-end}
  .tts-engine-btn{font-size:11px;padding:5px 10px;min-height:36px;touch-action:manipulation}
  .tts-voice-row,.tts-rate-row{display:none}
  .explain-tts.expand-tts{flex-direction:column;align-items:stretch;gap:6px;padding:6px 8px}
  .explain-tts.expand-tts .tts-voice-row,
  .explain-tts.expand-tts .tts-rate-row{display:flex;font-size:11px;gap:6px}
  .explain-tts.expand-tts .tts-voice-row .tts-voice{padding:5px 7px;font-size:11px;min-height:30px;height:30px}
  .explain-tts.expand-tts .tts-rate-row .tts-rate{flex:1;width:auto;height:4px}
  .tts-tog-btn{min-height:32px;padding:0 8px;font-size:12px}
  .explain-tts-tip{font-size:10px;padding:2px 4px 0}
  .ex-section-tag{font-size:10px;margin-bottom:6px}

  /* 결과 화면 */
  .result-box{padding:22px 18px;margin:24px auto;border-radius:12px}
  .result-box h2{font-size:19px;margin-bottom:18px}
  .result-stats{gap:10px;grid-template-columns:repeat(3,1fr)}
  .result-stat{padding:12px 6px}
  .result-stat b{font-size:20px}
  .result-stat span{font-size:10.5px}
}

/* === ≤480px: 작은 폰 (iPhone SE, Android 소형) === */
@media (max-width:480px){
  .nav-inner{padding:8px 12px;gap:6px}
  .brand{font-size:13px}
  .stepper .seg{font-size:10px}
  .stepper .bar{width:16px;margin:0 4px}
  .hero h1{font-size:clamp(20px,6vw,28px)}
  .hero .sub{font-size:12.5px}
  .hero-disclaimer{font-size:9.5px;margin:-4px 0 10px}
  .live-grid{grid-template-columns:1fr}
  .live-tile{padding:6px 10px}
  .live-tile .value{font-size:18px}
  .warning-tile .value{font-size:21px}
  .science-head h2{font-size:17px}
  .science-card{padding:14px}
  .card{padding:14px 12px}
  .card h2{font-size:13px}
  .articles-box{max-height:320px}
  .chap-progress{width:42px}
  .summary-bar{padding:12px 14px;font-size:12px}
  /* 5번 카드 그리드 — 1열로 */
  .card div[style*="grid-template-columns:1fr 1fr auto"]{
    grid-template-columns:1fr !important;
  }
  /* 모달 */
  .modal-head h2{font-size:16px}
  .modal-body .perks li{font-size:12px}
  /* 학습 헤더 */
  .study-head .info{font-size:11px;gap:6px}
  .study-head .info b{font-size:13px}
  .study-btn{padding:9px 10px;font-size:11.5px}
  /* trap */
  .trap-line{font-size:15px;line-height:1.9}
  .trap-line .word{padding:2px 4px}
  .trap-btn{padding:10px 14px;font-size:12.5px;min-width:100px}
  /* explain */
  .explain-header{padding:8px 10px}
  .explain-header .ex-nav{font-size:10.5px;padding:7px 8px}
  .explain-left .ex-content{font-size:13px}
  .explain-right .ex-content{font-size:12.5px}
}

/* 가로(landscape) 짧은 화면 — 학습 화면 헤더가 너무 두꺼워지지 않게 */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .study-head{padding:6px 10px;gap:6px}
  .study-head .study-progress{display:none}
  .study-btn{padding:7px 10px;font-size:11px;min-height:34px}
  .law-page{padding:10px 14px 40px}
  .explain-tts-sticky{position:relative;z-index:10}
}

/* 터치 디바이스: hover 의존성 제거 */
@media (hover:none){
  .law-line:not(.header):not(.current):hover::after{display:none}
  .mode-card:hover{transform:none}
  .science-card:hover{transform:none;box-shadow:none}
  .live-tile:hover{transform:none}
  .btn-primary:hover,.btn-ghost:hover{transform:none}
  /* 터치 디바이스: hover 룰은 위에서 이미 (hover:hover) 미디어로 감싸져서 안 적용됨. 추가 안전망. */
}

/* iOS Safari 100vh 보정 */
@supports (height: 100dvh){
  .study{height:100dvh}
  .modal-bg,.fb-modal,.legal-modal-bg,.textbook-modal{height:100dvh}
}

/* === EPUB 리더 스타일 본문 (lawPage) === */
.law-page{
  font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  letter-spacing:-.005em;
  font-feature-settings:'kern','liga';
}
/* 조 제목 — 큰 헤더 (조문 시작) */
.law-line.art-title{
  font-size:21px;font-weight:800;color:#4f46e5;
  margin:32px 0 6px;padding:10px 16px 8px;
  border-left-color:#4f46e5;border-left-width:4px;
  letter-spacing:-.015em
}
.law-line.art-title.upcoming{color:#6b7280;opacity:.85}
.law-line.art-title.done{color:#4338ca}
/* 항 (①②③) — 본문 들여쓰기 + hanging marker */
.law-line.clause{
  padding:8px 16px 8px 36px;
  text-indent:-20px;
  margin-top:6px
}
/* 호 (1. 2. 3.) — 한 단계 더 들여쓰기 */
.law-line.item-no{
  padding:6px 16px 6px 40px;
  font-size:.97em;
  color:#1a202c           /* 더 진하게 (이전 #3a4250) */
}
/* 목 (가. 나. 다.) — 두 단계 들여쓰기 */
.law-line.item-letter{
  padding:5px 16px 5px 60px;
  font-size:.95em;
  color:#1a202c           /* 더 진하게 (이전 #4a5260) */
}
/* current 줄 가시성 보장 — 단, blink-mode는 제외 (opacity 애니메이션 유지) */
body:not(.blink-mode) .law-line.current,
body:not(.blink-mode) .law-line.current .ch{
  color:#0f172a !important;
  opacity:1 !important;
  visibility:visible !important;
  font-size:1em;
  text-indent:0 !important
}
/* blink-mode일 때도 색상·visibility는 보장 (opacity만 애니메이션이 제어) */
body.blink-mode .law-line.current,
body.blink-mode .law-line.current .ch{
  color:#0f172a !important;
  visibility:visible !important;
  text-indent:0 !important
}
/* follow-mode current 줄 wrap·visibility */
body.follow-mode .law-line.current{white-space:normal !important}
body.follow-mode .law-line.current .ch{
  white-space:pre-wrap;
  min-width:.1em
}
/* 단서 (다만, 단,) — 회색 이탤릭 */
.law-line.proviso{
  padding:4px 16px 4px 48px;
  color:#6b7280;
  font-style:italic;
  font-size:.96em
}
.law-line.proviso.current{font-style:normal;color:#1a202c}
/* 조 제목과 다른 줄 사이 미세 점선 (책 같은 시각 리듬) */
.law-line.art-title + .law-line:not(.art-title){border-top:1px dashed transparent}
/* 항 카운터 위 여백 */
.law-line.clause:first-of-type{margin-top:14px}
/* 인쇄 폰트 가독성 — line-height 살짝 좁힘 (clause/호 들여쓰기 보정) */
.law-line.clause,.law-line.item-no,.law-line.item-letter{line-height:1.95}
/* 모바일에서 들여쓰기 절반으로 */
@media (max-width:768px){
  .law-line.art-title{font-size:18px;padding:8px 12px}
  .law-line.clause{padding:6px 12px 6px 28px;text-indent:-16px}
  .law-line.item-no{padding:5px 12px 5px 42px;text-indent:-16px}
  .law-line.item-letter{padding:4px 12px 4px 56px;text-indent:-16px}
  .law-line.proviso{padding:4px 12px 4px 36px}
}

/* === 학습 화면 목차 패널 === */
.toc-panel{
  position:fixed;top:64px;left:14px;bottom:14px;width:340px;
  background:#fff;border:1px solid #d6cfb8;border-radius:14px;
  box-shadow:0 12px 40px rgba(15,23,42,.18);
  /* 🔴 **열려 있는 동안은 최상위다** — 120 이던 때는 위를 `.study-head`(z 1000)가,
     아래를 `#rdDock`(z 900)·앱바(z 300)가 덮어 **닫기 ✕ 도 안 눌리고** 아래쪽 조문도 못 골랐다.
     실측(412px): 목차 머리 0..59 를 헤드 0..50 이 덮고, 780..900 을 독·앱바가 덮었다.
     1050 은 시스템 음성 메뉴(1100)·로그인 모달(9999) 아래라 그것들과는 안 싸운다. */
  z-index:1050;display:flex;flex-direction:column;overflow:hidden;
  animation:tocSlide .2s ease
}
@keyframes tocSlide{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
.toc-panel .toc-head{
  padding:12px 16px;background:#4f46e5;color:#fff;
  display:flex;justify-content:space-between;align-items:center;
  font-weight:800;font-size:13px;letter-spacing:-.005em
}
.toc-panel .toc-close{
  background:rgba(255,255,255,.18);color:#fff;border:none;
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;font-weight:700
}
.toc-panel .toc-close:hover{background:rgba(255,255,255,.32)}
.toc-panel .toc-list{flex:1;overflow-y:auto;padding:10px 12px;background:#fbf6e9}
.toc-panel .toc-list::-webkit-scrollbar{width:8px}
.toc-panel .toc-list::-webkit-scrollbar-thumb{background:#c9c0a3;border-radius:4px}
.toc-panel .toc-chapter{
  font-size:11px;font-weight:800;color:#4f46e5;letter-spacing:.04em;
  margin:14px 0 6px 4px;padding:4px 6px;background:#dbeafe;border-radius:5px;
  text-transform:none;
  position:sticky;top:0;z-index:2   /* 과목 머리는 스크롤에 안 밀린다 (2026-09-02 「과목별 안 나눠져 있다」) */
}
.toc-panel .toc-chapter:first-child{margin-top:0}
.toc-panel .toc-sub{font-size:10.5px;font-weight:700;color:#6b7280;margin:8px 0 2px 8px;letter-spacing:.02em}
.toc-exam-toggle.active{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.toc-bm-toggle.none{opacity:.5}
body.dark .toc-exam-toggle.active{background:#78350f;border-color:#f59e0b;color:#fef3c7}
body.dark .toc-panel .toc-sub{color:#94a3b8}
.toc-panel .toc-item{
  display:flex;align-items:center;gap:8px;padding:9px 10px;
  cursor:pointer;border-radius:6px;font-size:13px;color:#1a202c;
  transition:background .12s;line-height:1.45
}
.toc-panel .toc-item:hover{background:#f5efde}
.toc-panel .toc-item.current{background:#eef2ff;font-weight:700;color:#78350f}
.toc-panel .toc-item.done{color:#94a3b8}
.toc-panel .toc-item.toc-sub{padding-left:28px;font-size:12.5px;color:#5d6477;border-left:2px solid #d6cfb8;margin-left:6px}
.toc-panel .toc-item.toc-sub .toc-num{color:#64748b;font-weight:600}
body.dark .toc-panel .toc-item.toc-sub{color:#94a3b8;border-left-color:#475569}
.toc-panel .toc-item.done::before{content:"✓ ";color:#15803d;font-weight:900}
/* 위계 딱지 — 「영 제1조」의 「영」. 번호와 붙지 않게 띄우고 **글자는 작게**(폭이 좁다) */
.toc-panel .toc-item .toc-tier{
  font-style:normal;font-family:inherit;font-size:9.5px;font-weight:800;
  color:#6b6145;background:#f0e9d6;border-radius:4px;padding:1px 4px;margin-right:4px;  /* 대비 5.07 — #8b7f5e 는 3.27 이라 안 읽혔다(R158) */
  letter-spacing:-.01em;vertical-align:1px
}
body.dark .toc-panel .toc-item .toc-tier{color:#cbd5e1;background:#334155}
.toc-panel .toc-item .toc-num{
  font-family:'JetBrains Mono',monospace;font-weight:700;color:#5d6477;
  flex-shrink:0;min-width:50px;font-size:11px
}
.toc-panel .toc-item.current .toc-num{color:#3730a3}
@media (max-width:768px){
  /* 🔴 `bottom:0` 이면 하단 앱바 뒤로 들어가 **마지막 조문들을 못 누른다**(실측 412×900: 836..900 이 먹혔다).
     z 로 싸우지 말고 **자리를 비켜 준다**(R302) — 앱바를 덮으면 다른 탭으로 못 나간다. */
  .toc-panel{top:0;left:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));width:88%;max-width:380px;border-radius:0 14px 14px 0;border-left:none}
  .toc-panel .toc-head{padding:14px 18px}
  .toc-panel .toc-list{padding:10px 14px}
}
/* === 목차 검색 === */
.toc-search-wrap{padding:8px 10px 8px;background:#fff;border-bottom:1px solid #e5ddc9;flex-shrink:0;display:flex;gap:6px;align-items:center}
.toc-search{flex:1;min-width:0;box-sizing:border-box;padding:7px 10px;border:1.5px solid #d6cfb8;border-radius:8px;font-size:13px;font-family:inherit;background:#fbf6e9;color:#1a202c;outline:none;transition:border-color .15s}
.toc-search:focus{border-color:#4f46e5}
.toc-search::placeholder{color:#94a3b8}
.toc-bm-toggle{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:7px 10px;border:1.5px solid #d6cfb8;border-radius:8px;background:#fbf6e9;color:#5d4e2a;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.005em;transition:all .15s;white-space:nowrap}
.toc-bm-toggle:hover{border-color:#a5b4fc;background:#eef2ff}
.toc-bm-toggle.active{background:linear-gradient(135deg,#a5b4fc,#6366f1);border-color:#4f46e5;color:#fff;box-shadow:0 2px 8px rgba(217,119,6,.3)}
.toc-bm-toggle .tbm-icon{font-size:13px;line-height:1}
.toc-bm-toggle .tbm-label{font-size:11.5px}
.toc-bm-toggle .tbm-count{font-size:10.5px;background:rgba(0,0,0,.12);padding:1px 6px;border-radius:8px;font-weight:800;min-width:14px;text-align:center;color:inherit}
.toc-bm-toggle.active .tbm-count{background:rgba(255,255,255,.32)}
@media (max-width:480px){
  .toc-bm-toggle .tbm-label{display:none}
  .toc-bm-toggle{padding:7px 9px}
}
/* 목차 항목 — 북마크 표시 강조 */
.toc-item{position:relative}
/* ── 오답 지문만 보기 (2026-08-27 사용자 지시) ────────────────────────────
   🔴 **북마크(남색)와 색이 달라야 한다** — 둘이 나란히 있고 뜻이 정반대다
      (북마크 = 내가 고른 것 · 오답 = 내가 틀린 것). 오답은 **빨강**으로 둔다.
   🔴 배지 둘의 색도 가른다 — `✕N` 모의고사(진한 빨강) · `미N` 미니문제(주황).
      **더하지 않는다**(뜻이 다르다). 같은 색이면 학생이 한 수로 읽는다.
   🔴 오답이 하나도 없으면 단추를 **흐리게** 둔다 — 눌러도 할 일이 없다는 것이 보여야 한다. */
.toc-wrong-toggle.active{background:linear-gradient(135deg,#fca5a5,#dc2626);border-color:#b91c1c;box-shadow:0 2px 8px rgba(220,38,38,.3)}
.toc-wrong-toggle:hover{border-color:#fca5a5;background:#fef2f2}
.toc-wrong-toggle.none{opacity:.45}
.toc-item .toc-w{flex-shrink:0;margin-left:6px;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:8px;line-height:1.5;letter-spacing:-.02em}
.toc-item .toc-w.mock{background:#fee2e2;color:#b91c1c}
.toc-item .toc-w.mini{background:#ffedd5;color:#c2410c}
body.dark .toc-item .toc-w.mock{background:#450a0a;color:#fca5a5}
body.dark .toc-item .toc-w.mini{background:#431407;color:#fdba74}
/* 🔴 본문 거르기 — **감추기만 한다.** 큐도 진도도 안 건드린다(R60). */
.law-line.wo-hide{display:none !important}
.toc-item .toc-bm{color:#6366f1;font-size:13px;flex-shrink:0;margin-left:auto;padding-left:4px;filter:drop-shadow(0 0 2px rgba(251,191,36,.55))}
.toc-item.has-bm{background:linear-gradient(90deg,rgba(254,243,199,.5),transparent 50%);border-left:3px solid #6366f1;padding-left:9px}
.toc-item.has-bm:hover{background:linear-gradient(90deg,rgba(254,243,199,.9),#eef2ff 60%)}
.toc-item.has-bm.current{background:linear-gradient(90deg,#eef2ff,#c7d2fe);border-left-color:#4338ca}
body.dark .toc-search-wrap{background:#1e293b;border-bottom-color:#334155}
body.dark .toc-search{background:#0f172a;border-color:#334155;color:#cbd5e1}
body.dark .toc-search::placeholder{color:#475569}
body.dark .toc-bm-toggle,
html[data-theme="dark"] .toc-bm-toggle{background:#0f172a;border-color:#334155;color:#cbd5e1}
body.dark .toc-bm-toggle:hover,
html[data-theme="dark"] .toc-bm-toggle:hover{border-color:#a5b4fc;background:#1e293b}
body.dark .toc-bm-toggle.active,
html[data-theme="dark"] .toc-bm-toggle.active{background:linear-gradient(135deg,#a5b4fc,#6366f1);border-color:#a5b4fc;color:#1a1a1a}
body.dark .toc-item.has-bm{background:linear-gradient(90deg,rgba(180,83,9,.22),transparent 50%);border-left-color:#a5b4fc}

/* === 학습 도구 — 북마크·다크모드·폰트크기·오답노트·스트릭·일일목표·메모·검색·모의시험 === */
:root{--font-scale:1}
body{font-size:calc(15px * var(--font-scale, 1))}
.law-page{font-size:calc(18px * var(--font-scale, 1)) !important}
.law-line{font-size:calc(18px * var(--font-scale, 1)) !important}
.type-input.type-pad{font-size:calc(17px * var(--font-scale, 1)) !important}

/* 다크모드 */
body.dark{
  --bg:#0f172a; --card:#1e293b; --ink:#e2e8f0; --ink2:#94a3b8; --line:#334155;
  background:#0f172a;color:#e2e8f0
}
body.dark .nav{background:rgba(15,23,42,.92);border-bottom-color:#334155}
body.dark .brand,body.dark .brand div{color:#e2e8f0}
body.dark .card{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .card h2{color:#e2e8f0;border-color:#334155}


/* ===== 면접 원고 본문 (interview.js 가 그린다) ===== */
.iv-parts{display:flex;gap:8px;margin:24px 0 14px;flex-wrap:wrap}
.iv-part{flex:1 1 auto;min-width:96px;padding:11px 14px;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;transition:all .15s}
.iv-part:hover{border-color:#a5b4fc;color:#4f46e5}
.iv-part.on{background:#4f46e5;border-color:#4f46e5;color:#fff}
.iv-count{font-size:12.5px;color:var(--ink2);margin:0 0 10px;font-weight:700}
.iv-units{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.iv-unit{padding:7px 12px;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer}
.iv-unit:hover{border-color:#a5b4fc;color:#4f46e5}
.iv-unit.on{background:#eef2ff;border-color:#4f46e5;color:#4f46e5}
.iv-kw{font-size:12.5px;color:#4f46e5;background:#eef2ff;border:1px solid #c7d2fe;border-radius:8px;padding:9px 12px;margin:0 0 12px;line-height:1.6}
.iv-item{border:1px solid var(--line);border-radius:12px;background:#fff;margin:0 0 10px;overflow:hidden}
.iv-item.open{border-color:#a5b4fc;box-shadow:0 2px 12px rgba(79,70,229,.08)}
.iv-head{display:flex;align-items:center;gap:10px;width:100%;padding:15px 16px;background:none;border:0;cursor:pointer;text-align:left}
.iv-num{flex:none;font-size:11.5px;font-weight:800;color:#4f46e5;background:#eef2ff;border-radius:6px;padding:3px 7px;min-width:44px;text-align:center}
.iv-title{flex:1;font-size:14px;font-weight:700;color:var(--ink);line-height:1.5}
.iv-chev{flex:none;color:var(--ink2);font-size:12px;transition:transform .15s}
.iv-item.open .iv-chev{transform:rotate(180deg)}
.iv-body{padding:0 16px 16px;border-top:1px solid var(--line)}
.iv-concl{font-size:14px;color:var(--ink);line-height:1.7;background:#f5f3ff;border-left:3px solid #4f46e5;border-radius:0 8px 8px 0;padding:12px 14px;margin:14px 0 0}
.iv-concl b,.iv-close b{color:#4f46e5}
.iv-sub{font-size:12.5px;font-weight:800;color:var(--ink2);margin:16px 0 8px}
.iv-close{font-size:13.5px;color:var(--ink);line-height:1.7;margin:14px 0 0;padding:11px 13px;background:var(--bg,#f8fafc);border-radius:8px}
.iv-ref{font-size:13px;color:var(--ink);line-height:1.7;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:11px 13px;margin:14px 0 0}
.iv-ref b{color:#c2410c}
.iv-jump{margin-left:6px;padding:4px 10px;border:1px solid #fdba74;background:#fff;color:#c2410c;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer}
.iv-jump:hover{background:#fff7ed}
.iv-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.iv-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:420px}
.iv-tbl th,.iv-tbl td{border:1px solid var(--line);padding:9px 11px;text-align:left;line-height:1.65;vertical-align:top}
.iv-tbl th{background:#f8fafc;font-weight:800;color:var(--ink2);font-size:12.5px;white-space:nowrap}
.iv-tbl td{color:var(--ink)}
.iv-p{font-size:13.5px;color:var(--ink);line-height:1.75;margin:10px 0}
.iv-h4{font-size:14px;font-weight:800;color:var(--ink);margin:16px 0 8px}
.iv-ul{margin:8px 0;padding-left:20px}
.iv-ul li{font-size:13.5px;color:var(--ink);line-height:1.75;margin:4px 0}
.iv-quote{margin:10px 0;padding:11px 14px;background:#f8fafc;border-left:3px solid #cbd5e1;border-radius:0 8px 8px 0;font-size:13.5px;color:var(--ink);line-height:1.75}
.iv-script{margin:16px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--bg,#f8fafc);overflow:hidden}
.iv-script>summary{padding:12px 14px;font-size:13px;font-weight:800;color:#4f46e5;cursor:pointer;list-style:none}
.iv-script>summary::-webkit-details-marker{display:none}
.iv-script[open]>summary{border-bottom:1px solid var(--line)}
.iv-sp{font-size:13.5px;color:var(--ink);line-height:1.95;margin:12px 14px}
.iv-loading{padding:34px 16px;text-align:center;font-size:13.5px;color:var(--ink2)}
@media(max-width:600px){
  .iv-part{min-width:0;flex:1 1 40%;font-size:12.5px;padding:10px 8px}
  .iv-head{padding:13px 12px;gap:8px}
  .iv-title{font-size:13.5px}
  .iv-body{padding:0 12px 14px}
  /* 🔴 근거 표를 **세로 카드로 접는다.** 가로 스크롤로 두면 `핵심 논거` 열이 통째로 잘려
     읽을 수가 없다(스샷으로 확인했다). 열 이름은 각 칸의 `data-label` 에서 가져온다 —
     표마다 머리글이 달라서 CSS 에 박을 수 없다. */
  .iv-tbl{min-width:0;display:block}
  .iv-tbl thead,.iv-tbl th{display:none}
  .iv-tbl tbody,.iv-tbl tr,.iv-tbl td{display:block;width:auto}
  .iv-tbl tr{border:1px solid var(--line);border-radius:10px;margin:0 0 8px;padding:4px 0;background:var(--bg,#f8fafc)}
  .iv-tbl td{border:0;padding:7px 12px}
  .iv-tbl td[data-label]:before{content:attr(data-label);display:block;font-size:11px;font-weight:800;color:var(--ink2);margin:0 0 3px}
  /* 첫 칸(번호 `①`)은 이름표가 군더더기라 값만 크게 보인다 */
  .iv-tbl td:first-child{font-weight:800;color:#4f46e5;padding-bottom:0}
  .iv-tbl td:first-child:before{display:none}
}
body.dark .iv-tbl tr{background:#0f172a;border-color:#334155}
body.dark .iv-tbl td:first-child{color:#a5b4fc}

/* ===== 모의면접 ===== */
.iv-part.mock{background:#fff7ed;border-color:#fed7aa;color:#c2410c}
.iv-part.mock.on{background:#ea580c;border-color:#ea580c;color:#fff}
.iv-card-btn{width:100%;font:inherit}
.iv-card-btn:hover{border-color:#a5b4fc!important}
.mk-intro{font-size:13.5px;color:var(--ink);line-height:1.75;background:#f5f3ff;border-left:3px solid #4f46e5;border-radius:0 8px 8px 0;padding:13px 15px;margin:0 0 14px}
.mk-sets{display:grid;gap:10px}
.mk-set{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;transition:all .15s}
.mk-set:hover{border-color:#ea580c;box-shadow:0 4px 16px rgba(234,88,12,.1)}
.mk-set-name{display:block;font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
.mk-set-target{display:block;font-size:12.5px;color:var(--ink2);line-height:1.6;margin-bottom:3px}
.mk-set-style{display:block;font-size:12.5px;color:#c2410c;line-height:1.6}
.mk-set-go{display:block;margin-top:10px;font-size:12.5px;font-weight:800;color:#ea580c}
.mk-run{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px}
.mk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mk-badge{font-size:11.5px;font-weight:800;color:#c2410c;background:#fff7ed;border-radius:6px;padding:4px 9px}
.mk-prog{font-size:12.5px;font-weight:800;color:var(--ink2)}
.mk-bar{height:4px;background:var(--line);border-radius:99px;overflow:hidden;margin:0 0 16px}
.mk-bar i{display:block;height:100%;background:#ea580c;transition:width .3s}
.mk-press{font-size:12.5px;font-weight:700;color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:9px 12px;margin:0 0 12px;line-height:1.6}
.mk-q{font-size:17px;font-weight:800;color:var(--ink);line-height:1.6;margin:0 0 18px}
.mk-clock{font-size:44px;font-weight:900;text-align:center;letter-spacing:-.02em;margin:0 0 16px;font-variant-numeric:tabular-nums}
.mk-clock.ok{color:#16a34a}.mk-clock.warn{color:#d97706}.mk-clock.danger{color:#dc2626}
.mk-btn{display:block;width:100%;padding:14px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;font-size:14.5px;font-weight:800;cursor:pointer;margin:0 0 8px}
.mk-btn.primary{background:#ea580c;border-color:#ea580c;color:#fff}
.mk-btn.primary:disabled{background:#e2e8f0;border-color:#e2e8f0;color:#94a3b8;cursor:not-allowed}
.mk-btn:not(.primary):hover{border-color:#ea580c;color:#c2410c}
.mk-hint{font-size:12px;color:var(--ink2);line-height:1.65;margin:6px 0 0}
.mk-done{font-size:13.5px;font-weight:700;color:#c2410c;text-align:center;margin:0 0 14px}
.mk-score{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.mk-score-t{font-size:13px;font-weight:800;color:var(--ink);margin:0 0 12px}
.mk-axis{display:flex;align-items:center;gap:10px;margin:0 0 9px}
.mk-axis-n{flex:1;font-size:12.5px;color:var(--ink2);line-height:1.5}
.mk-dots{flex:none;display:flex;gap:5px}
.mk-dot{width:32px;height:32px;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:8px;font-size:12.5px;font-weight:800;cursor:pointer}
.mk-dot.on{background:#ea580c;border-color:#ea580c;color:#fff}
.mk-ref{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.mk-ref>span:first-child{display:block;font-size:12.5px;font-weight:800;color:var(--ink2);margin-bottom:8px}
.mk-ref-plain{display:inline-block;font-size:12px;color:var(--ink2);padding:4px 10px;background:var(--bg,#f8fafc);border-radius:999px;margin:0 4px 4px 0}
.mk-result{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 16px}
.mk-result-t{font-size:16px;font-weight:900;color:var(--ink);margin:0 0 16px}
.mk-raxis{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.mk-raxis-n{flex:1;font-size:12.5px;color:var(--ink2);line-height:1.5}
.mk-raxis-bar{flex:none;width:96px;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.mk-raxis-bar i{display:block;height:100%}
.mk-raxis-bar.good i{background:#16a34a}.mk-raxis-bar.mid i{background:#d97706}.mk-raxis-bar.bad i{background:#dc2626}
.mk-raxis-v{flex:none;width:30px;text-align:right;font-size:12.5px;font-weight:800;color:var(--ink)}
.mk-warn{margin:16px 0 0;padding:14px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px}
.mk-warn b{display:block;font-size:13px;color:#b91c1c;margin-bottom:8px}
.mk-warn ul{margin:0;padding-left:18px}
.mk-warn li{font-size:12.5px;color:#7f1d1d;line-height:1.75;margin:5px 0}
.mk-ok{margin:16px 0 0;padding:14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;font-size:13px;color:#166534;line-height:1.7}
.mk-redo{margin:14px 0 0;padding:14px;background:var(--bg,#f8fafc);border-radius:10px}
.mk-redo b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:8px}
.mk-redo-i{font-size:12.5px;color:var(--ink2);line-height:1.9}
.mk-actions{margin:16px 0 0}
body.dark .mk-set,body.dark .mk-run,body.dark .mk-result{background:#1e293b;border-color:#334155}
body.dark .mk-intro{background:#1e1b4b}
body.dark .mk-btn{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .mk-btn.primary{background:#ea580c;border-color:#ea580c;color:#fff}
body.dark .mk-dot{background:#1e293b;border-color:#334155;color:#94a3b8}
body.dark .mk-dot.on{background:#ea580c;border-color:#ea580c;color:#fff}
body.dark .mk-press,body.dark .mk-badge{background:#431407;border-color:#7c2d12;color:#fdba74}
body.dark .mk-warn{background:#450a0a;border-color:#7f1d1d}
body.dark .mk-warn b{color:#fca5a5}body.dark .mk-warn li{color:#fecaca}
body.dark .mk-ok{background:#052e16;border-color:#166534;color:#bbf7d0}
body.dark .mk-redo,body.dark .mk-ref-plain{background:#0f172a}
@media(max-width:600px){.mk-q{font-size:15.5px}.mk-clock{font-size:38px}.mk-axis{flex-wrap:wrap;gap:6px}.mk-axis-n{flex:1 1 100%}}


/* 받아쓰기 · 기계 지표 · AI 평가 */
.mk-dictate{margin:10px 0 0;padding:12px 14px;background:var(--bg,#f8fafc);border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--ink2);line-height:1.75;min-height:52px;max-height:160px;overflow-y:auto}
.mk-metric{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.mk-metric-t{font-size:12.5px;font-weight:800;color:var(--ink2);margin:0 0 10px}
.mk-metric-row{display:flex;gap:8px;flex-wrap:wrap}
.mk-m{flex:1 1 90px;text-align:center;padding:10px 8px;border-radius:10px;border:1px solid var(--line);background:#fff}
.mk-m b{display:block;font-size:19px;font-weight:900;line-height:1.2}
.mk-m i{display:block;font-size:11px;font-style:normal;color:var(--ink2);margin-top:3px}
.mk-m.good b{color:#16a34a}.mk-m.mid b{color:#d97706}.mk-m.bad b{color:#dc2626}
.mk-mhint{font-size:12.5px;color:var(--ink);line-height:1.7;margin:10px 0 0;padding:10px 12px;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px}
.mk-said{margin:10px 0 0;padding:11px 13px;background:var(--bg,#f8fafc);border-radius:8px;font-size:12.5px;color:var(--ink2);line-height:1.8}
.mk-ai{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.mk-ai-t{font-size:13.5px;font-weight:900;color:#4f46e5;margin:0 0 10px}
.mk-ai-top{padding:12px 14px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;font-size:13px;color:#7f1d1d;line-height:1.75;margin:0 0 10px}
.mk-ai-top b{color:#b91c1c}
.mk-ai-sum{font-size:13.5px;color:var(--ink);line-height:1.8;margin:0 0 14px}
.mk-ai-why{font-size:12.5px;color:var(--ink2);line-height:1.7;margin:-4px 0 10px;padding-left:2px}
.mk-ai-qs{margin:14px 0 0;padding:13px;background:var(--bg,#f8fafc);border-radius:10px}
.mk-ai-qs>b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:9px}
.mk-ai-q{display:flex;gap:9px;font-size:12.5px;color:var(--ink);line-height:1.75;margin:0 0 9px}
.mk-ai-qn{flex:none;width:22px;height:22px;border-radius:6px;background:#eef2ff;color:#4f46e5;font-weight:800;text-align:center;line-height:22px;font-size:11.5px}
.mk-ai-q em{font-style:normal;font-weight:800;color:#16a34a}
.mk-ai-q em.fix{color:#c2410c}
.mk-ai-err{padding:12px 14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;font-size:13px;color:#9a3412;line-height:1.7;margin:0 0 10px}
body.dark .mk-dictate,body.dark .mk-said,body.dark .mk-ai-qs{background:#0f172a;border-color:#334155}
body.dark .mk-m{background:#0f172a;border-color:#334155}
body.dark .mk-mhint,body.dark .mk-ai-err{background:#431407;border-color:#7c2d12;color:#fdba74}
body.dark .mk-ai-top{background:#450a0a;border-color:#7f1d1d;color:#fecaca}
body.dark .mk-ai-top b{color:#fca5a5}
body.dark .mk-ai-qn{background:#312e81;color:#c7d2fe}

/* 면접 원고 다크모드 */
body.dark .iv-part{background:#1e293b;border-color:#334155;color:#94a3b8}
body.dark .iv-part.on{background:#6d28d9;border-color:#6d28d9;color:#fff}
body.dark .iv-unit{background:#1e293b;border-color:#334155;color:#94a3b8}
body.dark .iv-unit.on{background:#312e81;border-color:#6366f1;color:#c7d2fe}
body.dark .iv-kw{background:#1e1b4b;border-color:#3730a3;color:#c7d2fe}
body.dark .iv-item{background:#1e293b;border-color:#334155}
body.dark .iv-item.open{border-color:#6366f1}
body.dark .iv-body{border-top-color:#334155}
body.dark .iv-concl{background:#1e1b4b}
body.dark .iv-concl b,body.dark .iv-close b{color:#a5b4fc}
body.dark .iv-close,body.dark .iv-quote,body.dark .iv-script{background:#0f172a;border-color:#334155}
body.dark .iv-quote{border-left-color:#475569}
body.dark .iv-ref{background:#431407;border-color:#7c2d12}
body.dark .iv-ref b{color:#fdba74}
body.dark .iv-jump{background:#1e293b;border-color:#7c2d12;color:#fdba74}
body.dark .iv-tbl th{background:#0f172a;color:#94a3b8}
body.dark .iv-tbl th,body.dark .iv-tbl td{border-color:#334155}
body.dark .iv-script>summary{color:#a5b4fc}
body.dark .iv-script[open]>summary{border-bottom-color:#334155}

/* 면접 페이지 다크모드 */
html[data-theme="dark"] #pageInterview .iv-card{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] #pageInterview .iv-card-title{color:#e2e8f0 !important}
html[data-theme="dark"] #pageInterview .iv-card-desc{color:#94a3b8 !important}
html[data-theme="dark"] #pageInterview .iv-warn{background:rgba(124,45,18,.25) !important;border-color:#7c2d12 !important}
html[data-theme="dark"] #pageInterview .iv-warn-title{color:#a5b4fc !important}
html[data-theme="dark"] #pageInterview .iv-warn-body{color:#fed7aa !important}
html[data-theme="dark"] #pageInterview .iv-timeline{background:rgba(30,58,138,.3) !important;border-color:#4f46e5 !important}
html[data-theme="dark"] #pageInterview .iv-timeline-title{color:#93c5fd !important}
html[data-theme="dark"] #pageInterview .iv-timeline-body{color:#bfdbfe !important}
html[data-theme="dark"] #pageInterview .iv-section-title{color:#e2e8f0 !important}
body.dark .chip{background:#0f172a;border-color:#334155;color:#cbd5e1}
body.dark .chip:hover{border-color:#60a5fa;color:#fff}
body.dark .chip.on{background:#6366f1;color:#fff;border-color:#6366f1}
body.dark .mode-card{background:#1e293b;border-color:#334155}
body.dark .mode-card h3,body.dark .mode-card p,body.dark .mode-card .why{color:#cbd5e1}
body.dark .mode-card.active{background:#1e293b;box-shadow:0 0 0 1px #60a5fa inset}
body.dark .law-page{background:#1a202c;color:#e2e8f0}
body.dark .law-line.upcoming{color:#64748b}
body.dark .law-line.current{background:#3a3a1a;color:#eef2ff;border-left-color:#fde047}
body.dark .law-line.done{color:#cbd5e1}
body.dark .law-line.header{color:#93c5fd}
body.dark .study-head{background:#0f172a;border-color:#334155}
body.dark .study-head .info b{color:#fff}
body.dark .study-btn{background:#1e293b;color:#cbd5e1;border-color:#334155}
body.dark .study-btn:hover{background:#334155;color:#fff;border-color:#60a5fa}
body.dark .type-dock{background:#0f172a;border-color:#334155}
body.dark .type-input.type-pad{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .first-study-card{background:#1e293b;border-color:#334155}
body.dark .first-study-card h2{color:#bfdbfe}
body.dark .live-stats-wrap{background:#0f172a;border-color:#334155}
body.dark .live-tile{background:#1e293b;border-color:#334155}
body.dark .live-tile .value{color:#fff}
body.dark .hero{background:radial-gradient(ellipse 80% 60% at center 32%,#211c4d 0%,#141a30 55%,#0f172a 100%)}
body.dark .hero h1{color:#e2e8f0}
body.dark .stepper .seg .dot{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .stepper .seg.active .dot{background:#60a5fa;color:#0f172a;border-color:#60a5fa}
body.dark .stepper .bar{background:#334155}
body.dark footer{background:#0f172a;border-color:#334155}
body.dark footer div,body.dark footer span,body.dark footer a{color:#cbd5e1}
body.dark .nav-meta b{color:#fff}
body.dark .urgent-banner{background:#1e293b;border-color:#451a03;color:#cbd5e1}
body.dark .summary-bar{background:#1e293b;color:#cbd5e1}
body.dark .summary-bar b{color:#fff}
body.dark .articles-box{background:#0f172a;border-color:#334155}
body.dark .chap-block{background:#1e293b;border-color:#334155}
body.dark .chap-head:hover{background:#334155}
body.dark .article-chip{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .modal,body.dark .fb-box,body.dark .legal-modal,body.dark .textbook-box,body.dark .sync-box{background:#1e293b;color:#e2e8f0}
body.dark .modal-body,body.dark .fb-body,body.dark .legal-body,body.dark .textbook-body,body.dark .sync-body{color:#cbd5e1}
body.dark .resume-bar{color:#94a3b8}
body.dark .nav-live{color:#94a3b8}
body.dark .study-tip{background:#1e293b;border-color:#3b82f6;color:#dbeafe}
body.dark .ex-line{border-color:#334155}
body.dark .explain-left{background:#1a202c}
body.dark .explain-right{background:#1e293b}
body.dark .explain-tts-sticky{background:#1e293b;border-top-color:#334155}
body.dark .explain-tts{background:#0f172a;border-color:#334155}
body.dark .tts-engine-btn{background:#1e293b;color:#94a3b8;border-color:#334155}
body.dark .tts-engine-btn:hover{background:#334155;border-color:#64748b;color:#cbd5e1}
body.dark .tts-engine-btn.active{background:#6d28d9;color:#fff;border-color:#6d28d9}
/* 다크모드 — 누락 컴포넌트 일괄 보정 */
body.dark .warning-section{background:linear-gradient(135deg,#1a1408 0%,#231a0a 100%);border-color:#451a03}
body.dark .warning-section h2{color:#a5b4fc}
body.dark .warning-section .lead{color:#c7d2fe}
body.dark .warning-tile{background:#1e293b;border-color:#451a03;color:#a5b4fc}
body.dark .warning-tile .label{color:#a5b4fc}
body.dark .warning-tile .value{color:#c7d2fe}
body.dark .warning-tile .desc{color:#cbd5e1}
body.dark .science-card{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .science-card h3{color:#e2e8f0}
body.dark .science-card .num{color:#60a5fa}
body.dark .science-card p{color:#cbd5e1}
body.dark .science-card cite{color:#64748b}
body.dark .science-head h2{color:#e2e8f0}
body.dark .science-head p{color:#94a3b8}
body.dark .science{background:linear-gradient(180deg,#0f172a 0%,#1e293b 100%);border-color:#334155}
body.dark .qr-pop{background:#1e293b;border-color:#3b82f6;color:#e2e8f0}
body.dark .qr-pop .qr-head{color:#cbd5e1}
body.dark .qr-pop .qr-ctx{background:#0f172a;color:#dbeafe}
body.dark .qr-pop .qr-chip{background:#0f172a;color:#cbd5e1;border-color:#334155}
body.dark .qr-pop input.qr-memo{background:#0f172a;color:#e2e8f0;border-color:#334155}
body.dark .compare-col{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .compare-col .text{color:#cbd5e1}
body.dark .trap-stage,body.dark .cf-stage,body.dark .app-stage{background:#0f172a}
body.dark .trap-card,body.dark .cf-card{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .trap-line{color:#e2e8f0}
body.dark .trap-hud{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .cf-table th{background:#0f172a;color:#e2e8f0;border-color:#334155}
body.dark .cf-table td{background:#1e293b;color:#cbd5e1;border-color:#334155}
body.dark .cf-table tr:nth-child(odd) td{background:#15202f}
body.dark .cf-tab{background:#1e293b;border-color:#334155;color:#94a3b8}
body.dark .cf-tab.on{background:#6366f1;color:#fff}
body.dark .app-list{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .app-viewer{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .app-list .item:hover{background:#334155}
body.dark .app-list .item.active{background:#4f46e5;color:#dbeafe}
body.dark .toc-panel{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .toc-panel .toc-list{background:#0f172a}
body.dark .toc-panel .toc-item{color:#cbd5e1}
body.dark .toc-panel .toc-item:hover{background:#334155}
body.dark .toc-panel .toc-item.current{background:#4f46e5;color:#eef2ff}
body.dark .kbd-hint-banner{background:linear-gradient(135deg,#4f46e5,#1e293b) !important;color:#dbeafe !important;border-color:#3b82f6 !important}
body.dark .kbd-hint-banner .x-btn{color:#dbeafe}
body.dark .exam-hint{background:#1e293b;border-color:#451a03;color:#a5b4fc}
body.dark .exam-hint b{color:#c7d2fe}
body.dark .exam-hint code{background:#451a03;color:#c7d2fe}
body.dark .summary-bar .btn-primary{background:#fff;color:#0f172a;border-color:#fff}
body.dark .summary-bar .btn-primary:hover{background:#60a5fa;color:#fff;border-color:#60a5fa}
body.dark .summary-bar .btn-primary:disabled{background:#475569;color:#94a3b8;border-color:#475569}
body.dark .article-controls a{color:#60a5fa}
body.dark .article-controls .resume{color:#94a3b8}
body.dark .chap-head .arrow{color:#94a3b8}
body.dark .chap-head .name{color:#e2e8f0}
body.dark .chap-head .stats{color:#94a3b8}
body.dark .chap-head .pct{color:#60a5fa}
body.dark .chap-head .chk{background:#0f172a;border-color:#334155}
body.dark .chap-head .chk.all{background:#6366f1;border-color:#6366f1}
body.dark .chap-body{background:#0f172a;border-color:#334155}
body.dark .sub-chk{background:#0f172a;border-color:#334155}
body.dark .article-chip.completed{background:#14532d;border-color:#15803d;color:#bbf7d0}
body.dark .blank{background:#451a03;border-color:#a5b4fc;color:#c7d2fe}
body.dark .blank.revealed{background:#14532d;border-color:#15803d;color:#bbf7d0}
body.dark .blank.typing{background:#4f46e5;border-color:#3b82f6;color:#dbeafe}
/* 다크모드 — 학습 도구 모달 input/select 보정 */
body.dark .tools-search input,
body.dark .dg-input,
body.dark #fontSlider,
body.dark #goalInput{background:#0f172a;color:#e2e8f0;border-color:#334155}
body.dark .tools-list-item{background:#0f172a;border-color:#334155;color:#cbd5e1}
body.dark .tools-list-item:hover{background:#4f46e5;border-color:#3b82f6}
body.dark .tools-list-item .text b{color:#fff}
body.dark .tools-stat{background:#0f172a;border-color:#334155;color:#cbd5e1}
body.dark .daily-goal{background:linear-gradient(135deg,#4f46e5,#1e293b);border-color:#3b82f6;color:#dbeafe}
body.dark .daily-goal .dg-head{color:#dbeafe}
body.dark .daily-goal .dg-bar{background:#334155}
body.dark .urgent-banner{background:#1e293b;border-color:#451a03;color:#a5b4fc}

/* 색맹 모드 — 정답·오답에 아이콘 추가 */
body.colorblind .blank.revealed::before{content:"✓ ";color:#0ea5e9}
body.colorblind .blank.typing::before{content:"∞ "}
body.colorblind .word.suspect::before{content:"? "}
body.colorblind .word.correct::before{content:"✓ "}
body.colorblind .word.wrong::before{content:"✗ "}
body.colorblind .word.missed::before{content:"⚠ "}

/* 북마크 ⭐ */
.law-line.bookmarked{position:relative}
.law-line.bookmarked::before{content:"⭐";position:absolute;left:-22px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.85}
.bookmark-toggle{cursor:pointer;color:#cbd5e1;font-size:16px;background:none;border:none;padding:6px;transition:transform .12s}
.bookmark-toggle.on{color:#a5b4fc;transform:scale(1.15)}

/* 학습 도구 모달 (통합) */
.tools-modal{position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(4px);z-index:9100;display:none;align-items:center;justify-content:center;padding:16px}
.tools-modal.show{display:flex;animation:fadeIn .18s}
.tools-box{max-width:680px;width:100%;background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.32);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;animation:zoomIn .2s}
body.dark .tools-box{background:#1e293b;color:#e2e8f0}
.tools-head{padding:18px 22px 12px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;display:flex;justify-content:space-between;align-items:center}
.tools-head h3{margin:0;font-size:17px;font-weight:900}
.tools-head .x{background:rgba(255,255,255,.18);color:#fff;border:none;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;font-weight:700}
/* PDF 인쇄 모달(원문회독·강의 공용) */
.pr-box{max-width:420px}
.pr-body{padding:18px 22px 22px}
.pr-field{margin-top:14px}
.pr-field:first-child{margin-top:0}
.pr-label{font-size:12px;font-weight:800;color:var(--ink2,#64748b);margin-bottom:6px}
.pr-radios{display:flex;flex-direction:column;gap:6px}
.pr-radios label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink,#0f172a);background:var(--bg,#f1f5f9);border:1.5px solid var(--line2,#cbd5e1);border-radius:10px;padding:9px 12px;cursor:pointer}
.pr-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink,#0f172a);margin-top:16px;cursor:pointer}
.pr-count{font-size:12px;color:var(--ink3,#94a3b8);font-weight:700;margin:14px 0 2px}
.pr-chips{display:flex;gap:6px;flex-wrap:wrap}
.pr-chip{padding:8px 14px;border-radius:20px;border:1.5px solid var(--line2,#cbd5e1);background:var(--bg,#f1f5f9);color:var(--ink2,#64748b);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pr-chip.active{border-color:#4f46e5;background:#4f46e5;color:#fff}
.ob-btn{width:100%;margin-top:20px;background:#4f46e5;color:#fff;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.ob-btn:active{transform:translateY(1px)}
.ob-btn:disabled{opacity:.5;cursor:default}
.tools-tabs{display:flex;background:#f8fafc;border-bottom:1px solid var(--line);overflow-x:auto;flex-wrap:nowrap}
body.dark .tools-tabs{background:#0f172a;border-color:#334155}
.tools-tab{padding:11px 14px;background:none;border:none;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink2);white-space:nowrap;font-family:inherit;border-bottom:3px solid transparent;min-height:44px;transition:all .12s}
.tools-tab:hover{color:var(--ink);background:rgba(29,78,216,.06)}
.tools-tab.active{color:#6366f1;border-bottom-color:#6366f1;background:#fff}
body.dark .tools-tab.active{background:#1e293b;color:#60a5fa;border-bottom-color:#60a5fa}
.tools-body{flex:1;overflow-y:auto;padding:18px 22px}
.tools-pane{display:none}
.tools-pane.active{display:block}
.tools-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);gap:12px}
.tools-row:last-child{border-bottom:none}
.tools-row .label{font-size:13.5px;font-weight:700;color:var(--ink)}
.tools-row .desc{font-size:11.5px;color:var(--ink2);margin-top:2px;line-height:1.5}
.tools-toggle{width:46px;height:26px;background:#cbd5e1;border-radius:999px;border:none;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0}
.tools-toggle::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tools-toggle.on{background:#6366f1}
.tools-toggle.on::after{left:23px}

.tools-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:8px 0}
@media (max-width:360px){.tools-stat-grid{grid-template-columns:1fr}}
.tools-stat{padding:14px 16px;background:#f8fafc;border-radius:10px;border:1px solid var(--line)}
body.dark .tools-stat{background:#0f172a;border-color:#334155}
.tools-stat .stat-label{font-size:11px;color:var(--ink2);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tools-stat .stat-value{font-size:24px;font-weight:900;color:#6366f1;font-family:'JetBrains Mono',monospace;margin-top:4px}
.tools-stat .stat-value .unit{font-size:12px;color:var(--ink2);margin-left:3px}

.tools-list{display:flex;flex-direction:column;gap:6px}
.tools-list-item{padding:10px 12px;background:#f8fafc;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:12.5px;cursor:pointer;transition:background .12s}
body.dark .tools-list-item{background:#0f172a;border-color:#334155}
.tools-list-item:hover{background:#dbeafe;border-color:#60a5fa}
.tools-list-item .num{font-family:'JetBrains Mono',monospace;font-weight:800;color:#6366f1;flex-shrink:0;min-width:50px;font-size:11px}
.tools-list-item .text{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools-list-item .del{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:14px;padding:4px 6px}
.tools-list-item .del:hover{color:#dc2626}

.tools-search{display:flex;gap:6px;margin-bottom:12px}
.tools-search input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}
.tools-search button{padding:10px 14px;background:#6366f1;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-family:inherit;font-size:13px;min-height:44px}

.tools-empty{padding:30px;text-align:center;color:var(--ink2);font-size:13px}

/* 섹션 헤더 — 기능 그룹화 */
.tools-section-title{
  font-size:11px;font-weight:800;letter-spacing:.06em;
  color:#4f46e5;text-transform:none;
  margin:18px 0 8px;padding:0 0 4px;
  border-bottom:1px solid var(--line)
}
.tools-section-title:first-child{margin-top:0}
body.dark .tools-section-title{color:#93c5fd;border-color:#334155}

/* PWA 설치 버튼 */
.tools-install-btn{
  padding:8px 16px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;
  border:none;border-radius:8px;font-weight:800;font-size:12px;cursor:pointer;
  font-family:inherit;min-height:36px;letter-spacing:.02em
}
.tools-install-btn:hover{filter:brightness(1.08)}

/* 학습 캘린더 — 진짜 월별 달력 형식 */
.cal-heatmap{padding:14px;background:#f8fafc;border-radius:12px;border:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
html[data-theme="dark"] .cal-heatmap{background:#0f172a;border-color:#334155}
.cal-summary{font-size:13px;color:#475569;font-weight:600;text-align:center;padding-bottom:6px;border-bottom:1px solid var(--line)}
.cal-summary b{color:#15803d;font-weight:800}
.cal-month{}
.cal-month-head{font-size:15px;font-weight:800;color:#1e293b;margin-bottom:10px;text-align:center}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cal-weekday{font-size:11px;font-weight:700;color:#64748b;text-align:center;padding:4px 0}
.cal-weekday.sun{color:#dc2626}
.cal-weekday.sat{color:#4f46e5}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-day{aspect-ratio:1;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:3px;font-size:11px;color:#475569;display:flex;flex-direction:column;justify-content:space-between;position:relative;cursor:default;min-height:36px}
.cal-day.empty{background:transparent;border:none}
.cal-day.future{opacity:.4}
.cal-day-num{font-weight:600;font-size:11px}
.cal-day-cnt{font-size:9px;font-weight:800;color:#15803d;text-align:right}
.cal-day.lvl-1{background:#dcfce7;border-color:#bbf7d0}
.cal-day.lvl-2{background:#bbf7d0;border-color:#86efac;color:#166534}
.cal-day.lvl-3{background:#86efac;border-color:#4ade80;color:#14532d;font-weight:700}
.cal-day.lvl-4{background:#22c55e;border-color:#16a34a;color:#fff;font-weight:800}
.cal-day.lvl-4 .cal-day-cnt{color:#eef2ff}
.cal-day.today{outline:2px solid #dc2626;outline-offset:1px;font-weight:900;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
html[data-theme="dark"] .cal-summary{color:#a5b4fc;border-bottom-color:#334155}
html[data-theme="dark"] .cal-month-head{color:#fde047}
html[data-theme="dark"] .cal-day{background:#1e293b;border-color:#334155;color:#cbd5e1}
html[data-theme="dark"] .cal-day.lvl-1{background:#14532d;border-color:#166534}
html[data-theme="dark"] .cal-day.lvl-2{background:#166534;border-color:#16a34a;color:#bbf7d0}
html[data-theme="dark"] .cal-day.lvl-3{background:#16a34a;border-color:#22c55e;color:#fff}
html[data-theme="dark"] .cal-day.lvl-4{background:#15803d;border-color:#166534;color:#fff}
@media (max-width:540px){
  .cal-day{min-height:30px;font-size:10px;padding:2px}
  .cal-day-cnt{font-size:8px}
}
html[data-theme="dark"] .cal-cell.lvl-4{background:#4ade80;border-color:#86efac}
.cal-cell.today{outline:2px solid #6366f1;outline-offset:1px}
.cal-cell:hover::after{
  content:attr(data-tip);position:absolute;
  bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  padding:4px 8px;background:#0f172a;color:#fff;
  font-size:10px;font-family:'JetBrains Mono',monospace;
  border-radius:4px;white-space:nowrap;z-index:10;
  pointer-events:none
}
.cal-legend{
  display:flex;align-items:center;gap:5px;justify-content:flex-end;
  font-size:10px;color:var(--ink2);font-weight:700
}
.cal-legend .cal-cell{width:11px;height:11px;flex-shrink:0;border-radius:2px}

.font-slider{display:flex;align-items:center;gap:10px;flex:1}
.font-slider input{flex:1}
.font-slider .val{font-family:'JetBrains Mono',monospace;font-weight:700;color:#6366f1;min-width:40px;text-align:right}

/* 일일 목표 진행률 */
.daily-goal{padding:12px 14px;background:linear-gradient(135deg,#dbeafe,#eff6ff);border-radius:10px;border:1px solid #bfdbfe;margin-bottom:12px}
body.dark .daily-goal{background:linear-gradient(135deg,#4f46e5,#1e293b);border-color:#3b82f6}
.daily-goal .dg-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:#4f46e5;margin-bottom:6px}
body.dark .daily-goal .dg-head{color:#bfdbfe}
.daily-goal .dg-bar{height:8px;background:#bfdbfe;border-radius:999px;overflow:hidden}
body.dark .daily-goal .dg-bar{background:#334155}
.daily-goal .dg-fill{height:100%;background:linear-gradient(90deg,#6366f1,#3b82f6);transition:width .3s}
.daily-goal .dg-input{width:60px;padding:4px 8px;border:1px solid #bfdbfe;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#4f46e5;text-align:center}

/* 스트릭 + 통계 표시 (nav 우상단) */
/* 학습 흔적 공유 모달 */
.trace-modal-bg{position:fixed;inset:0;background:rgba(11,9,32,.65);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s ease-out}
.trace-modal-bg.show{display:flex}
.trace-modal-box{background:#fff;border-radius:18px;padding:28px 26px 22px;width:100%;max-width:440px;position:relative;box-shadow:0 24px 64px rgba(11,9,32,.4);animation:popIn .22s cubic-bezier(.34,1.56,.64,1)}

/* 이어서 학습 안내 모달 */
.resume-modal-bg{position:fixed;inset:0;background:rgba(11,9,32,.7);backdrop-filter:blur(6px);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px;animation:fadeIn .18s ease-out}
.resume-modal-bg.show{display:flex}
.resume-modal-box{background:#fff;border-radius:20px;padding:30px 28px 22px;width:100%;max-width:580px;position:relative;box-shadow:0 32px 80px rgba(11,9,32,.45);animation:popIn .26s cubic-bezier(.34,1.56,.64,1)}
.resume-close{position:absolute;top:14px;right:16px;background:transparent;border:none;font-size:18px;color:#94a3b8;cursor:pointer;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:inherit}
.resume-close:hover{background:#f1f5f9;color:#475569}
.resume-head{text-align:center;margin-bottom:18px}
.resume-emoji{font-size:42px;margin-bottom:10px;line-height:1}
.resume-head h2{font-size:21px;font-weight:900;color:var(--ink);margin:0 0 6px;letter-spacing:-.02em;font-family:'Pretendard Variable',sans-serif}
.resume-sub{font-size:13px;color:var(--ink2);margin:0;line-height:1.55;font-weight:500}
.resume-detail{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;border-radius:12px;padding:16px 18px;margin:14px 0 18px;font-size:14px;line-height:1.65;color:#4f46e5;font-weight:600}
.resume-detail .rd-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.resume-detail .rd-key{color:#475569;font-size:12px;font-weight:600;letter-spacing:.01em}
.resume-detail .rd-val{color:#4f46e5;font-weight:800;font-size:13.5px}
.resume-actions{display:flex;gap:10px;margin-bottom:18px}
.resume-btn{flex:1;padding:13px 16px;border:none;border-radius:11px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:-.01em;transition:all .15s;min-height:48px}
.resume-btn.resume-cancel{background:#f1f5f9;color:#475569;border:1px solid var(--line)}
.resume-btn.resume-cancel:hover{background:#e2e8f0}
.resume-btn.resume-continue{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;flex:1.4;box-shadow:0 4px 14px rgba(29,78,216,.32)}
.resume-btn.resume-continue:hover{background:linear-gradient(135deg,#6366f1,#4f46e5);transform:translateY(-1px);box-shadow:0 6px 18px rgba(29,78,216,.4)}
.resume-ad-slot{margin:0;min-height:0;border-top:1px dashed var(--line);padding-top:14px}
.resume-ad-slot:empty,
.resume-ad-slot.empty{display:none}
@media (max-width:480px){
  .resume-modal-box{padding:24px 20px 18px;border-radius:16px}
  .resume-head h2{font-size:18.5px}
  .resume-sub{font-size:12px}
  .resume-emoji{font-size:36px}
  .resume-detail{padding:13px 14px;font-size:13px}
  .resume-btn{font-size:13px;padding:11px 14px;min-height:44px}
}
html[data-theme="dark"] .resume-modal-box{background:#1a1838;border:1px solid rgba(192,132,252,.2)}
html[data-theme="dark"] .resume-detail{background:linear-gradient(135deg,rgba(103,232,249,.12),rgba(192,132,252,.1));border-color:rgba(192,132,252,.3);color:#e9d5ff}
html[data-theme="dark"] .resume-detail .rd-key{color:#a5b4fc}
html[data-theme="dark"] .resume-detail .rd-val{color:#c7d2fe}
html[data-theme="dark"] .resume-btn.resume-cancel{background:rgba(11,9,32,.6);color:var(--ink2);border-color:rgba(192,132,252,.2)}
html[data-theme="dark"] .resume-btn.resume-cancel:hover{background:rgba(11,9,32,.9)}
html[data-theme="dark"] .resume-close:hover{background:rgba(192,132,252,.15);color:var(--ink)}
.trace-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:#f5f7fb;border:none;font-size:14px;color:var(--ink2);cursor:pointer;font-family:inherit}
.trace-close:hover{background:#e5e7eb;color:var(--ink)}
.trace-head{text-align:center;margin-bottom:18px}
.trace-head h2{font-size:18px;font-weight:800;margin:0 0 6px;color:var(--ink);letter-spacing:-.01em;line-height:1.4}
.trace-head p{font-size:12.5px;color:var(--ink2);margin:0;line-height:1.55}
.trace-summary{padding:16px 18px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;border-radius:12px;text-align:center;font-size:15px;font-weight:700;color:#3730a3;letter-spacing:-.01em;margin-bottom:14px}
.trace-form{margin-bottom:14px}
.trace-label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:6px;letter-spacing:-.01em}
.trace-form input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:'Pretendard Variable',inherit;background:#fff;color:var(--ink);outline:none}
.trace-form input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.trace-skip{display:flex;align-items:center;gap:8px;padding:9px 0;font-size:13px;color:var(--ink2);cursor:pointer;margin-bottom:14px}
.trace-skip input{margin:0;width:16px;height:16px;accent-color:#6366f1;cursor:pointer}
.trace-actions{display:flex;gap:8px}
.trace-btn{flex:1;padding:11px 16px;border-radius:10px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:'Pretendard Variable',inherit;letter-spacing:-.01em;border:none;transition:filter .12s,transform .08s}
.trace-cancel{background:transparent;color:var(--ink2);border:1px solid var(--line)}
.trace-cancel:hover{background:#f5f7fb;color:var(--ink)}
.trace-submit{background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff}
.trace-submit:hover{filter:brightness(1.08)}
.trace-submit:disabled{opacity:.5;cursor:not-allowed}
html[data-theme="dark"] .trace-modal-box{background:#1a1838}
html[data-theme="dark"] .trace-close{background:rgba(192,132,252,.1);color:var(--ink2)}
html[data-theme="dark"] .trace-head h2{color:#f5f7ff}
html[data-theme="dark"] .trace-summary{background:linear-gradient(135deg,rgba(103,232,249,.12),rgba(192,132,252,.12));border-color:rgba(192,132,252,.3);color:var(--c1)}
html[data-theme="dark"] .trace-form input{background:rgba(192,132,252,.06);border-color:rgba(192,132,252,.25);color:var(--ink)}
html[data-theme="dark"] .trace-cancel{border-color:rgba(192,132,252,.25);color:var(--ink2)}
html[data-theme="dark"] .trace-submit{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}

/* 쿠키 동의 배너 (GDPR/CCPA/PIPA) */
.cookie-consent{position:fixed;left:14px;right:14px;bottom:14px;z-index:9990;background:rgba(15,23,42,.96);color:#fff;border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.4);backdrop-filter:blur(10px);max-width:980px;margin:0 auto;animation:ccSlideUp .25s ease-out}
@keyframes ccSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.cc-inner{display:flex;align-items:center;gap:16px;padding:14px 18px;flex-wrap:wrap}
.cc-text{flex:1;min-width:260px}
.cc-text b{font-size:13px;font-weight:800;display:block;margin-bottom:3px;color:#c7d2fe}
.cc-text p{margin:0;font-size:12px;line-height:1.55;color:#cbd5e1}
.cc-text a{color:#67e8f9;text-decoration:underline}
.cc-actions{display:flex;gap:8px;flex-shrink:0}
.cc-btn{padding:9px 18px;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Pretendard Variable',inherit;letter-spacing:-.01em;border:none;transition:filter .12s}
.cc-reject{background:transparent;color:#cbd5e1;border:1px solid rgba(255,255,255,.25)}
.cc-reject:hover{background:rgba(255,255,255,.08)}
.cc-accept{background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff}
.cc-accept:hover{filter:brightness(1.1)}
@media (max-width:540px){
  .cookie-consent{left:8px;right:8px;bottom:8px}
  .cc-inner{padding:12px 14px;gap:10px}
  .cc-actions{width:100%;justify-content:flex-end}
  .cc-btn{padding:8px 14px;font-size:12px}
}

/* 로그인 / 사용자 버튼 (헤더 유틸) */
.auth-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;min-height:36px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Pretendard Variable',inherit;letter-spacing:-.01em;transition:filter .12s,transform .08s;border:none}
.auth-login{background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff}
.auth-login:hover{filter:brightness(1.08)}
.auth-login:active{transform:scale(.97)}
.auth-user{background:rgba(29,78,216,.08);color:#6366f1;border:1px solid rgba(29,78,216,.25);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-user:hover{background:rgba(29,78,216,.14)}
html[data-theme="dark"] .auth-login{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}
html[data-theme="dark"] .auth-user{background:rgba(103,232,249,.1);color:var(--c1);border-color:rgba(192,132,252,.3)}
@media (max-width:720px){
  .auth-login{padding:7px 10px;font-size:11px}
  .auth-user{padding:7px 10px;font-size:11px;max-width:90px}
}

/* 로그인 모달 */
.login-modal-bg{position:fixed;inset:0;background:rgba(11,9,32,.65);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s ease-out}
.login-modal-bg.show{display:flex}
.login-modal-box{background:#fff;border-radius:18px;padding:30px 28px 22px;width:100%;max-width:420px;position:relative;box-shadow:0 24px 64px rgba(11,9,32,.4);animation:popIn .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.login-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:#f5f7fb;border:none;font-size:14px;color:var(--ink2);cursor:pointer;font-family:inherit}
.login-close:hover{background:#e5e7eb;color:var(--ink)}
.login-head{text-align:center;margin-bottom:22px}
.login-logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-weight:800}
.login-head h2{font-size:17px;font-weight:800;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em;line-height:1.4}
.login-head p{font-size:13px;line-height:1.6;color:var(--ink2);margin:0}
.login-trial-badge{display:inline-block;margin:12px auto 0;padding:7px 16px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4338ca;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:-.01em;word-break:keep-all;white-space:nowrap;max-width:100%}
.login-trial-badge b{font-weight:900}
html[data-theme="dark"] .login-trial-badge{background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(59,130,246,.16));color:#c7d2fe}
.login-consent{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;background:#f5f7fb;border:1px solid var(--line);border-radius:9px;margin-bottom:14px;cursor:pointer;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.login-consent input[type="checkbox"]{margin:1px 0 0 0;width:16px;height:16px;cursor:pointer;flex-shrink:0;accent-color:#6366f1}
.login-consent a{color:#6366f1;text-decoration:underline}
.login-consent .login-required{color:#dc2626;font-weight:700;font-size:11px}
.login-google-disabled{opacity:.4;pointer-events:none;filter:grayscale(.7)}
html[data-theme="dark"] .login-consent{background:rgba(192,132,252,.06);border-color:rgba(192,132,252,.2);color:var(--ink2)}
html[data-theme="dark"] .login-consent a{color:var(--c1)}
html[data-theme="dark"] .login-consent .login-required{color:#fca5a5}
.login-google-slot{display:flex;justify-content:center;min-height:44px;margin-bottom:14px;transition:opacity .15s,filter .15s}
.login-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--ink3);font-size:11px;font-weight:600;letter-spacing:.04em}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.login-anon-btn{width:100%;padding:11px 16px;background:transparent;color:var(--ink2);border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:13.5px;cursor:pointer;font-family:'Pretendard Variable',inherit}
.login-anon-btn:hover{background:#f5f7fb;color:var(--ink)}
.login-foot{margin-top:14px;font-size:11px;color:var(--ink3);text-align:center;line-height:1.6}
.login-foot a{color:var(--ink2);text-decoration:underline}
html[data-theme="dark"] .login-modal-box{background:#1a1838;color:var(--ink);box-shadow:0 24px 64px rgba(0,0,0,.6)}
html[data-theme="dark"] .login-close{background:rgba(192,132,252,.1);color:var(--ink2)}
html[data-theme="dark"] .login-close:hover{background:rgba(192,132,252,.2)}
html[data-theme="dark"] .login-logo{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}
html[data-theme="dark"] .login-head h2{color:#f5f7ff}
html[data-theme="dark"] .login-anon-btn{border-color:rgba(192,132,252,.25);color:var(--ink2)}
html[data-theme="dark"] .login-anon-btn:hover{background:rgba(192,132,252,.08);color:var(--ink)}

/* ===== Soft Wall — 점진적 로그인 유도 모달 ===== */
.soft-wall-bg{position:fixed;inset:0;background:rgba(11,9,32,.7);backdrop-filter:blur(5px);z-index:10000;display:none;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease-out}
.soft-wall-bg.show{display:flex}
.soft-wall-box{background:#fff;border-radius:20px;padding:30px 26px 22px;width:100%;max-width:440px;position:relative;box-shadow:0 28px 70px rgba(11,9,32,.45);animation:popIn .26s cubic-bezier(.34,1.56,.64,1)}
.soft-wall-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:#f5f7fb;border:none;font-size:14px;color:var(--ink2);cursor:pointer;font-family:inherit}
.soft-wall-close:hover{background:#e5e7eb;color:var(--ink)}
.soft-wall-head{text-align:center;margin-bottom:18px}
.soft-wall-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.soft-wall-head h2{font-size:18px;font-weight:900;margin:0 0 6px;color:var(--ink);letter-spacing:-.02em;line-height:1.4}
.soft-wall-head p{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0}
.soft-wall-head .sw-emph{color:#dc2626;font-weight:800}
.soft-wall-benefits{background:#f8fafc;border-radius:12px;padding:14px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.sw-benefit{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.55;color:var(--ink2)}
.sw-benefit ._ic{flex-shrink:0;width:24px;height:24px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sw-benefit b{color:var(--ink)}
.soft-wall-cta{width:100%;padding:13px 16px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;border:none;border-radius:12px;font-weight:800;font-size:14.5px;cursor:pointer;font-family:inherit;margin-bottom:8px;box-shadow:0 4px 14px rgba(29,78,216,.28)}
.soft-wall-cta:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 6px 18px rgba(29,78,216,.34)}
.soft-wall-skip{width:100%;padding:9px 12px;background:transparent;color:var(--ink3);border:none;font-size:12px;cursor:pointer;font-family:inherit;text-decoration:underline}
.soft-wall-skip:hover{color:var(--ink2)}
.soft-wall-foot{margin-top:10px;font-size:11px;color:var(--ink3);text-align:center;line-height:1.55}
html[data-theme="dark"] .soft-wall-box{background:#1a1838;color:var(--ink)}
html[data-theme="dark"] .soft-wall-close{background:rgba(192,132,252,.1);color:var(--ink2)}
html[data-theme="dark"] .soft-wall-icon{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}
html[data-theme="dark"] .soft-wall-head h2{color:#f5f7ff}
html[data-theme="dark"] .soft-wall-benefits{background:rgba(192,132,252,.06)}
html[data-theme="dark"] .sw-benefit ._ic{background:rgba(192,132,252,.1)}
html[data-theme="dark"] .soft-wall-cta{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}

/* 사용자 메뉴 */
.user-menu-bg{position:fixed;inset:0;background:rgba(11,9,32,.4);z-index:9998;display:none;align-items:flex-start;justify-content:flex-end;padding:70px 28px 0;animation:fadeIn .12s ease-out}
.user-menu-bg.show{display:flex}
.user-menu-box{background:#fff;border-radius:14px;padding:18px;width:280px;box-shadow:0 16px 42px rgba(11,9,32,.25);animation:popIn .18s ease-out}
.um-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.um-pic{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e5e7eb}
.um-info{flex:1;min-width:0}
.um-name{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-email{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.um-nick-row{padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:12px}
.um-nick-label{display:block;font-size:11.5px;font-weight:700;color:var(--ink2);margin-bottom:6px;letter-spacing:-.005em}
.um-nick-edit{display:flex;gap:6px}
.um-nick-edit input{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:'Pretendard Variable',inherit;background:#fff;color:var(--ink);outline:none}
.um-nick-edit input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.um-nick-save{padding:8px 14px;background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:'Pretendard Variable',inherit;white-space:nowrap}
.um-nick-save:hover{filter:brightness(1.08)}
.um-nick-hint{font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.4}
html[data-theme="dark"] .um-nick-row{border-bottom-color:rgba(192,132,252,.2)}
html[data-theme="dark"] .um-nick-edit input{background:rgba(192,132,252,.06);border-color:rgba(192,132,252,.25);color:var(--ink)}
html[data-theme="dark"] .um-nick-save{background:linear-gradient(135deg,#67e8f9,#c084fc);color:#0a0918}
.um-actions{display:flex;gap:8px}
.um-btn{flex:1;padding:9px 12px;background:transparent;color:var(--ink2);border:1px solid var(--line);border-radius:8px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:'Pretendard Variable',inherit}
.um-btn:hover{background:#f5f7fb;color:var(--ink)}
.um-logout{color:#dc2626;border-color:rgba(220,38,38,.2)}
.um-logout:hover{background:#fef2f2;color:#dc2626}
html[data-theme="dark"] .user-menu-box{background:#1a1838;box-shadow:0 16px 42px rgba(0,0,0,.5)}
html[data-theme="dark"] .um-head{border-bottom-color:rgba(192,132,252,.2)}
html[data-theme="dark"] .um-name{color:#f5f7ff}
html[data-theme="dark"] .um-btn{border-color:rgba(192,132,252,.2);color:var(--ink2)}
html[data-theme="dark"] .um-btn:hover{background:rgba(192,132,252,.1)}
html[data-theme="dark"] .um-logout{color:#fca5a5;border-color:rgba(252,165,165,.25)}
html[data-theme="dark"] .um-logout:hover{background:rgba(252,165,165,.1)}

.streak-badge{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;min-height:36px;background:linear-gradient(135deg,#eef2ff,#c7d2fe);color:#78350f;border-radius:999px;font-size:11px;font-weight:800;cursor:pointer;border:1px solid #c7d2fe;font-family:'JetBrains Mono',monospace}
.streak-badge.dim{opacity:.55}
.streak-badge:hover{filter:brightness(1.05)}
@media (max-width:768px){
  .streak-badge .lbl{display:none}
  .streak-badge{min-height:40px;padding:9px 12px}
}

/* 학습 도구 nav 버튼 */
.tools-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);border:1px solid var(--line);cursor:pointer;font-size:16px;transition:all .12s;font-family:inherit}
@media (max-width:768px){.tools-nav-btn{width:44px;height:44px}}
.tools-nav-btn:hover{border-color:#6366f1;color:#6366f1;background:#eff6ff}
body.dark .tools-nav-btn{background:#1e293b;border-color:#334155;color:#cbd5e1}
body.dark .tools-nav-btn:hover{background:#334155;color:#60a5fa}

/* 받아쓰기 모드 (dictation) — 본문 가린 채 음성으로만 듣기 */
body[data-mode="dictation"] .law-line:not(.current){opacity:.05;color:transparent}
body[data-mode="dictation"] .law-line.current .ch{color:#fbf6e9 !important;background:#fbf6e9}
body[data-mode="dictation"] .law-line.current{background:#eef2ff;border-left-color:#6366f1}
body.dark[data-mode="dictation"] .law-line:not(.current){color:transparent}

/* 모의시험 모드 (mock) */
.mock-timer{position:fixed;top:60px;right:14px;z-index:90;padding:8px 14px;background:#dc2626;color:#fff;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:900;box-shadow:0 4px 12px rgba(220,38,38,.3);display:none}
body.mock-mode .mock-timer{display:block}
.mock-timer.warning{animation:critPulse 1.1s ease-in-out infinite}

/* 진동/사운드 토글 표시 */

/* === 진도 동기화 (Sync) === */
.sync-nav-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border:1px solid var(--line);
  background:#fff;color:var(--ink);
  border-radius:999px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:all .12s
}
.sync-nav-btn:hover{border-color:#6366f1;color:#6366f1;background:#eff6ff}
.sync-nav-btn.synced{background:#dcfce7;color:#15803d;border-color:#86efac}
.sync-nav-btn.synced::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#15803d;box-shadow:0 0 0 3px rgba(21,128,61,.15)}
@media (max-width:768px){.sync-nav-btn .sync-label{display:none}.sync-nav-btn{padding:10px 12px;font-size:15px;min-height:44px;min-width:44px;justify-content:center}}

.sync-modal{position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(4px);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px}
.sync-modal.show{display:flex;animation:fadeIn .18s ease}
.sync-box{max-width:480px;width:100%;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.32);max-height:92vh;overflow-y:auto;animation:zoomIn .2s ease}
.sync-box .sync-head{padding:20px 22px 14px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;position:relative}
.sync-box .sync-head h3{margin:0 0 4px;font-size:17px;font-weight:900}
.sync-box .sync-head p{margin:0;font-size:12px;color:#dbeafe;line-height:1.55}
.sync-box .sync-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;border:none;font-size:14px;cursor:pointer;font-weight:700}
.sync-body{padding:18px 22px}
.sync-group{padding:12px 0;border-bottom:1px dashed var(--line)}
.sync-group:last-of-type{border-bottom:none;padding-bottom:0}
.sync-group-h{margin:0 0 8px;font-size:12.5px;font-weight:800;color:#4f46e5;letter-spacing:-.005em}
.sync-manual-desc{margin:0 0 8px;font-size:11.5px;color:var(--ink2);line-height:1.45}
.sync-status-line{display:flex;align-items:center;gap:7px;margin:0 0 14px;padding:10px 14px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.sync-status-line ._dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sync-status-line ._dot.ok{background:#16a34a}
.sync-status-line ._dot.warn{background:#d97706}
.sync-status-line ._dot.off{background:#94a3b8}
.sync-status-line ._dot.err{background:#dc2626}
.sync-code-display{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;background:#f0f9ff;border:1.5px dashed #6366f1;border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:900;color:#4f46e5;
  letter-spacing:.06em;justify-content:center;text-align:center;margin-bottom:8px
}
.sync-code-display .copy-btn{margin-left:8px;padding:6px 12px;background:#6366f1;color:#fff;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.sync-code-display .copy-btn:hover{background:#4338ca}
.sync-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sync-actions button{flex:1;min-width:120px;padding:11px;border-radius:8px;border:none;font-weight:700;cursor:pointer;font-size:13px;font-family:inherit;transition:filter .12s;min-height:44px}
.sync-actions .send{background:linear-gradient(135deg,#6366f1,#3b82f6);color:#fff}
.sync-actions .send:hover{filter:brightness(1.08)}
.sync-actions .send:disabled{opacity:.5;cursor:wait}
.sync-actions .danger{background:#fee2e2;color:#991b1b}
.sync-actions .danger:hover{background:#fecaca}
.sync-input-row{display:flex;gap:6px;margin-top:8px}
.sync-input-row input{flex:1;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:16px;font-family:'JetBrains Mono',monospace;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-align:center;color:#4f46e5}
.sync-input-row input:focus{border-color:#6366f1;outline:none;box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.sync-input-row button{padding:11px 16px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px;font-family:inherit;min-height:44px}
.sync-input-row button:hover{background:#4338ca}
.sync-status{margin-top:8px;font-size:11px;color:var(--ink2);min-height:16px}
.sync-status.ok{color:#15803d;font-weight:700}
.sync-status.err{color:#dc2626;font-weight:700}
.sync-meta{margin-top:12px;padding:8px 12px;background:#f8fafc;border-radius:6px;font-size:11px;color:var(--ink2);line-height:1.55}
.sync-meta b{color:#4f46e5;font-weight:800}
@media (max-width:480px){
  .sync-box{max-height:96vh}
  .sync-head{padding:16px 18px 12px}
  .sync-body{padding:14px 18px}
  .sync-code-display{font-size:20px;padding:12px 14px}
  .sync-input-row input{font-size:16px}
}
.snap-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}
.snap-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:12.5px;text-align:left;width:100%;font-family:inherit;color:var(--ink)}
.snap-item:hover{border-color:#6366f1;background:#eef2ff}
.snap-item .snap-date{font-weight:700}
.snap-item .snap-go{color:#6366f1;font-weight:800;font-size:11px;flex-shrink:0}
.snap-empty{font-size:12px;color:var(--ink3);padding:10px 0;text-align:center}


/* ==========================================
   실시간 학습 활동 토스트 (상단 슬라이드)
========================================== */
.activity-toast{
  position:fixed;
  top:-80px;
  left:50%;
  transform:translateX(-50%);
  z-index:9991;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 22px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;
  border-radius:999px;
  box-shadow:0 12px 32px rgba(5,150,105,.35), 0 4px 8px rgba(0,0,0,.15);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  max-width:calc(100vw - 32px);
  transition:top .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  opacity:0;
  pointer-events:none;
}
.activity-toast.show{
  top:90px;
  opacity:1;
}
.activity-toast .at-emoji{
  font-size:18px;
  line-height:1;
}
.activity-toast .at-text{
  overflow:hidden;
  text-overflow:ellipsis;
}
.activity-toast .at-text b{
  font-weight:800;
  color:#c7d2fe;
}
html[data-theme="dark"] .activity-toast{
  background:linear-gradient(135deg,rgba(28,24,62,.95),rgba(11,9,32,.95));
  border:1px solid rgba(192,132,252,.4);
  box-shadow:0 12px 32px rgba(192,132,252,.25), 0 0 0 1px rgba(253,230,138,.18);
}
html[data-theme="dark"] .activity-toast .at-text b{
  color:#c7d2fe;
  text-shadow:0 0 8px rgba(253,230,138,.4);
}
@media (max-width:720px){
  .activity-toast{
    font-size:12.5px;
    padding:9px 16px;
  }
  .activity-toast.show{ top:75px; }
}

/* ==========================================
   왜 '회독'인가 — 과학적 근거 섹션
========================================== */
.why-typing{margin-top:28px;padding:32px 28px;border-radius:20px;background:linear-gradient(180deg,#fafbff,#f3f5fb);border:1px solid var(--line);position:relative;overflow:hidden}
.why-typing::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#67e8f9,#c084fc,#c7d2fe)}
.wt-head{text-align:center;margin-bottom:28px}
.wt-tag{display:inline-block;font-size:11.5px;font-weight:700;color:#4f46e5;background:rgba(30,58,138,.1);padding:5px 11px;border-radius:999px;letter-spacing:.02em}
.wt-title{font-size:24px;font-weight:900;margin:12px 0 8px;color:var(--ink);letter-spacing:-.02em}
.wt-sub{font-size:14px;color:var(--ink2);line-height:1.65;max-width:720px;margin:0 auto}
.wt-sub b{color:#dc2626;font-weight:800}

/* 4개 과학 카드 */
.wt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.wt-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;position:relative;transition:transform .15s,box-shadow .15s}
.wt-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(30,58,138,.1)}
.wt-num{position:absolute;top:12px;right:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:800;color:var(--ink3);letter-spacing:.05em}
.wt-emoji{font-size:32px;margin-bottom:8px;line-height:1}
.wt-card h3{font-size:15px;font-weight:800;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em}
.wt-card h3 small{display:block;font-size:10.5px;font-weight:600;color:var(--ink3);margin-top:2px;letter-spacing:.01em;font-family:'JetBrains Mono',monospace}
.wt-card p{font-size:13px;line-height:1.6;color:var(--ink2);margin:0 0 10px}
.wt-hl{color:#dc2626;font-weight:800;background:linear-gradient(180deg,transparent 60%,rgba(253,224,71,.5) 60%);padding:0 2px}
.wt-cite{font-size:10.5px;color:var(--ink3);border-top:1px dashed var(--line);padding-top:8px;line-height:1.5;font-style:italic}

/* 비교 표 */
.wt-compare{margin-bottom:32px}
.wt-compare-title{font-size:17px;font-weight:800;margin:0 0 14px;color:var(--ink);letter-spacing:-.01em}
.wt-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.wt-table{width:100%;border-collapse:collapse;font-size:13px}
.wt-table th,.wt-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.wt-table th{background:#f5f7fb;font-weight:700;color:var(--ink);font-size:12.5px;letter-spacing:-.01em}
.wt-table tbody tr:last-child td{border-bottom:none}
.wt-table tbody tr.wt-best{background:linear-gradient(90deg,rgba(103,232,249,.08),rgba(192,132,252,.08))}
.wt-table tbody tr.wt-best td{font-weight:600}
.wt-bar{display:inline-block;height:8px;border-radius:4px;background:linear-gradient(90deg,#67e8f9,#3b82f6);vertical-align:middle;margin-right:6px}
.wt-bar.w10{width:14px}.wt-bar.w20{width:28px}.wt-bar.w25{width:34px}.wt-bar.w30{width:42px}.wt-bar.w70{width:98px}.wt-bar.w75{width:104px}.wt-bar.w85{width:120px}.wt-bar.w90{width:126px}.wt-bar.w95{width:134px}
.wt-table small{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink2);font-weight:700}
.wt-bad{color:#dc2626;font-weight:600;font-size:12px}
.wt-mid{color:#4f46e5;font-weight:600;font-size:12px}
.wt-good{color:#059669;font-weight:700;font-size:12px}

/* 시험 특성 분석 */
.wt-exam{margin-bottom:32px;padding:22px 20px;border-radius:14px;background:#fff7ed;border:1px solid #fed7aa}
.wt-exam-title{font-size:17px;font-weight:800;margin:0 0 16px;color:#3730a3;letter-spacing:-.01em}
.wt-exam-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:14px}
.wt-exam-card{background:#fff;border:1px solid #fed7aa;border-radius:10px;padding:14px}
.wt-exam-bad{font-size:11.5px;font-weight:800;color:#dc2626;margin-bottom:6px;letter-spacing:-.01em}
.wt-exam-good{font-size:11.5px;font-weight:800;color:#059669;margin-bottom:6px;letter-spacing:-.01em}
.wt-exam-card code{display:block;font-family:'D2Coding','JetBrains Mono',monospace;font-size:13px;line-height:1.65;color:var(--ink);background:transparent;padding:0;letter-spacing:-.01em}
.wt-red{color:#dc2626;background:rgba(252,165,165,.4);padding:1px 4px;border-radius:3px}
.wt-green{color:#059669;background:rgba(167,243,208,.5);padding:1px 4px;border-radius:3px}
.wt-exam-vs{font-size:18px;font-weight:900;color:#a16207;text-align:center;letter-spacing:.05em}
.wt-exam-foot{font-size:13px;line-height:1.7;color:#78350f;margin:0}

/* 회독별 점수 시각화 */
.wt-graph{margin-bottom:24px;padding:22px 20px;border-radius:14px;background:#f0f9ff;border:1px solid #bae6fd}
.wt-graph-title{font-size:17px;font-weight:800;margin:0 0 16px;color:#0c4a6e;letter-spacing:-.01em}
.wt-graph-body{display:flex;flex-direction:column;gap:9px}
.wt-bar-row{display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:center}
.wt-bar-lbl{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;color:#075985}
.wt-bar-track{height:28px;background:rgba(2,132,199,.08);border-radius:6px;overflow:hidden;position:relative}
.wt-bar-fill{height:100%;background:linear-gradient(90deg,#0284c7,#4f46e5);color:#fff;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:800;border-radius:6px;transition:width .8s ease-out}
.wt-bar-best .wt-bar-fill{background:linear-gradient(90deg,#059669,#10b981);box-shadow:0 0 0 2px rgba(16,185,129,.3)}
.wt-graph-foot{margin:14px 0 0;font-size:12px;color:#075985;line-height:1.6;font-style:italic}

/* 최종 CTA */
.wt-final{margin-top:6px;padding:18px 22px;text-align:center;font-size:14.5px;color:var(--ink);background:linear-gradient(135deg,rgba(103,232,249,.15),rgba(192,132,252,.15));border-radius:12px;border:1px dashed var(--c1);line-height:1.55}
.wt-final b{color:#4f46e5;font-weight:800}

/* 모바일 반응형 */
@media (max-width:720px){
  .why-typing{margin-top:20px;padding:22px 16px;border-radius:16px}
  .wt-title{font-size:19px}
  .wt-sub{font-size:13px}
  .wt-grid{grid-template-columns:1fr 1fr;gap:10px}
  .wt-card{padding:14px 12px}
  .wt-emoji{font-size:26px}
  .wt-card h3{font-size:13.5px}
  .wt-card h3 small{font-size:9.5px}
  .wt-card p{font-size:12px}
  .wt-table{font-size:11.5px}
  .wt-table th,.wt-table td{padding:8px 10px}
  .wt-bar{height:6px}
  .wt-bar.w10{width:10px}.wt-bar.w20{width:20px}.wt-bar.w25{width:24px}.wt-bar.w30{width:30px}.wt-bar.w70{width:70px}.wt-bar.w75{width:74px}.wt-bar.w85{width:84px}.wt-bar.w90{width:88px}.wt-bar.w95{width:92px}
  .wt-exam{padding:16px 14px}
  .wt-exam-grid{grid-template-columns:1fr;gap:8px}
  .wt-exam-vs{font-size:14px}
  .wt-exam-card code{font-size:12px}
  .wt-exam-foot{font-size:12px}
  .wt-graph{padding:16px 14px}
  .wt-bar-row{grid-template-columns:48px 1fr;gap:8px}
  .wt-bar-lbl{font-size:11.5px}
  .wt-bar-track{height:24px}
  .wt-bar-fill{font-size:11px;padding-right:8px}
  .wt-final{padding:14px 16px;font-size:13px}
}

/* 다크 모드 */
html[data-theme="dark"] .why-typing{background:linear-gradient(180deg,rgba(28,24,62,.55),rgba(11,9,32,.55));border-color:rgba(192,132,252,.2)}
html[data-theme="dark"] .wt-tag{background:rgba(103,232,249,.15);color:var(--c1)}
html[data-theme="dark"] .wt-title{color:#f5f7ff}
html[data-theme="dark"] .wt-sub{color:var(--ink2)}
html[data-theme="dark"] .wt-sub b{color:#a5b4fc}
html[data-theme="dark"] .wt-card{background:rgba(28,24,62,.7);border-color:rgba(192,132,252,.2)}
html[data-theme="dark"] .wt-card h3{color:#f5f7ff}
html[data-theme="dark"] .wt-card h3 small{color:var(--c1)}
html[data-theme="dark"] .wt-card p{color:var(--ink2)}
html[data-theme="dark"] .wt-hl{color:#c7d2fe;background:linear-gradient(180deg,transparent 60%,rgba(192,132,252,.3) 60%)}
html[data-theme="dark"] .wt-cite{color:var(--ink3);border-top-color:rgba(192,132,252,.15)}
html[data-theme="dark"] .wt-compare-title,html[data-theme="dark"] .wt-exam-title,html[data-theme="dark"] .wt-graph-title{color:#f5f7ff}
html[data-theme="dark"] .wt-table-wrap{background:rgba(11,9,32,.5);border-color:rgba(192,132,252,.2)}
html[data-theme="dark"] .wt-table th{background:rgba(28,24,62,.7);color:#f5f7ff;border-bottom-color:rgba(192,132,252,.15)}
html[data-theme="dark"] .wt-table td{border-bottom-color:rgba(192,132,252,.1);color:var(--ink2)}
html[data-theme="dark"] .wt-table tbody tr.wt-best{background:linear-gradient(90deg,rgba(103,232,249,.12),rgba(192,132,252,.12))}
html[data-theme="dark"] .wt-table small{color:var(--c1)}
html[data-theme="dark"] .wt-exam{background:rgba(245,158,11,.08);border-color:rgba(253,224,71,.3)}
html[data-theme="dark"] .wt-exam-title{color:#c7d2fe}
html[data-theme="dark"] .wt-exam-card{background:rgba(11,9,32,.6);border-color:rgba(253,224,71,.2)}
html[data-theme="dark"] .wt-exam-card code{color:#f5f7ff}
html[data-theme="dark"] .wt-exam-vs{color:#c7d2fe}
html[data-theme="dark"] .wt-exam-foot{color:#eef2ff}
html[data-theme="dark"] .wt-graph{background:rgba(103,232,249,.06);border-color:rgba(103,232,249,.3)}
html[data-theme="dark"] .wt-graph-title{color:var(--c1)}
html[data-theme="dark"] .wt-bar-lbl{color:var(--c1)}
html[data-theme="dark"] .wt-bar-track{background:rgba(103,232,249,.1)}
html[data-theme="dark"] .wt-bar-fill{background:linear-gradient(90deg,#22d3ee,#a78bfa)}
html[data-theme="dark"] .wt-bar-best .wt-bar-fill{background:linear-gradient(90deg,#34d399,#c7d2fe);color:#0a0918}
html[data-theme="dark"] .wt-graph-foot{color:var(--c1)}
html[data-theme="dark"] .wt-final{background:linear-gradient(135deg,rgba(103,232,249,.12),rgba(253,230,138,.12));border-color:rgba(253,224,71,.4);color:#f5f7ff}
html[data-theme="dark"] .wt-final b{color:#c7d2fe}

/* === 첫 공부(1·2회독) 카드 강조 === */
.first-study-card{
  background:#fff;
  border:1px solid var(--line);
  position:relative
}
.first-study-card h2{color:#4f46e5;border-color:#bfdbfe}
.first-study-card h2 .num{background:#6366f1;color:#fff}

/* === 학습 여정 3단계 배너 === */
.phase-banner{
  display:none;
  align-items:center;gap:14px;
  padding:14px 18px;border-radius:12px;
  margin-bottom:18px;
}
.phase-banner .ph-num{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:12px;color:#fff;font-family:'JetBrains Mono',monospace;
}
.phase-banner .ph-texts{display:flex;flex-direction:column;gap:2px}
.phase-banner .ph-name{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1}
.phase-banner .ph-desc{font-size:11.5px;color:var(--ink2);line-height:1.3}
.phase-banner.ph-1{background:rgba(99,102,241,.07);border:1px solid rgba(99,102,241,.22)}
.phase-banner.ph-1 .ph-num{background:#6366f1}
.phase-banner.ph-1 .ph-name{color:#4f46e5}
.phase-banner.ph-2{background:rgba(234,88,12,.06);border:1px solid rgba(234,88,12,.18)}
.phase-banner.ph-2 .ph-num{background:#ea580c}
.phase-banner.ph-2 .ph-name{color:#c2410c}
.phase-banner.ph-3{background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.18)}
.phase-banner.ph-3 .ph-num{background:#16a34a}
.phase-banner.ph-3 .ph-name{color:#15803d}
/* 섹션별 배너 노출 */
body[data-section="lecture"] .phase-banner.ph-1{display:flex}
body[data-section="reading"] .phase-banner.ph-2{display:flex}
body[data-section="blank"] .phase-banner.ph-3{display:flex}
body.dark .phase-banner.ph-1{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.3)}
body.dark .phase-banner.ph-2{background:rgba(234,88,12,.1);border-color:rgba(234,88,12,.25)}
body.dark .phase-banner.ph-3{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.25)}

/* === 학습 여정 바 === */
.journey-bar{
  display:flex;align-items:center;
  margin:0 0 20px;
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 20px;
  gap:0;
}
.jb-step{
  display:flex;align-items:center;gap:10px;flex:1;
  position:relative;
}
.jb-dot{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background:#f1f5f9;border:2.5px solid #e2e8f0;
  transition:all .2s;
  svg{width:20px;height:20px;stroke:currentColor}
}
.jb-texts{display:flex;flex-direction:column;gap:1px}
.jb-name{font-size:13px;font-weight:800;color:#94a3b8;letter-spacing:-.01em;transition:color .2s}
.jb-sub{font-size:10.5px;color:#cbd5e1;transition:color .2s}
.jb-line{flex:1;height:3px;background:#e2e8f0;border-radius:999px;margin:0 8px;margin-bottom:10px;transition:background .3s}
/* active step per section */
body[data-section="lecture"] .jb-1 .jb-dot{background:#6366f1;border-color:#4f46e5;box-shadow:0 0 0 4px rgba(99,102,241,.15);animation:jbPulse 2s ease-in-out infinite}
body[data-section="lecture"] .jb-1 .jb-name{color:#4f46e5}
body[data-section="lecture"] .jb-1 .jb-sub{color:#6366f1}
body[data-section="reading"] .jb-1 .jb-dot{background:#6366f1;border-color:#4f46e5}
body[data-section="reading"] .jb-1 .jb-name{color:#4f46e5}
body[data-section="reading"] .jb-line-12{background:#6366f1}
body[data-section="reading"] .jb-2 .jb-dot{background:#ea580c;border-color:#c2410c;box-shadow:0 0 0 4px rgba(234,88,12,.15);animation:jbPulse 2s ease-in-out infinite}
body[data-section="reading"] .jb-2 .jb-name{color:#c2410c}
body[data-section="reading"] .jb-2 .jb-sub{color:#ea580c}
body[data-section="blank"] .jb-1 .jb-dot,body[data-section="blank"] .jb-2 .jb-dot{background:#6366f1;border-color:#4f46e5}
body[data-section="blank"] .jb-1 .jb-name,body[data-section="blank"] .jb-2 .jb-name{color:#4f46e5}
body[data-section="blank"] .jb-line-12,body[data-section="blank"] .jb-line-23{background:#6366f1}
body[data-section="blank"] .jb-3 .jb-dot{background:#16a34a;border-color:#15803d;box-shadow:0 0 0 4px rgba(22,163,74,.15);animation:jbPulse 2s ease-in-out infinite}
body[data-section="blank"] .jb-3 .jb-name{color:#15803d}
body[data-section="blank"] .jb-3 .jb-sub{color:#16a34a}
@keyframes jbPulse{0%,100%{box-shadow:0 0 0 4px rgba(99,102,241,.12)}50%{box-shadow:0 0 0 8px rgba(99,102,241,.05)}}
body.dark .jb-dot{background:#1e293b;border-color:#334155}
body.dark .jb-line{background:#334155}
@media(max-width:480px){
  .journey-bar{padding:12px 14px}
  .jb-dot{width:34px;height:34px;svg{width:16px;height:16px}}
  .jb-name{font-size:12px}
  .jb-sub{display:none}
}
.mode-grid-2{grid-template-columns:repeat(2,1fr) !important}
@media (max-width:720px){.mode-grid-2{grid-template-columns:1fr !important}}

/* === 시점 + 법령 좌우 결합 카드 === */
.combo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.combo-grid .combo-col h2{margin-top:0;border-bottom:1px solid var(--line);padding-bottom:14px}
.combo-grid .combo-col h2:first-child{margin-top:0}
@media (max-width:768px){
  .combo-grid{grid-template-columns:1fr;gap:14px}
  .combo-grid .combo-col h2{font-size:14px;padding-bottom:10px;margin-bottom:12px}
}

/* === PRO UI 일괄 비활성 === */
.pro-badge,
.lock-overlay,
.upgrade-cta,
.no-ads-cta,
.ad-float,
.premium-on,
#premiumModal{display:none !important}
/* pro-locked 카드의 ::after 빗금 패턴 제거 — body.premium 이미 처리되나 명시 */
.mode-card.pro-locked::after{display:none !important}

/* === 홈 공지 띠 (제목만) === */
.home-notice{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.home-notice .hn-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.home-notice .hn-label{font-size:13px;font-weight:800;letter-spacing:-.01em}
.home-notice .hn-all{font:inherit;font-size:12px;font-weight:700;color:var(--c1);background:none;border:none;padding:2px 0;cursor:pointer}
.home-notice .hn-all:hover{text-decoration:underline}
.home-notice .hn-list{list-style:none;margin:0;padding:0}
.home-notice .hn-list li+li{border-top:1px dashed var(--line)}
.home-notice .hn-item{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;font:inherit;font-size:13.5px;background:none;border:none;padding:8px 0;cursor:pointer;color:inherit}
.home-notice .hn-item:hover .hn-title{text-decoration:underline}
.home-notice .hn-date{flex:none;font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.home-notice .hn-title{font-weight:700;line-height:1.45;word-break:keep-all}
.home-notice .hn-foot{margin:6px 0 0;font-size:11.5px;color:var(--ink2)}

/* === 개정법령 반영 공지 카드 (홈) === */
.rev-notice{margin:14px 0 4px;background:var(--card);border:1px solid rgba(245,158,11,.45);border-radius:13px;overflow:hidden}
.rev-notice summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:13.5px;color:var(--ink);line-height:1.55;display:block}
.rev-notice summary::-webkit-details-marker{display:none}
.rev-notice summary b{color:#4338ca}
html[data-theme="dark"] .rev-notice summary b{color:#a5b4fc}
.rev-notice .rn-more{float:right;font-size:12px;font-weight:800;color:var(--ink3)}
.rev-notice[open] .rn-more{display:none}
.rev-notice .rn-body{padding:2px 18px 14px;font-size:13px;color:var(--ink2);line-height:1.75;border-top:1px dashed var(--line)}
.rev-notice .rn-body ul{margin:6px 0 10px;padding-left:18px}
.rev-notice .rn-body em{font-style:normal;color:#dc2626;font-weight:800}
.rev-notice .rn-badge{display:inline-block;padding:1px 7px;border-radius:6px;background:#fee2e2;color:#dc2626;font-size:11px;font-weight:800}
.rev-notice .rn-note{font-size:11.5px;color:var(--ink3)}

/* === 사이트 차별화·기능 홍보 공지 카드 === */
.feat-notice{margin:10px 0 4px;background:var(--card);border:1px solid rgba(16,185,129,.40);border-radius:13px;overflow:hidden}
.feat-notice summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:13.5px;color:var(--ink);line-height:1.55;display:block}
.feat-notice summary::-webkit-details-marker{display:none}
.feat-notice summary b{color:#059669}
html[data-theme="dark"] .feat-notice summary b{color:#6ee7b7}
.feat-notice .fn-more{float:right;font-size:12px;font-weight:800;color:var(--ink3)}
.feat-notice[open] .fn-more{display:none}
.feat-notice .fn-body{padding:2px 18px 16px;font-size:13px;color:var(--ink2);line-height:1.75;border-top:1px dashed var(--line)}
.feat-notice .fn-body h4{font-size:13.5px;font-weight:800;color:var(--ink);margin:14px 0 6px;letter-spacing:-.01em}
.feat-notice .fn-body h4:first-child{margin-top:8px}
.feat-notice .fn-body ul{margin:4px 0 10px;padding-left:18px}
.feat-notice .fn-body li{margin-bottom:3px}
.feat-notice .fn-em{color:#059669;font-weight:800;font-style:normal}
html[data-theme="dark"] .feat-notice .fn-em{color:#6ee7b7}
.feat-notice .fn-badge{display:inline-block;padding:1px 7px;border-radius:6px;background:#d1fae5;color:#059669;font-size:11px;font-weight:800}
html[data-theme="dark"] .feat-notice .fn-badge{background:#064e3b;color:#6ee7b7}
.feat-notice .fn-note{font-size:11.5px;color:var(--ink3);margin-top:6px}

/* === 빈칸 클릭공개 모드 (타이핑 대신 눌러서 정답 확인) === */
.blank-reveal-bar{display:none}
body.blank-reveal .type-dock{display:none !important}
body.blank-reveal .blank-reveal-bar{
  display:block;text-align:center;padding:12px 16px;font-size:13.5px;
  color:var(--ink2);background:var(--card);border-top:1px solid var(--line);line-height:1.5
}
body.blank-reveal .blank-reveal-bar b{color:var(--brand)}
/* 눌러서 정답 확인하는 빈칸 — 미공개(노랑)/공개(초록) */
.blank.tap{
  cursor:pointer;color:#4338ca;background:rgba(251,191,36,.16);
  border-bottom:2px solid #6366f1;border-radius:4px;padding:0 3px;
  font-weight:800;letter-spacing:.02em;transition:background .12s
}
.blank.tap:hover{background:rgba(251,191,36,.32)}
.blank.tap.revealed{cursor:default;color:#047857;background:rgba(16,185,129,.16);border-bottom-color:#10b981}
html[data-theme="dark"] .blank.tap{color:#c7d2fe;background:rgba(251,191,36,.14)}
html[data-theme="dark"] .blank.tap.revealed{color:#6ee7b7;background:rgba(16,185,129,.15)}
/* NEW 뱃지 — 신규 기능 강조 (PRO와 분리) */
.new-badge{
  position:absolute;top:10px;left:10px;
  padding:3px 10px;background:#dc2626;color:#fff;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.05em;z-index:3;
  box-shadow:0 2px 6px rgba(220,38,38,.25);
}
@media (max-width:480px){.new-badge{font-size:9px;padding:2px 8px;left:8px;top:8px}}

/* 추천 카드 — 처음 사용자 안내용 강조 */
.reco-badge{
  position:absolute;top:-10px;left:14px;
  padding:5px 12px;
  background:linear-gradient(135deg,#1e293b,#4f46e5);
  color:#fff;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:-.005em;z-index:4;
  box-shadow:0 4px 12px rgba(31,58,95,.35);
  white-space:nowrap;
  /* 5초간 펄스 → 페이드아웃 (1회만 강조하고 조용해짐) */
  animation: recoPulse 2.4s ease-in-out 0s 2, recoFadeOut .6s ease-out 5s forwards;
}
@keyframes recoPulse{
  0%,100%{transform:translateY(0);box-shadow:0 4px 12px rgba(31,58,95,.35)}
  50%{transform:translateY(-2px);box-shadow:0 6px 16px rgba(31,58,95,.45)}
}
@keyframes recoFadeOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-6px) scale(.9);pointer-events:none;visibility:hidden}
}
.mode-card.recommended-card{
  border-color:#4f46e5 !important;
  background:linear-gradient(180deg,#fff 0%,#f0f4ff 100%) !important;
  box-shadow:0 4px 16px rgba(30,58,138,.12),0 0 0 1px #93c5fd inset !important;
  transform:scale(1.015);
  transition:transform .2s
}
.mode-card.recommended-card:hover{transform:scale(1.025) translateY(-2px)}
@media (max-width:480px){
  .reco-badge{font-size:10px;padding:4px 10px;left:10px}
  .mode-card.recommended-card{transform:none}
  .mode-card.recommended-card:hover{transform:translateY(-1px)}
}

/* ============================================================
   Pass 50 — 추가 모바일 보정 (50회 검수 누락분)
   ============================================================ */

/* 1) 더블탭 줌 지연 제거 (300ms 클릭 지연 방지) */
button,.chip,.tag,a,.law-line,.mode-card,.science-card,.live-tile,
.trap-line .word,.qr-chip,.cf-tab,.legal-tab,.tts-btn,.study-btn,
.ex-nav,.btn,.fb-fab,.qr-inbox-btn,.modal-close,.textbook-close,
.article-chip,.chap-head,.sub-chk{
  touch-action:manipulation;
}

/* 2) 관성 스크롤 (iOS) + 오버스크롤 격리 */
.law-page,.trap-stage,.cf-stage,.app-stage,.explain-left,.explain-right,
.legal-body,.fb-body,.modal-body,.articles-box,.app-list,.qr-inbox-list,
.textbook-modal .textbook-body{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* 3) 키보드 포커스 가시성 (외장키보드·접근성) */
button:focus-visible,select:focus-visible,
input:focus-visible,textarea:focus-visible,a:focus-visible,
.chip:focus-visible,.law-line:focus-visible,.qr-chip:focus-visible{
  outline:2px solid #6366f1;
  outline-offset:2px;
}

/* 4) iOS 노치 / 홈 인디케이터 안전 영역 */
@supports (padding:env(safe-area-inset-bottom)){
  .fb-fab{bottom:calc(16px + env(safe-area-inset-bottom))}
  .qr-pop{bottom:calc(80px + env(safe-area-inset-bottom))}
  .ad-sticky-bottom{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  /* 모바일 학습 화면 — 노치/홈바 영역 회피 */
  body.mobile-mode .study-head{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
    padding-top:calc(10px + env(safe-area-inset-top))
  }
  body.mobile-mode .type-dock{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
    padding-bottom:calc(10px + env(safe-area-inset-bottom))
  }
  body.mobile-mode .law-page{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right))
  }
  body.mobile-mode .explain-header{
    padding-left:calc(12px + env(safe-area-inset-left));
    padding-right:calc(12px + env(safe-area-inset-right))
  }
  body.mobile-mode .explain-left,
  body.mobile-mode .explain-right{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right))
  }
  /* 모바일 세로모드 — 강의 본문 상단 padding 축소 (헤더와 본문 사이 간격 좁힘) */
  body.mobile-mode .explain-left{padding-top:8px;padding-bottom:14px}
  body.mobile-mode .explain-right{padding-top:0;padding-bottom:14px}
  body.mobile-mode .explain-right .ex-section-tag{padding-top:8px}
  body.mobile-mode .explain-left .ex-section-tag{margin-bottom:6px}
}

/* 5) 학원바 폐기로 body 하단 패딩 0 (PRO 모델) */
body{padding-bottom:var(--kbd-h, 0) !important}

/* 6) 가로 스크롤 가드 — 컨테이너 폭 100% 캡 */
.wrap,.nav-inner,.science,.hero,.live-stats,.warning-section,
.summary-bar,.card,.trap-hud,.trap-card,.cf-card,.compare-col,
.app-list,.app-viewer,.modal,.fb-box,.legal-modal,
.textbook-modal .textbook-box,footer{max-width:100%}

/* 7) 한글 단어 깨짐 방지 (모든 본문 텍스트) */
.law-line,.trap-line,.compare-col .text,
.explain-left .ex-content,.explain-right .ex-content,
.textbook-modal .textbook-body p,.cf-table td,.cf-table th{
  word-break:keep-all;overflow-wrap:break-word;
}

/* 8) 모드 카드 메타정보 (PRO 잠금 시 흐림) — 텍스트 가독성 */
@media (max-width:768px){
  /* tribute banner 음수 마진 정정 (mobile wrap padding 14px 와 매칭) */
  body[data-build="free"] .tribute-banner{margin:0 -14px;padding:8px 14px}

  /* explain-header 행 재배치: meta 첫째 줄, 버튼 둘째 줄 */
  .explain-header{flex-wrap:wrap;justify-content:center}
  .explain-header .ex-meta{order:0;flex:1 0 100%;margin-bottom:4px}
  .explain-header #exPrev{order:1}
  .explain-header #exNext{order:2}
  .explain-header .ex-textbook-btn{order:3;flex:1.4}

  /* QR 신고 칩·버튼 — 터치 타깃 ≥38px */
  .qr-chip{padding:10px 14px;font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .qr-actions{gap:6px}
  .qr-btn{padding:11px 14px;min-height:44px;font-size:13px}
  .qr-pop .qr-head{font-size:11.5px}
  .qr-pop input.qr-memo{font-size:16px;padding:10px 12px;min-height:44px}

  /* TTS / 속도 슬라이더 두꺼운 트랙·큰 thumb (터치) */
  .tts-rate-row .tts-rate{height:6px}
  .tts-rate-row .tts-rate::-webkit-slider-thumb{width:18px;height:18px}
  .tts-rate-row .tts-rate::-moz-range-thumb{width:18px;height:18px}
  .speed-ctrl .sc-input{height:6px}
  .speed-ctrl .sc-input::-webkit-slider-thumb{width:20px;height:20px}
  .speed-ctrl .sc-input::-moz-range-thumb{width:20px;height:20px}
  #followTTSRate{height:6px}
  #followTTSRate::-webkit-slider-thumb{width:18px;height:18px}

  /* 세그먼트 컨트롤 미니 버튼 (cf-tab, legal-tab 등) — 최소 36px */
  .cf-tab,.legal-tab{min-height:38px}

  /* article-controls 줄바꿈 시 가독성 */
  .article-controls{font-size:12.5px;gap:10px;row-gap:6px}
  .article-controls a{padding:4px 0}
  .article-controls .resume{margin-left:0;flex:1 0 100%;font-size:11px}

  /* trap-hud 가독성 */
  .trap-hud{font-size:11px;flex-wrap:wrap}
  .trap-hud .stat{flex:1;min-width:80px}
  .trap-hud .progress{flex:1 0 100%;order:99;height:5px}

  /* mode-card 메타 정보 */
  .mode-card.pro-locked .pro-badge{font-size:9px;padding:2px 7px}
  .mode-card.locked .lock-overlay .lock{font-size:28px}

  /* exam-hint */
  .exam-hint{padding:7px 12px;font-size:11.5px;line-height:1.5}


  /* footer 음수 마진 충돌 방지 */
  footer{margin-left:-14px !important;margin-right:-14px !important}

  /* science 음수 마진 정정 */
  .science{margin-left:-6px !important;margin-right:-6px !important}
}

/* 9) 매우 작은 폰 (≤360px) — 결과 화면, 폰트 추가 축소 */
@media (max-width:360px){
  .nav-inner{padding:7px 10px}
  .brand{font-size:12px;gap:6px}
  .brand .logo{width:24px;height:24px;font-size:11px}
  .stepper{padding:0 6px}
  .stepper .seg{font-size:9.5px}
  .stepper .bar{width:12px;margin:0 3px}

  .hero h1{font-size:clamp(18px,5.6vw,24px)}
  .hero .sub{font-size:11.5px}
  .hero-disclaimer{font-size:9px}

  .live-tile{padding:5px 8px}
  .live-tile .label{font-size:9.5px}
  .live-tile .value{font-size:15px}

  .warning-tile .value{font-size:19px}
  .warning-tile .label{font-size:10px}

  /* 결과 stats — 1열 가로 레이아웃 */
  .result-stats{grid-template-columns:1fr;gap:6px}
  .result-stat{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;text-align:left}
  .result-stat b{font-size:18px;margin:0}

  /* 모드 카드 더 컴팩트 */
  .mode-card{padding:14px 12px}
  .mode-card h3{font-size:13.5px}
  .mode-card p{font-size:11px}
  .mode-card .why{font-size:10px}

  /* 카드 헤더 */
  .card{padding:12px 10px}
  .card h2{font-size:12.5px}

  /* 학습 화면 헤더 */
  .study-head .info{font-size:10.5px;gap:5px}
  .study-head .info b{font-size:12px}
  .study-btn{padding:8px 10px;font-size:11px;min-height:38px}

  /* trap */
  .trap-line{font-size:14px}
  .trap-btn{padding:9px 12px;font-size:12px;min-width:90px}

  /* explain */
  .explain-header .ex-art{font-size:14px}
  .explain-header .ex-title{font-size:10.5px}
  .explain-header .ex-nav{padding:6px 6px;font-size:10px}
  .explain-left .ex-content{font-size:12.5px}
  .explain-right .ex-content{font-size:12px}

  /* 텍스트북 본문 */
  .textbook-modal .textbook-body{padding:14px 14px;font-size:13.5px;line-height:1.7}
  .textbook-modal .textbook-body h1{font-size:16px}
  .textbook-modal .textbook-body h2{font-size:14.5px}
  .textbook-modal .textbook-body h3{font-size:13.5px}

  /* 모달 일반 */
  .modal-head h2{font-size:15px}
  .modal-head p{font-size:11.5px}
  .modal-body{padding:14px 16px}
  .modal-body .perks li{font-size:11.5px}
  .price-box{padding:14px}
  .price-box .now{font-size:24px}
  .price-box .strike{font-size:13px}
}

/* 10) 모바일 가로(landscape) — 추가 보정 (이미 ≤900 + ≤520 있음, 보강) */
@media (max-width:900px) and (orientation:landscape){
  .hero{min-height:auto;padding:14px 18px 20px}
  .hero-countdown{margin-bottom:10px}
  .hero h1{font-size:clamp(20px,3.6vw,28px);margin-bottom:8px}
  .hero .sub{font-size:12.5px;margin-bottom:12px}
  .hero .cta-row{margin-bottom:0}
}

/* 11) 한글 줄간격 보정 (소형 폰 본문 가독성) */
@media (max-width:480px){
  .hero h1{line-height:1.18}
  .hero .sub{line-height:1.6}
  .law-line{line-height:1.95}
  .trap-line{line-height:1.9}
  .compare-col .text{line-height:1.85}
  .textbook-modal .textbook-body{line-height:1.78}
}

/* 12) Pull-to-refresh / 스와이프 격리 (학습 중 의도치 않은 새로고침 방지) */
body.studying{overscroll-behavior-y:contain}
.study{overscroll-behavior:contain}

/* 13) 모달 백드롭 클릭 시 의도치 않은 스크롤 방지 */
.modal-bg.show,.fb-modal.show,.legal-modal-bg.show,.textbook-modal[style*="flex"]{
  overscroll-behavior:contain;
}

/* 14) 미디어 요소 폭 제한 (이미지·캔버스가 컨테이너 초과 방지) */
img,svg,canvas,iframe{max-width:100%;height:auto}

/* 15) input number 의 spin button 모바일에서 불필요 */
@media (max-width:768px){
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield}
}


/* ═══════════════════════════════════════════════════════════════
   🌌 다크 모드 — 영롱한 밤하늘 (Cosmic Nebula Theme)
   • OS 자동: prefers-color-scheme: dark
   • 수동: html[data-theme="dark"] (JS 토글)
   팔레트: 심해 인디고 + 보랏빛 네뷸라 + 별빛 청록·핑크·골드
═══════════════════════════════════════════════════════════════ */
/* 🌙 테마 토글 버튼 — nav 안 */
.theme-toggle{
  display:inline-grid;place-items:center;
  width:40px;height:40px;flex-shrink:0;
  background:#fff;border:1px solid var(--line);border-radius:50%;
  font-size:16px;line-height:1;cursor:pointer;
  transition:all .2s ease;
  padding:0;
}
.theme-toggle:hover{background:#f1f5f9;border-color:#94a3b8;transform:rotate(15deg)}
html[data-theme="dark"] .theme-toggle{
  background: linear-gradient(135deg, rgba(192,132,252,.18) 0%, rgba(103,232,249,.12) 100%);
  border: 1px solid rgba(192,132,252,.4);
  box-shadow: 0 0 16px rgba(192,132,252,.25);
  color: #c7d2fe;
}
html[data-theme="dark"] .theme-toggle:hover{
  background: linear-gradient(135deg, rgba(192,132,252,.3) 0%, rgba(103,232,249,.2) 100%);
  border-color: rgba(192,132,252,.7);
  box-shadow: 0 0 24px rgba(192,132,252,.4);
}
@media (max-width:600px){
  .theme-toggle{width:38px;height:38px;font-size:14px;flex-shrink:0}
}

html[data-theme="dark"]{ color-scheme: dark }
html[data-theme="light"]{ color-scheme: light }
html[data-theme="dark"]{
    /* 🌙 다크 — 인디고·슬레이트 (드릴·모의고사·브랜드와 동일 톤) */
    --bg: #0f172a;             /* 메인 배경 — 슬레이트 900 */
    --bg-2: #1e293b;           /* 더 옅은 톤 (강조 영역) */
    --card: #1e293b;           /* 카드 — 슬레이트 800 */
    --ink: #e2e8f0;            /* 본문 — 슬레이트 200 */
    --ink2: #94a3b8;           /* 보조 — 슬레이트 400 */
    --ink3: #64748b;           /* 옅은 보조 — 슬레이트 500 */
    --line: #334155;           /* 보더 — 슬레이트 700 */
    /* 강조색 — 인디고 브랜드 */
    --c1: #818cf8;             /* primary — 인디고 400 (다크 대비) */
    --c1-soft: rgba(129,140,248,.16);
    --c2: #34d399;             /* 긍정 — 에메랄드 */
    --c2-soft: rgba(52,211,153,.14);
    --c3: #a5b4fc;             /* 강조 — 앰버(휘장) */
    --c3-soft: rgba(251,191,36,.14);
    --c4: #94a3b8;             /* 보조 그레이 */
    --c4-soft: rgba(148,163,184,.12);
    --accent: var(--c1);
    --accent-soft: var(--c1-soft);
    --ok: #4ade80;             /* 그린 */
    --ok-soft: rgba(74,222,128,.14);
    --warn: var(--c3);
    --warn-soft: var(--c3-soft);
    --err: #f87171;            /* 레드 */
    --err-soft: rgba(248,113,113,.15);
    --shadow: 0 1px 3px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04) inset;
  /* body — 단색 다크 (gradient·별·오로라 제거) */
  & body{
    background: var(--bg) !important;
    color: var(--ink) !important;
    position: relative;
  }
  body::before, body::after{ display: none !important; content: none !important }
  /* 본문은 별빛 위에 떠 있게 (z-index 1) — 단 .study/.modal-bg는 원래 position:fixed/높은 z-index 유지 */
  .wrap, .nav, header{position: relative; z-index: 1}
  .step{position: relative; z-index: 2}
  /* .study는 원본 position:fixed; z-index:100 그대로 — 절대 override 금지 */
  /* summary-bar — footer보다 확실히 위 */
  .summary-bar{z-index: 200 !important}
  /* nav — 글래스모피즘 + 미세 보라 광택 */
  .nav{
    background: linear-gradient(180deg, rgba(31,30,29,.85), rgba(31,30,29,.7)) !important;
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border-bottom: 1px solid rgba(148,163,184,.18) !important;
    box-shadow: 0 1px 0 rgba(148,163,184,.06) inset, 0 6px 24px rgba(0,0,0,.4);
  }
  .nav-live{
    background: rgba(20,28,46,.6) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: var(--ink2) !important;
  }
  .nav-live b{color: var(--ink) !important}
  .nav-live .sep{color: rgba(255,255,255,.12) !important}
  /* 카드·박스 — 반투명 글래스로 네뷸라 비침 + 보랏빛 보더
     주의: .step은 제외 — backdrop-filter가 새 containing block 만들어
     position:fixed 자식(summary-bar)을 viewport 대신 .step에 가두는 버그 발생 */
  .card, .myprogress-card, .mode-card, section.science,
  details.guide-root, details.guide-item,
  #syncModal .modal-content, #toolsModal .modal-content, #textbookModal{
    background: linear-gradient(180deg, rgba(28,24,62,.72) 0%, rgba(18,16,42,.78) 100%) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(148,163,184,.16) !important;
    box-shadow:
      0 8px 32px rgba(0,0,0,.45),
      0 0 60px rgba(111,109,104,.06),
      0 1px 0 rgba(255,255,255,.05) inset !important;
    color: var(--ink) !important;
  }
  /* .step은 backdrop-filter 없이 배경만 (containing block 만들지 않음) */
  .step{
    background: transparent !important;
    color: var(--ink) !important;
  }
  /* summary-bar — 다크모드 전용 (라이트는 var(--ink)=짙은네이비 배경, 다크는 그대로면 흰색 됨) */
  /* summary-bar는 라이트·다크 모두 투명 — 안의 .btn-primary만 보임. 다크 톤은 이미 .btn-primary 글로벌 룰이 적용 */
  .summary-bar{background: transparent !important; box-shadow: none !important; border: none !important; backdrop-filter: none !important}
  .summary-bar .btn-primary{
    background: linear-gradient(135deg, #818cf8 0%, #818cf8 55%, #94a3b8 100%) !important;
    color: #0a0918 !important;
    border: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
    box-shadow: 0 14px 44px rgba(129,140,248,.35), 0 0 0 1px rgba(255,255,255,.1) inset, 0 0 48px rgba(148,163,184,.2) !important;
  }
  .summary-bar .btn-primary:hover{
    filter: brightness(1.12);
    box-shadow: 0 18px 52px rgba(129,140,248,.55), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 80px rgba(148,163,184,.35) !important;
    transform: translateY(-2px);
  }
  /* 카드 호버 — 청록 글로우 */
  .card:hover, section.science:hover{
    border-color: rgba(129,140,248,.3) !important;
    box-shadow:
      0 12px 40px rgba(0,0,0,.55),
      0 0 80px rgba(129,140,248,.12),
      0 0 0 1px rgba(129,140,248,.18) inset !important;
  }
  /* hero — 영롱한 네뷸라 코어 (보라+청록 그라데이션) */
  .hero{
    background:
      radial-gradient(ellipse 60% 80% at 30% 30%, rgba(111,109,104,.32), transparent 70%),
      radial-gradient(ellipse 50% 70% at 80% 70%, rgba(14,116,144,.28), transparent 70%),
      linear-gradient(135deg, rgba(28,24,62,.85) 0%, rgba(18,16,42,.9) 100%) !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    box-shadow:
      0 0 60px rgba(148,163,184,.15),
      0 0 0 1px rgba(148,163,184,.08) inset,
      0 12px 40px rgba(0,0,0,.5) !important;
    position: relative;
    overflow: hidden;
  }
  /* hero 안쪽 별빛 효과 */
  .hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1.5px 1.5px at 18% 28%, rgba(251,191,36,.9), transparent 60%),
      radial-gradient(1px 1px at 73% 64%, rgba(129,140,248,.9), transparent 60%),
      radial-gradient(2px 2px at 42% 81%, rgba(203,213,225,.85), transparent 60%),
      radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.7), transparent 60%);
    pointer-events: none;
    animation: starTwinkle 4s ease-in-out infinite alternate;
  }
  .hero-label{
    color: var(--c4) !important;
    text-shadow: 0 0 16px rgba(203,213,225,.45);
    letter-spacing: .08em;
  }
  .hc-time{
    color: #a5b4fc !important;
    text-shadow:
      0 0 24px rgba(251,191,36,.5),
      0 0 48px rgba(148,163,184,.3) !important;
    font-weight: 800;
  }
  .hero-cd-chip .hc-time{ color: var(--c1) !important; text-shadow: none !important; font-weight: 900 }
  h1, h2, h3, h4{color: var(--ink) !important}
  h1{
    background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #818cf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .accent2{
    background: linear-gradient(135deg, #a5b4fc 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
  }
  /* 칩 (시험일·법령 선택) — 별빛 톤 */
  .chip{
    background: rgba(148,163,184,.06) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    color: var(--ink2) !important;
    transition: all .2s ease;
  }
  .chip:hover{
    background: rgba(129,140,248,.08) !important;
    border-color: rgba(129,140,248,.45) !important;
    color: var(--ink) !important;
    box-shadow: 0 0 18px rgba(129,140,248,.18);
  }
  .chip.active, .chip[aria-pressed="true"]{
    background: linear-gradient(135deg, rgba(129,140,248,.22), rgba(148,163,184,.18)) !important;
    border-color: rgba(129,140,248,.6) !important;
    color: #fff !important;
    box-shadow:
      0 0 0 1px rgba(129,140,248,.4) inset,
      0 0 24px rgba(129,140,248,.3),
      0 0 40px rgba(148,163,184,.15) !important;
  }
  .chip .cnt{
    background: rgba(255,255,255,.08) !important;
    color: var(--ink) !important;
  }
  /* 버튼 — 영롱한 시안→보라 그라데이션 */
  .btn{transition: all .22s cubic-bezier(.16,.84,.3,1.06)}
  .btn-primary{
    background: linear-gradient(135deg, #818cf8 0%, #818cf8 55%, #94a3b8 100%) !important;
    border: none !important;
    box-shadow:
      0 6px 20px rgba(129,140,248,.35),
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 0 40px rgba(148,163,184,.18) !important;
    color: #0a0918 !important;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
  }
  .btn-primary:hover{
    box-shadow:
      0 10px 32px rgba(129,140,248,.5),
      0 0 0 1px rgba(255,255,255,.2) inset,
      0 0 60px rgba(148,163,184,.3) !important;
    transform: translateY(-2px);
    filter: brightness(1.08);
  }
  .btn-primary:disabled{
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.25) !important;
    box-shadow: none !important;
    text-shadow: none;
  }
  .btn-ghost{
    background: rgba(148,163,184,.06) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.2) !important;
    backdrop-filter: blur(8px);
  }
  .btn-ghost:hover{
    background: rgba(148,163,184,.14) !important;
    border-color: rgba(148,163,184,.45) !important;
  }
  /* 모드 카드 — 첫 공부 1·2회독·해설 */
  .mode-card{
    background: linear-gradient(165deg, rgba(28,24,62,.7) 0%, rgba(18,16,42,.85) 100%) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    transition: all .25s cubic-bezier(.16,.84,.3,1.06);
  }
  .mode-card:hover{
    border-color: rgba(129,140,248,.5) !important;
    box-shadow:
      0 12px 36px rgba(129,140,248,.18),
      0 0 80px rgba(129,140,248,.08),
      0 0 0 1px rgba(129,140,248,.3) inset !important;
    transform: translateY(-3px);
  }
  .mode-card.active{
    background: linear-gradient(135deg, rgba(251,191,36,.18) 0%, rgba(203,213,225,.1) 100%) !important;
    border-color: rgba(251,191,36,.55) !important;
    box-shadow:
      0 0 0 1px rgba(251,191,36,.5) inset,
      0 12px 40px rgba(251,191,36,.18),
      0 0 80px rgba(203,213,225,.15) !important;
  }
  .mode-card.active::after{
    content: "★";
    position: absolute;
    top: 12px;
    right: 16px;
    color: var(--c3);
    text-shadow: 0 0 16px rgba(251,191,36,.6);
    font-size: 18px;
  }
  /* myProgressCard — 회독·스트릭 카드 (별자리 컨셉) */
  .myprogress-card{
    background:
      radial-gradient(ellipse 70% 90% at 20% 20%, rgba(111,109,104,.18), transparent 60%),
      linear-gradient(135deg, rgba(28,24,62,.85) 0%, rgba(18,16,42,.9) 100%) !important;
    border: 1px solid rgba(251,191,36,.22) !important;
    box-shadow:
      0 14px 50px rgba(0,0,0,.5),
      0 0 80px rgba(251,191,36,.06),
      0 0 0 1px rgba(251,191,36,.06) inset !important;
  }
  .mpc-icon{filter: drop-shadow(0 0 16px rgba(251,191,36,.5))}
  .mpc-num{
    background: linear-gradient(135deg, #a5b4fc 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 24px rgba(251,191,36,.4);
  }
  .mpc-lbl{color: var(--ink) !important}
  .mpc-sub{color: var(--ink3) !important}
  .mpc-progress-bar{
    background: rgba(148,163,184,.1) !important;
    overflow: hidden;
    position: relative;
  }
  .mpc-progress-fill{
    background: linear-gradient(90deg, #818cf8 0%, #94a3b8 50%, #a5b4fc 100%) !important;
    box-shadow: 0 0 16px rgba(148,163,184,.5), 0 0 32px rgba(129,140,248,.25);
  }
  /* 입력·드롭다운 */
  input[type="text"], input[type="number"], input[type="range"], textarea, select{
    background: rgba(255,255,255,.04) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
  }
  input:focus, textarea:focus, select:focus{
    border-color: var(--c1) !important;
    box-shadow: 0 0 0 3px rgba(110,168,255,.15) !important;
    outline: none;
  }
  /* footer — 깊은 우주 + 보랏빛 별띠 */
  footer, .footer{
    background:
      radial-gradient(ellipse 50% 100% at 50% 0%, rgba(111,109,104,.2), transparent 70%),
      linear-gradient(180deg, rgba(31,30,29,.95) 0%, rgba(5,3,18,1) 100%) !important;
    border-top: 1px solid rgba(148,163,184,.22) !important;
    color: var(--ink2) !important;
    box-shadow: 0 -2px 40px rgba(148,163,184,.08);
  }
  footer a, .footer a{color: var(--c3) !important; text-shadow: 0 0 12px rgba(251,191,36,.3)}
  /* 학습 화면 — 별빛 종이 (어두운 양피지) */
  .law-page{
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(111,109,104,.08), transparent 60%),
      #0a0a1c !important;
    color: #e8eaed !important;
  }
  .law-page *{color: inherit}
  .law-page::-webkit-scrollbar-thumb{background: rgba(148,163,184,.3) !important; border-radius: 5px}
  .law-page::-webkit-scrollbar-track{background: rgba(255,255,255,.02) !important}
  /* 조문 본문 — 충분한 대비 (e8eaed = #1a202c 라이트 모드와 대조) */
  .law-line{color: #e8eaed !important}
  .law-line > *{color: inherit !important}
  .law-line.upcoming{color: rgba(190,180,220,.55) !important}
  /* 현재 줄 — 라이트 모드의 cream #eef2ff + black 텍스트 → 다크에서 보라 글로우 + 흰 텍스트 */
  .law-line.current{
    background: linear-gradient(135deg, rgba(148,163,184,.22) 0%, rgba(251,191,36,.12) 100%) !important;
    border-left-color: var(--c3) !important;
    color: #ffffff !important;
    box-shadow:
      0 0 0 1px rgba(148,163,184,.35) inset,
      0 0 36px rgba(148,163,184,.2),
      0 0 80px rgba(251,191,36,.1) !important;
  }
  .law-line.current > *{color: #ffffff !important}
  /* 따라읽기 모드에서 .ch 텍스트가 #1a202c로 하드코드돼 있어서 별도 override */
  body.follow-mode .law-line.current .ch,
  body.follow-line-mode .law-line.current .ch,
  body.follow-voice-mode .law-line.current .ch{color: #ffffff !important}
  /* 조 제목 (헤더) — 금빛 별 + 보라 글로우, 라이트모드의 #4f46e5 짙은 네이비는 안 보이므로 교체 */
  .law-line.header{
    color: var(--c3) !important;
    text-shadow: 0 0 14px rgba(251,191,36,.3);
  }
  .law-line.header.upcoming{color: rgba(251,191,36,.45) !important; opacity: .85}
  .law-line.header.done{color: var(--c1) !important; text-shadow: 0 0 10px rgba(129,140,248,.25)}
  .law-line.header.current{
    background: linear-gradient(135deg, rgba(148,163,184,.18), rgba(251,191,36,.1)) !important;
    border-left-color: var(--c2) !important;
    color: #fff !important;
    text-shadow:none;
  }
  /* hover 시 "↩ 이 줄부터 학습" 라벨 */
  .law-line:not(.header):not(.current):hover::after{
    color: var(--c1) !important;
    background: rgba(129,140,248,.18) !important;
  }
  .law-line:not(.header):not(.current):hover{
    background: rgba(129,140,248,.05) !important;
    border-left-color: rgba(129,140,248,.4) !important;
  }
  /* 모드별로 하드코드된 .ch 색상(#1a202c 검정 등) → 다크모드에서 모두 흰색 */
  body[data-mode="full"] .law-line.current .ch,
  body[data-mode="huidok1"] .law-line.current .ch,
  body[data-mode="huidok2"] .law-line.current .ch,
  body[data-mode="blank"] .law-line.current .ch.done,
  body[data-mode="random"] .law-line.current .ch.done{color: #ffffff !important}
  /* 빈칸·랜덤 모드 — 칠 글자(.ch.upcoming)는 잘 보이게 라벤더 톤 (희미하지만 읽힘) */
  body[data-mode="blank"] .law-line.current .ch,
  body[data-mode="random"] .law-line.current .ch{color: rgba(220,210,250,.92) !important}
  body[data-mode="blank"] .law-line.current .ch.upcoming,
  body[data-mode="random"] .law-line.current .ch.upcoming{color: rgba(220,210,250,.85) !important}
  body[data-mode="blank"] .law-line.current .ch.cursor,
  body[data-mode="random"] .law-line.current .ch.cursor{color: var(--c1) !important; background: rgba(129,140,248,.3) !important; font-weight: 800}
  body[data-mode="blank"] .law-line.current .ch.wrong,
  body[data-mode="random"] .law-line.current .ch.wrong{color: #fff !important; background: rgba(251,113,133,.45) !important}
  /* 빈칸 — 시안 별빛 */
  .blank{
    background: rgba(129,140,248,.14) !important;
    border-bottom: 2px solid var(--c1) !important;
    color: var(--c1) !important;
    text-shadow: 0 0 12px rgba(129,140,248,.5);
  }
  /* 깜빡임 placeholder 색상 */
  body.blink-mode .law-line.current::after{
    color: var(--c3) !important;
    text-shadow: 0 0 14px rgba(251,191,36,.35);
  }
  /* 따라읽기 sweep underline */
  body.follow-line-mode .law-line.current.draw-on .ch::after{
    background: rgba(251,191,36,.55) !important;
  }
  /* 모달 backdrop */
  .modal-bg, #legalModal, #toolsModal, #syncModal, #textbookModal{
    background: rgba(0,0,0,.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .modal-content, #legalModal > div, #toolsModal .modal-content,
  #syncModal .modal-content, .pig-card{
    background: linear-gradient(180deg, #1a2138 0%, #131826 100%) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }
  /* 보조 텍스트·구분선 */
  hr{border-color: rgba(255,255,255,.08) !important}
  details summary{color: var(--ink) !important}
  /* 토스트·알림 */
  .toast{
    background: rgba(20,28,46,.95) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    backdrop-filter: blur(20px);
  }
  /* 광고 슬롯 — 다크에 어울리는 라벨 */
  .ad-strip-top, .ad-sticky-bottom, .ad-side, .ad-float{
    background: rgba(255,255,255,.02) !important;
    border: 1px dashed rgba(255,255,255,.08) !important;
  }
  /* 셀렉션 색상 — 보랏빛 별빛 */
  ::selection{background: rgba(129,140,248,.32); text-shadow:none}
  /* 스크롤바 (Webkit) — 영롱한 보라 */
  ::-webkit-scrollbar{width: 10px; height: 10px}
  ::-webkit-scrollbar-track{background: rgba(255,255,255,.02)}
  ::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(148,163,184,.5), rgba(129,140,248,.5));
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(148,163,184,.3);
  }
  ::-webkit-scrollbar-thumb:hover{background: linear-gradient(180deg, rgba(148,163,184,.8), rgba(129,140,248,.8))}
  /* PWA 배너 다크 톤 */
  .pwa-install-banner{
    background: linear-gradient(135deg, #1a2138 0%, #131826 100%) !important;
    border-color: rgba(251,191,36,.18) !important;
    color: var(--ink) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(251,191,36,.04) inset !important;
  }
  .pib-title{color: var(--ink) !important}
  .pib-desc{color: var(--ink2) !important}
  .pib-install{
    background: linear-gradient(135deg, #a5b4fc 0%, #6366f1 100%) !important;
    color: #0a0e1a !important;
    box-shadow: 0 4px 14px rgba(251,191,36,.35);
  }
  /* ───── 학습 화면 (.study) — 별자리 도서관 톤 ───── */
  .study{
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(111,109,104,.14), transparent 65%),
      #0f172a !important;
    color: var(--ink) !important;
  }
  /* 확대했을 때 드러나는 자리도 같은 톤으로 — 밝은 판이 번쩍이면 더 나쁘다 */
  .study.show{box-shadow:0 0 0 100vmax #0f172a !important}
  .study-head{
    background: linear-gradient(180deg, rgba(31,30,29,.95), rgba(31,30,29,.85)) !important;
    border-bottom: 1px solid rgba(148,163,184,.2) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(148,163,184,.05) inset;
    /* backdrop-filter가 새 stacking context를 만들기 때문에 head를 study-body보다 위로 올림
       (그렇지 않으면 안의 info-pop이 type-dock에 가려짐) */
    position: relative;
    z-index: 60;
  }
  .study-head .info b{color: var(--c3) !important; text-shadow: 0 0 12px rgba(251,191,36,.35)}
  .study-head .info .label{color: var(--ink2) !important}
  .study-head .tag.law{
    background: linear-gradient(135deg, rgba(148,163,184,.2), rgba(129,140,248,.15)) !important;
    color: var(--c2) !important;
    border: 1px solid rgba(148,163,184,.3) !important;
  }
  .study-head .tag.exam{
    background: rgba(251,191,36,.18) !important;
    color: var(--c3) !important;
    border: 1px solid rgba(251,191,36,.35) !important;
  }
  .study-head .tag.rev{
    background: rgba(203,213,225,.18) !important;
    color: var(--c4) !important;
    border: 1px solid rgba(203,213,225,.35) !important;
  }
  .study-progress .progress-bar{
    background: rgba(148,163,184,.12) !important;
    overflow: hidden;
  }
  .study-progress .fill{
    background: linear-gradient(90deg, #818cf8 0%, #94a3b8 50%, #a5b4fc 100%) !important;
    box-shadow: 0 0 12px rgba(148,163,184,.5);
  }
  .study-progress .progress-text{color: var(--ink2) !important}
  /* 상단 버튼들 (깜빡임·따라읽기·목차·북마크·공유·이전·건너뛰기·종료) */
  .study-btn{
    background: rgba(148,163,184,.08) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    transition: all .18s ease;
  }
  .study-btn:hover{
    background: rgba(129,140,248,.14) !important;
    border-color: rgba(129,140,248,.5) !important;
    color: var(--c1) !important;
    box-shadow: 0 0 16px rgba(129,140,248,.2);
  }
  .study-btn.danger:hover{
    background: rgba(251,113,133,.18) !important;
    border-color: rgba(251,113,133,.55) !important;
    color: var(--err) !important;
  }
  .study-btn.on{
    background: linear-gradient(135deg, rgba(148,163,184,.3), rgba(129,140,248,.2)) !important;
    border-color: rgba(148,163,184,.55) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(148,163,184,.4) inset, 0 0 20px rgba(148,163,184,.25);
  }
  /* 메모장 (.type-dock + .type-pad) — 우측 패널 */
  .type-dock{
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(111,109,104,.1), transparent 70%),
      rgba(31,30,29,.6) !important;
    border-left: 1px solid rgba(148,163,184,.18) !important;
    box-shadow: -6px 0 24px rgba(0,0,0,.3);
  }
  .type-input.type-pad{
    background: rgba(7,8,24,.7) !important;
    color: var(--ink) !important;
    border: 2px solid rgba(148,163,184,.22) !important;
    backdrop-filter: blur(8px);
  }
  .type-input.type-pad:focus{
    border-color: rgba(129,140,248,.6) !important;
    box-shadow: 0 0 0 3px rgba(129,140,248,.15), 0 0 24px rgba(129,140,248,.15) !important;
  }
  .type-input.type-pad::placeholder{color: rgba(139,133,184,.6) !important}
  /* 메모장 상단 안내 텍스트·하단 페이지 카운터 */
  .type-dock > div, .type-dock > span{color: var(--ink2)}
  /* 인포 아이콘 (i 동그라미) */
  .info-icon{
    background: rgba(148,163,184,.12) !important;
    color: var(--c2) !important;
    border-color: rgba(148,163,184,.4) !important;
  }
  .info-icon:hover{
    background: rgba(148,163,184,.25) !important;
    color: var(--ink) !important;
  }
  /* 인포 팝업 */
  .info-pop{
    background: linear-gradient(180deg, rgba(20,18,42,.98), rgba(31,30,29,.95)) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.3) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 60px rgba(148,163,184,.12) !important;
  }
  .info-pop::before{background: rgba(20,18,42,.98) !important}
  .info-pop b{color: var(--c3) !important}
  /* 학습 진행 — 페이지 번호 (1 / 65) */
  .study-head + div, [class*="page-info"]{color: var(--ink2)}

  /* ───── AI 강의 화면 — .explain-stage ───── */
  .explain-stage{
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(111,109,104,.1), transparent 65%), #0f172a !important;
    color: var(--ink) !important;
  }
  .explain-header{
    background: linear-gradient(180deg, rgba(31,30,29,.95), rgba(31,30,29,.88)) !important;
    border-bottom: 1px solid rgba(148,163,184,.22) !important;
    backdrop-filter: blur(18px);
    color: var(--ink) !important;
  }
  .explain-header .ex-nav{
    background: linear-gradient(135deg, rgba(129,140,248,.18), rgba(148,163,184,.16)) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.35) !important;
  }
  .explain-header .ex-nav:hover{
    background: linear-gradient(135deg, rgba(129,140,248,.3), rgba(148,163,184,.26)) !important;
    border-color: rgba(129,140,248,.6) !important;
    box-shadow: 0 0 18px rgba(129,140,248,.25);
  }
  .explain-header .ex-nav:disabled{opacity:.35 !important}
  .explain-header .ex-textbook-btn{
    background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(203,213,225,.18)) !important;
    color: var(--c3) !important;
    border-color: rgba(251,191,36,.4) !important;
  }
  .explain-header .ex-textbook-btn:hover{
    box-shadow: 0 0 18px rgba(251,191,36,.3);
  }
  .explain-header .ex-meta .ex-law{color: var(--c1) !important; text-shadow: 0 0 10px rgba(129,140,248,.3)}
  .explain-header .ex-meta .ex-art{
    color: var(--c3) !important;
    text-shadow: 0 0 14px rgba(251,191,36,.4);
  }
  .explain-header .ex-meta .ex-title{color: var(--c2) !important; text-shadow: 0 0 10px rgba(95,212,154,.25)}
  .explain-header .ex-meta .ex-title:not(:empty)::before,
  .explain-header .ex-meta .ex-title:not(:empty)::after{color: var(--c2) !important}
  .explain-header .ex-meta .ex-prog{
    color: var(--ink2) !important;
    border-left: 1px solid rgba(148,163,184,.25) !important;
  }
  /* 좌우 분할 — 원문 / AI 강의 */
  .explain-left{
    background: linear-gradient(180deg, rgba(31,30,29,.4), rgba(31,30,29,.55)) !important;
    border-right: 1px solid rgba(148,163,184,.18) !important;
  }
  .explain-right{
    background: linear-gradient(180deg, rgba(28,24,62,.45), rgba(18,16,42,.6)) !important;
  }
  .explain-left .ex-section-tag, .explain-right .ex-section-tag{
    color: var(--c1) !important;
    text-shadow: 0 0 8px rgba(129,140,248,.25);
  }
  .explain-left .ex-content{color: var(--ink) !important}
  .explain-left .ex-line{border-bottom-color: rgba(148,163,184,.16) !important}
  .explain-left .ex-body-line{color: var(--ink) !important}
  /* 조 헤더 박스 (예: "제1조 (목적)") — 라이트는 #dbeafe 옅은파랑 + #4f46e5 짙은네이비 → 다크에서 안 보임 */
  .explain-left .ex-art-head{
    background: linear-gradient(135deg, rgba(129,140,248,.18), rgba(148,163,184,.14)) !important;
    color: var(--c3) !important;
    border-left: 4px solid var(--c3) !important;
    box-shadow: 0 0 0 1px rgba(148,163,184,.18) inset, 0 0 24px rgba(148,163,184,.12);
    text-shadow: 0 0 10px rgba(251,191,36,.3);
  }
  .explain-left .ex-art-head b{color: var(--c3) !important}
  /* 시행령·시행규칙 sub-header */
  .explain-left .ex-sub-head{
    background: linear-gradient(135deg, rgba(148,163,184,.12), rgba(129,140,248,.08)) !important;
    color: var(--ink) !important;
    border-left: 3px solid var(--c1) !important;
    box-shadow: 0 0 0 1px rgba(148,163,184,.16) inset;
  }
  .explain-left .ex-sub-head b{color: var(--c1) !important; text-shadow: 0 0 8px rgba(129,140,248,.3)}
  /* 우측 해설 텍스트 (라이트는 #1a202c 검정 + #3730a3 갈색 강조 → 다크용 교체) */
  .explain-right .ex-content{color: var(--ink) !important}
  .explain-right .ex-content p{color: var(--ink) !important}
  .explain-right .ex-content b{color: var(--ink) !important}
  .explain-right .ex-content b:not([style]){
    color: var(--c3) !important;
    background: linear-gradient(transparent 60%, rgba(251,191,36,.22) 60%) !important;
    padding: 0 2px;
    text-shadow: 0 0 6px rgba(251,191,36,.25);
  }
  .explain-left .ex-body-line.ex-line-active{
    background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(203,213,225,.1)) !important;
    border-left-color: var(--c3) !important;
    box-shadow: 0 0 0 1px rgba(251,191,36,.25) inset, 0 0 24px rgba(251,191,36,.15) !important;
    color: #fff !important;
  }
  .explain-right .ex-content, .explain-right p, .explain-right span{color: var(--ink) !important}
  .ex-sent{color: var(--ink) !important; transition: all .25s ease}
  .ex-sent.ex-sent-now{
    box-shadow: none !important;
    text-decoration: underline !important;
    text-decoration-color: #a5b4fc !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    padding: 2px 6px;
    border-radius: 6px;
  }
  /* TTS sticky 컨테이너 — 라이트는 rgba(255,248,230,.94) 크림이라 다크에서 텍스트와 겹침 */
  .explain-tts-sticky{
    background: linear-gradient(180deg, rgba(31,30,29,.98), rgba(31,30,29,.94)) !important;
    border-bottom: 1px solid rgba(148,163,184,.28) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 4px 24px rgba(0,0,0,.45);
  }
  .explain-tts{
    background: linear-gradient(135deg, rgba(28,24,62,.85), rgba(18,16,42,.92)) !important;
    border: 1px solid rgba(148,163,184,.3) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 6px 20px rgba(0,0,0,.4) !important;
  }
  .explain-tts .tts-label{color: var(--ink2) !important}
  .explain-tts-tip{color: var(--ink3) !important; background: transparent !important}
  .explain-tts-tip b{color: var(--c3) !important; text-shadow: 0 0 8px rgba(251,191,36,.3)}
  /* 재생 버튼 */
  .explain-right button:not(.ex-nav):not(.ex-textbook-btn){
    background: linear-gradient(135deg, #818cf8 0%, #818cf8 55%, #94a3b8 100%) !important;
    color: #0a0918 !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(129,140,248,.3), 0 0 0 1px rgba(255,255,255,.1) inset !important;
    font-weight: 800;
  }
  .explain-right button:not(.ex-nav):not(.ex-textbook-btn):hover{
    filter: brightness(1.1);
    box-shadow: 0 8px 24px rgba(129,140,248,.5), 0 0 40px rgba(148,163,184,.25) !important;
  }
  /* 정지 버튼 */
  .explain-right .tts-stop, .explain-right [id*="ttsStop"]{
    background: rgba(251,113,133,.18) !important;
    color: var(--err) !important;
    border: 1px solid rgba(251,113,133,.35) !important;
    box-shadow: none !important;
  }
  /* 음성 드롭다운 + 속도 슬라이더 */
  .explain-right select, .explain-right input[type="range"]{
    background: rgba(255,255,255,.05) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.25) !important;
  }
  .explain-right select option{background: #1a1738 !important; color: var(--ink) !important}
  /* 안내 텍스트 (우측 해설의 아무 문장 클릭 시 그 지점부터 재생) */
  .explain-right .ex-hint, .explain-right small, .explain-right .desc{color: var(--ink3) !important}

  /* ───── 함정 찾기·원문 vs 변조 화면 (.trap-stage 안) ───── */
  .trap-stage, .cf-stage, .app-stage{
    background: transparent !important;
  }
  .trap-stage::-webkit-scrollbar-thumb, .cf-stage::-webkit-scrollbar-thumb{background: rgba(148,163,184,.35) !important}
  .trap-stage::-webkit-scrollbar-track, .cf-stage::-webkit-scrollbar-track{background: rgba(255,255,255,.02) !important}

  /* 점수 HUD */
  .trap-hud{
    background: linear-gradient(135deg, rgba(28,24,62,.85), rgba(18,16,42,.92)) !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 40px rgba(148,163,184,.08);
    color: var(--ink) !important;
  }
  .trap-hud .stat{color: var(--ink2) !important}
  .trap-hud .stat b{color: var(--ink) !important}
  .trap-hud .stat.score b{color: var(--c1) !important; text-shadow: 0 0 12px rgba(129,140,248,.4)}
  .trap-hud .stat.acc b{color: var(--c2) !important; text-shadow: 0 0 12px rgba(95,212,154,.4)}
  .trap-hud .stat.miss b{color: var(--err) !important; text-shadow: 0 0 12px rgba(251,113,133,.4)}
  .trap-hud .progress{background: rgba(148,163,184,.14) !important}
  .trap-hud .progress .fill{
    background: linear-gradient(90deg, #818cf8 0%, #94a3b8 50%, #a5b4fc 100%) !important;
    box-shadow: 0 0 14px rgba(148,163,184,.5);
  }

  /* 트랩 카드 — 본문 표시 영역 */
  .trap-card{
    background: linear-gradient(180deg, rgba(28,24,62,.78) 0%, rgba(18,16,42,.85) 100%) !important;
    border: 1px solid rgba(148,163,184,.25) !important;
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 60px rgba(111,109,104,.08), 0 0 0 1px rgba(255,255,255,.04) inset !important;
    color: var(--ink) !important;
  }
  .trap-card .head{color: var(--c3) !important; text-shadow: 0 0 10px rgba(251,191,36,.3)}
  .trap-card .head .law{color: var(--ink2) !important}

  /* 트랩 본문 단어들 — 폰트 키워서 더 크게 표시 */
  .trap-line{color: var(--ink) !important; font-size: 22px; line-height: 2.1}
  /* 트랩·비교 본문 영역 — 우측 메모장 없으니 컨테이너 더 넓게 */
  .trap-hud, .trap-card, .trap-feedback, .trap-actions, .cf-card{max-width: 1400px !important}
  .trap-line .word:hover{background: rgba(251,191,36,.18) !important}
  .trap-line .word.suspect{
    background: rgba(251,113,133,.25) !important;
    border-color: var(--err) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(251,113,133,.4);
  }
  .trap-line .word.correct{
    background: rgba(95,212,154,.25) !important;
    border-color: var(--c2) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(95,212,154,.4);
  }
  .trap-line .word.wrong{
    background: rgba(251,113,133,.3) !important;
    border-color: var(--err) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(251,113,133,.5);
  }
  .trap-line .word.missed{
    background: rgba(251,191,36,.28) !important;
    border-color: var(--c3) !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(251,191,36,.5);
  }

  /* 피드백 박스 (정답/오답) */
  .trap-feedback.ok{
    background: rgba(95,212,154,.18) !important;
    border: 1px solid rgba(95,212,154,.4) !important;
    color: var(--c2) !important;
  }
  .trap-feedback.ng{
    background: rgba(251,113,133,.18) !important;
    border: 1px solid rgba(251,113,133,.4) !important;
    color: var(--err) !important;
  }

  /* 버튼 (건너뛰기·확인·정상으로 판단 등) */
  .trap-btn.skip{
    background: rgba(148,163,184,.12) !important;
    color: var(--ink2) !important;
    border: 1px solid rgba(148,163,184,.25) !important;
  }
  .trap-btn.skip:hover{background: rgba(148,163,184,.22) !important; color: var(--ink) !important}
  .trap-btn.confirm{
    background: linear-gradient(135deg, #818cf8 0%, #818cf8 55%, #94a3b8 100%) !important;
    color: #0a0918 !important;
    box-shadow: 0 8px 24px rgba(129,140,248,.35), 0 0 40px rgba(148,163,184,.2) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
  }
  .trap-btn.confirm:hover{
    filter: brightness(1.1);
    box-shadow: 0 12px 36px rgba(129,140,248,.55), 0 0 60px rgba(148,163,184,.35) !important;
    transform: translateY(-2px);
  }
  .trap-btn.confirm:disabled{
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.3) !important;
    box-shadow: none !important;
    text-shadow: none;
  }
  .trap-btn.next{
    background: linear-gradient(135deg, #5fd49a, #14b8a6) !important;
    color: #0a0918 !important;
    box-shadow: 0 8px 24px rgba(95,212,154,.4) !important;
  }

  /* 원문 vs 변조 — 좌우 컬럼 */
  .compare-grid{gap: 14px}
  .compare-col{
    background: linear-gradient(180deg, rgba(22,20,50,.75), rgba(31,30,29,.85)) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 12px;
  }
  .compare-col.original{border-color: rgba(95,212,154,.3) !important}
  .compare-col.tampered{border-color: rgba(148,163,184,.3) !important}
  .compare-col .label{
    color: var(--ink2) !important;
    font-size: 11px;
    letter-spacing: .08em;
    margin-bottom: 8px;
  }
  .compare-col.original .label{color: var(--c2) !important}
  .compare-col.tampered .label{color: var(--c2) !important}

  /* ───── 목차 패널 (.toc-panel) ───── */
  .toc-panel{
    background: linear-gradient(180deg, rgba(20,18,42,.96) 0%, rgba(31,30,29,.92) 100%) !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    box-shadow:
      0 20px 60px rgba(0,0,0,.7),
      0 0 80px rgba(148,163,184,.1),
      0 0 0 1px rgba(148,163,184,.05) inset !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .toc-panel .toc-head{
    background: linear-gradient(135deg, rgba(111,109,104,.5), rgba(67,56,202,.6)) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(148,163,184,.3);
  }
  .toc-panel .toc-close{
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
  }
  .toc-panel .toc-close:hover{background: rgba(251,113,133,.35) !important}
  .toc-panel .toc-list{
    background: transparent !important;
  }
  .toc-panel .toc-list::-webkit-scrollbar-thumb{background: rgba(148,163,184,.35) !important}
  .toc-panel .toc-list::-webkit-scrollbar-track{background: rgba(255,255,255,.02) !important}
  .toc-panel .toc-chapter{
    background: linear-gradient(135deg, rgba(129,140,248,.16), rgba(148,163,184,.1)) !important;
    color: var(--c1) !important;
    border: 1px solid rgba(129,140,248,.22);
    text-shadow: 0 0 8px rgba(129,140,248,.25);
    background-color:#283548 !important;   /* sticky 머리 — 반투명 그라데이션만 두면 뒤 줄이 비친다 */
  }
  .toc-panel .toc-item{
    color: var(--ink) !important;
  }
  .toc-panel .toc-item:hover{
    background: rgba(129,140,248,.1) !important;
    color: #fff !important;
  }
  .toc-panel .toc-item.current{
    background: linear-gradient(135deg, rgba(251,191,36,.2), rgba(203,213,225,.12)) !important;
    color: var(--c3) !important;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(251,191,36,.35) inset, 0 0 20px rgba(251,191,36,.18);
    text-shadow: 0 0 10px rgba(251,191,36,.4);
  }
  .toc-panel .toc-item.done{color: rgba(190,180,220,.55) !important}
  .toc-panel .toc-item.done::before{color: var(--c2) !important; text-shadow: 0 0 8px rgba(95,212,154,.35)}
  .toc-panel .toc-item.toc-sub{
    color: var(--ink2) !important;
    border-left-color: rgba(148,163,184,.25) !important;
  }
  .toc-panel .toc-item.toc-sub .toc-num{color: var(--ink3) !important}

  /* ───── 따라읽기·깜빡임 info-pop (z-index + 배경 정리) ───── */
  .blink-info .info-pop{
    background: linear-gradient(180deg, rgba(20,18,42,.98), rgba(31,30,29,.96)) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.35) !important;
    box-shadow:
      0 24px 72px rgba(0,0,0,.75),
      0 0 80px rgba(148,163,184,.12),
      0 0 0 1px rgba(255,255,255,.04) inset !important;
    z-index: 250 !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
  .blink-info .info-pop::before{background: rgba(20,18,42,.98) !important; border: 1px solid rgba(148,163,184,.35); border-bottom: none; border-right: none}
  .blink-info .info-pop b{color: var(--c3) !important; text-shadow: 0 0 10px rgba(251,191,36,.35)}
  .blink-info .info-pop .pop-x{
    background: rgba(255,255,255,.08) !important;
    color: var(--ink2) !important;
  }
  .blink-info .info-pop .pop-x:hover{background: rgba(251,113,133,.5) !important; color: #fff !important}
  .blink-info .info-pop::-webkit-scrollbar-thumb{background: rgba(148,163,184,.35) !important}
  .blink-info .info-pop::-webkit-scrollbar-track{background: rgba(255,255,255,.02) !important}
  /* info-pop 내부 라디오·체크박스·드롭다운 */
  .blink-info .info-pop label, .blink-info .info-pop span{color: var(--ink2)}
  .blink-info .info-pop select, .blink-info .info-pop input[type="text"], .blink-info .info-pop input[type="number"]{
    background: rgba(255,255,255,.05) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.25) !important;
  }
  .info-icon{
    background: rgba(148,163,184,.14) !important;
    color: var(--c1) !important;
    border-color: rgba(148,163,184,.4) !important;
  }
  .info-icon:hover{
    background: rgba(148,163,184,.3) !important;
    color: #fff !important;
    border-color: rgba(148,163,184,.7) !important;
  }

  /* ───── 모달들 (학습 도구·동기화·이용약관 등) ───── */
  .modal-bg, .legal-modal-bg, .fb-modal, .qr-inbox-modal, #toolsModal, #syncModal, #textbookModal{
    background: rgba(0,0,5,.85) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
  .modal-content, .modal-bg > div, .legal-modal, .fb-card, .qr-inbox-card,
  #toolsModal .modal-content, #syncModal .modal-content, .textbook-modal, .pig-card{
    background: linear-gradient(180deg, rgba(22,20,50,.98) 0%, rgba(31,30,29,.95) 100%) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.3) !important;
    box-shadow:
      0 30px 80px rgba(0,0,0,.75),
      0 0 100px rgba(148,163,184,.12),
      0 0 0 1px rgba(255,255,255,.04) inset !important;
  }
  .modal-content header, .modal-content .modal-head, .tools-head, .sync-head, .legal-head, .fb-head{
    background: linear-gradient(135deg, rgba(111,109,104,.45), rgba(67,56,202,.55)) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(148,163,184,.25);
  }
  .modal-content h2, .modal-content h3, .tools-section-title{color: var(--c3) !important; text-shadow: 0 0 10px rgba(251,191,36,.3)}
  /* tools 탭 */
  .tools-tabs, .tools-tabbar{
    background: rgba(31,30,29,.6) !important;
    border-bottom: 1px solid rgba(148,163,184,.2);
  }
  .tools-tab{color: var(--ink2) !important}
  .tools-tab:hover{color: var(--c1) !important; background: rgba(129,140,248,.08) !important}
  .tools-tab.active{
    color: var(--c3) !important;
    background: linear-gradient(180deg, rgba(251,191,36,.12), transparent) !important;
    border-bottom: 2px solid var(--c3) !important;
    text-shadow: 0 0 10px rgba(251,191,36,.3);
  }
  .tools-row, .sync-row, .fb-row{border-bottom: 1px solid rgba(148,163,184,.12) !important}
  .tools-row .label, .sync-row .label, .fb-row .label{color: var(--ink) !important}
  .tools-row .desc, .sync-row .desc, .fb-row .desc{color: var(--ink3) !important}
  /* 토글 스위치 */
  .tools-toggle, .toggle-switch{
    background: rgba(148,163,184,.2) !important;
    border-color: rgba(148,163,184,.35) !important;
  }
  .tools-toggle.on, .toggle-switch.on{
    background: linear-gradient(135deg, #818cf8, #94a3b8) !important;
    box-shadow: 0 0 16px rgba(148,163,184,.4);
  }
  .tools-toggle::after, .toggle-switch::after{background: #fff !important}

  /* ───── 학습 시작 직전 인터스티셜 광고 ───── */
  .ad-interstitial > div{
    background: linear-gradient(180deg, rgba(22,20,50,.98), rgba(31,30,29,.95)) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(148,163,184,.3);
  }

  /* ───── 학습 팁(스튜디오 헬프) ───── */
  .study-tip{
    background: linear-gradient(135deg, rgba(22,20,50,.95), rgba(31,30,29,.92)) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(129,140,248,.35) !important;
    border-left: 4px solid var(--c1) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 60px rgba(129,140,248,.15);
  }

  /* ───── 함정·비교·해설 화면 ───── */
  .trap-line, .compare-col .text, .ex-sent, .ex-body-line{
    color: var(--ink) !important;
  }
  .trap-line.found{color: var(--c3) !important; background: rgba(251,191,36,.12) !important}
  .trap-line.miss{color: var(--err) !important; background: rgba(251,113,133,.12) !important}
  .compare-col{
    background: rgba(31,30,29,.5) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
  }
  .compare-col h4, .compare-col .col-title{color: var(--c1) !important}
  .ex-sent.ex-active{
    background: none !important;
    box-shadow: none !important;
    text-decoration: underline !important;
    text-decoration-color: #a5b4fc !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    color: var(--c3) !important;
    box-shadow: 0 0 0 1px rgba(148,163,184,.35) inset, 0 0 18px rgba(148,163,184,.2);
  }
  .ex-body-line.ex-line-active{
    background: rgba(251,191,36,.12) !important;
    border-left-color: var(--c3) !important;
  }

  /* ───── 짧은 텍스트 들 ───── */
  small, .desc, .sub, .hint, .footnote{color: var(--ink3) !important}
  label{color: var(--ink2) !important}
  b, strong{color: var(--ink) !important}
  code{
    background: rgba(148,163,184,.12) !important;
    color: var(--c1) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
  }

  /* ───── 섹션 번호 뱃지 (1, 2 등 — h2 안의 작은 사각형)
     라이트 모드: 배경 var(--ink)=짙은 네이비 + 흰 글자
     다크 모드:  var(--ink)=오프화이트 → 흰 배경+흰 글자로 사라짐 → 보라 그라데이션 ───── */
  .card h2 .num, h2 .num{
    background: linear-gradient(135deg, #818cf8 0%, #94a3b8 100%) !important;
    color: #0a0918 !important;
    box-shadow: 0 0 0 1px rgba(148,163,184,.45), 0 0 14px rgba(148,163,184,.35);
    font-weight: 800;
  }
  .science-card .num{color: var(--c1) !important; text-shadow: 0 0 14px rgba(129,140,248,.4)}
  .first-study-card h2 .num{
    background: linear-gradient(135deg, #818cf8 0%, #94a3b8 100%) !important;
    color: #0a0918 !important;
    box-shadow: 0 0 0 1px rgba(148,163,184,.45), 0 0 14px rgba(148,163,184,.35);
  }
  .tools-list-item .num{color: var(--c1) !important}
}

  /* 접근성 — 모션 최소화 설정 존중 (WCAG 2.3.3) */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  }

  /* ── PDF 인쇄용 문서 — drill.html 과 같은 클래스명(.pp-*)을 써서 두 파일의 인쇄 스타일을 통일했다 ── */
  #printArea{display:none}
  body.printing > *:not(#printArea){display:none !important}
  body.printing #printArea{display:block !important;background:#fff;color:#111;padding:0 2px}
  #printArea .pp-title{font-family:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;font-size:19px;font-weight:800;color:#111;text-align:center;margin-bottom:4px}
  #printArea .pp-meta{font-size:11.5px;color:#555;text-align:center;margin-bottom:22px;padding-bottom:12px;border-bottom:2px solid #111}
  #printArea .pp-list{font-family:'Noto Sans KR',sans-serif}
  #printArea .pp-q{margin-bottom:16px}
  #printArea .pp-qhead{display:flex;gap:6px;align-items:baseline;margin-bottom:4px}
  #printArea .pp-num{font-weight:800;font-size:14px;color:#111}
  #printArea .pp-type{font-size:10px;font-weight:700;color:#555;background:#f0f0f0;border-radius:3px;padding:1px 6px}
  #printArea .pp-prompt{font-size:13.5px;line-height:1.65;color:#111}
  #printArea .pp-oxrow{display:flex;gap:16px;margin-top:6px;padding-left:2px}
  #printArea .pp-oxbox{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid #888;border-radius:4px;font-size:13px;color:#333}
  #printArea .pp-choices{margin-top:6px;padding-left:2px}
  #printArea .pp-choice{font-size:13px;line-height:1.85;color:#111}
  #printArea .pp-blank{margin-top:8px;padding-left:2px;font-size:13px;color:#444}
  #printArea .imgq-wrap{margin:10px 0 2px}
  #printArea .imgq{position:relative;display:inline-block;max-width:100%;background:#fff;border-radius:6px;overflow:hidden}
  #printArea .imgq img{display:block;max-width:100%;height:auto}
  #printArea .imgc-cover{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #333;border-radius:3px}
  #printArea .imgc-cover .imgc-q{color:#333;font-weight:900;font-size:15px}
  #printArea .pp-anshead{font-size:16px;font-weight:800;text-align:center;margin:0 0 16px;padding-top:20px;border-top:2px solid #111}
  #printArea .pp-ans{font-size:12.5px;line-height:1.65;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed #ddd}
  #printArea .pp-ans-val{font-weight:800;color:#1d4ed8}
  #printArea .pp-exp{color:#444;margin-top:2px}
  #printArea .pp-muted{color:#888;font-style:italic;font-size:12.5px}
  /* 원문회독·강의 공용 — 조 단위 블록 */
  #printArea .pp-art{margin-bottom:22px}
  #printArea .pp-art-head{font-size:14.5px;font-weight:800;color:#111;margin-bottom:6px;padding-bottom:4px;border-bottom:1.5px solid #ccc;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  #printArea .pp-badge-mock{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:#fff;background:#dc2626;border-radius:3px;padding:1px 6px}
  #printArea .pp-badge-mini{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:#fff;background:#7c3aed;border-radius:3px;padding:1px 6px}
  #printArea .pp-line{font-size:13px;line-height:1.7;color:#1a1a1a;margin:3px 0}
  #printArea .pp-line-title{font-weight:800;color:#111;margin-top:8px}
  #printArea .pp-line-clause{padding-left:0}
  #printArea .pp-line-item-no{padding-left:16px}
  #printArea .pp-line-item-letter{padding-left:32px}
  #printArea .pp-line-proviso{padding-left:16px;color:#444}
  #printArea .pp-lecture{margin-top:8px;padding:10px 14px;background:#f7f7f5;border-left:3px solid #94a3b8;border-radius:0 6px 6px 0}
  #printArea .pp-lecture p{font-size:12.5px;line-height:1.7;color:#222;margin:0 0 8px}
  #printArea .pp-lecture p:last-child{margin-bottom:0}
  #printArea .pp-lecture .pp-warn{font-weight:700;color:#7a1f1f;background:#fdf1ee;padding:6px 10px;border-radius:4px}
  @media print{
    @page{margin:16mm 14mm}
    body > *:not(#printArea){display:none !important}
    #printArea{display:block !important}
    #printArea .pp-q,#printArea .pp-ans,#printArea .pp-art{break-inside:avoid}
    #printArea .pp-anshead{break-before:page}
  }


/* ═══ 도식 확대 뷰어 · 원문 글자 크기 (2026-08-25 사용자 지시) ═══════════════
   🔴 **핀치 줌으로 푸는 것을 그만뒀다.** `position:fixed` 인 리더와 원리적으로 싸운다 —
      둘레를 칠해도 확대해서 밀면 결국 리더 밖으로 나간다(L158). 사용자가 하려던 두 가지를
      **화면 안에서** 되게 만든다: ① 도식을 눌러 키운다 ② 원문 글자를 키운다. */
.diag-zoom{
  position:fixed;inset:0;z-index:9700;display:none;flex-direction:column;
  background:#0f172a;color:#e2e8f0
}
.diag-zoom.show{display:flex}
.dz-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;background:#1e293b;border-bottom:1px solid #334155
}
.dz-title{font-size:14px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-ctrl{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.dz-ctrl button{
  min-width:42px;min-height:42px;padding:0 10px;border:1px solid #475569;border-radius:10px;
  background:#0f172a;color:#e2e8f0;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit
}
.dz-ctrl button:active{background:#334155}
.dz-ctrl #dzPct{min-width:64px;font-size:13px}
.dz-ctrl .dz-x{border-color:#7f1d1d;color:#fca5a5}
/* 🔴 확대·이동은 우리가 한다 — 브라우저 제스처가 끼어들면 둘이 싸운다 */
.dz-stage{flex:1 1 auto;overflow:hidden;position:relative;touch-action:none;cursor:grab;min-height:0}
.dz-stage.dragging{cursor:grabbing}
.dz-canvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.dz-canvas svg{display:block;max-width:none !important;height:auto}
.dz-canvas .mmd-cap{color:#cbd5e1;font-size:13px;font-weight:700;margin-bottom:8px}
.dz-canvas .lec-mermaid-box{background:#fff;border-radius:12px;padding:16px}
.dz-hint{flex:0 0 auto;padding:8px 14px;font-size:12px;color:#94a3b8;text-align:center;background:#1e293b;border-top:1px solid #334155}

/* 🔵 눌러서 키울 수 있다는 것이 보여야 누른다.
   🔴 `.study` 안으로 좁히지 마라 — 도식은 **세 곳**에 그려진다(눈회독 우측 칸 · 모바일 팝업 ·
      강의). 한 곳만 표시하면 나머지에서는 「눌러도 되는 줄」을 모른다(R46).
   🔴 뷰어 안의 복제본(`.dz-clone`)은 뺀다 — 이미 크게 본 화면이다. */
.lec-mermaid-box:not(.dz-clone){cursor:zoom-in;position:relative}
.lec-mermaid-box:not(.dz-clone)::after{
  content:"🔍 눌러서 크게";position:absolute;right:8px;top:8px;
  background:rgba(15,23,42,.72);color:#fff;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:999px;pointer-events:none
}

/* ═══ 원문 글자 크기 — `--study-fs` ══════════════════════════════════════
   🔴 `--font-scale`(사이트 전체 배율)을 키우지 마라 — 홈·모의고사까지 다 커진다.
      원문만 따로 키우는 자를 새로 둔다. 둘은 곱해진다(전체 배율을 이미 올린 사람도 맞게).
   🔴 `.study.show` 로 감는 이유는 특이도다 — `body.mobile-mode .law-line.current`(0,3,1)를
      이겨야 폰에서도 먹는다. `.study.show .law-line.current` 는 (0,4,0) 이다. */
:root{--study-fs:1}
.study.show .law-page{font-size:calc(18px * var(--font-scale,1) * var(--study-fs,1)) !important}
.study.show .law-line{font-size:calc(18px * var(--font-scale,1) * var(--study-fs,1)) !important}
.study.show .law-line.current{font-size:calc(18.5px * var(--font-scale,1) * var(--study-fs,1)) !important}
.study.show .law-line.header{font-size:calc(19px * var(--font-scale,1) * var(--study-fs,1)) !important}
.study.show .law-line.art-title{font-size:calc(18px * var(--font-scale,1) * var(--study-fs,1)) !important}
/* 🔴 **강의 본문도 같이 커져야 한다**(사용자: 「이거 강의탭에는 없어」).
   원문회독만 키우면 강의를 보는 사람은 여전히 작은 글씨를 본다. 자는 그대로 `--study-fs` 다 —
   화면마다 다른 값을 두면 「어느 쪽을 키운 건지」를 사용자가 기억해야 한다(R31). */
/* 🔴 개념강의 원고 칸(`.ex-narrative`)이 15px 를 **박아** 두어 위에서 내려오는 배율이 여기서 끊겼다
   (2026-09-08 사용자 제보 「글 크기 조절, 스크립트는 안되는데」). 출제핵심강의는 `.ep-card` 라
   font-size 가 없어 물려받았고 — 그래서 강의 갈래에 따라 되기도, 안 되기도 했다.
   자는 그대로 `--study-fs` 다. 판을 맞바꿔도(스크립트가 왼쪽으로 가도) 따라오도록 판 안 붙이고 건다. */
.study.show .ex-narrative{font-size:calc(15px * var(--study-fs,1)) !important}
.study.show .explain-left .ex-content{font-size:calc(14.5px * var(--study-fs,1)) !important}
.study.show .explain-right .ex-content{font-size:calc(15px * var(--study-fs,1)) !important}
.study.show .explain-left .ex-art-head{font-size:calc(18px * var(--study-fs,1)) !important}
.study.show .explain-left .ex-sub-head{font-size:calc(14.5px * var(--study-fs,1)) !important}
.study.show .ex-article-header{font-size:calc(18px * var(--study-fs,1)) !important}
.study.show .ex-intro{font-size:calc(14px * var(--study-fs,1)) !important}
.study.show .ex-section-num{font-size:calc(14px * var(--study-fs,1)) !important}
.study.show .ex-section-quote{font-size:calc(13px * var(--study-fs,1)) !important}
.study.show .ex-section-explain{font-size:calc(14px * var(--study-fs,1)) !important}
/* 🔵 머리·단추·꼬리표는 **안 키운다** — 키우면 머리가 두 줄이 되어 본문 자리를 먹는다.
   키우는 것은 「읽는 글」뿐이다. */
.sa-group.sa-font [data-fs="val"]{min-width:58px;font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════════════════
   리디식 읽기 (2026-08-26 · 사용자 지시 「디자인도 리디 처럼」)

   🔴 **읽을 때는 크롬이 0 이다.** 리디가 우리보다 나은 자리가 정확히 둘이었다 —
      ① 읽는 동안 머리도 독도 아예 없다  ② 도구를 **탭으로** 부른다(스크롤 방향이 아니라).
      ②가 제보 ⑤(「윗내용 보고싶어도 왔다갔다거려서 불편함」)의 진짜 뿌리다.
      스크롤 방향으로 접으면 **위를 보려는 동작과 머리를 펴는 동작이 같은 동작**이라
      임계를 어떻게 잡아도 왔다갔다 한다. 탭으로 가르면 원리적으로 안 겹친다.
   🔴 **줄을 탭하면 그 줄로 간다(제보 ②③) · 줄 밖 여백을 탭하면 도구가 나온다.**
   🔵 기능은 하나도 안 뺐다 — 자주 쓰는 다섯은 **엄지에 닿는 아래**로, 나머지는 시트로 옮겼다.
   🔴 **읽기 테마는 지면만이 아니라 그 위에 뜨는 것 전부에 걸린다** — 머리·확인 OX 카드·독·시트.
      한 곳만 빼먹으면 밤 지면에 **흰 카드**가 떠서 눈이 부신다(스샷에서 잡았다).
   🔴 **명조(세리프)는 안 넣는다** — 안드로이드에 한글 세리프 기본 글꼴이 없다.
      고르개만 두면 눌러도 안 바뀌는 단추가 된다. 없는 것을 파는 것이 더 나쁘다.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --rd-line: 1.9;          /* 줄 간격 — 시트에서 위아래 스테퍼 */
  --rd-side: 22px;         /* 좌우 여백 — 시트에서 위아래 스테퍼 */
  --rd-dock-h: 0px;        /* 하단 독이 먹는 높이(잰 값). 본문 아래 여백이 이만큼 */
  /* 🔴 74px 는 첫 페인트용 기본값이다 — 앱바가 실제로 보이는 화면(index.html `.appbar`
     의 `@media(max-width:720px)…`) 기준이다. `_rdMeasureDock` 이 **앱바를 실측**해서
     그 값을 즉시 덮어쓴다(태블릿처럼 앱바가 `display:none` 이면 0에 가깝게) — 자는
     앱바의 실제 렌더 상태 한 곳이다(R31). 미디어쿼리를 여기서 다시 베끼지 마라. */
  --rd-dock-bottom: 74px;
}

/* ── 읽기 테마 — 지면 ──────────────────────────────────────────────────
   🔴 `!important` 를 쓴다 — 다크 테마가 `.law-page` 를 `!important` 로 칠하고 있어
      그것보다 세게 오지 않으면 고른 테마가 조용히 무시된다(R132). */
html body[data-rdtheme="paper"] .law-page{background:#fbf6e9 !important;color:#2c2a24 !important}
html body[data-rdtheme="sepia"] .law-page{background:#f0e4cc !important;color:#463a26 !important}
html body[data-rdtheme="night"] .law-page{background:#15161a !important;color:#c6c3ba !important}
html body[data-rdtheme="paper"] .law-line:not(.current){color:#2c2a24}
html body[data-rdtheme="sepia"] .law-line:not(.current){color:#463a26}
html body[data-rdtheme="night"] .law-line:not(.current){color:#c6c3ba !important}
html body[data-rdtheme="night"] .law-line:not(.current) > *{color:inherit !important}
/* 🔬 아직 안 읽은 줄 — 옛 `#a8a08a` 는 종이 위에서 대비 **2.6:1** 이라 본문으로 못 읽는다(R158).
   눈회독은 「칠 차례」가 없는 모드라 흐릴 이유도 없다. 현재 줄 표시가 이미 자리를 알려 준다. */
html body.rd-mode[data-rdtheme="paper"] .law-line.upcoming{color:#5d5647 !important}
html body.rd-mode[data-rdtheme="sepia"] .law-line.upcoming{color:#6b5c40 !important}
html body.rd-mode[data-rdtheme="night"] .law-line.upcoming{color:#a9a69e !important}
/* ── 현재 줄 — **눈회독에서는 아주 얕게** (2026-08-26 사용자 제보) ─────────────
   「클릭하면 굳이 이렇게 뭉텅이로 진해져야하냐」 · 「첫줄말고 내가 클릭한 줄」.
   🔴 **「종이」 지면에만 `.current` 규칙이 없었다** — 세피아·밤은 지면에 맞게 얕게 칠하는데
      종이는 기본값(남색 배경 + 4px 남색 띠 + 굵게 + 그림자)으로 떨어졌다.
      따뜻한 종이 위에 남색 덩어리가 얹히니 한 항이 통째로 진해 보였다.
   🔴 **읽는 중에는 강조가 얕아야 한다** — 타이핑 모드는 「지금 칠 줄」이라 진한 게 맞지만,
      눈회독은 **읽는 것**이라 덩어리가 글을 가린다. 그래서 눈회독에서만 얕게 한다.
      굵게·그림자를 빼고 왼쪽 띠를 얇게 남긴다(자리를 잃지 않게).
   🔵 글자색은 안 건드린다 — 지면별 대비를 이미 4.5:1 이상으로 맞춰 놨다(R158). */
body[data-mode="eyeread"] .law-line.current{
  /* 🔴 `!important` 는 `body.mobile-mode .law-line.current{font-weight:600 !important}`(1958줄)를
        이기려는 것이다 — 폰에서만 굵게 남아 사용자가 본 그 화면이 됐다. 눈회독에서만 푼다. */
  font-weight:400 !important;
  box-shadow:none !important;
  border-left-width:3px;
}
html body[data-rdtheme="paper"] .law-line.current{
  background:#f3ecda !important;               /* 지면(#fbf6e9)보다 아주 조금만 어둡게 */
  border-left-color:#a58b52 !important;
  color:#2c2a24 !important;
  box-shadow:none !important;
}
/* 현재 줄 — 지면에 맞는 얕은 강조 */
html body[data-rdtheme="sepia"] .law-line.current{background:#e5d5b4 !important;border-left-color:#8a6d3b !important;color:#33291a !important;box-shadow:none !important}
html body[data-rdtheme="night"] .law-line.current{background:#23252c !important;border-left-color:#8b93a8 !important;color:#e6e3da !important;box-shadow:none !important}
html body[data-rdtheme="night"] .law-line.current > *{color:inherit !important}
/* 🔴 눈회독에서는 세 지면 다 **띠 위주**로 — 배경 덩어리를 더 걷어낸다 */
body[data-mode="eyeread"][data-rdtheme="sepia"] .law-line.current{background:#eaddbe !important}
body[data-mode="eyeread"][data-rdtheme="night"] .law-line.current{background:#1d1f25 !important}

/* ── 읽기 테마 — 지면 위에 뜨는 것들 ─────────────────────────────────── */
/* 머리 */
html body.rd-mode[data-rdtheme="paper"] .study-head{background:#f7f1e2 !important;border-bottom-color:rgba(120,110,90,.16) !important}
html body.rd-mode[data-rdtheme="sepia"] .study-head{background:#ebdfc4 !important;border-bottom-color:rgba(138,109,59,.2) !important}
html body.rd-mode[data-rdtheme="night"] .study-head{background:#1b1d22 !important;border-bottom-color:rgba(255,255,255,.1) !important}
html body.rd-mode[data-rdtheme="night"] .study-head .info b,
html body.rd-mode[data-rdtheme="night"] .study-head .info .label{color:#d8d5cc !important}
/* 조문 끝 확인 OX 카드 — 지면 위에 뜨는 가장 큰 물건이다 */
html body.rd-mode[data-rdtheme="paper"] .art-check.on{background:#fffdf6 !important;border-color:rgba(120,110,90,.2) !important}
html body.rd-mode[data-rdtheme="sepia"] .art-check.on{background:#f7edd8 !important;border-color:rgba(138,109,59,.26) !important}
html body.rd-mode[data-rdtheme="sepia"] .art-check .ac-q{color:#3b3224 !important}
html body.rd-mode[data-rdtheme="night"] .art-check.on{background:#1e2027 !important;border-color:rgba(255,255,255,.11) !important}
html body.rd-mode[data-rdtheme="night"] .art-check .ac-q{color:#dcd9d0 !important}
html body.rd-mode[data-rdtheme="night"] .art-check .ac-r{color:#a8a59d !important}
html body.rd-mode[data-rdtheme="night"] .art-check .ac-r b{color:#e6e3da !important}
html body.rd-mode[data-rdtheme="night"] .art-check .ac-b{background:#282b33 !important;border-color:rgba(255,255,255,.16) !important;color:#d8d5cc !important}
/* 우측 도식 칸(PC) */
html body.rd-mode[data-rdtheme="night"] .eyeread-dock{background:#1b1d22;border-color:rgba(255,255,255,.1)}

/* ── 타이포 ───────────────────────────────────────────────────────────── */
html body.rd-mode .law-page{line-height:var(--rd-line) !important;padding-left:var(--rd-side) !important;padding-right:var(--rd-side) !important}

/* ── 읽는 중 = 크롬 0 ─────────────────────────────────────────────────────
   🔴 `display:none` 이 아니라 **밀어 올린다** — 안에 든 단추의 상태(켜짐/꺼짐)와
      이벤트 묶음이 그대로 살아 있어야 하단 독이 그것을 **그대로 옮겨 쓴다**(R31). */
body[data-mode="eyeread"].studying.rd-mode .study-head{
  position:absolute;top:0;left:0;right:0;z-index:1000;
  transform:translateY(-102%);opacity:0;pointer-events:none;
  transition:transform .18s ease,opacity .18s ease}
body[data-mode="eyeread"].studying.rd-mode.rd-ui .study-head{transform:none;opacity:1;pointer-events:auto}
body[data-mode="eyeread"].studying.rd-mode .law-page{padding-top:16px !important;padding-bottom:calc(var(--rd-dock-h) + 28px) !important}
/* 🔴 리디식 머리는 **조문 이름만** 싣는다 — 도구는 전부 아래(독·시트)에 있다.
   ⋯ 를 위아래에 둘 두면 같은 것이 두 번 보인다(스샷에서 잡았다). */
body.rd-mode #hdMore, body.rd-mode #saDrawer{display:none !important}
/* 🔴 옛 「스크롤 방향으로 접기」와 함께 두지 않는다 — 둘이 싸운다(R111) */
body.rd-mode.eyeread-head-hide .study-head{transform:translateY(-102%)}

/* ── 하단 독 — 자주 쓰는 다섯이 엄지에 닿는다 ───────────────────────────
   🔴 **읽는 동안엔 독도 없다**(`rd-ui` 일 때만). 떠 있으면 본문 위에 겹쳐
      「읽는 화면에 뭐가 얹혀 있다」가 되어 크롬 0 이 아니게 된다(스샷에서 잡았다). */
/* 🔴 폭을 **가운데 정렬 + shrink-to-fit** 으로 두면 좁은 화면에서 마지막 단추(⋯)가
   조용히 잘린다(실측 폭 311 · 내용 348 — 430px 화면에서도 넘쳤다).
   좌우를 못 박고 `safe center` 로 둔다 — 넘치면 잘리지 않고 **가로로 굴러간다**. */
#rdDock{position:fixed;left:8px;right:8px;transform:none;justify-content:safe center;
  bottom:calc(env(safe-area-inset-bottom,0px) + var(--rd-dock-bottom));
  z-index:900;display:none;gap:0;padding:5px 4px;border-radius:999px;width:auto;
  background:rgba(253,251,244,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(120,110,90,.2);box-shadow:0 6px 22px rgba(60,45,15,.15);
  overflow-x:auto;scrollbar-width:none}
#rdDock::-webkit-scrollbar{display:none}
body[data-mode="eyeread"].studying.rd-mode.rd-ui #rdDock{display:flex}
/* 🔴 **태블릿 — 앱바가 `display:none` 인 화면**(사용자 지시 2026-08-27 「우측 하단에
   여백없이·손가락 쉽게」). 전 폭 가운데 정렬은 폰의 좁은 화면 대책이었다 — 앱바가 없어
   가로가 넓은 화면에서는 그 대책이 오히려 **오른쪽 엄지에서 먼 가운데**로 독을 밀어낸다.
   `rd-dock-corner` 는 `_rdMeasureDock` 이 앱바 실측으로 붙이는 클래스 하나다(R31). */
body.rd-dock-corner #rdDock{left:auto;right:calc(env(safe-area-inset-right,0px) + 6px);
  justify-content:flex-start;max-width:min(72vw,460px)}
#rdDock > *{flex:0 0 auto}
/* 🔴 특이도 — 원래 단추가 `#stTrapMark{...!important}` 꼴이라 **클래스로는 못 이긴다**.
   `#rdDock` 을 앞에 세워 id+class 로 올린다(안 그러면 독에 원색 알약이 그대로 남는다). */
#rdDock .study-btn, #rdDock button{
  border:none !important;background:transparent !important;color:#3f3a30 !important;
  font-size:12px !important;font-weight:700 !important;padding:8px 8px !important;
  border-radius:999px !important;cursor:pointer;letter-spacing:-.02em;white-space:nowrap;
  font-family:inherit !important;box-shadow:none !important;min-width:0 !important;height:auto !important}
#rdDock .study-btn.on, #rdDock button.on{background:rgba(99,102,241,.13) !important;color:#4338ca !important}
#rdDock .blink-info{display:inline-flex;align-items:center}
#rdDock .info-icon, #rdDock .info-pop{display:none !important}   /* 설명은 시트에 있다 — 독은 손가락 자리다 */
html body[data-rdtheme="sepia"] #rdDock{background:rgba(243,233,212,.97);border-color:rgba(138,109,59,.26)}
html body[data-rdtheme="night"] #rdDock{background:rgba(30,32,39,.97);border-color:rgba(255,255,255,.13);box-shadow:0 6px 22px rgba(0,0,0,.45)}
html body[data-rdtheme="night"] #rdDock .study-btn,
html body[data-rdtheme="night"] #rdDock button{color:#cfccc3 !important}
html body[data-rdtheme="night"] #rdDock .study-btn.on,
html body[data-rdtheme="night"] #rdDock button.on{background:rgba(129,140,248,.22) !important;color:#c7d2fe !important}

/* ── 진행 — 화면 맨 아래 실선 하나. 읽는 동안에도 남는 유일한 크롬이다 ───── */
#rdProg{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:901;display:none;
  background:rgba(120,110,90,.14)}
body[data-mode="eyeread"].studying.rd-mode #rdProg{display:block}
#rdProg > i{display:block;height:100%;background:#6366f1;transition:width .25s ease}
/* 🔴 셈은 **앱바 위**로 띄운다 — bottom:0 에 두면 하단 5탭 아이콘 위에 겹쳐 찍힌다(R116) */
#rdProg > b{position:absolute;right:12px;
  bottom:calc(env(safe-area-inset-bottom,0px) + var(--rd-dock-bottom) + 52px);
  font-size:10px;font-weight:700;
  color:rgba(90,84,70,.55);font-variant-numeric:tabular-nums;letter-spacing:0;
  opacity:0;transition:opacity .18s ease}
body.rd-mode.rd-ui #rdProg > b{opacity:1}
html body[data-rdtheme="night"] #rdProg{background:rgba(255,255,255,.09)}
html body[data-rdtheme="night"] #rdProg > i{background:#818cf8}
html body[data-rdtheme="night"] #rdProg > b{color:rgba(220,218,210,.5)}

/* ── 하단 시트 — 읽기 설정 + 나머지 도구 ──────────────────────────────
   🔴 하단 앱바(5탭) 위로 띄운다 — 안 그러면 마지막 줄이 앱바에 먹힌다(R116). */
#rdScrim{position:fixed;inset:0;z-index:940;background:rgba(20,16,8,.34);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
body.rd-sheet-open #rdScrim{opacity:1;pointer-events:auto}
#rdSheet{position:fixed;left:0;right:0;bottom:0;z-index:950;
  background:#fdfbf4;color:#3f3a30;
  border-top-left-radius:18px;border-top-right-radius:18px;
  padding:10px 14px calc(env(safe-area-inset-bottom,0px) + var(--rd-dock-bottom) + 14px);
  box-shadow:0 -12px 32px rgba(60,45,15,.18);
  transform:translateY(100%);transition:transform .22s cubic-bezier(.32,.72,0,1);
  max-height:82vh;overflow-y:auto;overscroll-behavior:contain}
body.rd-sheet-open #rdSheet{transform:none}
#rdSheet .rd-grab{width:38px;height:4px;border-radius:2px;background:#e0d8c2;margin:2px auto 12px}
#rdSheet h4{margin:15px 0 7px;font-size:11px;font-weight:800;letter-spacing:.04em;
  color:rgba(90,84,70,.66)}
#rdSheet h4:first-of-type{margin-top:4px}
.rd-seg{display:flex;gap:6px}
.rd-seg > button{flex:1;border:1px solid rgba(120,110,90,.24);background:transparent;color:#3f3a30;
  font-family:inherit;font-size:12.5px;font-weight:700;padding:10px 6px;border-radius:10px;cursor:pointer;
  letter-spacing:-.02em}
.rd-seg > button.on{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.45);color:#4338ca}
.rd-seg > button[data-rd-theme="paper"]{background:#fbf6e9;color:#2c2a24}
.rd-seg > button[data-rd-theme="sepia"]{background:#f0e4cc;color:#463a26}
.rd-seg > button[data-rd-theme="night"]{background:#15161a;color:#c6c3ba}
.rd-seg > button[data-rd-theme].on{outline:2px solid #6366f1;outline-offset:1px}
/* 줄 간격·여백 — 3단 대신 위아래 스테퍼(2026-08-27 사용자 지시 「본인이 원하는 걸로」).
   고른 값은 그대로 settings.rdLine|rdSide 에 실려 다음 학습 때도 자동 복원된다(_rdSet 그대로). */
.rd-stepper{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid rgba(120,110,90,.24);border-radius:10px;padding:4px}
.rd-step-btn{flex:0 0 auto;width:38px;height:38px;border:none;background:transparent;
  color:#4338ca;font-family:inherit;font-size:19px;font-weight:800;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1}
.rd-step-btn:active{background:rgba(99,102,241,.14)}
.rd-step-val{flex:1;text-align:center;font-size:13.5px;font-weight:800;color:#3f3a30;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html body[data-rdtheme="night"] .rd-stepper{border-color:rgba(255,255,255,.16)}
html body[data-rdtheme="night"] .rd-step-btn{color:#a5b4fc}
html body[data-rdtheme="night"] .rd-step-btn:active{background:rgba(129,140,248,.2)}
html body[data-rdtheme="night"] .rd-step-val{color:#cfccc3}
/* 시트 안의 나머지 도구 — 머리에서 옮겨 온 것이라 **여기서도 단색으로** 통일한다 */
#rdItems{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#rdItems .sa-divider{display:none}
#rdItems .study-btn{
  border:1px solid rgba(120,110,90,.24) !important;background:transparent !important;
  color:#3f3a30 !important;font-size:12.5px !important;font-weight:700 !important;
  padding:9px 12px !important;border-radius:10px !important;box-shadow:none !important;
  font-family:inherit !important;min-width:0 !important;height:auto !important}
#rdItems .study-btn.on{background:rgba(99,102,241,.12) !important;border-color:rgba(99,102,241,.45) !important;color:#4338ca !important}
#rdItems .study-btn.danger{color:#b91c1c !important;border-color:rgba(185,28,28,.3) !important}
html body[data-rdtheme="night"] #rdSheet{background:#1c1e24;color:#cfccc3;box-shadow:0 -12px 32px rgba(0,0,0,.5)}
html body[data-rdtheme="night"] #rdSheet .rd-grab{background:#3a3d46}
html body[data-rdtheme="night"] #rdSheet h4{color:rgba(210,206,196,.6)}
html body[data-rdtheme="night"] .rd-seg > button{border-color:rgba(255,255,255,.16);color:#cfccc3}
html body[data-rdtheme="night"] .rd-seg > button.on{background:rgba(129,140,248,.2);border-color:rgba(129,140,248,.6);color:#c7d2fe}
html body[data-rdtheme="night"] #rdItems .study-btn{border-color:rgba(255,255,255,.16) !important;color:#cfccc3 !important}
html body[data-rdtheme="night"] #rdItems .study-btn.on{background:rgba(129,140,248,.2) !important;border-color:rgba(129,140,248,.6) !important;color:#c7d2fe !important}

/* ── 처음 한 번만 뜨는 힌트 — 「탭하면 도구」를 모르면 갇힌 것처럼 느낀다 ──── */
#rdHint{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + var(--rd-dock-bottom) + 92px);
  z-index:902;background:rgba(28,26,22,.9);color:#f6f2e6;font-size:12px;font-weight:700;
  padding:9px 15px;border-radius:999px;letter-spacing:-.02em;pointer-events:none;
  opacity:0;transition:opacity .3s ease}
body.rd-hint-on #rdHint{opacity:1}

/* 🔴 리디식에서는 옛 「↩ 이 줄부터 학습」 말풍선을 안 띄운다 — 손가락 화면엔 hover 가 없고,
   지면 위에 뜨는 파란 알약이 리디식 지면에서 유일하게 튀는 것이었다. */
body.rd-mode .law-line:not(.header):not(.current):hover::after{content:none}
body.rd-mode .law-line:not(.header):not(.current):hover{background:transparent;border-left-color:transparent}

/* ── 하단 앱바도 읽는 동안엔 물러난다 ──────────────────────────────────
   🔴 이것까지 해야 「크롬 0」이다 — 74px 은 880px 화면의 **8.4%** 다.
   🔴 **없애는 것이 아니라 물러나는 것**이다. 여백을 탭하면 도구와 함께 돌아온다.
      나가는 길(학습 종료)은 시트 안에 있다 — 갇히지 않는다. */
body[data-mode="eyeread"].studying.rd-mode .appbar{transition:transform .18s ease}
body[data-mode="eyeread"].studying.rd-mode:not(.rd-ui) .appbar{transform:translateY(115%)}

/* 🔴 머리의 꼬리표도 지면을 따른다 — 리디식 지면에서 주황·초록 알약 하나가 유일하게 튄다.
   글자는 남기고 **테두리만** 준다(뜻은 안 잃고 튀지도 않는다). */
body.rd-mode .study-head .info .tag{
  background:transparent !important;box-shadow:none !important;
  border:1px solid currentColor !important;opacity:.72}
html body.rd-mode[data-rdtheme="night"] .study-head .info .tag{opacity:.62}

/* 🔴 고른 지면이 사이트 테마와 다를 수 있다(밝은 사이트에서 「밤」을 고른 사람).
   그때 앱바만 하얗게 남으면 **읽던 지면과 어긋난 띠**가 아래에 생긴다 — 같이 맞춘다. */
html body.rd-mode[data-rdtheme="night"] .appbar{background:#1b1d22 !important;border-top-color:rgba(255,255,255,.1) !important}
html body.rd-mode[data-rdtheme="night"] .appbar a{color:#8f8c85 !important}
html body.rd-mode[data-rdtheme="night"] .appbar a.on{color:#a5b4fc !important}
html body.rd-mode[data-rdtheme="sepia"] .appbar{background:#ebdfc4 !important;border-top-color:rgba(138,109,59,.22) !important}

/* 🔴 확대(핀치 줌) 때 드러나는 둘레도 **고른 지면 색**으로 칠한다(R149).
   `.study.show{box-shadow:0 0 0 100vmax #fbf6e9}` 은 종이 색이 박혀 있어서
   세피아·밤을 고른 사람이 확대하면 **둘레만 크림색으로 번쩍인다**. */
html body.rd-mode[data-rdtheme="paper"] .study.show{box-shadow:0 0 0 100vmax #fbf6e9 !important}
html body.rd-mode[data-rdtheme="sepia"] .study.show{box-shadow:0 0 0 100vmax #f0e4cc !important}
html body.rd-mode[data-rdtheme="night"] .study.show{box-shadow:0 0 0 100vmax #15161a !important}

/* ── 눈회독 밑줄 페이스메이커 (2026-08-26 · 「따라읽기랑 듣기랑 기능이 똑같은데」) ────
   🔴 `.ch` span 없이 **Range 로 얻은 어절 자리**에 막대를 깐다 — DOM 을 안 건드리므로
      함정 루비(`ruby.tw`)·낱말 도식 마크업과 안 싸운다.
   🔴 `pointer-events:none` — 줄을 눌러 그 줄로 가는 몸짓(제보 ②)을 막으면 안 된다. */
.eye-pacer{position:absolute;inset:0;pointer-events:none;z-index:1}
.eye-pacer > i{position:absolute;height:3px;border-radius:2px;
  background:rgba(202,138,4,.75);
  transform:scaleX(0);transform-origin:left center;opacity:0}
.law-line.current.pacer-on .eye-pacer > i{
  transform:scaleX(1);opacity:1;
  transition:transform var(--pd,.42s) linear, opacity .12s ease-out;
  transition-delay:var(--pdly,0s)}
html body[data-rdtheme="sepia"] .eye-pacer > i{background:rgba(146,94,17,.8)}
html body[data-rdtheme="night"] .eye-pacer > i{background:rgba(250,204,21,.72)}

/* ── 모드 카드의 「왜?」 접기 (2026-08-26 사용자 지시 「불필요한 설명글은 다 축소」) ──
   🔴 **지우지 않고 접는다** — 근거(「생성 효과 +25%」 같은 것)는 이 사이트가 왜 이렇게
      만들어졌는지를 말하는 글이고, 검색에도 걸린다. 화면에서만 뺀다.
   🔬 실측 — 원문회독 모드 고르기 화면이 3,022자 · 3,741px 였고 18자 넘는 설명이 64% 였다. */
.mode-card .why{display:none}
.mode-card.why-open .why{display:block}
.why-toggle{display:inline-flex;align-items:center;gap:3px;margin-top:2px;
  border:none;background:transparent;color:var(--ink3,#94a3b8);
  font:inherit;font-size:11.5px;font-weight:700;padding:2px 0;cursor:pointer;letter-spacing:-.01em}
.why-toggle:hover{color:var(--c1,#6366f1)}
.mode-card.why-open .why-toggle{color:var(--c1,#6366f1)}

/* ── 「왜 회독인가」 근거 블록 접기 (2026-08-26 사용자 지시 「불필요한 설명글은 다 축소」) ──
   🔴 **지우지 않고 접는다** — 검색에 걸리는 글이고, 궁금한 사람은 펴서 읽는다.
   🔬 실측 — 원문회독 화면에서 이 블록이 747자를 먹고 있었다. */
.science.folded .science-grid{display:none}
.science.folded .science-head p{display:none}
.science-toggle{display:block;margin:10px auto 0;border:1px solid var(--line,#e2e8f0);
  background:transparent;color:var(--ink2,#64748b);border-radius:999px;
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 16px;cursor:pointer;letter-spacing:-.01em}
.science-toggle:hover{color:var(--c1,#6366f1);border-color:var(--c1,#6366f1)}

/* 🕘 지금 읽는 문장의 둥근 테두리(.ex-sent-now)는 2026-09-02 사용자 지시 「동그라미 없애자」로 뺐다 — 클래스는 자(검사기)가 쓰므로 남기고 그림만 없다 */
.ex-sent.ex-sent-now{outline:none}

/* ═══ 강의 끝 미니문제 (2026-09-04) — 스크립트 맨 뒤 · 지면 토큰만 쓴다(밤 지면도 따라온다) ═══ */
.lec-drill{margin-top:26px;padding-top:14px;border-top:2px dashed var(--line)}
.lec-drill-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lec-drill-title{font-weight:900;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.lec-drill-count{font-size:12.5px;color:var(--muted,#64748b)}
.lec-drill-score{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--accent)}
.lec-drill-empty .lec-drill-count{color:var(--muted,#64748b)}
.lec-q{border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin:0 0 10px;background:var(--card)}
.lec-q-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lec-q-num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--muted,#64748b)}
.lec-q-src{font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--ink)}
.lec-q-src-a{background:var(--accent);color:#fff;border-color:var(--accent)}
.lec-q-src-b{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.lec-q-src-c{opacity:.75}
.lec-q-prompt{font-size:14.5px;line-height:1.65;color:var(--ink);word-break:keep-all}
.lec-q-ox,.lec-q-cloze,.lec-q-self{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.lec-q-btn{font:inherit;font-size:14px;font-weight:800;padding:9px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;min-width:96px}
.lec-q-btn:disabled{opacity:.55;cursor:default}
.lec-q-in{font:inherit;font-size:14px;padding:9px 11px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);flex:1 1 160px;min-width:0}
.lec-q-result{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:13.5px;line-height:1.65}
.lec-q-verdict{font-weight:800}
.lec-q-ok .lec-q-verdict{color:#15803d}
.lec-q-no .lec-q-verdict{color:#b91c1c}
html[data-theme="dark"] .lec-q-ok .lec-q-verdict{color:#4ade80}
html[data-theme="dark"] .lec-q-no .lec-q-verdict{color:#f87171}
.lec-q-exp{margin-top:6px;color:var(--ink);opacity:.9;word-break:keep-all}
.lec-q .imgc-cover.imgc-open{background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:2px}

/* ═══ 탭마다 다른 이어보기 (2026-09-04) — 강의 탭엔 강의 카드(출제핵심 줄 + 개념 줄), 원문회독 탭엔 회독 카드 ═══ */
body[data-section="reading"] #lecResume{display:none !important}
body[data-section="lecture"] #readResume{display:none !important}
.today-pick .lec-resume-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;flex:0 0 100%}
.today-pick .lec-resume-row + .lec-resume-row{border-top:1px dashed rgba(0,0,0,.12);padding-top:8px}
.today-pick.read-resume{background:linear-gradient(135deg,#eff6ff,#dbeafe)}
.today-pick.read-resume .tp-l{color:#1d4ed8}
.today-pick.read-resume .tp-t{color:#1e3a8a}
.today-pick.read-resume .tp-b{background:#2563eb}
.today-pick.read-resume .tp-b:hover{background:#1d4ed8}
/* 「오늘은 여기부터 · 눈으로 읽기」는 눈회독 입구다 — 원문회독 탭에만(2026-09-04 사용자 「눈회독은 원문회독에 있잖아」) */
body[data-section="lecture"] #todayPick{display:none !important}