@font-face{font-family:'Classroom Pretendard';src:url('fonts/classroom/PretendardVariable.woff2') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
/* 강의 전용 활자. 공용 로고·메뉴와 승인된 화면 배치는 변경하지 않는다. */
.classroom-preview{--class-body:'Classroom Pretendard','SUIT Variable',sans-serif;--class-display:'Classroom Pretendard','SUIT Variable',sans-serif;font-family:var(--class-body);font-weight:400;letter-spacing:-.015em;font-synthesis:none}
.classroom-preview main button,.classroom-preview main select{font-family:var(--class-body)}
.classroom-preview .room-heading h1{font-family:var(--class-display);font-size:40px;font-weight:750;letter-spacing:-.035em;line-height:1.36}
.classroom-preview .course-content h2,.classroom-preview .secondary h2,.classroom-preview .expired-record h2{font-family:var(--class-display);font-weight:700;letter-spacing:-.035em}
.classroom-preview .course-content h2{font-size:30px}.classroom-preview .secondary h2{font-size:23px}
.classroom-preview .room-heading p,.classroom-preview .course-description{font-weight:400;letter-spacing:-.015em}
.classroom-preview .filter-tabs button,.classroom-preview .course-level,.classroom-preview .start-action,.classroom-preview .resume-action strong,.classroom-preview .resume-context p{font-weight:500}
.classroom-preview .course-brand{letter-spacing:0}.classroom-preview .course-brand>span:last-child{font-weight:500;letter-spacing:.06em}
.classroom-preview .course-period{font-weight:400}.classroom-preview .progress-label,.classroom-preview .course-until,.classroom-preview .secondary-meta{font-variant-numeric:tabular-nums}
.classroom-preview .lesson-slide h1{font-family:var(--class-display);font-weight:700;letter-spacing:-.035em;line-height:1.45}
.classroom-preview .lesson-title-row h2{font-family:var(--class-body);font-size:25px;font-weight:700;letter-spacing:-.025em}
.classroom-preview .list-course h2{font-family:var(--class-display);font-weight:700;letter-spacing:-.035em;line-height:1.5}
.classroom-preview .list-course>span,.classroom-preview .list-heading h2,.classroom-preview .chapter>summary,.classroom-preview .lesson-row strong,.classroom-preview .learning-tabs button{font-weight:500}
.classroom-preview .materials-panel h2,.classroom-preview .practice-guide h3,.classroom-preview .practice-guide li span,.classroom-preview .resource-card strong{font-weight:500}
.classroom-preview .lesson-row[aria-current=true] strong{font-weight:600}.classroom-preview .slide-top>span:first-child{font-weight:600;letter-spacing:.08em}.classroom-preview .slide-top small{font-size:12px;font-weight:400;letter-spacing:.02em}
/* 한 쌍의 과정 표지: 면접의 '답변'을 인용 부호와 한글 조판으로 표현한다. */
.course-cover.intermediate{background:#292c31;color:#f5f6f7}.course-cover.advanced{background:rgba(32,34,38,.055);color:#30343a}
.course-cover .cover-quotation{position:absolute;right:-7%;top:4%;width:54%;height:88%;color:#c4c8ce;opacity:.4;z-index:-1;transform:rotate(-7deg)}
.course-cover.advanced .cover-quotation{color:#72777f;opacity:.35;right:-10%;top:1%;width:66%;transform:rotate(7deg)}
.cover-edition{position:absolute;top:28px;left:32px;font:500 14px/1.4 var(--class-body);letter-spacing:.12em}
.cover-edition i{display:block;font-family:var(--class-display);font-size:12px;font-style:normal;font-weight:400;letter-spacing:.01em;color:#c4c8ce;margin-top:6px}
.cover-name{position:absolute;left:32px;top:34%;right:16px}.cover-name>span{display:block;font:400 12px/1.5 var(--class-body);color:#c4c8ce;letter-spacing:.02em}.cover-name strong{display:block;font-family:var(--class-display);font-size:46px;font-weight:700;line-height:1.32;letter-spacing:-.04em;margin-top:12px;color:#f5f6f7}
.cover-foot{position:absolute;bottom:24px;left:32px;right:32px;display:flex;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid #60656d;color:#c4c8ce;font:400 12px/1.5 var(--class-body);letter-spacing:.01em}
.advanced .cover-name{left:20px;top:16px}.advanced .cover-name>span{color:#555c66}.advanced .cover-name strong{font-size:26px;color:#30343a;line-height:1.35;margin-top:9px}.advanced .cover-foot{left:20px;right:20px;bottom:12px;padding-top:8px;color:#555c66;border-color:#d6d9de;font-size:12px}
@media(max-width:1000px){.cover-name strong{font-size:38px}.cover-foot>span:last-child{display:none}.cover-foot>span:only-child{display:block}}
@media(max-width:600px){.classroom-preview .room-heading h1{font-size:31px}.classroom-preview .course-content h2{font-size:26px}.classroom-preview .secondary h2{font-size:20px}.classroom-preview .lesson-title-row h2{font-size:21px}.cover-edition{top:20px;left:24px;font-size:12px}.cover-edition i{display:none}.cover-name{left:24px;top:30%}.cover-name strong{font-size:31px;line-height:1.35;margin-top:6px}.cover-name>span{font-size:12px}.cover-foot{left:24px;right:24px;bottom:17px;padding-top:10px}.cover-foot>span{font-size:12px}.course-cover .cover-quotation{right:0;top:-6%;width:48%;height:110%}.advanced .cover-name{left:12px;top:14px;right:6px}.advanced .cover-name strong{font-size:20px;line-height:1.4;margin-top:13px}.advanced .cover-foot{display:none}.classroom-preview .lesson-slide h1{font-size:20px;line-height:1.4}.classroom-preview .slide-top small{font-size:12px}}
.advanced .cover-foot{display:none}

/* 영상 조작부는 무채색으로 묶어 화면 내용에 시선을 남긴다. */
.classroom-preview .player-wrap{background:#202226;color:#f5f6f7}
.classroom-preview .video-stage{background:#f2f3f5}

.classroom-preview .timeline{color:#c4c8ce}
.classroom-preview .timeline input{appearance:none;-webkit-appearance:none;background:transparent;accent-color:#f5f6f7}
.classroom-preview .timeline input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#f5f6f7 var(--seek-fill,0%),#72777f var(--seek-fill,0%));border-radius:2px}
.classroom-preview .timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;background:#f5f6f7;border:0;border-radius:50%;margin-top:-4.5px}
.classroom-preview .timeline input::-moz-range-track{height:3px;background:#72777f;border-radius:2px}
.classroom-preview .timeline input::-moz-range-progress{height:3px;background:#f5f6f7;border-radius:2px}
.classroom-preview .timeline input::-moz-range-thumb{width:12px;height:12px;background:#f5f6f7;border:0;border-radius:50%}
.classroom-preview .transport button{color:#e9ebee}
.classroom-preview .transport button:hover,.classroom-preview .transport-options #repeat-toggle[aria-expanded=true]{background:#383b41}
.classroom-preview .transport #play-toggle{color:#202226;background:#f5f6f7}
.classroom-preview .speed-label select{color:#f5f6f7;background:#383b41}
.classroom-preview .repeat-panel{color:#c4c8ce}
.classroom-preview .repeat-actions button{border-color:#72777f;color:#f5f6f7}
.classroom-preview .stage-play{color:#202226;box-shadow:0 4px 20px #0000001a}
.classroom-preview .slide-top,.classroom-preview .lesson-slide,.classroom-preview .lesson-slide h1{color:#24272c}
.classroom-preview .slide-top>span:last-child{background:#202226de}
.classroom-preview .lesson-slide>span,.classroom-preview .lesson-slide p{color:#555c66}
.classroom-preview .list-course{background:#f7f8fa}
.classroom-preview .player-wrap :focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 강의실 커버의 면적을 줄이고 과정 정보와 동작을 가볍게 연결한다. */
.room-page .recent{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:48px;align-items:center}
.room-page .intermediate{min-height:0;height:270px;border-radius:4px}
.room-page .intermediate .cover-edition{top:24px;left:28px}
.room-page .intermediate .cover-edition i{display:none}
.room-page .intermediate .cover-name{left:28px;top:90px}
.room-page .intermediate .cover-name>span{display:none}
.room-page .intermediate .cover-name strong{font-size:38px;line-height:1.25;margin-top:0}
.room-page .intermediate .cover-foot{left:28px;right:28px;bottom:22px;border:0;padding:0}
.room-page .intermediate .cover-foot>span:last-child{display:none}
.room-page .secondary{grid-template-columns:160px minmax(0,1fr) auto}
.room-page .secondary .course-cover{height:112px;border-radius:4px}
.room-page .advanced .cover-name{left:16px;top:16px}
.room-page .advanced .cover-name strong{font-size:23px;margin-top:7px;line-height:1.25}
.room-page .course-period{border:0;padding:0;color:#555c66}
.room-page .course-level,.room-page .progress-label>span:last-child{color:#555c66}
.room-page progress,.room-page progress::-webkit-progress-bar{background:#eceef1}
.room-page progress::-webkit-progress-value{background:#555c66}
.room-page progress::-moz-progress-bar{background:#555c66}
.room-page .resume-action{align-self:flex-start;min-height:48px;min-width:210px;padding:10px 16px;background:rgba(32,34,38,.065);color:#292c31!important;border-radius:4px}
.room-page .resume-action:hover{background:rgba(32,34,38,.12)}
.room-page .resume-action strong{font-size:14px}
.room-page .course-until{text-align:left}
.room-page .start-action{color:#30343a!important}
@media(min-width:601px) and (max-width:1000px){.room-page .recent{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:28px}.room-page .intermediate{height:250px}.room-page .intermediate .cover-name{left:24px;top:82px}.room-page .intermediate .cover-name strong{font-size:32px}.room-page .secondary{grid-template-columns:150px minmax(0,1fr)}.room-page .secondary .course-cover{grid-row:1/3;height:112px}}
@media(max-width:600px){.room-page .recent{gap:20px;align-items:stretch}.room-page .intermediate{height:184px}.room-page .intermediate .cover-edition{top:18px;left:22px}.room-page .intermediate .cover-name{left:22px;top:55px}.room-page .intermediate .cover-name strong{font-size:29px;line-height:1.22}.room-page .intermediate .cover-foot{left:22px;right:22px;bottom:16px}.room-page .secondary{grid-template-columns:96px minmax(0,1fr)}.room-page .secondary .course-cover{height:112px}.room-page .advanced .cover-name{left:10px;top:14px}.room-page .advanced .cover-name strong{font-size:18px;line-height:1.3;margin-top:9px}.room-page .resume-action{min-width:210px}}
/* 영상 안에 겹치는 조작부: 별도 색상 판을 없애고 하단에만 명암을 둔다. */
.classroom-preview .player-wrap .playback{position:absolute;inset:auto 0 0;z-index:3;padding:36px 16px 8px;background:linear-gradient(transparent,rgba(0,0,0,.7) 65%,rgba(0,0,0,.82));color:white}
.classroom-preview .player-wrap .timeline{color:#fff}
.classroom-preview .player-wrap .transport{gap:4px}
.classroom-preview .player-wrap .transport #play-toggle{background:transparent;color:#fff;order:-1}
.classroom-preview .player-wrap .transport #play-toggle svg{width:22px;height:22px;fill:currentColor;stroke-width:0}
.classroom-preview .player-wrap .transport #play-toggle[aria-label*="일시정지"] svg{fill:none;stroke-width:3}
.classroom-preview .player-wrap .transport button{color:#fff;border-radius:3px}
.classroom-preview .player-wrap .transport button:hover{background:#ffffff26}
.classroom-preview .player-wrap .speed-label select{background:transparent;color:#fff;font-size:14px;font-weight:600}
.classroom-preview .player-wrap .speed-label option{background:#202226;color:#fff}
.classroom-preview .player-wrap .transport-options{gap:8px}
.classroom-preview .player-wrap #expand-player{min-width:44px;min-height:44px;padding:0}
.classroom-preview .player-wrap #expand-player svg{width:20px;height:20px}
.classroom-preview .stage-play{background:#141619cc;color:#fff;border-radius:14px;width:64px;height:48px;box-shadow:none}
.classroom-preview .stage-play svg{fill:currentColor;stroke-width:0}
.classroom-preview .stage-play[aria-label*="일시정지"] svg{fill:none;stroke-width:3}
.classroom-preview .lesson-slide h1{line-height:1.25;letter-spacing:-.025em}
.classroom-preview .lesson-row strong,.classroom-preview .chapter>summary,.classroom-preview .list-heading h2{font-weight:650}
.classroom-preview .lesson-row[aria-current=true] strong{font-weight:750}
.classroom-preview .resume-action strong{font-weight:650}
.classroom-preview .lesson-info .repeat-panel{background:#f3f4f6;color:#30343a;padding:16px;margin:0 0 20px;border-radius:4px}
.classroom-preview .lesson-info .repeat-actions button{color:#30343a;border-color:#818791}
.classroom-preview .player-wrap.expanded .video-stage{max-height:none;width:min(100%,calc((100vh - 130px)*16/9))}
.classroom-preview .player-wrap.expanded .playback{width:100%}
@media(max-width:1000px){.classroom-preview .player-wrap .transport{gap:0}.classroom-preview .player-wrap .transport-options{gap:0}.classroom-preview .player-wrap .speed-label select{width:48px;max-width:48px;padding:0 2px}.classroom-preview .player-wrap .transport-options #repeat-toggle{min-width:44px;width:44px;padding:0}.classroom-preview .player-wrap #repeat-toggle span{display:none}.classroom-preview .player-wrap .playback{padding:30px 8px 4px}.classroom-preview .lesson-slide{top:28%}.classroom-preview .stage-play{top:39%;width:52px;height:44px}}

@media(max-width:600px){.classroom-preview .lesson-slide{top:27%}.classroom-preview .lesson-slide>span{display:none}.classroom-preview .lesson-slide h1{font-size:18px;line-height:1.25;margin-top:0}.classroom-preview.expired-view .lesson-slide>span{display:block}}