/*
 * [H6] CSS 안의 `url(/img/…)` 를 `/theme/img/…` 로 옮겼다.
 *
 * 퍼블리싱은 이미지를 사이트 루트 `/img/` 에서 받는다.
 * 테마 자산은 테넌트별 테마 디렉터리에 있으므로 실제 경로는 `/theme/img/` 다.
 * 고치지 않으면 화살표·체크 아이콘이 조용히 404 가 되고,
 * select 화살표가 사라진 것을 아무도 눈치채지 못한다(실측: 2건).
 */
@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 */
    --grayscale1: #FAFAFA;
    --grayscale2: #F5F5F5;
    --grayscale3: #E5E5E5;
    --grayscale4: #D4D4D4;
    --grayscale5: #A3A3A3;
    --grayscale6: #737373;
    --grayscale7: #525252;
    --grayscale8: #404040;
    --grayscale9: #262626;
    --grayscale10: #171717;
    --grayscale11: #0A0A0A;

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

    /* font size */
    --fs-72: clamp(42px, 5vw, 72px);
    --fs-64: clamp(38px, 4.44vw, 64px);
    --fs-60: clamp(39px, 4.17vw, 60px);
    --fs-56: clamp(40px, 3.89vw, 56px);
    --fs-50: clamp(36px, 3.47vw, 50px);
    --fs-52: clamp(38px, 3.61vw, 52px);
    --fs-48: clamp(34px, 3.33vw, 48px);
    --fs-44: clamp(32px, 3.05vw, 44px);
    --fs-40: clamp(30px, 2.78vw, 40px);
    --fs-38: clamp(29px, 2.64vw, 38px);
    --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-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);


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

:root [data-theme="gray"] {

    /* bg */
    --color-bg1: #F8F9FB;
    --color-bg2: #EEF1F4;

    /* static */
    --color-static1: #FFFFFF; /* 메인 */
    --color-static2: #222222; /* 서브1 */
    --color-static3: #667085; /* 서브2 */
    --rgb-static1: 255 255 255; /* #FFFFFF */
    --rgb-static2: 34 34 34;    /* #222222 */
    --rgb-static3: 102 112 133; /* #8A7564 */

    /* border */
    --color-border1: #E4E7EC;
    --color-border2: #D5D9E0;
}

:root [data-theme="green"] {

    /* bg */
    --color-bg1: #F7F8F5;
    --color-bg2: #EEF1EB;

    /* static */
    --color-static1: #FFFFFF; /* 메인 */
    --color-static2: #2F3A33; /* 서브1 */
    --color-static3: #6E8678; /* 서브2 */
    --rgb-static1: 255 255 255; /* #FFFFFF */
    --rgb-static2: 47 58 51;    /* #2F3A33 */
    --rgb-static3: 110 134 120; /* #6E8678 */

    /* border */
    --color-border1: #E1E6E2;
    --color-border2: #CDD5CF;
}

.ml-auto {margin-left: auto;}

.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(--grayscale9) !important;}
.txt2 {color: var(--grayscale8) !important;}
.txt3 {color: var(--grayscale7) !important;}
.txt4 {color: var(--grayscale5) !important;}
.txt5 {color: var(--grayscale4) !important;}
.txt6 {color: var(--grayscale1) !important;}
.txt7 {color: var(--grayscale2) !important;}
.txt8 {color: var(--color-text8) !important;}

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

.shop-menu {font-size: var(--fs-16); font-weight: 500; line-height: 1.5;}
.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;}
.goods-name {font-size: var(--fs-20); font-weight: 500; line-height: 1.3;}
.goods-discount {font-size: var(--fs-16); font-weight: 500; line-height: 1.5; color: red;}
.goods-price {font-size: var(--fs-22); font-weight: 600; line-height: 1.5;}
.goods-price-cancle {font-size: var(--fs-16); font-weight: 600; line-height: 1.5; text-decoration: dashed; color: var(--grayscale7);}
.body-large {font-size: var(--fs-18); font-weight: 400; line-height: 1.5;}
.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; color: var(--color-static3);}

