@charset "utf-8";
/* Info
 ========================================================================== */
/**
    * 1. Writer: Platform UX. (Weaverloft Corp.)
    * 2. Production Date: 2025-07
    * 3. Client: Auoseed
 */

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

/*========== Base ==========*/
html, body{width: 100%; font-size: 1rem; color: var(--text-color-2); }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size-adjust: 100% }
html, body, * { font-family:'Pretendard', '맑은고딕','Malgun Gothic','돋움',Dotum,Helvetica,Arial,AppleGothic,sans-serif; letter-spacing: -0.025em; -webkit-font-smoothing: antialiased;}
*, *::before, *::after{box-sizing: border-box;}
a {display: inline-block; text-decoration: none;  cursor: pointer; vertical-align: top;}
button {font-size: 1rem; cursor: pointer;}
span {display: inline-block; font-weight: inherit; font-family: inherit; }
input{appearance:none; -webkit-appearance:none; -moz-appearance:none;}
/* input, select, textarea, body, code, button {font-family:'Pretendard', '맑은고딕','Malgun Gothic','돋움',Dotum,Helvetica,Arial,AppleGothic,sans-serif !important;-webkit-font-smoothing: antialiased;} */
*::placeholder { font-size: inherit; font-weight: 400;}
picture, figure { display: block; box-sizing: border-box; margin: 0; font-size: 0; } 
dd, dt{display: inline-block;}
em, img, figure { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; }
article, aside, details, figcaption, figure, main, footer, header, nav, section, summary { display: block}
audio, canvas, video { display: inline-block }
img {max-width: 100%; height: auto; border: 0; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none;}
video, embed, object { max-width: 100% }
.screen-ir { position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0);} 
.manrope{ font-family:'Manrope', 'Pretendard', sans-serif; }
.as-hidden {position: absolute;width: 1px; height: 1px;padding: 0; margin: -1px;border: 0; overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;}
.border-radius-0 {border-radius:0 !important;}
html:has(.modal.open) { overflow-y: hidden;}
/*========== Root ==========*/
:root {
    /* color */
    --text-color-2: #202527;
    --text-color-5: #59596C;
    --text-color-8: #8A8A9A;
    --text-color-c: #C7C7C7;
    --bg-color: #F4F5FA;
    --bg-color-e5: #E5E5E5;
    --point-color: #405CCC;
    --sky-blue: #E8ECFF;
    --red-color: #EF4444;
    --border-color-d: #DBDBEA;
    --border-color-e: #E3E3EE;
    --gradation-color-l: #5B7AF5;
    --gradation-color-r: #A16FFF;
    --point-color-2: #7D8DE3;
}

/*========== Common ==========*/
/*========== 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;}

/*========== Button ==========*/
.btn-wrap { display: flex; align-items: center; justify-content: center; }
.basic-btn { width: 100%; border-radius: 31px; font-size: 18px; font-weight: 700; text-align: center; line-height: 54px; transition: background 0.4s, color 0.4s; }
.basic-btn span { position: relative; z-index: 2; }

