/* ─────────────────────────────────────────────────────────────
   대흥아이앤씨 사내 시스템 — 디자인 층 (2026-08-14)

   ## 왜 파일 하나인가

   화면이 마흔 장이 넘는다. 하나씩 예쁘게 고치면 서로 안 맞고, 새 화면을
   만들 때마다 또 손대야 한다. **부트스트랩 위에 얇게 한 겹 덮어서**
   모든 화면이 한꺼번에 같은 얼굴이 되게 한다.

   화면(html)은 부트스트랩 클래스를 그대로 쓴다. 여기만 고치면 전체가 바뀐다.

   ## 지키는 것

   - **색은 아래 토큰만 쓴다.** 화면에 색을 직접 적지 않는다
   - 부트스트랩 기본 파랑(#0d6efd)을 쓰지 않는다 — 회사 남색으로 통일
   - 상자를 같은 굵기로 늘어놓지 않는다. 그림자와 간격으로 층을 만든다
   ───────────────────────────────────────────────────────────── */

:root {
  /* 회사 남색 — 레일에 쓰던 #1f3a5f 에서 뽑았다 */
  --ink-900: #16233a;
  --ink-800: #1f3a5f;
  --ink-700: #2b4d78;
  --ink-600: #3a6296;

  --brand:      #2b5f9e;
  --brand-dark: #1f4b80;
  --brand-soft: #eaf1f9;

  --text:      #1c2733;
  --text-2:    #56616e;
  --text-3:    #8a94a0;

  --line:      #e4e8ee;
  --line-2:    #d3dae3;
  --surface:   #ffffff;
  --canvas:    #f4f6f9;
  --hover:     #f0f4f9;

  --ok:    #1c7a4a;  --ok-bg:   #e9f6ef;
  --warn:  #8a5a00;  --warn-bg: #fdf3e0;
  --danger:#b3261e;  --danger-bg:#fdecea;

  --r:   8px;
  --r-lg: 12px;
  --shadow:    0 1px 2px rgba(22, 35, 58, .05);
  --shadow-md: 0 2px 10px rgba(22, 35, 58, .07);
}

/* ── 바탕 · 글자 ─────────────────────────────────────────── */

body {
  /* 윈도우에 늘 있는 것만 쓴다. 사내망이라 웹폰트를 받아올 수 없다 */
  font-family: "Segoe UI Variable Text", "Segoe UI", "Malgun Gothic",
               -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--canvas);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .fw-bold, b, strong { letter-spacing: -0.015em; }
.muted, .text-secondary { color: var(--text-3) !important; }
a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

/* ── 아이콘 레일 ─────────────────────────────────────────── */

.rail {
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  padding-top: 14px;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}
.rail a {
  width: 48px; height: 50px; margin-bottom: 2px; border-radius: 10px;
  color: #b9c8db; font-size: 10.5px; gap: 3px;
  transition: background .12s, color .12s;
}
.rail a .ico { font-size: 0; line-height: 0; }        /* 이모지를 지운다 */
.rail a .ico svg { width: 21px; height: 21px; stroke-width: 1.6; }
.rail a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.rail a.active {
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600;
  box-shadow: inset 2px 0 0 #7fb0e8;
}
.rail-bottom::before { background: rgba(255, 255, 255, .14); }
.me-badge { background: var(--ink-600); font-weight: 600; }

/* 레일 맨 위의 회사 로고.
   **로고가 어두운 색이라 남색 바탕에 그냥 얹으면 묻힌다.** 흰 판을 깔아준다.
   레일의 `a` 규칙(세로 배치·작은 글씨)이 여기까지 내려오지 않게 되돌린다. */
.rail-logo {
  width: 46px; height: 46px; margin: 0 0 14px; padding: 7px;
  border-radius: 13px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform .12s, box-shadow .12s;
}
.rail-logo:hover { background: #fff; transform: translateY(-1px);
                   box-shadow: 0 3px 8px rgba(0, 0, 0, .26); }
.rail-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── 사이드바 ────────────────────────────────────────────── */

.side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 16px 10px;
}
.side h6 {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  letter-spacing: .06em; margin: 18px 8px 6px; text-transform: none;
}
.side h6:first-child { margin-top: 2px; }
.side a {
  padding: 7px 10px; border-radius: 7px; color: var(--text-2);
  font-size: 13.5px; transition: background .1s, color .1s;
}
.side a:hover { background: var(--hover); color: var(--text); }
.side a.on {
  background: var(--brand-soft); color: var(--brand-dark); font-weight: 600;
}

/* ── 윗줄 ────────────────────────────────────────────────── */

.main { padding: 22px 28px 72px; }
.topbar {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px; margin-bottom: 20px;
}
.topbar h1 { font-size: 20px; font-weight: 700; color: var(--text); }

/* ── 상자 ────────────────────────────────────────────────── */

.bg-white.border.rounded,
.border.rounded.bg-white {
  border-color: var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow);
  background: var(--surface) !important;
}
.bg-light-subtle { background: var(--canvas) !important; }