.badge-wrap {display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.badge {padding: 4px 10px; border-radius: 99px; font-size: var(--fs-13); font-weight: 500; background-color: var(--grayscale3); color: var(--grayscale9);}
.badge.static {background-color: var(--color-static3); color: var(--color-white);}
.badge.black {background-color: var(--grayscale9); color: var(--color-white);}
.badge.light {background-color: var(--color-bg1); color: var(--color-static3);}

.red {color: red;}
.underline {text-decoration: underline;}

.btn-wrap {display: flex; align-items: center; gap: var(--fs-24);}
.btn-wrap.center {justify-content: center;}
.btn-wrap.small {gap: var(--fs-12);}
.submit-btn-wrap {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-16) 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);}
.square-btn.large {padding: var(--fs-18) var(--fs-32);}
.square-btn.xlarge {width: 100%; max-width: 234px; justify-content: center;}
.ico-btn {position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: 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;}
.square-btn.ico-btn {padding: 0; width: var(--fs-48); height: var(--fs-48); border-radius: 8px;}

.main-btn {background-color: var(--grayscale9); 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-static3);}

.round-btn.disabled,
.square-btn.disabled,
.ico-btn.disabled,
.round-btn:disabled,
.square-btn:disabled {cursor: default; pointer-events: none; opacity: 0.5;}
.ico-btn:disabled {cursor: default; pointer-events: none;}
.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; color: var(--grayscale6);}
.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-border1); 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(--grayscale8);}
.desc-box .custom-chk label em p {color: var(--grayscale5);}
.custom-chk {display:flex; align-items:center; gap:7px; font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color:var(--grayscale9);}
.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: 18px; height: 18px; border:1px solid var(--color-border1); border-radius: 4px; background-color:var(--color-white); background-image:url('/theme/img/check-ico.svg'); background-size:80%; 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-14); line-height:1.65; color:var(--grayscale9);}
.custom-chk.required label em::after {content: '(필수)'; color: var(--grayscale7); 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 {background-color: var(--color-static2);}
.custom-chk:hover span {background-color: var(--color-border2);}

/* 인풋 */
form, fieldset {width: 100%; margin-inline: auto;}
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-24);}
.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: 8px; align-items: flex-start;}
.input-item-label label:not(.file-upload-btn),
.input-item-label .label {padding: 0; font-size: var(--fs-16); line-height: 1.5; color:var(--grayscale8); 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 > label,
.input-item-label.row > .label {align-self: stretch;}
.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;}
.input-item-btn .square-btn {padding-block: 0; height: calc(var(--fs-22) * 2); border-radius: 4px;}
.custom-textarea,
.custom-select-box select,
.custom-input {transition: border 0.2s; background-color: #fff; border: 1px solid var(--color-border1); padding: 9.5px 10px; font-size: var(--fs-16); color: var(--grayscale9); line-height: 1.6; letter-spacing: -0.2px;}
.custom-textarea {width: 100%; height: 180px; resize: none; border-radius: 4px;}
.custom-textarea::placeholder,
.custom-input::placeholder {color: var(--grayscale5); 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('/theme/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: 4px; flex-shrink: 0; white-space: nowrap; padding-block: 0;}
.custom-input:hover,
.custom-select-box:hover select {border-color: var(--color-border2);}
.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(--grayscale7);}
.input-desc-s {font-size:var(--fs-14); line-height:1.5; color: var(--color-static3);}
.input-desc.center {width: 100%; text-align: center;}
.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('/theme/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(--grayscale1); color: var(--grayscale8);}
.custom-input.error {border-color:#FF383C;}
.custom-input:read-only {background-color: var(--grayscale2); 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('/theme/img/calendar-ico.svg'); background-repeat: no-repeat; background-position: right 10px center; background-size: var(--fs-24);}
.custom-input:disabled {background-color: var(--grayscale1);}
.textarea-wrap {position: relative; width: 100%;}
.textarea-wrap .textarea-count {position: absolute; right: var(--fs-20); bottom: var(--fs-20); color: var(--grayscale5);}
.input-list .input-list {row-gap: var(--fs-10);}
.input-list .input-list .input-wrap {gap: var(--fs-10);}

.input-password {position: relative; width: 100%;}
.input-password .custom-input {width: 100%; padding: 9.5px 52px 9.5px 10px;}
.input-password .password-toggle {position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}

/* 수량 */
.quantity-box {display:flex; align-items:center; width:fit-content; border:1px solid var(--color-border1); background-color:var(--color-white);}
.quantity-btn {width:var(--fs-52); height:var(--fs-52); display:flex; align-items:center; justify-content:center; border:0; border-right:1px solid var(--color-border1); background:none; color:var(--grayscale9); font-size:var(--fs-24); line-height:1; transition:background-color .2s ease;}
.quantity-btn.plus {border-right:0; border-left:1px solid var(--color-border1);}
.quantity-btn:hover:not(:disabled) {background-color:var(--grayscale2);}
.quantity-btn:disabled {opacity:.4; cursor:not-allowed;}
.quantity-input {width:var(--fs-52); height:var(--fs-52); padding:0; border:0; background:none; color:var(--grayscale9); font-size:var(--fs-18); text-align:center; appearance:textfield; -moz-appearance:textfield;}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
.quantity-input:focus {outline:none;}

/* 검색창 */
.search-content {display: flex; align-items: center; justify-content: flex-end; column-gap: var(--fs-20);}
.search-content .search-input-wrap {max-width: 296px; margin: unset;}
.search-content .search-select-box {width: fit-content; flex-shrink: 0;}

.search-input-wrap {background-color: var(--color-white); width:100%; height: var(--fs-56); padding-inline:var(--fs-20) var(--fs-16); display:flex; align-items:center; border:1px solid var(--color-border2); border-radius:100px; transition:border-color 0.2s;}
.search-input-wrap:focus-within {border-color:var(--color-static3);}
.search-input-wrap .search-input {min-width:0; height:100%; flex:1; border:0; outline:0; background-color:transparent; font-size:var(--fs-16); line-height:1.5; color:var(--grayscale9);}
.search-input-wrap .search-input::placeholder {color:var(--grayscale5);}
.search-input-wrap .search-input::-webkit-search-cancel-button {display:none;}
.search-input-wrap .search-submit-btn {width:var(--fs-32); height:var(--fs-32); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.search-input-wrap .search-submit-btn img {width:var(--fs-24); height:var(--fs-24); opacity: 0.6;}

.search-select-box select {height: var(--fs-56); padding-inline: var(--fs-16); display:flex; align-items:center; border:1px solid var(--color-border2); border-radius:100px; transition:border-color 0.2s;}
.search-select-box::after {width: var(--fs-32);  height: var(--fs-32); opacity: 0.6; right: var(--fs-16);}

/* 파일 첨부 */
.file-upload {display: flex; align-items: center; flex-wrap: wrap; gap: var(--fs-20);}
.file-upload-input {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.file-upload-btn {flex-shrink: 0; cursor: pointer; padding: var(--fs-10) var(--fs-16);}
.file-upload-input:focus-visible + .file-upload-btn {outline: 2px solid var(--color-static3); outline-offset: 2px;}
.file-upload-desc {font-size: var(--fs-14); line-height: 1.5; color: var(--color-static3);}

/* 파일 업로드 리스트 */
.file-upload-list {display:flex; flex-direction:column; align-items:flex-start; row-gap:8px;}
.file-upload-item {background-color: var(--color-white); width:fit-content; max-width:100%; padding: var(--fs-16) var(--fs-16); display:flex; align-items:center; justify-content:space-between; column-gap:var(--fs-40); border:1px solid var(--color-border1); transition:border-color 0.2s, background-color 0.2s;}
.file-upload-item .file-upload-name::before {display: block; width: 16px; height: 16px; content: ''; background-image: url('/theme/img/clip-ico.svg'); background-repeat: no-repeat; background-size: cover; background-position: center;}
.file-upload-item .file-upload-name {display:flex; align-items:center; column-gap:6px; min-width: 0; overflow: hidden;font-size:var(--fs-14); line-height:1.5; color:var(--grayscale9);  text-overflow: ellipsis; white-space: nowrap;}
.file-upload-item .file-upload-meta {display:flex; align-items:center; column-gap:6px; flex-shrink:0;}
.file-upload-item .file-upload-meta .file-upload-size {font-size: var(--fs-14); line-height: 1.5; color:var(--grayscale5);}
.file-upload-item .file-upload-remove {transition: opacity 0.2s; flex-shrink: 0; font-size: 0; background-image: url('/theme/img/close-ico.svg'); background-repeat: no-repeat; background-size: 16px; margin: -6px; background-position: center;}
.file-upload-item .file-upload-remove:hover {opacity: 0.7;}
.file-upload-item .file-upload-error {font-size: var(--fs-14); line-height: 1.5; color: #ff383c;}

/* 이미지 업로드 */
.image-upload-section {width: 100%; display: flex; flex-direction: column; row-gap: 4px;}
.input-wrap > .image-upload-section {width: calc(50% - var(--fs-20) / 2);}
.image-upload-tit {font-size: var(--fs-16); line-height: 1.5; color: var(--grayscale8);}
.image-upload-tit span {font-weight: 400; color: var(--grayscale7);}
.image-upload-item {position: relative; overflow: hidden; border: 1px dashed var(--color-border1); border-radius: 4px; background-color: var(--color-white); transition: border-color 0.2s ease, background-color 0.2s ease;}
.image-upload-item.sub-image-upload {background-color: var(--color-white);}
.image-upload-item:hover,
.image-upload-item.is-dragover {border-color: var(--color-main); background-color: var(--color-main-10);}
.image-upload-item input[type="file"] {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.image-upload-label {cursor: pointer; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 6px; text-align: center;}
.image-upload-txt {font-size: var(--fs-16); color: var(--grayscale9); transition: color 0.2s ease;}
.image-upload-placeholder {font-size: var(--fs-14); line-height: 1.5; color: var(--grayscale6); transition: color 0.2s ease;}
.image-upload-item:hover .image-upload-txt,
.image-upload-item.is-dragover .image-upload-txt,
.image-upload-item:hover .image-upload-placeholder,
.image-upload-item.is-dragover .image-upload-placeholder {color: var(--color-main);}
.image-preview {display: none; position: absolute; inset: 0; background-color: var(--grayscale2);}
.image-preview img {width: 100%; height: 100%; display: block; object-fit: cover;}
.image-upload-item.has-image {border-style: solid; border-color: var(--color-border1); background-color: var(--color-white);}
.image-upload-item.has-image .image-upload-placeholder {display: none;}
.image-upload-item.has-image .image-preview {display: block;}
.image-delete-btn {display: none; z-index: 2; position: absolute; top: 10px; right: 10px; background-color: rgb(var(--rgb-black) / 80%); align-items: center; justify-content: center; font-size: var(--fs-20); line-height: 1; color: var(--color-white); transition: background-color 0.2s ease;}
.image-delete-btn:hover {background-color: rgb(var(--rgb-black) / 40%);}
.image-upload-item.has-image .image-delete-btn {display: flex;}

/* 대표 이미지 */
.main-image-upload {width: 100%; height: var(--space-180);}

/* 추가 이미지 */
.sub-image-upload-list {width: 100%; display: flex; align-items: center; column-gap: var(--fs-12);}
.sub-image-upload {width: 120px; aspect-ratio: 1 / 1;}
.sub-image-upload .image-upload-placeholder {font-size: var(--fs-26); font-weight: 300;}
.sub-image-upload .image-delete-btn {top: 8px; right: 8px; width: 26px; height: 26px; font-size: var(--fs-18);}
.image-upload-item input[type="file"]:focus-visible + .image-upload-label {outline: 2px solid var(--color-main); outline-offset: -3px;}

/* 첨부파일 */
.attachment-wrap {margin-top:var(--fs-40);}
.attachment-wrap .attachment-tit {margin-bottom:var(--fs-10); font-size:var(--fs-16); line-height:1.5; color:var(--color-static3);}
.attachment-wrap .attachment-list {display:flex; flex-direction:column; align-items:flex-start; row-gap:8px;}
.attachment-wrap .attachment-list li {max-width: 100%;}
.attachment-wrap .attachment {width:fit-content; max-width:100%; padding: var(--fs-16) var(--fs-16); display:flex; align-items:center; justify-content:space-between; column-gap:var(--fs-40); border:1px solid var(--color-border1); font-size:var(--fs-14); line-height:1.5; color:var(--grayscale9); transition:border-color 0.2s, background-color 0.2s;}
.attachment-wrap .attachment:hover {border-color:var(--color-border2); background-color:var(--grayscale1);}
.attachment-wrap .attachment .attachment-name,
.attachment-wrap .attachment .attachment-meta {display:flex; align-items:center; column-gap:6px;}
.attachment-wrap .attachment .attachment-name {min-width:0;}
.attachment-wrap .attachment .attachment-name > span {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.attachment-wrap .attachment .attachment-name img,
.attachment-wrap .attachment .attachment-meta img {width:16px; height:16px; flex-shrink:0;}
.attachment-wrap .attachment .attachment-meta {flex-shrink:0; color:var(--grayscale5);}
.attachment-wrap .attachment .attachment-meta .ico-btn {width: 16px; height: 16px;}
.attachment-wrap .attachment:hover .attachment-meta .ico-btn::before,
.attachment-wrap .attachment:hover .attachment-meta .ico-btn::after {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}

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

/* 페이지네이션 */
.pagination {display:flex; align-items:center; justify-content:center; gap: var(--fs-16); margin-top: var(--space-60);}
.pagination a,
.pagination span {transition:background-color 0.2s, border-color 0.2s, color 0.2s; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid transparent; border-radius:99px; font-size:var(--fs-16); font-weight: 500;; color:var(--grayscale6);}
.pagination a:hover {color: var(--grayscale9);}
.pagination a.active {background-color:var(--color-static3); color:var(--color-white);}
.pagination a.arrow.disable {pointer-events: none;}
.pagination a.arrow.sable img {transition: opacity 0.2s; width: 100%; height: 100%; object-fit: contain;}
.pagination a.arrow.disable img {opacity: 0.5;}
.pagination a.arrow:hover img {opacity: 0.8;}

/* 테이블 */
.common-table-wrap {width:100%; overflow-x:auto;}
.common-table {width:100%; border-collapse:collapse; table-layout:fixed; border-top:1px solid var(--color-border1);}
.common-table th {padding: var(--fs-14) var(--fs-12); border-top:1px solid var(--color-border1); border-bottom:1px solid var(--color-border1); font-weight: 400; background:var(--color-bg1); font-size: var(--fs-16); color:var(--grayscale7); text-align:center;}
.common-table td {padding: var(--fs-20) var(--fs-12); border-bottom:1px solid var(--color-border1); font-size:var(--fs-16); color:var(--grayscale9); text-align:center; vertical-align:middle;}
.common-table tbody tr {transition:background-color 0.2s ease;}
.common-table:not(.no-hover) tbody tr:not(.common-table-empty):hover {background-color:var(--grayscale1);}
.common-table td a {display:block; min-width:0; overflow:hidden; color:inherit; text-overflow:ellipsis; white-space:nowrap;}
.common-table .common-table-empty td {height:180px; color:var(--grayscale5); text-align:center;}
.common-table .text-center {text-align:center;}
.common-table .text-right {text-align:right;}

/* 섹션 타이틀 */
.section-tit-wrapper {display: flex; align-items: flex-end; justify-content: space-between; width: 100%;}
.section-tit-wrap {display: flex; flex-direction: column; row-gap: var(--fs-12);}
.section-tit-wrap .section-tit:not(.garamond):has(+ *) {margin-bottom: -4px;}
.section-tit-wrap .section-tit.garamond {font-size: var(--fs-40);}
.section-tit-wrap .section-tit.garamond.big {font-size: var(--fs-48);}
.section-tit-wrap .section-sub {color: var(--grayscale7);}
.section-tit-wrap .square-btn {margin-top: var(--fs-38);}
.centered-tit-section .section-tit-wrap .section-sub {text-align: center;}

/* 상품 */
.goods-list-swiper {width:100%; overflow:visible;}
.goods-list:not(.swiper-wrapper) {display:flex; align-items:flex-start; column-gap:var(--fs-24); row-gap:var(--fs-48); flex-wrap:wrap;}
.goods-item {display:flex; flex-direction:column; row-gap:var(--fs-20); width:calc(25% - var(--fs-24) * 3 / 4);}
.inner:not(.grid-content) .goods-item,
.search-result-section .goods-item {width:calc(20% - var(--fs-24) * 4 / 5);}
.goods-list-swiper .goods-list .goods-item {width:auto;}
.goods-item:hover .goods-thumb {opacity:0.7;}
.goods-thumb {transition:opacity 0.2s; width:100%; height:auto; aspect-ratio: 297.5/373; position:relative; overflow:hidden;}
.goods-thumb .thumb-swiper {width:100%; height:100%;}
.goods-thumb .thumb-swiper .swiper-wrapper {height:100%;}
.goods-thumb .thumb-swiper .swiper-slide {height:100%; overflow:hidden;}
.goods-thumb .thumb-swiper .swiper-slide > img {display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
.goods-thumb .favorite-btn {background:transparent; position:absolute; top:var(--fs-20); right:var(--fs-20); z-index:10;}
.goods-thumb .favorite-btn img {display:block; width:100%; height:100%; object-fit:contain;}
.goods-info-txt {display:flex; flex-direction:column; row-gap:var(--fs-12);}
.goods-info-txt .goods-name {color:var(--grayscale8);}
.goods-info-txt .goods-price-wrap {display:flex; align-items:center; column-gap:var(--fs-12);}
.goods-info-txt .goods-discount-wrap {display:flex; align-items:center; column-gap:4px;}
.goods-more-btn-wrap {width: 100%; display: flex; align-items: center; justify-content: center; margin-top: calc(var(--space-80) - var(--fs-24));}
.goods-more-btn-wrap .square-btn {max-width: 100%; padding-inline: var(--fs-40);}

.toolbar {width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fs-16);}
.toolbar .count-txt {font-size: var(--fs-16); color: var(--grayscale8);}
.toolbar .toolbar-sort select {color: var(--grayscale8); padding: 0 4px; padding-right: var(--fs-24); border-color: transparent; border-radius: 0; width: fit-content;}
.toolbar .toolbar-sort::after {background-image: url('/theme/img/cate-arrow.svg');}
.toolbar .toolbar-sort select:hover {border-color: var(--color-border1);}
.sort-list-swiper {margin-inline: unset;}
.sort-list {display: flex; align-items: center; column-gap: var(--fs-24);}
.sort-list .sort {width: fit-content; transition: color 0.2s; font-size: var(--fs-16); line-height: 1.5; color: var(--grayscale6);}
.sort-list .sort:hover,
.sort-list .sort.active {color: var(--grayscale9);}

.tab-list-swiper {width: 100%; overflow: hidden;}
.tab-list {display: flex; align-items: center; column-gap: 0; overflow: visible;}
.tab-list li,
.tab-list .tab {white-space: nowrap;}
.tab-list li.swiper-slide {width: auto;}
.tab-list.centered {width: fit-content;}
.tab-list .tab {width: fit-content; transition: all 0.2s; padding: 6px var(--fs-12); border-radius: 99px; border: 1px solid var(--color-border2); color: var(--color-static3);}
.tab-list .tab:hover {background-color: var(--color-bg1); border-color: transparent;}
.tab-list .tab.active {background-color: var(--color-bg2); border-color: transparent;}

.tab-content {display:none; flex-direction: column; row-gap: var(--fs-60);}
.tab-content.active {display:flex;}

.tab-menu {display: flex; align-items: center; column-gap: var(--fs-10);}
.tab-menu .tab-btn {width: 100%; max-width: 262px; height: 56px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border1); border-radius: 9999px; color: var(--color-static3); transition: all .2s;} 
.tab-menu .tab-btn:hover,
.tab-menu .tab-btn.active {background-color: var(--color-bg1); border: 1px solid var(--color-bg1);}

.common-tab {width: 100%; display: flex; border-bottom: 1px solid var(--color-border1);}
.common-tab .common-tab-btn {padding: var(--fs-18) var(--fs-48); border-bottom: 2px solid transparent; transition: all .2s; font-size: var(--fs-18); color: var(--grayscale7); font-weight: 500; line-height: 1.5;}
.common-tab .common-tab-btn:hover,
.common-tab .common-tab-btn.active {font-weight: 600; color: var(--grayscale9); border-color: var(--color-static3);}

.detail-section {display:flex; flex-direction:column; row-gap:var(--fs-20);}
.detail-head {display:flex; justify-content:space-between; align-items:center; column-gap:var(--fs-20);}
.detail-list {display:flex; flex-direction:column; row-gap: 6px; border-top:1px solid var(--color-border1);}
.detail-list .detail-row {display:flex; justify-content:space-between; align-items:center; column-gap: var(--fs-20); padding: var(--fs-10) 0; border-bottom:1px solid var(--color-border1);}
.detail-list .detail-label {flex-shrink:0; font-size: var(--fs-15); color:var(--grayscale6);}
.detail-list .detail-value {flex:1; font-size:var(--fs-16); line-height: 1.5; font-weight:400; text-align:right; color:var(--grayscale9);}

.detail-list.bg {background-color: var(--color-bg1); padding: var(--fs-20); border-top: 0; row-gap: var(--fs-20);}
.detail-list.bg .detail-row {padding: 0; border-bottom: 0;}
.detail-list.bg .detail-row.total {border-top: 1px solid var(--color-border1); padding-top: var(--fs-20);}
.detail-list.bg .detail-row.total .detail-label {color: var(--color-static3); font-weight: 500; font-size: var(--fs-20);}
.detail-list.bg .detail-row.total .detail-price {font-weight: 500; font-size: var(--fs-20);}

/* 빈 목록 */
.empty-content {width: 100%; max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; row-gap: var(--space-60);}
.empty-content .txt-wrap {text-align: center; display: flex; flex-direction: column; row-gap: var(--fs-12);}
.empty-content .txt-wrap span {color: var(--grayscale9);}
.empty-content .txt-wrap p {color: var(--grayscale7); text-align: center;}
.empty-content .goods-more-btn-wrap {margin-top: 0;}

/* 모달 */
html:has(.modal.open),
body:has(.modal.open) {overflow: hidden;}
.modal {scrollbar-width: thin; scrollbar-color: rgba(var(--rgb-black),0.1) transparent; display: none; width: 90%; max-width: 830px; height: fit-content; max-height: 90vh; overflow-y: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: var(--fs-20) var(--fs-30); border-radius: var(--fs-10); background-color: var(--color-white); z-index: 999999;}
.modal.s-modal {max-width: 472px;}
.modal-bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-black); opacity: 0.5; z-index: 999998;}
.modal.open {display: block !important;}
.modal-bg.open {display: block !important;}
.modal::-webkit-scrollbar {display: none;}

.modal .modal-head {margin-bottom: var(--fs-20); width: 100%; display: flex; align-items: center; justify-content: space-between;}
.modal .modal-cont {margin-bottom: var(--fs-40); display: flex; flex-direction: column; row-gap: var(--fs-12);}
.modal .modal-cont .custom-select-box select {height: var(--fs-52); border-radius: 0;}
.modal .modal-cont .quantity-box,
.modal .modal-cont .quantity-input {width: 100%;}

/* 공통 grild 레이아웃 */
.common-grid2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-24);}
.common-grid2.large {gap: var(--fs-48);}
.common-grid3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-24);}
.common-grid4 {display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-24);}
.common-grid5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fs-24);}
.common-grid6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--fs-24);}

