/* ★ 홈(/home/v2, 2026-10-02) - 시안 PBALL1 Home.dc.html 1a(데스크톱) · 1d(모바일 375) 원문 값(px · 색).
   셸 토큰(--pb-*)은 pbShell.html 에서 온다. 카드 #181b20 · 안쪽 칸 #121417 + 테두리 #23272c(섯다 내정보 · 랭킹 문법). */
.hm { max-width:1400px; margin:0 auto; padding:16px; display:flex; flex-direction:column; gap:12px; color:var(--pb-t1); font-size:13px; }
.hm a { text-decoration:none; color:inherit; }
.hm b, .hm .v b { font-family:var(--pb-mono); }
.hm .up { color:#5fd49a !important; } .hm .dn { color:#f08a7f !important; } .hm .zero { color:#8d939a !important; }
.hm-card { border-radius:12px; background:#181b20; padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.hm-hd { display:flex; align-items:baseline; gap:8px; }
.hm-hd > b, .hm-h { font:700 15px 'Pretendard Variable', Pretendard, sans-serif; }
.hm-hd .sub { font-size:12px; color:#8d939a; }
.hm-hd .more { margin-left:auto; font-size:13px; color:#b9bec4; white-space:nowrap; }
.hm-hd .more:hover { color:var(--pb-t1); }
.hm .l { font-size:12px; color:#8d939a; }
.hm-empty { padding:14px 0; text-align:center; font-size:12.5px; color:#6d737a; }
/* 스켈레톤(높이 고정 - 값이 들어와도 화면이 튀지 않게) */
.hm-sk { border-radius:10px; background:linear-gradient(90deg, #15181c 0%, #1c2025 50%, #15181c 100%); background-size:200% 100%; animation:hmSk 1.4s linear infinite; }
.hm-sk.h42 { height:42px; } .hm-sk.h110 { height:110px; } .hm-sk.h150 { height:150px; }
.hm .sk { display:inline-block; min-width:90px; border-radius:4px; background:#1c2025; }
@keyframes hmSk { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce) { .hm-sk { animation:none; } }

/* 1. 내 상태 */
.hm-me { padding:16px 18px; gap:14px; }
.hm-me-top { display:flex; align-items:center; gap:14px; }
.hm-av { width:48px; height:48px; flex:none; border-radius:50%; background:#262a30; border:1px solid #2e3339; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; }
.hm-who { display:flex; flex-direction:column; gap:5px; min-width:0; }
.hm-who .a { display:flex; align-items:center; gap:8px; }
.hm-who .a > b { font:700 18px 'Pretendard Variable', Pretendard, sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-grade { height:22px; padding:0 8px; border-radius:5px; border:1px solid #7a5a1e; color:#f2c46b; font-size:12px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.hm-grade[hidden], .hm-adm[hidden] { display:none; }
.hm-adm { margin-left:4px; font-size:12px; color:#8d939a !important; white-space:nowrap; }
.hm-exp { display:flex; align-items:center; gap:6px; font-size:13px; color:#b9bec4; }
.hm-exp i { font-size:15px; }
.hm-exp.warn { color:#f2c46b; } .hm-exp.over { color:#f08a7f; }
.hm-wal { margin-left:auto; display:flex; gap:10px; }
.hm-wbox { display:flex; align-items:center; gap:14px; height:52px; padding:0 8px 0 14px; border-radius:10px; background:#121417; border:1px solid #23272c; }
.hm-wbox > div { display:flex; flex-direction:column; gap:2px; }
.hm-wbox .v, .hm-st .v { display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.hm-wbox .v b { font-size:19px; font-weight:700; }
.hm-wbox em, .hm-st em { font:normal 12px var(--pb-mono); color:#8d939a; }
.hm-wbtn { height:34px; padding:0 14px; border-radius:8px; border:1px solid #2e3339; color:var(--pb-t1) !important; font-size:13px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.hm-wbtn:hover { background:#1b1e22; }
.hm-wbox .v b .ns { display:none; }   /* ★ 10-05 모바일만 줄인 금액(아래 760px) */
.hm-expired { display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:8px; background:#2a1716; border:1px solid #7a3a34; color:#f08a7f; font-size:13px; font-weight:600; }
.hm-expired[hidden] { display:none; }
.hm-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) minmax(0,1.6fr); gap:10px; }
.hm-st { display:flex; flex-direction:column; gap:6px; padding:11px 13px; border-radius:10px; background:#121417; border:1px solid #23272c; min-width:0; }
.hm-st .v b { font-size:20px; font-weight:700; }
.hm-curve { gap:4px; padding:9px 12px; position:relative; }
.hm-curve .t { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.hm-curve .t b { font-size:13px; font-weight:700; }
.hm-curve svg { width:100%; height:34px; display:block; }
.hm-nodata { position:absolute; left:12px; right:12px; bottom:12px; text-align:center; font-size:12px; color:#6d737a; }
.hm-nodata[hidden] { display:none; }

/* 두 열 */
.hm-grid { display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:12px; align-items:start; }
.hm-col { display:flex; flex-direction:column; gap:12px; min-width:0; }

/* 2. 실시간 픽 - 벤더 카드 */
.hm-vend { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.hm-vc { display:flex; flex-direction:column; gap:9px; padding:12px 14px; border-radius:10px; background:#121417; border:1px solid #23272c; min-width:0; }
.hm-vc .h { display:flex; align-items:center; gap:8px; }
.hm-vtag { height:22px; padding:0 7px; border-radius:5px; font:700 12px var(--pb-mono); display:flex; align-items:center; }
.hm-vtag.PP { background:#1d2a44; color:#8fb3ff; } .hm-vtag.EVO { background:#2a1d3a; color:#c9a6f5; } .hm-vtag.BOTA { background:#1d3329; color:#7fd6a8; }
.hm-vc .h b { font:700 14px 'Pretendard Variable', Pretendard, sans-serif; }
.hm-vc .d { font-size:12px; color:#8d939a; }
.hm-bots { display:flex; flex-direction:column; gap:3px; }
.hm-bot { display:flex; align-items:center; gap:7px; height:24px; font-size:13px; }
.hm-bot .n { font:12px var(--pb-mono); color:#6d737a; width:12px; }
.hm-bot i { width:7px; height:7px; border-radius:50%; flex:none; }
.hm-bot .nm { font-weight:600; }
.hm-bot .r { margin-left:auto; font:700 13px var(--pb-mono); }
.hm-bot .s { font:11.5px var(--pb-mono); color:#6d737a; width:58px; text-align:right; }
.hm-vc .go { align-self:flex-start; font-size:13px; font-weight:600; }
.hm-vc .go:hover { text-decoration:underline; }

/* 3. 내 오토 */
.hm-chips { display:flex; gap:4px; margin-left:8px; }
.hm-chip { width:28px; height:26px; border-radius:6px; border:1px solid #3a3f46; background:#1b1e22; color:var(--pb-t1); font:700 12.5px var(--pb-mono); display:flex; align-items:center; justify-content:center; }
.hm-chip.on { border-color:#7a5a1e; background:#2a2112; color:#f2c46b; }
.hm-chip.empty { border-style:dashed; border-color:#2e3339; background:transparent; color:#5f666d; }
.hm-preset { display:flex; align-items:center; gap:10px; height:42px; padding:0 12px; border-radius:9px; background:#121417; border:1px solid #23272c; min-width:0; }
.hm-preset .no { width:22px; height:22px; flex:none; border-radius:5px; background:#2a2112; border:1px solid #7a5a1e; color:#f2c46b; font:700 12px var(--pb-mono); display:flex; align-items:center; justify-content:center; }
.hm-preset .nm { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.hm-preset .use { flex:none; height:20px; padding:0 6px; border-radius:4px; background:#13301f; color:#5fd49a; font-size:11.5px; font-weight:700; display:flex; align-items:center; }
.hm-preset .ds { flex:none; font-size:13px; color:#b9bec4; white-space:nowrap; }
.hm-preset.none { color:#6d737a; font-size:13px; }
.hm-rec { display:flex; flex-direction:column; gap:2px; }
.hm-rec > .l { margin-bottom:2px; }
.hm-row { display:flex; align-items:center; gap:10px; height:30px; padding:0 10px; border-radius:6px; background:#121417; font-size:13px; }
.hm-row.top { box-shadow:inset 3px 0 0 #f08a7f; } .hm-row.top.win { box-shadow:inset 3px 0 0 #5fd49a; } .hm-row.top.push { box-shadow:inset 3px 0 0 #8d939a; }
.hm-row .no { font-family:var(--pb-mono); color:#8d939a; width:64px; flex:none; }
.hm-row .pk { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#b9bec4; }
.hm-row .rs { width:40px; flex:none; font-weight:700; }
.hm-row .dl { width:88px; flex:none; text-align:right; font:700 13px var(--pb-mono); }
.hm-rec .hm-empty { padding:28px 0; }

/* 4. 마켓 인기 */
.hm-mk { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.hm-mc { display:flex; flex-direction:column; gap:7px; padding:12px 14px; border-radius:10px; background:#121417; border:1px solid #23272c; min-width:0; }
.hm-mc:hover { border-color:#2e3339; }
.hm-mc .a { display:flex; align-items:baseline; gap:6px; }
.hm-mc .a > b { font:700 14px 'Pretendard Variable', Pretendard, sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.hm-mc .pr { margin-left:auto; flex:none; font:700 14px var(--pb-mono); color:#e0a53a; }
.hm-mc .pr em { font:normal 11px var(--pb-mono); color:#8d939a; margin-left:3px; }
.hm-mc .sl { font-size:12px; color:#8d939a; }
.hm-mc .tb { display:flex; align-items:center; gap:6px; min-width:0; }
.hm-mc .tb .vt { flex:none; height:18px; padding:0 5px; border-radius:4px; background:#23272d; font:700 11px var(--pb-mono); display:flex; align-items:center; }
.hm-mc .tb span:last-child { font-size:12.5px; color:#b9bec4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-mc .ft { display:flex; align-items:center; gap:8px; font-size:12px; }
.hm-mc .ft .vf { color:#b9bec4; } .hm-mc .ft .vf.ing { color:#f2c46b; }
.hm-mc .ft .bu { margin-left:auto; color:#8d939a; } .hm-mc .ft .bu b { font-weight:400; color:var(--pb-t1); }

/* 5. 오늘의 소식 */
.hm-news { gap:12px; }
.hm-blk { display:flex; flex-direction:column; gap:5px; }
.hm-blk[hidden] { display:none; }
.hm-nt { display:flex; gap:7px; font-size:13px; line-height:1.45; color:#f2c46b; }
.hm-nt i { font-size:14px; margin-top:2px; }
.hm-nt.c1 { color:oklch(0.84 0.15 195); } .hm-nt.c2 { color:#5fc996; }
.hm-kbo { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.hm-kbo span.g { display:flex; align-items:center; gap:5px; font-size:13px; white-space:nowrap; }
.hm-kbo b { font-weight:700; color:var(--pb-t1); } .hm-kbo b.w { color:#ffd447; }
.hm-kbo .c { color:#6d737a; }
.hm-sched { display:flex; flex-wrap:wrap; gap:4px 12px; }
.hm-sched span { font-size:13px; white-space:nowrap; }
.hm-sched em { font:normal 13px var(--pb-mono); color:#8d939a; margin-right:5px; }
.hm-blk .l + .hm-sched, #hSchedLabel { margin-top:2px; }
.hm-wx { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:5px; }
.hm-wc { display:flex; align-items:center; gap:6px; height:34px; padding:0 8px; border-radius:7px; background:#121417; border:1px solid #23272c; font-size:12.5px; min-width:0; }
.hm-wc .ic { font-size:15px; line-height:1; }
.hm-wc b { font-weight:600; }
.hm-wc i.dd { margin-left:auto; width:8px; height:8px; border-radius:50%; flex:none; background:#3a3f46; }
.hm-dust { display:flex; gap:10px; font-size:11.5px; color:#8d939a; }
.hm-dust span { display:flex; align-items:center; gap:4px; }
.hm-dust i { width:7px; height:7px; border-radius:50%; }
.g1 { background:#4a90e2 !important; } .g2 { background:#5fd49a !important; } .g3 { background:#f2a33a !important; } .g4 { background:#e5534b !important; }
.hm-brk { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--pb-t1) !important; }
.hm-brk span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-brk i { font-size:13px; color:#6d737a; flex:none; }
.hm-brk:hover span { text-decoration:underline; }

/* 6. 채굴장 · 웹툰 */
.hm-board { gap:8px; }
.hm-post { display:flex; align-items:center; gap:8px; height:24px; font-size:13px; }
.hm-post .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-post:hover .t { text-decoration:underline; }
.hm-post .au { flex:none; font-size:12px; color:#8d939a; max-width:80px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-post .vo { flex:none; display:flex; align-items:center; gap:2px; font:12px var(--pb-mono); color:#b9bec4; width:34px; }
.hm-post .vo i { font-size:12px; }
.hm-post .tm { flex:none; font:12px var(--pb-mono); color:#6d737a; width:36px; text-align:right; }
.hm-toon { display:flex; align-items:center; gap:12px; margin-top:6px; padding-top:10px; border-top:1px solid #23272c; }
.hm-toon .cv { width:54px; height:72px; flex:none; border-radius:6px; object-fit:cover; background:#121417; }
.hm-toon .tx { display:flex; flex-direction:column; gap:4px; min-width:0; }
.hm-toon .tx > b { font:700 14px 'Pretendard Variable', Pretendard, sans-serif; }
.hm-toon .ep { font-size:12.5px; color:#b9bec4; } .hm-toon .ep b { font-weight:400; color:var(--pb-t1); }
.hm-obtn { margin-left:auto; flex:none; height:32px; padding:0 12px; border-radius:8px; border:1px solid #2e3339; font-size:13px; font-weight:600; display:flex; align-items:center; white-space:nowrap; }
.hm-obtn:hover { background:#1b1e22; }

/* 7. 게임 */
.hm-games { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.hm-game { display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:10px; background:#121417; border:1px solid #23272c; min-width:0; }
.hm-game:hover { border-color:#3a3f46; }
.hm-game img { width:100%; height:96px; object-fit:cover; border-radius:7px; background:#1b1e22; }
.hm-game b { font:700 14px 'Pretendard Variable', Pretendard, sans-serif; }
.hm-game span { font-size:12px; color:#8d939a; }

/* 좁은 데스크톱 */
@media (max-width: 1180px) {
  .hm-grid { grid-template-columns:minmax(0,1fr); }
  .hm-stats { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .hm-curve { grid-column:1 / -1; }
}
/* 모바일(시안 1d) - 한 줄 · 벤더 카드는 가로로 넘기는 띠(한 장씩 스냅) */
@media (max-width: 760px) {
  .hm { padding:10px; gap:10px; }
  .hm-card { padding:12px; }
  .hm-me-top { flex-wrap:wrap; }
  .hm-wal { margin-left:0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .hm-wbox { height:auto; padding:8px 8px 8px 10px; gap:8px; justify-content:space-between; }
  .hm-wbox .v b { font-size:15px; }
  .hm-wbox .v b .nf { display:none; }
  .hm-wbox .v b .ns { display:inline; }
  .hm-wbtn { height:30px; padding:0 10px; font-size:12.5px; }
  .hm-stats { grid-template-columns:1fr 1fr; gap:8px; }
  .hm-st .v b { font-size:17px; }
  .hm-curve { grid-column:1 / -1; }
  .hm-hd { flex-wrap:wrap; }
  .hm-hd .sub { display:none; }
  .hm-vend { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:8px; margin:0 -12px; padding:0 12px 2px; scrollbar-width:none; }
  .hm-vend::-webkit-scrollbar { display:none; }
  .hm-vc, .hm-vend .hm-sk { flex:0 0 82%; scroll-snap-align:start; }
  .hm-mk { grid-template-columns:minmax(0,1fr); }
  .hm-preset .ds { display:none; }
  .hm-row .no { width:54px; }
  .hm-games { grid-template-columns:1fr 1fr; }
}

/* ══ 비로그인(10-02 시안 Home 1e · 1f) ══ */
.hm-hero { flex-direction:row; align-items:center; gap:24px; padding:18px 20px; }
.hm-hero .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.hm-hero h1 { margin:0; font:800 24px/1.3 'Pretendard Variable', Pretendard, sans-serif; text-wrap:pretty; }
.hm-hero .tx span { font-size:14px; color:#b9bec4; line-height:1.5; }
.hm-ben { flex:none; width:360px; display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:12px; background:#1a160d; border:1px solid #7a5a1e; }
.hm-ben .t { font:700 13px 'Pretendard Variable', Pretendard, sans-serif; color:#f2c46b; }
.hm-ben .r { display:flex; align-items:baseline; gap:8px; }
.hm-ben .r .k { font-size:13px; color:#b9bec4; width:44px; flex:none; }
.hm-ben .r b { font-size:20px; font-weight:700; }
.hm-ben .r em { font:normal 12px var(--pb-mono); color:#8d939a; }
.hm-ben .r .n { margin-left:auto; font-size:12px; color:#b9bec4; white-space:nowrap; }
.hm-ben .go { height:46px; margin-top:2px; border-radius:8px; background:var(--pb-t1); color:#0c0d0f !important; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hm-ben .ln { font-size:12.5px; color:#8d939a; text-align:center; }
.hm-ben .ln a { color:#8fb3ff !important; }
.hm-lockcard { position:relative; overflow:hidden; padding:0; }
.hm-blur { filter:blur(3px) brightness(.5); pointer-events:none; user-select:none; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.hm-blur .hm-vc { gap:6px; } .hm-blur .hm-vc > b { font:700 14px 'Pretendard Variable', Pretendard, sans-serif; }
.hm-blur .hm-bot { height:22px; }
.hm-ghost { display:flex; flex-direction:column; gap:3px; } .hm-ghost i { height:28px; border-radius:6px; background:#121417; }
.hm-ex { position:absolute; top:12px; left:14px; height:20px; padding:0 7px; border-radius:4px; background:#23272d; border:1px solid #3a3f46; color:#b9bec4; font-size:11.5px; font-weight:700; display:flex; align-items:center; }
.hm-lock { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; }
.hm-lock > div { display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 22px; border-radius:12px; background:rgba(15,17,19,.94); border:1px solid #2e3339; box-shadow:0 8px 30px rgba(0,0,0,.5); text-align:center; }
.hm-lock i { font-size:20px; color:#b9bec4; }
.hm-lock b { font:600 14px 'Pretendard Variable', Pretendard, sans-serif; }
.hm-lock a { height:40px; padding:0 22px; border-radius:8px; background:var(--pb-t1); color:#0c0d0f !important; font-size:14px; font-weight:700; display:flex; align-items:center; }
.hm-free { display:inline-flex; align-items:center; height:18px; padding:0 6px; margin-left:6px; border-radius:4px; background:#13301f; color:#5fd49a; font:700 11px 'Pretendard Variable', Pretendard, sans-serif; vertical-align:2px; }
.hm-toon .tx .hm-free { margin-left:0; align-self:flex-start; }
.hm-game b i.ti-lock { font-size:13px; color:#8d939a; margin-left:5px; }
@media (max-width: 760px) {
  .hm-hero { flex-direction:column; align-items:stretch; gap:14px; padding:14px; }
  .hm-hero h1 { font-size:19px; }
  .hm-ben { width:auto; }
  .hm-blur .hm-stats { grid-template-columns:1fr 1fr; }
  .hm-blur .hm-vend { display:grid; grid-template-columns:1fr; margin:0; padding:0; }
  .hm-blur .hm-vend .hm-vc:nth-child(n+2) { display:none; }
}

/* 비로그인 - 로그인 없이 바로 이용(타일 3) */
.hm-free3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.hm-ft { display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:10px; background:#121417; border:1px solid #23272c; min-width:0; }
.hm-ft:hover { border-color:#3a3f46; }
.hm-ft img { width:100%; height:120px; object-fit:cover; border-radius:7px; background:#1b1e22; }
.hm-ft b { font:700 15px 'Pretendard Variable', Pretendard, sans-serif; margin-top:2px; }
.hm-ft span { font-size:12.5px; color:#8d939a; }
.hm-ft em { font-style:normal; font-size:13px; font-weight:600; color:var(--pb-t1); margin-top:2px; }
@media (max-width: 760px) {
  .hm-free3 { grid-template-columns:minmax(0,1fr); }
  .hm-ft { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:12px; }
  .hm-ft img { width:84px; height:64px; flex:none; }
  .hm-ft b { flex:1; }
  .hm-ft span, .hm-ft em { width:100%; }
  .hm-hero h1 br { display:none; }
}