

/* HJF – 홈(인덱스) 공통 컨테이너 */
.hjf-container{ max-width:1280px; margin:0 auto; padding:0 20px; box-sizing:border-box; }

/* 배너 슬롯 (상단/중앙) */
.hero-banner .banner-slot,
.mid-banner .banner-slot{ display:block; }
.banner-slot .ph{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed #c9d7e6; border-radius:16px; width:100%; aspect-ratio:16/5;
  color:#7b8aa0; background:linear-gradient(180deg,#fbfdff,#f4f8ff);
}
@media (max-width:768px){ .banner-slot .ph{ aspect-ratio:16/9; } }

/* 공지 */
.hjf-notice{ padding:16px 0 36px; }
.hjf-notice .sec-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.hjf-notice .notice-list{
  list-style:none; margin:0; padding:0; border:1px solid #e9eef3; border-radius:16px; background:#fff;
}
.hjf-notice .notice-list li+li{ border-top:1px solid #eff3f8; }
.hjf-notice .notice-list a{
  display:flex; align-items:center; gap:10px; padding:14px 16px; font-size:15px; color:#1b2430; text-decoration:none;
}
.hjf-notice .notice-list time{ margin-left:auto; color:#73839b; font-size:13px; }

/* 퀵액션/파트너(선택) */
.quick-actions .qa-inner{ max-width:1280px; margin:0 auto; padding:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.quick-actions .qa-card{ border:1px solid #e9eef3; border-radius:16px; padding:16px; background:#fff; }
.quick-actions .qa-card h3{ margin:0 0 6px 0; }
.quick-actions .qa-card .btn{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:10px; background:#0c4da2; color:#fff; }
.quick-actions .qa-card .btn.outline{ background:#fff; color:#0c4da2; border:1px solid #0c4da2; }
@media (max-width:960px){ .quick-actions .qa-inner{ grid-template-columns:1fr; } }

.partners{ max-width:1280px; margin:0 auto; padding:20px; }
.partners .logo-row{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.partners .logo-ph{ border:1px dashed #c9d7e6; border-radius:12px; padding:18px; text-align:center; color:#8aa0bc; }
@media (max-width:960px){ .partners .logo-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .partners .logo-row{ grid-template-columns:repeat(2,1fr); } }


/* ================================
   Hongik Job Fair – Home (Hero/QA/Notice)
   ================================ */
:root{
  --brand:#59a5d8;          /* 스카이블루 (요청 반영) */
  --brand-600:#0c4da2;      /* 딥블루 (포인트) */
  --ink:#0b1020;            /* 본문 텍스트(진한 남청) */
  --muted:#475569;          /* 보조 텍스트 */
  --line:#e9eef3;           /* 경계선 */
  --bg:#ffffff;             /* 배경 */
  --bg-soft:#f7f9fc;        /* 연한 배경 */
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius-lg:16px; --radius-md:12px; --radius-sm:10px;
  --max:1240px;
}

/* 공통 버튼 (홈 전용) */
.home .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:12px; border:1px solid transparent;
  font-size:15px; font-weight:700; letter-spacing:.2px; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  will-change:transform;
}
.home .btn:focus-visible{ outline:2px solid var(--brand-600); outline-offset:2px; }
.home .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(12,77,162,.16); }

/* 버튼 변형 */
.home .btn--primary{ background:linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); color:#fff; }
.home .btn--primary:hover{ filter:saturate(1.03) brightness(1.02); }
.home .btn--ghost{ background:transparent; color:var(--brand-600); border-color:var(--brand-600); }
.home .btn--ghost:hover{ background:rgba(12,77,162,.06); }
.home .btn--soft{ background:var(--bg-soft); color:var(--ink); border:1px solid var(--line); }
.home .btn--soft:hover{ background:#eef5fb; border-color:#cfe2f3; }

/* Hero */
.home .hero-banner{ background: #0b1020 url() no-repeat center/cover; position:relative; }
.home .hero-banner .banner-slot{ display:block; position:relative; }
.home .hero-banner .ph{
  position:relative; z-index:1; color:#94a3b8; font-size:13px; text-align:center; padding:12px 0;
}
.home .hero-layer{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; color:#fff; padding:20px;
  background: radial-gradient(1200px 400px at 50% 60%, rgba(89,165,216,.25), transparent 60%);
}
.home .hero-layer .eyebrow{ margin:0; font:700 14px/1.2 "Noto Sans KR", system-ui; letter-spacing:.4px; opacity:.95; }
.home .hero-layer .headline{ margin:.1em 0; font:900 clamp(24px,3.2vw,38px)/1.2 "Noto Sans KR"; letter-spacing:.2px; }
.home .hero-layer .sub{ margin:0 0 10px; font:600 15px/1.6 "Noto Sans KR"; opacity:.95; }
.home .hero-layer .cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* Quick Actions */
.home .quick-actions{ background:#fff; }
.home .qa-inner{
  max-width:var(--max); margin:28px auto 6px; padding:0 20px;
  display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width: 960px){
  .home .qa-inner{ grid-template-columns: repeat(3, 1fr); gap:18px; }
}
.home .qa-card{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  border:1px solid var(--line); border-radius:16px; padding:18px 16px;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.home .qa-card:hover{ transform:translateY(-3px); border-color:#cfe2f3; box-shadow:0 14px 36px rgba(12,77,162,.10); }
.home .qa-card .qa-ico{ font-size:22px; line-height:1; margin-bottom:6px; }
.home .qa-card h3{ margin:0 0 4px; font:800 18px/1.2 "Noto Sans KR"; color:var(--ink); }
.home .qa-card p{ margin:0 0 12px; color:var(--muted); font:500 14px/1.7 "Noto Sans KR"; }

/* Mid Banners */
.home .mid-banner{ margin:22px 0; }
.home .mid-banner .banner-slot{ display:block; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.home .mid-banner .ph{ text-align:center; color:#64748b; font-size:13px; padding:22px 0; }

/* Notices */
.home .hjf-notice{ background:#fff; }
.home .hjf-container{ max-width:var(--max); margin:0 auto; padding:8px 20px 2px; }
.home .sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 10px; }
.home .sec-head h2{ margin:0; font:900 20px/1.2 "Noto Sans KR"; color:var(--ink); letter-spacing:.2px; }
.home .sec-head .more{ font:700 13px/1 "Noto Sans KR"; color:var(--brand-600); text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid transparent; }
.home .sec-head .more:hover{ background:rgba(12,77,162,.06); border-color:#cfe2f3; }

.home .notice-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.home .notice-list a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:10px; padding:12px 12px; border-radius:14px; border:1px solid var(--line); background:#fff;
  color:var(--ink); text-decoration:none; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.home .notice-list a:hover{ transform:translateY(-1px); border-color:#cfe2f3; box-shadow:0 8px 24px rgba(12,77,162,.10); }
.home .notice-list .tag{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:26px; padding:0 10px;
  font:800 12px/1 "Noto Sans KR"; border-radius:999px; color:#0b1020; background:#eef5fb; border:1px solid #cfe2f3;
}
.home .notice-list .tag--primary{ background:#eaf3ff; border-color:#cfe2ff; color:#0b3ab8; }
.home .notice-list .tag--warn{ background:#fff3e6; border-color:#ffe3c4; color:#a14900; }
.home .notice-list .tag--info{ background:#eef8ff; border-color:#cfe9ff; color:#0b4b8a; }
.home .notice-list .ttl{ font:700 14px/1.5 "Noto Sans KR"; }
.home .notice-list time{ font:700 13px/1 "Noto Sans KR"; color:#64748b; }

/* Partners */
.home .partners{ background:#fff; margin:10px 0 26px; }
.home .partners .sec-head{ max-width:var(--max); margin:0 auto; padding:0 20px 8px; }
.home .partners h2{ margin:0; font:900 20px/1.2 "Noto Sans KR"; color:var(--ink); }
.home .logo-row{
  max-width:var(--max); margin:0 auto; padding:0 20px;
  list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
}
@media (max-width: 960px){ .home .logo-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 560px){ .home .logo-row{ grid-template-columns:repeat(2,1fr); } }
.home .logo-ph{
  display:flex; align-items:center; justify-content:center; height:64px;
  border:1px dashed #cbd5e1; border-radius:12px; color:#64748b; background:#fafcff;
  filter:grayscale(100%); opacity:.9; transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.home .logo-ph:hover{ filter:none; opacity:1; transform:translateY(-2px); }

/* 접근성/모션 */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============== [HJF HOME LAYOUT HOTFIX] ============== */
/* 1) 섹션 기본 여백/폭 정리 */
.home section { margin: 0; padding: 0; }
.home .hjf-container,
.home .qa-inner,
.home .partners .sec-head,
.home .logo-row,
.home .mid-banner .banner-slot {
  max-width: 1240px;
  margin-left: auto; margin-right: auto;
  box-sizing: border-box;
}
.home .hjf-container,
.home .qa-inner,
.home .partners .sec-head { padding-left: 20px; padding-right: 20px; }

/* 2) 히어로(배너) – 고정 높이/반응형 비율 확보 + 중앙정렬 보장 */
.home .hero-banner { position: relative; background: #0b1020; }
.home .hero-banner .banner-slot{
  display:block; position: relative;
  /* 배너 최소/최대 높이(이미지가 없어도 공간 확보) */
  min-height: clamp(280px, 36vw, 420px);
  overflow: hidden;
}
.home .hero-banner .ph{
  /* placeholder가 높이로도 쓰이게 */
  height: 100%; min-height: inherit;
  display:flex; align-items:center; justify-content:center;
  color:#94a3b8; font-size:13px; padding: 0;
}
.home .hero-banner .hero-layer{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 20px;
}
/* 모바일에서 텍스트가 너무 커지지 않게 */
@media (max-width: 540px){
  .home .hero-layer .headline{ font-size: 22px; }
  .home .hero-layer .sub{ font-size: 14px; }
}

/* 3) Mid 배너 – 폭/라운드/정렬 통일 */
.home .mid-banner{ margin: 22px 0; }
.home .mid-banner .banner-slot{
  width: 100%;
  border-radius: 16px; overflow: hidden;
  border:1px solid #e9eef3; background:#fff;
}
.home .mid-banner .ph{ text-align:center; color:#64748b; font-size:13px; padding: 22px 0; }

/* 4) 퀵액션 – 카드 너비·간격 고정 */
.home .quick-actions{ background:#fff; }
.home .qa-inner{
  display:grid; grid-template-columns: 1fr; gap: 14px;
  margin: 28px auto 6px;
}
@media (min-width: 960px){
  .home .qa-inner{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* 5) 공지 – 리스트 간격/정렬 안정화 */
.home .notice-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap: 8px;
}
.home .notice-list > li{ min-width: 0; }  /* 긴 제목 강제 줄바꿈 대비 */
.home .notice-list a{
  grid-template-columns: auto 1fr auto;
}

/* 6) 파트너 로고 그리드 – 줄 맞춤/높이 통일/반응형 열수 */
.home .partners{ background:#fff; margin: 10px 0 26px; }
.home .partners .sec-head{ padding-bottom: 8px; }
.home .logo-row{
  list-style:none; margin:0; padding: 0 20px 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
@media (max-width: 1024px){ .home .logo-row{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px){  .home .logo-row{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){  .home .logo-row{ grid-template-columns: repeat(2, 1fr); } }

.home .logo-row > li{
  display:flex; align-items:center; justify-content:center;
  height: 64px; border:1px dashed #cbd5e1; border-radius: 12px;
  background:#fafcff; color:#64748b;
  box-sizing: border-box;  /* 줄어들 때도 깨지지 않게 */
}

/* 7) 버튼 Hover가 다른 전역 규칙에 덮이지 않도록 우선순위 ↑  */
.home .btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(12,77,162,.16) !important;
}
.home .btn.btn--primary:hover{ filter: saturate(1.03) brightness(1.02) !important; }
.home .btn.btn--ghost:hover{ background: rgba(12,77,162,.06) !important; }
.home .btn.btn--soft:hover{
  background: #eef5fb !important; border-color: #cfe2f3 !important;
}

/* 8) 전역 충돌(ul/ol 리셋·이미지 반응형) */
.home img{ max-width: 100%; height: auto; display: block; }
.home ul, .home ol{ margin:0; padding-left: 0; }

/* ============================
   HOME 레이아웃 정렬/폭 통일 패치
   ============================ */

/* 0) 공통 기준선 */
.home{
  --page-max: 1240px;
  --gutter: 20px;
}

/* 1) 섹션/컨테이너 폭과 좌우 패딩을 동일하게 (가운데 정렬) */
.home .hjf-container,
.home .qa-inner,
.home .mid-banner .banner-slot,
.home .partners .sec-head,
.home .partners .logo-row{
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

/* 2) 퀵액션 카드: 항상 동일한 가로폭 컬럼 + 균일 간격 */
.home .quick-actions{ background:#fff; }
.home .qa-inner{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 카드 폭 자동 균등 */
  gap: 18px;
}
.home .qa-card{
  height: 100%;
  border: 1px solid #e9eef3;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 24px rgba(12,77,162,.06);
  background:#fff;
}

/* 3) 히어로/미드 배너: 가로 기준선 맞춤 (좌우 들쑥날쑥 방지) */
.home .hero-banner .banner-slot{ display:block; }
.home .mid-banner{ margin: 22px 0; }
.home .mid-banner .banner-slot{
  border-radius:16px; border:1px solid #e9eef3; overflow:hidden; background:#fff;
}

/* 4) 공지 리스트: 그리드 폭/정렬 안정화 */
.home .hjf-notice .hjf-container{ padding-top: 6px; padding-bottom: 6px; }
.home .notice-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
}

/* 5) 파트너 로고: 좌측 쏠림 제거 + 가운데 정렬 + 고정 열수 */
.home .partners{ background:#fff; padding: 10px 0 26px; }
.home .partners .sec-head{ padding-bottom: 10px; }

/* 로고 그리드 자체를 기준선에 맞춰 중앙 */
.home .partners .logo-row{
  list-style:none; margin:0; 
  display:grid; gap: 12px;
  grid-template-columns: repeat(6, 1fr);  /* PC 6열 */
  align-items: stretch;
  justify-items: stretch;
}

/* 반응형 열수 */
@media (max-width: 1200px){ .home .partners .logo-row{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px){ .home .partners .logo-row{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px){  .home .partners .logo-row{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){  .home .partners .logo-row{ grid-template-columns: repeat(2, 1fr); } }

/* 각 로고 박스 동일 크기/정렬 */
.home .partners .logo-row > li{
  display:flex; align-items:center; justify-content:center;
  height: 64px;
  border:1px dashed #cbd5e1; border-radius:12px;
  background:#fafcff; color:#64748b;
  box-sizing: border-box;
}

/* 6) 버튼 hover가 전역 규칙에 안 먹히던 문제 보정(섹션 범위 내 우선순위 강화) */
.home .btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(12,77,162,.16) !important;
}

/* 7) 섹션들 좌우 패딩 강제 통일(예상치 못한 바깥 패딩 제거) */
.home .hero-banner,
.home .quick-actions,
.home .hjf-notice,
.home .partners,
.home .mid-banner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================
   FIX #1 버튼 중앙 정렬
   - 사전신청/참여부스보기(살펴보기) 같은 CTA가
     카드 안에서 살짝 우측 치우치던 문제 교정
   ========================= */
.home .qa-card .btn{
  display:inline-flex;              /* 텍스트 폭 기준으로 깔끔하게 */
  align-items:center; justify-content:center;
  margin: 12px auto 0 !important;  /* 좌우 auto로 완전 가운데 */
  min-width: 140px;                 /* 흔들림 방지용 최소폭 */
}

/* (선택) 카드 본문 가운데 맞춤이 더 보기 좋다면 */
.home .qa-card{
  text-align: center;
}

/* =========================
   FIX #2 화이트 배경용 Hover 대비 개선
   - 메인배너 제외 섹션은 전부 흰 배경이므로
     hover 시 텍스트/버튼 컬러 대비를 또렷하게
   ========================= */

/* 버튼 기본/아웃라인 */
:root{
  --brand:#0c4da2;         /* 브랜드 블루 */
  --brand-dark:#0a3f8c;    /* hover용 살짝 진한 블루 */
  --brand-ghost:#f0f6ff;   /* 아주 옅은 블루 배경 */
}

.home .btn{
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.home .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(12,77,162,.16);
}

/* 아웃라인 버튼은 흰 배경에서 더 진하게 반응 */
.home .btn.outline{
  background:#fff; color: var(--brand); border:1px solid var(--brand);
}
.home .btn.outline:hover{
  background: var(--brand-ghost);
  color: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* 공지·텍스트 링크 등: hover 시 색만 선명하게 */
.home .hjf-notice .notice-list a{
  color:#1f2937; text-decoration:none; transition: color .15s ease;
}
.home .hjf-notice .notice-list a:hover{
  color: var(--brand-dark);
  text-decoration: underline;
}

/* 파트너 영역에 텍스트 링크가 있다면 동일 규칙 적용 */
.home .partners a{
  color:#334155; text-decoration:none; transition: color .15s ease;
}
.home .partners a:hover{
  color: var(--brand-dark);
  text-decoration: underline;
}

/* 배너(메인 히어로/미드)는 그대로 두고, 이 외 섹션의 일반 링크 hover 보정 */
.home :where(.quick-actions, .hjf-notice, .partners, .mid-banner) a:not(.btn):hover{
  color: var(--brand-dark);
}

/* 버튼 안의 아이콘/화살표가 있다면 수평 중앙 유지 */
.home .btn > i, .home .btn > svg{
  margin-left: .4em;
}

/* =========================
   FIX #1 버튼 중앙 정렬 (히어로 & 퀵액션)
   ========================= */

/* 히어로 CTA 버튼 완전 가운데 */
.home .hero-layer .cta{
  display:flex;
  justify-content:center; align-items:center;
  gap:10px;
}
.home .hero-layer .cta .btn{
  margin:0 !important;               /* 남는 마진 제거 */
  display:inline-flex;
  align-items:center; justify-content:center;
}

/* 퀵액션 카드 CTA 완전 가운데 */
.home .qa-card{
  text-align:center;                  /* 텍스트/버튼 시각적 중앙 */
}
.home .qa-card .btn{
  display:inline-flex;
  align-items:center; justify-content:center;
  margin:12px auto 0 !important;      /* 좌우 auto로 정확히 중앙 */
  min-width:140px;
}

/* =========================
   FIX #2 화이트 배경 Hover 대비
   - 메인배너 제외 섹션(흰 배경)의 링크/버튼 컬러 대비 강화
   ========================= */
:root{
  --brand:#0c4da2;
  --brand-dark:#0a3f8c;
  --brand-ghost:#f0f6ff;
}

/* 일반 링크(버튼 제외) 기본/호버 */
.home :where(.quick-actions, .hjf-notice, .partners, .mid-banner) a:not(.btn){
  color:#1f2937; text-decoration:none; transition:color .15s ease, text-decoration-color .15s ease;
}
.home :where(.quick-actions, .hjf-notice, .partners, .mid-banner) a:not(.btn):hover{
  color:var(--brand-dark);
  text-decoration:underline;
}

/* 버튼 공통 hover */
.home .btn{
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.home .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(12,77,162,.16);
}

/* 고스트/소프트 버튼의 흰 배경 대응 */
.home .btn--ghost{
  background:#fff; color:var(--brand); border:1px solid var(--brand);
}
.home .btn--ghost:hover{
  background:var(--brand-ghost);
  color:var(--brand-dark);
  border-color:var(--brand-dark);
}
.home .btn--soft{
  background:#f7f9fc; color:#0b1020; border:1px solid #e9eef3;
}
.home .btn--soft:hover{
  background:#eef5fb; border-color:#cfe2f3; color:#0b1020;
}

/* =========================
   FIX #3 공지 테두리 중복 제거 + 중간 배너 폭 통일
   ========================= */

/* 공지 리스트 외곽선 제거(각 항목만 테두리) */
.home .hjf-notice .notice-list{
  border:0 !important;
  background:transparent !important;
  padding:0; margin:0;
}

/* 각 항목은 a에만 테두리 */
.home .notice-list a{
  border:1px solid #e9eef3;
  background:#fff;
}

/* 중간 배너가 사이트 폭과 정렬을 반드시 맞춤 */
.home .mid-banner .banner-slot{
  max-width:1240px;           /* 사이트 기준폭 */
  margin-left:auto; margin-right:auto;
  border-radius:16px; overflow:hidden;
  border:1px solid #e9eef3; background:#fff;
}
.home .mid-banner .ph{ padding:22px 0; }

/* =========================
   FIX #4 파트너 로고 좌측 쏠림 제거
   ========================= */

/* ul 기본 여백/불릿 제거 + 정확한 가운데 정렬 */
.home .partners .logo-row{
  list-style:none; padding-left:0 !important; margin-left:auto; margin-right:auto;
  max-width:1240px;
  display:grid; gap:12px;
  grid-template-columns:repeat(6,1fr);   /* PC 6열(균등) */
  align-items:stretch; justify-items:stretch;
  box-sizing:border-box;
}

/* 반응형 열수 */
@media (max-width:1200px){ .home .partners .logo-row{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:1024px){ .home .partners .logo-row{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:960px){  .home .partners .logo-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){  .home .partners .logo-row{ grid-template-columns:repeat(2,1fr); } }

/* 각 로고 박스 동일 크기/정렬 */
.home .partners .logo-row > li{
  display:flex; align-items:center; justify-content:center;
  height:64px; border:1px dashed #cbd5e1; border-radius:12px;
  background:#fafcff; color:#64748b;
}

/* =========================
   보조: 전역 리스트/이미지 리셋(섹션 내부만)
   ========================= */
.home ul, .home ol{ margin:0; padding-left:0; }
.home img{ max-width:100%; height:auto; display:block; }

/* =========================
   추가 보정: 히어로 버튼 간격 균일
   ========================= */
.home .hero-layer .btn + .btn{ margin-left:0 !important; }


/*************************************
 * HJF Home HOTFIX (2025-10)
 * - 버튼 중앙정렬
 * - 화이트 배경 Hover 대비
 * - 공지사항 이중 테두리 제거 + 코너 라운드 유지
 * - 배너/파트너 그리드 좌/우 균등 + 가운데 정렬
 *************************************/

/* 0) 기준 컨테이너: 모든 섹션 같은 폭/패딩/중앙 정렬 고정 */
.home{
  --page-max: 1240px;
  --gutter: 20px;
}
.home .hjf-container,
.home .qa-inner,
.home .mid-banner .banner-slot,
.home .partners .sec-head,
.home .partners .logo-row{
  max-width: var(--page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  box-sizing: border-box !important;
}

/* 1) 히어로 CTA 버튼 완전 중앙(살짝 오른쪽 치우침 교정) */
.home .hero-layer .cta{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center !important;        /* 핵심 */
}
.home .hero-layer .cta .btn{
  margin:0 !important;                      /* 좌/우 여백 초기화 */
}

/* 2) 퀵액션 카드 안의 버튼도 중앙 고정 */
.home .qa-card{ text-align:center; }
.home .qa-card .btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin:12px auto 0 !important;            /* 좌/우 auto → 중앙 */
  min-width:140px;
}

/* 3) 화이트 배경 Hover 대비(색만 변경, 폰트 굵기/크기 불변) */
.home .btn{ transition:transform .12s, box-shadow .18s, background .18s, color .18s, border-color .18s; }
.home .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(12,77,162,.16); }
.home .btn--ghost{ background:#fff; color:#0c4da2; border:1px solid #0c4da2; }
.home .btn--ghost:hover{ background:#f0f6ff; color:#0a3f8c; border-color:#0a3f8c; }
.home .btn--soft{ background:#f7f9fc; color:#0b1020; border:1px solid #e9eef3; }
.home .btn--soft:hover{ background:#eef5fb; border-color:#cfe2f3; }

/* 4) 공지사항 – 이중 테두리 제거 + 코너 라운드 유지 */
.home .hjf-notice .notice-list{
  border:none !important;            /* 외곽선 제거 (겹침 방지) */
  border-radius:16px;
  overflow:hidden;                   /* 첫/마지막 항목 모서리 동기화 */
}
/* 각 항목을 ‘카드’가 아닌 ‘리스트’처럼 보이게: 상단/하단만 라운드 */
.home .notice-list > li + li a{ border-top:1px solid #eff3f8; }
.home .notice-list > li:first-child a{ border-top:0; }
.home .notice-list a{
  border:0 !important;               /* 링크에 개별 테두리 있던 것 제거 */
  border-radius:0 !important;
}
/* ‘공지사항’ 섹션 전체에 외곽 테두리가 이미 있을 때를 위한 스위치 */
.hjf-notice.no-outer-border .notice-list{ border:none !important; }

/* 5) Mid 배너 – 사이트 폭에 딱 맞게 */
.home .mid-banner{ margin:22px 0; }
.home .mid-banner .banner-slot{
  display:block; width:100%;
  border:1px solid #e9eef3; border-radius:16px; overflow:hidden; background:#fff;
}

/* 6) 파트너 로고 – 우측 쏠림 제거(그리드 중앙/균등) */
.home .partners{ background:#fff; padding:10px 0 26px; }
.home .partners .sec-head{ padding-bottom:8px; }
.home .partners .logo-row{
  display:grid; gap:12px;
  grid-template-columns: repeat(6, 1fr);   /* PC 6열 균등 */
  margin-left:auto !important; margin-right:auto !important;
  justify-items:stretch; align-items:stretch;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
@media (max-width:1200px){ .home .partners .logo-row{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:1024px){ .home .partners .logo-row{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:960px){  .home .partners .logo-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){  .home .partners .logo-row{ grid-template-columns:repeat(2,1fr); } }
.home .partners .logo-row > li{
  display:flex; align-items:center; justify-content:center;
  height:64px; border:1px dashed #cbd5e1; border-radius:12px;
  background:#fafcff; color:#64748b;
}

/* 7) 섹션별 좌/우 패딩 통일 (들쑥날쑥 방지) */
.home .hero-banner,
.home .quick-actions,
.home .hjf-notice,
.home .partners,
.home .mid-banner{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* 8) 전역 링크 hover가 폰트 굵기를 바꿔 ‘흔들리는’ 현상 방지 */
.home a{ font-weight:600; }
.home a:hover{ color:#0a3f8c; text-decoration:none; }

/**** HJF HOME PATCH (buttons center, equal widths, partners centering) ****/

/* 공통 레이아웃 기준선 */
.home{ --page-max:1240px; --gutter:20px; }
.home .hjf-container,
.home .qa-inner,
.home .mid-banner .banner-slot,
.home .partners .sec-head,
.home .partners .logo-row{
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 var(--gutter);
  box-sizing:border-box;
}

/* ========== [문제1] 히어로 CTA 버튼 완전 중앙 + 배너 텍스트와 겹침 방지 ========== */
.hero-banner .banner-slot{ position:relative; min-height:clamp(280px,36vw,420px); }
.hero-banner .ph{
  height:100%; min-height:inherit;
  display:flex; align-items:center; justify-content:center;
  padding:0; color:#94a3b8; font-size:13px;
  border:1px dashed #c9d7e6; border-radius:16px; background:linear-gradient(180deg,#fbfdff,#f4f8ff);
}
.hero-banner .hero-layer{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center; padding:20px; pointer-events:auto;
}
.hero-banner .hero-layer .cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.hero-banner .hero-layer .cta .btn{ margin:0; }

/* ========== [문제2] 하단 배너 2개 — 가로폭/정렬 통일 + 전체클릭 링크 ========== */
.mid-banner{ margin:22px 0; }
.mid-banner .banner-slot{
  position:relative; width:100%;
  border:1px solid #e9eef3; border-radius:16px; overflow:hidden; background:#fff;
}
.mid-banner .banner-slot .ph{
  display:flex; align-items:center; justify-content:center;
  padding:22px 0; color:#64748b; font-size:13px;
}
.mid-banner .banner-slot .fill-link{
  position:absolute; inset:0; display:block; text-indent:-9999px;
}

/* ========== [문제4] 파트너 로고 — 좌측 쏠림 제거(그리드 중앙·균등) ========== */
.partners{ background:#fff; padding:10px 0 26px; }
.partners .sec-head{ padding:0 var(--gutter) 8px; }
.partners .logo-row{
  display:grid; gap:12px;
  grid-template-columns:repeat(6,1fr);    /* PC 6열 균등 */
  padding:0 var(--gutter);
  align-items:stretch; justify-items:stretch;
}
@media (max-width:1200px){ .partners .logo-row{ grid-template-columns:repeat(5,1fr);} }
@media (max-width:1024px){ .partners .logo-row{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:960px){  .partners .logo-row{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){  .partners .logo-row{ grid-template-columns:repeat(2,1fr);} }
.partners .logo-row > li{
  display:flex; align-items:center; justify-content:center; height:64px;
  border:1px dashed #cbd5e1; border-radius:12px; color:#64748b; background:#fafcff;
}

/* ========== 공지사항: 이중 테두리 제거(섹션 외곽선 X, 각 항목만 분리선) ========== */
.hjf-notice .notice-list{
  border:none; border-radius:16px; overflow:hidden; background:#fff;
}
.hjf-notice .notice-list > li + li a{ border-top:1px solid #eff3f8; }
.hjf-notice .notice-list a{
  border:0; border-radius:0;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:12px 12px; color:#0b1020; text-decoration:none;
}

/* 버튼들: 화이트 배경 대비 Hover (두께/크기 안 바뀌게) */
.home .btn{ transition:transform .12s, box-shadow .18s, background .18s, color .18s, border-color .18s; }
.home .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(12,77,162,.16); }
.home .btn--ghost{ background:#fff; color:#0c4da2; border:1px solid #0c4da2; }
.home .btn--ghost:hover{ background:#f0f6ff; color:#0a3f8c; border-color:#0a3f8c; }
.home .btn--soft{ background:#f7f9fc; color:#0b1020; border:1px solid #e9eef3; }
.home .btn--soft:hover{ background:#eef5fb; border-color:#cfe2f3; }

/* [MID-BANNER] 겉 테두리(실선) 제거, 안쪽 점선만 남기기 */
.home .mid-banner .banner-slot{
  border: 0 !important;          /* 겉 테두리 삭제 */
  background: transparent !important;
  border-radius: 0 !important;    /* 바깥 라운드도 제거 */
  padding: 0 !important;
}

/* 점선/라운드는 이 안쪽 ph에만 적용 */
.home .mid-banner .banner-slot .ph{
  border: 1px dashed #c9d7e6 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#fbfdff,#f4f8ff) !important;
  display:flex; align-items:center; justify-content:center;
  padding: 22px 0 !important;
  color:#64748b; font-size:13px;
}

/* 섹션·컨테이너 폭/패딩 통일(좌우 여백 비대칭 방지) */
.home .mid-banner .banner-slot,
.home .mid-banner .ph{
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* 섹션 바깥은 100% 폭, 내부 그리드만 동일 기준선 적용 */
.home .partners{ padding: 10px 0 26px !important; background:#fff; }

/* 제목 줄도 같은 좌우 여백/기준선 */
.home .partners .sec-head{
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 20px 10px !important;
  box-sizing: border-box !important;
}

/* 로고 그리드: 정확히 가운데 + 5열 균등 */
.home .partners .logo-row{
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important; /* PC 5열 */
  gap: 12px !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

/* 반응형 열수(필요 시 조정) */
@media (max-width: 1024px){ .home .partners .logo-row{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 960px){  .home .partners .logo-row{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 560px){  .home .partners .logo-row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }

/* 각 로고 박스 동일 크기/정렬 */
.home .partners .logo-row > li{
  display:flex; align-items:center; justify-content:center;
  height:64px; border:1px dashed #cbd5e1; border-radius:12px;
  color:#64748b; background:#fafcff;
}

/* ========== FIX PACK (4가지 증상 전부) ========== */

/* 0) 히어로 레이어가 자리표시자(ph) 위로 올라오게 + 버튼 완전 중앙정렬 */
.home .hero-banner .banner-slot{ position:relative !important; display:block !important; min-height: clamp(280px, 36vw, 420px) !important; }
.home .hero-banner .ph{ position:relative; z-index:1; height:100%; min-height:inherit; display:flex; align-items:center; justify-content:center; }
.home .hero-layer{ position:absolute !important; inset:0 !important; z-index:2 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.home .hero-layer .cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center !important; align-items:center; }
.home .hero-layer .cta .btn{ margin:0 !important; }

/* 히어로와 아래 카드 사이 여백 (PC/MO 공통) */
.home .hero-banner{ margin-bottom: 20px !important; }

/* 1) 퀵액션 카드의 버튼이 살짝 오른쪽으로 치우치던 문제 (카드 내부 가운데 정렬 강제) */
.home .qa-card{ text-align:center !important; }
.home .qa-card .btn{ display:inline-flex; margin:12px auto 0 !important; min-width:140px; justify-content:center; }

/* 2) 중/하단 배너: '실선 테두리' 제거, 안쪽 placeholder(.ph)의 '점선 테두리'만 남기기 */
.home .mid-banner .banner-slot{
  border:none !important;        /* 바깥 실선 제거 */
  border-radius:16px; overflow:hidden;
}
.home .mid-banner .ph{
  border:1px dashed #c9d7e6 !important;   /* 점선만 보이도록 */
  border-radius:16px; padding:22px 0;
}

/* 3) 파트너 로고 영역: 그리드 자체를 컨테이너 폭 중앙에 정확히 맞추기 */
.home .partners{ background:#fff; padding: 14px 0 28px !important; }
.home .partners .sec-head{ max-width:1240px; margin:0 auto; padding:0 20px 10px; }
.home .partners .logo-row{
  max-width:1240px !important;
  margin-left:auto !important; margin-right:auto !important;
  padding:0 20px !important;                 /* 좌우 패딩 통일 */
  display:grid; gap:12px;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* PC 5열 고정, 중앙 */
  justify-items:stretch; align-items:stretch;
  box-sizing:border-box;
}
/* 반응형 열 수 */
@media (max-width: 1024px){ .home .partners .logo-row{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px){  .home .partners .logo-row{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){  .home .partners .logo-row{ grid-template-columns: repeat(2, 1fr); } }

.home .partners .logo-row > li{
  display:flex; align-items:center; justify-content:center; height:64px;
  border:1px dashed #cbd5e1; border-radius:12px; background:#fafcff; color:#64748b;
}

/* 4) ‘중/하단 배너 좌우에 또 테두리’가 다른 CSS에서 붙는 경우까지 차단 */
.home .mid-banner,
.home .mid-banner .banner-slot{
  box-shadow:none !important;
  outline:none !important;
}

/* 5) 버튼/텍스트 Hover(하얀 배경 섹션 대비) – 색상만 또렷하게 */
.home :where(.quick-actions, .hjf-notice, .partners, .mid-banner) a.btn:not(.btn--primary):hover{
  color:#0a3f8c !important;
  border-color:#0a3f8c !important;
  background: #f0f6ff !important;
}
.home .sec-head .more:hover{ color:#0a3f8c !important; border-color:#cfe2f3 !important; background:#eef5fb !important; }


/* 공통 컨테이너 */
.partners { background:#fff; padding:16px 0 28px; }
.partners .sec-head { margin:0 auto 10px; max-width:1240px; padding:0 20px; box-sizing:border-box; }
.partners .sec-head h2 { margin:0; }

/* 가운데 정렬 컨테이너 */
.partners-inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}

/* div 그리드 (ul/li 대신) */
.logo-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr)); /* PC 5열 균등 */
  gap:12px;
  margin:0 auto;
}

/* 반응형 열 수 */
@media (max-width:1200px){ .logo-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:1024px){ .logo-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:960px){  .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){  .logo-grid{ grid-template-columns:repeat(2,1fr); } }

/* 로고 박스 */
.logo-grid .logo-ph{
  display:flex; align-items:center; justify-content:center;
  height:64px;
  border:1px dashed #cbd5e1; border-radius:12px;
  background:#fafcff; color:#64748b;
  box-sizing:border-box;
}

/* 혹시 남아있는 기존 UL이 DOM에 남아있을 때(백업용) 완전 무력화 */
.partners ul.logo-row{
  list-style:none !important;
  margin:0 auto !important;
  padding:0 !important;
  max-width:1240px !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:12px !important;
}
.partners ul.logo-row > li{ margin:0 !important; }


/***** HJF HOME – FOCUSED HOTFIX (put this block at the very bottom) *****/

/* 0) 섹션 공통 기준폭/가운데 정렬(딱 한 번만 강제) */
.home .hjf-container,
.home .qa-inner,
.home .mid-banner .banner-slot,
.home .partners .sec-head,
.home .partners .logo-row{
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:20px !important;
  padding-right:20px !important;
  box-sizing:border-box !important;
}

/* 1) 히어로 아래 여백 + 퀵액션 버튼 완전 중앙 */
.home .hero-banner{ margin-bottom:24px !important; }
.home .qa-card{ text-align:center !important; }
.home .qa-card .btn{
  display:inline-flex !important;
  justify-content:center !important; align-items:center !important;
  margin:12px auto 0 !important; min-width:140px !important;
}

/* 2) 중/하단 배너: 바깥 실선 제거 → 안쪽 점선만 보이게 */
.home .mid-banner .banner-slot{
  border:0 !important; background:transparent !important; box-shadow:none !important; outline:0 !important;
}
.home .mid-banner .banner-slot .ph{
  border:1px dashed #c9d7e6 !important; border-radius:16px !important;
  background:linear-gradient(180deg,#fbfdff,#f4f8ff) !important;
  padding:22px 0 !important;
}

/* 3) 파트너스: 좌측 쏠림 원천 차단(ul 초기화 + 그리드 중앙/균등) */
.home .partners{ padding:14px 0 28px !important; background:#fff !important; }
.home .partners .sec-head{ padding:0 20px 10px !important; }

/* ul 기본값/떠다니는 레이아웃 완전 제거 */
.home .partners .logo-row{
  list-style:none !important; padding:0 !important; margin:0 auto !important;
  float:none !important; clear:both !important;
  display:grid !important; gap:12px !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;   /* PC 5열 균등 */
  justify-items:stretch !important; align-items:stretch !important;
}
.home .partners .logo-row::before,
.home .partners .logo-row::after{ content:none !important; display:none !important; }

/* 반응형 열 수 */
@media (max-width:1024px){ .home .partners .logo-row{ grid-template-columns:repeat(4,1fr) !important; } }
@media (max-width:960px){  .home .partners .logo-row{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:560px){  .home .partners .logo-row{ grid-template-columns:repeat(2,1fr) !important; } }

/* 로고 박스 통일 */
.home .partners .logo-row > li{
  display:flex !important; align-items:center !important; justify-content:center !important;
  height:64px !important; border:1px dashed #cbd5e1 !important; border-radius:12px !important;
  background:#fafcff !important; color:#64748b !important;
}

/***** HERO 높이 고정 + 그라데이션 풀블리드 *****/

/* 모바일/태블릿 기본: 적정 높이(화면 비율 따라 유연) */
.home .hero-banner{
  position: relative !important;
  /* 좌우로 퍼지는 라디얼 그라데이션을 섹션에 직접 적용 */
  background:
    radial-gradient(1100px 520px at 50% 55%, rgba(89,165,216,.35), transparent 60%),
    #0b1020 !important;
  /* 모바일~태블릿 ‘적정’ 높이: 너무 작지도 크지도 않게 */
  min-height: clamp(420px, 56vh, 540px) !important;
}

/* PC(≥961px): 정확히 720px로 고정 */
@media (min-width: 961px){
  .home .hero-banner{
    min-height: 720px !important;   /* ← 요구사항: PC 720px */
  }
}

/* 그라데이션 잘림 방지: 내부 박스는 배경을 가두지 않도록 */
.home .hero-banner .banner-slot{
  position: relative !important;
  display: block !important;
  overflow: visible !important;   /* 좌우/상하 잘림 방지 */
  border: 0 !important;
  box-shadow: none !important;
}

/* 가운데 점선 placeholder 박스(원래 표시하던 치수 박스) */
.home .hero-banner .ph{
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 18px 0 !important;
  border: 1px dashed #c9d7e6 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#fbfdff,#f4f8ff) !important;
  color:#94a3b8 !important;
}

/* 텍스트/버튼 레이어: 정확히 가운데 */
.home .hero-banner .hero-layer{
  position: absolute !important; inset: 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  text-align: center !important; padding: 0 20px !important;
}
.home .hero-layer .cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center !important; }
.home .hero-layer .cta .btn{ margin:0 !important; }

/* 히어로 아래 간격(붙는 현상 방지) */
.home .quick-actions{ margin-top: 24px !important; }

/* 작은 폰에서 과도한 텍스트 확대 방지(선택) */
@media (max-width: 540px){
  .home .hero-layer .headline{ font-size: 22px !important; }
  .home .hero-layer .sub{ font-size: 14px !important; }
}

/************* FIX #A: 컨테이너 최소 높이(히어로는 건드리지 않음) *************/
#main.hjf-page{
  /* 모바일/태블릿은 유연하게(최소 높이 주지 않음) */
  min-height: auto;
}
@media (min-width: 961px){
  #main.hjf-page{
    min-height: 720px !important; /* PC에서만 720px 보장 */
  }
}

/* 혹시 기존에 히어로에 고정/최소 높이를 준 규칙이 있다면 무력화 */
.home .hero-banner{ min-height: initial !important; height: auto !important; }
.home .hero-banner .banner-slot{ min-height: initial !important; }

/* 히어로 그라데이션 잘림 방지(슬롯 자체는 overflow 보이지 않게) */
.home .hero-banner{
  background:
    radial-gradient(1100px 520px at 50% 55%, rgba(89,165,216,.35), transparent 60%),
    #0b1020 !important;
  overflow: visible; /* 내부 레이어 잘림 방지 */
}

/************* FIX #B: Partners(주신 구조 기준) 중앙 정렬 + 5열 균등 *************/
/* HTML:
<section class="partners" aria-label="파트너">
  <div class="partners-inner">
    <div class="sec-head"><h2>Partners 🤝</h2></div>
    <div class="logo-grid">
      <div class="logo-ph">LOGO</div> x 5
    </div>
  </div>
</section> 
*/

.partners{ background:#fff; padding:14px 0 28px !important; }
.partners .partners-inner{
  max-width:1240px !important;
  margin:0 auto !important;
  padding:0 20px !important;
  box-sizing:border-box !important;
}
.partners .sec-head{ padding:0 0 10px; }
.partners .sec-head h2{ margin:0; }

/* 핵심: 그리드가 컨테이너 폭을 100% 채우고 가운데 정렬되도록 */
.partners .logo-grid{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important; /* PC 5열 균등 */
  gap:12px !important;
  width:100% !important;   /* 내용폭이 아니라 컨테이너 폭을 꽉 채우기 */
  margin:0 auto !important;
  box-sizing:border-box !important;
}
@media (max-width: 1024px){ .partners .logo-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 960px){  .partners .logo-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 560px){  .partners .logo-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }

/* 로고 박스 통일 */
.partners .logo-grid .logo-ph{
  display:flex; align-items:center; justify-content:center;
  height:64px;
  border:1px dashed #cbd5e1; border-radius:12px;
  background:#fafcff; color:#64748b;
}

/************* 옵션: mid-banner 바깥 실선 제거(점선만 보이게) *************/
.home .mid-banner .banner-slot{ border:0 !important; background:transparent !important; }
.home .mid-banner .banner-slot .ph{
  border:1px dashed #c9d7e6 !important; border-radius:16px !important;
  background:linear-gradient(180deg,#fbfdff,#f4f8ff) !important;
  max-width:1240px; margin:0 auto; padding:22px 0;
}


  /* ===== Banner spec (한 곳에서 관리) ===== */
  :root{
    /* 표시 박스(PC) 기준 폭/높이 */
    --hero-w: 1240;  --hero-h: 420;   /* 상단배너(PC) 1240×420 */
    --mid-w:  1240;  --mid-h: 200;    /* 중앙배너(PC) 1240×200 */

    /* 모바일 권장 업로드(논리 px) */
    --hero-mo-w: 768;  --hero-mo-h: 400;   /* 상단배너(MO) */
    --mid-mo-w:  768;  --mid-mo-h: 240;    /* 중앙배너(MO) */

    /* 문구 템플릿 */
    --hero-label-pc: "Top Banner " attr(data-hero-pc);
    --mid-label-pc:  "Middle Banner " attr(data-mid-pc);
    --hero-label-mo: "Top Banner " attr(data-hero-mo);
    --mid-label-mo:  "Middle Banner " attr(data-mid-mo);
  }

  /* placeholder 비율 고정 */
  .home .hero-banner .ph{ aspect-ratio: calc(var(--hero-w) / var(--hero-h)); }
  @media (max-width:768px){ .home .hero-banner .ph{ aspect-ratio: calc(var(--hero-mo-w) / var(--hero-mo-h)); } }
  .home .mid-banner .ph{ aspect-ratio: calc(var(--mid-w) / var(--mid-h)); }
  @media (max-width:768px){ .home .mid-banner .ph{ aspect-ratio: calc(var(--mid-mo-w) / var(--mid-mo-h)); } }

  /* placeholder 기본 스타일(사이트 기존 톤에 맞춤) */
  .home .banner-slot .ph{
    display:flex; align-items:center; justify-content:center;
    width:100%;
    border:1px dashed #c9d7e6; border-radius:16px;
    background:linear-gradient(180deg,#fbfdff,#f4f8ff);
    color:#64748b; font-size:13px; text-align:center; padding:12px 0;
  }

  /* 권장 크기 문구를 CSS로 출력 */
  .home .hero-banner .ph::after,
  .home .mid-banner .ph::after{ content:""; display:block; white-space:pre-wrap; line-height:1.6; }

  /* PC 문구 */
  @media (min-width:769px){
    .home .hero-banner .ph::after{ content: var(--hero-label-pc); }
    .home .mid-banner .ph::after{ content: var(--mid-label-pc); }
  }
  /* 모바일 문구 */
  @media (max-width:768px){
    .home .hero-banner .ph::after{ content: var(--hero-label-mo); }
    .home .mid-banner .ph::after{ content: var(--mid-label-mo); }
  }

  /* =========================
   Banner spec labels (FIX)
   - attr()를 var() 안이 아니라 content:에서 직접 사용
   - PC/MO에서 다른 문구 노출
   ========================= */

/* 상단 배너 placeholder 비율 */
.home .hero-banner .ph{
  aspect-ratio: 1240 / 420; /* PC 기준 표시 비율 */
}
@media (max-width:768px){
  .home .hero-banner .ph{ aspect-ratio: 768 / 400; }
}

/* 중앙 배너 placeholder 비율 */
.home .mid-banner .ph{
  aspect-ratio: 1240 / 200;
}
@media (max-width:768px){
  .home .mid-banner .ph{ aspect-ratio: 768 / 240; }
}

/* 기본 placeholder 스타일(센터 정렬/점선) */
.home .banner-slot .ph{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  border:1px dashed #c9d7e6; border-radius:16px;
  background:linear-gradient(180deg,#fbfdff,#f4f8ff);
  color:#64748b; font-size:13px; text-align:center; padding:12px 0;
  position:relative;
}

/* ===== 권장 크기 문구 출력 (Hero) ===== */
/* PC */
@media (min-width:769px){
  .home .hero-banner .ph::after{
    content: "Top Banner " attr(data-hero-pc);
    display:block; line-height:1.6; white-space:pre-wrap;
  }
}
/* Mobile */
@media (max-width:768px){
  .home .hero-banner .ph::after{
    content: "Top Banner " attr(data-hero-mo);
    display:block; line-height:1.6; white-space:pre-wrap;
  }
}

/* ===== 권장 크기 문구 출력 (Mid banners – 상단/하단 공통) ===== */
/* PC */
@media (min-width:769px){
  .home .mid-banner .ph::after{
    content: "Middle Banner " attr(data-mid-pc);
    display:block; line-height:1.6; white-space:pre-wrap;
  }
}
/* Mobile */
@media (max-width:768px){
  .home .mid-banner .ph::after{
    content: "Middle Banner " attr(data-mid-mo);
    display:block; line-height:1.6; white-space:pre-wrap;
  }
}

/* ===== [HOTFIX] Primary 버튼 대비 강화 & 전역 a:hover 차단 ===== */

/* 전역 a:hover가 버튼 글자색을 바꾸지 못하게 */
.home a.btn:hover,
.home a.btn:focus {
  text-decoration: none !important;
  color: inherit !important;
}

/* Primary 버튼: 글자/아이콘 항상 흰색 유지 */
.home .btn.btn--primary,
.home a.btn--primary {
  color: #fff !important;
}
.home .btn.btn--primary:hover,
.home .btn.btn--primary:focus,
.home a.btn--primary:hover,
.home a.btn--primary:focus {
  color: #fff !important;                    /* 흰 글씨 고정 */
  filter: none !important;                    /* 기존 filter 무효화 */
  background: linear-gradient(135deg, #4b96cf 0%, #0a3f8c 100%) !important; /* 살짝만 진하게 */
  box-shadow: 0 6px 18px rgba(12,77,162,.18) !important;
}

/* 버튼 안 아이콘도 함께 흰색으로 */
.home .btn svg,
.home .btn i {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 혹시 남아있는 전역 a:hover가 있다면 버튼엔 적용 불가 처리 */
.home a.btn,
.home .btn {
  -webkit-font-smoothing: antialiased;
  color: inherit; /* 기본 상태는 각 버튼 스타일이 결정 */
}


/**************** HJF Expo Background (failsafe) ****************/
:root{
  --expo-blue:#59a5d8; --expo-deep:#0c4da2; --expo-orange:#ff8c1a;
}

/* 배경 레이어: 콘텐츠 뒤, body 앞 X → z-index:0로 스택 최하단 확보 */
.hjf-expo-bg{
  position:fixed; inset:0;
  z-index:0 !important;             /* ← 중요: -1 금지 */
  pointer-events:none;
  background:transparent;
  overflow:visible;
}

/* 실제 페이지가 위에 오도록 최소한의 층만 올림(충돌 없게) */
header, #hjf-header, #hjx-header,
main, #wrap, #container, #page { position:relative; z-index:1; }

/* 버블 */
.hjf-expo-bg span{
  position:absolute; bottom:-12vh;
  display:block; border-radius:999px;
  background:
    radial-gradient(60% 60% at 35% 35%, rgba(89,165,216,.28), rgba(89,165,216,0) 62%),
    radial-gradient(70% 70% at 70% 70%, rgba(255,140,26,.12), rgba(255,140,26,0) 68%);
  border:1px solid rgba(12,77,162,.16);
  box-shadow:0 6px 18px rgba(12,77,162,.06), 0 18px 54px rgba(12,77,162,.10);
  filter:saturate(1.04);
  opacity:.9;
  animation:expo-rise linear infinite, expo-drift ease-in-out infinite;
}

/* 개체 배치/속도 */
.hjf-expo-bg span:nth-child(1)  { left: 6%;  width:28px; height:28px; animation-duration:38s, 8s;  animation-delay:0s, 0s; }
.hjf-expo-bg span:nth-child(2)  { left: 14%; width:42px; height:42px; animation-duration:46s,10s;  animation-delay:2s, 1s; }
.hjf-expo-bg span:nth-child(3)  { left: 22%; width:22px; height:22px; animation-duration:32s, 7s;  animation-delay:4s,.5s; }
.hjf-expo-bg span:nth-child(4)  { left: 30%; width:34px; height:34px; animation-duration:44s, 9s;  animation-delay:1s,.2s; }
.hjf-expo-bg span:nth-child(5)  { left: 38%; width:26px; height:26px; animation-duration:36s,7.6s; animation-delay:5s,1.2s; }
.hjf-expo-bg span:nth-child(6)  { left: 46%; width:54px; height:54px; animation-duration:56s,12s; animation-delay:0s,.8s; }
.hjf-expo-bg span:nth-child(7)  { left: 54%; width:24px; height:24px; animation-duration:34s,7.2s; animation-delay:3s,.1s; }
.hjf-expo-bg span:nth-child(8)  { left: 62%; width:32px; height:32px; animation-duration:42s,9.4s; animation-delay:6s,.4s; }
.hjf-expo-bg span:nth-child(9)  { left: 70%; width:20px; height:20px; animation-duration:30s,6.8s; animation-delay:1s,.9s; }
.hjf-expo-bg span:nth-child(10) { left: 78%; width:38px; height:38px; animation-duration:48s,10.8s;animation-delay:2.5s,.3s; }
.hjf-expo-bg span:nth-child(11) { left: 86%; width:26px; height:26px; animation-duration:40s,8.6s; animation-delay:4.5s,.7s; }
.hjf-expo-bg span:nth-child(12) { left: 92%; width:44px; height:44px; animation-duration:52s,11.2s;animation-delay:.8s,.5s; }

/* 유리광택 */
.hjf-expo-bg span::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%);
  mix-blend-mode:screen;
}

/* 모션 */
@keyframes expo-rise{
  0%   { transform:translate3d(0,0,0) scale(1);   opacity:0; }
  8%   { opacity:.9; }
  100% { transform:translate3d(0,-115vh,0) scale(1.18); opacity:0; }
}
@keyframes expo-drift{
  0% { transform:translateX(-6px); }
  50%{ transform:translateX( 6px); }
  100%{transform:translateX(-6px); }
}

/* 모션 줄이기 사용자 */
@media (prefers-reduced-motion:reduce){
  .hjf-expo-bg span{ animation-duration:70s,14s; }
}

/* ====== (임시 디버그) CSS가 적용됐는지 육안 확인 ====== */
.hjf-expo-bg::before{
  content:"EXPO BG OK"; position:fixed; top:10px; left:10px;
  font:700 12px/1 system-ui; color:#ff6a00; opacity:.7;
}
/* 확인 후 ↑ 이 블록 삭제 가능 */


/* === HJF: Primary 버튼 귤색 테마 (home 범위 전용) === */
.home a.btn--primary,
.home .btn.btn--primary{
  color:#fff !important;
  background: linear-gradient(135deg, #FFA54C 0%, #FF7A00 100%) !important; /* 귤색 그라데이션 */
  border: 1px solid rgba(255,122,0,.0) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.home a.btn--primary:hover,
.home a.btn--primary:focus,
.home .btn.btn--primary:hover,
.home .btn.btn--primary:focus{
  color:#fff !important; /* 글자 고정 */
  background: linear-gradient(135deg, #FF8C1A 0%, #E96400 100%) !important; /* 살짝 진하게 */
  box-shadow: 0 8px 22px rgba(233,100,0,.25) !important;
  text-decoration:none !important;
}

.home a.btn--primary:active,
.home .btn.btn--primary:active{
  background: linear-gradient(135deg, #FF7F00 0%, #D95700 100%) !important;
  box-shadow: 0 4px 14px rgba(233,100,0,.28) inset !important;
}

.home a.btn--primary svg,
.home a.btn--primary i,
.home .btn.btn--primary svg,
.home .btn.btn--primary i{
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}

/* 전역 a:hover가 버튼 글자색을 바꾸지 못하도록 */
.home a.btn:hover, .home a.btn:focus{ color:inherit !important; text-decoration:none !important; }

.hero-slider{position:relative; overflow:hidden; border-radius:12px}
.hero-slider .slide{min-width:100%; display:none}
.hero-slider .slide.is-show{display:block}
.hero-slider picture, .hero-slider img{display:block; width:100%; height:auto}
.hero-slider .fill-link{position:absolute; inset:0; z-index:2}

.hero-slider .dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:6px; z-index:3;
}
.hero-slider .dot{
  width:8px; height:8px; border-radius:50%;
  border:0; background:rgba(255,255,255,.45); cursor:pointer;
}
.hero-slider .dot.is-active{background:#fff}


/* 겹쳐서 페이드시킬 때 잠깐 쓰는 레이어 */
.hero-slider .slide.fade-layer{
  position:absolute; inset:0; z-index:2;
}


/* Quick Actions: 데스크톱 3열 고정 (6개면 2행×3) */
.home .quick-actions .qa-inner{
  display:grid !important;
  grid-template-columns: 1fr;      /* 모바일 기본 1열 */
  gap: 18px;
}

/* ≥960px부터 3열 고정 */
@media (min-width:960px){
  .home .quick-actions .qa-inner{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 카드가 동일 높이로 채워지도록 (버튼 위치 안정) */
.home .quick-actions .qa-card{
  height: 100%;
  display: flex; flex-direction: column;
}
.home .quick-actions .qa-card p{ margin-bottom: 12px; }
.home .quick-actions .qa-card .btn{
  margin-top: auto;                /* 버튼을 카드 하단으로 밀착 */
}
