@charset "UTF-8";
/* ==========================================================================
   Margin & Padding Utilities (Bootstrap Style 0 - 5 & auto)
   ========================================================================== */

:root {
  --spacer: 1rem; /* 16px 기준 */
}

.m-0  {margin: 0 !important; }
.mt-0 {margin-top: 0 !important; }
.mb-0 {margin-bottom: 0 !important; }
.ms-0 {margin-left: 0 !important; }
.me-0 {margin-right: 0 !important; }
.mx-0 {margin-left: 0 !important; margin-right: 0 !important; }
.my-0 {margin-top: 0 !important; margin-bottom: 0 !important; }


.m-1  {margin: calc(var(--spacer) * 0.25) !important; }
.mt-1 {margin-top: calc(var(--spacer) * 0.25) !important; }
.mb-1 {margin-bottom: calc(var(--spacer) * 0.25) !important; }
.ms-1 {margin-left: calc(var(--spacer) * 0.25) !important; }
.me-1 {margin-right: calc(var(--spacer) * 0.25) !important; }
.mx-1 {margin-left: calc(var(--spacer) * 0.25) !important; margin-right: calc(var(--spacer) * 0.25) !important; }
.my-1 {margin-top: calc(var(--spacer) * 0.25) !important; margin-bottom: calc(var(--spacer) * 0.25) !important; }

.m-2  {margin: calc(var(--spacer) * 0.5) !important; }
.mt-2 {margin-top: calc(var(--spacer) * 0.5) !important; }
.mb-2 {margin-bottom: calc(var(--spacer) * 0.5) !important; }
.ms-2 {margin-left: calc(var(--spacer) * 0.5) !important; }
.me-2 {margin-right: calc(var(--spacer) * 0.5) !important; }
.mx-2 {margin-left: calc(var(--spacer) * 0.5) !important; margin-right: calc(var(--spacer) * 0.5) !important; }
.my-2 {margin-top: calc(var(--spacer) * 0.5) !important; margin-bottom: calc(var(--spacer) * 0.5) !important; }

.m-3  {margin: var(--spacer) !important; }
.mt-3 {margin-top: var(--spacer) !important; }
.mb-3 {margin-bottom: var(--spacer) !important; }
.ms-3 {margin-left: var(--spacer) !important; }
.me-3 {margin-right: var(--spacer) !important; }
.mx-3 {margin-left: var(--spacer) !important; margin-right: var(--spacer) !important; }
.my-3 {margin-top: var(--spacer) !important; margin-bottom: var(--spacer) !important; }

.m-4  {margin: calc(var(--spacer) * 1.5) !important; }
.mt-4 {margin-top: calc(var(--spacer) * 1.5) !important; }
.mb-4 {margin-bottom: calc(var(--spacer) * 1.5) !important; }
.ms-4 {margin-left: calc(var(--spacer) * 1.5) !important; }
.me-4 {margin-right: calc(var(--spacer) * 1.5) !important; }
.mx-4 {margin-left: calc(var(--spacer) * 1.5) !important; margin-right: calc(var(--spacer) * 1.5) !important; }
.my-4 {margin-top: calc(var(--spacer) * 1.5) !important; margin-bottom: calc(var(--spacer) * 1.5) !important; }

.m-5  {margin: calc(var(--spacer) * 3) !important; }
.mt-5 {margin-top: calc(var(--spacer) * 3) !important; }
.mb-5 {margin-bottom: calc(var(--spacer) * 3) !important; }
.ms-5 {margin-left: calc(var(--spacer) * 3) !important; }
.me-5 {margin-right: calc(var(--spacer) * 3) !important; }
.mx-5 {margin-left: calc(var(--spacer) * 3) !important; margin-right: calc(var(--spacer) * 3) !important; }
.my-5 {margin-top: calc(var(--spacer) * 3) !important; margin-bottom: calc(var(--spacer) * 3) !important; }

.m-auto  {margin: auto !important; }
.mt-auto {margin-top: auto !important; }
.mb-auto {margin-bottom: auto !important; }
.ms-auto {margin-left: auto !important; }
.me-auto {margin-right: auto !important; }
.mx-auto {margin-left: auto !important; margin-right: auto !important; }
.my-auto {margin-top: auto !important; margin-bottom: auto !important; }



.p-0  {padding: 0 !important; }
.pt-0 {padding-top: 0 !important; }
.pb-0 {padding-bottom: 0 !important; }
.ps-0 {padding-left: 0 !important; }
.pe-0 {padding-right: 0 !important; }
.px-0 {padding-left: 0 !important; padding-right: 0 !important; }
.py-0 {padding-top: 0 !important; padding-bottom: 0 !important; }

.p-1  {padding: calc(var(--spacer) * 0.25) !important; }
.pt-1 {padding-top: calc(var(--spacer) * 0.25) !important; }
.pb-1 {padding-bottom: calc(var(--spacer) * 0.25) !important; }
.ps-1 {padding-left: calc(var(--spacer) * 0.25) !important; }
.pe-1 {padding-right: calc(var(--spacer) * 0.25) !important; }
.px-1 {padding-left: calc(var(--spacer) * 0.25) !important; padding-right: calc(var(--spacer) * 0.25) !important; }
.py-1 {padding-top: calc(var(--spacer) * 0.25) !important; padding-bottom: calc(var(--spacer) * 0.25) !important; }

.p-2  {padding: calc(var(--spacer) * 0.5) !important; }
.pt-2 {padding-top: calc(var(--spacer) * 0.5) !important; }
.pb-2 {padding-bottom: calc(var(--spacer) * 0.5) !important; }
.ps-2 {padding-left: calc(var(--spacer) * 0.5) !important; }
.pe-2 {padding-right: calc(var(--spacer) * 0.5) !important; }
.px-2 {padding-left: calc(var(--spacer) * 0.5) !important; padding-right: calc(var(--spacer) * 0.5) !important; }
.py-2 {padding-top: calc(var(--spacer) * 0.5) !important; padding-bottom: calc(var(--spacer) * 0.5) !important; }

