/* ===== ABC Play — 키드-프루프 스타일 ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 더블탭 줌 / 롱프레스 콜아웃 / 텍스트 선택 차단 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  height: 100%;
}

body {
  /* iOS 러버밴드 + 100vh URL바 버그 차단 */
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: linear-gradient(160deg, #fef6e4 0%, #ffe0ec 55%, #d8f3ff 100%);
}

#app {
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ===== 화면 전환 ===== */
.screen {
  display: none;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  padding: 4vmin;
  position: relative;
}
.screen.active { display: flex; }

.screen-title { font-size: 10vmin; }

/* ===== 타이틀 ===== */
.logo-emoji { font-size: 16vmin; }
.logo-text {
  font-size: 11vmin;
  color: #ff6392;
  text-shadow: 0.6vmin 0.6vmin 0 #ffd6e0;
  letter-spacing: 0.5vmin;
}

.huge-btn {
  width: 34vmin;
  height: 34vmin;
  min-width: 88px;
  min-height: 88px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1.4vmin 0 #ffb3c6, 0 2vmin 4vmin rgba(0,0,0,.12);
  font-size: 15vmin;
  cursor: pointer;
}
.huge-btn:active { transform: translateY(0.8vmin); box-shadow: 0 0.6vmin 0 #ffb3c6; }

/* ===== 공용 카드 ===== */
.choice-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4vmin;
  width: 100%;
}

.big-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vmin;
  min-width: 88px;
  min-height: 88px;
  width: 26vmin;
  height: 26vmin;
  border: none;
  border-radius: 5vmin;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0,0,0,.08), 0 1.6vmin 3vmin rgba(0,0,0,.10);
  cursor: pointer;
  transition: transform .1s;
}
.big-card:active { transform: scale(.94); }
.card-emoji { font-size: 13vmin; line-height: 1; }
.card-label { font-size: 4.5vmin; font-weight: 700; color: #555; }
/* 도안 카드 라벨 — 한 줄 고정, 넘치면 JS(fitLabels)가 폰트 축소.
   상한 26px — 적응형 다열에서 카드가 작아져도 라벨만 과대해지지 않게 */
.sheet-card .card-label {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(16px, 4.5vmin, 26px);
}

/* ===== 코너 버튼 ===== */
.corner-btn {
  position: absolute;
  top: max(2.5vmin, env(safe-area-inset-top));
  width: 13vmin;
  height: 13vmin;
  min-width: 60px;
  min-height: 60px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0.6vmin 1.6vmin rgba(0,0,0,.12);
  font-size: 6.5vmin;
  cursor: pointer;
  z-index: 5;
}
.corner-left { left: 3vmin; }
.corner-right { right: 3vmin; }
.corner-btn:active { transform: scale(.9); }

/* ===== 플레이 화면 ===== */
.play-head {
  position: relative;
  width: 100%;
  height: 15vmin;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#screen-play { justify-content: flex-start; }

.star-row { display: flex; gap: 1.5vmin; font-size: 6vmin; }
.star-row .star { opacity: .25; transition: opacity .3s, transform .3s; }
.star-row .star.on { opacity: 1; transform: scale(1.25); }

.play-area {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
}

/* 게임 프롬프트 (🔊 + 큰 이모지/글자) */
.prompt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
}
.prompt-main { font-size: 18vmin; line-height: 1; }
.prompt-main.letter { font-weight: 800; color: #4a4e69; }
.speak-btn {
  width: 14vmin;
  height: 14vmin;
  min-width: 60px;
  min-height: 60px;
  border: none;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0.8vmin 0 #e8b64c;
  font-size: 7vmin;
  cursor: pointer;
}
.speak-btn:active { transform: translateY(0.5vmin); box-shadow: 0 0.3vmin 0 #e8b64c; }

/* 선택지 카드 (글자/이모지/단어) */
.choice-card {
  border: none;
  border-radius: 5vmin;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0,0,0,.08), 0 1.6vmin 3vmin rgba(0,0,0,.10);
  cursor: pointer;
  min-width: 88px;
  min-height: 88px;
  width: 28vmin;
  height: 28vmin;
  font-size: 15vmin;
  font-weight: 800;
  color: #4a4e69;
  transition: transform .1s;
}
.choice-card:active { transform: scale(.94); }
.choice-card.word-card { font-size: 6.5vmin; width: auto; padding: 0 6vmin; height: 20vmin; letter-spacing: 0.6vmin; }
.choice-card.correct { background: #b9fbc0; }

/* ===== 스펠링 게임 ===== */
.spell-slots { display: flex; gap: 2.5vmin; }
.spell-slot {
  width: 16vmin;
  height: 18vmin;
  min-width: 56px;
  min-height: 64px;
  border: 0.8vmin dashed #bbb;
  border-radius: 3vmin;
  background: rgba(255,255,255,.6);
  font-size: 10vmin;
  font-weight: 800;
  color: #4a4e69;
  cursor: pointer;
}
.spell-slot.filled { border-style: solid; border-color: #90dbf4; background: #fff; }
.spell-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5vmin; }
.spell-tile {
  width: 15vmin;
  height: 15vmin;
  min-width: 60px;
  min-height: 60px;
  border: none;
  border-radius: 3vmin;
  background: #ffd166;
  box-shadow: 0 0.8vmin 0 #e8b64c;
  font-size: 8.5vmin;
  font-weight: 800;
  color: #4a4e69;
  cursor: pointer;
}
.spell-tile:active { transform: translateY(0.5vmin); }
.spell-tile.used { visibility: hidden; }

/* ===== 보상 / 스티커 ===== */
.reward-sticker { font-size: 30vmin; line-height: 1; }
.reward-msg { font-size: 8vmin; }

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3vmin;
  width: min(90vmin, 92%);
  max-height: 60%;
  overflow: hidden;
}
.sticker-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9vmin;
  background: rgba(255,255,255,.7);
  border-radius: 3vmin;
}
.sticker-cell.locked { filter: grayscale(1); opacity: .3; }

/* ===== 애니메이션 ===== */
.bounce { animation: bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5vmin); }
}

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.pop { animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.wiggle { animation: wiggle .45s ease-in-out; }
@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2vmin) rotate(-3deg); }
  40% { transform: translateX(2vmin) rotate(3deg); }
  60% { transform: translateX(-1.4vmin); }
  80% { transform: translateX(1.4vmin); }
}

