/* ============================================================
   gp-lesson.css — 강의 뷰 3종 공통 스타일
   (grammar-basic/lesson · grammar/lesson · travel/lesson)

   세 뷰에서 완전히 동일한 규칙만 모았다.
   뷰별로 값이 다른 선언(hero 패딩·h1 크기, lv-tag 색,
   진행률 바·다음 버튼 색, .gp-html 예문 카드 크기 등)은
   각 뷰 <style>에 남아 이 파일 뒤에 로드되어 오버라이드한다.
   ============================================================ */

/* ── 레이아웃 ── */
.gp-wrap { min-height:calc(100vh - 64px); background:var(--cream); padding:16px 12px 60px; }
.gp-layout { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:980px) {
  .gp-layout { grid-template-columns:minmax(0, 720px) 260px; align-items:start; }
}
.gp-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.gp-side { display:none; }
@media (min-width:980px) {
  .gp-side { display:flex; flex-direction:column; gap:12px; position:sticky; top:80px; }
}

/* ── 상단 바 — 빵부스러기 + 강의 셀렉터 + 책갈피 ── */
.gp-bar {
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:10px 14px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-size:12px; color:var(--muted);
}
.gp-bar a { color:var(--muted); text-decoration:none; }
.gp-bar a:hover { color:var(--pink-dark); }
.gp-bar .sep { opacity:.4; }
.gp-bar select {
  border:1.5px solid var(--border); border-radius:10px; padding:6px 10px;
  font-size:12px; font-weight:700; color:var(--navy);
  background:var(--white); font-family:inherit; cursor:pointer; max-width:100%;
}
.gp-bar .spacer { flex:1; }
.gp-bar .bookmark-toggle {
  background:none; border:1.5px solid var(--border); border-radius:14px;
  padding:4px 10px; font-size:12px; cursor:pointer; color:var(--muted);
  font-family:inherit; transition:all .12s;
}
.gp-bar .bookmark-toggle.on { background:#fff5b8; border-color:#f0c83a; color:#7a5a1a; }
.gp-bar .bookmark-toggle:hover { border-color:var(--pink-dark); }

/* ── hero — 패딩·h1 크기·lv-tag 색상은 뷰별 오버라이드 ── */
.gp-hero {
  background:var(--white); border:2px solid var(--border); border-radius:22px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow:var(--shadow-lg);
}
.gp-hero .meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:11px; }
.gp-hero .lv-tag { padding:2px 10px; border-radius:6px; font-weight:700; }
.gp-hero .min, .gp-hero .no { color:var(--muted); }
.gp-hero h1 { margin:4px 0 0; font-weight:700; color:var(--navy); line-height:1.25; }
.gp-hero .sub { font-family:'Noto Serif JP', serif; font-size:15px; color:var(--muted); }
.gp-hero .summary { margin-top:10px; font-size:14px; color:var(--text); line-height:1.7; }

/* ── 사이드바 ── */
.gp-side-card {
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px;
}
.gp-side-title { font-size:11px; font-weight:700; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.gp-side ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:13px; }
.gp-side a { color:var(--navy); text-decoration:none; transition:color .12s; }
.gp-side a:hover { color:var(--pink-dark); }
.gp-side a.active { color:var(--pink-dark); font-weight:700; }
.gp-side .quick-links { display:flex; flex-direction:column; gap:6px; }
.gp-side .quick-links a {
  font-size:12px; color:var(--muted); padding:6px 8px; border-radius:8px;
  display:flex; gap:6px; align-items:center;
}
.gp-side .quick-links a:hover { background:var(--cream); color:var(--navy); }

