/* ===========================================
   현질 효율 페이지 (products.html / product_detail.html)
   - 모든 클래스는 pd- 접두사: 다른 페이지/전역 CSS 와 이름이 겹치지 않게
   - 색은 variables.css 의 사이트 변수만 쓴다 → 라이트/다크 자동 적용
   - 모바일 우선: 표는 480px 이하에서 카드 모양으로 바뀐다
   =========================================== */
.pd-section { max-width: 1180px; margin: 0 auto; padding-top: 28px; }

.pd-root {
    --pd-inset: #f1f5f9;
    --pd-hover: #eef3fb;
    --pd-track: #dbe3ef;
    --pd-coin: #b7791f;
    --pd-coin-bg: rgba(255, 193, 7, .16);
    --pd-up: #e5484d;
}
:root[data-theme="dark"] .pd-root {
    --pd-inset: #0e1626;
    --pd-hover: #18233b;
    --pd-track: #26334f;
    --pd-coin: #f5b301;
    --pd-coin-bg: rgba(245, 179, 1, .14);
}

.pd-section .page-title { font-size: 1.75rem; font-weight: 700; text-align: center; color: var(--text-primary); margin-bottom: 8px; }
.pd-section .page-subtitle { text-align: center; font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 8px; }

/* 멤버십 바로가기 */
.pd-jump {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-green);
    border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px;
    box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.pd-jump:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pd-jump-ico { font-size: 1.5rem; line-height: 1; }
.pd-jump-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-jump-tx b { font-size: 1rem; color: var(--text-primary); }
.pd-jump-tx small { color: var(--text-secondary); font-size: .82rem; }
.pd-jump-go { color: var(--primary-green); font-weight: 800; font-size: 1.2rem; }

.pd-tabs { margin-bottom: 12px; }

/* 검색 + 기준 */
.pd-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pd-search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 340px;
    background: var(--pd-inset); border: 1px solid var(--border-color); border-radius: 10px; padding: 0 12px;
}
.pd-search:focus-within { border-color: var(--primary-green); }
.pd-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    color: var(--text-primary); font: inherit; font-size: .9rem; padding: 10px 0;
}
.pd-search input::placeholder { color: var(--text-muted); }
.pd-basis { margin-left: auto; font-size: .78rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.pd-beta {
    background: var(--accent-yellow); color: #3b2d00; font-weight: 800; font-size: .68rem;
    padding: 1px 7px; border-radius: 999px;
}

/* 카드 공통 */
.pd-card { margin-bottom: 18px; }
.pd-card[hidden] { display: none; }

/* 목록 표 */
.pd-table { display: flex; flex-direction: column; }
.pd-tr {
    display: grid; grid-template-columns: 76px minmax(0, 1fr) 120px 150px 210px;
    align-items: center; gap: 12px; padding: 10px 16px;
    border-top: 1px solid var(--border-color); color: var(--text-primary);
}
.pd-tr[hidden] { display: none; }
a.pd-tr:hover { background: var(--pd-hover); }
.pd-th { border-top: 0; font-size: .78rem; font-weight: 700; color: var(--text-secondary); padding-top: 12px; padding-bottom: 12px; background: var(--pd-inset); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pd-c-img img { width: 64px; height: 64px; object-fit: contain; display: block; }
.pd-c-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-meta { display: none; font-size: .76rem; color: var(--text-secondary); }
.pd-c-name b { font-weight: 600; font-size: .92rem; line-height: 1.35; word-break: keep-all; }
.pd-c-price, .pd-c-ev { text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem; }
.pd-c-eff { text-align: right; font-variant-numeric: tabular-nums; }
.pd-c-eff b { font-size: 1.05rem; color: var(--primary-green); }
.pd-th .pd-c-price, .pd-th .pd-c-ev, .pd-th .pd-c-eff { text-align: right; }
.pd-bar { display: block; height: 5px; border-radius: 3px; background: var(--pd-track); margin-top: 6px; overflow: hidden; }
.pd-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary-green-dark), var(--primary-green-light)); }
.pd-soon { color: var(--text-muted); font-size: .82rem; }
.pd-empty { padding: 36px 16px; text-align: center; color: var(--text-secondary); }

