/* 운영 프로세스 — 설명용 정적 페이지. 스크립트 없이 HTML/CSS만 사용한다. */
.ops{padding:40px 38px 40px;max-width:1180px;margin:0 auto;min-width:0}
.ops .heading{margin-bottom:22px}
.ops h2{font-size:19px;letter-spacing:-.4px;margin:0 0 10px;font-weight:700;color:#23402f}
.ops h3{font-size:14px;margin:0 0 8px;font-weight:700;color:#23402f}
.ops p{overflow-wrap:anywhere}
.ops-lead{font-size:13px;line-height:1.85;color:#6d7d72;margin:0 0 20px;max-width:900px}
.ops-section{margin:0 0 42px;min-width:0}
.ops-subhead{font-size:14px;margin:30px 0 14px;color:#3d5a49}

.ops-snapshot{background:#eef4ee;border:1px solid #cfe0d3;border-left:4px solid #4d8a63;border-radius:10px;padding:16px 18px;font-size:13px;line-height:1.85;color:#3c5a49;margin:0 0 36px}
.ops-snapshot strong{color:#24513a}

/* 세로 흐름도: 담당이 바뀌는 지점을 색으로 구분한다. */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.flow>li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;background:#fff;border:1px solid #e1e8df;border-left:4px solid #c9d4cc;border-radius:11px;padding:18px 20px}
.flow>li:not(:last-child)::before{content:"";position:absolute;left:39px;top:100%;height:26px;width:2px;background:#cfd9d1}
.flow>li:not(:last-child)::after{content:"▼";position:absolute;left:20px;width:40px;text-align:center;top:calc(100% + 15px);font-size:9px;line-height:1;color:#a8b8ad}
.flow-num{background:#eef2ee;color:#4c6a57;border-radius:9px;height:34px;display:grid;place-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.flow-body{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.flow-body h3{margin:0}
.flow-body>p{flex-basis:100%}
.flow-body p{font-size:12.5px;line-height:1.9;color:#6f7f74;margin:9px 0 0}
.flow>li{align-items:start}
.flow-user{border-left-color:#c2a75f}.flow-user .flow-num{background:#f6efdd;color:#7d642a}
.flow-codex{border-left-color:#4d8a63}.flow-codex .flow-num{background:#e6f0e7;color:#2b593d}
.flow-claude{border-left-color:#4a7bab}.flow-claude .flow-num{background:#e7eef6;color:#1f4d7a}
.flow-result{border-left-color:#8d9d93}.flow-result .flow-num{background:#eef1ef;color:#4f6158}
.flow-stop{border-left-color:#a9705f}.flow-stop .flow-num{background:#f6ebe7;color:#8a5241}
.flow-compact{gap:22px}
.flow-compact>li:not(:last-child)::before{height:22px}
.flow-compact>li:not(:last-child)::after{top:calc(100% + 12px)}
.flow-compact .flow-body p{margin-top:6px}

.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.3px;border-radius:5px;padding:3px 8px}
.chip-user{background:#f6efdd;color:#755d27}
.chip-codex{background:#e6f0e7;color:#2b593d}
.chip-claude{background:#e7eef6;color:#1f4d7a}

.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.role{background:#fff;border:1px solid #e1e8df;border-radius:11px;padding:20px 22px;min-width:0}
.role h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;margin-bottom:14px}
.role ul{margin:0;padding-left:18px;display:grid;gap:9px}
.role li{font-size:12.5px;line-height:1.75;color:#6f7f74;overflow-wrap:anywhere}
.role-codex{border-top:3px solid #4d8a63}
.role-claude{border-top:3px solid #4a7bab}

.ops-callout{background:#f4f8f3;border:1px solid #dbe6da;border-radius:11px;padding:20px 24px}
.ops-callout ul{margin:0;padding-left:18px;display:grid;gap:11px}
.ops-callout li{font-size:13px;line-height:1.85;color:#57685d;overflow-wrap:anywhere}
.ops-callout strong{color:#2b4a38}

.ops-goal{background:#fff;border:1px solid #e1e8df;border-radius:11px;padding:22px 24px}
.ops-goal-figure{font-size:15px;color:#4f6158;margin:0 0 12px}
.ops-goal-figure strong{font-size:26px;letter-spacing:-.8px;color:#2b593d;margin:0 3px}
.ops-goal-figure span{font-size:12px;color:#8b9a90}
.ops-goal p{font-size:12.5px;line-height:1.9;color:#6f7f74;margin:0}
.ops-goal p strong{color:#8a5241}

.ops-note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.ops-note{background:#fff;border:1px solid #e1e8df;border-radius:11px;padding:18px 20px;min-width:0}
.ops-note p{font-size:12.5px;line-height:1.9;color:#6f7f74;margin:0}
.ops-note-keep{background:#f7f6f1;border-color:#e3e0d3}

/* 가로로 흐르는 단계 칩. 줄바꿈 시 화살표가 함께 접힌다. */
.chipflow{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;align-items:center}
.chipflow li{position:relative;background:#eaf1e7;color:#2b593d;border-radius:7px;padding:9px 13px;font-size:12px;font-weight:650}
.chipflow li:not(:last-child){margin-right:22px}
.chipflow li:not(:last-child)::after{content:"→";position:absolute;left:100%;top:50%;transform:translateY(-50%);width:22px;text-align:center;color:#9bb0a2;font-weight:400}
.chipflow li:last-child{background:#e6f0e7;border:1px solid #bcd6c3}

.hook-steps{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.hook-steps>div{background:#fff;border:1px solid #e4eae2;border-radius:9px;padding:14px 16px;min-width:0}
.hook-steps dt{font-size:12px;font-weight:700;color:#35543f}
.hook-steps dd{margin:7px 0 0;font-size:12.5px;line-height:1.85;color:#6f7f74;overflow-wrap:anywhere}

.hook-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hook-card{background:#fff;border:1px solid #e1e8df;border-top:3px solid #7ba889;border-radius:11px;padding:20px;min-width:0}
.hook-persona{display:block;font-size:11px;font-weight:700;color:#5c7a67;line-height:1.6}
.hook-pain{font-size:12px;line-height:1.8;color:#7e8d84;margin:10px 0 14px}
.hook-head{font-size:16px;line-height:1.6;font-weight:700;color:#23402f;letter-spacing:-.4px;margin:0 0 14px;padding:14px 16px;background:#f3f7f2;border-radius:9px}
.hook-basis{font-size:11px;line-height:1.85;color:#8c9a91;margin:0}

.ops-inline-note{font-size:12.5px;line-height:1.9;color:#63736a;background:#f4f8f3;border:1px solid #dbe6da;border-radius:10px;padding:15px 18px;margin:20px 0 0}
.ops-inline-note strong{color:#2b4a38}
.ops-inline-warn{background:#faf3ef;border-color:#ead9d1}
.ops-inline-warn strong{color:#8a5241}

.ops-footer{font-size:11.5px;line-height:1.9;color:#93a199;border-top:1px solid #e3e9e3;padding-top:20px;margin-top:8px}

nav .report-link.is-current{background:#dbe8d6;color:#204532;box-shadow:inset 3px 0 0 #4d8a63}

@media(max-width:1100px){
 .ops{padding:28px 22px 32px}
}
@media(max-width:900px){
 .role-grid,.ops-note-grid,.hook-steps{grid-template-columns:minmax(0,1fr)}
 .hook-cards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:750px){
 .ops{padding:24px 16px 28px}
 .ops h1{font-size:24px}
 .ops h2{font-size:17px}
 .ops-section{margin-bottom:34px}
 .flow{gap:22px}
 .flow>li{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:15px 16px}
 .flow-num{height:30px;font-size:12px;border-radius:8px}
 .flow>li:not(:last-child)::before{left:31px;height:22px}
 .flow>li:not(:last-child)::after{left:16px;width:32px;top:calc(100% + 12px)}
 .ops-goal-figure strong{font-size:22px}
 .hook-head{font-size:15px;padding:12px 14px}
 .chipflow li{font-size:11.5px;padding:8px 11px}
}