/* (CSS는 너의 기존 코드 그대로 + lang2 관련 CSS만 추가) */
.ml-webbook-wrap{max-width:1200px;margin:0 auto;padding:18px;}
.ml-webbook-wrap{--ml-primary:#2F6FED;--ml-soft:rgba(47,111,237,.10);--ml-border:rgba(0,0,0,.08);}

.ml-wb-head{margin-bottom:14px;}
.ml-wb-title{font-size:20px;font-weight:900;letter-spacing:-.2px;}
.ml-wb-hint{margin-top:4px;color:#667085;font-size:13px;}

.ml-wb-subjects{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:14px;}
@media (max-width:1200px){.ml-wb-subjects{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:820px){.ml-wb-subjects{grid-template-columns:repeat(2,minmax(0,1fr));}}

.ml-wb-subject{
  background:#fff;border:1px solid var(--ml-border);border-radius:16px;
  padding:14px 14px 16px;text-decoration:none;display:flex;flex-direction:column;min-height:110px;
  transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.ml-wb-subject:hover{transform:translateY(-1px);border-color:rgba(47,111,237,.35);box-shadow:0 8px 24px rgba(47,111,237,.10);}
.ml-wb-subject-name{font-weight:900;color:#111;font-size:15px;}
.ml-wb-subject-emoji{margin-top:auto;font-size:28px;filter:saturate(1.05);}

.ml-wb-topbar{display:flex;align-items:center;justify-content:space-between;margin:4px 0 14px;}
.ml-wb-back{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ml-primary);text-decoration:none;font-weight:900;
  padding:8px 10px;border-radius:12px;background:var(--ml-soft);border:1px solid rgba(47,111,237,.18);
}
.ml-wb-back:hover{filter:brightness(.98);}
.ml-wb-topbar-title{font-weight:900;color:#111;}

.ml-webbook-langbar{
  display:flex;justify-content:flex-end;align-items:center;gap:10px;
  margin: 6px 0 10px;width:100%;
}
@media (max-width: 820px){
  .ml-webbook-langbar{justify-content:flex-start;flex-wrap:wrap;}
}
.ml-langbtn{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;border-radius:999px;
  padding:8px 12px;
  font-weight:900;font-size:13px;
  cursor:pointer;
}
.ml-langbtn.is-active{
  border-color:rgba(47,111,237,.35);
  background:rgba(47,111,237,.10);
  color:#111;
}

.ml-webbook-searchbar{
  display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--ml-border);
  border-radius:14px;padding:10px 12px;margin-bottom:14px;
}
.ml-webbook-search{flex:1;border:0;outline:none;font-size:14px;background:transparent;}
.ml-webbook-searchbtn{
  height:38px;padding:0 14px;border:0;border-radius:10px;cursor:pointer;
  background:var(--ml-primary);color:#fff;font-weight:800;
}

.ml-webbook-body{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:980px){.ml-webbook-body{grid-template-columns:1fr;}}
.ml-webbook-list,.ml-webbook-detail{
  background:#fff;border:1px solid var(--ml-border);border-radius:18px;min-height:560px;
}
.ml-webbook-list-inner{padding:10px;}
.ml-webbook-item{display:flex;gap:10px;align-items:center;padding:14px;border-radius:12px;cursor:pointer;border:1px solid transparent;}
.ml-webbook-item:hover{background:#f7f8fb;}
.ml-webbook-item.is-active{background:var(--ml-soft);border-color:rgba(47,111,237,.22);}
.ml-webbook-item .num{min-width:92px;font-weight:900;color:#111;}
.ml-webbook-item .title{font-weight:800;color:#111;}
.ml-webbook-item .sub{font-size:12px;color:#667085;margin-top:2px;}

.ml-webbook-detail-inner{padding:16px 18px;}
.ml-webbook-hero{
  width:100%;height:340px;border-radius:14px;background:#f1f3f7;overflow:hidden;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;color:#98a2b3;font-size:13px;
}
.ml-webbook-hero img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  image-rendering:auto;
}

.ml-webbook-h1{font-size:18px;font-weight:900;margin:6px 0 14px;}

.ml-webbook-tabs{display:flex;gap:14px;flex-wrap:wrap;border-bottom:1px solid rgba(0,0,0,.06);margin:10px 0 12px;}
.ml-webbook-tab{padding:10px 2px;font-weight:900;color:#98a2b3;cursor:pointer;border-bottom:2px solid transparent;}
.ml-webbook-tab.is-active{color:#111;border-bottom-color:var(--ml-primary);}
.ml-webbook-panel{display:none;}
.ml-webbook-panel.is-active{display:block;}

.ml-q{padding:12px 0;border-bottom:1px dashed rgba(0,0,0,.08);}
.ml-q .en,.ml-q .ko,.ml-q .sp,.ml-q .fr{
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 2.1 !important;
}
.ml-q .ko,.ml-q .sp,.ml-q .fr{color:#667085;margin-top:4px;}

/* ✅ 언어 선택 전(all): 영어도 회색 + 일반 굵기 (첨부사진1 상태) */
.ml-webbook-wrap[data-lang="all"] .ml-q .en{
  color:#667085 !important;
  font-weight:400 !important;
  font-size: 19px !important;
}

.ml-webbook-wrap[data-lang="en"] .ml-q .en,
.ml-webbook-wrap[data-lang="ko"] .ml-q .ko,
.ml-webbook-wrap[data-lang="sp"] .ml-q .sp,
.ml-webbook-wrap[data-lang="fr"] .ml-q .fr{
  font-weight: 900 !important;
  font-size: 20px !important;
  color: #111 !important;
  line-height: 2.1 !important;
}

.ml-link{display:block;padding:10px 0;border-bottom:1px dashed rgba(0,0,0,.08);color:var(--ml-primary);text-decoration:none;font-weight:800;}
.ml-link:hover{text-decoration:underline;}
.ml-webbook-empty{color:#667085;font-size:14px;line-height:1.6;padding:10px;}

.ml-flag{display:inline-flex;align-items:center;justify-content:center;margin-right:6px;font-size:1.05em;line-height:1;vertical-align:-0.08em;}
.ml-q .ml-flag{margin-right:8px;}

.ml-q{--ml-qnum-w:24px;--ml-qnum-gap:8px;}
.ml-qnum{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--ml-qnum-w);
  margin-right:var(--ml-qnum-gap);
  font-weight:900;color:#98a2b3;
}
.ml-q .en{display:flex;align-items:flex-start;}
.ml-q .ko,.ml-q .sp,.ml-q .fr{
  display:flex;align-items:flex-start;
  padding-left: calc(var(--ml-qnum-w) + var(--ml-qnum-gap));
}

.ml-webbook-wrap{padding-top: 6px !important;margin-top: 0 !important;}
.ml-wb-topbar{ margin: 0 0 10px !important; }
.ml-webbook-langbar{ margin: 0 0 8px !important; }
.ml-webbook-searchbar{ margin-bottom: 10px !important; }

.ml-monitorbtn{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:999px;
  width:40px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-weight:900;
}
.ml-monitorbtn:hover{filter:brightness(.98);}

/* ✅ (추가) 두번째 언어 버튼줄 스타일 */
.ml-webbook-langbar2{
  justify-content:flex-end;
  gap:10px;
  margin: 0 0 10px;
}
.ml-langbar2-label{
  font-size:12px;
  font-weight:900;
  color:#98a2b3;
  margin-right:4px;
}
.ml-langbtn2{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;border-radius:999px;
  padding:8px 12px;
  font-weight:900;font-size:13px;
  cursor:pointer;
}
.ml-langbtn2.is-active{
  border-color:rgba(47,111,237,.35);
  background:rgba(47,111,237,.10);
  color:#111;
}

.ml-wb-modal-backdrop{position:fixed; inset:0;background:rgba(0,0,0,.45);z-index:99998;}
.ml-wb-modal{
  position:fixed; inset: 6vh 8vw;
  background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.10);
  z-index:99999;display:flex;flex-direction:column;overflow:hidden;
}
/* ✅ 🖥️ 모달에서 2개 언어를 보기 좋게(줄 단위) */
.ml-wb-pair-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin: 8px 0;
}
.ml-wb-pair-second{
  opacity: .88;
}
.ml-wb-pair-text{
  flex:1;
}
.ml-wb-pair-hr{
  border:0;
  border-top:1px dashed rgba(0,0,0,.20);
  margin: 14px 0;
}

@media (max-width:820px){.ml-wb-modal{ inset: 4vh 4vw; }}
.ml-wb-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08);}
.ml-wb-modal-title{font-weight:900;font-size:15px;}
.ml-wb-modal-close{border:0;background:transparent;cursor:pointer;font-size:22px;line-height:1;padding:6px 10px;border-radius:10px;}
.ml-wb-modal-close:hover{background:rgba(0,0,0,.04);}
.ml-wb-modal-body{padding:14px 16px;overflow:auto;}
.ml-wb-only-item{padding:10px 0;border-bottom:1px dashed rgba(0,0,0,.10);font-size:16px;line-height:1.55;}
.ml-wb-only-item:last-child{border-bottom:0;}
.ml-wb-only-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  margin-right:10px;
  font-weight:900;font-size:13px;
}

/* 🖥️ 언어별 모아보기(모달) 전체 텍스트 22px */
.ml-wb-modal,
.ml-wb-modal *{
  font-size: 20px !important;
  font-weight: 600;
  color: #111 !important;
}
/* ✅ 🖥️ 모달 - 본문 문장 간 간격(줄간격) +3pt 느낌으로 증가 */
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] .ml-wb-only-item{
  line-height: calc(1.55em + 20px) !important;
}

/* 숫자 뱃지 유지 */
.ml-wb-only-num{
  font-size: 13px !important;
}

/* 본문(관련 글) 텍스트 스타일 */
.ml-webbook-article{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.95;
  color: #111;
}
.ml-webbook-article br{line-height: 2.1;}

/* 🖥️ 모달 탭 버튼만 14px + 회색 */
.ml-wb-modal .ml-wb-modal-tab,
.ml-wb-modal .ml-wb-modal-tab *{
  font-size: 14px !important;
  color: #8A94A6 !important;
  font-weight: 600 !important;
}

/* ✅ 탐색 질문 앞 숫자(1, 2, 3…) 숨기기 */
.ml-qnum{
  display: none !important;
}

/* ✅ 숫자(ml-qnum) 삭제 후: 다른 언어 줄(ko/sp/fr) 들여쓰기 제거해서 국기 앞으로 당기기 */
.ml-q .ko,
.ml-q .sp,
.ml-q .fr{
  padding-left: 0 !important;
}

/* (옵션) 혹시 남아있는 qnum 폭 변수 때문에 정렬이 이상하면 같이 0으로 */
.ml-q{
  --ml-qnum-w: 0px;
  --ml-qnum-gap: 0px;
}

/* ✅ 🖥️ 모아보기(모달)에서 번호(1,2,3…) 숨기기 */
.ml-wb-modal .ml-wb-only-num{
  display:none !important;
}

/* ✅ 본문도 언어 선택에 따라 표시 */
.ml-webbook-wrap[data-lang="en"] .ml-webbook-article{display:block;}
.ml-webbook-wrap[data-lang="ko"] .ml-webbook-article{display:block;}
.ml-webbook-wrap[data-lang="sp"] .ml-webbook-article{display:block;}
.ml-webbook-wrap[data-lang="fr"] .ml-webbook-article{display:block;}

/* ✅ 본문 4개 언어 고정 표시 스타일 */
.ml-webbook-article-all .ml-body-block{
  padding: 12px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.ml-webbook-article-all .ml-body-block:last-child{
  border-bottom: 0;
}
.ml-webbook-article-all .ml-body-head{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  margin-bottom: 6px;
}
.ml-webbook-article-all .ml-body-label{
  font-size: 14px;
  color:#111;
}
.ml-webbook-article-all .ml-body-text{
  font-size: 19px;
  font-weight: 500;
  line-height: 2.0;
  color:#111;
}

/* ✅ 🖥️ 모달에서 한국어 ↔ 스페인어(2개 언어) 줄 사이 간격 줄이기 */
.ml-wb-modal .ml-wb-pair-line{
  margin: 2px 0 !important;      /* 기존 8px → 2px */
}

/* ✅ 두 번째 언어 줄(스페인어/프랑스어)이 위에 너무 떨어져 보이면 더 붙이기 */
.ml-wb-modal .ml-wb-pair-line.ml-wb-pair-second{
  margin-top: 0 !important;
}

/* ✅ 질문 블록(ml-wb-only-item) 자체의 위아래 여백도 조금 줄이기 */
.ml-wb-modal .ml-wb-only-item{
  padding: 6px 0 !important;   /* 기본이 10px쯤이라면 조금 줄어듦 */
}

/* ✅ 🖥️ 모달: 1번째 언어(한국어) 블록 끝 ↔ 2번째 언어(스페인어/프랑스어) 시작 간격 늘리기 */
.ml-wb-modal .ml-wb-only-item .ml-wb-pair-line + .ml-wb-pair-line{
  margin-top: 25px !important;  /* 여기 숫자만 조절하면 됨 (예: 10~20px) */
}

/* ✅ Example Sentences 래퍼: flex 환경에서도 세로로 쌓이게 */
.ml-examples-wrap{
  display: block;
  width: 100%;
}

/* 혹시 상위가 flex여도 내부는 세로 흐름 유지 */
.ml-examples-wrap .ml-q-head,
.ml-examples-wrap .ml-examples-title,
.ml-examples-wrap .ml-examples{
  display: block;
  width: 100%;
}
/* 기본(언어 선택 안했을 때): 아무 박스 없음 */
.ml-examples-wrap{
  width: 100%;
  margin: 14px 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* 언어 선택했을 때만: 하늘색 박스 */
.ml-examples-wrap.is-active{
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(47,111,237,0.08);
  border: 1px solid rgba(47,111,237,0.16);
}

/* 타이틀 */
.ml-examples-title{
  margin: 0 0 12px;
  font-weight: 900;
  font-size: 16px;
  color: #0b1a3a;
}

/* 기본: 평문 */
.ml-examples{
  margin: 0;
}

/* 활성: 커스텀 번호 동그라미 */
.ml-examples-wrap.is-active .ml-examples{
  list-style: none;
  padding: 0;
  counter-reset: item;
}

.ml-examples-wrap.is-active .ml-examples li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  line-height: 1.75;
  font-weight: 600;
}

.ml-examples-wrap.is-active .ml-examples li + li{
  border-top: 1px dashed rgba(47,111,237,0.25);
}

.ml-examples-wrap.is-active .ml-examples li::before{
  content: counter(item);
  counter-increment: item;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  border-radius: 999px;

  background: rgba(47,111,237,0.16);
  border: 1px solid rgba(47,111,237,0.30);
  color: #1c4fd8;

  font-weight: 900;
  font-size: 14px;
  flex: 0 0 28px;
  margin-top: 2px;
}

/* 줄 사이 구분 */
.ml-examples li + li{
  border-top: 1px dashed rgba(47,111,237,0.25);
}

/* counter 초기화 */
.ml-examples{
  counter-reset: item;
}

/* ✅ 선택 언어 강조(bold) 완전 제거: 질문/예문/본문 포함 */
.ml-webbook-wrap .ml-q .en,
.ml-webbook-wrap .ml-q .ko,
.ml-webbook-wrap .ml-q .sp,
.ml-webbook-wrap .ml-q .fr{
  font-weight: 400 !important;
}

/* ✅ 혹시 언어 선택 상태(data-lang=...)에서만 굵게 주는 규칙이 남아있으면 이것도 강제 제거 */
.ml-webbook-wrap[data-lang="en"] .ml-q .en,
.ml-webbook-wrap[data-lang="ko"] .ml-q .ko,
.ml-webbook-wrap[data-lang="sp"] .ml-q .sp,
.ml-webbook-wrap[data-lang="fr"] .ml-q .fr{
  font-weight: 400 !important;
}

/* ✅ 질문(탐색/토론) 영역 글자색: 전부 검정으로 통일 */
.ml-webbook-wrap .ml-q,
.ml-webbook-wrap .ml-q *{
  color: #111 !important;
}

/* ✅ 혹시 '전체(all)' 상태에서만 회색으로 만드는 규칙이 남아있어도 무력화 */
.ml-webbook-wrap[data-lang="all"] .ml-q .en,
.ml-webbook-wrap[data-lang="all"] .ml-q .ko,
.ml-webbook-wrap[data-lang="all"] .ml-q .sp,
.ml-webbook-wrap[data-lang="all"] .ml-q .fr{
  color: #111 !important;
}

/* ✅ 질문/괄호문장 ↔ Example Sentences 사이 간격 넓히기 */
.ml-examples-wrap .ml-q-head{
  margin-bottom: 28px !important;  /* ← 간격 증가 (원하면 18px도 OK) */
}

.ml-examples-wrap .ml-examples-title{
  margin-top: 10px !important;     /* ← 제목 위 간격 */
  margin-bottom: 10px !important;  /* ← 제목 아래 간격(선택) */
}

/* ✅ 한국어 선택 시: 굵기 과하게 보이는 문제 보정 (SemiBold로 제한) */
.ml-webbook-wrap[data-lang="ko"] .ml-q .ko,
.ml-webbook-wrap[data-lang="ko"] .ml-examples-wrap.is-active .ml-q-head,
.ml-webbook-wrap[data-lang="ko"] .ml-examples-wrap.is-active .ml-examples-title,
.ml-webbook-wrap[data-lang="ko"] .ml-examples-wrap.is-active .ml-examples li{
  font-weight: 500 !important; /* 너무 두꺼우면 500으로 바꿔 */
}

/* ✅ en/sp/fr 선택 시: 질문 + 예문(박스 안) 모두 Bold(700) */
.ml-webbook-wrap[data-lang="en"] .ml-q .en,
.ml-webbook-wrap[data-lang="sp"] .ml-q .sp,
.ml-webbook-wrap[data-lang="fr"] .ml-q .fr{
  font-weight: 550 !important;
}

/* ✅ en/sp/fr 선택 시: 박스 안(활성) 질문/제목/예문도 Bold(700) */
.ml-webbook-wrap[data-lang="en"] .ml-examples-wrap.is-active .ml-q-head,
.ml-webbook-wrap[data-lang="sp"] .ml-examples-wrap.is-active .ml-q-head,
.ml-webbook-wrap[data-lang="fr"] .ml-examples-wrap.is-active .ml-q-head,
.ml-webbook-wrap[data-lang="en"] .ml-examples-wrap.is-active .ml-examples-title,
.ml-webbook-wrap[data-lang="sp"] .ml-examples-wrap.is-active .ml-examples-title,
.ml-webbook-wrap[data-lang="fr"] .ml-examples-wrap.is-active .ml-examples-title,
.ml-webbook-wrap[data-lang="en"] .ml-examples-wrap.is-active .ml-examples li,
.ml-webbook-wrap[data-lang="sp"] .ml-examples-wrap.is-active .ml-examples li,
.ml-webbook-wrap[data-lang="fr"] .ml-examples-wrap.is-active .ml-examples li{
  font-weight: 550 !important;
}

/* ✅ 모달 Example Sentences 아코디언 */
.ml-wb-modal .ml-ex-acc-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  margin: 12px 0 10px;
}

.ml-wb-modal .ml-ex-acc-toggle[aria-expanded="true"]{
  background: #f5f8ff;
  border-color: #c9d8ff;
}

.ml-wb-modal .ml-ex-acc-body{
  padding: 6px 2px 14px;
}

.ml-wb-modal .ml-ex-before{
  margin-bottom: 8px;
}

/* ✅ 모달 예시 번호 리스트 */
.ml-wb-modal .ml-examples--modal{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.ml-wb-modal .ml-examples--modal li{
  padding: 10px 0;
  border-top: 1px dashed rgba(0,0,0,0.12);
}

.ml-wb-modal .ml-examples--modal li:first-child{
  border-top: none;
}

.ml-wb-modal .ml-ex-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(120,160,255,0.8);
  background: rgba(120,160,255,0.12);
  font-weight: 700;
  margin-right: 8px;
}

/* ✅ 모달(선택 언어만 모아보기) 안 교재 텍스트는 자동 번역 금지 */
.ml-wb-modal .notranslate,
.ml-wb-modal [translate="no"]{
  -webkit-user-select: text;
}

/* ✅ 모달: 예시문장 "한 줄(li)"만 hover 배경색 */
.ml-wb-modal .ml-examples > li{
  border-radius: 12px;
  padding: 8px 10px;
  transition: background .12s ease;
}

/* 리스트 전체 블록에 걸린 hover(기존 B코드)가 있으면 무력화 */
/* ✅ 예시문장 때문에 넣었던 "블록 전체 hover 무력화"는 본문(body)엔 적용하지 않기 */
.ml-wb-modal .ml-wb-modal-panel:not([data-mpanel="body"]) .ml-wb-only-item:hover{
  background: transparent !important;
}


.ml-wb-modal .ml-examples > li:hover{
  background: rgba(47,111,237,0.10) !important;
}

/* ✅ 예시문장이 div row 구조일 때 대비 */
.ml-wb-modal .ml-examples .ml-ex-row{
  border-radius: 12px;
  padding: 8px 10px;
  transition: background .12s ease;
}
.ml-wb-modal .ml-examples .ml-ex-row:hover{
  background: rgba(47,111,237,0.10) !important;
}

/* ✅ 모달: 예시문장 "각 줄" hover (태그/클래스 몰라도 적용되게) */
.ml-wb-modal .ml-examples > *{
  display: block;
  width: 100%;
  border-radius: 12px;
  padding: 8px 10px;
  transition: background .12s ease;
}

.ml-wb-modal .ml-examples > *:hover{
  background: rgba(47,111,237,0.10) !important;
}

/* ✅ 혹시 한 줄이 내부 래퍼로 한 번 더 감싸진 구조까지 대비 */
.ml-wb-modal .ml-examples *{
  /* 아래 hover가 먹게끔 방해 요소 최소화 */
}

.ml-wb-modal .ml-examples *:hover{
  /* 너무 광범위해지는 걸 막기 위해, 실제 배경은 '직계 자식'에만 주는 위 규칙이 우선 */
}

/* ✅ 모달: "Example Sentences" 버튼 hover */
.ml-wb-modal button:hover,
.ml-wb-modal a:hover,
.ml-wb-modal .ml-btn:hover,
.ml-wb-modal .ml-ex-toggle:hover,
.ml-wb-modal .ml-examples-btn:hover,
.ml-wb-modal [data-action="toggle-examples"]:hover{
  filter: brightness(0.98);
}

/* ✅ Example Sentences 버튼처럼 보이는 pill/칩 형태 요소에만 좀 더 확실하게 */
.ml-wb-modal button,
.ml-wb-modal a,
.ml-wb-modal .ml-btn,
.ml-wb-modal .ml-ex-toggle,
.ml-wb-modal .ml-examples-btn,
.ml-wb-modal [data-action="toggle-examples"]{
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.ml-wb-modal button:hover,
.ml-wb-modal a:hover,
.ml-wb-modal .ml-btn:hover,
.ml-wb-modal .ml-ex-toggle:hover,
.ml-wb-modal .ml-examples-btn:hover,
.ml-wb-modal [data-action="toggle-examples"]:hover{
  background: rgba(47,111,237,0.10) !important;
  border-color: rgba(47,111,237,0.35) !important;
  transform: translateY(-1px);
}

/* ✅ Example Sentences 버튼 텍스트 크기 줄이기 */
.ml-wb-modal button,
.ml-wb-modal a,
.ml-wb-modal .ml-btn,
.ml-wb-modal .ml-ex-toggle,
.ml-wb-modal .ml-examples-btn,
.ml-wb-modal [data-action="toggle-examples"]{
  font-size: 0.875em !important; /* 약간 작게 */
}


/* ✅ 본문(Article) 영역: 줄(row) 단위 hover 배경 */
.ml-webbook-wrap .ml-wb-article .ml-wb-pair-line,
.ml-webbook-wrap .ml-wb-article .ml-examples > *,
.ml-webbook-wrap .ml-wb-article p,
.ml-webbook-wrap .ml-wb-article li{
  border-radius: 12px;
  padding: 6px 8px;
  transition: background .12s ease;
}

.ml-webbook-wrap .ml-wb-article .ml-wb-pair-line:hover,
.ml-webbook-wrap .ml-wb-article .ml-examples > *:hover,
.ml-webbook-wrap .ml-wb-article p:hover,
.ml-webbook-wrap .ml-wb-article li:hover{
  background: rgba(47,111,237,0.10) !important;
}

/* ✅ 모달 본문 탭(Article) : 번호 문장 한 줄(li) hover */
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] ol > li,
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] ul > li{
  display: block;
  width: 100%;
  border-radius: 12px;
  padding: 10px 12px;
  transition: background .12s ease;
}

.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] ol > li:hover,
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] ul > li:hover{
  background: rgba(47,111,237,0.10) !important;
}


/* ✅ 모달 본문 탭: p/div 같은 줄 요소 hover (보조) */
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] p,
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] .ml-wb-line,
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] .ml-wb-row{
  border-radius: 12px;
  padding: 10px 12px;
  transition: background .12s ease;
}

