#k-wordle-wrapper {
  font-family:
    "Pretendard",
    -apple-system,
    sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  color: #121213;
  padding: 20px 15px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
}

#k-wordle-wrapper .user-greeting {
  background-color: #f8f8f8;
  border: 1px solid #d3d6da;
  color: #555555;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 20px;
  display: inline-block;
  text-align: center;
}

#k-wordle-wrapper .game-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

#k-wordle-wrapper .grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 8px;
  margin-bottom: 30px;
}

#k-wordle-wrapper .row {
  display: grid;
  grid-template-columns: repeat(5, 58px);
  grid-gap: 8px;
  justify-content: center;
}

#k-wordle-wrapper .tile {
  width: 58px;
  height: 58px;
  border: 2px solid #d3d6da;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  background: transparent;
  color: #121213;
  border-radius: 4px;
  box-sizing: border-box;
  perspective: 1000px;
}

@keyframes flipIn {
  0% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

#k-wordle-wrapper .tile.flip {
  animation: flipIn 0.5s ease forwards;
}

/* 상태별 색상 */
#k-wordle-wrapper .tile[data-state="correct"] {
  background-color: #22c55e;
  border-color: #22c55e;
  color: #fafafa;
}
#k-wordle-wrapper .tile[data-state="present"] {
  background-color: #eab308;
  border-color: #eab308;
  color: #fafafa;
}
#k-wordle-wrapper .tile[data-state="absent"] {
  background-color: #787c7e;
  border-color: #787c7e;
  color: #fafafa;
}

#k-wordle-wrapper .input-section {
  width: 100%;
}

#k-wordle-wrapper #msg {
  text-align: center;
  margin-bottom: 15px;
  color: #555555;
  font-size: 14px;
  font-weight: bold;
  transition: color 0.3s ease;
  min-height: 20px;
  line-height: 1.45;
  white-space: pre-line;
}

#k-wordle-wrapper #wordle-replay-btn {
  display: flex;
  width: min(160px, 100%);
  margin: 12px auto 18px;
}

#k-wordle-wrapper #wordle-replay-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

#k-wordle-wrapper .input-group {
  display: grid;
  grid-template-columns: repeat(5, 58px);
  grid-gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
}

#k-wordle-wrapper .letter-input {
  width: 100%;
  height: 58px;
  background: #ffffff;
  border: 2px solid #d3d6da;
  color: #121213;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 랭킹 폼 */
#k-wordle-wrapper #ranking-input-section {
  display: none;
  margin-top: 20px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #d3d6da;
  border-radius: 8px;
}

#k-wordle-wrapper #player-nickname {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #d3d6da;
  color: #121213;
  border-radius: 4px;
}

#k-wordle-wrapper .ranking-success-msg {
  font-size: 14px;
  color: #22c55e;
  margin-bottom: 10px;
  text-align: center;
}

#k-wordle-wrapper .ranking-input-wrap {
  display: flex;
  gap: 5px;
}

#k-wordle-wrapper .ranking-submit-btn {
  padding: 10px 15px;
  background: #121213;
  border: none;
  color: white;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

#k-wordle-wrapper .ranking-submit-btn:disabled {
  background: #787c7e;
  cursor: not-allowed;
  opacity: 0.7;
}

#k-wordle-wrapper .auth-input-group {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

#k-wordle-wrapper .auth-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #d3d6da;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
}

/* --- 하단 게임 룰 안내 --- */
#k-wordle-wrapper .rules-section {
  margin: 30px auto 0 auto;
  padding-top: 25px;
  border-top: 1px solid #e5e5e5;
  width: 100%;
  max-width: 100%;
}

#k-wordle-wrapper .rules-section h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 800;
  color: #121213;
}

#k-wordle-wrapper .rules-section .desc {
  font-size: 15px;
  color: #555555;
  margin-bottom: 15px;
  line-height: 1.4;
}

#k-wordle-wrapper .rules-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

#k-wordle-wrapper .rules-section li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #121213;
}

#k-wordle-wrapper .rules-section .example-tile {
  width: 28px;
  height: 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  border-radius: 4px;
  margin-right: 10px;
  color: #ffffff;
  flex-shrink: 0;
}

