/* ===== responsive.css =====
   반응형 전용 미디어쿼리
   브레이크포인트: 992px / 768px / 480px
   관리자 페이지(admin/) 제외
   ========================== */


/* ==========================================================================
   가로 스크롤 전역 방지
   고정 px 요소가 body 밖으로 삐져나와 수평 스크롤바·오른쪽 빈 공간이
   생기는 현상의 최종 안전망.
   ========================================================================== */

/* [모든 페이지] viewport 폭을 초과하는 요소가 발생할 때
   html/body에 수평 스크롤바가 나타나는 것을 차단 */
html {
    overflow-x: hidden; /* 문서 최상위 수평 스크롤 차단 */
}

body {
    overflow-x: hidden; /* body 밖으로 삐져나오는 요소 차단 */
    max-width: 100vw;   /* body 자체가 뷰포트 폭을 초과하지 않도록 */
}


/* ==========================================================================
   전역 고정값 → 유동값 전환
   브레이크포인트 없이 전역 적용 — 특정 픽셀 구간에서 레이아웃이 깨지는
   고정 px 폭·높이의 근본 원인을 해소한다.
   ========================================================================== */

/* ── 홈페이지 인증·수상 배너 (index.html inline <style>) ── */

/* [index.html] .trust-banner-inner { width: 1040px; height: 160px }
   원인: .trust-banner { padding: 40px 180px } 내부에서 약 769px~1400px 구간에
         1040px 고정 폭이 실제 가용 폭(viewport - 360px)을 초과해 수평 overflow 발생.
   해소: max-width로 전환 → 데스크탑에서는 1040px 상한 유지, 소형에서는 자연 축소.
         height: 160px 고정 → auto로 변경해 내용에 맞게 확장 허용.
   선택자 명시도: .trust-banner .trust-banner-inner (0,2,0,0) > 인라인 .trust-banner-inner (0,1,0,0)
   !important: <body> 내 인라인 <style>은 <head> CSS 이후 cascade이므로
               명시도가 높더라도 source order에서 질 수 있음 → !important로 강제 적용 */
.trust-banner .trust-banner-inner {
    max-width: 1040px !important; /* 인라인 style 태그 덮어쓰기용 */
    width: 100% !important;       /* 인라인 style 태그 덮어쓰기용 */
    height: auto !important;      /* 인라인 style 태그 덮어쓰기용 */
}

/* [index.html] .trust-banner-item { width: 320px; height: 160px; flex-shrink: 0 }
   원인: flex-shrink: 0 으로 인해 아이템이 전혀 축소되지 않음.
         3개 아이템 × 320px + gap 40px × 2 = 1040px — 부모가 줄어도 그대로 유지돼 overflow.
   해소: max-width 320px + width: 100% → 부모 공간에 맞게 유동 축소.
         flex-shrink: 1 허용 → 부모 폭 부족 시 비율 감소.
         height: auto + min-height: 80px → 내용 기반 높이, 최소 높이만 보장.
   !important: 인라인 style 태그 cascade 우선순위 역전 방지 */
.trust-banner .trust-banner-item {
    max-width: 320px !important;  /* 인라인 style 태그 덮어쓰기용 */
    width: 100% !important;       /* 인라인 style 태그 덮어쓰기용 */
    flex-shrink: 1 !important;    /* 인라인 style 태그 덮어쓰기용 */
    height: auto !important;      /* 인라인 style 태그 덮어쓰기용 */
    min-height: 160px;
}

/* ── 푸터 전역: 1280px 이상(2단)에서 footer-right 내부 overflow 방지 ── */

/* [style.css] .footer-info-columns { width: 540px }
   1280px 이상 2단 레이아웃에서 footer-right가 축소될 때
   내부 540px 고정 폭이 부모를 벗어나는 것을 방지 */
.footer-right .footer-info-columns {
    max-width: 540px;
    width: 100%;
}

/* [index.html] .trust-banner — padding 40px 180px + 내부 1040px 고정 폭이
   overflow를 유발할 경우를 대비한 failsafe.
   !important 규칙이 인라인 style보다 우선하지만, 혹시 적용되지 않더라도
   overflow: hidden 으로 배너 밖으로 삐져나오는 것을 차단 */
.trust-banner {
    overflow: hidden;
}


/* ==========================================================================
   헤더 (fragments/layouts.html — .header-top / .header-nav)
   ========================================================================== */

