@charset "utf-8";
/* 모두의쇼핑 2026-10 개편. mall.css·mall-pc.css 뒤에 실려 색·글꼴·형태를 바꿈.
   컨셉은 브랜드 정품 아울렛. 남색 고정 사이드바 + 흰 매장 + 코발트 가격표.
   인싸몰(상단 메뉴, 토마토·노랑, 둥근 알약)과 겹치지 않게 각진 모서리와 남색·코발트 두 가지만 씀 */

:root {
    --navy: #0e1a3d;
    --navy-2: #172759;
    --navy-3: #22357a;
    --cobalt: #2450f5;
    --cobalt-dk: #1a3bd1;
    --cobalt-lt: #8fa6ff;
    --sky: #eaf0ff;
    --ice: #f5f7fb;
    --mv-en: 'Archivo', 'Pretendard', sans-serif;
    --side-w: 236px;
    --gutter: 40px;
    --content-max: 1360px;
    --radius: 8px;

    /* mall.css 토큰 재매핑. 명조는 쓰지 않음 */
    --paper: #ffffff;
    --ink: #101828;
    --ink-soft: #4a5468;
    --ink-mute: #8b94a7;
    --line: #e2e7f0;
    --sand: #f5f7fb;
    --sand-deep: #ebeff6;
    --cobalt-tint: #eaf0ff;
    --font-serif: 'Pretendard', sans-serif;
    --main-600: #2450f5 !important;
    --main-500: #2450f5 !important;
    --main-400: #8fa6ff !important;
    --main-200: #f5f7fb !important;
    --linear-900: linear-gradient(#2450f5, #2450f5) !important;
    --linear-800: linear-gradient(#2450f5, #2450f5) !important;
}

body.du-body { font-size: 15px; letter-spacing: -0.3px; color: var(--ink); }
.du-body .mi { flex: none; }
.mv-mark { width: 38px; height: 38px; display: block; flex: none; }

/* ─── 사이드바 (남색) ─── */
.du-side {
    background: var(--navy); border-right: 0; color: #fff; padding: 24px 0 18px;
    scrollbar-color: var(--navy-3) transparent;
}
.du-side-head { padding: 0 20px; align-items: center; }
/* 로고는 마름모 + 한 줄 글자. 인싸몰의 두 줄(한글 위 영문) 짜임과 섞지 말 것 */
.du-logo { flex-direction: row; align-items: center; gap: 9px; }
.du-word { font-family: 'Pretendard', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -0.06em; line-height: 1; color: #fff; white-space: nowrap; }
.du-word em { font-style: normal; font-weight: inherit; color: var(--cobalt-lt); }
.du-body a.du-logo .du-word { color: #fff; }
.du-body a.du-logo .du-word em { color: var(--cobalt-lt); }
.du-side-close { color: #fff; }
.du-side-tag { display: none; }

.du-search { margin: 22px 20px 4px; }
.du-search input {
    height: 44px; padding: 0 48px 0 14px; border: 0; border-radius: var(--radius);
    background: #fff; color: var(--ink); font-size: 14px;
}
.du-search input::placeholder { color: var(--ink-mute); }
.du-search button { right: 5px; width: 34px; height: 34px; border-radius: 6px; background: var(--cobalt); color: #fff; }
.du-search button:hover { background: var(--cobalt-dk); }

.du-side-label { margin: 24px 20px 10px; font-size: 13px; font-weight: 700; letter-spacing: -0.2px; color: #fff; }
.du-side-label span { display: block; margin-bottom: 3px; font-family: var(--mv-en); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: var(--cobalt-lt); }
.du-catnav ul { padding: 0 10px; }
.du-catnav a {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius);
    font-size: 14px; color: rgba(255, 255, 255, .78);
}
.du-catnav a .mi { color: rgba(255, 255, 255, .5); }
.du-catnav a em {
    min-width: 26px; padding: 2px 7px; border-radius: 999px; box-sizing: border-box; text-align: center;
    background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .55);
    font-family: var(--mv-en); font-size: 11px; font-weight: 600;
}
.du-catnav a:hover { background: var(--navy-2); color: #fff; }
.du-catnav a:hover .mi { color: #fff; }
.du-catnav a.is-on { background: var(--cobalt); color: #fff; font-weight: 700; }
.du-catnav a.is-on::before { display: none; }
.du-catnav a.is-on .mi { color: #fff; }
.du-catnav a.is-on em { background: rgba(255, 255, 255, .2); color: #fff; }

.du-side-cs { margin: 20px 20px 0; padding: 16px 16px 14px; border-radius: 10px; background: var(--navy-2); }
.du-side-cs p { margin: 0 0 4px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.du-side-cs b { display: block; font-family: var(--mv-en); font-size: 23px; font-weight: 800; letter-spacing: 0; color: #fff; }
.du-side-cs span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); }
.du-side-cs a { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--cobalt-lt); text-decoration: none; }
.du-side-cs a:hover { color: #fff; }
.du-side-foot { margin: auto 20px 0; color: rgba(255, 255, 255, .6); }
.du-side-foot a { color: rgba(255, 255, 255, .7); }
.du-side-foot a:hover { color: #fff; }
.du-side-foot span { color: #fff; }

/* ─── 본문 위 헤더 ─── */
.du-util { display: none; }
.du-top {
    position: sticky; top: 0; z-index: 110;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    height: 72px; padding: 0 var(--gutter);
    background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--line);
}
.du-gnb { display: flex; align-items: center; gap: 30px; height: 100%; }
.du-gnb a { position: relative; display: flex; align-items: center; height: 100%; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.4px; }
.du-gnb a:hover { color: var(--cobalt); }
.du-gnb a.is-on { color: var(--cobalt); }
.du-gnb a.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--cobalt); }
.du-top-user { display: flex; align-items: center; gap: 18px; }
.du-top-user .txt { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.du-top-user .txt b { color: var(--ink); }
.du-top-user .txt:hover { color: var(--ink); }
.du-top-user .join { color: var(--cobalt); font-weight: 700; }
.du-top-user .ico { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: 4px; font-size: 11px; color: var(--ink-soft); text-decoration: none; }
.du-top-user .ico .mi { color: var(--ink); }
.du-top-user .ico:hover, .du-top-user .ico.is-on { color: var(--cobalt); }
.du-top-user .ico:hover .mi, .du-top-user .ico.is-on .mi { color: var(--cobalt); }
.du-top-user .ico .du-cnt { position: absolute; top: -6px; right: 2px; }
.du-cnt { background: var(--cobalt); font-family: var(--mv-en); }

/* ─── 공통 부품 ─── */
.mv-eyebrow { margin: 0 0 10px; font-family: var(--mv-en); font-size: 12px; font-weight: 700; letter-spacing: 0.24em; color: var(--cobalt); }
.mv-sec { margin-top: 76px; }
.mv-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.mv-sec-head h2 { margin: 0; font-family: 'Pretendard', sans-serif; font-size: 30px; font-weight: 900; letter-spacing: -0.05em; line-height: 1.2; color: var(--ink); }
.mv-sec-head .mv-eyebrow { margin-bottom: 6px; }
.mv-sec-note { margin: 0; font-size: 13px; color: var(--ink-mute); }
.mv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-tabs button {
    height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
    transition: all .15s ease;
}
.mv-tabs button:hover { border-color: var(--navy); color: var(--ink); }
.mv-tabs button.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.mv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; padding: 0 26px; border-radius: var(--radius); border: 1px solid transparent;
    font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .15s ease, background-color .15s ease;
}
.mv-btn:hover { transform: translateY(-1px); }
.mv-btn-white { background: #fff; color: var(--cobalt) !important; }
.mv-btn-cobalt { background: var(--cobalt); color: #fff !important; }
.mv-btn-cobalt:hover { background: var(--cobalt-dk); }
.mv-btn-navy { background: var(--navy); color: #fff !important; }
.mv-btn-line { background: #fff; color: var(--ink) !important; border-color: var(--ink); height: 44px; }
.du-more { color: var(--ink-soft) !important; font-weight: 600; }
.du-more:hover { color: var(--cobalt) !important; }

/* 기존 버튼도 새 색으로 */
.du-btn { border-radius: var(--radius); font-weight: 700; }
.du-btn-ink { background: var(--navy); }
.du-btn-ink:hover { background: #000; }
.du-btn-cobalt { background: var(--cobalt); }
.du-btn-cobalt:hover { background: var(--cobalt-dk); }
.du-btn-line { border-color: var(--ink); }
.du-btn-line:hover, .du-btn-paper:hover { background: var(--ice); }

/* ─── 상품 카드 ─── */
.du-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.du-card:hover { border-color: var(--cobalt); box-shadow: 0 14px 30px rgba(16, 24, 40, .09); transform: translateY(-3px); }
.du-plate { background: #fff; border-radius: 0; }
.du-plate img { padding: 9%; mix-blend-mode: normal; }
.du-card:hover .du-plate img { transform: scale(1.05); }
.du-card-body { padding: 14px 16px 18px; border-top: 1px solid var(--line); }
.du-brand { margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--ink-mute); }
.du-name { font-size: 14px; line-height: 1.45; color: var(--ink); }
.du-card:hover .du-name { text-decoration: none; }
.du-price { margin-top: 10px; align-items: baseline; font-size: 13px; font-weight: 700; color: var(--ink); }
.du-price b { font-family: var(--mv-en); font-size: 21px; font-weight: 800; letter-spacing: -0.2px; color: var(--cobalt); margin-right: 1px; }
.du-price em { color: var(--cobalt); font-family: var(--mv-en); }
.du-rank { min-width: 34px; height: 34px; background: var(--navy); font-family: var(--mv-en); font-size: 15px; font-weight: 800; border-radius: 0 0 10px 0; }
.du-tag { position: absolute; right: 10px; top: 10px; z-index: 1; padding: 4px 8px; border-radius: 4px; background: var(--cobalt); color: #fff; font-family: var(--mv-en); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.du-soldout { background: rgba(14, 26, 61, .55); color: #fff; font-family: var(--mv-en); }
.du-remain { color: var(--cobalt); font-weight: 600; }
.du-grid { gap: 22px 18px; }
.du-grid-5 { gap: 22px 16px; }
.du-grid-list { gap: 24px 18px; }

/* ─── 홈: 배너 모자이크 ─── */
.mv-hero { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; margin-top: 28px; }
.mv-hero-main { position: relative; min-width: 0; border-radius: 18px; overflow: hidden; }
.mv-slide {
    position: relative; height: 460px; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px;
    padding: 0 56px; color: #fff; overflow: hidden;
}
.mv-slide-cobalt { background: radial-gradient(circle at 76% 46%, #4a6dff 0, #2450f5 46%, #1c41db 100%); }
.mv-slide-navy { background: radial-gradient(circle at 80% 40%, #233a86 0, #0e1a3d 62%); }
.mv-slide-sky { background: var(--sky); color: var(--navy); }
.mv-slide-copy { position: relative; z-index: 2; padding-bottom: 46px; }
.mv-slide .mv-eyebrow { color: var(--cobalt-lt); }
.mv-slide-sky .mv-eyebrow { color: var(--cobalt); }
.mv-slide-copy h2 { margin: 0 0 18px; font-family: 'Pretendard', sans-serif; font-size: 46px; font-weight: 900; line-height: 1.17; letter-spacing: -0.06em; }
.mv-slide-copy p { margin: 0 0 30px; font-size: 15.5px; line-height: 1.65; opacity: .86; }
.mv-slide-art { position: relative; height: 100%; }
/* 1장: 흰 받침 위 최저가 상품 + 가격표 세 장 */
.mv-pedestal {
    position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%);
    border-radius: 50%; background: #fff; box-shadow: 0 30px 60px rgba(8, 20, 80, .3); display: block;
}
.mv-pedestal img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.mv-pricetag {
    position: absolute; z-index: 2; display: inline-flex; align-items: baseline; gap: 6px;
    padding: 11px 18px 11px 30px; background: #fff; color: var(--navy) !important; text-decoration: none;
    font-size: 14px; font-weight: 700; white-space: nowrap;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
    box-shadow: 0 10px 24px rgba(8, 20, 80, .25);
}
.mv-pricetag::before { content: ''; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--cobalt); }
.mv-pricetag i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--cobalt); }
.mv-pricetag b { font-family: var(--mv-en); font-size: 22px; font-weight: 800; color: var(--navy); }
.mv-pricetag.t1 { right: 2%; top: 64px; transform: rotate(4deg); }
.mv-pricetag.t2 { left: 0; bottom: 96px; transform: rotate(-5deg); }
.mv-pricetag.t3 { right: 8%; bottom: 46px; transform: rotate(2deg); }
/* 2장: 흰 카드 세 장 */
.mv-art-cards { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mv-art-card { width: 32%; max-width: 190px; background: #fff; border-radius: 14px; overflow: hidden; text-decoration: none; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); }
.mv-art-card.c2 { transform: translateY(-26px); }
.mv-art-card.c3 { transform: translateY(14px); }
.mv-art-card .img { display: block; aspect-ratio: 1 / 1; background: #fff; }
.mv-art-card .img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; }
.mv-art-card .txt { display: block; padding: 10px 12px 13px; border-top: 1px solid var(--line); }
.mv-art-card .txt i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-art-card .txt b { font-family: var(--mv-en); font-size: 17px; font-weight: 800; color: var(--cobalt); }
/* 3장: 계단식 흰 판 */
.mv-stair { position: absolute; display: block; background: #fff; border-radius: 16px; box-shadow: 0 20px 44px rgba(14, 26, 61, .14); text-decoration: none; }
.mv-stair img { width: 100%; height: 100%; object-fit: contain; padding: 12%; box-sizing: border-box; }
.mv-stair b { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 6px; background: var(--navy); color: #fff; font-family: var(--mv-en); font-size: 13px; font-weight: 800; }
.mv-stair.s1 { width: 240px; height: 240px; left: 4%; top: 80px; }
.mv-stair.s2 { width: 190px; height: 190px; left: 46%; top: 40px; }
.mv-stair.s3 { width: 170px; height: 170px; left: 54%; top: 250px; }
.mv-hero-ctrl {
    position: absolute; left: 56px; bottom: 30px; z-index: 5;
    display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
    background: rgba(14, 26, 61, .78); color: #fff;
}
.mv-hero-ctrl button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.mv-hero-ctrl button:hover { background: rgba(255, 255, 255, .16); }
.mv-hero-count { display: inline-flex; gap: 5px; padding: 0 6px; font-family: var(--mv-en); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.mv-hero-count i, .mv-hero-count span { font-style: normal; opacity: .55; }

.mv-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
.mv-promo { position: relative; display: block; padding: 24px 26px; border-radius: 18px; overflow: hidden; text-decoration: none; transition: transform .2s ease; }
.mv-promo:hover { transform: translateY(-2px); }
.mv-promo h3 { margin: 0 0 14px; font-family: 'Pretendard', sans-serif; font-size: 23px; font-weight: 900; letter-spacing: -0.05em; }
.mv-promo-brand { background: var(--navy); color: #fff; }
.mv-promo-brand .mv-eyebrow { color: var(--cobalt-lt); }
.mv-promo-brand ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mv-promo-brand li { padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; font-size: 13px; color: rgba(255, 255, 255, .9); }
.mv-promo-brand .go { position: absolute; left: 26px; bottom: 22px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--cobalt-lt); }
.mv-promo-top { display: grid; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; gap: 14px; background: var(--sky); color: var(--navy); }
.mv-promo-top .nm { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mv-promo-top .pr { margin: 6px 0 0; font-size: 14px; font-weight: 700; }
.mv-promo-top .pr b { font-family: var(--mv-en); font-size: 28px; font-weight: 800; color: var(--cobalt); }
.mv-promo-top .img { display: block; width: 118px; height: 118px; border-radius: 14px; background: #fff; overflow: hidden; }
.mv-promo-top .img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; }

/* ─── 홈: 최저가 랭킹 보드 ─── */
.mv-rank { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; }
.mv-rank-top {
    display: flex; flex-direction: column; padding: 24px; border-radius: 18px;
    background: var(--navy); color: #fff; text-decoration: none; position: relative;
}
.mv-rank-top .no { font-family: var(--mv-en); font-size: 60px; font-weight: 900; line-height: .9; color: var(--cobalt-lt); letter-spacing: -2px; }
.mv-rank-top .img { display: block; margin: 16px 0 18px; aspect-ratio: 1 / 1; border-radius: 14px; background: #fff; overflow: hidden; }
.mv-rank-top .img img { width: 100%; height: 100%; object-fit: contain; padding: 11%; box-sizing: border-box; transition: transform .3s ease; }
.mv-rank-top:hover .img img { transform: scale(1.05); }
.mv-rank-top .info i { display: block; font-style: normal; font-size: 13px; color: var(--cobalt-lt); }
.mv-rank-top .nm { display: block; margin-top: 4px; font-size: 17px; font-weight: 700; line-height: 1.45; }
.mv-rank-top .pr { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; }
.mv-rank-top .pr b { font-family: var(--mv-en); font-size: 32px; font-weight: 800; }
.mv-rank-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mv-rank-list a {
    display: grid; grid-template-columns: 30px 88px minmax(0, 1fr); align-items: center; gap: 12px;
    height: 100%; box-sizing: border-box; padding: 12px 14px 12px 12px;
    border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mv-rank-list a:hover { border-color: var(--cobalt); box-shadow: 0 10px 24px rgba(16, 24, 40, .07); }
.mv-rank-list .no { font-family: var(--mv-en); font-size: 20px; font-weight: 800; color: var(--navy); text-align: center; }
.mv-rank-list .img { width: 88px; height: 88px; border-radius: 10px; background: var(--ice); overflow: hidden; }
.mv-rank-list .img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; mix-blend-mode: multiply; }
.mv-rank-list .info { min-width: 0; }
.mv-rank-list .info i { display: block; font-style: normal; font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-rank-list .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13.5px; font-weight: 500; line-height: 1.42; }
.mv-rank-list .pr { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; }
.mv-rank-list .pr b { font-family: var(--mv-en); font-size: 17px; font-weight: 800; color: var(--cobalt); }

/* ─── 홈: 브랜드관 ─── */
.mv-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mv-brands a {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
    min-height: 120px; padding: 20px 18px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}
.mv-brands b { font-family: var(--mv-en), 'Pretendard', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.3px; color: var(--navy); word-break: keep-all; }
.mv-brands span { font-size: 12px; color: var(--ink-mute); padding-right: 18px; }
.mv-brands .mi { position: absolute; right: 16px; bottom: 18px; color: var(--ink-mute); }
.mv-brands a:hover { background: var(--navy); border-color: var(--navy); }
.mv-brands a:hover b, .mv-brands a:hover .mi { color: #fff; }
.mv-brands a:hover span { color: rgba(255, 255, 255, .65); }

/* ─── 홈: 신상품 가로 넘김 ─── */
.mv-rail-ctrl { display: flex; align-items: center; gap: 8px; }
.mv-rail-ctrl .du-more { margin-right: 6px; }
.mv-rail-ctrl button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.mv-rail-ctrl button:hover { border-color: var(--navy); }
.mv-rail-ctrl button.swiper-button-disabled { opacity: .35; cursor: default; }
.mv-rail-swiper { overflow: hidden; padding: 4px 2px 10px; margin: -4px -2px 0; }
.mv-rail-swiper .swiper-slide { height: auto; }
.mv-rail-swiper .du-card { height: 100%; }

/* ─── 홈: 카테고리별 최저가 ─── */
.du-catgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.du-cattile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.du-cattile:hover { border-color: var(--cobalt); box-shadow: 0 12px 26px rgba(16, 24, 40, .08); }
.du-cattile-plate { background: var(--ice); border-radius: 0; }
.du-cattile-plate img { mix-blend-mode: multiply; }
.du-cattile-name { display: flex; align-items: center; gap: 6px; padding: 12px 14px 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.du-cattile-name .mi { color: var(--cobalt); }
.du-cattile-name em { margin-left: auto; font-family: var(--mv-en); font-style: normal; font-size: 11px; color: var(--ink-mute); }
.du-cattile-price { padding: 4px 14px 14px; font-size: 12.5px; color: var(--ink-soft); }
.du-cattile-price b { font-family: var(--mv-en); font-size: 17px; font-weight: 800; color: var(--cobalt); }

.mv-empty { padding: 56px 24px; text-align: center; border: 1px dashed #cdd5e4; border-radius: 18px; background: var(--ice); color: var(--ink-soft); }
.mv-empty .mi { color: var(--cobalt); }
.mv-empty .t { margin: 12px 0 6px; font-size: 18px; font-weight: 800; color: var(--ink); }
.mv-empty p { margin: 0 0 4px; font-size: 14px; }
.mv-empty .mv-btn { margin-top: 18px; }

/* ─── 푸터 ─── (아래 "푸터 v3" 블록에 있음) */

/* ─── 목록 ─── */
.du-pagehead-list { margin: 28px 0 24px; padding: 30px 36px; border: 0; border-radius: 18px; background: var(--sky); }
.du-pagehead-list h1, .du-pagehead h1 { font-family: 'Pretendard', sans-serif; font-weight: 900; letter-spacing: -0.05em; color: var(--navy); }
.du-pagehead-list h1 { font-size: 34px; }
.du-pagehead { border-bottom-color: var(--navy); }
.du-crumb a { color: var(--ink-soft); }
.du-toolbar { border-bottom: 2px solid var(--navy); padding-bottom: 14px; }
.du-total b { font-family: var(--mv-en); color: var(--cobalt); }
.du-sort a.is-on { color: var(--navy); font-weight: 800; }
.du-pager a, .du-pager span, .du-pager button { border-radius: var(--radius); }
.du-pager .is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ─── 상세 ─── */
.du-gallery .du-plate, .du-gallery-thumbs .du-plate { border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.du-buy-brand { color: var(--cobalt); font-weight: 700; }
.du-buy-name { font-family: 'Pretendard', sans-serif; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.du-buy-price b { font-family: var(--mv-en); font-weight: 800; color: var(--cobalt); letter-spacing: -0.5px; }
.du-buy-btns .du-btn { height: 58px; font-size: 16px; }
.du-dtabs { border-bottom: 2px solid var(--navy); }
.du-dtabs a.is-on, .du-dtabs button.is-on { color: var(--navy); font-weight: 800; }
.du-dsec-head h2 { font-family: 'Pretendard', sans-serif; font-weight: 900; letter-spacing: -0.04em; }

/* ─── 마이페이지·장바구니 ─── */
.du-mymenu-title { font-family: 'Pretendard', sans-serif; font-weight: 900; letter-spacing: -0.05em; border-bottom-color: var(--navy); }
.du-mymenu a.is-on { color: var(--cobalt); }
.du-my-head { border-radius: 16px; }
.du-steps .is-on, .du-steps li.on { color: var(--navy); }
.du-cart-side, .du-summary { border-radius: 16px; }

/* ─── 반응형 ─── */
@media (max-width: 1440px) {
    .mv-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mv-rank { grid-template-columns: 330px minmax(0, 1fr); }
    .mv-rank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mv-rank-list > li:nth-child(n+7) { display: none; }
}
@media (max-width: 1280px) {
    :root { --gutter: 28px; }
    .mv-hero { grid-template-columns: 1fr; }
    .mv-hero-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .mv-promo-brand { min-height: 190px; }
    .du-gnb { gap: 22px; }
    .du-top-user .txt { display: none; }
    .du-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    :root { --gutter: 20px; }
    /* mall.css 의 header:not(.header-home) 가 더 강해서 같은 강도로 숨김 */
    header.du-top { display: none; }
    .du-mbar { background: #fff; }
    .du-mbar-logo { display: inline-flex; align-items: center; gap: 7px; }
    .du-mbar-logo .mv-mark { width: 28px; height: 28px; }
    .du-body a.du-mbar-logo .du-word { font-size: 19px; color: var(--navy); }
    .du-body a.du-mbar-logo .du-word em { color: var(--cobalt); }
    .du-side { width: min(300px, 84vw); }
    .mv-slide { height: 400px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 0 32px; }
    .mv-slide-copy h2 { font-size: 34px; }
    /* 태블릿은 오른쪽 그림을 줄여서 남김. 폰에서만 숨김 */
    .mv-slide-art { transform: scale(.78); transform-origin: center; }
    .mv-hero-ctrl { left: 26px; bottom: 26px; }
    .mv-rank { grid-template-columns: 1fr; }
    .mv-rank-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 18px; align-items: center; }
    .mv-rank-top .no { grid-column: 1 / -1; font-size: 40px; }
    .mv-rank-top .img { margin: 12px 0 0; }
    .mv-rank-list > li:nth-child(n+7) { display: block; }
}
@media (max-width: 640px) {
    .mv-sec { margin-top: 56px; }
    .mv-sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .mv-sec-head h2 { font-size: 24px; }
    .mv-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .mv-tabs button { flex: none; height: 34px; padding: 0 13px; font-size: 13px; }
    .mv-hero { margin-top: 16px; }
    .mv-hero-main { border-radius: 14px; }
    .mv-slide { height: auto; grid-template-columns: 1fr; padding: 34px 24px 88px; }
    .mv-slide-copy { padding-bottom: 0; }
    .mv-slide-art { display: none; }
    .mv-slide-copy h2 { font-size: 27px; }
    .mv-slide-copy p { font-size: 14px; margin-bottom: 22px; }
    .mv-hero-side { grid-template-columns: 1fr; }
    .mv-rank-top { grid-template-columns: 110px minmax(0, 1fr); padding: 18px; }
    .mv-rank-top .pr b { font-size: 24px; }
    .mv-rank-list { grid-template-columns: 1fr; }
    .mv-rank-list a { grid-template-columns: 26px 72px minmax(0, 1fr); }
    .mv-rank-list .img { width: 72px; height: 72px; }
    .mv-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mv-brands a { min-height: 100px; padding: 16px; }
    .mv-brands b { font-size: 16px; }
    .du-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .du-pagehead-list { padding: 22px 20px; border-radius: 14px; }
    .du-pagehead-list h1 { font-size: 26px; }
    .du-card-body { padding: 12px 12px 14px; }
    .du-price b { font-size: 17px; }
}

/* 링크로 만든 카드는 기존 .du-body a { color: inherit } 보다 강하게 색을 줘야 흰 글자가 살아남 */
.du-body a.mv-promo-brand, .du-body a.mv-rank-top { color: #fff; }
.du-body a.mv-promo-brand h3, .du-body a.mv-rank-top .nm, .du-body a.mv-rank-top .pr, .du-body a.mv-rank-top .pr b { color: #fff; }
.du-body a.mv-promo-top, .du-body a.mv-promo-top h3 { color: var(--navy); }
.du-body a.mv-brands-item, .du-body .mv-brands a { color: var(--navy); }
.du-body a.mv-pricetag { color: var(--navy); }
.du-body .mv-slide { color: #fff; }
.du-body .mv-slide-sky { color: var(--navy); }
.du-body .mv-slide h2 { color: inherit; }
body.du-body .is__bng.du-content { padding-bottom: 88px; }
.mv-art-card .txt b { display: block; font-size: 15px; white-space: nowrap; }
.mv-promo-top h3 { font-size: 21px; white-space: nowrap; }
.du-catnav a { padding: 7px 10px; font-size: 13.5px; }
.du-cattile-name { justify-content: flex-start; }
.du-cattile-name em { margin-left: auto; }

/* ─── 푸터 v3. 인싸몰(흰 바탕, 링크 줄 + 세 칸 안내)과 다르게 고객센터 띠 + 사이트맵 + 사업자 줄 ─── */
footer.du-foot { margin: 0; padding: 0; background: var(--navy); color: rgba(255, 255, 255, .66); border-top: 0; }
.du-foot .popup, .du-foot .popup .cont { color: var(--ink); }
.du-foot-cs {
    display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); align-items: center; gap: 32px;
    padding: 30px var(--gutter); background: var(--cobalt); color: #fff;
}
.du-foot-cs .mv-eyebrow { color: rgba(255, 255, 255, .7); margin-bottom: 6px; }
.du-foot-cs-tel b { display: block; font-family: var(--mv-en); font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: 0; color: #fff; }
.du-foot-cs-tel span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.du-foot-cs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.du-body .du-foot-cs-tiles a {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
    padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.du-foot-cs-tiles .mi { grid-row: span 2; color: #fff; }
.du-foot-cs-tiles b { font-size: 15px; font-weight: 800; }
.du-foot-cs-tiles span { font-size: 12px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-body .du-foot-cs-tiles a:hover { background: #fff; color: var(--navy); }
.du-foot-cs-tiles a:hover .mi { color: var(--cobalt); }
.du-foot-cs-tiles a:hover span { color: var(--ink-mute); }

.du-foot-map { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding: 44px var(--gutter) 40px; }
.du-foot-brand p { margin: 14px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
.du-foot-facts { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.du-foot-facts li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.du-foot-facts .mi { color: var(--cobalt-lt); }
.du-foot-col { display: flex; flex-direction: column; gap: 10px; }
.du-foot .du-foot-col h2 { margin: 0 0 6px; font-family: var(--mv-en); font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--cobalt-lt); }
.du-body .du-foot-col a { font-size: 14px; color: rgba(255, 255, 255, .78); text-decoration: none; }
.du-body .du-foot-col a b { color: #fff; }
.du-body .du-foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.du-foot-legal { padding: 22px var(--gutter) 34px; background: #091331; border-top: 1px solid rgba(255, 255, 255, .06); }
.du-foot-legal .co { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12.5px; line-height: 1.8; color: rgba(255, 255, 255, .5); }
.du-foot-legal .co b { margin-right: 14px; color: rgba(255, 255, 255, .85); font-weight: 700; }
.du-foot-legal .co span + span::before { content: ''; display: inline-block; width: 1px; height: 10px; margin: 0 12px; background: rgba(255, 255, 255, .18); vertical-align: middle; }
.du-foot-legal .copy { margin: 10px 0 0; font-family: var(--mv-en); font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .38); }
body.du-body .is__bng.du-content { padding-bottom: 96px; }

@media (max-width: 1280px) {
    .du-foot-cs { grid-template-columns: 1fr; gap: 18px; }
    .du-foot-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .du-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .du-foot-cs { padding: 26px 20px; }
    .du-foot-cs-tel b { font-size: 30px; }
    .du-foot-cs-tiles { grid-template-columns: 1fr 1fr; }
    .du-body .du-foot-cs-tiles a { padding: 14px; }
    .du-foot-map { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 32px 20px; }
    .du-foot-legal { padding: 20px; }
    .du-foot-legal .co span { display: block; width: 100%; }
    .du-foot-legal .co span + span::before { display: none; }
}

/* 결제하기에서 배송 메시지를 안 골랐을 때 그 칸을 짚어 줌 */
.du-body select.receiver_message_select.is-error { border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, .16); }