/*
 * HY 자금관리 웹 · 스타일
 *
 * index.html 의 <style> 에서 옮겨 왔다. 옮긴 이유는 '보기 설정' 때문이다.
 *
 * ── 글자 크기를 키울 수 있게 하려면 px 를 쓸 수 없다 ──────────────────
 * 사용자가 글자 크기를 고를 수 있어야 한다(노안·저시력). 브라우저 확대는
 * 매번 다시 해야 하고 화면마다 기억되지 않아서 실제로는 안 쓰게 된다.
 *
 * 그래서 크기 단위를 전부 rem 으로 바꿨다. html 의 font-size 하나만 바꾸면
 * 화면 전체가 같은 비율로 커진다. px 로 적힌 값은 아무리 배율을 올려도
 * 그 자리만 안 커져서 레이아웃이 어긋나므로, 여기서는 px 를 쓰지 않는다.
 * (예외: 테두리 1px 과 심각도 띠 같은 '선'. 선은 굵어질 이유가 없다.)
 *
 * 기준은 16px = 1rem 이다. 예전 값 13.5px -> 0.844rem.
 *
 * ── 보기 설정 축 4개 ────────────────────────────────────────────────
 *   html[data-scale]     1 100% / 2 113% / 3 125% / 4 144%
 *   html[data-density]   normal | comfy   (줄 간격·여백)
 *   html[data-contrast]  normal | high    (색 대비·테두리·초점 표시)
 *   html[data-numbold]   off | on         (숫자 굵게)
 *   html[data-theme]     (없음)=OS 따름 | light | dark
 *
 * DevExtreme 위젯도 같이 커져야 한다. DevExtreme 22.2 CSS 는 px 로 적혀
 * 있으므로 여기서 덮는다. 값은 em 으로 적어서 상위 글자 크기에 따라
 * 자동으로 따라오게 한다 - 배율마다 규칙을 새로 쓰지 않아도 된다.
 */

/* ==================================================================
   1. 색 토큰
   ------------------------------------------------------------------
   ★ 색은 반드시 여기(:root)에서 한 번 정의한다. 미디어쿼리나
     [data-theme] 안에서만 정의하면 그 조건이 아닐 때 값이 없어진다.
     아래 블록들은 '토큰 값만' 다시 쓴다.
   ================================================================== */
:root{
  --bg:#f4f6f8; --panel:#fff; --ink:#1b1f24; --soft:#5b636e; --rule:#dfe3e8; --accent:#0e7490;
  --err:#c0392b;

  /* 상태색은 강조색(--accent)과 별개다. 강조색은 조작을, 상태색은 심각도를 뜻한다. */
  --ok:#186b4a;   --ok-bg:#e6f3ec;   --ok-line:#a9d3be;
  --warn:#8a5a00; --warn-bg:#fbf3e0; --warn-line:#e0c68a;
  --bad:#9b2c2c;  --bad-bg:#fbeded;  --bad-line:#e0afaf;
  --idle:#5b636e; --idle-bg:#eef0f3; --idle-line:#d8dde3;

  /* --pad / --focus / --numw 는 css/a11y.css 가 정의한다(로그인 화면과 공유). */
}

/* OS 가 어두운 테마일 때. 사용자가 '밝게'를 고르면(data-theme=light) 적용하지 않는다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171b; --panel:#1d2025; --ink:#e7eaee; --soft:#98a1ad; --rule:#2c3138; --accent:#5ab2ce;
    --err:#ef8b7d;
    --ok:#66c08f;   --ok-bg:#11241a;   --ok-line:#274a36;
    --warn:#dfae3d; --warn-bg:#241d0e; --warn-line:#4a3c18;
    --bad:#e88b8b;  --bad-bg:#2a1616;  --bad-line:#4e2a2a;
    --idle:#98a1ad; --idle-bg:#1e2226; --idle-line:#2f353b;
  }
}

/* 사용자가 '어둡게'를 골랐을 때. OS 가 밝아도 이긴다. */
:root[data-theme="dark"]{
  --bg:#15171b; --panel:#1d2025; --ink:#e7eaee; --soft:#98a1ad; --rule:#2c3138; --accent:#5ab2ce;
  --err:#ef8b7d;
  --ok:#66c08f;   --ok-bg:#11241a;   --ok-line:#274a36;
  --warn:#dfae3d; --warn-bg:#241d0e; --warn-line:#4a3c18;
  --bad:#e88b8b;  --bad-bg:#2a1616;  --bad-line:#4e2a2a;
  --idle:#98a1ad; --idle-bg:#1e2226; --idle-line:#2f353b;
}

/*
 * 고대비.
 * 색약·노안 모두 '흐린 회색 글자'가 가장 안 읽힌다. --soft 를 본문색에 가깝게
 * 끌어올리고, 테두리를 진하게 하고, 초점 테두리를 굵게 한다.
 * 상태색도 배경을 더 확실히 깔아 색 하나에 의존하지 않게 한다.
 */
