:root {
  --ink: #111111;
  --cream: #f5f6f7;
  --beige: #dfe2e6;
  --paper: #ffffff;
  --rose: #d9a5a0;
  --point: #cdeba0; /* 빔빔 고양이 눈 연두 — 포인트 색 */
  --point-ink: #2f4a17;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.top {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.brand {
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 15px;
  white-space: nowrap;
  background: var(--ink);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
}
.brand span { font-weight: 600; color: var(--point); }


.bubble {
  position: fixed;
  left: 16px;
  right: 16px;
  top: calc(var(--safe-top) + 64px);
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 4px 0 var(--point), 0 4px 0 2px var(--ink);
  transition: opacity 0.3s;
}
.bubble.hidden { opacity: 0; }

.zones {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 16px);
  display: flex;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
}
.zones::-webkit-scrollbar { display: none; }

.zones button {
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  background: #ffffff;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
}
.zones button:active { transform: translateY(1px); background: var(--point); }

.loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #000;
  z-index: 10;
  transition: opacity 0.6s;
}
/* 시작 화면: 검정 바탕에 흰 BeamBeam 워드마크만 */
.splash-word { width: 58vw; max-width: 300px; animation: splashIn 0.8s ease-out both; }
@keyframes splashIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.loading.done { opacity: 0; pointer-events: none; }

.stick {
  position: fixed;
  left: 20px;
  bottom: calc(var(--safe-bottom) + 76px);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  touch-action: none;
}
.knob {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 5px var(--point);
  pointer-events: none;
}

[hidden] { display: none !important; }

