/* =========================================================================
   Syrup 미니게임 — 공통 화면 틀
   tokens.css 다음에 불러와요. 값은 모두 토큰을 써요.
   Figma 출처는 각 블록 위 주석의 node-id 참고 (Syrup_Design-System 파일).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }
html { touch-action: manipulation; }   /* 두 번 탭 확대 막기 */

body {
  background-color: var(--temp-stage-bg);
  background-image: radial-gradient(var(--temp-stage-dot) 1px, transparent 1.2px);
  background-size: 18px 18px;
  color: var(--color-gray-100);
  font-family: var(--font-family-pretendard);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;      /* 한글이 단어 중간에서 끊기지 않게 */
  overflow-wrap: anywhere;
  overflow: hidden;
  /* 복사 막기: 글자 선택, 길게 눌렀을 때 뜨는 메뉴(iOS), 그림 끌어가기 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; user-drag: none; }

button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* -------------------------------------------------------------------------
   휴대폰 틀 (임시 디자인) — PC 가운데 360×780, 화면이 작으면 ui.js가 비율대로 줄여요
   ------------------------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.phone-slot {
  position: relative;
  width: calc(var(--phone-w, 380px) * var(--s, 1));
  height: calc(var(--phone-h, 800px) * var(--s, 1));
}

.phone {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--phone-w, 380px);
  height: var(--phone-h, 800px);
  padding: var(--temp-phone-bezel-width);
  border-radius: var(--temp-phone-radius);
  background: var(--temp-phone-bezel);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 30px 60px -20px rgba(34, 34, 34, 0.45),
    0 12px 24px -12px rgba(34, 34, 34, 0.3);
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
}

.screen {
  position: relative;
  width: 360px;
  height: 780px;
  overflow: hidden;
  border-radius: var(--temp-screen-radius);
  background: var(--color-gray-white);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* 휴대폰처럼 좁은 화면: 테두리 없이 화면만 */
.stage.is-compact { background: var(--color-gray-white); }
.stage.is-compact .phone { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.stage.is-compact .screen { border-radius: 0; width: var(--phone-w); height: var(--phone-h); }  /* 휴대폰은 화면 크기에 맞춰 꽉 채움 */

/* -------------------------------------------------------------------------
   상단바 — Header Type=Back, Theme=Light (8533:26686)
   높이 55, 왼쪽 8 / 오른쪽 16, 아이콘 36
   ------------------------------------------------------------------------- */
.topbar {
  flex: none;
  position: relative;
  z-index: 2;
  height: 55px;
  display: flex;
  align-items: center;
  gap: var(--space-50);
  padding: 0 var(--space-400) 0 var(--space-200);
  background: var(--color-gray-white);
}

.topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-gray-black);
}

.topbar-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-50);
}

/* 점수 칩 (임시 디자인) — Header Timer(8535:33342)의 주황 글씨 + 파스텔 코랄 조합을 따름 */
.score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-100);
  height: 32px;
  padding: 0 var(--space-300);
  margin-right: var(--space-150);
  border-radius: var(--radius-circle);
  background: var(--color-third-pastel-coral);
  color: var(--color-primary-orange);
  line-height: 32px;
  white-space: nowrap;
}
.score-chip[hidden] { display: none; }
.score-chip-label {
  font: var(--font-weight-500) var(--font-size-1) / 32px var(--font-family-pretendard);
  letter-spacing: var(--letter-spacing-1);
}
.score-chip-value {
  font: var(--font-weight-700) var(--font-size-3) / 32px var(--font-family-pretendard);
  letter-spacing: var(--letter-spacing-2);
  font-variant-numeric: tabular-nums;
}
.score-chip.is-bump .score-chip-value { animation: chip-bump var(--temp-duration-base) var(--temp-ease-pop); }
@keyframes chip-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.score-chip-value { display: inline-block; }

/* 아이콘 버튼 — Header / Icon (8533:27224) 36×36 */
.icon-btn {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--temp-duration-fast), transform var(--temp-duration-fast);
}
.icon-btn:hover { background: var(--color-gray-900); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--temp-focus-ring); }
.icon-btn[hidden] { display: none; }
.icon-btn img, .icon-btn svg { display: block; }

/* Icon / Volume (10011:126670)은 흰색 아이콘이라 흰 상단바에서는 진하게 칠해서 보여줘요 */
.icon-btn-volume img { width: 28px; height: 28px; filter: brightness(0); opacity: 0.86; }

/* -------------------------------------------------------------------------
   게임 영역
   ------------------------------------------------------------------------- */
.game {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--color-gray-950);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.game.is-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.game.is-scroll::-webkit-scrollbar { display: none; }

