wing-ops/scripts/generate_manual_pdfs/style.css

263 lines
4.5 KiB
CSS

@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;
}