/* ===== Pipeline Scoped (no conflict) */
.pln-wrap{
  --pln-ink:#222;
  --pln-muted:#6d6d6d;
  --pln-line:#e5e5e5;
  --pln-gray:#f8f8f8;

  --pln-blue1:#0f7fd1; --pln-blue2:#37b0ff;
  --pln-green1:#3b9d2c; --pln-green2:#a7dc50;
  --pln-orange1:#f0843b; --pln-orange2:#ffa76a;

  padding: 24px 0 40px;
  background:#fff;
  color:var(--pln-ink);
  font-family: inherit;
}

/* table shell */
.pln-table{
  width:min(1200px, 95vw);
  margin:0 auto;
  border-top:2px solid var(--pln-line);
}

/* grid rows */
.pln-row{
  display:grid;
  grid-template-columns: 160px 180px 220px repeat(4, 1fr) 160px;
  align-items:stretch;
  border-bottom:1px solid var(--pln-line);
  background:#fff;
}
.pln-row:nth-child(even){ background:var(--pln-gray); }

.pln-head{
  background:#fafafa;
  font-weight:700; color:#444;
}
.pln-head .pln-cell{
  padding:14px 14px;
  font-size:14px;
  text-align:center;
}

/* cell */
.pln-cell{
  padding:18px 16px;
  border-right:1px dashed #ececec;
  display:flex; align-items:center;
}
.pln-row .pln-cell:last-child{ border-right:none; }
.pln-center{ justify-content:center; }

.pln-right{ justify-content:flex-end; }

/* left columns content */
.pln-tag{
  display:inline-block; padding:6px 10px; border-radius:20px;
  background:#f1f5ff; color:#3563ff; font-weight:700; font-size:13px;
}
.pln-target{ color:var(--pln-muted); line-height:1.4; font-size:14px; }
.pln-code{ font-weight:900; font-size:20px; letter-spacing:.2px; }
.pln-sub{ color:var(--pln-muted); font-size:13px; margin-top:2px; }

/* stages background (dotted track) */
.pln-stages{
  position:relative; overflow:visible; min-height:64px;
}
.pln-stages::before{
  content:""; position:absolute; left:16px; right:16px; top:50%; height:10px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(90deg, #ddd 0 10px, transparent 10px 22px);
  border-radius:999px;
  transform:translateY(-50%);
  opacity:.65;
}

/* bar (from/to are 1~5, but 여기선 1~4단계 컬럼 내부에서 span) */
.pln-bar{
  --from:1; --to:1;
  position:absolute; inset:0 16px; height:10px; top:50%;
  transform:translateY(-50%);
  display:grid; grid-template-columns: repeat(4, 1fr);
  align-items:center;
}
.pln-bar::before{
  content:""; grid-column: var(--from) / calc(var(--to) + 1);
  height:10px; border-radius:999px;
  background: var(--pln-bar, linear-gradient(90deg, #999, #bbb));
  box-shadow: 0 2px 8px rgba(0,0,0,.12) inset;
  transform-origin: left center;
  transform: scaleX(0.05);         /* 초기 */
  opacity:0;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}

/* colored variants */
.pln-blue { --pln-bar: linear-gradient(90deg, var(--pln-blue1), var(--pln-blue2)); }
.pln-green{ --pln-bar: linear-gradient(90deg, var(--pln-green1), var(--pln-green2)); }
.pln-orange{ --pln-bar: linear-gradient(90deg, var(--pln-orange1), var(--pln-orange2)); }

/* end dot */
.pln-dot{
    display: none;
  grid-column: calc(var(--to)) / calc(var(--to) + 1);
  justify-self: end;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 6px rgba(0,0,0,.08), 0 0 0 2px rgba(0,0,0,.05) inset;
  position:relative;
}
.pln-blue  .pln-dot{ box-shadow: 0 0 0 6px rgba(55,176,255,.25); }
.pln-green .pln-dot{ box-shadow: 0 0 0 6px rgba(167,220,80,.28); }
.pln-orange .pln-dot{ box-shadow: 0 0 0 6px rgba(255,167,106,.28); }

/* in-view 애니메이션 상태 */
.pln-in .pln-bar::before{
  transform: scaleX(1);
  opacity:1;
}
.pln-badge{
  position:absolute; top:-36px; left:16px;
  font-size:12px; color:#fff; white-space:nowrap;
  background: rgba(0,0,0,.35); padding:6px 10px; border-radius:14px;
  backdrop-filter: blur(2px);
}

/* partner logo */
.pln-partner-logo{ max-height:28px; width:auto; opacity:.9; filter:grayscale(1); }

/* responsive */
@media (max-width: 980px){
  .pln-row{ grid-template-columns: 130px 150px 180px repeat(4, 1fr) 120px; }
  .pln-code{ font-size:18px; }
  .pln-stages::before{ left:10px; right:10px; }
  .pln-bar{ inset:0 10px; }
  .pln-badge{ left:10px; }
}
@media (max-width: 720px){
  /* 모바일은 카드형으로 변환 */
  .pln-row{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .pln-head{ display:none; }
  .pln-cell{ border-right:none; padding:12px 14px; }
  .pln-row > .pln-cell:nth-child(1){ order:1; }
  .pln-row > .pln-cell:nth-child(2){ order:2; }
  .pln-row > .pln-cell:nth-child(3){ order:3; }
  .pln-row > .pln-cell:nth-child(4){ order:4; }
  .pln-row > .pln-cell:nth-child(5){ order:5; }
  .pln-row > .pln-cell:nth-child(6){ order:6; }
  .pln-row > .pln-cell:nth-child(7){ order:7; }
  .pln-row > .pln-cell:nth-child(8){ order:8; justify-content:flex-start; }
  .pln-stages{ min-height:54px; }
  .pln-badge{ position:static; display:inline-block; margin:8px 0 -2px; }
}