/* ============================================================================
   청양군 다돌봄 데이터 플랫폼 — Soft UI 토큰 & 컴포넌트
   DESIGN.md(v1.0) 기반, "심플하고 부드러운 + 통일감" 방향으로 재해석.
   · 다크 푸터/컬러 헤더 → 옅은 틴트 면으로 통일
   · 브랜드 블루 살짝 톤다운, 라운드/여백 키우고 그림자 부드럽게
   ========================================================================== */

:root{
  /* ── Brand (softened) ─────────────────────────────────────────── */
  --primary:#2C6CB0;          /* 살짝 톤다운한 부드러운 블루 — 주 CTA·활성 */
  --primary-strong:#005BAC;   /* 원본 로고 블루 — 작은 강조·링크 텍스트 */
  --primary-dark:#23568F;     /* 호버 */
  --primary-50:#F1F6FC;       /* 아주 옅은 틴트 면 (헤더/푸터/섹션) */
  --primary-100:#E5EFF9;
  --primary-150:#D9E7F4;
  --primary-200:#C8DBEE;

  --secondary:#6FA659;        /* 부드러운 세이지 그린 — 성공/농업 포인트 */
  --secondary-50:#EFF5EB;
  --secondary-100:#E2EEDB;

  /* ── Surface ──────────────────────────────────────────────────── */
  --bg:#F4F7FB;               /* 페이지 배경 */
  --surface:#FFFFFF;          /* 카드·패널 */
  --surface-soft:#FAFBFD;     /* 보조 면·짝수 행 */
  --header-bg:rgba(255,255,255,0.86);
  --footer-bg:#FFFFFF;        /* v1.3: 옅은 틴트 → 흰색 푸터 (상단 보더로 구분) */
  --tint-blue:#EEF4FB;        /* 섹션 틴트 */
  --tint-warm:#F7F4EE;        /* 보조 틴트 */
  --map-bg:#EEF4FA;

  /* ── Text ─────────────────────────────────────────────────────── */
  --text:#28323F;            /* 제목·본문 (살짝 부드러운 슬레이트) */
  --text-2:#586577;          /* 보조 */
  --text-3:#8A95A4;          /* 비활성·메타 */
  --text-on-primary:#FFFFFF;

  /* ── Border ───────────────────────────────────────────────────── */
  --border:#E7ECF3;          /* 기본 (부드럽게) */
  --border-2:#D8E0EA;        /* 인풋·강조 */
  --ring:rgba(44,108,176,0.14);

  /* ── Data-type badges (pastel softened) ───────────────────────── */
  --badge-api-bg:#EAF1FB;   --badge-api-tx:#2C6CB0;
  --badge-sheet-bg:#ECF4E9; --badge-sheet-tx:#4E8A47;
  --badge-file-bg:#FAF2E6;  --badge-file-tx:#B0751F;
  --badge-chart-bg:#F1ECF8; --badge-chart-tx:#6A53A8;
  --badge-map-bg:#FBECEC;   --badge-map-tx:#C24A4A;

  /* ── Radius (커진 라운드) ─────────────────────────────────────── */
  --r-sm:9px; --r-md:13px; --r-lg:16px; --r-xl:20px; --r-2xl:26px; --r-pill:999px;

  /* ── Shadow (부드럽게) ────────────────────────────────────────── */
  --sh-xs:0 1px 2px rgba(40,50,63,0.04);
  --sh-sm:0 2px 10px rgba(40,50,63,0.05);
  --sh:0 6px 22px rgba(40,50,63,0.06);
  --sh-lg:0 14px 40px rgba(40,50,63,0.09);

  /* ── Chart palette (softened) ─────────────────────────────────── */
  --c1:#2C6CB0; --c2:#6FA659; --c3:#D69A4C; --c4:#8C76C0; --c5:#CF6B6B;

  /* ── Map choropleth 5-step scale + chart grid (테마 전환 대상) ── */
  --map-1:#DCE9F6; --map-2:#B6D0EC; --map-3:#85AFD8; --map-4:#4E84C2; --map-5:#2C6CB0;
  --chart-grid:#EEF2F7;
}

/* ============================================================================
   THEME: rose (data-theme="rose") — 브랜드·지도·차트 스케일만 재정의.
   텍스트·배경·보더·기능색(성공/경고/오류)은 :root 중립값 그대로 유지.
   ========================================================================== */
