/* section_profit 뒷부분 — 「홍보용 손익」 뒤집기 → 유일한 브랜드(교육·대신 작성·피드백) → 왜? → 실제 손익계산서 2장
   값은 1600 디자인 px (calc(N * var(--u))) */
:root {
  --pl-paper: #f4efe6;          /* 장부 종이 */
  --pl-mute: #a9a29a;           /* 어두운 바탕 위 보조 글씨 */
  --pl-rule: #3a3431;           /* 어두운 바탕 위 선 */
  --pl-wait: #b5ada3;           /* 자료 대기 칸 */
  --pl-gap: calc(170 * var(--u));
  --pl-ink: #1c1715;            /* 밝은 바탕 위 글씨 */
  --pl-ink-mute: #6b6661;
  --pl-card: #fff;              /* 한지 바탕 위 카드 */
  --pl-card-line: #d9d1c4;
  --pl-band-h: calc(96 * var(--u));
  --pl-band-tilt: -3deg;
  --pl-off: .4;                 /* 꺼진 카드 (레퍼 .4) */
  --pl-on-t: .5s;
  --pl-cycle: 2.8s;             /* 카드 순환 간격 = sec_d.js PF.CYCLE_MS */
}
.pf_top { position: relative; }
/* 「홍보용」 도장: 어두워진 그래프 박스 한가운데에 크게 */
.pf_tag { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; padding: calc(10 * var(--u)) calc(56 * var(--u)); border: calc(10 * var(--u)) double var(--red-hero); color: var(--red-hero); font-size: calc(150 * var(--u)); line-height: 1.15; font-weight: 900; letter-spacing: .06em; white-space: nowrap; rotate: -10deg; pointer-events: none; }

