/* ============================================================
   2026 리뉴얼 공용 컴포넌트
   출처: Figma qWrC8ICDiyvyBjQh4BeNXt

   [네임스페이스 규칙]
   리뉴얼 마크업은 전부 `.rnw-` 접두를 쓴다. 기존 style.css(52KB)와
   선택자가 겹치지 않아야 화면을 하나씩 교체하는 동안 회귀 범위를
   통제할 수 있다. 기존 클래스에 스타일을 덧씌우지 말고, 마크업을
   교체하면서 클래스명도 함께 `.rnw-`로 바꾼다.

   값은 Figma 실측이다. 임의로 반올림하지 않는다.
   ============================================================ */

/* ── 하단 고정바 (18:987 bottom-fixed-bar) ─────────────────── */
/* 컨테이너 자체는 배경이 없다. 플로팅 버튼 + 내비 알약이 떠 있는 구조 */
.rnw-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-float);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

.rnw-bottombar > * {
    pointer-events: auto;
}

/* 플로팅 버튼 줄 — 좌측 공유 / 우측 문의·맨위로 세로 스택 */
.rnw-bottombar__float {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.rnw-bottombar__float-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50px;
}

.rnw-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid var(--rnw-line-float);
    border-radius: var(--rnw-radius-nav);
    background: var(--white);
    box-shadow: var(--rnw-shadow-float);
    cursor: pointer;
}

.rnw-fab__icon {
    display: block;
    width: 24px;
    height: 24px;
}

/* chevron-right 에셋을 위쪽으로 돌려 쓴다 */
.rnw-fab--top .rnw-fab__icon {
    transform: rotate(-90deg);
}

/* 모바일은 도면(18:987)대로 링크 복사·맨 위로를 한 모양으로 통일한다.
   하단 내비 알약과 같은 색 원에 흰 아이콘. PC 는 흰 배경에 테두리를 그대로 둔다. */
@media (max-width: 1279px) {
    .rnw-fab {
        border-color: transparent;
        background: var(--rnw-nav);
    }

    /* 아이콘 에셋이 어두운 선이라 흰색으로 뒤집는다 */
    .rnw-fab__icon {
        filter: brightness(0) invert(1);
    }
}

/* ── 플로팅 영역 (18:987 wrapper-73) ───────────────────────── */
/* 알약 윗변이 화면 밑에서 84px, 여기에 gap 10px 을 더해 94px 에 얹는다.
   우측 세로줄 순서: 최근 본 상품 → 링크 복사 → 맨 위로 */
.rnw-float {
    position: fixed;
    bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    right: 15px;
    z-index: var(--z-float);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* 최근 본 상품 패널은 기존 스타일(js/recent-products.js 의존)을 그대로 쓰고
   바깥 여백만 새 세로줄 간격에 맞춘다.
   노출 조건도 기존과 같게 1400px 이상으로 묶는다. 컨테이너 클래스를
   .float-widgets → .rnw-float 로 바꾸면서 옛 조건이 풀렸기 때문이다.
   Figma 모바일 도면에도 이 패널은 없다. */
.rnw-float .float-widgets__recent {
    display: none;
    width: 197px;
    margin-bottom: 0;
}

@media (min-width: 1400px) {
    .rnw-float .float-widgets__recent {
        display: block;
    }
}

/* PC 는 이번 라운드 범위 밖이라 현행 위치(right 23 / top 277)를 유지한다 */
@media (min-width: 1280px) {
    .rnw-float {
        top: 277px;
        bottom: auto;
        right: 23px;
    }
}

/* 내비 알약 */
.rnw-bottomnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 25px;
    border-radius: var(--rnw-radius-nav);
    background: var(--rnw-nav);
}

.rnw-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 48px;
    height: 39px;
    color: var(--white);
    text-decoration: none;
}

.rnw-bottomnav__icon {
    display: block;
    width: 24px;
    height: 24px;
}

.rnw-bottomnav__label {
    font-family: var(--font);
    font-size: var(--rnw-fs-tiny);
    font-weight: 700;
    line-height: normal;
    text-align: center;
    white-space: nowrap;
}

.rnw-bottomnav__item.is-active {
    opacity: 1;
}

.rnw-bottomnav__item:not(.is-active) {
    opacity: 0.75;
}

/* 본문이 하단바에 가리지 않도록 확보하는 여백
   알약 상단까지 = 패딩 15 + 알약(15+39+15) = 84px
   style.css 의 `body { padding-bottom: 60px }` 을 덮어쓴다 */
body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* PC(1280px+)에서는 하단바를 쓰지 않는다.
   style.desktop.css 의 동일 규칙을 renewal.css 가 뒤에 로드되며 잇는다 */
@media (min-width: 1280px) {
    .rnw-bottombar {
        display: none;
    }

    body {
        padding-bottom: 0;
    }
}

/* ── 띠배너 (88:1665 strip_banner) ─────────────────────────── */
/* 도면은 390×40 풀블리드 이미지 한 장이고 화살표가 없다.
   기존 캐러셀 구조는 그대로 두고 모바일 표시만 도면에 맞춘다 */
@media (max-width: 1279px) {
    .line-banner__img {
        height: 40px;
        object-fit: cover;
    }

    /* 화살표가 없으니 좌우 패딩을 줄여 문구를 더 길게 보여준다 */
    .line-banner__link--text {
        min-height: 40px;
        padding: 0 20px;
    }

    .line-banner__text {
        font-size: 13px;
    }

    .line-banner__arrow {
        display: none;
    }
}

/* ── 모바일 헤더 액션 (18:919 header) ──────────────────────── */
/* 장바구니가 하단 내비에서 빠지므로 헤더로 옮긴다.
   헤더 전체 레이아웃 재현은 1단계(mo-home)에서 다룬다. */
.rnw-header-actions {
    display: none;
}

@media (max-width: 1279px) {
    /* 카테고리 진입은 하단 내비가 담당하므로 햄버거는 감춘다 */
    .header-nav__menu-btn {
        display: none;
    }

    .rnw-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* 도면 헤더는 52 + 41 = 93px 이고 구분선이 없다 */
    .header-logo,
    .header-nav-wrap {
        border-bottom: 0;
    }

    /* 로고 줄: 로고 왼쪽 · 아이콘 오른쪽, 패딩 16/14 (도면 52px) */
    .header-logo__inner {
        justify-content: space-between;
        min-height: 0;
        padding: 14px 16px;
        gap: 10px;
    }

    .header-logo__link img {
        width: 148px;
        height: 24px;
    }

    /* GNB 줄: 도면에는 모바일에도 이 줄이 있다.
       현행 style.css 는 max-width:1279 에서 통째로 숨기고 있었다 */
    .header-nav-wrap {
        display: block;
    }

    /* 패딩 16/12, 14px Medium #333 (도면 41px) */
    .header-nav {
        min-height: 0;
        padding: 12px 16px;
    }

    /* 모바일도 PC 와 같은 카테고리 전부를 싣는다.
       다 들어가면 도면처럼 양끝 정렬로 퍼지고,
       넘치면 gap 을 유지한 채 옆으로 밀어서 본다 (.header-nav 가 overflow-x:auto) */
    .header-nav__list {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 16px;
        width: max-content;
        min-width: 100%;
        font-size: var(--fs-base);
    }

    .header-nav__item {
        flex: 0 0 auto;
    }

    .header-nav__link {
        padding: 0;
        font-weight: 500;
        line-height: normal;
        color: var(--mute-1);
        white-space: nowrap;
    }
}

.rnw-header-actions__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 돋보기만 <button> 이라 브라우저 기본 테두리·배경을 지운다 */
    padding: 0;
    border: 0;
    background: none;
    color: var(--rnw-ink);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rnw-header-actions__icon-wrap {
    position: relative;
    display: flex;
}

.rnw-header-actions__icon {
    display: block;
    width: 24px;
    height: 24px;
}

.rnw-header-actions__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--rnw-badge-best);
    color: var(--white);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ── 모바일 헤더 검색줄 ────────────────────────────────────── */
/* 돋보기가 예전에는 products.php 로 넘어가 전체 목록만 띄웠다.
   도면에 검색 화면이 따로 없어 헤더 아래로 펼치는 줄로 만든다.
   PC 는 헤더에 검색창이 이미 있으므로 1280 이상에서 숨긴다 */
.rnw-hsearch {
    position: relative;
    z-index: 20;
    padding: 0 16px 12px;
    background: var(--white);
}

.rnw-hsearch[hidden] {
    display: none;
}

.rnw-hsearch__form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--rnw-nav-soft);
}

.rnw-hsearch__input {
    flex: 1 0 0;
    min-width: 0;
    border: 0;
    background: none;
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: normal;
    color: var(--mute-1);
}

.rnw-hsearch__input::placeholder {
    color: var(--mute-3);
}

/* 기본 포커스 링이 알약 안에 사각형으로 떠서 어긋난다. 알약 자체에 두른다 */
.rnw-hsearch__input:focus {
    outline: none;
}

.rnw-hsearch__form:focus-within {
    outline: 2px solid var(--rnw-nav);
    outline-offset: 1px;
}

/* 사파리가 붙이는 기본 지우기 버튼. 닫기 버튼과 겹쳐 보인다 */
.rnw-hsearch__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.rnw-hsearch__submit,
.rnw-hsearch__close {
    flex-shrink: 0;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rnw-hsearch__submit img,
.rnw-hsearch__close img {
    display: block;
    width: 20px;
    height: 20px;
}

.rnw-hsearch__panel {
    margin-top: 8px;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: var(--rnw-radius-sheet);
    background: var(--white);
    box-shadow: var(--rnw-shadow-float);
}

.rnw-hsearch__panel[hidden] {
    display: none;
}

.rnw-hsearch__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rnw-nav-line);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.rnw-hsearch__thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--rnw-radius-thumb);
    background: var(--rnw-fill-thumb);
}

.rnw-hsearch__meta {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rnw-hsearch__name {
    overflow: hidden;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--rnw-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rnw-hsearch__price {
    font-size: var(--rnw-fs-tiny);
    font-weight: 700;
    color: var(--rnw-ink);
}

.rnw-hsearch__empty,
.rnw-hsearch__more {
    display: block;
    padding: 14px;
    font-size: var(--fs-xs);
    color: var(--mute-2);
    text-align: center;
}

.rnw-hsearch__more {
    font-weight: 500;
    color: var(--rnw-ink);
    text-decoration: none;
}

@media (min-width: 1280px) {
    .rnw-hsearch {
        display: none;
    }
}

/* ── 카테고리 아이콘 줄 (7:114 nav-row) ────────────────────── */
.rnw-catnav {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: var(--white);
}

.rnw-catnav__item {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.rnw-catnav__box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--rnw-radius-icon);
    background: var(--rnw-nav-soft);
}

/* 아이콘 높이는 항목마다 다르다(도면 32/30/42/34/40). DB 값을 인라인 style 로
   내려받고 폭은 이미지 비율에서 자동으로 나온다. */
.rnw-catnav__icon {
    display: block;
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.rnw-catnav__label {
    width: 100%;
    font-family: var(--font);
    font-size: var(--rnw-fs-nano);
    font-weight: 400;
    line-height: normal;
    text-align: center;
    color: var(--rnw-ink);
}

/* ── 커뮤니티 2분할 + 이벤트 영역 (7:125 section) ──────────── */
.rnw-comm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: var(--white);
}

.rnw-comm__row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.rnw-comm__box {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 칸 가로는 화면 폭을 반씩 나눠 가지므로 높이를 고정하면 기기마다 비율이 달라진다.
       그러면 object-fit: cover 가 넓은 폰에서 위아래를 잘라낸다. 비율을 고정해 잘림을 없앤다.
       7:4 는 모바일 권장 업로드 크기(700×400)와 같다. 360px 에서 160×91, 390px 에서 175×100. */
    aspect-ratio: 7 / 4;
    overflow: hidden;
    border-radius: var(--rnw-radius-thumb);
    background: var(--rnw-fill-box);
    color: var(--rnw-ink);
    text-decoration: none;
}

.rnw-comm__pic,
.rnw-comm__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rnw-comm__label {
    font-family: var(--font);
    font-size: var(--rnw-fs-nano);
    font-weight: 400;
    line-height: normal;
    text-align: center;
    color: var(--rnw-ink);
    white-space: nowrap;
}

/* ── 이벤트 배너 (7:121 이벤트-영역 / 56:2437) ─────────────── */
/* 홈은 100px, 드로어는 83px. 활성 배너가 없으면 아예 렌더되지 않는다 */
.rnw-evb {
    position: relative;
    overflow: hidden;
    border-radius: var(--rnw-radius-thumb);
    background: var(--rnw-pager-bg);
}

.rnw-evb__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.rnw-evb__track::-webkit-scrollbar {
    display: none;
}

.rnw-evb__item {
    flex: 0 0 100%;
    display: block;
    scroll-snap-align: start;
}

.rnw-evb__pic,
.rnw-evb__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 홈·드로어가 같은 모바일 이미지를 쓰므로 비율도 같게 둔다.
   18:5 는 모바일 권장 업로드 크기(720×200)와 같다. 고정 높이면 넓은 폰에서 좌우가 잘린다. */
.rnw-evb--home .rnw-evb__item,
.rnw-evb--drawer .rnw-evb__item {
    aspect-ratio: 18 / 5;
}

/* 도면은 left:299px 지만 박스 폭이 유동이라 우측 기준으로 잡는다 (360-299-47=14) */
.rnw-evb__count {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

/* ── 섹션 골격 (7:137 / 7:138 공통 리듬) ───────────────────── */
/* 도면 기준: 위 40 → 헤딩 → 20 → 내용 → 아래 40.
   좌우 15px 패딩은 섹션이 아니라 안쪽 블록이 가진다.
   가로 스크롤 영역이 화면 끝까지 흘러야 하기 때문이다. */
.rnw-sec {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 0;
    background: var(--white);
}

.rnw-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

.rnw-sec-head__title {
    font-family: var(--font);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: normal;
    color: var(--rnw-ink);
}

.rnw-sec-head__more {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--mute-3);
    text-decoration: none;
    white-space: nowrap;
}

.rnw-sec-head__more img {
    display: block;
    width: 14px;
    height: 14px;
}

/* ── 상품 카드 (7:174 product-item, 114×210) ───────────────── */
/* 3열 그리드: 360px 안에 114px 카드 3개 + 9px 간격 2개. 행 간격 20px */
.rnw-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 9px;
    padding: 0 15px;
}