html[data-theme="rose"]{
  --primary:#E0476A;          /* 메인 */
  --primary-strong:#C0345B;   /* 링크·작은 강조·아이콘 (대비 위해 짙은 로즈) */
  --primary-dark:#AE2F52;     /* 호버 */
  --primary-50:#FDEEF2;
  --primary-100:#FBDDE4;
  --primary-150:#F6BEBE;      /* BASE 색 */
  --primary-200:#F0A9B6;
  --ring:rgba(224,71,106,0.16);

  --c1:#E0476A; --c2:#154361; --c3:#E8C24E; --c4:#C77E9B; --c5:#5E9CA8;
  --map-1:#FCE3E9; --map-2:#F6BEBE; --map-3:#EE93A4; --map-4:#E76E89; --map-5:#E0476A;
  --map-bg:#FCEFF2;           /* 지도 패널 배경 (로즈 틴트) */
}

/* ── Theme switcher (헤더 드롭다운 / 드로어 스와치) ────────────────── */
.theme-switch{position:relative;display:inline-flex}
.theme-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--r-pill);font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:.16s}
.theme-btn:hover{border-color:var(--primary-200);color:var(--primary-strong)}
.theme-btn .dot{width:15px;height:15px;border-radius:99px;background:var(--primary);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--border-2)}
.theme-btn .ti{font-size:15px;color:var(--text-3)}
.theme-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:188px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);padding:7px;display:none;z-index:80}
.theme-switch.open .theme-pop{display:block}
.theme-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border:none;background:transparent;border-radius:var(--r-md);font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:.14s}
.theme-opt:hover{background:var(--surface-soft)}
.theme-opt.on{background:var(--primary-50);color:var(--primary-strong)}
.theme-opt .sw{display:inline-flex;border-radius:99px;overflow:hidden;border:1px solid var(--border-2);flex-shrink:0}
.theme-opt .sw i{width:13px;height:18px;display:block}
.theme-opt .chk{margin-left:auto;font-size:16px;color:var(--primary);opacity:0}
.theme-opt.on .chk{opacity:1}
/* 모바일 드로어 안 테마 스와치 행 */
.ds-theme{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ds-theme .theme-opt{width:auto;border:1px solid var(--border);padding:7px 11px}
/* 테마 버튼 캐럿: 열림 시 위쪽 화살표 */
.theme-switch .theme-btn .ti{transition:transform .18s}
.theme-switch.open .theme-btn .ti{transform:rotate(180deg)}

/* ── 공통 드롭다운(.dd) — 클릭 토글 / 선택·외부클릭·재클릭·Esc 시 닫힘 ──── */
.dd{position:relative;display:inline-flex}
.dd-toggle{cursor:pointer;font-family:inherit}
.dd-caret{transition:transform .18s}
.dd.open .dd-caret{transform:rotate(180deg)}   /* 열림 시 위쪽 화살표 */
.dd-menu{
  position:absolute;top:calc(100% + 6px);left:0;            /* 기본 좌측 정렬(좌측 배치 시 화면 밖 방지) */
  min-width:100%;width:max-content;max-width:260px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh);padding:6px;display:none;z-index:40;
}
.dd.open > .dd-menu{display:block}
.dd-menu.dd-right{left:auto;right:0}            /* JS가 우측 넘침 감지 시 우측 정렬 */
.dd-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:9px 11px;border:none;background:transparent;border-radius:var(--r-sm);
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:.14s;white-space:nowrap;
}
.dd-item:hover{background:var(--primary-50);color:var(--primary-strong)}
.dd-item.on{background:var(--primary-50);color:var(--primary-strong)}
.dd-item .ti{font-size:17px;color:var(--text-3)}
.dd-item .chk{margin-left:auto;font-size:16px;color:var(--primary);opacity:0}
.dd-item.on .chk{opacity:1}

