/* 우리회사 안전전문가 찾기 — DESIGN.md v2(하이브리드)가 단일 원천, design/mockup-home-v2.html이 승인 시안
   두 구역(DESIGN.md §2)
   · 이야기 구역(홈 첫 화면·상태 띠·FEATURED): 가운데 큰 제목, 큰 둥근 패널, 차분한 모션.
     v2.2: 첫 화면 떠 있는 조각 없음(§5). v2.3: FEATURED 패널 안도 글자만(카드·조각 없음, §7).
     선택자는 .hero / .facts / .featured / .story / .panel / .reveal 로 시작하는 것만.
   · 문서 구역(그 밖의 상황 표·분야 목록·이용 절차·전문가 목록·등록·이용안내·관리자):
     왼쪽 정렬, 괘선 표, 버튼·입력 모서리 4px·그 외 0, 그림자·모션 없음.
   색 7개만(§3). 서체 Pretendard 하나(§4). v2.1: 본문 17/28, 표·숫자 16/24, 입력칸 17, 보조 15, 라벨 12.
   v2.1 §12-8: 포커스 링 남색 2px·2px 띄움, 터치 대상 최소 44×44px.
   v2.3 §12-5: 스크립트로 옮긴 포커스(tabindex="-1" 제목)에는 테두리 없음. */
:root {
  --ink: #191C21;       /* 먹: 본문·제목, 표 상단 굵은 괘선 */
  --navy: #0B3B6F;      /* 남색: 링크, 법 조항, FEATURED 패널 바탕, 포커스 링 */
  --navy-deep: #06213F; /* 깊은 남색: FEATURED 패널 그라데이션 끝색 */
  --paper: #FFFFFF;     /* 종이: 배경 */
  --rule: #D5DAE1;      /* 괘선: 가는 선 1px, 조각 테두리 */
  --sub: #5B6472;       /* 회색 글자: 보조 설명, 상태 띠 라벨 */
  --orange: #E8710A;    /* 안전 주황: 홈 '찾기' 버튼 하나만 (v2.3: 패널 빛 번짐 없음) */
  --sans: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --gap: 120px;         /* 섹션 간 여백 (모바일 72px) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 17px/28px var(--sans); color: var(--ink); background: var(--paper);
  word-break: keep-all; overflow-wrap: anywhere; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
/* 페이지 첫 제목 40/48·800·-0.03em, 문서 구역 섹션 제목 28/36·700·-0.02em (§4) */
h1 { font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; }
h3 { font-size: 18px; line-height: 27px; font-weight: 600; letter-spacing: -0.02em; }
strong, b, th { font-weight: 600; }
a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container.wide { max-width: 1240px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.num, td { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; } /* 가운뎃점(·)이 줄 첫머리로 떨어지지 않게 묶음 */

/* 머리글: 텍스트 로고 + 메뉴, 아래 1px 괘선 */
.site-header { border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; min-height: 64px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.gnb { display: flex; flex-wrap: wrap; gap: 0 24px; }
.gnb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; }
/* 현재 페이지: 먹 700 + 아래 2px 남색선 (§12-7) */
.gnb a[aria-current="page"] { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--navy); padding-top: 2px; }
.gnb a:hover { color: var(--navy); text-decoration: underline; }

/* 페이지 공통 (문서 구역) */
main.container { padding-bottom: var(--gap); } /* 본문 끝과 푸터 사이 */
.section { margin-top: var(--gap); }
.page-head { margin-top: 72px; margin-bottom: 40px; }
.page-head p { margin-top: 12px; }
.hint { font-size: 15px; line-height: 22px; color: var(--sub); margin-top: 4px; }

/* 입력·버튼: 모서리 4px, 높이 48px */
select, input[type=text], input[type=tel], input[type=email], input[type=number], textarea {
  font: inherit; color: var(--ink); background: var(--paper); width: 100%;
  min-height: 48px; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 4px;
}
textarea { line-height: 28px; }
input[type=file] { font: inherit; font-size: 15px; max-width: 100%; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--navy); flex-shrink: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border-radius: 4px; border: 1px solid var(--navy); background: var(--navy); color: var(--paper);
}
.btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-sub { background: var(--paper); color: var(--navy); }
.btn-sm { min-height: 44px; padding: 0 16px; }
/* 글자 버튼(괘선 테두리·4px) — 빈 결과·접수 완료 링크 줄, 시트 닫기 */
.line-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font: inherit; font-weight: 600; color: var(--navy); text-decoration: none; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
}
.line-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
button[disabled] { opacity: .6; cursor: not-allowed; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 15px; line-height: 22px; color: var(--sub); }

