@charset "utf-8";
/* ============================================================================
   layout.css: app-shell · 사이드바 · 상단바 · 콘텐츠 스크롤포트
   ============================================================================
   ── 스크롤 구조: **콘텐츠 영역만 스크롤한다** (ADR D-73 · 10_CSS.md §4.1 B안)

      상단바·사이드바가 스크롤 컨테이너 **밖**에 있으므로 sticky 를 쓸 필요조차 없다.
      구조적으로 고정되며, 표 헤더는 `top:0` 하나로 끝난다. **오프셋 손계산이 통째로 사라진다.**
      필터바·페이지네이션도 스크롤 밖에 둘 수 있어 "총 N건"이 항상 보인다.

   ── `min-inline-size:0` / `min-block-size:0` 3연발이 이 레이아웃의 전부다
      flex 아이템 기본값은 `min-width:auto`(주축 가로) / `min-height:auto`(세로)라
      **콘텐츠보다 작아지지 못한다.** 이걸 안 풀면
        ① 넓은 표가 본문을 밀어내 사이드바를 화면 밖으로 보내고
        ② 내부 `overflow:auto` 가 영영 발동하지 않는다.
      증상이 원인과 전혀 안 닮아서 디버깅에 반나절이 날아간다.
      필수 4곳: `.ie-main-wrap` · `.ie-main` · `.ie-nav` · `.ie-table-scroll`
   ============================================================================ */

/* ── 셸 ─────────────────────────────────────────────────────────────────── */
.ie-shell {
  display: flex;
  block-size: 100vh;
  block-size: 100dvh;              /* 지원 시 덮어씀 (Chrome 108+ / Safari 15.4+) */
  overflow: hidden;                /* ★ 가로 스크롤 페이지 유출 1차 차단 */
}

/* ── 사이드바 ───────────────────────────────────────────────────────────── */
.ie-sidebar {
  flex: 0 0 auto;
  inline-size: var(--ie-sb-w);                 /* 240px */
  display: flex;
  flex-direction: column;
  min-block-size: 0;                           /* ★ 없으면 내부 overflow 가 안 걸린다 */
  background: var(--ie-c-sb-bg);
  color: var(--ie-c-sb-text);
  z-index: var(--ie-z-sidebar);
  transition: inline-size var(--ie-dur-base) var(--ie-ease);
}
.ie-sb-collapsed .ie-sidebar { inline-size: var(--ie-sb-w-collapsed); }   /* 60px */

.ie-sidebar__brand {
  flex: 0 0 auto;
  block-size: var(--ie-topbar-h);              /* 56px, 상단바와 가로 정렬 */
  display: flex; align-items: center;
  padding-inline: var(--ie-sp-4);
  border-block-end: 1px solid var(--ie-c-sb-divider);
  overflow: hidden;                            /* 접힘 중 라벨 삐져나옴 방지 */
}
.ie-sidebar__home {
  display: flex; align-items: center; gap: var(--ie-sp-3);
  color: var(--ie-c-sb-text-active); text-decoration: none; min-inline-size: 0;
}
.ie-sidebar__home:hover { text-decoration: none; }
.ie-sidebar__mark {
  flex: 0 0 auto;
  inline-size: 28px; block-size: 28px; border-radius: var(--ie-r-md);
  background: var(--ie-brand-600); color: var(--ie-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--ie-fs-13); font-weight: var(--ie-fw-bold); letter-spacing: -0.02em;
}
.ie-sidebar__title {
  font-size: var(--ie-fs-14); font-weight: var(--ie-fw-semi);
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--ie-dur-fast) var(--ie-ease);
}

/* 메뉴 스크롤 영역: 여기만 스크롤한다. 브랜드·하단 토글은 고정 */
.ie-nav {
  flex: 1 1 auto;
  min-block-size: 0;                           /* ★ 필수 */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;                /* 사이드바 끝에서 본문이 따라 스크롤되는 것 차단 */
  scrollbar-gutter: stable;
  padding-block: var(--ie-sp-2);
}
.ie-nav__list { margin: 0; padding: 0; list-style: none; }
.ie-nav__group + .ie-nav__group { margin-block-start: 2px; }

/* 1단 항목: 높이 40px · 좌우 패딩 16px · 아이콘 20px · 간격 12px (08 §5.1) */
.ie-nav__top {
  position: relative;
  inline-size: 100%;
  block-size: 40px;
  display: flex; align-items: center; gap: var(--ie-sp-3);
  padding-inline: var(--ie-sp-4);
  background: none; border: 0; cursor: pointer;
  color: var(--ie-c-sb-text);
  font-family: inherit; font-size: var(--ie-fs-14); font-weight: var(--ie-fw-semi);
  text-align: start; text-decoration: none;
  transition: background-color var(--ie-dur-fast) var(--ie-ease);
}
.ie-nav__top:hover { background: var(--ie-c-sb-hover); color: var(--ie-c-sb-text-active); text-decoration: none; }
.ie-nav__icon { inline-size: 20px; block-size: 20px; color: var(--ie-c-sb-text-muted); }
.ie-nav__top:hover .ie-nav__icon { color: var(--ie-c-sb-text); }

