/* ============================================================================
   상품 목록 (WS 01) — 상점 화면 전용
   정본: 피그마 "DragonRaid_Hompage" › 페이지 **WS 01 상품 목록** (485:574)
         문구·조건은 BookStack "26.08.13 웹스토어 화면 구조"
   ----------------------------------------------------------------------------
   치수는 시안 원본(모바일 360 / 데스크톱 1920)에서 그대로 옮긴 값이다.
   눈대중으로 고치지 말 것 — 바꿔야 하면 시안 노드를 먼저 확인한다.
   공통 토큰·크롬은 webstore.css 에 있다.
   ============================================================================ */

:root {
  --ws-timer: var(--accent-event);   /* 기간 한정 띠 #00C9B7 */
  --ws-lock-bg: #C9CFD8;             /* 잠금 버튼 (시안 714:620) */
  --ws-lock-fg: #4A5160;
  --ws-media-from: #DAECFB;          /* 상품 이미지 칸 그라데 */
  --ws-media-to: #F7FBFF;
  /* 보너스 띠 높이. 데스크톱의 같은 행만 자리를 공유하고 모바일은 표시할 때만 쓴다. */
  --ws-bar-slot: 33px;
}

/* 2. 프로모션 띠 — 아이콘 + 한 줄 문구.
   시안 배경은 흰색 위에 CTA 16% 를 겹친 것이다(= #FDF1DC). */
/* 시안 주석(728:1085): 퀵내비는 "상단바(72) + 프로모션 띠(48) 아래" 에 고정된다.
   즉 띠도 함께 붙어 있어야 한다. 띠가 스크롤로 사라지면 퀵내비 기준점이 흔들린다.
   띠는 조건부 노출이라, 안 보일 때 퀵내비가 상단바 바로 아래 붙도록 body 에
   클래스로 알린다(형제의 표시 여부는 CSS 로 알 수 없다). */
.ws-promo {
  position: sticky; top: var(--ws-bar-h); z-index: 190;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  background: #FDF1DC; color: var(--text-title);
  font-size: 13px; font-weight: 700; padding: 12px 16px; text-align: center;
}
/* 아이콘 — 시안 Promo Icon(20/24 프레임 안 선물 가방 벡터, #F5A623). 예전 자리표시 네모를 대체했다(2026-09-17). */
.ws-promo svg { width: 20px; height: 20px; flex: none; display: block; color: var(--cta); }

/* ============================================================================
   3. 히어로 캐러셀 — 흰 배경 구간. 자동 재생은 넣지 않는다(읽는 도중 넘어가면 불편)
   ============================================================================ */
.ws-hero { position: relative; overflow: hidden; background: var(--bg-card); padding: 20px 0 10px; }
/* 좌우 이동 (Nav 492:981) — 시안은 슬라이드 바깥에 두지만, 폭이 모자라면
   슬라이드 위로 겹친다. 겹쳐도 읽기를 방해하지 않도록 배경을 깔아 둔다. */
