/* 분만일지 · 이유일지 선명 스타일 (2026-10-11, 시안 3 = 선명 + 폰 줄 카드 + 적은 모돈, docs/STYLE-VIVID.md)
   두 일지가 함께 쓴다. body 에 jv 와 jv-far(분만, 노랑) · jv-wean(이유, 파랑)을 붙인다.
   - 카드마다 색 번짐 + 제목의 동그란 색 아이콘
   - 표: 산자수 초록 · 포유개시 노랑 · 이유두수 파랑 큰 숫자, 사산 · 미라 · 도태 · 압사는 0 이 아닐 때만 빨간 알약
   - 폰(640px 아래)에서는 표의 줄을 그대로 카드로 보인다 (줄에 붙는 기능 · 검사가 그대로 돈다). 칸 머리는 정렬 알약
   - 이번 주 평균보다 2두 넘게 적은 모돈은 주황 테두리 + '평균보다 n 적음'
   - 달력: 월요일 시작 + 줄 왼쪽 ISO 주 알약 */
body.jv { --c-far: var(--t-amber, #f5a524); --c-wean: var(--t-blue, #4ea8ff); --c-born: var(--accent); --c-bad: var(--t-red, #ef4444); --c-low: var(--t-orange, #fb923c); --stg: var(--c-far); }
body.jv.jv-wean { --stg: var(--c-wean); }

/* 카드 */
body.jv :is(#createTab, #recordsTab, #calendarTab) > .card { position: relative; overflow: hidden; --sec: var(--accent); border-color: color-mix(in srgb, var(--sec) 35%, var(--line)) !important;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sec) 14%, transparent), transparent 55%), var(--surface) !important;
  animation: jv-rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ci, 0) * 90ms); }
body.jv #createTab > .card.v-input { --sec: var(--stg); --ci: 1; } body.jv #createTab > .card.v-list { --sec: var(--stg); --ci: 2; } body.jv #createTab > .card.v-stats { --ci: 3; }
body.jv .card-title { display: flex !important; align-items: center !important; gap: 8px; font-weight: 900 !important; }
body.jv .hanul-symbol { display: inline-flex !important; align-items: center; }
body.jv #createTab > .card .card-title > .hanul-symbol svg, body.jv #createTab > .card .card-title > svg, body.jv #createTab > .card .card-title > span > svg, body.jv #createTab > .card .card-title > span > .hanul-symbol svg,
body.jv .jv-card h3 > svg, body.jv .jv-card h3 > .hanul-symbol svg, body.jv #calendarTitle svg {
  flex: none; width: 30px !important; height: 30px !important; padding: 6px; box-sizing: border-box; border-radius: 50%; background: var(--sec, var(--accent)); color: var(--bg) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec, var(--accent)) 20%, transparent); }
body.jv #calendarTitle { --sec: var(--accent); }
body.jv :is(.week-display, .period-display) { background: color-mix(in srgb, var(--stg) 16%, var(--bg)) !important; border: 1px solid color-mix(in srgb, var(--stg) 45%, var(--line)) !important; border-radius: 10px !important; font-weight: 900 !important; color: var(--ink) !important; }
@media (max-width: 768px) { body.jv :is(#recordsTab, #tab-history) .record-select { padding: 12px 4px 12px 10px; font-size: .88rem; } }

/* 표의 숫자 */
body.jv .vc-table td.v-born { color: var(--c-born) !important; font-weight: 900 !important; }
body.jv .vc-table td.v-far { color: var(--c-far) !important; font-weight: 900 !important; }
body.jv .vc-table td.v-wean { color: var(--c-wean) !important; font-weight: 900 !important; }
body.jv .vc-table td.v-acc { color: var(--ink-soft) !important; opacity: .5; }
body.jv .vc-table td.v-acc.on { opacity: 1; }
body.jv .vc-table td.v-acc.on > b { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 2px 8px; border-radius: 12px; background: var(--c-bad); color: var(--bg); font-weight: 900; }
body.jv .vc-table tbody tr { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--stg) 70%, transparent); }
body.jv .vc-table tbody tr.v-low { box-shadow: inset 4px 0 0 var(--c-low); }
body.jv .vc-table tbody tr.v-low > td { background-color: color-mix(in srgb, var(--c-low) 8%, transparent); }
body.jv .low-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--c-low); color: var(--bg); font-size: .72rem; font-weight: 900; white-space: nowrap; vertical-align: middle; }
body.jv .v-lowpill { display: inline-flex; align-items: center; margin-left: auto; padding: 2px 10px; border-radius: 12px; background: var(--c-low); color: var(--bg); font-size: .8rem; font-weight: 900; }
body.jv .v-lowpill[hidden] { display: none; }

