:root {
  color-scheme: light;

  --paper: #fbfaf6;
  --sheet: #ffffff;
  --ink: #1c1c1a;
  --ink-2: #4a4a45;
  --ink-3: #7b7b74;
  --rule: #d9d7cf;
  --rule-strong: #1c1c1a;
  --grid-line: #dfe7ee;
  --pen: #2443a3;          /* 볼펜 파랑: 링크·포커스 */
  --margin: #e5a2a2;       /* 노트 여백선 */
  --leaf: #8cbf3f;         /* 로고 잎 색: 라벨 띠에만 */
  --err: #b3261e;

  /* 분야별 라벨 테이프 */
  --t-culture: #f4d56c;
  --t-antibody: #f3b0bd;
  --t-molecular: #a9cdea;
  --t-reagent: #f5b88a;
  --t-labware: #bfd99a;
  --t-tissue: #d9c7a8;
  --t-protein: #e9b8e0;
  --t-cells: #8fd3c8;
  --t-etc: #d6d4cc;

  --sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --hand: "Nanum Pen Script", var(--sans);

  --wrap: 1180px;
  --pad: clamp(16px, 4vw, 36px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.75;
  word-break: keep-all; overflow-wrap: anywhere;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--ink); color: var(--paper); padding: 8px 14px; }
.skip-link:focus { top: 12px; }

.wrap { max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }

.grid-paper {
  background-color: #fdfdfb;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--ink); border-radius: 2px;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #33332f; }
.btn-line { background: var(--sheet); color: var(--ink); }
.btn-line:hover { background: #f1efe8; }

/* ---------- 머리글 ---------- */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper); border-bottom: 3px double var(--rule-strong);
}
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
.logo img { height: 58px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; }
.nav a:not(.btn) { text-decoration: none; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.nav a:not(.btn):hover { border-bottom-color: var(--ink); }
.nav a[aria-current] { border-bottom-color: var(--ink); }
.nav .btn { min-height: 38px; font-size: 14px; }
.menu-btn { display: none; border: 1.5px solid var(--ink); background: var(--sheet); padding: 6px 14px; font-size: 14px; font-weight: 600; border-radius: 2px; cursor: pointer; }

/* ---------- 첫 화면: 시약 라벨 ---------- */
.cover { position: relative; isolation: isolate; border-bottom: 1.5px solid var(--ink); background: #ecebe6; }
.cover-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  min-height: clamp(600px, 46vw, 720px);
  padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(44px, 6vw, 76px);
  pointer-events: none;
}
.cover-inner > * { pointer-events: auto; }
.cover .reagent { width: min(100%, 580px); box-shadow: 8px 8px 0 rgba(28, 28, 26, .14), 0 24px 60px -24px rgba(28, 28, 26, .35); }

/* 첫 화면 가로 배너 (라벨 뒤 전체 폭) */
.slides.slides-hero {
  position: absolute; inset: 0; z-index: 0;
  min-height: 0; border: 0; box-shadow: none; background: transparent;
}
.slides.slides-hero .slide img { object-position: 78% 50%; }
.slides-hero .slides-ctrl { right: max(var(--pad), calc((100vw - var(--wrap)) / 2)); bottom: 20px; }

.reagent {
  display: grid; grid-template-columns: 14px minmax(0, 1fr);
  background: var(--sheet); border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(28, 28, 26, .08);
}
.reagent-stripe { background: var(--leaf); border-right: 1.5px solid var(--ink); }
.reagent-body { padding: clamp(18px, 3vw, 30px) clamp(18px, 3vw, 32px) clamp(16px, 2.4vw, 24px); }
.reagent-top {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--ink-3);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.reagent-name {
  margin-top: 18px;
  font-size: clamp(24px, 3vw, 33px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em;
}
.reagent-sub { display: block; margin-top: 10px; font-size: clamp(16px, 1.7vw, 19px); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); }
.reagent-fields { margin-top: 22px; border-top: 1.5px solid var(--ink); }
.reagent-fields > div {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.6;
}
.reagent-fields dt { font-size: 13px; font-weight: 600; color: var(--ink-3); padding-top: 1px; }
.reagent-fields a { text-decoration-color: var(--rule); text-underline-offset: 3px; }
.reagent-fields a:hover { color: var(--pen); text-decoration-color: currentColor; }
.reagent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.reagent-fine {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-3);
}
.reagent-fine span:first-child { font-family: var(--mono); font-weight: 500; color: var(--ink-2); }

