/* ═══════════════════════════════════════════════════════════════
   church-shell.css — 교회(B2B) 대시보드 셸
   레퍼런스: 21st.dev "Dashboard with Collapsible Sidebar" (Sonu kumar)
   + church_manage_ui.jpg 구조(좌측 사이드바 / 브레드크럼 / KPI 카드 / 패널)
   church.css · pages-modern.css 뒤에 로드되어 셸 레이아웃만 담당한다.
   ═══════════════════════════════════════════════════════════════ */

.church-body {
  --ch-accent: var(--m-blue, #1E3AFF);
  --ch-accent-soft: var(--m-blue-soft, #EEF0FF);
  --ch-card: var(--m-card, #fff);
  --ch-line: var(--m-line, #E9E9EE);
  --ch-ink: var(--m-ink, #0B0B0F);
  --ch-ink2: var(--m-ink2, #3A3A42);
  --ch-muted: var(--m-muted, #6C6C77);
  --ch-soft: var(--m-soft, #F7F7F9);
  --ch-r: 16px;
  --ch-sh: 0 1px 2px rgba(11,11,15,.05), 0 8px 24px -14px rgba(11,11,15,.18);
}

/* ── 다크 모드: church-body 토큰 재정의 ──
   ⚠ var(--ink, 폴백) 형태를 쓰면 안 된다. church.html에는 --ink 등이 이미
   라이트 값으로 정의되어 있어 폴백이 사용되지 않고 대비가 1.03:1로 무너진다.
   반드시 명시값을 쓴다. */
:root[data-theme="dark"] .church-body {
  --ch-accent: #5B72FF;
  --ch-accent-soft: #171A33;
  --ch-card: #16161C;
  --ch-line: #2A2B34;
  --ch-ink: #F4F4F6;
  --ch-ink2: #C6C6D0;
  --ch-muted: #9A9AA6;
  --ch-soft: #202028;
  --ch-sh: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.6);
  --ch-on-accent: #fff;
  --ch-on-ink: #0B0B0F;   /* --ch-ink 배경 위에 올라가는 글자색 */

  /* church.css는 --ch-* 가 아니라 전역 토큰을 직접 쓴다(.notice-card, .ch-preview-bar 등).
     church.html에는 이 토큰들의 다크 값이 없어 그대로두면 다크에서 글자가 사라진다.
     범위는 .church-body 내부로 한정된다.
     ⚠ pages-modern.css:7-12 가 :root 에 이 토큰들을 !important 로 박아놓았다.
     !important 없이는 여기서 지므로 반드시 !important 를 붙인다. */
  --ink: #F4F4F6 !important;
  --ink-2: #C6C6D0 !important;
  --ink-3: #9A9AA6 !important;
  --ink-muted: #9A9AA6 !important;
  --muted: #9A9AA6 !important;
  --white: #16161C !important;
  --line: #2A2B34 !important;
  --line-2: #33343E !important;
  --bg: #0A0A0C !important;
  --bg-soft: #101014 !important;
  --bg-2: #16161C !important;
  --bg-3: #202028 !important;

  /* 액센트도 다크 배경에서 읽힐 만큼 밝혀야 한다.
     ⚠ 이 레포지토리에서 --gold 는 실제로 블루(#1E3AFF)다.
     pages-modern.css:11 이 구 테라코타 팔레트 슬롯을 블루로 재사용했기 때문이다.
     이름과 값이 어깜나니 여기서 값만 맞추고, 이름 정리는 별도 작업으로 둔다. */
  --gold: #7C8DFF !important;
  --gold-2: #9AA8FF !important;
  --gold-soft: #1B2040 !important;
}
.church-body { --ch-on-ink: #fff; }

/* 라이트 모드 기본값 */
.church-body { --ch-on-accent: #fff; }
.church-body .tools-layout { max-width: 1360px; padding: 20px 22px 90px; }

/* ── 셸 그리드 ── */
.ch-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 22px; align-items: start; }

/* ── 사이드바 ── */
.ch-side {
  position: sticky; top: calc(var(--nav-h, 64px) + 16px);
  background: var(--ch-card); border: 1px solid var(--ch-line);
  border-radius: 20px; padding: 10px 8px; box-shadow: var(--ch-sh);
  display: flex; flex-direction: column; gap: 6px;
  max-height: calc(100vh - var(--nav-h, 64px) - 34px); overflow: auto;
  scrollbar-width: none;
}
.ch-side::-webkit-scrollbar { display: none; }
.ch-side-search { position: relative; padding: 2px 2px 4px; }
.ch-side-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ch-muted); pointer-events: none; }
.ch-side-search input {
  width: 100%; font: inherit; font-size: .86rem; color: var(--ch-ink);
  padding: 8px 12px 8px 34px; border: 1px solid var(--ch-line); border-radius: 12px;
  background: var(--ch-soft); transition: border-color .15s, background .15s;
}
.ch-side-search input::placeholder { color: var(--ch-muted); }
.ch-side-search input:focus { outline: none; background: var(--ch-card); border-color: var(--ch-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-accent) 12%, transparent); }

.ch-nav-group { display: flex; flex-direction: column; gap: 1px; }
.ch-nav-label {
  font-size: .63rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ch-muted); padding: 9px 11px 4px;
}
.ch-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 500;
  color: var(--ch-ink2); padding: 7px 11px; border-radius: 11px; cursor: pointer;
  text-align: left; transition: background .14s var(--m-ease, ease), color .14s;
}
.ch-nav-item svg { width: 17px; height: 17px; flex: none; color: var(--ch-muted); }
.ch-nav-item:hover { background: var(--ch-soft); color: var(--ch-ink); }
.ch-nav-item.is-active { background: var(--ch-ink); color: var(--ch-on-ink); font-weight: 600; }
.ch-nav-item.is-active svg { color: var(--ch-on-ink); }
.ch-nav-item .ch-nav-count {
  margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--ch-muted);
  background: var(--ch-soft); border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.ch-nav-item.is-active .ch-nav-count { background: color-mix(in srgb, var(--ch-on-ink) 20%, transparent); color: var(--ch-on-ink); }
.ch-nav-item[hidden] { display: none; }

.ch-side-foot { margin-top: auto; padding: 4px 2px 2px; }
.ch-upsell {
  border: 1px solid var(--ch-line); border-radius: 14px; padding: 12px;
  background: linear-gradient(160deg, var(--ch-accent-soft), var(--ch-card) 70%);
}
.ch-upsell b { display: block; font-size: .88rem; color: var(--ch-ink); margin-bottom: 3px; }
.ch-upsell p { margin: 0 0 10px; font-size: .76rem; line-height: 1.5; color: var(--ch-muted); }
.ch-upsell .ch-upsell-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
  background: var(--ch-accent); color: var(--ch-on-accent); border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer;
  text-decoration: none;
}
.ch-upsell .ch-upsell-btn:hover { filter: brightness(.94); }

/* ── 본문 헤더(브레드크럼 라인) ── */
.ch-main { min-width: 0; }
.ch-topline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: 16px;
  padding: 10px 14px; box-shadow: var(--ch-sh); margin-bottom: 18px;
}
.ch-crumb { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ch-muted); min-width: 0; }
.ch-crumb b { color: var(--ch-ink); font-weight: 700; }
.ch-crumb .sep { color: var(--ch-line); }
.ch-topline .spacer { flex: 1 1 auto; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600;
  color: var(--ch-ink2); background: var(--ch-soft); border: 1px solid var(--ch-line);
  border-radius: 999px; padding: 6px 12px;
}
.ch-chip code { font-family: ui-monospace, monospace; letter-spacing: .1em; color: var(--ch-ink); }
.ch-chip button { border: 0; background: none; font: inherit; font-size: .74rem; font-weight: 700; color: var(--ch-accent); cursor: pointer; padding: 0; }
.ch-chip.plan { color: var(--ch-accent); background: var(--ch-accent-soft); border-color: transparent; }
.ch-topline .ch-switch { border-radius: 999px; padding: 6px 12px; font-size: .8rem; background: var(--ch-card); }

