/* ========================================
   김치광장 - 공통 CSS (common.css)
   모든 페이지에서 공유하는 스타일
   ======================================== */

/* 구글 폰트 가져오기 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Poppins:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

/* CSS 변수 (색상, 폰트, 여백) */
:root {
    --color-primary: #6b1210;       /* 메인 포인트 컬러 (검색바 테두리, 강조, 판매가 등 모든 포인트) */
    --color-accent: #6b1210;        /* 강조 컬러 — primary 와 동일하게 통일 (호환용 별칭) */
    --color-primary-bg: #f5e8e7;    /* 포인트 컬러의 연한 배경 (메가메뉴 활성 항목 hover 배경 등) */
    --color-text-dark: #292829;     /* 기본 텍스트 색상 */
    --color-text-gray: #555555;     /* 보조 텍스트, 취소선 가격 */
    --color-text-light: #888888;    /* 라이트 텍스트 */
    --color-bg-white: #ffffff;      /* 배경 흰색 */
    --color-bg-light: #f8f8f8;      /* 연한 배경 */
    --color-border: #e0e0e0;        /* 테두리 색상 */
    --color-border-dark: #cccccc;   /* 진한 테두리 */
    --font-main: 'Noto Sans KR', 'Nanum Gothic', sans-serif;    /* 기본 폰트 */
    --font-eng: 'Poppins', sans-serif;                           /* 영문 폰트 */
    --max-width: 1280px;            /* 최대 너비 */
    --header-height: 80px;          /* 메인 행(로고/검색/유틸) 높이 */
    --catrow-height: 50px;          /* 카테고리 행 높이 */
}

/* CSS 리셋 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    font-size: 15px;
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    line-height: 1.6;
    min-width: 320px;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary);
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* ========================================
   공통 레이아웃
   ======================================== */

/* 최대 너비 컨테이너 */
.inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* 상단 간격 (헤더 고정 시) — 메인 행 + 카테고리 행 합산 */
#wrap {
    padding-top: calc(var(--header-height) + var(--catrow-height));
}

/* 섹션 공통 여백 */
.section {
    padding: 60px 0;
}

/* 섹션 타이틀 공통 스타일 */
.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title .txt01 {
    font-family: var(--font-eng);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-gray);
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.section-title .txt02 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-dark);
    display: block;
}

/* ========================================
   헤더 (header) — 풀무원 스타일 2단 구조
   상단: 로고 + 검색바 + 우측 유틸 (로그인/회원가입/고객센터)
   하단: 전체 카테고리 + 1뎁스 + 마이페이지/장바구니 + 메가메뉴
   ======================================== */

/* 전체 헤더 래퍼 (상단 고정) */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
}

/* ========================================
   메인 행 (로고 / 검색바 / 우측 유틸)
   ======================================== */
.main-row {
    height: var(--header-height);
}

.main-row-inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 40px;
}

/* 모바일 햄버거 (전체 카테고리) — PC 에서는 숨김 */
.btn-menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    color: var(--color-text-dark);
}

.btn-menu-mobile .material-icons {
    font-size: 28px;
}

/* 로고 */
.logo {
    flex-shrink: 0;
    margin: 0; /* h1 기본 마진 제거 */
}

.logo img {
    height: 48px;
    width: auto;
}

/* 인라인 검색바 (PC) */
.header-search {
    flex: 1;
    max-width: 540px;
    margin: 0 auto;
}

.header-search form {
    display: flex;
    align-items: center;
    height: 44px;
    border: 2px solid var(--color-accent);
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-bg-white);
}

.header-search input[type="text"] {
    flex: 1;
    padding: 0 20px;
    height: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--color-text-dark);
    background: transparent;
}

.header-search input[type="text"]::placeholder {
    color: var(--color-text-light);
}

.header-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
}

.header-search button .material-icons {
    font-size: 22px;
}

/* 우측 유틸 (로그인 / 회원가입 / 고객센터) */
.header-utils {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-utils > a,
.header-utils .util-cs > a {
    font-size: 14px;
    color: var(--color-text-dark);
    padding: 0 6px;
    line-height: 1;
}

.header-utils > a:hover,
.header-utils .util-cs > a:hover {
    color: var(--color-primary);
}

.header-utils .util-sep {
    color: var(--color-border-dark);
    font-size: 12px;
}

/* 고객센터 hover 드롭다운 */
.util-cs {
    position: relative;
}

.util-cs-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    min-width: 160px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.util-cs:hover .util-cs-dropdown {
    display: block;
}

.util-cs-dropdown li a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--color-text-dark);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.util-cs-dropdown li:last-child a {
    border-bottom: none;
}

