:root { --bs: var(--kit-btn-scale, 1); --ink: #2f3550; --muted: #7a809c; --line: #ece8f4; --acc: #8b7cf6; --acc2: #ff8fb8; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--ink); word-break: keep-all; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(ellipse 60% 40% at 0% 0%, #ffe3ee 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 100% 10%, #dff0ff 0%, transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, #e3f8ec 0%, transparent 70%), #fffaf3; background-attachment: fixed; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; max-width: 760px; margin: 0 auto; }
.brand { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.5px; }
.brand .b1 { color: var(--acc2); } .brand .b2 { color: var(--acc); }
body.playing .top { display: none; }

.view { max-width: 640px; margin: 0 auto; padding: 8px 16px calc(28px + env(safe-area-inset-bottom)); }

/* 버튼 (버튼 크기 설정 --kit-btn-scale 을 따름) */
.big { min-height: calc(52px * var(--bs)); padding: calc(12px * var(--bs)) calc(18px * var(--bs)); border-radius: calc(16px * var(--bs)); border: 0; font-weight: 900; font-size: calc(17px * var(--bs)); color: #fff; background: linear-gradient(135deg, var(--acc2), var(--acc)); box-shadow: 0 8px 20px rgba(139, 124, 246, .28); cursor: pointer; transition: transform .1s; }
.big:active { transform: scale(.97); }
.big:disabled { opacity: .5; cursor: default; }
.big.ghost { background: #fff; color: var(--acc); border: 1.5px solid var(--line); box-shadow: 0 4px 12px rgba(120, 110, 170, .1); }
.mini { min-height: calc(38px * var(--bs)); padding: calc(7px * var(--bs)) calc(14px * var(--bs)); border-radius: calc(12px * var(--bs)); border: 1.5px solid var(--line); background: #fff; font-weight: 800; font-size: calc(14px * var(--bs)); color: var(--muted); cursor: pointer; }
.mini.gold { border: 0; color: #5a3a00; background: linear-gradient(135deg, #ffe08a, #ffc24b); font-size: calc(12px * var(--bs)); min-height: calc(30px * var(--bs)); padding: calc(4px * var(--bs)) calc(10px * var(--bs)); }

/* 처음 화면 */
.hero { text-align: center; padding: 6px 0 10px; }
.logo { width: min(260px, 70vw); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(139, 124, 246, .18)); }
.logo .ln1 { animation: fallN 1.6s linear infinite; } .logo .ln2 { animation: fallN 1.6s linear infinite -.4s; } .logo .ln3 { animation: fallN 1.6s linear infinite -.8s; } .logo .ln4 { animation: fallN 1.6s linear infinite -1.2s; }
@keyframes fallN { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(54px); opacity: 0; } }
.title { margin: 10px 0 4px; font-size: 34px; font-weight: 900; letter-spacing: -1px; background: linear-gradient(90deg, var(--acc2), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.menu { display: grid; gap: 10px; max-width: 420px; margin: 16px auto 0; }
.menu .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.how { margin: 22px auto 0; max-width: 520px; padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(120, 110, 170, .08); }
.how h3 { margin: 0 0 6px; font-size: 16px; }
.how-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 14px; line-height: 1.55; color: #4a5070; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; margin: 0 1px; border-radius: 6px; border: 1px solid #d9d4ea; border-bottom-width: 2.5px; background: #faf9ff; font: 800 12px/1.6 inherit; text-align: center; }
.j-p { color: #ff5e92; font-weight: 900; } .j-g { color: #3b9de0; font-weight: 900; } .j-b { color: #d08b10; font-weight: 900; } .j-m { color: #8a90a8; font-weight: 900; }
.fine { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; line-height: 1.5; }

/* 노래 고르기 */
.songs-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 6px 0 4px; }
.seg { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: calc(14px * var(--bs)); background: #f3f0ff; }
.seg button { border: 0; background: transparent; padding: calc(8px * var(--bs)) calc(14px * var(--bs)); border-radius: calc(11px * var(--bs)); font-weight: 800; font-size: calc(14px * var(--bs)); color: var(--muted); cursor: pointer; }
.seg button.on { background: #fff; color: var(--acc); box-shadow: 0 2px 8px rgba(60, 50, 110, .12); }
.sg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 2px 8px; font-size: 15px; }
.sg-list { display: grid; gap: 8px; }
.song { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: calc(64px * var(--bs)); padding: calc(10px * var(--bs)) 14px; border-radius: 18px; border: 1.5px solid var(--line); border-left: 5px solid var(--sc); background: #fff; text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(120, 110, 170, .07); transition: transform .1s; overflow: hidden; }
.song:active { transform: scale(.985); }
.s-ic { display: grid; place-items: center; }
.s-tx { display: grid; gap: 2px; min-width: 0; }
.s-tx b { font-size: calc(16px * var(--bs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-tx small { color: var(--muted); font-size: 12.5px; }
.s-lv { display: flex; align-items: center; gap: 6px; }
.s-lv em { font-style: normal; font-weight: 900; font-size: 13px; color: var(--acc); background: #f3f0ff; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.rk { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; font-size: 13px; color: #fff; background: var(--rc); }
.rk.none { background: #f0eef6; color: #b5b9cc; }
.fcb { font-style: normal; font-size: 10px; font-weight: 900; color: #c98200; background: #fff1c2; padding: 2px 5px; border-radius: 6px; }
.song.locked { opacity: .72; }
.song.locked .s-ic, .song.locked .s-tx { filter: grayscale(.7); }
.s-lock { position: absolute; right: 10px; top: 6px; font-size: 11px; font-weight: 800; color: #c98200; background: #fff6d6; padding: 1px 7px; border-radius: 99px; }

/* 게임 화면 */
#play { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #fffaf3; touch-action: none; user-select: none; -webkit-user-select: none; }
#safeProbe { position: absolute; left: 0; bottom: 0; width: 1px; height: env(safe-area-inset-bottom, 0px); visibility: hidden; pointer-events: none; }
#cv { position: absolute; inset: 0; display: block; touch-action: none; }
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left)); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-btn { flex: none; display: grid; place-items: center; width: calc(40px * var(--bs)); height: calc(40px * var(--bs)); border-radius: 50%; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .85); color: var(--muted); cursor: pointer; box-shadow: 0 3px 10px rgba(60, 50, 110, .1); }
.hud-btn svg { width: calc(18px * var(--bs)); height: calc(18px * var(--bs)); }
.hud-mid { flex: 1; min-width: 0; display: grid; gap: 5px; pointer-events: none; }
.hud-mid b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 9px; justify-self: start; max-width: 100%; border-radius: 99px; background: rgba(255, 255, 255, .8); }
.prog { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .7); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(139, 124, 246, .15); }
.prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc2), var(--acc)); border-radius: 99px; }
.hud-score { flex: none; display: grid; justify-items: end; padding: 4px 10px; border-radius: 14px; background: rgba(255, 255, 255, .85); pointer-events: none; min-width: 92px; }
.hud-score b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hud-score small { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.live { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: calc(64px + env(safe-area-inset-top)); width: 150px; display: grid; gap: 4px; pointer-events: none; }
.lv { position: relative; display: grid; grid-template-columns: 16px 1fr auto; gap: 5px; align-items: center; padding: 4px 8px 6px; border-radius: 10px; background: rgba(255, 255, 255, .85); font-size: 12px; overflow: hidden; border-left: 3px solid var(--pc); }
.lv span { font-weight: 900; color: var(--muted); }
.lv b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--pc); }
.lv.me { background: #fff; box-shadow: 0 0 0 2px var(--pc); }
.count { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 84px; font-weight: 900; color: #fff; -webkit-text-stroke: 3px var(--acc); text-shadow: 0 8px 24px rgba(139, 124, 246, .35); pointer-events: none; animation: pop .5s ease-out; }
.count[data-n="0"] { font-size: 56px; -webkit-text-stroke-color: var(--acc2); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(1.3); opacity: .4; } }
.taphint { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; border: 0; background: #2f3550; color: #fff; font-weight: 800; font-size: 14px; }

/* 결과 */
#result { display: grid; place-items: start center; }
.res-card { width: 100%; max-width: 480px; margin-top: 6px; padding: 20px 18px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 50px rgba(120, 110, 170, .14); display: grid; gap: 14px; animation: kitUp .25s ease-out; }
@keyframes kitUp { from { transform: translateY(14px); opacity: 0; } }
.res-top { display: flex; gap: 16px; align-items: center; }
.res-rank { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--rc) 25%, #fff)); border: 4px solid var(--rc); box-shadow: 0 8px 22px color-mix(in srgb, var(--rc) 35%, transparent); }
.res-rank b { font-size: 40px; font-weight: 900; color: var(--rc); letter-spacing: -2px; }
.res-info { display: grid; gap: 2px; min-width: 0; }
.res-info small { color: var(--muted); font-weight: 700; font-size: 13px; }
.res-score { font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; min-height: 4px; }
.badge { font-size: 12px; font-weight: 900; padding: 3px 9px; border-radius: 99px; }
.badge.fc { background: #fff1c2; color: #b87400; }
.badge.rec { background: #ffe0ea; color: #d23a6a; }
.res-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-stats div, .res-cnt div { padding: 10px; border-radius: 14px; background: #faf9fd; border: 1px solid var(--line); text-align: center; }
.res-stats small, .res-cnt small { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.res-stats b { font-size: 22px; font-weight: 900; }
.res-cnt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.res-cnt b { font-size: 18px; font-weight: 900; }
.c-perfect b { color: #ff5e92; } .c-good b { color: #3b9de0; } .c-bad b { color: #d08b10; } .c-miss b { color: #8a90a8; }
.res-rank-list ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.res-rank-list li { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 14px; background: #faf9fd; border: 1px solid var(--line); border-left: 4px solid var(--pc); font-size: 14px; }
.res-rank-list li.me { background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 50%, transparent); }
.res-rank-list .pl { font-weight: 900; color: var(--acc); }
.res-rank-list b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-rank-list .ps { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.res-rank-list .pg { font-weight: 900; color: #c98200; font-size: 13px; }
.res-rank-list .wait { margin: 0; text-align: center; color: var(--muted); padding: 10px; }
.res-gold { margin: 0; text-align: center; font-weight: 800; color: #8a6200; }
.res-gold b { font-size: 20px; color: #c98200; }
.res-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 대기실 설정 · 설정 창 */
.ls-info { font-size: 14px; line-height: 1.6; color: var(--muted); }
.ls-info b { color: var(--ink); font-size: 16px; }
.kit-seg button.on { background: #fff; color: var(--acc); box-shadow: 0 2px 8px rgba(60, 50, 110, .12); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: calc(38px * var(--bs)); height: calc(38px * var(--bs)); border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: calc(20px * var(--bs)); font-weight: 900; color: var(--acc); cursor: pointer; }
.stepper b { min-width: 64px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.set-note { margin: -4px 0 8px; line-height: 1.5; }
#calBtn { width: 100%; margin-bottom: 4px; }
.cal-pad { --p: 0; display: grid; place-items: center; width: calc(150px * var(--bs)); height: calc(150px * var(--bs)); margin: 14px auto; border-radius: 50%; border: 4px solid #b9acff; background: radial-gradient(circle, color-mix(in srgb, #ff8fb8 calc(var(--p) * 100%), #fff) 0%, #fff 75%); transform: scale(calc(1 + var(--p) * .08)); font-weight: 900; font-size: 18px; color: var(--acc); cursor: pointer; touch-action: manipulation; }
.cal-pad.done { border-color: #5fdca0; }

/* 휴대폰 가로 */
@media (max-height: 500px) and (orientation: landscape) {
  .view { max-width: 900px; }
  #home { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
  #home .hero { grid-row: span 2; }
  #home .menu { margin-top: 6px; }
  #home .how { grid-column: 1 / -1; }
  #home .fine { grid-column: 1 / -1; }
  .logo { width: min(200px, 34vw); }
  .title { font-size: 28px; }
  .count { font-size: 64px; }
  .live { top: calc(54px + env(safe-area-inset-top)); width: 140px; }
  .res-card { max-width: 760px; grid-template-columns: 1fr 1fr; align-items: start; }
  .res-card > .res-top, .res-card > .res-btns { grid-column: 1 / -1; }
}