/* 10-16 손익계산서 구간(section_steps) 결 맞추기 — 원래 섹션 문법(한지 바탕 · slogan/title/desc 3단 · 빨강·먹·흰)으로.
   금색·통빨강·월계관 걷어냄. profit.css / steps_intro.css 위에 덮어씀 */
#section_steps { --steps-dim: rgba(20, 14, 12, .72); background: #f1eee8 url(../img/bg_hanji.jpg) center / cover no-repeat; color: var(--ink); }
#section_steps .sec_txt .slogan, #section_steps .sec_txt .desc { color: var(--ink); }
#section_steps .sec_txt .title { color: var(--red); }

/* 손익 중요성: 왼쪽 제목 세트 + 영수증 */
#section_steps .si_txt { max-width: calc(620 * var(--cu)); }
@media (max-width: 768px) { #section_steps .si_txt { max-width: none; } }

/* 잠깐 박스: 금 이중 테두리 → 먹색 면만, 안쪽 제목은 어두운 바탕 문법(흰 slogan / 빨강 title) */
#section_steps .pf_why { border: 0; outline: 0; box-shadow: none; }
#section_steps .pf_why .sec_txt .slogan { color: #fff; }
#section_steps .pf_why .sec_txt .title { margin-bottom: 0; color: var(--red-hero); }
#section_steps .why_tag::after { background: #fff; }

/* 3단계 카드: 켜진 카드 테두리 금 → 빨강 */
#section_steps .pf_only { color: var(--ink); }
#section_steps .pf_steps { margin-top: calc(60 * var(--cu)); }
.pf_steps.pf_cycle > li.on { border-color: var(--red); }

/* 실제 손익계산서 */
#section_steps .pf_real { color: var(--ink); }
#section_steps .pf_ledgers { margin-top: calc(60 * var(--cu)); }
#section_steps .pf_note { color: #6b6661; }
#section_steps .si_txt .desc b { color: var(--ink); }
#section_steps .sec_txt .title span { color: inherit; }   /* sec_a 「.title span = 흰색」 규칙이 nowrap 묶음에 먹던 것 */

/* 손익 장부: 감열 영수증(톱니·바코드·기울기) → 석암 매출 카드 문법(빨강 머리띠 + 흰 몸통, 납작) */
#section_steps .si_sheet { width: calc(560 * var(--cu)); rotate: none; filter: none; box-shadow: 0 calc(20 * var(--cu)) calc(40 * var(--cu)) rgba(40, 20, 10, .12); }
#section_steps .si_page { padding: 0; background: #fff; -webkit-mask: none; mask: none; }
#section_steps .si_sheet header { flex-direction: row; justify-content: space-between; align-items: baseline; padding: calc(26 * var(--cu)) calc(40 * var(--cu)); border: 0; background: var(--red); color: #fff; }
#section_steps .si_sheet header b { font-size: calc(30 * var(--cu)); font-weight: 800; }
#section_steps .si_sheet header span { color: rgba(255, 255, 255, .8); }
#section_steps .si_sheet ul { padding: calc(14 * var(--cu)) calc(40 * var(--cu)) 0; }
#section_steps .si_sheet li { height: calc(62 * var(--cu)); border-bottom: 1px solid #ebe6df; font-size: calc(22 * var(--cu)); }
#section_steps .si_sheet li.known b { font-size: calc(26 * var(--cu)); }
#section_steps .si_sheet li.net { height: calc(96 * var(--cu)); margin: calc(14 * var(--cu)) calc(-40 * var(--cu)) 0; padding: 0 calc(40 * var(--cu)); border: 0; background: var(--ink); color: #fff; font-size: calc(26 * var(--cu)); }
#section_steps .si_sheet li.net .q { width: calc(58 * var(--cu)); height: calc(58 * var(--cu)); font-size: calc(32 * var(--cu)); }

/* 잠깐!: 도장+밑줄 → 석암 「216% 상승」식 기울어진 빨강 라벨을 박스 윗선에 걸침 */
#section_steps .pf_why { margin-top: calc(80 * var(--cu)); padding-top: calc(130 * var(--cu)); }
#section_steps .why_tag { top: 0; height: calc(120 * var(--cu)); padding: calc(18 * var(--cu)) calc(44 * var(--cu)); translate: -50% -50%; rotate: -4deg; background: var(--red); color: #fff; box-shadow: 0 calc(10 * var(--cu)) calc(24 * var(--cu)) rgba(0, 0, 0, .25); }
#section_steps .why_tag::after { content: none; }

@media (max-width: 768px) {
  #section_steps .si_sheet { width: 88%; }
  #section_steps .si_sheet header { padding: calc(28 * var(--u)) calc(36 * var(--u)); }
  #section_steps .si_sheet header b { font-size: calc(36 * var(--u)); }
  #section_steps .si_sheet ul { padding: calc(14 * var(--u)) calc(36 * var(--u)) 0; }
  #section_steps .si_sheet li { height: calc(76 * var(--u)); font-size: calc(28 * var(--u)); }
  #section_steps .si_sheet li.net { height: calc(110 * var(--u)); margin: calc(14 * var(--u)) calc(-36 * var(--u)) 0; padding: 0 calc(36 * var(--u)); font-size: calc(32 * var(--u)); }
  #section_steps .pf_why { margin-top: calc(90 * var(--u)); padding-top: calc(130 * var(--u)); }
  #section_steps .why_tag { top: 0; height: calc(120 * var(--u)); padding: calc(18 * var(--u)) calc(40 * var(--u)); }
  /* 모바일: 「작성해 주지 않을까요?」는 한 줄 · 「왜 본사들은」과 같은 크기·흰색 → 빨강 「손익계산서를」만 크게 */
  #section_steps .si_why .title .nw { display: block; margin-top: calc(14 * var(--u)); font-size: calc(58 * var(--u)); font-weight: 600; line-height: 1.2; letter-spacing: -.05em; color: #fff; }
}

/* 잠깐 박스 오른쪽 카드: 김치찜 누끼(혼자 튐) → 왼쪽 카드와 같은 「자료 사진 + 갈색 막」 짝. 사진 = 수원점 김치 양념 바트(식자재) */
#section_steps .why_b { background: linear-gradient(90deg, rgba(58, 30, 12, .94) 0%, rgba(58, 30, 12, .8) 55%, rgba(58, 30, 12, .55) 100%), url(../img/why_ingr.jpg) center / cover no-repeat; }

/* 3단계 카드: 자료 슬라이드 카드(2·3번)도 켜지면 1번처럼 밝아지게 (막 .88 유지 → 옅게) */
#section_steps { --steps-on: linear-gradient(0deg, var(--red-hero) 0%, rgba(242, 51, 59, .88) 28%, rgba(242, 51, 59, 0) 62%); }   /* 켜진 카드: 글씨 자리까지 빨강 — 흰 자료 위 흰 글씨 안 보이던 것 */
.pf_steps.pf_cycle > li.on::before { background: var(--steps-on); }
.pf_steps.pf_cycle > li.has_slides.on::before { background: var(--steps-on), rgba(0, 0, 0, .18); }

/* 모바일 스와이퍼(js/steps_m.js): 석암 모바일 센터 스와이퍼처럼 옆 카드가 살짝 보이게 */
@media (max-width: 768px) {
  #section_steps .pf_sw { margin-top: calc(60 * var(--u)); overflow: hidden; }
  #section_steps .pf_sw .swiper-wrapper { display: flex; justify-content: flex-start; gap: 0; margin: 0; padding: 0; }   /* PC .pf_steps 의 justify-content:center 가 가운데 정렬을 250px 밀던 것 */
  #section_steps .pf_sw_steps .swiper-slide { width: 72%; }
  #section_steps .pf_sw_ledgers { padding-bottom: calc(40 * var(--u)); }
  #section_steps .pf_sw_ledgers .swiper-slide { width: 86%; height: auto; transform: none; }
  #section_steps .pf_sw .swiper-slide:not(.swiper-slide-active) { opacity: .5; transition: opacity .4s; }
}