/* 경계 띠: 어두운 섹션 끝과 한지 섹션 머리에 걸쳐 기울어짐 */
.pf_band { position: relative; z-index: 6; height: 0; max-width: var(--max); margin: 0 auto; overflow-x: clip; }
.pf_band_in { position: absolute; left: -5%; top: calc(var(--pl-band-h) / -2); width: 110%; height: var(--pl-band-h); display: flex; align-items: center; overflow: hidden; background: #f1eee8; rotate: var(--pl-band-tilt); box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .25); }
.pf_band_track { display: flex; width: max-content; animation: marquee var(--dur, 40s) linear infinite reverse; }
.pf_band_item { display: flex; align-items: center; gap: calc(34 * var(--u)); padding-right: calc(34 * var(--u)); color: var(--red); font-size: calc(40 * var(--u)); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.pf_band_item b { font-weight: 900; }
.pf_band_item span { font-weight: 600; color: var(--pl-ink); }
.pf_band_item img { width: auto; max-width: none; height: calc(46 * var(--u)); }
.pf_band_item img.logo { height: calc(50 * var(--u)); }
#section_profit { padding-bottom: calc(200 * var(--u)); }

#section_steps .pf_wrap { margin-top: calc(120 * var(--cu)); }
#section_steps .pf_real { color: #fff; }
#section_steps .pf_real > .tit em { color: var(--shine-gold); }
#section_steps .pf_note { margin-top: calc(60 * var(--u)); text-align: center; color: rgba(255, 255, 255, .6); }

.pf_flip, .pf_only, .pf_why, .pf_real { margin-top: var(--pl-gap); color: var(--pl-ink); text-align: center; letter-spacing: -.035em; }
.pf_flip .k, .pf_only .k { font-size: calc(28 * var(--u)); font-weight: 600; color: var(--pl-mute); }
.pf_only .k { font-size: calc(40 * var(--u)); font-weight: 800; color: var(--pl-ink); }
.pf_flip { color: #fff; }
.pf_flip .tit { margin-top: calc(18 * var(--u)); font-size: calc(64 * var(--u)); line-height: 1.28; font-weight: 800; }
.pf_flip em { font-style: normal; color: var(--red-hero); }
.pf_only em, .pf_real em { font-style: normal; color: var(--red); }

/* 3단계 섹션: 레퍼 코코스키 section06 「주점 창업 브랜딩 시대」 실측(1920 → 1600 = ×.833)
   --cu = 레퍼 1px(화면/1920, 최대 1px) — 레퍼 px 값을 그대로 씀
   빨간 무늬 바탕 · 한 줄 제목(흰 + 붓글씨 강조) · 588×706 사진 3칸 붙임(1764/1920) · 검은 막 .6 · 글 왼쪽 70/아래 90
   켜지면(시간 순환·호버) 막 대신 아래에서 색이 30%까지 올라오고 테두리 2px, 글 2px 이동 (레퍼 0.5s) */
#section_steps { --cu: min(1px, 100vw / 1920); --bk-va: -.24em; --pl-slide-fade: .8s; --steps-dim: rgba(52, 4, 8, .88); padding: calc(220 * var(--cu)) 0 calc(110 * var(--cu)); background: var(--red); color: #fff; }   /* 10-16 「배경 정신없다」: 무늬 걷고 단색 + 카드 덮개를 팥색 하나로 통일 */
#section_steps .pf_only { margin-top: 0; color: #fff; }
#section_steps .pf_only .k { font-size: calc(60 * var(--cu)); line-height: 1.2; font-weight: 800; letter-spacing: -.05em; color: #fff; }
#section_steps .pf_only .k em, #section_steps .pf_only .tit em { font-style: normal; color: var(--shine-gold); }
#section_steps .pf_only em .bk { display: inline-block; height: 1.2em; width: auto; aspect-ratio: var(--ar); vertical-align: var(--bk-va); }   /* 산돌 광야 SVG (붓 폰트 금지 10-14) */
#section_steps .pf_only .tit { margin-top: calc(84 * var(--cu)); font-size: calc(76 * var(--cu)); color: #fff; }
/* 「현 시장 유일한 브랜드」 = 수상 배지(레퍼 두찜 금색 월계관 1위·한촌 「단 하나」): 양옆 금색 월계관이 아래부터 잎을 틔우며 감쌈 */
#section_steps .tit.uniq { display: flex; align-items: center; justify-content: center; gap: calc(30 * var(--cu)); margin-top: calc(70 * var(--cu)); font-size: calc(80 * var(--cu)); }   /* 10-16 1안(레퍼 한촌설렁탕 U-04): 명판 없이 카드 바로 밑 같은 바탕에 월계관 + 두 줄 결론 */
.uq_t { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--cu)); }
.uq_t small { font-size: .36em; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; color: rgba(255, 255, 255, .85); }
.uq_m { display: flex; align-items: center; line-height: 1.1; }
.uq_m em { margin-left: .28em; }
.laurel { flex: none; width: auto; height: 2.3em; color: var(--shine-gold); }
.laurel.r { scale: -1 1; }
.laurel .lf { transform-box: fill-box; transform-origin: 0 0; }
.pf_steps { display: grid; grid-template-columns: repeat(3, calc(588 * var(--cu))); justify-content: center; margin-top: calc(50 * var(--cu)); list-style: none; }
.pf_steps li { position: relative; height: calc(706 * var(--cu)); overflow: hidden; background: var(--bg) center / cover no-repeat; color: #fff; text-align: left; }
.pf_steps li:nth-child(1) { --bg: url(../img/s_step1.jpg); background-position: 62% center; }
.pf_steps li::before { content: ''; position: absolute; inset: 0; background: var(--steps-dim); transition: background var(--pl-on-t); }
.pf_steps li > * { position: absolute; left: calc(70 * var(--cu)); transition: translate var(--pl-on-t); }
.pf_steps .no, .pf_steps i { display: none; }
/* 02·03: 자료 여러 장이 겹쳐 넘어감(손익계산표 2장 / 사장님 대화 9장) — 막(::before)은 그 위, 글은 맨 위 */
.pf_steps li.has_slides::before { z-index: 1; }
.pf_steps li.has_slides > b, .pf_steps li.has_slides > p { z-index: 2; }
.pf_steps .pf_slides { inset: 0; left: 0; z-index: 0; translate: none !important; }
.pf_steps .pf_slides img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; opacity: 0; transition: opacity var(--pl-slide-fade); }
.pf_steps .pf_slides img.on { opacity: 1; }
.pf_steps.pf_cycle > li.has_slides.on::before { background: linear-gradient(0deg, var(--red-hero) 0%, rgba(242, 51, 59, 0) 30%), var(--steps-dim); }   /* 흰 자료 위라 켜져도 막 유지 */
.pf_steps b { bottom: calc(154 * var(--cu)); font-size: calc(34 * var(--cu)); line-height: 1.2; font-weight: 700; letter-spacing: -.05em; }
.pf_steps p { bottom: calc(90 * var(--cu)); font-size: calc(18 * var(--cu)); line-height: 1.5; font-weight: 500; letter-spacing: -.05em; color: #fff; }
.pf_steps.pf_cycle > li { opacity: 1; translate: none; box-shadow: none; border: 2px solid transparent; transition: border-color var(--pl-on-t); }
.pf_steps.pf_cycle > li.on { z-index: 1; translate: none; box-shadow: none; border-color: var(--shine-gold); }
.pf_steps.pf_cycle > li.on::before { background: linear-gradient(0deg, var(--red-hero) 0%, rgba(242, 51, 59, 0) 30%); }
.pf_steps.pf_cycle > li.on > * { translate: calc(-2 * var(--cu)) calc(-2 * var(--cu)); }
.pf_steps.pf_cycle > li.on b { background: none; color: #fff; }
.pf_only .tit { margin-top: calc(56 * var(--u)); font-size: calc(84 * var(--u)); line-height: 1.1; font-weight: 900; }


.pf_real .tit { font-size: calc(40 * var(--u)); font-weight: 800; }

/* 차례로 켜지는 카드 (레퍼 코코스키 section08: 한 칸만 켜짐·나머지 .4, 제목에 형광 박스, 0.5s 전환 / 2초+0.8초마다 다음 칸, 호버하면 그 칸으로) */
.pf_cycle > li { opacity: var(--pl-off); transition: opacity var(--pl-on-t), translate var(--pl-on-t), border-color var(--pl-on-t), box-shadow var(--pl-on-t); }
.pf_cycle > li.on { opacity: 1; translate: 0 calc(-10 * var(--u)); border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 calc(22 * var(--u)) calc(44 * var(--u)) rgba(193, 0, 15, .16); }
.pf_cycle b { transition: background-color var(--pl-on-t), color var(--pl-on-t); }
.pf_cycle > li.on b { background-color: var(--red); color: #fff; }


/* 왜?: 레퍼 코코스키 section04 아래 카드 2장(680×480, 간격 40, 안쪽 72) — 가운데 두 줄 제목 60/70
   왼쪽 = 사진 위 짙은 갈색 막 / 오른쪽 = 빨간 바탕 + 오른쪽 아래로 나온 음식 누끼 + 김(레퍼 smoke 3s) */
.pf_why { --cu: min(1px, 100vw / 1920); text-align: center; }
/* 「잠깐!」: 빨강 바탕 안에서 먹색 박스로 끊음 — 금색 2중 테두리(3단계 켜짐 테두리·홍보용 도장 2중선과 같은 장치) + 위 테두리에 걸친 기울어진 금색 꼬리표 */
.pf_why { --why-line: var(--shine-gold); position: relative; width: fit-content; margin: 0 auto; padding: calc(270 * var(--cu)) calc(70 * var(--cu)) calc(70 * var(--cu)); background: var(--pl-ink); border: 2px solid var(--why-line); outline: 1px solid var(--why-line); outline-offset: calc(-16 * var(--cu)); color: #fff; box-shadow: 0 calc(30 * var(--cu)) calc(60 * var(--cu)) rgba(40, 0, 0, .45); }
.why_tag { position: absolute; left: 50%; top: calc(46 * var(--cu)); z-index: 2; height: calc(150 * var(--cu)); translate: -50% 0; rotate: -6deg; color: var(--red-hero); pointer-events: none; }   /* 시안 도장B: 광야 SVG 「잠깐!」 + 금색 밑줄 */
.why_tag svg { display: block; width: auto; height: 100%; }
.why_tag::after { content: ''; position: absolute; left: 4%; right: 6%; bottom: calc(-8 * var(--cu)); height: calc(11 * var(--cu)); border-radius: 99px; rotate: -2deg; background: var(--why-line); }
.why_card .nw, .pf_why .tit .nw { white-space: nowrap; }
.pf_why .tit small { display: block; margin-bottom: calc(10 * var(--cu)); font-size: .55em; line-height: 1.3; font-weight: 700; color: rgba(255, 255, 255, .75); }   /* 「왜 본사들은」 작게 → 본 질문 크게 */
.pf_why .tit { margin-top: 0; font-size: calc(60 * var(--cu)); line-height: calc(70 * var(--cu)); font-weight: 800; letter-spacing: -.05em; }
.why_cards { display: flex; justify-content: space-between; width: calc(1400 * var(--cu)); margin: calc(70 * var(--cu)) auto 0; text-align: left; }
.why_card { position: relative; width: calc(680 * var(--cu)); height: calc(480 * var(--cu)); padding: calc(72 * var(--cu)); overflow: hidden; color: #fff; letter-spacing: -.05em; }
.why_card .ct { position: relative; z-index: 1; font-size: calc(40 * var(--cu)); line-height: 1.1; font-weight: 700; }
.why_card .cd { position: relative; z-index: 1; margin-top: calc(20 * var(--cu)); font-size: calc(18 * var(--cu)); line-height: calc(28 * var(--cu)); font-weight: 400; }
.why_a { background: linear-gradient(90deg, rgba(58, 30, 12, .94) 0%, rgba(58, 30, 12, .8) 55%, rgba(58, 30, 12, .55) 100%), url(../img/s04_2.jpg) center / cover no-repeat; }
.why_b { background: var(--red); }
.why_food { position: absolute; right: calc(-60 * var(--cu)); bottom: calc(-90 * var(--cu)); width: calc(400 * var(--cu)); }
.why_food .food { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(20 * var(--cu)) calc(30 * var(--cu)) rgba(0, 0, 0, .35)); }
.why_food .smoke { position: absolute; bottom: 72%; left: var(--x); width: calc(70 * var(--cu)); height: calc(150 * var(--cu)); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent); filter: blur(calc(10 * var(--cu))); opacity: 0; animation: whySmoke 3s ease-out infinite; animation-delay: var(--d); }
.why_food .smoke:nth-child(2) { --x: 28%; --d: 0s; }
.why_food .smoke:nth-child(3) { --x: 46%; --d: 1s; }
.why_food .smoke:nth-child(4) { --x: 62%; --d: 2s; }
@keyframes whySmoke { 0% { opacity: 0; translate: 0 0; scale: .7 .7; } 30% { opacity: 1; } 100% { opacity: 0; translate: calc(12 * var(--cu)) calc(-110 * var(--cu)); scale: 1.2 1.3; } }
@media (prefers-reduced-motion: reduce) { .why_food .smoke { animation: none; } }

@media (max-width: 768px) {
  #section_steps { padding: calc(190 * var(--u)) 0 calc(120 * var(--u)); }
  #section_steps .pf_only .k { font-size: calc(58 * var(--u)); }
  #section_steps .pf_only .tit { font-size: calc(66 * var(--u)); }
  #section_steps .tit.uniq { gap: calc(10 * var(--u)); margin-top: calc(60 * var(--u)); font-size: calc(50 * var(--u)); }
  .uq_t small { font-size: .5em; }
  .laurel { height: 2.6em; }
  .pf_why { width: 100%; padding: calc(240 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u)); outline-offset: calc(-12 * var(--u)); }
  .why_tag { top: calc(40 * var(--u)); height: calc(130 * var(--u)); }
  .why_tag::after { height: calc(10 * var(--u)); bottom: calc(-8 * var(--u)); }
  #section_steps .pf_wrap { margin-top: calc(150 * var(--u)); }
  .pf_why .tit { margin-top: calc(10 * var(--u)); font-size: calc(54 * var(--u)); line-height: 1.3; }
  .why_cards { flex-direction: column; gap: calc(30 * var(--u)); width: 100%; margin-top: calc(60 * var(--u)); }
  .why_card { width: 100%; height: calc(520 * var(--u)); padding: calc(60 * var(--u)); }
  .why_card .ct { font-size: calc(48 * var(--u)); }
  .why_card .cd { margin-top: calc(20 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.6; }
  .why_food { width: calc(380 * var(--u)); right: calc(-40 * var(--u)); bottom: calc(-80 * var(--u)); }
  .pf_steps { grid-template-columns: 79%; gap: calc(30 * var(--u)); margin-top: calc(60 * var(--u)); }   /* 레퍼 모바일 309×378 = 폭 79% */
  .pf_steps li { height: auto; aspect-ratio: 588 / 706; }
  .pf_steps li > * { left: calc(86 * var(--u)); }
  .pf_steps b { bottom: calc(250 * var(--u)); font-size: calc(38 * var(--u)); }
  .pf_steps p { bottom: calc(160 * var(--u)); font-size: calc(26 * var(--u)); }
  :root { --pl-gap: calc(150 * var(--u)); }
  .pf_tag { font-size: calc(110 * var(--u)); padding: calc(8 * var(--u)) calc(40 * var(--u)); border-width: calc(8 * var(--u)); }
  :root { --pl-band-h: calc(84 * var(--u)); --pl-band-tilt: -4deg; }
  .pf_band_item { font-size: calc(36 * var(--u)); }
  .pf_band_item img { height: calc(42 * var(--u)); }
  .pf_flip .k { font-size: calc(30 * var(--u)); }
  .pf_flip .tit { font-size: calc(54 * var(--u)); }
  .pf_only .tit { font-size: calc(76 * var(--u)); }
  .pf_real .tit { font-size: calc(34 * var(--u)); }
}