/* 괘선 표: 상단 2px 먹선, 행 사이 1px 괘선, 세로선 없음, 모서리 0 */
.ruled { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: 16px; line-height: 24px; }
.ruled th { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); color: var(--sub); }
.ruled td { vertical-align: top; text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.ruled td:last-child, .ruled th:last-child { padding-right: 0; }
.situation { display: block; font-size: 17px; line-height: 28px; font-weight: 600; }
.law { color: var(--navy); }
.law-none { color: var(--sub); }
.go { white-space: nowrap; }
.ruled td.go a, .deflist dd.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* 정의 목록(분야명 | 하는 일 | 보기 →) */
.deflist { border-top: 2px solid var(--ink); font-size: 16px; line-height: 24px; }
.deflist > div { display: grid; grid-template-columns: 200px 1fr auto; gap: 0 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.deflist dt { font-weight: 600; font-size: 17px; line-height: 28px; }
.deflist dd { padding-top: 2px; }

/* 번호 목록 (실제 순서가 있는 내용만) */
.steps { padding-left: 1.6em; list-style: decimal; }
.steps li { padding-left: 4px; }
.steps li + li { margin-top: 10px; }
/* 한 줄 링크: 괘선 사이 */
.lines p { padding: 12px 0; border-top: 1px solid var(--rule); }
.lines a { display: inline-flex; align-items: center; min-height: 44px; }
.lines p:last-child { border-bottom: 1px solid var(--rule); }

/* 안내문: 괘선 위아래, 색 면 없음 */
.notice-box { border-top: 1px solid var(--rule); padding: 16px 0 0; margin: 32px 0 0; color: var(--sub); }
.alert { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0; margin: 16px 0; }
.alert-ok { border-top-color: var(--navy); }
.alert-err { border-top-color: var(--ink); font-weight: 600; }

/* 전문가 목록: 카드 대신 괘선 목록 (한 전문가 = 한 행 블록) */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.filter-bar .field { flex: 1 1 180px; }
/* 640px 이하 조건 줄 + 조건 시트 (§12-2) — 넓은 화면에서는 숨김 */
.cond-line { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cond-line p { min-width: 0; font-weight: 600; }
.cond-k { color: var(--sub); font-weight: 400; margin-right: 12px; }
.sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 90vh; margin: 0; padding: 0; overflow-y: auto;
  color: var(--ink); background: var(--paper); border: 0; border-top: 1px solid var(--rule); border-radius: 16px 16px 0 0;
}
.sheet::backdrop { background: var(--navy-deep); opacity: .4; }
.sheet-inner { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 28px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head h2 { margin: 0; font-size: 20px; line-height: 28px; }
/* 결과 줄: 왼쪽 먹 600 조건·인원, 같은 줄 오른쪽 회색 15px 정렬 기준 */
/* 2px 먹선은 결과 줄 아래 하나만 — 목록·빈 결과 상자는 위 굵은 선 없음 (§12-2·12-3) */
.result-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-top: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.result-main { font-weight: 600; }
.result-sub { font-size: 15px; line-height: 22px; color: var(--sub); }
.expert-row { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.expert-photo { width: 64px; height: 64px; object-fit: cover; filter: grayscale(1); flex-shrink: 0; } /* 작은 흑백 정사각, 테두리 없음 */
.expert-body { flex: 1; min-width: 0; }
.expert-name { margin-bottom: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.expert-cat { font-weight: 400; color: var(--sub); }
.expert-license, .expert-meta { font-size: 16px; line-height: 24px; color: var(--sub); font-variant-numeric: tabular-nums; }
.expert-intro { margin-top: 8px; }
.expert-intro.clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* 확인 한 줄: 남색 15px 600, 접지 않고 항상 보임 (§12-4). 등록 미리보기는 회색 */
.verify-line { margin-top: 12px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.verify-line.pending { color: var(--sub); }
.expert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.verify-info { margin-top: 4px; }
.verify-info summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--sub); }
.verify-info summary::-webkit-details-marker { display: none; }
.verify-info summary::after { content: '+'; font-weight: 400; }
.verify-info[open] summary::after { content: '−'; }
.verify-info ul { list-style: none; border-top: 1px solid var(--rule); padding-top: 8px; }
.verify-info li { font-size: 15px; line-height: 22px; color: var(--sub); margin-bottom: 4px; }
/* 보조 링크 줄: 남색 15px 밑줄 글자 (버튼 모양 아님) */
.expert-sub { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--sub); }
.sub-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-weight: 400; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sub-link:hover { text-decoration-thickness: 2px; }
/* 문의 문구 만들기 (블록 안 펼침) */
.inquiry { display: grid; gap: 12px; max-width: 560px; padding: 16px 0; border-top: 1px solid var(--rule); }
.inquiry-label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--sub); }
.inquiry-preview { padding: 12px 14px; border: 1px solid var(--rule); white-space: pre-wrap; }
.inquiry .btn { justify-self: start; }
.copy-note { margin: 8px 0 0; padding: 10px 0; font-size: 15px; line-height: 22px; }
.empty-box { border-bottom: 1px solid var(--rule); padding: 24px 0; }
.empty-box .empty-title { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 700; }
.empty-box p { margin-bottom: 16px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.loading { color: var(--sub); padding: 24px 0; }

/* 폼: 라벨 위, 괘선 구분 */
.form-card { max-width: 640px; }
.form-card.narrow { max-width: 400px; }
.form-row { padding: 20px 0; border-top: 1px solid var(--rule); }
form > .form-row:first-child, .step .step-title + .form-row, .step .hp-field + .form-row { border-top: 2px solid var(--ink); }
.form-row > label, .form-row > .label { display: block; font-weight: 600; margin-bottom: 8px; }
.form-row .req { color: var(--ink); }
.form-row .consent { display: flex; gap: 8px; align-items: flex-start; min-height: 44px; font-weight: 400; margin: 0; }
.form-row .consent input { margin-top: 4px; }
.check-grid { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.check-grid label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; }
/* 등록 3단계 (§12-5): 진행 표시 글자 줄 — 현재 먹 700 + 아래 2px 남색선, 지난 단계 남색, 남은 단계 회색 */
.step-progress { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin-bottom: 32px; color: var(--sub); }
.step-progress li { display: flex; align-items: center; }
.step-progress li + li::before { content: "—"; padding: 0 12px; color: var(--sub); font-weight: 400; }
.step-progress .t { padding: 8px 0; border-bottom: 2px solid transparent; }
.step-progress li.done { color: var(--navy); }
.step-progress li.now { color: var(--ink); font-weight: 700; }
.step-progress li.now .t { border-bottom-color: var(--navy); }
.step { border: 0; min-width: 0; }
.step-title { margin: 0 0 16px; font-size: 22px; line-height: 30px; }
.step-nav { display: flex; justify-content: space-between; gap: 8px; padding-top: 24px; border-top: 1px solid var(--rule); }
.step-nav .btn { min-width: 120px; }
.step-nav #nextBtn, .step-nav #submitBtn { margin-left: auto; }
.preview { padding: 20px 0; border-top: 1px solid var(--rule); }
.preview-label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--sub); padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.btn.inert { pointer-events: none; cursor: default; color: var(--sub); background: var(--paper); border-color: var(--rule); }
/* 접수 완료 (§12-6) */
.done-title { margin: 0 0 12px; font-size: 22px; line-height: 30px; }
.done-steps { list-style: none; }
.done-steps li + li { margin-top: 6px; }
.done-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* 안전용품 바로구매 (v2.2 §13 → v2.8 §14-2): 문서 구역 — 제목 바로 아래 고지 괘선 상자(회색 15px) */
.supplies-note { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--rule); font-size: 15px; line-height: 22px; color: var(--sub); }
.supplies-note p { margin: 0; }
.supplies-note p + p { margin-top: 4px; }
/* 안전용품 카탈로그 (v2.6 §14, v2.7 §14-1): 오늘의 특가 줄(승인 특가는 사진 있으면 사진 카드, 없으면 글자 카드) + 품목 글자 탭 10개 + 사진 카드(이 페이지만 사진 허용).
   카드는 흰 바탕·괘선 1px·모서리 4px·그림자 없음, 카드 안에 카드 없음. PC 5열 · 태블릿 3열 · 폰 2열 */