.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] p:hover,
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] .ml-wb-line:hover,
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] .ml-wb-row:hover{
  background: rgba(47,111,237,0.10) !important;
}

/* ✅ hover가 자식 요소에 가로채일 때 대비 */
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="a"] ol > li *{
  pointer-events: none;
}

/* ✅ 모달 본문(body): 문장(한 줄 = .ml-wb-only-item) 단위로 hover */
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] .ml-wb-only-item{
  border-radius: 14px;
  padding: 10px 12px !important;
  transition: background .12s ease;
}

.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] .ml-wb-only-item:hover{
  background: rgba(47,111,237,0.10) !important;
}

/* ✅ 모달 본문: 언어별 분리 레이아웃 */
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] .ml-wb-body-split{
  display: block;
}

.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] .ml-wb-body-divider{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 18px 0;
}

/* (이미 너가 적용한) 문장별 hover는 .ml-wb-only-item:hover 규칙이 계속 먹음 */


/* ✅ 본문 숫자 동그라미 테두리 */
.ml-wb-modal .ml-num-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid rgba(47,111,237,0.45);
  background: rgba(47,111,237,0.08);
  font-weight: 700;
  line-height: 1;
  margin-right: 8px;
}

/* ✅ 모달 본문: "1,2,3..." 숫자 동그라미 테두리 */
.ml-wb-modal .ml-body-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid rgba(47,111,237,0.35);
  background: rgba(47,111,237,0.06);
  margin-right:10px;

  font-weight:900 !important;
  font-size:16px !important;  /* 전체 22px !important 덮어쓰기 */
  line-height:1 !important;
  color:#111 !important;
  flex: 0 0 auto;
}


