/* =====================================================================
   deployment-scenarios.php 전용 — 운영 시나리오 (css/deployment-scenarios.css)
   - 공용 토큰(tokens.css)만 참조한다. 이 페이지를 위해 새로 만든 토큰은 없다.
   - 히어로·섹션 머리·표(.tbl)·칩(.chip)·필터(.filters)·첨부(.file-list)·노트(.note)는
     on-sub.css 공용 규칙을 그대로 쓴다. 여기 있는 것은 시나리오 목록(.scn-*)뿐이다.
   ===================================================================== */

/* ---------- Part 구성 표 ----------
   값끼리 비교하며 읽는 표라 카드 전환(.tbl--stack)이 아니라 최소 폭 + 가로 스크롤을 쓴다
   (CLAUDE.md 「모바일에서 표를 다루는 3가지 방식」 ②). 5열이라 좁은 폭에서 열이 눌린다 */
.scn-tbl{min-width:860px}
.scn-tbl__sum th[scope="row"],.scn-tbl__sum td{background:var(--bg);font-weight:800;color:var(--navy)}

/* ---------- 제품 패널 ----------
   .filters(on-sub.js)가 [data-cat]에 display를 직접 대입하므로 패널 자신에는
   display 의존 규칙을 두지 않는다 (숨김 해제 시 '' 로 되돌아가야 하기 때문) */
.scn-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 36px}
.scn-panel+.scn-panel{margin-top:26px}

.scn-prod{padding-bottom:22px;border-bottom:2px solid var(--navy)}
.scn-prod__name h3{font-size:clamp(20px,2.4vw,25px);font-weight:900;color:var(--ink);line-height:1.35}
.scn-prod__en{margin-top:6px;font-size:13px;font-weight:800;letter-spacing:.8px;color:var(--primary);text-transform:uppercase}
.scn-prod__desc{margin-top:14px;font-size:15px;color:var(--gray);line-height:1.85;max-width:820px}
.scn-prod__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* ---------- Part 묶음 ----------
   태그 색은 세 Part를 구분하기 위한 것으로, 전부 tokens.css의 기존 토큰이다 */
.scn-part{padding-top:30px}
.scn-part__head{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.scn-part__tag{flex:0 0 auto;padding:5px 13px;border-radius:20px;font-size:12px;font-weight:800;letter-spacing:.4px;color:#fff;background:var(--navy)}
.scn-part--b .scn-part__tag{background:var(--primary)}
.scn-part--c .scn-part__tag{background:var(--teal-deep)}
.scn-part__title{font-size:19px;font-weight:800;color:var(--ink);line-height:1.4}
.scn-part__n{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--gray)}
.scn-part__desc{margin-top:10px;font-size:14.5px;color:var(--gray);line-height:1.8}

/* ---------- 시나리오 항목 ----------
   <ol>이지만 번호는 지침서의 코드(A-01…)를 그대로 쓰므로 마커를 감춘다 */
.scn-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;padding:0}
.scn-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.scn-code{flex:0 0 auto;min-width:44px;padding-top:1px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;font-weight:700;letter-spacing:.2px;color:var(--primary)}
.scn-part--a .scn-code{color:var(--navy)}
.scn-part--c .scn-code{color:var(--teal-deep)}
.scn-body{flex:1;min-width:0}
.scn-name{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.55}
.scn-quote{display:block;margin-top:6px;font-size:14px;color:var(--gray);line-height:1.7}

/* ---------- 참고 목록 (.note 안) ---------- */
.scn-notes__title{display:block;margin-bottom:10px;font-size:14.5px;font-weight:800;color:var(--navy)}
.scn-notes{list-style:none;display:grid;gap:9px;padding:0}
.scn-notes li{position:relative;padding-left:15px}
.scn-notes li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--primary)}

/* ---------- 반응형 (--bp-tablet 1024 · --bp-mobile 768 — tokens.css와 동일값 유지) ---------- */
@media (max-width:1024px){
  .scn-panel{padding:28px 24px}
}
@media (max-width:768px){
  .scn-panel{padding:24px 18px}
  .scn-list{grid-template-columns:1fr}
  .scn-part__n{margin-left:0;width:100%}
}