/* =========================================================
   HLB Daily Panel — Figma 50:50 (SMALL & NO OVERLAP)
   - 배경: #F2F9FF / 타이틀: #712CF2
   - 제목 폰트: 24px 정도
   - 말풍선 원/꼬리: 작게(겹침 방지)
   - 중앙 라인: 타이틀부터 아래로 쭉
========================================================= */

/* ===== WRAP ===== */
.hlb-daily-wrap{
  max-width: 880px !important;
  margin: 0 auto !important;

  background: #F2F9FF !important;
  border-radius: 26px !important;
  padding: 18px !important;
  box-sizing: border-box !important;

  font-family: inherit !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.10) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* ✅ 중앙 세로 라인 (위~아래 쭉) */
.hlb-daily-wrap::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:18px !important;
  bottom:18px !important;
  width:2px !important;
  transform: translateX(-1px) !important;
  background: rgba(113,44,242,.28) !important;
  pointer-events:none !important;
  z-index: 1 !important;
}

/* =========================================================
   TOPBAR
========================================================= */
.hlb-daily-wrap .hlb-daily-topbar{
  height: 64px !important;                 /* ✅ 작게 */
  background: #712CF2 !important;
  border-radius: 26px 26px 0 0;  /* ✅ 하단 라운드 제거 */

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;

  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

/* 타이틀 바 중앙 라인(흰색) */
.hlb-daily-wrap .hlb-daily-topbar::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:12px !important;
  bottom:12px !important;
  width:2px !important;
  transform: translateX(-1px) !important;
  background: rgba(255,255,255,.55) !important;
  pointer-events:none !important;
}

/* 각 절반 */
.hlb-daily-wrap .hlb-topcell{
  min-width: 0 !important;
  height: 100% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 14px !important;

  padding: 0 18px !important;
  box-sizing: border-box !important;

  background: transparent !important;
  color: #fff !important;
}

/* 오늘의 영상/퀴즈 (✅ 24px) */
.hlb-daily-wrap .hlb-topcell-ko{
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.4px !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Video/Quiz 텍스트 */
.hlb-daily-wrap .hlb-topcell-pill{
  position: relative !important;

  font-size: 20px !important;           
  font-weight: 900 !important;
  line-height: 1 !important;
  color: rgba(255,255,255,.32) !important;

  white-space: nowrap !important;
}

/* 말풍선 원: ✅ 작게(겹침 방지) */
.hlb-daily-wrap .hlb-topcell-pill::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width: 54px !important;
  height: 54px !important;
  transform: translate(-50%,-50%) !important;
  background: rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  z-index: -1 !important;
}

/* 말풍선 꼬리(작게) */
.hlb-daily-wrap .hlb-topcell-pill::after{
  content:"" !important;
  position:absolute !important;
  right: -6px !important;
  bottom: -10px !important;
  width: 16px !important;
  height: 16px !important;
  background: rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  z-index: -1 !important;
}

