/* D안: 산차별 단계와 상태 색상을 표시한다. 화면 전용이며 인쇄 양식은 유지한다. */
@media screen {
 .sow-a{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;color:var(--ink);font-size:.9rem;line-height:1.6}
 .sow-a *{box-sizing:border-box}.sow-a h2,.sow-a p{margin:0}.sow-a h2{font-size:.95rem;font-weight:700}
 .sow-a .sa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:20px}.sow-a .sa-id{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap}.sow-a .card-header-number{font-size:2rem;font-weight:600;overflow-wrap:anywhere;color:var(--ink);background:none;padding:0}
 .sow-a .sa-state{display:flex;align-items:center;gap:6px}.sow-a .sa-muted,.sow-a small{color:var(--ink-soft);font-size:.8rem}.sow-a .sa-blue{color:var(--accent)}.sow-a .sa-danger{color:var(--t-red,var(--bad))}
 .sow-a .sa-manage{margin-left:auto}.sow-a summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}.sow-a summary::-webkit-details-marker{display:none}.sow-a summary::after{content:'＋';color:var(--ink-soft)}.sow-a details[open]>summary::after{content:'−'}
 .sow-a .sa-tools{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px}.sow-a .sa-button{display:inline-flex;align-items:center;gap:6px;justify-content:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px 12px;min-height:42px;font:inherit;cursor:pointer}.sow-a .sa-button:hover{border-color:var(--accent)}.sow-a .sa-button[data-danger]{color:var(--t-red,var(--bad))}.sow-a .sa-primary{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.sow-a button:disabled{opacity:.6;cursor:wait}
 .sow-a .sa-current{border:1px solid var(--line);border-radius:8px;padding:16px}.sow-a .sa-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.sow-a .sa-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.sow-a .sa-flow span{display:block;font-size:.8rem;color:var(--ink-soft)}.sow-a .sa-flow b{display:block;margin-top:4px;overflow-wrap:anywhere;font-weight:600}
 .sow-a .sa-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;margin:18px 0}.sow-a .sa-metric{padding:14px;min-width:0}.sow-a .sa-metric+.sa-metric{border-left:1px solid var(--line)}.sow-a .sa-metric>span{display:block;font-size:.8rem;color:var(--ink-soft)}.sow-a .sa-metric strong{display:block;font-size:1.6rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.sow-a .sa-metric small{margin-left:4px;font-size:.8rem}
 .sow-a .sa-parity{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;margin:0;background:none}.sow-a .sa-parity>summary{padding:12px 0;flex-wrap:wrap}.sow-a .sa-records{padding-bottom:10px}.sow-a .sa-attempt{padding:12px 0;border-top:1px solid var(--line)}.sow-a .sa-attempt-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.sow-a .sa-attempt-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.sow-a .sa-record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 0}.sow-a .sa-record-grid span{font-size:.8rem;color:var(--ink-soft)}.sow-a .sa-record-grid b{display:block;color:var(--ink);font-weight:600;overflow-wrap:anywhere}.sow-a .sa-past{display:flex;align-items:center;gap:4px}
 .sow-a .sa-alert{display:flex;gap:12px;border-left:3px solid var(--t-red,var(--bad));padding:12px 0 12px 14px;margin-bottom:16px}.sow-a .sa-alert strong,.sow-a .sa-alert>div:first-child{color:var(--t-red,var(--bad))}.sow-a .sa-alert[data-tone=warning]{border-left-color:var(--warn)}.sow-a .sa-alert[data-tone=warning] strong,.sow-a .sa-alert[data-tone=warning]>div:first-child{color:var(--warn)}.sow-a .sa-alert p{font-size:.8rem;color:var(--ink-soft)}.sow-a .sa-jump{display:inline-flex;gap:6px;align-items:center;border:0;background:none;color:var(--accent);min-height:40px;cursor:pointer;padding:6px 0;font:inherit;font-size:.8rem}.sow-a .sa-ended{display:flex;align-items:center;gap:8px;color:var(--ink-soft);margin-bottom:16px}.sow-a .sa-empty{padding:12px 0}
 .sow-a .sa-note-form{padding:12px 0}.sow-a .sa-note-form label{display:block;font-size:.85rem}.sow-a textarea,.sow-a input{display:block;max-width:100%;border:1px solid var(--line);border-radius:6px;background:var(--field,var(--surface));color:var(--ink);padding:10px;font:inherit;font-size:16px;margin:6px 0}.sow-a textarea{width:100%;min-height:80px;resize:vertical}.sow-a .sa-note-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}.sow-a .sa-note-history{border-bottom:1px solid var(--line);padding:10px 0}.sow-a .sa-note-history p{white-space:pre-wrap;overflow-wrap:anywhere}.sow-a .sa-note-status{margin-top:8px}.sow-a #paperCards{padding:18px 0 0;border:0}
 #sowAttentionList{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:12px 16px;margin:0 0 16px;color:var(--ink)}#sowAttentionList>summary{cursor:pointer;min-height:32px}#sowAttentionList .sa-list-controls{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}#sowAttentionList select,#sowAttentionList button{font:inherit;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px;min-height:42px}.sa-attention-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}.sa-attention-row>span{flex:1}.sa-attention-row small{color:var(--ink-soft)}.sa-attention-row strong{color:var(--accent)}
 :root[data-theme=taegeuk] .sow-a .card-header-number,:root[data-theme=taegeuk] .sow-a .sa-metric strong{font-family:'Noto Serif KR','Batang',serif}

 .sow-a .sa-current{border:0;padding:0;border-radius:0}
 .sow-a .sa-cycle{--sa-tone:var(--t-blue,var(--accent));--sa-wash:color-mix(in srgb,var(--sa-tone) 9%,var(--surface));border:1px solid var(--line);border-left:4px solid var(--sa-tone);border-radius:8px;background:var(--surface);padding:0;margin:0 0 18px;overflow:hidden}
 .sow-a .sa-cycle[data-tone=complete]{--sa-tone:var(--t-green,var(--good))}
 .sow-a .sa-cycle[data-tone=attention]{--sa-tone:var(--t-red,var(--bad))}
 .sow-a .sa-cycle[data-tone=ended]{--sa-tone:var(--ink-soft)}
 .sow-a .sa-cycle>summary{background:var(--sa-wash);padding:16px;flex-wrap:wrap}
 .sow-a .sa-cycle>summary>div{min-width:0;flex:1}.sow-a .sa-cycle>summary strong{font-size:1.05rem}.sow-a .sa-cycle>summary small{display:block}
 .sow-a .sa-cycle .sa-past{display:flex;gap:4px;align-items:center}
 .sow-a .sa-cycle-status{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--sa-tone)}
 .sow-a .sa-cycle-body{padding:16px;min-width:0}.sow-a .sa-flow{gap:24px;margin-bottom:16px}
 .sow-a .sa-stage{position:relative;padding:12px;border-radius:6px;min-width:0;background:var(--sa-wash);color:var(--sa-tone)}
 .sow-a .sa-stage+.sa-stage::before{content:'→';position:absolute;left:-19px;top:50%;transform:translateY(-50%);color:var(--ink-soft)}
 .sow-a .sa-stage .sa-stage-label{display:flex;align-items:center;gap:5px;color:inherit}.sow-a .sa-stage b{color:var(--ink);font-variant-numeric:tabular-nums}.sow-a .sa-stage small{display:block;margin-top:4px}
 .sow-a .sa-stage[data-state=pending],.sow-a .sa-stage[data-state=recorded],.sow-a .sa-stage[data-state=ended]{background:var(--surface-2,var(--surface));color:var(--ink-soft)}
 .sow-a .sa-stage[data-state=attention]{background:var(--bad-soft);color:var(--t-red,var(--bad))}
 /* 분만 예정일 (분만 전) · 예정일이 지나면 주황 */
 .sow-a .sa-stage[data-state=due]{background:var(--surface-2,var(--surface));color:var(--accent)}
 .sow-a .sa-stage[data-state=late]{background:color-mix(in srgb,var(--t-orange,var(--warn)) 12%,var(--surface));color:var(--t-orange,var(--warn))}
 .sow-a .sa-stage[data-state=late] small{color:var(--t-orange,var(--warn));font-weight:700}
 .sow-a .sa-cycle-issues{background:var(--bad-soft);color:var(--t-red,var(--bad));padding:12px;border-radius:6px;margin-bottom:14px;font-size:.85rem;overflow-wrap:anywhere}
 .sow-a .sa-cycle-issues p+p{margin-top:6px}.sow-a .sa-cycle-body>.sa-attempt{padding-top:0;border-top:0}
 .sow-a .sa-cycle-body>.sa-attempt .sa-record-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.sow-a .sa-cycle-body>.sa-attempt .sa-record-grid b{font-size:1.2rem}
 .sow-a .sa-previous-attempts{border-top:1px solid var(--line);margin-top:14px}.sow-a .sa-previous-attempts>summary{padding:12px 0;flex-wrap:wrap;color:var(--t-red,var(--bad))}
 .sow-a .sa-attempt-past{padding:14px;border:0;border-radius:6px;background:var(--bad-soft);margin-top:8px}.sow-a .sa-attempt-past .sa-attempt-head{color:var(--ink)}
 .sow-a .sa-button:focus-visible,.sow-a summary:focus-visible,.sow-a .sa-jump:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .sow-a .sa-cycle svg,.sow-a .sa-cycle i[data-lucide]{width:16px;height:16px;flex-shrink:0}
 @media(max-width:600px){.sow-a .sa-current{padding:0}.sow-a .sa-cycle-body,.sow-a .sa-cycle>summary{padding:14px}.sow-a .sa-flow{grid-template-columns:1fr;gap:8px}.sow-a .sa-stage{display:grid;grid-template-columns:minmax(60px,.7fr) minmax(0,1fr);column-gap:10px;align-items:center}.sow-a .sa-stage small{grid-column:2}.sow-a .sa-stage+.sa-stage::before{display:none}.sow-a .sa-stage b{margin:0}.sow-a .sa-cycle-body>.sa-attempt .sa-record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sow-a .sa-button{min-height:44px}.sow-a .sa-attempt-head{overflow-wrap:anywhere}.sow-a .sa-cycle-status{flex-wrap:wrap}}
 @media(max-width:600px){.sow-a{padding:16px}.sow-a .sa-id{gap:10px}.sow-a .sa-flow{gap:8px}.sow-a .sa-metric{padding:10px}.sow-a .sa-metric strong{font-size:1.3rem}.sow-a .sa-current{padding:0}.sow-a .sa-record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sow-a .sa-parity>summary{gap:8px}.sa-attention-row{gap:10px}.sa-attention-row>span{min-width:0;overflow-wrap:anywhere}}
}