.purpose-chip {
  pointer-events: auto;
  white-space: nowrap;
  max-width: 45vw;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 2px solid var(--ink);
  background: var(--point);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.kiosk {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: end;
  background: rgba(17, 17, 17, 0.32);
  padding: 16px;
  padding-bottom: calc(var(--safe-bottom) + 16px);
  z-index: 5;
}
/* 참고자료의 흰 키오스크: 둥근 흰 몸체, 검정 테두리 화면 */
.kiosk-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  background: #ffffff;
  border: 10px solid #111111;
  border-radius: 34px;
  box-shadow: 0 0 0 6px #f4f2ee, 0 24px 48px rgba(0, 0, 0, 0.25);
  padding: 18px 20px 22px;
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
.kiosk-bar { display: flex; justify-content: space-between; align-items: center; }
.kiosk-logo { height: 20px; width: auto; }
.kiosk-close {
  width: 38px; height: 38px; flex: 0 0 auto;
  border: 0; background: #f2f0ec; color: #111;
  border-radius: 50%; font-size: 15px;
}
.kiosk-step { display: grid; gap: 14px; }
.kiosk-title { margin: 4px 0 0; font-size: 26px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.kiosk-title strong { font-weight: 800; }
.kiosk-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: #555; }
.tiles-head { margin: 4px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #111; }
.tiles-head b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px; border-radius: 10px; background: var(--point); color: var(--point-ink); font-size: 11px; }
.kiosk-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px; }
.tile { display: grid; gap: 5px; justify-items: center; align-content: start; text-align: center; font-size: 11px; line-height: 1.25; font-weight: 600; color: #333; word-break: keep-all; }
.tile-art { width: 100%; max-width: 56px; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; background: #f2f3f4; color: #111; }
.tile-art img { width: 82%; height: 82%; object-fit: contain; }
.tile:nth-child(3n+1) .tile-art { background: #f2f3f4; }
.tile:nth-child(3n+2) .tile-art { background: #f2f3f4; }
.tile:nth-child(3n) .tile-art { background: #f2f3f4; }
.kiosk-cta {
  justify-self: center;
  min-width: 70%;
  border: 0;
  background: #111111;
  color: #ffffff;
  border-radius: 999px;
  padding: 16px 28px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}
.kiosk-eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: #888; }
.kiosk-q { margin: -6px 0 0; font-size: 21px; line-height: 1.3; }
.kiosk-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.kiosk-tabs::-webkit-scrollbar { display: none; }
.kiosk-tab {
  flex: 0 0 auto;
  border: 1.5px solid #ddd; background: #fff; color: #333;
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; min-height: 40px;
}
.kiosk-tab[aria-selected="true"] { background: #111; border-color: #111; color: var(--point); }
.kiosk-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kiosk-item {
  border: 0; background: #f4f2ee; color: #111;
  border-radius: 14px; padding: 15px 10px; font: inherit; font-size: 15px; font-weight: 700; min-height: 52px;
}
.diag-list { display: grid; gap: 8px; }
.diag-row {
  display: flex; align-items: center; gap: 12px;
  background: #f4f2ee; border-radius: 14px; padding: 14px 16px;
  font-size: 15px; font-weight: 600;
}
.diag-row input { width: 20px; height: 20px; accent-color: #111; }
.diag-row:has(input:checked) { background: var(--point); color: var(--point-ink); }
.kiosk-cta span { color: var(--point); }
.kiosk-item:active { background: var(--point); }
.kiosk-item:active, .kiosk-tab:active, .kiosk-cta:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid var(--point); outline-offset: 2px; }

/* 메인: 손 흔드는 빔빔 매니저 (그린스크린 빼서 투명 영상) */
.kiosk-cat {
  width: 40%;
  max-width: 180px;
  justify-self: center;
  margin: -4px 0 -6px;
  aspect-ratio: 500 / 650;
  object-fit: contain;
  background: transparent;
}

/* 상단 오른쪽: 오늘의 목적 + 로그인 */
.top-right { display: flex; gap: 6px; align-items: center; pointer-events: auto; min-width: 0; }
.top-right .purpose-chip { max-width: 30vw; }
.login-btn {
  flex: 0 0 auto;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 800;
}
.login-btn:active { background: var(--point); }
.login {
  position: fixed; inset: 0; z-index: 11; /* 11-06: 시작 화면(10) 위에 떠야 처음 화면에서도 로그인 창이 보임 */
  display: grid; place-items: center; padding: 16px;
  background: rgba(17, 17, 17, 0.4);
}
.login-card {
  position: relative; width: 100%; max-width: 380px;
  background: #fff; border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 0 6px 0 var(--point), 0 6px 0 3px var(--ink);
  padding: 26px 22px 22px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr);
}
.login-close { position: absolute; top: 14px; right: 14px; }
.login-logo { height: 22px; width: auto; justify-self: start; }
.login-title { margin: 6px 0 0; font-size: 21px; }
.login-sub { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: #555; }
.sns-btn {
  border: 0; border-radius: 14px; min-height: 50px; font: inherit; font-size: 15px; font-weight: 700;
}
.sns-btn.kakao { background: #fee500; color: #191919; }
.sns-btn.google { background: #fff; color: #111; border: 1.5px solid #ddd; }
.sns-btn.email { background: #111; color: #fff; }
.sns-btn:active { transform: translateY(1px); }
.login-note { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--point-ink); background: var(--point); border-radius: 10px; padding: 10px 12px; }
.login-perks { margin: -4px 0 6px; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.7; color: #333; }
.agree { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 4px 2px; }
.agree.sub { font-size: 13px; color: #555; padding-left: 12px; }
.agree input { width: 19px; height: 19px; accent-color: #111; flex: 0 0 auto; }
.sns-btn:disabled { opacity: 0.35; }

/* 상담·진단존 진단 화면 (color-read-16) */
.diag { position: fixed; inset: 0; z-index: 8; display: grid; padding: calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 10px); background: rgba(17,17,17,0.45); }
.diag-card { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 3px solid var(--ink); border-radius: 24px; overflow: hidden; max-width: 520px; width: 100%; margin: 0 auto; box-shadow: 0 6px 0 var(--point), 0 6px 0 3px var(--ink); }
.diag-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 2px solid #eee; }
.diag-name { flex: 1; font-weight: 800; font-size: 15px; }
.diag-open { font-size: 13px; font-weight: 700; color: #111; background: var(--point); border-radius: 999px; padding: 7px 12px; text-decoration: none; }
#diagFrame { width: 100%; height: 100%; border: 0; background: #fff; }

/* 대화형 상담 */
.consult { position: fixed; inset: 0; z-index: 7; display: grid; align-items: end; padding: calc(var(--safe-top) + 60px) 10px calc(var(--safe-bottom) + 10px); background: rgba(17,17,17,0.35); }
.cs-card { display: grid; grid-template-rows: auto 1fr auto; max-height: 100%; height: min(78vh, 680px); max-width: 520px; width: 100%; margin: 0 auto; background: #fff; border: 3px solid var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 0 6px 0 var(--point), 0 6px 0 3px var(--ink); }
.cs-log { overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 8px; touch-action: pan-y; }
.cs-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; animation: csIn 0.25s ease-out both; }
.cs-msg img { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; border: 2px solid var(--ink); }
.cs-msg p { margin: 0; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #f2f0ec; font-size: 14.5px; line-height: 1.45; }
.cs-msg.me { align-self: flex-end; }
.cs-msg.me p { background: var(--ink); color: #fff; border-radius: 16px 16px 4px 16px; }
@keyframes csIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cs-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 14px; border-top: 2px solid #f0eeea; min-height: 20px; }
.cs-opts:empty { display: none; }
.cs-chip { border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 700; min-height: 42px; }
.cs-chip[style*="--sw"]::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--sw); margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0,0,0,0.2); }
.cs-chip.on { background: var(--point); }
.cs-chip.cs-done { background: var(--ink); color: #fff; }
.cs-result { border: 2px solid var(--ink); border-radius: 18px; padding: 16px; background: #fff; box-shadow: 0 4px 0 var(--point); animation: csIn 0.3s ease-out both; }
.cs-eyebrow { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; color: #888; }
.cs-result h3 { margin: 6px 0 2px; font-size: 22px; }
.cs-sub { margin: 0 0 10px; font-size: 13.5px; color: #555; }
.cs-sw { display: flex; gap: 6px; margin-bottom: 12px; }
.cs-sw span { flex: 1; height: 34px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); }
.cs-result dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; line-height: 1.5; }
.cs-result dt { font-weight: 800; }
.cs-result dd { margin: 0; color: #333; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.sound-btn { width: 38px; padding: 7px 0; font-size: 16px; line-height: 1; }
.sound-btn.off { color: #aaa; text-decoration: line-through; }

/* 액션 버튼 (오른쪽 아래) */
.actions { position: fixed; right: 16px; bottom: calc(var(--safe-bottom) + 84px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 3; }
.act-btn { border: 2px solid var(--ink); border-radius: 999px; font: inherit; font-weight: 800; box-shadow: 0 3px 0 var(--ink); }
.act-talk { background: var(--point); color: var(--ink); padding: 12px 16px; font-size: 15px; animation: actIn 0.25s ease-out both; }
.act-wave { width: 56px; height: 56px; background: #fff; font-size: 24px; }
.act-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
@keyframes actIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
/* 매니저 대화 */
.talk { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 12px); z-index: 6; padding: 0 10px; }
.talk-card { position: relative; max-width: 520px; margin: 0 auto; display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 14px 14px 14px; box-shadow: 0 5px 0 var(--point), 0 5px 0 3px var(--ink); }
.talk-face { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); flex: 0 0 auto; }
.talk-body { flex: 1; min-width: 0; }
.talk-name { margin: 0; font-size: 12px; font-weight: 800; color: #888; }
.talk-text { margin: 2px 0 10px; font-size: 15px; line-height: 1.45; padding-right: 28px; }
.talk-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.talk-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; }
/* 그림으로 고르기 (체형·얼굴형) */
.cs-opts.pics { flex-wrap: nowrap; }
.cs-chip.cs-pic { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; justify-items: center; padding: 6px 6px 8px; border-radius: 16px; font-size: 12px; line-height: 1.3; text-align: center; background: #fff; }
.cs-pic img { width: 100%; aspect-ratio: 1 / 2; object-fit: contain; border-radius: 10px; background: #f6f7f8; padding: 8px 0; }
.cs-pic.face img { aspect-ratio: 1 / 1; padding: 4px; background: #fff; }
.cs-opts.pics:has(.face) { flex-wrap: wrap; }
.cs-chip.cs-pic.face { flex: 1 1 calc(33% - 6px); }
.kiosk-member { justify-self: center; border: 0; background: none; color: #666; font: inherit; font-size: 13.5px; padding: 4px 8px; margin-top: -6px; }
.kiosk-member b { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.kiosk-cta-2 { background: #fff; color: #111; border: 2px solid #111; margin-top: -6px; }
.sns-list { display: grid; gap: 8px; margin-top: 6px; }
.login-small { margin: 2px 0 0; font-size: 12px; color: #888; text-align: center; }
.agree a { color: #555; font-size: 12px; margin-left: 4px; }
.email-form { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.email-form input { min-width: 0; width: 100%; box-sizing: border-box; }
.email-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: #444; }
.email-form input { font: inherit; font-size: 16px; padding: 12px 14px; border: 2px solid #ddd; border-radius: 12px; user-select: text; }
.email-form input:focus { outline: none; border-color: #111; }
.link-btn { border: 0; background: none; font: inherit; font-size: 13.5px; color: #555; padding: 6px; }
.link-btn b { color: #111; }
.login-note.bad { background: #fde7e4; color: #9b2c1f; }
/* 로딩 바 · 터치해서 시작 */
.load-bar { width: 56vw; max-width: 280px; height: 6px; margin-top: 34px; border-radius: 99px; background: #2a2a2a; overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: var(--point); border-radius: 99px; transition: width 0.25s; }
.load-text { margin: 12px 0 0; color: #8a8a8a; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.tap-start { margin-top: 30px; border: 2px solid var(--point); background: transparent; color: var(--point); border-radius: 999px; padding: 14px 30px; font: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.18em; animation: tapPulse 1.4s ease-in-out infinite; }
@keyframes tapPulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(205,235,160,0.5); } 50% { opacity: 0.75; transform: scale(0.97); box-shadow: 0 0 0 10px rgba(205,235,160,0); } }
.load-tip { position: absolute; bottom: calc(var(--safe-bottom) + 28px); left: 0; right: 0; text-align: center; margin: 0; color: #666; font-size: 12.5px; }
.loading.ready .load-bar, .loading.ready .load-text { display: none; }

/* 회사 로고 화면 */
.brand-splash { position: fixed; inset: 0; z-index: 12; background: #000; display: grid; place-items: center; transition: opacity 0.4s ease; animation: brandOut 0.3s ease 0.6s both; } /* JS가 바빠도 CSS가 알아서 사라짐 */
@keyframes brandOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.brand-splash img { width: 84vw; max-width: 520px; height: auto; animation: splashIn 0.4s ease-out both; }
.brand-splash.out { opacity: 0; pointer-events: none; }
/* 메인 타이틀 */
.title-screen { background: radial-gradient(120% 80% at 50% 30%, #2a2a2a 0%, #0c0c0c 70%); overflow: hidden; }
.title-glow { position: absolute; left: 50%; top: 40%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(205,235,160,0.22), rgba(205,235,160,0) 65%); animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 50% { transform: scale(1.08); opacity: 0.8; } }
.title-cat { position: absolute; left: 50%; top: calc(var(--safe-top) + 8vh); height: 44vh; max-height: 420px; transform: translateX(-50%); animation: catBob 2.6s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.5)); }
@keyframes catBob { 50% { transform: translateX(-50%) translateY(-8px); } }
.title-text { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 8vh + min(44vh, 420px) + 10px); display: grid; justify-items: center; gap: 8px; }
.title-text .splash-word { width: 62vw; max-width: 300px; animation: none; }
.title-sub { margin: 0; color: #cdeba0; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.title-bottom { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 24px); display: grid; justify-items: center; }
.title-bottom .load-bar { margin-top: 0; }
.title-bottom .load-tip { position: static; margin-top: 18px; }
/* 장면 전환 */
.fade { position: fixed; inset: 0; z-index: 11; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s; }
.fade.on { opacity: 1; pointer-events: auto; }
body.at-home .zones { display: none; }
/* 미니게임 */
.mg { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; padding: 16px; background: rgba(17,17,17,0.45); }
.mg-card { width: 100%; max-width: 400px; background: #fff; border: 3px solid var(--ink); border-radius: 26px; padding: 20px; text-align: center; box-shadow: 0 6px 0 var(--point), 0 6px 0 3px var(--ink); }
.mg-eyebrow { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; color: #888; }
.mg-title { margin: 4px 0 2px; font-size: 21px; }
.mg-help { margin: 0 0 10px; font-size: 13.5px; color: #555; }
.mg-stage { position: relative; height: 260px; border-radius: 20px; background: radial-gradient(circle, #f6f7f8, #e9ebee); touch-action: none; overflow: hidden; transition: opacity 0.3s; }
.mg-target { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: var(--point); box-shadow: inset 0 0 0 4px #111; }
.mg-ring { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; border-radius: 50%; border: 5px solid #111; pointer-events: none; }
.mg-judge { position: absolute; left: 0; right: 0; top: 18px; font-size: 26px; font-weight: 900; letter-spacing: 0.04em; pointer-events: none; }
.mg-judge.perfect { color: #3d7a1c; } .mg-judge.good { color: #111; } .mg-judge.miss { color: #c55; }
.mg-judge.pop { animation: mgPop 0.35s ease-out; }
@keyframes mgPop { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
.mg-meter { height: 12px; margin-top: 12px; border-radius: 99px; background: #eee; overflow: hidden; border: 2px solid #111; }
.mg-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #cdeba0, #8fd16a); transition: width 0.25s; }
.mg-count { margin: 6px 0 0; font-size: 12.5px; color: #888; font-weight: 700; }
.mg-end { display: grid; gap: 8px; margin-top: 10px; }
.mg-stars { margin: 0; font-size: 34px; color: #111; letter-spacing: 4px; }
.mg-stars.tok { animation: mgTok 0.28s ease-out; }
@keyframes mgTok { 0% { transform: scale(0.8); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.mg-msg { margin: 0; font-size: 14.5px; }

/* 미니게임 공통(캔버스형): 드레이핑 · 메이크업 · 촬영 */
.mg-canvas { height: auto; aspect-ratio: 640 / 520; }
.mg-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.mg-picks { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.mg-picks:empty { display: none; }
.mg-swatch { width: 92px; height: 56px; border-radius: 14px; border: 3px solid var(--ink); background: var(--c); box-shadow: 0 4px 0 var(--ink); cursor: pointer; }
.mg-swatch:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.mg-shots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.mg-shots:empty { display: none; }
.mg-shots img { width: 64px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.2); transform: rotate(-3deg); }
.mg-shots img:nth-child(2) { transform: rotate(2deg); }
.mg-extra:empty { display: none; }

/* 예약(집에서 폰) */
.bk-label { margin: 6px 0 -2px; font-size: 13px; font-weight: 800; text-align: left; }
.bk-label small { font-weight: 600; color: #888; margin-left: 4px; }
.bk-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.bk-chips::-webkit-scrollbar { display: none; }
.bk-times { flex-wrap: wrap; overflow: visible; }
.bk-chip { flex: 0 0 auto; min-width: 54px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.bk-chip small { display: block; font-size: 10.5px; font-weight: 600; color: #888; }
.bk-chip[aria-pressed="true"] { background: var(--point); color: var(--point-ink); box-shadow: 0 3px 0 var(--ink); }
.bk-chip:disabled { opacity: 0.3; text-decoration: line-through; }
.bk-receipt { border: 2px dashed #bbb; border-radius: 18px; padding: 14px 16px; text-align: left; font-size: 14px; line-height: 1.7; background: #faf8f4; }
.bk-receipt b { display: inline-block; min-width: 54px; color: #888; font-size: 12.5px; }
.bk-receipt .bk-no { margin-top: 6px; font-size: 12px; color: #888; }
.tile-emoji { font-size: 30px; }

/* 키오스크 첫 화면: 한 화면에 쏙 (고양이+제목 옆으로, 아이콘 작게, 버튼 나란히) */
.kiosk-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
.kiosk-home { gap: 12px; }
.kiosk-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.kiosk-home .kiosk-cat { width: 96px; max-width: none; margin: 0; }
.kiosk-home .kiosk-title { font-size: 22px; margin: 2px 0 4px; }
.kiosk-home .kiosk-sub { font-size: 12.5px; }
.kiosk-home .kiosk-tiles { gap: 8px 4px; }
.kiosk-home .tile { font-size: 10.5px; gap: 4px; white-space: nowrap; }
.kiosk-home .tile-art { max-width: 50px; border-radius: 14px; }
.kiosk-home .tile-emoji { font-size: 24px; }
.kiosk-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kiosk-ctas .kiosk-cta { min-width: 0; width: 100%; margin: 0; padding: 14px 6px; font-size: 13.5px; white-space: nowrap; }
.kiosk-ask { margin: 2px 0 -4px; text-align: center; font-weight: 700; color: #111; }
.kiosk-ask:empty { display: none; }
.kiosk-ctas:has(> [hidden]) { grid-template-columns: 1fr; }

/* 빔빔 스토어 */
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: #f5f6f7; }
.shop-art { width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 28px; overflow: hidden; }
.shop-art img { width: 100%; height: 100%; object-fit: cover; }
.shop-info { display: grid; gap: 2px; min-width: 0; }
.shop-info b { font-size: 14.5px; }
.shop-info small { font-size: 11.5px; color: #777; line-height: 1.35; }
.shop-info em { font-style: normal; font-weight: 800; font-size: 13px; }
.shop-btn { border: 0; border-radius: 999px; padding: 9px 12px; font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: #111; color: var(--point); }
.shop-btn.soon { background: #fff; color: #111; box-shadow: inset 0 0 0 2px #111; }
.shop-btn.gift { background: var(--point); color: var(--point-ink); }
.shop-ad { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 2px dashed #bbb; color: #111; text-decoration: none; text-align: center; }
.shop-ad b { font-size: 14px; } .shop-ad small { font-size: 12px; color: #777; }
.shop-ad img { width: 100%; border-radius: 10px; }

/* ── 가입: 약관 펼쳐 보기 · 닉네임 중복 확인 ── */
.agree small { color: #888; font-weight: 500; }
.agree-box { display: grid; gap: 2px; padding: 6px 4px; border-radius: 14px; background: #f4f4f5; }
.agree-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.agree-more { border: 0; background: none; font: inherit; font-size: 12px; color: #666; text-decoration: underline; padding: 6px 8px; flex: 0 0 auto; }
.agree-doc { max-height: 220px; overflow-y: auto; margin: 2px 6px 8px 12px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e5e7ea; font-size: 12px; line-height: 1.6; color: #444; user-select: text; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.agree-doc h1 { font-size: 15px; margin: 0 0 4px; } .agree-doc h2 { font-size: 13px; margin: 12px 0 4px; }
.agree-doc p, .agree-doc li { font-size: 12px; margin: 4px 0; } .agree-doc ul { padding-left: 16px; margin: 4px 0; }
.agree-doc table { border-collapse: collapse; width: 100%; font-size: 11.5px; } .agree-doc td, .agree-doc th { border: 1px solid #e1e4e7; padding: 5px 6px; text-align: left; vertical-align: top; } .agree-doc th { background: #f6f7f8; white-space: nowrap; }
.nick-row { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: #444; }
.nick-line { display: flex; gap: 6px; } .nick-line input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 2px solid #ddd; border-radius: 12px; user-select: text; }
.nick-line input:focus { outline: none; border-color: #111; }
.nick-check { flex: 0 0 auto; border: 2px solid #111; background: #fff; color: #111; border-radius: 12px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 800; }
.nick-msg { min-height: 16px; font-size: 12px; font-weight: 600; color: #777; } .nick-msg.bad { color: #b4372a; } .nick-msg.good { color: #3d6b1d; }

/* ── 상단: 공지 · 포인트 ── */
.notice-btn { position: relative; padding-inline: 10px; }
.notice-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.pts-btn { padding-inline: 10px; white-space: nowrap; } .pts-btn b { font-weight: 800; }
.toast.multi { white-space: pre-line; border-radius: 18px; text-align: center; line-height: 1.45; } /* 두 줄 안내(돈 모자랄 때 등) */
.toast { position: fixed; left: 50%; top: calc(var(--safe-top) + 62px); transform: translate(-50%, -16px); opacity: 0; z-index: 30; pointer-events: none; background: #111; color: var(--point); font-weight: 800; font-size: 14px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: opacity .25s, transform .25s; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 공지사항 ── */
.notice .kiosk-card { gap: 12px; }
.notice-board { display: grid; gap: 8px; }
.notice-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; text-align: left; border: 0; border-radius: 16px; background: #f4f4f5; padding: 13px 14px; cursor: pointer; font: inherit; color: inherit; }
.notice-row b { font-family: "Jua", "Pretendard Variable", sans-serif; font-weight: 400; font-size: 17px; line-height: 1.35; }
.notice-row small { grid-column: 2; color: #999; font-size: 13px; }
.notice-row:active { background: #e9e9ec; }
.notice-back { border: 0; background: none; font: inherit; font-weight: 700; font-size: 16px; padding: 4px 2px 10px; cursor: pointer; color: #444; }
.notice-item { border-radius: 16px; background: #f4f4f5; padding: 12px 14px; }
.notice-item summary { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; cursor: pointer; }
.notice-item summary::-webkit-details-marker { display: none; }
.notice-item summary small { grid-column: 2; color: #999; font-size: 13px; }
.notice-item summary b { font-size: 18px; line-height: 1.35; }
.notice-tag { grid-row: span 2; align-self: start; background: #111; color: var(--point); font-size: 12.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.notice-item p { margin: 12px 0 0; font-size: 17px; line-height: 1.65; color: #222; word-break: keep-all; user-select: text; }
.notice-dm { display: block; margin-top: 12px; text-align: center; padding: 11px; border-radius: 12px; background: #fff; border: 2px solid #111; color: #111; font-weight: 800; font-size: 15.5px; text-decoration: none; }
.notice-skip { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: #666; }
.notice-skip input { accent-color: #111; width: 17px; height: 17px; }
.notice-write { width: 100%; padding: 12px; border-radius: 14px; border: 2px dashed #111; background: #fff; color: #111; font: inherit; font-weight: 800; font-size: 16px; }
.notice-write:active { background: var(--point); }
.notice-admin-links { display: flex; gap: 14px; justify-content: flex-end; margin-top: 10px; }
.notice-admin-links button { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 13.5px; color: #777; text-decoration: underline; }
.notice-admin-links button[data-na="del"] { color: #b4372a; }
.notice-form { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; border: 2px solid #111; }
.notice-form-h { font-size: 17px; }
.notice-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: #555; }
.notice-form select, .notice-form input:not([type=checkbox]), .notice-form textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1.5px solid #ccc; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; font-weight: 500; color: #111; }
.notice-form textarea { min-height: 200px; line-height: 1.55; resize: vertical; }
.notice-form select:focus, .notice-form input:focus, .notice-form textarea:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px var(--point); }
.notice-form .notice-form-pin { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: #222; }
.notice-form-pin input { accent-color: #111; width: 18px; height: 18px; }
.notice-form-prev { display: grid; gap: 6px; }
.notice-form-prevh { color: #777; font-size: 12.5px; }
.notice-form-msg { margin: 0; font-size: 13.5px; font-weight: 700; color: #b4372a; }
.notice-form-btns { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; }
.notice-form-btns button { padding: 12px 4px; border-radius: 12px; border: 2px solid #111; background: #fff; color: #111; font: inherit; font-size: 15px; font-weight: 800; white-space: nowrap; }
.notice-form-btns button.main { background: #111; color: var(--point); }
.notice-form-btns button:disabled { opacity: .5; }

/* ── 옷장 · 도감 ── */
.closet .kiosk-card { gap: 12px; }
.closet-pts { font-weight: 800; font-size: 14px; background: #111; color: var(--point); padding: 7px 12px; border-radius: 999px; }
.closet-real { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 18px; background: #11141f; color: #fff; }
.closet-real img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.closet-real div { display: grid; gap: 2px; min-width: 0; }
.closet-real small { color: var(--point); font-size: 11px; font-weight: 800; } .closet-real b { font-size: 14px; } .closet-real span { font-size: 11.5px; color: #c9cbd3; }
.closet-real .cs-chip { min-height: 36px; padding: 6px 10px; font-size: 12.5px; }
.closet-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.closet-tab { flex: 0 0 auto; border: 2px solid #111; background: #fff; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; color: #111; }
.closet-tab.on { background: #111; color: var(--point); }
/* 옷장 계절·장소 필터 칩 (탭 아래 작은 두 줄 · 흰/회/검/연두) */
.closet-filter { display: flex; flex-direction: column; gap: 5px; min-height: max-content; flex-shrink: 0; }
.closet-frow { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.closet-frow::-webkit-scrollbar { display: none; }
.closet-chip { flex: 0 0 auto; border: 1.5px solid #c9ccd2; background: #fff; border-radius: 999px; padding: 4px 10px; min-height: 28px; font: inherit; font-size: 12px; font-weight: 600; color: #4b4f58; }
.closet-chip.on { border-color: #111; background: var(--point); color: #111; }
.closet-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.closet-item { display: grid; gap: 4px; justify-items: center; text-align: center; }
.closet-item > b { font-size: 11.5px; line-height: 1.3; word-break: keep-all; min-height: 30px; }
.closet-art { position: relative; width: 100%; aspect-ratio: 1; border: 2px solid transparent; border-radius: 18px; background: #f2f3f4; display: grid; place-items: center; padding: 0; overflow: hidden; }
.closet-item.on .closet-art { border-color: #111; box-shadow: 0 0 0 3px var(--point); }
.closet-art img { width: 100%; height: 100%; object-fit: cover; }
.closet-art em { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 10px; font-weight: 800; background: #111; color: var(--point); padding: 2px 6px; border-radius: 999px; }
.closet-art i { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 800; background: var(--point); color: var(--point-ink); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.item-dot { width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 26px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.closet-btn { border: 0; border-radius: 999px; padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 800; background: #111; color: var(--point); white-space: nowrap; }
.closet-item.own .closet-btn { background: #fff; color: #111; box-shadow: inset 0 0 0 2px #111; }
.closet-real-link { border: 0; background: none; font: inherit; font-size: 11px; color: #555; text-decoration: underline; padding: 0; }
.closet-dex { margin: 0; text-align: center; font-size: 12px; color: #777; font-weight: 700; }

/* ── 아이템 획득 ── */
.reward { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 20px; background: rgba(17,17,17,.55); }
.reward-card { width: 100%; max-width: 340px; background: #fff; border: 3px solid #111; border-radius: 28px; padding: 22px 20px; text-align: center; box-shadow: 0 6px 0 var(--point), 0 6px 0 3px #111; animation: rewardIn .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes rewardIn { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.reward-eyebrow { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .2em; color: #111; background: var(--point); display: inline-block; padding: 4px 10px; border-radius: 999px; }
.reward-art { width: 180px; height: 180px; margin: 14px auto 6px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; background: #f2f3f4; position: relative; }
.reward-art::after { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,255,255,.55) 25%, transparent 30% 70%, rgba(255,255,255,.55) 75%, transparent 80%); animation: spin 3s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(1turn); } }
.reward-art img { width: 100%; height: 100%; object-fit: cover; }
.reward-name { margin: 8px 0 4px; font-size: 19px; }
.reward-desc { margin: 0 0 14px; font-size: 13.5px; color: #555; line-height: 1.5; word-break: keep-all; }
.reward-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* ── 실물 보기 ── */
.real .kiosk-card { gap: 10px; }
.real-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 18px; scrollbar-width: none; touch-action: pan-x; height: min(calc(100vw - 92px), 340px); background: #f2f3f4; } /* 높이를 직접 정함: aspect-ratio만 두면 스크롤 카드 안에서 줄 높이가 줄어 아래 글자와 겹침 */
.real-gallery img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.real-dots { display: flex; gap: 5px; justify-content: center; } .real-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ddd; } .real-dots i.on { background: #111; width: 16px; border-radius: 3px; }
.real-sub { margin: 0; font-size: 12px; font-weight: 800; color: #888; letter-spacing: .04em; }
.real-name { margin: 2px 0 0; font-size: 21px; letter-spacing: -0.02em; }
.real-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .real-facts li { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #f2f3f4; }
.real-note { margin: 0; font-size: 12.5px; color: #555; background: #f4f4f5; border-radius: 12px; padding: 10px 12px; line-height: 1.5; }
.real-btns { display: grid; gap: 8px; } .real-btns .kiosk-cta { text-align: center; text-decoration: none; min-width: 0; width: 100%; margin: 0; }

/* ── 촬영 스튜디오 ── */
body.in-studio .zones, body.in-studio .stick, body.in-studio .actions, body.in-studio #bubble, body.in-studio .top { display: none !important; }
.studio { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.studio > * { pointer-events: auto; }
.studio-top { position: absolute; top: calc(var(--safe-top) + 10px); left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.studio-live { background: #e5484d; color: #fff; font-size: 11px; font-weight: 900; padding: 4px 8px; border-radius: 6px; letter-spacing: .08em; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .5; } }
.studio-tip { flex: 1; min-width: 0; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio-finder { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none !important; box-shadow: 0 0 0 100vmax rgba(0,0,0,.42); border-radius: 4px; }
.studio-finder i { position: absolute; width: 26px; height: 26px; border: 3px solid #fff; }
.studio-finder i:nth-child(1) { top: -3px; left: -3px; border-right: 0; border-bottom: 0; } .studio-finder i:nth-child(2) { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.studio-finder i:nth-child(3) { bottom: -3px; left: -3px; border-right: 0; border-top: 0; } .studio-finder i:nth-child(4) { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.studio-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 110px; font-weight: 900; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,.4); }
.studio-count.pop { animation: countPop .7s ease-out; } @keyframes countPop { from { transform: scale(1.8); opacity: 0; } 30% { opacity: 1; } }
.studio-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px calc(var(--safe-bottom) + 12px); display: grid; gap: 7px; justify-items: center; background: linear-gradient(transparent, rgba(0,0,0,.55) 35%); }
.studio-row { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; scrollbar-width: none; touch-action: pan-x; padding: 0 4px; }
.studio-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 0; background: rgba(255,255,255,.18); color: #fff; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; backdrop-filter: blur(6px); }
.studio-chip.on { background: #fff; color: #111; }
.studio-chip .sw { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
.studio-shutter { width: 70px; height: 70px; border-radius: 50%; border: 5px solid #fff; background: var(--point); box-shadow: 0 0 0 3px rgba(0,0,0,.25); margin-top: 2px; }
.studio-shutter:active { transform: scale(.92); } .studio-shutter:disabled { opacity: .6; }
.studio-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none !important; }
.studio-flash.go { animation: flash .5s ease-out; } @keyframes flash { from { opacity: 1; } }
.photo-out .kiosk-card { gap: 12px; }
.photo-img { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 10px; background: #f2f3f4; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.share-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.share-btn { display: grid; gap: 4px; justify-items: center; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 700; color: #333; padding: 0; }
.share-btn span { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 20px; font-weight: 900; }
.share-btn.kakao span { background: #fee500; color: #191919; }
.share-btn.insta span { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; }
.share-btn.threads span { background: #111; color: #fff; }
.share-btn.save span, .share-btn.link span { background: #f2f0ec; color: #111; }
.share-note { margin: 0; font-size: 12.5px; text-align: center; color: var(--point-ink); background: var(--point); border-radius: 10px; padding: 9px 10px; font-weight: 700; line-height: 1.45; }
@media (max-width: 480px) {
  .brand span { display: none; }
  .top-right { gap: 4px; }
  .top-right .login-btn { padding-inline: 9px; }
  .top-right .purpose-chip { max-width: 22vw; }
}

/* ── 미니게임: 닫기 · 쌤 대사 · 비포/애프터 · 천 이름 ── */
.mg-card { position: relative; }
.mg-x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.mg-talk { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 9px 12px; border-radius: 14px; background: rgba(17,17,17,.82); color: #fff; font-size: 13px; line-height: 1.45; text-align: left; word-break: keep-all; pointer-events: none; }
.mg-talk.in { animation: talkIn .3s ease-out; } @keyframes talkIn { from { transform: translateY(8px); opacity: 0; } }
.mg-swatch { width: auto; min-width: 92px; padding: 0 12px; display: grid; place-items: center; }
.mg-swatch span { font-size: 12.5px; font-weight: 800; color: #111; background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.mg-ba { margin: 0; flex: 1 1 0; max-width: 160px; display: grid; gap: 4px; }
.mg-ba img { width: 100%; border-radius: 12px; border: 2px solid #111; }
.mg-ba figcaption { font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.mg-ba:last-child figcaption { color: #3d7a1c; }

/* ── 장바구니 · 포인트 안내 · 계산대 ── */
.closet-btn.incart { background: var(--point); color: var(--point-ink); }
.closet-cart { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 16px; background: #111; color: #fff; font-weight: 800; font-size: 14px; position: sticky; bottom: 0; }
.closet-cart .cs-chip { background: var(--point); color: #111; border-color: var(--point); min-height: 36px; padding: 6px 12px; }
.pts-help { border-radius: 14px; background: #f4f4f5; padding: 10px 12px; font-size: 12.5px; color: #444; }
.pts-help summary { font-weight: 800; cursor: pointer; }
.pts-help p { margin: 8px 0 0; line-height: 1.55; word-break: keep-all; } .pts-help .pts-small { color: #888; font-size: 11.5px; }
.pay .kiosk-card { gap: 12px; }
.pay [data-pay] { display: grid; gap: 12px; } .pay [data-pay][hidden] { display: none; }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pay-list li { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: #f4f4f5; font-size: 14px; }
.pay-total { margin: 0; text-align: right; font-size: 15px; } .pay-total b { font-size: 20px; margin-left: 6px; }
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay-method { display: grid; gap: 3px; justify-items: center; padding: 12px 6px; border: 2px solid #111; border-radius: 16px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 800; color: #111; box-shadow: 0 4px 0 #111; }
.pay-method:active { transform: translateY(3px); box-shadow: 0 1px 0 #111; }
.pay-method span { font-size: 28px; } .pay-method small { font-size: 11px; color: #3d6b1d; font-weight: 700; }
.pay-terminal { position: relative; height: 210px; border-radius: 22px; background: linear-gradient(#2b2b2b, #111); display: grid; place-items: center; overflow: hidden; }
.pay-screen { width: 70%; padding: 16px 10px; border-radius: 12px; background: #cdeba0; color: #1d3310; font-weight: 900; font-size: 17px; text-align: center; font-family: ui-monospace, monospace; }
.pay-card { position: absolute; bottom: -70px; left: 50%; font-size: 64px; transform: translateX(-50%); }
.pay-card.go { animation: payIn 1.6s ease-in-out forwards; }
@keyframes payIn { 0% { bottom: -80px; } 45%, 70% { bottom: 40px; } 100% { bottom: -80px; } }
.pay-card.cash.go { animation-name: cashIn; } @keyframes cashIn { 0% { bottom: -80px; transform: translateX(-50%) rotate(-10deg); } 50%, 75% { bottom: 30px; transform: translateX(-50%) rotate(8deg); } 100% { bottom: -80px; } }
.receipt { background: #fff; border: 1px dashed #bbb; border-radius: 6px; padding: 18px 16px; font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 13px; color: #222; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.08); animation: rcIn .5s ease-out; }
@keyframes rcIn { from { transform: translateY(-20px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.receipt img { height: 18px; } .receipt ul { list-style: none; margin: 10px 0; padding: 10px 0; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; display: grid; gap: 5px; text-align: left; }
.receipt li, .rc-total { display: flex; justify-content: space-between; } .rc-total { margin: 0 0 6px; font-weight: 900; font-size: 15px; }
.rc-sub, .rc-meta { margin: 2px 0; color: #777; font-size: 11.5px; } .rc-thanks { margin: 10px 0 0; font-weight: 800; font-family: inherit; }

/* ── 고객의 소리 ── */
.voice-form { display: grid; gap: 12px; }
.voice-kinds { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.voice-kinds legend { font-size: 13px; font-weight: 800; margin-bottom: 8px; padding: 0; }
.voice-kinds label { position: relative; }
.voice-kinds input { position: absolute; opacity: 0; inset: 0; }
.voice-kinds span { display: block; text-align: center; padding: 10px 4px; border: 2px solid #ddd; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: #444; }
.voice-kinds input:checked + span { border-color: #111; background: var(--point); color: #111; }
.voice-kinds input:focus-visible + span { outline: 2px solid #111; outline-offset: 2px; }
.voice-label { display: grid; gap: 5px; font-size: 13px; font-weight: 800; color: #333; }
.voice-label small { font-weight: 600; color: #888; }
.voice-label textarea, .voice-label input { font: inherit; font-size: 16px; padding: 12px; border: 2px solid #ddd; border-radius: 12px; resize: vertical; user-select: text; }
.voice-label textarea:focus, .voice-label input:focus { outline: none; border-color: #111; }
.voice-small { margin: 0; font-size: 11.5px; color: #888; line-height: 1.5; }
.login-note a { color: inherit; font-weight: 900; }
/* 옷장은 아래 시트로 → 위쪽에 입어 본 내 캐릭터가 보이게 */
.closet { background: rgba(17,17,17,.12); }
.closet .kiosk-card { max-height: 50dvh; border-width: 6px; border-radius: 28px 28px 22px 22px; padding: 14px 14px 16px; gap: 10px; }
.closet .kiosk-q { font-size: 18px; margin: 0; } .closet .kiosk-sub { font-size: 12.5px; }
.closet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.closet-item > b { font-size: 11px; min-height: 28px; }
.closet-btn { padding: 6px 8px; font-size: 11px; }
.item-dot { font-size: 22px; }

/* ── 캐릭터 만들기 ── */
.creator .kiosk-card { gap: 10px; }
.cr-pv { border-radius: 20px; overflow: hidden; aspect-ratio: 640 / 520; max-height: 30dvh; margin: 0 auto; background: #eef0f2; }
.cr-pv canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
.cr-rows { display: grid; gap: 8px; } .cr-rows > div { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 6px; } .cr-rows b { font-size: 13px; }
.cr-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.cr-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 2px solid #ddd; background: #fff; border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 700; color: #333; }
.cr-chip.on { border-color: #111; background: var(--point); color: #111; }
.cr-chip i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.cr-edit { justify-self: center; font-size: 12.5px; }

/* ── 오늘의 코스 ── */
.course-chip { position: fixed; left: 16px; bottom: calc(var(--safe-bottom) + 200px); z-index: 3; border: 2px solid #111; background: #fff; color: #111; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 800; box-shadow: 0 3px 0 #111; }
.course-chip b { background: var(--point); padding: 1px 7px; border-radius: 999px; margin-left: 2px; }
.course-chip.stamp { animation: stampChip .7s cubic-bezier(.2,1.6,.4,1); } @keyframes stampChip { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(1); } }
body.at-home .course-chip, body.in-studio .course-chip { display: none; }
.course-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.course-grid li { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; }
.course-grid li span { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 28px; border-radius: 50%; border: 2px dashed #ccc; background: #faf8f4; filter: grayscale(1); opacity: .6; }
.course-grid li.ok span { filter: none; opacity: 1; border: 2px solid #111; background: var(--point); }
.course-grid li small { font-size: 11px; font-weight: 700; color: #444; }
.course-grid li i { position: absolute; top: -4px; right: -2px; width: 34px; height: 34px; border-radius: 50%; background: #111; display: grid; place-items: center; transform: rotate(-14deg); animation: stampIn .5s cubic-bezier(.2,1.6,.4,1); }
.course-grid li i img { width: 72%; }
@keyframes stampIn { from { transform: scale(2.2) rotate(-30deg); opacity: 0; } }
.closet-empty { grid-column: 1 / -1; text-align: center; font-size: 13px; color: #777; padding: 18px 8px; background: #f4f4f5; border-radius: 14px; }
.receipt .rc-bag { display: block; width: 70%; height: auto; margin: 12px auto 0; border-radius: 10px; }
.closet-pv { border-radius: 18px; overflow: hidden; background: #eef0f2; height: 26dvh; display: grid; place-items: center; } .closet-pv canvas { height: 100%; width: auto; display: block; }

/* ── 친구 메시지 (폰 화면) ── */
.chat { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(17,17,17,.35); }
.chat-phone { width: 100%; max-width: 360px; height: min(560px, 78dvh); display: grid; grid-template-rows: auto 1fr auto; background: #eef0f3; border: 8px solid #111; border-radius: 36px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: phoneIn .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes phoneIn { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.chat-top { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: #fff; border-bottom: 1px solid #e3e5e8; }
.chat-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f6a68f; color: #fff; font-weight: 900; font-size: 14px; }
.chat-top small { margin-left: auto; color: #999; font-size: 11px; }
.chat-log { padding: 14px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.cm { margin: 0; max-width: 78%; padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-break: keep-all; animation: cmIn .25s ease-out; }
@keyframes cmIn { from { transform: translateY(6px); opacity: 0; } }
.cm.you { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.cm.me { align-self: flex-end; background: var(--point); color: #1d3310; border-top-right-radius: 4px; font-weight: 700; }
.cm.typing { color: #999; letter-spacing: .2em; }
.chat-opts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 10px 10px 14px; background: #fff; min-height: 20px; }
/* 의견 보내기: 글자 키우고, 안내 문구(placeholder)는 연하게 */
.voice .kiosk-sub { font-size: 15px; }
.voice-kinds legend, .voice-label { font-size: 15px; }
.voice-label small { font-size: 13px; font-weight: 500; }
.voice-kinds span { font-size: 14px; padding: 12px 4px; }
.voice-label textarea, .voice-label input { font-size: 17px; font-weight: 500; }
.voice-label textarea::placeholder, .voice-label input::placeholder { color: #b8b4ad; font-weight: 400; }
.voice-small { font-size: 13px; }
.voice .login-note { font-size: 14px; }
.my-btn { padding-inline: 9px; font-size: 15px; }
@media (max-width: 480px) {
  .brand { font-size: 13px; padding: 7px 11px; }
  .top-right .login-btn { padding: 6px 8px; font-size: 12px; }
  .top-right .sound-btn { width: 32px; }
  .top { left: 10px; right: 10px; }
}
.mg-picks { flex-wrap: wrap; gap: 8px 10px; }
.real-give { margin: 0; font-size: 13px; font-weight: 700; color: #3d6b1d; }
.real-price { margin: 6px 0 0; font-size: 14px; color: #666; } .real-price b { font-size: 18px; color: #111; }
/* ── 오늘의 룩 갤러리 ── */
.gallery-up { justify-self: center; font-weight: 800; color: #111; text-decoration: none; border: 2px solid #111; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; }
.gallery-up:disabled { opacity: .6; }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gallery-item { display: grid; gap: 6px; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 2px solid #111; }
.gallery-item div { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; }
.gallery-item button { border: 2px solid #111; background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; }
.gallery-item button.on { background: var(--point); }
/* 시작 화면: 움직이는 배경 (BB 실루엣 빛 + 보케) + 인사하는 고양이 영상 */
video.title-cat { width: auto; object-fit: contain; animation: none; }
.title-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tb-bb { position: absolute; left: 50%; top: 34%; width: 150vmax; height: 100vmax; margin: -50vmax 0 0 -75vmax; background: url(/assets/bb-symbol.png) center / contain no-repeat; opacity: .05; animation: bbDrift 18s ease-in-out infinite alternate; }
.tb-bb2 { opacity: .035; width: 90vmax; height: 60vmax; margin: -30vmax 0 0 -45vmax; top: 80%; animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes bbDrift { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(3%, 2%) scale(1.08); } }
.bokeh, .bokeh::before, .bokeh::after { position: absolute; inset: -20%; background:
  radial-gradient(circle at 12% 22%, rgba(205,235,160,.35) 0 6px, transparent 7px),
  radial-gradient(circle at 78% 18%, rgba(255,240,215,.30) 0 10px, transparent 11px),
  radial-gradient(circle at 32% 72%, rgba(255,255,255,.18) 0 4px, transparent 5px),
  radial-gradient(circle at 88% 64%, rgba(205,235,160,.25) 0 8px, transparent 9px),
  radial-gradient(circle at 55% 40%, rgba(255,240,215,.16) 0 14px, transparent 15px),
  radial-gradient(circle at 20% 90%, rgba(255,255,255,.14) 0 9px, transparent 10px);
  filter: blur(1.5px); animation: bokehUp 14s linear infinite; }
.bokeh::before { content: ''; inset: 0; animation-duration: 20s; transform: scale(1.4) rotate(40deg); opacity: .8; }
.bokeh::after { content: ''; inset: 0; animation-duration: 26s; transform: scale(.8) rotate(-30deg); opacity: .7; }
@keyframes bokehUp { from { translate: 0 6%; } to { translate: 0 -6%; } }
/* 밝은 톤 시작 화면 (크림 + 연두 빛) */
/* 첫 로고 화면은 원래대로 검정 바탕 + 흰 워드마크 (사용자 지정) */
.title-screen { background: #ffffff; }
.title-glow { background: radial-gradient(circle, rgba(205,235,160,0.55), rgba(205,235,160,0) 65%); }
.title-cat { filter: drop-shadow(0 18px 22px rgba(80,60,40,0.18)); }
.title-sub { color: #3d6b1d; }
.tb-bb { opacity: .05; filter: brightness(0); }
.tb-bb2 { opacity: .03; }
.bokeh, .bokeh::before, .bokeh::after { background:
  radial-gradient(circle at 12% 22%, rgba(205,235,160,.75) 0 7px, transparent 8px),
  radial-gradient(circle at 78% 18%, rgba(242,184,198,.55) 0 10px, transparent 11px),
  radial-gradient(circle at 32% 72%, rgba(185,214,239,.6) 0 5px, transparent 6px),
  radial-gradient(circle at 88% 64%, rgba(205,235,160,.6) 0 9px, transparent 10px),
  radial-gradient(circle at 55% 40%, rgba(255,215,168,.45) 0 14px, transparent 15px),
  radial-gradient(circle at 20% 90%, rgba(200,182,226,.5) 0 9px, transparent 10px); }
.load-bar { background: #e3e6e9; }
.load-text { color: #80858c; }
.tap-start { border-color: #111; color: #111; background: var(--point); box-shadow: 0 4px 0 #111; }
.load-tip { color: #80858c; }
/* 결과 공유 버튼 줄 */
.rshare-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 4px; }
.sh-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; font: 700 13px inherit; color: #222; cursor: pointer; padding: 4px 0; }
.sh-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 17px; border: 2px solid #111; }
.sh-kakao { background: #fee500; color: #191919; }
.sh-ig { background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 85%); color: #fff; }
.sh-th { background: #111; color: #fff; font-size: 22px; }
.sh-link { background: #fff; font-size: 22px; }
/* 시작 화면 배경: 시간대별 빔빔 매장 정면 + 날씨 */
.title-bg .tb-bb, .title-bg .bokeh, .title-glow { display: none; }
.title-screen { background: #dfe6ee url(/assets/title/day.webp) center top / cover no-repeat; }
body[data-phase=morning] .title-screen { background-image: url(/assets/title/morning.webp); }
body[data-phase=sunset] .title-screen { background-image: url(/assets/title/sunset.webp); }
body[data-phase=night] .title-screen { background-color: #0a1230; background-image: url(/assets/title/night.webp); }
body[data-wx=cloudy] .title-screen, body[data-wx=rain] .title-screen, body[data-wx=snow] .title-screen { filter: saturate(.55) brightness(.92); }
.title-bg { background: linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(255,255,255,.82) 78%, rgba(255,255,255,.95) 100%); }
body[data-phase=night] .title-bg { background: linear-gradient(to bottom, rgba(10,18,48,0) 45%, rgba(10,18,48,.8) 78%, rgba(10,18,48,.95) 100%); }
body[data-phase=night] .title-sub { color: #cdeba0; }
body[data-phase=night] .load-tip, body[data-phase=night] .load-text { color: #b9c0d6; }
body[data-wx=rain] .title-bg::after, body[data-wx=snow] .title-bg::after { content: ''; position: absolute; inset: -50% 0 0; pointer-events: none; }
body[data-wx=rain] .title-bg::after { background: repeating-linear-gradient(100deg, rgba(200,215,235,0) 0 14px, rgba(200,215,235,.55) 14px 15px, rgba(200,215,235,0) 15px 38px); background-size: 120px 90px; animation: tRain .5s linear infinite; }
body[data-wx=snow] .title-bg::after { background-image: radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(2px 2px at 70px 80px, #fff 50%, transparent 51%), radial-gradient(4px 4px at 110px 20px, rgba(255,255,255,.9) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 150px 110px, #fff 50%, transparent 51%); background-size: 180px 140px; animation: tSnow 6s linear infinite; }
@keyframes tRain { to { background-position: -16px 90px; } }
@keyframes tSnow { to { background-position: 30px 140px; } }
/* 고양이는 매장 문 앞에서 인사 */
.title-screen { background-position: center top; }
.title-cat { top: auto; bottom: calc(var(--safe-bottom) + 170px); height: 40vh; max-height: 400px; }
.title-text { top: auto; bottom: calc(var(--safe-bottom) + 116px); }
.title-sub { background: rgba(255,255,255,.88); color: #2f5a14; padding: 6px 14px; border-radius: 999px; border: 2px solid #111; font-size: 14px; }
body[data-phase=night] .title-sub { background: rgba(10,18,48,.85); color: #cdeba0; border-color: #cdeba0; }
.title-cat { height: 29vh; max-height: 300px; bottom: calc(var(--safe-bottom) + 168px); }
.upd-bar { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 96px); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; background: #111; color: #fff; padding: 10px 10px 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.25); white-space: nowrap; }
.upd-bar button { border: 0; border-radius: 999px; background: var(--point); color: #111; font-weight: 800; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.upd-bar .upd-x { background: transparent; color: #aaa; padding: 4px 6px; }
/* 실시간 접속자 수 */
.live-chip { position: fixed; left: 16px; bottom: calc(var(--safe-bottom) + 244px); z-index: 3; border: 2px solid #111; background: #fff; color: #111; border-radius: 999px; padding: 6px 12px 6px 10px; font: inherit; font-size: 12.5px; font-weight: 800; box-shadow: 0 3px 0 #111; display: flex; align-items: center; gap: 6px; }
.live-chip i { width: 8px; height: 8px; border-radius: 50%; background: #3cc65a; box-shadow: 0 0 0 3px rgba(60,198,90,.25); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 6px rgba(60,198,90,0); } }
body.at-home .live-chip, body.in-studio .live-chip { display: none; }
/* 가로 화면(PC): 하늘만 보이지 않게 매장 간판 쪽으로 */
@media (min-aspect-ratio: 1/1) { .title-screen { background-position: center 42%; } }
.loading.greeting .tap-start { opacity: .55; pointer-events: none; animation: none; }
/* 집에서 오는 연락: 알림 + 폰 화면 모드 */
.ring-pill { position: fixed; left: 50%; top: calc(var(--safe-top) + 64px); transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); background: #fff; color: #111; border: 2px solid #111; border-radius: 999px; padding: 9px 16px 9px 10px; font: inherit; font-size: 14px; box-shadow: 0 4px 0 #111, 0 10px 24px rgba(0,0,0,.18); animation: ringIn .35s ease-out, ringShake 1.2s ease-in-out .4s 3; cursor: pointer; }
.ring-pill i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--point); font-size: 16px; }
.ring-pill span { color: #555; white-space: nowrap; }
.ring-pill.out { opacity: 0; transition: opacity .35s; }
@keyframes ringIn { from { transform: translate(-50%, -16px); opacity: 0; } }
@keyframes ringShake { 0%, 100% { margin-left: 0; } 20% { margin-left: -4px; } 40% { margin-left: 4px; } 60% { margin-left: -3px; } 80% { margin-left: 3px; } }
.chat-phone.m-kakao .chat-log { background: #b2c7da; }
.chat-phone.m-kakao .cm.me { background: #fee500; color: #191919; }
.chat-phone.m-call .chat-log { background: linear-gradient(#2b3140, #151821); }
.chat-phone.m-call .cm.you { background: rgba(255,255,255,.14); color: #fff; }
.chat-phone.m-sms .chat-log { background: #f4f5f7; }
.chat-phone.m-sms .cm.you { background: #e9eaee; }
.chat-phone.m-mail .chat-log { background: #fff; }
.pm-card { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 1px 0 #e3e5e8; }
.pm-subj { margin: 0 0 8px; font-weight: 800; font-size: 15px; }
.pm-body { margin: 0; font-size: 14px; line-height: 1.6; color: #444; word-break: keep-all; }
.call-in { display: grid; justify-items: center; gap: 6px; padding: 26px 0; color: #fff; }
.call-av { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #fff; animation: callPulse 1.2s ease-in-out infinite; }
.call-in b { font-size: 20px; } .call-in small { color: #aab; }
.chat-phone.m-call .pm-card { background: transparent; box-shadow: none; }
@keyframes callPulse { 50% { box-shadow: 0 0 0 14px rgba(205,235,160,.25); } }
/* 다음 할 일 안내 */
.next-chip { position: fixed; left: 16px; bottom: calc(var(--safe-bottom) + 288px); z-index: 4; display: flex; align-items: center; gap: 6px; border: 2px solid #111; background: var(--point); color: #111; border-radius: 999px; padding: 8px 14px 8px 8px; font: inherit; font-size: 14px; font-weight: 800; box-shadow: 0 3px 0 #111; white-space: nowrap; animation: nextBob 2s ease-in-out infinite; }
.next-chip small { background: #111; color: var(--point); border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.next-chip span { margin-left: 2px; }
@keyframes nextBob { 50% { transform: translateY(-3px); } }
body.at-home .next-chip, body.in-studio .next-chip { display: none; }
.deal-tag { position: absolute; top: 6px; left: 6px; background: #e5484d; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.closet-btn s { opacity: .55; font-size: .85em; margin-left: 2px; }
.closet-item { position: relative; }
/* 시작: 버튼 대신 깜빡이는 안내 글자 (화면 어디를 눌러도 시작) */
.loading .tap-start { background: none !important; border: 0 !important; box-shadow: none !important; padding: 10px 16px; color: #111; font-size: 17px; font-weight: 800; letter-spacing: .04em; animation: tapBlink 1.4s ease-in-out infinite !important; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
body[data-phase=night] .loading .tap-start { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
@keyframes tapBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.loading.greeting .tap-start { opacity: 0 !important; animation: none !important; }
/* 누르는 느낌 */
.tap-press { transform: scale(.95) !important; filter: brightness(.96); box-shadow: 0 0 0 3px var(--point) !important; transition: transform .08s, box-shadow .08s !important; }
.cs-chip.picked { background: var(--point) !important; border-color: #111 !important; color: #111 !important; transform: scale(1.03); box-shadow: 0 0 0 3px rgba(205,235,160,.6); }
.cs-pic.picked { outline: 4px solid var(--point); }
/* 글꼴: 본문은 프리텐다드(읽기 편하게), 제목·버튼·말풍선은 주아(귀엽고 통통하게) — 로고·워드마크는 원본 그림 그대로 */
body, button, input, textarea, select { font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.cs-chip, .kiosk-cta, .kiosk-q, .kiosk-title, .act-btn, .next-chip, .course-chip, .live-chip, .ring-pill, .zones button, .say, #bubble, .bubble, .talk-text, .closet-btn, .pay-title, .reward-title, h2, h3, .notice-item summary b, .title-sub, .loading .tap-start, .toast, .mg-title, .mg-judge, .talk-name, .chat-top b, .sh-btn, .share-btn { font-family: "Jua", "Pretendard Variable", sans-serif !important; font-weight: 400 !important; letter-spacing: 0; }
/* 위쪽 버튼 아이콘: 이모지 대신 같은 굵기의 선 아이콘 */
.login-btn .ic { width: 19px; height: 19px; display: block; }
.sound-btn.off .ic { opacity: .35; }
.sound-btn.off { position: relative; }
.sound-btn.off::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2.2px; background: currentColor; transform: rotate(-35deg); border-radius: 2px; }
/* 공유 버튼: 각 앱 공식 아이콘 그대로 */
.share-btn span.logo, .sh-ic.logo { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; overflow: hidden; }
.share-btn span.logo img, .sh-ic.logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.nail-sw { display: inline-block; width: 16px; height: 16px; border-radius: 6px 6px 4px 4px; border: 2px solid #111; margin-right: 6px; vertical-align: -3px; }
.install-btn { background: var(--point) !important; font-weight: 800; white-space: nowrap; font-size: 12.5px; padding-inline: 10px; }
body.at-home .install-btn { display: inline-flex; }
.install-btn { position: fixed !important; right: 16px; bottom: calc(var(--safe-bottom) + 250px); z-index: 4; border: 2px solid #111 !important; box-shadow: 0 3px 0 #111; border-radius: 999px; height: 34px; }
.notify-box { border: 2px solid #111; border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; margin: 6px 0 12px; }
.notify-title { margin: 0; font-weight: 800; }
.notify-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; }
.notify-row small { display: block; font-weight: 500; color: #777; font-size: 12px; }
.notify-row input { width: 22px; height: 22px; accent-color: #111; }
.region-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.region-row select { min-width: 0; width: 100%; height: 40px; padding: 0 10px; border: 2px solid #111; border-radius: 12px; background: #fff; color: #111; font: inherit; font-size: 14px; font-weight: 700; }
.region-help { color: #777; font-size: 12px; line-height: 1.4; }
.notify-msg { margin: 0; font-size: 12px; color: #4a7a1d; min-height: 1em; }

.pm-img { display: block; width: 62%; max-width: 200px; margin: 0 auto 8px; }

/* 예약 화면 정리 (11/3): 날짜 7일 한 줄, 시간 24시간 촘촘히, 서비스 2칸, '다음' 버튼은 아래 고정 */
.kiosk-step[data-step="book"] { gap: 10px; }
.kiosk-step[data-step="book"] .kiosk-q { font-size: 19px; }
#bkDays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; overflow: visible; padding: 2px 0 4px; }
#bkDays .bk-chip { min-width: 0; padding: 7px 0; font-size: 12.5px; border-radius: 12px; text-align: center; }
#bkDays .bk-chip small { font-size: 10px; }
#bkTimes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
#bkTimes .bk-chip { min-width: 0; padding: 7px 0; font-size: 12px; border-radius: 10px; text-align: center; }
#bkTimes .bk-chip:disabled { display: none; }
#bkServices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#bkServices .diag-row { padding: 10px 10px; gap: 8px; font-size: 13.5px; border-radius: 12px; }
#bkServices .diag-row input { width: 17px; height: 17px; flex: none; }
#bkNext { position: sticky; bottom: 0; z-index: 2; width: 100%; margin-top: 4px; box-shadow: 0 -10px 16px 6px #fff; }
.bk-time-note { margin: -4px 0 0; font-size: 11.5px; color: #888; text-align: left; }

/* 매장 안내 방송 띠 */
.pa-bar { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: #111; color: #fff; font-weight: 800; font-size: 14.5px; box-shadow: 0 4px 0 var(--point), 0 8px 20px rgba(0,0,0,.25); animation: paIn .35s ease-out both; }
.pa-bar i { font-style: normal; }
.pa-bar.out { opacity: 0; transition: opacity .4s; }
@keyframes paIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

.sns-btn.busy { opacity: .7; pointer-events: none; animation: bbBusy 1s ease-in-out infinite; }
@keyframes bbBusy { 50% { opacity: .45; } }
.field-hint { display: block; font-size: 12px; font-weight: 500; color: #888; line-height: 1.4; }
.email-form label .field-hint { margin-top: 2px; }
.me-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.region-help.saved { color: #3d6b1d; font-weight: 700; }
.real .kiosk-card { grid-auto-rows: max-content; }
/* 언어 선택 (상단 바 🌐 + 현재 언어) */
.lang-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; padding-inline: 9px; }
.lang-btn b { font-weight: 800; font-size: 12px; letter-spacing: 0; }
.lang-menu { position: fixed; z-index: 30; min-width: 128px; padding: 6px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); display: flex; flex-direction: column; gap: 2px; }
.lang-menu[hidden] { display: none; }
.lang-menu button { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-align: left; padding: 9px 12px; border-radius: 9px; }
.lang-menu button:active, .lang-menu button[aria-current="true"] { background: var(--point); }
@media (max-width: 480px) {
  /* 언어 버튼이 늘어난 만큼 상단 바를 한 줄에 맞춤 (폰 폭 360~430) */
  .top-right { gap: 3px; }
  .top-right .login-btn { padding: 6px 6px; font-size: 11.5px; }
  .top-right .snap-btn, .top-right .notice-btn, .top-right .my-btn { padding-inline: 6px; }
  .top-right .lang-btn { padding: 6px 5px; gap: 2px; font-size: 11px; }
  .lang-btn b { font-size: 11px; }
  .top .brand { padding: 7px 8px; font-size: 12px; }
  .top-right .pts-btn { padding-inline: 5px; }
  html[lang="ja"] .top-right #loginBtn { font-size: 10.5px; padding-inline: 5px; }
}

/* 일본어·중국어(간체): 주아(Jua)는 한글 전용이라 시스템 글꼴로 */
html[lang="ja"] .cs-chip, html[lang="ja"] .kiosk-cta, html[lang="ja"] .kiosk-q, html[lang="ja"] .kiosk-title, html[lang="ja"] .act-btn, html[lang="ja"] .next-chip, html[lang="ja"] .course-chip, html[lang="ja"] .live-chip, html[lang="ja"] .ring-pill, html[lang="ja"] .zones button, html[lang="ja"] .say, html[lang="ja"] #bubble, html[lang="ja"] .bubble, html[lang="ja"] .talk-text, html[lang="ja"] .closet-btn, html[lang="ja"] .pay-title, html[lang="ja"] .reward-title, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .notice-item summary b, html[lang="ja"] .title-sub, html[lang="ja"] .loading .tap-start, html[lang="ja"] .toast, html[lang="ja"] .mg-title, html[lang="ja"] .mg-judge, html[lang="ja"] .talk-name, html[lang="ja"] .chat-top b, html[lang="ja"] .sh-btn, html[lang="ja"] .share-btn {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, -apple-system, sans-serif !important; font-weight: 800 !important;
}
html[lang^="zh"] .cs-chip, html[lang^="zh"] .kiosk-cta, html[lang^="zh"] .kiosk-q, html[lang^="zh"] .kiosk-title, html[lang^="zh"] .act-btn, html[lang^="zh"] .next-chip, html[lang^="zh"] .course-chip, html[lang^="zh"] .live-chip, html[lang^="zh"] .ring-pill, html[lang^="zh"] .zones button, html[lang^="zh"] .say, html[lang^="zh"] #bubble, html[lang^="zh"] .bubble, html[lang^="zh"] .talk-text, html[lang^="zh"] .closet-btn, html[lang^="zh"] .pay-title, html[lang^="zh"] .reward-title, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] .notice-item summary b, html[lang^="zh"] .title-sub, html[lang^="zh"] .loading .tap-start, html[lang^="zh"] .toast, html[lang^="zh"] .mg-title, html[lang^="zh"] .mg-judge, html[lang^="zh"] .talk-name, html[lang^="zh"] .chat-top b, html[lang^="zh"] .sh-btn, html[lang^="zh"] .share-btn {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif !important; font-weight: 800 !important;
}
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] textarea { font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", "Pretendard Variable", system-ui, sans-serif; }
html[lang^="zh"] body, html[lang^="zh"] button, html[lang^="zh"] input, html[lang^="zh"] textarea { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Pretendard Variable", system-ui, sans-serif; }
.share-btn i { font-style: normal; }

/* 공지 사진: SNS처럼 크게, 옆으로 넘기기 + 1/3 · 점, 누르면 크게 */
.notice-gal-wrap { position: relative; margin: 12px -4px 0; }
.notice-gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 14px; background: #e9ebee; touch-action: pan-x pan-y; }
.notice-gal::-webkit-scrollbar { display: none; }
.notice-gal img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; scroll-snap-align: center; display: block; background: #e9ebee; cursor: zoom-in; }
.notice-gal-count { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(17,17,17,.62); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
.notice-gal-dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; } .notice-gal-dots i { width: 6px; height: 6px; border-radius: 50%; background: #cfd3d8; } .notice-gal-dots i.on { background: #111; width: 16px; border-radius: 3px; }
.img-zoom { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.88); display: grid; place-items: center; padding: 16px; }
.img-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.img-zoom button { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 18px; }
.nf-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.nf-ph { position: relative; width: 72px; height: 90px; border-radius: 10px; overflow: hidden; background: #e9ebee; }
.nf-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-ph button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(17,17,17,.7); color: #fff; font-size: 11px; line-height: 22px; padding: 0; }
.nf-add { width: 72px; height: 90px; border-radius: 10px; border: 2px dashed #111; display: grid; place-items: center; align-content: center; gap: 2px; font-size: 24px; cursor: pointer; background: #fff; }
.nf-add small { font-size: 11px; font-weight: 700; color: #666; }

/* 공식 슬로건 (시작 화면): 크게, 설명 알약 위에 */
.title-slogan { margin: 0; display: grid; justify-items: center; gap: 2px; text-align: center; color: #111;
  text-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 2px 0 #fff; }
.title-slogan b { font-family: "Jua", "Pretendard Variable", sans-serif; font-weight: 400; font-size: clamp(26px, 7.6vw, 34px); line-height: 1.1; letter-spacing: -0.01em; }
.title-slogan span { font-size: 12.5px; font-weight: 800; letter-spacing: 0.22em; }
body[data-phase=night] .title-slogan { color: #fff; text-shadow: 0 0 8px rgba(10,18,48,.9), 0 2px 0 #0a1230; }
body[data-phase=night] .title-slogan span { color: #cdeba0; }

.login-card { max-height: calc(100dvh - 32px); overflow-y: auto; } /* 작은 폰에서 위아래 잘려 ✕가 안 보이던 것 */
/* 액션 재미: 이모트 · 변신 공개 · 반짝이 */
.emote-box { position: relative; }
.act-emote { width: 40px; height: 40px; background: #fff; font-size: 18px; padding: 0; }
.emote-row { position: absolute; right: 48px; top: 0; display: flex; gap: 6px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 6px; box-shadow: 0 3px 0 var(--point), 0 3px 0 2px var(--ink); animation: actIn .2s ease-out both; }
.emote-row[hidden] { display: none; }
.emote-row .act-btn { width: 40px; height: 40px; padding: 0; font-size: 20px; background: #fff; box-shadow: none; border-color: transparent; }
.emote-row .act-btn:active { background: var(--point); transform: scale(.92); }
.fx-float { position: fixed; z-index: 35; pointer-events: none; transform: translate(-50%, -50%); font-family: "Jua", "Pretendard Variable", sans-serif; font-size: 22px; color: #111; white-space: nowrap; animation: fxRise 1.6s ease-out both; text-shadow: 0 0 4px #fff, 0 0 4px #fff; }
.fx-float.pts { color: #111; background: var(--point); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; text-shadow: none; }
.fx-float.bub { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-size: 18px; text-shadow: none; box-shadow: 0 3px 0 var(--point); }
@keyframes fxRise { 0% { opacity: 0; margin-top: 8px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -48px; } }
.fx-zzan { position: fixed; left: 50%; top: 22%; z-index: 36; pointer-events: none; transform: translate(-50%, -50%); font-family: "Jua", "Pretendard Variable", sans-serif; font-size: 40px; color: #111; background: var(--point); border: 3px solid var(--ink); border-radius: 999px; padding: 6px 26px; box-shadow: 0 5px 0 #fff, 0 5px 0 3px var(--ink); white-space: nowrap; animation: zzan 1.8s ease-out both; }
@keyframes zzan { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.reveal-flash { position: fixed; inset: 0; z-index: 34; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(255,226,238,.55) 60%, rgba(255,255,255,.2)); animation: rvFlash .8s ease-out both; }
@keyframes rvFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* ══ 긴급 정비 11/3: 화면 버튼 정리 (폰 412×870 기준) ══════════════════════════
   위쪽은 ☰ · 포인트 · 옷장 셋뿐. 나머지는 ☰ 메뉴 시트 / 매장 지도 시트 안으로 옮김 (기능은 그대로) */
.top { align-items: center; }
.menu-btn, .top-right .closet-top { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 50%; box-shadow: 0 3px 0 var(--ink); font: inherit; pointer-events: auto; }
.menu-btn { font-size: 22px; font-weight: 800; line-height: 1; }
.menu-btn:active, .top-right .closet-top:active { background: var(--point); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.top-right .closet-top .mi-ic { font-size: 22px; line-height: 1; }
.top-right .closet-top .mi-ic img, .mi-ic img { width: 26px; height: 26px; object-fit: contain; display: block; }
.top-right .pts-btn { height: 44px; padding: 0 14px; font-size: 15px; box-shadow: 0 3px 0 var(--ink); }
.top-right { gap: 8px; }

/* 시트 (아래에서 올라오는 창) */
.sheet { position: fixed; inset: 0; z-index: 8; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(17,17,17,.38); animation: sheetFade .2s ease-out both; }
.sheet-card { position: relative; width: min(100%, 520px); max-height: 88dvh; overflow-y: auto; background: #fff; border: 3px solid var(--ink); border-bottom: 0; border-radius: 26px 26px 0 0; padding: 12px 16px calc(var(--safe-bottom) + 20px); box-shadow: 0 -5px 0 var(--point); animation: sheetUp .26s cubic-bezier(.2,.9,.3,1) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet-logo { height: 22px; width: auto; display: block; }
.sheet-title { font-size: 17px; font-weight: 800; }
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sheet .mi { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px; min-width: 0; max-width: none; padding: 10px 4px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; box-shadow: 0 3px 0 var(--ink); white-space: normal; overflow: visible; pointer-events: auto; }
.sheet .mi:active { background: var(--point); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.sheet .mi[hidden] { display: none; }
.sheet .mi-ic { font-size: 30px; line-height: 1; display: block; }
.sheet .mi-ic img { width: 34px; height: 34px; }
.sheet .mi-l { word-break: keep-all; overflow-wrap: anywhere; }
.sheet .mi-l b { font-weight: 800; }
.sheet .mi-wide { grid-column: 1 / -1; flex-direction: row; gap: 8px; min-height: 48px; padding: 8px 14px; font-size: 14px; background: var(--point); }
.sheet .notice-dot { top: 8px; right: 12px; }
.sheet .sound-btn.off .mi-ic, .sheet .music-btn.off .mi-ic { opacity: .4; }
.sheet .sound-btn.off, .sheet .music-btn.off { background: #f1f1f1; }
body.at-home .mi-store { display: none; }
body.in-studio .sheet { display: none !important; }
.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.map-grid button { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; text-align: left; box-shadow: 0 3px 0 var(--ink); }
.map-grid button:active { background: var(--point); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.map-grid button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.map-grid .mi-ic { font-size: 24px; line-height: 1; }

/* 아래 구역 버튼 줄은 이제 매장 지도 시트 안에서만 (줄 자체는 코드에 남아 있고 보이지만 않음) */
.zones { display: none !important; }

/* 말풍선: 작고 얇게, 최대 2줄, 3.5초 뒤 사라짐. 톡 누르면 전체 글 */
.bubble { left: 16px; right: 16px; width: fit-content; max-width: min(92vw, 380px); top: calc(var(--safe-top) + 64px); padding: 6px 13px; border-width: 1.5px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; text-align: center; box-shadow: 0 2px 0 var(--point); pointer-events: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; z-index: 2; }
.bubble.full { -webkit-line-clamp: unset; line-clamp: unset; }
.bubble.hidden { opacity: 0; pointer-events: none; }

/* 왼쪽 아래: 조이스틱 + 작은 칩 둘 (코스·접속자 합친 칩, 다음 칩) */
.stick { bottom: calc(var(--safe-bottom) + 28px); }
.course-chip { bottom: calc(var(--safe-bottom) + 152px); padding: 5px 11px; font-size: 12.5px; display: flex; align-items: center; gap: 0; }
.course-chip b { margin-left: 1px; }
.course-chip .cc-live { margin-left: 8px; padding-left: 8px; border-left: 2px solid #ddd; }
.course-chip .cc-live[hidden] { display: none; }
.course-chip .cc-live em { font-style: normal; }
.course-live { margin-top: 2px; }
.live-chip { display: none !important; } /* 접속자 수는 코스 칩 안으로 합침 (요소·동작은 그대로) */
.next-chip { bottom: calc(var(--safe-bottom) + 192px); padding: 5px 12px 5px 6px; font-size: 12.5px; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.next-chip small { font-size: 10.5px; padding: 2px 7px; }

/* 오른쪽 아래: 이모트 버튼 하나 (눌러서 펼침, 👋 포함) */
.actions { bottom: calc(var(--safe-bottom) + 36px); }
.act-emote { width: 50px; height: 50px; font-size: 24px; }
.act-wave { display: none; } /* 손 흔들기는 이모트 펼침 안의 👋로 */
.emote-row { right: 58px; top: -1px; }

/* 계산: 서비스 줄 · 매니저 서비스 줄 */
.pay-list li.svc small, .receipt li.svc small { margin-left: 5px; padding: 1px 7px; border-radius: 999px; background: var(--point); color: var(--ink); font-size: 10.5px; font-weight: 800; }
.pay-list li.waive b, .receipt li.waive b { color: #3d6b1d; }
.pay-svcsub { margin: 8px 0 2px; font-size: 12px; font-weight: 800; color: #777; }

/* 오늘 요약 카드 */
.daysum .ds-look { display: block; width: min(60%, 220px); max-height: 34vh; object-fit: contain; margin: 0 auto 10px; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--point); }
.ds-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ds-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; font-size: 14px; font-weight: 700; }
.ds-list li span { color: #666; flex: 0 0 auto; }
.ds-list li b { text-align: right; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .top { left: 12px; right: 12px; }
  .top-right .pts-btn { padding: 0 12px; }
}
/* 소리 버튼이 메뉴 칸 안으로 옮겨오면서 예전 작은 버튼 모양(폭·취소선)을 쓰지 않게 */
.sheet .sound-btn { width: auto; font-size: 13px; padding: 10px 4px; line-height: 1.2; text-decoration: none; color: var(--ink); }
.sheet .sound-btn.off { color: var(--ink); text-decoration: none; }
.sheet .sound-btn.off::after { display: none; }
/* 말풍선 더 작게: 위쪽 바 바로 아래, 반투명 흰 알약, 2줄까지 (한 번에 하나만 — say()가 같은 요소를 재사용) */
.bubble { top: calc(var(--safe-top) + 62px); padding: 3px 12px; font-size: 14px; line-height: 1.3; background: rgba(255,255,255,.8); border-color: rgba(17,17,17,.55); border-radius: 16px; box-shadow: none; max-width: min(90vw, 360px); }
/* 인앱 브라우저(위 주소창·아래 메뉴줄): vh 대신 dvh로 */
.cs-card { height: min(78dvh, 680px); }
.photo-img { max-height: 52dvh; }
.daysum .ds-look { max-height: 34dvh; }

/* ── 부드러운 HUD: 굵은 검정 테두리 없이, 반투명 흰 동그라미 + 은은한 그림자 (아이콘은 assets/icons/*.svg, 없으면 이모지) ── */
.menu-btn, .top-right .closet-top, .top-right .pts-btn, .act-emote, .course-chip, .stick {
  border: 0; background: rgba(255,255,255,.85); box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.menu-btn, .top-right .closet-top { width: 40px; height: 40px; }
.top-right .pts-btn { height: 40px; font-size: 14px; }
.menu-btn:active, .top-right .closet-top:active, .act-emote:active { background: rgba(205,235,160,.95); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.menu-btn .mi-ic, .top-right .closet-top .mi-ic, .act-emote .mi-ic { display: grid; place-items: center; font-size: 20px; line-height: 1; }
.menu-btn .mi-ic img, .top-right .closet-top .mi-ic img, .act-emote .mi-ic img { width: 26px; height: 26px; object-fit: contain; display: block; }
.act-emote { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.course-chip { padding: 4px 10px; font-size: 12.5px; }
.course-chip .mi-ic { display: inline-block; vertical-align: middle; line-height: 1; }
.course-chip .mi-ic img { width: 16px; height: 16px; display: block; }
.course-chip .cc-course { display: inline-flex; align-items: center; gap: 4px; }
.course-chip .cc-live { border-left-color: rgba(0,0,0,.12); }
.stick { background: rgba(255,255,255,.4); }
.next-chip { border: 0; background: rgba(205,235,160,.92); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.next-chip small { background: rgba(17,17,17,.78); }
.emote-row { border: 0; background: rgba(255,255,255,.88); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.emote-row .act-btn .mi-ic { display: grid; place-items: center; font-size: 20px; }
.emote-row .act-btn .mi-ic img { width: 26px; height: 26px; display: block; }
.act-talk { border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
/* 메뉴·지도 시트도 가볍게 */
.sheet-card { border: 0; box-shadow: 0 -4px 18px rgba(0,0,0,.18); }
.sheet .mi, .map-grid button { border: 1px solid rgba(0,0,0,.08); background: #fafafa; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.sheet .mi:active, .map-grid button:active { background: var(--point); box-shadow: none; }
.sheet .mi-wide { background: var(--point); }
.sheet .mi-ic img { width: 36px; height: 36px; }
.map-grid .mi-ic img { width: 26px; height: 26px; }
.sheet .install-btn { position: static !important; right: auto; bottom: auto; height: auto; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-radius: 18px; z-index: auto; font-size: 14px; display: flex; }
.sheet .install-btn[hidden] { display: none; }
.pts-btn .pts-ic { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.pts-btn .pts-ic img { width: 22px; height: 22px; }

/* ── 엘리베이터 타는 장면: 안쪽 그림을 화면 가득 덮음 (z 10 = 페이드 11 아래) ── */
body.in-elev .zones, body.in-elev .stick, body.in-elev .actions, body.in-elev #bubble, body.in-elev .top, body.in-elev .course-chip, body.in-elev .live-chip, body.in-elev .next-chip, body.in-elev .install-btn, body.in-elev .upd-bar, body.in-elev .ring-pill, body.in-elev .toast, body.in-elev .pa-bar { display: none !important; }
.elev { position: fixed; inset: 0; z-index: 10; display: none; background: #9a9ea3; overflow: hidden; touch-action: none; }
.elev.on { display: block; }
.elev-pic { position: absolute; inset: 0; animation: elevShake .22s linear infinite alternate; }
.elev-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.03); user-select: none; -webkit-user-drag: none; }
@keyframes elevShake { 0% { transform: translate(-1.2px, .6px); } 50% { transform: translate(.8px, -1px); } 100% { transform: translate(1.2px, .8px); } }
.elev-glow { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; background: radial-gradient(circle, #fff 0 28%, #cdeba0 55%, rgba(205,235,160,0) 72%); box-shadow: 0 0 14px 4px rgba(205,235,160,.75); transition: opacity .25s; }
.elev-glow.lit { opacity: 1; }
.elev-fl { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 22px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px; border-radius: 16px; background: rgba(12,12,12,.88); border: 1.5px solid rgba(255,255,255,.18); color: #cdeba0; font: 800 30px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .02em; }
.elev-fl span { font-size: 15px; min-width: 14px; text-align: center; }
.elev-msg { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22%); margin: 0; transform: translate(-50%, 12px); opacity: 0; max-width: calc(100% - 32px); padding: 12px 22px; border-radius: 999px; background: rgba(12,12,12,.9); color: #fff; font: 800 20px/1.3 inherit; text-align: center; white-space: nowrap; border: 2px solid #cdeba0; transition: opacity .3s, transform .3s; pointer-events: none; }
.elev-msg.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .elev-pic { animation: none; } }

/* ── 하루 시작·마무리 (2-7) ── */
.course-chip { padding-bottom: 8px; }
.course-chip .cc-bar { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: rgba(0,0,0,.12); overflow: hidden; }
.course-chip .cc-bar i { display: block; height: 100%; width: calc(var(--cp, 0) * 100%); background: var(--point); box-shadow: 0 0 0 .5px #111 inset; transition: width .6s cubic-bezier(.2,1.2,.4,1); }
.course-chip.stamp .cc-bar { animation: barPop .7s ease-out; } @keyframes barPop { 40% { transform: scaleY(2.2); } }
.daystart .ds-icons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 3px; font-size: 24px; margin: 4px 0 12px; }
.daystart .ds-icons em { font-style: normal; color: #bbb; font-size: 14px; }
.day-info h4 { margin: 10px 0 6px; font-size: 14px; }
.di-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.di-list li { padding: 8px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; font-size: 13.5px; font-weight: 700; }
.di-list li.ok { background: var(--point); }
.daystart .kiosk-cta { margin-top: 10px; }
.ds-stamps { display: inline-flex; gap: 2px; font-size: 16px; } .ds-stamps i { font-style: normal; opacity: .22; filter: grayscale(1); } .ds-stamps i.on { opacity: 1; filter: none; }
.ds-list li.tm { background: var(--point); }
.ds-sub-btn { display: block; width: 100%; margin-top: 8px; padding: 9px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }

/* 코스 단계 바 (상단 바 바로 아래, 한 줄) */
.step-bar { position: fixed; z-index: 3; top: calc(var(--safe-top) + 62px); left: 12px; right: 12px; height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 5px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.step-bar[hidden] { display: none; }
.step-bar::-webkit-scrollbar { display: none; }
.step-bar button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px 0 4px; border: 0; border-radius: 999px; background: transparent; color: #444; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.step-bar button em { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.08); color: #555; font-size: 10px; line-height: 16px; text-align: center; }
.step-bar button.done em { background: var(--point); color: #111; }
.step-bar button.done { color: #777; }
.step-bar button.cur { background: var(--point); color: #111; }
.step-bar button.cur em { background: #fff; color: #111; }
body.has-stepbar .bubble { top: calc(var(--safe-top) + 102px) !important; }
body.at-home .step-bar, body.in-studio .step-bar, body.in-elev .step-bar { display: none !important; }
/* ── 게임 재미 2차 ── 코인 날기 · 포인트 칩 톡 · 등급 게이지 · 오늘의 미션 */
.coin-fly { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; z-index: 60; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
#ptsBtn.pts-pop { animation: ptsPop .32s cubic-bezier(.2,1.6,.4,1); }
#ptsBtn.pts-pop b { color: var(--point-ink); }
#ptsBtn.pts-down b { color: #777; }
@keyframes ptsPop { 0% { transform: scale(1); } 45% { transform: scale(1.18); background: var(--point); } 100% { transform: scale(1); } }
.grade-gauge { display: grid; gap: 6px; padding: 10px 12px; border: 2px solid #111; border-radius: 16px; background: #fff; }
.grade-gauge .gg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 14px; color: #111; }
.grade-gauge .gg-top small { font-weight: 700; font-size: 11.5px; color: #777; }
.grade-gauge .gg-bar { position: relative; height: 12px; border-radius: 999px; background: #eee; border: 2px solid #111; overflow: hidden; }
.grade-gauge .gg-bar i { position: absolute; inset: 0 auto 0 0; background: var(--point); border-right: 2px solid #111; transition: width .6s cubic-bezier(.2,.9,.3,1); }
.grade-gauge .gg-sub { font-size: 12px; font-weight: 700; color: #444; }
.mission-box { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 2px dashed #ddd; }
.mission-box h3 { margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #111; }
.mission-box h3 b { background: var(--point); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.mission-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mission-box li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid #ddd; border-radius: 12px; font-size: 13px; font-weight: 700; color: #444; background: #fff; }
.mission-box li i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #bbb; display: grid; place-items: center; font-style: normal; font-size: 12px; color: transparent; }
.mission-box li em { margin-left: auto; font-style: normal; font-size: 11.5px; color: #777; font-weight: 800; }
.mission-box li.ok { border-color: #111; background: #f6fbec; color: #111; }
.mission-box li.ok i { background: var(--point); border-color: #111; color: #111; }
.mission-box p { margin: 0; font-size: 11.5px; font-weight: 700; color: #777; }
@media (prefers-reduced-motion: reduce) { #ptsBtn.pts-pop { animation: none; } }
.closet #closetSub { display: none; } /* 글자 줄이기: 설명 줄 숨김 */
.closet .kiosk-q { font-size: 16px; }
.closet .closet-tabs { position: sticky; top: -14px; z-index: 3; background: #fff; margin: 0 -14px; padding: 8px 14px; box-shadow: 0 6px 8px -8px rgba(0,0,0,.25); }
.closet .closet-grid { padding-bottom: 8px; }
.closet .kiosk-card > * { flex-shrink: 0; } .closet .kiosk-card > * { min-width: 0; } /* 11/8: 창이 그리드라 분류 탭 줄 너비만큼 칸이 넓어져 닫기(✕)가 화면 밖으로 밀리던 것 */ /* 창 안 줄이 눌려 줄어들어 아래 상품이 안 눌리던 것 */
/* 하루 마무리: 한 화면에 (사진 + 숫자 3칸 + 아이콘 줄 + 내일 한 줄) */
.daysum .kiosk-card { max-height: calc(100dvh - 24px); }
.daysum .ds-look { width: min(46%, 170px); max-height: 24dvh; margin-bottom: 8px; }
.daysum .ds-list { gap: 6px; margin-bottom: 8px; }
.daysum .ds-list li { padding: 8px 10px; font-size: 13px; }
.daysum .ds-nums { display: grid !important; grid-template-columns: repeat(3, 1fr); text-align: center; }
.daysum .ds-nums div { display: grid; gap: 2px; } .daysum .ds-nums small { color: #777; font-size: 11.5px; font-weight: 700; } .daysum .ds-nums b { font-size: 17px; text-align: center; }
.daysum .ds-icons-row { align-items: center; } .daysum .ds-icons-row .ds-stamps { font-size: 19px; gap: 3px; }
.daysum .ds-mis { font-style: normal; font-weight: 800; white-space: nowrap; }
.daysum .ds-list li.tm { justify-content: center; text-align: center; }
/* 공지 아이콘: 메뉴 옆, 안 읽은 공지 있으면 빨간 점 깜빡 */
.top-left { display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.notice-top { position: relative; }
.notice-top .nt-dot { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px #fff; animation: ntBlink 1.2s ease-in-out infinite; }
.notice-top .nt-dot[hidden] { display: none; }
@keyframes ntBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .notice-top .nt-dot { animation: none; } }

/* ── 빔빔 카페 메뉴판 (11-04): 흰·검·연두·실버 ── */
.cafe-menu { position: fixed; inset: 0; z-index: 30; background: rgba(17,17,17,.28); display: flex; align-items: flex-end; justify-content: center; }
.cafe-menu[hidden] { display: none; }
.cm-card { width: min(560px, 100%); max-height: 86vh; background: #fff; border-radius: 22px 22px 0 0; padding: 14px 14px calc(var(--safe-bottom) + 12px); display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0,0,0,.18); animation: cmUp .25s ease; }
@keyframes cmUp { from { transform: translateY(40px); opacity: 0; } }
.cm-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 10px; border-bottom: 1px solid #e3e5e8; }
.cm-head b { font-size: 16px; letter-spacing: .12em; color: var(--ink); }
.cm-head span { font-size: 12px; color: #6b6f75; flex: 1; }
.cm-x { border: 0; background: #f1f2f4; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; color: var(--ink); }
.cm-tabs { display: flex; gap: 6px; padding: 10px 2px 8px; }
.cm-tabs button { flex: 1; border: 1px solid #d9dde2; background: #fff; border-radius: 999px; padding: 8px 0; font-weight: 700; font-size: 14px; color: #555; }
.cm-tabs button.on { background: var(--ink); color: var(--point); border-color: var(--ink); }
.cm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; overflow-y: auto; padding: 2px; flex: 1; min-height: 0; }
@media (min-width: 480px) { .cm-grid { grid-template-columns: repeat(3, 1fr); } }
.cm-item { position: relative; border: 1.5px solid #e3e5e8; background: linear-gradient(180deg,#fff,#f4f5f7); border-radius: 16px; padding: 8px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--ink); }
.cm-item img { width: 100%; height: 96px; object-fit: contain; }
.cm-item i { font-style: normal; font-size: 52px; line-height: 96px; height: 96px; }
.cm-item b { font-size: 13px; }
.cm-item small { font-size: 11px; color: #6b6f75; line-height: 1.3; }
.cm-item em { font-style: normal; font-weight: 800; font-size: 13px; margin-top: 3px; }
.cm-item s { position: absolute; top: 6px; left: 6px; text-decoration: none; font-size: 10px; font-weight: 800; background: var(--point); color: var(--point-ink); border-radius: 999px; padding: 2px 7px; }
.cm-item.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--point) inset; }
.cm-item.on::after { content: '✓'; position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--point); font-weight: 900; font-size: 13px; line-height: 22px; }
.cm-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.cm-sum { flex: 1; font-size: 13px; color: #444; }
.cm-go { border: 0; background: var(--ink); color: var(--point); font-weight: 800; font-size: 15px; border-radius: 999px; padding: 12px 22px; }
.cm-go:disabled { opacity: .35; }
.cm-note { margin: 8px 0 0; font-size: 11px; color: #8a8e94; text-align: center; }
/* 11-06: 옷장 위 분류 탭이 납작하게 눌려 안 보이던 문제 — 카드가 넘칠 때 가로 스크롤 줄(탭)이 높이 0으로 줄어들었음 */
.closet .kiosk-card { grid-auto-rows: max-content; }
.closet-tabs { min-height: max-content; flex-shrink: 0; }
/* ── 2F 살롱 시술 단계 엔진 (흰·회·검·연두) ── */
.mg.salon .mg-card { max-height: 96vh; overflow-y: auto; }
.mg.salon .mg-help { font-size: 17px; line-height: 1.45; color: #333; word-break: keep-all; }
.mg.salon .mg-title { font-size: 22px; }
.mg.salon .mg-count { font-size: 15px; }
.sg-wrap { width: 100%; display: grid; gap: 8px; }
.sg-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; }
.sg-tab { flex: 0 0 auto; font-size: 16px !important; min-height: 44px; }
.sg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 210px; overflow-y: auto; padding: 2px; -webkit-overflow-scrolling: touch; }
.sg-item { font-size: 17px !important; min-height: 50px; border-radius: 16px !important; display: flex; align-items: center; justify-content: center; gap: 6px; word-break: keep-all; }
.sg-item .nail-sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); flex: none; }
.sg-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; position: sticky; bottom: 0; background: #fff; padding-top: 6px; }
.sg-sel { font-size: 17px; font-weight: 800; flex: 1 1 100%; text-align: left; }
.sg-ok { flex: 1 1 auto; font-size: 18px !important; min-height: 50px; }
.sg-ok:disabled { background: #d5d8dc; color: #888; border-color: #aaa; }
.sg-back { font-size: 16px !important; }
.sg-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.sg-svc { display: grid; gap: 2px; padding: 14px 8px !important; border-radius: 18px !important; min-height: 78px; }
.sg-svc b { font-size: 21px; } .sg-svc small { font-size: 15px; color: #555; font-weight: 600; }
.sg-fin { grid-column: 1 / -1; width: 100%; font-size: 19px !important; }
.sg-act { font-size: 18px !important; min-height: 52px; }
.sg-big { min-width: 70%; font-size: 20px !important; }
.sg-hold { touch-action: none; user-select: none; -webkit-user-select: none; min-width: 70%; background: var(--point); }

/* ── 카페 음료 만들기 (알바·체험, 11-06): 흰·검·연두·실버 ── */
.cg { position: fixed; inset: 0; z-index: 31; background: rgba(17,17,17,.3); display: flex; align-items: flex-end; justify-content: center; }
.cg[hidden] { display: none; }
.cg-card { position: relative; width: min(520px, 100%); background: #fff; border-radius: 22px 22px 0 0; padding: 16px 16px calc(var(--safe-bottom, 0px) + 16px); box-shadow: 0 -8px 30px rgba(0,0,0,.18); animation: cmUp .25s ease; }
.cg-x { position: absolute; top: 12px; right: 12px; border: 0; background: #f1f2f4; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; }
.cg-eyebrow { margin: 0; font-size: 12px; font-weight: 800; color: #5f8a26; }
.cg-title { margin: 2px 0 10px; font-size: 19px; }
.cg-order { display: flex; gap: 10px; align-items: center; background: #f4f5f7; border-radius: 14px; padding: 8px 10px; min-height: 64px; }
.cg-order:empty { display: none; }
.cg-order img { width: 60px; height: 60px; object-fit: contain; }
.cg-emo { font-size: 44px; width: 60px; text-align: center; }
.cg-order small { display: block; font-size: 12px; color: #6b6f75; }
.cg-order b { font-size: 17px; }
.cg-steps { display: flex; gap: 4px; margin: 10px 0 6px; }
.cg-steps i { flex: 1; font-style: normal; text-align: center; border-radius: 10px; padding: 7px 0; font-size: 12px; font-weight: 800; background: #f1f2f4; color: #555; }
.cg-steps i.ok { background: #cdeba0; color: #2f4a17; }
.cg-steps i.now { background: #16171b; color: #cdeba0; }
.cg-talk { min-height: 20px; margin: 6px 2px; font-size: 14px; font-weight: 700; color: #222; }
.cg-talk.pop { animation: cgPop .3s ease; }
@keyframes cgPop { from { transform: scale(.94); opacity: .3; } }
.cg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cg-opts button { border: 1.5px solid #d9dde2; background: linear-gradient(180deg,#fff,#f4f5f7); border-radius: 16px; padding: 14px 6px; font-size: 16px; font-weight: 800; color: #16171b; }
.cg-opts button.right { background: #cdeba0; border-color: #16171b; }
.cg-opts button.wrong { opacity: .35; animation: cgShake .3s; }
@keyframes cgShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.cg-end { text-align: center; padding: 6px 0 2px; }
.cg-stars { font-size: 38px; letter-spacing: 6px; margin: 0; color: #16171b; }
.cg-msg { margin: 6px 0 12px; font-size: 14px; color: #444; }
.cg-ok { border: 0; background: #16171b; color: #cdeba0; font-weight: 800; font-size: 16px; border-radius: 999px; padding: 12px 36px; }

/* ── 처음 소개 · 새 소식 카드 (11-06) ── */
.bb-intro { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(17,17,17,.42); }
.bb-intro[hidden] { display: none; }
.bi-card { width: min(380px, 100%); background: #fff; border: 3px solid #16171b; border-radius: 26px; padding: 22px 20px 18px; text-align: center; box-shadow: 8px 10px 0 #cdeba0; animation: cmUp .25s ease; }
.bi-tag { margin: 0; display: inline-block; background: #16171b; color: #cdeba0; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 4px 12px; }
.bi-ic { font-size: 54px; margin: 12px 0 4px; }
.bi-t { margin: 0 0 8px; font-size: 21px; }
.bi-b { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #333; }
.bi-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.bi-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d9dde2; }
.bi-dots i.on { width: 22px; border-radius: 6px; background: #16171b; }
.bi-row { display: flex; gap: 8px; }
.bi-skip { flex: 1; border: 1.5px solid #d9dde2; background: #fff; border-radius: 999px; padding: 12px 0; font-weight: 700; color: #555; }
.bi-next { flex: 1.6; border: 0; background: #16171b; color: #cdeba0; border-radius: 999px; padding: 12px 0; font-weight: 800; font-size: 15px; }

/* ── 오른쪽 바로가기 세로줄 (11-06): 엄지 닿는 곳, 메뉴 안 버튼도 그대로 ── */
.rail { position: fixed; right: 10px; top: 28%; z-index: 6; display: flex; flex-direction: column; gap: 24px; pointer-events: none; }
.rail .menu-btn { position: relative; pointer-events: auto; }
.rail .menu-btn[hidden] { display: none; }
.rail .menu-btn i { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 2px); font-style: normal; font-size: 10px; font-weight: 800; white-space: nowrap; color: #16171b; background: #cdeba0; border-radius: 6px; padding: 0 4px; line-height: 15px; }
body.in-studio .rail, body.in-elev .rail { display: none !important; }
/* ── 🛒 장바구니 (11/6): 위쪽 🛒 버튼(담은 개수) + 장바구니 창. 흰·회·검·연두·연핑크만 ── */
.top-right .cart-top { position: relative; }
.top-right .cart-top[hidden], body.at-home .top-right .cart-top { display: none; }
.cart-badge { position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #111; color: var(--point); font: 800 11.5px/20px "Pretendard Variable", sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff; }
.closet-cart .cart-peek { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; color: #fff; font: inherit; font-weight: 800; padding: 4px 0; cursor: pointer; }
.closet-cart .cart-peek small { color: var(--point); font-size: 12px; margin-left: 4px; }
.basket-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.basket-item { display: grid; grid-template-columns: 56px 1fr auto 36px; align-items: center; gap: 10px; padding: 6px 8px; border: 2px solid #e4e6e9; border-radius: 16px; background: #fff; }
.basket-item.on { border-color: #111; box-shadow: 0 0 0 3px var(--point); }
.basket-art { width: 56px; height: 56px; border-radius: 12px; background: #f0f2f5; overflow: hidden; display: grid; place-items: center; }
.basket-art img { width: 100%; height: 100%; object-fit: cover; }
.basket-name { min-width: 0; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.3; word-break: keep-all; }
.basket-on { justify-self: start; font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--point); color: #111; }
.basket-price { font-size: 14px; white-space: nowrap; }
.basket-x { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #111; background: #fff; color: #111; font-size: 15px; font-weight: 800; padding: 0; }
.basket-x:active { background: #f6c7d3; }
.basket-svc:empty { display: none; }
.basket-svc { margin-bottom: 6px; }
.basket-note { margin: 2px 0 10px; font-size: 13px; font-weight: 700; color: #555; text-align: center; }
.basket-note:empty { display: none; }
.basket-note.lack { color: #111; background: #f6c7d3; border-radius: 12px; padding: 8px 10px; }
.basket-acts { display: grid; gap: 8px; }
.basket-acts .basket-photo { background: var(--point); border-color: #111; color: #111; display: grid; gap: 2px; justify-items: center; padding: 8px 12px; }
.basket-acts .basket-photo small { font-size: 11.5px; color: #2f4a17; }
@media (max-width: 380px) { .top-right { gap: 5px; } .top-right .pts-btn { padding: 0 8px; } .basket-item { grid-template-columns: 48px 1fr auto 34px; gap: 8px; } .basket-art { width: 48px; height: 48px; } }

/* ── 11-06 빔빔 홈 (회원가입 → 앱 설치 → 입장) ── 흰·검·연두·실버 */
body.bbh-on #loading, body.bbh-on .top, body.bbh-on .rail, body.bbh-on #scene { display: none !important; }
.bbh { position: fixed; inset: 0; z-index: 10; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; user-select: text;
  background: #fff; color: var(--ink); padding: calc(var(--safe-top) + 0px) 0 calc(var(--safe-bottom) + 28px); }
.bbh[hidden] { display: none; }
.bbh > * { max-width: 480px; margin-left: auto; margin-right: auto; }
.bbh-inapp { display: flex; gap: 10px; align-items: center; background: var(--ink); color: #fff; padding: 12px 16px; font-size: 13px; line-height: 1.45; max-width: none; }
.bbh-inapp p { margin: 0; flex: 1; } .bbh-inapp b { color: var(--point); }
.bbh-inapp button { flex: none; border: 0; border-radius: 999px; background: var(--point); color: var(--point-ink); font: 800 13px/1 inherit; padding: 10px 14px; }
.bbh-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 8px; }
.bbh-logo { height: 20px; width: auto; }
.bbh-login { border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; font: 700 13px/1 inherit; padding: 8px 14px; color: var(--ink); }
.bbh-hero { position: relative; margin: 6px 16px 0; border-radius: 26px; overflow: hidden; min-height: 330px; background: #10141a; color: #fff; }
.bbh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.bbh-copy { position: relative; z-index: 1; padding: 26px 22px 24px; max-width: 60%; }
.bbh-eyebrow { display: inline-block; margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--point-ink); background: var(--point); border-radius: 999px; padding: 5px 10px; }
.bbh-copy h1 { margin: 0; font: 400 38px/1.12 'Jua', inherit; letter-spacing: -.01em; }
.bbh-lead { margin: 12px 0 0; font-size: 13px; word-break: keep-all; line-height: 1.6; color: #e6e9ee; } .bbh-lead b { color: var(--point); }
.bbh-cat { position: absolute; right: -14px; bottom: -6px; width: 52%; max-width: 230px; height: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); animation: bbhBob 3.2s ease-in-out infinite; }
@keyframes bbhBob { 50% { transform: translateY(-6px); } }
.bbh-steps { list-style: none; display: flex; gap: 6px; padding: 0 16px; margin: 18px auto 12px; }
.bbh-steps li { flex: 1; display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 14px; background: #f1f3f5; color: #8a9099; font-size: 13px; font-weight: 700; }
.bbh-steps b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d5d9de; color: #fff; font-size: 12px; flex: none; }
.bbh-steps li.now { background: var(--ink); color: #fff; } .bbh-steps li.now b { background: var(--point); color: var(--point-ink); }
.bbh-steps li.ok { background: #eef7e2; color: var(--point-ink); } .bbh-steps li.ok b { background: var(--point-ink); }
.bbh-steps li.ok b::after { content: ''; }
.bbh-panel { padding: 0 16px; display: grid; gap: 10px; }
.bbh-panel[hidden] { display: none; }
.bbh-hi { margin: 2px 0 0; font-size: 16px; line-height: 1.5; } .bbh-hi small { color: #6b717a; font-size: 13px; }
.bbh-gift { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #f4fae9, #fff); border: 1.5px solid #dcefc2; }
.bbh-gift p { margin: 0; display: grid; gap: 3px; } .bbh-gift b { font-size: 15.5px; } .bbh-gift small { font-size: 12.5px; color: #5d6b4c; }
.bbh-coin { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9dde2 45%, #9aa1aa); color: var(--ink); font: 900 18px/1 inherit; box-shadow: inset 0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.15); }
.bbh-cta { border: 0; border-radius: 18px; background: var(--ink); color: #fff; font: 800 17px/1 inherit; padding: 19px 16px; box-shadow: 0 5px 0 var(--point); transition: transform .08s; }
.bbh-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--point); }
.bbh-cta:disabled { background: #b9bec5; box-shadow: none; }
.bbh-cta[hidden] { display: none; }
.bbh-small { margin: 0; text-align: center; word-break: keep-all; font-size: 12px; color: #8a9099; line-height: 1.5; }
.bbh-web { border: 0; background: none; color: #555; font: 600 13.5px/1.4 inherit; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.bbh-done { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--point); color: var(--point-ink); font-size: 14px; line-height: 1.5; }
.bbh-done[hidden], .bbh-ios[hidden], .bbh-inapp[hidden] { display: none; }
.bbh-ios { border-radius: 18px; border: 1.5px solid #e3e6ea; padding: 14px 16px; }
.bbh-ios-t { margin: 0 0 8px; font-weight: 800; font-size: 14.5px; }
.bbh-ios ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.bbh-ios li { display: flex; align-items: center; gap: 12px; font-size: 14px; counter-increment: s; }
.bbh-ios li::before { content: counter(s); flex: none; width: 20px; font-weight: 900; color: #9aa1aa; }
.bbh-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #f1f3f5; color: #0a84ff; }
.bbh-ico svg { width: 22px; height: 22px; } .bbh-ico-bb { background: none; } .bbh-ico-bb img { width: 38px; height: 38px; border-radius: 10px; }
.bbh-feat { list-style: none; padding: 0 16px; margin: 26px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bbh-feat li { display: grid; gap: 2px; padding: 14px; border-radius: 18px; background: #f6f7f8; }
.bbh-feat img { width: 46px; height: 46px; margin-bottom: 6px; } .bbh-feat b { font-size: 14.5px; } .bbh-feat span { font-size: 12px; color: #7a8089; }
.bbh-more { list-style: none; padding: 0 20px; margin: 16px auto 0; display: grid; gap: 9px; font-size: 13.5px; color: #333; }
.bbh-foot { margin: 22px auto 0; padding: 0 16px; text-align: center; font-size: 11.5px; color: #9aa1aa; } .bbh-foot a { color: inherit; }
@media (max-width: 360px) { .bbh-copy h1 { font-size: 32px; } .bbh-copy { max-width: 70%; } }
/* 11-06: 옷장 칸이 좁은 폰에서 가격 버튼이 옆 칸·아래 칸과 겹치고, 맨 아래 줄 이름이 잘리던 것
   (버튼이 줄바꿈 없이 칸보다 넓어서 넘침) → 버튼·그림을 칸 안에 맞추고, 창 안 세로 스크롤을 분명히 허용 */
.closet .kiosk-card { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 22px; }
.closet-item { min-width: 0; }
.closet-item > b { width: 100%; overflow-wrap: anywhere; word-break: keep-all; font-size: 11.5px; line-height: 1.3; }
.closet-btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) { .closet-btn s { display: none; } .closet-btn { padding: 6px 7px; font-size: 10.5px; } }

/* 11-06 상단 단계바 C안 (아이콘 칩): 흰 원 칩 + 끝난 단계 연두 점 + 지금 단계만 검정 칩에 글자 */
.step-bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; height: 44px; gap: 6px; padding: 0 2px; justify-content: safe center; }
.step-bar button { position: relative; height: 36px; min-width: 36px; padding: 0; justify-content: center; gap: 6px; border-radius: 999px; background: rgba(255,255,255,.94); color: #9aa1aa; box-shadow: 0 2px 8px rgba(0,0,0,.16); font-size: 13px; font-weight: 800; }
.step-bar button svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.step-bar button.done { background: #eef7e2; color: #2f4a17; }
.step-bar button.done::after { content: ''; position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%; background: #7bbf3e; border: 2px solid #fff; }
.step-bar button.cur { background: #111; color: var(--point); padding: 0 14px 0 11px; }
.step-bar button.cur.done::after { display: none; }
.step-bar button[data-down] { background: #111; color: var(--point); padding: 0 14px; }
@media (max-width: 380px) { .step-bar { gap: 4px; } .step-bar button { height: 32px; min-width: 30px; font-size: 12px; } .step-bar button svg { width: 16px; height: 16px; } .step-bar button.cur { padding: 0 10px 0 8px; gap: 5px; } }
/* ── 11/6 2차: 앱 안 브라우저(스레드·인스타·카톡) · 낮은 화면 ──
   미니게임 창(.mg)이 화면보다 길면 위아래가 잘리고 스크롤도 안 돼서 '이 옷으로 →' 같은 아래 버튼을 못 눌렀음
   (스타일링 둘러보기 → 옷 고르기 다음 단계로 못 감). 창 안에서 스크롤되게 하고, 짧은 화면에선 그림 칸만 조금 작게 */
.mg { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; place-items: initial; padding-bottom: calc(var(--safe-bottom) + 16px); }
.mg-card { margin: auto; }
@media (max-height: 720px) { .mg-canvas { max-height: 36vh; max-height: 36dvh; } .mg-canvas canvas { object-fit: contain; } }
.mg.salon .mg-card { max-height: 96dvh; }
.cm-card { max-height: 86dvh; }
/* 외부 브라우저로 열기 안내 (막지 않음, ✕로 닫음) */
.inapp-hint { position: fixed; left: 50%; top: calc(var(--safe-top) + 108px); transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 7px 8px 7px 14px; border-radius: 999px; background: #111; color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: 0 3px 0 var(--point); white-space: nowrap; animation: paIn .35s ease-out both; }
.inapp-hint span { overflow: hidden; text-overflow: ellipsis; }
.inapp-hint b { color: var(--point); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.inapp-go { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; background: var(--point); color: #111; text-decoration: none; font-weight: 800; }
.inapp-x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 12px; cursor: pointer; }

/* ── 카페 음료 만들기 v2 (11-06): 컵 그림 · 시간 막대 · 손님 반응 · 콤보 · 결과 (흰·검·연두·실버) ── */
.cg-time { height: 8px; border-radius: 99px; background: #e6e8ec; overflow: hidden; margin: 0 0 8px; }
.cg-time[hidden], .cg-stage[hidden] { display: none; }
.cg-time i { display: block; height: 100%; width: 100%; background: #cdeba0; border-radius: 99px; transition: width .12s linear; }
.cg-time.late i { background: #b8bec6; }
.cg-stage { display: flex; gap: 8px; align-items: stretch; }
.cg-cupbox { flex: 0 0 104px; display: grid; place-items: center; background: #f4f5f7; border-radius: 16px; min-height: 132px; }
.cg-cupbox:empty { display: none; }
.cg-cupbox.done { animation: cgDone .8s ease; }
@keyframes cgDone { 30% { transform: scale(1.08) rotate(-3deg); background: #cdeba0; } 60% { transform: scale(1.04) rotate(3deg); } }
.cg-cup { width: 100px; height: 120px; overflow: visible; }
.cg-cup .liq { transition: transform .5s cubic-bezier(.3,1.3,.5,1), fill .4s; }
.cg-cup .ice, .cg-cup .mixg, .cg-cup .bub, .cg-cup .syr, .cg-cup .tops > g, .cg-cup .mixg path { transition: opacity .35s, transform .4s; }
.cg-cup .tops > g { opacity: 0; transform: translateY(-8px); }
.cg-cup .ice, .cg-cup .mixg, .cg-cup .syr { opacity: 0; }
.cg-cup .bub circle { animation: cgBub 1.6s ease-in-out infinite; }
.cg-cup .bub circle:nth-child(2n) { animation-delay: .5s; }
@keyframes cgBub { 50% { transform: translateY(-6px); } }
.cg-plate { position: relative; width: 80px; height: 80px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid #b8bec6; display: grid; place-items: center; transition: border-color .3s; }
.cg-plate.on { border-color: #16171b; }
.cg-pl { position: absolute; top: -8px; left: -2px; font-size: 22px; }
.cg-food { font-size: 38px; filter: grayscale(1) opacity(.35); transition: filter .3s, transform .4s; }
.cg-food.on { filter: none; transform: scale(1.12); }
.cg-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cg-side .cg-order { min-height: 0; padding: 6px 8px; }
.cg-side .cg-order img, .cg-side .cg-emo { width: 44px; height: 44px; font-size: 34px; line-height: 44px; }
.cg-side .cg-order b { font-size: 15px; word-break: keep-all; }
.cg-cust { display: flex; gap: 6px; align-items: center; flex: 1; }
.cg-face { font-size: 34px; flex: none; }
.cg-face.bump { animation: cgBump .4s ease; }
@keyframes cgBump { 40% { transform: scale(1.35) rotate(-8deg); } }
.cg-cust .cg-talk { position: relative; flex: 1; margin: 0; min-height: 40px; display: flex; align-items: center; padding: 6px 10px; background: #f1f2f4; border-radius: 12px; font-size: 13px; line-height: 1.3; word-break: keep-all; }
.cg-cust .cg-talk::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #f1f2f4; }
.cg-combo { margin: 0; min-height: 18px; font-size: 13px; font-weight: 800; color: #3f6a12; }
.cg-combo.pop { animation: cgPop .35s ease; }
.cg-opts button:active { transform: scale(.96); }
.cg-opts button { min-height: 52px; font-size: 15px; }
.cg-stars { display: flex; justify-content: center; gap: 6px; }
.cg-stars span { font-size: 46px; line-height: 1.1; color: #c4c9d0; transform: scale(.4); opacity: 0; animation: cgStar .5s cubic-bezier(.3,1.6,.5,1) forwards; }
.cg-stars span.on { color: #16171b; text-shadow: 0 0 0 #cdeba0, 0 2px 0 #cdeba0; }
@keyframes cgStar { to { transform: scale(1); opacity: 1; } }
.cg-pay { margin: 4px 0 0; display: inline-block; background: #cdeba0; color: #16171b; font-weight: 900; font-size: 20px; padding: 6px 18px; border-radius: 999px; animation: cgPop .5s .9s backwards; }
@media (max-width: 380px) { .cg-cupbox { flex-basis: 92px; } .cg-cup { width: 88px; height: 106px; } .cg-card { padding-left: 12px; padding-right: 12px; } }
@media (prefers-reduced-motion: reduce) { .cg-cup .bub circle, .cg-cupbox.done, .cg-face.bump, .cg-stars span { animation: none; transform: none; opacity: 1; } }
/* 2025 FW 트렌드 신상 표시 (옷장 카드 이름 앞) */
.new-tag { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 999px; background: #cdeba0; color: #16171b; font-style: normal; font-size: 10px; font-weight: 800; vertical-align: 1px; }