/* ✅ 본문(모달)에서 문장 안쪽의 추가 분리선 제거 */
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] .ml-wb-only-item .ml-q{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* 혹시 내부에 hr/divider가 들어가면 제거 */
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] hr,
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] .ml-divider,
.ml-wb-modal .ml-wb-modal-panel[data-mpanel="body"] .ml-line{
  border: 0 !important;
  height: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ✅ 본문 페이지 숫자 동그라미 */
.ml-page-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:2px solid rgba(47,111,237,0.35);
  background: rgba(47,111,237,0.06);
  font-weight:800;
  font-size:14px;
  line-height:1;
  margin-right:10px;
  transform: translateY(-1px);
}

/* ✅ (br 줄 분해 케이스) 각 줄 간격 조금 보기 좋게 */
.ml-body-line{
  padding: 6px 0;
}

/* ✅ 좌측 목록 토글 버튼(목록 안쪽) */
.ml-webbook-list{ position: relative; } /* 버튼 absolute 기준 */
.ml-wb-list-toggle{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
}

/* ✅ 접혔을 때: 왼쪽 리스트 숨기고, 오른쪽만 1열 */
.ml-webbook-wrap.is-list-collapsed .ml-webbook-body{
  grid-template-columns: 1fr !important;
}
.ml-webbook-wrap.is-list-collapsed .ml-webbook-list{
  display: none !important;
}

