/* components.css — 모든 화면이 같이 쓰는 부품의 겉모습 (만나허브 [YG-0049])
 *
 *   근거 — S10 8장 「공통 부품 — 모든 화면이 같이 쓴다. 화면마다 새로 만들지 않는다」
 *   ⛔ 화면 파일에서 이 클래스들을 **다시 정의하지 않습니다.** 화면 고유 배치만 화면에 둡니다.
 */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--바탕); color: var(--글);
  font: var(--조금크게)/1.6 var(--글꼴);
}
a { color: var(--파랑); }

/* ── 껍데기 — 위 띠 + 옆 메뉴 + 본문 ───────────────────────────── */
.머리띠 {
  position: sticky; top: 0; z-index: 30;
  background: var(--칸); border-bottom: 1px solid var(--줄);
  display: flex; align-items: center; gap: var(--사이4);
  padding: var(--사이3) var(--사이5); box-shadow: var(--그림자);
}
/* 제목은 **명조 계열**로 — V7이 화면 제목에 쓰던 글꼴 결입니다 */
.머리띠 .제목 { font-size: var(--더크게); font-weight: 700; margin: 0;
                font-family: var(--제목글꼴); letter-spacing: -.02em; }
.머리띠 .꼬리표 { font-family: var(--숫자글꼴); font-size: var(--작게); color: var(--흐린글); }
.머리띠 .빈칸 { flex: 1; }

