/* ============================================================================
   MSDS 안내 — 디자인 시스템

   토큰은 KRDS(대한민국 정부 디자인시스템)에서 그대로 가져왔다. 이 화면은 병원
   현장에서 급하게 열어 보는 안전 정보라 개성보다 **읽히는 속도와 신뢰**가 먼저다.
   정부 안내 문서와 같은 어법(흰 바탕, 1px 경계, 정부 파랑 한 색, 각진 6·8px)을
   쓰면 사용자가 이미 아는 규칙으로 화면을 읽는다.

   빌드 도구가 없으므로(Flask + Jinja + CSS 한 파일) 토큰은 전부 CSS 변수다.
   값을 손으로 적지 말고 변수를 쓴다.

   원칙
   - 표면은 흰색(--gray-0), 보조 면은 --gray-5. 면을 그림자로 만들지 않는다.
   - 경계는 1px 선이다. 그림자는 쓰지 않는다 — 떠 있는 것이 아직 없다.
   - 파랑(--primary)은 **누를 수 있는 것**에만 쓴다. 장식으로 칠하지 않는다.
   - 위험성 14색은 **글자와 1px 테두리**로만 쓴다(hazards.py 가 단일 출처).
   - GHS 그림문자는 규정색 그대로 둔다. 우리 팔레트로 다시 칠하지 않는다.
   - 상태를 색 하나로 말하지 않는다 — 색 + 굵기 + 밑줄/그림문자를 겹친다.
   ========================================================================== */

:root {
  /* ── 정부 파랑 ──────────────────────────────────────────────────── */
  --primary:        #256EF4;   /* 기본 동작 — 버튼·활성 링크 */
  --primary-hover:  #0B50D0;   /* 호버·강조 글자 */
  --primary-active: #083891;   /* 눌린 상태 */
  --primary-5:      #ECF2FE;   /* 정보 패널·선택된 면 */
  --primary-10:     #D8E5FD;
  --primary-20:     #B1CEFB;

  /* ── 회색 계단 ──────────────────────────────────────────────────── */
  --gray-0:  #FFFFFF;
  --gray-5:  #F4F5F6;   /* 표 머리·보조 면 */
  --gray-10: #E6E8EA;   /* 약한 구분선 */
  --gray-20: #CDD1D5;   /* 비활성 면 */
  --gray-30: #B1B8BE;   /* 카드·패널 테두리 */
  --gray-40: #8A949E;
  --gray-50: #6D7882;   /* 보조 글자 — 흰 바탕 4.68:1 */
  --gray-60: #58616A;   /* 입력·3차 버튼 테두리 */
  --gray-70: #464C53;
  --gray-80: #33363D;
  --gray-90: #1E2124;   /* 본문·제목 — 흰 바탕 15.3:1 */

  /* ── 상태색 ─────────────────────────────────────────────────────── */
  --danger:     #DE3412;  --danger-bg:  #FDEFEC;  --danger-ink:  #8A240F;
  --warning:    #FFB114;  --warning-bg: #FFF3DB;  --warning-ink: #614100;
  --success:    #228738;  --success-bg: #EAF6EC;  --success-ink: #285D33;
  --info:       #0B78CB;  --info-bg:    #E7F4FE;  --info-ink:    #085691;

  /* ── 역할 이름 ──────────────────────────────────────────────────── */
  --bg:            var(--gray-0);
  --fg:            var(--gray-90);
  --fg-sub:        var(--gray-50);
  --border:        var(--gray-30);   /* 카드·패널 */
  --border-strong: var(--gray-60);   /* 입력·3차 버튼 */
  --border-weak:   var(--gray-10);   /* 표 행 구분 */

  /* ── 간격 (4의 배수) ────────────────────────────────────────────── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s7: 32px;  --s8: 40px;  --s9: 56px;  --s10: 80px;

  /* ── 반경 ───────────────────────────────────────────────────────── */
  --r-xs:   4px;    /* 배지 */
  --r-sm:   6px;    /* 버튼·셀렉트 */
  --r:      8px;    /* 카드·패널·입력 — 기본값 */
  --r-lg:   12px;
  --r-full: 1000px;

  /* ── 컨트롤 높이 ────────────────────────────────────────────────── */
  --ctl-lg: 56px;   /* large — 입력·버튼 기본 */
  --ctl-xl: 64px;   /* 주 검색창 */

  /* ── 글자 ───────────────────────────────────────────────────────── */
  --font: "Pretendard GOV Variable", "Pretendard GOV", "Pretendard",
          -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-lg: 19px;   /* 강조 본문 */
  --t:    17px;   /* 본문 기본 */
  --t-sm: 15px;   /* 캡션·라벨 */
  --t-xs: 13px;   /* 주석·꼬리말 */

  /* ── 움직임 ─────────────────────────────────────────────────────── */
  /* KRDS 기본은 400ms 지만 그건 접힘·페이드처럼 큰 것의 값이다. 버튼·링크의
     상태 전환은 0.2s 가 맞다 — 그보다 느리면 눌린 뒤에 반응이 따라온다. */
  --t-base: 0.2s;
  --ease:   ease;

  --wrap: 1200px;   /* 본문 최대 폭 */
  --read: 860px;    /* 읽는 글의 최대 폭 */
}

