/* ═══════════════════════════════════════════════════════════════════════════
   KY MOTORS — cases.css · 정비사례 (v4.1.0 · 2026-09-22 인터랙션 시안)
   카드 → 모달 FLIP(520/420ms) · 읽은 정도 막대 · 이전/다음 · 글 끝 CTA · 지금 작업 중 한 줄 교체
   ═══════════════════════════════════════════════════════════════════════════ */
.cs{ padding:calc(var(--hd) + 40px) 0 clamp(72px,9vw,120px); background:var(--surface); }
.cs-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:28px; }
.cs-h{ margin:14px 0 0; font-size:clamp(28px,3.6vw,44px); font-weight:500; letter-spacing:-.04em; line-height:1.2; }
.cs-sub{ margin:10px 0 0; font-size:14px; line-height:1.8; color:var(--n5); max-width:52ch; }

/* ── 지금 작업 중 — 어두운 알약, 한 줄 2.5초 교체 ── */
.cs-live{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius);
  background:var(--n9); color:var(--n0); font-size:13px; max-width:100%; min-width:0; overflow:hidden;
}
.cs-live__dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--success); animation:kyPulse 1.6s ease-in-out infinite; }
.cs-live.is-empty .cs-live__dot{ background:var(--n4); animation:none; }
.cs-live__tag{ flex:none; color:var(--n3); white-space:nowrap; }
.cs-live__stage{ position:relative; min-width:0; flex:1 1 auto; min-height:1.5em; display:block; }
.cs-live__line{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  opacity:0; transform:translateY(10px); transition:opacity 300ms var(--ease),transform 300ms var(--ease);
}
.cs-live__line.is-on{ opacity:1; transform:none; }
.cs-live__line.is-out{ position:absolute; left:0; top:0; opacity:0; transform:translateY(-10px); }
.cs-live__model{ font-weight:600; }
.cs-live__bay{ font-family:var(--meta); font-size:11px; letter-spacing:.12em; padding:3px 7px; border-radius:2px; background:#ffffff1a; }
.cs-live__work{ color:var(--n3); overflow:hidden; text-overflow:ellipsis; }
.cs-live__st{ font-family:var(--meta); font-size:10px; font-weight:600; letter-spacing:.1em; padding:3px 7px; border-radius:2px; background:#ffffff1a; white-space:nowrap; }
.cs-live__st.is-working{ background:var(--red); }
.cs-live__st.is-parts{ background:#c3a87833; color:#f0d9a6; }
.cs-live__st.is-pickup{ background:#83b99b33; color:#a9d8bb; }
.cs-live__count{ flex:none; font-family:var(--meta); font-size:11px; letter-spacing:.08em; color:var(--n3); white-space:nowrap; }
@media (max-width:719px){
  .cs-live{ width:100%; flex-wrap:wrap; }
  .cs-live__stage{ flex-basis:100%; min-height:2em; }
  .cs-live__line{ white-space:normal; flex-wrap:wrap; row-gap:4px; overflow:visible; }
  .cs-live__count{ display:none; }
}

.cs-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px; font-family:var(--meta); font-size:11px; letter-spacing:.1em; color:var(--n5); }
.cs-hint{ font-family:var(--font); letter-spacing:0; font-size:12px; color:var(--n4); }

/* ── 카드 격자 ── */
.cs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.cs-grid > *{ min-width:0; }
.cs-card{
  display:block; width:100%; text-align:left; padding:0; cursor:pointer; color:inherit;
  border:1px solid var(--n2); border-radius:var(--radius); overflow:hidden; background:#fff;
}
.cs-card.is-hold{ opacity:0; }
.cs-card__ph{ aspect-ratio:4/3; overflow:hidden; background:var(--n7); position:relative; }
.cs-card__ph img,.cs-card__ph .cs-card__none{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-card__none{ background:repeating-linear-gradient(135deg,var(--n7) 0 12px,#3a3d39 12px 24px); display:flex; align-items:flex-end; padding:12px; color:var(--n3); font-family:var(--meta); font-size:11px; letter-spacing:.08em; }
.cs-card__t{ padding:16px 18px 18px; }
.cs-card__k{ font-family:var(--meta); font-size:10px; font-weight:600; letter-spacing:.12em; color:var(--red); margin-bottom:8px; }
.cs-card__h{ font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cs-card__b{ margin-top:8px; font-size:13px; color:var(--n5); }
.cs-card__x{ margin-top:6px; font-size:13px; line-height:1.6; color:var(--n5); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cs-sk{ border:1px solid var(--n2); border-radius:var(--radius); padding:0 0 18px; overflow:hidden; }
.cs-sk__p{ display:block; aspect-ratio:4/3; border-radius:0; }
.cs-sk__t{ display:block; height:14px; width:80%; margin:16px 18px 0; }
.cs-sk__s{ display:block; height:10px; width:50%; margin:10px 18px 0; }

/* ── 모달 — FLIP: 최종 위치에 두고 transform 으로 카드 자리에서 시작 ── */
.cs-veil{ position:fixed; inset:0; z-index:110; background:#0e111099; opacity:0; transition:opacity 520ms ease-out; }
.cs-veil.is-on{ opacity:1; }
.cs-veil.is-closing{ transition-duration:420ms; }
.cs-art{
  position:fixed; z-index:111; left:50%; top:5vh; width:min(760px,calc(100vw - 32px)); height:90vh;
  margin-left:max(-380px,calc(-50vw + 16px)); background:var(--n0); border-radius:var(--radius-lg);
  box-shadow:var(--float-shadow); overflow:hidden; display:flex; flex-direction:column;
  transform-origin:top left; will-change:transform;
  transition:transform 520ms var(--ease),opacity 520ms ease-out;
}
.cs-art.is-closing{ transition-duration:420ms; }
.cs-art.no-trans{ transition:none !important; }
.cs-art__read{ height:3px; background:var(--n1); flex:none; }
.cs-art__read i{ display:block; height:100%; width:0; background:var(--red); transition:width 120ms linear; }
.cs-art__bar{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; flex:none; border-bottom:1px solid var(--n1); }
.cs-art__idx{ font-family:var(--meta); font-size:12px; font-weight:500; color:var(--n5); }
.cs-art__btns{ display:flex; gap:8px; }
.cs-art__nb{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--n9); background:transparent; color:var(--n9); font-size:16px;
  display:inline-flex; align-items:center; justify-content:center; transition:background var(--t),color var(--t),opacity var(--t);
}
.cs-art__nb:hover{ background:var(--n9); color:var(--n0); }
.cs-art__nb:disabled{ opacity:.3; cursor:default; }
.cs-art__nb:disabled:hover{ background:transparent; color:var(--n9); }
.cs-art__x{ border:0; background:var(--n9); color:var(--n0); }
.cs-art__x:hover{ background:var(--n7); }
.cs-art__body{ flex:1; overflow:auto; padding:32px 40px 48px; -webkit-overflow-scrolling:touch; transition:opacity 200ms ease-out; }
.cs-art__body.is-dim{ opacity:0; }
.cs-art__kicker{ font-family:var(--meta); font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--red); margin:0 0 12px; }
.cs-art__h{ margin:0 0 10px; font-size:clamp(24px,3vw,32px); font-weight:500; letter-spacing:-.04em; line-height:1.25; }
.cs-art__by{ font-size:13px; color:var(--n5); margin:0 0 28px; display:flex; gap:10px; flex-wrap:wrap; }
.cs-art__by b{ color:var(--n9); font-weight:600; }
.cs-art__blocks{ font-size:16px; line-height:1.9; color:var(--n7); max-width:64ch; }
.cs-art__blocks h3{ font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.4; margin:34px 0 10px; color:var(--n9); }
.cs-art__blocks p{ margin:0 0 18px; }
.cs-art__blocks b{ font-weight:700; color:var(--n9); }
.cs-art__blocks ul,.cs-art__blocks ol{ margin:0 0 18px; padding-left:24px; list-style:revert; }
.cs-art__blocks li{ margin:4px 0; }
.cs-art__blocks hr{ border:0; border-top:1px solid var(--n2); margin:30px 0; }
.cs-art__blocks figure{ margin:8px 0 24px; }
.cs-art__blocks figure img{ display:block; width:100%; height:auto; border-radius:var(--radius); background:var(--n1); cursor:zoom-in; }
.cs-art__blocks figcaption{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--n4); }
.cs-cta{
  margin-top:40px; padding:28px; border-radius:var(--radius); background:var(--n9); color:var(--n0);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.cs-cta__lab{ font-family:var(--meta); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--red-light); margin-bottom:10px; }
.cs-cta__h{ font-size:20px; font-weight:500; letter-spacing:-.03em; line-height:1.3; }
@media (max-width:640px){
  .cs-art{ left:0; top:0; width:100vw; height:100dvh; margin-left:0; border-radius:0; }
  .cs-art__body{ padding:24px 20px 40px; }
  .cs-art__blocks{ font-size:15px; }
}
.cs-empty-wrap{ grid-column:1 / -1; }

@media (prefers-reduced-motion:reduce){
  .cs-live__dot{ animation:none; }
  .cs-live__line{ transition:none; }
  .cs-art,.cs-veil,.cs-art__body{ transition:opacity 150ms ease-out; }
}