/* TBM 일지 생성기 — ergo-C 표준 디자인 토큰 v1 (Paper/Ink) 기반
   브랜드색: 안전주황 (기존 앱과 구분 — 근골격계 틸 / 위험성평가 와인 / 화학물질 플럼 / 사전유해인자 블루) */

:root {
  --primary:       #C2410C;
  --primary-deep:  #9A3412;
  --primary-light: #FFF4ED;
  --primary-mid:   #FBCFB4;
  --accent:        var(--primary);

  --bg:        #ECEBE5;
  --surface:   #FDFCF8;
  --surface-2: #F4F2EC;
  --surface-3: #EBE9E3;

  --text-primary:   #141210;
  --text-secondary: #3C3832;
  --text-muted:     #706B64;

  --border:        rgba(20,18,16,.09);
  --border-strong: rgba(20,18,16,.16);

  --success:      #1C5E48;
  --warning:      #F59E0B;
  --danger:       #EF4444;
  --danger-light: #FEF2F2;

  --hdr: #141210;

  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(20,18,16,.06), 0 1px 2px rgba(20,18,16,.04);
  --shadow-md: 0 4px 14px rgba(20,18,16,.07), 0 2px 4px rgba(20,18,16,.04);
  --shadow-lg: 0 12px 40px rgba(20,18,16,.09), 0 4px 12px rgba(20,18,16,.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  word-break: keep-all;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

/* ── 헤더 ─────────────────────────────────────── */
.site-header {
  background: var(--hdr);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner { height: 60px; display: flex; align-items: center; gap: 12px; }
.emblem {
  width: 36px; height: 36px; flex: none;
  background: var(--primary); border-radius: 9px;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 17px; text-decoration: none;
}
.hdr-text { flex: 1; min-width: 0; }
.hdr-title { color: #F4F2EC; font-weight: 700; font-size: 16px; line-height: 1.2; }
.hdr-sub { color: rgba(255,255,255,.28); font-size: 11px; letter-spacing: .04em; }
.hdr-badge {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}

/* ── 히어로 ───────────────────────────────────── */
.hero { padding: 28px 0 8px; }
.hero h1 { font-size: 26px; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.02em; }
.hero p { color: var(--text-secondary); margin: 0; font-size: 15px; }
/* 업종 범위를 처음부터 밝힌다 — 제조업 관리자가 다 입력하고 나서 실망하면 안 된다 */
.scope {
  margin-top: 12px !important; padding: 10px 12px;
  background: var(--primary-light); border: 1px solid var(--primary-mid);
  border-radius: var(--radius-sm);
  font-size: 13.5px !important; color: var(--text-secondary);
}
.scope strong { color: var(--primary-deep); }

.loading { text-align: center; color: var(--text-muted); padding: 60px 0; }

/* ── 입력 ─────────────────────────────────────── */
.field { margin: 20px 0; }
.field > label {
  display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px;
  color: var(--text-primary);
}
.opt { font-weight: 400; color: var(--text-muted); font-size: 13px; }
.hint { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 0; }

select, input[type=number] {
  width: 100%; min-height: 54px;         /* 장갑 낀 손 기준 터치 타깃 */
  padding: 0 14px; font-size: 16px;      /* iOS 자동 확대 방지 */
  font-family: inherit; color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23706B64' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
  padding-right: 40px;
}
select:focus, input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}

.wbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wbtn {
  min-height: 54px; font-size: 15px; font-weight: 600; font-family: inherit;
  background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  cursor: pointer; transition: .12s;
}
.wbtn:active { transform: scale(.97); }
.wbtn.on {
  background: var(--primary-light); border-color: var(--primary);
  color: var(--primary-deep); font-weight: 700;
}
.wmsg { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; min-height: 20px; }
.wmsg.ok { color: var(--success); }
.wmsg.err { color: var(--danger); }

.btn-primary {
  width: 100%; min-height: 56px; margin-top: 8px;
  background: #141210; color: #F4F2EC;      /* 잉크 버튼이 표준 (브랜드색 아님) */
  border: 0; border-radius: var(--radius);
  font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: 0 2px 8px rgba(20,18,16,.20);
}
.btn-primary:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.btn-primary.btn-sm { width: auto; min-height: 44px; padding: 0 18px; font-size: 14px; margin: 0; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius); min-height: 44px; padding: 0 16px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  color: var(--text-secondary); cursor: pointer;
}
.privacy { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: 14px 0 0; }

/* ── 결과 ─────────────────────────────────────── */
.result-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin: 18px 0;
}
.result-actions:last-child { justify-content: center; }
.result-actions:last-child .btn-primary { width: 100%; }

.brief-head {
  background: var(--hdr); color: #F4F2EC;
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.brief-main { min-width: 0; }
.brief-date { font-size: 13px; color: rgba(255,255,255,.5); }
.brief-head h2 { margin: 4px 0 8px; font-size: 22px; letter-spacing: -.02em; }
.brief-meta { font-size: 14px; color: rgba(255,255,255,.75); }
/* 헤더 오른쪽 — 이 일지의 근거를 밝힌다 */
.brief-src {
  flex: none; text-align: right; font-size: 10.5px; line-height: 1.5;
  color: rgba(255,255,255,.45); padding-top: 2px;
}
.brief-src strong { color: rgba(255,255,255,.8); font-size: 11.5px; }

.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.stat-card h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: -.01em; }
.caption { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.caption strong { color: var(--text-secondary); }

/* 막대 — N을 항상 병기한다 (상관/인과 오독 방지) */
.bar-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 14px; }
.bar-label { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ratio {
  font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary-deep);
  border: 1px solid var(--primary-mid);
}
.bar-track {
  position: relative; height: 26px; background: var(--surface-3);
  border-radius: 6px; overflow: hidden;
}
.bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-deep));
  border-radius: 6px;
}
.bar-pct {
  position: absolute; left: 10px; top: 0; line-height: 26px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.bar-n { font-size: 12px; color: var(--text-muted); text-align: right; }

/* 날씨 효과 (교집합 표본이 없을 때) */
.wx-card { background: linear-gradient(180deg, var(--primary-light), var(--surface)); border-color: var(--primary-mid); }
.wx-list { margin: 0 0 12px; padding-left: 20px; }
.wx-list li { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 6px; }
.wx-list strong { color: var(--primary-deep); }
.wx-note { font-size: 12.5px; color: var(--text-muted); margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }

/* 사례 */
.case {
  border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px;
}
.case:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.case-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.tag {
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.tag-type { background: var(--primary-light); color: var(--primary-deep); border-color: var(--primary-mid); }
.tag-fatal { background: var(--danger-light); color: #B91C1C; border-color: #FECACA; }
.case-body { margin: 0 0 10px; font-size: 14.5px; color: var(--text-secondary); }
.case-lesson {
  background: var(--primary-light); border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px; font-size: 14px; color: var(--text-primary);
}
.case-lesson strong {
  display: block; font-size: 11.5px; color: var(--primary-deep);
  letter-spacing: .04em; margin-bottom: 3px;
}

/* 스크립트 */
.script-card blockquote {
  margin: 0; padding: 16px; background: var(--surface-2);
  border-radius: var(--radius); border: 1px dashed var(--border-strong);
}
.script-card blockquote p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.75; }
.script-card blockquote p:last-child { margin-bottom: 0; }

/* 체크리스트 */
.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 0; border-top: 1px solid var(--border);
  font-size: 14.5px; cursor: pointer;
}
.check:first-of-type { border-top: 0; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--primary); }