/* 컨페티 파티클 (이모지 div, ui.js 에서 생성) */
.confetti {
  position: fixed;
  top: -8vmin;
  font-size: 5vmin;
  pointer-events: none;
  z-index: 99;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(115dvh) rotate(720deg); opacity: .8; }
}

/* ===== color-play 추가 ===== */
.sheet-grid {
  display: grid;
  /* 기기 폭 적응형 — 카드 최소 160px 기준으로 열 수 자동 결정 (폰 2열, 태블릿 3~5열).
     min(160px, 42vw)는 초소형 화면 가드. auto-fill이라 테마별 도안 수와 무관하게 카드 크기 일정.
     minmax 하한이 픽셀값이라 nowrap 라벨 min-content가 열 폭을 밀어내는 문제도 없음. */
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 42vw), 1fr));
  gap: 3vmin;
  padding: 2vmin 4vmin;
  width: 100%;
  max-width: 1200px;
}
.sheet-card {
  min-width: 0;                  /* 그리드 셀 폭 초과 방지 (라벨 min-content 무시) */
  background: #fff;
  border: 3px solid #e2d9ce;
  border-radius: 18px;
  padding: 2vmin;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vmin;
}
.sheet-card:active { transform: scale(0.96); }
.sheet-thumb svg { width: 100%; height: auto; max-height: 24vmin; }
.canvas-holder {
  width: min(92vw, 60vh);
  margin: 0 auto;
  background: #fff;
  border: 3px solid #e2d9ce;
  border-radius: 18px;
  padding: 1.5vmin;
}
.canvas-holder svg { width: 100%; height: auto; display: block; }
.canvas-holder .part { cursor: pointer; }
.palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vmin;
  padding: 2.5vmin 3vmin calc(3vmin + env(safe-area-inset-bottom));
}
.swatch {
  width: 10.5vmin; height: 10.5vmin;
  max-width: 56px; max-height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.15);
  cursor: pointer;
  font-size: 5vmin;
  display: flex; align-items: center; justify-content: center;
}
.swatch.sel {
  border: 4px solid #333;
  transform: scale(1.15);
}

/* 도안이 전부 900×900 정사각이라 열 폭에 맞춰 자연 스케일 (vmin 상한 두면 다열에서 레터박스) */
.sheet-thumb { position: relative; width: 100%; }
.sheet-thumb img { width: 100%; height: auto; display: block; }
.done-badge, .wip-badge {
  position: absolute;
  top: 0.5vmin;
  right: 0.5vmin;
  font-size: clamp(16px, 4vmin, 26px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* ===== 무료(미리보기) 빌드 잠금 카드 ===== */
.toast-global { position: fixed; }
.sheet-card.locked .sheet-thumb img { filter: grayscale(1) opacity(.4); }
.lock-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(22px, 8vmin, 44px);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
  z-index: 1;
}


/* ===== 스크롤·48색 팔레트 대응 (2026-07-08) ===== */
#screen-sheets { overflow-y: auto; justify-content: flex-start; padding-top: 2vmin; }
/* 테마 7종 — 카드 3줄이 화면을 넘칠 수 있어 스크롤 (2026-07-11) */
#screen-themes { overflow-y: auto; justify-content: flex-start; }
#screen-themes .screen-title { flex-shrink: 0; margin-top: 10vmin; }
#screen-sheets .screen-title { flex-shrink: 0; margin-top: 10vmin; }
.sheet-grid { padding-bottom: 6vmin; }
#screen-paint { overflow-y: auto; justify-content: flex-start; }
.canvas-holder { flex-shrink: 0; margin-top: 1vmin; }
.palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1.6vmin;
  max-width: 560px;
  margin: 0 auto;
  padding: 2vmin 3vmin calc(3vmin + env(safe-area-inset-bottom));
}
.swatch {
  width: 100%;
  aspect-ratio: 1;
  max-width: 44px;
  height: auto;
  border-radius: 50%;
  font-size: 4vmin;
}
.swatch.sel { transform: scale(1.18); }


/* ===== 도구 바 (채우기/브러시/연필) ===== */
.toolbar {
  display: flex;
  justify-content: center;
  gap: 3vmin;
  padding-top: 1.5vmin;
}
.tool-btn {
  width: 13vmin; height: 13vmin;
  max-width: 60px; max-height: 60px;
  font-size: 6.5vmin;
  background: #fff;
  border: 3px solid #e2d9ce;
  border-radius: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* 도구 버튼 라벨 — 아이콘 아래 기능 이름 (2026-07-12) */
.tool-btn { flex-direction: column; gap: 2px; }
.tool-btn svg { width: 46% !important; height: 46% !important; }
.tool-label {
  font-family: 'Jua', sans-serif;
  font-size: clamp(10px, 2.4vmin, 13px);
  color: #7a6a58;
  line-height: 1.1;
  white-space: nowrap;
}

.tool-btn.sel {
  border-color: #333;
  background: #fff3d6;
  transform: scale(1.1);
}

/* 도구 바 v2 — 행/서브옵션/굵기 점 */
.toolbar { display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; }
.tool-row { display: flex; justify-content: center; gap: 2.4vmin; }
.tool-row.sub { gap: 1.8vmin; }
.tool-btn.small {
  width: 10vmin; height: 10vmin;
  max-width: 48px; max-height: 48px;
  font-size: 5vmin;
  border-radius: 12px;
}
.tool-gap { width: 3vmin; }
.size-dot { background: #333; border-radius: 50%; display: inline-block; }

/* 도구 바 v3 — 크기 클램프(겹침 수정) + 3행 고정 + dim */
.tool-btn {
  width: 12vmin; height: 12vmin;
  max-width: 56px; max-height: 56px;
  min-width: 40px; min-height: 40px;
  font-size: clamp(18px, 6vmin, 28px);
  line-height: 1;
  padding: 0;
  overflow: hidden;
}
.tool-btn.small {
  width: 9.5vmin; height: 9.5vmin;
  max-width: 44px; max-height: 44px;
  min-width: 34px; min-height: 34px;
  font-size: clamp(14px, 4.6vmin, 21px);
}
.tool-btn svg { margin: auto; }
.tool-row.dim { opacity: 0.35; }
.tool-row.dim .tool-btn { transform: none; }

/* 브러시 종류 팝업 */
.brush-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: #fff;
  border: 3px solid #333;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 10;
}
.brush-popup::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #333;
}

