@charset "utf-8";

/********************
** header 
********************/
header{top:0;}
.headerModal_inner{width:80dvw; margin:0 auto;}
.header_modal_overlay {    position: fixed;    top: 0;    left: 0;    width: 100vw;    height: 100vh;    background: rgba(217, 218, 222, 0.8);    backdrop-filter: blur(52px);    display: none;    z-index: 9999;    overflow: auto;  }
.header_allMenuModal_List{display:grid;  grid-template-columns: repeat(7, 1fr);}
.header_shadowBox{box-shadow:0 0 8px rgba(238, 238, 240, 1);}
.headerModal_tit{border-bottom:1px solid #EEEEF0;}

/********************
** 성공페이지 
********************/
.success{  position: fixed;    top: 0;    left: 0;    width: 100vw;    height: 100vh;    background: rgba(217, 218, 222, 0.8);    backdrop-filter: blur(52px);  align-items: center;    justify-content: center;   z-index: 9999; }

/********************
** index.php 
********************/
/** 무료현수막 **/
#todayBanner{overflow:hidden}
.modal_overlay {    position: fixed;    top: 0; left: 0;    width: 100vw;    height: 100vh;    background: rgba(217, 218, 222, 0.8);    backdrop-filter: blur(52px);   display: none;    justify-content: center;    align-items: center;    z-index: 9999;  }
.modal-box {background: #fff;border-radius: 16px;width:1100px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); overflow: hidden;}
.modal_inner{overflow:auto;}

.maincard{width: calc(50% - 8px);}
.shadowBox{box-shadow:0 0 8px rgba(238, 238, 240, 1);}
.companyCrad{width:calc(65% - 8px); align-self: stretch;}
.pointCard{width:calc(35% - 8px); overflow:hidden;}
.loginAddress{border-left:1px solid #727272;}
.logoinCard{border-bottom:1px solid #EEEEF0;}
.companyAbout {  display: -webkit-box;  -webkit-line-clamp: 2;   -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
.pointCard_Top{background: linear-gradient(to bottom right, #2753E9, #2034AD);}
.moreBtn{border:1px solid #91949F;}
.serviceList a{width:calc(14.2% - 16px);border:1px solid transparent; transition: 0.3s; align-self: stretch;}
.serviceList a:hover{border:1px solid #326AF3; background:#EFF5FF;}

/** 전체서비스 모달 **/
.all_ServiceModal_List{display:grid;  grid-template-columns: repeat(6, 1fr);}
.all_ServiceModal_List a{border:1px solid transparent; transition: 0.3s;}
.all_ServiceModal_List a:hover{border:1px solid #326AF3; background:#EFF5FF;}

/********************
** 비즈코인 충천 
********************/
/* 결제 수단 */
.bizcoin_payment_method a {transition: all 0.2s ease-in-out;border:1px solid #D9DADE;}
.bizcoin_payment_method a.active {background-color: #3645AB;color: white;border-color: #3645AB;}
/* 입금 계좌 정보 */
.bizcoin_bank_info {display: none; }
#bizcoin_amount_input{border:1px solid #D9DADE;}
.bizcoin_quick_add_buttons {display: grid;grid-template-columns: repeat(4, 1fr);}
.bizcoin_quick_add_buttons button{border:1px solid #D9D9D9;}


/********************
** 비즈코인 내역 
********************/
.bizcoin_table{border-collapse:collapse;table-layout: fixed; overflow:auto; min-width:860px;}
.bizcoin_table th,
.bizcoin_table td{ border:1px solid #D9DADE;}
/* 페이징 */
.pagination .page,
.pagination .arrow {background: none;border: none;transition: background 0.2s, color 0.2s;}
.pagination .page:hover,
.pagination .arrow:hover:not(:disabled) {    background-color: #e5e7eb;  }
.pagination .page.active {    background-color: #e0edff;    color: #111827;  font-weight: 600; border-radius: 4px; }
.pagination .arrow:disabled {    color: #d1d5db;    cursor: default;  }

/********************
** 무료현수막신청. 
********************/
.freeInput input, .freeInput textarea{border:1px solid #D9DADE;}
#bizcoin_filename{border:1px solid #D9DADE;}

/********************
** ceo프로그램 리스트
********************/
.ceoprogramListBox{display:grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; row-gap: 40px;}

/********************
** ceo프로그램 뷰
********************/
.ceoprogramViewTit{width: calc(100% - 520px);}
.del_Btn{border:1px solid #EEEEF0;}
.fix_Btn{border:1px solid #1F3FD6;}
.list_Btn{border:1px solid #1F3FD6;}

/********************
** ceo프로그램 글쓰기
********************/
#editor-container{height:300px; background:#fff;}

/********************
** 사장님의 수다 뷰/글쓰기
********************/
.communityListBox{border-bottom:1px solid #EEEEF0}
.communityTxt{display: -webkit-box;    -webkit-line-clamp: 4;    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis;}
.communityWriteBox{border:1px solid #D9DADE;}
.community_modal {    position: fixed;    top: 0; left: 0;    width: 100vw;    height: 100vh;    background: rgba(217, 218, 222, 0.8);    backdrop-filter: blur(52px);   display: none;    justify-content: center;    align-items: center;    z-index: 9999;  }
.community_modalbox {background: #fff;border-radius: 16px;width:1100px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); overflow: hidden;}


/* 모달 오버레이 */
.declare_modal_overlay {    position: fixed;    top: 0; left: 0;    width: 100vw;    height: 100vh;    background: rgba(217, 218, 222, 0.8);    backdrop-filter: blur(52px);   display: none;    justify-content: center;    align-items: center;    z-index: 9999;   }
.declare_modal_box {  background: #fff;border-radius: 16px;width:1100px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); overflow: hidden;  }
@keyframes declare_fadeInUp {
from {opacity:0; transform: translateY(20px);}
to {opacity:1; transform: translateY(0);}
}

.declare_modal_actions {    display: flex;    justify-content: flex-end;    gap: 10px;  }


/********************
** 사장님의 수다 뷰/글쓰기
********************/
.communityViewInput{width:calc(100% - 121px); border:1px solid #D9DADE;}

/********************
** 사업꿀팁 뷰
********************/
.businessTip_inner{width:1152px; margin: 0 auto;}
.businessTip_inner img{max-width:100%; display:block}
.businessCnt{color:initial; font-size: initial; font-weight: initial;}
.businessCnt b{color:inherit}
/********************
** 사업꿀팁 뷰
********************/
.mypageTxt{display: -webkit-box;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis;}

/********************
** 마이페이지
********************/
#myfollow {    position: relative;    z-index: 1;     }  
#myfollow::before {    content: "";    position: absolute;    top: 0; left: 0; right: 0; bottom: 0;    z-index: -1;    border-radius: 12px;    background: linear-gradient(to right, #94BCFC, #2753E9);    padding: 2px;    -webkit-mask:      linear-gradient(#fff 0 0) content-box,      linear-gradient(#fff 0 0);    -webkit-mask-composite: xor;    mask-composite: exclude;  }
.mypage_listBox{border-bottom:1px solid #EEEEF0}
.mypage_addFollow{border:1px solid #EEEEF0;}
.mypage_addFollowBox{border-bottom:1px solid #EEEEF0;}
.mypage_addFollowBox:last-child{border-bottom:none; padding-bottom:0;}
.mypage_modalBox{ position: fixed;    top: 0;    left: 0;    width: 100vw;    height: 100vh;    background: rgba(217, 218, 222, 0.8);    backdrop-filter: blur(52px); display:none; align-items: center;    justify-content: center;   z-index: 9999;}
#follow_mobleBtn{bottom:20px; right:20px;}
.mypageTxt{display: -webkit-box;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis;}
.myfollow_modal_inner{width:1152px;}

/********************
** 정보수정
********************/
.profileImgBtn{bottom:-5px; right:-10px;}

  /* 업로드 버튼 */

/* 비활성 상태: 회색 */
.upload-btn {    cursor: not-allowed;    transition: background-color 0.3s, color 0.3s;  }

/* 활성 상태: 파란 배경, 흰 글자 */
.upload-btn.active {    background: #1F3FD6;    color: #fff;    cursor: pointer;  }
  
  /* 이미지 선택 후 스타일 */
  #modalBody{width:100%; display:flex; align-items: center; justify-content: center;}
  #modalBody img.preview {    width: 250px;    height: 250px;    object-fit: cover;    border-radius: 8px;    margin: auto;  }

/********************
** 든든점수
********************/
.dendenpoint{ display:grid;}
.dundunBtnBox{display:grid; grid-template-columns: repeat(5, 1fr);}
.dundunInput{display:none;}
.dundunRadio{border:1px solid #D9DADE;transition: all 0.2s ease;}
.dundunInput:checked + .dundunRadio {    background-color: #2034AD;    color: #fff;    border-color: #2034AD;  }
.dundunRadio:hover {  background:#EFF5FF; color:#1F3FD6;  border-color: #1F3FD6;  }
.dundunTextBox{width:calc(100% - 45px); }
#step_6_Btn{background: linear-gradient(to bottom right, #2753E9, #2034AD);}


/********************
** 든든점수 마무리
********************/
.color_graph{left:0;}
.graph_Box{aspect-ratio: 2 / 1;}
.needle{bottom:0;left:50%;     transform-origin: 50% 100%;  transform: translateX(-50%) rotate(-90deg);}
.color_graph, .needle {  transition: all 1s ease-in-out; /* 모든 변화에 1초 동안 부드러운 애니메이션 적용 */}
.dundunService{display:grid; grid-template-columns: repeat(4, 1fr);}
.dundunService a{border:1px solid transparent; transition: 0.3s;}
.dundunService a:hover{border:1px solid #326AF3; background:#EFF5FF;}


/********************
** 공지사랑 리스트 
********************/
.noticeTableBox{overflow: auto;}
.notice_table{min-width: 700px; border-top:2px solid #D9DADE; border-bottom:2px solid #D9DADE;}
tbody tr:hover {  background-color: #f5f8fc;}
.badge_notice {  background-color: #FFF2F2;  color:#F21010;}
table th:first-child,
table td:first-child {  border-left: none;}
table th:last-child,
table td:last-child {  border-right: none;}
/* 기본적으로는 양쪽 border 존재하도록 */
table th,
table td {  border-left: 1px solid #D9DADE;  border-right: 1px solid #D9DADE;}
table tr{border-bottom:1px solid #D9DADE;}

/********************
** 제휴사
********************/
input[type="checkbox"]{left:-9999px}
 input[type="checkbox"] + label{cursor: pointer;}
 input[type="checkbox"] + label:before,  input[type="checkbox"] + label:after{content:''; display:block; position:absolute;}
 input[type="checkbox"] + label:before{width:20px; height:20px; border-radius:2px; border:1px solid #91949f; background:#f7f8f8; left:0;transition: ease-in-out 0.2s;}
 input[type="checkbox"] + label:after{width:6px; height:10px; left:7px; top:40%; transform:translateY(-50%) rotate(45deg); border:1px solid #f7f8f8;border-width:0 2px 2px 0; }
 input[type="checkbox"]:checked + label:before{background:#6b5dd5; border:1px solid #6b5dd5}



/********************
** 플레너 모집
********************/
 .swiperBtn{width:100%; height:100%;}
.swiperPrevBtn:after{transform: translate(-50%, -50%) rotate(135deg); content:'';left:5px;top:50%; border:2px solid #fefefe; z-index:10; width:10px; height:10px; border-width:0 2px 2px 0; cursor: pointer; z-index: 4;  position:absolute}
.swiperNextBtn:after{transform: translate(-50%, -50%) rotate(315deg); content:'';right:30px;top:50%; border:2px solid #fefefe; z-index:10; width:10px; height:10px; border-width:0 2px 2px 0; cursor: pointer; z-index: 4;  position:absolute}
.swiperPrevBtn:before{content:'';display:block; width:40px; height:40px; position:absolute; left:0; top:50%; transform: translate(-50%, -50%); background:#0066FF; border-radius:200px; z-index: 3;}
.swiperNextBtn:before{content:'';display:block; width:40px; height:40px; position:absolute; right:0; top:50%; transform: translate(-50%, -50%); background:#0066FF; border-radius:200px; z-index: 3;}
.operator_input{border:1px solid #D9DADE}



/********** 경비 절감 (savecost) **********/
.savecostBtna:hover{border:1px solid #326AF3; background:#EFF5FF;}
.savecost_step{min-height:100dvh }
.savecost_step:not(#step_1) {  display: none;}
.step_3_Box{display:grid; grid-template-columns: repeat(4, 1fr);}
.savecostInput {  display: none;}
.savecostRadio {  border: 1px solid #D9DADE;  transition: all 0.2s ease;}
.savecostInput:checked + .savecostRadio {  background-color: #2034AD;  color: #fff;  border-color: #2034AD;}
.savecostRadio:hover {  background: #EFF5FF;  color: #1F3FD6;  border-color: #1F3FD6;}
.savecostButton.active{ background-color: #2034AD;  color: #fff;  border-color: #2034AD;}


/**************************
**  회원가입
**************************/
/* 커스텀 체크박스 스타일 */
.join_agree_box input[type="checkbox"] {  display: none;}
.join_agree_box input[type="checkbox"] + label {  position: relative;  padding-left: 32px;  cursor: pointer;  min-height: 20px;}
.join_agree_box input[type="checkbox"] + label::before {  content: '';  position: absolute;  left: 0;  top: 50%;  transform: translateY(-50%);  width: 20px;  height: 20px;  border: 1.5px solid #ced4da;  border-radius: 4px;  background-color: #fff;}
.join_agree_box input[type="checkbox"]:checked + label::before {  background-color: #343a40;  border-color: #343a40;}
.join_agree_box input[type="checkbox"] + label::after {  content: '';  position: absolute;  left: 7px;  top: 44%;  width: 5px;  height: 7px;  border: solid white;  border-width: 0 2px 2px 0;  transform: translateY(-50%) rotate(45deg);  opacity: 0;}
.join_agree_box input[type="checkbox"]:checked + label::after {  opacity: 1;}
#join_agree_all:checked + label::after {  left: 7px;  width: 5px;  height: 7px;  border-width: 0 3px 3px 0;}
.join_agree_box{border:1px solid #D9DADE;}



/************************** 가게홍보 ********************************/
.pgbg_beige { background:#f4efe7; }
.box_dashed { border:1px dashed #c9b9a5; border-radius:8px; background:#fff; }
.scr_y540 { max-height:540px; overflow-y:auto; }
.cols_240_240_auto { display:grid; grid-template-columns:240px 240px 1fr; gap:16px; }
.chip {width:100%; padding:8px 12px; border:1px dashed #d3c7b6; border-radius:999px; cursor:pointer; white-space:nowrap; background:#fff; }
.chip.on { background:#eadfce; border-color:#bfa98a; font-weight:600; }
.card_row { display:flex; gap:14px; padding:14px; border-bottom:1px dashed #eee3d3; align-items:center; }
.card_row:last-child { border-bottom:none; }
.thumb_84 { width:84px; aspect-ratio:1/1; border-radius:8px; object-fit:cover; background:#f3f0ea; }
.meta_txt { font-size:14px; color:#6b6b6b; line-height:1.4; }
.link_txt { font-size:14px; text-decoration:underline; }
.toolbar_line { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px dashed #eadfce; }
.toggle_box { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.switch { appearance:none; width:44px; height:24px; border-radius:999px; background:#ddd; position:relative; outline:none; transition:.2s; }
.switch:checked { background:#2f5bda; }
.switch:before { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s; }
.switch:checked:before { left:23px; }
.more_hint { text-align:center; color:#9a8a71; padding:12px; }

/* 반응형 */
@media (max-width:960px){ .cols_240_240_auto { grid-template-columns:1fr; } }

 /** db톡 **/
 .dbinner{width:80dvw; margin-left:auto; margin-right:auto;}
 .db_mainImg{bottom:80px; right:0;}
 .db_sec3{display: grid; grid-template-columns: repeat(6, 1fr);}
 .dbyoutube{  aspect-ratio: 16 / 9; overflow: hidden; position:relative;}
 .dbyoutube iframe {  position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    border: 0;}
 .db_sec6{display: grid; grid-template-columns: repeat(4, 1fr); gap:24px;}
 .slider-container {    position: relative;    width: 100%;    overflow: hidden;   }

.logo-slider {    width: 100%;    overflow: hidden;  }
.logo-track {    display: flex;    width: max-content;    animation: scroll 30s linear infinite;    align-items: center;  }
.logoImg {    margin: 0 20px; flex-shrink: 0;    transition: opacity 0.3s ease;  }
@keyframes scroll {
0% {
    transform: translateX(0%);
}
100% {
    transform: translateX(-50%);
}
}
.fade {    position: absolute;    top: 0;    width: 25%;    height: 100%;    pointer-events: none;    z-index: 2;  }
.fade-left {    left: 0;    background: linear-gradient(to right, #26272B, transparent);  }
.fade-right {    right: 0;    background: linear-gradient(to left, #26272B, transparent);  }