.story-ops-guide { display: grid; gap: 22px; color: #172033; }
.story-ops-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 30px; border: 1px solid #d8e5f2; border-radius: 22px; background: linear-gradient(135deg,#fff,#eef8ff); }
.story-ops-hero span { color: #0878b8; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.story-ops-hero h2 { margin: 8px 0; font-size: 32px; letter-spacing: -.04em; }
.story-ops-hero p { margin: 0; color: #64748b; line-height: 1.7; }
.story-ops-status { display: grid; min-width: 260px; gap: 5px; padding: 18px; border-radius: 16px; background: #0f172a; color: #fff; }
.story-ops-status strong { color: #7dd3fc; font-size: 12px; }
.story-ops-status span { color: #fff; font-size: 17px; line-height: 1.5; letter-spacing: -.03em; }
.story-ops-status small { color: #cbd5e1; }
.story-ops-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.story-ops-summary article { padding: 22px; border: 1px solid #dbe5ef; border-radius: 18px; background: #fff; }
.story-ops-summary span { color: #0878b8; font-size: 12px; font-weight: 850; }
.story-ops-summary strong { display: block; margin: 8px 0; font-size: 21px; }
.story-ops-summary p { margin: 0; color: #64748b; font-size: 14px; line-height: 1.6; }
.story-ops-section { padding: 26px; border: 1px solid #dbe5ef; border-radius: 20px; background: #fff; }
.story-ops-section-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.story-ops-section-head > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #0878b8; color: #fff; font-size: 12px; font-weight: 900; }
.story-ops-section h2 { margin: 0 0 5px; font-size: 22px; }
.story-ops-section-head p { margin: 0; color: #64748b; line-height: 1.6; }
.story-ops-table-wrap { overflow-x: auto; border: 1px solid #e1e8f0; border-radius: 14px; }
.story-ops-table-wrap table { width: 100%; min-width: 640px; border-collapse: collapse; }
.story-ops-table-wrap th,.story-ops-table-wrap td { padding: 14px 16px; border-bottom: 1px solid #e7edf3; text-align: left; line-height: 1.6; }
.story-ops-table-wrap thead th { background: #eff8fd; color: #075b8d; font-size: 13px; }
.story-ops-table-wrap tbody th { width: 190px; color: #334155; font-size: 14px; }
.story-ops-table-wrap tbody td { color: #526174; font-size: 14px; }
.story-ops-table-wrap tr:last-child th,.story-ops-table-wrap tr:last-child td { border-bottom: 0; }
.story-ops-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: ops-flow; }
.story-ops-flow li { position: relative; min-height: 105px; padding: 18px 18px 18px 52px; border-radius: 14px; background: #f6f9fc; counter-increment: ops-flow; }
.story-ops-flow li::before { position: absolute; top: 17px; left: 16px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: #dff4fc; color: #0878b8; font-size: 12px; font-weight: 900; content: counter(ops-flow); }
.story-ops-flow strong,.story-ops-flow span { display: block; }
.story-ops-flow span { margin-top: 7px; color: #64748b; font-size: 13px; line-height: 1.55; }
.story-ops-records { display: flex; flex-wrap: wrap; gap: 9px; }
.story-ops-records span { padding: 9px 12px; border-radius: 999px; background: #eef7fc; color: #075b8d; font-size: 13px; font-weight: 800; }
.story-ops-stop { padding: 20px 22px; border: 1px solid #f1d5a4; border-radius: 16px; background: #fffaf0; }
.story-ops-stop strong { color: #995a00; }
.story-ops-stop p { margin: 7px 0 0; color: #725223; line-height: 1.7; }
@media (max-width: 820px) { .story-ops-hero { align-items: stretch; flex-direction: column; padding: 22px; } .story-ops-status { min-width: 0; } .story-ops-summary,.story-ops-flow { grid-template-columns: 1fr; } .story-ops-section { padding: 20px; } }