/* ═══════════════════════════════════════════════
   hanja_write.css — HanziWriter 쓰기 패널 스타일
   브레이크포인트: 600px 미만 모바일 / 이상 태블릿
   ═══════════════════════════════════════════════ */

/* ── 쓰기 패널 래퍼 ── */
#hanziWritePanel {
  display: none;
  padding: 0 16px 16px;
  animation: hwPanelIn .3s ease;
}

@keyframes hwPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 문제 레이블 (한자 + 독음 + 뜻) ── */
#hwQuestionLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #F3ECFF, #EDE1FF);
  border-radius: 16px;
  border: 2px solid #D4B8FF;
  margin-bottom: 14px;
  flex-wrap: wrap;
  text-align: center;
}

/* ── 캔버스 컨테이너 ── */
#hanziWriterContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #FDFCFF;
  border: 2.5px solid #E0D4FF;
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto 14px;
  box-shadow:
    0 4px 16px rgba(108, 63, 200, .10),
    inset 0 1px 3px rgba(255,255,255,.8);
  /* 격자 배경 (전통 습자 용지 느낌) */
  background-image:
    linear-gradient(rgba(108,63,200,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,63,200,.06) 1px, transparent 1px),
    linear-gradient(rgba(108,63,200,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,63,200,.03) 1px, transparent 1px);
  background-size: 50% 50%, 50% 50%, 25% 25%, 25% 25%;
  /* SVG 크기는 JS에서 동적 설정 */
  width: fit-content;
  max-width: 100%;
}

/* ── 획순 진행 바 ── */
#hwStrokeBar {
  margin-bottom: 10px;
}

/* ── 실수 카운트 ── */
#hwMistakeCount {
  font-family: Jua, sans-serif;
  font-size: .82rem;
  color: var(--muted, #9CA3AF);
  text-align: center;
  min-height: 20px;
  transition: color .3s;
}

/* ── 버튼 행 ── */
.hw-btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.hw-btn {
  flex: 1;
  max-width: 160px;
  padding: 10px 14px;
  border: none;
  border-radius: 14px;
  font-family: Jua, sans-serif;
  font-size: .85rem;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hw-btn:active { transform: scale(.96); opacity: .85; }

.hw-btn-animate {
  background: linear-gradient(135deg, #6C3FC8, #9B59B6);
  color: #fff;
  box-shadow: 0 3px 10px rgba(108,63,200,.3);
}

.hw-btn-skip {
  background: #f5f5f5;
  color: #999;
  border: 1.5px solid #e0e0e0;
}

/* ── 힌트 뱃지 (3회 실수 후 자동 표시) ── */
.hw-hint-badge {
  display: inline-block;
  background: linear-gradient(135deg, #FFD93D, #FF9F0A);
  color: #fff;
  font-family: Jua, sans-serif;
  font-size: .72rem;
  padding: 2px 10px;
  border-radius: 20px;
  margin-left: 8px;
  animation: hwBadgePop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes hwBadgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── 완료 배지 애니메이션 (JS에서 추가) ── */
@keyframes hwCompletePop {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(-15deg); }
  60%  { transform: translate(-50%,-50%) scale(1.15) rotate(5deg); }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0); }
}

/* ── 쓰기 모드 전환 버튼 (스테이지 맵) ── */
.hw-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #F3ECFF, #EDE1FF);
  border: 1.5px solid #A78BFA;
  border-radius: 20px;
  padding: 4px 12px;
  font-family: Jua, sans-serif;
  font-size: .75rem;
  color: #6C3FC8;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.hw-mode-badge:hover,
.hw-mode-badge:active {
  background: linear-gradient(135deg, #6C3FC8, #9B59B6);
  color: #fff;
  border-color: #6C3FC8;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(108,63,200,.25);
}

/* ── 태블릿 이상: 캔버스 여백 확보 ── */
@media (min-width: 600px) {
  #hanziWriterContainer {
    max-width: 320px;
  }
  .hw-btn-row {
    max-width: 360px;
    margin: 12px auto 0;
  }
}

/* ── 다크 테마 대응 (선택) ── */
@media (prefers-color-scheme: dark) {
  #hanziWriterContainer {
    background: #1A1031;
    border-color: #4C3080;
    background-image:
      linear-gradient(rgba(160,120,255,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(160,120,255,.08) 1px, transparent 1px),
      linear-gradient(rgba(160,120,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(160,120,255,.04) 1px, transparent 1px);
    background-size: 50% 50%, 50% 50%, 25% 25%, 25% 25%;
  }
  #hwQuestionLabel {
    background: linear-gradient(135deg, #2D1B5E, #3B2070);
    border-color: #6C3FC8;
  }
}