.pd-tags { display: flex; flex-wrap: wrap; gap: 5px; font-style: normal; }
.pd-tag {
    font-style: normal; font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 6px;
    background: var(--pd-inset); color: var(--text-secondary); border: 1px solid var(--border-color);
}
.pd-tag.coin { color: var(--pd-coin); background: var(--pd-coin-bg); border-color: transparent; }

.pd-foot { font-size: .8rem; color: var(--text-secondary); line-height: 1.6; margin: 4px 2px 22px; }
.pd-note { font-size: .78rem; color: var(--text-secondary); line-height: 1.55; margin: 12px 0 0; }
.pd-lead { font-size: .95rem; color: var(--text-primary); line-height: 1.65; margin: 0 0 14px; }
.pd-lead b { color: var(--primary-green); }
.pd-sub { font-size: .95rem; font-weight: 700; margin: 18px 0 10px; color: var(--text-primary); }

/* 멤버십 */
.pd-member.pd-ring { animation: pdRing 1.4s ease-out; }
@keyframes pdRing { 0% { box-shadow: 0 0 0 0 rgba(52, 206, 87, .55); } 100% { box-shadow: 0 0 0 14px rgba(52, 206, 87, 0); } }
.pd-mtiers, .pd-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-tiers { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.pd-mt, .pd-tier {
    background: var(--pd-inset); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: 12px; display: flex; flex-direction: column; gap: 2px; text-align: center;
}
.pd-mt small, .pd-tier span { font-size: .75rem; color: var(--text-secondary); }
.pd-mt b, .pd-tier b { font-size: 1.05rem; color: var(--text-primary); }
.pd-mt em, .pd-tier em { font-style: normal; font-size: .75rem; color: var(--primary-green); font-weight: 700; }
.pd-plan { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.pd-plan-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border-color); }
.pd-plan-row:first-child { border-top: 0; }
.pd-plan-row:hover { background: var(--pd-hover); }
.pd-plan-row img { width: 54px; height: 54px; object-fit: contain; }
.pd-plan-nm { display: flex; flex-direction: column; min-width: 0; }
.pd-plan-nm b { font-size: .9rem; font-weight: 600; word-break: keep-all; }
.pd-plan-nm small, .pd-plan-ev small { color: var(--text-secondary); font-size: .74rem; }
.pd-plan-ev { text-align: right; font-weight: 700; font-size: .92rem; display: flex; flex-direction: column; }
.pd-plan-sum { margin-top: 10px; font-size: .9rem; color: var(--text-secondary); }
.pd-plan-sum b { color: var(--text-primary); }

/* 상세 */
.pd-back { display: inline-block; margin-bottom: 14px; font-size: .88rem; color: var(--text-secondary); }
.pd-back:hover { color: var(--primary-green); }
.pd-head-body { display: flex; gap: 16px; align-items: center; }
.pd-head-img { width: 104px; height: 104px; object-fit: contain; flex: 0 0 auto; }
.pd-head-tx { min-width: 0; }
.pd-title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin: 0 0 8px; word-break: keep-all; color: var(--text-primary); }
.pd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-color); }
.pd-stats > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border-color); }
.pd-stats > div:first-child { border-left: 0; }
.pd-stats small { font-size: .75rem; color: var(--text-secondary); }
.pd-stats b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pd-stats b i { font-style: normal; font-size: .72rem; font-weight: 500; color: var(--text-secondary); }
.pd-stat-eff b { color: var(--primary-green); }
.pd-items .pd-it { display: grid; grid-template-columns: minmax(0, 1fr) 56px 140px; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-color); font-size: .9rem; align-items: center; }
.pd-items .pd-it span:nth-child(2), .pd-items .pd-it span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.pd-items .pd-th { border-top: 0; background: none; padding-top: 0; font-size: .76rem; color: var(--text-secondary); border-radius: 0; }

