/* =====================================================
   대순지침 (大巡指針) — 오디오 리더
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Serif+KR:wght@400;600;700&display=swap');

/* ── 변수 ───────────────────────────────────────── */
:root {
  --bg:      #F8F3EA;
  --bg2:     #EFE7D8;
  --card:    #ffffff;
  --border:  #E0D4BF;
  --text:    #1C1508;
  --sub:     #6B5C46;
  --accent:  #9B6F1F;
  --accent2: #C08A2A;
  --play:    #9B6F1F;
  --hi:      rgba(212,169,48,.09);
  --hi2:     rgba(212,169,48,.20);
  --radius:  14px;
  --shadow:  0 1px 2px rgba(0,0,0,.06), 0 4px 18px rgba(0,0,0,.08);
}
[data-theme="dark"] {
  --bg:      #100C06;
  --bg2:     #180E06;
  --card:    #1C1409;
  --border:  #2E2214;
  --text:    #EDE2CA;
  --sub:     #9B8B72;
  --accent:  #D4A930;
  --accent2: #F0C848;
  --play:    #D4A930;
  --hi:      rgba(212,169,48,.09);
  --hi2:     rgba(212,169,48,.18);
  --radius:  14px;
  --shadow:  0 1px 2px rgba(0,0,0,.2), 0 4px 18px rgba(0,0,0,.22);
}

