/* JETT SHOP 웹자판기 — 남색 빛이 도는 어두운 바탕과 파란 강조색 위에 Flick 디자인 시스템의 부품 모양을 쓴다.
   (세그먼트 컨트롤, 테두리 배지, 아이콘 자리표시, 줄로 나눈 목록, 가운데 정렬 다이얼로그). 모서리는 일반 둥글기(border-radius)만 쓴다.
   크기(버튼 44px, 입력 48px, 카테고리 46px, 카드 글자 18px 등)는 상점 화면에 맞게 Flick보다 한 단계 크게 쓴다. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("/assets/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-display: swap;
}
@font-face {
  font-family: "Inter Variable";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  color-scheme: dark;
  --bg: #0a0c12;
  --bg-glow: rgba(58, 84, 196, 0.32);
  --bg-elevated: #15161b;
  --bg-inset: #111319;
  --card: #15161b;
  --card-hover: #1a1b21;
  --fill-subtle: rgba(255, 255, 255, 0.035);
  --fill: rgba(255, 255, 255, 0.06);
  --fill-strong: rgba(255, 255, 255, 0.1);
  --control-bg: rgba(255, 255, 255, 0.03);
  --control-hover: rgba(255, 255, 255, 0.06);
  --control-fill: #24262d;
  --control-fill-strong: #2c2f37;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --border-focus: rgba(110, 162, 255, 0.6);
  --hairline: rgba(255, 255, 255, 0.06);
  --fg: #f2f3f5;
  --fg-muted: #a0a4ad;
  --fg-subtle: #6f737c;
  --primary: #2f80ff;
  --primary-2: #4c93ff;
  --label: #6ea2ff;
  --contrast: #f2f3f5;
  --contrast-fg: #101114;
  --star: #f5b13d;
  --success: #3fd68c;
  --success-bg: rgba(63, 214, 140, 0.1);
  --success-border: rgba(63, 214, 140, 0.24);
  --info-bg: rgba(46, 124, 246, 0.1);
  --info-border: rgba(46, 124, 246, 0.26);
  --danger: #fb6a6a;
  --danger-bg: rgba(251, 106, 106, 0.1);
  --danger-border: rgba(251, 106, 106, 0.24);
  --warning: #f5b13d;
  --warning-bg: rgba(245, 177, 61, 0.11);
  --warning-border: rgba(245, 177, 61, 0.26);
  --ring: rgba(76, 147, 255, 0.7);
  --dialog-bg: #121318;
  --scrim: rgba(3, 4, 8, 0.7);
  --shadow-dialog: 0 40px 100px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.13);
  --content-max: 1320px;
  --sans: "Inter Variable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --num: "Pretendard Variable", "Inter Variable", -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fade: cubic-bezier(0.37, 0, 0.63, 1);
}

* { box-sizing: border-box; }
/* 스크롤바는 바탕 없이 손잡이만(모든 스크롤 영역에 물려받음) */
html { -webkit-text-size-adjust: 100%; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
/* 화면 전체는 고정하고 상단 바 아래 .scroller만 스크롤한다 → 스크롤바가 상단 바 아래에서 시작 */
body {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.55;
  letter-spacing: -0.011em; font-synthesis: none; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word;
  background: radial-gradient(1100px 520px at 12% -8%, var(--bg-glow), transparent 70%),
              radial-gradient(900px 480px at 100% 0%, rgba(32, 46, 110, 0.25), transparent 70%), var(--bg);
  background-attachment: fixed;
}
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
svg.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.icon.fill { fill: currentColor; stroke: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
kbd { font-family: var(--sans); font-size: 12px; line-height: 1; color: var(--fg-subtle); border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.caption { color: var(--fg-subtle); font-size: 13.5px; }
.hint { color: var(--fg-muted); font-size: 13.5px; line-height: 1.6; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color 170ms var(--ease-fade), color 170ms var(--ease-fade), opacity 170ms var(--ease-fade);
}
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn.primary { background: linear-gradient(180deg, var(--primary-2), var(--primary)); color: #fff; box-shadow: 0 8px 24px -10px rgba(47, 128, 255, 0.8); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.contrast, .btn.light { background: var(--contrast); color: var(--contrast-fg); }
.btn.contrast:hover, .btn.light:hover { background: #fff; }
.btn.ghost { color: var(--fg-muted); font-weight: 500; }
.btn.ghost:hover { background: var(--control-hover); color: var(--fg); }
.btn.danger, .btn.danger:hover { color: var(--danger); }
.btn.solid { background: var(--control-fill); color: var(--fg); }
.btn.solid:hover { background: var(--control-fill-strong); }
.btn.block { width: 100%; height: 50px; font-size: 16px; }
.btn.sm { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; }
.btn.sm .icon { width: 16px; height: 16px; }

/* ---------- 상단 바 ---------- */
/* 본문이 밑으로 지나가지 않으니 바탕 없이 둔다(어두운 바탕을 깔면 배경 빛이 상단 바 아래에서 띠처럼 끊겨 보임) */
.topbar { position: relative; z-index: 20; flex: none; border-bottom: 1px solid var(--border); }
.scroller { flex: 1; min-height: 0; overflow-y: auto; }
/* 넓은 화면: 스크롤바 폭만큼 왼쪽도 비워서 본문이 상단 바와 같은 가운데에 오게 */
@media (min-width: 901px) { .scroller { scrollbar-gutter: stable both-edges; } }
.scroller:focus, .scroller:focus-visible { outline: none; box-shadow: none; } /* 키보드 스크롤용 포커스라 테두리는 안 그림 */
/* 상품 목록 ↔ 프로필 전환: 상단 바는 그대로, 아래 화면만 이전 것이 살짝 밀려나며 사라지고 새 것이 반대편에서 들어온다 */
.scroller { view-transition-name: page; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(page) { animation: page-out 200ms var(--ease-fade) both; }
::view-transition-new(page) { animation: page-in 380ms var(--ease-settle) both; }
:root { --nav-out: -20px; --nav-in: 28px; }
:root[data-nav="back"] { --nav-out: 20px; --nav-in: -28px; }
@keyframes page-out { to { opacity: 0; transform: translateX(var(--nav-out)); } }
@keyframes page-in { from { opacity: 0; transform: translateX(var(--nav-in)); } }
/* 왼쪽 로고 · 가운데 검색 · 오른쪽 버튼. 양쪽 칸 너비를 같게 둬서 검색창이 화면 정가운데에 온다. */
.topbar-inner { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(0, 440px) 1fr; align-items: center;
  gap: 20px; height: 68px; padding: 0 24px; }
.brand { justify-self: start; display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; }
/* 상점 로고(로티가 그 안에 svg를 그린다. 그 전엔 정지 그림) */
.brand-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; }
.brand-mark > img, .brand-mark > svg { width: 100%; height: 100%; }
.search {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--control-bg); color: var(--fg-subtle);
  transition: border-color 170ms var(--ease-fade), box-shadow 170ms var(--ease-fade);
}
.search:hover { border-color: var(--border-strong); }
.search:focus-within { border-color: var(--border-focus); background: rgba(255, 255, 255, 0.05); }
.search .icon { width: 17px; height: 17px; }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 14.5px; color: var(--fg); }
.search input:focus-visible { box-shadow: none; }
.search input::placeholder { color: var(--fg-subtle); }
.search input::-webkit-search-cancel-button { display: none; }
.actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.actions .divider { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--fg-muted);
  transition: background-color 170ms var(--ease-fade), color 170ms var(--ease-fade); }
.icon-btn:hover { background: rgba(255, 255, 255, 0.09); color: var(--fg); }
.icon-btn.danger { color: #ff8a8e; }
.icon-btn.danger:hover { color: var(--danger); }
/* 계정 캡슐: 로그인 전 [로그인 | 충전하기], 로그인 후 [사진·이름·잔액 | 충전] */
.capsule { display: inline-flex; align-items: center; gap: 3px; height: 40px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-strong); }
.capsule .seg { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; color: var(--fg); font-size: 14px; font-weight: 600;
  white-space: nowrap; text-decoration: none; transition: background-color 170ms var(--ease-fade), filter 170ms var(--ease-fade); }
.capsule .seg:hover { background: rgba(255, 255, 255, 0.06); }
.capsule .seg.me { padding-left: 4px; }
.capsule .seg .icon { width: 16px; height: 16px; }
.capsule .seg.charge .icon { width: 18px; height: 18px; }
.capsule .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--control-fill); object-fit: cover; }
.capsule .name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.capsule .bal { color: #cfe0ff; }
.capsule .seg.charge { background: linear-gradient(180deg, var(--primary-2), var(--primary)); color: #fff; box-shadow: 0 8px 20px -10px rgba(47, 128, 255, 0.8); }
.capsule .seg.charge:hover { filter: brightness(1.08); }

/* ---------- 본문 ---------- */
.page { max-width: var(--content-max); margin: 0 auto; padding: 40px 24px 80px; }
.page-title { font-size: 26px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; }
.notice-bar { margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: var(--info-bg); border: 1px solid var(--info-border);
  font-size: 14px; white-space: pre-wrap; }

/* 카테고리 = Flick 세그먼트 컨트롤(안쪽이 파인 트랙 + 고른 칸만 밝게) */
.filter-bar { display: flex; align-items: center; gap: 12px; }
.pills {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border-strong); overflow-x: auto; scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 13px; flex-shrink: 0;
  font-size: 15.5px; font-weight: 500; color: var(--fg-muted); transition: background-color 170ms var(--ease-fade), color 170ms var(--ease-fade);
}
.pill:hover { color: var(--fg); background: var(--fill-subtle); }
/* 고른 칸의 흰 바탕은 칸 자체가 아니라 아래 표시(.pill-indicator)가 그리고, 고를 때 그 표시가 미끄러져 옮겨 간다. */
.pill[aria-pressed="true"], .pill[aria-pressed="true"]:hover { background: transparent; color: #101114; }
.pill-indicator { position: absolute; top: 5px; left: 0; z-index: 0; width: 0; height: 44px; border-radius: 13px; background: #f2f3f5; pointer-events: none;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  transition: transform 340ms var(--ease-settle), width 340ms var(--ease-settle), height 340ms var(--ease-settle); }
.pill-indicator.instant { transition: none; }
.pill .count { min-width: 26px; padding: 4px 7px; border-radius: 7px; background: var(--control-fill); color: var(--fg-muted); font-size: 13px; font-weight: 500; line-height: 1; text-align: center; }
.pill .count { transition: background-color 200ms var(--ease-fade), color 200ms var(--ease-fade); }
.pill[aria-pressed="true"] .count { background: #dfe1e6; color: #3a3d44; }

.section { margin-top: 56px; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.section-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* 카테고리를 바꾸면 새 목록이 위에서 10px 내려오며 하나씩(35ms 간격) 나타난다.
   backwards라서 애니메이션이 끝나면 카드의 마우스 올림 효과(transform)를 막지 않는다. */
#sections.animate .section-head, #sections.animate .card, #sections.animate .empty {
  animation: drop-in 460ms var(--ease-settle) backwards; animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px); } }
.empty { padding: 60px 20px; border-radius: 22px; border: 1px dashed var(--border-strong); text-align: center; font-weight: 500; color: var(--fg-muted); }

/* 배지: 테두리 없는 단색 틴트의 둥근 네모(주문내역 상태 배지와 같은 결). 재고·판매·개수에 쓴다 */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.06);
  color: var(--fg-subtle); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.badge.success { background: rgba(63, 214, 140, 0.13); color: var(--success); }
.badge.warning { background: rgba(245, 177, 61, 0.14); color: var(--warning); }
.badge.danger { background: rgba(251, 106, 106, 0.13); color: var(--danger); }

/* 상품 카드: 어두운 그라데이션 면 + 얇은 테두리, 마우스를 올리면 살짝 떠오른다 */
.card {
  display: flex; flex-direction: column; gap: 16px; padding: 12px 12px 18px; border-radius: 26px; text-align: left;
  background: linear-gradient(180deg, #18191e, #131418); border: 1px solid var(--border);
  transition: transform 220ms var(--ease-settle), border-color 220ms var(--ease-settle), box-shadow 220ms var(--ease-settle);
}
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8); }
.card.soldout .media, .card.soldout .name, .card.soldout .price { opacity: 0.55; }
.media { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 100% at 25% 0%, rgba(76, 147, 255, 0.22), transparent 62%), linear-gradient(180deg, #1a1d27, #13151c); }
.media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; } /* 상품 사진은 살짝 투명하게 → 어두운 바탕이 비쳐 은은하게 어두워 보인다 */
.media .placeholder { display: grid; justify-items: center; gap: 10px; color: #8fa6cf; font-size: 14px; font-weight: 500; }
.media .placeholder .icon { width: 34px; height: 34px; stroke-width: 1.5; }
.card-body { display: grid; gap: 4px; padding: 0 6px; }
.card .name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; }
.card .caption { color: var(--label); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.card .price { font-size: 20px; font-weight: 700; }
.rating { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); font-size: 14.5px; font-weight: 600; }
.rating .icon { width: 16px; height: 16px; color: var(--star); }
.rating .count { color: var(--fg-subtle); font-weight: 500; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* 상세 시트의 별 다섯 개 */
.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--star); font-weight: 600; font-size: 15px; white-space: nowrap; }
.stars .icon { width: 16px; height: 16px; }
.stars .num { margin-left: 4px; color: var(--fg); }
.stars .hint { margin-left: 2px; }
/* 별을 감싼 span이 글줄 높이(아래 여백 포함)를 가지면 별이 위로 뜬다 → 별 크기에 딱 맞게 */
.stars > span:not(.num, .hint) { display: inline-flex; }
/* 숫자는 대문자 높이로 잘라서 별·알약과 세로 가운데를 맞춘다(지원하지 않는 브라우저는 그대로) */
.stars .num, .stars .hint, .rating .num, .rating .count, .card .price { text-box: trim-both cap alphabetic; }
.stars .off .icon.fill { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.6; }

/* ---------- 시트(다이얼로그) = Flick 모달 ---------- */
/* 창: <dialog>는 화면 전체를 덮는 투명한 스크롤 영역, 그 안의 .sheet-card가 실제 창.
   창이 화면보다 길면 창 안이 아니라 바깥 전체가 스크롤된다(창 크기는 화면 높이와 상관없이 그대로). */
.sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 20px 12px; border: 0;
  background: transparent; color: var(--fg); overflow-y: auto; overscroll-behavior: contain; }
.sheet[open] { display: flex; }
/* margin: auto → 짧으면 화면 가운데, 길면 위에서부터 시작해 아래로 스크롤 */
.sheet-card { position: relative; width: min(560px, 100%); margin: auto; border-radius: 30px; background: var(--dialog-bg); box-shadow: var(--shadow-dialog);
  overflow: clip; } /* clip: 둥근 모서리만 자르고 스크롤 영역은 만들지 않음(상품 창 구매 칸 따라다니기 유지) */
.sheet::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
.sheet[open] .sheet-card { animation: modal-in 260ms var(--ease-settle); }
.sheet[open]::backdrop { animation: fade-in 200ms var(--ease-fade); }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
.sheet-scroll { padding: 24px; }
.sheet-close { position: absolute; top: 26px; right: 24px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); color: var(--fg-muted); transition: background-color 170ms var(--ease-fade), color 170ms var(--ease-fade); }
.sheet-close:hover { background: rgba(255, 255, 255, 0.14); color: var(--fg); }
.sheet-close .icon { width: 16px; height: 16px; }
/* 닫기는 모든 창에서 30px 원, 첫 줄 제목과 같은 높이(제목 24px × 1.3)에 둔다 → 제목이 버튼 밑으로 가지 않게 오른쪽을 비운다 */
.sheet-scroll > h3:first-child { padding-right: 40px; }
.sheet .media { aspect-ratio: 16 / 9; margin-bottom: 20px; }
.sheet .media .placeholder .icon { width: 40px; height: 40px; }
.sheet h3 { margin-top: 2px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.sheet .desc { margin-top: 12px; color: var(--fg-muted); white-space: pre-wrap; font-size: 14.5px; }
.sheet .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* 상품 창: 넓은 2단. 왼쪽(사진 → 상품 설명 → 후기)은 스크롤, 오른쪽(이름·별점·가격 → 구매)은 그 자리에 고정 */
.sheet.product .sheet-card { width: min(920px, 100%); }
.sheet.product .sheet-scroll { padding: 0; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.pd-info { min-width: 0; padding: 28px; }
.pd-info .box { margin-top: 20px; }
.pd-info .media { aspect-ratio: 16 / 10; margin-bottom: 0; }
.pd-info .box .desc { margin-top: 0; }
.pd-buy { position: sticky; top: 0; padding: 28px 30px 30px 6px; } /* 위 여백은 왼쪽 사진과 같은 높이에서 시작 */
.pd-buy h3 { margin: 6px 0 0; padding-right: 40px; font-size: 22px; line-height: 1.32; } /* 오른쪽 위 닫기 버튼과 겹치지 않게 */
/* 닫기: 원형, 제품명 한 줄(23px × 1.3 ≈ 30px)과 같은 높이·같은 세로 위치 */
.sheet.product .sheet-close { top: 25px; right: 30px; }
.pd-cat { display: block; padding-right: 40px; color: var(--fg-muted); font-size: 15px; font-weight: 500; }
/* 가격: 라벨 없이 금액만 왼쪽에 크게 */
.pd-price { margin-top: 16px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
/* 상품 정보(위)와 구매(아래)를 가는 줄로 가르고 덩어리 사이를 넓게 */
.pd-buybox { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.pd-action { margin-top: 20px; }
.pd-action .terms-note { margin-top: 14px; }
/* 잔액 부족: 빨간 경고 카드(부족한 금액) + 내 잔액이 결제 금액의 얼마인지 막대.
   칸(.pd-shortfall)째 높이를 펼치고 접는다. 아래 margin -8px로 충전 버튼과의 간격을 12px로 좁힌다. */
.pd-shortfall { margin-top: 20px; margin-bottom: -8px; overflow: hidden; }
.shortfall { padding: 14px 16px 13px; border-radius: 14px; background: var(--danger-bg); border: 1px solid var(--danger-border); }
.shortfall-top { display: flex; align-items: center; gap: 9px; color: var(--fg); font-size: 14.5px; font-weight: 600; }
.shortfall-top strong { margin-left: auto; color: var(--danger); font-size: 15px; font-weight: 700; }
.shortfall-mark { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: #1b0f10; font-size: 13px; font-weight: 800; }
.shortfall-bar { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.shortfall-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--primary-2));
  transition: width 700ms var(--ease-settle); }
@media (prefers-reduced-motion: reduce) { .shortfall-bar i { transition: none; } }
.shortfall-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--fg-muted); font-size: 12.5px; }
.shortfall-meta b { color: var(--fg); font-weight: 600; }
/* 수량: 위 한 줄(라벨 ··· 범위) + 칸 너비 가득 찬 −/+ */
.pd-qty-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-qty-head .label { color: var(--fg-muted); font-size: 14px; font-weight: 500; }
.qty-hint { color: var(--fg-subtle); font-size: 12.5px; }
.stepper.wide { display: flex; width: 100%; margin-top: 12px; }
.stepper.wide button { width: 56px; }
/* 가운데 '2개': 숫자 칸은 글자 수만큼만, 바뀔 때 굴러가도록 넘치는 부분은 가린다 */
.qty-val { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; height: 44px; cursor: text; }
/* 숫자만 들어가는 창: 위아래로만 잘라서 굴러 나가는 숫자를 가린다('개'는 이 창 밖이라 움직이지 않음) */
.qty-num { position: relative; display: grid; place-items: center; height: 44px; clip-path: inset(0 -1em); }
.stepper .qty-val input { width: 1ch; height: auto; padding: 0; font-size: 16px; font-weight: 700; text-align: center; }
.stepper .qty-val input:focus-visible { box-shadow: none; } /* 숫자 칸을 눌러도 파란 테두리를 그리지 않는다 */
.qty-unit { color: var(--fg-muted); font-size: 15px; font-weight: 600; }
.qty-ghost { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 700; pointer-events: none; }
.pd-coupon { display: flex; gap: 6px; margin-top: 12px; }
.pd-coupon .field { height: 40px; border-radius: 12px; font-size: 14px; }
.pd-coupon .btn { height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
/* 결제 요약: 영수증처럼 정보 줄 → 점선 → 결제 금액 합계 */
.pd-sum { margin-top: 24px; padding: 18px 20px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border); }
.pd-sum:has(> div:empty) { display: none; }
.pd-sum .line { padding: 5px 0; font-size: 13.5px; }
.pd-sum .dash { height: 0; margin: 12px 0; border-top: 1px dashed var(--border-strong); }
.pd-sum .sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pd-sum .sum-row span { font-size: 15px; font-weight: 600; }
.pd-sum .sum-row strong { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
/* 상자 = Flick 설정 카드 */
.box { margin-top: 16px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); }
.box h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
/* 제목 오른쪽에 작은 버튼(상품 내용의 복사·저장). 제목보다 튀지 않게 옅은 바탕·흐린 글씨 */
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.box-head h4 { margin: 0; }
.box-actions { display: flex; gap: 4px; }
.box-actions .btn { height: 30px; gap: 6px; padding: 0 10px; border-radius: 9px; background: var(--fill); color: var(--fg-muted); font-size: 13px; font-weight: 500; }
.box-actions .btn:hover { background: var(--fill-strong); color: var(--fg); }
.box-actions .btn .icon { width: 15px; height: 15px; }
.line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--fg-muted); font-size: 14.5px; }
.line strong { color: var(--fg); font-weight: 600; }
.line.total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hairline); color: var(--fg); font-size: 16px; }
.line.total strong { font-size: 22px; font-weight: 700; }
.line .minus { color: var(--success); }
.stepper { display: inline-flex; align-items: center; border-radius: 14px; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.stepper button { width: 44px; height: 44px; font-size: 20px; color: var(--fg-muted); }
.stepper button:hover { background: var(--control-hover); color: var(--fg); }
.stepper input { width: 56px; height: 44px; border: 0; background: none; text-align: center; font-weight: 700; font-size: 16px; outline: none; }
/* 숫자 칸의 위아래 화살표는 모두 숨긴다(수량은 ±버튼, 금액은 빠른 금액 버튼으로) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* 입력 = Flick 필드(내용이 있으면 면이 채워지고, 누르면 안쪽 테두리) */
.field { width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--border); background: transparent; outline: none; font-size: 15px;
  transition: background-color 170ms var(--ease-fade), border-color 170ms var(--ease-fade), box-shadow 170ms var(--ease-fade); }
.field::placeholder { color: var(--fg-subtle); }
.field:hover { border-color: var(--border-strong); }
.field:not(:placeholder-shown), .field:focus-visible { background: var(--fill-subtle); }
.field:focus-visible { border-color: var(--border-focus); box-shadow: none; }
textarea.field { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; }
.field-row .btn { height: 48px; }
.error { margin-top: 10px; overflow: hidden; color: var(--danger); font-size: 14px; } /* overflow: 펼쳐지는 동안 글자가 넘치지 않게 */
.code {
  margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--mono); font-size: 14px; letter-spacing: 0; white-space: pre-wrap; word-break: break-all; max-height: 280px; overflow: auto; user-select: all;
}
.success-mark { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--success-bg); color: var(--success); margin-bottom: 14px; }
.success-mark .icon { width: 26px; height: 26px; }

/* 결제 순간: 결제 중(돌아가는 고리 + 지나가는 빛) → 결제 완료(초록 + 체크가 그려짐) → 구매 완료 창의 체크도 그려짐 */
.btn.is-paying, .btn.is-paying:disabled, .btn.is-done, .btn.is-done:disabled { opacity: 1; }
.btn.is-paying { position: relative; overflow: hidden; gap: 10px; }
.btn.is-paying::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); animation: pay-sheen 1.2s var(--ease-fade) infinite; }
.spinner { width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite; }
.btn.primary.is-done { background: var(--success); color: #062a1a; box-shadow: 0 8px 24px -10px rgba(63, 214, 140, 0.7); }
.btn.is-done .icon path, .success-mark.pop .icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: check-draw 380ms var(--ease-settle) forwards; }
.success-mark.pop .icon path { animation-delay: 300ms; }
@keyframes pay-sheen { to { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-paying::after, .spinner { animation: none; }
  .btn.is-done .icon path, .success-mark.pop .icon path { animation: none; stroke-dashoffset: 0; }
}
.rating-pick { display: flex; gap: 4px; }
.rating-pick button { color: rgba(245, 177, 61, 0.28); }
.rating-pick button[aria-pressed="true"] { color: var(--star); }
.rating-pick .icon { width: 30px; height: 30px; }
/* 후기: 한 줄에 2개씩 작은 카드로(좁은 화면은 1개씩) */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; } /* 줄은 맞추되 옆 카드 높이는 따라가지 않게 */
.review { min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--bg-inset); }
.reviews-more { margin-top: 12px; height: 42px; border-radius: 12px; font-size: 14px; }
.review p { margin-top: 6px; font-size: 14px; color: var(--fg); white-space: pre-wrap; }
.review p.empty-review { color: var(--fg-subtle); } /* 별점만 남긴 후기 */
.review small { color: var(--fg-subtle); }
/* 위에 '작성자 · 날짜', 그 아래 별점 */
.review-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.review-head small { font-size: 13px; text-box: trim-both cap alphabetic; }
.terms-text { white-space: pre-wrap; color: var(--fg-muted); font-size: 14.5px; }
/* 결제 버튼 아래 약관 동의 안내 */
.terms-note { margin-top: 12px; color: var(--fg-subtle); font-size: 12.5px; line-height: 1.6; text-align: center; }
.link-button { color: var(--fg-muted); font-size: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 3px; transition: color 140ms var(--ease-fade), text-decoration-color 140ms var(--ease-fade); }
.link-button:hover, .link-button[aria-expanded="true"] { color: var(--fg); text-decoration-color: currentColor; }
.terms-inline { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg-inset); font-size: 13.5px; text-align: left;
  max-height: 220px; overflow-y: auto; }

/* ---------- 충전·프로필 ---------- */
/* 내역 = Flick 행 묶음(한 면 안에 줄로 나눔) */
.history { display: grid; border-radius: 18px; background: var(--fill-subtle); border: 1px solid var(--border); overflow: hidden; }
.history-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; font-size: 14.5px; text-align: left; }
.history-row + .history-row::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: var(--hairline); }
button.history-row { transition: background-color 140ms var(--ease-settle); }
button.history-row:hover { background: var(--fill-subtle); }
.history-row .grow { flex: 1; min-width: 0; }
.history-row strong { font-weight: 600; }
.history-row small { display: block; color: var(--fg-subtle); font-size: 12.5px; }
/* 상태 배지: 테두리 없는 단색 틴트의 둥근 네모(상품 카드 배지와 같은 결) */
.status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); color: var(--fg-subtle);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.status.ok { background: rgba(63, 214, 140, 0.13); color: var(--success); }
.status.wait { background: rgba(245, 177, 61, 0.14); color: var(--warning); }
.status.bad { background: rgba(251, 106, 106, 0.13); color: var(--danger); }
.status.info { background: rgba(47, 128, 255, 0.18); color: #8ab8ff; }
/* 후기를 안 쓴 주문: 누르면 주문 창의 후기 칸으로 */
.status.cta { background: var(--control-fill); color: var(--fg); transition: background-color 140ms var(--ease-settle); }
.status.cta svg.icon { width: 13px; height: 13px; fill: currentColor; stroke: none; color: var(--star); }
button.history-row:hover .status.cta { background: var(--control-fill-strong); }
.progress { height: 6px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #8ab8ff); }

/* ---------- 프로필: 왼쪽 내 카드(관리 콘솔 사이드바처럼) + 오른쪽 세그먼트 탭과 줄 목록 ---------- */
.me-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.me-side { position: sticky; top: 24px; display: grid; justify-items: center; gap: 18px; padding: 28px 22px 22px; border-radius: 18px; background: var(--fill-subtle); border: 1px solid var(--border); text-align: center; }
/* 사진 둘레 고리가 다음 등급까지 진행도, 아래에 등급 배지 */
.me-ring { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.me-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.me-ring-track, .me-ring-arc { fill: none; stroke-width: 5; }
.me-ring-track { stroke: rgba(255, 255, 255, 0.08); }
.me-ring-arc { stroke-linecap: round; }
.me-avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--bg-inset); }
.me-tier { position: absolute; bottom: -6px; left: 50%; max-width: 140px; overflow: hidden; padding: 4px 10px; border-radius: 999px; background: #20232b; box-shadow: 0 0 0 3px #17181d;
  font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); }
.me-id { display: grid; gap: 2px; width: 100%; min-width: 0; margin-top: 2px; }
.me-name { overflow: hidden; font-size: 21px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.me-handle { overflow: hidden; color: var(--fg-muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
/* 다음 등급 알약: [등급 배지] 까지 N원 | 할인 */
.me-next { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; margin-top: -4px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--fill);
  color: var(--fg-muted); font-size: 13.5px; white-space: nowrap; }
.me-next.plain { padding-left: 12px; }
.me-next b { color: var(--fg); font-weight: 600; }
.me-next i { flex-shrink: 0; width: 1px; height: 12px; background: var(--border-strong); }
.me-next-tier { min-width: 0; overflow: hidden; padding: 4px 9px; border-radius: 999px; background: rgba(47, 128, 255, 0.2); color: #9cc2ff; font-size: 12px; font-weight: 700; text-overflow: ellipsis; }
.me-next-perk { color: #9cc2ff; font-weight: 500; }
/* 등급 알약(.ranked): 등급마다 두 색(--t1 → --t2). 배경은 은은하게, 테두리는 얇게, 글자는 진한 그라데이션이 천천히 흐른다. */
.tier-1 { --t1: #ff5fa2; --t2: #ff9a6b; } /* 1번째 등급(VIP): 분홍 → 주황 */
.tier-2 { --t1: #b57cff; --t2: #6f8bff; } /* 2번째(VVIP): 보라 → 파랑 */
.tier-3 { --t1: #5fe0ff; --t2: #4f8bff; } /* 3번째(SVIP): 하늘 → 파랑 */
.tier-4 { --t1: #ffd36b; --t2: #ff9f43; } /* 4번째: 금 → 주황 */
.tier-5 { --t1: #5ff2b0; --t2: #3fb6ff; } /* 5번째: 초록 → 하늘 */
.tier-pill.ranked { border: 1px solid transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--t1) 22%, #17181d), color-mix(in srgb, var(--t2) 12%, #17181d)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--t1) 70%, transparent), color-mix(in srgb, var(--t2) 22%, transparent)) border-box; }
.tier-pill.ranked .tier-text { background: linear-gradient(90deg, var(--t1), var(--t2), var(--t1)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: tier-shine 6s ease-in-out infinite alternate; }
.me-tier.ranked { padding: 3px 9px; box-shadow: 0 0 0 3px #17181d, 0 6px 18px -8px var(--t1); }
.me-next-tier.ranked { padding: 3px 8px; }
@keyframes tier-shine { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .tier-pill.ranked .tier-text { animation: none; } }
/* 잔액 · 누적 구매 두 칸 */
.me-pair { width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 16px 0; border-radius: 16px; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border); }
.me-pair > div { display: grid; gap: 4px; min-width: 0; padding: 0 10px; }
.me-pair > div + div { border-left: 1px solid var(--hairline); }
.me-label { color: var(--fg-muted); font-size: 14px; font-weight: 500; }
.me-money { overflow: hidden; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.me-acts { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; }
.btn.me-button { height: 46px; border-radius: 13px; font-size: 15px; }
.btn.me-button .icon { width: 18px; height: 18px; }
.me-logout { padding: 0; background: rgba(255, 255, 255, 0.05); color: var(--fg-muted); }
.me-logout:hover { background: var(--control-hover); color: var(--fg); }
/* 탭: 카테고리와 같은 미끄러지는 표시를 쓰되, 작은 세그먼트 컨트롤(파인 트랙 + 어두운 칸) 모양으로 */
.me-tabs { margin-bottom: 12px; }
.me-tabs .pills { display: inline-flex; flex: none; max-width: 100%; gap: 2px; padding: 4px; border: 0; border-radius: 13px; background: var(--bg-inset);
  box-shadow: inset 0 0 0 1px var(--border); }
.me-tabs .pill { height: 34px; gap: 7px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.me-tabs .pill[aria-pressed="true"], .me-tabs .pill[aria-pressed="true"]:hover { color: var(--fg); font-weight: 600; }
.me-tabs .pill-indicator { top: 4px; border-radius: 10px; background: var(--control-fill-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.me-tabs .pill .count { min-width: 0; padding: 2px 6px; border-radius: 6px; background: var(--fill); font-size: 12px; }
.me-tabs .pill[aria-pressed="true"] .count { background: var(--fill-strong); color: var(--fg); }
.me-more { margin-top: 10px; }
.row-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, 0.06); color: #dfe2e8; }
.row-icon .icon { width: 19px; height: 19px; }
.row-amount { font-weight: 600; white-space: nowrap; }
.me-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 20px; border-radius: 18px; background: var(--fill-subtle); border: 1px solid var(--border);
  color: var(--fg-muted); text-align: center; }
.me-empty .row-icon { width: 44px; height: 44px; border-radius: 14px; }

/* ---------- 머리 있는 창(로그인): 무채색 그라데이션 머리(점무늬) + 본문 + 흰 버튼 ----------
   상점 전체가 파란 강조색이라 창은 무채색으로 두어 한 화면에 파랑이 몰리지 않게 한다. */
.booting .topbar, .booting .page { visibility: hidden; }
.sheet.banded .sheet-card { width: min(420px, 100%); }
.sheet.banded .sheet-scroll { padding: 0; }
.sheet.banded .sheet-close { top: 18px; right: 28px; } /* 머리의 상점 이름 줄과 같은 높이 */
/* 위쪽 16px = 닫기 버튼과 같은 높이에 상점 이름(34px 줄).
   제목(+부제)은 상점 이름 줄과 아래 곡선의 가운데 선(바닥에서 12px) 사이 정가운데에 둔다(위아래 auto 여백). */
.dlg-band { position: relative; min-height: 160px; padding: 16px 28px 12px; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(280px 180px at 85% 0%, rgba(255, 255, 255, 0.1), transparent 70%), linear-gradient(135deg, #272a34 0%, #1b1c23 60%, #15161b 100%); }
/* 머리와 본문 사이 구분선: 태극 문양처럼 창 너비 전체에 한 번 올라갔다 한 번 내려오는 S자 곡선.
   곡선 아래를 창 바탕색(--dialog-bg)으로 덮고 곡선에 옅은 선을 긋는다. */
.dlg-band::before { content: ""; position: absolute; left: 0; bottom: -1px; z-index: 2; width: 200%; height: 24px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12C66 0 134 0 200 12S334 24 400 12V24H0Z' fill='%23121318'/%3E%3Cpath d='M0 12C66 0 134 0 200 12S334 24 400 12' fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 50% 24px repeat-x;
  transform: translateX(-37.5%); animation: wave-drift 14s linear -10.5s infinite; }
/* 곡선 한 마디(창 너비)를 두 번 이어 붙인 띠를 한 마디만큼 옆으로 흘려 보낸다 → 모양은 그대로, 물결처럼 천천히 움직임.
   창을 열 때는 왼쪽 끝이 물결의 가장 낮은 곳(한 마디의 3/4 지점)에서 시작한다: 시작을 3/4 앞당김(-10.5s = 14s × 3/4).
   움직임 줄이기 설정이면 애니메이션 없이 같은 자리(-37.5%)에 멈춰 있다. */
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dlg-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000); mask-image: linear-gradient(120deg, transparent 30%, #000); }
.dlg-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 34px; padding-right: 44px; color: var(--fg-muted); font-size: 15px;
  font-weight: 700; letter-spacing: -0.02em; }
.dlg-head { position: relative; z-index: 1; margin: auto 0; padding-right: 8px; }
.dlg-title { color: #fff; font-size: 25px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.3; }
.dlg-sub { margin-top: 4px; color: var(--fg-muted); font-size: 14px; }
.dlg-body { padding: 22px 28px 28px; }
.perks { display: grid; gap: 16px; }
.perk { display: flex; align-items: center; gap: 14px; }
.perk-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #dfe2e8; }
.perk-icon .icon { width: 21px; height: 21px; }
.perk-copy { display: grid; gap: 1px; min-width: 0; }
.perk-copy strong { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.perk-copy small { color: var(--fg-subtle); font-size: 13px; line-height: 1.45; }
.sheet.banded .error { margin-top: 18px; }
.dlg-button { margin-top: 24px; height: 52px; border-radius: 16px; font-weight: 700; box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.9); }
.dlg-button .icon { width: 20px; height: 20px; }
/* ---------- 충전 창: 머리 띠 없이 위 가운데에 짧은 제목, 그 아래 큰 금액이 주인공 ----------
   제목 줄(74px) 가운데에 닫기 버튼 높이를 맞춘다. */
.sheet.charge .sheet-card { width: min(420px, 100%); }
.sheet.charge .sheet-scroll { padding: 0 28px 28px; }
.sheet.charge .sheet-close { top: 22px; right: 22px; }
.sheet.charge .error { margin-top: 14px; }
.charge-title { height: 74px; display: grid; place-items: center; padding: 0 44px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.charge-hero { display: grid; justify-items: center; padding: 14px 0 6px; text-align: center; }
.charge-hero > small { color: var(--fg-muted); font-size: 13.5px; }
.charge-amount { display: flex; align-items: baseline; justify-content: center; max-width: 100%; margin-top: 4px; font-size: 46px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.15; cursor: text; }
/* 보이지 않는 거울 글자가 폭을 정하고, 입력칸은 그 위에 그대로 겹친다 → 숫자 길이만큼만 넓어진다 */
.charge-amount-fit { position: relative; display: inline-block; min-width: 0; }
.charge-amount-mirror { display: inline-block; visibility: hidden; padding-right: 3px; white-space: pre; }
.charge-amount-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; outline: none;
  font: inherit; letter-spacing: inherit; color: var(--fg); caret-color: var(--primary-2); }
.charge-amount-input::placeholder { color: var(--fg-subtle); }
.charge-amount.is-empty { color: var(--fg-subtle); } /* 비었을 땐 '0 원' 전체를 흐리게 */
.charge-after { margin-top: 8px; color: var(--fg-subtle); font-size: 13.5px; }
.charge-after b { color: var(--label); font-weight: 600; }
.charge-after .warn { color: var(--warning); }
.charge-chips { display: flex; gap: 6px; margin-top: 24px; }
.charge-chips button { flex: 1; min-width: 0; height: 40px; border-radius: 12px; background: var(--control-fill); color: var(--fg-muted); font-size: 14px; font-weight: 600;
  white-space: nowrap; transition: background-color 140ms var(--ease-fade), color 140ms var(--ease-fade); }
.charge-chips button:hover { background: var(--control-fill-strong); color: var(--fg); }
.charge-name { display: flex; align-items: center; gap: 12px; height: 54px; margin-top: 14px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--fill-subtle); cursor: text; transition: border-color 140ms var(--ease-fade); }
.charge-name:hover { border-color: var(--border-strong); }
.charge-name:focus-within { border-color: var(--border-focus); }
.charge-name span { flex-shrink: 0; color: var(--fg-muted); font-size: 14px; }
.charge-name input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none; text-align: right; font-size: 16px; font-weight: 600; }
.charge-name input::placeholder { color: var(--fg-subtle); font-weight: 400; }
.charge-off { padding: 6px 0 4px; text-align: center; }
/* 입금 안내: 큰 금액 아래 남은 시간·금액 복사 → 계좌 칸 → 입금자명 줄 */
.copy-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--control-fill); color: var(--fg-muted);
  font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color 140ms var(--ease-fade), color 140ms var(--ease-fade); }
.copy-pill:hover { background: var(--control-fill-strong); color: var(--fg); }
.copy-pill .icon { width: 12px; height: 12px; }
.charge-hero-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.charge-hero-acts .copy-pill { height: 30px; padding: 0 11px; font-size: 13px; }
.charge-timer { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--info-bg); color: #9cc2ff;
  font-size: 13px; font-weight: 600; transition: background-color 300ms var(--ease-fade), color 300ms var(--ease-fade); }
.charge-timer .icon { width: 14px; height: 14px; }
.charge-timer.low { background: var(--warning-bg); color: var(--warning); } /* 3분 아래 */
.charge-account { display: grid; margin-top: 22px; padding: 18px 18px 16px; border-radius: 20px; background: var(--fill); }
.charge-account small { color: var(--fg-muted); font-size: 13.5px; }
.charge-account strong { margin-top: 6px; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; overflow-wrap: anywhere; }
.charge-account > span { margin-top: 2px; color: var(--fg-subtle); font-size: 13.5px; }
.charge-account .btn { height: 42px; margin-top: 14px; border-radius: 12px; font-size: 14px; }
.charge-account .btn .icon { width: 16px; height: 16px; }
.charge-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; margin-top: 8px; padding: 0 4px; color: var(--fg-muted); font-size: 14px; }
.charge-row-val { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.charge-row-val strong { color: var(--fg); font-size: 15px; font-weight: 600; }
.charge-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #9cc2ff; font-size: 13.5px; font-weight: 500; }
.charge-note .icon { width: 16px; height: 16px; }
.dlg-actions { display: flex; gap: 8px; margin-top: 22px; }
.dlg-actions .btn { flex: 1; height: 50px; border-radius: 15px; }
.done-box { display: grid; justify-items: center; gap: 4px; padding: 8px 0 4px; text-align: center; }
.done-box .success-mark { margin-bottom: 8px; }
.dlg-amount { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 14px; background: #f2f3f5; color: #101114; font-weight: 600; font-size: 14.5px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8); animation: toast-in 260ms var(--ease-settle);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }

/* ---------- 실시간 구매 알림(B2-2): 왼쪽 아래 상품 카드 · 은은한 파랑→보라 테두리 · 닫기 둘레 10초 고리 ----------
   카드는 맨 아래 한 자리에 겹쳐 쌓인다. --i: 맨 앞 0부터의 차례, --y: 펼쳤을 때 올라갈 높이(JS가 잰다).
   접혀 있으면 뒤 카드는 조금씩 작아지며 위로 7px씩 촘촘히 비어져 나오고, 올리면(.expanded) 제 높이만큼 펼쳐진다. */
.ptoasts { position: fixed; left: 24px; bottom: 24px; z-index: 45; width: min(360px, calc(100vw - 32px)); height: 0; pointer-events: none; }
.ptoasts.expanded { height: var(--full, 0px); pointer-events: auto; } /* 펼친 동안은 카드 사이 틈도 묶음 안으로 쳐서 접히지 않게 */
.ptoast { position: absolute; left: 0; right: 0; bottom: 0; z-index: calc(10 - var(--i, 0));
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 30px; gap: 13px; align-items: center; padding: 12px;
  border-radius: 20px; border: 1px solid transparent; pointer-events: auto; backdrop-filter: blur(16px);
  background: linear-gradient(160deg, rgba(26, 30, 44, 0.96), rgba(20, 21, 28, 0.96)) padding-box,
    linear-gradient(135deg, rgba(76, 147, 255, 0.45), rgba(181, 124, 255, 0.18)) border-box;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.95);
  --ty: calc(var(--i, 0) * -7px); --s: calc(1 - var(--i, 0) * 0.04);
  transform: translate(var(--lx, 0px), calc(var(--ty) + var(--ly, 0px))) scale(calc(var(--s) * var(--ls, 1))); transform-origin: 50% 0;
  transition: transform 420ms var(--ease-settle), opacity 180ms var(--ease-fade); }
/* 글자: 뒤로 물러날 때는 바로 빠르게 지우고, 앞으로 나올 때는 앞 카드가 다 사라진 뒤(120ms), 펼칠 때는 조금 벌어진 뒤(60ms) 나타나
   두 카드의 글자가 겹쳐 보이지 않게 */
.ptoast > * { transition: opacity 120ms var(--ease-fade); }
.ptoast.front > * { transition: opacity 220ms var(--ease-fade) 120ms; }
.ptoasts.expanded .ptoast > * { transition: opacity 220ms var(--ease-fade) 60ms; }
.ptoasts:not(.expanded) .ptoast:not(.front) > * { opacity: 0; } /* 접힌 뒤 카드는 테두리만 비어져 보이게 */
.ptoasts.expanded .ptoast { --ty: calc(var(--y, 0px) * -1); --s: 1; }
.ptoasts .ptoast.entering { --ty: 100%; opacity: 0; } /* 제 높이만큼 아래에서 올라와 앞 카드를 덮는다 */
.ptoast.leaving { --ly: 14px; --ls: 0.96; opacity: 0; pointer-events: none; /* 살짝 가라앉으며 흐려진다(JS가 260ms 뒤 지움) */
  transition: transform 260ms var(--ease-fade), opacity 160ms var(--ease-fade); }
.ptoast.clickable { cursor: pointer; }
.ptoast-thumb { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(160deg, #22305a, #121726); color: #9cc2ff; }
.ptoast-thumb img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; opacity: 0.7; } /* 상품 카드 사진과 같은 밝기 */
.ptoast-thumb .icon { width: 24px; height: 24px; }
.ptoast-thumb::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 50%; background: var(--success); color: #06281a; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 3px #15161b; }
.ptoast-text { min-width: 0; display: grid; gap: 3px; }
.ptoast-text strong { overflow: hidden; color: var(--fg); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.ptoast-text span { overflow: hidden; color: var(--fg-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ptoast-text b { color: var(--fg); font-weight: 600; }
.ptoast-close { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-subtle); }
.ptoast-close:hover { color: var(--fg); }
.ptoast-close .icon { width: 13px; height: 13px; }
.ptoast-ring { position: absolute; inset: 0; width: 30px; height: 30px; transform: rotate(-90deg); }
.ptoast-ring circle { fill: none; stroke-width: 2.5; }
.ptoast-ring-track { stroke: rgba(255, 255, 255, 0.08); }
.ptoast-ring-fill { stroke: var(--primary-2); stroke-linecap: round; stroke-dasharray: 81.7; animation: ptoast-count 10s linear forwards; }
/* 맨 앞 카드만 줄어든다. 펼쳐 두면 모두 멈춰서 읽을 수 있게 */
.ptoast:not(.front) .ptoast-ring-fill, .ptoasts.expanded .ptoast-ring-fill { animation-play-state: paused; }
@keyframes ptoast-count { to { stroke-dashoffset: 81.7; } }
@media (prefers-reduced-motion: reduce) { .ptoasts .ptoast, .ptoasts .ptoast > * { transition: none !important; } }
@media (max-width: 560px) { .ptoasts { left: 16px; right: 16px; bottom: 16px; width: auto; } }

/* ---------- 반응형 ---------- */
/* 검색창이 가운데에 있으려면 양쪽 칸이 버튼보다 넓어야 해서, 폭이 줄면 이름 → 검색창 너비 → 검색창 줄 순서로 양보한다. */
@media (max-width: 1320px) { .capsule .name { display: none; } }
@media (max-width: 1180px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .topbar-inner { grid-template-columns: 1fr minmax(0, 360px) 1fr; } }
@media (max-width: 1060px) {
  .topbar-inner { display: flex; flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
  .actions { margin-left: auto; }
  .search { order: 3; flex-basis: 100%; }
  .search kbd { display: none; }
}
@media (max-width: 760px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .pd-info { display: contents; }
  .pd-info .media { order: 1; }
  .pd-buy { order: 2; position: static; padding: 20px 0 4px; }
  .pd-buy h3 { padding-right: 0; }
  .sheet.product .sheet-close { top: 28px; right: 28px; background: rgba(10, 12, 18, 0.6); } /* 한 줄일 땐 사진 위 모서리 */
  .pd-info .box { order: 3; }
  .reviews { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .page { padding: 24px 16px 64px; }
  .section { margin-top: 40px; }
  .section-head h2 { font-size: 20px; }
  .me-layout { grid-template-columns: minmax(0, 1fr); }
  .me-side { position: static; }
}
@media (max-width: 560px) {
  .dlg-band { min-height: 146px; padding: 16px 20px 12px; }
  .sheet.banded .sheet-close { right: 20px; }
  .dlg-title { font-size: 22px; }
  .dlg-body { padding: 20px 20px 20px; }
  .me-side { padding: 24px 18px 18px; gap: 16px; }
  .me-name { font-size: 20px; }
  /* 좁은 화면: 배지는 날짜 아래 줄로 내려 상품명이 접히지 않게(오른쪽엔 금액, 그 아래 버튼) */
  .history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 12px 14px; }
  .history-row .grow { grid-column: 1; grid-row: 1; }
  .history-row .status { grid-column: 1; grid-row: 2; justify-self: start; }
  .history-row .row-amount { grid-column: 2; grid-row: 1; }
  .history-row .btn { grid-column: 2; grid-row: 2; justify-self: end; }
  .history-row + .history-row::before { left: 14px; right: 14px; }
  .perk { gap: 12px; }
  .sheet-scroll { padding: 18px; }
  .sheet-close { top: 20px; right: 18px; }
  .brand span { display: none; }
  .actions { gap: 4px; }
  .actions .divider { margin: 0 2px; }
  .capsule .seg { padding: 0 10px; }
  .capsule .seg.me { padding-left: 4px; gap: 6px; }
  #nav-charge-label { display: none; }
  .card { padding: 8px 8px 14px; border-radius: 20px; gap: 12px; }
  .media { border-radius: 14px; }
  .card-body { padding: 0 4px; }
  .card .name { font-size: 15.5px; }
  .card .price { font-size: 16.5px; }
  .card-foot { flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .rating { font-size: 13px; }
  .badge { padding: 4px 7px; }
  .pill { height: 40px; padding: 0 14px; font-size: 14.5px; }
}
/* ---------- 반응형 높이: 창은 화면 높이에 맞춰 간격·크기가 부드럽게 줄어든다(svh = 주소창이 보일 때의 화면 높이).
   충분히 큰 화면에선 원래 크기 그대로, 낮아질수록 비례해서 줄고, 그래도 넘치는 아주 작은 창에서만 바깥 전체가 스크롤된다. ---------- */
.sheet { padding-block: clamp(10px, 2.2svh, 20px); }
/* 머리 있는 창(로그인) */
.dlg-band { min-height: clamp(118px, 18svh, 160px); }
.dlg-body { padding-top: clamp(14px, 2.6svh, 22px); padding-bottom: clamp(18px, 3.4svh, 28px); }
/* 충전 창(금액 입력·입금 안내) */
.charge-hero { padding-top: clamp(2px, 1.6svh, 14px); }
.charge-amount { font-size: clamp(36px, 5.6svh, 46px); }
.charge-chips { margin-top: clamp(14px, 2.8svh, 24px); }
.charge-account { margin-top: clamp(12px, 2.6svh, 22px); padding-block: clamp(12px, 2.1svh, 18px) clamp(12px, 1.9svh, 16px); }
.charge-row { min-height: clamp(42px, 6svh, 50px); }
.dlg-actions { margin-top: clamp(14px, 2.6svh, 22px); }
.dlg-actions .btn { height: clamp(44px, 6svh, 50px); }
.dlg-button { margin-top: clamp(16px, 2.8svh, 24px); height: clamp(46px, 6.2svh, 52px); }
/* 상품 창: 사진은 화면 높이에 맞춰 낮아지고, 오른쪽 구매 칸이 한 화면에 들어가도록 간격이 줄어든다 */
.pd-info { padding-top: clamp(18px, 3.3svh, 28px); padding-bottom: clamp(18px, 3.3svh, 28px); }
.pd-info .media { width: 100%; max-height: clamp(160px, calc(60svh - 220px), 340px); } /* 폭은 그대로, 높이만 화면에 맞춰 낮아짐(900px 이상이면 원래 비율) */
.pd-info .box { margin-top: clamp(14px, 2.4svh, 20px); }
.pd-buy { padding-top: clamp(18px, 3.3svh, 28px); padding-bottom: clamp(18px, 3.5svh, 30px); }
.sheet.product .sheet-close { top: calc(clamp(18px, 3.3svh, 28px) - 3px); }
.pd-buy .meta { margin-top: clamp(8px, 1.4svh, 12px); }
.pd-price { margin-top: clamp(10px, 2svh, 18px); font-size: clamp(22px, 3.1svh, 26px); }
.pd-buybox { margin-top: clamp(14px, 2.8svh, 24px); padding-top: clamp(14px, 2.8svh, 24px); }
.stepper.wide { margin-top: clamp(8px, 1.4svh, 12px); }
.stepper.wide button, .qty-val, .qty-num { height: clamp(38px, 5.2svh, 44px); }
.pd-coupon { margin-top: clamp(8px, 1.4svh, 12px); }
.pd-coupon .field, .pd-coupon .btn { height: clamp(36px, 4.7svh, 40px); }
.pd-sum { margin-top: clamp(14px, 2.8svh, 24px); padding-top: clamp(12px, 2.1svh, 18px); padding-bottom: clamp(10px, 1.9svh, 16px); }
.pd-sum .line { padding-block: clamp(3px, 0.6svh, 5px); }
.pd-sum .dash { margin-block: clamp(8px, 1.4svh, 12px); }
.pd-sum .sum-row strong { font-size: clamp(21px, 2.8svh, 24px); }
.pd-action, .pd-shortfall { margin-top: clamp(12px, 2.3svh, 20px); }
.pd-shortfall { margin-bottom: calc(12px - clamp(12px, 2.3svh, 20px)); } /* 카드와 충전 버튼 사이는 늘 12px */
.pd-action .terms-note { margin-top: clamp(8px, 1.6svh, 14px); }
@media (max-width: 560px) {
  .dlg-band { min-height: clamp(112px, 17svh, 146px); }
  .dlg-body { padding-top: clamp(14px, 2.4svh, 20px); padding-bottom: clamp(16px, 2.4svh, 20px); }
}
@media (max-width: 760px) {
  .pd-info { padding: 0; } /* 한 줄로 쌓일 땐 바깥(.pd-grid) 여백만 쓴다 */
  .pd-buy { padding-top: 20px; padding-bottom: 4px; }
  .sheet.product .sheet-close { top: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }