/* ==========================================================================
   방끗 (clean-room) — 사이트 전역 스타일
   출장세차(세차로) 디자인 시스템을 이식한 것.
   흰 sticky 헤더 · 연회색 바탕 위 흰 카드 · 파란 포인트 · Pretendard.
   SSR 이 만드는 시맨틱 마크업(ul/li, table, dl, figure)에 맞춘 단일 CSS 파일.
   ========================================================================== */

:root {
  /* 바탕 · 면 */
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --dark: #17202B;
  --dark-2: #2A3644;
  --dark-sub: #AEB8C4;

  /* 글자 — 목업의 #6B7684 / #9AA5B1 은 바탕색(#F5F7FA)·칩(#F0F4F8) 위에서
     4.5:1 을 못 넘겨 한 단계씩 어둡게 조정했다. 색조는 그대로다. */
  --ink: #17202B;
  --muted: #5F6977;
  --faint: #656F7D;

  /* 파랑 — --accent 는 칠하는 색, --link 는 글자 색 (바탕 위 대비 확보) */
  --accent: #1B6FF2;
  --accent-dark: #0F54C4;
  --link: #1560DB;
  --accent-soft: #EAF1FE;
  --accent-avatar: #E3EDFA;
  --accent-disabled: #C6D3E3;

  /* 선 */
  --line: #E2E8F0;
  --line-soft: #EAEFF3;
  --line-row: #F0F3F7;
  --line-input: #DDE3EA;
  --line-strong: #CBD4DE;

  /* 보조 */
  --chip: #F0F4F8;
  --biz: #0B7F58;
  --biz-soft: #EAF6F1;
  --star: #FFB020;
  --danger: #C43D0C;
  --warn-bg: #FFF7E8;
  --warn-line: #F5DFB2;
  --warn-ink: #7A5010;
  --ph-a: #D7E4F2;
  --ph-b: #EDF3FA;
  --ph-ink: #6E8CAE;

  /* 형태 */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-pill: 22px;
  --shadow-focus: 0 0 0 3px var(--accent-soft);

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', system-ui, 'Malgun Gothic', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gut: 20px;
  --shell: 640px;
}

/* --- 베이스 ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-dark); }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--faint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); padding: 10px 16px;
}
.skip-link:focus { left: 0; }
.hidden { display: none !important; }

/* --- 셸 ----------------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1; padding-bottom: 32px; }

/* 콘텐츠는 640 로 묶고, 헤더·푸터의 배경은 화면 끝까지 흐른다 */
.page > *,
.hdr,
.footer > * { max-width: var(--shell); margin-left: auto; margin-right: auto; }

/* --- 헤더 --------------------------------------------------------------- */
.hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--gut);
}
.hdr-wrap {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
.hdr-spacer { flex: 1; }
.brand { font-size: 20px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; }
.hdr-title { font-size: 16px; font-weight: 700; }
.hdr-link { font-size: 14px; font-weight: 700; }
.back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: -2px; color: var(--ink);
}
.back svg { display: block; }

/* --- 섹션 --------------------------------------------------------------- */
.sec { padding: 0 var(--gut); }
.sec-block { margin-top: 24px; }
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 0 var(--gut) 12px;
}
.sec-head .sec-title { padding: 0; }
.sec-title { padding: 0 var(--gut) 12px; font-size: 18px; line-height: 26px; font-weight: 700; }
.sec-title .count { color: var(--link); font-variant-numeric: tabular-nums; }

.hero { padding: 20px var(--gut) 4px; }
.hero h1 { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -0.4px; }
.hero p { margin-top: 6px; color: var(--muted); }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; line-height: 20px; }
.num { font-variant-numeric: tabular-nums; }
.star { color: var(--star); }
.star-off { color: #D6DDE6; }
.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grow { flex: 1; }
.gap-6 { gap: 6px; }

/* --- 브레드크럼 --------------------------------------------------------- */
.crumbs { padding: 16px var(--gut) 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: 5px; color: var(--line-strong); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --- 버튼 --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--r-lg); height: 52px; padding: 0 18px;
  font-size: 16px; font-weight: 700; background: var(--surface); color: var(--ink);
}
.btn--block { width: 100%; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }
.btn--outline { background: var(--surface); border: 1.5px solid var(--accent); color: var(--link); }
.btn--outline:hover { background: var(--accent-soft); color: var(--link); }
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.btn--ghost:hover { border-color: var(--accent); color: var(--link); }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--dark-2); color: #fff; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn:disabled { background: var(--accent-disabled); color: #fff; cursor: not-allowed; }
.link-more { font-size: 13px; font-weight: 600; }