/* ---------- 그림 ---------- */
.fig img { width: 100%; border: 1px solid var(--rule); background: #eee; }
.fig figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.fig figcaption b { font-weight: 700; color: var(--ink); margin-right: 4px; }
.fig .src { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--ink-3); }

/* ---------- 사진 슬라이드 (첫 화면, 실험 사진 띠) ---------- */
.slides {
  position: relative; min-height: 420px; overflow: hidden;
  background: #fff; border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(28, 28, 26, .08);
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.slide.is-on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slides-ctrl {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 2px;
  background: var(--sheet); border: 1px solid var(--ink); padding: 2px;
}
.slides-btn {
  width: 32px; height: 30px; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--ink);
}
.slides-btn:hover { background: #f1efe8; }
.slides-pause { font-size: 12px; border-left: 1px solid var(--rule); }
.slides-band { margin-top: clamp(48px, 7vw, 80px); min-height: 0; aspect-ratio: 2048 / 640; box-shadow: none; border-width: 1px; }
.slides-count { min-width: 44px; text-align: center; font-size: 12px; color: var(--ink-2); }

/* ---------- 배경 이미지가 있는 섹션 ---------- */
.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.has-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-img) center / cover no-repeat;
  opacity: .5;
}
.bg-map { --bg-img: url("img/map/chuncheon.webp"); }
.bg-map::before { background-position: 0 66%; background-size: max(100%, 1800px) auto; }
.bg-notice { --bg-img: url("img/lab/notice-bg.webp"); }
.has-bg .section-head h2 { background: var(--paper); box-shadow: 0 0 0 8px var(--paper); display: inline-block; }
.has-bg .section-meta { background: var(--paper); padding: 0 6px; }
.has-bg .log { background: rgba(251, 250, 246, .92); padding: 0 14px; }
.has-bg .log-title { display: inline-block; background: var(--paper); padding: 2px 8px; }
.map-credit { position: relative; margin-top: 18px; font-size: 11.5px; color: var(--ink-2); text-align: right; }
.map-credit a { color: inherit; }

/* ---------- 섹션 공통 ---------- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-tight { padding: clamp(44px, 6vw, 72px) 0; border-top: 1px solid var(--rule); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  padding-bottom: 12px; border-bottom: 1.5px solid var(--ink);
}
.section-head h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; }
.section-meta { font-size: 13px; color: var(--ink-3); }
.section-lede { margin-top: 14px; color: var(--ink-2); font-size: 15px; }

/* ---------- 테이프 ---------- */
.tape {
  display: inline-block; padding: 1px 12px 0;
  font-family: var(--hand); font-size: 21px; line-height: 1.35; color: #2a2a26;
  background: var(--tape, #eee);
  clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 50%, 100% 100%, 96% 94%, 4% 100%, 0 95%, 1% 50%);
}
.tape-all { --tape: #e4e2da; }
.t-culture { --tape: var(--t-culture); }
.t-antibody { --tape: var(--t-antibody); }
.t-molecular { --tape: var(--t-molecular); }
.t-reagent { --tape: var(--t-reagent); }
.t-labware { --tape: var(--t-labware); }
.t-tissue { --tape: var(--t-tissue); }
.t-protein { --tape: var(--t-protein); }
.t-cells { --tape: var(--t-cells); }
.t-etc { --tape: var(--t-etc); }
.tape small { font-family: var(--mono); font-size: 11px; color: #55554e; margin-left: 2px; vertical-align: 2px; }

.brand-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-top: 22px; }
.tape-filter { display: flex; flex-wrap: wrap; gap: 8px 6px; flex: 1 1 520px; }
.brand-search { flex: 0 1 300px; }
.brand-search input {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--sheet);
  font-size: 15px; outline: none;
}
.brand-search input:focus { box-shadow: inset 0 -2px 0 var(--pen); border-color: var(--pen); }
.brand-result { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); min-height: 1.4em; }
.tape-btn {
  border: 0; padding: 3px; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; opacity: .72;
  transition: opacity .15s;
}
.tape-btn:hover { opacity: .85; }
.tape-btn.is-on { opacity: 1; border-bottom-color: var(--ink); }