.src-note {
  font-size: 12px; color: var(--text-muted); line-height: 1.6;
  padding: 14px; background: var(--surface-2); border-radius: var(--radius);
}

/* ── SEO 본문 ─────────────────────────────────── */
.seo { margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--border-strong); }
.seo h2 { font-size: 20px; margin: 32px 0 10px; letter-spacing: -.02em; }
.seo h3 { font-size: 16px; margin: 24px 0 8px; }
.seo p, .seo li { font-size: 15px; color: var(--text-secondary); }
.seo ol, .seo ul { padding-left: 20px; }
.seo li { margin-bottom: 6px; }
.links { list-style: none; padding: 0; }
.links li { margin-bottom: 8px; }
.links a { color: var(--primary-deep); font-weight: 600; }

/* ── 푸터 ─────────────────────────────────────── */
.site-footer {
  background: var(--surface-2); border-top: 1px solid var(--border);
  padding: 24px 0; margin-top: 40px;
}
.site-footer p { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; }
.site-footer a { color: var(--text-secondary); }
.disclaimer { padding-top: 8px; }

/* ── 인쇄 ─────────────────────────────────────────
   TBM 일지는 A4 한 장이어야 한다 — 현장에서 들고 읽고 그대로 철하는 문서다.
   화면 여백을 그대로 쓰면 3장으로 늘어나므로 인쇄 전용으로 다시 짠다.

   단, 과하게 줄이면 위쪽에 몰리고 아래가 텅 빈다(실제로 그랬다).
   한 장에 "들어가는" 게 목표가 아니라 한 장을 "채우는" 게 목표다 —
   6시 현장에서 읽는 문서라 글자는 클수록 낫다. */