.common-card-text {display: flex; flex-direction: column; row-gap: 4px; padding: var(--fs-20); border-radius: 8px; border: 1px solid var(--color-border1);}
.common-card-text .common-card-main {font-size: var(--fs-32); font-weight: 600; color: var(--grayscale9); line-height: 1.5;}
.common-card-text .txt-btn {margin-top: var(--fs-16);}

.info-box {display:flex; flex-direction:column;}
.info-item {padding: var(--fs-20); border-bottom:1px solid var(--color-border1);}
.info-item-head {display:flex; justify-content:space-between; align-items:flex-start; column-gap:var(--fs-20); margin-bottom:var(--fs-20);}
.info-item-title {display:flex; align-items:center; column-gap:var(--fs-20);}
.info-item-action {display:flex; align-items:center; column-gap:var(--fs-40);}
.info-item-action .txt-btn {font-size: var(--fs-16); color: var(--color-static3); font-weight: 400;}
.info-item-table {display:flex; flex-direction:column; row-gap:var(--fs-10);}
.info-item-table > div {display:grid; grid-template-columns:100px 1fr; column-gap:var(--fs-20);}
.info-item-table dt {font-size:var(--fs-16); line-height:1.5; color:var(--grayscale6);}
.info-item-table dd {font-size:var(--fs-16); line-height:1.5; color:var(--grayscale9);}

