/* 공통 콘텐츠 */
.btn-wrap { align-items: center; gap: 16px; display: flex; }
.btn-wrap.border-top { padding-top: 24px; border-top: 2px solid #333; }
.btn { border-width: 1px; border-radius: 4px; border-style: solid; line-height: 46px; text-align: center; font-size: 16px; font-weight: bold; color: #fff; padding: 0 24px; }
.btn.darkgray { background-color: #484848; border-color: #484848; }
.btn.black { background-color: #202020; border-color: #202020; }
.btn.white { background-color: #fff; border-color: #202020; color: #202020; }
.btn.gray { background-color: #707070; border-color: #707070; color: #fff; }
.btn.orange { background-color: #ff9900; border-color: #ff9900; color: #fff; }

.btn-s { line-height: 40px; font-size: 14px; }
.btn-m { min-width: 160px; line-height: 50px; padding: 0 32px; font-size: 18px; }
.tab-btn { background-color: #ffffff; border-color: #e4e4e4; color: #aeaeae; }
.tab-btn.active { background-color: #484848; border-color: #484848; color: #ffffff; }

.red { color: #ff5151; }
.orange { color: #ff9900; }
.yellow { color: #f9f100; }
.gray { color: #aeaeae; }

.fs34 { font-size: 34px; }
.fs28 { font-size: 28px; }
.fs24 { font-size: 24px; }
.fs22 { font-size: 22px; }
.fs20 { font-size: 20px; }
.fs18 { font-size: 18px; }
.fs16 { font-size: 16px; }
.fs14 { font-size: 14px; }
.fs12 { font-size: 12px; }
.fs10 { font-size: 10px; }

.fw800 { font-weight: 800; }
.fw600 { font-weight: 600; }
.fw500 { font-weight: 500; }
.fw300 { font-weight: 300; }

.gap80 { gap: 80px; }
.gap40 { gap: 40px; }
.gap32 { gap: 32px; }
.gap24 { gap: 24px; }
.gap16 { gap: 16px; }
.gap8 { gap: 8px; }
.gap4 { gap: 4px; }

.sp-bt { justify-content: space-between; }
.fl-en { justify-content: flex-end; }
.fl-st { justify-content: flex-start; }
.al-ce { align-items: center; }
.al-st { align-items: flex-start; }
.al-en { align-items: flex-end; }
.al-bl { align-items: baseline; }

.txt-center { text-align: center; }
.txt-right { text-align: right; }
.underline { text-decoration: underline; }
.overline { text-decoration: line-through; }

/* 로그인페이지 */
.login-page { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
.login-page .login-wrap { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; }
.login-page .login-logo-wrap { width: 100%; display: flex; flex-flow: column; align-items: center; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid #c2c2c2; margin-bottom: 32px; }

.login-page .login-logo-wrap .logo { width: 306px; height: 112px; object-fit: contain; object-position: center; }
.login-page .login-txt { text-align: center; font-size: 16px; font-weight: 300; color: #a8a8a8; }
.login-page .login-input-wrap { width: 100%; display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
.login-page .login-input-item { display: flex; flex-flow: column; gap: 8px; }
.login-page .login-input-item .item-default { font-size: 14px; font-weight: bold; color: #484848; }
.login-page .login-input { width: 100%; height: 48px; border: solid 1px #dededf; border-radius: 4px; padding: 0 10px; font-size: 16px; font-weight: 500; }
.login-page .login-input::placeholder { color: #e4e4e4; }
.login-page .login-input:focus { border: 1px solid #ff9900; box-shadow: 0 0 5px 0 rgba(255, 153, 0, 0.18); }
.login-page .login-btn { width: 100%; height: 56px; background-color: #ff9900; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; color: #fff; border-radius: 4px; }


/* 관리자 페이지 */
.admin-container { width: 100%; min-width: 1760px; min-height: 100vh; }
.admin-wrap { margin-left: 240px; padding: 64px 80px 120px; }
@media screen and (max-width: 1820px) {
	.admin-wrap { padding-left: 40px; padding-right: 40px; }
}
.admin-wrap .title-wrap { justify-content: space-between; flex-direction: column; margin-bottom: 16px; gap: 24px; }
.admin-wrap .title-wrap.row-group { align-items: flex-start; gap: 24px; }
.admin-wrap .title-wrap .main-title { font-size: 40px; }
.admin-wrap .title-wrap .main-title .sub-txt { font-size: 16px; font-weight: normal; }
.admin-wrap .title-wrap .main-title .guide-txt { display: block; line-height: 1.5; font-size: 18px; font-weight: 600; margin-top: 16px; color: #dd7575; }

.admin-wrap .main-title-wrap { margin-bottom: 24px; gap: 24px }
.admin-wrap .main-title-wrap.border { padding-bottom: 24px; border-bottom: 1px solid #333; }
.admin-wrap .main-title-wrap .main-title { font-size: 32px; }

.search-wrap { overflow: hidden; gap: 8px; }
.search-select { width: 150px; height: 48px; border: solid 1px #e4e4e4; font-size: 16px; padding: 0 16px; border-radius: 4px; outline: 0; color: #666; }
.search-input { width: 250px; border: solid 1px #e4e4e4; border-right: 0; height: 48px; padding: 0 16px; border-radius: 4px; font-size: 16px; }
.search-input::placeholder { color: rgba(0, 0, 0, 0.3); }
.search-btn { display: block; width: 48px; height: 48px; text-align: center; line-height: 52px; background: #484848; cursor: pointer; transition: .2s; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.search-btn i { color: #fff; font-size: 20px; line-height: 48px; }
.search-btn:hover { background: #606060; }

.null-txt { color: #a3a3a3; font-weight: bold; text-align: center; padding: 120px 0; width: 100%; }

/* 관리자 페이지 - 보드 (이미지) */
.board-wrap { gap: 24px; flex-flow: wrap; }
.board-item { width: calc( ( 100% - 24px * 3 ) / 4 ); min-width: 240px; border: 1px solid #e9e9e9; position: relative; }
.board-item .img-box { width: 100%; position: relative; padding-top: 100%; }
.board-item .img-box img { position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; object-fit: cover; object-position: center; }
.board-item .txt-box { padding: 24px; gap: 16px; position: relative; }
.board-item .txt-box .title { font-size: 17px; line-height: 1.5; }
.board-item .txt-box .date { font-size: 14px; color: #a4a4a4; align-items: center; justify-content: space-between; }
.board-item .label { display: block; position: absolute; top: 0; left: 0; width: 76px; height: 36px; text-align: center; line-height: 36px; font-size: 16px; color: #fff; background: #df1616; }
.board-item .label.use { background: #ff9900; }
.board-item .label.disuse { background: #7d7d7d; }
.sub-btn-wrap .sub-btn { font-size: 14px; position: relative; }
.sub-btn-wrap .sub-btn:not(:last-child)::after { content: ''; display: block; position: absolute; width: 1px; height: 12px; background: #aeaeae; right: -9px; top: 50%; transform: translate(-50%, -50%); }

.align-btn-wrap { display: flex; gap: 4px; }
.align-btn { width: 32px; height: 32px; border: 1px solid #e9e9e9; border-radius: 50%; }
.board-item .align-btn-wrap { position: absolute; right: 0; bottom: 0; gap: 0; }
.board-item .align-btn { border-radius: 0; }

.board-item .form-label { position: absolute; left: 16px; top: 16px; z-index: 1; }
.board-item .img-box .btn { width: 30px; height: 30px; border-radius: 0; position: absolute; bottom: 0; right: 0; z-index: 1; padding: 0; line-height: 24px; font-size: 24px; }

/* 관리자 페이지 - 폼 */
.form-container { padding-bottom: 40px; border-bottom: 1px solid #333; margin-bottom: 40px; }
.form-title { font-size: 24px; font-weight: bold; }
.form-sub-title { font-size: 24px; padding: 16px 24px; background: #f5f5f5; border-radius: 4px; margin-bottom: 24px; }
.form-wrap { gap: 32px; margin-bottom: 40px; }
.form-container .form-wrap { margin-bottom: 0; }
.form-wrap.col-group { flex-flow: wrap; }
.form-list { gap: 32px; }
.form-list.col-group { flex-flow: wrap; width: 100%; }
.form-list.border { padding-bottom: 24px; border-bottom: 1px solid #e4e4e4; margin-bottom: 24px; }
.form-list.per2 .form-item { width: calc( 50% - 16px ); max-width: 560px; }
.form-item { gap: 16px; min-width: 320px; position: relative; width: 100%; }
.form-item .item-default { font-size: 18px; font-weight: bold; color: #333; }
.form-item .item-default .red { color: #df1616; font-weight: normal; }
.form-item.col-group .item-default { width: 80px; }
.form-item .item-user { gap: 16px; align-items: center; flex-flow: wrap; position: relative; }
.form-item .sticker-txt { font-size: 20px; font-weight: bold; position: absolute; bottom: 4px; right: -8px; transform: translateX(100%); }
.form-item .guide-txt { font-size: 16px; color: #a4a4a4; display: inline-block; line-height: 1.5; }
.form-item .item-default .guide-txt { padding-left: 16px; }
.form-input, .form-select { width: 100%; max-width: 560px; height: 48px; border: 1px solid #e4e4e4; border-radius: 4px; padding: 0 16px; font-size: 16px; background-color: #fff; }
.form-date { padding-right: 30px; cursor: pointer; background-image: url(../images/icon-calendar.svg); background-repeat: no-repeat; background-size: 18px; background-position: right 8px center; }
.form-input.disable { background: #f5f5f5; }
.form-input.half { width: 200px; }
.form-input.quarter { width: 130px; }
.form-select { outline: 0; }
.form-textarea { width: 100%; max-width: 560px; height: 104px; border: 1px solid #e4e4e4; border-radius: 4px; padding: 16px; font-size: 16px; outline: 0;}
.form-textarea.wide { max-width: unset; width: 100%; height: 480px; }
.form-textarea.disable { height: auto; background: #f5f5f5; border: 0; white-space: pre-line; }
.form-btn-wrap { gap: 16px; }
.form-submit-btn { width: 168px; height: 52px; background: #ff9900; text-align: center; line-height: 52px; border-radius: 4px; color: #fff; font-size: 16px; font-weight: bold; transition: .2s; }
.form-submit-btn.center{ margin: 0 auto; }
.form-submit-btn:hover { background: #0d72d1; }
.form-prev-btn { width: 168px; height: 52px; background: #666; text-align: center; line-height: 52px; border-radius: 4px; color: #fff; font-size: 16px; font-weight: bold; }

/* 컬러피커 */
.form-color { width: 100%; max-width: 200px; height: 48px; border: 1px solid #e4e4e4; border-radius: 4px; padding: 0 16px; padding-left: 48px; font-size: 16px; background-color: #fff; }
.clr-field button { width: 32px; height: 32px; transform: translate(0); left: 8px; top: 8px; border-radius: 4px; }

.form-label-wrap { flex-flow: wrap; gap: 16px 32px; }

/* form - 체크박스 */
.checked-item { align-items: center; gap: 8px; }
.checked-item .icon { width: 24px; height: 24px; border: 1px solid #9999a6; border-radius: 2px; display: flex; align-items: center; justify-content: center; background: #fff; }
.checked-item .icon i { color: #fff; font-weight: bold; font-size: 14px; line-height: 12px; }
.checked-item .txt { font-size: 16px; font-weight:bold; line-height: 1.5; }
.form-checkbox:checked + .checked-item .icon { border: 1px solid #ff9900; background: #ff9900; }

/* form - 라디오 */
.form-radio + .checked-item .icon { width: 24px; height: 24px; border: 1px solid #aeaeae; background: #fff; border-radius: 50%; display: block; position: relative; }
.form-radio + .checked-item .icon::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #ff9900; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }
.form-radio:checked + .checked-item { color: #ff9900; }
.form-radio:checked + .checked-item .icon { border: 1px solid #ff9900; }
.form-radio:checked + .checked-item .icon::after { display: block; }

/* form- 스위치 */
.switch-item { display: flex; align-items: center; gap: 16px; }
.switch-item .title { color: #aeaeae; font-size: 16px; font-weight: 600; }
.switch-item .title.check { display: none; }
.switch { width: 64px; height: 32px; border-radius: 16px; background: #aeaeae; position: relative; transition: .2s; }
.switch-core { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #fff; left: 4px; top: 4px; text-align: center; transition: .2s; }
.switch-core i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #aeaeae; line-height: 24px; }
.switch-core i.xi-check { display: none; color: #ff9900; }
.form-switch input:checked + .switch-item .title { color: #ff9900; }
.form-switch input:checked + .switch-item .title.check { display: block; }
.form-switch input:checked + .switch-item .title.uncheck { display: none; }
.form-switch input:checked + .switch-item .switch { background: #ff9900; }
.form-switch input:checked + .switch-item .switch .switch-core { transform: translateX(32px); }
.form-switch input:checked + .switch-item .switch .switch-core i.xi-check { display: block; }
.form-switch input:checked + .switch-item .switch .switch-core i.xi-close { display: none; }

/* 관리자 페이지 - 파일 */
.file-upload-btn { display: inline-block; width: 154px; height: 52px; background-color: #666; text-align: center; line-height: 52px; font-size: 16px; font-weight: bold; color: #fff; border-radius: 4px; transition: all.2s; }
.file-upload-btn:hover { background: #555; }
.file-upload-wrap .guide-txt { font-size: 16px; color: #a4a4a4; display: inline-block; padding-left: 16px; }
.file-preview { margin-top: 16px; width: 560px; height: 52px; background: #f5f5f5; border-radius: 4px; padding: 0 16px; padding-right: 48px; border-radius: 4px; position: relative;  }
.file-preview .file-name { line-height: 52px; font-size: 16px; color: #ff9900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-del-btn { font-size: 18px; color: #ff9900; position: absolute; top: 50%; transform: translateY(-50%); right: 16px; cursor: pointer; }

/* 관리자 페이지 - 파일(이미지 여러장/미리보기) */
.file-preview-wrap { margin-top: 24px; gap: 16px; flex-flow: wrap; width: 100%; }
.file-preview-wrap .file-preview { width: auto; height: auto; padding: 12px; margin: 0; }
.file-preview-wrap .file-preview .file-del-btn { top: 0; right: 0; transform: none; }
.file-preview-wrap .file-preview .file-name { line-height: 1.5; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-preview-img { display: block; width: 200px; height: 200px; object-fit: contain; object-position: center; }

/* 관리자 페이지 - 파일(이미지 여러장/미리보기) : "대표이미지" 라벨 */
.img-preview-label { font-size: 12px; color: #fff; width: 36px; height: 18px; line-height: 18px; text-align: center; background: #ff9900; position: absolute; top: 0; left: 0; display: none; }
.img-preview:first-child .img-preview-label { display: block; }

/* 관리자 페이지 - 테이블 */
.admin-table-wrap { border-top: 1px solid #333; border-bottom: 1px solid #333; overflow: auto; white-space: nowrap; user-select: none; }
.admin-table-wrap::-webkit-scrollbar { display: none; }
.admin-table { min-width: 100%; width: max-content; border-collapse: separate; border-spacing: 0; }
.admin-table thead { position: sticky; top: 0; background-color: #fff; }
.admin-wrap> .admin-table-wrap thead { border-top-width: 2px; }
.admin-table th { border-bottom: 1px solid #333; padding: 16px; font-size: 16px; color: #333; font-weight: bold; text-align: left; word-break: break-all; }
/* .admin-table th:not(:first-child) { border-left: 1px solid #e4e4e4; } */
.admin-table td { border-bottom: 1px solid #e4e4e4; padding: 8px 16px; font-size: 16px; text-align: left; word-break: break-all; }
/* .admin-table td:not(:first-child) { border-left: 1px solid #e4e4e4; } */
.admin-table tr.disable td { opacity: .2; }
.admin-table th.center, .admin-table td.center { text-align: center;}

.admin-table tr.light-orange td { background: #ecf7ff; }
.admin-table tr.orange td { background: #ff9900; color: #fff; }

.modal-wrap .admin-table-wrap { max-height: 50vh; }
.modal-wrap .modal-scroll-wrap .admin-table-wrap { max-height: 360px; }

.admin-table-wrap.fixed { white-space: wrap; }
.admin-table-wrap.fixed .admin-table { table-layout: fixed; width: 100%; }

/* 관리자 페이지 - 이미지 여러장 업로드 */
.img-upload-wrap { width: 100%; gap: 16px; flex-flow: wrap; align-items: flex-start; }
.img-upload-btn { display: flex; flex-flow: column; justify-content: center; gap: 8px; width: 180px; height: 180px; background-color: #f5f5f5; text-align: center; font-size: 16px; font-weight: bold; color: #a7a7a7; border: dashed 1px #a7a7a7; border-radius: 4px; }
.img-upload-wrap .xi-plus { font-size: 32px; color: #a7a7a7; }
.img-preview-wrap { gap: 16px; flex-flow: wrap; max-width: calc( 100% - 180px - 16px ); }
.img-preview { width: 180px; height: 180px; border: 1px solid #e4e4e4; padding: 8px; position: relative; border-radius: 4px; }
.img-preview-label { font-size: 14px; color: #fff; width: 56px; height: 24px; line-height: 24px; text-align: center; background: #ff9900; position: absolute; top: 0; left: 0; display: none; }
.img-preview:first-child .img-preview-label { display: block; }
.img-preview-img { height: 100%; object-fit: contain; object-position: center; }
.img-preview-wrap .xi-close { font-size: 18px; color: #ff9900; position: absolute; top: 0; right: 0; cursor: pointer; background: #fff; }

/* 에디터 */
.form-item.editor { width: auto; gap: 0; }
.form-item.editor .item-default { margin-bottom: 16px; }

/* 상품 검색 */
.area-search-wrap { width: 560px; position: relative; cursor: pointer; }
.area-search-wrap .search-input { line-height: 48px; border-radius: 0; border-right: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; width: calc( 100% - 52px ); }
.area-search-wrap .search-input:focus { border-color: #222; }
.area-search-wrap .xi-search { display: inline-block; width: 48px; height: 48px; background: #707070; text-align: center; line-height: 48px; color: #fff; font-size: 24px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.area-search-list { position: absolute; width: 560px; background: #fff; top: 52px; border: 2px solid #d8d8d8; border-radius: 4px; z-index: 9; display: flex; flex-flow: column; max-height: 420px; overflow: auto; }
.area-search-item { gap: 8px; font-size: 16px; font-weight: 300; cursor: pointer; padding: 16px; }
.area-search-item:hover { background: #f5f5f5; }
.area-search-item i { font-size: 18px; color: #aeaeae; }

/* modal */
.modal-container { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 999; background: rgba(0, 0, 0, 0.6); }
.modal-wrap { background: #fff; width: 100%; max-width: 1024px; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 16px; position: absolute; padding: 40px 32px; }
.modal-wrap.w480 { max-width: 480px; }
.modal-wrap::-webkit-scrollbar { display: none; }
.close-btn { position: absolute; font-size: 32px; cursor: pointer; top: 24px; right: 24px; z-index: 9; }
.modal-scroll-container .modal-scroll-wrap { width: 100%; }
.modal-scroll-wrap { max-height: 60vh; overflow: auto; }
.modal-title-wrap { margin-bottom: 24px; }
.modal-title-wrap.border { padding-bottom: 16px; border-bottom: 1px solid #c4c4c4; }
.modal-title-wrap.center { text-align: center; }
.modal-title { font-size: 24px; font-weight: bold; }
.modal-sub-title { font-size: 16px; line-height: 1.5; margin-top: 12px; color: #707070; }

.modal-footer { display: flex; align-items: center; margin-top: 24px; gap: 8px; justify-content: center; }
.modal-footer .btn { width: 100%; }
.modal-footer-btn { width: 100%; height: 64px; border-radius: 4px; text-align: center; line-height: 62px; font-size: 18px; font-weight: bold; color: #202020; background: #fff; border: 1px solid #202020; padding: 0 24px; }
.modal-footer-btn.close-btn { position: static; font-size: 16px; background: #aeaeae; color: #fff; border: 1px solid #aeaeae; }
.modal-footer-btn.submit-btn { background: #308929; color: #fff; border: 1px solid #308929; }
.modal-footer-btn.submit-btn.disable { background: #aeaeae; border: 1px solid #aeaeae; }
.modal-footer-btn.cancel-btn { background: #707070; color: #fff; border-color: #707070; }
.modal-footer-btn.write-btn { color: #308929; border-color: #308929; }

.modal-alert { border: 2px solid #e4e4e4; height: auto; width: calc( 100% - 80px ); padding: 40px 32px 32px; max-width: 320px; text-align: center; border-radius: 16px; left: 50%; right: unset; top: 50%; bottom: unset; transform: translate(-50%, -50%); }
.modal-alert .icon { display: block; margin: 0 auto; font-size: 24px; margin-bottom: 16px; }
.modal-alert .modal-title-wrap { margin-bottom: 24px; text-align: center; }
.modal-alert .modal-title-wrap .icon { margin-bottom: 8px; }
.modal-alert .modal-title { font-size: 20px; }
.modal-alert-txt { font-size: 16px; line-height: 1.5; }
.modal-alert .modal-footer-btn { width: 100%; height: 48px; line-height: 46px; font-size: 14px; }
.modal-alert .close-btn { font-size: 24px; top: 16px; right: 16px; }

.modal-alert.warning { max-width: 480px; }
.modal-alert.warning .icon { font-size: 40px; margin-bottom: 24px; }
.modal-alert.warning .modal-title-wrap { padding-bottom: 32px; margin-bottom: 40px; }
.modal-alert.warning .modal-title { font-size: 32px; }
.modal-alert.warning .modal-alert-txt { font-size: 18px; }
.modal-alert.warning .modal-footer { margin-top: 40px; }

.img-container { width: 100%; position: relative; display: flex;}
.img-container img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover;object-position: center; }

/* 대시보드 */
.dashboard-section { border: 1px solid #e4e4e4; border-radius: 16px; padding: 40px; }
.dashboard-item { width: 100%; border: 1px solid #e4e4e4; border-radius: 16px; padding: 32px 54px; }
.dashboard-item .item-title { font-size: 20px; margin-bottom: 16px; }
.dashboard-item .item-txt { font-size: 40px; font-weight: bold; }
.dashboard-item .item-sub-txt { font-size: 24px; font-weight: bold; }
.dashboard-section-title-wrap .search-wrap { align-items: center; }

.dashboard-section .chart-wrap { height: 500px; }

/* 매인배너 관리 */
.img_modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99; }
.img_modal .img-wrap { width: 100%; height: 100%; max-width: 80vw; max-height: 80vh; }
.img_modal .img-wrap img { height: 100%; object-fit: contain; object-position: center; }
.img_modal .close-btn { top: 0; right: 0; width: 40px; height: 40px; background: #666; color: #fff; font-size: 24px; text-align: center; line-height: 40px; }

/* 회원 관리 */
.sns-item { width: 32px; height: 32px; border-radius: 4px; }
.sns-item.kakao { background-image: url(../images/icon_kakao.png); background-size: cover; }
.sns-item.naver { background-image: url(../images/icon_naver.png); background-size: cover; }
.sns-item.google { background-image: url(../images/icon_google.png); background-size: cover; border: 1px solid #e4e4e4; }

.member-detail-wrap { border-top: 1px solid #333; border-bottom: 1px solid #333; }
.member-detail-list:not(:last-child) { border-bottom: 1px solid #e4e4e4; }
.member-detail-list.per3 .member-detail-item:not(.wide) { width: calc( 100% / 3 ); }
.member-detail-list.per4 .member-detail-item:not(.wide) { width: calc( 100% / 4 ); }
.member-detail-list.per3 .member-detail-item.wide { width: calc( (100% / 3) * 2 ); }
.member-detail-list.row-group .member-detail-item:not(:last-child) { border-bottom: 1px solid #e4e4e4; }
.member-detail-item { display: flex; width: 100%; }
.member-detail-item.bg-light-gray { background: #f5f5f5; }
.member-detail-wrap> .member-detail-item { border-bottom: 1px solid #e4e4e4; }
.member-detail-item .item-default { width: 160px; padding: 16px 0; padding-left: 24px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.member-detail-item .item-user { width: calc( 100% - 160px ); padding: 16px 0; padding-left: 24px; font-size: 16px; line-height: 1.5; }
.member-detail-item .item-user *:not(.subscript-label) { line-height: 1.5; }

.subscript-label { width: fit-content; height: 32px; line-height: 32px; border-radius: 16px; padding: 0 16px; font-size: 16px; color: #fff; background: #707070; }
.subscript-label.default { background: #e4e4e4; color: #202020; }
.subscript-label.active { background: #ff9900; }

.form-item .sns-item { width: 48px; height: 48px; border-radius: 4px; }

.member-profile-wrap { align-items: center; border-bottom: 1px solid #aeaeae; }
.member-profile-wrap .user-profile { width: 280px; padding: 32px 0; }
.member-profile-wrap .member-detail-wrap { width: calc( 100% - 280px ); border: 0; border-left: 1px solid #aeaeae; padding: 0 32px; }
.user-profile { text-align: center; align-items: center; }
.user-profile-img { display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center; }

.profile-img-upload-wrap { display: block; width: fit-content; position: relative; cursor: pointer; }
.profile-img-upload-wrap .profile-img { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; }
.profile-img-upload-wrap .profile-img img { height: 100%; object-fit: cover; object-position: center; }
.profile-img-upload-wrap .icon { position: absolute; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; background: #aeaeae; color: #fff; font-size: 20px; bottom: 0; right: 0; }


/* 회원 관리 - 회원 상세 */
.order-state { width: fit-content; line-height: 28px; border-radius: 6px; padding: 0 12px; font-size: 16px; color: #fff; background: #707070; }
.state-circle { display: block; width: 16px; height: 16px; border-radius: 50%; }
.state_1 { background: #ff5151; }
.state_2 { background: #f9ae00; }
.state_3 { background: #4fc700; }
.state_4 { background: #ff9900; }
.state_5 { background: #7d06f5; }
.state_6 { background: #ff54f9; }

.file-download-wrap { margin-bottom: 16px; }
.file-download-item { height: 52px; align-items: center; padding: 0 16px; background: #eff8ff; border-radius: 4px; gap: 8px; }
.file-download-item .icon { font-size: 19px; color: #a4a4a4; }
.file-download-item .file-title { font-size: 16px; width: calc( 100% - 36px ); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 팝업 관리 */
.board-item .txt-box .title { width: calc( 100% - 80px ); text-align: left; }
.board-item .txt-box .link { width: 80px; text-align: right; }

/* 메타데이터 관리 */
.meta-txt { width: 50vw; white-space: wrap; }

/* 기사 등록 */
#meta_data .modal-wrap { max-width: 1200px; }
.meta-data-wrap { border-top: 1px solid #202020; border-bottom: 1px solid #202020; }
.meta-data-title { font-size: 24px; font-weight: 600; padding: 16px 0; border-bottom: 1px solid #202020; }
.meta-data-group:not(:first-child) .meta-data-title { border-top: 1px solid #202020; }
.meta-data-item:not(:last-child) { border-bottom: 1px solid #e4e4e4; }
.meta-data-toggle-title { padding: 16px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.meta-data-item.active .meta-data-toggle-title .icon { transform: rotate(180deg); }
.meta-data-toggle-content { display: none; padding-top: 8px; padding-bottom: 24px; }
.meta-data-toggle-content .form-label-wrap { gap: 16px 0; }
.meta-data-toggle-content .form-label-wrap label { width: calc( 100% / 6 ); }
.meta-data-item.active .meta-data-toggle-content { display: block; }

/* 기사 미리보기 */
.post-txt-wrap { gap: 16px; }
.post-txt-wrap .txt-group { gap: 8px; align-items: baseline; flex-flow: wrap; }
.post-txt-wrap .name { font-size: 16px; font-weight: 500; color: #1fabf3; }
.post-txt-wrap .title { font-size: 24px; font-weight: bold; line-height: 1.33; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: calc( (24px * 1.33) * 2 );}
.post-txt-wrap:hover .title { text-decoration: underline; }
.post-txt-wrap .txt { font-size: 16px; line-height: 1.5; color: #aeaeae; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: calc( (16px * 1.5) * 2 ); }
.post-txt-wrap .sub-txt { font-size: 12px; font-weight: 300; color: #aeaeae; }
.post-txt-wrap .sub-txt-wrap> * { position: relative; padding-right: 8px; }
.post-txt-wrap .sub-txt-wrap> *:not(:last-child)::after { content: ''; display: block; position: absolute; width: 1px; height: 12px; background-color: #aeaeae; right: 0; top: 50%; transform:translateX(50%) translateY(-50%); }
.post-txt-wrap .sub-txt-group .sub-txt:not(:last-child) { position: relative; padding-right: 8px; }
.post-txt-wrap .sub-txt-group .sub-txt:not(:last-child)::after { content: ''; display: block; position: absolute; width: 3px; height: 3px; border-radius: 50%; background-color: #aeaeae; right: 0; top: 50%; transform:translateX(50%) translateY(-50%); }

.post-detail-wrap { padding-bottom: 40px; border-bottom: 1px solid #222; margin-bottom: 40px; }
.post-detail .subpage-container { padding-bottom: 56px; border-bottom: 1px solid #222; }
.post-detail-title-wrap { position: relative; padding-bottom: 40px; border-bottom: 1px solid #e4e4e4; gap: 16px; }
.post-detail-title-wrap .name { font-size: 18px; font-weight: 500; color: #1fabf3; }
.post-detail-title-wrap .title { font-size: 40px; height: auto; -webkit-line-clamp: unset; margin-bottom: 16px; font-weight: bold; line-height: 1.33; }
.post-detail-title-wrap:hover .title { text-decoration: none;  }
.post-detail-title-wrap .sub-txt { font-size: 14px; color: #222; }
.post-detail-txt-wrap { white-space: pre-line; padding: 40px 0 56px; }
.post-detail-txt-wrap * { white-space: pre-line; }
.post-detail-txt-wrap img { width: auto; max-width: 100%; }

.keyword-title { font-size: 20px; font-weight: bold; margin-bottom: 16px; }
.keyword-wrap .tag-list .tag { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 18px; border: 1px solid #1fabf3; color: #1fabf3; transition: .2s; cursor: pointer; }
.keyword-wrap .tag-list .tag:hover { background: #1fabf3; color: #fff; transition: .2s; }
.keyword-wrap .tag-list .tag .del-btn { font-size: 14px; color: #707070; }
.keyword-wrap .tag-list .tag:hover .del-btn { color: #fff; }

/* 메인 기사 */
.article-board-wrap .board-item { width: 100%; }
.article-board-wrap .board-item .img-box { width: 320px; padding-top: 210px; }
.article-board-wrap .board-item .txt-box { width: calc( 100% - 320px ); }
.article-board-wrap .board-item .sub-btn-wrap { position: absolute; top: 24px; right: 24px; }

/* TOP 10 관리 */
.article-top10-wrap .board-item .img-box { padding-top: 65%; }
.article-top10-wrap .board-item .txt-box .title { width: 100%; }
.article-top10-wrap .board-item .num { width: 40px; line-height: 40px; text-align: center; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18px; font-weight: bold; position: absolute; left: 16px; top: 0; z-index: 9; }

/* 회원 관리 - 회원 상세 */
.user-content-wrap { max-width: 520px; align-items: center; }
.user-content-wrap .img-container { width: 40px; padding-top: 40px; overflow: hidden; }
.user-content-wrap .img-container.w72 { width: 72px; padding-top: 72px; }
.user-content-wrap .img-container + .txt { width: calc( 100% - 56px ); }
.user-content-wrap .img-container.w72 + .txt { width: calc( 100% - 88px ); }
.user-content-wrap .txt { width: 100%; white-space: wrap; font-size: 16px; line-height: 1.5; }
.user-content-txt { max-width: 480px; overflow: hidden; text-overflow: ellipsis; }

/* 불편 신고 상세 */
.inquiry-txt { line-height: 1.5; padding: 40px 16px; }

/* 태그 */
.form-enter-wrap { position: relative; width: 100%; max-width: 560px; }
.form-enter-wrap .form-input { padding-right: 48px; }
.form-enter-wrap .icon { width: 48px; height: 48px; line-height: 48px; text-align: center; font-size: 16px; color: #707070; position: absolute; right: 0; top: 0; cursor: pointer; }
.tag-list { display: flex; flex-flow: wrap; gap: 8px; }
.tag-item { display: flex; gap: 8px; align-items: center; min-height: 36px; border-radius: 4px; border: 1px solid #e4e4e4; padding: 8px; }
.tag-item .txt { white-space: nowrap; font-weight: 500; }
.tag-item .del-btn { width: 16px; text-align: right; cursor: pointer; }
.tag-item .color { width: 24px; height: 24px; border-radius: 2px; }
.tag-item .img { width: 40px; height: 40px; }
.tag-item .img img { height: 100%; object-fit: cover; object-position: center; }

/* 상품 관리 */
.table-input { padding-right: 32px; }
.table { width: max-content; border-collapse: separate; }
.table th { text-align: left; font-size: 18px; font-weight: bold; }
.table th, .table td { padding-top: 8px; padding-bottom: 8px; padding-right: 8px; }

.label-wrap { display: flex; flex-flow: wrap; gap: 4px; }
.label-wrap .label { line-height: 28px; padding: 0 8px; border-radius: 2px;; font-size: 16px; font-weight: 500; color: #fff; }

/* 태그 관리 */
.admin-table .tag-item { width: fit-content; border: 0; padding: 0; }