/* ===== 색칠 화면 풀스크린 리디자인 (2026-07-09 v2, 참고 앱 UI) =====
   그림이 화면을 꽉 채우고, UI는 떠 있는 버튼(FAB)뿐.
   팔레트/도구는 하단 도크 버튼 탭 시 팝업 패널로 등장 — 밖 탭하면 닫힘 */
#screen-paint {
  overflow: hidden;
  padding: 0;
  gap: 0;
  background: none;              /* 메뉴 화면과 같은 body 그라데이션 톤 유지 (2026-07-11) */
}
#screen-paint .canvas-holder {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;   /* 핀치 줌으로 커진 캔버스가 버튼을 덮지 않게 (2026-07-15) */
}
/* 도안-버튼 겹침 방지 (2026-07-11 베타 버그) — 캔버스를 버튼 안전 영역 안으로 제한.
   세로: 버튼이 상·하단 가로 줄 → 상하 패딩. 가로: 버튼을 좌우 세로 열로 재배치 → 좌우 패딩. */
@media (orientation: portrait) {
  #screen-paint .canvas-holder {
    padding:
      calc(max(2vmin, env(safe-area-inset-top)) + clamp(56px, 15vmin, 76px) + 1.5vmin)
      1.5vmin
      calc(max(2.5vmin, env(safe-area-inset-bottom)) + clamp(56px, 15vmin, 76px) + 1.5vmin);
  }
}
@media (orientation: landscape) {
  /* ★가로모드 좌측 열은 슬롯 5개(뒤로·되돌리기·처음부터 ↓ / ↑ 도움말·음악)가 세로로
     들어가야 한다. 위에서 내려오는 열과 아래에서 올라오는 열이 독립적으로 배치되므로,
     높이가 모자라면 가운데서 겹친다 — 실제로 아이폰에서 '처음부터'와 '도움말'이
     한 칸에 겹쳐 보였다(2026-07-22 사용자 신고).
     근본 원인: 버튼 크기를 15vmin 으로 잡았는데 모바일 사파리에서 vmin/vh 는 주소창을
     제외한 '큰 뷰포트' 기준이라 실제 보이는 높이보다 크게 계산된다. 5*(15+2)=85vmin 이
     실제 가용 높이를 넘어섰다.
     → 실제 보이는 높이(dvh)로 크기·간격을 잡아 5슬롯이 항상 들어가게 한다.
       5 * (14dvh + 1.6dvh) = 78dvh, 상하 여백을 빼도 여유가 있다.
       최소 44px 은 유아 터치 타깃 하한이라 clamp 로 보장. */
  #screen-paint {
    --fab-l: clamp(44px, 14dvh, 76px);
    --fab-gap: 1.6dvh;
  }
  #screen-paint .fab-tl,
  #screen-paint .fab-tl2,
  #screen-paint .fab-tl3,
  #screen-paint .fab-tr,
  #screen-paint .fab-bl,
  #screen-paint .fab-bl2,
  #screen-paint .fab-dock .fab {
    width: var(--fab-l);
    height: var(--fab-l);
  }
  #screen-paint .canvas-holder {
    padding: 2vmin calc(2.5vmin + var(--fab-l) + 1.5vmin);
  }
  /* 좌측 세로 열: 뒤로 → 되돌리기 → 처음부터 */
  #screen-paint .fab-tl2 {
    top: calc(max(2vmin, env(safe-area-inset-top)) + var(--fab-l) + var(--fab-gap));
    left: 2.5vmin;
  }
  #screen-paint .fab-tl3 {
    top: calc(max(2vmin, env(safe-area-inset-top)) + (var(--fab-l) + var(--fab-gap)) * 2);
    left: 2.5vmin;
  }
  /* 좌하단: 음악 위에 도움말 */
  #screen-paint .fab-bl2 {
    bottom: calc(max(2.5vmin, env(safe-area-inset-bottom)) + var(--fab-l) + var(--fab-gap));
    left: 2.5vmin;
  }
  /* 우측 세로 도크 */
  #screen-paint .fab-dock { flex-direction: column; gap: var(--fab-gap); }
  /* 팝업 패널 — 세로 도크 왼쪽에 붙임 */
  #screen-paint .pop-panel {
    right: calc(2.5vmin + var(--fab-l) + 2vmin);
    bottom: max(2.5vmin, env(safe-area-inset-bottom));
  }
}
#paint-canvas {
  display: block;
  width: auto; height: auto;     /* 900² 고유비 contain — 짧은 축 기준 100% */
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  border: none;
  border-radius: 2.5vmin;        /* 도화지가 배경 위에 떠 있는 느낌 (액자 반경과 조화) */
  box-shadow: 0 1vmin 3vmin rgba(0,0,0,.10);
}

