/* ============================================================================
   분만사 지도와 분만 스톱워치 — /sow-management/farrowing-stalls.html
   ----------------------------------------------------------------------------
   · 색은 한울 그린(calm.css)의 토큰만 쓴다. 테마 넷이 모두 따라온다.
   · 지도의 칸은 어느 줄이든, 분만 중이든 아니든 크기가 같다.
     테두리 굵기도 늘 같고 색만 바뀐다 (굵어지면 칸이 흔들려 보인다).
   · 30분 넘으면 주황, 1시간 넘으면 빨강으로 깜빡인다.
     움직임을 줄이도록 설정한 기기에서는 깜빡이지 않고 색만 남는다.
   ========================================================================== */

/* ── 못 보낸 터치 알림 — 신호가 끊긴 채로 누른 것이 몇 마리 남았는지 ──────── */
.fsqueue { position:sticky; top:8px; z-index:30; display:flex; align-items:center; gap:9px; margin:0 0 12px;
    padding:11px 13px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.28);
    border:1px solid var(--warn,#c2680c); background:var(--warn-10,rgba(194,104,12,.1));
    backdrop-filter:blur(8px); color:var(--ink); font-size:.84rem; font-weight:700; line-height:1.5; }
@media (max-width:768px) { .fsqueue { top:56px; } }
.fsqueue[hidden] { display:none; }
.fsqueue svg.hanul-line-icon { width:18px; height:18px; flex:0 0 auto; color:var(--warn,#c2680c); }
.fsqueue span { flex:1; min-width:0; }
.fsqueue b { color:var(--warn,#c2680c); }
.fsqueue button { flex:0 0 auto; border:1px solid var(--warn,#c2680c); background:transparent; color:var(--warn,#c2680c);
    border-radius:9px; padding:8px 12px; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }

/* ── 방 고르기 · 축사 한 장 ─────────────────────────────────────────────────
   지도가 화면 세로를 늘 차지하던 것을 걷어냈다. 평소에는 방 이름 칩 한 줄만 있고,
   방을 누르면 그 방 지도가 판으로 뜬다. 축사 전체 그림은 [축사 보기] 로 편다.
   칸 앞에 서 있을 때는 어느 방인지 이미 아니까, 고르는 단계가 길 필요가 없다. */
.fsbar { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
/* 방 고르기 = 번호 동그라미 한 줄 (사장님 2026-10-16 시안 3). 열 방이 폰 한 줄에 다 들어간다.
   테두리 색 = 그 방에 가장 많은 것(분만 전 노랑 · 포유 파랑 · 빈 방 점선), 분만 중은 꽉 찬 색 + 칸 수.
   theme.css 가 낮 · 한울 · 태극에서 button 을 !important 로 칠하므로 #rooms 로 세게 잡는다. */
.fsrooms { display:flex; flex-wrap:nowrap; gap:5px; padding-top:7px; }
#rooms button { --k:var(--ink-dim); position:relative; flex:1 1 0; min-width:0; max-width:40px; aspect-ratio:1; padding:0 !important;
    display:inline-flex; align-items:center; justify-content:center; border-radius:50% !important;
    border:2.5px solid var(--k) !important; background:color-mix(in srgb, var(--k) 12%, var(--surface)) !important; color:var(--ink) !important;
    font:inherit; font-size:.9rem; font-weight:900; font-variant-numeric:tabular-nums; cursor:pointer; }
#rooms button.k-pre { --k:var(--t-amber); }
#rooms button.k-nurse { --k:var(--t-blue, #3b82f6); }
#rooms button.k-empty { border:2px dashed var(--ink-dim) !important; background:transparent !important; color:var(--ink-dim) !important; }
#rooms button.on { --k:var(--accent); background:var(--accent) !important; color:var(--accent-ink) !important; }
#rooms button.on.late { border-color:var(--t-red,#e5484d) !important; }
#rooms button .n { position:absolute; top:-7px; right:-7px; min-width:17px; height:17px; padding:0 3px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; font-size:.62rem; line-height:1; }
.fsbarnbar { display:flex; align-items:center; gap:8px; }
.fshelp { font-size:.74rem; font-weight:700; color:var(--ink-dim); }
/* 색 견본 (안내 글 대신) · 축사 접기는 화살표 아이콘만 (2026-10-16 시안 3) */
.fslg { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.fslg i { width:9px; height:9px; border-radius:3px; margin-left:6px; background:var(--accent); }
.fslg i:first-child { margin-left:0; }
.fslg i.pre { background:var(--t-amber); } .fslg i.nurse { background:var(--t-blue, #3b82f6); }
.fslg i.empty { background:transparent; border:1.5px dashed var(--ink-dim); }
.fssr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#barnToggle { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0 !important;
    border:1px solid var(--line-2,var(--line)) !important; background:var(--surface) !important; color:var(--ink-soft) !important;
    border-radius:50% !important; cursor:pointer; }
#barnToggle svg { width:18px; height:18px; }
.fsbarn { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:12px 10px;
    border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.fsbarn[hidden] { display:none; }
.fsroom { border:none; background:transparent; padding:2px; display:flex; flex-direction:column;
    align-items:center; gap:4px; font:inherit; cursor:pointer; }
.fsroom .lbl { font-size:.68rem; font-weight:800; color:var(--ink-dim); }
.fsroom.on .lbl { color:var(--ink); }

/* ── 칸을 점 하나로 (축사 그림 · 카드 옆 미니맵) ──────────────────────────── */
.fsmini { display:inline-flex; gap:1px; align-items:flex-start; --mc:4px; }
.fsmini.h { flex-direction:column; }
.fsmini.big { --mc:7px; gap:2px; }
.fsmini .ln { display:flex; flex-direction:column; gap:1px; }
.fsmini.h .ln { flex-direction:row; }
.fsmini.big .ln { gap:2px; }
.fsmini .ai { display:block; width:2px; align-self:stretch; background:var(--line-2,var(--line)); opacity:.6; }
.fsmini.big .ai { width:4px; }
.fsmini.h .ai { width:100%; height:2px; align-self:auto; }
.fsmini i { display:block; width:var(--mc); height:var(--mc); border-radius:1px; background:var(--line); opacity:.45; }
.fsmini i.has { opacity:1; background:var(--line-2,var(--line)); }
.fsmini i.run { opacity:1; background:var(--accent); }
.fsmini i.warn { opacity:1; background:var(--t-orange,#c2680c); }
.fsmini i.danger { opacity:1; background:var(--t-red,#e5484d); }
.fsmini i.hi { outline:2px solid var(--ink-strong); outline-offset:1px; border-radius:2px; }

/* 분만 요약 띠 — 카드 바로 위. 분만 중 · 간격 확인 · 오늘 종료 */
.fssum { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:2px 0 10px; border-radius:10px;
    border:1px solid var(--line); background:var(--surface); overflow:hidden; }
.fssum > span { display:flex; align-items:baseline; justify-content:center; gap:4px; padding:7px 4px; min-width:0;
    font-size:.72rem; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.fssum > span + span { border-left:1px solid var(--line); }
/* 숫자는 19px 이상 굵게 — 큰 글씨라 한울 테마의 주황 글자도 읽힌다 (대비 3:1 기준) */
.fssum b { font-size:1.2rem; line-height:1.15; font-weight:900; color:var(--ink-strong); font-variant-numeric:tabular-nums; }
.fssum .run b { color:var(--accent); }
/* 늦으면 칸 바탕을 칠하지 않고 아래에 색 줄을 긋는다. 밤에 빨간 숫자를 붉은 바탕에 올리면 읽기 어렵다 */
.fssum .rv.warn { box-shadow:inset 0 -3px 0 var(--t-orange,#c2680c); }
.fssum .rv.warn b { color:var(--t-orange,#c2680c); }   /* 글자는 글자용 진한 주황 */
.fssum .rv.danger { box-shadow:inset 0 -3px 0 var(--t-red,#e5484d); }
.fssum .rv.danger b { color:var(--t-red,#e5484d); }
/* 이어서 등록 — 방금 넣은 칸 한 줄 */
.fsnext { display:flex; align-items:center; gap:6px; margin:0 0 10px; padding:8px 11px; border-radius:10px;
    background:var(--accent-10); color:var(--ink); font-size:.82rem; font-weight:700; }
.fsnext svg.hanul-line-icon { width:16px; height:16px; flex:0 0 auto; color:var(--accent); }
.fshint { font-size:.76rem; color:var(--ink-dim); margin:10px 2px 0; line-height:1.7; }

/* 빈 화면 — 다른 화면(모돈 검색 등)과 같은 모양: 큰 아이콘 + 가운데 두 줄 */
.fsempty { text-align:center; padding:48px 20px; color:var(--ink-dim); }
.fsempty svg.hanul-line-icon { width:44px; height:44px; color:var(--ink-dim); opacity:.7; }
.fsempty .t { font-size:1.05rem; color:var(--ink-soft); font-weight:800; margin:14px 0 6px; }
.fsempty .s { font-size:.86rem; color:var(--ink-dim); line-height:1.7; }

/* ── 분만 중 카드 ── */
.fscard { background:var(--surface); border:2px solid var(--line); border-radius:14px; padding:12px 13px; margin-bottom:9px; box-shadow:var(--shadow-soft,0 2px 8px rgba(0,0,0,.05)); }
.fscard .l0 { display:flex; gap:10px; align-items:flex-start; }
.fscard .l0 .fsmini { flex:0 0 auto; margin-top:3px; }
.fscard .l0t { flex:1; min-width:0; }
/* 글씨 크기 차례 (사장님 결정): 모돈번호 > 마지막 새끼 몇 분 전 > 방 · 분만 시작부터 흐른 시간 */
.fscard .l1 { display:flex; align-items:baseline; gap:8px; }
.fscard .l1 .s { font-size:2.05rem; font-weight:900; color:var(--ink-strong); letter-spacing:-.8px; line-height:1.05; text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.fscard .l1 .s small { font-size:.8rem; font-weight:800; color:var(--ink-dim); letter-spacing:0; }
.fscard .l1 .c { margin-left:auto; font-size:.85rem; font-weight:800; white-space:nowrap; }
/* 몇 마리째 (2026-10-16 선명 시안 2): 큰 노랑 숫자 · 작은 '마리째' · 사산 빨간 알약. 카드 높이는 그대로 */
.fscard .l1 .c { display:inline-flex; align-items:baseline; gap:3px; color:var(--t-amber); font-weight:900; }
.fscard .l1 .c b { font-size:2.05rem; line-height:1; letter-spacing:-1px; font-variant-numeric:tabular-nums; text-shadow:0 0 14px color-mix(in srgb, var(--t-amber) 45%, transparent); }
.fscard .l1 .c em { font-style:normal; font-size:.85rem; font-weight:800; color:var(--ink-soft); }
.fscard .l1 .c i { align-self:center; font-style:normal; margin-left:4px; padding:1px 7px; border-radius:999px; font-size:.72rem; font-weight:900; color:var(--ink);
  background:color-mix(in srgb, var(--t-red,#e5484d) 18%, var(--surface)); border:1px solid color-mix(in srgb, var(--t-red,#e5484d) 60%, transparent); }
.fscard .l2 { display:flex; align-items:center; gap:10px; margin:6px 0 0; }
.fscard .since { font-size:.82rem; font-weight:800; color:var(--ink-soft); white-space:nowrap; }
.fscard .since b { font-size:1.45rem; font-weight:900; color:var(--fsst-ink, var(--accent)); font-variant-numeric:tabular-nums; letter-spacing:-.5px; margin-right:2px; }
.fscard .l3 { display:flex; align-items:center; gap:8px; margin-top:7px; font-size:.78rem; font-weight:800; color:var(--ink-dim); }
.fscard .l3 .w { white-space:nowrap; }
.fscard .clock { font-weight:900; font-variant-numeric:tabular-nums; color:var(--ink); }
/* 분만 막대 — 시작부터 3시간, 새끼마다 눈금 (사산은 빨강).
   메모 목록(div.fstl)과 이름이 같아 span 에만 건다. 예전엔 '분만 체크' 메모 줄이 폭 0 으로 눌려 한 글자씩 세로로 나왔다 */
span.fstl { flex:1; min-width:60px; height:12px; position:relative; border-radius:999px; background:var(--line); }
span.fstl .f { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:color-mix(in srgb, var(--accent) 35%, transparent); }
span.fstl .h { position:absolute; top:0; bottom:0; width:1px; background:var(--surface); }
span.fstl .k { position:absolute; top:-3px; bottom:-3px; width:3px; margin-left:-1.5px; border-radius:2px; background:var(--ink-strong); }
span.fstl .k.d { background:var(--t-red,#e5484d); }
/* 간격 막대 — 가운데 눈금이 30분, 끝이 60분 */
.fsgapbar { flex:1; min-width:40px; height:10px; position:relative; border-radius:999px; background:var(--line); overflow:hidden; }
.fsgapbar i { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:var(--fsst, var(--accent)); }   /* 단계 색(주의 노랑 · 경고 주황 · 늦음 빨강)은 calm.css 의 --fsst */
.fsgapbar b { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--ink-dim); }
.fscard .acts { display:flex; gap:7px; margin-top:10px; }
.fscard .acts button { border:1px solid var(--line-2,var(--line)); background:var(--surface-2,var(--bg)); color:var(--ink);
    border-radius:11px; padding:13px 8px; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; flex:1; }
.fscard .acts .plus { flex:1.7; border:none; background:var(--accent); color:var(--accent-ink); font-size:1rem; padding:15px 8px; }
.fscard .acts .dead { flex:1; }
.fscard .acts .end { border-color:var(--t-red,#e5484d); }
.fscard.warn { border-color:var(--warn,#c2680c); background:var(--warn-10,rgba(194,104,12,.1)); }
.fscard.warn .clock { color:var(--warn,#c2680c); }
.fscard.danger { border-color:var(--t-red,#e5484d); background:rgba(224,87,71,.12); }
.fscard.danger .since { color:var(--t-red,#e5484d); }
/* 분만 메모 한 줄 — 카드와 기록 보기가 같이 쓴다. 적힌 게 있으면 그대로 보인다 */
.fsmemo { display:flex; align-items:flex-start; gap:7px; width:100%; margin-top:8px; padding:9px 11px;
    border:1px dashed var(--line-2,var(--line)); border-radius:10px; background:transparent; color:var(--ink-dim);
    font:inherit; font-size:.82rem; font-weight:700; text-align:left; cursor:pointer; }
.fsmemo.has { border-style:solid; border-color:var(--accent-30,var(--line)); background:var(--accent-10); color:var(--ink); }
.fsmemo svg.hanul-line-icon { width:15px; height:15px; flex:0 0 auto; margin-top:2px; }
.fsmemo span { white-space:pre-wrap; word-break:break-word; }
.fstext { width:100%; padding:11px 12px; border:1px solid var(--line-2,var(--line)); border-radius:10px;
    background:var(--field,var(--surface)); color:var(--ink); font:inherit; font-size:.95rem; line-height:1.6;
    resize:vertical; min-height:96px; }

.fscard .ask { margin-top:9px; font-size:.8rem; font-weight:800; color:var(--warn,#c2680c); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.fscard .ask .rm { border:1px solid var(--warn,#c2680c); color:var(--warn,#c2680c); background:transparent;
    border-radius:9px; padding:6px 11px; font:inherit; font-weight:800; cursor:pointer; }

/* ── 지도 ── */
.fsmap { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; }
/* 옆으로 미는 일은 껍데기가 맡고, 배치는 가운데로 모은다.
   전에는 배치에 min-width:100% 가 걸려 PC 에서 왼쪽에 쏠리고 오른쪽이 비었다. */
.fsscroll { overflow-x:auto; scrollbar-width:none; }
.fsscroll::-webkit-scrollbar { display:none; }
.fsrow { display:flex; gap:8px; width:max-content; margin:0 auto; padding-bottom:4px; }
.fscol { display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
.fsaisle { flex:0 0 16px; border-radius:4px; background:repeating-linear-gradient(135deg, var(--surface-3,var(--line)) 0 5px, transparent 5px 10px); }
/* 세로 줄(flex-direction:column)에서는 flex-basis 가 '높이'가 된다. 0 0 150px 로 두면
   칸이 150px 높이로 늘어나 화면을 두 배로 먹었다. 크기는 width·height 로만 정한다. */
/* 칸 번호와 모돈번호를 한 줄에 두어 세 줄로 줄였다 (90px → 72px).
   빈 칸의 '눌러서 모돈 등록' 은 칸마다 되풀이돼 한 방에 30번까지 나왔다.
   안내는 지도 밑에 한 번만 두고, 칸에는 번호와 상태만 남긴다. */
.fstile { flex:0 0 auto; width:var(--tw,150px); height:72px; border:2px solid var(--line); background:var(--surface-2,var(--bg));
    border-radius:11px; padding:7px 9px; display:flex; flex-direction:column; position:relative; overflow:hidden;
    font:inherit; text-align:left; color:inherit; cursor:pointer; }
.fstile .top { display:flex; align-items:baseline; gap:5px; min-width:0; }
.fstile .no { flex:0 0 auto; font-size:.66rem; color:var(--ink-dim); font-weight:800; }
.fstile .sow { font-size:1.02rem; font-weight:900; color:var(--ink-strong); letter-spacing:-.4px; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fstile .time { font-size:1.35rem; font-weight:900; line-height:1.1; margin-top:1px; font-variant-numeric:tabular-nums; }
.fstile .meta { font-size:.66rem; color:var(--ink-soft); margin-top:auto; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fstile.empty { background:transparent; border-style:dashed; border-color:var(--line-2,var(--line)); opacity:.62; justify-content:center; }
.fstile.empty .sow { color:var(--ink-dim); font-size:.82rem; font-weight:700; }
.fstile.done { background:var(--accent-10); border-color:var(--accent-30,var(--accent)); }
.fstile.run { border-color:var(--accent); background:var(--accent-10); }
.fstile.run .time { color:var(--accent); }
.fstile.warn { border-color:var(--t-orange,#c2680c); background:color-mix(in srgb, var(--t-orange,#c2680c) 10%, transparent); }
.fstile.warn .time { color:var(--t-orange,#c2680c); }
.fstile.danger { border-color:var(--t-red,#e5484d); background:rgba(224,87,71,.12); }
.fstile.danger .time { color:var(--t-red,#e5484d); }
.fstile .flag { position:absolute; top:7px; right:8px; width:9px; height:9px; border-radius:50%; }
/* 점이 있는 칸은 모돈번호가 점 밑으로 파고들지 않게 오른쪽을 비워 둔다 */
.fstile.run .top, .fstile.warn .top, .fstile.danger .top { padding-right:13px; }
.fstile.run .flag { background:var(--accent); } .fstile.warn .flag { background:var(--t-orange,#c2680c); }
.fstile.danger .flag { background:var(--t-red,#e5484d); }
/* 돌려 그린 방(10방) 안내 — 지도 위에 한 줄 */
.fsturned { display:flex; align-items:center; gap:6px; margin:0 2px 8px; font-size:.74rem; font-weight:700; color:var(--ink-soft); }
.fsturned svg.hanul-line-icon { width:14px; height:14px; flex:0 0 auto; color:var(--ink-dim); }
.fslegend { display:flex; gap:12px; flex-wrap:wrap; margin-top:11px; font-size:.7rem; color:var(--ink-dim); }
.fslegend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:4px; vertical-align:-1px; }

@keyframes fsblink { 0%,100% { opacity:1 } 50% { opacity:.5 } }
.fsblink { animation:fsblink 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fsblink { animation:none; } }

/* ── 왼쪽에 붙는 방 지도 판 (PC) ────────────────────────────────────────────
   가운데 뜨는 판은 뒤를 다 가려서, 지도를 보는 동안 분만 중 카드가 안 보였다.
   가로가 넉넉하면 지도를 왼쪽에 붙여 두고 카드를 오른쪽에 놓는다.
   카드를 내려도 지도가 자리에 남는다 (position:sticky). */
.fspanel { border:1px solid var(--line-2,var(--line)); border-radius:14px;
    background:var(--surface-solid,var(--surface)); padding:14px 14px 16px; margin:0 0 14px; }
.fspanel[hidden] { display:none; }
.fspanel-hd { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.fspanel-hd b { font-size:1rem; font-weight:900; color:var(--ink-strong); }
.fspanel-hd .mv { margin-left:auto; display:flex; gap:4px; }
.fspanel-hd .mv[hidden] { display:none; }
.fspanel-hd .mv button { border:1px solid var(--line-2,var(--line)); background:transparent; color:var(--ink-dim);
    border-radius:9px; padding:5px 7px; line-height:0; cursor:pointer; }
.fspanel-hd .mv svg.hanul-line-icon { width:16px; height:16px; }
.fspanel-hd .x { margin-left:8px; border:1px solid var(--line-2,var(--line)); background:transparent;
    color:var(--ink); border-radius:11px; min-height:44px; padding:8px 18px; font:inherit; font-size:.95rem;
    font-weight:900; cursor:pointer; }
.fspanel-hd .mv[hidden] + .x { margin-left:auto; }
/* 옆으로 더 볼 게 남았으면 그쪽 가장자리를 흐리게 덮는다 */
#mapPanel .fsmap { position:relative; }
#mapPanel .fsmap::after, #mapPanel .fsmap::before { content:''; position:absolute; top:1px; bottom:1px; width:30px;
    pointer-events:none; opacity:0; transition:opacity .15s; }
#mapPanel .fsmap::after { right:1px; border-radius:0 13px 13px 0;
    background:linear-gradient(90deg, transparent, var(--surface)); }
#mapPanel .fsmap::before { left:1px; border-radius:13px 0 0 13px;
    background:linear-gradient(270deg, transparent, var(--surface)); }
#mapPanel.more .fsmap::after { opacity:1; }
#mapPanel.back .fsmap::before { opacity:1; }

/* ── 뜨는 판 (모돈 등록·분만 시작·터치 고치기) ─────────────────────────────
   아래에 붙는 시트라 이 화면만 달라 보였다. 다른 화면(직원 관리 등)처럼
   가운데 뜨는 카드로 맞춘다. 덮개 색도 프로젝트 토큰(--scrim-80)을 쓴다.
   긴 내용은 덮개가 스크롤한다 (직원 관리와 같은 방식). */
/* 폰 상단 바(.hanul-mobile-bar)가 z-index:150 이다. 아래에 붙는 시트일 때는 안 겹쳤지만
   가운데 뜨는 판은 맨 위가 상단 바에 가렸다. 창은 상단 바보다 위에 있어야 한다. */
.fssheet { position:fixed; inset:0; z-index:200; background:var(--scrim-80,rgba(0,0,0,.55));
    display:flex; align-items:flex-start; justify-content:center; padding:32px 14px; overflow:auto; }
/* display:flex 가 [hidden] 의 display:none 을 눌러, 닫힌 판이 화면 전체를 막고 있었다 */
.fssheet[hidden] { display:none; }
.fssheet-in { width:100%; max-width:520px; background:var(--surface-solid,var(--surface));
    border:1px solid var(--line-2,var(--line)); border-radius:16px; padding:20px 22px; }
@media (max-width:480px) { .fssheet { padding:16px 12px; } .fssheet-in { padding:16px 16px 20px; } }
.fssheet-hd { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.fssheet-hd b { font-size:1.05rem; font-weight:900; color:var(--ink-strong); }
.fssheet-hd .x { margin-left:auto; border:none; background:transparent; color:var(--ink-dim); cursor:pointer; padding:4px; }
/* 닫기(×)는 장갑 손으로도 한 번에 — 48px 네모 단추 (2026-10-14 사장님: 방 지도 오른쪽 위 닫기가 너무 작다) */
.fssheet-hd .x { flex:none; width:48px; height:48px; padding:0; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line-2,var(--line)); border-radius:12px; background:var(--surface-2,var(--bg)); color:var(--ink); }
.fssheet-hd .x svg, .fssheet-hd .x i { width:26px; height:26px; }
.fsfield { display:block; margin:10px 0 4px; font-size:.8rem; font-weight:800; color:var(--ink-soft); }
.fsinput { width:100%; padding:11px 12px; border:1px solid var(--line-2,var(--line)); border-radius:10px;
    background:var(--field,var(--surface)); color:var(--ink); font:inherit; font-size:.95rem; }
/* ── 늘리고 줄이는 칸 — 관리 화면(돈방 설정)의 것과 같은 모양 ────────────────
   아이폰 사파리의 datetime-local·number 는 최소 너비를 스스로 정해서
   width:100% 로도 판 밖으로 넘쳤다. 네이티브 칸 대신 ＋－ 를 쓴다. */
.fsstep { display:flex; align-items:stretch; border:1px solid var(--line-2,var(--line)); border-radius:10px; overflow:hidden; }
.fsstep button { flex:0 0 auto; width:56px; border:none; background:var(--surface-2,var(--bg)); color:var(--ink);
    font:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fsstep button:disabled { opacity:.32; cursor:default; }
.fsstep button svg.hanul-line-icon { width:19px; height:19px; }
.fsstep .v { flex:1; min-width:0; width:100%; text-align:center; font:inherit; font-size:1.05rem; font-weight:900;
    font-variant-numeric:tabular-nums; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line);
    background:var(--field,var(--surface)); color:var(--ink-strong); padding:13px 4px; display:flex;
    align-items:center; justify-content:center; }
.fsquick { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fsquick button { border:1px solid var(--line-2,var(--line)); background:var(--surface); color:var(--ink-soft);
    border-radius:999px; padding:7px 12px; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.fslist { max-height:42vh; overflow-y:auto; margin-top:8px; }
.fspick { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:11px;
    background:var(--surface-2,var(--bg)); color:inherit; font:inherit; margin-bottom:6px; cursor:pointer; text-align:left; }
.fspick b { font-size:1rem; font-weight:900; }
.fspick small { margin-left:auto; color:var(--ink-dim); font-size:.74rem; font-weight:700; }
.fsbtnrow { display:flex; gap:8px; margin-top:14px; }
.fsbtnrow button, .fsbtnrow a { flex:1; padding:14px; border-radius:12px; border:1px solid var(--line-2,var(--line));
    background:var(--surface-2,var(--bg)); color:var(--ink); font:inherit; font-size:.92rem; font-weight:800; cursor:pointer;
    text-align:center; text-decoration:none; }
.fsbtnrow button.main { border:none; background:var(--accent); color:var(--accent-ink); }
/* theme.css 는 낮·한울·태극에서 button 의 배경·글자·테두리를 !important 로 고정한다.
   초록 주 단추는 그 규칙이 허용하는 .btn-primary 로 만든다 (화면에서 class 로 붙인다).
   되돌릴 수 없는 단추는 이 앱의 다른 화면과 같게 보통 단추로 두고, 문구와 한 번 더 묻기로 알린다. */
.fsbtnrow button.danger { border-color:var(--t-red,#e5484d); }
.fsbirth { display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px dashed var(--line); font-size:.88rem; }
.fsprior { margin-top:12px; padding-top:2px; border-top:1px solid var(--line); }   /* 취소 판의 '이미 나와 있던 마릿수' 고치기 */
.fsbirth .i { font-weight:900; color:var(--ink-dim); min-width:2.2em; }
.fsbirth .t { font-variant-numeric:tabular-nums; font-weight:800; }
.fsbirth .g { color:var(--ink-dim); font-size:.76rem; }
.fsbirth .rm { margin-left:auto; border:1px solid var(--line-2,var(--line)); background:transparent; color:var(--t-red,#e5484d);
    border-radius:9px; padding:6px 11px; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
.fsbirth.dead .t { color:var(--ink-dim); text-decoration:line-through; }
.msg { font-size:.85rem; margin-top:12px; } .msg.ok { color:var(--t-green,#3cbf8b); } .msg.err { color:var(--t-red,#e5484d); }

/* 지난 분만 기록 — 한 건이 한 덩어리. 새끼마다 시각과 간격이 한 줄씩 */
.fssess { border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:10px; background:var(--surface-2,var(--bg)); }
.fssess-hd { display:flex; align-items:baseline; gap:8px; font-size:.82rem; color:var(--ink-dim); font-weight:700; }
.fssess-hd b { font-size:1rem; color:var(--ink-strong); font-weight:900; }
.fssess-hd .c { margin-left:auto; color:var(--ink); font-weight:800; }
.fssess-sum { display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 2px; font-size:.78rem; color:var(--ink-soft); }
.fssess-sum b { color:var(--ink-strong); font-size:.92rem; font-weight:900; margin-left:3px; }

/* ── 낮·한울·태극에서 색을 되살린다 ─────────────────────────────────────────
   theme.css 는 그 세 테마에서 모든 button 의 배경·글자·테두리를 !important 로
   고정한다. 칸(.fstile)은 button 이라 분만 중 초록·30분 주황·1시간 빨강이
   전부 흰 칸으로 눌렸다. 낮에는 늦은 칸을 눈으로 찾을 수 없었다.
   주 단추(.btn-primary)처럼, 상태가 있는 자리만 선택자를 한 단계 더 좁혀 되돌린다. */
.fsmap .fstile { background:var(--surface-2,var(--bg)) !important; border:2px solid var(--line) !important; }
.fsmap .fstile.empty { background:transparent !important; border:2px dashed var(--line-2,var(--line)) !important; }
.fsmap .fstile.done { background:var(--accent-10) !important; border-color:var(--accent-30,var(--accent)) !important; }
.fsmap .fstile.run { background:var(--accent-10) !important; border-color:var(--accent) !important; }
.fsmap .fstile.warn { background:color-mix(in srgb, var(--t-orange,#c2680c) 10%, transparent) !important; border-color:var(--t-orange,#c2680c) !important; }
.fsmap .fstile.danger { background:rgba(224,87,71,.12) !important; border-color:var(--t-red,#e5484d) !important; }
.fslive .fslivebtn.ok { background:var(--accent-10) !important; border:1px solid var(--accent) !important; color:var(--ink) !important; }
.fslive .fslivebtn.ok .t { color:var(--accent) !important; }
.fslive .fslivebtn.warn { background:color-mix(in srgb, var(--t-orange,#c2680c) 10%, transparent) !important; border:1px solid var(--t-orange,#c2680c) !important; color:var(--ink) !important; }
.fslive .fslivebtn.warn .t { color:var(--t-orange,#c2680c) !important; }
.fslive .fslivebtn.danger { background:rgba(224,87,71,.12) !important; border:1px solid var(--t-red,#e5484d) !important; color:var(--ink) !important; }
.fslive .fslivebtn.danger .t { color:var(--t-red,#e5484d) !important; }
.fscard .acts .end { border-color:var(--t-red,#e5484d) !important; color:var(--t-red,#e5484d) !important; }
.fscard .ask button.rm { background:transparent !important; color:var(--warn,#c2680c) !important;
    border:1px solid var(--warn,#c2680c) !important; }
/* 늦은 방만 빨강으로 되돌린다 (theme.css 는 .on 을 전부 accent 로 칠한다).
   배지와 축사 방 이름은 theme.css 의 'button.on span' 규칙보다 세게 잡아야 한다. id 로 잡는다. */
#rooms button.on .n { background:var(--ink) !important; color:var(--bg) !important; }
#rooms button.on.late .n { background:var(--t-red,#e5484d) !important; color:var(--accent-ink) !important; }
#barn button.fsroom { background:transparent !important; border:none !important; }
#barn button.fsroom .lbl { color:var(--ink-dim) !important; }
#barn button.fsroom.on .lbl { color:var(--ink-strong) !important; }
/* 되돌릴 수 없는 단추(기록 없애기·메모 지우기)도 낮에는 테두리가 지워졌다 */
.fssheet .fsbtnrow button.danger { background:var(--surface) !important; color:var(--t-red,#e5484d) !important;
    border:1px solid var(--t-red,#e5484d) !important; }
.fssheet .fsstep button { background:var(--surface-2,var(--bg)) !important; color:var(--ink) !important; border:none !important; }
.fscard button.fsmemo, .fssess button.fsmemo { background:transparent !important; color:var(--ink-dim) !important;
    border:1px dashed var(--line-2,var(--line)) !important; }
.fscard button.fsmemo.has, .fssess button.fsmemo.has { background:var(--accent-10) !important; color:var(--ink) !important;
    border:1px solid var(--accent-30,var(--accent)) !important; }
.fsqueue button { background:transparent !important; color:var(--warn,#c2680c) !important;
    border:1px solid var(--warn,#c2680c) !important; }
.fssheet .fsquick button { background:var(--surface) !important; color:var(--ink-soft) !important; border:1px solid var(--line-2,var(--line)) !important; }
#mapPanel .fspanel-hd .x, #mapPanel .fspanel-hd .mv button { background:transparent !important;
    color:var(--ink-dim) !important; border:1px solid var(--line-2,var(--line)) !important; }
#mapPanel .fspanel-hd .x { color:var(--ink) !important; }
/* 왼쪽에 띄워 둔 방은 테두리로 표시한다. outline 은 theme.css 가 안 덮는다 */
#rooms button.sel { outline:2px solid var(--accent); outline-offset:2px; }

/* ── PC ─────────────────────────────────────────────────────────────────────
   폰 배치를 그대로 늘려 놓아, 1440px 에서 카드 하나가 1312px 폭에 [새끼 +1] 이
   448px 짜리 띠가 됐다. 글자와 마릿수 사이도 화면 끝까지 벌어졌다.
   가로가 남으면 카드를 격자로 놓는다. 카드 하나하나는 폰과 비슷한 비율을 지키고,
   대신 한 화면에 여러 건이 보인다. 미니맵과 축사 그림도 가로가 남는 만큼 키운다. */
@media (min-width: 769px) {
  #body { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px; align-items:start; }
  #body > .fssum, #body > .fsempty, #body > .fshint { grid-column:1 / -1; }
  .fssum > span { font-size:.8rem; padding:9px 6px; }
  .fssum b { font-size:1.3rem; }
  .fscard { margin-bottom:0; }
  .fscard .fsmini { --mc:6px; }
  .fsrooms { gap:8px; }
  #rooms button { flex:0 0 40px; font-size:1rem; }
  .fsbarn { gap:18px; padding:16px 14px; }
  .fsmini.big { --mc:10px; gap:3px; }
  .fsmini.big .ln { gap:3px; }
  .fsmini.big .ai { width:5px; }
  .fsroom .lbl { font-size:.78rem; }
  /* 방 지도 판은 가로가 남으니 8·9방이 옆으로 밀리지 않게 넓힌다 */
  .fssheet-in { max-width:720px; }
}

/* 넓은 모니터에서는 축사 그림이 가운데에 작게 뭉쳐 보인다. 칸을 더 키운다. */
@media (min-width: 1200px) {
  .fsbarn { gap:26px; }
  .fsmini.big { --mc:13px; gap:4px; }
  .fsmini.big .ln { gap:4px; }
  .fsmini.big .ai { width:6px; }
}

/* ── PC 좌우 2단 — 왼쪽 방 지도, 오른쪽 분만 중 카드 ────────────────────────
   1100px 아래에서는 지도를 붙여 둘 자리가 없어 지금처럼 가운데 판으로 뜬다. */
@media (min-width: 1100px) {
  .fssplit.on { display:grid; grid-template-columns:min(440px, 40%) 1fr; gap:16px; align-items:start; }
  .fssplit.on > .fspanel { position:sticky; top:14px; margin:0;
      max-height:calc(100vh - 28px); overflow-y:auto; }
  /* 칸이 많은 방(8·9·10방)은 판에 다 안 들어간다. 마우스로도 옆으로 밀 수 있게
     여기서는 가로 막대를 보여 준다 (폰에서는 손가락으로 미니까 계속 숨긴다). */
  #mapPanel .fsscroll { scrollbar-width:thin; padding-bottom:2px; }
  #mapPanel .fsscroll::-webkit-scrollbar { display:block; height:8px; }
  #mapPanel .fsscroll::-webkit-scrollbar-thumb { background:var(--line-2,var(--line)); border-radius:99px; }
}

/* ── 분만일지 붙이기 — 칸의 일지 숫자, 방 한 줄 요약, 일지 안 쓴 모돈 띠 ────────── */
.fstile .meta.wrap { white-space:normal; overflow:visible; text-overflow:clip; }   /* 일지 숫자는 잘리지 않게 두 줄까지 */
.fstile .meta b.fsnoj { color:var(--t-orange,#c2680c); font-weight:800; }
.fstile .meta b.fsover, .fshint b.fsover { color:var(--t-red,#e5484d); font-weight:800; }
/* 방 요약 색 칸 넷 (2026-10-13 선명 스타일 시안 5) */
.fsroomsum { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:0 0 10px; }
.fsroomsum .rs { position:relative; overflow:hidden; border-radius:10px; border:1px solid var(--line); padding:7px 9px 6px; --c:var(--ink-dim);
    background:radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), var(--surface-2, var(--surface)); }
.fsroomsum .rs::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); }
.fsroomsum .rs b { display:block; font-size:1.3rem; font-weight:900; color:var(--c); line-height:1.05; font-variant-numeric:tabular-nums; }
.fsroomsum .rs span { display:block; font-size:.74rem; font-weight:800; color:var(--ink); }
.fsroomsum .rs small { display:block; font-size:.62rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsroomsum .pre { --c:var(--t-amber); } .fsroomsum .run { --c:var(--accent); } .fsroomsum .nurse, .fsroomsum .pig { --c:var(--t-blue, #3b82f6); }
.fsjbar { display:flex; align-items:center; gap:9px; margin:0 0 10px; padding:9px 12px; border-radius:10px;
    border:1px solid var(--t-orange,#c2680c); background:color-mix(in srgb, var(--t-orange,#c2680c) 8%, transparent);
    color:var(--ink); font-size:.82rem; font-weight:700; }
.fsjbar svg.hanul-line-icon { width:17px; height:17px; flex:0 0 auto; color:var(--t-orange,#c2680c); }
.fsjbar span { flex:1; min-width:0; }
.fsjbar b { color:var(--t-orange,#c2680c); }
.fsjbar button { flex:0 0 auto; border-radius:9px; padding:8px 12px; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer;
    background:transparent !important; color:var(--ink) !important; border:1px solid var(--t-orange,#c2680c) !important; }
.fsjcard { margin:0 0 12px; padding:11px 13px; border-radius:12px; background:var(--accent-10); border:1px solid var(--accent-30,var(--accent)); }
.fsjcard > b { display:block; font-size:.86rem; color:var(--ink-strong); }
.fsjcard .n { margin-top:5px; font-size:.84rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.fsjcard .s { margin-top:3px; font-size:.76rem; color:var(--ink-soft); }
.fsjweek { margin:12px 0 0; }
.fsjweek > b { display:block; font-size:.84rem; margin-bottom:6px; color:var(--ink-strong); }
.fsjrow { display:flex; gap:8px; align-items:baseline; padding:7px 2px; border-bottom:1px solid var(--line); font-size:.82rem; }
.fsjrow span:first-child { color:var(--ink-dim); min-width:62px; }
.fsjrow span:last-child { margin-left:auto; color:var(--ink-soft); }

/* ── 등록 판의 칸 지도 — 든 칸은 칠하고, 지금 넣을 칸은 반짝인다 ─────────────── */
.fsreg { display:flex; gap:12px; align-items:flex-start; }
.fsregin { flex:1; min-width:0; }
.fsregmap { flex:0 0 auto; display:flex; gap:2px; align-items:flex-start; margin-top:4px; padding:6px; border-radius:10px;
    background:var(--surface-2,var(--bg)); border:1px solid var(--line); }
.fsregmap .ln { display:flex; flex-direction:column; gap:2px; }
.fsregmap .ai { display:block; width:5px; align-self:stretch; background:var(--line-2,var(--line)); opacity:.6; border-radius:2px; }
.fsregmap .c { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:24px; height:16px; padding:0;
    border-radius:3px; font:inherit; font-size:.56rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
    color:var(--ink-dim); border:1px dashed var(--line-2,var(--line)); background:transparent; }
.fsregmap button.c { cursor:pointer; background:transparent !important; color:var(--ink-dim) !important;
    border:1px dashed var(--line-2,var(--line)) !important; min-height:0 !important; box-shadow:none !important; }
.fsregmap .c.has { border:1px solid var(--accent-30,var(--accent)); background:var(--accent-30,var(--accent-10)); color:var(--ink); }
.fsregmap .c.run { border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink,#fff); }
.fsregmap .c.tgt { border:none; background:var(--t-orange,#c2680c); color:var(--bg,#fff);   /* 밤엔 밝은 주황에 어두운 글자, 낮엔 반대 */ outline:2px solid var(--t-orange,#c2680c);
    outline-offset:1px; animation:fsregblink 1s ease-in-out infinite; }
@keyframes fsregblink { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .fsregmap .c.tgt { animation:none; } }

/* ── 칸 메모 (포유 중 메모 · 분만 메모 이어 보기) ─────────────────────────────── */
.fstile .fspen { position:absolute; top:6px; right:7px; color:var(--t-orange,#c2680c); line-height:0; }
.fstile .fspen svg.hanul-line-icon { width:13px; height:13px; }
.fstile.run .fspen, .fstile.warn .fspen, .fstile.danger .fspen { right:20px; }
.fstl { border-left:2px solid var(--line-2,var(--line)); margin:4px 0 10px 6px; padding-left:14px; }
.fstl > div { position:relative; margin-bottom:9px; font-size:.86rem; color:var(--ink); }
.fstl > div::before { content:''; position:absolute; left:-20px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.fstl > div.f::before { background:var(--t-orange,#c2680c); }
.fstl b { display:block; font-size:.74rem; color:var(--ink-dim); font-weight:800; }
.fstl span { white-space:pre-wrap; word-break:break-word; }
.fschips { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px; }
.fschips button { padding:7px 11px !important; min-height:0 !important; border-radius:999px !important; font:inherit; font-size:.8rem !important;
    font-weight:700; background:transparent !important; color:var(--ink) !important; border:1px solid var(--line-2,var(--line)) !important; cursor:pointer; }
/* 포유 폐사 (칸 창, 2026-10-14 시안 A1) — 지금 포유 두수 · 원인 칩 · [폐사 −1] · 되돌리기 */
.fspd { margin:0 0 14px; padding:11px 13px 12px; border-radius:12px; background:var(--surface-2,var(--bg)); border:1px solid var(--line-2,var(--line)); }
.fspd-h { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; font-size:.9rem; font-weight:800; color:var(--ink-strong); margin-bottom:8px; }
.fspd-n { font-size:1.9rem; font-weight:900; line-height:1; color:var(--t-blue,var(--accent)); font-variant-numeric:tabular-nums; }
.fspd-h small { flex-basis:100%; font-size:.76rem; font-weight:700; color:var(--ink-soft); }
.fspd .fsbtnrow { margin-top:4px; }
.fspd .fsbtnrow #pdAdd { flex:2; }
.fspd .fshint { margin:8px 0 0; }
#sheet .fspd-c button.on { background:var(--accent) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important; }
#sheet .fspd-b button.danger { background:color-mix(in srgb, var(--t-red,#e5484d) 14%, var(--surface)) !important; color:var(--ink) !important; }
/* 포유 세어 보니 (관리자) — 폐사 아래, 파랑 띠 */
.fspc { margin-top:12px; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in srgb, var(--t-blue) 45%, var(--line)); box-shadow:inset 0 3px 0 var(--t-blue);
    background:radial-gradient(120% 120% at 0 0, color-mix(in srgb, var(--t-blue) 14%, transparent), transparent 60%), var(--surface); }
.fspc-t { display:block; font-size:.86rem; font-weight:800; color:var(--ink-strong); }
.fspc-s { display:flex; align-items:center; gap:8px; margin-top:8px; }
.fspc-s output { flex:1; text-align:right; font-size:1.9rem; font-weight:900; line-height:1; color:var(--t-blue); font-variant-numeric:tabular-nums; }
.fspc-s span { flex:1; font-size:.84rem; font-weight:700; color:var(--ink-soft); }
:root #sheet .fspc-s button { width:52px; height:48px; flex:none; border-radius:12px !important; font:inherit; font-size:1.5rem; font-weight:900;
    border:1px solid var(--line-2, var(--line)) !important; background:var(--surface-2, var(--bg)) !important; color:var(--ink) !important; }
:root #sheet .fspc button:disabled { opacity:.4; }
.fspc .fsbtnrow { margin-top:8px; } .fspc #pcSave { flex:2; }
.fspc .fshint { margin:6px 0 0; }
.fsnoteadd { display:flex; gap:8px; }
.fsnoteadd .fsinput { flex:1; min-width:0; margin:0; }
.fsnoteadd button { flex:0 0 auto; padding:0 16px; border-radius:10px; font-weight:800; }
.fssheet .fsbtnrow button.fsminor { background:transparent !important; color:var(--ink-soft) !important; border:1px dashed var(--line-2,var(--line)) !important;
    font-weight:700; }

/* ── 축사 보기 — 분만 전 · 분만 중 · 포유 중을 나눠 본다 ───────────────────────── */
.fsbhead { width:100%; }
.fsbchips { display:flex; flex-wrap:wrap; gap:6px; }
#barn .fsbchips button { display:inline-flex; align-items:center; gap:6px; padding:7px 11px !important; min-height:0 !important;
    border-radius:999px !important; font:inherit; font-size:.78rem !important; font-weight:800; cursor:pointer;
    background:transparent !important; color:var(--ink) !important; border:1px solid var(--line-2,var(--line)) !important; }
#barn .fsbchips button.on { background:var(--accent-10) !important; border-color:var(--accent) !important; color:var(--ink-strong) !important; }
#barn .fsbchips em { font-style:normal; font-variant-numeric:tabular-nums; color:inherit !important; }
.fsbchips i.sw { display:inline-block; width:10px; height:10px; border-radius:2px; box-sizing:border-box; }
.fsbnote { margin:8px 2px 2px; font-size:.72rem; color:var(--ink-dim); line-height:1.6; }
.fsbnote b { font-weight:800; }
/* 축사 보기 색: 분만 전 = 노랑 (이번 주 예정 테두리 · 다음 주부터 꽉 참), 예정 3일 안 = 노랑 깜빡임, 분만일지 안 씀 = 빨간 점 (사장님 2026-10-14).
   예전 연보라 · 주황 점은 30분 지남 주황과 같아 헷갈렸다. 30분 지남 = 밝은 주황 그대로 */
:root { --fs-soon:var(--t-amber); --fs-warn:#ff8a3d; --fs-noj:#ff4d6d; }
:root:is([data-theme="light"],[data-theme="hanul"],[data-theme="taegeuk"]) { --fs-soon:var(--t-amber); --fs-warn:#ea580c; --fs-noj:#d6204b; }
.fsbnote .ok { color:var(--accent); } .fsbnote .wa { color:var(--fs-warn); } .fsbnote .da { color:var(--t-red,#e5484d); }
.fsbnote .we { color:var(--t-blue,#3b82f6); } .fsbnote .nj { color:var(--fs-noj); }
.fsbm i, .fsbchips i.sw { opacity:1; box-sizing:border-box; position:relative; }
.fsbm i.b-e, .fsbchips i.b-e { background:transparent; outline:1px dashed var(--line-2,var(--line)); outline-offset:-1px; }
.fsbm i.b-e { opacity:.45; }   /* 빈칸은 흐리게 — 분만 전 네모와 멀리서도 갈리게 */
/* 분만 전 = 노랑, 방 지도(크게 보기)의 분만 전 노란 띠와 같은 색 (사장님 2026-10-14) */
.fsbm i.b-w, .fsbchips i.b-w { background:color-mix(in srgb, var(--t-amber) 16%, transparent); box-shadow:inset 0 0 0 1.5px var(--t-amber); }
.fsbm i.b-x { background:transparent; box-shadow:inset 0 0 0 1.5px var(--t-red,#e5484d); }
.fsbm i.b-r, .fsbchips i.b-r { background:var(--accent); }
/* 30 · 60분 지남은 깜빡일 때 색을 흐리게 빼지 않는다 (주황이 흐려지면 어두운 바탕에서 갈색으로 보였다). 둘레가 빛났다 꺼진다 */
.fsbm i.b-o { background:var(--fs-warn); color:var(--fs-warn); animation:fsbwarn 1s ease-in-out infinite; }
.fsbm i.b-d { background:var(--t-red,#e5484d); color:var(--t-red,#e5484d); animation:fsbwarn 1s ease-in-out infinite; }
@keyframes fsbwarn { 50% { box-shadow:0 0 0 2px currentColor, 0 0 8px 2px currentColor; } }
.fsbm i.b-n, .fsbchips i.b-n { background:var(--t-blue,#3b82f6); }
.fsbm i.wean::after, .fsbm i.noj::after { content:''; position:absolute; left:50%; top:50%; width:40%; height:40%;
    transform:translate(-50%,-50%); border-radius:50%; background:var(--bg,#fff); }   /* 밤엔 밝은 파랑 위 어두운 점, 낮엔 반대 */
.fsbm i.noj::after { width:50%; height:50%; background:var(--fs-noj); box-shadow:0 0 0 1.5px var(--bg,#fff); }
#barn.dim .fsbm i:not(.hit) { opacity:.12; animation:none; }
@keyframes fsbblink { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .fsbm i.b-o, .fsbm i.b-d { animation:none; } }
/* 분만 전인데 예정 1~3일 지남 — 빨간 굵은 테두리가 깜빡인다 (사장님 2026-10-14. 3일 안 노랑 깜빡임과 갈리게).
   4일 넘게 지나면 빨간 테두리가 깜빡이지 않고 남는다. 움직임 줄이기면 굵은 빨간 테두리만 */
.fsbm i.b-w.late { box-shadow:inset 0 0 0 2.5px var(--t-red,#e5484d); animation:fsbblink 1.6s ease-in-out infinite; }
.fsbnote .lt { color:var(--t-red,#e5484d); }
@media (prefers-reduced-motion: reduce) { .fsbm i.b-w.late { animation:none; } }
/* 분만 예정 3일 전~당일 — 노란 굵은 테두리가 깜빡인다 (사장님 2026-10-14). 움직임 줄이기면 굵은 테두리만 남는다 */
.fsbm i.b-w.soon { box-shadow:inset 0 0 0 2.5px var(--fs-soon); animation:fsbblink 1.6s ease-in-out infinite; }
.fsbnote .sn { color:var(--fs-soon); }
@media (prefers-reduced-motion: reduce) { .fsbm i.b-w.soon { animation:none; } }
.fsbc { display:flex; gap:4px; justify-content:center; margin-top:3px; min-height:14px; }
#barn .fsbc em { font-style:normal; font-size:.62rem; font-weight:800; padding:1px 5px; border-radius:5px; font-variant-numeric:tabular-nums; }
#barn .fsbc em.w { border:1px solid var(--t-amber); color:var(--ink) !important; background:color-mix(in srgb, var(--t-amber) 14%, transparent) !important; }
#barn .fsbc em.w .sq { color:var(--t-amber); }
#barn .fsbc em.r { background:var(--accent) !important; color:var(--accent-ink,#fff) !important; }
#barn .fsbc em.n { background:var(--t-blue,#3b82f6) !important; color:var(--bg,#fff) !important; }
#barn.dim .fsbm i.b-e.hit { outline:1.5px dashed var(--ink-soft); opacity:1; }   /* 빈칸만 볼 때는 점선을 또렷하게 */
/* 다음 주부터 분만 예정인 칸은 노랑으로 꽉 채운다 — 이번 주 예정(노란 테두리)과 갈린다 (2026-10-14, 예전 가운데 점 대신).
   방 아래 숫자 · 위 단추 · 안내 줄의 네모도 같은 모양 */
.fsbm i.b-w.nx, .fsbchips i.sw.nx { background:var(--t-amber); }
#barn .fsbc { flex-wrap:wrap; }
#barn .fsbc em .sq, .fsbnote .sq { display:inline-block; position:relative; width:8px; height:8px; margin-right:3px; vertical-align:-1px;
    border-radius:1px; box-shadow:inset 0 0 0 1.5px currentColor; }
#barn .fsbc em .sq.d, .fsbnote .sq.d { background:currentColor; }
.fsbnote .dw { color:var(--ink-soft); } .fsbnote .dw .sq { color:var(--t-amber); }

/* ── 분만 체크 — 현장에서 못 센 분만을 '분만했다' 고만 남긴다 (포유 중 = 파랑) ─────────
   theme.css 가 낮·한울·태극에서 button 색을 !important 로 고정하므로 선택자를 한 단계 좁혀 되돌린다.
   파랑 위 글자는 var(--bg) — 밤엔 밝은 파랑에 어두운 글자, 낮엔 진한 파랑에 흰 글자.
   태극은 --t-blue 가 없어 밤의 밝은 파랑을 물려받는다. 흰 바탕·흰 글자에서 안 읽혀 진한 청색을 쓴다. */
:root { --fs-blue:var(--t-blue,#3b82f6); }
:root[data-theme="taegeuk"] { --fs-blue:#1D4ED8; }
.fssheet .fsbtnrow button.fschkbtn { display:flex; align-items:center; justify-content:center; gap:6px;
    background:var(--fs-blue) !important; color:var(--bg,#fff) !important; border:1px solid var(--fs-blue) !important; }
.fschkbtn svg.hanul-line-icon { width:18px; height:18px; }
.fschk { margin:10px 0 4px; padding:12px; border-radius:12px; border:1px solid var(--fs-blue);
    background:color-mix(in srgb, var(--fs-blue) 8%, transparent); }
.fschk .fsquick { margin:0 0 8px; }
.fssheet .fschk .fsquick button.on { background:var(--fs-blue) !important; color:var(--bg,#fff) !important; border-color:var(--fs-blue) !important; }
.fsjcard.chk { background:color-mix(in srgb, var(--fs-blue) 10%, transparent); border-color:var(--fs-blue); }
.fstile.chk, .fsmap .fstile.chk { background:color-mix(in srgb, var(--fs-blue) 14%, transparent) !important; border-color:var(--fs-blue) !important; }
.fstile .fsdot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--t-orange,#c2680c); margin-right:4px; vertical-align:1px; }
.fssess.chk .fssess-hd .c { color:var(--fs-blue); }

/* 분만했는지 볼 모돈 — 예정일 지난 분만 전 모돈을 먼저 묻는다 */
.fslate { margin:0 0 10px; border:1px solid var(--fs-blue); border-radius:12px; background:var(--surface); overflow:hidden; }
.fslate .hd { display:flex; align-items:center; gap:9px; padding:8px 10px 8px 12px; font-size:.84rem; font-weight:800; color:var(--ink);
    background:color-mix(in srgb, var(--fs-blue) 9%, transparent); }
.fslate .hd svg.hanul-line-icon { width:17px; height:17px; flex:0 0 auto; color:var(--fs-blue); }
.fslate .hd span { flex:1; min-width:0; }
.fslate .hd b { color:var(--fs-blue); }
.fslate .ls { padding:0 12px 8px; }
.fslate .r { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); }
.fslate .who { flex:1; min-width:0; }
.fslate .who b { display:block; font-size:.92rem; color:var(--ink-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fslate .who small { font-size:.74rem; color:var(--ink-soft); }
.fslate .who em { font-style:normal; color:var(--t-red,#e5484d); font-weight:800; }
#body .fslate button { flex:0 0 auto; min-height:44px; padding:0 12px; border-radius:10px; font:inherit; font-size:.82rem; font-weight:900; cursor:pointer;
    background:var(--surface-2,var(--bg)) !important; color:var(--ink) !important; border:1px solid var(--line-2,var(--line)) !important; }
#body .fslate button.yes { background:var(--fs-blue) !important; color:var(--bg,#fff) !important; border-color:var(--fs-blue) !important; }
#body .fslate .hd button { min-height:36px; padding:0 10px; font-size:.78rem; background:transparent !important; }
#body .fslate button.more { width:100%; margin-top:8px; }
.fslate .fshint { margin:8px 0 0; }

/* ── 모돈 찾기 (시안 1 + 3 + 4) ── 찾은 칸은 노란 고리로 깜빡(지울 때까지). 노랑은 초록 깜빡(예정 3일 안) · 주황·빨강(분만 경고)과 겹치지 않는다 */
.fsfind { margin-bottom:10px; }
.fsfind-box { display:flex; align-items:center; gap:8px; border:1.5px solid var(--line-2,var(--line)); background:var(--surface); border-radius:12px; padding:0 6px 0 12px; min-height:46px; }
.fsfind.on .fsfind-box { border-color:var(--t-amber); }
.fsfind-box:focus-within { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
#findInput:focus, #findInput:focus-visible { outline:none !important; box-shadow:none !important; transform:none !important; }   /* 입력칸 고리 대신 바깥 칸이 빛난다 (effects.css 고리보다 세게) */
.fsfind-box > svg, .fsfind-box > i { flex:0 0 auto; width:18px; height:18px; color:var(--ink-dim); }
.fsfind-box input { flex:1; min-width:0; border:none !important; background:transparent !important; box-shadow:none !important; outline:none; color:var(--ink-strong); font:inherit; font-weight:700; font-size:1rem; padding:10px 0 !important; }
.fsfind-box input::-webkit-search-cancel-button { display:none; }
#findClear { border:none !important; background:transparent !important; color:var(--ink-dim) !important; padding:8px !important; min-height:0 !important; display:inline-flex; }
#findClear[hidden] { display:none; }
#findClear svg { width:18px; height:18px; }
.fsfind-none { margin:6px 2px 0; font-size:.84rem; font-weight:700; color:var(--ink-soft); }
.fsfind-res { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; padding:10px 12px; border-radius:12px;
    background:color-mix(in srgb, var(--t-amber) 12%, transparent); border:1px solid color-mix(in srgb, var(--t-amber) 45%, transparent); font-size:.86rem; color:var(--ink); }
.fsfind-res b { color:var(--ink-strong); font-size:1rem; }
.fsfind-res .st, .fsfind-list .w { font-size:.74rem; font-weight:800; padding:2px 7px; border-radius:6px; border:1px solid var(--ink-dim); color:var(--ink-soft); white-space:nowrap; }
.fsfind-res .st.st-n, .fsfind-list .w.st-n { background:var(--t-blue,#3b82f6); border-color:var(--t-blue,#3b82f6); color:var(--bg,#fff); }
.fsfind-res .st.st-r, .fsfind-list .w.st-r { background:var(--accent); border-color:var(--accent); color:var(--accent-ink,#fff); }
.fsfind-res button { border:1px solid var(--line-2,var(--line)) !important; background:var(--surface) !important; color:var(--ink-strong) !important; border-radius:9px; padding:7px 11px !important; min-height:0 !important; font-weight:800; font-size:.8rem; display:inline-flex; align-items:center; gap:5px; }
.fsfind-res button.go { margin-left:auto; }
.fsfind-res button svg { width:15px; height:15px; }
.fsfind-list { margin-top:6px; border:1px solid var(--line-2,var(--line)); border-radius:12px; background:var(--surface); overflow:hidden; max-height:300px; overflow-y:auto; }
.fsfind-list .hd { margin:0; padding:8px 12px; font-size:.74rem; font-weight:800; color:var(--ink-dim); }
.fsfind-list button { display:flex; width:100%; align-items:center; gap:10px; padding:10px 12px !important; min-height:0 !important; border:none !important; border-top:1px solid var(--line) !important; border-radius:0 !important;
    background:transparent !important; color:var(--ink) !important; text-align:left; font-size:.86rem; font-weight:600; }
.fsfind-list button .n { width:20px; height:20px; border-radius:50%; background:var(--t-amber); color:var(--bg,#111); font-weight:900; font-size:.7rem; display:grid; place-items:center; flex:0 0 auto; }
.fsfind-list button b { color:var(--ink-strong); min-width:70px; }
.fsfind-list button .w { margin-left:auto; }
.fsfind-list mark { background:color-mix(in srgb, var(--t-amber) 40%, transparent); color:inherit; border-radius:3px; }
#barn .fsbm i.found { z-index:3; opacity:1 !important; animation:fsfound .9s ease-in-out infinite !important;
    box-shadow:0 0 0 2px var(--t-amber), 0 0 0 6px color-mix(in srgb, var(--t-amber) 40%, transparent), 0 0 14px 4px color-mix(in srgb, var(--t-amber) 50%, transparent) !important; }
#barn .fsbm i.found[data-n]::before { content:attr(data-n); position:absolute; z-index:4; left:100%; bottom:100%; transform:translate(-30%, 30%); min-width:14px; height:14px; padding:0 2px; box-sizing:border-box;
    border-radius:7px; background:var(--t-amber); color:var(--bg,#111); font:900 .58rem/14px sans-serif; text-align:center; }
@keyframes fsfound { 50% { box-shadow:0 0 0 2px var(--t-amber), 0 0 0 2px transparent; } }
#barn.sfind .fsbm i:not(.found) { opacity:.14; animation:none; }
#barn.sfind .fsroom:not(.sfhit) .lbl { opacity:.45; }
#barn .fsroom.sfhit { outline:2px solid var(--t-amber); outline-offset:3px; border-radius:8px; }
/* 찾는 중 띠 — 축사 맨 위, 무엇을 찾는 중인지 · [지우기] (2026-10-15) */
.fsfindbar { display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:9px 10px 9px 12px; border-radius:12px; font-size:.86rem; font-weight:800; color:var(--ink);
    background:color-mix(in srgb, var(--t-amber) 16%, var(--surface)); border:1.5px solid var(--t-amber); }
.fsfindbar > span { flex:1; min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fsfindbar > span svg { width:16px; height:16px; color:var(--t-amber); flex:0 0 auto; }
.fsfindbar b { font-weight:900; color:var(--ink-strong); }
#barn .fsfindbar button { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; min-height:36px; padding:0 12px; border-radius:10px; font:inherit; font-weight:900; cursor:pointer;
    color:var(--ink) !important; background:var(--surface) !important; border:1px solid var(--t-amber) !important; }
#barn .fsfindbar button svg { width:15px; height:15px; }
#barn button.fsroom.sfhit .lbl { color:var(--t-amber) !important; }
.fstile.sffound { outline:3px solid var(--t-amber) !important; outline-offset:-3px; animation:fsfoundtile .9s ease-in-out infinite; position:relative; z-index:2; }
@keyframes fsfoundtile { 50% { outline-color:transparent; } }
@media (prefers-reduced-motion: reduce) { #barn .fsbm i.found, .fstile.sffound { animation:none !important; } }

/* ── 카드의 작은 지도 꾹 누르기 → 그 방 지도 크게 (떼면 닫힘) ── */
.fspeek { display:inline-flex; flex:0 0 auto; margin-top:3px; padding:4px; margin:-1px -4px 0; border-radius:8px; cursor:zoom-in;
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
.fspeek:active { background:var(--accent-10); }
#fspeekPop { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:90; max-width:calc(100vw - 24px); max-height:calc(100vh - 40px); overflow:auto;
    background:var(--surface); border:1px solid var(--line-2,var(--line)); border-radius:18px; padding:14px 16px 12px; box-shadow:0 18px 50px rgba(0,0,0,.45);
    pointer-events:none; animation:fspeekin .14s ease-out; }
#fspeekPop[hidden] { display:none; }
#fspeekPop .hd { font-size:.95rem; color:var(--ink-soft); font-weight:700; margin-bottom:10px; }
#fspeekPop .hd b { color:var(--ink-strong); font-size:1.15rem; font-weight:900; }
#fspeekPop .map { display:flex; justify-content:center; }
#fspeekPop .fsmini.big { --mc:24px; gap:5px; }
#fspeekPop .fsmini.big .ln { gap:5px; }
#fspeekPop .fsmini.big .ai { width:10px; }
#fspeekPop .fsmini.big.h .ai { height:10px; width:100%; }
#fspeekPop .fsmini i { border-radius:4px; }
#fspeekPop .fsmini i.me { z-index:2; box-shadow:0 0 0 3px var(--t-amber,#f5b301), 0 0 14px 4px color-mix(in srgb, var(--t-amber,#f5b301) 55%, transparent) !important; }
#fspeekPop .ft { margin-top:10px; text-align:center; font-size:.74rem; font-weight:700; color:var(--ink-dim); }
@keyframes fspeekin { from { opacity:0; transform:translate(-50%,-50%) scale(.92); } }
@media (prefers-reduced-motion: reduce) { #fspeekPop { animation:none; } }

/* ── 선명 스타일 (시안 1 + 2 + 4) ─────────────────────────────────────────
   카드 모양 · 글씨 차례 · 단추 · 깜빡임은 그대로(docs/DECISIONS.md). 둘레와 바탕 색만 더한다.
   1: 요약 띠 세 칸은 색 칸(높이는 그대로라 카드가 밀리지 않는다), 카드 바탕은 단계 색이 왼쪽 위에서 번짐,
      분만 중인 방 칩은 빛 테두리(경고 · 늦음이 있으면 빨강), '분만했는지 볼 모돈' 칸은 파랑 번짐
   2: 경고 · 늦음 카드는 깜빡임에 더해 테두리를 따라 빛이 돈다 (움직임 줄이기면 멈춤)
   4: 축사 보기에서 분만 중인 방은 둘레가 빛나고 방 이름이 색 알약 */
.fssum { gap:8px; border:0; background:none; overflow:visible; }
.fssum > span { position:relative; overflow:hidden; --c:var(--ink-dim); border:1px solid color-mix(in srgb, var(--c) 40%, var(--line)); border-radius:12px;
    background:radial-gradient(130% 90% at 0 0, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%), var(--surface); }
.fssum > span + span { border-left:1px solid color-mix(in srgb, var(--c) 40%, var(--line)); }
.fssum > span::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); }
.fssum > span b { font-size:1.4rem; color:var(--c); }
.fssum .run { --c:var(--accent); } .fssum .done { --c:var(--t-blue); }
.fssum .rv.warn { --c:var(--t-orange); } .fssum .rv.danger { --c:var(--t-red); }
.fssum .rv.warn, .fssum .rv.danger { box-shadow:0 0 0 1px var(--c), 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); }
:root[data-design] .fscard { position:relative; --sc:var(--fsst, var(--accent));
    background:radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--sc) 20%, transparent), transparent 60%), var(--surface); }
:root[data-design] .fscard.warn, :root[data-design] .fscard.danger {
    background:radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--sc) 26%, transparent), transparent 65%), color-mix(in srgb, var(--sc) 8%, var(--surface)); }
@property --fs-ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes fsSpin { to { --fs-ang:360deg; } }
.fscard.warn::after, .fscard.danger::after { content:''; position:absolute; inset:-2px; border-radius:15px; padding:3px; pointer-events:none;
    background:conic-gradient(from var(--fs-ang), transparent 0 58%, var(--sc) 76%, var(--ink) 84%, var(--sc) 92%, transparent);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    animation:fsSpin 2.4s linear infinite; }
.fscard.warn::after { animation-duration:3.2s; }
:root[data-design] .fsrooms button:has(.n) { outline:2px solid var(--accent); outline-offset:1px; box-shadow:0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-design] .fsrooms button.late:has(.n) { outline-color:var(--t-red); box-shadow:0 0 14px color-mix(in srgb, var(--t-red) 45%, transparent); }
:root[data-design] .fslate { position:relative; overflow:hidden; background:radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--t-blue) 18%, transparent), transparent 60%), var(--surface); }
.fslate .hd > svg { width:28px; height:28px; padding:5px; border-radius:50%; box-sizing:border-box; background:color-mix(in srgb, var(--t-blue) 24%, transparent); }
:root[data-design] .fsbarn { background:radial-gradient(110% 60% at 0 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), var(--surface); }
.fsbarn .fsroom { border-radius:12px; padding:6px 6px 8px; --rc:var(--accent); }
.fsbarn .fsroom.late { --rc:var(--t-red); }
:root[data-design] .fsbarn .fsroom.run { background:color-mix(in srgb, var(--rc) 12%, transparent) !important; outline:1.5px solid var(--rc); outline-offset:0;
    box-shadow:0 0 14px color-mix(in srgb, var(--rc) 40%, transparent) !important; }
.fsbarn .fsroom .lbl { font-size:.82rem; font-weight:900; }
.fsbarn .fsroom.run .lbl { display:inline-block; padding:1px 9px; border-radius:999px; background:color-mix(in srgb, var(--rc) 30%, transparent); border:1.5px solid var(--rc); color:var(--ink); }
@media (prefers-reduced-motion: reduce) { .fscard.warn::after, .fscard.danger::after { animation:none; display:none; } }
@media print { .fscard.warn::after, .fscard.danger::after { display:none; } }

/* ── 축사 보기 선명 스타일 (2026-10-12 시안 5): 오늘 볼 것 네 칸 · 방 카드 색 · 다음 일정 알약. 칸 그림과 예정 주 점은 그대로 ── */
.fstv { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:12px; width:100%; }
@media (max-width:600px) { .fstv { grid-template-columns:repeat(2, 1fr); } }
#barn .fstv .tv { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:10px 12px 9px !important; min-height:0 !important;
    border-radius:12px !important; border:1px solid var(--line) !important; overflow:hidden; text-align:left; cursor:pointer; color:var(--ink) !important; --c:var(--ink-dim);
    background:radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), var(--surface-2, var(--surface)) !important; }
#barn .fstv .tv::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); }
#barn .fstv .tv b { font-size:1.6rem; font-weight:900; line-height:1.05; color:var(--c) !important; font-variant-numeric:tabular-nums; }
#barn .fstv .tv span { font-size:.82rem; font-weight:800; color:var(--ink) !important; }   /* 낮 테마의 button.on 글자색을 이긴다 */
#barn .fstv .tv small { font-size:.68rem; color:var(--ink-soft) !important; }
#barn .fstv .tv.run { --c:var(--accent); } #barn .fstv .tv.soon { --c:var(--fs-soon); } #barn .fstv .tv.wean { --c:var(--t-blue, #3b82f6); } #barn .fstv .tv.chk { --c:var(--t-orange, #f97316); }
#barn .fstv .tv.has { box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 14px -4px var(--c) !important; }
#barn .fstv .tv.on { outline:2px solid var(--c); outline-offset:0; background:radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), var(--surface-2, var(--surface)) !important; }
#barn .fsroom { align-self:flex-start; position:relative; overflow:hidden; border:1px solid var(--line) !important; padding:8px 8px 10px !important; border-radius:14px !important; --rc:var(--ink-dim); }
#barn .fsroom::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--rc); }
:root[data-design] #barn .fsroom { background:radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--rc) 22%, transparent), transparent 65%), var(--surface-2, var(--surface)) !important; }
#barn .fsroom.k-run { --rc:var(--accent); } #barn .fsroom.k-nurse { --rc:var(--t-blue, #3b82f6); } #barn .fsroom.k-pre { --rc:var(--t-amber); }
#barn .fsroom.late { --rc:var(--t-red); }
#barn .fsroom .lbl { display:inline-flex !important; align-items:center; gap:5px; font-size:.86rem; padding:2px 10px; border-radius:999px;
    background:color-mix(in srgb, var(--rc) 20%, transparent); border:1.5px solid var(--rc); color:var(--ink); }
#barn .fsroom .lbl::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--rc); }
#barn .fsroom .bnum { display:block; font-size:1.25rem; font-weight:900; color:var(--rc) !important; line-height:1.1; margin:4px 0 2px; font-variant-numeric:tabular-nums; }
#barn .fsroom .bnum small { font-size:.62rem; color:var(--ink-soft) !important; font-weight:700; margin-left:2px; }
#barn .fsroom .fsrnext { display:flex; flex-direction:column; gap:3px; margin-top:5px; align-items:center; }
#barn .fsroom .fsrnext em, .fsws .fsrnext em { font-style:normal; font-size:.62rem; font-weight:800; padding:2px 7px; border-radius:999px; white-space:nowrap; color:var(--ink); border:1px solid; }
#barn .fsroom .fsrnext em.far, .fsws .fsrnext em.far { border-color:var(--t-amber); background:color-mix(in srgb, var(--t-amber) 16%, transparent); }
#barn .fsroom .fsrnext em.wean, .fsws .fsrnext em.wean { border-color:var(--t-blue, #3b82f6); background:color-mix(in srgb, var(--t-blue, #3b82f6) 16%, transparent); }
#barn .fsroom .fsrnext em.soon.far, .fsws .fsrnext em.soon.far { box-shadow:0 0 0 1px var(--t-amber), 0 0 10px -2px var(--t-amber); }
#barn .fsroom .fsrnext em.soon.wean, .fsws .fsrnext em.soon.wean { box-shadow:0 0 0 1px var(--t-blue, #3b82f6), 0 0 10px -2px var(--t-blue, #3b82f6); }
@media print { #barn .fstv .tv, #barn .fsroom .fsrnext em { box-shadow:none !important; } }
/* 넓은 화면: 축사가 길어져 분만 카드를 아래로 밀지 않게 — 큰 숫자는 방 이름 옆, 알약은 한 줄, 네 칸은 얇게 */
@media (min-width:900px) {
  #barn .fstv .tv { flex-direction:row; align-items:baseline; gap:8px; padding:7px 12px !important; }
  #barn .fstv .tv b { font-size:1.3rem; }
  #barn .fsroom .bnum { display:inline-block; margin:0 0 0 4px; font-size:1.05rem; }
  #barn .fsroom .fsrnext { flex-direction:row; flex-wrap:wrap; justify-content:center; max-width:150px; margin-left:auto; margin-right:auto; }
}

/* 누가 무엇을 — 분만사 기록장 (관리자) */
/* 머리 오른쪽 작은 아이콘 (2026-10-16 시안 1) — '← 모돈관리로' 줄 오른쪽. 직원: 사용법 · 소리, 관리자: 소리 · 누가 무엇을 */
.page-head { position:relative; }
.fshdtools { position:absolute; right:0; top:-6px; display:flex; gap:6px; z-index:2; }
:root .fshdbtn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:11px; font:inherit; cursor:pointer; text-decoration:none;
  color:var(--ink) !important; background:var(--surface) !important; border:1px solid var(--line) !important; }
:root .fshdbtn.on { color:var(--accent) !important; border-color:var(--accent) !important; }
:root .fshdbtn.fshelpbtn { color:var(--t-amber) !important; border-color:color-mix(in srgb, var(--t-amber) 60%, transparent) !important; }
.fshdbtn svg { width:18px; height:18px; }
.fshdbtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media print { .fshdtools { display:none; } }
.fssheet .fslogf button.on { background:var(--accent) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important; }
.fssheet .fslogf button small { font-weight:700; opacity:.75; }
.fslog { margin-top:10px; }
.fslog-r { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:9px 2px; border-top:1px solid var(--line); }
.fslog-r:first-child { border-top:0; }
.fslog-r .t { font-size:.78rem; font-weight:800; color:var(--ink-dim); font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:2px; }
.fslog-r .m { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; min-width:0; }
.fslog-r .who { font-weight:900; color:var(--ink-strong); }
.fslog-r .tag { font-size:.68rem; font-weight:800; padding:0 7px; border-radius:999px; border:1px solid var(--line-2,var(--line)); color:var(--ink-soft); }
.fslog-r .what { font-weight:800; color:var(--accent-text, var(--accent)); }
.fslog-r.undo .what { color:var(--warn, #c2680c); }
.fslog-r small { flex-basis:100%; font-size:.76rem; color:var(--ink-soft); overflow-wrap:anywhere; }
/* ── 방 지도 선명 스타일 (2026-10-13 시안 5): 칸 왼쪽 상태 색 띠 · 번짐, 큰 번호, 할 일 알약 (3일 안이면 빛). 칸 크기 · 배치는 그대로 ── */
.fsmap .fstile { position:relative; overflow:hidden; --vc:var(--line-2, var(--line)); border-left-width:5px !important; border-left-color:var(--vc) !important; }
.fsmap .fstile.v-pre, .fsmap .fstile.v-over, .fsmap .fstile.v-nurse:not(.chk) {   /* 분만 중 · 분만 체크 칸 바탕은 지금 색 그대로 */
    background:radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--vc) 22%, transparent), transparent 70%), var(--surface-2, var(--surface)) !important; }
.fsmap .fstile.v-pre { --vc:var(--t-amber); }
.fsmap .fstile.v-over { --vc:var(--t-red, #e5484d); border-color:var(--t-red, #e5484d) !important; }
.fsmap .fstile.v-nurse { --vc:var(--t-blue, #3b82f6); }
.fsmap .fstile.v-run { --vc:var(--accent); } .fsmap .fstile.v-run.warn { --vc:var(--t-orange, #c2680c); } .fsmap .fstile.v-run.danger { --vc:var(--t-red, #e5484d); }
.fsmap .fstile.v-empty { border-left-width:2px !important; }
.fsmap .fstile .sow { font-size:1.18rem; }
.fsmap .fstile .pls { display:flex; align-items:center; gap:5px; margin-top:auto; min-width:0; }
.fsmap .fstile .pl { flex:0 0 auto; font-style:normal; font-size:.66rem; font-weight:900; padding:2px 7px; border-radius:999px; color:var(--ink); border:1px solid; white-space:nowrap; }
.fsmap .fstile .pl.far { border-color:var(--t-amber); background:color-mix(in srgb, var(--t-amber) 18%, transparent); }
.fsmap .fstile .pl.wean { border-color:var(--t-blue, #3b82f6); background:color-mix(in srgb, var(--t-blue, #3b82f6) 18%, transparent); }
.fsmap .fstile .pl.over { border-color:var(--t-red, #e5484d); background:color-mix(in srgb, var(--t-red, #e5484d) 22%, transparent); box-shadow:0 0 10px -2px var(--t-red, #e5484d); }
.fsmap .fstile .pl.far.soon { box-shadow:0 0 0 1px var(--t-amber), 0 0 10px -2px var(--t-amber); }
.fsmap .fstile .pl.wean.soon { box-shadow:0 0 0 1px var(--t-blue, #3b82f6), 0 0 10px -2px var(--t-blue, #3b82f6); }
.fsmap .fstile .pls small { flex:1 1 auto; min-width:0; font-size:.62rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsmap .fstile .pls small b.fsnoj { color:var(--t-orange, #c2680c); font-weight:800; }
/* 좁은 칸(8 · 9방, 108px): 알약은 할 일만 ('이유 D-25'), 포유 날수는 칸을 누르면. 번호는 조금 작게 (폰에서 잘렸다) */
.fsmap.narrow .fstile .pl .pn { display:none; }
.fsmap.narrow .fstile .sow { font-size:1rem; }
.fsmap .fstile .pl { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
@media print { .fsmap .fstile .pl { box-shadow:none !important; } }

/* ── 분만사 CCTV (2026-10-13, 시안 1) — 방 카드 안 단추 · 누르면 폰은 아래에서, PC 는 오른쪽 아래 창 ── */
.fsroom .fscam, .fsws .fscam { display:inline-flex; align-items:center; gap:5px; margin:6px auto 0; padding:5px 11px; border-radius:999px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); color:var(--ink); font-size:.76rem; font-weight:800; }
.fsroom .fscam svg, .fsws .fscam svg, .fscam-pl svg { width:16px; height:16px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* 낮 계열에서 분만 중 방 카드(button.on) 안 글자를 theme.css 가 흰색으로 덮어 CCTV 글자가 흐렸다 (2026-10-14) */
#barn .fsroom .fscam, .fsws .fscam { color:var(--ink) !important; -webkit-text-fill-color:var(--ink); }
.fsroom .fscam:focus-visible, .fsws .fscam:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fscam-pl { position:fixed; z-index:70; right:16px; bottom:16px; width:min(440px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto;
  background:var(--surface-solid, var(--surface)); border:1px solid var(--line-2, var(--line)); border-radius:16px; padding:12px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.fscam-pl[hidden] { display:none; }
.fscam-pl.many { width:min(820px, calc(100vw - 32px)); }
.fscam-pl .hd { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.fscam-pl .hd b { font-weight:900; color:var(--ink); } .fscam-pl .hd small { color:var(--ink-soft); font-size:.76rem; }
.fscam-pl .live { width:9px; height:9px; border-radius:50%; background:var(--bad); box-shadow:0 0 0 4px color-mix(in srgb, var(--bad) 25%, transparent); }
.fscam-pl .x { margin-left:auto; border:1px solid var(--line-2, var(--line)); background:transparent; color:var(--ink-soft); border-radius:9px; padding:7px 12px; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.fscam-pl .pk { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.fscam-pl .pk button { border:1px solid var(--line-2, var(--line)); background:var(--bg); color:var(--ink); border-radius:999px; padding:6px 13px; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; min-height:36px; }
.fscam-pl .pk button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.fscam-pl .vs { display:grid; gap:8px; }
.fscam-pl.many .vs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.fscam-pl .camz { position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:10px; background:#05080a; }
.fscam-pl .camz-in { position:absolute; inset:0; transform-origin:0 0; }
.fscam-pl iframe { display:block; width:100%; height:100%; border:0; background:#05080a; }
/* 영상 위 투명한 막이 확대 · 이동을 받는다. 확대 전에는 세로 쓸기로 창을 내릴 수 있게 pan-y, 확대 중에는 모두 막는다 */
.fscam-pl .camz-ov { position:absolute; inset:0; touch-action:pan-y; cursor:zoom-in; }
.fscam-pl .camz.on .camz-ov { touch-action:none; cursor:grab; }
.fscam-pl .camz.on .camz-ov:active { cursor:grabbing; }
.fscam-pl .camz-ui { position:absolute; right:6px; bottom:6px; display:flex; align-items:center; gap:4px; }
.fscam-pl .camz-ui button, .fscam-pl .camz-lv { min-width:32px; height:32px; padding:0 8px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:rgba(5,8,10,.62); color:#fff; font:inherit; font-size:.86rem; font-weight:900; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.fscam-pl .camz-lv { cursor:default; font-size:.74rem; }
.fscam-pl .camz-ui [hidden] { display:none; }
.fscam-pl .vs > div:fullscreen { display:flex; align-items:center; justify-content:center; background:#000; }
.fscam-pl .vs > div:fullscreen .camz { width:min(100vw, 177.78vh); border-radius:0; }
.fscam-pl .vs > div:fullscreen .cap { display:none; }
.fscam-pl .vs > div:fullscreen .camz-ui { right:14px; bottom:14px; }
.fscam-pl .cap { font-size:.74rem; color:var(--ink-soft); margin-top:4px; }
@media (max-width:768px) {
  .fscam-pl, .fscam-pl.many { left:0; right:0; bottom:0; width:auto; max-height:85vh; border-radius:18px 18px 0 0; padding:14px 14px 20px; }
  .fscam-pl.many .vs { grid-template-columns:1fr; }
}
/* ── CCTV 번호표 (2026-10-14, 시안 2): [칸 | 모돈번호] 이름표. 칸에 묶여 모돈이 바뀌면 번호도 바뀐다.
   영상과 함께 커지고 옮겨지되 글자 크기는 그대로(--k = 1/배율). 색은 축사 칸 색 ── */
.fscam-pl .ctags { position:absolute; inset:0; pointer-events:none; }
.fscam-pl .ctags.off { display:none; }
.fscam-pl .ctag { --c:var(--accent); position:absolute; transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(var(--k,1)); display:inline-flex; align-items:center; overflow:hidden; white-space:nowrap;
  height:23px; font-size:.72rem; font-weight:900; line-height:1; border-radius:999px; background:var(--surface-solid,var(--surface)); color:var(--ink); border:1.5px solid var(--c); box-shadow:0 1px 6px rgba(0,0,0,.55); }
.fscam-pl .ctag b { align-self:stretch; display:inline-flex; align-items:center; padding:0 6px; background:var(--c); color:var(--bg); }
.fscam-pl .ctag .sw { padding:0 7px 0 5px; }
.fscam-pl .ctag.s-o { --c:var(--fs-warn); } .fscam-pl .ctag.s-d { --c:var(--t-red,#e5484d); } .fscam-pl .ctag.s-w { --c:var(--t-amber); } .fscam-pl .ctag.s-n { --c:var(--t-blue); } .fscam-pl .ctag.s-e { --c:var(--ink-soft); border-style:dashed; }
.fscam-pl .ctag.s-w b { background:color-mix(in srgb, var(--t-amber) 26%, var(--surface-solid,var(--surface))); color:var(--ink); }
.fscam-pl .ctag.s-e b { background:none; color:var(--ink-soft); } .fscam-pl .ctag.s-e .sw { color:var(--ink-soft); font-weight:700; }
.fscam-pl .ctags.adj .ctag { box-shadow:0 0 0 2px var(--surface-solid,var(--surface)), 0 2px 8px rgba(0,0,0,.6); }
.fscam-pl .ctag.drag { outline:3px solid var(--ink); outline-offset:3px; }
/* 축사 지도처럼 (2026-10-16, 시안 1): 분만 중은 숨 쉬듯 빛나고, 30분 넘으면 주황 · 60분 넘으면 빨강으로 깜빡인다 */
@keyframes ctagGlow { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent), 0 0 8px color-mix(in srgb, var(--c) 50%, transparent); }
  50% { box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 0%, transparent), 0 0 18px color-mix(in srgb, var(--c) 80%, transparent); } }
@keyframes ctagBlink { 0%,100% { opacity:1 } 50% { opacity:.45 } }
.fscam-pl .ctag.s-r { animation:ctagGlow 1.6s ease-in-out infinite; }
.fscam-pl .ctag.s-o { animation:ctagGlow 1.6s ease-in-out infinite, ctagBlink 1s ease-in-out infinite; }
.fscam-pl .ctag.s-d { animation:ctagGlow 1.2s ease-in-out infinite, ctagBlink .8s ease-in-out infinite; }
/* 분만 예정 3일 안은 노랑, 1~3일 지남은 빨강: 번호표 끝 날짜 칸이 깜빡이고 둘레가 빛난다 (2026-10-16, 시안 2). 보고 있는 칸(노랗게 꽉 찬 번호표)과 글자로 갈린다 */
@keyframes ctagDue { 0%,100% { box-shadow:0 0 0 0 transparent, 0 1px 6px rgba(0,0,0,.55); } 50% { box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent), 0 0 14px var(--c); } }
@keyframes ctagDueCell { 50% { opacity:.35; } }
.fscam-pl .ctag.due-soon { --c:var(--t-amber); border-width:2px; animation:ctagDue 1.6s ease-in-out infinite; }
.fscam-pl .ctag.due-late { --c:var(--t-red,#e5484d); border-width:2px; animation:ctagDue 1.6s ease-in-out infinite; }
.fscam-pl .ctag.due-late b { background:color-mix(in srgb, var(--t-red,#e5484d) 22%, var(--surface-solid,var(--surface))); color:var(--ink); }
.fscam-pl .ctag .dd { font-style:normal; align-self:stretch; display:inline-flex; align-items:center; padding:0 7px; font-weight:900; color:var(--bg); background:var(--t-amber); animation:ctagDueCell 1.6s ease-in-out infinite; }
.fscam-pl .ctag.due-late .dd { background:var(--t-red,#e5484d); }
.fscam-pl .ctags.adj .ctag { animation:none; } .fscam-pl .ctags.adj .ctag .dd { animation:none; }
/* 머리 아래 도구 단추 (번호 끄기 · 번호 위치 맞추기) */
.fscam-pl .ctools { display:inline-flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
:root .fscam-pl .cbt { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 12px; border-radius:999px; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer;
  border:1px solid var(--line-2,var(--line)); background:var(--surface-solid,var(--surface)); color:var(--ink); }
:root .fscam-pl .cbt.adm { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface-solid,var(--surface))); }
.fscam-pl .cbt svg, .fscam-pl .cband svg, .fscam-pl .cside svg, .fscam-pl .cseq svg { width:16px; height:16px; }
.fscam-pl .cbt svg { color:var(--accent); }
/* 맞추기 모드 */
.fscam-pl.adj { z-index:90; box-shadow:0 0 0 100vmax rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.45); }
.fscam-pl.adj .hd small { white-space:nowrap; flex:none; font-weight:800; padding:2px 9px; border-radius:999px; border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink); }
@media (min-width:769px) {
  .fscam-pl.adj { left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:min(1080px, calc(100vw - 120px)); max-height:calc(100vh - 40px); padding-bottom:0; }
  .fscam-pl.adj .vs.withside { grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:14px; }
}
@media (max-width:768px) { .fscam-pl.adj { top:0; max-height:none; border-radius:0; padding-bottom:0; z-index:1300; display:flex; flex-direction:column; } .fscam-pl.adj .cband { margin-top:auto; } }
.fscam-pl .cband { position:sticky; bottom:0; z-index:4; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:12px -16px 0; padding:10px 16px 12px;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface-solid,var(--surface))); border-top:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
@media (max-width:768px) { .fscam-pl .cband { margin:12px -14px 0; padding:10px 14px 14px; } }
.fscam-pl .cband .cnt { flex:1; min-width:150px; font-size:.84rem; color:var(--ink); font-weight:700; }
.fscam-pl .cband .cnt b { font-size:1.1rem; font-weight:900; }
.fscam-pl .cband .cnt em { font-style:normal; display:inline-flex; align-items:center; margin-left:4px; padding:1px 8px; border-radius:999px; border:1px dashed var(--t-amber); font-size:.74rem; font-weight:900; }
:root .fscam-pl .cband button, :root .fscam-pl .cseq .bt button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:7px 13px; border-radius:10px; font:inherit; font-size:.84rem; font-weight:800; cursor:pointer;
  border:1px solid var(--line-2,var(--line)); background:var(--surface-solid,var(--surface)); color:var(--ink); }
:root .fscam-pl .cband button.cpri { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
:root .fscam-pl .cband button:disabled { opacity:.45; cursor:default; }
/* 칸 칩 (목록 · 폰 줄) */
.fscam-pl .cchip { --c:var(--accent); display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:2px 9px 2px 2px; border-radius:999px; font:inherit; font-size:.78rem; font-weight:800;
  border:1.5px solid var(--c); background:var(--surface-solid,var(--surface)); color:var(--ink); white-space:nowrap; }
.fscam-pl .cchip.s-o, .cghost.s-o { --c:var(--fs-warn); } .fscam-pl .cchip.s-d, .cghost.s-d { --c:var(--t-red,#e5484d); } .fscam-pl .cchip.s-w, .cghost.s-w { --c:var(--t-amber); } .fscam-pl .cchip.s-n, .cghost.s-n { --c:var(--t-blue); } .fscam-pl .cchip.s-e, .cghost.s-e { --c:var(--ink-soft); border-style:dashed; }
.fscam-pl .cchip b, .cghost b { min-width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--c); color:var(--bg); font-weight:900; }
.fscam-pl .cchip.s-w b, .cghost.s-w b { background:color-mix(in srgb, var(--t-amber) 26%, var(--surface-solid,var(--surface))); color:var(--ink); }
.fscam-pl .cchip.s-e b, .cghost.s-e b { background:none; color:var(--ink-soft); }
.cghost { --c:var(--accent); position:fixed; z-index:3000; pointer-events:none; transform:translate(-50%,-50%) scale(1.1); display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 2px; border-radius:999px;
  font-size:.78rem; font-weight:800; border:1.5px solid var(--c); background:var(--surface-solid,var(--surface)); color:var(--ink); box-shadow:0 8px 20px rgba(0,0,0,.45); }
/* PC 옆 목록: 안 놓은 칸이 위 */
.fscam-pl .cside h4 { white-space:nowrap; display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:.88rem; font-weight:900; color:var(--ink); }
.fscam-pl .cside h4 small { margin-left:auto; font-size:.72rem; color:var(--ink-soft); font-weight:700; }
.fscam-pl .clist { display:flex; flex-direction:column; gap:5px; max-height:470px; overflow:auto; }
.fscam-pl .clist .r { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; border:1px solid var(--line); background:var(--surface-solid,var(--surface)); font-size:.8rem; color:var(--ink); cursor:grab; touch-action:none; }
.fscam-pl .clist .r small { color:var(--ink-soft); font-weight:700; flex:1; }
.fscam-pl .clist .r em { font-style:normal; font-size:.72rem; font-weight:900; padding:2px 8px; border-radius:999px; color:var(--ink-soft); }
.fscam-pl .clist .r.todo { border-color:var(--t-amber); background:color-mix(in srgb, var(--t-amber) 10%, var(--surface-solid,var(--surface))); }
.fscam-pl .clist .r.todo em { border:1px dashed var(--t-amber); color:var(--ink); }
.fscam-pl .clist .r.off { opacity:.6; }
.fscam-pl .clist .r.sel, .fscam-pl .clist .r.drag { outline:2px solid var(--ink); outline-offset:1px; }
.fscam-pl .clist .sep { font-size:.72rem; font-weight:900; color:var(--ink-soft); margin:6px 2px 0; }
:root .fscam-pl .clist .nv { font:inherit; font-size:.72rem; font-weight:800; padding:3px 8px; border-radius:8px; border:1px solid var(--line-2,var(--line)); background:transparent; color:var(--ink-soft); cursor:pointer; }
/* 폰: 한 칸씩 묻기 */
.fscam-pl .cseq { display:flex; flex-direction:column; gap:8px; margin:0 0 10px; padding:12px; border-radius:14px; border:1.5px solid var(--t-amber);
  background:radial-gradient(120% 120% at 0 0, color-mix(in srgb, var(--t-amber) 20%, transparent), transparent 65%), var(--surface-solid,var(--surface)); }
.fscam-pl .cseq .q { display:flex; align-items:center; gap:10px; }
.fscam-pl .cseq .q b.n { min-width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:1.35rem; font-weight:900;
  border:2px solid var(--t-amber); background:color-mix(in srgb, var(--t-amber) 24%, var(--surface-solid,var(--surface))); color:var(--ink); }
.fscam-pl .cseq .q div { flex:1; min-width:0; } .fscam-pl .cseq .q strong { display:block; font-size:1rem; font-weight:900; color:var(--ink); }
.fscam-pl .cseq .q small { display:block; font-size:.78rem; color:var(--ink-soft); margin-top:2px; } .fscam-pl .cseq .q em { font-style:normal; font-size:.78rem; font-weight:900; color:var(--ink-soft); white-space:nowrap; }
.fscam-pl .cseq .bt { display:flex; gap:6px; } :root .fscam-pl .cseq .bt button { flex:1; font-size:.78rem; padding:6px; min-height:40px; }
.fscam-pl .cseq .crow { display:flex; gap:5px; overflow-x:auto; padding:2px 1px 4px; }
:root .fscam-pl .cseq .crow .cchip { padding:2px; min-height:30px; cursor:pointer; }
.fscam-pl .cseq .crow .cchip.done, .fscam-pl .cseq .crow .cchip.off { opacity:.5; }
.fscam-pl .cseq .crow .cchip.sel { outline:3px solid var(--ink); outline-offset:1px; opacity:1; }
@media (prefers-reduced-motion: no-preference) { .fscam-pl .cseq .q b.n { animation:cpulse 1.4s ease-in-out infinite; } }
@keyframes cpulse { 50% { box-shadow:0 0 0 6px color-mix(in srgb, var(--t-amber) 25%, transparent); } }
@media print { .fsroom .fscam, .fscam-pl { display:none !important; } }

/* 폰 축사: 한 방씩 넘기기 (2026-10-14, 시안 4-4 + 4-2). PC 는 방 카드 그대로 (JS 가 둘 중 하나만 그린다) */
.fsswipe { display:none; }
@media (max-width:768px) {
  .fsswipe { display:block; width:100%; --rc:var(--ink-dim); }
  .fsswipe .k-run { --rc:var(--accent); } .fsswipe .k-nurse { --rc:var(--t-blue, #3b82f6); } .fsswipe .k-pre { --rc:var(--t-amber); } .fsswipe .late { --rc:var(--t-red); }
  .fsws-track { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -10px; padding:2px 0; }
  .fsws-track::-webkit-scrollbar { display:none; }
  .fsws { position:relative; overflow:hidden; flex:0 0 78%; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:12px 10px 12px; box-sizing:border-box; border:1px solid var(--line); border-radius:16px; transition:opacity .2s, transform .2s;
    background:radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--rc) 22%, transparent), transparent 65%), var(--surface-2, var(--surface)); }
  .fsws:first-child { margin-left:11%; } .fsws:last-child { margin-right:11%; }
  .fsws:not(.cur) { opacity:.6; transform:scale(.94); }
  .fsws::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--rc); }
  .fsws.sfhit { outline:2px solid var(--t-amber); outline-offset:-2px; }
  .fsws .hd { display:flex; align-items:center; gap:8px; width:100%; }
  .fsws .nm { display:inline-flex; align-items:center; gap:5px; font-size:.95rem; font-weight:900; padding:3px 12px; border-radius:999px; white-space:nowrap;
    background:color-mix(in srgb, var(--rc) 20%, transparent); border:1.5px solid var(--rc); color:var(--ink); }
  .fsws .nm::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--rc); }
  .fsws .fscam { margin:0 0 0 auto; min-height:36px; padding:4px 13px; font-size:.82rem; }
  .fsws .sum { display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; width:100%; }
  .fsws .sum span { display:flex; flex-direction:column; align-items:center; padding:5px 2px; border-radius:10px; font-size:.68rem; font-weight:800; color:var(--ink-soft);
    border:1px solid var(--line); border-top:3px solid var(--c); background:var(--surface); --c:var(--ink-dim); }
  .fsws .sum b { font-size:1.25rem; font-weight:900; color:var(--c); line-height:1.1; font-variant-numeric:tabular-nums; }
  .fsws .sum .r { --c:var(--accent); } .fsws .sum .w { --c:var(--t-amber); } .fsws .sum .n { --c:var(--t-blue, #3b82f6); }
  .fsws .nx { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:20px; }
  .fsws .nx .fsrnext { display:flex; flex-direction:row; flex-wrap:wrap; gap:4px; justify-content:center; margin:0; }
  .fsws .nx .fsrnext em { font-size:.72rem; padding:3px 9px; }
  .fsws .nx small { font-size:.72rem; color:var(--ink-dim); }
  .fsws .mp { flex:1; display:grid; place-items:center; width:100%; min-height:200px; }
  .fsws .fsbm { --mc:19px; gap:3px; }
  .fsws .fsbm i { border-radius:4px; }
  .fsws .open { border:1px solid var(--line-2, var(--line)); background:transparent; color:var(--ink); border-radius:10px; padding:8px 14px; font:inherit; font-weight:800; font-size:.8rem; cursor:pointer; min-height:38px; }
  .fsws-pg { display:flex; align-items:center; gap:10px; margin-top:10px; }
  .fsws-pg button { width:46px; height:42px; flex:none; border-radius:12px; border:1px solid var(--line-2, var(--line)); background:var(--surface-2, var(--surface)); color:var(--ink);
    font:inherit; font-size:1.5rem; font-weight:900; line-height:1; cursor:pointer; }
  .fsws-pg .pn { font-size:.9rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; } .fsws-pg .pn b { color:var(--ink); font-size:1.05rem; }
  .fsws-pg .dots { flex:1; display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
  .fsws-pg .dots i { width:9px; height:9px; border-radius:50%; cursor:pointer; background:color-mix(in srgb, var(--rc) 55%, transparent); }
  .fsws-pg .dots i.on { width:22px; border-radius:5px; background:var(--rc); }
  @media (prefers-reduced-motion: reduce) { .fsws { transition:none; } }
}
/* [새끼 +1] 한 번 더 (2026-10-14 시안 2, 직원 · 관리자 화면) — 처음 누르면 그 자리가 넓어지며 [한 번 더 → N마리째] 로
   바뀌고, 글이 아래에서 올라오며, 밑줄이 3초 동안 줄어든다. 옆 단추는 좁아지고 옅어진다.
   테마(calm)가 주 단추 바탕을 !important 로 막아 같은 힘으로 덮는다. 움직임 줄이기 · 태극이면 움직이지 않는다 */
.fscard .acts > button { transition:flex-grow .3s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
.fscard .acts.arming > button:not(.plus) { flex-grow:.55; opacity:.35; }
.fscard .acts .plus.armed { flex-grow:3; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:8px 8px 11px; }
.fscard .acts .plus.armed, :root[data-design="calm"] .fscard .acts .plus.armed {
    background:color-mix(in srgb, var(--accent) 22%, var(--surface)) !important; color:var(--ink-strong, var(--ink)) !important; border:2px solid var(--accent) !important; }
.fscard .acts .plus.armed b { font-size:1rem; font-weight:900; white-space:nowrap; color:var(--ink-strong, var(--ink)) !important; }
.fscard .acts .plus.armed small { font-size:.72rem; font-weight:800; color:var(--ink-soft) !important; }
.fscard .acts .plus.armed .armbar { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--accent); transform-origin:left center; animation:fs-arm-drain 3s linear both; }
.fscard .acts .plus.arm-in b { animation:fs-arm-up .35s cubic-bezier(.34,1.56,.64,1) both; }
.fscard .acts .plus.arm-in small { animation:fs-arm-up .35s cubic-bezier(.34,1.56,.64,1) .08s both; }
.fscard .acts .plus.arm-back { animation:fs-arm-back .3s ease-out both; }
@keyframes fs-arm-drain { from { scale:1 1; } to { scale:0 1; } }
@keyframes fs-arm-up { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }
@keyframes fs-arm-back { from { opacity:.4; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
    .fscard .acts > button, .fscard .acts .plus.armed *, .fscard .acts .plus.arm-back { transition:none !important; animation:none !important; }
}
:root[data-theme="taegeuk"] .fscard .acts > button, :root[data-theme="taegeuk"] .fscard .acts .plus.armed *, :root[data-theme="taegeuk"] .fscard .acts .plus.arm-back { transition:none !important; animation:none !important; }

/* 폰 축사 보는 방법 [한 방씩 | 전체] (2026-10-14). PC 는 방 카드 하나라 없다 */
.fsbmode { display:none; }
@media (max-width:768px) {
  .fsbmode { display:inline-flex; margin-left:auto; border:1px solid var(--line-2, var(--line)); border-radius:999px; overflow:hidden; background:var(--surface); }
  #barnMode button { display:inline-flex; align-items:center; justify-content:center; border:0 !important; background:transparent !important;
      color:var(--ink-soft) !important; padding:0 12px !important; min-height:36px; cursor:pointer; border-radius:0 !important; }
  #barnMode button svg { width:17px; height:17px; }
  #barnMode button.on { background:var(--accent) !important; color:var(--accent-ink) !important; }
  .fsbmode + #barnToggle { margin-left:0; }
}

/* 분만 시작 · 포유 시작 확인 창 (2026-10-14 시안 5: 확인 창을 선명하게) — 흐름은 그대로, 가운데 정렬 ·
   색 아이콘(분만 초록 · 포유 파랑) · 큰 모돈번호 · 큰 색 단추. 공통 창(shared/dialog.js)에 fsask 이름표를 붙여 꾸민다 */
.hanul-dlg.fsask { width:min(380px, calc(100% - 24px)); text-align:center; padding:24px 20px 18px; border-radius:22px; }
.hanul-dlg.fsask .hd-ic { width:60px; height:60px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent) 20%, transparent); color:var(--accent); border:2px solid var(--accent); }
.hanul-dlg.fsask .hd-ic svg, .hanul-dlg.fsask .hd-ic i { width:28px; height:28px; }
.hanul-dlg.fsask .hd-title { margin:0; font-size:1rem; font-weight:800; color:var(--ink-soft, var(--ink)); }
.hanul-dlg.fsask .hd-big { font-size:2.1rem; font-weight:900; line-height:1.2; margin:4px 0 6px; color:var(--ink-strong, var(--ink)); overflow-wrap:anywhere; }
.hanul-dlg.fsask .hd-msg { color:var(--ink-dim, var(--ink)); font-weight:700; }
.hanul-dlg.fsask .hd-acts { justify-content:stretch; flex-wrap:nowrap; margin-top:18px; gap:10px; }
:root .hanul-dlg.fsask .hd-acts .hd-btn { flex:1; min-height:58px; font-size:1.08rem; font-weight:900; border-radius:14px!important; }
:root .hanul-dlg.fsask .hd-acts .hd-btn.hd-ok { flex:1.6; }
/* 확인 창 안 마릿수 두 줄 (나온 새끼 · 그중 포유 중) */
.hanul-dlg .fscount { margin:12px 0 0; display:grid; gap:8px; text-align:left; }
.hanul-dlg .fscount-r { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:14px; border:1px solid var(--line-2, var(--line)); background:var(--surface-2, var(--bg)); }
.hanul-dlg .fscount-r[data-k="nursing"] { border-color:color-mix(in srgb, var(--t-blue) 50%, var(--line)); }
.hanul-dlg .fscount-l { flex:1; min-width:0; font-weight:800; font-size:.92rem; color:var(--ink); }
/* 숫자 칸 — 눌러 바로 적는다 (2026-10-21). 평소에는 큰 숫자처럼 보이고, 누르면 테두리가 생긴다 */
:root .hanul-dlg .fscount-r .fscount-n { width:2.3em; min-width:0; padding:4px 2px; text-align:right; font:inherit; font-size:1.7rem; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums;
    color:var(--ink-strong, var(--ink)) !important; background:transparent !important; border:1.5px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent) !important; border-radius:10px !important; box-shadow:none !important; }
:root .hanul-dlg .fscount-r .fscount-n:focus { outline:none; border:2px solid var(--accent) !important; background:var(--surface) !important; }
:root .hanul-dlg .fscount-r[data-k="nursing"] .fscount-n { color:var(--t-blue) !important; }
.hanul-dlg .fscount-u { font-size:.8rem; font-weight:700; color:var(--ink-soft); }
:root .hanul-dlg .fscount-r button { width:48px; height:48px; flex:none; border-radius:12px!important; font:inherit; font-size:1.5rem; font-weight:900; cursor:pointer;
    border:1px solid var(--line-2, var(--line))!important; background:var(--surface)!important; color:var(--ink)!important; }
:root .hanul-dlg .fscount-r button:disabled { opacity:.35; cursor:default; }
.hanul-dlg .fscount-h { margin:0; font-size:.76rem; font-weight:700; color:var(--ink-soft); text-align:center; }
.hanul-dlg .fscount-h:empty { display:none; }
.hanul-dlg.fsask.blue .hd-ic { background:color-mix(in srgb, var(--fs-blue, #3b82f6) 18%, transparent); color:var(--fs-blue, #3b82f6); border-color:var(--fs-blue, #3b82f6); }
:root .hanul-dlg.fsask.blue .hd-acts .hd-btn.hd-ok { background:var(--fs-blue, #3b82f6)!important; border-color:var(--fs-blue, #3b82f6)!important; color:#fff!important; }
.hanul-dlg.fsask.red .hd-ic { background:color-mix(in srgb, var(--t-red, #e5484d) 18%, transparent); color:var(--t-red, #e5484d); border-color:var(--t-red, #e5484d); }
/* 빨간 확인 창 (분만 없애기 · 포유 중 모돈 다시 시작) — 없애기 · 시작은 빨간 테두리 단추, [아니요] 가 먼저 잡힌다 */
.hanul-dlg.fsask.red { border:2px solid color-mix(in srgb, var(--t-red, #e5484d) 60%, transparent); }
:root[data-theme="taegeuk"] .hanul-dlg.fsask { border-radius:8px!important; }

/* ── 분만 기록 + 이 칸 CCTV (2026-10-16 시안 5, 선명 스타일) ─────────────────────────
   막대를 누르면 카드 안에 펴진다. 분만 노랑(--t-amber) 판, 간격은 경고 주황 · 늦음 빨강, 사산은 빨간 번호 */
.fscard span.fstl[data-rec] { cursor:pointer; }
.fscard span.fstl[data-rec]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.fscard span.fstl[aria-expanded="true"] { box-shadow:0 0 0 2px color-mix(in srgb, var(--t-amber) 55%, transparent); }
:root .fscard .fsrec-go { display:flex; align-items:center; gap:6px; width:100%; margin-top:8px; padding:7px 12px; min-height:38px; border-radius:12px; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; text-align:left;
  color:var(--ink); background:color-mix(in srgb, var(--t-blue) 18%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--t-blue) 55%, transparent); }
.fscard .fsrec-go svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--t-blue); stroke-width:2; }
.fscard .fsrec-go b { font-weight:900; } .fscard .fsrec-go span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fscard .fsrec-go i { margin-left:auto; font-style:normal; font-size:1.1rem; color:var(--t-blue); }
.fsrec { margin-top:10px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb, var(--t-amber) 9%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--t-amber) 45%, transparent); }
.fsrec-h { display:flex; align-items:center; gap:8px; font-weight:900; font-size:.92rem; color:var(--ink); }
.fsrec-h .ic { width:26px; height:26px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--t-amber) 26%, var(--surface-solid,var(--surface))); }
.fsrec-h .ic svg { width:15px; height:15px; color:var(--t-amber); }
:root .fsrec .fsrec-x { margin-left:auto; min-height:32px; padding:4px 12px; border-radius:9px; border:1px solid var(--line-2,var(--line)); background:transparent; color:var(--ink-soft); font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
.fsrec-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:10px 0; }
.fsrec-3 > div { padding:6px 8px; border-radius:10px; background:var(--surface-solid,var(--surface)); border:1px solid var(--line); border-top:3px solid var(--t-amber); min-width:0; }
.fsrec-3 > div.g { border-top-color:var(--accent); } .fsrec-3 > div.o { border-top-color:var(--t-orange); }
.fsrec-3 small { display:block; font-size:.7rem; color:var(--ink-soft); font-weight:800; } .fsrec-3 b { font-size:1.15rem; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; }
.fsrec-prior { font-size:.8rem; color:var(--ink-soft); font-weight:700; margin:0 0 6px; }
.fsrec-list { display:grid; gap:4px; }
.fsrec-r { display:grid; grid-template-columns:28px 3.4em minmax(0,1fr) auto; gap:8px; align-items:center; padding:4px 6px; border-radius:10px; font-size:.86rem; font-weight:800; color:var(--ink); }
.fsrec-r .n { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:.8rem; color:var(--bg); background:var(--t-amber); }
.fsrec-r.dead { background:color-mix(in srgb, var(--t-red) 9%, transparent); } .fsrec-r.dead .n { background:var(--t-red); }
.fsrec-r .t { font-variant-numeric:tabular-nums; }
.fsrec-r .gb { height:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 8%, transparent); overflow:hidden; }
.fsrec-r .gb i { display:block; height:100%; border-radius:3px; background:var(--accent); } .fsrec-r .gb i.o { background:var(--t-orange); } .fsrec-r .gb i.r { background:var(--t-red); }
.fsrec-r .pl { display:inline-flex; padding:1px 8px; border-radius:999px; font-size:.74rem; font-weight:900; white-space:nowrap; color:var(--ink);
  background:color-mix(in srgb, var(--accent) 16%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.fsrec-r .pl.o { background:color-mix(in srgb, var(--t-orange) 18%, var(--surface-solid,var(--surface))); border-color:color-mix(in srgb, var(--t-orange) 55%, transparent); }
.fsrec-r .pl.r, .fsrec-r .pl.d { background:color-mix(in srgb, var(--t-red) 18%, var(--surface-solid,var(--surface))); border-color:color-mix(in srgb, var(--t-red) 60%, transparent); }
/* 카드 안 영상: CCTV 창(.fscam-pl) 모양을 빌리되 떠 있지 않게 */
.fscard .fscam-pl.fsrec-cam, .fscard .fscam-pl.fsrec-cam.many { position:static; z-index:auto; width:auto; max-height:none; overflow:visible; margin-top:10px; padding:8px; border-radius:12px; box-shadow:none;
  border-color:color-mix(in srgb, var(--t-blue) 50%, transparent); background:color-mix(in srgb, var(--t-blue) 8%, var(--surface-solid,var(--surface))); }
.fsrec-cam .hd { margin-bottom:6px; } .fsrec-cam .hd b { white-space:nowrap; } .fsrec-cam .hd small { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fsrec-cam .hd .x { flex:none; white-space:nowrap; padding:6px 10px; }
.fsrec-cam .ctags.off { display:block; } .fsrec-cam .ctags.off .ctag:not(.me) { display:none; }
.fscam-pl .ctag.me { z-index:2; --c:var(--t-amber); border-color:#fff; box-shadow:0 0 0 0 color-mix(in srgb, var(--t-amber) 75%, transparent); animation:fsrecMe 1.6s ease-out infinite; }
.fscam-pl .ctag.me b { background:var(--t-amber); color:#1a1a1a; } .fscam-pl .ctag.me .sw { background:color-mix(in srgb, var(--t-amber) 80%, #000); color:#111; font-weight:900; }
.fscam-pl .ctag.me.s-o { animation:fsrecMe 1.6s ease-out infinite, ctagBlink 1s ease-in-out infinite; } .fscam-pl .ctag.me.s-d { animation:fsrecMe 1.6s ease-out infinite, ctagBlink .8s ease-in-out infinite; }
@keyframes fsrecMe { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--t-amber) 75%, transparent); } 70%,100% { box-shadow:0 0 0 12px transparent; } }
/* 크게 보기 = 같은 영상을 화면 가득 (시안 2), 2분 뒤 멈춤 (시안 4) */
.fscard .fscam-pl.fsrec-cam.big { position:fixed !important; inset:0; z-index:1200; margin:0 !important; border-radius:0 !important; border:0 !important; display:flex; flex-direction:column;
  padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important; background:#000 !important; }
.fsrec-cam.big .hd { color:#fff; } .fsrec-cam.big .vs { flex:1; min-height:0; display:flex; align-items:center; } .fsrec-cam.big .vs > div { width:100%; }
.fsrec-cam.big .fsrec-camft { color:#ccc; }
:root.fscam-bigon, :root.fscam-bigon body { overflow:hidden; }
/* 큰 영상을 품은 카드: 맨 위 (폰 머리띠 150 · 다른 카드보다), 깜빡임 멈춤 — 투명도 깜빡임은 큰 영상을 그 카드 안에 가두고 함께 깜빡이게 한다 */
:root .fscard.fscam-host { position:relative; z-index:1200; opacity:1 !important; animation:none !important; }
.fsrec-left { flex:none; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:900; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums;
  background:color-mix(in srgb, var(--t-amber) 25%, var(--surface-solid,var(--surface))); }
.fsrec-left[hidden] { display:none; }
:root .fsrec-play { width:100%; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-radius:10px; cursor:pointer; font:inherit;
  color:#fff !important; background:#111 !important; border:1px solid var(--line) !important; }
.fsrec-play b { width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; color:#000; background:var(--accent); }
.fsrec-play b svg { width:26px; height:26px; fill:currentColor; margin-left:3px; }
.fsrec-play span { font-weight:900; font-size:.9rem; } .fsrec-play small { font-weight:800; font-size:.8rem; color:#ccc; }
.fsrec-play:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fsrec-camft { margin:6px 0 0 !important; font-size:.76rem; color:var(--ink-soft); font-weight:700; } .fsrec-camft b { color:var(--ink); }
@media (prefers-reduced-motion: reduce) { .fscam-pl .ctag, .fscam-pl .ctag.me, .fscam-pl .ctag .dd { animation:none !important; } }
@media print { .fsrec-go, .fsrec-cam { display:none !important; } }

/* ── 요약 띠 → 모돈 목록 (2026-10-16 시안 1 + 5, 선명 스타일) ──────────────────────────
   칸을 누르면 그 칸이 빛나고 바로 밑에 목록. 줄 왼쪽 띠 = 간격 단계(초록 · 주황 · 빨강), 오늘 종료는 파랑 */
.fssum > span[data-sum] { cursor:pointer; position:relative; transition:background .15s; }
.fssum > span[data-sum]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.fssum .run { --c:var(--accent); } .fssum .rv { --c:var(--t-orange,#c2680c); } .fssum .done { --c:var(--t-blue); }
.fssum > span.pick { background:color-mix(in srgb, var(--c) 16%, transparent); box-shadow:inset 0 -3px 0 var(--c) !important; }
.fssum .cv { font-style:normal; margin-left:2px; font-size:.68rem; color:var(--ink-soft); transition:transform .15s; } .fssum .pick .cv { transform:rotate(180deg); display:inline-block; }
.fssum-list { --c:var(--accent); display:grid; gap:6px; margin:-4px 0 12px; padding:10px; border-radius:14px;
  background:color-mix(in srgb, var(--c) 8%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.fssum-list[data-k="rv"] { --c:var(--t-orange,#c2680c); } .fssum-list[data-k="done"] { --c:var(--t-blue); }
#body > .fssum-list { grid-column:1 / -1; }
.fssum-list h4 { margin:0 0 2px; display:flex; align-items:center; gap:6px; font-size:.86rem; font-weight:900; color:var(--ink); }
:root .fssum-list .fssum-x { margin-left:auto; min-height:32px; padding:4px 12px; border-radius:9px; border:1px solid var(--line-2,var(--line)); background:transparent; color:var(--ink-soft); font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; }
.fssum-r { --rc:var(--c); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; cursor:pointer;
  background:var(--surface-solid,var(--surface)); border:1px solid var(--line); border-left:4px solid var(--rc); }
.fssum-r:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fssum-r.g { --rc:var(--accent); } .fssum-r.o { --rc:var(--t-orange,#c2680c); } .fssum-r.r { --rc:var(--t-red,#e5484d); } .fssum-r.b { --rc:var(--t-blue); }
.fssum-r .sw { display:block; font-size:1.1rem; font-weight:900; color:var(--ink); line-height:1.15; } .fssum-r .rm { display:block; font-size:.74rem; color:var(--ink-soft); font-weight:800; white-space:nowrap; }
.fssum-r .mid { font-size:.8rem; color:var(--ink); font-weight:800; min-width:0; } .fssum-r .mid small { display:block; color:var(--ink-soft); font-weight:700; font-size:.72rem; }
.fssum-r .pl { display:inline-flex; gap:2px; padding:2px 9px; border-radius:999px; font-size:.76rem; font-weight:800; white-space:nowrap; color:var(--ink);
  background:color-mix(in srgb, var(--rc) 20%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--rc) 60%, transparent); }
.fssum-r .pl b { font-weight:900; }
.fssum-none { margin:2px 0 0; font-size:.82rem; color:var(--ink-soft); }
.fscard.fsflash, .fstile.fsflash { animation:fsFlash 1.2s ease-out 2; }
@keyframes fsFlash { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow:0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .fscard.fsflash, .fstile.fsflash { animation:none; outline:3px solid var(--accent); } }
@media print { .fssum-list { display:none; } }

/* ── 모돈 관찰: 입수 · 식자 체크, 포유능력 S A B C (2026-10-16 시안 1 · 4 · 5, 선명 스타일) ─────────────
   체크는 누르면 색이 채워지고 ✓, 다시 누르면 풀린다. 등급 S 초록 · A 파랑 · B 노랑 · C 빨강. 지난 분만 조심은 빨강 */
.fsmk-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
/* 칩이 줄을 꽉 채운다 — 입수 · 식자는 같은 폭, 포유는 남은 자리, 등급 단추는 고르게 늘어난다 */
.fsmk-row > .fsmk-c, .fsmk-two > .fsmk-c { flex:1 1 0; min-width:max-content; justify-content:center; }
.fsmk-row > .fsmk-gr { flex:2.6 1 auto; } .fsmk-row .fsmk-gr .fsmk-g { flex:1 1 0; min-width:30px; width:auto; border-radius:999px; }
/* 체크하면 아래에 되돌리기 줄 */
.fsmk-undo { --c:var(--t-blue); flex:1 1 100%; display:flex; align-items:center; gap:8px; min-height:38px; padding:3px 3px 3px 12px; border-radius:12px; font-size:.82rem; font-weight:700; color:var(--ink-soft);
  background:color-mix(in srgb, var(--c) 12%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.fsmk-undo.sikja { --c:var(--t-red,#e5484d); }
.fsmk-undo .t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fsmk-undo b { color:var(--ink); font-weight:900; }
:root .fsmk-undo button { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:0 12px; border-radius:9px; font:inherit; font-size:.8rem; font-weight:900; cursor:pointer;
  color:var(--ink) !important; background:var(--surface-solid,var(--surface)) !important; border:1px solid var(--line-2,var(--line)) !important; }
.fsmk-undo button svg { width:15px; height:15px; }
.fsmk-undo button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
:root .fsmk-c { --c:var(--t-blue); display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 12px; border-radius:999px; font:inherit; font-weight:900; font-size:.82rem; cursor:pointer; white-space:nowrap;
  color:var(--ink); background:var(--surface-solid,var(--surface)); border:1px solid var(--line-2,var(--line)); }
:root .fsmk-c.sikja { --c:var(--t-red,#e5484d); }
:root .fsmk-c.sel { background:var(--c); border-color:var(--c); color:var(--bg); }
.fsmk-c .bx { width:16px; height:16px; flex:none; border-radius:5px; border:2px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:.7rem; opacity:.75; }
.fsmk-c.sel .bx { opacity:1; background:var(--bg); color:var(--c); border-color:var(--bg); } .fsmk-c.sel .bx::before { content:'✓'; font-weight:900; }
.fsmk-c small { font-weight:700; font-size:.72rem; opacity:.85; }
:root .fsmk-c.hint { border-color:var(--t-orange,#c2680c); animation:fsmkHint 1.8s ease-out infinite; }
@keyframes fsmkHint { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--t-orange,#c2680c) 55%, transparent); } 70%,100% { box-shadow:0 0 0 8px transparent; } }
.fsmk-c:focus-visible, .fsmk-g:focus-visible, .fsmk-big button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fsmk-gr { display:inline-flex; align-items:center; gap:3px; padding:2px 3px 2px 10px; border-radius:999px; border:1px solid var(--line-2,var(--line)); background:var(--surface-solid,var(--surface)); font-size:.76rem; font-weight:900; color:var(--ink-soft); }
:root .fsmk-g { --g:var(--accent); width:30px; height:30px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:inherit; font-weight:900; font-size:.82rem; color:var(--ink); border:1px solid var(--line-2,var(--line)); background:transparent; cursor:pointer; }
:root .fsmk-g[data-grade="A"], :root .fsmk-big [data-grade="A"], .fsmk-badge[data-g="A"] { --g:var(--t-blue); }
:root .fsmk-g[data-grade="B"], :root .fsmk-big [data-grade="B"], .fsmk-badge[data-g="B"] { --g:var(--t-amber); }
:root .fsmk-g[data-grade="C"], :root .fsmk-big [data-grade="C"], .fsmk-badge[data-g="C"] { --g:var(--t-red,#e5484d); }
:root .fsmk-g.sel { background:var(--g); border-color:var(--g); color:var(--bg); box-shadow:0 0 10px color-mix(in srgb, var(--g) 50%, transparent); }
.fsmk-past { display:flex; align-items:center; gap:6px; margin-top:8px; padding:6px 10px; border-radius:10px; font-size:.82rem; font-weight:800; color:var(--ink);
  background:color-mix(in srgb, var(--t-red,#e5484d) 14%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--t-red,#e5484d) 55%, transparent); }
.fsmk-past svg { width:16px; height:16px; flex:none; color:var(--t-red,#e5484d); } .fsmk-past b { font-weight:900; } .fsmk-past small { margin-left:auto; color:var(--ink-soft); font-weight:700; font-size:.72rem; white-space:nowrap; }
#sheetBody > .fsmk-past { margin:0 0 10px; }
.fsmk-box { margin:0 0 12px; padding:12px; border-radius:14px; background:color-mix(in srgb, var(--t-pink) 8%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--t-pink) 45%, transparent); }
.fsmk-h { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:.92rem; font-weight:900; color:var(--ink); } .fsmk-h small { margin-left:auto; color:var(--ink-soft); font-size:.72rem; font-weight:800; }
.fsmk-h .ic { width:26px; height:26px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--t-pink) 24%, var(--surface-solid,var(--surface))); }
.fsmk-h .ic svg { width:15px; height:15px; color:var(--t-pink); }
.fsmk-l { display:grid; grid-template-columns:6em minmax(0,1fr); gap:8px; align-items:center; margin:8px 0 6px; font-size:.74rem; color:var(--ink-soft); font-weight:700; }
.fsmk-l b { font-size:.9rem; font-weight:900; color:var(--ink); } .fsmk-l b small { display:block; font-size:.68rem; color:var(--ink-soft); font-weight:700; }
.fsmk-two { display:flex; flex-wrap:wrap; gap:6px; } :root .fsmk-c.big { min-height:44px; border-radius:12px; padding:6px 14px; font-size:.88rem; }
.fsmk-big { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
:root .fsmk-big button { --g:var(--accent); padding:8px 4px; border-radius:12px; font:inherit; cursor:pointer; color:var(--ink); border:1px solid color-mix(in srgb, var(--g) 50%, transparent); background:color-mix(in srgb, var(--g) 8%, var(--surface-solid,var(--surface))); }
.fsmk-big button b { display:block; font-size:1.35rem; font-weight:900; color:var(--g); } .fsmk-big button small { display:block; font-size:.68rem; font-weight:800; color:var(--ink-soft); }
:root .fsmk-big button.sel { background:var(--g); border-color:var(--g); box-shadow:0 0 12px color-mix(in srgb, var(--g) 50%, transparent); }
.fsmk-big button.sel b, .fsmk-big button.sel small { color:var(--bg); }
.fstile .fsmk-tag { position:absolute; right:4px; top:4px; display:inline-flex; align-items:center; gap:3px; pointer-events:none; }
.fsmk-badge { --g:var(--accent); display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:6px; font-size:.72rem; font-weight:900; color:var(--bg); background:var(--g); }
.fsmk-dot { width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 2px var(--surface-solid,var(--surface)); } .fsmk-dot.sj { background:var(--t-red,#e5484d); } .fsmk-dot.ip { background:var(--t-blue); }
.fstile.fsmk-worry { outline:2px solid var(--t-red,#e5484d); outline-offset:-2px; overflow:visible; }
.fstile .fsmk-warn { position:absolute; left:10px; top:-9px; z-index:2; display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:6px; font-size:.66rem; font-weight:900; color:#fff; background:var(--t-red,#e5484d); white-space:nowrap; pointer-events:none; gap:3px; }
.fstile .fsmk-warn svg { width:11px; height:11px; }
/* 낮 · 한울 · 태극은 단추 바탕을 !important 로 칠한다 — 이 화면의 다른 단추처럼 !important 로 되살린다 */
:root .fscard .fsmk-c, :root #sheet .fsmk-c { background:var(--surface-solid,var(--surface)) !important; color:var(--ink) !important; border-color:var(--line-2,var(--line)) !important; }
:root .fscard .fsmk-c.hint { border-color:var(--t-orange,#c2680c) !important; }
:root .fscard .fsmk-c.sel, :root #sheet .fsmk-c.sel { background:var(--c) !important; border-color:var(--c) !important; color:var(--bg) !important; }
:root .fscard .fsmk-g { background:transparent !important; color:var(--ink) !important; border-color:var(--line-2,var(--line)) !important; }
:root .fscard .fsmk-g.sel { background:var(--g) !important; border-color:var(--g) !important; color:var(--bg) !important; }
:root #sheet .fsmk-big button { background:color-mix(in srgb, var(--g) 8%, var(--surface-solid,var(--surface))) !important; border-color:color-mix(in srgb, var(--g) 50%, transparent) !important; color:var(--ink) !important; }
:root #sheet .fsmk-big button.sel { background:var(--g) !important; border-color:var(--g) !important; }
@media (prefers-reduced-motion: reduce) { :root .fsmk-c.hint { animation:none; } }
@media print { .fsmk-row .fsmk-gr, .fsmk-c.hint { animation:none; } }

/* ── 사용법 (2026-10-16 시안 4) — 머리의 [사용법] 단추, 직원 카드의 작은 ? (막대 · 입수 줄 · 새끼 +1). 자리를 차지하지 않게 띄운다 ── */
.fscard .fsmk-row, .fscard .acts { position:relative; }
.fscard .fsq { position:absolute; z-index:3; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:900; line-height:1; text-decoration:none;
  color:#111 !important; background:#ffd65a; border:2px solid var(--surface-solid, var(--surface)); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.fscard .fsq::before { content:''; position:absolute; inset:-9px; }          /* 손가락이 닿기 쉽게 */
.fscard .fsq:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fscard span.fstl > .fsq { right:-8px; top:-13px; }
.fscard .fsmk-row > .fsq { right:-6px; top:-9px; }
.fscard .acts > .fsq { left:-6px; top:-9px; }
@media print { .fscard .fsq { display:none; } }

/* ── 방금 적은 새끼 되돌리기 줄 · 누름 소리 단추 (2026-10-16) ── */
.fstapundo { --c:var(--accent); display:flex; align-items:center; gap:8px; margin-top:8px; min-height:42px; padding:3px 3px 3px 12px; border-radius:12px; font-size:.86rem; font-weight:700; color:var(--ink-soft);
  background:color-mix(in srgb, var(--c) 14%, var(--surface-solid,var(--surface))); border:1px solid color-mix(in srgb, var(--c) 50%, transparent); animation:fstapIn .25s ease-out; }
.fstapundo.dead { --c:var(--t-red,#e5484d); }
.fstapundo > svg { width:17px; height:17px; flex:none; color:var(--c); }
.fstapundo .t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fstapundo b { color:var(--ink); font-weight:900; }
:root .fstapundo button { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 14px; border-radius:9px; font:inherit; font-size:.84rem; font-weight:900; cursor:pointer;
  color:var(--ink) !important; background:var(--surface-solid,var(--surface)) !important; border:1px solid var(--line-2,var(--line)) !important; }
.fstapundo button svg { width:15px; height:15px; }
.fstapundo button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@keyframes fstapIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .fstapundo { animation:none; } }
@media print { .fstapundo { display:none; } }