/* ============================================================================
   웹스토어 공통 스타일
   정본: BookStack "26.08.13 웹스토어 화면 구조"
   - 모바일 우선. 브레이크포인트 768 (이하 = 모바일 / 초과 = 데스크톱, 콘텐츠 폭 1280)
   - 태블릿 전용 분기 없음(권장안). 768~1280 은 데스크톱 유동 폭
   사이트 전역 style.css 는 건드리지 않는다(웹스토어만의 규칙이므로).
   ============================================================================ */

/* [hidden] 은 display:none 이지만 요소에 display 를 주면 그쪽에 밀린다.
   이 프로젝트에서 이미 여러 번 밟았다 — 숨겼다고 생각한 요소가 화면에 남고,
   눌러도 아무 일이 없는 상태가 된다. 개별로 막지 말고 여기서 한 번에 이긴다. */
[hidden] { display: none !important; }

:root {
  /* style.css 토큰과 다른 것만 새로 잡는다 */
  --ws-bg: #EDF6FD;          /* 웹스토어 배경 (홈페이지 --bg-page 와 다르다) */
  --ws-bonus: #8B5CF6;       /* 첫 구입 보너스 래퍼 */
  --ws-bar-h: 56px;
  /* 프로모션 띠 높이 — 퀵내비 sticky 기준점 계산용.
     실제 높이(패딩 12*2 + 아이콘)와 같아야 한다. 아이콘 크기를 바꾸면 여기도 바꾼다. */
  --ws-promo-h: 44px;
  /* 퀵내비: 바 패딩 16 + 칩(패딩 16 + 글줄 18 + 선 2) = 52px. */
  --ws-qnav-h: 52px;
  --ws-content: 1280px;
  --ws-panel-shadow: inset 0 0 0 1px var(--divider), 0 8px 24px -4px rgba(18,22,29,.10);
}

body.ws { background: var(--ws-bg); line-height: 1.2; }

/* 웹스토어 폰트는 Noto Sans KR 하나로 확정이다(시안 "기본 정보" 절).
   이 오버라이드는 --font-display 가 다른 폰트를 갖게 되는 날을 막는 안전선이다. 실제로
   2026-09-16 에 style.css 의 Cafe24 Ssurround 를 살리려고 파일을 넣었다가 이 줄 덕분에
   어긋남이 드러나 선언째로 뺐다. 홈페이지가 다시 제목 폰트를 들이더라도 여기는 안 따라간다. */
body.ws h1, body.ws h2, body.ws h3 { font-family: var(--font-body); }

/* 페이지 본문 공통 폭
   --ws-content 는 **시안의 콘텐츠 폭**이다(패딩을 뺀 안쪽 폭).
   box-sizing 이 border-box 라 max-width 가 패딩을 포함하므로 여기서 한 번만
   더해 준다. 화면마다 +32 를 손으로 더하면 다음에 또 틀린다 —
   실제로 주문 확인·구매 내역·환불 신청 세 곳이 같은 이유로 32px 씩 좁았다.
   화면별 폭은 --ws-content 를 덮어쓰는 것으로 지정한다. */
.ws-page {
  --ws-pad: 16px;
  /* ⚠ width:100% 가 없으면 안 된다. body.ws 가 flex(column) 컨테이너인데
     flex 아이템에 교차축 auto 마진(margin: 0 auto)이 있으면 stretch 가 죽고
     **내용 폭으로 줄어든다**. 그러면 max-width 는 상한일 뿐 도달하지 못한다.
     실측: 이 줄이 없을 때 792px 짜리가 417px 로 그려졌다(뷰포트 1438). */
  width: 100%;
  max-width: calc(var(--ws-content) + var(--ws-pad) * 2);
  margin: 0 auto;
  padding: 24px var(--ws-pad) 48px;
}
.ws-page h1 { font-size: 24px; font-weight: 700; color: var(--text-title); }