.util-cs-dropdown li a:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

/* 로그인 상태 — 환영 문구 */
.header-utils-logged .util-welcome {
    font-size: 14px;
    color: var(--color-text-dark);
    padding: 0 6px;
    line-height: 1;
}

.header-utils-logged .util-welcome strong {
    font-weight: 700;
    color: var(--color-primary);
}

/* 모바일 우측 아이콘 (검색 / 장바구니) — PC 에서는 숨김 */
.header-mobile-icons {
    display: none;
    align-items: center;
    gap: 8px;
}

.header-mobile-icons button,
.header-mobile-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-dark);
}

.header-mobile-icons .material-icons {
    font-size: 24px;
}

/* ========================================
   카테고리 행 (전체 카테고리 + 1뎁스 + 마이페이지/장바구니)
   ======================================== */
.cat-row {
    height: var(--catrow-height);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-white);
}

.cat-row-inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
    position: relative; /* 메가메뉴 절대 위치 기준 */
}

/* 전체 카테고리 버튼 */
.btn-allcat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 100%;
    background: transparent;
    color: var(--color-text-dark);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 200px;
    border-right: 1px solid var(--color-border);
}

.btn-allcat .material-icons {
    font-size: 20px;
}

.btn-allcat:hover,
.btn-allcat[aria-expanded="true"] {
    color: var(--color-accent);
}

/* 1뎁스 카테고리 가로 메뉴 */
.nav-1depth {
    flex: 1;
    overflow: hidden;
}

.nav-1depth > ul {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-1depth > ul > li > a {
    display: block;
    padding: 0 18px;
    line-height: var(--catrow-height);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-dark);
    white-space: nowrap;
}

.nav-1depth > ul > li > a:hover {
    color: var(--color-accent);
}

/* 카테고리 행 우측 아이콘 (마이페이지 / 장바구니) */
.cat-icons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding: 0 12px;
}

.cat-icons a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-dark);
    font-size: 13px;
}

.cat-icons a:hover {
    color: var(--color-accent);
}

.cat-icons .material-icons {
    font-size: 22px;
}

/* ========================================
   메가 메뉴 (PC 전용, 4뎁스 컬럼 레이아웃)
   초기에는 1뎁스 컬럼(240px)만 표시되며, hover 로 하위 뎁스가 펼쳐질 때마다
   .mega-menu-inner 의 너비가 240px 단위로 확장된다 (JS 에서 width 인라인 조정)
   ======================================== */
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 999;
}

.mega-menu.is-open {
    display: block;
}

/* 메가메뉴 내부 컨테이너 — 4 컬럼 절대배치 기준
   초기 너비 240px (1뎁스만 표시), JS 에서 활성 뎁스에 따라 480/720/960 으로 조정 */
.mega-menu-inner {
    position: relative;
    height: 480px;
    width: 240px;
    transition: width 0.2s ease;
}

/* 공통 컬럼 스타일
   주의: overflow-y:auto 는 overflow-x 도 암묵적으로 auto 로 만들어 자식 절대요소를 잘라낸다.
         col-2/3/4 가 부모 col 안에 중첩되어 부모의 우측 바깥에 절대배치되므로
         자식 컬럼을 가진 col-1/2/3 은 overflow:visible 로 두고
         가장 깊은 col-4 만 자체 스크롤을 허용한다 */
.mega-col {
    width: 240px;
    height: 100%;
    background: var(--color-bg-white);
    border-right: 1px solid var(--color-border);
}

/* 1뎁스 컬럼 — 상시 표시 (메가메뉴 열리면 보임)
   relative 로 부모 inner 기준 자연 배치 + 자식 col-2 의 containing block 역할
   overflow:visible 로 col-2 가 우측으로 튀어나오는 것을 허용 */
.mega-col.col-1 {
    position: relative;
    top: 0;
    left: 0;
    overflow: visible;
}

/* 2~3 뎁스 컬럼 — 부모 li 활성화 시에만 표시 (display:block 으로 전환)
   자기 자신도 자식 col 을 가지므로 overflow:visible 유지하여 더 깊은 컬럼이 잘리지 않게 한다
   left:240 만으로 col-1.left+240, col-2.left+240, col-3.left+240 누적되어
   결과적으로 240/480/720 px 위치에 정렬된다 */