/* ── 가로 스크롤 카드 줄 (7:136 row-group-3) ───────────────── */
.rnw-hscroll {
    display: flex;
    gap: 13px;
    padding: 0 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* 스냅 기준점을 패딩 뒤로 옮긴다. 없으면 첫 카드가 x15 가 아니라 x0 에 붙는다 */
    scroll-padding-left: 15px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.rnw-hscroll::-webkit-scrollbar {
    display: none;
}

.rnw-hscroll__item {
    flex: 0 0 auto;
    width: 260px;
    height: 260px;
    overflow: hidden;
    border-radius: var(--rnw-radius-thumb);
    background: var(--rnw-fill-sheet);
    scroll-snap-align: start;
}

.rnw-hscroll__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rnw-card {
    position: relative;
}

.rnw-card__link {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: inherit;
    text-decoration: none;
}

.rnw-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--rnw-radius-thumb);
    background: var(--rnw-fill-thumb);
}

.rnw-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rnw-card__wish {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rnw-card__wish svg {
    display: block;
    width: 18px;
    height: 18px;
}

.rnw-card__wish.is-wished svg {
    fill: currentColor;
}

.rnw-card__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rnw-card__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font);
    font-size: 7px;
    font-weight: 400;
    line-height: 8px;
    color: var(--mute-2);
    white-space: nowrap;
}

.rnw-card__meta-dot {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--rnw-fill-sheet);
}

.rnw-card__rule {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.rnw-card__name {
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 14px;
    color: #000;
}

.rnw-card__flavor {
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: normal;
    color: #000;
}

.rnw-card__price {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 14px;
    color: #000;
    white-space: nowrap;
}

.rnw-card__badges {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rnw-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    font-family: var(--font);
    font-size: 7px;
    font-weight: 600;
    line-height: 1;
    color: var(--white);
    text-transform: uppercase;
    white-space: nowrap;
}

.rnw-card__badge--best {
    background: var(--rnw-badge-best);
}

.rnw-card__badge--new {
    background: var(--rnw-badge-new);
}

/* ── 링크 버튼 2×2 (7:535 container-3) ─────────────────────── */
.rnw-linkgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 15px;
    background: var(--white);
}

.rnw-linkgrid__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 10px;
    border: 1px solid var(--rnw-line-btn);
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: normal;
    text-align: center;
    color: var(--rnw-ink);
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* ── 고객센터 (7:545 section-5) ────────────────────────────── */
.rnw-cs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 29px;
    padding: 40px 15px;
    background: var(--white);
}

.rnw-cs__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.rnw-cs__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 21px;
    color: var(--rnw-ink);
}

.rnw-cs__sub {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 14px;
    color: var(--mute-3);
    text-transform: uppercase;
}

.rnw-cs__tel {
    width: 100%;
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: 19px;
    text-align: center;
    color: var(--rnw-ink);
    text-decoration: none;
}

.rnw-cs__hours {
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 14px;
    text-align: center;
    text-transform: uppercase;
    color: var(--mute-3);
}

.rnw-cs__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background: var(--rnw-ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    color: var(--white);
    text-decoration: none;
}

/* 상세에는 원래 없던 블록이다. PC 는 이 폭에서 버튼이 1400px 로 늘어나므로
   PC 라운드 전까지 모바일에서만 보인다 */
@media (min-width: 1280px) {
    .rnw-pdetail-page .rnw-cs {
        display: none;
    }
}

/* ── 모바일 푸터 (7:549 section-6) ─────────────────────────── */
/* PC 푸터(.site-footer)는 이번 라운드 범위 밖이라 그대로 두고 모바일에서만 교체한다 */
.rnw-footer {
    display: none;
}

@media (max-width: 1279px) {
    .rnw-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 29px;
        padding: 40px 15px 100px;
        background: var(--mute-7);
        text-align: center;
    }

    .site-footer {
        display: none;
    }

    /* 푸터가 하단 여백 100px 을 직접 가지므로 body 의 84px 와 겹치지 않게 눌러준다 */
    body:has(.rnw-footer) {
        padding-bottom: 0;
    }
}

.rnw-footer__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rnw-footer__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: normal;
    color: var(--rnw-ink);
}

.rnw-footer__sub {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    color: var(--mute-3);
}

.rnw-footer__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: normal;
    color: var(--mute-2);
}

.rnw-footer__info a {
    color: inherit;
}

.rnw-footer__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.rnw-footer__dot {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--rnw-fill-sheet);
}

/* 링크 5개가 한 줄에 안 들어간다. nowrap 이면 항목이 글자 폭 아래로 눌려
   '회사소개' 가 '회사 / 소개' 로 쪼개진다(360px 화면에서 높이 31px = 두 줄).
   줄바꿈을 허용하고 글자 자체는 안 끊기게 막는다. */
.rnw-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: normal;
}

.rnw-footer__links a {
    flex: none;
    white-space: nowrap;
    color: var(--mute-2);
    text-decoration: none;
}

.rnw-footer__bar {
    flex-shrink: 0;
    width: 1px;
    height: 12px;
    background: var(--mute-2);
}

.rnw-footer__copy {
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: normal;
    color: var(--mute35);
}

/* 한 줄에 다 못 들어가는 폭에서는 구분선을 뺀다.
   줄바꿈이 일어나면 앞줄 끝에 세로줄 하나가 혼자 남아 오타처럼 보인다.
   대신 항목 간격을 벌려 구분한다. 링크 5개 + 구분선이 한 줄에 들어가려면
   내용 폭이 387px 필요해서, 좌우 여백 15px 을 빼면 417px 부터 한 줄이 된다. */
@media (max-width: 440px) {
    .rnw-footer__links {
        column-gap: 16px;
    }

    .rnw-footer__bar {
        display: none;
    }
}

/* ── 모바일 드로어 (56:2311 mo-side-menu) ──────────────────── */
/* 도면은 전체 화면을 덮는다. 기존 295px 사이드 패널에서 폭만 바꾸고
   슬라이드 동작(.mobile-nav-panel)은 그대로 쓴다 */
.rnw-drawer {
    width: 100%;
    max-width: none;
    overflow: hidden;
}

.rnw-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 14px 16px;
    background: var(--white);
}

.rnw-drawer__logo img {
    display: block;
    width: 148px;
    height: 24px;
}

.rnw-drawer__actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rnw-drawer__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid var(--mute-4);
    border-radius: 3px;
    font-size: var(--fs-xs);
    font-weight: 500;
    /* 도면 헤더는 52px = 14 + 24 + 14. 버튼도 24px 로 맞춘다 (5+12+5+테두리 2) */
    line-height: 1;
    color: var(--mute-1);
    text-decoration: none;
    white-space: nowrap;
}

.rnw-drawer__btn--solid {
    border-color: var(--mute-1);
    background: var(--mute-1);
    color: var(--white);
}

.rnw-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rnw-drawer__close img {
    display: block;
    width: 24px;
    height: 24px;
}

.rnw-drawer__searchbar {
    flex-shrink: 0;
    padding: 12px 16px;
    background: var(--white);
}

.rnw-drawer__search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 25px;
    border-radius: var(--radius-pill);
    background: var(--rnw-nav-soft);
}

.rnw-drawer__search-input {
    flex: 1 0 0;
    min-width: 0;
    border: 0;
    background: none;
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: normal;
    color: var(--mute-1);
}

.rnw-drawer__search-input::placeholder {
    color: var(--mute-3);
}

.rnw-drawer__search-btn {
    flex-shrink: 0;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rnw-drawer__search-btn img {
    display: block;
    width: 20px;
    height: 20px;
}

.rnw-drawer__tabs {
    display: flex;
    flex-shrink: 0;
    height: 36px;
    border-bottom: 1px solid var(--rnw-fill-sheet);
    background: var(--white);
}

.rnw-drawer__tab {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: normal;
    color: var(--mute-3);
    cursor: pointer;
}

.rnw-drawer__tab.is-active {
    border-bottom-color: #000;
    font-weight: 600;
    color: #000;
}

.rnw-drawer__panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* display 를 명시하면 UA 의 [hidden]{display:none} 이 밀린다. 다시 눌러준다 */
.rnw-drawer__panel[hidden] {
    display: none;
}

.rnw-drawer__cats {
    flex: 0 0 135px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--rnw-nav-soft);
}

.rnw-drawer__cat {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 12px 25px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: normal;
    text-align: left;
    color: #000;
    cursor: pointer;
}

.rnw-drawer__cat.is-active {
    border-bottom-color: var(--rnw-nav-line);
    background: var(--white);
    font-weight: 600;
    color: var(--rnw-blue);
}

.rnw-drawer__subs {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    background: var(--white);
}

.rnw-drawer__sublist {
    display: none;
    flex-direction: column;
}

.rnw-drawer__sublist.is-active {
    display: flex;
}

.rnw-drawer__sub {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: normal;
    color: #000;
    text-decoration: none;
}

.rnw-drawer__sub--head {
    font-weight: 600;
    color: var(--rnw-blue);
}

.rnw-drawer__event {
    flex-shrink: 0;
    padding: 15px;
    background: var(--white);
}

/* 드로어 안의 이벤트 박스는 도면(56:2437)이 83px 다. 홈의 100px 과 다르다 */
.rnw-drawer__event .rnw-comm__event {
    height: 83px;
}

/* ── 바텀시트 팝업 (7:74 bottom-popup) ─────────────────────── */
.rnw-sheet {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden;
    width: 100%;
}

.rnw-sheet__body {
    border-top-left-radius: var(--rnw-radius-sheet);
    border-top-right-radius: var(--rnw-radius-sheet);
    background: var(--rnw-fill-sheet);
    overflow: hidden;
}

.rnw-sheet__img {
    display: block;
    width: 100%;
    height: auto;
}

.rnw-sheet__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--white);
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.rnw-sheet__dismiss {
    color: var(--rnw-mute-8);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.rnw-sheet__close {
    color: var(--mute-1);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ── 히어로 슬라이더 (7:68 본문(스크롤영역)) ───────────────── */
/* 도면은 390×390 정사각이고 화살표·도트 대신 카운터만 있다.
   style.css 의 `@media (max-width:768px) .hero-main { height: 320px }` 를 덮는다 */
@media (max-width: 1279px) {
    .hero-main {
        height: auto;
        aspect-ratio: 1 / 1;
        background: var(--mute-7);
    }

    /* 슬라이드도 같이 덮어야 한다. 안 그러면 이미지가 뜨기 전까지 검게 비친다 */
    .hero-main__slide {
        background: var(--mute-7);
    }

    .hero-main__arrows,
    .hero-main__tabs {
        display: none;
    }
}

.rnw-slide-count--hero {
    position: absolute;
    right: 15px;
    bottom: 20px;
    z-index: 2;
}

/* PC 는 기존 도트·화살표를 쓰므로 카운터를 감춘다 */
@media (min-width: 1280px) {
    .rnw-slide-count--hero {
        display: none;
    }
}

/* ── 슬라이드 카운터 (7:652) ───────────────────────────────── */
/* Figma 이름은 pagenation 이지만 실제로는 히어로 슬라이더의 "1 / 5" 표시다.
   목록 페이지네이션과는 다른 컴포넌트다. */
.rnw-slide-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--rnw-pager-bg);
    font-family: var(--font);
    font-size: var(--rnw-fs-tiny);
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.rnw-slide-count__current,
.rnw-slide-count__sep {
    color: var(--mute-3);
}

.rnw-slide-count__total {
    color: var(--rnw-ink);
}

/* 메인 히어로 카운터만 현재 번호를 흰색으로 (요청 2026-08-28).
   이벤트 배너 카운터는 회색 그대로 둔다 */
.rnw-slide-count--hero .rnw-slide-count__current {
    color: var(--white);
}

/* ── 상품 목록 (18:363 9col / 18:1463 4col) ────────────────── */
/* 두 도면은 열 수만 다르다. 카드 정보부 높이가 89 로 같아서 그리드만 바꾸면 된다.
   3열 = 카드 114×210, 2열 = 카드 175.5×271.5 */
.rnw-plist-head {
    display: none;
}

@media (max-width: 1279px) {
    .rnw-plist-head {
        display: block;
        background: var(--white);
    }

    /* PC 전용 헤더·정렬 줄은 모바일에서 감춘다 */
    .rnw-legacy-only {
        display: none;
    }

    /* 목록 페이지 컨테이너 좌우 여백을 도면(15px)에 맞춘다 */
    .rnw-plist-page .main__container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1280px) {
    .rnw-plist-head {
        display: none;
    }
}

/* 카테고리 히어로 (main-slide 390×240) */
.rnw-plist-hero {
    height: 240px;
    overflow: hidden;
    background: var(--rnw-fill-sheet);
}

.rnw-plist-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 제목 줄 (18:389) — 패딩 20, 좌우 24px 아이콘, 가운데 20px Bold.
   도면은 list-group 안쪽에 15px 여백을 두고 시작한다 */
.rnw-plist-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px;
    padding: 20px 15px;
}

