@font-face { font-family: 'Noto Sans SC'; src: url(/assets/fonts/NotoSansSC-Light.ttf) format("truetype"); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Noto Sans SC'; src: url(/assets/fonts/NotoSansSC-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Noto Sans SC'; src: url(/assets/fonts/NotoSansSC-Medium.ttf) format("truetype"); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Noto Sans SC'; src: url(/assets/fonts/NotoSansSC-SemiBold.ttf) format("truetype"); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Noto Sans SC'; src: url(/assets/fonts/NotoSansSC-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; }

/* 전체 공통 */
:root {
  --swiper-navigation-size: 2rem;
}

body {font-family: 'Noto Sans SC', -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif, !important;}
/* .content {padding: calc(var(--phoenix-navbar-top-height) + 2rem) 1rem 6.375rem 1rem;} */
.flex-1 {flex: 1}
.rotate-180 {transform: rotate(180deg);}
.word-keep {word-break: keep-all;}
.form-control-xs {min-height: calc(1em + 0.5rem + calc(var(--phoenix-border-width) * 2)); padding: .15rem 0.5rem;}
.aspect-1-1 {aspect-ratio: 1/1;}

.hover-text-body:hover {color:var(--phoenix-body-color) !important}
.hover-text-primary:hover {color:var(--phoenix-primary) !important}
  
/* form */
.form-floating>label {font-size: .8rem; padding: 0.8rem 1rem; color: rgba(var(--phoenix-body-color-rgb), 0.5); font-weight: 600;}
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-control-plaintext~label, .form-floating>.form-select~label {color: rgba(var(--phoenix-body-color-rgb), 0.5);}

/* 버튼 */
.btn-subtle-white {
  --phoenix-btn-color: #525b75;
  --phoenix-btn-bg: white;
  --phoenix-btn-border-color: white;
  --phoenix-btn-hover-color: #525b75;
  --phoenix-btn-hover-bg: var(--phoenix-secondary-lighter);
  --phoenix-btn-hover-border-color: #f1f3f7;
  --phoenix-btn-focus-shadow-rgb: 215, 219, 227;
  --phoenix-btn-active-color: #000000;
  --phoenix-btn-active-bg: #f2f5f8;
  --phoenix-btn-active-border-color: #f1f3f7;
  --phoenix-btn-active-shadow: initial;
  --phoenix-btn-disabled-color: #000000;
  --phoenix-btn-disabled-bg: white;
  --phoenix-btn-disabled-border-color: white;
}
.btn-phoenix-secondary.bg-white:hover:not(:disabled) {border-color: var(--phoenix-gray-400);}
.btn-phoenix-success.bg-white:hover:not(:disabled) {border-color: var(--phoenix-success-light);}
.btn-phoenix-primary.bg-white:hover:not(:disabled) {border-color: var(--phoenix-primary-light);}
.btn-phoenix-danger.bg-white:hover:not(:disabled) {border-color: var(--phoenix-danger-light);}
.btn-phoenix-warning.bg-white:hover:not(:disabled) {border-color: var(--phoenix-warning-light);}
.btn-phoenix-info.bg-white:hover:not(:disabled) {border-color: var(--phoenix-info-light);}

.btn.copytext-btn {padding: 1px; position: relative}
.copytext-btn.copy-success::before {
  content: '복사완료';
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  transform: translateX(-50%);
  background: var(--phoenix-gray-300);
  width: 61px;
  padding: 0.25rem;
  font-size: 0.8rem !important;
  border-radius: 0.25rem;
  color: var(--phoenix-secondary-darker);
  font-weight: 700;
  z-index: 99;

}


/* 스크롤바 */
::-webkit-scrollbar { -webkit-appearance: none; }
::-webkit-scrollbar:vertical { width: 8px; }
::-webkit-scrollbar:horizontal { height: 8px; }
::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(21, 24, 29, 0.3); } 
::-webkit-scrollbar-track { background-color: var(--phoenix-secondary-bg); border-radius: 5px; } 

.scrollbar-thin *::-webkit-scrollbar, .scrollbar-thin::-webkit-scrollbar { -webkit-appearance: none !important; }
.scrollbar-thin *::-webkit-scrollbar:vertical, .scrollbar-thin::-webkit-scrollbar:vertical { width: 5px !important; }
.scrollbar-thin *::-webkit-scrollbar:horizontal, .scrollbar-thin::-webkit-scrollbar:horizontal { height: 5px !important; }
.scrollbar-thin *::-webkit-scrollbar-thumb, .scrollbar-thin::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(21, 24, 29, 0.3) !important; }
.scrollbar-thin *::-webkit-scrollbar-track, .scrollbar-thin::-webkit-scrollbar-track { background-color: rgba(224, 226, 230, 0.5); border-radius: 8px !important; } 


