:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-soft:#fbfcfd;
  --surface-strong:#f3f6f9;
  --ink:#172237;
  --muted:#6f7f96;
  --line:#e5ebf4;
  --primary:#2f6bff;
  --primary-dark:#2451b4;
  --navy:#172237;
  --accent-primary:#3b82f6;
  --accent-secondary:#ff8a1f;
  --accent-success:#28b779;
  --accent-info:#18b6e8;
  --accent-warning:#f4b400;
  --accent-warning-deep:#b88200;
  --accent-danger:#ff5a3d;
  --accent-dark:#172237;
  --shadow:0 16px 34px rgba(23,34,55,.08);
  --shadow-soft:0 8px 22px rgba(23,34,55,.06);
  --radius:22px;
  --radius-sm:16px;
  --max:1180px;
  --font:"SUIT Variable","Pretendard Variable","Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:#ffffff;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(calc(100% - 28px),var(--max));margin:0 auto}

.top{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px rgba(23,34,55,.05);
}
.top .wrap{
  min-height:74px;
  position:relative; /* 네비 절대 중앙 배치를 위한 기준점 */
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* 로고: 헤더 맨 왼쪽 끝에 고정 (header-right-group의 좌측 미러) */
.brand{
  display:flex;align-items:center;gap:12px;
  position:absolute;left:0;top:0;bottom:0;
  padding:0 20px;z-index:2;
}
.mark{
  width:52px;height:52px;
  display:block;flex-shrink:0;
}
.mark img{
  width:100%;height:100%;display:block;
  filter:drop-shadow(0 10px 18px rgba(23,34,55,.10));
}
.brand b{display:block;font-size:1.02rem}
.brand span span{display:block;font-size:.8rem;color:var(--muted)}
.menu{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  width:max-content; /* 절대 위치 시 우측 공간으로 폭이 제한되지 않도록 */
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%); /* 수평+수직 중앙 고정 */
  z-index:1;
}
.menu a{
  padding:10px 14px;border-radius:999px;
  color:var(--muted);font-weight:700;font-size:.92rem;
  border:1px solid transparent;transition:.18s ease;
}
.menu a:hover,.menu a[aria-current="page"]{
  background:var(--surface-strong);
  border-color:#d6e5ff;
  color:var(--primary-dark);
}
.menu-toggle{
  display:none;width:42px;height:42px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  box-shadow:var(--shadow-soft);cursor:pointer;padding:0;
  align-items:center;justify-content:center;
  margin-left:auto; /* 모바일에서 햄버거를 wrap 우측 끝으로 밀기 */
}
.menu-toggle:hover{background:var(--surface-strong)}
.top-actions{display:flex;align-items:center;gap:10px}

/* ── 네비게이션 구분선 — 로그인 앞 분리선 ────── */
.nav-divider{
  display:inline-block;width:1px;height:20px;
  background:var(--line);margin:0 6px;flex-shrink:0;
  margin-left:auto; /* 로그인 버튼을 우측으로 밀기 */
}