/* ── 단추 ────────────────────────────────────────────────── */

.btn {
  border-radius: 7px; font-weight: 600; font-size: 13.5px;
  padding: .42rem .9rem; letter-spacing: -.01em;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn-sm { font-size: 12.5px; padding: .3rem .7rem; border-radius: 6px; }
.btn:focus, .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(43, 95, 158, .18);
}

.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn-primary:hover, .btn-primary:active {
  background: var(--brand-dark) !important; border-color: var(--brand-dark) !important;
}

.btn-outline-secondary {
  color: var(--text-2); border-color: var(--line-2); background: var(--surface);
}
.btn-outline-secondary:hover {
  background: var(--hover); border-color: var(--line-2); color: var(--text);
}

.btn-outline-primary { color: var(--brand); border-color: #bcd3ec; }
.btn-outline-primary:hover { background: var(--brand-soft); color: var(--brand-dark);
                             border-color: #bcd3ec; }

.btn-outline-danger { color: var(--danger); border-color: #f0c3bf; }
.btn-outline-danger:hover { background: var(--danger-bg); color: var(--danger);
                            border-color: #f0c3bf; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #8f1e17; border-color: #8f1e17; }

.btn-link { font-weight: 600; text-decoration: none; }

/* ── 입력 칸 ─────────────────────────────────────────────── */

.form-control, .form-select {
  border-color: var(--line-2); border-radius: 7px;
  font-size: 13.5px; padding: .45rem .7rem; color: var(--text);
}
.form-control-sm, .form-select-sm { font-size: 12.5px; padding: .3rem .55rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 95, 158, .13);
}
.form-control::placeholder { color: #b3bcc7; }
.form-control:disabled, .form-control[disabled] {
  background: var(--canvas); color: var(--text-2);
}
.form-label { font-weight: 600; color: var(--text-2); margin-bottom: .3rem; }
.form-text { color: var(--text-3); font-size: 12px; }
.form-check-input:checked {
  background-color: var(--brand); border-color: var(--brand);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(43, 95, 158, .13);
                          border-color: var(--brand); }
.form-check-label { font-size: 13.5px; }

/* ── 표 ──────────────────────────────────────────────────── */

.table { color: var(--text); }
.table > :not(caption) > * > * { padding: .6rem .7rem; }
.table thead th, .table > thead > tr > th {
  font-size: 11.5px; font-weight: 700; color: var(--text-3);
  letter-spacing: .03em; border-bottom: 1px solid var(--line-2);
  background: transparent;
}
.table-light, .table > thead.table-light > tr > th { background: transparent !important; }
.table > tbody > tr > td { border-bottom: 1px solid var(--line); }
.table-sm > :not(caption) > * > * { padding: .42rem .6rem; }
.table tfoot th { border-top: 1px solid var(--line-2); }

/* ── 알림 상자 ───────────────────────────────────────────── */

.alert {
  border-radius: var(--r); border: 1px solid transparent;
  font-size: 13px; padding: .7rem .85rem;
}
.alert-light { background: var(--canvas); border-color: var(--line); color: var(--text-2); }
.alert-warning { background: var(--warn-bg); border-color: #f0dcb4; color: var(--warn); }
.alert-danger  { background: var(--danger-bg); border-color: #f3c9c5; color: var(--danger); }
.alert-success { background: var(--ok-bg); border-color: #c3e6d3; color: var(--ok); }
.alert-secondary { background: var(--canvas); border-color: var(--line); color: var(--text-2); }

/* ── 배지 ────────────────────────────────────────────────── */

.badge {
  font-weight: 600; font-size: 11px; padding: .28em .6em;
  border-radius: 20px; letter-spacing: 0;
}

/* ── 탭 ──────────────────────────────────────────────────── */

.nav-tabs { border-bottom: 1px solid var(--line-2); gap: 2px; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--text-2); font-weight: 600; font-size: 13.5px;
  padding: .5rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--text); background: var(--hover); }
.nav-tabs .nav-link.active {
  color: var(--brand-dark); border-bottom-color: var(--brand);
  background: transparent;
}

/* ── 끌어다 놓기 줄 ──────────────────────────────────────── */

.sort-row { border-bottom: 1px solid var(--line) !important; }
.sort-row:last-child { border-bottom: 0 !important; }
.sort-row:hover { background: var(--hover); }
.sort-row .sort-grip { color: #c8d0da; }
.sort-row:hover .sort-grip { color: var(--text-3); }
.sort-row.drop-above { box-shadow: inset 0 2px 0 0 var(--brand); }
.sort-row.drop-below { box-shadow: inset 0 -2px 0 0 var(--brand); }

/* ── 알림 배지 · 기타 ────────────────────────────────────── */

.rail-badge { background: #d8453c; box-shadow: 0 0 0 2px var(--ink-800); }
.todo-badge { background: var(--brand-soft); color: var(--brand-dark);
              border-radius: 20px; font-weight: 600; }
code { background: var(--canvas); color: var(--brand-dark);
       padding: .1em .4em; border-radius: 4px; font-size: 12.5px; }
hr { border-color: var(--line); opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   휴대폰 · 태블릿 (2026-08-19)

   ★ **모바일은 처음부터 요청된 것이다** (2026-08-11).
     결재 승인 · 이동 중 내 업무 보기 · 문서 열람에 쓴다
     (`docs/기술스택-종합비교.md` 5장 「휴대전화·태블릿 — 요청하신 항목」).

   그런데 `@media` 가 한 줄도 없어서 **폰에서 본문 폭이 71px** 이었다.
   레일 64 + 사이드바 240 = 304 를 늘 밀어내고 있었기 때문이다.

   ★ **여기 있어야 한다.** `base.html` 의 <style> 에 적었더니 이 파일이
     나중에 실려서 통째로 덮어씌워졌다 (사이드바 안쪽 여백이 안 먹었다).
     **색·단추·입력칸·표를 이 파일 한 곳에서 정한다**는 규칙과도 맞다.

   ★ **넓은 화면은 한 픽셀도 안 바꾼다.** 아래 `@media` 안에서만 손댄다.
   ══════════════════════════════════════════════════════════════════ */

/* 좁을 때만 나오는 위쪽 막대. 넓으면 숨는다 */
.mobile-bar { display: none; }

@media (max-width: 900px) {
  /* 레일과 사이드바를 **서랍**으로 만든다. 평소엔 화면 밖에 있다 */
  .rail, .side { transform: translateX(-110%); transition: transform .18s ease-out; }
  .rail { z-index: 42; }
  .side {
    left: 0; width: min(84vw, 300px); z-index: 41;
    border-right: 1px solid var(--line);
    /* 레일이 서랍 왼쪽에 겹쳐 서므로 그만큼 안쪽으로 밀어준다.
       안 밀면 **메뉴 글자가 레일 뒤로 숨는다** (2026-08-19 에 겪었다) */
    padding-left: calc(var(--rail) + 12px);
  }

  body.side-open .rail,
  body.side-open .side { transform: none; }
  body.side-open { overflow: hidden; }          /* 뒤가 같이 안 밀리게 */

  /* 뒤를 덮는 어두운 판 — 눌러서 닫는다 */
  .side-veil {
    position: fixed; inset: 0; background: rgba(20, 30, 45, .42);
    z-index: 40; opacity: 0; pointer-events: none; transition: opacity .18s;
  }
  body.side-open .side-veil { opacity: 1; pointer-events: auto; }

  /* 본문이 화면을 다 쓴다 */
  .main { margin-left: 0; padding: 12px 14px 72px; }

  .mobile-bar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 30;
    background: var(--brand-dark, #1f3a5f); color: #fff; padding: 9px 12px;
    margin: -12px -14px 12px;                   /* .main 안쪽 여백을 밀어낸다 */
  }
  .mobile-bar .grip {
    background: none; border: 0; color: #fff; font-size: 20px;
    line-height: 1; padding: 2px 6px; cursor: pointer;
  }
  .mobile-bar .who {
    font-weight: 700; font-size: 15px; color: #fff;
    text-decoration: none; flex-grow: 1;
  }
  .mobile-bar a { color: #cbd7e6; text-decoration: none; position: relative;
                  padding: 2px 6px; }
  .mobile-bar .rail-badge { top: -4px; right: -2px; }

  .topbar { padding-bottom: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .topbar h1 { font-size: 16px; }

  /* 표가 화면을 밀어내지 않게 **그 안에서만** 가로로 민다.
     화면 전체가 옆으로 밀리면 어디를 보고 있는지 알 수 없게 된다.

     ★ **최소 폭을 줘야 한다.** 부트스트랩 표는 `width:100%` 라서 감싸기만 하면
       옆으로 밀리는 대신 **칸이 짜부라진다** — 이름이 「문 / 상 / 현」 처럼
       한 글자씩 세로로 떨어진다 (2026-08-19 에 겪었다). */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* ★ 표는 두 갈래로 다룬다.
     **조밀한 표**(멤버별 현황 · 결재 내역)는 칸이 많고 값이 짧다 → 옆으로 민다.
     **목록 표**(게시판 · 할일)는 제목이 길다 → 밀지 말고 **덜 중요한 칸을 숨긴다**.
     한 가지로 하면 한쪽이 반드시 망가진다 — 최소 폭만 주면 게시판 제목이
     한 글자씩 세로로 떨어진다 (2026-08-19 에 겪었다). */
  .table-responsive > .table.table-wide { min-width: 520px; }
  .table-responsive > .table.table-wide th,
  .table-responsive > .table.table-wide td { white-space: nowrap; }

  .bg-white.border.rounded { padding: 14px !important; }
}

@media (max-width: 575px) {
  /* 폰에서는 덜 중요한 칸을 숨긴다. 화면마다 이 표시를 붙여둔다 */
  .hide-phone { display: none !important; }
}