@media print {
  @page { size: A4 portrait; margin: 9mm 12mm; }

  /* 안내문 성격의 캡션("근로자 앞에서 그대로 읽으셔도 됩니다")만 숨긴다.
     .caption-keep 은 표본 수(N)를 담고 있어 인쇄본에도 남긴다 — 근거 없는 비율은 제시하지 않는다. */
  .no-print, .site-header, .site-footer, .seo,
  .wx-note, .src-note,
  .caption:not(.caption-keep) { display: none !important; }
  .caption-keep { font-size: 7.5pt; margin: 0 0 6px; color: #555; }

  body { background: #fff; font-size: 9.5pt; line-height: 1.45; }
  .wrap { max-width: none; padding: 0; }

  .stat-card {
    box-shadow: none; border: 1px solid #bbb; border-radius: 5px;
    padding: 8px 11px; margin-bottom: 6px;
    break-inside: avoid; page-break-inside: avoid;
  }
  .stat-card h3 { font-size: 10.5pt; margin: 0 0 5px; }

  /* 사례는 인쇄본에 1건만.
     3분짜리 아침 미팅에서 사고 이야기를 두 건 하지는 않는다 — 종이에는 실제로 말한 것만 남긴다.
     1번 사례는 헤드라인 통계와 같은 유형임이 보장돼 있다(pickCases). */
  .case:nth-of-type(n+2) { display: none !important; }

  /* 헤더 — 왼쪽에 날짜·작업·조건, 오른쪽 빈자리에 근거 */
  .brief-head {
    background: #141210 !important; padding: 10px 12px; margin-bottom: 6px;
    border-radius: 5px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .brief-date { font-size: 9pt; }
  .brief-head h2 { font-size: 15pt; margin: 3px 0 2px; }
  .brief-meta { font-size: 9.5pt; }
  .brief-src { font-size: 8pt; }
  .brief-src strong { font-size: 8.5pt; }

  /* 통계 막대 */
  .bar-row { margin-bottom: 6px; gap: 3px; }
  .bar-label { font-size: 10pt; }
  .bar-track { height: 18px; }
  .bar-pct { line-height: 18px; font-size: 8.5pt; }
  .bar-n { font-size: 8pt; }
  .ratio { font-size: 8pt; padding: 1px 5px; }

  /* 사례 — 서술이 교육 가치의 핵심이라 읽기 편한 크기를 준다 */
  .case { padding-top: 8px; margin-top: 8px; }
  .case-tags { gap: 4px; margin-bottom: 6px; }
  .tag { font-size: 8pt; padding: 2px 6px; }
  .case-body { font-size: 9.5pt; margin-bottom: 5px; }
  .case-lesson { padding: 6px 8px; font-size: 9.5pt; }
  .case-lesson strong { font-size: 8pt; margin-bottom: 2px; }

  /* 스크립트 — 소리 내어 읽는 부분. 가장 커야 한다 */
  .script-card blockquote { padding: 9px 11px; }
  .script-card blockquote p { font-size: 10pt; line-height: 1.55; margin-bottom: 4px; }

  /* 체크리스트 — 체크박스는 손으로 표시해야 하므로 크기 유지 */
  .check { padding: 3px 0; font-size: 9pt; gap: 8px; }
  .check input {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; margin-top: 2px;
    border: 1.3px solid #333; border-radius: 2px;
  }

  .bar-fill, .case-lesson, .tag-type, .ratio, .wx-card {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* 서명란 — 인쇄본에서만. 손으로 적는 칸이라 밑줄 높이를 넉넉히 준다 */
  .sign-row {
    display: grid !important; grid-template-columns: 1fr 80px; gap: 8px 10px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #999;
  }
  .sign-cell { display: flex; align-items: flex-end; gap: 6px; }
  .sign-cell > span { font-size: 8.5pt; color: #555; white-space: nowrap; }
  .sign-cell > i {
    flex: 1; border-bottom: 1px solid #999; min-height: 16px;
    font-style: normal; font-size: 9.5pt; text-align: center;
  }
  .sign-wide { grid-column: 1 / -1; }

  /* 출처·면책은 화면에서 읽히면 되고, 인쇄본엔 한 줄이면 충분하다 */
  .print-src { display: block !important; font-size: 7.5pt; color: #666; margin-top: 6px; }
}
.print-src, .sign-row { display: none; }

@media (max-width: 400px) {
  .hero h1 { font-size: 22px; }
  .wbtns { grid-template-columns: repeat(2, 1fr); }
}