:root{
  --bg:#f3f5f2;--paper:#fff;--ink:#1d2a2f;--slate:#123c45;--muted:#5f6f73;--line:#dde4df;--line-strong:#c7d2cc;
  --teal:#0f7c86;--teal-deep:#0b5a62;--brass:#c99a3e;--brass-deep:#9a6f22;--brass-soft:#f6ecd5;
  --win:#1d8a5f;--lose:#c2394a;--push:#5d6b74;--focus:#0f7c86;
  --felt:#0e4a55;--felt-deep:#082f37;--felt-ink:#e8dcbc;
  --card-w:clamp(58px,7.2vw,92px);--card-h:calc(var(--card-w)*1.4);
  --radius:20px;--max:1240px;
  --shadow:0 24px 60px rgba(18,52,58,.16);--soft:0 10px 26px rgba(18,52,58,.09);
  color-scheme:light;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;background:linear-gradient(180deg,#f7f8f5 0,#eef2ee 100%);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[hidden]{display:none!important}
h1,h2,h3,p{margin-top:0}
.bj-skip{position:fixed;left:1rem;top:1rem;z-index:100;transform:translateY(-200%);padding:.7rem 1rem;border-radius:10px;background:var(--slate);color:#fff;font-weight:900}
.bj-skip:focus{transform:none}

/* 상단 */
.bj-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;min-height:64px;padding:.55rem max(1rem,calc((100vw - var(--max))/2));border-bottom:1px solid var(--line);background:#f7f8f5e8;backdrop-filter:blur(14px)}
.bj-brand{display:flex;align-items:center;gap:.65rem;color:inherit;text-decoration:none}
.bj-brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--slate);box-shadow:inset 0 0 0 1px #ffffff1f}
.bj-brand-copy{display:grid;line-height:1.05}
.bj-brand-copy strong{color:var(--slate);letter-spacing:.16em;font-size:.86rem}
.bj-brand-copy small{margin-top:.28rem;color:var(--muted);font-size:.68rem;font-weight:800}
.bj-nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.bj-nav a{padding:.5rem .78rem;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:800}
.bj-nav a:hover{background:#fff;color:var(--slate)}
.sfx-toggle{width:38px;height:38px;flex:0 0 auto;display:inline-grid;place-items:center;margin-left:.2rem;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--teal);cursor:pointer;transition:background .16s ease,color .16s ease}.sfx-toggle:hover{color:var(--slate)}.sfx-toggle svg{width:19px;height:19px;overflow:visible}.sfx-toggle .sfx-wave,.sfx-toggle .sfx-mute{transition:opacity .16s ease}.sfx-toggle .sfx-mute{opacity:0}.sfx-toggle[aria-pressed=false]{color:var(--muted);background:#eef1ee}.sfx-toggle[aria-pressed=false] .sfx-wave{opacity:0}.sfx-toggle[aria-pressed=false] .sfx-mute{opacity:1}
@media(prefers-reduced-motion:reduce){.sfx-toggle,.sfx-toggle *{transition:none}}@media(forced-colors:active){.sfx-toggle{border-color:ButtonText;color:ButtonText}}
.bj-account{display:flex;align-items:center;gap:.6rem;padding:.35rem .45rem .35rem .8rem;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:.84rem;white-space:nowrap}
.bj-account-name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;color:var(--slate);font-weight:900}
.bj-account-money{color:var(--muted);font-variant-numeric:tabular-nums}
.bj-account-money b{color:var(--brass-deep)}
.bj-link-btn{border:0;padding:.35rem .6rem;border-radius:8px;background:#eef2ee;color:var(--muted);font-size:.74rem;font-weight:800;cursor:pointer}
.bj-link-btn:hover{background:#e3eae5;color:var(--slate)}

.bj-main{width:min(calc(100% - 2rem),var(--max));margin:0 auto;padding:clamp(1.1rem,3vw,2.2rem) 0 4rem}
.bj-kicker{margin:0 0 .4rem;color:var(--teal);font-size:.72rem;font-weight:950;letter-spacing:.18em}
.bj-status{min-height:1.3rem;margin:.55rem 0 0;color:var(--muted);font-size:.86rem;font-weight:750;line-height:1.5}
.bj-status.center{text-align:center}
.bj-status.bad{color:var(--lose)}
.bj-status.good{color:var(--win)}

/* 버튼 */
.bj-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem 1.05rem;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--slate);font-weight:850;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s ease;touch-action:manipulation;user-select:none}
.bj-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--soft)}
.bj-btn:active:not(:disabled){transform:translateY(1px)}
.bj-btn:disabled{opacity:.5;cursor:not-allowed}
.bj-btn.gold{border-color:var(--brass-deep);background:linear-gradient(180deg,#ddb560,var(--brass));color:#2a1d05;box-shadow:0 10px 22px #c99a3e33,inset 0 1px 0 #fff5}
.bj-btn.wide{width:100%}
.bj-btn.small{min-height:34px;padding:.35rem .7rem;font-size:.8rem;border-radius:9px}
.bj-btn kbd,.bj-act kbd{padding:.08rem .38rem;border:1px solid currentColor;border-radius:5px;font:inherit;font-size:.66rem;font-weight:900;opacity:.6}

/* 로딩·로그인 */
.bj-loading{display:grid;place-items:center;gap:1rem;min-height:50vh;color:var(--muted)}
.bj-spinner{width:42px;height:42px;border:4px solid #d6e2dc;border-top-color:var(--teal);border-radius:50%;animation:bj-spin .8s linear infinite}
@keyframes bj-spin{to{transform:rotate(360deg)}}
.bj-auth{display:grid;place-items:center;min-height:60vh}
.bj-auth-card{width:min(100%,440px);padding:clamp(1.4rem,4vw,2.1rem);border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.bj-auth-card h1{margin-bottom:.6rem;color:var(--slate);font-size:1.5rem}
.bj-auth-card>p{color:var(--muted);line-height:1.6;font-size:.92rem}
.bj-auth-card form{display:grid;gap:.85rem;margin-top:1.2rem}
.bj-auth-card label{display:grid;gap:.35rem;color:var(--slate);font-size:.84rem;font-weight:850}
.bj-auth-card input{min-height:46px;padding:.6rem .8rem;border:1px solid var(--line-strong);border-radius:11px;background:#fbfcfb}
.bj-auth-link{display:block;margin-top:1rem;color:var(--teal);font-size:.86rem;font-weight:800;text-align:center}

/* 플레이 화면 */
.bj-play{animation:bj-in .3s ease both}
@keyframes bj-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.bj-head h1{margin:0;color:var(--slate);font-size:clamp(1.7rem,3.6vw,2.3rem);letter-spacing:-.02em}
.bj-rule-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.bj-rule-pills li{padding:.38rem .7rem;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-size:.76rem;font-weight:750}
.bj-rule-pills b{color:var(--slate)}
.bj-busy{margin:0 0 1rem;padding:.8rem 1rem;border:1px solid #efd3a3;border-left:4px solid var(--brass);border-radius:12px;background:var(--brass-soft);color:#6b4d12;font-weight:800;font-size:.9rem}
.bj-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start}

/* 테이블(펠트) */
.bj-table{position:relative;display:grid;grid-template-rows:auto auto 1fr;min-height:clamp(420px,58vh,560px);padding:clamp(1rem,2.6vw,1.8rem) clamp(.8rem,2.4vw,1.6rem) clamp(1.2rem,3vw,2rem);border-radius:28px 28px 220px 220px / 28px 28px 120px 120px;background:radial-gradient(120% 90% at 50% 0,#13606d 0,var(--felt) 46%,var(--felt-deep) 100%);box-shadow:inset 0 0 0 1px #ffffff14,inset 0 -30px 60px #0006,0 26px 60px #0b2f3633;overflow:hidden;color:var(--felt-ink)}
.bj-rail{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 9px #5a3a1a,inset 0 0 0 11px #c99a3e,inset 0 0 0 12px #3a2410}
.bj-zone{position:relative;z-index:1;display:grid;justify-items:center;gap:.6rem}
.bj-zone-head{display:flex;align-items:center;gap:.6rem;min-height:28px}
.bj-zone-label{color:#e8dcbcb3;font-size:.72rem;font-weight:900;letter-spacing:.2em}
.bj-total{min-width:2.4rem;padding:.2rem .55rem;border-radius:7px;background:#04191ecc;color:#fff;font-size:.86rem;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}
.bj-total.bust{background:var(--lose)}
.bj-total.bj{background:linear-gradient(180deg,#ddb560,var(--brass));color:#2a1d05}
.bj-print{position:relative;z-index:0;width:min(100%,560px);margin:.4rem auto -.4rem;justify-self:center;fill:#e8dcbc;opacity:.5;transition:opacity .25s ease}
.bj-table.finished .bj-print{opacity:0}
.bj-print text{font-size:22px;font-weight:900;letter-spacing:.26em}
.bj-print text.sub{font-size:13px;font-weight:700;letter-spacing:.06em;opacity:.85}
.bj-zone.player{align-self:end;min-height:calc(var(--card-h) + 4.6rem)}
.bj-hands{display:flex;justify-content:center;gap:clamp(1rem,5vw,3.2rem);flex-wrap:wrap}
.bj-hand{position:relative;display:grid;justify-items:center;gap:.55rem;padding:.55rem .6rem .7rem;border-radius:16px;transition:background .2s ease,box-shadow .2s ease}
.bj-hand.active{background:#ffffff12;box-shadow:inset 0 0 0 2px #c99a3ecc}
.bj-hand-meta{display:flex;align-items:center;gap:.45rem}
.bj-stake-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem .2rem .25rem;border-radius:999px;background:#04191ecc;color:#fff;font-size:.78rem;font-weight:850;font-variant-numeric:tabular-nums}
.bj-stake-chip i{width:16px;height:16px;border-radius:50%;background:repeating-conic-gradient(var(--brass) 0 30deg,#fff4dc 30deg 60deg);box-shadow:inset 0 0 0 3px #7b5413}
.bj-result{position:absolute;top:-.7rem;left:50%;z-index:3;transform:translateX(-50%);padding:.24rem .65rem;border-radius:7px;color:#fff;font-size:.74rem;font-weight:950;letter-spacing:.04em;white-space:nowrap;box-shadow:0 6px 14px #0005;animation:bj-pop .32s cubic-bezier(.2,1.4,.4,1) both}
.bj-result.win{background:var(--win)}.bj-result.blackjack{background:linear-gradient(180deg,#ddb560,var(--brass));color:#2a1d05}.bj-result.push{background:var(--push)}.bj-result.lose,.bj-result.bust{background:var(--lose)}
@keyframes bj-pop{from{opacity:0;transform:translate(-50%,6px) scale(.8)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.bj-empty{display:grid;justify-items:center;gap:.6rem;color:#e8dcbccc;font-size:.92rem;text-align:center}
.bj-empty p{margin:0}
.bj-empty b{color:#f4d58c}
.bj-empty-chip{width:62px;height:62px;border-radius:50%;background:repeating-conic-gradient(#c99a3e 0 22.5deg,#f6ecd5 22.5deg 45deg);box-shadow:inset 0 0 0 8px #7b5413,inset 0 0 0 12px #f6ecd5,0 8px 18px #0005;opacity:.85}

/* 카드 */
.bj-cards{display:flex;justify-content:center;min-height:var(--card-h);padding-left:calc(var(--card-w)*.42)}
.bj-card-face{position:relative;width:var(--card-w);height:var(--card-h);margin-left:calc(var(--card-w)*-.42);border-radius:calc(var(--card-w)*.1);background:#fffdf8;box-shadow:0 1px 0 #fff inset,0 8px 18px #0006,0 0 0 1px #00000014;color:#1b2430;transform-origin:50% 120%}
.bj-card-face.red{color:#c8323f}
.bj-card-face.deal{animation:bj-deal .42s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--delay,0s)}
@keyframes bj-deal{from{opacity:0;transform:translate(46vw,-30vh) rotate(-24deg)}to{opacity:1;transform:none}}
.bj-card-face .corner{position:absolute;display:grid;justify-items:center;line-height:.95;font-weight:900;font-size:calc(var(--card-w)*.2)}
.bj-card-face .corner small{font-size:calc(var(--card-w)*.17)}
.bj-card-face .corner.tl{top:7%;left:9%}
.bj-card-face .corner.br{right:9%;bottom:7%;transform:rotate(180deg)}
.bj-card-face .pip{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--card-w)*.46)}
.bj-card-face .pip.face{font-size:calc(var(--card-w)*.34);font-weight:950;letter-spacing:-.03em}
.bj-card-face .pip.face:before{content:"";position:absolute;inset:22% 20%;border:1.5px solid currentColor;border-radius:6px;opacity:.28}
.bj-card-back{position:relative;width:var(--card-w);height:var(--card-h);margin-left:calc(var(--card-w)*-.42);border-radius:calc(var(--card-w)*.1);background:repeating-linear-gradient(45deg,#0d3c46 0 5px,#0a313a 5px 10px);box-shadow:inset 0 0 0 4px #f6ecd5,inset 0 0 0 6px #c99a3e,0 8px 18px #0006}
.bj-card-back:after{content:"";position:absolute;inset:30% 26%;border-radius:50%;border:2px solid #c99a3e99}
.bj-card-back.deal{animation:bj-deal .42s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--delay,0s)}

/* 결과 배너 */
.bj-banner{position:absolute;left:50%;top:45%;z-index:5;display:grid;justify-items:center;gap:.3rem;min-width:min(78%,360px);padding:1rem 1.4rem;border-radius:16px;background:#04191eea;color:#fff;text-align:center;box-shadow:0 18px 40px #0008,inset 0 0 0 1px #c99a3e88;transform:translate(-50%,-50%);animation:bj-banner .4s cubic-bezier(.2,1.2,.4,1) both;pointer-events:none}
.bj-banner strong{font-size:clamp(1.3rem,3vw,1.8rem);letter-spacing:-.01em}
.bj-banner span{color:#e8dcbc;font-size:.9rem;font-weight:750;font-variant-numeric:tabular-nums}
.bj-banner.win strong{color:#7fe0b2}.bj-banner.blackjack strong{color:#f4d58c}.bj-banner.lose strong{color:#ff9aa6}
@keyframes bj-banner{from{opacity:0;transform:translate(-50%,-40%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 조작부 */
.bj-controls{margin-top:1rem}
.bj-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.bj-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:66px;padding:.5rem;border:1px solid var(--line-strong);border-radius:14px;background:#fff;color:var(--slate);font-weight:900;font-size:1rem;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;touch-action:manipulation;user-select:none}
.bj-act small{color:var(--muted);font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums}
.bj-act:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--soft)}
.bj-act:active:not(:disabled){transform:translateY(1px)}
.bj-act:disabled{opacity:.42;cursor:not-allowed}
.bj-act.hit{border-color:#9fd2d7;background:linear-gradient(180deg,#f2fbfb,#e2f3f4);color:var(--teal-deep)}
.bj-act.stand{border-color:#e6c4c9;background:linear-gradient(180deg,#fff7f8,#fbe9eb);color:#9b2636}
.bj-act.double,.bj-act.split{border-color:#e8d3a6;background:linear-gradient(180deg,#fffaf0,#f8eed6);color:#7a5413}
.bj-betbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.8rem;padding:.8rem;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--soft)}
.bj-stake{display:grid;gap:.2rem}
.bj-stake label{color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.08em}
.bj-stake-field{display:flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border:1px solid var(--line-strong);border-radius:10px;background:#fbfcfb}
.bj-stake-field:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px #0f7c8622}
.bj-stake-field input{width:9.5rem;min-height:38px;border:0;background:transparent;color:var(--slate);font-size:1.15rem;font-weight:900;font-variant-numeric:tabular-nums;text-align:right;outline:none}
.bj-stake-field span{color:var(--muted);font-weight:800}
.bj-stake small{color:var(--muted);font-size:.7rem}
.bj-stake small.bad{color:var(--lose);font-weight:800}
.bj-chips{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.bj-chip{--c:#2f6f9f;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:repeating-conic-gradient(var(--c) 0 22.5deg,#fff 22.5deg 45deg);box-shadow:inset 0 0 0 6px var(--c),inset 0 0 0 8px #ffffffcc,0 5px 12px #0003;cursor:pointer;transition:transform .12s ease}
.bj-chip span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font-size:.62rem;font-weight:950;letter-spacing:-.04em;white-space:nowrap;box-shadow:inset 0 0 0 1.5px #ffffff88}
.bj-chip:hover{transform:translateY(-3px) rotate(-8deg)}
.bj-chip:active{transform:translateY(1px)}
.bj-chip[data-chip="100"]{--c:#5c6f7a}.bj-chip[data-chip="1000"]{--c:#2f6f9f}.bj-chip[data-chip="10000"]{--c:#1d8a5f}.bj-chip[data-chip="100000"]{--c:#b0393f}.bj-chip[data-chip="1000000"]{--c:#3b2a6b}
.bj-stake-tools{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.bj-mini{min-height:30px;padding:.2rem .55rem;border:1px solid var(--line);border-radius:8px;background:#f6f8f6;color:var(--slate);font-size:.76rem;font-weight:850;cursor:pointer}
.bj-mini:hover{background:#eaf0ec}
.bj-btn.deal{min-width:130px;min-height:56px;font-size:1.1rem;border-radius:14px}

/* 옆 패널 */
.bj-side{display:grid;gap:.9rem}
.bj-card{padding:1rem 1.05rem;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--soft)}
.bj-card h2{margin-bottom:.6rem;color:var(--slate);font-size:.95rem}
.bj-wallet{display:grid;gap:.4rem;margin:0}
.bj-wallet div{display:flex;justify-content:space-between;align-items:baseline}
.bj-wallet dt{color:var(--muted);font-size:.8rem;font-weight:800}
.bj-wallet dd{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}
.bj-wallet b{color:var(--brass-deep);font-size:1.25rem}
.bj-note{margin:.6rem 0 0;color:var(--muted);font-size:.76rem;line-height:1.55}
.bj-history{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}
.bj-history li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;padding:.45rem .55rem;border-radius:10px;background:#f6f8f6;font-size:.8rem}
.bj-history .tag{padding:.12rem .45rem;border-radius:6px;color:#fff;font-size:.68rem;font-weight:900}
.bj-history .tag.win{background:var(--win)}.bj-history .tag.blackjack{background:var(--brass);color:#2a1d05}.bj-history .tag.push{background:var(--push)}.bj-history .tag.lose{background:var(--lose)}
.bj-history .what{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bj-history .net{font-weight:900;font-variant-numeric:tabular-nums}
.bj-history .net.plus{color:var(--win)}.bj-history .net.minus{color:var(--lose)}
.bj-rules summary{color:var(--slate);font-weight:900;cursor:pointer}
.bj-rules ul{margin:.7rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.8rem;line-height:1.6}

/* 알림 */
.bj-toasts{position:fixed;right:1rem;bottom:1rem;z-index:60;display:grid;gap:.5rem;width:min(calc(100% - 2rem),360px)}
.bj-toast{padding:.75rem .95rem;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;background:#fff;box-shadow:var(--shadow);font-size:.86rem;font-weight:750;animation:bj-in .25s ease both}
.bj-toast.good{border-left-color:var(--win)}.bj-toast.bad{border-left-color:var(--lose)}
.bj-toast strong{display:block;margin-bottom:.15rem;color:var(--slate)}

@media(max-width:1020px){
  .bj-layout{grid-template-columns:1fr}
  .bj-side{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media(max-width:720px){
  .bj-top{flex-wrap:wrap;gap:.5rem}
  .bj-nav{order:3;width:100%;margin-left:0;justify-content:flex-end}
  .bj-account{margin-left:auto}
  .bj-table{border-radius:22px 22px 120px 120px / 22px 22px 70px 70px;min-height:400px}
  .bj-betbar{grid-template-columns:1fr auto}
  .bj-chips{grid-column:1 / -1;order:3}
  .bj-stake-tools{grid-template-columns:repeat(4,auto)}
  .bj-btn.deal{grid-column:1 / -1;order:4}
  .bj-stake-field input{width:100%}
  .bj-act{min-height:58px;font-size:.92rem}
  .bj-act kbd{display:none}
}
@media(max-width:420px){
  .bj-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bj-chip{width:46px;height:46px}.bj-chip span{width:26px;height:26px;font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){
  .bj-card-face.deal,.bj-card-back.deal,.bj-banner,.bj-result,.bj-play{animation:none}
}