/* ── 분만 흐름 — 산차마다 접어 둔 막대 (shared/farrowing-flow.js 가 그린다) ──
   바깥(분만 흐름)도 안쪽(시각 하나씩 보기)도 접힌 채로 연다. 산차가 많을 때
   펼쳐져 있으면 카드가 길어져 오히려 보기 힘들다. */
.sow-a .sa-flow-log{border-top:1px dashed var(--line);margin-top:4px}
.sow-a .sa-flow-log>summary{font-size:.85rem;font-weight:600;min-height:40px;color:var(--ink)}
.sow-a .sa-flow-body{padding-bottom:10px}
/* 분만사 화면에서 남긴 메모 — 숫자보다 먼저 읽히게 위에 둔다 */
.sow-a .sa-flow-memo{margin:2px 0 10px;padding:9px 11px;border-radius:9px;background:var(--accent-10);
  border:1px solid var(--accent-30,var(--line));color:var(--ink);font-size:.85rem;line-height:1.6;white-space:pre-wrap}
.sow-a .sa-bar-help{font-size:.74rem;margin:2px 0 8px}
.sow-a .sa-bar{position:relative;height:28px;border-radius:6px;background:var(--surface-3,var(--line));overflow:hidden}
.sow-a .sa-band{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--warn,#c2680c) 22%,transparent)}
.sow-a .sa-tick{position:absolute;top:5px;bottom:5px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--accent)}
.sow-a .sa-tick.slow{background:var(--warn,#c2680c)}
.sow-a .sa-tick.dead{background:var(--ink-soft)}
.sow-a .sa-bar-axis{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;margin-top:3px}
.sow-a .sa-flow-num{grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 0 2px}
.sow-a .sa-flow-worst b{color:var(--warn,#c2680c)}
.sow-a .sa-flow-rows{border-top:1px dashed var(--line);margin-top:6px}
.sow-a .sa-flow-rows>summary{font-size:.8rem;font-weight:600;min-height:38px;color:var(--ink-soft)}
.sow-a .sa-brow{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px dashed var(--line);font-size:.85rem}
.sow-a .sa-brow .i{min-width:1.8em;font-weight:700;color:var(--ink-soft);font-size:.72rem}
.sow-a .sa-brow .t{font-variant-numeric:tabular-nums;font-weight:600;min-width:3.4em}
.sow-a .sa-brow .g{color:var(--ink-soft);font-size:.74rem}
.sow-a .sa-brow.dead .t{color:var(--ink-soft);text-decoration:line-through}
.sow-a .sa-brow.slow .g{color:var(--warn,#c2680c);font-weight:700}
@media (max-width:480px){.sow-a .sa-flow-num{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 확인 메모 머리줄 — 그때 모돈 상태("3산 임신 중") · 날짜 · 쓴 사람 · 지우기 */
.sow-a .sa-note-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sow-a .sa-note-stage{font-size:.8rem;font-weight:800;color:var(--accent-text,var(--accent));background:var(--accent-10);border-radius:6px;padding:2px 7px}
.sow-a .sa-note-hd small{color:var(--ink-dim)}
.sow-a .sa-note-del{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:5px 9px!important;min-height:0!important;border-radius:7px!important;font:inherit;font-size:.76rem!important;cursor:pointer;
 background:transparent!important;color:var(--t-red,#c0392b)!important;border:1px solid color-mix(in srgb,var(--t-red,#c0392b) 45%,transparent)!important}
.sow-a .sa-note-del svg.hanul-line-icon{width:14px;height:14px}
.sow-a .sa-note-history p{margin:6px 0 0}
.sow-a .sa-note-hd small{order:3;flex-basis:100%}   /* 상태·지우기 한 줄, 날짜·쓴 사람은 그 밑 */
/* 전출 띠 — 언제 · 왜 · 그때 상태 · 어디서 · 메모 (2026-10-10) */
.sow-a .sa-exit{--ex-c:var(--t-red,#c0392b);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin-bottom:16px;padding:12px 14px;border-radius:12px;
 border:1px solid color-mix(in srgb,var(--ex-c) 45%,var(--line));background:color-mix(in srgb,var(--ex-c) 9%,transparent)}
.sow-a .sa-exit[data-type="기타"]{--ex-c:var(--t-amber,#b7791f)}.sow-a .sa-exit[data-type="판매"]{--ex-c:var(--t-blue,#2b6cb0)}.sow-a .sa-exit[data-type="폐사"]{--ex-c:var(--ink-soft)}
.sow-a .sa-exit-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--ex-c);background:color-mix(in srgb,var(--ex-c) 18%,transparent)}
.sow-a .sa-exit b{display:block;font-size:1.02rem;color:var(--ink)}.sow-a .sa-exit b em{font-style:normal;color:var(--ex-c)}
.sow-a .sa-exit small{display:block;margin-top:3px;font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.sow-a .sa-exit-memo{margin:6px 0 0;font-size:.84rem;color:var(--ink-soft);overflow-wrap:anywhere}
.sow-a .sa-exit-memo button{border:0!important;background:none!important;color:var(--accent)!important;font:inherit;font-weight:700;padding:0 4px!important;min-height:0!important;cursor:pointer}
/* 산차마다 돈방 이동 한 줄 */
.sow-a .sa-moves{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px;padding:9px 10px;border-radius:10px;background:var(--surface-2,var(--accent-10));font-size:.82rem;color:var(--ink-soft)}
.sow-a .sa-moves svg,.sow-a .sa-moves i{width:15px;height:15px}
.sow-a .sa-moves-lbl{font-weight:800;color:var(--ink);margin-right:2px}
.sow-a .sa-move{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700}
.sow-a .sa-move small{font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.sow-a .sa-move-out{border-color:var(--t-amber,#b7791f);color:var(--t-amber,#b7791f)}
.sow-a .sa-move-ar{color:var(--ink-soft)}
.sow-a .sa-moves-none{background:transparent;border:1px dashed var(--line);font-size:.78rem}
/* ============================================================================
   선명 스타일 (2026-10-10, 사장님 B안) — docs/STYLE-VIVID.md
   구조는 그대로, 상태 색 · 단계 색 · 동그란 아이콘 · 잇는 줄 · 열 때 한 번 움직임.
   계속 움직이는 것은 늦은 칸의 빛 테두리와 '지남' 알약뿐. 움직임 줄이기 · 인쇄면 멈춘다.
   ============================================================================ */
@property --sa-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.sow-a.sa-vivid{--tone:var(--accent);--c-br:var(--accent);--c-fa:var(--t-amber,#f5a524);--c-we:var(--t-blue,#4ea8ff);--c-late:var(--t-orange,var(--warn))}
.sow-a.sa-vivid[data-tone=late]{--tone:var(--c-late)}.sow-a.sa-vivid[data-tone=alert]{--tone:var(--t-red,var(--bad))}.sow-a.sa-vivid[data-tone=ended]{--tone:var(--ink-soft)}
/* 머리 — 상태 색이 번지는 판, 열 때 빛이 한 번 지나간다 */
.sa-vivid .sa-head{position:relative;overflow:hidden;padding:16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--tone) 45%,var(--line));
 background:radial-gradient(130% 150% at 0% 0%,color-mix(in srgb,var(--tone) 26%,transparent),transparent 62%),var(--surface-2,var(--surface));animation:sa-v-rise .5s cubic-bezier(.2,.8,.2,1) both}
.sa-vivid .sa-head::after{content:'';position:absolute;top:0;bottom:0;width:45%;left:-50%;background:linear-gradient(100deg,transparent,color-mix(in srgb,#fff 16%,transparent),transparent);animation:sa-v-sweep 1.1s .35s ease-in-out both;pointer-events:none}
.sa-vivid .card-header-number{font-size:2.7rem;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 18px color-mix(in srgb,var(--tone) 40%,transparent)}
.sa-vivid .sa-head .hs-status{font-size:.92rem;font-weight:900;padding:.18em .8em;border-radius:999px;background:var(--tone);border-color:var(--tone);color:var(--bg);animation:sa-v-pop .45s .3s both}
.sa-vivid .sa-head .hs-elapsed{display:inline-flex;align-items:baseline;gap:4px;margin:6px 0 2px;padding:2px 10px;border-radius:10px;background:color-mix(in srgb,var(--tone) 15%,transparent);color:var(--ink);font-weight:700}
.sa-vivid .sa-head .hs-elapsed strong{font-size:1.2rem;font-weight:900;color:var(--tone);display:inline-block;animation:sa-v-up .6s .45s cubic-bezier(.2,.8,.2,1) both}
/* 세 칸 — 단계마다 색, 동그란 아이콘, 지금 단계까지 차는 줄 */
.sa-vivid .sa-flow{position:relative}
.sa-vivid .sa-stage{--c:var(--ink-soft);border-radius:14px;border:1px solid color-mix(in srgb,var(--c) 50%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--c) 18%,var(--surface)),var(--surface) 75%);color:var(--c);
 animation:sa-v-in .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--si,0) * 110ms + .3s)}
.sa-vivid .sa-stage[data-stage=breedingDate]{--c:var(--c-br);--si:0}.sa-vivid .sa-stage[data-stage=farrowingDate]{--c:var(--c-fa);--si:1}.sa-vivid .sa-stage[data-stage=weaningDate]{--c:var(--c-we);--si:2}
.sa-vivid .sa-stage[data-state=pending]{--c:var(--ink-soft);border-style:dashed;background:var(--surface)}
.sa-vivid .sa-stage[data-state=attention]{--c:var(--t-red,var(--bad))}.sa-vivid .sa-stage[data-state=late]{--c:var(--c-late)}
.sa-vivid .sa-stage[data-state=recorded],.sa-vivid .sa-stage[data-state=ended]{--c:color-mix(in srgb,var(--ink-soft) 80%,var(--accent))}
.sa-vivid .sa-stage-label{font-weight:800}
.sa-vivid .sa-stage-label svg{position:relative;z-index:2;width:34px;height:34px;padding:8px;box-sizing:border-box;border-radius:50%;background:var(--c);color:var(--bg);flex:none;
 box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,var(--surface));animation:sa-v-pop .4s both;animation-delay:calc(var(--si,0) * 110ms + .45s)}
.sa-vivid .sa-stage[data-state=pending] .sa-stage-label svg{background:var(--surface-2,var(--surface));color:var(--ink-soft);box-shadow:none;border:2px dashed var(--line)}
.sa-vivid .sa-stage b{font-size:1.08rem;font-weight:800}
.sa-vivid .sa-stage[data-state=late] small{display:inline-block;width:max-content;max-width:100%;white-space:nowrap;font-size:.78rem;margin-top:6px;padding:2px 9px;border-radius:999px;background:var(--c-late);color:var(--bg);font-weight:800;animation:sa-v-beat 1.6s 1.4s ease-in-out infinite}
.sa-vivid .sa-stage[data-state=late]::after{content:'';position:absolute;inset:-2px;border-radius:16px;padding:2px;pointer-events:none;
 background:conic-gradient(from var(--sa-ang),transparent 0 55%,var(--c-late) 78%,color-mix(in srgb,var(--c-late) 40%,#fff) 88%,transparent 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sa-v-spin 2.6s 1s linear infinite}
/* 잇는 줄 — 아이콘과 아이콘 사이에만 그린다 (아이콘을 가리지 않게). 지난 단계끼리는 색, 앞으로는 회색 */
@media(max-width:600px){
 .sa-vivid .sa-stage::before{display:none}
 .sa-vivid .sa-stage-label{position:relative}
 .sa-vivid .sa-stage:not(:last-child)::before{content:'';display:block;position:absolute;left:27px;top:46px;bottom:-10px;width:4px;border-radius:2px;background:var(--line);
  transform:none;transform-origin:top;  /* 가운데 칸은 옛 화살표 규칙(.sa-stage+.sa-stage::before)의 translateY(-50%) 를 물려받아 줄이 위로 밀렸다 */
 animation:sa-v-grow .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--si,0) * 110ms + .7s)}
 .sa-vivid .sa-stage:not([data-state=pending]):has(+.sa-stage:not([data-state=pending]))::before{background:var(--c)}
 .sa-vivid .sa-stage:not(:first-child) .sa-stage-label::before{content:'';position:absolute;left:15px;top:-13px;height:13px;width:4px;border-radius:2px 2px 0 0;background:var(--line)}
 .sa-vivid .sa-stage:not(:first-child):not([data-state=pending]) .sa-stage-label::before{background:var(--c)}
}
@media(min-width:601px){
 .sa-vivid .sa-stage+.sa-stage::before{content:'';left:-26px;width:28px;height:4px;top:28px;transform:none;border-radius:3px;background:var(--line)}
 .sa-vivid .sa-stage:not([data-state=pending])+.sa-stage:not([data-state=pending])::before{background:linear-gradient(90deg,var(--c-br),var(--c))}}
@keyframes sa-v-grow{from{transform:scaleY(0)}}
/* 이동 칩 — 돈방 색 점 */
.sow-a .sa-move-dot{width:9px;height:9px;border-radius:3px;display:inline-block;align-self:center;flex:none}
/* 숫자 셋 — 위에 색 띠, 숫자가 올라오며 나타난다 (글자는 그대로라 복사 · 읽기에 영향 없음) */
.sa-vivid .sa-metric{position:relative;overflow:hidden}.sa-vivid .sa-metric::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--mc,var(--accent))}
.sa-vivid .sa-metric:nth-child(2){--mc:var(--c-we)}.sa-vivid .sa-metric:nth-child(3){--mc:var(--t-pink,#b58cff)}
.sa-vivid .sa-metric strong{font-size:1.8rem;font-weight:800;color:var(--mc,var(--accent));animation:sa-v-up .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--mi,0) * 90ms + .7s)}
.sa-vivid .sa-metric:nth-child(2) strong{--mi:1}.sa-vivid .sa-metric:nth-child(3) strong{--mi:2}
/* 지난 산차 — 제목 줄 칩, 차례로 들어온다 */
.sa-vivid .sa-cycle:not([data-sa-current]){border-left-width:5px;animation:sa-v-slide .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--pi,0) * 60ms + .8s)}
.sow-a .sa-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.sow-a .sa-chips>span{font-size:.74rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--surface-2,var(--surface));border:1px solid var(--line);color:var(--ink)}
.sow-a .sa-chips em{font-style:normal;color:var(--ink-soft);font-weight:600;margin-right:3px}
.sow-a .sa-chips .sa-chip-low{border-color:var(--c-late,var(--warn));color:var(--c-late,var(--warn))}
@keyframes sa-v-rise{from{transform:translateY(10px);opacity:0}}@keyframes sa-v-in{from{transform:translateY(8px);opacity:0}}
@keyframes sa-v-slide{from{transform:translateY(14px);opacity:0}}@keyframes sa-v-sweep{to{left:110%}}@keyframes sa-v-fade{from{opacity:0}}
@keyframes sa-v-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes sa-v-up{from{transform:translateY(.5em);opacity:0}}
@keyframes sa-v-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.06);box-shadow:0 0 0 6px color-mix(in srgb,var(--c-late) 25%,transparent)}}
@keyframes sa-v-spin{to{--sa-ang:360deg}}
@media (prefers-reduced-motion:reduce){.sa-vivid,.sa-vivid *,.sa-vivid *::before,.sa-vivid *::after{animation:none!important}}
@media print{.sa-vivid,.sa-vivid *,.sa-vivid *::before,.sa-vivid *::after{animation:none!important}}
/* 접힌 산차를 펼칠 때는 기다리지 않고 바로 (차례만 짧게) */
.sa-vivid .sa-cycle:not([data-sa-current]) .sa-stage{animation-delay:calc(var(--si,0) * 60ms)}
.sa-vivid .sa-cycle:not([data-sa-current]) .sa-stage-label svg{animation-delay:calc(var(--si,0) * 60ms + .1s)}
.sa-vivid .sa-cycle:not([data-sa-current]) .sa-stage:not(:last-child)::before{animation-delay:calc(var(--si,0) * 60ms + .2s)}

/* 분만사 모돈 관찰 (2026-10-16) — 산차 줄 아래 한 줄: 입수 ✓ · 식자 ✓(빨강) · 포유 S A B C */
.sa-marks { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:6px 0 0; font-size:.8rem; color:var(--ink-soft); font-weight:700; }
.sa-marks svg { width:15px; height:15px; color:var(--t-pink); }
.sa-mk { display:inline-flex; align-items:center; padding:1px 9px; border-radius:999px; font-size:.76rem; font-weight:900; color:var(--ink);
  background:color-mix(in srgb, var(--c, var(--t-blue)) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--c, var(--t-blue)) 55%, transparent); }
.sa-mk-red { --c:var(--t-red); } .sa-mk-g { --c:var(--accent); } .sa-mk-g[data-g="A"] { --c:var(--t-blue); } .sa-mk-g[data-g="B"] { --c:var(--t-amber); } .sa-mk-g[data-g="C"] { --c:var(--t-red); }