/* ── Base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.6; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  word-break:keep-all; text-wrap:pretty;
}
h1,h2,h3{text-wrap:balance}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--primary-150)}
:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)}

/* soft scrollbars */
.scroll-soft::-webkit-scrollbar{width:8px;height:8px}
.scroll-soft::-webkit-scrollbar-thumb{background:#D5DEE9;border-radius:99px;border:2px solid transparent;background-clip:content-box}
.scroll-soft::-webkit-scrollbar-track{background:transparent}

/* ── Layout helpers ───────────────────────────────────────────────── */
.shell{max-width:1320px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.shell{padding:0 18px}}

/* ── Header ───────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header .bar{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{height:30px;display:block}
.brand .bn{font-size:15px;font-weight:700;letter-spacing:-0.02em;color:var(--text);white-space:nowrap}
.gnb{display:flex;align-items:center;gap:4px}
.gnb a{
  position:relative;padding:9px 15px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;color:var(--text-2);transition:.16s;white-space:nowrap;
}
.gnb a:hover{color:var(--primary-strong);background:var(--primary-50)}
.gnb a.on{color:var(--primary-strong);background:var(--primary-100)}
.gnb a .caret{margin-left:5px;font-size:10px;opacity:.55;vertical-align:middle}
.header-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.hr-link{padding:8px 12px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--text-3);transition:.16s}
.hr-link:hover{color:var(--text);background:var(--surface-soft)}
.hr-link .ti{font-size:15px;margin-right:4px;vertical-align:-2px}
.menu-btn{display:none;width:40px;height:40px;border:none;background:transparent;border-radius:var(--r-pill);align-items:center;justify-content:center;cursor:pointer;color:var(--text-2)}
.menu-btn .ti{font-size:24px}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1;cursor:pointer;
  padding:11px 19px;border-radius:var(--r-pill);border:1px solid transparent;transition:.16s;white-space:nowrap;
}
.btn .ti{font-size:17px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(44,108,176,0.22)}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 6px 18px rgba(44,108,176,0.28);transform:translateY(-1px)}
.btn-soft{background:var(--primary-100);color:var(--primary-strong)}
.btn-soft:hover{background:var(--primary-150)}
.btn-ghost{background:var(--surface);color:var(--text-2);border-color:var(--border-2)}
.btn-ghost:hover{background:var(--surface-soft);color:var(--text);border-color:var(--border-2)}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border-2);color:var(--text-2)}
.btn-icon:hover{background:var(--surface-soft);color:var(--primary-strong);border-color:var(--primary-200)}

/* ── Card ─────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm)}
.card-pad{padding:24px}
.card-hover{transition:.2s}
.card-hover:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--primary-200)}

/* ── Badges ───────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;letter-spacing:0.02em;border-radius:var(--r-sm);padding:3px 9px;line-height:1.4}
.b-api{background:var(--badge-api-bg);color:var(--badge-api-tx)}
.b-sheet{background:var(--badge-sheet-bg);color:var(--badge-sheet-tx)}
.b-file{background:var(--badge-file-bg);color:var(--badge-file-tx)}
.b-chart{background:var(--badge-chart-bg);color:var(--badge-chart-tx)}
.b-map{background:var(--badge-map-bg);color:var(--badge-map-tx)}
.b-cat{background:var(--primary-100);color:var(--primary-strong);border-radius:var(--r-pill);padding:3px 11px}
.b-ok{background:var(--secondary-50);color:var(--secondary);border-radius:var(--r-pill);padding:3px 11px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 14px;transition:.16s;cursor:pointer}
.pill:hover{border-color:var(--primary-200);color:var(--primary-strong);background:var(--primary-50)}
.pill.on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── Sidebar / LNB ────────────────────────────────────────────────── */
.lnb{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:12px;box-shadow:var(--sh-sm)}
.lnb-title{font-size:12px;font-weight:700;letter-spacing:0.06em;color:var(--text-3);text-transform:uppercase;padding:10px 12px 8px}
.lnb-group{margin-bottom:2px}
.lnb-head{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:11px 13px;border-radius:var(--r-md);border:none;background:transparent;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--text-2);transition:.16s;
}
.lnb-head:hover{background:var(--surface-soft);color:var(--text)}
.lnb-head .ico{font-size:18px;width:20px;text-align:center;flex-shrink:0}
.lnb-head .chev{margin-left:auto;font-size:15px;color:var(--text-3);transition:.2s}
.lnb-group.open .lnb-head{color:var(--primary-strong);background:var(--primary-50)}
.lnb-group.open .lnb-head .chev{transform:rotate(90deg)}
.lnb-sub{display:none;padding:3px 0 7px 14px;margin-left:18px;border-left:1.5px solid var(--border)}
.lnb-group.open .lnb-sub{display:block}
.lnb-sub a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-sm);font-size:13.5px;color:var(--text-2);transition:.14s}
.lnb-sub a:hover{background:var(--surface-soft);color:var(--text)}
.lnb-sub a.on{color:var(--primary-strong);font-weight:700}
.lnb-sub a .dot{width:5px;height:5px;border-radius:99px;background:var(--border-2);flex-shrink:0}
.lnb-sub a.on .dot{background:var(--primary)}