/* ✅ 접혔을 때 보이는 '펼치기 핸들' */
.ml-wb-list-handle{
  display: none; /* 기본은 숨김 */
}
.ml-webbook-wrap.is-list-collapsed .ml-wb-list-handle{
  display: inline-flex !important;
  position: absolute;
  left: -10px;     /* 오른쪽 패널 왼쪽에 살짝 걸치게 */
  top: 180px;      /* 원하는 위치로 조절 가능 */
  z-index: 10;
  width: 34px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
}

/* 핸들이 detail 안에서 absolute가 되도록 */
.ml-webbook-detail{ position: relative; }


/* ✅ 좌측 목록 접기 버튼(눈에 띄게 + 중앙정렬) */
.ml-wb-list-toggle{
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;

  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  border: 1px solid rgba(47,111,237,0.35);
  background: rgba(47,111,237,0.14); /* ✅ 배경색 */
  color: #2f6fed;                     /* ✅ 글자색 */
  cursor: pointer;

  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  padding: 0;                          /* ✅ 중앙정렬 방해 제거 */
}

.ml-wb-list-toggle:hover{
  background: rgba(47,111,237,0.22);
  border-color: rgba(47,111,237,0.55);
}

/* ✅ 접혔을 때 펼치기 핸들(눈에 띄게 + 중앙정렬) */
.ml-wb-list-handle{
  display: none;
}

