/* 모션P C줄 C4 장면 — eco-motion-explain.php 가 부른다(#1516). 원본 시험본: _teams/4팀_템플릿/모션P/C4_애드센스.html · 박자표 C_박자표_1007.md */
/* ── C4 장면 ── */
.cmo-c4{margin:clamp(48px,5vw,72px) 0 0}   /* /애드센스대행/ 02 구역 두 칸 아래 — 왼쪽 정렬 */
.c4-top{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;align-items:stretch}
.c4-pan{border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:14px;align-content:start}
.c4-pan.r{background:var(--paper)}
.c4-ph{display:grid;gap:4px}
.c4-ph span{font-size:12px;font-weight:650;letter-spacing:.06em;color:var(--muted)}
.c4-ph strong{font-size:18px;font-weight:650}
.c4-cells{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c4-cell{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--white);padding:12px 12px 12px;display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-content:start}
.c4-cell .n{font-size:12px;font-weight:700;color:var(--muted);grid-row:span 3;padding-top:2px}
.c4-cell strong{font-size:15px;font-weight:650}
.c4-cell .d{font-size:13px;color:var(--muted)}
.c4-cell .st{justify-self:start;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:2px 8px;color:var(--green);background:#e6f2ec}
.c4-cell .st.chk{color:var(--blue);background:var(--soft)}
.c4-hole{position:absolute;inset:-1px;border:1.5px dashed var(--blue);border-radius:10px;background:var(--white);opacity:0;pointer-events:none}
.c4-slot{position:relative;border:1.5px dashed var(--line);border-radius:10px;min-height:96px}
.c4-prog{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.c4-prog i{display:block;height:100%;background:var(--blue);transform-origin:0 50%}
.c4-fly{position:absolute;left:0;top:0;z-index:3;border-color:var(--blue);opacity:0;pointer-events:none}
.c4-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.c4-step{display:grid;gap:8px;align-content:start}
.c4-sb{position:relative;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.c4-sb i{position:absolute;inset:0;background:var(--blue);transform-origin:0 50%}
.c4-step span{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.c4-step strong{font-size:15px;font-weight:650;color:var(--ink);transition:none}
.c4-note{margin-top:20px;font-size:13px;color:var(--muted)}
@container (max-width:639px){
  .c4-top{grid-template-columns:1fr;gap:14px}
  .c4-pan{padding:12px;gap:10px;border-radius:12px}
  .c4-ph strong{font-size:16px}
  .c4-cells{gap:8px}
  .c4-cell{padding:10px;grid-template-columns:1fr;gap:2px}
  .c4-cell .n{grid-row:auto;padding-top:0}
  .c4-cell strong{font-size:14px}
  .c4-cell .d{font-size:12px}
  .c4-slot{min-height:84px}
  .c4-steps{grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:18px}
  .c4-step strong{font-size:14px}
  .c4-note{margin-top:16px;font-size:12px}
}