/* -------------------------------------------------------------------------
   버튼 — Button (8662:27880)
   크기: btn-xs / btn-s / btn-m / btn-l / btn-xl
   종류: btn-fill / btn-weak / btn-outline-primary / btn-outline-secondary / btn-checked
   비활성: disabled 속성
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-family: var(--font-family-pretendard);
  font-weight: var(--font-weight-700);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: transform var(--temp-duration-fast), filter var(--temp-duration-fast), background-color var(--temp-duration-fast);
}
.btn:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.94); }
.btn:focus-visible { outline: none; box-shadow: var(--temp-focus-ring); }
.btn:disabled { cursor: default; }

.btn-xs { min-height: 26px; min-width: 37px; padding: var(--space-50) var(--space-200); gap: var(--space-50); border-radius: var(--radius-150);
  font-size: var(--font-size-3); line-height: var(--line-height-19); letter-spacing: var(--letter-spacing-2); }
.btn-s  { min-height: 30px; min-width: 52px; padding: var(--space-50) var(--space-250); gap: var(--space-50); border-radius: var(--radius-150);
  font-size: var(--font-size-3); line-height: var(--line-height-19); letter-spacing: var(--letter-spacing-2); }
.btn-m  { height: 38px; min-height: 38px; min-width: 64px; padding: var(--space-50) var(--space-300); gap: var(--space-50); border-radius: var(--radius-150);
  font-size: var(--font-size-4); line-height: var(--line-height-18); letter-spacing: var(--letter-spacing-3); }
.btn-l  { min-height: 48px; min-width: 80px; padding: var(--space-50) var(--space-300); gap: var(--space-100); border-radius: var(--radius-250);
  font-size: var(--font-size-6); line-height: var(--line-height-15); letter-spacing: var(--letter-spacing-3); }
.btn-xl { min-height: 56px; min-width: 96px; padding: var(--space-50) var(--space-700); gap: var(--space-100); border-radius: var(--radius-250);
  font-size: var(--font-size-6); line-height: var(--line-height-15); letter-spacing: var(--letter-spacing-3); }

.btn-fill { background: var(--color-primary-orange); color: var(--color-gray-white); }
.btn-fill:disabled { background: var(--color-gray-600); color: var(--color-gray-white); }

.btn-weak { background: var(--color-gray-900); color: var(--color-gray-200); }
.btn-weak:disabled { background: var(--color-gray-900); color: var(--color-gray-600); }

.btn-outline-primary { background: var(--color-gray-white); border-color: var(--color-primary-orange); color: var(--color-primary-orange); }
.btn-outline-secondary { background: var(--color-gray-white); border-color: var(--color-gray-800); color: var(--color-gray-black); }
.btn-outline-primary:disabled,
.btn-outline-secondary:disabled { background: var(--color-gray-white); border-color: var(--color-gray-800); color: var(--color-gray-600); }

/* Checked=True — 배경 없이 주황 글씨 */
.btn-checked { background: var(--color-gray-white); color: var(--color-primary-orange); }

.btn-block { display: flex; width: 100%; }

/* 버튼 안 금 아이콘 — .primitive / Button / Gold (8680:43500) 24×24 안에 24×13 이미지 */
.btn-gold { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.btn-gold img { width: 24px; height: 13px; object-fit: cover; }

/* 텍스트 버튼 (임시 디자인) — .primitive / Button / Text Button (8576:942) 자리 */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-100) var(--space-200);
  border: 0;
  border-radius: var(--radius-150);
  background: transparent;
  color: var(--color-gray-400);
  font: var(--font-weight-500) var(--font-size-2) / var(--line-height-19) var(--font-family-pretendard);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-gray-700);
  cursor: pointer;
}
.btn-text:hover { color: var(--color-gray-200); }
.btn-text:focus-visible { outline: none; box-shadow: var(--temp-focus-ring); }

/* -------------------------------------------------------------------------
   딤 + 팝업 — Dim (10285:3541), Dialog (8578:2117)
   폭 288, 모서리 16, 이미지 100px(위로 64px 걸침), 버튼 영역 20 / 간격 8
   ------------------------------------------------------------------------- */
.layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--space-900);
  background: var(--color-opacity-black-100);
  opacity: 0;
  transition: opacity var(--temp-duration-fast) ease-out;
}
.layer.is-open { opacity: 1; }
.layer.is-closing { opacity: 0; }

.dialog {
  position: relative;
  width: 288px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-400);
  background: var(--color-gray-white);
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: transform var(--temp-duration-base) var(--temp-ease-pop), opacity var(--temp-duration-fast) ease-out;
}
.layer.is-open .dialog { transform: none; opacity: 1; }
.layer.is-closing .dialog { transform: translateY(8px) scale(0.98); opacity: 0; }
.dialog.has-image { margin-top: 64px; }

.dialog-image {
  position: absolute;
  z-index: 2;
  top: -64px;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translateX(-50%);
  pointer-events: none;
}
.dialog-image img { position: absolute; inset: 4.17%; width: 91.66%; height: 91.66%; object-fit: contain; }
.dialog-image.is-pixel img { inset: 14%; width: 72%; height: 72%; image-rendering: pixelated; }