/* 폰: 표의 줄을 카드로 */
@media (max-width: 640px) {
  body.jv .table-container:has(> .vc-table) { overflow: visible; }
  body.jv table.vc-table { min-width: 0 !important; display: block; }
  body.jv table.vc-table > thead { display: block; background: none; }
  body.jv table.vc-table > thead > tr { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
  body.jv table.vc-table > thead th { display: none; }
  body.jv table.vc-table > thead th.sortable { display: inline-flex; align-items: center; gap: 2px; position: static !important; padding: 4px 10px !important; border: 1px solid var(--line) !important; border-radius: 14px; background: transparent !important; box-shadow: none !important; font-size: .78rem !important; }
  body.jv table.vc-table > tbody { display: flex; flex-direction: column; gap: 10px; }
  body.jv table.vc-table > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 12px 12px 16px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--stg) 35%, var(--line)); background: color-mix(in srgb, var(--stg) 6%, var(--bg)); box-shadow: inset 4px 0 0 var(--stg); }
  body.jv table.vc-table > tbody > tr.v-low { border-color: color-mix(in srgb, var(--c-low) 70%, var(--line)); box-shadow: inset 4px 0 0 var(--c-low), 0 0 0 2px color-mix(in srgb, var(--c-low) 25%, transparent); background: color-mix(in srgb, var(--c-low) 8%, var(--bg)); }
  body.jv table.vc-table > tbody > tr.pending { border-color: var(--warn-30, var(--line)); background: var(--warn-10); }
  body.jv table.vc-table > tbody > tr > td { display: block; padding: 0 !important; border: 0 !important; background: none !important; position: static !important; box-shadow: none !important; text-align: left; order: 9; }
  body.jv table.vc-table > tbody > tr::before, body.jv table.vc-table > tbody > tr::after { content: ''; flex-basis: 100%; height: 0; }
  body.jv table.vc-table > tbody > tr::before { order: 4; } body.jv table.vc-table > tbody > tr::after { order: 7; }
  body.jv table.vc-table > tbody > tr > td.v-no { order: 1; font-size: 1.15rem; font-weight: 900 !important; color: var(--ink); }
  body.jv table.vc-table > tbody > tr > td.v-par { order: 2; padding: 1px 8px !important; border-radius: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent) !important; font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
  body.jv table.vc-table > tbody > tr > td.v-par::after { content: '산'; }
  body.jv table.vc-table > tbody > tr > td.v-act { order: 3; margin-left: auto; display: flex; gap: 6px; }
  body.jv table.vc-table > tbody > tr > td:is(.v-flow1, .v-flow2) { order: 5; font-size: 1.5rem; font-weight: 900 !important; font-variant-numeric: tabular-nums; }
  body.jv table.vc-table > tbody > tr > td.v-flow2 { order: 6; }
  body.jv table.vc-table > tbody > tr > td[data-l]::before { content: attr(data-l); margin-right: 6px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
  body.jv table.vc-table > tbody > tr > td.v-acc { order: 8; display: none; }
  body.jv table.vc-table > tbody > tr > td.v-acc.on { display: inline-flex; align-items: center; padding: 2px 9px !important; border-radius: 11px; background: color-mix(in srgb, var(--c-bad) 18%, transparent) !important; font-size: .76rem; font-weight: 800; color: var(--ink) !important; }
  body.jv table.vc-table > tbody > tr > td.v-acc.on::before { margin-right: 3px; font-size: .76rem; color: var(--ink); }
  body.jv table.vc-table > tbody > tr > td.v-acc.on > b { min-width: 0; padding: 0; background: none; color: var(--c-bad); }
  body.jv table.vc-table > tbody > tr > td.v-chip { order: 8; }
  body.jv table.vc-table > tbody > tr > td.v-hide { display: none; }
  body.jv table.vc-table > tbody > tr > td[colspan] { order: 1; flex: 1; text-align: center; }
}

