/* ============================================================
   손님 메인(견적) 화면 - 미니멀 흑백 (로고 색조합에 맞춤)
   관리자/설정 페이지는 style.css 를 그대로 사용 (이 파일과 무관)
   ============================================================ */
:root{
  --bg:#ffffff;        /* 흰 배경 */
  --ink:#111111;       /* 로고 검정 */
  --text:#1a1a1a;      /* 본문 */
  --muted:#8a8a8a;     /* 로고 'cleaning service' 회색 톤 */
  --line:#e5e5e5;      /* 얇은 경계선 */
  --line-d:#111111;    /* 강조 경계선 */
  --soft:#f5f5f5;      /* 아주 옅은 회색 면 */
  --green:#16a34a;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Pretendard","Apple SD Gothic Neo","Helvetica Neue","Malgun Gothic",sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
}
/* 모바일 화면 폭 고정 (프로토타입) */
.wrap{ width:100%; max-width:430px; margin:0 auto; padding:44px 26px 64px; }

/* ---- 화면(페이지) 전환: 한 번에 하나만 ---- */
.screen{ display:none; }
.screen.active{ display:block; }

/* 로딩 화면 */
#screenLoading.active{ display:flex; }
.loading-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:20px; text-align:center; padding:24px; }
.loader{ width:50px; height:50px; border:3px solid var(--line); border-top-color:var(--ink);
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-wrap .lt{ font-size:18px; font-weight:800; color:var(--ink); }
.loading-wrap .ls{ font-size:13px; color:var(--muted); margin-top:-8px; }

/* 화면 상단 작은 헤더 / 뒤로가기 */
.screen-head{ text-align:center; margin-bottom:26px; }
.screen-head .label{ font-size:12px; letter-spacing:3px; color:var(--muted);
  text-transform:uppercase; font-weight:700; }
.screen-head h1{ margin:6px 0 0; font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.5px; }
.backlink{ display:block; width:100%; margin-top:16px; text-align:center; font-size:13px;
  color:var(--muted); background:none; border:none; cursor:pointer; padding:8px; }
.backlink:hover{ color:var(--ink); }

/* ---- 상단: 로고 + 인사 ---- */
.head{ text-align:center; margin-bottom:34px; }
.logo-badge{
  width:230px; margin:0 auto 26px;
  display:flex; align-items:center; justify-content:center;
}
/* 새 로고는 여백 거의 없는 가로형(1282x676) → 전체가 보이게 그대로 표시 */
.logo-badge img{ width:100%; height:auto; display:block; }
.head h1{ margin:0; font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.6px; }
.head .sub{ margin:10px 0 0; font-size:12px; letter-spacing:4px; color:var(--muted);
  text-transform:uppercase; font-weight:600; }

/* ---- 사진 업로드 영역 ---- */
.photo-zone{ margin:0 auto 14px; }
/* 빈 상태: 동그라미 ＋ 버튼 */
.photo-circle{
  width:208px; height:208px; border-radius:50%; margin:0 auto;
  background:var(--bg); cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--muted); text-align:center; border:1.5px solid var(--ink);
  transition:background .12s;
}
.photo-circle:active{ background:var(--soft); }
.photo-circle .ph-icon{ font-size:42px; line-height:1; margin-bottom:8px; color:var(--ink); font-weight:300; }
.photo-circle .ph-text{ font-size:13px; font-weight:600; }

