input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* accordion */
summary {
    display: block;
}
summary::-webkit-details-marker {
    display: none;
}

/* 이용약관, 개인정보처리방침 */
pre {
    white-space: pre-wrap;
    font-family: "Montserrat", "Noto Sans KR", sans-serif;
    margin: 0;
}

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

/* =================================================
    배송 조회 페이지 tracking
===================================================== */
.tracking-container {
    margin: auto;
}

.tracking-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.tracking-language {
    display: flex;
    gap: 8px;
    font-size: 16px;
}

.tracking-search__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
    padding: 0 16px;
}

.tracking-search__input {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 16px;
}

/* 검색 입력 인라인 에러 — material form error 패턴 (red text below input). */
.tracking-search__error {
    padding: 0 16px;
    margin-top: -14px;
    margin-bottom: 20px;
}

.tracking-item__wrap {
    margin-top: 0;
    padding: 20px 16px;
}

.tracking-item__wrap:not(.tracking-item__wrap--empty) {
    border-top: 10px solid #f2f2f2;
}

.tracking-item__wrap--empty {
    padding-top: 0;
}

#resultContainer > .tracking-item__wrap:last-child:not(.tracking-item__wrap--empty) {
    border-bottom: 1px solid #f2f2f2;
}

.tracking-item__title {
    height: 26px;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    margin-bottom: 10px;
}

.tracking-item__box {
    padding: 0;
    border: none;
    border-radius: 0;
}

.tracking-item__item {
    margin-bottom: 10px;
}

.tracking-item__item:last-child {
    margin-bottom: 0;
}

/* .tracking-item__name {
    width: 65px;
} */

.tracking-item__name-en {
    flex: 0 0 130px;
    font-size: 14px;
    word-break: normal;
    white-space: normal;
}

/* 배송조회 - 배송현황 타임라인 - 아이콘 */
.delivery-steps-icon__warp {
    display: flex;
    margin-bottom: 20px;
    word-break: break-word;
}

.delivery-steps-icon__item {
    display: flex;
    width: 25%;
    align-items: start;
    justify-content: center;
}

.delivery-steps-icon__img {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ddd;
    border-radius: 50rem;
}

.delivery-steps-icon__img img {
    object-fit: contain;
    transform: scale(0.8);
}

.delivery-steps-icon__text {
    font-size: 12px;
    margin-top: 4px;
    color: #999;
    text-align: center;
}

.delivery-steps-icon__item.active .delivery-steps-icon__img,
.delivery-steps-icon__item.active.dash:after {
    background-color: #00c1de;
}

.delivery-steps-icon__item.active .delivery-steps-icon__text {
    color: #333;
    font-weight: 500;
}

.dash {
    position: relative;
}

.dash:after {
    content: "";
    /* flex-shrink: 0; */
    width: 29px;
    height: 48px;
    opacity: 1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='44' height='3' viewBox='0 0 44 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.5' y1='1.5' x2='42.5' y2='1.5' stroke='%2300C2DE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='1 6'/%3E%3C/svg%3E%0A");
    mask: url("data:image/svg+xml,%3Csvg width='44' height='3' viewBox='0 0 44 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.5' y1='1.5' x2='42.5' y2='1.5' stroke='%2300C2DE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='1 6'/%3E%3C/svg%3E%0A");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    margin: 0 2px;
    background-color: #ddd;
    position: absolute;
    right: -18px;
    z-index: -1;
}

/* 배송조회 - 배송현황 타임라인 - 아이콘 텍스트 상세 */
.delivery-steps-text1 {
    font-size: 16px;
    font-weight: 700;
}

.delivery-steps-text2 {
    font-size: 12px;
    line-height: 1.21;
}

.delivery-steps-text2-time {
    margin: 6px 0 4px;
}

.view-detail {
    display: flex;
    gap: 2px;
}

.view-detail:hover {
    cursor: pointer;
}

.view-detail.active .icon-arrow-bottom,
details[open] .icon-arrow-bottom {
    transform: rotate(180deg);
}

.icon-arrow-bottom {
    display: inline-flex;
    width: 20px;
    height: 20px;
    opacity: 1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 7.5L10 12.5L5 7.5' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 7.5L10 12.5L5 7.5' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #333;
    transition: ease-in-out 0.3s;
}

/* 배송조회 - 배송현황 타임라인 */
.delivery-step__box {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: 16px;
}

.delivery-step__item {
    flex: 1;
    position: relative;
    z-index: -2;
    padding-left: 25px;
}

.delivery-step__item:not(:last-child) {
    padding-bottom: 16px;
}

.delivery-step__item:before {
    content: "";
    width: 1px;
    height: 100%;
    z-index: -1;
    background-color: #ccc;
    position: absolute;
    top: 2px;
    left: 7px;
}

.delivery-step__item-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: white;
    top: 2px;
    left: 0;
    z-index: 2;
    background: url(../image/icon-circle-gray.svg);
}

.delivery-step__item:last-child:before {
    display: none;
}

.delivery-step__item-title {
    display: flex;
    margin-bottom: 4px;
    font-size: 14px;
    color: #999;
    font-weight: 500;
}

.delivery-step__item-text {
    font-size: 12px;
    color: #999;
    line-height: 1.21;
}

/* 배송 처리 완료 타임라인 */
.delivery-step__item[attr="prev"]:before {
    /* background-color: #00C1DE; */
}

.delivery-step__item[attr="prev"] .delivery-step__item-dot {
    background: url(../image/icon-circle-primary.svg);
}

.delivery-step__item[attr="prev"] .delivery-step__item-title,
.delivery-step__item[attr="prev"] .delivery-step__item-text {
    color: #333;
}

/* 첫 항목 강조 (가장 최근 이벤트) */
.delivery-step__item:first-child .delivery-step__item-dot {
    background: url("/image/icon-circle-primary.svg");
}

.delivery-step__item:first-child .delivery-step__item-title,
.delivery-step__item:first-child .delivery-step__item-text {
    color: #333;
}

/* 현재까지 진행된 타임라인 */
/* .delivery-step__item[attr=prevprev] .delivery-step__item-dot {
    background: url(../image/icon-circle-primary.svg);
} */

/* .delivery-step__item[attr=prevprev] .delivery-step__item-title
.delivery-step__item[attr=prevprev] .delivery-step__item-text {
    color: #999;
    font-weight: 500;
} */

.tracking-item__error-text {
    margin-top: 20px;
    white-space: pre-line; /* getMultiWord 가 \n 으로 치환한 줄바꿈을 렌더 */
}

/* 404 등 페이지 레벨 에러 — ndp deleo-tracking-ui/front/pages/common-error-page 디자인 차용. */
.tracking-error__wrap {
    padding: 40px 20px;
    text-align: center;
}

.tracking-error__img {
    display: block;
    width: 240px;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
}

.tracking-error__title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 16px 0 12px;
}

.tracking-error__content {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    white-space: pre-line; /* getMultiWord 가 \n 으로 치환한 줄바꿈을 렌더 */
}

@media (min-width: 768px) {
    .tracking-error__title {
        font-size: 24px;
    }
}