.ie-nav__label { flex: 1 1 auto; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ie-nav__caret {
  flex: 0 0 auto; inline-size: 14px; block-size: 14px;
  color: var(--ie-c-sb-text-muted);
  transition: transform var(--ie-dur-fast) var(--ie-ease);
}
.ie-nav__group.is-open > .ie-nav__top .ie-nav__caret { transform: rotate(180deg); }

/* 2단: 높이 34px · 들여쓰기 44px (1단 아이콘 폭 + 간격과 정렬) */
.ie-nav__sub { margin: 0; padding: 0 0 var(--ie-sp-2); list-style: none; }
.ie-nav__link {
  position: relative;
  display: flex; align-items: center; gap: var(--ie-sp-2);
  block-size: 34px;
  padding-inline: var(--ie-sp-4) var(--ie-sp-4);
  padding-inline-start: 44px;
  color: var(--ie-c-sb-text-muted);
  font-size: var(--ie-fs-13); font-weight: var(--ie-fw-regular);
  text-decoration: none;
  transition: background-color var(--ie-dur-fast) var(--ie-ease);
}
/* 2단은 아이콘 대신 좌측 2px 세로선으로 그룹 소속을 표시한다 (08 §5.4) */
.ie-nav__sub::before { content: none; }
.ie-nav__link::before {
  content: ""; position: absolute; inset-inline-start: 27px; inset-block: 0;
  inline-size: 2px; background: var(--ie-c-sb-divider);
}
.ie-nav__link:hover { background: var(--ie-c-sb-hover); color: var(--ie-c-sb-text-active); text-decoration: none; }

/* ── 현재 위치 3중 신호 (08 §5.3) ─────────────────────────────────────────
   활성 배경(#0E4A4C)은 사이드바 배경 대비 1.63:1 로 **색 면만으로는 부족**하다.
     ① 좌측 3px 세로 바 #35B3AC (배경 대비 6.36:1, WCAG 1.4.11 비텍스트 3:1 충족)
     ② 글자 굵기 600 + 밝기 상승
     ③ aria-current="page" (마크업)
   ★ 접힘 상태에서도 좌측 바는 **절대 제거하지 않는다**. 유일한 위치 신호다. */
.ie-nav__top.is-active,
.ie-nav__link.is-current,
.ie-nav__top[aria-current="page"],
.ie-nav__link[aria-current="page"] {
  background: var(--ie-c-sb-active-bg);
  color: var(--ie-c-sb-text-active);
  font-weight: var(--ie-fw-semi);
  box-shadow: inset 3px 0 0 var(--ie-c-sb-active-bar);
}
.ie-nav__top.is-active .ie-nav__icon { color: var(--ie-c-sb-active-bar); }
.ie-nav__link.is-current::before { background: var(--ie-c-sb-active-bar); }

.ie-nav__empty {
  padding: var(--ie-sp-4);
  color: var(--ie-c-sb-text-muted);
  font-size: var(--ie-fs-13); line-height: var(--ie-lh-ui);
}

/* 사이드바 포커스 링: 어두운 배경 위 7.45:1 */
.ie-sidebar :focus-visible {
  outline: 2px solid var(--ie-c-focus-on-dark);
  outline-offset: -2px;
}

/* 하단 고정 토글 */
.ie-sidebar__foot {
  flex: 0 0 auto;
  border-block-start: 1px solid var(--ie-c-sb-divider);
}
.ie-sidebar__collapse {
  inline-size: 100%; block-size: 40px;
  display: flex; align-items: center; gap: var(--ie-sp-3);
  padding-inline: var(--ie-sp-4);
  background: none; border: 0; cursor: pointer;
  color: var(--ie-c-sb-text-muted);
  font-family: inherit; font-size: var(--ie-fs-13);
}
.ie-sidebar__collapse:hover { background: var(--ie-c-sb-hover); color: var(--ie-c-sb-text-active); }
.ie-sidebar__collapse-i { inline-size: 20px; block-size: 20px; transition: transform var(--ie-dur-base) var(--ie-ease); }

/* ── 접힘 상태 (60px): 아이콘만 중앙 정렬 ──────────────────────────────── */
.ie-sb-collapsed .ie-sidebar__title,
.ie-sb-collapsed .ie-nav__label,
.ie-sb-collapsed .ie-nav__caret {
  opacity: 0; inline-size: 0; overflow: hidden; pointer-events: none;
}
.ie-sb-collapsed .ie-sidebar__brand,
.ie-sb-collapsed .ie-nav__top,
.ie-sb-collapsed .ie-sidebar__collapse { padding-inline: 0; justify-content: center; }
.ie-sb-collapsed .ie-sidebar__home { gap: 0; justify-content: center; inline-size: 100%; }
.ie-sb-collapsed .ie-nav__sub { display: none; }
.ie-sb-collapsed .ie-sidebar__collapse-i { transform: rotate(180deg); }

/* ── 본문 래퍼 ──────────────────────────────────────────────────────────── */
.ie-main-wrap {
  flex: 1 1 auto;
  min-inline-size: 0;   /* ★ 가로 스크롤 사고의 90% 가 이 한 줄 누락이다.
                           빼면 넓은 표가 본문을 밀어내 사이드바가 화면 밖으로 나간다. */
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

/* ── 상단바: sticky 가 필요 없다. 스크롤 컨테이너 밖이라 구조적으로 고정 ── */
.ie-topbar {
  flex: 0 0 auto;
  block-size: var(--ie-topbar-h);
  display: flex; align-items: center; gap: var(--ie-sp-4);
  padding-inline: var(--ie-sp-4);
  background: var(--ie-c-surface-card);
  border-block-end: 1px solid var(--ie-c-border);
  z-index: var(--ie-z-topbar);
}
.ie-topbar__burger {
  display: none;
  inline-size: 36px; block-size: 36px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md);
  color: var(--ie-c-text-label); cursor: pointer;
}
.ie-topbar__burger:hover { background: var(--ie-c-surface-hover); }

.ie-crumb { flex: 0 1 auto; min-inline-size: 0; }
.ie-crumb ol { display: flex; align-items: center; gap: var(--ie-sp-2); margin: 0; padding: 0; list-style: none; }
.ie-crumb li { display: flex; align-items: center; gap: var(--ie-sp-2); font-size: var(--ie-fs-13); color: var(--ie-c-text-muted); white-space: nowrap; }
.ie-crumb li + li::before { content: "/"; color: var(--ie-c-border-strong); }
.ie-crumb a { color: var(--ie-c-text-muted); }
.ie-crumb [aria-current="page"] { color: var(--ie-c-text-body); font-weight: var(--ie-fw-semi); }

.ie-gsearch {
  flex: 1 1 auto; max-inline-size: 380px;
  display: flex; align-items: center; gap: var(--ie-sp-2);
  margin-inline-start: auto;
  block-size: var(--ie-control-h);
  padding-inline: var(--ie-sp-3);
  background: var(--ie-c-surface-page);
  border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md);
}
.ie-gsearch:focus-within { border-color: var(--ie-c-focus); background: var(--ie-white); }
.ie-gsearch__i { color: var(--ie-c-text-muted); }
.ie-gsearch__input {
  flex: 1 1 auto; min-inline-size: 0;
  border: 0; background: none; outline: none;
  font-family: inherit; font-size: var(--ie-fs-13); color: var(--ie-c-text-body);
}
.ie-gsearch__input::placeholder { color: var(--ie-c-text-placeholder); }

