@charset "UTF-8";
/* ⚠️ 분기 눈금 — 로그인도 따로 컴파일된다 */
/* =====================================================
 * 분기 — 이 제품의 반응형 눈금 (2026-09-10 확정)
 *
 * ⚠️ **숫자를 여기서만 정한다.** 예전에 _shorts.scss 가 1360 · 900 · 640 을,
 *    _toast.scss 가 768 을 제각기 적고 있었다. 한 곳을 고쳐도 나머지가
 *    옛 눈금에 남아, 같은 폭에서 화면마다 다르게 접힌다.
 *
 * ─ 눈금을 이렇게 고른 근거 (전 화면을 재서 나온 값이다)
 *
 *   본문이 버티는 바닥        900px 안팎 (표 여덟 · 검수 · 계정 관리)
 *   LNB 가 늘 떼어 가는 폭    250 + 좌우 여백 40 = 290px
 *
 *   그래서 1200px 이 갈림길이다 —
 *     1200px  LNB 켜짐 → 본문 910   바닥에 딱 닿는다
 *     1199px  LNB 서랍 → 본문 1159  접는 순간 249px 를 되찾는다
 *   1200 아래에서 LNB 를 켜 두면 본문이 바닥을 뚫는다. 그 자리에서 서랍으로
 *   바꾸면 오히려 넓어진다. **여기가 햄버거가 서는 자리다.**
 *
 *   ⚠️ 노트북(1512 · 1440 · 1366 · 1280)에서는 LNB 가 그대로 보인다.
 *      흔한 폭에서 메뉴를 감추지 않는 것이 이 선의 요점이다.
 *
 * ─ 넷으로 나눈 까닭
 *   XL(1690 이상)을 따로 두면 **지금 모습이 조금도 안 바뀐다.**
 *   반응형을 넣다가 멀쩡한 것을 건드리는 사고를 막는 자리다.
 * ===================================================== */
/*
  ⚠️ **1400 이 아니라 1690 이다.** 처음에 1400 으로 적었다가 재서 잡았다 —
     `.section` 이 1400px 을 담으려면 뷰포트가 그만큼이면 안 되고 **LNB 250 +
     여백 40 을 더한 1690px** 이어야 한다. 1400px 로 두었더니 1400px 창에서
     290px 이 넘쳤다. 고치려던 것을 그 폭에서 그대로 남긴 셈이었다.
*/
/* 이상 — 본문이 1400 을 담는다. 지금 모습 그대로 */
/* 미만 — LNB 가 덮개 서랍이 된다 (햄버거) */
/* 미만 — 본문에서 **두 칸이 뜻을 잃는다.** 나란히 두었을 때
   좁은 쪽이 제 일을 못 하는 폭이다 — 대시보드의 「차트 · 최근
   발행 게시물」 줄이 여기서 위아래로 쌓인다.
   ⚠️ 재서 나온 값이다: 2fr : 1fr 이라 목록 칸은 (헤더폭-20)/3 이고,
      834px 에서 259px · 768px 에서 237px 이 됐다. 그 칸에는
      로고 · 날짜 · 제목 · 노출 · 좋아요 다섯이 들어간다. */
/* 미만 — 한 단. 헤더의 「내 것」 묶음이 서랍으로 내려간다 */
/* ---------- 표 전용 눈금 둘 ----------
   ⚠️ **표만 이 아래가 더 필요하다.** 위의 넷은 「칸이 몇 줄로 서나」를 정하는
      눈금인데, 표는 그 아래에서도 **열을 하나씩 접어야** 한다.
      $bp-m(900) 부터 시작해 네 칸으로 접는다 — 900 · 768 · 600 · 480.

   ⚠️ 왜 768 부터인가. `min-width` 를 실측값으로 바로잡으면 가장 큰 표가
      725px(관리자 접속 이력)이다. 768px 뷰포트에서 본문은 728px 이라
      **거기까지는 아무것도 안 접어도 들어간다.** 그 아래부터가 진짜다.

   ⚠️ 예전 견본에는 1024 · 900 · 768 · 600 넷이 적혀 있었다. `min-width: 1300px`
      시절에 잡은 값이라 **1024 칸은 허깨비였다** — 멀쩡히 들어가는 열을 그
      폭에서 감추고 있었다. 그 하나만 지운다.
   ⚠️ **처음에 900 칸까지 지웠다가 되돌렸다.** 「768 부터 시작하면 된다」고
      적었는데, 계정 관리(9열)를 재 보니 **834px 에서 5px · 768px 에서 13px**
      넘쳤다. 열이 아홉이고 값이 한 줄로 서면 900 아래에서 이미 자리가 없다.
      재기 전에 칸을 지운 것이 틀렸다.
   ---------------------------------------- */
