/* 데스크톱 화면 — 1440 × 620 (매장 웹 D1 · 인포데스크 상주)
 *
 * 84화면 중 60개가 데스크톱을 갖는다. 폰 셸에 밀어 넣으면 캔버스가 스스로
 * "모바일에서 뺀 것"이라 적어 둔 것들(레인 뷰 · 드래그 재배치 · 주간 뷰)이 사라진다.
 *
 * 캔버스는 뷰포트 분기를 이미 갖고 있다 — .d-only / .m-only / .dsk.
 * 격자 캘린더의 좌표도 마크업에 있다: .bk style="--c:2;--r:2;--s:2" (컬럼 · 행 · 걸침).
 */

.wide {
  --row: 34px;                 /* 격자 한 칸 = 30분 */
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--sheet, #fbfaf7);
  color: var(--ink, #17191a);
  font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  font-feature-settings: "tnum";
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(23,25,26,.07);
}
body:has(.wide) { margin: 0; background: #e9e7e2; }
.wide *, .wide *::before, .wide *::after { box-sizing: border-box; }

/* 폰 프레임 대신 창 셸 안에 들어갈 때 */
.wide--framed { max-width: none; width: 100%; height: 100%; min-height: 0; box-shadow: none; }

/* 뷰포트 분기 — 모바일과 정반대다 */
.wide .m-only { display: none; }
.wide .d-only, .wide .dsk { display: revert; }

.wide .plan { flex: 1; overflow: auto; }
.wide .canvas { padding-bottom: 2rem; }

/* ── 머리 ─────────────────────────────────────── */

.wide .offline { display: flex; gap: .4rem; padding: .45rem 1.1rem; background: #212a2b;
              color: #cfdad9; font-size: .76rem; }
.wide .offline b { color: #fff; font-weight: 600; }

.wide .bar { display: flex; align-items: center; gap: .8rem; padding: .55rem 1.1rem;
          background: #fff; border-bottom: 1px solid var(--grid, #e6e2da); }
.wide .bar .nav { font-size: 1rem; font-weight: 700; letter-spacing: -.03em; }
.wide .bar .right { display: flex; gap: .3rem; align-items: center; margin-left: auto; }
.wide .param { font-size: .7rem; color: var(--ink-3, #9aa0a1); }
.wide .param em { font-style: normal; font-weight: 600; color: var(--ink-2, #5f6567); }

.wide .btn { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .65rem;
          border: 1px solid var(--grid, #e6e2da); background: #fff; border-radius: 3px;
          font-size: .74rem; color: var(--ink-2, #5f6567); white-space: nowrap; }
.wide .btn.pri { background: var(--live, #0f5f56); border-color: var(--live, #0f5f56);
              color: #fff; font-weight: 600; }

.wide .sum { display: flex; gap: 1.6rem; padding: .5rem 1.1rem; background: #fff;
          border-bottom: 1px solid var(--grid, #e6e2da); }
.wide .sum > div { display: flex; align-items: baseline; gap: .3rem; font-size: .72rem;
                color: var(--ink-3, #9aa0a1); }
.wide .sum b { font-size: 1rem; font-weight: 700; color: var(--ink, #17191a); letter-spacing: -.03em; }
.wide .sum .warn b { color: var(--alert, #a8382a); }

.wide .chf { display: flex; gap: .3rem; padding: .5rem 1.1rem; background: #fff;
          border-bottom: 1px solid var(--grid, #e6e2da); }
.wide .chf i { height: 26px; display: inline-flex; align-items: center; padding: 0 .6rem;
            border: 1px solid var(--grid, #e6e2da); border-radius: 999px;
            font-style: normal; font-size: .72rem; color: var(--ink-2, #5f6567); }
.wide .chf i.on { background: var(--ink, #17191a); border-color: var(--ink, #17191a);
               color: #fff; font-weight: 600; }

/* ── 격자 캘린더 — 좌표가 마크업에 있다 ──────────── */

.wide .cal { display: grid; grid-template-columns: 56px repeat(4, minmax(0, 1fr));
          grid-auto-rows: var(--row); margin: 0 1.1rem 1rem; background: #fff;
          border: 1px solid var(--grid, #e6e2da); border-top: 0; }
.wide .cal > [style*="--c"] { grid-column: var(--c); }
.wide .trk, .wide .bk { grid-row: var(--r) / span var(--s); }
.wide .tl { grid-row: var(--r); }  /* 시각 축도 좌표를 갖는다 */
.wide .hd { grid-row: 1; display: flex; align-items: center; justify-content: center;
         font-size: .72rem; font-weight: 600; color: var(--ink-2, #5f6567);
         border-bottom: 1px solid var(--grid, #e6e2da);
         border-left: 1px solid var(--grid-2, #efece5); background: #fbfaf7; }
.wide .tl { grid-column: 1; font-size: .66rem; color: var(--ink-3, #9aa0a1);
         padding: .1rem .5rem 0; text-align: right; border-top: 1px solid var(--grid-2, #efece5); }
.wide .trk { border-left: 1px solid var(--grid-2, #efece5);
          background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px),
                      var(--grid-2, #efece5) calc(var(--row) - 1px) var(--row)); }

.wide .bk { margin: 1px; padding: .2rem .35rem; overflow: hidden; font-size: .7rem;
         background: var(--set-f, #e6edf5); border-left: 2px solid var(--set, #6f8fb5); }
.wide .bk b { display: block; font-size: .76rem; font-weight: 700; letter-spacing: -.02em; }
.wide .bk .sub { display: block; font-size: .66rem; color: var(--ink-2, #5f6567); }
.wide .bk .st { float: right; font-size: .6rem; font-weight: 700; color: var(--ink-3, #9aa0a1); }
.wide .bk .ch { font-size: .6rem; color: var(--ink-3, #9aa0a1); }
.wide .bk .rk { font-size: .6rem; font-weight: 700; color: var(--alert, #a8382a); }
.wide .bk.doing { background: var(--live, #0f5f56); border-left-color: #06382f; color: #fff; }
.wide .bk.doing .sub, .wide .bk.doing .ch { color: #b9dcd5; }
.wide .bk.idle { background: repeating-linear-gradient(-45deg, #edf0ef 0 4px, transparent 4px 9px);
              border-left-color: var(--grid, #e6e2da); }
.wide .bk.hold { background: var(--wait-pay-f, #f7efd9); border-left-color: var(--wait-pay, #b8860b); }
.wide .bk.req { background: #f6f5f1; border-left-color: var(--ask, #a8adae); }

/* ── 패널 · 폼 · 표 ─────────────────────────────── */

.wide .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
           padding: .8rem 1.1rem; }
.wide .grid .w2 { grid-column: span 2; }
.wide .grid .w4 { grid-column: span 4; }
.wide .card { background: #fff; border: 1px solid var(--grid, #e6e2da); padding: .6rem .75rem; }
.wide .card h5 { display: flex; gap: .4rem; align-items: baseline; margin: 0 0 .45rem;
              font-size: .8rem; font-weight: 700; letter-spacing: -.02em; }
.wide .card h5 span { margin-left: auto; font-size: .62rem; font-weight: 500;
                   color: var(--ink-3, #9aa0a1); }
.wide .card.warn { border-color: #e6c9bf; background: #fdf6f4; }
.wide .card.act { border-color: #c9ded8; background: #f4faf8; }

.wide .todo { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .05rem .5rem;
           padding: .35rem 0; border-top: 1px solid var(--grid-2, #efece5); font-size: .74rem; }
.wide .todo:first-of-type { border-top: 0; }
.wide .todo .n { grid-column: 1; grid-row: 1; font-weight: 600; }
.wide .todo.warn .n { color: var(--alert, #a8382a); }
.wide .todo > span:not(.n):not(.go) { grid-column: 1; font-size: .68rem; color: var(--ink-2, #5f6567); }
.wide .todo .go, .wide .todo > a.xref { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .66rem; }

.wide .bars { display: grid; gap: .22rem; margin: .35rem 0; }
.wide .bars > div { display: grid; grid-template-columns: 3.4rem minmax(0,1fr) auto;
                 align-items: center; gap: .45rem; font-size: .7rem; color: var(--ink-2, #5f6567); }
.wide .bars i { display: block; height: 6px; min-width: 3px; border-radius: 3px; background: var(--live, #0f5f56); }
.wide .bars i.lo { background: #b9d5cf; }
.wide .bars b { font-size: .74rem; font-weight: 700; color: var(--ink, #17191a); }

.wide .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 0 2rem; padding: .8rem 1.1rem; background: #fff; }
.wide .fr { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem;
         align-items: start; padding: .45rem 0; border-bottom: 1px solid var(--grid-2, #efece5); }
.wide .fr > label { font-size: .74rem; font-weight: 600; color: var(--ink-2, #5f6567); padding-top: .35rem; }
.wide .fv { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.wide .fld { flex: 1; min-width: 5rem; min-height: 30px; display: flex; align-items: center;
          padding: 0 .55rem; border: 1px solid #d8d3c8; background: #fff; font-size: .78rem; }
.wide .fld.sel { border-color: var(--live, #0f5f56); box-shadow: inset 0 0 0 1px var(--live, #0f5f56); }
.wide .fhint { display: block; font-size: .66rem; color: var(--ink-3, #9aa0a1); margin-top: .15rem; }
.wide .radio { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.wide .radio i { min-height: 28px; display: inline-flex; align-items: center; padding: 0 .6rem;
              border: 1px solid var(--grid, #e6e2da); background: #fff; font-style: normal;
              font-size: .74rem; color: var(--ink-2, #5f6567); }
.wide .radio i.on { background: var(--live, #0f5f56); border-color: var(--live, #0f5f56);
                 color: #fff; font-weight: 600; }
.wide label .req { color: var(--alert, #a8382a); }

.wide .tbl { width: calc(100% - 2.2rem); margin: .8rem 1.1rem; border-collapse: collapse;
          font-size: .74rem; background: #fff; border: 1px solid var(--grid, #e6e2da); }
.wide .tbl th { text-align: left; font-size: .66rem; font-weight: 600; color: var(--ink-3, #9aa0a1);
             padding: .4rem .6rem; border-bottom: 1px solid var(--grid, #e6e2da); background: #fbfaf7; }
.wide .tbl td { padding: .4rem .6rem; border-bottom: 1px solid var(--grid-2, #efece5); }
.wide .tbl tr:hover td { background: #fbfaf7; }

.wide .warnbox { margin: .8rem 1.1rem; padding: .55rem .8rem; background: #fdf6f4;
              border-left: 3px solid var(--alert, #a8382a); font-size: .74rem;
              line-height: 1.6; color: #6d4038; }
.wide .foot, .wide .cut { margin: .8rem 1.1rem; padding: .5rem .8rem; background: #f4f2ee;
                    font-size: .7rem; color: var(--ink-2, #5f6567); line-height: 1.6; }
.wide .big { font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; }
.wide .dt, .wide .sub, .wide .eq, .wide .calc { font-size: .68rem; color: var(--ink-3, #9aa0a1); line-height: 1.55; }
.wide .warn { color: var(--alert, #a8382a); }
.wide .bad { color: var(--alert, #a8382a); font-weight: 600; }
.wide .amt, .wide .nm, .wide .num { font-weight: 700; letter-spacing: -.02em; }
.wide .empty { display: none; }
/* 공백·빈 상태는 모바일 리스트용이다 — 좌표가 없어 격자 밖으로 샌다.
   데스크톱에서는 빈 칸이 이미 공백을 말하므로 숨긴다 */
.wide .cal > .gap { display: none; }

.wide .xref, .wide .go, .wide .k { color: var(--live, #0f5f56); font-weight: 600;
                          text-decoration: none; white-space: nowrap; }
.wide .xref { border-bottom: 1px solid rgba(15,95,86,.3); }
.wide .fbar { position: sticky; bottom: 0; display: flex; gap: .35rem; justify-content: flex-end;
           padding: .55rem 1.1rem; background: #fff; border-top: 1px solid var(--grid, #e6e2da); }