/* 고객 공개 매입 리스트 — 모바일 우선 */
:root{
  --bg:#fafaf7;--card:#fff;--ink:#1c1917;--muted:#78716c;--line:#e7e5e4;--soft:#f5f5f4;
  --acc:#facc15;--acc-ink:#1c1917;--acc-bg:#fef9c3;--price:#b91c1c;--chip-on:#1c1917;--chip-on-ink:#fff;
  --k-bg:#fff7d6;--k-fill:#fff;--k-ink:#292524;--k-cheek:#fda4af;--k-ear:#fecdd3;--k-screen:#fefce8;
  --k-acc:#f59e0b;--k-acc2:#bfdbfe;--k-glass:rgba(191,219,254,.45);--k-coin:#fcd34d;--k-bill:#bbf7d0;--k-spark:#f59e0b;
  --c-skin:#ffe4d1;--c-hair:#1a1a1f;--c-hairline:#1a1a1f;--c-hood:#232329;--c-table:#e7e5e4;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1c1917;--card:#292524;--ink:#f5f5f4;--muted:#a8a29e;--line:#44403c;--soft:#35302d;
  --acc-bg:#422006;--price:#fca5a5;--chip-on:#facc15;--chip-on-ink:#1c1917;
  --k-bg:#3a3226;--k-fill:#f5f5f4;--k-screen:#fefce8;
  --c-hairline:#6b6b75;--c-hood:#2a2a31;--c-table:#57534e;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:120px}
body{margin:0;font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body.noscroll{overflow:hidden}
a{color:inherit}
.top{position:sticky;top:0;z-index:20;background:var(--acc);color:var(--acc-ink);padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.brand{font-weight:900;font-size:18px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.upd{font-size:12px;opacity:.75;white-space:nowrap}
.view{max-width:1100px;margin:0 auto;padding:0 16px 24px}
.msg{padding:40px 0;text-align:center;color:var(--muted);line-height:1.7}

/* ── 매입 가이드 (만화) ── */
.guide{padding-top:18px}
.g-title{font-size:20px;margin:0 0 12px;letter-spacing:-.3px}
.comic{list-style:none;margin:0 -16px;padding:0 16px 6px;display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.comic::-webkit-scrollbar{display:none}
@media (min-width:720px){.comic{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;margin:0;padding:0;overflow:visible}}
.panel.img .p-img{border-bottom:none}
.panel{scroll-snap-align:start;background:var(--card);border:2px solid var(--ink);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.panel svg{display:block;width:100%;height:auto;border-bottom:2px solid var(--ink)}
.panel .p-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-bottom:2px solid var(--ink);background:#fff}
.p-txt{padding:10px 12px 12px}
.p-txt b{display:flex;align-items:center;gap:7px;font-size:15px}
.p-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--acc-ink);font-size:12.5px;font-weight:900;flex-shrink:0}
.p-txt p{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.g-notes{margin:12px 0 0;padding:10px 14px 10px 28px;background:var(--acc-bg);border-radius:10px;font-size:12.5px;line-height:1.75;color:var(--ink)}
.g-notes:empty{display:none}
/* 만화 그림 — 다크 모드에서도 같은 톤 유지 */
.k-bg{fill:var(--k-bg)}
.k-line{stroke:var(--k-ink);stroke-width:3;stroke-linejoin:round}
.k-fill{fill:var(--k-fill)}
.k-ink{fill:var(--k-ink)}
.k-ear{fill:var(--k-ear)}
.k-cheek{fill:var(--k-cheek);opacity:.8}
.k-thin{stroke:var(--k-ink);stroke-width:2;stroke-linecap:round;fill:none}
.k-screen{fill:var(--k-screen)}
.k-acc{fill:var(--k-acc)}
.k-acc2{fill:var(--k-acc2)}
.k-glass{fill:var(--k-glass)}
.k-coin{fill:var(--k-coin)}
.k-bill{fill:var(--k-bill)}
.k-spark{fill:var(--k-spark)}
.k-stripe{stroke:#fff;stroke-width:5}
.k-won{font:900 12px sans-serif;fill:var(--k-ink)}
.k-bub{fill:#fff}
.k-bubtail{stroke:var(--k-ink);stroke-width:3;stroke-linejoin:round}
.k-say{font:800 12px -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;fill:#1c1917}
/* 캐릭터(치비) */
.c-skin{fill:var(--c-skin);stroke:var(--k-ink);stroke-width:2;stroke-linejoin:round}
.c-hair{fill:var(--c-hair);stroke:var(--c-hairline);stroke-width:2;stroke-linejoin:round}
.c-streak{fill:#facc15}
.c-ear{fill:var(--c-hair);stroke:var(--c-hairline);stroke-width:2;stroke-linejoin:round}
.c-earin{fill:#f5f5f4}
.c-eye{fill:#2563eb;stroke:var(--k-ink);stroke-width:1.5}
.c-pupil{fill:#1e3a8a}
.c-shine{fill:#fff}
.c-lash{stroke:var(--k-ink);stroke-width:2.5;fill:none;stroke-linecap:round}
.c-cheek{fill:var(--k-cheek);opacity:.75}
.c-mouth{stroke:#7f1d1d;stroke-width:2;fill:none;stroke-linecap:round}
.c-mouthfill{fill:#e11d48;stroke:#7f1d1d;stroke-width:1.5}
.c-hood{fill:var(--c-hood);stroke:var(--c-hairline);stroke-width:2;stroke-linejoin:round}
.c-stripe{fill:#e5e7eb}
.c-string{stroke:#e5e7eb;stroke-width:2;fill:none;stroke-linecap:round}
.k-table{fill:var(--c-table)}
.k-tag{fill:#fff;stroke:var(--k-ink);stroke-width:1.5}
.k-q{font:900 22px sans-serif;fill:var(--k-acc)}

/* ── 게임 배너 ── */
.sec-title{font-size:17px;margin:26px 0 10px}
.banners{display:grid;gap:12px}
@media (min-width:720px){.banners{grid-template-columns:1fr 1fr}}
.banner{position:relative;display:flex;align-items:center;min-height:118px;border-radius:16px;padding:16px 18px;text-decoration:none;color:#fff;overflow:hidden;
  background:linear-gradient(120deg,var(--c1),var(--c2));box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .12s}
.banner:active{transform:scale(.98)}
.banner.off{filter:grayscale(.85);opacity:.6;cursor:default}
.b-txt{position:relative;z-index:1;max-width:62%}
.b-title{font-size:20px;font-weight:900;letter-spacing:-.4px;line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.b-sub{font-size:12.5px;margin-top:4px;opacity:.95}
.b-go{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:800;background:rgba(255,255,255,.95);color:#1c1917;border-radius:999px;padding:4px 11px}
.b-thumbs{position:absolute;right:10px;top:50%;width:132px;height:100px;transform:translateY(-50%)}
.b-thumbs .t{position:absolute;width:62px;aspect-ratio:63/88;object-fit:cover;border-radius:5px;border:2px solid rgba(255,255,255,.9);box-shadow:0 3px 8px rgba(0,0,0,.3);background:#fff}
.b-thumbs .t0{right:34px;top:2px;transform:rotate(-2deg);z-index:3}
.b-thumbs .t1{right:72px;top:10px;transform:rotate(-14deg);z-index:2}
.b-thumbs .t2{right:0;top:10px;transform:rotate(12deg);z-index:1}
.g-포켓몬{--c1:#f59e0b;--c2:#dc2626}
.g-디지몬{--c1:#0ea5e9;--c2:#1d4ed8}
.g-원피스{--c1:#ef4444;--c2:#7f1d1d}
.g-코난{--c1:#1e3a8a;--c2:#0f172a}
.g-건담{--c1:#64748b;--c2:#1e293b}
.g-니벨아레나{--c1:#8b5cf6;--c2:#312e81}

/* ── 게임 화면 ── */
.gbar{position:sticky;top:46px;z-index:15;display:flex;align-items:center;gap:8px;background:var(--bg);margin:0 -16px;padding:10px 16px 6px}
.back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--soft);font-size:26px;line-height:1;text-decoration:none;padding-bottom:3px;flex-shrink:0}
.gname{flex:1;font-size:17px;font-weight:900;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.packbtn{flex-shrink:0;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:800;cursor:pointer}
.gbar select{flex-shrink:0;padding:7px 8px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:var(--card);color:var(--ink)}
/* 부스터팩 목록 — 세로 스크롤 박스 (검색창 자리) */
.packs{margin:8px 0 4px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.packs-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 12px 7px;font-size:13.5px;border-bottom:1px solid var(--line)}
.packs-head .muted{font-size:12px;color:var(--muted)}
.packlist{max-height:36vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-padding:8px}
@media (min-width:720px){.packlist{max-height:280px;display:grid;grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.packlist{grid-template-columns:1fr 1fr 1fr}}
.prow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:none;border-bottom:1px solid var(--line);background:none;color:var(--ink);padding:10px 12px;cursor:pointer;font:inherit}
.prow:active{background:var(--soft)}
.prow.on{background:var(--acc-bg);box-shadow:inset 3px 0 0 var(--acc)}
.prow .sn{font-weight:800;font-size:14px;min-width:0;line-height:1.3}
.prow .sc{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.prow.all .sn::before{content:"☰ ";opacity:.6}
/* 레어도 칩 (gbar 아래 고정) */
.chips{position:sticky;top:98px;z-index:14;background:var(--bg);margin:0 -16px;padding:6px 16px 8px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 13px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.chip small{margin-left:4px;opacity:.55;font-weight:600}
.chip.on{background:var(--chip-on);color:var(--chip-on-ink);border-color:var(--chip-on)}
.count{font-size:12.5px;color:var(--muted);padding:4px 2px 2px}
.sethead{font-size:15px;margin:18px 0 8px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.sethead small{font-size:12px;color:var(--muted);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
@media (min-width:640px){.grid{grid-template-columns:repeat(5,1fr);gap:10px}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(7,1fr)}}
.c{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.c img,.c .ph{width:100%;aspect-ratio:63/88;object-fit:cover;display:block;background:var(--soft)}
.c .ph{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}
.c .b{padding:5px 6px 7px;display:flex;flex-direction:column;gap:1px;flex:1}
.c .n{font-size:12px;font-weight:700;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.c .m{font-size:10.5px;color:var(--muted);word-break:break-all}
.c .p{font-size:15px;font-weight:900;color:var(--price);margin-top:auto}
.more{min-height:40px;padding:16px 0;text-align:center;font-size:12.5px;color:var(--muted)}
.totop{position:fixed;right:16px;bottom:max(18px,env(safe-area-inset-bottom));z-index:18;width:44px;height:44px;border-radius:50%;border:none;background:var(--ink);color:var(--bg);font-size:20px;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.25);cursor:pointer}

.note{max-width:1100px;margin:0 auto;padding:16px 16px 40px;font-size:12.5px;color:var(--muted);line-height:1.8;border-top:1px solid var(--line)}

/* 좁은 폰 (320~380px) */
@media (max-width:380px){
  .brand{font-size:16px}
  .upd{font-size:11px}
  .b-title{font-size:17px}
  .b-txt{max-width:64%}
  .b-thumbs{width:100px;right:6px}
  .b-thumbs .t{width:48px}
  .b-thumbs .t0{right:26px}.b-thumbs .t1{right:54px}
}