/* 플로팅 버튼 (FAB) */
.fab {
  position: absolute;
  width: clamp(56px, 15vmin, 76px);
  height: clamp(56px, 15vmin, 76px);
  border: none;
  border-radius: 26%;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.18), inset 0 -3px 0 rgba(0,0,0,.08);
  font-size: clamp(24px, 7vmin, 38px);
  line-height: 1;
  cursor: pointer;
  z-index: 15;
  display: flex; align-items: center; justify-content: center;
}
.fab:active { transform: scale(.92); }
.fab-tl  { top: max(2vmin, env(safe-area-inset-top)); left: 2.5vmin; }
.fab-tl2 { top: max(2vmin, env(safe-area-inset-top)); left: calc(2.5vmin + clamp(56px, 15vmin, 76px) + 2vmin); }
.fab-tr  { top: max(2vmin, env(safe-area-inset-top)); right: 2.5vmin; background: #ffe27a; }

/* 하단 우측 도크 (팔레트 · 도구) */
.fab-dock {
  position: absolute;
  right: 2.5vmin;
  bottom: max(2.5vmin, env(safe-area-inset-bottom));
  display: flex;
  gap: 2.5vmin;
  z-index: 15;
}
.fab-dock .fab { position: static; }
/* 팔레트 FAB — 무지개 링 + 현재 색 중심점 */
#btn-palette {
  background: conic-gradient(#ff5252, #ffb300, #ffee58, #66bb6a, #42a5f5, #ab47bc, #ff5252);
  padding: 0;
}
/* 라벨 있는 팔레트 버튼 — 원을 줄여 라벨 공간 확보, 무지개 배경 위 라벨은 흰색 */
.fab[data-label] .fab-color { width: 46%; height: 46%; }
#btn-palette[data-label]::after { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.fab-color {
  width: 58%; height: 58%;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(14px, 4vmin, 22px);
}

/* 팝업 패널 — 도크 위로 뜨는 말풍선 (참고 앱의 슬라이드 트레이) */
.pop-panel {
  position: absolute;
  right: 2.5vmin;
  bottom: calc(max(2.5vmin, env(safe-area-inset-bottom)) + clamp(56px, 15vmin, 76px) + 3.5vmin);
  background: #fffdf5;
  border: 4px solid #f4c95d;
  border-radius: 22px;
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  padding: 2.2vmin;
  z-index: 20;
  animation: pop .25s cubic-bezier(.2,1.4,.4,1);
}
.pop-panel.hidden { display: none; }
.pop-panel::after {          /* 말풍선 꼬리 */
  content: '';
  position: absolute;
  top: 100%; right: 7vmin;
  border: 12px solid transparent;
  border-top-color: #f4c95d;
}

/* 팔레트 패널 — 8열 그리드 (48색 + 지우개) */
.palette-panel {
  display: grid;
  grid-template-columns: repeat(9, 1fr);   /* 54색 — 무채 열 추가 (2026-07-12) */
  gap: 1.4vmin;
  width: min(90vw, 520px);
  max-height: 62dvh;
  overflow-y: auto;
}
.palette-panel .swatch {
  width: 100%;
  aspect-ratio: 1;
  max-width: none;
  height: auto;
  border-radius: 28%;
  border: 2px solid rgba(0,0,0,.12);
  font-size: clamp(13px, 3.6vmin, 20px);
}
.palette-panel .swatch.sel {
  border: 3px solid #333;
  transform: scale(1.12);
}

