/* 장례지도사 실무 도구 12쪽 — 새 홈페이지 규칙에 맞추는 덮어쓰기 (2026-10-19 재훈 "UI·양식·글 통일").
   scripts/sync-v2.mjs 가 각 도구 페이지 맨 끝(</body> 앞)에 넣는다. 도구의 동작(JS)은 건드리지 않고 겉모습만 맞춘다.
   규칙(naviga-homepage CLAUDE.md 4조): 색 7개 · 모서리 0 · 그림자 0 · 그라데이션 0 · 굵기 500 이하 · 글꼴 Hahmlet(글꼴 파일은 v2-shell.css 의 @font-face).
   문서 미리보기(축문·지방·위패·명정 종이, .sheet/.paper/.vcol 류)는 인쇄물이라 글꼴·굵기를 그대로 둔다. */

/* 1) 도구들이 쓰는 색 변수 → 새 홈페이지 7색으로. 이름은 도구별 <style> 의 :root 그대로 */
:root {
  --green-900: #1F2A1E; --green-800: #1F2A1E; --green-700: #3E463C; --green-600: #3E463C; --green-500: #5E6A5A;
  --sage: #5E6A5A; --sage-2: #D5D2C8; --sage-3: #D5D2C8;
  --ivory: #F4F1EA; --ivory-2: #F7F5F0; --paper: #F7F5F0; --charcoal: #1F2A1E; --muted: #5E6A5A;
  --line: #D5D2C8; --line-2: #D5D2C8; --tline: #D5D2C8;
  --gold: #8B2E2E; --gold-2: #8B2E2E;
  --g: #1F2A1E; --g2: #3E463C; --iv: #F4F1EA; --warn: #8B2E2E;
  --sans: 'Hahmlet', 'Apple SD Gothic Neo', sans-serif;
  --serif-en: 'Hahmlet', serif;
}

/* 2) 바탕·글꼴 — 몇 쪽은 body 에 그라데이션과 Pretendard 를 직접 적었다 */
body { background: #F4F1EA; color: #1F2A1E; font-family: 'Hahmlet', 'Apple SD Gothic Neo', sans-serif; }

/* 3) 모서리 0 · 그림자 0 · 움직임 0(4조 10번) — 화면 전체. 종이 미리보기의 액자 테두리는 그대로 남는다 */
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; transition: none !important; animation: none !important; }

/* 4) 그라데이션(바탕·.hero·.btn-print·.mean-rule·.sheet 종이결)은 각 도구 페이지의 <style> 에서 평색으로 바꿨다(2026-10-19). 여기서는 건드리지 않는다 */

/* 5) 굵기 — 화면 요소는 500 까지. 인쇄 종이 안(.vcol·.vtext·.nvf-b·.mean-head·.paper·.obit·.sheet h3)은 두지 않는다 */
h1, h2, h3, h4, label, button, th, strong, b,
.panel h3, .panel h2, .fgroup label, .btn-print, .btn-dl, .hero h1, .kinds button, .modes button, .rels button, .mts button,
.seg2 button, .grid3 button, .chk, .actions button, .copy h2, .download, .info-table .lab, .cal-head h2, .cal-head button,
.week div, .solar, .badge, .status-panel h2, .selected-date, .memo label, .delete-date, .eyebrow, .field span, .field label,
.place, .progress, .guide-notes a, .rgrid a, .rgrid .rk, .vside, .form-head h2, .completion, .preview-label, .row dt, .sched h2 {
  font-weight: 500;
}
/* 종이 안 요소(.reading b · .vcol · .vtext · .nvf-b .ko · .mean-head · .paper h2 · .obit h2 · .sheet h3 …)는 위 목록에 넣지 않았고,
   도구 자체 규칙의 선택자가 더 구체적이라 그대로 이긴다 */

/* 6) 배지(알약 모양 "이용료 없음 · 가입 없음")는 싣지 않는다(7절 배지 금지). 빵 부스러기 줄은 둔다 */
.tool-head .free-badge, .use-badge { display: none; }

