:root{--ink:#172B4D;--mute:#626F86;--grid:#DFE1E6;--blue:#0C66E4;--pale:#C1D7F7;
        --red:#D92D20;--amber:#B25E02;--green:#1F845A;--line:#D5D9E0}
  *{box-sizing:border-box}
  body{margin:0;background:#F4F5F7;color:var(--ink);
       font:14px/1.5 NanumBarunGothic,-apple-system,"Segoe UI",Roboto,sans-serif}
  .wrap{width:1420px;margin:0 auto}
  h1{font-size:22px;margin:0 0 4px}
  .sub{color:var(--mute);margin:0 0 18px}
  .card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .bar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#FAFBFC;
       border-bottom:1px solid var(--line)}
  .jql{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink)}
  .note{color:var(--mute);font-size:12px}
  .spacer{flex:1}
  .badge{background:#DCFFF1;border:1px solid var(--green);color:var(--green);
         border-radius:14px;padding:3px 14px;font-size:12px;font-weight:700}
  /* 읽기 전용이라는 사실을 커서로도 말한다 — 끌 수 있는 것처럼 보이지 않게 */
  #c{display:block;cursor:default}
  .pop{position:fixed;pointer-events:none;opacity:0;transform:translateY(4px);
       transition:opacity .12s ease,transform .12s ease;background:#fff;
       border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px rgba(9,30,66,.16);
       padding:10px 12px;max-width:330px;font-size:13px;z-index:9}
  .pop.on{opacity:1;transform:translateY(0)}
  .pop b{display:block;margin-bottom:4px}
  .pop .k{color:var(--mute);font-family:ui-monospace,Menlo,monospace;font-size:11px}
  .pop .row{display:flex;justify-content:space-between;gap:16px;margin-top:3px}
  .pop .note{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);
             color:var(--mute);font-size:12px}
  .ro{color:var(--green);font-weight:700}

/* display 를 지정한 요소는 브라우저 기본 [hidden]{display:none} 을 덮어쓴다.
   .seg{display:inline-flex} 와 .bar{display:flex} 때문에 숨겨야 할 것이 보였다. */
[hidden]{display:none !important}

/* 눈금 단위 전환 — 셋 중 하나만 켜진다 */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:0;background:#fff;color:var(--mute);font:600 12px/1 inherit;padding:6px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--blue);color:#fff}