.mega-col.col-2,
.mega-col.col-3 {
    position: absolute;
    top: 0;
    left: 240px;
    display: none;
    overflow: visible;
}

/* 4뎁스 컬럼 — 가장 깊으므로 자체 스크롤 허용 (자식 컬럼이 없어 clipping 영향 없음) */
.mega-col.col-4 {
    position: absolute;
    top: 0;
    left: 240px;
    display: none;
    overflow-y: auto;
    border-right: none;
}

/* 활성화된 li 의 자식 컬럼만 표시 — li 가 자식을 가질 때(.has-sub)만 .mega-col 자체가 DOM 에 존재하므로
   자식이 없는 leaf 항목 hover 시에는 어떤 컬럼도 나타나지 않는다 */
.mega-menu li.is-active > .mega-col {
    display: block;
}

/* 메가메뉴 li / a 공통 스타일 */
.mega-menu li {
    position: static; /* 자식 .mega-col 는 부모 컬럼 기준 절대배치 */
}

.mega-menu li > a {
    display: block;
    padding: 14px 24px;
    font-size: 14px;
    color: var(--color-text-dark);
    transition: background 0.15s ease, color 0.15s ease;
}

.mega-menu li > a .mega-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- 1뎁스 컬럼 (col-1) — 활성 항목은 강한 와인 레드 배경 + 흰색 텍스트 ----- */
.mega-col.col-1 > li:hover > a,
.mega-col.col-1 > li.is-active > a {
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 500;
}

/* ----- 2뎁스 이상 (col-2 ~ col-4) — 연한 포인트 톤 hover/active ----- */
.mega-col.col-2 > li:hover > a,
.mega-col.col-2 > li.is-active > a,
.mega-col.col-3 > li:hover > a,
.mega-col.col-3 > li.is-active > a,
.mega-col.col-4 > li:hover > a,
.mega-col.col-4 > li.is-active > a {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-weight: 500;
}

/* 검색 오버레이 */
.search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
}

.search-overlay.is-active {
    display: flex;
}

.search-box {
    background: var(--color-bg-white);
    width: 100%;
    max-width: 600px;
    padding: 20px;
    position: relative;
}

.search-box form {
    display: flex;
    gap: 0;
}

.search-box input[type="text"] {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid var(--color-border-dark);
    border-right: none;
    outline: none;
}

.search-box input[type="text"]:focus {
    border-color: var(--color-primary);
}

.search-box .btn-search {
    padding: 12px 20px;
    background: var(--color-primary);
    color: white;
    font-size: 15px;
    cursor: pointer;
}

.search-box .btn-close-search {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: var(--color-text-gray);
    cursor: pointer;
    background: none;
    border: none;
}

/* ========================================
   모바일 사이드 네비게이션 (aside-nav)
   - 전체 카테고리 버튼 클릭 시 왼쪽에서 슬라이딩
   - 카테고리 트리 (1~4 뎁스) 아코디언 방식 토글
   ======================================== */

.aside-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 320px;
    max-width: 86vw;
    height: 100%;
    background: var(--color-bg-white);
    z-index: 3000;
    overflow-y: auto;
    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

.aside-nav.is-open {
    left: 0;
}

.aside-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2999;
}

.aside-overlay.is-active {
    display: block;
}

.aside-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-light);
}

.aside-state {
    display: flex;
    gap: 12px;
}

.aside-state a {
    font-size: 14px;
    color: var(--color-text-gray);
}

.aside-state a:hover {
    color: var(--color-primary);
}

/* 로그인 상태 — 환영 메시지 + 로그아웃 버튼 */
.aside-state-logged {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-right: 12px;
    min-width: 0;
}

