/* 냉장고 적정온도 점검기 — 냉장고 그림(문 두 짝 = 입력칸)과 칸별 세로 온도계. 판정 띠·칩은 밝은 고정색 + 어두운 고정 글자(--rtc-t)라 라이트·다크 모두 대비를 지키고,
   온도계 띠는 무늬(주의 빗금·위험 촘촘한 빗금·해동 점·너무 차가움 가로줄)로 색이 아닌 구분도 준다. 툴 폭 720px 이상이면 냉장고가 왼쪽, 아래는 판정 → 냉장고 → 할 일. */
.rtc-work{container:rtc / inline-size;--rtc-t:#1f1a14;--rtc-cold:#cfe3f5;--rtc-ok:#bfe3c9;--rtc-warn:#f3dba0;--rtc-thaw:#ddd0f2;--rtc-danger:#f2b5aa;--rtc-empty:#e4dccb;--rtc-merc:#c8361f}
.rtc-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.rtc-units button{min-width:44px;font-size:14px}
.rtc-grid{display:grid;grid-template-areas:"head" "fridge" "todo"}
.rtc-head{grid-area:head;padding:16px 18px}
.rtc-fridge{grid-area:fridge;margin:0;padding:16px 18px}
.rtc-todo{grid-area:todo;padding:16px 18px;border-top:1px solid var(--soft)}
@container rtc (min-width:720px){ /* 냉장고 열이 360px 아래로 좁아지면 칩이 두 줄로 넘어가므로 그보다 좁은 툴 폭은 한 열 */
  .rtc-grid{grid-template-columns:minmax(330px,1fr) minmax(0,1.08fr);grid-template-areas:"fridge head" "fridge todo";grid-template-rows:auto 1fr}
  .rtc-fridge{border-right:1px solid var(--soft)}
  .rtc-todo{border-top:0}
}

/* 판정 머리 */
.rtc-head .v2-big{flex-wrap:wrap;align-items:center;margin-top:6px}
.rtc-head .v2-big[data-lv]::before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1px solid rgba(31,26,20,.35);background:var(--rtc-x,var(--rtc-empty))}
.rtc-head .v2-big small{font-family:var(--sans);font-size:15px;font-weight:650}
.rtc-head .v2-big.is-empty{margin-top:8px}
[data-lv="cold"]{--rtc-x:var(--rtc-cold)} [data-lv="ok"]{--rtc-x:var(--rtc-ok)} [data-lv="warn"]{--rtc-x:var(--rtc-warn)}
[data-lv="thaw"]{--rtc-x:var(--rtc-thaw)} [data-lv="danger"]{--rtc-x:var(--rtc-danger)} [data-lv="empty"]{--rtc-x:var(--rtc-empty)}

/* 냉장고 */
.rtc-body,.rtc-feet,.rtc-time{max-width:520px;margin-inline:auto} /* 한 열 배치에서 냉장고가 툴 폭 전체로 늘어나지 않게 */
.rtc-body{display:grid;gap:6px;padding:6px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper)}
.rtc-door{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 66px;gap:10px;padding:12px 10px 12px 18px;border:1px solid var(--soft);border-radius:8px;background:var(--card)}
.rtc-door::before{content:"";position:absolute;left:6px;top:24%;bottom:24%;width:4px;border-radius:2px;background:var(--soft)} /* 손잡이 */
.rtc-door--z{background:color-mix(in srgb,var(--wash) 70%,var(--card))}
.rtc-door-in{display:flex;flex-direction:column;gap:8px;min-width:0}
.rtc-door .v2-f > label{margin:0}
.rtc-door .v2-input{margin-top:5px}
.rtc-chips button{height:28px;padding:0 9px;font-variant-numeric:tabular-nums lining-nums}
.rtc-state{margin:0}
.rtc-chip{display:inline-block;padding:2px 9px;border-radius:var(--radius);background:var(--rtc-x,var(--rtc-empty));font-family:var(--sans);font-size:12.5px;font-weight:750;line-height:1.5;color:var(--rtc-t);transition:background-color .25s ease}
.rtc-feet{display:flex;justify-content:space-between;height:7px;padding:0 16%}
.rtc-feet i{width:24px;height:7px;border-radius:0 0 3px 3px;background:var(--line)}