/* 시뮬레이션 */
.pd-sim-ctl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.pd-reset { margin-left: 0; background: none; border: 0; color: var(--text-secondary); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; padding: 0 6px; }
.pd-reset:hover { color: var(--text-primary); }
.pd-sim-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pd-sim-sum > div { background: var(--pd-inset); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.pd-sim-sum small { display: block; font-size: .7rem; color: var(--text-secondary); }
.pd-sim-sum b { font-size: .98rem; font-variant-numeric: tabular-nums; }
.pd-sim-log { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.pd-lg { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--pd-inset); border-left: 3px solid var(--border-color); font-size: .86rem; }
.pd-lg-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-lg-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-lg.tier-s { border-left-color: #ec4899; }
.pd-lg.tier-a { border-left-color: var(--accent-yellow); }
.pd-lg.tier-b { border-left-color: var(--win-blue); }
.pd-lg.tier-c { border-left-color: var(--text-muted); }
.pd-sim-soon { text-align: center; padding: 20px 8px; color: var(--text-secondary); }
.pd-sim-soon b { display: block; color: var(--text-primary); margin-bottom: 6px; }
.pd-sim-soon p { margin: 0; font-size: .86rem; line-height: 1.6; }

/* ---------- 모바일 ---------- */
@media (max-width: 768px) {
    .pd-section { padding-top: 16px; }
    .pd-section .page-title { font-size: 1.4rem; }
    .pd-section .page-subtitle { font-size: .92rem; }
    .pd-tr { grid-template-columns: 60px minmax(0, 1fr) 120px; }
    .pd-tr .pd-c-price, .pd-tr .pd-c-ev { display: none; }
    .pd-meta { display: block; }
    .pd-c-eff b { font-size: 1rem; }
    .pd-c-name b { font-size: .86rem; }
    .pd-basis { margin-left: 0; width: 100%; }
    .pd-search { max-width: none; }
}
@media (max-width: 480px) {
    .pd-tr { padding: 10px 12px; gap: 10px; }
    .pd-c-img img { width: 54px; height: 54px; }
    .pd-mtiers { gap: 6px; }
    .pd-mt { padding: 10px 6px; }
    .pd-mt b { font-size: .92rem; }
    .pd-stats { grid-template-columns: 1fr; }
    .pd-stats > div { border-left: 0; border-top: 1px solid var(--border-color); flex-direction: row; justify-content: space-between; align-items: baseline; }
    .pd-stats > div:first-child { border-top: 0; }
    .pd-items .pd-it { grid-template-columns: minmax(0, 1fr) 40px 100px; font-size: .84rem; }
    .pd-sim-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-plan-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
}

/* ---- 화폐 아이콘: FC/MP 는 넥슨 상점 스프라이트 그대로, BP 는 노란 원 ---- */
.pd-fc, .pd-mp, .pd-bp { --k: .8; display: inline-block; width: calc(21px * var(--k)); height: calc(21px * var(--k)); vertical-align: -4px; margin-right: 4px; flex: none; }
.pd-fc, .pd-mp { background: url(https://ssl.nexon.com/s2/game/fc/online/shop/ico/ico_asset.png) no-repeat; background-size: calc(370px * var(--k)) auto; }
.pd-fc { background-position: calc(-9px * var(--k)) calc(-71px * var(--k)); }
.pd-mp { background-position: calc(-260px * var(--k)) calc(-71px * var(--k)); }
.pd-bp { position: relative; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe58a, #f4b81f 60%, #c98a08); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.pd-bp::after { content: 'B'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #7a4b00; line-height: 1; font-style: normal; }
.pd-meta .pd-fc, .pd-meta .pd-bp { --k: .7; }
.pd-tag.top { color: #1a1a1a; background: linear-gradient(135deg, #f7d774, #e8b84a); border-color: transparent; font-weight: 800; }
.pd-tag.bad { color: #e5484d; border-color: rgba(229, 72, 77, .45); }
.pd-bar.bad i { background: linear-gradient(90deg, #e5484d, #f08a5d); }

.pd-keyico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; font-style: normal; font-size: 1.5rem; border-radius: 12px; background: var(--pd-track); }
.pd-head-img.pd-keyico { width: 88px; height: 88px; font-size: 2.4rem; }
.pd-th .pd-c-eff b { color: var(--primary-green); font-size: .9rem; margin-right: 4px; }
.pd-th .pd-c-eff small { font-size: .72rem; font-weight: 600; color: var(--text-secondary); }

/* ---- 상자/선수팩 상세: 구성·확률, 선수 목록, 열어보기 카드 ---- */
.pd-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-ext { color: var(--primary-green); font-size: .78rem; font-weight: 700; text-decoration: none; }
.pd-tag.pd-ext { color: var(--primary-green); border-color: rgba(52, 206, 87, .4); }
.pd-items a:not(.pd-ext) { color: var(--text-primary); font-weight: 600; }
.pd-items a:not(.pd-ext):hover { color: var(--primary-green); }
.pd-rws { padding: 0 !important; }
.pd-rw { display: grid; grid-template-columns: minmax(0, 1fr) 90px 130px; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--border-color); font-size: .9rem; }
.pd-rw.pd-th { border-top: 0; }
.pd-rw.sub { padding-left: 34px; background: var(--pd-inset); font-size: .86rem; }
.pd-rw-p, .pd-rw-ev { text-align: right; font-variant-numeric: tabular-nums; }
.pd-rw-nm { min-width: 0; word-break: keep-all; line-height: 1.4; }
.pd-dt summary { list-style: none; cursor: pointer; }
.pd-dt summary::-webkit-details-marker { display: none; }
.pd-dt summary .pd-rw-nm::before { content: '▸'; color: var(--text-muted); margin-right: 6px; }
.pd-dt[open] summary .pd-rw-nm::before { content: '▾'; }

.pd-pl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pd-pl-head .pd-search { max-width: 240px; }
.pd-pl { padding: 0 !important; }
.pd-pl-tr { display: grid; grid-template-columns: 54px minmax(0, 1fr) 56px 120px 130px; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--border-color); font-size: .9rem; }
.pd-pl-tr.pd-th { border-top: 0; }
.pd-pl-rk { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pd-pl-pl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd-pl-pl b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pl-sea { height: 20px; width: auto; flex: none; }
.pd-pl-ov, .pd-pl-pc, .pd-pl-pr { text-align: right; font-variant-numeric: tabular-nums; }
.pd-pl-pr { font-weight: 700; }
.pd-pl-empty { padding: 28px 16px; text-align: center; color: var(--text-secondary); }
.pd-pager { display: flex; justify-content: center; gap: 6px; padding: 12px; }
.pd-pager button { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); cursor: pointer; font-family: inherit; }
.pd-pager button.on { background: var(--primary-green); color: #0b1220; border-color: var(--primary-green); font-weight: 700; }
.pd-pager button:disabled { opacity: .35; cursor: default; }
.pd-en { font-style: normal; font-size: .68rem; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: #3a4150; color: #fff; flex: none; }
.pd-en.en2, .pd-en.en3, .pd-en.en4 { background: #b0703f; }
.pd-en.en5, .pd-en.en6, .pd-en.en7 { background: #a9b0ba; color: #20252d; }
.pd-en.en8, .pd-en.en9, .pd-en.en10 { background: #e9a712; color: #2b1c00; }
.pd-en.en11, .pd-en.en12, .pd-en.en13 { background: linear-gradient(120deg, #ffd0ec, #cfe9ff 30%, #fff4b8 55%, #d9ccff); color: #3a2a55; }


@media (max-width: 640px) {
    .pd-rw { grid-template-columns: minmax(0, 1fr) 68px 96px; padding: 10px 12px; gap: 8px; font-size: .84rem; }
    .pd-rw.sub { padding-left: 24px; }
    .pd-pl-tr { grid-template-columns: 38px minmax(0, 1fr) 100px; padding: 8px 12px; }
    .pd-pl-tr > span:nth-child(3), .pd-pl-tr > span:nth-child(4) { display: none; }
}

.pd-keyodds { padding: 14px 16px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 10px; }
.pd-keyodds > b { font-size: .86rem; color: var(--text-secondary); font-weight: 700; }
.pd-ko { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pd-ko > div { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--pd-inset); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 4px; }
.pd-ko .pd-keyico { width: 30px; height: 30px; font-size: 1.1rem; background: transparent; }
.pd-ko span { font-size: .8rem; color: var(--text-secondary); }
.pd-ko em { font-style: normal; font-weight: 800; font-size: 1.05rem; color: var(--primary-green); font-variant-numeric: tabular-nums; }
.pd-rw-ev { white-space: nowrap; }
.pd-pl-tr.pd-th > span:nth-child(n+3) { text-align: right; }
.pd-rw.pd-th > span:nth-child(n+2) { text-align: right; }
@media (max-width: 640px) { .pd-rw { grid-template-columns: minmax(0, 1fr) 76px auto; } }
.pd-rws .pd-rw.pd-th, .pd-pl .pd-pl-tr.pd-th { padding-top: 11px; padding-bottom: 11px; background: var(--pd-inset); border-radius: 0; }

.pd-basis-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pd-basis-chips span { font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--pd-inset); border: 1px solid var(--border-color); color: var(--text-secondary); }

/* ---- 열어보기 무대 ---- */
.pd-sea { height: 20px; width: auto; vertical-align: middle; margin-right: 4px; }
.pd-tags .pd-sea { height: 24px; margin: 0 2px 0 0; }
.pd-noimg .pd-c-img { display: none; }
.pd-noimg .pd-tr { grid-template-columns: minmax(0, 1fr) 120px 150px 210px; }
@media (max-width: 860px) { .pd-noimg .pd-tr { grid-template-columns: minmax(0, 1fr) 120px; } }
.pd-plan-row.noimg { grid-template-columns: minmax(0, 1fr) auto; }
.pd-rec { margin-bottom: 14px; }
.pd-rec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-rec-no { font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--primary-green); color: #0b1220; }
.pd-rec-h b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pd-rec-h small { color: var(--text-secondary); font-size: .8rem; }
.pd-sub small { font-weight: 500; color: var(--text-secondary); font-size: .78rem; margin-left: 6px; }
.pd-cr { display: grid; grid-template-columns: minmax(0, 1.6fr) 96px 1fr 1fr 90px; gap: 10px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--border-color); font-size: .88rem; font-variant-numeric: tabular-nums; }
.pd-cr > span:nth-child(n+2) { text-align: right; }
.pd-cr.pd-th { border-top: 0; font-size: .76rem; font-weight: 700; color: var(--text-secondary); }
.pd-cr-eff { font-weight: 800; color: var(--primary-green); }
.pd-cr.best { background: rgba(52, 206, 87, .08); border-radius: 8px; }
@media (max-width: 640px) {
    .pd-cr { grid-template-columns: minmax(0, 1fr) 54px 84px 74px; font-size: .8rem; gap: 6px; }
    .pd-cr > span:nth-child(4) { display: none; }
}

.pd-stage { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(ellipse at 50% -10%, #25406f 0%, #0f1b33 48%, #070c18 100%); color: #fff; padding: 22px 14px 26px; min-height: 360px; isolation: isolate; }
.pd-stage::before { content: ''; position: absolute; inset: auto -20% -38% -20%; height: 70%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 64px), radial-gradient(ellipse at 50% 0, rgba(80, 200, 120, .25), transparent 70%); transform: perspective(380px) rotateX(58deg); z-index: -1; }
.pd-stage-in { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pd-stage-hint { font-size: .86rem; color: rgba(255, 255, 255, .6); margin: 0; }
.pd-stage .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.pd-stage .pd-reset { color: rgba(255, 255, 255, .6); }
.pd-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; }
.pd-fx i { position: absolute; left: 50%; top: 42%; width: 190%; aspect-ratio: 1; margin: -95% 0 0 -95%; background: repeating-conic-gradient(from 0deg, var(--fx, rgba(255, 221, 120, .55)) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 52%); mask-image: radial-gradient(circle, #000 0, transparent 52%); animation: pdSpin 14s linear infinite; }
.pd-fx b { position: absolute; left: 50%; top: 42%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--fx2, rgba(255, 240, 180, .85)) 0, transparent 62%); border-radius: 50%; }
.pd-stage.go .pd-fx { opacity: 1; transition: opacity .35s; }
.pd-stage.t-gold { --fx: rgba(255, 213, 90, .6); --fx2: rgba(255, 236, 160, .9); }
.pd-stage.t-purple { --fx: rgba(190, 120, 255, .5); --fx2: rgba(214, 170, 255, .8); }
.pd-stage.t-blue { --fx: rgba(110, 190, 255, .45); --fx2: rgba(170, 220, 255, .75); }
.pd-stage.t-white { --fx: rgba(255, 255, 255, .3); --fx2: rgba(255, 255, 255, .55); }
@keyframes pdSpin { to { transform: rotate(360deg); } }
.pd-stage .pd-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.pd-stage.boom .pd-flash { animation: pdFlash .7s ease-out; }
@keyframes pdFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
.pd-charge { width: 132px; height: 176px; border-radius: 14px; background: linear-gradient(145deg, #2f5fb5, #162b57 60%, #0d1a38); border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 0 40px rgba(110, 170, 255, .7), inset 0 0 30px rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-weight: 800; font-size: .9rem; animation: pdShake .5s ease-in-out infinite, pdGlow 1s ease-in-out infinite alternate; }
@keyframes pdShake { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.05); } }
@keyframes pdGlow { to { box-shadow: 0 0 80px rgba(160, 210, 255, .95), inset 0 0 40px rgba(255, 255, 255, .45); } }
.pd-res { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 1; }
.pd-grp { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pd-grp > h4 { margin: 0; font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.pd-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.pd-tile { width: 168px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; backdrop-filter: blur(3px); animation: pdPop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.pd-tile .sea { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; min-height: 30px; }
.pd-tile .sea img { height: 30px; width: auto; }
.pd-tile b.t { font-size: .94rem; line-height: 1.3; word-break: keep-all; }
.pd-tile small { color: rgba(255, 255, 255, .7); font-size: .76rem; }
.pd-tile .cnt { font-size: .74rem; font-weight: 800; background: var(--primary-green); color: #0b1220; border-radius: 999px; padding: 1px 9px; }
.pd-tile .ev { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .86rem; }
.pd-tile button { margin-top: 2px; width: 100%; border: 0; border-radius: 8px; padding: 7px 0; background: var(--primary-green); color: #0b1220; font: inherit; font-weight: 800; cursor: pointer; }
.pd-tile button:disabled { opacity: .45; cursor: default; }
.pd-tile.bp { border-color: rgba(255, 213, 90, .6); background: rgba(255, 213, 90, .12); }
.pd-tile.done { opacity: .7; }
.pd-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@keyframes pdPop { from { opacity: 0; transform: translateY(18px) scale(.7); } to { opacity: 1; transform: none; } }

/* 선수 카드: 넥슨 카드 아트(340x400) 위에 OVR·포지션·시즌·국기·구단·강화를 올린다 */
.pd-feat { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; flex-wrap: wrap; }
.pd-side { width: 168px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pd-side .box { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 10px 12px; }
.pd-side small { display: block; color: rgba(255, 255, 255, .65); font-size: .7rem; }
.pd-side b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.pd-side .sea img { height: 38px; width: auto; display: block; margin-bottom: 4px; }
.pd-side .st { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.pd-side .st span { display: flex; justify-content: space-between; gap: 6px; font-size: .74rem; white-space: nowrap; }
.pd-side .st em { font-style: normal; font-weight: 800; }
/* 카드 틀 이미지(340×400)는 가운데 카드(217×343)만 있고 사방이 투명이라, 상자를 카드 크기(217:343)로 잡고 이미지를 늘려서 맞춘다 */
.pd-cardbox { container-type: inline-size; width: min(176px, 50vw); aspect-ratio: 217 / 343; position: relative; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .6)); animation: pdDrop .8s cubic-bezier(.2, 1.3, .35, 1) both; }
.pd-cardbox.sm { width: 100%; max-width: 116px; animation-duration: .5s; }
.pd-cardbox .bg { position: absolute; left: -28.34%; top: -8.16%; width: 156.68%; height: 116.6%; background: center / 100% 100% no-repeat; }
.pd-cardbox .face { position: absolute; left: 22%; top: 5%; width: 76%; height: 56%; object-fit: contain; object-position: 50% 100%; }
.pd-cardbox .ovr { position: absolute; left: 11%; top: 8%; font-size: 15cqw; font-weight: 900; line-height: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.pd-cardbox .pos { position: absolute; left: 12%; top: 24%; font-size: 10.5cqw; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
/* 급여: 육각형 */
.pd-cardbox .pay { position: absolute; left: 11%; top: 33%; width: 17cqw; height: 19cqw; background: rgba(14, 18, 28, .85); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: flex; align-items: center; justify-content: center; }
.pd-cardbox .pay span { font-size: 8cqw; font-weight: 900; color: #fff; }
/* 강화: 왼쪽 가로 막대 — 색은 강화 단계표 그대로 (1 검정 / 2~4 갈색 / 5~7 은색 / 8~10 노랑 / 11~13 무지개빛) */
.pd-cardbox .enh { position: absolute; left: 7%; top: 55%; width: 30%; height: 9%; display: flex; align-items: center; justify-content: center; font-size: 10.5cqw; font-weight: 900; line-height: 1; border-radius: 1cqw; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.pd-cardbox .enh.g0 { background: #3a3f48; color: #fff; }
.pd-cardbox .enh.g1 { background: linear-gradient(180deg, #d79a6b, #b0703f); color: #fff; }
.pd-cardbox .enh.g2 { background: linear-gradient(180deg, #d9dde3, #a9b0ba); color: #20252d; }
.pd-cardbox .enh.g3 { background: linear-gradient(180deg, #ffd24d, #e9a712); color: #2b1c00; }
.pd-cardbox .enh.g4 { background: linear-gradient(120deg, #ffd0ec 0%, #cfe9ff 28%, #fff4b8 52%, #d9ccff 76%, #ffd0ec 100%); color: #3a2a55; box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .7), 0 0 3.5cqw rgba(190, 170, 255, .8); }
/* 이름줄: 시즌 배지 + 이름 */
.pd-cardbox .nmrow { position: absolute; left: 6%; right: 6%; top: 67%; height: 10%; display: flex; align-items: center; justify-content: center; gap: 2cqw; min-width: 0; }
.pd-cardbox .sbd { height: 9.5cqw; width: auto; flex: none; }
.pd-cardbox .nm { font-size: 9.4cqw; font-weight: 900; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 맨 아래: 국기 · 리그 · 구단 */
.pd-cardbox .ft { position: absolute; left: 16%; right: 16%; top: 79%; height: 9%; display: flex; align-items: center; justify-content: center; gap: 4cqw; }
.pd-cardbox .ft img { height: 100%; width: auto; max-width: 17cqw; object-fit: contain; }
.pd-cardbox.sm .nm { font-size: 10.6cqw; }
.pd-cardbox.sm .ovr { font-size: 17cqw; }
/* 카드 바로 아래 가격 */
.pd-cardcol { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pd-cardpx { display: inline-flex; align-items: center; gap: 6px; padding: 5px 16px; border-radius: 999px; background: rgba(10, 14, 24, .72); border: 1px solid rgba(255, 215, 94, .65); color: #ffd75e; font-size: 1.45rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; text-shadow: 0 1px 6px rgba(255, 190, 40, .35); }
.pd-cardpx .pd-bp { width: 1.1em; height: 1.1em; }
.pd-side .rk { font-size: 1.1rem; color: #ffd75e; }
.pd-side .rk i { font-style: normal; font-size: .76rem; color: rgba(255, 255, 255, .7); font-weight: 600; }
/* 상자 열어보기 */
.card-header-modern .bx-n { font-size: .82rem; color: var(--text-secondary); margin-left: auto; }
.bx-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bx-empty { margin: 8px 0; color: var(--text-secondary); font-size: .9rem; }
.bx-h { margin: 18px 0 8px; font-size: .92rem; font-weight: 800; }
.bx-last { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.bx-card { background: var(--pd-inset); border: 1px solid var(--border-color); border-left: 3px solid var(--primary-green); border-radius: var(--radius-sm); padding: 10px 12px; }
.bx-card > b, .bx-card > a > b { display: block; font-size: .92rem; line-height: 1.35; margin-bottom: 6px; word-break: keep-all; }
.bx-card a { color: inherit; text-decoration: none; }
.bx-card a:hover b { color: var(--primary-green); }
.bx-kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: .8rem; }
.bx-kv span { color: var(--text-secondary); }
.bx-kv em { font-style: normal; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }
.bx-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.bx-tot > div { background: var(--pd-inset); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; }
.bx-tot small { display: block; font-size: .68rem; color: var(--text-secondary); }
.bx-tot b { font-size: .92rem; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; }
.bx-bars { display: flex; flex-direction: column; gap: 6px; }
.bx-bar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: .82rem; }
.bx-bar .nm { word-break: keep-all; }
.bx-bar a { color: inherit; text-decoration: none; }
.bx-bar a:hover { color: var(--primary-green); }
.bx-bar .tr { height: 8px; border-radius: 99px; background: var(--border-color); overflow: hidden; }
.bx-bar .tr i { display: block; height: 100%; background: var(--primary-green); border-radius: 99px; }
.bx-bar em { font-style: normal; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bx-log { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.bx-log li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: .82rem; }
.bx-log li em { font-style: normal; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bx-log .no { color: var(--text-secondary); }
.bx-log a { color: inherit; text-decoration: none; }
@keyframes pdDrop { 0% { opacity: 0; transform: translateY(-80px) scale(.4) rotate(-12deg); } 60% { opacity: 1; transform: translateY(6px) scale(1.06) rotate(1deg); } 100% { transform: none; } }
.pd-minis { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; width: 100%; max-width: 760px; }
.pd-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; width: calc(20% - 10px); }
.pd-mini .pr { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-mini small { color: rgba(255, 255, 255, .65); font-size: .68rem; }
.pd-bpcard { width: min(240px, 70vw); aspect-ratio: 340 / 200; border-radius: 16px; background: radial-gradient(circle at 50% 30%, #ffe58a, #f4b81f 55%, #9a6a05); color: #5a3700; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); animation: pdDrop .7s cubic-bezier(.2, 1.3, .35, 1) both; }
.pd-bpcard small { font-size: .75rem; font-weight: 700; }
.pd-bpcard span { font-size: 1.4rem; }
.pd-sim-sum { margin-top: 12px; margin-bottom: 0; }
.pd-sim-msg { padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-size: .88rem; }
@media (max-width: 640px) {
    .pd-mini { width: calc(33.333% - 10px); }
    .pd-side { width: min(300px, 92%); flex-direction: row; flex-wrap: wrap; }
    .pd-side .box { flex: 1 1 120px; }
    .pd-tile { width: calc(50% - 8px); }
}