/* ===========================================================
   LUMEX 제안서 공통 디자인 (A4 인쇄 기준)
   - 화면에서 읽어도, PDF 로 뽑아도 같게 보이도록 A4 페이지를 그대로 그린다.
   - 문서 하나 = .page 여러 장. 페이지마다 머리말/꼬리말이 붙는다.
   - 홈페이지(aurora) 와 같은 보라색 계열 · Pretendard 를 쓴다.
   =========================================================== */
:root{
  --ink:#0B0B12;        /* 본문 */
  --ink-2:#4A4A5A;      /* 보조 설명 */
  --ink-3:#8A8A9A;      /* 캡션 */
  --line:#E4E4EC;
  --line-2:#F2F2F6;
  --bg:#FFFFFF;
  --dark:#06060C;       /* 표지 바탕 */
  --brand:#8B5CF6;      /* 루멕스 보라 */
  --brand-2:#6D3EF0;
  --brand-soft:#F3EEFF;
  --page-w:210mm;
  --page-h:297mm;
  --pad:16mm;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  background:#6E6E7A; color:var(--ink);
  -webkit-font-smoothing:antialiased; word-break:keep-all; line-height:1.62;
}

/* ── 페이지 ───────────────────────────────────────────── */
.page{
  position:relative; width:var(--page-w); min-height:var(--page-h);
  margin:0 auto 10mm; padding:var(--pad) var(--pad) 20mm;
  background:var(--bg); overflow:hidden;
}
.page.dark{background:var(--dark); color:#fff}
.page-num{position:absolute; right:var(--pad); bottom:11mm; font-size:8.5pt; color:var(--ink-3); letter-spacing:.06em}
.page-foot{position:absolute; left:var(--pad); bottom:11mm; font-size:8.5pt; color:var(--ink-3); letter-spacing:.02em}
.page-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:5mm; margin-bottom:9mm; border-bottom:1px solid var(--line);
  font-size:8.5pt; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.page-head b{color:var(--brand-2); font-weight:700}

/* ── 표지 ─────────────────────────────────────────────── */
.cover{display:flex; flex-direction:column; justify-content:space-between; padding:22mm var(--pad)}
.cover .mark{display:flex; align-items:center; gap:5mm; font-size:13pt; letter-spacing:.42em; font-weight:800; color:#fff}
.cover .mark img{width:14mm; height:14mm; object-fit:contain}
.cover h1{font-size:34pt; line-height:1.24; font-weight:800; letter-spacing:-.02em; margin-top:6mm}
.cover h1 em{font-style:normal; color:var(--brand)}
.cover .lead{margin-top:7mm; font-size:11.5pt; color:#C9C9D6; max-width:120mm}
.cover .meta{display:flex; gap:10mm; font-size:9.5pt; color:#9A9AAB; border-top:1px solid rgba(255,255,255,.14); padding-top:6mm}
.cover .meta b{display:block; color:#fff; font-weight:600; margin-bottom:1.5mm}
.cover .glow{
  position:absolute; width:150mm; height:150mm; right:-50mm; top:-40mm; border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.42),transparent 62%);
}

/* ── 제목 ─────────────────────────────────────────────── */
.eyebrow{
  display:inline-block; font-size:8.5pt; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-2); margin-bottom:3mm;
}
h2{font-size:19pt; font-weight:800; letter-spacing:-.02em; line-height:1.34; margin-bottom:4mm}
h3{font-size:12pt; font-weight:700; margin-bottom:2mm}
.sub{font-size:10.5pt; color:var(--ink-2); max-width:150mm; margin-bottom:8mm}
.page.dark h2,.page.dark h3{color:#fff}
.page.dark .sub{color:#B9B9C8}
.page.dark .eyebrow{color:var(--brand)}

/* ── 본문 요소 ────────────────────────────────────────── */
p{font-size:10.5pt; color:var(--ink-2); margin-bottom:3mm}
.lead-p{font-size:11.5pt; color:var(--ink); font-weight:500}
strong{color:var(--ink); font-weight:700}
.page.dark strong{color:#fff}

.grid{display:grid; gap:5mm}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{border:1px solid var(--line); border-radius:3mm; padding:6mm; background:#fff}
.card .tag{font-size:8pt; font-weight:700; letter-spacing:.12em; color:var(--brand-2); text-transform:uppercase}
.card h3{margin:2mm 0 2.5mm}
.card p{font-size:9.5pt; margin:0}
.card.fill{background:var(--brand-soft); border-color:#E3D9FF}
.page.dark .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.page.dark .card p{color:#B9B9C8}

/* 숫자 강조 */
.stat{border-top:2px solid var(--ink); padding-top:3mm}
.stat b{display:block; font-size:24pt; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.stat b i{font-style:normal; font-size:12pt; font-weight:700; margin-left:1mm; color:var(--ink-2)}
.stat span{display:block; font-size:8.5pt; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-2); margin-top:1.5mm}
.stat em{display:block; font-style:normal; font-size:9pt; color:var(--ink-2); margin-top:1mm}
.page.dark .stat{border-color:var(--brand)}
.page.dark .stat b{color:#fff}
.page.dark .stat em{color:#B9B9C8}

/* 목록 */
ul{list-style:none}
ul li{position:relative; padding-left:5mm; font-size:10pt; color:var(--ink-2); margin-bottom:2mm}
ul li::before{content:''; position:absolute; left:0; top:2.6mm; width:2mm; height:2mm; border-radius:50%; background:var(--brand)}
ul li b{color:var(--ink); font-weight:700}
.page.dark ul li{color:#B9B9C8}
.page.dark ul li b{color:#fff}

/* 표 */
table{width:100%; border-collapse:collapse; font-size:9.5pt}
th{
  text-align:left; font-size:8.5pt; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:3mm 3mm; border-bottom:1.5px solid var(--ink);
}
td{padding:3.4mm 3mm; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align:top}
td b{color:var(--ink)}
tr:last-child td{border-bottom:1px solid var(--line)}

/* 절차 */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:3mm}
.step{border-top:2px solid var(--brand); padding-top:3mm}
.step b{display:block; font-size:8.5pt; color:var(--brand-2); letter-spacing:.1em; margin-bottom:1.5mm}
.step h4{font-size:10pt; font-weight:700; margin-bottom:1mm}
.step p{font-size:8.5pt; margin:0}

/* 강조 박스 */
.note{border-left:3px solid var(--brand); background:var(--brand-soft); padding:5mm 6mm; border-radius:0 2mm 2mm 0}
.note p{font-size:9.5pt; margin:0; color:#3A2E63}
.caption{font-size:8.5pt; color:var(--ink-3); margin-top:3mm}

/* 마지막 연락처 */
.contact{display:flex; gap:12mm; border-top:1px solid rgba(255,255,255,.16); padding-top:7mm; margin-top:8mm}
.contact div b{display:block; font-size:8.5pt; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:2mm}
.contact div span{font-size:12pt; color:#fff; font-weight:600}

/* 내용이 많아 A4 한 장을 살짝 넘기는 페이지에 붙인다(.page tight).
   글자 크기는 그대로 두고 여백만 조인다. 넘치면 PDF 에서 페이지가 쪼개지므로 필요한 곳에만 쓴다. */
.page.tight{padding-bottom:16mm}
.page.tight h2{margin-bottom:3mm}
.page.tight h3{margin-bottom:1.6mm}
.page.tight .step p{font-size:8pt}
.page.tight .sub{margin-bottom:5mm}
.page.tight .grid{gap:4mm}
.page.tight .card{padding:5mm}
.page.tight td{padding:2.6mm 3mm}
.page.tight th{padding:2.4mm 3mm}
.page.tight ul li{margin-bottom:1.4mm}
.page.tight p{margin-bottom:2.4mm}
.page.tight .note{padding:4mm 5mm}

/* ── 인쇄 ─────────────────────────────────────────────── */
@page{size:A4; margin:0}
@media print{
  body{background:#fff}
  .page{margin:0; box-shadow:none; page-break-after:always; break-after:page}
  .page:last-child{page-break-after:auto; break-after:auto}
  .page.dark,.card.fill,.note{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
@media screen{ .page{box-shadow:0 2mm 8mm rgba(0,0,0,.24)} }