.catalog-title { margin: 0 0 16px; }
.today { margin-bottom: 56px; }
.item-tabs { display: flex; flex-wrap: nowrap; gap: 0 24px; overflow-x: auto; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.item-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: inherit; font-weight: 600; color: var(--sub); white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.item-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--navy); }
.item-tabs button:hover { color: var(--navy); }
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; }
.product { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; }
.product-photo { aspect-ratio: 1 / 1; margin-bottom: 6px; background: var(--rule); }
.product-photo img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.product-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 17px; line-height: 24px; font-weight: 600; }
.product-price { font-size: 20px; line-height: 28px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.product-rocket, .product-note { font-size: 15px; line-height: 22px; color: var(--sub); }
.product .product-badge { align-self: flex-start; padding: 0 8px; font-size: 15px; line-height: 24px; color: var(--paper); background: var(--navy); border-color: var(--navy); }
.product a { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; }
.catalog-empty { padding: 16px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.catalog-fine { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--sub); }
/* v2.8 §14-2 오늘의 특가: 처음엔 한 줄(PC 5 · 태블릿 3 · 폰 2장)만, '특가 더 보기 (N개)' 글자 버튼(aria-expanded)으로 펼침 */
.today-cards:not(.open) > li:nth-child(n+6) { display: none; }
.today-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0; font: inherit; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.today-more[hidden] { display: none; }
/* v2.8 §14-2 현장별 진열: 섹션 = 장면 패널(남색 단색·모서리 4px·흰 글자, 그 섹션 첫 상품 사진) + 카드 3장(§13 사진 카드, 위에 회색 품목 이름).
   그라데이션·광채 없음, 표 없음(글자는 세로로 고르게), 카드 안에 카드 없음. PC 패널 260px · 태블릿 200px · 폰은 패널이 위 */
.scenes { margin-bottom: 56px; }
.scene { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.scene + .scene { margin-top: 40px; }
.scene-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; color: var(--paper); background: var(--navy); border-radius: 4px; }
.scene-panel h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--paper); }
.scene-panel p { margin: 0; font-size: 15px; line-height: 22px; color: var(--paper); }
.scene-photo { margin-top: auto; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper); border-radius: 4px; }
.scene-photo img { display: block; width: 100%; height: 100%; padding: 12px; object-fit: contain; }
.scene-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-width: 0; list-style: none; }
.product-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.product-label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--sub); }
.product-wait, .scene-msg { font-size: 15px; line-height: 22px; color: var(--sub); }
.product-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; }
.product-links a { margin-top: 0; }
.product .same { font-size: 15px; color: var(--sub); }
.all { padding-top: 48px; border-top: 1px solid var(--rule); }