/* 시간 막대 조작부 */
.bar.time{gap:14px;background:#fff}
/* `오늘` 버튼은 **할 일이 있을 때만 할 일처럼 보인다.**
   오늘에 서 있으면 누를 이유가 없으므로 꺼 두고 작게, 되감겨 있으면 켜고 조금 크게. */
#today{transition:padding .12s ease,font-size .12s ease,background .12s ease,color .12s ease}
#today[disabled]{font-size:11px;padding:3px 9px;opacity:.5;cursor:default;
  background:#fff;color:var(--mute);border-color:var(--line)}
#today:not([disabled]){font-size:12.5px;padding:7px 15px;
  background:#E9F2FE;border-color:#8FB8F0;color:var(--blue)}
#today:not([disabled]):hover{background:#DCEAFD;border-color:var(--blue);color:var(--blue)}
.bar.time input[type=range]{flex:0 0 360px;accent-color:var(--blue)}
.asof{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink);min-width:88px}
.chk{font-size:12px;color:var(--mute);display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.bar select{font:12px/1 inherit;color:var(--ink);border:1px solid var(--line);
  border-radius:5px;padding:5px 6px;background:#fff;cursor:pointer}
/* 되감은 화면이라는 사실은 숨기지 않는다 */
.warn{font-size:11.5px;color:var(--amber)}

/* 전체 접기/펴기. 모드 토글 옆에 붙는 작은 글자 버튼 — 눌리는 것임이 보이되 튀지 않게. */
.mini{border:1px solid var(--line);background:#fff;color:var(--mute);
      font:600 12px/1 inherit;padding:6px 12px;border-radius:6px;cursor:pointer;margin-right:8px}
.mini:hover{color:var(--ink);border-color:#B3BAC5}
/* 기호 버튼. 글자 폭에 끌려다니지 않게 정사각으로 고정한다 — 접기/펴기로 바뀌어도 자리가 안 흔들린다. */
.mini.sym{font:400 15px/1 inherit;padding:0;width:26px;height:26px;display:inline-flex;
          align-items:center;justify-content:center;margin-right:10px}

/* 인쇄 설정 모달. 종이에 무엇을 담을지 **먼저 고르고 눈으로 확인한 뒤** 인쇄한다. */
/* 🔴 이 앱은 **iframe 안에서 돈다.** 그래서 `vh` 는 브라우저 창이 아니라 **iframe 높이**다.
   Forge 는 내용 높이만큼 iframe 을 늘리므로(행이 많으면 2000px 도 된다) `max-height:92vh` 는
   사실상 상한이 없는 것과 같았고, 미리보기가 길어지면 **인쇄 버튼이 iframe 바닥 밖으로 밀려
   아무리 스크롤해도 닿지 않았다.** 그래서 px 상한을 같이 건다 — 창이 작으면 vh 가, 크면 px 가 이긴다.
   세로 가운데가 아니라 **위에 붙인다**: 버튼을 머리줄에서 눌렀으니 사람의 눈은 거기에 있다. */
.modal{position:fixed;inset:0;background:rgba(9,30,66,.48);display:flex;
       align-items:flex-start;justify-content:center;z-index:20;padding:32px 12px}
.modal[hidden]{display:none}
.sheet{background:#fff;border-radius:10px;width:min(1080px,94vw);max-height:min(86vh,620px);
       display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(9,30,66,.3)}
.sheetbar{display:flex;align-items:center;justify-content:space-between;
          padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px}
.sheetbar,.sheetfoot{flex:0 0 auto}
.sheetbody{padding:14px 18px;overflow:auto;flex:1 1 auto;min-height:0}
.sheetfoot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.opts{display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:12.5px;color:var(--mute)}
.opts label{display:inline-flex;align-items:center;gap:7px}
.opts select,.opts input[type=date],.opts input[type=text]{font:12.5px/1 inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:5px;padding:5px 7px;background:#fff}
.opts label.wide{flex:1 1 320px}
.opts label.wide input{flex:1 1 auto;min-width:200px}
.opts .dash{color:var(--mute)}
.opts .pages{margin-left:auto;color:var(--ink);font-weight:700}
.opts .wk{font-family:ui-monospace,Menlo,monospace;color:var(--ink);min-width:74px}
/* 주 단위 구간 — range 두 개를 겹쳐 놓고 **엄지만** 누르게 한다.
   트랙에 pointer-events 를 남겨 두면 위에 있는 쪽이 아래 엄지를 가려 집히지 않는다. */
.range{position:relative;display:inline-block;width:220px;height:20px}
.range .track,.range .fill{position:absolute;top:8px;height:4px;border-radius:2px}
.range .track{left:0;right:0;background:var(--line)}
.range .fill{background:var(--blue)}
.range input[type=range]{position:absolute;left:0;top:0;width:100%;height:20px;margin:0;
  background:none;border:0;padding:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.range input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--blue);cursor:pointer}
.range input[type=range]::-moz-range-thumb{pointer-events:auto;
  width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--blue);cursor:pointer}
.mini.go{background:var(--blue);border-color:var(--blue);color:#fff}
.mini.go:hover{color:#fff;border-color:var(--blue)}
/* 미리보기 — 인쇄에 쓸 바로 그 장을 줄여서 보인다 */
.preview{margin-top:14px;display:flex;flex-direction:column;gap:12px;align-items:center}
.preview .printpage{border:1px solid var(--line);box-shadow:0 2px 8px rgba(9,30,66,.1);
  padding:10px;background:#fff;width:100%}
.preview img{width:100%;height:auto;display:block}
.printhead{margin:0 0 8px}
.printhead .t{display:block;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.printhead .m{display:block;font-size:10.5px;color:var(--mute);margin-top:2px}
#printarea{display:none}

/* 인쇄. **조작부는 종이에서 아무 일도 못 한다** — 버튼·슬라이더·체크박스는 지우고,
   무엇을 보고 있는지 말하는 글자(JQL·건수·시점)만 남긴다.
   그림은 캔버스 한 장이라 그대로 폭에 맞춰 늘린다. 가로로 놓아야 주차 축이 안 뭉친다. */
@page{size:landscape;margin:10mm}
@media print{
  body{background:#fff}
  /* 화면용 카드·모달은 종이에 나가지 않는다. 나가는 것은 우리가 만든 장들뿐이다. */
  .wrap,.pop,.modal{display:none !important}
  #printarea{display:block}
  /* 한 장은 정확히 한 쪽이다. 넘치면 빈 쪽이 끼어든다. */
  .printpage{page-break-after:always;break-after:page;overflow:hidden}
  /* 요약만 있는 장은 가운데로. 한구석에 붙어 있으면 같은 크기도 더 커 보인다. */
  .printpage[data-kind=panel]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
  .printpage[data-kind=panel] .printhead{align-self:flex-start}
  .printpage:last-child{page-break-after:auto;break-after:auto}
  /* 폭은 장을 만들 때 mm 로 박아 둔다 — 여기서 100% 로 덮으면 창 폭을 따라간다 */
  .printpage canvas{display:block}
}