/* =========================
   JOIN ROOM
========================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  background-color: #f5f5f5;

  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =========================
   전체 화면
========================= */

.join-room-screen {
  display: flex;

  flex-direction: column;

  background-color: #ffffff;
}


/* =========================
   상단 헤더
========================= */

.join-room-header {
  flex-shrink: 0;

  height: 58px;

  display: grid;

  grid-template-columns: 60px 1fr 60px;

  align-items: center;

  padding: 0 12px;

  border-bottom: 1px solid #eeeeee;

  background-color: #ffffff;
}

.join-room-header h1 {
  margin: 0;

  color: #111111;

  text-align: center;

  font-size: 15px;
  font-weight: 600;
}


/* =========================
   뒤로가기
========================= */

.back-button {
  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  padding: 0;

  border: none;

  background: none;

  color: #111111;

  font-size: 28px;
  font-weight: 300;

  cursor: pointer;
}

.header-spacer {
  width: 40px;
  height: 40px;
}


/* =========================
   메인 영역
========================= */

.join-room-content {
  flex: 1;

  min-height: 0;

  padding: 30px 18px;

  background-color: #ffffff;
}


/* =========================
   코드 입력 영역
========================= */

.join-room-box {
  width: 100%;
}

.join-room-box h2 {
  margin: 0 0 22px;

  color: #222222;

  font-size: 14px;
  font-weight: 600;

text-align: center;
}


/* =========================
   5자리 코드
========================= */

.code-input-group {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;
}

.code-input {
  width: 48px;
  height: 52px;

  padding: 0;

  border: 1px solid #cccccc;

  border-radius: 6px;

  outline: none;

  background-color: #ffffff;

  color: #222222;

  text-align: center;

  font-size: 22px;
  font-weight: 600;

  caret-color: #52aead;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}


/* 입력칸 선택 */

.code-input:focus {
  border-color: #52aead;

  box-shadow:
    0 0 0 1px
    rgba(82, 174, 173, 0.15);
}


/* 숫자가 들어간 칸 */

.code-input:not(:placeholder-shown) {
  border-color: #52aead;
}


/* =========================
   오류 메시지
========================= */

.code-error {
  min-height: 18px;

  margin: 10px 0 0;

  color: #e85d5d;

  text-align: center;

  font-size: 10px;
}


/* =========================
   참여하기 버튼
========================= */

.join-button {
  width: 100%;

  height: 46px;

  margin-top: 18px;

  border: none;

  border-radius: 7px;

  background-color: #52aead;

  color: #ffffff;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}


/* 5자리 입력 전 */

.join-button:disabled {
  background-color: #cccccc;

  color: #ffffff;

  cursor: default;
}


/* 활성 버튼 */

.join-button:not(:disabled):active {
  background-color: #459b9a;
}


/* =========================
   작은 화면 대응
========================= */

@media (max-width: 350px) {
  .code-input-group {
    gap: 7px;
  }

  .code-input {
    width: 44px;
    height: 50px;
  }
}