.ws-hero-nav {
  position: absolute; top: 115px; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 100px;
  background: var(--bg-page); color: var(--text-title); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ws-hero-nav svg { width: 18px; height: 18px; display: block; }
.ws-hero-nav.prev { left: -22px; }
.ws-hero-nav.next { right: -22px; }
.ws-hero-nav:disabled { opacity: .35; cursor: default; }
.ws-hero-track {
  display: flex; gap: 12px; width: calc(100% - 32px); margin: 0 auto;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ws-hero-track::-webkit-scrollbar { display: none; }
.ws-slide {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: center;
  height: 190px; border-radius: 16px; padding: 0 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #fff; text-align: center;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}
/* 첫 슬라이드(웹스토어 소개)만 민트→파랑 + 상점 일러스트 (713:570, 2026-09-30)
   그라데이션 위에 일러스트를 LUMINOSITY 16% 로 얹는다. 배경 레이어에는 불투명도를 따로 줄 수 없어서
   Figma 원본(2008×596)을 흑백 + 알파 41(=16%)로 구워 두었다. LUMINOSITY 는 이미지의 밝기만 쓰므로
   흑백으로 저장해도 결과가 같다. 모바일 시안(713:563)은 그라데이션만이지만 모바일에도 넣기로 했다(2026-09-30 지시). */
.ws-slide.intro {
  background: url(../assets/hero/intro_bg.webp) center / cover no-repeat,
              linear-gradient(90deg, var(--accent-event), var(--primary-light));
  background-blend-mode: luminosity, normal;
}
.ws-slide > img { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; }
.ws-slide .badge {
  background: var(--accent-event); border-radius: 100px; padding: 5px 12px;
  font-size: 11px; font-weight: 700;
}
.ws-slide h2 { font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; }
.ws-slide p { font-size: 12px; font-weight: 400; line-height: 1.5; }
.ws-slide .left { font-size: 11px; font-weight: 500; }
.ws-slide-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 100px; padding: 8px 16px; border: 0;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer;
}
.ws-slide-btn svg { width: 14px; height: 14px; }
.ws-hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.ws-hero-dots i { width: 8px; height: 8px; border-radius: 100px; background: var(--divider); transition: width .2s; }
.ws-hero-dots i.on { width: 24px; background: var(--primary); }

/* ============================================================================
   4. 퀵 내비 (WS Section Index) — 흰 바. 스크롤하면 상단바 아래에 붙는다
   시안은 상단바 + 프로모션 띠 아래(top:100)지만, 프로모션 띠는 서버가 줄 때만
   나오므로 상단바 높이만 기준으로 잡는다(띠가 없을 때 빈 틈이 생기지 않게).
   ============================================================================ */
.ws-quicknav {
  position: sticky; top: var(--ws-bar-h); z-index: 180;
  /* 띠가 떠 있으면 그 아래로 내려간다(--ws-promo-h 는 띠의 실제 높이와 같다) */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg-card); padding: 8px 16px;
  overflow-x: auto; scrollbar-width: none;
}
.ws-quicknav::-webkit-scrollbar { display: none; }
body.has-promo .ws-quicknav { top: calc(var(--ws-bar-h) + var(--ws-promo-h)); }
.ws-quicknav a {
  flex: none; padding: 8px 18px; border-radius: 100px;
  background: var(--bg-card); border: 1px solid #DDE3EC;
  font-size: 15px; font-weight: 500; line-height: 1.2;
  color: var(--text-title); white-space: nowrap;
}
.ws-quicknav a.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
/* 칩 문구는 D/M 이 다르다 — 시안 728:1085(풀네임) / 728:1095(축약). 기본은 모바일 */
.ws-quicknav .chip-wide { display: none; }

/* ============================================================================
   5~8. 상품 섹션
   ============================================================================ */
/* 상품 목록 본문 여백은 시안(490:806)이 공통 .ws-page 와 달라 여기서 다시 잡는다.
   데스크톱 콘텐츠 폭(1280)은 **패딩을 뺀 안쪽** 기준이라 max-width 에 좌우 패딩을 더해 준다. */
.ws-page.shop { padding: 24px 16px 40px; max-width: calc(var(--ws-content) + 32px); }

/* 카드 안 글줄 간격은 시안 기준(폰트 기본)이다 — 사이트 공통 1.6 을 그대로 쓰면 카드가 늘어난다 */
.ws-card, .ws-pass { line-height: 1.2; }

#sections { display: flex; flex-direction: column; gap: 40px; }
/* 퀵내비 점프의 착지점. 위에 붙어 있는 것 전부(상단바 + 퀵내비 + 띠)를 넘겨야 제목이 보인다.
   전에는 상단바 + 60 으로 잡아 띠가 있으면 36px 모자라 제목이 퀵내비 밑에 깔렸다.
   ⚠ --ws-qnav-h 는 퀵내비 실제 높이와 같아야 한다(webstore.css 변수 주석 참고). */
.ws-section { scroll-margin-top: calc(var(--ws-bar-h) + var(--ws-qnav-h) + 24px); }
body.has-promo .ws-section { scroll-margin-top: calc(var(--ws-bar-h) + var(--ws-promo-h) + var(--ws-qnav-h) + 24px); }
/* 시안에 구분선은 없다 — 제목 아래 간격만 */
.ws-section-head { margin-bottom: 12px; }
.ws-section-head h2 { font-size: 22px; font-weight: 700; color: var(--text-title); }
/* minmax(0,1fr) — 그냥 1fr 이면 칸의 최소폭이 콘텐츠(줄바꿈 없는 상품명 등)까지 벌어져
   좁은 화면에서 카드가 화면 밖으로 밀려난다. */
/* 모바일은 내용에 맞춰 높이를 잡고, 데스크톱에서만 같은 리스트의 본체 높이를 통일한다. */
.ws-grid {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- 상품 카드 (WS Product Card) ----------
   모바일 = 가로형(좌 이미지 · 우 내용). 데스크톱 = 세로형.
   바깥 .ws-card 는 첫 구입 보너스 래퍼를 겸한다 — 대상 상품만 보라 배경이 드러난다.
   (본체 크기는 그대로 두고 3px 테두리 + 하단 띠만 붙는 구조) */
/* 모바일은 한 열이므로 없는 띠 자리를 비우지 않는다. 데스크톱은 아래에서 본체 정렬을 맞춘다. */
.ws-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 3px 3px 0; border-radius: 21px;
}
.ws-card.first-bonus { background: var(--ws-bonus); padding-bottom: var(--ws-bar-slot); }
.ws-card-body {
  flex: 1 1 auto; display: flex; flex-direction: column;
  background: var(--bg-card); border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 28px -4px rgba(18,22,29,.10), 0 2px 6px rgba(18,22,29,.06);
}
.ws-card .ws-row { flex: 1 1 auto; }

.ws-timer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--ws-timer); color: #fff;
  font-size: 13px; font-weight: 700; padding: 8px 0;
}
.ws-timer svg { width: 13px; height: 13px; flex: none; }