/* 7) 단추 — 채움(딥그린)과 테두리 두 종류, 직각. 선택된 칸(.on / aria-selected)은 채움 */
.kinds button, .modes button, .rels button, .mts button, .seg2 button, .grid3 button, .audience-tabs button {
  background: #F7F5F0; color: #1F2A1E; border: 1px solid #D5D2C8;
}
.kinds button.on, .modes button.on, .rels button.on, .mts button.on, .seg2 button.on, .grid3 button.on, .audience-tabs button[aria-selected="true"], button.place[aria-pressed="true"] {
  background: #F7F5F0; color: #1F2A1E; border: 2px solid #1F2A1E; font-weight: 500; /* 접수 화면의 고른 칸과 같은 표시(2px 테두리) */
}
.grid3 button.on .hj, .seg2 button.on .hj, .rels button.on .hj { color: #5E6A5A; }
.btn-print, .btn-dl, .actions button { border: 1px solid #1F2A1E; }

/* 8) 입력칸 — 테두리 1px 괘선색, 직각 */
input[type="text"], input[type="date"], input[type="number"], input[type="tel"], input[type="search"], select, textarea {
  border: 1px solid #D5D2C8; background: #FFFFFF; color: #1F2A1E; font-family: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #1F2A1E; outline-offset: 2px; }

/* 9) 옛 사이트 전용 떠 있는 단추(카톡·전화 알약, 하단 고정 띠)는 새 헤더·전화 띠가 대신한다 */
.cfloat, .naviga-sticky-cta, .mobile-sticky-cta { display: none !important; }

/* 10) 인쇄 — 화면용 덮어쓰기는 인쇄에 영향을 주지 않는다 */
@media print {
  body { background: #FFFFFF; }
  .v2-shell { display: none !important; }
}

/* 11) 글꼴·크기 — 화면 요소는 Hahmlet, 14px 아래로 내려가지 않게(4조 5번). 종이 미리보기(.sheet/.paper/.vcol)·달력 날짜칸 안쪽은 제외 */
h1, h2, h3, h4, .panel h2, .panel h3, .form-head h2, .cal-head h2, .status-panel h2, .sched h2, .copy h2, .tool-head h1 { font-family: 'Hahmlet', serif; }
button, input, select, textarea { font-family: inherit; }
.breadcrumb, .breadcrumb a, .breadcrumb span, label, .hint, .note, .privacy, .desc, .lead, .mthint, .reading, .disc, .file-meta, .completion,
.preview-label, .fieldlist li, .rowcfg, .stepper, .screen-summary, .eyebrow, .progress, .warning, .official, .notice, .empty-panel, small, .rk,
.panel h3, .fgroup label, .field label, .field span, .memo label, .selected-date, .guide-notes a, p.hint, p.note, p.privacy, p.disc { font-size: 14px; }
h4 { font-size: 16px; }
.kinds button, .modes button, .rels button, .mts button, .seg2 button, .grid3 button, .audience-tabs button, .actions button, .btn-print, .btn-dl, .btn-copy,
button.primary, button.danger, button.place, .cal-head button, .rowdel, .delete-date { font-size: 16px; font-weight: 500; }
.kinds button.on, .modes button.on, .rels button.on, .mts button.on, .seg2 button.on, .grid3 button.on, .audience-tabs button[aria-selected="true"] { font-weight: 500; }
.hj, span.hj { font-size: 12px; }            /* 고르기 단추 안의 한자 보조 표기 — 두 줄 단추라 12px 까지만 */
/* 달력 날짜칸(.solar·.lunar·.son·.badge)은 한 달 격자라 도구 값 그대로 둔다 — 위 목록에 넣지 않았다 */
a { font-weight: inherit; }
b, strong { font-weight: 500; }
input, select, textarea, button { font-size: 16px; }
.opt, .panel-note, .contents span, .reading { font-size: 14px; }
.reading b { font-weight: 500; }

/* 12) 본문 폭 — 헤더 로고와 같은 선(72px)에서 시작한다. 쪽마다 .wrap 의 최대 폭이 1080~1380 으로 제각각이던 것(2026-10-19 검수) */
.wrap, .tool-wrap { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 72px; padding-right: 72px; box-sizing: border-box; }
.hero .wrap { padding-left: 72px; padding-right: 72px; }
@media (max-width: 768px) {
  .wrap, .tool-wrap, .hero .wrap { padding-left: 20px; padding-right: 20px; }
  body { padding-bottom: 82px; } /* 모바일 하단 전화·카톡 띠 자리 */
}

/* 13) 제목 — 띠(.hero) 형식 3쪽·베이지 띠 1쪽·경로 표시 8쪽이 섞여 있던 것을 한 모양으로: 바탕 없이 제목 34px(모바일 26px) + 설명 18px */
.hero { background: transparent !important; color: #1F2A1E; border: 0; padding: 24px 0 0; text-align: left; }
.hero::before, .hero::after { display: none; }
.hero .eyebrow, .ey { display: none; }
.hero h1, .tool-head h1, main > h1, h1 { font-size: 34px; line-height: 1.5; font-weight: 500; color: #1F2A1E; text-shadow: none; margin: 0 0 12px; }
.hero p, .tool-head p, .tool-head .desc, .lead { font-size: 18px; line-height: 1.8; color: #3E463C; max-width: 680px; }
h2, .copy h2, .guide-notes h2, .panel h2, .form-head h2, .cal-head h2, .status-panel h2, .sched h2 { font-size: 26px; line-height: 1.5; }
.panel h2, .form-head h2, .cal-head h2, .status-panel h2, .sched h2 { font-size: 20px; }
@media (max-width: 768px) {
  .hero h1, .tool-head h1, main > h1, h1 { font-size: 26px; }
  h2, .copy h2, .guide-notes h2 { font-size: 20px; }
}

/* 14) 경고·안내 띠 — 붉은 바탕에 검은 글씨(대비 1.8:1)로 읽히지 않던 것. 편지 종이 바탕 + 왼쪽 인장색 선 */
.warning, .notice, aside.notice, .alert, .caution { background: #F7F5F0 !important; color: #1F2A1E !important; border: 1px solid #D5D2C8; border-left: 3px solid #8B2E2E; }

/* 15) 단추·입력칸 높이 — 새 홈페이지(단추 56 · 입력 52, 모바일 58 · 56) */
.btn-print, .btn-dl, .btn-copy, .actions button, button.primary, button.danger, .download, .cal-head button, .delete-date { min-height: 56px; padding: 0 24px; }
input[type="text"], input[type="date"], input[type="number"], input[type="tel"], input[type="search"], input[type="time"], input[type="datetime-local"], select { min-height: 52px; padding: 0 16px; }
textarea { padding: 12px 16px; }
.kinds button, .modes button, .rels button, .mts button, .seg2 button, .grid3 button, .audience-tabs button, button.place, .bongwan-list button { min-height: 52px; }
@media (max-width: 768px) {
  .btn-print, .btn-dl, .btn-copy, .actions button, button.primary, button.danger, .download { min-height: 58px; }
  input[type="text"], input[type="date"], input[type="number"], input[type="tel"], input[type="search"], input[type="time"], input[type="datetime-local"], select { min-height: 56px; }
}