/* 미만 — 표에서 두 번째 곁열이 사라진다 (tc-p2) */
/* ⚠️ 900 칸은 $bp-m 을 그대로 쓴다 (tc-p4) — 본문이 두 칸을
      잃는 폭과 표가 곁열을 잃는 폭이 같은 자리다 */
/* 미만 — 표가 「언제 · 무엇 · 상태」 셋만 남는다 (tc-p1) */
/* ---------- 헤더 전용 눈금 둘 ----------
   ⚠️ **헤더는 뷰포트가 아니라 「제 폭」이 문제다.** LNB 가 켜져 있으면 290px 을
      먼저 떼이므로, 같은 뷰포트에서도 헤더에 남는 자리가 다르다.
        LNB 켜짐(≥1200)   헤더 = 뷰포트 - 290
        LNB 서랍(<1200)   헤더 = 뷰포트 -  40
      그래서 위의 셋과 눈금이 겹치지 않는다. 재서 나온 값은 이렇다.

        햄버거                       36
        빵부스러기                  236 ~ 273  (화면 이름에 따라)
        제목                         73 ~ 128
        기관 탭                     276
        「내 것」 다섯               496
        사이(20 × 2)                 40

        넷 다 서려면              1179   ← 기관 탭까지
        탭을 빼면                  983
        빵부스러기까지 빼면         645

   ⚠️ **이 숫자는 재서 나온 것이다.** 처음에는 눈대중으로 1030 이라고 적고
      눈금을 1400 으로 잡았는데, **1440px 에서 여전히 깨졌다** — 제목이
      「작업 …」으로 잘리고 빵부스러기가 「시스템 / 관리」로 두 줄이 됐다.
      실제로는 1179px 이 필요했다.

   ⚠️ 눈금을 이 둘로 고른 셈. 처음에 **탭도 768 에서 내렸다가** 1024px 에서
      헤더가 깨져 잡았다 — 제목이 「작…」으로 잘리고 빵부스러기가
      「시스템 / 관리」로, 단추가 「메뉴 / 구조도」로 두 줄이 됐다.
   ---------------------------------------- */
/* 기관 탭이 헤더에 설 수 있는 최소 뷰포트.
   여기는 LNB 가 켜진 구간이라 헤더 = 뷰포트 - 290 이고, 탭까지 서려면 1179 다.
     1179 + 290 = 1469  ← 계산상 바닥
   1500 으로 둔 것은 그 여유 31px 이 **화면 이름 한 글자**도 못 되기 때문이다. */
/* 빵부스러기를 접는 폭. 여기는 LNB 가 이미 서랍이라 헤더 = 뷰포트 - 40.
   ⚠️ **여기 위에서는 하드 눈금으로 지키지 않는다.** 빵부스러기는 줄바꿈 없이
      말줄임으로 줄어들게 해 두었다(_header.scss) — 「홈 › 시스템 관리 › …」가
      한 마디씩 두 줄로 꺾이는 것을 막는 것이 먼저다. 900 은 **줄어들어도
      읽을 것이 남지 않는 지점**이다(헤더 860, 빵을 뺀 나머지가 645).
   ⚠️ **LNB 가 켜져 있을 때 접지 않는다.** 그때는 왼쪽 메뉴의 강조가 같은 말을
      하지만, 서랍이 되면 **어디에 있는지 말하는 것이 이것뿐**이다. */
/*
  쓰는 법 — `@include under($bp-l) { ... }`
  ⚠️ **max-width 는 1px 을 뺀다.** 빼지 않으면 1200px 에서 두 규칙이 함께
     걸려, 그 폭에서만 LNB 가 켜진 채로 본문이 전폭이 되는 어긋난 그림이 뜬다.
  ⚠️ 0.02px 이 아니라 1px 이다. 이 제품은 정수 폭만 다룬다.
*/
/* 사이 — [$a, $b) */
#wrapper {
  display: block;
}

.login-wrap {
  max-width: 500px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}
.login-wrap img {
  width: 400px;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.login-wrap .fluid {
  width: 100%;
}
.login-wrap .btn-login {
  width: 100%;
}

/*
  틀렸다는 알림.
  ⚠️ **문구는 하나뿐이다**(「아이디 또는 비밀번호가 올바르지 않습니다」).
     진짜 사유를 나누어 적으면 그것만으로 아이디 목록을 만들 수 있다.
     진짜 사유는 관리자 접속 기록에만 남는다.
*/
.login-error {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(var(--color-red-rgb), 0.08);
  line-height: 1.5;
}

/* 로그인 칸 아래 안내 — 잠금 횟수와 문의처 */
.login-help {
  width: 100%;
}
.login-help .field-help + .field-help {
  margin-top: 6px;
}