/* 기본 설정 및 컬러 팔레트 */
:root {
    --primary: #3b82f6;
    --primary-dark: #1d4ed8;
    --accent: #e64dfd;
    --text-main: #333333;
    --text-muted: #666666;
    --bg-gray: #f8f9fa;
    --border-color: #e2e8f0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pretendard', -apple-system, sans-serif;
}

body {
    color: var(--text-main);
    line-height: 1.5;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

em {
    font-style: normal;
    color: #ef4444;
    margin-left: 4px;
}

.mainbody.container {
    flex: 1;
}

.footer {
    margin-top: auto;
}

/* 상단 유틸리티 바 */
.top-bar {
    background-color: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

    .top-bar .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: flex-end;
        gap: 1.5rem;
    }

/* 메인 네비게이션 (GNB) */
.header-main {
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    position: relative;
    z-index: 100;
}

    .header-main .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1.5rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

/* === 로고 영역 스타일 변경 === */
.logo a {
    display: flex;
    align-items: center;
    gap: 6px; /* 이미지와 2026 글씨 사이의 간격 */
}

.logo img {
    max-width: 250px;
    display: flex;
    align-items: center;
}

.logo span {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: -1px;
}

/* =========================================
    햄버거 버튼 (PC에서는 숨김)
========================================= */

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 텍스트와 선을 가로 중앙에 정렬 */
    gap: 5px;
    width: 44px; /* 터치하기 편하도록 가로 영역 확장 */
    cursor: pointer;
}

    .mobile-menu-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--text-main);
        border-radius: 2px;
        transition: 0.3s;
    }

    /* 1. 햄버거 아이콘 위에 MENU 글자 생성 */
    .mobile-menu-btn::before {
        content: "MENU";
        font-size: 0.65rem;
        font-weight: 800;
        color: var(--text-main);
        letter-spacing: 0.5px;
        margin-bottom: 2px;
        transition: all 0.3s ease;
    }

    /* 2. 메뉴가 활성화(열림) 상태일 때 CLOSE로 글자 변경 */
    .mobile-menu-btn.active::before {
        content: "CLOSE";
        color: var(--primary-dark); /* 강조 색상으로 변경 */
    }

    /* 3. 기존 햄버거 3단 선 */
    .mobile-menu-btn span {
        display: block;
        width: 24px; /* 기존 100%에서 24px로 고정 */
        height: 2px;
        background-color: var(--text-main);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* 4. 엑스(X) 애니메이션 */
    .mobile-menu-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* =========================================
    GNB 드롭다운 스타일 구조 (PC 기본)
========================================= */
.gnb > ul {
    display: flex;
    gap: 2.5rem;
}

    .gnb > ul > li {
        position: relative;
        padding: 0.5rem 0;
    }

        .gnb > ul > li > a {
            font-size: 1.1rem;
            font-weight: 600;
            transition: color 0.2s;
            display: block;
        }

        .gnb > ul > li:hover > a {
            color: var(--primary);
        }

/* =========================================
    하위 메뉴 (Submenu - PC)
========================================= */
.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 200px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

    .submenu li a {
        display: block;
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        color: var(--text-main);
        font-weight: 500;
        text-align: center;
        transition: background 0.2s, color 0.2s;
    }

        .submenu li a:hover {
            background: #f1f5f9;
            color: var(--primary);
        }

.gnb > ul > li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
    Swiper 메인 배너 영역
========================================= */
.hero-section {
    width: 100%;
    height: 500px;
    position: relative;
    background-color: var(--bg-gray);
}

    .hero-section .swiper-slide {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

        .hero-section .swiper-slide::before {
            content: "";
            position: absolute;
            top: -5%;
            left: -5%;
            width: 110%;
            height: 110%;
            background-image: url('/img/main_back.webp');
            background-size: cover;
            background-position: center;
            filter: blur(6px);
            z-index: 1;
        }

        .hero-section .swiper-slide::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.45);
            z-index: 2;
        }

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    padding: 0 1rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-sub {
    font-size: 1.2rem;
    color: #f1f5f9;
    margin-bottom: 2rem;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.hero-date {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    color: var(--primary-dark);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* =========================================
    퀵 메뉴
========================================= */
.quick-menu-wrap {
    max-width: 1200px;
    margin: -40px auto 0;
    position: relative;
    z-index: 20;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    width: calc(100% - 2rem);
}

.quick-item {
    text-align: center;
    padding: 2.5rem 1rem;
    border-right: 1px solid #f1f5f9;
    transition: background 0.3s;
}

    .quick-item:last-child {
        border-right: none;
    }

    .quick-item:hover {
        background: #f8fafc;
    }

.quick-icon {
    width: 55px;
    height: 55px;
    background: var(--bg-gray);
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.quick-item strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: #111;
}

.quick-item p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* =========================================
    메인 페이지 레이아웃
========================================= */
.main-content {
    max-width: 1200px;
    margin: 5rem auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    padding: 0 1rem;
}

    .main-content .board-section, .info-section {
        min-width: 0;
    }

        .main-content .board-section h2, .info-section h2 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #222;
            padding-bottom: 0.8rem;
        }

    .main-content .board-list li {
        padding: 1rem 0;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .main-content .board-list li a {
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 1rem;
        }

        .main-content .board-list li span {
            color: var(--text-muted);
            font-size: 0.9rem;
            flex-shrink: 0;
        }

.main-content .info-box {
    background: var(--bg-gray);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    height: calc(100% - 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .main-content .info-box h3 {
        color: var(--primary-dark);
        margin-bottom: 1rem;
        font-size: 1.6rem;
        letter-spacing: 1px;
    }

    .main-content .info-box p {
        font-size: 0.95rem;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
    }

/* =========================================
    푸터
========================================= */
.footer {
    background: #1e293b;
    color: #94a3b8;
    padding: 3rem 1rem;
    font-size: 0.9rem;
    margin-top: 4rem;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.f-info strong {
    color: #fff;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 1rem;
}

.f-info p {
    margin-bottom: 0.4rem;
}


/* =========================================
    서브 페이지 레이아웃
========================================= */
.sub-hero {
    height: 220px;
    background: linear-gradient(135deg, #1e3a8a, var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

    .sub-hero h2 {
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
        letter-spacing: -1px;
    }

    .sub-hero p {
        font-size: 2.5rem;
        color: #e0e7ff;
    }

.sub-container {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 1rem;
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.sub-container section {
    width: 100%;
}

.side-menu {
    width: 240px;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

    .side-menu h3 {
        background: #f8fafc;
        color: var(--primary-dark);
        font-size: 1.3rem;
        font-weight: 700;
        padding: 1.5rem;
        border-bottom: 1px solid #e2e8f0;
        text-align: center;
    }

    .side-menu ul li a {
        display: block;
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid #e2e8f0;
        color: var(--text-muted);
        font-weight: 500;
        transition: all 0.2s;
    }

    .side-menu ul li:last-child a {
        border-bottom: none;
    }

    .side-menu ul li.active a, .side-menu ul li a:hover {
        background: var(--primary);
        color: #fff;
        font-weight: 700;
    }

.content-area {
    flex: 1;
    min-width: 0;
}

.page-title {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    border-bottom: 2px solid #222;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 3rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 18px;
        background-color: var(--accent);
        border-radius: 2px;
    }

/* =========================================
    탭 메뉴 스타일
========================================= */
.tab-menu {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2.5rem;
}

    .tab-menu li {
        flex: 1;
        text-align: center;
        padding: 1rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px; /* 하단 보더 겹침 처리 */
    }

        .tab-menu li:hover {
            color: var(--primary);
            background: #f8fafc;
        }

        .tab-menu li.active {
            color: var(--primary-dark);
            border-bottom-color: var(--primary);
        }

/* 탭 콘텐츠 (기본 숨김, active 시 표시) */
.tab-content {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

    .tab-content.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 인사말 본문 레이아웃 */
.greeting-wrap {
    display: flex;
    gap: 2.5rem;
    background: #fff;
}

.greeting-img {
    width: 320px;
    flex-shrink: 0;
}

    .greeting-img img {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        object-fit: cover;
    }

.greeting-text {
    flex: 1;
}

    .greeting-text h4 {
        font-size: 1.6rem;
        color: var(--primary-dark);
        margin-bottom: 1.5rem;
        font-weight: 700;
        line-height: 1.4;
        word-break: keep-all;
    }

    .greeting-text p {
        margin-bottom: 1.2rem;
        color: #444;
        font-size: 1.05rem;
        word-break: keep-all;
    }
    .greeting-text p.bold {
        font-weight: bold;
    }

.greeting-sign {
    margin-top: 3.5rem;
    text-align: right;
    border-top: 1px dashed #cbd5e1;
    padding-top: 1.5rem;
}

    .greeting-sign p {
        margin-bottom: 0.5rem;
        color: var(--text-muted);
        font-size: 1rem;
    }

    .greeting-sign strong {
        font-size: 1.4rem;
        color: #111;
        font-weight: 800;
    }


/* =========================================
    대회 개요 (표 스타일)
========================================= */
.overview-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--primary-dark);
    font-size: 1.05rem;
}

    .overview-table th, .overview-table td {
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .overview-table th {
        background-color: #f8fafc;
        width: 20%;
        text-align: left;
        font-weight: 600;
        color: #111;
    }

    .overview-table td {
        color: #444;
    }

        .overview-table td strong {
            color: var(--primary);
        }

/* =========================================
           조직위원회 (그리드 카드 & 사진 스타일)
           ========================================= */
.committee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.committee-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2rem 1.5rem; /* 사진을 위해 상단 패딩을 살짝 늘림 */
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .committee-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border-color: var(--primary);
    }

/* 증명사진 동그랗게 처리 */
.committee-img {
    width: 110px;
    height: 110px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #eff6ff; /* 테두리를 주어 깔끔하게 마감 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background-color: var(--bg-gray);
}

    .committee-img img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지가 찌그러지지 않고 원형에 맞게 꽉 차도록 설정 */
    }

.committee-role {
    display: inline-block;
    background: #eff6ff;
    color: var(--primary-dark);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.committee-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 0.3rem;
}

.committee-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
}


/* =========================================
    반응형 미디어 쿼리 (태블릿 & 모바일) 
========================================= */
@media screen and (max-width: 1024px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .gnb > ul {
        gap: 1.5rem;
    }

    .main-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .info-box {
        height: auto;
    }

    .sub-container {
        gap: 2rem;
    }

    .greeting-wrap {
        flex-direction: column;
    }

    .greeting-img {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .greeting-text {
        text-align: center;
    }

    .greeting-sign {
        text-align: center;
    }
}

/* =========================================
    CI 소개용 신규 스타일
========================================= */
.ci-showcase {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.ci-logo-box {
    background: var(--bg-gray);
    border-radius: 8px;
    padding: 4rem 2rem;
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

    .ci-logo-box img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

.ci-desc h3 {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 1rem;
    font-weight: 800;
}

.ci-desc p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.7;
    word-break: keep-all;
    margin: 0 auto;
    max-width: 600px;
}

/* 컬러 팔레트 영역 */
.color-palette {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.color-item {
    flex: 1;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 130px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.color-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.color-hex {
    display: none;
    font-size: 0.9rem;
    opacity: 0.9;
    font-family: monospace;
    letter-spacing: 0.5px;
}

/* 다운로드 버튼 */
.download-btns {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    background: #f8fafc;
    color: #333;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
    border: 1px solid #cbd5e1;
    font-size: 0.95rem;
    flex: 1;
}

    .btn-down:hover {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

    .btn-down.primary {
        background: var(--primary-dark);
        color: #fff;
        border-color: var(--primary-dark);
    }

        .btn-down.primary:hover {
            background: #1e3a8a;
        }

    .btn-down .material-symbols-outlined {
        font-size: 20px;
    }

/* =========================================
    탭 메뉴 (공통)
========================================= */
.member_tab_menu {
    margin-bottom: 2.5rem;
    border-bottom: 2px solid #e2e8f0;
}

    .member_tab_menu ul {
        display: flex;
    }

    .member_tab_menu li {
        flex: 1;
        text-align: center;
    }

    .member_tab_menu a {
        display: block;
        padding: 1rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-muted);
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        transition: all 0.2s;
    }

        .member_tab_menu li.current a,
        .member_tab_menu a:hover {
            color: var(--primary-dark);
            border-bottom-color: var(--primary);
            background: #f8fafc;
        }

/* =========================================
    학술 프로그램 탭 & 리스트 디자인
========================================= */

/* 선택된 날짜 타이틀 */
.sub_tit2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sub_tit2::before {
        content: "calendar_month";
        font-family: 'Material Symbols Outlined';
        font-size: 1.6rem;
        color: var(--primary);
    }

    .sub_tit2.lecturer {
        margin-top: 3.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px dashed #cbd5e1;
        padding-bottom: 0.8rem;
    }

        .sub_tit2.lecturer::before {
            content: "location_on";
        }

/* 스케줄 카드 레이아웃 */
.sub-layout {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .sub-layout:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.06);
        border-color: #cbd5e1;
    }

    .sub-layout > li {
        display: flex;
    }

/* 좌측: 장소(강의실) 정보 */
.sub-left {
    width: 220px;
    background: var(--bg-gray);
    padding: 2rem 1.5rem;
    font-weight: 800;
    font-size: 1.1rem;
    color: #1e293b;
    border-right: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    word-break: keep-all;
}

/* 우측: 시간표 그리드 */
.sub-right {
    flex: 1;
}

    .sub-right.con-w2 {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2단 분할 */
    }

.r-box {
    padding: 2rem;
    border-right: 1px solid #e2e8f0;
    position: relative;
}

/* 그리드 내부 테두리 정리 */
.sub-right.con-w2 .r-box:nth-child(even) {
    border-right: none;
}

/* 시간 배지 */
.con-tit1 {
    display: inline-block;
    background: #eff6ff;
    color: var(--primary-dark);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

/* 인라인 스타일(padding-top:30px)을 CSS로 깔끔하게 제어 */
.r-box .con-tit1[style] {
    margin-top: 2rem;
    padding-top: 6px !important; /* 기존 인라인 스타일 덮어쓰기 */
}

/* 연자 및 주제 텍스트 */
.teacher .con-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .teacher .con-box span:nth-child(1) {
        font-weight: 800;
        font-size: 1.1rem;
        color: #111;
    }

    .teacher .con-box span:nth-child(2) {
        color: #475569;
        font-size: 1rem;
        line-height: 1.5;
        word-break: keep-all;
    }

/* =========================================
    연자 소개 카드 그리드 레이아웃
========================================= */
.teacher-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC 화면 2단 배열 */
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.teacher-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.8rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

    .teacher-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: var(--primary);
    }

.teacher-info {
    flex: 1;
    padding-right: 1.5rem;
}

/* 둥근 시간 뱃지 */
.teacher-time {
    display: inline-block;
    background: #eff6ff;
    color: var(--primary-dark);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    letter-spacing: 0.5px;
}

.teacher-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

    /* 연자 세부 전공 뱃지 */
    .teacher-name span {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-muted);
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 4px;
    }

.teacher-subject {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.4;
    word-break: keep-all;
    margin-bottom: 1.2rem;
}

/* 기존 이미지 교체형 "자세히 보기" 버튼 */
.btn-detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    transition: gap 0.2s ease;
}

.teacher-card:hover .btn-detail {
    gap: 8px; /* 호버 시 화살표가 우측으로 이동 */
}

.btn-detail .material-symbols-outlined {
    font-size: 16px;
    font-weight: 700;
}

/* 연자 프로필 사진 */
.teacher-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: var(--bg-gray);
    background-size: cover;
    background-position: center;
    border: 3px solid #eff6ff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* =========================================
    연자 상세(초록) 디자인 적용
========================================= */

.speaker-detail-wrap {
    background: #fff;
}

/* 일정 및 장소 헤더 뱃지 */
.speaker-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: var(--primary-dark);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 2rem;
    border: 1px solid #e2e8f0;
}

    .speaker-header .material-symbols-outlined {
        font-size: 20px;
    }

/* 프로필 상단 영역 (사진 + 정보) */
.speaker-profile {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 3rem;
    align-items: flex-start;
}

.speaker-photo {
    width: 220px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
}

    .speaker-photo img {
        width: 100%;
        height: auto;
        display: block;
    }

/* 상세 정보 리스트 */
.speaker-info {
    flex: 1;
}

    .speaker-info ul {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    .speaker-info li {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 1.2rem;
    }

        .speaker-info li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

.info-label {
    background: var(--primary-dark);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    flex-shrink: 0;
    text-align: center;
    min-width: 60px;
}

.info-value {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    word-break: keep-all;
    padding-top: 4px; /* 라벨과 수직 중앙 정렬 맞춤 */
}

    /* 약력 텍스트 꾸밈 (br 태그 적용된 부분) */
    .info-value.cv-text {
        color: #475569;
        font-size: 1rem;
    }

/* 초록(Abstract) 영역 */
.speaker-abstract {
    background: var(--bg-gray);
    border-radius: 12px;
    padding: 2.5rem;
    border-left: 5px solid var(--primary);
    margin-bottom: 3rem;
}

.abstract-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 1.5rem;
}

    .abstract-title .material-symbols-outlined {
        color: var(--primary);
        font-size: 26px;
    }

.abstract-content {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.8;
    word-break: keep-all;
}

/* 목록 버튼 영역 */
.btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.btn-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #333;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 12px 36px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .btn-list:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
    }

/* =========================================
    사전등록 안내 전용 스타일
========================================= */

/* 섹션 타이틀 */
.section-heading {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 3rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 0.8rem;
}

    .section-heading:first-of-type {
        margin-top: 0; /* 첫 번째 타이틀 여백 제거 */
    }

    .section-heading .material-symbols-outlined {
        color: var(--primary);
        font-size: 26px;
    }

/* 안내/알림 박스 (Info Box) */
.content-area.preapply .info-box {
    background: #eff6ff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-left: 4px solid var(--primary);
    text-align: left;
}

    .content-area.preapply .info-box p {
        font-size: 0.95rem;
        color: #334155;
        margin-bottom: 0.5rem;
        line-height: 1.6;
        word-break: keep-all;
    }

        .content-area.preapply .info-box p:last-child {
            margin-bottom: 0;
        }

/* 테이블 디자인 */
.table-wrap {
    width: 100%;
    overflow-x: auto; /* 모바일 가로 스크롤 허용 */
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
    background: #fff;
}

.data-table {
    width: 100%;
    min-width: 600px; /* 테이블 최소 너비 설정 */
    border-collapse: collapse;
    text-align: center;
}

    .data-table th {
        background: #f8fafc;
        color: var(--primary-dark);
        font-weight: 700;
        padding: 1.2rem;
        border-bottom: 2px solid #e2e8f0;
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .data-table td {
        padding: 1.2rem;
        border-bottom: 1px solid #e2e8f0;
        color: #444;
        vertical-align: middle;
        font-size: 1.05rem;
        line-height: 1.5;
    }

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

    .data-table tbody tr:hover {
        background: #f8fafc;
    }

/* 테이블 하단 텍스트 (작은 설명) */
.table-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 1rem;
    line-height: 1.6;
}

    .table-note span {
        display: block;
        margin-bottom: 0.3rem;
    }

/* 상세 정보 레이아웃 (카드형 리스트) */
.sub-layout {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

    .sub-layout > li {
        display: flex;
    }

/* 좌측: 항목명 */
.sub-left {
    width: 220px;
    background: var(--bg-gray);
    padding: 2rem 1.5rem;
    font-weight: 800;
    font-size: 1.1rem;
    color: #1e293b;
    border-right: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    word-break: keep-all;
}

/* 우측: 상세 내용 */
.sub-right {
    flex: 1;
    padding: 2rem;
}

/* 모바일 드래그 안내 텍스트 */
.mb-drag {
    display: none;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: right;
}

/* =========================================
    사전등록 신청 전용 카드 디자인
========================================= */
.action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2단 분할 */
    gap: 2rem;
    margin-top: 2rem;
}

.action-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .action-card:hover {
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: var(--primary);
        transform: translateY(-5px);
    }

.action-icon {
    width: 80px;
    height: 80px;
    background: #eff6ff;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    .action-icon .material-symbols-outlined {
        font-size: 40px;
    }

.action-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 1rem;
}

.action-desc {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 2rem;
    word-break: keep-all;
    flex: 1; /* 높이 맞춤 */
}

/* 연락처 및 이메일 강조 박스 */
.action-contact {
    background: var(--bg-gray);
    border-radius: 8px;
    padding: 1.2rem;
    width: 100%;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: #333;
    text-align: left;
    border: 1px solid #e2e8f0;
}

    .action-contact p {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .action-contact p:last-child {
            margin-bottom: 0;
        }

    .action-contact .material-symbols-outlined {
        font-size: 18px;
        color: var(--text-muted);
    }

/* 버튼 그룹 */
.action-btns {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    transition: all 0.2s;
    width: 100%;
}

    .btn-action.primary {
        background: var(--primary-dark);
        color: #fff;
        border: none;
    }

        .btn-action.primary:hover {
            background: #1e3a8a;
        }

    .btn-action.outline {
        background: #fff;
        color: #333;
        border: 1px solid #cbd5e1;
    }

        .btn-action.outline:hover {
            background: #f8fafc;
            border-color: var(--primary);
            color: var(--primary-dark);
        }

/* =========================================
    사전등록 조회 - 검색바 UI
========================================= */
.search-wrap {
    background: var(--bg-gray);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* 폼 요소 공통 스타일 */
.form-select, .form-input {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
}

    .form-select:focus, .form-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

/* 좌측: 정렬 필터 그룹 */
.filter-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 우측: 검색어 입력 그룹 */
.content-area.preapply .search-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

    .content-area.preapply .search-group .form-input {
        max-width: 240px;
    }

.btn-search {
    background: var(--primary-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 1rem;
    height: 42px; /* input과 높이 맞춤 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .btn-search:hover {
        background: #1e3a8a;
    }

/* =========================================
    데이터 테이블 (표) 디자인
========================================= */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 3rem;
}

.data-table {
    width: 100%;
    min-width: 800px; /* 원칼럼이므로 최소 너비를 더 여유있게 확보 */
    border-collapse: collapse;
    text-align: center;
}

    .data-table th {
        background: #f8fafc;
        color: var(--primary-dark);
        font-weight: 700;
        padding: 1.2rem 1rem;
        border-bottom: 2px solid #e2e8f0;
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .data-table td {
        padding: 1.2rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        color: #444;
        vertical-align: middle;
        font-size: 1rem;
    }

    .data-table tbody tr:hover {
        background: #f8fafc;
    }

/* 등록 내역 없음 (Empty State) */
.empty-row td {
    padding: 4rem 1rem;
    color: #64748b;
    font-size: 1.05rem;
}

.empty-row .material-symbols-outlined {
    display: block;
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

/* =========================================
           현장 등록 안내 전용 스타일 (리디자인)
        ========================================= */

/* 1. 이미지 대체용 세련된 그라디언트 비주얼 카드 */
.spot-banner-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #3b82f6 100%);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15);
    position: relative;
    overflow: hidden;
}

    .spot-banner-card::after {
        content: "";
        position: absolute;
        bottom: -30%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(230,77,253,0.08) 0%, rgba(255,255,255,0) 70%);
        border-radius: 50%;
    }

.banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.banner-sub {
    font-size: 1.15rem;
    opacity: 0.9;
    font-weight: 500;
    word-break: keep-all;
}

/* 2. 현장등록 3단계 프로세스 그리드 (스마트폰 트렌드 매칭) */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.process-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    transition: transform 0.2s, background 0.2s;
}

    .process-item:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.12);
    }

    /* 단계 사이 화살표 가이드 (PC) */
    .process-item:not(:last-child)::after {
        content: "chevron_right";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        top: 50%;
        right: -1rem;
        transform: translateY(-50%);
        font-size: 24px;
        color: rgba(255, 255, 255, 0.3);
        z-index: 5;
    }

.process-icon {
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
}

    .process-icon .material-symbols-outlined {
        font-size: 28px;
        color: #fff;
    }

.process-step-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: #60a5fa;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    display: block;
}

.process-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.process-desc {
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.4;
    word-break: keep-all;
}

/* 섹션 타이틀 */
.section-heading {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 4rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 0.8rem;
}

    .section-heading .material-symbols-outlined {
        color: var(--primary);
        font-size: 26px;
    }

/* 데이터 테이블 */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
    background: #fff;
}

.data-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    text-align: center;
}

    .data-table th {
        background: #f8fafc;
        color: var(--primary-dark);
        font-weight: 700;
        padding: 1.2rem;
        border-bottom: 2px solid #e2e8f0;
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .data-table td {
        padding: 1.2rem;
        border-bottom: 1px solid #e2e8f0;
        color: #444;
        vertical-align: middle;
        font-size: 1.05rem;
        line-height: 1.5;
    }

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

    .data-table tbody tr:hover {
        background: #f8fafc;
    }

.bullet-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .bullet-list li {
        position: relative;
        padding-left: 20px;
        font-size: 1.05rem;
        color: #334155;
        line-height: 1.6;
        word-break: keep-all;
    }

        .bullet-list li::before {
            content: "check";
            font-family: 'Material Symbols Outlined';
            position: absolute;
            top: 2px;
            left: 0;
            font-size: 16px;
            color: var(--primary);
            font-weight: bold;
        }

.mb-drag {
    display: none;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: right;
}

/* =========================================
    핸즈온(Hands-On) 전용 스타일
========================================= */

/* 상단 비주얼 배너 */
.hands-banner {
    background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    .hands-banner::after {
        content: "dentistry";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        right: 5%;
        bottom: -20%;
        font-size: 240px;
        color: rgba(255, 255, 255, 0.03);
        pointer-events: none;
    }

    .hands-banner .banner-tag {
        box-shadow: none;
    }

.banner-tag {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.banner-sub {
    font-size: 1.1rem;
    color: #cbd5e1;
    font-weight: 500;
    word-break: keep-all;
    max-width: 600px;
    line-height: 1.6;
}

/* 정보 카드 2단 그리드 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.info-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .info-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: #cbd5e1;
    }

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #f1f5f9;
}

    .card-header .material-symbols-outlined {
        color: var(--primary);
        font-size: 24px;
    }

/* [공통] 카드 내부의 리스트 기본 설정 (폰트나 간격만 공통 적용) */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

    .card-list li {
        position: relative;
        padding-left: 18px;
        font-size: 1.05rem;
        color: #444;
        line-height: 1.5;
        word-break: keep-all;
    }

/* 하단 신청 및 결제 강조 박스 */
.apply-action-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.apply-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 1.5rem;
}

.payment-info {
    background: #fff;
    display: inline-block;
    text-align: left;
    padding: 1.5rem 2.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    border: 1px solid #e2e8f0;
}

    .payment-info p {
        font-size: 1.05rem;
        color: #333;
        margin-bottom: 0.5rem;
        line-height: 1.6;
    }

        .payment-info p:last-child {
            margin-bottom: 0;
        }

    .payment-info strong {
        color: var(--primary-dark);
    }

    .payment-info .highlight {
        color: #ef4444;
        font-weight: 700;
    }

.btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-dark);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

    .btn-apply:hover {
        background: #1e3a8a;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
    }

.contact-info {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #64748b;
}

/* =========================================
    포스터 발표 신청 전용 스타일
========================================= */

/* 상단 비주얼 배너 */
.visual-banner {
    background: linear-gradient(135deg, #0f172a 0%, #3b82f6 100%);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    .visual-banner::after {
        content: "campaign";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        right: 5%;
        bottom: -20%;
        font-size: 240px;
        color: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

.banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.banner-sub {
    font-size: 1.1rem;
    color: #cbd5e1;
    font-weight: 500;
    word-break: keep-all;
    max-width: 650px;
    line-height: 1.6;
}

.card-list.type-dot li {
    padding-left: 18px; /* 점 크기에 맞춘 여백 */
}

    .card-list.type-dot li::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        width: 6px;
        height: 6px;
        background-color: var(--accent); /* 핑크색 */
        border-radius: 50%;
    }

/* 정보 카드 2단 그리드 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.info-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .info-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: #cbd5e1;
    }

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #f1f5f9;
}

    .card-header .material-symbols-outlined {
        color: var(--primary);
        font-size: 26px;
    }

/* 하단 신청 액션 박스 */
.apply-action-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.apply-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 0.5rem;
}

.apply-desc {
    font-size: 1.05rem;
    color: #334155;
    margin-bottom: 2rem;
}

.action-contact {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2rem;
    font-size: 1rem;
    color: #333;
    text-align: left;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

    .action-contact p {
        margin-bottom: 0.6rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .action-contact p:last-child {
            margin-bottom: 0;
        }

    .action-contact .material-symbols-outlined {
        font-size: 20px;
        color: var(--text-muted);
    }

.btn-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    transition: all 0.2s;
    flex: 1;
}

    .btn-action.primary {
        background: var(--primary-dark);
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
    }

        .btn-action.primary:hover {
            background: #1e3a8a;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
        }


/* =========================================
    홍보동영상 전용 스타일
========================================= */

/* 세련된 비디오 플레이어 래퍼 */
.video-wrap {
    max-width: 1000px; /* 너무 넓어지는 것을 방지 */
    margin: 0 auto 3rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    background-color: #000;
    border: 1px solid #e2e8f0;
    position: relative;
}

    .video-wrap video {
        width: 100%;
        display: block;
        border-radius: 16px; /* 브라우저 렌더링 시 모서리 보호 */
    }

/* 안내 사항 정보 박스 */
.content-area.video .info-box {
    max-width: 1000px;
    margin: 0 auto;
    background: #eff6ff;
    border-radius: 12px;
    padding: 2.5rem;
    border-left: 4px solid var(--primary);
}

.content-area.video .info-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.2rem;
}

    .content-area.video .info-box-title .material-symbols-outlined {
        font-size: 24px;
    }

.bullet-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .bullet-list li {
        position: relative;
        padding-left: 20px;
        font-size: 1.05rem;
        color: #334155;
        line-height: 1.6;
        word-break: keep-all;
    }

        .bullet-list li::before {
            content: "done";
            font-family: 'Material Symbols Outlined';
            position: absolute;
            top: 2px;
            left: 0;
            font-size: 16px;
            color: var(--primary);
            font-weight: bold;
        }

/* =========================================
    로그인 폼 전용 스타일
========================================= */

/* 로그인 래퍼 (좌측 폼, 우측 안내) */
.login-wrapper {
    display: flex;
    gap: 3rem;
    align-items: stretch;
    max-width: 960px;
    margin: 0 auto 4rem;
}

/* 좌측: 로그인 카드 */
.login-card {
    flex: 1;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

    .login-header .material-symbols-outlined {
        font-size: 48px;
        color: var(--primary);
        background: #eff6ff;
        padding: 1rem;
        border-radius: 50%;
        margin-bottom: 1rem;
    }

    .login-header h3 {
        font-size: 1.6rem;
        font-weight: 800;
        color: #111;
        margin-bottom: 0.5rem;
    }

    .login-header p {
        font-size: 0.95rem;
        color: var(--text-muted);
        word-break: keep-all;
    }

.input-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

    .input-group label {
        display: block;
        font-size: 0.95rem;
        font-weight: 700;
        color: #334155;
        margin-bottom: 0.5rem;
    }

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    outline: none;
    transition: all 0.2s ease;
    background-color: #f8fafc;
}

    .form-input:focus {
        border-color: var(--primary);
        background-color: #fff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-input::placeholder {
        color: #94a3b8;
        font-size: 0.9rem;
    }

.btn-login {
    width: 100%;
    background: var(--primary-dark);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

    .btn-login:hover {
        background: #1e3a8a;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
    }

/* 우측: 안내 정보 박스 */
.login-info-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

    .login-info-box .info-section {
        background: #f8fafc;
        padding: 2rem;
        border-radius: 12px;
        border-left: 4px solid var(--primary);
        height: 100%;
    }

        .login-info-box .info-section.gray {
            border-left-color: #94a3b8;
        }

        .login-info-box .info-section h4 {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 1.1rem;
            color: var(--primary-dark);
            margin-bottom: 1rem;
            font-weight: 800;
        }

        .login-info-box .info-section.gray h4 {
            color: #334155;
        }

        .login-info-box .info-section h4 .material-symbols-outlined {
            font-size: 22px;
        }

        .login-info-box .info-section p {
            font-size: 0.95rem;
            color: #475569;
            line-height: 1.6;
            word-break: keep-all;
        }

.contact-number {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1.2rem;
    background: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 800;
    color: #111;
    border: 1px solid #e2e8f0;
    font-size: 1.05rem;
}

    .contact-number .material-symbols-outlined {
        color: var(--primary);
        font-size: 20px;
    }

/* =========================================
    전시회 관람안내
========================================= */
.card-list.type-check li {
    padding-left: 20px; /* 아이콘 크기에 맞춘 여백 */
}

    .card-list.type-check li::before {
        content: "done"; /* Material Symbols 아이콘 텍스트 */
        font-family: 'Material Symbols Outlined';
        position: absolute;
        top: 2px;
        left: 0;
        font-size: 16px;
        color: var(--primary); /* 블루 */
        font-weight: bold;
    }

.visual-banner.info::after {
    content: "storefront";
}
section.exhibition .info-grid {
    grid-template-columns: repeat(3, 1fr);
}

section.exhibition .info-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

    section.exhibition .info-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: var(--primary);
    }

section.exhibition .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

    section.exhibition .card-header .material-symbols-outlined {
        color: var(--primary);
        font-size: 28px;
    }

section.exhibition .highlight-text {
    color: #ef4444;
    font-weight: 700;
}

section.exhibition .highlight-box {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-top: 0.5rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
}

/* =========================================
    출품규정 전용 스타일 (리디자인)
========================================= */

/* 상단 비주얼 배너 */
.visual-banner.rule::after {
    content: "gavel";
}

.banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.banner-sub {
    font-size: 1.1rem;
    color: #e0e7ff;
    font-weight: 500;
    word-break: keep-all;
    max-width: 650px;
    line-height: 1.6;
}

/* 규정 리스트 레이아웃 */
.rule-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1000px; /* 글을 읽기 편한 적정 너비 유지 */
    margin: 0 auto;
}

.rule-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

    .rule-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: var(--primary);
    }

