/* study-head-v2.css — 강의/회독 헤더 정돈 + 공통 음성 선택기 */

#voiceSetTitle,
#voiceSetRow{display:none!important}

.explain-header,
.study-head{
  border-color:rgba(148,163,184,.24)!important;
  box-shadow:0 3px 14px rgba(15,23,42,.055)!important;
}

.explain-header .ex-meta,
.study-head .info{min-width:0}
.explain-header .ex-title,
.study-head #stTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.head-voice-ctl{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 6px;
  border:1px solid #d8dee8;
  border-radius:9px;
  background:#fff;
  color:#334155;
  box-sizing:border-box;
  flex:0 0 auto;
  vertical-align:middle;
}
.head-voice-ctl::after{
  content:'▾';
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-52%);
  color:#64748b;
  font-size:10px;
  line-height:1;
  pointer-events:none;
}
.head-voice-select{
  appearance:none;
  -webkit-appearance:none;
  min-width:78px;
  max-width:96px;
  height:28px;
  margin:0;
  padding:0 16px 0 2px;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font-family:inherit!important;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
}
.head-voice-ctl:focus-within{
  border-color:#7c8cff;
  box-shadow:0 0 0 3px rgba(79,70,229,.10);
}

#exHeaderSpeedSel,
#studySpeedSel{
  min-height:28px!important;
  border-color:#d8dee8!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#334155!important;
  box-shadow:none!important;
}

.explain-header #exHeaderPlay{
  border-color:#315eea!important;
  background:#315eea!important;
  color:#fff!important;
  box-shadow:none!important;
}
.explain-header #exHeaderPlay:hover{filter:brightness(.97)}
.explain-header #exHeaderPlayAll,
.explain-header #exHeaderStop,
.explain-header .ex-nav{box-shadow:none!important}

.study-head #stPlayAll,
.rd-dock #stPlayAll{
  border-color:#159a61!important;
  background:#159a61!important;
  color:#fff!important;
  box-shadow:none!important;
}
.study-head #stPlayAll:hover,
.rd-dock #stPlayAll:hover{filter:brightness(.97)}
.study-head #stFollow{box-shadow:none!important}

.explain-header .sa-sys,
.study-head .sa-sys{opacity:.82}
.explain-header .sa-sys:hover,
.study-head .sa-sys:hover{opacity:1}

/* 리디식 회독은 실제 조작부가 하단 독이다. 음성은 독에 바로 두고 속도는 ⋯ 설정 시트로 보낸다. */
.rd-dock .head-voice-ctl{
  width:66px;
  min-width:66px;
  height:44px;
  padding:0 4px;
  border:0;
  border-radius:10px;
  background:transparent;
  box-shadow:none!important;
  justify-content:center;
}
.rd-dock .head-voice-ctl::after{right:3px;font-size:9px}
.rd-dock .head-voice-ctl:focus-within{
  background:rgba(79,70,229,.08);
  box-shadow:none!important;
}
.rd-dock .head-voice-select{
  width:62px;
  min-width:62px;
  max-width:62px;
  height:34px;
  padding:0 12px 0 0;
  font-size:10.8px;
  font-weight:800;
  text-align:center;
}
.head-rd-speed-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:4px 18px 10px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:12px;
  background:rgba(148,163,184,.07);
}
.head-rd-speed-title{
  color:inherit;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}