/* ── 기본 ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t);
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;      /* 한글은 어절 단위로 끊는다 */
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.35; margin: 0; text-wrap: pretty; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-hover); }
a:hover { color: var(--primary-active); }

img, svg { max-width: 100%; }

/* 포커스는 어떤 요소에서도 보인다. KRDS 는 4px 파란 링을 표준으로 둔다. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 4px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--primary); color: #fff;
  font-weight: 700; text-decoration: none;
  border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.dim { color: var(--fg-sub); }

/* 화면에는 없지만 스크린리더에는 있는 글 — 검색창 라벨처럼 그림으로 뻔한 것에 쓴다. */
.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;
}

/* ── 머리 ─────────────────────────────────────────────────────────── */
.site-header {
  background: var(--gray-0);
  border-bottom: 1px solid var(--gray-10);
  position: sticky; top: 0; z-index: 30;
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-right: auto;
  color: var(--fg); text-decoration: none;
  font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em;
}
.brand-mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--primary); border-radius: var(--r-sm);
}
.brand-mark svg { width: 18px; height: 18px; display: block; }

.nav-toggle {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--gray-0); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.nav-toggle:hover { background: var(--gray-5); }
.nav-toggle[aria-expanded="true"] { background: var(--primary-5); border-color: var(--primary); }
.nav-bars { display: grid; gap: 4px; }
.nav-bars i {
  display: block; width: 18px; height: 2px; background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav { display: flex; gap: var(--s1); align-items: stretch; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s3);
  color: var(--gray-70); text-decoration: none;
  font-size: var(--t); border-radius: var(--r-sm);
  border-bottom: 3px solid transparent;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.site-nav a:hover { background: var(--gray-5); color: var(--fg); }
/* 지금 보고 있는 곳은 색만으로 말하지 않는다 — 굵기와 밑줄을 겹친다. */
.site-nav a[aria-current="page"] {
  color: var(--primary-hover); font-weight: 700;
  border-bottom-color: var(--primary);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* ── 본문 틀 ──────────────────────────────────────────────────────── */
.page {
  flex: 1;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: var(--s7) var(--s4) var(--s10);
}

/* ── 꼬리 ─────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--gray-90); color: var(--gray-20);
  font-size: var(--t-sm);
  padding: var(--s7) var(--s4);
  display: grid; gap: var(--s2); justify-items: center; text-align: center;
}
.site-footer p { margin: 0; }
.site-footer a { color: #fff; text-underline-offset: 3px; }

/* ── 버튼 ─────────────────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.btn-primary, .btn-ghost { min-height: var(--ctl-lg); padding: 0 var(--s6); font-size: var(--t); }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); }

/* 2차 — 정부 사이트의 「연한 파랑」 버튼 */
.btn-ghost { background: var(--primary-5); border-color: var(--primary); color: var(--primary-hover); }
.btn-ghost:hover { background: var(--primary-10); color: var(--primary-active); }
.btn-ghost:active { background: var(--primary-20); }

.btn-mini {
  min-height: 40px; padding: 0 var(--s3);
  font-size: var(--t-sm); font-weight: 700;
  background: var(--gray-0); border-color: var(--border-strong); color: var(--fg);
}
.btn-mini:hover { background: var(--gray-5); color: var(--fg); }

button:disabled, .btn-primary[aria-disabled="true"] {
  background: var(--gray-20); border-color: var(--gray-20);
  color: var(--gray-50); cursor: not-allowed;
}

/* ── 입력 ─────────────────────────────────────────────────────────── */
/* type 을 안 적은 <input> 도 텍스트 입력이다 — 관리자 폼이 그렇게 쓴다. */
input:not([type]), input[type="search"], input[type="text"],
input[type="password"], input[type="email"], textarea {
  width: 100%;
  font-family: inherit; font-size: var(--t); color: var(--fg);
  background: var(--gray-0);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: 0 var(--s4);
  min-height: var(--ctl-lg);
  transition: border-color var(--t-base) var(--ease);
}
textarea { padding: var(--s3) var(--s4); line-height: 1.6; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--gray-50); }
input:not([type]):hover, input[type="search"]:hover, input[type="text"]:hover,
input[type="password"]:hover, textarea:hover { border-color: var(--gray-80); }
input[aria-invalid="true"] { border: 2px solid var(--danger); }

/* 검색창 — 입력과 버튼이 한 덩어리로 붙는다 */
.hero-search, .searchbar { display: flex; gap: 0; margin: 0 0 var(--s6); max-width: 640px; }
.hero-search { max-width: 720px; }
.hero-search input, .searchbar input {
  border-radius: var(--r) 0 0 var(--r);
  border-right: 0;
}
.hero-search input { min-height: var(--ctl-xl); font-size: var(--t-lg); }
.hero-search button, .searchbar button {
  flex: none;
  min-height: var(--ctl-lg); padding: 0 var(--s6);
  font-family: inherit; font-size: var(--t); font-weight: 700; color: #fff;
  background: var(--primary); border: 1px solid var(--primary);
  border-radius: 0 var(--r) var(--r) 0; cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.hero-search button { min-height: var(--ctl-xl); font-size: var(--t-lg); }
.hero-search button:hover, .searchbar button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.hero-search button:active, .searchbar button:active { background: var(--primary-active); }
/* 붙어 있는 두 요소의 포커스 링이 서로 가리지 않게 위로 올린다. */
.hero-search input:focus-visible, .searchbar input:focus-visible,
.hero-search button:focus-visible, .searchbar button:focus-visible {
  position: relative; z-index: 1; border-radius: var(--r);
}

/* ── GHS 그림문자 ─────────────────────────────────────────────────── */
/* 규정 도형이라 색을 바꾸지 않는다. 크기만 정한다. */
.ghs { display: block; flex: none; width: 100%; height: 100%; }
.ghs-box { display: inline-flex; flex: none; width: 24px; height: 24px; }
.ghs-box.lg { width: 40px; height: 40px; }
.ghs-box.sm { width: 20px; height: 20px; }

/* ── 위험성 배지 ──────────────────────────────────────────────────── */
/* 바탕은 흰색, 테두리와 글자만 위험성 색(--c)이다. 면을 칠하지 않는 이유는
   14색이 한 화면에 뜨면 색면끼리 싸우기 때문이다. */
.badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
.detail .badges { margin-bottom: var(--s6); }
.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s2);
  font-size: var(--t-sm); font-weight: 700; line-height: 1.4;
  color: var(--c, var(--fg));
  background: var(--gray-0);
  border: 1px solid color-mix(in srgb, var(--c, var(--gray-30)) 45%, var(--gray-0));
  border-radius: var(--r-xs);
  text-decoration: none;
}
.badge .ghs-box { width: 22px; height: 22px; }
.badges.sm .badge { font-size: var(--t-xs); padding: 2px var(--s2) 2px var(--s1); }
.badges.sm .ghs-box { width: 18px; height: 18px; }
.badge.none {
  color: var(--fg-sub); font-weight: 400;
  border-color: var(--gray-20); padding: var(--s1) var(--s3);
}
.badge.lg {
  font-size: var(--t); padding: var(--s2) var(--s4) var(--s2) var(--s3);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.badge.lg:hover { background: var(--gray-5); border-color: var(--c, var(--gray-60)); }
.badge.lg .ghs-box { width: 28px; height: 28px; }

.tag {
  display: inline-flex; align-items: center;
  padding: 2px var(--s2); margin-left: var(--s1);
  font-size: var(--t-sm); font-weight: 700; color: var(--c, var(--fg));
  border: 1px solid color-mix(in srgb, var(--c, var(--gray-30)) 45%, var(--gray-0));
  border-radius: var(--r-xs);
}

/* ── 필터 칩 ──────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s6); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4) 0 var(--s3);
  font-size: var(--t-sm); font-weight: 700; color: var(--gray-70);
  text-decoration: none;
  background: var(--gray-0);
  border: 1px solid var(--gray-20); border-radius: var(--r-full);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.chip { min-height: 48px; }
.chip .ghs-box { width: 26px; height: 26px; }
.chip:hover { background: var(--gray-5); border-color: var(--gray-60); color: var(--fg); }
/* 켜진 칩은 색만이 아니라 테두리 굵기로도 다르다 */
.chip.on, .chip[aria-current] {
  background: var(--primary-5); border: 2px solid var(--primary);
  color: var(--primary-hover); padding: 0 15px 0 11px;
}

/* ── 글 머리 (제목 + 한 문단) ─────────────────────────────────────── */
.page-head {
  max-width: var(--read);
  padding-bottom: var(--s6); margin-bottom: var(--s7);
  border-bottom: 1px solid var(--gray-10);
}
.page-head h1 { font-size: clamp(28px, 5vw, 40px); letter-spacing: -0.02em; margin-bottom: var(--s4); }
.page-head .lead { font-size: var(--t-lg); color: var(--gray-70); margin: 0; }
.page-head .lead b { color: var(--fg); }

/* ── 랜딩 ─────────────────────────────────────────────────────────── */
/* 정부 안내 화면의 첫 화면 — 그림 대신 문장과 검색창이 먼저 온다. */
.hero {
  background: var(--primary-5);
  border-radius: var(--r-lg);
  padding: var(--s8) var(--s6);
  margin-bottom: var(--s9);
}
.hero h1 {
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: var(--s4);
}
.hero .lead {
  font-size: var(--t-lg); color: var(--gray-70);
  max-width: 46rem; margin-bottom: var(--s7);
}
.hero .lead b, .doc b, .detail b, .hits b, .empty b { font-weight: 700; color: var(--fg); }
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  margin: 0 0 var(--s6); padding: 0; list-style: none;
}
.hero-facts b { display: block; font-size: 32px; font-weight: 700; line-height: 1.2; }
.hero-facts span { font-size: var(--t-sm); color: var(--gray-70); }