.p-3  {padding: var(--spacer) !important; }
.pt-3 {padding-top: var(--spacer) !important; }
.pb-3 {padding-bottom: var(--spacer) !important; }
.ps-3 {padding-left: var(--spacer) !important; }
.pe-3 {padding-right: var(--spacer) !important; }
.px-3 {padding-left: var(--spacer) !important; padding-right: var(--spacer) !important; }
.py-3 {padding-top: var(--spacer) !important; padding-bottom: var(--spacer) !important; }

.p-4  {padding: calc(var(--spacer) * 1.5) !important; }
.pt-4 {padding-top: calc(var(--spacer) * 1.5) !important; }
.pb-4 {padding-bottom: calc(var(--spacer) * 1.5) !important; }
.ps-4 {padding-left: calc(var(--spacer) * 1.5) !important; }
.pe-4 {padding-right: calc(var(--spacer) * 1.5) !important; }
.px-4 {padding-left: calc(var(--spacer) * 1.5) !important; padding-right: calc(var(--spacer) * 1.5) !important; }
.py-4 {padding-top: calc(var(--spacer) * 1.5) !important; padding-bottom: calc(var(--spacer) * 1.5) !important; }

.p-5  {padding: calc(var(--spacer) * 3) !important; }
.pt-5 {padding-top: calc(var(--spacer) * 3) !important; }
.pb-5 {padding-bottom: calc(var(--spacer) * 3) !important; }
.ps-5 {padding-left: calc(var(--spacer) * 3) !important; }
.pe-5 {padding-right: calc(var(--spacer) * 3) !important; }
.px-5 {padding-left: calc(var(--spacer) * 3) !important; padding-right: calc(var(--spacer) * 3) !important; }
.py-5 {padding-top: calc(var(--spacer) * 3) !important; padding-bottom: calc(var(--spacer) * 3) !important; }

