* { box-sizing: border-box; margin: 0; padding: 0; }
  /* ── 비밀번호 화면 ── */
  #pw-overlay { position: fixed; inset: 0; background: linear-gradient(135deg,#27ae60,#1e8449); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
  #pw-overlay.hidden { display: none; }
  .pw-box { background: #fff; border-radius: 24px; padding: 40px 28px 32px; width: 100%; max-width: 340px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
  .pw-logo { width: 112px; height: 112px; background: #fff; border-radius: 24px; margin: 0 auto 16px; display: block; border: 1px solid #eee; }
  .pw-title { font-size: 1.15rem; font-weight: 700; color: #222; margin-bottom: 6px; }
  .pw-tagline { font-size: 0.95rem; font-weight: 400; color: #555; margin-bottom: 10px; }
  .pw-sub { font-size: 0.82rem; color: #888; margin-bottom: 24px; }
  .pw-input-wrap { position: relative; margin-bottom: 10px; }
  .pw-input-wrap input { width: 100%; padding: 13px 44px 13px 16px; border: 1.5px solid #ddd; border-radius: 12px; font-size: 1rem; outline: none; transition: border 0.2s; background: #fafafa; }
  .pw-input-wrap input:focus { border-color: #27ae60; background: #fff; }
  .pw-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.1rem; color: #aaa; padding: 4px; }
  .pw-eye:hover { color: #555; }
  .pw-error { font-size: 0.8rem; color: #e74c3c; min-height: 18px; margin-bottom: 10px; }
  .pw-btn { width: 100%; padding: 14px; border: none; border-radius: 12px; background: #27ae60; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
  .pw-btn:hover { background: #219a52; }
  .pw-btn:active { background: #1a7a42; }
  body { font-family: 'Segoe UI', 'Noto Sans JP', sans-serif; background: #f4f6f8; color: #333; min-height: 100vh; }
  .header { background: #27ae60; color: #fff; padding: 14px 16px; text-align: center; }
  .header h1 { font-size: 1.1rem; font-weight: 700; }
  .tab-bar { display: flex; background: #fff; border-bottom: 2px solid #27ae60; position: sticky; top: 0; z-index: 100; }
  .tab-btn { flex: 1; padding: 12px 4px; border: none; background: none; font-size: 0.9rem; font-weight: 600; color: #666; cursor: pointer; transition: all 0.2s; }
  .tab-btn.active { color: #27ae60; border-bottom: 3px solid #27ae60; margin-bottom: -2px; }
  .container { max-width: 600px; margin: 0 auto; padding: 12px; }
  .filter-section { margin-bottom: 10px; }
  .filter-label { font-size: 0.75rem; color: #888; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
  .filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { padding: 5px 12px; border-radius: 20px; border: 1.5px solid #ddd; background: #fff; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
  .chip.active { background: #27ae60; border-color: #27ae60; color: #fff; font-weight: 600; }
  .chip:hover:not(.active) { border-color: #27ae60; color: #27ae60; }
  .search-box { position: relative; margin-bottom: 10px; }
  .search-box input { width: 100%; padding: 10px 36px 10px 14px; border: 1.5px solid #ddd; border-radius: 10px; font-size: 0.9rem; outline: none; transition: border 0.2s; background: #fff; }
  .search-box input:focus { border-color: #27ae60; }
  .search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #aaa; }
  .word-count { font-size: 0.78rem; color: #888; margin-bottom: 8px; }
  .word-list { display: flex; flex-direction: column; gap: 6px; }
  .word-card { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 12px; }
  .word-card .cat-badge { font-size: 0.65rem; padding: 2px 7px; border-radius: 10px; font-weight: 700; flex-shrink: 0; }
  .cat-명사    { background: #e8f5e9; color: #2e7d32; }
  .cat-동사    { background: #e3f2fd; color: #1565c0; }
  .cat-복합동사 { background: #e8eaf6; color: #283593; }
  .cat-い형용사 { background: #fff3e0; color: #e65100; }
  .cat-な형용사 { background: #fce4ec; color: #880e4f; }
  .cat-부사    { background: #f3e5f5; color: #6a1b9a; }
  .cat-가타카나  { background: #e0f7fa; color: #006064; }
  .word-card .kanji  { font-size: 1.1rem; font-weight: 700; min-width: 0; }
  .word-card .hira   { font-size: 0.82rem; color: #555; }
  .word-card .meaning{ font-size: 0.85rem; color: #444; margin-left: auto; text-align: right; flex-shrink: 0; max-width: 45%; }
  /* Flashcard */
  .mode-section { margin-bottom: 14px; }
  .mode-label { font-size: 0.75rem; color: #888; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
  .mode-btns { display: flex; gap: 6px; }
  .mode-btn { flex: 1; padding: 8px 4px; border: 1.5px solid #ddd; border-radius: 10px; background: #fff; font-size: 0.75rem; cursor: pointer; text-align: center; transition: all 0.15s; line-height: 1.4; font-weight: 600; color: #666; }
  .mode-btn.active { background: #27ae60; border-color: #27ae60; color: #fff; }
  .mode-btn:hover:not(.active) { border-color: #27ae60; color: #27ae60; }
  .fc-progress { text-align: center; font-size: 0.8rem; color: #888; margin-bottom: 10px; }
  .fc-progress span { font-weight: 700; color: #27ae60; }
  .progress-bar { height: 4px; background: #e0e0e0; border-radius: 2px; margin-bottom: 14px; }
  .progress-fill { height: 100%; background: #27ae60; border-radius: 2px; transition: width 0.3s; }
  .card-area { background: #fff; border-radius: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 28px 22px 22px; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: 14px; position: relative; }
  .card-chapter { position: absolute; top: 12px; left: 14px; font-size: 0.68rem; color: #bbb; font-weight: 600; }
  .card-cat { position: absolute; top: 12px; right: 14px; font-size: 0.68rem; padding: 2px 8px; border-radius: 8px; font-weight: 700; }
  .card-main { font-size: 2rem; font-weight: 800; color: #222; margin-bottom: 6px; word-break: break-all; }
  .card-sub1 { font-size: 1.2rem; color: #27ae60; font-weight: 600; margin-bottom: 4px; transition: opacity 0.25s; }
  .card-sub2 { font-size: 1rem; color: #555; transition: opacity 0.25s; }
  /* Story box */
  .story-wrap { width: 100%; margin-top: 12px; }
  .story-toggle-btn { width: 100%; padding: 7px 14px; border: 1.5px dashed #aed581; border-radius: 10px; background: #f9fbe7; color: #558b2f; font-size: 0.78rem; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.15s; }
  .story-toggle-btn:hover { background: #f1f8e9; }
  .story-toggle-btn.open { border-style: solid; border-color: #7cb342; }
  .card-story { margin-top: 6px; padding: 10px 14px; background: #f9fbe7; border-left: 3px solid #aed581; border-radius: 8px; font-size: 0.78rem; color: #558b2f; line-height: 1.6; text-align: left; width: 100%; display: none; }
  .card-story.open { display: block; }
  .ex-wrap { width: 100%; margin-top: 8px; }
  .ex-btn-row { display: flex; gap: 6px; align-items: stretch; }
  .ex-toggle-btn { flex: 1; padding: 7px 14px; border: 1.5px dashed #81d4fa; border-radius: 10px; background: #e1f5fe; color: #0277bd; font-size: 0.78rem; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.15s; }
  .ex-toggle-btn:hover { background: #b3e5fc; }
  .ex-toggle-btn.open { border-style: solid; border-color: #0288d1; }
  .ex-speak-btn { padding: 7px 12px; border: 1.5px solid #0288d1; border-radius: 10px; background: #fff; color: #0288d1; font-size: 0.9rem; cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
  .ex-speak-btn:hover { background: #e1f5fe; }
  .ex-speak-btn.speaking { background: #0288d1; color: #fff; animation: tts-pulse 0.8s infinite; }
  .card-ex { margin-top: 6px; padding: 10px 14px; background: #e1f5fe; border-left: 3px solid #81d4fa; border-radius: 8px; font-size: 0.78rem; color: #01579b; line-height: 1.6; text-align: left; width: 100%; display: none; }
  .card-ex.open { display: block; }
  .hidden { visibility: hidden; opacity: 0; }
  .visible { visibility: visible; opacity: 1; }
  /* 카드 서브텍스트(히라가나/뜻)는 숨길 때 공간도 차지하지 않도록 display:none 사용 */
  .card-sub1.hidden, .card-sub2.hidden { display: none; }
  .card-sub1.visible, .card-sub2.visible { display: block; }
  .btn-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
  .reveal-btn { padding: 10px 18px; border: 2px solid #27ae60; border-radius: 12px; background: #fff; color: #27ae60; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
  .reveal-btn.on  { background: #27ae60; color: #fff; }
  .nav-btn-row { display: flex; gap: 8px; }
  .prev-btn { flex: 1; padding: 14px; border-radius: 14px; border: 2px solid #27ae60; background: #fff; color: #27ae60; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
  .prev-btn:hover { background: #e8f5e9; }
  .prev-btn:disabled { border-color: #ccc; color: #ccc; cursor: default; background: #fff; }
  .next-btn { flex: 2; padding: 14px; border-radius: 14px; border: none; background: #27ae60; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
  .next-btn:hover { background: #219a52; }
  .next-btn:disabled { background: #ccc; cursor: default; }
  .fc-empty { text-align: center; color: #aaa; padding: 48px 16px; font-size: 0.95rem; }
  /* TTS */
  .tts-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 10px 12px; background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
  .tts-label { font-size: 0.75rem; color: #888; font-weight: 600; white-space: nowrap; }
  .auto-btn { padding: 5px 13px; border-radius: 20px; border: 1.5px solid #ddd; background: #fff; font-size: 0.78rem; cursor: pointer; font-weight: 600; transition: all 0.15s; white-space: nowrap; }
  .auto-btn.on { background: #27ae60; border-color: #27ae60; color: #fff; }
  .speed-btns { display: flex; gap: 4px; margin-left: auto; }
  .speed-btn { padding: 5px 10px; border-radius: 16px; border: 1.5px solid #ddd; background: #fff; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; }
  .speed-btn.active { background: #27ae60; border-color: #27ae60; color: #fff; font-weight: 700; }
  .card-speak-btn { display: block; margin: 8px auto 0; padding: 6px 18px; border: 1.5px solid #27ae60; border-radius: 20px; background: #fff; color: #27ae60; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
  .card-speak-btn:hover { background: #e8f5e9; }
  .card-speak-btn.speaking { background: #27ae60; color: #fff; }
  .list-speak-btn { background: none; border: none; cursor: pointer; font-size: 1.05rem; padding: 4px 6px; border-radius: 8px; flex-shrink: 0; transition: background 0.15s; color: #27ae60; }
  .list-speak-btn:hover { background: #e8f5e9; }
  @keyframes tts-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
  .speaking { animation: tts-pulse 0.8s infinite; }
  @media (max-width: 400px) {
    .card-main { font-size: 1.6rem; }
    .reveal-btn { padding: 9px 12px; font-size: 0.78rem; }
  }
  /* ── 알아요 / 몰라요 ── */
  .know-row { display: flex; gap: 8px; margin-top: 8px; }
  .know-btn, .unknow-btn { flex: 1; padding: 13px 8px; border-radius: 14px; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: all 0.18s; border: 2px solid; }
  .know-btn   { border-color: #27ae60; background: #fff; color: #27ae60; }
  .know-btn.on   { background: #27ae60; color: #fff; }
  .know-btn:hover:not(.on)   { background: #e8f5e9; }
  .unknow-btn { border-color: #e74c3c; background: #fff; color: #e74c3c; }
  .unknow-btn.on { background: #e74c3c; color: #fff; }
  .unknow-btn:hover:not(.on) { background: #fdecea; }
  /* ── 알아요 카운터 ── */
  .know-counter { text-align: center; font-size: 0.78rem; color: #999; margin-top: 10px; letter-spacing: 0.3px; }
  .know-counter .kc-k { color: #27ae60; font-weight: 700; }
  .know-counter .kc-u { color: #e74c3c; font-weight: 700; }
  /* ── 사이클 결과 오버레이 ── */
  .cycle-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .cycle-box { background: #fff; border-radius: 24px; padding: 32px 24px 28px; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.22); }
  .cycle-title { font-size: 1.4rem; font-weight: 800; color: #222; margin-bottom: 6px; }
  .cycle-sub { font-size: 0.85rem; color: #999; margin-bottom: 20px; }
  .cycle-stats { display: flex; gap: 10px; margin-bottom: 22px; }
  .cycle-stat { flex: 1; padding: 14px 6px; border-radius: 14px; }
  .cycle-stat.cs-know { background: #e8f5e9; }
  .cycle-stat.cs-unknow { background: #fdecea; }
  .cycle-stat.cs-unchk { background: #f5f5f5; }
  .cycle-stat-num { font-size: 1.7rem; font-weight: 800; line-height: 1; }
  .cycle-stat.cs-know .cycle-stat-num { color: #27ae60; }
  .cycle-stat.cs-unknow .cycle-stat-num { color: #e74c3c; }
  .cycle-stat.cs-unchk .cycle-stat-num { color: #999; }
  .cycle-stat-lbl { font-size: 0.7rem; color: #888; font-weight: 600; margin-top: 4px; }
  .cycle-all-ok { font-size: 1.05rem; color: #27ae60; font-weight: 800; padding: 10px 0 16px; }
  .cycle-btn-primary { width: 100%; padding: 14px; border: none; border-radius: 14px; background: #e74c3c; color: #fff; font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-bottom: 8px; transition: background 0.15s; }
  .cycle-btn-primary:hover { background: #c0392b; }
  .cycle-btn-secondary { width: 100%; padding: 12px; border: 2px solid #27ae60; border-radius: 14px; background: #fff; color: #27ae60; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
  .cycle-btn-secondary:hover { background: #e8f5e9; }
  /* ── 기출문제 ── */
  .quiz-level-row { display:flex; gap:8px; justify-content:center; margin-bottom:6px; flex-wrap:wrap; }
  .level-chip { padding:5px 14px; border-radius:20px; border:2px solid #ddd; background:#fff; font-size:0.88rem; font-weight:700; cursor:pointer; transition:all 0.15s; color:#666; letter-spacing:1px; }
  .level-chip.active { border-color:#27ae60; background:#27ae60; color:#fff; }
  .level-chip:disabled { opacity:0.4; cursor:default; }
  .quiz-start-box { background:#fff; border-radius:20px; box-shadow:0 4px 16px rgba(0,0,0,0.08); padding:36px 24px 32px; text-align:center; margin-top:10px; }
  .quiz-start-icon { font-size:3rem; margin-bottom:12px; }
  .quiz-start-title { font-size:1.4rem; font-weight:800; color:#222; margin-bottom:6px; }
  .quiz-start-sub { font-size:0.85rem; color:#888; margin-bottom:20px; line-height:1.5; }
  .quiz-meta-row { display:flex; gap:10px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
  .quiz-meta-chip { background:#e8f5e9; color:#27ae60; font-size:0.8rem; font-weight:700; padding:5px 14px; border-radius:20px; }
  .quiz-start-btn { width:100%; padding:15px; border:none; border-radius:14px; background:#27ae60; color:#fff; font-size:1rem; font-weight:800; cursor:pointer; transition:background 0.15s; }
  .quiz-start-btn:hover { background:#219a52; }
  .quiz-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; margin-top:10px; }
  .quiz-type-badge { font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:12px; background:#fff3e0; color:#e65100; }
  .quiz-type-badge.t-kanji   { background:#e3f2fd; color:#1565c0; }
  .quiz-type-badge.t-hyoki   { background:#fce4ec; color:#880e4f; }
  .quiz-type-badge.t-context { background:#e8f5e9; color:#2e7d32; }
  .quiz-type-badge.t-kawari  { background:#f3e5f5; color:#6a1b9a; }
  .quiz-type-badge.t-youhou  { background:#fff3e0; color:#e65100; }
  .quiz-progress-text { font-size:0.82rem; color:#888; font-weight:600; }
  .quiz-q-box { background:#fff; border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,0.08); padding:22px 18px 18px; margin-bottom:14px; }
  .quiz-instruction { font-size:0.78rem; color:#888; margin-bottom:10px; line-height:1.5; padding-bottom:8px; border-bottom:1px solid #f0f0f0; }
  .quiz-question { font-size:1.05rem; color:#222; font-weight:600; line-height:1.7; word-break:break-all; }
  .quiz-question u { text-decoration:underline; text-underline-offset:3px; }
  .quiz-options { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
  .quiz-opt-btn { width:100%; padding:13px 16px; border:1.5px solid #ddd; border-radius:12px; background:#fff; font-size:0.88rem; font-weight:600; color:#333; cursor:pointer; text-align:left; transition:all 0.15s; line-height:1.4; }
  .quiz-opt-btn:hover:not(:disabled) { border-color:#27ae60; background:#e8f5e9; color:#27ae60; }
  .quiz-opt-btn.correct { border-color:#27ae60; background:#27ae60; color:#fff; }
  .quiz-opt-btn.wrong   { border-color:#e74c3c; background:#e74c3c; color:#fff; }
  .quiz-opt-btn.show-correct { border-color:#27ae60; background:#e8f5e9; color:#27ae60; }
  .quiz-opt-btn:disabled { cursor:default; }
  .quiz-feedback { padding:12px 16px; border-radius:12px; font-size:0.83rem; line-height:1.6; margin-bottom:10px; }
  .quiz-feedback.fb-ok  { background:#e8f5e9; border-left:4px solid #27ae60; color:#1b5e20; }
  .quiz-feedback.fb-ng  { background:#fdecea; border-left:4px solid #e74c3c; color:#7f0000; }
  .quiz-next-btn { width:100%; padding:14px; border:none; border-radius:14px; background:#27ae60; color:#fff; font-size:0.95rem; font-weight:700; cursor:pointer; transition:background 0.15s; margin-bottom:10px; }
  .quiz-next-btn:hover { background:#219a52; }
  .quiz-result-box { background:#fff; border-radius:20px; box-shadow:0 4px 16px rgba(0,0,0,0.08); padding:32px 22px 28px; text-align:center; margin-top:10px; }
  .quiz-result-title { font-size:1.3rem; font-weight:800; color:#222; margin-bottom:18px; }
  .quiz-score-ring { width:110px; height:110px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; flex-direction:column; font-weight:800; border:7px solid #27ae60; }
  .quiz-score-num { font-size:2rem; color:#27ae60; line-height:1; }
  .quiz-score-denom { font-size:0.78rem; color:#888; margin-top:2px; }
  .quiz-score-msg { font-size:0.9rem; color:#555; margin-bottom:20px; }
  .quiz-wrong-section { text-align:left; margin-bottom:20px; }
  .quiz-wrong-title { font-size:0.8rem; font-weight:700; color:#e74c3c; margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid #fdecea; }
  .quiz-wrong-item { padding:12px 14px; background:#fafafa; border-radius:10px; margin-bottom:10px; font-size:0.8rem; color:#444; line-height:1.6; }
  .quiz-wrong-item .wi-q { color:#555; margin-bottom:5px; font-weight:600; }
  .quiz-wrong-item .wi-ans { color:#27ae60; font-weight:700; }
  .quiz-wrong-item .wi-mine { color:#e74c3c; font-weight:600; margin-top:2px; }
  .quiz-wrong-item .wi-q-kr, .quiz-wrong-item .wi-ans-kr, .quiz-wrong-item .wi-mine-kr, .quiz-wrong-item .wi-opt-kr { font-size:0.75rem; color:#1a73e8; font-style:italic; margin:1px 0 3px; }
  .quiz-wrong-item .wi-exp { color:#666; margin-top:6px; padding-top:6px; border-top:1px solid #eee; }
  .quiz-wrong-item .wi-optexp-wrap { margin-top:8px; padding:8px 10px; background:#f5f5f5; border-radius:8px; }
  .quiz-wrong-item .wi-optexp { margin-bottom:5px; font-size:0.78rem; color:#666; padding:6px 8px; border-radius:6px; }
  .quiz-wrong-item .wi-optexp b { color:#444; }
  .quiz-wrong-item .wi-optexp-correct { background:#e8f5e9; border-left:3px solid #27ae60; }
  .quiz-wrong-item .wi-optexp-correct b { color:#27ae60; }
  .quiz-wrong-item .wi-optexp-mine { background:#fff0f0; padding:6px 8px; border-radius:6px; }
  .quiz-wrong-item .wi-mychoice { color:#e74c3c; font-size:0.72rem; font-weight:700; }
  .quiz-opt-btn.jlpt-selected { border-color:#5e35b1; background:#ede7f6; color:#5e35b1; font-weight:700; }
  .quiz-restart-btn { width:100%; padding:14px; border:2px solid #27ae60; border-radius:14px; background:#fff; color:#27ae60; font-size:0.95rem; font-weight:700; cursor:pointer; transition:all 0.15s; margin-bottom:8px; }
  .quiz-restart-btn:hover { background:#e8f5e9; }
  .quiz-retry-wrong-btn { width:100%; padding:14px; border:none; border-radius:14px; background:#e74c3c; color:#fff; font-size:0.95rem; font-weight:700; cursor:pointer; transition:background 0.15s; margin-bottom:8px; }
  .quiz-retry-wrong-btn:hover { background:#c0392b; }
  .jlpt-goto-note-btn { width:100%; padding:14px; border:2px solid #5e35b1; border-radius:14px; background:#ede7f6; color:#5e35b1; font-size:0.95rem; font-weight:700; cursor:pointer; transition:all 0.15s; margin-bottom:8px; }
  .jlpt-goto-note-btn:hover { background:#5e35b1; color:#fff; }
  .quiz-nav-row { display:flex; gap:8px; }
  .quiz-prev-btn { padding:14px; border-radius:14px; border:2px solid #27ae60; background:#fff; color:#27ae60; font-size:0.9rem; font-weight:700; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
  .quiz-prev-btn:hover { background:#e8f5e9; }
  .quiz-nav-row .quiz-next-btn { flex:2; margin-bottom:0; }
  .opt-means-row { margin-top:9px; padding-top:8px; border-top:1px solid rgba(0,0,0,0.08); font-size:0.74rem; line-height:1.7; color:inherit; opacity:0.85; }
  .opt-mean-item { display:inline-block; margin-right:10px; white-space:nowrap; }
  .quiz-ch-filter { margin-bottom:12px; }
/* ── 레벨 선택 화면 ── */
#level-overlay { position:fixed; inset:0; background:linear-gradient(155deg,#0a1628 0%,#112a1e 50%,#1a1333 100%); z-index:9990; display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; }
.level-box { width:100%; max-width:420px; text-align:center; margin:auto; }
.level-header { margin-bottom:26px; }
.b-brand { margin-bottom:28px; }
.b-app-icon { width:110px; height:110px; border-radius:26px; margin:0 auto 14px; overflow:hidden; box-shadow:0 8px 36px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,255,255,0.08); }
.b-app-icon img { width:100%; height:100%; object-fit:cover; }
.b-app-name { font-size:1.6rem; font-weight:900; color:#fff; letter-spacing:2px; margin-bottom:4px; }
.b-app-tagline { font-size:0.88rem; color:rgba(255,255,255,0.55); font-weight:500; }
.b-divider { width:60px; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); margin:20px auto; }
.level-logo-wrap { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:12px; }
.level-logo-n2 { width:46px; height:46px; border-radius:13px; background:#27ae60; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:900; color:#fff; }
.level-logo-n1 { width:46px; height:46px; border-radius:13px; background:#0288d1; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:900; color:#fff; }
.level-logo-x { color:rgba(255,255,255,0.25); font-size:1.4rem; font-weight:200; }
.level-logo-bjt { height:46px; padding:0 14px; border-radius:13px; background:#e65100; display:flex; align-items:center; justify-content:center; font-size:1.0rem; font-weight:900; color:#fff; letter-spacing:1px; }
.level-title { font-size:1.35rem; font-weight:800; color:#fff; margin-bottom:6px; }
.jlpt-sub-logo-row { display:flex; align-items:center; width:100%; position:relative; margin-bottom:12px; }
.jlpt-sub-logo-row .level-logo-wrap { flex:1; display:flex; justify-content:center; margin-bottom:0; }
.jlpt-sub-back { position:absolute; left:0; top:50%; transform:translateY(-50%); background:none; border:none; color:#7c4dff; font-size:0.85rem; cursor:pointer; padding:0; white-space:nowrap; transition:color 0.2s; }
.jlpt-sub-back:hover { color:#fff; }
.level-sub { font-size:0.82rem; color:rgba(255,255,255,0.45); }
.level-cards { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.level-card { flex:1 1 calc(50% - 6px); min-width:calc(50% - 6px); max-width:calc(50% - 6px); background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.12); border-radius:20px; padding:22px 14px 18px; cursor:pointer; transition:all 0.2s; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:7px; box-sizing:border-box; }
.level-card:hover { background:rgba(255,255,255,0.15); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.35); }
.level-card:active { transform:translateY(0); }
.level-card[data-level="n2"]:hover { border-color:#27ae60; border-width:2px; background:rgba(39,174,96,0.15); }
.level-card[data-level="n1"]:hover { border-color:#0288d1; border-width:2px; background:rgba(2,136,209,0.15); }
.lc-badge { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; font-weight:900; color:#fff; margin-bottom:2px; }
.lc-badge.n2 { background:#27ae60; }
.lc-badge.n1 { background:#0288d1; }
.lc-name { font-size:0.95rem; font-weight:800; color:#fff; }
.lc-stats { font-size:0.78rem; color:rgba(255,255,255,0.8); font-weight:600; }
.lc-desc { font-size:0.7rem; color:rgba(255,255,255,0.4); line-height:1.4; }
.lc-go { width:100%; padding:9px; border-radius:10px; font-size:0.82rem; font-weight:700; color:#fff; margin-top:6px; }
.lc-go.n2-go { background:#27ae60; }
.lc-go.n1-go { background:#0288d1; }
.level-cancel-btn { background:none; border:none; color:rgba(255,255,255,0.35); font-size:0.78rem; cursor:pointer; padding:6px 14px; border-radius:8px; transition:color 0.15s; }
.level-cancel-btn:hover { color:rgba(255,255,255,0.7); }
/* ── 헤더 레벨 전환 버튼 ── */
.header { position:relative; }
.header-level-btn { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3); border-radius:8px; color:#fff; font-size:0.7rem; font-weight:700; padding:4px 10px; cursor:pointer; transition:background 0.15s; white-space:nowrap; }
.header-level-btn:hover { background:rgba(255,255,255,0.35); }
/* ── N1 하늘색 테마 ── */
body.theme-n1 .header { background:#0288d1; }
body.theme-n1 .tab-bar { border-bottom-color:#0288d1; }
body.theme-n1 .tab-btn.active { color:#0288d1; border-bottom-color:#0288d1; }
body.theme-n1 .chip.active { background:#0288d1; border-color:#0288d1; }
body.theme-n1 .chip:hover:not(.active) { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .search-box input:focus { border-color:#0288d1; }
body.theme-n1 .card-sub1 { color:#0288d1; }
body.theme-n1 .fc-progress span { color:#0288d1; }
body.theme-n1 .progress-fill { background:#0288d1; }
body.theme-n1 .mode-btn.active { background:#0288d1; border-color:#0288d1; }
body.theme-n1 .mode-btn:hover:not(.active) { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .reveal-btn { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .reveal-btn.on { background:#0288d1; color:#fff; }
body.theme-n1 .prev-btn { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .prev-btn:hover { background:#e1f5fe; }
body.theme-n1 .next-btn { background:#0288d1; }
body.theme-n1 .next-btn:hover { background:#0277bd; }
body.theme-n1 .next-btn:disabled { background:#ccc; }
body.theme-n1 .auto-btn.on { background:#0288d1; border-color:#0288d1; }
body.theme-n1 .speed-btn.active { background:#0288d1; border-color:#0288d1; }
body.theme-n1 .card-speak-btn { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .card-speak-btn:hover { background:#e1f5fe; }
body.theme-n1 .card-speak-btn.speaking { background:#0288d1; }
body.theme-n1 .list-speak-btn { color:#0288d1; }
body.theme-n1 .list-speak-btn:hover { background:#e1f5fe; }
body.theme-n1 .know-btn { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .know-btn.on { background:#0288d1; }
body.theme-n1 .know-btn:hover:not(.on) { background:#e1f5fe; }
body.theme-n1 .cycle-stat.cs-know { background:#e1f5fe; }
body.theme-n1 .cycle-stat.cs-know .cycle-stat-num { color:#0288d1; }
body.theme-n1 .cycle-all-ok { color:#0288d1; }
body.theme-n1 .cycle-btn-secondary { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .cycle-btn-secondary:hover { background:#e1f5fe; }
body.theme-n1 .level-chip.active { border-color:#0288d1; background:#0288d1; }
body.theme-n1 .quiz-meta-chip { background:#e1f5fe; color:#0288d1; }
body.theme-n1 .quiz-start-btn { background:#0288d1; }
body.theme-n1 .quiz-start-btn:hover { background:#0277bd; }
body.theme-n1 .quiz-opt-btn:hover:not(:disabled) { border-color:#0288d1; background:#e1f5fe; color:#0288d1; }
body.theme-n1 .quiz-opt-btn.correct { border-color:#0288d1; background:#0288d1; }
body.theme-n1 .quiz-opt-btn.show-correct { border-color:#0288d1; background:#e1f5fe; color:#0288d1; }
body.theme-n1 .quiz-feedback.fb-ok { background:#e1f5fe; border-left-color:#0288d1; color:#01579b; }
body.theme-n1 .quiz-next-btn { background:#0288d1; }
body.theme-n1 .quiz-next-btn:hover { background:#0277bd; }
body.theme-n1 .quiz-score-ring { border-color:#0288d1; }
body.theme-n1 .quiz-score-num { color:#0288d1; }
body.theme-n1 .quiz-wrong-item .wi-ans { color:#0288d1; }
body.theme-n1 .quiz-restart-btn { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .quiz-restart-btn:hover { background:#e1f5fe; }
body.theme-n1 .quiz-prev-btn { border-color:#0288d1; color:#0288d1; }
body.theme-n1 .quiz-prev-btn:hover { background:#e1f5fe; }
/* ── JLPT 실전모의고사 ── */
.level-logo-jlpt { height:46px; padding:0 14px; border-radius:13px; background:#5e35b1; display:flex; align-items:center; justify-content:center; font-size:1.0rem; font-weight:900; color:#fff; letter-spacing:1px; }
.lc-badge.jlpt { width:auto; padding:0 12px; font-size:1.0rem; background:#5e35b1; }
.lc-go.jlpt-go { background:#5e35b1; }
.level-card[data-level="jlpt"]:hover { border-color:#5e35b1; border-width:2px; background:rgba(94,53,177,0.18); }
.lc-badge.bjt { width:auto; padding:0 12px; font-size:1.0rem; background:#e65100; }
.lc-go.bjt-go { background:#e65100; }
.level-card[data-level="bjt"]:hover { border-color:#e65100; border-width:2px; background:rgba(230,81,0,0.15); }
.level-card.lc-disabled { opacity:0.45; cursor:default; pointer-events:none; }
#jlpt-sub-overlay { position:fixed; inset:0; background:linear-gradient(145deg,#1a1333 0%,#0d2137 100%); z-index:9990; display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
#jlpt-sub-overlay .level-cards { justify-content:center; }
#jlpt-sub-overlay .level-card[data-level="jlpt-n2-choukai"] { flex:1 1 100%; max-width:100%; }
.jlpt-home-tabs { display:flex; gap:8px; margin-bottom:14px; }
.jlpt-home-tab { flex:1; padding:11px 8px; border:1.5px solid #ddd; border-radius:12px; background:#fff; font-size:0.88rem; font-weight:700; color:#888; cursor:pointer; transition:all 0.15s; }
.jlpt-home-tab.active { border-color:#5e35b1; color:#5e35b1; background:#ede7f6; }
.jlpt-note-badge { display:inline-block; min-width:20px; padding:1px 6px; border-radius:10px; background:#e74c3c; color:#fff; font-size:0.72rem; font-weight:800; }
.jlpt-exam-card { background:#fff; border-radius:16px; padding:16px; margin-bottom:12px; box-shadow:0 2px 10px rgba(0,0,0,0.07); }
.jec-title { font-size:1.02rem; font-weight:800; color:#333; }
.jec-sub { font-size:0.76rem; color:#999; margin:4px 0 12px; }
.jec-btn-row { display:flex; flex-wrap:wrap; gap:7px; }
.jec-btn { padding:9px 12px; border:1.5px solid #d1c4e9; border-radius:10px; background:#fff; color:#5e35b1; font-size:0.8rem; font-weight:700; cursor:pointer; transition:all 0.15s; }
.jec-btn:hover { background:#ede7f6; }
.jec-btn.jec-primary { background:#5e35b1; border-color:#5e35b1; color:#fff; flex-basis:100%; padding:11px; font-size:0.88rem; }
.jec-btn.jec-primary:hover { background:#4527a0; }
.jlpt-empty { text-align:center; color:#999; font-size:0.85rem; line-height:1.8; padding:36px 12px; background:#fff; border-radius:16px; }
.jlpt-sec-label { font-size:0.72rem; font-weight:700; color:#888; }
.jq-no { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 5px; border-radius:7px; background:#5e35b1; color:#fff; font-size:0.74rem; font-weight:800; vertical-align:2px; }
.jlpt-passage { background:#fff; border:1.5px solid #d1c4e9; border-radius:14px; padding:14px 16px; margin-bottom:10px; font-size:0.92rem; line-height:1.85; color:#333; max-height:46vh; overflow-y:auto; }
.jlpt-passage .jp-title { font-weight:800; margin-bottom:6px; }
.jlpt-passage .jp-ab { font-weight:800; color:#5e35b1; margin:8px 0 2px; }
.jlpt-passage table { width:100%; border-collapse:collapse; font-size:0.8rem; margin:8px 0; }
.jlpt-passage th, .jlpt-passage td { border:1px solid #d1c4e9; padding:6px 7px; text-align:left; line-height:1.5; }
.jlpt-passage th { background:#ede7f6; font-weight:800; }
.jlpt-passage .jp-note { font-size:0.78rem; color:#666; }
.quiz-type-badge.t-gokei  { background:#e0f2f1; color:#00695c; }
.quiz-type-badge.t-bunpo  { background:#e8eaf6; color:#283593; }
.quiz-type-badge.t-narabe { background:#fffde7; color:#9e7c00; }
.quiz-type-badge.t-bunsho { background:#efebe9; color:#4e342e; }
.quiz-type-badge.t-dokkai { background:#ede7f6; color:#5e35b1; }
.jfb-opts-wrap { margin-top:10px; padding-top:9px; border-top:1px solid rgba(0,0,0,0.1); font-size:0.78rem; }
.jfb-opt { margin-top:7px; padding:7px 9px; background:rgba(255,255,255,0.55); border-radius:8px; line-height:1.6; }
.jfb-opt.jfb-mine { outline:1.5px solid #e74c3c; }
.jfb-mychoice { font-size:0.7rem; font-weight:800; color:#e74c3c; }
.jlpt-quit-btn { display:block; margin:14px auto 0; background:none; border:none; color:#999; font-size:0.78rem; cursor:pointer; padding:8px 14px; }
.jlpt-quit-btn:hover { color:#5e35b1; }
.jlpt-quit-top-btn { display:block; background:none; border:none; color:#7c4dff; font-size:0.82rem; font-weight:600; cursor:pointer; padding:8px 0 4px; transition:color 0.2s; }
.jlpt-quit-top-btn:hover { color:#5e35b1; }
.jlpt-sec-stats { background:#f6f4fb; border-radius:12px; padding:10px 14px; margin:12px 0; }
.jss-row { display:flex; justify-content:space-between; padding:4px 0; font-size:0.84rem; }
.jss-name { color:#555; font-weight:600; }
.jss-score { color:#5e35b1; font-weight:800; }
.jlpt-note-hint { font-size:0.7rem; font-weight:600; color:#999; }
.jni-top-btns { display:flex; gap:8px; margin-bottom:12px; }
.jlpt-review-btn { flex:1; padding:13px; border:none; border-radius:12px; background:#5e35b1; color:#fff; font-size:0.85rem; font-weight:800; cursor:pointer; }
.jlpt-review-btn:hover { background:#4527a0; }
.jlpt-clear-note-btn { padding:13px 16px; border:none; border-radius:12px; background:#e74c3c; color:#fff; font-size:0.82rem; font-weight:800; cursor:pointer; white-space:nowrap; }
.jlpt-clear-note-btn:hover { background:#c0392b; }
.jlpt-note-item { background:#fff; border-radius:14px; padding:13px 14px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.jni-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.jni-meta { font-size:0.7rem; color:#aaa; font-weight:600; }
.jni-q { font-size:0.86rem; color:#333; line-height:1.55; margin-bottom:3px; }
.jni-q-kr { font-size:0.78rem; color:#1a73e8; line-height:1.5; margin-bottom:6px; font-style:italic; }
.jni-ans { font-size:0.78rem; color:#5e35b1; font-weight:700; }
.jni-ans-kr { font-size:0.75rem; color:#1a73e8; line-height:1.4; margin-bottom:2px; font-style:italic; }
.jni-exp { font-size:0.76rem; color:#666; line-height:1.6; margin-top:7px; padding-top:7px; border-top:1px dashed #ddd; }
.jni-exp-detail { margin-top:8px; padding-top:8px; border-top:1px dashed #ddd; }
.jni-exp-text { font-size:0.82rem; color:#333; line-height:1.7; margin-top:8px; padding:10px 12px; background:#f0faf0; border-radius:8px; border-left:3px solid #27ae60; }
.jni-optexp-wrap { padding:8px 10px; background:#f8f5ff; border-radius:8px; }
.jni-optexp { margin-bottom:5px; font-size:0.75rem; color:#666; line-height:1.5; padding:6px 8px; border-radius:6px; }
.jni-optexp b { color:#444; }
.jni-opt-kr { font-size:0.73rem; color:#1a73e8; font-style:italic; margin:2px 0 4px; }
.jni-optexp-correct { background:#e8f5e9; border-left:3px solid #27ae60; }
.jni-optexp-correct b { color:#27ae60; }
.jni-btn-row { display:flex; gap:7px; margin-top:9px; }
.jni-btn { padding:6px 12px; border:1px solid #d1c4e9; border-radius:8px; background:#fff; color:#5e35b1; font-size:0.74rem; font-weight:700; cursor:pointer; }
.jni-btn:hover { background:#ede7f6; }
.jni-btn.jni-del { border-color:#f5c6c6; color:#e74c3c; }
.jni-btn.jni-del:hover { background:#fdecea; }
/* ── JLPT 보라색 테마 ── */
body.theme-jlpt .header { background:#5e35b1; }
body.theme-jlpt .progress-fill { background:#5e35b1; }
body.theme-jlpt .quiz-opt-btn:hover:not(:disabled) { border-color:#5e35b1; background:#ede7f6; color:#5e35b1; }
body.theme-jlpt .quiz-opt-btn.correct { border-color:#5e35b1; background:#5e35b1; }
body.theme-jlpt .quiz-opt-btn.show-correct { border-color:#5e35b1; background:#ede7f6; color:#5e35b1; }
body.theme-jlpt .quiz-feedback.fb-ok { background:#ede7f6; border-left-color:#5e35b1; color:#311b92; }
body.theme-jlpt .quiz-next-btn { background:#5e35b1; }
body.theme-jlpt .quiz-next-btn:hover { background:#4527a0; }
body.theme-jlpt .quiz-prev-btn { border-color:#5e35b1; color:#5e35b1; }
body.theme-jlpt .quiz-prev-btn:hover { background:#ede7f6; }
body.theme-jlpt .quiz-score-ring { border-color:#5e35b1; }
body.theme-jlpt .quiz-score-num { color:#5e35b1; }
body.theme-jlpt .quiz-wrong-item .wi-ans { color:#5e35b1; }
body.theme-jlpt .quiz-restart-btn { border-color:#5e35b1; color:#5e35b1; }
body.theme-jlpt .quiz-restart-btn:hover { background:#ede7f6; }

/* ── BJT 비즈니스 일본어 ── */
body.theme-bjt { background:#faf7f2; }
.bjt-title-bar { padding:20px 0 10px; }
.bjt-title-row { display:flex; align-items:center; justify-content:space-between; }
.bjt-main-title { font-size:1.25rem; font-weight:800; color:#bf360c; }
.bjt-main-sub { font-size:0.82rem; color:#888; margin-top:4px; }
.bjt-title-actions { display:flex; gap:6px; }
.bjt-stats-btn { border:1.5px solid #e65100; background:none; color:#e65100; padding:5px 10px; border-radius:8px; font-size:0.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.bjt-stats-btn:hover { background:#e65100; color:#fff; }
.bjt-reset-btn { border:1.5px solid #e74c3c; background:none; color:#e74c3c; padding:5px 10px; border-radius:8px; font-size:0.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.bjt-reset-btn:hover { background:#e74c3c; color:#fff; }
.bjt-quit-btn { display:block; width:100%; margin-top:18px; padding:14px; border:1.5px solid #ccc; border-radius:12px; background:none; color:#888; font-size:0.85rem; font-weight:600; cursor:pointer; }
.bjt-quit-btn:hover { border-color:#999; color:#555; }

/* stats modal */
.bjt-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.bjt-modal { background:#fff; border-radius:18px; width:100%; max-width:400px; max-height:85vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.bjt-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid #f0e8e0; position:sticky; top:0; background:#fff; border-radius:18px 18px 0 0; }
.bjt-modal-title { font-size:1rem; font-weight:800; color:#333; }
.bjt-modal-close { border:none; background:none; font-size:1.2rem; color:#999; cursor:pointer; padding:4px 8px; }
.bjt-modal-body { padding:16px 18px 20px; }

.bjt-stat-cat { margin-bottom:18px; }
.bjt-stat-cat-header { display:flex; align-items:baseline; justify-content:space-between; }
.bjt-stat-cat-label { font-size:0.95rem; font-weight:700; color:#bf360c; }
.bjt-stat-cat-pct { font-size:1.1rem; font-weight:800; color:#e65100; }
.bjt-stat-cat-sub { font-size:0.72rem; color:#999; margin:2px 0 10px; }

.bjt-stat-ch { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.bjt-stat-ch-name { font-size:0.78rem; color:#555; min-width:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bjt-stat-ch-bar { flex:0 0 80px; height:7px; background:#f0e0d0; border-radius:4px; overflow:hidden; }
.bjt-stat-fill { display:block; height:100%; background:linear-gradient(90deg,#ff8f00,#e65100); border-radius:4px; transition:width 0.4s; }
.bjt-stat-ch-num { font-size:0.72rem; color:#888; font-weight:600; min-width:32px; text-align:right; }

.bjt-stat-total { border-top:2px solid #f0e8e0; padding-top:14px; margin-top:4px; text-align:center; }
.bjt-stat-total-label { font-size:0.78rem; font-weight:700; color:#888; margin-bottom:8px; }
.bjt-stat-total-bar { height:10px; background:#f0e0d0; border-radius:5px; overflow:hidden; margin-bottom:8px; }
.bjt-stat-total-num { font-size:0.88rem; font-weight:800; color:#e65100; }

.bjt-stat-actions { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.bjt-stat-resume { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; padding:13px 16px; border:none; border-radius:10px; background:linear-gradient(135deg,#e65100,#ff8f00); color:#fff; font-size:0.92rem; font-weight:700; cursor:pointer; }
.bjt-stat-resume-sub { font-size:0.74rem; font-weight:500; opacity:0.85; }
.bjt-stat-reset { width:100%; padding:10px 16px; border:1.5px solid #ddd; border-radius:10px; background:#fff; color:#999; font-size:0.82rem; font-weight:600; cursor:pointer; }
.bjt-stat-complete { text-align:center; padding:14px; color:#2e7d32; font-weight:700; font-size:0.88rem; background:#e8f5e9; border-radius:10px; }

/* tab bar */
.bjt-tab-bar { display:flex; gap:0; background:#f5ebe3; border-radius:10px; padding:3px; margin-bottom:14px; }
.bjt-tab { flex:1; border:none; background:none; padding:9px 0; font-size:0.82rem; font-weight:700; color:#999; border-radius:8px; cursor:pointer; transition:all 0.2s; -webkit-tap-highlight-color:transparent; }
.bjt-tab.active { background:#fff; color:#bf360c; box-shadow:0 1px 4px rgba(0,0,0,0.08); }

/* category headers */
.bjt-cat-progress { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:0.72rem; color:#888; font-weight:600; }
.bjt-cat-bar { flex:1; height:6px; background:#f0e0d0; border-radius:3px; overflow:hidden; }
.bjt-cat-fill { display:block; height:100%; background:linear-gradient(90deg,#ff8f00,#e65100); border-radius:3px; transition:width 0.4s ease; }

/* chapter cards */
.bjt-chapter-card { background:#fff; border-radius:14px; margin-bottom:10px; box-shadow:0 1px 8px rgba(0,0,0,0.06); overflow:hidden; }
.bjt-chapter-card.all-done { opacity:0.7; }
.bjt-ch-header { padding:14px 16px 12px; border-bottom:1px solid #f0e8e0; cursor:pointer; position:relative; -webkit-tap-highlight-color:transparent; }
.bjt-ch-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.bjt-ch-num { font-size:0.68rem; font-weight:700; color:#e65100; text-transform:uppercase; letter-spacing:1px; }
.bjt-ch-title { font-size:0.98rem; font-weight:700; color:#333; }
.bjt-ch-title-ja { font-size:0.78rem; color:#aaa; margin-top:1px; }
.bjt-ch-progress { font-size:0.72rem; color:#e65100; font-weight:700; }
.bjt-ch-toggle { position:absolute; right:16px; bottom:10px; font-size:0.7rem; color:#ccc; transition:transform 0.2s; }
.bjt-chapter-card.collapsed .bjt-ch-toggle { transform:rotate(-90deg); }
.bjt-chapter-card.collapsed .bjt-topic-list { display:none; }

/* topic list */
.bjt-topic-list { padding:4px 0; }
.bjt-topic-btn { display:flex; align-items:center; gap:10px; width:100%; padding:11px 16px; border:none; background:none; text-align:left; cursor:pointer; transition:background 0.15s; font-size:0.88rem; color:#333; }
.bjt-topic-btn:hover { background:#fef3ec; }
.bjt-topic-btn + .bjt-topic-btn { border-top:1px solid #f8f0ea; }
.bjt-topic-btn.done { color:#999; }
.bjt-topic-btn.done .bjt-topic-num { color:#ccc; }
.bjt-topic-num { font-size:0.75rem; font-weight:700; color:#e65100; min-width:22px; }
.bjt-topic-title { flex:1; }
.bjt-topic-check { color:#4caf50; font-weight:700; font-size:0.9rem; }

/* lesson detail */
.bjt-lesson-nav { display:flex; align-items:center; gap:8px; padding:8px 0 12px; }
.bjt-back-btn { border:1.5px solid #e65100; background:#fff3e0; color:#e65100; font-weight:700; font-size:0.85rem; cursor:pointer; padding:8px 16px; border-radius:24px; transition:all 0.15s; }
.bjt-back-btn:hover { background:#e65100; color:#fff; }
.bjt-lesson-num { background:#e65100; color:#fff; font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:20px; }
.bjt-nav-arrows { margin-left:auto; display:flex; gap:4px; }
.bjt-arrow-btn { border:1.5px solid #e65100; background:none; color:#e65100; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:0.8rem; font-weight:700; transition:all 0.15s; }
.bjt-arrow-btn:hover:not(:disabled) { background:#e65100; color:#fff; }
.bjt-arrow-btn:disabled { opacity:0.3; cursor:default; }

.bjt-lesson-header { margin-bottom:16px; }
.bjt-lesson-title-ja { font-size:1.2rem; font-weight:800; color:#333; line-height:1.4; }
.bjt-lesson-title-ko { font-size:0.88rem; color:#888; margin-top:4px; }

.bjt-section { background:#fff; border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 1px 6px rgba(0,0,0,0.05); }
.bjt-section-title { font-size:0.82rem; font-weight:700; color:#e65100; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.bjt-sec-icon { font-size:1rem; }
.bjt-section-body { font-size:0.88rem; color:#444; line-height:1.7; white-space:pre-wrap; }

.bjt-keypoint { background:#fff8e1; border-left:4px solid #ff8f00; }
.bjt-keypoint .bjt-section-body { color:#5d4037; }

/* vocab */
.bjt-vocab-list { display:flex; flex-direction:column; gap:6px; }
.bjt-vocab-item { padding:8px 10px; background:#fafafa; border-radius:10px; }
.bjt-vocab-top { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.bjt-vocab-word { font-size:1rem; font-weight:700; color:#333; }
.bjt-vocab-reading { font-size:0.78rem; color:#e65100; }
.bjt-vocab-meaning { font-size:0.82rem; color:#666; }
.bjt-vocab-example { font-size:0.76rem; color:#888; margin-top:4px; line-height:1.5; padding-left:4px; border-left:2px solid #e0d6cc; }

/* keigo table */
.bjt-keigo-section { background:#fce4ec; border-left:4px solid #c2185b; }
.bjt-keigo-grid { width:100%; border-collapse:collapse; font-size:0.78rem; margin-top:4px; }
.bjt-keigo-grid th { background:#f8bbd0; color:#880e4f; padding:8px 6px; text-align:center; font-weight:700; font-size:0.72rem; }
.bjt-keigo-grid td { padding:7px 6px; border-bottom:1px solid #f8bbd0; color:#333; text-align:center; line-height:1.4; }
.bjt-keigo-grid tr:last-child td { border-bottom:none; }
.bjt-keigo-grid td:first-child { font-weight:600; text-align:left; color:#c2185b; }
.bjt-keigo-note { font-size:0.72rem; color:#888; margin-top:8px; line-height:1.5; }

/* expressions */
.bjt-expr-section { background:#e3f2fd; border-left:4px solid #1976d2; }
.bjt-expr-item { padding:10px 12px; margin-bottom:6px; background:#fff; border-radius:10px; }
.bjt-expr-item:last-child { margin-bottom:0; }
.bjt-expr-ja { font-size:0.9rem; font-weight:600; color:#1565c0; line-height:1.5; }
.bjt-expr-ko { font-size:0.78rem; color:#777; margin-top:3px; }

/* dialogue */
.bjt-dl-bad, .bjt-dl-good { padding:12px; border-radius:12px; margin-bottom:8px; }
.bjt-dl-bad { background:#ffebee; border-left:4px solid #e53935; }
.bjt-dl-good { background:#e8f5e9; border-left:4px solid #43a047; }
.bjt-dl-label { font-size:0.72rem; font-weight:800; margin-bottom:4px; }
.bjt-dl-bad .bjt-dl-label { color:#c62828; }
.bjt-dl-good .bjt-dl-label { color:#2e7d32; }
.bjt-dl-speaker { font-size:0.75rem; font-weight:600; color:#888; margin-bottom:4px; }
.bjt-dl-line { font-size:0.9rem; color:#333; line-height:1.6; }
.bjt-dl-line-ko { font-size:0.78rem; color:#888; margin-top:4px; line-height:1.5; }
.bjt-dl-why { font-size:0.78rem; color:#b71c1c; margin-top:8px; padding:8px 10px; background:rgba(255,255,255,0.6); border-radius:8px; line-height:1.5; }
.bjt-dl-why-good { color:#1b5e20; }

/* quiz */
.bjt-quiz-section { background:#f3e5f5; border-left:4px solid #7b1fa2; }
.bjt-quiz-block { margin-bottom:20px; }
.bjt-quiz-block:last-child { margin-bottom:0; }
.bjt-quiz-question { font-size:0.88rem; color:#333; line-height:1.7; margin-bottom:12px; white-space:pre-wrap; }
.bjt-quiz-options { display:flex; flex-direction:column; gap:8px; }
.bjt-quiz-opt { padding:12px 14px; border:1.5px solid #ce93d8; border-radius:12px; background:#fff; text-align:left; font-size:0.86rem; color:#333; cursor:pointer; transition:all 0.15s; }
.bjt-quiz-opt:hover:not(:disabled) { background:#f3e5f5; border-color:#7b1fa2; }
.bjt-quiz-opt:disabled { cursor:default; opacity:0.85; }
.bjt-quiz-opt.correct { background:#e8f5e9; border-color:#43a047; color:#2e7d32; font-weight:600; }
.bjt-quiz-opt.wrong { background:#ffebee; border-color:#e53935; color:#c62828; }

.bjt-quiz-result { margin-top:12px; padding:14px; border-radius:12px; }
.bjt-quiz-correct { background:#e8f5e9; }
.bjt-quiz-wrong { background:#ffebee; }
.bjt-qr-title { font-size:0.88rem; font-weight:700; margin-bottom:6px; }
.bjt-quiz-correct .bjt-qr-title { color:#2e7d32; }
.bjt-quiz-wrong .bjt-qr-title { color:#c62828; }
.bjt-qr-text { font-size:0.82rem; color:#555; line-height:1.6; }

/* drill */
.bjt-drill-section { background:#fff3e0; border-left:4px solid #e65100; }
.bjt-drill-instruction { font-size:0.82rem; color:#bf360c; font-weight:600; margin-bottom:10px; line-height:1.5; }
.bjt-drill-template { background:#fff; border:1.5px dashed #ffab91; border-radius:10px; padding:12px; margin-bottom:10px; }
.bjt-drill-template-title { font-size:0.75rem; font-weight:700; color:#e65100; margin-bottom:6px; }
.bjt-drill-template-body { font-size:0.82rem; color:#555; line-height:1.7; white-space:pre-wrap; }
.bjt-drill-toggle { border:none; background:#e65100; color:#fff; padding:8px 16px; border-radius:8px; font-size:0.8rem; font-weight:600; cursor:pointer; margin-top:6px; }
.bjt-drill-toggle:hover { background:#bf360c; }
.bjt-drill-answer { background:#fff8e1; border-radius:10px; padding:12px; margin-top:10px; }
.bjt-drill-answer-title { font-size:0.75rem; font-weight:700; color:#f57f17; margin-bottom:6px; }
.bjt-drill-answer-body { font-size:0.82rem; color:#555; line-height:1.7; white-space:pre-wrap; }

/* lesson bottom actions */
.bjt-lesson-bottom { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.bjt-done-btn { width:100%; padding:14px; border:none; border-radius:12px; background:#e65100; color:#fff; font-size:0.92rem; font-weight:700; cursor:pointer; transition:all 0.15s; }
.bjt-done-btn:hover { background:#bf360c; }
.bjt-done-btn.done { background:#4caf50; cursor:default; }
.bjt-tolist-btn { width:100%; padding:14px; border:1.5px solid #e65100; border-radius:12px; background:#fff3e0; color:#e65100; font-size:0.88rem; font-weight:700; cursor:pointer; transition:all 0.15s; }
.bjt-tolist-btn:hover { background:#e65100; color:#fff; }

/* lesson footer */
.bjt-lesson-footer { display:flex; justify-content:space-between; padding:10px 0 30px; gap:10px; }
.bjt-footer-btn { flex:1; padding:14px; border:1.5px solid #e65100; border-radius:12px; background:none; color:#e65100; font-size:0.88rem; font-weight:600; cursor:pointer; transition:all 0.15s; }
.bjt-footer-btn:hover { background:#fbe9e7; }
.bjt-footer-next { background:#e65100; color:#fff; border-color:#e65100; }

/* ── 청해 연습 (Choukai) ── */
.quiz-type-badge.t-choukai { background:#fff3e0; color:#e65100; }
.ck-title-bar { text-align:center; margin-bottom:20px; padding:16px 0 8px; }
.ck-title { font-size:1.2rem; font-weight:700; color:#333; }
.ck-sub { font-size:0.82rem; color:#888; margin-top:4px; }
.ck-audio-area { text-align:center; padding:20px 0; }
.ck-play-btn { display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border:none; border-radius:50px; background:linear-gradient(135deg,#5e35b1,#7c4dff); color:#fff; font-size:1.1rem; font-weight:700; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 16px rgba(94,53,177,0.3); }
.ck-play-btn:hover { transform:scale(1.05); box-shadow:0 6px 20px rgba(94,53,177,0.4); }
.ck-play-btn:active { transform:scale(0.98); }
.ck-play-icon { font-size:1.3rem; }
.ck-speed-row { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.ck-speed-btn { padding:6px 14px; border:1.5px solid #ccc; border-radius:20px; background:#fff; font-size:0.78rem; font-weight:600; cursor:pointer; transition:all 0.15s; color:#666; }
.ck-speed-btn.active { background:#5e35b1; border-color:#5e35b1; color:#fff; }
.ck-speed-btn:hover:not(.active) { border-color:#5e35b1; color:#5e35b1; }
.ck-play-hint { font-size:0.78rem; color:#aaa; margin-top:10px; }
.ck-situation { background:#f3e5f5; border-radius:10px; padding:10px 14px; font-size:0.88rem; color:#4a148c; margin-bottom:12px; font-weight:500; }
.ck-question-text { background:#ede7f6; border-radius:10px; padding:12px 14px; font-size:0.92rem; color:#311b92; margin-bottom:12px; font-weight:600; text-align:center; }
.ck-transcript { background:#fafafa; border:1.5px solid #e0e0e0; border-radius:12px; padding:14px; margin-top:12px; }
.ck-transcript-title { font-size:0.82rem; font-weight:700; color:#5e35b1; margin-bottom:10px; }
.ck-script-situation { font-size:0.82rem; color:#888; margin-bottom:8px; font-style:italic; }
.ck-script-line { font-size:0.88rem; line-height:1.7; margin-bottom:4px; color:#333; }
.ck-speaker { font-weight:700; color:#5e35b1; margin-right:6px; }
.ck-script-question { font-size:0.88rem; font-weight:600; color:#311b92; margin-top:10px; padding-top:8px; border-top:1px solid #e0e0e0; }
.bjt-footer-next:hover { background:#bf360c; }