/* ==========================================================================
   발품노 (BPN) — 기능 개발용 스타일 보강
   시안 style.css 는 승인된 디자인이므로 수정하지 않고, 실제 동작에 필요한
   요소(플래시 메시지, 페이지네이션, 빈 상태, 폼 오류 표시 등)만 여기에 추가한다.
   변수·톤은 style.css 의 :root 팔레트를 그대로 따른다.
   ========================================================================== */

/* ---------- 헤더: 로그인 사용자 영역 ---------- */
.hd-me{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;color:var(--gray-700);
  padding:5px 10px;border-radius:var(--radius-sm);
  transition:.13s;
}
.hd-me:hover{background:var(--navy-50)}
.hd-me b{color:var(--navy-900);font-weight:700}
.hd-logout{margin:0;display:inline-flex}

/* ---------- 플래시 / 안내 메시지 ---------- */
.alert{
  display:flex;align-items:flex-start;gap:9px;
  margin:16px 0;padding:13px 16px;
  border:1px solid var(--gray-200);border-radius:var(--radius-sm);
  background:var(--gray-50);
  font-size:14px;line-height:1.6;color:var(--gray-800);
}
.alert::before{font-size:15px;line-height:1.45;flex:none}
.alert-ok{background:var(--green-50);border-color:#b9e3d0;color:#0b5c40}
.alert-ok::before{content:"✓"}
.alert-no{background:var(--red-50);border-color:#f3c6c1;color:#9e2a22}
.alert-no::before{content:"!"}
.alert-info{background:var(--navy-50);border-color:var(--navy-100);color:var(--navy-800)}
.alert-info::before{content:"i";font-style:italic;font-weight:800}
.alert-warn{background:var(--amber-50);border-color:#f0dbaa;color:var(--amber-700)}
.alert-warn::before{content:"!"}

/* ---------- 폼 오류 표시 ---------- */
.inp.is-error,.is-error .inp{border-color:var(--red-600);background:var(--red-50)}
.field .err{
  display:block;margin-top:6px;
  font-size:12.8px;font-weight:600;color:var(--red-600);
}
.field .help{display:block;margin-top:6px;font-size:12.5px;color:var(--gray-500);line-height:1.55}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inp-group{display:flex;gap:8px;align-items:center}
.inp-group .inp{flex:1;min-width:0}
.inp-suffix{font-size:13.5px;color:var(--gray-600);font-weight:600;flex:none}

/* ---------- 칩 형태의 체크박스 (관심지역·취급물건 다중 선택) ----------
   시안은 button.chip + JS 토글이었으나 실제 폼 전송이 필요하므로
   label + hidden checkbox 로 바꾸고 선택 상태는 :has() 로 표현한다. */
.chip-check{position:relative;cursor:pointer;user-select:none}
.chip-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip-check:has(input:checked){background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.chip-check:has(input:focus-visible){outline:2px solid var(--navy-500);outline-offset:2px}

/* ---------- 휴대폰 인증 위젯 ---------- */
.verify-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.verify-row .inp{flex:1;min-width:140px}
.verify-msg{margin-top:7px;font-size:12.8px;font-weight:600;line-height:1.5}
.verify-msg.ok{color:var(--green-600)}
.verify-msg.no{color:var(--red-600)}
.verify-msg .code{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:5px;
  background:var(--amber-50);border:1px solid #f0dbaa;color:var(--amber-700);
  font-variant-numeric:tabular-nums;letter-spacing:.08em;
}
.verify-done{display:none}
.is-verified .verify-done{display:inline-flex}
.is-verified .verify-send,.is-verified .verify-code-box{display:none}

/* ---------- 빈 상태 ---------- */
.empty{
  padding:56px 20px;text-align:center;
  border:1px dashed var(--gray-300);border-radius:var(--radius);
  background:var(--gray-50);color:var(--gray-600);
}
.empty .em{font-size:34px;line-height:1;margin-bottom:12px}
.empty strong{display:block;font-size:16px;color:var(--gray-800);margin-bottom:6px}
.empty p{font-size:13.8px;margin:0;line-height:1.65}
.empty .btn{margin-top:18px}

/* ---------- 페이지네이션 ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:32px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:38px;height:38px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gray-200);border-radius:var(--radius-sm);
  background:#fff;font-size:13.8px;font-weight:600;color:var(--gray-700);
  transition:.13s;
}
.pager a:hover{border-color:var(--navy-300);color:var(--navy-700);background:var(--navy-50)}
.pager .on{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.pager .off{color:var(--gray-400);background:var(--gray-50);cursor:default}

/* ---------- 결과 요약 줄 ---------- */
.result-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:18px;
}
.result-bar .cnt{font-size:14px;color:var(--gray-600)}
.result-bar .cnt b{color:var(--navy-800);font-weight:800}

/* ---------- 접수 완료 등 결과 화면 ---------- */
.done-box{
  text-align:center;padding:48px 24px;
  border:1px solid var(--navy-100);border-radius:var(--radius);
  background:var(--navy-50);
}
.done-box .em{font-size:46px;line-height:1;margin-bottom:14px}
.done-box h2{margin:0 0 10px;font-size:24px;color:var(--navy-900)}
.done-box .no{
  display:inline-block;margin:14px 0 4px;padding:8px 16px;
  background:#fff;border:1px solid var(--navy-100);border-radius:var(--radius-sm);
  font-size:15px;font-weight:800;color:var(--navy-800);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}

/* ---------- 개인정보 마스킹 표시 ---------- */
.masked{
  color:var(--gray-500);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.locked{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--gray-500);
}
/* 자물쇠도 이모지 대신 SVG — 기기별 모양 차이를 없앤다 */
.locked::before{
  content:"";width:13px;height:13px;flex:none;
  background:currentColor;
  -webkit-mask:var(--ico-lock) center/contain no-repeat;
  mask:var(--ico-lock) center/contain no-repeat;
}

/* ---------- 필수 입력 표시 보강 ---------- */
.field>label .req{font-weight:800}

/* ---------- 이미지 업로드 미리보기 ---------- */
.upl{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;margin-top:10px}
.upl-item{position:relative;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--gray-200);background:var(--gray-100)}
.upl-item img{width:100%;height:100%;object-fit:cover}
.upl-item button{
  position:absolute;top:4px;right:4px;width:22px;height:22px;
  border:0;border-radius:50%;background:rgba(10,23,48,.72);color:#fff;
  font-size:13px;line-height:1;cursor:pointer;
}

@media (max-width:640px){
  .field-row{grid-template-columns:1fr}
  .hd-me b{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ==========================================================================
   크로스 브라우저 정규화 — 아이폰(iOS Safari) / 갤럭시(안드로이드 Chrome) 통일
   같은 화면폭에서 두 기기가 다르게 보이던 원인만 골라서 잡는다.
   ========================================================================== */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}

:root{
  --ico-lock:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='4' y='10' width='16' height='11' rx='2'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>");
}

/* (1) iOS 는 폼 요소에 기본 스타일(둥근 모서리·안쪽 그림자·버튼 그라데이션)을
       강제로 입힌다. appearance 를 꺼야 지정한 높이·모서리·배경이 그대로 나온다.
       select 의 화살표는 style.css 의 background-image 로 계속 그린다. */
.inp,
select.inp,
textarea.inp,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select,
button,
.btn{
  -webkit-appearance:none;
  appearance:none;
}

/* (2) iOS 검색 입력은 전용 위젯으로 렌더링돼 취소(X) 버튼과 둥근 테두리가 붙는다 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none;
  display:none;
}

/* (3) 체크박스·라디오는 기본 위젯을 유지하되 색만 맞춘다 (iOS 15.4+/Chrome 공통) */
input[type="checkbox"],
input[type="radio"]{
  -webkit-appearance:auto;
  appearance:auto;
  accent-color:var(--navy-700);
}

/* (4) Safari 는 backdrop-filter 에 -webkit- 접두사가 필요하다.
       없으면 아이폰에서만 헤더·슬라이드 패널의 반투명 블러가 빠진다. */
.hd{-webkit-backdrop-filter:saturate(1.6) blur(8px)}
.vslide{-webkit-backdrop-filter:blur(4px)}

/* (5) 아이폰은 입력 글자가 16px 미만이면 포커스 시 화면을 자동 확대해 버린다.
       확대된 상태가 유지되면서 갤럭시와 전혀 다른 화면처럼 보이므로,
       모바일에서는 폼 글자를 16px 로 고정한다. */
@media (max-width:640px){
  .inp,
  select.inp,
  textarea.inp,
  .searchbar-q .inp,
  input,
  select,
  textarea{font-size:16px}
  /* 16px 기준으로도 글자가 잘리지 않도록 메인 검색 셀렉트는 한 줄에 하나씩 */
  .searchbar-sel{grid-template-columns:1fr}
}

/* (6) 파일 선택 — 기본 위젯 대신 직접 그린 버튼(site.js bindFilePick) */
.filepick{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.filepick-nm{
  min-width:0;flex:1;font-size:13.2px;color:var(--gray-600);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.filepick-input{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* (7) 아이콘: 이모지 대신 인라인 SVG 를 쓰므로 크기·정렬 기준을 맞춘다.
       글줄 안에서는 글자처럼(inline) 흐르고, 아이콘 전용 칸에서는 블록으로 가운데 정렬한다. */
.ico{display:inline-block;vertical-align:-.16em;flex:none}
.btn .ico,
.icon-btn .ico,
.em .ico,
.ic .ico{display:block;vertical-align:baseline}
.icon-btn .ico{color:var(--gray-700)}
.em .ico,
.ic .ico{margin:0 auto}
.empty .em .ico,
.done-box .em .ico{color:var(--gray-400)}
.radio-card .em{display:flex;align-items:center}
.radio-card .em .ico{color:var(--navy-600)}
.radio-card.on .em .ico{color:var(--navy-700)}

/* (8) 탭 — 서버에서 렌더하는 링크형 탭.
       style.css 의 .tabs button 과 같은 모양을 <a> 에도 적용한다.
       (JS 로 감추지 않고 주소로 전환하므로 새로고침·뒤로가기가 자연스럽다) */
.tabs a{
  display:inline-block;text-decoration:none;
  padding:11px 15px;font-size:14.5px;font-weight:700;color:var(--gray-500);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.tabs a:hover{color:var(--navy-700)}
.tabs a.on{color:var(--navy-700);border-bottom-color:var(--navy-700)}

/* (9) 배너 관리 — 목록의 이미지 미리보기 */
.bn-thumb{
  width:120px;aspect-ratio:16/6;object-fit:cover;display:block;
  border:1px solid var(--gray-200);border-radius:6px;background:var(--gray-100);
}
.bn-thumb.popup{aspect-ratio:3/4;width:72px}
.bn-preview{
  max-width:100%;border:1px solid var(--gray-200);border-radius:8px;
  display:block;background:var(--gray-100);
}

/* (10) 배너 — 사용자 화면 노출 */
.banner-strip{margin:0 0 22px}
.banner-strip a,.banner-strip .bn-item{display:block;border-radius:12px;overflow:hidden}
.banner-strip img{width:100%;height:auto;display:block}
.banner-pop{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(15,23,42,.55);
}
.banner-pop.on{display:flex}
.banner-pop-box{
  background:#fff;border-radius:12px;overflow:hidden;max-width:400px;width:100%;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.banner-pop-box img{width:100%;height:auto;display:block}
.banner-pop-ft{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-top:1px solid var(--gray-200);
}
.banner-pop-ft label{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--gray-600)}
.banner-pop-ft button{
  border:0;background:none;font-size:14px;font-weight:700;color:var(--navy-700);cursor:pointer;padding:4px 6px;
}