.how, .hz-legend { margin-bottom: var(--s9); }
.how h2, .hz-legend h2 { font-size: 24px; margin-bottom: var(--s5); }
.how .sub, .hz-legend .sub { color: var(--fg-sub); font-size: var(--t-sm); margin: -12px 0 var(--s5); }

.steps-3 { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.steps-3 li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3);
  padding: var(--s6);
  background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--r);
}
.steps-3 .n {
  grid-row: span 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--primary); color: #fff;
  border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 700;
}
.steps-3 b { font-size: var(--t-lg); align-self: center; }
.steps-3 em { grid-column: 2; font-style: normal; color: var(--gray-70); font-size: var(--t-sm); }
.steps-3.tight li { padding: var(--s4) var(--s5); }

/* 위험성 범례 — 그림문자를 알아볼 수 있는 크기로 두는 것이 이 블록의 목적이다.
   22px 로 줄이면 아홉 개 그림이 전부 「빨간 마름모」로 뭉개진다. */
.hz-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3);
}
.hz-grid a {
  display: flex; align-items: center; gap: var(--s3);
  height: 100%; padding: var(--s3) var(--s4);
  color: var(--c, var(--fg)); text-decoration: none;
  font-size: var(--t-sm); font-weight: 700;
  background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--r);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.hz-grid a:hover { background: var(--gray-5); border-color: var(--gray-60); }