/* 이용안내 본문 */
.prose { max-width: 760px; }
/* v2.3 §12-8: 절 제목은 h2(h1 → h2 단계), 보이는 크기는 예전 h3 그대로 18/27·600 */
.prose h2 { margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 18px; line-height: 27px; font-weight: 600; letter-spacing: -0.02em; }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose ul { padding-left: 20px; }
.prose ol { padding-left: 1.5em; }
.prose li { margin-bottom: 8px; }
.prose p + p { margin-top: 12px; }

/* 자주 묻는 질문 (about.html#faq) */
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--sub); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--sub); padding: 0 0 16px; }

/* 푸터: 작은 회색, 위 1px 괘선 */
/* 꼬리말 (§12-7): 위 괘선, 회색 15px — 운영 안내 / 이용 안내 절·안전용품(v2.6) 링크 / 사업자정보(v2.4) / © (v2.2: 사진 출처 없음) */
.site-footer { border-top: 1px solid var(--rule); padding: 28px 0 48px; font-size: 15px; line-height: 22px; color: var(--sub); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-biz a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p + p { margin-top: 4px; }
.disclaimer { max-width: 720px; }

/* 관리자 */
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin: 72px 0 32px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--ink); margin-bottom: 40px; }
.stat-card { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.stat-card .n { font-size: 28px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card .l { font-size: 14px; line-height: 21px; color: var(--sub); }
.admin-section { margin: 48px 0 16px; }
.table-wrap { overflow-x: auto; }
/* 관리자 표 가독성: 관리자 본문만 1320px(다른 문서 구역은 1080px), 단어 중간 줄바꿈 없음(전역 overflow-wrap:anywhere 해제) */
.container.admin-page { max-width: 1320px; }
.admin-table td, .admin-table th { overflow-wrap: normal; word-break: keep-all; }
.admin-table th { white-space: nowrap; }
/* 전문가 목록 칸: 1 신청일 2 이름 3 분야 4 자격번호 5 지역 6 연락처 7 상태 8 검증 보조 9 처리 */
.experts-table td:nth-child(1), .experts-table td:nth-child(5), .experts-table td:nth-child(7) { white-space: nowrap; }
.experts-table td:nth-child(4) { min-width: 180px; }
/* 연락처: 전화(숫자·하이픈 — 끊길 자리 없음) / 이메일 두 줄. 긴 이메일만 글자 단위(break-all)로 넘김 */
.experts-table td:nth-child(6) { min-width: 200px; word-break: break-all; }
.experts-table td:nth-child(8) { min-width: 240px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.status { font-weight: 600; }
.status-pending { color: var(--navy); }
.status-hidden { color: var(--sub); font-weight: 400; }
.no-license { color: var(--sub); }
.link-btn { background: none; border: 0; padding: 0; color: var(--navy); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn.strong { font-weight: 700; }
.no-license.strong { color: var(--ink); font-weight: 700; }
/* 관리자 검증 보조 — 문서 구역: 괘선만, 모서리 0(버튼은 .btn 4px), 아이콘 없음 */
.agency-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
.agency-line .k { font-weight: 600; }
.agency-line .v { color: var(--sub); font-size: 14px; line-height: 21px; font-variant-numeric: tabular-nums; }
.verify { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 240px; }
.verify .note { color: var(--sub); font-size: 14px; line-height: 21px; }
.verify .ref { color: var(--sub); font-size: 14px; line-height: 21px; }
.badge { display: inline-block; padding: 0 6px; font-size: 14px; line-height: 22px; font-weight: 600; border: 1px solid var(--rule); color: var(--sub); }
.badge-match { border-color: var(--navy); color: var(--navy); }
.badge-addr_diff, .badge-missing { border: 2px solid var(--ink); color: var(--ink); font-weight: 700; }
/* 관리자 특가 (v2.5 §14): 검색어 줄·CSV 붙여넣기·미리보기. 오류 행은 빨간색 대신 먹 2px 윗줄 + 굵게 */
.admin-sub { margin: 32px 0 12px; }
.deal-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 16px; }
.deal-bar .field { min-width: 220px; }
.deal-csv { font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.admin-table tr.deal-bad td { border-top: 2px solid var(--ink); font-weight: 700; }
.admin-table .deal-reason { font-weight: 700; }

/* 데모 모드 안내 (Supabase 미설정) — 색 면 없이 괘선 */
.demo-banner { border-bottom: 1px solid var(--rule); color: var(--sub); font-size: 15px; line-height: 22px; padding: 8px 24px; }

/* 유틸 (CSP: 인라인 style 속성 대신 클래스) */
.w-full { width: 100%; }
.fw-normal { font-weight: 400; }
.mb-14 { margin-bottom: 14px; }
.mt-14 { margin-top: 14px; }
/* 허니팟: 사람에게는 안 보이고 봇은 채움 */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ───────── 홈 문서 구역 (§8): 최대 폭 1080px 왼쪽 정렬 ───────── */
.home-main { padding-bottom: var(--gap); }
.doc { max-width: 1080px; }
.doc section { margin-top: var(--gap); }
.doc .ruled thead th:nth-child(1) { width: 52%; }
.doc .ruled thead th:nth-child(2) { width: 32%; }

/* ───────── 이야기 구역 1: 첫 화면 (§5) ───────── */
.hero {
  min-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 24px 96px;
  text-align: center;
}
.hero-core { /* 가운데 글 묶음 — 인사말·제목·설명·검색 줄·링크만, 남는 자리는 여백 (v2.2 §5) */
  width: fit-content; max-width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.hero .hello { margin: 0 0 20px; color: var(--sub); font-weight: 600; font-size: 17px; line-height: 24px; }
.hero h1 { margin: 0; font-size: 72px; line-height: 80px; font-weight: 800; letter-spacing: -0.04em; }
.hero .lede { margin: 28px 0 0; font-size: 20px; line-height: 30px; text-wrap: balance; }
/* 문장형 검색 (§12-1): [지역] 에서 [분야] 전문가 [찾기] — 선택칸 밑줄형(아래 2px 먹선·배경 없음·남색 600 22px), 이음말 먹 22px 400 */
.hero .search { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; max-width: 100%; }
.hero .search .say { display: inline-flex; align-items: center; gap: 10px; }
.hero .search .join { font-size: 22px; line-height: 30px; font-weight: 400; color: var(--ink); white-space: nowrap; }
.hero .search select {
  width: auto; min-width: 0; height: 52px; min-height: 52px; padding: 0 4px;
  font: 600 22px var(--sans); color: var(--navy); background: transparent;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; cursor: pointer;
}
.hero .btn-find { /* 안전 주황 — 이 버튼 하나에만 */
  flex: 0 0 auto; height: 56px; padding: 0 32px;
  font: 700 19px var(--sans); color: var(--paper); /* 흰 글자/주황 ≈3.1:1 → 큰 글자(19px 굵게) 기준 3:1 충족 */
  background: var(--orange); border: 0; border-radius: 4px; cursor: pointer;
}
.hero .btn-find:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero .count { margin-top: 20px; }
.hero .to-featured { margin-top: 28px; font-weight: 600; }

/* ───────── 이야기 구역 2: 상태 띠 (§6) ───────── */
.facts { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts dl { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 20px 24px; max-width: 1240px; }
.facts dl > div { display: flex; flex-direction: column; gap: 4px; }
.facts dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--sub); }
.facts dd { font-size: 15px; line-height: 22px; color: var(--ink); }

/* ───────── 이야기 구역 3: FEATURED 상황 3개 (§7) ───────── */
.featured { padding-top: var(--gap); }
.featured .story + .story { margin-top: var(--gap); }
.story .label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--sub); }
.story h2 { margin: 12px 0 0; max-width: 1080px; font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -0.03em; text-wrap: pretty; }
/* 안전 준비물로 가는 한 줄 링크 (v2.2 §13) — FEATURED 두 번째(위험성평가) 패널 안 전문가 링크 아래·그 밖의 상황 표 안전점검 행 아래 */
.to-supplies { display: flex; align-items: center; width: fit-content; min-height: 44px; font-size: 15px; line-height: 22px; }
.panel {
  margin-top: 32px; border-radius: 28px;
  padding: 56px 40px; text-align: left; color: var(--paper);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}
/* v2.3 §7: 패널 위는 라벨·큰 제목만, 조항은 패널 안 한 번 — 라벨 '법적 근거' → 큰 조항 → 한 줄(기한·해야 할 일) → 흰 밑줄 링크 */
.panel .basis-k { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; }
.panel .basis-v { margin-top: 8px; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.panel .basis-line { margin-top: 12px; max-width: 720px; opacity: .85; text-wrap: pretty; }
.panel .go { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; color: var(--paper); font-weight: 600; }
.panel .to-supplies { color: var(--paper); }
.panel .go:focus-visible, .panel .to-supplies:focus-visible { outline-color: var(--paper); }
/* 스크롤로 들어올 때 한 번 떠오름 — home.js가 html에 .reveal-on 을 붙일 때만(JS·IO 없으면 그냥 보임) */
.reveal-on .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal-on .reveal.in { opacity: 1; transform: none; }

@media (min-width: 720px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
/* 1100px 미만: 칸을 좁히지 않고 표 래퍼(.table-wrap)에서 가로 스크롤 */
@media (max-width: 1099px) {
  .experts-table { width: auto; min-width: 1100px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .today-cards:not(.open) > li:nth-child(n+4) { display: none; }
  .scene { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
  .scene-panel { padding: 20px 16px; }
  .scene-cards { gap: 12px; }
  .scene-cards .product { padding: 10px; }
  .scene-cards .product-price { font-size: 18px; line-height: 26px; }
}

/* 1024~1279: 제목 56/64, 설명 2줄 */
@media (max-width: 1279px) {
  .hero h1 { font-size: 56px; line-height: 64px; }
  .hero .lede { font-size: 18px; line-height: 26px; max-width: 440px; }
  .hero .btn-find { padding: 0 24px; }
}
/* 641~1023: FEATURED 패널의 법 조항 조각은 글 폭만큼 */
@media (max-width: 640px) {
  :root { --gap: 72px; }
  .container { padding: 0 20px; }
  h1 { font-size: 32px; line-height: 40px; }
  .page-head, .admin-head { margin-top: 48px; }
  .gnb { gap: 0 16px; }
  /* 공개 페이지 메뉴 4개(v2.5): 사이트 이름 아래 한 줄, 가로 스크롤 없이 균등(간격 나눔), 글자 14px(v2.8 §14-2 — 안전용품 바로구매가 길다) */
  .site-nav { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 4px; width: 100%; }
  .site-nav a { font-size: 14px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .today-cards:not(.open) > li:nth-child(n+3) { display: none; }
  .scene { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .scene-panel { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 4px 16px; padding: 20px; }
  .scene-panel h3, .scene-panel p { grid-column: 1; }
  .scene-photo { grid-column: 2; grid-row: 1 / span 2; width: 112px; margin-top: 0; }
  .scene-photo img { padding: 8px; }
  .scene-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .scene-cards .product { flex-direction: row; align-items: center; gap: 12px; padding: 10px; }
  .scene-cards .product-photo { flex: 0 0 96px; width: 96px; margin: 0; }
  .scene-cards .product-body { gap: 2px; }
  .scene-cards .product-links { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 16px; }
  .filter-bar { display: none; }
  .cond-line { display: flex; }
  .step-nav .btn { min-width: 0; flex: 1 1 0; }
  .step-progress { flex-wrap: nowrap; font-size: 15px; line-height: 22px; }
  .step-progress li + li::before { padding: 0 6px; }
  /* 괘선 표는 행마다 세로로: 상황 → 근거 → 링크 */
  .ruled.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ruled.stack, .ruled.stack tbody, .ruled.stack tr, .ruled.stack td { display: block; width: 100%; }
  .ruled.stack tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .ruled.stack td { border: 0; padding: 0; }
  .ruled.stack td + td { margin-top: 4px; }
  .deflist > div { grid-template-columns: 1fr; gap: 4px 0; }
  .expert-row { gap: 14px; }
  .expert-photo { width: 48px; height: 48px; }

  .hero { padding: 48px 20px 64px; min-height: auto; }
  .hero h1 { font-size: 40px; line-height: 48px; }
  .hero .lede { font-size: 17px; line-height: 26px; margin-top: 20px; }
  .hero .search { flex-direction: column; width: 100%; margin-top: 28px; }
  .hero .search .say { width: 100%; justify-content: center; }
  .hero .search select { flex: 0 1 auto; max-width: calc(100% - 90px); }
  .hero .btn-find { flex: none; width: 100%; }

  .facts dl { display: grid; grid-template-columns: 1fr 1fr; padding: 20px; }
  .facts dl > div:last-child { grid-column: 1 / -1; }

  .story h2 { font-size: 32px; line-height: 40px; }
  .panel { padding: 32px 20px; }
  .panel .basis-v { font-size: 24px; line-height: 32px; }
}

/* 움직임 줄이기: 패널 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
}