:root[data-contrast="high"]{
  --bg:#fff; --panel:#fff; --ink:#000; --soft:#3a4048; --rule:#767c85; --accent:#00566b;
  --err:#9b1c0d;
  --ok:#0d4f34;   --ok-bg:#d3ecdd;   --ok-line:#0d4f34;
  --warn:#5f3d00; --warn-bg:#f6e6bf; --warn-line:#5f3d00;
  --bad:#7a1010;  --bad-bg:#f6dada;  --bad-line:#7a1010;
  --idle:#3a4048; --idle-bg:#e4e7ea; --idle-line:#3a4048;
  --focus:3px;
}
@media (prefers-color-scheme: dark){
  :root[data-contrast="high"]:not([data-theme="light"]){
    --bg:#000; --panel:#0b0d10; --ink:#fff; --soft:#cfd5dd; --rule:#8b929b; --accent:#7fd4ee;
    --err:#ff9d8c;
    --ok:#8ce0ae;   --ok-bg:#06210f;   --ok-line:#8ce0ae;
    --warn:#ffcf5c; --warn-bg:#241a00; --warn-line:#ffcf5c;
    --bad:#ffa6a6;  --bad-bg:#2a0d0d;  --bad-line:#ffa6a6;
    --idle:#cfd5dd; --idle-bg:#15181c; --idle-line:#cfd5dd;
  }
}
:root[data-contrast="high"][data-theme="dark"]{
  --bg:#000; --panel:#0b0d10; --ink:#fff; --soft:#cfd5dd; --rule:#8b929b; --accent:#7fd4ee;
  --err:#ff9d8c;
  --ok:#8ce0ae;   --ok-bg:#06210f;   --ok-line:#8ce0ae;
  --warn:#ffcf5c; --warn-bg:#241a00; --warn-line:#ffcf5c;
  --bad:#ffa6a6;  --bad-bg:#2a0d0d;  --bad-line:#ffa6a6;
  --idle:#cfd5dd; --idle-bg:#15181c; --idle-line:#cfd5dd;
}

/* 2. 크기 배율 / 밀도 / 숫자 굵기 -> css/a11y.css (로그인 화면과 공유한다) */

/* ==================================================================
   3. 레이아웃
   ================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
/* 머리줄 + 본문 두 줄. 메뉴는 머리줄 안에 있다. */
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
     display:grid;grid-template-rows:auto 1fr;height:100vh;overflow:hidden}

/* 펼친 메뉴 판이 본문 위로 덮여야 한다. 머리줄이 쌓임 문맥을 만든다. */
header{display:flex;align-items:center;gap:1rem;padding:.625rem 1.125rem;background:var(--panel);
       border-bottom:1px solid var(--rule);flex-wrap:wrap;position:relative;z-index:30}
.brand{font-weight:700;font-size:.938rem;letter-spacing:-.01em;white-space:nowrap}
.badge{font-size:.688rem;padding:.125rem .438rem;border:1px solid var(--rule);border-radius:99px;color:var(--soft)}
header .grow{flex:1}
.who{font-size:.813rem;color:var(--soft);white-space:nowrap}
.linkbtn{font:inherit;font-size:.813rem;background:none;border:0;color:var(--accent);cursor:pointer;padding:.25rem}
.linkbtn:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:2px}
:root[data-contrast="high"] .linkbtn{text-decoration:underline}

/* .iconbtn 은 css/a11y.css 에 있다(설정 버튼과 같은 모양을 쓴다). */

main{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}

/* == 메뉴 (머리줄 안) ==================================================
   갈래 머리 단추를 누르면 그 아래로 판이 펼쳐진다. 판은 absolute 라
   본문을 밀지 않는다 - 밀면 메뉴를 열 때마다 표가 출렁인다.

   왼쪽 사이드바에서 옮겨 왔다. 표가 넓은 화면이 많아 가로 폭이 아까웠고,
   따로 한 줄을 쓰면 표를 볼 높이가 그만큼 줄었다.                       */
nav{display:flex;align-items:stretch;gap:.125rem;flex-wrap:wrap;min-width:0}
/* 언어 고르기. 폭을 여기서 정한다 - 위젯에 width 를 주면 인라인 style 이 되어
   좁은 화면용 규칙을 이긴다. 항목이 한국어·English 둘뿐이라 넓을 필요가 없다. */
#langpick{width:9rem;flex:none}

/* 현재 보고 있는 화면 이름. 갈래가 닫혀 있으면 이것뿐이라 늘 띄운다. */
.where{font-size:.813rem;color:var(--soft);white-space:nowrap;overflow:hidden;
       text-overflow:ellipsis;max-width:14rem}
.where:empty{display:none}

.mgroup{position:relative;display:flex}
nav .mtop{font:inherit;font-size:.844rem;font-weight:600;background:none;border:0;color:var(--ink);
          cursor:pointer;padding:calc(.375rem * var(--pad)) .75rem;white-space:nowrap;
          border-radius:.375rem}
nav .mtop:hover{background:rgba(127,127,127,.12)}
nav .mgroup.open > .mtop{background:var(--accent);color:var(--panel)}
nav .mtop:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:2px}
/* 즐겨찾기는 별표를 붙여 한눈에 구분되게 한다 */
nav .mgroup.fav > .mtop::before{content:'\2605';margin-right:.25rem;color:var(--accent)}
nav .mgroup.fav.open > .mtop::before{color:var(--panel)}

.mpanel{display:none;position:absolute;top:calc(100% + .375rem);left:0;
        min-width:12rem;max-width:20rem;
        background:var(--panel);border:1px solid var(--rule);border-radius:.5rem;
        box-shadow:0 .5rem 1.25rem rgba(0,0,0,.22);padding:.25rem 0;
        max-height:min(70vh,32rem);overflow:auto}
.mgroup.open > .mpanel{display:block}
.mpanel button{display:block;width:100%;text-align:left;font:inherit;font-size:.844rem;
               padding:calc(.438rem * var(--pad)) 1rem;background:none;border:0;color:var(--ink);
               cursor:pointer;border-left:3px solid transparent;white-space:nowrap}
.mpanel button:hover{background:rgba(127,127,127,.10)}
.mpanel button.on{border-left-color:var(--accent);color:var(--accent);font-weight:600;
                  background:rgba(127,127,127,.07)}
.mpanel button:disabled{color:var(--soft);cursor:default;opacity:.6}
.mpanel button:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:-3px}
:root[data-contrast="high"] .mpanel button.on{background:var(--accent);color:var(--panel)}
.mpanel .mempty{font-size:.781rem;color:var(--soft);padding:.5rem 1rem}
.mpanel .msep{border-top:1px solid var(--rule);margin:.25rem 0}
.mpanel .mact{color:var(--soft);font-size:.781rem}

