:root{
  /* 라이트 테마 */
  --bg:#fafafa;
  --text:#111111;
  --muted:#4b5563;
  --line:#e5e7eb;

  --primary:#0b3a8f;        /* 포인트 딥블루(텍스트/버튼 등) */
  --primary-ghost:#eff6ff;
  --panel:#ffffff;
}

html, body {
  touch-action: manipulation; /* 더블탭 확대 감소(지원 브라우저) */
  -webkit-text-size-adjust: 100%;
}

/* 리셋(간단) */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Apple SD Gothic Neo, Malgun Gothic, Helvetica, Arial, sans-serif;
}
/* 모바일 헤더 */
.mobile-header {
  display:none; /* 기본은 숨김 (데스크톱에서 안 보임) */
  position:fixed; top:0; left:0; right:0;
  height:56px; background:#fff;
  border-bottom:1px solid var(--line);
  justify-content:space-between; align-items:center;
  padding:0 16px;
  z-index:1001;
}
.mobile-header .mobile-brand img{
  height:28px;
}
.hamburger {
  font-size:24px;
  background:none;
  border:none;
  cursor:pointer;
}

/* 사이드 내비 (모바일에서 토글) */
.side-nav {
  transition:transform .3s ease;
  z-index:1000;
}
.side-nav.active {
  transform:translateX(0);
}
/* 좌측 고정 내비 */
.side-nav{
  position:fixed; inset:0 auto 0 0;
  width:220px; background:#ffffff;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:16px;
  padding:18px 16px;
}
.side-nav .brand{
  display:flex; align-items:center; gap:10px;
}
.side-nav .brand img{
  width:100%; height:28px; object-fit:contain;
}
.side-nav .brand span{
  font-weight:700; color:#0f172a; letter-spacing:0.2px;
}

.side-nav nav ul{list-style:none; padding:0; margin:6px 0}
.side-nav nav li{margin:6px 0}
.side-nav nav a{
  display:block; padding:10px 8px; color:#111827;
  text-decoration:none; border-radius:6px;
}
.side-nav nav a:hover{background:#f3f4f6}

.lang{margin-top:auto; display:flex; gap:6px}
.lang-btn{
  flex:1; padding:8px 6px; border:1px solid var(--line);
  background:#ffffff; color:#374151; cursor:pointer; border-radius:6px;
  font-size:12px;
}
.lang-btn.active{
  border-color:var(--primary); color:#0b3a8f; background:var(--primary-ghost);
  font-weight:700;
}

.policy-banner{
  display:block; margin-top:8px; padding:10px; font-size:12px;
  color:#374151; text-decoration:none; border:1px dashed var(--line);
  border-radius:6px; background:#ffffff;
}
.policy-banner:hover{border-color:#9bbdf7}

/* 메인 그리드 (좌-중앙-우) */
.main-grid{
  margin-left:220px; /* 좌측 고정폭만큼 여백 */
  display:grid; grid-template-columns: 1fr 380px; gap:0;
  min-height:100vh;
}

/* 중앙: 대형 비주얼 + 우측 4버튼 */
.hero-wrap{
  position:relative;
  min-height:100vh;
  border-right:1px solid var(--line);
  background:var(--panel);
}

.hero{
  position:relative; 
  overflow:hidden;
  background:#acacac url("../img/main4.jpg") center/cover no-repeat;
    min-height: 100vh;                  /* ★ 추가 */

}
.hero-menu{
  position:absolute; inset:auto 24px 24px 24px; /* bottom fixed */
  list-style:none; 
  margin:0; 
  padding:0;
  gap:12px;
  display:flex; 
  flex-direction:row;          /* 기본은 가로 */
  background:transparent; 
  border-left:none;
  z-index: 3;
    justify-content:center; /* 기본: 가운데 정렬 */

}

/* 라이트 테마에서 이미지 위 텍스트 가독성 확보용 화이트 오버레이 */
.hero::after{
  content:""; 
  position:absolute; 
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.15) 40%, transparent 70%);
  z-index:1;
  /* background:linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); */
}
.hero-copy{
  position:absolute; left:36px; top:42px; z-index:2;
  /* background:rgba(255,255,255,.75); */
  /* backdrop-filter:saturate(120%) blur(2px); */
  /* padding:14px 16px; border-radius:10px; border:1px solid var(--line); */
}

