@font-face {
  font-family: 'Pretendard GOV';
  src: url('../../frontend/public/fonts/PretendardGOV-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard GOV';
  src: url('../../frontend/public/fonts/PretendardGOV-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard GOV';
  src: url('../../frontend/public/fonts/PretendardGOV-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard GOV';
  src: url('../../frontend/public/fonts/PretendardGOV-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@page {
  size: A4;
  margin: 18mm 15mm 18mm 15mm;

  @top-right {
    content: string(chapter-title);
    font-family: 'Pretendard GOV', sans-serif;
    font-size: 9pt;
    color: #64748b;
  }

  @bottom-center {
    content: counter(page) ' / ' counter(pages);
    font-family: 'Pretendard GOV', sans-serif;
    font-size: 9pt;
    color: #64748b;
  }
}

@page :first {
  margin: 0;
  @top-right { content: none; }
  @bottom-center { content: none; }
}

html {
  font-family: 'Pretendard GOV', sans-serif;
  font-size: 10.5pt;
  line-height: 1.6;
  color: #1e293b;
}

body {
  margin: 0;
  padding: 0;
}

/* ── Cover page ── */
.cover {
  page: cover;
  page-break-after: always;
  height: 297mm;
  box-sizing: border-box;
  padding: 60mm 30mm;
  background: linear-gradient(135deg, #0a1628 0%, #16213e 100%);
  color: #e2e8f0;
  string-set: chapter-title attr(data-title);
}

.cover .brand {
  font-size: 14pt;
  color: #06b6d4;
  letter-spacing: 0.3em;
  font-weight: 700;
  margin-bottom: 10mm;
}

.cover .ch-num {
  display: inline-block;
  padding: 4mm 10mm;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 4mm;
  color: #06b6d4;
  font-family: 'Pretendard GOV', monospace;
  font-size: 16pt;
  font-weight: 700;
  margin-bottom: 8mm;
}

.cover .title {
  font-size: 32pt;
  font-weight: 700;
  margin: 0 0 4mm 0;
  color: #ffffff;
}

.cover .subtitle {
  font-size: 14pt;
  color: #94a3b8;
  margin-bottom: 20mm;
}

.cover .meta {
  margin-top: auto;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  padding-top: 6mm;
  font-size: 10pt;
  color: #94a3b8;
}

.cover .meta .screens-count {
  color: #06b6d4;
  font-weight: 700;
}

/* ── Screen sections ── */
.screen {
  page-break-before: always;
  string-set: chapter-title attr(data-chapter);
}

.screen-header {
  border-bottom: 2px solid #06b6d4;
  padding-bottom: 3mm;
  margin-bottom: 6mm;
}

.screen-index {
  display: inline-block;
  background: #06b6d4;
  color: #fff;
  font-family: 'Pretendard GOV', monospace;
  font-size: 9pt;
  font-weight: 700;
  padding: 1mm 3mm;
  border-radius: 1mm;
  margin-right: 3mm;
}

.screen-name {
  font-size: 18pt;
  font-weight: 700;
  color: #0f172a;
}

.menu-path {
  font-size: 9.5pt;
  color: #64748b;
  margin-top: 1.5mm;
}

.screenshot {
  margin: 4mm 0 6mm 0;
  text-align: center;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  padding: 3mm;
}

.screenshot img {
  max-width: 100%;
  max-height: 110mm;
  object-fit: contain;
}

h3.section-label {
  font-size: 11pt;
  font-weight: 700;
  color: #06b6d4;
  margin: 5mm 0 2mm 0;
  padding-left: 2mm;
  border-left: 3px solid #06b6d4;
}

p.overview,
p.description {
  margin: 2mm 0 3mm 0;
  text-align: justify;
}

p.overview {
  background: #f1f5f9;
  padding: 3mm 4mm;
  border-radius: 1.5mm;
  font-size: 10pt;
}

ol.procedure,
ul.notes {
  margin: 2mm 0 4mm 0;
  padding-left: 6mm;
}

ol.procedure li,
ul.notes li {
  margin-bottom: 1.5mm;
}

ul.notes li {
  list-style: none;
  position: relative;
  padding-left: 4mm;
}

ul.notes li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  color: #f59e0b;
}

table.inputs {
  width: 100%;
  border-collapse: collapse;
  margin: 2mm 0 4mm 0;
  font-size: 9.5pt;
}

table.inputs th,
table.inputs td {
  border: 1px solid #cbd5e1;
  padding: 1.5mm 2.5mm;
  text-align: left;
  vertical-align: top;
}

table.inputs thead th {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
}

table.inputs td.required-yes {
  color: #dc2626;
  font-weight: 700;
  text-align: center;
}

table.inputs td.required-no {
  color: #64748b;
  text-align: center;
}

.notes-box {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  padding: 3mm 4mm;
  margin: 2mm 0 4mm 0;
  border-radius: 0 1.5mm 1.5mm 0;
}

.notes-box h3.section-label {
  color: #b45309;
  border-left-color: #f59e0b;
  margin-top: 0;
}