/* 실제 손익계산서 2장 — 요약(매출→잔여) · 매출 쓰임 막대 · 구분별 세부 내역 · 잔여 줄
   값은 1600 디자인 px (calc(N * var(--u))) */
:root {
  --lg-c1: #1c1715;             /* 식자재 */
  --lg-c2: #6b6661;             /* 플랫폼 */
  --lg-c3: #a9a29a;             /* 인건비 */
  --lg-c4: #d6cdbf;             /* 고정·운영비 */
  --lg-line: #e6dfd4;
  --lg-pad: calc(44 * var(--u));
  --lg-bar-h: calc(22 * var(--u));
}
.pf_ledgers { display: grid; align-items: start; grid-template-columns: 1fr 1fr; gap: calc(36 * var(--u)); margin-top: calc(50 * var(--u)); text-align: left; }
.pf_ledger { display: flex; flex-direction: column; padding: var(--lg-pad); border-top: calc(6 * var(--u)) solid var(--red); background: var(--pl-card); color: var(--pl-ink); box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(60, 40, 20, .12); }
.pf_ledger header { display: flex; align-items: baseline; justify-content: space-between; }
.pf_ledger .kind { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 800; letter-spacing: -.04em; }
.pf_ledger .kind i { color: var(--red); }
.pf_ledger .meta { font-size: calc(15 * var(--u)); color: var(--pl-ink-mute); }

