body {
    letter-spacing: -0.025em;
    word-break: keep-all;
    color: #393939;
    font-weight: 500;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

h1,
h2,
.font-black {
    font-weight: 900;
}

nav ul li a {
    display: inline-block;
    padding: 0 4px;
    transition: color 0.2s ease;
}

.text-onnuriGray {
    color: #656565;
}

.mobile-only {
    display: none !important;
}

.pc-only {
    display: flex;
}

@media (max-width: 768px) {

    .pc-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    .mobile-only-block {
        display: block !important;
    }

    .mobile-only-grid {
        display: grid !important;
    }

    body {
        padding-bottom: 70px;
        /* 하단 네비 공간 */
        overflow-x: hidden;
    }

    /* 전체 화면 창(카테고리 메뉴, 상품 상세 옵션 시트)이 열린 동안 뒤 페이지 스크롤 잠금.
       잠그지 않으면 창 안 목록이 끝에 닿을 때 뒤 페이지가 움직이고, 주소창이 접히며 resize 가 난다 */
    body.scroll-lock {
        overflow: hidden;
    }

    .notice-banner-inner {
        flex-direction: row;
        gap: 8px;
    }

    .notice-banner-inner span {
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-util {
        display: none !important;
    }

    /* 띠배너와 로고 사이 여백을 15px → 20px (위만 5px 더) */
    .header-logo-row {
        height: 61px !important;
        padding: 5px 16px 0 !important;
    }

    .header-logo-row img {
        height: 26px !important;
    }

    .search-input-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-input-wrap input {
        font-size: 13px !important;
    }

    .header-icon-group {
        gap: 16px !important;
    }

    .header-icon-group a i {
        font-size: 20px !important;
    }

    .sticky-nav {
        overflow-x: visible !important;
        /* 전체 스크롤 해제 */
        -webkit-overflow-scrolling: auto;
    }

    .sticky-nav::-webkit-scrollbar {
        display: none;
    }

    .sticky-nav .nav-inner {
        min-width: auto !important;
        /* 고정 너비 해제 */
        padding: 0 16px !important;
        display: flex !important;
        /* 그리드가 아닌 플렉스 유지 */
        overflow: hidden;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .sticky-nav .nav-inner li a {
        font-size: 13px !important;
        padding: 0 8px;
        white-space: nowrap;
    }

    .sticky-nav .cat-btn {
        padding: 0 10px 0 0 !important;
        margin-right: 8px !important;
        font-size: 0 !important;
        /* 텍스트 숨기기 */
        background: white;
        /* 뒤에 메뉴가 지나가도 안 보이게 배경색 부여 */
        z-index: 20;
    }

    .sticky-nav .cat-btn i {
        font-size: 18px !important;
        margin: 0 !important;
    }

    .sticky-nav .cat-btn .cat-label-text {
        display: none;
    }

    #category-menu-wrap {
        width: 100vw !important;
        left: 0 !important;
    }

    #category-menu-wrap>div {
        min-height: auto !important;
        flex-direction: column !important;
    }

    #category-menu-wrap>div>ul {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 8px !important;
        gap: 4px !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
    }

    #category-menu-wrap>div>ul li {
        border-radius: 8px;
        padding: 10px 8px !important;
        justify-content: center !important;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-align: center;
    }

    #category-menu-wrap>div>ul li .chevron {
        display: none;
    }

    #category-menu-wrap>div>ul li span {
        font-size: 12px !important;
    }

    #sub-menu-area {
        width: 100% !important;
        padding: 12px !important;
    }

    #sub-menu-area .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    /* 페이지 안 고정 요소(상단 바 z-50 등)보다 위, 화면 위에 뜨는 창(fixed inset-0 덮개 — 장바구니 창·목록 필터 시트·모달, z-[90] 이상)보다 아래.
       덮개보다 높으면 장바구니 창 맨 아래 [바로 구매]·[장바구니] 줄을 덮는다 (MobileBottomNavStackingTest) */
    z-index: 80;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.07);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
}

.mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0 10px;
    text-decoration: none;
    color: #aaa;
    font-size: 10px;
    font-weight: 600;
    gap: 4px;
    font-family: 'Pretendard', sans-serif;
}

.mobile-bottom-nav a i,
.mobile-bottom-nav a svg {
    font-size: 20px;
}

.mobile-bottom-nav a.active {
    color: #9a33cc;
}

.mobile-bottom-nav .nav-cart-center {
    position: relative;
}

.mobile-bottom-nav .nav-cart-icon {
    width: 46px;
    height: 46px;
    background: #9a33cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -18px;
    box-shadow: 0 4px 14px rgba(154, 51, 204, 0.28);
    border: 3px solid #fff;
}

.mobile-bottom-nav .nav-cart-icon i,
.mobile-bottom-nav .nav-cart-icon svg {
    color: #fff;
    font-size: 18px;
}

/* 관리자가 정한 글자 크기 (Banner::textAttributes): PC --fs, 모바일 --fs-m */
@media (min-width: 768px) {
    .nuri-fs {
        font-size: var(--fs) !important;
    }
}

@media (max-width: 767.98px) {
    .nuri-fs-m {
        font-size: var(--fs-m) !important;
    }

    /* 관리자가 정한 모바일 글자 굵기 (Banner::textAttributes, BannerItem::overlayTextAttributes) */
    .nuri-fw-m {
        font-weight: var(--fw-m) !important;
    }
}

/* 관리자 에디터로 넣은 HTML(카테고리 상·하단, 상품 상세설명): 나눠 올린 이미지가 위아래 틈 없이 이어지게 (prose 기본 여백 제거) */
.nuri-editor-html img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.nuri-editor-html p:has(> img),
.nuri-editor-html figure {
    margin-top: 0;
    margin-bottom: 0;
}

/* 1초에 한 번 깜빡임 (특가 SALE TIME 의 ":") */
.nuri-blink {
    animation: nuri-blink 1s step-end infinite;
}

@keyframes nuri-blink {
    50% {
        opacity: 0;
    }
}

/* 스크롤바 숨기기 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 네이티브 <select> 펼침 목록(option)은 시스템 글꼴로 (닫힌 select 칸은 그대로 Pretendard).
   크롬·엣지는 목록을 여는 순간 옵션 줄 높이로 팝업 창 높이를 정하고 글꼴이 바뀌어도 다시 재지 않는다.
   Pretendard 는 글자 범위별 서브셋(828개)을 그 글자가 처음 그려질 때 받아오는데, 닫힌 select 안에만 있던 옵션 글자는
   여는 순간 대체 글꼴(줄 21px)로 재고 받아진 뒤 17.8px 로 줄어 목록 아래가 빈칸으로 남는다(닫았다 다시 열면 정상).
   시스템 글꼴은 바로 있어 줄 높이가 변하지 않는다. option 에 font-family 를 따로 주지 않는다 */
option {
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
}