.몸통 { display: flex; align-items: flex-start; }
.옆메뉴 {
  width: var(--옆메뉴폭); flex: 0 0 var(--옆메뉴폭);
  position: sticky; top: 53px; align-self: flex-start;
  padding: var(--사이4) var(--사이3); border-right: 1px solid var(--줄);
  background: var(--칸); min-height: calc(100vh - 53px);
}
.옆메뉴 .묶음이름 {
  font-size: var(--작게); color: var(--아주흐린글);
  margin: var(--사이4) 0 var(--사이1) var(--사이2); letter-spacing: .04em;
}
.옆메뉴 a, .옆메뉴 span.잠김 {
  display: flex; align-items: center; gap: var(--사이2);
  padding: 7px var(--사이3); border-radius: var(--둥글게);
  font-size: var(--보통); text-decoration: none; color: var(--글);
}
.옆메뉴 a:hover { background: var(--파랑연함); }
.옆메뉴 a.지금 { background: var(--파랑); color: #fff; font-weight: 600; }
.옆메뉴 span.잠김 { color: var(--아주흐린글); cursor: not-allowed; }
.옆메뉴 .표 { margin-left: auto; font-size: 11px; }

.본문 { flex: 1; min-width: 0; padding: var(--사이5); max-width: var(--가운데폭); }
@media (max-width: 900px) {
  .몸통 { display: block; }
  .옆메뉴 { width: auto; position: static; min-height: 0; border-right: 0;
            border-bottom: 1px solid var(--줄); display: flex; flex-wrap: wrap;
            gap: var(--사이1); }
  .옆메뉴 .묶음이름 { display: none; }
  .본문 { padding: var(--사이4); }
}

/* ── 지도 — 지금 어디인가 (전역 지시 2026-08-07: 결과보다 지도가 먼저) ── */
.지도 { display: flex; gap: var(--사이2); flex-wrap: wrap; margin: 0 0 var(--사이4); }
.지도 > div {
  flex: 1; min-width: 122px; background: var(--칸); border: 1px solid var(--줄);
  border-radius: var(--둥글게); padding: 8px var(--사이3); font-size: 13px;
}
.지도 b { display: block; font-size: 11px; color: var(--흐린글); font-weight: 400; }
.지도 .지금 { border-color: var(--파랑); box-shadow: 0 0 0 2px rgba(27,95,176,.13); }
.지도 .끝 { background: var(--초록연함); }

/* ── 툴바 ─────────────────────────────────────────────────────── */
.툴바 {
  display: flex; align-items: center; gap: var(--사이2); flex-wrap: wrap;
  margin-bottom: var(--사이4);
}
.툴바 .빈칸 { flex: 1; }

/* ── 단추 ─────────────────────────────────────────────────────── */
.단추 {
  padding: 8px 15px; border: 1px solid var(--줄); border-radius: var(--둥글게);
  background: var(--칸); color: var(--글); font: inherit; font-size: var(--보통);
  cursor: pointer; box-shadow: var(--그림자); white-space: nowrap;
  transition: background var(--전환빠른), box-shadow var(--전환빠른),
              transform var(--전환빠른);
}
/* V7 — 마우스를 올리면 살짝 떠오릅니다 */
.단추:hover:not(:disabled) { background: var(--주색연함); border-color: var(--주색);
                             box-shadow: var(--뜬그림자);
                             transform: translateY(-1px); }
.단추.주 { background: var(--파랑); border-color: var(--파랑); color: #fff; font-weight: 600; }
.단추.확정 { background: var(--초록); border-color: var(--초록); color: #fff; font-weight: 600; }
/* ⚠ 2026-08-14 실측 사고 — 색 있는 단추에 마우스를 올리면 **글씨가 사라졌다.**
   위 `.단추:hover` 가 바탕만 연한 파랑으로 바꾸고 글자색은 흰색 그대로였다
   (선택자가 더 세서 `.단추.주` 의 바탕을 이겼다). 흰 글씨 + 연한 바탕 = 안 보임.
   → 색 있는 단추는 **바탕을 자기 색으로 도로 못 박고** 밝기만 올린다 */
.단추.주:hover:not(:disabled) { background: var(--주색진함);
                                border-color: var(--주색진함);
                                transform: translateY(-1px);
                                box-shadow: var(--뜬그림자); }
.단추.확정:hover:not(:disabled) { background: var(--초록); border-color: var(--초록);
                                  filter: brightness(1.08);
                                  transform: translateY(-1px);
                                  box-shadow: var(--뜬그림자); }
.단추.작게 { padding: 4px 10px; font-size: var(--작게); }
.단추:disabled { background: #dfe3e7; border-color: #dfe3e7; color: #9aa3ac;
                 cursor: not-allowed; box-shadow: none; }

/* ── 카드·패널 ────────────────────────────────────────────────── */
.패널 {
  background: var(--칸); border: 1px solid var(--줄); border-radius: var(--많이둥글게);
  box-shadow: var(--그림자); margin-bottom: var(--사이4); overflow: hidden;
}
.패널머리 {
  display: flex; align-items: center; gap: var(--사이2);
  padding: 11px var(--사이4); border-bottom: 1px solid var(--줄);
  font-weight: 700; font-size: var(--보통); background: #fbfcfd;
}
.패널머리 .빈칸 { flex: 1; }
.패널몸 { padding: var(--사이4); }
.설명 { color: var(--흐린글); font-size: 13px; margin: 0 0 var(--사이3); }

/* ── KPI 칸 — 숫자를 크게 ─────────────────────────────────────── */
.숫자칸들 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: var(--사이3); margin-bottom: var(--사이4); }
/* V7 KPI — **위에 4px 액센트 띠**가 붙습니다 */
.숫자칸 { background: var(--칸); border: 1px solid var(--줄);
          border-radius: var(--많이둥글게); padding: var(--사이4);
          box-shadow: var(--그림자); position: relative; overflow: hidden; }
.숫자칸::before { content:''; position:absolute; top:0; left:0; right:0;
          height:4px; background:var(--주색); opacity:.9; }
.숫자칸 .이름 { font-size: var(--아주작게); color: var(--아주흐린글);
                letter-spacing: .04em; }
.숫자칸 .값 { font-size: var(--아주크게); font-family: var(--제목글꼴);
              font-weight: 700; font-variant-numeric: tabular-nums;
              line-height: 1.25; margin-top: 2px; }
.숫자칸 .곁 { font-size: var(--아주작게); color: var(--흐린글); }
.숫자칸.바뀜 { border-color: var(--초록); background: var(--초록연함); }
.숫자칸.바뀜::before { background: var(--초록); }

/* ── 입력칸 ───────────────────────────────────────────────────── */
.칸들 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--사이3); }
label { display: block; font-size: var(--작게); color: var(--흐린글); margin-bottom: 3px; }
input, select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--진한줄);
  border-radius: 6px; font: inherit; font-size: var(--보통); background: var(--칸);
}
input:focus, select:focus { outline: 2px solid var(--파랑연함); border-color: var(--파랑); }
input:disabled, select:disabled { background: #f1f3f5; color: var(--흐린글); }
input.수, td.수, th.수 { text-align: right; font-variant-numeric: tabular-nums; }
.따라온값 { background: #f1f3f5; color: var(--흐린글); }

/* ── 표 ───────────────────────────────────────────────────────── */
.넘침 { overflow-x: auto; }
table.표 { width: 100%; border-collapse: collapse; font-size: var(--보통); }
table.표 th, table.표 td { border-bottom: 1px solid var(--줄); padding: 7px 9px;
                           text-align: left; white-space: nowrap; }
/* V7 — 표 머리는 **세이지 10%**. 회색이 아니라 연둣빛이 돕니다 */
table.표 th { background: var(--표머리바탕); color: var(--흐린글); font-weight: 600;
              font-size: var(--아주작게); position: sticky; top: 0; }
table.표 tbody tr:hover { background: rgba(156,174,133,.06); }
table.표 tr.고른줄 { background: var(--주색연함); }
table.표 tr.눈에띔 { background: rgba(212,169,90,.10); }   /* 봐야 할 줄 */
table.표 td.수, table.표 th.수 { text-align: right; font-variant-numeric: tabular-nums;
                                 font-family: var(--숫자글꼴); }
table.표 tfoot td { font-weight: 700; background: #fbfcfd; }
.빈표 { padding: var(--사이5); text-align: center; color: var(--아주흐린글);
        font-size: 13px; }

/* ── 알약·배지 ────────────────────────────────────────────────── */
.알약 { display: inline-block; padding: 2px 9px; border-radius: var(--알약);
        font-size: var(--아주작게); font-weight: 600;
        background: rgba(0,0,0,.05); color: var(--흐린글); margin-right: 4px; }
.알약.코드 { font-family: var(--숫자글꼴); font-weight: 400; }
.알약.좋음 { background: rgba(110,139,92,.15); color: var(--초록); }
.알약.조심 { background: rgba(212,169,90,.18); color: var(--노랑); }
.알약.나쁨 { background: rgba(156,59,38,.15); color: var(--빨강); }

/* 상태 배지 — **채워서** 쓰는 것 (V7 상태 4종 그대로) */
.상태 { display: inline-flex; align-items: center; gap: var(--사이1);
        padding: 3px var(--사이3); border-radius: var(--알약);
        font-size: var(--아주작게); font-weight: 600; }
.상태.대기 { background: var(--대기바탕); color: var(--대기글); }
.상태.진행 { background: var(--진행바탕); color: var(--진행글); }
.상태.끝남 { background: var(--끝난바탕); color: var(--끝난글); }
.상태.보류 { background: var(--보류바탕); color: var(--보류글); }

/* ── 쪽지(알림) — 한국어로 · 무엇이 · 왜 · 어떻게 (S10 「오류 알림」) ── */
.쪽지 { margin-top: var(--사이3); padding: 10px var(--사이3);
        border-radius: var(--둥글게); font-size: var(--보통); white-space: pre-wrap;
        display: none; }
.쪽지.보임 { display: block; }
.쪽지.좋음 { background: var(--초록연함); color: var(--초록); border: 1px solid #bfe2cd; }
.쪽지.조심 { background: var(--노랑연함); color: var(--노랑); border: 1px solid #f0e0a8; }
.쪽지.나쁨 { background: var(--빨강연함); color: var(--빨강); border: 1px solid #f1c6c3; }

/* ── 검사 신호등 (S10 「검사 신호등」 · 목록은 S18 5장) ─────────── */
.신호등 { display: flex; gap: var(--사이2); flex-wrap: wrap; align-items: center;
          font-size: var(--작게); }
.신호 { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
        border-radius: var(--알약); background: #eef2f7; color: #38414c; }
.신호 .불 { width: 8px; height: 8px; border-radius: 50%; background: var(--아주흐린글); }
.신호.초록 .불 { background: var(--초록); }
.신호.노랑 .불 { background: #d0a800; }
.신호.빨강 .불 { background: var(--빨강); }

/* ── 확인 대화상자 (S10 「확인 대화상자」) ─────────────────────── */
.덮개 { position: fixed; inset: 0; background: rgba(16,24,32,.42); z-index: 60;
        display: none; align-items: center; justify-content: center; padding: var(--사이4); }
.덮개.보임 { display: flex; }
.대화상자 { background: var(--칸); border-radius: var(--많이둥글게);
            box-shadow: var(--뜬그림자); max-width: 520px; width: 100%; }
.대화상자 h3 { margin: 0; padding: var(--사이4); border-bottom: 1px solid var(--줄);
               font-size: var(--조금크게); }
.대화상자 .몸 { padding: var(--사이4); font-size: var(--보통); white-space: pre-wrap; }
.대화상자 .발 { padding: var(--사이3) var(--사이4); border-top: 1px solid var(--줄);
                display: flex; gap: var(--사이2); justify-content: flex-end; }

/* ── 근거 보기 (S10 「근거 보기」) ─────────────────────────────── */
.근거 { border: 0; background: none; color: var(--파랑); cursor: pointer;
        font: inherit; font-size: var(--작게); text-decoration: underline;
        padding: 0 2px; }
.근거표 { font-size: 13px; }
.근거표 td:first-child { color: var(--흐린글); }

/* ── 한계 고지 ────────────────────────────────────────────────── */
.한계 { font-size: 13px; color: var(--흐린글); border-top: 1px dashed var(--줄);
        padding-top: var(--사이3); margin-top: var(--사이3); }


/* ══════════════════════════════════════════════════════════════════
   사이드바 v2 — V7 디자인 참고 (collapsible groups · 로고 · 시계)
   ══════════════════════════════════════════════════════════════════ */

/* ⭐ 2026-08-14 — **만나 V7 디자인을 실측해 옮겼습니다.**
   옆 메뉴는 짙은 올리브(V7 `--color-sidebar-bg`), 로고는 테라코타 도장,
   켠 칸은 왼쪽에 3px 막대. 값은 전부 `tokens.css` 한 곳에서 옵니다 */

/* ── 로고 영역 ────────────────────────────────────────────────── */
.로고영역 { display:flex; align-items:center; gap:var(--사이3);
            padding:var(--사이4) var(--사이4) var(--사이3);
            border-bottom:1px solid rgba(255,255,255,.10); }
.로고찍기 { width:38px; height:38px; border-radius:var(--조금둥글게);
            background:linear-gradient(180deg, var(--주색) 0%, var(--주색진함) 100%);
            color:#fff; font-weight:700; font-size:var(--크게);
            font-family:var(--제목글꼴);
            display:grid; place-items:center; flex-shrink:0; letter-spacing:-.02em;
            box-shadow:0 2px 6px rgba(201,123,90,.45),
                       inset 0 1px 0 rgba(255,255,255,.25); }
.로고이름 { font-size:var(--크게); font-weight:700; line-height:1.1;
            color:var(--옆메뉴글); letter-spacing:-.01em; }
.로고판   { font-size:10px; color:var(--옆메뉴흐린글); margin-top:3px;
            letter-spacing:.12em; font-family:var(--숫자글꼴); }

/* ── 메뉴 검색 ────────────────────────────────────────────────── */
.메뉴검색칸감 { padding:var(--사이3) var(--사이3) var(--사이2); }
.메뉴검색입력 { width:100%; padding:var(--사이2) var(--사이3);
               border:1px solid rgba(255,255,255,.06); border-radius:var(--둥글게);
               font:inherit; font-size:var(--작게);
               background:rgba(0,0,0,.20); color:var(--옆메뉴글);
               box-shadow:inset 0 1px 2px rgba(0,0,0,.25); }
.메뉴검색입력::placeholder { color:var(--옆메뉴흐린글); }
.메뉴검색입력:focus { outline:none; border-color:rgba(201,123,90,.5); }
/* ── 메뉴 목록 ────────────────────────────────────────────────── */
.메뉴목록 { flex:1; overflow-y:auto; padding:var(--사이2) 0; }

/* ── 묶음 머리 (collapsible) ──────────────────────────────────── */
.묶음머리 { display:flex; align-items:center; gap:var(--사이2);
            padding:var(--사이2) var(--사이3); margin:0 var(--사이2);
            border-radius:var(--둥글게); cursor:pointer; user-select:none;
            font-size:var(--작게); font-weight:600; color:var(--옆메뉴글);
            letter-spacing:.02em; transition:background var(--전환빠른); }
.묶음머리:hover { background:rgba(255,255,255,.06); }
.묶음머리.활성 { background:var(--옆메뉴켠칸); }
.묶음점 { width:8px; height:8px; border-radius:2px; flex-shrink:0;
          box-shadow:0 0 0 2px rgba(0,0,0,.15); }
.묶음점.색brown  { background:var(--갈색); }
.묶음점.색blue   { background:var(--파랑); }
.묶음점.색green  { background:var(--진초록); }
.묶음점.색orange { background:var(--주황); }
.묶음점.색purple { background:var(--보라); }
.묶음점.색gold   { background:var(--금색); }
.묶음점.색gray   { background:var(--아주흐린글); }
.묶음글   { flex:1; }
.묶음수   { font-size:10px; color:var(--옆메뉴흐린글); font-family:var(--숫자글꼴); }
.묶음화살 { font-size:10px; color:var(--옆메뉴흐린글); width:14px; text-align:center;
            opacity:.7; }

/* ── 묶음 내용 ────────────────────────────────────────────────── */
.묶음내용 { transition:max-height var(--전환느린); overflow:hidden; }
.묶음내용.숨김 { display:none; }
/* ── 메뉴 항목 (specificity를 .옆메뉴 a 보다 올립니다) ────────── */
.옆메뉴 .메뉴항목 { display:flex; align-items:center; gap:var(--사이2);
            padding:var(--사이2) var(--사이3) var(--사이2) 32px;
            font-size:var(--작게); position:relative;
            text-decoration:none; color:var(--옆메뉴흐린글); border-radius:0;
            transition:background var(--전환빠른), color var(--전환빠른);
            cursor:pointer; }
.옆메뉴 .메뉴항목:hover:not(.잠김) { background:rgba(255,255,255,.06);
                                     color:var(--옆메뉴글); }
/* 켠 칸 — V7처럼 **왼쪽에 3px 막대**. 바탕을 통째로 칠하지 않습니다 */
.옆메뉴 .메뉴항목.지금 { background:var(--옆메뉴켠칸); color:var(--옆메뉴글);
                         font-weight:600; }
.옆메뉴 .메뉴항목.지금::before { content:''; position:absolute; left:0;
            top:5px; bottom:5px; width:3px; background:var(--주색);
            border-radius:0 2px 2px 0; }
.옆메뉴 .메뉴항목.잠김 { color:rgba(255,255,255,.35); cursor:not-allowed; }
.옆메뉴 .메뉴항목.흐림 { color:rgba(255,255,255,.45); }
.옆메뉴 .메뉴항목.흐림 .메뉴상태 { opacity:.5; }
.메뉴글   { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.메뉴상태 { font-size:11px; flex-shrink:0; }

/* ── 시계 위젯 (V7 `sb-widget` 참고) ──────────────────────────── */
.메뉴시계 { margin-top:auto; padding:var(--사이4);
            border-top:1px solid rgba(255,255,255,.10);
            background:rgba(0,0,0,.20); text-align:center; }
.시계숫자 { font-size:32px; font-family:var(--숫자글꼴); line-height:1;
            font-variant-numeric:tabular-nums; font-weight:700;
            letter-spacing:-.02em; color:var(--옆메뉴글); }
.시계날짜 { font-size:var(--아주작게); color:var(--옆메뉴흐린글);
            margin-top:var(--사이1); }

/* ── 진행 표시 (머리띠 안) ────────────────────────────────────── */
.진행표 { font-size:var(--작게); color:var(--초록);
          font-family:var(--숫자글꼴); padding:3px 10px;
          background:var(--초록연함); border-radius:var(--알약);
          white-space:nowrap; }

/* ── 메뉴 토글 단추 (모바일) ──────────────────────────────────── */
.메뉴단추 { display:none; background:var(--칸); border:1px solid var(--줄);
            border-radius:var(--알약); width:38px; height:38px;
            font-size:var(--크게); cursor:pointer; color:var(--글);
            box-shadow:var(--그림자); }
/* ── 사이드바 — V7처럼 **짙은 올리브** ────────────────────────── */
.옆메뉴 {
  width: var(--옆메뉴폭); flex: 0 0 var(--옆메뉴폭);
  position: sticky; top: 57px; align-self: flex-start;
  background: var(--옆메뉴바탕); color: var(--옆메뉴글);
  min-height: calc(100vh - 57px); max-height: calc(100vh - 57px);
  overflow-y: auto; border-right: 0;
  display: flex; flex-direction: column; padding: 0;
  box-shadow: var(--뜬그림자); z-index: 2;
}
.옆메뉴::-webkit-scrollbar { width:6px; }
.옆메뉴::-webkit-scrollbar-thumb { background:rgba(255,255,255,.10);
                                   border-radius:3px; }

/* ── 모바일 대응 v2 ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .메뉴단추 { display: block; }
  .몸통 { display: block; }
  .옆메뉴 { width: auto; position: fixed; top: 53px; left: -280px;
            z-index: 50; min-height: calc(100vh - 53px); width: 260px;
            box-shadow: var(--뜬그림자); transition: left var(--전환느린); }
  .옆메뉴.열림 { left: 0; }
  .본문 { padding: var(--사이4); }
}

/* ── 대시보드 전용 ────────────────────────────────────────────── */
.빠른실행 { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
            gap:var(--사이3); }
.빠른단추 { display:flex; align-items:center; gap:var(--사이2);
            padding:var(--사이3) var(--사이4); background:var(--칸);
            border:1px solid var(--줄); border-radius:var(--많이둥글게);
            text-decoration:none; color:var(--글); font-weight:600;
            box-shadow:var(--그림자); transition:all var(--전환); }
.빠른단추:hover { border-color:var(--주색); background:var(--주색연함);
                  transform:translateY(-2px); box-shadow:var(--많이뜬그림자); }
.빠른단추 .아이콘 { font-size:var(--아주크게); }
.모듈표 { width:100%; border-collapse:collapse; font-size:var(--보통); }
.모듈표 th,.모듈표 td { padding:8px var(--사이3); border-bottom:1px solid var(--줄);
                        text-align:left; }
.모듈표 th { font-size:var(--작게); color:var(--흐린글); font-weight:600; }
.모듈표 .수 { text-align:right; font-variant-numeric:tabular-nums; }
/* ── 큰 탭 · 작은 탭 (2026-08-19 · 크리스 답 D53 「가」 · D54 「다」) ────────
   큰 탭 다섯 = 생산 · 매입 · 출고 · 재고 · 회계   (+ 오른쪽 끝 ⚙ 설정)
   작은 탭 = 그 큰 탭 안의 화면들.
   ⛔ 화면 주소(URL)는 하나도 바뀌지 않았습니다 — 보여 주는 방식만 바꿉니다 */
.머리띠 { flex-direction: column; align-items: stretch;
          gap: var(--사이2); padding: var(--사이2) var(--사이5) 0; }
.머리줄 { display: flex; align-items: center; gap: var(--사이4); }
.집단추 { display:inline-flex; align-items:center; justify-content:center;
          width:32px; height:32px; flex-shrink:0; border-radius:var(--둥글게);
          background:var(--옆메뉴바탕); color:var(--옆메뉴글);
          font-family:var(--제목글꼴); font-weight:700; text-decoration:none; }
.집단추:hover { background:var(--주색); color:var(--옆메뉴글); }

.큰탭띠 { display:flex; align-items:flex-end; gap:var(--사이1); overflow-x:auto; }
.큰탭 { display:flex; align-items:center; gap:var(--사이2);
        padding:var(--사이2) var(--사이4); white-space:nowrap;
        text-decoration:none; color:var(--흐린글);
        border-radius:var(--둥글게) var(--둥글게) 0 0;
        font-size:var(--조금크게); }
.큰탭:hover { background:var(--주색연함); color:var(--글); }
.큰탭.켠큰탭 { background:var(--주색); color:#fff; font-weight:700; }
.큰탭.켠큰탭:hover { background:var(--주색진함); color:#fff; }
.큰탭.오른끝 { margin-left:auto; }

.본문칸 { flex:1; min-width:0; }
.작은탭띠 { display:flex; align-items:center; gap:var(--사이1);
            padding:var(--사이2) var(--사이5); overflow-x:auto;
            background:var(--칸); border-bottom:1px solid var(--줄);
            position:sticky; top:var(--머리띠높이); z-index:20; }
.작은탭 { display:inline-flex; align-items:center; gap:var(--사이1);
          padding:var(--사이1) var(--사이3); white-space:nowrap;
          border-radius:var(--알약); text-decoration:none;
          font-size:var(--작게); color:var(--글); }
.작은탭:hover { background:var(--주색연함); }
.작은탭.흐림 { color:var(--아주흐린글); }
.작은탭.켠작은탭 { background:var(--보조색); color:#fff; font-weight:600; }
.작은탭.켠작은탭:hover { background:var(--보조색); color:#fff; }
.작은탭상태 { font-size:11px; }
.작은탭없음 { font-size:var(--작게); color:var(--아주흐린글); }

/* 옆 메뉴를 새 머리띠 높이에 붙입니다 (높이는 shell.js 가 재서 넣습니다)
   ⚠ 2026-08-19 GPT 독립검수 ① — 높이 제한과 세로 스크롤을 **여기서 같이** 적습니다.
      앞 규칙의 overflow-y 에 기대면, 앞을 고치는 사람이 이것을 모르고 깹니다.
      묶음을 다 펼치면 메뉴가 화면 밖으로 내려가 아래 칸을 못 누르게 됩니다 */
.옆메뉴 { top:var(--머리띠높이);
          min-height:calc(100vh - var(--머리띠높이));
          max-height:calc(100vh - var(--머리띠높이));
          overflow-y:auto; overscroll-behavior:contain; }

@media (max-width: 900px) {
  .머리띠 { padding:var(--사이2) var(--사이3) 0; }
  .머리줄 .제목 { font-size:var(--크게); }
  .큰탭 { padding:var(--사이2) var(--사이3); font-size:var(--작게); }
  .작은탭띠 { padding:var(--사이2) var(--사이3); position:static; }
  .옆메뉴 { top:auto; min-height:0; max-height:none; }
}

/* ── 플로팅 빠른 입력 (⊕) — 2026-08-19 · D52 「빠른 입력은 별개 플로팅 단추」 ──
   ⛔ 이 단추로 담으면 **작성중**으로만 남습니다. 확정은 사무 담당자 몫입니다(D56)
   ⚠ 이름을 `빠른…` 이 아니라 `플로팅…` 으로 짓습니다 —
      대시보드 화면이 이미 `.빠른단추` 를 쓰고 있어 겹치면 그 화면이 망가집니다(실측) */
.플로팅단추 { position:fixed; right:24px; bottom:24px; z-index:40;
              width:56px; height:56px; border-radius:var(--알약); border:0;
              background:var(--주색); color:#fff; cursor:pointer;
              box-shadow:var(--많이뜬그림자); display:flex;
              align-items:center; justify-content:center; }
.플로팅단추:hover { background:var(--주색진함); color:#fff; }
.플로팅더하기 { font-size:var(--아주크게); line-height:1; font-weight:700; }

.플로팅덮개 { position:fixed; inset:0; z-index:50; display:none;
              background:rgba(0,0,0,.35); align-items:flex-end;
              justify-content:center; }
.플로팅덮개.보임 { display:flex; }
.플로팅창 { background:var(--칸); width:min(720px,100%);
            max-height:88vh; overflow-y:auto;
            border-radius:var(--많이둥글게) var(--많이둥글게) 0 0;
            padding:var(--사이5); box-shadow:var(--많이뜬그림자); }
.플로팅머리 { display:flex; align-items:center; gap:var(--사이3);
              font-size:var(--크게); font-family:var(--제목글꼴); }
.플로팅닫기 { margin-left:auto; border:0; background:transparent;
              font-size:var(--크게); cursor:pointer; color:var(--흐린글); }
.플로팅설명 { font-size:var(--작게); color:var(--흐린글);
              background:var(--노랑연함); border:1px solid var(--노랑테);
              border-radius:var(--둥글게); padding:var(--사이3);
              margin:var(--사이3) 0; }
#플로팅몸 { display:grid; gap:var(--사이3);
            grid-template-columns:repeat(2,minmax(0,1fr)); }
.플로팅칸 { display:flex; flex-direction:column; gap:var(--사이1); min-width:0; }
.플로팅칸.넓게 { grid-column:1 / -1; }
.플로팅칸 label { font-size:var(--작게); color:var(--흐린글); }
.플로팅칸 input, .플로팅칸 select { width:100%; box-sizing:border-box;
            padding:var(--사이2) var(--사이3); font-size:var(--조금크게);
            border:1px solid var(--줄); border-radius:var(--둥글게);
            background:var(--칸); color:var(--글); font-family:var(--글꼴); }
.플로팅안내 { grid-column:1 / -1; font-size:var(--작게); color:var(--흐린글);
              padding:var(--사이3) 0; }
.플로팅쪽지감 { margin-top:var(--사이3); }
.플로팅쪽지감 .쪽지 { white-space:pre-line; }
.플로팅발 { display:flex; justify-content:flex-end; gap:var(--사이2);
            margin-top:var(--사이4); }

@media (max-width: 900px) {
  .플로팅단추 { right:16px; bottom:16px; width:52px; height:52px; }
  #플로팅몸 { grid-template-columns:1fr; }
  .플로팅창 { padding:var(--사이4); }
}

/* ── 되돌림 칸 (T11) — 2026-08-19 · 매입 원장·거래명세가 같이 씁니다 ──────
   되돌림은 취소할 수 없습니다. 그래서 설명을 노란 칸으로 눈에 띄게 둡니다 */
.되돌림칸 { padding:var(--사이3) var(--사이4);
            border-bottom:1px solid var(--줄); }
.되돌림설명 { font-size:var(--작게); color:var(--흐린글);
              background:var(--노랑연함); border:1px solid var(--노랑테);
              border-radius:var(--둥글게); padding:var(--사이3); }
.되돌림줄 { display:flex; align-items:center; gap:var(--사이2);
            flex-wrap:wrap; margin-top:var(--사이3); }
.되돌림줄 label { font-size:var(--작게); color:var(--흐린글); }
.되돌림줄 select, .되돌림줄 input { padding:var(--사이2) var(--사이3);
            border:1px solid var(--줄); border-radius:var(--둥글게);
            font-family:var(--글꼴); font-size:var(--보통);
            background:var(--칸); color:var(--글); }
#되돌림쪽지 { white-space:pre-line; }
/* ⚠ 플로팅 ⊕ 가 오른쪽 아래 단추를 가리지 않게 본문 아래에 여백을 둡니다
   (2026-08-19 실측 — 되돌리기 단추가 ⊕ 뒤에 숨었습니다) */
.본문 { padding-bottom:calc(var(--사이8) + var(--사이6)); }

/* 자물쇠가 걸려 있는 동안은 뒤 화면이 안 움직입니다 (2026-08-25 · T11) */
html.자물쇠걸림, html.자물쇠걸림 body { overflow: hidden; }