.ml-webbook-wrap.is-list-collapsed .ml-wb-list-handle{
  display: inline-flex !important;

  position: absolute;
  left: -12px;
  top: 180px;
  z-index: 10;

  width: 36px;
  height: 64px;

  align-items: center;
  justify-content: center;

  border-radius: 14px;
  border: 1px solid rgba(47,111,237,0.35);
  background: rgba(47,111,237,0.14);
  color: #2f6fed;

  cursor: pointer;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.ml-webbook-wrap.is-list-collapsed .ml-wb-list-handle:hover{
  background: rgba(47,111,237,0.22);
  border-color: rgba(47,111,237,0.55);
}

/* ✅ 1) 좌측 블럭(리스트 전체 컨테이너)을 버튼 기준점으로 만들기 */
.ml-wb-left,
.ml-webbook-left,
.ml-webbook-sidebar,
.ml-wb-list-col {
  position: relative;
}

/* ✅ 2) << 토글 버튼을 좌측 블럭 "상단 우측(빨간 위치)"으로 이동 */
.ml-wb-left .ml-wb-list-toggle,
.ml-webbook-left .ml-wb-list-toggle,
.ml-webbook-sidebar .ml-wb-list-toggle,
.ml-wb-list-col .ml-wb-list-toggle{
  position: absolute;
  top: 12px;      /* ← 위아래 위치 조절 */
  right: 12px;    /* ← 좌우 위치 조절 */
  z-index: 20;
}

/* ✅ 3) 버튼이 내용(검색창/상단)과 겹치면 좌측 블럭에 여백 추가 */
.ml-wb-left,
.ml-webbook-left,
.ml-webbook-sidebar,
.ml-wb-list-col{
  padding-top: 44px;  /* 필요할 때만 유지 */
}

/* 좌측 리스트 상단 헤더(버튼 자리) */
.ml-wb-left-header{
  position: relative;
  height: 44px;             /* 상단 여백 */
}

/* << 버튼 스타일 & 위치 */
.ml-wb-left-header .ml-wb-list-toggle,
.ml-wb-left-header #ml-wb-list-toggle{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);   /* ✅ 버튼 가운데 정렬 */
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #2f6fed;           /* ✅ 눈에 띄는 색 */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  z-index: 50;
  cursor: pointer;
}