/* ── 검색 결과 ────────────────────────────────────────────────────── */
.result-count {
  color: var(--gray-70); font-size: var(--t-sm);
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--gray-10);
}
.result-count b { color: var(--fg); font-weight: 700; font-size: var(--t); }

.hits { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.hits li { display: flex; }
.hits li > a { flex: 1; }
.hits a {
  display: grid; gap: var(--s2);
  padding: var(--s5); text-decoration: none; color: var(--fg);
  background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--r);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.hits a:hover { background: var(--primary-5); border-color: var(--primary); }
.hit-name b { font-size: var(--t-lg); font-weight: 700; }
.hit-name .alt, .admin-table .alt { color: var(--fg-sub); font-size: var(--t-sm); margin-left: var(--s2); }
.hit-cas { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--gray-70); }

.pager {
  display: flex; gap: var(--s2); align-items: center; justify-content: center;
  margin-top: var(--s8); font-size: var(--t-sm); color: var(--gray-70);
}
.pager a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  color: var(--fg); text-decoration: none; font-weight: 700;
  background: var(--gray-0); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: background var(--t-base) var(--ease);
}
.pager a:hover { background: var(--gray-5); }
.pager span { padding: 0 var(--s3); }

.empty {
  padding: var(--s8) var(--s6); text-align: center;
  background: var(--gray-5); border-radius: var(--r); color: var(--gray-70);
}
.empty b { font-size: var(--t-lg); }
.empty-inline { color: var(--gray-70); }

/* ── 물질 상세 ────────────────────────────────────────────────────── */
.back {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 44px; margin-bottom: var(--s4);
  color: var(--primary-hover); font-size: var(--t-sm); font-weight: 700;
  text-decoration: none;
}
.back:hover { text-decoration: underline; text-underline-offset: 3px; }

.detail { max-width: var(--read); }
.detail h1 { font-size: clamp(24px, 5vw, 32px); letter-spacing: -0.02em; }
.detail .alt-name { color: var(--fg-sub); margin: var(--s1) 0 var(--s6); }
.detail h2, .admin h2 {
  font-size: 24px; margin: var(--s8) 0 var(--s4);
  padding-bottom: var(--s3); border-bottom: 2px solid var(--gray-90);
}

.facts {
  display: grid; grid-template-columns: 8rem 1fr;
  gap: 0; margin: 0 0 var(--s6);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.facts dt {
  padding: var(--s3) var(--s4); font-weight: 700; font-size: var(--t-sm);
  background: var(--gray-5); border-bottom: 1px solid var(--border-weak);
}
.facts dd {
  margin: 0; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border-weak);
}
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0; }

/* 위험성 한 종 = 패널 하나. 머리에 GHS 그림문자를 크게 둔다 —
   현장 용기에 붙은 라벨과 눈으로 맞춰보라는 뜻이다. */