.rule-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #f1f5f9;
}

    .rule-title .material-symbols-outlined {
        color: var(--primary);
        font-size: 22px;
    }

.rule-desc {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.7;
    word-break: keep-all;
}

    .rule-desc .highlight-num {
        display: inline-block;
        background: #eff6ff;
        color: var(--primary-dark);
        font-weight: 700;
        font-size: 0.9rem;
        padding: 2px 8px;
        border-radius: 4px;
        margin-right: 4px;
    }

/* 하이라이트 박스 (위약금, 해약금 부분) */
.rule-penalty-box {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 1.2rem;
    margin-top: 1rem;
    font-weight: 600;
    color: #334155;
}

    .rule-penalty-box p {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .rule-penalty-box p:last-child {
            margin-bottom: 0;
        }

    .rule-penalty-box .material-symbols-outlined {
        font-size: 18px;
        color: #ef4444;
    }

/* =========================================
    전시회 참여신청 전용 스타일 (리디자인)
========================================= */

/* 상단 비주얼 배너 */
.visual-banner.main::after {
    content: "handshake";
}

.banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.banner-sub {
    font-size: 1.1rem;
    color: #e0e7ff;
    font-weight: 500;
    word-break: keep-all;
    max-width: 650px;
    line-height: 1.6;
}

/* 섹션 타이틀 */
.section-heading {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 4rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 0.8rem;
}

    .section-heading .material-symbols-outlined {
        color: var(--primary);
        font-size: 26px;
    }

/* 6단계 프로세스 스텝 그리드 */
.step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.step-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

    .step-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: var(--primary);
    }