/* == 좁은 화면 ========================================================
   갈래 머리는 그대로 가로로 두고(넷뿐이라 줄바꿈으로 충분하다), 판만
   머리줄 폭 전체로 편다. 오른쪽 갈래의 판이 화면 밖으로 나가지 않게
   기준을 nav 로 옮긴다 - .mgroup 기준이면 오른쪽 끝에서 잘린다.        */
@media (max-width:700px){
  /* ★ 메뉴를 머리줄의 마지막 줄로 보낸다.
     DOM 순서상 nav 는 브랜드 바로 뒤인데 flex-basis:100% 라 거기서 줄을
     끊는다. 그러면 뒤에 오는 것들(현재화면·보기설정·언어·로그아웃)이 한 줄씩
     흩어져 머리줄이 일곱 줄이 됐다(375px·23px 글자에서 288px = 화면의 35%).
     order 로 맨 뒤에 두면 나머지가 첫 줄을 나눠 쓰고 메뉴가 둘째 줄을 쓴다. */
  nav{position:relative;flex:1 1 100%;order:99}
  .mgroup{position:static}
  .mpanel{left:0;right:0;min-width:0;max-width:none}

  /* 좁으면 여백과 간격을 줄인다. 1rem 간격이 일곱 번 들어가면 그것만 100px 이다. */
  header{gap:.375rem .5rem;padding:.5rem .75rem}
  /* 밀대는 줄바꿈이 일어나는 순간 뜻이 없다. 오히려 줄을 하나 더 만든다. */
  header .grow{display:none}
  /* 언어 고르기는 두 개뿐이라 좁아도 된다. */
  #langpick{width:7rem}

  /* ★ 조건 이름을 위로 올린다.
     넓은 화면에서는 이름을 왼쪽에 두는 것이 읽기 좋지만, 그 칸을
     max-content 로 잡았기 때문에 글자가 커지면 이름 하나가 화면 폭을
     넘어선다(23px 에서 '비교일자 (선택)' 이 242px 을 요구해 문서 전체가
     397px 로 벌어졌다). 좁으면 위아래로 쌓는 것이 맞다. */
  .cond.open .cond-body.rows{grid-template-columns:minmax(0,1fr)}
  .cond-body.rows > .fld{display:flex;flex-direction:column;gap:.25rem;min-width:0}
  .cond-body.rows > .fld > span{text-align:left}
  .cond-body.rows > .fld.wide > span{display:none}
}
}

/* ★ min-width:0 이 없으면 화면 하나가 문서 전체를 넓힌다.
   그리드 항목의 자동 최소폭은 auto(내용 기준)라, 안에 줄바꿈 금지 글자나
   넓은 표가 있는 화면이 있으면 그 폭만큼 문서가 벌어지고 오른쪽이 잘린다.
   실측(375px·23px 글자): 엑셀 업로드 화면이 396.75px 를 요구해 22px 이
   잘려 나갔다. 지금 안 보이는 화면도 폭을 요구한다는 것이 함정이다.
   넘치는 것은 각 화면 안의 overflow:auto 가 스크롤로 받는다. */
main, main > div{min-width:0}
section.view{display:none;grid-template-rows:auto 1fr;min-height:0;min-width:0;height:100%}
section.view.on{display:grid;grid-template-columns:minmax(0,1fr)}

/* 조건 패널 - 기본은 접힘. 사장님이 주로 보는 화면이라 조건이 상시 노출되지 않게 한다. */
/* 조건줄. 머리(접힘/펼침 버튼)와 동작 슬롯이 한 줄, 조건 본문이 그 아래.
   슬롯을 머리 옆에 두는 이유: 조건줄은 기본이 접혀 있어서 본문 안에 넣은
   버튼은 펼치기 전까지 안 보인다. [엑셀]처럼 자주 쓰는 것은 늘 보여야 한다. */
