@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ===== 다크모드 무시: 갤럭시 등 모바일에서 항상 밝은 화면 유지 ===== */
:root {
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root, html, body {
        color-scheme: light;
        background-color: #f5f7fa !important;
        color: #111827 !important;
    }
    input, select, textarea, button, [role="button"],
    .form-control, .form-select, .btn {
        color-scheme: light;
        background-color: #fff !important;
        color: #212529 !important;
        border-color: #ced4da !important;
    }
    /* 대원 확인(smNm) 라디오 체크 시 초록색 유지 */
    .login_body.adress_body .address_box_wrap input[type="radio"]:checked {
        background-color: #15785d !important;
        border-color: #15785d !important;
    }
    .card, .modal-content, .popup, .alarm_popup {
        background-color: #fff !important;
        color: #212529 !important;
    }
    /* 통지서 페이지 전체 밝게 유지 (모바일 다크모드 무시) */
    section,
    .notice,
    .notice_wrap,
    .n_wrap,
    .n_title,
    .n_body,
    .notice_box,
    .n_box,
    .n_box_title,
    .n_box_txt,
    .notice_slide,
    .notice_info,
    .notice_content,
    .card-header,
    .card-body,
    .s_bottom_btn,
    .n_bottom,
    .n_top_part,
    .training_n,
    .law_txt {
        background-color: #fff !important;
        color: #212529 !important;
        border-color: #dee2e6 !important;
    }
    .notice,
    .notice_wrap,
    section .notice {
        background-color: #f5f7fa !important;
    }
    .n_box_txt,
    .notice_content textarea {
        background-color: #fff !important;
        color: #212529 !important;
    }
    .notice_wrap h1,
    .n_title h3,
    .n_box_title {
        color: #212529 !important;
    }
    /* 설문조사(attSurvSol) 페이지 밝게 유지 */
    .edu1,
    .edu5_wrap,
    .edu3_title,
    .edu5_step_container,
    .edu5_qu_wrap,
    .edu5_qu_title,
    .edu5_qu_b_txt,
    .edu5_btn_wrap,
    .edu5_step_progress_bar {
        background-color: #fff !important;
        color: #212529 !important;
        border-color: #dee2e6 !important;
    }
    .edu1 {
        background-color: #f5f7fa !important;
    }
}

/* ===== CSS 변수 시스템 ===== */
:root {
    /* 메인 컬러 */
    --primary: #15785d;
    --primary-dark: #0b4838;
    --primary-light: #1a9b77;
    --primary-gradient: linear-gradient(135deg, #15785d 0%, #0b4838 100%);
    
    /* 액센트 컬러 */
    --accent: #f48120;
    --accent-light: #ff9a4d;
    --accent-gradient: linear-gradient(135deg, #f48120 0%, #ff9a4d 100%);
    
    /* 중립 컬러 */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* 글래스모피즘 */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-dark: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    /* 배경 그라데이션 */
    --bg-gradient-main: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --bg-gradient-premium: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-gradient-nature: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    
    /* 그림자 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 20px rgba(21, 120, 93, 0.4), 0 0 40px rgba(21, 120, 93, 0.2);
    
    /* 트랜지션 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 타이포그래피 */
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

body {
    font-family: var(--font-family);
    background: var(--bg-gradient-main);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.clearFix{
    display: table;
    content: "";
    clear: both;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}
a:hover {
    color: var(--primary);
}
img{
    vertical-align: top;
}
.card{
    border: none;
}

.green {
    color: var(--primary);
}

/* 스크롤바 스타일링 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* 선택 텍스트 스타일 */
::selection {
    background: var(--primary);
    color: #fff;
}

/* 헤더*/
header{
    width: 100%;
    height: 80px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass-bg-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(21, 120, 93, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}
header.scrolled {
    height: 65px;
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.95);
}
header.hidden {
    transform: translateY(-100%);
}

/* 모바일: sticky 헤더가 스크롤 시 본문과 겹치지 않도록 불투명 배경·상위 z-index */
@media screen and (max-width: 768px) {
    header#lgnHeader,
    header#mainHeader {
        z-index: 200;
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid rgba(21, 120, 93, 0.12);
    }
    header#lgnHeader.scrolled,
    header#mainHeader.scrolled {
        background: #ffffff;
    }
}

/* 로그인·통지서·설문 공통 헤더(#lgnHeader): 가로 오버플로우 방지, 로고 문구 한 줄 유지 */
header#lgnHeader {
    max-width: 100%;
    overflow-x: clip;
}
header#lgnHeader .header_wrap {
    min-width: 0;
    width: 100%;
}
header#lgnHeader .header_left {
    min-width: 0;
}
header#lgnHeader .logo_btn {
    min-width: 0;
    flex: 1 1 auto;
}
header#lgnHeader .logo_main,
header#lgnHeader .logo_sub {
    white-space: nowrap;
}
header#lgnHeader .header_right {
    flex-shrink: 0;
}
header#lgnHeader .h_area_logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(200px, 42vw);
}
header#lgnHeader .h_area_logo img {
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.header_wrap{
    margin: 0 auto;
    max-width: 1300px;
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
}

.header_wrap div.header_left {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.header_wrap div.header_right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

/* 헤더 정보 */
.header_info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.current_time {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-600);
    padding: 8px 16px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
}

/* 인사말 */
.greeting {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}
.greeting:hover {
    background: rgba(255, 255, 255, 0.95);
}
.greeting_emoji {
    font-size: 18px;
    animation: gentle 3s ease-in-out infinite;
}
@keyframes gentle {
    0%, 100% { 
        transform: translateY(0); 
        opacity: 1;
    }
    50% { 
        transform: translateY(-2px); 
        opacity: 0.9;
    }
}
.greeting_text {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    letter-spacing: -0.3px;
}

/* 로고 버튼 */
.logo_btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo_btn:hover {
    background: rgba(21, 120, 93, 0.04);
}
.logo_btn:active {
    transform: scale(0.98);
}
header.scrolled .logo_btn {
    gap: 10px;
    padding: 6px 10px;
}

/* 로고 마크 이미지 */
.logo_mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.logo_mark img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 6px rgba(21, 120, 93, 0.2));
}
header.scrolled .logo_mark img {
    width: 38px;
    height: 38px;
}

/* 로고 텍스트 - 프리미엄 타이포그래피 */
.logo_text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}
.logo_main {
    font-size: 22px;
    font-weight: 800;
    color: #0b4838;
    letter-spacing: -0.3px;
    line-height: 1;
    transition: all 0.3s ease;
    position: relative;
}
.logo_main::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, rgba(21, 120, 93, 0.1) 0%, #15785d 50%, rgba(21, 120, 93, 0.1) 100%);
    margin: 0 12px;
    vertical-align: middle;
    border-radius: 1px;
}
.logo_sub {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #15785d 0%, #1a9b77 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
header.scrolled .logo_main {
    font-size: 18px;
}
header.scrolled .logo_main::after {
    height: 16px;
    margin: 0 10px;
}
header.scrolled .logo_sub {
    font-size: 18px;
}

/* 헤더 지역 로고 */
.h_area_logo{
    display: flex;
    align-items: center;
    margin-left: 15px;
}
.h_area_logo img{
    height: 32px;
    transition: var(--transition-normal);
}
header.scrolled .h_area_logo img {
    height: 26px;
}
/* 기존 로그아웃 버튼 (하위 호환성) */
.logout{
    border: 0;
    background-color: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-700);
}

/* 새로운 로그아웃 버튼 */
.logout_btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.logout_btn:hover {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-color: #e53935;
    color: #e53935;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.15);
}
.logout_icon {
    font-size: 16px;
}
.logout_text {
    letter-spacing: -0.3px;
    padding: 0;
    line-height: 1.2;
    white-space: nowrap;
}
.logout:hover {
    background: var(--gray-100);
    color: var(--primary);
}
@media screen and (max-width:992px){
    header{
        height: 70px;
        padding: 0 15px;
    }
    header.scrolled {
        height: 60px;
    }
    .header_wrap{
        max-width: 100%;
    }
    /* 로고 */
    .logo_btn {
        gap: 12px;
        padding: 6px 10px;
    }
    .logo_mark img {
        width: 42px;
        height: 42px;
    }
    header.scrolled .logo_mark img {
        width: 34px;
        height: 34px;
    }
    .logo_main {
        font-size: 19px;
    }
    .logo_main::after {
        height: 17px;
        margin: 0 10px;
    }
    .logo_sub {
        font-size: 19px;
    }
    header.scrolled .logo_main {
        font-size: 16px;
    }
    header.scrolled .logo_main::after {
        height: 14px;
        margin: 0 8px;
    }
    header.scrolled .logo_sub {
        font-size: 16px;
    }
    /* 헤더 지역 로고 (기본 대비 약 80% 스케일) */
    .h_area_logo img{
        height: 29px;
    }
    header.scrolled .h_area_logo img {
        height: 24px;
    }
}
@media screen and (max-width:768px){
    header{
        height: 60px;
    }
    header.scrolled {
        height: 55px;
    }
    /* 로고: 모바일에서 두 줄 + 구분선 제거 */
    .logo_text {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .logo_main::after {
        display: none;
    }
    .logo_main,
    .logo_sub,
    header.scrolled .logo_main,
    header.scrolled .logo_sub {
        font-size: 11px;
    }
    /* 로고 */
    .logo_btn {
        gap: 10px;
        padding: 5px 8px;
    }
    .logo_mark img {
        width: 36px;
        height: 36px;
    }
    header.scrolled .logo_mark img {
        width: 30px;
        height: 30px;
    }
    /* 헤더 지역 로고 */
    .h_area_logo img{
        height: 24px;
    }
    header.scrolled .h_area_logo img {
        height: 20px;
    }
    .current_time {
        font-size: var(--font-size-xs);
        padding: 6px 12px;
    }
    /* 인사말 */
    .greeting {
        padding: 6px 12px;
        gap: 6px;
    }
    .greeting_emoji {
        font-size: 16px;
    }
    .greeting_text {
        font-size: 12px;
    }
    /* 로그아웃 버튼 */
    .logout_btn {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 10px;
    }
    .logout_icon {
        font-size: 14px;
    }
}
@media screen and (max-width:462px){
    header{
        height: 55px;
    }
    header.scrolled {
        height: 50px;
    }
    /* 로고 */
    .logo_btn {
        gap: 8px;
        padding: 4px 6px;
    }
    .logo_mark img {
        width: 30px;
        height: 30px;
    }
    header.scrolled .logo_mark img {
        width: 26px;
        height: 26px;
    }
    /* 헤더 지역 로고 (기본 대비 약 80%) */
    .h_area_logo img{
        height: 21px;
    }
    header.scrolled .h_area_logo img {
        height: 17px;
    }
    .current_time {
        display: none;
    }
    /* 인사말 - 텍스트 숨기고 이모지만 표시 */
    .greeting {
        padding: 6px 8px;
    }
    .greeting_text {
        display: none;
    }
    .greeting_emoji {
        font-size: 16px;
    }
    /* 로그아웃 버튼 */
    .logout_btn {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 8px;
        gap: 6px;
    }
    .logout_icon {
        font-size: 14px;
    }
    .logout_text {
        font-size: 13px;
    }
}
@media screen and (max-width:322px){
    /* 로고 */
    .logo_btn {
        gap: 5px;
        padding: 2px 3px;
    }
    .logo_mark img {
        width: 24px;
        height: 24px;
    }
    header.scrolled .logo_mark img {
        width: 20px;
        height: 20px;
    }
    /* 헤더 지역 로고 (기본 대비 약 80%) */
    .h_area_logo img{
        height: 18px;
    }
    header.scrolled .h_area_logo img {
        height: 14px;
    }
    /* 로그아웃 버튼 */
    .logout_btn {
        padding: 6px 12px;
        border-radius: 6px;
        gap: 4px;
    }
    .logout_icon {
        font-size: 12px;
    }
    .logout_text {
        font-size: 11px;
    }
}



/* ===== 푸터 ===== */
footer{
    width: 100%;
    margin-top: 80px;
}

/* 푸터 메인 */
.footer_main {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 50px 20px;
}
.footer_main_wrap {
    max-width: 1200px;
    margin: 0 auto;
}
.footer_grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 50px;
}

