: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; }  .hlb-video-box{
background: transparent !important; border-radius: 0 !important; overflow: hidden; aspect-ratio: 16/9;
width: 100%;
position: relative;
} .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-origin: center;
} .hlb-video-box iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
border:0;
}
.hlb-video-box{
margin-bottom: 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; } .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);
} .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; }
}