:root{
  --color-primary:#6B4A6E;
  --color-primary-dark:#543A56;
  --color-secondary:#F1E9F0;
  --color-background:#FAF8F6;
  --color-surface:#FFFFFF;
  --color-text-heading:#2E1F30;
  --color-text-body:#453A47;
  --color-text-muted:#7A6C7C;
  --color-border:#E3D9E2;
  --color-on-primary:#FFFFFF;
  --font-family-base:Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  --fs-h1:38px;--fs-h2:30px;--fs-h3:24px;--fs-body-lg:19px;--fs-body:16px;--fs-caption:13px;
  --lh-heading:1.3;--lh-body:1.6;
  --space-unit:8px;--space-density:0.9;
  --radius:4px;
  --shadow-card:0 2px 6px rgba(107,74,110,0.12);
  --container-width:1280px;
  --sidebar-width:240px;
}
*{box-sizing:border-box}
body{font-family:var(--font-family-base);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text-body);background:var(--color-background);margin:0;padding:0}
h1,h2,h3{font-family:var(--font-family-base);font-weight:700;line-height:var(--lh-heading);color:var(--color-text-heading);margin:0 0 calc(var(--space-unit)*2*var(--space-density)) 0}
h1{font-size:var(--fs-h1);padding-left:calc(var(--space-unit)*1.75*var(--space-density));border-left:6px solid var(--color-primary)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 calc(var(--space-unit)*2*var(--space-density)) 0}
a{color:var(--color-primary)}

/* nav: 좌측 고정 사이드바 + 아코디언(대형교회, 8그룹) */
#nav{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);overflow-y:auto;background:var(--color-surface);border-right:1px solid var(--color-border);padding:calc(var(--space-unit)*2*var(--space-density)) 0;z-index:10}
#nav a.brand{display:block;font-weight:700;font-size:var(--fs-body-lg);color:var(--color-primary);text-decoration:none;padding:0 calc(var(--space-unit)*2*var(--space-density)) calc(var(--space-unit)*2*var(--space-density));margin-bottom:calc(var(--space-unit)*1*var(--space-density));border-bottom:2px solid var(--color-primary)}
#nav .nav-group{border-left:4px solid transparent}
#nav .nav-group.open,#nav .nav-group.current-group{border-left-color:var(--color-primary)}
#nav .nav-group > button{width:100%;text-align:left;font:inherit;font-size:var(--fs-body);font-weight:700;background:none;border:none;color:var(--color-text-heading);cursor:pointer;padding:calc(var(--space-unit)*1.25*var(--space-density)) calc(var(--space-unit)*2*var(--space-density));display:flex;justify-content:space-between;align-items:center}
#nav .nav-group > button:hover{background:var(--color-secondary)}
#nav .nav-group.open > button,#nav .nav-group.current-group > button{background:var(--color-secondary);color:var(--color-primary-dark)}
#nav .nav-group > button .chev{transition:transform .15s;font-size:var(--fs-caption);color:var(--color-text-muted)}
#nav .nav-group.open > button .chev{transform:rotate(90deg)}
#nav .nav-group .submenu{display:none;flex-direction:column;padding-bottom:calc(var(--space-unit)*1*var(--space-density))}
#nav .nav-group.open .submenu{display:flex}
#nav .nav-group .submenu a{padding:calc(var(--space-unit)*0.75*var(--space-density)) calc(var(--space-unit)*2*var(--space-density)) calc(var(--space-unit)*0.75*var(--space-density)) calc(var(--space-unit)*3.5*var(--space-density));color:var(--color-text-body);text-decoration:none;font-size:var(--fs-body)}
#nav .nav-group .submenu a:hover{background:var(--color-secondary);color:var(--color-primary-dark)}
#nav .nav-group .submenu a.current{color:var(--color-primary-dark);font-weight:700}

/* TASK:T1710 — 자식이 없는 최상위 메뉴 항목(예: 관리화면 메뉴에 하위 항목
   없이 등록된 단일 링크)용. 기존엔 이 경우 규칙이 없어 스타일 없는 인라인
   텍스트로 뭉쳐 보였다(실측: 다음세대 8개 부서를 최상위 항목으로 등록한
   메뉴에서 재현). .nav-group > button 과 같은 시각 언어로 맞춘다. */
#nav > a:not(.brand){display:block;font:inherit;font-size:var(--fs-body);font-weight:700;color:var(--color-text-heading);text-decoration:none;padding:calc(var(--space-unit)*1.25*var(--space-density)) calc(var(--space-unit)*2*var(--space-density));border-left:4px solid transparent}
#nav > a:not(.brand):hover{background:var(--color-secondary)}
#nav > a:not(.brand).current{background:var(--color-secondary);color:var(--color-primary-dark);border-left-color:var(--color-primary)}

main{max-width:var(--container-width);margin:0 auto;padding:calc(var(--space-unit)*2*var(--space-density)) calc(var(--space-unit)*3*var(--space-density)) calc(var(--space-unit)*6*var(--space-density)) calc(var(--sidebar-width) + var(--space-unit)*3*var(--space-density))}
header,section{padding:calc(var(--space-unit)*3.5*var(--space-density));background:var(--color-surface);margin-top:calc(var(--space-unit)*2.5*var(--space-density));border-radius:calc(var(--radius)*1.5);border:1px solid var(--color-border);border-top:4px solid var(--color-primary);box-shadow:var(--shadow-card)}
.media{aspect-ratio:16/9;height:auto;background:var(--color-secondary);border-radius:var(--radius);display:grid;place-items:center;color:var(--color-text-muted)}
article{border-top:1px solid var(--color-border);padding:calc(var(--space-unit)*2*var(--space-density)) 0}

@media (max-width:900px){
  #nav{position:static;width:auto;height:auto;border-right:none;border-bottom:1px solid var(--color-border)}
  #nav .nav-group .submenu{padding-left:0}
  main{padding:calc(var(--space-unit)*1*var(--space-density))}
  header,section{padding:calc(var(--space-unit)*2.5*var(--space-density))}
  :root{--fs-h1:30px;--fs-h2:24px;--fs-h3:19px}
}