/* style.css 파일의 전체 내용입니다. (최종 수정본) */

/* 기본 스타일 초기화 */
*{
	--iden:#f79548;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; color: #333; background-color: #fff; line-height: 1.6; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
html, body { overflow-x: hidden; }
button,input[type="button"],input[type="reset"],input[type="submit"],input[type="image"] {cursor:pointer;}

/* ---------------------------------- */
/* PC 버전 스타일 */
/* ---------------------------------- */
#main-header { position: relative; z-index: 1001; }
.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; height: 90px; margin: 0 auto; padding: 0 20px; background-color: #fff; border-bottom: 1px solid #ddd; }
.logo-link { text-decoration: none; } 
/*
.logo span { font-size: 14px; color: #555; } 
.logo h1 { font-size: 24px; font-weight: 700; color: #2c3e50; }
*/
.logo-link .logo {
    display: flex;
    align-items: center;
    height: 100%; /* 헤더 높이에 맞게 로고 영역 확보 */
}

.logo img {
    height: 40px; /* 로고 이미지의 높이를 지정 (가로 너비는 비율에 맞게 자동 조절) */
    object-fit: contain; /* 이미지 비율을 유지하면서 영역에 맞춤 */
}

.main-nav ul { list-style: none; display: flex; height: 100%; } .main-nav li { display: flex; align-items: center; }
.main-nav a { display: block; text-decoration: none; color: #333; font-size: 16px; font-weight: 500; padding: 0 20px; height: 100%; line-height: 90px; transition: color 0.3s; }
.main-nav li:hover > a { color: #e67e22; }
.user-nav { display: flex; gap: 10px; font-size: 14px; color: #666; } .user-nav a { text-decoration: none; color: #666; }
.mega-menu-wrapper { position: absolute; width: 100%; background-color: #fff; border-bottom: 1px solid #eee; box-shadow: 0 4px 12px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease-in-out; }
.mega-menu-wrapper.active { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu-container { display: flex; justify-content: center; max-width: 1200px; margin: 0 auto; padding: 30px 20px; }
.mega-menu-content { display: block; padding: 0 15px; } .mega-menu-content.active { display: block; }
.mega-menu-content ul { list-style: none; padding-left: 0; } 
.mega-menu-content li a { display: block; padding: 12px 0; font-size: 16px; font-weight: 400; color: #555; text-decoration: none; transition: color 0.2s, background-color 0.2s; border-radius: 4px; }
.mega-menu-content li a:hover { color: #e67e22; background-color: #f8f9fa; }
.hero-carousel { position: relative; width: 100%; height: 500px; overflow: hidden; }
.carousel-slides { display: flex; width: 600%; height: 100%; transition: transform 0.5s ease-in-out; }
.carousel-slide { width: 25%; height: 100%; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; }
.hero-content { max-width: 800px; padding: 20px; }
.hero-content h2 { font-size: 42px; font-weight: 300; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero-content h2 strong { font-weight: 700; }
.hero-content p { font-size: 18px; max-width: 600px; margin: 0 auto 30px; opacity: 0.9; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.btn-primary { background-color: #e67e22; color: #fff; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 700; transition: background-color 0.3s; }
.btn-primary:hover { background-color: #d35400; }
.carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.3); color: #fff; border: none; font-size: 24px; padding: 15px; cursor: pointer; z-index: 10; border-radius: 50%; width: 50px; height: 50px; line-height: 0; display: flex; justify-content: center; align-items: center; }
.carousel-control:hover { background-color: rgba(0,0,0,0.5); }
.carousel-control.prev { left: 30px; } .carousel-control.next { right: 30px; }
.carousel-indicators { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.indicator { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.3s; }
.indicator.active { background-color: #fff; }
.quick-links-section { padding: 60px 0; background-color: #f8f9fa; }
.quick-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.quick-links-item h3 { font-size: 22px; font-weight: 700; color: #2c3e50; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #ddd; }
.link-box { display: flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 20px; margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 8px; text-decoration: none; color: #333; font-size: 18px; font-weight: 500; transition: all 0.3s ease; }
.link-box:hover { border-color: #e67e22; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transform: translateY(-3px); color: #e67e22; }
.link-box span { font-size: 14px; color: #777; }
.link-box:hover span { color: #e67e22; }
.status-box { background-color: #fff; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; height: 75%; }
.status-box h4 { font-size: 18px; font-weight: 500; color: #333; margin-bottom: 10px; }
.status-box p { font-size: 15px; color: #666; }
.info-section { padding: 80px 0; background-color: #fff; border-top: 1px solid #f0f0f0; }
.info-section .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.info-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #333; padding-bottom: 15px; margin-bottom: 20px; }
.info-header h2 { font-size: 24px; font-weight: 700; }
.info-header .plus-btn { font-size: 24px; color: #888; text-decoration: none; transition: transform 0.3s; }
.info-header .plus-btn:hover { transform: rotate(90deg); }
.post-list { list-style: none; padding-left: 0; }
.post-list li { margin-bottom: 15px; }
.post-list li a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: #555; font-size: 16px; transition: color 0.2s; }
.post-list li a:hover { color: #e67e22; }
.post-list li a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
.post-list li a .date { color: #999; flex-shrink: 0; }
.right-wrapper { display: flex; flex-direction: column; gap: 30px; }
.inquiry-box { flex: 1; display: flex; align-items: center; background-color: #f8f9fa; padding: 30px; border-radius: 12px; text-decoration: none; color: inherit; transition: box-shadow 0.3s, transform 0.3s; }
.inquiry-box:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY(-5px); }
.inquiry-icon { font-size: 40px; color: #20c997; margin-right: 25px; }
.inquiry-text h3 { font-size: 20px; font-weight: 700; margin-bottom: 5px; }
.inquiry-text p { font-size: 16px; color: #666; }
footer { border-top: 1px solid #ddd; background-color: #fff; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.footer-nav { display: flex; gap: 30px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee; }
.footer-nav a { text-decoration: none; color: #555; font-size: 15px; }
.footer-nav a:hover { color: #000; }
.footer-nav a b { font-weight: 700; color: #333; }
.footer-main { display: flex; justify-content: space-between; align-items: flex-start; }
.footer-info p { font-size: 14px; color: #666; margin-bottom: 5px; line-height: 1.8; }
.footer-info ul.line { font-size: 14px; color: #666; margin-bottom: 5px; line-height: 1.3; }
.footer-info ul.line li {display: inline-block; padding-right:20px; margin-bottom:5px;}
.footer-info span { color: #888; margin: 0 5px 0 10px; }
.footer-info span:first-child { margin-left: 0; }
.footer-info .copyright { margin-top: 15px; font-size: 12px; color: #999; }
.family-site select { padding: 8px 12px; border: 1px solid #ccc; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; }
	.footer-container .quick {position:fixed; top:15px; right:24px; width:46px; z-index:20;}
	.footer-container .quick a,
	.footer-container .quick button {display:block; width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden; font-size:0;}
	.footer-container .quick a {margin-bottom:12px; background:no-repeat 50% 50% / cover;}
	.footer-container .quick .i1 {background-image:url('/images/icon_sns01.png');}
	.footer-container .quick .gotop {background: var(--iden) url('/images/btn_gotop.png') no-repeat 50% 50%;}

.page-header { background-color: #f0f5f9; padding: 40px 0; }
	.page-header.g00 {background-image:url('/images/svisual00.jpg');}
	.page-header.g01 {background-image:url('/images/svisual01.jpg');}
	.page-header.g02 {background-image:url('/images/svisual02.jpg');}
	.page-header.g03 {background-image:url('/images/svisual03.jpg');}
	.page-header.g04 {background-image:url('/images/svisual04.jpg');}
	.page-header.g05 {background-image:url('/images/svisual05.jpg');}
	.page-header.g06 {background-image:url('/images/svisual06.jpg');}
	.page-header.g07 {background-image:url('/images/svisual07.jpg');}
	.page-header.g08 {background-image:url('/images/svisual08.jpg');}
	.page-header.g09 {background-image:url('/images/svisual09.jpg');}
    /* .page-header 내부에 가상요소(::before)로 흰색 막을 씌우는 방식 */
    .page-header {
        position: relative; /* 자식 요소 정렬 기준 */
        /* 배경 이미지는 기존 CSS에서 처리됨 */
    }

    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 흰색 배경(255,255,255)에 투명도 0.7 (0.0 ~ 1.0 조절 가능) */
        background: rgba(255, 255, 255, 0.7); 
        /* 배경을 살짝 흐리게 해서 글씨를 더 잘 보이게 함 (선택사항) */
        backdrop-filter: blur(3px); 
        z-index: 0; /* 글씨보다 뒤에 배치 */
    }

    /* 글씨가 오버레이 위로 올라오도록 설정 */
    .page-header .container {
        position: relative;
        z-index: 1; /* 오버레이보다 위에 배치 */
    }
    
    /* 제목 텍스트 색상을 확실하게 잡아주기 (필요시 사용) */
    .page-header h1 {
        color: #111; /* 짙은 검정 */
        text-shadow: none; /* 기존 그림자 효과 제거 */
        font-weight: 800;
    }
.breadcrumb { font-size: 14px; color: #000000; margin-bottom: 10px; }
.page-header h1 { font-size: 36px; font-weight: 700; color: #2c3e50; }
.sub-nav { background-color: #34495e; }
.sub-nav .container { display: flex; }
.sub-nav a { color: #ecf0f1; text-decoration: none; padding: 18px 30px; font-size: 16px; font-weight: 500; transition: background-color 0.3s; }
.sub-nav a:hover { background-color: #4a627a; }
.sub-nav a.active { background-color: #2ecc71; color: #fff; }
.content-section { padding: 60px 0 80px 0; }
.content-tabs { margin-bottom: 50px; border-bottom: 1px solid #ddd; }
.tab-btn, .tab-link { display:inline-block; background: none; border: none; font-family: 'Noto Sans KR', sans-serif; font-size: 18px; padding: 15px 25px; cursor: pointer; color: #888; font-weight: 500; border-bottom: 3px solid transparent; transition: color 0.3s, border-bottom-color 0.3s; }
.tab-btn:hover, .tab-link:hover { color: #333; }
.tab-btn.active, .tab-link.active { color: #2c3e50; border-bottom-color: #2c3e50; }
.tab-content { display: none; animation: fadeIn 0.5s; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.course-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.course-card { border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s, box-shadow 0.3s; position: relative; z-index: 1; }
.course-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.card-header, .card-body { transition: opacity 0.5s ease; }
.card-header { padding: 15px 20px; color: #fff; font-size: 18px; font-weight: 700; }
.card-body { padding: 25px 20px; }
.tag { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 14px; font-weight: 500; margin-bottom: 20px; }
.description { font-size: 16px; font-weight: 500; line-height: 1.6; height: 100px; color: #333; margin-bottom: 20px; }
.hashtags { display: flex; flex-wrap: wrap; gap: 8px; }
.hashtags span { display: inline-block; background-color: #f2f2f2; color: #888; padding: 4px 10px; border-radius: 15px; font-size: 13px; }
.color-blue { background-color: #34495e; } .color-teal { background-color: #1abc9c; } .color-red { background-color: #e74c3c; } .color-gray { background-color: #95a5a6; }
.tag-pink { background-color: #fce4ec; color: #c2185b; } .tag-teal { background-color: #e0f2f1; color: #00796b; } .tag-orange { background-color: #fff3e0; color: #f57c00; } .tag-purple { background-color: #f3e5f5; color: #7b1fa2; }
.case-photo-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s 0.1s ease, visibility 0.5s 0.1s ease; z-index: 2; border-radius: 10px; overflow: hidden; transform: translateX(0); pointer-events: none; }
.case-photo-container img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 0.8s ease; }
.course-card.is-target .card-header, .course-card.is-target .card-body { opacity: 0; }
.course-card.is-target .case-photo-container { opacity: 1; visibility: visible; }
.course-card.is-target .case-photo-container img { transform: scale(1); }
.apply-section { text-align: center; }
.apply-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 40px; }
.apply-gallery img { width: 100%; height: 250px; object-fit: cover; border-radius: 10px; }
.apply-checklist { list-style: none; text-align: left; max-width: 800px; margin: 0 auto 40px; padding-left: 0;}
.apply-checklist li { font-size: 18px; color: #333; margin-bottom: 15px; display: flex; align-items: flex-start; }
.apply-checklist i { color: #2ecc71; margin-right: 15px; margin-top: 5px; }
.faq-section { border-top: 2px solid #333; }
.faq-item { border-bottom: 1px solid #e0e0e0; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px; cursor: pointer; font-size: 18px; font-weight: 500; }
.faq-question i { transition: transform 0.3s; }
.faq-answer { padding: 0px 20px 20px 40px; background-color: #f8f9fa; color: #555; line-height: 1.8; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-answer a { color: #3498db; word-break: break-all; }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-item.active .faq-answer { max-height: 200px; padding: 20px 20px 20px 40px; }
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; background-color: #f8f9fa; border-radius: 10px; }
.field-category { display: flex; flex-direction: column; gap: 15px; }
.field-btn { position: relative; width: 100%; padding: 18px; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 500; text-align: center; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; transition: all 0.3s; }
.field-btn:hover { border-color: #2ecc71; color: #2ecc71; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.field-btn::after { display: none; content: ''; }
.process-flowchart { display: flex; justify-content: space-between; align-items: center; padding: 40px; }
.process-step { border: 2px solid; padding: 30px 40px; border-radius: 10px; font-size: 18px; font-weight: 500; transition: transform 0.3s, box-shadow 0.3s; }
.process-step:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.arrow { font-size: 24px; color: #bdc3c7; }
.border-green { border-color: #2ecc71; } .border-cyan { border-color: #1abc9c; } .border-blue { border-color: #3498db; }
.cta-section { text-align: center; margin-top: 60px; }
.cta-btn-main, .cta-btn-sub { font-family: 'Noto Sans KR', sans-serif; padding: 15px 50px; font-size: 16px; font-weight: 700; border-radius: 30px; cursor: pointer; border: 2px solid #3498db; margin: 0 10px; transition: all 0.3s; }
.cta-btn-main { background-color: #3498db; color: #fff; }
.cta-btn-main:hover { background-color: #2980b9; }
.cta-btn-sub { background-color: #fff; color: #3498db; }
.cta-btn-sub:hover { background-color: #ecf0f1; }
.info-banner { margin-top: 40px; padding: 18px; background-color: #ecf0f1; border-radius: 8px; color: #555; }
.apply-diagram { display: flex; flex-direction: column; align-items: center; padding: 50px 0; }
.diagram-top { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.diagram-box { padding: 15px 30px; font-size: 18px; font-weight: 700; border-radius: 8px; text-align: center; }
.diagram-box.type-main { background-color: #1abc9c; color: #fff; }
.diagram-desc { font-size: 16px; color: #555; }
.diagram-line-h { width: 60%; height: 2px; background-color: #ccc; position: relative; }
.diagram-line-h::before { content: ''; position: absolute; top: -30px; left: 50%; width: 2px; height: 30px; background-color: #ccc; transform: translateX(-50%); }
.diagram-bottom { display: flex; justify-content: space-around; width: 100%; margin-top: 30px; }
.diagram-box.type-sub { background-color: #34495e; color: #fff; width: 25%; position: relative; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.diagram-box.type-sub:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.diagram-box.type-sub::before { content: ''; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 30px; background-color: #ccc; transform: translateX(-50%); }
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); animation: fadeIn 0.3s; }
.modal.active { display: flex; justify-content: center; align-items: center; }
.modal-content { background-color: #fff; margin: auto; padding: 40px; border-radius: 10px; width: 90%; max-width: 600px; position: relative; box-shadow: 0 5px 25px rgba(0,0,0,0.2); }
.modal-content h2 { font-size: 24px; margin-bottom: 20px; color: #2c3e50; }
.modal-content p { font-size: 16px; line-height: 1.8; color: #333; }
.close-button { color: #aaa; position: absolute; top: 15px; right: 25px; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-button:hover, .close-button:focus { color: #000; }
.info-content { padding-top: 20px; }
.info-content h3 { font-size: 22px; font-weight: 700; margin: 40px 0 20px 0; padding-left: 15px; border-left: 4px solid #e67e22; }
.info-content h3:first-child { margin-top: 0; }
.info-content p { font-size: 16px; line-height: 1.8; color: #555; }
.info-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.info-table th, .info-table td { border: 1px solid #ddd; padding: 15px; text-align: center; font-size: 16px; }
.info-table th { background-color: #f8f9fa; font-weight: 500; }
.info-deflist { width: 100%; border-top: 2px solid #333; }
.info-deflist th, .info-deflist td { padding: 20px; font-size: 16px; border-bottom: 1px solid #eee; }
.info-deflist th { width: 200px; background-color: #f8f9fa; font-weight: 700; text-align: left; }
.video-container { position: relative; width: 100%; max-width: 800px; margin: 30px auto; overflow: hidden; padding-top: 56.25%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.consumer-notice { background-color: #f8f9fa; border: 1px solid #e0e0e0; border-left: 4px solid #e67e22; padding: 20px; margin: 20px 0; border-radius: 4px; }
.consumer-notice h4 { margin: 0 0 10px 0; font-size: 16px; font-weight: 700; }
.consumer-notice ol { padding-left: 20px; font-size: 14px; color: #555; }
.feature-box { margin: 20px 0; }
.feature-box h4 { font-size: 18px; font-weight: 700; color: #2c3e50; margin-bottom: 8px; }
.info-list { list-style: none; padding-left: 0; }
.info-list li { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e67e22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left center; padding-left: 30px; margin-bottom: 12px; font-size: 16px; line-height: 1.7; }
.info-list.ordered { list-style: decimal; padding-left: 20px; }
.info-list.ordered li { background: none; padding-left: 10px; }
.info-table.triple-header td { vertical-align: top; text-align: left; padding: 20px; line-height: 1.8; }
.info-table.triple-header tfoot td { text-align: center; font-weight: 700; background-color: #f8f9fa; }
.cta-section.center { text-align: center; margin: 40px 0; }
.process-flowchart.compact .process-step.icon-step { width: auto; min-width: 120px; }
.process-flowchart.horizontal { justify-content: center; padding: 20px 0; flex-wrap: wrap; }
.process-step.icon-step { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 20px; width: 150px; border: none; }
.icon-step .icon-wrapper { font-size: 48px; color: #34495e; width: 80px; height: 80px; background-color: #f0f5f9; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s; }
.icon-step:hover .icon-wrapper { background-color: #e67e22; color: #fff; transform: scale(1.1); }
.icon-step span { font-weight: 500; color: #333; }
.application-form, .check-results-form { max-width: 700px; margin: 20px auto; display: flex; flex-wrap: wrap; gap: 0 20px; }
.check-results-form { flex-direction: column; text-align: center; background-color: #f8f9fa; padding: 40px; border-radius: 10px; }
.check-results-form h3 { font-size: 24px; margin-bottom: 10px; }
.check-results-form p { margin-bottom: 30px; color: #555; }
.form-group { position: relative; width: 100%; margin-bottom: 25px; padding-bottom: 20px; }
.form-group.half { width: calc(50% - 10px); }
.form-group label { display: block; font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="email"],  .form-group input[type="password"], .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; font-family: 'Noto Sans KR', sans-serif; }
.form-group textarea { resize: vertical; }
.file-upload-wrapper { display: flex; }
.file-display { flex-grow: 1; border-radius: 6px 0 0 6px !important; border-right: none !important; background-color: #f4f4f4; }
.file-hidden { display: none; }
.file-button { flex-shrink: 0; padding: 12px 20px; background-color: #555; color: #fff; border: 1px solid #555; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 16px; }
.form-group.agree-check { display: flex; align-items: center; }
.form-group.agree-check input[type="checkbox"] { margin-right: 10px; width: 18px; height: 18px; }
.cta-btn-disabled { padding: 15px 50px; font-size: 16px; font-weight: 700; border-radius: 30px; background-color: #bdc3c7; color: #7f8c8d; border: none; cursor: not-allowed; }
.course-list { display: flex; flex-direction: column; gap: 20px; }
.course-item { display: flex; justify-content: space-between; align-items: center; padding: 25px; border: 1px solid #e0e0e0; border-radius: 10px; background-color: #fff; }
.course-info h4 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.course-info p { font-size: 16px; color: #555; }
.course-tag { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 700; border-radius: 15px; color: #fff; margin-bottom: 10px; }
.course-tag.required { background-color: #e74c3c; }
.course-tag.optional { background-color: #2ecc71; }
.form-group input.invalid, .form-group textarea.invalid { border-color: #e74c3c; }
.error-message { position: absolute; bottom: 0; left: 0; font-size: 13px; color: #e74c3c; display: none; }
.form-group.agree-check .error-message { left: 28px; bottom: -5px; }
.form-group .error-message.show { display: block; }
.results-modal-content { max-width: 800px; padding: 0; }
.results-header { background-color: #2c3e50; color: #fff; padding: 20px 30px; border-radius: 10px 10px 0 0; display: flex; justify-content: space-between; align-items: center; }
.results-header h2 { color: #fff; margin: 0; }
.results-body { display: flex; padding: 30px; gap: 30px; }
.results-left, .results-right { flex: 1; }
.results-left h3, .results-right h3 { font-size: 20px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #eee; }
.info-deflist.vertical th, .info-deflist.vertical td { display: block; width: 100%; text-align: left; }
.info-deflist.vertical th { font-size: 14px; color: #888; background-color: transparent; padding: 10px 0 2px 0; border: none; }
.info-deflist.vertical td { font-size: 16px; padding: 2px 0 15px 0; border: none; border-bottom: 1px solid #f0f0f0; }
.results-right p { font-size: 16px; margin-bottom: 20px; text-align: left; }
.info-table.compact th, .info-table.compact td { padding: 12px; }
.result-summary { text-align: center; font-size: 18px; font-weight: 500; margin-top: 20px; }
.status-pass { color: #3498db; font-weight: 700; }
#print-cert-btn { padding: 12px 40px; }
.page-header.secondary-header { background-color: #fff; border-bottom: 1px solid #eee; padding: 0;}
.page-header.secondary-header h1 { font-size: 28px; padding: 25px 0; }
.sub-nav.dark-nav { background-color: #fff; border-bottom: 2px solid #34495e;}
.sub-nav.dark-nav a { color: #555; }
.sub-nav.dark-nav a:hover { background-color: #f8f9fa; }
.sub-nav.dark-nav a.active { background-color: #34495e; color: #fff; }
.content-tabs.lecture-category-tabs { border: 1px solid #ddd; display: inline-flex; border-radius: 8px; overflow: hidden; }
.content-tabs.lecture-category-tabs .tab-btn { border: none; padding: 12px 30px; }
.content-tabs.lecture-category-tabs .tab-btn.active { background-color: #3498db; color: #fff; }
.lecture-count { font-size: 16px; color: #555; margin: 20px 0; }
.lecture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.lecture-card { text-decoration: none; color: inherit; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: box-shadow 0.3s, transform 0.3s; }
.lecture-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.lecture-thumbnail { width: 100%; aspect-ratio: 4 / 2.3; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; }
.lecture-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lecture-info { padding: 10px; }
.lecture-info h4 { font-size: 17px; margin-bottom: 10px; }
.lecture-info .price { font-size: 17px; font-weight: 700; color: #e74c3c; }
.lecture-detail-header { display: flex; gap: 40px; margin-bottom: 50px; }
.lecture-detail-thumbnail { flex-basis: 40%; }
.lecture-detail-thumbnail img { width: 100%; border-radius: 8px; }
.lecture-detail-info { flex-basis: 60%; }
.lecture-detail-info h2 { font-size: 28px; margin-bottom: 20px; }
.lecture-detail-info .info-deflist td.price { font-size: 24px; color: #e74c3c; font-weight: 700; }
.cta-buttons { display: flex; gap: 15px; margin-top: 30px; }
.cta-buttons .cta-btn-main.red { background-color: #e74c3c; border-color: #e74c3c;}
.cta-buttons .cta-btn-main.red:hover { background-color: #c0392b; }
.content-tabs.lecture-detail-tabs { margin-bottom: 30px; }
.lecture-description .desc-item { margin-bottom: 30px; }
.lecture-description h4 { font-size: 20px; font-weight: 700; margin-bottom: 15px; padding-left: 15px; border-left: 4px solid #e67e22;}
.lecture-description p { line-height: 1.8; color: #555; }
.lecture-description ol { padding-left: 20px; }
.lecture-description ol li { margin-bottom: 10px; line-height: 1.8; color: #555;}
.lecture-syllabus { list-style: none; border-top: 2px solid #333; padding-left: 0; }
.lecture-syllabus li { padding: 20px; border-bottom: 1px solid #eee; font-size: 18px; }
.lecture-syllabus li span { font-weight: 700; margin-right: 15px; color: #3498db; }
.mypage-dashboard { background-color: #f8f9fa; padding: 30px; border-radius: 10px; margin-bottom: 40px; }
.mypage-dashboard h3 { font-size: 22px; margin-bottom: 20px; }
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.status-box { background-color: #fff; border-radius: 8px; padding: 25px; text-align: center; border: 1px solid #eee; }
.status-box i { font-size: 24px; color: #3498db; margin-bottom: 10px; }
.status-box span { display: block; font-size: 16px; color: #555; margin-bottom: 5px; }
.status-box strong { font-size: 28px; font-weight: 700; }
.info-list.compact li { margin-bottom: 8px; font-size: 15px; }
.lecture-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.lecture-table th { background-color: #f8f9fa; padding: 15px; font-weight: 500; border-top: 2px solid #34495e; border-bottom: 1px solid #ddd; }
.lecture-table td { padding: 15px; text-align: center; border-bottom: 1px solid #eee; vertical-align: middle; }
.lecture-main-row .title { text-align: left; font-weight: 700; }
.cta-btn-sub.small { padding: 8px 15px; font-size: 14px; }
.lecture-sub-row { display: none; }
.lecture-sub-row td { padding: 0; background-color: #fdfdfd; }
.toggle-details { background: none; border: 1px solid #ccc; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: transform 0.3s, background-color 0.3s; }
.toggle-details i { color: #555; }
.toggle-details:hover { background-color: #f0f0f0; }
.toggle-details.expanded { transform: rotate(180deg); }
.sub-lecture-list table { width: 100%; border-collapse: collapse; }
.sub-lecture-list th { background-color: #f9f9f9; padding: 12px 30px; text-align: left; border: none; border-bottom: 1px solid #eee; font-weight: 500; }
.sub-lecture-list td { border: none; border-bottom: 1px solid #eee; text-align: left; }
.sub-lecture-list tbody tr:last-child td { border-bottom: none; }
.sub-lecture-list a { text-decoration: none; color: #3498db; }
.board-search { max-width: 500px; margin: 0 auto 50px; display: flex; border: 1px solid #ddd; border-radius: 30px; overflow: hidden; }
.board-search input { flex-grow: 1; border: none; padding: 12px 20px; font-size: 16px; }
.board-search input:focus { outline: none; }
.board-search button { flex-shrink: 0; border: none; background-color: #34495e; color: #fff; padding: 0 20px; cursor: pointer; }
.board-list { border-top: 2px solid #333; }
.board-header, .board-item { display: flex; align-items: center; padding: 15px 10px; border-bottom: 1px solid #eee; }
.board-header { background-color: #f8f9fa; font-weight: 500; }
.col-no { width: 10%; text-align: center; }
.col-title { width: 65%; }
.col-attach { width: 10%; text-align: center; }
.col-date { width: 15%; text-align: center; }
.board-item .col-title a { text-decoration: none; color: #333; }
.board-item .col-title a:hover { text-decoration: underline; }
.board-item .col-attach i { color: #888; }
.board-item .col-date { color: #888; }
.board-item.notice { background-color: #fdfdf6; font-weight: 500; }
.tag-notice { background-color: #e67e22; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.gallery-item { text-decoration: none; color: inherit; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s; }
.gallery-item:hover { transform: translateY(-5px); }
.gallery-thumbnail { aspect-ratio: 4 / 3; background-color: #eee; }
.gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.gallery-title { padding: 15px; font-size: 16px; font-weight: 500; background-color: #fff; }
.post-detail-view { border-top: 2px solid #333; border-bottom: 1px solid #ddd; }
.post-header { padding: 25px; border-bottom: 1px solid #eee; }
.post-header h2 { font-size: 24px; margin-bottom: 15px; }
.post-meta { font-size: 14px; color: #888; }
.post-meta span { margin-right: 20px; }
.post-meta strong { font-weight: 500; color: #555; margin-right: 8px; }
.post-content { padding: 40px 25px; min-height: 200px; font-size: 16px; line-height: 1.8; }
.post-attachment { padding: 25px; background-color: #f8f9fa; border-top: 1px solid #eee; }
.post-attachment h4 { font-size: 16px; margin-bottom: 10px; }
.post-attachment a { text-decoration: none; color: #555; }
.post-attachment a:hover { color: #000; }
.post-attachment i { margin-right: 8px; color: #e67e22; }
.post-actions { display: flex; justify-content: space-between; align-items: center; margin: 30px 0; }
.post-actions .right { display: flex; gap: 10px; }
.cta-btn-sub.gray { border-color: #ccc; color: #888; }
.post-navigation { border-top: 1px solid #ddd; }
.nav-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #eee; }
.nav-item strong { width: 80px; font-weight: 500; color: #555; flex-shrink: 0; }
.nav-item a { text-decoration: none; color: #333; }
.nav-item a:hover { text-decoration: underline; }
.nav-item span { color: #888; }
.activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.activity-card { background-color: #f8f9fa; border-radius: 10px; overflow: hidden; }
.activity-thumbnail img { width: 100%; height: 200px; object-fit: cover; }
.activity-body { padding: 25px; }
.activity-body h4 { font-size: 20px; margin-bottom: 15px; }
.activity-body ul { list-style: none; padding-left: 0; }
.activity-body li { padding-left: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232ecc71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left 5px; margin-bottom: 10px; color: #555; }
.history-timeline { border-left: 3px solid #2ecc71; padding: 10px 0 10px 30px; }
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-year { position: absolute; left: -85px; top: -5px; font-size: 24px; font-weight: 700; color: #2c3e50; }
.timeline-item::before { content: ''; position: absolute; left: -39px; top: 0; width: 15px; height: 15px; border-radius: 50%; background-color: #2ecc71; border: 3px solid #fff; box-shadow: 0 0 0 3px #2ecc71; }
.timeline-events { list-style: none; padding-left: 0; }
.timeline-events li { margin-bottom: 15px; font-size: 16px; color: #555; }
.family-site-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.family-site-item { text-decoration: none; color: inherit; padding: 30px; border: 1px solid #ddd; border-radius: 10px; transition: all 0.3s; }
.family-site-item:hover { border-color: #2ecc71; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.family-site-item img { height: 50px; margin-bottom: 20px; background-color: #eee; } /* 임시 배경색 */
.family-site-item h3 { font-size: 20px; margin-bottom: 10px; }
.family-site-item p { color: #888; }
.inquiry-page-header { background-color: #2c3e50; color: #fff; padding: 60px 0; text-align: center; }
.inquiry-page-header h1 { font-size: 36px; font-weight: 700; }
.inquiry-form-container { max-width: 800px; margin: -50px auto 50px; background-color: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; z-index: 10; display: flex; flex-wrap: wrap; gap: 0 20px; }
.form-section-title { width: 100%; font-size: 20px; font-weight: 700; margin-top: 30px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #eee; }
.form-group select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; font-family: 'Noto Sans KR', sans-serif; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center/12px 12px; -webkit-appearance: none; appearance: none; }
.form-note { font-size: 13px; color: #888; margin-top: 8px; }
.privacy-policy-box { width: 100%; }
.privacy-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.privacy-table th, .privacy-table td { border: 1px solid #ddd; padding: 12px; font-size: 14px; text-align: center; }
.privacy-table th { background-color: #f8f9fa; font-weight: 500; }
.contact-info-box { max-width: 800px; margin: 0 auto; text-align: center; padding: 40px; background-color: #f8f9fa; border-radius: 10px; }
.contact-info-box h3 { font-size: 22px; margin-bottom: 10px; }
.contact-info-box p { color: #555; margin-bottom: 20px; }
.contact-info-box ul { list-style: none; display: inline-flex; gap: 30px; padding-left: 0; }
.contact-info-box li { font-size: 16px; }
.contact-info-box i { margin-right: 8px; color: #e67e22; }
.sitemap-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; background-color: #f8f9fa; padding: 40px; border-radius: 10px; }
.sitemap-column h3 { font-size: 20px; font-weight: 700; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px solid #34495e; }
.sitemap-column h3 a { text-decoration: none; color: #2c3e50; }
.sitemap-column ul { list-style: none; padding-left: 0; }
.sitemap-column li { margin-bottom: 12px; }
.sitemap-column li a { text-decoration: none; font-size: 16px; color: #555; transition: color 0.2s; }
.sitemap-column li a:hover { color: #e67e22; text-decoration: underline; }
.apply-table { width: 100%; border-collapse: collapse; text-align: center; }
.apply-table th { padding: 15px; font-weight: 500; background-color: #f8f9fa; border-top: 2px solid #34495e; border-bottom: 1px solid #ddd; }
.apply-table td { padding: 15px; border-bottom: 1px solid #eee; vertical-align: middle; }
.tag-grade { display: inline-block; padding: 5px 15px; border-radius: 4px; color: #fff; font-weight: 700; }
.tag-grade.junior { background-color: #9b59b6; }
.tag-grade.core { background-color: #34495e; }
.tag-grade.expert { background-color: #c0392b; }
.tag-dday { background-color: #f39c12; color: #fff; padding: 5px 15px; border-radius: 20px; font-weight: 700; font-size: 14px; }
.tag-end { border: 1px solid #34495e; color: #333; padding: 5px 15px; border-radius: 20px; font-weight: 700; font-size: 14px; }
.apply-btn { display: inline-block; text-decoration: none; background-color: #fff; border: 1px solid #3498db; color: #3498db; padding: 8px 20px; border-radius: 4px; font-weight: 700; transition: all 0.3s; }
.apply-btn:hover { background-color: #3498db; color: #fff; }
.payment-form-container { max-width: 800px; margin: 0 auto; }
.payment-form-container .form-title { font-size: 24px; font-weight: 700; margin: 40px 0 20px; padding-bottom: 15px; border-bottom: 2px solid #333; }
.payment-form-container .info-deflist td.price { font-size: 20px; font-weight: 700; color: #e74c3c; }
.payment-methods { margin-bottom: 20px; }
.payment-methods input[type="radio"] { margin-right: 5px; }
.payment-methods label { font-size: 18px; margin-right: 30px; }
.bank-transfer-info { display: none; }
.bank-transfer-info #depositor-name { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; }
.payment-gateway-body { background-color: #f0f2f5; font-family: 'Noto Sans KR', sans-serif; }
.pg-container { width: 800px; margin: 20px auto; background-color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.pg-header { background-color: #fff; padding: 15px 20px; border-bottom: 1px solid #ddd; }
.pg-header h3 { font-size: 18px; }
.pg-main { display: flex; }
.pg-sidebar { width: 150px; background-color: #e74c3c; padding: 10px 0; }
.pg-menu-item { display: block; width: 100%; background: none; border: none; color: #fff; text-align: left; padding: 15px 20px; font-size: 16px; cursor: pointer; }
.pg-menu-item.active { background-color: #c0392b; font-weight: 700; }
.pg-content { flex-grow: 1; padding: 20px; }
.pg-content h4 { font-size: 16px; margin-bottom: 20px; }
.pg-agree-all { border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 15px; }
.pg-agree-all label { font-weight: 700; }
.pg-agree-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pg-agree-item button { background: none; border: 1px solid #ccc; font-size: 12px; padding: 2px 5px; cursor: pointer; }
.pg-agree-item label { font-size: 14px; }
.pg-agree-desc { font-size: 13px; color: #888; margin-bottom: 20px; padding-left: 10px; }
.pg-order-summary { width: 280px; background-color: #d35400; color: #fff; padding: 20px; }
.pg-order-summary h4 { font-size: 18px; padding-bottom: 15px; border-bottom: 1px solid #e67e22; }
.pg-order-item { display: flex; justify-content: space-between; font-size: 14px; margin-top: 15px; }
.pg-order-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e67e22; }
.pg-order-total .total-price { font-size: 20px; }
.pg-brand { margin-top: 50px; text-align: center; }
.status-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.status-table th, .status-table td { border: 1px solid #ddd; padding: 15px; text-align: center; font-size: 16px; vertical-align: middle; }
.status-table thead th { background-color: #f8f9fa; font-weight: 500; }
.status-tag { display: inline-block; padding: 5px 15px; border-radius: 20px; color: #fff; font-size: 14px; font-weight: 700; }
.status-tag.pass { background-color: #2ecc71; }
.status-tag.progress { background-color: #3246a8; }
.status-tag.fail { background-color: #e74c3c; }
.status-tag.pending { background-color: #95a5a6; }
.cta-btn-sub.small[disabled] { background-color: #f0f0f0; border-color: #ddd; color: #aaa; cursor: not-allowed; }
.score-modal h2 { text-align: center; }
.score-modal .result-summary-text { text-align: center; font-size: 16px; margin: 20px 0; }
.score-modal .result-summary-text.fail { color: #e74c3c; font-weight: 700; }
.score-modal .info-table tfoot th { background-color: #f8f9fa; font-weight: 700; }
.score-modal .status-pass { color: #2980b9; font-weight: 700; }
.apply-table td { vertical-align: middle; }
.apply-table .apply-btn.closed { background-color: #bdc3c7; border-color: #bdc3c7; color: #fff; cursor: not-allowed; }
.apply-table .apply-btn.closed:hover { background-color: #bdc3c7; color: #fff; }
.form-section-wrapper { margin-top: 60px; padding-top: 40px; border-top: 2px solid #34495e; }
.signup-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.type-card { background-color: #f8f9fa; border: 1px solid #eee; padding: 40px; text-align: center; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.type-card h3 { font-size: 22px; margin-bottom: 15px; }
.type-card p { color: #555; margin-bottom: 30px; flex-grow: 1; }
.type-card.border-green { border-top: 4px solid #2ecc71; }
.type-card.border-red { border-top: 4px solid #e74c3c; }
.type-card.border-blue { border-top: 4px solid #3498db; }
.cta-btn-main.green { background-color: #27ae60; border-color: #27ae60; }
.cta-btn-main.green:hover { background-color: #2ecc71; }
.cta-btn-main.red { background-color: #c0392b; border-color: #c0392b; }
.cta-btn-main.red:hover { background-color: #e74c3c; }
.terms-container { max-width: 800px; }
.terms-header { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; margin-bottom: 10px; }
.terms-header h3 { font-size: 20px; }
.terms-box { border: 1px solid #ddd; padding: 20px; }
.terms-box textarea { width: 100%; height: 150px; border: none; resize: none; background-color: #f8f9fa; padding: 10px; }
.agree-check-item { text-align: right; margin-top: 10px; }
.agree-check-item label, .agree-check-all label { margin-right: 5px; }
.signup-form-container { max-width: 700px; margin: 0 auto; }
.signup-form-container .required-text { font-size: 14px; color: #888; font-weight: 400; float: right; }
.input-with-btn { display: flex; gap: 10px; }
.input-with-btn input { flex-grow: 1; }
.radio-group label { margin: 0 15px 0 5px; }
.signup-form-container.detailed { border: 1px solid #ddd; padding: 40px; border-radius: 8px; }
.signup-form-container.detailed .form-section-title { border-bottom-color: #333; }
.signup-form-container.detailed .required-text { font-size: 14px; color: #888; font-weight: 400; float: right; line-height: 2.5; }
.photo-upload { display: flex; align-items: center; gap: 15px; }
.photo-preview { width: 100px; height: 133px; border: 1px solid #ddd; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; font-size: 50px; color: #ccc; }
.email-group { display: flex; align-items: center; gap: 10px; }
.email-group .at-sign { font-size: 16px; color: #888; }
.email-group input { flex: 1; }
.email-group select { flex-basis: 150px; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; }
.radio-group { display: flex; align-items: center; padding-top: 10px; }
.radio-group label { margin: 0 20px 0 5px; }
.cta-btn-main.large { padding: 15px 80px; font-size: 18px; }
.detailed-rules { margin-top: 20px; padding: 25px; background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; }
.detailed-rules h4 { font-size: 18px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }
.detailed-rules dl { padding-left: 10px; }
.detailed-rules dt { font-weight: 700; font-size: 16px; margin-top: 20px; margin-bottom: 8px; color: #2c3e50; }
.detailed-rules dt:first-child { margin-top: 0; }
.detailed-rules dd { padding-left: 20px; border-left: 2px solid #ddd; }
.detailed-rules dd ul { list-style-type: none; padding-left: 0; }
.detailed-rules dd li { margin-bottom: 8px; }
.detailed-rules dd li ul { padding-left: 20px; margin-top: 8px; }
.detailed-rules dd li ul li { list-style-type: disc; margin-bottom: 5px; }
.apply-table.detailed-apply th { padding: 15px 10px; }
.apply-table.detailed-apply td { padding: 10px; }
.apply-table .action-buttons { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.apply-table .apply-btn.small { padding: 6px 12px; font-size: 13px; }
.textarea-group { position: relative; }
.textarea-group textarea { width: 100%; }
.char-counter { position: absolute; bottom: 35px; right: 15px; font-size: 14px; color: #888; }
.experience-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.experience-table th, .experience-table td { border: 1px solid #ddd; padding: 10px; text-align: center; }
.experience-table th { background-color: #f8f9fa; }
.experience-table input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.experience-table .delete-exp-btn { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 18px; }
.feedback-modal-content { max-width: 500px; text-align: center; padding: 50px 40px; }
.feedback-icon { font-size: 60px; color: #2ecc71; margin-bottom: 20px; }
.feedback-modal-content h2 { font-size: 24px; margin-bottom: 15px; }
.feedback-modal-content p { font-size: 16px; color: #555; margin-bottom: 30px; }
.additional-contact { background-color: #f8f9fa; padding: 20px; border-radius: 8px; }
.additional-contact p { font-size: 14px; margin-bottom: 15px; }
.additional-contact span { display: inline-block; margin: 0 10px; font-size: 15px; }
.additional-contact i { margin-right: 5px; color: #888; }
.gallery-item.clickable { cursor: pointer; }
.kit-modal { max-width: 600px; text-align: left; }
.kit-modal img { width: 100%; height: 250px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; }
.kit-modal h2 { font-size: 24px; margin-bottom: 15px; }
.kit-modal p { font-size: 16px; margin-bottom: 20px; }
.kit-modal .info-list { padding-left: 0; list-style-position: inside; }
.kit-modal .info-list li { background: none; padding-left: 0; font-size: 16px; }
.kit-modal .info-list li strong { font-weight: 700; color: #34495e; }
.lecture-table .status-tag { font-size: 14px; padding: 4px 12px; border-radius: 15px; font-weight: 700; }
.lecture-table .status-tag.in-progress { background-color: #e0f7fa; color: #00796b; }
.lecture-table .status-tag.completed { background-color: #e3f2fd; color: #1565c0; }

.certificate-modal { max-width: 800px; padding: 0; font-family: 'Noto Sans KR'; }
.cert-header { background-color: #f0f0f0; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.print-btn { padding: 5px 15px; border: 1px solid #888; background-color: #fff; cursor: pointer; }
.cert-body { padding: 50px; text-align: center; background-color: #fff; }
.cert-logo-top { margin-bottom: 20px; }
.cert-logo-top img { height: 60px; }
.cert-body h1 { font-size: 48px; font-weight: 600; letter-spacing: 10px; }
.cert-subtitle { font-size: 18px; color: #888; margin-bottom: 50px; }
.cert-info table { width: 100%; text-align: left; margin-bottom: 50px; font-size: 18px; border-collapse: collapse; }
.cert-info th, .cert-info td { padding: 12px 0; }
.cert-info th { font-weight: 700; width: 120px; }

.cert-info { width: 100%; text-align: left; margin-bottom: 50px; font-size: 18px; border-collapse: collapse; }
.cert-info dl { padding: 7px 0; width:100%; }
.cert-info dt, .cert-info dd { line-height:1.3em; display:inline-block; }
.cert-info dt { font-weight: 700; min-width: 120px; padding-right:10px; }

.modal-content .cert-main-text { font-size: 22px; line-height: 1.8em; margin-bottom: 10px; /*word-break: keep-all;*/ }
.modal-content .cert-main-text2 { font-size: 23px; line-height: 2em; margin-bottom: 10px; /*word-break: keep-all;*/ }
.modal-content .cert-main-text_en { font-size: 16px; line-height: 1.5em; margin-bottom: 40px; }
.modal-content .cert-date { font-size: 20px; margin-bottom: 40px; }
.modal-content .cert-footer { position: relative; display: flex; justify-content: center; align-items: center;     width: 100%;}
.modal-content .cert-footer img { height: 80px; }
.modal-content .cert-footer .cert-stamp { position: absolute; height: 100px; right: 150px; }

@media print { 
body * { visibility: hidden; } 
#results-modal, #results-modal * { visibility: visible; } 
#results-modal { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: white; z-index: 9999; display: block !important; } 
.modal-content.results-modal-content { box-shadow: none; border: 2px solid #000; width: 100%; height: 100%; max-width: 100%; border-radius: 0; } 
.results-header .close-button, #print-cert-btn { display: none; } 
}
@media print { 
#modal-certificate, #modal-certificate * { visibility: visible; } 
#modal-certificate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: white; z-index: 9999; display: block !important; } 
.cert-header { display: none; } 
}

.ci-intro-section { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding-top: 20px; }
.ci-intro-text h3 { font-size: 24px; margin-bottom: 20px; }
.ci-intro-text p { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 15px; }
.ci-intro-visual { text-align: center; background-color: #f8f9fa; padding: 40px; border-radius: 10px; }
.ci-intro-visual .ci-logo { max-width: 400px; margin-bottom: 30px; }
.color-palette { display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; height: 150px; width: 100%; }
.color-chip-wrapper { position: relative; width: 120px; display: flex; justify-content: center; }
.color-chip { width: 80px; height: 80px; border-radius: 50%; cursor: pointer; transition: all 0.4s ease; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.color-chip.blue { background-color: #005aab; }
.color-chip.green { background-color: #6c9c33; }
.color-desc { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: 250px; padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.color-desc h4 { font-size: 16px; margin-bottom: 8px; }
.color-desc p { font-size: 14px; color: #555; line-height: 1.6; }
.color-chip-wrapper:hover .color-chip { transform: scale(1.2); }
.color-chip-wrapper:hover .color-desc { opacity: 1; visibility: visible; top: 110px; }
.ci-summary { font-size: 15px; color: #555; line-height: 1.7; max-width: 400px; }

/* ---------------------------------- */
/* 모바일 슬라이드 메뉴 스타일 */
/* ---------------------------------- */
.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; }
.mobile-menu-toggle .fa-bars,
.mobile-menu-toggle .fa-times { font-size: 22px; }

.menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1001; }
.menu-overlay.active { display: block; }
.mobile-menu-panel { position: fixed; top: 0; right: -300px; width: 300px; max-width: 85%; height: 100%; background-color: #fff; z-index: 1002; transition: right 0.3s ease-in-out; overflow-y: auto; }
.mobile-menu-panel.active { right: 0; }
.mobile-menu-panel .close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 32px; color: #888; cursor: pointer; }
.mobile-main-nav { padding-top: 60px; }
.mobile-main-nav ul { list-style: none; }
.mobile-main-nav > ul > li > a { display: block; padding: 15px 20px; font-size: 17px; font-weight: 500; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
.mobile-main-nav .submenu { display: none; background-color: #f8f9fa; }
.mobile-main-nav .submenu li a { display: block; padding: 12px 20px 12px 35px; font-size: 15px; color: #555; text-decoration: none; border-bottom: 1px solid #eee; }
.mobile-main-nav > ul > li.has-submenu > a { position: relative; }
.mobile-main-nav > ul > li.has-submenu > a::after { content: '+'; position: absolute; right: 20px; font-size: 20px; color: #aaa; transition: transform 0.2s; }
.mobile-main-nav > ul > li.has-submenu.active > a::after { content: '-'; }
/* 모바일 슬라이드 메뉴 - 사용자 메뉴 (로그인/회원가입) */
.mobile-user-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background-color: #f8f9fa; /* 배경색 추가 */
    border-bottom: 1px solid #eee;
}

.mobile-user-nav a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: #333;
}


/* FAQ */
.faq_wrap {border-top:#333 1px solid;}
.faq_wrap dl {border-bottom:#ddd 1px solid;}
.faq_wrap dt,
.faq_wrap dd {position:relative; font-size:1em; line-height:30px;}
.faq_wrap dl i {position:absolute; left:20px; width:35px; height:35px; line-height:35px; text-align:center; font-size:18px; color:#fff; font-weight:600; font-family:'NanumSquare', sans-serif; border-radius:50%;}
.faq_wrap dt {position:relative; color:#333; padding:20px 60px 20px 74px; cursor:pointer;}
.faq_wrap dt i {color:#555; top:17px;}
.faq_wrap dt em {position:absolute; top:0; right:20px; width:26px; height:100%;}
.faq_wrap dt em:before,
.faq_wrap dt em:after {content:""; position:absolute; top:50%; left:50%; width:16px; height:1px; background:#999; transition:.2s linear;}
.faq_wrap dt em:before {transform:rotate(45deg); margin-left:-5px;}
.faq_wrap dt em:after {transform:rotate(-45deg); margin-left:5px;}
.faq_wrap .on dt em:before {transform:rotate(-45deg);}
.faq_wrap .on dt em:after {transform:rotate(45deg);}
.faq_wrap dd {color:#666; padding:30px 30px 30px 74px; border-top:#ddd 1px solid;  background:#f7f7f7; display:none;}
.faq_wrap dd i {color:#999; top:30px;}


/* 팝업레이어 */
#hd_pop {z-index:9000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;}
.hd_pops img{max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#222;color:#fff;text-align:left;position:relative;}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject{background:#222;text-align:left}
.hd_pops_footer .hd_pops_close{background:#393939;position:absolute;top:0;right:0}

.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}


/* ---------------------------------- */
/* 반응형 스타일 (모바일) - 최종 수정본 */
/* ---------------------------------- */
@media (max-width: 1150px) {
    /* --- 태블릿: 헤더 --- */
	.header-container{ padding: 0 10px; height: 70px; }
    .main-nav a { padding: 0 10px; font-size: 16px; }
    .user-nav { font-size: 14px; }
    .logo img { height: 30px; }
	.mega-menu-content {padding: 0 20px;}
	.mega-menu-content li a {font-size: 14px;padding: 10px 0;}
	.footer-container .quick a {margin-bottom:10px;}

}
@media (max-width: 1024px) {
    /* --- 태블릿: 헤더 --- */
	.header-container{ padding: 0 10px; height: 70px; }
    .main-nav a { padding: 0 5px; font-size: 13px; }
    .user-nav { font-size: 11px; }
    .logo img { height: 30px; }
	.mega-menu-content {padding: 0 20px;}
	.mega-menu-content li a {font-size: 12px;padding: 5px 0;}

    /* --- 태블릿: 메인 페이지 정보 섹션 --- */
    .info-section .container { flex-direction: column; }
    .info-col { width: 100%; }
    .info-col.announcements { margin-bottom: 40px; }
}

@media (max-width: 768px) {
    /* --- 공통 --- */
    .container { padding: 0 15px; }
	.page-header {padding: 20px 0;}
    .page-header h1 { font-size: 20px; }
    .sub-nav .container { justify-content: center; flex-wrap: wrap; }
    .sub-nav a { padding: 10px 10px; font-size: 13px; }

    /* --- 헤더 및 슬라이드 메뉴 --- */
    .header-container { height: 60px; padding: 0 15px; justify-content: space-between; }
    .logo h1 { font-size: 18px; }
    .logo span { font-size: 12px; }
    .main-nav, .user-nav { display: none; }
    .mobile-menu-toggle { display: block; order: 3; }
    
    /* --- 메인 페이지 (index.html) --- */
    .hero-carousel { height: 400px; }
    .carousel-slides { width: 600%; }
    .carousel-slide { width: calc(100% / 6); }
    .hero-content h2 { font-size: 26px; }
    .hero-content p { font-size: 15px; }
    .carousel-control { display: none; }
    .quick-links-section { padding: 40px 0; }
    .quick-links-grid { grid-template-columns: 1fr; gap: 20px; }
    .info-section .container { display: flex; flex-direction: column; gap: 15px; }
    .info-col.announcements, .info-col.right-wrapper { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 25px; }
    .info-header { border: none; padding: 0; margin-bottom: 15px; }
    .info-header h2 { font-size: 18px; }
    .info-header .plus-btn { display: none; }
    .info-col.announcements .post-list, .info-col.right-wrapper .post-list { font-size: 14px; }
    .info-col.announcements .post-list li, .info-col.right-wrapper .post-list li { margin-bottom: 10px; }
    .info-col.announcements .post-list li:last-child, .info-col.right-wrapper .post-list li:last-child { margin-bottom: 0; }
    .info-col.announcements .post-list li:nth-child(n+3), .info-col.right-wrapper .post-list li:nth-child(n+3) { display: none; }
    .info-col.announcements .post-list a, .info-col.right-wrapper .post-list a { color: #555; justify-content: flex-start; gap: 10px; }
    .info-col.announcements .post-list .date, .info-col.right-wrapper .post-list .date { display: none; }
    .post-list li a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .inquiry-box { padding: 20px; flex-direction: column; text-align: center; gap: 10px; width: 100%; margin: 0; }
    .inquiry-icon { font-size: 32px; margin-right: 0; }
    .inquiry-text h3 { font-size: 18px; }
    .inquiry-text p { font-size: 14px; }
    .footer-main { flex-direction: column; gap: 20px; }
    .footer-nav { flex-wrap: wrap; gap: 15px; }
	.footer-container .footer-main,  .footer-container .footer-nav {display:none;}
	.footer-container .quick {bottom:20px; right:20px; width:30px;}
	.footer-container .quick a {margin-bottom:6px;}
	.content-section {    padding: 30px 0 40px 0;}
    /* --- 교육소개 페이지 --- */
    .course-card-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .modal-content.kit-modal { max-height: 80vh; overflow-y: auto; padding: 25px; }
    .kit-modal h2 { font-size: 20px; }
    .kit-modal p, .kit-modal .info-list li { font-size: 15px; }
    .apply-gallery { grid-template-columns: 1fr; }
    .apply-checklist { display: none; }
    .field-grid { grid-template-columns: 1fr; }
    .field-btn { padding: 16px; }
    .apply-diagram { flex-direction: column; }
    .diagram-bottom { flex-direction: column; width: 100%; gap: 15px; }
    .diagram-box.type-sub { width: 100%; }
    .diagram-line-h, .diagram-box.type-sub::before { display: none; }
    .diagram-top { flex-direction: column; text-align: center; }
    .process-flowchart { flex-direction: column; align-items: center; gap: 15px; padding: 0; }
    .process-flowchart .process-step { width: 100%; text-align: center; padding: 20px; }
    .process-flowchart .arrow { transform: rotate(90deg); }
	.tab-btn, .tab-link{font-size: 12px;    padding:10px 10px;}

    /* --- 자격사항 안내 페이지 --- */
    .info-deflist th, .info-deflist td { display: block; width: 100%; text-align: left; font-size: 13px; padding:10px; }
    .info-deflist th { background-color: transparent; padding-bottom: 5px; }
    .info-deflist td { padding-top: 0; }
    .process-flowchart.horizontal { flex-direction: column; gap: 15px; }
    .process-flowchart.horizontal .arrow { transform: rotate(90deg); }
    .course-item { flex-direction: column; align-items: flex-start; gap: 15px; }
    .score-modal .info-table, .certificate-modal .cert-info { font-size: 14px; }
    .certificate-modal .cert-body { padding: 25px; }
    .certificate-modal h1 { font-size: 32px; letter-spacing: 5px; }
    .certificate-modal .cert-main-text, .certificate-modal .cert-date { font-size: 16px; }
    .certificate-modal .cert-stamp { height: 80px; right: 50%; transform: translateX(50%); }
    .inquiry-form-container { padding: 25px; margin-top: -30px; }
    .inquiry-form-container .form-group.half { width: 100%; }
    .contact-info-box ul { flex-direction: column; gap: 15px; }
    .payment-methods label { display: block; margin-bottom: 15px; }
.content-tabs.lecture-category-tabs .tab-btn {
    padding: 10px 15px;
}

    /* FIT-시험안내: 시험과목 표 세로 배열 */
    .info-table.triple-header thead { display: none; }
    .info-table.triple-header tbody, .info-table.triple-header tr, .info-table.triple-header td { display: block; width: 100%; }
    .info-table.triple-header tbody td { margin-bottom: 25px; border: 1px solid #eee; padding: 20px; }
    .info-table.triple-header td::before { display: block; font-size: 18px; font-weight: 700; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }
    .info-table.triple-header tbody td:nth-child(1)::before { content: 'Junior (20문항)'; }
    .info-table.triple-header tbody td:nth-child(2)::before { content: 'Core (50문항)'; }
    .info-table.triple-header tbody td:nth-child(3)::before { content: 'Expert (50문항)'; }
    .info-table.triple-header tfoot td { text-align: center; }
	.lecture-detail-info .info-deflist td.price{font-size: 15px;}
	.lecture-info {padding: 10px;}
	.lecture-info h4, .lecture-info .price{
		font-size: 14px;
	}
	.lecture-detail-info h2{font-size: 17px;}
	.cta-btn-main, .cta-btn-sub{
		padding: 10px 25px; 
		font-size: 14px;
	}

    /* [최종 수정] FIT-시험일정 & 강사인증-접수안내: 카드형 디자인 */
	#fit-tabs .apply-table,
	#moef-tabs .apply-table {
		border: none;
		display: block;
	}
	#fit-tabs .apply-table thead,
	#moef-tabs .apply-table thead,
	#fit-tabs .apply-table tbody,
	#moef-tabs .apply-table tbody {
		display: block;
	}
	#fit-tabs .apply-table tr,
	#moef-tabs .apply-table tr {
		display: block;
		border-radius: 16px;
		padding: 25px;
		margin-bottom: 20px;
		position: relative;
		color: #fff;
	}
	#fit-tabs .apply-table tr:has(.tag-grade.junior) { background-color: #8e44ad; }
	#fit-tabs .apply-table tr:has(.tag-grade.core) { background-color: #2c3e50; }
	#fit-tabs .apply-table tr:has(.tag-grade.expert) { background-color: #c0392b; }
	#moef-tabs .apply-table tr:has(td:nth-child(2):not(:empty)) { background-color: #2980b9; }

    /* 카드 헤더(제목, 버튼)는 그리드에서 제외 */
    #fit-tabs .apply-table td:nth-child(3),
    #fit-tabs .apply-table td:nth-child(7),
    #moef-tabs .apply-table td:nth-child(2),
    #moef-tabs .apply-table td:nth-child(5) {
        display: block;
    }
	#fit-tabs .apply-table td:nth-child(3) { font-size: 28px; font-weight: 700; padding-bottom: 20px; }
	#fit-tabs .apply-table td:nth-child(7),
	#moef-tabs .apply-table td:nth-child(5) {
		position: absolute;
		top: 25px;
		right: 20px;
	}
	#fit-tabs .apply-table td .apply-btn,
	#moef-tabs .apply-table td .cta-btn-sub,
    #moef-tabs .apply-table td .apply-btn {
		background-color: #fff;
		color: #333;
		font-weight: 700;
		border-radius: 20px;
		padding: 8px 18px;
		border: none;
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	}
	#moef-tabs .apply-table td .apply-btn.closed {
		background-color: #95a5a6;
		color: #fff;
		border: none;
	}
    
    /* 카드 본문(상세 정보)에만 그리드와 라벨 적용 */
    #fit-tabs .apply-table td:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(7)),
    #moef-tabs .apply-table td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(5)):not([rowspan="2"]) {
        display: grid;
        grid-template-columns: 120px auto; /* 라벨 너비 조정 */
        align-items: center;
        font-size: 15px;
        padding: 6px 0;
		border: none;
		background: none;
    }
    #fit-tabs .apply-table td:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(7))::before,
    #moef-tabs .apply-table td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(5)):not([rowspan="2"])::before {
        content: '';
		font-weight: 400;
		color: rgba(255, 255, 255, 0.8);
    }

	/* FIT 시험일정 상세정보 */
	#fit-tabs .apply-table td:nth-child(5)::before { content: '시험일'; }
	#fit-tabs .apply-table td:nth-child(4)::before { content: '응시가능 기간'; }
	#fit-tabs .apply-table td:nth-child(2)::before { content: '시험시간'; }
	#fit-tabs .apply-table td:nth-child(6)::before { content: '결과발표일'; }
	#fit-tabs .apply-table td:nth-child(1) { display: none; }

	/* 강사 인증시험 상세정보 */
	#moef-tabs .apply-table tr::before { display:none; }
	#moef-tabs .apply-table td:nth-child(1),
	#moef-tabs .apply-table td[rowspan="2"] { display: none; }
	#moef-tabs .apply-table td:nth-child(2) {
		font-size: 28px;
		font-weight: 700;
		padding-bottom: 20px;
	}
	#moef-tabs .apply-table td:nth-child(3)::before { content: '접수기간'; }
	#moef-tabs .apply-table td:nth-child(4)::before { content: '시험일'; }
	
	
	
	/* ---------------------------------- */
	/* 온라인 강의, 회원가입, 기타 페이지 (모바일 반응형) */
	/* ---------------------------------- */

	/* --- 온라인 금융교육 (online-lecture-*.html, mypage.html) --- */
	.lecture-grid {
		grid-template-columns: repeat(2, 1fr); /* 4열 -> 2열로 변경 */
		gap: 15px;
	}
	.lecture-detail-header {
		flex-direction: column; /* 강의 상세정보 세로 정렬 */
	}
	.status-grid {
		grid-template-columns: 1fr; /* 나의 교육현황 세로 정렬 */
	}
	.lecture-table {
		display: block;
		width: 100%;
		overflow-x: auto; /* 수강 목록 테이블은 좌우 스크롤 */
		white-space: nowrap;
	}

	/* --- 회원가입 (signup-*.html) --- */
	.signup-type-grid {
		grid-template-columns: 1fr; /* 회원 구분 카드 세로 정렬 */
	}
	.signup-form-container.detailed {
		padding: 25px;
	}
	.email-group {
		flex-direction: column;
		align-items: stretch;
	}

	/* --- 사이트맵 (map.html) --- */
	.sitemap-grid {
		grid-template-columns: 1fr; /* 사이트맵 목록 세로 정렬 */
	}
	
	/* ---------------------------------- */
	/* 기타 페이지 (모바일 반응형) */
	/* ---------------------------------- */

	/* --- 공지사항 (notice-*.html) --- */
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr); /* 3열 -> 2열로 변경 */
		gap: 15px;
	}
	.board-list, .post-detail-view, .post-navigation {
		font-size: 14px;
	}
	.board-header {
		display: none; /* 모바일에서는 테이블 헤더 숨김 */
	}
	.board-item {
		display: block; /* 목록을 블록 형태로 변경 */
		padding: 15px 0;
	}
	.col-no, .col-attach {
		display: none; /* 번호와 첨부파일 아이콘 숨김 */
	}
	.col-title {
		width: 100%;
		font-weight: 500;
	}
	.col-date {
		width: 100%;
		text-align: left;
		font-size: 13px;
		color: #888;
		margin-top: 5px;
	}
	.post-header h2 {
		font-size: 22px;
	}
	.post-meta {
		font-size: 13px;
	}
	.post-actions {
		flex-direction: column;
		gap: 15px;
	}

	/* --- 시험관리규정 (regulation.html) --- */
	.regulation-section h2 {
		font-size: 22px;
	}
	.detailed-rules dd {
		padding-left: 15px;
	}


	/* --- 교육센터 소개 페이지 (about.html) --- */
	.ci-intro-section, .activity-grid, .family-site-grid {
		grid-template-columns: 1fr; /* 2열 또는 3열 구조를 모두 1열로 변경 */
	}
	.history-timeline {
		padding-left: 20px;
	}
	.timeline-year {
		left: -20px;
		font-size: 20px;
	}


	/* --- 모바일 슬라이드 메뉴 - 사용자 메뉴 (로그인/회원가입) --- */
	.mobile-user-nav {
		display: flex;
		justify-content: center;
		gap: 20px;
		padding: 20px;
		background-color: #f8f9fa; /* 배경색 추가 */
		border-bottom: 1px solid #eee;
	}

	.mobile-user-nav a {
		text-decoration: none;
		font-size: 15px;
		font-weight: 500;
		color: #333;
	}

	.hd_pops {top:10px !important; left:1% !important; max-width:98%;}
	.hd_pops_con {width:100% !important; height:auto !important;}

	.faq_wrap dt{padding: 10px 40px 10px 40px;}
	.faq_wrap dt i, .faq_wrap dl i{top:10px; left:0px; width:30px; height:30px; font-size:13px; line-height:30px;} 
	.faq_wrap dt{ font-size:13px; line-height:30px;} 
	.faq_wrap dd{font-size:12px; line-height:20px; padding: 10px 10px 10px 40px;}
	.faq_wrap dt em:before{margin-left:-1px;}
	.faq_wrap dt em:before, .faq_wrap dt em:after{width:8px;}

}