@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
pre,
code,
address,
ul,
ol,
li,
menu,
nav,
section,
article,
aside,
dl,
dt,
dd,
table,
thead,
tbody,
tfoot,
label,
caption,
th,
td,
form,
fieldset,
legend,
hr,
input,
button,
textarea,
object,
figure,
figcaption {
    word-break: keep-all;
    overflow-wrap:normal;
}

img {
    max-width: 100%; /* 이미지가 부모 요소의 너비를 초과하지 않도록 설정 */
    height: auto;    /* 너비가 조절될 때 이미지의 비율을 자동으로 유지 */
/*    display: block;  /* (선택 사항) 이미지 주변 공백 문제 해결 및 레이아웃 정리 */
}

/* ------------------------------------------- */
/* ------------------------------------------- */
/* --- 회원가입 창 제목 사이즈 줄이기         ------- */
/* ------------------------------------------- */
/* ------------------------------------------- */
.boardjoin td:first-child {
    width: 20%;
	min-width: 60px;
}

.contentWrap {
  /* 1. 너비 제한 */
  width: 100%;
  max-width: 100vw; /* 뷰포트 너비를 절대 넘지 않도록 설정 */
  
  /* 2. 패딩과 테두리를 너비에 포함 (매우 중요) */
  box-sizing: border-box; 
}

/* ------------------------------------------- */
/* ------------------------------------------- */
/* ---------- 페이지 로딩 표시 2025.11.29 -------- */
/* ------------------------------------------- */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* 로딩 오버레이 스타일 (가장 중요) */
/* ------------------------------------------- */

#loading-overlay {
    /* 뷰포트 전체를 덮고 가장 위에 표시 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 배경색: 흰색(#fff)에 90% 불투명도 적용 (아주 약간 반투명) */
    background-color: rgba(255, 255, 255, 0.9);
    /* 로딩 내용을 중앙에 정렬 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 다른 모든 요소 위에 표시 */
    z-index: 9999; 
    /* 부드러운 전환 효과 */
    transition: opacity 0.5s ease-in-out;
    font-family: 'Inter', sans-serif; /* 폰트 적용 */
}

/* ------------------------------------------- */
/* 세련된 로딩 스피너 (바운싱 도트) 스타일 */
/* ------------------------------------------- */
.loading-dot-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin-bottom: 16px; /* 1rem */
}

.dot {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background-color: #4f46e5; /* 인디고 색상 */
    border-radius: 50%;
    display: inline-block;
    /* bounce 애니메이션 적용 */
    animation: bounce 1.4s infinite ease-in-out both;
}

/* 각 도트에 시간차를 주어 순차적으로 움직이도록 설정 */
.dot:nth-child(1) {
    animation-delay: -0.32s;
}

.dot:nth-child(2) {
    animation-delay: -0.16s;
}

/* 도트가 커졌다 작아지는 애니메이션 키프레임 */
@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0); /* 작아짐 */
        opacity: 0.6;
    }
    40% {
        transform: scale(1.0); /* 커짐 */
        opacity: 1;
    }
}
/* 로딩 메시지 스타일 */
#loading-overlay p {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #4b5563; /* gray-700 */
}

/* 로딩이 완료된 후 페이드 아웃 효과를 위한 스타일 */
.loading-hidden-fade-out {
    opacity: 0; /* 투명하게 만듦 */
    pointer-events: none; /* 클릭 이벤트 방지 */
}

/* ------------------------------------------- */
/* ------------------------------------------- */
/* ---------- 페이지 로딩 표시 끝 ----------------- */
/* ------------------------------------------- */
/* ------------------------------------------- */





#sponsor .container {
    background-color: #34495e; 
    border-radius: 8px;
    overflow: hidden;
    max-width: 1000px; 
    margin: 0 auto;
}

/* -------------------------------------------
   전체 컨테이너 및 UL 설정: 줄 바꿈 허용 (가로줄 제거)
   ------------------------------------------- */
#sponsor .container>ul {
    height: auto;
    display: flex; 
    flex-wrap: wrap; 
    padding: 0;
    margin: 0;
    list-style: none; 
    border-top: none; 
}

/* -------------------------------------------
   LI 항목 기본 스타일 (모바일 우선: 3개씩 한 줄)
   ------------------------------------------- */
#sponsor .container>ul li {
    min-height: 50px;
    
    flex: 0 0 33.333%; 
    max-width: 33.333%; 
    
    position: relative;
    display: flex;
    justify-content: center; /* A 태그를 LI 내에서 중앙 정렬 */
    align-items: center;
    padding: 10px 0;
    box-sizing: border-box; 
    
    border: none; 
    
    /* transition: background-color 0.3s; */ /* transition 유지 (혹시 모를 다른 효과 대비) */
}

/* 마우스 오버 시 배경색 변경 효과 제거 */
/*
#sponsor .container>ul li:hover {
    background-color: #4a637d; 
}
*/

/* -------------------------------------------
   LI 항목 세로 구분줄 (짧게 축소)
   ------------------------------------------- */
#sponsor .container>ul li:not(.sponTitle)::after {
    content: '';
    position: absolute;
    right: 0; 
    top: 50%; 
    transform: translateY(-50%);
    width: 1px; 
    height: 30px; 
    background-color: #5d6d7e; 
}