.cond{border-bottom:1px solid var(--rule);background:var(--panel);
      display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.cond-act{display:flex;gap:.375rem;align-items:center;padding:0 1rem;flex:none}
.cond-act:empty{display:none}
/* ★ min-width:0 이 반드시 필요하다.
   이것은 그리드 항목이고, 그리드 항목의 자동 최소폭은 auto(내용 기준)다.
   안의 '조건 변경' 힌트가 줄바꿈 금지라서 그 최소폭이 화면보다 커지면
   문서 전체가 그만큼 벌어진다(375px 화면에서 397px 로 벌어져 22px 이
   잘려 나갔다). overflow:hidden 은 플렉스 항목에만 듣고 그리드 항목에는
   듣지 않는다. */
.cond-head{display:flex;align-items:center;gap:.625rem;width:100%;min-width:0;
           padding:calc(.563rem * var(--pad)) 1rem;
           background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.cond-head:hover{background:rgba(127,127,127,.07)}
.cond-head:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:-2px}
.chev{display:inline-block;width:.7rem;color:var(--soft);transition:transform .15s ease;flex:none}
.cond.open .chev{transform:rotate(90deg)}
.cond-summary{font-size:.844rem;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cond-summary b{color:var(--ink);font-weight:600}
.cond-hint{margin-left:auto;font-size:.719rem;color:var(--soft);flex:none}
/* 좁은 화면에서는 힌트를 감춘다. 꺾쇠와 요약만으로 뜻이 통하고,
   줄바꿈 금지인 이 글자가 폭을 가장 많이 먹는다. */
@media (max-width:560px){ .cond-hint{display:none} }
.cond-body{display:none;grid-column:1 / -1}
.cond.open .cond-body{display:flex;align-items:flex-end;gap:.75rem;padding:.125rem 1rem .875rem;
                      flex-wrap:wrap;grid-column:1 / -1}

/* ── 조건을 한 줄에 하나씩 (이름 왼쪽 · 값이 남는 폭 전부) ─────────────
   기본 배치는 조건을 가로로 늘어놓는다. 조건이 서너 개고 값이 긴 화면
   (사업장 칩 일곱 개, 통화 여러 개)에서는 줄바꿈이 지저분해져서 무엇이
   무엇인지 알아보기 어렵다. 그런 화면에만 cond-body 에 rows 를 붙인다.

   display:contents 로 이름과 값을 바깥 그리드의 직접 항목으로 만든다.
   subgrid 는 브라우저 지원이 갈려 쓰지 않는다. */
.cond.open .cond-body.rows{display:grid;grid-template-columns:max-content minmax(0,1fr);
                           gap:.5rem .75rem;align-items:center;padding:.25rem 1rem 1rem}
.cond-body.rows > .fld{display:contents}
.cond-body.rows > .fld > span{font-size:.813rem;color:var(--soft);white-space:nowrap}
:root[data-contrast="high"] .cond-body.rows > .fld > span{color:var(--ink);font-weight:600}
.cond-body.rows > .fld > div{min-width:0}
/* 조건 패널의 위젯 폭.
   위젯 옵션에 width 를 주면 인라인 style 이라 좁은 화면 규칙을 이긴다.
   여기서 정하면 자리가 없을 때 알아서 줄어든다. */
.cond-body .dx-tagbox{width:100%;max-width:22.5rem}

/* 한 칸에 위젯 둘 (환산 체크 + 환율종류) */
.cond-body.rows .inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;min-width:0}

/* 검색은 두 칸을 다 쓴다. 조건을 다 채운 뒤 눌러야 하는 것이라 아래에 크게 둔다. */
.cond-body.rows > .fld.wide{display:block;grid-column:1 / -1}
.cond-body.rows > .fld.wide > span{display:none}

.fld{display:flex;flex-direction:column;gap:.25rem}
.fld > span{font-size:.719rem;color:var(--soft)}
:root[data-contrast="high"] .fld > span{color:var(--ink);font-weight:600}

/* ── 한 칸짜리 그리드에는 열 트랙을 반드시 적는다 ─────────────────────
   grid-template-columns 를 빼면 열이 auto = 내용 폭이 된다. 안에 넓은 것이
   하나 있으면 트랙이 그만큼 늘어나고, overflow:auto 면 옆으로 스크롤이
   생기고 hidden 이면 잘려 나간다.

   실측 2026-08-26 (375px · 23px 글자): 감사 추적의 요약 타일이
   repeat(auto-fit,minmax(9.5rem,1fr)) 인데 9.5rem 이 218px 이 되자,
   .audit-body 의 열이 2,783px 로 늘어나 타일 다섯 개가 한 줄에 깔렸다.
   화면은 375px 인데.

   minmax(0,1fr) 은 '넘치면 자식이 알아서 줄이거나 스스로 스크롤해라' 는 뜻이다. */
.body{min-height:0;overflow:hidden;padding:.75rem 1rem 1rem}
.split{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;gap:.75rem;height:100%;min-height:0}
.msg{padding:1rem;color:var(--soft);font-size:.875rem}
.err{padding:.75rem 1rem;color:var(--err);font-size:.844rem}

/* ==================================================================
   4. 카드·타일 (마감 현황 / 내 정보 / 감사 추적)
   ================================================================== */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.625rem;
       max-width:75rem;margin:0 0 1rem}
.tile{background:var(--panel);border:1px solid var(--rule);border-radius:.5rem;
      padding:calc(.75rem * var(--pad)) .875rem;display:flex;flex-direction:column;gap:.125rem}
.tile .n{font-size:1.625rem;font-weight:var(--numw);line-height:1.1;font-variant-numeric:tabular-nums}
.tile .k{font-size:.75rem;color:var(--soft)}
:root[data-contrast="high"] .tile .k{color:var(--ink)}
.tile.bad  .n{color:var(--bad)}   .tile.bad{border-color:var(--bad-line);background:var(--bad-bg)}
.tile.warn .n{color:var(--warn)}  .tile.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.tile.ok   .n{color:var(--ok)}
.tile.idle .n{color:var(--idle)}

/*
 * 권한 관리 - 왼쪽 그룹 목록, 오른쪽 탭(소속 사용자 / 화면 권한).
 * 좁아지면 위아래로 쌓는다. 왼쪽을 고정폭으로 두지 않는 이유는 그룹명이
 * "41.인도네시아관리자" 처럼 길고 배율을 올리면 더 길어지기 때문이다.
 */
.auth-body{display:grid;grid-template-columns:minmax(18rem,32%) minmax(0,1fr);gap:.75rem;overflow:hidden}
/* ★ 1fr 이 아니라 minmax(0,1fr) 이다.
   1fr = minmax(auto,1fr) 이고 auto 최소값은 min-content 라서, 안에 든 그리드가
   35행짜리면 트랙이 그 높이(1,231px)까지 늘어난다. 바깥이 overflow:hidden 이므로
   아래쪽 행이 잘려서 아예 닿을 수 없게 된다. 0 을 최소로 못 박아야 트랙이 줄어들고
   그때부터 그리드의 height:100% 와 자체 스크롤이 동작한다. */
.auth-left,.auth-right{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);min-height:0;min-width:0}
/* ★ 칸 안의 격자가 칸보다 넓어지지 않게 한다.
   그리드 아이템의 min-width 기본값이 auto 라서, 열이 많은 격자는 내용 최소폭까지
   부풀어 트랙을 넘어선다. 넘어선 부분은 .auth-body 의 overflow:hidden 에 잘려
   스크롤로도 닿을 수 없다(실제로 383px 칸에 592px 격자가 그려져 뒤쪽 열
   209px 어치를 볼 방법이 없었다).
   min-width:0 을 주면 격자가 칸 폭으로 줄고, 넘치는 열은 DevExtreme 이
   격자 안에 가로 스크롤 막대를 만들어 닿게 해 준다. */
