@charset "utf-8";

:root {
    --header-height: 0px;
    
    /* main color */
    --color-main: #6366F1;
    --color-main-light: #818CF8;
    --color-main-dark: #4F46E5;
    --rgb-color-main: 99 102 241;
    --color-main-30: #6366F14D;
    --color-main-10: #6366F11A;
    --color-sub: #262626;

    /* base color */
    --color-white: #fff;
    --rgb-white: 255 255 255;
    --color-white-30: #ffffff4D;
    --color-black: #000;
    --rgb-black: 0 0 0;

    /* state color */
    --color-red: #EF4444;
    --color-green: #34C759;
    --color-mint: #14CF9E;

    /* calendar */
    --calendar-blue: #1677F8;
    --calendar-lightblue: #F2F7FF;
    --calendar-red: #9AC4FF;
    --calendar-lightred: #FDECEC;
    --calendar-border: #E0524A;

    /* grayscale */
    --grayscale11: #0A0A0A;
    --grayscale10: #171717;
    --grayscale9: #262626;
    --grayscale8: #404040;
    --grayscale7: #525252;
    --grayscale6: #737373;
    --grayscale5: #A3A3A3;
    --grayscale4: #D4D4D4;
    --grayscale3: #E5E5E5;
    --grayscale2: #F5F5F5;
    --grayscale1: #FAFAFA;

    /* font size */
    --fs-72: clamp(42px, 5vw, 72px);
    --fs-64: clamp(38px, 4.44vw, 64px);
    --fs-56: clamp(40px, 3.89vw, 56px);
    --fs-50: clamp(36px, 3.47vw, 50px);
    --fs-48: clamp(34px, 3.33vw, 48px);
    --fs-44: clamp(32px, 3.05vw, 44px);
    --fs-40: clamp(30px, 2.78vw, 40px);
    --fs-36: clamp(28px, 2.5vw, 36px);
    --fs-32: clamp(26px, 2.22vw, 32px);
    --fs-30: clamp(24px, 2.08vw, 30px);
    --fs-28: clamp(22px, 1.94vw, 28px);
    --fs-26: clamp(21px, 1.8vw, 26px);
    --fs-24: clamp(20px, 1.67vw, 24px);
    --fs-22: clamp(19px, 1.53vw, 22px);
    --fs-20: clamp(18px, 1.39vw, 20px);
    --fs-18: clamp(16px, 1.25vw, 18px);
    --fs-16: clamp(15px, 1.11vw, 16px);
    --fs-15: clamp(14px, 1.04vw, 15px);
    --fs-14: clamp(13px, 0.97vw, 14px);
    --fs-13: clamp(12px, 0.9vw, 13px);
    --fs-12: clamp(11px, 0.83vw, 12px);
    --fs-11: clamp(10px, 0.76vw, 11px);
    --fs-10: clamp(9px, 0.69vw, 10px);

    --space-60: clamp(48px, 4.17vw, 60px);
    --space-80: clamp(56px, 5.56vw, 80px);
    --space-100: clamp(64px, 6.94vw, 100px);
    --space-120: clamp(80px, 8.33vw, 120px);
    --space-140: clamp(96px, 9.72vw, 140px);
    --space-160: clamp(112px, 11.11vw, 160px);
    --space-180: clamp(128px, 12.5vw, 180px);
    --space-200: clamp(144px, 13.89vw, 200px);

    /* status */
    --state-open: #16B978;
    --state-open-bg: #E4F8EE;

    --state-busy: #FD9F4B;
    --state-busy-bg: #FFF7E8;

    --state-soldout: var(--grayscale7);
    --state-soldout-bg: var(--grayscale2);

    /* shadow */
    --box-shadow:0px 0px 30px #0000000D;
}

