@import url('cdn.jsdelivr.net');

:root {
/* Base Unit: 40px */
    --gap-base: 40px;

    /* 배수 (Multiples) */
    --gap:  var(--gap-base);       /* 40px */
    --gap2: calc(var(--gap-base) * 2); /* 80px */
    --gap3: calc(var(--gap-base) * 3); /* 120px */

    /* 약수 (Divisors) */
    --gaph: calc(var(--gap-base) / 2); /* 20px (Half) */
    --gapq: calc(var(--gap-base) / 4); /* 10px (Quarter) */
	--uc-blue: #003478; 
	--uc-red: #c60c30; 
}

/* 플랫 테마 (기본) */
.theme-flat {
    --point-color: var(--uc-blue);
    --point-hover: #4988C4;
}

/* 샵 테마 */
.theme-shop {
    --point-color: var(--uc-red);
    --point-hover: #FF4646;
}

/* 텍스트 호버 효과 */
a:hover {
    color: var(--point-color) !important;
}

/* 버튼형 요소 */
.btn-primary {
    background-color: var(--point-color);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    transition: 0.3s;
}

.btn-primary:hover {
    background-color: var(--point-hover);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 1. 전체 초기화 (기본 여백 제거) */
* { margin: 0; padding: 0; -webkit-box-sizing:border-box !important; -moz-box-sizing:border-box !important; box-sizing:border-box !important; text-decoration: none; }
html, body { width: 100%; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; color: #333; line-height: 1.6; font-size:1em;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}

legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}

/*그누보드 그대로*/
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
#gnb_all {display:none;position:fixed;top:0;width:100%;padding-top:80px;height:100%;background:rgba(0,0,0,0.9);z-index:999999;color:#fff;}
#gnb_all h2 {}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px 0;}
#gnb_all .gnb_al_li .gnb_al_a {z-index:999999;display:block;position:relative;margin-bottom:10px;color:#eee}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999999}


#hd_sch #sch_stx{float:left;width:90%;height:40px;border-radius:20px 0 0 20px;border:none; padding-left:40px; font-size:18px; }
#hd_sch #sch_submit{float:left;width:10%;height:40px;border-radius:0 20px 20px 0;border:none}

#search_all {display:none;position:fixed;top:0;width:100%;padding-top:40px;height:100%;background:rgba(0,0,0,0.9);z-index:1000;color:#fff;}
#search_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}
.search_close_btn {float:right;width:40px;height:40px;background:none;color:#fff; border-radius:20px; border:2px solid #fff;vertical-align:top;font-size:18px}


/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:14px;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}


/* 2. 헤더 스타일 (고정) */

a {
    text-decoration: none;
    color: inherit;
    display: inline-block; /* 클릭 영역 확보를 위해 필수 */
    transition: all 0.3s ease; /* 모든 변화를 부드럽게 */
}

ul, ol, li {
    list-style: none;
}
/* 1. Flexbox 레이아웃 유틸리티 */
.d-flex { display: flex; }
.justify-between { justify-content: space-between; } /* 양 끝으로 밀기 */
.justify-end { 
    justify-content: flex-end; 
}
.items-center { align-items: center; } /* 수직 중앙 정렬 */

/* 2. 텍스트 정렬 유틸리티 */
.text-right { text-align: right; }



.lh-gap2 { line-height: 80px !important; }
lh-gap60 { line-height: 60px !important; }


header#header {
    position: fixed; /* 화면 상단 고정 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0); /* 초기 배경 투명 */
    color: #ffffff; /* 텍스트 화이트 */
    transition: all 0.9s ease-in-out; /* 부드러운 배경색 변화 */
}

/* 스크롤 시 상태: 배경색 생성 */
header#header.scrolled {
    background-color: rgba(0, 0, 0, 0.9); /* 90% 불투명 검정 */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1);  미세한 구분선 */
    backdrop-filter: blur(10px); /* 배경 블러 효과 (트렌디함) */
}

/* 스크롤 시 링크 색상 강조 (선택 사항) */
header#header.scrolled a:hover {
    color: var(--uc-blue);
}

.header-row-1 {height: 60px; line-height:40px;padding-top:20px}
.header-row-2 {height: 60px;}


