@charset "utf-8";

/* Info
 ========================================================================== */
/**
    * 1. Writer: Ajin Lee. (Weaverloft Corp.)
    * 2. Production Date: 2025-06
    * 3. Client: W PromptHub
 */

/*========== Import ==========*/
@import url("reset.css");
@import url("layout.css");
@import url("popup.css");

/*========== Font ==========*/
/* Pretendard Variable */
@font-face {
    font-family: 'Pretendard Variable';
    src: url('../fonts/PretendardVariable.woff2') format('woff2-variations'), 
        url('../fonts/PretendardVariable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
  
/* Pretendard - editor */
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2'),
        url('../fonts/Pretendard-Regular.otf') format('opentype'); 
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/Pretendard-Medium.woff2') format('woff2'),
        url('../fonts/Pretendard-Medium.otf') format('opentype'); 
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2'),
        url('../fonts/Pretendard-SemiBold.otf') format('opentype'); 
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Pretendard-Bold.woff2') format('woff2'), 
        url('../fonts/Pretendard-Bold.otf') format('opentype');
}
.pretendard-txt { font-family: 'Pretendard', sans-serif !important; }
.regular-txt { font-weight: 400; font-variation-settings: 'wght' 400; }
.medium-txt { font-weight: 500; font-variation-settings: 'wght' 500; }
.semi-bold-txt { font-weight: 600; font-variation-settings: 'wght' 600; }
.bold-txt { font-weight: 700; font-variation-settings: 'wght' 700; }

/*========== Root ==========*/
/* --- 공통 --- */
:root { 
    /* 포인트 컬러 */
    --main-color: #2C7BE5; 
    --main-point-color: #2C96FF; 
    --main-bg-color: #111114; 
    --sub-bg-color: #DBF2FF; 

    /* INPUT 컬러 */
    --input-bg-color: #F5F6F7;

    /* 텍스트 컬러 */
    --main-txt-color: #111; 
    --text-dark-color: #333; 
    --text-gray-color: #666; 
    --text-light-gray-color: #999; 
    --text-org-color: #FF4417; 
    --text-red-color: #F52A2A; 

    /* 뱃지 컬러 */
    --badge-color-red: #FF3838;
    --badge-color-sky: #23BAEF;
    --badge-color-purple: #816AE8;
    --badge-color-orange: #FF7F00;

    /* 라벨 컬러 */
    --label-color: #d9ebfd;

    /* 라인 컬러 */
    --line-basic-color: #E5E5E5; 

    /* Font Size */
    --title-xl: 2.13rem;
    --title-lg: 1.88rem;
    --title-md: 1.25rem;
    --title-sm: 1.125rem;
    --text-lg: 1.125rem;
    --text-md: 0.938rem;
    --text-sm: 0.875rem;
    --but-xl: 1.125rem;
    --but-lg: 1.125rem;
    --caption: 0.750rem;
    --h-basic-text: 1rem;
    --basic-text: 1rem;
}
@media screen and (max-width: 768px){
    :root {
        /* Font Size */
        --title-xl: 30px;
        --title-lg: 26px;
        --title-md: 18px;
        --title-sm: 16px;
        --text-lg: 16px;
        --text-md: 14px;
        --text-sm: 13px;
        --but-xl: 16px;
        --but-lg: 16px;
        --caption: 0.750rem;
        --h-basic-text: 1rem;
        --basic-text: 1rem;
    }
}

/* ------------------------------------------------------------------------ 
 Base
------------------------------------------------------------------------ */
* { letter-spacing: -0.025em; -webkit-font-smoothing: antialiased;font-family: 'Pretendard Variable', 'Pretendard', sans-serif; } 
html { width: 100%; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; font-weight: 500; font-variation-settings: 'wght' 500; letter-spacing: -0.025em; -webkit-tap-highlight-color: transparent; } 
body { width: 100%; margin: 0; font-size: 1rem; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; line-height: 1.37; letter-spacing: -0.025em; } 
canvas * { font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important; } 
a { display: block; width: 100%; text-decoration: none;font-family: 'Pretendard Variable', 'Pretendard', sans-serif; cursor: pointer; } 
button {font-size: 1rem;font-family: 'Pretendard Variable', 'Pretendard', sans-serif;}
span {display: inline-block; font-weight: inherit; font-family: inherit; }
* ::placeholder { font-size: inherit; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text-light-gray-color);}
fieldset {min-width: 0;}

/* 대체 텍스트 숨김처리 */
.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.scroll-disable { height:100dvh; min-height:100dvh; -ms-touch-action: pan-y; touch-action: pan-y; } 
.scroll-none { overflow: hidden !important;} 
body.scroll-none { overflow: hidden !important;} 
.scroll-y-sec {overflow-x: hidden; overflow-y: auto; padding-right: 15px;}
.scroll-x-sec {overflow-y: hidden; overflow-x: auto; padding-bottom: 15px;}

/* 비활성화 */
.disabled { cursor: default; pointer-events: none; outline: none !important; } 
:disabled { outline: none !important; } 

