/* section_cook — 4분 완성 타임라인 (s_cook.js 가 스크롤에 맞춰 --ck(0→1) 을 올림)
   PC: 가로 막대 + 점 4개 / 모바일: 세로 막대 왼쪽, 단계는 오른쪽 */
#section_cook {
  --ck: 0;
  --ck-dot: calc(92 * var(--u));
  --ck-line: calc(4 * var(--u));
  --ck-dim: rgba(255, 255, 255, .18);
  padding: calc(160 * var(--u)) 0 calc(170 * var(--u));
}
#section_cook .sec_txt .slogan, #section_cook .sec_txt .desc { color: #fff; }
#section_cook .sec_txt .title { color: var(--red-hero); }

.ck_wrap { position: relative; width: calc(1240 * var(--u)); margin: calc(90 * var(--u)) auto 0; }
.ck_clock { text-align: center; font-size: calc(150 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.ck_track { position: relative; margin-top: calc(70 * var(--u)); }
.ck_line { position: absolute; background: var(--ck-dim); }   /* 첫 점 중심 → 끝 점 중심: 위치·길이는 s_cook.js 가 잼 */
.ck_fill { position: absolute; inset: 0; background: var(--red-hero); transform-origin: left center; scale: var(--ck) 1; }

.ck_steps { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; list-style: none; padding: 0; }
.ck_steps li { position: relative; z-index: 1; padding: 0 calc(16 * var(--u)); }
.ck_dot { display: grid; place-items: center; width: var(--ck-dot); height: var(--ck-dot); margin: 0 auto; border-radius: 50%; background: #1b1715; border: var(--ck-line) solid var(--ck-dim); color: rgba(255, 255, 255, .55); font-size: calc(40 * var(--u)); transition: background .4s ease, border-color .4s ease, color .4s ease; }
.ck_steps li.on .ck_dot { background: var(--red-hero); border-color: var(--red-hero); color: #fff; }
.ck_steps em { display: block; margin-top: calc(22 * var(--u)); font-style: normal; font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: .06em; color: var(--red-hero); font-variant-numeric: tabular-nums; }
.ck_steps b { display: block; margin-top: calc(6 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.ck_steps p { margin-top: calc(12 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.55; color: rgba(255, 255, 255, .62); }

@media (max-width: 768px) {
  #section_cook { --ck-dot: calc(96 * var(--u)); --ck-line: calc(5 * var(--u)); padding: calc(150 * var(--u)) 0 calc(160 * var(--u)); }
  .ck_wrap { width: calc(620 * var(--u)); margin-top: calc(80 * var(--u)); }
  .ck_clock { font-size: calc(170 * var(--u)); }
  .ck_fill { transform-origin: center top; scale: 1 var(--ck); }
  .ck_steps { grid-template-columns: 1fr; row-gap: calc(56 * var(--u)); text-align: left; }
  .ck_steps li { display: grid; grid-template-columns: var(--ck-dot) 1fr; column-gap: calc(34 * var(--u)); padding: 0; }
  .ck_dot { grid-row: 1 / span 3; margin: 0; font-size: calc(42 * var(--u)); }
  .ck_steps em { margin-top: calc(4 * var(--u)); font-size: calc(24 * var(--u)); }
  .ck_steps em.blank { display: none; }
  .ck_steps b { font-size: calc(38 * var(--u)); }
  .ck_steps p { font-size: calc(26 * var(--u)); }
}

/* ---------- 뒤에 깔리는 3D 스톱워치 (10-15) — 바늘·빨간 호·기울기 모두 --ck(0→1)를 따라감 ---------- */
#section_cook { --ck3-size: calc(1320 * var(--u)); --ck3-depth: calc(9 * var(--u)); --ck3-alpha: .08; position: relative; }
#section_cook > .sec_txt, #section_cook > .ck_wrap { position: relative; z-index: 1; }
.ck_3d { position: absolute; z-index: 0; left: 50%; top: 52%; width: var(--ck3-size); aspect-ratio: 1; translate: -50% -50%; perspective: calc(2600 * var(--u)); opacity: var(--ck3-alpha); pointer-events: none; }
.ck_3d_rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(14deg - var(--ck) * 6deg)) rotateY(calc(-26deg + var(--ck) * 42deg)); }
.ck_3d_rig > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ck_3d_slab { border-radius: 50%; border: calc(26 * var(--u)) solid #fff; transform: translateZ(calc(var(--i) * var(--ck3-depth) * -1)); opacity: .55; }   /* 테 두께 = 테 고리 여러 장 */
.ck_3d_face { transform: translateZ(0); overflow: visible; }
.ck_3d_arc { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ck)); }
.ck_3d_hand { transform: translateZ(calc(40 * var(--u))) rotate(calc(var(--ck) * 1turn)); }
.ck_3d_sec { transform: translateZ(calc(24 * var(--u))) rotate(calc(var(--ck) * 4turn)); }
@media (max-width: 768px) {
  #section_cook { --ck3-size: calc(980 * var(--u)); --ck3-alpha: .07; }
  .ck_3d { top: 60%; }
}
.ck_dust { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }   /* s_cook_dust.js */