/* ==========================================================================
   vip — VIP 혜택 · 접두어 vp-
   [내 등급 띠 : 회원증 | 다음 등급까지 | 다음 등급이 되면] → [등급 비교표(PC) · 등급 칩 + 한 장(휴대폰)] → 안내
   회원증은 마이페이지 회원카드와 같은 어두운 금속판. 숫자는 흰색, 금색은 내 등급 · 선 · 버튼에만.
   ========================================================================== */
.vp{ --card:var(--pn-card); --well:var(--pn-well); display:grid; gap:14px; margin-top:-16px; padding-bottom:48px; }   /* 위 — 헤더와 14 */

/* ---- 내 등급 띠 --------------------------------------------------------- */
.vp-me{
  display:grid; grid-template-columns:240px minmax(0,1fr) minmax(0,1.1fr); overflow:hidden;
  border-radius:20px; border:1px solid rgb(var(--fg-rgb) / .07); background:var(--card);
}
.vp-me__plate{
  position:relative; overflow:hidden; isolation:isolate; display:grid; align-content:space-between; gap:10px; min-height:150px; padding:16px 20px;
  background:linear-gradient(140deg, #2b2415 0%, #1a160e 55%, #262013 100%); border-right:1px solid color-mix(in srgb, var(--accent) 16%, transparent); color:#d8b567;
}
.vp-me__plate::before{ content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(115deg, color-mix(in srgb, var(--accent) 4%, transparent) 0 1px, transparent 1px 8px); }
.vp-me__plate::after{ content:""; position:absolute; z-index:-1; width:220px; height:220px; right:-100px; top:-110px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%); }
.vp-me__brand{ display:flex; justify-content:space-between; align-items:center; margin:0; font-size:10.5px; font-weight:800; letter-spacing:.22em; color:rgba(216,181,103,.7); }
.vp-me__lv{ font-family:'Barlow Condensed', var(--font); font-size:52px; font-weight:800; line-height:.8; background:linear-gradient(180deg, #f1d58e, #b98a33); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vp-me__who{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin:0; }
.vp-me__who b{ font-family:'Barlow Condensed', var(--font); font-size:24px; font-weight:800; line-height:1; color:color-mix(in srgb, var(--gold) 20%, #eee); }
.vp-me__who small, .vp-me__plate > small{ font-size:10.5px; font-weight:700; color:color-mix(in srgb, color-mix(in srgb, var(--gold-deep) 65%, #fff) 60%, transparent); }
.vp-me__cap{ display:flex; align-items:center; gap:6px; margin:0; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--text-sub); }
/* 가운데 — 다음 등급까지 */
.vp-me__next{ display:grid; align-content:center; justify-items:start; gap:5px; padding:18px 24px; }
.vp-me__big{ margin:0; font-size:15px; font-weight:700; color:var(--text-sub); }
.vp-me__big b{ font-family:'Barlow Condensed', var(--font); font-size:32px; font-weight:800; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.vp-me__big em{ font-style:normal; font-weight:900; color:var(--accent-fg); }
.vp-me__base{ display:flex; align-items:center; gap:8px; margin:0; font-size:12px; color:var(--text-sub); white-space:nowrap; }
.vp-me__base b{ color:var(--text); }
.vp-me__base i{ width:1px; height:10px; background:var(--line-strong); }
.vp-me__go{ gap:4px; height:34px; margin-top:6px; padding:0 14px; font-size:12.5px; }
.vp-me__go svg{ width:12px; height:12px; }
/* 오른쪽 — 다음 등급이 되면 [이름 ··· 지금 › 다음] */
.vp-me__ups{ display:grid; align-content:center; gap:8px; padding:16px 22px; border-left:1px solid rgb(var(--fg-rgb) / .06); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 75%); }
.vp-me__ups ul{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; margin:0; padding:0; list-style:none; }
.vp-me__ups li{ display:grid; grid-template-columns:minmax(0,1fr) auto 12px auto; align-items:center; gap:6px; height:28px; border-bottom:1px solid rgb(var(--fg-rgb) / .05); font-size:12px; color:var(--text-sub); white-space:nowrap; }
.vp-me__ups li s{ text-decoration:none; color:var(--text-sub); font-variant-numeric:tabular-nums; }
.vp-me__ups li svg{ width:11px; height:11px; color:var(--accent-fg); }
.vp-me__ups li b{ color:var(--text); font-weight:800; font-variant-numeric:tabular-nums; }
/* 비로그인 */
.vp-me.is-guest{ grid-template-columns:240px minmax(0,1fr) auto; align-items:center; }
.vp-me.is-guest .vp-me__plate{ min-height:110px; }
.vp-me__guest{ margin:0; padding:0 24px; font-size:14px; font-weight:700; color:var(--text); }
.vp-me__login{ margin-right:24px; }

/* ---- 등급 비교판 --------------------------------------------------------- */
.vp-board{ border-radius:20px; border:1px solid rgb(var(--fg-rgb) / .07); background:var(--card); overflow:hidden; }
.vp-board__head{ display:flex; align-items:baseline; gap:14px; padding:16px 22px; border-bottom:1px solid rgb(var(--fg-rgb) / .06); }
.vp-board__head h1{ margin:0; font-size:20px; font-weight:900; color:var(--text); white-space:nowrap; }
.vp-board__head p{ margin:0; font-size:12.5px; color:var(--text-sub); }
.vp-board__head p span{ margin-left:6px; padding:2px 8px; border-radius:6px; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent-fg); font-size:11px; font-weight:700; }

/* PC 비교표 — 등급이 가로. 내 등급 칸은 금색 기둥, 다음 등급 칸은 금색 테두리 */
.vp-mx-wrap{ padding:6px 14px 4px; overflow-x:auto; }
.vp-mx{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.vp-mx th, .vp-mx td{ height:44px; padding:0 8px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums; border-bottom:1px solid rgb(var(--fg-rgb) / .05); }
.vp-mx tbody th{ width:140px; padding-left:10px; text-align:left; font-size:12.5px; font-weight:700; color:var(--text-sub); }
.vp-mx__corner{ width:140px; text-align:left !important; padding-left:10px !important; font-size:11px; font-weight:700; color:var(--text-sub); vertical-align:bottom; padding-bottom:12px !important; }
.vp-mx td{ font-weight:800; color:var(--text); }
.vp-mx tr.is-text td{ font-size:11.5px; font-weight:600; line-height:1.5; color:var(--text-sub); word-break:keep-all; text-wrap:balance; }
.vp-mx .nb, .vp-pick__card .nb{ white-space:nowrap; }   /* 특별 혜택 — '한도 상향 협의' 같은 항목은 한 덩어리로 */
.vp-mx tbody tr:last-child > *{ border-bottom:0; height:52px; }
.vp-mx tbody tr:hover > *{ background:rgb(var(--fg-rgb) / .02); }
/* 등급 머리 — 아이콘 · LV.n · 이름 */
.vp-mx__lv{ position:relative; height:auto !important; padding:22px 4px 12px !important; vertical-align:bottom; }
.vp-mx__lv .lv-icon{ display:block; margin:0 auto 6px; }
.vp-mx__lv b{ display:block; font-family:'Barlow Condensed', var(--font); font-size:19px; font-weight:800; line-height:1; color:var(--text); }
.vp-mx__lv small{ display:block; margin-top:2px; font-size:11px; font-weight:600; color:var(--text-sub); }
.vp-mx__lv em{ position:absolute; top:6px; left:50%; translate:-50% 0; padding:1px 8px; border-radius:99px; font-size:10px; font-style:normal; font-weight:900; white-space:nowrap; background:rgb(var(--fg-rgb) / .08); color:var(--text); }
/* 내 등급 기둥 */
.vp-mx .is-mine{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
.vp-mx .vp-mx__lv.is-mine{ border-radius:14px 14px 0 0; box-shadow:inset 0 2px 0 var(--accent); }
.vp-mx .vp-mx__lv.is-mine em{ background:var(--accent); color:var(--accent-ink); }
.vp-mx .vp-mx__lv.is-mine b{ color:var(--accent-fg); }
.vp-mx tbody tr:last-child td.is-mine{ border-radius:0 0 14px 14px; }
/* 다음 등급 — 기둥 없이 머리 '다음' 표시만 */
.vp-mx .vp-mx__lv.is-next em{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-fg); }
/* 등급 칸 사이 — 모두 같은 반투명 세로선 (혜택 이름 칸 | LV.1 | LV.2 | … | VIP) */
.vp-mx thead th + th, .vp-mx tbody td{ border-left:1px solid rgb(var(--fg-rgb) / .06); }

/* 휴대폰 — 칩 + 한 장 (PC 에서는 숨김) */
.vp-pick{ display:none; }

.vp-notes{ display:grid; gap:4px; margin:0; padding:12px 22px 16px; list-style:none; border-top:1px solid rgb(var(--fg-rgb) / .06); }
.vp-notes li{ position:relative; padding-left:12px; font-size:12px; line-height:1.6; color:var(--text-sub); word-break:keep-all; }
.vp-notes li::before{ content:""; position:absolute; left:0; top:.7em; width:4px; height:4px; border-radius:50%; background:var(--text-sub); }
.vp-notes a{ display:inline-flex; align-items:center; gap:2px; margin-left:4px; font-weight:700; color:var(--accent-fg); }
.vp-notes a svg{ width:11px; height:11px; }

@media (max-width:1100px){
  .vp-me{ grid-template-columns:220px minmax(0,1fr); }
  .vp-me__ups{ grid-column:1 / -1; border-left:0; border-top:1px solid rgb(var(--fg-rgb) / .06); }
  .vp-me__ups ul{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ---- 휴대폰 (1023px 이하) ------------------------------------------------ */
@media (max-width:1023px){
  .vp{ gap:10px; margin-top:0; }
  .vp-me{ position:relative; grid-template-columns:minmax(0,1fr); border-radius:16px; }
  .vp-me__plate{ grid-template-columns:auto minmax(0,1fr); align-items:center; align-content:center; gap:14px; min-height:0; height:60px; padding:0 16px; border-right:0; border-bottom:1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
  .vp-me__brand{ display:none; }
  .vp-me__lv{ font-size:38px; }
  .vp-me__who{ display:grid; justify-content:start; gap:3px; }
  .vp-me__who b{ font-size:21px; }
  .vp-me__next{ padding:12px 14px; gap:3px; }
  .vp-me__big{ font-size:13px; }
  .vp-me__big b{ font-size:24px; }
  .vp-me__base{ font-size:11px; }
  .vp-me__go{ grid-area:auto; position:absolute; right:14px; top:14px; margin:0; height:32px; padding:0 12px; font-size:12px; }   /* 회원증 띠 오른쪽 */
  .vp-me__ups{ padding:12px 14px; gap:6px; }
  .vp-me__ups ul{ grid-template-columns:1fr 1fr; gap:0 14px; }
  .vp-me__ups li{ grid-template-columns:minmax(0,1fr) auto; height:26px; font-size:11px; gap:6px; }
  .vp-me__ups li s, .vp-me__ups li svg{ display:none; }   /* 좁아서 바뀐 뒤 값만 */
  .vp-me.is-guest{ grid-template-columns:minmax(0,1fr); }
  .vp-me__guest{ padding:12px 14px 0; font-size:13px; }
  .vp-me__login{ margin:10px 14px 14px; }

  .vp-board{ border-radius:16px; }
  .vp-board__head{ display:grid; gap:4px; padding:12px 14px; }
  .vp-board__head h1{ font-size:17px; }
  .vp-board__head p{ font-size:11.5px; line-height:1.5; }
  .vp-mx-wrap{ display:none; }
  .vp-pick{ display:grid; gap:10px; padding:12px; }
  .vp-pick__chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
  .vp-pick__chips::-webkit-scrollbar{ display:none; }
  .vp-pick__chips button{ flex:none; display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px; border-radius:99px; border:1px solid var(--line); background:var(--well); font-family:'Barlow Condensed', var(--font); font-size:15px; font-weight:800; color:var(--text-sub); cursor:pointer; }
  .vp-pick__chips button.is-mine{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent-fg); }
  .vp-pick__chips button.is-on{ background:var(--accent); border-color:var(--accent-line); color:var(--accent-ink); }
  .vp-pick__card{ border-radius:14px; border:1px solid var(--line); background:var(--well); overflow:hidden; }
  .vp-pick__card header{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid rgb(var(--fg-rgb) / .06); }
  .vp-pick__card header div{ display:grid; gap:2px; flex:1; min-width:0; }
  .vp-pick__card header b{ font-size:16px; color:var(--text); }
  .vp-pick__card header small{ font-size:11.5px; color:var(--text-sub); }
  .vp-pick__card header em{ flex:none; padding:2px 9px; border-radius:99px; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-fg); font-size:11px; font-style:normal; font-weight:900; }
  .vp-pick__card header em.is-mine{ background:var(--accent); color:var(--accent-ink); }
  .vp-pick__card dl{ display:grid; margin:0; padding:2px 14px 6px; }
  .vp-pick__card dl div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0; }
  .vp-pick__card dl div + div{ border-top:1px solid rgb(var(--fg-rgb) / .05); }
  .vp-pick__card dt{ flex:none; font-size:12px; color:var(--text-sub); }
  .vp-pick__card dd{ margin:0; font-size:14px; font-weight:800; color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }
  .vp-pick__card .is-text dd{ font-size:12.5px; font-weight:700; }
  .vp-notes{ padding:10px 14px 14px; }
  .vp-notes li{ font-size:11.5px; }
}