/* 각 줄의 마지막 항목은 세로 구분줄 제거 (4번째와 7번째 항목) */
#sponsor .container>ul li:nth-child(4)::after,
#sponsor .container>ul li:nth-child(7)::after {
    content: none;
}


/* -------------------------------------------
   제목 항목 (.sponTitle) 스타일
   ------------------------------------------- */
#sponsor .container>ul li.sponTitle {
    width: 100%; 
    max-width: 100%;
    flex: 0 0 100%;
    
    font-size: 18px; 
    font-weight: 700; 
    line-height: 24px;
    text-align: center;
    color: #FFBD1E;
    position: relative;
    
    border: none; 
    background-color: transparent; 
    margin-bottom: 5px; 
    padding-bottom: 10px; 
}

/* 제목 밑의 노란색 밑줄 제거 */
#sponsor .container>ul li.sponTitle::after {
    content: none; 
}


/* -------------------------------------------
   LI 항목 내부 링크 및 텍스트 스타일 (아이콘 표시 보장)
   ------------------------------------------- */
#sponsor .container>ul li a {
    height: auto;
    position: relative; 
    
    font-size: 14px; 
    color: #FFFFFF;
    
    display: flex; 
    align-items: center; 
    line-height: 18px;
    padding: 8px 4px;
    text-decoration: none;
    /* transition: color 0.3s; */ /* transition 유지 */
    
    max-width: 95%; 
}

/* 마우스 오버 시 글자색 변경 효과 제거 */
/*
#sponsor .container>ul li a:hover {
    color: #FFBD1E; 
}
*/


/* 텍스트 말줄임표를 위한 스타일 */
.link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    flex-grow: 0; 
    flex-shrink: 1; 
    min-width: 0; 
    
    max-width: calc(100% - 20px); 
}

/* 링크 아이콘 (SVG) 스타일 */
.link-icon {
    width: 12px; 
    height: 12px;
    fill: currentColor; 
    margin-left: 4px; 
    flex-shrink: 0; 
}

/* 기타 불필요한 CSS 제거 */
#sponsor .container>ul li img {
    display: none;
}


/* -------------------------------------------
   데스크톱 레이아웃 (768px 이상): 한 줄 레이아웃으로 복귀
   ------------------------------------------- */
@media (min-width: 768px) {
    
    /* 일반 LI 항목: 균등 분할 및 한 줄 정렬 */
    #sponsor .container>ul li {
        flex: 1;
        max-width: none;
        padding: 10px 0;
    }
    
    /* LI 항목 세로 구분줄 (짧게 유지하고, 마지막 항목만 제거) */
    #sponsor .container>ul li:not(.sponTitle)::after {
        content: '';
    }

    /* 데스크톱에서는 마지막 li의 세로 구분줄만 제거 */
    #sponsor .container>ul li:last-child::after {
        content: none;
    }

    /* 3열 레이아웃에서 제거했던 :nth-child(4)와 (7)의 구분줄 복구 */
    #sponsor .container>ul li:nth-child(4)::after,
    #sponsor .container>ul li:nth-child(7)::after {
        content: '';
    }

    /* 제목 항목: 원래의 너비 제한 및 폰트 크기 복구 */
    #sponsor .container>ul li.sponTitle {
        flex: 0 0 auto;
        max-width: 14%; 
        font-size: 13px; 
        font-weight: normal;
        margin-bottom: 0;
        padding-bottom: 10px;
    }

    /* 링크 위치 재조정 */
    #sponsor .container>ul li a {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: 90%; 
    }

    /* 텍스트 정렬 중앙으로 복구 */
    .link-text {
        max-width: calc(100% - 20px);
    }
}

/* --------------------------------------
   일반 다른 페이지 레이어 팝업 스타일
   -------------------------------------- */

/* 1. 배경 어둡게 (Overlay) */
.m_normal_popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.m_normal_popup-overlay.active {
    display: block;
    opacity: 1;
}

.ico-print2 {
	display: none;
}

/* 2. 팝업창 본문 */
.m_normal_popup-layer {
    position: fixed;
    top: 100px; /* 화면 위에서 100px 아래 */
    left: 5%;
    width: 90%; /* 화면 너비의 90% */
    height: calc(100% - 100px - 5%); /* 하단 여백 5% 남김 */
    
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 1000;
    
    display: none;
    flex-direction: column;
    overflow: hidden;
    
    /* 등장 애니메이션 */
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease-out;
}

.m_normal_popup-layer.active {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

/* 팝업 헤더 */
.m_normal_popup-header {
    display: flex;
    justify-content: flex-end; /* 닫기 버튼 우측 정렬 */
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    flex-shrink: 0; /* 헤더 크기 고정 */
}

.m_normal_close-btn {
    background-color: #333;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* 팝업 내용 영역 (Iframe 컨테이너) */
.m_normal_popup-content {
    flex: 1; /* 남은 공간 모두 차지 */
    width: 100%;
    height: 100%;
    overflow: hidden; /* iframe 스크롤 사용 */
    position: relative;
}

/* URL을 표시할 Iframe 스타일 */
#m_normal_contentFrame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}