.rnw-plist-title__back,
.rnw-plist-title__spacer {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.rnw-plist-title__back img {
    display: block;
    width: 24px;
    height: 24px;
}

.rnw-plist-title__text {
    flex: 1 0 0;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: normal;
    text-align: center;
    color: var(--rnw-ink);
}

/* 하위 분류 탭 (18:1183) — 알약 */
.rnw-plist-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
    padding: 0 15px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.rnw-plist-tabs::-webkit-scrollbar {
    display: none;
}

.rnw-plist-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    border: 1px solid var(--rnw-fill-sheet);
    border-radius: 40px;
    font-size: var(--fs-xs);
    font-weight: 400;
    /* 도면 알약은 24px = 5 + 14 + 5. 기본 줄높이는 한글에서 17 이 된다 */
    line-height: 14px;
    color: var(--rnw-ink);
    text-decoration: none;
    white-space: nowrap;
}

.rnw-plist-tab.is-active {
    border-color: var(--rnw-ink);
    background: var(--rnw-ink);
    font-weight: 600;
    color: var(--white);
}

/* 정렬 줄 (18:1264) — 개수 · 뷰 전환 · 정렬 */
.rnw-plist-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    margin-top: 30px;
    padding: 0 15px;
}

.rnw-plist-count {
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
    color: #000;
    white-space: nowrap;
}

.rnw-plist-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 뷰 전환 아이콘 — 2×2 는 7.906px 칸, 3×3 은 5.031px 칸 */
.rnw-viewtoggle {
    display: grid;
    grid-template-columns: repeat(2, 7.906px);
    gap: 3.594px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rnw-viewtoggle--3 {
    grid-template-columns: repeat(3, 5.031px);
    gap: 2.159px;
}

.rnw-viewtoggle span {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: #aaa;
}

/* 도면은 지금 보고 있는 열 수의 아이콘을 흐리게(#ddd) 처리한다 */
.rnw-viewtoggle.is-current span {
    background: var(--rnw-fill-sheet);
}

.rnw-plist-sort {
    position: relative;
    display: flex;
    align-items: center;
    width: 100px;
    padding: 8px 10px;
    border: 1px solid var(--rnw-fill-sheet);
}

.rnw-plist-sort select {
    flex: 1 0 0;
    min-width: 0;
    appearance: none;
    border: 0;
    background: none;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
    color: var(--mute-2);
    cursor: pointer;
}

.rnw-plist-sort img {
    flex-shrink: 0;
    display: block;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

/* 카드 그리드 — 기본 3열, 토글로 2열 */
@media (max-width: 1279px) {
    .rnw-plist {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 9px;
        margin-top: 16px;
        padding: 0 15px;
    }

    .rnw-plist.is-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 품절 표시 */
.rnw-card__soldout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--white);
}

/* ── 상품 상세 구매 블록 (7:1203 section-23) ───────────────── */
/* 기존 마크업이 도면 구조와 맞아서 모바일 표시만 정렬한다 */
@media (max-width: 1279px) {
    /* 도면 갤러리는 화면 폭을 꽉 채운다. 컨테이너 좌우 패딩을 없애고
       안쪽 블록이 각자 15px 여백을 갖는다 */
    .rnw-pdetail-page .main__container {
        padding-left: 0;
        padding-right: 0;
    }

    .pd-layout {
        display: block;
    }

    /* 갤러리 = 390×390 정사각 (7:685 main-slide).
       기본 margin-bottom 16 이 갤러리 밖으로 빠져나와 구매 블록을 밀어낸다 */
    .pd-gallery__main {
        aspect-ratio: 1 / 1;
        height: auto;
        margin-bottom: 0;
    }

    /* 구매 정보 블록 — 도면은 좌우 15px, 항목 간격 10px */
    .pd-buy {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .pd-breadcrumb {
        gap: 5px;
        font-size: var(--fs-xs);
        line-height: normal;
        color: var(--mute-3);
    }

    /* 카테고리 뱃지는 도면에 없다. 브레드크럼이 같은 정보를 준다 */
    .pd-buy__badge {
        display: none;
    }

    .pd-buy h1 {
        margin: 0;
        font-size: var(--fs-xl);
        font-weight: 700;
        line-height: normal;
        color: var(--rnw-ink);
    }

    .pd-buy__rating {
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 0;
        font-size: var(--fs-base);
        line-height: normal;
        color: var(--mute-2);
    }

    .pd-buy__price-orig {
        margin: 0;
        font-size: var(--fs-xs);
        font-weight: 400;
        line-height: normal;
        color: var(--mute-2);
    }

    .pd-buy__price {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 0;
        line-height: normal;
    }

    .pd-buy__price-rate {
        font-size: var(--fs-lg);
        font-weight: 400;
        color: var(--rnw-blue);
    }

    .pd-buy__price-now {
        font-size: var(--fs-lg);
        font-weight: 700;
        color: var(--rnw-ink);
    }

    /* 배송 안내 2줄 (13:670 frame-37) */
    .pd-buy__ship-rows {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin: 8px 0 0;
    }

    .pd-buy__ship-row {
        display: flex;
        gap: 10px;
        font-size: var(--fs-xs);
        line-height: normal;
    }

    /* 옵션 선택 줄 (7:1202 frame-40) — 라벨 100px + 셀렉트 */
    .pd-select {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    .pd-select > label {
        flex-shrink: 0;
        width: 100px;
        font-size: 15px;
        font-weight: 500;
        line-height: normal;
        color: #000;
    }

    .pd-select select {
        flex: 1 0 0;
        min-width: 0;
        height: auto;
        padding: 8px 15px;
        border: 1px solid var(--rnw-fill-sheet);
        border-radius: 0;
        background: var(--white);
        font-family: var(--font);
        font-size: var(--fs-sm);
        font-weight: 400;
        line-height: normal;
        color: #000;
    }

    /* 합계 줄 (13:637 frame-41) */
    .pd-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        border: 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.8;
        color: var(--mute-1);
    }

    .pd-total > span:first-child {
        font-size: var(--fs-xs);
        color: var(--mute-3);
    }
}

/* ── 상세 3번 블록 (18:1265 wrapper-20) ────────────────────── */
@media (max-width: 1279px) {
    .rnw-pd-event {
        padding: 15px;
        background: var(--white);
    }

    .rnw-pd-related {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 15px 0;
        background: var(--white);
    }

    .rnw-pd-related__title {
        margin: 0;
        padding: 0 15px;
        font-size: var(--fs-md);
        font-weight: 700;
        line-height: normal;
        color: var(--rnw-ink);
    }

    /* ── 상세 4번 블록 탭 (13:829 tab-bar-2) ───────────────── */
    /* 4칸 균등, 활성은 하단 2px 검정선 + SemiBold */
    .pd-tabs {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--rnw-fill-sheet);
        background: var(--white);
    }

    .pd-tabs .pd-tab-link {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 10px;
        border: 0;
        border-bottom: 2px solid transparent;
        font-size: var(--fs-sm);
        font-weight: 400;
        line-height: normal;
        text-align: center;
        color: var(--mute-3);
        text-decoration: none;
        white-space: nowrap;
    }

    .pd-tabs .pd-tab-link.is-active {
        border-bottom-color: #000;
        font-weight: 600;
        color: #000;
    }
}

/* ── 별 아이콘 ─────────────────────────────────────────────── */
/* 도면 SVG 를 마스크로 쓴다. 빈 별 도안이 따로 없어 같은 글리프를 색으로 구분한다 */
.rnw-star {
    display: inline-block;
    flex: none;
    width: 15px;
    height: 15px;
    background: var(--rnw-star);
    -webkit-mask: url('../images/renewal/icon/review-star.svg') no-repeat center / contain;
    mask: url('../images/renewal/icon/review-star.svg') no-repeat center / contain;
}

.rnw-star--lg {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('../images/renewal/icon/review-star-lg.svg');
    mask-image: url('../images/renewal/icon/review-star-lg.svg');
}

.rnw-star.is-off {
    background: var(--rnw-fill-sheet);
}

/* ── 상세 리뷰 탭 (13:843 list-group-3) ─────────────────────── */
/* 신규 .rnw-review-* 는 PC 에서도 무너지지 않게 구조를 전역에 둔다.
   legacy .pd-* 를 덮어쓰는 규칙만 아래 모바일 미디어쿼리 안에 있다 */
.rnw-review {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rnw-review__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: normal;
    color: var(--rnw-ink);
}

/* 평점 요약 (13:844 wrapper-23) — 좌 평균 91, 우 분포 217, 가운데 정렬 */
.rnw-review__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 7.5px 0;
    border: 0;
    background: none;
}

.rnw-review__score {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.rnw-review__stars {
    display: flex;
    align-items: center;
    gap: 2.25px;
    font-size: 0;
}

.rnw-review__dist {
    flex: none;
    width: 217px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rnw-review__dist-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rnw-review__dist-label {
    flex: none;
    width: 50px;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: -0.5px;
    white-space: nowrap;
    color: #000;
}

.rnw-review__dist-track {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    border-radius: 50px;
    background: var(--mute-6);
    overflow: hidden;
}

/* 0건이어도 도면처럼 동그란 점 하나는 남는다 */
.rnw-review__dist-bar {
    min-width: 12px;
    height: 12px;
    border-radius: 50px;
    background: var(--rnw-bar);
}

.rnw-review__dist-bar.is-top {
    background: #000;
}

/* PHOTO 헤딩 + 더보기 (13:984) */
.rnw-review__photo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rnw-review__subtitle {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: normal;
    color: var(--rnw-ink);
}

.rnw-review__more-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    line-height: normal;
    color: var(--mute-3);
    text-decoration: none;
}

.rnw-review__chevron {
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url('../images/renewal/icon/chevron-right.svg') no-repeat center / contain;
    mask: url('../images/renewal/icon/chevron-right.svg') no-repeat center / contain;
}

.rnw-review__policy {
    font-size: 10.5px;
    line-height: normal;
    color: var(--mute-3);
    text-decoration: none;
}

@media (max-width: 1279px) {
    .rnw-pdetail-page #pd-tab-reviews {
        padding: 15px;
        background: var(--mute-7);
    }

    .rnw-review__score {
        width: 91px;
    }

    .rnw-pdetail-page .pd-reviews__score {
        font-size: 30px;
        font-weight: 700;
        line-height: normal;
        color: var(--mute-1);
    }

    /* 포토리뷰 스트립 (13:990 frame-50) */
    .rnw-pdetail-page .pd-photo-reviews {
        margin-top: 0;
    }

    .rnw-pdetail-page .pd-photo-reviews__strip {
        gap: 13px;
        padding-bottom: 0;
    }

    .rnw-pdetail-page .pd-photo-reviews__thumb {
        flex: none;
        width: 100px;
        height: 100px;
        border-radius: var(--rnw-radius-thumb);
        background: var(--rnw-fill-sheet);
    }

    /* 리뷰 카드 (13:868 container-6) */
    .rnw-pdetail-page .pd-reviews-grid {
        gap: 7.5px;
        margin-top: 0;
    }

    .rnw-pdetail-page .pd-review-card {
        gap: 7.5px;
        padding: 7.5px;
        border: 0;
        border-radius: 7.5px;
        overflow: hidden;
    }

    .rnw-pdetail-page .pd-review-card__thumb {
        width: 93px;
        height: 93px;
        border-radius: var(--rnw-radius-thumb);
    }

    .rnw-pdetail-page .pd-review-card__body {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 0 11.25px;
    }

    .rnw-pdetail-page .pd-review-card__option {
        margin: 0;
        font-size: var(--rnw-fs-nano);
        line-height: 1.8;
        color: var(--mute-3);
    }

    .rnw-pdetail-page .pd-review-card__text {
        margin: 0;
        font-size: var(--fs-xs);
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -0.24px;
        color: var(--mute-1);
        -webkit-line-clamp: 2;
    }

    .rnw-pdetail-page .pd-review-card__meta {
        flex-wrap: nowrap;
        gap: 6px;
        padding-top: 7.5px;
        font-size: 10px;
        line-height: normal;
        color: var(--mute-3);
    }

    .rnw-pdetail-page .pd-review-card__stars {
        display: flex;
        align-items: center;
        letter-spacing: normal;
        color: #000;
    }

    .rnw-pdetail-page .pd-review-card__stars b {
        font-size: 10px;
        font-weight: 400;
    }

    /* 도면의 세로 구분선. 별점 뒤와 날짜 앞에 온다 */
    .rnw-pdetail-page .pd-review-card__author::before,
    .rnw-pdetail-page .pd-review-card__date::before {
        content: '';
        display: inline-block;
        width: 1px;
        height: 9.75px;
        margin-right: 6px;
        vertical-align: -1px;
        background: var(--mute-6);
    }

    .rnw-pdetail-page .pd-review-card__cert {
        display: inline-flex;
        align-items: center;
        gap: 1.5px;
        padding: 1.5px 3px;
        border-radius: 1.5px;
        background: var(--mute-6);
        font-size: var(--rnw-fs-nano);
        font-weight: 500;
        line-height: normal;
        white-space: nowrap;
        color: var(--mute-3);
    }

    .rnw-pdetail-page .pd-review-card__cert::before {
        content: '';
        flex: none;
        width: 7.5px;
        height: 7.5px;
        background: var(--rnw-blue);
        -webkit-mask: url('../images/renewal/icon/review-check.svg') no-repeat center / contain;
        mask: url('../images/renewal/icon/review-check.svg') no-repeat center / contain;
    }

    /* 더보기 (13:949) */
    .rnw-pdetail-page .pd-reviews__more-wrap {
        margin-top: 0;
    }

    /* 도면은 30 높이에 안쪽 여백 8이다. Figma 는 테두리가 자리를 먹지 않으니
       CSS 에서는 1px 를 여백에서 뺀다 */
    .rnw-pdetail-page .pd-reviews__more-btn {
        padding: 7px 8px;
        border: 1px solid var(--mute-4);
        border-radius: 0;
        font-size: var(--fs-xs);
        line-height: 14px;
        color: var(--mute-1);
    }

    /* 리뷰 작성하기 + 운영정책 (13:951 frame-59) */
    .rnw-pdetail-page .pd-reviews__actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 7.5px;
        margin: 0;
    }

    .rnw-pdetail-page .pd-reviews__actions .btn {
        min-width: 0;
        padding: 7.5px 15px;
        border: 0;
        border-radius: 3.75px;
        background: var(--mute-1);
        font-size: var(--fs-xs);
        font-weight: 400;
        line-height: normal;
        color: var(--white);
    }
}