.hero-copy h1{
  margin:0 0 8px; line-height:1.05; font-size:56px; font-weight:800;
  letter-spacing:.5px; color:#ffffff;
}
.hero-copy p{margin:0; color:#eee; font-size:16px}

/* 초기/전환 슬라이드다운 애니메이션 */
@keyframes slideDown {
  from { opacity:0; transform: translateY(-20px); }
  to   { opacity:1; transform: translateY(0); }
}
.hero.slide-down .hero-copy{ animation: slideDown 420ms ease both; }

/* 우측 4버튼 */
.hero-menu li{
  flex:0 0 auto;
  display:flex; 
  align-items:center; 
  justify-content:center;
  min-height:25vh;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.55);           /* 반투명 기본 */
  border-radius:10px;
  border-bottom:none;
  backdrop-filter: blur(6px) saturate(120%);    /* 글자 가독성 */
  padding:12px 16px;
  text-align:center; 
  cursor:pointer; 
  user-select:none;
  font-weight:700; 
  color:#0b3a8f;
  transition:background .2s, color .2s;
  opacity:.65; transition:opacity .2s, transform .2s, background .2s;
}
.hero-menu li:last-child{border-bottom:none}
.hero-menu li:hover{opacity:.85; transform:translateY(-1px);}
.hero-menu li.active{background:#ffffff; border-color:#e5e7eb; opacity:1;}

/* 우측 패널 */
.right-panel{
  background:var(--panel); display:flex; flex-direction:column;
  border-left:1px solid var(--line);
}

/* 상단 슬라이더 */
.news-slider{
  position:relative; height:260px; overflow:hidden; border-bottom:1px solid var(--line);
  background:#fff;
}
.news-slider .slides{
  display:flex; height:100%; width:500%;
  transition:transform .6s ease;
}
.slide {
  flex: 1 0 100%;
  position: relative;
  background-color: #eef2f7;      /* 기본 배경색 */
  background-repeat: no-repeat;
  background-size:contain;
}
.slide::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(255,255,255,.35), rgba(255,255,255,.05));
}
.slide-caption{
  position:absolute; left:16px; bottom:16px; right:16px;
  background:rgba(255,255,255,.85); padding:10px 12px; border-radius:8px; font-size:14px;
  color:#0f172a; border:1px solid var(--line); 
}
.dots{position:absolute; right:12px; bottom:12px; display:flex; gap:6px; z-index:2}
.dots button{
  width:8px; height:8px; border-radius:50%;
  border:1px solid #94a3b8; background:#ffffff; cursor:pointer;
}
.dots button.active{background:#0b3a8f; border-color:#0b3a8f}

/* 하단 고정 블록 */
.fixed-blocks{
  display:grid; grid-template-rows: repeat(4, auto);
  gap:0; overflow:auto; height:calc(100vh - 260px);
  background:#fff;
}
.block{
  padding:16px; border-bottom:1px solid var(--line);
}
.block h3{margin:0 0 8px; font-size:15px; color:#0f172a; letter-spacing:.2px}
.block p{margin:0; color:#1f2937; line-height:1.55}
.list{list-style:disc; margin:0; padding-left:18px; color:#1f2937}
.list li{margin:6px 0}
.family{list-style:none; padding:0; margin:0}
.family li{margin:6px 0}
.family a{color:#0b3a8f; text-decoration:none}
.family a:hover{text-decoration:underline}

.hero-content {
  padding: 40px;
  overflow-y: auto;
  background: #fff;
}
.hero-content h1 { font-size:28px; margin-bottom:16px; color:#0b3a8f; }
.hero-content h2 { font-size:20px; margin:16px 0 8px; }
.hero-content p, .hero-content li { font-size:15px; line-height:1.6; }



/* 반응형 */
/* @media (min-width:1200px){
  .hero-menu{
    inset: 24px 24px auto auto;   
    flex-direction:column;
    align-items:flex-end;
    width: 220px;                 
  }
  .hero-menu li{ min-height:100px; width:100%; }
} */

/* @media (max-width:1199px){
  .main-grid{grid-template-columns:1fr}
  .right-panel{order:2; min-height:auto;}
  .hero-wrap{order:1; grid-template-columns: 1fr}
  .hero{ min-height: 70vh; }
  .hero-menu{
    inset: auto 16px 16px 16px;  
    display:grid; grid-template-columns: repeat(4, 1fr);
  }
  .hero-menu li{ min-height:72px; }
} */

/* 
@media (max-width:740px){
  .mobile-header{display:flex;}
.hero{ min-height: 60vh; }
  .side-nav{
    position:fixed;
    top:56px; 
    left:0; bottom:0;
    width:220px;
    transform:translateX(-100%);
    background:#fff;
    box-shadow:2px 0 6px rgba(0,0,0,.15);
  }

  .main-grid{margin-left:0; padding-top:56px;}
  
  .hero-copy{ left:16px; top:20px; max-width: 88vw; }
  .hero-copy h1{ font-size:36px; }

  .hero-menu{
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    overflow-x:auto;
    gap:10px; padding-bottom:4px;
    scrollbar-width: thin;
  }
  .hero-menu::-webkit-scrollbar{ height:6px; }
  .hero-menu::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:4px; }
  .hero-menu li{ min-height:64px; }
} */


@media (min-width:1200px){
  .hero-menu{
    inset:24px 24px auto auto;
    flex-direction:column; align-items:flex-end; width:220px;
  }
  .hero-menu li{ min-height:100px; width:100%; }
}

/* 태블릿: 하단 가로 4칸 */
@media (max-width:1199px){
  .main-grid{grid-template-columns:1fr}
  .right-panel{order:2; min-height:auto;}
  .hero-wrap{order:1;}
  .hero{ min-height:90vh; }
  .hero-menu{
    inset:auto 16px 16px 16px;
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  .hero-menu li{ min-height:72px; }
}

/* 모바일: 하단 가로 스크롤 */
@media (max-width:740px){
  .mobile-header{display:flex;}
  .hero{ min-height:98vh; }
  .side-nav{ top:56px; transform:translateX(-100%); }
  .main-grid{ margin-left:0; padding-top:56px; }

  .hero-copy{ left:16px; top:20px; max-width:88vw; }
  .hero-copy h1{ font-size:36px; }

  .hero-menu{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(180px,1fr);
    overflow-x:auto; gap:10px; padding-bottom:4px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling: touch;  /* 부드러운 스크롤 */
    scrollbar-width: none;               /* Firefox 숨김 */
    -ms-overflow-style: none; 
    margin-bottom: 10vh;
  }
    .hero-menu::-webkit-scrollbar{ display: none; }  /* WebKit 숨김 */

  .hero-menu li{ min-height:64px; }
  
}


/* =========================
   About page
========================= */
.about-page{
  background:#fff;
}

/* --- 상단 히어로 --- */
.about-hero{
  background: url("../img/aboutbg.jpg") center/cover no-repeat;
  height: 300px;              /* 시안 높이감 */
  position: relative;
}
.about-hero::after{
  content:"";
  position:absolute; inset:0;
}
.about-hero__inner{
  position:relative; z-index:1;
  max-width: 1040px; margin:0 auto;
  padding: 150px 24px;
  color: #fff;
}
.about-hero__title{
  margin:0 0 8px;
  font-weight:800; font-size:28px; letter-spacing:.2px;
  color:#ffffff;
}
.about-hero__subtitle{
  margin:0;
  color:#fff;              /* 연한 하늘빛 */
  font-size:14px; line-height:1.6;
}

/* --- 본문 공통 --- */
.about-body{
  max-width:1040px; margin:0 auto; padding: 40px 24px 56px;
  background:#fff;
}
.about-section + .about-section{ margin-top:36px; }

.about-kicker{
  margin:0 0 16px;
  font-weight:800; letter-spacing:.08em;
  font-size:13px; color:#0b3a8f;
  letter-spacing:.2px;
}
.about-headline{
  margin:0 0 10px;
  font-size:20px; line-height:1.6; font-weight:800;
  color:#0f172a;
}
.about-copy{
  margin:0 0 18px;
  font-size:13px; line-height:1.9; color:#4b5563;
}
.about-copy--muted{ color:#6b7280; }

.about-divider{
  border:0; height:1px; background:#e5e7eb;
  margin: 18px 0 22px;
}

/* --- 2열 그리드 --- */
.about-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.about-col__title{
  margin:0 0 10px; font-size:15px; font-weight:800; color:#0f172a;
}
.about-list{
  margin:0; padding-left:18px;
  color:#111827; font-size:13px; line-height:1.9;
}
.about-list li{ margin:4px 0; }

/* --- Business 구역 (회색 배경) --- */
.about-business{
  background:#f3f4f6;
  border-top:1px solid #e5e7eb;
}
.about-business__inner{
  max-width:1040px; margin:0 auto; padding: 36px 24px 56px;
}

.biz-logos{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 18px;
}
.logo-card{
  height:160px;
  background:#cfd4db;           /* 시안의 회색 네모 */
  border-radius:6px;
}

/* VIEW MORE */
.about-more{
  display:inline-block; margin-top:14px;
  font-size:12px;
  color:#0b3a8f; text-decoration:none; font-weight:700;
  letter-spacing:.2px;
}
.about-more:hover{ text-decoration:underline; }

/* --- 반응형 --- */
@media (max-width:1024px){
  .about-hero{ height: 240px; }
  .about-headline{ font-size:18px; }
}
@media (max-width:740px){
  .about-hero{ height: 200px; }
  .about-grid{ grid-template-columns: 1fr; gap:20px; }
  .biz-logos{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:520px){
  .biz-logos{ grid-template-columns: 1fr; }
}

/* 서브페이지 공통 */
.sub-hero{
  background-size:cover;
  background-position:center;
  padding:80px 20px;
  text-align:center;
  color:#fff;
}
.sub-hero-inner h1{
  font-size:32px;
  font-weight:800;
  margin-bottom:12px;
}
.sub-hero-inner p{
  font-size:16px;
  line-height:1.6;
  opacity:.9;
}

.sub-section{
  max-width:1080px;
  margin:0 auto;
  padding:60px 20px;
}
.sub-section h2{
  font-size:22px;
  font-weight:700;
  color:#0b3a8f;
  margin-bottom:12px;
}
.sub-section .lead{
  font-size:16px;
  margin-bottom:36px;
  color:#333;
  line-height:1.7;
  text-align:center;
}

/* 그룹사 카드 */
.group-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}
.group-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:20px;
  text-align:center;
}
.group-card .logo-placeholder{
  width:100%;
  height:100px;
  background:#e5e7eb;
  margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  color:#666;
  font-size:14px;
  border-radius:6px;
}
.group-card h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:8px;
  color:#111;
}
.group-card p{
  font-size:14px;
  color:#444;
  line-height:1.5;
}

/* 반응형 */
@media (max-width:900px){
  .group-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:500px){
  .group-grid{ grid-template-columns: 1fr; }
}


/* =========================
   PR page (홍보센터)
========================= */
.pr-page{ background:#fff; color:#0f172a; }

/* --- 상단 영상 히어로 --- */
.pr-hero{
  position:relative;
  height:280px;                 /* 시안 높이감 */
  overflow:hidden;
}
.pr-hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.pr-hero__overlay{
  position:absolute; inset:0;
  background: rgba(7,17,45,.45); /* 남청 톤 오버레이 */
}
.pr-hero__inner{
  position:relative; z-index:1;
  max-width:1040px; margin:0 auto; padding:52px 24px;
}
.pr-hero__title{
  margin:0 0 8px; font-weight:800; font-size:28px; letter-spacing:.2px; color:#fff !important;
}
.pr-hero__subtitle{
  margin:0; color:#dbe4ff; font-size:14px; line-height:1.6;
}

/* --- 본문 --- */
.pr-body{ max-width:1040px; margin:0 auto; padding:40px 24px 56px; }
.pr-section + .pr-section{ margin-top:36px; }

.pr-kicker{
  margin:0 0 16px;
  font-weight:800; letter-spacing:.08em;
  font-size:13px; color:#0b3a8f;
}
.pr-divider{ border:0; height:1px; background:#e5e7eb; margin:18px 0 22px; }

.pr-logo-row{
  display:grid; grid-template-columns: 1fr 2fr 1fr; gap:20px; align-items:center;
}
.pr-logo-col--left .pr-logo-note{
  margin:0; font-size:12px; line-height:1.7; color:#6b7280;
}
.pr-logo-img{
  width:100%; max-width:560px; display:block; margin:0 auto;
}
.pr-download{
  display:inline-block; text-align:right; width:100%;
  font-size:12px; font-weight:700; color:#0b3a8f; text-decoration:none;
}
.pr-download:hover{ text-decoration:underline; }

.pr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.pr-col__title{ margin:0 0 10px; font-size:15px; font-weight:800; color:#0f172a; }
.pr-list{ margin:0; padding-left:18px; color:#111827; font-size:13px; line-height:1.9; }
.pr-list li{ margin:4px 0; }

/* --- 뉴스 카드 --- */
.pr-news{ background:#f3f4f6; border-top:1px solid #e5e7eb; }
.pr-news__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 56px; }
.pr-news-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.pr-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden;
}
.pr-card__thumb{
  height:160px; background:#cfd4db;  /* 빈 썸네일 (카드뉴스 자리) */
}
.pr-card__title{
  margin:12px 12px 16px; font-size:14px; line-height:1.6; color:#111827; font-weight:700;
}

.pr-more{
  display:inline-block; margin-top:14px; font-size:12px; letter-spacing:.08em;
  color:#0b3a8f; text-decoration:none; font-weight:700;
}
.pr-more:hover{ text-decoration:underline; }

/* --- 반응형 --- */
@media (max-width:1024px){
  .pr-hero{ height:240px; }
}
@media (max-width:740px){
  .pr-hero{ height:200px; }
  .pr-logo-row{ grid-template-columns: 1fr; text-align:left; }
  .pr-download{ text-align:left; }
  .pr-grid{ grid-template-columns:1fr; gap:20px; }
  .pr-news-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:520px){
  .pr-news-grid{ grid-template-columns: 1fr; }
}


/* =========================
   IR page
========================= */
.ir-page{ background:#fff; color:#0f172a; }

/* 상단 히어로 */
.ir-hero{
  background-size:cover; background-position:center;
  height:280px; position:relative;
}
.ir-hero__overlay{ position:absolute; inset:0; background:rgba(7,17,45,.55); }
.ir-hero__inner{ position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:52px 24px; }
.ir-hero__title{ margin:0 0 8px; font-weight:800; font-size:28px; color:#fff; }
.ir-hero__subtitle{ margin:0; color:#dbe4ff; font-size:14px; line-height:1.6; }

/* 본문 공통 */
.ir-body{ max-width:1040px; margin:0 auto; padding:40px 24px 56px; }
.ir-kicker{ margin:0 0 16px; font-weight:800; letter-spacing:.08em; font-size:13px; color:#0b3a8f; }
.ir-divider{ border:0; height:1px; background:#e5e7eb; margin:18px 0 22px; }
.ir-subtitle{ margin:0 0 12px; font-size:16px; font-weight:800; color:#0f172a; }

/* KPI */
.ir-kpi{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.kpi{ border:1px solid #e5e7eb; border-radius:8px; padding:16px; background:#fff; }
.kpi__label{ font-size:12px; color:#6b7280; margin-bottom:6px; }
.kpi__value{ font-size:18px; font-weight:800; color:#0f172a; }
.kpi__note{ font-size:12px; color:#6b7280; }

/* 공시/리포트 카드 */
.ir-news-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:12px; }
.ir-card{ background:#fff; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.ir-card__thumb{ height:140px; background:#cfd4db; } /* 썸네일 비워둠 */
.ir-card__title{ margin:12px; font-size:14px; line-height:1.6; color:#111; font-weight:700; flex:1; }
.ir-btn{ margin:0 12px 12px; display:inline-block; font-size:12px; color:#0b3a8f; font-weight:700; text-decoration:none; }
.ir-btn:hover{ text-decoration:underline; }

/* 거버넌스 */
.ir-gov{ background:#f3f4f6; border-top:1px solid #e5e7eb; }
.ir-gov__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 56px; }
.gov-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.gov-card{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:16px; }
.gov-card__title{ margin:0 0 10px; font-size:15px; font-weight:800; color:#0f172a; }
.gov-list{ margin:0; padding-left:18px; color:#111827; font-size:13px; line-height:1.9; }
.gov-list li{ margin:4px 0; }

/* IR 문의 */
.ir-contact{ background:#fff; }
.ir-contact__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 72px; }
.ir-copy{ margin:0 0 10px; font-size:13px; line-height:1.9; color:#4b5563; }
.ir-contact-list{ margin:0; padding-left:18px; font-size:13px; line-height:1.9; color:#111827; }
.ir-contact-list li{ margin:4px 0; }

/* 반응형 */
@media (max-width:1024px){
  .ir-hero{ height:240px; }
  .ir-kpi{ grid-template-columns: repeat(2, 1fr); }
  .ir-news-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:740px){
  .ir-hero{ height:200px; }
  .ir-news-grid{ grid-template-columns: 1fr; }
  .gov-grid{ grid-template-columns: 1fr; }
}


/* =========================
   CS page (고객지원)
========================= */
.cs-page{ background:#fff; color:#0f172a; }
.cs-page .form-grid > * { min-width: 0; }
/* 히어로 */
.cs-hero{ background-size:cover; background-position:center; height:280px; position:relative; }
.cs-hero__overlay{ position:absolute; inset:0; background:rgba(7,17,45,.55); }
.cs-hero__inner{ position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:52px 24px; }
.cs-hero__title{ margin:0 0 8px; font-weight:800; font-size:28px; color:#fff; }
.cs-hero__subtitle{ margin:0; color:#dbe4ff; font-size:14px; line-height:1.6; }

/* 공통 섹션 */
.cs-body{ max-width:1040px; margin:0 auto; padding:40px 24px 56px; }
.cs-kicker{ margin:0 0 16px; font-weight:800; letter-spacing:.08em; font-size:13px; color:#0b3a8f; }
.cs-page .form-field input,
.cs-page .form-field select,
.cs-page .form-field textarea { width: 100%; }
/* 연락 채널 카드 */
.cs-contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cs-card{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:16px; }
.cs-card__title{ margin:0 0 8px; font-size:15px; font-weight:800; color:#0f172a; }
.cs-card__text a{ color:#0f172a; text-decoration:none; font-weight:800; }
.cs-card__text{ font-size:18px; font-weight:800; color:#0f172a; }
.cs-card__note{ margin:6px 0 0; font-size:12px; color:#6b7280; }

/* FAQ */
.cs-faq{ background:#f3f4f6; border-top:1px solid #e5e7eb; }
.cs-faq__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 56px; }
.cs-faq-list{ display:grid; gap:10px; }
.faq{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
.faq__q{ padding:14px 16px; font-size:14px; font-weight:700; cursor:pointer; list-style:none; }
.faq[open] .faq__q{ border-bottom:1px solid #e5e7eb; }
.faq__a{ padding:14px 16px; font-size:13px; line-height:1.8; color:#374151; }

/* 폼 */
.cs-form{ background:#fff; }
.cs-form__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 56px; }
.form{ background:#fff; }
.form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.form-field{ display:flex; flex-direction:column; }
.form-field--full{ grid-column:1 / -1; }
.form-field label{ font-size:12px; color:#6b7280; margin-bottom:6px; }
.form-field input,
.form-field select,
.form-field textarea{
  font-size:14px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:6px; outline:none;
}
.form-field textarea{ resize:vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ border-color:#9bbdf7; box-shadow:0 0 0 3px #eff6ff; }
.check{ display:flex; align-items:center; gap:8px; font-size:12px; color:#374151; margin-top:10px; }
.form-actions{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.btn-primary{ background:#0b3a8f; color:#fff; border:0; border-radius:8px; padding:10px 16px; font-weight:700; cursor:pointer; }
.btn-primary:hover{ filter:brightness(1.05); }
.form-note{ margin:0; font-size:12px; color:#6b7280; }

/* 방문/우편 */
.cs-visit{ background:#f9fafb; border-top:1px solid #e5e7eb; }
.cs-visit__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 72px; }
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.visit-title{ margin:0 0 8px; font-size:15px; font-weight:800; color:#0f172a; }
.visit-text{ margin:0 0 4px; font-size:14px; color:#111827; }
.visit-link{ display:inline-block; margin-top:6px; font-size:12px; color:#0b3a8f; font-weight:700; text-decoration:none; }
.visit-link:hover{ text-decoration:underline; }

.cs-page .form-field input,
.cs-page .form-field select,
.cs-page .form-field textarea { font-size: 16px; }
/* 반응형 */
@media (max-width:1024px){
  .cs-hero{ height:240px; }
  .cs-contact-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:740px){
  .cs-form__inner { padding: 24px 16px 40px; }
  .cs-body { padding: 28px 16px 40px; }
  .cs-contact-grid { gap: 12px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-field label { font-size: 12px; }
  .btn-primary { width: 100%; }
}


/* =========================
   HISTORY page
========================= */
.history-page{ background:#fff; color:#0f172a; }

/* 히어로 */
.history-hero{
  background-size:cover; background-position:center; height:280px; position:relative;
}
.history-hero__overlay{ position:absolute; inset:0; background:rgba(7,17,45,.55); }
.history-hero__inner{ position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:52px 24px; }
.history-hero__title{ margin:0 0 8px; font-weight:800; font-size:28px; color:#fff; }
.history-hero__subtitle{ margin:0; color:#dbe4ff; font-size:14px; line-height:1.6; }

/* 본문 */
.history-body{ max-width:1040px; margin:0 auto; padding:40px 24px 56px; }
.history-kicker{ margin:0 0 16px; font-weight:800; letter-spacing:.08em; font-size:13px; color:#0b3a8f; }

/* 타임라인 */
.timeline{
  position:relative; padding-left:26px;
}
.timeline::before{
  content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:#e5e7eb;
}
.timeline-year{
  margin:18px 0 8px; font-size:16px; font-weight:800; color:#0f172a;
}
.timeline-item{ position:relative; margin:10px 0 16px; }
.t-dot{
  position:absolute; left:-1px; top:8px; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid #0b3a8f;
}
.t-card{
  margin-left:18px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:14px 16px;
}
.t-title{ margin:0 0 4px; font-size:15px; font-weight:800; color:#0f172a; }
.t-desc{ margin:0 0 6px; font-size:13px; color:#374151; line-height:1.8; }
.t-date{ font-size:12px; color:#6b7280; }

/* 수상/이벤트 */
.history-awards{ background:#f3f4f6; border-top:1px solid #e5e7eb; }
.history-awards__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 56px; }
.awards-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.award-card{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:16px; }
.award-thumb{ height:120px; background:#cfd4db; border-radius:6px; margin-bottom:10px; }
.award-title{ margin:0 0 4px; font-size:15px; font-weight:800; color:#0f172a; }
.award-note{ margin:0 0 4px; font-size:13px; color:#374151; }
.award-date{ font-size:12px; color:#6b7280; }

/* 아카이브 */
.history-archive{ background:#fff; }
.history-archive__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 72px; }
.archive-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.archive-item{
  background:#e5e7eb center/cover no-repeat; width:100%; aspect-ratio: 4 / 3; border-radius:8px;
}

/* 반응형 */
@media (max-width:1024px){
  .history-hero{ height:240px; }
  .awards-grid{ grid-template-columns: repeat(2, 1fr); }
  .archive-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:740px){
  .history-hero{ height:200px; }
  .timeline{ padding-left:22px; }
  .timeline::before{ left:6px; }
  .t-dot{ left:-3px; }
  .awards-grid{ grid-template-columns: 1fr; }
  .archive-grid{ grid-template-columns: 1fr; }
}


/* =========================
   PARTNERS page
========================= */
.partners-page{ background:#fff; color:#0f172a; }

/* 히어로 */
.partners-hero{
  background-size:cover; background-position:center; height:280px; position:relative;
}
.partners-hero__overlay{ position:absolute; inset:0; background:rgba(7,17,45,.55); }
.partners-hero__inner{ position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:52px 24px; }
.partners-hero__title{ margin:0 0 8px; font-weight:800; font-size:28px; color:#fff; }
.partners-hero__subtitle{ margin:0; color:#dbe4ff; font-size:14px; line-height:1.6; }

/* 본문 */
.partners-body{ max-width:1040px; margin:0 auto; padding:40px 24px 56px; }
.partners-kicker{ margin:0 0 16px; font-weight:800; letter-spacing:.08em; font-size:13px; color:#0b3a8f; }
.partners-lead{ margin:0 0 22px; font-size:14px; line-height:1.8; color:#374151; text-align:center; }

/* 카테고리 (옵션) */
.partner-cats{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px;
}
.partner-cats .cat{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; font-size:12px; border:1px solid #e5e7eb; border-radius:999px;
  color:#0f172a; background:#fff; cursor:default; user-select:none;
}
.partner-cats .cat.active{ border-color:#0b3a8f; color:#0b3a8f; background:#eff6ff; }

/* 로고 그리드 */
.partner-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
}
.partner-card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:16px;
  text-decoration:none;
}
.partner-card:hover{ box-shadow:0 1px 10px rgba(2,6,23,.06); border-color:#dbe3f2; }
.partner-logo{
  width:100%; height:72px; background:#e5e7eb; border-radius:6px;
  background-position:center; background-repeat:no-repeat; background-size:contain;
}
.partner-name{ font-size:13px; font-weight:700; color:#0f172a; text-align:center; }

/* CTA */
.partners-cta{ background:#f3f4f6; border-top:1px solid #e5e7eb; }
.partners-cta__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 72px; text-align:center; }
.cta-title{ margin:0 0 8px; font-size:18px; font-weight:800; color:#0f172a; }
.cta-text{ margin:0 0 14px; font-size:14px; color:#374151; }
.cta-actions{ display:flex; gap:10px; justify-content:center; }
.btn-ghost{
  display:inline-block; padding:10px 16px; border:1px solid #e5e7eb; border-radius:8px;
  color:#0f172a; text-decoration:none; font-weight:700; background:#fff;
}
.btn-ghost:hover{ background:#f8fafc; }

/* 반응형 */
@media (max-width:1024px){
  .partners-hero{ height:240px; }
  .partner-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:740px){
  .partners-hero{ height:200px; }
  .partner-grid{ grid-template-columns: 1fr; }
  .cta-actions{ flex-direction:column; }
}

/* careers.css */

/* 페이지 전체 */
.careers-page {
  background: #fafafa;
  color: #111;
  font-family: "Pretendard", sans-serif;
}

/* 상단 히어로 */
.careers-hero {
  position: relative;
  height: 340px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.careers-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.careers-hero__inner {
  position: relative;
  z-index: 2;
}
.careers-hero__title {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
}
.careers-hero__subtitle {
  font-size: 18px;
  color: #f1f1f1;
  margin: 0;
}

/* 본문 */
.careers-body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 20px;
}
.careers-kicker {
  font-size: 22px;
  font-weight: 700;
  color: #0b3a8f;
  margin-bottom: 24px;
}
.careers-lead {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 40px;
  color: #333;
}

/* 그리드 */
.careers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}
.careers-col__title {
  font-size: 18px;
  font-weight: 700;
  color: #0b3a8f;
  margin-bottom: 14px;
}
.careers-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}
.careers-list li {
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.6;
}

/* 구분선 */
.careers-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 40px 0;
}

/* 지원 정보 */
.careers-info p {
  font-size: 15px;
  line-height: 1.7;
  margin: 10px 0;
}
.careers-mail {
  color: #0b3a8f;
  font-weight: 600;
  text-decoration: none;
}
.careers-mail:hover {
  text-decoration: underline;
}
.careers-note {
  font-size: 13px;
  color: #666;
  margin-top: 6px;
}

/* CTA */
.careers-cta {
  background: #0b3a8f;
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}
.careers-cta__inner {
  max-width: 800px;
  margin: 0 auto;
}
.cta-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}
.cta-text {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.btn-primary {
  display: inline-block;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  background: #fff;
  color: #0b3a8f;
  border-radius: 6px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-primary:hover {
  background: #f1f1f1;
  color: #062d74;
}

/* 반응형 */
@media (max-width: 768px) {
  .careers-hero {
    height: 240px;
  }
  .careers-hero__title {
    font-size: 28px;
  }
  .careers-hero__subtitle {
    font-size: 14px;
  }
  .careers-kicker {
    font-size: 18px;
  }
}


/* =========================
   GROUP page
========================= */
.group-page{ background:#fff; color:#0f172a; }

/* 히어로 */
.group-hero{ background-size:cover; background-position:center; height:280px; position:relative; }
.group-hero__overlay{ position:absolute; inset:0; background:rgba(7,17,45,.55); }
.group-hero__inner{ position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:52px 24px; text-align:left; }
.group-hero__title{ margin:0 0 8px; font-weight:800; font-size:28px; color:#fff; }
.group-hero__subtitle{ margin:0; color:#dbe4ff; font-size:14px; line-height:1.6; }

/* 본문 */
.group-body{ max-width:1040px; margin:0 auto; padding:40px 24px 56px; }
.group-kicker{ margin:0 0 16px; font-weight:800; letter-spacing:.08em; font-size:13px; color:#0b3a8f; }
.group-lead{ margin:0 0 22px; font-size:14px; line-height:1.8; color:#374151; text-align:center; }

/* 4버티컬 카드 */
.group-verticals{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.gcard{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.gcard__thumb{ height:140px; background:#e5e7eb center/cover no-repeat; }
.gcard__title{ margin:12px 12px 6px; font-size:15px; font-weight:800; color:#0f172a; }
.gcard__desc{ margin:0 12px 8px; font-size:13px; color:#374151; line-height:1.7; }
.gcard__bullets{ margin:0 12px 14px; padding-left:18px; color:#111827; font-size:13px; line-height:1.8; }

/* 시너지 */
.group-synergy{ background:#f3f4f6; border-top:1px solid #e5e7eb; }
.group-synergy__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 56px; }
.synergy-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.synergy-card{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; }
.synergy-title{ margin:0 0 6px; font-size:15px; font-weight:800; color:#0f172a; }
.synergy-desc{ margin:0; font-size:13px; color:#374151; line-height:1.8; }

/* 패밀리 사이트 */
.group-family{ background:#fff; }
.group-family__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 72px; }
.family-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.family-card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; text-decoration:none;
}
.family-card:hover{ box-shadow:0 1px 10px rgba(2,6,23,.06); border-color:#dbe3f2; }
.family-logo{ width:100%; height:72px; background:#e5e7eb center/contain no-repeat; border-radius:6px; }
.family-name{ font-size:13px; font-weight:800; color:#0f172a; }

/* CTA */
.group-cta{ background:#0b3a8f; color:#fff; text-align:center; }
.group-cta__inner{ max-width:1040px; margin:0 auto; padding:36px 24px 72px; }
.group-cta .cta-title{ margin:0 0 8px; font-size:20px; font-weight:800; }
.group-cta .cta-text{ margin:0 0 14px; font-size:14px; line-height:1.8; }

/* 반응형 */
@media (max-width:1024px){
  .group-hero{ height:240px; }
  .group-verticals{ grid-template-columns: repeat(2,1fr); }
  .synergy-grid{ grid-template-columns: repeat(2,1fr); }
  .family-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:740px){
  .group-hero{ height:200px; }
  .group-lead{ text-align:left; }
  .group-verticals{ grid-template-columns: 1fr; }
  .synergy-grid{ grid-template-columns: 1fr; }
  .family-grid{ grid-template-columns: 1fr; }
}