#k-wordle-wrapper .rules-section .example-tile.correct {
  background-color: #22c55e;
  border: 1px solid #22c55e;
}
#k-wordle-wrapper .rules-section .example-tile.present {
  background-color: #eab308;
  border: 1px solid #eab308;
}
#k-wordle-wrapper .rules-section .example-tile.absent {
  background-color: #787c7e;
  border: 1px solid #787c7e;
}
#k-wordle-wrapper .rules-section .rule-footer {
  font-size: 15px;
  color: #121213;
  margin: 20px 0 0 0;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 8px;
  text-align: center;
  line-height: 1.5;
}

/* --- 반응형 디자인 (PC & 태블릿 등 넓은 화면) --- */
@media (min-width: 600px) {
  #k-wordle-wrapper {
    max-width: 100%;
    padding: 40px 20px;
  }
  #k-wordle-wrapper .input-section {
    max-width: 500px;
    margin: 0 auto;
  }
  #k-wordle-wrapper .grid {
    grid-gap: 10px;
  }
  #k-wordle-wrapper .row {
    grid-template-columns: repeat(5, 75px);
    grid-gap: 10px;
  }
  #k-wordle-wrapper .tile {
    width: 75px;
    height: 75px;
    font-size: 32px;
  }
  #k-wordle-wrapper .rules-section {
    max-width: 500px;
    margin: 30px auto 0 auto;
  }
  #k-wordle-wrapper #msg {
    font-size: 16px;
    margin-bottom: 20px;
  }
}

/* --- 가상 키보드 및 입력칸 포커스 커스텀 --- */
#k-wordle-wrapper .letter-input.active {
  outline: 2px solid #121213;
  border-color: #121213;
}

#k-wordle-wrapper .virtual-keyboard {
  margin-top: 0;
  width: 100%;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#k-wordle-wrapper .keyboard-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

#k-wordle-wrapper .keyboard-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}

#k-wordle-wrapper .v-key {
  width: calc((100% - 36px) / 7); /* 7 items per row, exactly same size */
  height: 48px;
  font-size: 16px;
  border: 0;
  border-radius: 6px;
  background: #e3e5e8;
  cursor: pointer;
  font-weight: bold;
  color: #121213;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
  transition:
    background-color 0.2s,
    transform 0.1s;
}

#k-wordle-wrapper .v-key:active {
  background: #d3d6da;
  transform: scale(0.92);
}

#k-wordle-wrapper .v-key.action {
  flex: 1;
  max-width: 160px;
  width: auto;
  font-size: 15px;
  background: #d3d6da;
}

#k-wordle-wrapper .v-key.action:active {
  background: #c2c6ca;
}

#k-wordle-wrapper #main-btn {
  background: #121213;
  color: #ffffff;
}

#k-wordle-wrapper #main-btn:active {
  background: #000000;
  transform: scale(0.92);
}

/* --- 반응형 디자인 (PC 와이드 화면 - 키보드 우측 배치) --- */
@media (min-width: 900px) {
  #k-wordle-wrapper .game-layout {
    max-width: 850px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
  #k-wordle-wrapper .game-left {
    width: 415px; /* 게임판 너비 고정 */
  }
  #k-wordle-wrapper .game-right {
    width: 380px; /* 키보드 버튼들이 정사각형에 가깝게 나오도록 여유 확보 */
  }
  #k-wordle-wrapper .rules-section {
    max-width: 845px; /* 게임판 + 여백 + 키보드 전체 너비 통일 */
  }
}

@media (max-width: 450px) {
  #k-wordle-wrapper {
    padding: 15px 10px;
    margin: 0 auto;
  }
  #k-wordle-wrapper .grid {
    grid-gap: 5px;
    margin-bottom: 20px;
  }
  #k-wordle-wrapper .row,
  #k-wordle-wrapper .input-group {
    grid-template-columns: repeat(5, 48px);
    grid-gap: 5px;
  }
  #k-wordle-wrapper .tile,
  #k-wordle-wrapper .letter-input {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  #k-wordle-wrapper .virtual-keyboard {
    margin-top: 0;
    gap: 8px;
  }
  #k-wordle-wrapper .v-key {
    font-size: 14px;
    height: 40px;
    width: calc((100% - 24px) / 7);
  }
  #k-wordle-wrapper .keyboard-group,
  #k-wordle-wrapper .keyboard-row {
    gap: 4px;
  }
  #k-wordle-wrapper .rules-section {
    margin-top: 20px;
    padding-top: 20px;
  }
  #k-wordle-wrapper .auth-input-group {
    flex-direction: column;
    gap: 8px;
  }
  #k-wordle-wrapper .auth-input {
    width: 100%;
  }
}