/* [layouts.html] .header-nav-inner { display: flex } + .header-nav a { white-space: nowrap }
   navCategories 항목이 동적으로 추가되면 820px 뷰포트에서
   항목 합산 폭(전체보기 + 카테고리들 + 회사소개 + 고객센터) > 780px 가 되어 overflow 발생.
   style.css는 768px 이하에서만 overflow-x: auto를 추가 → 769px~992px 구간은 보호 없음.
   해소: 이 구간에서 header-nav overflow를 숨김.
         768px 이하는 style.css의 overflow-x: auto(스크롤 허용)가 유지됨. */
@media (min-width: 769px) and (max-width: 992px) {

    .header-nav {
        overflow-x: hidden; /* [layouts.html] 네비 항목 overflow → body 스크롤 전파 차단 */
    }

}

/* [style.css] .search-form { flex: 1; min-width: 200px }
   flex: 1 은 내부적으로 flex-basis: 0% 를 설정 → 768px 규칙의 width: 100% 를 무력화.
   결과: 뷰포트 480px에서 로고(~120px) + 아이콘(~80px) + gap(15px) = ~215px 소비 후
         남은 265px ≥ min-width 200px → 검색창이 같은 줄에 올라탐.
         뷰포트 393px에서 남은 178px < min-width 200px → 줄 바꿈 발생.
   해소: flex-basis: 100% !important → 검색창 초기 크기를 컨테이너 전체 폭으로 강제,
         어떤 뷰포트에서도 줄 바꿈이 일어나도록 보장.
   ※ 동일한 원인이 481px~768px 구간에도 존재 → 아래 별도 블록으로 처리 */

/* 481px~768px 헤더 레이아웃 보정
   style.css 768px 규칙이 search-form에 width:100%를 설정하지만
   flex: 1(base)의 flex-basis: 0%가 flex 계산에서 width보다 우선 적용되어
   검색창이 로고·아이콘과 같은 줄에 올라탐.
   481px~768px 구간에서 480px 이하와 동일한 헤더 레이아웃(로고+아이콘 위, 검색창 아래)을 유지. */
@media (min-width: 481px) and (max-width: 768px) {

    .header-top-inner {
        flex-wrap: wrap !important;  /* 481px~768px 헤더 레이아웃 보정 */
        height: auto !important;     /* 481px~768px 헤더 레이아웃 보정 */
    }

    .search-form {
        flex-basis: 100% !important; /* 481px~768px 헤더 레이아웃 보정 — flex-basis: 0% 무력화 */
        order: 3 !important;         /* 481px~768px 헤더 레이아웃 보정 — 검색창을 아래 배치 */
        width: 100% !important;      /* 481px~768px 헤더 레이아웃 보정 */
        max-width: 100% !important;  /* 481px~768px 헤더 레이아웃 보정 */
    }

}

