/**
 * 낱말 맞추기 전용 스타일 (word-puzzle.css)
 */

.word-puzzle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}

/* 6행 타일 보드 */
.word-board {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 24px;
  user-select: none;
}

.word-row {
  display: grid;
  gap: 8px;
}

.word-row.len-5 {
  grid-template-columns: repeat(5, 1fr);
}

.word-row.len-4 {
  grid-template-columns: repeat(4, 1fr);
}

.word-tile {
  width: clamp(48px, 11vw, 62px);
  height: clamp(48px, 11vw, 62px);
  background: white;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: clamp(20px, 4.8vw, 28px);
  font-weight: 800;
  color: var(--ink);
  box-sizing: border-box;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.word-tile.filled {
  border-color: var(--ink);
  animation: tilePop 0.1s ease-in-out;
}

/* 플립 애니메이션 및 판정 색상 */
.word-tile.flip {
  animation: flipTile 0.5s ease-in-out forwards;
}

@keyframes flipTile {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

.word-tile.correct {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: white !important;
}

.word-tile.present {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: white !important;
}

.word-tile.absent {
  background: #64748b !important;
  border-color: #64748b !important;
  color: white !important;
}

/* 입력 바 (실제 한글 키보드 친화적 인풋) */
.word-input-box {
  width: 100%;
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.word-input-box input {
  flex: 1;
  height: 48px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: white;
  outline: none;
  text-align: center;
  letter-spacing: 4px;
}

.word-input-box input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.15);
}

.word-input-box button {
  height: 48px;
  padding: 0 20px;
}

/* 힌트 및 상태 안내 */
.word-status-msg {
  min-height: 24px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rose);
  text-align: center;
  margin-bottom: 12px;
}

/* 색상 안내 범례 */
.legend-box {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.legend-color.green { background: #10b981; }
.legend-color.yellow { background: #f59e0b; }
.legend-color.gray { background: #64748b; }

.word-puzzle-container{width:100%;min-width:0}.word-board{width:100%;max-width:342px}.word-row.len-5{grid-template-columns:repeat(5,minmax(0,1fr))}.word-row.len-4{grid-template-columns:repeat(4,minmax(0,1fr))}.word-tile{width:100%;height:auto;aspect-ratio:1}.word-input-box input{min-width:0;width:0}.word-input-box button{padding:0 12px}.legend-box{flex-wrap:wrap;gap:8px} @media(max-width:380px){.word-board,.word-row{gap:5px}}

.word-puzzle-container{width:100%;min-width:0}.word-board{width:100%;max-width:342px}.word-row.len-5{grid-template-columns:repeat(5,minmax(0,1fr))}.word-row.len-4{grid-template-columns:repeat(4,minmax(0,1fr))}.word-tile{width:100%;height:auto;aspect-ratio:1}.word-input-box input{min-width:0;width:0}.word-input-box button{padding:0 12px}.legend-box{flex-wrap:wrap;gap:8px} @media(max-width:380px){.word-board,.word-row{gap:5px}}