/* 슬롯 공통 커스텀 CSS — Zynix 셸 위에 얹는 우리 크롬(chrome) 클래스.
 * F221(2026-08-07): 전에는 이 내용이 services/service{1..8}/static_src/
 * zynix-custom.css 에 **8벌 복사**돼 있었다(+ scripts/slot_template). 실제로
 * 어긋나 있었다 — service1 만 로고 규칙 43줄이 더 붙어 있었다.
 * 이제 공통분은 이 파일 하나이고, 슬롯 파일에는 **그 슬롯만의 차이**만 남는다.
 *
 * · Tailwind 를 거치지 않는 plain CSS 다 — @apply 를 쓸 수 없다.
 * · Zynix 의 CSS 변수(--primary, --default-text-color 등)를 그대로 활용한다.
 * · 셸 부품(사이드바 메뉴·토글·드롭다운·브랜드 로고)의 모양은 여기가 아니라
 *   nx-shell-parts.css 다 — 그쪽은 Zynix 없는 문서(랜딩)도 함께 읽는다.
 * 로드: shell_app.html (슬롯 zynix-custom.css 보다 **앞**)
 */

/* ★ 라운드 0 (F210 확정 · 사장님 2026-08-07 재지시) — 우리 CSS 전체에 적용한다.
 *   원(아바타 `9999px` · 점 `50%`)만 형태상 예외다. 전에는 랜딩 CSS 안에서만
 *   지켜지고 있어, 새 파일에 관례적으로 라운드가 들어가는 일이 반복됐다.
 *   검사: tests/test_ui_offline.py 「라운드 0」 절이 우리 CSS 전부를 본다.
 */

/* 문서 본문(관리자가 넣은 HTML) 기본 서식 */
.prose-nx {
  color: rgb(var(--default-text-color));
  line-height: 1.75;
}
.prose-nx h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}
.prose-nx h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}
.prose-nx p {
  margin: 0.75rem 0;
  color: rgb(var(--text-muted));
}
.prose-nx ul,
.prose-nx ol {
  margin: 0.75rem 0 0.75rem 1.25rem;
  color: rgb(var(--text-muted));
}
.prose-nx ul { list-style: disc; }
.prose-nx ol { list-style: decimal; }
.prose-nx a {
  color: rgb(var(--primary));
  text-decoration: underline;
}
.prose-nx code {
  background-color: rgb(var(--light));
  border-radius: 0;
  padding: 0.1rem 0.3rem;
  font-size: 0.9em;
}
.prose-nx pre {
  background-color: rgb(var(--light));
  border: 1px solid rgb(var(--default-border));
  border-radius: 0;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}
.prose-nx img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
}
.prose-nx table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.prose-nx th,
.prose-nx td {
  border: 1px solid rgb(var(--default-border));
  padding: 0.5rem 0.75rem;
  text-align: start;
}

/* 3줄 말줄임 — Zynix 에 line-clamp 유틸이 없을 때를 대비 */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * 우리 셸 크롬(chrome) 전용 클래스.
 * Zynix 의 styles.css 는 purge 된 빌드라서 Zynix 가 안 쓴 Tailwind 유틸리티는
 * 들어 있지 않다. 셸의 기본 골격은 npm 빌드 없이도 보이도록 여기에 plain CSS 로 둔다.
 * (본문에서 임의의 Tailwind 클래스를 쓰려면 tailwind-zynix.css 오버레이가 필요)
 * --------------------------------------------------------------------------- */

/* 브랜드 이니셜 배지 */
.nx-brand-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 0;
  background-color: rgb(var(--primary));
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
}
.nx-brand-badge--lg {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0;
  font-size: 1.5rem;
}

/* 사이드바 로고 줄 */
.nx-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* ★ 자리·높이는 부모(.main-sidebar-header)가 정한다 — nx-shell-parts.css 의
     `--nx-sidebar-brand-*`. 여기서 또 주면 두 곳이 갈라진다(F221 의 병). */
  min-height: 100%;
  overflow: hidden;
}
.nx-sidebar-brand__text {
  font-weight: 600;
  white-space: nowrap;
  /* 라이트/다크 모두에서 보이도록 Zynix 변수를 직접 쓴다
     (Zynix 의 .desktop-logo 는 로고 이미지 전환용이라 텍스트에 쓰면 안 된다) */
  color: rgb(var(--default-text-color));
}

/* 인증 화면 — 화면 중앙 정렬 + 중립 배경 */
.nx-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: rgb(var(--default-body-bg-color));
}
.nx-auth__inner {
  width: 100%;
  max-width: 26rem;
}

/* 통계 타일 아이콘 */
.nx-stat-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  font-size: 1.25rem;
  flex: 0 0 auto;
}
.nx-stat-icon--primary   { background-color: rgb(var(--primary) / 0.1);   color: rgb(var(--primary)); }
.nx-stat-icon--secondary { background-color: rgb(var(--secondary) / 0.1); color: rgb(var(--secondary)); }
.nx-stat-icon--success   { background-color: rgb(var(--success) / 0.1);   color: rgb(var(--success)); }
.nx-stat-icon--warning   { background-color: rgb(var(--warning) / 0.1);   color: rgb(var(--warning)); }

/* 아이콘 + 텍스트 가로 배치 */
.nx-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------------------
 * 유틸리티 shim — Zynix 의 purge 된 styles.css 에 없는 유틸리티 중
 * 우리 셸이 쓰는 것들. npm 빌드(tailwind-zynix.css)를 하면 중복이지만 무해하고,
 * 빌드 전에도 셸이 정상으로 보이게 한다. 검사: tests/check_zynix_classes.py
 * --------------------------------------------------------------------------- */
.w-64      { width: 16rem; }
.py-12     { padding-top: 3rem; padding-bottom: 3rem; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.\!pe-10   { padding-inline-end: 2.5rem !important; }
.hover\:bg-primary\/5:hover { background-color: rgb(var(--primary) / 0.05); }
@media (min-width: 1280px) {
  .xl\:inline { display: inline; }
}