.ws-row { display: flex; align-items: stretch; }

.ws-media {
  width: 180px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 8px;
  background: linear-gradient(180deg, var(--ws-media-from), var(--ws-media-to));
}
/* ⚠ 여기에 mix-blend-mode: multiply 를 다시 넣지 말 것.
   처음 쓰던 인앱용 이미지에 흰 배경이 박혀 있어 multiply 로 눌러 뒀었는데, 그 뒤 투명 PNG 로
   전부 교체됐다(CDN 16장·로컬 20장 알파 확인, 2026-09-02). multiply 는 흰 바탕만 지우는 게
   아니라 **그림 전체를 아래 그라데 색으로 곱한다** — 선물 상자 흰 몸통이 하늘색이 되고 모든
   색이 한 톤 어두워져 "파란 틴트가 낀" 것처럼 보였다(아트 지적). 흰 배경 이미지가 다시 오면
   이미지를 고칠 일이지 CSS 로 덮을 일이 아니다. */
/* 클래스가 "hero" 가 아니라 "art" 인 이유 — 홈페이지 공용 style.css 에 `.hero { background:#fff }`
   (히어로 섹션)가 있어 같은 이름이면 그림 뒤에 흰 네모가 깔린다. */
.ws-media > img.art { width: 110px; height: 110px; object-fit: contain; border-radius: 18px; }
/* 이미지가 아직 없는 상품 — 자리만 잡아 두고 칸은 유지한다(카드 높이가 들쭉날쭉해지지 않게) */
.ws-media > .noart {
  width: 110px; height: 110px; border-radius: 18px; background: rgba(20,120,224,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; color: var(--text-caption); text-align: center;
}

/* 포함 아이템 — 이미지 칸 안. 9개까지 감싸서 쌓인다 */
.ws-items {
  display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center;
  gap: 6px 4px; width: 100%;
}
.ws-item { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ws-item img { width: 40px; height: 40px; object-fit: contain; border-radius: 12px; }
.ws-item span { font-size: 12px; font-weight: 700; color: var(--text-title); text-align: center; }

/* 모바일은 본문 열이 행 높이를 채우고 위(정보)·아래(가격 버튼)로 벌어진다 — 버튼이 카드 바닥에 붙는다
   (시안 Content / Content Col: FILL + SPACE_BETWEEN, 2026-09-17 동기화). 데스크톱은 아래에서 flex-start 로 되돌린다. */
.ws-content {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 14px 14px 14px 10px;
}
.ws-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ws-content h3 {
  font-size: 17px; font-weight: 700; color: var(--text-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-bottom { display: flex; flex-direction: column; }

/* 웹 한정 태그 */
.ws-tag {
  align-self: flex-start; background: var(--primary); color: #fff;
  border-radius: 100px; padding: 5px 11px; font-size: 12px; font-weight: 700;
}

/* 보너스 줄 — 웹 증량 · 첫 구입. 서버가 주는 문구만 그린다 */
.ws-bonus { display: flex; flex-direction: column; gap: 3px; }
.ws-bonus span {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: var(--ws-bonus);
}
.ws-bonus img { width: 12px; height: 12px; object-fit: contain; flex: none; }

/* 한도 안내 — 서버가 문구를 줄 때만 그려진다 */
.ws-note { font-size: 11px; color: var(--text-secondary); line-height: 1.45; }

.ws-price {
  width: 100%; height: 52px; border: 0; border-radius: 100px;
  background: var(--cta); color: var(--text-title);
  font-family: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
/* 구매 완료 · 소진 · 보유 중 — 카드는 그대로 두고 가격 버튼만 잠근다(시안 714:620) */
.ws-price:disabled { background: var(--ws-lock-bg); color: var(--ws-lock-fg); cursor: default; }

/* 첫 구입 보너스 하단 띠 — 래퍼 안, 본체 밖.
   모든 카드가 비워 둔 자리(--ws-bar-slot)에 겹쳐 그린다 — 본체 높이를 건드리지 않는다. */
.ws-first-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--ws-bar-slot);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 13px; font-weight: 700;
}

/* ---------- 단품(잼) 카드 ----------
   패키지와 칸 비율·여백이 다르다. 보너스 줄은 패키지와 같이 제목 아래(Info)에 붙는다
   (시안 2026-09-17: 모바일 단품의 Bonus Lines 가 Bottom → Info 로 옮겨졌다, Info gap 8) */
.ws-card.single .ws-media { width: 132px; padding: 22px 12px; gap: 0; }
.ws-card.single .ws-media > img.art,
.ws-card.single .ws-media > .noart { width: 108px; height: 108px; }
.ws-card.single .ws-content { padding: 18px 14px; }

/* ---------- 드래곤 패스 카드 (WS Pass Card) ----------
   상품 카드와 구조가 아예 다르다 — 위쪽 파란 비주얼 + 아래 흰 본문 */
.ws-pass {
  position: relative; background: var(--bg-card); border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 28px -4px rgba(18,22,29,.10), 0 2px 6px rgba(18,22,29,.06);
}
.ws-pass-visual {
  height: 220px; padding: 22px 18px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
}
.ws-pass-art {
  width: 120px; height: 86px; border-radius: 10px; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; color: #fff;
}
.ws-pass-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ws-pass-bonus { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ws-pass-bonus > b { font-size: 12px; font-weight: 700; color: #fff; }
.ws-pass-items { display: flex; align-items: center; gap: 14px; }
.ws-pass-item { display: flex; flex-direction: column; align-items: center; }
.ws-pass-item .ic {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.9);
  margin-bottom: -8px; object-fit: contain;
}
.ws-pass-item .qty {
  position: relative; background: #fff; border-radius: 100px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; color: var(--text-title);
}
/* 웹 구매 보너스 표시 배지 */
.ws-pass-badge {
  position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; border-radius: 14px;
  background: var(--cta); color: #fff; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ws-pass-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 6px; }
.ws-pass-body h3 { font-size: 18px; font-weight: 700; color: var(--text-title); }
.ws-pass-body p { font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.5; }
/* 마일리지 적립 줄 — 설명과 가격 버튼 사이(시안 WS Pass Card › Bonus — 마일리지 적립). 아이콘 18 · 14px/500 · gap 6 */
.ws-pass-mile { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; line-height: 17px; color: #017FA3; }
.ws-pass-mile img { width: 18px; height: 18px; object-fit: contain; flex: none; }
/* 가격 버튼 — 공용 WS Price Button 인스턴스(알약 · 글자 20). 높이만 54 로 덮는다 */
.ws-pass .ws-price { height: 54px; border-radius: 100px; font-size: 20px; line-height: 24px; }

/* ============================================================================
   9. 하단 고지 — 카드가 아니라 배경 위 텍스트다(시안 490:975)
   ============================================================================ */
.ws-notice {
  max-width: var(--ws-content); margin: 0 auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 20px 28px; text-align: center;
  font-size: 12px; font-weight: 400; color: var(--text-secondary); line-height: 1.6;
}
.ws-notice a { color: var(--primary); font-weight: 700; text-decoration: underline; }

/* ============================================================================
   10. 다운로드 안내 — 홈페이지 공용. 상품 목록에만 붙는다
   ============================================================================ */
.ws-dl {
  width: calc(100% - 32px); max-width: var(--ws-content); margin: 0 auto; border-radius: 20px;
  background: linear-gradient(90deg, #408CE0 0%, #529EEB 50%, #61ADF2 100%);
  padding: 48px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ws-dl-icon { width: 112px; height: 112px; border-radius: 28px; object-fit: cover; }
.ws-dl p { font-size: 15px; color: rgba(255,255,255,.85); }
.ws-dl h2 { font-size: 28px; font-weight: 700; color: #fff; }
.ws-dl-badges { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; }
.ws-dl-badges img { width: 160px; height: auto; display: block; }
.ws-dl-badges a { display: block; }
/* App Store 출시 전 — 공식 배지 대신 비활성 배지(시안 badge/appstore-comingsoon, 2026-09-17).
   모바일 160x49 · 로고 15x19(좌 23) · 문구 14px / 데스크톱 169x52 · 로고 16x20 · 문구 15px.
   바탕 흰색 18% · 안쪽 테두리 흰색 45% · r8 */
.ws-dl-soon {
  box-sizing: border-box; display: flex; align-items: center; gap: 7px;
  width: 160px; height: 49px; padding-left: 23px; border-radius: 8px;
  background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  color: #fff;
}
.ws-dl-soon svg { width: 15px; height: 19px; flex: none; display: block; }
.ws-dl-soon b { font-size: 14px; font-weight: 700; line-height: 17px; white-space: nowrap; }

/* 맨 위로 (WS Scroll To Top) */
.ws-top {
  position: fixed; right: 16px; bottom: 16px; width: 48px; height: 48px;
  border: 0; border-radius: 100px; background: var(--bg-dark); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ws-top.on { opacity: 1; pointer-events: auto; }
.ws-top svg { width: 22px; height: 22px; }

/* 상태 화면 */
.ws-state { text-align: center; padding: 64px 24px; }
.ws-state h2 { font-size: 20px; color: var(--text-title); margin-bottom: 12px; }
.ws-state p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; white-space: pre-line; }
.ws-spinner {
  width: 34px; height: 34px; margin: 0 auto 20px; border-radius: 50%;
  border: 3px solid var(--divider); border-top-color: var(--primary);
  animation: ws-spin .8s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   ①-1 구매 모달 (WS Buy Modal)
   ============================================================================ */
.ws-buy { max-width: 590px; text-align: left; padding: 0; overflow: hidden; border-radius: 20px; position: relative; }
.ws-buy-top {
  position: relative; height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(79,166,245,.55), #F2F4F7);
}
.ws-buy-top img { width: 120px; height: 110px; object-fit: contain; border-radius: 12px; }
.ws-buy-top .noart {
  width: 120px; height: 110px; border-radius: 12px; background: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-secondary);
}
.ws-buy .ws-tag { position: absolute; left: 14px; top: 14px; font-size: 11px; padding: 5px 12px; z-index: 1; }
.ws-buy-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; z-index: 1;
  border: 0; border-radius: 100px; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-title); cursor: pointer;
}
.ws-buy-close svg { width: 18px; height: 18px; }
.ws-buy-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ws-buy-body h2 { font-size: 19px; font-weight: 700; color: var(--text-title); text-align: left; }
/* 구성품 목록 — 아이콘 · 수량 · 이름 순. 주문 확인(WS 03)도 같은 규칙을 쓴다 */
.ws-buy-list { display: flex; flex-direction: column; gap: 12px; }
.ws-buy-line { display: flex; align-items: center; gap: 12px; }
.ws-buy-line img { width: 34px; height: 34px; object-fit: contain; border-radius: 10px; flex: none; }
.ws-buy-line .ct { font-size: 14px; font-weight: 700; color: var(--text-title); white-space: nowrap; }
.ws-buy-line .nm { flex: 1 1 0; min-width: 0; font-size: 14px; font-weight: 400; color: var(--text-body); }
.ws-buy .ws-btn-cta {
  height: auto; padding: 13px 20px; border-radius: 100px; gap: 10px;
}
.ws-strike { font-size: 14px; font-weight: 500; opacity: .6; text-decoration: line-through; }

/* 패키지 가치 (1129:428) — 캡션색(#9AA3B2)이 아니라 시안 고유값이다 */
.ws-buy-worth { font-size: 12px; color: #7A8394; }
.ws-buy-worth s { text-decoration: line-through; }

/* 첫 구매 할인 칩 (1129:429). 글자 폭만큼만 차지해야 해서 align-self 로 줄인다 */
.ws-chip-discount {
  align-self: flex-start;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700; line-height: normal;
  padding: 5px 11px; border-radius: 100px;
}

/* ============================================================================
   데스크톱 (768 초과)
   ============================================================================ */
@media (min-width: 769px) {
  /* 정본 491:979 — 아이콘 24, gap 10, 좌우 16 */
  .ws-promo { padding: 12px 16px; gap: 10px; font-size: 15px; justify-content: center; }
  .ws-promo svg { width: 24px; height: 24px; }

  .ws-hero { padding: 32px 0 24px; }
  .ws-hero-nav { top: 222px; width: 44px; height: 44px; }
  .ws-hero-nav svg { width: 22px; height: 22px; }
  /* 슬라이드(--ws-content) 바깥 20px. 자리가 모자라면 8px 까지만 물러난다 */
  .ws-hero-nav.prev { left: max(8px, calc((100% - var(--ws-content)) / 2 - 64px)); }
  .ws-hero-nav.next { right: max(8px, calc((100% - var(--ws-content)) / 2 - 64px)); }
  /* 트랙 자체를 콘텐츠 폭으로 제한해 옆 슬라이드가 바깥 여백에 드러나지 않게 한다. */
  .ws-hero-track { width: calc(100% - 48px); max-width: var(--ws-content); gap: 20px; }
  /* 정본: 인트로 713:570 · 프로모션 711:560 */
  .ws-slide { flex: 0 0 100%; height: 380px; border-radius: 22px; padding: 0 56px; gap: 12px; }
  .ws-slide > img { width: 112px; height: 112px; }
  .ws-slide .badge { font-size: 13px; }
  .ws-slide h2 { font-size: 34px; }
  .ws-slide p { font-size: 16px; }
  .ws-slide .left { font-size: 14px; }
  .ws-slide-btn { padding: 12px 26px; gap: 8px; font-size: 15px; }
  .ws-slide-btn svg { width: 18px; height: 18px; }
  .ws-hero-dots { margin-top: 16px; }

  .ws-quicknav { gap: 12px; padding: 8px 16px; }
  .ws-quicknav .chip-wide { display: inline; }
  .ws-quicknav .chip-narrow { display: none; }

  .ws-page.shop { padding: 64px 24px; max-width: calc(var(--ws-content) + 48px); }
  #sections { gap: 56px; }
  .ws-section-head { margin-bottom: 22px; }
  .ws-section-head h2 { font-size: 26px; }
  .ws-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; grid-auto-rows: 1fr; }
  .ws-grid:has(.first-bonus) .ws-card { padding-bottom: var(--ws-bar-slot); }

  /* 데스크톱 카드 = 세로형. 이미지 칸이 남는 높이를 먹어 같은 줄 카드의 본문이 같은 선에서 시작한다 */
  .ws-row { flex-direction: column; position: relative; }
  .ws-media { width: 100%; flex: 1 1 auto; padding: 18px 16px 16px; gap: 14px; }
  .ws-card:not(.single) .ws-media { min-height: 400px; }
  .ws-card:has(.ws-timer) .ws-media { min-height: 368px; }
  .ws-media > img.art,
  .ws-media > .noart { width: 160px; height: 160px; }
  .ws-items { gap: 10px; }
  .ws-item { width: 66px; }
  .ws-item img { width: 44px; height: 44px; }
  .ws-content { flex: none; padding: 16px 18px; justify-content: flex-start; gap: 14px; }
  .ws-info { gap: 14px; }
  .ws-bonus { gap: 10px; }
  .ws-bonus span { font-size: 15px; }
  .ws-bottom { gap: 8px; }
  /* 태그는 이미지 칸 우상단으로 올라간다(시안 527:1325). 흐름에서 빠지므로 제목이 첫 줄이 된다 */
  .ws-info > .ws-tag { position: absolute; right: 20px; top: 14px; z-index: 1; }
  .ws-price { height: 56px; font-size: 20px; }

  .ws-card.single .ws-media { width: 100%; min-height: 286px; padding: 34px 16px 30px; }
  .ws-card.single .ws-media > img.art,
  .ws-card.single .ws-media > .noart { width: 160px; height: 160px; }
  .ws-card.single .ws-content { padding: 20px 18px; }

  .ws-notice { padding: 28px 24px 36px; font-size: 13px; }

  /* 정본 657:596 — radius 는 모바일과 같은 28 이라 덮지 않는다 */
  .ws-dl { width: calc(100% - 48px); border-radius: 24px; flex-direction: row; justify-content: center; gap: 56px; padding: 72px 24px; text-align: left; }
  .ws-dl-icon { width: 160px; height: 160px; }
  .ws-dl-text { display: flex; flex-direction: column; gap: 8px; }
  .ws-dl p { font-size: 18px; }
  .ws-dl h2 { font-size: 40px; }
  .ws-dl-badges { flex-direction: row; gap: 12px; padding-top: 16px; }
  .ws-dl-badges img { width: 169px; }
  .ws-dl-soon { width: 169px; height: 52px; gap: 8px; }
  .ws-dl-soon svg { width: 16px; height: 20px; }
  .ws-dl-soon b { font-size: 15px; line-height: 18px; }

  .ws-top { right: 40px; bottom: 40px; }

  .ws-buy-top { height: 260px; }
  .ws-buy-top img { width: 180px; height: 160px; }
  .ws-buy-body { padding: 24px 28px 28px; }
}

/* ---------- iOS 바로가기 안내 모달 (WS Overlay 665:1594) ----------
   Dim 은 공용 `.ws-modal-back` 을 쓰고 본체만 여기서 만든다 — 이 모달은 위쪽 그림
   영역이 카드 끝까지 꽉 차야 해서 `.ws-modal`(사방 패딩)과 구조가 다르다.
   iOS 전용이라 데스크톱 시안은 없다(홈 화면 추가 자체가 모바일 기능). */
.ios-guide { width: 312px; max-width: 100%; background: var(--bg-card);
  border-radius: 16px; overflow: hidden; text-align: left; }

.ios-guide-visual { position: relative; height: 190px; background: #DCEBFA; overflow: hidden; }
/* 폰은 이 영역(190px)보다 크다(200px) — 아래가 잘려 나가는 게 시안 의도다 */
.ios-guide-phone { position: absolute; left: 81px; top: 34px; width: 150px; height: 200px;
  background: #2A3140; border-radius: 24px; overflow: hidden; }
.ios-guide-screen { position: absolute; left: 6px; top: 6px; width: 138px; height: 188px;
  background: linear-gradient(#BFDCF5, var(--ws-bg)); border-radius: 18px; overflow: hidden; }
.ios-guide-tile { position: absolute; top: 44px; width: 42px; height: 42px;
  border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.ios-guide-tile.game { left: 16px; background: #fff; }
.ios-guide-tile.game img { width: 100%; height: 100%; object-fit: cover; }
.ios-guide-tile.store { left: 80px; background: var(--primary); color: #fff; }
.ios-guide-tile.store svg { width: 22px; height: 22px; display: block; }
/* 라벨은 각 타일 중앙에 건다 — 타일보다 넓어서(62px) 좌우로 넘쳐도 된다 */
.ios-guide-label { position: absolute; top: 90px; width: 62px; margin-left: -31px;
  font-size: 8px; line-height: 12px; text-align: center; color: var(--text-title); }
.ios-guide-label.game { left: 37px; }
.ios-guide-label.store { left: 101px; }

.ios-guide-close { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: 100px; background: var(--bg-card);
  color: var(--text-title); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.ios-guide-close svg { width: 18px; height: 18px; display: block; }

.ios-guide-body { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px 20px 24px; }
.ios-guide-body h2 { font-size: 16px; font-weight: 700; line-height: 24px;
  color: var(--text-title); text-align: center; }
/* 스텝은 글과 아이콘이 한 줄에 섞인다. 좁은 화면에서 줄바꿈되도록 wrap 을 둔다 */
.ios-guide-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 6px; font-size: 15px; font-weight: 500; color: var(--text-title);
  /* line-height 를 명시하지 않으면 바깥에서 24px 가 상속돼 줄 높이가 아이콘(22px)보다
     커진다. 시안은 normal 이고, 그래야 카드 높이가 354 로 맞는다(실측 358 -> 354). */
  line-height: normal; }
.ios-guide-step svg { width: 22px; height: 22px; display: block; color: var(--primary); }

/* ============================================================================
   마일리지 상점 (2026-09-01)
   ============================================================================ */

/* 마일리지 상품 — 현금 상품과 **버튼 색을 다르게** 쓴다(기획서 3).
   결제 수단이 다르다는 것이 한눈에 보여야 마일리지로 현금 상품을 산다고 오해하지 않는다.

   ⚠ 값은 전부 시안 정본이다(get_design_context: 1197:8420 모바일 · 1197:8651 데스크톱).
     눈으로 고르지 말 것 — 처음에 #6C5CE7 을 임의로 골랐다가 통째로 틀렸다.
     모바일 h52 · 아이콘/글자 18 / 데스크톱 h56 · 아이콘/글자 20. gap 은 7. */
.ws-price.mile,
.ws-btn-cta.mile {
  background: #38BCE0; color: #fff;
  border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 52px; font-size: 18px;
}
.ws-price.mile img,
.ws-btn-cta.mile img { width: 18px; height: 18px; object-fit: contain; }
/* 구매 모달의 마일리지 버튼(1240:8673 Buy Button)은 카드와 달리 세로 16 패딩 · 간격 10 이다.
   카드 규칙(h52 · gap 7)이 뒤에 선언돼 모달 기본(gap 10)을 덮으므로 여기서 되돌린다. */
.ws-buy .ws-btn-cta.mile { height: auto; padding: 16px 20px; gap: 10px; }

/* 잔액 부족 — 버튼은 살려 두고(누르면 토스트) 보너스 줄 자리에 경고색으로 적는다.
   가격이 버튼 안 흰 글씨라 거기에는 경고색을 못 쓴다.
   ⚠ 코인 아이콘이 붙는다(시안 State=잔액 부족). 아이콘 없이 글자만 두면 무슨 재화가
     모자란지 줄 첫머리에서 안 보인다. */
.ws-short {
  margin: 4px 0 0;
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 500; color: #E23B3B;
}
.ws-short img { width: 14px; height: 14px; object-fit: contain; flex: none; }

/* 마일리지 적립 줄만 색이 다르다 — 잼 보너스(#8B5CF6)와 재화가 다르기 때문이다 */
.ws-bonus span.mile { color: #017FA3; }
.ws-bonus .ws-mile-wide, .ws-bonus .ws-mile-narrow { color: inherit; }
.ws-bonus .ws-mile-wide { display: inline; }
.ws-bonus .ws-mile-narrow { display: none; }
/* 모바일 패키지만 축약(1203:1019). 단품 잼은 모바일도 전체 문구(1203:1014). */
@media (max-width: 768px) {
  .ws-card:not(.single) .ws-mile-wide { display: none; }
  .ws-card:not(.single) .ws-mile-narrow { display: inline; }
  /* 모바일 잔액 부족 줄은 Info 안에서 제목과 gap 8 만 둔다(시안 Info 20+8+17=45, 2026-09-17) */
  .ws-short { margin: 0; }
}

/* 데스크톱 마일리지 카드 — 구성품 줄이 없어 이미지가 크고 여백이 넓다.
   일반 카드(이미지 160 · 여백 18/16/16 · 버튼 54)와 값이 다르다. */
@media (min-width: 769px) {
  .ws-card.mile .ws-media { min-height: 254px; padding: 34px 16px 30px; }
  .ws-card.mile .ws-media > img.art,
  .ws-card.mile .ws-media > .noart { width: 190px; height: 190px; }
  .ws-card.mile .ws-content { padding: 20px 18px; gap: 14px; }
  .ws-price.mile,
  .ws-btn-cta.mile { height: 56px; font-size: 20px; }
  .ws-price.mile img,
  .ws-btn-cta.mile img { width: 20px; height: 20px; }
}

/* 섹션 안내 한 줄 (마일리지 샵). 제목 바로 아래 */
.ws-section-desc {
  margin: -4px 0 14px; font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}