/* 청소 유형 바로가기 */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 var(--gut); }
.cat-btn {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-radius: var(--r-lg);
  height: 56px; font-size: 15px; font-weight: 700; color: var(--ink);
}
.cat-btn:hover { color: var(--link); }

/* --- 칩 / 태그 / 뱃지 --------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--link); }
.chip--on { background: var(--dark); border-color: var(--dark); color: #fff; font-weight: 700; }
.chip--on:hover { background: var(--dark-2); border-color: var(--dark-2); color: #fff; }

.tag { display: inline-block; border-radius: 14px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.tag--type { background: var(--accent-soft); color: var(--link); }
.tag--gray { background: var(--chip); color: var(--muted); }

.badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  border-radius: 4px; vertical-align: middle;
}
.badge--biz { background: var(--biz); color: #fff; padding: 2px 6px; }
.badge--indie { border: 1px solid var(--line-strong); color: var(--faint); padding: 1px 5px; }

/* 후기 카드의 원형 이니셜 */
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: var(--chip); color: var(--muted);
}
.avatar--shop { background: var(--accent-avatar); color: var(--link); }
.avatar--lg { width: 40px; height: 40px; font-size: 15px; }

/* --- 카드 --------------------------------------------------------------- */
.card { background: var(--surface); border-radius: var(--r-lg); padding: 16px; }
.card--tight { padding: 14px 16px; }
.notice { border-radius: var(--r-lg); padding: 12px 14px; font-size: 13px; line-height: 20px; margin-top: 12px; }
.notice--gray { background: var(--surface); color: var(--muted); }
.notice--warn {
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
}

.empty {
  margin: 0 var(--gut) 20px; background: var(--surface); border-radius: var(--r-lg);
  padding: 32px 20px; text-align: center;
}
.empty strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.empty span { font-size: 13px; color: var(--muted); }

/* 사진 자리 표시 */
.ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ph-a), var(--ph-b));
  color: var(--ph-ink); font-size: 12px; font-weight: 600;
}
.ph--43 { aspect-ratio: 4 / 3; }

/* --- 업체 카드 (홈 가로 스크롤) ----------------------------------------- */
.shop-strip {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 0 var(--gut) 8px; scroll-snap-type: x mandatory;
}
.shop-strip > * { scroll-snap-align: start; }
.shop-card {
  flex: 0 0 168px; background: var(--surface); border-radius: var(--r-lg);
  overflow: hidden; color: var(--ink); display: block;
}
.shop-card img { aspect-ratio: 4 / 3; object-fit: cover; }
.shop-card__body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.shop-card__name {
  font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-card__meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shop-card__meta b { color: var(--ink); }
.shop-card__price { font-size: 13px; font-weight: 600; color: var(--link); }

/* --- 업체 행 (지역 목록) ------------------------------------------------ */
.list { display: grid; gap: 10px; padding: 0 var(--gut); }
.shop-row {
  display: flex; gap: 12px; align-items: center; color: var(--ink);
  background: var(--surface); border-radius: var(--r-lg); padding: 12px;
}
.shop-row__thumb {
  flex: none; width: 96px; aspect-ratio: 4 / 3;
  border-radius: var(--r-sm); object-fit: cover; font-size: 11px;
}
.shop-row__body { display: grid; gap: 3px; align-content: center; min-width: 0; }
.shop-row__chev { color: var(--line-strong); font-size: 18px; margin-left: auto; }

.shop-title { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -0.4px; }
.shop-rating { font-size: 14px; color: var(--muted); margin-top: 10px; }
.shop-rating b { color: var(--ink); }
.shop-intro { margin-top: 10px; }
.trust-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px;
  font-size: 13px;
}
.trust-line strong { color: var(--biz); font-weight: 700; }
.trust-line span { color: var(--faint); font-size: 12px; }
.shop-mini { display: flex; align-items: center; gap: 12px; }