.product-list .product-item {padding:var(--fs-32) var(--fs-20); border-bottom:1px solid var(--color-border1);}
.product-list .product-item:last-of-type {border-bottom: 0;}
.product-list .product-item-t {display:flex; align-items: center; column-gap:var(--fs-40);}
.product-list .thumb-wrap {width:120px; height:120px; flex-shrink:0;}
.product-list .product-info-wrap {display:flex; justify-content:space-between; align-items: center; flex:1; column-gap:var(--fs-40);}
.product-list .product-info {display:flex; flex-direction:column; align-items:flex-start; flex:1; row-gap: 4px;}
.product-list .product-name {font-size: var(--fs-16); line-height: 1.5; font-weight: 500; color:var(--grayscale9);}
.product-list .product-desc {font-size: var(--fs-14); line-height: 1.5; color:var(--grayscale7);}
.product-list .product-price {font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color:var(--grayscale9); margin-top: var(--fs-12);}
.product-list .date {font-size: var(--fs-14); line-height: 1.5; margin-top:var(--fs-16); color:var(--grayscale6);}

.review-rating {display: flex; align-items: center; column-gap: 2px; margin:var(--fs-16) 0 6px 0; }
.review-rating  .star {font-size: var(--fs-18); color: var(--grayscale9);}
.review-rating  .star.empty {color: var(--grayscale4);}
.product-list .review-content {display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.7; color:var(--grayscale8);}


