/* Interx.Shell Host — 셸 page CSS(라이브러리 styles/ 가 아니다 · IXDE 토큰만).
 * ① 글꼴 선택(대표 결정 S12 — IXDE 밖) ② 셸 본문 배치(fixed 페이지 — Interx.Components Docs 「조회 페이지」 템플릿과 같은 본문)
 * ③ 좁은 화면 보충(IXDE 는 좁은 화면 Layout 기준이 없다 — LAYOUT.md 「page CSS 재선언 허용 범위」 · Interx.Components Docs shell.css 와 같은 규칙). */

/* ① 글꼴 — 사본은 wwwroot/fonts(README.md · OFL 1.1). <html data-font> 가 IXDE 글꼴 변수를 덮는다. 기본(속성 없음)은 IXDE 글꼴 그대로 */
@font-face {
  font-family: 'D2Coding';
  src: url('../fonts/D2Coding/D2Coding.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'D2Coding';
  src: url('../fonts/D2Coding/D2CodingBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NanumGothicCoding';
  src: url('../fonts/NanumGothicCoding/NanumGothicCoding.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NanumGothicCoding';
  src: url('../fonts/NanumGothicCoding/NanumGothicCoding-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html[data-font="d2coding"] {
  --ixde-typo-font-type: 'D2Coding', monospace;
  --ixde-font-family-base: 'D2Coding', monospace;
}

html[data-font="nanumgothiccoding"] {
  --ixde-typo-font-type: 'NanumGothicCoding', monospace;
  --ixde-font-family-base: 'NanumGothicCoding', monospace;
}

/* ② 셸 본문 — 콘텐츠 영역(ixde-content)을 채우는 세로 flex. 표 화면(.shell-page · 높이 100%)은 남은 높이를 채우고,
 *    내용이 긴 화면(홈 · 설정 등)은 이 칸 안에서만 스크롤한다 — GNB · Header 는 움직이지 않는다(fixed 페이지 · LAYOUT.md Type B).
 *    패딩은 없다 — 이 칸은 1차 wrap(ixde-content)의 직계 자식(2차 wrap)이라 gap 만 쓴다(LAYOUT.md 「Slot 내부 2차 wrap 간격」 ·
 *    Frame 배치의 ixde-content 패딩도 0). 본문 첫 요소가 헤더 프레임 가장자리에 맞는다 */
.ixde-content:has(> .ixc-assistant-workspace) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.shell-body {
  display: flex;
  flex-direction: column;
  gap: var(--ixde-gap-5);
  flex: 1 1 0;
  height: 100%;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: auto;
}

/* 개발 전용 경고 · 2단계 인증 유예 안내 · 저장 실패 알림 — 본문 위 띠(내용 높이) */
.shell-body > .shell-notice {
  flex: 0 0 auto;
}

/* 본문 맨 위 브레드크럼(layout.breadcrumb = content · IXDE 기본형 ixde-breadcrumb-wrap) — 어시스턴트 작업 영역 바깥.
 * 좌우 패딩 없음 — 본문(.shell-body)과 같은 가장자리(헤더 프레임). 위는 IXDE 「헤더 → 브레드크럼」 간격(wrap 의 padding-top) 그대로.
 * 아래는 본문 칸과 같은 gap 하나만(패딩이 아니라 ixde-content 의 gap) — IXDE 「브레드크럼 → H1」(4rem)은 쪽 제목 기준이라 카드로 시작하는 셸 본문에는 쓰지 않는다(변수만 바꾼다) */
.shell-crumb {
  flex: 0 0 auto;
}

.shell-crumb > .ixde-breadcrumb-wrap {
  --ixde-breadcrumb--margin-bottom: 0;
}

.ixde-content:has(> .shell-crumb) {
  gap: var(--ixde-gap-5);
}

/* 어시스턴트 띄운 창 자리(Interx.Assistant IxAssistantWorkspace 의 ixc-assistant-popup-host — 어시스턴트를 켜면 작업 영역 뒤 형제로 늘 그려진다).
 * 안의 창은 position: fixed 라 이 칸은 높이 0 인데, ixde-content(세로 flex)의 gap 이 그 앞에 한 번 더 걸려 본문 · 붙인 패널 아래가
 * GNB 아래보다 gap(16px)만큼 위에서 끝났다(TSK-F02-014). 상자를 만들지 않게 해 flex 항목에서 뺀다 — 창 자리 · 크기는 그대로(fixed · ix-assistant.js) */
.ixde-content > .ixc-assistant-popup-host {
  display: contents;
}

/* 단독 화면(홈 · 권한 없음 · 샘플) — 쪽 본문 세로 쌓기 */
.shell-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ixde-gap-5);
  max-width: 960px;
}

/* ③ 좁은 화면(IXDE mobile breakpoint 767px) */
@media (max-width: 767px) {
  /* GNB 를 펼쳐도 본문 열은 화면 폭을 유지한다(문서가 가로로 밀린다). 없으면 본문이 수십 px 로 눌려 Header 오른쪽이 메뉴 버튼을 덮는다 */
  .shell .ixde-layout > .ixde-layout__main {
    min-width: 100%;
  }

  /* 회로가 시작되기 전(첫 상태를 정하기 전 — 표식 shell-pending)에는 GNB 를 접힌 모양으로 감춘다. IXDE 접힘 규칙과 같은 모양에 visibility 만 더한다 */
  .shell:has(.shell-pending) .ixde-layout {
    gap: 0;
  }

  .shell:has(.shell-pending) .ixde-layout > .ixde-layout__gnb-frame {
    width: 0;
    visibility: hidden;
    transition: none;
  }
}

/* 인증 안내(로그인 필요 · 권한 없음) — 셸 밖 빈 레이아웃의 안내 칸 */
.shell-auth-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ixde-gap-4);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--ixde-padding-8) var(--ixde-padding-6);
}

/* 쪽 이동 뒤 제목 포커스(FocusOnNavigate · 접근성 — 화면 읽기 프로그램이 새 쪽 제목부터 읽는다). 제목은 조작 요소가 아니라 IXDE 포커스 표시(inset box-shadow)를 그리지 않는다 */
.shell h1[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}