@charset "utf-8";
body { 
    margin: 0 auto;                /* 상하 0, 좌우 자동(가운데 정렬) */
    padding: 0; 
    background:url('../images/common/bg_page_pattern.gif') repeat;/* Base Styles */
    max-width: 1200px;             /* 최대 너비 제한 */
    min-height: 100vh;             /* 최소 높이를 화면 전체로 설정 */
}

#header .rowBottom .menu,
.area {margin:0 auto; width:1150px;}
#header {position:fixed; top:0; left:0; z-index:1000; width:100%; height:111px; border-bottom:1px solid #141414; background:#fff;}
#header2 {position:fixed; top:0; left:0; z-index:1000; width:100%; height:45px; border-bottom:1px solid #141414; background:#fff; border-bottom:2px solid #78bbff;}

#header .rowTop {height:59px; border-bottom:1px solid #141414;}
#header .rowTop .bi {float:left; }
#header .rowTop .bi a img {display:block;}
#header .rowTop .etc {float:right; padding-top:16px;}
#header .rowTop .etc .welcome {float:right; line-height:22px; color:#444; font-size:16px;}
#header .rowTop .etc .btnLogin {float:right; margin-left:15px; padding:0 10px; height:22px; line-height:22px; text-align:center; color:#fff; font-size:11px; border:1px solid #252424; background:#545454;}
#header .rowBottom {height:51px; background:#555;}
#header .rowBottom .menu li {float:left; box-sizing:border-box;}
#header .rowBottom .menu li a {display:block; padding:0 26px; height:51px; line-height:51px; color:#bbb; font-size:15px;}
#header .rowBottom .menu li.active {position:relative; top:-1px; background:#21a510; border:1px solid #245309;}
#header .rowBottom .menu li.active a {color:#fff;}
#container {padding-top:50px;}
/* [공통 스타일] 두 페이지 모두 적용되는 기본값 */
#container.sub {
    margin: 0 auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 10px;
}
.single-content-wrapper {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
}
/* [리스트 페이지 전용] */
.list-page #container.sub {
    max-width: 1200px; 
}

/* [상세 페이지 전용] */
.detail-page #container.sub {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    max-width: 800px; /* 상세 페이지는 본문에 집중하도록 좁게 설정 */
    border: 1px solid #f0f0f0;
}

#footer {height:56px; background:#fff; border-top:1px solid #bbb;}
#footer .area .copyright {float:left; line-height:56px; color:#a3a3a3; font-size:13px;}
#footer .area .copyright .mark {color:#222;}
#footer .area .ieInfo {float:right; margin-top:21px; padding-left:21px; line-height:16px; color:#156ba0; font-size:11px; background:url('../images/common/ico_footer_ie.gif') no-repeat left;}

/* common style */
/* 1. 컨테이너: 자식 요소들을 양 끝으로 배치 */
.sub .pageTop {
    display: flex !important;      /* Flexbox 강제 적용 */
    width: 100%;                   /* 너비를 꽉 채워야 우측 끝이 생깁니다 */
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center;
    box-sizing: border-box;        /* 패딩이 너비에 영향을 주지 않도록 */
    float: none !important;        /* 기존 float 무력화 */
}

/* 2. 좌측 그룹: 제목과 설명을 한 줄에 정렬 */
.sub .pageTop .title-group {
    display: flex;
    align-items: baseline;          /* 텍스트 하단 라인을 맞춤 */
    gap: 15px;                      /* 제목과 설명 사이 간격 */
}


/* 4. 페이지 요약: top 대신 자연스러운 정렬 */
.sub .pageTop .pageSummary {
    color: #666;
    font-weight: 400;
    font-size: 14px;
    margin: 0;
}

/* 토글 스위치 (우측 강제 밀기) */
.toggle-switch-wrapper {
    margin-left: auto !important;  /* space-between이 안 먹힐 때를 대비한 2중 장치 */
    display: block;
}