@media (max-width: 480px) {

    .header-top-inner {
        flex-wrap: wrap !important;  /* 인라인 style 태그 덮어쓰기용 */
        height: auto !important;     /* 인라인 style 태그 덮어쓰기용 */
    }

    .search-form {
        flex-basis: 100% !important; /* flex: 1의 flex-basis: 0% 무력화 → 검색창 줄 바꿈 강제 */
        order: 3 !important;         /* 로고·아이콘 아래 배치 명시 */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* [style.css] .search-input: 긴 placeholder 텍스트가 480px 이하에서
       입력창을 밀어낼 수 있음 → font-size 축소로 보완 */
    .search-input {
        font-size: 0.85rem;
    }

}


/* ==========================================================================
   푸터 (fragments/layouts.html — .footer-inner / .footer-left / .footer-right)

   레이아웃 전략:
   - 1280px 이상: style.css 기본 2단 레이아웃 유지
   - 1280px 미만: 1단 세로 배치
     이유: 태블릿(820px 등) 2단 유지 시 footer-right 영역이 좁아져
           고객센터·배송정보·입금계좌 텍스트가 깨짐 → 1단이 가장 안정적
   ========================================================================== */

/* ── 전역: 모든 화면 크기 공통 보정 ── */

/* [style.css] .footer-policy { display: flex; gap: 20px } — flex-wrap 없음
   링크 8개가 좁은 화면에서 overflow → 모든 크기에서 wrap 허용 */
.footer-policy {
    flex-wrap: wrap;
}

/* [layouts.html] footer-company p 안에 사업자번호·주소 등 긴 인라인 텍스트 포함
   → 좁은 화면에서 잘림 방지 */
.footer-company p {
    word-break: keep-all;       /* 한국어 단어 중간 줄바꿈 방지 */
    overflow-wrap: break-word;  /* 영문·숫자 긴 문자열 줄바꿈 허용 */
}

/* [style.css] footer-info-col — min-width 기본값 auto(콘텐츠 폭)
   → flex 축소 시 콘텐츠 폭 이하로 줄어들지 않아 overflow 발생 */
.footer-info-col {
    min-width: 0;
}


/* ── 1280px 미만: 1단 세로 배치 ── */
@media (max-width: 1279px) {

    /* [1280px 미만 전 구간] footer-main을 1단 세로 배치로 통일
       태블릿·모바일에서 2단 유지 시 right 영역 텍스트 깨짐 → 1단이 안정적 */
    .footer-inner {
        padding: 48px 40px !important;
    }

    .footer-main {
        flex-direction: column !important; /* 1단 세로 배치 */
        gap: 32px !important;
    }

    /* [style.css] footer-left { width: 636px }, footer-right { width: 540px }
       1단에서 양쪽 모두 전체 폭 사용 */
    .footer-left,
    .footer-right {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }

    /* [style.css] .footer-policy { gap: 20px; margin-top: -20px }
       1단 배치에서 음수 margin이 위 요소와 겹침 → 초기화, 간격 정리 */
    .footer-policy {
        gap: 8px 14px !important;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    /* [style.css] .footer-info-columns { width: 540px; display: flex }
       1단에서 footer-right가 100% 폭 → 내부 3열 가로 배치로 전환 */
    .footer-info-columns {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 24px !important;
    }

    /* [style.css] .footer-info-col:nth-child(n) { width: 160/150/160px }
       고정 px → 균등 분배, 최소 140px 보장 */
    .footer-info-col:nth-child(1),
    .footer-info-col:nth-child(2),
    .footer-info-col:nth-child(3) {
        width: auto !important;
        flex: 1 1 140px !important;
        min-width: 0 !important;
    }

    /* [style.css] .footer-sns { width: 240px; margin-left: auto; justify-content: space-between }
       1단 배치에서 SNS 영역 전체 폭 사용, 균등 배치 */
    .footer-sns {
        width: 100% !important;
        justify-content: space-around !important;
        margin-left: 0 !important;
        margin-top: 20px !important;
    }

}


/* ── 768px 이하: 정보 컬럼 세로 스택 + 패딩 축소 ── */
@media (max-width: 768px) {

    /* 1단 레이아웃 유지 상태에서 패딩 추가 축소 */
    .footer-inner {
        padding: 40px 24px !important;
    }

    /* [style.css 768px] footer-left/right { width: 100% } 처리됨.
       명시적으로 재확인 */
    .footer-left,
    .footer-right {
        width: 100% !important;
        flex: none !important;
    }

    /* [style.css 768px] .footer-info-columns { flex-direction: column; gap: 24px } 처리됨.
       각 info-col 간 구분선으로 고객센터·배송정보·입금계좌 섹션 명확화 */
    .footer-info-col {
        padding-bottom: 16px !important;
        gap: 6px !important;
    }

    .footer-info-col:last-child {
        padding-bottom: 0 !important;
    }

    /* [style.css 768px] .footer-sns { justify-content: flex-start }
       왼쪽 정렬 → 균등 배치 유지 */
    .footer-sns {
        justify-content: space-around !important;
    }

}


/* ── 480px 이하: 최소 모바일 보정 ── */
@media (max-width: 480px) {

    /* 패딩 추가 축소 */
    .footer-inner {
        padding: 28px 16px !important;
    }

    /* [style.css] .footer-policy { gap: 20px }
       360px 이하 링크 8개 2~3줄 나뉠 때 간격 조밀화 */
    .footer-policy {
        gap: 6px 12px !important;
        margin-bottom: 12px !important;
    }

    /* 회사정보 항목 간 간격 조밀화 */
    .footer-company {
        gap: 8px !important;
    }

    /* 정보 컬럼 간격 추가 조밀화 */
    .footer-info-col {
        padding-bottom: 12px !important;
        gap: 4px !important;
    }

    /* SNS 아이콘 균등 배치 유지 */
    .footer-sns {
        margin-top: 16px !important;
        justify-content: space-around !important;
        gap: 0 !important;
    }

}


/* ==========================================================================
   홈페이지 (index.html — 히어로 / trust-banner / product-grid)
   ========================================================================== */

/* [trust-banner] index.html 인라인 @media는 768px까지만 커버.
   769px~992px 구간(태블릿)에서 기본 스타일이 그대로 적용돼 잘림 발생:
     - .trust-banner { padding: 40px 180px } → 820px 뷰포트 기준 콘텐츠 폭 460px
     - 아이템 3개 × 320px + gap 80px = 1040px → 460px에 억지 축소
     - 각 아이템 127px인데 padding: 0 61px 고정 → 텍스트 잘림
   해소: 992px 이하에서 인라인 768px 규칙과 동일하게 세로 쌓기 + 패딩 축소 */
@media (max-width: 992px) {

    .trust-banner {
        height: auto !important;         /* 인라인 style 태그 덮어쓰기용 */
        padding: 24px 20px !important;   /* 인라인 style 태그 덮어쓰기용 — 180px 측면 패딩 해소 */
    }

    .trust-banner .trust-banner-inner {
        flex-direction: column !important; /* 인라인 style 태그 덮어쓰기용 — 세로 쌓기 */
        gap: 12px !important;              /* 인라인 style 태그 덮어쓰기용 */
    }

    .trust-banner .trust-banner-item {
        width: 100% !important;            /* 인라인 style 태그 덮어쓰기용 */
        max-width: 100% !important;        /* 인라인 style 태그 덮어쓰기용 — 320px 상한 해제 */
        height: auto !important;           /* 인라인 style 태그 덮어쓰기용 */
        padding: 20px !important;          /* 인라인 style 태그 덮어쓰기용 — 0 61px 패딩 해소 */
    }

}

@media (max-width: 480px) {

    /* [index.html inline] .slide-content h1 { font-size: 2.8rem }
       375px 화면에서 히어로 제목 과대 */
    .slide-content h1 {
        font-size: 1.8rem;
    }

    .slide-content p {
        font-size: 1rem;
    }

    /* [index.html inline] @media(max-width:768px) { .product-grid → repeat(2,1fr) }
       480px 이하에서도 2열 유지 → ~167px 카드 폭으로 협소
       .home-section-inner .product-grid (0,2,0,0) > inline .product-grid (0,1,0,0) */
    .home-section-inner .product-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================================
   공통 컴포넌트 (pages-common.css — .sub-nav / .quality-nav / .two-column)
   ========================================================================== */

@media (max-width: 992px) {

    /* [pages-common.css] .two-column { gap: 60px } → 992px에서 과다 */
    .two-column {
        gap: 36px;
    }

    /* [pages-common.css] .sub-nav .container { gap: 50px }
       탭 간격 과대 → 축소 */
    .sub-nav .container,
    .quality-nav .container {
        gap: 24px;
    }

}

@media (max-width: 768px) {

    /* [pages-common.css] .two-column → 768px 이하 세로 스택 */
    .two-column {
        flex-direction: column;
        gap: 24px;
    }

    /* sub-nav / quality-nav 간격 추가 축소 */
    .sub-nav .container,
    .quality-nav .container {
        gap: 16px;
    }

}


/* ==========================================================================
   상품 카드 (fragments/product-card.html — .product-card / .product-grid)
   ========================================================================== */

@media (max-width: 768px) {

    /* [pages-common.css] .product-name { font-size: 18px }
       230px 이하 카드에서 텍스트가 카드 밖으로 넘침 */
    .product-grid .product-name {
        font-size: 15px;
        overflow-wrap: break-word;
        word-break: keep-all;
    }

    /* [pages-common.css] .product-price .price / .weight 좁은 카드에서 넘침 */
    .product-grid .product-price .price {
        font-size: 14px;
    }

    .product-grid .product-price .weight {
        font-size: 13px;
    }

    /* 그리드 아이템이 열 폭 이하로 줄어들 수 있도록 min-width 초기화 */
    .product-grid .product-card {
        min-width: 0;
    }

}

@media (max-width: 480px) {

    /* 1열 전환 후 카드 폭이 충분해지므로 폰트 크기 원복 */
    .product-grid .product-name {
        font-size: 17px;
    }

    .product-grid .product-price .price {
        font-size: 17px;
    }

    .product-grid .product-price .weight {
        font-size: 15px;
    }

}


/* ==========================================================================
   상품 목록 (products/list.html)
   ========================================================================== */

/* [992px] 인라인 @media(max-width:1024px) { repeat(3,1fr) } 이
   798px에서도 3열 유지 → 카드 폭 ~236px, 이미지 과대 / 레이아웃 1열처럼 보임
   .container .product-grid (0,2,0,0) > inline .product-grid (0,1,0,0) */
@media (max-width: 992px) {

    .container .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

}

/* [768px] 480~768px 구간에서 2열 시 product-card min-content가
   그리드 열 폭을 초과 → 카드가 컨테이너 밖으로 밀려 빈 화면처럼 보임
   minmax(0,1fr) 으로 min 제약을 0으로 해제 */
@media (max-width: 768px) {

    .container .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

}

/* [480px] 1열 전환 */
@media (max-width: 480px) {

    .container .product-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

}


/* ==========================================================================
   상품 상세 (products/detail.html)
   ========================================================================== */

/* [992px] 인라인 .product-detail { grid-template-columns: 1fr 460px }
   769-992px 구간에서 우측 460px 고정 컬럼에 가격/수량 영역이 갇혀
   오른쪽에 불필요한 여백 발생
   .container .product-detail (0,2,0,0) > inline .product-detail (0,1,0,0) */
@media (max-width: 992px) {

    .container .product-detail {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* [detail.html inline] .product-info-area { width: 460px; min-height: 701px }
       grid 1열 후에도 460px 유지 → 우측 여백 발생
       specificity 0,3,0,0 */
    .container .product-detail .product-info-area {
        width: 100%;
        min-height: auto;
    }

    /* [detail.html inline] .product-info-table { width: 460px; table-layout: fixed }
       + .product-info-table td { width: 347px } */
    .container .product-detail .product-info-table {
        width: 100%;
        table-layout: auto;
    }

    .container .product-detail .product-info-table td {
        width: auto;
    }

    /* [detail.html inline] .action-buttons { width: 460px } */
    .container .product-detail .action-buttons {
        width: 100%;
    }

    /* [detail.html inline] .action-buttons .btn { width: 220px; padding: 12px 80px }
       2개 합산 760px → 극심한 넘침 */
    .container .product-detail .action-buttons .btn {
        flex: 1;
        width: auto;
        padding: 12px 20px;
    }

}

/* [768px] 768px 이하에서 인라인 고정 460px 폭들이 잔존
   .product-detail .product-info-area (0,2,0,0) > inline (0,1,0,0) */
@media (max-width: 768px) {

    .product-detail .product-info-area {
        width: 100%;
        min-height: auto;
    }

    .product-detail .product-info-table {
        width: 100%;
        table-layout: auto;
    }

    .product-detail .product-info-table td {
        width: auto;
    }

    .product-detail .action-buttons {
        width: 100%;
    }

    .product-detail .action-buttons .btn {
        flex: 1;
        width: auto;
        padding: 12px 20px;
    }

}

/* [480px] 430px 화면 — 가격·배송비 텍스트 폰트 추가 축소 */
@media (max-width: 480px) {

    /* [detail.html inline] .price-box .price / .price-won { font-size: 1.8rem }
       "총 가격" label 옆에서 우측 잘림.
       !important: 인라인 <style>이 <body>에 위치해 cascade상 head CSS 이후 → 강제 적용 */
    .product-detail .price-box .price,
    .product-detail .price-box .price-won {
        font-size: 1.4rem !important; /* 인라인 style 태그 덮어쓰기용 */
    }

    /* [detail.html inline] .total-price strong { font-size: 1.6rem }
       .total-box justify-content:space-between 에서 우측이 뷰포트 밖으로 잘림.
       !important: 인라인 <style> cascade 우선순위 역전 방지 */
    .product-detail .total-price strong {
        font-size: 1.3rem !important; /* 인라인 style 태그 덮어쓰기용 */
    }

}


/* ==========================================================================
   장바구니 (cart/index.html)
   인라인 <style> 768px 블록에 두 가지 그리드 배치 버그 존재:
   1. col-delete(grid-col 3)와 col-product(grid-col 2/4)이 같은 셀에 겹침
      → 삭제 × 버튼이 상품명 텍스트 위에 렌더링
   2. col-qty가 grid-col 2(70px 고정 열)에 배치되어
      qty-control(32px + 42px + 32px = 106px)이 col-total 영역으로 overflow
   해소: 3열을 "30px | 1fr | auto" 로 재구성 → 각 항목 독립 열 분리
   ========================================================================== */

/* [cart inline] .cart-row { grid-template-columns: 30px 70px 1fr }
   "70px" 고정 열이 qty-control overflow 원인이자 col-product/col-delete 겹침 구조.
   → 30px | 1fr | auto 로 전환:
     Row 1: [check] [product-link] [delete ×]
     Row 2: [check] [qty-control ] [price    ] */
@media (max-width: 768px) {

    .cart-row {
        grid-template-columns: 30px 1fr auto !important;
    }

    /* col-product: col 2(1fr) 단독 사용 — col 3(auto)와 분리 */
    .col-product {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* col-delete: col 3(auto), row 1 — col-product와 독립 열 */
    .col-delete {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-content: flex-end !important;
        align-self: start !important;
    }

    /* col-qty: col 2(1fr), row 2 — 1fr 폭으로 qty-control(106px) 충분히 수용 */
    .col-qty {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-content: flex-start !important;
    }

    /* col-total: col 3(auto), row 2 — delete와 같은 열, 수직 배치 */
    .col-total {
        grid-column: 3 !important;
        grid-row: 2 !important;
        text-align: right !important;
    }

}

@media (max-width: 480px) {

    /* [cart inline] .cart-summary-bar { padding: 20px 25px }
       소형 화면에서 좌우 패딩 과다 */
    .cart-summary-bar {
        padding: 16px;
    }

}


/* ==========================================================================
   결제 (checkout/index.html + checkout.css)
   ========================================================================== */

@media (max-width: 768px) {

    /* [checkout.css] .checkout-sidebar #payment-button.button { padding: 12px 80px }
       80px 좌우 패딩이 소형 화면에서 버튼을 과다 확장
       .checkout-container .checkout-sidebar #payment-button.button (1,3,0,0) >
       checkout.css .checkout-sidebar #payment-button.button (1,2,0,0) 이김 */
    .checkout-container .checkout-sidebar #payment-button.button {
        padding: 12px 20px;
    }

}


/* ==========================================================================
   회원 (members/)
   ========================================================================== */

/* ── login.html / join.html / edit.html / password.html ── */

@media (max-width: 768px) {

    /* [style.css] .card { padding: 30px }
       로그인·회원가입·정보수정·비밀번호변경 카드 내부 여백 축소 */
    .card {
        padding: 20px;
    }

    /* [style.css] .container-sm { padding: 40px 20px }
       로그인·회원가입 페이지 상하 여백 축소 */
    .container-sm {
        padding: 24px 16px;
    }

    /* [style.css] .container.container-narrow
       정보수정·비밀번호변경 페이지 상하 여백 축소 */
    .container.container-narrow {
        padding: 24px 16px;
    }

    /* [style.css] .mypage-menu (password.html — 4개 아이템)
       flex-wrap 없이 나열 → 좁은 화면에서 넘침 */
    .mypage-menu {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* [pages-common.css] .section-tabs / .section-tab (edit.html — 3개 탭)
       padding: 14px 20px 이 3개 탭에서 협소해짐 */
    .section-tabs {
        gap: 8px;
    }

    .section-tab {
        padding: 12px 14px;
        font-size: 0.88rem;
    }

    /* [style.css] edit.html·password.html 폼 하단 버튼 쌍
       .text-center.mt-30 내부 .btn-primary + .btn-secondary 수평 배치
       → 768px에서 공간 부족 시 수직 스택으로 전환 */
    .text-center.mt-30 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .text-center.mt-30 .btn {
        width: 100%;
        max-width: 360px;
    }

}

@media (max-width: 480px) {

    /* [style.css] .page-title { font-size: 1.8rem }
       로그인·회원가입·정보수정·비밀번호변경 페이지 제목 480px에서 과대 */
    .page-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* [style.css] .card { padding: 30px → 20px → 16px } 추가 축소 */
    .card {
        padding: 16px;
    }

    /* [style.css] .btn-lg { padding: 15px 30px; font-size: 1.1rem }
       로그인·회원가입·정보수정·비밀번호변경 제출 버튼 과다 패딩 */
    .btn-lg {
        padding: 12px 20px;
        font-size: 1rem;
    }

    /* [pages-common.css] .section-tab (edit.html — 3개 탭)
       480px에서 탭 패딩 추가 축소 */
    .section-tab {
        padding: 10px 10px;
        font-size: 0.82rem;
    }

    /* [style.css] .mypage-menu a { padding: 10px 20px } (password.html — 4개 아이템)
       480px에서 버튼 패딩 축소로 줄바꿈 방지 */
    .mypage-menu a {
        padding: 8px 14px;
        font-size: 0.88rem;
    }

    /* [pages-common.css] .input-group-flex { display: flex; gap: 10px }
       join.html 이메일 입력 + 중복확인 버튼 수평 배치 → 480px에서 협소
       수직 스택으로 전환 */
    .input-group-flex {
        flex-direction: column;
    }

    .input-group-flex .btn {
        width: 100%;
    }

}

/* ── mypage.html (.member-table) ── */

@media (max-width: 480px) {

    /* [mypage.html inline] .member-table th { width: 160px }
       375px 화면(총 335px)에서 th 160px + td 175px 의 td 안에
       .member-input-row(input + "주소찾기" 버튼)가 넘침 가능
       → th 폭 100px으로 축소, 패딩 최소화 */
    .mypage-main .member-table th {
        width: 100px;
        padding: 14px 12px;
    }

    .mypage-main .member-table td {
        padding: 10px 12px;
    }

}

/* ── order-detail.html (.order-header-box / .info-box / .products-status-bar) ── */

/* [order-detail inline] .order-header-box { padding: 24px 30px } — column 방향 전환은
   인라인 768px 블록에서 처리됨. 좌우 30px 패딩을 모바일에 맞게 축소.
   .products-status-bar { padding: 16px 20px } / .info-box { padding: 20px 24px } 도 축소.
   테이블: 인라인 768px 블록에서 카드형으로 전환.
   responsive.css에서 !important로 우선순위 확보. */

/* 모바일 카드형 레이아웃
   주요 수정 사항:
   1. products-box overflow: hidden → visible — card border-radius 클리핑 방지
   2. 모든 규칙 !important — 베이스 인라인 !important 규칙(.td-product padding-left 등) 덮어쓰기
   3. badge 배경색 명시 + var() fallback — CSS 변수 미해석 상황 대비
   4. product-thumb display: block, min-width 명시 — flex 축소 방지 */
@media (max-width: 768px) {

    .order-detail-page .order-header-box {
        padding: 20px 16px !important;
    }

    .order-detail-page .products-status-bar {
        padding: 12px 16px !important;
    }

    .order-detail-page .info-box {
        padding: 16px !important;
    }

    .order-detail-page .info-box p {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    /* products-box overflow: hidden → visible: card 테두리/radius 클리핑 방지 */
    .order-detail-page .products-box {
        overflow: visible !important;
    }

    /* table·tbody도 block으로 전환 — 핵심 수정
       tbody가 table-row-group이면 tr display:block이 table 컨텍스트 안에서 무력화됨 */
    .order-detail-page .products-table {
        display: block !important;
        width: 100% !important;
    }

    .order-detail-page .products-table tbody {
        display: block !important;
    }

    /* 테이블 헤더 숨김 */
    .order-detail-page .products-table thead {
        display: none !important;
    }

    /* tbody tr → 독립 카드 블록 */
    .order-detail-page .products-table tbody tr {

        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        grid-template-areas:

        "product product product"

        "weight qty price"

        "rebuy rebuy rebuy" !important;

        column-gap: 0 !important;

        row-gap: 0 !important;

        border: 1px solid #e0e0e0 !important;

        border-radius: 8px !important;

        margin: 12px 0 !important;

        padding: 16px !important;

        background: #fff !important;

        overflow: hidden !important;

    }

    /* 모든 td → 블록 (vertical-align 초기화 포함) */
    .order-detail-page .products-table tbody td {
        display: block !important;

        border: none !important;

        padding: 0 !important;

        text-align: left !important;

        vertical-align: top !important;
    }

    /* 상품 셀 — shorthand padding으로 base !important 규칙 통째로 덮어씀
       base: .td-product { padding-left: 20px !important } */
    .order-detail-page .td-product {
        grid-area: product !important;

        padding: 0 0 20px 0 !important;

        margin-bottom: 0 !important;

        border-bottom: none !important;
    }

    /* 모바일 카드형 상품 이미지/뱃지 표시 */
    .order-detail-page .td-product .product-cell {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .order-detail-page .td-product .product-thumb {
        display: block !important;
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    .order-detail-page .td-product .product-meta {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .order-detail-page .td-product .product-badges {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-top: 6px !important;
    }

    /* 뱃지 — 배경색 명시 + var() fallback (#E10811) */
    .order-detail-page .td-product .badge {
        display: inline-block !important;
        padding: 3px 8px !important;
        font-size: 0.75rem !important;
        border-radius: 4px !important;
    }

    .order-detail-page .td-product .badge-grade {
        background: var(--color-primary, #E10811) !important;
        color: #fff !important;
    }

    .order-detail-page .td-product .badge-origin {
        background: #555 !important;
        color: #fff !important;
    }

    .order-detail-page .td-product .badge-storage {
        background: #666 !important;
        color: #fff !important;
    }

    /* 무게 / 수량 / 금액 — 3칸 가운데 정렬 통계 바
       3개 셀이 가로로 붙어 하나의 블록처럼 보임 */
    /* 무게 / 수량 / 금액 표형 레이아웃 */

    .order-detail-page .td-weight,

    .order-detail-page .td-qty,

    .order-detail-page .td-price {

        display: grid !important;

        grid-template-rows: 42px 72px !important;

        padding: 0 !important;

        margin: 0 !important;

        background: #fff !important;

        border: none !important;

        border-radius: 0 !important;

        text-align: center !important;

    }

    /* grid 영역 배치 */

    .order-detail-page .td-weight {

        grid-area: weight !important;

    }

    .order-detail-page .td-qty {

        grid-area: qty !important;

    }

    .order-detail-page .td-price {

        grid-area: price !important;

    }

    /* 헤더 행: 무게 / 수량 / 금액 */

    .order-detail-page .td-label {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        height: 40px !important;

        margin: 0 !important;

        background: #f5f5f5 !important;

        border-top: 1px solid #e5e5e5 !important;

        border-bottom: 1px solid #e5e5e5 !important;

        font-size: 0.9rem !important;

        font-weight: 500 !important;

        color: #555 !important;

    }

    /* 가운데 구분선 */

    .order-detail-page .td-qty .td-label {

        border-left: 1px solid #e5e5e5 !important;

        border-right: 1px solid #e5e5e5 !important;

    }

    /* 값 행: 600g / 3 / 54,000원 */

    .order-detail-page .td-weight span:not(.td-label),

    .order-detail-page .td-qty span:not(.td-label),

    .order-detail-page .td-price span:not(.td-label) {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        height: 40px !important;

        /*border-left: 1px solid #e5e5e5 !important;*/

        /*border-right: 1px solid #e5e5e5 !important;*/

        border-bottom: 1px solid #e5e5e5 !important;

        font-size: 1.05rem !important;

        font-weight: 700 !important;

        color: #222 !important;

    }

    /* 재구매 버튼 */
    .order-detail-page .td-rebuy {

        grid-area: rebuy !important;

        padding-top: 10px !important;

        margin-top: 0 !important;

        border-top: 1px solid #eee !important;

    }

    .order-detail-page .td-rebuy .btn-add-cart {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top : 10px !important;
    }

}

/* ── order-detail.html (.order-number-row / .products-summary) ── */

@media (max-width: 480px) {

    /* [order-detail inline] .order-number-value { font-family: monospace }
       "ORD-20260311-XXXXXXXX" 주문번호가 .order-number-row(flex) 안에서
       375px 화면을 벗어날 수 있음 */
    .order-detail-page .order-number-row {
        flex-wrap: wrap;
    }

    .order-detail-page .order-number-value {
        word-break: break-all;
        font-size: 0.9rem;
    }

    /* [order-detail inline] .products-summary { display: flex; gap: 8px }
       "상품금액 + 배송비 = 결제금액" 아이템이 375px 한 줄에서 벗어날 수 있음 */
    .order-detail-page .products-summary {
        font-size: 0.8rem;
        gap: 6px;
        padding: 14px 16px;
    }

    /* [order-detail inline] .order-header-box { padding: 20px 16px } → 추가 축소 */
    .order-detail-page .order-header-box {
        padding: 16px !important;
    }

    /* [order-detail inline] .info-box { padding: 16px } → 추가 축소 */
    .order-detail-page .info-box {
        padding: 12px !important;
    }

}


/* ==========================================================================
   고객센터 (support/)
   notice-list / notice-detail / faq / inquiries / my-inquiries 페이지
   인라인 <style> 에서 768px·480px 대부분 처리.
   support.css 도 hero 영역 등 반응형 규칙 보유.
   인라인에서 처리되지 않은 항목만 보완.
   ========================================================================== */

@media (max-width: 480px) {

    /* [faq.html inline] .category-buttons { display: flex; gap: 8px }
       6개 카테고리 버튼(전체·배송·구매·결제·상품·기타)이
       375px 한 줄 내에 나란히 배치 시 약 420px 필요 → 넘침
       .faq-section .category-buttons (0,2,0,0) > inline .category-buttons (0,1,0,0) */
    .faq-section .category-buttons {
        flex-wrap: wrap;
    }

    .faq-section .category-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

}
