:root{
  --color-primary:#2F6F68;
  --color-primary-dark:#24564F;
  --color-secondary:#E9F2F0;
  --color-background:#FAF9F6;
  --color-surface:#FFFFFF;
  --color-text-heading:#1E3A36;
  --color-text-body:#3F4E4B;
  --color-text-muted:#647370;
  --color-border:#DCE6E3;
  --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:1.0;
  --radius:8px;
  --shadow-card:0 1px 3px rgba(47,111,104,0.10);
  --container-width:1100px;
}
@font-face{font-family:'Pretendard Fallback';src:local('Malgun Gothic'),local('Apple SD Gothic Neo')}
*{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.5*var(--space-density));border-left:4px 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: 상단 가로 + 그룹 드롭다운 */
#nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--space-unit)*1*var(--space-density));padding:calc(var(--space-unit)*1.5*var(--space-density)) calc(var(--space-unit)*2*var(--space-density))}
#nav > a.brand{font-weight:700;font-size:var(--fs-body-lg);color:var(--color-primary);text-decoration:none;margin-right:calc(var(--space-unit)*3*var(--space-density))}
#nav .nav-group{position:relative}
#nav .nav-group > button{font:inherit;font-size:var(--fs-body);background:none;border:none;border-bottom:2px solid transparent;color:var(--color-text-body);cursor:pointer;padding:calc(var(--space-unit)*1*var(--space-density)) calc(var(--space-unit)*1*var(--space-density));border-radius:var(--radius)}
#nav .nav-group > button:hover,#nav .nav-group.open > button{background:var(--color-secondary);color:var(--color-primary-dark)}
#nav .nav-group.current-group > button{color:var(--color-primary-dark);border-bottom-color:var(--color-primary)}
#nav .nav-group .dropdown{display:none;position:absolute;top:100%;left:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-card);min-width:180px;padding:calc(var(--space-unit)*1*var(--space-density)) 0;z-index:20}
#nav .nav-group.open .dropdown{display:block}
#nav .nav-group .dropdown a{display:block;padding:calc(var(--space-unit)*1*var(--space-density)) calc(var(--space-unit)*2*var(--space-density));color:var(--color-text-body);text-decoration:none}
#nav .nav-group .dropdown a:hover{background:var(--color-secondary);color:var(--color-primary-dark)}
#nav .nav-group .dropdown a.current{color:var(--color-primary-dark);font-weight:700;background:var(--color-secondary)}
/* 예전 플랫 링크(구버전 캐시 대비, 안전망) */
#nav a{color:var(--color-primary);text-decoration:none}

main{max-width:var(--container-width);margin:0 auto;padding:calc(var(--space-unit)*2*var(--space-density)) calc(var(--space-unit)*2*var(--space-density)) calc(var(--space-unit)*6*var(--space-density))}
header,section{padding:calc(var(--space-unit)*4*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:3px 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:720px){
  #nav{padding:calc(var(--space-unit)*1*var(--space-density))}
  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}
}