/* =========================================================
   한국금융IT기술협회 (KFITA) - Common Stylesheet
   ========================================================= */
:root {
  /* Primary palette (from user color chips) */
  --red: #1d6de4;        /* primary blue */
  --red-dark: #1a51ad;   /* dark blue */
  --blue-soft: #8ba3cf;  /* soft blue */
  --navy: #1b2a4a;
  --ink: #222;
  --gray: #666;
  --gray-light: #999;
  --line: #e5e5e5;
  --bg-soft: #f7f8fa;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
  font-weight: 500;
  background: #fff;
}

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; vertical-align: middle; }

.inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Top utility bar ---------- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
}
.topbar .inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  height: 38px;
  color: var(--gray);
}
.topbar a:hover { color: var(--red); }
.topbar .tel {
  background: var(--red);
  color: #fff;
  padding: 4px 14px;
  border-radius: 3px;
  font-weight: 700;
}

/* ---------- Header / Nav ---------- */
header.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 46px; width: auto; display: block; }
.logo .logo-mark {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--red) 0%, var(--navy) 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 15px;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}
.logo .logo-text { line-height: 1.25; }
.logo .logo-text strong {
  display: block; font-size: 19px; color: var(--navy); letter-spacing: -0.5px;
}
.logo .logo-text span { font-size: 11.5px; color: var(--gray-light); letter-spacing: 0.5px; }

nav.gnb ul { display: flex; }
nav.gnb > ul > li { position: relative; }
nav.gnb > ul > li > a {
  display: block;
  padding: 26px 44px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s;
}
nav.gnb > ul > li > a:hover,
nav.gnb > ul > li.active > a {
  color: var(--red);
  border-bottom-color: var(--red);
}
/* --- Mega menu (sitemap style: all submenus open together) --- */
nav.gnb .sub {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  width: max-content;
  min-width: 100%;
  padding: 14px 0 26px;
  text-align: left;
}
header.site-header.mega-open nav.gnb .sub { display: block; }
nav.gnb .sub a {
  display: block;
  padding: 9px 14px 9px 44px; /* 1뎁스 텍스트 시작점과 좌측 정렬 */
  font-size: 14.5px;
  color: var(--gray);
}
nav.gnb .sub a:hover { color: var(--red); font-weight: 700; }

.mega-bg {
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 26px rgba(0,0,0,.06);
  overflow: hidden;
  transition: height .25s ease;
  z-index: -1;
}
header.site-header.mega-open .mega-bg { height: 185px; }
header.site-header.mega-open nav.gnb > ul > li > a { border-bottom-color: transparent; }
header.site-header.mega-open nav.gnb > ul > li:hover > a,
header.site-header.mega-open nav.gnb > ul > li.active > a { border-bottom-color: var(--red); }

/* mobile menu button */
.menu-btn {
  display: none;
  background: none; border: none;
  font-size: 26px; color: var(--navy);
  cursor: pointer;
}

/* ---------- Hero (main) ---------- */
.hero {
  /* ▼ 배경 이미지 넣을 때: 아래 background 를 지우고 주석 해제 후 경로만 바꾸세요.
     background:
       linear-gradient(rgba(20, 30, 55, .68), rgba(20, 30, 55, .68)),
       url('../images/main-visual.jpg') center / cover no-repeat;  */
  background:
    linear-gradient(rgba(20, 30, 55, .78), rgba(20, 30, 55, .78)),
    linear-gradient(135deg, #24365e 0%, #0e1730 60%, #10214a 100%);
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 280px 20px 300px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(29,109,228,.3) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(70,110,200,.25) 0, transparent 45%);
}
.hero .inner { position: relative; }
.hero h2 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.4;
  margin-bottom: 18px;
}
.hero p { font-size: 18px; color: rgba(255,255,255,.85); margin-bottom: 34px; }
.hero .badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 10px 28px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 700;
}