/* 통계 칸 */
body.jv .col-born { --col: var(--c-born); } body.jv .col-far { --col: var(--c-far); } body.jv .col-wean { --col: var(--c-wean); } body.jv .col-accent { --col: var(--accent); }
body.jv .stats-grid .stat-item { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--col, var(--ink-soft)) 40%, var(--line)) !important; background: color-mix(in srgb, var(--col, var(--ink-soft)) 7%, var(--bg)) !important; }
body.jv .stats-grid .stat-item.v-key::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--col, var(--ink-soft)); }
body.jv .stats-grid .stat-item.v-key :is(.stat-value, .value, .stat-input) { color: var(--col) !important; font-weight: 900 !important; }
body.jv .stats-grid .stat-item.v-key :is(.stat-value, .value) { font-size: 1.6rem !important; }
body.jv .stats-grid .stat-item.v-acc .stat-label::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c-bad); vertical-align: middle; }
body.jv .stats-grid .stat-item.v-acc.on { box-shadow: inset 4px 0 0 var(--c-bad); } body.jv .stats-grid .stat-item.v-acc.on .stat-value { color: var(--c-bad) !important; }
body.jv .stats-grid .stat-item.v-acc:not(.on) { background: transparent !important; border-style: dashed !important; } body.jv .stats-grid .stat-item.v-acc:not(.on) .stat-value { opacity: .55; }