/* ---------- 버튼 (WS Button) ---------- */
.ws-btn, .ws-btn-ghost, .ws-btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  /* 알약형 — WS Button 전 변형의 cornerRadius 가 8 → 100 으로 바뀌었다(Figma 2026-09-17 동기화). */
  height: 48px; padding: 0 28px; border-radius: 100px; border: 0;
  font-family: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.ws-btn       { background: var(--primary); color: #fff; }
.ws-btn-ghost {
  background: transparent; color: var(--primary);
  /* WS Button의 INSIDE stroke(657:464). 테두리가 콘텐츠 폭에 더해지지 않는다. */
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
.ws-btn-cta   { background: var(--cta); color: var(--text-title); }
.ws-btn:where(:not(:disabled):not([aria-disabled="true"])):hover { background: var(--primary-hover); }
.ws-btn-cta:where(:not(.mile):not(:disabled):not([aria-disabled="true"])):hover { background: var(--cta-hover); }
.ws-btn-ghost:where(:not(:disabled):not([aria-disabled="true"])):hover {
  background: color-mix(in srgb, var(--primary-light) 15%, transparent);
}
/* Pressed 원본 737:1099~1109: Hover RGB의 80%, Secondary는 같은 색의 alpha 27%. */
.ws-btn:where(:not(:disabled):not([aria-disabled="true"])):active { background: color-mix(in srgb, var(--primary-hover) 80%, black); }
.ws-btn-cta:where(:not(.mile):not(:disabled):not([aria-disabled="true"])):active { background: color-mix(in srgb, var(--cta-hover) 80%, black); }
.ws-btn-ghost:where(:not(:disabled):not([aria-disabled="true"])):active {
  background: color-mix(in srgb, var(--primary-light) 27%, transparent);
}
.ws-btn:disabled, .ws-btn-ghost:disabled, .ws-btn-cta:disabled {
  background: var(--divider); color: var(--text-caption); border-color: var(--divider); cursor: default;
}
.ws-btn-ghost:disabled { background: transparent; box-shadow: inset 0 0 0 1.5px var(--divider); }
.ws-btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.ws-btn-full { width: 100%; }

/* ============================================================================
   상단바
   ============================================================================ */
/* 스크롤해도 따라온다 — 퀵 내비(WS Section Index)가 이 바로 아래에 붙는 전제다.
   ⚠ sticky 는 **부모 안에서만** 유효하다. .ws-bar 에 걸면 감싼 #ws-header 높이(=바 높이)를
   벗어나는 순간 사라지므로, 마운트 지점인 #ws-header 에 건다. */
#ws-header { position: sticky; top: 0; z-index: 200; }
.ws-bar {
  background: var(--bg-card); border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  height: var(--ws-bar-h); padding: 0 16px;
}
.ws-bar-l, .ws-bar-r { display: flex; align-items: center; gap: 12px; }
.ws-logo img { height: 30px; display: block; filter: invert(1) brightness(0.2); }

/* 뉴스 · 웹스토어 · 쿠폰 사용 — 데스크톱만. 모바일은 햄버거 안으로 들어간다 */
.ws-nav { display: none; gap: 28px; }
.ws-nav a, .ws-coupon { font-size: 16px; font-weight: 700; color: var(--text-title); white-space: nowrap; }
.ws-coupon { display: none; }
.ws-coupon.is-current { color: var(--primary); }
.ws-nav a.is-current { color: var(--primary); position: relative; }
.ws-nav a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--primary);
}

/* 보유 잼 — 로그인 후에만. 모바일에도 노출한다 */
.ws-gem { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--text-title); }
.ws-gem img { width: 18px; height: 18px; object-fit: contain; }

/* ⚠ 상단바 재화 표기는 모바일/데스크톱 값이 다르다(시안 WS Tabbar 507:642).
   모바일 아이콘 18 · 글자 14 · gap 5 / 데스크톱 20 · 15 · 6. 아래 미디어쿼리에서 올린다.

   마일리지 잔액 — 잼과 같은 틀, 잼 **왼쪽**에 놓는다(기획서 4).
   ⚠ 음수가 될 수 있다. 환불로 회수할 마일리지가 모자라면 그만큼 부채로 남고
     표시 잔액이 `지갑 - 부채` 라 마이너스로 내려간다. 0 으로 뭉개면 유저가
     왜 못 사는지 알 수 없다 — 그대로 보여 주고 색만 경고색으로 바꾼다. */
.ws-mile { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--text-title); }
.ws-mile img { width: 18px; height: 18px; object-fit: contain; }
.ws-mile.neg b { color: #E23B3B; }

/* 공용 토스트 (WS Toast 1236:992 / 1236:995). 마일리지 부족 안내가 첫 사용처지만
   쿠폰 오류 등 다른 안내에도 쓴다 — 화면마다 자기 방식으로 알리면 위치가 제각각이 된다.
   시안 1236:992/995 — 배경 #12161D 92% · r100. D/M 패딩·글자 크기가 다르다. */
.ws-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 12px);
  /* left:50%의 남은 반쪽 폭으로 shrink-to-fit 하지 않도록 본문 기준 폭을 준다. */
  z-index: 12000; width: max-content; max-width: min(92vw, 480px);
  padding: 12px 20px; border-radius: 100px;
  background: rgba(18,22,29,.92); color: #fff;
  font-size: 14px; font-weight: 500; line-height: 17px; text-align: center;
  box-shadow: 0 6px 18px -2px rgba(18,22,29,.24);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.ws-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ws-toast { transition: none; } }

/* 유저 알약은 데스크톱, 비로그인 버튼은 D/M 모두 노출(510:673 / 510:702). */
.ws-user { display: none; }
.ws-login-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 18px; border: 0; border-radius: 100px;
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 16px; white-space: nowrap;
}
.ws-user-wrap { position: relative; display: none; }
.ws-menu {
  position: absolute; right: 0; top: calc(50% + var(--ws-bar-h) / 2 + 8px); width: 220px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-card); border: 0; border-radius: 14px;
  box-shadow: 0 12px 28px -4px rgba(18,22,29,.12); padding: 8px 0; z-index: 300;
}
.ws-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 13px 18px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 18px; color: var(--text-title); cursor: pointer;
}
.ws-menu button:hover { background: var(--ws-bg); }
.ws-menu [data-act="logout"] { color: var(--text-secondary); }

/* 햄버거 — 모바일만 */
.ws-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-title);
}
.ws-burger svg { width: 24px; height: 24px; }

/* ---------- 모바일 메뉴 (우측 패널) ---------- */
.ws-drawer-back {
  position: fixed; inset: 0; background: rgba(18,22,29,.45); z-index: 400;
  display: flex; justify-content: flex-end;
}
.ws-drawer {
  width: 280px; max-width: 82vw; height: 100%; background: var(--bg-card);
  padding: 20px; display: flex; flex-direction: column;
}
.ws-drawer-close {
  align-self: flex-end; width: 30px; height: 30px; padding: 0 0 8px;
  border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text-secondary); cursor: pointer;
}
.ws-drawer-acc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 6px 0 4px;
  font-size: 18px; color: var(--text-title);
}
.ws-drawer-acc .ws-gem { font-size: 15px; gap: 6px; }
.ws-drawer-list { display: flex; flex-direction: column; }
.ws-drawer-list a, .ws-drawer-list button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 16px 0; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2;
  color: var(--text-title); cursor: pointer;
}
.ws-drawer-list .ws-drawer-news, .ws-drawer-list [data-act="logout"] { box-shadow: inset 0 1px var(--divider); }
.ws-drawer-list [data-act="logout"] { color: var(--text-secondary); }

/* ---------- 확인 팝업 ---------- */
.ws-modal-back {
  position: fixed; inset: 0; background: rgba(18,22,29,.45); z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ws-modal {
  background: var(--bg-card); border-radius: 18px; padding: 28px 24px 22px;
  width: 100%; max-width: 400px; text-align: center;
}
.ws-modal h2 { font-size: 19px; font-weight: 700; color: var(--text-title); }
.ws-modal p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; margin: 14px 0 22px; }
.ws-modal-btns { display: flex; gap: 10px; }
.ws-modal-btns > * { flex: 1 1 0; padding: 0; }

/* 로그아웃 시안 631:6298/6307. 실제 안내 길이에 따라 높이는 늘어나도록 둔다. */
.ws-modal.ws-logout {
  width: 312px; max-width: 100%; border-radius: 20px; padding: 48px 36px 40px;
  display: flex; flex-direction: column; gap: 36px;
}
.ws-logout-copy { display: flex; flex-direction: column; gap: 20px; }
.ws-logout h2 { font-size: 17px; line-height: 20px; }
.ws-logout p { margin: 0; font-size: 13px; line-height: 16px; }
.ws-logout .ws-modal-btns { gap: 12px; }
@media (min-width: 769px) {
  .ws-modal.ws-logout { width: 420px; }
  .ws-logout h2 { font-size: 19px; line-height: 23px; }
  .ws-logout p { font-size: 14px; line-height: 17px; }
}

/* ---------- 안내 배너 (WS Alert Banner 639:5953) ----------
   시안이 정한 두 종류만 쓴다. 화면마다 색을 새로 고르면 같은 성격의 안내가
   화면마다 다른 색으로 나온다 — 실제로 네 화면이 제각각이었다.
     오류(빨강)  진행이 실패해 다시 시도해야 하는 것 (결제 실패 복귀, 로그인 실패)
     경고(주황)  입력이 거부된 것 (쿠폰 실패 4종) */
.ws-alert {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 12px;
  /* 639:5948/5952의 INSIDE 선은 본문 폭과 높이에 더해지지 않는다. */
  border: 0; box-shadow: inset 0 0 0 1px currentColor; font-size: 14px; line-height: 17px;
}
.ws-alert::before { content: "!"; font-weight: 700; flex: none; }
.ws-alert.error { background: #FDF0F0; border-color: #D94848; color: #D94848; }
.ws-alert.warn  { background: #FDF6ED; border-color: #E67E22; color: #E67E22; }

/* ============================================================================
   푸터 (Figma "WS Footer / Desktop" 500:3410)
   시안은 데스크톱도 **중앙 정렬**이다. 사업자 정보만 데스크톱에서 좌측으로 간다.
   ============================================================================ */
/* ⚠ 시안이 다크에서 라이트로 바뀌었다(WS Footer / Desktop 500:3410, 2026-09-01 확인).
   배경 #F2F4F7 · 링크 #343A46 15 Medium · SNS rgba(52,58,70,.1) · 보조문 #7A8394 13. */
.ws-footer { background: #F2F4F7; padding: 32px 16px; }
.ws-footer-inner {
  max-width: var(--ws-content); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
/* 로고는 D 162×56 / M 127×44(1159:426 / 1159:468). */
.ws-footer-logo img { width: 127px; height: 44px; object-fit: contain; display: block; }

.ws-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.ws-footer-links a { font-size: 14px; font-weight: 500; line-height: 17px; color: var(--text-title); white-space: nowrap; }
.ws-footer-links a:hover { color: var(--primary); }

/* SNS — D 40 / M 36px. URL 이 없는 채널은 흐리게(눌러도 안 되는 것이 보이게) */
.ws-footer-sns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ws-sns {
  width: 36px; height: 36px; border-radius: 100px; background: rgba(52,58,70,.1);
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-sns .ic { width: 20px; height: 20px; display: block; }
.ws-sns[title*="X"] .ic { width: 16px; height: 16px; }
.ws-sns.off { opacity: .45; cursor: default; }
a.ws-sns:hover { background: rgba(52,58,70,.18); }

/* 언어 선택 — 위로 열린다 */
.ws-lang-wrap { position: relative; }
.ws-lang {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 16px; border-radius: 100px;
  background: none; border: 0; box-shadow: inset 0 0 0 1px var(--divider);
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 17px; color: var(--text-title); cursor: pointer;
}
.ws-lang .ic { width: 16px; height: 16px; display: block; }
.ws-lang i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-style: normal; font-size: 13px; color: var(--text-secondary); }
.ws-lang-menu {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 8px);
  min-width: 160px; max-height: 320px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--divider);
  border-radius: 12px; padding: 6px 0; z-index: 300;
  box-shadow: 0 12px 28px -4px rgba(18,22,29,.14);
}
.ws-lang-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 10px 16px; font-family: inherit; font-size: 14px; color: var(--text-body); cursor: pointer;
  white-space: nowrap;
}
.ws-lang-menu button:hover { background: var(--bg-page); }
.ws-lang-menu button.on { color: var(--primary); font-weight: 700; }
.ws-lang-menu button.on::after { content: " ✓"; }

/* 선택기 행 — 언어(글자) + 국가(돈)를 한 줄에. 국가가 감춰지면 언어만 가운데 선다. */
.ws-footer-selectors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

/* 사업자 정보 — 웹스토어에만. 값 확정본(2026-09-16), 긴 주소는 자연 줄바꿈 */
.ws-footer-biz {
  display: flex; flex-direction: column; gap: 4px; align-self: stretch; text-align: left;
  font-size: 12px; line-height: 14px; color: var(--text-secondary);
}
/* 저작권 한 줄 — 시안은 D/M 이 같은 문구다(500:3410 / 500:3445) */
.ws-copy-full { font-size: 12px; line-height: 14px; color: var(--text-secondary); }

/* ============================================================================
   데스크톱 (768 초과)
   ============================================================================ */
@media (min-width: 769px) {
  :root { --ws-bar-h: 72px; --ws-promo-h: 48px; }

  .ws-bar { padding: 0 40px; }
  .ws-bar-l, .ws-bar-r { gap: 28px; }
  .ws-logo img { height: 44px; }
  .ws-nav { display: flex; }
  .ws-coupon { display: block; }
  .ws-burger { display: none; }

  .ws-user {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px 10px 20px; border-radius: 100px;
    background: var(--bg-card); border: 1.5px solid var(--primary);
    font-family: inherit; font-size: 15px; font-weight: 700; color: var(--primary); cursor: pointer;
  }
  .ws-user-wrap { display: block; }
  .ws-user svg { width: 14px; height: 14px; }
  .ws-login-btn {
    height: 40px; padding: 0 26px; font-size: 15px; line-height: 18px;
  }

  /* 좌우 패딩을 바꿀 때는 --ws-pad 도 같이 바꿔야 콘텐츠 폭이 시안과 맞는다 */
  .ws-page { --ws-pad: 24px; padding: 40px var(--ws-pad) 72px; }
  .ws-page h1 { font-size: 32px; }

  /* 상단바 재화 — 데스크톱 값 (시안 507:642) */
  .ws-gem, .ws-mile { gap: 6px; font-size: 15px; }
  .ws-gem img, .ws-mile img { width: 20px; height: 20px; }
  .ws-toast { padding: 14px 24px; font-size: 16px; line-height: 19px; }

  /* Footer Content는 아래 32px, 바깥 프레임은 위아래 48px(1159:425 / 500:3410). */
  .ws-footer { padding: 48px 24px; }
  .ws-footer-inner { padding-bottom: 32px; }
  .ws-footer-logo img { width: 162px; height: 56px; }
  .ws-footer-links { gap: 32px; }
  .ws-footer-links a { font-size: 15px; line-height: 18px; }
  .ws-footer-sns { gap: 16px; }
  .ws-sns { width: 40px; height: 40px; }
  .ws-lang { padding: 10px 16px 10px 18px; font-size: 15px; line-height: 18px; }
  .ws-footer-biz, .ws-copy-full { font-size: 13px; line-height: 16px; }
}


/* ============================================================================
   쿠폰 사용 (WS 05)
   ============================================================================ */
.cp-narrow { --ws-content: 560px; }   /* 시안 Inner 560 (514:625) */
.cp-lead { font-size: 13px; color: var(--text-secondary); margin-top: 16px; }

/* 계정 칩 (WS Account Chip 645:6100)
   노출 자체가 "이 계정으로 지급된다" 는 안내를 대신한다(별도 문구 없음).
   가로 알약이 아니라 **세로 스택**이고 배경이 없다. */
.ws-chip {
  width: max-content; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 0; margin-top: 16px;
}
.ws-chip-name { font-size: 19px; font-weight: 700; color: var(--text-title); }
.ws-chip-id { font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.ws-chip-stats { display: flex; align-items: center; gap: 8px; }
.ws-chip-lv { font-size: 14px; font-weight: 700; color: var(--text-title); }
.ws-chip-sep { font-size: 13px; color: #C8D0DA; }
.ws-chip .ws-gem { font-size: 14px; font-weight: 700; color: var(--text-title); }
.ws-chip .ws-gem img { width: 16px; height: 16px; }

.cp-card {
  background: var(--bg-card); border-radius: 18px; padding: 20px 18px;
  box-shadow: var(--ws-panel-shadow);
  display: flex; flex-direction: column; gap: 12px; margin-top: 16px;
}
/* 입력칸 배경은 --bg-page 다. --ws-bg(페이지 배경)를 쓰면 카드 위에서 구분이 안 된다 */
.cp-input {
  width: 100%; height: 46px; padding: 0 16px; border-radius: 12px;
  background: var(--bg-page); border: 0; box-shadow: inset 0 0 0 1.5px var(--divider);
  font-size: 15px; color: var(--text-title); font-family: inherit;
}
.cp-input::placeholder { color: var(--text-caption); }
.cp-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--primary); }
.cp-help { font-size: 13px; color: var(--text-caption); line-height: 1.6; }

.cp-card.cp-done { text-align: center; padding: 36px 24px; }
.cp-check {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto;
  background: #E2F6EC; color: #16A05B;
  display: flex; align-items: center; justify-content: center;
}
.cp-check svg { width: 28px; height: 28px; }
.cp-done h2 { font-size: 17px; font-weight: 700; color: var(--text-title); }
.cp-done p { font-size: 13px; color: var(--text-secondary); }

@media (min-width: 769px) {
  .cp-lead { margin-top: 22px; font-size: 15px; }
  .cp-card { padding: 30px; margin-top: 22px; }
  .cp-done h2 { font-size: 19px; }
  .cp-done p { font-size: 14px; }
}


/* ============================================================================
   비로그인 게이트 (WS Login Gate) — 쿠폰·구매 내역 공용
   ============================================================================ */
.ws-gate {
  background: var(--bg-card); border-radius: 18px; padding: 36px 24px; text-align: center; margin-top: 24px;
  box-shadow: var(--ws-panel-shadow);
}
.ws-gate p { font-size: 14px; color: var(--text-secondary); line-height: 1.2; margin-bottom: 16px; }
.ws-page:has(.ws-gate:not([hidden])) > h1 { text-align: center; }


/* ============================================================================
   구매 내역 (WS 06)
   정본: Figma 514:773(Desktop) / 514:854(Mobile) — 대조 규칙은 /FIGMA.md
   2026-08-24 대조 완료. 배지 r100 · 4/10 · 12/700 · border 1.2px,
   행 간격 16(M) / 22(D), 행 padding 16(M) / 20·22(D) 모두 정본과 일치.
   ============================================================================ */
.od-narrow { --ws-content: 760px; }   /* 시안 Inner 760 (514:773) */

.od-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.od-row {
  background: var(--bg-card); border-radius: 14px; padding: 16px;
  box-shadow: var(--ws-panel-shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.od-top { display: flex; align-items: center; gap: 10px; }
/* 날짜와 주문번호. 주문번호는 CS 가 실제로 찾는 값이라 자르지 않고 그대로 보여 준다 */
.od-meta { flex: 1 1 0; min-width: 0; font-size: 13px; color: var(--text-caption); word-break: break-all; }
.od-state {
  flex-shrink: 0; border-radius: 100px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; box-shadow: inset 0 0 0 1.2px currentColor; white-space: nowrap;
}
/* 상태 5종. 시안(514:778/788/796)에 있는 건 앞의 둘과 refunded 뿐이고,
   전부 "테두리+글씨" 한 규칙이다. 채우기는 시안에 없다.
   refunding·rejected 는 우리가 늘린 상태라 색을 우리가 정한다 —
   같은 규칙 안에서, 서로 구별되게. */
.od-state.granted    { color: var(--accent-event); }   /* 지급 완료 */
.od-state.claimed    { color: var(--text-secondary); } /* 수령 완료 */
.od-state.refunding  { color: var(--primary); }        /* 환불 처리 중 — 진행 중이라 파랑 */
.od-state.refunded   { color: var(--tag-maint); }      /* 환불 (정본) */
.od-state.rejected   { color: var(--el-fire); }        /* 환불 거절 */
.od-bottom {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 700; color: var(--text-title);
}
.od-name { flex: 1 1 0; min-width: 0; }
.od-price { flex-shrink: 0; white-space: nowrap; }
.od-action { align-self: flex-start; }
/* 신청할 수 없는 주문은 버튼을 숨기지 않고 사유를 보여 준다 —
   제한 사실을 표시하지 않으면 제한 자체가 무효가 된다(전자상거래법 §17-6). */
.od-locked {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}

/* ---------- 청약철회 안내 문서 ---------- */
.rf-doc { margin-top: 8px; }
.rf-doc h2 {
  margin: 26px 0 8px; font-size: 15px; font-weight: 700; color: var(--text-title);
}
.rf-doc h2:first-child { margin-top: 0; }
.rf-doc p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.rf-doc a { color: var(--accent-event); text-decoration: underline; }
.rf-biz { padding: 12px 14px; background: var(--bg-page); border-radius: 12px; }
.rf-todo { font-size: 12px; color: var(--tag-maint); }

.od-more { display: flex; justify-content: center; margin-top: 18px; }
.od-foot { margin-top: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.od-foot a { font-weight: 700; color: var(--primary); text-decoration: underline; }

.od-empty { text-align: center; padding: 48px 0; }
.od-empty h2 { font-size: 18px; font-weight: 700; color: var(--text-title); }
.od-empty p { font-size: 14px; color: var(--text-secondary); margin: 14px 0; }


@media (min-width: 769px) {
  .od-list { gap: 22px; margin-top: 22px; }
  .od-row { padding: 20px 22px; }
  .od-bottom { font-size: 18px; }
  .od-state { font-size: 12px; }
  .od-empty { padding: 64px 0; }
}

/* ── 결제창 임베드 (js/ws-checkout.js 와 한 쌍) ────────────────────────────
   클래스 이름은 JS 가 붙인다. 여기를 지우면 결제창이 본문 흐름에 끼어들어
   깨지므로, JS 를 걷어낼 때 같이 걷어낼 것. */
.dr-pay-frame {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh;
  border: 0; z-index: 9999;
}
/* iOS 사파리의 주소창 때문에 100vh 가 화면보다 크다. 지원하면 svh 로 바꾼다. */
@supports (height: 100svh) {
  .dr-pay-frame { height: 100svh; }
}
/* 결제창이 화면을 덮는 동안 뒤 페이지가 같이 스크롤되지 않게 한다 */
body.dr-pay-open { overflow: hidden; }