/* hero background video + dim */
.hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #10214a; /* 첫 프레임 로딩 전 검은색 대신 남색 */
  z-index: 0;
}
.hero .hero-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 30%, rgba(29,109,228,.22) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(70,110,200,.18) 0, transparent 45%),
    rgba(20, 30, 55, .52);
}
.hero h2, .hero p { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero .inner { z-index: 2; }

/* ---------- Sub page banner ---------- */
.sub-banner {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: 84px 20px;
}
/* 배경을 별도 레이어로 분리 → 블러업 로드 효과 (글씨는 위 레이어라 선명) */
.sub-banner::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: 0;
  background:
    linear-gradient(rgba(20, 30, 55, .75), rgba(20, 30, 55, .75)),
    linear-gradient(120deg, #24365e, #101a33);
  background-size: cover;
  background-position: center;
  animation: subBlurUp 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.sub-banner > * { position: relative; z-index: 1; }
@keyframes subBlurUp {
  0%   { filter: blur(22px); transform: scale(1.08); opacity: .35; }
  60%  { opacity: 1; }
  100% { filter: blur(0);    transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-banner::before { animation: none; }
}
.sub-banner h2 { font-size: 34px; font-weight: 800; letter-spacing: -1px; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.sub-banner p { margin-top: 8px; color: rgba(255,255,255,.85); font-size: 15px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* 페이지별 서브비주얼 배경 (네이비 딤 + 이미지) */
.sub-banner.sb-about::before,
.sub-banner.sb-greeting::before,
.sub-banner.sb-vision::before {
  background:
    linear-gradient(rgba(20,30,55,.58), rgba(20,30,55,.58)),
    url('../images/sub-about.jpg') center 40% / cover no-repeat;
}
.sub-banner.sb-business::before {
  background:
    linear-gradient(rgba(20,30,55,.58), rgba(20,30,55,.58)),
    url('../images/sub-business.jpg') center / cover no-repeat;
}
.sub-banner.sb-membership::before {
  background:
    linear-gradient(rgba(20,30,55,.58), rgba(20,30,55,.58)),
    url('../images/sub-membership.jpg') center 35% / cover no-repeat;
}
.sub-banner.sb-notice::before {
  background:
    linear-gradient(rgba(20,30,55,.58), rgba(20,30,55,.58)),
    url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=1600&q=70') center / cover no-repeat;
}
.sub-banner.sb-contact::before {
  background:
    linear-gradient(rgba(20,30,55,.58), rgba(20,30,55,.58)),
    url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1600&q=70') center / cover no-repeat;
}

/* breadcrumb */
.breadcrumb {
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--gray);
}
.breadcrumb .inner {
  display: flex; align-items: center; gap: 8px; height: 48px;
}
.breadcrumb .sep { color: #ccc; }
.breadcrumb strong { color: var(--red); font-weight: 500; }

/* ---------- Sections ---------- */
section.block { padding: 80px 0; }
section.block.soft { background: var(--bg-soft); }

.sec-title { text-align: center; margin-bottom: 50px; }
.sec-title h3 {
  font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -1px;
}
.sec-title h3::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  background: var(--red);
  margin: 16px auto 0;
}
.sec-title p { margin-top: 14px; color: var(--gray); font-size: 15.5px; }

/* card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 36px 28px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  border-color: var(--red);
}
.card .icon {
  width: 54px; height: 54px;
  background: rgba(29,109,228,.08);
  color: var(--red);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
}
.card h4 { font-size: 18.5px; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.5px; }
.card p { font-size: 14.5px; color: var(--gray); }

/* ---------- Business slider (main) ---------- */
.biz-section { padding: 80px 0 0; position: relative; }
.biz-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: #232a41;
  z-index: 0;
}
.biz-section .inner { position: relative; z-index: 1; }

.biz-slider { position: relative; }
.biz-slide {
  display: none;
  grid-template-columns: 1.05fr 1fr;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
  min-height: 430px;
}
.biz-slide.on { display: grid; }

.biz-slide .visual {
  position: relative;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.biz-slide .visual .ph-icon { font-size: 90px; opacity: .35; filter: grayscale(20%); }
.biz-slide .visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(20,30,55,.25), rgba(29,109,228,.15));
}
/* placeholder gradients per slide — 이미지 넣을 땐 인라인 style의 background-image만 교체 */
.v1 { background: linear-gradient(135deg, #16233f, #1d6de4); }
.v2 { background: linear-gradient(135deg, #101a33, #3a7bd5); }
.v3 { background: linear-gradient(135deg, #1a2c50, #6d9ee8); }
.v4 { background: linear-gradient(135deg, #0e1730, #1a51ad); }

.biz-slide .desc {
  position: relative;
  padding: 64px 60px 56px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.biz-slide .desc .big-num {
  position: absolute;
  top: 18px; right: 34px;
  font-size: 130px;
  font-weight: 900;
  line-height: 1;
  color: #f0f2f6;
  letter-spacing: -4px;
  user-select: none;
}
.biz-slide .desc .eyebrow {
  position: relative;
  font-size: 13.5px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 14px;
}
.biz-slide .desc h4 {
  position: relative;
  font-size: 34px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -1px;
  margin-bottom: 26px;
}
.biz-slide .desc p {
  position: relative;
  font-size: 15.5px;
  color: var(--gray);
  line-height: 1.9;
  flex: 1;
}
.biz-slide .desc .more {
  position: relative;
  align-self: flex-start;
  border: 1px solid #d5d8de;
  padding: 13px 46px;
  font-size: 14.5px;
  color: var(--ink);
  transition: all .25s;
}
.biz-slide .desc .more:hover { background: var(--red); border-color: var(--red); color: #fff; }

.biz-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  background: rgba(20,25,40,.55);
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: background .2s;
}
.biz-arrow:hover { background: var(--red); }
.biz-arrow.prev { left: -26px; }
.biz-arrow.next { right: -26px; }

.biz-dots { text-align: center; padding: 26px 0 0; position: relative; z-index: 1; }
.biz-dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.35);
  margin: 0 5px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.biz-dots button.on { background: #fff; transform: scale(1.25); }

/* quick links on dark strip */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  padding: 46px 0 70px;
  position: relative;
  z-index: 1;
}
.quick-grid .q {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 30px 30px;
  color: #fff;
  transition: background .25s, transform .25s;
}
.quick-grid .q:hover { background: var(--red); transform: translateY(-4px); }
.quick-grid .q .q-icon { font-size: 38px; }
.quick-grid .q h5 { font-size: 18px; margin-bottom: 4px; letter-spacing: -0.5px; }
.quick-grid .q p { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.55; }

/* ---------- News cards (main) ---------- */
.news-section { padding: 90px 0 70px; background: #fff; }
.news-track-wrap { overflow: hidden; }
.news-track {
  display: flex;
  gap: 24px;
  transition: transform .4s ease;
}
.news-card {
  flex: 0 0 calc((100% - 72px) / 4);
  background: var(--bg-soft);
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,.1); }
.news-card .thumb {
  aspect-ratio: 16 / 11;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 78px;
}
/* placeholder gradients — 이미지 넣을 땐 인라인 style로 background-image 지정 */
.t1 { background: linear-gradient(135deg, #dbe6f6, #8ba3cf); }
.t2 { background: linear-gradient(135deg, #cfe0fa, #6d9ee8); }
.t3 { background: linear-gradient(135deg, #e3ecf9, #9db9e8); }
.t4 { background: linear-gradient(135deg, #d5def0, #7c96c8); }
.news-card .nbody { padding: 22px 20px 30px; }
.news-card .nbody h5 {
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-card:hover .nbody h5 { color: var(--red); }
.news-card .nbody .ndate { font-size: 13px; color: var(--gray-light); margin-bottom: 10px; }
.news-card .nbody p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-nav { display: flex; justify-content: space-between; margin-top: 34px; }
.news-nav button {
  width: 48px; height: 48px;
  background: #232a41;
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s;
}
.news-nav button:hover { background: var(--red); }

/* notice preview (main) */
.notice-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.notice-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.notice-list li a { color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-list li a:hover { color: var(--red); }
.notice-list .date { color: var(--gray-light); font-size: 13.5px; flex-shrink: 0; }
.notice-list .tag {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  padding: 1px 8px;
}

.contact-box {
  /* 배경 이미지 위에 네이비 딤 (글씨 가독성 우선) */
  background:
    linear-gradient(rgba(27,42,74,.62), rgba(27,42,74,.62)),
    url('../images/inquiry.jpg') center / cover no-repeat;
  color: #fff;
  border-radius: 8px;
  padding: 34px 30px;
}
.contact-box h4, .contact-box p { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.contact-box h4 { font-size: 19px; margin-bottom: 16px; }
.contact-box p { font-size: 14.5px; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.contact-box .mail {
  display: inline-block;
  margin-top: 14px;
  background: var(--red);
  padding: 9px 22px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
}
.contact-box .mail:hover { background: var(--red-dark); }

/* ---------- Content (sub pages) ---------- */
.content { padding: 70px 0 100px; }
.content h3.page-title {
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -1px;
  margin-bottom: 8px;
}
.content p.page-desc { text-align: center; color: var(--gray); margin-bottom: 56px; font-size: 15.5px; }
.content h3.page-title::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  background: var(--red);
  margin: 16px auto 24px;
}

.content h4.sub-heading {
  font-size: 21px;
  color: var(--navy);
  margin: 48px 0 18px;
  padding-left: 14px;
  border-left: 4px solid var(--red);
  letter-spacing: -0.5px;
}
.content p.text { color: #444; margin-bottom: 16px; font-size: 15.5px; }

/* greeting */
.greeting-box {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
}
.greeting-box .quote {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.6;
  letter-spacing: -0.5px;
  margin-bottom: 40px;
}
.greeting-box .quote em { color: var(--red); font-style: normal; }
.sign { text-align: right; margin-top: 44px; font-size: 15.5px; color: var(--gray); }
.sign strong { font-size: 20px; color: var(--ink); margin-left: 8px; }

/* CEO Message (대표자 인사말) */
.ceo-msg {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 40px;
  align-items: start;
}
.ceo-label {
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: -0.5px;
}
/* 헤딩·문단·이미지·본문이 모두 같은 왼쪽 라인에 정렬 */
.ceo-col { min-width: 0; }
.ceo-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -1.5px;
  margin-bottom: 26px;
}
.ceo-title em { color: var(--red); font-style: normal; }
.ceo-col .lead { font-size: 17px; line-height: 1.9; color: #444; }
.ceo-body { margin-top: 34px; }
.ceo-body p { font-size: 16px; line-height: 1.95; color: #555; margin-bottom: 16px; }
@media (max-width: 760px) {
  .ceo-msg { grid-template-columns: 1fr; gap: 14px; }
  .ceo-label { font-size: 26px; }
  .ceo-title { font-size: 26px; letter-spacing: -1px; }
}

/* 주요 사업 페이지 인트로 (CEO 인사말 스타일: 크고 중앙정렬) */
.biz-intro {
  text-align: center;
  max-width: 1160px;
  margin: 10px auto 54px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -1.4px;
  color: var(--navy);
}
.biz-intro em { color: var(--red); font-style: normal; }
@media (max-width: 760px) {
  .biz-intro { font-size: 22px; margin-bottom: 40px; }
}

/* FAQ 아코디언 */
.faq { margin-bottom: 20px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
}
.faq details[open] { border-color: var(--red); box-shadow: 0 6px 18px rgba(29,109,228,.08); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q";
  color: var(--red);
  font-weight: 800;
  margin-right: 12px;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--gray);
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "\2212"; color: var(--red); }
.faq summary:hover { color: var(--red); }
.faq .faq-a {
  position: relative;
  padding: 4px 24px 22px 48px;
  font-size: 15.5px;
  line-height: 1.85;
  color: #555;
}
.faq .faq-a::before {
  content: "A";
  position: absolute;
  left: 24px; top: 4px;
  color: var(--navy);
  font-weight: 800;
}
.faq .faq-a a { color: var(--red); font-weight: 600; }
@media (max-width: 600px) {
  .faq summary { padding: 16px 44px 16px 18px; font-size: 15.5px; }
  .faq .faq-a { padding: 0 18px 18px 34px; }
}

/* info table */
table.info-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--navy); font-size: 15px; }
table.info-table th, table.info-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; }
table.info-table th { background: var(--bg-soft); color: var(--navy); width: 180px; font-weight: 700; }
table.info-table td { color: #444; }

/* numbered business list */
.biz-list { counter-reset: biz; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.biz-list li {
  counter-increment: biz;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px 22px 66px;
  position: relative;
  font-size: 15px;
  color: #444;
  transition: border-color .2s, box-shadow .2s;
}
.biz-list li:hover { border-color: var(--red); box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.biz-list li::before {
  content: counter(biz, decimal-leading-zero);
  position: absolute;
  left: 20px; top: 20px;
  font-size: 17px;
  font-weight: 800;
  color: var(--red);
}
.biz-list li strong { display: block; color: var(--navy); font-size: 16px; margin-bottom: 4px; }

/* vision */
.vision-hero {
  /* 데이터센터 이미지 위에 네이비 딤 (글씨 가독성) */
  background:
    linear-gradient(rgba(20,30,55,.82), rgba(20,30,55,.86)),
    url('../images/vision-bg.jpg') center / cover no-repeat;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 56px 30px;
  margin-bottom: 40px;
}
.vision-hero .label {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 20px;
  font-size: 12.5px;
  padding: 3px 16px;
  letter-spacing: 2px;
  margin-bottom: 18px;
  color: rgba(255,255,255,.8);
}
.vision-hero h4 { font-size: 26px; line-height: 1.55; font-weight: 700; letter-spacing: -0.5px; }
.vision-hero h4 em { color: #8fb4ff; font-style: normal; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-grid .val {
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 0 0 8px 8px;
  padding: 28px 24px;
  background: #fff;
}
.value-grid .val h5 { color: var(--navy); font-size: 17px; margin-bottom: 10px; }
.value-grid .val p { font-size: 14px; color: var(--gray); }

/* membership */
.member-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 26px 0 10px; }
.member-steps .step {
  background: var(--bg-soft);
  border-radius: 8px;
  text-align: center;
  padding: 28px 14px;
  position: relative;
}
.member-steps .step .num {
  width: 34px; height: 34px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  margin: 0 auto 14px;
  font-size: 15px;
}
.member-steps .step h5 { color: var(--navy); font-size: 15.5px; margin-bottom: 6px; }
.member-steps .step p { font-size: 13px; color: var(--gray); }

/* notice board */
table.board { width: 100%; border-collapse: collapse; border-top: 2px solid var(--navy); font-size: 15px; }
table.board th { background: var(--bg-soft); padding: 13px 10px; color: var(--navy); border-bottom: 1px solid var(--line); font-size: 14.5px; }
table.board td { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: center; color: var(--gray); }
table.board td.subject { text-align: left; color: var(--ink); }
table.board td.subject a:hover { color: var(--red); text-decoration: underline; }
table.board .tag {
  display: inline-block;
  font-size: 12px;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  padding: 0 8px;
  margin-right: 8px;
}
.board-empty { text-align: center; color: var(--gray-light); padding: 60px 0 !important; }

/* contact / map */
.map-placeholder {
  background: var(--bg-soft);
  border: 1px dashed #ccc;
  border-radius: 8px;
  height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gray-light);
  gap: 8px;
  margin-bottom: 36px;
  text-align: center;
}
.map-placeholder .pin { font-size: 38px; }
.map-embed { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.06); }

/* ---------- CTA strip ---------- */
.cta-strip {
  /* 배경 이미지 위에 파란색 70% 딤 (히어로 영역과 동일한 방식) */
  background:
    linear-gradient(120deg, rgba(16,30,102,.78) 0%, rgba(9,20,74,.84) 100%),
    url('../images/cta-bg.jpg') center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 56px 20px;
}
.cta-strip h3, .cta-strip p { text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.5); }
.cta-strip h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 10px; }
.cta-strip p { color: rgba(255,255,255,.9); margin-bottom: 24px; font-size: 15px; }
.cta-strip a {
  display: inline-block;
  background: #fff;
  color: var(--red);
  font-weight: 800;
  padding: 12px 34px;
  border-radius: 3px;
  font-size: 15px;
}
.cta-strip a:hover { background: #e7efff; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: #17203a;
  color: rgba(255,255,255,.65);
  font-size: 13.5px;
  padding: 44px 0;
}
footer .inner {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
footer .f-logo { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 14px; letter-spacing: -0.5px; }
footer p { margin-bottom: 5px; }
footer .copy { margin-top: 14px; color: rgba(255,255,255,.4); }
footer .f-links a { display: block; margin-bottom: 8px; }
footer .f-links a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .menu-btn { display: block; }
  nav.gnb {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
  }
  nav.gnb.open { display: block; }
  nav.gnb ul { flex-direction: column; }
  nav.gnb > ul > li > a { padding: 14px 24px; border-bottom: 1px solid #f2f2f2; }
  nav.gnb .sub { position: static; transform: none; display: block; width: auto; min-width: 0; padding: 0; background: var(--bg-soft); }
  nav.gnb .sub a { text-align: left; padding: 10px 16px 10px 40px; border-bottom: 1px solid #eee; }
  .mega-bg { display: none; }

  .hero h2 { font-size: 30px; }
  .card-grid, .value-grid { grid-template-columns: 1fr; }
  .biz-list { grid-template-columns: 1fr; }
  .notice-wrap { grid-template-columns: 1fr; }
  .member-steps { grid-template-columns: repeat(2, 1fr); }
  table.info-table th { width: 110px; }

  .biz-slide { grid-template-columns: 1fr; }
  .biz-slide .desc { padding: 40px 28px; }
  .biz-slide .desc h4 { font-size: 26px; }
  .biz-slide .desc .big-num { font-size: 90px; right: 20px; }
  .biz-arrow.prev { left: 8px; }
  .biz-arrow.next { right: 8px; }
  .quick-grid { grid-template-columns: 1fr; }

  /* 화살표 제거 → 모바일에선 좌우 스와이프로 카드 열람 */
  .news-track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .news-track { transform: none !important; }
  .news-card { flex: 0 0 calc((100% - 24px) / 2); scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .news-card { flex: 0 0 82%; }
}


/* ===== 2026-07 content expansion ===== */
header.site-header.mega-open .mega-bg{height:305px}
nav.gnb .sub{padding-bottom:30px}
nav.gnb .sub a{padding-top:7px;padding-bottom:7px}
.hero-kicker{display:block;font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.78);margin-bottom:18px;font-weight:700}
.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:34px}.hero-actions a{background:var(--red);color:#fff;padding:12px 28px;border:1px solid var(--red);font-size:14px;font-weight:700}.hero-actions a.outline{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.65)}.hero-actions a:hover{background:var(--red-dark)}
.intro-section{padding-top:88px!important}.mission-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.mission-cards>div{position:relative;border:1px solid var(--line);padding:30px 28px;background:#fff}.mission-cards b{display:block;color:#cdd8ea;font-size:34px;line-height:1;margin-bottom:18px}.mission-cards strong{display:block;color:var(--navy);font-size:20px;margin-bottom:10px}.mission-cards p{color:var(--gray);font-size:14.5px}
.v5{background:linear-gradient(135deg,#24365e,#8ba3cf)}.v5:before{content:'🎓';font-size:100px;filter:grayscale(.2);opacity:.55}.quick-grid.four{grid-template-columns:repeat(4,1fr);gap:18px}.quick-grid.four .q{padding:26px 20px;gap:16px}.quick-grid.four .q-icon{font-size:31px}.quick-grid.four .q h5{font-size:16px}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.plan-grid a{display:block;border:1px solid var(--line);padding:28px 24px;background:#fff;transition:.2s}.plan-grid a:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:0 12px 28px rgba(0,0,0,.08)}.plan-grid span{font-size:11px;letter-spacing:2px;color:var(--red);font-weight:800}.plan-grid h5{font-size:18px;color:var(--navy);margin:8px 0 10px}.plan-grid p{font-size:14px;color:var(--gray)}
.sec-title.left{text-align:left;margin-bottom:22px}.sec-title.left h3{font-size:25px}.sec-title.left h3:after{margin-left:0}.lead-copy{max-width:900px;margin:-34px auto 42px;text-align:center;color:#555;font-size:16px;line-height:1.95}.text-link{color:var(--red);font-weight:700}
.principle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.principle-grid>div{background:var(--bg-soft);padding:26px;border-left:4px solid var(--red)}.principle-grid strong{display:block;color:var(--navy);font-size:17px;margin-bottom:7px}.principle-grid p{color:var(--gray);font-size:14.5px}
.prose-box{background:var(--bg-soft);border-radius:8px;padding:30px 34px}.prose-box p{font-size:15.5px;color:#444;margin-bottom:12px}.prose-box p:last-child{margin-bottom:0}.mission-list{display:grid;gap:14px;counter-reset:mission}.mission-list li{counter-increment:mission;display:grid;grid-template-columns:230px 1fr;gap:22px;padding:22px 24px 22px 70px;border:1px solid var(--line);position:relative}.mission-list li:before{content:counter(mission,decimal-leading-zero);position:absolute;left:22px;top:20px;color:var(--red);font-weight:900}.mission-list strong{color:var(--navy)}.mission-list span{color:var(--gray);font-size:14.5px}.value-grid small{color:var(--gray-light);font-size:11px;margin-left:6px}
.org-chart{max-width:850px;margin:20px auto 50px;text-align:center}.org-top,.org-box{border:2px solid var(--navy);background:#fff;padding:18px 20px;font-size:20px;font-weight:800;color:var(--navy);border-radius:6px}.org-top{max-width:270px;margin:auto;background:var(--navy);color:#fff}.org-top small,.org-box small{display:block;font-size:12px;font-weight:500;margin-top:4px;color:inherit;opacity:.75}.org-line{width:2px;height:34px;background:#b9c3d5;margin:auto}.org-row{display:grid;grid-template-columns:2fr 1fr;gap:40px}.org-box.audit{border-color:var(--red);color:var(--red)}.org-box.office{max-width:420px;margin:auto;background:#eef4ff;border-color:var(--red);color:var(--red)}.org-subrow{display:flex;justify-content:center;gap:14px;margin-top:20px}.org-subrow span{background:var(--bg-soft);border:1px solid var(--line);padding:10px 18px;font-size:13px;color:var(--gray)}.staffing thead th{text-align:center}.staffing td{text-align:center}.note-box{margin-top:30px;background:#eef4ff;border:1px solid #cbdcff;border-radius:8px;padding:24px 28px}.note-box strong{display:block;color:var(--red);margin-bottom:6px}.note-box p{font-size:14.5px;color:#4c5f7d}
.business-overview{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.business-overview a{border:1px solid var(--line);padding:24px 20px;min-height:235px;transition:.2s}.business-overview a:hover{border-color:var(--red);transform:translateY(-5px);box-shadow:0 12px 28px rgba(0,0,0,.08)}.business-overview b{font-size:32px;color:#d6deeb}.business-overview h4{font-size:17px;color:var(--navy);margin:18px 0 10px;line-height:1.45}.business-overview p{font-size:13.5px;color:var(--gray)}.goal-list{counter-reset:goal;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.goal-list li{counter-increment:goal;padding:22px 22px 22px 62px;background:var(--bg-soft);position:relative;font-size:15px;color:#444}.goal-list li:before{content:counter(goal);position:absolute;left:20px;top:18px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;text-align:center;line-height:28px;font-weight:800}.timeline-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.timeline-grid>div{border-top:3px solid var(--red);background:var(--bg-soft);padding:22px 18px}.timeline-grid span{font-size:12px;color:var(--red);font-weight:800}.timeline-grid strong{display:block;font-size:15.5px;color:var(--navy);margin:8px 0}.timeline-grid p{font-size:13px;color:var(--gray)}.cta-panel{margin-top:46px;background:var(--navy);color:#fff;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px}.cta-panel strong{font-size:19px}.cta-panel p{font-size:14px;color:rgba(255,255,255,.75);margin-top:5px}.cta-panel a{background:var(--red);padding:11px 25px;font-size:14px;font-weight:700;white-space:nowrap}
.detail-list{display:grid;gap:12px}.detail-list li{display:grid;grid-template-columns:250px 1fr;gap:20px;border-bottom:1px solid var(--line);padding:18px 12px}.detail-list strong{color:var(--navy)}.detail-list span{font-size:14.5px;color:var(--gray)}.process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.process-row>div{background:var(--bg-soft);text-align:center;padding:22px 10px;position:relative}.process-row b{display:block;color:var(--red);font-size:13px;margin-bottom:7px}.process-row span{font-size:14px;color:var(--navy);font-weight:700}.topic-tags{display:flex;flex-wrap:wrap;gap:10px}.topic-tags span{background:#eef4ff;color:#38527d;border:1px solid #d3e0f6;padding:9px 15px;border-radius:24px;font-size:13.5px}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.audience-grid>div{background:var(--navy);color:#fff;text-align:center;padding:30px 20px;font-size:19px;font-weight:800}.audience-grid small{display:block;color:rgba(255,255,255,.7);font-size:13px;font-weight:400;margin-top:8px}
.member-types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.member-types>div{border:1px solid var(--line);padding:26px 22px;position:relative}.member-types b{display:block;color:var(--navy);font-size:20px;margin-bottom:12px}.member-types p{font-size:14px;color:var(--gray);min-height:112px}.member-types span{display:inline-block;background:#eef4ff;color:var(--red);font-size:12px;padding:5px 10px;border-radius:20px}.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.panel{background:var(--bg-soft);padding:28px}.panel h5{font-size:19px;color:var(--navy);margin-bottom:14px}.panel li{list-style:disc;margin-left:20px;color:#555;font-size:14.5px;margin-bottom:8px}.contact-action{margin-top:42px;text-align:center;padding:34px;background:var(--bg-soft)}.contact-action p{font-size:14px;color:var(--gray)}.contact-action a{display:block;color:var(--red);font-size:23px;font-weight:800;margin:4px}.contact-action span{color:var(--navy);font-weight:700}
.charter-head{display:flex;justify-content:space-between;align-items:end;gap:20px;border-bottom:2px solid var(--navy);padding-bottom:24px}.charter-head span{font-size:11px;letter-spacing:2px;color:var(--red);font-weight:800}.charter-head h3{font-size:30px;color:var(--navy);margin:5px 0}.charter-head p{font-size:14px;color:var(--gray)}.download-btn{background:var(--red);color:#fff;padding:12px 20px;font-size:14px;font-weight:700;white-space:nowrap}.source-note{margin:20px 0;background:#fff8e8;border:1px solid #f1dfb1;padding:14px 18px;color:#765f26;font-size:13px}.charter-layout{display:grid;grid-template-columns:210px 1fr;gap:36px;align-items:start}.charter-toc{position:sticky;top:140px;background:var(--bg-soft);padding:20px}.charter-toc strong{display:block;color:var(--navy);margin-bottom:10px}.charter-toc a{display:block;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--gray)}.charter-toc a:hover{color:var(--red)}.charter-chapter{scroll-margin-top:140px;margin-bottom:50px}.charter-chapter>h4{font-size:23px;color:#fff;background:var(--navy);padding:13px 18px}.article-block{padding:22px 18px;border-bottom:1px solid var(--line)}.article-block h5{font-size:17px;color:var(--navy);margin-bottom:10px}.article-block p,.article-block li{font-size:14.5px;color:#444;line-height:1.9}.article-block ol{counter-reset:item;margin-top:8px}.article-block li{counter-increment:item;padding-left:28px;position:relative;margin-bottom:3px}.article-block li:before{content:counter(item)'.';position:absolute;left:2px;color:var(--red);font-weight:700}
@media(max-width:1100px){nav.gnb>ul>li>a{padding-left:26px;padding-right:26px}.quick-grid.four,.business-overview,.timeline-grid{grid-template-columns:repeat(2,1fr)}.plan-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){header.site-header.mega-open .mega-bg{height:0}.mission-cards,.plan-grid,.principle-grid,.goal-list,.audience-grid,.member-types,.two-col{grid-template-columns:1fr}.quick-grid.four,.business-overview,.timeline-grid{grid-template-columns:1fr}.charter-layout{grid-template-columns:1fr}.charter-toc{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:0 15px}.charter-toc strong{grid-column:1/-1}.org-row{gap:14px}.detail-list li,.mission-list li{grid-template-columns:1fr;gap:6px}.process-row{grid-template-columns:repeat(2,1fr)}.member-types p{min-height:0}}
@media(max-width:600px){.hero-actions{flex-direction:column;align-items:center}.mission-cards{grid-template-columns:1fr}.org-row{grid-template-columns:1fr}.org-subrow{flex-direction:column}.charter-head{align-items:flex-start;flex-direction:column}.charter-toc{grid-template-columns:1fr}.process-row{grid-template-columns:1fr}.cta-panel{align-items:flex-start;flex-direction:column}.topbar .inner span:not(.tel){display:none}.lead-copy{margin-top:-20px}.business-overview a{min-height:0}}