/* 텍스트 */
.hero-tit {word-break: keep-all; font-size:var(--fs-64); font-weight: 700; line-height:1.2; color:var(--grayscale11);}
.section-tit {word-break: keep-all; font-size:var(--fs-36); font-weight: 600; line-height:1.3; color:var(--grayscale11);}
.section-tit2 {font-size:var(--fs-32); font-weight: 600; line-height:1.4; color:var(--grayscale11);}
.card-tit,
.hero-sub {font-size:var(--fs-24); font-weight: 500; line-height:1.5; color:var(--grayscale9);}
.table-txt {font-size:var(--fs-20); font-weight: 500; line-height:1.5; color:var(--grayscale9);}
.section-sub,
.body-txt {font-size:var(--fs-18); font-weight: 400; line-height:1.5; color:var(--grayscale7);}
.sub-txt {font-size:var(--fs-16); font-weight: 400; line-height:1.5; color:var(--grayscale6);}
.card-txt {font-size:var(--fs-14); font-weight: 300; line-height:1.5; color:var(--grayscale8);}
.badge-txt {font-size:var(--fs-14); font-weight: 300; line-height:1.5; color:var(--grayscale6);}
.body-large {font-size:var(--fs-18); font-weight: 400;}
.body-medium {font-size:var(--fs-16); font-weight: 400;}
.body-small {font-size:var(--fs-14); font-weight: 300;}
.calendar-large {font-size: var(--fs-13); font-weight: 600;}
.calendar-medium {font-size: var(--fs-13); font-weight: 600;}
.desc {font-size: var(--fs-16); color: var(--grayscale6);}