/* ── Stat cards ───────────────────────────────────────────────────── */
.stat{
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r-lg);padding:16px 17px;box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
}
.stat .stat-head{display:flex;align-items:center;gap:9px}
.stat .ic{
  width:34px;height:34px;flex:none;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-100);color:var(--primary-strong);font-size:18px;
}
.stat .ic-green{background:var(--secondary-50);color:var(--secondary)}
.stat .ic-amber{background:var(--badge-file-bg);color:var(--badge-file-tx)}
.stat .lab{font-size:12.5px;font-weight:600;color:var(--text-3)}
.stat .num{font-size:30px;font-weight:800;letter-spacing:-0.03em;color:var(--text);line-height:1}
.stat .num small{font-size:14px;font-weight:600;color:var(--text-3);margin-left:3px}
.stat .foot{display:flex;align-items:center;gap:8px}
.stat .delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700}
.stat .delta.up{color:var(--secondary)}
.stat .delta.down{color:#CF6B6B}
.stat .foot-sub{font-size:11.5px;color:var(--text-3)}
/* primary: 흰 배경 유지 + 컬러 테두리·아이콘으로 강조 (배경색 대신 테두리로 구분) */
.stat-primary{background:var(--surface);border-color:var(--primary)}
.stat-primary .ic{background:var(--primary);color:#fff}
.stat-primary .lab{color:var(--primary-strong);opacity:.8}
.stat-primary .num{color:var(--primary-strong)}

/* ── Table ────────────────────────────────────────────────────────── */
.tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm);overflow:hidden}
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{
  background:var(--surface-soft);color:var(--text-3);font-size:12px;font-weight:700;letter-spacing:0.02em;
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--border);white-space:nowrap;
}
.tbl tbody td{padding:13px 16px;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--border);white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:.12s}
.tbl tbody tr:hover td{background:var(--primary-50)}
.tbl .num-cell{font-variant-numeric:tabular-nums;font-weight:600}
.tbl .muted{color:var(--text-3)}

/* ── Toolbar ──────────────────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 필터 툴바: 모바일에서 컨트롤 간격 축소(4px) */
@media(max-width:640px){.toolbar,.t-toolbar{gap:4px}}
.field{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.field .ti{font-size:16px;color:var(--text-3)}
.field select{border:none;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);outline:none;cursor:pointer}
.search{display:flex;align-items:center;gap:9px;background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--r-pill);padding:11px 20px;transition:.16s}
.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.search .ti{font-size:19px;color:var(--text-3)}
.search input{border:none;background:transparent;font-family:inherit;font-size:15px;color:var(--text);outline:none;width:100%}
.search input::placeholder{color:var(--text-3)}

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3);flex-wrap:wrap}
.crumb a:hover{color:var(--primary-strong)}
.crumb .sep{color:var(--border-2);font-size:11px}
.crumb b{color:var(--text);font-weight:700}

/* ── Map (청양군 실제 행정구역 SVG) ───────────────────────────────── */
.map-panel{background:var(--map-bg);border:1px solid var(--border);border-radius:var(--r-xl)}
.eup-region{cursor:pointer;fill:var(--map-1);stroke:#fff;stroke-width:2.5;transition:filter .18s,stroke .18s}
.eup-region:hover{filter:brightness(0.93)}
.eup-region.active{stroke:var(--primary-dark);stroke-width:4}
.rg-label{font-size:23px;font-weight:700;fill:var(--primary-dark);text-anchor:middle;pointer-events:none;font-family:inherit}
.rg-value{font-size:18px;font-weight:600;fill:var(--primary-dark);text-anchor:middle;pointer-events:none;font-family:inherit}
.legend{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-3)}
.legend .scale{display:flex;border-radius:99px;overflow:hidden;border:1px solid var(--border)}
.legend .scale i{width:26px;height:11px;display:block}