.step-num {
    display: inline-block;
    background: #eff6ff;
    color: var(--primary-dark);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.step-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 0.6rem;
}

.step-desc {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.5;
    word-break: keep-all;
}

/* PC 화면 스텝 사이 화살표 (3의 배수가 아닐 때만 노출) */
@media screen and (min-width: 769px) {
    .step-card:not(:nth-child(3n))::after {
        content: "chevron_right";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        top: 50%;
        right: -1.4rem;
        transform: translateY(-50%);
        font-size: 32px;
        color: #cbd5e1;
        z-index: 10;
    }
}

/* 하단 신청 방법 2분할 카드 (Action Grid) */
.action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.action-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .action-card:hover {
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: var(--primary);
        transform: translateY(-5px);
    }

.action-icon {
    width: 80px;
    height: 80px;
    background: #eff6ff;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

    .action-icon .material-symbols-outlined {
        font-size: 40px;
    }

.action-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 1rem;
}

.action-desc {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 2rem;
    word-break: keep-all;
    flex: 1; /* 높이 맞춤 */
}

.action-contact {
    background: var(--bg-gray);
    border-radius: 8px;
    padding: 1.2rem;
    width: 100%;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: #333;
    text-align: left;
    border: 1px solid #e2e8f0;
}

    .action-contact p {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .action-contact p:last-child {
            margin-bottom: 0;
        }

    .action-contact .material-symbols-outlined {
        font-size: 18px;
        color: var(--text-muted);
    }

.action-btns {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    transition: all 0.2s;
    width: 100%;
}

    .btn-action.primary {
        background: var(--primary-dark);
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
    }

        .btn-action.primary:hover {
            background: #1e3a8a;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
        }

    .btn-action.outline {
        background: #fff;
        color: #333;
        border: 1px solid #cbd5e1;
    }

        .btn-action.outline:hover {
            background: #f8fafc;
            border-color: var(--primary);
            color: var(--primary-dark);
        }

/* =========================================
    부스안내 및 전시장 전용 스타일 (리디자인)
========================================= */

/* 상단 비주얼 배너 */
section.exhibition.fly .visual-banner {
    background: linear-gradient(135deg, #0f172a 0%, #3b82f6 100%);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    section.exhibition.fly .visual-banner::after {
        content: "map";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        right: 5%;
        bottom: -20%;
        font-size: 240px;
        color: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

section.exhibition.fly .banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

section.exhibition.fly .banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

section.exhibition.fly .banner-sub {
    font-size: 1.1rem;
    color: #e0e7ff;
    font-weight: 500;
    word-break: keep-all;
    max-width: 650px;
    line-height: 1.6;
}

/* 정보 컨텐츠 카드 레이아웃 (수직 적층) */
section.exhibition.fly .card-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 4rem;
}

section.exhibition.fly .content-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

    section.exhibition.fly .content-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-color: var(--primary);
    }

section.exhibition.fly .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #cbd5e1;
}

    section.exhibition.fly .card-header .material-symbols-outlined {
        color: var(--primary);
        font-size: 28px;
    }