/* 도구 패널 — 도구 행 + 굵기 행 */
.tools-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vmin;
}
.tools-panel .tool-row { gap: 1.8vmin; }
.tools-panel .tool-btn {
  width: 13vmin; height: 13vmin;
  min-width: 48px; min-height: 48px;
  max-width: 62px; max-height: 62px;
  font-size: clamp(20px, 6vmin, 30px);
}

/* ===== 출시 품질 UI (2026-07-10) — 커스텀 아이콘·타이틀·완성 카드·토스트 ===== */
/* 타이틀 */
.logo-badge {
  width: clamp(120px, 34vmin, 190px);
  height: clamp(120px, 34vmin, 190px);
  background: #fff;
  border-radius: 30%;
  border: 5px solid #4b4b4b;
  box-shadow: 0 10px 0 rgba(0,0,0,.08), 0 14px 34px rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center;
}
.logo-badge svg { width: 74%; height: 74%; }
#btn-start { display: flex; align-items: center; justify-content: center; }
#btn-start svg { width: 56%; height: 56%; }
#screen-title .fab-tr { position: absolute; }
/* 하단 크레딧(.made-by + .credits) 영역 확보 — 세로 공간이 좁은 태블릿 가로모드에서
   플레이 버튼이 크레딧과 겹치던 문제 방지 (2026-07-18). 세로모드는 여유가 있어 무해. */
#screen-title { padding-bottom: clamp(66px, 13vmin, 104px); }
/* 세로가 특히 낮은 가로모드(구형 태블릿 등) — 로고·버튼·간격을 화면 높이 기준으로 축소해
   크레딧과의 여백을 끝까지 확보한다. */
@media (orientation: landscape) and (max-height: 660px) {
  #screen-title { gap: 2.2vh; padding-bottom: clamp(58px, 12vh, 88px); }
  #screen-title .logo-badge { width: 22vh; height: 22vh; }
  #screen-title .huge-btn { width: 26vh; height: 26vh; font-size: 12vh; }
  #screen-title .logo-text { font-size: 8vh; }
}

/* 테마 카드 — 대표 도안 썸네일 */
.theme-card {
  width: clamp(150px, 26vmin, 210px);
  height: auto;
  padding: 2vmin 2vmin 1.6vmin;
  gap: 1vmin;
  display: flex; flex-direction: column; align-items: center;
}
.theme-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid #eee2d0;
  background: #fff;
}
.theme-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-card .card-label { font-size: clamp(17px, 4.5vmin, 26px); }

/* 페인트 화면 좌측 3번째 FAB (리셋) */
.fab-tl3 { top: max(2vmin, env(safe-area-inset-top)); left: calc(2.5vmin + (clamp(56px, 15vmin, 76px) + 2vmin) * 2); }
.fab:disabled { opacity: .38; }
.fab svg { pointer-events: none; }

/* 토스트 */
.toast {
  position: absolute;
  left: 50%; bottom: calc(max(2.5vmin, env(safe-area-inset-bottom)) + clamp(56px, 15vmin, 76px) + 4vmin);
  transform: translateX(-50%);
  background: rgba(60, 50, 40, .88);
  color: #fff;
  font-size: clamp(15px, 4vmin, 20px);
  font-weight: 700;
  padding: 2.2vmin 4vmin;
  border-radius: 999px;
  z-index: 40;
  white-space: nowrap;
  animation: pop .25s cubic-bezier(.2,1.4,.4,1);
}
.toast.hidden { display: none; }

/* 아이콘 버튼 상시 라벨 — 앱(터치) 환경용, 아이콘 아래 기능 문구 (2026-07-11) */
.fab[data-label] { flex-direction: column; gap: 0; padding-top: 0.6vmin; }
.fab[data-label] svg { width: 52% !important; height: 52% !important; }
.fab[data-label]::after {
  content: attr(data-label);
  font-family: 'Jua', sans-serif;
  font-size: clamp(10px, 2.6vmin, 14px);
  font-weight: 400;
  color: #7a6a58;
  line-height: 1.15;
  margin-top: 0.4vmin;
  white-space: nowrap;
  max-width: 96%;
  overflow: hidden;
}

