html {font-size: 62.5%; /* 16px */}
body {background: #fff; color: var(--col-bk); font-family: var(--font-family-base); font-size: 1.6rem; font-weight: 400; line-height: 1.25;}

@media (min-width: 1921px) {
    html {font-size: 70.4%; /* 18px */}
}
@media (max-width: 992px) {
    html {font-size: 58.6%; /* 15px */}
}


/* 컨테이너 */
.container {width: 100%; max-width: 1275px; margin: 0 auto;}
.subPage {min-height: 60dvh; margin-top: 2rem; padding-bottom: 7rem;}
@media (max-width: 1320px) {
    .container {padding: 0 2rem;}
}



/*============================================================*/
/* 상단 링크 */
/*============================================================*/
.highest .container {display: flex; justify-content: flex-end; align-items: center; gap: 1.4rem; height: var(--high-height);}
.highest a,
.highest button {display: block; padding: 0.65rem 0.9rem; font-size: 14px; line-height: 1;}
.highest a:last-child,
.highest button:last-child {background: var(--col-theme); color: #fff;}

.highest a:focus-visible,
.highest button:focus-visible {box-shadow: var(--focus-shadow);}
@media (max-width: 576px) {
    .highest {display: none;}
}



/*============================================================*/
/* 헤더 */
/*============================================================*/
header .container {display: flex; justify-content: space-between; align-items: center; height: var(--hd-height); transition: var(--trans-45);}

/* 로고 */
.hd-logo {flex-shrink: 0; height: 3rem; aspect-ratio: 180/29; background: url('/img/logo/horiz_bk.png') left center/auto 100% no-repeat;}
.hd-logo button,
.hd-logo a {display: block; width: 100%; height: 100%;}
.hd-logo button:focus-visible,
.hd-logo a:focus-visible {box-shadow: var(--focus-shadow);}

/* 우측 버튼 */
header .right {flex-shrink: 0; position: relative; display: flex; align-items: center; gap: 2rem; height: 100%; margin-right: -0.6rem;}
header .btn-area {display: flex; align-items: center; gap: .8rem;}
header .btn-area a {font-size: 2rem;}
header .btn-area .btn-mypage,
header .btn-area .btn-like,
header .btn-area .btn-cart {display: block; width: 3.6rem; aspect-ratio: 1; background-position: center; background-size: 2.4rem; background-repeat: no-repeat;}
header .btn-area .btn-mypage {background-image: url("/img/icon/user.png");}
header .btn-area .btn-like {background-image: url("/img/icon/heart.png");}
header .btn-area .btn-cart {background-image: url("/img/icon/basket.png");}
header .btn-area a:focus-visible {box-shadow: var(--focus-shadow);}

/* 햄버거 아이콘 */
.btn-burger {display: none; justify-content: center; align-items: center; width: 3.6rem; aspect-ratio: 1; font-size: 1.8rem;}

@media (max-width: 1320px) {
    header .right {margin-right: 0;}
}
@media (max-width: 790px) {
    header .search-line {display: none;}
}
@media (max-width: 576px) {
    header {top: 0;}
    header .container {height: var(--hd-height-m); padding: 0 1rem 0 2rem;}
    .hd-logo {height: 2.3rem;}
    header .right {gap: 1rem;}
    header .btn-area a:not(.btn-cart) {display: none;}
    .btn-burger {display: flex;}
}



/*============================================================*/
/* footer */
/*============================================================*/
footer {padding: 2.8rem 0; background: #F8F8F8;}

.ft-link {display: flex; flex-wrap: wrap; margin-left: -1rem;}
.ft-link a {padding: 0.5rem 1rem; font-size: 14px;}

.ft-info {display: flex; flex-wrap: wrap; gap: 0 2.4rem; margin-top: 1.6rem;}
.ft-info span {color: rgba(34,34,34,0.5); font-size: 14px; line-height: 1.5;}
.ft-info .address {width: 100%;}

footer .marketing {margin-top: 5rem;}
footer .marketing > div {margin-bottom: .6rem; font-size: 12px;}
footer .marketing > p {color: rgba(34,34,34,0.5); font-size: 14px; line-height: 1.4;}



/*============================================================*/
/* GNB */
/*============================================================*/
.gnb {margin-top: 2.2rem;}

/* 1차 메뉴 */
.gnb .depth1 {display: flex; justify-content: center; align-items: center; gap: 3rem; border-bottom: 1px solid var(--col-bd-gray);}
.gnb .depth1 a {position: relative; padding: 2rem 1rem; font-size: 1.8rem; font-weight: 700;}
.gnb .depth1 a.active {color: var(--col-red);}
.gnb .depth1 a.active::before {content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 10px; aspect-ratio: 10/12; background: url("/img/gnb_active.png") center/contain no-repeat;}
@media (hover: hover) and (pointer: fine) {
    .gnb .depth1 a:hover {color: var(--col-red);}
}

/* 2차 메뉴 */
.gnb .depth2 {display: flex; justify-content: center; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--col-bd-gray);}
.gnb .depth2 a {position: relative; padding: 2rem 1rem; font-size: 14px; font-weight: 700;}
.gnb .depth2 a.active {color: var(--col-red);}
.gnb .depth2 a.active::before {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 3px; background: var(--col-red);}
@media (hover: hover) and (pointer: fine) {
    .gnb .depth2 a:hover {color: var(--col-red);}
}

@media (max-width: 768px) {
    .gnb .depth1 {gap: 0;}
    .gnb .depth1 a {padding: 1.6rem 1rem;}
    .gnb .depth2 {gap: 0;}
    .gnb .depth2 a {padding: 1.6rem 1rem;}
}
@media (max-width: 576px) {
    .gnb {display: none;}
}



/*============================================================*/
/* 사이트맵 */
/*============================================================*/
.sitemap {max-height: 0; opacity: 0; transform: translateY(-1rem); overflow: hidden; visibility: hidden; pointer-events: none; transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.3s ease; position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: space-between; background: #fff; z-index: 10;}
.sitemap.open {min-height: 100dvh; max-height: none; opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; padding: 1rem 1rem 3rem 2rem;}

.sitemap .top-btn {display: flex; justify-content: flex-end;}
.sitemap .top-btn .btn-close {width: 3.6rem; aspect-ratio: 1; background: url("/img/icon/close_bk.svg") center/14px no-repeat;}

.sitemap .btm-btn {display: flex; justify-content: flex-end; align-items: center; gap: 1.4rem; height: var(--high-height);}
.sitemap .btm-btn a,
.sitemap .btm-btn button {display: block; padding: 0.65rem 0.9rem; font-size: 14px; line-height: 1;}
.sitemap .btm-btn a:last-child,
.sitemap .btm-btn button:last-child {background: var(--col-theme); color: #fff;}

.sitemap .depth-wrap {display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8vw; line-height: 1; word-break: break-all;}
.sitemap .depth-wrap + .depth-wrap {margin-top: 6rem;}
.sitemap .depth1 {flex-shrink: 0; font-size: 2.4rem; font-weight: 700;}

.sitemap .depth2 {display: flex; flex-wrap: wrap; gap: 2.2rem;}

@media (hover: hover) and (pointer: fine) {
    .sitemap .depth1:hover {color: var(--col-red);}
    .sitemap .depth2 a:hover {color: var(--col-red);}
}



/*============================================================*/
/* 페이지 제목 */
/*============================================================*/
.page-title {padding: 5.4rem 0 4.8rem; text-align: center;}
.page-title h2 {font-size: 2.4rem; font-weight: 700;}

/* 브래드크럼 */
.breadcrumbs {display: flex; justify-content: flex-start; align-items: center; gap: 2.8rem; margin-bottom: 1.6rem;}
.breadcrumbs > div {position: relative; color: var(--col-darkgray); font-size: 12px; font-weight: 400; line-height: 1;}
.breadcrumbs > div:not(:last-child)::before {content: ""; position: absolute; top: 50%; right: -1.8rem; transform: translateY(-50%); width: 1rem; aspect-ratio: 1; background: url('/t_seller/img/icon/bread_arrow_gray.svg') center/contain no-repeat;}