/* 세로 온도계 */
.rtc-th{position:relative;min-height:150px}
.rtc-tube{position:absolute;left:8px;top:6px;bottom:22px;width:14px;overflow:hidden;border:1px solid var(--line);border-bottom:0;border-radius:7px 7px 0 0;background:var(--paper)}
.rtc-band{position:absolute;left:0;right:0}
.rtc-band[data-b="cold"]{background:var(--rtc-cold) repeating-linear-gradient(0deg,rgba(31,26,20,.13) 0 1px,transparent 1px 5px)}
.rtc-band[data-b="ok"]{background:var(--rtc-ok)}
.rtc-band[data-b="warn"]{background:var(--rtc-warn) repeating-linear-gradient(135deg,rgba(31,26,20,.15) 0 2px,transparent 2px 7px)}
.rtc-band[data-b="thaw"]{background:var(--rtc-thaw) radial-gradient(rgba(31,26,20,.25) 1px,transparent 1.4px) 0 0/6px 6px}
.rtc-band[data-b="danger"]{background:var(--rtc-danger) repeating-linear-gradient(135deg,rgba(31,26,20,.24) 0 2px,transparent 2px 5px)}
.rtc-merc{position:absolute;left:50%;bottom:0;width:4px;height:0;margin-left:-2px;border-radius:2px 2px 0 0;background:var(--rtc-merc);transition:height .7s cubic-bezier(.22,1,.36,1)}
.rtc-bulb{position:absolute;left:3px;bottom:0;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;background:var(--rtc-merc)}
.rtc-ticks{position:absolute;left:24px;right:0;top:6px;bottom:22px}
.rtc-ticks span{position:absolute;left:0;transform:translateY(50%);font-family:var(--mono);font-size:10.5px;font-weight:700;line-height:1;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.rtc-ticks span::before{content:"";display:inline-block;width:5px;height:1px;margin-right:3px;vertical-align:middle;background:var(--line)}
.rtc-th-u{position:absolute;left:32px;bottom:3px;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}

/* 벗어난 시간 */
.rtc-time{margin-top:14px;margin-inline:auto}
.rtc-time .v2-seg{margin-top:8px}
.rtc-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 할 일 */
.rtc-todo-g{margin-top:12px}
.rtc-todo-z{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-family:var(--sans);font-size:13.5px}
.rtc-todo ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.65}
.rtc-todo li + li{margin-top:2px}
.rtc-rows{margin-top:16px}
.rtc-rows li span{flex:0 0 auto;white-space:nowrap}
.rtc-rows li b{min-width:0;white-space:normal;text-align:right}
@container rtc (max-width:479px){ .rtc-rows li{flex-direction:column;align-items:flex-start;gap:2px} .rtc-rows li b{text-align:left} }
.rtc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}

/* 정전·고장 뒤 식품 */
.rtc-food{padding:16px 18px;border-top:1px solid var(--soft)}
.rtc-food[data-on="1"]{box-shadow:inset 3px 0 0 var(--accent)}
.rtc-food-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rtc-flag{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--muted)}
.rtc-food[data-on="1"] .rtc-flag{color:var(--accent)}
.rtc-food-tabs{margin-left:auto}
.rtc-food-cols{display:grid;gap:10px;margin-top:10px}
@container rtc (min-width:520px){ .rtc-food-cols{grid-template-columns:1fr 1fr} }
.rtc-food-col{padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.rtc-food-t{display:flex;align-items:center;gap:6px;margin:0;font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink)}
.rtc-food-t i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-style:normal;font-size:11px;font-weight:800;color:var(--rtc-t)}
.rtc-food-col--out .rtc-food-t i{background:var(--rtc-danger)}
.rtc-food-col--keep .rtc-food-t i{background:var(--rtc-ok)}
.rtc-food-col ul{margin:6px 0 0;padding:0;list-style:none}
.rtc-food-col li{padding:5px 0;border-top:1px solid var(--soft);font-size:13px;line-height:1.5}
.rtc-food-src{margin-top:10px}

@media (prefers-reduced-motion:reduce){ .rtc-merc,.rtc-chip{transition:none} }