/* =========================================================
   BODY 50:50
========================================================= */
.hlb-daily-wrap .hlb-daily-body{
  margin-top: 14px !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;

  align-items: stretch !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 카드 공통(바깥 연한 레이어) */
.hlb-daily-wrap .hlb-card{
  background: rgba(255,255,255,.55) !important;
  border-radius: 22px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* =========================================================
   LEFT: VIDEO
========================================================= */
.hlb-daily-wrap .hlb-video-box{
  background: #111827 !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  aspect-ratio: 16 / 9 !important;
  min-height: 190px !important;          /* ✅ 줄임 */

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.hlb-daily-wrap .hlb-video-thumb{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  position:relative !important;
  cursor:pointer !important;
  display:block !important;
}

.hlb-daily-wrap .hlb-video-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.hlb-daily-wrap .hlb-video-box iframe{
  width:100% !important;
  height:100% !important;
  min-height:190px !important;
  display:block !important;
  border:0 !important;
}

/* 재생 버튼도 작게 */
.hlb-daily-wrap .hlb-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform: translate(-50%,-50%) !important;

  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;

  background: rgba(59,130,246,.55) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  color:#fff !important;
  font-size: 24px !important;
  line-height:1 !important;
}

.hlb-daily-wrap .hlb-video-text{
  margin-top: 12px !important;
  background:#fff !important;
  border-radius: 18px !important;
  padding: 16px !important;
  box-shadow: 0 14px 30px rgba(17,24,39,.10) !important;

  position: relative !important;
  min-height: 92px !important;           /* ✅ 줄임 */
}

.hlb-daily-wrap .hlb-video-title{
  font-size: 22px !important;            /* ✅ 너무 크지 않게 */
  font-weight: 900 !important;
  color:#712CF2 !important;
  line-height: 1.1 !important;
  padding-right: 70px !important;
}

.hlb-daily-wrap .hlb-video-sub{
  margin-top: 8px !important;
  font-size: 14px !important;
  color:#6B7280 !important;
  font-weight: 800 !important;
  padding-right: 70px !important;
}

/* 캐릭터도 작게 */
.hlb-daily-wrap .hlb-doodle{
  position:absolute !important;
  right: 12px !important;
  bottom: 8px !important;
  width: 68px !important;
  height: 68px !important;
  object-fit: contain !important;
  opacity: .95 !important;
  pointer-events:none !important;
}

/* =========================================================
   RIGHT: QUIZ (underline = 질문 텍스트 길이만 / 바닥 여백 확보)
========================================================= */

/* 퀴즈 카드(필요하면 유지) */
.hlb-daily-wrap .hlb-card.quiz,
.hlb-daily-wrap .hlb-card.hlb-quiz,
.hlb-daily-wrap .hlb-card.hlb-card-quiz{
  background: #fff !important;
  padding: 18px !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.10) !important;

  /* ✅ 바닥 기준 배치용 */
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding-bottom: 22px !important; /* ✅ 바닥 여유(선택지/결과 공간) */
}

/* ✅ 문제 텍스트 + 밑줄: "텍스트 폭만큼만" 중앙정렬 */
.hlb-daily-wrap .hlb-quiz-top{
  font-weight: 900 !important;
  font-size: 18px !important;
  color:#111827 !important;

  /* 🔥 핵심: width 없애고, 텍스트 폭만큼만 라인 */
  display: table !important;      /* inline-block보다 중앙정렬 안정적 */
  width: auto !important;
  margin: 0 auto 12px !important; /* 중앙정렬 + 아래 여백 */
  padding-bottom: 8px !important;

  border-bottom: 2px solid rgba(17,24,39,.70) !important;
  text-align: center !important;
}

/* 문장 */
.hlb-daily-wrap .hlb-quiz-sentence{
  text-align:center !important;
  font-weight: 950 !important;
  color:#712CF2 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  margin-top: 8px !important;
}

.hlb-daily-wrap .hlb-blank{
  display:inline-block !important;
  width: 88px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: rgba(113,44,242,.18) !important;
  vertical-align: -5px !important;
  margin: 0 8px !important;
}

.hlb-daily-wrap .hlb-quiz-hint{
  margin-top: 10px !important;
  text-align:center !important;
  color:#6B7280 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

/* ✅ 중간 내용이 길어져도 선택지는 아래로 내려가도록 */
.hlb-daily-wrap .hlb-quiz-spacer{
  flex: 1 1 auto !important;
}

/* 보기 3개 가로 + 아래로 “붙게” */
.hlb-daily-wrap .hlb-choices{
  margin-top: auto !important;     /* ✅ 카드 바닥으로 밀착 */
  padding-top: 52px !important;    /* ✅ 위쪽 여백 */
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* 버튼 */
.hlb-daily-wrap .hlb-choice{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#F2F2F2 !important;
  border:0 !important;
  border-radius: 16px !important;

  min-height: 78px !important;   /* ✅ 살짝 더 “뚱뚱” */
  padding: 14px !important;

  font-weight: 900 !important;
  font-size: 18px !important;
  color:#111827 !important;

  cursor:pointer !important;
  transition: transform .12s ease, filter .12s ease !important;
}

.hlb-daily-wrap .hlb-choice:hover{
  transform: translateY(-1px) !important;
  filter: brightness(0.98) !important;
}

.hlb-daily-wrap .hlb-choice.is-correct{
  outline: 3px solid rgba(34,197,94,.35) !important;
}
.hlb-daily-wrap .hlb-choice.is-wrong{
  outline: 3px solid rgba(239,68,68,.30) !important;
}

/* ✅ 결과: 선택지 아래에 고정 공간 확보(없어도 레이아웃 안 흔들림) */
.hlb-daily-wrap .hlb-quiz-result{
  margin-top: 12px !important;
  text-align:center !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  color:#111827 !important;
  min-height: 16px !important;   /* ✅ 결과가 없을 때도 공간 유지 */
}


/* ✅ 캐릭터(낙서) 이미지 숨김 */
.hlb-doodle{ display:none !important; }
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 860px){
  .hlb-daily-wrap::after{ display:none !important; }

  .hlb-daily-wrap .hlb-daily-body{
    grid-template-columns: 1fr !important;
  }

  .hlb-daily-wrap .hlb-daily-topbar{
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .hlb-daily-wrap .hlb-daily-topbar::after{ display:none !important; }

  .hlb-daily-wrap .hlb-topcell{
    justify-content:center !important;
    padding: 14px 14px !important;
  }
}
@media (max-width: 520px){
  .hlb-daily-wrap .hlb-choices{
    grid-template-columns: 1fr !important;
  }
}