@media screen and (max-width: 1280px) {
    .goods-item {width:calc(100% / 3 - var(--fs-24) * 2 / 3);}
    .inner:not(.grid-content) .goods-item,
    .search-result-section .goods-item {width:calc(25% - var(--fs-24) * 3 / 4);}
}

@media screen and (max-width: 1024px) {
    .goods-info-txt .goods-price-wrap {flex-direction: column; align-items: flex-start;}
    .goods-item {width:calc(50% - var(--fs-24) / 2);}
    .inner:not(.grid-content) .goods-item,
    .search-result-section .goods-item {width:calc(100% / 3 - var(--fs-24) * 2 / 3);}
}

@media screen and (max-width:768px) {
    .common-table-wrap {overflow:visible;}
    .common-table {display:block; border-top:0;}
    .common-table colgroup,
    .common-table thead {display:none;}
    .common-table tbody {display:flex; flex-direction:column; border-top: 1px solid var(--color-border1);}
    .common-table tr {display:flex; flex-wrap:wrap; align-items:center; row-gap:6px; padding: 14px; border-bottom:1px solid var(--color-border1); background-color:var(--color-white);}
    .common-table th,
    .common-table td {background-color: transparent !important; display:flex; align-items:flex-start; width:100%; height:auto; padding:0; border:0; font-size: 14px;}
    .common-table td::before {content:attr(data-label); width:72px; flex-shrink:0; margin-right:12px; font-weight:500; color:var(--grayscale6); text-align: left; align-self: center;}
    .common-table td a {white-space:normal; word-break:keep-all;}
    .common-table .common-table-empty {display:block; padding:0;}
    .common-table .common-table-empty td {display:flex; height:140px; align-items:center; justify-content:center; border:1px solid var(--color-border1); border-radius:8px;}
    .common-table .common-table-empty td::before {display:none;}

    .product-list .product-item {padding: var(--fs-20) 0;}
    .product-list .thumb-wrap {width: 100px; height: 100px;}
    .product-list .date {margin-top: var(--fs-10);}

}

@media screen and (max-width: 500px) {
    .goods-list:not(.swiper-wrapper) {column-gap: 16px; row-gap: 32px;}
    .inner:not(.grid-content) .goods-item,
    .search-result-section .goods-item {width:calc(50% - var(--fs-24) / 2);}
    .search-content {column-gap: var(--fs-12);}
    .search-content .search-input-wrap {width: calc(100% - 100px - var(--fs-12));}
    .ico-btn[data-title]::before,
    .ico-btn[data-title]::after {display: none;}

    .common-tab .common-tab-btn {flex: 1;}

    .review-complete-list.product-list .product-item-t,
    .review-complete-list.product-list .product-info-wrap {flex-direction: column; row-gap: var(--fs-20);}
}
@media screen and (max-width: 375px) {
    .badge {padding: 4px 8px; font-size: 10px;}
    .section-tit-wrapper {flex-direction: column; align-items: flex-start; row-gap: var(--fs-12);}

}

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