/* ============================================
   수거 신청 (#request)

   폼 자체는 사이트 표준(.form-card · .frow · .field · .addr-row)을 그대로
   씁니다. 여기에는 이 화면에만 있는 것만 둡니다 —
   수거함 안내 카드, 물품 태그, 사진 파일 목록, 접수 완료 요약.
   ============================================ */

/* 카드가 너무 넓으면 입력 항목이 좌우로 늘어져 눈이 크게 움직입니다.
   설치 문의는 2단 배치라 넓게 쓰지만, 이 화면은 폼 하나뿐이라 좁게 둡니다. */
.rq-wrap{max-width:720px}

/* 머리말과 폼 사이를 좁힙니다. 다른 화면은 읽는 곳이라 여백이 리듬을 만들지만,
   이 화면은 바로 채우러 들어온 사람이 씁니다. 첫 칸이 화면 밖에 있으면
   한 번 더 스크롤해야 시작할 수 있습니다. (기본 56px → 16px) */
#view-request .section{padding-top:16px}

/* 모바일 하단 고정 바(.mobar)는 "수거함 설치 신청" 버튼입니다.
   이 화면에서는 두 가지가 문제입니다.
     1) 높이 77px 이 제출 버튼을 가립니다
     2) 지금 하려는 일(수거 신청)과 다른 곳으로 유도합니다
   그래서 이 화면에서만 숨깁니다. body 의 data-view 는 site.js 가 남깁니다. */
body[data-view="request"] .mobar{display:none}

/* 입력 글자는 16px 이상이어야 합니다.
   그보다 작으면 iOS 사파리가 입력할 때 화면을 확대해 버립니다. */
#view-request input,#view-request textarea,#view-request select{font-size:16px}

/* ---------- 투입한 수거함 안내 ---------- */
/* QR 로 들어온 경우에만 보입니다. 어느 수거함인지 먼저 못 박아야
   잘못된 곳에 신청해 기사가 헛걸음하는 일이 없습니다. */