.hz {
  margin: 0 0 var(--s4);
  background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.hz h3 {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0; padding: var(--s4) var(--s5);
  font-size: var(--t-lg); color: var(--c, var(--fg));
  background: var(--gray-5); border-bottom: 1px solid var(--border-weak);
}
.hz-body { display: grid; gap: var(--s6); padding: var(--s5); }
.hz-col h4 {
  font-size: var(--t-sm); color: var(--gray-70); margin-bottom: var(--s2);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--gray-10);
}
.hz-col p, .hz-col ul, .hz.common ul { margin: 0; }
.hz-col ul, .hz.common ul { padding-left: 1.2em; }
.hz-col li, .hz.common li { margin: 0.4em 0; }
.hz-col .todo { color: var(--fg-sub); }
.hz.common h3 { color: var(--fg); }
.hz.common ul { padding: var(--s5) var(--s5) var(--s5) calc(var(--s5) + 1.2em); }

/* ── 제도 안내 ────────────────────────────────────────────────────── */
.toc {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding: var(--s5); margin-bottom: var(--s8);
  background: var(--gray-5); border-radius: var(--r);
}
.toc a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  background: var(--gray-0); border: 1px solid var(--gray-20); border-radius: var(--r-full);
  color: var(--gray-70); text-decoration: none; font-size: var(--t-sm); font-weight: 700;
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.toc a:hover { border-color: var(--primary); color: var(--primary-hover); }

.doc { max-width: var(--read); }
.doc h2 {
  font-size: 24px; margin: var(--s9) 0 var(--s4);
  padding-bottom: var(--s3); border-bottom: 2px solid var(--gray-90);
  scroll-margin-top: 80px;
}
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.doc p, .doc li { color: var(--gray-80); }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1em; }
.doc li { margin: 0.4em 0; }

.cols { columns: 2; column-gap: var(--s7); }
.cols li { break-inside: avoid; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin: var(--s5) 0; }
.card {
  padding: var(--s5);
  background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--r);
}
.card p { font-size: var(--t-sm); }

.check { list-style: none; padding-left: 0; }
.check li { position: relative; padding-left: 2em; margin: var(--s3) 0; }
.check li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--primary-5); color: var(--primary-hover);
  border-radius: var(--r-xs); font-size: var(--t-sm); font-weight: 700;
}

/* 근거 표시 — 문장이 어느 조문에서 나왔는지 그 자리에서 밝힌다.
   제도 안내 글은 지부가 요구서에 그대로 옮겨 쓰는 문서라, 출처가 문장에서
   떨어지면 쓸모가 준다. */
.src {
  display: inline-block; margin-left: var(--s2);
  padding: 1px var(--s2);
  font-size: var(--t-xs); font-weight: 400; color: var(--gray-70);
  background: var(--gray-5); border: 1px solid var(--gray-10); border-radius: var(--r-xs);
  white-space: nowrap; vertical-align: 2px;
}
.card .src { margin-left: var(--s1); }

.sources { list-style: none; padding-left: 0; }
.sources li { margin: var(--s2) 0; }
.sources a { text-underline-offset: 3px; }

.law {
  width: 100%; border-collapse: collapse; margin: var(--s5) 0;
  font-size: var(--t-sm);
}
.law th, .law td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-weak); }
.law thead th { background: var(--gray-5); border-bottom: 1px solid var(--gray-30); font-weight: 700; }
.law td:first-child { white-space: nowrap; font-weight: 700; }
.law td:last-child { color: var(--gray-70); }

/* 서버에서 그대로 복사해 붙이는 명령 — 줄바꿈 없이 가로로만 흐른다. */
.cmd {
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--gray-90); color: var(--gray-0);
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.6;
  overflow-x: auto; white-space: pre;
}

/* ── 알림 패널 ────────────────────────────────────────────────────── */
/* 왼쪽 굵은 막대는 「진짜 알림」에만 쓴다. 카드 장식으로 쓰지 않는다. */
.note {
  padding: var(--s4) var(--s5); margin: var(--s6) 0;
  background: var(--gray-5); border-left: 4px solid var(--gray-30);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--gray-70); font-size: var(--t-sm);
}
.ok-box {
  padding: var(--s4) var(--s5); margin: var(--s6) 0;
  background: var(--success-bg); border-left: 4px solid var(--success);
  border-radius: 0 var(--r) var(--r) 0; color: var(--success-ink);
}
.ok-box b { color: var(--success-ink); }
.error {
  padding: var(--s4) var(--s5); margin: 0 0 var(--s5);
  background: var(--danger-bg); border-left: 4px solid var(--danger);
  border-radius: 0 var(--r) var(--r) 0; color: var(--danger-ink); font-weight: 700;
}