/* ── 스마트 역량 측정 — 기본(모바일용) ──────── */
.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;
  background:linear-gradient(135deg,#ff6b35,#f59e0b);
  color:#fff !important;font-weight:800;font-size:.88rem;
  border:none !important;
  box-shadow:0 4px 14px rgba(255,107,53,.28);
  transition:.18s ease;white-space:nowrap;
}
.nav-cta:hover{
  box-shadow:0 6px 20px rgba(255,107,53,.42);
  background:linear-gradient(135deg,#e85a22,#d97706);
}

/* ── 헤더 우측 그룹 (사용자 정보 + 디지털 역량 평가) ── */
.header-right-group{
  position:absolute;right:0;top:0;bottom:0;
  display:flex;align-items:center;gap:0;
}

/* ── 로그인 상태 — 아바타 버튼 ───────────────── */
.header-avatar-wrap{
  position:relative;height:100%;
  display:flex;align-items:center;
}
.header-avatar-btn{
  display:flex;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;
  padding:8px 12px;border-radius:12px;
  height:auto;transition:.18s ease;
}
.header-avatar-btn:hover{background:var(--surface-strong)}
/* 아바타 원형 (이름 첫 글자) */
.h-avatar-circle{
  width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-size:.95rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
/* 이름 + 역할 텍스트 영역 */
.h-avatar-meta{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.h-avatar-name{font-size:.86rem;font-weight:800;color:var(--ink);line-height:1.2;white-space:nowrap}
.h-avatar-role{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}

/* ── 아바타 드롭다운 패널 ────────────────────── */
.avatar-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;
  width:260px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(23,34,55,.14);
  z-index:200;
  overflow-x:hidden;overflow-y:auto;   /* 항목 많을 때 드롭다운 내부 스크롤 */
  max-height:calc(100vh - 80px);       /* 화면 높이 초과 방지 */
  opacity:0;pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease;
}
.avatar-dropdown.open{opacity:1;pointer-events:auto;transform:translateY(0)}
/* 드롭다운: 사용자 정보 헤더 */
.adp-user{
  display:flex;align-items:center;gap:12px;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--line);
}
.adp-circle{
  width:44px;height:44px;border-radius:50%;
  background:var(--primary);color:#fff;
  font-size:1.1rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.adp-name{font-size:.9rem;font-weight:800;color:var(--ink);line-height:1.2}
.adp-org{font-size:.78rem;color:var(--muted);margin-top:2px}
/* 드롭다운: 섹션 라벨 */
.adp-section-label{
  padding:10px 18px 4px;
  font-size:.7rem;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
}
/* 드롭다운: 메뉴 링크 */
.adp-link{
  display:flex;align-items:center;gap:9px;
  padding:9px 18px;
  font-size:.88rem;font-weight:700;
  color:var(--ink);transition:.15s ease;
}
.adp-link:hover{background:var(--surface-soft);color:var(--primary)}
.adp-link svg{flex-shrink:0;color:var(--muted);transition:.15s ease}
.adp-link:hover svg{color:var(--primary)}
/* 드롭다운: 로그아웃 버튼 */
.adp-logout{
  display:flex;align-items:center;gap:9px;
  padding:12px 18px 14px;
  font-size:.88rem;font-weight:800;color:#dc2626;
  border-top:1px solid var(--line);
  transition:.15s ease;margin-top:4px;
}
.adp-logout:hover{background:#fff5f5}

/* ── 스마트 역량 측정 — 헤더 우측 끝 고정 ────── */
.nav-cta-edge{
  display:flex;align-items:center;
  padding:0 28px;
  height:100%;
  border-radius:12px 0 0 12px;               /* 우측은 헤더 끝에 밀착, 좌측만 둥글게 */
  font-size:.95rem;font-weight:900;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8); /* 파란색 계열 */
  box-shadow:-4px 0 18px rgba(59,130,246,.32);
  min-height:unset;
}
/* nav-cta-edge 아이콘: 인라인 SVG stroke="currentColor" 사용 */
.nav-cta-edge svg{flex-shrink:0}
.nav-cta-edge:hover{
  background:linear-gradient(135deg,#2563eb,#1e40af);
  box-shadow:-4px 0 24px rgba(59,130,246,.48);
  transform:none;
}

/* ── 로그인 — 일반 메뉴와 구분되는 아웃라인 버튼 */
.nav-login{
  display:inline-flex;align-items:center;
  padding:8px 18px;border-radius:999px;
  border:1.5px solid var(--primary) !important;
  color:var(--primary) !important;
  background:transparent;font-weight:800;font-size:.88rem;
  transition:.18s ease;white-space:nowrap;
}
.nav-login:hover{
  background:var(--primary) !important;
  color:#fff !important;
  transform:translateY(-1px);
}
/* ── 로그인 상태 — 헤더 사용자명 표시 */
.nav-user-name{
  font-size:.88rem;font-weight:700;
  color:var(--primary-dark);white-space:nowrap;
}

.btn,.btn-secondary,.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border-radius:999px;font-weight:800;
  transition:.18s ease;border:1px solid transparent;
}
.btn{
  background:linear-gradient(135deg,var(--primary),#5d8fff);
  color:#fff;box-shadow:0 12px 24px rgba(47,107,255,.18);
}
.btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-secondary{
  background:#fff;border-color:#d9e2f7;color:var(--primary);
  box-shadow:var(--shadow-soft);
}
.btn-secondary:hover{background:var(--surface-strong);transform:translateY(-1px)}
.btn-dark{
  background:linear-gradient(135deg,var(--navy),#21406f);color:#fff;
  box-shadow:0 12px 24px rgba(23,34,55,.16);
}
.btn-dark:hover{transform:translateY(-1px)}

main section{padding:72px 0 0}
.hero{padding:42px 0 10px}
.hero-grid,.split,.cta-grid,.story-grid,.partner-grid,.contact-grid,.card-grid,.summary-grid,.metric-grid{
  display:grid;gap:18px;
}
.hero-grid{grid-template-columns:1.12fr .88fr}
.hero-copy,.hero-side,.card,.panel,.cta-panel,.story-card,.notice-card,.partner-card,.contact-card,.faq-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.hero-copy{
  padding:38px;
  background:linear-gradient(135deg,#172237 0%,#21406f 48%,#2f6bff 100%);
  color:#f7fbff;position:relative;overflow:hidden;
}
.hero-copy:after{
  content:"";position:absolute;right:-30px;bottom:-36px;width:180px;height:180px;
  border-radius:36px;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent);
  transform:rotate(20deg);
}
.hero-side{padding:24px;display:grid;gap:14px;background:#ffffff}
.eyebrow,.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;font-size:.8rem;font-weight:800;
}
.eyebrow{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.pill{
  background:#f5f8fc;
  border:1px solid #dbe3ed;
  color:var(--accent-primary)
}
h1,h2,h3{margin:0;letter-spacing:-.04em}
h1{font-size:clamp(2.2rem,4vw,4.5rem);line-height:1.02;max-width:11ch;margin:18px 0 12px}
h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1.08}
h3{font-size:1.12rem}
p{margin:0}
.hero-copy p{max-width:620px;color:rgba(247,251,255,.82)}
.actions,.chips,.tag-list{display:flex;gap:10px;flex-wrap:wrap}
.actions{margin:24px 0 0}
.chips{margin-top:18px}
.chips span,.tag-list span{
  padding:10px 13px;border-radius:999px;font-size:.88rem;
}
.chips span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14)}
.tag-list span{background:var(--surface-soft);border:1px solid var(--line);font-weight:700}

.section-head{display:grid;gap:12px;max-width:760px;margin-bottom:24px}
.section-head p,.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card,.panel,.story-card,.notice-card,.partner-card,.contact-card,.faq-card{padding:24px}
.card p,.panel p,.story-card p,.notice-card p,.partner-card p,.contact-card p,.faq-card p{color:var(--muted)}
.grid-3 > *:nth-child(6n+1),
.grid-4 > *:nth-child(6n+1),
.grid-5 > *:nth-child(6n+1),
.page-links > *:nth-child(6n+1),
.timeline > *:nth-child(6n+1),
.story-grid > *:nth-child(6n+1),
.partner-grid > *:nth-child(6n+1),
.contact-grid > *:nth-child(6n+1),
.metric-grid > *:nth-child(6n+1),
.stat-grid > *:nth-child(6n+1){--accent:var(--accent-primary)}
.grid-3 > *:nth-child(6n+2),
.grid-4 > *:nth-child(6n+2),
.grid-5 > *:nth-child(6n+2),
.page-links > *:nth-child(6n+2),
.timeline > *:nth-child(6n+2),
.story-grid > *:nth-child(6n+2),
.partner-grid > *:nth-child(6n+2),
.contact-grid > *:nth-child(6n+2),
.metric-grid > *:nth-child(6n+2),
.stat-grid > *:nth-child(6n+2){--accent:var(--accent-secondary)}
.grid-3 > *:nth-child(6n+3),
.grid-4 > *:nth-child(6n+3),
.grid-5 > *:nth-child(6n+3),
.page-links > *:nth-child(6n+3),
.timeline > *:nth-child(6n+3),
.story-grid > *:nth-child(6n+3),
.partner-grid > *:nth-child(6n+3),
.contact-grid > *:nth-child(6n+3),
.metric-grid > *:nth-child(6n+3),
.stat-grid > *:nth-child(6n+3){--accent:var(--accent-success)}
.grid-3 > *:nth-child(6n+4),
.grid-4 > *:nth-child(6n+4),
.grid-5 > *:nth-child(6n+4),
.page-links > *:nth-child(6n+4),
.timeline > *:nth-child(6n+4),
.story-grid > *:nth-child(6n+4),
.partner-grid > *:nth-child(6n+4),
.contact-grid > *:nth-child(6n+4),
.metric-grid > *:nth-child(6n+4),
.stat-grid > *:nth-child(6n+4){--accent:var(--accent-info)}
.grid-3 > *:nth-child(6n+5),
.grid-4 > *:nth-child(6n+5),
.grid-5 > *:nth-child(6n+5),
.page-links > *:nth-child(6n+5),
.timeline > *:nth-child(6n+5),
.story-grid > *:nth-child(6n+5),
.partner-grid > *:nth-child(6n+5),
.contact-grid > *:nth-child(6n+5),
.metric-grid > *:nth-child(6n+5),
.stat-grid > *:nth-child(6n+5){--accent:var(--accent-warning-deep)}
.grid-3 > *:nth-child(6n),
.grid-4 > *:nth-child(6n),
.grid-5 > *:nth-child(6n),
.page-links > *:nth-child(6n),
.timeline > *:nth-child(6n),
.story-grid > *:nth-child(6n),
.partner-grid > *:nth-child(6n),
.contact-grid > *:nth-child(6n),
.metric-grid > *:nth-child(6n),
.stat-grid > *:nth-child(6n){--accent:var(--accent-danger)}
.grid-3 > *,
.grid-4 > *,
.grid-5 > *,
.page-links > *,
.timeline > *,
.story-grid > *,
.partner-grid > *,
.contact-grid > *,
.metric-grid > *,
.stat-grid > *{
  border-color:color-mix(in srgb, var(--accent,var(--line)) 20%, #dfe6ee 80%);
}
.grid-3 > * h3,
.grid-4 > * h3,
.grid-5 > * h3,
.page-links > * h3,
.timeline > * h3,
.metric-grid > * h3,
.story-grid > * h3,
.partner-grid > * h3,
.contact-grid > * h3{
  color:var(--accent,var(--ink));
}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  padding:14px;border-radius:16px;background:#ffffff;
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.stat b{display:block;font-size:1.2rem;color:var(--accent,var(--ink))}
/* stat 색상 변형 — 실적 수치 강조 */
.stat--blue   b { color: var(--primary); }
.stat--orange b { color: #f59e0b; }
.stat--green  b { color: #22b07e; }
/* stat 설명 텍스트 */
.stat p { margin-top:8px;font-size:.82rem;color:var(--muted);line-height:1.55 }

/* 소개 페이지 인포 카드 (핵심 정의 · 운영 구조) */
.about-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.about-info-card{
  padding:14px;border-radius:16px;background:#f8faff;
  border:1px solid #dde8ff;
}
.about-info-label{
  display:block;font-size:.78rem;font-weight:800;
  color:var(--primary);letter-spacing:.04em;margin-bottom:6px;
}
.about-info-card p{font-size:.83rem;color:var(--muted);line-height:1.55;margin:0}

.page-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.page-link{
  padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);display:grid;gap:10px;transition:.18s ease;
}
.page-link:hover{transform:translateY(-2px);border-color:#d5dfe9;background:#fbfcfd}
.page-link .pill{width:max-content}
/* 메뉴 카드 내 카테고리 배지 — --accent 변수 상속 */
.card-tag{
  display:inline-flex;align-items:center;
  padding:4px 11px;border-radius:999px;
  font-size:.76rem;font-weight:800;
  color:var(--accent,var(--accent-primary));
  background:color-mix(in srgb,var(--accent,var(--accent-primary)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,var(--accent-primary)) 25%,transparent);
  width:max-content;
  margin-bottom:2px;
}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.timeline:before{
  content:"";position:absolute;left:10%;right:10%;top:24px;height:2px;
  background:linear-gradient(90deg,#d6e5ff,#bfd2ff);
}
.step{position:relative;z-index:1;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.step-num{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent,var(--accent-primary)) 14%, #ffffff 86%);
  color:var(--accent,var(--accent-dark));
  font-weight:800;margin-bottom:12px
}
.step ul,.card ul,.partner-card ul,.contact-card ul{margin:10px 0 0;padding-left:18px;color:var(--muted)}

.metric-grid{grid-template-columns:1fr 1fr}
.metric-card{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.bar-list{display:grid;gap:12px;margin-top:16px}
.bar{display:grid;grid-template-columns:84px 1fr 46px;gap:10px;align-items:center}
.track{height:12px;border-radius:999px;background:#e8eef8;overflow:hidden}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#2f6bff,#5d8fff)}
.fill.alt{background:linear-gradient(90deg,#2451b4,#2f6bff)}
.fill.soft{background:#bfd2ff}
.heat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.heat-grid div{
  min-height:64px;border-radius:14px;padding:10px;color:#fff;font-size:.8rem;font-weight:700;
  display:grid;align-content:end;
}
.c1{background:#eef3ff;color:var(--primary-dark)}
.c2{background:#dce8ff;color:var(--primary-dark)}
.c3{background:#bfd2ff;color:var(--primary-dark)}
.c4{background:#7da3ff}
.c5{background:#2f6bff}

.story-grid{grid-template-columns:repeat(3,1fr)}
.story-thumb{
  height:180px;border-radius:18px;margin-bottom:16px;
  background:linear-gradient(135deg,#21406f,#5d8fff);
  position:relative;overflow:hidden;
}
.story-thumb:after{
  content:"";position:absolute;right:18px;bottom:18px;width:88px;height:88px;border-radius:24px;
  background:rgba(255,255,255,.16);transform:rotate(14deg);
}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.84rem;margin:0 0 10px}
.meta span{padding:6px 10px;border-radius:999px;background:var(--surface-strong);color:var(--primary-dark);font-weight:800;border:1px solid #d6e5ff}

.partner-grid,.contact-grid{grid-template-columns:repeat(3,1fr)}
.table-wrap{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.info-table{
  width:100%;
  border-collapse:collapse;
  font-size:.96rem;
}
.info-table thead th{
  padding:14px 16px;
  background:#f7f9fc;
  color:var(--ink);
  font-size:.85rem;
  font-weight:800;
  text-align:left;
  border-bottom:1px solid var(--line);
}
.info-table tbody td{
  padding:15px 16px;
  border-bottom:1px solid #edf1f6;
  color:var(--muted);
  vertical-align:top;
}
.info-table tbody tr:last-child td{border-bottom:none}
.info-table tbody tr:hover td{background:#fbfcfd}
.info-table .cell-title{color:var(--ink);font-weight:700}
.info-table .cell-tag{
  display:inline-flex;
  min-width:62px;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  color:#ffffff;
  background:var(--accent,var(--primary));
}
.info-table tbody tr:nth-child(6n+1){--accent:var(--accent-primary)}
.info-table tbody tr:nth-child(6n+2){--accent:var(--accent-secondary)}
.info-table tbody tr:nth-child(6n+3){--accent:var(--accent-success)}
.info-table tbody tr:nth-child(6n+4){--accent:var(--accent-info)}
.info-table tbody tr:nth-child(6n+5){--accent:var(--accent-warning-deep)}
.info-table tbody tr:nth-child(6n){--accent:var(--accent-danger)}
.faq-list{display:grid;gap:12px}
details{
  padding:0 20px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-soft)
}
summary{
  list-style:none;cursor:pointer;padding:18px 0;font-weight:800;position:relative;padding-right:24px
}
summary::-webkit-details-marker{display:none}
summary:after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--primary-dark)
}
details[open] summary:after{content:"−"}
.answer{padding:0 0 18px;color:var(--muted)}

.cta-panel{
  padding:28px;
  background:radial-gradient(circle at top left,rgba(220,232,255,.22),transparent 28%),linear-gradient(135deg,#172237 0%,#21406f 52%,#2f6bff 100%);
  color:#f7fbff;border:none;
}
.cta-panel p{color:rgba(247,251,255,.82)}
.cta-grid{grid-template-columns:1fr auto;align-items:end}

footer{padding:34px 0 44px}
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:var(--muted);font-size:.92rem
}
.foot nav{display:flex;gap:14px;flex-wrap:wrap}
.site-footer{
  margin-top:48px;
  padding:0;
  background:#ffffff;
  color:#435164;
  border-top:3px solid #ffffff;
  box-shadow:0 -14px 28px rgba(23,34,55,.04);
}
.site-footer-inner{
  width:min(calc(100% - 28px),var(--max));
  margin:0 auto;
  padding:42px 0 38px;
}
.site-footer-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:end;
}
.site-footer-company{
  margin:0 0 18px;
  font-size:1.95rem;
  line-height:1.15;
  letter-spacing:-.04em;
  color:#172237;
}
.site-footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  margin:0 0 10px;
  color:#4f6077;
  font-size:1rem;
}
.site-footer-meta span{
  position:relative;
}
.site-footer-meta span + span{
  padding-left:18px;
}
.site-footer-meta span + span:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:16px;
  background:#d8e0eb;
  transform:translateY(-50%);
}
.site-footer-copy{
  margin-top:24px;
  color:#7d8da2;
  font-size:.98rem;
}
.site-footer-side{
  display:grid;
  justify-items:end;
  gap:14px;
}
.site-footer-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  color:#172237;
  font-weight:700;
}
.site-footer-links a{opacity:.92}
.site-footer-links a:hover{opacity:1}
.site-footer-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.site-footer-select{
  min-width:210px;
  min-height:46px;
  border:1px solid #d7dee8;
  border-radius:8px;
  background:#ffffff;
  color:#172237;
  padding:0 14px;
  font-weight:700;
}
.site-footer-select option{
  color:#172237;
}
.site-footer-top{
  min-width:98px;
  min-height:62px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,#0d67d6,#0b58b8);
  color:#ffffff;
  font-size:1.02rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(13,86,179,.28);
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:120;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(18px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.site-footer-top:hover{
  transform:translateY(-1px);
}
.site-footer-top.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* ── 모바일 네비 역할 구분 스타일 ────────────────── */
.mobile-nav-divider{
  height:1px;background:var(--line);
  margin:6px 0;flex-shrink:0;
}
.mobile-nav-role-label{
  display:block;
  padding:8px 16px 2px;
  font-size:.7rem;font-weight:800;
  color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;flex-shrink:0;
}

/* ── 모바일 내비 패널: 항목 많을 때 스크롤 ── */
.mobile-nav{display:none;position:fixed;inset:0;z-index:80}
.mobile-nav.open{display:block}
.mobile-nav-backdrop{position:absolute;inset:0;background:rgba(23,34,55,.44);backdrop-filter:blur(4px)}
.mobile-nav-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(300px,82vw);
  background:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:8px;
  transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  box-shadow:0 18px 40px rgba(23,34,55,.16);
  overflow-y:auto;   /* 항목 많을 때 패널 내부 스크롤 */
}
.mobile-nav.open .mobile-nav-panel{transform:translateX(0)}
.mobile-nav-close{
  align-self:flex-end;border:0;background:none;color:var(--muted);font-size:1.4rem;
  cursor:pointer;padding:4px 8px;border-radius:8px;margin-bottom:8px
}
.mobile-nav-close:hover{background:var(--surface-strong)}
.mobile-nav-panel a{
  padding:13px 16px;border-radius:12px;font-weight:700;color:var(--ink);border:1px solid transparent
}
.mobile-nav-panel a:hover,.mobile-nav-panel a[aria-current="page"]{background:var(--surface-strong);border-color:#d6e5ff}

/* ── 태블릿 (1080px 이하): 그리드 축소 + 헤더 우측 버튼 소형화 ── */
@media(max-width:1080px){
  .hero-grid,.grid-2,.metric-grid,.cta-grid{grid-template-columns:1fr}
  .grid-4,.story-grid,.partner-grid,.contact-grid,.page-links{grid-template-columns:repeat(2,1fr)}
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr)}
  /* 헤더 우측 평가 버튼 여백 축소 */
  .nav-cta-edge{padding:0 18px;font-size:.88rem;gap:6px}
  /* 아바타 이름 텍스트 숨기기 (아이콘 원형 + 역할만 유지) */
  .h-avatar-name{font-size:.8rem}
  .h-avatar-role{font-size:.68rem}
  /* 아바타 드롭다운: 오른쪽 끝 기준 클램핑 (뷰포트 밖으로 나가지 않게) */
  .avatar-dropdown{right:0}
}
/* ── 1500px 이하: 메뉴 소형화 + 아바타 텍스트 축소 ── */
@media(max-width:1500px){
  .menu{gap:2px}
  .menu a{padding:8px 8px;font-size:.82rem}
  /* 아바타 이름·역할 숨김 — 우측 영역 폭 절감 */
  .h-avatar-name{display:none}
  .h-avatar-role{display:none}
}
/* ── 1400px 이하: 햄버거 전환 (헤더 nav 숨김) ── */
@media(max-width:1400px){
  .menu{display:none}
  .menu-toggle{display:inline-flex}
  /* 헤더 우측 버튼·아바타 숨김 (모바일 네비에서 접근 가능) */
  .nav-cta-edge{display:none}
  .header-avatar-wrap{display:none}
}
/* ── 820px 이하: 모바일 레이아웃 ── */
@media(max-width:820px){
  .page-links,.grid-3,.grid-4,.grid-5,.timeline,.story-grid,.partner-grid,.contact-grid,.stat-grid,.heat-grid{grid-template-columns:1fr}
  .timeline:before{display:none}
  .hero-copy,.hero-side,.card,.panel,.story-card,.notice-card,.partner-card,.contact-card,.faq-card,.cta-panel{padding:22px}
  .foot{display:grid;gap:10px}
  .site-footer-grid{grid-template-columns:1fr}
  .site-footer-side{justify-items:start}
  .site-footer-links,.site-footer-actions{justify-content:flex-start}
}
@media(max-width:560px){
  .wrap{width:min(calc(100% - 22px),var(--max))}
  .actions,.chips,.tag-list,.foot nav{gap:8px}
  .btn,.btn-secondary,.btn-dark{width:100%}
  .bar{grid-template-columns:1fr;gap:6px}
  .site-footer-inner{width:min(calc(100% - 22px),var(--max));padding:34px 0}
  .site-footer-company{font-size:1.7rem}
  .site-footer-meta{display:grid;gap:8px}
  .site-footer-meta span + span{padding-left:0}
  .site-footer-meta span + span:before{display:none}
  .site-footer-select{width:100%}
  .site-footer-top{right:16px;bottom:16px;min-width:88px;min-height:56px}
  .info-table thead{display:none}
  .info-table,.info-table tbody,.info-table tr,.info-table td{display:block;width:100%}
  .info-table tbody td{padding:10px 14px}
  .info-table tbody tr{padding:6px 0;border-bottom:1px solid #edf1f6}
}