/* ============================================================================
   분만사 지도와 분만 스톱워치 — /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; }
.fsrooms { display:flex; flex-wrap:wrap; gap:6px; }
.fsrooms button { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line-2,var(--line));
    background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:8px 13px;
    font:inherit; font-size:.85rem; font-weight:800; cursor:pointer; }
/* 분만 중인 방은 색을 꽉 채운다. theme.css 가 낮 계열에서 button.on 을 accent 로
   칠하고 글자를 accent-ink 로 맞춰 주므로, 그 길을 그대로 탄다 (글자가 늘 읽힌다). */
.fsrooms button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.fsrooms button .n { background:var(--accent-ink); color:var(--accent); border-radius:999px;
    padding:0 6px; font-size:.7rem; line-height:1.55; }
/* 늦은 방은 칸 수 배지만 빨갛게. 칩까지 빨갛게 채우면 밤에 흰 글자 대비가 3.3 밖에 안 나온다.
   배지 글자는 --accent-ink 를 쓴다. 밤에는 짙은 색, 낮에는 흰색이라 빨강 위에서 늘 읽힌다. */
.fsrooms button.on.late .n { background:var(--t-red,#e5484d); color:var(--accent-ink); }
.fsbarnbar { display:flex; align-items:center; gap:8px; }
.fshelp { font-size:.74rem; font-weight:700; color:var(--ink-dim); }
#barnToggle { margin-left:auto; 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:.76rem; font-weight:800; cursor:pointer; }
.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 .w { font-size:.76rem; color:var(--ink-dim); font-weight:800; }
.fscard .l1 .s { font-size:1.15rem; font-weight:900; color:var(--ink-strong); letter-spacing:-.4px; text-decoration:none; }
.fscard .l1 .c { margin-left:auto; font-size:.85rem; font-weight:800; }
.fscard .l2 { display:flex; align-items:flex-end; gap:10px; margin:5px 0 2px; }
.fscard .clock { font-size:2.3rem; font-weight:900; letter-spacing:-1.5px; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.fscard .since { font-size:.79rem; font-weight:800; color:var(--ink-soft); padding-bottom:4px; }
.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, .fscard.warn .since { color:var(--warn,#c2680c); }
.fscard.danger { border-color:var(--t-red,#e5484d); background:rgba(224,87,71,.12); }
.fscard.danger .clock, .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-dim); border-radius:9px; padding:6px 11px; font:inherit; font-size:.76rem;
    font-weight:800; 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; }
.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; }
.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(--accent-ink) !important; color:var(--accent) !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; }
/* 왼쪽에 띄워 둔 방은 테두리로 표시한다. 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 button { padding:9px 16px; font-size:.9rem; }
  #barnToggle { padding:9px 15px; font-size:.82rem; }
  .fshelp { font-size:.8rem; }
  .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; }
.fsroomsum { margin:0 2px 10px; font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.fsroomsum b { color:var(--ink-strong); font-variant-numeric:tabular-nums; }
.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; }
.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; }
.fsbnote .ok { color:var(--accent); } .fsbnote .wa { color:var(--t-orange,#c2680c); } .fsbnote .da { color:var(--t-red,#e5484d); }
.fsbnote .we { color:var(--t-blue,#3b82f6); } .fsbnote .nj { color:var(--t-orange,#c2680c); }
.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-w, .fsbchips i.b-w { background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-dim); }
.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); }
.fsbm i.b-o { background:var(--t-orange,#c2680c); animation:fsbblink 1s ease-in-out infinite; }
.fsbm i.b-d { background:var(--t-red,#e5484d); animation:fsbblink 1s ease-in-out infinite; }
.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(--t-orange,#c2680c); 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; } }
.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(--ink-dim); color:var(--ink-soft) !important; background:transparent !important; }
#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); }   /* 빈칸만 볼 때는 점선을 또렷하게 */