/* Shared icon rendering lives in lucide-icons.css; theme-specific sizing stays here. */
:root[data-design="calm"] .hanul-menu-icon .hanul-line-icon { width:22px; height:22px; }
:root[data-design="calm"] .hanul-sidebar-logo .hanul-symbol { width:24px!important; height:30px; margin:0!important; opacity:1!important; padding:0!important; }
:root[data-design="calm"] .hanul-sidebar-logo .hanul-line-icon { width:24px; height:24px; }
:root[data-design="calm"] .hanul-sidebar-logo { color:var(--accent)!important; }
:root[data-design="calm"] .page-head h1 > .hanul-symbol { display:none; }
/* 화면 장식만 정돈한다. 상태색·사진 비교표·인쇄 양식은 각 화면 규칙을 따른다. */
@media screen {
  :root[data-design="calm"] body { font-weight:400; }
  :root[data-design="calm"] body::before { display:none!important; }
  :root[data-design="calm"] .page-head {
    padding:8px 0 20px!important; border:0!important; border-radius:0!important;
    background:transparent!important; box-shadow:none!important; backdrop-filter:none!important;
  }
  :root[data-design="calm"] .page-head::before,
  :root[data-design="calm"] .card-title::before,
  :root[data-design="calm"] .room-row.header::before,
  :root[data-design="calm"] .hanul-menu-item.active::before,
  :root[data-design="calm"] .card::before,
  :root[data-design="calm"] .card-glow::before { display:none!important; }
  :root[data-design="calm"] .page-head h1 { font-weight:650!important; font-size:clamp(1.35rem,2.2vw,1.8rem)!important; letter-spacing:-.035em; }
  :root[data-design="calm"] .page-head .sub { font-weight:400!important; margin-top:8px; }
  :root[data-design="calm"] :is(.card,.stat-item,.stat-card,.tile,.room-card) {
    background:var(--surface)!important; border:1px solid var(--line)!important;
    border-radius:12px!important; box-shadow:none!important; backdrop-filter:none!important;
  }
  :root[data-design="calm"] :is(.card,.stat-item,.stat-card,.tile,.room-card):hover { transform:none!important; box-shadow:none!important; }
  :root[data-design="calm"] .card { padding:20px!important; margin-bottom:20px; }
  :root[data-design="calm"] :is(.card-title,.section-title,.hub-gt) { font-size:1rem!important; font-weight:600!important; color:var(--ink)!important; background:none!important; -webkit-text-fill-color:currentColor!important; }
  :root[data-design="calm"] :is(.stat-value,.stat-value.highlight) { background:none!important; -webkit-text-fill-color:currentColor!important; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
  :root[data-design="calm"] .stat-value.highlight { color:var(--accent); }
  :root[data-design="calm"] .tab-nav { padding:0!important; gap:20px!important; border:0!important; border-bottom:1px solid var(--line)!important; border-radius:0!important; background:none!important; box-shadow:none!important; }
  :root[data-design="calm"] .tab-nav .tab-btn { border:0!important; border-bottom:2px solid transparent!important; border-radius:0!important; background:none!important; color:var(--ink-soft)!important; box-shadow:none!important; padding:12px 2px!important; font-weight:500!important; transform:none!important; }
  :root[data-design="calm"] .tab-nav .tab-btn.active { background:transparent!important; border-bottom-color:var(--accent)!important; color:var(--accent)!important; }
  :root[data-design="calm"] .tab-nav .tab-btn.active * { color:inherit!important; }
  :root[data-design="calm"] .tab-nav .tab-btn { font-size:var(--fs-ctl)!important; }
  :root[data-design="calm"] :is(.btn,.load-btn,.table-btn,.btn-primary,.btn-secondary,.btn-this-week,.photo-btn) {
    border-radius:9px!important; box-shadow:none!important; font-weight:500!important;
    transition:background-color .15s,border-color .15s!important; transform:none!important;
  }
  :root[data-design="calm"] :is(.load-btn,.table-btn,.btn-secondary,.btn-this-week) { background:var(--surface)!important; color:var(--ink)!important; border:1px solid var(--line)!important; }
  :root[data-design="calm"] :is(.load-btn,.table-btn,.btn-secondary,.btn-this-week):hover { background:var(--surface-2)!important; border-color:var(--line-2)!important; }
  :root[data-design="calm"] :is(.submit-section > .btn,.btn-primary) { background:var(--accent)!important; color:var(--accent-ink)!important; border:1px solid transparent!important; }
  :root[data-design="calm"] :is(input,select,textarea) { border-radius:7px; font-variant-numeric:tabular-nums; }
  :root[data-design="calm"] :is(input,select,textarea):focus-visible { outline:2px solid var(--accent)!important; outline-offset:2px; }
  :root[data-design="calm"] .sync-status.connected { border:0!important; background:none!important; color:var(--ink-soft)!important; font-weight:400!important; }
  :root[data-design="calm"] .sync-status.connected .sync-dot { background:var(--accent)!important; }
  /* 점은 뜻이 있을 때만 깜빡인다: 연결됨이면 가만히, 확인 중·끊김이면 깜빡임 (화면마다 늘 깜빡이던 것을 여기서 한 번에 정리) */
  :root[data-design="calm"] :is(.sync-status .sync-dot, .hanul-status-dot) { animation:none!important; opacity:1; }
  :root[data-design="calm"] .sync-status:is(.checking,.disconnected) .sync-dot { animation:hanulDotPulse 1.2s ease-in-out infinite!important; }
  /* 폰에서 넓은 일지 표(종부·분만·이유)를 옆으로 밀어도 모돈번호 열은 제자리에 둔다 (어느 모돈 줄인지 잃었다) */
  :root[data-design="calm"] table:has(> #sowInputBody, > #sowListBody) :is(thead th, tbody td):first-child { position:sticky; left:0; z-index:1; background:var(--surface-solid); box-shadow:1px 0 0 var(--line); }
  :root[data-design="calm"] table:has(> #sowInputBody, > #sowListBody) thead th:first-child { z-index:3; }
  :root[data-design="calm"] table:has(> #sowListBody) tr.pending > td:first-child { background:linear-gradient(var(--warn-10),var(--warn-10)), var(--surface-solid); }
  :root[data-design="calm"] .tile .ico { color:var(--ink-soft); background:none!important; font-size:1.5rem; }
  :root[data-design="calm"] .tile h3 { font-weight:600; }
  :root[data-design="calm"] .hanul-sidebar { box-shadow:none!important; }
  :root[data-design="calm"] .hanul-sidebar .hanul-menu-item { font-weight:400; }
  :root[data-design="calm"] .hanul-sidebar .hanul-menu-item.active { box-shadow:none!important; }
  :root[data-design="calm"] .hanul-sidebar .hanul-menu-group { color:var(--ink-soft)!important; font-weight:500; }
  :root[data-design="calm"] .hanul-sidebar .hanul-prefs-toggle { border:0!important; background:none!important; }
  /* 분만사 주보: 둥근 방 카드 열 개를 하나의 얇은 표로 만든다. */
  :root[data-design="calm"] body:has(#nursingPhotoButton) .room-grid { gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .room-row { grid-template-columns:64px repeat(3,minmax(0,1fr)); gap:12px; min-height:54px; padding:8px 16px; border:0!important; border-bottom:1px solid var(--line)!important; border-radius:0; margin:0; background:var(--surface)!important; box-shadow:none!important; font-variant-numeric:tabular-nums; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .room-row.header { min-height:48px; font-size:.82rem; color:var(--ink-soft)!important; font-weight:500; background:var(--bg)!important; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) #roomsContainer .room-row:last-child { border-bottom:0!important; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .room-label { text-align:left; font-size:.9rem; font-weight:400; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .room-input-group input { width:100%; min-width:0; padding:8px; border:1px solid var(--line)!important; background:transparent!important; box-shadow:none!important; color:var(--ink)!important; font-weight:400; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .room-input-group input:hover { border-color:var(--line-2)!important; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .room-input-group input:focus { border-color:var(--accent)!important; background:var(--field)!important; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .period-display { background:transparent!important; border-color:var(--line)!important; color:var(--ink)!important; font-weight:500; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .stats-grid { gap:12px; margin-top:12px; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .stat-item { padding:14px; text-align:left; background:transparent!important; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .stat-label { font-size:.82rem; margin-bottom:8px; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .stat-value { font-size:1.4rem; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .card-title:has(#nursingPhotoButton) { justify-content:flex-start; gap:10px; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) [data-lang="roomStatus"] { margin-right:auto; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .card-title .load-btn { margin:0!important; }
  :root[data-design="calm"] .toast:not(.error):not(.warning) { background:var(--surface)!important; color:var(--ink)!important; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
}
@media screen and (max-width:768px) {
  :root[data-design="calm"] .card { padding:14px!important; }
  :root[data-design="calm"] .tab-nav { gap:14px!important; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .room-row { grid-template-columns:40px repeat(3,minmax(0,1fr)); gap:4px; padding:8px; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .week-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .info-item :is(input,select) { width:100%; min-width:0; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .period-display { padding:12px 4px; font-size:.82rem; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) [data-lang="roomStatus"] { flex-basis:100%; }
  :root[data-design="calm"] body:has(#nursingPhotoButton) .card-title .load-btn { width:auto!important; flex:1; margin:0; }
}
:root[data-design="calm"][data-theme] {
  --bg:#101a20; --bg-grad-1:#101a20; --bg-grad-2:#101a20; --bg-grad-3:#101a20;
  --surface:#19272e; --surface-0:#152229; --surface-2:#203039; --surface-3:#263942;
  --surface-02:#152229; --surface-04:#19272e; --surface-solid:#19272e; --field:#142229;
  --line:#30443f; --line-2:#496159; --line-3:#3a5048; --line-4:#496159;
  --ink:#e4efec; --ink-strong:#f4faf7; --ink-soft:#a3bbb2; --ink-dim:#829e93;
  --ink-mid:#c2d7ce; --ink-gray:#a3bbb2;
  --accent:#79dab5; --accent-2:#79dab5; --accent-3:#79dab5; --accent-ink:#10271e; --accent-text:#a0e8cc;
  --accent-05:rgba(121,218,181,.05); --accent-10:rgba(121,218,181,.10); --accent-20:rgba(121,218,181,.17);
  --accent-30:rgba(121,218,181,.30); --accent-40:rgba(121,218,181,.40); --accent-60:rgba(121,218,181,.60);
  --nav-bg-1:#19272e; --nav-bg-2:#19272e; --nav-ink:#e4efec;
  --panel:#19272e; --panel-2:#203039; --shadow:0 6px 20px rgba(0,0,0,.18); --shadow-soft:0 2px 10px rgba(0,0,0,.12);
  --glow-1:transparent; --glow-2:transparent; --glow-3:transparent;
  --calm-motion:300ms;
}
:root[data-design="calm"][data-theme="light"] {
  --bg:#f3f6f5; --bg-grad-1:#f3f6f5; --bg-grad-2:#f3f6f5; --bg-grad-3:#f3f6f5;
  --surface:#fff; --surface-0:#f8faf9; --surface-2:#fff; --surface-3:#edf3f0;
  --surface-02:#f8faf9; --surface-04:#f3f6f5; --surface-solid:#fff; --field:#fff;
  --line:#dce6e2; --line-2:#bdcec6; --line-3:#d0ddd7; --line-4:#bdcec6;
  --ink:#233a3a; --ink-strong:#142e29; --ink-soft:#596f65; --ink-dim:#647c70;
  --ink-mid:#405c50; --ink-gray:#596f65;
  --accent:#14765f; --accent-2:#14765f; --accent-3:#14765f; --accent-ink:#fff; --accent-text:#11654f;
  --accent-05:rgba(20,118,95,.05); --accent-10:rgba(20,118,95,.08); --accent-20:rgba(20,118,95,.13);
  --accent-30:rgba(20,118,95,.30); --accent-40:rgba(20,118,95,.40); --accent-60:rgba(20,118,95,.60);
  --nav-bg-1:#fff; --nav-bg-2:#fff; --nav-ink:#233a3a;
  --panel:#fff; --panel-2:#f8faf9; --shadow:0 6px 20px rgba(22,54,41,.05); --shadow-soft:0 2px 8px rgba(22,54,41,.04);
}
:root[data-design="calm"][data-theme="hanul"] {
  --bg:#efeadb; --bg-grad-1:#efeadb; --bg-grad-2:#efeadb; --bg-grad-3:#efeadb;
  --surface:#fffdf6; --surface-0:#f8f5ea; --surface-2:#f7f3e6; --surface-3:#ebe6d5;
  --surface-02:#f8f5ea; --surface-04:#f3efe2; --surface-solid:#fffdf6; --field:#fbf9f1;
  --line:#d9d4c2; --line-2:#b9c3b1; --line-3:#cfcab8; --line-4:#b9c3b1;
  --ink:#203c31; --ink-strong:#15382f; --ink-soft:#52674f; --ink-dim:#74857a;
  --ink-mid:#3a5a4b; --ink-gray:#52674f;
  --accent:#294f3c; --accent-2:#294f3c; --accent-3:#294f3c; --accent-ink:#fff9e9; --accent-text:#294f3c;
  --accent-05:rgba(41,79,60,.05); --accent-10:rgba(41,79,60,.09); --accent-20:rgba(41,79,60,.15);
  --accent-30:rgba(41,79,60,.30); --accent-40:rgba(41,79,60,.40); --accent-60:rgba(41,79,60,.60);
  --nav-bg-1:#15382f; --nav-bg-2:#15382f; --nav-ink:#f3efe0;
  --panel:#fffdf6; --panel-2:#f7f3e6; --shadow:0 6px 20px rgba(21,56,47,.10); --shadow-soft:0 2px 8px rgba(21,56,47,.07);
}
/* 태극의 밝은 면이 공통 calm 팔레트보다 우선한다. */
:root[data-design="calm"][data-theme="taegeuk"] {
  --bg:#ffffff; --bg-grad-1:#ffffff; --bg-grad-2:#ffffff; --bg-grad-3:#ffffff;
  --surface:#ffffff; --surface-0:#fafbfd; --surface-2:#f8fafc; --surface-3:#f3f5f8;
  --surface-02:#fafbfd; --surface-04:#f8fafc; --surface-solid:#ffffff; --field:#ffffff;
  --line:#e1e5eb; --line-2:#c6cfd9; --line-3:#d5dce5; --line-4:#bac5d1;
  --ink:#272c35; --ink-strong:#202733; --ink-soft:#657182; --ink-dim:#6f7985;
  --ink-mid:#475466; --ink-gray:#657182;
  --accent:#315e9b; --accent-2:#315e9b; --accent-3:#315e9b; --accent-ink:#ffffff; --accent-text:#315e9b;
  --accent-05:rgba(49, 94, 155, 0.05); --accent-10:rgba(49, 94, 155, 0.10); --accent-20:rgba(49, 94, 155, 0.20);
  --accent-30:rgba(49, 94, 155, 0.30); --accent-40:rgba(49, 94, 155, 0.40); --accent-60:rgba(49, 94, 155, 0.60);
  --nav-bg-1:#ffffff; --nav-bg-2:#ffffff; --nav-ink:#272c35;
  --panel:#ffffff; --panel-2:#f8fafc; --shadow:0 6px 20px rgba(39, 44, 53, 0.05); --shadow-soft:0 2px 8px rgba(39, 44, 53, 0.04);
}

/* 한울: 사이드바만 로그인 "한울타리"의 깊은 초록 틀이다. 안쪽 부품이 쓰는 토큰을 이 범위에서 다시 정해
   글자는 크림, 활성 메뉴·단추는 금빛(#eacb8b)이 된다. 본문은 그대로 크림 면이다. */
:root[data-design="calm"][data-theme="hanul"] .hanul-sidebar {
  --surface:#15382f; --surface-0:#12302a; --surface-2:#1c4238; --surface-3:#234b40;
  --surface-02:#12302a; --surface-04:#15382f; --surface-solid:#15382f; --field:#12302a;
  --line:#2b5346; --line-2:#3c6656; --line-3:#2b5346; --line-4:#3c6656;
  --ink:#f3efe0; --ink-strong:#fff9e9; --ink-soft:#c9cfbf; --ink-dim:#a3ad9d; --ink-mid:#e0dcc9; --ink-gray:#c9cfbf;
  --ink-90:rgba(243,239,224,.92); --ink-80:rgba(243,239,224,.82); --ink-70:rgba(243,239,224,.72);
  --ink-60:rgba(243,239,224,.66); --ink-50:rgba(243,239,224,.55);
  --accent:#eacb8b; --accent-2:#eacb8b; --accent-3:#eacb8b; --accent-ink:#2d472f; --accent-text:#eacb8b;
  --accent-05:rgba(234,203,139,.06); --accent-10:rgba(234,203,139,.14); --accent-20:rgba(234,203,139,.22);
  --accent-30:rgba(234,203,139,.32); --accent-40:rgba(234,203,139,.42); --accent-60:rgba(234,203,139,.60);
  --nav-bg-1:#15382f; --nav-bg-2:#15382f; --nav-ink:#f3efe0; --panel:#1c4238; --panel-2:#234b40;
  --shadow:none; --shadow-soft:none; color-scheme:dark;
}
:root[data-design="calm"][data-theme="hanul"] .hanul-sidebar :is(.hanul-theme-btn, .hanul-font-btn, .hanul-lang-btn, .hanul-fx-btn).active { color:var(--accent-ink)!important; }
:root[data-design="calm"] body { background:var(--bg); }
:root[data-design="calm"] .hanul-sidebar { background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-soft); }
:root[data-design="calm"] .hanul-menu-item { border-radius:9px; }
:root[data-design="calm"] .hanul-menu-group { background:transparent!important; border:0!important; }
:root[data-design="calm"] .hanul-menu-short { color:inherit; }
:root[data-design="calm"] .hanul-menu-item.active { border-color:transparent; background:var(--accent-10); color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
:root[data-design="calm"] .hanul-sidebar-logo { background:none; -webkit-text-fill-color:var(--ink); color:var(--ink); }
.hanul-menu-short { display:none; }
.hanul-calm-backdrop { display:none; }
/* 메뉴를 다시 만들지 않고 묶음 높이를 부드럽게 바꾼다. */
:root[data-design="calm"] .hanul-mg-body { display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--calm-motion) cubic-bezier(.22,1,.36,1); }
:root[data-design="calm"] .hanul-sidebar .hanul-mg-body.closed { display:grid; grid-template-rows:0fr; }
:root[data-design="calm"] .hanul-mg-inner { min-height:0; overflow:hidden; }
@media(min-width:769px) {
  /* 본문 너비를 고정하고 240px 메뉴를 88px까지 가려서 접는다. 사이드바가 없는 로그인 화면은 뺀다. */
  :root[data-design="calm"] body:not(#loginPage),
  :root[data-design="calm"] body.sidebar-collapsed { padding-left:108px; transition:none; }
  :root[data-design="calm"] .hanul-sidebar,
  :root[data-design="calm"] .hanul-sidebar.collapsed { width:240px; clip-path:inset(0); transition:clip-path var(--calm-motion) cubic-bezier(.22,1,.36,1); }
  :root[data-design="calm"] .hanul-sidebar.collapsed { clip-path:inset(0 152px 0 0); }
  /* 높이를 못박아 두면 글자 크기를 '아주 크게' 로 했을 때 '한울축산' 아래 획이 잘려
     '하울축사' 처럼 보였다 (칸 30px · 글자 32px, overflow:hidden). 최소 높이로 둔다.
     머리글도 같이 풀어야 로고가 커진 만큼 날짜를 밀어낼 자리가 생긴다. */
  :root[data-design="calm"] .hanul-sidebar-header,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-sidebar-header { height:auto; min-height:96px; padding:18px 16px; text-align:left; position:relative; }
  :root[data-design="calm"] .hanul-sidebar-logo,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-sidebar-logo { font-size:1.25rem; padding-left:10px; min-height:30px; height:auto; }
  :root[data-design="calm"] .hanul-sidebar-logo span,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-sidebar-logo span { max-width:160px; margin-left:28px; transition:opacity 150ms; }
  /* 칸 높이를 18px 로 못박아 두면 글자 크기를 '아주 크게' 로 했을 때 날짜 아래가 잘렸다.
     (부모의 overflow:hidden 에 걸린다) 최소 높이로 두어 글자만큼 늘어나게 한다. */
  :root[data-design="calm"] .hanul-sidebar-date,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-sidebar-date { display:block; font-size:.75rem; margin:5px 0 0 72px; min-height:18px; height:auto; transition:opacity 150ms; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-sidebar-date { opacity:0; }
  :root[data-design="calm"] .hanul-collapse-hint { display:none!important; }
  /* 화살표를 돼지 아이콘 정중앙 아래에 둔다. 예전에는 left 만 34px 로 잡아 화살표 글자 폭만큼
     오른쪽으로 치우쳤고(보통 5px · 아주 크게 9px), 글자를 키울수록 더 벌어졌다.
     아이콘과 같은 칸(왼쪽 26px · 너비 24px)을 주고 가운데 정렬하면 글자 폭과 상관없이 맞는다. */
  :root[data-design="calm"] .hanul-collapse-arrow,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-collapse-arrow { display:block; position:absolute; left:26px; width:24px; text-align:center; top:51px; margin:0; transform:rotate(0); transition:transform var(--calm-motion); }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-collapse-arrow { transform:rotate(180deg); }
  :root[data-design="calm"] .hanul-sidebar-menu { padding:10px 8px; scrollbar-width:none; overflow-anchor:none; }
  :root[data-design="calm"] .hanul-sidebar-menu::-webkit-scrollbar { width:0; }
  /* 글자 배율이 커져도 아이콘의 기준선과 아래 메뉴명이 겹치지 않는다. */
  :root[data-design="calm"] .hanul-menu-item,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-item { width:223px; min-height:50px; height:max(50px,calc(38px + .756rem)); padding:0; margin:2px 0; justify-content:flex-start; border:0; }
  :root[data-design="calm"] .hanul-menu-icon { width:72px; min-width:72px; display:flex; align-items:center; justify-content:center; line-height:1; transform:translateY(0); transition:transform var(--calm-motion); }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-icon { position:absolute; left:0; top:7px; height:22px; transform:none; }
  :root[data-design="calm"] .hanul-menu-text,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-text { width:auto; margin:0 0 0 6px; transition:opacity 150ms; }
  :root[data-design="calm"] .hanul-menu-short { display:block; position:absolute; left:0; bottom:5px; width:72px; text-align:center; font-size:.63rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity 120ms; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-short { opacity:1; }
  :root[data-design="calm"] .hanul-menu-group,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-group { height:32px; margin:8px 0 2px; padding:0; pointer-events:auto; gap:0; position:relative; }
  /* 폭을 72px 로 못박아 두면 '내가 쓰는 것' 처럼 긴 이름이 글자 중간에서 잘린다
     (글자를 '아주 크게' 로 하면 보통 크기에서도 잘린다). 접었을 때만 72px 로 묶고,
     펼쳤을 때는 72px 를 최소로 두어 이름만큼 늘어나게 한다. */
  :root[data-design="calm"] .hanul-mg-name { display:block; flex:none; min-width:72px; padding:0 4px; text-align:center; font-size:.66rem; }
  /* 접으면 이름 칸이 아이콘 줄에 맞춰 72px 이다. 긴 이름은 글자를 '아주 크게' 로 하면 넘쳐
     끝 글자가 잘렸다. 한 줄을 고집하지 말고 줄을 넘겨 다 보이게 한다.
     짧은 이름(오늘·이번 주·관리)은 그대로 한 줄이라 모양이 바뀌지 않는다. */
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-mg-name { display:block; flex:none; width:72px; min-width:0; padding:0; text-align:center; font-size:.66rem; white-space:normal; line-height:1.2; overflow:hidden; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-group { height:auto; min-height:32px; }
  :root[data-design="calm"] .hanul-mg-chev,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-mg-chev { display:block; position:absolute; right:6px; }
  /* 접으면 '내가 쓰는 것' 은 이름 대신 별 하나만 보여 준다. 좁은 칸(72px)에 글자를 우겨넣는 대신
     아래 메뉴처럼 아이콘으로 알아보게 한다. 별을 아이콘 줄 안으로 들여(absolute 해제) 메뉴
     아이콘과 같은 크기(22px)·같은 칸(72px)에 놓는다. */
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-group[data-mg-fixed] .hanul-mg-name { display:none; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-group[data-mg-fixed] .hanul-mg-chev {
    position:static; width:72px; display:flex; align-items:center; justify-content:center; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-group[data-mg-fixed] .hanul-mg-chev .hanul-line-icon { width:22px; height:22px; }
  :root[data-design="calm"] .hanul-mg-count,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-mg-count { display:block; padding-right:22px; }
  :root[data-design="calm"] .hanul-menu-group .hanul-mg-line { margin:0 8px; }
  /* 별은 칸 오른쪽에 겹쳐 놓인다(위의 position:absolute). 그래서 줄이 별 아래로 지나가
     별 가운데를 가로질렀다. 다른 묶음은 오른쪽에 숫자가 있어 줄이 먼저 끝나는데
     '내가 쓰는 것' 은 숫자가 없어 끝까지 간다. 별 자리와 사이 여백만큼 줄을 끊는다.
     별 너비는 글자 크기를 따라가므로(보통 13px · 아주 크게 19px) rem 으로 잡는다. */
  :root[data-design="calm"] .hanul-menu-group[data-mg-fixed] .hanul-mg-line { margin-right:calc(.82rem + 12px); }
  :root[data-design="calm"] .hanul-menu-pick,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-pick { padding:9px 0; justify-content:flex-start; gap:0; }
  /* 테두리도 접힌 메뉴 안에 들어와야 clip-path에 오른쪽 점선이 잘리지 않는다. */
  :root[data-design="calm"] .hanul-menu-pick { width:223px; transition:width var(--calm-motion) cubic-bezier(.22,1,.36,1); }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-menu-pick { width:72px; }
  :root[data-design="calm"] .hanul-menu-pick>span:first-child { width:70px; flex:none; text-align:center; }
  :root[data-design="calm"] .hanul-pick-text,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-pick-text { display:block; }
  :root[data-design="calm"] .hanul-pick-text { transition:opacity 150ms; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-pick-text { opacity:0; visibility:hidden; }
  :root[data-design="calm"] .hanul-sidebar-user,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-sidebar-user { padding:12px 16px; }
  :root[data-design="calm"] .hanul-user-info,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-user-info { flex-direction:row; margin-bottom:8px; }
  :root[data-design="calm"] .hanul-user-avatar,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-user-avatar { width:40px; height:40px; min-width:40px; flex-shrink:0; }
  :root[data-design="calm"] .hanul-user-details,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-user-details { display:block; margin-left:12px; white-space:nowrap; }
  :root[data-design="calm"] .hanul-logout-btn,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-logout-btn { padding:8px 12px; text-align:left; }
  :root[data-design="calm"] .hanul-logout-btn span,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-logout-btn span { display:inline; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-user-details,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-logout-btn span { opacity:0; }
  :root[data-design="calm"] .hanul-prefs-toggle,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-prefs-toggle { display:flex; min-height:42px; white-space:nowrap; }
  /* 접으면 아이콘만 남는다. 톱니바퀴만 15.6px 로 작고 4px 왼쪽으로 치우쳐 있었다.
     위 메뉴 아이콘과 같은 크기(22px)·같은 칸(72px)으로 맞춘다. */
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-prefs-toggle { width:72px; margin-left:8px; justify-content:center; padding:8px 0; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-prefs-toggle .hanul-line-icon { width:22px; height:22px; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-prefs-label,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-prefs-sub,
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-prefs-chev { display:none; }
  :root[data-design="calm"] .hanul-sidebar.collapsed .hanul-prefs { max-height:0; opacity:0; pointer-events:none; }
  :root[data-design="calm"] .hanul-calm-backdrop { display:block; position:fixed; inset:0; z-index:9998; background:var(--scrim-20)!important; opacity:0; visibility:hidden; border:0!important; box-shadow:none!important; transition:opacity var(--calm-motion),visibility var(--calm-motion); }
  :root[data-design="calm"] body:not(.sidebar-collapsed) .hanul-calm-backdrop { opacity:1; visibility:visible; }
}

/* 글자를 '아주 크게' 로 하면 240px 사이드바에 '육성비육사 일보' · '내가 쓰는 것 고르기' 가
   안 들어가 오른쪽 글자가 잘렸다. 그 경우에만 메뉴를 32px 넓힌다.
   사이드바는 본문 위에 겹치므로 본문 여백(108px)은 그대로 둔다.
   접었을 때 보이는 폭(88px)도 그대로 두려고 clip-path 를 같이 맞춘다 (272 - 88 = 184).
   '크게' 까지는 넘치지 않아 건드리지 않는다. 폰은 서랍이 260px 라 원래 넉넉하다. */
@media(min-width:769px) {
  :root[data-design="calm"][data-fontsize="xlarge"] .hanul-sidebar,
  :root[data-design="calm"][data-fontsize="xlarge"] .hanul-sidebar.collapsed { width:272px; }
  :root[data-design="calm"][data-fontsize="xlarge"] .hanul-sidebar.collapsed { clip-path:inset(0 184px 0 0); }
  :root[data-design="calm"][data-fontsize="xlarge"] .hanul-menu-item,
  :root[data-design="calm"][data-fontsize="xlarge"] .hanul-sidebar.collapsed .hanul-menu-item { width:255px; }
  :root[data-design="calm"][data-fontsize="xlarge"] .hanul-menu-pick { width:255px; }
}
@media(prefers-reduced-motion:reduce) {
  :root[data-design="calm"] .hanul-sidebar,
  :root[data-design="calm"] .hanul-sidebar *,
  :root[data-design="calm"] .hanul-calm-backdrop { transition:none!important; }
}
@media print {
  :root[data-design="calm"] .hanul-sidebar,
  :root[data-design="calm"] .hanul-calm-backdrop { display:none!important; }
  :root[data-design="calm"] body { padding-left:0!important; }
}

@keyframes hanulDotPulse { 50% { opacity:.3; } }
@media (prefers-reduced-motion: reduce) { :root[data-design="calm"] .sync-status .sync-dot { animation:none!important; } }

/* 분만사 카드 네 단계 (마지막 새끼 뒤 간격, farrowing-stalls.js stageOf).
   정상 그대로 · 주의(경고 기준의 70%, 21분) 노랑 테두리, 안 깜빡임 · 경고(30분) 주황 깜빡임 · 늦음(60분) 빨강 깜빡임.
   카드 모양·높이는 그대로 두고, 위 테두리 선에 걸친 이름표만 얹는다. 색은 테마 변수만. */
:root .fscard.caution { --fsst:var(--warn); --fsst-ink:var(--t-amber, var(--warn)); position:relative; border-color:var(--warn); }
:root .fscard.caution .since { color:var(--t-amber, var(--warn)); }
:root .fscard.warn { --fsst:var(--t-orange); --fsst-ink:var(--t-orange); position:relative; border-color:var(--t-orange);
    background:color-mix(in srgb, var(--t-orange) 10%, transparent); }
:root .fscard.warn .clock, :root .fscard.warn .since { color:var(--t-orange); }
:root .fscard.danger { --fsst:var(--t-red); --fsst-ink:var(--t-red); position:relative; }
.fscard .fsgap { position:absolute; top:0; right:12px; z-index:1; transform:translateY(-50%); display:inline-flex; align-items:center; gap:4px;
    min-height:20px; padding:2px 8px 2px 6px; border-radius:99px; border:1.5px solid var(--fsst); background:var(--surface-solid, var(--surface));
    color:var(--fsst-ink); font-size:.72rem; font-weight:800; line-height:1.1; white-space:nowrap; letter-spacing:-.2px; pointer-events:none; }
.fscard .fsgap svg { width:1.15em; height:1.15em; stroke-width:2.4; flex:none; }
.fscard .fsgap b { font-weight:900; font-variant-numeric:tabular-nums; }
.fscard.danger .fsgap { background:var(--t-red); color:var(--surface-solid, var(--bg)); }
/* 단계가 바뀌는 순간 한 번만: 이름표가 톡 나오고 테두리가 한 번 퍼진다. 깜빡임은 그대로 이어진다 */
@keyframes fsgapIn { 0% { transform:translateY(-50%) scale(.3); opacity:0; } 60% { transform:translateY(-50%) scale(1.18); opacity:1; } 100% { transform:translateY(-50%) scale(1); } }
@keyframes fsedge { 0% { outline:3px solid var(--fsst); outline-offset:0; } 100% { outline:3px solid transparent; outline-offset:8px; } }
.fscard .fsgap.pop { animation:fsgapIn .3s cubic-bezier(.2,.7,.3,1.3); transform-origin:right center; }
:root .fscard.fsstep { animation:fsedge .6s ease-out; }
:root .fscard.fsstep.fsblink { animation:fsedge .6s ease-out, fsblink 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { :root .fscard.fsstep, :root .fscard.fsstep.fsblink, .fscard .fsgap.pop { animation:none; } }