/* ── 모바일 — 인라인 차례 카드 (gp-lesson.js injectMobileToc 가 주입) ── */
.gp-toc {
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:14px 18px; font-size:13px;
}
@media (min-width:980px) { .gp-toc { display:none; } }
.gp-toc-title { font-size:11px; font-weight:700; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.gp-toc ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
.gp-toc a { color:var(--navy); text-decoration:none; }
.gp-toc a:hover { color:var(--pink-dark); }

/* ── 이전/다음 내비 — .next 색상은 뷰별 오버라이드 ── */
.gp-nav-bar { display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap; margin-top:6px; }
.gp-nav-btn {
  flex:1; min-width:180px;
  padding:14px 16px; border-radius:14px;
  border:1.5px solid var(--border); background:var(--white);
  font-size:13px; font-weight:700; color:var(--navy);
  text-decoration:none; transition:all .12s;
  display:flex; flex-direction:column; gap:2px;
}
.gp-nav-btn .lbl { font-size:10px; color:var(--muted); }
.gp-nav-btn:hover { border-color:var(--pink-dark); background:var(--pink-light); }
.gp-nav-btn[aria-disabled="true"] { opacity:.45; pointer-events:none; }

/* ── 스크롤 진행률 바 (상단 3px) — 그라데이션 색은 뷰별 오버라이드 ── */
.gp-progress {
  position:fixed; top:0; left:0; height:3px; width:0;
  z-index:50; transition:width .1s;
}

.gp-empty { background:var(--white); border:2px dashed var(--border); border-radius:14px; padding:36px 20px; text-align:center; color:var(--muted); }

/* ===== 리치 HTML 본문 (.gp-html) 공통부 ===== */
.gp-html { display:flex; flex-direction:column; gap:16px; }
.gp-html section.gp-section { scroll-margin-top:80px; }
.gp-html h2 { margin:0 0 12px; font-size:19px; font-weight:700; color:var(--navy); padding-bottom:8px; border-bottom:2px solid var(--pink-light); }
.gp-html h3 { margin:14px 0 6px; font-size:15px; font-weight:700; color:var(--navy); }
.gp-html p  { margin:0 0 10px; font-size:14.5px; line-height:1.85; color:var(--text); }
.gp-html ul, .gp-html ol { margin:0 0 10px; padding-left:22px; display:flex; flex-direction:column; gap:5px; }
.gp-html li { font-size:14.5px; line-height:1.7; color:var(--text); }
.gp-html strong { color:var(--navy); font-weight:700; }
.gp-html .jp { font-family:'Noto Serif JP', serif; }

/* 루비(후리가나) */
.gp-html ruby { ruby-align:center; }
.gp-html rt { font-size:.55em; color:var(--muted); font-weight:400; }

/* 조사·핵심 강조 색 */
.gp-html .p { color:var(--pink-dark); font-weight:700; }          /* 조사/포인트 */
.gp-html .o { color:#1f7a3d; font-weight:700; }                   /* 맞는 예 */
.gp-html .x { color:#c0392b; font-weight:700; text-decoration:line-through; } /* 틀린 예 */

/* 표 — 활용표·비교표 */
.gp-html table { width:100%; border-collapse:collapse; font-size:13.5px; margin:4px 0 12px; background:var(--white); }
.gp-html th, .gp-html td { border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; line-height:1.5; }
.gp-html thead th { background:var(--navy); color:#fff; font-weight:700; }
.gp-html tbody th { background:var(--cream); color:var(--navy); white-space:nowrap; }
.gp-html td .jp, .gp-html th .jp { font-family:'Noto Serif JP', serif; font-size:15px; }

/* 예문 — .ex 본체(패딩·글자 크기)는 뷰별 */
.gp-html .ex .rd { font-size:11.5px; color:var(--muted); }
.gp-html .ex .tts:hover { background:var(--pink-light); }
.gp-html .exlist { display:flex; flex-direction:column; gap:8px; margin:6px 0 12px; }

/* 콜아웃 — .warn::before 문구·.note 색은 뷰별 */
.gp-html .tip  { background:#fffaf0; border:1px solid #f0d590; border-radius:10px; padding:10px 14px; font-size:13px; color:#7a5a1a; line-height:1.7; }
.gp-html .tip::before  { content:"💡 "; }
.gp-html .warn { background:#fff5f5; border:1px solid #fca5a5; border-radius:10px; padding:10px 14px; font-size:13px; color:#9a2a2a; line-height:1.7; }

/* 학습 목표 */
.gp-html .goals { background:linear-gradient(135deg,#eef6ff,#f6fbff); border:1px solid #bcdcff; border-radius:14px; padding:16px 22px; }
.gp-html .goals .gt { font-size:13px; font-weight:700; color:#1d4e89; margin-bottom:8px; }

/* 확인/연습 문제 (details) */
.gp-html .q { background:#f3fbf5; border:1px solid #bfe6c8; border-radius:10px; padding:10px 14px; margin:6px 0; }
.gp-html .q .qq { font-size:13.5px; color:var(--navy); font-weight:600; line-height:1.6; }
.gp-html .q .tag { display:inline-block; font-size:10px; font-weight:700; color:#1f7a3d; background:#d6f0dd; border-radius:6px; padding:1px 7px; margin-right:6px; }
.gp-html details summary { cursor:pointer; font-size:12px; font-weight:700; color:#1f7a3d; list-style:none; display:inline-block; padding:3px 10px; border:1px solid #bfe6c8; border-radius:12px; background:var(--white); margin-top:8px; }
.gp-html details summary::-webkit-details-marker { display:none; }
.gp-html details summary:hover { background:#eafaef; }
.gp-html details .a { margin-top:8px; font-size:14px; color:var(--navy); font-weight:600; }
.gp-html details .ee { margin-top:4px; font-size:12.5px; color:var(--muted); line-height:1.6; }

/* 정리/마무리 박스 */
.gp-html .summary-box { background:linear-gradient(135deg, var(--navy), var(--navy-mid, #2d3458)); color:#fff; border-radius:14px; padding:22px 26px; font-size:14.5px; line-height:1.8; }
.gp-html .summary-box .st { font-size:11px; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
/* 어두운 정리 박스 안에서는 강조·일본어·링크를 밝게 (가독성) */
.gp-html .summary-box strong, .gp-html .summary-box b { color:#ffd9e3; }
.gp-html .summary-box .jp { color:#fff; }
.gp-html .summary-box .p  { color:#ffb3c7; }
.gp-html .summary-box a   { color:#ffd9e3; }