/* background */
.bg-primary{background-color: var(--primary) !important; }
.bg-primary-subtle{background-color: var(--primary-subtle) !important; }
.bg-secondary{background-color: var(--secondary) !important; }
.bg-secondary-subtle{background-color: var(--secondary-subtle) !important; }
.bg-danger{background-color: var(--danger) !important; }
.bg-danger-subtle{background-color: var(--danger-subtle) !important; }
.bg-success{background-color: var(--success) !important; }
.bg-success-subtle{background-color: var(--success-subtle) !important; }
.bg-warning{background-color: var(--warning) !important; }
.bg-warning-subtle{background-color: var(--warning-subtle) !important; }
.bg-dark{background-color: var(--dark) !important; }
.bg-dark-subtle{background-color: var(--dark-subtle) !important; }
.bg-tan{background-color: var(--tan) !important; }
.bg-tan-subtle{background-color: var(--tan-subtle) !important; }
.bg-info{background-color: var(--info) !important; }
.bg-info-subtle{background-color: var(--info-subtle) !important; }
.bg-white{background-color: #fff !important;: }

.bg-100{background-color: var(--gray-100) !important; }
.bg-200{background-color: var(--gray-200) !important; }
.bg-300{background-color: var(--gray-300) !important; }
.bg-400{background-color: var(--gray-400) !important; }
.bg-500{background-color: var(--gray-500) !important; }
.bg-600{background-color: var(--gray-600) !important; }
.bg-700{background-color: var(--gray-700) !important; }
.bg-800{background-color: var(--gray-800) !important; }
.bg-900{background-color: var(--gray-900) !important; }

/* color */
.text-primary{color: var(--primary) !important;}
.text-secondary{color: var(--secondary) !important;}
.text-warning{color: var(--warning) !important;}
.text-danger{color: var(--danger) !important;}
.text-success{color: var(--success) !important;}
.text-info{color: var(--info) !important;}
.text-tan{color: var(--tan) !important;}
.text-dark{color: var(--dark) !important;}

.text-100{color: var(--gray-100) !important; }
.text-200{color: var(--gray-200) !important; }
.text-300{color: var(--gray-300) !important; }
.text-400{color: var(--gray-400) !important; }
.text-500{color: var(--gray-500) !important; }
.text-600{color: var(--gray-600) !important; }
.text-700{color: var(--gray-700) !important; }
.text-800{color: var(--gray-800) !important; }
.text-900{color: var(--gray-900) !important; }

.text-truncate{overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; }
.text-truncate br{display: none; }

.text-center{text-align: center; justify-content: center; }

/* font */
.font-nanum {font-family: var(--nanum); }


/* display */
.d-flex{display: flex !important; }
.flex-1{flex: 1  !important; }

.flex_box{display: flex; gap: 20px; }
.flex_box.fill>*{flex: 1}

/* btn */
.btn_box{display: flex; align-items: center; gap: 4px}
.btn_box.center{justify-content: center; }
.btn_box.sticky{position: sticky; bottom: 0; left: 50%; margin-top: 40px; padding-bottom: 20px;}


.btn{display: flex;align-items: center;justify-content: center;gap: .5rem;min-width: 100px;height: 44px;padding: 12px 20px;border: 1px solid transparent;border-radius: 8px;background: var(--primary,#4C1D95);color: #fff;font-size: 1rem;font-weight: 500;line-height: 1;text-decoration: none;cursor: pointer;transition: background .2s,border-color .2s,color .2s,opacity .2s;}
.btn:hover{opacity: .9;}
.btn:active{transform: translateY(1px);}
.btn:focus-visible{outline: 2px solid var(--primary,#4C1D95);outline-offset: 2px;}
.btn:disabled,.btn.disabled{opacity: .5;pointer-events: none;cursor: default;}

.btn.primary-subtle{background: var(--primary-subtle); color: var(--primary); }
.btn.secondary{background: var(--secondary); }
.btn.secondary-subtle{background: var(--secondary-subtle); color: var(--secondary); }
.btn.dark{background: var(--dark); color: #fff; }
.btn.dark-subtle{background: var(--dark-subtle); color: var(--dark); }
.btn.info{background: var(--info); color: #fff; }
.btn.info-subtle{background: var(--info-subtle); color: var(--info); }
.btn-warning{background: var(--warning); color: #fff; }
.btn.warning-subtle{background: var(--warning-subtle); color: var(--warning); }
.btn.danger{background: var(--danger); color: #fff; }
.btn.danger-subtle{background: var(--danger-subtle); color: var(--danger); }
.btn-tan{background: var(--tan); color: #fff; }
.btn.tan-subtle{background: var(--tan-subtle); color: var(--tan); }
.btn.success{background: var(--success); color: #fff; }
.btn.secondary-subtle{background: var(--secondary-subtle); color: var(--secondary)}

.btn.outline{background: #fff;border-color: var(--primary,#4C1D95);color: var(--primary,#4C1D95);}
.btn.outline.secondary{background: #fff; border-color: var(--secondary); color: var(--secondary); }
.btn.outline.dark{background: #fff; border-color: var(--dark); color: var(--dark); }
.btn.outline.info{background: #fff; border-color: var(--info); color: var(--info); }
.btn.outline.btn-warning{background: #fff; border-color: var(--btn-warning); color: var(--btn-warning); }
.btn.outline.danger{background: #fff; border-color: var(--danger); color: var(--danger); }
.btn.outline.btn-tan{background: #fff; border-color: var(--btn-tan); color: var(--btn-tan); }
.btn.outline.success{background: #fff; border-color: var(--success); color: var(--success); }
.btn.outline.dark{background: #fff; border-color: var(--dark); color: var(--dark); }

.btn:disabled,
.btn.disabled {pointer-events: none; opacity: 0.65; }


.btn-primary{background-color: var(--primary); color: #ffffff; border-color: var(--primary); }
.btn-secondary{background-color: var(--secondary); color: #ffffff; border-color: var(--secondary); }
.btn-dark{background-color: var(--dark); color: #ffffff; border-color: var(--dark); }
.btn-info{background-color: var(--info); color: #ffffff; border-color: var(--info); }
.btn-warning{background-color: var(--warning); color: #ffffff; border-color: var(--warning); }
.btn-danger{background-color: var(--danger); color: #ffffff; border-color: var(--danger); }
.btn-tan{background-color: var(--tan); color: #ffffff; border-color: var(--tan); }
.btn-success{background-color: var(--success); color: #ffffff; border-color: var(--success); }


.btn-primary-subtle{background-color: var(--primary-subtle); color: var(--primary); border-color: transparent; }
.btn-secondary-subtle{background-color: var(--secondary-subtle); color: var(--secondary); border-color: transparent; }
.btn-dark-subtle{background-color: var(--dark-subtle); color: var(--dark); border-color: transparent; }
.btn-info-subtle{background-color: var(--info-subtle); color: var(--info); border-color: transparent; }
.btn-warning-subtle{background-color: var(--warning-subtle); color: var(--warning); border-color: transparent; }
.btn-danger-subtle{background-color: var(--danger-subtle); color: var(--danger); border-color: transparent; }
.btn-tan-subtle{background-color: var(--tan-subtle); color: var(--tan); border-color: transparent; }
.btn-success-subtle{background-color: var(--success-subtle); color: var(--success); border-color: transparent; }


.btn-outline{background: #fff; border-color: var(--border-color); color: var(--dark)}
.btn-outline-primary{background-color: #ffffff; border-color: var(--primary); color: var(--primary); }
.btn-outline-secondary{background-color: #ffffff; border-color: var(--secondary); color: var(--secondary); }
.btn-outline-dark{background-color: #ffffff; border-color: var(--dark); color: var(--dark); }
.btn-outline-info{background-color: #ffffff; border-color: var(--info); color: var(--info); }
.btn-outline-warning{background-color: #ffffff; border-color: var(--warning); color: var(--warning); }
.btn-outline-danger{background-color: #ffffff; border-color: var(--danger); color: var(--danger); }
.btn-outline-tan{background-color: #ffffff; border-color: var(--tan); color: var(--tan); }
.btn-outline-success{background-color: #ffffff; border-color: var(--success); color: var(--success); }


.btn.sm,
.btn-sm{min-width: 72px;height: 32px;padding: 8px 14px;font-size: 15px;border-radius: 6px;gap: .375rem;}
.btn.lg,
.btn-lg{min-width: 120px;height: 52px;padding: 14px 24px;font-size: 22px;border-radius: 10px;gap: .625rem;}

.btn.rounded{border-radius: 50rem !important; }

.btn-close{position:relative;display:block;width:40px;height:40px;cursor:pointer; }
.btn-close::before,
.btn-close::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:2px;background:#333;border-radius:1px;transition:background .2s;}
.btn-close::before{transform:translate(-50%,-50%) rotate(45deg);}
.btn-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.btn-close:hover::before,
.btn-close:hover::after{background:#000;}
.btn-close.white::before,
.btn-close.white::after{background: #fff}
.btn-close.white:hover::before,
.btn-close.white:hover::after{background:#fff;}

.back_btn{display: flex; align-items: center; justify-content: center;  width: 40px; height: 40px; flex-shrink: 0; }
.back_btn svg{width: 24px; height: auto; }

.img_box{position: relative; }
.del_btn_box{position: absolute; top: 0; right: 0; margin: 8px; z-index: 1;}
.del_btn_box .btn{padding: 0; width: 40px; height: 40px; min-width: auto;}
.del_btn_box svg{color: #fff; width: 20px; height: auto; }

/* rounded */
.rounded{border-radius: 20px !important;}
.rounded-1  {border-radius: calc(var(--spacer) * 0.25) !important; }
.rounded-2  {border-radius: calc(var(--spacer) * 0.5) !important; }
.rounded-3  {border-radius: calc(var(--spacer) * 1) !important; }
.rounded-4  {border-radius: calc(var(--spacer) * 1.5) !important; }

/* card */
.card{background: #fff; border-radius: 20px; border: 1px solid var(--border-color); }
.card>.card-header{padding: 28px 32px; border-radius: 20px 20px 0 0; }
.card>.card-body{padding: 28px 32px;}
.card>.card-body:first-child{border-top-left-radius: 20px; border-top-right-radius: 20px;}
.card>.card-body:last-child{border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.card>.card-footer{padding: 28px 32px; border-radius: 0 0 20px 20px; }
.card.p-0{padding: 0;}
.card.px-0{padding-left: 0; padding-right: 0;}
.card.py-0{padding-top: 0; padding-bottom: 0;}
.card{margin-bottom: 24px;}
.card:last-child{margin-bottom: 0px;}

.card-body>.empty_box{padding: 0;}
.empty_box{display: flex; align-items: center; justify-content: center; gap: 12px; flex-direction: column; padding: 28px 0; }
.empty_box::before{content: ''; display: inline-block; width: 40px; height: 40px; background-color: var(--gray-600); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");   -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center;  mask-position: center; -webkit-mask-size: contain;
  mask-size: contain; vertical-align: middle;}

.card-admin{background: #fff; border-radius: 20px; border: 1px solid var(--border-color); overflow: hidden;}
.card-admin .card-header{padding: 28px 32px;}
.card-admin .card-body{padding: 28px 32px;}
.card-admin .card-footer{padding: 28px 32px;}


/* input */
.input_tit_box{margin-bottom: 12px;}
.input_tit_box .input_tit{margin-bottom: 0;}
.input_tit{margin-bottom: 12px; font-weight: 500}

.input_box{display: flex; gap: 4px; }
.input_box.inline{flex-wrap: wrap; }
.input_box+.input_box{margin-top: 4px;}
.input_box .btn{flex-shrink: 0; }
.input_box select{width: fit-content; padding-right: 40px;}
textarea,
select,
input{border: 1px solid var(--border-color); padding: 8px 12px; width: 100%; border-radius: 8px}
input.readonly{background: #f2f2f2; color: #999; cursor: default; }
select:focus,
input[type='text']:focus{border-color: var(--primary); }

.radio,
.checkbox{display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9375rem; color: #333;  }
.radio input[type="radio"],
.checkbox input[type="checkbox"]{appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid #bbb; background: #fff; cursor: pointer; position: relative; transition: all 0.15s ease; flex-shrink: 0; padding: 0;}
.radio input[type="radio"]{border-radius: 50%; }
.radio input[type="radio"]:checked{border-color: var(--primary); }
.radio input[type="radio"]:checked::after{content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; background: var(--primary); border-radius: 50%; transform: translate(-50%,
-50%); }
.checkbox input[type="checkbox"]{border-radius: 4px; }
.checkbox input[type="checkbox"]:checked{background: var(--primary); border-color: var(--primary); }
.checkbox input[type="checkbox"]:checked::after{content: ""; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.radio label,
.checkbox label{cursor: pointer; user-select: none; }
/* 기존 코드는 그대로 유지 */

/* type2: 박스(보더)로 감싸지는 형태 */
.radio.type2,
.checkbox.type2 {
}

.radio.type2:has(input:checked),
.checkbox.type2:has(input:checked) {
}

.radio.type2 input,
.checkbox.type2 input{display: none; }
.radio.type2 input+label,
.checkbox.type2 input+label{padding: 6px 16px; border: 1px solid var(--border-color); border-radius: 50rem; min-width: 75px; text-align: center; }
.radio.type2 input:checked+label,
.checkbox.type2 input:checked+label{border-color : var(--primary); background: var(--primary-subtle); color: var(--primary); font-weight: bold; }



textarea{height: 100px; resize: vertical; min-height: 100px;}
select{appearance: none; position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 20px 20px;}
select::after {content: ""; display: block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; position: absolute; top: 50%; right: 0; margin-right: 8px; transform: translateY(-50%); }


/* list */
ul.list_outside{padding-left: 20px; }
ul.list_outside li{list-style: outside; }

/* data-list
.list.type2{display: grid; gap: 0; text-align: center; }
.list.type2>li>*{padding: 20px 0; }
.list.type2>li{}
.list.type2>li>*{display: flex; align-items: center; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; color: #555}
.list.type2>li>*>*:not(.view_detail_list){padding: 0 12px; flex:1 }
.list.type2>li .num{width: 75px; flex-shrink: 0; flex: none; text-align: center}
.list.type2>li .name{}
.list.type2>li .count{width: 100px; flex: none; }
.list.type2>li .date{width: 120px; flex-shrink: 0; flex: none; text-align: center; color: var(--gray-600); font-size: 16px;}
.list.type2>li .sub_text{font-size: 0.875rem; }
.list.type2>li .badge{margin: 0 auto; }
.list.type2 .view_detail_list{flex: auto; width: 100%; text-align: left; }
.list.type2 .list_header{font-size: 0.8125rem;}
.list.type2>li.list_body .name{color: #333; font-weight: 500}

.list.type3{display: grid; gap: 0; text-align: center; }
.list.type3>li{padding: 20px 0; }
.list.type3>li{display: flex; align-items: center; flex-wrap: wrap; }
.list.type3>li>*:not(.view_detail_list){padding: 0 8px; flex:1 }
.list.type3>li>.num{width: 75px; flex-shrink: 0; flex: none; text-align: center}
.list.type3>li .sub_text{font-size: 0.875rem;}
.list.type3>li .badge{margin: 0 auto; }
.list.type3 .view_detail_list{flex: auto; width: 100%; text-align: left; }
.list.type3 .list_header{font-size: 0.8125rem;}
 */

/* title */
.title_box{}
.title_box h5{flex: 1; }
.title_box i{font-size: 13px; font-weight: bold; letter-spacing: 2px; color: var(--primary)}
.title{font-size: 24px;}

.desc{font-size: 1rem;}
.sub_text{}



/* tab */
.tab{display: flex; overflow: auto}
.tab .tab_item{flex-shrink: 0;}
.tab.fill .tab_item{flex: 1; text-align: center}
.tab_item .tab_link{border-bottom: 2px solid var(--border-color); font-size: 1.25rem; padding: 8px 12px; color: var(--secondary)}
.tab_item.active .tab_link{border-bottom-color: var(--primary); color: var(--primary); font-weight: bold; }
.tab_list>*{display: none}
.tab_list .active{display: block}


.list_arrow_icon {position: relative; display: inline-block; width: 1em; height: 1em; vertical-align: middle; }
.list_arrow_icon::after {content: ''; position: absolute; top: 50%; left: 50%; width: 0.5em; height: 0.5em; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); }


/* badge */
.badge_box{display: flex; gap: 4px; align-items: center; }
.badge{display: block; padding: 6px 12px; border-radius: 6px; background: #fff; font-size: 0.8125rem; font-weight: normal; width: fit-content; line-height: 1;}
.badge.sm {padding: 4px 8px; border-radius: 4px; font-size: 13px }
.badge.lg {padding: 8px 16px; border-radius: 8px; font-size: 0.875rem; }

.badge.rounded{border-radius: 50rem; }
.badge.primary{background: var(--primary); color: #fff; }
.badge.primary-subtle{background: var(--primary-subtle); color: var(--primary); }
.badge.danger{background: var(--danger); color: #fff; }
.badge.danger-subtle{background: var(--danger-subtle); color: var(--danger); }
.badge.warning{background: var(--warning); color: #fff; }
.badge.warning-subtle{background: var(--warning-subtle); color: var(--warning); }
.badge.success{background: var(--success); color: #fff; }
.badge.success-subtle{background: var(--success-subtle); color: var(--success); }
.badge.secondary{background: var(--secondary); color: #fff; }
.badge.secondary-subtle{background: var(--secondary-subtle); color: var(--secondary); }
.badge.info{background: var(--info); color: #fff; }
.badge.info-subtle{background: var(--info-subtle); color: var(--info); }
.badge.tan{background: var(--tan); color: #fff; }
.badge.tan-subtle{background: var(--tan-subtle); color: var(--tan); }
.badge.dark{background: var(--dark); color: #fff; }
.badge.dark-subtle{background: var(--dark-subtle); color: var(--dark); }

/* 드랍다운 */
.dropdown{position: relative; }
.dropdown-btn::after{content: ""; display: block; width: 0; height: 0; border-left: 5px solid  transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
.dropdown-menu{position: absolute; top: 100%; left: 0; transform: translateY(4px);  border: 1px solid var(--border-color); background: #fff; border-radius: 12px; overflow: hidden; display: none; z-index: 10;}
.dropdown-menu.right{left: auto; right: 0; }
.dropdown.open .dropdown-menu{display: block; }
.dropdown.open.drop-up{bottom: 100%; transform: translateY(-4px)}
.dropdown-link{padding: 8px 12px; white-space: nowrap; font-size: 16px;}
.dropdown-link:hover{background: #f9f9f9; }

/* table */
.table_box{border: 1px solid var(--border-color); border-radius: 20px; overflow: auto; }
table{width: 100%; table-layout: fixed; }
table thead tr th,
table thead tr td{background: var(--primary-subtle); font-weight: bold; color: var(--primary); font-size: 1rem; }
table th{background: var(--secondary-subtle); font-weight: bold; color: var(--primary)}
table th,
table td{border: 1px solid var(--border-color); border-width: 0 1px 1px 0; font-size: 1rem !important; }
table th:last-child,
table td:last-child{border-right-width: 0; }
table>*:last-child tr:last-child th,
table>*:last-child tr:last-child td{border-block-width: 0;}

.icon_box{background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; }
.icon_box.primary{background: var(--primary); color: #fff; }
.icon_box.rounded{border-radius: 50%; }

/* toast */
#toast_wrap{position: fixed; top: 50%; left: 50%; transform: translateX(-50%); width: 100%; pointer-events: none; opacity: 0; }
#toast_wrap.active{animation: toast_active 2s linear forwards; }
#toast_wrap .inner{padding: 12px 20px; background: var(--primary-subtle); color: var(--primary); border-radius: 50rem; width: fit-content; box-shadow: var(--shadow); margin: 0 auto; font-size: 0.875rem;}
#toast_wrap.fail .inner{background: var(--danger-subtle); color: var(--danger); }
@keyframes toast_active {
  20%{
    bottom:20px;
    opacity: 1;
  }
  80%{
    bottom:20px;
    opacity: 1;
  }

}

/* list */
.list{display: flex; gap: 20px; }
.list>*{flex: 1; }


/* board */
.board_list{border-top: 2px solid #333; }
.board_list li{border-bottom: 1px solid var(--border-color)}
.board_list>li>*{padding: 20px 8px; display: flex; align-items: center; }
.board_list>li>*:hover{background: #f9f9f9}
.board_list li.empty>*{display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;  }
.board_list li.empty>* svg{width: 40px; height: auto; stroke-width: 1.5; min-width: auto;  color: var(--gray-600)}
.board_list>li>*>*{min-width: 120px; text-align: center; }
.board_list>.list_header{}
.board_list>.list_header>*>*{font-size: 16px; color: var(--gray-600)}
.board_list>li>* .tit_box{display: flex; gap: 12px; align-items: center; }
.board_list>li>* .num,
.board_list>li>* .view{min-width: 75px; flex-shrink: 0; text-align: center;}
.board_list>li>* .tit{flex: 1; text-align: left; }
.board_list>li>* .menu_name{max-width: 120px; }
.board_list.home>li>* .tit{font-size: 22px; }
.board_list>li>* .date{font-size: 16px; }
.board_list>li>* .badge_box{justify-content: center; }
.board_list li>* .badge.off{filter: grayscale(1) opacity(.5)}

.board_list.img li a{display: flex; gap: 12px;}
.board_list.img .img_box{width: 120px; height: 120px; flex-shrink: 0; border-radius: 8px; overflow: hidden}
.board_list.img .tit_box{display: grid; gap: 0; text-align: left; }
.board_list.img .tit_box .desc{color: var(--secondary); display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; font-size: 1rem;}
.board_list.img>li>* .date{text-align: left; color: var(--gray-600)}

.board_list.gallery{display: grid; grid-template-columns: repeat(4,1fr); gap: 40px 20px;  border-top: none; }
.board_list.gallery li{border-bottom-color: transparent; }
.board_list.gallery li a{padding: 0; flex-direction: column; align-items: flex-start; }
.board_list.gallery li a:hover{background: transparent; }
.board_list.gallery li .img_box{aspect-ratio: 4/3; overflow: hidden; margin-bottom: 20px; border-radius: 20px; }
.board_list.gallery li:hover .img_box{box-shadow: var(--shadow-lg)}
.board_list.gallery li .img_box img{width: 100%; height: 100%; object-fit: cover; }
.board_list.gallery li .tit_box{display: block; text-align: left; }
.board_list.gallery li .tit_box h5{font-size: 20px; margin-bottom: 12px; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; }
.board_list.gallery li .tit_box span{color: #999; }

.board_view  .board_view_header{display: flex; gap: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 40px; padding-bottom: 40px;}
.board_view .tit_box{display: flex; align-items: center; gap: 8px 20px; flex: 1; flex-wrap: wrap}
.board_view .tit_box h5{font-size: 28px; width: 100%; }
.board_view .name{display: flex; align-items: center; gap: 4px; color: var(--gray-800)}
.board_view .name svg{display: none; }
.board_view .date{display: flex; gap: 4px; align-items: center; color: var(--gray-600)}
.board_view .date svg{width: 16px; height: auto; }
.board_view .desc_box{margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border-color)}
.board_view .desc_box .content a{display: inline-block; text-decoration: underline; }
.board_view .img_list{display: grid; }
.board_view .img_list .modal-btn{max-width: 400px; }


.download_box{border: 1px solid var(--border-color); padding: 8px; border-radius: 8px; display: flex; align-items: center; gap: 8px; max-width: 200px; margin-left: auto; margin-bottom: 20px;}
.download_box span{text-overflow: ellipsis;overflow: hidden;; white-space: nowrap; display: block; }

.board_write_wrap .board_write_list{display: grid; gap: 32px; }
.board_write_wrap .board_write_list .tit{margin-bottom: 12px;}
.board_write_wrap .tox-tinymce{border-radius: 12px; overflow: hidden; }
.board_write_wrap .add_img_box .input_box{}
.board_write_wrap .add_img_box .btn{font-size: 16px;}

/* data-list */
.data_list{display: flex; gap: 20px; font-size: 16px;}
.data_list *{font-size: inherit !important;}
.data_list .btn{font-size: 16px;}
.data_list>*{flex: 1; }
.data_list{text-align: center; border-top: 2px solid var(--dark); }
.data_list li{}
.data_list li>*{padding: 12px 0; }
.data_list li>*{display: flex; align-items: center; gap: 4px}
.data_list li.list_header{background: var(--gray-100); border-radius: 12px 12px 0 0; overflow: hidden; }
.data_list li.list_header>*{font-size: 16px; font-weight: normal; }
.data_list li>*>*{padding: 0 12px; width: 120px; text-align: center}
.data_list li>* .tit_box{display: flex; gap: 12px; }
.data_list li>* .num,
.data_list li>* .view{width: 75px; flex-shrink: 0; }
.data_list li>* .tit{flex: 1; }
.data_list li>* .view_user{width: 150px;}
.data_list li>* .view_user .d-flex{gap: 2px; align-items: center; justify-content: center;  }
.data_list li>* .view_user .badge.off{opacity: .5; filter: grayscale(1)}
.data_list li>* .date{}
.data_list li>* .step .badge{margin: 0 auto; display: flex; align-items: center; gap: 4px; font-size: 14px;}
.data_list li.list_body>* .tit{}
.data_list li.list_body>* .date{font-size: 0.83rem; color: var(--secondary); }
.data_list li .desc{padding-bottom: 12px; display: none; }

.data_list{display: grid; gap: 0; text-align: center; }
.data_list>li>*{padding: 20px 0; }
.data_list>li{}
.data_list>li>*{display: flex; align-items: center; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; color: #555}
.data_list>li>*>*{padding: 0 12px; flex:1 }
.data_list>li .num{width: 75px; flex-shrink: 0; flex: none; text-align: center}
.data_list>li .name{}
.data_list>li .count{width: 100px; flex: none; }
.data_list>li>*>.date{width: 120px; flex-shrink: 0; flex: none; text-align: center; color: var(--gray-600); font-size: 16px;}
.data_list>li .sub_text{font-size: 0.875rem; }
.data_list>li .badge{margin: 0 auto; }
.data_list .view_detail_list{flex: auto; width: 100%; text-align: left; }
.data_list .list_header{font-size: 0.8125rem;}
.data_list>li.list_body .name{color: #333; font-weight: 500}

/* form */
/* 홈페이지 form design */
.form_wrap{margin-top: 40px;}
.form_wrap h5{font-size: 24px; margin-bottom: 24px; padding: 24px 0; border-bottom: 1px solid var(--border-color); background: #fff; color: var(--primary); position: sticky; top: 80px; left: 0; z-index: 1;}
.form_wrap .form_box{margin-top: 60px;}
.form_wrap dl{display: flex ;margin-bottom: 40px;}
.form_wrap dl:last-child{margin-bottom: 0;}
.form_wrap dt{ width: 200px; flex-shrink: 0; font-weight: bold; }
.form_wrap dt.require::after{content: "*"; color: var(--danger)}
.form_wrap dt .sub_text{font-weight: normal; }
.form_wrap dd{flex: 1; }
.form_wrap dd ul{}
.form_wrap dd ul li{margin-top: 20px;}
.form_wrap dd ul li h6{margin-bottom: 8px;}
.form_wrap dd .radio,
.form_wrap dd .checkbox{margin-right: 40px;}

/* 동행신청 */
.form_wrap .row-2,
.form_wrap>ul{display: grid; grid-template-columns: repeat(2,1fr); gap: 24px 12px}
.form_wrap>ul>li.col-2{grid-column: span 2; }
.form_wrap>ul>li .tit{margin-bottom: 8px; font-size: 1rem; }
.form_wrap>ul>li .tit .sub_text{font-weight: normal; font-size: 0.875rem;}
.form_wrap+.btn_box{margin-top: 40px;}



/* toggle */
.toggle_box{border: 1px solid var(--border-color); overflow: hidden; border-radius: 20px; margin-top: 20px;}
.toggle_box .toggle_trigger{padding: 12px 20px; position: relative; }
.toggle_box .toggle_trigger::after{content: ""; position: absolute; right: 20px; top: 50%; width: 24px; height: 24px;  transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 20px auto; transition: transform 0.2s ease;}
.toggle_box .toggle_item{padding: 20px; border-top: 1px solid var(--border-color); display: none; }


/* pagination */
.pagination {display: flex; align-items: center; justify-content: center; gap: 4px; }
.pagination li .page-link{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--secondary); overflow: hidden; }
.pagination li .page-link:hover{color: var(--dark); }
.pagination li.active .page-link{background: var(--primary-subtle); color: var(--primary); }
.pagination li:first-child .page-link,
.pagination li:last-child .page-link{opacity: 1; background: var(--secondary-subtle); color: var(--secondary);}
.pagination li.disabled .page-link{ pointer-events: none; opacity: .4; }


/* modal */
body.modal-bg::after{content:""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0, 0, 0, 0.5); z-index: 999; animation: modal_bg_show .2s linear forwards; pointer-events: none; }
@keyframes modal_bg_show{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }

}
.modal{background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-color); position: fixed; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 40px)); z-index: -1; max-width: 500px; transition: all .3s, z-index 0s; opacity: 0; visibility: hidden; width: 100%; max-height: 96dvh; overflow: auto; overscroll-behavior: contain; }
.modal.lg{max-width: 768px;}
.modal.show{ opacity: 1; visibility: visible; transform: translate(-50%, -50%); z-index: 1000;}
.modal.show.shaked{animation: modal_shaked .4s linear forwards; }
@keyframes modal_shaked{
  30% {margin-top: -3px; }
  50% {margin-top: 2px; }
  75% {margin-top: -1px; }
  100% {margin-top: 0; }
}
.modal.border{}
.modal .modal-header{padding: 20px; border-bottom: 1px solid var(--border-color); font-size: 18px; font-weight: bold;}
.modal .modal-body{padding: 20px; }
.modal .modal-footer{padding: 20px; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; gap: 4px; }
.modal .modal-close{position: absolute; top: 12px; right: 12px; z-index: 1;}

.modal .tit_box{margin-bottom: 32px;}
.modal .tit{font-size: 20px; }
.modal .sub_tit{font-size: 16px; color: var(--secondary)}
.modal .btn_box{justify-content: center; margin-top: 40px;}



/* ul dot */
ul.dot li{position: relative; }
ul.dot li::before{content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin-right: 6px; transform: translateY(-50%); flex-shrink: 0; }
ul.dot.secondary li::before{background: var(--secondary); }
ul.dot.info li::before{background: var(--info); }
ul.dot.warning li::before{background: var(--warning); }
ul.dot.danger li::before{background: var(--danger); }
ul.dot.success li::before{background: var(--success); }

.dot:not(ul){display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary);}
.dot:not(ul).secondary{background: var(--secondary); }
.dot:not(ul).success{background: var(--success); }
.dot:not(ul).danger{background: var(--danger); }
.dot:not(ul).warning{background: var(--warning); }

/* crop */
#cropModal{position: fixed; inset: 0; background: #000; z-index: 9999; display: none; flex-direction: column;}
#cropModal.active{display: flex;}
.crop-header{height: 50px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1);}
.crop-header .top_box{display: flex; max-width: 768px; background: transparent; width: 100%; margin: 0 auto; align-items: center; }
.crop-body .cropper-container{opacity: 0;}
.crop-body.is-ready .cropper-container{opacity: 1;}
.crop-header .top_box span{flex: 1; line-height: 50px; text-align: center;}
.crop-body{flex: 1; min-height: 0; overflow: hidden; position: relative;}
.crop-body img{display: block; max-width: 100%;}
.crop-rotate{flex: none; display: flex; justify-content: center; gap: 8px; padding: 8px; border-top: 1px solid rgba(255,255,255,0.1);}
.crop-rotate button{padding: 6px 16px; border: 1px solid #444; background: #111; color: #fff; cursor: pointer;}
body.cropper-open{overflow: hidden;}

/* image img 이미지*/
.img_list{display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.img_list .img_box{width: 160px; height: 90px; border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; aspect-ratio: 4/3}
.img_list .img_box img{width: 100%; height: 100%; object-fit: contain; }
img.error{width: 24px !important; height: auto !important; display: none;  }
.profile img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile img+span{display: none}
.profile img.error+span{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; place-items: center; background: var(--primary-subtle); color: var(--primary); font-weight: bold; border-radius: 50%; }

#view_upload_list{display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#view_upload_list .img_box{width: 160px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--border-color); position: relative; overflow: hidden; }
#view_upload_list .img_box .btn-close{position: absolute; top: 0; right: 0; background: var(--secondary-subtle); border-radius: 50%; padding: 4px;  background-clip: content-box;}

/* swiper */
.swiper-button-next,
.swiper-button-prev{width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--dark); }



/* icon */
.down_arrow{}
.down_arrow::after{content: ""; display: block; width: 24px; aspect-ratio: 24 / 24;  background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-chevron-down%20preview-icon%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-chevron-down%20preview-icon%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.link_arrow::after{content: ""; display: block; width: 24px; aspect-ratio: 24 / 24;  background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-move-up-right%20preview-icon%22%3E%3Cpath%20d%3D%22M13%205H19V11%22%2F%3E%3Cpath%20d%3D%22M19%205L5%2019%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-move-up-right%20preview-icon%22%3E%3Cpath%20d%3D%22M13%205H19V11%22%2F%3E%3Cpath%20d%3D%22M19%205L5%2019%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

@media (width <= 1024px) {
  .radio.type2 input+label,
  .checkbox.type2 input+label{font-size: 14px;}
}

@media (width <= 768px) {
  /* title */
  .title{font-size: 20px;}

  .card .card-header{padding: 20px;}
  .card .card-body{padding: 20px;}
  .card .card-footer{padding: 20px;}

  .form_wrap>ul{grid-template-columns: 1fr; }
  .form_wrap>ul>li.col-2{grid-column: span 1;}

  /* pagination */
  .pagination li.page-item.active ~ li.page-item ~ li.page-item ~ li.page-item{display: none; }
  .pagination li.page-item:has(~ li.page-item ~ li.page-item ~ li.page-item.active) {display: none; }
  .pagination li:first-child,
  .pagination li:last-child{display: block !important;}


  /* modal */
  .modal{width: calc(100vw - 40px)}

  /* list */
  .board_list li.list_header{display: none; }
  .board_list li>*{gap: 4px 12px; flex-wrap: wrap; }
  .board_list.img li>*{flex-wrap: nowrap; }
  .board_list li>*>*{padding: 0; min-width: auto; order: 3; flex-shrink: 0}
  .board_list li>* .num{display: none; }
  .board_list li>* .tit{order: 1; }
  .board_list li>* .step{width: 100%; }
  .board_list li>* .badge{font-size: 12px;}

  .board_list li>* .view_user{width: 100%; }
  .board_list li>* .view_user .badge::first-letter{}
  .board_list li>* .date{color: var(--gray-600); order: 2; font-size: 14px; margin-left:
  auto; }
  .board_list li.list_body>* .tit span{padding-left: 0; font-size: 16px;}
  .board_list li.list_body>* .date{width: auto; padding-right: 0;}

  .board_list>li>* .badge_box{justify-content: flex-start; }

  .board_list.img li a{align-items: flex-start}
  .board_list.img .img_box{width: 80px; height: 80px; }
  .board_list.img .tit_box{flex: 1; }
  .board_list.img .tit_box .desc{order: 2}

  .board_list.gallery{grid-template-columns: 1fr; }

  .board_list.qna li>*{flex-wrap: wrap; position: relative; }
  .board_list.qna li>*>*{flex: none; }
  .board_list.qna li>*>*.tit{flex:1; width: auto; font-weight: bold; }
  .board_list.qna li>*>*.name{position: absolute; top: 50%; left: 0; color: var(--gray-600); font-size: 15px; margin-top: 4px;}
  .board_list.qna li>*>*.step .badge{font-size: 12px; white-space: nowrap; margin-right: 0;  margin-left: auto; }


  .board_list.faq li>*{flex-wrap: wrap; position: relative; }
  .board_list.faq li>*>*{flex: none; }
  .board_list.faq li>*>*.tit{flex:1; width: auto; font-weight: bold; }
  .board_list.faq li>*>*.view_user{width: 100%; }
  .board_list.faq li>*>*.view_user .d-flex{justify-content: flex-start}

  .board_view .board_view_header{gap: 0; margin-bottom: 28px; padding-bottom: 28px;}
  .board_view .tit_box{}
  .board_view .tit_box h5{font-size: 20px;}
  .board_view .tit_box .sub_text{font-size: 16px;}
  .board_view .tit_box .back_btn{display: flex; justify-content: flex-start; }
  .board_view .name{font-size: 15px ; flex: 1; }
  .board_view .date{font-size: 15px;}
  .board_view .img_list{}
  .board_view .img_list .img_box{width: 100%; height: auto; }


  /* data_list */
  .data_list_box{border-width: 0; background: transparent; padding: 0; }
  .data_list_box>.card-body{padding: 0;}
  .data_list li.list_header{display: none; }
  .data_list{text-align: left; border: none; }
  .data_list>li{background: #fff; border-radius: 20px; padding: 0; margin-bottom: 20px;}
  .data_list>li:last-child{margin-bottom: 0;}
  .data_list>li>*{position: relative; padding: 20px; border: none; gap: 0; flex-direction: column; }
  .data_list>li>*>*{text-align: left; padding: 0; width: 100%; }
  .data_list>li>* .tit{font-weight: bold !important; }
  .data_list>li>* .num{display: none; }
  .data_list>li>* .point_box{width: 100%; background: var(--primary-bg); padding: 8px 12px; border-radius: 8px; font-weight: bold; margin: 20px 0 8px; color: var(--dark)}

  .data_list li>* .step{position: absolute; top: 20px; right: 20px; }
  .data_list li>* .step .badge_box{justify-content: flex-end; }
  .data_list li>* .step .badge{margin: 0; }
  .data_list li>*>.date{position: absolute; bottom: 20px; left: 20px; text-align: left; }



  /* image img 이미지*/
  #view_upload_list{display: grid; grid-template-columns: repeat(2,1fr); }

  .form_wrap dt{margin-bottom: 12px;}
  .form_wrap h5{top: 60px; padding: 16px 0; font-size: 20px;}
  .form_wrap .form_box{margin-top: 32px;}


  /* swiper */
  .swiper-button-prev::after,
  .swiper-button-next::after{font-size: 20px;}
}