/* ---------- 브랜드 라벨 ---------- */
.labels {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin-top: 26px; align-items: start;
}
.label {
  position: relative; background: var(--sheet);
  border: 1px solid #c9c7be; padding: 0 18px 14px;
}
.label[hidden] { display: none; }
.label-tapes { display: flex; flex-wrap: wrap; gap: 4px; margin: -12px 0 0 -6px; min-height: 26px; }
.label-tapes .tape { font-size: 19px; padding: 0 10px; }
.label-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-top: 10px; }
.label-head h3 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.label-url { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.label-head img, .label-noimg { width: 72px; height: 72px; object-fit: cover; flex: none; border: 1px solid var(--rule); background: #fff; }
.label-noimg { background: repeating-linear-gradient(45deg, #f3f2ec 0 6px, #fff 6px 12px); }
.label-items { margin-top: 12px; border-top: 1px solid var(--ink); }
.label-items li { padding: 5px 0; border-bottom: 1px dashed var(--rule); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.label-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; }
.label-foot a { color: var(--ink-3); text-decoration: none; }
.label-foot a:hover { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
.label-foot button {
  border: 1px solid var(--ink); background: var(--sheet); padding: 4px 10px; border-radius: 2px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.label-foot button:hover { background: var(--ink); color: var(--paper); }
.label-foot button.is-added { background: #eef3e4; border-color: #5d7f2b; color: #3d5a17; }
.labels-empty { margin-top: 20px; color: var(--ink-3); }

/* ---------- 공지 ---------- */
.notice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px clamp(24px, 5vw, 64px); align-items: start; }
.notice-grid .section-head { border-bottom: 0; padding: 0; display: grid; justify-items: start; gap: 10px; }
.memo {
  padding: 18px 20px; background: #fff8cf; border: 1px solid #e8d77f;
  font-size: 15.5px; line-height: 1.7;
}
.memo b { display: block; font-size: 17px; margin-bottom: 4px; }
.memo a { color: var(--pen); text-underline-offset: 3px; }
.log { margin-top: 22px; border-top: 1.5px solid var(--ink); }
.log li {
  display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px;
}
.log time { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.log s { color: var(--ink-3); text-decoration-color: var(--ink-2); text-decoration-thickness: 1.5px; }
.log .done { font-size: 12px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--rule); padding: 1px 8px; }
.log-title { margin-top: 26px; font-size: 13px; font-weight: 600; color: var(--ink-3); }

/* ---------- 인사말: 줄 노트 ---------- */
.notebook {
  --lh: 34px;
  position: relative; max-width: 820px; margin: 0 auto;
  padding: 30px clamp(20px, 4vw, 48px) 34px clamp(56px, 8vw, 96px);
  background-color: var(--sheet);
  background-image: repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), #dfe6ee calc(var(--lh) - 1px) var(--lh));
  background-position: 0 30px;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 3px 0 -1px var(--sheet), 0 4px 0 -1px var(--rule);
  font-size: 16.5px; line-height: var(--lh);
}
.notebook::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: clamp(40px, 6vw, 72px);
  border-left: 1.5px solid var(--margin);
}
.notebook h2 { font-size: 15px; line-height: var(--lh); font-weight: 600; color: var(--ink-3); }
.notebook-hello { font-family: var(--hand); font-size: 30px; color: var(--pen); line-height: var(--lh); }
.notebook p + p { margin-top: var(--lh); }
.notebook p:not(.notebook-hello):not(.notebook-sign) { max-width: 38em; color: var(--ink-2); }
.notebook p:nth-of-type(2) { color: var(--ink); font-weight: 600; }
.notebook-sign { text-align: right; font-weight: 600; }

/* ---------- 견적의뢰서 ---------- */
.sheet {
  max-width: 900px; margin: 0 auto; background: var(--sheet);
  border: 1.5px solid var(--ink); padding: clamp(20px, 4vw, 44px);
  box-shadow: 6px 6px 0 rgba(28, 28, 26, .08);
}
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; padding-bottom: 14px; border-bottom: 3px double var(--ink); }
.sheet-head h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: .32em; }
.sheet-meta { display: grid; gap: 2px; font-size: 13px; }
.sheet-meta div { display: flex; gap: 10px; }
.sheet-meta dt { color: var(--ink-3); min-width: 3.6em; }
.sheet-guide { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }

.sheet-block { border: 0; padding: 0; margin-top: 26px; min-width: 0; }
.sheet-block legend { padding: 0; font-size: 14px; font-weight: 700; margin-bottom: 8px; }

.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-left: 1px solid var(--ink); }
.cell { display: grid; grid-template-columns: 82px minmax(0, 1fr); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.cell label { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 8px 10px; background: #f4f3ee; border-right: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; }
.cell label em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--err); }
.cell input, .cell textarea {
  width: 100%; min-width: 0; border: 0; padding: 10px 12px; background: transparent; font-size: 15.5px; outline: none;
}
.cell input:focus, .cell textarea:focus { background: #f5f8ff; box-shadow: inset 0 -2px 0 var(--pen); }
.cell .err { grid-column: 1 / -1; }
.cell.has-err input, .cell.has-err textarea { background: #fdf3f2; }
.cell-full { grid-template-columns: 1fr; border: 1px solid var(--ink); border-top-width: 1.5px; }
.cell-full textarea { resize: vertical; min-height: 104px; }
.cell input::placeholder, .cell textarea::placeholder, .items input::placeholder { color: #a5a49c; }

.items { border: 1px solid var(--ink); border-top-width: 1.5px; border-bottom: 0; }
.items-row {
  display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 2fr) 76px 40px;
  border-bottom: 1px solid var(--ink);
}
.items-row > * { border-right: 1px solid var(--rule); min-width: 0; }
.items-row > *:last-child { border-right: 0; }
.items-th { background: #f4f3ee; font-size: 13px; font-weight: 600; }
.items-th > span { padding: 7px 10px; }
.items-no { display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.items input { width: 100%; border: 0; padding: 10px; background: transparent; font-size: 15px; outline: none; }
.items input:focus { background: #f5f8ff; box-shadow: inset 0 -2px 0 var(--pen); }
.items input[type="number"] { font-family: var(--mono); }
.row-del { border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--ink-3); }
.row-del:hover { color: var(--err); }
.add-row {
  margin-top: 10px; border: 1px dashed var(--ink-3); background: none; padding: 7px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 2px;
}
.add-row:hover { border-style: solid; border-color: var(--ink); }

.sheet-foot { display: grid; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.agree input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ink); flex: none; }
.btn-submit { justify-self: start; min-width: 200px; min-height: 50px; font-size: 16px; }
.btn-submit[disabled] { opacity: .6; cursor: progress; }
.err { font-size: 13px; color: var(--err); padding: 0 10px 6px; }
.err:empty { display: none; }
.sheet-foot .err { padding: 0; }
.form-msg { font-size: 14.5px; }
.form-msg:empty { display: none; }
.form-msg.is-ok { color: #3d5a17; }
.form-msg.is-bad { color: var(--err); }
.form-msg a { color: var(--pen); }
.hp { position: absolute; left: -9999px; }

.sheet-done { padding: 28px 0 8px; }
.sheet-done h3 { font-size: 22px; letter-spacing: -0.02em; }
.sheet-done p { margin-top: 8px; color: var(--ink-2); }

/* ---------- 오시는 길 ---------- */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px clamp(24px, 5vw, 64px); align-items: start; }
.visit-grid .section-head { border-bottom: 0; padding: 0; }
.waybill { background: var(--sheet); border: 1.5px solid var(--ink); }
.waybill-title { padding: 8px 16px; border-bottom: 1.5px solid var(--ink); font-size: 12.5px; background: var(--ink); color: var(--paper); }
.waybill dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.waybill dl > div { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.waybill dl > .wide { grid-column: 1 / -1; }
.waybill dl > .half { border-right: 1px solid var(--rule); }
.waybill dt { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.waybill dd { margin-top: 2px; font-size: 16px; font-weight: 500; }
.waybill dd a { text-decoration: none; }
.waybill dd a:hover { color: var(--pen); text-decoration: underline; }
.waybill-maps { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 16px; font-size: 14px; }
.waybill-maps a { color: var(--pen); text-underline-offset: 3px; }

/* ---------- 바닥글 ---------- */
.foot { border-top: 3px double var(--ink); padding: 26px 0 34px; font-size: 13.5px; color: var(--ink-2); }
.foot-inner { display: grid; gap: 4px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .mono { margin-top: 6px; font-size: 12px; color: var(--ink-3); }

/* ---------- 반응형 ---------- */
@media (max-width: 1180px) {
  .labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .masthead-inner { min-height: 68px; }
  .logo img { height: 44px; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 3px double var(--ink); padding: 4px var(--pad) 18px;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .nav .btn { margin-top: 14px; min-height: 46px; }
  .masthead-inner { position: static; }
  .masthead { position: sticky; }

  .slides { min-height: 0; aspect-ratio: 4 / 4; }
  .cover { background: var(--paper); }
  .slides.slides-hero { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .slides.slides-hero .slide img { object-position: 92% 50%; }
  .slides-hero .slides-ctrl { right: 12px; top: 12px; bottom: auto; }
  .cover-inner { display: block; min-height: 0; padding-top: 0; margin-top: -40px; }
  .cover .reagent { width: 100%; }
  .slides-band { aspect-ratio: 16 / 7; }
  .notice-grid, .visit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .labels { grid-template-columns: 1fr; }
  .brand-search { flex-basis: 100%; }
  .reagent { grid-template-columns: 10px minmax(0, 1fr); }
  .reagent-fields > div { grid-template-columns: 1fr; gap: 0; }
  .cells { grid-template-columns: 1fr; }
  .items-th { display: none; }
  .items-row { grid-template-columns: 36px minmax(0, 1fr) 64px 36px; grid-template-areas: "no brand qty del" "no name name del"; }
  .items-row .items-no { grid-area: no; }
  .items-row .f-brand { grid-area: brand; }
  .items-row .f-name { grid-area: name; border-top: 1px dashed var(--rule); border-right: 0; }
  .items-row .f-qty { grid-area: qty; }
  .items-row .row-del { grid-area: del; }
  .log li { grid-template-columns: 1fr auto; }
  .log time { grid-column: 1 / -1; }
  .waybill dl { grid-template-columns: 1fr; }
  .waybill dl > .half { border-right: 0; }
  .btn-submit { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide { transition: none; }
}

/* ---------- 접수 완료·404 페이지 ---------- */
.simple { min-height: 100dvh; display: grid; align-content: center; justify-items: start; gap: 40px; padding-block: 48px; }
.simple-card { max-width: 640px; width: 100%; }
.simple-text { margin-top: 14px; color: var(--ink-2); }
.simple-text a { color: var(--pen); }