/* =========================
   CREATE ROOM
========================= */

body {
  margin: 0;
  background-color: #f5f5f5;
}

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

.create-room-screen {
  position: relative;

  height: 100dvh;

  display: flex;
  flex-direction: column;

  padding: 0 20px;

  box-sizing: border-box;

  overflow: hidden;

  background-color: #ffffff;
}

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

.page-header {
  position: relative;

  width: 100%;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}

/* 제목 */
.page-header h1 {
  margin: 0;

  font-size: 18px;
  font-weight: 700;

  text-align: center;
}

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

.back-button {
  position: absolute;

  left: 0;
  top: 50%;

  transform: translateY(-50%);

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  text-decoration: none;
}

.back-button img {
  width: 21px;
  height: 21px;

  display: block;
  object-fit: contain;
}

/* 기존 HTML의 빈 공간은 필요 없음 */
.header-space {
  display: none;
}

/* 제목 */

.create-room-screen .page-header h1 {
  margin: 0;

  color: #111111;

  font-size: 16px;
  font-weight: 700;

  text-align: center;
}

/* 오른쪽 균형 공간 */

.create-room-screen .header-space {
  position: absolute;
  right: 0;

  width: 32px;
  height: 32px;
}

/* =========================
   입력 영역
========================= */

.create-room-content {
  flex: 1;

  min-height: 0;

  width: 100%;

  padding-top: 8px;
  padding-bottom: 82px;

  box-sizing: border-box;

  overflow-y: auto;
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

.create-room-content::-webkit-scrollbar {
  display: none;
}

/* =========================
   각 입력 항목
========================= */

.create-room-field {
  width: 100%;

  margin-bottom: 25px;

  box-sizing: border-box;
}

/* 라벨 */

.create-room-field label {
  display: block;

  margin-bottom: 8px;

  color: #111111;

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

/* 선택 */

.optional {
  color: #777777;

  font-weight: 400;
}

/* =========================
   input / select 공통
========================= */

.create-room-field input,
.create-room-field select {
  display: block;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  height: 47px;

  padding: 0 12px;

  border: 1px solid #d9d9d9;
  border-radius: 9px;

  box-sizing: border-box;

  background-color: #ffffff;

  color: #222222;

  font-family: inherit;
  font-size: 16px;
  font-weight: 400;

  outline: none;
}

/* placeholder */

.create-room-field input::placeholder {
  color: #b8b8b8;
}

/* focus */

.create-room-field input:focus,
.create-room-field select:focus {
  border-color: #52aead;
}

/* =========================
   날짜 input - iPhone Safari
========================= */

.create-room-field input[type="date"] {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}

/* 날짜 전체 영역 (Safari 세로 중앙 정렬 핵심) */
.create-room-field input[type="date"]::-webkit-date-and-time-value {
  min-height: auto;      /* Safari 기본 min-height 강제 제거 */
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* 날짜 글씨 영역 */
.create-room-field input[type="date"]::-webkit-datetime-edit {
  display: flex;
  align-items: center;

  padding: 0;
  margin: 0;
}

/* 연 / 월 / 일 묶음 */
.create-room-field input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  align-items: center;

  padding: 0;
}
/* =========================
   기준 통화
========================= */

.create-room-field select {
  padding-left: 12px;
  padding-right: 36px;

  cursor: pointer;
}

/* 기준 통화 설명 */

.currency-help {
  margin: 6px 2px 0;

  color: #999999;

  font-size: 10px;
  font-weight: 400;

  line-height: 1.4;
}

/* =========================
   설명
========================= */

#description {
  width: 100%;
}

/* =========================
   방 생성 버튼
========================= */

.create-room-button {
  position: absolute;

  left: 20px;
  right: 20px;
  bottom: 20px;

  height: 47px;

  padding: 0;

  border: none;
  border-radius: 8px;

  background-color: #52aead;
  color: #ffffff;

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

  cursor: pointer;

  z-index: 10;
}

.create-room-button:active {
  background-color: #459b9a;
}

/* =========================
   정산 기한 최종 수정
========================= */

.deadline-wrapper {
  position: relative;
  width: 100%;
  height: 50px;
}

.deadline-display {
  width: 100%;
  height: 50px;

  padding: 0 14px;

  border: 1px solid #dddddd;
  border-radius: 10px;

  background-color: #ffffff;

  color: #222222;

  font-size: 14px;

  box-sizing: border-box;

  pointer-events: none;
}

/* 실제 date input은 화면에서는 안 보이게 */
#deadline.deadline-real {
  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 50px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: none !important;
  border-radius: 10px !important;

  background: transparent !important;

  opacity: 0 !important;

  cursor: pointer;

  z-index: 10;

  appearance: none;
  -webkit-appearance: none;
}

/* 크롬/사파리 날짜 아이콘까지 숨기기 */
#deadline::-webkit-calendar-picker-indicator {
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  margin: 0;

  opacity: 0;

  cursor: pointer;
}