/* ==========================================================================
   스트레칭 챌린지 - 스타일 (16:9 가로 · 50:50 분할 · 각 패널 1:1)
   GPU 합성 부담을 줄이기 위해 blur / backdrop-filter / will-change 사용 안 함
   ========================================================================== */
:root {
  --u: min(1vw, calc(100vh * .017778));          /* 스테이지 가로 1% (16:9 맞춤) */
  --ivory: #fbf7f0; --cream: #f3eadb; --sand: #e9dcc6;
  --gold: #b98f4a; --gold-l: #e4cf9f; --gold-d: #8a6a2f;
  --rose: #ecb3bd; --rose-d: #d4707f; --sage: #a7cdb6; --lilac: #cdbfe6;
  --ink: #3a2e2a; --ink2: #7a6a60;
  --ok: #2fb783; --warn: #f0a93b; --bad: #e8657a;
  --font: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}
@supports (height: 100dvh) { :root { --u: min(1vw, calc(100dvh * .017778)); } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f6efe4; color: var(--ink); font-family: var(--font); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
body { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fbf3e6 0%, #f4e6e4 55%, #eaf0e8 100%); }
button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
[hidden] { display: none !important; }

/* ---------- 스테이지 ---------- */
.stage {
  position: relative;
  width: calc(var(--u) * 100); height: calc(var(--u) * 56.25);
  display: grid; grid-template-columns: 50% 50%; grid-template-rows: 7.4% 88.89% 3.71%;
  background: var(--ivory); overflow: hidden;
  font-size: calc(var(--u) * 1.5);
  box-shadow: 0 0 0 1px var(--gold-l);
}
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--u) * 1.1);
  padding: 0 calc(var(--u) * 1.2); background: linear-gradient(180deg, #fffaf1, #f6ecdc); border-bottom: 1px solid var(--gold-l); min-width: 0; }
.botbar { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  padding: 0 calc(var(--u) * 1.2); background: #f6ecdc; border-top: 1px solid var(--gold-l); font-size: calc(var(--u) * 1.15); color: var(--ink2); min-width: 0; }

.brand { display: flex; align-items: center; gap: calc(var(--u) * .5); white-space: nowrap; font-size: calc(var(--u) * 1.7); letter-spacing: -.02em; }
.brand-img { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); object-fit: cover; display: block; }
.brand b { background: linear-gradient(90deg, var(--gold-d), var(--rose-d)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spacer { flex: 1; }

.seg { display: flex; align-items: center; gap: calc(var(--u) * .3); padding: calc(var(--u) * .3); background: #efe4d1; border-radius: 999px; }
.seg-label { font-size: calc(var(--u) * 1.05); color: var(--ink2); padding: 0 calc(var(--u) * .5) 0 calc(var(--u) * .7); white-space: nowrap; }
.seg-btn { padding: calc(var(--u) * .55) calc(var(--u) * 1.3); border-radius: 999px; background: transparent; font-size: calc(var(--u) * 1.3); font-weight: 600; color: var(--ink2); white-space: nowrap; }
.seg-btn.on { background: linear-gradient(135deg, #fff, #fbeee0); color: var(--gold-d); box-shadow: 0 1px 3px rgba(120, 90, 40, .25); }
.seg-person .seg-btn { padding: calc(var(--u) * .55) calc(var(--u) * 1); min-width: calc(var(--u) * 2.4); }
.stage[data-gender="male"] .seg-btn[data-gender="male"] { background: linear-gradient(135deg, #fff, #e8eefb); color: #4a68a8; }

.stat { font-size: calc(var(--u) * 1.5); white-space: nowrap; }
.stat b { font-size: calc(var(--u) * 1.9); color: var(--gold-d); font-variant-numeric: tabular-nums; }
.stat-k { font-size: calc(var(--u) * 1.05); color: var(--ink2); letter-spacing: .08em; }
.ico-btn { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--gold-l); font-size: calc(var(--u) * 1.6); display: grid; place-items: center; padding: 0; }
.ico-btn.txt { width: auto; padding: 0 calc(var(--u) * 1.1); border-radius: 999px; font-size: calc(var(--u) * 1.1); color: var(--ink2); }
.ico-btn:active, .seg-btn:active { transform: scale(.94); }

/* ---------- 패널 (정사각형 1:1) ---------- */
.panel { position: relative; overflow: hidden; background: var(--cream); min-width: 0; min-height: 0; }
.panel-model { border-right: calc(var(--u) * .15) solid var(--gold-l); }
.panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 모델 포스터 (카메라 시작 전) */
.poster { position: absolute; inset: 0; background: var(--cream); }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-text { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 2);
  background: linear-gradient(0deg, rgba(58, 46, 42, .62), rgba(58, 46, 42, 0)); color: #fff; }
.poster-title { font-size: calc(var(--u) * 2.8); font-weight: 800; letter-spacing: -.02em; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.poster-sub { font-size: calc(var(--u) * 1.4); opacity: .92; margin-top: calc(var(--u) * .3); }

.chip { position: absolute; left: calc(var(--u) * 1.2); top: calc(var(--u) * 1.2); display: flex; align-items: center; gap: calc(var(--u) * .8);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.5) calc(var(--u) * .6) calc(var(--u) * .6); border-radius: 999px; background: rgba(255, 252, 246, .92); box-shadow: 0 1px 6px rgba(80, 60, 30, .25); font-size: calc(var(--u) * 1.5); font-weight: 700; }
.chip b { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--rose-d)); color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 1.5); }
.tipbar { position: absolute; left: calc(var(--u) * 1.2); right: calc(var(--u) * 1.2); bottom: calc(var(--u) * 1.2); padding: calc(var(--u) * .9) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.2); background: rgba(255, 252, 246, .92); font-size: calc(var(--u) * 1.45); text-align: center; box-shadow: 0 1px 6px rgba(80, 60, 30, .2); }
.ready-card {
  position: absolute;
  right: calc(var(--u) * 2);
  bottom: calc(var(--u) * 2);
  left: auto;
  top: auto;
  transform: none;
  width: 50%;
  text-align: center;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.5);
  border-radius: calc(var(--u) * 2);
  background: rgba(255, 251, 243, .94);
  box-shadow: 0 4px 24px rgba(80, 60, 30, .3);
  border: 2px solid var(--gold-l);
}
.ready-k { font-size: calc(var(--u) * 1.0); letter-spacing: .25em; color: var(--gold-d); font-weight: 700; }
.ready-name { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2); font-weight: 800; margin: calc(var(--u) * .5) 0; letter-spacing: -.02em; }
.ready-tip { font-size: calc(var(--u) * 1.0); color: var(--ink2); line-height: 1.4; }

/* 시작 카드 (우측 패널 중앙) */
.start-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2.5); text-align: center; background: linear-gradient(160deg, rgba(255, 250, 241, .96), rgba(249, 232, 232, .96)); }
.daily { font-size: calc(var(--u) * 1.6); color: var(--gold-d); font-weight: 700; line-height: 1.4; }
.nick { display: flex; align-items: center; gap: calc(var(--u) * .8); font-size: calc(var(--u) * 1.3); color: var(--ink2); }
.nick input { width: calc(var(--u) * 16); padding: calc(var(--u) * .8) calc(var(--u) * 1.2); border-radius: 999px; border: 1px solid var(--gold-l); background: #fff; font-size: calc(var(--u) * 1.5); text-align: center; user-select: text; -webkit-user-select: text; outline: none; }
.cam-btn { width: 88%; padding: calc(var(--u) * 2.6) calc(var(--u) * 1.5); border-radius: calc(var(--u) * 2.6); color: #fff;
  background: linear-gradient(135deg, #c9a15a 0%, #d98c97 100%); box-shadow: 0 6px 0 #a47d3f, 0 10px 24px rgba(160, 110, 60, .35);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); }
.cam-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a47d3f, 0 4px 12px rgba(160, 110, 60, .3); }
.cam-ico { font-size: calc(var(--u) * 6); line-height: 1; }
.cam-txt { font-size: calc(var(--u) * 2.4); font-weight: 800; letter-spacing: -.02em; }
.cam-warn { margin: 0; font-size: calc(var(--u) * 1.3); color: #a8552e; font-weight: 600; line-height: 1.4; }
.cam-err { margin: 0; font-size: calc(var(--u) * 1.3); color: var(--bad); font-weight: 700; line-height: 1.4; }
.link-btn { background: none; color: var(--ink2); font-size: calc(var(--u) * 1.4); text-decoration: underline; text-underline-offset: 3px; padding: calc(var(--u) * .6); }
.link-btn small { display: block; text-decoration: none; font-size: calc(var(--u) * 1.05); color: var(--gold-d); }

/* HUD */
.hud { position: absolute; inset: 0; pointer-events: none; }
.match { position: absolute; right: calc(var(--u) * 1.2); top: calc(var(--u) * 1.2); width: calc(var(--u) * 14); padding: calc(var(--u) * .9) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1.4); background: rgba(255, 252, 246, .93); box-shadow: 0 1px 6px rgba(80, 60, 30, .25); text-align: center; }
.match-k { font-size: calc(var(--u) * 1.1); letter-spacing: .15em; color: var(--ink2); }
.match-v b { font-size: calc(var(--u) * 4.4); line-height: 1; font-variant-numeric: tabular-nums; color: var(--bad); }
.match-v small { font-size: calc(var(--u) * 1.6); color: var(--ink2); margin-left: 2px; }
.match.warn .match-v b { color: var(--warn); } .match.ok .match-v b { color: var(--ok); }
.match-bar { position: relative; height: calc(var(--u) * .9); border-radius: 99px; background: #eadfcd; margin-top: calc(var(--u) * .6); overflow: visible; }
.match-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--bad), var(--warn), var(--ok)); }
.match-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.hold { position: absolute; left: calc(var(--u) * 1.2); top: calc(var(--u) * 1.2); width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: rgba(255, 252, 246, .9); box-shadow: 0 1px 6px rgba(80, 60, 30, .25); }
.hold svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hold-bg { fill: none; stroke: #eadfcd; stroke-width: 9; }
.hold-fg { fill: none; stroke: var(--ok); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 263.9; stroke-dashoffset: 263.9; }
.hold-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hold-txt b { font-size: calc(var(--u) * 3.6); line-height: 1; }
.hold-txt small { font-size: calc(var(--u) * 1); letter-spacing: .2em; color: var(--ink2); }
.hold.on .hold-txt b { color: var(--ok); }
.timer { position: absolute; right: calc(var(--u) * 1.2); top: calc(var(--u) * 11.6); padding: calc(var(--u) * .3) calc(var(--u) * 1.1); border-radius: 99px; background: rgba(255, 252, 246, .9); font-size: calc(var(--u) * 1.2); color: var(--ink2); font-variant-numeric: tabular-nums; }
.status { position: absolute; left: calc(var(--u) * 1.2); right: calc(var(--u) * 1.2); bottom: calc(var(--u) * 1.2); padding: calc(var(--u) * .9) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.2); background: rgba(58, 46, 42, .78); color: #fff; text-align: center; font-size: calc(var(--u) * 1.5); font-weight: 600; }
.status:empty { display: none; }

.count-big { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--u) * 22); font-weight: 900; color: #fff;
  text-shadow: 0 3px 0 var(--gold), 0 0 24px rgba(0, 0, 0, .35); pointer-events: none; animation: pulse .9s ease-out; }
