/* 교육 과정 (/programs) — 머리 아래 네 과정 판 하나가 이 페이지의 전부 (시안 voicecheck-programs). 공통은 edu.css
   열 머리의 작은 표시는 각 과정 페이지의 장면, 행은 subgrid 로 맞추고 가로줄은 판 끝에서 끝까지. 항목 이름은 첫 열에만 */
.frames { --cp: clamp(16px, 1.8vw, 24px); margin-top: clamp(40px, 5vw, 56px); padding: clamp(32px, 3.6vw, 48px) clamp(24px, 3vw, 40px) clamp(28px, 3vw, 40px); border-radius: 28px; background: var(--white); box-shadow: var(--panel-shadow); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fr { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; }
.fr > * { padding: 0 var(--cp); }
.fr:first-child > * { padding-left: 0; }
.fr:last-child > * { padding-right: 0; }
.fr + .fr > * { box-shadow: inset 1px 0 0 var(--line-2); }
.fr header { padding-bottom: 26px; }
.fr header .mk { margin-bottom: 20px; }
.fr h2 { font-size: var(--fs-xl); line-height: 1.25; font-weight: 750; letter-spacing: -.04em; }
.fr header p { margin-top: 6px; font-size: var(--fs-s); font-weight: 650; color: var(--cobalt); }
.f { position: relative; padding-top: 22px; padding-bottom: 22px; }
.f::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.f .k { position: absolute; top: 0; left: 0; transform: translateY(-50%); padding: 2px 12px; border-radius: 999px; background: var(--mist); font-size: var(--fs-xs); font-weight: 650; color: var(--slate); line-height: 1.6; }
.fr + .fr .f .k { opacity: 0; }
.f p { font-size: var(--fs-s); line-height: 1.7; color: var(--ink); }
.f:nth-child(4) p { color: var(--ink-2); }
.go { padding-top: 6px; align-self: end; }
.go .btn { width: 100%; padding: 0 12px; }

@media (max-width: 1080px) {
    .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
    .fr:nth-child(2n + 1) > * { padding-left: 0; box-shadow: none; }
    .fr:nth-child(2n) > * { padding-right: 0; }
    .fr:nth-child(3) .f .k { opacity: 1; }
}
@media (max-width: 640px) {
    .frames { grid-template-columns: minmax(0, 1fr); padding: 6px 20px; border-radius: 22px; row-gap: 0; }
    .fr { grid-row: auto; display: block; padding: 28px 0 24px; }
    .fr > *, .fr + .fr > * { padding-left: 0; padding-right: 0; box-shadow: none; }
    .fr + .fr { border-top: 1px solid var(--line); }
    .fr header { padding-bottom: 6px; }
    .fr header .mk { margin-bottom: 16px; }
    .f { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 12px; padding-top: 10px; padding-bottom: 0; }
    .f::before { display: none; }
    .f .k, .fr + .fr .f .k { position: static; transform: none; opacity: 1; padding: 0; background: none; line-height: 1.7; }
    .go { padding-top: 16px; }
}
/* 모바일 덜어내기 */
@media (max-width: 760px) {
    .fr { padding: 24px 0 22px; }
    .f:nth-child(4) { display: none; }
}