.ie-userbox { position: relative; flex: 0 0 auto; }
.ie-userbox__btn {
  display: flex; align-items: center; gap: var(--ie-sp-2);
  block-size: var(--ie-control-h); padding-inline: var(--ie-sp-3);
  background: none; border: 1px solid transparent; border-radius: var(--ie-r-md);
  color: var(--ie-c-text-body); font-family: inherit; font-size: var(--ie-fs-13); cursor: pointer;
}
.ie-userbox__btn:hover { background: var(--ie-c-surface-hover); }
.ie-userbox__name { font-weight: var(--ie-fw-semi); white-space: nowrap; }
.ie-userbox__caret { inline-size: 14px; block-size: 14px; color: var(--ie-c-text-muted); }
.ie-userbox__menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0;
  min-inline-size: 180px;
  background: var(--ie-c-surface-card);
  border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-lg);
  box-shadow: var(--ie-shadow-pop);
  padding: var(--ie-sp-1); z-index: var(--ie-z-popover);
}
.ie-userbox__menu[hidden] { display: none; }
.ie-userbox__menu a {
  display: flex; align-items: center; gap: var(--ie-sp-2);
  padding: var(--ie-sp-2) var(--ie-sp-3); border-radius: var(--ie-r-md);
  color: var(--ie-c-text-body); font-size: var(--ie-fs-13); white-space: nowrap;
}
.ie-userbox__menu a:hover { background: var(--ie-c-surface-hover); text-decoration: none; }