#gnb .gnb_menu_btn {background:#4158d1;color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px}
.gnb_close_btn {width:40px;height:40px;background:none;color:#fff; border-radius:20px; border:2px solid #fff;vertical-align:top;font-size:18px}
#search_all {display:none;position:fixed;top:0;width:100%;padding-top:40px;height:100%;background:rgba(0,0,0,0.9);z-index:1000;color:#fff;}
#search_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}
.search_close_btn {float:right;width:40px;height:40px;background:none;color:#fff; border-radius:20px; border:2px solid #fff;vertical-align:top;font-size:18px}


#gnb_1dul { height: 40px; } /* header-row-2 높이에 맞춤 */

.gnb_1dli { height: 100%; display: flex; align-items: center; }

.gnb_1da {
    color: #fff;
    opacity: 0.8;
    transition: all 0.3s ease;
    padding: 5px 0;
    position: relative;
}

/* 호버 시 텍스트 강조 및 언더라인 효과 */
.gnb_1dli:hover .gnb_1da {
    opacity: 1;
    color: var(--lion-gold, #D4AF37);
}

/* 2단계 메뉴 (드롭다운) 박스 */
.gnb_2dul {
    display: none; /* 기본 숨김 */
    position: absolute;
    top: 40px; /* 헤더 높이만큼 아래로 */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    min-width: 160px;
    padding: 10px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px;
    border: 1px solid #eee;
}

.gnb_1dli:hover .gnb_2dul {
    display: block; /* 마우스 올리면 노출 */
}

/* 2단계 메뉴 리스트 */
.gnb_2dli a {
    display: block;
    padding: 10px 20px;
    color: #333;
    transition: background 0.2s;
    white-space: nowrap;
}

.gnb_2dli a:hover {
    background: #f8f8f8;
    color: var(--lion-gold, #D4AF37);
}

/* 그누보드 기본 span.bg(하위분류 화살표 등) 숨김 처리 (심플 디자인용) */
.gnb_1dli .bg { display: none; }


/* 3. 중앙 정렬 컨테이너 (1360px로 가두기) */
.uc-container {
	/* 1. 폭 설정: 화면이 크면 80%, 작아져도 1360px 이하로는 안 줄어듦 */
    width: 80%; 
    min-width: 1360px !important; 
    max-width: none !important; /* 그누보드 기본 max-width 차단 */

    /* 2. 중앙 정렬 및 여백 */
    margin: 0 auto !important;
    padding: 0 40px !important; /* 요청하신 패딩 40px 고정 */
    
    /* 3. 박스 모델 고정 */
    box-sizing: border-box !important;
    display: block;
}

/* 4. 메인 배너 (화면 가득) */
.hero-banner {
    width: 100%;
    height: 100vh; /* 화면 높이 100% */
    background: 
        /* 별빛 입자 효과 (작은 점들을 반복해서 배치) */
        radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.5), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 80px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0)),
        /* 오로라 느낌의 신비로운 그라데이션 */
        linear-gradient(35deg, 
            #000022 0%, 
            #0a2e5c 30%, 
            #1b0033 60%, 
            #000000 100%
        ) !important;
    
    /* 별빛들이 자연스럽게 퍼지도록 배경 사이즈 조절 */
    background-size: 200px 200px, 150px 150px, 300px 300px, 250px 250px, 200px 200px, 100% 100%;
    
    /* 신비로운 오로라 광채 효과 */
   
    backdrop-filter: blur(10px);
    transition: all 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}


.uc-location {
    display: flex;
    align-items: center;
    padding: var(--gaph, 20px) 0; /* 40px의 절반 간격 */
    color: #666;
}

.uc-location a:hover {
    color: var(--point-color); /* 테마별 블루/레드 적용 */
    text-decoration: underline;
}

.mx-1 { margin: 0 8px; opacity: 0.5; }
.op-07 { opacity: 0.7; }

/* 6. 왼쪽 본문(75%)과 오른쪽 사이드바(25%) 배치 */
.flex-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 스티키 작동 필수 */
}

article { width: 75%; min-height: 100vh; }

article .header-row1{ height:40px; font-weight:700;}
article .header-row2{ height:20px; margin-bottom:80px;}


/* 최신글 부모 컨테이너 */
.latest-flex-container {
    display: flex;
    flex-wrap: wrap; 
    /* 유컴어스 표준 간격 40px 사용 */
    gap: var(--gap, 40px); 
    width: 100%;
    margin-top: var(--gap, 40px);
}