.auth-left > *,.auth-right > *,.imp-pane > *,.master-body > *{min-width:0}
.auth-left{grid-template-rows:auto minmax(0,1fr)}
.panel-head{display:flex;align-items:center;gap:.5rem;padding:0 0 .5rem;flex-wrap:wrap}
.panel-title{font-size:.844rem;font-weight:600}
.panel-head .grow{flex:1}
.panel-note{margin:0 0 .5rem;font-size:.75rem;color:var(--soft);line-height:1.5}
:root[data-contrast="high"] .panel-note{color:var(--ink)}
.panel-note:empty{display:none}
/* 사업장이 0곳으로 풀리는 그룹 - 소속 사용자가 아무것도 못 본다 */
.dx-datagrid .dead-group td{background:var(--bad-bg)}
.dx-datagrid .dead-group td:first-child{box-shadow:inset 3px 0 0 var(--bad)}

/*
 * 자금 등록 - 위에 도구줄, 아래 격자.
 * 도구줄에 '어디에 쓰는지'와 '어디까지 잠겼는지'를 항상 띄운다.
 * 돈을 넣는 화면에서 그 두 가지는 눌러 보고 알게 되어선 안 된다.
 */
.entry-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:.5rem;overflow:hidden}
.entry-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.entry-bar .grow{flex:1}
.entry-sum{font-size:.813rem;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.entry-sum b{color:var(--ink);font-weight:var(--numw)}
:root[data-contrast="high"] .entry-sum{color:var(--ink)}
/* 마감으로 잠긴 행 - 색만으로 알리지 않고 커서와 배경까지 바꾼다 */
.dx-datagrid .locked-row td{background:var(--idle-bg);color:var(--soft)}
.dx-datagrid .locked-row td:first-child{box-shadow:inset 3px 0 0 var(--idle)}
:root[data-contrast="high"] .dx-datagrid .locked-row td{color:var(--ink)}
/* 원본이 음수였던 행 - 저장하면 값이 바뀐다 */
.dx-datagrid .neg-row td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
/* 엑셀 업로드에서 걸러진 행. 색 하나에 의존하지 않게 왼쪽 띠도 같이 준다
   (고대비·색약 설정에서 배경색만으로는 구분이 안 된다). */
.dx-datagrid .bad-row td{background:var(--bad-bg)}
.dx-datagrid .bad-row td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
/* 거래처 코드를 못 맞춘 행. 오류가 아니라 알림이라 더 약하게. */
.dx-datagrid .info-row td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/* 기준정보 - 탭 + 격자 하나. 격자에 최소 높이를 준다. */
.master-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:.5rem;overflow:hidden}
/* 미사용 처리된 행 - 지운 것이 아니라 꺼둔 것이다 */
.dx-datagrid .inactive-row td{color:var(--soft)}
.dx-datagrid .inactive-row td:first-child{box-shadow:inset 3px 0 0 var(--idle)}
:root[data-contrast="high"] .dx-datagrid .inactive-row td{color:var(--ink)}

/* 메뉴 구성 - 왼쪽 모듈(3행)은 좁게, 오른쪽 프로그램(16행)이 주다. */
/* ★ :where() 로 감싸 ID 의 특이도를 0 으로 만든다.
   #view-menu .auth-body 는 특이도가 (1,1,0) 이라 아래 미디어쿼리의
   .auth-body (0,1,0) 를 폭에 상관없이 이겼다. 그래서 프로그램관리만 좁은
   화면에서도 두 칸을 유지해, 왼쪽 판 240px 을 뺀 112px 안에 오른쪽 격자가
   갇혔다. 단추 '새 프로그램' 과 '프로그램이 없습니다.' 가 잘린 것이 그 결과다.
   (실측 2026-08-26, 폭 399px) */
:where(#view-menu) .auth-body{grid-template-columns:minmax(15rem,26%) minmax(0,1fr)}
/* 웹으로 아직 옮기지 않은 화면 - 델파이에서만 열린다 */
.dx-datagrid .web-missing td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/*
 * 감사 추적 - 요약 타일 위, 목록 아래.
 * 목록에 최소 높이를 준다. 글자를 아주 크게 하면 타일이 커져서 목록이
 * 네 줄만 남는 일이 생겼다. 그럴 때는 화면이 스크롤되는 편이 낫다.
 */
.audit-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(22rem,1fr);gap:.75rem;overflow:auto}
.audit-body .tiles{margin:0}
.audit-body #ad-grid{min-height:0}

.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:.75rem;max-width:75rem}
.site{background:var(--panel);border:1px solid var(--rule);border-radius:.5rem;padding:0;overflow:hidden;
      display:flex;flex-direction:column}
/* 왼쪽 심각도 띠 — 색맹이어도 위치와 라벨로 구분된다 */
.site .stripe{height:4px}
.site.s-OK      .stripe{background:var(--ok)}
.site.s-WARN    .stripe{background:var(--warn)}
.site.s-DELAYED .stripe{background:var(--bad)}
.site.s-IDLE    .stripe{background:var(--idle)}
.site .top{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding:.75rem .875rem .375rem}
.site .name{font-weight:600;font-size:.906rem}
.site .code{font-size:.719rem;color:var(--soft);font-family:Consolas,monospace}
.site .tag{font-size:.688rem;padding:.125rem .5rem;border-radius:99px;white-space:nowrap;border:1px solid}
.site.s-OK      .tag{color:var(--ok);  border-color:var(--ok-line);  background:var(--ok-bg)}
.site.s-WARN    .tag{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.site.s-DELAYED .tag{color:var(--bad); border-color:var(--bad-line); background:var(--bad-bg)}
.site.s-IDLE    .tag{color:var(--idle);border-color:var(--idle-line);background:var(--idle-bg)}
.site .metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.375rem .875rem .75rem}
.site .m{display:flex;flex-direction:column}
.site .m b{font-size:1.188rem;font-weight:var(--numw);line-height:1.15;font-variant-numeric:tabular-nums}
.site .m span{font-size:.719rem;color:var(--soft)}
:root[data-contrast="high"] .site .m span{color:var(--ink)}
.site .m.hot b{color:var(--bad)}
.site .rows{border-top:1px solid var(--rule);padding:calc(.563rem * var(--pad)) .875rem;
            display:flex;flex-direction:column;gap:.188rem}