/* ----------------------- 상품 리스트 -------------------- */
/* 상품메모 */
.memo-group .memo-btn:hover {background-color: var(--phoenix-warning-lighter) !important;}
.memo-group .memo-box {top: 110% !important;}
@media (max-width: 576px) {
  .memo-group .memo-box {left: auto !important; right: 0;}
}
/* 상품메모 끝*/

/* 상품 트래킹 */
.item .trk {font-size: 0.8rem; position: relative;}
.item .trk::before { content: 'T'; font-weight: bold; font-size: 0.8rem; position: absolute; left: 0; top: 0; z-index: 6; padding-left: 0.35rem; line-height: 24px; color: var(--phoenix-primary); }
.item .trk .tracking-add {width: clamp(140px,100%,180px);} 
.item .trk .tracking-add input {height: 24px; min-height: 24px; line-height: 24px; border-radius: 5px 0 0 5px !important; padding-left: 1.15rem; padding-right: 0.25rem;}
.item .trk .tracking-add button {height: 24px; line-height: 23px; padding: 0 0.35rem; line-height: 1;}

/* 아이템 리스트 */
.item-list {container-type: inline-size; container-name: item-container;}
.item-list .item:last-child {border-bottom: none !important;}
.item-list .item, .item-list .list.header {grid-template-columns: 19px 8% clamp(90px, 9%, 140px) clamp(80px, 17%, 240px) 1fr clamp(35px, 3%, 70px) clamp(130px, 10%, 150px) clamp(140px, 10%, 160px);}
.item-list .item .bottom { grid-column: 1/-3; grid-template-columns: 1fr clamp(500px, 56%, 800px)}
.item-list .item .bottom .btn-wrap {grid-template-columns: auto auto auto;}
.item-list .item .buttons {grid-row: span 2;}
.item-list .item .fee {grid-template-columns: clamp(35px, 11%, 11%) clamp(80px, 14%, 100px) clamp(55px, 12%, 12%) clamp(56px, 16%, 16%) clamp(66px, 18%, 18%) 1fr; gap: 0.5rem !important;}
.fee .form-floating>.form-control {padding-left:0.75rem !important; padding-right: 0.75rem !important;}
.fee .form-floating>label {padding: 0; position: absolute; left: 50%; top: 0; transform: translateX(-50%); transition: all 0.3s; overflow: visible; text-align: center; display: flex ; justify-content: center; align-items: center;}
.fee .form-floating>.form-control:focus~label, .fee .form-floating>.form-control:not(:placeholder-shown)~label, .fee .form-floating>.form-control-plaintext~label, .fee .form-floating>.form-select~label {transform: scale(0.85) translateY(-0.4rem) translateX(0.75rem); left: 0;}
.fee input[type="number"]::-webkit-inner-spin-button, .fee input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