.blind {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.w100 {width: 100%;}

.label-list {display: flex; align-items: center; column-gap: 6px;}
.label {width: fit-content; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; padding: 4px 10px; border-radius: 999px; display: flex; align-items: center; column-gap: 5px; font-size: var(--fs-14); line-height: 1.5; font-weight: 300; border: 1px solid transparent;}
.label.available {background-color: var(--state-open-bg); color: var(--state-open);}
.label.available::before {content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background-color: var(--state-open);}
.label.closed {background-color: var(--state-soldout-bg); color: var(--state-soldout);}
.label.closed::before {content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background-color: var(--state-soldout);}
.label.gray {background-color: #EEF0F5; color: #5C6274;}

.btn-list {display: flex; align-items: center; gap: 8px;}
.btn-row {display: flex; flex-direction: column; align-items: center; gap: var(--fs-20);}
.btn-row > * {width: 100%;}

.round-btn {justify-content: center; width: fit-content; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; padding: 8px var(--fs-20); border-radius: 999px; display: flex; align-items: center; column-gap: 8px; font-size: var(--fs-16); line-height: 1.5; font-weight: 500; border: 1px solid transparent;}
.square-btn {justify-content: center; width: fit-content; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; padding: var(--fs-10) var(--fs-20); border-radius: 10px; display: flex; align-items: center; column-gap: 8px; font-size: var(--fs-16); line-height: 1.5; font-weight: 500; border: 1px solid transparent;}
.square-btn.small {padding-block: 8px;}
.ico-btn {transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent;}
.ico-btn.disabled img,
.ico-btn:disabled img {opacity: 0.3;}
.round-btn.w100 ,
.square-btn.w100 {justify-content: center;}

.main-btn {background-color: var(--color-main); color: var(--color-white);}
.gray-btn {background-color: var(--grayscale3); color: var(--grayscale10);}
.white-btn {background-color: var(--color-white); color: var(--grayscale11);}
.blue-btn {background-color: var(--calendar-blue); color: var(--color-white);}
.red-line-btn {background-color: #FCEBEC; border-color: #E9A6AB; color: #C43D45;}
.main-line-btn {background-color: var(--color-white); border-color: var(--color-main-light); color: var(--color-main);}
.gray-line-btn {background-color: var(--color-white); border-color: var(--grayscale3); color: var(--color-grayscale10);}
.white-line-btn {border-color: var(--color-white); color: var(--color-white);}

.main-btn:hover:not(.disabled):not(:disabled) {background-color: #4F52D6;}
.gray-btn:hover:not(.disabled):not(:disabled) {background-color: #C4C4C4;}
.white-btn:hover:not(.disabled):not(:disabled) {background-color: rgb(var(--rgb-white) / 70%);}
.blue-btn:hover:not(.disabled):not(:disabled) {background-color: #0D68D8;}
.red-line-btn:hover:not(.disabled):not(:disabled) {background-color: #FFF5F5; border-color: #E9A6AB;}
.main-line-btn:hover:not(.disabled):not(:disabled) {background-color: #F5F5FF; border-color: var(--color-main);}
.gray-line-btn:hover:not(.disabled):not(:disabled) {background-color: var(--grayscale1); border-color: var(--grayscale4);}
.white-line-btn:hover:not(.disabled):not(:disabled) {background-color: rgb(var(--rgb-white) / 10%);}

.round-btn.disabled,
.square-btn.disabled,
.ico-btn.disabled,
.round-btn:disabled,
.square-btn:disabled,
.ico-btn:disabled {cursor: default; pointer-events: none; background-color: var(--state-soldout-bg); color: var(--grayscale5); border-color: transparent;}

.ico-btn:disabled img {opacity: 0.3;}

.txt-btn {background-color: transparent; transition: opacity 0.2s; display: flex; align-items: center; column-gap: 8px; font-size: var(--fs-18); font-weight: 500; line-height: 1.5;}
.txt-btn.white {color: var(--color-white);}
.txt-btn.black {color: var(--color-black);}
.txt-btn.main {color: var(--color-main);}
.txt-btn:hover {opacity: 0.7;}
.txt-btn.readonly,
.txt-btn:disabled {cursor: default; pointer-events: none;}

/* 데스크박스 */
.desc-box {border: 1px solid transparent; color: var(--grayscale8); padding: var(--fs-20); border-radius: 8px; display: flex; align-items: center; column-gap: var(--fs-16);}
.desc-box img {flex-shrink: 0;}
.desc-box.flex {display: flex; align-items: center; justify-content: space-between;}
.desc-box.red {background-color: #FCF3F3;}
.desc-box.red p {color: #8B2A20;}
.desc-box.blue {background-color: var(--grayscale2);}
.desc-box.blue p {color: var(--color-main-light);}
.desc-box.gray {background-color: var(--grayscale3);}

.desc-box:has(ul) {flex-direction: column; align-items: flex-start; row-gap: var(--fs-20);}
.desc-box strong {display: block; font-weight: 500;}
.desc-box .list-tit {padding-top: var(--fs-20); margin-bottom: var(--fs-20); color: var(--grayscale9);}
.desc-box li + li {margin-top: var(--fs-12);}
.desc-box li {display: flex; align-items: flex-start; column-gap: var(--fs-12); color: var(--grayscale8);}
.desc-box li:not(.list-tit)::before {margin-block: calc(var(--fs-18) / 2); flex-shrink: 0; content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: var(--grayscale8);}


.desc-box:has(dl) {flex-direction: column; align-items: flex-start; row-gap: var(--fs-20);}
.desc-box strong {display: block; font-weight: 500;}
.desc-box dl {width: 100%; display: flex; flex-direction: column; row-gap: var(--fs-12);}
.desc-box dl div {display: flex; align-items: center; justify-content: space-between;}
.desc-box dl dt {color: var(--grayscale8);}
.desc-box dl dd {color: var(--color-main);}

/* 커스텀체크 */
.custom-chk-list,
.custom-radio-list {display: flex; flex-wrap: wrap; gap: 10px;}
.custom-chk {position: relative; display: flex; align-items: center; gap: 7px; font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color: var(--grayscale7);}
.custom-chk input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.custom-chk label {padding: 6px 12px 6px 8px !important; border-radius: 99px; border: 1px solid var(--grayscale3); cursor: pointer; display: flex; align-items: center; column-gap: var(--fs-12);}
.custom-chk label span {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--grayscale3); border-radius: 50%; background-color: var(--color-white); transition: all 0.2s ease;}
.custom-chk label span::before {content: '✓'; font-size: var(--fs-12); font-weight: 700; line-height: 1; color: var(--color-white);}
.custom-chk label em {display: flex; align-items: center; column-gap: 8px; font-style: normal; font-size: var(--fs-16); line-height: 1.65; color: var(--grayscale9);}
.custom-chk.required label em::after {content: '*'; color: var(--color-main); word-break: keep-all;}
.custom-chk.optional label em::after {content: '(선택)'; color: var(--grayscale7); word-break: keep-all;}
.custom-chk input[type="checkbox"]:checked + label span {border-color: var(--color-main); background-color: var(--color-main);}
.custom-chk input[type="checkbox"]:focus-visible + label span {outline: 2px solid var(--color-main-dark); outline-offset: 2px;}
.custom-chk:hover input[type="checkbox"]:not(:checked) + label span {border-color: var(--color-main-dark); background-color: var(--color-main-dark);}
.custom-chk input[type="checkbox"]:checked + label {border-color: var(--color-main); color: var(--grayscale10);}

/* 커스텀라디오 */
.custom-radio {position: relative; display: flex; align-items: center; gap: 7px; font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color: var(--grayscale7);}
.custom-radio input[type="radio"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.custom-radio label {padding: 6px 12px 6px 8px !important; border-radius: 99px; border: 1px solid var(--grayscale3); cursor: pointer; display: flex; align-items: center; column-gap: var(--fs-12);}
.custom-radio label span {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--grayscale3); border-radius: 50%; background-color: var(--color-white); transition: all 0.2s ease;}
.custom-radio label span::before {transition: background-color 0.2s; content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-white);}
.custom-radio label em {display: flex; align-items: center; column-gap: 8px; font-style: normal; font-size: var(--fs-16); line-height: 1.65; color: var(--grayscale9);}
.custom-radio input[type="radio"]:checked + label span {border-color: var(--color-main); background-color: var(--color-white);}
.custom-radio input[type="radio"]:checked + label span::before {background-color: var(--color-main);}
.custom-radio input[type="radio"]:focus-visible + label span {outline: 2px solid var(--color-main-dark); outline-offset: 2px;}
/* .custom-radio:hover input[type="radio"]:not(:checked) + label span {border-color: var(--color-main-dark); background-color: var(--color-main-dark);} */
.custom-radio:hover input[type="radio"]:not(:checked) + label span::before {background-color: var(--grayscale3);}
.custom-radio input[type="radio"]:checked + label {border-color: var(--color-main); color: var(--grayscale10);}

.custom-radio.square label {transition: background-color 0.2s; border-radius: 6px; background-color: transparent;}

/* 커스텀 토글 */
.custom-toggle-list {width: 100%; display: flex; flex-direction: column;}
.custom-toggle-list .custom-toggle { padding-block: var(--fs-10);}
.custom-toggle-list .custom-toggle + .custom-toggle {margin-top: var(--fs-10); padding-top: var(--fs-10); border-top: 1px solid var(--grayscale3);}
.custom-toggle {position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; column-gap: var(--fs-20);}
.custom-toggle input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.custom-toggle .toggle-content {min-width: 0; display: flex; flex-direction: column; row-gap: 2px;}
.custom-toggle .toggle-title {font-size: var(--fs-16); font-weight: 400; line-height: 1.5; color: var(--grayscale7);}
.custom-toggle .toggle-title:has(+.toggle-desc) {color: var(--grayscale11);}
.custom-toggle .toggle-desc {font-size: var(--fs-14); line-height: 1.5; color: var(--grayscale6); word-break: keep-all;}
.custom-toggle label {cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center;}
.custom-toggle label .toggle-track {position: relative; display: block; width: 46px; height: 26px; border-radius: 999px; background-color: var(--grayscale3); transition: background-color 0.2s ease;}
.custom-toggle label .toggle-track::before {content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--color-white); box-shadow: var(--box-shadow); transition: transform 0.2s ease;}
.custom-toggle input[type="checkbox"]:checked + label .toggle-track {background-color: var(--color-mint);}
.custom-toggle input[type="checkbox"]:checked + label .toggle-track::before {transform: translateX(20px);}
.custom-toggle input[type="checkbox"]:focus-visible + label .toggle-track {outline: 2px solid var(--color-mint); outline-offset: 2px;}
.custom-toggle input[type="checkbox"]:disabled + label {cursor: default; opacity: 0.5;}

/* 인풋 */
form, fieldset {width: 100%;}
fieldset {margin: 0; padding: 0; border: 0;}
form {display: flex; flex-direction: column; row-gap: var(--space-60);}
.form-block {display: flex; flex-direction: column; row-gap: var(--fs-40);}
.form-block + .form-block {padding-top: var(--space-60); border-top: 1px solid var(--grayscale3);}
.form-tit {display: flex; align-items: center; column-gap: var(--fs-20); color: var(--color-main);}
.form-tit h3 {flex-shrink: 0;}
.input-list {display: flex; flex-direction: column; row-gap: var(--fs-20);}
.input-list > * {width: 100%;}
.input-wrap {width: 100%; display: flex; flex-wrap: wrap; gap: var(--fs-20);}
.input-wrap > * {width: calc(50% - var(--fs-20) / 2);}
.input-wrap > .w30 {width: calc((100% - var(--fs-20) * 2) / 3);}
.input-item-label {display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px;}
.input-item-label > .custom-select-box,
.input-item-label > .custom-input {width: 100%;}
.input-item-label label,
.input-item-label .label {display: flex; align-items: center; column-gap: 6px; padding: 0; font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color: var(--grayscale9);}
.input-item-label label.required::after,
.input-item-label .label.required::after {content: '*'; color: #D7193F;}
.input-item-label .hidden-label {opacity: 0;}
.input-item-label.row {display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; column-gap: var(--fs-20); row-gap: 0;}
.input-item-label.row > .input-content {min-width: 0;}
.input-item-label.row > .input-content input {width: 100%;}
.input-item-btn,
.input-item-email {width: 100%; display: flex; align-items: center; column-gap: 6px;}
.input-item-btn .custom-input {width: auto; flex: 1;}
.input-item-email span {width: var(--fs-16); flex-shrink: 0; text-align: center;}
.input-item-email .custom-input,
.input-item-email .custom-select-box {width: calc((100% - var(--fs-16) - 12px) / 3);}
.custom-input,
.custom-select-box select,
.custom-textarea {padding: 9.5px 10px; border: 1px solid var(--grayscale3); background-color: var(--color-white); font-size: var(--fs-16); line-height: 1.6; letter-spacing: -0.2px; color: var(--grayscale9); transition: border-color 0.2s ease, background-color 0.2s ease;}
.custom-input,
.custom-select-box select,
.custom-input-btn {height: calc(var(--fs-22) * 2); padding-block: 0; border-radius: 8px; flex-shrink: 0; white-space: nowrap;}
.custom-textarea {width: 100%; height: 180px; resize: none; border-radius: 8px;}
.custom-input::placeholder,
.custom-textarea::placeholder {font-size: var(--fs-16); line-height: 1.6; letter-spacing: -0.2px; color: var(--grayscale5);}
.custom-select-box {position: relative;}
.custom-select-box select {width: 100%; padding-right: calc(10px + var(--fs-24)); cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.custom-select-box::after {content: ''; position: absolute; top: 50%; right: 10px; width: var(--fs-24); height: var(--fs-24); transform: translateY(-50%); background: var(--color-white) url(/img/select-arrow.svg) no-repeat center; pointer-events: none;}
.custom-input:hover,
.custom-select-box:hover select,
.custom-textarea:hover {border-color: var(--state-soldout-bg);}
.custom-input:focus,
.custom-select-box select:focus,
.custom-textarea:focus {border-color: var(--color-main-dark); outline: none;}
.custom-input.error,
.custom-select-box.error select,
.custom-textarea.error {border-color: #FF383C;}
.custom-input:read-only {background-color: var(--grayscale2); pointer-events: none;}
.custom-input:disabled,
.custom-select-box select:disabled,
.custom-textarea:disabled {background-color: var(--grayscale3); cursor: default;}
.input-desc {font-size: var(--fs-15); line-height: 1.6; color: var(--grayscale7);}
.input-desc.error {display: flex; align-items: center; column-gap: 6px; color: #FF383C;}
.input-desc.error::before {content: ''; display: block; width: 12px; height: 12px; flex-shrink: 0; background: url('/img/error-ico.svg') no-repeat center / contain;}
.desc-box.input-desc {margin-top: 10px; background-color: var(--grayscale2); color: var(--grayscale8);}
.custom-input[type="month"],
.custom-input[type="date"] {position: relative; padding-right: calc(10px + var(--fs-24)); background-image: url('/img/calendar-ico.svg'); background-repeat: no-repeat; background-position: right 10px center; background-size: var(--fs-24);}
.custom-input[type="month"]::-webkit-calendar-picker-indicator,
.custom-input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; right: 10px; width: var(--fs-24); height: var(--fs-24); opacity: 0; cursor: pointer;}
.textarea-wrap {position: relative;}
.textarea-wrap .textarea-count {position: absolute; right: var(--fs-20); bottom: var(--fs-20); color: var(--grayscale5);}
.search-input {padding: 10px var(--fs-16); padding-left: var(--fs-40); background-image: url('/img/search-ico.svg'); background-repeat: no-repeat; background-position: var(--fs-16) center;}

/* 숫자인풋 */
.number-input-content {width: 100%; display: flex; align-items: center; justify-content: space-between; column-gap: var(--fs-20);}
.number-input-content .number-input-label {font-size: var(--fs-16); font-weight: 400; line-height: 1.5; color: var(--grayscale7);}
.number-input-wrap {display: inline-flex; align-items: center; column-gap: 6px;}
.number-input-wrap .number-apply-btn {margin-left: calc(var(--fs-30) - 6px);}
.number-input-wrap .number-input-btn,
.number-input-wrap input[type="number"] {flex-shrink: 0; width: 46px; height: 40px; border: 1px solid var(--grayscale3); border-radius: var(--fs-10); background-color: var(--color-white);}
.number-input-wrap .number-input-btn {display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s, background-color 0.2s;}
.number-input-wrap .number-input-btn:hover {background-color: var(--grayscale1); border-color: var(--grayscale4);}
.number-input-wrap .number-input-btn img {width: 18px; height: 18px;}
.number-input-wrap input[type="number"] {padding: 0 5px; font-size: var(--fs-18); line-height: 1; text-align: center; color: var(--grayscale10); appearance: textfield;}
.number-input-wrap input[type="number"]::-webkit-inner-spin-button,
.number-input-wrap input[type="number"]::-webkit-outer-spin-button {margin: 0; appearance: none;}

/* 필터 */
.filter-white {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.filter-black {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}

.search-box {display: flex; align-items: center;}
.search-box > .search-box-content + .search-box-content {padding-left: var(--fs-20); margin-left: var(--fs-20); position: relative;}
.search-box > .search-box-content + .search-box-content::after {content: ''; width: 1px; height: var(--fs-20); background-color: var(--grayscale3); position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);}

.sort-list {width: fit-content; display: flex; align-content: center; column-gap: var(--fs-20);}
.sort-list .sort {transition: color 0.2s; font-size: var(--fs-14); line-height: 1.5; color: var(--grayscale6); border-bottom: 1px solid transparent;}
.sort-list .sort:hover {color: var(--color-main);}
.sort-list .sort.active {color: var(--color-main); border-color: var(--color-main);}
.sort-list .sort.box {padding: var(--fs-12) var(--fs-20); border-radius: var(--fs-10); border: 1px solid var(--grayscale3);}

.tab-list {width: fit-content; padding: 3px; display: flex; align-items: center; column-gap: 2px; background-color: var(--grayscale2); border-radius: var(--fs-12);}
.tab-list .tab {transition: background-color 0.2s; padding: 6px var(--fs-12); border-radius: var(--fs-10); color: var(--grayscale7);}
.tab-list .tab:hover {background-color: var(--color-white);}
.tab-list .tab.active {background-color: var(--color-white); box-shadow: var(--box-shadow); color: var(--color-main);}

.stats-list {display: flex; align-items: center; column-gap: var(--fs-30);}
.stats-list .stats {display: flex; flex-direction: column; align-items: center; row-gap: 2px;}
.stats-list .stats .stats-value {font-size: var(--fs-24); font-weight: 500; color: var(--color-main);}
.stats-list .stats:nth-child(2n-1) .stats-value {color: #3EE6A3;}
.stats-list .stats .stats-label {font-size: var(--fs-14); line-height: 1.5; color: var(--grayscale5);}

/* 어드민 레이아웃 */
.admin-tit {font-size: var(--fs-20); font-weight: 700; color: var(--grayscale10);}
.admin-input-box {display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-20); padding: var(--fs-20); border-radius: var(--fs-14); border: 1px solid var(--grayscale3); background-color: var(--color-white);}
.admin-input-box.row {padding-block: var(--fs-12); flex-direction: row; align-items: center; justify-content: space-between;}
.admin-input-box .box-tit {font-size: var(--fs-20); font-weight: 500; line-height: 1.5; color: var(--grayscale11);}
.admin-input-box .box-desc {font-size: var(--fs-14); line-height: 1.5; color: var(--grayscale8);}

.admin-navy-box {background-color: #000133; display: flex; align-items: center; justify-content: space-between; padding: var(--fs-26) var(--fs-30); border-radius: var(--fs-12);}
.admin-navy-box .box-tit {display: flex; flex-direction: column; row-gap: 6px;}
.admin-navy-box .box-tit span,
.admin-navy-box .box-tit p em {color: var(--grayscale4);}
.admin-navy-box .box-tit h3,
.admin-navy-box .box-tit p {color: var(--color-white);}

.box-content {display: flex; align-items: center; column-gap: var(--fs-40);}




/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */