/* ═══════════════════════════════════════════════════════════════════
   JR-TCG 테마 — "Collector Hybrid"
   style.css 바로 뒤에 불러와 토큰과 공용 부품을 덮는다(base.html).
   관리자 화면은 admin/_base.html 이라 이 파일이 닿지 않는다.

   · 틀(헤더 · 푸터 · 특집 띠)은 남색 #0b1033 — 키비주얼의 밤하늘색
   · 쇼핑 지면은 옅은 라벤더 흰색 #f6f5fc, 상품 카드는 순백
   · 무지갯빛(홀로)은 '포인트'에만: 선택 표시 막대, 카드에 마우스를 올렸을 때의 테두리
   · 샴페인 골드는 그림 속 슬랩·포일 테두리에서 가져왔다 — 뱃지 · 구분선 · 액자선에만
   · 주 버튼은 보라 #5b3df0 (흰 글자 대비 6.2:1)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --brand: #5b3df0;
  --brand-dark: #4527d6;
  --brand-soft: #f0edff;
  --yellow: #d4b36c;          /* 옛 노랑 자리 → 샴페인 골드 */
  --yellow-soft: #faf4e4;
  --blue: #3d5bd9;
  --blue-soft: #eef1ff;
  --live: #ff2d6f;

  --ink: #14163a;
  --ink-2: #41456a;
  --ink-3: #676a8a;           /* #f6f5fc 위 4.8:1 */
  --ink-4: #9c9fb8;           /* 장식·취소선 전용 — 본문 글자에는 쓰지 않는다 */

  --line: #e3e1f0;
  --line-2: #eeedf7;
  --bg: #f6f5fc;
  --bg-2: #efeef8;

  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(11, 16, 51, .04), 0 12px 30px -14px rgba(11, 16, 51, .18);
  --shadow-hover: 0 2px 6px rgba(11, 16, 51, .06), 0 24px 44px -20px rgba(52, 36, 150, .38);

  /* 새 토큰 */
  --navy: #0b1033;
  --navy-2: #141b4d;
  --navy-3: #232b6b;
  --on-navy: #ffffff;
  --on-navy-2: #c6cbef;       /* 남색 위 11:1 */
  --on-navy-3: #8f95c4;       /* 남색 위 6.4:1 */
  --gold: #d4b36c;
  --gold-2: #e8d29a;
  --gold-ink: #85651f;        /* 흰 바탕 위 금색 글자 5:1 */
  --gold-soft: #faf4e4;
  --gold-line: #e8d6a6;
  --holo: linear-gradient(110deg, #6fe3ff 0%, #9d8bff 34%, #ff9ad9 66%, #ffd98a 100%);
  --holo-bar: linear-gradient(90deg, #58d6ff, #8f7bff 45%, #ff86dd);
  --gold-bar: linear-gradient(90deg, #b8923f, #e8d29a);
}

body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: #d9d1ff; color: var(--ink); }
:focus-visible { outline: 3px solid rgba(91, 61, 240, .55); outline-offset: 2px; border-radius: 6px; }


/* 한글은 낱말 단위로 줄을 바꾼다 — '하이클래 / 스팩' 처럼 쪼개지지 않게 */
h1, h2, h3, .card-title, .pickbar-t, .line-title { word-break: keep-all; overflow-wrap: anywhere; }

/* ═══ 헤더 ═══════════════════════════════════════════════════════════ */
.header {
  background: var(--navy);
  backdrop-filter: none;
  border-bottom: 0;
  color: var(--on-navy);
}
/* 헤더 아래 1px 무지갯빛 선 — 이 사이트의 서명 */
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--holo-bar); opacity: .55; pointer-events: none;
}
.header-in { height: 64px; gap: 26px; position: relative; }

.logo { gap: 9px; }
.logo .mark { height: 34px; filter: drop-shadow(0 2px 8px rgba(143, 123, 255, .45)); }
.wm { font-size: 20px; font-weight: 900; letter-spacing: -0.04em; }
.wm em {
  background: var(--holo); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wm b { color: #fff; }
.logo:hover .wm b { color: #fff; }

/* 주 메뉴(PC) */
.nav { gap: 2px; align-self: stretch; font-size: 15px; font-weight: 600; color: var(--on-navy-2); }
.nav > a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; }
.nav a:hover, .nav a.on { color: #fff; }
.nav > a.cur { color: #fff; font-weight: 700; }
.nav > a.cur::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--holo-bar);
}
.golive i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--on-navy-3); flex: none;
}
.golive small {
  margin-left: 2px; padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 45, 111, .16); color: #ffb3c9;
  font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
}
.golive.on { color: #fff; }
.golive.on i { background: var(--live); box-shadow: 0 0 0 3px rgba(255, 45, 111, .25); }
@media (prefers-reduced-motion: no-preference) {
  .golive.on i { animation: th-beat 1.6s ease-in-out infinite; }
}
@keyframes th-beat { 50% { opacity: .35; } }

/* 검색 */
.search { flex: 0 1 300px; min-width: 190px; max-width: 300px; margin-left: auto; }
.search input {
  height: 40px; padding: 0 44px 0 16px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07);
  color: #fff; font-size: 14px;
}
.search input::placeholder { color: #9ba1cf; }
.search input:focus { border-color: #9d8bff; background: rgba(255, 255, 255, .11); }
.search button { top: 2px; right: 2px; width: 36px; height: 36px; color: var(--on-navy-2); }
.search button:hover { color: #fff; }

/* 우측 */
.header-right { margin-left: 0; gap: 2px; }
.header .hlink {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  font-size: 14.5px; font-weight: 700; color: #fff !important;
}
.header .hlink:hover { color: var(--gold-2) !important; }
.header-right a { color: #e6e8ff; }
.header-right a:hover { color: #fff; }
.hicon { width: 42px; height: 42px; color: #e6e8ff; }
.hicon:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cart-badge {
  top: 2px; right: 0; min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px;
  background: var(--gold); color: var(--navy); font-size: 11px;
  box-shadow: 0 0 0 2px var(--navy);
}

.burger span { background: #fff; }
.burger-dot { background: var(--gold); box-shadow: 0 0 0 2px var(--navy); }

/* PC 에서는 메뉴 안 게임 링크만 보이고, 칩 묶음·계정 줄은 숨긴다 */
.nav-games, .nav-row, .nav > a.nav-row, .nav-sub, .nav-search { display: none; }

/* ═══ 좁은 화면(태블릿 이하) — 햄버거 메뉴 ═══ */
@media (max-width: 1023px) {
  .header { background: var(--navy); }
  .header-in {
    height: 56px; padding: 0 16px; gap: 10px; justify-content: center; flex-wrap: nowrap;
  }
  .burger {
    display: flex; position: absolute; left: 6px; top: 6px; margin: 0;
    width: 44px; height: 44px; border-radius: 12px;
  }
  .burger:hover { background: rgba(255, 255, 255, .06); }
  .burger-dot { display: block; top: 9px; right: 9px; }
  .logo { margin: 0; gap: 6px; transform: none; }
  .logo .mark { height: 30px; }
  .wm { font-size: 18px; }

  .search { display: none; }
  /* 오른쪽은 장바구니만 */
  .header-right { display: flex; position: absolute; right: 6px; top: 6px; }
  .header-right .hide-sm { display: none; }
  .hicon { width: 44px; height: 44px; }

  /* 메뉴 판 — 헤더 바로 아래로 펼쳐진다(글자를 밀지 않고 위에 얹힌다) */
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    width: auto; margin: 0; order: 0; flex-direction: column; gap: 0;
    max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto;
    padding: 14px 16px 24px; border-top: 1px solid rgba(255, 255, 255, .08);
    background: var(--navy);
    box-shadow: 0 30px 50px -10px rgba(5, 8, 30, .55);
    font-size: 16px; color: #fff;
  }
  .nav.open { display: flex; }
  /* 메뉴가 열리면 아래 화면을 어둡게 — 헤더는 가리지 않는다 */
  .nav.open {
    box-shadow: 0 30px 50px -10px rgba(5, 8, 30, .55), 0 100vh 0 100vh rgba(5, 8, 30, .5);
  }
  .nav > a, .nav-row, .nav > a.nav-row {
    display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 17px; font-weight: 700; color: #fff;
  }
  .nav > a.cur::after { display: none; }
  .nav > a.cur { color: var(--gold-2); }
  .nav > a.nav-game { display: none; }   /* 칩 묶음이 대신한다 */
  button.nav-row {
    width: 100%; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: none; text-align: left; cursor: pointer; font: inherit;
    font-size: 17px; font-weight: 700; color: #fff;
  }
  .nav-row .ic, .nav > a .ic { color: var(--on-navy-3); }
  .golive small { margin-left: auto; font-size: 12.5px; padding: 3px 9px; }
  .nav-count {
    margin-left: auto; min-width: 24px; height: 24px; line-height: 24px; padding: 0 7px;
    border-radius: 12px; background: var(--gold); color: var(--navy);
    font-size: 12.5px; font-weight: 800; font-style: normal; text-align: center;
  }

  .nav-search { display: flex; position: relative; margin: 0 0 10px; }
  .nav-search input {
    width: 100%; height: 50px; padding: 0 50px 0 16px; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08);
    color: #fff; outline: none; font-size: 16px;
  }
  .nav-search input::placeholder { color: #9ba1cf; }
  .nav-search input:focus { border-color: #9d8bff; background: rgba(255, 255, 255, .12); }
  .nav-search button {
    position: absolute; right: 3px; top: 3px; width: 44px; height: 44px;
    border: 0; border-radius: 12px; background: none; cursor: pointer;
    color: var(--on-navy-2); display: grid; place-items: center;
  }

  .nav-games {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 12px; padding: 14px; border-radius: 16px; border: 0;
    background: rgba(255, 255, 255, .05);
  }
  .nav-games + .nav-games { margin-top: 8px; }
  .nav-games-t {
    width: 100%; margin-bottom: 2px;
    font-size: 14px; font-weight: 700; color: var(--on-navy-3); letter-spacing: .02em;
  }
  .nav-games a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
    font-size: 15.5px; font-weight: 700; color: #e6e8ff; background: transparent;
  }
  .nav-games a.on { background: #fff; border-color: #fff; color: var(--navy); }
  .nav-games + .nav-row, .nav-games + a.nav-row { margin-top: 10px; }

  .nav-sub {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 18px 0 0;
    font-size: 15px; color: var(--on-navy-2);
  }
  .nav-sub a, .nav-sub .linkbtn, .nav-sub form {
    display: flex; align-items: center; justify-content: center; min-height: 46px;
    border-radius: 12px; background: rgba(255, 255, 255, .06);
    font-size: 15px; font-weight: 700; color: #e6e8ff;
  }
  .nav-sub form { background: none; }
  .nav-sub form .linkbtn { width: 100%; }
}

.linkbtn { color: var(--ink-3); font-size: 14px; }


/* ═══ 상품 목록 전용 분류 줄 ═════════════════════════════════════════ */
.framed .filterbar { display: none; }
.filterbar { background: #fff; border-bottom: 1px solid var(--line); }
.filterbar .wrap {
  display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px;
  overflow-x: auto; scrollbar-width: none;
}
.filterbar .wrap::-webkit-scrollbar { display: none; }
.seg-t { flex: none; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.seg-t + .seg { margin-right: 14px; }
.seg {
  flex: none; display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px;
  background: var(--bg-2);
}
.seg a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.seg a:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.seg a.on { background: var(--navy); color: #fff; box-shadow: 0 6px 14px -8px rgba(11, 16, 51, .7); }
@media (max-width: 620px) {
  .filterbar .wrap { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .seg-t { display: none; }
  .seg-t + .seg { margin-right: 0; }
  .seg a { padding: 0 11px; }
}


/* ═══ 안내 띠 ═══ */
.prenotice { background: var(--gold-soft); border-bottom: 1px solid var(--gold-line); }
.prenotice b { color: var(--gold-ink); font-size: 13.5px; }
.prenotice span { font-size: 13.5px; }


/* ═══ 버튼 · 칩 ═══════════════════════════════════════════════════════ */
.btn {
  height: 52px; padding: 0 26px; border-radius: 14px;
  background: var(--brand); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 10px 22px -12px rgba(69, 39, 214, .75);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:hover { background: var(--brand-dark); box-shadow: 0 14px 26px -12px rgba(69, 39, 214, .85); }
.btn:disabled, .btn:disabled:hover { background: var(--line); color: var(--ink-3); box-shadow: none; }
.btn.ghost {
  background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { border-color: #b9aefc; background: #fff; color: var(--brand-dark); }
.btn.sm { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 11px; }

.bigbtn { border-radius: 14px; background: var(--brand); box-shadow: 0 10px 22px -12px rgba(69, 39, 214, .75); }

.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.chip:hover { border-color: #b9aefc; color: var(--brand-dark); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.qty { border-radius: 12px; border-color: var(--line); background: #fff; }
.qty button { color: var(--ink-2); }
.qty button:hover { background: var(--brand-soft); color: var(--brand-dark); }


/* ═══ 섹션 머리 · 페이지 제목 ═════════════════════════════════════════ */
.section-head h2, .sec-h h2 { color: var(--ink); }
.section-head .more:hover, .sec-h a:hover { color: var(--brand); }

.page h1 { font-size: 28px; letter-spacing: -0.035em; }
.page h1 .count {
  display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold-line);
  font-size: 15px; font-weight: 800; vertical-align: 4px;
}


/* ═══ 상품 카드 — 흰 카드, 마우스를 올리면 무지갯빛 테두리 ═══════════════ */
/* minmax(0,1fr) — 긴 시리즈명이 칸 폭을 밀어내지 않게 */
.grid { gap: 22px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) { .grid { gap: 12px; } }
.card { min-width: 0; }
.grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative; display: flex; flex-direction: column;
  padding: 8px 8px 16px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -24px rgba(11, 16, 51, .45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--holo); opacity: 0; transition: opacity .25s ease; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px transparent, var(--shadow-hover); }
.card:hover::before { opacity: 1; }
.card-thumb { border-radius: 12px; background: #fff; }
.card:hover .card-thumb { box-shadow: none; transform: none; }
.card-thumb.blank { background: var(--bg-2); color: var(--ink-3); }

.card-body { padding: 12px 6px 0; }
.card-series {
  display: block; min-width: 0;
  color: var(--ink-3); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-title {
  margin: 6px 0 10px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink);
  min-height: 2.9em;
}
.card-price { font-size: 18px; color: var(--ink); }
.card-price .off { color: var(--brand); }
.card-price .from { color: var(--ink-3); }
.card-price .was { color: var(--ink-4); }
.card-meta .rv { color: var(--ink-3); }
.stars i.on { color: #e0a526; }

.tags { top: 10px; left: 10px; }
.tag {
  padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  background: rgba(11, 16, 51, .88); color: #fff;
}
.tag.hot, .tag.brk {
  /* HOT 은 눈에 띄어야 한다 — 금색 대신 분홍빛 빨강(흰 글자 4.9:1) */
  background: linear-gradient(135deg, #f0457a, #d91f5c); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.tag.new { background: var(--brand); }
.tag.live { background: var(--live); }

.soldout { background: rgba(246, 245, 252, .8); color: var(--ink-2); }

.unitmark {
  margin-right: 4px; padding: 2px 8px; border-radius: 6px; vertical-align: 1px;
  font-size: 11.5px; font-weight: 800; background: var(--bg-2); color: var(--ink-2);
}
.unitmark.box { background: var(--navy); color: #fff; }

.freeship {
  background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold-line);
  font-size: 12px;
}
.freeship.sale { background: var(--live); color: #fff; border-color: var(--live); }

.dot-stock.ok { background: #1fae6a; }
.dot-stock.low { background: var(--gold); }

.ranked::before { background: var(--navy); border-radius: 8px; }
.ranked[data-rank="1"]::before { background: linear-gradient(135deg, #f4e4b8, #c9a452); color: #3a2905; }
.ranked[data-rank="2"]::before { background: linear-gradient(135deg, #eef0f8, #b3b8d0); color: var(--ink); }
.ranked[data-rank="3"]::before { background: linear-gradient(135deg, #f1d2b8, #c08559); color: #3a1f08; }


/* ═══ 목록 도구 · 페이지 번호 ═══ */
.listbar { margin: -4px 0 24px; padding-bottom: 16px; border-bottom-color: var(--line); }
.sorts { gap: 4px; font-size: 14px; }
.sorts a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 10px;
  color: var(--ink-3);
}
.sorts a:hover { color: var(--ink); background: var(--bg-2); }
.sorts a.on { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 620px) { .sorts { font-size: 14px; gap: 2px; } }

.pager a, .pager .gap { min-width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
.pager a:hover { background: #fff; }
.pager a.on { background: var(--navy); color: #fff; }


/* ═══ 상품 상세 ═════════════════════════════════════════════════════ */
.detail { padding-top: 40px; }
/* 사진 틀 — 그레이딩 슬랩처럼 안쪽에 얇은 금색 선 */
.detail-img {
  position: relative; background: #fff; border-radius: 24px;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(11, 16, 51, .45);
}
.detail-img::after {
  content: ""; position: absolute; inset: 10px; border-radius: 16px; pointer-events: none;
  border: 1px solid var(--gold-line);
}
.detail .series { color: var(--gold-ink); font-size: 14px; font-weight: 700; letter-spacing: -0.005em; }
.detail h1 { font-size: 27px; color: var(--ink); }
.detail .price { font-size: 32px; color: var(--ink); }
.detail .price .off { color: var(--brand); }
.detail .price .was { color: var(--ink-4); }
.detail .rating span { color: var(--ink-3); }
.detail .desc { color: var(--ink-2); font-size: 15px; }

.spec { position: relative; border-top-color: var(--line); }
.spec::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 2px; background: var(--gold-bar);
}
.spec div { border-bottom-color: var(--line-2); font-size: 15px; }
.spec dt { color: var(--ink-3); }

.subs-link {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0 0 14px;
  padding: 0 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  color: var(--brand-dark); font-size: 15px; font-weight: 800;
}
.subs-link:hover { border-color: #b9aefc; }

.pickbar { background: #fff; border-color: var(--line); border-radius: 16px; }
.pickbar-t { font-size: 14px; color: var(--ink-2); }
.totalbar { border-top: 2px solid var(--navy); }
.totalbar span { color: var(--ink-2); letter-spacing: .12em; }
.totalbar b { color: var(--brand); }

/* 되돌릴 수 없는 조건(청약철회 제한) — 금빛 주의 상자로 또렷하게 */
.fulfill-note { background: var(--bg-2); color: var(--ink-2); font-size: 13.5px; border-radius: 12px; }
.fulfill-note.warn { background: var(--gold-soft); color: var(--ink-2); border: 1px solid var(--gold-line); }
.fulfill-note.warn b { color: #6b4c0c; }
.checkline.nocancel { background: var(--gold-soft); border-color: var(--gold-line); }
.checkline.nocancel b { color: #6b4c0c; }
.fmark.break { background: var(--brand-soft); color: var(--brand-dark); border-color: #d9d1ff; }

.opt { border-color: var(--line); background: #fff; }
.opt:hover { border-color: #b9aefc; }
.opt.on { border-color: var(--brand); background: var(--brand-soft); }
.opt.on .opt-price { color: var(--brand-dark); }

.saleband { background: #fff0f5; border-color: #ffd0de; color: #b3124a; }
.saleband b { background: var(--live); }

/* 상세 탭 */
.tabs { border-bottom-color: var(--line); gap: 2px; }
.tabs a { position: relative; padding: 15px 18px; font-size: 15px; color: var(--ink-3); border-bottom: 0; }
.tabs a.on { color: var(--ink); }
.tabs a.on::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--holo-bar);
}
.tabs em { color: var(--brand); }
.tabnote { background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.tabnote a { color: var(--brand); }
.writebox { background: #fff; border-color: var(--line); border-radius: 16px; }
.writebox textarea:focus { border-color: var(--brand); }
.cmlist { border-top: 2px solid var(--navy); }
.cmanswer { background: var(--bg-2); }
.cmanswer b { color: var(--brand); }
.qstate.done { background: var(--brand-soft); color: var(--brand-dark); }

.ntc-view th { background: var(--bg-2); color: var(--ink-3); }

/* 이 팩에서 나오는 카드(어두운 쇼케이스) — 남색 틀에 맞춘다 */
.cl-sec {
  --d-bg: #0b1033; --d-panel: #141b4d; --d-panel-2: #0f1540;
  --d-line: #2a3274; --d-ac: #8f7bff;
  box-shadow: 0 0 0 1px rgba(212, 179, 108, .28);
}
.cl-head { border-color: rgba(212, 179, 108, .45); background: linear-gradient(180deg, rgba(143, 123, 255, .14), transparent); }
.cl-sup { color: var(--gold-2); }


/* ═══ 폼 · 로그인 ═══════════════════════════════════════════════════ */
.auth {
  max-width: 460px; margin: 48px auto 72px; padding: 40px 36px 32px;
  background: #fff; border-radius: 24px;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(11, 16, 51, .5);
  position: relative;
}
.auth::before {
  content: ""; position: absolute; left: 36px; right: 36px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--holo-bar);
}
.auth h1 { font-size: 26px; color: var(--ink); }
.auth .lead { color: var(--ink-3); font-size: 15px; }
@media (max-width: 520px) {
  .auth { margin: 20px 12px 48px; padding: 30px 20px 26px; border-radius: 20px; }
  .auth::before { left: 20px; right: 20px; }
}

.field label { font-size: 14px; color: var(--ink-2); }
.field input, .field textarea, .field select {
  height: 52px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { height: auto; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91, 61, 240, .12);
}
.field .hint { color: var(--ink-3); font-size: 13px; }
.field input[readonly] { background: var(--bg-2); }

.checkline input, .opt input, .cart-modal-row input[type=checkbox] { accent-color: var(--brand); }
.checkline a { color: var(--brand); }
.fgroup-t { border-bottom-color: var(--line); }
.agrees { background: var(--bg); border-color: var(--line); }
.pvbox { background: var(--bg); border-color: var(--line); }
.pvbox-t b { color: var(--brand); }

.alert { background: #fff0f4; color: #a8163c; border: 1px solid #ffd1dd; font-size: 14px; }
.alert.ok { background: #e9f7ef; color: #1a7a45; border-color: #bfe6cd; }
.auth-foot { font-size: 14px; color: var(--ink-3); line-height: 1.9; }
.auth-foot a { color: var(--brand); }


/* ═══ 장바구니 · 주문 · 결제 ═════════════════════════════════════════ */
.linelist { border-top: 2px solid var(--navy); }
.line { border-bottom-color: var(--line); }
.line-img { border-color: var(--line); background: #fff; }
.line-kind { color: var(--brand); }
.summary { border: 0; border-radius: 20px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.summary .total { border-top-color: var(--line); }
.summary .total b { color: var(--brand); }
.summary .note { color: var(--ink-3); }

.statusbox { background: #fff; border-color: var(--line); }
.breakbox { background: var(--brand-soft); border-color: #d9d1ff; }
.bb-head b { color: var(--brand-dark); }

.paybox { border-color: var(--line); }
.paymethods .checkline { background: #fff; border-color: var(--line); }
.paymethods .checkline:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.mockbox { background: var(--gold-soft); border-color: var(--gold-line); }
.mockbox b { color: var(--gold-ink); }

.pill.paid { background: var(--brand-soft); color: var(--brand-dark); border-color: #d9d1ff; }
.pill.pending { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.orderrow { border-bottom-color: var(--line); }
.orderrow .date { color: var(--ink-3); }


/* ═══ 마이페이지 · 공지 · 빈 화면 ═══ */
.mysum a { border: 0; box-shadow: 0 0 0 1px var(--line); }
.mysum a:hover { box-shadow: 0 0 0 1.5px #b9aefc, var(--shadow); }
.mybox > h2 .more:hover { color: var(--brand); }
.empty-sm { border-color: var(--line); color: var(--ink-3); background: #fff; }
.empty { color: var(--ink-3); }
.noticerow { border-bottom-color: var(--line); }
.noticerow:hover .nt { color: var(--brand); }
.noticerow .nd { color: var(--ink-3); }
.pin { background: var(--navy); color: var(--gold-2); }
.noticehead { border-bottom: 2px solid var(--navy); }
.doc a { color: var(--brand); }
.egg:hover { border-color: var(--brand); color: var(--brand); }


/* ═══ 푸터 — 남색 ═══════════════════════════════════════════════════ */
.footer {
  position: relative; margin-top: 80px; padding: 44px 0 56px; border-top: 0;
  background: var(--navy); color: var(--on-navy-2);
}
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-2) 50%, var(--gold) 80%, transparent);
  opacity: .7;
}
.foot-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot-brand img { height: 32px; width: auto; }
.foot-brand .wm { font-size: 20px; }
.foot-tag { margin: 0; font-size: 14px; color: var(--on-navy-3); }
.footer .links { gap: 6px 24px; font-size: 14.5px; margin-bottom: 18px; }
.footer .links a { color: #fff; display: inline-flex; align-items: center; min-height: 32px; }
.footer .links a:hover { color: var(--gold-2); }
.footer .biz { color: var(--on-navy-3); font-size: 13px; line-height: 1.9; }
.footer .biz b { color: var(--on-navy-2); }
.footer .biz a { color: var(--gold-2); }
.footer .copy { color: var(--on-navy-3); font-size: 12.5px; }


/* ═══ 라이브 화면 — 남색 무대 ═══════════════════════════════════════ */
body:has(.live-shell) {
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(107, 77, 255, .28), transparent 70%),
    radial-gradient(800px 500px at 90% 30%, rgba(80, 200, 255, .12), transparent 70%),
    var(--navy);
  background-attachment: fixed;
}
body:has(.live-shell) .footer { margin-top: 40px; }
.livedot { background: var(--live); }
.live-video { background: #05081f; }
.live-empty a { color: var(--gold-2); }
.live-tag.brand { background: var(--brand); box-shadow: 0 2px 10px rgba(91, 61, 240, .5); }
.live-price-btn { background: rgba(11, 16, 51, .62); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.live-price-btn.live-cart-btn { background: var(--brand); box-shadow: 0 6px 16px -6px rgba(91, 61, 240, .8); }
.live-price-btn.live-cart-btn:hover { background: var(--brand-dark); }
.live-chat-panel { background: #fff; }
.live-chat-panel .live-empty-sm { color: var(--ink-3); }
.live-tabs button.on { border-bottom-color: var(--brand); }
.live-plabel .n { color: var(--brand); }
.live-info .p .off { color: var(--brand); }
.live-slide-fill { background: var(--brand); }
.live-slide-thumb { color: var(--brand); }
.live-price-card:hover .t, .live-price-back:hover, .quickbuy-notice-terms:hover { color: var(--brand); }
.live-price-detail-p { color: var(--brand); }
.live-price-form input:focus, .cart-modal-card select:focus { border-color: var(--brand); }
.cart-modal-sheet, .checkout-sheet, .price-modal-box { box-shadow: 0 -8px 40px rgba(5, 8, 30, .35); }
@media (min-width: 900px) {
  .live-shell { justify-content: center; gap: 24px; padding: 32px 20px 8px; }
  .live-video.v { margin: 0; }   /* 좌우 auto 여백이 남는 폭을 먹어 채팅이 오른쪽 끝으로 밀리던 것 */
  .live-video {
    border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(212, 179, 108, .45), 0 40px 80px -30px rgba(0, 0, 0, .7);
  }
  .live-chat-panel {
    border: 0; border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .6);
  }
}
@media (max-width: 899px) {
  .live-chat-panel { margin: 12px 12px 0; border-radius: 18px; }
}
@media (max-width: 380px) {
  .seg a { padding: 0 9px; font-size: 14.5px; }
}


/* ═══════════════════════════════════════════════════════════════════
   글꼴 · 줄바꿈 (2026-09-27)
   본문 — 원티드 산스: 획이 또렷해서 작은 글씨도 잘 읽힌다.
   제목·가격·로고 — 페이퍼로지: 굵고 단단해서 홀로 그림 옆에서도 눌리지 않는다.
   줄바꿈 — 한국어 낱말 중간에서 끊지 않고(keep-all), 제목은 줄 길이를 고르게(balance),
   본문은 마지막 줄에 한 낱말만 떨어지지 않게(pretty) 한다. "뜯어 / 드려요" 방지.
   ═══════════════════════════════════════════════════════════════════ */
body {
  font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: -0.005em;
}
h1, h2, h3,
.wm, .foot-brand .wm,
.price, .card-price, .detail .price,
.jrh h1, .jrh h2, .jrh h3,
.sec-h h2, .page h1 {
  font-family: "Paperlogy", "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  letter-spacing: -0.02em;
}
h1, h2, h3, .card-title, .jrh h1, .jrh h2, .jrh h3 { text-wrap: balance; }
p, li, dd, .desc { text-wrap: pretty; }
/* 두세 줄짜리 짧은 설명은 두 줄 길이를 맞춘다 */
.jrh p, .jrh small, .jrh span { text-wrap: balance; }
/* 입력칸 · 버튼은 본문 글꼴을 그대로 */
button, input, select, textarea { font-family: inherit; }


/* ═══════════════════════════════════════════════════════════════════
   폰 화면 (2026-09-28)
   · 결제 · 구매 버튼은 화면 아래에 붙여 늘 보이게 한다 — 상세 화면이 폰에서
     5,000px 가 넘어 '바로 구매'가 스크롤 한가운데 묻혀 있었다.
   · 버튼 글씨는 크고 굵게, 금액(.amt)은 한 번 더 굵게.
   · 카드 안에 카드가 들어가 좌우 여백이 두 번 먹던 곳을 걷어 내 폭을 꽉 채운다.
   고정 버튼이 가리는 만큼 페이지 아래에 여백을 둔다(:has 를 모르는 옛 브라우저는
   맨 아래 몇 줄이 버튼 뒤로 가지만 누르는 데는 지장이 없다).
   ═══════════════════════════════════════════════════════════════════ */
.btn .amt { font-weight: 900; letter-spacing: -0.02em; }

@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px; }

  /* ── 상세: 사진은 화면 폭 가득, 액자는 걷어 낸다 ── */
  .detail { padding-top: 0; gap: 18px; }
  .detail-img { margin: 0 -16px; border-radius: 0; box-shadow: 0 1px 0 var(--line); }
  .detail-img::after { display: none; }
  .detail-img img { padding: 14px 0; }
  .detail h1 { font-size: 23px; line-height: 1.32; }
  .detail .price { font-size: 30px; margin: 10px 0 16px; }

  /* ── 목록 카드: 안쪽 여백을 줄여 사진을 키운다 ── */
  .grid { gap: 10px; }
  .card { padding: 6px 6px 14px; border-radius: 16px; }
  .card-body { padding: 10px 4px 0; }

  /* ── 주문서 · 장바구니 · 결제 · 주문 상세의 금액 상자 ── */
  .summary { padding: 20px 18px; border-radius: 18px; }

  /* ── 아래에 붙는 주 버튼 ── */
  body:has(.detail .buybar),
  body:has(.summary .btn.block:not(.ghost)) {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  /* 단일 버튼 뒤에 깔리는 흰 바닥 — 상세 화면의 구매 바와 같은 모양 */
  body:has(.summary .btn.block:not(.ghost))::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; pointer-events: none;
    height: calc(84px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
    box-shadow: 0 -12px 30px -20px rgba(11, 16, 51, .45);
  }
  .summary .btn.block:not(.ghost) {
    position: fixed; z-index: 45;
    left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; min-height: 60px; margin: 0;
    border-radius: 18px;
    font-size: 18.5px; font-weight: 800; letter-spacing: -0.01em;
    background: linear-gradient(135deg, #7457ff 0%, #5b3df0 55%, #4a2fd6 100%);
    color: #fff; text-shadow: 0 1px 1px rgba(20, 10, 80, .25);
    box-shadow: 0 10px 22px -10px rgba(76, 52, 230, .7);
  }
  .summary .btn.block:not(.ghost):disabled {
    background: #d9d6ea; color: #4a4868; text-shadow: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
  }
  .summary .btn.block:not(.ghost) .amt { font-size: 1.1em; }

  /* 상세의 [장바구니][바로 구매] — 흰 바닥째 아래에 붙인다 */
  .detail .buybar {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; margin: 0; gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -20px rgba(11, 16, 51, .45);
  }
  .detail .buybar .btn { min-height: 58px; border-radius: 16px; font-size: 18px; font-weight: 800; }
  .detail .buybar .btn:not(.ghost) {
    color: #fff; text-shadow: 0 1px 1px rgba(20, 10, 80, .25);
    background: linear-gradient(135deg, #7457ff 0%, #5b3df0 55%, #4a2fd6 100%);
    box-shadow: 0 10px 22px -10px rgba(76, 52, 230, .7);
  }
  .detail .buybar .btn.ghost { padding: 0 18px; border-width: 2px; }
  .detail .buybar .btn:not(.ghost):disabled {
    background: #d9d6ea; color: #4a4868; text-shadow: none; box-shadow: none;
  }
}


/* ═══ 방송 화면 — 폰 (2026-09-29) ═══════════════════════════════════
   영상은 폭을 꽉 채우고, 채팅은 영상 위에 반투명하게 흐르고, 간편결제는 화면 맨 아래에
   붙인다(틱톡·인스타 라이브 모양). 결제 폼·버튼·id 는 그대로 두고 자리만 옮겼다.
   ═══════════════════════════════════════════════════════════════════ */
.live-chat-ov, .live-chat-sheet-head { display: none; }

@media (max-width: 899px) {
  /* 영상 — 세로 방송이 가로 폭을 꽉 채우게. 아래 결제 바만큼은 남긴다 */
  .live-video.v {
    width: 100%; max-width: none; height: auto; aspect-ratio: 9 / 16;
    max-height: calc(100svh - 56px - 96px - env(safe-area-inset-bottom, 0px));
    margin: 0;
  }

  /* 채팅 오버레이 — 영상 아래쪽, 보기만 한다(영상 누르는 데 방해 안 되게 통과) */
  .live-chat-ov {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    position: absolute; left: 10px; right: 70px; bottom: 12px; z-index: 4;
    pointer-events: none;
  }
  .live-chat-ov ul {
    list-style: none; margin: 0; padding: 0; width: 100%;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    max-height: 32svh; overflow: hidden;
    -webkit-mask-image: linear-gradient(to top, #000 72%, transparent);
    mask-image: linear-gradient(to top, #000 72%, transparent);
  }
  .live-chat-ov li {
    max-width: 100%; padding: 5px 11px; border-radius: 14px;
    background: rgba(5, 8, 31, .5); color: #fff;
    font-size: 14px; line-height: 1.4; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    word-break: break-word; transition: opacity .4s;
  }
  .live-chat-ov li b { margin-right: 6px; font-weight: 800; color: #c8bdff; }
  .live-chat-ov li.old { opacity: .7; }
  .live-chat-ov li.in { animation: live-chat-in .28s ease-out; }
  @keyframes live-chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .live-chat-ov-btn {
    pointer-events: auto;
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28); background: rgba(5, 8, 31, .55);
    color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }

  /* 공식 채팅 — '채팅 쓰기'를 누르면 아래에서 올라오는 시트 */
  .live-chat-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: 64svh; margin: 0; border-radius: 20px 20px 0 0;
    display: flex; flex-direction: column; background: #0e1438;
    transform: translateY(105%); transition: transform .28s ease;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  }
  .live-chat-panel.open { transform: none; }
  .live-chat-panel .live-chat-iframe { flex: 1; height: auto; }
  .live-chat-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; padding: 0 8px 0 18px; color: #fff; font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .live-chat-sheet-head button {
    width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 20px; cursor: pointer;
  }

  /* 간편결제 — 영상 밖으로 꺼내 화면 맨 아래에 붙인다 */
  body:has(.live-spot) { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .live-spot {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "row btn" "note terms";
    align-items: center; column-gap: 10px; row-gap: 6px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 11, 36, .97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .8);
  }
  #liveSpotAction, #liveSpotAction .live-buy, #liveSpotAction form { display: contents; }
  .live-spot-row:not([hidden]) { grid-area: row; margin: 0; padding: 0; background: none; min-width: 0; }
  .live-spot .live-empty-sm { grid-area: row; margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; }
  .live-spot-thumb { width: 48px; height: 48px; }
  .live-spot-info .t { font-size: 14px; }
  .live-spot-info .p { font-size: 16px; white-space: nowrap; }
  .live-spot-info .p .sub { font-size: 12px; }
  .live-spot .btn.block {
    grid-area: btn; width: auto; height: 50px; min-height: 50px; padding: 0 16px;
    font-size: 15.5px; font-weight: 800; white-space: nowrap; border-radius: 14px;
  }
  .live-spot .lb-price { display: none; }   /* 금액은 왼쪽에 크게 있으니 버튼은 짧게 */
  .live-spot .live-slide-note { grid-area: note; margin: 0; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .6); }
  .live-spot .live-slide-err { grid-area: note; }
  /* 태그 줄에서는 '이용약관' 링크만 남겨 오른쪽 아래에 둔다 */
  .live-spot-tags:not([hidden]) { grid-area: terms; margin: 0; }
  .live-spot-tags .live-tag:not(.live-spot-terms-link) { display: none; }
}