/*
 * 스토어프론트 보정 CSS (지침 H6 §25, §28, §31, §32).
 *
 * 퍼블리싱 CSS(reset·layout·common·sub·main·product)는 그대로 두고,
 * **외부 라이브러리를 뺀 자리**와 **H6 가 새로 만든 요소**만 여기서 채운다.
 * 퍼블리싱 규칙을 덮어쓰기 시작하면 디자인 톤이 조금씩 갈라진다.
 *
 * 채우는 것:
 *   1. Swiper 없이 동작하는 갤러리 (scroll-snap)
 *   2. Google Fonts 없이 쓰는 폰트 스택
 *   3. 품절·재고 상태 표시
 *   4. 홈 카탈로그 셸 (가짜 진열을 걷어낸 자리)
 *   5. 접근성 (skip link · focus 표시)
 */

/* ── 1. 폰트 ─────────────────────────────────────────────────
 *
 * 퍼블리싱은 EB Garamond + Noto Sans 를 Google Fonts 에서 받는다.
 * 외부 의존을 0으로 만들기 위해 시스템 폰트 스택으로 대체한다.
 * 한글은 어차피 사용자 기기 폰트가 더 잘 읽힌다.
 */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
        'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
}
.garamond {
    font-family: Georgia, 'Times New Roman', serif;
}

/* ── 3. 재고·품절 ────────────────────────────────────────────
 *
 * 색만으로 상태를 표시하지 않는다 — 항상 글자가 함께 있다(지침 §31).
 */
.goods-item.is-sold-out .goods-thumb {
    opacity: .55;
}
.goods-soldout-mark {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
}
.goods-thumb {
    position: relative;
}
.goods-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f2f3f5;
}
.goods-thumb-empty img {
    width: 40%;
    max-width: 96px;
    opacity: .5;
}
.goods-stock-note {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #c0392b;
}


.product-option-state {
    margin-top: 10px;
    min-height: 1.4em;
}
.product-option-state.is-error {
    color: #c0392b;
}
.product-action-note {
    margin-top: 8px;
    color: #767676;
}
.product-action-wrap .square-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── 4. 홈 카탈로그 셸 ─────────────────────────────────────── */
.storefront-hero {
    padding-block: clamp(48px, 8vw, 96px);
    text-align: center;
}
.storefront-hero .section-sub {
    margin-top: 12px;
    color: #666;
}
.storefront-hero .btn-wrap {
    margin-top: 24px;
    justify-content: center;
}
.storefront-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.storefront-latest-section {
    padding-block: clamp(32px, 5vw, 64px);
}
.logo-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.footer-logo .logo-text {
    color: inherit;
}

/*
 * 목록 그리드 (H9 — 진열 엔진 없이도 카드가 정렬돼야 했다).
 *
 * ── H14-14: `:not(.swiper-wrapper)` 를 붙였다 ───────────────
 *
 * 이 한 줄이 진열 3(베스트 셀러)을 깨뜨리고 있었다.
 * 시안 `common.css` 는 같은 규칙을 `.goods-list:not(.swiper-wrapper)` 로 써서
 * **스와이퍼가 쓰는 목록은 건드리지 않는다.** 우리는 그 조건 없이 써서
 * Swiper 의 `.swiper-wrapper { display:flex }` 를 뒤에서 덮었고(명시도가 같으면 나중이 이긴다),
 * 슬라이드가 4열 그리드로 잘려 세로로 3행 쌓였다 — 시안의 2.8배 높이(실측 2921px vs 1044px).
 *
 * 시안 규칙이 카드 폭·간격을 이미 정하므로 이 규칙은 스와이퍼가 아닌 목록에만 남긴다.
 */
/*
 * H14-15: 이 규칙을 **지웠다.** (본문은 아래 주석에 남긴다 — 왜 사라졌는지가 중요하다)
 *
 *     .goods-list:not(.swiper-wrapper) { display:grid; grid-template-columns:repeat(4,…); gap:… }
 *
 * H14-14 에서 `:not(.swiper-wrapper)` 를 붙여 진열 3 은 살렸지만, **일반 목록은 계속 깨져 있었다.**
 * 시안 `common.css`(기반 — 항상 실린다)가 이미 같은 셀렉터를 정의한다:
 *
 *     .goods-list:not(.swiper-wrapper) { display:flex; flex-wrap:wrap; column-gap:…; row-gap:… }
 *     .goods-item { width: calc(25% - var(--fs-24) * 3 / 4); }        + 1024/768/500 단계
 *
 * 명시도가 **완전히 같고** storefront.css 가 나중에 실리므로 우리 grid 가 이겼다.
 * 그러면 `.goods-item` 의 `width:calc(25% - …)` 가 **그리드 트랙(319px)의 25%** 로 계산되어
 * 카드가 **폭 45px** 로 쪼그라든다(1440 뷰포트 실측: 253px 이어야 한다).
 *
 * 영향 범위가 홈이 아니라 **상품 목록·카테고리·검색·기획전 상세** 전부였다.
 * 홈 진열은 `.main-display-1 .goods-list`(아래 §진열)가 더 구체적이라 가려져 있어서
 * 홈만 보고 있던 동안에는 드러나지 않았다.
 *
 * 시안이 폭·간격·반응형 4단계를 이미 다 정해 뒀다. 우리가 다시 정할 이유가 없다.
 */
/*
 * H14-15: `.toolbar` 중복 정의도 지웠다. 기반 `common.css` 가 같은 것을 이미 정의하고
 * (`width:100%; display:flex; …; gap:var(--fs-16)`), 우리 것은 거기에 `margin-bottom:20px`
 * 하나를 더 얹고 있었다. 툴바 아래 간격은 시안이 부모에서 준다 —
 * `product.css` 의 `.product-list-content { flex-direction:column; row-gap:var(--fs-24) }`.
 * 그래서 우리 화면만 툴바 밑이 20px 더 벌어져 있었다(기획전 상세 실측 1634 vs 시안 1614).
 * `.toolbar` 를 쓰는 뷰 3개가 전부 `.product-list-content` 안이라 지워도 간격이 사라지지 않는다.
 */
.toolbar-sort-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.product-category-nav {
    margin-bottom: 20px;
}
.product-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: clamp(48px, 8vw, 96px);
    text-align: center;
}
.empty-content img {
    width: 96px;
    opacity: .6;
}

/* ── 5. 접근성 ──────────────────────────────────────────────── */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: #111;
    color: #fff;
}
.skip-to-content:focus {
    left: 0;
}
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid #2f6fed;
    outline-offset: 2px;
}

/* ── 6. 반응형 ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* H14-15: `.goods-list { grid-template-columns: repeat(3, …) }` 삭제 —
       위 §목록 그리드 주석 참고. 시안 common.css 가 1024/768/500 3단계를 이미 갖고 있다. */
}
@media (max-width: 768px) {
    /* H14-15: `.goods-list { grid-template-columns: repeat(2, …) }` 삭제 (같은 이유) */
    .product-view-wrap {
        display: block;
    }
    .product-summary {
        margin-top: 24px;
    }
}
@media (max-width: 480px) {
    .toolbar {
        align-items: flex-start;
    }
    .storefront-hero {
        padding-block: 40px;
    }
}

/* ── 7. H9-1 회원·장바구니 ──────────────────────────────────
 *
 * 퍼블리싱 규칙(input-list·custom-input·square-btn·custom-chk)을 그대로 쓰고
 * 새 화면의 골격만 여기서 채운다.
 */

/* 공통 알림 문구 */
.form-error-note,
.form-ok-note,
.form-warn-note {
    padding: 12px 16px;
    font-size: var(--fs-14, 14px);
    line-height: 1.5;
    border: 1px solid;
}
/*
 * H14-33 테스트 결제 안내 — 오류(빨강)도 성공(초록)도 아니다.
 * 손님이 "실제로 돈이 나가는 화면인가" 를 한눈에 구분해야 하므로 색을 따로 둔다.
 * 기반 CSS 에 둔다 — 주문서·결제·완료·주문상세 네 화면이 같은 문구를 쓴다.
 */
.form-warn-note {
    color: #8a5a00;
    border-color: #f0dca8;
    background: #fdf8ec;
}
.form-error-note {
    color: #b3261e;
    border-color: #ecc8c5;
    background: #fdf3f2;
}
.form-ok-note {
    color: #1d5d3a;
    border-color: #bfe0cd;
    background: #f1faf5;
}

/* 회원 폼 */
.member-form-section .inner {
    max-width: 480px;
}
.member-form {
    display: flex;
    flex-direction: column;
    row-gap: 28px;
}
.member-form .input-help {
    color: var(--grayscale6, #888);
}
.member-agree-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    padding: 20px;
    border: 1px solid var(--color-border1, #e3e3e3);
}
.member-agree-tit {
    font-size: var(--fs-15, 15px);
    font-weight: 600;
    margin-bottom: 4px;
}
.member-form-actions {
    flex-direction: column;
}
.member-form-foot {
    text-align: center;
    color: var(--grayscale7, #666);
}
.member-form-foot .text-link,
.cart-login-note .text-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

/* 마이페이지

   H14-18: `.mypage-section .inner { max-width: 640px }` 를 **지웠다.**
   시안 CSS 어디에도 `.mypage-section` 규칙이 없다 — 그건 순수 구조 클래스이고,
   우리 H9 잔재가 그 이름을 붙잡아 폭을 640px 로 좁히고 있었다. 그래서 마이페이지 뷰들이
   **시안 구조를 못 쓰고** 클래스를 일부러 빼고 있었다(뷰 주석에 그 사정이 적혀 있었다).
   `.goods-list` 그리드·`.toolbar` 와 같은 종류의 사고다(사고기록 70).

   `.mypage-profile-card` · `.mypage-note-card` 도 함께 지웠다 — 쓰는 뷰가 하나도 없다. */
.mypage-note-card {
    margin-top: 16px;
    align-items: flex-start;
}
.mypage-profile-list {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}
.mypage-profile-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 12px;
}
.mypage-profile-item dt {
    color: var(--grayscale6, #888);
}
/*
 * 🔴 H14-26: 로그아웃 버튼이 인사말 **아래로** 떨어져 있었다.
 * 시안 `.section-tit-wrapper` 는 `justify-content: space-between` 으로 오른쪽에 붙이는데,
 * 우리 버튼은 폼 안에 있고(CSRF 가 필요하다) 시안 common.css 의
 *   form, fieldset { width: 100%; }
 * 때문에 그 폼이 **가로 전체**를 차지해 다음 줄로 밀려났다.
 * 시안에는 폼이 없어서(그냥 button) 생기지 않던 차이다 — 폼으로 감쌀 때는 폭을 되돌린다.
 */
.mypage-logout-form {
    /*
     * `width` 뿐 아니라 `margin-inline` 도 되돌려야 한다 — 시안 common.css 의
     * `form, fieldset { width:100%; margin-inline:auto }` 중 auto 마진이 남으면
     * flex 항목이 남는 공간을 빨아들여 **가운데**로 간다(오른쪽에 붙지 않는다).
     */
    width: auto;
    margin-inline: 0;
    align-self: flex-end;
}

.product-action-wrap .btn-wrap {
    display: flex;
    column-gap: 8px;
}

/* 장바구니
   H11: 구 H9-1 의 .cart-section .inner{max-width:880px} 제거 — AUREN cart-section 은
   order.css 의 전체 폭 그리드를 쓴다. is-unavailable 등 상태 표시는 계속 아래 규칙 재사용. */
.cart-item.is-unavailable .cart-item-name,
.cart-item.is-unavailable .cart-item-option {
    color: var(--grayscale5, #aaa);
}
.cart-item-state {
    color: #b3261e;
    font-weight: 600;
}
.cart-item-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-item-option {
    color: var(--grayscale6, #888);
}
.cart-item-price {
    font-weight: 600;
}
.cart-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-summary-total b {
    font-size: var(--fs-20, 20px);
}
.cart-summary-note,
.cart-login-note {
    color: var(--grayscale6, #888);
}
.cart-order-note {
    padding-top: 8px;
    border-top: 1px dashed var(--color-border1, #e3e3e3);
}


/* ── 8. H9-2 주문 ───────────────────────────────────────────── */

.order-form {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}
.order-block {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}
.order-block-tit {
    font-size: var(--fs-17, 17px);
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grayscale8, #222);
}
.order-item-list {
    display: flex;
    flex-direction: column;
}
.order-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border1, #e3e3e3);
}
.order-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-item-option {
    display: block;
    font-style: normal;
    color: var(--grayscale6, #888);
    font-size: var(--fs-13, 13px);
}
.order-item-canceled {
    font-style: normal;
    color: #b3261e;
    font-size: var(--fs-13, 13px);
    margin-left: 6px;
}
.order-item.is-canceled .order-item-name,
.order-item.is-canceled .order-item-amount {
    color: var(--grayscale5, #aaa);
    text-decoration: line-through;
}
.order-item-amount {
    font-weight: 600;
}
.order-summary-card {
    display: flex;
    flex-direction: column;
    row-gap: 14px;
    padding: 24px;
    border: 1px solid var(--grayscale8, #222);
}
.order-detail-card {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    padding: 24px;
    border: 1px solid var(--color-border1, #e3e3e3);
    text-align: left;
}
.order-info-list {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.order-info-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    column-gap: 12px;
}
.order-info-item dt {
    color: var(--grayscale6, #888);
}
.order-number {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: 0.2px;
}
.order-complete-ico {
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    display: block;
}
.order-complete-actions {
    margin-top: 24px;
    justify-content: center;
}

/* 주문 내역 목록 */
.order-history-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--grayscale8, #222);
}
.order-history-link {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 16px 4px;
    border-bottom: 1px solid var(--color-border1, #e3e3e3);
}
.order-history-link:hover {
    background: var(--grayscale1, #fafafa);
}
.order-history-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.order-history-number {
    color: var(--grayscale6, #888);
    font-size: var(--fs-13, 13px);
}
.order-history-amount {
    font-weight: 600;
}
.order-history-status {
    font-size: var(--fs-13, 13px);
}
.order-history-paging {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    margin-top: 20px;
}

@media (max-width: 640px) {
    .order-history-link {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }
    .order-history-number {
        grid-column: 1 / -1;
    }
    .order-info-item {
        grid-template-columns: 88px minmax(0, 1fr);
    }
    .order-item {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }
    .order-item-qty {
        grid-column: 1;
        color: var(--grayscale6, #888);
        font-size: var(--fs-13, 13px);
    }
}

/* ── 9. H10 결제 ────────────────────────────────────────────── */
.pay-method-list {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.pay-method-item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--color-border1, #e3e3e3);
    cursor: pointer;
}
.pay-method-item:has(input:checked) {
    border-color: var(--grayscale8, #222);
    font-weight: 600;
}
.pay-method-item input {
    accent-color: var(--grayscale8, #222);
}
[data-pay-note].is-error {
    color: #b3261e;
}


/* ============================================================
   §10. H11 — AUREN 퍼블리싱 통합 보정
   퍼블리싱과 런타임 사이의 간극을 메우는 규칙만 둔다.
   (페이지 본 스타일은 member/order/mypage/main/common.css)
   ============================================================ */

/* ── 서체 ──
   본문: Pretendard Variable (로컬 가변 서브셋 — /theme/fonts/pretendard/).
   reset.css 의 'Pretendard' 스택 앞에 가변 패밀리를 끼워 넣는다.
   세리프 악센트: EB Garamond 로컬 파일이 없어 시스템 세리프 폴백 체인으로 대응 —
   CDN(Google Fonts)은 CSP·가용성 원칙상 쓰지 않는다(지침 §25). */
body, button, input, textarea, select {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
        'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.garamond, .eyebrow, .section-tit.garamond {
    font-family: 'EB Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}

/* ── 홈 히어로 (#mainBanner) ──
   퍼블리싱은 슬라이드에 인라인 background-image 인데 style-src 'self' 위반이라
   <img class="main-banner-img"> 로 재구성했다(home.php 주석 참조). */
#mainBanner .swiper-slide {
    position: relative;
    overflow: hidden;
}
#mainBanner .main-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
#mainBanner .inner {
    position: relative;
    z-index: 1;
}
#mainBanner .swiper-pagination-bullet-active {
    background: var(--grayscale10, #111);
}

/* ── 회원 폼 (agents NEEDS-CSS) ──
   .member-form → 퍼블리싱 클래스 전환으로 input-help 스코프를 넓힌다. */
.join-form .input-help,
.login-box .input-help {
    font-size: var(--fs-14, 14px);
    color: var(--color-static3, #767676);
}

/* ── 주문 완료 링크 밑줄 (agents NEEDS-CSS) ── */
.form-ok-note .text-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── 주문서 상품 테이블 4열 (agents NEEDS-CSS) ──
   퍼블리싱은 5열(예상 적립금 포함)인데 적립금은 H9-3 이후라 열을 뺐다. */
.order-product-table-head,
.order-product-item {
    grid-template-columns: minmax(280px, 1.4fr) minmax(220px, 1fr) 100px 160px;
}
@media (max-width: 1200px) {
    .order-product-table-head,
    .order-product-item {
        grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 1fr) 90px 140px;
    }
}

/* ── 마이페이지 표 (agents NEEDS-CSS) ──
   <col style="width:…"> 인라인은 CSP 위반이라 클래스로 대체한다. */
.common-table col.col-w12 { width: 12%; }
.common-table col.col-w15 { width: 15%; }
.common-table col.col-w20 { width: 20%; }
.common-table col.col-w25 { width: 25%; }
.common-table td a.square-btn {
    display: inline-flex;
    width: fit-content;
}

/* ── 장바구니 소소한 보정 (agents NEEDS-CSS) ── */
.cart-unit-price {
    color: var(--color-static3, #767676);
    font-size: var(--fs-14, 14px);
}

/* ── 비밀번호 토글 버튼 상태 ── */
.password-toggle {
    opacity: .55;
}
.password-toggle.is-visible {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   §12 디자인 관리 (H12-5) — 띠 배너 · 진열 섹션 · 팝업
   배경이미지 인라인 style 대신 <img> + object-fit (CSP 원칙 유지)
   ═══════════════════════════════════════════════════════════ */

/* ── 띠 배너 ── */
.storefront-band-banner {
    position: relative;
    overflow: hidden;
}
.storefront-band-banner .band-banner-link {
    display: block;
}
.storefront-band-banner .band-banner-img {
    display: block;
    width: 100%;
    height: clamp(160px, 24vw, 320px);
    object-fit: cover;
}
.storefront-band-banner .band-banner-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: clamp(18px, 3vw, 32px);
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
    text-align: center;
    padding: 0 16px;
    pointer-events: none;
}

/* ── 진열 섹션 (H14-3 — 시안 디스플레이 1·2·3) ─────────────
 *
 * 시안 `main.css` 는 이 규칙을 `#mainDisplay1/2/3` **id** 로 걸어 두었다.
 * 우리는 같은 디자인의 진열을 여러 개 만들 수 있어야 해서(그게 기능의 목적이다)
 * id 를 쓸 수 없다 — 문서에 하나뿐이어야 하기 때문이다.
 * 그래서 같은 규칙을 클래스판으로 여기 옮긴다. `main.css` 는 시안 md5 동일본이라 손대지 않는다.
 * 값은 시안에서 그대로 가져왔다(임의로 바꾸지 않았다).
 */

/* 디스플레이 1 — 마우스를 올린 카드가 넓어지는 정적 가로 그리드 */
.main-display-1 {
    --display1-size: calc((min(calc(100vw - 100px), 1520px) - var(--fs-32) * 3) * 0.41011236);
}
.main-display-1 .goods-list {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    column-gap: var(--fs-32);
}
.main-display-1 .goods-item {
    width: calc(var(--display1-size) * 0.47945205);
    min-width: 0;
    flex: none;
    transition: width 0.4s ease;
}
.main-display-1 .goods-item.active {
    width: var(--display1-size);
}
.main-display-1 .goods-thumb {
    width: 100%;
    height: var(--display1-size);
    aspect-ratio: auto;
    opacity: 1;
    overflow: hidden;
}

/* 디스플레이 2 — 왼쪽 절반 진열 배너 + 스와이프 */
.main-display-2 {
    display: flex;
    align-items: stretch;
    column-gap: var(--space-80);
}
.main-display-2 .display2-banner {
    flex-shrink: 0;
    width: 50%;
    align-self: stretch;
    overflow: hidden;
}
/*
 * 시안은 배너를 `background-image` 인라인 style 로 넣는다.
 * 스토어프론트 CSP 가 `style-src 'self'` 라 인라인 style 속성이 적용되지 않으므로
 * `<img>` 로 넣고 여기서 같은 모양을 만든다(cover · 중앙 정렬).
 */
.main-display-2 .display2-banner img,
.main-display-2 .display2-banner-mo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.main-display-2 .display2-banner-mo {
    display: none;
}
.main-display-2 .goods-item {
    width: calc(100% / 3 - var(--fs-24) * 2 / 3);
}
.main-display-2 .goods-thumb {
    aspect-ratio: 209 / 257.6;
}
.main-display-2 .goods-price {
    font-size: var(--fs-20);
}
.main-display-2 .inner {
    overflow: hidden;
    width: calc(50% - var(--space-80));
    padding-right: max(50px, calc((100vw - 1520px) / 2));
}

/* 디스플레이 3 — 화살표 + 스와이프 */
.main-display-3 .goods-thumb {
    aspect-ratio: 491 / 720;
}

/* 화살표 아이콘 뒤집기 — 시안은 인라인 style 로 했다(CSP 때문에 클래스로 옮김) */
.swiper-btn .is-flipped {
    transform: rotate(180deg);
}

@media screen and (max-width: 1440px) {
    .main-display-1 .goods-info-txt .goods-price-wrap,
    .main-display-2 .goods-info-txt .goods-price-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media screen and (max-width: 1024px) {
    .main-display-1 .goods-list {
        flex-wrap: wrap;
    }
    .main-display-1 .goods-item.active,
    .main-display-1 .goods-item {
        width: calc(50% - var(--fs-32) / 2);
    }
    .main-display-1 .goods-thumb {
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .main-display-1 .goods-item:hover .goods-thumb {
        opacity: 0.7;
    }
}
@media screen and (max-width: 768px) {
    .main-display-2 .inner {
        width: calc(100% - 48px);
        padding-right: 0;
        overflow: visible;
    }
    .main-display-2 .display2-banner {
        display: none;
    }
    .main-display-2 .display2-banner-mo {
        width: 100%;
        height: auto;
        aspect-ratio: 370 / 200;
        display: block;
        overflow: hidden;
    }
}
@media screen and (max-width: 500px) {
    .main-display-1 .goods-item.active,
    .main-display-1 .goods-item {
        width: 100%;
    }
}

/* ── 팝업 레이어 ── */
.shop-popup {
    position: fixed;
    z-index: 1200;
    max-width: min(92vw, 640px);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.shop-popup[hidden] {
    display: none;
}
.shop-popup .shop-popup-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shop-popup .shop-popup-img {
    display: block;
    width: 100%;
    height: auto;
}
.shop-popup .shop-popup-title {
    display: block;
    padding: 12px 16px 0;
    font-size: 16px;
    font-weight: 700;
}
.shop-popup .shop-popup-content {
    padding: 0 16px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    white-space: normal;
}
.shop-popup .shop-popup-link {
    margin: 0 16px 14px;
}
.shop-popup .shop-popup-actions {
    display: flex;
    border-top: 1px solid #e9e9e9;
    background: #fafafa;
    flex: none;
}
.shop-popup .shop-popup-actions button {
    flex: 1 1 50%;
    padding: 11px 8px;
    font-size: 13px;
    color: #555;
    background: none;
    border: 0;
    cursor: pointer;
}
.shop-popup .shop-popup-actions button + button {
    border-left: 1px solid #e9e9e9;
}
.shop-popup .shop-popup-actions button:hover {
    background: #f0f0f0;
}
@media (max-width: 768px) {
    /* 모바일 — 관리자 좌표 무시, 중앙 고정 */
    .shop-popup {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        width: 90vw !important;
        max-height: 70vh !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   §13 고객센터 (H12-6) — 공지 · FAQ · 1:1 문의 · 상단 배너
   ═══════════════════════════════════════════════════════════ */

.support-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.support-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e5e5e5;
}
.support-tab {
    padding: 12px 20px;
    font-size: 15px;
    color: #777;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.support-tab.active {
    color: #111;
    font-weight: 700;
    border-bottom-color: #111;
}

/* ── 공지 목록 ── */
.notice-list {
    display: flex;
    flex-direction: column;
    border-top: 2px solid #111;
}
.notice-item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 8px;
    border-bottom: 1px solid #ececec;
}
.notice-item a:hover .notice-title {
    text-decoration: underline;
}
.notice-item.is-pinned .notice-badge {
    background: #111;
    color: #fff;
}
.notice-badge {
    flex: none;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #555;
}
.notice-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.notice-date {
    flex: none;
    font-size: 13px;
    color: #999;
}

/* ── 공지 상세 ── */
.notice-detail-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
}
.notice-detail-title {
    font-size: 22px;
    font-weight: 700;
}
.notice-detail-meta {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: #999;
    align-items: center;
}
.notice-detail-body {
    padding: 24px 4px 8px;
    font-size: 15px;
    line-height: 1.75;
    color: #333;
    word-break: break-word;
}
.notice-detail-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
}

/* ── FAQ ── */
.faq-category-title {
    font-size: 16px;
    font-weight: 700;
    margin: 8px 0 -16px;
}
.faq-public-list {
    display: flex;
    flex-direction: column;
    border-top: 2px solid #111;
}
.faq-public-item {
    border-bottom: 1px solid #ececec;
}
.faq-public-question {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 8px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: #111;
}
.faq-q-mark {
    flex: none;
    font-weight: 700;
    color: #888;
    font-size: 13px;
}
.faq-q-text {
    flex: 1 1 auto;
}
.faq-q-arrow {
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #999;
    border-bottom: 1.5px solid #999;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.faq-public-answer {
    padding: 0 8px 18px 46px;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}
/* JS 활성 시: 접힘 기본, is-open 만 펼침 */
.faq-public-item.is-collapsible .faq-public-answer {
    display: none;
}
.faq-public-item.is-collapsible.is-open .faq-public-answer {
    display: block;
}
.faq-public-item.is-collapsible.is-open .faq-q-arrow {
    transform: rotate(225deg);
}

/* ── 1:1 문의 ── */
.form-ok-note {
    padding: 12px 16px;
    border-radius: 8px;
    background: #f0faf2;
    border: 1px solid #b7e3c0;
    color: #1d7a3a;
    font-size: 14px;
    margin-bottom: 16px;
}
.state-label {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: #f1f1f1;
    color: #666;
}
.state-label.is-done {
    background: #eef3ff;
    color: #2d5be3;
}
.inquiry-question-body {
    background: #fafafa;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}
.inquiry-answer-box {
    margin-top: 16px;
    border: 1px solid #e3e9f8;
    background: #f7f9ff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inquiry-answer-box.is-waiting {
    border-color: #eee;
    background: #fafafa;
    color: #888;
}
.inquiry-answer-title {
    font-size: 14px;
    font-weight: 700;
    color: #2d5be3;
}
.inquiry-answer-box.is-waiting .inquiry-answer-title {
    color: #888;
}
.inquiry-answer-body {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

/* ── 상단 배너 (배너 관리 > 상단 배너, 공지 연결) ── */
.storefront-top-banner {
    background: #111;
    color: #fff;
}
.storefront-top-banner .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 9px 16px;
    flex-wrap: wrap;
}
.storefront-top-banner a {
    color: #fff;
    font-size: 13px;
    opacity: .9;
}
.storefront-top-banner a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   §14 프로모션 — 기획전·이벤트 · 쿠폰

   H14-15: 여기 있던 `.promo-card*` · `.promo-detail-*` 를 **전부 지웠다.**
   우리가 지어낸 클래스였고, 기획전 목록·이벤트 목록·두 상세를 한 마크업으로
   그리느라 만든 것이다. 시안은 네 화면이 서로 다른 구조이고, 그 규칙은
   `promotion.css`(이벤트) · `product.css`(기획전) 에 이미 다 있었다.
   마크업을 시안으로 되돌렸으므로 이 보정은 필요 없어졌다 — 남겨 두면
   다음 사람이 "어느 쪽이 진짜인가" 를 다시 묻게 된다.

   아래에 남는 것은 **CSP 때문에 시안과 달라진 자리를 메우는 것뿐**이다.
   ═══════════════════════════════════════════════════════════ */

/* 기획전 상세 히어로 — 시안은 인라인 background-image, 우리는 CSP 때문에 <img>.
   `product.css` 의 `.exhibition-tit-section`(aspect-ratio · ::after 그라데이션 · 흰 글자)은
   그대로 살아 있고, 여기서는 깔린 이미지를 그 배경 자리에 앉히기만 한다. */
.exhibition-tit-section .exhibition-tit-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 기획전 카테고리 탭 — 시안은 Swiper 로 가로 스크롤한다. 이 화면은 Swiper 를 띄우지
   않으므로(벤더 `overflow:hidden` 이 걸리면 JS 없이 오른쪽 탭에 손이 닿지 않는다)
   같은 모양을 순수 CSS 가로 스크롤로 낸다. 위 §상품 목록의 일반 규칙을 여기서만 덮는다. */
.product-category-section .product-category-nav {
    overflow-x: auto;
    scrollbar-width: none;
}
.product-category-section .product-category-nav::-webkit-scrollbar {
    display: none;
}
.product-category-section .product-category-nav .product-category-list {
    flex-wrap: nowrap;
    gap: 0;
}

/* 이벤트 상세 이전/다음 표 — 시안은 `<col style="width:140px">`(인라인 style, CSP 차단) */
.event-view-nav-table .event-view-nav-label-col {
    width: 140px;
}

/* 모바일 '더보기' — 시안 `product.css` 가 768px 이하에서 `.goods-list + .pagination` 을 숨긴다.
   시안은 그 자리를 JS '더보기' 버튼이 대신하는데 우리에겐 그 버튼이 없어서 **모바일에서
   2페이지로 갈 방법이 아예 없었다**(`partials/pagination.php` 주석 참고).
   데스크톱에서는 페이지네이션이 있으므로 이 버튼을 감춘다 — 둘 다 보이면 중복이다. */
.pagination-more {
    display: none;
}
@media (max-width: 768px) {
    .pagination-more {
        display: flex;
        justify-content: center;
    }
}

/* 모달 — JS 없이도 열린다 (H14-19).

   `common.css` 는 `.modal { display:none }` + `.modal.open { display:block !important }` 이고
   여는 것은 시안 JS 다. JS 가 죽으면 주문 취소 버튼이 **아무 일도 안 하는 버튼**이 된다.
   그래서 여는 방법을 하나 더 둔다 — `<a href="#orderCancelModal">` + `:target`.
   주소로 열리므로 JS 없이도 동작하고, 뒤로가기로 닫힌다. JS 는 `.open` 을 붙일 뿐이다.

   `!important` 는 `common.css` 의 `.modal.open { …!important }` 와 같은 층에서 겨루기 위한 것이다. */
.modal:target {
    display: block !important;
}
.modal:target + .modal-bg {
    display: block !important;
}

/* 카테고리 3단 — 시안은 `product.css` 에서 `display:none` 두고 jQuery 가 인라인 style 로 연다.
   CSP(style-src 'self') 에서는 인라인이 안 먹고, JS 가 죽으면 3단 링크에 손이 닿지 않는다.
   → 클래스로 연다. 지금 보고 있는 가지에는 **서버가** `open` 을 붙여 둔다
   (`partials/category-sidebar.php`). JS 는 토글만 한다. */
.category-depth2-item.open > .category-depth3-list {
    display: block;
}

/* ── 내 쿠폰 ── */
.coupon-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.coupon-card {
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #e3e9f8;
    background: #f7f9ff;
    border-radius: 12px;
    padding: 18px 20px;
}
.coupon-card.is-disabled {
    border-color: #eee;
    background: #fafafa;
    opacity: .7;
}
.coupon-card-benefit {
    flex: none;
    min-width: 120px;
    font-size: 18px;
    font-weight: 800;
    color: #2d5be3;
}
.coupon-card.is-disabled .coupon-card-benefit {
    color: #888;
}
.coupon-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.coupon-card-name {
    font-size: 15px;
    font-weight: 600;
}
.coupon-card-desc {
    font-size: 13px;
    color: #666;
    margin: 0;
}
.coupon-card-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #999;
    margin: 0;
    flex-wrap: wrap;
}
.coupon-card-status {
    flex: none;
}
@media (max-width: 600px) {
    .coupon-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ── §15 취소·반품·교환 (H12-9) ─────────────────────────────
   마이페이지 클레임 목록·신청 폼·주문 상세의 주문 관리 박스.
   공통 테이블(common-table)·버튼은 기존 규칙을 그대로 쓰고
   여기서는 클레임 전용 요소만 더한다. */
.claim-type-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.claim-qty-input {
    width: 84px;
    text-align: center;
}
.claim-textarea {
    resize: vertical;
    min-height: 96px;
}
.claim-guide {
    margin: 16px 0 20px;
    padding: 14px 16px;
    background: #f7f8fa;
    border-radius: 8px;
    color: #666;
}
.claim-guide p {
    margin: 0 0 4px;
}
.claim-guide p:last-child {
    margin-bottom: 0;
}
.claim-brief-list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.claim-action-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.claim-state.is-progress {
    color: #2261d3;
}
.claim-state.is-done {
    color: #1d9a5c;
}
.claim-state.is-closed {
    color: #999;
}
.claim-refund-note {
    margin: 4px 0 0;
    color: #666;
}
.claim-withdraw-form {
    display: inline-block;
    margin-top: 6px;
}

/* ── §16 리뷰 (H12-10 · H14-20 정리) ─────────────────────────
   H14-20: 상품 상세의 리뷰·문의는 **시안 클래스**(`.review-item` · `.product-inquiry-*`)로
   갈아 끼웠고, 그때 쓰던 우리 클래스(`qna-*` 등)는 규칙과 함께 지웠다.
   여기 남은 것은 아직 시안 이식 전인 **마이페이지 내 리뷰**가 쓰는 규칙뿐이다. */
.review-stars {
    color: #f5a623;
    letter-spacing: 1px;
}
.review-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.review-item {
    padding: 18px 0;
    border-bottom: 1px solid #eee;
}
.review-item:last-child {
    border-bottom: 0;
}
.review-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.review-meta {
    font-size: 13px;
    color: #999;
}
.review-option {
    margin: 4px 0 0;
    color: #888;
}
.review-title {
    display: block;
    margin-top: 8px;
    font-size: 15px;
}
.review-content {
    margin: 8px 0 0;
    line-height: 1.6;
    white-space: normal;
}
.review-reply {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f7f8fa;
    border-radius: 8px;
}
.review-reply-label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: #555;
}
.review-reply p {
    margin: 0;
    line-height: 1.6;
}


.review-write-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.review-write-item {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 16px 18px;
}
.review-write-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.review-rating-field {
    border: 0;
    padding: 0;
    margin: 0;
}
.review-rating-radios {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.review-rating-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
}
.review-rating-option input {
    appearance: auto;
    margin: 0;
}
.review-rating-option:has(input:checked) {
    border-color: #111;
    font-weight: 600;
}
.review-write-btns {
    justify-content: flex-end;
}
.review-write-note {
    margin: 10px 0 0;
    color: #888;
}
.review-write-guide {
    margin-top: 16px;
    color: #999;
}
.my-review-list .review-item {
    border: 1px solid #eee;
    border-radius: 10px;
    border-bottom: 1px solid #eee;
    padding: 16px 18px;
    margin-bottom: 14px;
}

/* ── §17 약관·정책 (H12-13) ─────────────────────────────────── */
.policy-article {
    margin-top: 24px;
}
.policy-content {
    padding: 24px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.policy-updated {
    margin-top: 12px;
    color: #999;
    text-align: right;
}

/* ── §18 쿠폰 받기·주문서 할인 (H12-17) ─────────────────────── */
.claimable-coupons {
    margin-bottom: 28px;
}
.claimable-coupons > h4 {
    margin-bottom: 12px;
}
.coupon-item.claimable {
    display: flex;
    align-items: center;
    gap: 16px;
}
.coupon-item.claimable .coupon-body {
    flex: 1;
}
.coupon-item.claimable form {
    flex: none;
}
.form-ok-note {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #f0faf5;
    color: #1a7f4e;
    font-size: 14px;
}

/* ── §19 리뷰·문의 사진 첨부 (H12-17) ────────────────────────── */
.review-images {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.review-write-form input[type="file"] {
    margin-top: 10px;
    font-size: 13px;
}

/* ── §20 포인트 내역 (H12-18) ────────────────────────────────── */
.point-balance-box {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafafa;
    margin-bottom: 20px;
}
.point-balance {
    font-size: 24px;
    font-weight: 700;
}
.point-history-list {
    border-top: 1px solid #111;
}
.point-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid #eee;
}
.point-history-reason { color: #888; margin: 2px 0 0; }
.point-history-date { color: #aaa; }
.point-history-amount.plus { color: #1a7f4e; }
.point-history-amount.minus { color: #c0392b; }
.point-history-note { margin-top: 10px; color: #999; }

/* ── §21 구매확정 (H12-19) ────────────────────────────────────── */
/* 주문 관리 버튼 줄 안의 폼(주문 취소·구매확정)이 flex 흐름을 깨지 않게 */
.claim-action-btns form { display: inline-flex; }

/* ══════════════════════════════════════════════════════════
   H14-13 — 헤더 시안 정합 · 위시리스트 · 진열별 목록

   시안 CSS(layout.css·common.css)에 이미 있는 규칙은 다시 쓰지 않는다.
   여기 있는 것은 **시안에 없던 우리 화면**과, 시안 규칙이 우리 마크업과
   한 칸 어긋나는 곳의 보정뿐이다.
   ══════════════════════════════════════════════════════════ */

/* ── 헤더 상단 띠 배너 ──
   시안은 슬라이드 2장을 항상 두지만 우리는 배너가 0·1·N 장이다.
   한 장일 때는 `.swiper` 클래스를 붙이지 않으므로(top-banner.php) 스와이퍼 레이아웃이
   적용되지 않는다 → 그때도 시안과 같은 높이·정렬이 되게 못 박는다. */
.header-banner:not(.swiper) .swiper-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.header-banner:not(.swiper) .header-banner-content {
    width: 100%;
}
/* 링크 없는 안내문은 <div> 다 — <a> 와 같은 모양으로 보이게 한다 */
.header-banner .header-banner-content > p {
    margin: 0;
}

/* ── 위시리스트 하트 ──
   위치 규칙(`.goods-thumb .favorite-btn`)은 common.css 에 이미 있다.
   여기서는 **상태 표시**만 더한다 — 채워진 하트가 눌린 상태로 보여야 한다. */
.goods-thumb .favorite-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}
.goods-thumb .favorite-btn[aria-busy="true"] {
    opacity: .5;
    pointer-events: none;
}


/* ── 진열별 상품 목록(/displays/{slug}) ──
   상품 목록과 같은 컴포넌트를 쓰므로 새 규칙은 배너 한 줄뿐이다. */
.display-banner-section .display-banner-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ── 홈 띠 배너 이미지 (H14-14) ──
   시안은 `#stripBanner .swiper-slide` 에 인라인 `background-image` 를 넣는다.
   우리 CSP 는 `style-src 'self'` 라 인라인 style 이 적용되지 않으므로 `<img>` 로 넣고
   여기서 같은 모양(cover · 중앙)을 만든다 — 메인 배너에서 H14-3 이 쓴 것과 같은 방법이다. */
#stripBanner .swiper-slide {
    position: relative;
    overflow: hidden;
}
#stripBanner .strip-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
#stripBanner .inner {
    position: relative;
    z-index: 1;
}

/* 기획전·이벤트 배너를 올리지 않았을 때의 테마 도형 — 깨진 이미지를 보여 주지 않는다 */
#mainExhibition .thumb-wrap .thumb-empty,
#mainEvent .thumb-wrap .thumb-empty {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15%;
    background: var(--color-bg2, #f5f3f0);
    opacity: .5;
}

/* ── 푸터 텍스트 로고 (H14-14) ──
   `layout.css` 의 `.logo.white img { filter: brightness(0) invert(1) }` 는 **이미지 로고**만
   흰색으로 만든다. 로고를 올리지 않은 사이트는 상호를 글자로 보여 주는데(`.logo-text`),
   그 글자가 기본 검은색이라 **검은 푸터에서 보이지 않았다**(실측). */
.footer .footer-logo .logo-text {
    color: var(--color-white, #fff);
}

/* ══════════════════════════════════════════════════════════════
   H14-20 · 상품 상세 시안 이식 — 시안 CSS 가 **빠뜨린 것만** 보탠다
   ══════════════════════════════════════════════════════════════ */

/* ── 접힘/펼침을 `<details>` 로 한 대가 ──
   시안 `product.css` 는 `.product-benefit-content` · `.product-inquiry-content` 를
   `display:none` 으로 두고 **여는 규칙을 두지 않았다** — jQuery `slideDown()` 이 인라인
   style 을 심는 전제다. 우리 CSP 는 `style-src 'self'` 라 그 인라인 style 이 적용되지 않는다
   (= 시안 그대로 옮기면 문의 내용에 영영 손이 닿지 않는다).
   `<details>` 로 바꾸고 여는 규칙만 여기서 보탠다. 클래스는 시안 것 그대로다. */
.product-benefit-item[open] > .product-benefit-content,
.product-inquiry-item[open] > .product-inquiry-content {
    display: block;
}
.product-benefit-item[open] .product-benefit-btn img,
.product-inquiry-item[open] .product-inquiry-arrow img {
    transform: rotate(180deg);
}

/* `<summary>` 의 기본 삼각형을 지운다. `display:grid` 를 주면 대부분 사라지지만
   Safari 는 `::-webkit-details-marker` 를 따로 지워야 한다. */
.product-benefit-btn,
.product-inquiry-toggle {
    cursor: pointer;
    list-style: none;
}
.product-benefit-btn::-webkit-details-marker,
.product-inquiry-toggle::-webkit-details-marker {
    display: none;
}

/* ── 갤러리 이전 화살표 ──
   시안은 `style="transform: rotate(180deg)"` 를 인라인으로 박아 이전 버튼을 만든다.
   인라인 style 은 CSP 가 막으므로 클래스로 옮긴다. */
.product-swiper-btn.prev img {
    transform: rotate(180deg);
}

/* ── 모바일 구매 시트를 JS 없이 여는 길 ──
   여는 버튼이 `<a href="#product-purchase-layer">` 라 `:target` 으로 열린다.
   JS 가 있으면 `initPurchaseSheet` 가 기본 동작을 막고 `.open` 으로 여니 이 규칙은 안 쓰인다.
   이 폭에서 시트가 안 열리면 **모바일에서는 구매 자체가 불가능**하다 — 그래서 두 길을 다 둔다.
   시안의 손잡이 드래그(`--sheet-drag-y`)는 매 프레임 인라인 style 을 쓰는 방식이라 옮기지 않았다. */
@media screen and (max-width: 1024px) {
    .product-view-section .product-purchase-layer:target {
        visibility: visible;
        pointer-events: auto;
    }
    .product-view-section .product-purchase-layer:target .product-purchase-bg {
        opacity: 1;
    }
    .product-view-section .product-purchase-layer:target .product-purchase-sheet {
        transform: translateY(0);
    }
}

/* ── 리뷰·문의 목록의 모바일 페이지네이션 ──
   시안 `product.css` 는 `.goods-list + .pagination` 만 숨긴다. 리뷰·문의 목록은 그 선택자에
   걸리지 않아 페이지네이션과 '더보기' 가 **둘 다** 보였다(실측). 상품 목록과 같은 규칙으로 맞춘다. */
@media (max-width: 768px) {
    .product-review-section .pagination,
    .product-inquiry-section .pagination {
        display: none;
    }
}

/* ── 문의 작성 폼 ──
   시안에는 이 폼이 없다(별도 화면으로 보낸다). 우리는 읽던 자리에서 바로 쓰게 두므로
   `common.css` 의 `input-list` 규격에 여백만 맞춘다. */
.product-inquiry-form {
    margin-top: var(--space-60, 60px);
    padding-top: var(--fs-30, 30px);
    border-top: 1px solid var(--color-border1, #e5e5e5);
}
.product-inquiry-form .btn-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 옵션 조합 안내 — 시안에 대응하는 자리가 없어 우리가 만든 한 줄이다.
   품절·없는 조합을 **조용히 두지 않기 위한** 것이므로 눈에 띄어야 한다. */
.product-option-state:empty {
    display: none;
}

/* 상품 상세 하단 '같은 카테고리 상품' — 시안은 스와이퍼지만 우리는 격자다.
   추가 이미지 데이터가 없어 카드 마우스오버 전환이 없고, 8개는 한 화면에 들어간다. */
.recommend-product-section .recommend-product-list {
    width: 100%;
}


/* ── H14-21 · 공유하기 ──
   시안에는 [공유하기] 버튼이 있는데 H14-20 에서 "JS 없으면 죽은 버튼" 이라며 빼 버렸다.
   빼는 대신 **JS 없이도 되는 방식**을 만든다 — `:target` 으로 패널을 열고 주소를 글자로 보여 준다.
   손으로 복사할 수 있으면 공유는 성립한다. JS 가 있으면 Web Share·클립보드로 올라간다. */
.product-share-layer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1002;
}
.product-share-layer:target,
.product-share-layer.open {
    display: block;
}
.product-share-bg {
    display: block;
    position: absolute;
    inset: 0;
    background-color: rgb(var(--rgb-black, 0 0 0) / 50%);
}
.product-share-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(420px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--fs-30, 30px);
    border-radius: 12px;
    background-color: var(--color-white, #fff);
    transform: translate(-50%, -50%);
}
.product-share-panel .custom-input {
    width: 100%;
}
.product-share-panel .btn-wrap {
    display: flex;
    gap: 8px;
}
.product-share-panel .btn-wrap > * {
    flex: 1 1 0;
    justify-content: center;
}
.product-share-panel [data-share-note] {
    color: var(--grayscale6, #888);
}

/* ── H14-21 · 고른 옵션 줄 ──
   시안은 조합마다 줄이 쌓인다. 줄이 없을 때(아직 안 고름) 서버가 그린 줄만 보이고,
   JS 가 줄을 쌓기 시작하면 서버 줄을 숨긴다 — 두 벌이 겹쳐 보이지 않게. */
.selected-option-list.has-lines > [data-server-line] {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   H14-31 · 🔴 옵션을 고르기 **전에는** 선택 옵션 줄·총 금액을 보여 주지 않는다
   ══════════════════════════════════════════════════════════════

   시안은 조합을 고를 때마다 줄이 하나씩 생긴다 — 고르기 전 목록은 비어 있다.
   우리는 JS 없는 길을 위해 줄 하나를 미리 그려 두므로, 그대로 두면 아직 아무것도
   안 골랐는데 수량칸과 금액이 먼저 보인다.

   판정을 `<select>` 의 **실제 상태**로 한다 — 처음에는 `value=""` 인 안내 항목이
   선택돼 있고, 손님이 고르면 그 항목의 `:checked` 가 풀린다. 브라우저가 스스로
   아는 상태라 **JS 가 죽어도 똑같이 동작한다.** JS 가 붙이는 클래스로 판정하면
   JS 없는 화면에서는 영영 감춰진 채로 남는다.

   그룹이 여럿이면 **하나라도** 안 고른 것이 있는 동안 감춘다(하위 검색이므로 자연히 그렇다).

   줄이 쌓인 뒤에는 JS 가 select 를 처음 상태로 되돌리므로(같은 조합 재선택 방지)
   `:checked` 만 보면 줄이 있는데도 감춰진다 — `.has-lines` 를 함께 본다. */
[data-cart-form]:has([data-option-group] option[value=""]:checked):not(:has(.selected-option-list.has-lines)) [data-server-line],
[data-cart-form]:has([data-option-group] option[value=""]:checked):not(:has(.selected-option-list.has-lines)) .product-total-price {
    display: none;
}

/* 금액 칸이 비어 있으면(= 서버가 모르는 값이라 JS 가 채워야 하는데 JS 가 없다)
   숫자 없는 '총 금액' 줄을 보여 주지 않는다. 틀린 금액을 그리는 것보다 낫다. */
.product-total-price:has(> [data-total-price]:empty) {
    display: none;
}

.selected-option-price:has(> [data-line-price]:empty) {
    visibility: hidden;
}

/* ══════════════════════════════════════════════════════════════
   H14-21 · 🔴 JS 가 붙이는 클래스에 규칙이 없어 **아무 일도 안 일어나던** 것들
   ══════════════════════════════════════════════════════════════

   시안 CSS 는 `.search-section { display:none }` 만 두고 **여는 규칙을 두지 않았다** —
   jQuery `.slideDown()` 이 인라인 `style="display:block"` 을 심는 전제다.
   우리 CSP 는 `style-src 'self'` 라 그 인라인 style 이 적용되지 않는다.

   우리 `storefront.js` 는 (옳게) 인라인 style 대신 `.open` 클래스를 붙이는데,
   **그 클래스를 보이게 하는 규칙을 아무도 만들지 않았다.**
   → 헤더 검색 버튼을 눌러도 검색창이 열린 적이 **한 번도 없다.**
   (전체 메뉴·서랍은 자기 `.open`/`.sidebar-open` 규칙이 있어 정상이었다.)

   사고기록 87 이 헤더에서 이미 일어나고 있었던 것이다. */
.search-section.open {
    display: block;
}

/* 위시리스트 하트의 '담김' 표시. `storefront.js` 가 `is-marked` 를 토글하는데
   규칙이 없어 **아이콘 말고는 아무 변화가 없었다** — 목록에서 어느 카드가 담겼는지
   한눈에 안 보였다. 시안에 대응 규칙이 없어(하트 아이콘 교체로만 표현) 최소한만 준다. */
.favorite-btn.is-marked,
.txt-btn.is-marked {
    color: var(--color-static3, #c0392b);
}

/* ── H14-22 · 못 불러온 이미지 ──
   업로드 파일이 사라졌거나 서버 앞단이 잠깐 실패하면 브라우저가 **엑박 + alt 글자**를 그린다.
   `storefront.js initBrokenImages` 가 테마 도형으로 바꾸는데, 그 도형은 상품 사진이 아니므로
   꽉 채우지 않고(`contain`) 옅게 둔다 — 사진이 있는 카드와 한눈에 구분돼야 한다.
   (`onerror` 속성은 인라인 핸들러라 CSP 가 막는다. 그래서 JS 가 붙인다.) */
.goods-thumb img.img-broken,
.product-gallery img.img-broken,
.review-thumb img.img-broken,
.table-product-thumb img.img-broken {
    object-fit: contain;
    padding: 18%;
    background: var(--color-bg2, #f5f3f0);
    opacity: .5;
}

/* ── H14-22 · 못 불러온 이미지 ──
   업로드 파일이 사라졌거나 서버 앞단이 잠깐 실패하면 브라우저가 **엑박 + alt 글자**를 그린다.
   `storefront.js initBrokenImages` 가 테마 도형으로 바꾸는데, 그 도형은 상품 사진이 아니므로
   꽉 채우지 않고(`contain`) 옅게 둔다 — 사진이 있는 카드와 한눈에 구분돼야 한다.
   (`onerror` 속성은 인라인 핸들러라 CSP 가 막는다. 그래서 JS 가 붙인다.) */
.goods-thumb img.img-broken,
.product-gallery img.img-broken,
.review-thumb img.img-broken,
.table-product-thumb img.img-broken {
    object-fit: contain;
    padding: 18%;
    background: var(--color-bg2, #f5f3f0);
    opacity: .5;
}

/* ══════════════════════════════════════════════════════════════
   H14-24 · 장바구니 선택 (시안 order/cart.php 구조 복구)
   ══════════════════════════════════════════════════════════════

   시안의 체크박스·전체선택·선택삭제 모양은 order.css / common.css 에 이미 있다
   (.custom-chk, .cart-toolbar, .cart-all-check, .cart-item-check, .cart-selected-delete).
   여기 있는 것은 **우리 구조에서만 필요한** 세 가지뿐이다. */

/* 폼은 중첩할 수 없어서 수량·삭제 폼을 장바구니 폼 바깥에 두고 form 속성으로 가리킨다.
   그 폼들은 hidden input 만 들어 있으므로 자리를 차지하면 안 된다. */
.cart-hidden-form {
    display: none;
}

/* 🔴 Enter 키의 기본 제출 버튼. 보이지도, 잡히지도 않아야 하되 폼에는 남아야 한다.
   display:none 이면 브라우저가 기본 버튼으로 쓰지 않으므로 **숨기되 지우지 않는다**. */
.default-submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 선택 개수 줄 교체.
   JS 가 없으면 서버가 센 "담긴 상품 N종 M개" 가 보인다 — 항상 참인 값이다.
   JS 가 살아나면 .has-live 가 붙어 "선택한 상품 N개" 로 바뀐다.
   🔴 이 두 규칙이 없으면 JS 가 클래스를 붙여도 화면은 그대로다(H14-21 검색창 사고). */
.cart-selected-count [data-cart-count-live] {
    display: none;
}
.cart-selected-count.has-live [data-cart-count-live] {
    display: inline;
}
.cart-selected-count.has-live [data-cart-count-server] {
    display: none;
}

/* ── H14-25 · 시안이 인라인 style 로 주던 표 칸 폭 ──
   시안 `customer/notice/list.php` 는 `<col style="width:160px">` 로 폭을 준다.
   우리 CSP 는 `style-src 'self'` 라 인라인 style 속성이 통째로 막히므로(붙어도 무시된다)
   같은 값을 클래스로 옮긴다. `.common-table` 이 `table-layout: fixed` 라 이 폭이 실제로 쓰인다. */
.common-table .col-num {
    width: 160px;
}
.common-table .col-date {
    width: 160px;
}
.common-table .col-status {
    width: 160px;
}
.notice-search-result {
    color: var(--grayscale6, #888);
}
.notice-search-result .txt-btn {
    margin-left: 8px;
}

@media (max-width: 768px) {
    .common-table .col-num,
    .common-table .col-date,
    .common-table .col-status {
        width: auto;
    }
}

/* ── H14-26 · 마이페이지 대시보드에서 우리만 필요한 두 줄 ──
   시안 대시보드 마크업의 나머지(common-grid4 · common-card-text · tit-link ·
   common-grid2.large · goods-list.common-grid3.small)는 시안 mypage.css · common.css 에 그대로 있다.
   `.table-price` · `.table-state` 는 시안 마크업에는 있으나 규칙이 어디에도 없다(시안 쪽 죽은 이름) —
   구조를 같게 두려고 남길 뿐, 우리가 규칙을 만들어 붙이지 않는다. */

/* 시안은 '주문 관리' 칸 폭을 인라인 style(20%)로 준다. CSP 아래서는 무시되므로 클래스로. */
.common-table .col-manage {
    width: 20%;
}
@media (max-width: 768px) {
    .common-table .col-manage {
        width: auto;
    }
}

/* 최근 본 상품·위시리스트가 비었을 때의 한 줄. 칸을 없애는 대신 왜 비었는지 적는다. */
.mypage-empty-note {
    padding: var(--fs-20, 20px) 0;
    color: var(--grayscale6, #888);
}

/* ── H14-32 · 상품 문의 목록의 판매자 답변 줄 ──
   표 안에 답변을 이어 붙인다(상세 화면을 따로 만들지 않았다).
   문의 줄과 구별되도록 배경만 옅게 준다 — 색으로만 구별하지 않게 라벨도 함께 그린다. */
.common-table tbody tr.answer-row > td {
    background-color: var(--color-bg1, #f7f5f2);
}

.common-table tbody tr.answer-row .review-reply-label {
    display: block;
    margin-bottom: 6px;
    color: var(--grayscale7, #666);
    font-size: var(--fs-13, 13px);
}

/* ── H14-28 · 저장된 배송지 고르기 ──
   시안은 `<button>` + JS 로 `.active` 를 붙인다. 우리는 라디오(숨김) + `<label>` 이라
   **고른 상태를 CSS 가 직접 안다** — JS 가 죽어도 어느 것을 골랐는지 보인다.
   모양 값은 시안 `.shipping-address-btn.active` 와 같은 것을 쓴다. */
.shipping-address-tabs > .shipping-address-btn {
    display: inline-block;
    cursor: pointer;
}
.shipping-address-tabs > input[type="radio"]:checked + .shipping-address-btn {
    border-color: var(--color-bg1, #f5f2ee);
    background-color: var(--color-bg1, #f5f2ee);
}
/* 키보드로 옮길 때 어디에 있는지 보여야 한다 — 라디오가 숨겨져 있으므로 라벨에 표시한다. */
.shipping-address-tabs > input[type="radio"]:focus-visible + .shipping-address-btn {
    outline: 2px solid var(--color-static3, #444);
    outline-offset: 2px;
}

/* ── H14-30 · 공지 상세의 이전/다음 표 칸 폭 ──
   시안 `customer/notice/view.php` 는 `<col style="width:120px">` 로 준다.
   CSP(style-src 'self') 아래서는 인라인 style 이 무시되므로 클래스로 옮긴다. */
.common-table .col-label {
    width: 120px;
}
@media (max-width: 768px) {
    .common-table .col-label {
        width: auto;
    }
}

/* ── H14-30 · 최근 본 상품의 선택 체크박스 ──
   시안은 체크박스를 `.goods-item` **안**에 넣지만, 우리 카드 부품(product-card.php)은
   `<a>` 통째다 — 링크 안에 체크박스를 넣으면 누를 때마다 상품 페이지로 넘어간다.
   카드를 감싸는 칸을 하나 두고 체크박스를 그 위에 얹는다. */
.recent-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.recent-item-check {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}
.recent-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--fs-16, 16px);
}
.recent-toolbar .custom-chk {
    margin-right: auto;
}

/* ── H14-32 · 주문서를 시안 구조로 되돌리며 필요해진 규칙 ──────────────
   시안 order.css 에 이미 있는 이름(.payment-method · .agreement-section · .shipping-request-custom)은
   여기서 다시 만들지 않는다 — 아래 셋만 우리 쪽 사정에서 생긴 것이다. */

/* 적립률 0% 인 쇼핑몰: 예상적립금 열을 안 그리므로 그리드도 4열로 줄인다.
   (시안 그리드는 5열 고정이라, 열을 안 그리면 맨 끝 140px 이 빈 채로 남는다.) */
.order-product-section.no-point .order-product-table-head,
.order-product-section.no-point .order-product-item {
    grid-template-columns: minmax(280px, 1.4fr) minmax(220px, 1fr) 100px 160px;
}

/* 배송 요청사항 '직접 입력' 칸 — **고른 뒤에만 보인다.**
   시안은 JS 로 열지만, 우리는 `<select>` 의 실제 상태를 CSS 가 직접 본다:
   브라우저가 스스로 아는 상태라 **JS 유무와 무관하게 같은 화면**이 된다
   (H14-31 의 상품 옵션 감추기와 같은 방법 — `option[value=""]:checked`).

   기본은 감춤이다. JS 가 죽어도 '직접 입력' 을 고르면 열리고,
   고르지 않으면 빈 칸이 화면을 차지하지 않는다. */
.order-section .order-input-list .shipping-request-custom {
    display: none;
    margin-top: 8px;
}

.order-section .order-input-list
    .input-content:has(select[name="shipping_request"] option[value="__custom"]:checked)
    .shipping-request-custom {
    display: block;
}

/* 요약 상자의 [N원 결제하기] — 시안은 금액이 버튼 안에 있다.
   금액만 JS 가 바꾸므로 span 하나로 감쌌고, 줄바꿈만 막아 준다. */
.order-section .order-submit-btn [data-submit-total] {
    white-space: nowrap;
}

/* ── H14-32 · 주문서에서 결제창을 열 때의 안내 한 줄 ──
   평소에는 비어 있다. `:empty` 로 숨겨 두면 빈 칸이 여백을 먹지 않는다
   (주문서 요약 상자는 세로가 빡빡하다). 말할 일이 생겼을 때만 자리를 차지한다. */
.order-summary-inner .checkout-note:empty {
    display: none;
}

.order-summary-inner .checkout-note {
    margin-top: var(--fs-12, 12px);
    color: var(--color-static3, #8a7f76);
}

.order-summary-inner .checkout-note.is-error {
    color: var(--color-error, #d64545);
}