@charset "utf-8";

:root {
    --header-banner-height: 0px;
    --header-height: 0px;

    /* bg */
    --color-bg1: #FAF8F4;
    --color-bg2: #F3F0EB;

    /* static */
    --color-static1: #FFFFFF; /* 메인 */
    --color-static2: #262626; /* 서브1 */
    --color-static3: #8A7564; /* 서브2 */
    --rgb-static1: 255 255 255; /* #FFFFFF */
    --rgb-static2: 38 38 38;    /* #262626 */
    --rgb-static3: 138 117 100; /* #8A7564 */
    --color-white: #fff;
    --rgb-white: 255 255 255;
    --color-black: #000;
    --rgb-black: 0 0 0;

    /* text */
    --color-text1: #262626; /* grayscale9 */
    --color-text2: #404040; /* grayscale8 */
    --color-text3: #525252; /* grayscale7 */
    --color-text4: #A3A3A3; /* grayscale5 */
    --color-text5: #D4D4D4; /* grayscale4 */
    --color-text6: #FAFAFA; /* grayscale1 */
    --color-text7: #F5F5F5; /* grayscale2 */

    /* border */
    --color-border1: #E7E3DD;
    --color-border2: #D6D1CA;

    /* font size */
    --fs-72: clamp(42px, 5vw, 72px);
    --fs-64: clamp(38px, 4.44vw, 64px);
    --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-14: clamp(13px, 0.97vw, 14px);
    --fs-13: clamp(12px, 0.9vw, 13px);
    --fs-12: clamp(11px, 0.83vw, 12px);

    --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);


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

.pretendard {font-family: "Pretendard", sans-serif !important;}
.garamond {font-family: "EB Garamond", serif !important;}

.txt-static1 {color: var(--color-static1);}
.txt-static2 {color: var(--color-static2);}
.txt-static3 {color: var(--color-static3);}
.txt1 {color: var(--color-text1) !important;}
.txt2 {color: var(--color-text2) !important;}
.txt3 {color: var(--color-text3) !important;}
.txt4 {color: var(--color-text4) !important;}
.txt5 {color: var(--color-text5) !important;}
.txt6 {color: var(--color-text6) !important;}
.txt7 {color: var(--color-text7) !important;}
.txt8 {color: var(--color-text8) !important;}

.weight500 {font-weight: 500 !important;}
.weight600 {font-weight: 600 !important;}
.weight700 {font-weight: 700 !important;}

.section-tit {font-size: var(--fs-36); font-weight: 600; line-height: 1.5;}
.card-tit {font-size: var(--fs-24); font-weight: 500; line-height: 1.5;}
.card-goods-name {font-size: var(--fs-20); font-weight: 500; line-height: 1.3;}
.card-goods-discount {font-size: var(--fs-16); font-weight: 500; line-height: 1.5;}
.card-goods-price {font-size: var(--fs-12); font-weight: 400; line-height: 1.5;}
.card-goods-price-cancle {font-size: var(--fs-16); font-weight: 600; line-height: 1.5; text-decoration: dashed;}
.body-large {font-size: var(--fs-18); font-weight: 400; line-height: 1.5;}
.shop-menu,
.body-medium {font-size: var(--fs-16); font-weight: 400; line-height: 1.5;}
.body-small {font-size: var(--fs-14); font-weight: 400; line-height: 1.5;}
.eyebrow {font-size: var(--fs-15); line-height: 1.5; letter-spacing: 0.2em; font-family: "EB Garamond", serif;}

