/* ===== 분실물 등록 (모바일) — room.css 위에 얹는 추가분 =====
   색·버튼·게이트·칩은 room.css 를 그대로 쓴다. 여기 있는 건 분실물에만 있는 것뿐. */

/* room.css 뒤쪽에서 .seg 를 2칸으로 덮어쓰고 있다(객실/공용부).
   분실물은 객실·공용부·입구외부 3칸이라 되돌린다. */
.seg { grid-template-columns: repeat(3, 1fr); }

.lt-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px;
}
.lt-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 9px; }
.lt-mt { margin-top: 16px; }
.lt-req { color: #ff9a90; font-weight: 700; margin-left: 2px; }
.lt-opt { color: #7f8ea6; font-weight: 600; margin-left: 4px; }
.lt-hint { color: #7f8ea6; font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
.lt-empty { color: #7f8ea6; font-size: 13px; text-align: center; padding: 22px 0; }

.lt-input {
  width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-family: inherit; font-size: 16px; padding: 13px 12px;
}
.lt-input::placeholder { color: #4d5b74; }
#room-input { font-size: 19px; font-weight: 800; letter-spacing: .4px; text-align: center; }
#room-input::placeholder { font-size: 15px; font-weight: 600; letter-spacing: 0; }

/* ---------- 호실 목록 ----------
   입력칸 아래에 붙는 걸러진 목록. 손가락으로 누를 크기를 유지하면서
   많은 호실을 담아야 해서 감싸고 스크롤시킨다. */
.lt-roomlist {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
  max-height: 168px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.lt-roomlist:empty { display: none; }
.lt-room {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 10px 11px; cursor: pointer; white-space: nowrap;
}
.lt-room:active { background: var(--go); border-color: var(--go); }

/* ---------- 사진 ---------- */
.lt-photo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lt-pbtn {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 700; padding: 15px 6px; cursor: pointer;
}
.lt-pbtn:active { background: var(--go); border-color: var(--go); }
.lt-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lt-th { position: relative; width: 84px; height: 84px; }
.lt-th img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.lt-th-x {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--danger); color: #fff; border: 2px solid var(--bg);
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
}

/* ---------- 민감물품 ---------- */
.lt-check {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
  background: rgba(224, 145, 58, .08); border: 1px solid rgba(224, 145, 58, .35);
  border-radius: 12px; padding: 12px; cursor: pointer;
}
.lt-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.lt-check span { font-size: 13.5px; line-height: 1.55; }
.lt-check em { color: #d9a56a; font-style: normal; font-size: 12px; }

.lt-save { margin-top: 4px; }
.lt-prog { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }

/* ---------- 최근 등록 ---------- */
.lt-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 11px; margin-bottom: 8px;
}
.lt-row-img { width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); cursor: pointer; }
.lt-row-noimg { display: flex; align-items: center; justify-content: center; color: #4d5b74; cursor: default; }
.lt-row-b { flex: 1; min-width: 0; }
.lt-row-t { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-row-s { color: var(--muted); font-size: 12px; margin-top: 3px; }
.lt-badge { font-size: 11px; color: #d9a56a; font-weight: 700; }
.lt-status {
  flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px;
}

/* ---------- 사진 크게 보기 ---------- */
.lt-viewer {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lt-viewer img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.lt-viewer-x {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .15);
  color: #fff; border: 0; font-size: 17px; cursor: pointer;
}

/* ---------- 상태 바꾸기 시트 ---------- */
.lt-sheet-wrap {
  position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .6);
  display: flex; align-items: flex-end; justify-content: center;
}
.lt-sheet {
  width: 100%; max-width: 520px; background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
}
.lt-sheet-t { font-size: 17px; font-weight: 800; }
.lt-sheet-s { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.lt-sheet-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 4px; }
.lt-sheet-b {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
  font-family: inherit; font-size: 14.5px; font-weight: 700; padding: 15px 8px; cursor: pointer;
}
.lt-sheet-b:active { background: var(--go); border-color: var(--go); }
.lt-row { cursor: pointer; }

/* ---------- 시범 기간 안내 ---------- */
.lt-pilot {
  background: rgba(224, 87, 76, .1); border: 1px solid rgba(224, 87, 76, .4);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.lt-pilot b { display: block; font-size: 14px; color: #ff9a90; }
.lt-pilot span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.55; margin-top: 5px; }
.lt-pilot a { display: inline-block; color: #7fa8ff; font-size: 12.5px; margin-top: 7px; }

/* ---------- 귀중품 ----------
   분류마다 색을 다 입히면 서로 묻힌다. 귀중품 하나만 금색으로 띄우고
   나머지는 기본색 그대로 둬야 목록에서 한눈에 들어온다. */
.chip.val { border-color: rgba(214, 168, 74, .55); color: #e8c37a; }
.chip.val.on { background: #a8811f; border-color: #a8811f; color: #fff; }
.lt-cat.val { color: #e8c37a; font-weight: 800; }

/* ---------- OB (게스트 알림) ----------
   시트에서는 등록 폼과 OB 체크가 따로 놀았다. 여기서는 같은 줄에서 끝난다.
   '체크' 가 아니라 '문자/전화' 를 고르게 해서 무엇으로 알렸는지가 남게 한다. */
.lt-ob { font-size: 11px; font-weight: 700; color: #d38d86; margin-top: 3px; }
.lt-ob.done { color: #8fd3ae; }
.lt-sheet-lb { font-size: 12px; font-weight: 700; color: var(--muted); margin: 16px 0 8px; }
.lt-ob-box {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 13px; margin-top: 14px;
}
.lt-ob-box .lt-sheet-lb { margin-top: 0; }
.lt-ob-state { font-size: 13px; color: #d38d86; font-weight: 700; }
.lt-ob-state.done { color: #8fd3ae; }
/* 네 가지(문자·전화·OTA·메일)라 2x2 로 고정한다. 흘려두면 3+1 로 깨진다 */
.lt-ob-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.lt-ob-b {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 11px; color: var(--ink); font-family: inherit; font-size: 14px;
  font-weight: 700; padding: 13px 6px; cursor: pointer;
}
.lt-ob-b.on { background: var(--back); border-color: var(--back); color: #fff; }
.lt-ob-b.undo { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 9px; }

/* 분류가 여러 개 붙을 수 있다 */
.lt-cat { display: inline-block; margin-right: 2px; }

/* 특징 칸 경고 — 자유 입력이라 여기 적힌 것은 외부로 그대로 나간다 */
.lt-warn-t { color: #d9a56a; }