@font-face { font-family:"Nanum Square Round"; font-weight:300; font-display:swap;
  src:url("vendor/fonts/NanumSquareRoundL.woff2") format("woff2"); }
@font-face { font-family:"Nanum Square Round"; font-weight:400; font-display:swap;
  src:url("vendor/fonts/NanumSquareRoundR.woff2") format("woff2"); }
@font-face { font-family:"Nanum Square Round"; font-weight:500; font-display:swap;
  src:url("vendor/fonts/NanumSquareRoundB.woff2") format("woff2"); }
@font-face { font-family:"Nanum Square Round"; font-weight:600; font-display:swap;
  src:url("vendor/fonts/NanumSquareRoundEB.woff2") format("woff2"); }

/* 본 사이트(localarchive.co.kr) 브랜드 토큰 그대로 사용 */
:root {
  --teal:#4096a4; --teal-dark:#357c88; --amber:#d98346;
  --text:#2f3030; --muted:#6b7280; --bg:#ffffff; --line:#e9ecee;
  --radius:7px; --shadow:0 0 10px 2px rgba(216,216,216,.62);
  --container:1120px; /* 본 사이트 콘텐츠 컨테이너 폭과 동일 */
}
* { box-sizing:border-box; }
body { margin:0; font-family:"Nanum Square Round","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--text); }
ul { list-style:none; margin:0; padding:0; }
a { text-decoration:none; }

/* 상단 주 메뉴 (본 사이트 헤더와 동일한 항목·순서) */
.site-nav { border-bottom:1px solid var(--line); }
.site-nav-inner { max-width:var(--container); margin:0 auto; padding:0 10px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.site-nav .brand { display:flex; align-items:center; flex-shrink:0; margin:10px 0;
  padding-right:20px; }
.site-nav .logo { height:50px; }
.nav-menu { display:flex; flex-wrap:wrap; align-items:center; }
.nav-menu li { display:flex; align-items:center; }
.nav-menu a { color:var(--text); font-size:1rem; font-weight:600; letter-spacing:normal;
  padding:0 25px; line-height:70px; }
.nav-menu a .chev { display:inline-block; margin-left:3px; font-size:.7rem; color:var(--muted); }
.nav-menu a:hover { color:var(--teal); }
.nav-menu a.current { color:var(--teal); }

/* 페이지 타이틀 영역 */
.page-header { max-width:var(--container); margin:0 auto; padding:28px 24px 0; }
.titles h1 { margin:0; font-size:2rem; font-weight:600; color:var(--text); letter-spacing:-.01em; }
#updated { margin:4px 0 0; color:var(--muted); font-size:.85rem; font-weight:400; }
.stale { color:#b45309; font-weight:500; }
.hidden { display:none; }

.views { max-width:var(--container); margin:0 auto; display:flex; gap:8px;
  padding:20px 24px 0; flex-wrap:wrap; }
.view-btn { background:#fff; color:var(--muted); border:1px solid #dcdfe2;
  border-radius:999px; padding:9px 18px; font:inherit; font-weight:500; font-size:.9rem;
  cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.view-btn:hover:not(.active) { border-color:var(--teal); color:var(--teal-dark); }
.view-btn.active { background:var(--teal); border-color:var(--teal); color:#fff; }

.tiles { max-width:var(--container); margin:0 auto; display:flex; gap:16px;
  flex-wrap:wrap; padding:20px 24px; }
.tile { background:#fff; border-radius:var(--radius); border-top:7px solid var(--teal);
  box-shadow:var(--shadow); padding:20px 24px; min-width:140px;
  display:flex; flex-direction:column; }
.tile .label { color:var(--muted); font-size:.85rem; font-weight:600; }
.tile .value { font-size:2.3rem; font-weight:600; color:var(--text); }
.tile .unit { color:var(--muted); font-size:.8rem; }

.charts { max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:16px; padding:8px 24px 8px; }
figure { background:#fff; border-radius:var(--radius); border-top:7px solid var(--teal);
  box-shadow:var(--shadow); margin:0; padding:16px 18px; }
figcaption { color:var(--text); font-weight:600; font-size:1rem; margin-bottom:10px; }
canvas { width:100% !important; height:220px !important; }

.update-note { max-width:var(--container); margin:0 auto; color:var(--muted);
  font-size:.8rem; padding:0 24px 32px; }

/* 사이트 푸터 (본 사이트와 동일한 3열 구성 + 카피라이트) */
.site-footer { border-top:1px solid var(--line); background:#fafbfb; }
.site-footer-inner { max-width:var(--container); margin:0 auto; padding:36px 24px 20px;
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:24px; }
.footer-col .footer-logo { height:28px; }
.footer-col h2 { margin:0 0 10px; font-size:.85rem; font-weight:600; color:var(--text); }
.footer-col ul { display:flex; flex-direction:column; gap:6px; }
.footer-col a { color:var(--muted); font-size:.85rem; }
.footer-col a:hover { color:var(--teal); }
.copyright { max-width:var(--container); margin:0 auto; padding:0 24px 24px;
  color:var(--muted); font-size:.75rem; }

@media (max-width:640px) {
  .site-nav-inner { padding:14px 16px; gap:14px; }
  .site-nav .brand { margin:0; padding-right:0; }
  .site-nav .logo { height:30px; }
  .nav-menu { width:100%; }
  .nav-menu a { font-size:.9rem; padding:0 10px 0 0; line-height:1.6; }
  .page-header,.views,.tiles,.charts,.update-note { padding-left:16px; padding-right:16px; }
  .site-footer-inner { grid-template-columns:1fr 1fr; padding:28px 16px 16px; }
  .copyright { padding:0 16px 20px; }
}