/* 요약: 월 매출 → 잔여액 */
.pl_sum { display: flex; align-items: flex-end; gap: calc(22 * var(--u)); margin-top: calc(30 * var(--u)); padding-bottom: calc(26 * var(--u)); border-bottom: 1px solid var(--lg-line); }
.pl_sum p { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.pl_sum span { font-size: calc(15 * var(--u)); font-weight: 600; color: var(--pl-ink-mute); }
.pl_sum .sales b { font-size: calc(26 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.pl_sum > i { margin-bottom: calc(6 * var(--u)); font-size: calc(26 * var(--u)); color: var(--pl-ink-mute); }
.pl_sum .net { margin-left: auto; text-align: right; }
.pl_sum .net b { font-size: calc(46 * var(--u)); line-height: 1; font-weight: 900; letter-spacing: -.03em; color: var(--red); font-variant-numeric: tabular-nums; }
.pl_sum .net em { font-style: normal; color: inherit; }
.pl_sum small { font-size: calc(15 * var(--u)); font-weight: 700; color: var(--red); }

/* 매출이 어디로 가는지: 막대 한 줄 + 범례 */
.pl_bar { display: flex; height: var(--lg-bar-h); margin-top: calc(26 * var(--u)); overflow: hidden; background: var(--lg-line); }
.pl_bar span { flex: 0 0 var(--w); transform-origin: left; }
.pl_bar span + span { border-left: 2px solid var(--pl-card); }
.pf_ledger .c1 { background: var(--lg-c1); }
.pf_ledger .c2 { background: var(--lg-c2); }
.pf_ledger .c3 { background: var(--lg-c3); }
.pf_ledger .c4 { background: var(--lg-c4); }
.pf_ledger .cn { background: var(--red); }
.pl_legend { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(18 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(14 * var(--u)); color: var(--pl-ink-mute); list-style: none; }
.pl_legend li { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.pl_legend i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.pl_legend b { font-weight: 700; color: var(--pl-ink); }

/* 세부 내역: 구분 머리줄에 합계, 항목은 작게 */
.pl_detail { width: 100%; margin-top: calc(22 * var(--u)); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pl_detail th { text-align: left; font-weight: 500; }
.pl_detail td { text-align: right; }
.pl_detail tr > * { height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); color: var(--pl-ink-mute); }
.pl_detail tbody tr:not(.gh):not(.mid) th { padding-left: calc(14 * var(--u)); }
.pl_detail .gh > * { height: calc(46 * var(--u)); padding-top: calc(10 * var(--u)); border-bottom: 1px solid var(--lg-line); font-size: calc(18 * var(--u)); font-weight: 800; color: var(--pl-ink); }
.pl_detail .mid > * { height: calc(50 * var(--u)); border-top: 1.5px solid var(--pl-ink); font-size: calc(17 * var(--u)); font-weight: 800; color: var(--pl-ink); }
.pl_detail .pct { margin-left: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: var(--pl-wait); }
.pl_detail .mid .pct { color: var(--red); }

/* 잔여 줄: 카드 맨 아래에 붙음(두 장 높이 맞춤) */
.pl_total { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: calc(16 * var(--u)) calc(20 * var(--u)); background: var(--red); color: #fff; }
.pl_detail { margin-bottom: calc(24 * var(--u)); }
.pl_total span { display: flex; align-items: baseline; gap: calc(10 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 800; }
.pl_total small { font-size: calc(14 * var(--u)); font-weight: 500; opacity: .75; }
.pl_total b { font-size: calc(26 * var(--u)); font-weight: 900; font-variant-numeric: tabular-nums; }

/* 10-15 3D: 두 장이 서로 마주 보게 기울어 서 있고(perspective), 아래에 종이 2장이 깔린 묶음 — 마우스를 따라 기울기(JS가 --rx·--ry) */
.pf_ledgers { perspective: calc(2200 * var(--u)); }
.pf_ledger { --rx: 4deg; --ry: 9deg; --sx: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-origin: right center; transition: transform .6s cubic-bezier(.23, 1, .32, 1);
  box-shadow: calc(var(--sx) * 8 * var(--u)) calc(8 * var(--u)) 0 -1px #efe9df, calc(var(--sx) * 16 * var(--u)) calc(16 * var(--u)) 0 -2px #ddd4c6, calc(var(--sx) * 30 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u)) rgba(50, 10, 0, .38); }
.pf_ledger + .pf_ledger { --ry: -9deg; --sx: -1; transform-origin: left center; }
.pf_ledger.tilting { transition-duration: .15s; }

@media (min-width: 769px) { .m_br { display: none; } }
@media (max-width: 768px) {
  .pf_ledger { --rx: 4deg; --ry: 0deg; transform-origin: center; }
  .pf_ledger + .pf_ledger { --ry: 0deg; }
  :root { --lg-pad: calc(40 * var(--u)); --lg-bar-h: calc(28 * var(--u)); }
  .pf_ledgers { grid-template-columns: 1fr; gap: calc(50 * var(--u)); }
  .pf_ledger .kind { font-size: calc(38 * var(--u)); }
  .pf_ledger .meta { font-size: calc(22 * var(--u)); }
  .pl_sum span, .pl_sum small { font-size: calc(22 * var(--u)); }
  .pl_sum .sales b { font-size: calc(30 * var(--u)); }
  .pl_sum .net b { font-size: calc(56 * var(--u)); }
  /* 카드 폭(슬라이드 86%)에 매출→잔여액 한 줄이 안 들어감: 잔여액을 아래 줄로 내림 */
  .pl_sum { flex-wrap: wrap; align-items: flex-start; row-gap: calc(24 * var(--u)); }
  .pl_sum > i { display: none; }
  .pl_sum .net { width: 100%; margin-left: 0; text-align: left; }
  .pl_legend { font-size: calc(21 * var(--u)); }
  .pl_legend i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  .pl_detail tr > * { height: calc(44 * var(--u)); font-size: calc(22 * var(--u)); }
  .pl_detail .gh > * { height: calc(64 * var(--u)); font-size: calc(26 * var(--u)); }
  .pl_detail .mid > * { height: calc(70 * var(--u)); font-size: calc(24 * var(--u)); }
  .pl_detail .pct { font-size: calc(19 * var(--u)); }
  .pl_total { padding: calc(22 * var(--u)) calc(26 * var(--u)); }
  .pl_total span { font-size: calc(28 * var(--u)); }
  .pl_total small { font-size: calc(19 * var(--u)); }
  .pl_total b { font-size: calc(34 * var(--u)); }
}