.course-tabs { display: grid; grid-template-columns: .75fr 1fr 1.35fr 1.1fr; background: #fff; padding: 0 18px; }
.course-tabs .tab { font-size: 18px; padding: 16px 3px; min-width: 0; white-space: nowrap; }
.course-tabs .tab.active:after { width: 28px; height: 4px; bottom: 5px; }
.course-list { display: grid; align-content: start; gap: 20px; background: #f5fbff; padding: 24px 20px 30px; min-height: calc(100vh - 280px); }
.course-card { display: grid; grid-template-columns: 116px minmax(0,1fr) auto; grid-template-rows: 116px 46px; gap: 20px; align-items: center; width: 100%; max-width: 900px; margin: 0 auto; padding: 22px; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(93,163,211,.13); }
.course-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 116px; height: 116px; border-radius: 12px; background: #eff2dc; color: #975b3e; overflow: hidden; }
.course-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.course-cover-summer { background: #e8f3e5; color: #548675; }
.course-cover-calligraphy { background: #f3ebde; color: #80634c; }
.course-card-info { grid-column: 2 / 4; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 3px 0 0; }
.course-card-info h2 { margin: 0; font-size: 21px; line-height: 1.5; color: #333a36; }
.course-deadline { margin: 0; color: #777e79; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.course-price { grid-column: 1 / 3; margin: 0; color: #ff3830; font-size: 18px; font-weight: 700; line-height: 1.5; }
.course-signup { grid-column: 3; padding: 11px 24px; min-height: 46px; border-radius: 26px; background: #f45646; color: #fff; font-size: 17px; font-weight: 700; white-space: nowrap; }
.course-signup.is-registered { background: #e9f8ef; color: #32a36a; cursor: default; }
.my-courses-fab { position: fixed; right: max(16px,calc((100vw - 1180px)/2 + 16px)); bottom: 176px; width: 74px; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; background: #fff0ed; color: #f45646; box-shadow: 0 3px 12px rgba(240,92,82,.08); z-index: 20; font-size: 12px; }
.my-courses-fab svg { width: 31px; height: 31px; }
.course-signup:focus-visible, .my-courses-fab:focus-visible { outline: 3px solid #1b73e8; outline-offset: 3px; }
@media(max-width:700px) {
  .course-tabs { padding: 0 10px; }
  .course-tabs .tab { font-size: 16px; }
  .course-list { padding: 20px 16px 26px; }
  .course-card { padding: 20px; grid-template-columns: 100px minmax(0,1fr) auto; grid-template-rows: 110px 44px; gap: 16px; }
  .course-cover { width: 100px; height: 110px; }
  .course-card-info h2 { font-size: 19px; }
  .course-deadline { font-size: 13px; }
  .course-price { font-size: 16px; }
  .course-signup { min-height: 44px; font-size: 16px; padding: 10px 20px; }
}
@media(max-width:360px) {
  .course-card { padding: 16px; grid-template-columns: 82px minmax(0,1fr) auto; gap: 12px; }
  .course-cover { width: 82px; height: 100px; }
  .course-signup { padding: 10px 15px; font-size: 14px; }
  .course-tabs .tab { font-size: 14px; }
}

.course-back-bar { background:#fff; padding:8px 24px; border-bottom:1px solid #edf1ee; }
.course-back-bar .back-link { margin:0; padding:7px 0; font-size:15px; }
@media(max-width:700px) { .course-back-bar { padding:7px 18px; } }