/* 불릿 리스트 */
section.exhibition.fly .bullet-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    section.exhibition.fly .bullet-list li {
        position: relative;
        padding-left: 20px;
        font-size: 1.05rem;
        color: #334155;
        line-height: 1.6;
        word-break: keep-all;
    }

        section.exhibition.fly .bullet-list li::before {
            content: "done";
            font-family: 'Material Symbols Outlined';
            position: absolute;
            top: 2px;
            left: 0;
            font-size: 16px;
            color: var(--primary);
            font-weight: bold;
        }

/* 이미지 컨테이너 (도면 등) */
section.exhibition.fly .img-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: var(--bg-gray);
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
}

    section.exhibition.fly .img-container img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

/* 데이터 테이블 */
section.exhibition.fly .table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

section.exhibition.fly .data-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    text-align: center;
}

    section.exhibition.fly .data-table th {
        background: #eff6ff;
        color: var(--primary-dark);
        font-weight: 800;
        padding: 1.2rem;
        border-bottom: 2px solid #e2e8f0;
        font-size: 1.1rem;
    }

    section.exhibition.fly .data-table td {
        padding: 1.2rem;
        border-bottom: 1px solid #e2e8f0;
        color: #111;
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.5;
    }

    section.exhibition.fly .data-table tr:last-child td {
        border-bottom: none;
    }

    section.exhibition.fly .data-table tbody tr:hover {
        background: #f8fafc;
    }

/* 하단 안내 사항 정보 박스 */
section.exhibition.fly .info-box {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--primary);
    margin-top: 1.5rem;
}

    section.exhibition.fly .info-box p {
        margin-bottom: 0.6rem;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 1rem;
        color: #475569;
        line-height: 1.6;
    }

        section.exhibition.fly .info-box p:last-child {
            margin-bottom: 0;
        }

    section.exhibition.fly .info-box .material-symbols-outlined {
        font-size: 20px;
        color: var(--text-muted);
        margin-top: 2px;
    }

/* =========================================
    교통 안내 전용 스타일 (리디자인)
========================================= */

/* 상단 비주얼 배너 */
section.informaion.government .visual-banner {
    background: linear-gradient(135deg, #0f172a 0%, #3b82f6 100%);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    section.informaion.government .visual-banner::after {
        content: "pin_drop";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        right: 5%;
        bottom: -20%;
        font-size: 240px;
        color: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

.banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.banner-sub {
    font-size: 1.1rem;
    color: #e0e7ff;
    font-weight: 500;
    word-break: keep-all;
    max-width: 650px;
    line-height: 1.6;
}

/* 지도 영역 */
.location-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    margin-bottom: 3rem;
}

.map-iframe {
    width: 100%;
    height: 450px;
    border: none;
    display: block;
}

.location-info {
    padding: 2rem 2.5rem;
    background: var(--bg-gray);
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

    .location-info .icon-box {
        width: 50px;
        height: 50px;
        background: var(--primary-dark);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .location-info .icon-box .material-symbols-outlined {
            font-size: 24px;
        }

.location-details {
    flex: 1;
}

    .location-details p {
        font-size: 1.05rem;
        color: #333;
        margin-bottom: 0.5rem;
        line-height: 1.6;
        word-break: keep-all;
    }

        .location-details p:last-child {
            margin-bottom: 0;
        }

    .location-details strong {
        color: var(--primary-dark);
    }

    .location-details .parking-note {
        color: #ef4444;
        font-weight: 700;
        font-size: 0.95rem;
        display: block;
        margin-top: 4px;
    }

/* 교통 수단별 안내 섹션 */
.transport-section {
    margin-bottom: 3.5rem;
}

.transport-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #222;
}

    .transport-title .material-symbols-outlined {
        color: var(--primary);
        font-size: 28px;
    }

/* 데이터 테이블 공통 */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.data-table {
    width: 100%;
    min-width: 650px; /* 모바일 가로 스크롤 방어선 */
    border-collapse: collapse;
    text-align: left; /* 기본 좌측 정렬 */
}

    .data-table th, .data-table td {
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid #e2e8f0;
        line-height: 1.6;
    }

    .data-table th {
        background: #f8fafc;
        color: var(--primary-dark);
        font-weight: 800;
        font-size: 1.05rem;
        border-bottom: 2px solid #cbd5e1;
        white-space: nowrap;
        text-align: center; /* 헤더는 중앙 정렬 */
    }

    .data-table td {
        color: #444;
        font-size: 1.05rem;
        vertical-align: middle;
    }

        .data-table td.center {
            text-align: center;
        }
    /* 필요시 중앙 정렬용 클래스 */

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

    .data-table tbody tr:hover {
        background: #f8fafc;
    }

.link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: var(--primary-dark);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: background 0.2s;
}

    .link-icon:hover {
        background: #dbeafe;
    }

    .link-icon .material-symbols-outlined {
        font-size: 16px;
        margin-left: 4px;
    }

.mb-drag {
    display: none;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    text-align: right;
}

/* =========================================
    숙박 안내 전용 스타일 (리디자인)
========================================= */

/* 상단 비주얼 배너 */
section.informaion.federal .visual-banner {
    background: linear-gradient(135deg, #0f172a 0%, #3b82f6 100%);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    section.informaion.federal .visual-banner::after {
        content: "bed";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        right: 5%;
        bottom: -30%;
        font-size: 260px;
        color: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

.banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.banner-sub {
    font-size: 1.1rem;
    color: #e0e7ff;
    font-weight: 500;
    word-break: keep-all;
    max-width: 650px;
    line-height: 1.6;
}

/* 섹션 타이틀 */
.section-heading {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 4rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed #cbd5e1;
    padding-bottom: 0.8rem;
}

    .section-heading .material-symbols-outlined {
        color: var(--primary);
        font-size: 26px;
    }

/* -----------------------------------------
    호텔 리스트 3단 그리드 카드
----------------------------------------- */
.hotel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 4rem;
}

.hotel-card {
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
}

    .hotel-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        border-color: var(--primary);
    }

.hotel-img {
    width: 100%;
    height: 200px;
    background: var(--bg-gray);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .hotel-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.hotel-card:hover .hotel-img img {
    transform: scale(1.05);
}

.hotel-body {
    padding: 1.8rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hotel-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

.hotel-info-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.8rem;
    flex: 1;
}

    .hotel-info-list p {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 0.95rem;
        color: #555;
        line-height: 1.5;
        word-break: keep-all;
    }

        .hotel-info-list p .material-symbols-outlined {
            font-size: 18px;
            color: var(--primary);
            margin-top: 2px;
            flex-shrink: 0;
        }

/* 하단 이동 버튼 */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    background: #f8fafc;
    color: #333;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.2s;
    width: 100%;
}

    .btn-action:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
    }

    .btn-action .material-symbols-outlined {
        font-size: 18px;
    }

/* -----------------------------------------
    카카오맵 지도 컨테이너
----------------------------------------- */
.map-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    margin-bottom: 3rem;
    background: #fff;
}

.map-header {
    padding: 1.5rem 2rem;
    background: var(--bg-gray);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
}

    .map-header .material-symbols-outlined {
        font-size: 26px;
    }