/* ── 스크롤포트: 여기가 유일하게 세로로 스크롤되는 곳 ───────────────────── */
.ie-main {
  flex: 1 1 auto;
  min-block-size: 0;               /* ★ 필수 */
  overflow-y: auto;
  overflow-x: hidden;              /* ★ 가로 스크롤 페이지 유출 3차 차단 */
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.ie-main:focus { outline: none; }

.ie-content {
  padding: var(--ie-content-pad);                /* 24px */
  display: flex; flex-direction: column; gap: var(--ie-sp-5);
  min-block-size: 100%;                          /* 짧은 페이지에서도 푸터가 바닥에 */
  box-sizing: border-box;
}
.ie-content--form { max-inline-size: var(--ie-content-max-form); }   /* 880px */
.ie-content--read { max-inline-size: var(--ie-content-max-read); }   /* 720px */

.ie-footer {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--ie-sp-3);
  padding: 0 var(--ie-content-pad);
  block-size: 40px;
  border-block-start: 1px solid var(--ie-c-border);
  background: var(--ie-c-surface-card);
  color: var(--ie-c-text-muted); font-size: var(--ie-fs-12);
}
.ie-footer__ver { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* ── 반응형 (08 §4.4 · 폭 단위에 vw 금지, 스크롤바 폭이 포함돼 가로 스크롤을 만든다) ── */

/* 1024~1279 : 자동 접힘 60px */
@media (max-width: 1279px) {
  .ie-sidebar { inline-size: var(--ie-sb-w-collapsed); }
  .ie-sidebar .ie-sidebar__title,
  .ie-sidebar .ie-nav__label,
  .ie-sidebar .ie-nav__caret { opacity: 0; inline-size: 0; overflow: hidden; pointer-events: none; }
  .ie-sidebar__brand, .ie-nav__top, .ie-sidebar__collapse { padding-inline: 0; justify-content: center; }
  .ie-nav__sub { display: none; }
  .ie-sb-expanded .ie-sidebar { inline-size: var(--ie-sb-w); }
  .ie-sb-expanded .ie-sidebar .ie-sidebar__title,
  .ie-sb-expanded .ie-sidebar .ie-nav__label,
  .ie-sb-expanded .ie-sidebar .ie-nav__caret { opacity: 1; inline-size: auto; pointer-events: auto; }
  .ie-sb-expanded .ie-sidebar .ie-nav__label { flex: 1 1 auto; }
  .ie-sb-expanded .ie-sidebar__brand,
  .ie-sb-expanded .ie-nav__top,
  .ie-sb-expanded .ie-sidebar__collapse { padding-inline: var(--ie-sp-4); justify-content: flex-start; }
  .ie-sb-expanded .ie-nav__group.is-open .ie-nav__sub { display: block; }
}

/* < 1024 : 오프캔버스 드로어. transform 이라 리플로우 0 */
@media (max-width: 1023px) {
  .ie-sidebar {
    position: fixed;
    inset-block: 0; inset-inline-start: 0;
    inline-size: var(--ie-sb-w);
    transform: translateX(-100%);
    transition: transform var(--ie-dur-base) var(--ie-ease);
    box-shadow: var(--ie-shadow-modal);
    z-index: var(--ie-z-drawer);
  }
  .ie-sidebar .ie-sidebar__title,
  .ie-sidebar .ie-nav__label,
  .ie-sidebar .ie-nav__caret { opacity: 1; inline-size: auto; pointer-events: auto; }
  .ie-sidebar .ie-nav__label { flex: 1 1 auto; }
  .ie-sidebar__brand, .ie-nav__top, .ie-sidebar__collapse { padding-inline: var(--ie-sp-4); justify-content: flex-start; }
  .ie-nav__group.is-open .ie-nav__sub { display: block; }
  .ie-drawer-open .ie-sidebar { transform: translateX(0); }

  .ie-scrim {
    position: fixed; inset: 0;
    background: rgba(18, 34, 42, .45);
    z-index: calc(var(--ie-z-drawer) - 1);
  }
  .ie-scrim[hidden] { display: none; }   /* position:fixed 가 display:none 을 덮는 사고 방지 */
  .ie-topbar__burger { display: inline-flex; }
  .ie-sidebar__foot { display: none; }
  .ie-content { padding: var(--ie-sp-4); }
  .ie-footer { padding-inline: var(--ie-sp-4); }
}
@media (min-width: 1024px) {
  .ie-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ie-sidebar, .ie-nav__label, .ie-nav__caret, .ie-sidebar__collapse-i { transition: none; }
}