/* 3단계 바로 위: 손익계산서가 왜 중요한가 — 같은 빨강 섹션 안(같은 주제 = 배경 공유)
   왼쪽 질문(교육 슬라이드 실제 문구 「얼마 남으셨어요?」) · 오른쪽 빈칸 장부: 매출만 숫자, 나머지는 「?」 도장 */
.si_wrap { display: flex; align-items: center; justify-content: center; gap: calc(120 * var(--cu)); margin-bottom: calc(200 * var(--cu)); text-align: left; }
.si_txt .k { font-size: calc(26 * var(--cu)); font-weight: 700; color: var(--shine-gold); letter-spacing: -.03em; }
.si_txt .tit { margin-top: calc(14 * var(--cu)); font-size: calc(76 * var(--cu)); line-height: 1.18; font-weight: 800; letter-spacing: -.05em; color: #fff; }
.si_txt .tit em { font-style: normal; color: var(--shine-gold); }
.si_txt .desc { margin-top: calc(34 * var(--cu)); font-size: calc(22 * var(--cu)); line-height: 1.65; font-weight: 500; letter-spacing: -.04em; color: rgba(255, 255, 255, .85); }
.si_txt .desc b { font-weight: 800; color: #fff; }

/* 장부 = 포스 영수증(시안 종이A 10-15): 감열지 · 점선 구분 · 바코드 · 아래 톱니로 찢긴 끝 */
.si_sheet { width: calc(440 * var(--cu)); rotate: 3deg; color: var(--pl-ink); filter: drop-shadow(0 calc(24 * var(--cu)) calc(24 * var(--cu)) rgba(60, 0, 0, .45)); }
.si_page { --tooth: calc(14 * var(--cu)); padding: calc(38 * var(--cu)) calc(38 * var(--cu)) calc(52 * var(--cu)); background: #fbfaf7; font-variant-numeric: tabular-nums;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom / calc(var(--tooth) * 1.4) var(--tooth) repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom / calc(var(--tooth) * 1.4) var(--tooth) repeat-x; }
.si_sheet header { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--cu)); padding-bottom: calc(20 * var(--cu)); border-bottom: 2px dashed #bdb5aa; }
.si_sheet header b { font-size: calc(28 * var(--cu)); font-weight: 900; letter-spacing: -.04em; }
.si_sheet header span { font-size: calc(15 * var(--cu)); color: var(--pl-ink-mute); }
.si_sheet ul { list-style: none; padding-top: calc(8 * var(--cu)); }
.si_sheet li { display: flex; justify-content: space-between; align-items: center; height: calc(54 * var(--cu)); font-size: calc(20 * var(--cu)); font-weight: 600; letter-spacing: -.03em; }
.si_sheet li.known b { font-size: calc(23 * var(--cu)); font-weight: 800; }
.si_sheet li .q { font-style: normal; font-size: calc(30 * var(--cu)); font-weight: 900; color: var(--red); }
.si_sheet li.net { height: calc(88 * var(--cu)); margin-top: calc(12 * var(--cu)); border-top: 2px dashed #bdb5aa; font-size: calc(25 * var(--cu)); font-weight: 900; }
.si_sheet li.net .q { display: grid; place-items: center; width: calc(62 * var(--cu)); height: calc(62 * var(--cu)); border-radius: 50%; background: var(--red); color: #fff; font-size: calc(34 * var(--cu)); }
.si_bar { display: block; height: calc(40 * var(--cu)); margin-top: calc(14 * var(--cu)); background: repeating-linear-gradient(90deg, var(--pl-ink) 0 2px, transparent 2px 4px, var(--pl-ink) 4px 7px, transparent 7px 9px, var(--pl-ink) 9px 10px, transparent 10px 13px); }
.si_sheet .foot { margin-top: calc(6 * var(--cu)); font-size: calc(14 * var(--cu)); color: var(--pl-ink-mute); }

/* 「잠깐!」 박스가 3단계 위로 옴: 아래 「가맹점 손익계산서를」과 간격 */
.pf_why.si_why { margin-top: 0; margin-bottom: calc(200 * var(--cu)); }

@media (max-width: 768px) {
  .pf_why.si_why { margin-bottom: calc(170 * var(--u)); }
  .si_wrap { flex-direction: column; gap: calc(80 * var(--u)); margin-bottom: calc(170 * var(--u)); text-align: center; }
  .si_txt .k { font-size: calc(30 * var(--u)); }
  .si_txt .tit { font-size: calc(64 * var(--u)); }
  .si_txt .desc { font-size: calc(28 * var(--u)); }
  .si_sheet { width: 80%; text-align: left; }
  .si_page { --tooth: calc(16 * var(--u)); padding: calc(44 * var(--u)) calc(40 * var(--u)) calc(56 * var(--u)); }
  .si_sheet header b { font-size: calc(36 * var(--u)); }
  .si_sheet header span { font-size: calc(20 * var(--u)); }
  .si_sheet li { height: calc(70 * var(--u)); font-size: calc(28 * var(--u)); }
  .si_sheet li.known b { font-size: calc(30 * var(--u)); }
  .si_sheet li .q { font-size: calc(38 * var(--u)); }
  .si_sheet li.net { height: calc(110 * var(--u)); font-size: calc(32 * var(--u)); }
  .si_sheet li.net .q { width: calc(76 * var(--u)); height: calc(76 * var(--u)); font-size: calc(42 * var(--u)); }
  .si_bar { height: calc(50 * var(--u)); }
}