/* 카카오맵 오버레이 커스텀 (모던화) */
.customoverlay {
    position: relative;
    bottom: 55px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    float: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .customoverlay:nth-of-type(n) {
        border: 0;
    }

    .customoverlay a {
        display: block;
        text-decoration: none;
        color: #fff;
        text-align: center;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        overflow: hidden;
        background: var(--primary) url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png') no-repeat right 14px center;
    }

    .customoverlay .title {
        display: block;
        text-align: center;
        background: #fff;
        color: #111;
        margin-right: 35px;
        padding: 10px 15px;
        font-size: 14px;
        font-weight: 700;
    }

    .customoverlay:after {
        content: '';
        position: absolute;
        margin-left: -12px;
        left: 50%;
        bottom: -12px;
        width: 22px;
        height: 12px;
        background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')
    }

/* =========================================
    보도 자료 (게시판) 전용 스타일
========================================= */

/* 상단 비주얼 배너 */
section.community.list .visual-banner {
    background: linear-gradient(135deg, #0f172a 0%, #3b82f6 100%);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    section.community.list .visual-banner::after {
        content: "campaign";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        right: 5%;
        bottom: -20%;
        font-size: 240px;
        color: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

.banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.banner-sub {
    font-size: 1.1rem;
    color: #e0e7ff;
    font-weight: 500;
    word-break: keep-all;
    max-width: 650px;
    line-height: 1.6;
}

/* 게시판 검색바 UI */
.search-wrap {
    background: var(--bg-gray);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: flex-end; /* 우측 정렬 */
    align-items: center;
}

.search-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    max-width: 500px; /* 검색바 최대 너비 제한 */
}

.form-select, .form-input {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
}

.form-select {
    width: 30%;
}

.form-input {
    flex: 1;
}

    .form-select:focus, .form-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.btn-search {
    background: var(--primary-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 1rem;
    height: 42px; /* input과 높이 맞춤 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .btn-search:hover {
        background: #1e3a8a;
    }

/* 게시판 데이터 테이블 */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 2.5rem;
}

.board-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    text-align: center;
}

    .board-table th {
        background: #f8fafc;
        color: var(--primary-dark);
        font-weight: 700;
        padding: 1.2rem 1rem;
        border-bottom: 2px solid #cbd5e1;
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .board-table td {
        padding: 1.2rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        color: #64748b;
        vertical-align: middle;
        font-size: 1rem;
    }

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

    .board-table tbody tr:hover {
        background: #f1f5f9;
    }

    /* 게시판 제목 컬럼 강조 */
    .board-table td.tb-tit {
        text-align: left;
        font-weight: 600;
        color: #111;
    }

        .board-table td.tb-tit a {
            display: block;
            width: 100%;
            transition: color 0.2s;
        }

            .board-table td.tb-tit a:hover {
                color: var(--primary);
                text-decoration: underline;
            }

/* 모던 페이징 (Pagination) */
.modern-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 4rem;
}

    .modern-pagination a, .modern-pagination span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        color: #475569;
        background: #fff;
        border: 1px solid #cbd5e1;
        transition: all 0.2s;
    }

        .modern-pagination a:hover {
            background: #f1f5f9;
            border-color: var(--primary);
            color: var(--primary-dark);
        }

    .modern-pagination .active {
        background: var(--primary-dark);
        color: #fff;
        border-color: var(--primary-dark);
    }

/* =========================================
    참가업체 검색 (데이터 게시판) 전용 스타일
========================================= */

/* 상단 비주얼 배너 */
section.community.biz .visual-banner {
    background: linear-gradient(135deg, #0f172a 0%, #3b82f6 100%);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    section.community.biz .visual-banner::after {
        content: "storefront";
        font-family: 'Material Symbols Outlined';
        position: absolute;
        right: 5%;
        bottom: -20%;
        font-size: 240px;
        color: rgba(255, 255, 255, 0.05);
        pointer-events: none;
    }

.banner-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(230, 77, 253, 0.3);
}

.banner-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.banner-sub {
    font-size: 1.1rem;
    color: #e0e7ff;
    font-weight: 500;
    word-break: keep-all;
    max-width: 650px;
    line-height: 1.6;
}

/* 복합 검색바 UI (좌: 정렬, 우: 검색) */
.search-wrap {
    background: var(--bg-gray);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.filter-group, .search-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-group {
    width: 100%;
    max-width: 500px;
}

.form-select, .form-input {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
}

.filter-group .form-select {
    width: auto;
    min-width: 110px;
}

.search-group .form-select {
    width: 35%;
}

.search-group .form-input {
    flex: 1;
}

.form-select:focus, .form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-search {
    background: var(--primary-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 1rem;
    height: 42px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .btn-search:hover {
        background: #1e3a8a;
    }

/* 업체 리스트 데이터 테이블 */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 2.5rem;
}

.board-table {
    width: 100%;
    min-width: 700px; /* 항목 수가 많아 모바일 깨짐 방지 위해 약간 넓게 */
    border-collapse: collapse;
    text-align: center;
}

    .board-table th {
        background: #f8fafc;
        color: var(--primary-dark);
        font-weight: 700;
        padding: 1.2rem 1rem;
        border-bottom: 2px solid #cbd5e1;
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .board-table td {
        padding: 1.2rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        color: #64748b;
        vertical-align: middle;
        font-size: 1rem;
    }

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

    .board-table tbody tr:hover {
        background: #f1f5f9;
    }

    /* 제목 컬럼 강조 */
    .board-table td.tb-tit {
        text-align: left;
        font-weight: 800;
        color: #111;
        font-size: 1.05rem;
    }

    /* 연락처 숫자 스타일 */
    .board-table td.tb-phone {
        font-family: monospace;
        font-size: 1.05rem;
        letter-spacing: 0.5px;
        color: #475569;
    }

/* 모던 페이징 (Pagination) */
.modern-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 4rem;
}

    .modern-pagination a, .modern-pagination span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        color: #475569;
        background: #fff;
        border: 1px solid #cbd5e1;
        transition: all 0.2s;
        cursor: pointer;
    }

        .modern-pagination a:hover {
            background: #f1f5f9;
            border-color: var(--primary);
            color: var(--primary-dark);
        }

    .modern-pagination .active {
        background: var(--primary-dark);
        color: #fff;
        border-color: var(--primary-dark);
    }


/* =========================================
    게시판 상세보기(View) 전용 스타일
========================================= */
.board-view-wrap {
    max-width: 1000px; /* 가독성을 위한 최적의 본문 너비 제한 */
    margin: 0 auto;
}

/* 1. 상단 타이틀 영역 */
.view-header {
    border-top: 2px solid var(--primary-dark);
    border-bottom: 1px solid var(--border-color);
    padding: 2rem 1.5rem;
    background: #fff;
}

.view-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
    margin-bottom: 1rem;
    word-break: keep-all;
}

/* 상단 메타 정보 (작성자, 날짜, 조회수) */
.view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

    .view-meta li {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .view-meta li .material-symbols-outlined {
            font-size: 18px;
            color: var(--primary);
        }

        .view-meta li:not(:last-child)::after {
            content: "";
            display: inline-block;
            width: 1px;
            height: 12px;
            background: #cbd5e1;
            margin-left: 1.5rem;
        }

/* 2. 첨부파일 영역 */
.view-attachment {
    background: var(--bg-gray);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.attach-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 2px;
}

.attach-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.attach-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
}

    .attach-file:hover {
        color: #1e3a8a;
        text-decoration: underline;
    }

    .attach-file .material-symbols-outlined {
        font-size: 16px;
    }

/* 3. 본문 내용 영역 */
.view-content {
    padding: 3.5rem 1.5rem;
    min-height: 300px;
    font-size: 1.1rem;
    color: #222;
    line-height: 1.8;
    word-break: keep-all;
    border-bottom: 1px solid var(--border-color);
    white-space: pre-wrap;
}

    .view-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 2rem 0;
        display: block;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

/* 4. 이전글 / 다음글 내비게이션 */
.view-navigation {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.nav-row {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 1srem;
}

    .nav-row:last-child {
        border-bottom: none;
    }

.nav-label {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100px;
    font-weight: 700;
    color: #475569;
    flex-shrink: 0;
}

    .nav-label .material-symbols-outlined {
        font-size: 18px;
        color: var(--text-muted);
    }

.nav-link {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
    transition: color 0.2s;
}

    .nav-link:hover {
        color: var(--primary);
        text-decoration: underline;
    }

    .nav-link.none {
        color: #94a3b8;
        pointer-events: none; /* 클릭 방지 */
    }

/* 5. 하단 버튼 영역 */
.content-area.detail .btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.content-area.detail .btn-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #333;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 12px 40px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .content-area.detail .btn-list:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
    }

    .content-area.detail .btn-list .material-symbols-outlined {
        font-size: 20px;
    }

/* =========================================
    사전등록 전용 스타일 (리디자인)
========================================= */

/* 탭 메뉴 */
.preapplyform .tab-menu {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 3rem;
    gap: 1rem;
}

    .preapplyform .tab-menu li a {
        display: block;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        font-weight: 700;
        color: #64748b;
        border-bottom: 3px solid transparent;
        margin-bottom: -1px;
        transition: all 0.2s;
    }

    .preapplyform .tab-menu li.active a, .tab-menu li a:hover {
        color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

/* 공지사항 / 안내 박스 */
.preapplyform .notice-box {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 1.5rem;
    color: #b91c1c;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.preapplyform .info-box {
    background: #f8fafc;
    border-left: 4px solid var(--primary);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2.5rem;
}

    .preapplyform .info-box p {
        font-size: 0.95rem;
        color: #475569;
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }

        .preapplyform .info-box p:last-child {
            margin-bottom: 0;
        }

/* 폼 섹션 카드 */
.preapplyform .form-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    margin-bottom: 3rem;
    overflow: hidden;
}

.preapplyform .form-header {
    background: var(--bg-gray);
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .preapplyform .form-header span.req-note {
        font-size: 0.9rem;
        color: #64748b;
        font-weight: 500;
    }

/* 반응형 폼 Row 레이아웃 */
.preapplyform .form-row {
    display: flex;
    border-bottom: 1px solid #f1f5f9;
    padding: 1.5rem;
    align-items: flex-start;
}

    .preapplyform .form-row:last-child {
        border-bottom: none;
    }

.preapplyform .form-label {
    width: 180px;
    font-weight: 700;
    color: #334155;
    padding-top: 10px;
    flex-shrink: 0;
}

.preapplyform .form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 폼 입력 컨트롤 */
.preapplyform .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.preapplyform .form-input, .form-select {
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: all 0.2s;
    background: #fff;
}

    .preapplyform .form-input:focus, .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .preapplyform .form-input.w-full {
        width: 100%;
    }

    .preapplyform .form-input.w-small {
        width: 80px;
        text-align: center;
    }

    .preapplyform .form-input.w-mid {
        width: 150px;
    }

.preapplyform .form-select.w-mid {
    width: 180px;
}

.preapplyform .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #94a3b8;
    color: #475569;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    height: 42px; /* input 높이와 매칭 */
    white-space: nowrap;
}

    .preapplyform .btn-outline:hover {
        background: #f1f5f9;
        border-color: var(--primary-dark);
        color: var(--primary-dark);
    }

.preapplyform .form-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-top: 4px;
}

/* 라디오 버튼 커스텀 */
.preapplyform .radio-group {
    display: flex;
    gap: 1.5rem;
    padding-top: 10px;
}

.preapplyform .radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    color: #334155;
}

    .preapplyform .radio-label input[type="radio"] {
        width: 16px;
        height: 16px;
        accent-color: var(--primary);
    }

/* 등록비 테이블 */
.preapplyform .data-table {
    width: 100%;
    min-width: auto;
    border-collapse: collapse;
    text-align: center;
    margin-top: 1rem;
}

    .preapplyform .data-table th {
        background: var(--bg-gray);
        padding: 1rem;
        border-bottom: 2px solid #cbd5e1;
        font-weight: 700;
        color: var(--primary-dark);
    }

    .preapplyform .data-table td {
        padding: 1rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.95rem;
        vertical-align: middle;
    }

    .preapplyform .data-table tr:last-child td {
        border-bottom: none;
    }

.preapplyform .total-price-row td {
    background: #fefce8;
    font-size: 1.2rem;
    font-weight: 800;
    color: #b45309;
    text-align: right !important;
    padding-right: 2rem;
}

/* 하단 액션 버튼 */
.preapplyform .action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 4rem 0;
}

.preapplyform .btn-submit, .btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 160px;
}

.preapplyform .btn-submit {
    background: var(--primary-dark);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

    .preapplyform .btn-submit:hover {
        background: #1e3a8a;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
    }

.preapplyform .btn-cancel {
    background: #fff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

    .preapplyform .btn-cancel:hover {
        background: #f1f5f9;
        color: #111;
    }


/* =========================================
    보수교육 참가 확인서 전용 스타일
========================================= */

/* 확인서 카드 컨테이너 */
.cert-card-wrap {
    padding: 1rem;
}

.cert-card {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 4rem 3.5rem;
    position: relative;
    overflow: hidden;
    border-top: 8px solid var(--primary-dark);
}

    /* 배경 워터마크 효과 */
    .cert-card::before {
        content: "CDC 2026";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-15deg);
        font-size: 8rem;
        font-weight: 900;
        color: rgba(59, 130, 246, 0.03);
        pointer-events: none;
        white-space: nowrap;
        z-index: 0;
    }

/* 카드 내용물 (워터마크 위로 오게) */
.cert-inner {
    position: relative;
    z-index: 1;
}

.cert-header {
    text-align: center;
    margin-bottom: 3rem;
    border-bottom: 2px solid #111;
    padding-bottom: 1.5rem;
}

    .cert-header h2 {
        font-size: 2.2rem;
        font-weight: 800;
        color: #111;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
    }

    .cert-header h3 {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--primary-dark);
    }