/* Scroll */
html::-webkit-scrollbar { width: 10px; height: 10px; background-color: #fff; border-radius: 6px; } 
html::-webkit-scrollbar-thumb { background-color: #666666; border-radius: 6px; } 
html::-webkit-scrollbar-track { background-color: #E5E5E5; } 

body * ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff; border-radius: 6px; } 
body * ::-webkit-scrollbar-thumb { background-color: #666666; border-radius: 6px; } 
body * ::-webkit-scrollbar-track { background-color: #E5E5E5;} 

.scroll-x-sec::-webkit-scrollbar { width: 4px; height: 4px;} 
.scroll-y-sec::-webkit-scrollbar  { width: 4px; height: 4px;}

/*========== Text ==========*/
.title-xl {font-size: var(--title-xl);font-weight: 600; font-variation-settings: 'wght' 600;line-height: 1.29;}
.title-lg {font-size: var(--title-lg);font-weight: 700; font-variation-settings: 'wght' 700;line-height: 1.2;}
.title-md {font-size: var(--title-md);font-weight: 600; font-variation-settings: 'wght' 600;line-height: 1.2;}
.title-sm {font-size: var(--title-sm);font-weight: 600; font-variation-settings: 'wght' 600;line-height: 1.2;}
.text-lg {font-size: var(--text-lg);font-weight: 300; font-variation-settings: 'wght' 300;line-height: 1.55; letter-spacing: -0.25em;}
.text-md {font-size: var(--text-md);font-weight: 400; font-variation-settings: 'wght' 400;line-height: 1.33;}
.text-sm {font-size: var(--text-sm);font-weight: 400; font-variation-settings: 'wght' 400;line-height: 1.33;}
.but-xl {font-size: var(--but-xl);font-weight: 600; font-variation-settings: 'wght' 600;line-height: 1.16;}
.but-lg {font-size: var(--but-lg);font-weight: 600; font-variation-settings: 'wght' 600;line-height: 1.16;}

.num-point {font-size: 1.88rem;font-weight: 600; font-variation-settings: 'wght' 600;line-height: 1.555; color: var(--main-color); } 
.point-txt { color: var(--main-color); } 
.red-txt {color: var(--badge-red);}
.blue-text {color: var(--text-blue-color) !important;}
.red-text {color: var(--text-red-color) !important;}
.text-left {text-align: left !important;}
.text-center {text-align: center !important;}
sub {display: inline-block; margin-top: 1px; font-size: 13px;font-weight: 600; font-variation-settings: 'wght' 600;color: var(--text-dark-color); vertical-align: top;}
sub.df {color: var(--text-dark-color) !important;}
sub.gray {color: var(--text-gray-color);}
.unit {position: absolute; top: -35px; right: 0; font-size: 1.125rem;font-weight: 600; font-variation-settings: 'wght' 600;color: var(--text-light-gray-color);}

.w100p {width: 100% !important;}
.w50p {width: 50% !important;}
.w40p {width: 40% !important;}
.w350 {width: 350px !important;}
.col2-15 .w50p {width: calc(50% - (15px / 2)) !important;}
.mgb50 {margin-bottom: 50px !important;}
.txt-left {text-align: left !important;}
@media screen and (max-width: 768px) {
    .reg-section .col2-15 .w50p {width: 100% !important;}
}

/*========== lazyload ==========*/
.fade-in { opacity: 0; } 
.fade-in.lazyloaded { opacity: 1; background-color: #eee; transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 400ms; -webkit-transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 400ms; -moz-transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 400ms; -ms-transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 400ms; -o-transition: opacity 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 400ms; } 
.img-pc {display: block;}
.img-mo {display: none;}
@media screen and (max-width: 768px) {
    .img-pc {display: none;}
    .img-mo {display: block;}
}

/*========== Skip 본문으로 바로가기 ==========*/
.skip-nav {display: inline-block;opacity: 0; position: absolute;top: -50px;left: 0;z-index: 500;width: 160px; padding: 10px 20px;background-color: #000;color: #fff;text-decoration: none;font-size: 14px;transition: all 0.3s ease;text-align: center;}
.skip-nav:focus {top: 0;opacity: 1;}

/*========== Skeleton ==========*/
.skeleton { position: relative; overflow: hidden; } 
.skeleton:before { content: ''; z-index: 20; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%); border-radius: 4px; background-size: 200% 100%; background-position: 100% 0; animation: load 1.5s infinite; -webkit-animation: load 1.5s infinite;} 
@keyframes load { 100% { background-position: -100% 0; } }

/* 텍스트형 카드 요소들의 skeleton 높이 설정 */
.item-category.skeleton { min-width: 100%; min-height: 16px; }
.item-title.skeleton { min-width: 100%; min-height: 30px; }
.profile-id.skeleton { min-width: 100%; min-height: 14px; }
.item-description.skeleton { min-width: 100%; min-height: 40px; }
.grid-item.cont-item.mid .item-description.skeleton { min-width: 100%;min-height: 80px; }
.grid-item.cont-item.long .item-description.skeleton { min-width: 100%; min-height: 120px; }
.item-icon-list.skeleton {min-width: 100%;min-height: 17px;}
.badge.skeleton {border-color: transparent !important;}
.sub-top-main-tit.skeleton { min-height: 48px;color: transparent !important;background: none !important;}

/* ------------------------------------------------------------------------ 
Common
------------------------------------------------------------------------ */
/*========== Button ==========*/
.btn-wrap {display: flex;gap: 8px;align-items: center; justify-content: center; line-height: 1;}
.btn-wrap.left {justify-content: flex-start;}
.btn-wrap.right {justify-content: flex-end;}
.btn-wrap a {width: auto;}
.btn-wrap.dot-area {position: relative;}
.basic-btn { display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; min-width: 163px; padding: 14px 12px; border-radius: 23px; color: #fff; font-size: 18px; font-weight: 500; font-variation-settings: 'wght' 500; line-height: 1; white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: background-color 400ms, border-color 400ms; }
.basic-btn span {position: relative; z-index: 2;}
.modal .basic-btn span {z-index: initial;}
.basic-btn.round {background: linear-gradient(to top left, #7200F8, #1C52D8);}
.basic-btn.round::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top left, #1CBBD8, #1C52D8); border-radius: 23px; opacity: 0; transition: opacity 0.3s ease; }
.basic-btn.round:hover::before { opacity: 1; }
.basic-btn.small { padding: 11px; border-radius: 23px; background-color:var(--main-point-color); min-width: 110px; font-size: 0.875rem; font-weight: 600; font-variation-settings: 'wght' 600;transition: background-color 400ms; }
.basic-btn.small:hover {background-color: #0D6BE8;}
.basic-btn.xsmall { min-width: auto; padding:6px 15px; border-radius: 18px; background-color:var(--main-point-color);font-size: 0.875rem; font-weight: 600; font-variation-settings: 'wght' 600;transition: background-color 400ms; }
.basic-btn.xsmall:hover {background-color: #0D6BE8;}
.basic-btn.round.icon {min-width: auto;padding: 12px 24px;}
.basic-btn.round.icon span {position: relative; padding-right: 26px;}
.basic-btn.round.icon span::after { content: ''; position: absolute; top: 50%; right: 0;transform: translate(0, -50%); width: 22px; height: 22px; background-image: url("../images/common/icon-arrow-diagonal-white.svg"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.basic-btn.round.icon.gray {background: initial; background-color: #E5E5E5; color: var(--text-gray-color);}
.basic-btn.round.icon.gray::before {display: none;}
.basic-btn.round.icon.gray span::after { background-image: url("../images/common/icon-arrow-diagonal-gray.svg");}
.basic-btn.round.icon.gray:hover {background-color: #D4D8DD; }
.basic-btn.line.icon {min-width: auto;padding: 8px 16px; border: 1px solid var(--main-point-color); font-size: 0.813rem; font-weight: 600; font-variation-settings: 'wght' 600; color: var(--main-point-color);}
.basic-btn.line.icon span {position: relative; padding-left: 20px;}
.basic-btn.line.icon#profile-edit-btn span {position: relative; padding-left: 22px; padding-right: 0;}
.basic-btn.line.icon span::after { content: ''; position: absolute; top: 50%; left: 0;transform: translate(0, -50%); width: 20px; height: 20px; background-image: url("../images/common/icon-add-btn.svg"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.basic-btn.line.icon:hover {background-color: #fff; }
.basic-btn.ctg.line {padding: 16px 24px;border-radius: 24px; min-width: auto; background-color: #fff; border: 1px solid var(--main-color); font-size: 0.875rem; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-color);}
.basic-btn.ctg.line:hover {background-color: var(--main-color); color: #fff;}
.basic-btn.ctg.line.active {background-color: var(--main-color); color: #fff;}
.basic-btn.ctg.square {min-width: 88px; padding: 10px; border-radius: 5px; border-color: #D4D8DD; background-color: #F7F9FC; font-size: 0.813rem;font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-gray-color);}
.basic-btn.ctg.square:hover {border-color: var(--main-color);}
.basic-btn.line-only {min-width: auto; padding: 13px 12px;background-color: #fff; border-radius: 0; border: 1px solid var(--main-color); color: var(--main-color);font-size: 0.938rem;font-weight: 500; font-variation-settings: 'wght' 500;}
.basic-btn.line-only:hover {background-color: var(--main-color); color: #fff;}
.basic-btn.xxsmall.line {padding: 6px 16px;border-radius: 24px; min-width: auto; background-color: #fff; border: 1px solid var(--main-color); font-size: 0.875rem; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-color);}
.basic-btn.xxsmall.line:hover {background-color: var(--main-color); color: #fff;}
.basic-btn.xxsmall.line.active {background-color: var(--main-color); color: #fff;}
.basic-btn.reg {width: 130px; background: linear-gradient(145deg,#80FFC9, #2B8DFF);padding: 11px 20px;}
.basic-btn.reg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top left, #1CBBD8, #1C52D8); border-radius: 23px; opacity: 0; transition: opacity 0.3s ease; }
.basic-btn.reg:hover::before { opacity: 1; }
.basic-btn.reg span {position: relative; padding-right: 17px;}
.basic-btn.reg span::after { content: ''; position: absolute; top: 50%; right: 0;transform: translate(0, -50%); width: 12px; height: 12px; background-image: url("../images/common/icon-reg-plus.svg"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}

.basic-btn.square.add {min-width: 104px;background-color: #7B91AD;padding: 11px 20px 10px 16px;}
.basic-btn.square.add:hover { background-color: #657283; }
.basic-btn.add span {position: relative; padding-left: 18px;}
.basic-btn.add span::after { content: ''; position: absolute; top: 50%; left: 0;transform: translate(0, -55%); width: 15px; height: 15px; background-image: url("../images/common/icon-reg-white.svg"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}

.chk-btn-wrap {justify-content: space-between;}
.chk-btn-wrap .basic-check-box input[type="checkbox"] + label {min-width: 88px; padding: 10px; border-radius: 5px; border: 1px solid #D4D8DD; background-color: #F7F9FC; font-size: 0.813rem;font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-gray-color); text-align: center; transition: background-color 400ms, border-color 400ms; line-height: 1;}
.chk-btn-wrap .basic-check-box input[type="checkbox"]:checked + label {border-color: var(--main-color);background-color: var(--main-color); color: #fff;}
.chk-btn-wrap .basic-check-box input[type="checkbox"] + label::before {display: none;}
.chk-btn-wrap .basic-check-box input[type="checkbox"]:checked + label::before {display: none;}
.chk-btn-wrap .basic-radio-box {margin: 0;}
.chk-btn-wrap .basic-radio-box input[type="radio"] + label {min-width: 88px; padding: 10px; border-radius: 5px; border: 1px solid #D4D8DD; background-color: #F7F9FC; font-size: 0.813rem;font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-gray-color); text-align: center; transition: background-color 400ms, border-color 400ms; line-height: 1;}
.chk-btn-wrap .basic-radio-box input[type="radio"]:checked + label {border-color: var(--main-color);background-color: var(--main-color); color: #fff;}
.chk-btn-wrap .basic-radio-box input[type="radio"] + label::before {display: none;}
.chk-btn-wrap .basic-radio-box input[type="radio"]:checked + label::before {display: none;}
.chk-btn-wrap .basic-radio-box input[type="radio"] + label span {padding: 0;}
.chk-btn-wrap .basic-radio-box input[type="radio"] + label:hover {border-color: var(--main-color); color: var(--main-color);}
.chk-btn-wrap .basic-radio-box input[type="radio"]:checked + label:hover {color: #fff;}

.basic-btn.square { min-width: 160px; padding: 16px 16px 15px; border-radius:4px; background-color: var(--main-point-color); transition: background-color 400ms; font-size: 15px; }
.basic-btn.square:hover {background-color: #0D6BE8; }
.basic-btn.square.view {padding: 14px 20px; background-color: #2C7BE5;transition: background-color 400ms;}
.basic-btn.square.view:hover {background-color: #0D6BE8; }
.basic-btn.square.gray { background-color: #E1E3E6; font-size: 15px; color: var(--text-gray-color); transition: background-color 400ms; -webkit-transition: background-color 400ms; -moz-transition: background-color 400ms; -ms-transition: background-color 400ms; -o-transition: background-color 400ms; }
.basic-btn.square.gray:hover {background-color: #D4D8DD; }
.basic-btn.square.gray.view {background-color: #E1E3E6;}
.basic-btn.gray.view:hover {background-color: #D4D8DD; }
.basic-btn.line.gray.icon { padding: 9px 12px 8px; border-radius: 5px; border: 1px solid var(--text-gray-color); color: var(--text-dark-color);}
.basic-btn.line.gray.icon span {position: relative; padding: 0 18px 0 0;}
.basic-btn.line.gray.icon span::after { content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 14px; height: 14px; background-image: url("../images/common/icon-edit.svg"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); }
.basic-btn.line.gray.icon:hover {background-color: #ececec;}
.basic-btn.line.gray.icon.refresh {background-color: #fff;padding: 7px 10px 6px 6px;border-color: #D4D8DD;border-radius: 3px; border-color: #ddd; }
.basic-btn.line.gray.icon.refresh:hover { border-color: var(--text-gray-color);background-color: #ececec;}
.basic-btn.line.gray.icon.refresh span {padding: 0 0 0 20px;}
.basic-btn.line.gray.icon.refresh span::after { width: 20px; height: 20px;background-image: url("../images/common/icon-refresh.svg");}
.basic-btn.square.small { min-width: 64px; padding: 9px 12px; background-color: var(--main-color); border-radius: 4px; font-size: 0.875rem; }
.basic-btn.square.xsmall { min-width: 88px; padding: 6px 12px; background-color: #7B91AD; border-radius: 4px; font-size: 0.875rem;font-weight: 500; font-variation-settings: 'wght' 500; }
.basic-btn.square.xsmall:hover {background-color: #657283;}
#tag-btn { background-color: #7B91AD;}
#tag-btn:hover {background-color: #657283;}
.basic-btn.square.xxsmall { min-width: auto; padding: 14px 20px; background-color: #E1E3E6; border-radius: 4px; font-size: 0.875rem;font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-gray-color);}
.icon-btn {width: 42px; height: 42px; border-radius: 50%; background-position: center; background-size: 100% auto; background-repeat: no-repeat; transition: background-color 400ms;}
.basic-btn.square.small.gray {background-color: #E1E3E6;color: var(--text-gray-color);}
.basic-btn.square.small.gray:hover {background-color: #D4D8DD;}
.basic-btn.square.xxsmall:hover {background-color: #D4D8DD;}
.icon-btn.gray {background-color: #F5F5F5;}
.icon-btn.gray:hover {background-color: #E1E3E6;}
.icon-btn.copy {background-image: url("../images/common/icon-copy.svg");}
.icon-btn.url {background-image: url("../images/common/icon-url.svg");}
.icon-btn.zoom { background-image: url("../images/common/icon-search-gray.svg"); background-size: 23px auto;}
.icon-btn.close { width: 42px; height: 42px; background-image: url("../images/common/icon-close-light-gray.svg"); background-size: 20px auto;}
.icon-btn.dot { width: 30px; height: 30px; border-radius: 0;background-image: url("../images/common/icon-dot-btn.svg"); }
.icon-btn span {text-indent: -9999px;}
.icon-txt-btn {display: flex;align-items: center;font-size: 1rem;font-weight: 400; font-variation-settings: 'wght' 400; color: var(--main-txt-color); transition: all 400ms;}
.icon-txt-btn-end { display: inline-block; margin-top: -2px; margin-right: 8px; width: 28px; height: 28px; border-radius: 50%; background-color: var(--sub-bg-color); background-image: url("../images/common/icon-download.svg"); background-position: center; background-size: 18px auto; background-repeat: no-repeat; transition: background-color 400ms; }
.icon-txt-btn:hover {font-weight: 500; font-variation-settings: 'wght' 500; }
.icon-txt-btn:hover .icon-txt-btn-end {background-color: #cde0f3;font-weight: 500; font-variation-settings: 'wght' 500; }
.dot-btn-child {display: none; position: absolute; top: 0;left: 0;transform: translate(-100%, 0);width: max-content;min-width: 94px;}
.dot-btn-child.on {display: block;}
.dot-btn-child ul {padding: 15px; border-radius: 15px; background-color: #fff; border: 1px solid #707070;}
.dot-btn-child .dot-btn {font-size: 0.875rem; font-weight: 300; font-variation-settings: 'wght' 300; transition: all 400ms;}
.dot-btn-child .dot-btn:hover { font-weight: 500; font-variation-settings: 'wght' 500;}
.dot-btn-child ul li + li {margin-top: 10px;}
.search-del-btn {display: none;align-items: center;justify-content: center;position: absolute;top: 50%;left: 8px;width: 28px;height: calc(100% - 6px);font-size: 1rem;transform: translate(0, -50%);}
.search-del-btn span {display: inline-block;width: 22px;height: 22px;border-radius: 50%;background-image: url('../images/common/icon-close.svg');background-repeat: no-repeat;background-position: center center;background-size: contain;text-indent: -9999px;}
.search-del-btn.on {display: flex;}

@media screen and (max-width: 768px) {
    .basic-btn {min-width: 130px;padding: 12px 24px;font-size: 16px;}
    .basic-btn.reg {width: auto; min-width: auto; padding: 10px 12px;}
    .icon-txt-btn {font-size: 14px;}
    .basic-btn.ctg.line {padding: 12px 18px;}
    .icon-txt-btn-end {width: 24px; height: 24px;}
}
@media screen and (max-width: 420px) {
    .basic-btn.reg {font-size: 12px; padding: 10px 8px;}
}

/*========== Custom Design - Checkbox ==========*/
.chk-wrap {display: flex;align-items: center; flex-wrap: wrap; gap: 10px 30px;}
.basic-check-box {margin-right: 40px;}
.basic-check-box input[type="checkbox"] { display: none; } 
.basic-check-box input[type="checkbox"] + label { position: relative; display: inline-block; width: auto; height: auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; font-size: 1rem; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text-gray-color); } 
.basic-check-box input[type="checkbox"] + label::before { content: ''; display: inline-block; width: 20px; height: 20px; margin: 0 0.57em 0 0; border: 1px solid #D4D8DD; box-sizing: border-box; background-color: #fff; vertical-align: middle; transform: translateY(-1.5px); cursor: pointer; } 
.basic-check-box input[type="checkbox"]:checked + label::before { border: 1px solid var(--main-point-color); background-image: url("../images/common/icon-check.svg"); background-repeat: no-repeat; background-position: center center; background-size: contain; cursor: pointer; } 
.basic-check-box.disabled input[type="checkbox"] + label, .basic-check-box input[type="checkbox"]:disabled + label, .basic-check-box input[readonly] + label { cursor: default; } 
.basic-check-box.disabled input[type="checkbox"] + label::before, .basic-check-box input[type="checkbox"]:disabled + label::before, .basic-check-box input[readonly] + label::before { opacity: 0.4; border: 1px solid #E5E5E5; background-color: #E5E5E5; } 
.basic-check-box.round input[type="checkbox"] + label::before{ border-radius: 50%;}

@media screen and (max-width: 768px) {
    .basic-check-box input[type="checkbox"] + label {font-size: 14px;}
}


/*========== Custom Design - Radiobox ==========*/
.basic-radio-box { display: inline-block; margin-right: 40px; } 
.basic-radio-box:last-child { margin: 0; } 
.basic-radio-box input[type="radio"] { display: none; } 
.basic-radio-box input[type="radio"] + label { position: relative; display: inline-block; margin: 0 auto; font-size: 1rem; color: var(--text-gray-color); font-weight: 400; font-variation-settings: 'wght' 400; vertical-align: middle; cursor: pointer; box-sizing: border-box; } 
.basic-radio-box input[type="radio"] + label span { padding: 0 0 0 32px; } 
.basic-radio-box input[type="radio"] + label::before { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center center; background-size: contain; border: 1px solid #D4D8DD; border-radius: 50%; transform: translate(0, -50%); box-sizing: border-box; } 
.basic-radio-box input[type="radio"]:checked + label::before { background-image: url("../images/common/icon-radio.svg");} 
.basic-radio-box.disabled input[type="radio"] + label::before { background-color: #f2f2f2; border: 1px solid #bbb; } 
.basic-radio-box.disabled input[type="radio"]:checked + label::after, .basic-radio-box.disabled input[type="radio"][checked] + label::after { background-color: #bbb; border: 1px solid #bbb; }
.basic-radio-box.disabled input[type="radio"] + label, .basic-radio-box input[type="radio"]:disabled + label, .basic-radio-box input[readonly] + label { cursor: default; } 
.basic-radio-box.disabled input[type="radio"] + label::before, .basic-radio-box input[type="radio"]:disabled + label::before, .basic-radio-box input[readonly] + label::before { opacity: 0.4; border: 1px solid #E5E5E5; background-color: #E5E5E5; } 

@media screen and (max-width: 768px) {
    .basic-radio-box input[type="radio"] + label {font-size: 14px;}
    .basic-radio-box input[type="radio"] + label::before {width: 20px; height: 20px;}
    .basic-radio-box input[type="radio"] + label span {padding: 0 0 0 26px;}
}

/*========== Custom Design - Button On & Off ==========*/
.btn-on-off-wrap { position: relative; } 
.btn-on-off-wrap input[type="checkbox"] + label { position: static; top: auto; left: auto; transform: translate(0,0); cursor: pointer; } 
.btn-on-off-wrap input[type="checkbox"] + label::before, .btn-on-off-wrap input[type="checkbox"]:checked + label::before { width: auto; height: auto; background-color: transparent; background: none; border: none; border-radius: 0; transition: 0ms; outline: none; outline-color: transparent; } 
.btn-on-off-wrap input[type="checkbox"] + label { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 82px;height: 34px; border-radius: 18px; background-color: #ddd; } 
.btn-on-off-wrap input[type="checkbox"] + label span { position: absolute; left: 10px; transform: translateX(-6px); top: 3px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background-color: #fff; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"]:checked + label span {transform: translateX(40px);} 
.btn-on-off-wrap input[type="checkbox"]:checked + label::before { opacity: 0; visibility: hidden; } 
.btn-on-off-wrap input[type="checkbox"] + label::before, .btn-on-off-wrap input[type="checkbox"] + label::after { position: absolute; top: 0; width: 30px; line-height: 34px; color: #fff; text-align: center; } 
.btn-on-off-wrap input[type="checkbox"] + label::before { opacity: 1; visibility: visible; content: '비공개'; right: 9px; width: auto; background-color: transparent; border-radius: 17px; font-size: 0.875rem; font-weight: 600; font-variation-settings: 'wght' 600; color: var(--text-gray-color); text-align: left; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"] + label::after { display: none; content: '공개'; left: 13px; font-size: 0.875rem; font-weight: 600; font-variation-settings: 'wght' 600; color: #fff; background-color: transparent; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"]:checked + label::after { display: block; } 
.btn-on-off-wrap input[type="checkbox"]:checked + label { background-color: var(--main-color); } 
.btn-on-off-wrap input[type="checkbox"].disabled + label, .btn-on-off-wrap input[type="checkbox"].disabled + label::after, .btn-on-off-wrap input[type="checkbox"].disabled + label::before { background-color: #ececec; color: #d5d5d5; } 
.btn-on-off-wrap input[type="checkbox"].disabled, .btn-on-off-wrap input[readonly] + label, .btn-on-off-wrap input[readonly] + label::before, .btn-on-off-wrap input[readonly] + label::after { pointer-events: none; cursor: default; } 

/*========== Custom Design - Input ==========*/
.input-box input {width: 100%;height: 44px;padding: 14px;border: 1px solid var(--input-bg-color);background-color: var(--input-bg-color);border-radius: 4px;font-size: 0.875rem;font-weight: 400; font-variation-settings: 'wght' 400;color: var(--text-dark-color);}
.input-label { min-width: min-content; min-width: max-content; margin-bottom: 8px; font-size: 0.875rem; font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-gray-color);}
.form-cont-group .input-label.w100p {margin: 0;}
.input-box.password {position: relative;}
.input-box.password input {background-color: #EDF2F8;}
.input-box.password .eye-btn {position: absolute;top: 0;right: 16px;width: 30px;height: 100%;background-image: url('../images/common/icon-eyes-off.svg');background-size: 22px auto;background-repeat: no-repeat;background-position: center center;}
.input-box.password .eye-btn.open {background-image: url('../images/common/icon-eyes.svg');}
.input-box.white input {padding: 13px 14px; height: 44px; background-color: #fff; border-color: #ccc;}
.input-box.submit input { min-width: 160px; padding: 22px 16px; height: 64px; border-radius:6px; background-color: var(--main-point-color); font-size: 18px; font-weight: 700; font-variation-settings: 'wght' 700; line-height: 1; transition: background-color 400ms; color: #fff; cursor: pointer;}
.input-box.submit input:hover {background-color: #0D6BE8; }
.input-box.submit input:focus {outline: 2px dashed #111;}
.input-box.disabled input {color: #ccc; cursor: default;}
.input-box input:disabled {color: #ccc; cursor: default;}
.input-box input:disabled::placeholder {color: #ccc;}
@media screen and (max-width: 768px) {
    .input-box input {height: 38px;padding: 8px 10px 8px;font-size: 14px;}
}

/*========== Custom Design - Input Button ==========*/
.input-upload-box {display: flex;flex-flow: row nowrap;align-items: center;gap: 6px;width: 100%;}
.input-upload-box .input-box {width: calc(100% - 91px);}
.input-upload-box .input-upload-btn {position: relative;overflow: hidden;cursor: pointer;}
.input-upload-box .input-upload-btn .common-btn {width: 70px;padding: 8px 10px 7px;cursor: pointer;line-height: 1.245;}
.input-upload-box .input-upload-btn input.upload {position: absolute;z-index: 0;top: 0;right: 0;width: 100%;height: 100%;margin: 0;padding: 0;cursor: pointer;opacity: 0;}

/*========== Custom Design - Input Search ==========*/
.common-sch-box {position: relative;}
.common-sch-box .input-box input.common-search {width: 100%;height: 44px;padding: 4px 50px 4px 32px;border: 1px solid #DCEBF7;background-color: #fff;border-radius: 38px;font-size: 1rem;font-weight: 400; font-variation-settings: 'wght' 400;color: var(--text-dark-color); font-family: 'Pretendard Variable', 'Pretendard', sans-serif;}
.common-sch-box .input-box input.common-search::placeholder {color: #838C9B;}
.common-sch-box .search-btn {display: block;position: absolute;top: 2px;right: 20px;width: 32px;z-index: 10;height: 90%;background-image: url('../images/common/icon-cont-search.svg');background-repeat: no-repeat;background-position: center center;background-size: contain;text-indent: -9999px;}
.common-sch-area.main {max-width: 740px; margin: 0 auto;}
.common-sch-area.main .common-sch-box .input-box input.common-search {height: 65px;padding: 21px 82px 21px 30px;font-size: 1.250rem;}
.common-sch-area.main .common-sch-box .search-btn {right: 28px;background-image: url('../images/common/icon-main-search.svg'); background-size: 35px auto;}
@media screen and (max-width: 830px) {
    .common-sch-area.main {margin: 0 40px;}
}
@media screen and (max-width: 768px) {
    .common-sch-area.main {margin: 0 20px;}
    .common-sch-box .search-btn {top: 2px;}
    .common-sch-box .input-box input.common-search {padding: 4px 45px 4px 20px;}
    .common-sch-area:not(.main) .common-sch-box .search-btn {right: 14px;}
    .common-sch-area.main .common-sch-box .input-box input.common-search {height: 52px;padding: 4px 50px 4px 20px;font-size: 1.125rem;}
    .common-sch-area.main .common-sch-box .search-btn {right: 18px;background-size: 28px auto;}
}

/*========== Custom Design - Textarea ==========*/
.textarea-box-wrap { position: relative; background-color: #fff; border-radius: 4px;} 
.textarea-box { min-height: 100%; border: 1px solid #DDE0E4; border-radius: 4px; padding: 12px; min-height: 100px; transition: padding 400ms; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } 
.textarea-box textarea { display: block; width: 100%; min-height: 100%; border-radius: inherit; padding: 1px; font-size: 0.875rem;font-weight: 400; font-variation-settings: 'wght' 400;color: var(--text-dark-color); font-family: 'Pretendard Variable', 'Pretendard', sans-serif;} 
/* Textarea - Keyup */
.textarea-box-wrap:has(.keyup) {position: relative; padding-bottom: 43px;border: 1px solid #DDE0E4;border-radius: 4px;}
.textarea-box-wrap .textarea-box.keyup {min-height: 36px; border: none; } 
.textarea-box-wrap .write-typing { display: flex; align-items: center; position: absolute; top: auto; right: 0.875em; bottom: 0.875em; transform: translate(0,0); font-size: 12px;font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-light-gray-color); } 
.textarea-box-wrap .write-typing .btn-wrap {margin-left: 8px;}
/* Textarea - Disabled & Readonly */
.textarea-box.disabled textarea, .textarea-box textarea:disabled, .textarea-box textarea[readonly] { color: #ddd; } 
.textarea-box-wrap:has(.disabled) .write-typing .typing-num, .textarea-box-wrap:has(textarea:disabled) .write-typing .typing-num ,.textarea-box-wrap:has(textarea[readonly]) .write-typing .typing-num { color: #bbb; } 
@media screen and (max-width: 1024px) {
    .textarea-box { min-height: 80px;} 
}

/*========== Custom Design - Select ==========*/
.basic-select-wrap.flex {display: flex; justify-content: flex-end; gap: 12px;}
.basic-select-box { position: relative; } 
.basic-select-box select { width: 100%; min-width: 140px; height: 44px; padding: 13px 40px 13px 20px; border: 1px solid #ccc; background-image: url("../images/common/icon-select-arrow-down.svg"); background-repeat: no-repeat; background-position: right 10px center; background-size: 30px auto; font-size: 0.938rem; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text-gray-color); line-height: 1; }  
.basic-select-box.gray {width: 100%;}
.basic-select-box.gray select {height: 44px;padding: 14px;border-color: #F5F6F7; background-color: #F5F6F7; border-radius: 4px;font-size: 0.875rem;font-weight: 400;font-variation-settings: 'wght' 400;color: var(--text-dark-color);}
.basic-select-box.disabled select { color: #ccc; cursor: default;}
.basic-select-box select:disabled {color: #ccc; cursor: default;}
.basic-select-box select option { background-color: #fff; color: var(--text-dark-color); padding: 5px 10px; } 
.basic-select-box select option[value="direct-input"] { background-color: #f0f0f0; color: var(--text-dark-color); }
.sort-dropdowns-wrapper {display: flex; align-items: center; gap: 15px;}
.sort-dropdowns-wrapper .basic-select-box select {min-width: 200px;}
@media screen and (max-width: 1024px) {
    .basic-select-box select {height: 38px;padding: 8px 30px 8px 10px;background-position: right center;font-size: 14px;}
    .basic-select-box.gray select {height: 38px;padding: 8px 30px 8px 10px;background-position: right center;font-size: 14px;}
    .reg-section .basic-select-box.gray select {height: 44px;padding: 14px}
}
@media screen and (max-width: 768px) {
    .sort-dropdowns-wrapper {width: 100%;}
    .sort-dropdowns-wrapper > div {width: 100%;}
    .sort-dropdowns-wrapper .basic-select-box select {min-width: auto;}
}

/*========== Custom Design - Upload File ==========*/
.file-upload-wrap { width: 100%; }
.file-upload-wrap .file-upload-btn { display: flex; margin-bottom: 10px; }
.file-upload-wrap .basic-btn.square.small { padding: 8px 20px; background-color: #7B91AD; font-size: 0.875rem; font-weight: 500; font-variation-settings: 'wght' 500; }
.file-upload-wrap .basic-btn.square.small:hover { background-color: #657283; }
.file-upload-wrap .upload { display: none; }
.file-upload-wrap .file-upload-box { position: relative; width: 100%; min-width: 100%; padding: 10px; border-radius: 4px; cursor: pointer; background-color: var(--input-bg-color); box-sizing: border-box; transition: background-color 400ms ease;}
.file-upload-wrap .file-upload-box .file-upload-box-inner {display: flex; position: relative; z-index: 1; min-height: 144px; border: 1px dashed #7B91AD;border-width: 2px;border-radius: 4px;}
.file-upload-wrap .file-upload-box .file-upload-box-inner .scroll-x-sec {padding: 10px;}
.file-upload-wrap .file-upload-box:hover, .file-upload-wrap .file-upload-box.drag-over { border-color: #007bff; background-color: #f0f8ff; }
.file-upload-wrap .file-upload-box.drag-over { border-style: solid; }
.file-upload-wrap .file-upload-txt { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; flex: 1; min-height: 160px; font-size: 0.813rem; font-weight: 400; font-variation-settings: 'wght' 400; color: #7B91AD; }
.file-upload-wrap .file-upload-txt p {padding-top: 42px;background-image: url("../images/common/icon-upload-bg.svg");background-repeat: no-repeat;background-size: 32px auto;background-position: top center; }
.file-upload-wrap .file-upload-txt.hidden { display: none; }
.file-upload-wrap .file-upload-txt em {text-decoration : underline; text-underline-position : under; text-underline-offset : 1px;}
.file-upload-wrap .image-preview-grid { display: flex; gap: 10px; align-items: flex-start; justify-content: flex-start; width: fit-content; width: max-content; height: 100%; }
.file-upload-wrap .image-preview-item { overflow: hidden; position: relative; width: 120px; height: 120px; border-radius: 4px; background-color: #dddddd; }
.file-upload-wrap .image-preview-item img { height: 100%; }
.file-upload-wrap .image-remove-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background-color: #fff;background-image: url("../images/common/icon-close.svg");background-repeat: no-repeat;background-size: contain;background-position: center; border: 1px solid #D4D8DD; cursor: pointer; transition: all 400ms ease; text-indent: -9999px;}
.file-upload-wrap .image-preview-item:hover .image-remove-btn { background-image: url('../images/common/icon-close-blue.svg'); border-color: var(--main-color); }
.file-upload-wrap .file-upload-box .file-upload-box-inner .scroll-x-sec::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff; border-radius: 6px; } 
.file-upload-wrap .file-upload-box .file-upload-box-inner .scroll-x-sec::-webkit-scrollbar-thumb { background-color: #666666; border-radius: 6px; } 
.file-upload-wrap .file-upload-box .file-upload-box-inner .scroll-x-sec::-webkit-scrollbar-track { background-color: #E5E5E5;} 
.file-upload-wrap:has(.img-preview) .file-upload-txt {display: none;}
.file-upload-wrap:has(.image-preview-item) .file-upload-txt {display: none;}
@media (max-width: 768px){
    .file-upload-wrap .file-upload-txt p {width: 180px;}
}

/*========== Error ==========*/
.error-wrap {display: none;}
.error .error-wrap {display: block; margin-top: 10px;}
p.error {padding-left: 1.50em;background-image: url("../images/common/icon-info-red.svg");background-repeat: no-repeat;background-size: 1em auto;background-position:top left;font-size: 0.750rem;color: #BC0D0D;line-height: 1.1;}

/*========== Error ==========*/
.no-content {display: flex; justify-content: center; align-items: center; padding: 50px 0;}
.no-content p {padding-left: 1.50em;background-image: url("../images/common/icon-info.svg");background-repeat: no-repeat;background-size: 1em auto;background-position: top left;font-size: 0.875rem;color: var(--text-light-gray-color);line-height: 1.1;}

/*========== Tab Menu ==========*/
.scroll-tab { position: absolute; width: 100%;} 
.scroll-tab.fixed { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; background-color: #fff;will-change: transform; transition: transform 0.3s ease, top 0.3s ease;} 
.scroll-tab:has(.lnb-tab-wrap) {z-index: 101;}
.scroll-tab.fixed:has(.lnb-tab-wrap) {z-index: 101;}
.scroll-tab:has(.tab-menu) {position: static; z-index: 98;}
.scroll-tab.fixed:has(.tab-menu) {position: fixed;z-index: 98;}

.tab-container { position: relative; } 
.tab-container .swiper-notification { display: none !important; } 
.tab-menu { position: relative; display: flex; flex-flow: row nowrap; align-items: center; margin: 0 auto; } 
.tab-menu.main-top {justify-content: center;}
.scroll-tab.fixed:has(.tab-menu) {padding: 20px 0; height: auto; border-bottom: 1px solid #ccc;}
.tab-menu li.tab-link { width: calc(100%/4); margin-right: 16px;} 
.tab-menu li.tab-link:last-child {margin-right: 0;}
.tab-menu li.tab-link a { display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 26px; border: 1px solid #F5F5F5; background-color: #F5F5F5; padding: 0.938em 0 0.875em; font-size: var(--text18-16); font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-light-gray-color); line-height: 1; text-align: center; -webkit-user-drag: none; transition: all 400ms;} 
.tab-menu li.tab-link.current a { border-color: var(--main-color); background-color: #fff; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-color); } 
.tab-content-wrap .tab-content { display: none; } 
.tab-content-wrap .tab-content.current { display: block; } 
.tab-container .swiper-wrapper {touch-action: pan-x; }
@media screen and (max-width: 1024px) {
    .scroll-tab:has(.tab-menu) {padding: 0 clamp(20px, 3.933vw, 72px);}
    .scroll-tab.fixed:has(.tab-menu) {padding: 18px clamp(20px, 3.933vw, 72px) 15px;}
    .tab-menu li.tab-link { width: 140px; } 
}
@media screen and (max-width: 768px){
    .tab-menu.main-top {justify-content: flex-start;margin-left: 20px;}
    .scroll-tab .tab-menu.main-top {margin-left: 0;}
    .tab-menu li.tab-link { width: 108px; margin-right: 8px; } 
    .tab-menu li.tab-link:last-child {margin-right: 30px;}
    .tab-menu li.tab-link a {padding: 10px;}
}

/*========== Custom Select ==========*/
.custom-select-box { position: relative; width: auto; min-width: auto; height: 2.500em; font-size: 16px; }
.custom-select-box ul { opacity: 0; overflow: hidden; position: relative; z-index: 102; height: 0; min-width: 10.500em;padding: 15px; background-color: var(--main-bg-color); border-radius: 15px;transition: height 0.3s ease;}
.custom-select-box ul li { width: 100%; height: auto; padding: 0; transition: background-color 300ms; }
.custom-select-box ul li a { padding: 5px 0; font-size: 0.875rem; font-weight: 300; font-variation-settings: 'wght' 300; color: #B1B1B1; transition:all 400ms;}
.custom-select-box ul li:hover a { font-weight: 500; font-variation-settings: 'wght' 500;color: #EBEBEB;}
.custom-select-box.open ul { opacity: 1; border: 1px solid #707070;}
.custom-select-box .init { min-width: 152px; height: 100% }
.custom-select-box .init a {position: relative; padding: 10px 34px 10px 15px; font-size: 1rem; font-weight: 300; font-variation-settings: 'wght' 300; color: #E8E8E8; }
.custom-select-box .init .icon {position: absolute; top: 50%; right: 0;transform:translate(0, -50%); width: 8px; height: 8px;}
.custom-select-box .init .icon::before { content: ''; position: absolute; top: 50%; left: 0; transform:translate(0, -50%); width: 100%; height: 1px; background-color: #E8E8E8;}
.custom-select-box .init .icon::after { content: ''; position: absolute; top: 0; left: 50%; transform:translate( -50%,0) rotate(0); width: 1px; height: 100%; background-color: #E8E8E8; transition: transform 250ms; transform-origin: center;}
.custom-select-box.open .init .icon::after {transform:translate( -50%,0) rotate(90deg);}
.custom-select-box .total-num { display: inline-block; margin-top: 2px; margin-left: 3px; font-size: 0.875rem; font-weight: 800; font-variation-settings: 'wght' 800; color: var(--main-color); }

/* 위로 열리는 스타일 */
.custom-box-wrap.up .custom-select-box ul {position: absolute; top: auto; bottom: 100%; }

@media screen and (max-width: 768px) {
    .custom-select-box .init {min-width: 140px;}
    .custom-select-box .init a {font-size: 14px;}
    .custom-select-box ul li a {font-size: 13px;}
}

/*========== LNB Tab Menu ==========*/
.lnb-tab-wrap { opacity: 1; display: flex; justify-content: flex-start; width: 100%;}
.lnb-tab-wrap .lnb-tab {width: auto;max-width: none; margin: 0; }
.lnb-tab-wrap.draggable .lnb-tab {cursor: grab;}
.lnb-tab-wrap.draggable .lnb-tab:active {cursor: grabbing;}
.lnb-tab-wrap .lnb-tab .lnb-tab-list {flex: 0 0 auto; width: auto; margin-right: 1.67em; font-size: var(--text-lg);}
.lnb-tab-wrap .lnb-tab .lnb-tab-list .lnb-tab-link { font-size: inherit; color: var(--text-light-gray-color);white-space: nowrap; transition: color 400ms;}
.lnb-tab-wrap .lnb-tab .lnb-tab-list .lnb-tab-link:focus-visible {outline: none;}
.lnb-tab-wrap .lnb-tab .lnb-tab-list .lnb-tab-link:focus-visible span::after {width: 100%; background-color: var(--main-color);}
.lnb-tab-wrap .lnb-tab .lnb-tab-list.active .lnb-tab-link { color: var(--main-txt-color); font-weight: 700; font-variation-settings: 'wght' 700;}
.lnb-tab-wrap .lnb-tab .lnb-tab-list .lnb-tab-link span { position: relative; padding: 1.11em 0; font-size: inherit; font-weight: 500; font-variation-settings: 'wght' 500; transition: all 400ms;}
.lnb-tab-wrap .lnb-tab .lnb-tab-list .lnb-tab-link span::after {content: '';display: block;position: absolute;bottom: 0;left: 50%;width: 0%;height: 2px;background-color: var(--main-txt-color);transform: translateX(-50%);font-size: inherit;}
.lnb-tab-wrap .lnb-tab .lnb-tab-list.active .lnb-tab-link span::after { animation: lnbLine 400ms 850ms forwards; -webkit-animation: lnbLine 400ms 850ms forwards; }
.scroll-tab.fixed .lnb-tab-wrap .lnb-tab .lnb-tab-list.active .lnb-tab-link span::after {bottom: 0; }
.lnb-tab-wrap .lnb-tab .lnb-tab-list.active .lnb-tab-link span {font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: -0.030em;}
.lnb-tab-wrap .lnb-tab .lnb-tab-list.en.active .lnb-tab-link span {letter-spacing: -0.045em;}

@keyframes lnbLine {0% { width: 0;} 100% { width: 104%;}}
@media (hover: hover) {
    .lnb-tab-wrap .lnb-tab .lnb-tab-list .lnb-tab-link:hover {color: var(--main-txt-color);}
}
@media screen and (max-width: 1520px){
    .lnb-tab-wrap .lnb-tab .lnb-tab-list .lnb-tab-link span::after {bottom: 0;}
}
@media screen and (max-width: 1024px){
    .lnb-tab-wrap {overflow: visible;}
}
@media screen and (max-width: 768px){
    .lnb-tab-wrap .lnb-tab .lnb-tab-list { margin-right: 1.06em;}
    .lnb-tab-wrap .lnb-tab .lnb-tab-list .lnb-tab-link span {padding: 0.845em 0;}
}

/*========== Visual Content ==========*/
.visual-area .visual-top {display: flex; justify-content: space-between;align-items: center;margin: 0 0 30px;}
.visual-area .visual-top .visual-top-txt {font-size: 1rem; font-weight: 400; font-variation-settings: 'wght' 400;color: #838C9B;}
.visual-area .visual-top .visual-top-txt em {font-weight: 600; font-variation-settings: 'wght' 600;}
@media screen and (max-width: 920px){
    .visual-area .visual-top {flex-wrap: wrap; gap: 12px; margin: 0 0 20px;}
}
@media screen and (max-width: 768px){
    .visual-area .visual-top .visual-top-txt {font-size: 14px;}
}

/*========== common-table ==========*/
.visual-table-wrap {position: relative;}
.common-table { width: 100%; border-radius: 4px; border-collapse: collapse; border-spacing: 0; } 
.scroll-x-sec .common-table { min-width: 960px;} 
.common-table th { padding: 20px 15px; border-bottom: 1px solid #ccc; text-align: center; vertical-align: middle; } 
.common-table thead tr.thead-top th { border-top: 1px solid var(--main-txt-color); } 
.common-table td { padding: 27px 15px; border-bottom: 1px solid #ccc; text-align: center; vertical-align: middle; } 
.common-table .con-th {min-width: 70px; font-size: 1rem; font-weight: 600; font-variation-settings: 'wght' 600; color: var(--main-txt-color); word-break: keep-all;} 
.common-table .con-td { min-width: 70px; font-size: 1rem; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--main-txt-color);  word-break: keep-all;} 
.common-table th.txt-left, .common-table td.txt-left {text-align: left;}
.common-table th.txt-right, .common-table td.txt-right {text-align: right;}
.common-table td.context {cursor: pointer;}
.common-table td.context:hover .con-td p { text-decoration : underline; text-underline-position : under;} 
.common-table td.img.context .con-td {display: flex; align-items: center; gap: 20px;}
.common-table .img-box { display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 130 / 90; max-width: 130px; width: 130px; border-radius: 14px;}

.common-table th.w6p {width: 6%;}
.common-table th.w8p {width: 8%;}
.common-table th.w10p {width: 10%;}
.common-table th.w11p {width: 11%;}
@media screen and (max-width: 768px){
    .common-table th { padding: 12px;} 
    .common-table td {padding: 18px 12px;}
    .common-table .con-th {font-size: 15px;}
    .common-table .con-td {font-size: 14px;}
}


/*========== Pagination ==========*/
.pagination-wrap { display: flex; justify-content: center; align-items: center; width: 100%; margin: 60px 0 0; text-align: center; } 
.pagination-btn { opacity: 1; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: transparent; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; transition: all 400ms; } 
.pagination-btn:hover { background-color: #eee; } 
.pagination-btn.first { margin-right: 4px; background-image: url("../images/common/icon-prev-one.svg"); } 
.pagination-btn.last { margin-left: 4px; background-image: url("../images/common/icon-next-one.svg"); } 
.pagination-btn.prev { background-image: url("../images/common/icon-prev-two.svg"); } 
.pagination-btn.next { background-image: url("../images/common/icon-next-two.svg"); } 
.pagination-list { display: inline-block; width: auto; margin: 0 12px; } 
.pagination-list li { display: inline-block; width: 20px; height: 20px; margin: 0 1px; line-height: 20px; } 
.pagination-list li button { width: 100%; height: 100%; border-radius: 50%; background-color: transparent; font-size: 0.875rem; font-weight: 500; font-variation-settings: 'wght' 500; color: #707070; transition: all 400ms; } 
.pagination-list li.current button, .pagination-list li:hover button,.pagination-list li.current:hover button { background-color: #DBEEFF; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-color); } 
@media screen and (max-width: 768px) {
    .pagination-wrap {margin: 30px 0 0;}
}

/*========== List Style ==========*/
.list-style.row {display: flex; align-items: center; gap: 2.50em;}
.list-style > li {position: relative;padding: 0 0 0 8px;font-size: 0.750rem;font-weight: 400;font-variation-settings: 'wght' 400;color: var(--text-dark-color);text-align: left;line-height: 1.66; word-break: keep-all;}
.list-style > li + li {margin: 2px 0 0;}
.list-style > li.sub-num { color: var(--text-gray-color);}
.list-style > li.sub-num + li.sub-num {margin: 4px 0 0;}
.list-style.row > li + li {margin: 0;}
.common-table .list-style > li {padding: 0 0 0 0.670em;font-size: 1.125rem; word-break: keep-all;line-height: 1.44;}
.common-table .list-style > li span {line-height: inherit;}
.list-style > li.circle::before {content: '';position: absolute;top: 8px;left: 0;width: 2px;height: 2px;background-color: var(--text-gray-color);border-radius: 50%;}
.list-style > li.dash {margin-left: 0.670em;margin-top: 4px; padding: 0 0 0 0.8em;}
.list-style > li.dash {margin-left: 0.670em;margin-top: 4px; padding: 0 0 0 0.8em;}
.list-style.strong > li {color: var(--text-dark-color);}
.list-style.strong > li strong {font-weight: 700;font-variation-settings: 'wght' 700;}
.common-table .list-style > li.dash + li.dash {margin-top: 8px; line-height: 1.25;}
.list-style > li:not(.dash) + li.dash {margin-top: 10px;}
.list-style > li.dash::before {content: '-';position: absolute;top: 0;left: 0;font-size: inherit; color: inherit;}
.sub-list {position: relative; margin: 15px 0 0; }
.sub-list > li {font-size: inherit;font-weight: 400;font-variation-settings: 'wght' 400;color: var(--text-gray-color);word-break: keep-all;}
.sub-list > li + li {margin: 4px 0 0;}
.number-list > li {display: flex; font-size: var(--text18-16);font-weight: 500;font-variation-settings: 'wght' 500;color: var(--text-dark-color); line-height: 1.66; word-break: keep-all;}
.number-list > li .num {position: relative; min-width: 30px; margin-right: 8px; padding-right: 8px; font-size: 1.125rem;font-weight: 700;font-variation-settings: 'wght' 700;color: var(--main-color);line-height: 1.4;}
.number-list > li .num::after {content: ''; position: absolute; top: 7px; right: 0; width: 1px; height: 11px; background-color: #ddd;}
.number-list > li + li {margin-top: 10px;}

@media screen and (max-width: 768px) {
    .list-style > li + li {margin-top: 6px;}
    .list-style > li:not(.dash) + li.dash {margin-top: 6px;}
    .number-list > li { line-height: 1.5;}
    .number-list > li + li {margin-top: 17px;}
}

/*========== profile ==========*/
.profile {display: flex; align-items: center; gap: 5px; font-weight: 500;font-variation-settings: 'wght' 500;color: #192031;}
.profile .profile-img { display: flex; justify-content: center; align-items: center; overflow: hidden; width: 18px; aspect-ratio: 1/1; border-radius:50%; background-color: #CECECE;}
.profile .profile-img img {background-color: #CECECE;}
.profile .profile-id { font-size: 12px; line-height: 1.6;}

.sub-top-profiles .profiles-inner {display: flex; justify-content: space-between; gap: 30px; padding: 57px 100px;}
.sub-top-profiles .profile {gap: 40px;flex: 1;}
.sub-top-profiles .profile .profile-img {width: 126px;}
.sub-top-profiles .profile .profile-conts {width: 100%;}
.sub-top-profiles .profile .profile-id {display: flex; align-items: center; gap: 12px; font-size: var(--title-lg);font-weight: 600; font-variation-settings: 'wght' 600;}
.sub-top-profiles .profile .profile-id {overflow: hidden;max-width: 80%;text-overflow: ellipsis;}
.profile-img-area { position: relative; width: 126px; border-radius: 50%;}
.profile-img-area::before {content: '';z-index: 30; position: absolute;right: 0;bottom: 0;width: 32px;height: 32px;border-radius: 50%;background-image: url('../images/common/icon-camera.svg');background-position: center center;background-repeat: no-repeat;background-size: 22px auto;background-color: var(--text-gray-color);}

.profile-status-tit {font-size: 1rem;font-weight: 600;font-variation-settings: 'wght' 600; color: #7B91AD;}

@media screen and (max-width: 1340px) {
    .sub-top-profiles .profiles-inner {padding: 40px;}
}
@media screen and (max-width: 1180px) {
    .profile-status {align-self: flex-end;}
    .sub-top-profiles .profiles-inner {flex-direction: column;gap: 60px;}
}
@media screen and (max-width: 768px) {
    .sub-top-profiles .profiles-inner {padding: 30px;}
    .profile-status {align-self: flex-start;width: 100%;}
    .sub-top-profiles .profile {flex-direction: column;}
    .sub-top-profiles .profile .profile-id {flex-direction: column; max-width: 100%; text-align: center;}
}

/*========== Item Icon ==========*/
.item-icon-list {display: flex;gap: 7px; align-items: center;}
.item-icon-list li {display: flex;align-items: center;gap: 4px;font-size: 12px;color: #192031; cursor: default;}
.item-icon-list li a {display: flex;align-items: center;gap: 4px;font-size: 12px;color: #192031; cursor: pointer;}
.item-icon-list li span {line-height: normal;}
.grid-item .item-icon-list li a {padding: 5px 15px 5px 7px; transition: all 400ms;}
.grid-item.img-item .item-icon-list li {color: #fff;}
.grid-item.img-item .item-icon-list li a {color: #fff;}
.item-icon-list li .icon-box {display: block; width: 14px;height: 14px;background-size: contain;background-repeat: no-repeat;background-position: center;}
.item-icon-list li.view .icon-box {width: 17px;height: 17px;background-image: url('../images/common/icon-view.svg');}
.item-icon-list li.like .icon-box {background-image: url('../images/common/icon-like.svg');}
.item-icon-list li.book .icon-box {background-image: url('../images/common/icon-book.svg');}
.item-icon-list li.like.on .icon-box {background-image: url('../images/common/icon-like-on.svg');}
.item-icon-list li.book.on .icon-box {background-image: url('../images/common/icon-list-book-on.svg');}
.item-icon-list li.like.on .num {font-weight: 600; font-variation-settings: 'wght' 600;}
.item-icon-list li.like a:hover .num {font-weight: 600; font-variation-settings: 'wght' 600;}

.item-icon-list.status-btn li {font-size: 1rem;color: var(--text-dark-color);}
.item-icon-list.status-btn li a {font-size: 1rem;color: var(--text-dark-color);}
.item-icon-list.status-btn li .icon-box {width: 30px; height: 30px;}
.item-icon-list.status-btn li.view .icon-box {background-image: url('../images/common/icon-list-view.svg');}
.item-icon-list.status-btn li.like .icon-box {background-image: url('../images/common/icon-list-like.svg');}
.item-icon-list.status-btn li.book .icon-box {background-image: url('../images/common/icon-list-book.svg');}
.item-icon-list.status-btn li.like.on .icon-box {background-image: url('../images/common/icon-list-like-on.svg');}
.item-icon-list.status-btn li.book.on .icon-box {background-image: url('../images/common/icon-list-book-on.svg');}
.item-icon-list.status-btn li.zoom .icon-box {width: 20px; height: 20px;background-image: url('../images/common/icon-zoom.svg');}
.item-icon-list.status-btn li.zoom a {font-size: 0.750rem;font-weight: 500;font-variation-settings: 'wght' 500;color: #7B91AD; transition: color 400ms;}
.item-icon-list.status-btn li.zoom a:hover {color: var(--text-dark-color);}

.item-icon-list.user-btn {flex-direction: column;align-items: flex-start;gap: 8px; margin: 20px 0 0;}
.item-icon-list.user-btn li {font-size: 1rem;color: var(--text-gray-color);}
.item-icon-list.user-btn li a {gap: 6px;font-size: 1rem;color: var(--text-gray-color);}
.item-icon-list.user-btn li.group a { cursor: default;}
.item-icon-list.user-btn li.email a:hover {text-decoration: underline; text-underline-position: under;}
.item-icon-list.user-btn li .icon-box {width: 20px; height: 20px;}
.item-icon-list.user-btn li.group .icon-box {background-image: url('../images/common/icon-group.svg');}
.item-icon-list.user-btn li.email .icon-box {background-image: url('../images/common/icon-email.svg');}

.item-icon-list.mypage-list {gap: 10px; margin: 20px 0 0;}
.item-icon-list.mypage-list li {width: 130px; font-size: 1rem;color: var(--text-gray-color);}
.item-icon-list.mypage-list li a {flex-direction: column; align-items: flex-start; gap: 10px;font-size: 1rem;color: var(--text-gray-color);}
.item-icon-list.mypage-list li .num {font-size: 1.38rem; font-weight: 600; font-variation-settings: 'wght' 600; color: var(--text-dark-color); transition: color 300ms;}
.item-icon-list.mypage-list li.active .num {text-decoration : underline; text-underline-position : under;}
.item-icon-list.mypage-list li a:active .num {text-decoration : underline; text-underline-position : under;}
.item-icon-list.mypage-list li .mypage-list-txt {font-size: 1rem;font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text-light-gray-color);transition: color 300ms; word-break: keep-all;}
.item-icon-list.mypage-list li:hover .num { color: var(--main-color);}
.item-icon-list.mypage-list li:hover .mypage-list-txt {color: var(--main-color);}
.item-icon-list.mypage-list li .icon-box {width: 28px; height: 28px;}
.item-icon-list.mypage-list li.prmpt-edit .icon-box {background-image: url('../images/common/icon-prmpt-edit.svg');}
.item-icon-list.mypage-list li.like .icon-box {background-image: url('../images/common/icon-mypage-like.svg');}
.item-icon-list.mypage-list li.team .icon-box {background-image: url('../images/common/icon-team.svg');}
.item-icon-list.mypage-list li.prmpt-edit:hover .icon-box {background-image: url('../images/common/icon-prmpt-edit-on.svg');}
.item-icon-list.mypage-list li.like:hover .icon-box {background-image: url('../images/common/icon-list-like-on.svg');}
.item-icon-list.mypage-list li.team:hover .icon-box {background-image: url('../images/common/icon-team-on.svg');}

.item-icon-list.mypage-list li.on.prmpt-edit .icon-box {background-image: url('../images/common/icon-prmpt-edit-on.svg');}
.item-icon-list.mypage-list li.on .num { color: var(--main-color);}
.item-icon-list.mypage-list li.on .mypage-list-txt {color: var(--main-color);}
.item-icon-list.mypage-list li.like.on .icon-box {background-image: url('../images/common/icon-list-like-on.svg');}
.item-icon-list.mypage-list li.on.team .icon-box {background-image: url('../images/common/icon-team-on.svg');}

@media screen and (max-width: 1340px) {
    .item-icon-list.mypage-list li {width: 115px;}
}
@media screen and (max-width: 768px) {
    .item-icon-list.mypage-list li {width: calc(33.333%);}
    .item-icon-list.user-btn {align-items: center;}
}

/*========== Badge Style ==========*/
.badge-label { padding: 0.49em 1.21em; border-radius:27px; border: 1px solid var(--main-color); font-weight: 600; font-variation-settings: 'wght' 600; color: var(--main-color); line-height: 1; text-align: center;}
.badge-wrap {display: flex; align-items: center;gap: 4px;}
.badge { width: 18px; border-radius:50%; border: 1px solid var(--main-bg-color); font-size: 12px; font-weight: 600; font-variation-settings: 'wght' 600; line-height: 1; text-align: center; text-transform: uppercase; box-sizing: content-box;}
.badge-wrap:not(.default) .badge {height: 18px; line-height: 18.5px;}
.badge.best {border-color: var(--badge-color-red);color: var(--badge-color-red);}
.badge.new {border-color: var(--badge-color-sky);color: var(--badge-color-sky);}
.badge.editor {border-color: var(--badge-color-purple);color: var(--badge-color-purple);}
.badge.mg {border-color: var(--badge-color-orange);color: var(--badge-color-orange);}
.badge-sm { min-width: 52px; padding: 6px 14px; border-radius:27px; background-color: var(--main-color); font-size: 0.875rem; font-weight: 700;font-variation-settings: 'wght' 700; color: #fff; line-height: 1; text-align: center;}
.badge-sm.badge-01 {background-color: #55D1FF;}
.badge-sm.badge-03 {background-color: var(--main-point-color);}
.badge-wrap.default { gap: 6px;flex-wrap: wrap;}
.badge-wrap.default .badge {display: flex; justify-content: center; align-items: center; width: auto; height: 28px; aspect-ratio: initial; padding: 0 16px; border-radius: 18px; font-size: 0.875rem; }
.badge-wrap:has(.badge-status) {justify-content: space-between;}
.badge-status {display: flex; align-items: center; gap: 4px;}
.badge-status + .badge {margin-left: auto;}
.badge-status .badge.locked { display: flex; justify-content: center; align-items: center;  width: auto; height: 22px; line-height: 22px; padding: 0 8px; border-radius: 5px; aspect-ratio: initial;width: 22px; height: 22px;padding: 0; border-color: var(--text-gray-color); background-color: var(--text-gray-color); background-image: url('../images/common/icon-lock-white.svg');background-size: 14px auto; background-repeat: no-repeat;background-position: center; text-indent: -9999px;}
.badge-status .badge.stay { display: flex; justify-content: center; align-items: center; width: auto; height: 22px; line-height: 22px; padding: 0 8px; border-radius: 5px; aspect-ratio: initial;background-color: #7B91AD; border-color: #7B91AD; color: #fff;}
.badge-status .badge.reject { display: flex; justify-content: center; align-items: center; width: auto; height: 22px; line-height: 22px; padding: 0 8px; border-radius: 5px; aspect-ratio: initial; background-color: #fff; border-color: #BC0D0D; color: #BC0D0D; transition: background-color 400ms;}
.badge-status .badge.reject:hover {background-color: #fae2e2;}
.badge-wrap.fixed {position: absolute;z-index: 1; top: 20px; right: 20px; transition: all 200ms;}
.badge-status.square .badge.pick {display: flex; justify-content: center; align-items: center; width: auto; padding: 4px 8px; border-radius: 6px;aspect-ratio: initial; background-color: #fff; border-color: #23BAEF; font-size: 13px; color: #23BAEF;  text-transform: initial; }

/*========== Label Style ==========*/
.label-wrap {display: flex; align-items: center; gap: 0 14px; flex-wrap: wrap; max-width: 1200px; }
.label-wrap .label { display: inline-block;width: auto; padding: 6px 12px; border-radius: 3px; background-color: var(--label-color); font-size: 0.875rem;font-weight: 300;font-variation-settings: 'wght' 300; cursor: pointer;line-height: 1;transition: background-color 400ms;}
.label-wrap .label:hover {background-color: #bfdcfb;}
.label-wrap.tag .label {display: none; align-items: center; padding: 0 5px 0 12px; margin: 0 0 20px;}
.label-wrap.tag .label.on {display: flex;}
.label-wrap.tag .label span {padding: 5px 0 6px; line-height: 1;}
.label-wrap.tag .hashtag {display: inline-block;width: 27px;height: 27px;background-image: url('../images/common/icon-close.svg');background-repeat: no-repeat;background-position: center;background-size: 18px auto;transition: all 0.2s;cursor: pointer;}
@media (max-width: 1024px){
    .label-wrap.tag .label {margin: 0 0 10px;}
}

/*========== Number Badge Style ==========*/
.badge-num { display: flex; justify-content: center; align-items: center; width: 24px; aspect-ratio: 1/1; border-radius: 50%; background-color: #DBF2FF; }
.badge-num em { font-size: 0.875rem; font-weight: 600;font-variation-settings: 'wght' 600; color: var(--main-point-color);line-height: 1;}

/*========== React DatePicker ==========*/
.datepicker-box-wrap {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 8px; } 
.input-box.datepicker-box {width: 100%;}
.input-box.datepicker-box input {background-repeat: no-repeat;background-position: calc(100% - 12px) center;background-size: 14px auto;background-image: url("../images/common/icon-datepicker.svg");cursor: pointer; } 
.datepicker-box-wrap.white input {padding: 15px; background-color: #fff; border: 1px solid #ccc; border-radius: 2px;}

/* DatePicker 입력 필드 및 래퍼 */
.react-datepicker-wrapper, .react-datepicker__input-container { width: 100%; }
.react-datepicker__input-container input { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 2px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 12px) center; background-size: 14px auto; cursor: pointer; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; }
.react-datepicker__input-container input:focus { outline: none; border-color: #007bff; }

/* 캘린더 전체 컨테이너 */
.react-datepicker { width: 300px !important; background-color: #fff; border-radius: 10px; margin-top: 10px; padding: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); border: none !important; z-index: 20001 !important; font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important; }

/* 캘린더 헤더 (월/연도 표시 부분) - renderCustomHeader를 사용하지 않을 경우 텍스트만 표시됨 */
/* renderCustomHeader를 사용한다면 이 스타일은 일부만 적용될 수 있습니다. */
.react-datepicker__header {border: none; border-bottom: none;padding: 0;border-top-right-radius:0;}
.react-datepicker__header.react-datepicker__header--custom {position: relative; flex-direction: column;background-color: transparent;border: none; border-bottom: none;padding: 0;border-top-right-radius:0;}
.react-datepicker__header .react-datepicker__header {position: relative;display: flex;flex-flow: row nowrap;align-items: center;justify-content: center;gap: 8px;width: 100%;height: 48px;border: none; border-bottom: none;padding: 0;border-top-right-radius: 28px !important;border-radius: 28px;padding: 6px;margin: 0 0 20px;background-color: #F8F8F9;}

/* 월/연도 드롭다운 (renderCustomHeader 사용 시) */
.react-datepicker__month-select, .react-datepicker__year-select { width: auto; padding: 0; border: none; background: none; font-size: 17px; font-weight: 700 !important; text-align: center; color: #333; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-position: right 8px center; background-repeat: no-repeat; background-size: 12px; }
.react-datepicker__month-select:focus, .react-datepicker__year-select:focus { outline: none; border: none; }
.react-datepicker__year-select::-webkit-scrollbar { width: 4px; background-color: #f5f5f5; border-radius: 6px; }
.react-datepicker__year-select::-webkit-scrollbar-thumb { background-color: #007bff; border-radius: 6px; }
.react-datepicker__year-select::-webkit-scrollbar-track { background-color: #f5f5f5; border-radius: 6px; }

/* 네비게이션 버튼 (이전/다음 달 화살표) */
.react-datepicker__header .react-datepicker__navigation {position: absolute;top: 6px; float: unset;width: 36px;height: 36px;padding: 4px;border-radius: 50%;border: 1px solid #fff;background-color: #fff;transition: border-color 400ms;cursor: pointer;box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);}
.react-datepicker__header .react-datepicker__navigation--previous { left: 6px; background-image: url('../images/common/icon-arrow-left.svg'); background-size: 24px auto; background-repeat: no-repeat; background-position: center center; }
.react-datepicker__header .react-datepicker__navigation--next { right: 6px; background-image: url('../images/common/icon-arrow-right.svg'); background-size: 24px auto; background-repeat: no-repeat; background-position: center center; }
.react-datepicker__header .react-datepicker__navigation:hover { border-color: #343438; background-color: #fff; }

/* 네비게이션 아이콘 (SVG 이미지로 변경, 경로 수정 필요) */
.react-datepicker__header .react-datepicker__navigation-icon::before { content: none; }
.react-datepicker__header .react-datepicker__navigation-icon--previous::before {display: none;}
.react-datepicker__header .react-datepicker__navigation-icon--next::before {display: none;}

/* 요일 이름 (일 월 화 수 목 금 토) */
.react-datepicker__header .react-datepicker__day-names { display: flex; justify-content: center; margin-bottom: 8px; }
.react-datepicker__day-names .react-datepicker__day-name { width: 36px; font-size: 1rem !important; font-weight: 600 !important;font-variation-settings: 'wght' 600!important; color: #333 !important; text-align: center; margin: 0; }

/* 주 (날짜 행) */
.react-datepicker__week { display: flex; justify-content: space-between; }

/* 각 날짜 (일) */
.react-datepicker__week .react-datepicker__day {display: flex;justify-content: center;align-items: center;width: 36px;height: 36px;margin: 0;border-radius: 50%;font-size: 15px !important;font-weight: 500 !important;font-variation-settings: 'wght' 500 !important;color: var(--text-dark-color) !important;}
.react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {background-color: #007bff !important; color: #fff !important;}
.react-datepicker__week .react-datepicker__day--today {background-color: #f0f8ff !important;border: 1px dashed #1C52D8 !important;}
.react-datepicker__week .react-datepicker__day:hover { border-radius: 50%; }
.react-datepicker__week .react-datepicker__day--selected { background-color: var(--main-color) !important; border-color: var(--main-color) !important; color: #fff !important; }
.react-datepicker__week .react-datepicker__day--disabled { color: #bbb !important; cursor: default; }
.react-datepicker__week .react-datepicker__day--outside-month { color: #ccc !important; }
.react-datepicker__week .react-datepicker__day--selected { background-color: var(--main-color) !important; color: #fff !important; }
.react-datepicker__day--selected { background-color: var(--main-color) !important; color: #fff !important; }
.react-datepicker__day--keyboard-selected.react-datepicker__day--weekend { background-color: var(--main-color) !important; color: #fff !important; }
.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--selected) {background-color: transparent !important;color: var(--text-dark-color) !important;}

/*========== React Quill ==========*/
/* toolbar 영역 */
.form-conts .ql-toolbar.ql-snow {border-bottom: none;}

/* eidtor 영역 */
.quill {height: 280px;}
.quill .ql-editor.ql-blank::before {font-style: normal; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text-dark-color);}

/*========== React Quill PDF ==========*/
.pdf-container { display: flex; flex-direction: column; margin: 0 !important; border: none !important; }
.pdf-header { background-color: #E6F3FF !important; color: var(--text-dark-color) !important; border-radius: 8px 8px 0 0 !important;}
.pdf-view-btn { display: flex; justify-content: center; align-items: center; width: auto !important; height: 35px !important; padding: 10px !important; border-radius: 5px !important; min-width: auto !important; background-color: #fff !important; border: 1px solid var(--main-point-color) !important; font-size: 0.875rem !important; font-weight: 700 !important; font-variation-settings: 'wght' 700 !important; color: var(--main-point-color) !important; text-align: center !important; cursor: pointer !important; white-space: initial !important; transition: all 400ms; }
.pdf-remove-btn { display: flex;justify-content: center;align-items: center;width: auto !important; height: 35px !important; padding: 10px !important; border-radius: 5px !important; min-width: auto !important; background-color: #fff !important; border: 1px solid var(--text-gray-color) !important; font-size: 0.875rem !important; font-weight: 700 !important; font-variation-settings: 'wght' 700 !important; color: var(--text-gray-color) !important; text-align: center !important; cursor: pointer !important; white-space: initial !important;transition: all 400ms; }
.pdf-view-btn:hover { background-color: var(--main-point-color) !important; color: #fff !important;}
.pdf-remove-btn:hover { background-color: #ececec !important; }
.pdf-preview {display: flex; background-color: #E6F3FF !important;}
.pdf-preview > div {min-height: auto !important; padding: 0 !important; border-top: 1px solid #d7e5f0 !important;}

.raw-html-embed {border: 1px solid #ccc;}