/* 환영 메시지 */
.aside-welcome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-gray);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.aside-welcome .material-icons {
    font-size: 22px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.aside-welcome strong {
    font-weight: 700;
    color: var(--color-text);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 로그아웃 버튼 */
.aside-logout {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #555555;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

.aside-logout:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.aside-logout .material-icons {
    font-size: 16px;
}

/* ========================================
   사이드 푸터 — 카테고리 마지막 밑의 로그아웃 영역
   ======================================== */
.aside-footer {
    padding: 16px 20px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-light);
}

/* 하단 로그아웃 버튼 — 밝은 톤으로 차분하게 (강조 X) */
.aside-logout-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 14px;
    background: #f5f5f5;
    border: 1px solid #dddddd;
    color: #777777;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-sizing: border-box;
}

.aside-logout-bottom:hover {
    background: #ececec;
    border-color: #cccccc;
    color: #555555;
}

.aside-logout-bottom .material-icons {
    font-size: 17px;
    color: #999999;
}

.aside-logout-bottom:hover .material-icons {
    color: #777777;
}

.aside-close {
    font-size: 24px;
    color: var(--color-text-gray);
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

/* 사이드 카테고리 본문 */
.aside-body {
    padding: 8px 0;
}

/* 1뎁스 카테고리 ul */
.aside-body .aside-category {
    /* 최상위 ul */
}

/* 모든 뎁스 공통 li 안의 a 스타일 */
.aside-body a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    color: var(--color-text-dark);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
}

/* 1뎁스만 굵게 */
.aside-body .aside-category > li > a {
    font-size: 15px;
    font-weight: 500;
}

/* 자식 ul (aside-sub) — 기본 숨김, .is-open 시 표시 */
.aside-body .aside-sub {
    display: none;
    background: var(--color-bg-light);
}

.aside-body .aside-sub.is-open {
    display: block;
}

/* 자식이 있는 항목의 화살표 (펼침/접힘 상태에 따라 회전) */
.aside-body a .aside-arrow {
    font-size: 20px;
    color: var(--color-text-gray);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.aside-body a.is-expanded .aside-arrow {
    transform: rotate(180deg);
}

/* ========================================
   상품 카드 공통 스타일
   ======================================== */

.product-list {
    display: grid;
    gap: 24px;
}

/* 4열 그리드 */
.product-list.grid4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 5열 그리드 */
.product-list.grid5 {
    grid-template-columns: repeat(5, 1fr);
}

/* 상품 카드 */
.product-card {
    position: relative;
}

/* 상품 이미지 썸네일 영역 */
.product-card .thumbnail {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--color-bg-light);
}

.product-card .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .thumbnail img {
    transform: scale(1.05);
}

/* 상품 정보 영역 */
.product-card .description {
    padding: 12px 0;
}

.product-card .product-name {
    font-size: 14px;
    color: var(--color-text-dark);
    line-height: 1.4;
    margin-bottom: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 소비자가 (취소선) */
.product-card .price-original {
    font-size: 14px;
    color: var(--color-text-gray);
    text-decoration: line-through;
    display: block;
    margin-bottom: 2px;
}

/* 판매가 (빨강) */
.product-card .price-sale {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    display: block;
}

/* ========================================
   페이지네이션
   ======================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 40px;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 14px;
    color: var(--color-text-gray);
    border: 1px solid var(--color-border);
}

.pagination a:hover,
.pagination a.is-active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ========================================
   버튼 공통 스타일
   ======================================== */

/* 기본 버튼 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    gap: 8px;
}

/* 빨강 버튼 (주 행동) */
.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: #4a0c0a; /* 포인트 컬러의 진한 톤 */
    color: white;
}

/* 아웃라인 버튼 */
.btn-outline {
    background: transparent;
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-dark);
}

.btn-outline:hover {
    background: var(--color-text-dark);
    color: white;
    border-color: var(--color-text-dark);
}

/* 검정 버튼 */
.btn-dark {
    background: var(--color-text-dark);
    color: white;
}

.btn-dark:hover {
    background: #000000;
    color: white;
}

/* ========================================
   폼 공통 스타일
   ======================================== */

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: 6px;
}

.form-label .required {
    color: var(--color-primary);
    margin-left: 2px;
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid var(--color-border-dark);
    outline: none;
    transition: border-color 0.2s ease;
    color: var(--color-text-dark);
}

.form-input:focus {
    border-color: var(--color-primary);
}

.form-input::placeholder {
    color: var(--color-text-light);
}

/* ========================================
   하단 모바일 네비게이션
   ======================================== */

