/* section05 원가 24%: 레퍼 코코스키 section05 아래 박스(얇은 테두리 상자 · 왼쪽 글 · 오른쪽 반쪽 원[색 반+사진 반] · 겹친 빨간 원가율 원)
   + 원가율 눈금 막대(0~50%, 30% 점선 = 「버틸수록 손해」) — 카피 「30% 넘으면 손해 / 24%에 맞춰 설계」를 그림으로 */
:root {
  --cost-line: rgba(255, 224, 138, .55);      /* 상자·원 테두리 (금색 --shine-gold 흐리게) */
  --cost-half: #f1eee8;                       /* 반쪽 원 왼쪽 = 한지색 */
  --cost-max: 50;                             /* 눈금 끝 % */
  --cost-me: 24;  --cost-bad: 30;
}
.cost_box { display: flex; align-items: center; justify-content: space-between; width: calc(1400 * var(--u)); margin: 0 auto; padding: calc(80 * var(--u)) calc(110 * var(--u)) calc(80 * var(--u)) calc(120 * var(--u)); border: 1px solid var(--cost-line); background: rgba(0, 0, 0, .35); }
.cost_box .sec_txt { flex: 0 0 calc(600 * var(--u)); text-align: left; }
.cost_box .sec_txt .title { font-size: calc(66 * var(--u)); line-height: 1.12; }
.cost_box .nw { white-space: nowrap; }
.cost_box .sec_txt .desc { font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); }

/* 눈금 막대 */
.cost_gauge { margin-top: calc(56 * var(--u)); }
.cg_track { position: relative; height: calc(16 * var(--u)); background: rgba(255, 255, 255, .14); }
.cg_track::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--cost-bad) / var(--cost-max) * 100%); right: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 8px); }   /* 손해 구간 빗금 */
.cg_fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cost-me) / var(--cost-max) * 100%); background: var(--red-hero); transform-origin: left; }
.cg_bad { position: absolute; top: calc(-46 * var(--u)); bottom: calc(-10 * var(--u)); left: calc(var(--cost-bad) / var(--cost-max) * 100%); border-left: 2px dashed var(--shine-gold); }
.cg_bad em { position: absolute; left: calc(10 * var(--u)); top: 0; font-style: normal; font-size: calc(16 * var(--u)); font-weight: 700; color: var(--shine-gold); white-space: nowrap; }
.cg_me { position: absolute; top: calc(100% + 12 * var(--u)); left: calc(var(--cost-me) / var(--cost-max) * 100%); translate: -50% 0; padding: calc(4 * var(--u)) calc(10 * var(--u)); background: var(--red-hero); font-size: calc(15 * var(--u)); font-weight: 800; color: #fff; white-space: nowrap; }
.cg_me::before { content: ''; position: absolute; left: 50%; bottom: 100%; translate: -50% 0; border: calc(6 * var(--u)) solid transparent; border-bottom-color: var(--red-hero); }
.cg_scale { position: relative; height: 1.2em; margin-top: calc(48 * var(--u)); list-style: none; font-size: calc(14 * var(--u)); color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }

/* 반쪽 원 + 원가율 원 */
.cost_vis { position: relative; flex: 0 0 calc(560 * var(--u)); height: calc(560 * var(--u)); margin-right: calc(150 * var(--u)); }
.cost_vis::before { content: ''; position: absolute; inset: calc(-18 * var(--u)); border: 1px solid var(--cost-line); border-radius: 50%; }
.cv_disc { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: 50%; }
.cv_half { flex: 1; display: grid; place-items: center; background: var(--cost-half); }
.cv_half img { width: 62%; height: auto; }
.cv_photo { flex: 1; background: url(../img/s_profit_bowl.jpg?v=1016) right center / 200% auto no-repeat; }
.cv_rate { position: absolute; right: calc(-150 * var(--u)); top: 50%; translate: 0 -50%; display: grid; place-content: center; width: calc(290 * var(--u)); height: calc(290 * var(--u)); border-radius: 50%; background: var(--red); color: #fff; text-align: center; letter-spacing: -.04em; box-shadow: 0 calc(20 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .4); }
.cv_rate span { font-size: calc(22 * var(--u)); font-weight: 700; }
.cv_rate b { font-size: calc(104 * var(--u)); line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.cv_rate small { font-size: .42em; }
.cv_rate::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--red-hero); border-radius: 50%; animation: costPulse 2.4s ease-out infinite; }   /* 맥박 테 */
.cg_scale li { position: absolute; left: calc((var(--i) * 10) / var(--cost-max) * 100%); translate: -50% 0; }
.cg_scale li:first-child { translate: 0; } .cg_scale li:last-child { translate: -100% 0; }
@keyframes costPulse { from { scale: 1; opacity: .9; } to { scale: 1.35; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cv_rate::after { animation: none; opacity: 0; } }

@media (max-width: 768px) {
  .cost_box { flex-direction: column; width: 92%; padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(90 * var(--u)); }
  .cost_box .sec_txt { flex: none; width: 100%; text-align: center; }
  .cost_box .sec_txt .slogan { font-size: calc(46 * var(--u)); line-height: 1.3; }
  .cost_box .sec_txt .title { font-size: calc(72 * var(--u)); }
  .cost_box .sec_txt .desc { font-size: calc(30 * var(--u)); line-height: calc(46 * var(--u)); }
  .cost_gauge { margin-top: calc(80 * var(--u)); text-align: left; }
  .cg_track { height: calc(22 * var(--u)); }
  .cg_bad { top: calc(-56 * var(--u)); }
  .cg_bad em { font-size: calc(22 * var(--u)); }
  .cg_me { font-size: calc(22 * var(--u)); }
  .cg_scale { margin-top: calc(66 * var(--u)); font-size: calc(20 * var(--u)); }
  .cost_vis { flex: none; width: calc(480 * var(--u)); height: calc(480 * var(--u)); margin: calc(90 * var(--u)) calc(120 * var(--u)) 0 0; }
  .cv_rate { right: calc(-130 * var(--u)); width: calc(250 * var(--u)); height: calc(250 * var(--u)); }
  .cv_rate span { font-size: calc(24 * var(--u)); }
  .cv_rate b { font-size: calc(92 * var(--u)); }
}