.rq-box{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:var(--r-s);
  padding:14px 16px;
  margin-bottom:18px;
  box-shadow:var(--shadow-s);
}
.rq-box-label{margin:0;font-size:13px;color:var(--muted)}
.rq-box-name{margin:2px 0 0;font-size:1.05rem;font-weight:700;color:var(--ink)}
.rq-box-code{
  display:inline-block;margin-top:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;font-weight:700;color:var(--blue);
  background:var(--mist);border-radius:6px;padding:2px 8px;
}
.rq-box-sub{margin:6px 0 0;font-size:13px;color:var(--muted)}
.rq-box.bad{border-left-color:#D95757;background:#FDECEB;border-color:#F5C6C2}
.rq-box.bad .rq-box-name{color:#C0392B}

/* ---------- 카드 머리말 ---------- */
.rq-card-title{font-family:var(--disp-m);font-size:1.5rem;margin-bottom:6px}
.rq-card-desc{color:var(--muted);font-size:.94rem;margin-bottom:26px}
.rq-hint{margin:6px 0 0;font-size:.84rem;color:var(--muted);line-height:1.5}

/* ---------- 물품 태그 ---------- */
/* 드롭다운에서 고른 항목이 여기 쌓입니다.
   고른 것을 눈에 보이게 남겨야 몇 개를 골랐는지 알 수 있습니다. */
.rq-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rq-tags:empty{display:none}
.rq-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--mist);border:1px solid var(--mist-2);
  border-radius:999px;padding:6px 8px 6px 14px;
  font-size:.88rem;font-weight:600;color:var(--ink-2);
}
.rq-tag button{
  width:22px;height:22px;flex:none;border:0;border-radius:50%;
  background:rgba(11,33,54,.12);color:var(--ink-2);
  font-size:12px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.15s;
}
.rq-tag button:hover{background:var(--blue);color:#fff}

/* 사진 + 투입 날짜 줄. 반씩 나누면 사진 칸의 안내 문구가 잘립니다.
   좁은 화면은 site.css 의 .frow 가 한 단으로 내리므로 넓은 화면에만 겁니다 —
   그냥 두면 이 규칙이 더 구체적이라 모바일에서도 2단으로 남습니다. */
@media(min-width:821px){
  #view-request .rq-frow-photo{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
}

/* ---------- 사진 업로드 ---------- */
/* 시안은 입력칸 한 줄입니다. 비어 있을 때는 안내 문구와 [업로드],
   올린 뒤에는 파일 이름과 [삭제]가 같은 자리에 들어갑니다.
   높이·테두리·모서리를 옆 칸(투입 날짜)과 맞춰야 두 칸이 나란히 보입니다. */
.rq-upload{
  display:flex;align-items:center;gap:10px;
  min-height:50px;padding:5px 8px 5px 14px;
  border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--paper);transition:.15s;
}
.rq-upload:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,103,218,.1)}
/* 파일이 붙으면 채워진 칸처럼 보이게 배경을 바꿉니다. */
.rq-upload.has{background:var(--cloud)}
.rq-upload-ph{
  flex:1;min-width:0;font-size:.9rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rq-upload-file{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.rq-upload-file svg{width:15px;height:15px;flex:none;color:var(--muted)}
.rq-upload-name{
  min-width:0;font-size:.9rem;font-weight:600;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 두 버튼은 칸 안에 들어가므로 폼 버튼(.btn 44px)보다 작게 둡니다. */
.rq-upload-btn,.rq-upload-del{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  border-radius:8px;padding:8px 14px;
  font-family:inherit;font-size:.84rem;font-weight:700;
  cursor:pointer;transition:.15s;
}
.rq-upload-btn{border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2)}
.rq-upload-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.rq-upload-btn:disabled{opacity:.55;cursor:default}
.rq-upload-del{border:0;background:#FDECEB;color:#C0392B}
.rq-upload-del:hover{background:#F9D9D6}
.rq-upload-del svg{width:13px;height:13px}

/* ---------- 투입 날짜 ---------- */
/* date 입력은 placeholder 를 받지 않고, 비었을 때 브라우저마다 다른 문구를
   보여줍니다(크롬 "연도-월-일"). 시안의 YYYY-MM-DD 를 맞추려고 비었을 때만
   원래 글자를 감추고 위에 덧씌웁니다. 달력 아이콘은 그대로 둡니다. */
.rq-date{position:relative}
.rq-date input[type="date"]{width:100%}
.rq-date-ph{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:.9rem;color:var(--muted);pointer-events:none;
}
.rq-date:not(.filled) input[type="date"]::-webkit-datetime-edit{color:transparent}
.rq-date.filled .rq-date-ph{display:none}
/* 값이 없어도 달력이 열려 있는 동안에는 원래 글자가 보여야 고를 수 있습니다. */
.rq-date input[type="date"]:focus::-webkit-datetime-edit{color:inherit}
.rq-date input[type="date"]:focus+.rq-date-ph{display:none}

/* 입력값이 잘못된 칸은 테두리로 알립니다.
   칸마다 문구를 달면 폼 전체가 경고로 뒤덮여 무엇이 문제인지 흐려집니다. */
#view-request .field input.bad,
#view-request .field textarea.bad{border-color:#D95757}

/* ---------- 접수 완료 요약 ---------- */
.rq-sum{
  margin:20px 0 0;padding:16px;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
  font-size:.86rem;
}
.rq-sum div{display:flex;gap:10px;padding:4px 0}
.rq-sum dt{flex:none;width:64px;color:var(--muted)}
.rq-sum dd{margin:0;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}

/* ---------- 모바일 ---------- */
@media(max-width:820px){
  /* 2단 배치(신청인명·연락처)는 좁은 화면에서 한 단으로 내립니다.
     site.css 의 .frow 규칙이 이미 처리하지만, 이 화면은 칸이 많아
     간격을 조금 더 벌려야 항목 경계가 보입니다. */
  #view-request .frow{gap:0}
  /* 파일 이름이 길면 [업로드]·[삭제]가 밀려 잘립니다. 버튼을 먼저 지키고
     이름 쪽을 줄입니다 — 확장자만 보여도 무엇을 올렸는지는 알 수 있습니다. */
  .rq-upload{padding-left:12px;gap:8px}
  .rq-upload-btn,.rq-upload-del{padding:8px 12px}
}