.video.movie_preview{width:320px;}
.commonTab {margin-bottom:22px;}
.commonTab li {float:left; border:1px solid #d6d6d6; border-bottom:1px solid #21a510;}
.commonTab.tow li {width:calc(50% - 2px);}
.commonTab.three li {width:calc(33.33% - 2px);}
.commonTab.four li {width:calc(25% - 2px);}
.commonTab li a {display:block; line-height:55px; color:#393939; font-size:16px; text-align:center; background:#fff;}
.commonTab li.active {border:1px solid #21a510; border-bottom:1px solid #fff;}
.commonTab li.active a {color:#21a510;}

.commonList table {width:100%; table-layout:fixed; background:#fff;}
.commonList th,
.commonList td {height:50px; font-size:14px; font-weight:normal; text-align:center; vertical-align:middle;}
.commonList td {line-height:18px; border-bottom:1px solid #c3c3c3;}
.commonList tbody tr:hover td {background:#fafafa;}
.commonList td.left {padding:0 10px; text-align:left;}
.commonList td.center {margin: 0 auto; text-align:center;}
.commonList td.reset {padding:0 20px; text-align:left; vertical-align:top;;}
.commonList td .subject {display:block; width:100%; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.commonList td p {width:100%; color:#666; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.commonList td .blue {color:#1c59a4;}
.commonList td .green {color:#1ca486;}
.commonList td .brown {color:#755536;}
.commonList td .red {color:#d50000;}
.commonList td .stat, 
.commonList td .btnCommon {display:inline-block; padding:0 12px; height:26px; line-height:26px; color:#755536; font-size:12px; border:1px solid #755536;}
.commonList td .btnCommon.bWhite {color:#f65d00; background:#fff; border:1px solid #f65d00;}
.commonList td .btnCommon.bOrange {color:#fff; background:#f65d00; border:1px solid #b34400;}
.commonList td .stat {padding:0; width:66px;}
.commonList td .stat.sRed {color:#fff; background:#d61717; border:1px solid #a61414;}
.commonList td .stat.sGray {color:#fff; background:#858585; border:1px solid #5b5b5b;}
.commonList td .stat.sGreen {color:#fff; background:#29b828; border:1px solid #1f861e;}
.commonList td .stat.sBlue {color:#fff; background:#008fe0; border:1px solid #0068a4;}
.commonList td .stat.sBlack {color:#fff; background:#0b0b0b; border:1px solid #0b0b0b;}
.commonList td .stat.sOrange {color:#fff; background:#f65d00; border:1px solid #b34400;}
.commonList td .pic {display:block; margin:5px auto; width:178px; height:78px; border:1px solid #e8e8e8;}
.commonList td .pic.banner img {display:block; width:178px; height:78px;}
.commonList td .pic.thumbnail {width:128px;}
.commonList td .pic.thumbnail img {display:block; width:128px; height:78px;}
.commonList .btnControl {display:block; margin:0 auto; width:68px; height:25px; line-height:25px; text-align:center; border:1px solid #393939; background:#fff;}
.commonList .btnControl span {display:inline-block; padding-right:16px; color:#5e5e5e; font-size:12px; background:url('../images/common/ico_arrow_down.png') no-repeat right;}
.commonList tr.show .btnControl {background:#5e5e5e;}
.commonList tr.show .btnControl span {color:#fff; background:url('../images/common/ico_arrow_up.png') no-repeat right;}

.membList .commonList td {font-size:12px;}
.orderList .commonList td,
.aptList .commonList td,
.prdList .commonList td,
.csList .commonList td,
.bannerList .commonList td,
.suggestedList .commonList td,
.contactUsList .commonList td {font-size:15px;}

.rowTitle {margin:20px 0; padding-left:24px; color:#222; font-size:18px; font-weight:normal; background:url('../images/common/ico_title_square.png') no-repeat left;}

.pageBtns {margin-top:30px;}
.pageBtns .btn {display:block; float:right; margin-right:5px; width:137px; height:40px; line-height:40px; font-size:14px; text-align:center; border:1px solid #0e386c; border-radius: 4px;}
.pageBtns .btn:first-child {margin-right:0;}
.pageBtns .btn.left {float:left; margin-right:5px;}
.pageBtns .btn.bGreen {color:#fff; border:1px solid #0c1f06;; background:#21a510; line-height: 32px;}
.pageBtns .btn.bOrange {color:#fff; border:1px solid #b94a11;; background:#fa6417;line-height: 32px;}
.pageBtns .btn.bRed {color:#fff; border:1px solid #360202;; background:#dc3545;line-height: 32px;}
.pageBtns .btn.bGray {color:#fff; border:1px solid #111010; background:#464646; line-height: 32px;}
.pageBtns .btn.bWhite {color:#21a510; border:1px solid #21a510; background:#fff; line-height: 32px;}
.pageBtns .btn.bYollow {color:#3A1D1D; border:1px solid #0f0f0f;; background:#F7E600;line-height: 32px;}
.pageBtns .btn.bBlue {color:#fff; border:1px solid #0f0f0f;; background:#0067f7;line-height: 32px;}

.listHeader .category {float:right; text-align:right;}
.listHeader .category a {display:inline-block; padding:0 14px; color:#393939; font-size:14px;}
.listHeader .category a.active {color:#21a510; font-weight:600;}
.listHeader .btnExcelDownload {position:relative; top:-6px; float:right; margin-left:4px;}
.listHeader .btnExcelDownload img {display:block;}
.pagenateWrap {position:relative;}
.pagenateWrap .pagenate {margin-top:20px; text-align:center;}
.pagenateWrap .pagenate a {display:inline-block; margin:0; padding:0; width:34px; height:34px; line-height:34px; color:#818181; font-size:12px; border:1px solid #dedede; background:#fff;}
.pagenateWrap .pagenate a.active {color:#21a510;}
.pagenateWrap .pagenate a.btnPage {text-indent:-9999px;}
.pagenateWrap .pagenate a.first {width:30px; background:#f8f8f8 url('../images/common/ico_first_page.gif') no-repeat center;}
.pagenateWrap .pagenate a.prev {width:30px; background:#f8f8f8 url('../images/common/ico_prev_page.gif') no-repeat center;}
.pagenateWrap .pagenate a.next {width:30px; background:#f8f8f8 url('../images/common/ico_next_page.gif') no-repeat center;}
.pagenateWrap .pagenate a.last {width:30px; background:#f8f8f8 url('../images/common/ico_last_page.gif') no-repeat center;}
.pagenateWrap .btnCommon {float: right; top:0; right:0; padding:0 20px; height:36px; line-height:36px; color:#fff; font-size:14px; text-align:center;	border:1px solid #245309; background:#21a510; cursor:pointer; border-radius: 4px;}
.ui-datepicker {display:none}

.commonForm table {width:100%; table-layout:fixed; background:#fff;}
.commonForm tr:first-child th,
.commonForm tr:first-child td {border-top:1px solid #21a510;}
.commonForm th,
.commonForm td {padding:5px 8px; vertical-align:middle; border:1px solid #c3c3c3;}
.commonForm th {padding:8px 8px 2px; line-height:20px; color:#222; font-size:14px; font-weight:normal; text-align:left; vertical-align:top; background:#f7f7f7;}	
.commonForm td {color:#999; font-size:12px;}
.commonForm td .blue {color:#0066ff;}
.commonForm td .red {color:#fa1717;}
.commonForm td.noVPadding {padding:0 8px;}
.commonForm td .inputBox {position:relative; float:left; margin-right:5px; height:30px; border:1px solid #ccc; box-sizing:border-box;}
.commonForm td .inputBox input {padding:0 10px; width:100%; height:28px; line-height:28px; color:#444; font-size:13px; border:0; box-sizing:border-box;}
.commonForm td select {float:left; margin-right:5px; height:30px;}
.commonForm td .choice {position:relative; float:left; zoom:1;}
.commonForm td .choice:after {display:block; content:""; clear:both;}
.commonForm td .choice input[type="radio"] {position:absolute; top:0; left:-9999px;}
.commonForm td .choice label {float:left; display:block; margin-right:10px; padding-left:26px; height:30px; line-height:30px; color:#666; font-size:14px; font-weight:normal;  background:url('../images/common/bg_radio_off.gif') no-repeat left;}
.commonForm td .choice label span {margin:0 15px 0 12px;	color:#7c7c7c; font-size:11px;}
.commonForm td .choice input[type="radio"]:checked + label {color:#444; background:url('../images/common/bg_radio_on.gif') no-repeat left;}
.commonForm td .checkbox {position:relative; float:left; zoom:1;}
.commonForm td .checkbox:after {display:block; content:""; clear:both;}
.commonForm td .checkbox input[type="checkbox"] {position:absolute; top:0; left:-9999px;}
.commonForm td .checkbox label {float:left; display:block; margin-right:10px; padding-left:26px; height:30px; line-height:32px; color:#666; font-size:14px; font-weight:normal;  background:url('../images/common/bg_checkbox_off.gif') no-repeat left;}
.commonForm td .checkbox label span {margin:0 15px 0 12px;	color:#7c7c7c; font-size:11px;}
.commonForm td .checkbox input[type="checkbox"]:checked + label {color:#444; background:url('../images/common/bg_checkbox_on.gif') no-repeat left;}
.commonForm td .addRow {margin-top:5px;}
.commonForm td .btnRow {float:left; margin-right:5px;}
.commonForm td .btnRow img {display:block;}
.commonForm td .textareaBox {width:calc(100% - 2px); height:120px; border:1px solid #ccc;}
.commonForm td .textareaBox textarea {padding:10px; width:calc(100% - 20px);	height:100px; line-height:20px;	color:#444;	font-size:13px;	border:0; resize:none;}
.commonForm td .uploadPic .preview {float:left; margin-right:12px; width:198px; height:148px; border:1px solid #c3c3c3;}
.commonForm td .uploadPic .upload {float:left; padding-top:75px;}
.commonForm td .uploadPic .upload .info {line-height:20px; color:#21a510; font-size:12px;}
.commonForm td .uploadPic .upload .fileBtns {position:relative; margin-top:7px;}
.commonForm td .uploadPic .upload .fileBtns input[type="file"] {position:absolute; top:0; left:-9999px;}
.commonForm td .uploadPic .upload .fileBtns .btn {float:left; margin-right:5px; width:57px; height:28px; line-height:28px; font-size:12px; font-weight:normal; text-align:center; border:1px solid #454545; box-sizing:border-box;}
.commonForm td .uploadPic .upload .fileBtns .btn.add {color:#fff; background:#555;}
.commonForm td .uploadPic .upload .fileBtns .btn.delete {color:#555; background:#fff;}

.commonLayer {display:none;}
.commonLayer .pageDim {position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=70);}
.commonLayer .layerCont {position:fixed; top:100px; left:50%; z-index:1100; padding:25px 25px 20px; transform:translateX(-50%); background:#fff; border-top:3px solid #f65d00;}
.commonLayer .layerCont .btnClose {position:absolute; top:32px; right:32px;}
.commonLayer .layerCont h2 {margin-bottom:10px; padding-bottom:20px; letter-spacing:-1px; color:#222; font-size:18px; font-weight:normal; border-bottom:1px solid #ccc;}
.commonLayer .layerBtns {margin-top:20px; padding-top:20px; text-align:center; border-top:1px solid #c3c3c3;}
.commonLayer .layerBtns .btn {display:inline-block; margin:0 3px; width:159px; height:43px; line-height:43px; font-size:14px;}
.commonLayer .layerBtns .btn.full {margin:0; width:calc(100% - 2px);}
.commonLayer .layerBtns .btn.gray {color:#fff; background:#474747; border:1px solid #0a0a0a;}
.commonLayer .layerBtns .btn.orange {color:#fff; background:#f65d00; border:1px solid #b54400;}

/* login */
.loginPage {
    padding-top: 140px;
}

.loginPage .box {
    margin: 0 auto;
    margin-top: 240px;
    padding: 0 35px;
    width: 607px;
}

.loginPage .box .rowTop img {
    display: block;
    width: 100%;
}

.loginPage .box .rowMiddle {
    padding: 15px 0 15px;
}

.loginPage .box .rowMiddle .formBox {
    padding: 15px 0; 
    margin-top: 20px;
    height: 102px;
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
     display: flex;
    align-items: center;  
    justify-content: space-between;  
}

.loginPage .box .rowMiddle .formBox .inputs {
     width: 474px;
}

.loginPage .box .rowMiddle .formBox .inputs input[type="text"] {
    margin-bottom: 10px;
}

.loginPage .box .rowMiddle .formBox .inputs input[type="text"],
.loginPage .box .rowMiddle .formBox .inputs input[type="password"] {
    padding: 0 12px;
    width: 100%;
    height: 45px;
    font-size: 16px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.loginPage .box .rowMiddle .formBox .btnLogin {
     width: 120px;
    height: 98px;
    line-height: 98px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #f29600;
    background-color: #f29600;
}

.loginPage .box .rowMiddle .admin_box {
    display: flex;  
    align-items: center;  
    gap: 10px; 
    margin-top: 0; 
    justify-content: space-between; 
}

.loginPage .box .rowMiddle .admin_box .checks {
   
}

.loginPage .box .rowMiddle .admin_box h1.text01,
.loginPage .box .rowMiddle .admin_box .remeberId input,
.loginPage .box .rowMiddle .admin_box .remeberId label {
    color: #FFF;
}

.loginPage .box .rowMiddle .checks > div {position:relative; float:right; margin-right:25px;}
.loginPage .box .rowMiddle .checks input[type="checkbox"] {position:absolute; top:0; left:-9999px;}
.loginPage .box .rowMiddle .checks label {display:block; padding-left:32px; line-height:23px; color:#888; font-size:14px; font-weight:400; background:url('../images/common/bg_checkbox_off.gif') no-repeat left; cursor:pointer;}
.loginPage .box .rowMiddle .checks input[type="checkbox"]:checked + label {background:url('../images/common/bg_checkbox_on.gif') no-repeat left;}
.loginPage .box 

.rowBottom {margin:0 auto; margin-top:20px; width:607px; color:gray; position:relative; }
.copyright {float:left; line-height:15px; color:#a3a3a3; font-size:13px;}
.copyright .mark {color:#222;}
.ieInfo {float:right; margin-top:30px; padding-left:21px; line-height:16px; color:#156ba0; font-size:11px; background:url('../images/common/ico_footer_ie.gif') no-repeat left;}


ul.preview_cell {
  	position: relative;
  	display: inline-block;
	vertical-align:middle;

}


ul.preview {
	height: 38px;
	width: 150px;
	padding: 2px;
	position:relative; 
	margin:0px auto;
	vertical-align:middle;
	text-align: center; 
	background-color:black;
	color: white;
	border-radius: 5px;
	line-height: 18px;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
    table-layout: fixed;
}
div.msg_div{
    float:right;
    height: 74px;
    width: 150px;
    margin-right: 130px;
    background: #21a510;
	vertical-align:middle;
	text-align: center; 

}

a.msg_btn{
	display: inline-block;
	vertical-align: middle;
	text-align: center; 
	color: #fff;
	padding: 25px;
}

div.dust{
    float:left;
	color:#00F;
}

div.dust_div{
    height: 50px;
    width: 150px;
    margin-left: 280px;
    background: #21a510;
    vertical-align: middle;
    text-align: center;
} 

a.dust_btn{
	display: inline-block;
	vertical-align: middle;
	text-align: center; 
	color: #fff;
	padding: 15px;
}

img.icon{
	display: inline-block;
	vertical-align: middle;
	height: 28px;
}

img.item_icon{
	display: inline-block;
	vertical-align: middle;
	height: 35px;
}
span.left{
	text-align:left;
}

/* =================================================================
   기본 모달 오버레이 및 컨텐츠 (알림톡 플로우 기준으로 통합)
   ================================================================= */

/* [통합] .modal 및 .modal-overlay 클래스의 역할 통합. 
   모달의 기본 동작을 정의합니다. (display: none은 인라인 스타일로 관리)
*/
.modal-overlay {
    position: fixed; 
    z-index: 1000; /* z-index를 1000으로 유지 */
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    /* .modal의 background-color: rgba(0, 0, 0, 0.9) 대신 
       알림톡 모달에서 사용한 0.5를 유지합니다. */
    background-color: rgba(0,0,0,0.5); 
}

/* [통합] .modal-content 및 .template-modal-content의 스타일 통합.
   .template-modal-content 클래스를 메인으로 가정하고 통합했습니다.
*/
.modal-content {
    background-color: #fff;
    /* 모달 위치 조정 및 중앙 배치 */
    margin: 8% auto; 
    padding: 25px;
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
    /* max-width는 인라인 스타일로 관리하거나, 
       여기에 정의하여 모달 크기를 제어할 수 있습니다. */
    max-width: 650px; 
}


/* [제거] .close 클래스 제거 및 .template-modal-close-btn으로 통합. 
   .close는 보통 이미지 뷰어 모달 같은 곳에서 사용되던 스타일이며, 
   알림톡 모달에서는 .template-modal-close-btn이 사용됩니다.
*/

/* 닫기 버튼 */
.template-modal-close-btn {
    position: absolute; 
    top: 15px; 
    right: 25px; 
    font-size: 28px; 
    font-weight: 200; 
    color: #aaa; 
    cursor: pointer;
    transition: color 0.2s;
}
.template-modal-close-btn:hover {
    color: #333;
}

/* 템플릿 모달 제목 */
.template-modal-title {
    margin-top: 0; 
    margin-bottom: 20px; 
    font-size: 24px; 
    color: #333; 
    border-bottom: 2px solid #f0f0f0; 
    padding-bottom: 10px;
}

/* 수신자 정보 하이라이트 박스 (manager_template_target_info 내부의 P 태그) */
.manager-target-info .target-highlight-box {
    padding: 10px; 
    border: 1px solid #007bff; 
    background-color: #e6f0ff; /* 연한 파란색 배경 */
    border-radius: 6px; 
    font-size: 14px;
    font-weight: 500;
    color: #004d99;
    margin-bottom: 0;
}
.manager-target-info .fa-user {
    margin-right: 5px;
}


/* 안내 문구 */
.template-guidance-text {
    font-size: 14px; 
    color: #555; 
    margin-bottom: 15px; 
    padding-left: 5px;
}
.template-guidance-text .fa-info-circle {
    color: #007bff;
    margin-right: 5px;
}

/* 템플릿 목록 컨테이너 */
.template-list-container {
    height: 400px; /* 고정 높이 */
    border: 1px solid #e0e0e0; 
    border-radius: 8px;
    overflow-y: auto; 
    margin-bottom: 20px;
    background-color: #f9f9f9; 
    padding: 5px;
}

/* 로딩 텍스트 */
.template-list-container .loading-text {
    padding: 15px; 
    text-align: center; 
    color: #777;
}

/* 모달 하단 닫기 버튼 */
.modal-footer-btn {
    width: 100%; 
    height: 40px; 
    font-size: 16px;
    background-color: #f0f0f0; /* 회색 버튼 */
    color: #555;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s;
    font-weight: 500;
}
.modal-footer-btn:hover {
    background-color: #e0e0e0;
}


/* =================================================================
   템플릿 목록 항목 (JS 렌더링 시 사용될 클래스)
   ================================================================= */

/* 개별 템플릿 항목 */
.template-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px 5px; 
    padding: 15px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.template-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-color: #007bff;
}

/* 템플릿 제목 및 코드 영역 */
.template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.template-title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
}
.template-code {
    font-size: 12px;
    color: #007bff;
    font-weight: 600;
}

/* 템플릿 내용 요약 */
.template-body {
    font-size: 13px;
    color: #666;
    white-space: pre-wrap;
    line-height: 1.4;
    max-height: 60px; /* 3줄 제한 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* 템플릿 항목 푸터 (버튼 영역) */
.template-footer {
    text-align: right;
    margin-top: 10px;
}

/* 템플릿 액션 버튼 (내용 확인 및 수정 버튼) */
.template-action-btn {
    background-color: #007bff !important;
    color: white !important;
    border: none !important;
    border-radius: 4px;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
}
.template-action-btn .fa {
    margin-right: 3px;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

    .container {width: 100%; padding: 10px;}
    .container-label {text-align: left; }
    .container-label h3 { font-size: 16px; font-weight: bold;margin: 0;}
    .items-container { display: grid;grid-template-columns: repeat(5, 1fr);gap:20px;text-align: center;justify-items: center;align-items: start; }
    .item { text-align: center;width: 200px;height: 200px;display: flex;flex-direction: column;justify-content: start;align-items: center;overflow: hidden; }
    .thumbnail { width: 200px;height: 115px;display: block;margin: 0 auto;}
    .label { font-size: 14px;font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;text-align: center;margin-top: 10px;padding-top: 5px; }
    .column { width: 50%;padding: 15px; }

    .button-container { display: flex;gap: 10px;justify-content: end; }
    .button { background-color: #21a510;color: white;border: none;padding: 10px 20px;font-size: 14px;font-weight: bold;border-radius: 4px;text-align: center;cursor: pointer;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);transition: all 0.3s ease; }
    .button:hover { background-color: #d8541d;box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); }
    .gray-button {
		background-color: #cccccc;
		color: #666666; 
		padding: 5px 10px;
		border: 1px solid #888;
		}
    .gray-button:hover { background-color: #b3b3b3; }
	.thumbnail.mp3-icon {max-width: 50px; max-height: 50px;}

    .cate_btn { display: inline-block;font-size: 14px;height: 20px;line-height: 20px;padding: 5px 10px;border: 1px solid #888;border-radius: 3px;background-color: #f5f5f5;color: #333;text-align: center;margin: 5px;cursor: pointer; }
    .cate_btn.auto_width { width: auto; }
    .item { text-align: center;width: 200px;height: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;overflow: hidden; }
    .thumbnail { width: 200px;height: 115px;display: block;margin: 0 auto; cursor: pointer;}
	.thumbnail.mp3-icon {max-width: 50px; max-height: 50px;}

li.remarks{
	width: 100%;
	margin-top:30px;
	text-align:center;
	font-weight:500;
	color:#666;
}

ul#item{
	width: 100%;
	display: inline-block;
}

.cate_wrap {
	width: 1150px;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
	padding: 10px 0px; 
	display: inline-block;
	margin-top: 5px;
	background-color:#FFF;
	border: 1px solid #dadada;
    scroll-behavior: auto; /* 스크롤 동작 즉시 실행 */

}

.cate_btn {
    display: inline-block;
    /* 필요한 버튼 스타일 추가 */
    padding: 10px 20px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}


.cate_btn.active { /* 'active' 클래스가 추가되었을 때 스타일 */
    background-color: #ddd;
    color: #000;
}


.cate_btn.auto_width { width: auto; }

.tag-container {
    margin-top: 5px; /* 타이틀과의 간격 조절 */
}

.pageBtns {
    text-align: right;
    padding-top: 30px;
}

/* 기본 버튼 스타일 (bGray, bBlue, bRed, bGreen, bYellow) */
.btnCommon {
    display: inline-flex; /* 버튼 내용을 중앙 정렬 및 span 활용 */
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.type-label{
    width: 60px;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    font-size: 12px;
}    

/* 기존 submit-group 스타일 */
.submit-group {
    margin-top: 20px;
    text-align: right;
    display: flex; /* Flexbox 추가 */
    justify-content: space-between; /* 양쪽 끝으로 요소 배치 */
    align-items: center;
}
.btnCommon.large {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
}
/* 색상 정의 */
.btnCommon.bGray {
    background-color: #464646; /* 회색 */
    border: 1px solid #464646;
    color: white;
}

.btnCommon.bOrange {
    background-color: #fa6417; /* 빨간색 */
    border: 1px solid #fa6417;
    color: white;
}
.btnCommon.bGreen {
    background-color: #21a510; /* 초록색 */
    border: 1px solid #21a510;
    color: white;
}
.btnCommon.bYellow {
    background-color: #F1C40F; /* 노란색 */
    border: 1px solid #464646;
    color: #333;
}

.btn_Gray {
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #f4f4f4;
    transition: 0.2s;
}

/* =================================================================
   공통 레이아웃 및 스타일링 개선
   ================================================================= */



/* 5. 상세 및 등록 페이지 (박스 너비를 1000px로 줄여 집중도 향상) */
.detail-page #container.sub,
.register-page #container.sub {
    width: 1000px;
}

.sub .pageTop {
    font-size: 26px;
    font-weight: 700;
    color: #222;
    padding-left: 15px;
    letter-spacing: -1px;
}

/* 기존 CSS 파일 하단에 추가하여 덮어쓰기 */

.listHeader {
    display: flex !important;      /* Flexbox 활성화 */
    justify-content: space-between; /* 좌측(totalCnt)과 우측(div)을 양 끝으로 */
    align-items: center;            /* 세로 중앙 맞춤 (바닥에 맞추려면 flex-end) */
    width: 100%;                   /* 전체 너비 확보 */
    margin-bottom: 15px;
    clear: both;                   /* 이전 요소들의 float 영향 차단 */
}

/* 기존에 설정된 float 속성들 무력화 */
.listHeader .totalCnt, 
.listHeader > div {
    float: none !important;
    display: block;
}

/* 오른쪽 div 안에 있는 버튼 정렬 */
.listHeader > div:last-child {
    text-align: right;
    flex-shrink: 0; /* 우측 영역이 찌그러지지 않게 방지 */
}

/* 텍스트 스타일 강조 */
.listHeader .totalCnt p {
    margin: 0;
    color: #444;
    font-size: 14px;
}

.listHeader .totalCnt .cnt {
    color: #21a510; /* 테마 색상 적용 */
    font-weight: bold;
}

.choiceTerm-select-wrap{
    width: 250px;
}
div.inputBox level-select{
    width: 200px;
}
select#sch_partner_type,
select#sch_level{
    width: 120px;
}
/* =================================================================
   1. Search Filter Box - 전략적 배치 및 시각적 대비 강화
   ================================================================= */
.searchBox {
    display: flex; 
    background: #ffffff;
    border: 1px solid #e1e4e7;
    border-radius: 12px;
    margin-bottom: 25px;
    height: 115px;
    overflow: hidden;
}

/* 왼쪽 검색 조건 영역 */
.searchBox .conditions {
    flex: 1;
}

.searchBox .conditions .row {
    display: flex;
    align-items: stretch; /* 제목과 내용 높이 일치 */
    border-bottom: 1px solid #f0f2f4;
}

.searchBox .conditions .row:last-child {
    border-bottom: none;
}

/* 제목 열 (라벨 영역) */
.searchBox .conditions .row .title {
    width: 140px;
    min-width: 140px;
    background: #F4F6F6;
    color: #44546a;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-right: 1px solid #f0f2f4;
}

/* 입력 요소 열 */
.searchBox .conditions .row .items {
    padding: 12px 20px;
    display: flex;
    flex-wrap: wrap; /* 요소가 많아지면 자동 줄바꿈 허용 */
    align-items: center;
    gap: 10px;
}

/* 각 입력창 공통 스타일 */
.searchBox .form-control,
.searchBox select,
.searchBox .inputBox input[type="text"] {
    height: 38px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13px;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s;
}

.searchBox .form-control:focus {
    border-color: #21a510;
    box-shadow: 0 0 0 2px rgba(33, 165, 16, 0.1);
    outline: none;
}

/* 기간 조회 날짜 입력창 */
.inputBox.date input {
    width: 130px;
    text-align: center;
    /* 캘린더 아이콘 내장 */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 10px center;
}

.searchBox .txt {
    font-weight: bold;
    color: #999;
    margin: 0 5px;
}

/* 기간 선택 라디오 버튼 스타일 정리 */
.choiceTerm {
    display: flex;
    gap: 5px;
    margin-right: 10px;
}
.choiceTerm input[type="radio"] { display: none; }
.choiceTerm label {
    padding: 0 12px;
    height: 34px;
    line-height: 34px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: 0.2s;
}
.choiceTerm input[type="radio"]:checked + label {
    background: #21a510;
    color: #fff;
    border-color: #21a510;
    font-weight: 600;
}

/* 우측 버튼 영역 */
.searchBox .btns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background: #f8f9fb;
    border-left: 1px solid #f0f2f4;
    padding: 20px;
    min-width: 150px;
}

.searchBox .btns .btn {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
}

.searchBox .btns .btn.black { background: #334155; color: #fff; }
.searchBox .btns .btn.black:hover { background: #1e293b; }

.searchBox .btns .btn.gray { 
    background: #fff; 
    color: #64748b; 
    border: 1px solid #cbd5e1; 
}
.searchBox .btns .btn.gray:hover { background: #f1f5f9; color: #334155; }

.searchBox .conditions .row .items {
    display: flex !important;      /* 가로 배열 강제 */
    flex-wrap: nowrap !important;  /* 절대 줄바꿈 금지 */
    align-items: center;           /* 세로 중앙 정렬 */
    gap: 8px;                      /* 요소 사이 간격 */
    padding: 10px 20px;
    width: 100%;                   /* 부모 너비 활용 */
}

/* 내부 inputBox들이 float 때문에 튕기지 않도록 설정 */
.searchBox .conditions .row .items .inputBox {
    float: none !important;        /* 기존 float 제거 */
    margin-right: 0 !important;    /* gap으로 조절하므로 마진 제거 */
}

input#sch_company.form-control{
    width: 300px;
}

div.inputBox.date{
    width: 120px;
}

.btn.large {
    height: 42px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.btn.black { background: #334155; color: #fff; } /* Slate 색상으로 변경 */
.btn.white { background: #fff; border: 1px solid #d1d5db; color: #4b5563; }

/* =================================================================
   2. Data Table - partner_promo_widget의 정체성 주입
   ================================================================= */
.commonList {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e1e4e7;
    overflow: hidden;
}

.commonList table {
    width: 100%;
    border-spacing: 0;
}

.commonList thead th {
    color: #64748b;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 2px solid #6b6b6b; /* 위젯 메인 포인트 */
    text-transform: uppercase;
}

.commonList tbody td {
    padding: 16px 10px;
    font-size: 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.commonList tbody tr:hover td {
    background-color: #f9fdf9; /* 아주 연한 그린 */
}

/* 정지된 파트너 처리 */
.status-stopped td {
    background-color: #fffafb;
    color: #94a3b8 !important;
}

/* =================================================================
   3. Badges & Components - 둥글고 직관적인 UI
   ================================================================= */
.level-label, .type-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 50px; /* 캡슐 형태 */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* [Buttons] 공통 버튼 고도화 */
.btnCommon {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btnCommon.bBlue {
    background: #21a510 !important;
    border: none !important;
    color: #fff !important;
}

.btnCommon.bBlue:hover {
    background: #1a8a0d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 165, 16, 0.25);
}

.btnCommon.bRed {
    background: #ef4444;
    color: #fff;
    border: none;
}

.btnCommon.small {
    padding: 5px 12px;
    font-size: 12px;
}

/* 페이지네이션 */
.pagenateWrap .pagenate a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    margin: 0 3px;
}

.pagenateWrap .pagenate a.active {
    background: #21a510;
    border-color: #21a510;
    color: #fff;
    font-weight: 700;
}

/* [Modal] 담당자 팝업 레이어 디자인 */
#managerListModal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
}
.modal-content-wrap {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 450px;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.modal-header {
    border-bottom: 2px solid #21a510;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.modal-header h3 { font-size: 18px; color: #222; }
.manager-list li {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    list-style: none;
}
.manager-list li:last-child { border-bottom: none; }
.manager-details a { color: #21a510; text-decoration: underline; }

.product { 
    width: 100%;
    margin: 0 auto; 
    background: #fff; 
    border-radius: 15px; 
}


/* Detail & Write Table Custom */
.writeTable { 
    width: 100%; 
    border-top: 2px solid #222; 
    margin: 20px 0;
}

.writeTable th { 
    width: 20%; /* 라벨 영역 비율 조정 */
    background: #fdfdfd; 
    border-right: 1px solid #f0f0f0;
    padding-left: 25px;
}

.writeTable td { 
    padding: 15px 25px;
}

.site-link {
    color: #3498DB;
    text-decoration: none;
    font-size: 1.0em;
    margin-top:10px;
}
.partner-homepage{
    font-size: 1.0em;
    margin-top:10px;
}
.company_name{
    font-size: 1.2em;
}

/* 마우스를 올렸을 때 */
.link-item:hover {
    background-color: #f1f1f1;
    border-radius: 8px;
}

/* [추가] 클릭 후 자국이 남는 상태 (Active) */
.link-item.active {
    background-color: #e7f5ff !important; /* 연한 파란색 자국 */
    border: 1px solid #3498db;          /* 테두리 강조 */
    border-radius: 8px;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05); /* 안쪽 그림자로 누른 효과 */
}

/* Input Width Control */
.writeTable .form-control { 
    width: 100%; 
    max-width: 500px; /* 입력창이 너무 길어지지 않게 제한 */
}

/* Action Buttons Center */
.bottomBtns { 
    display: flex;
    justify-content: center; /* 버튼들 중앙 정렬 */
    gap: 15px;
    margin-top: 50px;
}

/* 토글 스위치 컨테이너 */
.toggle-switch-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 25px;
}

/* [공통] 토글 스위치 배경 */
/* 토글 컨테이너 */
.toggle-switch {
    position: relative;
    display: inline-flex;
    background-color: #f1f5f9;
    border-radius: 50px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

/* 움직이는 슬라이더 (파란색 박스) */
.toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(50% - 4px); /* 아이템이 2개일 때 절반 크기 */
    background-color: #3498db;
    border-radius: 50px;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
    
    /* 핵심: 자연스러운 이동 애니메이션 */
    transition: transform 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    will-change: transform;
}

/* 0번(리스트)이 active일 때 슬라이더 위치 */
.toggle-switch:has(.toggle-item.active[data-index="0"]) .toggle-slider {
    transform: translateX(0);
}

/* 1번(캘린더)이 active일 때 슬라이더 위치 */
.toggle-switch:has(.toggle-item.active[data-index="1"]) .toggle-slider {
    transform: translateX(100%);
}

/* 개별 아이템 스타일 */
.toggle-item {
    position: relative;
    z-index: 2; /* 슬라이더보다 위로 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* 활성화된 글자색 */
.toggle-item.active {
    color: #ffffff;
}

/* 클릭(눌림) 효과 */
.toggle-item:active {
    transform: scale(0.95);
    transition: 0.1s;
}

.tab_menu {
    display: flex;
    gap: 10px;
    border-bottom: none; /* 바닥선 제거 */
    margin-bottom: 24px;
    background: #f1f5f9; /* 연한 회색 배경 */
    padding: 6px;
    border-radius: 10px;
    width: fit-content; /* 내용물만큼만 너비 차지 */
}

.tab_link {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
}

.tab_link.active {
    background: #fff; /* 활성화 시 흰색 배경 */
    color: #21a510;   /* 강조색 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 모달 컨테이너 (배경) 스타일 */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

/* 모달 내용 상자 스타일 */
.modal-content-box {
    background-color: #fff;
    margin: 10vh auto;
    padding: 0;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-out;
}

/* 모달 헤더 */
.modal-header {
    padding: 15px 20px;
    background-color: #3498DB;
    color: white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.2em;
}

.modal-close-btn {
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.modal-close-btn:hover {
    opacity: 1;
}

/* 모달 본문 */
.modal-body {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

.list-table th,
.rcr-table th,
.partner-list-table th,
.rental-list-table th { /* .rental-list-table 통합 */
    background-color: #F4F6F6;
    font-weight: bold;
    color: #34495E;
    border-bottom: 1px solid #ECF0F1;
}

.list-table tbody tr:hover,
.rcr-table tbody tr:hover,
.partner-list-table tbody tr:hover,
.rental-list-table tbody tr:hover { /* .rental-list-table 통합 */
    background-color: #E8F6F8;
    cursor: pointer; 
}

/* 관리자 목록 작업 버튼 영역 */
.col-admin-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
/* 버튼 그룹 컨테이너 */
.btn-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* 개별 아이콘 버튼 스타일 */
.btn-icon {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    line-height: 1;
}

/* 수정 버튼 호버 효과 (살짝 커짐) */
.btn-icon.btn_edit:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

/* 삭제 버튼 호버 효과 (살짝 커짐) */
.btn-icon.btn_delete:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

.step-title { font-size: 22px; font-weight: 800; color: var(--p-text-dark); margin-bottom: 25px; text-align: center; }

@media (max-width: 768px) {
    .search-box-container { padding: 0 !important; }
    .search-form-grid { display: flex !important; flex-direction: column; gap: 8px; }

    .inputBox input[type="text"] {
        width: 100%;
        height: 44px;
        border: 1px solid #333; /* 검색바 강조 */
        border-radius: 8px;
        padding: 0 12px;
        font-size: 15px;
    }

    .search-form-buttons { display: flex; gap: 5px; }
    .search-form-buttons .btn {
        flex: 1;
        height: 42px;
        font-weight: bold;
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
    }
}