/* 업로드 후: 사각 썸네일 (여러 장이면 겹쳐 보이는 더미) */
.photo-stack{ position:relative; width:200px; height:184px; margin:0 auto; cursor:pointer; }
.photo-stack .thumb{
  position:absolute; inset:0; margin:auto; width:154px; height:154px;
  border-radius:14px; border:1.5px solid var(--ink); background:#fff; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.photo-stack .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-stack .thumb.l0{ transform:rotate(0deg); z-index:3; }
.photo-stack .thumb.l1{ transform:rotate(5deg) translate(8px,4px); z-index:2; }
.photo-stack .thumb.l2{ transform:rotate(-6deg) translate(-8px,4px); z-index:1; }
.photo-stack .stack-count{
  position:absolute; right:14px; top:12px; z-index:4;
  background:var(--ink); color:#fff; font-size:12px; font-weight:700;
  padding:4px 11px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.ph-count{ text-align:center; font-size:12px; color:var(--muted); margin:14px 0 16px; min-height:16px; }

/* 촬영 팁 */
.photo-tips{ max-width:312px; margin:16px auto 0; }
.photo-tips .pt-title{ font-size:13px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.photo-tips .pt-mark{ font-weight:400; }
.photo-tips ul{ margin:0; padding-left:18px; }
.photo-tips li{ font-size:12.5px; line-height:1.6; color:var(--muted); margin:3px 0; }
.photo-tips li b{ color:var(--ink); font-weight:700; }

/* 사진 편집 패널 (추가/삭제) */
.photo-editor{ max-width:312px; margin:0 auto 28px; }
.pe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pe-cell{ position:relative; aspect-ratio:1/1; border:1.5px solid var(--line);
  border-radius:10px; overflow:hidden; }
.pe-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-del{ position:absolute; top:5px; right:5px; width:24px; height:24px; border:none;
  border-radius:50%; background:rgba(17,17,17,.82); color:#fff; font-size:15px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.pe-del:hover{ background:#000; }
.pe-add{ aspect-ratio:1/1; border:1.5px dashed var(--ink); border-radius:10px; background:var(--bg);
  color:var(--ink); font-size:30px; font-weight:300; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.pe-add:hover{ background:var(--soft); }

/* ---- 텍스트 공통 ---- */
h2{ margin:0 0 6px; font-size:18px; color:var(--ink); font-weight:800; }
.desc{ margin:0 0 16px; font-size:13px; color:var(--muted); }
.hint{ font-size:12px; color:var(--muted); margin-top:8px; }
label{ display:block; font-size:12px; font-weight:700; color:var(--ink); margin:14px 0 7px;
  letter-spacing:.3px; }
.section-title{ text-align:center; font-size:12px; letter-spacing:3px; color:var(--muted);
  text-transform:uppercase; font-weight:700; margin:0 0 18px; }

/* ---- 청소 항목 = 외곽선 토글 폼 ---- */
#svcList{ margin-bottom:28px; }
.type-row{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:17px; border-radius:0; margin-bottom:12px; cursor:pointer;
  background:var(--bg); color:var(--ink); font-size:16px; font-weight:700;
  border:1.5px solid var(--line); transition:.12s; user-select:none;
}
.type-row:hover{ border-color:var(--ink); }
.type-row input{ display:none; }
.type-row.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.type-row.on .tname::after{ content:'  ✓'; font-weight:800; }

/* ---- 옵션 행 (2단계) ---- */
.opt-row{
  display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:0;
  margin-bottom:10px; cursor:pointer; background:var(--bg); font-size:14px;
  border:1.5px solid var(--line); transition:.12s;
}
.opt-row:hover{ border-color:var(--ink); }
.opt-row input{ display:none; }
.opt-row .oname{ flex:1; color:var(--ink); font-weight:600; }
.opt-row.on{ background:var(--ink); border-color:var(--ink); }
.opt-row.on .oname{ color:#fff; }
.opt-row.on .oname::after{ content:'  ✓'; }

/* ---- 입력 폼 ---- */
input[type=text], input[type=tel], textarea{
  width:100%; padding:14px 16px; border:none; border-bottom:1.5px solid var(--line);
  border-radius:0; background:var(--bg); color:var(--ink); font-size:15px; font-family:inherit;
}
input::placeholder, textarea::placeholder{ color:var(--muted); }
input:focus, textarea:focus{ outline:none; border-bottom-color:var(--ink); }
textarea{ min-height:80px; resize:vertical; border:1.5px solid var(--line); }
textarea:focus{ border-color:var(--ink); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ---- 작은 사진 썸네일 (2단계 참고용) ---- */
.photos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; justify-content:center; }
.photos img{ width:56px; height:56px; object-fit:cover; border-radius:0; border:1px solid var(--line); }

/* ---- 카드 (얇은 외곽선 컨테이너) ---- */
.card{ background:var(--bg); border:1.5px solid var(--line); border-radius:0;
  padding:24px; margin-bottom:18px; }

/* ---- 버튼 (솔리드 블랙) ---- */
.btn{
  display:block; width:100%; padding:18px; border:1.5px solid var(--ink); border-radius:0;
  background:var(--ink); color:#fff; font-size:17px; font-weight:800;
  letter-spacing:1px; cursor:pointer; margin-top:6px; transition:.12s;
}
.btn:hover{ background:#000; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ background:#bbb; border-color:#bbb; cursor:not-allowed; }
/* 보조(외곽선) 버튼 */
.btn.sec{ background:var(--bg); color:var(--ink); }
.btn.sec:hover{ background:var(--soft); }

/* ---- 달력 / 시간 (2단계) ---- */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:8px; }
.cal .h{ text-align:center; font-size:12px; color:var(--muted); padding:4px 0; font-weight:700; }
.cal .d{ text-align:center; padding:10px 0; border-radius:0; cursor:pointer; font-size:14px;
  color:var(--ink); border:1px solid var(--line); }
.cal .d.empty{ cursor:default; border-color:transparent; }
.cal .d.dis{ color:#cfcfcf; cursor:not-allowed; border-color:transparent; }
.cal .d.busy{ text-decoration:line-through; }   /* 이미 일정 있는 날 */
.cal .d:not(.dis):not(.empty):hover{ border-color:var(--ink); }
.cal .d.sel{ background:var(--ink); color:#fff; font-weight:800; border-color:var(--ink); }
.cal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cal-head b{ font-size:15px; color:var(--ink); font-weight:800; }
.cal-head button{ background:var(--bg); border:1px solid var(--line); border-radius:0; width:38px; height:38px;
  cursor:pointer; font-size:16px; color:var(--ink); }
.cal-head button:hover{ border-color:var(--ink); }

.slots{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.slots .s{ padding:10px 16px; border-radius:0; font-size:13px; cursor:pointer;
  background:var(--bg); color:var(--ink); border:1px solid var(--line); }
.slots .s:hover{ border-color:var(--ink); }
.slots .s.sel{ background:var(--ink); color:#fff; font-weight:700; border-color:var(--ink); }
.slots .s.dis{ color:#cfcfcf; cursor:not-allowed; text-decoration:line-through; border-color:transparent; }

/* ---- 토스트 ---- */
.toast{ position:fixed; left:50%; top:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0; font-size:14px;
  z-index:50; opacity:0; transition:.25s; pointer-events:none; }
.toast.show{ opacity:1; }