@container item-container (max-width: 1200px) {
  .item-list .item, .item-list .list.header {
    grid-template-columns: 19px 8% clamp(90px, 9%, 140px) clamp(80px, 17%, 240px) 1fr clamp(35px, 3%, 70px) clamp(120px, 10%, 150px) clamp(140px, 10%, 160px);
}
  .item-list .item .name, .item-list .item .code, .item-list .item .qty *, .item-list .item .price {font-size: 0.85rem !important;}
}

  @container item-container (max-width: 1100px) {
  .item-list .item, .item-list .list.header {grid-template-columns: 19px 8% clamp(90px, 9%, 140px) clamp(80px, 17%, 220px) 1fr clamp(35px, 4%, 70px) clamp(115px, 10%, 160px); gap: 1rem 0.75rem !important;}
  .item-list .item .p-3 {padding: 0.75rem !important;}
  .item-list .item .buttons {grid-row: 3/4; grid-column: 1/-3; flex-direction: row !important; padding: 0 !important; border-left: none !important;}
  .item-list .item .buttons button {width: auto !important;}

  .item-list .item .timeline {grid-row: 3/4; grid-column: -3 / -1; flex-direction: row !important; align-items: center; }
  .item-list .item .bottom {grid-column: 1/-1;}
}
@container item-container (max-width: 830px) {
  .item-list .list.header .info{display: none !important} 
  .item-list .item, .item-list .list.header {grid-template-columns: 19px 13% 16% 1fr clamp(35px, 4%, 70px) clamp(125px, 11%, 160px);}
  .item-list .list.header {gap: 0 1rem !important;}
  .item-list .list.header * {text-align: center;}
  .item-list .item .product {grid-column: 1/ -1; grid-row: 2/3; background-color: rgba(var(--phoenix-body-bg-rgb)) !important; padding: 0.75rem; border-radius: var(--phoenix-border-radius-lg) !important;}
  .item-list .item .fee {grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem !important;}
  .item-list .item .price {text-align: end;}
  .item-list .item .timeline { grid-row: 4 / 5;}
  .item-list .item .bottom {grid-row: 3/4; grid-column: 1/-1; grid-template-columns: 1fr clamp(260px, 54%, 800px)}
  .item-list .item .buttons {grid-row: 4/5;}
  .item-list .item .p-3 {padding: 0.75rem !important;}
  .item .trk .tracking-add > *{background: white !important;}
  .item .trk .tracking-add button:hover {background-color: var(--phoenix-btn-hover-bg) !important;}
}
@container item-container (max-width: 600px) {
  .item-list .list.header {display: none !important}
  .item-list .item {grid-template-columns: 20px clamp(30px, 12%, 150px) 1fr auto; padding: 2rem 0 !important; gap: 0rem 0.75rem !important;}
  .item-list .item .checkbox {grid-row: 1 / 2; grid-column: 1/2;}
  .item-list .item .name {grid-column: 2/-2; grid-row: 1/2; display: flex; gap: 0.5rem; font-size: 1rem !important; margin-bottom: 0.25rem;}
  .item-list .item .code {grid-column: 2/-2; grid-row: 2/3; flex-direction: row !important; align-items: center !important; gap: 1rem !important; margin-bottom: 0.35rem; font-size: 1rem !important;}
  .item-list .item .timeline {grid-row: 3/4; grid-column: 2 / -2; flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 0.75rem; line-height: 1 !important; margin-bottom: 0.75rem; padding: 0 !important; background: none !important;}
  .item-list .item > .situation-badges {display: flex !important; flex-direction: column; grid-column: -2/-1; grid-row: 1/5; margin-bottom: 1rem;}
  .item-list .item .situation {grid-column: 1/-1; grid-row: 5/6; margin-bottom: 0.75rem; display: inline !important;}
  .item-list .item .situation .situation-badges {display: none !important;}
  .item-list .item .situation > *:not(.situation-badges) {gap: 0.75rem !important;}
  .item-list .item .situation > *:not(.situation-badges) .badge {flex: 1; padding: 0 0.75rem !important; line-height: 35px !important;}
  .item-list .item .situation > *:not(.situation-badges) .badge svg {font-size: 0.9rem !important;}
  .item-list .item .qty {grid-column: 1 / 3; grid-row: 6/7; padding: 0.5rem; background: var(--phoenix-body-bg); border-radius: var(--phoenix-border-radius-lg) !important; padding: 0.5rem; margin-bottom: 0.75rem; text-align: center;}
  .item-list .item .price {grid-column: 3 / -1; grid-row: 6/7; padding: 0.5rem;  background: var(--phoenix-body-bg); border-radius: var(--phoenix-border-radius-lg) !important; padding: 0.5rem; margin-bottom: 0.75rem; display: flex; justify-content: space-around;}
  .item-list .item .product {grid-row: 7/8; grid-column: 1 / -1; margin-bottom: 0.75rem}
  .item-list .item .product > .d-flex {justify-content: space-between;}
  .item-list .item .bottom {grid-row: 8/9; grid-template-columns: 1fr; gap: 0.75rem !important; margin-bottom: 1rem}
  .item-list .item .fee {grid-template-columns: clamp(35px, 11%, 11%) clamp(80px, 14%, 100px) clamp(55px, 12%, 12%) clamp(56px, 16%, 16%) clamp(66px, 18%, 18%) 1fr; gap: 0.5rem !important;}
  .item-list .item .bottom .history {min-height: 75px; grid-row: 2/3;}
  .item-list .item .buttons {grid-row: 9/10; grid-column: 1/-1;}
  .item-list .item .buttons .btn { padding: 0 0.75rem !important; line-height: 35px !important;}
  .item-list .item .qty * { font-size: 1rem !important;}
  .item-list .item .timeline * {font-size: 0.8rem !important;}
  .item-list a.badge-tag {background-color:rgba(var(--phoenix-body-bg-rgb), var(--phoenix-bg-opacity)) !important }
  .item-list a.badge-tag:hover, .item-list a.badge-tag:focus { background-color: var(--phoenix-secondary-bg) !important; }
}

@container item-container (max-width: 500px) {
  .item-list .item .fee {grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem !important;}

}

@container item-container (max-width: 400px) {
  .item-list .item {grid-template-columns: 20px clamp(15px, 8%, 150px) 1fr auto; padding: 2rem 0 !important; gap: 0rem 0.5rem !important;}
}

/* 아이템 리스트 끝 */