/* color */
.basic-btn.gradation { position: relative; line-height: 56px; background: linear-gradient(135deg, var(--gradation-color-l), var(--gradation-color-r)); color: #fff; }
.basic-btn.gradation::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; border-radius: 31px; background: linear-gradient(135deg, #7ac7ff, #bb8cff); transition: opacity 0.4s; }
.basic-btn.gradation:hover::before { opacity: 1; }
.basic-btn.line {background-color: #fff; border: 1px solid var(--point-color); color: var(--point-color); }
.basic-btn.line:hover { background-color: #EBEEFA; color: var(--point-color); }
.basic-btn.line-black {background-color: #fff; border: 1px solid #000; color: var(--text-color-2) }
.basic-btn.line-black:hover { background-color: #F5F5F5;}
.basic-btn.line-gray {background-color: #fff; border: 1px solid var(--border-color-d); color: var(--text-color-5) }
.basic-btn.line-gray:hover { background-color: #F5F5F5;}
.basic-btn.line-dark-gray {background-color: #fff; border: 1px solid var(--text-color-5); color: var(--text-color-5) }
.basic-btn.line-dark-gray:hover { background-color: #F5F5F5;}
.basic-btn.line-red {background-color: #fff; border: 1px solid var(--red-color); color: var(--red-color) }
.basic-btn.line-red:hover { background-color: rgba(239,68,68, 0.1);}
.basic-btn.solid {background-color: var(--point-color); border: 1px solid var(--point-color); color: #fff;}
.basic-btn.solid:hover { background-color:#3149b2; } 
.basic-btn.sky-blue {background-color: var(--sky-blue); border: 1px solid var(--sky-blue); color: var(--point-color);}
.basic-btn.sky-blue:hover { background-color:#CED6FF; } 
.basic-btn.gray {background-color: var(--bg-color); border: 1px solid var(--border-color-d); color: var(--text-color-5);}
.basic-btn.gray:hover { background-color:#E9E9F2; } 
.basic-btn.cont-ctg {padding: 5px 16px; border-radius: 13px; min-width: auto; background-color: #fff; border: 1px solid var(--border-color-d); font-size:13px; font-weight: 600; color: var(--text-color-5); line-height: 1;}
.basic-btn.cont-ctg:hover {opacity: 0.8;}
.basic-btn.cont-ctg.active {background-color:#EBEEFA; color:var(--point-color);}
.basic-btn.excel { border: 1px solid #09955F;}
.basic-btn.excel:hover { background-color: rgba(9,149,95,0.05);}

.delete-btn { width: 18px; height: 18px; background: url("../images/common/icon-delete.svg") no-repeat center / cover;}
.banner-link .icon-box { display: block; width: 33px; height: 33px; background: url("../images/common/banner-arrow-btn.svg") no-repeat center / cover;}
.banner-link:hover .icon-box{animation: diagonalMove 1.2s infinite ease-in-out;}

/* disabled */
.basic-btn.gradation:disabled,
.basic-btn.line:disabled,
.basic-btn.line-black:disabled,
.basic-btn.line-gray:disabled,
.basic-btn.line-dark-gray:disabled,
.basic-btn.line-red:disabled,
.basic-btn.solid:disabled,
.basic-btn.sky-blue:disabled,
.basic-btn.gray:disabled{opacity: 0.6; pointer-events: none;}

/* square */
.basic-btn.square {width: auto; min-width: 74px; padding:0 20px; border-radius: 4px; font-size: 15px; font-weight: 600; line-height: 38px; }

/* size */
.basic-btn.default{padding: 0 30px; width: auto; min-width: 180px;}
.basic-btn.large{padding: 0 30px; width: auto; min-width: 160px;}
.basic-btn.small{padding: 0 30px; line-height: 38px; width: auto; font-size: 16px; min-width: 108px;}
.basic-btn.gradation.small{line-height: 40px;}
.basic-btn.medium{padding: 0 10px; line-height: 44px; width: auto; font-size: 16px; min-width: 175px;}
.basic-btn.medium.small{line-height: 44px;}
.basic-btn.medium.line{line-height: 42px;}
.basic-btn.mini{width: auto; min-width: 74px; font-weight: 600; font-size: 15px; line-height: 30px; padding: 0 14px;}
.basic-btn.square.mini{width: auto; min-width: 74px; padding: 0 10px; font-weight: 600; font-size: 15px; line-height: 30px;}
.basic-btn.square.form-btn,
.basic-btn.form-btn{line-height: 32px; min-width: 116px; padding: 0;}
@media screen and (max-width: 1024px) {
    #container:has(.rwd) .basic-btn.square.form-btn{ min-width: clamp(94px, 11.328vw, 116px); font-size: clamp(13px, 1.465vw, 15px); line-height: clamp(28px, 3.125vw, 32px);}
}
.basic-btn.main-btn { line-height: 58px; }
.basic-btn.main-btn span { letter-spacing: 0.025em; }
.basic-btn.main-btn.gradation { line-height: 60px; }
.basic-btn.main-btn.large { width: auto; min-width: 260px; }

/* icon */
.basic-btn.icon-right span{padding-right: 28px;}
.basic-btn.icon-left{padding: 0 14px 0 12px;}
.basic-btn.icon-left span{padding-left: 24px;}
.basic-btn.icon-left.mini{padding: 0 14px 0 10px;}
.basic-btn.icon-right.search span::after{content:""; position: absolute; top: 50%; right: -4px; transform: translateY(-50%); width: 24px; height: 24px; background: url("../images/common/icon-search-w.svg") 50% 50% / 24px no-repeat;}
.basic-btn.icon-left.search span::after{display: none;}
.basic-btn.search-g span{ background: url('../images/common/icon-search-g.svg') left center / 20px no-repeat; color: var(--text-color-5); font-size: 15px; font-weight: 600;}
.basic-btn.plus span{ background: url('../images/common/icon-plus-59596c.svg') left center / 20px no-repeat; color: var(--text-color-5); font-size: 15px; font-weight: 600;}
.basic-btn.arrow-l span{ background: url('../images/common/icon-admin-arrow-left-59596c.svg') left center / 20px no-repeat; color: var(--text-color-5); font-size: 15px; font-weight: 600;}
.basic-btn.papers span{ background: url('../images/common/icon-papers-59596c.svg') left center / 20px no-repeat; color: var(--text-color-5); font-size: 15px; font-weight: 600;}
.basic-btn.heart span{ background: url('../images/common/icon-likes-59596c.svg') left center / 20px no-repeat; color: var(--text-color-5); font-size: 15px; font-weight: 600;}
.basic-btn.heart.on span{ background: url('../images/common/icon-likes-ef4444.svg') left center / 20px no-repeat; }
.basic-btn.check span{ background: url('../images/common/icon-check-gray.svg') left center / 18px no-repeat; color: var(--text-color-8); font-size: 15px; font-weight: 500;}
.basic-btn.excel span{ background: url('../images/common/icon-excel.svg') left center / 20px no-repeat; color: #09955F; font-size: 15px; font-weight: 600;}
.basic-btn.fix span{ background: url('../images/common/icon-fix.svg') left center / 20px no-repeat; font-size: 15px; font-weight: 600;}
.basic-btn.download span{ background: url('../images/common/icon-download-202527.svg') left center / 20px no-repeat; color: var(--text-color-2); font-size: 15px; font-weight: 600;}

/* file */
.basic-btn.file-btn { display: flex; justify-content: center; align-items: center; min-width: 116px; gap: 4px; cursor: pointer; line-height: 32px; padding: 0;}
.basic-btn.file-btn::before { display: inline-block; content: ''; width: 20px; height: auto; aspect-ratio: 1/1; background-image: url("../images/common/icon-file.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; transition: background 0.3s; }
@media screen and (max-width: 1024px) {
    #container:has(.rwd) .basic-btn.file-btn { min-width: clamp(94px, 11.328vw, 116px); font-size: clamp(13px, 1.465vw, 15px); line-height: clamp(28px, 3.125vw, 32px);}
    #container:has(.rwd) .basic-btn.file-btn::before {width: 1.3333em; }
}

.input-box-wrap .time-limit { position: absolute; right: 136px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 500; color: var(--red-color); }
@media screen and (max-width: 1024px) {
    .input-box-wrap .time-limit{right: 8.5em; font-size: clamp(13px, 1.563vw, 16px);}
}

.btn-wrap.two-btn { gap: 16px; }
.btn-wrap.two-btn .basic-btn { width: calc(50% - 8px); }
.btn-wrap.action-btn-wrap{gap: 10px; justify-content: flex-end;}

/* admin */
.basic-btn.tit-sub.square {min-width: 88px; padding: 0 10px; border-radius: 4px; border:1px solid var(--border-color-d); background-color: #fff; font-size: 15px;font-weight: 600;  color: var(--text-color-5); line-height: 30px;}
.basic-btn.tit-sub.square:hover {opacity: 0.8;}
.basic-btn.tit-sub.square .search { padding-left: 24px; background-image: url('../images/common/icon-btn-search.svg'); background-repeat: no-repeat; background-position: center left;background-size: 20px 20px; }
.basic-btn.tit-sub.square .plus { padding-left: 24px; background-image: url('../images/common/icon-btn-plus.svg'); background-repeat: no-repeat; background-position: center left;background-size: 20px; }
.basic-btn.square.gradation{line-height: 40px;}
.basic-btn.square.gradation::before{border-radius:4px}
/* 검색 초기화 버튼 */
.basic-btn.icon-reset{min-width: 40px; background-image: url("../images/common/icon-reset-gray.svg"); background-position: 50% 50%; background-repeat: no-repeat;}

/* 토글 공통  */
.toggle-wrap,.title-toggle-wrap {position: relative; display: flex;border-radius: 50px;background-color: #EDEFF5;padding: 4px;width: fit-content;overflow: hidden;}
.toggle-wrap .toggle-btn {border: none;background: none;padding:5px 14px;border-radius: 50px;font-size: 13px;font-weight: 500;color: var(--text-color-8); white-space: nowrap;cursor: pointer;transition: color 0.2s ease;}
.toggle-wrap .toggle-btn:hover {opacity: 0.8;}
.toggle-wrap .toggle-btn.active {background-color: var(--point-color); color: #fff;font-weight: 700;}

/* reset 버튼 */
.btn-reset { display: flex; gap: 0.25em; align-items: center; margin-right: 12px; font-size: 16px; font-weight: 700; color: var(--text-color-8); line-height: 1.5; }
.btn-reset::before { content:''; font-size: inherit; width: 1.5em; height: 1.5em; background-image: url('../images/common/icon-reset-gray.svg'); background-repeat: no-repeat; background-size: contain; background-position: left center; transition: transform 0.5s;}
@keyframes rotateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@media (hover: hover) {
	.btn-reset:hover::before { animation: rotateIcon 0.5s;}
}

/*========== 토글 탭 ==========*/
.tab-container .tab-sec{display: none;}
.tab-container .tab-sec.active{display: block;}

.switch-wrap .switch-toggle {position: relative;display: flex;border-radius: 50px;background-color: #EDEFF5;overflow: hidden;}
.switch-wrap .switch-toggle .toggle-btn {z-index: 1;border: none;background: none;padding: 9px 16px;font-size: 13px;font-weight: 500;color: var(--text-color-8);border-radius: 50px;cursor: pointer;transition: color 0.2s ease;}
.switch-wrap .switch-toggle .toggle-btn.active {color: #fff;font-weight: 700;}
.switch-wrap .switch-toggle .switch-indicator {position: absolute;top: 4px;bottom: 4px;left: 4px;width: calc(50% - 4px);border-radius: 50px;background-color: var(--point-color);transition: left 0.3s ease;z-index: 0;}

.title-toggle-wrap .toggle-btn {border: none;background: transparent;padding: 8px 26px;border-radius: 50px;font-size: 13px;font-weight: 500;color: var(--text-color-8); white-space: nowrap;cursor: pointer;transition: all 0.2s ease;}
.title-toggle-wrap .toggle-btn:hover {opacity: 0.8;}
.title-toggle-wrap .toggle-btn.active {background-color: var(--point-color); color: #fff;font-weight: 700;}

.arrow-btn-wrap {display: flex;gap: 8px;}
.arrow-btn-wrap button {width: 32px;height: 32px;border: 1px solid var(--border-color-d);border-radius: 4px;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.2s ease; text-indent: -9999px;}
.arrow-btn-wrap button.arrow-btn-left {background:#fff url("../images/common/icon-admin-arrow-left-g.svg"); background-repeat: no-repeat; background-position: center center; background-size: 10px 14px;}
.arrow-btn-wrap button.arrow-btn-right {background:#fff url("../images/common/icon-admin-arrow-right-g.svg"); background-repeat: no-repeat; background-position: center center; background-size: 10px 14px;}
.arrow-btn-wrap button:hover {opacity: 0.5;}
.arrow-btn-wrap button:disabled {opacity: 0.5;cursor: default;}

.sidebar-btn-wrap {display: flex;gap: 8px;}
.sidebar-btn-wrap button {width: 34px;height: 34px;background:#fff url("../images/common/icon-side-btn.svg"); background-repeat: no-repeat; background-position: center center; background-size: 10px 10px; border: 1px solid var(--border-color-d);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.2s ease; text-indent: -9999px;}
.sidebar-btn-wrap button.sidebar-btn.open {background:#fff url("../images/common/icon-side-btn-open.svg");  background-repeat: no-repeat; background-position: center center; background-size: 10px 10px; }
.sidebar-btn-wrap button:hover {opacity: 0.8;}

/* Sidebar Dot Button */
.icon-btn {width: 42px; height: 42px; border-radius: 50%; background-position: center; background-size: 100% auto; background-repeat: no-repeat; transition: background-color 400ms;}
.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.dot { width: 30px; height: 30px; border-radius: 0;background-image: url("../images/common/icon-dot-btn.svg");}
.icon-btn span {text-indent: -9999px;}

.btn-wrap.dot-area {position: relative;}
.dot-area .dot-btn-child{display: none;}
.dot-area .dot-btn-child.on{display: block;}
.dot-area.sidebar .dot-btn-child {position: absolute; top: 0;left: 0;transform: translate(0%, 28%);width: max-content;min-width: 94px;}
.dot-area.sidebar .dot-btn-child.on {box-shadow: 0px 3px 6px rgba(205, 205, 214, 0.4); border-radius: 7px; }
.dot-area.sidebar .dot-btn-child ul {padding: 12px 16px; border-radius: 7px; background-color: #fff; border: 1px solid var(--border-color-d);}
.dot-area.sidebar .dot-btn-child .dot-btn {font-size: 16px; font-weight: 600;  color: var(--text-color-5); transition: all 400ms;}
.dot-area.sidebar .dot-btn-child .dot-btn:hover {opacity: 0.8;}
.dot-area.sidebar .dot-btn-child ul li + li {margin-top: 15px;}
.dot-area.sidebar .dot-btn-child ul li {padding-left: 30px; background-repeat: no-repeat; background-position: center left; background-size:24px 24px;}
.dot-area.sidebar .dot-btn-child ul li.member-edit {background-image: url('../images/common/icon-edit.svg'); }
.dot-area.sidebar .dot-btn-child ul li.logout {background-image: url('../images/common/icon-logout-red.svg'); }
.dot-area.sidebar .dot-btn-child ul li.logout button {color: var(--red-color);}

/* toggleBtn Grid */
.view-toggle {display: inline-block; vertical-align: top; padding: 3px; border: 1px solid var(--border-color-d); border-radius: 4px;}
.view-toggle button {width: 32px; height: 32px; background-size:20px 20px;  border-radius: 4px;text-indent: -9999px;}
.view-toggle .btn-view-grid {background: url('../images/common/icon-grid.svg')no-repeat center; }
.view-toggle .btn-view-list {background: url('../images/common/icon-list.svg')no-repeat center; }
.view-toggle .btn-view-grid.active {background: #EDEDED url('../images/common/icon-grid-on.svg')no-repeat center; }
.view-toggle .btn-view-list.active {background: #EDEDED url('../images/common/icon-list-on.svg')no-repeat center; }

/* Only Icon Button */
.like-btn {width: 24px; height: 24px; background: url('../images/common/icon-likes-b0b0bb.svg')no-repeat center; background-size: 100% 100%; font-size: 16px; font-weight: 500;  color: var(--text-color-2); cursor: pointer; transition: 0.3s;}
.like-btn:hover { background: url('../images/common/icon-likes-line-ef4343.svg?ver1')no-repeat center; background-size: 100% 100%;}
.like-btn.on {background: url('../images/common/icon-likes-ef4444.svg')no-repeat center; background-size: 100% 100%;}

/* bg */
.like-btn.bg-w {width: 34px; height: 34px; background: url('../images/common/icon-pop-like.svg')no-repeat center; background-size: 100% 100%; font-size: 16px; font-weight: 500;  color: var(--text-color-2); cursor: pointer; transition: 0.3s;}
.like-btn.bg-w:hover { background: url('../images/common/icon-pop-like-h.svg')no-repeat center; background-size: 100% 100%;}
.like-btn.bg-w.on {background: url('../images/common/icon-pop-like-on.svg')no-repeat center; background-size: 100% 100%;}
.msg-btn.bg-w {width: 34px; height: 34px; background: url('../images/common/icon-pop-msg.svg')no-repeat center; background-size: 100% 100%; font-size: 16px; font-weight: 500;  color: var(--text-color-2); cursor: pointer;}
.msg-btn.bg-w:hover { background: url('../images/common/icon-pop-msg-h.svg')no-repeat center; background-size: 100% 100%;}

/* icon img */
.sidebar-icon {display: flex;align-items: center;gap:18px;}
.sidebar-icon .sidebar-icon-img {width:24px; height: 24px; background-repeat: no-repeat; background-position: center left; background-size:100% 100%;}
.sidebar-icon .sidebar-icon-img.update {position: relative;}
.sidebar-icon .sidebar-icon-img.update::after {content: ''; display: block; position: absolute; top:-2px; right:-2px; left: auto; width:4px; height: 4px; background: var(--red-color); border-radius: 50%;}
.sidebar-icon .sidebar-icon-img.home {background-image: url('../images/common/icon-sidebar-meun01.svg'); }
.sidebar-icon .sidebar-icon-img.menu01 {background-image: url('../images/common/icon-sidebar-meun02.svg'); }
.sidebar-icon .sidebar-icon-img.menu02 {background-image: url('../images/common/icon-sidebar-meun03.svg'); }
.sidebar-icon .sidebar-icon-img.menu03 {background-image: url('../images/common/icon-sidebar-meun04.svg'); }
.sidebar-icon .sidebar-icon-img.menu04 {background-image: url('../images/common/icon-sidebar-meun05.svg'); }
.sidebar-icon .sidebar-icon-img.menu05 {background-image: url('../images/common/icon-sidebar-meun06.svg'); }

.sidebar-icon .sidebar-icon-img.home.act {background-image: url('../images/common/icon-sidebar-meun01-active.svg'); }
.sidebar-icon .sidebar-icon-img.menu01.act {background-image: url('../images/common/icon-sidebar-meun02-active.svg'); }
.sidebar-icon .sidebar-icon-img.menu02.act {background-image: url('../images/common/icon-sidebar-meun03-active.svg'); }
.sidebar-icon .sidebar-icon-img.menu03.act {background-image: url('../images/common/icon-sidebar-meun04-active.svg'); }
.sidebar-icon .sidebar-icon-img.menu04.act {background-image: url('../images/common/icon-sidebar-meun05-active.svg'); }
.sidebar-icon .sidebar-icon-img.menu05.act {background-image: url('../images/common/icon-sidebar-meun06-active.svg'); }

.topbox-icon {display: flex;align-items: center;gap:18px;}
.topbox-icon .topbox-icon-img {width:28px; height: 28px; background-repeat: no-repeat; background-position: center left; background-size:100% 100%;}
.topbox-icon .topbox-icon-img.box01 {background-image: url('../images/common/icon-topbox01.svg'); }
.topbox-icon .topbox-icon-img.box02 {background-image: url('../images/common/icon-topbox02.svg'); }
.topbox-icon .topbox-icon-img.box03 {background-image: url('../images/common/icon-topbox03.svg'); }
.topbox-icon .topbox-icon-img.box04 {background-image: url('../images/common/icon-topbox04.svg'); }
.topbox-icon .topbox-icon-img.box05 {background-image: url('../images/common/icon-topbox05.svg'); }

.component-icon{display: flex;align-items: center; gap:18px;}
.status-icon-img {width:24px; height: 24px; background-repeat: no-repeat; background-position: center left; background-size:100% 100%;}
.status-icon-img.box01 {background-image: url('../images/common/icon-month-report01.svg'); }
.status-icon-img.box02 {background-image: url('../images/common/icon-month-report02.svg'); }
.status-icon-img.box03 {background-image: url('../images/common/icon-month-report03.svg'); }
.status-icon-img.box04 {background-image: url('../images/common/icon-month-report04.svg'); }
.status-icon-img.box05 {background-image: url('../images/common/icon-month-report05.svg'); }

.profile-icon {display: flex;align-items: center;gap: 5px;}
.profile-icon .profile-img {display: flex;justify-content: center;align-items: center;overflow: hidden;width: 30px;height: 30px; aspect-ratio: 1 / 1;border-radius: 50%;background-color: #F2F3FA;}

.badge-icon .badge-img {width: 16px; height: 16px;}

/*========== Checkbox ==========*/
.checkbox-wrap { display: flex; }
.checkbox-wrap input[type="checkbox"] + label { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--text-color-5); line-height: 1; cursor: pointer; }
.checkbox-wrap input[type="checkbox"] + label::before { display: inline-block; content: ''; width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border-color-d); background: #fff; }
.checkbox-wrap input[type="checkbox"]:checked + label::before { background-image: url("../images/common/icon-check.svg"); background-repeat: no-repeat; background-position: center; background-size: 14px; background-color: var(--point-color-2); border-color: var(--point-color-2); }
.checkbox-wrap.disabled input[type="checkbox"] + label, .checkbox-wrap input[type="checkbox"]:disabled + label { cursor: default; }
.checkbox-wrap.disabled input[type="checkbox"] + label::before, .checkbox-wrap input[type="checkbox"]:disabled + label::before { background-color: #f5f5f5; border-color:var(--border-color-d); background-image: url("../images/common/icon-check-d.svg"); }
.checkbox-wrap.disabled input[type="checkbox"]:not(:checked) + label::before, .checkbox-wrap input[type="checkbox"]:not(:checked):disabled + label::before { background: #f5f5f5; }
@media screen and (max-width: 1024px) {
    #container:has(.rwd) .checkbox-wrap input[type="checkbox"] + label{font-size: clamp(14px, 1.563vw, 16px); }
    #container:has(.rwd) .checkbox-wrap input[type="checkbox"] + label::before{width: clamp(20px, 2.344vw, 24px); height: auto; aspect-ratio: 1/1; border-radius: 0.25em;}
}
@media screen and (max-width: 767px) {
    #container:has(.rwd) .checkbox-wrap input[type="checkbox"] + label{ line-height: 1.3;}
}

/*========== Input ==========*/
.input-box{position: relative;}
.input-box .input-field { width: 100%; height: 56px; padding: 18px 16px; border-radius: 6px; font-size: 16px; font-weight: 500; color: var(--text-color-2); }
.input-box .input-field::placeholder { font-size: 16px; font-weight: 500; color: var(--text-color-8); }
.input-box.line .input-field { border: 1px solid var(--border-color-e); background: #fff; }
.input-box.background .input-field { background: var(--bg-color); }
.input-box.disabled .input-field, .input-box .input-field:disabled { background: #F5F5F5; color: var(--text-color-8); }
.input-box.disabled .input-field::placeholder, .input-box .input-field:disabled::placeholder { color: var(--text-color-8);}
.input-box.button { position: relative; }
.input-box.button .input-field { padding-right: 136px; }
.input-box.button .btn-wrap { position: absolute; right: 10px; bottom: 11px;}
.input-box.icon { position: relative; }
.input-box.icon .input-field { padding: 13px 16px 13px 52px; }
.input-box.icon::before { display: inline-block; content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-image: url("../images/common/icon-profile.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; }
.input-label:not(.screen-ir) { display: block; padding-bottom: 7px; font-size: 16px; font-weight: 600; color: var(--text-color-5); }
.input-label.essential::after { content: '*'; font-size: inherit; color: var(--red-color); font-weight: inherit; }
.input-box-wrap .error-wrap { display: none; padding-top: 10px; }
.input-box-wrap .error-wrap .error { font-size: 12px; color: var(--red-color); word-break: keep-all; }
.input-box-wrap.error .error-wrap { display: block; }
.input-box.radius .input-field{border-radius:43px;}
.input-box.shadow .input-field{box-shadow: 0 3px 10px rgb(205 205 214 / 30%)}
.input-box.search-bar{position: relative;}
.input-box.search-bar .input-field{height: 68px; padding: 0 68px 0 30px; font-size: 18px; font-weight: 500; color: var(--text-color-5);}
.input-box.search-bar .btn-wrap{position: absolute; top: 0; right: 0;}
.icon-btn{font-size: 0;}
.icon-btn.search{background: url("../images/common/icon-search-8a8a9a.svg") 50% 50% / 34px no-repeat; width: 68px; height: 68px; border-radius: 50%;}
@media screen and (max-width: 1024px) {
    #container:has(.rwd) .input-box .input-field { height: 3.5em; padding: 1.125em 1em; border-radius: 0.375em; font-size: clamp(14px, 1.563vw, 16px); }
    #container:has(.rwd) .input-box .input-field::placeholder { font-size: clamp(14px, 1.563vw, 16px);}
    #container:has(.rwd) .input-box.icon .input-field { padding: 0.8125em 1em 0.8125em 3.25em; }
    #container:has(.rwd) .input-box.icon::before { left: 0.875em; width: 1.875em; height: auto; aspect-ratio: 1/1;}
    .input-label:not(.screen-ir) { padding-bottom: clamp(4px, 0.684vw, 7px); font-size: clamp(14px, 1.563vw, 16px); }
    #container:has(.rwd) .input-box.button .btn-wrap {bottom: clamp(8px, 1.074vw, 11px);}
}
@media screen and (max-width: 767px) {
    #container:has(.rwd) .input-box .input-field {height: clamp(44px, 6.389vw, 49px); padding: clamp(12px, 1.465vw, 15px) 14px;}
    #container:has(.rwd) .input-box.icon .input-field { padding: 12px 14px 12px 45px; }
    #container:has(.rwd) .input-box-wrap .error-wrap { padding-top: clamp(8px, 0.977vw, 10px); }
    #container:has(.rwd) .input-box-wrap .error-wrap .error{font-size: clamp(10px, 1.172vw, 12px);}
}

/* 중간사이즈 검색 */
.input-box.search-bar.medium .input-field{padding: 0 40px 0 14px;}
.icon-btn.search.medium{width: 40px; height: 40px; background-size: 18px;}

.input-box input.input-field{transition: box-shadow 0.3s;}
.input-box input.input-field:focus{box-shadow: 0 0 0 2px var(--point-color-2) inset;}

.file-btn-wrap { display: flex; align-items: center; gap: 10px; }
.file-btn-wrap > * { flex: 1; }

.input-box:has(#loginId)::before {background-image: url("../images/common/icon-profile.svg");}
.input-box:has(#loginPw)::before {background-image: url("../images/common/icon-lock.svg");}
.input-box:has(#userName)::before { background-image: url("../images/common/icon-name.svg"); }
.input-box:has(#name)::before { background-image: url("../images/common/icon-name.svg"); }
.input-box:has(#userMail)::before { background-image: url("../images/common/icon-mail.svg"); }
.input-box:has(#email)::before { background-image: url("../images/common/icon-mail.svg"); }

.input-box.medium .input-field{height: 40px; border-radius: 4px; padding: 12px 14px;}
.input-box.small .input-field{height: 34px; border-radius: 4px; padding: 8px 14px;}

.input-box .reset-btn{display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; width: 18px; height: auto; aspect-ratio: 1/1; background: url("../images/common/icon-delete.svg") no-repeat center / cover;}
.input-box .reset-btn.on { display: block; }
@media screen and (max-width: 1024px) {
    .input-box .reset-btn { width: clamp(14px, 1.758vw, 18px); }
}

.input-box .pw-btn{display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 44px; width: 30px; height: auto; aspect-ratio: 1/1; background: url("../images/common/icon-pw-show.svg") no-repeat center / cover;}
.input-box.line .pw-btn { top: auto; bottom: 13px; right: 10px; transform: none; }
.input-box .pw-btn.hide{ background: url("../images/common/icon-pw-hide.svg") no-repeat center / cover;}
.input-box .pw-btn.on { display: block; }
@keyframes diagonalMove {
    0% {transform: translate(0, 0);}
    50% {transform: translate(6px, -6px);}
    100% {transform: translate(0, 0);}
}
@media screen and (max-width: 1024px) {
    .input-box .pw-btn { width: clamp(24px, 2.93vw, 30px); }
    .input-box.line .pw-btn { bottom: clamp(10px, 1.27vw, 13px);}
}

/* 키워드 input */
.input-tag-box { display: flex; flex-wrap: wrap; row-gap: 12px; column-gap: 6px; align-items: center; width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--border-color-e); border-radius: 6px;}
.input-tag-box .input-tag-placeholder { font-size: 16px; font-weight: 500; color: var(--text-color-8);}
.input-tag-box input { font-size: 16px;}
.input-tag { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: fit-content; font-size: 15px; font-weight: 500; color: var(--text-color-5); padding: 7px 9px 7px 16px; border-radius: 30px; background-color: var(--bg-color); }
.input-tag button { display: inline-block; width: 18px; height: 18px; font-size: 0; background-image: url('../images/common/icon-del-8A8A9A.svg'); background-position: center; background-image: contain; background-repeat: no-repeat;}
.step-input.step .input-tag-box { background-color: #fff; }
.step-input:not(.step) .input-tag-box { pointer-events: none; background-color: #F5F5F5;}
.input-tag-box:has(.input-tag) .input-tag-placeholder { display: none;}
.modal-search-field .input-tag-box { margin-top: 10px;}
.input-tag-box input { border: none;  outline: none; background: transparent; font-size: 16px; font-weight: 500; flex: 1; }
.input-tag-box:not(:has(.input-tag)) input::placeholder { opacity: 0;}
.input-tag-box:has(input:focus) .input-tag-placeholder { display: none;}
.input-tag-box.medium { min-height: 40px; padding: 8px 14px; border-radius: 4px;}
.input-tag-box.medium .input-tag-placeholder { font-size: 15px; }
.input-tag-box.medium input { font-size: 15px;}
.medium .input-tag { gap: 10px; font-size: 14px; padding: 3px 6px 3px 10px; border-radius: 20px;}

/* 공통 border-focus */
.border-focus { position: absolute; top: -1px; left: -1px; width: calc(100% + 1px); height: calc(100% + 1px); opacity: 0; background: transparent; transition: opacity 300ms; border: 2px solid var(--point-color-2); border-radius: 6px; pointer-events: none;}
select:focus~.border-focus, input:focus~.border-focus { opacity: 1;}
.custom-select-box.open .border-focus { opacity: 1;}

/* Drag file */
.drag-file-area .input-box .drag-file-label{display:flex; gap:14px; align-items: center; background-color: var(--bg-color); padding: 27px 30px; border:1px dashed var(--border-color-e); border-radius:6px; cursor: pointer;}
.drag-file-area .input-box .drag-file-label .file-btn{max-width: 116px;}
.drag-file-area .input-box .drag-file-label .txt strong{display: block; font-weight: 600; font-size: 16px; color: var(--text-color-5);}
.drag-file-area .input-box .drag-file-label .txt span{font-size: 14px; color: var(--text-color-8);}
.drag-file-area .file-list{display:flex; flex-wrap:wrap; gap:10px; align-items: center;}
.drag-file-area .file-list li{position: relative; font-weight: 500; font-size: 15px; color: var(--text-color-5); padding: 0 43px 0 16px; background-color: var(--bg-color); border-radius:20px; line-height: 32px;}
.drag-file-area .file-list:has(li){margin-top: 19px;}
.drag-file-area .file-list li .delete-btn{position: absolute; top: 50%; right: 9px; background: url("../images/common/icon-delete-8.svg") 50% 50% no-repeat; transform: translateY(-50%);}

/* TextArea */
.textarea-box-wrap textarea{border:1px solid var(--border-color-e); border-radius:6px; width: 100%; height: 200px; padding: 20px 16px; font-weight: 500; font-size: 16px; color: var(--text-color-2); vertical-align: top; resize:none}
.textarea-box-wrap textarea::placeholder{color: var(--text-color-8);}
.textarea-box-wrap textarea{transition: box-shadow 0.3s;}
.textarea-box-wrap textarea:focus{box-shadow: 0 0 0 2px var(--point-color-2) inset;}
.textarea-box-wrap.disabled textarea, .textarea-box-wrap textarea:disabled { background: #f5f5f5; pointer-events: none; }
@media screen and (max-width: 1024px) {
    #container:has(.rwd) .textarea-box-wrap textarea{ height: clamp(170px, 19.531vw, 200px); padding: clamp(14px, 1.953vw, 20px) clamp(14px, 1.563vw, 16px); border-radius:6px; font-size: clamp(14px, 1.563vw, 16px); }
}

/* Datepicker */
.input-box.timepicker-box.disabled input.input-field,
.input-box.datepicker-box.disabled input.input-field{pointer-events: none; background-color: #f5f5f5;}

.input-box.datepicker-box input.input-field{background: #fff url('../images/common/icon-date.svg') right 10px center; background-size: 20px 20px; background-repeat: no-repeat; color: var(--text-color-8); cursor: pointer;}
.ui-widget{font-size: 0.97222rem;}
.ui-datepicker{margin-top: 6px; padding: 12px 12px 6px;}
.ui-widget.ui-widget-content{border: 1px solid var(--border-color-d);}
.ui-datepicker .ui-datepicker-header{display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap: 4px; padding: 0;}
.ui-datepicker .ui-datepicker-title{position: relative; display: flex; flex-flow: row nowrap; align-items: baseline; justify-content: flex-start; width: calc(100% - 28px - 28px - 8px); margin: 0; padding-left: 36px; font-size: 15px; font-weight: 500; color: var(--text-color-5); line-height: 1;}
.ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month{width: auto; margin: 0; border: none; font-size: inherit; font-weight: inherit; color: inherit;}
.ui-datepicker select.ui-datepicker-year{ position: absolute; top: 0; left: 0; width: 64px; margin-left: -4px; padding-left: 4px; background-color: transparent;}
.ui-datepicker select.ui-datepicker-year::-webkit-scrollbar, .ui-datepicker select.ui-datepicker-month::-webkit-scrollbar{width: 4px}
.ui-datepicker select.ui-datepicker-year ~ span::after{content: ''; display: inline-block; width: 16px; height: auto; aspect-ratio: 1/1; margin-right: 2px; background-image: url('../images/common/icon-select-arrow-8a8a9a.svg'); background-size: 16px auto; background-repeat: no-repeat; background-position: center center; vertical-align: bottom;}
.ui-datepicker select.ui-datepicker-month{margin-left: 6px; padding: 0 16px 0 4px;  background-image: url('../images/common/icon-select-arrow-8a8a9a.svg'); background-size: 16px auto; background-repeat: no-repeat; background-position: center right;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{position: relative; width: 28px; height: auto; aspect-ratio: 1/1; background-color: var(--bg-color); background-size: contain; background-position: center center; transition: background-color 0.3s;}
.ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover,
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover{border: 1px solid var(--border-color-d); background-color: #E9E9F2;}
.ui-datepicker .ui-datepicker-prev{top: auto; left: auto; order: 2; background-image: url('../images/common/icon-arrow-left-8a8a9a.svg');}
.ui-datepicker .ui-datepicker-next{top: auto; left: auto; right: auto; order: 3; background-image: url('../images/common/icon-arrow-right-8a8a9a.svg');}
.ui-helper-clearfix:before, .ui-helper-clearfix:after{display: none;}

.ui-datepicker table{margin: 10px auto 0; font-size: 14px;}
.ui-datepicker thead th{padding: 6px 4px; background-color: var(--bg-color); font-size: 13px; font-weight: 600; color: var(--text-color-8); line-height: 1.385;}
.ui-datepicker thead th:first-child{border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: var(--red-color);}
.ui-datepicker thead th:last-child{border-top-right-radius: 4px; border-bottom-right-radius: 4px; color: var(--point-color);}
.ui-datepicker tbody td{padding: 0;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{margin: 5px 0; padding: 5px 4px; border: none; border-radius: 4px; font-size: 14px; font-weight: 500; text-align: center; line-height: 1;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: none; background: none; color: var(--point-color); }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: none; background-color: var(--bg-color); }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{background-color: var(--point-color);}
.ui-state-highlight.ui-state-active, .ui-widget-content .ui-state-highlight.ui-state-active, .ui-widget-header .ui-state-highlight.ui-state-active { color: #fff; }

/* Timepicker */
.input-box.timepicker-box input.input-field{background: #fff url('../images/common/icon-time.svg') right 10px center; background-size: 20px 20px; background-repeat: no-repeat; color: var(--text-color-8); cursor: pointer;}
.timepicker-box{position: relative;}
.time-select{position: absolute; width: 262px; top: 46px; left: 0; display: flex; align-items: center; border:1px solid var(--border-color-d); padding: 19px 22px; background: #fff; opacity: 0; visibility: hidden; border-radius:4px; z-index: 10;}
.timepicker-box.open .time-select{opacity: 1; visibility: visible;}
.timepicker-box.open input.input-field{box-shadow: 0 0 0 2px var(--point-color-2);}
.time-select > span{margin: 0 10px; font-weight: 500; font-size: 16px; color: var(--text-color-5);}
.time-select .box{width: 62px; border-radius:4px; border:1px solid var(--border-color-d); overflow: hidden;}
.time-select .box.focus{border-color:var(--point-color-2)}
.time-select .box span{display: block; width: 100%; height: 22px; cursor: pointer;}
.time-select .box span.time-up{background: var(--bg-color) url("../images/common/icon-time-up.svg") 50% 50% no-repeat;}
.time-select .box span.time-down{background: var(--bg-color) url("../images/common/icon-time-down.svg") 50% 50% no-repeat;}
.time-select .box input{width: 100%; height: 40px; padding: 0; text-align: center; font-weight: 500; font-size: 16px; color: var(--text-color-5); border:1px solid var(--border-color-d); border-right-color: transparent; border-left-color: transparent; transition: border 0.3s;}
.time-select .time-radio-box{width: 50px; margin-left: 22px;}
.time-select .time-radio-box .basic-radio-box{margin-bottom: 14px;}
.time-select .time-radio-box .basic-radio-box:last-of-type{margin-bottom: 0;}
.time-select .time-radio-box .basic-radio-box input[type="radio"] + label > span{padding-left: 26px;}
.time-select .time-radio-box .basic-radio-box input[type="radio"]:checked + label::before,
.time-select .time-radio-box .basic-radio-box label::before{width: 20px; height: 20px;}
.time-select .time-radio-box .basic-radio-box input[type="radio"] + label::after{width: 12px; height: 12px; left: 4px; transform: translate(0,-50%);}

/*========== Radio ==========*/
.radio-box-wrap { display: flex; flex-flow: row wrap; align-items: center; gap: 10px;}
.radio-box-wrap.vertical{ flex-flow: column; align-items: flex-start; gap: 10px;}
.basic-radio-box{ display: inline-block; }
.basic-radio-box input[type="radio"]{display:none;}
.basic-radio-box input[type="radio"] + label{position:relative;display:inline-block;margin:0 auto;color:#666;font-weight:500;vertical-align:middle;cursor:pointer;box-sizing:border-box;}
.basic-radio-box input[type="radio"] + label > span{padding:0 0 0 24px;}
.basic-radio-box input[type="radio"] + label::before{content:'';display:inline-block;position:absolute;top:50%;left:0;width:18px;height:18px;border:1px solid #D5D5E1;border-radius:50%;transform:translate(0,-50%);box-sizing:border-box;}
.basic-radio-box input[type="radio"] + label::after{content:'';display:inline-block;position:absolute;top:50%;left:0;width:10px;height:10px;transform:translate(25%,-50%);box-sizing:border-box;}
.basic-radio-box input[type="radio"]:checked + label{font-weight:500;}
.basic-radio-box input[type="radio"]:checked + label::before{width:18px;height:18px;border:1px solid var(--point-color-2);border-radius:50%;vertical-align:middle;}
.basic-radio-box input[type="radio"]:checked + label::after{width:12px;height:12px;background-color:var(--point-color-2);border:1px solid var(--point-color-2);border-radius:50%;vertical-align:middle;}
.basic-radio-box.table input[type="radio"] + label span{padding:0 0 0 16px;}
.basic-radio-box.table input[type="radio"] + label::before{width:16px;height:16px;}
.basic-radio-box.table input[type="radio"]:checked + label::after{width:10px;height:10px;transform:translate(29%,-50%);}

.basic-radio-box.large input[type="radio"] + label{display:flex; align-items: center;}
.basic-radio-box.large input[type="radio"] + label > span{padding-left: 34px; font-weight: 500;}
.basic-radio-box.large input[type="radio"] + label::before,
.basic-radio-box.large input[type="radio"]:checked + label::before{width: 24px; height: 24px;}
.basic-radio-box.large input[type="radio"]:checked + label::after{width: 16px; height: 16px;}

/* disabled */
.basic-radio-box.disabled input[type="radio"] + label, .basic-radio-box input[type="radio"]:disabled + label { cursor: default; }
.basic-radio-box.disabled input[type="radio"] + label::before,.basic-radio-box input[type="radio"]:disabled + label::before{background-color:#f2f2f2;border:1px solid #bbb;}
.basic-radio-box.disabled input[type="radio"]:checked + label::after,.basic-radio-box input[type="radio"]:checked:disabled + label::after{background-color:#bbb;border:1px solid #bbb;}

/*========== Radio & Checkbox 커스텀(박스형태) ==========*/
/* Radio box */
.basic-radio-box.box-platform-select input[type="radio"] + label::before,
.basic-radio-box.box-platform-select input[type="radio"] + label::after { display: none !important;}
.basic-radio-box.box-platform-select input[type="radio"] + label { min-width: 160px; padding: 16px 20px; border: 1px solid var(--border-color-d); border-radius: 6px; text-align: center; background-color: #fff; transition: background 300ms; -webkit-transition: background 300ms; -moz-transition: background 300ms; -ms-transition: background 300ms; -o-transition: background 300ms; }
.basic-radio-box.box-platform-select.small input[type="radio"] + label { min-width: 128px; padding: 7px 15px; }
.basic-radio-box.box-platform-select input[type="radio"] + label span { padding-left: 2em; color: var(--text-color-8); font-size: 15px; line-height: 1.6; font-weight: 500; background-position: left center; background-repeat: no-repeat; background-size: contain; }
.basic-radio-box.box-platform-select input[type="radio"].platform-insta + label span { background-image: url('../images/common/icon-logo-insta.svg');}
.basic-radio-box.box-platform-select input[type="radio"].platform-tiktok + label span { background-image: url('../images/common/icon-logo-tiktok.svg');}
.basic-radio-box.box-platform-select input[type="radio"]:checked + label { border: 1px solid var(--point-color);}
.basic-radio-box.box-platform-select input[type="radio"]:checked + label span { color: var(--point-color);}
/* Check box */
.checkbox-wrap input[type="checkbox"].box-check + label { padding: 0 23px 0 14px; border: 1px solid var(--border-color-d); background-color: #fff; border-radius: 4px; font-size: 15px; font-weight: 500; line-height: 38px; color: var(--text-color-8); gap: 4px; transition: background 300ms;}
.checkbox-wrap input[type="checkbox"].box-check + label::before { width: 18px; height: 18px; border-radius: 0; border: none; background-image: url('../images/common/icon-check-gray.svg'); background-position: center; background-size: 18px; background-repeat: no-repeat; background-color: transparent; }
.checkbox-wrap input[type="checkbox"].box-check:checked + label::before { background-image: url('../images/common/icon-check-point.svg'); background-color: transparent;}
.checkbox-wrap input[type="checkbox"].box-check:checked + label { color: var(--point-color); border-color: var(--point-color-2);}

.checkbox-wrap input[type="checkbox"].box-check.no-icon-check + label {padding: 0 16px;}
.checkbox-wrap input[type="checkbox"].box-check.no-icon-check + label::before {content: none;}

.checkbox-wrap input[type="checkbox"].box-check:disabled + label::before { opacity: 0.2; background-image: url("../images/common/icon-check-gray.svg"); background-color: transparent; }

/* 템플릿 관리 - 연결 레이아웃 체크박스 */
/* 기본 버튼 */
.checkbox-wrap.chk-group .checkbox-area {display:flex;}
.checkbox-wrap.chk-group .checkbox-area input[type="checkbox"].box-check.no-icon-check + label {padding: 0 16px;border: 1px solid var(--border-color-d);background-color: #fff;border-radius: 4px; font-size: 15px;font-weight: 600;height: 32px;line-height: 38px;color: var(--text-color-8);transition: background 300ms, border-color 300ms, color 300ms;position: relative;margin-left: -1px;}
/* 그룹 내 첫 번째는 왼쪽 radius */
.checkbox-wrap.chk-group .checkbox-area:first-child input[type="checkbox"].box-check.no-icon-check + label {margin-left: 0; border-radius: 4px 0 0 4px;}
/* 그룹 내 마지막은 오른쪽 radius */
.checkbox-wrap.chk-group .checkbox-area:last-child input[type="checkbox"].box-check.no-icon-check + label {border-radius: 0 4px 4px 0;}
/* 중간 요소는 radius 없음 */
.checkbox-wrap.chk-group .checkbox-area:not(:first-child):not(:last-child) input[type="checkbox"].box-check.no-icon-check + label {border-radius: 0;}
/* 단독 요소는 기본 radius */
.checkbox-wrap.chk-group .checkbox-area:only-child input[type="checkbox"].box-check.no-icon-check + label {border-radius: 4px;}
/* 선택 시 */
.checkbox-wrap.chk-group .checkbox-area input[type="checkbox"].box-check.no-icon-check:checked + label {border-color: var(--point-color);color: var(--point-color);background-color: #fff;z-index: 1;}
/* 비활성화(전체 선택 시) 표시 */
/* .checkbox-wrap.chk-group .checkbox-area input[type="checkbox"].box-check.no-icon-check:disabled + label {cursor: not-allowed; background: var(--bg-color);} */

/*  템플릿 관리 - 연결 레이아웃 라디오박스 */
/* 그룹 전체 */
.radio-box .radio-group {display: flex; gap: 0;}
.radio-box .radio-group + .radio-group { margin-left: 12px;}
.radio-box .radio-area { display: flex;}
/* 기본 라벨 스타일 */
.radio-box .radio-area input[type="radio"].radio-btn.no-icon-radio + label { padding: 0 16px; border: 1px solid var(--border-color-d); background-color: #fff; border-radius: 4px; font-size: 15px; font-weight: 600; height: 40px; line-height: 40px; color: var(--text-color-8); transition: background 300ms, border-color 300ms, color 300ms, box-shadow 150ms; position: relative; cursor: pointer;}
/* 경계선 겹침 제거 */
.radio-box .radio-group .radio-area + .radio-area input[type="radio"].radio-btn.no-icon-radio + label {margin-left: -1px;}
/* 그룹 내 첫/마지막/중간 처리 */
.radio-box .radio-group .radio-area:first-child input[type="radio"].radio-btn.no-icon-radio + label {margin-left: 0;border-radius: 4px 0 0 4px;}
.radio-box .radio-group .radio-area:last-child input[type="radio"].radio-btn.no-icon-radio + label {border-radius: 0 4px 4px 0;}
.radio-box .radio-group .radio-area:not(:first-child):not(:last-child) input[type="radio"].radio-btn.no-icon-radio + label {border-radius: 0;}
/* 단독 요소 */
.radio-box .radio-group .radio-area:only-child input[type="radio"].radio-btn.no-icon-radio + label {border-radius: 4px;margin-left: 0;}
/* 선택 시 */
.radio-box .radio-area input[type="radio"].radio-btn.no-icon-radio:checked + label {border-color: var(--point-color);color: var(--point-color);background-color: #fff;z-index: 1;}
@media (hover: hover) {
    .basic-radio-box.box-platform-select:hover input[type="radio"] + label { background-color: var(--bg-color);}
    .checkbox-wrap input[type="checkbox"].box-check:not(:disabled) + label:hover { background-color: var(--bg-color);}
} 

/*========== Custom Design - Button On & Off ==========*/
.btn-on-off-wrap { position: relative; width: 75px; } 
.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: 75px;height: 28px; border-radius: 18px; background-color: #fff; border: 1px solid #ddd;} 
.btn-on-off-wrap input[type="checkbox"] + label span { position: absolute; left: 10px; transform: translateX(-6px); top: 3px; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background-color: #E9E9E9; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"]:checked + label span {transform: translateX(40px); background-color: #fff;} 
.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: 26px; 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; font-size: 0.875rem; font-weight: 600; color: var(--text-color-8); text-align: left; transition: all 300ms; } 
.btn-on-off-wrap input[type="checkbox"] + label::after { display: none; content: '공개'; left: 14px; font-size: 0.875rem; font-weight: 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(--point-color) !important; border-color: var(--point-color) !important; } 
.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; } 
.btn-on-off-wrap.small { width: 50px;}
.btn-on-off-wrap.small input[type="checkbox"] + label { width: 50px; height: 26px; background-color: #E9E9E9; } 
.btn-on-off-wrap.small input[type="checkbox"] + label span { top: 3px; left: 10px; transform: translateX(-6px); background-color: #fff !important; width: 18px; height: 18px; } 
.btn-on-off-wrap.small input[type="checkbox"]:checked + label span {transform: translateX(16px); box-shadow: 2px 2px 4px rgba(0,0,0,0.05); } 
.btn-on-off-wrap.small input[type="checkbox"] + label::before, .btn-on-off-wrap.small input[type="checkbox"] + label::after { display: none;} 

/*========== Selectbox ==========*/
.basic-select-box { position: relative;}
.basic-select-box select { width: 100%; min-width: 140px; height: 56px; padding: 13px 34px 13px 16px; border: 1px solid var(--border-color-e); background-image: url("../images/common/icon-select-arrow-8a8a9a.svg"); background-repeat: no-repeat; background-position: right 10px center; background-size: 24px auto; font-size: 1rem; font-weight: 500; color: var(--text-color-8); line-height: 1; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; }

/* 커스텀 Select - 기본 */
.custom-select-box { position: relative; user-select: none;}
.custom-select-box .select-box { position: relative; display: flex; align-items: center; width: 100%; min-width: 124px; height: 56px; padding: 13px 34px 13px 16px; border: 1px solid var(--border-color-e); background-image: url("../images/common/icon-select-arrow-8a8a9a.svg"); background-repeat: no-repeat; background-position: right 10px center; background-size: 24px auto; font-size: 16px; font-weight: 500; color: var(--text-color-8); line-height: 1; border-radius: 6px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; }
.custom-select-box .select-box .selected-display { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.custom-select-box .drop-select { display: none; position: absolute; top: 100%; left: 0; z-index: 3; background-color: #fff; border: 1px solid var(--border-color-e); border-radius: 6px; list-style-type: none; padding: 6px; margin: 6px 0 0 0; box-shadow: 0 3px 6px rgba(205,205,214,0.2); min-width: 100%;}
.custom-select-box .drop-select ul { padding-right: 5px; max-height: 360px; overflow-y: auto; }
.custom-select-box.medium .drop-select ul { max-height: 190px;}
.custom-select-box.small .drop-select ul { max-height: 146px;}
.custom-select-box .drop-select ul::-webkit-scrollbar { width: 4px;  border-radius: 6px; } 
.custom-select-box .drop-select ul::-webkit-scrollbar-thumb { background-color: #BBBBC4; border-radius: 6px; } 
.custom-select-box .drop-select ul::-webkit-scrollbar-track { background-color: #fff; } 
.custom-select-box .drop-select ul li { width: 100%; border-radius:6px; cursor: pointer;} 
.custom-select-box.open .select-box { background-image: url("../images/common/icon-select-arrow-up-8a8a9a.svg");}
.custom-select-box.open .drop-select { display: block;}
.custom-select-box .drop-select ul:not(.tab-menu) li.selected { background-color: var(--bg-color);}
.custom-select-box li .select-value { display: flex; align-items: center; gap: 10px; padding: 13px 14px; font-size: 16px; font-weight: 500; color: var(--text-color-5); cursor: pointer; white-space: nowrap;}
.custom-select-box li .select-value::before { display: inline-block; content: ''; width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border-color-d); background: #fff; }
.custom-select-box li.selected .select-value::before { background-image: url("../images/common/icon-check.svg"); background-repeat: no-repeat; background-position: center; background-size: 14px; background-color: var(--point-color-2); border-color: var(--point-color-2); }
.range-select.custom-select-box .drop-select ul:not(.tab-menu) { max-height: 300px;}
.custom-select-box.disabled,
.custom-select-box:disabled { pointer-events: none; }
.custom-select-box.disabled .select-box,
.custom-select-box:disabled .select-box { background-color: #F5F5F5;}
.custom-select-box.top-drop .drop-select { top: 0; margin: -6px 0 0 0; transform: translateY(-100%);}
.custom-select-box.top-drop .select-box { background-image: url('../images/common/icon-select-arrow-up-8a8a9a.svg');}
.custom-select-box.top-drop.open .select-box { background-image: url('../images/common/icon-select-arrow-8a8a9a.svg');}
/* fiexd */
.custom-select-box.fixed .drop-select{min-width: auto;}
/* 셀렉트 탭 형식 */
.custom-select-box .drop-select.tab-container.vertical-tab { display: none; gap: 4px; align-items: flex-start; min-width: 340px;}
.custom-select-box.open .drop-select.tab-container.vertical-tab { display: flex; align-items: stretch;}
.custom-select-box .drop-select.tab-container.vertical-tab ul { max-height: 270px; }
.tab-container.vertical-tab { display: flex; align-items: stretch;}
.tab-container.vertical-tab .tab-menu { flex-direction: column; flex-shrink: 0; gap: 0; min-width: 130px; background-color: #F5F5F5; border-radius: 6px; padding: 4px; border: none;}
.tab-container.vertical-tab .tab-menu li { min-width: 100%; white-space: nowrap; transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; }
.tab-container.vertical-tab .tab-menu li.current { background-color: #fff;}
.tab-container.vertical-tab .tab-menu li.tab-link a { padding: 12px 14px 11px 14px; text-align: left; font-size: 16px; font-weight: 500; color: var(--text-color-8); line-height: 1.1875;}
.tab-container.vertical-tab .tab-menu li.tab-link.current a { font-weight: 600; color: var(--point-color);}
.tab-container.vertical-tab .tab-content-wrap { flex-grow: 1;}
.tab-container.vertical-tab .tab-menu li.tab-link.current a::after { display: none;}
.tab-container.vertical-tab .tab-menu { overflow-y: auto;}
.tab-container.vertical-tab .tab-menu::-webkit-scrollbar { width: 4px;  border-radius: 6px; } 
.tab-container.vertical-tab .tab-menu::-webkit-scrollbar-thumb { background-color: #BBBBC4; border-radius: 6px; } 
.tab-container.vertical-tab .tab-menu::-webkit-scrollbar-track { background-color: #fff; } 
.tab-container.vertical-tab .tab-content { overflow-y: auto; }
.tab-container.vertical-tab .tab-content::-webkit-scrollbar { width: 4px;  border-radius: 6px; } 
.tab-container.vertical-tab .tab-content::-webkit-scrollbar-thumb { background-color: #BBBBC4; border-radius: 6px; } 
.tab-container.vertical-tab .tab-content::-webkit-scrollbar-track { background-color: #fff; } 
.tab-container.vertical-tab .tab-menu li.empty-box { display: none; min-height: auto; height: 100%; border-radius: 0; border: none;}
.tab-container.vertical-tab .tab-menu:not(:has(li.tab-link)) li.empty-box { display: flex;}

/* 커스템 셀렉트 small & Medium */
.custom-select-box.small .select-box { height: 34px; padding: 8px 35px 8px 14px; font-size: 14px; background-size: 18px auto;}
.custom-select-box.small .drop-select { margin-top: 4px; padding: 5px; }
.custom-select-box.small li .select-value { padding: 8px 9px; font-size: 14px;}
.custom-select-box.small li .select-value::before { display: none !important;}
.custom-select-box.medium .select-box { height: 40px; padding: 11px 35px 11px 14px; font-size: 15px; background-size: 18px auto;}
.custom-select-box.medium li .select-value { padding: 8px 14px; font-size: 15px;}
.custom-select-box.medium li .select-value::before { display: none !important;}
@media (hover: hover) {
    .custom-select-box .drop-select li:hover { background-color: var(--bg-color);}
    .custom-select-box .drop-select.tab-container .tab-menu li:hover { background-color: #fff;}
} 

/* 커스텀 Select - multi-select */
.multi-select.custom-select-box { position: relative; user-select: none; }
.multi-select.custom-select-box label { min-width: 100%; padding: 13px 14px; white-space: nowrap;}
.multi-select.custom-select-box li:has(input:checked) { background-color: var(--bg-color);}
.custom-select-box:has(.selected) .selected-display,
.multi-select:has(input:checked) .selected-display { font-weight: 600; color: var(--point-color);}
.multi-select:has(.default-select input:checked) .selected-display { font-weight: 500; color: var(--text-color-8);}

/* 260105 국가 변경 모달 제외 */
.multi-select.custom-select-box.not-modal{width: 100%;}
.multi-select.custom-select-box.not-modal .drop-select{display:flex; position: static}
.multi-select.custom-select-box.not-modal label{white-space: normal;}

/* 커스텀 Select - range-select */
.range-container { margin-top: 14px;}
.range-container .range-wrap { display: flex; gap: 10px;}
.range-container .range-value { width: calc((100% - 10px) / 2); background: var(--bg-color); padding: 16px 16px 15px 16px; border-radius: 6px; font-size: 16px; font-weight: 500; color: var(--text-color-2);}
.range-container .slider-container { position: relative; height: 4px; background: var(--bg-color); border-radius: 4px; margin: 15px 0 25px;}
.range-container .slider-track { position: absolute; height: 4px; background: var(--point-color-2); border-radius: 4px; top: 0;}
.range-container .slider-input { position: absolute; top: -5px; width: 100%; height: 14px; background: none; pointer-events: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.range-container .slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 14px; width: 14px; border-radius: 50%; background: #fff; cursor: pointer; pointer-events: all; border: 4px solid var(--point-color-2);}
.range-container .slider-input::-moz-range-thumb { height: 14px; width: 14px; border-radius: 50%; background: #fff; cursor: pointer; pointer-events: all; border: 4px solid var(--point-color-2);}

/* 커스텀 Select - page-view-select */
.page-view-select.small .select-box{min-width: 109px; height: 28px; padding: 0 8px 0 10px; font-size: 14px; line-height: 26px; background-position:right 8px center; background-size: 18px; border-radius:4px}
.page-view-select.small li .select-value{font-size: 14px; color: var(--text-color-8); padding: 4px 6px;}

/*========== Tab Menu ==========*/
.tab-menu {position: relative;display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: flex-end; gap: 20px; border-bottom: 1px solid var(--border-color-d); }
.tab-menu li.slider {position: absolute;z-index: 2;bottom: 0;display: inline-block;height: 2px;
background-color: #333;transition: left .3s linear; }
.tab-menu li.tab-link a {display: block;padding: 10px 0;font-size: 16px;line-height: 1;text-align: center;font-weight: 500; color: var(--text-color-8);-webkit-user-drag: none;transition: color 300ms; } 
.tab-menu li.tab-link a:hover {color: var(--point-color);transition: color 300ms; } 
.tab-menu li.tab-link.current a {position: relative; font-weight: 700; color: var(--point-color);transition: color 300ms; } 
.tab-menu li.tab-link.current a::after { display: block; content: ''; position: absolute; bottom: -1px; width: 100%; height: 2px; background: var(--point-color); }
.tab-content-wrap .tab-content {display: none; } 
.tab-content-wrap .tab-content.current {display: block; } 

/*========== Empty Txt ==========*/
/* 텍스트만 사용 */
.empty-txt{position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 18px; font-weight: 500;  color: var(--text-color-8); text-align: center; min-height: 360px;}
.empty-txt::before{content:""; display: block; width: 40px; height: 40px; background: url("../images/common/icon-empty.svg") 50% 50% no-repeat; margin: 0 auto 10px;}
/* 박스와 함께 사용 */
.empty-box{display:flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; border:1px solid var(--border-color-d); min-height: 360px; border-radius:6px; text-align: center;}
.empty-box .empty-txt{min-height: auto; display: inline-block; margin-bottom: 0;}
/* 테이블  */
.table-cell .empty-txt{margin: 0; min-height: auto;}
.table-cell .empty-txt::before{display: none;}

/*========== 카테고리 버튼 영역 ==========*/
.filter-area {display: flex;justify-content: space-between;flex-wrap: wrap;gap: 10px;margin-bottom: 20px;}
.filter-wrap {display: flex;gap: 8px;}
.filter-wrap.cate .filter-btn {padding: 10px 30px;border-radius:60px;min-width: auto;background-color: #fff;border: 1px solid var(--border-color-d);font-size: 16px;font-weight: 600;color: var(--text-color-8); transition: 0.3s;}
.filter-wrap.cate .filter-btn:hover {opacity: 0.8;}
.filter-wrap.cate .filter-btn.active {background-color: rgba(64,92,204, 0.1);color: var(--point-color); border: 1px solid var(--point-color-2);}

.filter-wrap.sort {gap: 0;}
.filter-wrap.sort .filter-btn {position: relative; padding: 0px 12px;min-width: auto;font-size: 16px;font-weight: 600;color: var(--text-color-8); transition: 0.3s;}
.filter-wrap.sort .filter-btn::after {position: absolute; right:0; top: 50%; content: ''; display: block; width: 1px; height: 16px; background:var(--border-color-d); transform: translate(0px, -50%);}
.filter-wrap.sort .filter-btn:last-child:after {display: none}
.filter-wrap.sort .filter-btn:hover {opacity: 0.8;}
.filter-wrap.sort .filter-btn.active {color: var(--point-color);}

/* ====== 게시글 상세(공통) ====== */
.detail-sec .post-detail {max-width: 1100px;margin: 100px auto 0;  color: #333;}
.detail-sec .post-header {padding: 30px 20px; border-top: 2px solid var(--text-color-2);  border-bottom: 1px solid var(--border-color-d);}
.detail-sec .post-title {display: flex; align-items: center;gap:10px; font-size: 20px;font-weight: 700;}
.detail-sec .post-title .icon-state {display: inline-block; width: 30px; height: 30px;  background:url('../images/common/icon-lock.svg')no-repeat center; background-size: 22px 22px;border-radius: 4px; border: 1px solid var(--border-color-d);}
.detail-sec .post-desc {display: flex;justify-content: space-between;align-items: center; margin-top: 20px;}

.detail-sec .post-meta {display: flex;gap: 10px; font-size: 16px;font-weight: 500;color:var(--text-color-8);}
.detail-sec .post-meta span {position: relative; display: inline-block; margin-left: 10px; font-size: inherit; font-weight: inherit;}
.detail-sec .post-meta span::after {position: absolute; top: 50%; right:-10px; transform: translate(0,-50%); content: ''; display: block; width: 1px; height:15px; background: var(--border-color-d);}
.detail-sec .post-meta span:first-child {margin-left: 0px;}
.detail-sec .post-meta span:last-child:after {display: none;}
.detail-sec .post-meta span .bold {font-weight: 700;}

.detail-sec .post-actions {position: relative;display: flex;align-items: center;gap: 6px;}
.detail-sec .post-actions button {border: 1px solid var(--border-color-d); border-radius:6px;}
.detail-sec .post-actions button:hover {opacity: 0.8;} 

/* 상세 좋아요 버튼 */
.detail-sec .like-btn {width: 90px; height: 42px; padding: 10px 16px;background: url('../images/common/icon-detail-likes-2.svg')no-repeat center left 14px; background-size:24px 24px; font-size: 16px; font-weight: 500; color: var(--text-color-2); cursor: pointer;}
.detail-sec .like-btn.on {background: url('../images/common/icon-detail-likes-2-on.svg')no-repeat center left 14px;  background-size:24px 24px; }
.detail-sec .like-btn .count {display: inline-block; margin-left: 28px}

/* 상세 공유하기 버튼 */
.detail-sec .share-btn {width: 42px; height: 42px; padding:9px; background: url('../images/common/icon-share-202527.svg')no-repeat center;background-size: 24px 24px; cursor: pointer;border-radius: 4px; text-indent: -9999px;}

/* 공유 팝업 영역 */
.detail-sec .share-popup {display: none;position: absolute;top: 52px;right: 0;width: 100%; min-width: 320px; max-height: 146px; padding: 30px 20px; background: #fff;border: 1px solid var(--border-color-d);border-radius: 12px;z-index: 10;box-shadow: 0 3px 6px rgba(219, 219, 234, 0.15);}
.detail-sec .share-popup .title {margin: 0px auto 25px;font-size: 18px;font-weight: 600;color:var(--text-color-2);text-align: center; line-height: 1;}
/* 공유 팝업 복사하기 버튼 */
.detail-sec .copy-wrap {display: flex; gap: 3px;}
.detail-sec .copy-wrap .input-box .input-field {height: 40px; padding: 12px 16px; font-size: 14px; font-weight: 500;color: #2E8DE5;}
.detail-sec .copy-wrap .copy-btn { width: 74px; height: 40px; font-size: 15px;font-weight: 600; color: var(--text-color-5); background:var(--bg-color);}
/* 공유 팝업 닫기 버튼 */
.detail-sec .share-popup .close-btn {position: absolute; right:20px; top:24px; width: 32px; height: 32px; background: url('../images/common/icon-close.svg')no-repeat center; background-size:100% 100%; border: 0; cursor: pointer; text-indent: -9999px;}
.detail-sec .share-popup .close-btn:hover {opacity: 0.8;} 

/* 게시글 상세 컨텐츠 영역 */
.detail-sec .post-content-area {margin: 60px 0;}
/* 에디터영역 임시 css !!!!!!!!!!!!!!!! */
.detail-sec .post-image img {width: auto;max-height: 400px;object-fit: cover;margin-bottom: 20px;}
.detail-sec .post-content {font-size: 14px;line-height: 1.7;margin-bottom: 30px;}
.detail-sec .post-content strong {display: block;font-size: 16px;margin-bottom: 10px;}

/* 자료다운로드 */
.detail-sec .post-download {padding: 20px; border: 1px solid var(--border-color-d);border-radius:10px; font-size: 14px;margin-bottom: 30px;}
.detail-sec .post-download .tit {font-size: 18px;color: var(--text-color-2);font-weight: 700;}
.detail-sec .post-download a {position: relative; margin-top: 20px; margin-right: 12px; margin-left: 12px; padding-right: 40px; display: inline-block;margin-right: 10px;background: url('../images/common/icon-download-59596c.svg')no-repeat center right; background-size: 24px 24px; font-size: 16px;color: var(--text-color-5);font-weight: 600;}
.detail-sec .post-download a::after {position: absolute; top: 50%; right:-12px; transform: translate(0,-50%); content: ''; display: block; width: 1px; height:15px; background: var(--border-color-d);}
.detail-sec .post-download a:first-child {margin-left: 0px;}
.detail-sec .post-download a:last-child:after {display: none;margin-right: 0;}
.detail-sec .post-download a:hover {text-decoration: underline;text-underline-position : under;}

/* 목록 버튼 */
.detail-sec .list-btn-wrap {position: relative; padding-top: 60px;border-top: 1px solid var(--border-color-d); text-align: center;}
.detail-sec .list-btn-wrap .basic-btn.list-btn {min-width: 160px;}
.detail-sec .admin-btn-wrap {gap: 10px;position: absolute; right: 0;}
@media screen and (max-width: 1024px) {
    .detail-sec .post-actions button:hover {opacity: 1;} 
    .detail-sec .share-popup .close-btn:hover {opacity: 1;}
    .detail-sec .post-download a:hover {text-decoration:none;}
}

/* =============== pagination-wrap =============== */
.common-table-bottom{position: relative; min-height: 28px; margin-top: 50px;} 
.common-table-bottom .pagination-wrap{position: absolute; top: 50%; left: 50%; display:flex; gap:4px; align-items: center; transform: translate(-50%,-50%);}
.common-table-bottom .pagination-wrap .pagination-btn{font-size: 0; width: 28px; height: 28px;border:1px solid var(--border-color-d);  border-radius:4px; transition: 0.2s;}
.common-table-bottom .pagination-wrap .pagination-btn:disabled{opacity: 0.3;}
.common-table-bottom .pagination-wrap .prev{background: url("../images/common/icon-arrow-left-8a8a9a.svg") 50% 50% / cover no-repeat;}
.common-table-bottom .pagination-wrap .first{background: url("../images/common/icon-page-arrow-left-8a8a9a.svg") 50% 50% / cover no-repeat;}
.common-table-bottom .pagination-wrap .next{background: url("../images/common/icon-arrow-right-8a8a9a.svg") 50% 50% / cover no-repeat;}
.common-table-bottom .pagination-wrap .last{background: url("../images/common/icon-page-arrow-right-8a8a9a.svg") 50% 50% / cover no-repeat;}
.common-table-bottom .pagination-wrap .pagination-list{display:flex; align-items: center; margin: 0 14px;}
.common-table-bottom .pagination-wrap .pagination-list li button{min-width: 28px; height: 28px; font-weight: 500; font-size: 14px; color: var(--text-color-8); border-radius:4px; transition: 0.2s;}
.common-table-bottom .pagination-wrap .pagination-list li:hover button,
.common-table-bottom .pagination-wrap .pagination-list li.current button{background-color: var(--sky-blue); color: var(--point-color);}
.common-table-bottom .pagination-wrap .pagination-list li:has(span){width: 28px; height: 28px; text-align: center; font-weight: 500; font-size: 14px; color: var(--text-color-8); }
.common-table-bottom .pagination-wrap .pagination-list li span{vertical-align: sub;}
.common-table-bottom .btn-wrap.end{justify-content: flex-end;}
.common-table-bottom .btn-wrap.start{justify-content: flex-start;}
.common-table-bottom .btn-wrap.between{justify-content: space-between;}

/*========== overgrab ==========*/
.overgrab { cursor: grab;}

/*========== 공통 section 영역 ==========*/
/* 타이틀 */
.cont-wrap .flex-box-ui{display:flex; align-items: center; gap:6px}
.cont-wrap .tit-flex-box{display:flex; align-items: center; gap:14px}
.cont-wrap .flex-box-ui:has(.right-box),
.cont-wrap .tit-flex-box:has(.right-box){width: 100%; justify-content: space-between; gap:0}
.cont-wrap .tit-flex-box .left-box{display:flex; align-items: center; gap:14px}
.cont-wrap .sec-title{font-weight: 700;  font-size: 24px; color: var(--text-color-2);}
.cont-wrap .sec-title.fs22{font-size: 22px;}
.cont-wrap .sec-title.fs18{font-size: 18px;}
.cont-wrap .sec-title.fs14{font-size: 14px;}
.cont-wrap .sub-text-gray{font-size: 14px; color: var(--text-color-8);}
.cont-wrap .flex-box-ui > div{display:flex; gap:6px}
/* 컨텐츠 박스 */
.cont-wrap .section{margin-bottom: 40px;}
.cont-wrap .section:last-of-type{margin-bottom: 0;}
.cont-wrap .section .cont-sec{background: #fff; margin-top: 20px; padding: 24px 24px 30px 24px; border-radius:10px}
.cont-wrap .section .cont-sec.btn-cont-sec {background: none; padding: 20px 0 0;}
.border-box-item{border:1px solid var(--border-color-d); border-radius:6px}

/* 캠페인 현황 */
.campaing-list{display:flex; flex-wrap:wrap; gap:20px}
.campaing-list .campaing-item{width: calc((100% - 40px) / 3); padding: 24px 20px 20px;}
.campaing-list .campaing-item ul{display:flex; gap:16px; margin-top: 12px;}
.campaing-list .campaing-item ul li{position: relative;}
.campaing-list .campaing-item ul li::after{content:""; position: absolute; width: 1px;height: 10px; background: var(--border-color-d); top: 3px; right: -9px;}
.campaing-list .campaing-item ul li:last-of-type::after{display: none;}
.campaing-list .campaing-status-table{background-color: var(--bg-color); margin-top: 24px; padding: 6px 6px 10px; border-radius:3px}
.campaing-list .campaing-status-table .status-row{display:flex; align-items: center; margin-bottom: 5px;}
.campaing-list .campaing-status-table .status-row:last-of-type{margin-bottom: 0;}
.campaing-list .campaing-status-table .status-row .cell{position: relative; width: 20%; text-align: center; line-height: 32px; }
.campaing-list .campaing-status-table .status-header{border-radius:4px; background: #fff;}
.campaing-list .campaing-status-table .status-header .cell{color: var(--text-color-5); font-weight: 700; font-size: 14px;}
.campaing-list .campaing-status-table .status-header .cell::after{content:""; position: absolute; top: 8px; right: -10px; background: url("../images/common/icon-campaing-arrow.svg") 50% 50% no-repeat; width: 16px; height: 16px;}
.campaing-list .campaing-status-table .status-header .cell:last-of-type::after{display: none;}
.campaing-list .campaing-status-table .status-body .cell{display: flex; align-items: center; justify-content: center;}
.campaing-list .campaing-status-table .status-body .cell strong{font-weight: 600;  font-size: 16px; color: var(--text-color-2);}
.campaing-list .campaing-status-table .status-body .cell span{font-weight: 500;  font-size: 12px; color: var(--text-color-8); margin-left: 2px;}
.campaing-list .campaing-status-table .status-body .cell::before{content:''; position: absolute; top: 3px; right: -1px; width: 1px; height: 27px; border-left: 1px dashed var(--border-color-d);}
.campaing-list .campaing-status-table .status-body .cell:last-of-type::before{display: none;}
.campaing-list .campaing-status-table .status-row .update::after{content:""; display: inline-block; vertical-align: top; width: 16px; height: 16px; background: url("../images/common/icon-notice-new-red.svg") 50% 50% no-repeat; margin-left: 4px;}

/*========== 테이블 ==========*/
tbody td{word-break: keep-all !important; overflow-wrap: anywhere !important;}
.common-table-wrap .common-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.common-table-wrap .common-table thead tr { background: var(--bg-color); }
.common-table-wrap .common-table thead th { padding-block: 11px; border: 1px solid var(--border-color-d); border-left: 0; font-weight: 600; color: var(--text-color-5); }
.common-table-wrap .common-table thead th:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid var(--border-color-d); } 
.common-table-wrap .common-table thead th:last-child { border-radius: 0 6px 6px 0; }
.common-table-wrap .common-table thead th, .common-table-wrap .common-table tbody td { font-size: 15px; vertical-align: middle; }
.common-table-wrap .common-table thead th a{font-weight: 600; color: var(--text-color-5);}
.common-table-wrap .common-table tbody td { padding: 12px 4px; border-bottom: 1px solid var(--border-color-d); text-align: center; }
.common-table-wrap .common-table tbody tr { position: relative; z-index: 1;}
.common-table-wrap .common-table tbody tr td:first-of-type::before { content:''; position: absolute; left:0; right: 0; bottom: 4px; height: calc(100% - 8px); background-color: #f5f5f5; pointer-events: none; border-radius: 6px; z-index: -1; opacity: 0;}
.common-table-wrap .common-table tbody tr:hover td:first-of-type::before{opacity: 1;}
.common-table-wrap .common-table tbody tr:hover td:first-child { border-radius: 6px 0 0 6px; }
.common-table-wrap .common-table tbody tr:hover td:last-child { border-radius: 0 6px 6px 0; }
.common-table-wrap .common-table tbody tr:hover td:last-child::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-color-d); pointer-events: none; }
.common-table-wrap .common-table tbody:has(td[rowspan]) tr:hover td:first-of-type::before{opacity: 0;}
.common-table-wrap .common-table .w60 { width: 60px; }
.common-table-wrap .common-table .w80 { width: 80px; }
.common-table-wrap .common-table .w90 { width: 90px; }
.common-table-wrap .common-table .w100 { width: 100px; }
.common-table-wrap .common-table .w120 { width: 120px; }
.common-table-wrap .common-table .w130 { width: 130px; }
.common-table-wrap .common-table .w140 { width: 140px; }
.common-table-wrap .common-table .w150 { width: 150px; }
.common-table-wrap .common-table .w180 { width: 180px; }
.common-table-wrap .common-table .w190 { width: 190px; }
.common-table-wrap .common-table .w200 { width: 200px; }
.common-table-wrap .common-table .w220 { width: 220px; }
.common-table-wrap .common-table .w240 { width: 240px; }
.common-table-wrap .common-table .w260 { width: 260px; }
.common-table-wrap .common-table .w280 { width: 280px; }
.common-table-wrap .common-table .w330 { width: 330px; }
.common-table-wrap .common-table .w400 { width: 400px; }
/* 테이블 small */
.common-table-wrap.small .common-table thead th{padding-block: 8px;}
/* 말줄임이 필요할 경우 - 한줄: ellipsis, 두줄: ellipsis2 */
.common-table-wrap .common-table .ellipsis .cell-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.common-table-wrap .common-table .ellipsis2 .cell-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
/* 소팅 */
.table-cell .i-sorting {content: ''; display: inline-block; width: 7px;height: 10px; margin-left:4px; background: url('../images/common/icon-sorting.svg')no-repeat center; background-size: 7px 10px;}
.table-cell .i-sorting.up{background: url('../images/common/icon-sorting-up.svg')no-repeat center;}
.table-cell .i-sorting.down{background: url('../images/common/icon-sorting-down.svg')no-repeat center;}
/* 별점 */
.list-view .table-cell.i-star,
.table-cell.i-star {font-size: 15px; font-weight: 700; color: var(--point-color);}
.list-view .table-cell.i-star::before,
.table-cell.i-star::before {content: ''; display: inline-block; vertical-align: top; width: 18px; height: 18px; background: url("../images/common/icon-star-405ccc.svg")no-repeat center; background-size: 100% 100%;}
/* 채널 아이콘 인스타,틱톡 */
.table-cell .i-channel {content: ''; display: inline-block; width:28px;height: 28px; background-size:100% 100%;}
.table-cell .i-channel.insta { background:url("../images/common/icon-insta.svg")no-repeat center; }
.table-cell .i-channel.tiktok { background:url("../images/common/icon-tiktok.svg")no-repeat center; }
/* 테이블 스크롤 */
.scroll-table { overflow-y: auto;}
.scroll-table::-webkit-scrollbar { width: 4px;  border-radius: 6px; } 
.scroll-table::-webkit-scrollbar-thumb { background-color: #BBBBC4; border-radius: 6px; } 
.scroll-table::-webkit-scrollbar-track { background-color: #fff; }
/* rowspan th추가(2개일때) */
.common-table-wrap .common-table thead:has(tr + tr) tr:first-of-type th:last-of-type{border-radius:0 6px 0 0}
.common-table-wrap .common-table thead tr + tr th{border-top:none}
.common-table-wrap .common-table thead tr + tr th:first-of-type{border-radius:0; border-left: none;}
.common-table-wrap .common-table thead tr + tr th:last-of-type{border-radius: 0 0 6px 0;}
/* fix */
.common-table-wrap .common-table tbody tr.fix-tr td:first-of-type::before { background-color: #FFF6E8; pointer-events: none; opacity: 1;}
@media (hover: hover) {
    .common-table-wrap .common-table tbody tr.fix-tr:hover td:first-of-type::before {  filter: brightness(0.96) ;}
    .common-table-wrap .common-table tbody tr.fix-tr:hover td { background: transparent;}
}

/* grid-card-common */
.grid-card-common .card-list { display: flex; flex-wrap: wrap; gap: 16px; }
.grid-card-common .card-item { display: flex; flex-direction: column; width: 279px; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; transition: background 0.2s ease; background: #fff; position: relative; padding: 16px 16px 20px; }
.grid-card-common .card-item:not(.dim,.user-block):hover { background: var(--bg-color); }
.grid-card-common .card-item:not(.dim,.user-block):hover .card-info .info-row-box { background: #fff; }
.grid-card-common .card-item.is-select-mode .checkbox-wrap { display: flex; }
.grid-card-common .card-item.is-select-mode .like-btn { display: none; }
.grid-card-common .card-item.is-selected { border: 2px solid var(--point-color-2); background: var(--bg-color); }
.grid-card-common .card-item.is-selected .card-info .info-row-box{background: #fff;}
.grid-card-common .card-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 15px; }
.grid-card-common .card-header .profile-wrap {position: relative; display: flex; align-items: center; flex: 1; gap: 8px; cursor: pointer; z-index: 2;}
.grid-card-common .card-header .profile-wrap .profile-img { position: relative; width: 38px; height: 38px;}
.grid-card-common .card-header .profile-wrap .profile-img a{position: relative;}
.grid-card-common .card-header .profile-wrap .profile-img a::after { display: block; content: ''; position: absolute; right: -16px; bottom: -16px; width: 36px; height: 36px; background-repeat: no-repeat; background-position: center; background-size: cover; }
.grid-card-common .card-header .profile-wrap .profile-img.insta a::after { background-image: url("../images/common/icon-logo-insta-circle.svg"); }
.grid-card-common .card-header .profile-wrap .profile-img.tiktok a::after { background-image: url("../images/common/icon-logo-tiktok-circle.svg"); }
.grid-card-common .card-header .profile-wrap .profile-img img { border-radius: inherit; border-radius:50%}
.grid-card-common .profile-wrap .name-wrap { display: flex; flex-direction: column; max-width: 165px; margin-left: 10px; line-height: 1.18; }
.grid-card-common .profile-wrap .name-wrap .name { font-size: 16px; font-weight: 600; color: var(--text-color-2); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.grid-card-common .profile-wrap .name-wrap .id { font-size: 12px; font-weight: 500; color: var(--point-color); }
.grid-card-common .card-info .info-row-top { display: flex; justify-content: space-between; align-items: flex-end; }
.grid-card-common .card-info .info-row-top .place { padding-left: 16px; background: url("../images/common/icon-spot-b0b0bb.svg") no-repeat left center / 14px; font-size: 12px; color: var(--text-color-5); }
.grid-card-common .card-info .info-row-top .place .divider { width: 1px; height: 9px; margin-inline: 6px; background-color: #C4C4C4;}
.grid-card-common .card-info .info-row-top .rating { min-width: 58px; padding-inline: 24px 14px; border-radius: 12px; border: 1px solid var(--border-color-d); background: url("../images/common/icon-star-405ccc.svg") no-repeat 10px center / 12px; background-color: #fff; font-weight: 700; }
.grid-card-common .card-info .info-row-box { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 8px; padding: 9px; border-radius: 4px; background: var(--bg-color); transition: background 0.2s ease; }
.grid-card-common .card-info .info-row-box > div { font-size: 12px; font-weight: 500; color: var(--text-color-8); text-align: center; }
.grid-card-common .card-info .info-row-box > div > span { display: block; font-size: 14px; font-weight: 600; color: var(--text-color-2); }
.grid-card-common .state-icons-wrap { display: flex; align-items: center; gap: 8px;}
.grid-card-common .card-item .card-thumb { position: relative; margin-top: 9px; margin-bottom: 0; border-radius: 4px; overflow: hidden;}
.grid-card-common .card-item:hover .card-thumb { transform: none; box-shadow: none; }
.grid-card-common .card-item .card-thumb::before{content:""; position: absolute; bottom: 0; left: 0; width: 100%; height: 65px; background: #000000; background: linear-gradient(0deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);}
.grid-card-common .card-item .card-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.grid-card-common .card-item .card-thumb .like-btn { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; background-image: url("../images/common/icon-likes-fff.svg"); background-size: cover; }
.grid-card-common .card-item .card-thumb .like-btn.on { background-image: url("../images/common/icon-likes-ef4444.svg"); }
.grid-card-common .card-item .card-thumb .several-icon { display: none; position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; background: url("../images/common/icon-several-img.svg") no-repeat center / cover; }
.grid-card-common .card-item .card-thumb.several .several-icon { display: block; }
.grid-card-common .card-item .card-thumb .play-icon { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 45px; background: url("../images/common/icon-play.svg") no-repeat center / cover; }
.grid-card-common .card-item.type-video .card-thumb .play-icon { display: block; }
.grid-card-common .card-item .card-thumb figcaption { position: absolute; bottom: 10px; display: flex; justify-content: space-between; width: 100%; padding-inline: 10px; font-size: 12px; font-weight: 500; color: #fff; }
.grid-card-common .card-item .card-thumb figcaption .views { padding-left: 22px; background: url("../images/common/icon-eye-f.svg") no-repeat left center / 18px; }
.grid-card-common .card-item.type-video .card-thumb figcaption .views { background-image: url("../images/common/icon-play-circle.svg"); }
.grid-card-common .card-item .card-thumb figcaption .date { opacity: 0.8; }

/* 블랙리스트 추가 */
/* 딤처리 */
.grid-card-common .card-item.dim::before{content:"";position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.2; z-index: 6;}
/* 블랙리스트 ON */
.grid-card-common .card-item.user-block{background: rgba(0, 0,0, 0.1);}
.grid-card-common .card-item.user-block::after{content:"";position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.grid-card-common .btn-wrap {margin-left: 4px; margin-right: -9px; gap:0; z-index: 10;} 
.grid-card-common .dot-area .dot-btn-child{position: relative; z-index: 7;}
.grid-card-common .btn-wrap .icon-btn.dot{width: 24px; height: 24px; background-size: 24px;}
.grid-card-common .blacklist-box{display:flex; gap:16px; align-items: center; justify-content: center; position: absolute; top: 25px; right: 0; width: 160px; height: 47px; background: #fff; border:1px solid var(--border-color-d); border-radius: 6px;}
.grid-card-common .blacklist-box p{font-weight: 500; font-size: 15px; letter-spacing: -0.02em; color: var(--text-color-5);}
.grid-card-common .blacklist-box .btn-on-off-wrap.small{width: 28px; cursor: pointer;}
.grid-card-common .blacklist-box .btn-on-off-wrap.small input[type="checkbox"] + label{width: 28px; height: 16px;}
.grid-card-common .blacklist-box .btn-on-off-wrap.small input[type="checkbox"] + label span{top: 1px; left: 8px; width: 12px; height: 12px;}
.grid-card-common .blacklist-box .btn-on-off-wrap.small input[type="checkbox"]:checked + label span{transform: translateX(4px);}

/* 요금제 선택 박스 */
.plan-sec .sub-tit{font-weight: 600; font-size: 16px; color: var(--text-color-5); margin-top: 20px;}
.plan-sec .sub-tit span{font-weight: 400; font-size: 12px; color: var(--text-color-8); margin-left: 8px; vertical-align: text-bottom;}
.plan-sec .box{border:1px solid var(--border-color-d); padding: 20px 30px; border-radius:6px; margin-top: 10px; margin-bottom: 16px;}
.plan-sec .box .box-item{display:flex; align-items: center; margin-bottom: 13px;}
.plan-sec .box .box-item:last-of-type{align-items: flex-start; margin-bottom: 0; margin-top: 20px;}
.plan-sec .box .box-item h5{width: 130px; font-weight: 600; font-size: 16px; color: var(--text-color-5); margin-bottom: 0;}
.plan-sec .box .box-item .radio-box-wrap{gap: 0 8px; width: calc(100% - 130px);}
.plan-sec .box .box-item .radio-box-wrap label::after,
.plan-sec .box .box-item .radio-box-wrap label::before{display: none;}
.plan-sec .box .box-item .radio-box-wrap label span{padding-left: 0; min-width: 110px; font-weight: 600; font-size: 15px; line-height: 32px; border:1px solid var(--border-color-d); text-align: center; border-radius:30px; color:var(--text-color-8);}
.plan-sec .box .box-item .radio-box-wrap .basic-radio-box.big label span { min-width: 136px; }
.plan-sec .box .box-item .radio-box-wrap input:checked + label span{border-color:var(--point-color-2); background-color: #EBEEFA; color: var(--point-color);}
.plan-sec .box .box-item .price-info{ width: calc(100% - 130px); background-color: var(--bg-color); border-radius:6px; padding: 20px;}
.plan-sec .box .box-item .price-info dl{display:flex; align-items: center; justify-content: space-between; flex-wrap:wrap; gap:16px 0; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color-d);}
.plan-sec .box .box-item .price-info dl:last-of-type{margin-bottom: 0; padding-bottom: 0; border-bottom: none; gap:6px 0}
.plan-sec .box .box-item .price-info dl dd,
.plan-sec .box .box-item .price-info dl dt{ font-weight: 500; font-size: 16px; color: var(--text-color-5); word-break: keep-all;}
.plan-sec .box .box-item .price-info dl dt{width: 55%;}
.plan-sec .box .box-item .price-info dl dd{width: 45%; text-align: right;}
.plan-sec .box .box-item .price-info dl dd > span{color: var(--point-color);}
.plan-sec .box .box-item .price-info dl dd strong{font-weight: 600; font-size: 22px; color:var(--text-color-2);}
.plan-sec .box .box-item .price-info dl dd strong span{font-weight: 700; font-size: 20px; color: var(--red-color); margin-right: 3px;}
.plan-sec .box .box-item .price-info dl dt.colorb{font-weight: 600; color: var(--text-color-2);}
@media screen and (max-width: 1024px) {
    #container:has(.rwd) .plan-sec .sub-tit{margin-top: clamp(16px, 1.953vw, 20px); font-size: clamp(14px, 1.563vw, 16px); }
    #container:has(.rwd) .plan-sec .sub-tit span{margin-left: 0.6667em; font-size: clamp(10px, 1.172vw, 12px);}
    #container:has(.rwd) .plan-sec .box {padding: clamp(16px, 1.953vw, 20px) clamp(12px, 2.93vw, 30px); border-radius: clamp(3px, 0.586vw, 6px);}
    #container:has(.rwd) .plan-sec .box .box-item h5{width: clamp(100px, 12.695vw, 130px); font-size: clamp(14px, 1.563vw, 16px);}
    #container:has(.rwd) .plan-sec .box .box-item .radio-box-wrap{flex-flow: row nowrap; width: calc(100% - clamp(100px, 12.695vw, 130px));}
    #container:has(.rwd) .plan-sec .box .box-item .radio-box-wrap label span{min-width: clamp(84px, 10.742vw, 110px); font-size: clamp(13px, 1.465vw, 15px); line-height: clamp(28px, 3.125vw, 32px);}
    #container:has(.rwd) .plan-sec .box .box-item .radio-box-wrap .basic-radio-box.big label span { min-width: clamp(108px, 13.281vw, 136px); }
    #container:has(.rwd) .plan-sec .box .box-item .price-info{ width: calc(100% - clamp(100px, 12.695vw, 130px)); padding: clamp(16px, 1.953vw, 20px) clamp(14px, 1.953vw, 20px); border-radius: clamp(3px, 0.586vw, 6px);}
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl dt,
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl dd{ font-size: clamp(14px, 1.563vw, 16px); white-space: nowrap; }
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl dd strong{font-size: clamp(18px, 2.148vw, 22px);}
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl dd strong span{font-size: clamp(14px, 1.953vw, 20px);}
}
@media screen and (max-width: 600px) {
    #container:has(.rwd) .plan-sec .box .box-item:last-of-type{flex-flow: column wrap; align-items: flex-start; gap: 5px;}
    #container:has(.rwd) .plan-sec .box .box-item .price-info{width: 100%;}
}
@media screen and (max-width: 480px) {
    #container:has(.rwd) .plan-sec .box .box-item{flex-flow: column wrap; align-items: flex-start; gap: 5px;}
    #container:has(.rwd) .plan-sec .box .box-item h5{width: auto;}
    #container:has(.rwd) .plan-sec .box .box-item .radio-box-wrap{ flex-flow: row wrap; gap: 5px; width: 100%;}
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl{display: grid; grid-template-columns: auto auto; align-items: baseline; gap: clamp(10px, 1.563vw, 16px) 0;}
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl dt,
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl dd{width: auto; white-space: normal;}
}
@media screen and (max-width: 380px) {
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl:first-child dt:nth-of-type(2){max-width: 122px;}
}
@media (max-width: 359px) {
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl:last-child { grid-template-columns: auto auto; }
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl:last-child dt:last-of-type { grid-column: 1 / -1;}
    #container:has(.rwd) .plan-sec .box .box-item .price-info dl:last-child dd:last-of-type { grid-column: 1 / -1;}
}

/* 관리자 검색 필터 */
.cont-wrap .section .cont-sec.search-filter-wrap{padding: 20px;}
.search-filter-box{position: relative;}
.search-filter-box .w100{width: 100%;}
.search-filter-box .box{width: 100%; display:flex; align-items: center; }
.search-filter-box > .box{margin-bottom: 16px;}
.search-filter-box > .box.mb0{margin-bottom: 0;}
.search-filter-box .box.flex-box{width: auto; gap:0 163px}
.search-filter-box .box.flex-box > .box{width: auto;}
.search-filter-box .box p{min-width: 120px; font-weight: 600; font-size: 16px; background-color: var(--bg-color); line-height: 40px; text-align: center; border-radius:4px; margin-right: 30px;}
.search-filter-box .box label span{min-width: 106px;}
.search-filter-box .box .radio-box-wrap{gap:30px;}
.search-filter-box .box .input-group{display:flex; gap:6px; align-items: center;}
.search-filter-box .box .radio-box-wrap .input-group > .basic-radio-box,
.search-filter-box .box .input-group > .checkbox-wrap {margin-right: 9px;}
.search-filter-box .box .radio-box-wrap .input-group .date-wrap{display:flex; gap:8px; align-items: center;}
.search-filter-box .box .radio-box-wrap .input-group .date-wrap .input-box{max-width: 148px;}
.search-filter-box .box .checkbox-wrap{margin-right: 30px;}
.search-filter-box .box .checkbox-wrap:last-of-type{margin-right: 0;}
.search-filter-box .box .checkbox-wrap label{min-width: 106px;}
.search-filter-box .box .input-box-wrap{display:flex; gap:6px; align-items: center; width: 100%;}
.search-filter-box .box .input-box-wrap .input-box{width: 100%; max-width: 960px;}
.search-filter-box .position-btn-wrap{position: absolute; bottom: 0; right: 0;}
.search-filter-box .position-btn-wrap .btn-reset{margin-right: 10px;}
.search-filter-box .position-btn-wrap .medium{min-width: 120px;}
.search-filter-box .input-tag-box { width: 960px;}
.search-filter-box .range-select.custom-select-box .select-box { min-width: 318px;}
.search-filter-box .box .checkbox-wrap label,
.search-filter-box .box label span{line-height: 19px;}

/* 로더 */
.loader-wrap {position: fixed; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;transition: 0.3s ease-out;}
.loader-wrap::before{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #fff; opacity: 0.7;}
.loader-wrap.show {opacity: 1; visibility: visible;}
.loader {width: 50px; padding: 5px; aspect-ratio: 1/1; border-radius: 50%; background: var(--point-color); -webkit-mask: conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box; ;mask: conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box; -webkit-mask-composite: source-out; mask-composite: subtract; animation: loading 1s infinite linear; }
@keyframes loading {
    to { transform: rotate(1turn) }
}

/*========== Floating Menu ==========*/
.floating-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; visibility: visible; opacity: 1; position: fixed; right: 20px; bottom: 20px; }
.floating-menu > .btn{position: relative; display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; border-radius: 50px; cursor: pointer; overflow: hidden;}
.floating-menu .reg-btn { width: 177px; padding: 0 8px 0 23px; background: linear-gradient(45deg, var(--gradation-color-l), var(--gradation-color-r)); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-size: 16px;} 
.floating-menu .reg-btn .btn-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px;}
.floating-menu .reg-btn .btn-text { font-weight: 700; color: #fff; white-space: nowrap; transition: width 0.3s, opacity 0.3s ease;}
.floating-menu .reg-btn .btn-icon { display: inline-block; width: 40px; height: auto; aspect-ratio: 1/1;  border-radius: 50%; background-color: #fff; background-position: center center; background-size: 26px auto; background-image: url('../images/common/influencer-gra.svg'); background-repeat: no-repeat; transition: all 0.3s ease;}
.floating-menu .top-btn { background: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12); } 
.floating-menu .top-btn::before { content: ''; display: block; width: 20px; height: 19px; background: url("../images/common/icon-arrow-up-gra.svg") no-repeat center / contain; }
.floating-menu .top-btn:hover::before { animation: arrowMove 1.2s ease-in-out infinite; }
@keyframes arrowMove {
    50% { transform: translateY(-6px); }
}
@media screen and (max-width: 1024px) {
    #container:has(.rwd) .floating-menu .reg-btn {width: 11.0625em; height: 3.5em; padding: 0 0.5em 0 1.4375em; font-size: clamp(12px, 1.563vw, 16px); }
    #container:has(.rwd) .floating-menu .reg-btn .btn-content { gap: 0.5em; }
    #container:has(.rwd) .floating-menu .reg-btn .btn-icon { width: clamp(30px, 3.906vw, 40px); background-size: 1.625em auto; }
    #container:has(.rwd) .floating-menu .top-btn {width: clamp(40px, 5.469vw, 56px); height: auto; aspect-ratio: 1/1;}
    #container:has(.rwd) .floating-menu .top-btn::before { width: clamp(16px, 1.953vw, 20px); height: auto; aspect-ratio: 20/19; }
}
@media screen and (max-width: 768px) {
    #container:has(.rwd) .floating-menu .reg-btn{width: 40px; height: auto; aspect-ratio: 1/1; padding: 0;}
    #container:has(.rwd) .floating-menu .reg-btn .btn-content{gap: 0;}
    #container:has(.rwd) .floating-menu .reg-btn .btn-text{display: none;}
    #container:has(.rwd) .floating-menu .reg-btn .btn-icon {background-color: transparent; background-image: url('../images/common/influencer-f.svg'); background-size: 26px auto;}
}

/* 선택한 요금제 */
.plan-ticket { position: relative; margin-top: 22px; padding: 25px 20px 20px 20px; background-color: var(--bg-color); border-radius: 6px;}
.plan-ticket .plan-ver { position: absolute; top: -6px; left: 20px; display: flex; justify-content: center; align-items: center; width: 154px; height: 55px; background-image: url("../images/common/icon-plan-tag.svg"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.plan-ticket .plan-ver span { font-size: 18px; font-weight: 700; color: #fff; transform: translateY(-3px);}
.plan-ticket .right-wrap { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 26px; }
.plan-ticket .right-wrap p { position: relative; display: flex; align-items: center; margin-right: 12px; padding-right: 13px; font-size: 16px; font-weight: 500; color: var(--text-color-5); line-height: 19px;}
.plan-ticket .right-wrap p:last-of-type { margin-right: 0; padding-right: 0;}
.plan-ticket .right-wrap p:not(:last-of-type)::after { content:''; position: absolute; right: 0; top: 50%; margin-top: -6px; display: block; background-color: #BBBBC4; height: 12px; width: 1px;}
.plan-ticket .right-wrap p em { margin-left: 12px; font-weight: 700; color: var(--point-color);}
.plan-ticket .box-wrap { display: flex; justify-content: space-between; }
.plan-ticket .box-wrap .box { width: calc((100% - 12px) / 2); padding: 10px 13px 20px 14px; background-color: #fff; border-radius: 8px;}
.plan-ticket .box-wrap .box small { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text-color-8); line-height: 1; margin-bottom: 14px;}
.plan-ticket .box-wrap .box li { display: flex; justify-content: space-between; gap: 2px; font-size: 14px; line-height: 1.14; margin-bottom: 12px; color: var(--text-color-2);}
.plan-ticket .box-wrap .box ul li:last-child { margin-bottom: 0;}
.plan-ticket .box-wrap .box.sale-box li span { font-weight: 500; word-break: keep-all;}
.plan-ticket .box-wrap .box.sale-box li span.amount { color: var(--point-color); white-space: nowrap;}
.plan-ticket .box-wrap .box.price-box li span { font-weight: 600;}
.plan-ticket .box-wrap .box.price-box li span.amount { font-weight: 500; color: var(--text-color-5);}
.plan-ticket .box-wrap .box.price-box li span.amount:has(em) { font-size: 16px; font-weight: 600; color: var(--text-color-2);}
.plan-ticket .box-wrap .box.price-box li span.amount em { margin-right: 3px; font-size: 14px; font-weight: 700; color: var(--red-color);}
@media screen and (max-width: 1024px) {
    #container:has(.rwd) .plan-ticket {margin-top: clamp(18px, 2.148vw, 22px); padding: clamp(21px, 2.441vw, 25px) clamp(16px, 1.953vw, 20px) clamp(16px, 1.953vw, 20px) clamp(16px, 1.953vw, 20px); border-radius: clamp(3px, 0.586vw, 6px);}
    #container:has(.rwd) .plan-ticket .plan-ver { top: -0.375em; left: clamp(16px, 1.953vw, 20px); width: clamp(126px, 15.039vw, 154px); height: auto; aspect-ratio: 154/55; background-size: cover; }
    #container:has(.rwd) .plan-ticket .plan-ver span { font-size: clamp(15px, 1.758vw, 18px); transform: translateY(-0.1667em);}
    #container:has(.rwd) .plan-ticket .right-wrap { margin-bottom: clamp(20px, 2.539vw, 26px); }
    #container:has(.rwd) .plan-ticket .right-wrap p {margin-right: 0.75em; padding-right: 0.8125em; font-size: clamp(14px, 1.563vw, 16px);  line-height: 1.1875em;}
    #container:has(.rwd) .plan-ticket .right-wrap p:last-of-type{margin: 0; padding: 0;}
    #container:has(.rwd) .plan-ticket .right-wrap p:not(:last-of-type)::after { margin-top: -0.375em; height: 0.75em; }
    #container:has(.rwd) .plan-ticket .right-wrap p em { margin-left: 0.75em; }
    #container:has(.rwd) .plan-ticket .box-wrap .box { width: calc((100% - clamp(10px, 1.172vw, 12px)) / 2); padding: 10px clamp(12px, 1.367vw, 14px) clamp(18px, 2.051vw, 21px); border-radius: clamp(5px, 0.781vw, 8px);}
}
@media screen and (max-width: 767px) {
    #container:has(.rwd) .plan-ticket .box-wrap{flex-flow: column wrap; gap: 10px;}
    #container:has(.rwd) .plan-ticket .box-wrap .box{width: 100%; padding: 12px clamp(16px, 3.906vw, 40px) 16px;}
    #container:has(.rwd) .plan-ticket .plan-ver{width: clamp(104px, 16.428vw, 126px);}
    #container:has(.rwd) .plan-ticket .plan-ver span { font-size: clamp(13px, 1.465vw, 15px); }
}
@media screen and (max-width: 399px) {
    #container:has(.rwd) .plan-ticket{padding-top: 45px;}
    #container:has(.rwd) .plan-ticket .right-wrap{margin-bottom: clamp(12px, 1.953vw, 20px);}
}
@media screen and (max-width: 380px) {
    .plan-ticket .box-wrap .box.sale-box li:nth-child(1) span{max-width: 122px;}
}

/* =========== 404 Error =========== */
#container:has(.error-page) { padding-left: 0; min-width: auto; transition: none; }
#container:has(.error-page) .head-area { display: none; }
#container:has(.error-page) #main { padding: 16px; }
.error-page.cont-wrap { display: flex; justify-content: center; align-items: center; width: 100%; max-width: none; min-height: calc(100vh - 160px); text-align: center; }
.error-page .error-page-tit { font-size: 120px; font-weight: 700;  }
.error-page .error-page-txt span { font-size: 30px; font-weight: 600; }
.error-page .error-page-txt p { margin-top: 12px; font-size: 16px; color: var(--text-color-5); }
.error-page .btn-wrap { margin-top: 60px; }

@media screen and (max-width: 767px) {
    .error-page .error-page-tit { font-size: 90px; }
    .error-page .error-page-txt span { font-size: 24px; }
}

/* 1229 인플루언서 검색 , 관심목록 통일 작업 */
.influencer-custom-list.recomm-list .recomm-infl-list .item,
.grid-card-common .item{width: 353px; height: 100%; padding: 14px; background: #F4F5FA; border-radius:6px;  cursor: pointer;}
.grid-card-common .item.card-item.is-selected{padding: 14px; border:1px solid #ddd; box-shadow: 0 0 0 2px var(--point-color);}
.grid-card-common .item{transition: 0.2s;}
.grid-card-common .item .card-header{padding-bottom: 0;}
.grid-card-common .item .card-header .profile-wrap .profile-img{width: 48px; height: 48px;}
.grid-card-common .item .card-header .profile-wrap .profile-img a{position: relative;}
.grid-card-common .item .card-header .profile-wrap .profile-img a::after{bottom: -14px; right: -14px;}
.grid-card-common .item .card-header .profile-wrap .profile-img img{border-radius:50%}
.grid-card-common .item .btn-wrap{margin-left: 0;}
.grid-card-common .item .addr{display:flex; align-items: center;justify-content: space-between; gap:0 10px; margin-top: 14px;}
.grid-card-common .item .addr ul {display: flex; gap: 12px; align-items: center;  background: url("../images/common/icon-spot-b0b0bb.svg") no-repeat left center / 16px; padding-left: 18px;}
.grid-card-common .item .addr p{background: url("../images/common/icon-mail-b0b0bb.svg") no-repeat left center / 16px; padding-left: 20px;}
.grid-card-common .item .addr p,
.grid-card-common .item .addr ul li{position: relative; font-size: 14px; color: var(--text-color-5);}
.grid-card-common .item .addr ul li::after{content:""; position: absolute; top: 50%; right: -7px; width: 1px; height: 9px; background: #C4C4C4; transform: translateY(-50%);}
.grid-card-common .item .addr ul li:last-of-type::after{display: none;}
.grid-card-common .item .card-info{margin-top: 12px;}
.grid-card-common .item .card-info .info-row{display:flex; align-items: center; justify-content: center; gap:0 40px; background: #fff; margin-bottom: 6px; padding: 10px 0; border-radius:4px}
.grid-card-common .item .card-info .info-row div{font-weight: 500; font-size: 16px; color: #8A8A9A; text-align: center;}
.grid-card-common .item .card-info .info-row div span{display:block; margin-bottom: 4px; font-size: 18px; font-weight: 600; color: #202527;}
.grid-card-common .item .card-info .info-row.info-all{flex-wrap:wrap; justify-content: flex-start; gap:12px 0; padding: 16px 14px;}
.grid-card-common .item .card-info .info-row.info-all div{position: relative; display:flex; align-items: center; gap:0 10px; width: 50%; text-align: left;}
.grid-card-common .item .card-info .info-row.info-all div:first-of-type{width: 100%;}
.grid-card-common .item .card-info .info-row.info-all div:last-of-type{width: 100%;}
.grid-card-common .item .card-info .info-row.info-all div:nth-of-type(3){padding-left: 10px;}
.grid-card-common .item .card-info .info-row.info-all div:nth-of-type(5)::after,
.grid-card-common .item .card-info .info-row.info-all div:nth-of-type(3)::after{content:""; position: absolute; top: 4px; left: 0; width: 1px; height: 12px; background: var(--border-color-d);}
.grid-card-common .item .card-info .info-row.info-all div span:not(.tit){width: calc(100% - 64px);  font-size: 16px; font-weight: 500; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(-1px);}
.grid-card-common .item .card-info .info-row.info-all div span.tit{margin-bottom: 0; font-size: 16px; color: #8A8A9A;}
.grid-card-common .item .card-info .info-row.info-all div:last-of-type{flex-shrink: 0;}
.grid-card-common .item .card-info .info-row.info-all div:last-of-type span{width: auto}
/* 인스타 & 틱톡 */
.grid-card-common .item .user-info .profile-wrap.insta .profile-img a::after {background-image: url("../images/common/icon-logo-insta-circle.svg");}
.grid-card-common .item .user-info .profile-wrap.tiktok .profile-img a::after {background-image: url("../images/common/icon-logo-tiktok-circle.svg");}
.grid-card-common .item .user-info .profile-wrap.tiktok .name-wrap .name::before{content: ""; display: inline-block; vertical-align: top; width: 20px; height: 20px; margin-right: 4px; background: url("../images/common/icon-tiktok-square.svg") 50% 50% / 20px no-repeat}
.grid-card-common .item .user-info .icon-ui .input-wrap .like-btn{pointer-events: none;}

/* ========== Summernote 에디터 출력 영역 공통 스타일 ========== */
.summernote-content b,
.summernote-content strong {
    font-weight: bold;
}

.summernote-content i,
.summernote-content em {
    font-style: italic;
}

.summernote-content ul {
    list-style: disc;
    padding-left: 20px;
    margin: 10px 0;
}

.summernote-content ol {
    list-style: decimal;
    padding-left: 20px;
    margin: 10px 0;
}

.summernote-content ul li,
.summernote-content ol li {
    list-style: inherit;
    margin: 5px 0;
}

.summernote-content h1,
.summernote-content h2,
.summernote-content h3,
.summernote-content h4,
.summernote-content h5,
.summernote-content h6 {
    font-weight: bold;
    margin: 15px 0 10px;
}

.summernote-content h1 { font-size: 2em; }
.summernote-content h2 { font-size: 1.5em; }
.summernote-content h3 { font-size: 1.17em; }
.summernote-content h4 { font-size: 1em; }
.summernote-content h5 { font-size: 0.83em; }
.summernote-content h6 { font-size: 0.67em; }

.summernote-content p {
    margin: 10px 0;
}

.summernote-content u {
    text-decoration: underline;
}

.summernote-content s,
.summernote-content strike {
    text-decoration: line-through;
}

/* ========== Summernote 에디터 편집 영역 스타일 (reset.css 오버라이드) ========== */
.note-editable b,
.note-editable strong {
    font-weight: bold;
}

.note-editable i,
.note-editable em {
    font-style: italic;
}

.note-editable ul {
    list-style: disc;
    padding-left: 20px;
    margin: 10px 0;
}

.note-editable ol {
    list-style: decimal;
    padding-left: 20px;
    margin: 10px 0;
}

.note-editable ul li,
.note-editable ol li {
    list-style: inherit;
    margin: 5px 0;
}

.note-editable h1,
.note-editable h2,
.note-editable h3,
.note-editable h4,
.note-editable h5,
.note-editable h6 {
    font-weight: bold;
    margin: 15px 0 10px;
}

.note-editable h1 { font-size: 2em; }
.note-editable h2 { font-size: 1.5em; }
.note-editable h3 { font-size: 1.17em; }
.note-editable h4 { font-size: 1em; }
.note-editable h5 { font-size: 0.83em; }
.note-editable h6 { font-size: 0.67em; }

.note-editable u {
    text-decoration: underline;
}

.note-editable s,
.note-editable strike {
    text-decoration: line-through;
}