.dialog-confetti {
  position: absolute;
  z-index: 1;
  top: -181px;
  left: 50%;
  width: 360px;
  height: 270px;
  transform: translateX(-50%);
  pointer-events: none;
}
.dialog-confetti img { width: 100%; height: 100%; object-fit: cover; }

.dialog-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-900) var(--space-500) 0;
  text-align: center;
}
.dialog.has-image .dialog-content { padding-top: var(--space-1100); }

.dialog-title { margin: 0; color: var(--color-gray-100); text-wrap: balance; }
.dialog-title .accent { color: var(--color-primary-orange); }
.dialog-text { margin: 0; color: var(--color-gray-200); text-wrap: pretty; }
.dialog-slot { width: 100%; text-align: left; }

.dialog-actions {
  width: 100%;
  display: flex;
  gap: var(--space-200);
  padding: var(--space-500);
}
.dialog-actions .btn { flex: 1 1 0; min-width: 0; }
.dialog-sub-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-100);
  margin-top: calc(var(--space-300) * -1);
  padding-bottom: var(--space-400);
}

/* 게임 방법 목록 (임시 디자인) — Dialog Usage "D. 상세 안내"의 점 목록을 따름 */
.howto-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-150); }
.howto-list li {
  position: relative;
  padding-left: 11px;
  color: var(--color-gray-200);
}
.howto-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.howto-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-100); margin-top: var(--space-300); }
.kbd {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-50) var(--space-200);
  border-radius: var(--radius-150);
  background: var(--color-gray-900);
  color: var(--color-gray-300);
  font: var(--font-weight-500) var(--font-size-1) / var(--line-height-20) var(--font-family-pretendard);
}

/* 결과 점수판 (임시 디자인) */
.result-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding: var(--space-400);
  border-radius: var(--radius-300);
  background: var(--color-gray-950);
}
.result-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-200); }
.result-row-label { color: var(--color-gray-400); }
.result-row-main .result-row-value { color: var(--color-primary-orange); font-variant-numeric: tabular-nums; }
.result-row-value { display: inline-flex; align-items: center; gap: var(--space-150); color: var(--color-gray-100); font-variant-numeric: tabular-nums; }
.result-divider { height: 1px; background: var(--color-gray-850); }

/* NEW 뱃지 — Dialog / Image Type=Gold_New (8600:39560) */
.badge-new {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 5px;
  border-radius: var(--radius-circle);
  background: var(--color-primary-orange);
  color: var(--color-gray-white);
  font: var(--font-weight-800) 10.833px / 11.684px var(--font-family-pretendard);
  font-style: normal;
}

/* -------------------------------------------------------------------------
   토스트 — Toast (8502:10441) 폭 300, 배경 rgba(34,34,34,.8), 모서리 16
   ------------------------------------------------------------------------- */
.toast {
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: var(--temp-toast-bottom);
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
  padding: var(--space-300) var(--space-500);
  border-radius: var(--radius-400);
  background: var(--color-toast-bg);
  color: var(--color-gray-white);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: transform var(--temp-duration-base) var(--temp-ease-out), opacity var(--temp-duration-base) ease-out;
}
.toast.is-open { transform: translate(-50%, 0); opacity: 1; }
.toast-icon { width: 20px; height: 20px; flex: none; }
.toast-icon img { width: 96.62%; height: 96.62%; margin: 1.69%; }

/* -------------------------------------------------------------------------
   카운트다운 (임시 디자인)
   ------------------------------------------------------------------------- */
.layer-countdown { background: var(--color-opacity-black-200); }
.countdown-num {
  color: var(--color-gray-white);
  font: var(--font-weight-800) var(--temp-countdown-size) / 1 var(--font-family-pretendard);
  letter-spacing: var(--letter-spacing-0);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  animation: count-pop 700ms var(--temp-ease-pop) both;
}
.countdown-num.is-go { color: var(--color-secondary-yellow); font-size: 64px; }
.countdown-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-200); }
.countdown-label { color: var(--color-gray-white); font: var(--font-weight-700) var(--font-size-8) / 1 var(--font-family-pretendard); opacity: 0.9; }
@keyframes count-pop {
  0% { transform: scale(1.6); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0; }
}

/* -------------------------------------------------------------------------
   카드 / 목록 줄 — 앱 모으기 화면(Syrup_App 1:1535)의 카드와 할 일 목록 모양
   ------------------------------------------------------------------------- */
.card {
  border-radius: var(--radius-500);
  background: var(--color-gray-white);
  box-shadow: var(--shadow-light-100);
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-300) 0;
}
.list-row-icon { flex: none; width: 48px; height: 48px; }
.list-row-icon svg { display: block; width: 48px; height: 48px; }
.list-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-50); }
.list-row-eyebrow { color: var(--color-primary-orange); }
.list-row-title { margin: 0; color: var(--color-gray-100); }
.list-row-meta { color: var(--color-gray-500); font-variant-numeric: tabular-nums; }
.list-row .btn { flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .countdown-num { animation: none !important; }
}