:root{font-family:system-ui,-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#fff7e5;background:#08152c;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:radial-gradient(circle at 7% 24%,#244777 0,transparent 37%),radial-gradient(circle at 92% 80%,#173e61 0,transparent 35%),#07162f}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.6}
.cm-app{width:min(1160px,100%);margin:0 auto;min-height:100dvh;padding:16px 20px 32px;position:relative}
.cm-hero{position:relative;isolation:isolate;border-radius:25px 25px 12px 12px;border:1px solid #be96566b;padding:21px 20px 14px;text-align:center;background:radial-gradient(ellipse at 49% 0,#21447a66,transparent 64%),linear-gradient(180deg,#0d2346f9,#0c1d3bfa);box-shadow:0 10px 28px #0008;overflow:hidden}
.cm-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.66;pointer-events:none;background-image:radial-gradient(circle at 8% 13%,#ffe8a9 0 2px,transparent 3px),radial-gradient(circle at 91% 19%,#ffd77d 0 2px,transparent 3px),radial-gradient(circle at 77% 67%,#9dceff 0 1px,transparent 2px),radial-gradient(circle at 33% 88%,#ffecb6 0 1px,transparent 2px);background-size:283px 194px,311px 277px,113px 141px,175px 155px}
.cm-hero::after{content:"✦       ✧       ✦";pointer-events:none;position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:24px;color:#ffe8a766;white-space:pre}
.cm-home{position:absolute;right:17px;top:15px;z-index:5;padding:8px 13px;border-radius:999px;background:#0b1a30cc;border:1px solid #d6ae687e;color:#fce2a5;text-decoration:none;font-size:13px;font-weight:800}.cm-home:hover{background:#253a5f}
.cm-brand{position:relative;z-index:2;max-width:640px;margin:0 auto 9px}.cm-eyebrow{display:block;font-size:10px;letter-spacing:.3em;color:#efc97d;font-weight:850}.cm-brand h1{margin:0;line-height:1.23;font-size:clamp(30px,4.4vw,49px);font-weight:1000;letter-spacing:-.07em;color:#fff7db;text-shadow:0 3px 0 #754b22,0 5px 12px #000,0 0 23px #eebf8466;-webkit-text-stroke:.5px #b88038}
.cm-pets{position:absolute;z-index:1;display:flex;top:32px;bottom:auto;gap:7px;align-items:center}.cm-pets-left{left:18px}.cm-pets-right{right:18px}.cm-pets img{display:block;width:clamp(58px,7.5vw,96px);height:clamp(58px,7.5vw,96px);object-fit:cover;object-position:center 35%;border-radius:50%;border:3px solid #f4cf81;box-shadow:0 7px 18px #0008,0 0 18px #e8cb7670}.cm-pets img:nth-child(2){transform:translateY(-11px)}.cm-pets img:nth-child(3){transform:translateY(4px)}
.cm-toolbar{position:relative;z-index:2;margin:12px auto 12px;display:flex;justify-content:center}.cm-modes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.cm-mode{border-radius:17px;border:2px solid #f6d88cbb;box-shadow:inset 0 3px 4px #ffffff58,0 6px 13px #0009;padding:9px 21px;min-width:146px;min-height:61px;color:white;text-shadow:0 2px 3px #0009;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .15s,box-shadow .15s,filter .15s}.cm-mode b{font-size:19px}.cm-mode small{font-size:12px;font-weight:750}.cm-easy{background:linear-gradient(160deg,#4ebf66,#127a47)}.cm-normal{background:linear-gradient(160deg,#53b8ff,#0863d6)}.cm-hard{background:linear-gradient(160deg,#c771e9,#7837bf)}.cm-mode:hover{filter:brightness(1.12)}.cm-mode[aria-pressed="true"]{box-shadow:inset 0 3px 5px #ffffff67,0 0 0 3px #fff1bc,0 8px 20px #f7dca76b;transform:translateY(-1px)}
.cm-controls{position:relative;z-index:2;display:grid;grid-template-columns:minmax(290px,1fr) minmax(220px,1fr);gap:16px;align-items:center;width:min(790px,100%);margin:4px auto 0}.cm-start{min-height:75px;padding:11px 24px;border-radius:22px;font-size:clamp(23px,3.1vw,33px);font-weight:1000;letter-spacing:-.05em;color:#6a3710;text-shadow:0 1px 0 #ffe7b7;border:3px solid #fff4c2;background:linear-gradient(180deg,#fff9c2 0,#ffcf53 30%,#e99a21 75%,#d88e20 100%);box-shadow:inset 0 0 0 3px #c17e20,inset 0 6px 8px #fff9cbaa,0 8px 18px #0009,0 0 26px #e7ac3055;transition:filter .18s,transform .18s}.cm-start:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-2px)}.cm-start:focus-visible{outline:3px solid white;outline-offset:5px}
.cm-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.cm-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:64px;border:1px solid #ceac758c;background:linear-gradient(135deg,#0a1736ec,#152d55e8);border-radius:12px;box-shadow:inset 0 1px #ffffff30}.cm-stat span{font-size:11px;font-weight:800;color:#f8d495}.cm-stat strong{font-size:clamp(15px,2vw,23px);font-variant-numeric:tabular-nums;letter-spacing:-.045em;white-space:nowrap}.cm-aux{display:flex;justify-content:center;align-items:center;gap:13px;margin:12px 0 0}.cm-restart{border:1px solid #e6c28294;background:#1c345b;color:#ffdc93;border-radius:12px;padding:6px 14px;font-weight:750;font-size:12px}.cm-status{font-size:11px;color:#bbcbeb}
.cm-board-wrap{position:relative;margin-top:12px;padding:21px 17px 28px;min-height:260px;border-radius:22px;border:2px solid #dcaf67;background:radial-gradient(ellipse at center,#18335b,#081936 78%);box-shadow:inset 0 0 0 4px #53638b27,0 18px 36px #0008;overflow:hidden;isolation:isolate}.cm-board-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background:radial-gradient(circle at 21% 22%,#f5e19a 0 2px,transparent 3px),radial-gradient(circle at 85% 70%,#f5e19a 0 1px,transparent 3px);background-size:221px 178px,169px 182px}
.cm-progress{position:relative;z-index:1;width:min(100%,850px);height:5px;margin:0 auto 16px;overflow:hidden;background:#0a1b3a;border-radius:99px}.cm-progress-bar{height:100%;width:var(--match-progress,0%);border-radius:99px;background:linear-gradient(90deg,#66ddb5,#f5ce63);transition:width .23s}
.cm-board,.cm-cover-grid{position:relative;z-index:1;width:min(100%,850px);margin:0 auto;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:14px;justify-content:center;align-items:stretch}.cm-board[hidden],.cm-message[hidden],.cm-overlay[hidden]{display:none!important}.cm-cover-card{position:relative;aspect-ratio:2/3;min-width:0;overflow:hidden;border-radius:11px;box-shadow:0 7px 12px #0008}.cm-cover-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.cm-message{position:relative;z-index:1}
.cm-card{display:block;position:relative;width:100%;aspect-ratio:2/3;min-width:0;padding:0;border:0;background:transparent;overflow:hidden;contain:layout paint style;isolation:isolate;border-radius:11px;perspective:1000px;user-select:none;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}.cm-card-inner{position:absolute;inset:0;display:block;border-radius:inherit;transform-style:preserve-3d;transform:rotateY(0);transition:transform .46s cubic-bezier(.18,.75,.22,1)}.cm-card-side{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#102140}.cm-card-back{transform:rotateY(0)}.cm-card-front{transform:rotateY(180deg)}.cm-card.flipped .cm-card-inner{transform:rotateY(180deg)}.cm-card-art{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.cm-card.matched .cm-card-front{box-shadow:inset 0 0 0 3px #59e0a9}.cm-card.matched::after{content:"✓";position:absolute;z-index:2;top:4px;right:4px;color:white;font-size:14px;font-weight:900;background:#0d9466;border:1px solid #91f5ca;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.cm-card:focus-visible{outline:3px solid #c2e8ff;outline-offset:-3px}.cm-card:disabled{opacity:1}
.cm-overlay{position:fixed;z-index:5000;inset:0;background:#061129e8;display:grid;place-items:center;padding:16px;backdrop-filter:blur(7px)}.cm-dialog{width:min(430px,100%);padding:30px 21px;border:2px solid #e6bc71;border-radius:24px;background:linear-gradient(145deg,#264575,#0c1d3a);box-shadow:0 24px 70px #0009;text-align:center}.cm-trophy{font-size:55px;color:#ffda77}.cm-dialog h2{font-size:30px;margin:7px 0 14px;color:#ffe3a7}.cm-dialog-stats{font-weight:850;font-size:21px;margin-bottom:20px}.cm-dialog-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.cm-action{padding:11px 20px;border:1px solid #d3b176;border-radius:12px;color:white;background:#233c61;font-weight:800}.cm-primary{background:linear-gradient(#fbe7a5,#e8ae43);color:#46270b}.cm-footer{text-align:center;margin:15px auto;color:#91a1c7;font-size:11px}
@media(max-width:960px){.cm-pets img{width:65px;height:65px}.cm-pets{top:9px;bottom:auto;gap:4px}.cm-modes{gap:8px}.cm-mode{min-width:118px}}
@media(max-width:720px){.cm-app{padding:8px 8px 22px}.cm-hero{border-radius:17px;padding:58px 11px 12px}.cm-home{right:9px;top:7px;font-size:11px;padding:6px 11px}.cm-pets{top:10px;bottom:auto;gap:3px}.cm-pets-left{left:10px}.cm-pets-right{right:80px}.cm-pets img{width:36px;height:36px;border-width:2px}.cm-pets img:nth-child(3){display:none}.cm-pets img:nth-child(2){transform:translateY(0)}.cm-brand h1{font-size:clamp(26px,7vw,34px)}.cm-eyebrow{font-size:8px}.cm-toolbar{margin:12px 0 10px}.cm-modes{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.cm-mode{min-width:0;min-height:56px;padding:8px 3px;border-radius:12px}.cm-mode b{font-size:clamp(14px,4.5vw,18px)}.cm-mode small{font-size:clamp(9px,2.7vw,12px)}.cm-controls{grid-template-columns:1fr;gap:10px}.cm-start{width:min(310px,100%);justify-self:center;min-height:66px;font-size:27px;padding:8px 18px}.cm-summary{width:100%;gap:6px}.cm-stat{min-height:55px}.cm-stat span{font-size:9px}.cm-stat strong{font-size:clamp(13px,4.3vw,18px)}.cm-aux{gap:10px;margin-top:9px}.cm-board-wrap{border-radius:14px;margin-top:9px;padding:10px 7px 16px}.cm-progress{margin-bottom:9px;height:4px}.cm-board,.cm-cover-grid{grid-template-columns:repeat(var(--mobile-cols,3),minmax(0,1fr));gap:8px}.cm-card,.cm-cover-card{border-radius:8px}.cm-footer{margin-top:11px}}
@media(max-width:355px){.cm-app{padding:6px}.cm-pets-right img:nth-child(2){display:none}.cm-pets-left img:nth-child(2){display:none}.cm-hero{padding-left:8px;padding-right:8px}.cm-board,.cm-cover-grid{gap:6px}.cm-stat strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.cm-card-inner{transition-duration:.01ms}.cm-mode,.cm-start{transition:none}}

/* 한 화면 게임판: 접히는 카드 영역을 화면의 남은 공간에 맞춘다. */
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}
body{overflow:hidden}
.cm-app{width:min(1260px,100%);height:100vh;height:100dvh;min-height:0;max-height:100dvh;display:flex;flex-direction:column;margin:0 auto;padding:6px 10px;overflow:hidden;gap:4px}
.cm-hero{flex:0 0 auto;min-height:0;border-radius:13px;padding:7px 12px 8px;overflow:hidden}
.cm-hero::after{display:none}
.cm-topline{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.cm-home{position:static;display:inline-flex;align-items:center;flex:0 0 auto;padding:6px 10px;font-size:12px;line-height:1.1;white-space:nowrap}
.cm-top-actions{display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end;min-width:0}
.cm-tool{font-size:12px;font-weight:900;color:#ffebbc;background:#132c52;border:1px solid #e0b46d;border-radius:9px;padding:5px 10px;min-height:31px;white-space:nowrap}
.cm-tool[aria-pressed="true"],.cm-tool[aria-expanded="true"]{background:#f6ce79;color:#292349}
.cm-brand{margin:-1px auto 2px}
.cm-eyebrow{display:none}
.cm-brand h1{font-size:clamp(22px,3vw,32px);line-height:1.1}
.cm-pets{top:8px;pointer-events:none}
.cm-pets img{width:46px;height:46px;border-width:2px}
.cm-pets-left{left:100px}.cm-pets-right{right:238px}
.cm-toolbar{margin:4px auto 6px}
.cm-modes{gap:7px;flex-wrap:nowrap}
.cm-mode{min-height:40px;min-width:95px;padding:3px 10px;border-radius:10px;gap:0}
.cm-mode b{font-size:14px}.cm-mode small{font-size:10px}
.cm-controls{display:block;width:min(540px,100%);margin:0 auto}
.cm-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.cm-stat{min-height:37px;border-radius:9px}
.cm-stat span{font-size:10px}.cm-stat strong{font-size:15px}
.cm-aux{justify-content:center;margin:5px 0 0;min-height:24px;gap:12px}
.cm-restart{padding:4px 12px;font-size:11px;border-radius:7px}
.cm-status{font-size:10px}
.cm-board-wrap{flex:1 1 auto;min-height:0;width:100%;margin:0;padding:8px;overflow:hidden;border-radius:14px;border-width:1px;display:block;position:relative;contain:layout paint}
.cm-progress{position:absolute;top:0;left:8px;right:8px;width:auto;margin:0;height:3px;z-index:3}
.cm-board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(var(--cols,4),var(--fit-width,84px));grid-auto-rows:var(--fit-height,126px);gap:var(--fit-gap,7px);width:max-content;max-width:none;margin:0;padding:0}
.cm-board[hidden],.cm-message[hidden],.cm-overlay[hidden]{display:none!important}
.cm-card{width:var(--fit-width,84px);height:var(--fit-height,126px);aspect-ratio:auto;min-width:0;min-height:0;flex:0 0 auto}
.cm-message{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.cm-start-center{min-height:clamp(60px,12vh,96px);width:min(420px,84%);font-size:clamp(24px,4.5vw,38px);padding:10px 15px}
.cm-footer{flex:0 0 auto;font-size:10px;line-height:14px;margin:0;text-align:center}
.cm-mirrored #cm-board{transform:translate(-50%,-50%) scaleX(-1)}
/* 확대는 문서 안에서만 이루어지며 브라우저 전체화면으로 전환하지 않는다. */
.cm-app.cm-expanded{
 position:relative!important;inset:auto!important;z-index:1;
 width:min(1600px,calc(100% - 22px))!important;max-width:1600px!important;
 height:calc(100dvh - 12px)!important;max-height:calc(100dvh - 12px)!important;
 margin:6px auto!important;padding:7px 12px!important;
 border:2px solid #f0cc83;border-radius:17px;
 background:linear-gradient(165deg,#112b51,#061329);
 box-shadow:0 0 0 3px #08142b,0 14px 30px #0009;
}
.cm-expanded .cm-pets,.cm-expanded .cm-brand{display:none!important}
.cm-expanded .cm-hero{padding:5px 9px 7px;border-radius:10px}
.cm-expanded .cm-topline{min-height:36px;display:flex}
.cm-expanded .cm-controls{position:static;transform:none;width:min(560px,100%);max-width:100%;margin:4px auto 0;pointer-events:auto}
.cm-expanded .cm-top-actions{display:flex;gap:6px;margin-left:auto}
.cm-expanded .cm-tool{min-height:34px}
.cm-expanded #cm-expand{background:linear-gradient(150deg,#fadd9a,#c89131);color:#352414;border:2px solid #fff3ca;min-width:82px;box-shadow:0 0 0 2px #776039}
.cm-expanded .cm-aux{display:flex!important;position:static!important;margin:4px auto 0!important;width:auto!important;background:none!important;border:0!important;padding:0!important}
.cm-expanded .cm-board-wrap{flex:1 1 auto;margin:0;border:2px solid #bd935b}
.cm-expanded .cm-stat{min-height:31px}
.cm-expanded .cm-footer{display:block;font-size:9px;line-height:11px}
#jukdolBgmControl{z-index:2147482999;right:9px!important;bottom:10px!important}
#jukdolBgmControl .jbgm-fab{display:none!important}
#jukdolBgmControl .jbgm-panel{bottom:0;right:0;max-height:min(620px,calc(100dvh - 22px))}
@media(max-width:900px){.cm-pets{display:none!important}}
@media(max-width:720px){
 .cm-app{padding:4px 5px;gap:3px}
 .cm-hero{padding:5px 7px 6px;border-radius:10px}
 .cm-topline{min-height:28px;gap:4px}
 .cm-home{padding:5px 7px;font-size:10px}
 .cm-top-actions{gap:4px}
 .cm-tool{font-size:10px;min-height:29px;padding:4px 6px;border-radius:7px}
 .cm-brand h1{font-size:22px}
 .cm-toolbar{margin:4px auto}
 .cm-modes{display:flex;gap:5px;width:100%;max-width:405px}
 .cm-mode{min-width:0;min-height:35px;padding:3px 5px;flex:1 1 0;border-radius:8px}
 .cm-mode b{font-size:13px}.cm-mode small{font-size:9px}
 .cm-summary{gap:4px}
 .cm-stat{min-height:32px}.cm-stat span{font-size:9px}.cm-stat strong{font-size:13px}
 .cm-aux{margin:3px 0 0;min-height:21px}
 .cm-restart{padding:3px 9px;font-size:10px}
 .cm-board-wrap{padding:5px;border-radius:10px}
 .cm-start-center{width:min(340px,87%);min-height:70px;font-size:26px}
 .cm-footer{font-size:9px;line-height:12px}
 .cm-expanded .cm-controls{position:static;transform:none;width:100%;max-width:360px;margin:0 auto 0}
 .cm-expanded .cm-topline{display:flex;min-height:27px}
 .cm-expanded .cm-hero{padding:3px}
 .cm-expanded .cm-stat{min-height:23px}
}
@media(max-height:680px){.cm-brand h1{font-size:19px}.cm-mode{min-height:30px}.cm-stat{min-height:29px}.cm-toolbar{margin:2px auto}.cm-aux{min-height:19px;margin:2px 0 0}.cm-hero{padding-top:3px;padding-bottom:3px}.cm-app{gap:2px}.cm-footer{line-height:11px}}
@media(max-width:355px){.cm-home{font-size:9px;padding:4px 5px}.cm-tool{padding:4px 5px;font-size:9px}.cm-brand h1{font-size:20px}.cm-stat strong{font-size:12px}}

/* 첫 화면: 모드 선택 → 카드 수 선택 → 시작. 게임 중 설정은 접는다. */
.cm-toolbar{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(680px,100%);margin:5px auto 6px}
.cm-toolbar[hidden],.cm-setup-label[hidden],.cm-config-select[hidden]{display:none!important}
.cm-setup-line{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%;min-width:0}
.cm-mode-line{flex-direction:column;gap:5px;width:100%}
.cm-setup-label{font-weight:900;font-size:13px;color:#ffe0a0;white-space:nowrap}
.cm-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(530px,100%)}
.cm-mode{min-width:0;min-height:40px;max-width:none}
.cm-count-line{flex-wrap:wrap;width:100%}
.cm-config-select{appearance:auto;min-width:0;min-height:37px;padding:6px 13px;font-size:14px;font-weight:850;color:#fff6d8;background:#162e56;border:1.5px solid #d7aa60;border-radius:10px}
.cm-config-select:disabled{opacity:.5}
.cm-card{container-type:inline-size}
.cm-card-number{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;font-size:clamp(23px,31cqw,95px);font-weight:1000;line-height:1;color:#fff8d6;-webkit-text-stroke:1.5px #49300e;text-shadow:0 3px 0 #915111,0 6px 7px #02091b,0 0 14px #fff8ca;pointer-events:none;font-variant-numeric:tabular-nums}
.cm-card-number::before{content:"";position:absolute;z-index:-1;width:66%;height:33%;border-radius:999px;background:#102143bd;border:2px solid #ffda83;box-shadow:0 3px 10px #0008,inset 0 0 9px #ffc77775}
.cm-mirrored .cm-card-number{transform:scaleX(-1)}
@media(max-width:720px){.cm-toolbar{gap:5px;margin:4px auto}.cm-mode-line{gap:4px}.cm-setup-label{font-size:11px}.cm-setup-line{gap:5px}.cm-modes{gap:4px}.cm-mode{min-height:33px;padding:2px}.cm-mode b{font-size:12px}.cm-mode small{font-size:8px}.cm-config-select{font-size:12px;min-height:32px;padding:4px 6px}.cm-count-line{width:100%}}
@media(max-height:680px){.cm-toolbar{gap:2px;margin:2px auto}.cm-config-select{min-height:28px;padding:3px 7px}.cm-mode{min-height:29px}.cm-mode-line{gap:2px}}

/* 3단계 선택 마법사. 각 단계는 별도의 화면이며 상호 겹치지 않는다. */
.cm-wizard{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
.cm-wizard[hidden],.cm-step[hidden],.cm-free-options[hidden]{display:none!important}
.cm-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.1vh,20px);width:min(660px,100%);height:100%;min-height:0;text-align:center}
.cm-step-index{font-weight:850;font-size:clamp(11px,1.6vh,16px);color:#d8b96c;letter-spacing:.22em}
.cm-step h2{font-size:clamp(21px,4vh,38px);line-height:1.13;font-weight:950;color:#fff5d4;margin:0;text-shadow:0 3px 4px #040c21}
.cm-step .cm-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(650px,100%);gap:clamp(6px,1.4vw,14px)}
.cm-step .cm-mode{min-height:clamp(70px,14vh,126px);padding:8px 4px;border-radius:16px}
.cm-step .cm-mode b{font-size:clamp(14px,2.9vw,26px)}
.cm-step .cm-mode small{font-size:clamp(10px,1.7vw,14px)}
.cm-free-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px}
.cm-free-options label{font-weight:900;color:#f8dfae}
.cm-next,.cm-back,.cm-count-choices button{font-family:inherit;font-weight:900;border-radius:12px;border:1.5px solid #f4d08a;color:#fff3d4;background:linear-gradient(150deg,#253e6e,#123055);cursor:pointer;touch-action:manipulation}
.cm-next{padding:9px 22px;background:linear-gradient(150deg,#eecf84,#a56a20);color:#30200a}
.cm-back{padding:8px 15px;font-size:clamp(12px,1.7vw,15px)}
.cm-count-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,1.6vh,12px);width:min(550px,100%)}
.cm-count-choices button{min-height:clamp(38px,8vh,66px);font-size:clamp(16px,2.7vw,25px)}
.cm-count-choices button:hover,.cm-back:hover,.cm-next:hover{filter:brightness(1.18)}
.cm-setup-summary{color:#f5d58e;font-size:clamp(16px,3vh,25px);font-weight:900}
.cm-step .cm-start-center{width:min(430px,95%);min-height:clamp(65px,12vh,100px);font-size:clamp(25px,4vw,39px);}
.cm-app[data-setup-step]:not([data-setup-step="playing"]) .cm-controls,.cm-app[data-setup-step]:not([data-setup-step="playing"]) .cm-aux{display:none!important}
.cm-app[data-setup-step]:not([data-setup-step="playing"]) .cm-progress{display:none}
.cm-expanded .cm-wizard{padding:10px}
@media(max-width:720px){
 .cm-step .cm-modes{gap:6px}
 .cm-step .cm-mode{border-radius:10px;min-height:clamp(65px,12vh,90px)}
 .cm-step .cm-mode b{font-size:clamp(13px,4vw,19px)}
 .cm-step .cm-mode small{font-size:clamp(9px,2.7vw,12px)}
 .cm-count-choices{width:min(360px,100%);gap:7px}
 .cm-count-choices button{min-height:clamp(39px,7.8vh,61px)}
}
@media(max-height:450px){.cm-step{gap:5px}.cm-step h2{font-size:20px}.cm-step .cm-mode{min-height:49px}.cm-count-choices{grid-template-columns:repeat(5,minmax(0,1fr))}.cm-count-choices button{min-height:38px}}

/* 결과 확인과 재시작 조작: 모든 기기에서 확실한 터치 크기 확보 */
.cm-aux{min-height:46px;gap:clamp(6px,1.3vw,14px);flex-wrap:wrap}
.cm-restart{min-height:43px;padding:9px clamp(14px,2.5vw,25px);border:2px solid #f1d18b;border-radius:12px;background:linear-gradient(160deg,#263e68,#13294b);box-shadow:0 4px 12px #02091b88;color:#fff1c8;font-size:clamp(14px,1.6vw,18px);font-weight:950;white-space:nowrap;touch-action:manipulation}
.cm-view-result{background:linear-gradient(160deg,#fbdc91,#d59b37);color:#3e2809;border-color:#ffe8af}
#cm-show-result[hidden]{display:none!important}
.cm-status{font-size:clamp(11px,1.25vw,13px);font-weight:750}
.cm-overlay{padding:clamp(7px,2vw,20px)}
.cm-dialog{width:min(480px,100%);padding:clamp(14px,2.5vh,25px) clamp(12px,3vw,24px);max-height:calc(100dvh - 18px);overflow-y:auto;overscroll-behavior:contain;border-radius:21px}
.cm-dialog .cm-trophy{font-size:clamp(30px,5.5vh,54px);line-height:1.15}
.cm-dialog h2{font-size:clamp(23px,4.5vh,34px);margin:6px 0 4px}
.cm-result-message{margin:0 0 13px;color:#e4dbbd;font-size:clamp(12px,1.7vw,15px);font-weight:800}
.cm-dialog-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px;font-size:inherit;text-align:left}
.cm-result-cell{display:flex;align-items:center;justify-content:space-between;min-width:0;gap:4px;min-height:49px;padding:7px 10px;border:1px solid #e5bf7c73;border-radius:10px;background:#0a203ece}
.cm-result-cell span{font-size:clamp(10px,1.6vw,12px);color:#b9c9e8;font-weight:750;white-space:nowrap}
.cm-result-cell strong{font-size:clamp(13px,2.3vw,18px);font-variant-numeric:tabular-nums;color:#ffe4a0;white-space:nowrap}
.cm-dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.cm-action{min-height:60px;width:100%;padding:12px 7px;border:2px solid #e1bd7a;border-radius:13px;font-size:clamp(15px,2.2vw,19px);font-weight:950;line-height:1.2;touch-action:manipulation;box-shadow:0 5px 13px #02091b85}
.cm-secondary{background:linear-gradient(155deg,#315481,#17365f);color:#fff1c8}
.cm-dialog-dismiss{grid-column:1/-1;justify-self:center;width:min(200px,100%);min-height:43px;border-radius:10px;border:1px solid #a2b5d1;background:#10284d;color:#e7f1ff;font-size:14px;font-weight:850}
@media(max-width:720px){.cm-aux{min-height:44px;gap:6px;margin:3px 0}.cm-restart{min-height:42px;padding:8px 14px;font-size:14px;border-radius:10px}.cm-status{font-size:11px}.cm-result-cell{min-height:43px;padding:6px 7px}.cm-dialog-stats{gap:6px}.cm-action{min-height:55px}}
@media(max-height:600px){.cm-dialog{padding:9px 12px}.cm-dialog .cm-trophy{font-size:28px}.cm-dialog h2{font-size:23px;margin:2px 0}.cm-result-message{margin-bottom:7px}.cm-dialog-stats{gap:5px;margin-bottom:9px}.cm-result-cell{min-height:37px;padding:4px 8px}.cm-action{min-height:48px;padding:7px}.cm-dialog-dismiss{min-height:35px}.cm-aux{min-height:42px}}

@media(max-height:430px) and (min-width:480px){
 .cm-dialog{width:min(660px,96vw);padding:7px 14px}
 .cm-dialog .cm-trophy{font-size:20px}
 .cm-dialog h2{font-size:21px;line-height:1;margin:1px 0}
 .cm-result-message{font-size:11px;margin:3px 0 5px}
 .cm-dialog-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:7px}
 .cm-result-cell{min-height:34px;padding:3px 5px;gap:3px}
 .cm-result-cell span{font-size:9px}.cm-result-cell strong{font-size:13px}
 .cm-dialog-actions{gap:6px}
 .cm-action{min-height:46px;font-size:14px;padding:5px}
 .cm-dialog-dismiss{min-height:34px;font-size:11px}
}



/* 선택 표시: 모드·카드 장수 및 현재 펼친 카드를 뚜렷하게 구분한다. */
.cm-step .cm-mode[aria-pressed="true"],.cm-count-choices button[aria-pressed="true"]{
  outline:4px solid #fff1a6;outline-offset:2px;
  box-shadow:inset 0 0 0 2px #fff7d1,0 0 0 6px #8d5fff,0 0 24px #ffd76b99;
  position:relative;z-index:1;
}
.cm-step .cm-mode[aria-pressed="true"]::after,.cm-count-choices button[aria-pressed="true"]::after{
  content:"✓";position:absolute;top:2px;right:6px;color:#fff6d8;font-size:clamp(13px,2vw,20px);
  text-shadow:0 1px 4px #172047,0 0 5px #000;
}
.cm-card.flipped:not(.matched):not(.cm-answer-reveal) .cm-card-front{
  box-shadow:inset 0 0 0 4px #ffeaa5;
}
/* 정답 공개: 각 짝마다 서로 다른 색의 두꺼운 안쪽 테두리와 동일한 짝 번호. */
.cm-card.cm-answer-reveal .cm-card-front{
  box-shadow:inset 0 0 0 clamp(3px,.8vw,7px) hsl(var(--answer-hue,42) 95% 68%),
    inset 0 0 0 clamp(5px,1.1vw,10px) #112143;
}
.cm-answer-badge{
  position:absolute;z-index:5;top:3px;left:3px;
  min-width:42%;padding:3px 5px;border:2px solid hsl(var(--answer-hue,42) 96% 72%);
  border-radius:8px;color:white;background:#081d40ee;box-shadow:0 2px 6px #000c;
  font-size:clamp(11px,2.7cqw,17px);font-weight:1000;line-height:1.2;
  text-shadow:0 1px 2px #000;text-align:center;pointer-events:none;
}
.cm-mirrored .cm-answer-badge{transform:scaleX(-1)}
.cm-card.cm-answer-reveal{cursor:default}
@media(max-width:450px){.cm-answer-badge{min-width:48%;padding:2px 3px;border-width:1.5px;border-radius:5px}}

/* 선택 강조: 화면 전환 전에도 분명하고, 다음 단계에서도 선택 내역이 보인다. */
.cm-step .cm-mode[aria-pressed="true"],.cm-count-choices button[aria-pressed="true"]{
  border:4px solid #fffdea!important;
  outline:3px solid #f1aa16!important;outline-offset:1px!important;
  background:linear-gradient(158deg,#fff0a5,#edab31)!important;
  color:#32200c!important;text-shadow:none!important;
  box-shadow:inset 0 0 0 3px #86500a,0 0 0 6px #ffeec5,0 0 26px 8px #ffc4529c!important;
  transform:scale(1.035);z-index:2;position:relative;
}
.cm-step .cm-mode[aria-pressed="true"] small{color:#53310e}
.cm-step .cm-mode[aria-pressed="true"]::after,.cm-count-choices button[aria-pressed="true"]::after{
  content:"✓";top:3px;right:7px;color:#173054;background:#fffbd4;border:2px solid #ce8618;
  border-radius:50%;width:24px;height:24px;display:grid;place-items:center;
  font-size:17px;font-weight:1000;text-shadow:none;line-height:1;
}
.cm-choice-receipt,.cm-setup-summary{
  padding:10px 19px;border:3px solid #fff2b4;border-radius:15px;
  background:linear-gradient(160deg,#3a2b0e,#1d3158);color:#fff5bb;
  font-weight:950;box-shadow:0 0 0 3px #ad701b,0 0 23px #fac96b88;
}
.cm-choice-receipt{font-size:clamp(13px,2.5vw,19px)}
@media(max-width:410px){.cm-choice-receipt,.cm-setup-summary{padding:7px 10px;border-width:2px}.cm-step .cm-mode[aria-pressed="true"]::after,.cm-count-choices button[aria-pressed="true"]::after{width:20px;height:20px;font-size:14px;right:3px;top:2px}}

/* 확대 중에도 축소 버튼을 항상 상단에 노출하고, 작은 화면에서는 카드판 공간을 확보한다. */
@media(max-width:720px){
 .cm-app.cm-expanded{width:calc(100% - 8px)!important;height:calc(100dvh - 8px)!important;max-height:calc(100dvh - 8px)!important;margin:4px auto!important;padding:4px!important;border-radius:11px}
 .cm-expanded .cm-hero{padding:4px!important}
 .cm-expanded .cm-topline{min-height:32px!important}
 .cm-expanded .cm-controls{width:100%;margin:2px auto}
 .cm-expanded .cm-summary{gap:3px}
 .cm-expanded .cm-stat{min-height:27px}
 .cm-expanded .cm-aux{margin:3px auto!important;gap:5px}
 .cm-expanded .cm-restart{min-height:36px;padding:5px 10px;font-size:12px}
 .cm-expanded .cm-footer{line-height:10px}
 .cm-expanded #cm-expand{min-width:61px;padding:4px 6px}
}
@media(max-height:450px){
 .cm-expanded .cm-aux{min-height:30px}
 .cm-expanded .cm-restart{min-height:30px;padding:3px 9px}
 .cm-expanded .cm-controls{margin:0 auto}
 .cm-expanded .cm-stat{min-height:22px}
}