:root{--bg:#fbf4ea;--ink:#2b1d14;--sub:#7a6150;--line:rgba(60,35,15,.12);--card:#fffdf8;--chip:rgba(60,35,15,.06);--red:#e2432a;--red-dk:#b52d17;--gold:#f2b233;--green:#2f9e55}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;line-height:1.6;background-image:radial-gradient(rgba(150,70,30,.06) 1px,transparent 1px);background-size:18px 18px}
a{color:inherit}
kbd{font:700 11px/1 "Segoe UI",sans-serif;padding:2px 5px;border-radius:4px;border:1px solid var(--line);background:var(--chip)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mast{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;padding:10px 16px 0}
.mast-brand{font-size:13px;color:var(--sub);text-decoration:none}.mast-brand b{color:var(--ink);letter-spacing:.02em}
.mast-tag{font-size:12px;color:var(--sub)}
.game{max-width:1120px;margin:0 auto;padding:4px 16px 18px;user-select:none;-webkit-user-select:none}
.topbar{display:flex;align-items:center;gap:14px;margin:6px 0 12px}
.logo{margin:0;font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:40px;line-height:1;color:var(--red);letter-spacing:-.01em;text-shadow:0 2px 0 rgba(140,30,10,.16);white-space:nowrap}
.tagline{margin:0;font-size:14px;font-weight:700;color:var(--sub);word-break:keep-all}
.stage{display:flex;justify-content:center;align-items:flex-start;gap:18px}
.side{flex:0 0 220px;width:220px;display:flex;flex-direction:column;gap:12px}
.panel,.side .tools{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 4px 14px rgba(90,50,15,.07)}
.panel-h{margin:0 0 6px;font-size:12.5px;font-weight:800;color:var(--sub);letter-spacing:.02em}
.frame{flex:0 0 auto;padding:10px;border-radius:22px;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 46px,rgba(110,50,20,.08) 46px 48px),linear-gradient(180deg,#e6a46a,#c8783f);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(110,40,10,.28),0 12px 28px rgba(90,40,15,.2)}
.board{position:relative;border-radius:14px;overflow:hidden;background:#f6efe4;box-shadow:inset 0 2px 8px rgba(90,50,15,.18);-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#bCanvas{display:block;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}
/* 정보 패널 */
.info .lv{display:flex;align-items:baseline;gap:6px;margin:0}
.info .lv b{font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:34px;line-height:1;color:var(--red)}
.info .lv span{font-size:13px;font-weight:800;color:var(--sub)}
.info .lv-name{margin:4px 0 8px;font-size:15px;font-weight:800;word-break:keep-all;line-height:1.35}
.dots{display:flex;gap:4px;margin:0 0 10px}
.dots i{flex:1;height:7px;border-radius:4px;background:rgba(60,35,15,.1)}
.dots i.on{background:linear-gradient(90deg,#ff8a5c,var(--red))}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:13px}
.info dt{color:var(--sub);font-weight:700}
.info dd{margin:0;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.info .staff-line{margin:8px 0 0;font-size:12.5px;color:var(--sub);word-break:keep-all;line-height:1.5}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.menu-list li{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:10px;font-size:14px;font-weight:800}
.menu-list canvas{width:34px;height:34px;flex:0 0 34px}
.menu-list li em{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.menu-list li small{display:block;font-size:11px;font-weight:700;color:var(--sub);line-height:1.2}
.menu-list li.off{color:var(--sub)}
.menu-list li.off canvas{opacity:.35;filter:grayscale(.9)}
.menu-list li.off em{font-size:11.5px;color:var(--sub)}
.menu-list .al{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:999px;background:#e9f6ec;color:var(--green);font-size:10.5px;font-weight:800;vertical-align:1px}
.tips p{margin:0;font-size:12.5px;line-height:1.6;color:var(--sub);word-break:keep-all}
.tips p+p{margin-top:6px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tools .sp{flex:1}
.tools button{border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit;font-weight:700;font-size:13px;line-height:1;padding:9px 13px;border-radius:999px;cursor:pointer}
.tools button[aria-pressed="false"]{color:var(--sub);background:transparent;text-decoration:line-through;text-decoration-color:rgba(120,90,60,.45)}
.tools button[aria-pressed="true"]{border-color:rgba(226,67,42,.35)}
.tools #bPause{background:linear-gradient(180deg,#ff8a5c,var(--red));color:#fff;border-color:transparent}
.tools #bPause kbd{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.35);color:#fff;margin-left:4px}
.tools #bPause[disabled]{opacity:.45;cursor:default}
.tools #bReset{color:var(--sub)}
.side .tools{flex-direction:column;align-items:stretch;gap:6px}
.side .tools .sp{display:none}
.side .tools button{text-align:left;padding:10px 12px}
.side .tools #bPause{text-align:center}
/* 안내 카드 */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(43,24,12,.32);z-index:3}
.overlay[hidden]{display:none}
.card{position:relative;width:100%;max-width:400px;max-height:100%;overflow:auto;background:var(--card);border-radius:20px;padding:20px 20px 16px;text-align:center;box-shadow:0 18px 40px rgba(60,30,10,.32);animation:bIn .28s cubic-bezier(.2,1.3,.4,1);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:text;-webkit-user-select:text}
@keyframes bIn{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.card-kick{margin:0;font-size:13px;font-weight:800;color:var(--sub);word-break:keep-all}
.card-title{margin:4px 0 8px;font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:38px;line-height:1.1;color:var(--red)}
.card-art{display:block;width:260px;max-width:100%;height:150px;margin:2px auto 8px}
.card-desc{margin:0 0 14px;font-size:15px;color:var(--ink);word-break:keep-all;line-height:1.55}
.card-meta{margin:10px 0 0;font-size:13px;color:var(--sub);word-break:keep-all}
.card-key{margin:6px 0 0;font-size:12px;color:var(--sub);word-break:keep-all}
.card-note{margin:10px 0 0;padding:9px 12px;border-radius:12px;background:#fff3d6;color:#7a4b00;font-size:13.5px;font-weight:700;word-break:keep-all;line-height:1.45}
.btn-main{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:18px;line-height:1;color:#fff;background:linear-gradient(180deg,#ff7a4d,var(--red));padding:15px 40px;border-radius:999px;box-shadow:0 5px 0 var(--red-dk),0 10px 18px rgba(170,50,20,.28);transition:transform .1s;text-shadow:0 1px 0 rgba(120,20,0,.35)}
.btn-main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-dk)}
.btn-sub{flex:1;border:1px solid var(--line);cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;line-height:1;color:var(--ink);background:var(--chip);padding:12px 10px;border-radius:999px}
.btn-sub.warn{color:#b3261e}
.card-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.card-btns .btn-main{width:100%;padding:14px 22px;font-size:17px}
.card-col{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.card-col .btn-main{width:100%}
/* 결산 */
.res-rev{margin:2px 0 0;font-size:20px;font-weight:800}
.res-rev b{font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:52px;line-height:1;color:var(--ink);margin-right:2px}
.res-goal{margin:4px 0 0;font-size:14px;font-weight:800;color:var(--sub)}
.stamp{display:inline-block;margin:8px 0 0;padding:5px 14px;border-radius:999px;font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:19px;letter-spacing:.02em;transform:rotate(-3deg)}
.stamp.ok{background:#e4f6e8;color:#1f7a3d;box-shadow:inset 0 0 0 2px #7bcf8f}
.stamp.no{background:#fff0e6;color:#b4481a;box-shadow:inset 0 0 0 2px #f2b08a}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0}
.res-grid div{background:var(--chip);border-radius:12px;padding:8px 10px;text-align:left}
.res-grid small{display:block;font-size:12px;font-weight:800;color:var(--sub)}
.res-grid b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.res-grid em{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:#b4481a;line-height:1.3}
.stars{position:relative;display:inline-block;width:100px;height:19px;vertical-align:-3px}
.stars svg{position:absolute;left:0;top:0;width:100px;height:19px}
.stars .fill{position:absolute;left:0;top:0;height:19px;overflow:hidden}
.res-lv{margin:12px 0 0;padding:10px 12px;border-radius:14px;background:#fff6e8;text-align:left}
.res-lv p{margin:0;font-size:13.5px;font-weight:800;word-break:keep-all;line-height:1.45}
.res-lv .up{color:var(--red)}
.res-lv .unl{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--sub)}
.res-best{margin:8px 0 0;font-size:13px;font-weight:800;color:#e8590c}
/* 상점 */
.card.shop{max-width:440px;padding:0;text-align:left;display:flex;flex-direction:column;overflow:hidden}
.shop-head{padding:16px 18px 8px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff7ea,var(--card))}
.shop-head .card-title{margin:0;font-size:32px}
.shop-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.shop-money{margin:0;text-align:right;font-size:12px;font-weight:800;color:var(--sub);line-height:1.2}
.shop-money b{display:block;font-family:"Black Han Sans","Segoe UI",sans-serif;font-weight:400;font-size:26px;color:#b8730a}
.shop-money b.bump{animation:bBump .3s ease-out}
@keyframes bBump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.shop-goal{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--sub);word-break:keep-all}
.shop-list{flex:1;overflow:auto;padding:4px 14px 10px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.shop-list h3{margin:12px 2px 6px;font-size:13px;font-weight:800;color:var(--sub);letter-spacing:.03em}
.row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:#fffaf2;border:1px solid var(--line);margin-bottom:6px}
.row .ico{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#fff1de}
.row.locked .ico{opacity:.45;filter:grayscale(.85)}
.row-txt{flex:1;min-width:0}
.row-txt b{display:block;font-size:14.5px;font-weight:800;line-height:1.3;word-break:keep-all}
.row-txt b em{font-style:normal;font-size:12px;color:var(--red);margin-left:4px}
.row-txt span{display:block;font-size:12px;font-weight:600;color:var(--sub);line-height:1.4;word-break:keep-all}
.row select{margin-top:4px;font-family:inherit;font-size:13px;font-weight:700;padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.buy{flex:0 0 auto;min-width:86px;border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:13.5px;line-height:1.15;color:#3b2504;background:linear-gradient(180deg,#ffd666,#f0a91f);padding:9px 10px;border-radius:12px;box-shadow:0 3px 0 #b06f08;font-variant-numeric:tabular-nums}
.buy small{display:block;font-size:10.5px;font-weight:800;opacity:.75}
.buy:active{transform:translateY(2px);box-shadow:0 1px 0 #b06f08}
.buy[disabled]{cursor:default;background:#efe7dc;color:#9a8574;box-shadow:none}
.buy.max{background:#e4f6e8;color:#1f7a3d}
.shop-foot{padding:10px 14px 14px;border-top:1px solid var(--line);background:var(--card)}
.shop-foot .btn-main{width:100%;padding:14px 20px;font-size:17px}
.shop-foot .link{display:block;margin:8px auto 0;border:0;background:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--sub);text-decoration:underline;cursor:pointer}
.banner{position:absolute;left:50%;top:33%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;z-index:2;font-family:"Black Han Sans","Segoe UI",sans-serif;font-size:28px;line-height:1.1;color:#fff;padding:.42em .9em;border-radius:999px;background:linear-gradient(180deg,#ff8a5c,#e2432a);box-shadow:0 5px 0 #a52a14,0 12px 24px rgba(120,30,10,.3);text-shadow:0 2px 0 rgba(110,20,0,.4);white-space:nowrap}
.banner.gold{background:linear-gradient(180deg,#ffdc6e,#e39a12);box-shadow:0 5px 0 #a5650a,0 12px 24px rgba(120,70,0,.35);text-shadow:0 2px 0 rgba(120,60,0,.5)}
.banner.green{background:linear-gradient(180deg,#7fd08a,#2f8f4a);box-shadow:0 5px 0 #1f6b35,0 12px 24px rgba(20,80,40,.3);text-shadow:0 2px 0 rgba(0,60,20,.45)}
.banner.on{animation:bBanner 1.9s ease forwards}
@keyframes bBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.b-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#2b1d14;color:#fff;font-size:14px;font-weight:700;padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;z-index:50;max-width:calc(100% - 32px);text-align:center;word-break:keep-all}
.b-toast.on{opacity:1;transform:translate(-50%,0)}
/* 좁은 화면 (휴대폰) */
.game.narrow{padding:0 8px 10px}
.game.narrow .topbar{margin:2px 0 6px;gap:8px}
.game.narrow .logo{font-size:26px}
.game.narrow .tagline{font-size:12px;line-height:1.3}
.game.narrow #bLeft,.game.narrow #bRight{display:none}
.game.narrow .stage{flex-direction:column;align-items:center;gap:8px}
.game.narrow .frame{padding:5px;border-radius:16px}
.game.narrow .board{border-radius:11px}
.game.narrow .tools{width:100%;gap:6px;flex-wrap:nowrap}
.game.narrow .tools button{padding:8px 10px;font-size:12.5px;white-space:nowrap}
.game.narrow .tools #bPause kbd{display:none}
.game.narrow .tools .sp{flex:1}
.game.narrow .card{padding:16px 14px 12px}
.game.narrow .card.shop{padding:0}
.game.narrow .card-title{font-size:30px;margin:2px 0 6px}
.game.narrow .card-art{height:118px}
.game.narrow .card-desc{font-size:14px;margin-bottom:10px}
.game.narrow .res-rev b{font-size:40px}
.game.narrow .stamp{font-size:16px;margin-top:6px}
.game.narrow .res-grid{gap:6px;margin-top:10px}
.game.narrow .res-grid div{padding:6px 9px}
.game.narrow .res-grid b{font-size:16px}
.game.narrow .res-lv{margin-top:8px;padding:8px 10px}
.game.narrow .res-lv p{font-size:13px}
.game.narrow .res-best{margin-top:6px}
.game.narrow .card-btns{margin-top:10px;gap:6px}
.game.narrow .card-btns .btn-main{padding:12px 18px;font-size:16px}
.game.narrow .btn-sub{padding:10px 8px;font-size:13px}
.game.narrow .shop-head{padding:12px 14px 6px}
.game.narrow .shop-head .card-title{font-size:26px}
.game.narrow .shop-money b{font-size:22px}
.game.narrow .shop-goal{font-size:12px}
.game.narrow .shop-list{padding:2px 10px 8px}
.game.narrow .row{gap:8px;padding:7px}
.game.narrow .row .ico{width:38px;height:38px;flex-basis:38px}
.game.narrow .row-txt b{font-size:13.5px}
.game.narrow .row-txt span{font-size:11.5px}
.game.narrow .buy{min-width:78px;font-size:12.5px;padding:8px}
.game.narrow .shop-foot{padding:8px 10px 10px}
.game.narrow .shop-foot .btn-main{padding:12px 16px;font-size:16px}
.narrow-mast .mast{padding-top:6px}
.narrow-mast .mast-tag{display:none}
/* 소개 글 */
.about{max-width:860px;margin:10px auto 0;padding:26px 18px 10px;border-top:1px solid var(--line)}
.about h2{font-size:21px;margin:28px 0 10px}
.about h2:first-child{margin-top:0}
.about p,.about li,.about dd{font-size:15.5px;word-break:keep-all}
.about ol,.about ul{padding-left:22px}
.about li{margin:4px 0}
.combo{display:grid;gap:8px;margin:12px 0 4px;padding:0;list-style:none}
.about .combo{padding:0}
.combo.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.combo.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.combo.six{grid-template-columns:1fr}}
.combo li{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14.5px;line-height:1.55}
.combo b{display:block;font-size:14px;color:var(--red);margin-bottom:2px}
.about dt{font-weight:800;margin-top:16px}
.about dd{margin:4px 0 0;color:var(--ink)}
.about .more{margin-top:26px;font-size:14px;color:var(--sub)}
.foot{max-width:860px;margin:0 auto;padding:22px 18px 40px;text-align:center;font-size:12.5px;color:var(--sub)}
.foot a{margin:0 9px;text-decoration:none;border-bottom:1px solid var(--line)}
.foot p{margin:12px 0 0}
@media (max-width:360px){.game.narrow .logo{font-size:22px}.game.narrow .tagline{display:none}.game.narrow .tools button{padding:7px 8px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.card{animation:none}.shop-money b.bump{animation:none}}