.hero-strip {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.hero-strip::-webkit-scrollbar { display: none; }
.hero-strip img,
.hero-strip .ph {
  flex: 0 0 100%; scroll-snap-align: start;
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* --- 후기 카드 ---------------------------------------------------------- */
.feed { display: grid; gap: 12px; padding: 0 var(--gut); }
.review-card {
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  display: grid;
}
.review-card__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-size: 14px; font-weight: 400; margin: 0;
}
.review-card__id { display: grid; gap: 1px; min-width: 0; }
.review-card__author { font-size: 14px; font-weight: 700; color: var(--ink); }
.review-card__link { color: inherit; }
.review-card__sub { font-size: 12px; color: var(--muted); }
.review-card__body { padding: 12px 16px 14px; display: grid; gap: 8px; }
.review-card__text {
  font-size: 15px; line-height: 24px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.review-card__photos img,
.review-card__photos .ph { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.review-body { white-space: pre-line; font-size: 15px; line-height: 24px; }
.rating { letter-spacing: 1px; }
.rating--lg { font-size: 18px; }

/* 작업기록 뱃지 */
.tag--record {
  font-size: 11px; font-weight: 700; color: var(--link);
  background: var(--accent-soft); padding: 2px 6px; border-radius: 4px;
}

/* --- 청소 범위 체크 ----------------------------------------------------- */
.checks-inline { display: flex; gap: 6px; padding: 0 16px; }
.checks-inline > li {
  flex: 1; font-size: 12px; font-weight: 600; text-align: center;
  padding: 7px 2px; border-radius: var(--r-sm); white-space: nowrap;
}
.checks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checks-grid > li {
  font-size: 14px; font-weight: 700; padding: 12px; border-radius: var(--r-sm); text-align: center;
}
.check-on { background: var(--accent-soft); color: var(--link); }
.check-off { background: var(--chip); color: var(--muted); font-weight: 500; }
.field-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.field-label .hint { font-weight: 500; color: var(--faint); }

/* --- 비포/애프터 -------------------------------------------------------- */
/* JS 가 없으면 두 장이 나란히 보인다 (콘텐츠 접근성 우선). */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba__pane { position: relative; overflow: hidden; }
.ba__pane img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba__pill {
  position: absolute; top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: #fff; padding: 3px 8px; border-radius: 6px;
}
.ba__pill--before { left: 10px; background: rgba(23, 32, 43, 0.65); }
.ba__pill--after { right: 10px; background: rgba(27, 111, 242, 0.85); }

/* ba-slider.js 가 붙으면 겹쳐진 비교 슬라이더로 전환 */
.ba--interactive {
  display: block; position: relative; aspect-ratio: 4 / 3;
  overflow: hidden; background: #EAEFF5; touch-action: pan-y;
}
.ba--interactive .ba__pane { position: absolute; inset: 0; }
.ba--interactive .ba__pane img { height: 100%; }
.ba--interactive .ba__pane--before { width: var(--ba-pos, 50%); }
.ba--interactive .ba__pane--before img { width: var(--ba-w, 100%); max-width: none; }
.ba--interactive .ba__line {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%);
  width: 2px; background: #fff; transform: translateX(-1px);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.ba--interactive .ba__knob {
  position: absolute; top: 50%; left: var(--ba-pos, 50%);
  width: 38px; height: 38px; background: #fff; border: 2px solid var(--accent);
  border-radius: 50% 50% 50% 0; transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.ba--interactive .ba__knob span {
  transform: rotate(45deg); color: var(--accent);
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
}
.ba--interactive .ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: transparent;
}
.ba--interactive .ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; }
.ba--lg.ba--interactive .ba__knob { width: 44px; height: 44px; }
.ba--lg .ba__pill { top: 12px; font-size: 12px; padding: 4px 10px; }
.ba--lg .ba__pill--before { left: 12px; }
.ba--lg .ba__pill--after { right: 12px; }

/* --- 가격표 ------------------------------------------------------------- */
.price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table caption { text-align: left; }
.price-table th,
.price-table td { padding: 12px 0; font-size: 15px; text-align: right; }
.price-table thead th {
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding-bottom: 8px; border-bottom: 1px solid var(--line-row);
}
.price-table thead th:first-child,
.price-table tbody th { text-align: left; font-weight: 600; }
.price-table tbody td { font-weight: 700; }
.price-table tbody tr { border-bottom: 1px solid var(--line-row); }
.price-table tbody tr:last-child { border-bottom: 0; }

/* --- 메타 목록 ---------------------------------------------------------- */
.meta-rows { display: grid; background: var(--surface); border-radius: var(--r-lg); padding: 4px 16px; }
.meta-rows > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-row);
}
.meta-rows > div:last-child { border-bottom: 0; }
.meta-rows dt { font-size: 14px; color: var(--muted); }
.meta-rows dd { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* --- 입점 배너 (어두운 면) ---------------------------------------------- */
.cta {
  display: block; margin: 24px var(--gut) 0;
  background: var(--dark); border-radius: var(--r-lg); padding: 20px; color: #fff;
}
.cta:hover { background: var(--dark-2); color: #fff; }
.cta__t { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cta__d { font-size: 13px; color: var(--dark-sub); }

/* --- 하단 액션바 -------------------------------------------------------- */
.actionbar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--surface); border-top: 1px solid var(--line-soft);
}
.actionbar > div {
  max-width: var(--shell); margin: 0 auto; display: flex; gap: 10px;
  padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
}
.actionbar .btn { flex: 1; }
.actionbar .btn--primary { flex: 1.3; }

/* --- 푸터 --------------------------------------------------------------- */
.footer {
  background: var(--surface); border-top: 1px solid var(--line-soft);
  padding: 28px var(--gut) 40px; margin-top: 32px;
}
.footer-h { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.footer-nav + .footer-nav { margin-top: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.footer-links a { color: var(--muted); }
.footer-tag { margin-top: 24px; font-size: 13px; color: var(--faint); }
.footer-meta { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; }

/* --- 폼 (partner / write) ----------------------------------------------- */
.form-stack { display: grid; gap: 14px; padding: 0 var(--gut) 40px; }
.input, .textarea {
  width: 100%; height: 52px; background: var(--surface);
  border: 1px solid var(--line-input); border-radius: var(--r-lg);
  padding: 0 14px; font-size: 15px; outline: none;
}
.input:focus, .textarea:focus { border-color: var(--accent); }
.textarea { height: auto; min-height: 96px; padding: 14px; resize: vertical; line-height: 22px; }
select.input { padding-right: 34px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235F6977' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }

.step-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.step-label .hint { color: var(--faint); font-weight: 500; }

.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick {
  text-align: left; padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.pick:hover { border-color: var(--accent); }
.pick[aria-pressed="true"] {
  border: 2px solid var(--accent); box-shadow: var(--shadow-focus); padding: 15px;
}
.pick__t { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.pick__d { display: block; font-size: 12px; line-height: 18px; color: var(--muted); }

.chip-btn {
  min-height: 44px; padding: 11px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.chip-btn:hover { border-color: var(--accent); }
.chip-btn[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}

.result-box {
  background: var(--surface); border-radius: var(--r-lg); padding: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.result-box__url { font-size: 15px; font-weight: 700; color: var(--link); word-break: break-all; }
.form-msg { font-size: 13px; line-height: 20px; font-weight: 600; }
.form-msg--err { color: var(--danger); }
.form-msg--ok { color: var(--biz); }

/* 지역 드릴다운 선택기 */
/* 선택기는 JS 가 채운다. 비어 있는 동안 자리를 잡아 두지 않으면
   채워지는 순간 아래 콘텐츠가 밀려 CLS 가 크게 튄다. */
[data-region-picker] { min-height: 114px; }
@media (min-width: 520px) {
  [data-region-picker] { min-height: 52px; }
}
.picker { display: grid; gap: 10px; }
.picker__step { width: 100%; }
.picker__step:disabled { opacity: .5; }
.picker__chips { margin-top: 10px; }
.picker__chips:empty { display: none; margin: 0; }
@media (min-width: 520px) {
  .picker { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}