/* ── 고객센터 계열 공용 껍데기 (18:1800 list-group-8) ──────── */
/* 공지·이벤트·Q&A·리뷰가 같은 제목 줄 + 5탭 + 검색 줄을 쓴다.
   .rnw-cs-* 는 고객센터 블록(.rnw-cs)과 이름이 겹치지 않게 항상 뒤에 낱말이 붙는다 */
@media (max-width: 1279px) {
    .rnw-cs-page .main__container {
        padding-left: 0;
        padding-right: 0;
    }

    .rnw-cs-shell {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 15px;
        background: var(--white);
    }

    /* 제목 줄 (18:1801) */
    .rnw-cs-head {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        padding: 20px 0;
    }

    .rnw-cs-head__back,
    .rnw-cs-head__spacer {
        flex: none;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
    }

    .rnw-cs-head__back {
        background: var(--rnw-ink);
        -webkit-mask: url('../images/renewal/icon/chevron-left.svg') no-repeat center / contain;
        mask: url('../images/renewal/icon/chevron-left.svg') no-repeat center / contain;
        cursor: pointer;
    }

    .rnw-cs-head__title {
        flex: 1 0 0;
        min-width: 0;
        margin: 0;
        font-size: var(--fs-xl);
        font-weight: 700;
        line-height: 24px;
        text-align: center;
        color: var(--rnw-ink);
    }

    /* 5탭 바 (18:2061) */
    .rnw-cs-tabs {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 36px;
        border-bottom: 1px solid var(--rnw-fill-sheet);
        background: var(--white);
    }

    .rnw-cs-tabs__item {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border-bottom: 2px solid transparent;
        font-size: var(--fs-sm);
        font-weight: 400;
        line-height: 16px;
        text-align: center;
        white-space: nowrap;
        color: var(--mute-3);
        text-decoration: none;
    }

    .rnw-cs-tabs__item.is-active {
        border-bottom-color: #000;
        font-weight: 600;
        color: #000;
    }

    /* 매거진은 아직 갈 곳이 없다 */
    .rnw-cs-tabs__item.is-disabled {
        opacity: 0.4;
        cursor: default;
    }

    /* 목록 머리·본문·페이지네이션·검색 묶음 (23:1235) */
    .rnw-cs-body {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: 100%;
    }

    /* 목록 머리 (18:1814) */
    .rnw-cs-listbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .rnw-cs-listbar__count {
        margin: 0;
        font-size: 10px;
        line-height: normal;
        color: #000;
    }

    .rnw-cs-listbar__sort {
        display: flex;
    }

    /* 도면의 셀렉트 — 테두리 상자 + 우측 chevron (18:1832 / 25:4360) */
    .rnw-cs-select {
        width: 100px;
        height: 28px;
        padding: 8px 26px 8px 10px;
        border: 1px solid var(--rnw-fill-sheet);
        border-radius: 0;
        background-color: var(--white);
        background-image: url('../images/renewal/icon/chevron-down.svg');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 12px 12px;
        font-family: var(--font);
        font-size: 10px;
        line-height: 12px;
        color: var(--mute-2);
        -webkit-appearance: none;
        appearance: none;
    }

    /* 공지 목록 (18:2074 list-group-10)
       Figma 의 선은 레이아웃 자리를 먹지 않는다. 테두리로 그리면 항목마다
       0.75px 씩 밀리므로 안쪽 그림자로 긋는다 */
    .rnw-notice-list {
        width: 100%;
        box-shadow: inset 0 1px 0 var(--mute-3), inset 0 -1px 0 var(--mute-3);
        overflow: hidden;
    }

    .rnw-notice-item {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 11.25px 0;
        box-shadow: inset 0 -0.75px 0 var(--mute-6);
        text-decoration: none;
    }

    .rnw-notice-list .rnw-notice-item:last-child {
        box-shadow: none;
    }

    .rnw-notice-item__head {
        display: flex;
        align-items: center;
        gap: 5px;
        width: 100%;
    }

    .rnw-notice-item__pin {
        flex: none;
        width: 14px;
        height: 14px;
        background: var(--mute-3);
        -webkit-mask: url('../images/renewal/icon/cs-bookmark.svg') no-repeat center / contain;
        mask: url('../images/renewal/icon/cs-bookmark.svg') no-repeat center / contain;
    }

    .rnw-notice-item__title {
        flex: 1 0 0;
        min-width: 0;
        font-size: var(--fs-base);
        font-weight: 400;
        line-height: 1.5;
        color: var(--mute-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rnw-notice-item__title.is-pinned {
        font-weight: 600;
    }

    .rnw-notice-item__meta {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 10.5px;
        line-height: 16px;
        text-align: center;
        color: var(--mute-3);
    }

    .rnw-notice-item__cat {
        width: 36px;
        font-size: 10px;
        color: var(--mute-2);
    }

    .rnw-notice-item__no {
        font-size: 10px;
        color: var(--mute-2);
    }

    .rnw-cs-empty {
        margin: 0;
        padding: 40px 0;
        font-size: var(--fs-sm);
        text-align: center;
        color: var(--mute-3);
    }

    /* 페이지네이션 (18:2346) — 좌 화살표 2개 / 숫자 / 우 화살표 2개 */
    .rnw-cs-shell .pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 11px;
        width: 100%;
        margin: 0;
    }

    /* style.css 의 `.pagination span { min-width:36px; height:36px }` 를 눌러야
       묶음 자체가 24 높이로 앉는다 */
    .rnw-cs-shell .pagination__group {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
        height: auto;
    }

    .rnw-cs-shell .pagination__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 23.25px;
        min-width: 0;
        height: 23.25px;
        padding: 0;
        border: 0;
        border-radius: 22.5px;
        background: none;
        font-size: 11px;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.22px;
        color: var(--mute-3);
        text-decoration: none;
    }

    .rnw-cs-shell .pagination__btn--active {
        font-weight: 700;
        color: var(--mute-1);
    }

    .rnw-cs-shell .pagination__btn--arrow {
        width: 24px;
        height: 24px;
        border: 0.75px solid var(--mute-6);
        border-radius: 0;
    }

    /* 처음·마지막(겹화살표)만 테두리가 없다. 이전·다음은 테두리 상자 */
    .rnw-cs-shell .pagination__group:first-child > .pagination__btn:first-child,
    .rnw-cs-shell .pagination__group:last-child > .pagination__btn:last-child {
        border: 0;
    }

    /* 검색 줄 (25:4359) */
    .rnw-cs-search {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .rnw-cs-search .rnw-cs-select {
        flex: none;
        width: 80px;
        color: var(--rnw-ink);
    }

    .rnw-cs-search__box {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        align-items: stretch;
        height: 28px;
        border: 1px solid var(--rnw-fill-sheet);
    }

    .rnw-cs-search__input {
        flex: 1 0 0;
        min-width: 0;
        padding: 8px 10px;
        border: 0;
        background: none;
        font-family: var(--font);
        font-size: 10px;
        line-height: 12px;
        color: var(--mute-1);
    }

    .rnw-cs-search__input::placeholder {
        color: var(--mute-2);
    }

    .rnw-cs-search__btn {
        flex: none;
        width: 32px;
        padding: 0;
        border: 0;
        background-color: var(--rnw-fill-sheet);
        background-image: url('../images/renewal/icon/cs-search.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 12px;
        cursor: pointer;
    }
}

/* 모바일 전용 껍데기다. PC 는 기존 목록 화면을 그대로 쓴다 */
@media (min-width: 1280px) {
    .rnw-cs-head,
    .rnw-cs-tabs,
    .rnw-cs-listbar,
    .rnw-cs-search,
    .rnw-notice-list {
        display: none;
    }
}

/* ── 이벤트 목록 (25:4425 mo-event) ────────────────────────── */
@media (max-width: 1279px) {
    /* 진행 상태 필터 (25:4643 tab-bar-8) */
    .rnw-event-filter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    /* Figma 의 선은 자리를 먹지 않는다. 테두리로 그리면 24 여야 할 알약이 26 이 된다 */
    .rnw-event-filter__item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 15px;
        border-radius: 40px;
        box-shadow: inset 0 0 0 1px #ddd;
        font-size: var(--fs-xs);
        font-weight: 400;
        line-height: 14px;
        white-space: nowrap;
        color: var(--rnw-ink);
        text-decoration: none;
    }

    .rnw-event-filter__item.is-active {
        background: var(--rnw-ink);
        box-shadow: none;
        font-weight: 600;
        color: var(--white);
    }

    /* 카드 (25:4652 wrapper-34) — 도면은 카드 사이 12+12 를 비운다 */
    .rnw-event-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* 카드 아래 12 를 비우고 그 자리에 구분선이 온다. 선은 자리를 먹지 않게 안쪽 그림자로 긋는다 */
    .rnw-event-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 12px;
        box-shadow: inset 0 -0.75px 0 var(--mute-6);
        text-decoration: none;
    }

    .rnw-event-card__thumb {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: var(--rnw-fill-sheet);
        overflow: hidden;
    }

    .rnw-event-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .rnw-event-card__foot {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .rnw-event-card__badge {
        flex: none;
        display: flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 30px;
        background: var(--rnw-blue);
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        text-align: center;
        color: var(--white);
    }

    .rnw-event-card__badge.is-ended {
        background: var(--mute-6);
        color: var(--mute-1);
    }

    /* 매거진은 진행중/종료가 없다. 같은 자리에 발행일을 넣되 파랑은 쓰지 않는다 */
    .rnw-event-card__badge--date {
        background: var(--rnw-fill-sheet);
        color: var(--mute-3);
    }

    .rnw-event-card__title {
        flex: 1 0 0;
        min-width: 0;
        font-size: var(--fs-base);
        font-weight: 400;
        line-height: 1.5;
        color: var(--mute-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 1280px) {
    .rnw-event-filter,
    .rnw-event-list {
        display: none;
    }
}

/* ── Q&A 목록 (25:4008 mo-qna) ─────────────────────────────── */
@media (max-width: 1279px) {
    .rnw-qna-list {
        width: 100%;
    }

    /* 도면 선은 자리를 먹지 않는다 */
    .rnw-qna-item {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 46px;
        padding: 8px 0;
        box-shadow: inset 0 -0.75px 0 var(--mute-6);
        text-decoration: none;
    }

    .rnw-qna-item__thumb {
        position: relative;
        flex: none;
        width: 30px;
        height: 30px;
        border-radius: 3px;
        background: var(--rnw-fill-thumb);
        overflow: hidden;
    }

    .rnw-qna-item__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* 도면은 썸네일 위에 5% 검정을 덮어 밝은 사진도 경계가 보이게 한다 */
    .rnw-qna-item__thumb::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.05);
    }

    .rnw-qna-item__lock {
        flex: none;
        width: 14px;
        height: 14px;
        background: var(--mute-3);
        -webkit-mask: url('../images/renewal/icon/cs-lock.svg') no-repeat center / contain;
        mask: url('../images/renewal/icon/cs-lock.svg') no-repeat center / contain;
    }

    .rnw-qna-item__title {
        flex: 1 0 0;
        min-width: 0;
        font-size: var(--fs-base);
        font-weight: 400;
        line-height: 1.5;
        color: var(--mute-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rnw-qna-item__badge {
        flex: none;
        display: flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 30px;
        background: var(--mute-6);
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        text-align: center;
        color: var(--mute-1);
    }

    .rnw-qna-item__badge.is-done {
        background: var(--mute-1);
        color: var(--white);
    }

    /* 글쓰기 + 검색 줄 (25:4162 frame-139) */
    .rnw-cs-foot {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .rnw-cs-write {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 8px 10px;
        border: 0;
        background: var(--mute-1);
        font-family: var(--font);
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        text-align: center;
        color: var(--white);
        text-decoration: none;
        cursor: pointer;
    }
}

@media (min-width: 1280px) {
    .rnw-qna-list,
    .rnw-cs-foot {
        display: none;
    }
}

/* ── 리뷰 목록 (23:1002 mo-review-3col / 23:2121 mo-review-2col) ── */
/* 두 도면은 같은 카드의 3열·2열 변형이다. 전환 버튼은 상품 목록 것을 그대로 쓴다 */
@media (max-width: 1279px) {
    .rnw-cs-listbar__right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .rnw-cs-listbar__right .rnw-cs-select {
        width: 100px;
    }

    .rnw-cs-page .reviews-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 8px;
        width: 100%;
        margin: 0;
    }

    .rnw-cs-page .reviews-grid.is-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Figma 의 테두리는 자리를 먹지 않는다 */
    .rnw-cs-page .review-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: var(--rnw-radius-thumb);
        box-shadow: inset 0 0 0 1px var(--mute-4);
        background: var(--white);
        overflow: hidden;
    }

    .rnw-cs-page .review-card__img-wrap {
        width: 100%;
        aspect-ratio: 176 / 125;
        height: auto;
        background: var(--rnw-fill-thumb);
    }

    .rnw-cs-page .review-card__img-wrap img,
    .rnw-cs-page .review-card__img-wrap video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .rnw-cs-page .review-card__body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 5px;
    }

    .rnw-cs-page .review-card__meta {
        display: flex;
        flex-direction: column;
        gap: 3.75px;
        margin: 0;
    }

    .rnw-cs-page .review-card__stars {
        display: flex;
        align-items: flex-start;
        gap: 0;
    }

    /* 도면은 별을 1.5px 씩 겹쳐 놓는다 */
    .rnw-cs-page .review-card__star {
        margin-right: -1.5px;
    }

    .rnw-cs-page .review-card__star:last-child {
        margin-right: 0;
    }

    .rnw-cs-page .review-card__option {
        font-size: var(--rnw-fs-nano);
        line-height: 11px;
        color: var(--mute-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rnw-cs-page .review-card__text {
        margin: 0;
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: -0.2px;
        color: var(--mute-1);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rnw-cs-page .review-card__author-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
        color: var(--mute-3);
    }

    /* 도면 목록 카드에는 구매인증 배지가 없다 */
    .rnw-cs-page .review-card__certified,
    .rnw-cs-page .review-card__media-strip {
        display: none;
    }

    .rnw-cs-page .review-card__sep {
        width: 1px;
        height: 9.75px;
        background: var(--mute-6);
    }

    .rnw-cs-page .review-card__product {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 5px 0 0;
        border: 0;
        box-shadow: inset 0 0.75px 0 rgba(0, 0, 0, 0.1);
        background: var(--white);
    }

    .rnw-cs-page .review-card__product-img {
        position: relative;
        flex: none;
        width: 25px;
        height: 25px;
        border-radius: 3px;
        background: var(--rnw-fill-thumb);
        overflow: hidden;
    }

    .rnw-cs-page .review-card__product-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .rnw-cs-page .review-card__product-img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.05);
    }

    .rnw-cs-page .review-card__product-info {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .rnw-cs-page .review-card__product-name {
        margin: 0;
        font-size: var(--rnw-fs-nano);
        line-height: 11px;
        letter-spacing: -0.18px;
        color: var(--mute-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rnw-cs-page .review-card__product-rating {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 8px;
        line-height: 10px;
        letter-spacing: -0.16px;
    }

    .rnw-cs-page .review-card__product-score {
        display: flex;
        align-items: center;
        gap: 1.5px;
        color: var(--mute-1);
    }

    .rnw-cs-page .review-card__product-score-star {
        width: 10.5px;
        height: 10.5px;
    }

    .rnw-cs-page .review-card__product-sep {
        display: none;
    }

    .rnw-cs-page .review-card__product-count {
        color: var(--mute-3);
    }
}

/* 리뷰 목록 PC 는 기존 '더보기' 를 쓰므로 새로 붙인 페이지네이션은 감춘다 */
@media (min-width: 1280px) {
    .reviews-page .pagination {
        display: none;
    }
}

/* ── 마이페이지 (25:4685 mo-mypage) ────────────────────────── */
@media (max-width: 1279px) {
    .rnw-my-page .main__container {
        padding-left: 0;
        padding-right: 0;
    }

    .rnw-my-page .mypage {
        display: block;
    }

    /* 도면 section-39: 안쪽 15, 블록 사이 40 */
    .rnw-my-page .mypage-content {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 15px;
    }

    /* 제목 줄만 다음 블록과 30 이다 */
    .rnw-my-page .rnw-cs-head {
        margin-bottom: -10px;
    }

    /* 회원 요약 (25:4838 section-40) */
    .rnw-my-page .mypage-profile {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: 0;
        padding: 30px;
        border: 0;
        border-radius: 10px;
        background: var(--mute-7);
    }

    /* 도면은 [아바타][닉네임·등급][회원정보 수정·사진 버튼] 한 줄에 안내문이 아래다.
       기존 마크업은 아바타와 사진 버튼이 한 덩어리라 display:contents 로 풀어
       격자에 다시 배치한다 */
    .rnw-my-page .mypage-profile__left {
        display: grid;
        grid-template-columns: 40px 1fr auto;
        grid-template-areas:
            "avatar name  label"
            "avatar name  btns"
            "list   list  list";
        column-gap: 20px;
        row-gap: 5px;
        align-items: center;
        width: 100%;
    }

    .rnw-my-page .mypage-profile__avatar-wrap,
    .rnw-my-page .mypage-profile__info {
        display: contents;
    }

    .rnw-my-page .mypage-profile__avatar {
        grid-area: avatar;
        align-self: center;
        width: 40px;
        height: 40px;
        border-radius: 45px;
        object-fit: cover;
    }

    .rnw-my-page .mypage-profile__name-row {
        grid-area: name;
    }

    /* 모바일 도면에는 '프로필 사진' 캡션이 없다 */
    .rnw-my-page .mypage-profile__avatar-label {
        display: none;
    }

    .rnw-my-profile-edit {
        grid-area: label;
        justify-self: end;
        font-size: var(--rnw-fs-nano);
        line-height: 11px;
        text-align: center;
        white-space: nowrap;
        color: var(--mute-2);
        text-decoration: none;
    }

    .rnw-my-page .mypage-profile__avatar-btns {
        grid-area: btns;
        justify-self: end;
    }

    .rnw-my-page .mypage-profile__info-list {
        grid-area: list;
        margin-top: 15px;
    }

    .rnw-my-page .mypage-profile__name-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin: 0;
    }

    .rnw-my-page .mypage-profile__nickname {
        font-size: var(--fs-md);
        font-weight: 600;
        line-height: 19px;
        color: var(--mute-1);
    }

    .rnw-my-page .mypage-profile__grade-badge {
        padding: 3px 7.5px;
        border-radius: 15px;
        box-shadow: inset 0 0 0 0.75px var(--mute-4);
        background: none;
        font-size: var(--fs-xs);
        font-weight: 600;
        line-height: 14px;
        white-space: nowrap;
        color: var(--mute-1);
    }

    .rnw-my-page .mypage-profile__info-list {
        margin: 0;
        padding-left: 15px;
        list-style-position: outside;
        list-style: disc;
        font-size: 10px;
        line-height: 1.8;
        color: var(--mute-2);
    }

    .rnw-my-page .mypage-profile__info-list li {
        font-size: 10px;
        line-height: 1.8;
    }

    .rnw-my-page .mypage-profile__info-list li:first-child {
        color: var(--mute-1);
    }

    /* 사진 수정·삭제 (25:4850) */
    .rnw-my-page .mypage-profile__avatar-label {
        font-size: var(--rnw-fs-nano);
        line-height: normal;
        text-align: center;
        color: var(--mute-2);
    }

    .rnw-my-page .mypage-profile__avatar-btns {
        display: flex;
        flex-direction: column;
    }

    .rnw-my-page .mypage-profile__avatar-btn {
        padding: 2.25px 7.5px;
        border: 0;
        border-radius: 0;
        box-shadow: inset 0 0 0 0.75px var(--mute-4);
        background: none;
        font-family: var(--font);
        font-size: 8px;
        line-height: normal;
        white-space: nowrap;
        color: var(--mute-2);
        cursor: pointer;
    }

    /* 적립금 4줄 (25:4860 row-group-34) */
    .rnw-my-page .mypage-point {
        display: flex;
        flex-direction: column;
        gap: 12.75px;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .rnw-my-page .mypage-point__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 19.5px;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: var(--fs-xs);
        line-height: 14px;
        color: var(--mute-1);
    }

    /* 조회 버튼이 없는 줄은 그 폭만큼 비운다 */
    .rnw-my-page .mypage-point__row:not(:first-child) {
        padding-right: 50.25px;
    }

    .rnw-my-page .mypage-dash-row {
        display: flex;
        align-items: center;
        gap: 19.5px;
    }

    .rnw-my-page .mypage-point__row-value {
        font-size: var(--fs-xs);
        color: var(--mute-1);
    }

    .rnw-my-page .mypage-point__row-value strong {
        font-weight: 500;
    }

    .rnw-my-page .mypage-point__row-btn {
        flex: none;
        padding: 2.25px 7.5px;
        border: 0;
        box-shadow: inset 0 0 0 0.75px var(--mute-4);
        background: none;
        font-size: var(--rnw-fs-nano);
        line-height: normal;
        color: var(--mute-1);
    }

    /* 6칸 메뉴 (35:1100) — 화면 폭을 꽉 채우고 안쪽 15 */
    .rnw-my-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        margin: 0 -15px;
        padding: 15px;
        background: var(--white);
    }

    /* Figma 의 선은 자리를 먹지 않는다 — 테두리로 그리면 46 이어야 할 칸이 48 이 된다 */
    .rnw-my-menu__item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 10px;
        box-shadow: inset 0 0 0 1px var(--rnw-line-btn);
        font-size: var(--fs-sm);
        font-weight: 400;
        line-height: 16px;
        text-align: center;
        white-space: nowrap;
        color: var(--rnw-ink);
        text-decoration: none;
    }

    /* 섹션 머리 (25:4888) */
    .rnw-my-page .mypage-order-status,
    .rnw-my-block {
        display: flex;
        flex-direction: column;
        gap: 27px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .rnw-my-block[hidden] {
        display: none;
    }

    .rnw-my-page .mypage-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8.25px;
        margin: 0;
        padding: 11.25px 0;
        box-shadow: inset 0 -1px 0 #ddd;
    }

    /* 제목 + 부제가 한 줄이다 (25:4889 frame-200) */
    .rnw-my-page .mypage-section-header > div {
        display: flex;
        align-items: center;
        gap: 8.25px;
    }

    .rnw-my-page .mypage-section-header__title {
        font-size: var(--fs-base);
        font-weight: 600;
        line-height: 17px;
        color: #000;
    }

    .rnw-my-page .mypage-section-header__sub {
        margin-left: 0;
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        color: var(--mute-3);
    }

    .rnw-my-page .mypage-section-header__more {
        display: flex;
        align-items: center;
        gap: 7.5px;
        font-size: 10px;
        line-height: 12px;
        color: var(--mute-1);
        text-decoration: none;
    }

    /* 주문 처리 현황 5칸 (25:4895 frame-201) */
    .rnw-my-page .mypage-order-steps {
        display: flex;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .rnw-my-page .mypage-order-step {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .rnw-my-page .mypage-order-step__label {
        width: 100%;
        font-size: var(--rnw-fs-nano);
        font-weight: 500;
        line-height: normal;
        text-align: center;
        color: var(--mute-2);
    }

    .rnw-my-page .mypage-order-step__count {
        font-size: var(--fs-lg);
        font-weight: 500;
        line-height: normal;
        color: var(--mute-1);
    }

    .rnw-my-page .mypage-order-step__divider {
        flex: none;
        width: 1px;
        align-self: stretch;
        background: var(--mute-6);
    }

    .rnw-my-page .mypage-order-cs {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 15px;
    }

    .rnw-my-page .mypage-order-cs__row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 27px;
    }

    .rnw-my-page .mypage-order-cs__label {
        font-size: var(--rnw-fs-nano);
        font-weight: 500;
        line-height: normal;
        text-align: center;
        color: var(--mute-2);
    }

    .rnw-my-page .mypage-order-cs__count {
        font-size: 13.5px;
        font-weight: 500;
        line-height: normal;
        color: var(--mute-1);
    }

    /* 최근 본 상품 · 관심 상품 카드 줄 (35:1182 row-group-37) */
    .rnw-my-cards {
        display: flex;
        gap: 9px;
        width: 100%;
    }

    .rnw-my-cards .rnw-card {
        flex: none;
        width: 114px;
    }
}

@media (min-width: 1280px) {
    .rnw-my-menu,
    .rnw-my-block,
    .rnw-my-profile-edit {
        display: none;
    }
}

/* ── 주문조회 (38:1330 mo-order-history) ───────────────────── */
@media (max-width: 1279px) {
    .rnw-order-page .mypage-content {
        gap: 30px;
    }

    /* 주문조회는 제목 줄 다음도 30 이다 */
    .rnw-order-page .rnw-cs-head {
        margin-bottom: 0;
    }

    /* 기간 · 주문 처리 상태 (38:2078 frame-220) */
    .rnw-order-filter {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .rnw-order-filter .rnw-cs-select {
        flex: 1 0 0;
        min-width: 0;
        width: auto;
        color: var(--rnw-ink);
    }

    /* 주문조회 / 취소·교환·반품 2탭 (38:2067 container-10) */
    .rnw-order-tabs {
        display: flex;
        align-items: center;
        height: 36px;
        box-shadow: inset 0 -1px 0 var(--rnw-fill-sheet);
    }

    .rnw-order-tabs__item {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 10px;
        border-bottom: 2px solid transparent;
        font-size: var(--fs-sm);
        font-weight: 400;
        line-height: 16px;
        white-space: nowrap;
        color: var(--mute-3);
        text-decoration: none;
    }

    .rnw-order-tabs__item.is-active {
        border-bottom-color: #000;
        font-weight: 600;
        color: #000;
    }

    /* 안내문 (38:2107) — 앞에 느낌표 동그라미 */
    .rnw-order-note {
        position: relative;
        max-width: 275px;
        margin: 0;
        padding-left: 17px;
        font-size: 10px;
        line-height: 12px;
        color: var(--mute-3);
    }

    .rnw-order-note::before {
        content: '!';
        position: absolute;
        left: 0;
        top: 0;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px var(--mute-4);
        font-size: 8px;
        font-weight: 700;
        line-height: 12px;
        text-align: center;
        color: var(--mute-4);
    }

    /* 주문 카드 (41:2829 row-group-39) — 화면 폭을 꽉 채운다 */
    .rnw-order-list {
        display: flex;
        flex-direction: column;
        margin: 0 -15px;
    }

    .rnw-order-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 15px;
        box-shadow: inset 0 -8px 0 var(--mute-7);
    }

    .rnw-order-card__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .rnw-order-card__no {
        font-size: var(--fs-xs);
        line-height: 18px;
        color: var(--mute-2);
    }

    .rnw-order-card__no b {
        margin-left: 5px;
        font-weight: 400;
        color: var(--mute-1);
    }

    .rnw-order-card__detail {
        display: flex;
        align-items: center;
        gap: 7.5px;
        font-size: 10px;
        line-height: 12px;
        white-space: nowrap;
        color: var(--mute-1);
        text-decoration: none;
    }

    .rnw-order-card__detail i {
        width: 3.78px;
        height: 6.68px;
        background: currentColor;
        -webkit-mask: url('../images/renewal/icon/chevron-right.svg') no-repeat center / 14px 14px;
        mask: url('../images/renewal/icon/chevron-right.svg') no-repeat center / 14px 14px;
    }

    .rnw-order-card__body {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .rnw-order-card__thumb {
        flex: none;
        width: 75px;
        height: 75px;
        border-radius: var(--rnw-radius-thumb);
        background: var(--white);
        overflow: hidden;
    }

    .rnw-order-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .rnw-order-card__main {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .rnw-order-card__status {
        padding: 0 10px;
        border-radius: 20px;
        background: var(--white);
        box-shadow: inset 0 0 0 1px var(--mute-6);
        font-size: var(--fs-xs);
        line-height: 21px;
        letter-spacing: -0.24px;
        white-space: nowrap;
        color: var(--rnw-blue);
    }

    .rnw-order-card__group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }

    .rnw-order-card__pname {
        margin: 0;
        font-size: var(--fs-sm);
        font-weight: 600;
        line-height: 1.5;
        color: var(--mute-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rnw-order-card__opt {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: var(--fs-xs);
        line-height: 1.5;
        color: var(--mute-2);
    }

    .rnw-order-card__bullet {
        flex: none;
        width: 7px;
        height: 7px;
        align-self: flex-start;
        margin-top: 5px;
        box-shadow: inset 0 0 0 1px var(--mute-4);
    }

    .rnw-order-card__div {
        flex: none;
        width: 1px;
        height: 12px;
        background: var(--mute-6);
    }

    .rnw-order-card__more,
    .rnw-order-card__amount {
        margin: 0;
        font-size: var(--fs-sm);
        line-height: 1.5;
        color: var(--mute-1);
    }

    /* 상태별 버튼 (73:2280 frame-257) */
    .rnw-order-card__actions {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .rnw-order-btns {
        display: flex;
        gap: 5px;
    }

    .rnw-order-btn {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: var(--rnw-radius-thumb);
        background: var(--white);
        font-family: var(--font);
        font-size: var(--fs-xs);
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.24px;
        text-align: center;
        color: var(--mute-1);
        text-decoration: none;
        cursor: pointer;
    }

    .rnw-order-btn--main {
        font-size: var(--fs-base);
        font-weight: 600;
        line-height: normal;
        letter-spacing: -0.28px;
        color: var(--rnw-blue);
    }
}

@media (min-width: 1280px) {
    .rnw-order-tabs,
    .rnw-order-filter,
    .rnw-order-note,
    .rnw-order-list {
        display: none;
    }
}

/* ── 주문조회상세 (74:2361 mo-order-detail / 78:3210 변형) ──── */
/* 두 도면은 같은 화면이고 결제수단·주문상태만 다르다. 기존 마크업이
   주문상품·배송지·결제정보·적립금혜택 구성과 그대로 맞아 CSS 정렬 위주다 */
@media (max-width: 1279px) {
    .rnw-oddetail-page .mypage-content {
        gap: 20px;
    }

    .rnw-oddetail-page .rnw-cs-head {
        margin-bottom: 10px;
    }

    .rnw-oddetail-page .rnw-order-note {
        margin-bottom: 10px;
    }

    .rnw-oddetail-page .order-detail-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
    }

    .rnw-oddetail-page .order-detail-section__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .rnw-oddetail-page .order-detail-section__title {
        margin: 0;
        font-size: var(--fs-md);
        font-weight: 600;
        line-height: 23px;
        color: var(--rnw-ink);
    }

    .rnw-oddetail-page .order-detail-box {
        padding: 15px;
        border: 0;
        border-radius: 0;
        background: var(--white);
    }

    /* 주문상품 머리 — 상태 배지 + 주문번호 (74:2817) */
    .rnw-oddetail-page .order-product-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .rnw-oddetail-page .order-product-header__meta {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .rnw-od-status {
        padding: 0 10px;
        border-radius: 20px;
        background: var(--white);
        box-shadow: inset 0 0 0 1px var(--mute-6);
        font-size: var(--fs-xs);
        line-height: 21px;
        letter-spacing: -0.24px;
        white-space: nowrap;
        color: var(--rnw-blue);
    }

    .rnw-oddetail-page .order-product-header__no {
        font-size: var(--fs-xs);
        line-height: 18px;
        color: var(--mute-2);
    }

    .rnw-oddetail-page .order-product-header__no-label {
        margin-right: 5px;
    }

    .rnw-oddetail-page .order-detail-divider {
        height: 1px;
        margin: 15px 0;
        background: var(--mute-6);
    }

    /* 상품 행 (74:3084 frame-290) */
    .rnw-oddetail-page .order-product-item__row {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .rnw-oddetail-page .order-product-item__thumb {
        flex: none;
        width: 75px;
        height: 75px;
        border-radius: var(--rnw-radius-thumb);
        object-fit: cover;
        background: var(--white);
    }

    .rnw-oddetail-page .order-product-item__info {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .rnw-oddetail-page .order-product-item__name {
        margin: 0;
        font-size: var(--fs-sm);
        font-weight: 600;
        line-height: 1.5;
        color: var(--mute-1);
    }

    .rnw-oddetail-page .order-product-item__option {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-xs);
        line-height: 1.5;
        color: var(--mute-2);
    }

    .rnw-oddetail-page .order-product-item__price-row {
        font-size: var(--fs-sm);
        line-height: 1.5;
        color: var(--mute-1);
    }

    /* 전체 상품 장바구니 담기 (74:2882) */
    .rnw-oddetail-page .order-cart-all-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 15px;
        padding: 11.25px;
        border: 0;
        border-radius: var(--rnw-radius-thumb);
        box-shadow: inset 0 0 0 1px #ddd;
        background: var(--white);
        font-family: var(--font);
        font-size: var(--fs-xs);
        line-height: 18px;
        text-align: center;
        color: var(--mute-1);
        cursor: pointer;
    }

    /* 배송지 (74:2886 wrapper-54) */
    .rnw-oddetail-page .order-shipping-info {
        display: flex;
        flex-direction: column;
        gap: 7.5px;
    }

    .rnw-oddetail-page .order-shipping-info__name-row {
        display: flex;
        align-items: center;
        gap: 7.5px;
        font-size: var(--fs-base);
        line-height: 20px;
        color: var(--mute-1);
    }

    .rnw-oddetail-page .order-shipping-info__address,
    .rnw-oddetail-page .order-shipping-info__memo {
        margin: 0;
        font-size: var(--fs-xs);
        line-height: 18px;
        color: var(--mute-2);
    }

    .rnw-oddetail-page .order-shipping-change-btn {
        flex: none;
        padding: 3.75px 11.25px;
        border: 0;
        box-shadow: inset 0 0 0 0.75px var(--mute-4);
        background: var(--white);
        font-family: var(--font);
        font-size: 10.5px;
        line-height: 13px;
        white-space: nowrap;
        color: var(--mute-1);
        cursor: pointer;
    }

    /* 결제정보 · 적립금혜택 (74:2899 row-group-45) */
    .rnw-oddetail-page .order-payment-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: var(--fs-base);
        font-weight: 500;
        line-height: 20px;
        color: var(--mute-1);
    }

    .rnw-oddetail-page .order-payment-sub {
        display: flex;
        flex-direction: column;
        gap: 7.5px;
        margin-top: 15px;
        padding-left: 15px;
    }

    .rnw-oddetail-page .order-payment-sub__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: var(--fs-xs);
        line-height: 18px;
        color: var(--mute-2);
    }

    .rnw-oddetail-page .order-payment-sub__value,
    .rnw-oddetail-page .order-payment-sub__label-group {
        display: flex;
        align-items: center;
        gap: 3.75px;
    }

    .rnw-oddetail-page .order-payment-sub__dot {
        width: 1.5px;
        height: 1.5px;
        border-radius: 50%;
        background: var(--mute-3);
    }

    /* 목록으로 (74:3078) */
    .rnw-od-foot {
        display: flex;
        justify-content: flex-end;
    }

    .rnw-od-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 75px;
        padding: 5px 0;
        border-radius: var(--rnw-radius-thumb);
        box-shadow: inset 0 0 0 1px #ddd;
        background: var(--white);
        font-size: var(--fs-sm);
        line-height: 21px;
        text-align: center;
        color: var(--mute-1);
        text-decoration: none;
    }
}

@media (min-width: 1280px) {
    .rnw-od-foot,
    .rnw-od-status {
        display: none;
    }
}

/* ── PC 라운드 · 홈 (45:1185 pc-home) ──────────────────────── */
/* 도면 PC 컨테이너는 1280(안쪽 1250)이고, 헤더·GNB·푸터가 이미 쓰는 값과 같다.
   리뉴얼 홈 섹션은 컨테이너 없이 main 바로 밑에 있어 뷰포트를 그대로 채우고 있었다 */
@media (min-width: 1280px) {
    .rnw-catnav,
    .rnw-comm,
    .rnw-sec,
    .rnw-linkgrid,
    .rnw-cs {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 카드 격자 6열 — 1250 안에서 칸이 195 로 떨어져 도면 카드 폭과 같다 (65:2027) */
    .rnw-card-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 40px 16px;
        padding: 0 15px;
    }

    /* 주목해야 할 상품은 PC 에서 가로 스크롤이 아니라 3열이다 */
    .rnw-hscroll {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        overflow: visible;
    }

    .rnw-hscroll__item {
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* 카테고리 5칸 · 커뮤니티 · 바로가기 줄도 컨테이너 안에서 넓게 편다 */
    .rnw-catnav {
        gap: 40px;
        padding: 30px 15px;
    }

    .rnw-linkgrid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        padding: 0 15px 40px;
    }

    .rnw-comm {
        padding: 15px;
    }
}

/* ── PC 라운드 · 상품 목록 (65:1352 pc-products-list) ───────── */
/* 도면은 1250 안에 6열이라 칸이 195 로 떨어진다. 기존 legacy 격자는 4열 291 이었다 */
@media (min-width: 1280px) {
    .rnw-plist {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 40px 16px;
    }
}

/* ── PC 라운드 · 공지·이벤트 (94:1756 / 97:2399) ────────────── */
/* 도면 PC 는 모바일과 같은 5탭 껍데기를 쓰고 폭만 커진다.
   `.rnw-cs-pc` 가 붙은 화면(PC 도면이 있는 화면)에서만 켠다 */
@media (min-width: 1280px) {
    .rnw-cs-pc .rnw-cs-shell {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* 제목 — 가운데 정렬, 뒤로 화살표 없음 (94:1763) */
    .rnw-cs-pc .rnw-cs-head {
        display: flex;
        justify-content: center;
        padding: 60px 0 15px;
    }

    .rnw-cs-pc .rnw-cs-head__back,
    .rnw-cs-pc .rnw-cs-head__spacer {
        display: none;
    }

    .rnw-cs-pc .rnw-cs-head__title {
        font-size: 36px;
        font-weight: 700;
        line-height: 48px;
        color: var(--rnw-ink);
    }

    /* 5탭 — 1250 안에서 250씩 (94:2168).
       껍데기 구조 규칙이 모바일 미디어쿼리 안에 있어서 PC 에서는 다시 세워야 한다 */
    .rnw-cs-pc .rnw-cs-tabs {
        display: flex;
        align-items: center;
        height: 54px;
        margin-top: 60px;
        border-bottom: 1px solid var(--mute-6);
    }

    .rnw-cs-pc .rnw-cs-tabs__item {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        border-bottom: 2px solid transparent;
        font-size: var(--fs-md);
        font-weight: 400;
        line-height: 23px;
        white-space: nowrap;
        color: var(--mute-3);
        text-decoration: none;
    }

    .rnw-cs-pc .rnw-cs-tabs__item.is-active {
        border-bottom-color: #000;
        font-weight: 600;
        color: #000;
    }

    .rnw-cs-pc .rnw-cs-tabs__item.is-disabled {
        opacity: 0.4;
        cursor: default;
    }

    /* 건수와 검색을 한 줄에 놓는다. DOM 순서는 모바일 기준이라 격자로 자리를 지정한다 */
    .rnw-cs-pc .rnw-cs-body {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        row-gap: 0;
        margin-top: 60px;
    }

    .rnw-cs-pc .rnw-cs-listbar {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        height: 42px;
    }

    .rnw-cs-pc .rnw-cs-listbar__count {
        margin: 0;
        color: #000;
    }

    .rnw-cs-pc .rnw-cs-listbar__count {
        font-size: var(--fs-base);
        line-height: 18px;
    }

    .rnw-cs-pc .rnw-cs-listbar__sort {
        display: none;
    }

    .rnw-cs-pc .rnw-cs-search {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 20px;
        width: auto;
    }

    .rnw-cs-pc .rnw-cs-search .rnw-cs-select {
        background-color: var(--white);
        background-image: url('../images/renewal/icon/chevron-down.svg');
        background-repeat: no-repeat;
        border-radius: 0;
        font-family: var(--font);
        -webkit-appearance: none;
        appearance: none;
        width: 150px;
        height: 42px;
        padding: 12px 34px 12px 15px;
        border: 1px solid var(--rnw-fill-sheet);
        background-position: right 15px center;
        background-size: 16px 16px;
        font-size: var(--fs-base);
        line-height: 18px;
        color: var(--mute-1);
    }

    .rnw-cs-pc .rnw-cs-search__field {
        display: none;
    }

    .rnw-cs-pc .rnw-cs-search__box {
        display: flex;
        align-items: stretch;
        width: 200px;
        height: 42px;
        border: 1px solid var(--rnw-fill-sheet);
    }

    .rnw-cs-pc .rnw-cs-search__input {
        flex: 1 0 0;
        min-width: 0;
        border: 0;
        background: none;
        font-family: var(--font);
        color: var(--mute-1);
        padding: 12px 15px;
        font-size: var(--fs-base);
        line-height: 18px;
    }

    .rnw-cs-pc .rnw-cs-search__btn {
        flex: none;
        padding: 0;
        border: 0;
        cursor: pointer;
        background-image: url('../images/renewal/icon/cs-search.svg');
        background-repeat: no-repeat;
        background-position: center;
        width: 44px;
        background-color: transparent;
        background-size: 16px 16px;
    }

    /* 본문·페이지네이션은 두 칸을 다 쓴다 */
    .rnw-cs-pc .rnw-cs-body > .rnw-legacy-only,
    .rnw-cs-pc .rnw-event-filter,
    .rnw-cs-pc .rnw-event-list,
    .rnw-cs-pc .pagination {
        grid-column: 1 / -1;
    }

    /* 목록 머리와 검색이 1행을 잡고 있으니 나머지는 흐르는 대로 둔다.
       행을 못 박으면 Q&A 처럼 legacy 블록이 둘인 화면에서 겹친다 */
    .rnw-cs-pc .rnw-cs-body > .rnw-legacy-only {
        margin-top: 20px;
    }

    .rnw-cs-pc .pagination {
        margin-top: 40px;
    }

    /* REVIEW 는 검색 상자가 없다. 목록 머리가 한 줄을 다 쓰고
       건수는 왼쪽, 열 전환·정렬은 오른쪽으로 갈린다 */
    .rnw-cs-pc .reviews-page .rnw-cs-listbar {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .rnw-cs-pc .rnw-cs-listbar__right {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    /* PC 격자는 reviews.css 가 4열로 고정한다. 열 전환 버튼은 여기서 할 일이 없다 */
    .rnw-cs-pc .rnw-viewtoggle {
        display: none;
    }

    /* Q&A 의 '문의 작성' 은 REVIEW 의 정렬 상자와 같은 자리(건수 줄 오른쪽)에 둔다.
       혼자 한 줄을 차지하면 목록이 아래로 밀리고 왼쪽에 덩그러니 남는다 */
    .rnw-cs-pc .rnw-cs-body > .qna-top-bar {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-items: center;
        height: 42px;
        margin-top: 0;
    }

    .rnw-cs-pc .rnw-cs-listbar__right .rnw-cs-select {
        width: 150px;
        height: 42px;
        padding: 12px 34px 12px 15px;
        background-position: right 15px center;
        background-size: 16px 16px;
        font-size: var(--fs-base);
        line-height: 18px;
        color: var(--mute-1);
    }

    /* 이벤트는 PC 에서 3열 카드다 (97:2399) */
    .rnw-cs-pc .rnw-event-filter {
        grid-row: 2;
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    .rnw-cs-pc .rnw-event-filter__item {
        padding: 8px 20px;
        border-radius: 40px;
        box-shadow: inset 0 0 0 1px #ddd;
        font-size: var(--fs-base);
        line-height: 18px;
        color: var(--rnw-ink);
        text-decoration: none;
    }

    .rnw-cs-pc .rnw-event-filter__item.is-active {
        background: var(--rnw-ink);
        box-shadow: none;
        color: var(--white);
    }

    .rnw-cs-pc .rnw-event-list {
        grid-row: 3;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 60px 30px;
        margin-top: 30px;
    }

    .rnw-cs-pc .rnw-event-card {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0;
        box-shadow: none;
    }

    .rnw-cs-pc .rnw-event-card__thumb {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: var(--rnw-fill-sheet);
        overflow: hidden;
    }

    .rnw-cs-pc .rnw-event-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .rnw-cs-pc .rnw-event-card__foot {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .rnw-cs-pc .rnw-event-card__badge {
        flex: none;
        display: flex;
        align-items: center;
        padding: 5px 12px;
        border-radius: 30px;
        background: var(--rnw-blue);
        font-size: var(--fs-xs);
        line-height: 16px;
        color: var(--white);
    }

    .rnw-cs-pc .rnw-event-card__badge.is-ended {
        background: var(--mute-6);
        color: var(--mute-1);
    }

    .rnw-cs-pc .rnw-event-card__badge--date {
        background: var(--rnw-fill-sheet);
        color: var(--mute-3);
    }

    .rnw-cs-pc .rnw-event-card__title {
        flex: 1 0 0;
        min-width: 0;
        font-size: var(--fs-md);
        line-height: 24px;
        color: var(--mute-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 이벤트 탭에서는 legacy 카드 격자를 쓰지 않는다 */
    .rnw-cs-pc .notice-cards {
        display: none;
    }

    /* 페이지네이션 — 도면은 가운데 32px 버튼 줄 (94:1795) */
    .rnw-cs-pc .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
}

/* 자주 찾는 메뉴 제목·아이콘은 PC 도면에만 있다 (45:1811 / 45:1814) */
.rnw-linkgrid__head,
.rnw-linkgrid__icon {
    display: none;
}

@media (min-width: 1280px) {
    /* ── PC 홈 세부 (45:1185 pc-home) ───────────────────────── */

    /* 카테고리 5칸 — 박스 120, 라벨 19 (45:1592 row-group-10) */
    .rnw-catnav {
        justify-content: space-between;
        gap: 0;
        padding: 30px 15px;
    }

    /* 모바일에서 칸이 flex 로 늘어나 있어 PC 에서는 고정 폭으로 되돌린다 */
    .rnw-catnav__item {
        flex: none;
        width: 120px;
        gap: 8px;
    }

    .rnw-catnav__box {
        width: 120px;
        height: 120px;
        border-radius: 20px;
    }

    .rnw-catnav__label {
        font-size: var(--fs-md);
        line-height: 19px;
    }

    /* 커뮤니티 2블록 617x150 + 이벤트 영역 1250x150 (45:1213) */
    .rnw-comm {
        gap: 16px;
        padding: 15px;
    }

    .rnw-comm__row {
        gap: 16px;
    }

    /* PC 는 컨테이너가 1280 으로 고정이라 칸 비율이 변하지 않는다. 도면 크기를 그대로 쓴다 */
    .rnw-comm__box {
        height: 150px;
        aspect-ratio: auto;
    }

    .rnw-comm .rnw-evb,
    .rnw-comm .rnw-evb__track,
    .rnw-comm .rnw-evb__item {
        height: 150px;
        aspect-ratio: auto;
    }

    /* 상세 이벤트 배너도 홈과 같은 PC 이미지(1250×150)를 쓴다.
       18:5 는 모바일 업로드 비율이라 PC 에 그대로 걸면 박스가 세로로 늘어나고
       object-fit:cover 가 배너를 확대해 좌우를 잘라낸다. 홈과 같은 150px 로 맞춘다. */
    .rnw-pd-event .rnw-evb,
    .rnw-pd-event .rnw-evb__track,
    .rnw-pd-event .rnw-evb__item {
        height: 150px;
        aspect-ratio: auto;
    }

    /* 섹션 헤딩 32 (45:1222) */
    .rnw-sec {
        gap: 20px;
        padding: 40px 0;
    }

    .rnw-sec-head {
        padding: 0 15px;
    }

    .rnw-sec-head__title {
        font-size: var(--fs-3xl);
        line-height: 32px;
    }

    .rnw-sec-head__more {
        font-size: var(--fs-md);
        line-height: 21px;
    }

    /* 자주 찾는 메뉴 — 제목 2줄 + 180x180 아이콘 4개 (45:1264 section-17).
       제목이 한 줄을 다 쓰고 아이콘 4개가 아래 줄에 가운데로 모인다 */
    .rnw-linkgrid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 16px 30px;
        padding: 40px 15px;
    }

    .rnw-linkgrid__head {
        flex: 0 0 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-align: center;
    }

    .rnw-linkgrid__title {
        margin: 0;
        font-size: var(--fs-2xl);
        font-weight: 700;
        line-height: 29px;
        color: var(--rnw-ink);
    }

    .rnw-linkgrid__sub {
        margin: 0;
        font-size: var(--fs-md);
        font-weight: 400;
        line-height: 19px;
        color: var(--mute-3);
        text-transform: none;
    }

    /* 4칸을 가운데 모아 배치한다. 격자가 아니라 줄이다 */
    .rnw-linkgrid__btn {
        flex: none;
        flex-direction: column;
        gap: 8px;
        width: 180px;
        height: auto;
        padding: 0;
        border: 0;
        font-size: var(--fs-md);
        line-height: 19px;
    }

    .rnw-linkgrid__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180px;
        height: 180px;
        border-radius: 20px;
        background: var(--rnw-nav-soft);
    }

    .rnw-linkgrid__icon img {
        width: 135px;
        height: 135px;
        object-fit: contain;
        filter: drop-shadow(0 15px 22.5px rgba(172, 186, 207, 0.32));
    }

    /* PC 도면에는 고객센터 블록이 없다 — 푸터가 고객센터·계좌안내를 담당한다 */
    .rnw-cs {
        display: none;
    }
}

/* ── PC 히어로 (45:1595 wrapper-5) ─────────────────────────── */
/* 도면은 700 슬라이드 3장이 가운데 정렬로 보이고 좌우 장이 걸쳐 나온다.
   모바일은 그대로 한 장씩 넘어간다 */
.rnw-heroctl {
    display: none;
}

@media (min-width: 1280px) {
    /* index.css 가 히어로에 1920/650 비율과 슬라이드 min-width:100% 를 걸어둔다.
       도면은 700 정사각 3장이라 둘 다 풀어야 한다 */
    /* 트랙이 정사각 3장 + 간격 30 이라 컨테이너를 다 못 채운다.
       style.css 의 #111 을 안 덮으면 그 빈 자리가 검게 드러난다 */
    .hero-main {
        height: 700px;
        aspect-ratio: auto;
        max-width: none;
        overflow: hidden;
        background: var(--white);
    }

    .hero-main__track {
        display: flex;
        gap: 30px;
        width: max-content;
        height: 700px;
        margin-left: 50%;
        transition: transform 0.4s ease;
    }

    .hero-main__slide {
        flex: 0 0 700px;
        width: 700px;
        min-width: 0;
        height: 700px;
        background: var(--mute-7);
    }

    .hero-main__picture,
    .hero-main__slide-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 도면 PC 에는 좌우 화살표 오버레이와 도트가 없다. 아래 조작 줄이 대신한다 */
    .hero-main__arrows,
    .hero-main__tabs,
    .rnw-slide-count--hero {
        display: none;
    }

    /* 조작 줄 (45:1607 frame-11) — 카운터 · 진행바 · 버튼 3개 */
    .rnw-heroctl {
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: 1280px;
        height: 89px;
        margin: 0 auto;
    }

    .rnw-heroctl__count {
        flex: none;
        width: 64px;
        font-size: var(--fs-lg);
        font-weight: 400;
        line-height: 29px;
        color: var(--mute-3);
    }

    .rnw-heroctl__count b {
        font-weight: 700;
        color: var(--rnw-ink);
    }

    .rnw-heroctl__bar {
        flex: 1 0 0;
        min-width: 0;
        height: 3px;
        border-radius: 3px;
        background: var(--mute-6);
        overflow: hidden;
    }

    .rnw-heroctl__bar i {
        display: block;
        width: 0;
        height: 100%;
        border-radius: 3px;
        background: var(--rnw-ink);
        transition: width 0.4s ease;
    }

    .rnw-heroctl__btns {
        flex: none;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .rnw-heroctl__btn {
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background-color: var(--rnw-ink);
        cursor: pointer;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 24px 24px;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 24px 24px;
    }

    .rnw-heroctl__btn--prev {
        -webkit-mask-image: url('../images/renewal/icon/chevron-left.svg');
        mask-image: url('../images/renewal/icon/chevron-left.svg');
    }

    .rnw-heroctl__btn--next {
        -webkit-mask-image: url('../images/renewal/icon/chevron-right.svg');
        mask-image: url('../images/renewal/icon/chevron-right.svg');
    }

    /* 일시정지는 도안이 없어 CSS 로 그린다 (두 줄 → 삼각형) */
    .rnw-heroctl__btn--pause {
        position: relative;
        background: none;
        mask: none;
        -webkit-mask: none;
    }

    .rnw-heroctl__btn--pause::before,
    .rnw-heroctl__btn--pause::after {
        content: '';
        position: absolute;
        top: 5px;
        width: 3px;
        height: 14px;
        background: var(--rnw-ink);
    }

    .rnw-heroctl__btn--pause::before {
        left: 7px;
    }

    .rnw-heroctl__btn--pause::after {
        left: 14px;
    }

    .rnw-heroctl__btn--pause.is-paused::before {
        left: 8px;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 11px solid var(--rnw-ink);
        background: none;
    }

    .rnw-heroctl__btn--pause.is-paused::after {
        display: none;
    }
}

/* 검색 폼을 GNB 줄에서 로고 줄로 옮겼다. 모바일 도면(18:919)에는 검색창이 없고
   돋보기 아이콘이 대신하므로 여기서 다시 감춘다 */
@media (max-width: 1279px) {
    .header-logo__inner .header-search {
        display: none;
    }
}

/* ── PC 헤더 (88:1697 pc-header) ───────────────────────────── */
/* 도면 헤더는 1280 컨테이너가 아니라 좌우 75 여백의 전체 폭을 쓴다.
   로고가 왼쪽, 검색창·장바구니·유저가 오른쪽이다 */
@media (min-width: 1280px) {
    /* .header-logo 에 10px 패딩이 있어 GNB 줄과 10 어긋난다. 두 줄을 같은 축에 세운다 */
    .header-logo {
        padding: 0;
    }

    .header-logo__inner,
    .header-nav {
        max-width: none;
        padding: 0 75px;
    }

    .header-logo__inner {
        justify-content: space-between;
        gap: 15px;
        min-height: 98px;
    }

    .header-logo__link img {
        width: 222px;
        height: 36px;
    }

    /* 우측 묶음 — 검색창 373 + 장바구니 36 + 유저 36, 간격 15 (88:1671) */
    .rnw-header-actions {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* 검색창이 따로 있으니 돋보기 아이콘 버튼은 PC 에서 빼낸다 */
    .rnw-header-actions__btn--search {
        display: none;
    }

    .rnw-header-actions__icon {
        width: 36px;
        height: 36px;
    }

    .rnw-header-actions__badge {
        top: -2px;
        right: -4px;
    }

    .header-logo__inner .header-search {
        flex: none;
        width: 373px;
        height: 56px;
        margin-left: auto;
        padding: 0 25px;
        border-radius: 30px;
    }

    .header-logo__inner .header-search__input {
        flex: 1 0 0;
        min-width: 0;
        font-size: var(--fs-md);
        line-height: 19px;
    }

    .header-logo__inner .header-search__btn img {
        width: 24px;
        height: 24px;
    }

    /* GNB — 61 높이, 좌측부터 (88:1684) */
    .header-nav {
        justify-content: flex-start;
        min-height: 61px;
    }

    /* 도면은 항목이 좌우 75 안에서 고르게 퍼진다 (첫 x75, 마지막 끝 1845).
       GNB 와 메가메뉴가 같은 폭의 칸을 쓰게 해야 카테고리 목록이
       제 이름 아래에 떨어진다. 칸 수는 항목 수를 따라간다 */
    .header-nav__list,
    .mega-menu__cols {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .header-nav__list {
        flex: 1 0 0;
        gap: 0;
    }

    .header-nav__link {
        font-size: var(--fs-base);
        line-height: 25px;
        white-space: nowrap;
    }

    /* 메가메뉴도 헤더와 같은 축(좌우 75)에 세운다 */
    .mega-menu__inner {
        max-width: none;
        padding: 0 75px;
    }

    .mega-menu__cols {
        max-width: none;
        margin: 0;
        padding: 0;
        gap: 0;
        align-items: start;
    }

    /* 제 이름 아래에 떨어지려면 칸 안에서도 GNB 링크와 같은 축(칸 중앙)에
       서야 한다. GNB 링크는 좌우 패딩이 같으므로 여기도 같게 준다 */
    .mega-menu__col {
        min-width: 0;
        padding: 0 4px;
        text-align: center;
    }

    /* 칸 제목은 바로 위 GNB 줄에 이미 같은 이름으로 서 있다. 패널이 열리면
       같은 글자가 두 줄로 겹쳐 보이므로 눈에서만 걷어내고, 세부 카테고리가
       어느 분류에 딸린 것인지 알려야 하니 스크린리더에는 남긴다 */
    .mega-menu__title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .mega-menu__subs a {
        font-size: var(--fs-sm);
        word-break: keep-all;
    }

    /* 구분선은 카테고리 줄과 같은 폭으로 긋는다 (레거시 1060 고정 해제) */
    .mega-menu__rule {
        max-width: none;
        margin: 20px 0;
    }

    /* 커뮤니티 줄은 특정 칸에 딸린 것처럼 보이면 안 된다.
       패널 가운데에 세워 위쪽 카테고리와 축을 다투지 않게 한다 */
    .mega-menu__community {
        padding-left: 0;
        justify-content: center;
    }
}

@media (min-width: 1280px) {
    /* 매장위치 칸을 걷어냈다. 4열 격자는 그대로 두고
       남은 두 블록을 도면처럼 오른쪽에 붙인다 */
    .site-footer__grid > .site-footer__col:nth-child(2) {
        grid-column-start: 3;
    }
}

/* 도면 캔버스 폭에 가까워지면 GNB 글자를 도면 값으로 올린다 */
@media (min-width: 1800px) {
    .header-nav__link {
        font-size: var(--fs-lg);
    }
}

/* ══════════════════════════════════════════════════════════════
   6단계 — 톤 갭 메우기
   도면이 없는 화면들(장바구니·결제·로그인·회원가입·마이페이지 하위 등).
   구조는 건드리지 않고 크기·굵기·여백·색만 리뉴얼 규격에 맞춘다.
   기준은 도면이 있는 고객센터 계열(.rnw-cs-head__title 외):
     제목  모바일 20/700/24 · PC 36/700/48 · #1a1a1a · 가운데
     빈 상태  13px · #999 · 위아래 40
     셀렉트  1px #d9d9d9 · 각진 모서리
   ══════════════════════════════════════════════════════════════ */

/* ── 페이지 제목 ─────────────────────────────────────────────
   화면마다 클래스가 따로 놀아 모바일 18~28px, 좌·가운데 정렬이 섞여 있었다 */
.cart-title,
.chk-page-title,
.join-page__title,
.join-agree-page__title,
.mypage__page-title,
.mypage-page-title__text,
.mypage-content__title,
.mypage__title,
.notice-detail-page__title-h1,
.qna-page__title,
.sitemap-page__title,
.oc-wrap > h1 {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: var(--rnw-ink);
}

@media (min-width: 1280px) {
    .cart-title,
    .chk-page-title,
    .join-page__title,
    .join-agree-page__title,
    .mypage__page-title,
    .mypage-page-title__text,
    .mypage-content__title,
    .mypage__title,
    .notice-detail-page__title-h1,
    .qna-page__title,
    .sitemap-page__title,
    .oc-wrap > h1 {
        font-size: 36px;
        line-height: 48px;
    }
}

/* ── 빈 상태 ────────────────────────────────────────────────
   위아래 40·48·60, 글자 14·상속, 색 #999·#777 로 흩어져 있었다 */
.cart-empty,
.coupon-empty,
.qna-empty,
.notice-cards__empty,
.products-empty,
.chk-addr-book-empty {
    padding: 40px 0;
    font-size: var(--fs-sm);
    text-align: center;
    color: var(--mute-3);
}

/* ── 폼 입력 ────────────────────────────────────────────────
   높이 42·44·47, 테두리 #ccc·#999·#ddd·#eee, 모서리 0·3·5 가 섞여 있었다.
   도면의 상자는 각지고 선이 #d9d9d9 다 (.rnw-cs-select 기준) */
.login-input,
.join-input,
.join-birth-input,
.chk-field input,
.chk-field select,
.profile-row__field,
.profile-birth-input,
.profile-phone-input,
.profile-email-input {
    height: 47px;
    /* join.css 가 min-height 로 47 을 박아 둬서 height 만으로는 눌리지 않는다.
       화면마다 42·44·47 로 갈리던 걸 47 하나로 모은다 */
    min-height: 47px;
    padding: 0 15px;
    border: 1px solid var(--rnw-fill-sheet);
    border-radius: 0;
    background: var(--white);
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--mute-1);
}

.login-input::placeholder,
.join-input::placeholder,
.join-birth-input::placeholder,
.chk-field input::placeholder,
.profile-row__field::placeholder {
    color: var(--mute-3);
}

/* ── 버튼 ───────────────────────────────────────────────────
   도면을 입힌 화면들은 legacy `.btn` 을 그대로 쓴다 — 각진 모서리에
   #333 테두리다. 도면 없는 화면만 모서리 3·30px 이 남아 있었다 */
.join-submit-btn,
.login-btn-submit,
.login-btn-join,
.join-btn,
.chk-pay-btn,
.cart-action-btn {
    border-radius: 0;
}

.login-btn-join,
.join-btn {
    border-color: var(--mute-1);
    color: var(--mute-1);
}

/* ── 모서리 ─────────────────────────────────────────────────
   도면에서 모서리는 세 갈래다.
     썸네일·이미지  5px  (--rnw-radius-thumb)
     상자·버튼·표   0     (탭·셀렉트·목록 행·주문 버튼 모두 각짐)
     배지·알약·원형  그대로 (이벤트 필터 40px, 등급 배지 등)
   도면 없는 화면엔 2·3·4·6·8·10·12px 가 섞여 있었다 */
.cart-img,
.qna-detail__product-img,
.qna-table__product-thumb,
.mypage-wish-item__img,
.wishlist__item-thumb,
.orders-table__thumb,
.order-summary-table__thumb,
.order-product-item__thumb,
.review-modal__media-thumb {
    border-radius: var(--rnw-radius-thumb);
}

.login-adult-gate__exit,
.login-adult-gate__verify,
.login-adult-gate__login,
.adult-verify__btn--primary,
.adult-verify__btn--secondary,
.wishlist__item-cart-add-btn,
.wishlist__item-remove-btn,
.profile-link-btn,
.btn-primary-full,
.btn-ghost-sm,
.btn-outline-full,
.review-list__btn,
.qna-write-btn__link,
.qna-top-bar__write,
.coupon-redeem-form button,
.login-welcome__notice,
.join-promo-banner,
.join-modal,
.qna-detail,
.qna-answer__item,
.orders-table__row,
.notice-card,
.coupon-flash,
.coupon-redeem-form,
.coupon-redeem-form input,
.addr-default-check__box,
.addr-edit-default__box {
    border-radius: 0;
}

/* ── 선 색 ──────────────────────────────────────────────────
   도면 자체도 한 값이 아니다. 역할로 갈리므로 그 갈래를 따른다.
     입력·셀렉트·탭 밑선  #d9d9d9  (--rnw-fill-sheet, 도면 18:1832 셀렉트)
     버튼 테두리          #ddd     (도면 주문 버튼·이벤트 필터)
     목록 행·표·구획      #eee     (--mute-6, 도면 공지 목록 행)
   도면 없는 화면은 이 셋에 #ccc 가 섞여 있었다 */
.qna-form__textarea,
.profile-addr-zip,
.addr-edit-zip,
.addr-edit-row__field,
.addr-edit-phone-input,
.addr-edit-email-local,
.addr-edit-message-select,
.points-filter__period-wrap select {
    border-color: var(--rnw-fill-sheet);
}

.login-adult-gate__exit,
.login-adult-gate__login,
.adult-verify__btn--secondary,
.mypage-profile__avatar-btn,
.mypage-profile__grade-badge,
.mypage-point__row-btn,
.orders-table__review-view-btn,
.profile-link-btn,
.btn-ghost-sm,
.btn-outline-full,
.review-list__btn {
    border-color: #ddd;
}

.login-form-body,
.join-card,
.join-phone-box,
.profile-box,
.addr-edit-box,
.grade-guide__card,
.points-filter__tabs,
.points-filter__tab,
.points-table__head,
.points-table__body,
.points-table__col--amount {
    border-color: var(--mute-6);
}

/* 모달은 모바일에서 바텀시트로 뜬다. 도면 바텀시트 상단은 20px 다 */
.qna-modal,
.review-modal__box {
    border-radius: 0;
}

@media (max-width: 1279px) {
    .qna-modal,
    .review-modal__box {
        border-radius: var(--rnw-radius-sheet) var(--rnw-radius-sheet) 0 0;
    }
}

/* ── 섹션 제목 ──────────────────────────────────────────────
   도면의 섹션 제목은 모바일 18 · PC 24, 굵기 700, #1a1a1a 다
   (.rnw-sec-head__title 홈 섹션 머리, .rnw-cs__title 고객센터 블록).
   블록 안 소제목은 16 인데(.rnw-review__title 등) 도면 없는 화면엔
   그 층위가 없다. 도면 없는 화면은 14·18·20·24px 에 굵기도 500·600·700
   으로 갈려 있었다 */
.login-section__title,
.join-section__title,
.profile-section__title,
.addr-list-section__heading,
.grade-guide__heading,
.chk-section > h2 {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: normal;
    color: var(--rnw-ink);
}

@media (min-width: 1280px) {
    .login-section__title,
    .join-section__title,
    .profile-section__title,
    .addr-list-section__heading,
    .grade-guide__heading,
    .chk-section > h2 {
        font-size: var(--fs-3xl);
    }
}

/* ── 마이페이지 본문 폭 ─────────────────────────────────────
   두 래퍼 모두 `align-items: flex-start` 로 열려 있는데 모바일 오버라이드가
   방향만 세로로 바꾸고 이 값을 안 건드린다. 세로 flex 에서 flex-start 는
   자식을 내용 폭으로 줄여서, 가운데 정렬한 제목이 화면 왼쪽으로 몰렸다
   (적립금·쿠폰·찜·등급 130px 안팎, 내 게시물 39px) */
@media (max-width: 1279px) {
    .mypage-layout,
    .mypage__layout {
        align-items: stretch;
    }

    /* 제목 상자도 같은 이유로 글자 폭까지 줄어 있었다.
       (mypage.css 는 모바일에서 제목을 왼쪽에 붙이려고 flex-start 를 준다) */
    .mypage-page-title {
        align-items: stretch;
    }
}

/* ── 대시보드·주문 계열 PC 제목 ─────────────────────────────
   이 세 화면은 제목이 공용 껍데기 하나뿐이라, PC 에서 껍데기를 감추는
   기본 규칙에 걸려 제목이 통째로 사라져 있었다. 다른 마이페이지 화면과
   같은 규격(36/700, 본문 칸 가운데)으로 세운다 */
@media (min-width: 1280px) {
    .rnw-my-page .rnw-cs-head,
    .rnw-order-page .rnw-cs-head,
    .rnw-oddetail-page .rnw-cs-head {
        display: flex;
        justify-content: center;
        padding: 0 0 30px;
    }

    .rnw-my-page .rnw-cs-head__back,
    .rnw-my-page .rnw-cs-head__spacer,
    .rnw-order-page .rnw-cs-head__back,
    .rnw-order-page .rnw-cs-head__spacer,
    .rnw-oddetail-page .rnw-cs-head__back,
    .rnw-oddetail-page .rnw-cs-head__spacer {
        display: none;
    }

    .rnw-my-page .rnw-cs-head__title,
    .rnw-order-page .rnw-cs-head__title,
    .rnw-oddetail-page .rnw-cs-head__title {
        font-size: 36px;
        line-height: 48px;
    }
}

/* 결제수단 선택 탭의 선택 상태만 #ccc 로 남아 있었다.
   도면은 선택된 탭을 검정으로 표시한다 */
.chk-pay-tabs button.is-active {
    border-color: var(--rnw-ink);
}