/* 혹시 기존 카드에 overflow:hidden 이면 버튼이 잘리는 문제 방지 */
.ml-wb-lesson-card,
.ml-webbook-lesson-card{
  overflow: visible !important;
}


/* 좌측 컬럼 상단에 버튼 자리 확보 */
.ml-wb-left-header{
  position: relative;
  height: 46px;
  margin-bottom: 6px;
}

/* 새로 만든 토글 버튼 */
.ml-wb-fake-toggle{
  position: absolute;
  top: 50%;
  right: 12px;                 /* ✅ 빨간 위치(상단 오른쪽) */
  transform: translateY(-50%); /* ✅ 버튼 중앙 */
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(47,111,237,.25);
  background: rgba(47,111,237,.12); /* ✅ 눈에 띄게 */
  color: #2f6fed;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.ml-wb-fake-toggle:hover{
  background: rgba(47,111,237,.18);
}

/* 원래(기존) 버튼 숨김 처리 */
.ml-wb-hide-original-toggle{
  display: none !important;
}

/* ✅ (1) 좌측 리스트 영역에 위쪽 여백 추가: 초록색 표시된 간격 */
.ml-webbook-left,
.ml-wb-left,
.ml-webbook-sidebar,
.webbook-left,
.webbook-sidebar{
  position: relative;
}

