/* include 공통 CSS */

/************************* 공통 시작*************************/
.inner {width: 100%; max-width:var(--inner); margin: 0 auto; padding: 0 16px;}

.sub-container {padding-bottom: 10em;}

[data-icon] {position: relative; background-repeat: no-repeat; background-size: cover; background-position: center;}
[data-icon]:before,
[data-icon]:after {content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-repeat: no-repeat; background-size: cover; background-position: center; transition: .3s;}
[data-icon]:after {opacity: 0;}
@media(hover:hover){
	[data-icon]:hover:before {opacity: 0;}
	[data-icon]:hover:after {opacity: 1;}
}

.text-center { text-align: center; }
.primary { color: var(--primary); }
.text-white { color: #fff; }

.rounded { border-radius:1em; }
.rounded-md { border-radius:1.25em; }

.gray-300 { color: var(--gray-300); }
.gray-400 { color: var(--gray-400); }
.gray-500 { color: var(--gray-500); }
.gray-600 { color: var(--gray-600); }

.int-panel { display: flex; flex-direction:column; gap:2.1em; }
.int-panel--between { flex-direction:row; justify-content: space-between; align-items: flex-end; }
.int-panel--center { justify-content: center; align-items: center; text-align: center; }

.border-1 { border:1px solid var(--dark); }
.border-primary { border-color:var(--primary); }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.ls-5 { letter-spacing: -0.05em; }
.ls-4 { letter-spacing: -0.04em; }
.ls-3 { letter-spacing: -0.03em; }
.ls-2 { letter-spacing: -0.02em; }

.uppercase {text-transform: uppercase;}

.lh-100 { line-height: 1; }
.lh-120 { line-height: 1.2; }
.lh-130 { line-height: 1.3; }
.lh-140 { line-height: 1.4; }
.lh-170 { line-height: 1.7; }
.lh-180 { line-height: 1.8; }

.text-8xl { font-size: var(--text-8xl); }
.text-7xl { font-size: var(--text-7xl);}
.text-6xl { font-size: var(--text-6xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-xl { font-size: var(--text-xl); }
.text-lg { font-size: var(--text-lg); }
.text { color: var(--gray-600); }
.text-sm { font-size: 0.875em; }

.text-right {text-align:right;}

.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.justify-between { justify-content: space-between; }

.card { display: grid; }
.card--col-2 { grid-template-columns: repeat(2, 1fr); }
.card--col-3 { grid-template-columns: repeat(3, 1fr); }
.card--col-7 { grid-template-columns: repeat(7, 1fr); }

.card__item { display: flex; flex-direction:column; min-width: 0; overflow: hidden; }
.card__item--full { grid-column:1 / -1; }
.card__info { flex:1; display: flex; flex-direction:column; gap:1.5em; padding: 2.25em 2.45em; }

.ellipsis-1 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ellipsis-2 { display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ellipsis-3 { display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }


/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header {padding-top: var(--hd-gap); font-size: var(--fz);}
.header--main {padding-top: 0;}
.header__fix {position: fixed; left:0; top:0; z-index: 100; width:100%; font-size: var(--fz); background-color: #fff; height:var(--hd-gap); overflow: hidden; box-shadow:var(--shadow-1); transition:.3s;}
.header__inner {display: flex; max-width:1752px; margin: 0 auto; padding:0 16px; justify-content: space-between; align-items: center; height: var(--hd-gap);}

.header-home__logo {width: 15.8332em; transition:.3s;}

.header-navi {height: 100%;}
.header-navi__m-list {display: flex; gap:4.5em; height: 100%;}
.header-navi__m-item {position: relative; height: 100%;}
.header-navi__m-btn {display: flex; justify-content: center; align-items: center; height: 100%; transition: .3s}
.header-navi__s-list {position: absolute; top: 100%; padding:0.25em 0; left: 50%; transform:translateX(-50%); min-width: 100%; text-align: center;}
.header-navi__s-btn {display: block; padding:0.25em 0; white-space:nowrap; transition: .3s}

@media(max-width:1080px){
	.header-navi {display: none;}
}

.header-drawer {display: none; position: relative; margin-left: 1.5em;}
.header-drawer__btn {position: relative; width: 20px; height: 14px; z-index: 0; transition:.3s;}
.header-drawer__line {position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--dark); transition:.3s;}
.header-drawer__line--top {top: 0;}
.header-drawer__line--middle {top: 50%; transform:translateY(-50%)}
.header-drawer__line--bottom {bottom: 0;}
@media(hover:hover){
	.header-drawer__btn:hover .header-drawer__line--top{left: -0.25em;}
	.header-drawer__btn:hover .header-drawer__line--middle{left: 0.25em;}
	.header-drawer__btn:hover .header-drawer__line--bottom{left: -0.125em;}
}
@media(max-width:1080px){	
	.header-drawer {display:block;}
}

.header-login__list {display: flex; align-items: center;}
.header-login__icon {display: block; width: 3.125em; height: 3.125em;}
.header-login__icon:before {background-image: url('./img/icon_cart_default.svg');}
.header-login__icon:after {background-image: url('./img/icon_cart_primary.svg');}
.header-login__btn {display: flex; justify-content: center; align-items: center; min-width: 4.4em; text-align: center; padding:0 0.5em;}

@media(max-width:1080px){	
	.header-login {margin-left: auto;}
}


/************************* header_inc 끝*************************/

/************************* tabmenu 시작 *************************/
.tab-menu__list {display: flex; padding-bottom: 0.45em; gap:2em;}
.tab-menu__btn {display: block; line-height: 1;}
.tab-menu__btn[aria-current="page"] {color: var(--primary);}

/************************* sub-tabmenu 끝 *************************/

/************************* depth3 시작 *************************/
.depth3__list {display: flex; flex-flow: row wrap;}
.depth3__item {flex:1;}
.depth3__item:last-child {border:0;}
.depth3__btn {padding:1.5em 0.75em; width: 100%; height: 100%; display: flex; align-items: center;justify-content: center; border-bottom:2px solid var(--gray-300); transition:.3s}
.depth3__btn--crt {border-color:var(--primary);}
@media(hover:hover){
	.depth3__btn:hover {border-color:var(--primary);}
}
/************************* depth3 끝 *************************/


/************************* footer_inc 시작 *************************/
.footer {padding:2.4em 0 1.892em; background-color: var(--gray-50); font-size: var(--fz);}
.footer__inner {max-width:1752px; margin: 0 auto; padding:0 16px;}
.footer__panel {display: flex; gap:2.8em;}
.footer__panel--center {margin-bottom: 2.1em; padding-bottom: 2.5em;  align-items: center; border-bottom:1px solid var(--gray-200)}
.footer__panel--bottom {align-items: flex-end; justify-content: space-between;}
.footer__home {display: block;}
.footer__logo {width: 11.5625em;}
.footer__terms {display: flex; align-items: center; gap:0.9375em}
.footer__nav {display: flex; margin-left: auto; gap: 0.6875em;}
.footer__sns {width: 1.875em; height: 1.875em;}
.footer__sns--ist:before {background-image: url('./img/ist_logo.svg');}
.footer__sns--fb:before {background-image: url('./img/fb_icon.svg');}
.footer__sns--ytb:before{background-image: url('./img/ytb_icon.svg');}
.footer__sns--ist:after {background-image: url('./img/ist_logo_on.svg');}
.footer__sns--fb:after  {background-image: url('./img/fb_icon_on.svg');}
.footer__sns--ytb:after {background-image: url('./img/ytb_icon_on.svg');}
.footer__content {margin-bottom: 1em;}
.footer__content:last-child {margin-bottom: 0;}
.footer__detail {display: flex; gap:1em;}
@media(max-width:1320px){
	.footer__panel--bottom {flex-direction: column; align-items: flex-start; gap:1.5em;}
}
@media(max-width:500px){
	.footer__panel--center {margin-bottom: 1.5em; padding-bottom: 1.5em; flex-direction:column; align-items: flex-start; gap:1em;}
	.footer__nav {margin-left: 0;}
}
/************************* footer_inc 끝 *************************/

.ui-btn {display: flex; justify-content: center; align-items: center; width: 100%; height: 3.4em; font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; background-color: var(--primary); color: #fff; text-align: center; border-radius:0.5em; transition: .3s}
.ui-btn--login {font-size: var(--text-lg); height: 3em;}
.ui-btn--opacity {background-color:var(--gray-50); color: var(--gray-400);}
.ui-btn--350 {width: 17.5em; height: 3.5em; font-size: var(--text-lg);}
@media(hover:hover){
	.ui-btn:hover {background-color: var(--dark); color: #fff;}
	.ui-btn--opacity:hover {background-color: var(--primary);}
}

@media(max-width:1024px){
	.ui-btn--350 {max-width:calc(50% - 0.5em); width: auto; flex:1; margin: 0 auto;}
}

@media(max-width:600px){
	.ui-btn--350 {flex:none; max-width:100%; width: 100%;}
}

.ui-checkbox {appearance: none; -webkit-appearance: none; width: 1.25em; height: 1.25em; border-radius:2px; border:2px solid var(--dark); cursor:pointer;}
.ui-checkbox:checked {background: url('./img/checkbox_icon.svg') no-repeat center / cover;}

.ly-form__container {padding-top: 4.5em; display: flex; justify-content: space-between; align-items: flex-start; gap:1em;}
.ly-form__int {position:sticky; top: calc(var(--hd-gap) + 2em);}
.ly-form__form {width: 48.2559%;}
.ly-form__form--full {width: 100%;}
.ly-form__fieldset {display: grid; grid-template-columns: repeat(1, 1fr); gap:2.9em 0;}
.ly-form__fieldset--col-2 {grid-template-columns: repeat(2, 1fr); gap:2.9em 3.75em;}
.ly-form__item {display: flex; flex-direction:column; gap:1.2em;}
.ly-form__item--full {grid-column: 1/-1;}
.ly-form__cate {display: block; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 0.8;}
.ly-form__cate--req:after {margin-left: 0.25em; content:'*'; color: var(--alert);}
.ly-form__label {font-size: var(--text-lg); font-weight: 500; color: var(--gray-600); letter-spacing: -0.02em;}
.ly-form__label--file {display: flex; align-items: center; gap:1.25em; color: var(--dark); min-width: 0; white-space:nowrap; overflow: hidden; text-overflow:ellipsis}
.ly-form__label--file:before {display: block; content:''; width: 0.8em; height: 0.8em; background: url('./img/file_icon.svg') no-repeat center / cover;}
.ly-form__group {display: flex; flex-wrap:wrap; align-items: center; gap:1.55em;  min-height: 4.25em; border:1px solid var(--gray-200); backdrop-filter:blur(10px); border-radius:.625em; overflow: hidden;}
.ly-form__group--option {padding:0 1.45em; max-width:100%; flex-wrap:nowrap; min-width: 0;}
.ly-form__group--text {display: grid; grid-template-columns: repeat(3, 1fr); gap:0.625em; border:none; overflow: initial; padding: 0;}
.ly-form__radio {appearance:none; -webkit-appearance:none; width: 0.9375em; height: 0.9375em; border:1px solid var(--gray-200);}
.ly-form__field {display: flex; align-items: center; gap:0.6em; cursor:pointer;}
.ly-form__file {display: none;}
.ly-form__btn {display: flex; justify-content: center; align-items: center; width: 4.0625em; height: 2.1875em; font-weight: 500; color: #fff; text-align: center; background-color: var(--dark); border-radius:5px; cursor:pointer;}
.ly-form__fieldset {margin-bottom: 3em;}
.ly-form__input {width: 100%; height: 100%;}

@media(max-width:768px){
	.ly-form__container {flex-direction: column; gap:2em;}
	.ly-form__int {position:static;}
	.ly-form__form {width: 100%;}
	.ly-form__fieldset--col-2 {grid-template-columns: repeat(1, 1fr);}
}
.ly-table {width: 100%; border-top:2px solid var(--dark); border-left:1px solid var(--gray-200); border-right:1px solid var(--gray-200)}
.ly-table__td {text-align: center;}
.ly-table__content {text-align:left; min-height: 6.25em; display: flex; align-items: center; gap:1.25em; padding: 0 1.25em;}
.ly-table__frame {min-width: 5em;}
.ly-table__name {padding:0.75em 0; font-size: var(--text-lg); font-weight: 600; color: var(--gray-600); letter-spacing: -0.03em; flex:1;}
.ly-table__remove {display: inline-block; font-size: var(--text-lg); font-weight: 600;}

/* ★ 기본 그리드: 8칸 (PO# / Order Date / Due Date / Item / Goods Ready Date / Ship Date(ETD) / STATUS / Remark) */
.ly-table__grid {display: grid; width: 100%; grid-template-columns: 12% 8% 8% 20% 12% 10% 14% 16%; align-items: center; min-width: 0; grid-template-rows: minmax(3.75em, auto);}

.ly-table__wrap--header {background-color: var(--primary); color: #fff;}
.ly-table__cell {padding:0.5em; display: flex; justify-content: center; align-items: center; height: 100%; text-align: center; border-right: 1px solid var(--gray-200)}
.ly-table__cell:last-child {border-right:none;}
.ly-table__grid--body {border-bottom:1px solid var(--gray-200)}
.ly-table__more {display: flex; justify-content: center; align-items: center; width: 7.1429em; height: 2.2858em; font-size: 0.875em; font-weight: 600; text-align: center; letter-spacing: -0.03em; color: var(--gray-600); background-color: var(--gray-100); border-radius:5px;} 

/* 모달 히스토리 테이블 그리드 (4칸 유지) */
.ly-table__grid[data-grid="order"] {grid-template-columns: 16.3044% 17.2102% 1fr 17.2102%;}
.ly-table__grid[data-status="pending"] {background-color: #d83d39;}
.ly-table__grid[data-status="pending"] span {color: #fff;}

.ly-table__thead {background-color: var(--gray-50);}
.ly-table__thead .ly-table__text {display: block; padding:0.9em 1em; font-size: var(--text-lg); font-weight: 600;}
@media(max-width:768px){
	.ly-table--cart {display: block;}
	.ly-table--cart .ly-table__thead {display: none;}
	.ly-table--cart .ly-table__content {padding: 0; gap:0;}
	.ly-table--cart .ly-table__name {padding: 0 1em;}
}
@media(max-width:500px){
	.ly-table__frame {width: 100%;}
	.ly-table__frame img {width: 100%;}
	.ly-table--cart .ly-table__content {flex-direction: column;}
	.ly-table--cart .ly-table__name {padding:0.5em 0;}
}
.ly-table__tbody .ly-table__tr {border-bottom:1px solid var(--gray-200)}
.ly-table__tbody .ly-table__td {vertical-align: middle;}
.ly-table__tbody .ly-table__td--date {font-size: 1.25em;}
@media(max-width:768px){
	.ly-table--cart .ly-table__tbody {display: block; }
	.ly-table--cart .ly-table__tbody .ly-table__tr {position: relative; display: flex; flex-wrap:wrap; align-items: center; width: 100%; padding:1.5em; gap:1em;}
	.ly-table--cart .ly-table__tbody .ly-table__td {text-align:left;}
	.ly-table--cart .ly-table__tbody .ly-table__td--check {width: 100%;} 
	.ly-table--cart .ly-table__tbody .ly-table__td--item {flex:1}
	.ly-table--cart .ly-table__tbody .ly-table__td--remove {position: absolute; top: 0; right: 0; margin:1.5em 1.5em 0 0;}
	.ly-table--cart .ly-table__tbody .ly-table__td--date {align-self: center;}
}
@media(max-width:500px){
	.ly-table--cart .ly-table__tbody .ly-table__tr {padding:1em;}
	.ly-table--cart .ly-table__tbody .ly-table__td--item {flex:none; width: auto; margin-right: auto;}
	.ly-table--cart .ly-table__tbody .ly-table__td--remove {margin:1em 1em 0 0;}
}
.my-page {padding-top: 9.5em;}
.my-page__container {padding-top: 4.5em;}
.my-page__ctrl {display: flex; justify-content: center; gap:1.25em; margin: 5.125em auto 0; width:max-content;}
.my-page__form {margin-top: 5em; padding: 5em 0;  border-top:1px solid var(--dark);}
@media(max-width:1024px){
	.my-page__ctrl {width: 100%;}
}
@media(max-width:600px){
	.my-page__ctrl {flex-direction:column;}
}

.form-input {display: block; width: 100%; font-size: var(--text-lg); color: var(--gray-600); background-color: #fff; letter-spacing: -0.02em; min-height: inherit; padding:0 1.2em;}
.form-input--border {border:1px solid var(--gray-200); border-radius:.625em;}
.form-input--textarea {padding-top: 1.2em; padding-bottom: 1.2em; height: 10em;}
.form-input--height {min-height: auto; height: 3.4em;}
.form-input::placeholder {color: var(--gray-300);}


/************************* split-text *************************/
.split-text__word {font-size: inherit;}
.split-text__letter {display: inline-block; font-size: inherit;}
.split-text--no-delay .split-text__letter {transition-delay:0s !important; animation-delay:0s !important;}