@charset "utf-8";

/*
* vw 단위 사용법
* 80px => calc(80 * var(--vw));
*/

.imc { --vw: 0.625px; } /* 1920px 기준 */
@media screen and (min-width: 1200px) {
    .imc { --vw: 0.052083333vw; }
}

/* =========================================================
 * NKBACKTOSCHOOLWEEK (백투스쿨 위크) - PC
 * 색상: text #373b32 / accent #6d994b(백투스쿨 그린) / grey #8f959b / imgBg #bcbfc1 / bg #fff
 * 폰트: 본문 Noto Sans KR / 영문·숫자 ProximaNova(.en) / 헤드라인 ITCGaramondStd
 * ========================================================= */

.sr {
  --c-text: #373b32;
  --c-accent: #6d994b;
  --c-darkgreen: #142c1a;
  --c-grey: #8f959b;
  --c-imgbg: #bcbfc1;
  --c-bg: #ffffff;
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
.sr * { box-sizing: border-box; }
.sr img { display: block; max-width: 100%; }
.sr .en { font-family: 'ProximaNova', 'Noto Sans KR', sans-serif; }
.sr section { width: 100%; }
/* 빠른도착(딜리박스) 아이콘 : megaWeek DeliBoxYn === 'Y' 상품 가격 아래 노출 (bf2026_common 미로드 → 발췌 복사, [NB2024-12471]) */
.sr .text_icon_delibox { display: inline-block; margin: 0; padding-left: calc(28 * var(--vw)); background: url("https://image.nbkorea.com/NBRB_PC/common/icon_nb_dbox_25px.svg") no-repeat 0 center; background-size: calc(22 * var(--vw)) auto; font-family: 'Noto Sans KR', sans-serif; font-size: calc(14 * var(--vw)); font-weight: 400; line-height: calc(18 * var(--vw)); letter-spacing: calc(-0.7 * var(--vw)); color: #CF0A2C; white-space: nowrap; }

/* ---------- 스티키 탭 (섹션 이동 네비, 스크롤 고정) : 슈즈위크 tabBar 패턴 ---------- */
/* top:106px = 사이트 고정 헤더 높이 (슈즈위크 동일). 탭 5개 → width/line 20% */
.tabBar__container { z-index: 11; position: sticky; top: 106px; left: 0; background-color: var(--c-darkgreen); }
.tabBar__container .tabBar__inner { position: relative; display: flex; width: calc(1500 * var(--vw)); margin: 0 auto; }
.tabBar__container .tabBar__title { width: 20%; height: calc(50 * var(--vw)); display: flex; justify-content: center; align-items: center; font-family: 'Noto Sans KR', sans-serif; font-size: calc(18 * var(--vw)); font-weight: 700; letter-spacing: calc(-0.9 * var(--vw)); color: rgba(255, 255, 255, 0.6); transition: 0.3s; cursor: pointer; }
.tabBar__container .tabBar__title:hover { color: #fff; }
.tabBar__container .tabBar__title.on { color: #a7c789; font-weight: 900; }
.tabBar__container .line { z-index: 11; position: absolute; bottom: 0; left: 0; width: 20%; height: calc(3 * var(--vw)); background-color: #a7c789; transition: 0.5s; }

/* 공통 섹션 헤드 */
.sr__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(10 * var(--vw)); }
.sr__eyebrow { font-family: 'Noto Sans KR', sans-serif; font-size: calc(18 * var(--vw)); font-weight: 700; line-height: calc(28 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: var(--c-accent); }
.sr__sectionTitle { font-family: 'Noto Sans KR', sans-serif; font-weight: 900; font-size: calc(44 * var(--vw)); line-height: 1.4; letter-spacing: calc(-2 * var(--vw)); color: var(--c-text); }
.sr__sectionTitle .en { font-family: 'ProximaNova', sans-serif; font-weight: 800; font-size: calc(44 * var(--vw)); letter-spacing: calc(-2.2 * var(--vw)); }
.sr__sectionDesc { margin-top: calc(10 * var(--vw)); font-size: calc(24 * var(--vw)); line-height: calc(38 * var(--vw)); letter-spacing: calc(-1.2 * var(--vw)); color: var(--c-text); }
.sr__sectionDesc .en { font-size: calc(26 * var(--vw)); letter-spacing: calc(-1.3 * var(--vw)); }

/* 공통 버튼 */
.sr__btnOutline { display: inline-flex; align-items: center; justify-content: center; width: calc(130 * var(--vw)); height: calc(45 * var(--vw)); border: calc(1 * var(--vw)) solid var(--c-text); border-radius: calc(5 * var(--vw)); font-size: calc(15 * var(--vw)); letter-spacing: calc(-0.75 * var(--vw)); color: var(--c-text); }
.sr__btnPrimary { display: inline-flex; align-items: center; justify-content: center; width: calc(300 * var(--vw)); height: calc(48 * var(--vw)); background: var(--c-accent); border-radius: calc(5 * var(--vw)); font-size: calc(16 * var(--vw)); letter-spacing: calc(-0.8 * var(--vw)); color: #fff; }
.sr__btnPrimary strong { font-weight: 700; margin-right: calc(4 * var(--vw)); } /* inline-flex 라 strong-텍스트 사이 공백 trim → margin으로 '키즈 런칭' 띄움 */
.sr__btnPrimary[data-alarm-done="true"] { background: var(--c-grey); } /* [NB2024-12452] 재클릭 시 '이미 신청' 알럿 노출 위해 pointer-events:none 제거 */

/* ---------- 01. Key Visual ---------- */
/* KV : 통이미지(kv.jpg에 타이틀/기간 baked). 시안 137:27 bg #373b32(슬라이스 대기 fallback) */
.sr__kv { width: 100%; background: #373b32; }
.sr__kv .sr__kvImg { display: block; width: 100%; height: auto; }

/* ---------- 02. 쿠폰 & 결제 혜택 ---------- */
/* 쿠폰 섹션 배경 : 시안 세로 그라데 #d5d5d5(상단) → 흰색(37.98%) */
.sr__coupon { background: linear-gradient(180deg, #d5d5d5 0%, #ffffff 37.98%); display: flex; flex-direction: column; align-items: center; padding: calc(100 * var(--vw)) 0 calc(120 * var(--vw)); }
.sr__intro { text-align: center; margin-bottom: calc(80 * var(--vw)); }
.sr__introTitle { font-family: 'ITCGaramondStd', 'Noto Sans KR', serif; font-weight: 400; font-size: calc(90 * var(--vw)); line-height: 1.1; letter-spacing: calc(-0.9 * var(--vw)); color: var(--c-text); }
.sr__introTitle .en { font-family: inherit; font-size: inherit; letter-spacing: inherit; }
.sr__introPeriod { margin-top: calc(20 * var(--vw)); font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(28 * var(--vw)); line-height: calc(44 * var(--vw)); letter-spacing: calc(-1.4 * var(--vw)); color: var(--c-accent); }
.sr__introPeriod .en { font-family: 'ProximaNova', sans-serif; font-size: calc(30 * var(--vw)); letter-spacing: 0;}
.sr__introCopy { margin-top: calc(20 * var(--vw)); font-size: calc(28 * var(--vw)); line-height: calc(44 * var(--vw)); letter-spacing: calc(-1.4 * var(--vw)); color: var(--c-text); }
.sr__introCopy--gap { margin-top: calc(44 * var(--vw)); }
.sr__coupon .sr__eyebrow { font-family: 'Noto Sans KR', sans-serif; font-size: calc(18 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); }

/* 혜택 2열 그리드 (좌 네이버페이 / 우 쿠폰 + 사전 런캘) : 시안 gap 60 / 그룹 gap 30 / 라벨-카드 14 */
.sr__benefit { margin-top: calc(60 * var(--vw)); display: flex; justify-content: center; gap: calc(60 * var(--vw)); align-items: flex-start; }
.sr__benefitCol { display: flex; flex-direction: column; gap: calc(30 * var(--vw)); }
.sr__benefitLabel { text-align: center; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(24 * var(--vw)); line-height: calc(38 * var(--vw)); letter-spacing: calc(-1.2 * var(--vw)); color: var(--c-text); }
.sr__benefitGroup { display: flex; flex-direction: column; gap: calc(14 * var(--vw)); }

/* 쿠폰/런캘 카드 */
.sr__couponCard { display: flex; align-items: stretch; width: calc(560 * var(--vw)); }
.sr__couponInfo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(9 * var(--vw)); height: calc(110 * var(--vw)); padding: 0 calc(34 * var(--vw)); background: var(--c-accent); border-radius: calc(8 * var(--vw)); color: #fff; }
.sr__couponSub { font-size: calc(16 * var(--vw)); line-height: calc(22 * var(--vw)); letter-spacing: calc(-0.8 * var(--vw)); }
.sr__couponName { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(22 * var(--vw)); letter-spacing: calc(-1.1 * var(--vw)); }
.sr__couponName .en { font-size: calc(24 * var(--vw)); }
.sr__couponDown { position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--vw)); width: calc(119 * var(--vw)); height: calc(110 * var(--vw)); background: var(--c-accent); border-radius: calc(8 * var(--vw)); color: #fff; cursor: pointer; }
/* Info↔Download 사이 세로 점선 구분선 */
.sr__couponDown::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: calc(95 * var(--vw)); border-left: 1px dashed rgba(255, 255, 255, 0.6); }
.sr__downIco { width: calc(29 * var(--vw)); height: calc(27 * var(--vw)); }
.sr__downIco svg { width: 100%; height: 100%; }
.sr__downTxt { font-size: calc(15 * var(--vw)); letter-spacing: calc(-0.75 * var(--vw)); }
/* 사전 런캘 마일리지(자동발급) : grey, 비활성 */
.sr__couponCard--auto .sr__couponInfo,
.sr__couponCard--auto .sr__couponDown { background: var(--c-grey); }
.sr__couponDown--auto { cursor: default; }
/* 다운완료 상태 (시안 149:1082) : 신규 발급 성공 / 재접속 시 이미 발급(saleCouponIssuedYn) — 카드 전체(info+download) muted 그린, 텍스트 흰색 유지 */
.sr__couponCard.is-issued .sr__couponInfo,
.sr__couponCard.is-issued .sr__couponDown { background: #5e6856; }
.sr__couponCard.is-issued .sr__couponDown { cursor: default; pointer-events: none; }

/* 네이버페이 카드 : 시안 radius 없음, w560 h301, bg#f5f5f5, 비주얼 w278(bg#373b32, 슬라이스), 내부 gap30 */
.sr__payCard { display: flex; align-items: stretch; gap: calc(30 * var(--vw)); width: calc(560 * var(--vw)); height: calc(301 * var(--vw)); background: #f5f5f5; }
.sr__payVisual { flex-shrink: 0; width: calc(278 * var(--vw)); background: #373b32; }
.sr__payVisual img { width: 100%; height: 100%; object-fit: cover; }
/* 네이버페이 텍스트 : 시안 design_context 기준 전부 #2b303c(네이비), 조건=Regular / 할인=Bold */
.sr__payBody { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(16 * var(--vw)); background: #f5f5f5; }
.sr__payHeadline { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(22 * var(--vw)); letter-spacing: calc(-1.1 * var(--vw)); color: #2b303c; }
.sr__payList { display: flex; flex-direction: column; gap: calc(10 * var(--vw)); }
.sr__payList li { display: flex; flex-direction: column; }
.sr__payCond { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: calc(18 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: #2b303c; }
.sr__payCond .en { font-family: 'ProximaNova', sans-serif; font-size: calc(20 * var(--vw)); }
.sr__payVal { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(18 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: #2b303c; }
.sr__payVal .en { font-family: 'ProximaNova', sans-serif; font-weight: 700; font-size: calc(20 * var(--vw)); color: #2b303c; }
.sr__paySoldout { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(20 * var(--vw)); letter-spacing: calc(-1 * var(--vw)); color: var(--c-grey); }
/* 쿠폰 유의사항 보기 (토글) */
.sr__couponNotice { width: calc(560 * var(--vw)); text-align: left; margin-top: calc(-14* var(--vw)); }
.sr__couponNotice > summary { display: inline-block; list-style: none; cursor: pointer; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(16 * var(--vw)); letter-spacing: calc(-0.8 * var(--vw)); color: var(--c-grey); text-decoration: underline; text-underline-offset: calc(3 * var(--vw)); }
.sr__couponNotice > summary::-webkit-details-marker { display: none; }
.sr__couponNoticeBody { margin-top: calc(5 * var(--vw)); text-align: left; font-size: calc(16 * var(--vw)); line-height: calc(26 * var(--vw)); letter-spacing: calc(-0.8 * var(--vw)); color: var(--c-grey); }
.sr__couponNoticeBody .sr__noticeHead { font-weight: 700; }
.sr__couponNoticeBody .sr__noticeHead--gap { margin-top: calc(26 * var(--vw)); }
.sr__couponNoticeBody .sr__noticeList li { list-style: none; position: relative; padding-left: calc(20 * var(--vw)); }
.sr__couponNoticeBody .sr__noticeList li::before { content: "-"; position: absolute; left: calc(7 * var(--vw)); top: calc(11 * var(--vw)); }
.sr__couponNoticeBody .sr__noticeDate { padding-left: calc(20 * var(--vw)); }

/* ---------- 03. 하이라이트 ---------- */
.sr__highlight { background: #fff; display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); padding: calc(120 * var(--vw)) 0; }
.sr__dropList { display: flex; gap: calc(20 * var(--vw)); justify-content: center; }
.sr__drop { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--vw)); width: calc(280 * var(--vw)); }
.sr__dropImg { width: calc(280 * var(--vw)); height: calc(280 * var(--vw)); background: var(--c-imgbg); overflow: hidden; }
.sr__dropImg img { width: 100%; height: 100%; object-fit: cover; }
.sr__dropText { display: flex; flex-direction: column; gap: calc(10 * var(--vw)); width: calc(260 * var(--vw)); }
.sr__dropTitle { font-family: 'ProximaNova', sans-serif; font-weight: 800; font-size: calc(27 * var(--vw)); color: var(--c-text); }
.sr__dropDesc { font-size: calc(18 * var(--vw)); line-height: calc(28 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: var(--c-text); }
.sr__dropDesc .en { font-size: calc(20 * var(--vw)); letter-spacing: calc(-1 * var(--vw)); }

/* ---------- 03. 발매 (탭 상품) ---------- */
.sr__release { background: #e3e5e6; display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); padding: calc(120 * var(--vw)) 0; }
.sr__release .sr__sectionTitle { color: #2b303c; }
.sr__relHead { display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--vw)); }
.sr__relTabs { display: flex; gap: calc(10 * var(--vw)); }
.sr__relTab { display: inline-flex; align-items: center; justify-content: center; height: calc(40 * var(--vw)); padding: 0 calc(20 * var(--vw)); border-radius: calc(20 * var(--vw)); background: var(--c-imgbg); color: #727272; font-family: 'ProximaNova', 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(15 * var(--vw)); letter-spacing: calc(-0.75 * var(--vw)); white-space: nowrap; cursor: pointer; }
.sr__relTab.on { background: var(--c-accent); color: #fff; }
.sr__relPanels { width: calc(1230 * var(--vw)); }
.sr__relPanel { display: none; flex-direction: column; gap: calc(40 * var(--vw)); }
.sr__relPanel.is-active { display: flex; }
/* Today 히어로 */
.sr__relHero { display: flex; align-items: center; gap: calc(40 * var(--vw)); width: 100%; height: calc(540 * var(--vw)); padding: calc(30 * var(--vw)); background: var(--c-darkgreen); border-radius: calc(10 * var(--vw)); cursor: pointer; } /* [NB2024-12452] KV+타이틀 클릭 시 더보러가기 랜딩 */
.sr__relHeroImg { flex-shrink: 0; width: calc(700 * var(--vw)); height: calc(480 * var(--vw)); border-radius: calc(10 * var(--vw)); overflow: hidden; }
.sr__relHeroImg img { width: 100%; height: 100%; object-fit: cover; }
.sr__relHeroText { display: flex; flex-direction: column; gap: calc(30 * var(--vw)); width: calc(406 * var(--vw)); color: #fff; }
.sr__relHeroTit { display: flex; flex-direction: column; gap: calc(4 * var(--vw)); }
.sr__relHeroTit strong { font-family: 'ProximaNova', sans-serif; font-weight: 800; font-size: calc(40 * var(--vw)); }
.sr__relHeroTit p { font-size: calc(18 * var(--vw)); line-height: calc(28 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); }
.sr__relHeroBtn { display: inline-flex; align-items: center; justify-content: center; width: calc(130 * var(--vw)); height: calc(45 * var(--vw)); background: #fff; border-radius: calc(5 * var(--vw)); color: var(--c-text); font-size: calc(15 * var(--vw)); letter-spacing: calc(-0.75 * var(--vw)); }
/* 데일리 운동화 탭 : 1906/740/530 3버튼 그룹 (각 130, gap 8) */
.sr__relHeroBtns { display: flex; gap: calc(8 * var(--vw)); }
.sr__relHeroBtn strong { font-weight: 700; }
/* 상품 리스트 */
.sr__relItems { display: flex; gap: calc(20 * var(--vw)); width: 100%; }
.sr__relItem { width: calc(230 * var(--vw)); }
.sr__relItemLink { display: flex; flex-direction: column; gap: calc(20 * var(--vw)); }
.sr__relItemImg { display: block; width: calc(230 * var(--vw)); height: calc(230 * var(--vw)); background: #e0e2e3; overflow: hidden; }
.sr__relItemImg img { width: 100%; height: 100%; object-fit: cover; }
.sr__relItemName { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: 'Noto Sans KR', sans-serif; font-size: calc(18 * var(--vw)); line-height: 1.5; letter-spacing: calc(-0.9 * var(--vw)); color: var(--c-text); }
.sr__relItemName .en { font-family: 'ProximaNova', sans-serif; font-size: calc(20 * var(--vw)); }
.sr__relItemPrice { display: flex; flex-direction: column; margin-top: calc(-10 * var(--vw)); }
.sr__relItemOrig { font-family: 'Noto Sans KR', sans-serif; font-size: calc(16 * var(--vw)); color: #8f959b; text-decoration: line-through; }
.sr__relItemOrig .en { font-family: 'ProximaNova', sans-serif; font-size: calc(18 * var(--vw)); }
.sr__relItemSale { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--vw)); }
.sr__relItemSale .text_icon_delibox { margin: calc(2 * var(--vw)) 0 0 calc(2 * var(--vw)); }
.sr__relItemPct { font-family: 'ProximaNova', sans-serif; font-style: normal; font-weight: 700; font-size: calc(20 * var(--vw)); color: #cf0a2c; }
.sr__relItemFinal { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(20 * var(--vw)); color: var(--c-text); }
.sr__relItemFinal .en { font-family: 'ProximaNova', sans-serif; font-size: calc(20 * var(--vw)); }

/* ---------- 05. 룩북 (SCHOOL LOOK BOOK) : 다크그린 섹션 + 화이트 코디 카드 ---------- */
.sr__lookbook { background: var(--c-darkgreen); display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); padding: calc(120 * var(--vw)) 0; }
.sr__lookbook .sr__eyebrow { color: #a7c789; }
.sr__lookbook .sr__sectionTitle, .sr__lookbook .sr__sectionDesc { color: #fff; }
.sr__lookbook .sr__relTab { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); }
.sr__lookbook .sr__relTab.on { background: var(--c-accent); color: #fff; }
.sr__lookPanels { width: calc(1230 * var(--vw)); }
.sr__lookPanel { display: none; }
.sr__lookPanel.is-active { display: block; }
/* 룩북 코디 카드 : 시안 exact — 카드 w1230 h540 gap40 p30 radius10, 좌 이미지 w510 h480 bg#e3e5e6, 상품컷 130 radius5 bg#a9a9a9 */
.sr__lookCard { display: flex; align-items: center; gap: calc(40 * var(--vw)); width: calc(1230 * var(--vw)); height: calc(540 * var(--vw)); background: #fff; border-radius: calc(10 * var(--vw)); padding: calc(30 * var(--vw)); }
.sr__lookImg { flex-shrink: 0; width: calc(510 * var(--vw)); height: calc(480 * var(--vw)); border-radius: calc(10 * var(--vw)); overflow: hidden; background: #e3e5e6; }
.sr__lookImg img { width: 100%; height: 100%; object-fit: cover; }
.sr__lookBody { width: calc(610 * var(--vw)); height: calc(480 * var(--vw)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(40 * var(--vw)); }
.sr__lookTit { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--vw)); text-align: center; }
.sr__lookTit strong { display: block; font-family: 'ProximaNova', sans-serif; font-weight: 800; font-size: calc(40 * var(--vw)); color: var(--c-darkgreen); }
.sr__lookTit p { font-size: calc(18 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: var(--c-text); }
.sr__lookTit p .en { font-size: calc(20 * var(--vw)); }
.sr__lookItems { display: flex; gap: calc(30 * var(--vw)); }
.sr__lookItem { width: calc(130 * var(--vw)); }
.sr__lookItemLink { display: flex; flex-direction: column; gap: calc(14 * var(--vw)); }
.sr__lookItemImg { display: block; width: calc(130 * var(--vw)); height: calc(130 * var(--vw)); background: #f5f5f5; border-radius: calc(5 * var(--vw)); overflow: hidden; }
.sr__lookItemImg img { width: 100%; height: 100%; object-fit: cover; }
/* 룩북 썸네일 컬러 스와이퍼 (수동 스와이프 + idle 자동 슬라이드) : 고유 클래스라 범용 .swiper-container init 과 분리 */
.sr__lookItemImg .sr__lookSwiper { position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
.sr__lookItemImg .sr__lookSwiper .swiper-wrapper { height: 100%; }
.sr__lookItemImg .sr__lookSwiper .swiper-slide { width: 100%; height: 100%; }
.sr__lookItemName { display: block; font-size: calc(18 * var(--vw)); line-height: 1.5; letter-spacing: calc(-0.9 * var(--vw)); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr__lookItemName .en { font-size: calc(20 * var(--vw)); }
.sr__lookItemSwatch { display: flex; gap: calc(6 * var(--vw)); height: calc(20 * var(--vw)); align-items: center; }
.sr__lookItemSwatch i { width: calc(19 * var(--vw)); height: calc(19 * var(--vw)); border-radius: 50%; box-shadow: inset 0 0 0 1px #bcbfc1; }
.sr__lookBtn { display: inline-flex; align-items: center; justify-content: center; width: calc(140 * var(--vw)); height: calc(45 * var(--vw)); background: var(--c-darkgreen); border-radius: calc(5 * var(--vw)); color: #fff; font-size: calc(15 * var(--vw)); letter-spacing: calc(-0.75 * var(--vw)); }

/* ---------- 06. 랭킹 (BACK TO SCHOOL BEST RANKING) : 12위 3열 캐러셀 ---------- */
.sr__ranking { background: #fff; display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); padding: calc(120 * var(--vw)) 0; }
.sr__ranking .sr__eyebrow { color: var(--c-accent); }
/*.sr__ranking .sr__eyebrow .en { color: var(--c-text); }*/
.sr__ranking .sr__sectionTitle { color: #2b303c; }
.sr__rankWrap { display: flex; align-items: center; gap: calc(24 * var(--vw)); }
.sr__rankArrow { flex-shrink: 0; width: calc(40 * var(--vw)); height: calc(40 * var(--vw)); display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.sr__rankArrow svg { width: calc(14 * var(--vw)); height: calc(26 * var(--vw)); }
.sr__rankArrow:disabled { opacity: 0.25; cursor: default; }
.sr__rankViewport { width: calc(1420 * var(--vw)); }
/* 3열(각 460)×4행, 열 gap 20. 행 구분선은 각 열의 2~4행 상단(border-top #e8e8e8) */
.sr__rankList { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(3, 1fr); column-gap: calc(20 * var(--vw)); }
.sr__rankItem { border-top: 1px solid #e8e8e8; }
.sr__rankItem:nth-child(4n+1) { border-top: 0; }
.sr__rankLink { display: flex; align-items: center; gap: calc(30 * var(--vw)); padding: calc(10 * var(--vw)) 0;width: calc(460 * var(--vw)); }
.sr__rankNo { flex-shrink: 0; width: calc(40 * var(--vw)); font-family: 'ProximaNova', sans-serif; font-style: italic; font-weight: 800; font-size: calc(30 * var(--vw)); line-height: calc(38 * var(--vw)); color: #2b303c; }
.sr__rankImg { flex-shrink: 0; width: calc(120 * var(--vw)); height: calc(120 * var(--vw)); background: #e0e2e3; overflow: hidden; }
.sr__rankImg img { width: 100%; height: 100%; object-fit: cover; }
.sr__rankInfo { display: flex; flex-direction: column; gap: calc(10 * var(--vw)); min-width: 0; }
.sr__rankName { display: block; font-family: 'Noto Sans KR', sans-serif; font-size: calc(20 * var(--vw)); line-height: calc(26 * var(--vw)); letter-spacing: calc(-1 * var(--vw)); color: #2b303c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr__rankName .en { font-family: 'ProximaNova', sans-serif; font-size: calc(22 * var(--vw)); }
.sr__rankPrice { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(2 * var(--vw)); align-items: center;}
.sr__rankPrice .text_icon_delibox { margin-left: calc(6 * var(--vw)); }
.sr__rankPct { font-family: 'ProximaNova', sans-serif; font-style: normal; font-weight: 700; font-size: calc(22 * var(--vw)); line-height: calc(38 * var(--vw)); color: #cf0a2c; margin-right: calc(6 * var(--vw)); }
.sr__rankFinal { font-family: 'ProximaNova', sans-serif; font-weight: 700; font-size: calc(22 * var(--vw)); line-height: calc(38 * var(--vw)); color: #2b303c; }
.sr__rankFinal .won { font-family: 'Noto Sans KR', sans-serif; font-size: calc(20 * var(--vw)); }

/* ---------- 04. KIDS DAILY 발매 ---------- */
/* KIDS NEW PRODUCT 발매 : 시안 exact — 섹션 bg #d9d9d9, gap 25, 카드 bg#fff p30 gap30, 이미지 280, 텍스트박스 w260 */
.sr__launch { background: #d9d9d9; display: flex; flex-direction: column; align-items: center; gap: calc(25 * var(--vw)); padding: calc(120 * var(--vw)) 0; }
.sr__calendar { display: flex; gap: calc(20 * var(--vw)); justify-content: center; align-items: center; }
.sr__calItem { display: flex; flex-direction: column; gap: calc(14 * var(--vw)); width: calc(707 * var(--vw)); }
.sr__calDate { font-family: 'ProximaNova', sans-serif; font-weight: 700; font-size: calc(26 * var(--vw)); line-height: calc(44 * var(--vw)); color: var(--c-text); font-feature-settings: "case" 1; }
.sr__calDate .ko { font-size: calc(22 * var(--vw)); }
.sr__calCard { display: flex; flex-direction: row; align-items: center; gap: calc(30 * var(--vw)); background: #fff; padding: calc(30 * var(--vw)); }
.sr__calImg { flex-shrink: 0; width: calc(280 * var(--vw)); height: calc(280 * var(--vw)); background: var(--c-imgbg); overflow: hidden; }
.sr__calImg img { width: 100%; height: 100%; object-fit: cover; }
.sr__calText { width: calc(260 * var(--vw)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--vw)); }
.sr__calTitle { font-family: 'ProximaNova', sans-serif; font-weight: 800; font-size: calc(27 * var(--vw)); color: var(--c-text); }
.sr__calDesc { font-size: calc(18 * var(--vw)); line-height: calc(28 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: var(--c-text); }
.sr__calDesc .en { font-size: calc(20 * var(--vw)); letter-spacing: calc(-1 * var(--vw)); }
.sr__calCard .sr__btnOutline { margin-top: calc(8 * var(--vw)); }
.sr__btnArea { text-align: center; margin-top: calc(115 * var(--vw)); }

/* ---------- 05. 이벤트 (사은품) ---------- */
/* 08. BACK TO SCHOOL SPECIAL LIVE + 사은품 : 시안 exact */
.sr__event { background: #fff; display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); padding: calc(120 * var(--vw)) 0 calc(50 * var(--vw)); }
.sr__event .sr__sectionTitle { color: #2b303c; }
/* LIVE 배너 : 다크그린 카드 w1230 h540 p30 gap40 radius10 */
.sr__live { display: flex; align-items: center; gap: calc(40 * var(--vw)); width: calc(1230 * var(--vw)); height: calc(540 * var(--vw)); background: var(--c-darkgreen); border-radius: calc(10 * var(--vw)); padding: calc(30 * var(--vw)); }
.sr__liveImg { flex-shrink: 0; width: calc(700 * var(--vw)); height: calc(480 * var(--vw)); background: #fff; border-radius: calc(10 * var(--vw)); overflow: hidden; }
.sr__liveImg img { width: 100%; height: 100%; object-fit: cover; }
.sr__liveBody { width: calc(406 * var(--vw)); display: flex; flex-direction: column; gap: calc(30 * var(--vw)); color: #fff; }
.sr__liveHead { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--vw)); }
.sr__liveTit { font-family: 'ProximaNova', sans-serif; font-weight: 800; font-size: calc(40 * var(--vw)); letter-spacing: calc(-2 * var(--vw)); text-transform: uppercase; color: #fff; }
.sr__liveCopy { display: flex; flex-direction: column; gap: calc(20 * var(--vw)); }
.sr__liveCopy p { font-size: calc(18 * var(--vw)); line-height: calc(28 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: #fff; }
.sr__liveCopy .en { font-family: 'ProximaNova', sans-serif; font-size: calc(20 * var(--vw)); }
/* LIVE 배지 pill : 빨강테(#e20c0c) + 좌 red segment(▶live, #142c1a 글자) + 우 날짜 */
.sr__liveTime { display: inline-flex; align-items: stretch; height: calc(60 * var(--vw)); border-radius: calc(30 * var(--vw)); border: calc(2 * var(--vw)) solid #e20c0c; background: var(--c-darkgreen); overflow: hidden; }
.sr__liveBadge { border-radius:calc(30 * var(--vw)); display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--vw)); width: calc(91 * var(--vw)); background: #e20c0c; font-family: 'ProximaNova', sans-serif; font-weight: 800; font-size: calc(20 * var(--vw)); color: #151415; text-transform: uppercase; }
.sr__liveBadge::before { content: ""; flex-shrink: 0; width: calc(16 * var(--vw)); height: calc(16 * var(--vw)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23142C1A'/%3E%3Cpath d='M12 8.5L6 12V5L12 8.5Z' fill='%23E20C0C'/%3E%3C/svg%3E") no-repeat center / contain; }
.sr__liveDate { display: inline-flex; align-items: center; padding: 0 calc(20 * var(--vw)); color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(20 * var(--vw)); letter-spacing: calc(-0.6 * var(--vw)); white-space: nowrap; }
.sr__liveDate .en { font-family: 'ProximaNova', sans-serif; font-size: calc(22 * var(--vw)); }
.sr__liveBtn { display: inline-flex; align-items: center; justify-content: center; width: calc(152 * var(--vw)); height: calc(45 * var(--vw)); background: #fff; border-radius: calc(5 * var(--vw)); color: var(--c-text); font-size: calc(15 * var(--vw)); letter-spacing: calc(-0.75 * var(--vw)); }
/* 라이브 종료 후(liveEnded) : 딤 처리 + '라이브 다시보기'(VOD 링크는 유지) */
.sr__liveBtn.is-ended { opacity: 0.5; }
/* 사은품 3종 : 카드 w292, 이미지 그린 그라데(#ebf4d9→#6d994b) 292×292 */
.sr__giftList { display: flex; gap: calc(20 * var(--vw)); justify-content: center; align-items: flex-start; margin-top: calc(-20 * var(--vw)); }
.sr__gift { display: flex; flex-direction: column; gap: calc(24 * var(--vw)); width: calc(292 * var(--vw)); }
.sr__giftImg { width: calc(292 * var(--vw)); height: calc(292 * var(--vw)); background: linear-gradient(180deg, #ebf4d9 0%, #6d994b 100%); overflow: hidden; }
.sr__giftImg img { width: 100%; height: 100%; object-fit: cover; }
.sr__giftText { display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--vw)); text-align: left; }
.sr__giftTitle { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(26 * var(--vw)); line-height: calc(34 * var(--vw)); letter-spacing: calc(-1.3 * var(--vw)); color: #2b303c; }
.sr__giftDesc { font-size: calc(18 * var(--vw)); line-height: calc(28 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: #2b303c; }
.sr__giftDesc .en { font-family: 'ProximaNova', sans-serif; font-size: calc(20 * var(--vw)); }
.sr__notice { width: fit-content; text-align: left; color: var(--c-grey); }
.sr__notice p, .sr__notice li { font-size: calc(16 * var(--vw)); line-height: calc(26 * var(--vw)); letter-spacing: calc(-0.8 * var(--vw)); }
.sr__notice .sr__noticeTit { font-weight: 700; }
.sr__notice .en { font-size: calc(18 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); }
.sr__notice .sr__noticeList li { list-style: none; position: relative; padding-left: calc(20 * var(--vw)); }
.sr__notice .sr__noticeList li::before { content: ""; position: absolute; left: calc(7 * var(--vw)); top: calc(11 * var(--vw)); width: calc(4 * var(--vw)); height: calc(4 * var(--vw)); border-radius: 50%; background: currentColor; }
.sr__notice .sr__noticeSubList { margin-left: calc(20 * var(--vw)); }

/* ---------- 03. 빠른 도착 서비스 ---------- */
.sr__delibox { background: #fff; display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); padding-bottom: calc(120 * var(--vw)); }
.sr__deliBanner { position: relative; width: calc(980 * var(--vw)); height: calc(476 * var(--vw)); border-radius: calc(20 * var(--vw)); overflow: hidden; background: linear-gradient(180deg, #171c14 9.24%, #7e9b67 91.81%); }
.sr__deliBg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: soft-light; pointer-events: none; }
.sr__deliText { position: absolute; left: calc(55 * var(--vw)); top: 50%; transform: translateY(-50%); width: calc(560 * var(--vw)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(30 * var(--vw)); z-index: 2; }
.sr__deliTitleGroup { display: flex; flex-direction: column; gap: calc(10 * var(--vw)); }
.sr__deliEyebrow { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(18 * var(--vw)); line-height: calc(28 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: rgba(255, 255, 255, 0.75); }
.sr__deliEyebrow .en { font-family: 'ProximaNova', sans-serif; font-size: calc(20 * var(--vw)); }
.sr__deliTitle { display: flex; align-items: center; gap: calc(12 * var(--vw)); font-family: 'Noto Sans KR', sans-serif; font-weight: 900; font-size: calc(40 * var(--vw)); line-height: 1.4; letter-spacing: calc(-2 * var(--vw)); color: #fff; }
.sr__deliTruck { display: block; width: calc(66 * var(--vw)); height: auto; flex-shrink: 0; }
.sr__deliList { display: flex; flex-direction: column; gap: calc(8 * var(--vw)); }
.sr__deliList li { display: flex; align-items: center; gap: calc(10 * var(--vw)); }
.sr__deliList strong { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(20 * var(--vw)); line-height: calc(26 * var(--vw)); letter-spacing: calc(-1 * var(--vw)); color: #fff; white-space: nowrap; }
.sr__deliBar { width: 1px; height: calc(20 * var(--vw)); background: rgba(255, 255, 255, 0.5); flex-shrink: 0; }
.sr__deliDesc { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: calc(20 * var(--vw)); line-height: calc(26 * var(--vw)); letter-spacing: calc(-1 * var(--vw)); color: #fff; white-space: nowrap; }
.sr__deliDesc .en { font-family: 'ProximaNova', sans-serif; font-size: calc(22 * var(--vw)); }
.sr__deliVisual { position: absolute; right: calc(55 * var(--vw)); bottom: 0; width: calc(317 * var(--vw))!important; height: auto; z-index: 1; }
.sr__deliLink { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(16 * var(--vw)); letter-spacing: calc(-0.8 * var(--vw)); color: #8f959b; text-decoration: underline; text-underline-offset: calc(3 * var(--vw)); }

/* ---------- 08-1. 라이브 유의사항 : 시안 171:2794 (bg#f5f5f5, 상하120, 내부767, 불릿 18px #8e8f8f) ---------- */
.sr__liveNotice { width: 100%; background: #f5f5f5; display: flex; justify-content: center; padding: calc(120 * var(--vw)) 0 calc(150 * var(--vw)); }
.sr__liveNoticeInner { width: calc(767 * var(--vw)); display: flex; flex-direction: column; gap: calc(34 * var(--vw)); }
.sr__liveNoticeTitle { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: calc(19.5 * var(--vw)); letter-spacing: calc(-0.975 * var(--vw)); color: #000; }
.sr__liveNoticeList li { list-style: none; position: relative; padding-left: calc(20 * var(--vw)); font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: calc(18 * var(--vw)); line-height: calc(34 * var(--vw)); letter-spacing: calc(-0.9 * var(--vw)); color: #8e8f8f; }
.sr__liveNoticeList li::before { content: ""; position: absolute; left: calc(7 * var(--vw)); top: calc(15 * var(--vw)); width: calc(4 * var(--vw)); height: calc(4 * var(--vw)); border-radius: 50%; background: currentColor; }

/* ---------- 07. NB Logo ---------- */
.sr__logo { background: #fff; text-align: center; padding: calc(140 * var(--vw)) 0; }

/* ---------- 발매 알림 신청 팝업 (sendType 선택) ----------
 * 슈즈위크(NB2024-12342)와 동일한 팝업. popup.css 를 통째 로드하지 않고 필요한 룰만 발췌 복사.
 * (이 페이지는 popup.css 미로드 → 팝업 베이스 쉘까지 포함해야 함. px 고정값은 팝업 특성상 vw 미적용)
 */
.dimm_pop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.7; z-index: 99 !important; }
.layer_pop { position: absolute; left: 0; top: 10px; width: 100%; z-index: 100; word-break: break-all; }
.layer_pop .pop_inner { position: relative; margin: 0 auto; background: #fff; box-sizing: border-box; }
.w900 .pop_inner { width: 900px; padding: 50px 40px; }
.w900 .close { right: 40px; top: 50px; }
.pop_inner .close { position: absolute; z-index: 60; }
.pop_inner .close img { display: block; }
.pop_inner .btn_area { text-align: center; }
.popTit { font-size: 32px; text-align: center; display: block; font-weight: 900; margin-top: 30px; }
.mt30 { margin-top: 30px; }
.btn.btn-border { border-radius: 30px; }
.btn.btn-black { background: #000; font-size: 18px; color: #fff; width: 241px; padding: 15px 0; text-align: center; }
.launching_alarm { margin: 30px 80px; }
.launching_alarm .alarm_input { display: flex; background: #f4f4f4; padding: 40px 0; gap: 35px; justify-content: center; flex-wrap: wrap; }
.launching_alarm .alarm_input input.ip_radio + label { font-weight: 400; font-family: 'Noto Sans KR', Dotum, "돋움", sans-serif; font-size: 18px; }
.launching_alarm .alarm_noti { margin-top: 20px; }
.launching_alarm .alarm_noti li { color: #777777; text-indent: -8px; padding-left: 8px; line-height: 24px; }
.launching_alarm .alarm_noti li.color_red { color: #cf0a2c; }
.sr__logo .sr__logoImg { display: inline-block; width: calc(170 * var(--vw)); height: auto; }