/* ✅ (2) 수업 리스트(카드/목록) 전체를 아래로 내리기 (버튼 공간 확보) */
.ml-webbook-left .ml-wb-lesson-list,
.ml-wb-left .ml-wb-lesson-list,
.ml-webbook-sidebar .ml-wb-lesson-list,
.webbook-left .ml-wb-lesson-list,
.webbook-sidebar .ml-wb-lesson-list,
.ml-webbook-left .ml-webbook-lesson-list,
.ml-wb-left .ml-webbook-lesson-list{
  margin-top: 34px !important; /* ← 이 숫자를 키우면 간격이 더 커짐 */
}

/* ✅ (3) 만약 리스트 래퍼 클래스가 다르면(예: ul/div) 첫 카드에 직접 여백 */
.ml-webbook-left .ml-wb-lesson-item:first-child,
.ml-wb-left .ml-wb-lesson-item:first-child,
.ml-webbook-left .lesson-item:first-child,
.ml-wb-left .lesson-item:first-child{
  margin-top: 34px !important;
}

/* ✅ 왼쪽 블럭 상단에 여백을 강제로 만들기 (가짜 spacer) */
.ml-webbook-left::before,
.ml-wb-left::before,
.ml-webbook-sidebar::before,
.webbook-left::before,
.webbook-sidebar::before,
#ml-webbook-left::before,
#ml-wb-left::before{
  content: "";
  display: block;
  height: 44px; /* ← 여백 크기: 44~70px로 조절 */
}

/* 혹시 ::before가 막히면 padding-top으로도 한 번 더 */
.ml-webbook-left,
.ml-wb-left,
.ml-webbook-sidebar,
.webbook-left,
.webbook-sidebar,
#ml-webbook-left,
#ml-wb-left{
  padding-top: 44px !important;
}