/* ══════════════════════════════════════════════════════
   웹 크로스핏 MBTI — 앱 화면(테마 ON 라이트) 색·손글씨를 그대로
   ══════════════════════════════════════════════════════ */

.mbti-grid{display:grid;grid-template-columns:1fr minmax(320px,420px);gap:clamp(24px,5vw,72px);align-items:center}
.mbti-intro h2{font-size:clamp(34px,5vw,68px);margin:14px 0 18px}
.mbti-intro .eyebrow{color:var(--deep)}
.mbti-lede{font-size:18px;max-width:46ch;margin:0 0 18px}
.mbti-points{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mbti-points li{padding-left:22px;position:relative;font-weight:500}
.mbti-points li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--ink)}

.mbti-stage{--paper:#F5F2EB;--mink:#0B132B;--msun:#F8C000;--muted:rgba(11,19,43,.55);
  position:relative;min-height:600px;background:#A9E6EE;border-radius:28px;border:2px solid var(--mink);padding:22px 18px 26px;
  font-family:"Gaegu","Noto Sans KR",cursive;color:var(--mink);box-shadow:0 30px 60px -36px rgba(11,19,43,.55);overflow:hidden;scroll-margin-top:24px}
.mbti-stage button{font-family:inherit}
.mb-card{background:var(--paper);border:2px solid var(--mink);border-radius:22px 24px 21px 25px}
.mb-btn{display:block;width:100%;border:2px solid var(--mink);border-radius:16px 14px 17px 15px;background:var(--paper);color:var(--mink);font-weight:700;font-size:18px;padding:12px;cursor:pointer;transition:transform .12s,filter .12s}
.mb-btn:hover{filter:brightness(.97)}
.mb-btn:active{transform:scale(.98)}
.mb-btn.primary{background:repeating-linear-gradient(-58deg,var(--msun) 0 6px,#EDB500 6px 8px);border-color:transparent}
.mb-btn:disabled{opacity:.5;cursor:default}

/* play */
.mb-play{display:flex;flex-direction:column;align-items:center}
.mb-progress{width:100%;display:flex;align-items:center;gap:12px}
.mb-track{flex:1;height:8px;border-radius:4px;background:var(--paper);overflow:hidden}
.mb-track i{display:block;height:100%;background:var(--msun);transition:width .3s}
.mb-count{font-weight:700;font-size:15px;color:var(--muted);min-width:48px;text-align:right}
.mb-question{margin:22px 0 0;min-height:66px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:23px;line-height:31px;white-space:pre-line}
.mb-deck{position:relative;margin-top:16px;width:68%;aspect-ratio:1/1.1}
.mb-deck .mb-back{position:absolute;inset:0}
.mb-back{background:repeating-linear-gradient(-58deg,var(--msun) 0 6px,#EDB500 6px 8px);display:grid;place-items:center}
.mb-back span{font-weight:700;font-size:96px;color:var(--mink);opacity:.85}
.mb-swipe{position:absolute;inset:0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.mb-swipe.grab{cursor:grabbing}
.mb-swipe:focus-visible .mb-face{box-shadow:0 0 0 3px var(--mink)}
.mb-tilt{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}
.mb-face,.mb-cover{position:absolute;inset:0;overflow:hidden}
.mb-cover{pointer-events:none}
.mb-art{position:absolute;inset:8px}
.mb-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.mb-art img.l,.mb-art img.r{opacity:0}
.mb-band{position:absolute;top:0;left:0;right:0;height:30%;background:rgba(0,0,0,.55);opacity:0;pointer-events:none}
.mb-band span{position:absolute;top:14px;font-weight:700;font-size:16px;line-height:21px;color:#fff;white-space:pre-line;opacity:0}
.mb-band .bl{left:14%;right:12px;text-align:right}
.mb-band .br{left:12px;right:14%;text-align:left}
.mb-finger{position:absolute;left:50%;top:58%;width:30%;margin-left:-15%;pointer-events:none;opacity:0;transition:opacity .3s;z-index:3}
.mb-swipe.coaching .mb-finger{opacity:1}

/* 튜토리얼(앱 첫 진입 안내) — 딤 위로 카드 · 호 화살표 · 안내 문구만 */
.mbti-stage.coach-on{cursor:pointer}
.mb-dim{position:absolute;inset:0;background:rgba(0,0,0,.62);z-index:5;border-radius:inherit}
.coach-on .mb-deck,.coach-on .mb-coach-cap{position:relative;z-index:6}
.coach-on .mb-swipe{cursor:pointer}
.mb-arc{position:absolute;left:10%;width:80%;top:-11%;z-index:4;pointer-events:none}
.mb-coach-cap{margin-top:46px;text-align:center;color:#fff;padding:0 8px}
.mb-coach-title{margin:0;font-weight:700;font-size:20px;line-height:27px}
.mb-coach-tap{margin:6px 0 0;font-size:15px;color:rgba(255,255,255,.75)}
.coach-on .mb-hint,.coach-on .mb-undo{visibility:hidden}
.mb-hint{margin:18px 0 0;font-size:15px;color:var(--muted)}
.mb-undo{margin-top:6px;border:0;background:none;font-weight:700;font-size:16px;color:var(--mink);cursor:pointer;padding:6px 12px}
.mb-undo:disabled{opacity:.35;cursor:default}

/* result */
.mb-result{display:flex;flex-direction:column;gap:10px}
.mb-r-label{margin:0;text-align:center;font-size:17px;color:var(--muted)}
.mb-hero{padding:16px 16px 18px;display:flex;flex-direction:column;align-items:center;text-align:center}
.mb-hero-art{width:78%;aspect-ratio:1;object-fit:contain}
.mb-r-type{font-weight:700;font-size:48px;line-height:58px;color:#d39b00;letter-spacing:2px;-webkit-text-stroke:.5px rgba(11,19,43,.25)}
.mb-r-name{font-weight:700;font-size:28px;line-height:36px}
.mb-r-tag{font-size:17px;color:rgba(11,19,43,.68)}
.mb-desc{position:relative;padding:18px 20px;min-height:150px;overflow:hidden}
.mb-blur{filter:blur(6px);opacity:.75;user-select:none;-webkit-user-select:none;pointer-events:none}
.mb-blur p{margin:0 0 6px;font-size:16px;line-height:24px}
.mb-blur .tr{font-weight:700;color:rgba(11,19,43,.68)}
.mb-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;padding:12px 24px;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(11,19,43,.6)}
.mb-lock:active{transform:translate(-50%,-50%) scale(.98)}
.mb-partners{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb-partner{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;cursor:pointer;color:var(--mink);transition:transform .15s}
.mb-partner:hover{transform:translateY(-3px)}
.mb-p-label{font-weight:700;font-size:15px;color:rgba(11,19,43,.68)}
.mb-p-art{width:80%;aspect-ratio:1;object-fit:contain}
.mb-p-type{font-weight:700;font-size:24px;color:#d39b00}
.mb-p-name{font-weight:700;font-size:16px;text-align:center}

/* share dialog */
.mb-share{border:0;padding:0;background:transparent;max-width:min(360px,94vw);width:100%}
.mb-share::backdrop{background:rgba(0,0,0,.45)}
.mb-share-box{background:#A9E6EE;border:2px solid #0B132B;border-radius:22px;padding:18px;display:grid;gap:12px;font-family:"Gaegu",cursive;color:#0B132B}
.mb-share-head{position:relative;text-align:center}
.mb-share-head h3{margin:0;font-family:"Gaegu",cursive;font-weight:700;font-size:22px;text-transform:none}
.mb-share-x{position:absolute;right:0;top:0;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;cursor:pointer}
.mb-share-prev{width:min(280px,100%);aspect-ratio:9/16;margin:0 auto;display:grid;place-items:center;background:#F7F3E8;border-radius:8px;overflow:hidden}
.mb-share-img{width:100%;height:100%;object-fit:contain}
.mb-share-status{color:rgba(11,19,43,.55)}
.mb-share-box .mb-btn{--paper:#F5F2EB;--mink:#0B132B;--msun:#F8C000;font-family:"Gaegu",cursive}

/* install QR dialog (qr.js) */
.qr-dlg{border:0;padding:0;background:transparent;max-width:min(400px,94vw);width:100%}
.qr-dlg::backdrop{background:rgba(11,19,43,.6)}
.qr-box{position:relative;background:var(--ink);color:var(--sand);border-radius:24px;padding:30px 26px 26px;text-align:center;border:1px solid var(--ink-line)}
.qr-x{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(245,242,235,.12);color:var(--sand);cursor:pointer;font-size:14px}
.qr-title{font-size:22px;margin:0 0 6px}
.qr-sub{margin:0 0 10px;color:var(--sun);font-weight:700;font-size:15px}
.qr-img{width:220px;height:220px;margin:12px auto 14px;display:block;background:#fff;border-radius:16px;padding:10px}
.qr-note{margin:0 0 18px;font-size:14px;color:rgba(245,242,235,.75)}
.qr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr-btn{display:block;text-decoration:none;font:800 13px var(--display);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:12px}
.qr-btn.ios{background:var(--sun);color:var(--ink)}
.qr-btn.and{color:var(--sand);box-shadow:inset 0 0 0 1.5px var(--sand)}

@media (max-width:860px){
  .mbti-grid{grid-template-columns:1fr}
  .mbti-stage{min-height:560px}
}