/* 개별 최신글 카드 (3단 고정) */
.lt_wr_card {
    /* 
       [계산식 설명]
       100%에서 간격 두 개(40px * 2 = 80px)를 뺀 나머지를 3으로 나눕니다.
    */
    flex: 0 0 calc((100% - (var(--gap, 40px) * 2)) / 3);
    
    /* 중요: 기존에 설정된 min-width가 1360px 컨테이너 안에서 3개를 담기에 너무 크면 밀립니다. */
    /* 1360px 기준 3단이면 약 426px인데, 여백 제외하면 380px 정도가 안전합니다. */
    min-width: 0; 
    
    box-sizing: border-box;
}

/* 호버 효과 (선택사항) */
.lt_wr_card:hover {
    transform: translateY(-5px); /* 살짝 떠오르는 느낌 */
}

/* 반응형: 태블릿 이하에서는 2단으로 조정 */
@media (max-width: 1024px) {
    .lt_wr_card {
        flex: 0 0 calc((100% - var(--gap, 40px)) / 2);
    }
}

/* 반응형: 모바일에서는 1단으로 조정 */
@media (max-width: 640px) {
    .lt_wr_card {
        flex: 0 0 100%;
    }
}

aside { 
    width: 20%; 
    position: sticky; 
    top: 140px; /* 스크롤 내려도 여기에 딱 멈춤 */
}

.admin-menu { 
    width: 40px; 
    position: fixed; /* 화면에 항상 고정 */
    right: var(--gapq, 10px); /* 오른쪽에서 10px 띄움 */
    top: 50%; /* 위에서 50% 지점으로 이동 */
    transform: translateY(-50%); /* 메뉴 전체 높이의 절반만큼 위로 올려서 정확한 중앙 맞춤 */
    
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-menu a { 
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin: 5px 0; /* 위아래로 5px씩 균등 여백 */
    background-color: rgba(255, 255, 255, 0.9); /* 가독성을 위한 배경 */
    transition: all 0.3s ease;
    font-size: 12px;
}

/* 호버 효과 (테마별 포인트 컬러 적용) */
.admin-menu a:hover {
    border-color: var(--point-color);
    color: var(--point-color);
    transform: scale(1.2); /* 중앙에서 살짝 커지는 효과 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 4. 푸터 (100vh) */
footer {
    width: 100%;
    height: 100vh;
    background: 
        /* 별빛 입자 효과 (작은 점들을 반복해서 배치) */
        radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.5), rgba(0,0,0,0)),
        radial-gradient(1px 1px at 80px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0)),
        /* 오로라 느낌의 신비로운 그라데이션 */
        linear-gradient(235deg, 
            #000022 0%, 
            #0a2e5c 30%, 
            #1b0033 60%, 
            #000000 100%
        ) !important;
    
    /* 별빛들이 자연스럽게 퍼지도록 배경 사이즈 조절 */
    background-size: 200px 200px, 150px 150px, 300px 300px, 250px 250px, 200px 200px, 100% 100%;
    
    /* 신비로운 오로라 광채 효과 */
    box-shadow: inset 0 10px 30px rgba(0, 255, 255, 0.05), 0 4px 20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2); /* 유컴어스 골드 미세 실선 */
    transition: all 0.6s ease-in-out;
	color:#999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#top_btn {
    position: fixed;
    bottom: 50%;
    /* [계산식] 중앙(50%) + 컨테이너 절반(680px) - (버튼폭 40px + 패딩 40px) */
    left: 50%;
    margin-left: 800px; /* 680px - 80px */
    
    width: 40px;
    height: 40px;
    line-height: 36px;
    border: 2px solid #333;
    color: #333;
    text-align: center;
    font-size: 15px;
    z-index: 10001; /* 관리자 메뉴(10000)보다 높게 설정 */
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: none; /* 처음엔 숨김 (스크롤 시 나타남) */
}

#top_btn:hover {
    background: #333;
    color: #fff;
    transform: translateY(-5px);
}

/* 화면이 1360px보다 작아지면 오른쪽 끝에 고정되도록 대응 */
@media (max-width: 1360px) {
    #top_btn {
        left: auto;
        right: 40px;
        margin-left: 0;
    }
}
/* 윗줄 메뉴 스타일 */
.footer-top {
    gap: var(--gap);           /* 메뉴 간격 40px */
    padding-bottom: var(--gap); /* 아래쪽과 간격 40px */
    border-bottom: 1px solid #333;
    margin-bottom: var(--gap);
	text-align:right;
}

.footer-top a {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #999;
}

.footer-top a:hover {
    color: var(--lion-gold);
}