/* 브랜드 섹션 */
.footer_brand {
    padding-right: 30px;
}
.footer_logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.footer_logo_img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}
.footer_logo_text {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}
.footer_brand_desc {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* 푸터 섹션 공통 */
.footer_section_title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* 링크 섹션 */
.footer_link_list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer_link_list li {
    margin-bottom: 12px;
}
.footer_link_list a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}
.footer_link_list a:hover {
    color: #fff;
    transform: translateX(5px);
}

/* 고객센터 섹션 */
.contact_phone {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.contact_icon {
    font-size: 20px;
}
.contact_number {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}
.contact_hours {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 5px;
}
.contact_note {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* 푸터 바텀 */
.footer_bottom {
    background: #0f0f1a;
    padding: 20px;
}
.footer_bottom_wrap {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* 기존 footer_top 히든 */
.footer_top {
    display: none;
}
.f_b_txt1, .f_b_txt2 {
    display: none;
}
@media screen and (max-width:992px){
    /* 푸터*/
    footer{
        margin-top: 40px;
    }
    .footer_grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer_brand {
        grid-column: 1 / -1;
        padding-right: 0;
        text-align: center;
    }
    .footer_logo {
        justify-content: center;
    }
    .footer_brand_desc br {
        display: none;
    }
}
@media screen and (max-width:768px){
    .footer_main {
        padding: 40px 20px;
    }
    .footer_grid {
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: center;
    }
    .footer_links, .footer_contact {
        text-align: center;
    }
    .footer_section_title {
        display: inline-block;
    }
    .footer_link_list a:hover {
        transform: none;
    }
    .contact_phone {
        justify-content: center;
    }
}
@media screen and (max-width:462px){
    footer {
        margin-top: 30px;
    }
    .footer_main {
        padding: 35px 15px;
    }
    .footer_logo_img {
        width: 48px;
        height: 48px;
    }
    .footer_logo_text {
        font-size: 20px;
    }
    .footer_brand_desc {
        font-size: 13px;
    }
    .footer_section_title {
        font-size: 14px;
    }
    .contact_number {
        font-size: 22px;
    }
    .footer_bottom {
        padding: 15px;
    }
    .copyright {
        font-size: 12px;
    }
}
@media screen and (max-width:322px){
    .footer_logo_img {
        width: 40px;
        height: 40px;
    }
    .footer_logo_text {
        font-size: 18px;
    }
}



/* 상단 닫기(공통) */
.top_close{
    width: 17px;
    height: 17px;
    position: relative;
    position: absolute;
    top:20px;
    right: 15px;
    cursor: pointer;
}
.top_close .bar{
    width: 17px;
    border-top: 2px solid #9c9c9c;
    position: absolute;
    top:8px;
    left: 0;
}
.top_close .bar1{
    transform: rotate(45deg);
}
.top_close .bar2{
    transform: rotate(-45deg);
}
/* 팝업 뒷배경 */
.issues_popup,
.consent_popup,
.in_pw_popup,
.out_pw_popup,
.qr_popup,
.sch_popup,
.r_system_popup,
.con_res_pop,
.edu_part_pop,
.con_com{
    position: fixed;
    z-index: 2000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(13, 13, 13, 0.5);
    visibility: hidden;
    display: none;
    transition: opacity .2s, visibility .2s;
}
.issues_popup.active,
.consent_popup.active,
.in_pw_popup.active,
.out_pw_popup.active,
.qr_popup.active,
.sch_popup.active,
.r_system_popup.active,
.con_res_pop.active,
.edu_part_pop.active,
.con_com.active{
    display: block;
    visibility: visible;
}

/* 팝업 열림 시 배경 스크롤 방지 */
body:has(.popup.active) {
    overflow: hidden;
}

/* CDEC-POP-01  주요질문사항 팝업 */
.issues_popup_wrap{
    position: fixed;
    width: 560px;
    max-height: 90vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    z-index: 2001;
    overflow: hidden;
    animation: popupSlideIn 0.3s ease-out;
}
/* CDEC-POP-01 주요질문사항 팝업 제목 */
.i_top{
    background: linear-gradient(135deg, #e66a00 0%, #f48120 50%, #ff9a40 100%);
    height: 70px;
    border-radius: 20px 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.pop_title{
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.3px;
    margin: 0;
    line-height: 60px;
    flex: 1;
}
/* CDEC-POP-01 상단 닫기 */
.i_top .top_close{
    width: 36px;
    height: 36px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.i_top .top_close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}
.i_top .top_close .bar{
    width: 16px;
    border-top: 2px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
}
.i_top .top_close .bar1{
    transform: translate(-50%, -50%) rotate(45deg);
}
.i_top .top_close .bar2{
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* CDEC-POP-01 주요질문사항 팝업 검색 */
.issues_input{
    border-bottom: 1px solid #eee;
    padding: 20px 24px;
    background: #fff;
}
.input_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    height: 48px;
    margin: 0 auto;
    gap: 8px;
}
.input_wrap .search{
    flex: 1;
    height: 48px;
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    background-color: #f8f9fa;
    padding: 0 16px;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.input_wrap .search:focus {
    border-color: #f48120;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(244, 129, 32, 0.1);
}
.input_wrap .search::placeholder{
    color: #aaa;
    font-size: 14px;
    font-weight: 600;
}
.input_wrap .search_btn{
    width: 80px;
    height: 48px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(135deg, #f48120 0%, #e66a00 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(244, 129, 32, 0.3);
}
.input_wrap .search_btn:hover{
    background: linear-gradient(135deg, #ff9a40 0%, #f48120 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 129, 32, 0.4);
}
/* 주요질문사항 팝업 내용 */
.issues_txt{
    width: calc(100% - 48px);
    max-height: 340px;
    margin: 20px auto;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
}
/* 주요질문사항 팝업 스크롤 스타일 */
.issues_txt::-webkit-scrollbar{
    width: 8px;
}
.issues_txt::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, #f48120 0%, #e66a00 100%);
    border-radius: 4px;
}
.issues_txt::-webkit-scrollbar-track{
    background-color: #f0f0f0;
    border-radius: 4px;
}
/* question */
.question{
    width: 100%;
    background-color: #fafafa;
    color: #333;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: all 0.2s ease;
}
.question:hover {
    background-color: #fff5eb;
}
.question p{
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
    color: #f48120;
}
.question h3{
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 0;
    letter-spacing: -0.3px;
    color: #333;
}
/* answer */
.answer{
    background: linear-gradient(180deg, #fff9f5 0%, #fff 100%);
    padding: 20px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    display: none;
    border-left: 3px solid #f48120;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 8px;
    border-radius: 0 8px 8px 0;
}
.answer ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.answer ul li{
    font-size: 14px;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
    line-height: 1.6;
    padding-left: 14px;
    position: relative;
}
.answer ul li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #f48120 0%, #e66a00 100%);
    border-radius: 50%;
}
.answer ul li:last-child{
    margin-bottom: 0;
}
/* 닫기버튼*/
.popup_close {
    display: flex;
    justify-content: center;
    padding: 0 24px 24px;
}
.close_i_popup{
    background: linear-gradient(135deg, #f48120 0%, #e66a00 100%);
    color: #fff;
    border: 0;
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    height: 52px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(244, 129, 32, 0.3);
}
.close_i_popup:hover{
    background: linear-gradient(135deg, #ff9a40 0%, #f48120 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 129, 32, 0.4);
}
.close_i_popup:active {
    transform: translateY(0);
}

@media screen and (max-width:768px){
    /* 주요질문사항 팝업 */
    .issues_popup_wrap{
        width: 90%;
        max-width: 450px;
        max-height: 85vh;
    }
    .i_top {
        height: 60px;
    }
    /* 주요질문사항 팝업 제목 */
    .pop_title{
        font-size: 20px;
    }
    .i_top .top_close {
        width: 32px;
        height: 32px;
        right: 12px;
    }
    .i_top .top_close .bar {
        width: 14px;
    }
    /* 주요질문사항 팝업 검색 */
    .issues_input {
        padding: 16px 20px;
    }
    .input_wrap {
        height: 44px;
    }
    .input_wrap .search {
        height: 44px;
        font-size: 14px;
    }
    .input_wrap .search_btn {
        height: 44px;
        width: 70px;
        font-size: 14px;
    }
    /* 주요질문사항 팝업 내용 */
    .issues_txt{
        width: calc(100% - 40px);
        max-height: 280px;
        margin: 16px auto;
    }
    .question {
        padding: 14px 16px;
    }
    .question p {
        font-size: 11px;
    }
    .question h3 {
        font-size: 14px;
    }
    .answer {
        padding: 16px 20px;
        margin-left: 12px;
        margin-right: 12px;
    }
    .answer ul li {
        font-size: 13px;
    }
    /* 닫기버튼*/
    .popup_close {
        padding: 0 20px 20px;
    }
    .close_i_popup {
        height: 48px;
        font-size: 16px;
    }
    /* QR 팝업 모바일 */
    .qp_popup_wrap {
        width: 220px;
        height: 270px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .qr_img {
        width: 180px;
        height: 180px;
        margin: 20px auto 0;
    }
    .qr_img img {
        width: 180px;
        height: 180px;
    }
}
@media screen and (max-width:462px){
    /* 주요질문사항 팝업 */
    .issues_popup_wrap{
        width: 95%;
        max-width: 340px;
        max-height: 90vh;
        border-radius: 16px;
    }
    .i_top {
        height: 54px;
        border-radius: 16px 16px 0 0;
    }
    .pop_title {
        font-size: 18px;
    }
    .i_top .top_close {
        width: 28px;
        height: 28px;
        right: 10px;
    }
    .i_top .top_close .bar {
        width: 12px;
    }
    /* 주요질문사항 팝업 검색 */
    .issues_input {
        padding: 14px 16px;
    }
    .input_wrap{
        height: 42px;
        gap: 6px;
    }
    .input_wrap .search{
        height: 42px;
        font-size: 13px;
        padding: 0 12px;
        border-radius: 10px;
    }
    .input_wrap .search_btn{
        width: 60px;
        height: 42px;
        font-size: 13px;
        border-radius: 10px;
    }
    /* QR 팝업 작은 모바일 */
    .qp_popup_wrap {
        width: 200px;
        height: 250px;
    }
    .qr_img {
        width: 160px;
        height: 160px;
        margin: 15px auto 0;
    }
    .qr_img img {
        width: 160px;
        height: 160px;
    }
    /* CDEC-POP-01 주요질문사항 팝업 내용 */
    .issues_txt{
        width: calc(100% - 32px);
        max-height: 240px;
        margin: 14px auto;
        border-radius: 10px;
    }
    .question {
        padding: 12px 14px;
    }
    .question p {
        font-size: 10px;
        margin-bottom: 2px;
    }
    .question h3 {
        font-size: 13px;
    }
    .answer {
        padding: 14px 16px;
        font-size: 13px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .answer ul li {
        font-size: 12px;
        margin-bottom: 8px;
    }
    /* 닫기버튼*/
    .popup_close {
        padding: 0 16px 18px;
    }
    .close_i_popup {
        height: 44px;
        font-size: 15px;
        border-radius: 10px;
    }
}


/* CDEC-POP-03 개인정보 수집·이용동의 팝업*/
.consent_popup_wrap{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-height: 90vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    z-index: 2001;
    overflow: hidden;
    animation: popupSlideIn 0.3s ease-out;
}
@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* CDEC-POP-03 개인정보 수집·이용동의 상단 */
.c_top{
    height: 70px;
    background: linear-gradient(135deg, #0b4838 0%, #15785d 50%, #1a9b77 100%);
    border-radius: 20px 20px 0 0;
    position: relative;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* CDEC-POP-03 개인정보 수집·이용동의 제목 */
.c_pop_title{
    font-size: 22px;
    color: #fff;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.3px;
}
/* CDEC-POP-01 상단 닫기 */
.c_top .top_close{
    width: 36px;
    height: 36px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.c_top .top_close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}
.c_top .top_close .bar {
    width: 16px;
    border-top: 2px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    background: transparent !important;
}
.c_top .top_close .bar1 {
    transform: translate(-50%, -50%) rotate(45deg);
}
.c_top .top_close .bar2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* CDEC-POP-03 개인정보 수집·이용동의 하단 내용 */
.c_pop_txt{
    width: 100%;
    padding: 24px 30px 30px;
    margin: 0;
}
/* CDEC-POP-03 개인정보 수집·이용동의 하단 제목 */
.c_pop_txt h4{
    height: auto;
    padding: 14px 20px;
    background: linear-gradient(135deg, #333 0%, #444 100%);
    font-size: 17px;
    font-weight: 700;
    color:#fff;
    text-align: center;
    margin-bottom: 0;
    border-radius: 12px 12px 0 0;
    letter-spacing: -0.3px;
}
.c_pop_txt_title{
    height: auto;
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    background: #f8f9fa;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}
.c_pop_txt_title_cont{
    margin: auto 0;
    line-height: 1.5;
    color: #555;
}
.c_pop_txt_wrap{
    max-height: 320px;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 12px 12px;
    background-color: #fff;
    padding: 20px 24px;
    overflow-y: auto;
    overflow-x: hidden;
}
/* CDEC-POP-03 개인정보 수집·이용동의 스크롤 스타일 */
.c_pop_txt_wrap::-webkit-scrollbar{
    width: 8px;
}
.c_pop_txt_wrap::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, #15785d 0%, #1a9b77 100%);
    border-radius: 4px;
}
.c_pop_txt_wrap::-webkit-scrollbar-track{
    background-color: #f0f0f0;
    border-radius: 4px;
}
/* CDEC-POP-03 개인정보 수집·이용동의 테이블 */
.c_pop_txt_wrap table{
    border: none;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.c_pop_txt_wrap th{
    width: 50%;
    height: 44px;
    text-align: center;
    font-size: 15px;
    background: linear-gradient(135deg, #0b4838 0%, #15785d 100%);
    color: #fff;
    font-weight: 600;
    border: none;
}
.c_pop_txt_wrap td{
    background-color: #fff;
    padding: 14px 16px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
.c_pop_txt_wrap tr:last-child td{
    color: #15785d;
    font-weight: 800;
    border-bottom: none;
}
.c_pop_txt_wrap tr:hover td {
    background-color: #f8faf9;
}
.c_pop_txt_wrap span{
    color: #333;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.6;
}
.c_pop_txt_wrap .content{
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    width: 100%;
    padding: 16px;
    overflow:auto;
    font-weight: 700;
    font-size: 15px;
}

/* CDEC-POP-03 개인정보 수집·이용동의 하단 닫기 */
.c_popup_close{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding-bottom: 6px;
}
.close_c_popup{
    background: linear-gradient(135deg, #15785d 0%, #1a9b77 100%);
    min-width: 140px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(21, 120, 93, 0.25);
}
.close_c_popup:hover{
    background: linear-gradient(135deg, #1a9b77 0%, #15785d 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21, 120, 93, 0.35);
}
.close_c_popup:active {
    transform: translateY(0);
}
@media screen and (max-width:768px){
    /* CDEC-POP-03 개인정보 수집·이용동의 팝업*/
    .consent_popup_wrap{
        width: 90%;
        max-width: 450px;
        max-height: 85vh;
    }
    .consent_popup_wrap .content{
        font-size: 12px;
    }
    .c_top {
        height: 60px;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 제목 */
    .c_pop_title{
        font-size: 20px;
    }
    .c_top .top_close {
        width: 32px;
        height: 32px;
        right: 12px;
    }
    .c_top .top_close .bar {
        width: 14px;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 상단 내용 */
    .c_top_txt{
        font-size: 15px;
    }
    .c_pop_txt_wrap{
        max-height: 280px;
        padding: 16px 18px;
    }
    .c_pop_txt_title{
        padding: 14px 16px;
        font-size: 12px;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 하단 내용 */
    .c_pop_txt{
        padding: 20px 24px 24px;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 하단 제목 */
    .c_pop_txt h4{
        font-size: 15px;
        padding: 12px 16px;
    }
    .close_c_popup {
        min-width: 120px;
        height: 44px;
        font-size: 15px;
    }
}
@media screen and (max-width:462px){
    /* CDEC-POP-03 개인정보 수집·이용동의 팝업*/
    .consent_popup_wrap{
        width: 95%;
        max-width: 350px;
        max-height: 90vh;
        border-radius: 16px;
    }
    .consent_popup_wrap .content{
        font-size: 11px;
    }
    .c_top{
        height: 54px;
        border-radius: 16px 16px 0 0;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 제목 */
    .c_pop_title{
        font-size: 18px;
    }
    .c_top .top_close {
        width: 28px;
        height: 28px;
        right: 10px;
    }
    .c_top .top_close .bar {
        width: 12px;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 상단 내용 */
    .c_top_txt{
        font-size: 13px;
        letter-spacing: -0.5px;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 하단 내용 */
    .c_pop_txt{
        padding: 16px 18px 20px;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 하단 제목 */
    .c_pop_txt h4{
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 10px 10px 0 0;
    }
    .c_pop_txt_title{
        padding: 12px 14px;
        font-size: 11px;
    }
    .c_pop_txt_wrap {
        max-height: 240px;
        padding: 14px 16px;
        border-radius: 0 0 10px 10px;
    }
    .c_pop_txt_wrap th {
        font-size: 13px;
        height: 38px;
    }
    .c_pop_txt_wrap td {
        font-size: 12px;
        padding: 10px 12px;
    }
    .c_popup_close {
        margin-top: 18px;
    }
    .close_c_popup {
        min-width: 100px;
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
    }
    .c_pop_txt_title{
        height: 50px;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        overflow:auto;
        margin-bottom: 5px;
    }
    .c_pop_txt_wrap{
        height: 280px;
        border: 1px solid #bdbdbd;
        background-color: #fff;
        padding: 15px 5px;
        overflow-x: hidden;
    }
    /* CDEC-POP-03 개인정보 수집·이용동의 테이블 */
    .c_pop_txt_wrap th{
        font-size: 15px;
        height: 35px;
    }
    .c_pop_txt_wrap td{
        font-size: 14px;
    }
}




/* 알림창&확인창 팝업 */

/* 푸터 밑 팝업 뒷배경 */
.alarm_popup{
    position: relative;
    position: fixed;
    z-index: 2002;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #0d0d0d49;
    visibility: hidden;
    display: none;
    transition: opacity .2s, visibility .2s;
}
.alarm_popup.active{
    visibility: visible;
    display: block;
}
.alarm_popup_wrap{
    position: relative;
    position: fixed;
    z-index: 2003;
    top:200px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    height: 320px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px #64646471;
    border-radius: 10px;
}
/* 알림창 상단 */
.a_top{
    height: 60px;
    background-color: #15785d;
    border-radius: 10px 10px 0px 0px;
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 알림창 상단 닫기 */
.a_top .top_close .bar{
    border-top: 2px solid #fff;
}
/* 알림창 내용 */
.alarm_txt_wrap{
    padding: 10px 30px;
    height: 200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.alarm_txt_wrap p{
    font-size: 18px;
    font-weight: 700;
    color: #3b3b3b;
    margin-bottom: 10px;
    text-align: center;
}
.a_title{
    color: #15785d;
    font-weight: 900;
}
p.alarm_txt{
    /* text-align: center; */
    color: #000;
    font-size: 17px;
    margin-top: 10px;
}
/* 알림창 빨간 경고 문구 (예: 알림톡 수신 제한 안내) */
.alarm_warning,
.altPop .alarm_warning{
    color: #dc3545 !important;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 0;
    text-align: center;
}
/* 알림창 버튼 */
.a_popup_btn{
    display: block;
    margin: 0 auto;
    width: 206px;
    position: absolute;
    /* bottom: 30px; */
    left: 50%;
    transform: translateX(-50%);
}
.a_popup_btn button{
    width: 100px;
    height: 35px;
    border-radius: 3px;
    border: 0;
    font-size: 16px;
    transition: all 0.1s;
}
/* 알림창 버튼 */
.b_popup_btn{
    display: block;
    margin: 0 auto;
    width: 103px;
    bottom: 30px;
}
.a_popup_btn button, .b_popup_btn button{
    width: 100px;
    height: 35px;
    border-radius: 3px;
    border: 0;
    font-size: 16px;
    transition: all 0.1s;
}
.yes_a_popup{
    background-color: #15785d;
    color: #fff;
}
.yes_a_popup:hover{
    background-color: #369d82;
}
.close_a_popup{
    background-color: #909090;
    color: #fff;
    font-weight: 700;
}
.close_a_popup:hover{
    background-color: #aaaaaa;
}
/* 로그인 필요 팝업: 버튼 두 개(닫기, 로그인 이동) 가로 배치, 간격 확보 */
.loginRequiredPop .b_popup_btn{
    width: auto;
    max-width: 100%;
    padding: 0 24px 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
.loginRequiredPop .b_popup_btn button{
    min-width: 100px;
    flex: 0 0 auto;
}
.loginRequiredPop .login_go_btn{
    background-color: #15785d;
    color: #fff;
    font-weight: 700;
}
.loginRequiredPop .login_go_btn:hover{
    background-color: #369d82;
}
/* 확인창 내용 */
.check_txt{
    text-align: center;
    margin-top: 27px;
}
@media screen and (max-width:500px){
    .alarm_popup_wrap{
        width: 280px;
        height: 280px;
    }
    .a_top{
        height: 45px;
        margin-bottom: 10px;
    }
    .a_top .top_close{
        top:15px;
    }
    .al_pop_title{
        margin-bottom: 0;
        line-height: 45px;
        font-size: 20px;
    }
    p.alarm_txt{
        margin-top: 0;
    }
    .alarm_txt_wrap{
        padding: 10px 15px;
        height: 175px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .loginRequiredPop .b_popup_btn{
        padding: 0 16px 24px;
        gap: 10px;
    }
    .loginRequiredPop .b_popup_btn button{
        min-width: 90px;
    }
    .alarm_txt_wrap p{
        font-size: 16px;
        letter-spacing: -1px;
        text-align: center;
    }
}



/* CDEC-POP-04 통지서 출결QR */
.qp_popup_wrap{
    width: 240px;
    height: 290px;
    background-color: #fff;
    position: fixed;
    left: 50%;
    top:250px;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px #6464645c;
    border-radius: 10px;
}
.qr_popup .top_close{
    top: 10px;
    right: 10px;
}
.qr_img{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr_img img{
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.qp_popup_wrap button{
    width: 100px;
    margin: 0 auto;
    display: block;
    margin-top: 12px;
    border: 1px solid #d6d6d6;
    color: #555;
    font-weight: 900;
    background-color: #efefef;
    transition: all 0.1s;
}
.qp_popup_wrap button:hover{
    background-color: #e9e9e9;
}

/* CDEC-POP-06 교육 참가증 */
.edu_part_pop_wrap{
    width: 600px;
    height: 725px;
    background-color: #fff;
    position: fixed;
    top:90px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px #6464645c;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.edu_part_pop #attCentBody{
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.edu_top{
    background-color: #15785d;
    height: 60px;
    border-radius: 10px 10px 0px 0px;
}
/* 교육 참가증 제목 */
.edu_title{
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight:700;
}
/* 교육 참가증 닫기 */
.edu_top .top_close .bar{
    border-top: 2px solid #ffffff;
}
/* 참가증 성명,연차,생년월일,주소,소속 */
.edu_part_pop table{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    border: 1px solid #dbdbdb;
}
.edu_part_pop th{
    background-color: #f6f6f6;
    width: 20%;
    text-align: center;
    font-size: 17px;
    color: #333;
    font-weight: 700;
}
.edu_part_pop td{
    font-size: 16px;
    color: #555;
    font-weight: 600;
}
/* 교육참가인정 */
.edu_bottom{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}
.edu_bottom h4{
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #000;
}
.edu_txt{
    /* border: 1px solid red; */
    width: 85%;
    margin: 0 auto;
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    background-color: #eeeeee;
}
.edu_txt li{
    color: #333;
    font-weight: 700;
    font-size: 15px;
    padding-left: 10px;
}
.edu_txt li span:first-child{
    color: #15785d;
    font-weight: 900;
    margin-right: 10px;
    letter-spacing: -1px;
    font-size: 16px;
}
/* 긴 일련번호 등으로 가로 폭이 밀리지 않도록 (캡처·PDF 레이아웃) */
.edu_part_pop .edu_txt li .attCentData {
    word-break: break-all;
    overflow-wrap: anywhere;
}
/* 교욱인증 */
.edu_stamp_wrap{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}
.edu_stamp_wrap>div{
    height: 155px;
}
/* 교욱인증 왼쪽 */
.edu_s_left {
    width: 50%;
    position: relative;
}   
.edu_s_left h3{
    position: absolute;
    width: 100%;
    font-size: 23px;
    top: 63px;
    right: 39px;
    font-weight: 700;
    color: #333;
    letter-spacing: -1px;
    text-align: center;
}
.edu_s_left img{
    position: absolute;
    top: -10px;
    left: 0px;
    width: 165px;
}
/* 교욱인증 오른쪽 */
.edu_s_right{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: flex-end;
}
.edu_s_right > div:nth-child(2){
    position: relative;
}
.edu_s_right p{
    text-align: right;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}
/* 도장 이미지 */
.edu_stamp{
    width: 70px;
    position: relative;
    top: 55px;
}

/* QR이미지 */
.edu_QR{
    width: 80px;
    position: absolute;
    bottom: 5px;
    right: 0;
}
/* 교육참가증 버튼 */
.edu_button_wrap{
    margin-top: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.edu_button_wrap .edu_pdf{
    width: auto;
    min-width: 100px;
    height: 40px;
    padding: 0 20px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #0b4838 0%, #15785d 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(11, 72, 56, 0.3);
}
.edu_button_wrap .edu_pdf:hover{
    background: linear-gradient(135deg, #11624c 0%, #1a9b77 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(21, 120, 93, 0.4);
}
.edu_button_wrap .close_sch_popup{
    width: auto;
    min-width: 80px;
    height: 40px;
    padding: 0 20px;
    font-size: 15px;
}
/* CDEC-POP-06: 전역 .close_sch_popup·타 팝업 미디어쿼리와 겹치면 한쪽 버튼만 아래로 밀림 → 참가증 영역만 통일 */
.edu_part_pop .edu_button_wrap{
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-shrink: 0;
    padding: 0 10px max(16px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.edu_part_pop .edu_button_wrap .edu_pdf,
.edu_part_pop .edu_button_wrap .close_sch_popup{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0;
    box-sizing: border-box;
    line-height: 1.25;
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    max-width: none;
}
.edu_part_pop .edu_button_wrap .edu_pdf:hover{
    transform: none;
}
@media screen and (max-width:768px){
    .edu_part_pop_wrap{
        width: 400px;
        max-height: min(92vh, 720px);
        height: auto;
        min-height: 0;
    }
    .edu_stamp_wrap>div{
        height: 105px;
    }
    /* 참가증 성명,연차,생년월일,주소,소속 */
    .edu_part_pop th{
        width: 22%;
        font-size: 16px;
    }
    .edu_part_pop td{
        font-size: 15px;
    }
    /* 교육참가인정 */
    .edu_bottom h4{
        font-size: 19px;
    }
    .edu_txt{
        padding: 10px 5px 10px;
        width: 90%;
        margin-top: 10px;
    }
    .edu_txt li{
        padding-left: 5px;
        font-size: 14px;
    }
    .edu_txt li span{
        font-size: 15px;
    }
    /* 교욱인증 */
    /* 교욱인증 왼쪽 */
    .edu_s_left h3{
        font-size: 19px;
        top: 42px;
        right: 20px;
    }
    .edu_s_left img{
        width: 123px
    }
    /* 교욱인증 오른쪽 */
    .edu_s_right p{
        font-size: 14px;
        letter-spacing: -1px;
    }
    /* 도장 이미지 */
    .edu_stamp{
        width: 50px;
        top: 42px;
    }
    /* QR이미지 */
    .edu_QR{
        width: 50px;
    }
    /* 교육참가증 버튼 */
    .edu_button_wrap .edu_pdf,
    .edu_button_wrap .close_sch_popup{
        min-width: 90px;
        height: 38px;
        padding: 0 16px;
        font-size: 14px;
    }
}
@media screen and (max-width:410px){
    .edu_part_pop_wrap{
        width: 290px;
        max-height: min(92vh, 680px);
        height: auto;
        min-height: 0;
        top: max(20px, env(safe-area-inset-top, 0px));
    }
    .edu_top{
        height: 45px;
    }
    /* 교육 참가증 제목 */
    .edu_title{
        line-height: 45px;
        font-size: 20px;
    }
    /* 교육 참가증 닫기 */
    .edu_top .top_close{
        top:15px;
    }
    /* 참가증 성명,연차,생년월일,주소,소속 */
    .edu_part_pop table{
        margin-top: 15px;
    }
    .edu_part_pop th{
        width: 27%;
        font-size: 14px;
    }
    .edu_part_pop tr:nth-of-type(3) th{
        padding-top: 25px;
    }
    .edu_part_pop td{
        font-size: 13px;
    }
    /* 교육참가인정 */
    .edu_bottom{
        margin-top: 10px;
    }
    .edu_bottom h4{
        font-size: 16px;
        letter-spacing: -1px;
        font-weight: 800;
    }
    .edu_txt{
        width: 100%;
    }
    .edu_txt li{
        font-size: 14px;
        letter-spacing: -1px;
    }
    .edu_txt li span{
        font-size: 14px;
    }
    /* 교욱인증 */
    .edu_stamp_wrap{
        margin-top: 10px;
    }
    .edu_stamp_wrap>div{
        height: 100px;
    }
    .edu_s_left h3{
        font-size: 15px;
        top: 45px;
        right: 25px;
    }
    .edu_s_left img{
        top: 0px;
        left: -16px;
        width: 100px;
    }
    .edu_s_left {
        width: 50%;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    /* 교욱인증 오른쪽 */
    .edu_s_right p{
        font-size: 13px;
        letter-spacing: -1px;
    }
    /* 도장 이미지 */
    .edu_stamp{
        width: 50px;
        top: 42px;
    }
    /* 도장 이미지 */
    .edu_stamp{
        left: 50%;
        transform: translateX(-50%);
    }
    /* QR이미지 */
    .edu_QR{
        top:0;
    }
    /* 교육참가증 버튼 */
    .edu_button_wrap{
        margin-top: 10px;
        gap: 8px;
    }
    .edu_button_wrap .edu_pdf,
    .edu_button_wrap .close_sch_popup{
        min-width: 80px;
        height: 36px;
        padding: 0 14px;
        font-size: 14px;
    }
}




/* CDEC-POP-05 이수확인 */
.con_com_wrap{
    width: 550px;
    height: 790px;
    background-color: #fff;
    position: fixed;
    top:50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px #6464645c;
    border-radius: 10px;
}
.con_com_top{
    background-color: #053560;
    height: 60px;
    border-radius: 10px 10px 0px 0px;
}
/* 이수확인 제목 */
.con_com_title{
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight:700;
}
/* 이수확인 상단 닫기 */
.con_com_top .top_close .bar{
    border-top: 2px solid #ffffff;
}
/* 이수증 이미지 팝업 */
.con_com_img_wrap{
    width: 450px;
    height: 637px;
    margin: 0 auto;
}
.con_com_img{
    box-shadow: 0px 0px 10px #6464645b;
    width: 450px;
    height: 637px;
    margin: 0 auto;
    margin-top: 25px;
    position: relative;
}
.com_img{
    display: block;
    width: 450px;
    height: 637px;
}
/* 이수번호, 성명, 연차, 소속, 이수시간 이수일 */
.con_com_txt{
    width: 196px;
    height: 152px;
    position: absolute;
    top:150px;
    left: 125px;
    padding-left: 0;
}
.con_com_txt li{
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
}
/* 이수증 내용  */
.com_img_txt{
    width: 250px;
    text-align: center;
    position: absolute;
    top:330px;
    left: 100px;
    font-size: 20px;
    line-height: 28px;
    color: #000;
    font-weight: 700;
}
/* 지자체직인 */
.jour_img{
    width: 170px;
    height: 50px;
    position: relative;
    position: absolute;
    top:430px;
    left: 145px;
}
.jour_img_txt{
    font-size: 18px;
    color: #555;
    font-weight: 600;
    letter-spacing: -2px;
    position: absolute;
    top: 15px;
    left: 0;
    text-shadow: 0px 0px 5px #ffffff;
}
.jour_img img{
    width: 50px;
    position: absolute;
    top:0;
    right: 0;
}
/* 지자체 로고, 민방위 로고 */
.con_com_logo{
    display: flex;
    width: 200px;
    position: absolute;
    top:530px;
    left: 125px;
}
.con_com_logo>img{
    height: 18px;
    display: flex;
}
.smart_logo{
    width: 126px;
    height: 18px;
    margin-left: 10px;
}
/* 발급일 */
.con_com_img p{
    margin-bottom: 0;
    position: absolute;
    top:15px;
    left: 10px;
    font-size: 10px;
    color: #000000;
    font-weight: 500;
    letter-spacing: -1px;
}
/* 이수증 출력,닫기 버튼 */
.con_com_btn_wrap{
    width: 211px;
    margin: 0 auto;
    margin-top: 18px;
}
.con_com_btn_wrap button{
    width: 100px;
    height: 30px;
    border: 0;
    border-radius: 3px;
    transition: all 0.1s;
}
.print_btn{
    background-color: #053560;
    color: #fff;
}
.print_btn:hover{
    background-color: #124b7c;
}
@media screen and (max-width:768px){
    .con_com_wrap{
        width: 400px;
        height: 650px;
    }
    /* 이수증 이미지 팝업 */
    .con_com_img_wrap{
        width: 350px;
        height: 500px;
    }
    .con_com_img{
        width: 350px;
        height: 500px;
    }
    .com_img{
        width: 350px;
        height: 490px;
    }
    /* 이수번호, 성명, 연차, 소속, 이수시간 이수일 */
    .con_com_txt{
        width: 169px;
        height: 120px;
        left: 50%;
        transform: translateX(-50%);
        top:120px;
    }
    .con_com_txt li{
        font-size: 12px;
        line-height: 20px;
    }
    /* 이수증 내용  */
    .com_img_txt{
        font-size: 15px;
        width: 181px;
        line-height: 20px;
        left: 50%;
        transform: translateX(-50%);
        top:270px;
    }
    /* 지자체직인 */
    .jour_img{
        width: 150px;
        height: 40px;
        top:340px;
        left: 50%;
        transform: translateX(-50%);
    }
    .jour_img_txt{
        font-size: 16px;
        top:10px
    }
    .jour_img img{
        width: 40px;
    }
    /* 지자체 로고, 민방위 로고 */
    .con_com_logo{
        top:405px;
        left: 50%;
        transform: translateX(-50%);
        width: 165px;
    }
    .con_com_logo>img{
        height: 15px;
        display: flex;
    }
    .smart_logo{
        width: 100px;
        height: 8px;
    }
    /* 발급일 */
    .con_com_img p{
        top:8px;
        font-size: 7px;
    }
}
@media screen and (max-width:410px){
    .con_com_wrap{
        width: 290px;
        height: 515px;      
    }
    .con_com_top{
        height: 45px;
    }
    /* 이수확인 제목 */
    .con_com_title{
        line-height: 45px;
        font-size: 20px;
    }
    .con_com_top .top_close {
        top:15px
    }
    /* 이수증 이미지 팝업 */
    .con_com_img_wrap{
        width: 260px;
        height: 380px;
    }
    .con_com_img{
        width: 260px;
        height: 380px;
    }
    .com_img{
        width: 260px;
        height: 380px;
    }
        /* 이수번호, 성명, 연차, 소속, 이수시간 이수일 */
        .con_com_txt{
            width: 128px;
            height: 90px;
            top:100px
        }
        .con_com_txt li{
            font-size: 9px;
            line-height: 15px;
        }
        /* 이수증 내용  */
        .com_img_txt{
            font-size: 12px;
            width: 150px;
            top:210px;
        }
        /* 지자체직인 */
        .jour_img{
            height: 30px;
            top:270px;
            width: 110px;
        }
        .jour_img_txt{
            font-size: 13px;
        }
        .jour_img img{
            width: 30px;
        }
        /* 지자체 로고, 민방위 로고 */
        .con_com_logo{
            width: 116px;
            top:320px
        }
        .smart_logo{
            width: 70px;
        }
        .con_com_logo>img{
            height: 10px;
        }
}






/* CDEC-POP-07 집합교육 일정조회 */
.sch_popup_wrap{
    width: 600px;
    max-height: 90vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    z-index: 2001;
    overflow: visible;
    animation: popupSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}
/* 집합교육 일정조회 제목 */
.sch_top{
    background: linear-gradient(135deg, #15785d 0%, #0b4838 50%, #15785d 100%);
    height: 70px;
    border-radius: 20px 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(21, 120, 93, 0.3);
}
.sch_pop_title{
    line-height: 70px;
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.3px;
}
/* 집합교육 일정조회 상단 닫기 */
.sch_top .top_close{
    width: 36px;
    height: 36px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.sch_top .top_close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}
.sch_top .top_close .bar{
    width: 16px;
    border-top: 2px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
}
.sch_top .top_close .bar1{
    transform: translate(-50%, -50%) rotate(45deg);
}
.sch_top .top_close .bar2{
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* 지역 선택 */
.select_area{
    display: flex;
    width: 90%;
    margin: 0 auto;
    height: auto;
    margin-top: 20px;
    padding: 0 20px;
    gap: 15px;
    flex-wrap: wrap;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.sel_box{
    width: calc(33.3333% - 10px);
    min-width: 150px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 10px;
    position: relative;
}
.sel_box h4{
    font-size: 16px;
    letter-spacing: -0.5px;
    font-weight: 700;
    color: #15785d;
    margin: 0;
    line-height: 42px;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.sel_box select{
    flex: 1;
    min-width: 0;
    height: 42px;
    border-radius: 8px;
    outline: none;
    border: 2px solid #e0e0e0;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2315785d' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 35px;
    position: relative;
    z-index: 1;
}
.sel_box select:hover {
    border-color: #15785d;
    box-shadow: 0 2px 8px rgba(21, 120, 93, 0.15);
}
.sel_box select:focus {
    border-color: #15785d;
    box-shadow: 0 0 0 3px rgba(21, 120, 93, 0.1);
    outline: none;
    z-index: 10;
}
.sel_box select:focus,
.sel_box select:active {
    z-index: 10;
}
.sel_box option{
    border: 0;
    padding: 10px;
    font-weight: 600;
}
/* 일정조회 내용 */
.sch_txt{
    background: linear-gradient(135deg, #f0f7f5 0%, #e8f5f0 100%);
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(21, 120, 93, 0.1);
    box-shadow: 0 2px 8px rgba(21, 120, 93, 0.1);
}
.sch_txt li{
    line-height: 25px;
    font-size: 15px;
    color: #171717;
    font-weight: 600;
}
.sch_txt li::before{
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #15785d;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
}
/* 집합교육 일자 & 장소 */
.sch_wrap{
    width: 90%;
    height: 400px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 0 20px;
    flex: 1;
    min-height: 400px;
}
/* 집합교육 일자 & 장소 제목 */
.d_p_title_wrap{
    display: flex;
    width: 100%;
    height: 45px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}
.d_p_title_wrap > div{
    background: linear-gradient(135deg, #15785d 0%, #0b4838 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(21, 120, 93, 0.2);
}
/* 집합교육 일자 제목 */
.sch_date_title{
    width: 30%;
    border-right: 2px solid rgba(255, 255, 255, 0.3);
}
/* 집합교육 장소 제목 */
.sch_place_title{
    width: 70%;
}
/* 집합교육 일자 & 장소 내용 */
.d_p_box_wrap{
    border: 1px solid rgba(21, 120, 93, 0.2);
    border-top: none;
    height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    background: #fff;
}
.d_p_box{
    display: flex;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(21, 120, 93, 0.1);
}
.d_p_box:hover {
    background: rgba(21, 120, 93, 0.05);
    transform: translateX(2px);
}
.d_p_box a {
    color: #15785d;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}
.d_p_box a:hover {
    color: #0b4838;
    text-decoration: underline;
}
.d_p_box img {
    width: 19px;
    margin-right: 5px;
}
.d_p_box:nth-child(even){
    background-color: rgba(21, 120, 93, 0.03);
}
.d_p_box:nth-child(even):hover {
    background-color: rgba(21, 120, 93, 0.08);
}
.d_p_box>div{
    padding: 12px 15px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}
/* 집합교육 일자 내용 */
.sch_date{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15785d;
    font-weight: 700;
    border-right: 1px solid rgba(21, 120, 93, 0.15);
}
/* 집합교육 교육일정이 없을경우 */
.sch_disable{
    width:100%;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-weight: 600;
}
/* 집합교육 장소 내용 */
.sch_place{
    width: 70%;
    letter-spacing: -0.5px;
    line-height: 1.5;
}
/* 집합교육 일자 & 장소 스크롤 스타일 */
.d_p_box_wrap::-webkit-scrollbar{
    width: 12px;
}
.d_p_box_wrap::-webkit-scrollbar-thumb{
    background: linear-gradient(135deg, #15785d 0%, #0b4838 100%);
    border-radius: 6px;
}
.d_p_box_wrap::-webkit-scrollbar-track{
    background-color: #f0f7f5;
    border-radius: 6px;
}
/* 집합교육 일자 & 장소 버튼 2개 */
.sch_button_wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 12px;
    margin-top: auto;
}
/* 국민재난안전포털 바로가기 */
.s_click{
    display: block;
    width: 200px;
    height: 48px;
    border: 0;
    background: linear-gradient(135deg, #e8fff9 0%, #d4f5eb 100%);
    border: 2px solid #15785d;
    border-radius: 12px;
    margin: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(21, 120, 93, 0.2);
}
.s_click:hover {
    background: linear-gradient(135deg, #d4f5eb 0%, #c0ebe0 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21, 120, 93, 0.3);
}
.s_click a{
    width: 100%;
    height: 100%;
    line-height: 44px;
    font-size: 16px;
    font-weight: 700;
    color: #15785d;
    border-radius: 12px;
    display: block;
    text-align: center;
    text-decoration: none;
}
/* 닫기버튼 */
.close_sch_popup{
    width: 200px;
    height: 48px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #898989 0%, #6c6c6c 100%);
    transition: all 0.3s ease;
    border-radius: 12px;
    border: 0;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(137, 137, 137, 0.3);
    cursor: pointer;
}
.close_sch_popup:hover{
    background: linear-gradient(135deg, #a0a0a0 0%, #898989 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(137, 137, 137, 0.4);
}
.close_sch_popup:active {
    transform: translateY(0);
}
@media screen and (max-width:768px){
    .sch_popup_wrap{
        width: 90%;
        max-width: 400px;
        max-height: 85vh;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    /* 지역 선택 */
    .select_area{
        display: flex;
        flex-direction: column;
        width: 90%;
        height: auto;
        gap: 15px;
        padding: 0 20px;
        overflow: visible;
        position: relative;
        z-index: 1;
    }
    .sel_box{
        width: 100%;
        margin-bottom: 0;
        position: relative;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        overflow: visible;
    }
    .sel_box h4{
        font-size: 15px;
        line-height: 42px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .sel_box select{
        flex: 1;
        min-width: 0;
        position: relative;
        height: 42px;
        font-size: 14px;
        z-index: 1;
    }
    .sel_box select:focus,
    .sel_box select:active {
        z-index: 10;
    }
    /* 일정조회 내용 */
    .sch_txt{
        padding: 10px;
        margin-bottom: 15px;
    }
    .sch_txt li{
        letter-spacing: -1px;
        line-height: 22px;
    }
    /* 집합교육 일자 & 장소 */
    .sch_wrap{
        margin-bottom: 3px;
        height: 300px;
        min-height: 300px;
    }
    /* 집합교육 일자 & 장소 제목 */
    .d_p_title_wrap > div{
        font-size: 17px;
    }
    /* 집합교육 일자 & 장소 내용 */
    .d_p_box_wrap{
        height: 260px;
    }
    .d_p_box>div{
        font-size: 11px;
    }
    /* 국민재난안전포털 바로가기 */
    .s_click{
        width: 230px;
    }
    .s_click a{
        font-size: 16px;
        width: 230px;
    }
}
@media screen and (max-width:410px){
    .sch_popup_wrap{
        width: 95%;
        max-width: 350px;
    }
    /* 집합교육 일정조회 제목 */
    .sch_top{
        height: 50px;
    }
    .sch_pop_title{
        line-height: 50px;
        font-size: 18px;
    }
    /* 집합교육 일정조회 닫기 */
    .sch_top .top_close {
        width: 32px;
        height: 32px;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
    }
    /* 지역 선택 */
    .select_area{
        display: flex;
        flex-direction: column;
        width: 90%;
        height: auto;
        gap: 12px;
        padding: 0 15px;
        margin-top: 15px;
        margin-bottom: 10px;
        overflow: visible;
        position: relative;
        z-index: 1;
    }
    .sel_box{
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-bottom: 0;
    }
    .sel_box h4{
        font-size: 14px;
        line-height: 38px;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 60px;
    }
    .sel_box select{
        flex: 1;
        min-width: 0;
        height: 38px;
        font-size: 13px;
        padding: 0 10px;
        padding-right: 30px;
        z-index: 1;
    }
    .sel_box select:focus,
    .sel_box select:active {
        z-index: 10;
    }
    /* 일정조회 내용 */
    .sch_txt{
        padding: 12px 15px;
        margin-bottom: 12px;
        margin-top: 5px;
        position: relative;
        z-index: 0;
    }
    .sch_txt li{
        font-size: 13px;
        line-height: 20px;
    }
    /* 집합교육 일자 & 장소 */
    .sch_wrap{
        margin-bottom: 10px;
        height: 250px;
        min-height: 250px;
        padding: 0 15px;
    }
    /* 집합교육 일자 & 장소 제목 */
    .d_p_title_wrap{
        height: 40px;
    }
    .d_p_title_wrap > div{
        font-size: 15px;
        letter-spacing: -0.5px;
    }
    /* 집합교육 일자 & 장소 내용 */
    .d_p_box_wrap{
        height: 210px;
    }
    /* 집합교육 일자 & 장소 버튼 2개 */
    .sch_button_wrap{
        padding: 15px;
        gap: 10px;
        margin-top: 0;
    }
    .s_click{
        width: 100%;
        height: 44px;
    }
    .s_click a{
        font-size: 15px;
        width: 100%;
        line-height: 40px;
    }
    .close_sch_popup{
        width: 100%;
        height: 44px;
        font-size: 15px;
    }
    /* 집합교육 일자 & 장소 내용 */
    .d_p_box>div{
        padding: 5px 5px;
        font-size: 11px;
        letter-spacing: -1px;
    }
}




/* CDEC-POP-08,CDEC-POP-09 입괄 입실,퇴실 비밀번호 입력란 */
.in_pw_popup_wrap,
.out_pw_popup_wrap{
    width: 480px;
    max-height: 90vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    z-index: 2001;
    overflow: hidden;
    animation: popupSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}
/* 입괄 입실,퇴실 비밀번호 제목 */
.pw_top{
    background: linear-gradient(135deg, #15785d 0%, #0b4838 50%, #15785d 100%);
    height: 70px;
    border-radius: 20px 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(21, 120, 93, 0.3);
}
.i_pop_title{
    line-height: 70px;
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.3px;
}
.pw_top .top_close{
    width: 36px;
    height: 36px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.pw_top .top_close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}
.pw_top .top_close .bar{
    width: 16px;
    border-top: 2px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
}
.pw_top .top_close .bar1{
    transform: translate(-50%, -50%) rotate(45deg);
}
.pw_top .top_close .bar2{
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* 비밀번호 입력란 */
.code{
    display: block;
    padding: 30px 40px;
    flex: 1;
}
.code h2{
    font-size: 18px;
    color: #333;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -0.3px;
}
.code input{
    width: 100%;
    height: 56px;
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    outline: none;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 4px;
    color: #15785d;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}
.code input:focus {
    border-color: #15785d;
    box-shadow: 0 0 0 3px rgba(21, 120, 93, 0.1);
    background-color: #fff;
}
.code input::placeholder {
    color: #999;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
}
/* 입괄 입실,퇴실 버튼*/
.i_btn_wrap{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 20px 40px 30px;
    margin-top: auto;
}
.i_btn_wrap button{
    width: 180px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.complete{
    background: linear-gradient(135deg, #15785d 0%, #0b4838 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(21, 120, 93, 0.3);
}
.complete:hover{
    background: linear-gradient(135deg, #1a9b77 0%, #15785d 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21, 120, 93, 0.4);
}
.complete:active {
    transform: translateY(0);
}
.close_c_popup{
    background: linear-gradient(135deg, #898989 0%, #6c6c6c 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(137, 137, 137, 0.3);
}
.close_c_popup:hover{
    background: linear-gradient(135deg, #a0a0a0 0%, #898989 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(137, 137, 137, 0.4);
}
.close_c_popup:active {
    transform: translateY(0);
}
@media screen and (max-width: 500px){
    .in_pw_popup_wrap,
    .out_pw_popup_wrap{
        width: 290px;
    }
    .i_pop_title{
        font-size: 20px;
        letter-spacing: -1px;
    }
    /* 비밀번호 입력란 */
    .code h2{
        font-size: 22px;
    }
}



/* CDEC-POP-10 교육 안내(당일 교육 일정이 있는 경우만) */
.today_d_popup{
    position: relative;
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #0d0d0d49;
    visibility: hidden;
    display: none;
    transition: opacity .2s, visibility .2s;
}
.today_d_popup.active{
    visibility: visible;
    display: block;
}
.today_d_popup_wrap{
    width: 500px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    position: fixed;
    top:130px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px #6464645c;
}
/* 교육 안내 제목 */
.today_d_popup_top{
    background-color: #42967f;
    height: 60px;
    border-radius: 10px 10px 0px 0px;
}
.today_d_popup_title{
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight:700;
}
/* 교육 안내 상단 닫기 */
.today_d_popup_top .top_close .bar{
    border-top: 2px solid #ffffff;
}
/* 교육 일정 안내 */
.today_d {
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
}
.today_d h3{
    text-align: center;
    font-size: 23px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
}
.today_d h3 span{
    color: #15785d;
}
/* 교육 일정 안내 내용  */
.today_d_txt{
    height: 250px;
}

.today_d_box{    
    display: flex;
    height: 70px;
    margin-bottom: 13px;
    border-radius: 5px;
}
.d_box_title{
    width: 20%;
    font-size: 17px;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0f6144;
    border-radius: 5px 0px 0px 5px;
}
.today_d_box .d_box_title.night{
    background-color: #38729f;
}
.d_box_txt{
    padding: 10px 7px;
    border: 1px solid rgb(214, 214, 214);
    width: 80%;
    background-color: #f5f5f5;
    border-radius: 0px 5px 5px 0px;
}
.d_box_txt p{
    margin-bottom: 0;
    font-size: 16px;
    color: #333;
    font-weight: 700;
}
@media screen and (max-width:768px){
    .today_d_popup_wrap{
        width: 290px;
        height: 493px;
    }
    /* 교육 안내 제목 */
    .today_d_popup_top{
        height: 45px;
    }
    .today_d_popup_title{
        line-height: 45px;
        font-size: 20px;
    }
    /* 교육 안내 상단 닫기 */
    .today_d_popup_top .top_close{
        top: 15px;
    }
    /* 교육 일정 안내 */
    .today_d h3{
        font-size: 19px;
    }
    /* 교육 일정 안내 내용  */
    .today_d_box{
        display: block;
        margin-bottom: 13px;
        height: 100px;
    }
    .d_box_title{
        width: 100%;
        border-radius: 5px 5px 0px 0px;
        height: 35px;
        line-height: 35px;
    }
    .d_box_txt{
        width: 100%;
        border-radius: 0px 0px 5px 5px;
        height: 65px;
    }
    .d_box_txt p{
        font-size: 15px;
    }
}




/* CDEC-POP-10 교육 안내(당일 교육 일정이 있는 경우만) CDEC-POP-11 참석예약 */
.r_system_wrap{
    width: 500px;
    height: 467px;
    background-color: #fff;
    border-radius: 10px;
    position: fixed;
    top:130px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 10px #6464645c;
}
/* 지난 내역보기 팝업 (데스크톱) */
.pastResPop .r_system_wrap.pastResPop_wrap{
    width: 609px;
    height: auto;
    max-height: 90vh;
    padding-bottom: 20px;
    overflow-y: auto;
}
/* 통지서 상세보기 팝업 */
.nts_detail_popup .r_system_wrap{
    height: auto;
    max-height: 90vh;
    padding: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}
.nts_detail_popup .r_system_top{
    position: relative;
}
.nts_detail_popup .r_system_top .top_close{
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.nts_detail_popup .r_system_top .top_close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}
.nts_detail_popup .r_system_top .top_close .bar{
    border-top: 2px solid #ffffff;
    width: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.nts_detail_popup .r_system_top .top_close .bar1{
    transform: translate(-50%, -50%) rotate(45deg);
}
.nts_detail_popup .r_system_top .top_close .bar2{
    transform: translate(-50%, -50%) rotate(-45deg);
}
.nts_detail_popup .nts_detail_content{
    padding: 20px;
}
/* 참석예약 제목 */
.r_system_top{
    position: relative;
    background-color: #42967f;
    height: 60px;
    border-radius: 10px 10px 0px 0px;
}
.r_system_title{
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight:700;
}
/* 참석예약/통지서 내역보기 상단 닫기 */
.r_system_top .top_close{
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.r_system_top .top_close:hover{
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}
.r_system_top .top_close .bar{
    border-top: 2px solid #ffffff;
    width: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.r_system_top .top_close .bar1{
    transform: translate(-50%, -50%) rotate(45deg);
}
.r_system_top .top_close .bar2{
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* 예약 가능 일정 */
.pos_date{
    width: 90%;
    /* border: 1px solid red; */
    margin: 0 auto;
    margin-top: 10px;
}
.pos_date h3{
    text-align: center;
    font-size: 23px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
}
.pos_date h3 span{
    color: #15785d;
}
/* 예약 가능 일정표 - 팝업 안에서만 스크롤, 배경 스크롤 방지 */
.pos_date_wrap {
    height: 247px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.pos_date_wrap table{
    width: 100%;
    border-collapse: collapse;
    color: #333;
    vertical-align: middle; /* 수직 중앙 정렬 */
    text-align: center; /* 수평 중앙 정렬 */
}
.pos_date_wrap table tr th{
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #0b4838;
    color: #fff;
    line-height: 25px;
    padding: 5px 0px;
    font-size: 17px;
    border-right: 1px solid #fff;
}
.pos_date_wrap thead tr th, tbody tr td{
    display: table-cell;
    border: 1px solid #d6d6d6;
    font-size: 15px;
    font-weight: 700;
    height: 60px;
}
.pos_date_wrap .row-radio{
    display: none; /* 라디오 버튼 숨기기 */
}

.pos_date_wrap tbody tr:nth-child(even){
    background-color: #f0f0f0; 
}

.pos_date_wrap tbody tr:hover
, .pos_date_wrap tbody tr.on {
    background-color: #c6c6c6;
}
.pos_date_wrap tbody tr:active {
    background-color: inherit;
}
.pos_date_wrap tbody tr.on {
    background-color: #c6c6c6 !important;
}
/* .pos_date_wrap tbody tr:nth-child(even):hover{
    background-color: #c6c6c6;
} */


/* 국민재난안전포털 바로가기 */
.ko_click{
    display: block;
    width: 280px;
    height: 40px;
    border: 0;
    background-color: #e8fff9;
    border: 2px solid #15785d;
    border-radius: 50px;
    margin: 0 auto;
    margin-bottom: 13px;
    margin-top: 13px;
}
.ko_click a{
    width: 280px;
    height: 40px;
    line-height: 38px;
    font-size: 18px;
    font-weight: 900;
    color: #15785d;
    border-radius: 50px;
    display: block;
}
/* 예약하기 & 닫기 버튼 */
.pos_d_btn {
    width: 211px;
    margin: 0 auto;
}
.pos_d_btn > button{
    width: 100px;
    height: 30px;
    border-radius: 3px;
    border: 0;
    color: #fff;
}
/* 당일 교육 조회 팝업: 오늘일정참석(메인 그린), 다른일정참석(슬레이트) */
.r_res_btn{
    background-color: #15785d;
    margin-right: 5px;
    font-weight: 700;
}
.r_res_btn:hover{
    background-color: #369d82;
}
.r_res_close{
    background-color: #64748b;
    font-weight: 700;
}
.r_res_close:hover{
    background-color: #94a3b8;
}

/* 통지서 보기 버튼 (지난 교육훈련통지서) */
.nts_view_btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #15785d 0%, #0b4838 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(21, 120, 93, 0.25);
    white-space: nowrap;
    min-width: 100px;
}

.nts_view_btn:hover {
    background: linear-gradient(135deg, #1a9b77 0%, #15785d 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(21, 120, 93, 0.35);
}

.nts_view_btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(21, 120, 93, 0.3);
}

@media screen and (max-width: 768px) {
    .nts_view_btn {
        padding: 6px 16px;
        font-size: 13px;
        min-width: 90px;
    }
}

@media screen and (max-width: 462px) {
    .nts_view_btn {
        padding: 5px 12px;
        font-size: 12px;
        min-width: 80px;
    }
}

@media screen and (max-width:768px){
    .r_system_wrap{
        width: 400px;
        height: 507px;
    }
    /* 통지서 내역보기 팝업: 모바일에서 화면에 맞게 */
    .pastResPop .r_system_wrap.pastResPop_wrap{
        width: calc(100vw - 24px);
        max-width: 400px;
        top: 50%;
        transform: translate(-50%, -50%);
        max-height: 85vh;
    }
    .pastResPop .pos_date_wrap{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pos_date_wrap{
        max-height: 290px;
    }
    /* 예약 가능 일정 리스트: 모바일에서만 12px */
    .pos_date_wrap thead tr th,
    .pos_date_wrap tbody tr td{
        font-size: 12px;
    }
    .pos_date_wrap .cell {
        font-size: 12px;
        width: 115px;
    }
    /* 예약 가능 일정표 */
    .pos_date_title>div{
        font-size: 12px;
    }
    .pos_date_box>div{
        font-size: 12px;
        font-weight: 700;
    }
    .pos_date_txt{
        height: 176px;
    }
    .pos_date_box>div:nth-child(1),
    .pos_date_box>div:nth-child(2){
        width: 157px;
    }
    .pos_date_box>div:nth-child(3){
        width: 140px;
    }
    /* 국민재난안전포털 바로가기 */
    .ko_click{
        width: 250px;
    }
    .ko_click a{
        width: 250px;
        font-size: 16px;
    }
}
@media screen and (max-width:410px){
    .r_system_wrap{
        width: 290px;
        height: 470px;
    }
    /* 통지서 내역보기 팝업: 작은 모바일에서 더 좁게 */
    .pastResPop .r_system_wrap.pastResPop_wrap{
        width: calc(100vw - 24px);
        max-width: 290px;
        top: 50%;
        transform: translate(-50%, -50%);
        max-height: 80vh;
    }
    .pastResPop .pos_date_wrap{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pos_date_wrap{
        max-height: 270px;
    }
    .pos_date_wrap .header-row{
        overflow: hidden;
    }

    /* 참석예약 제목 */
    .r_system_top{
        height: 45px;
    }
    .r_system_title{
        font-size: 20px;
        line-height: 45px;
    }
    .r_system_top .top_close{
        top:15px;
    }
    /* 예약 가능 일정 */
    .pos_date_wrap div.header{
        font-size: 12px;
    }
    .pos_date h3{
        font-size: 20px;
        letter-spacing: -1px;
    }
    .pos_date_txt{
        height: 195px;
    }
}



/* CDEC-POP-12 예약확인 */
.con_res_pop_wrap{
    width: 500px;
    max-width: calc(100vw - 24px);
    height: 544px;
    max-height: 90vh;
    background-color: #ffffff;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 10px #6464645c;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.con_res_top{
    background-color: #38729f;
    height: 60px;
    border-radius: 10px 10px 0px 0px;
}
/* 예약확인 제목 */
.con_res_title{
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight:700;
}
/* 예약확인 상단 닫기 */
.con_res_top .top_close .bar{
    border-top: 2px solid #ffffff;
}
/* 예약내역 */
.con_res_txt h3{
    text-align: center;
    font-size: 23px;
    font-weight: 800;
    color: #333;
    margin-bottom: 10px;
    margin-top: 10px;
}
.con_res_txt table{
    width: 90%;
    height: 322px;
    margin: 0 auto;
    border-collapse: collapse;
}
.con_res_txt tbody td.h-cont{
    height: 100px;
}
.con_res_txt th, .con_res_txt td{
    color: #333;
    border: 1px solid #d7d7d7;
    font-size: 16px;
    vertical-align: middle;
}
/* .con_res_txt tr:last-of-type th{
    padding-top: 20px;
} */
.con_res_txt th{
    width: 21%;
    text-align: center;
    font-weight: 800;
}
.con_res_txt td{
    font-size: 16px;
    font-weight: 600;
}
/* 예약취소 & 닫기 버튼 */
.con_res_btn {
    width: 211px;
    margin: 0 auto;
    margin-top: 13px;
}
.con_res_btn > button{
    width: 100px;
    height: 30px;
    border-radius: 3px;
    border: 0;
    color: #fff;
    transition: all 0.1s;
}
/* 예약취소 */
.n_res_btn{
    background-color: #0a4673;
    margin-right: 5px;
}
.n_res_btn:hover{
    background-color: #1f5f8f;
}
@media screen and (max-width:768px){
    .today_d_txt {
        height: 340px;
    }
    .con_res_pop_wrap{
        width: 400px;
        max-width: calc(100vw - 24px);
        height: 522px;
        max-height: 90vh;
    }
    .con_res_txt table{
        height: 358px;
    }
    .con_res_txt th, .con_res_txt td{
        height: 25px;
        font-size: 14px;
    }
}
@media screen and (max-width:410px){
    .today_d_txt {
        height: 340px;
    }
    .con_res_pop_wrap{
        width: 290px;
        max-width: calc(100vw - 24px);
        height: 506px;
        max-height: 90vh;
    }
    /* 예약확인 제목 */
    .con_res_top{
        height: 45px;
    }
    .con_res_title{
        font-size: 20px;
        line-height: 45px;
    }
    .con_res_top .top_close{
        top:15px;
    }
    .con_res_txt th{
        width: 25%;
    }
    /* 예약내역 */
    .con_res_txt h3{
        font-size: 20px;
    }
    .con_res_txt th{
        font-size: 15px;
        width: 28%;
    }
    .con_res_txt td{
        font-size: 13px;
    }
    .con_res_txt th, .con_res_txt td{
        height: 25px;
        font-size: 13px;
    }
}

/* 이수증 출력 */
.c_print{
    width: 210mm;
    height: 289mm;
    margin: 0;
    padding: 0;
}
.com_print{
    width: 210mm;
    height: 289mm;
    position: relative;
}
.com_print_img{
    width: 210mm;
    height: 289mm;
    position: absolute;
    top:0;
    right: 0;
}
/* 이수번호, 성명, 연차, 소속, 이수시간 이수일 */
.com_print_txt{
    position: absolute;
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
    color: #333;
    top:290px;
    left: 50%;
    transform: translateX(-50%);
}
/* 이수증 내용 */
.com_print_img_txt{
    text-align: center;
    position: absolute;
    top:54%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: 800;
    line-height: 45px;
}
/* 지자체직인 */
.jo_wrap{
    width: 260px;
    height: 80px;
    position: relative;
    position: absolute;
    bottom: 270px;
    left: 50%;
    transform: translateX(-50%);
}
.jo_img_txt{
    font-size: 23px;
    font-weight: 600;
    color: #555;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    letter-spacing: -1px;
}
.jo_img{
    position: absolute;
    right: 0;
    top:0;
    width: 80px;
}
/* 지자체 로고, 민방위 로고 */
.com_print_btn{
    position: absolute;
    width: 358px;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
}
.local_logo{
    width: 150px;
}
.smart_logo_print{
    width: 200px;
}
/* 발급일 */
.print_txt{
    position: absolute;
    top: 15px;    
    left: 10px;
}
@media print{
    header,
    footer,
    .s_bottom_btn,
    .cyber_btn{
        display: none;
    }
    body {
        margin: 0;
        padding: 0;
    }
    #printFrame{
        width: 210mm;
        height: 290mm;
        margin: 0;
        padding: 0;
    }
}
@page{
    size: A4;
    margin: 0;
}

.edu_print_border {
    border: 1px solid rgb(225, 225, 225);
}

.edu_print_title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 40px;
    font-weight: 700;
}

/* 온라인 문의 버튼 */
.online-inquiry-btn {
    position: fixed;
    z-index: 99;
    overflow: visible;
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    background: transparent;
    /* ChannelIO 위젯 옆에 배치 (위젯 너비 약 60-80px + 간격) */
    bottom: calc(env(safe-area-inset-bottom) + 20px);
    right: calc(20px + 80px);
    align-items: center;
    justify-content: center;
}

.online-inquiry-btn button {
    width: 56px;
    height: 56px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.online-inquiry-btn button:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.online-inquiry-btn img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

@media screen and (max-width: 768px) {
    .online-inquiry-btn {
        /* 모바일에서 ChannelIO 위젯 옆에 배치 */
        right: calc(20px + 70px);
        bottom: calc(env(safe-area-inset-bottom) + 20px);
    }
    
    .online-inquiry-btn button {
        width: 48px;
        height: 48px;
    }
    
    .online-inquiry-btn img {
        width: 48px;
        height: 48px;
    }
    
    .back {
        left: 20px;
        bottom: calc(env(safe-area-inset-bottom) + 20px);
    }
}

@media screen and (max-width: 462px) {
    .online-inquiry-btn {
        /* 작은 화면에서 ChannelIO 위젯 옆에 배치 */
        right: calc(15px + 60px);
        bottom: calc(env(safe-area-inset-bottom) + 20px);
    }
    
    .online-inquiry-btn button {
        width: 44px;
        height: 44px;
    }
    
    .online-inquiry-btn img {
        width: 44px;
        height: 44px;
    }
    
    .back {
        left: 15px;
        bottom: calc(env(safe-area-inset-bottom) + 20px);
        font-size: 13px;
        padding: 10px 16px;
        min-width: 90px;
    }
}