/* 기록 조회 */
body.jv .jv-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--stg) 45%, var(--line));
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--stg) 22%, transparent), transparent 60%), var(--surface); animation: jv-rise .45s both; }
body.jv .jv-wk { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 76px; height: 52px; padding: 0 12px; border-radius: 26px; background: var(--stg); color: var(--bg); font-size: 1.6rem; font-weight: 900; animation: jv-pop .4s both .15s; }
body.jv .jv-wk small { font-size: .9rem; margin-left: 2px; }
body.jv .jv-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } body.jv .jv-meta b { font-size: 1.05rem; font-weight: 900; color: var(--ink); }
body.jv .jv-meta span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); }
body.jv .jv-chip { display: inline-flex; padding: 2px 10px; border-radius: 12px; background: color-mix(in srgb, var(--stg) 18%, transparent); color: var(--ink); font-weight: 800; }
body.jv .jv-head .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: .9rem; }
@media (max-width: 640px) { body.jv .jv-head { flex-wrap: wrap; } body.jv .jv-head .btn { order: 3; width: 100%; justify-content: center; } }
body.jv .jv-card { position: relative; overflow: hidden; --sec: var(--stg); margin-bottom: 14px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--sec) 35%, var(--line));
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sec) 14%, transparent), transparent 55%), var(--surface); animation: jv-rise .45s both; animation-delay: calc(var(--ci, 0) * 90ms + 90ms); }
body.jv .jv-card.v-st { --sec: var(--accent); --ci: 1; }
body.jv .jv-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 1.05rem; font-weight: 900; color: var(--ink); }
body.jv .jv-card h3 .jv-n { margin-left: auto; padding: 2px 10px; border-radius: 12px; background: color-mix(in srgb, var(--sec) 22%, transparent); color: var(--ink); font-size: .8rem; font-weight: 800; }
body.jv .jv-card h3 .v-lowpill { margin-left: 0; }
body.jv .jv-card .table-container { margin: 0; }
body.jv .jv-sub { margin: 0 0 8px; font-size: .82rem; color: var(--ink-soft); }
body.jv .jv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { body.jv .jv-grid { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); } }
body.jv .jv-grid .jv-t:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { body.jv .jv-grid .jv-t:last-child:nth-child(odd) { grid-column: auto; } }
body.jv .jv-t { position: relative; overflow: hidden; padding: 14px 12px 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--col, var(--line)) 45%, var(--line)); background: color-mix(in srgb, var(--col, var(--ink-soft)) 7%, var(--bg)); }
body.jv .jv-t.key::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--col); }
body.jv .jv-t label { display: block; margin-bottom: 4px; font-size: .82rem; font-weight: 800; color: var(--ink); }
body.jv .jv-t .num { font-size: 1.5rem; font-weight: 900; line-height: 1.1; text-align: right; color: var(--col, var(--ink)); font-variant-numeric: tabular-nums; }
body.jv .jv-t .num small { margin-left: 2px; font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
body.jv .jv-t .sub { display: block; margin-top: 2px; text-align: right; font-size: .72rem; color: var(--ink-soft); }

/* 달력 */
body.jv .cal-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 20px; }
body.jv .cal-nav .btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; padding: 10px 14px; }
body.jv #calendarTitle { display: flex !important; align-items: center; gap: 8px; white-space: nowrap; font-size: 1.15rem !important; font-weight: 900 !important; }
@media (max-width: 768px) { body.jv .cal-nav { gap: 6px; } body.jv .cal-nav .btn { padding: 8px 10px; font-size: .85rem; } body.jv #calendarTitle { font-size: 1rem !important; gap: 6px; } body.jv #calendarTitle svg { width: 26px !important; height: 26px !important; padding: 5px; } }
body.jv #calendarGrid { grid-template-columns: minmax(56px, auto) repeat(7, 1fr) !important; }
body.jv .calendar-day-header { background: transparent !important; font-weight: 900 !important; color: var(--ink-soft) !important; }
body.jv .calendar-day-header.wkh { font-size: .75rem !important; }
body.jv :is(.calendar-day-header.sun, .calendar-day.sun .calendar-day-number) { color: var(--t-red, #ef4444) !important; }
body.jv :is(.calendar-day-header.sat, .calendar-day.sat .calendar-day-number) { color: var(--t-blue, #4ea8ff) !important; }
body.jv #calendarGrid .calendar-day { aspect-ratio: auto !important; min-height: 52px; cursor: pointer; background: color-mix(in srgb, var(--ink) 3%, var(--bg)) !important; border-color: var(--line) !important; animation: jv-rise .35s both; animation-delay: calc(var(--r, 0) * 60ms); }
@media (min-width: 900px) { body.jv #calendarGrid .calendar-day { min-height: 76px; } }
body.jv #calendarGrid .calendar-day .calendar-day-number { font-weight: 800 !important; opacity: 1 !important; }
body.jv #calendarGrid .calendar-day.wk { background: color-mix(in srgb, var(--accent) 12%, var(--bg)) !important; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important; }
body.jv #calendarGrid .calendar-day.today { background: var(--accent) !important; border: 2px solid var(--accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
body.jv #calendarGrid .calendar-day.today .calendar-day-number { color: var(--bg) !important; }
body.jv #calendarGrid .calendar-day.empty { opacity: .35; }
body.jv .wkcell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; cursor: pointer; font: inherit; animation: jv-rise .35s both; animation-delay: calc(var(--r, 0) * 60ms); }
body.jv .wkcell b { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 30px; padding: 0 8px; border-radius: 15px; font-size: .85rem; font-weight: 900; color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
body.jv .wkcell.wk b { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
body.jv .wkcell b small { margin-left: 2px; font-size: .65rem; opacity: .85; }
body.jv .wkcell i { font-style: normal; font-size: .66rem; font-weight: 900; padding: 0 6px; border-radius: 8px; background: var(--stg); color: var(--bg); }
body.jv .wkcell i.no { background: transparent; color: var(--ink-soft); border: 1px dashed var(--line); }

@keyframes jv-rise { from { transform: translateY(10px); opacity: 0; } }
@keyframes jv-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { body.jv :is(#createTab, #recordsTab, #calendarTab), body.jv :is(#createTab, #recordsTab, #calendarTab) * { animation: none !important; transition: none !important; } }
@media print { body.jv :is(#createTab, #recordsTab, #calendarTab) * { animation: none !important; } }
/* 폰 카드에서 양자 없음(-) 칩은 숨긴다 */
@media (max-width: 640px) { body.jv table.vc-table > tbody > tr > td.v-chip:has(> .ftag.none) { display: none; } }

/* ── 종부일지 (body.jv-breed, 2026-10-11) ──
   종부는 초록. 줄은 구분 색 띠(이유 청록 · 재발 노랑 · 유산 주황 · 공태 보라 · 후보 분홍 · 미발정 회색 · 도태 빨강).
   신규 작성 표는 여러 곳에서 줄을 만들므로 칸 자리(nth-child)와 구분 값으로 칠한다. 폰에서는 줄을 그대로 카드로 */
body.jv.jv-breed { --stg: var(--accent); --c-wn: var(--t-teal, #2dd4bf); --c-ret: var(--t-amber, #f5a524); --c-abo: var(--t-orange, #fb923c); --c-emp: #a78bfa; --c-cand: var(--t-pink, #f472b6); --c-noe: var(--ink-soft); --c-cull: var(--t-red, #ef4444); }
body.jv-breed :is(#tab-create, #tab-history, #tab-weekly) > :is(.card, .stats-card, .table-container, .search-section) { position: relative; --sec: var(--accent); border-color: color-mix(in srgb, var(--sec) 35%, var(--line)) !important;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sec) 14%, transparent), transparent 55%), var(--surface) !important; box-shadow: none !important;
  animation: jv-rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ci, 0) * 90ms); }
body.jv-breed :is(#tab-create, #tab-history, #tab-weekly) > .card { overflow: hidden; }
body.jv-breed #tab-create > .card.v-input { --sec: var(--c-wn); --ci: 1; } body.jv-breed #tab-create > .card.v-stats { --sec: var(--c-ret); --ci: 2; }
body.jv-breed #tab-history > .stats-card { --sec: var(--c-ret); --ci: 1; } body.jv-breed #tab-history > .table-container { --sec: var(--c-wn); --ci: 2; }
body.jv-breed :is(#tab-create, #tab-history, #tab-weekly) .card-title > :is(svg, .hanul-symbol svg), body.jv-breed :is(#tab-create, #tab-history, #tab-weekly) .card-title > span > :is(svg, .hanul-symbol svg) {
  flex: none; width: 30px !important; height: 30px !important; padding: 6px; box-sizing: border-box; border-radius: 50%; background: var(--sec, var(--accent)); color: var(--bg) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec, var(--accent)) 20%, transparent); }
body.jv-breed :is(#tab-create, #tab-history, #tab-weekly) .card-title > span { display: inline-flex; align-items: center; gap: 8px; }
body.jv-breed .filter-btn.active { background: var(--accent) !important; color: var(--bg) !important; border-color: var(--accent) !important; }

/* 줄의 구분 색 (--rc) */
body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr { --rc: var(--c-wn); box-shadow: inset 4px 0 0 var(--rc); }
body.jv-breed #sowInputTable > tbody > tr:has(select.sow-type.noestrus), body.jv-breed #historyTable > tbody > tr[data-type="미발정"] { --rc: var(--c-noe); }
body.jv-breed #sowInputTable > tbody > tr:has(select.sow-type.cull), body.jv-breed #historyTable > tbody > tr[data-type="도태"] { --rc: var(--c-cull); }
body.jv-breed #sowInputTable > tbody > tr:has(.type-badge.return), body.jv-breed #historyTable > tbody > tr[data-type="재발"] { --rc: var(--c-ret); }
body.jv-breed #sowInputTable > tbody > tr:has(.type-badge.abort), body.jv-breed #historyTable > tbody > tr[data-type="유산"] { --rc: var(--c-abo); }
body.jv-breed #sowInputTable > tbody > tr:has(.type-badge.empty), body.jv-breed #historyTable > tbody > tr[data-type="공태"] { --rc: var(--c-emp); }
body.jv-breed #sowInputTable > tbody > tr:has(.type-badge.candidate), body.jv-breed #historyTable > tbody > tr[data-type="후보"] { --rc: var(--c-cand); }
body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr:has(> td[colspan]) { box-shadow: none; }
body.jv-breed .type-badge:is(.return, .abort, .empty, .candidate), body.jv-breed #historyTable .v-type { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; background: color-mix(in srgb, var(--rc) 20%, transparent) !important; color: var(--ink) !important; font-weight: 800; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent); }
body.jv-breed #sowInputTable td:first-child, body.jv-breed #historyTable td:nth-child(2) { font-weight: 900; }

/* 종부 현황 칸: 칸 색 점 + 그 색 숫자 */
body.jv-breed .stats-grid .stat-item > label::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--col); vertical-align: middle; position: relative; top: -1px; }
body.jv-breed .stats-grid .stat-item .value { color: var(--col, var(--ink)) !important; font-weight: 900 !important; }
body.jv-breed .stats-grid .stat-item.v-key > label::before { display: none; }
body.jv-breed .col-wn { --col: var(--c-wn); } body.jv-breed .col-ret { --col: var(--c-ret); } body.jv-breed .col-abo { --col: var(--c-abo); } body.jv-breed .col-emp { --col: var(--c-emp); }
body.jv-breed .col-cand { --col: var(--c-cand); } body.jv-breed .col-noe { --col: var(--c-noe); } body.jv-breed .col-cull { --col: var(--c-cull); } body.jv-breed .col-ink { --col: var(--ink); }

/* 폰: 줄을 카드로 */
@media (max-width: 640px) {
  body.jv-breed div:has(> :is(#sowInputTable, #historyTable)) { overflow: visible !important; }
  body.jv-breed :is(#sowInputTable, #historyTable) { min-width: 0 !important; display: block; }
  body.jv-breed :is(#sowInputTable, #historyTable) > thead { display: block; background: none; }
  body.jv-breed :is(#sowInputTable, #historyTable) > thead > tr { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
  body.jv-breed :is(#sowInputTable, #historyTable) > thead th { display: none; }
  body.jv-breed #sowInputTable > thead th:nth-child(-n+3), body.jv-breed #historyTable > thead th.sortable, body.jv-breed #historyTable > thead th:first-child {
    display: inline-flex; align-items: center; gap: 2px; min-width: 0 !important; position: static !important; padding: 4px 10px !important; border: 1px solid var(--line) !important; border-radius: 14px; background: transparent !important; box-shadow: none !important; font-size: .78rem !important; cursor: pointer; }
  body.jv-breed :is(#sowInputTable, #historyTable) > tbody { display: flex; flex-direction: column; gap: 10px; }
  body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 12px 12px 16px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--rc) 35%, var(--line)); background: color-mix(in srgb, var(--rc) 6%, var(--bg)); box-shadow: inset 4px 0 0 var(--rc); }
  body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr > td { display: block; padding: 0 !important; border: 0 !important; background: none !important; position: static !important; box-shadow: none !important; text-align: left; order: 9; min-width: 0; }
  body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr::before, body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr::after { content: ''; flex-basis: 100%; height: 0; }
  body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr::before { order: 4; } body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr::after { order: 7; }
  body.jv-breed :is(#sowInputTable, #historyTable) > tbody > tr > td[colspan] { order: 1; flex: 1; text-align: center; padding: 20px 0 !important; }
  /* 신규 작성: 번호 · 산차 · 단추 / 구분 · 상태 · 종부일 · 최근 종부 / 메모 */
  body.jv-breed #sowInputTable > tbody > tr > td > :is(.sow-number-display, .sow-parity-display, .sow-date-display, .sow-last-week-display, .sow-memo-display) { display: inline; padding: 0; min-height: 0; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(1) { order: 1; font-size: 1.15rem; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(2) { order: 2; padding: 1px 8px !important; border-radius: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent) !important; font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(8) { order: 3; margin-left: auto; display: flex; gap: 6px; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(4) { order: 5; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(6) { order: 5; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(3), body.jv-breed #sowInputTable > tbody > tr > td:nth-child(5) { order: 6; font-size: .82rem; color: var(--ink-soft); }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(3)::before { content: '종부 '; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(5)::before { content: '최근 '; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(5):has(.sow-last-week[value=""]) { display: none; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(7) { order: 8; flex-basis: 100%; font-size: .85rem; color: var(--ink-soft); }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(7):has(.sow-memo[value=""]) { display: none; }
  body.jv-breed #sowInputTable > tbody > tr > td:nth-child(7)::before { content: '메모 '; font-weight: 700; }
  /* 기록 조회: 선택 · 번호 · 산차 · 상태 / 구분 · 종부일 / 1차 · 2차 · 사고 / 메모 */
  body.jv-breed #historyTable > tbody > tr > td:nth-child(1) { order: 1; }
  body.jv-breed #historyTable > tbody > tr > td:nth-child(2) { order: 1; font-size: 1.15rem; }
  body.jv-breed #historyTable > tbody > tr > td:nth-child(3) { order: 2; padding: 1px 8px !important; border-radius: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent) !important; font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
  body.jv-breed #historyTable > tbody > tr > td:nth-child(9) { order: 3; margin-left: auto; }
  body.jv-breed #historyTable > tbody > tr > td:nth-child(5) { order: 5; }
  body.jv-breed #historyTable > tbody > tr > td:nth-child(4) { order: 5; font-size: .82rem; color: var(--ink-soft); }
  body.jv-breed #historyTable > tbody > tr > td:nth-child(4)::before { content: '종부 '; }
  body.jv-breed #historyTable > tbody > tr > td:is(:nth-child(6), :nth-child(7), :nth-child(8)) { order: 8; flex: 1 1 30%; }
  body.jv-breed #historyTable > tbody > tr > td:is(:nth-child(6), :nth-child(7), :nth-child(8))::before { display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
  body.jv-breed #historyTable > tbody > tr > td:nth-child(6)::before { content: '1차 진단'; } body.jv-breed #historyTable > tbody > tr > td:nth-child(7)::before { content: '2차 진단'; } body.jv-breed #historyTable > tbody > tr > td:nth-child(8)::before { content: '사고'; }
  body.jv-breed #historyTable > tbody > tr > td:is(:nth-child(6), :nth-child(7), :nth-child(8)) select { width: 100%; }
  body.jv-breed #historyTable > tbody > tr > td:nth-child(10) { order: 10; flex-basis: 100%; }
}

/* 종부일지 기록 조회: 진단 진행 (시안 3) */
body.jv-breed .vd { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
body.jv-breed .vd[hidden] { display: none; }
body.jv-breed .vd .r { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; font-size: .82rem; font-weight: 800; color: var(--ink); }
body.jv-breed .vd .t { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2, var(--line)); }
body.jv-breed .vd .t > span { display: block; height: 100%; background: var(--accent); transition: flex-grow .4s; }
body.jv-breed .vd .t > span.rest { background: transparent; }
body.jv-breed .vd .r em { font-style: normal; font-weight: 700; color: var(--ink-soft); }
body.jv-breed #historyTable > tbody > tr[data-diag="ok"] { box-shadow: inset 4px 0 0 var(--rc), inset 0 -3px 0 color-mix(in srgb, var(--accent) 60%, transparent); }
body.jv-breed #historyTable > tbody > tr[data-diag="bad"] { box-shadow: inset 4px 0 0 var(--rc), inset 0 0 0 2px color-mix(in srgb, var(--c-cull) 55%, transparent); }
body.jv-breed #historyTable > tbody > tr[data-diag="bad"] > td { background-color: color-mix(in srgb, var(--c-cull) 6%, transparent); }
body.jv-breed #historyTable > tbody > tr > td[data-diag-label]::after { content: attr(data-diag-label); display: inline-flex; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: .72rem; font-weight: 900; vertical-align: middle; white-space: nowrap; }
body.jv-breed #historyTable > tbody > tr[data-diag="ok"] > td[data-diag-label]::after { background: var(--accent); color: var(--bg); }
body.jv-breed #historyTable > tbody > tr[data-diag="bad"] > td[data-diag-label]::after { background: var(--c-cull); color: var(--bg); }
body.jv-breed #historyTable > tbody > tr[data-diag="wait"] > td[data-diag-label]::after { border: 1px dashed var(--line); color: var(--ink-soft); }
@media (max-width: 640px) {
  body.jv-breed .vd { margin: 0 0 12px; }
  body.jv-breed #historyTable > tbody > tr[data-diag="ok"] { box-shadow: inset 4px 0 0 var(--rc), inset 0 -3px 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  body.jv-breed #historyTable > tbody > tr[data-diag="bad"] { border-color: var(--c-cull) !important; box-shadow: inset 4px 0 0 var(--rc), 0 0 0 2px color-mix(in srgb, var(--c-cull) 30%, transparent); background: color-mix(in srgb, var(--c-cull) 7%, var(--bg)); }
  body.jv-breed #historyTable > tbody > tr[data-diag="bad"] > td { background-color: transparent; }
  body.jv-breed #historyTable > tbody > tr[data-diag="wait"] { border-style: dashed; }
}
/* 기록 표 머리줄: 초록 바탕 위 초록 제목이 안 보였다 → 다른 카드처럼 바탕을 비우고 제목은 글자색 */
body.jv-breed #tab-history .table-header { background: transparent !important; color: var(--ink); border-bottom: 1px solid var(--line); }
body.jv-breed #tab-history .table-header .card-title { color: var(--ink) !important; font-weight: 900 !important; }
/* 종부일지 구분 고르기(이유 · 미발정 · 도태)도 다른 구분 칩과 같은 둥근 알약. 고를 수 있다는 표시로 작은 ▾ */
body.jv-breed #sowInputTable select.type-select { display: inline-flex; width: auto; min-width: 0; height: auto; margin: 0; padding: 3px 24px 3px 10px; border: 0; border-radius: 12px; font-size: .85rem; font-weight: 800; line-height: 1.4; color: var(--ink) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px, color-mix(in srgb, var(--rc) 20%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent); }
body.jv-breed #sowInputTable select.type-select option { color: var(--ink); background: var(--surface-solid, var(--surface)); }