/* ===== 제안서 공통 스타일 (모든 장표 공유) =====
   핵심: 모든 크기는 var(--mm) / var(--px) 단위로 쓴다.
   - PC·태블릿: 장표가 A4 가로(297×210) 비율 그대로 화면 너비에 맞춰 확대·축소 (PDF처럼 보임)
   - 모바일(<768px): 비율 고정을 풀고 세로로 흘러내리게(반응형), 글자는 읽기 좋은 고정 크기
   - 인쇄/PDF 저장: 실제 A4 가로 1장 = 장표 1장
*/
* { margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all; -webkit-font-smoothing: antialiased;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
img { display: block; max-width: 100%; }

:root {
  --blue: #0064FF;
  --ink: #191F28;
  --ink-2: #0F172A;
  --text: #334155;
  --muted: #475569;
  --line: #E2E8F0;
  --red: #E11D48;
}

body { background: #111622; min-height: 100vh; }
.deck { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 44px 20px; }

/* 장표 외곽: 너비에 맞춰 A4 가로 비율 유지 */
.page {
  width: min(1122px, 100%);
  aspect-ratio: 297 / 210;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* 장표 내부: 여기서부터 --mm, --px 사용 */
.page-inner {
  --mm: calc(100cqw / 297);       /* 장표 너비 기준 1mm */
  --px: calc(100cqw / 1122.5);    /* 원본 1122px 기준 1px */
  --fs-h1: calc(10 * var(--mm));
  --fs-lead: calc(9.5 * var(--mm));
  --fs-h3: calc(6 * var(--mm));
  --fs-body: calc(4.3 * var(--mm));
  --fs-small: calc(4 * var(--mm));
  --fs-index: calc(3.8 * var(--mm));
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: calc(18 * var(--mm)) calc(24 * var(--mm)) calc(15 * var(--mm));
}

/* 공통 부품 */
.bg-soft-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #FFF 0%, #FFF 28%, #F0FBFE 58%, #E6F6FE 82%, #F5FBFE 100%); }
.header-line { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: calc(2.8 * var(--mm)); border-bottom: calc(.35 * var(--mm)) solid var(--line); margin-bottom: calc(6.5 * var(--mm)); }
.header-index { font-size: var(--fs-index); font-weight: 500; color: var(--text); letter-spacing: -.2px; }
.title-wrap { position: relative; z-index: 10; margin-bottom: calc(5.5 * var(--mm)); }
.main-title { font-size: var(--fs-h1); font-weight: 600; line-height: 1.34; letter-spacing: -1.1px; color: var(--ink); }
/* 제안 요청 사항 답변 장표: 질문 줄 + 헤더 우측 표기 */
.ask { display: flex; align-items: baseline; gap: calc(3 * var(--mm)); margin-bottom: calc(4 * var(--mm));
  font-size: var(--fs-h3); font-weight: 600; color: #4E5968; letter-spacing: -.5px; }
.ask b { font-size: calc(10 * var(--mm)); font-weight: 800; color: var(--blue); line-height: 1; margin-right: 2px; }
.header-req { font-size: var(--fs-index); font-weight: 600; color: var(--blue); letter-spacing: -.2px; }
.body-grid { position: relative; z-index: 10; flex: 1; display: grid; grid-template-columns: calc(130 * var(--mm)) 1fr;
  gap: calc(9 * var(--mm)); align-items: center; margin-top: calc(5 * var(--mm)); padding-bottom: calc(2 * var(--mm)); }
.card { background: #fff; border-radius: calc(12 * var(--px)); box-shadow: 0 calc(4 * var(--px)) calc(20 * var(--px)) rgba(0,0,0,.06); }
.check-list { list-style: none; display: flex; flex-direction: column; gap: calc(16 * var(--px)); }
.check-list li { display: flex; align-items: flex-start; font-size: var(--fs-body); color: var(--text); font-weight: 600; line-height: 1.5; }
.check-list svg { width: calc(20 * var(--px)); height: calc(20 * var(--px)); margin: calc(3 * var(--px)) calc(12 * var(--px)) 0 0; flex-shrink: 0; }

/* ===== 모바일: 비율 고정 해제, 세로로 흘러내림 ===== */
@media (max-width: 767px) {
  .deck { gap: 16px; padding: 16px 12px; }
  .page { aspect-ratio: auto; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
  .page-inner {
    --mm: 3px; --px: 1px;
    --fs-h1: 24px; --fs-lead: 20px; --fs-h3: 18px; --fs-body: 15px; --fs-small: 14px; --fs-index: 13px;
    height: auto; padding: 28px 22px 32px;
  }
  .main-title { letter-spacing: -.5px; }
  .main-title br { display: none; }  /* 모바일은 자연 줄바꿈 */
  .body-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
}

/* ===== 인쇄 / PDF 저장 (Ctrl+P → PDF로 저장, 가로) ===== */
@page { size: 297mm 210mm; margin: 0; }
@media print {
  body { background: none; }
  .deck { display: block; padding: 0; }
  .page { width: 297mm; height: 210mm; aspect-ratio: auto; box-shadow: none; border-radius: 0; break-after: page; }
  .page:last-child { break-after: auto; }
  .page-inner { --mm: 1mm; --px: calc(297mm / 1122.5); }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}