/* 교강사 프로필과 같은 스타일을 사용하는 포켓클래스 과정 상세. */
.pocketclass-site #courseDetailModal-overlay {background:rgba(15,20,35,.5);backdrop-filter:blur(6px);}
.pocketclass-site #courseDetailModal {font-family:'Pretendard Variable',Pretendard,sans-serif;color:#1d1d1f;font-size:16px;font-weight:400;line-height:normal;letter-spacing:normal;-webkit-font-smoothing:antialiased;}
.pocketclass-site #courseDetailModal * {font-family:inherit;letter-spacing:inherit;}
.pocketclass-site #courseDetailModal .user-modal-dialog {width:calc(100vw - 144px);max-width:900px;height:min(860px,92dvh);max-height:92dvh;margin:0;border-radius:4px;box-shadow:0 40px 80px -20px rgba(10,20,50,.35);}
.pocketclass-site #courseDetailModal .user-modal-header {position:relative;z-index:2;height:0;min-height:0;padding:0;border:0;justify-content:flex-end;overflow:visible;}
.pocketclass-site #courseDetailModal .user-modal-title {display:none;}
.pocketclass-site #courseDetailModal .user-modal-close {position:absolute;top:12px;right:12px;width:40px;height:40px;padding:0;border-radius:50%;background:rgba(255,255,255,.92);font-size:26px;font-weight:300;color:#52525b;}
.pocketclass-site #courseDetailModal .user-modal-body {min-height:0;padding:0;scrollbar-width:thin;scrollbar-color:#d4d4d8 transparent;word-break:keep-all;overflow-wrap:anywhere;}
.pocketclass-site #courseDetailModal .course-detail-content-inner {--border:#e4e4e7;--muted:#fafafa;--muted-foreground:#71717a;--foreground:#1d1d1f;}
.pocketclass-site #courseDetailModal .course-thumbnail-section {display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,36px);margin:0;padding:32px clamp(20px,4.5vw,48px) 24px;}
.pocketclass-site #courseDetailModal .course-thumbnail-wrapper {padding:0;aspect-ratio:16/9;border-radius:4px;}
.pocketclass-site #courseDetailModal i[class*="fa"] {display:none;}
.pocketclass-site:has(#courseDetailModal.show) #userAlertModal .user-modal-alert-icon {display:none;}
.pocketclass-site #courseDetailModal .course-profile-heading {display:flex;flex-direction:column;gap:8px;min-width:0;}
.pocketclass-site #courseDetailModal .course-profile-heading h2 {margin:0;font-size:clamp(28px,4vw,34px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:inherit;}
.pocketclass-site #courseDetailModal .course-profile-category {margin:0;font-size:14px;font-weight:600;line-height:1.6;color:#52525b;}
.pocketclass-site #courseDetailModal .course-profile-summary {display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;}
.pocketclass-site #courseDetailModal .course-profile-summary span {font-size:14px;line-height:1.6;color:#71717a;}
.pocketclass-site #courseDetailModal .course-profile-summary span + span {display:inline-flex;gap:8px;}
.pocketclass-site #courseDetailModal .course-profile-summary span + span::before {content:'·';}
.pocketclass-site #courseDetailModal .course-tab-menu {gap:20px;margin:0 clamp(20px,4.5vw,48px);border-bottom:1px solid #e4e4e7;}
.pocketclass-site #courseDetailModal .course-tab-btn {padding:14px 0;border-bottom-width:2px;font-size:15px;font-weight:500;line-height:1.6;color:#71717a;transition:color .2s ease;}
.pocketclass-site #courseDetailModal .course-tab-btn.active {background:transparent;color:#1d1d1f;border-bottom-color:#1d1d1f;font-weight:700;}
.pocketclass-site #courseDetailModal .course-tab-btn:hover {background:transparent;color:#1d1d1f;}
.pocketclass-site #courseDetailModal .course-tab-btn > i,
.pocketclass-site #courseDetailModal .course-section-title > i {display:none;}
.pocketclass-site #courseDetailModal .course-tab-content-wrapper {min-height:0;padding:24px clamp(20px,4.5vw,48px) 32px;}
.pocketclass-site #courseDetailModal .course-section {margin:0 0 28px;padding:0;}
.pocketclass-site #courseDetailModal .course-section:last-child {margin-bottom:0;}
.pocketclass-site #courseDetailModal .course-section-title {margin:0 0 12px;padding:0 0 8px;border-bottom:1px solid #1d1d1f;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:#1d1d1f;}
.pocketclass-site #courseDetailModal .course-section-content,
.pocketclass-site #courseDetailModal .course-section-content p,
.pocketclass-site #courseDetailModal .edu-text-content {font-size:15px;font-weight:400;line-height:1.6;color:#3f3f46;}
.pocketclass-site #courseDetailModal .course-info-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;}
.pocketclass-site #courseDetailModal .course-info-item {padding:0;border:0;border-radius:0;background:transparent;}
.pocketclass-site #courseDetailModal .course-info-item label {margin-bottom:4px;font-size:14px;line-height:1.6;color:#71717a;}
.pocketclass-site #courseDetailModal .course-info-item span {font-size:15px;font-weight:500;line-height:1.6;color:#1d1d1f;}
.pocketclass-site #courseDetailModal .instructor-profile-box {padding:0;background:transparent;border:0;border-radius:0;gap:24px;}
.pocketclass-site #courseDetailModal .instructor-photo,
.pocketclass-site #courseDetailModal .instructor-photo img {border-radius:4px;}
.pocketclass-site #courseDetailModal .instructor-info h6 {font-size:24px;font-weight:700;line-height:1.3;}
.pocketclass-site #courseDetailModal .instructor-info p,
.pocketclass-site #courseDetailModal .instructor-info span {font-size:15px;line-height:1.6;}
.pocketclass-site #courseDetailModal .instructor-list-item {padding:0;border:0;border-radius:0;background:transparent;font-size:15px;line-height:1.6;}
.pocketclass-site #courseDetailModal .expertise-tag {padding:4px 0;border:0;background:transparent;color:#52525b;font-size:15px;line-height:1.6;}
.pocketclass-site #courseDetailModal .course-intro-box {padding:0;border:0;border-radius:0;background:transparent;margin-bottom:24px;}
.pocketclass-site #courseDetailModal .purchase-card-v2 {padding:0;border:0;border-radius:0;box-shadow:none;}
.pocketclass-site #courseDetailModal .lesson-list-wrapper,
.pocketclass-site #courseDetailModal .evaluation-item,
.pocketclass-site #courseDetailModal .evaluation-detail-item,
.pocketclass-site #courseDetailModal .class-select,
.pocketclass-site #courseDetailModal .btn-cart-v2 {border-radius:4px;}
.pocketclass-site #courseDetailModal button:focus-visible,
.pocketclass-site #courseDetailModal select:focus-visible {outline:2px solid var(--brand-color);outline-offset:3px;}
.pocketclass-site #courseDetailModal ::selection {background:var(--brand-color-light);color:#1d1d1f;}
.pocketclass-site #courseDetailModal .course-reading-text {margin:0;max-width:none;font-size:15px;line-height:1.7;color:#3f3f46;white-space:pre-line;}
.pocketclass-site #courseDetailModal .course-learning-summary {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0 0 24px;padding:12px 0;background:var(--muted);border-radius:4px;}
.pocketclass-site #courseDetailModal .course-learning-summary > div {display:flex;align-items:baseline;gap:12px;padding:0 16px;}
.pocketclass-site #courseDetailModal .course-learning-summary > div + div {border-left:1px solid var(--border);}
.pocketclass-site #courseDetailModal .course-learning-summary dt {margin:0;font-size:14px;line-height:1.5;color:#71717a;}
.pocketclass-site #courseDetailModal .course-learning-summary dd {margin:0;font-size:18px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;}
.pocketclass-site #courseDetailModal .course-syllabus-list {margin:0;padding:0;list-style:none;}
.pocketclass-site #courseDetailModal .course-syllabus-lesson:first-child {padding-top:0;}
.pocketclass-site #courseDetailModal .course-syllabus-lesson {padding:16px 0;border-bottom:1px solid var(--border);}
.pocketclass-site #courseDetailModal .course-syllabus-header {display:grid;grid-template-columns:56px minmax(0,1fr) 88px;gap:12px;align-items:baseline;}
.pocketclass-site #courseDetailModal .course-syllabus-number {font-size:14px;line-height:1.6;color:#71717a;font-variant-numeric:tabular-nums;}
.pocketclass-site #courseDetailModal .course-syllabus-name {font-size:15px;font-weight:500;line-height:1.6;}
.pocketclass-site #courseDetailModal .course-syllabus-time {text-align:right;font-size:14px;line-height:1.6;color:#71717a;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pocketclass-site #courseDetailModal .course-page-list {margin:4px 0 0 68px;padding:0;list-style:none;}
.pocketclass-site #courseDetailModal .course-page-item {display:grid;grid-template-columns:max-content minmax(0,1fr) 88px;align-items:baseline;gap:8px;padding:4px 0;}
.pocketclass-site #courseDetailModal :is(.course-page-number,.course-page-name,.course-page-time) {font-size:14px;line-height:1.6;color:#52525b;}
.pocketclass-site #courseDetailModal .course-page-number {color:#71717a;white-space:nowrap;}
.pocketclass-site #courseDetailModal .course-page-time {text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pocketclass-site #courseDetailModal .course-detail-empty {margin:0;padding:20px 0;font-size:15px;line-height:1.6;color:#71717a;}
.pocketclass-site #courseDetailModal .course-assessment-overview {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px;margin-bottom:24px;align-items:start;}
/* 수료 조건과 평가 비중을 같은 기준선에서 비교하는 간결한 명세형 구성. */
.pocketclass-site #courseDetailModal :is(.course-completion-panel,.course-weight-panel) {margin:0;padding:0;border:0;border-radius:0;background:transparent;}
.pocketclass-site #courseDetailModal :is(.course-completion-criteria,.course-assessment-weights) {display:flex;flex-direction:column;gap:0;margin:0;}
.pocketclass-site #courseDetailModal :is(.course-completion-criteria,.course-assessment-weights) > div {display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--border);}
.pocketclass-site #courseDetailModal :is(.course-completion-criteria,.course-assessment-weights) > div:first-child {padding-top:0;}
.pocketclass-site #courseDetailModal :is(.course-completion-criteria,.course-assessment-weights) > div:last-child {border-bottom:0;}
.pocketclass-site #courseDetailModal :is(.course-completion-criteria,.course-assessment-weights) dt {font-size:14px;line-height:1.6;color:#52525b;}
.pocketclass-site #courseDetailModal :is(.course-completion-criteria,.course-assessment-weights) dd {font-size:18px;font-weight:600;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pocketclass-site #courseDetailModal .course-assessment-detail {display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--border);}
.pocketclass-site #courseDetailModal .course-assessment-detail:first-of-type {padding-top:0;}
.pocketclass-site #courseDetailModal .course-assessment-detail h4 {margin:0;font-size:16px;font-weight:700;line-height:1.5;}
.pocketclass-site #courseDetailModal .course-assessment-detail dl {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.pocketclass-site #courseDetailModal .course-assessment-detail dt {margin-bottom:4px;font-size:14px;line-height:1.6;color:#71717a;}
.pocketclass-site #courseDetailModal .course-assessment-detail dd {font-size:15px;line-height:1.6;}
.pocketclass-site #courseDetailModal .course-assessment-notice {padding-top:16px;border-top:1px solid var(--border);}
.pocketclass-site #courseDetailModal .course-assessment-notice h4 {margin-bottom:12px;font-size:15px;font-weight:600;line-height:1.5;}
.pocketclass-site #courseDetailModal .course-assessment-notice ul {padding-left:20px;}
.pocketclass-site #courseDetailModal .course-assessment-notice li {list-style:disc;font-size:14px;line-height:1.7;color:#52525b;}
.pocketclass-site #courseDetailModal .course-expert-header {display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:20px;margin-bottom:24px;}
.pocketclass-site #courseDetailModal .course-expert-photo {display:flex;align-items:center;justify-content:center;width:112px;height:144px;background:var(--muted);}
.pocketclass-site #courseDetailModal .course-expert-photo img {display:block;width:100%;height:100%;object-fit:contain;}
.pocketclass-site #courseDetailModal .course-expert-heading h3 {display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.pocketclass-site #courseDetailModal .course-expert-heading h3 > span {font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.02em;}
.pocketclass-site #courseDetailModal .course-expert-heading small {font-size:15px;line-height:1.6;color:#71717a;}
.pocketclass-site #courseDetailModal .course-expert-heading p {margin:4px 0 0;font-size:15px;line-height:1.6;color:#52525b;}
.pocketclass-site #courseDetailModal .course-expert-columns {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start;}
.pocketclass-site #courseDetailModal .course-expert-columns .course-section {margin:0;}
.pocketclass-site #courseDetailModal .course-expert-columns p {margin:0 0 8px;font-size:15px;line-height:1.6;white-space:pre-line;}
.pocketclass-site #courseDetailModal .course-expert-field {margin-bottom:16px;}
.pocketclass-site #courseDetailModal .course-expert-field h4 {margin-bottom:4px;font-size:15px;font-weight:600;line-height:1.6;}
.pocketclass-site #courseDetailModal .course-expert-field p {color:#52525b;}
.pocketclass-site #courseDetailModal .course-expert-entry {display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;margin-bottom:16px;}
.pocketclass-site #courseDetailModal .course-expert-entry.without-period {grid-template-columns:minmax(0,1fr);}
.pocketclass-site #courseDetailModal .course-expert-period,
.pocketclass-site #courseDetailModal .course-expert-entry small {font-size:14px;line-height:1.6;color:#71717a;white-space:pre-line;}
@media (max-width:767px) {
    .pocketclass-site #courseDetailModal .course-expert-columns {grid-template-columns:minmax(0,1fr);gap:32px;}
    .pocketclass-site #courseDetailModal .course-assessment-overview {grid-template-columns:minmax(0,1fr);gap:24px;}
    .pocketclass-site #courseDetailModal .course-assessment-detail {grid-template-columns:minmax(0,1fr);gap:16px;}
    .pocketclass-site #courseDetailModal .course-assessment-detail dl {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
    .pocketclass-site #courseDetailModal .course-syllabus-header {grid-template-columns:48px minmax(0,1fr);gap:4px 12px;}
    .pocketclass-site #courseDetailModal .course-syllabus-time {grid-column:2;text-align:left;}
    .pocketclass-site #courseDetailModal .course-page-list {margin-left:60px;}
    .pocketclass-site #courseDetailModal .course-page-item {grid-template-columns:max-content minmax(0,1fr);gap:2px 8px;padding:4px 0;}
    .pocketclass-site #courseDetailModal .course-page-time {grid-column:1 / -1;text-align:left;}
}
@media (prefers-reduced-motion:reduce) {
    .pocketclass-site #courseDetailModal .course-tab-pane {animation:none;}
}
@media (max-width:599px) {
    .pocketclass-site #courseDetailModal {align-items:flex-end;}
    .pocketclass-site #courseDetailModal .user-modal-dialog {width:100%;max-width:none;height:92dvh;max-height:92dvh;border-radius:10px 10px 0 0;}
    .pocketclass-site #courseDetailModal .course-thumbnail-section {grid-template-columns:minmax(0,1fr);padding-top:56px;gap:16px;}
    .pocketclass-site #courseDetailModal .course-profile-heading h2 {font-size:28px;}
    .pocketclass-site #courseDetailModal .course-tab-menu {gap:20px;}
    .pocketclass-site #courseDetailModal .course-info-grid {grid-template-columns:minmax(0,1fr);}
    .pocketclass-site #courseDetailModal .instructor-profile-box {align-items:flex-start;text-align:left;}
}