:root{
  --hlb-purple:#6D28D9;
  --hlb-text:#111827;
  --hlb-card-radius:26px;
  --hlb-shadow: 0 14px 44px rgba(17,24,39,0.10);
}

.hlb-daily-wrap{ width:100%; max-width:1100px; margin:0 auto; }
.hlb-daily-body{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }

.hlb-card{
  background:#fff;
  border-radius: var(--hlb-card-radius);
  box-shadow: var(--hlb-shadow);
  overflow:hidden;
  min-height: 480px;
	
}
@media (max-width: 900px){
  .hlb-card{ min-height: 0; }    
}

.hlb-card-topbar{
  background: var(--hlb-purple);
  color:#fff;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  border-top-left-radius: var(--hlb-card-radius);
  border-top-right-radius: var(--hlb-card-radius);
}

.hlb-top-ko{ font-weight:900; font-size:26px; letter-spacing:-0.4px; }

.hlb-top-en{
  position:relative;
  font-weight:900;
  font-size:20px;
  opacity:0.30;
  padding-right:12px;
}
.hlb-top-en::before{
  content:"";
  position:absolute;
  right:-10px; top:50%;
  transform:translateY(-50%);
  width:54px; height:54px;
  border-radius:999px;
  background:rgba(255,255,255,0.22);
}
.hlb-top-en::after{
  content:"";
  position:absolute;
  right:18px; top:18%;
  width:18px; height:18px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
}

.hlb-card-inner{ padding: 26px 18px 18px 18px; }

/* VIDEO 16:9 강제 */
/* ✅ 파란/검은 배경 제거: 프레임 자체만 보이게 */
.hlb-video-box{
  background: transparent !important; /* 배경 제거 */
  border-radius: 0 !important;        /* 라운드 필요없으면 */
  overflow: hidden;                    /* 프레임 밖은 잘라내기 */
  aspect-ratio: 16/9;
  width: 100%;
  position: relative;
}

/* ✅ 썸네일/iframe은 프레임에 꽉 차게 */
.hlb-video-thumb,
.hlb-video-thumb img,
.hlb-video-box iframe{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ✅ 썸네일 크롭(레터박스 있으면 살짝 확대해서 제거) */
.hlb-video-thumb img{
  object-fit: cover;
  object-position: center;
 /* transform: scale(1.05);   1.05~1.20 조절 */
  transform-origin: center;
}

/* ✅ 재생 후 iframe도 프레임에 꽉 차게 */
.hlb-video-box iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
}
.hlb-video-box{
  margin-bottom: 28px;   /* 12~28px 사이로 조절 */
}
.hlb-play{
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px;
  border-radius:18px;
  background:rgba(59,130,246,0.72);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px;
}
.hlb-video-text{ margin-top:14px; position:relative; padding-right:90px; }
.hlb-video-title{ font-size:30px; font-weight:900; color:var(--hlb-purple); letter-spacing:-0.6px; line-height:1.12; }
.hlb-video-sub{ margin-top:8px; font-size:16px; font-weight:800; color:var(--hlb-text); }
.hlb-doodle{ width:140px; position:absolute; right:0; bottom:-14px; opacity:0.95; pointer-events:none; }

/* QUIZ */
.hlb-quiz-card{ text-align:center; }
.hlb-quiz-top{
  display:inline-block;
  font-size:15px; font-weight:900;
  color:var(--hlb-text);
  padding-bottom:10px;
  border-bottom:3px solid rgba(17,24,39,0.85);
}
.hlb-quiz-sentence{
  margin-top:18px;
  font-size:34px; font-weight:900;
  color:var(--hlb-purple);
  letter-spacing:-0.6px;
  line-height:1.18;
}
.hlb-blank{
  display:inline-block;
  width:140px; height:34px;
  border-radius:10px;
  background:rgba(109,40,217,0.20);
  vertical-align:middle;
  margin:0 10px;
  transform:translateY(-4px);
}
.hlb-quiz-hint{
  margin-top:14px;
  font-size:16px;
  font-weight:800;
  color:rgba(17,24,39,0.70);
}

/* choices 작게 */
.hlb-choices{ margin-top:18px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.hlb-choice{
  width:120px; height:70px;
  border-radius:16px;
  border:0;
  background:rgba(17,24,39,0.04);
  box-shadow:inset 0 0 0 2px rgba(17,24,39,0.06);

  font-size:16px; font-weight:900;
  padding:0 12px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  display:flex; align-items:center; justify-content:center;
  color:var(--hlb-text);
  cursor:pointer;
  transition:transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.hlb-choice:hover{
  transform:translateY(-2px);
  background:rgba(109,40,217,0.10);
  box-shadow:inset 0 0 0 2px rgba(109,40,217,0.22);
}

/* ✅ 오답 표시는 선택한 버튼만 */
.hlb-choice.is-wrong{
  background:rgba(239,68,68,0.08);
  box-shadow:inset 0 0 0 3px rgba(239,68,68,0.40);
}
.hlb-choice.is-correct{
  background:rgba(34,197,94,0.10);
  box-shadow:inset 0 0 0 3px rgba(34,197,94,0.55);
}
.hlb-choice.is-disabled{ opacity:0.65; cursor:default; transform:none !important; }

/* ✅ 높이 고정: 메시지로 길이 늘지 않게 */
.hlb-quiz-result{ margin-top:12px; min-height:22px; font-size:14px; font-weight:900; }
.hlb-quiz-answer{ min-height:22px; font-size:13px; font-weight:900; color:rgba(17,24,39,0.75); }

.hlb-retry{
  margin-top:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(109,40,217,0.18);
  background:rgba(109,40,217,0.08);
  color:var(--hlb-purple);
  font-weight:900;
  cursor:pointer;
}
.hlb-retry:hover{
  background:rgba(109,40,217,0.12);
}

@media (max-width: 900px){
  .hlb-daily-body{ grid-template-columns:1fr; gap:14px; }
  .hlb-top-ko{ font-size:22px; }
  .hlb-video-title{ font-size:24px; }
  .hlb-quiz-sentence{ font-size:28px; }
  .hlb-choice{ width:46%; height:68px; font-size:15px; }
  .hlb-blank{ width:120px; height:30px; }
}