/* 온라인 강좌 (/courses — 시안 voicecheck-courses). 공통은 edu.css
   강좌 한 장이 이 페이지의 전부 — 표지는 코발트(강의 막대 파형), 나머지는 조용히 */
.course { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-radius: 28px; overflow: hidden; background: var(--white); box-shadow: var(--panel-shadow); }

.cover { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: clamp(28px, 3.4vw, 44px); background: var(--cobalt); color: #fff; }
.cover h2 { font-size: var(--fs-3xl); line-height: 1.15; font-weight: 750; letter-spacing: -.05em; }
@media (hover: hover) { .cover h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } }
.cover .hl { margin-top: 10px; font-size: var(--fs-m); color: rgba(255, 255, 255, .82); }
.cover-wave { margin-top: auto; padding-top: 48px; }
.cover .wave { display: flex; justify-content: space-between; height: clamp(150px, 15vw, 210px); color: #fff; --bw: 14px; --bg: 8px; }
.cover .wave .wg i.p { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9); }
.cover .wave { --wave-end: #5FE0C0; }   /* 마지막 강의 — 흰 로고의 마지막 막대 색 */
.cover .wave .wg i.p.end { box-shadow: inset 0 0 0 2px currentColor; }
.cover figcaption { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); color: rgba(255, 255, 255, .78); }
.cover figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.cover figcaption i { width: 7px; height: 16px; border-radius: 999px; background: #fff; }
.cover figcaption i.p { background: none; box-shadow: inset 0 0 0 1.5px #fff; }
.cover figcaption i.end { background: #5FE0C0; }
.cover figcaption i.end.p { background: none; box-shadow: inset 0 0 0 1.5px #5FE0C0; }
.cover :focus-visible { outline-color: #fff; }

.c-body { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 44px); }
.c-body > p { font-size: var(--fs-m); line-height: 1.75; color: var(--ink-2); }
.c-gets { margin-top: 22px; display: grid; gap: 9px; font-size: var(--fs-s); }
.c-gets li { display: flex; gap: 10px; align-items: center; }
.units { margin-top: 28px; border-top: 1px solid var(--line); }
.units li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-s); }
.units .n { font-weight: 650; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.units .t { font-weight: 650; }
.units .c { color: var(--slate); font-variant-numeric: tabular-nums; }
.c-foot { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.c-foot p { font-size: var(--fs-s); color: var(--slate); }
.c-foot p b { display: block; color: var(--ink); font-weight: 650; }

/* 혼자 연습한 다음에는 — 카드 없이 세 줄 */
.next-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; }
.next-h p { font-size: var(--fs-s); color: var(--ink-2); max-width: 34em; }
.next { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--line); }
.next li { display: flex; flex-direction: column; padding-top: 26px; }
.next h3 { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.03em; }
.next p { margin-top: 8px; font-size: var(--fs-s); line-height: 1.75; color: var(--ink-2); }
.next .go-links { margin-top: 16px; }

@media (prefers-reduced-motion: no-preference) {
    .cover .wg i { transform-origin: 50% 50%; animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(120ms + var(--i) * 45ms); }
    @keyframes rise { from { transform: scaleY(.12); opacity: .35; } }
}
@media (max-width: 960px) {
    .course { grid-template-columns: minmax(0, 1fr); }
    .cover-wave { padding-top: 40px; }
}
@media (max-width: 860px) {
    .next { grid-template-columns: minmax(0, 1fr); border-top: 0; }
    .next li { padding: 22px 0 24px; border-top: 1px solid var(--line); }
}
/* 모바일 덜어내기 */
@media (max-width: 760px) {
    .c-gets { margin-top: 0; }
    .cover h2 a { display: inline-block; padding: 4px 0; }
    .next { margin-top: 20px; }
    .next li { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 10px 0; }
    .next h3 { font-size: var(--fs-m); }
    .next p:not(.go-links) { display: none; }
    .next .go-links { margin-top: 0; }
}
@media (max-width: 480px) {
    .cover .wave { height: 132px; --bw: 9px; --bg: 5px; }
    .c-foot { flex-direction: column; align-items: stretch; }
    .c-foot .btn { width: 100%; }
}

/* 실제 화면 보조 — 정가 줄 긋기 · 강좌 없음 */
.c-foot .was { margin-right: 6px; font-weight: 500; color: var(--slate); text-decoration: line-through; }
.c-empty { margin-top: clamp(40px, 5vw, 56px); padding: 48px 24px; border-radius: 22px; background: var(--white); box-shadow: var(--panel-shadow); text-align: center; color: var(--slate); }