/* ── Notice list ──────────────────────────────────────────────────── */
.notice li{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--border);list-style:none}
.notice li:last-child{border-bottom:none}
.notice .t{font-size:14.5px;color:var(--text);font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice li:hover .t{color:var(--primary-strong)}
.notice .d{font-size:12.5px;color:var(--text-3);flex-shrink:0;font-variant-numeric:tabular-nums}

/* ── Footer (옅은 틴트, 통일) ─────────────────────────────────────── */
.site-footer{background:var(--footer-bg);border-top:1px solid var(--border)}
.site-footer .ft{display:flex;flex-wrap:wrap;gap:40px;padding:42px 0 14px}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.ft-nav a{font-size:13.5px;font-weight:600;color:var(--text-2);transition:.14s}
.ft-nav a:hover{color:var(--primary-strong)}
.ft-nav a.em{color:var(--text)}
.site-footer .meta{font-size:12.5px;color:var(--text-3);line-height:1.85}
.site-footer .meta b{color:var(--text-2);font-weight:600}
.ft-bottom{border-top:1px solid var(--border);padding:16px 0;font-size:12px;color:var(--text-3);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}

/* ── Section eyebrow ──────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:0.04em;color:var(--primary-strong)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--primary)}

/* ── Tooltip ──────────────────────────────────────────────────────── */
.tip{position:fixed;z-index:90;pointer-events:none;background:var(--text);color:#fff;font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:var(--r-md);box-shadow:var(--sh);opacity:0;transform:translateY(4px);transition:.14s}
.tip.show{opacity:1;transform:translateY(0)}
.tip .tv{color:#BBD4ED;font-weight:700}

/* ── Mobile drawer ────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(40,50,63,0.38);backdrop-filter:blur(2px);z-index:60;opacity:0;visibility:hidden;transition:.2s}
.overlay.show{opacity:1;visibility:visible}

@media(max-width:1024px){
  .gnb,.header-right .hr-link{display:none}
  .menu-btn{display:inline-flex}
}

/* ── Mobile drawer: 공통 헤더 + 사이트 내비 (모바일에서만 노출) ───── */
.drawer-head,.drawer-site{display:none}
.lnb-drawer .drawer-head,.lnb-drawer .drawer-site{display:block}
@media(max-width:1024px){
  .col-lnb .drawer-head,.col-lnb .drawer-site{display:block}
}
.drawer-head{display:none;align-items:center;justify-content:space-between;padding:2px 4px 14px;border-bottom:1px solid var(--border)}
.lnb-drawer .drawer-head{display:flex}
@media(max-width:1024px){.col-lnb .drawer-head{display:flex}}
.dh-title{font-size:12px;font-weight:800;letter-spacing:0.06em;color:var(--text-3);text-transform:uppercase}
.drawer-close{width:38px;height:38px;border:none;background:var(--surface-soft);border-radius:var(--r-pill);color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.drawer-close:hover{background:var(--primary-50);color:var(--primary-strong)}
.drawer-close .ti{font-size:21px}
.drawer-site{padding:12px 0;margin-bottom:6px;border-bottom:1px solid var(--border)}
.ds-main{display:flex;flex-direction:column;gap:2px}
.ds-main a{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:var(--r-md);font-size:15.5px;font-weight:700;color:var(--text);transition:.14s}
.ds-main a.on{color:var(--primary-strong);background:var(--primary-50)}
.ds-main a:active{background:var(--primary-100)}
.ds-util{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ds-util a{display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--text-2);background:var(--surface-soft);border:1px solid var(--border)}
.ds-util a .ti{font-size:15px;color:var(--text-3)}
.ds-util a:active{color:var(--primary-strong);border-color:var(--primary-200)}

/* ── 작은 화면 공통 폴리시 ───────────────────────────────────────── */
@media(max-width:600px){
  .site-header .bar{height:58px;gap:12px}
  .brand img{height:26px}
  .brand .bn{font-size:14px}
  .btn-lg{padding:13px 22px;font-size:15px}
}
@media(max-width:380px){
  .brand .bn{display:none}
}