/* 아랫줄 레이아웃 */
.footer-bottom {
    gap: var(--gap);
}

.footer-bottom .card {
    flex: 1; /* 동일한 비율로 나눔 */
}

/* 유틸리티 클래스 보정 */
.op-07 { opacity: 0.7; }
.items-start { align-items: flex-start; }
.pt-gapq { padding-top: var(--gapq); } /* 10px */
.pt-gaph { padding-top: var(--gaph); } /* 20px */

/******************** 텍스트 ********************/

/* [XS] 12px : 아주 작은 캡션, 메타 정보 */
.text-xs { 
    font-size: 0.75rem; 
    letter-spacing: 0.02em; 
    line-height: 1.4; 
}

/* [SM] 14px : 보조 텍스트, 날짜 */
.text-sm { 
    font-size: 0.875rem; 
    letter-spacing: 0.01em; 
    line-height: 1.5; 
}

/* [MD] 16px : 기본 본문 (Base) */
.text-md { 
    font-size: 1rem; 
    letter-spacing: 0em; 
    line-height: 1.7; 
}

/* [LG] 18px : 강조 본문 */
.text-lg { 
    font-size: 1.125rem; 
    letter-spacing: -0.01em; 
    line-height: 1.5; 
}

/* [XL] 20px : 소제목 */
.text-xl { 
    font-size: 1.25rem; 
    letter-spacing: -0.02em; 
    line-height: 1.4; 
}

/* [2XL] 24px : 중제목 */
.text-2xl { 
    font-size: 1.5rem; 
    letter-spacing: -0.03em; 
    line-height: 1.3; 
}

/* [3XL] 36px : 대제목 */
.text-3xl { 
    font-size: 2.25rem; 
    letter-spacing: -0.04em; 
    line-height: 1.2; 
}

/* [Hero] 64px : 메인 배너용 초대형 문구 */
.text-hero { 
    font-size: 4rem; 
    letter-spacing: -0.06em; 
    line-height: 1.1; 
}

.fw-bold{ 
    font-weight:bold;
}
/* 태블릿/노트북 (1360px 이하) */
@media (max-width: 1360px) {
    .uc-container { width: 95%; min-width: auto; }
    .flex-wrapper { gap: 20px; }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .flex-wrapper { flex-direction: column; } /* 아티클-사이드바 세로로 */
    article { width: 100%; }
    aside { display: none; } /* 필요 시 모바일에서 사이드바 숨김 */
    .text-hero { font-size: 2.5rem; } /* 폰트 크기 축소 */
}

button, input[type="submit"] {
    vertical-align: middle; /* 또는 top, bottom으로 일치시킴 */
}

/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all}
.tbl_head01 tbody tr:hover td {background:#fafafa}
.tbl_head01 a:hover {text-decoration:underline}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}


/* 폼 테이블 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
.tbl_frm01 textarea {padding:2px 2px 3px}
.frm_input {height:40px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}

/*기본 리스트*/
.list_01 ul {border-top:1px solid #ececec}
.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative}
.list_01 li:nth-child(odd) {background:#f6f6f6}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li:hover {background:#f9f9f9}
.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666}

/*폼 리스트*/
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#666;text-align:center}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}


.btn-close-circle {
    /* 버튼 기본 외형 (24px) */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1); /* 은은한 회색 배경 */
    border: none;
    cursor: pointer;
    
    /* 중앙 정렬을 위한 Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative;
    padding: 0;
    transition: all 0.3s ease;
}

/* 호버 시 화려한 변화 */
.btn-close-circle:hover {
    background-color: var(--lion-gold, #D4AF37); /* 유컴어스 골드 */
    transform: rotate(90deg); /* 호버 시 회전 애니메이션 */
}

/* X 표시 구현 (가상 요소 활용) */
.icon-x {
    position: relative;
    width: 12px; /* X의 전체 가로폭 */
    height: 12px;
}

.icon-x::before,
.icon-x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px; /* X의 두께 */
    background-color: #333; /* 기본 색상 */
    transition: background-color 0.3s ease;
}

/* 호버 시 X 표시 색상 화이트로 변경 */
.btn-close-circle:hover .icon-x::before,
.btn-close-circle:hover .icon-x::after {
    background-color: #fff;
}

/* 작대기 두 개를 45도씩 돌려 X 완성 */
.icon-x::before { transform: rotate(45deg); }
.icon-x::after { transform: rotate(-45deg); }