/* 튜토리얼 — 첫 색칠 진입 1회, 스포트라이트 + 말풍선 (탭 = 다음) */
.tut {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.tut.hidden { display: none; }
.tut-spot {
  position: absolute;
  border-radius: 50%;
  border: 4px dashed #ffd166;
  box-shadow: 0 0 0 9999px rgba(45, 36, 28, .58);
  animation: tutPulse 1.2s ease-in-out infinite;
}
@keyframes tutPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.tut-bubble {
  position: absolute;
  white-space: pre-line;
  background: #fff;
  color: #4b3a2a;
  font-size: clamp(17px, 4.6vmin, 24px);
  padding: 2.6vmin 4.5vmin;
  border-radius: 3.5vmin;
  border: 3px solid #ffd166;
  box-shadow: 0 1vmin 3vmin rgba(0,0,0,.25);
  max-width: min(78vw, 480px);
  text-align: center;
  animation: pop .3s cubic-bezier(.2,1.4,.4,1);
}

/* 완성 오버레이 */
.done-overlay {
  position: absolute; inset: 0;
  background: rgba(70, 55, 40, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.done-overlay.hidden { display: none; }
.done-card {
  background: #fffdf5;
  border: 5px solid #f4c95d;
  border-radius: 26px;
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  padding: 3vmin 3.5vmin;
  display: flex; flex-direction: column; align-items: center; gap: 2vmin;
  width: min(86vw, 420px);
  animation: pop .3s cubic-bezier(.2,1.4,.4,1);
}
.done-title {
  font-size: clamp(22px, 6.5vmin, 32px);
  font-weight: 800;
  color: #ff6392;
}
.done-preview {
  width: 100%;
  border-radius: 14px;
  border: 3px solid #eee2d0;
  background: #fff;
}
.done-actions { display: flex; gap: 2vmin; width: 100%; }
.done-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .6vmin;
  border: none;
  background: #fff;
  border: 3px solid #eee2d0;
  border-radius: 16px;
  padding: 1.6vmin 1vmin;
  font-size: clamp(13px, 3.4vmin, 16px);
  font-weight: 700;
  color: #5b5348;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.06);
}
.done-btn:active { transform: scale(.95); }
.done-btn span { width: clamp(30px, 8vmin, 40px); height: clamp(30px, 8vmin, 40px); display: flex; align-items: center; justify-content: center; }
.done-btn span svg { width: 100% !important; height: 100% !important; }

/* 완료 배지 — 체크 아이콘 */
.done-badge, .wip-badge { width: clamp(20px, 6vmin, 30px); height: clamp(20px, 6vmin, 30px); }
.done-badge svg, .wip-badge svg { width: 100% !important; height: 100% !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

/* 지우개 스와치 — SVG 가운데 정렬 */
.swatch svg { width: 78% !important; height: 78% !important; margin: auto; }

/* ===== 폰트·밸런스 폴리시 (2026-07-10 v2) ===== */
@font-face {
  font-family: 'Jua';
  src: url('/fonts/Jua-Regular.ttf') format('truetype');
  font-display: swap;
}
body { font-family: 'Jua', -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
button, input { font-family: inherit; }   /* 버튼은 폰트 미상속 — 카드 라벨도 Jua 로 */
.logo-text { font-family: 'Jua', sans-serif; font-weight: 400; }
/* Jua 는 400 단일 굵기 — bold 지정 시 가짜 굵게로 뭉개져 다른 폰트처럼 보임.
   카테고리·도안 라벨과 제목을 메뉴/아이콘 라벨과 같은 순정 Jua 로 통일 (2026-07-11) */
.card-label, .screen-title, .done-title, .done-btn { font-weight: 400; }

/* 테마 화면 — 제목·카드 밸런스 (제목 축소, 카드 확대) */
.screen-title {
  font-size: clamp(24px, 6vmin, 46px);
  font-weight: 400;
  color: #5b5348;
}
.theme-card { width: clamp(180px, 36vmin, 300px); }
.theme-card .card-label { font-size: clamp(19px, 5vmin, 30px); font-weight: 400; }
.card-label { font-weight: 400; }
.done-title { font-weight: 400; }
.done-btn { font-weight: 400; }
.toast { font-weight: 400; }

/* 도안 화면 헤더 — 테마 대표 썸네일 + 라벨 */
#sheets-title { display: flex; align-items: center; gap: 2vmin; }
.title-thumb {
  width: clamp(34px, 9vmin, 54px);
  height: clamp(34px, 9vmin, 54px);
  border-radius: 26%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  background: #fff;
  flex-shrink: 0;
}
.title-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 색칠 화면 좌하단 음악 토글 */
.fab-bl { bottom: max(2.5vmin, env(safe-area-inset-bottom)); left: 2.5vmin; top: auto; }
.fab-bl2 { bottom: max(2.5vmin, env(safe-area-inset-bottom)); left: calc(2.5vmin + clamp(56px, 15vmin, 76px) + 2vmin); top: auto; }

/* 테마 아이콘 배지 (썸네일 대체) */
.theme-ico {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #fffdf5, #fff1dc);
}
.theme-ico svg { width: 78% !important; height: 78% !important; }
.title-ico { display: flex; align-items: center; justify-content: center; }
.title-ico svg { width: 82% !important; height: 82% !important; }

/* fivefingers 제작 크레딧 (타이틀 하단) */
.made-by {
  position: absolute;
  bottom: calc(max(1.6vmin, env(safe-area-inset-bottom)) + clamp(20px, 4.4vmin, 30px));
  left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 1.4vmin;
  color: #7c7264;
  font-family: -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(12px, 2.8vmin, 16px); font-weight: 600;
  pointer-events: none;
}
.made-by svg { width: clamp(20px, 4.6vmin, 28px); height: clamp(20px, 4.6vmin, 28px); }
.made-by b { color: #23352d; font-weight: 800; }

/* 음원·저작권 크레딧 (CC BY 표기) */
.credits {
  position: absolute;
  bottom: max(1.6vmin, env(safe-area-inset-bottom));
  left: 0; right: 0;
  text-align: center;
  font-size: clamp(10px, 2.2vmin, 13px);
  color: rgba(90, 80, 70, .55);
  font-family: -apple-system, sans-serif;
}

/* 언어 선택 */
.lang-card { width: min(80vw, 320px); }
.lang-list { display: flex; flex-direction: column; gap: 1.6vmin; width: 100%; }
.lang-item {
  border: 3px solid #eee2d0;
  background: #fff;
  border-radius: 14px;
  padding: 2vmin;
  font-size: clamp(17px, 4.6vmin, 22px);
  font-family: 'Jua', -apple-system, sans-serif;
  color: #5b5348;
  cursor: pointer;
}
.lang-item.sel { border-color: #ffd166; background: #fff7e0; }
.lang-item:active { transform: scale(.97); }

/* 지우개 FAB — 활성 시 강조 링 */
#btn-eraser.fab-active { outline: 4px solid #ff8fa3; outline-offset: -2px; background: #fff0f4; }

/* ===== 카드 호버/포커스 강조 (2026-07-11) — 마우스·트랙패드 환경 확대 효과 ===== */
.big-card, .sheet-card {
  transition: transform .18s cubic-bezier(.2, 1.2, .4, 1), box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .big-card:hover {
    transform: translateY(-8px) scale(1.07);
    box-shadow: 0 1.8vmin 0 rgba(0,0,0,.07), 0 3.2vmin 5.5vmin rgba(0,0,0,.18);
  }
  .sheet-card:hover {
    transform: translateY(-5px) scale(1.045);
    box-shadow: 0 10px 26px rgba(0,0,0,.16);
    position: relative;
    z-index: 2;
  }
}
/* 키보드 포커스에도 동일 강조 */
.big-card:focus-visible, .sheet-card:focus-visible {
  outline: 4px solid #ffd166;
  outline-offset: 3px;
  transform: translateY(-6px) scale(1.05);
}
/* 눌림은 항상 최우선 (호버보다 뒤에 선언) */
.big-card:active { transform: scale(.94); }
.sheet-card:active { transform: scale(.96); }

/* 도안 썸네일 액자 — 색칠 화면 프레임과 동일한 인상 (원본 이미지 표시 시).
   이미지를 패딩으로 액자 안쪽에 축소 배치 — 색칠 화면과 같은 원리 (2026-07-11) */
.sheet-thumb.framed { overflow: hidden; padding: 5%; background: #fff; }
.sheet-thumb.framed::after {
  content: '';
  position: absolute;
  inset: 2.2%;
  border: 3px solid #2f2f2f;
  border-radius: 9.5%;
  pointer-events: none;
}