/* KAICE Education Single Document Styles - 2단 레이아웃 */
#kaice-document {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'S-CoreDream-3', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.kaice-document-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    /* 디버깅용 - 필요시 주석 해제
    border: 2px solid red;
    */
}

/* 좌측 사이드바 */
.kaice-sidebar {
    width: 350px;
    flex: 0 0 350px; /* 고정 너비, 전혀 줄어들지 않음 */
    position: sticky;
    top: 20px;
    /* 디버깅용 - 필요시 주석 해제
    border: 2px solid blue;
    */
}

.kaice-sidebar-content {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    border: solid 1px #ccc;
    border: 1px solid #ccc;
}

/* 썸네일 */
.kaice-thumbnail {
    margin-bottom: 25px;
    text-align: center;
}

.kaice-thumbnail-image {
    width: 100%;
    height: 0;
    padding-bottom: 66.67%; /* 3:2 비율 (2/3 * 100%) */
    position: relative;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.kaice-thumbnail-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.kaice-thumbnail-placeholder {
    width: 100%;
    height: 0;
    padding-bottom: 66.67%; /* 3:2 비율 */
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 14px;
    border: 1px solid #e9ecef;
    position: relative;
}

.kaice-thumbnail-placeholder .default-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgb(240, 240, 240);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kaice-thumbnail-placeholder i {
    font-size: 24px;
    color: rgb(153, 153, 153);
}

/* 사이드바 제목 */
.kaice-sidebar-title {
    margin-bottom: 25px;
}

.kaice-sidebar-title h2 {
    font-family: 'S-CoreDream-4', sans-serif;
    font-size: 24px;
    color: #121212;
    margin: 0;
    line-height: 1.4;
    word-break: keep-all;
}

/* 수강료 */
.kaice-sidebar-price {
    font-family: 'S-CoreDream-4', sans-serif;
    font-size: 22px;
    margin-bottom: 25px;
    text-align: right;
    color: #408090;
}

.price-value {
    font-family: 'S-CoreDream-4', sans-serif;
    font-weight: bold;
}

/* 상단 테두리가 있는 카테고리 */
.kaice-expert-info-top-border {
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    margin-top: 20px;
}

/* 카테고리 */
.kaice-sidebar-category {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid hsla(218, 3%, 49%, .4);
    margin-bottom: 25px;
}

.category-list {
    font-family: 'S-CoreDream-3', sans-serif !important;
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.program-field-category {
    display: inline-block;
    background: #e8f4f8;
    color: #408090;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-family: 'S-CoreDream-3', sans-serif !important;
    margin: 2px 4px 2px 0;
    transition: all 0.3s ease;
}

.program-field-category a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 카테고리와 태그 구분 스타일 */
.program-field-category.category-tag {
    background: #e8f4f8;
    color: #408090;
}

.program-field-category.tag-tag {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

.program-field-category.no-tag {
    background: #f8f9fa;
    color: #6c757d;
    font-style: italic;
    border: 1px solid #dee2e6;
}

.program-field-category.category-tag:hover {
    background: #d1e7ed;
    color: #356a78;
}

.program-field-category.tag-tag:hover {
    background: #e9ecef;
    color: #343a40;
}

/* 수강신청 버튼 */
.kaice-register-btn {
    display: block;
    width: 100%;
    padding: 15px;
    text-align: center;
    border-radius: 4px;
    font-family: 'S-CoreDream-4', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid;
}

.kaice-register-btn.active {
    background: #408090;
    color: white;
    border-color: #408090;
}

.kaice-register-btn.active:hover {
    background: #356a78;
    border-color: #356a78;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(64, 128, 144, 0.3);
}

.kaice-register-btn.inactive {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
    cursor: not-allowed;
}

/* 신청 상태별 버튼 스타일 */
.kaice-register-btn.pending {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
    cursor: default;
}

.kaice-register-btn.approved {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
    cursor: default;
}

.kaice-register-btn.rejected {
    background: #f44336;
    color: white;
    border-color: #f44336;
    cursor: default;
}

/* 추가 정보 */
.kaice-sidebar-info {
    border-top: 1px solid #e9ecef;
    padding-top: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #666;
}

.info-icon {
    margin-right: 10px;
    font-size: 16px;
}

.info-text {
    font-family: 'S-CoreDream-3', sans-serif;
}

/* 우측 메인 콘텐츠 */
.kaice-main-content {
    flex: 1 1 auto; /* 남은 공간을 모두 차지하고 필요시 줄어들 수 있음 */
    min-width: 0; /* flex item이 너무 작아지지 않도록 */
    width: 100%!important; /* 전체 너비 사용 */
    /* all: initial의 영향을 오버라이드 */
    display: block;
    box-sizing: border-box;
    /* 디버깅용 - 필요시 주석 해제
    border: 2px solid green;
    */
}

#kaice-education-document {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: solid 1px #ccc;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
}

.kaice-document-wrap {
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* 컨텐츠 영역 */
.kaice-content {
    margin-bottom: 0;
}

.content-view {
    line-height: 1.6;
    color: #333;
}

/* 프로그램 정보 테이블 */
.program-info {
    margin-bottom: 40px;
}

.program-subtitle {
    display: block;
    font-family: 'S-CoreDream-4', sans-serif;
    font-size: 22px;
    color: #000;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-indent: 0;
}

.program-info table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.program-info table td {
    padding: 12px;
    border: 1px solid #f0f0f0;
    vertical-align: middle;
    font-family: 'S-CoreDream-3', sans-serif;
    font-size: 14px;
}

.program-info table td:first-child {
    color: #333 !important;
    width: 25%;
    text-align: center;
    vertical-align: middle;
    background: #f8f9fa;
    font-family: 'S-CoreDream-4', sans-serif;
    font-size: 16px;
    border-left: 1px solid #999;
}

.program-info table td:last-child {
    width: 75%;
    text-align: left;
    padding-left: 30px;
    border-right: none;
    color: #666;
}

.program-info table td:last-child a {
    color: #666;
}

.program-info table td:last-child a:hover {
    color: #408090;
}

.program-info table tr:first-child td {
    border-top: none;
}

.program-info table tr:last-child td {
    border-bottom: none;
}

/* 강사 정보 스타일 */
.instructors-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.instructor-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.instructor-thumbnail {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.instructor-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.instructor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instructor-image.default-profile {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instructor-image.default-profile svg {
    width: 50px;
    height: 50px;
}

.instructor-details {
    flex: 1;
    min-width: 0;
}

.instructor-name {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

.instructor-name a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.instructor-name a:hover {
    color: #408090;
}

.instructor-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.instructor-thumbnail a:hover {
    transform: scale(1.05);
}

/* 선택자 우선순위를 높이기 위해 구체적으로 지정 */
.program-info table .instructors-list .instructor-info-item {
    margin-bottom: 8px;
}

.program-info table .instructors-list .instructor-info-item:last-child {
    margin-bottom: 0;
}

/* 커리큘럼 테이블 */
.program-curriculum {
    margin-top: 40px;
}

.program-curriculum table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.program-curriculum table td,
.program-curriculum table th {
    padding: 18px;
    border: 1px solid #f0f0f0;
    font-family: 'S-CoreDream-3', sans-serif;
    vertical-align: middle;
}

/* 커리큘럼 내용 스타일링 */
.curriculum-content {
    text-align: left;
}

.curriculum-title {
    font-family: 'S-CoreDream-4';
    font-size: 15px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.curriculum-details {
    margin: 8px 0 0 0;
    padding-left: 5px;
    list-style-type: none;
}

.curriculum-details li {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 4px;
    position: relative;
    padding-left: 0;
}

.curriculum-details li:last-child {
    margin-bottom: 0;
}

.program-curriculum table td:first-child,
.program-curriculum table th:first-child {
    border-left: none;
}

.program-curriculum table td:last-child,
.program-curriculum table th:last-child {
    border-right: none;
}

.program-curriculum thead th {
    font-family: 'S-CoreDream-4', sans-serif;
    font-size: 16px!important;
    color: #333!important;
    padding: 12px;
    background-color: #f8f9fa;
    text-align: center;
    border-top: 1px solid #999;
    font-weight: normal;
}

/* 4열 커리큘럼 테이블 스타일 */
.program-curriculum table td:first-child,
.program-curriculum table th:first-child {
    text-align: center;
    width: 12%;
    font-size: 14px;
    color: #333!important;
}

.program-curriculum table td:nth-child(2) {
    color: #000;
    padding-left: 25px;
    width: 50%;
}

.program-curriculum table th:nth-child(2) {
    color: #000;
    width: 50%;
}

.program-curriculum table td:nth-child(3),
.program-curriculum table th:nth-child(3) {
    width: 18%;
    text-align: center;
    font-size: 14px;
}

.program-curriculum table td:nth-child(4),
.program-curriculum table th:nth-child(4) {
    width: 20%;
    text-align: center;
    font-size: 14px;
}

/* 비고란이 비어있을 때 너비 조정 */
.program-curriculum.empty-notes table td:nth-child(2),
.program-curriculum.empty-notes table th:nth-child(2) {
    width: 60% !important;
}

.program-curriculum.empty-notes table td:nth-child(4),
.program-curriculum.empty-notes table th:nth-child(4) {
    width: 10% !important;
    background-color: #f0f0f0;
}

/* 환불 규정 테이블 - 커리큘럼과 동일한 스타일 적용 */
.program-refund-policy {
    margin-top: 40px;
}

.program-refund-policy table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.program-refund-policy table td,
.program-refund-policy table th {
    padding: 18px;
    border: 1px solid #f0f0f0;
    font-family: 'S-CoreDream-3', sans-serif;
    vertical-align: middle;
}

.program-refund-policy table td:first-child,
.program-refund-policy table th:first-child {
    border-left: none;
}

.program-refund-policy table td:last-child,
.program-refund-policy table th:last-child {
    border-right: none;
}

.program-refund-policy thead th {
    font-family: 'S-CoreDream-4', sans-serif;
    font-size: 16px!important;
    color: #333!important;
    background-color: #f8f9fa;
    text-align: center;
    border-top: 1px solid #999;
    font-weight: normal;
    padding: 12px 0;
}

/* 3열 환불 규정 테이블 컬럼 너비 */
.program-refund-policy table td:first-child,
.program-refund-policy table th:first-child {
    width: 35%;
    text-align: center;
    font-size: 14px;
    color: #333!important;
}

.program-refund-policy table td:nth-child(2),
.program-refund-policy table th:nth-child(2) {
    width: 35%;
    text-align: center;
    font-size: 14px;
}

.program-refund-policy table td:nth-child(3),
.program-refund-policy table th:nth-child(3) {
    width: 30%;
    text-align: center;
    font-size: 14px;
}

/* 환불 규정 테이블 - 커리큘럼과 동일한 스타일 적용 */
.program-refund-policy {
    margin-top: 40px;
}

.program-refund-policy table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.program-refund-policy table td,
.program-refund-policy table th {
    padding: 18px;
    border: 1px solid #f0f0f0;
    font-family: 'S-CoreDream-3', sans-serif;
    vertical-align: middle;
}

.program-refund-policy table td:first-child,
.program-refund-policy table th:first-child {
    border-left: none;
}

.program-refund-policy table td:last-child,
.program-refund-policy table th:last-child {
    border-right: none;
}

.program-refund-policy thead th {
    font-family: 'S-CoreDream-4', sans-serif;
    font-size: 16px!important;
    color: #333!important;
    background-color: #f8f9fa;
    text-align: center;
    border-top: 1px solid #999;
    font-weight: normal;
    padding: 12px 0;
}

/* 3열 환불 규정 테이블 컴럼 너비 */
.program-refund-policy table td:first-child,
.program-refund-policy table th:first-child {
    width: 35%;
    text-align: center;
    font-size: 14px;
    color: #333!important;
}

.program-refund-policy table td:nth-child(2),
.program-refund-policy table th:nth-child(2) {
    width: 35%;
    text-align: center;
    font-size: 14px;
}

.program-refund-policy table td:nth-child(3),
.program-refund-policy table th:nth-child(3) {
    width: 30%;
    text-align: center;
    font-size: 14px;
}

/* 상세 소개 섹션 */
.detail-info {
    margin-top: 40px;
}

/* 환불 규정 및 모든 테이블에서 strong 태그 스타일 */
.program-refund-policy strong,
.program-curriculum strong,
.program-info strong,
.detail-info strong,
.kaice-content strong {
    font-family: 'S-CoreDream-4', sans-serif;
    font-weight: normal;
}

/* 모든 테이블 thead th에 공통 스타일 적용 (program-info 제외) */
.program-curriculum thead th,
.program-refund-policy thead th,
.detail-info thead th,
.kaice-content thead th:not(.program-info thead th) {
    border-top: 1px solid #999;
    font-weight: normal;
}

.kaice-heading {
    margin-bottom: 15px;
    border-bottom: 1px solid #e8f4f8;
    position: relative;
    text-indent: 0;
}

.kaice-subtitle {
    font-size: 18px;
    font-family: 'S-CoreDream-5', sans-serif !important;
    color: #333;
    margin: 0 !important;
    border-bottom: 2px solid #408090;
    display: inline-block;
    padding-bottom: 4px;
}

/* 반응형 디자인 */
@media (max-width: 1300px) {
    .kaice-document-container {
        gap: 30px;
    }
    
    .kaice-sidebar {
        width: 320px;
        flex: 0 0 320px;
    }
}

@media (max-width: 1200px) {
    .kaice-document-container {
        gap: 25px;
    }
    
    .kaice-sidebar {
        width: 300px;
        flex: 0 0 300px;
    }
}

@media (max-width: 1024px) {
    .kaice-document-container {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    
    .kaice-sidebar {
        width: 100%;
        flex: none; /* 세로 레이아웃에서는 flex 제거 */
        position: static;
    }
    
    /* all: initial을 오버라이드하기 위해 더 구체적인 선택자 사용 */
    .kaice-document-container .kaice-main-content,
    #kaice-document .kaice-main-content {
        width: 100%;
        flex: none;
        display: block;
        box-sizing: border-box;
        min-width: 0;
        max-width: none;
    }
    
    #kaice-education-document {
        width: 100%;
    }
    
    .kaice-sidebar-content {
        padding: 25px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .kaice-document-wrap {
        padding: 30px;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    #kaice-document {
        width: 100%;
    }
    
    .kaice-document-container {
        width: 100%;
        padding: 0;
    }
    
    /* all: initial을 오버라이드하기 위해 더 구체적인 선택자 사용 */
    .kaice-document-container .kaice-main-content,
    #kaice-document .kaice-main-content {
        width: 100%;
        display: block;
        box-sizing: border-box;
        min-width: 0;
        max-width: none;
    }
    
    #kaice-education-document {
        width: 100%;
    }
    
    .kaice-sidebar-content,
    .kaice-document-wrap {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .kaice-sidebar-title h2 {
        font-size: 18px;
    }
    
    .program-info table td,
    .program-curriculum table td,
    .program-curriculum table th,
    .program-refund-policy table td,
    .program-refund-policy table th {
        padding: 12px;
        font-size: 14px;
    }
    
    .program-info table td:first-child {
        width: 30%;
        font-size: 14px;
    }
    
    .program-info table td:last-child {
        padding-left: 15px;
    }
    
    .program-curriculum table td:nth-child(2) {
        padding-left: 15px;
    }
}

/* 프린트 스타일 */
@media print {
    .kaice-sidebar {
        display: none !important;
    }
    
    .kaice-main-content {
        width: 100% !important;
    }
}