/* ── 관리자 ───────────────────────────────────────────────────────── */
.login {
  max-width: 26rem; margin: var(--s8) auto;
  display: grid; gap: var(--s3);
  padding: var(--s7); border: 1px solid var(--border); border-radius: var(--r);
}
.login h1 { font-size: 24px; margin-bottom: var(--s4); }
.login label { font-size: var(--t-sm); font-weight: 700; }
.login button {
  min-height: var(--ctl-lg); margin-top: var(--s2);
  font-family: inherit; font-size: var(--t); font-weight: 700; color: #fff;
  background: var(--primary); border: 1px solid var(--primary); border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t-base) var(--ease);
}
.login button:hover { background: var(--primary-hover); }
.login .hint { color: var(--fg-sub); font-size: var(--t-sm); margin: var(--s2) 0 0; }

.admin-nav {
  display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center;
  padding: var(--s2); margin-bottom: var(--s7);
  background: var(--gray-5); border-radius: var(--r);
}
.admin-nav b { padding: 0 var(--s3); font-size: var(--t-sm); color: var(--gray-70); }
.admin-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4);
  color: var(--gray-70); text-decoration: none; font-size: var(--t-sm); font-weight: 700;
  border-radius: var(--r-sm);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.admin-nav a:hover { background: var(--gray-0); color: var(--fg); }
.admin-nav a[aria-current="page"] { background: var(--gray-0); color: var(--primary-hover); box-shadow: inset 0 0 0 1px var(--primary); }

.admin-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.admin-head h1, .admin h1 { font-size: 32px; letter-spacing: -0.02em; }
.admin .lead { color: var(--gray-70); margin: var(--s3) 0 var(--s6); }
.admin-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