/* 데이터 그리드 (테이블 대체) */
.cert-data {
    display: grid;
    grid-template-columns: 140px 1fr;
    border-top: 1px solid #111;
}

    .cert-data dt {
        background: var(--bg-gray);
        padding: 1.2rem 1.5rem;
        font-weight: 800;
        color: #333;
        border-bottom: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        font-size: 1.05rem;
    }

    .cert-data dd {
        padding: 1.2rem 1.5rem;
        font-weight: 500;
        color: #111;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        font-size: 1.1rem;
        line-height: 1.6;
    }

        .cert-data dt.dl-last, .cert-data dd.dl-last {
            border-bottom: 1px solid #111;
        }

    .cert-data .highlight {
        color: #ef4444;
        font-weight: 800;
    }

/* 확인서 하단 푸터 (직인 영역) */
.cert-footer {
    margin-top: 4rem;
    text-align: center;
}

.cert-date {
    font-size: 1.2rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 2.5rem;
}

.cert-issuer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    margin-bottom: 30px;
}

    .cert-issuer b {
        font-size: 1.8rem;
        font-weight: 800;
        color: #111;
        letter-spacing: 1px;
    }

    .cert-issuer img {
        width: 70px;
        height: auto;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0%, -50%);
    }

/* 액션 버튼 */
.completion .action-buttons {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.completion .btn-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 40px;
    background: var(--primary-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
    transition: all 0.2s;
    min-width: 200px;
}

    .completion .btn-print:hover {
        background: #1e3a8a;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
    }

    .completion .btn-print .material-symbols-outlined {
        font-size: 24px;
    }

/* =========================================
    발급 전 상태 (Empty/Notice State) 디자인
========================================= */
.notice-state-wrap {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    padding: 4rem 3rem;
    text-align: center;
    border-top: 6px solid var(--primary);
}

.notice-icon {
    width: 90px;
    height: 90px;
    background: #eff6ff;
    color: var(--primary-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

    .notice-icon .material-symbols-outlined {
        font-size: 48px;
    }

.notice-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 2.5rem;
    line-height: 1.4;
}

/* 안내 사항 블록들 */
.notice-block-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.notice-block {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 1.8rem;
    position: relative;
    overflow: hidden;
}

    /* 직군 구분을 위한 왼쪽 컬러바 */
    .notice-block.dentist {
        border-left: 4px solid var(--primary-dark);
    }

    .notice-block.hygienist {
        border-left: 4px solid #059669;
    }

/* 다른 색상으로 구분감 부여 */
.notice-block-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notice-block.dentist .notice-block-title {
    color: var(--primary-dark);
}

.notice-block.hygienist .notice-block-title {
    color: #059669;
}

.notice-block p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 0.8rem;
    word-break: keep-all;
}

    .notice-block p:last-child {
        margin-bottom: 0;
    }

.text-danger {
    display: inline-block;
    color: #ef4444;
    font-weight: 800;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 0.5rem;
}

/* 하단 이동 버튼 */
.action-buttons {
    display: flex;
    justify-content: center;
    margin-top: 3.5rem;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    background: #fff;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-back:hover {
        background: #f1f5f9;
        color: #111;
        border-color: #94a3b8;
    }

/* =========================================
    인쇄 전용 CSS (@media print)
    인쇄 버튼 클릭 시 확인서 카드 부분만 깔끔하게 인쇄되도록 설정
========================================= */
@media print {
    body {
        background: #fff;
    }
    /* 불필요한 요소 모두 숨김 */
    .header-main, .sub-hero, .page-title, .action-buttons, .footer, .top-bar {
        display: none !important;
    }

    /* 확인서 카드만 전체 화면으로 초기화 */
    .sub-container {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    .cert-card-wrap {
        padding: 0;
    }

    .cert-card {
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        border-top: none;
        max-width: 100%;
    }
        /* 배경 워터마크 인쇄되도록 강제 설정 */
        .cert-card::before {
            color: rgba(0, 0, 0, 0.05);
        }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}


/* =========================================
    페이지 준비 중 (Under Construction) 디자인
========================================= */
.construction-wrap {
    max-width: 700px;
    margin: 2rem auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    padding: 5rem 3rem;
    text-align: center;
}

.construction-icon {
    width: 100px;
    height: 100px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    position: relative;
}

    /* 톱니바퀴 회전 애니메이션 요소 (선택적 시각 효과) */
    .construction-icon .material-symbols-outlined {
        font-size: 50px;
    }

/* 1. 톱니바퀴 회전 애니메이션(키프레임) 정의 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 2. 아이콘에 애니메이션 적용 */
.construction-icon .material-symbols-outlined.settings {
    font-size: 50px;
    /* spin 애니메이션을 4초 동안 일정한 속도(linear)로 무한 반복(infinite) */
    animation: spin 4s linear infinite;
}

.construction-title {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.construction-desc {
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.6;
    word-break: keep-all;
    margin-bottom: 2.5rem;
}

    .construction-desc strong {
        color: var(--primary-dark);
    }

/* 하단 이동 버튼 */
.construct .action-buttons {
    display: flex;
    justify-content: center;
}

.construct .btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 40px;
    background: var(--primary-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
    transition: all 0.2s;
}

    .construct .btn-back:hover {
        background: #1e3a8a;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3);
    }


/* =========================================
    참가 신청서 폼 전용 스타일 (리디자인)
========================================= */

/* 폼 섹션 카드 */
.exhibitionform .form-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    margin-bottom: 3rem;
    overflow: hidden;
}

.exhibitionform .form-header {
    background: var(--bg-gray);
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .exhibitionform .form-header span.req-note {
        font-size: 0.9rem;
        color: #64748b;
        font-weight: 500;
    }

/* 폼 내부 섹션 분리선 (주담당자, 부담당자 등) */
.exhibitionform .inner-divider {
    background: #f8fafc;
    padding: 1rem 1.5rem;
    font-weight: 700;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .exhibitionform .inner-divider .material-symbols-outlined {
        font-size: 20px;
        color: var(--primary);
    }

/* 반응형 폼 Row 레이아웃 */
.exhibitionform .form-row {
    display: flex;
    border-bottom: 1px solid #f1f5f9;
    padding: 1.5rem;
    align-items: flex-start;
}

    .exhibitionform .form-row:last-child {
        border-bottom: none;
    }

.exhibitionform .form-label {
    width: 180px;
    font-weight: 700;
    color: #334155;
    padding-top: 10px;
    flex-shrink: 0;
}

.exhibitionform .form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 폼 입력 컨트롤 */
.exhibitionform .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.exhibitionform .form-input, .form-select {
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: all 0.2s;
    background: #fff;
}

    .exhibitionform .form-input:focus, .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .exhibitionform .form-input.w-full {
        width: 100%;
    }

    .exhibitionform .form-input.w-small {
        width: 80px;
        text-align: center;
    }

.exhibitionform .form-select.w-mid {
    width: 180px;
}

.exhibitionform .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #94a3b8;
    color: #475569;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    height: 42px; /* input 높이와 매칭 */
    white-space: nowrap;
}

    .exhibitionform .btn-outline:hover {
        background: #f1f5f9;
        border-color: var(--primary-dark);
        color: var(--primary-dark);
    }

.exhibitionform .form-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-top: 4px;
}

/* 정보 및 안내 박스 */
.exhibitionform .info-box {
    background: #f8fafc;
    border-left: 4px solid var(--primary);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
}

    .exhibitionform .info-box p {
        font-size: 0.95rem;
        color: #475569;
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }

        .exhibitionform .info-box p:last-child {
            margin-bottom: 0;
        }

    .exhibitionform .info-box .text-strong {
        font-weight: 800;
        color: #111;
    }

    .exhibitionform .info-box .text-blue {
        color: var(--primary-dark);
        font-weight: 700;
    }

/* 하단 액션 버튼 */
.exhibitionform .action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 4rem 0;
}

.exhibitionform .btn-submit, .btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 160px;
}