.count-big.go { font-size: calc(var(--u) * 12); }
.pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 7); font-weight: 900; color: #fff;
  text-shadow: 0 3px 0 var(--ok), 0 0 20px rgba(0, 0, 0, .35); pointer-events: none; animation: rise 1.5s ease-out forwards; text-align: center; white-space: nowrap; }
.pop small { display: block; font-size: calc(var(--u) * 2); text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
@keyframes pulse { 0% { transform: scale(1.5); opacity: 0 } 25% { opacity: 1 } 100% { transform: scale(1); opacity: .95 } }
@keyframes rise { 0% { transform: translate(-50%, -20%) scale(.6); opacity: 0 } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1 } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0 } }

/* 하단 진행바 */
.steps { display: flex; gap: calc(var(--u) * .35); flex: 0 0 auto; }
.steps i { width: calc(var(--u) * 2.6); height: calc(var(--u) * .8); border-radius: 99px; background: #e3d6bf; }
.steps i.cur { background: var(--gold); } .steps i.done { background: var(--sage); } .steps i.hit { background: var(--ok); } .steps i.miss { background: var(--rose); }
.botmsg { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* ---------- 오버레이/카드 ---------- */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(251, 247, 240, .93); z-index: 20; padding: calc(var(--u) * 1.5); }
.card { background: #fffdf8; border-radius: calc(var(--u) * 2.4); box-shadow: 0 8px 40px rgba(120, 90, 40, .22); border: 1px solid var(--gold-l); text-align: center; }
.login-card { width: calc(var(--u) * 40); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.1); }
.login-card h1 { margin: 0; font-size: calc(var(--u) * 3); letter-spacing: -.03em; }
.login-ico { font-size: calc(var(--u) * 5); line-height: 1; }
.login-badge { margin: 0; padding: calc(var(--u) * .4) calc(var(--u) * 1.4); border-radius: 99px; background: linear-gradient(135deg, var(--gold), var(--rose-d)); color: #fff; font-size: calc(var(--u) * 1.3); font-weight: 700; }
.phone { display: flex; flex-direction: column; gap: calc(var(--u) * .6); width: 100%; font-size: calc(var(--u) * 1.3); color: var(--ink2); }
.phone input { width: 100%; padding: calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1.4); border: 2px solid var(--gold-l); background: #fff; font-size: calc(var(--u) * 2.4); text-align: center; letter-spacing: .08em; user-select: text; -webkit-user-select: text; outline: none; }
.phone input:focus { border-color: var(--gold); }
.primary { width: 100%; padding: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.6); color: #fff; font-size: calc(var(--u) * 2); font-weight: 800; background: linear-gradient(135deg, #c9a15a, #d98c97); box-shadow: 0 4px 0 #a47d3f; }
.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #a47d3f; }
.primary:disabled { opacity: .6; }
.ghost { padding: calc(var(--u) * 1.1) calc(var(--u) * 2); border-radius: calc(var(--u) * 1.6); background: #fff; box-shadow: 0 0 0 1px var(--gold-l); font-size: calc(var(--u) * 1.6); color: var(--ink2); font-weight: 600; }
.login-err { margin: 0; color: var(--bad); font-size: calc(var(--u) * 1.4); font-weight: 700; line-height: 1.4; }
.signup-link { color: var(--gold-d); font-weight: 800; font-size: calc(var(--u) * 1.8); text-decoration: none; padding: calc(var(--u) * .9) calc(var(--u) * 2); border-radius: 99px; background: #f6ecdc; }
.login-note { margin: 0; font-size: calc(var(--u) * 1.1); color: var(--ink2); }

.result-card { width: calc(var(--u) * 52); max-height: 96%; padding: calc(var(--u) * 2) calc(var(--u) * 3); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8); overflow: auto; }
.res-medal { font-size: calc(var(--u) * 5); line-height: 1; }
.result-card h2 { margin: 0; font-size: calc(var(--u) * 2.4); }
.res-score b { font-size: calc(var(--u) * 7); line-height: 1; background: linear-gradient(90deg, var(--gold-d), var(--rose-d)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res-score small { font-size: calc(var(--u) * 2); color: var(--ink2); margin-left: 4px; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .8); width: 100%; }
.res-grid div { padding: calc(var(--u) * .8); border-radius: calc(var(--u) * 1.2); background: #f8f0e2; display: flex; flex-direction: column; gap: 2px; }
.res-grid span { font-size: calc(var(--u) * 1.05); color: var(--ink2); } .res-grid b { font-size: calc(var(--u) * 1.9); }
.res-msg { margin: 0; font-size: calc(var(--u) * 1.6); line-height: 1.5; font-weight: 600; color: var(--gold-d); }
.res-save { margin: 0; font-size: calc(var(--u) * 1.1); color: var(--ink2); min-height: 1.3em; }
.res-rank { width: 100%; font-size: calc(var(--u) * 1.2); color: var(--ink2); }
.res-btns { display: flex; gap: calc(var(--u) * 1); width: 100%; } .res-btns .primary { flex: 1; font-size: calc(var(--u) * 1.8); } .res-btns .ghost { flex: 1; }

.rank-card { width: calc(var(--u) * 40); max-height: 96%; padding: calc(var(--u) * 2) calc(var(--u) * 2.4); display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.rank-card h2 { margin: 0; font-size: calc(var(--u) * 2.2); }
.tabs { display: flex; gap: calc(var(--u) * .6); justify-content: center; } .tabs button { padding: calc(var(--u) * .6) calc(var(--u) * 2); border-radius: 99px; background: #f1e6d3; font-size: calc(var(--u) * 1.4); font-weight: 700; color: var(--ink2); } .tabs button.on { background: var(--gold); color: #fff; }
.rank-list { list-style: none; margin: 0; padding: 0; overflow: auto; display: flex; flex-direction: column; gap: calc(var(--u) * .5); text-align: left; }
.rank-list li { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .7) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.2); background: #f8f0e2; font-size: calc(var(--u) * 1.5); }
.rank-list li.me { background: #fbe3e6; box-shadow: 0 0 0 2px var(--rose); }
.rank-list li i { width: calc(var(--u) * 2.4); font-style: normal; font-weight: 800; color: var(--gold-d); text-align: center; }
.rank-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-list li b { font-variant-numeric: tabular-nums; }
.rank-empty { text-align: center; color: var(--ink2); padding: calc(var(--u) * 2); font-size: calc(var(--u) * 1.4); }

.toast { position: absolute; left: 50%; top: 9.5%; transform: translateX(-50%); z-index: 30; padding: calc(var(--u) * .9) calc(var(--u) * 2); border-radius: 99px; background: rgba(58, 46, 42, .9); color: #fff; font-size: calc(var(--u) * 1.4); max-width: 90%; text-align: center; }

/* ---------- 세로 모드 안내 ---------- */
.rotate-overlay { position: fixed; inset: 0; z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center;
  background: linear-gradient(160deg, #fbf3e6, #f4e1e4); color: var(--ink); }
.rot-phone { width: 64px; height: 108px; border: 5px solid var(--gold); border-radius: 14px; position: relative; animation: rot 2.4s ease-in-out infinite; }
.rot-phone i { position: absolute; left: 50%; bottom: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--gold-l); }
@keyframes rot { 0%, 15% { transform: rotate(0) } 55%, 100% { transform: rotate(-90deg) } }
.rot-title { font-size: 24px; font-weight: 800; } .rot-sub { font-size: 14px; color: var(--ink2); }
@media (orientation: portrait) { .rotate-overlay { display: flex; } .stage { visibility: hidden; } }

.hidden-media { position: fixed; left: -9999px; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.hidden-media video { width: 2px; height: 2px; }

@media (prefers-reduced-motion: reduce) { .count-big, .pop, .rot-phone { animation-duration: .01s; } }

/* NEW 뱃지 (새로 추가된 영상) */
.new-badge { font-style: normal; font-size: calc(var(--u) * 1.1); font-weight: 800; letter-spacing: .08em; color: #fff; padding: calc(var(--u) * .25) calc(var(--u) * .8); border-radius: 99px; background: linear-gradient(135deg, #ef6f7e, #f0a93b); }


.login-ico-img { width: calc(var(--u) * 10); height: calc(var(--u) * 8); object-fit: cover; display: block; }