body { min-height: 100svh; display: flex; flex-direction: column; }
.header { flex-shrink: 0; }
.header nav a[aria-current="page"] { color: var(--blue); }
.header nav a[aria-current="page"]::after { width: 100%; }
.course-detail { width: 85.6%; margin: 25px auto 70px; flex: 1; color: #222; }
.course-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.86fr); gap: 6%; align-items: start; }
.course-detail-image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.course-detail-content { min-width: 0; }
.course-detail h1 { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; }
.course-description { margin-top: 40px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.8; color: #494949; }
.course-description h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: normal; }
.course-description h3 { margin: 0 0 16px; font-size: 14px; line-height: 1.8; }
.course-description .course-summary { margin-bottom: 24px; }
.course-description .course-curriculum-title { margin-top: 24px; }
.course-description ul { padding-left: 18px; margin: 0 0 28px; }
.course-description li { padding-left: 4px; margin-bottom: 10px; }
.course-back { display: inline-block; margin-top: 12px; padding: 12px 0; font-size: 14px; color: var(--blue); }
.course-detail :is(a, button, input):focus-visible { outline: 3px solid #008dce; outline-offset: 3px; }
@media(max-width:800px) { .course-detail { width: calc(100% - 48px); margin-top: 24px; } .course-detail-layout { grid-template-columns: 1fr; gap: 28px; } .course-detail-image { max-width: 525px; } .course-detail h1 { font-size: 28px; } .course-description { margin-top: 28px; } }