.head-rd-speed-row .study-speed-ctl{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.head-rd-speed-row .study-speed-ctl > span:first-child{display:none!important}

[data-theme="dark"] .head-voice-ctl,
body.dark .head-voice-ctl{
  background:#111827;
  border-color:#334155;
  color:#e5e7eb;
}
[data-theme="dark"] .head-voice-ctl::after,
body.dark .head-voice-ctl::after{color:#94a3b8}
[data-theme="dark"] #exHeaderSpeedSel,
[data-theme="dark"] #studySpeedSel,
body.dark #exHeaderSpeedSel,
body.dark #studySpeedSel{
  background:#111827!important;
  border-color:#334155!important;
  color:#e5e7eb!important;
}
[data-theme="dark"] .explain-header,
[data-theme="dark"] .study-head,
body.dark .explain-header,
body.dark .study-head{box-shadow:0 3px 14px rgba(0,0,0,.20)!important}
[data-theme="dark"] .rd-dock .head-voice-ctl,
body.dark .rd-dock .head-voice-ctl{background:transparent;border-color:transparent}
[data-theme="dark"] .rd-dock .head-voice-ctl:focus-within,
body.dark .rd-dock .head-voice-ctl:focus-within{background:rgba(129,140,248,.13)}
[data-theme="dark"] .head-rd-speed-row,
body.dark .head-rd-speed-row{background:rgba(148,163,184,.07);border-color:#334155}

/* 모바일 강의: 상단 탐색+조문 정보를 한 줄로 묶고, 보기/글자 도구는 기존 ⋯ 메뉴로 옮긴다. */
@media (max-width:480px){
  .head-voice-ctl{
    height:30px;
    padding:0 4px;
    border-radius:8px;
  }
  .head-voice-ctl::after{right:4px;font-size:9px}
  .head-voice-select{
    min-width:66px;
    max-width:68px;
    height:26px;
    font-size:11px;
    padding:0 13px 0 1px;
  }
  #exHeaderSpeedSel,
  #studySpeedSel{
    min-height:26px!important;
    font-size:11px!important;
  }

  .explain-header,
  .study-head{box-shadow:0 2px 8px rgba(15,23,42,.045)!important}

  .explain-header .explain-header-nav{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    min-width:0!important;
  }
  .explain-header .ex-nav-group{
    display:flex!important;
    flex:0 0 auto!important;
    gap:4px!important;
  }
  .explain-header .ex-meta.ex-meta-inline{
    display:flex!important;
    flex:1 1 auto!important;
    min-width:0!important;
    justify-content:flex-end!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  .explain-header .ex-meta .ex-law{display:none!important}
  .explain-header .ex-meta .ex-title{
    max-width:72px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .explain-header .ex-meta .ex-prog{flex:0 0 auto!important}

  .explain-header .ex-header-controls{
    column-gap:4px!important;
    row-gap:4px!important;
  }
  .explain-header .ex-header-controls .sa-sep{display:none!important}
  .explain-header .sa-group{gap:4px!important}

  .explain-header #exPrev,
  .explain-header #exNext{
    min-height:32px!important;
    height:32px!important;
    padding:0 7px!important;
    font-size:11px!important;
  }
  .explain-header #exHeaderPlay,
  .explain-header #exHeaderPlayAll,
  .explain-header #exHeaderStop,
  .explain-header #exTocBtn,
  .explain-header #exBookmarkBtn,
  .explain-header .sa-sys-menu-btn{
    min-height:36px!important;
    height:36px!important;
  }
  .explain-header #exHeaderPlay{padding:0 11px!important;min-width:86px!important}
  .explain-header #exHeaderPlayAll{padding:0 8px!important;min-width:46px!important}
  .explain-header #exHeaderStop{padding:0 7px!important;min-width:32px!important}
  .explain-header #exTocBtn,
  .explain-header #exBookmarkBtn{padding:0 8px!important}

  .explain-header .head-speed-ctl{
    display:inline-flex!important;
    align-items:center!important;
    gap:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    flex:0 0 50px!important;
    width:50px!important;
  }
  .explain-header .head-speed-ctl > span:first-child{display:none!important}
  .explain-header #exHeaderSpeedSel{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    padding:2px 1px!important;
  }

  .head-mobile-more-tools{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:218px;
    padding:10px;
    margin:-4px -4px 6px;
    border-bottom:1px solid rgba(148,163,184,.22);
  }
  .head-mobile-more-tools .sa-group{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .head-mobile-more-tools .ex-pane-sel{
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important;
  }
  .head-mobile-more-tools #exPaneSwap,
  .head-mobile-more-tools .sa-font .ex-nav{
    height:34px!important;
    min-height:34px!important;
  }
  .head-mobile-more-tools .sa-font [data-fs="val"]{min-width:54px!important}

  .rd-dock .head-voice-ctl{
    width:66px;
    min-width:66px;
    height:44px;
    padding:0 3px;
  }
  .rd-dock .head-voice-select{
    width:62px;
    min-width:62px;
    max-width:62px;
    height:34px;
    font-size:10.5px;
    padding:0 11px 0 0;
  }
}