.stat-row { display: flex; gap: var(--s4); flex-wrap: wrap; margin: var(--s6) 0; }
.stat {
  padding: var(--s5); min-width: 12rem;
  background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--r);
}
.stat b { display: block; font-size: 32px; font-weight: 700; line-height: 1.2; }
.stat span { font-size: var(--t-sm); color: var(--gray-70); }
.stat em { display: block; font-style: normal; color: var(--fg-sub); font-size: var(--t-xs); margin-top: var(--s2); }
.stat.warn { background: var(--warning-bg); border-color: var(--warning); }
.stat.warn b, .stat.warn span { color: var(--warning-ink); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.admin-table th, .admin-table td {
  text-align: left; padding: var(--s3) var(--s4); vertical-align: top;
  border-bottom: 1px solid var(--border-weak);
}
.admin-table thead th { background: var(--gray-5); font-weight: 700; white-space: nowrap; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table a { color: var(--fg); font-weight: 700; }
.admin-table .mono { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--gray-70); }
.admin-table .num { color: var(--fg-sub); font-size: var(--t-xs); white-space: nowrap; }
.admin-table td:nth-child(2) { max-width: 26rem; }

/* 위험성 그림문자는 **격자**로 놓는다. 개수가 제품마다 달라서 그냥 흘리면 칸마다
   줄이 어긋나 보인다. 14종이라 7칸씩 두 줄이면 세로줄이 맞는다.

   **`<td>` 에 직접 display 를 걸지 말 것.** 셀이 표 레이아웃에서 빠져 나와 테두리와
   행 높이가 다른 칸과 어긋난다(옛 `display:flex` 가 그래서 틀어져 있었다).
   안쪽 `<span>` 에 건다. */
.hz-mini {
  display: grid; grid-template-columns: repeat(7, 22px);
  gap: var(--s1); align-content: start; width: max-content;
}
.hz-mini .ghs-box { width: 22px; height: 22px; }

/* 안내 세 줄 — 카드로 키우면 정작 할 일(파일 올리기)이 아래로 밀린다.
   읽고 지나가면 되는 글이라 목록 한 덩어리로 둔다. */
.steps-inline {
  margin: var(--s4) 0 var(--s6); padding-left: 1.4em;
  font-size: var(--t-sm); color: var(--gray-70);
}
.steps-inline li { margin: var(--s2) 0; }
.steps-inline b { color: var(--fg); }
.admin-actions.downloads { margin-bottom: var(--s8); }

/* 표 안에서 그 자리 고치기 */
.admin-table.fix td { vertical-align: middle; }
.admin-table.fix td:first-child { white-space: nowrap; }
.admin-table.fix td:nth-child(2) { max-width: none; }
.fix-form { display: flex; gap: var(--s2); align-items: center; }
.fix-form input {
  width: 11rem; min-height: 40px; padding: 0 var(--s3);
  font-size: var(--t-sm); border-radius: var(--r-sm);
}
.fix-form button {
  min-height: 40px; padding: 0 var(--s4); flex: none;
  font-family: inherit; font-size: var(--t-sm); font-weight: 700;
  color: var(--fg); background: var(--gray-0);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.fix-form button:hover { background: var(--primary-5); border-color: var(--primary); color: var(--primary-hover); }

/* 오타 후보. **누르면 위 입력칸에 채워지기만 하고 저장되지 않는다** —
   그래서 저장 단추와 생김새를 일부러 다르게 두었다(작고, 파란 글자, 점선 밑줄).
   「물질명에 있음」은 색 하나로 말하지 않는다 — 테두리와 굵기를 함께 쓴다. */
.cands {
  list-style: none; margin: var(--s2) 0 0; padding: 0;
  display: grid; gap: var(--s1); font-size: var(--t-xs);
}
.cands li { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cands span { color: var(--gray-50); }
.cand {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 700;
  padding: 2px var(--s2); cursor: pointer;
  color: var(--primary-hover); background: var(--gray-0);
  border: 1px solid var(--primary-20); border-radius: var(--r-xs);
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.cand:hover { background: var(--primary-5); border-color: var(--primary); }
.cand-hit {
  padding: 1px var(--s2); font-size: var(--t-xs); font-weight: 700;
  color: var(--success-ink); background: var(--success-bg);
  border: 1px solid var(--success); border-radius: var(--r-xs);
}

/* 안내서의 예시 상자 — 설명 문단과 「실제로 이렇게 생겼다」를 눈으로 가른다. */
.ex {
  margin: var(--s4) 0; padding: var(--s4) var(--s5);
  background: var(--gray-5); border-left: 4px solid var(--gray-30);
  border-radius: 0 var(--r) var(--r) 0;
}
.ex p { margin: 0 0 var(--s2); }
.ex p:last-child { margin-bottom: 0; }
.ex code, .doc code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--gray-0); border: 1px solid var(--gray-20);
  border-radius: var(--r-xs); padding: 1px 5px;
}
.calc {
  font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.8;
  color: var(--gray-70);
}
.card h4 {
  font-size: var(--t); margin-bottom: var(--s2);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--gray-10);
}
.doc h3 .dim { font-weight: 400; font-size: var(--t-sm); }

/* 접어두는 설명 — 아는 사람은 펴지 않고 지나간다 */
.explain {
  margin: var(--s4) 0; padding: 0 var(--s5);
  background: var(--gray-5); border-radius: var(--r); font-size: var(--t-sm);
}
.explain summary {
  padding: var(--s3) 0; cursor: pointer;
  font-weight: 700; color: var(--primary-hover);
}
.explain[open] summary { border-bottom: 1px solid var(--gray-10); margin-bottom: var(--s3); }
.explain p { color: var(--gray-70); }
.explain > p:last-child { padding-bottom: var(--s4); }
.explain .calc {
  font-family: var(--font-mono); font-size: var(--t-xs);
  background: var(--gray-0); border: 1px solid var(--gray-10);
  border-radius: var(--r-sm); padding: var(--s3) var(--s4);
}

.logs { list-style: none; padding: 0; font-size: var(--t-sm); color: var(--gray-70); }
.logs li { padding: var(--s3) 0; border-bottom: 1px solid var(--border-weak); }
.logs li:last-child { border-bottom: 0; }
.logs time { font-family: var(--font-mono); font-size: var(--t-xs); margin-right: var(--s3); }

.edit-form { display: grid; gap: var(--s5); max-width: 42rem; }
.edit-form label, .guide-edit label, .upload .file {
  display: block; font-size: var(--t-sm); font-weight: 700;
}
.edit-form label > input, .guide-edit label > textarea, .upload .file > input { display: block; margin-top: var(--s2); }
.edit-form label .dim, .guide-edit label .dim { font-weight: 400; }

/* 체크박스·라디오는 네이티브를 살려서 다시 그린다 — 키보드·스크린리더가 그대로 돈다 */
.hz-check {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s5); margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2);
}
.hz-check legend {
  padding: 0 var(--s2); font-size: var(--t-sm); font-weight: 700; color: var(--gray-70);
}
.hz-opt {
  display: flex !important; align-items: center; gap: var(--s3);
  min-height: 48px; padding: 0 var(--s3);
  border: 1px solid var(--gray-20); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 400; cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.hz-opt:hover { background: var(--gray-5); }
.hz-opt span { display: inline-flex; align-items: center; gap: var(--s2); }
.hz-opt:has(input:checked) {
  background: var(--primary-5); border-color: var(--primary);
  color: var(--c, var(--fg)); font-weight: 700;
}
.hz-opt:focus-within { outline: 4px solid var(--primary); outline-offset: 2px; }

input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; flex: none; margin: 0;
  background: var(--gray-0); border: 1px solid var(--border-strong);
  border-radius: var(--r-xs); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
input[type="radio"] { border-radius: var(--r-full); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--primary); border-color: var(--primary);
}
input[type="checkbox"]:checked::after {
  content: ""; width: 12px; height: 7px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: translateY(-2px) rotate(-45deg);
}
input[type="radio"]:checked::after {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: #fff;
}