.ch-pagehead { margin: 0 0 18px; }
.ch-pagehead h1 { font-size: 1.55rem !important; margin: 0 0 4px; letter-spacing: -.03em; }
.ch-pagehead p { margin: 0; font-size: .85rem; color: var(--ch-muted); }

/* 기존 church.css 요소 톤 맞추기 */
.church-body .panel { background: var(--ch-card); border-radius: 18px; padding: 20px 22px; box-shadow: var(--ch-sh); border-color: var(--ch-line); }
.church-body .ch-section-head h2 { font-size: 1.02rem !important; font-weight: 800 !important; letter-spacing: -.01em; }

/* ── KPI 카드 (레퍼런스 상단 3카드 구조) ── */
.ch-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.ch-kpi {
  position: relative; text-align: left; cursor: pointer;
  background: var(--ch-card); border: 1px solid var(--ch-line); border-radius: 18px;
  padding: 16px 17px 14px; box-shadow: var(--ch-sh);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s var(--m-ease, ease), box-shadow .18s, border-color .18s;
}
.ch-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ch-accent) 40%, var(--ch-line)); box-shadow: 0 14px 30px -18px rgba(11,11,15,.35); }
.ch-kpi-ico {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ch-accent-soft); color: var(--ch-accent);
}
.ch-kpi-ico svg { width: 18px; height: 18px; }
.ch-kpi-label { font-size: .82rem; font-weight: 600; color: var(--ch-muted); }
.ch-kpi-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -.035em; color: var(--ch-ink); line-height: 1; font-family: var(--m-disp, inherit); }
.ch-kpi-sub { font-size: .74rem; color: var(--ch-muted); }
.ch-kpi-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--ch-line); margin-top: 2px; padding-top: 10px;
  font-size: .76rem; font-weight: 600; color: var(--ch-muted);
}
.ch-kpi:hover .ch-kpi-foot { color: var(--ch-accent); }
.ch-kpi-foot svg { width: 14px; height: 14px; }
/* 첫 카드 = 강조(레퍼런스 My balance) */
.ch-kpi.is-feature {
  background: linear-gradient(150deg, var(--ch-accent), color-mix(in srgb, var(--ch-accent) 72%, #000));
  border-color: transparent; color: var(--ch-on-accent);
}
.ch-kpi.is-feature .ch-kpi-ico { background: color-mix(in srgb, var(--ch-on-accent) 18%, transparent); color: var(--ch-on-accent); }
.ch-kpi.is-feature .ch-kpi-label,
.ch-kpi.is-feature .ch-kpi-sub { color: color-mix(in srgb, var(--ch-on-accent) 78%, transparent); }
.ch-kpi.is-feature .ch-kpi-num { color: var(--ch-on-accent); }
.ch-kpi.is-feature .ch-kpi-foot { color: color-mix(in srgb, var(--ch-on-accent) 85%, transparent); border-top-color: color-mix(in srgb, var(--ch-on-accent) 22%, transparent); }
.ch-kpi.is-feature:hover .ch-kpi-foot { color: var(--ch-on-accent); }

/* ── 2단 본문(레퍼런스 My Wallet / Cash Flow) ── */
.ch-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 14px; align-items: start; }

.ch-note {
  font-size: .76rem; color: var(--ch-muted); line-height: 1.6;
  background: var(--ch-soft); border: 1px solid var(--ch-line); border-radius: 14px;
  padding: 11px 14px; margin: 0 0 16px;
}

/* ── 반응형 ── */
@media (max-width: 1080px) {
  .ch-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ch-two { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ch-shell { grid-template-columns: 1fr; gap: 14px; }
  .ch-side {
    position: static; max-height: none; flex-direction: row; align-items: center;
    gap: 4px; overflow-x: auto; padding: 8px; border-radius: 16px;
  }
  .ch-side::-webkit-scrollbar { display: none; }
  .ch-side-search, .ch-side-foot, .ch-nav-label { display: none; }
  .ch-nav-group { flex-direction: row; gap: 4px; }
  .ch-nav-item { white-space: nowrap; padding: 8px 12px; border-radius: 999px; }
  .ch-nav-item svg { display: none; }
}
@media (max-width: 560px) {
  .ch-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ch-kpi-num { font-size: 1.4rem; }
  .church-body .tools-layout { padding: 14px 14px 80px; }
}

/* ── 브랜드 정책: VEIL 로고 마크는 항상 골드(#CDA00A). ────────────────
   church.css 는 var(--gold-2) 를 참조하는데, pages-modern.css 가 그 변수를
   블루(#1024C7)로 !important 리매핑해 로고가 파랗게 나오고 있었다.
   변수 대신 브랜드 골드를 직접 지정해 정책을 강제한다. */
.church-gate .gate-mark { color: #CDA00A; }

/* ── 비로그인 미리보기 안내 바 ─────────────────────────────────────── */
.ch-preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid rgba(205, 160, 10, .38);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(205, 160, 10, .10), rgba(205, 160, 10, .04));
}
.ch-preview-tag {
  flex: none;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 5px 10px;
  border-radius: 999px;
  color: #6b5200;
  background: rgba(205, 160, 10, .22);
}
.ch-preview-bar p {
  flex: 1 1 320px;
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-muted, #5a5a66);
}
.ch-preview-bar p b { color: var(--ink, #14151a); }
.ch-preview-bar .btn { flex: none; }
@media (max-width: 640px) {
  .ch-preview-bar { padding: 12px; }
  .ch-preview-bar .btn { width: 100%; }
}