.exhibitionform .btn-submit {
    background: var(--primary-dark);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

    .exhibitionform .btn-submit:hover {
        background: #1e3a8a;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
    }

.exhibitionform .btn-cancel {
    background: #fff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

    .exhibitionform .btn-cancel:hover {
        background: #f1f5f9;
        color: #111;
    }


.mainbody.container {
    flex: 1;
}

/* =========================================
    운영규정 리스트 디자인 (새로 추가된 부분)
========================================= */
.operation .sub-tit {
    font-size: 1.75rem;
    font-weight: 800;
    color: #111;
    border-bottom: 2px solid #222;
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
}

.operation .sub-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 항목 간격 */
}

    .operation .sub-layout > li {
        display: flex;
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02);
        transition: all 0.2s ease;
    }

        .operation .sub-layout > li:hover {
            border-color: #cbd5e1;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

.operation .sub-left {
    width: 220px;
    background: var(--bg-gray);
    padding: 1.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    word-break: keep-all;
}

.operation .sub-right {
    flex: 1;
    padding: 1.5rem;
}

.operation .con-box {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

    .operation .con-box span {
        display: block;
        font-size: 0.95rem;
        color: #475569;
        line-height: 1.6;
        word-break: keep-all;
    }

    .operation .con-box a {
        color: var(--primary-dark);
        text-decoration: none;
        display: inline-block;
        margin-top: 4px;
    }

        .operation .con-box a:hover {
            text-decoration: underline;
        }


/* 불릿 스타일 디테일 효과 추가 */
    .operation .con-box span.bullet::before {
        content: "•";
        color: var(--primary);
        font-weight: bold;
        display: inline-block;
        width: 12px;
        margin-left: -2px;
    }

    .operation .con-box a {
        color: var(--primary-dark);
        text-decoration: none;
        display: inline-block;
        margin-top: 4px;
    }

        .operation .con-box a:hover {
            text-decoration: underline;
        }

/* ★ 부스 이미지 반응형 및 모던화 세팅 ★ */
.operation .img-container {
    width: 100%;
    max-width: 720px; /* 적정 최대 해상도 제한 */
    margin-top: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    background: #fff;
}

    .operation .img-container img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

.operation .sub-layout {
    border: none;
    box-shadow: none;
}

@media screen and (max-width: 1024px) {
    .sub-container {
        padding: 0 1.5rem;
        gap: 2rem;
    }

    .sub-right.con-w2 {
        grid-template-columns: 1fr;
    }
        /* 태블릿에서는 시간표 1단으로 */
        .sub-right.con-w2 .r-box {
            border-right: none;
            border-bottom: 1px solid #e2e8f0;
        }

            .sub-right.con-w2 .r-box:last-child {
                border-bottom: none;
            }

    .step-grid {
        gap: 1rem;
    }

    .action-grid {
        gap: 1.5rem;
    }
}

@media screen and (max-width: 768px) {
    .top-bar .inner {
        justify-content: right;
    }

    /* 모바일 헤더: 로고와 햄버거 버튼 가로 배치 */
    .header-main .inner {
        flex-direction: row;
        padding: 1rem 1.5rem;
    }
    .logo span {
        font-size: 1.8rem;
    }
    .mobile-menu-btn {
        display: flex;
    }

    /* 모바일 GNB 메인 메뉴 레이아웃 */
    .gnb {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        border-top: 1px solid #e2e8f0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        z-index: 1000;
    }

        .gnb.active {
            display: block;
        }

        .gnb > ul {
            flex-direction: column;
            gap: 0;
            padding: 0;
        }

            .gnb > ul > li {
                border-bottom: 1px solid #f1f5f9;
                padding: 0;
                width: 100%;
            }

                .gnb > ul > li > a {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 1.2rem 1.5rem;
                    font-size: 1.1rem;
                }

    /* 모바일 환경: 서브메뉴(아코디언) 설정 */
    .submenu {
        position: static;
        transform: none !important;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: #f8fafc;
        width: 100%;
        min-width: 100%;
        display: none;
        opacity: 1;
        visibility: visible;
        padding: 0;
    }

    .gnb > ul > li:hover .submenu {
        display: none;
    }

    .gnb > ul > li.active .submenu {
        display: block;
    }

    .submenu li a {
        text-align: left;
        padding: 0.9rem 1.5rem 0.9rem 2.5rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.95rem;
    }

    .submenu li:last-child a {
        border-bottom: none;
    }

    /* 배너 및 기타 모바일 뷰 최적화 */
    .hero-section {
        height: 400px;
    }

    .hero-title {
        font-size: 1.2rem;
    }

    .hero-sub {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-date {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }

    .quick-menu-wrap {
        grid-template-columns: repeat(2, 1fr);
        margin-top: -20px;
    }

    .quick-item {
        padding: 1.5rem 0.5rem;
        border-bottom: 1px solid #f1f5f9;
    }

        .quick-item:nth-child(even) {
            border-right: none;
        }

        .quick-item:nth-child(3), .quick-item:nth-child(4) {
            border-bottom: none;
        }

    .main-content {
        margin-top: 3rem;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .sub-hero {
        height: 140px;
    }

        .sub-hero h2 {
            font-size: 1.8rem;
        }

        .sub-hero p {
            font-size: 0.95rem;
        }

    .sub-container {
        flex-direction: column;
        margin: 2rem auto;
        padding: 0 1rem;
        gap: 1.5rem;
    }

    .side-menu {
        flex-direction: column;
        align-items: stretch; /* 교차축 정렬을 stretch로 바꾸어 자식들이 화면에 꽉 차게 합니다 */
        margin: 2rem auto;
        padding: 0 1rem;
        gap: 1.5rem;
    }
    .side-menu {
        width: 100%;
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #e2e8f0;
        background: transparent;
    }
        .side-menu h3 {
            display: none; /* 모바일 서브 타이틀 숨김 */
        }

        .side-menu ul {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch; /* iOS 스크롤 가속 */
            padding-bottom: 4px;
        }

            .side-menu ul::-webkit-scrollbar {
                display: none; /* 스크롤바 숨김 */
            }

            .side-menu ul li {
                flex: 0 0 auto;
            }

                .side-menu ul li a {
                    padding: 0.8rem 1.2rem;
                    border-bottom: none;
                    font-size: 0.95rem;
                }

                .side-menu ul li.active a {
                    background: var(--primary-dark);
                    border-radius: 6px;
                }

    .content-area {
        width: 100%; /* 내부 테이블이 아무리 커도 본문 영역은 화면 너비를 넘지 못하게 차단합니다 */
    }

    /* 내비게이션 및 본문 폰트 가독성 보정 */
    .page-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .section-title {
        font-size: 1.2rem;
        margin-top: 2rem;
    }

    /* 모바일 탭 메뉴 최적화 */
    .tab-menu li {
        font-size: 0.95rem;
        padding: 0.8rem 0;
        word-break: keep-all;
    }

    .member_tab_menu a {
        font-size: 0.95rem;
        padding: 0.8rem 0;
        word-break: keep-all;
    }

    .section-heading {
        font-size: 1.2rem;
        margin-top: 2rem;
    }

    .mb-drag {
        display: block;
    }

    .greeting-text h4 {
        font-size: 1.3rem;
    }

    .greeting-text p {
        font-size: 1rem;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    /* 테이블 모바일 대응 (상하 배치) */
    .overview-table th, .overview-table td {
        display: block;
        width: 100%;
        text-align: left;
    }

    .overview-table th {
        border-bottom: none;
        padding-bottom: 0.5rem;
    }

    .overview-table td {
        padding-top: 0;
        padding-bottom: 1.2rem;
    }

    /* 그리드 모바일 대응 */
    .committee-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ci-showcase {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }

    .ci-logo-box {
        padding: 2.5rem 1rem;
        margin-bottom: 1.5rem;
    }

    .ci-desc h3 {
        font-size: 1.3rem;
    }

    .ci-desc p {
        font-size: 0.95rem;
    }

    /* 카드 및 버튼 모바일 그리드 변환 */
    .color-palette {
        flex-direction: column;
        gap: 0.8rem;
        margin-bottom: 2rem;
    }

    .color-item {
        min-height: 80px;
        padding: 1.2rem;
    }

    .download-btns {
        flex-direction: column;
        gap: 0.8rem;
    }

    .btn-down {
        width: 100%;
        padding: 14px;
    }

    /* 모바일 탭 메뉴 최적화 */
    .member_tab_menu a {
        font-size: 0.95rem;
        padding: 0.8rem 0;
        word-break: keep-all;
    }

    /* 모바일 스케줄 카드 디자인 변경 (수직 배치) */
    .sub-layout > li {
        flex-direction: column;
    }

    .sub-left {
        width: 100%;
        padding: 1rem 1.5rem;
        border-right: none;
        border-bottom: 2px solid var(--primary-dark); /* 시각적 구분감 추가 */
        justify-content: flex-start;
        background: #f1f5f9;
        font-size: 1.05rem;
    }

    .r-box {
        padding: 1.5rem;
    }

    /* 모바일 타이틀 간격 */
    .sub_tit2 {
        margin-top: 2rem;
        font-size: 1.2rem;
    }

    /* 연자 카드 모바일 대응 (1단 배열) */
    .teacher-list {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .teacher-card {
        padding: 1.2rem;
    }

    .teacher-info {
        padding-right: 1rem;
    }

    .teacher-name {
        font-size: 1.15rem;
    }

    .teacher-subject {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .teacher-photo {
        width: 90px;
        height: 90px;
    }

    /* 상세 페이지 모바일 대응 */
    .speaker-header {
        font-size: 0.95rem;
        padding: 8px 16px;
        margin-bottom: 1.5rem;
        width: 100%;
        justify-content: center;
    }

    .speaker-profile {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .speaker-photo {
        width: 100%;
        max-width: 280px;
    }

    .speaker-info {
        width: 100%;
    }

        .speaker-info li {
            flex-direction: column;
            gap: 0.5rem;
        }

    .info-label {
        padding: 4px 12px;
        font-size: 0.85rem;
    }

    .info-value {
        padding-top: 0;
        font-size: 1.05rem;
    }

    .speaker-abstract {
        padding: 1.5rem;
        border-left-width: 4px;
    }

    .abstract-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .abstract-content {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .btn-list {
        width: 100%;
        justify-content: center;
    }

    /* 카드 모바일 1단 배열 */
    .action-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .action-card {
        padding: 2rem 1.5rem;
    }

    .action-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

        .action-icon .material-symbols-outlined {
            font-size: 30px;
        }

    .action-title {
        font-size: 1.3rem;
    }

    .action-desc {
        font-size: 1rem;
    }

    /* 검색바 모바일 대응 */
    .search-wrap {
        flex-direction: column;
        align-items: stretch;
        padding: 1.2rem;
    }

    .filter-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 필터 3개를 가로로 꽉 차게 */
        gap: 0.5rem;
    }

    .search-group {
        display: flex;
        width: 100%;
    }

        .search-group .form-select {
            width: 30%;
            min-width: 90px;
            flex-shrink: 0;
        }

        .search-group .form-input {
            flex: 1;
        }

    /* 비주얼 카드 모바일 최적화 */
    .spot-banner-card {
        padding: 2.5rem 1.5rem;
        text-align: center;
    }

    .banner-title {
        font-size: 1.6rem;
    }

    .banner-sub {
        font-size: 1rem;
    }

    /* 스텝 그리드 세로 적층 및 화살표 변경 */
    .process-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .process-item {
        padding: 1.5rem;
    }

        .process-item:not(:last-child)::after {
            content: "expand_more";
            top: auto;
            bottom: -1.4rem;
            right: 50%;
            transform: translateX(50%);
        }

    .process-icon {
        margin-bottom: 0.8rem;
    }

    .mb-drag {
        display: block;
    }

    .info-box {
        padding: 1.5rem;
    }

    .bullet-list li {
        font-size: 0.95rem;
    }

    /* 배너 및 그리드 모바일 최적화 */
    .hands-banner {
        padding: 2rem 1.5rem;
    }

    .banner-title {
        font-size: 1.6rem;
    }

    .banner-sub {
        font-size: 0.95rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-card {
        padding: 1.5rem;
    }

    .apply-action-box {
        padding: 1.5rem 1rem;
    }

    .payment-info {
        padding: 1.2rem;
        width: 100%;
    }

        .payment-info p {
            font-size: 0.95rem;
        }

    .btn-apply {
        width: 100%;
        padding: 14px 20px;
    }

    .video-wrap {
        border-radius: 8px;
        margin-bottom: 2rem;
    }

        .video-wrap video {
            border-radius: 8px;
        }

    .info-box {
        padding: 1.5rem;
        border-radius: 8px;
    }

    .info-box-title {
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }

    .bullet-list li {
        font-size: 0.95rem;
    }
    /* 로그인 폼 모바일 스택 (수직) 정렬 */
    .login-wrapper {
        flex-direction: column;
        gap: 2rem;
        padding: 0;
    }

    .login-card {
        padding: 2.5rem 1.5rem;
    }

    .login-header .material-symbols-outlined {
        font-size: 40px;
        padding: 0.8rem;
    }

    .login-header h3 {
        font-size: 1.4rem;
    }

    .login-info-box .info-section {
        padding: 1.5rem;
    }
    /* 배너 및 그리드 모바일 최적화 */
    section.exhibition .visual-banner {
        padding: 2.5rem 1.5rem;
        text-align: center;
        align-items: center;
    }

        section.exhibition .visual-banner::after {
            display: none;
        }

    section.exhibition .banner-title {
        font-size: 1.6rem;
    }

    section.exhibition .banner-sub {
        font-size: 0.95rem;
    }

    section.exhibition .info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    section.exhibition .info-card {
        padding: 1.5rem;
    }

    /* 배너 및 그리드 모바일 최적화 */
    .visual-banner {
        padding: 2.5rem 1.5rem;
        text-align: center;
        align-items: center;
    }

        .visual-banner::after {
            display: none;
        }

    .banner-title {
        font-size: 1.6rem;
    }

    .banner-sub {
        font-size: 0.95rem;
    }

    .section-heading {
        font-size: 1.2rem;
        margin-top: 2rem;
    }

    /* 스텝 카드 모바일 1단 배열 및 하단 화살표 */
    .step-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .step-card {
        padding: 1.5rem;
    }

        .step-card:not(:last-child)::after {
            content: "expand_more";
            font-family: 'Material Symbols Outlined';
            position: absolute;
            bottom: -1.5rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 28px;
            color: #cbd5e1;
            z-index: 10;
        }

    /* 배너 모바일 최적화 */
    section.exhibition.fly .visual-banner {
        padding: 2.5rem 1.5rem;
        text-align: center;
        align-items: center;
    }

    section.exhibition.fly .section.exhibition.fly visual-banner::after {
        display: none;
    }

    section.exhibition.fly .banner-title {
        font-size: 1.6rem;
    }

    section.exhibition.fly .banner-sub {
        font-size: 0.95rem;
    }

    section.exhibition.fly .card-wrap {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    section.exhibition.fly .content-card {
        padding: 1.5rem;
    }

    section.exhibition.fly .card-header {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    section.exhibition.fly .bullet-list li {
        font-size: 0.95rem;
    }

    section.exhibition.fly .img-container {
        padding: 0.5rem;
    }

    section.exhibition.fly .info-box {
        padding: 1.2rem;
    }

        section.exhibition.fly .info-box p {
            font-size: 0.95rem;
        }

    /* 지도 및 정보 모바일 최적화 */
    .map-iframe {
        height: 300px;
    }

    .location-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem;
        gap: 1rem;
    }

    .location-details p {
        font-size: 1rem;
    }

    .transport-title {
        font-size: 1.25rem;
    }

    .mb-drag {
        display: block;
    }
    /* 테이블 스크롤 안내 표시 */
    .data-table th, .data-table td {
        padding: 1rem;
        font-size: 0.95rem;
    }

    /* 검색바 모바일 최적화 */
    .search-wrap {
        flex-direction: column;
        align-items: stretch;
        padding: 1.2rem;
    }

    .filter-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .search-group {
        width: 100%;
        max-width: 100%;
    }

    /* 테이블 내 모바일 숨김 처리 */
    .no-mobile {
        display: none;
    }

    .board-table th, .board-table td {
        padding: 1rem 0.8rem;
        font-size: 0.95rem;
    }

    /* 모바일 게시글 내부 조절 */
    .view-header {
        padding: 1.5rem 1rem;
    }

    .view-title {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }

    .view-meta {
        gap: 0.5rem;
        font-size: 0.85rem;
    }

        .view-meta li:not(:last-child)::after {
            margin-left: 0.5rem;
        }

    .view-attachment {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .view-content {
        padding: 2rem 1rem;
        font-size: 1rem;
    }

    .nav-row {
        padding: 0.8rem 1rem;
    }

    .nav-label {
        width: 75px;
        font-size: 0.9rem;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    .content-area.detail .btn-list {
        width: 100%;
        justify-content: center;
    }

    .preapplyform .form-field {
        width: 100%;
    }
    .preapplyform .form-row {
        flex-direction: column;
        padding: 1.2rem;
    }

    .preapplyform .form-label {
        width: 100%;
        padding-top: 0;
        margin-bottom: 0.8rem;
        font-size: 1rem;
    }

    .preapplyform .input-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .preapplyform .form-input.w-small, .preapplyform .form-input.w-mid, .preapplyform .form-select.w-mid {
        width: 100%;
    }

    .preapplyform .input-group span {
        display: none;
    }
    /* 모바일에서 하이픈, @ 등 숨김 처리 */
    .preapplyform .btn-outline {
        width: 100%;
    }

    .preapplyform .data-table th, .preapplyform .data-table td {
        padding: 0.8rem;
        font-size: 0.85rem;
    }

    .preapplyform .total-price-row td {
        padding-right: 1rem;
        font-size: 1.1rem;
        text-align: center !important;
    }

    .preapplyform .action-buttons {
        flex-direction: column;
        margin: 2rem 0;
    }

    .preapplyform .btn-submit, .btn-cancel {
        width: 100%;
    }

    .preapplyform .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    /* 모바일 확인서 최적화 */
    .cert-card {
        padding: 2.5rem 1.5rem;
        border-top-width: 5px;
    }

    .cert-header h2 {
        font-size: 1.6rem;
    }

    .cert-header h3 {
        font-size: 1rem;
    }

    .cert-data {
        grid-template-columns: 100px 1fr;
    }

        .cert-data dt, .cert-data dd {
            padding: 1rem;
            font-size: 0.95rem;
        }

    .cert-issuer b {
        font-size: 1.3rem;
    }

    .cert-issuer img {
        width: 50px;
        position: static;
        transform: none;
    }

    .completion .btn-print {
        width: 100%;
    }

    /* 모바일 발급 안내 컨테이너 최적화 */
    .notice-state-wrap {
        padding: 2.5rem 1.5rem;
    }

    .notice-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 1.2rem;
    }

        .notice-icon .material-symbols-outlined {
            font-size: 36px;
        }

    .notice-title {
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
    }

    .notice-block {
        padding: 1.2rem;
    }

    .notice-block-title {
        font-size: 1.1rem;
    }

    .notice-block p {
        font-size: 0.95rem;
    }

    .btn-back {
        width: 100%;
    }

    /* ★ 모바일 폼 레이아웃 수직 배치 ★ */
    .exhibitionform .form-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .exhibitionform .form-field {
        width: 100%;
    }
    .exhibitionform .form-row {
        flex-direction: column;
        padding: 1.2rem;
    }

    .exhibitionform .form-label {
        width: 100%;
        padding-top: 0;
        margin-bottom: 0.8rem;
        font-size: 1rem;
    }

    .exhibitionform .input-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .exhibitionform .form-input.w-small, .form-input.w-mid, .form-select.w-mid {
        width: 100%;
    }

    .exhibitionform .input-group span {
        display: none;
    }
    /* 모바일에서 하이픈, @ 등 숨김 처리 */
    .exhibitionform .btn-outline {
        width: 100%;
    }

    .exhibitionform .action-buttons {
        flex-direction: column;
        margin: 2rem 0;
    }

    .exhibitionform .btn-submit, .btn-cancel {
        width: 100%;
    }

    .operation .sub-layout > li {
        flex-direction: column;
    }

    .operation .sub-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 1.2rem;
        font-size: 1.05rem;
    }

    .operation .sub-right {
        padding: 1.2rem;
    }
}

.bg-box {
    /* 1. 가로 길이를 100%로 지정 */
    width: 100%;
    /* 2. 원본 이미지의 가로 세로 비율을 유지하여 div의 높이를 자동 설정 */
    aspect-ratio: 1800 / 3400;
    /* 3. 배경 이미지 설정 */
    background-image: url('/img/program.png');
    /* 4. 배경 이미지의 가로를 100%, 세로는 비율에 맞게 자동으로 맞춤 */
    background-size: 100% auto;
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: top center; /* 이미지 기준 위치 (필요에 따라 변경) */
}

.data-table tfoot td {
    background: #eff6ff; /* 연한 파란색 배경 */
    border-top: 2px solid var(--primary-dark); /* 상단 굵은 선으로 구분감 부여 */
    border-bottom: 2px solid var(--primary-dark);
    padding: 1.5rem 2rem;
    text-align: right;
    font-size: 1.1rem;
    font-weight: 700;
    color: #334155;
}

/* 실제 계산된 금액 텍스트 강조 */
#reg_price_txt {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-left: 15px;
    letter-spacing: -0.5px;
}

/* =========================================
    약관 동의 폼 스타일
========================================= */
.terms-all-check {
    background: #f1f5f9;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
}

    .checkbox-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--primary-dark);
        cursor: pointer;
    }

.terms-item {
    padding: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

    .terms-item:last-child {
        border-bottom: none;
    }

.terms-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terms-content {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
    max-height: 140px;
    overflow-y: auto;
    margin-bottom: 0.8rem;
}

    .terms-content p {
        margin-bottom: 0.5rem;
    }

        .terms-content p:last-child {
            margin-bottom: 0;
        }

.terms-check-wrap {
    display: flex;
    justify-content: flex-end;
}

/* 모바일 화면 대응 */
@media screen and (max-width: 768px) {
    .data-table tfoot td {
        text-align: center;
        padding: 1.2rem 1rem;
        font-size: 1rem;
    }

    #reg_price_txt {
        font-size: 1.4rem;
        margin-left: 10px;
    }
}

/* =========================================
   CDC 2026 조직도 스타일 (Pure CSS Tree)
========================================= */
.org-chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: auto; /* 모바일에서 가로 스크롤 가능하도록 */
    padding: 20px;
    background: #fff;
    border: 2px solid #333;
    margin: 20px 0;
}

/* 상단 타이틀 (이중 테두리 효과) */
.org-title {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 40px;
    margin-bottom: 40px;
    border: 1px solid #333;
    outline: 2px solid #333;
    outline-offset: 3px;
}

/* 트리 구조 기본 설정 */
.tree {
    white-space: nowrap;
}

    .tree ul {
        padding-top: 20px;
        position: relative;
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

        /* 자식 노드로 내려가는 수직 선 */
        .tree ul::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            border-left: 1px solid #333;
            width: 0;
            height: 20px;
            transform: translateX(-50%);
        }

    .tree li {
        position: relative;
        padding: 20px 10px 0 10px;
        text-align: center;
    }

        /* 형제 노드들을 연결하는 수평 선 */
        .tree li::before, .tree li::after {
            content: '';
            position: absolute;
            top: 0;
            right: 50%;
            border-top: 1px solid #333;
            width: 50%;
            height: 20px;
        }

        .tree li::after {
            right: auto;
            left: 50%;
            border-left: 1px solid #333;
        }

        /* 자식이 하나뿐일 때는 좌우 수평선 숨김 */
        .tree li:only-child::before, .tree li:only-child::after {
            display: none;
        }

        .tree li:only-child {
            padding-top: 0;
        }

        /* 첫 번째, 마지막 노드의 수평선 절반 자르기 */
        .tree li:first-child::before, .tree li:last-child::after {
            border: 0 none;
        }

        .tree li:last-child::before {
            border-right: 1px solid #333;
        }

    /* 최상위 루트 노드의 불필요한 선 제거 */
    .tree > ul > li::before, .tree > ul > li::after {
        border: none;
    }

    .tree > ul::before {
        display: none;
    }

/* =========================================
   명함(Business Card) 스타일 노드 디자인
========================================= */
.node-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    min-width: 200px; /* 명함다운 가로 비율 확보 */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* 모던한 둥근 모서리 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 은은한 그림자 */
    z-index: 2;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* 상단 포인트 라인 (var(--primary-dark) 등 프로젝트 테마 색상 적용 가능) */
    border-top: 4px solid #1e3a8a;
}
    .node-card.step {
        min-width: 120px;
    }

    /* 마우스 올렸을 때 살짝 떠오르는 효과 */
    .node-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* 명함 내 아이콘 (Material Symbols 적용) */
    .node-card .material-symbols-outlined {
        font-size: 28px;
        color: #64748b;
        margin-bottom: 12px;
    }

    /* 직책 텍스트 */
    .node-card .role {
        font-weight: 700;
        font-size: 1.15rem;
        color: #0f172a; /* 진한 네이비/블랙 */
        margin-bottom: 6px;
        letter-spacing: -0.5px;
    }

    /* 이름 텍스트 */
    .node-card .name {
        font-size: 1rem;
        color: #475569; /* 슬레이트 그레이 */
        font-weight: 500;
    }

/* '사무국' 우측 뻗어나가는 특수 노드 처리 */
.special-side-node {
    position: relative;
}

    .special-side-node .side-branch {
        position: absolute;
        top: 50%;
        left: 100%; /* 사무총장 기준 우측으로 밀어냄 */
        display: flex;
        align-items: center;
        transform: translateY(-50%);
    }

        .special-side-node .side-branch::before {
            content: '';
            display: inline-block;
            width: 40px;
            border-top: 1px solid #333;
        }

        .special-side-node .side-branch .node-card {
            padding-left: 10px;
        }

/* =========================================
   하단 본부 그룹 - 반응형 그리드 레이아웃 (최대 3열)
========================================= */
.tree ul.grid-level {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC에서는 3개씩 배치 */
    gap: 20px;
    /* 하위 부서들을 하나로 묶어주는 그룹 박스 디자인 */
    background: #f8fafc; /* 아주 연한 회색/파란색 톤 배경 */
    border: 1px solid #e2e8f0;
    border-top: 3px solid #94a3b8; /* 박스 상단 강조선 */
    border-radius: 16px;
    padding: 30px;
    margin-top: 30px; /* 부모 노드와의 간격 */
    position: relative;
}

    /* 부모 노드(사무총장)에서 그룹 박스로 내려오는 수직선 연결 */
    .tree ul.grid-level::before {
        content: '';
        position: absolute;
        top: -30px; /* margin-top 만큼 위로 끌어올림 */
        left: 50%;
        border-left: 1px solid #333;
        width: 0;
        height: 30px; /* 공백을 이어주는 선 길이 */
        transform: translateX(-50%);
    }

    /* 그리드 내부 아이템들의 꼬리표 선(기존 Tree 가로/세로선) 완전히 제거 */
    .tree ul.grid-level li::before,
    .tree ul.grid-level li::after {
        display: none !important;
    }

    /* <li>의 불필요한 트리 패딩 제거 및 카드 중앙 정렬 */
    .tree ul.grid-level li {
        padding: 0 !important;
        display: flex;
        justify-content: center;
    }

    /* 카드가 그리드 안에서 일정한 비율을 유지하도록 설정 */
    .tree ul.grid-level .node-card {
        width: 100%;
        max-width: 220px;
    }

/* 반응형 모바일 대응 */
@media screen and (max-width: 900px) {
    .tree ul.grid-level {
        grid-template-columns: repeat(2, 1fr); /* 태블릿에서는 2열 */
    }
}

@media screen and (max-width: 500px) {
    .tree ul.grid-level {
        grid-template-columns: 1fr; /* 좁은 모바일에서는 1열 */
        padding: 20px;
    }
}

/* PC 화면 (기본 2단 그리드라고 가정할 때) */
.teacher-list .full-width {
    grid-column: 1 / -1; /* ★ 핵심: 1번 라인부터 끝 라인까지 모두 채우라는 마법의 속성 */
}

/* 모바일 화면 (768px 이하) */
@media screen and (max-width: 768px) {
    .teacher-list .full-width {
        grid-column: 1 / -1; /* 모바일이 1단 그리드여도 알아서 100% 꽉 채움 */
        /* 또는 grid-column: span 1; 로 변경하셔도 됩니다. */
    }
}