.form-actions { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s2); flex-wrap: wrap; }
.form-actions.sticky {
  position: sticky; bottom: 0;
  padding: var(--s5) 0;
  background: var(--gray-0); border-top: 1px solid var(--gray-10);
}
.edit-form button[type="submit"], .form-actions button {
  min-height: var(--ctl-lg); padding: 0 var(--s6);
  font-family: inherit; font-size: var(--t); font-weight: 700; color: #fff;
  background: var(--primary); border: 1px solid var(--primary); border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t-base) var(--ease);
}
.form-actions button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.form-actions button:active { background: var(--primary-active); }

.danger { margin-top: var(--s9); }
.danger button {
  min-height: 48px; padding: 0 var(--s5);
  font-family: inherit; font-size: var(--t-sm); font-weight: 700;
  color: var(--danger-ink); background: var(--gray-0);
  border: 1px solid var(--danger); border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.danger button:hover { background: var(--danger); color: #fff; }

.guide-edit {
  display: grid; gap: var(--s3);
  padding: var(--s5); margin: var(--s4) 0;
  background: var(--gray-0); border: 1px solid var(--border); border-radius: var(--r);
}
.guide-edit h2 {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: 0; padding: 0; border: 0;
  font-size: var(--t-lg); color: var(--c, var(--fg));
}
.guide-edit h2 .dim { font-size: var(--t-sm); font-weight: 400; }
.guide-edit.missing { border-left: 4px solid var(--warning); }
.warn-tag {
  padding: 2px var(--s2); font-size: var(--t-xs); font-weight: 700;
  color: var(--warning-ink); background: var(--warning-bg);
  border: 1px solid var(--warning); border-radius: var(--r-xs);
}

.upload { display: grid; gap: var(--s5); max-width: 36rem; margin-top: var(--s6); }
.upload input[type="file"] {
  width: 100%; margin-top: var(--s2); padding: var(--s3);
  font-family: inherit; font-size: var(--t-sm); color: var(--fg);
  background: var(--gray-0); border: 1px solid var(--border-strong); border-radius: var(--r);
}
.upload input[type="file"]::file-selector-button {
  margin-right: var(--s3); padding: var(--s2) var(--s4);
  font-family: inherit; font-size: var(--t-sm); font-weight: 700;
  color: var(--primary-hover); background: var(--primary-5);
  border: 1px solid var(--primary); border-radius: var(--r-sm); cursor: pointer;
}
.upload button[type="submit"] {
  min-height: var(--ctl-lg); padding: 0 var(--s6);
  font-family: inherit; font-size: var(--t); font-weight: 700; color: #fff;
  background: var(--primary); border: 1px solid var(--primary); border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t-base) var(--ease);
}
.upload button[type="submit"]:hover { background: var(--primary-hover); }

.mode {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s5); margin: 0; display: grid; gap: var(--s2);
}
.mode legend { padding: 0 var(--s2); font-size: var(--t-sm); font-weight: 700; color: var(--gray-70); }
.mode label {
  display: flex; gap: var(--s3); align-items: center;
  min-height: 48px; padding: 0 var(--s3);
  font-size: var(--t-sm); cursor: pointer;
  border: 1px solid var(--gray-20); border-radius: var(--r-sm);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.mode label:hover { background: var(--gray-5); }
.mode label:has(input:checked) { background: var(--primary-5); border-color: var(--primary); }
.mode label:focus-within { outline: 4px solid var(--primary); outline-offset: 2px; }

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 모바일에서는 내비를 접는다. aria-expanded 가 유일한 상태 소스다. */
  .site-nav {
    display: none; order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-top: var(--s2); margin-top: var(--s2);
    border-top: 1px solid var(--gray-10);
  }
  .header-inner:has(.nav-toggle[aria-expanded="true"]) .site-nav { display: flex; }
  .site-nav a { min-height: 48px; border-bottom: 0; border-left: 3px solid transparent; }
  .site-nav a[aria-current="page"] { border-left-color: var(--primary); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .page { padding: var(--s8) var(--s6) var(--s10); }
  .hero { padding: var(--s9) var(--s8); }
  .steps-3 { grid-template-columns: repeat(3, 1fr); }
  .hz-body { grid-template-columns: 1fr 1fr; }
  .hz-body.one { grid-template-columns: 1fr; }
  .hits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cols { columns: 1; }
  .cards, .hz-check { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .hero-search input, .hero-search button { min-height: var(--ctl-lg); font-size: var(--t); }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; }
}

/* 움직임을 줄여달라는 설정을 존중한다. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 인쇄 — 현장 점검표를 종이로 들고 가는 경우가 실제로 있다. */
@media print {
  .site-header, .site-footer, .toc, .back, .nav-toggle, .pager { display: none; }
  .page { max-width: none; padding: 0; }
  .hz, .card, .steps-3 li { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}