.site .rows div{display:flex;justify-content:space-between;gap:.625rem;font-size:.781rem}
.site .rows span:first-child{color:var(--soft)}
:root[data-contrast="high"] .site .rows span:first-child{color:var(--ink)}
.site .rows span:last-child{font-variant-numeric:tabular-nums}
.site .alert{border-top:1px solid var(--bad-line);background:var(--bad-bg);color:var(--bad);
             padding:.5rem .875rem;font-size:.781rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.875rem;align-content:start;
       max-width:69rem}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:.5rem;
      padding:calc(1rem * var(--pad)) 1.125rem;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.card > h3{margin:0;font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.card .sub{font-size:.781rem;color:var(--soft);margin:-.375rem 0 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.375rem .875rem;font-size:.844rem;align-items:baseline}
.kv dt{color:var(--soft);white-space:nowrap;margin:0}
.kv dd{margin:0;min-width:0;word-break:break-word}
:root[data-contrast="high"] .kv dt{color:var(--ink);font-weight:600}
.pill{font-size:.719rem;padding:.125rem .5rem;border-radius:99px;border:1px solid var(--rule);color:var(--soft);
      white-space:nowrap}
.pill.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.pill.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.pill.bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.card .actions{display:flex;gap:.5rem;flex-wrap:wrap}
.recent{max-height:16.25rem;overflow:auto;font-size:.813rem}
.recent div{display:flex;justify-content:space-between;gap:.75rem;padding:.313rem 0;border-bottom:1px solid var(--rule)}
.recent div:last-child{border-bottom:0}
.recent .t{color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── 자르지 말고 줄을 바꾼다 ──────────────────────────────────────────
   nowrap 이 붙은 글자들은 자리가 없으면 잘린다. 잘린 금액은 다른 금액으로
   읽히고("19,269,757,770" 이 "19,269,757,7" 로), 잘린 날짜 범위는 틀린 말이
   된다("2018-01-01 ~ 2026-08-"). 줄이 늘어나는 편이 언제나 낫다.

   실측(375px · 23px 글자): 조건 요약·항목 이름·최근 목록 시각·합계·
   파일 끌어놓기 안내가 잘렸다.

   조건을 달지 않는 이유: normal 은 자리가 없을 때만 줄을 바꾼다. 넓은
   화면에서는 어차피 한 줄이므로 폭이나 배율로 나눌 일이 없다. */
.cond-summary{white-space:normal;overflow:visible;text-overflow:clip}
.kv dt{white-space:normal}
.recent div{flex-wrap:wrap}
.recent .t{white-space:normal}
.entry-sum{white-space:normal}
.site .tag{white-space:normal}
.dx-fileuploader-input-label{white-space:normal}
@media (max-width:700px){ .imp-file{min-width:0} }

/* 좁은 화면 쪽매김의 쪽 번호 칸.
   DevExtreme 이 글자 폭을 재서 style="width:49px" 를 인라인으로 박는데, 글자를
   키우면 그 계산이 모자라 숫자가 잘린다(실측 375px·23px: '1' 이 27px 칸에서
   37px 필요). 인라인은 !important 로만 이길 수 있다. */
.dx-light-pages .dx-page-index.dx-numberbox{width:4.5em !important}
.dx-light-pages .dx-page-index .dx-texteditor-input{text-align:center}

/* ── 스크롤 막대 ──────────────────────────────────────────────────────
   DevExtreme 기본 막대는 얇고(2px) 흐려서, 옆으로 더 볼 것이 있는지 모른다.
   실제로 오른쪽 끝의 열을 못 보고 지나쳤다. 굵기와 대비를 올린다.
   showScrollbar:'always' 와 함께 동작한다(gridChrome). */
.dx-scrollable-scrollbar.dx-scrollbar-horizontal{height:.625rem}
.dx-scrollable-scrollbar.dx-scrollbar-vertical{width:.625rem}
.dx-scrollable-scrollbar .dx-scrollable-scroll-content{
  background:var(--soft);border-radius:99px;opacity:.65}
.dx-scrollable-scrollbar:hover .dx-scrollable-scroll-content{opacity:1}
/* 막대가 놓이는 자리에 옅은 바탕을 깔아 '여기가 스크롤' 임을 알린다. */
.dx-datagrid-rowsview .dx-scrollable-scrollbar.dx-scrollbar-horizontal{
  background:rgba(127,127,127,.10)}

/* 격자 머리글과 탭 이름은 두 줄이 되어도 좋다.
   머리글이 잘리면 무슨 열인지 알 수 없다. 열 폭을 배율만큼 넓혀도
   (scaleColumnWidths) 깔때기 아이콘이 20px 쯤 먹어서 두 글자 머리글이
   잘리는 경우가 남았다 - 실측 '순서' 29/40px, '실제 범위' 86/88px. */
/* ★ 선택자를 DX 것과 똑같이 맞춘다.
   DX(dx.light.css)의 규칙은
     .dx-datagrid-nowrap .dx-header-row > td > .dx-datagrid-text-content
   로 특이도가 (0,3,1) 이다. 클래스만 늘린 (0,3,0) 선택자로는 못 이긴다.
   실측: text-overflow 는 바뀌는데 white-space 는 nowrap 그대로였다.
   같은 특이도면 나중에 읽힌 쪽이 이기고, app.css 가 뒤에 온다. */
.dx-datagrid-nowrap .dx-header-row > td > .dx-datagrid-text-content{
  white-space:normal;text-overflow:clip}
.dx-tabs .dx-tab-text{white-space:normal}

/* 5. 보기 설정 패널 -> css/a11y.css */

/* ==================================================================
   6. DevExtreme 위젯 배율
   ------------------------------------------------------------------
   DevExtreme 22.2 는 px 로 적혀 있어서 배율을 안 따라온다. 여기서 덮는다.
   전부 rem/em 이다 - 배율 단계마다 규칙을 새로 쓰지 않기 위해서.
   기본 배율(1) 에서의 계산값이 DevExtreme 원래 값과 같도록 맞췄으므로
   글자 크기를 '보통'으로 두면 지금 화면과 똑같이 보인다.
   ================================================================== */
.dx-widget{font-family:inherit;font-size:.875rem}          /* 원래 14px */
.dx-widget input,.dx-widget textarea,.dx-widget select{font-family:inherit;font-size:1em}

/* 입력 컨트롤 높이. min-height 를 em 으로 줘야 글자가 커질 때 잘리지 않는다. */
.dx-texteditor-input{min-height:2.571em;padding:.5em .643em;font-size:1em;line-height:1.35}
.dx-texteditor-container{min-height:0}
.dx-placeholder{font-size:1em}
.dx-button-content{padding:.5em 1.286em;font-size:1em}
.dx-button .dx-icon{font-size:1.143em;width:1.143em;height:1.143em;line-height:1.143em}
.dx-checkbox-icon{width:1.571em;height:1.571em}
.dx-checkbox-text{font-size:1em;padding-left:.5em}

/* 격자. 셀 여백에 밀도 배수를 곱한다.
   ★ .dx-datagrid / .dx-pivotgrid 에 font-size 를 다시 주지 않는다.
     위젯 뿌리(.dx-widget)에서 .875rem 로 정해 두면 안쪽은 상속으로 따라온다.
     여기에 1em 을 얹으면 뿌리와 안쪽 중 어느 쪽에 클래스가 붙었는지에 따라
     14px 이 되기도 16px 이 되기도 한다 - 실제로 피벗만 16px 로 커졌다. */
.dx-datagrid .dx-row > td,
.dx-datagrid .dx-row > tr > td{padding:calc(.5em * var(--pad)) .571em}
.dx-datagrid-headers{font-size:1em}
.dx-datagrid-headers .dx-row > td{padding-top:calc(.607em * var(--pad));padding-bottom:calc(.607em * var(--pad))}
.dx-datagrid-summary-item{font-size:1em;font-weight:var(--numw)}
.dx-datagrid-group-panel .dx-group-panel-item{font-size:1em}
.dx-datagrid .dx-group-row{font-weight:700}
.dx-pager{font-size:.875rem;padding:.5em}
.dx-pager .dx-page,.dx-pager .dx-page-size{padding:.429em .643em;min-width:2em}
.dx-datagrid-filter-row .dx-editor-cell .dx-texteditor-input{min-height:2.2em}

/* 피벗. 잔액현황이 이걸 쓴다 - 경영진이 보는 화면이라 특히 신경 쓴다. */
.dx-pivotgrid .dx-area-data-cell td,
.dx-pivotgrid .dx-area-row-cell td,
.dx-pivotgrid .dx-area-column-cell td,
.dx-pivotgrid .dx-area-description-cell{padding:calc(.5em * var(--pad)) .714em}
.dx-pivotgrid .dx-total,.dx-pivotgrid .dx-grandtotal{font-weight:var(--numw)}
.dx-pivotgrid-fields-container .dx-area-field{font-size:1em;padding:.286em .571em}

/* 목록·드롭다운 */
.dx-list-item-content{padding:calc(.571em * var(--pad)) .857em;font-size:1em}
.dx-item-content.dx-list-item-content{line-height:1.4}
.dx-popup-title{font-size:1.143em}
.dx-toast-content{font-size:1em}

/* 초점 표시. 키보드로 다니는 사람에게 이것이 유일한 단서다. */
.dx-state-focused.dx-texteditor,.dx-datagrid-rowsview .dx-row-focused,
.dx-button.dx-state-focused{outline:var(--focus) solid var(--accent);outline-offset:1px}

/*
 * 숫자 강조.
 * 금액 칸에만 붙인다. 컬럼 정의에서 cssClass:'num' 을 달아 표시한 칸과,
 * 피벗의 데이터 영역(항상 숫자다).
 */
.num,.dx-pivotgrid .dx-area-data-cell td{font-variant-numeric:tabular-nums}
html[data-numbold="on"] .num,
html[data-numbold="on"] .dx-pivotgrid .dx-area-data-cell td,
html[data-numbold="on"] .dx-datagrid-summary-item{font-weight:800}

/* ==================================================================
   7. 태블릿 · 모바일
   ------------------------------------------------------------------
   ★ 반드시 기본 규칙 뒤에 둔다 - 같은 특이성이면 나중 것이 이기므로
     앞에 두면 .body / .split 기본값이 미디어쿼리를 덮어버린다.
   ================================================================== */
/* ================================================================
   인쇄
   ----------------------------------------------------------------
   화면 격자를 그대로 인쇄하면 가상 스크롤 때문에 그려진 행만 찍힌다
   (224행 표에서 20행). 그래서 #print-area 에 전체 행으로 표를 새로
   만들어 넣고, 인쇄할 때 나머지를 감춘다.

   프린터는 기본적으로 배경색을 안 찍는다. 상태를 색으로만 나타내지 않고
   글자로 나타낸다 - 종이에서 알약은 글자만 남는다.
   ================================================================ */
#print-area{display:none}

.prt-title{font-size:1.125rem;font-weight:700;margin:0 0 .25rem}
.prt-line{font-size:.75rem;color:var(--soft);margin:0}
.prt-note{font-size:.75rem;color:var(--soft);margin:.5rem 0 0}
.prt-table{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.75rem}
.prt-table th,.prt-table td{border:1px solid #999;padding:.25rem .375rem;text-align:left;
                            vertical-align:top;word-break:break-word}
.prt-table th{font-weight:700;background:#eef1f4;white-space:nowrap}
.prt-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.prt-table td.mid{text-align:center}

@media print{
  /* 화면 요소를 전부 감춘다. 인쇄용 영역만 남는다. */
  header,nav,main,.dx-overlay-wrapper,.dx-toast-wrapper,.a11y-panel{display:none !important}
  html,body{height:auto !important;overflow:visible !important;background:#fff !important}
  #print-area{display:block !important;color:#000}

  /* 표 머리글을 페이지마다 반복하고, 한 행이 페이지에 걸쳐 쪼개지지 않게 한다.
     자금 자료는 수십 페이지가 되므로 머리글 반복이 없으면 읽을 수 없다. */
  .prt-table thead{display:table-header-group}
  .prt-table tr{break-inside:avoid;page-break-inside:avoid}
  .prt-title,.prt-line{color:#000}
  .prt-table th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  @page{margin:12mm 10mm}
}
/* 열이 많은 표는 가로로 눕혀 찍는다. @page 는 media 밖에서도 적용된다. */
@page prt-landscape{size:landscape}

/* ---- 자금 분석 ----
   위에 그래프, 아래에 표. 그래프는 모양을 보고 표는 숫자를 본다 -
   둘 중 하나만 두면 '왜 그런지' 나 '얼마인지' 중 하나가 빠진다.
   그래프에 고정 높이를 주는 이유: 비율로 주면 표가 길어질 때 그래프가
   납작해져 곡선이 직선처럼 보인다. */
.an-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:.5rem;overflow:hidden}
.an-split{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(11rem,15rem) minmax(0,1fr);
          gap:.75rem;overflow:hidden;min-height:0}
.an-split > *{min-width:0}
/* 그래프가 없는 탭(유휴 자금)에서는 표가 전부를 쓴다 */
.an-split.no-chart{grid-template-rows:minmax(0,1fr)}
.an-split.no-chart #an-chart{display:none}

/* ---- 엑셀 업로드 ----
   위: 파일 고르기 + 단계 버튼 / 아래: 업로드 이력 | 그 배치의 행
   행 목록이 이 화면의 본문이라 남는 높이를 다 준다. */
.imp-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:.5rem;overflow:hidden}
.imp-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.imp-bar .grow{flex:1}
.imp-file{min-width:16rem;flex:1 1 18rem}
.imp-split{display:grid;grid-template-columns:minmax(19rem,36%) minmax(0,1fr);
           gap:.75rem;overflow:hidden;min-height:0}
.imp-pane{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0}

/* 고른 파일 이름이 길면 줄바꿈되게 둔다. 잘라 버리면 어느 파일인지 알 수 없다. */
.imp-file .dx-fileuploader-file-name{white-space:normal;word-break:break-all}
/* 기본 여백이 커서 도구줄이 한 줄에 안 들어간다 */
.imp-file .dx-fileuploader-wrapper{padding:0}
.imp-file .dx-fileuploader-input-wrapper{padding:0;border:0}

@media (max-width:900px){
  .auth-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(14rem,1fr) minmax(18rem,1fr);overflow:auto}
  /* 분석: 좁은 화면에서는 그래프를 낮추고 전체가 스크롤되게 한다.
     그래프를 그대로 두면 표가 화면 밖으로 밀려 숫자를 볼 수 없다. */
  .an-split{grid-template-rows:minmax(9rem,11rem) minmax(16rem,1fr);overflow:auto}
  .an-body{overflow:auto}

  /* 업로드도 위아래로 쌓는다. 이력이 위, 행 목록이 아래 - 읽는 순서와 같다. */
  .imp-split{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(11rem,auto) minmax(18rem,1fr);overflow:auto}
  .imp-body{overflow:auto}
  .imp-file{flex:1 1 100%}
  /* 메뉴는 가로 막대다. 좁은 화면에서 세로로 쌓는 규칙은 위쪽
     @media (max-width:700px) 에 있다. 예전 서랍(position:fixed +
     translateX)은 걷어냈다 - 그 규칙이 남아 있으면 메뉴가 화면 밖으로
     밀려나 닿을 수 없다. */
  .fld{flex:1 1 10rem}
  header{padding:.5rem .75rem;gap:.625rem}
  .badge{display:none}
  .body{padding:.5rem .625rem .75rem}
  /* 터치로 누르는 화면에서는 항목 높이를 더 준다 */
  nav button{padding:calc(.688rem * var(--pad)) 1rem}
}
@media (max-width:560px){
  .who{display:none}
  .cond-hint{display:none}
  .cond-act{padding:0 .625rem;gap:.25rem}
  /* ★ 좁은 화면에서는 버튼 글자를 빼고 아이콘만 남긴다.
     [엑셀]·[인쇄] 두 버튼이 375px 중 264px 를 먹어, 지금 무엇을 보고 있는지
     알려주는 조건 요약이 34px 로 짜부라졌다(배율 1.44배 실측).
     아이콘(표·프린터)은 알아볼 수 있고, 눌러 보기 전에 hint 로도 확인된다. */
  .cond-act .dx-button-text{display:none}
  .cond-act .dx-button-content{padding-left:.5rem;padding-right:.5rem}
  .brand{font-size:.875rem}
  /* 마스터-상세를 위아래로 쌓되 각각 최소 높이를 준다. 화면 전체는 스크롤되게. */
  .body{overflow:auto}
  .split{grid-template-rows:minmax(15rem,1fr) minmax(15rem,1fr);height:auto;min-height:100%}
}

/* 배율을 올리면 좁은 화면과 같은 문제가 생긴다 - 사이드바를 서랍으로 바꾼다.
   1.44배 × 13.25rem 사이드바면 실제로 305px 를 먹는다. */
@media (max-width:1200px){
  /* 아주 큰 글자에서는 갈래 이름이 한 줄에 다 안 들어간다.
     막대가 두 줄이 되게 두는 것이 서랍으로 바꾸는 것보다 낫다 -
     갈래가 넷뿐이라 두 줄이면 충분하다. */
}

/* 움직임을 줄이라고 설정한 사람에게는 전환 효과를 끈다. */
@media (prefers-reduced-motion: reduce){
  .chev,nav{transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}