[data-fontsize="md"]  { font-size: 16px; }
[data-fontsize="lg"]  { font-size: 18px; }
[data-fontsize="xl"]  { font-size: 20px; }
[data-fontsize="xxl"] { font-size: 22px; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── 헤더 ──────────────────────────────────────── */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: var(--card);
  color: var(--text);
  padding: 13px 18px 12px;
  display: flex; align-items:center; justify-content:space-between;
  box-shadow: 0 1px 8px rgba(0,0,0,.08);
  border-bottom: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
body.playing .site-header { transform:translateY(-100%); opacity:0; pointer-events:none; }
body.playing.hdr-peek .site-header { transform:translateY(0); opacity:1; pointer-events:auto; }

.hdr-reveal-zone {
  position:fixed; top:0; left:0; right:0; height:28px; z-index:99; display:none;
}
body.playing .hdr-reveal-zone { display:block; }
.bar-reveal-zone {
  position:fixed; bottom:0; left:0; right:0; height:32px; z-index:199; display:none;
}
body.playing .bar-reveal-zone { display:block; }

.site-header h1 {
  font-family: 'Noto Serif KR', serif;
  font-size: 1.08em; font-weight: 700; letter-spacing: .18em;
  color: var(--accent);
}
.site-header .sub {
  font-size: .66em; letter-spacing: .12em; margin-top: 3px;
  color: var(--sub);
}
.hdr-btns { display:flex; gap:6px; }
.hdr-btn {
  background: transparent;
  border: none;
  cursor:pointer; padding:8px;
  color: var(--sub); border-radius:10px;
  display:flex; align-items:center;
  transition: background .18s, color .18s;
}
.hdr-btn:hover { background:var(--bg2); color:var(--text); }
.hdr-btn svg { width:20px; height:20px; flex-shrink:0; }
[data-theme="dark"]  .icon-moon { display:none; }
[data-theme="light"] .icon-sun  { display:none; }

/* ── 아코디언 ───────────────────────────────────── */
.accordion {
  max-width: 700px; margin: 0 auto;
  padding: 76px 14px 150px;
  transition: padding-top .3s ease, padding-bottom .3s ease;
}
body.playing .accordion { padding-top: 6px; padding-bottom: 16px; }

/* 머리글 카드 */
.preface-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.preface-btn {
  width:100%; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:none; cursor:pointer; text-align:left;
  background: var(--card); color:var(--accent);
  border-left: 4px solid var(--accent);
  transition: background .18s;
}
.preface-btn:hover { background: var(--hi); }
.preface-icon { font-size:1.2em; opacity:.85; }
.preface-meta { flex:1; }
.preface-meta strong { display:block; font-size:.98em; font-weight:700; letter-spacing:.04em; }
.preface-meta span   { font-size:.74em; opacity:.6; margin-top:2px; display:block; }
.preface-btn .cls-play-icon { color:var(--sub); opacity:.5; }
.preface-btn.active .cls-play-icon { color:var(--accent); opacity:1; }
.preface-content {
  display:none;
  padding:14px 16px;
  border-top:2px solid var(--accent);
}
.preface-card.active .preface-content { display:block; }

.pf-text { font-size:.94em; line-height:1.9; color:var(--text); margin-bottom:10px; }
.pf-heading {
  font-size:.95em; font-weight:700; color:var(--accent);
  text-align:center; margin:14px 0 8px;
  padding:5px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  letter-spacing:.04em;
}
.pf-num { display:flex; gap:10px; margin:8px 0; line-height:1.8; font-size:.92em; }
.pf-num-key { font-weight:700; color:var(--accent); flex-shrink:0; min-width:18px; }

/* 머리글(훈시의 대지) 재생 하이라이트 */
.pf-text.pf-hi, .pf-num.pf-hi {
  background: var(--hi2);
  border-left: 3px solid var(--accent);
  padding: 6px 10px 6px 12px;
  margin-left: -4px;
  border-radius: 0 4px 4px 0;
  transition: background .2s;
}
.pf-heading.pf-hi {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transition: background .2s;
}

/* ── 편 ─────────────────────────────────────────── */
.sec-block {
  margin-bottom: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.sec-btn {
  width:100%; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:none; color:var(--accent);
  font-size:.98em; font-weight:700; cursor:pointer; text-align:left;
  letter-spacing:.05em;
  background: var(--card);
  border-left: 4px solid var(--accent);
  transition: background .18s;
}
.sec-btn:hover { background: var(--hi); }
.sec-block.open .sec-btn { background: var(--hi); }
.sec-roman {
  font-size:1em; font-weight:900; opacity:.6;
  min-width:20px; letter-spacing:0;
}
.sec-arrow { margin-left:auto; transition:transform .25s; font-size:.8em; opacity:.5; }
.sec-block.open .sec-arrow { transform:rotate(180deg); }
.sec-body { display:none; background:var(--card); }
.sec-block.open .sec-body { display:block; }

/* ── 장 ─────────────────────────────────────────── */
.chap-block { border-top:1px solid var(--border); }
.chap-btn {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:11px 16px 11px 20px; border:none;
  background: var(--card); color:var(--text);
  font-size:.93em; font-weight:600; cursor:pointer; text-align:left;
  transition: background .15s;
}
.chap-btn:hover { background:var(--bg2); }
.chap-no {
  color:var(--accent); font-size:.85em; font-weight:700;
  min-width:38px; letter-spacing:.02em;
}
.chap-arrow { margin-left:auto; transition:transform .25s; font-size:.8em; color:var(--sub); opacity:.7; }
.chap-block.open .chap-arrow { transform:rotate(180deg); }
.chap-body { display:none; }
.chap-block.open .chap-body { display:block; }

/* ── 절 ─────────────────────────────────────────── */
.cls-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 16px 11px 28px;
  border-top:1px solid var(--border);
  cursor:pointer; transition:background .15s;
  background: var(--card);
}
.cls-item:hover { background:var(--bg); }
.cls-item.active {
  background: var(--hi);
  border-left: 3px solid var(--accent);
  padding-left: 25px;
}
.cls-no { color:var(--accent); font-size:.86em; font-weight:700; min-width:30px; padding-top:2px; flex-shrink:0; }
.cls-title { font-size:.9em; line-height:1.55; color:var(--text); flex:1; }
.cls-play-icon { color:var(--sub); opacity:.5; margin-top:3px; flex-shrink:0; }
.cls-item.active .cls-play-icon { color:var(--accent); opacity:1; }
.cls-item.active .cls-title { color:var(--accent); font-weight:600; }

/* ── 콘텐츠 패널 ─────────────────────────────────── */
.content-panel {
  display:none;
  padding:14px 16px 16px;
  border-top:2px solid var(--accent);
  background: var(--card);
}
.cls-item.active + .content-panel { display:block; }

.panel-title {
  font-size:.97em; font-weight:700; color:var(--accent);
  margin-bottom:12px; line-height:1.5; letter-spacing:.02em;
}

/* 그룹 헤더 */
.c-group {
  margin: 14px 0 6px;
  font-size:.88em; font-weight:700; color:var(--accent);
  padding:5px 10px; background:var(--bg2);
  border-radius:6px;
  display:flex; align-items:baseline; gap:8px;
  border-left: 3px solid var(--accent);
}
.c-group-date { font-size:.78em; font-weight:400; color:var(--sub); }

/* 항 */
.c-item {
  display:flex; gap:8px;
  padding:8px 4px; line-height:1.8;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.c-item:last-child { border-bottom:none; }
.c-item.srt-hi {
  background: var(--hi2);
  border-left: 3px solid var(--accent);
  padding-left: 24px;
  margin-left: -4px;
  border-radius: 0 4px 4px 0;
  transition: background .2s;
}
.c-group.srt-hi {
  background: var(--accent);
  color: #fff;
  transition: background .2s;
}
.c-group.srt-hi .c-group-date { color:rgba(255,255,255,.7); }
.c-key {
  font-weight:700; color:var(--accent); flex-shrink:0;
  min-width:26px; font-size:.87em; padding-top:.22em;
}
.c-text { flex:1; font-size:.95em; color:var(--text); }
.c-date {
  display:block; text-align:right;
  font-size:.7em; color:var(--sub);
  margin-top:3px; letter-spacing:.02em;
}

/* ── 플레이어 바 ─────────────────────────────────── */
#player-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background: var(--card);
  color: var(--text);
  padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0,0,0,.10);
  border-top: 1px solid var(--border);
  display:none;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
#player-bar.visible { display:block; }
body.playing #player-bar { transform:translateY(100%); opacity:0; pointer-events:none; }
body.playing.bar-peek #player-bar { transform:translateY(0); opacity:1; pointer-events:auto; }

.pb-title {
  font-size:.73em; letter-spacing:.05em;
  color: var(--sub);
  margin-bottom:9px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.pb-controls { display:flex; align-items:center; gap:10px; }

.pb-btn {
  background: transparent;
  border:none;
  cursor:pointer; color: var(--text);
  padding:7px; border-radius:50%; display:flex; align-items:center;
  transition: background .18s, color .18s;
}
.pb-btn:hover { background: var(--bg2); }
.pb-btn.big {
  background: var(--accent);
  color: #fff;
  padding:9px;
}
.pb-btn.big:hover { background: var(--accent2); }
.pb-btn svg { width:20px; height:20px; }
.pb-btn.big svg { width:26px; height:26px; }

.pb-progress-wrap { flex:1; display:flex; align-items:center; gap:8px; }
.pb-time { font-size:.69em; color: var(--sub); white-space:nowrap; min-width:32px; }
.pb-progress {
  flex:1; height:3px;
  background: var(--border);
  border-radius:2px; cursor:pointer;
}
.pb-fill {
  height:100%; background: linear-gradient(to right, var(--accent), var(--accent2));
  border-radius:2px; transition:width .1s linear;
}

.pb-speed {
  background: var(--bg2);
  border: 1px solid var(--border); color: var(--text);
  font-size:.74em; border-radius:20px;
  padding:5px 10px; cursor:pointer;
  transition:background .18s;
}
.pb-speed:hover { background: var(--border); }

.pb-next-btn { font-size:.72em; opacity:.5; background:none; border:none; color: var(--text); cursor:pointer; white-space:nowrap; }
.pb-next-btn:hover { opacity:.85; }