.badge {padding: 4px 10px; border-radius: 99px; font-size: var(--fs-13); font-weight: 500; background-color: #E5E5E5; color: var(--color-text1);}
.badge.static {background-color: var(--color-static3); color: var(--color-white);}
.badge.black {background-color: var(--color-text1); color: var(--color-white);}
.badge.light {background-color: var(--color-bg1); color: var(--color-static3);}

.btn-wrap {display: flex; align-items: center; gap: var(--fs-24);}
.btn-wrap > * {flex: 1; justify-content: center;}

.square-btn {width: fit-content; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; padding: var(--fs-15) var(--fs-24); display: flex; align-items: center; column-gap: 8px; font-size: var(--fs-14); line-height: 1.5; font-weight: 500; border: 1px solid transparent;}
.square-btn.small {padding: var(--fs-12) var(--fs-16);}
.square-btn.large {padding: var(--fs-18) var(--fs-32); font-size: var(--fs-15);}
.round-btn.large,
.square-btn.large {padding: var(--fs-18) var(--fs-32);}
.ico-btn {position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-self: center; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
.ico-btn img {transition: opacity 0.2s; }
.ico-btn[data-title]::after { content: attr(data-title); position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(-4px); padding: 6px 10px; border-radius: 6px; background: #222; color: #fff; font-size: 12px; line-height: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; z-index: 10;}
.ico-btn[data-title]::before { content: ""; position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%) translateY(-4px); border-width: 6px; border-style: solid; border-color: transparent transparent #222 transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; z-index: 10;}
.ico-btn[data-title]:hover::before,
.ico-btn[data-title]:hover::after {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}
.w100 {width: 100%;}
.round-btn.w100 ,
.square-btn.w100 {justify-content: center;}

.main-btn {background-color: var(--color-static1); color: var(--color-white);}
.line-btn {background-color: var(--color-white); border-color: var(--color-border1); color: var(--color-static3);}

.main-btn:hover:not(.disabled):not(:disabled) {background-color: #404040;}
.line-btn:hover:not(.disabled):not(:disabled) {border-color: var(--color-static2); color: var(--color-static2);}

.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(--color-text7); color: var(--color-text4); border-color: transparent;}
.ico-btn.disabled img,
.ico-btn:disabled img {opacity: 0.3;}

.ico-btn:hover img {opacity: 0.7;}

.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:hover {opacity: 0.7;}
.txt-btn.readonly,
.txt-btn:disabled {cursor: default; pointer-events: none;}

/* 커스텀체크 */
.custom-chk-list {display: flex; flex-direction: column; row-gap: 10px;}
.desc-box:has(.custom-chk) {border-color: var(--color-border); background-color: var(--color-white);}
.desc-box:has(.custom-chk input[type="checkbox"]:checked) {border-color: var(--color-static2);}
.desc-box .custom-chk {width: 100%; justify-content: space-between;}
.desc-box .custom-chk label {column-gap: var(--fs-20); flex: 1;}
.desc-box .custom-chk label em {flex-direction: column; align-items: flex-start; row-gap: 2px; flex: 1;}
.desc-box .custom-chk label em strong {color: var(--color-text2);}
.desc-box .custom-chk label em p {color: var(--color-text4);}
.custom-chk {display:flex; align-items:center; gap:7px; font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color:var(--color-text1);}
.custom-chk input[type="checkbox"] {display:none;}
.custom-chk label {cursor:pointer; display:flex; align-items:center; column-gap: var(--fs-12);}
.custom-chk label span {flex-shrink:0; display:inline-block; width: 24px; height: 24px; border:1px solid var(--color-border); border-radius: 4px; background-color:var(--color-white); background-image:url(../img/check-ico.svg); background-size:60%; background-repeat:no-repeat; background-position:center center; transition:all 0.2s ease;}
.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(--color-text1);}
.custom-chk.required label em::after {content: '(필수)'; color: var(--color-text3); word-break: keep-all;}
.custom-chk.optional label em::after {content: '(선택)'; color: var(--color-text3); word-break: keep-all;}
.custom-chk input[type="checkbox"]:checked + label span {background-color:var(--color-static1);}
.custom-chk:hover span {background-color:var(--color-static3);}

/* 인풋 */
form, fieldset {width: 100%;}
fieldset {margin:0; padding:0; border:0;}
.blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border: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% / 3 - var(--fs-20) * 2 / 3);}
.input-item-label > .custom-select-box,
.input-item-label > .custom-input {width: 100%;}
.input-item-label {display: flex; flex-direction: column; row-gap: 6px; align-items: flex-start;}
.input-item-label label,
.input-item-label .label {padding: 0; font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color:var(--color-text1); display: flex; align-items: center; column-gap: 6px;}
.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-email {width: 100%;}
.input-item-email span {width: var(--fs-16); text-align: center;}
.input-item-email .custom-input,
.input-item-email .custom-select-box {width: calc((100% - var(--fs-16) - 12px) / 3) !important;}
.input-item-btn .custom-input {width: auto; flex: 1;}
.custom-textarea,
.custom-select-box select,
.custom-input {transition: border 0.2s; background-color: #fff; border: 1px solid var(--color-border); padding: 9.5px 10px; font-size: var(--fs-16); color: var(--color-text1); line-height: 1.6; letter-spacing: -0.2px;}
.custom-textarea {width: 100%; height: 180px; resize: none; border-radius: 8px;}
.custom-textarea::placeholder,
.custom-input::placeholder {color: var(--color-text4); font-size: var(--fs-16); line-height: 1.6; letter-spacing: -0.2px;}
.custom-input.search {}
.custom-select-box {position: relative;}
.custom-select-box select {width: 100%; cursor: pointer; padding-right: calc(10px + var(--fs-24)); appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.custom-select-box::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: var(--fs-24); height: var(--fs-24); background-color:var(--color-white); background-image:url(../img/select-arrow.svg); background-repeat:no-repeat; background-position:center center; pointer-events: none;}
.custom-input,
.custom-select-box select,
.custom-input-btn {height: calc(var(--fs-22) * 2); border-radius: 8px; flex-shrink: 0; white-space: nowrap; padding-block: 0;}
.custom-input:hover,
.custom-select-box:hover select {border-color: var(--color-text7);}
.custom-input:focus,
.custom-select-box select:focus {border-color: var(--color-static3);}
.input-desc {font-size:var(--fs-15); line-height:1.6; color:var(--color-text3);}
.input-desc.error {display: flex; align-items: center; column-gap: 6px; color: #FF383C;}
.input-desc.error::before {content: ''; display: block; width: 12px; height: 12px; background-image: url(../img/error-ico.svg); background-size: contain; background-repeat: no-repeat; background-position: center center;}
.desc-box.input-desc {margin-top: 10px; background-color: var(--color-text6); color: var(--color-text2);}
.custom-input.error {border-color:#FF383C;}
.custom-input:read-only {background-color: var(--sub-bg1); pointer-events: none;}
.custom-input[type="month"]::-webkit-calendar-picker-indicator,
.custom-input[type="date"]::-webkit-calendar-picker-indicator {opacity: 0; position: absolute; right: 10px; width: var(--fs-24); height: var(--fs-24); cursor: pointer;}
.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:disabled {background-color: var(--color-text6);}

.textarea-wrap {position: relative;}
.textarea-wrap .textarea-count {position: absolute; right: var(--fs-20); bottom: var(--fs-20); color: var(--color-text4);}

/* 필터 */
.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);}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 500px) {
}
@media screen and (max-width: 375px) {
}