.bottom-nav {
    display: none; /* 모바일에서만 표시 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    z-index: 900;
}

.bottom-nav ul {
    display: flex;
}

.bottom-nav ul li {
    flex: 1;
}

.bottom-nav ul li a,
.bottom-nav ul li button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    font-size: 11px;
    color: var(--color-text-gray);
    width: 100%;
    gap: 4px;
}

.bottom-nav ul li a:hover,
.bottom-nav ul li button:hover {
    color: var(--color-primary);
}

.bottom-nav .material-icons {
    font-size: 22px;
}

/* ========================================
   페이지 상단 배너 (브레드크럼 영역)
   ======================================== */

.page-hero {
    background: var(--color-bg-light);
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.page-hero h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 8px;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-gray);
}

.breadcrumb a {
    color: var(--color-text-gray);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb .sep {
    color: var(--color-border-dark);
}

/* ========================================
   푸터 (footer)
   ======================================== */

footer {
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    padding: 40px 0 20px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    gap: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}

/* 푸터 로고 */
.footer-logo img {
    width: auto;
}

/* 푸터 유틸 링크 */
.footer-util ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
}

.footer-util ul li a {
    font-size: 13px;
    color: var(--color-text-dark);
    padding: 0 12px;
    border-right: 1px solid var(--color-border);
    line-height: 1;
}

.footer-util ul li:first-child a {
    padding-left: 0;
}

.footer-util ul li:last-child a {
    border-right: none;
}

.footer-util ul li a:hover {
    color: var(--color-primary);
}

/* 고객센터 정보 */
.footer-cs .cs-phone {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-eng);
    color: var(--color-text-dark);
    margin-bottom: 8px;
    display: block;
}

.footer-cs .cs-info {
    font-size: 13px;
    color: var(--color-text-gray);
    line-height: 1.8;
}

.footer-cs .cs-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 8px;
    margin-top: 16px;
    display: block;
}

/* 쇼핑몰 기본 정보 */
.footer-info {
    font-size: 12px;
    color: var(--color-text-gray);
    line-height: 2;
}

.footer-info div {
    display: flex;
    gap: 8px;
}

.footer-info .field {
    font-weight: 500;
    color: var(--color-text-dark);
    flex-shrink: 0;
    min-width: 80px;
}

/* 저작권 */
.footer-copyright {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-light);
    padding-top: 16px;
}

/* ========================================
   반응형 미디어 쿼리
   ======================================== */

/* 태블릿 (1024px 이하) — 카테고리 행 숨김, 모바일 햄버거/아이콘 활성화 */
@media (max-width: 1024px) {
    :root {
        --header-height: 60px;
        --catrow-height: 0px;
    }

    #wrap {
        padding-top: var(--header-height);
    }

    /* 메인 행: 햄버거(좌) + 로고(중앙) + 모바일 아이콘(우) 으로 단순화 */
    .main-row-inner {
        gap: 12px;
        justify-content: space-between;
    }

    /* 모바일 햄버거 표시 */
    .btn-menu-mobile {
        display: flex;
    }

    /* PC 인라인 검색바 / 우측 유틸 (로그인·회원가입·고객센터) 숨김 */
    .header-search {
        display: none;
    }

    .header-utils {
        display: none;
    }

    /* 모바일 우측 아이콘 (검색·장바구니) 표시 */
    .header-mobile-icons {
        display: flex;
    }

    /* 카테고리 행 / 메가메뉴 모두 숨김 (모바일은 aside-nav 슬라이드 사용) */
    .cat-row,
    .mega-menu {
        display: none !important;
    }

    /* 로고 가운데 정렬 */
    .logo {
        margin: 0 auto;
    }

    .logo img {
        height: 40px;
    }

    .product-list.grid4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-list.grid5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-logo {
        display: none;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
    }

    #wrap {
        padding-top: 56px;
        padding-bottom: 60px; /* 하단 네비 높이 */
    }

    .main-row-inner {
        padding: 0 12px;
        gap: 8px;
    }

    .logo img {
        height: 32px;
    }

    .header-mobile-icons button,
    .header-mobile-icons a {
        width: 32px;
        height: 32px;
    }

    .btn-menu-mobile {
        width: 32px;
        height: 32px;
    }

    .btn-menu-mobile .material-icons {
        font-size: 24px;
    }

    .section {
        padding: 40px 0;
    }

    .section-title .txt02 {
        font-size: 20px;
    }

    .product-list.grid4,
    .product-list.grid5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .bottom-nav {
        display: block;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-util ul {
        flex-wrap: wrap;
    }

    .footer-cs .cs-phone {
        font-size: 20px;
    }

    .page-hero h1 {
        font-size: 20px;
    }
}