263 lines
4.5 KiB
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;
|
|
}
|