@charset "UTF-8";
/* ==========================================================================
   KFAS 2026 — 공유 디자인 시스템 (메인 + 전 서브페이지 공통)
   인재림(人材林) "지식의 숲" 콘셉트 · 편집형 기관 디자인
   이 파일은 각 페이지에서 common.css / responsive.css 뒤에 로드해야 함.
   ========================================================================== */

:root{
  --kf-ink:#0d1b2a;
  --kf-ink-2:#3a4658;
  --kf-mute:#6b7688;
  --kf-blue:#0042bf;
  --kf-blue-deep:#002a78;
  --kf-blue-soft:#e9eff9;
  --kf-paper:#f4f6fb;
  --kf-line:#e3e8f2;
  --kf-red:#c0182b;
  --kf-white:#ffffff;
  --kf-shadow:0 18px 44px rgba(16,32,64,.12);
  --kf-shadow-sm:0 8px 24px rgba(16,32,64,.08);
  --kf-radius:20px;
  --kf-ease:cubic-bezier(.22,.61,.36,1);
  --kf-serif:'Pretendard','Noto Sans KR',sans-serif;
  --kf-en:'Montserrat','Poppins',sans-serif;
  --kf-maxw:1320px;
  --kf-pad:40px;

  /* ---- 타이포 스케일 (규칙적 3단계 본문 + 4단계 제목) ---- */
  --fz-cap:13px;                      /* 캡션·라벨·메타 */
  --fz-sm:15px;                       /* 보조 설명 */
  --fz-base:17px;                     /* 본문 기준 */
  --fz-md:20px;                       /* 리드문 */
  --fz-lg:24px;                       /* 소제목 */
  --fz-h3:clamp(22px,2.1vw,30px);
  --fz-h2:clamp(30px,3.4vw,44px);
  --fz-h1:clamp(38px,5vw,60px);
  /* ---- 행간 ---- */
  --lh-tight:1.25;                    /* 제목 */
  --lh-snug:1.55;                     /* 중간 */
  --lh-base:1.8;                      /* 본문 */
  /* ---- 여백 스케일 (8px 배수) ---- */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px;
  --sec-y:clamp(72px,8vw,120px);      /* 섹션 상하 — 전 섹션 동일 */
  --kf-shell:min(100% - 48px, calc(var(--kf-maxw) + var(--kf-pad)*2));  /* 헤더·본문 공통 폭 */
}

/* ---------- base (서브페이지 body에 .kf 클래스 부여 시 적용) ---------- */
body.kf{ font-family:var(--kf-serif); color:var(--kf-ink); background:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.kf ::selection{ background:var(--kf-blue); color:#fff; }
.kf *{ box-sizing:border-box; }
.kf img{ max-width:100%; }

.kf-wrap{ width:var(--kf-shell); max-width:none; margin:0 auto; padding:0 var(--kf-pad); }
.kf-section{ padding:var(--sec-y) 0; position:relative; }
.kf-section--paper{ background:var(--kf-paper); }
.kf-section--ink{ background:var(--kf-ink); color:#fff; }

/* ---------- 공통 타이포 유닛 ---------- */
.kf-eyebrow{ display:inline-flex; align-items:center; gap:14px; font-family:var(--kf-en); font-weight:700; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--kf-blue); margin:0 0 22px; }
.kf-eyebrow::before{ content:""; width:30px; height:2px; background:currentColor; display:inline-block; }
.kf-eyebrow .ko{ font-family:var(--kf-serif); letter-spacing:0; font-weight:600; color:var(--kf-mute); }
.kf-section--ink .kf-eyebrow{ color:#7fa0ff; }
.kf-section--ink .kf-eyebrow .ko{ color:rgba(255,255,255,.6); }

.kf-h2{ font-size:var(--fz-h2); font-weight:800; letter-spacing:-.025em; line-height:var(--lh-tight); color:inherit; margin:0; }
.kf-h3{ font-size:clamp(20px,2vw,26px); font-weight:700; letter-spacing:-.02em; line-height:1.25; margin:0; }
.kf-lede{ font-size:var(--fz-md); line-height:var(--lh-base); color:var(--kf-ink-2); font-weight:400; }
.kf-section--ink .kf-lede{ color:rgba(255,255,255,.72); }
.kf-p{ font-size:var(--fz-base); line-height:var(--lh-base); color:var(--kf-ink-2); }
.kf-ghost{ font-family:var(--kf-en); font-weight:800; color:var(--kf-blue-soft); line-height:.8; letter-spacing:-.04em; user-select:none; pointer-events:none; }

/* ---------- 버튼 ---------- */
.kf-btn{ display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 30px; border-radius:40px; font-weight:700; font-size:15px; letter-spacing:-.01em; transition:.35s var(--kf-ease); border:1.5px solid transparent; cursor:pointer; }
.kf-btn__arrow{ width:18px; height:18px; display:inline-block; transition:transform .35s var(--kf-ease); }
.kf-btn:hover .kf-btn__arrow{ transform:translateX(4px); }
.kf-btn--blue{ background:var(--kf-blue); color:#fff; }
.kf-btn--blue:hover{ background:var(--kf-blue-deep); box-shadow:0 14px 30px rgba(0,66,191,.32); }
.kf-btn--ghost{ background:transparent; color:var(--kf-ink); border-color:var(--kf-line); }
.kf-btn--ghost:hover{ border-color:var(--kf-blue); color:var(--kf-blue); }
.kf-btn--white{ background:#fff; color:var(--kf-blue); }
.kf-btn--white:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.18); }

/* ==========================================================================
   1. 서브 히어로 (모든 서브페이지 상단)
   ========================================================================== */
.kf-hero{ position:relative; min-height:clamp(280px,35vw,400px); display:flex; align-items:flex-end; overflow:hidden; background:var(--kf-blue-deep); color:#fff; }
.kf-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06); animation:kfHeroZoom 12s var(--kf-ease) forwards; }
@keyframes kfHeroZoom{ to{ transform:scale(1); } }
.kf-hero__bg::after{ content:""; position:absolute; inset:0;
  /* 2026-09-10 유저 지시 — 반투명 레이어가 어두워 사진이 죽었다. 전반적으로 밝게. */
  background:linear-gradient(180deg, rgba(0,17,52,.14) 0%, rgba(0,22,66,.30) 52%, rgba(0,17,48,.58) 100%),
             linear-gradient(90deg, rgba(0,26,80,.26) 0%, rgba(0,26,80,0) 55%); }
/* 헤더(pill)가 위 96px 를 덮으므로, «가려지지 않는 영역» 기준으로 텍스트 블록이
   세로 중앙에 오게 잡는다(2026-09-10 실측: 위195/아래74 로 아래 치우침이었다). */
.kf-hero__inner{ position:relative; z-index:3; padding-top:99px; padding-bottom:87px; }
.kf-hero__eyebrow{ display:flex; align-items:center; gap:14px; font-family:var(--kf-en); font-weight:700; font-size:13px; letter-spacing:.24em; text-transform:uppercase; margin-bottom:22px; color:#cfe0ff; }
.kf-hero__eyebrow::before{ content:""; width:34px; height:2px; background:#7fa0ff; }
.kf-hero__eyebrow .ko{ font-family:var(--kf-serif); letter-spacing:.02em; color:rgba(255,255,255,.72); font-weight:500; }
.kf-hero__title{ font-size:clamp(30px,4.2vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.22; margin:0 0 22px; text-shadow:0 2px 30px rgba(0,10,40,.3); }
/* max-width:600px 이 문장을 두 줄로 접었다 — 한 줄에 775px 이면 되고 1297px 을 쓸 수 있다(실측).
   폭 제한을 풀고 좁은 화면에서는 자연스럽게 접히게 둔다. */
.kf-hero__lede{ max-width:none; font-size:clamp(15px,1.3vw,19px); line-height:1.75; color:rgba(255,255,255,.82); }
/* 대형 고스트 워터마크 (人材林 / 섹션코드) */
.kf-hero__watermark{ position:absolute; right:clamp(-10px,2vw,40px); bottom:-8px; z-index:2; font-family:var(--kf-en); font-weight:800; font-size:clamp(120px,20vw,300px); line-height:.7; color:rgba(255,255,255,.06); letter-spacing:-.05em; pointer-events:none; }
.kf-hero__watermark.ko{ font-family:var(--kf-serif); }
/* 좌측 계측 눈금 라인 */
.kf-hero__inner::before{ content:""; position:absolute; left:calc(-1 * var(--kf-pad) + 0px); top:170px; bottom:0; width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.35)); display:none; }

/* 브레드크럼 */
.kf-breadcrumb{ display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.7); margin-bottom:26px; }
.kf-breadcrumb a{ color:inherit; transition:.2s; }
.kf-breadcrumb a:hover{ color:#fff; }
.kf-breadcrumb .sep{ opacity:.5; }
.kf-breadcrumb .home{ width:15px; height:15px; opacity:.85; }

/* ==========================================================================
   2. 섹션 내부 서브 탭 (동일 섹션 형제 페이지 이동)
   ========================================================================== */
.kf-subnav{ position:sticky; top:0; z-index:900; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--kf-line); }
.kf-subnav__list{ display:flex; flex-wrap:wrap; gap:2px; margin:0; padding:0; list-style:none; }
.kf-subnav a{ position:relative; display:inline-block; padding:22px 24px; font-size:15px; font-weight:600; color:var(--kf-mute); transition:color .25s; letter-spacing:-.01em; }
.kf-subnav a:hover{ color:var(--kf-ink); }
.kf-subnav a.on{ color:var(--kf-blue); }
.kf-subnav a.on::after{ content:""; position:absolute; left:24px; right:24px; bottom:-1px; height:3px; background:var(--kf-blue); border-radius:3px; }

/* ==========================================================================
   3. 인트로 (2단: 좌 스테이트먼트 / 우 본문)
   ========================================================================== */
.kf-intro{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(24px,2.6vw,44px);
  /* 좌측 스테이트먼트를 우측 본문 «세로 정중앙»에 맞춘다(2026-09-10 유저 지시) */
  align-items:center; }
.kf-intro__statement{ font-size:clamp(28px,3.3vw,46px); font-weight:700; line-height:1.38; letter-spacing:-.025em; color:var(--kf-ink); }
.kf-intro__statement b{ color:var(--kf-blue); font-weight:800; }
.kf-intro__body p{ font-size:var(--fz-base); line-height:var(--lh-base); color:var(--kf-ink-2); margin:0 0 var(--sp-3); }
.kf-intro__body p:last-child{ margin-bottom:0; }
.kf-intro__sign{ margin-top:34px; padding-top:26px; border-top:1px solid var(--kf-line); }
.kf-intro__sign .role{ font-size:14px; color:var(--kf-mute); }
.kf-intro__sign .name{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin-top:4px; }

/* ==========================================================================
   4. 특징 카드 그리드
   ========================================================================== */
.kf-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,1.8vw,28px); }
.kf-cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.kf-cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.kf-card{ position:relative; padding:clamp(28px,2.6vw,40px); border:1px solid var(--kf-line); border-radius:var(--kf-radius); background:#fff; transition:.4s var(--kf-ease); overflow:hidden; }
.kf-card::before{ content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--kf-blue); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--kf-ease); }
.kf-card:hover{ transform:translateY(-6px); box-shadow:var(--kf-shadow); border-color:transparent; }
.kf-card:hover::before{ transform:scaleY(1); }
.kf-card__num{ font-family:var(--kf-en); font-weight:800; font-size:14px; letter-spacing:.1em; color:#aeb9cd; margin-bottom:22px; }
.kf-card__title{ font-size:clamp(19px,1.5vw,22px); font-weight:700; letter-spacing:-.02em; margin:0 0 12px; }
.kf-card__desc{ font-size:var(--fz-base); line-height:var(--lh-base); color:var(--kf-mute); margin:0; }
.kf-card__icon{ width:52px; height:52px; margin-bottom:24px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--kf-blue-soft); color:var(--kf-blue); }
.kf-card__icon svg{ width:26px; height:26px; }

/* ==========================================================================
   5. 스탯 밴드 (블루)
   ========================================================================== */
.kf-stats{ background:linear-gradient(120deg,var(--kf-blue) 0%,var(--kf-blue-deep) 100%); border-radius:clamp(20px,2.4vw,32px); color:#fff; padding:clamp(40px,5vw,72px); display:grid; grid-template-columns:repeat(4,1fr); gap:40px; position:relative; overflow:hidden; }
.kf-stats::after{ content:""; position:absolute; right:-60px; top:-60px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%); }
.kf-stat{ position:relative; }
.kf-stat__num{ font-family:var(--kf-en); font-weight:800; font-size:clamp(38px,4.6vw,64px); line-height:1; letter-spacing:-.03em; }
.kf-stat__num .u{ font-size:.42em; font-weight:700; margin-left:4px; }
.kf-stat__label{ margin-top:14px; font-size:15px; color:rgba(255,255,255,.78); letter-spacing:-.01em; }

/* ==========================================================================
   6. 타임라인 (실제 순서/연혁일 때만)
   ========================================================================== */
.kf-timeline{ position:relative; }
.kf-timeline::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--kf-line); }
.kf-tl{ position:relative; display:grid; grid-template-columns:200px 1fr; gap:40px; padding:0 0 clamp(36px,4vw,56px) 40px; }
.kf-tl:last-child{ padding-bottom:0; }
.kf-tl::before{ content:""; position:absolute; left:-5px; top:6px; width:11px; height:11px; border-radius:50%; background:var(--kf-blue); box-shadow:0 0 0 5px rgba(0,66,191,.12); }
.kf-tl__year{ font-family:var(--kf-en); font-weight:800; font-size:clamp(26px,2.4vw,34px); color:var(--kf-blue); letter-spacing:-.02em; }
.kf-tl__body h4{ font-size:18px; font-weight:700; margin:0 0 8px; }
.kf-tl__body p{ font-size:15px; line-height:1.8; color:var(--kf-mute); margin:0; }

/* ==========================================================================
   7. 리스트 / 카드형 목록 (뉴스·보도·연차보고서·비디오)
   ========================================================================== */
.kf-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2vw,30px); }
.kf-list--2{ grid-template-columns:repeat(2,1fr); }
.kf-media{ display:block; border-radius:var(--kf-radius); overflow:hidden; background:#fff; border:1px solid var(--kf-line); transition:.4s var(--kf-ease); }
.kf-media:hover{ transform:translateY(-6px); box-shadow:var(--kf-shadow); border-color:transparent; }
.kf-media__thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--kf-blue-soft); }
.kf-media__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--kf-ease); }
.kf-media:hover .kf-media__thumb img{ transform:scale(1.06); }
.kf-media__tag{ position:absolute; left:16px; top:16px; z-index:2; padding:7px 14px; border-radius:30px; background:rgba(13,27,42,.62); backdrop-filter:blur(6px); color:#fff; font-size:12px; font-weight:600; letter-spacing:.02em; }
.kf-media__play{ position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; transition:.35s var(--kf-ease); }
.kf-media__play svg{ width:22px; height:22px; margin-left:3px; color:var(--kf-blue); }
.kf-media:hover .kf-media__play{ transform:scale(1.08); background:#fff; }
.kf-media__body{ padding:24px 26px 30px; }
.kf-media__meta{ display:flex; gap:12px; font-size:13px; color:var(--kf-mute); margin-bottom:12px; }
.kf-media__title{ font-size:18px; font-weight:700; line-height:1.45; letter-spacing:-.02em; color:var(--kf-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kf-media:hover .kf-media__title{ color:var(--kf-blue); }

/* 텍스트 리스트 (보도/공시) */
/* .kf-rows{ border-top:2px solid var(--kf-ink); }  ← 2026-09-10 유저 지시로 숨김(A안과 동일) */
.kf-rows{ border-top:0; }
.kf-row{ display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; padding:28px 8px; border-bottom:1px solid var(--kf-line); transition:.3s var(--kf-ease); }
.kf-row:hover{ background:var(--kf-paper); padding-left:22px; padding-right:22px; }
.kf-row__num{ font-family:var(--kf-en); font-weight:700; color:#b3bccd; font-size:15px; }
.kf-row__title{ font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--kf-ink); }
.kf-row:hover .kf-row__title{ color:var(--kf-blue); }
.kf-row__date{ font-size:14px; color:var(--kf-mute); font-family:var(--kf-en); letter-spacing:.02em; }

/* ==========================================================================
   8. 이미지 + 텍스트 스플릿
   ========================================================================== */
.kf-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.kf-split--rev .kf-split__media{ order:2; }
.kf-split__media{ position:relative; border-radius:var(--kf-radius); overflow:hidden; aspect-ratio:4/3.2; box-shadow:var(--kf-shadow-sm); }
.kf-split__media img{ width:100%; height:100%; object-fit:cover; }
.kf-split__media .kf-badge{ position:absolute; left:24px; bottom:24px; background:#fff; border-radius:16px; padding:18px 22px; box-shadow:var(--kf-shadow); }
.kf-split__media .kf-badge .n{ font-family:var(--kf-en); font-weight:800; font-size:30px; color:var(--kf-blue); line-height:1; }
.kf-split__media .kf-badge .t{ font-size:13px; color:var(--kf-mute); margin-top:4px; }
.kf-feat-list{ margin:28px 0 0; padding:0; list-style:none; }
.kf-feat-list li{ position:relative; padding:16px 0 16px 34px; border-top:1px solid var(--kf-line); font-size:16px; color:var(--kf-ink-2); }
.kf-feat-list li:first-child{ border-top:0; }
.kf-feat-list li::before{ content:""; position:absolute; left:2px; top:22px; width:16px; height:9px; border-left:2px solid var(--kf-blue); border-bottom:2px solid var(--kf-blue); transform:rotate(-45deg); }

/* ==========================================================================
   9. 클로징 CTA 밴드
   ========================================================================== */
.kf-cta{ position:relative; overflow:hidden; background:var(--kf-ink); color:#fff; border-radius:clamp(20px,2.4vw,32px); padding:clamp(48px,6vw,88px); text-align:center; }
/* 배경 문자 패턴 — 아주 연한 흰색 KFAS 를 브랜드 영문 폰트로 깔아 둔다(2026-09-10 유저 지시).
   광원 그라데이션은 그대로 두고 같은 레이어에 글자만 얹는다. */
.kf-cta::before{
  content:"KFAS"; position:absolute; inset:0; z-index:0;
  /* 세트 B — 세트 A 와 «다른 속도로만» 흐른다. 밝기는 고정이라 KFAS 글자는 깜박이지 않는다. */
  background-image:
    radial-gradient(circle at 22% 72%, rgba(255,255,255,.075) 1.4px, transparent 1.9px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.045) 0.9px, transparent 1.3px),
    radial-gradient(1000px 400px at 50% -30%, rgba(0,66,191,.5), transparent 70%);
  background-size: 127px 127px, 71px 71px, 100% 100%;
  animation: kfStarDriftB 87s linear infinite;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--kf-en); font-weight:800;
  font-size:clamp(110px,20vw,300px); letter-spacing:.08em;
  color:rgba(255,255,255,.017);   /* 보일듯 말듯 — 2026-09-10 유저 지시로 3.8% → 1.7% */
  line-height:1; user-select:none; pointer-events:none; white-space:nowrap;
}
.kf-cta__inner{ position:relative; z-index:2; max-width:660px; margin:0 auto; }
.kf-cta h2{ font-size:clamp(28px,3.6vw,46px); font-weight:800; letter-spacing:-.025em; line-height:1.18; margin:0 0 18px; }
.kf-cta p{ color:rgba(255,255,255,.7); font-size:17px; line-height:1.7; margin:0 0 34px; }
.kf-cta .kf-btn-group{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   섹션 헤더 (eyebrow + h2 + 우측 텍스트)
   ========================================================================== */
.kf-shead{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px;
  /* 섹션 경계→라벨(114px)과 제목→본문(64px)이 달라 위아래가 어긋나 보였다(2026-09-10 실측).
     섹션 패딩과 «같은 토큰»을 써서 둘을 맞춘다. */
  margin-bottom:var(--sec-y); }
/* 제목과 «세로 중심»을 맞춘다 — end 정렬이라 하단이 같아지는데,
   제목이 설명문보다 높아 중심이 8px 어긋난다(2026-09-10 실측). 그만큼 띄운다. */
.kf-shead__desc{ margin-bottom:8px; max-width:none; font-size:var(--fz-md) !important; line-height:1.65; color:var(--kf-blue) !important;
  /* 한 줄로 앉히기 위해 폭 제한을 풀고 줄바꿈을 막는다(좁은 화면에서는 아래 미디어쿼리로 되돌린다) */
  white-space:nowrap; }
.kf-center{ text-align:center; }
.kf-center .kf-eyebrow{ justify-content:center; }
.kf-center .kf-shead{ display:block; }
.kf-center .kf-shead__desc{ margin:20px auto 0; }

/* ==========================================================================
   스크롤 리빌
   ========================================================================== */
/* 기본은 보임(JS 실패 대비). JS(.kf-js)가 있을 때만 숨겼다가 리빌 */
.kf-reveal{ transition:opacity .9s var(--kf-ease), transform .9s var(--kf-ease); }
.kf-js .kf-reveal{ opacity:0; transform:translateY(34px); }
.kf-js .kf-reveal.is-in{ opacity:1; transform:none; }
.kf-reveal.d1{ transition-delay:.08s; } .kf-reveal.d2{ transition-delay:.16s; }
.kf-reveal.d3{ transition-delay:.24s; } .kf-reveal.d4{ transition-delay:.32s; }
.kf-reveal.d5{ transition-delay:.4s; }

/* 접근성 */
.kf a:focus-visible, .kf button:focus-visible{ outline:3px solid var(--kf-blue); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  .kf-reveal{ opacity:1 !important; transform:none !important; }
  .kf-hero__bg{ animation:none !important; transform:none !important; }
  .kf *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media screen and (max-width:1024px){
  .kf-intro{ grid-template-columns:1fr; gap:36px; }
  .kf-cards, .kf-list{ grid-template-columns:repeat(2,1fr); }
  .kf-cards--4{ grid-template-columns:repeat(2,1fr); }
  .kf-stats{ grid-template-columns:repeat(2,1fr); gap:34px; }
  .kf-split{ grid-template-columns:1fr; gap:34px; }
  .kf-split--rev .kf-split__media{ order:0; }
  .kf-shead{ grid-template-columns:1fr; }
}
@media screen and (max-width:640px){
  :root{ --kf-pad:20px; }
  .kf-cards, .kf-list, .kf-cards--4, .kf-cards--2, .kf-list--2{ grid-template-columns:1fr; }
  .kf-stats{ grid-template-columns:1fr 1fr; gap:26px; padding:34px 26px; }
  .kf-tl{ grid-template-columns:1fr; gap:8px; padding-left:28px; }
  .kf-row{ grid-template-columns:1fr auto; }
  .kf-row__num{ display:none; }
  .kf-subnav__list{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .kf-subnav a{ white-space:nowrap; padding:18px 16px; }
  .kf-hero__inner{ padding-top:120px; }
}

/* ==========================================================================
   헤더 pill 재디자인 — 메인과 동일 (데스크톱 ≥1201px)
   서브페이지에서도 공유 (common.css 뒤에 로드되어 우선)
   ========================================================================== */
@media screen and (min-width:1201px){
  #header, #header.trans, #header.top, #header.bg-color, #header.gnb-open{
    position:fixed !important; top:18px !important; left:50% !important; right:auto !important;
    transform:translateX(-50%) !important; width:var(--kf-shell) !important; max-width:none !important;
    height:78px !important; max-height:78px !important; background:#fff !important;
    border:0 !important; border-bottom:0 !important; border-radius:20px !important;
    box-shadow:0 8px 28px rgba(17,34,68,.12) !important; box-sizing:border-box !important; z-index:6000 !important;
  }
  #header .hd-logo{ left:var(--kf-pad) !important; margin-top:-22px !important; }
  /* 우측 묶음도 좌측 로고와 같은 정렬선(--kf-pad)에 맞춘다 — 기존 30px 이라 10px 어긋났다 */
  #header .hd-etc{ right:var(--kf-pad) !important; }
  /* 로고 래퍼가 162px 로 고정돼 있어 img 가 max-width:100% 에 눌려 찌그러졌다 — 폭을 풀어준다 */
  #header .hd-logo, #header .hd-logo a, #header .hd-logo.show a{
    width:auto !important; height:auto !important; background:none !important; background-image:none !important;
    line-height:0 !important; text-indent:0 !important; display:block !important; }
  #header .hd-logo a img, #header.trans .hd-logo a img{ filter:none !important; height:44px !important; width:auto !important; max-width:none !important; }

  #header .gnb-wrap{ align-items:center !important; }
  #header .gnb-wrap .gnb > li{ position:relative !important; margin:0 26px !important; }
  #header .gnb-wrap .gnb > li > a, #header.trans .gnb-wrap .gnb > li > a{
    color:#17223a !important; font-size:16px !important; font-weight:700 !important; position:relative !important;
  }
  #header .gnb-wrap .gnb > li:hover > a{ color:#0042bf !important; }
  #header .gnb-wrap .gnb > li > a::after{
    content:'' !important; position:absolute !important; left:0; right:0; bottom:-9px;
    height:3px; background:#0042bf; border-radius:2px; opacity:0; transition:opacity .2s ease;
  }
  #header .gnb-wrap .gnb > li:hover > a::after{ opacity:1 !important; }

  #header .gnb-wrap .gnb > li > ul{
    position:absolute !important; top:calc(100% + 20px) !important; left:50% !important;
    transform:translateX(-50%) translateY(8px) !important; width:auto !important; min-width:210px !important;
    background:#fff !important; border:0 !important; border-radius:16px !important;
    box-shadow:0 16px 36px rgba(17,34,68,.16) !important; padding:14px 12px !important;
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    justify-content:flex-start !important; text-align:center !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    transition:opacity .22s ease, transform .22s ease, visibility .22s !important;
  }
  #header .gnb-wrap .gnb > li:hover > ul{
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
  }
  #header .gnb-wrap .gnb > li > ul::before{
    content:'' !important; position:absolute; left:0; right:0; top:-20px; height:20px; background:transparent;
  }
  #header .gnb-wrap .gnb > li > ul > li{ width:100% !important; text-align:center !important; }
  #header .gnb-wrap .gnb > li > ul > li > a{
    display:block !important; padding:10px 22px !important; font-size:15px !important;
    font-weight:500 !important; color:#333 !important; white-space:nowrap !important; border-radius:8px !important;
  }
  #header .gnb-wrap .gnb > li > ul > li > a:before{ display:none !important; }
  #header .gnb-wrap .gnb > li > ul > li:hover > a{ color:#0042bf !important; background:#f2f5fb !important; }
  #header .gnb-wrap .gnb > li > ul > li > ul{ display:none !important; }

  #header .hd-etc{ right:var(--kf-pad) !important; top:50% !important; height:auto !important; margin-top:0 !important; transform:translateY(-50%) !important; gap:14px !important; }
  #header .hd-etc .hd-apply{
    display:inline-flex !important; align-items:center !important; height:38px !important; padding:0 20px !important;
    background:#c0182b !important; color:#fff !important; font-size:14px !important; font-weight:700 !important;
    border-radius:30px !important; line-height:1 !important; white-space:nowrap !important; transition:background .2s ease !important;
  }
  #header .hd-etc .hd-apply:hover{ background:#96101f !important; }
  #header .hd-etc .hd-search{ margin:0 !important; }
  #header .hd-etc .hd-search .btn-hd-search, #header.trans .hd-etc .hd-search .btn-hd-search{
    width:22px !important; height:22px !important;
    background:url(../img/sub/ic-search.png) no-repeat center !important; background-size:20px !important;
  }
  #header .hd-etc .hd-sns{ display:flex !important; align-items:center !important; gap:9px !important; }
  #header .hd-etc .hd-sns li{ line-height:0 !important; }
  #header .hd-etc .hd-sns a{ display:inline-flex !important; width:24px !important; height:24px !important; align-items:center !important; justify-content:center !important; transition:transform .2s ease, opacity .2s ease !important; }
  #header .hd-etc .hd-sns a:hover{ transform:translateY(-1px) !important; opacity:.85 !important; }
  #header .hd-etc .hd-sns svg{ display:block !important; width:22px !important; height:22px !important; }
  #header .hd-etc .hd-lang-en{ font-size:14px !important; font-weight:600 !important; color:#17223a !important; white-space:nowrap !important; padding-left:2px !important; }
  #header .hd-etc .hd-lang-en:hover{ color:#0042bf !important; }
  #header .hd-etc .hd-menubtn{ display:none !important; }
}

/* ==========================================================================
   추가 컴포넌트 (실제 KFAS 콘텐츠용): 와이드 컨테이너 · 대형 이미지 · 영상 임베드
   · 인물(이사회) 그리드 · 시설 갤러리 · 문서 공시 목록
   ========================================================================== */
.kf-wrap--wide{ max-width:calc(1560px + var(--kf-pad)*2); }

/* 대형 이미지 (원본 사이즈 강조) */
.kf-figure{ margin:0; text-align:center; }
.kf-figure img{ width:auto; max-width:100%; height:auto; border-radius:var(--kf-radius); }
.kf-figure--plain img{ border-radius:0; }
.kf-figure figcaption{ margin-top:18px; font-size:14px; color:var(--kf-mute); }

/* 반응형 유튜브/영상 임베드 */
.kf-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--kf-radius); overflow:hidden; box-shadow:var(--kf-shadow-sm); background:#04060f; }
.kf-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 인물 그리드 (이사회) */
.kf-people{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,1.7vw,28px); }
.kf-person{ }
.kf-person__photo{ position:relative; aspect-ratio:5/7; border-radius:16px; overflow:hidden; background:var(--kf-blue-soft); box-shadow:var(--kf-shadow-sm); }
.kf-person__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--kf-ease); }
.kf-person:hover .kf-person__photo img{ transform:scale(1.045); }
.kf-person__cat{ position:absolute; left:12px; top:12px; z-index:2; padding:5px 13px; border-radius:20px; background:rgba(0,42,120,.72); backdrop-filter:blur(6px); color:#fff; font-size:12px; font-weight:600; letter-spacing:.01em; }
.kf-person__name{ margin-top:18px; font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--kf-ink); }
.kf-person__role{ margin-top:6px; font-size:14px; line-height:1.55; color:var(--kf-mute); }
.kf-person--lead{ grid-column:span 2; }
.kf-person--lead .kf-person__photo{ aspect-ratio:auto; height:100%; min-height:340px; }

/* 시설 갤러리 (인재림 타워) */
.kf-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
.kf-gallery__item{ position:relative; display:block; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--kf-blue-soft); }
.kf-gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--kf-ease); }
.kf-gallery__item:hover img{ transform:scale(1.06); }
.kf-gallery__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 16px 14px; background:linear-gradient(transparent,rgba(3,10,28,.72)); color:#fff; font-size:15px; font-weight:600; }

/* 문서 공시 목록 (경영공시) */
.kf-docs{ border-top:2px solid var(--kf-ink); }
.kf-doc{ display:grid; grid-template-columns:66px 1fr auto; gap:26px; align-items:center; padding:22px 12px; border-bottom:1px solid var(--kf-line); transition:.25s var(--kf-ease); color:inherit; }
.kf-doc:hover{ background:var(--kf-paper); padding-left:22px; padding-right:22px; }
.kf-doc__no{ font-family:var(--kf-en); font-weight:700; font-size:15px; color:#b3bccd; }
.kf-doc__tit{ display:flex; align-items:center; gap:14px; font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--kf-ink); }
.kf-doc:hover .kf-doc__tit{ color:var(--kf-blue); }
.kf-doc__dl{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--kf-blue-soft); color:var(--kf-blue); display:inline-flex; align-items:center; justify-content:center; transition:.25s; }
.kf-doc:hover .kf-doc__dl{ background:var(--kf-blue); color:#fff; }
.kf-doc__dl svg{ width:16px; height:16px; }
.kf-doc__date{ font-size:14px; color:var(--kf-mute); font-family:var(--kf-en); letter-spacing:.02em; white-space:nowrap; }

@media screen and (max-width:1024px){
  .kf-people{ grid-template-columns:repeat(3,1fr); }
  .kf-person--lead{ grid-column:span 1; }
  .kf-person--lead .kf-person__photo{ aspect-ratio:5/7; min-height:0; }
  .kf-gallery{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:640px){
  .kf-people{ grid-template-columns:repeat(2,1fr); }
  .kf-gallery{ grid-template-columns:1fr; }
  .kf-doc{ grid-template-columns:1fr auto; gap:16px; }
  .kf-doc__no{ display:none; }
}

/* ==========================================================================
   세련된 표: 데이터 테이블(kf-table) · 사양표(kf-spec) · KAFS 이니셜 카드
   ========================================================================== */
.kf-table-wrap{ overflow-x:auto; border-radius:var(--kf-radius); border:1px solid var(--kf-line); box-shadow:var(--kf-shadow-sm); -webkit-overflow-scrolling:touch; }
.kf-table{ width:100%; border-collapse:collapse; background:#fff; font-size:var(--fz-base); min-width:560px; }
.kf-table thead th{ background:linear-gradient(120deg,var(--kf-blue),var(--kf-blue-deep)); color:#fff; font-weight:700; text-align:left; padding:18px 24px; letter-spacing:-.01em; white-space:nowrap; }
.kf-table tbody th, .kf-table tbody td{ padding:17px 24px; border-bottom:1px solid var(--kf-line); vertical-align:top; line-height:1.65; color:var(--kf-ink-2); }
.kf-table tbody th{ font-weight:700; color:var(--kf-ink); width:26%; background:var(--kf-paper); }
.kf-table tbody td{ background:#fff; }   /* 내용 칸만 흰색 — 항목열(th)의 회색과 대비된다 */
.kf-table tbody tr:last-child th, .kf-table tbody tr:last-child td{ border-bottom:0; }
.kf-table tbody tr{ transition:background .2s var(--kf-ease); }
.kf-table tbody tr:hover, .kf-table tbody tr:hover th, .kf-table tbody tr:hover td{ background:#f7f9fe; }
.kf-table .kf-t-key{ font-family:var(--kf-en); font-weight:800; font-size:17px; }

/* 사양표: 좌측 라벨 / 우측 값 (선발규모·대상·운영방식 등) */
/* 흰 카드형 사양표 — 회색 섹션 위에서도 내용이 또렷하게 뜨도록.
   상단 2px 검은 선은 빼고 1px 헤어라인 테두리로 영역을 잡는다(2026-09-10 유저 지시). */
.kf-spec{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff;
  border:1px solid var(--kf-line);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,32,64,.04);
}
.kf-spec th{
  width:210px; text-align:left; vertical-align:top;
  background:#fff;                        /* 라벨 칸도 흰색 — 구분은 오른쪽 1px 선으로만(2026-09-10 유저 지시) */
  color:var(--kf-ink); font-weight:700; font-size:var(--fz-base);
  padding:22px 26px; letter-spacing:-.01em;
  border-right:1px solid var(--kf-line);
  border-bottom:1px solid var(--kf-line);
}
.kf-spec td{
  background:#fff;
  vertical-align:top; padding:22px 26px;
  border-bottom:1px solid var(--kf-line);
  color:var(--kf-ink-2); font-size:var(--fz-base); line-height:1.75;
}
/* 마지막 줄의 밑선은 카드 테두리와 겹치므로 뺀다 */
.kf-spec tr:last-child th,
.kf-spec tr:last-child td{ border-bottom:0; }
.kf-spec td b{ color:var(--kf-ink); font-weight:700; }
.kf-spec ul{ margin:0; padding:0; list-style:none; }
.kf-spec ul li{ position:relative; padding:5px 0 5px 18px; }
.kf-spec ul li::before{ content:""; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:50%; background:var(--kf-blue); }

/* KAFS 이니셜 카드 (Knowledge/Forward/Action/Socially) */
.kf-initial{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.7vw,24px); }
.kf-init{ border:1px solid var(--kf-line); border-radius:var(--kf-radius); padding:clamp(26px,2.4vw,36px); background:#fff; transition:.4s var(--kf-ease); }
.kf-init:hover{ transform:translateY(-6px); box-shadow:var(--kf-shadow); border-color:transparent; }
.kf-init__k{ font-family:var(--kf-en); font-weight:800; font-size:56px; line-height:1; letter-spacing:-.03em; }
.kf-init__t{ margin:16px 0 10px; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--kf-ink); }
.kf-init__d{ font-size:14px; line-height:1.7; color:var(--kf-mute); }

@media screen and (max-width:1024px){ .kf-initial{ grid-template-columns:repeat(2,1fr); } }
@media screen and (max-width:640px){ .kf-initial{ grid-template-columns:1fr; } .kf-spec th{ width:130px; padding:16px; } .kf-spec td{ padding:16px; } }

/* ── 게시판 뷰 «사진 갤러리» (2026-09-09, B안과 짝맞춤) ───────────────────────
   가로 꽉 찬 큰 사진 + 좌우 원형 꺽쇠 + 점. 정적 사이트라 빌드 시점에 몇 장인지
   알고 있으므로, 두 장 이상일 때만 꺽쇠·점 마크업을 낸다(build_board_pages.py 참조).
   B안(kfas-mk-02) 의 DocGallery 와 같은 디자인 언어 — 이름만 kf-pgal 로 구분한다
   (이 사이트에는 이미 다른 뜻의 .kf-gal 이 없어 충돌 걱정은 없지만, A안의 격자형
   .kf-gal 과 헷갈리지 않도록 photo-gallery 의 pgal 로 짓는다). */
.kf-pgal{ margin:2.75rem 0; }
.kf-pgal__frame{ position:relative; overflow:hidden; border-radius:6px; background:#f2f4f7; }
.kf-pgal__track{ display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); }
.kf-pgal__slide{ flex:0 0 100%; min-width:0; }
.kf-pgal__slide img{ display:block; width:100%; height:auto; margin:0; }
/* 두 장 이상이면 틀 높이를 고정한다 — 사진마다 비율이 달라 넘길 때 튀는 것을 막는다 */
.kf-pgal--multi .kf-pgal__slide{ aspect-ratio:3/2; }
.kf-pgal--multi .kf-pgal__slide img{ height:100%; object-fit:cover; }
.kf-pgal__cap{ margin-top:12px; font-size:14px; color:#6b7688; text-align:center; }
.kf-pgal__nav{ position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:0; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 4px 16px rgba(0,2,60,.18);
  color:#0d1b2a; cursor:pointer; transition:background-color .2s, opacity .2s; z-index:2; }
.kf-pgal__nav svg{ width:20px; height:20px; }
.kf-pgal__nav:hover{ background:#fff; }
.kf-pgal__nav:disabled{ opacity:.35; cursor:default; }
.kf-pgal__nav--prev{ left:16px; }
.kf-pgal__nav--next{ right:16px; }
.kf-pgal__nav--next svg{ transform:rotate(180deg); }
.kf-pgal__dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:7px; z-index:2; }
.kf-pgal__dot{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 1px 4px rgba(0,2,60,.3);
  cursor:pointer; transition:background-color .2s, width .2s; }
.kf-pgal__dot.is-on{ width:20px; border-radius:4px; background:#fff; }
@media (max-width:640px){
  .kf-pgal--multi .kf-pgal__slide{ aspect-ratio:4/3; }
  .kf-pgal__nav{ width:38px; height:38px; }
  .kf-pgal__nav--prev{ left:10px; }
  .kf-pgal__nav--next{ right:10px; }
}

/* ==========================================================================
   서브 공통 보정 — 브레드크럼 위치 · 푸터 폭 · 선언 2단
   ========================================================================== */

/* 브레드크럼을 서브탭 바 우측 끝선에 맞춘다 */
.kf-subnav .kf-wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.kf-subnav .kf-breadcrumb{ flex:0 0 auto; font-size:13px; color:var(--kf-mute); white-space:nowrap; }
.kf-subnav .kf-breadcrumb a{ display:inline; padding:0; font-size:13px; font-weight:400; color:var(--kf-mute); }
.kf-subnav .kf-breadcrumb a:hover{ color:var(--kf-ink); }
.kf-subnav .kf-breadcrumb .sep{ margin:0 7px; opacity:.45; }
@media screen and (max-width:900px){
  .kf-subnav .kf-wrap{ flex-wrap:wrap; }
  .kf-subnav .kf-breadcrumb{ order:-1; width:100%; padding:12px 0 0; }
}

/* 푸터 폭 제한 — .maxinner 가 이 페이지들에 정의돼 있지 않아 전체 폭으로 퍼졌다 */
#footer .maxinner{ width:90%; max-width:1200px; margin:0 auto; }

/* 선언 카피 2단: 좌 텍스트(끝선 맞춤) / 우 사진 갤러리 */
.kf-declare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,60px); align-items:center; }
.kf-declare__text{ text-align:left; max-width:none; margin:0; }
.kf-declare__text p{ margin:0 0 1.7em; }
/* 좌 텍스트와 우 갤러리 높이를 엇비슷하게 — 3:2 는 너무 높다 */
.kf-declare .kf-pgal--multi .kf-pgal__slide{ aspect-ratio:2/1; }
.kf-declare__text p:last-child{ margin-bottom:0; }
@media screen and (max-width:900px){
  .kf-declare{ grid-template-columns:1fr; }
}

/* ==========================================================================
   마감 보정 (kf-polish-20260910)
   ========================================================================== */

/* ① 배경이 같은 섹션이 이어지면 아래·위 패딩이 합쳐져 228px 이 통째로 빈 공간이 된다.
      배경이 다른 구간은 경계선이 있어 114+114 로 «나뉘어» 보이므로 같은 값인데도 짧게 느껴진다.
      그래서 같은 배경끼리 이어지는 자리에서만 뒤 섹션의 위 패딩을 없앤다. */
.kf-section:not(.kf-section--paper):not(.kf-section--ink)
  + .kf-section:not(.kf-section--paper):not(.kf-section--ink) { padding-top: 0; }
.kf-section--paper + .kf-section--paper { padding-top: 0; }
.kf-section--ink + .kf-section--ink { padding-top: 0; }

/* ③ CTA 박스 — 단색 네이비가 심심해 보인다. 브랜드 골드로 절제된 결을 넣는다.
      · 아주 옅은 도트 그리드(22px)로 표면에 질감
      · 우하단에서 올라오는 골드 광원
      · 위 가장자리에 1px 골드 하이라이트 */
.kf-cta{ box-shadow: inset 0 1px 0 rgba(182,160,106,.30); }
.kf-cta::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* 별 세 겹 — 크기·밝기·간격을 모두 다르게. 53·89·149 는 서로 배수가 아니라
     반복 주기가 길어져 «격자» 로 읽히지 않는다. 마지막 줄은 골드 광원. */
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.095) 1.7px, transparent 2.3px),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,.070) 1.3px, transparent 1.8px),
    radial-gradient(circle at 45% 18%, rgba(255,255,255,.050) 1.0px, transparent 1.4px),
    radial-gradient(780px 340px at 88% 116%, rgba(182,160,106,.22), transparent 66%);
  background-size: 163px 163px, 97px 97px, 59px 59px, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: kfStarTwinkle 9.5s ease-in-out infinite, kfStarDrift 62s linear infinite;
  will-change: opacity, background-position;
}
/* 밝기 펄스 — «멀리서 천천히 빛나는» 느낌. 17초 주기에 폭도 좁게 두어 깜박임으로 읽히지 않게 하고,
   정점을 38%·63% 두 곳에 어긋나게 두어 규칙적인 호흡처럼 보이지 않게 한다.
   표류(140초)와 주기가 서로 배수가 아니라 매 순간 조합이 달라 불규칙해 보인다. */
@keyframes kfStarTwinkle{
  0%, 100% { opacity:.42; }
  27%      { opacity:.95; }
  46%      { opacity:.58; }
  71%      { opacity:1;   }
}
/* 아주 느린 표류 — 별이 «살아 있는» 느낌만 준다(90초에 한 바퀴) */
@keyframes kfStarDrift{
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 163px -163px, -97px 97px, 59px 59px, 0 0; }
}
/* 움직임을 줄이도록 설정한 사용자에게는 정지 상태로 */
@media (prefers-reduced-motion: reduce){
  .kf-cta::after{ animation: none; opacity:.8; }
}

/* 설명문은 넓은 화면에서만 한 줄로 — 좁아지면 자연스럽게 접히게 되돌린다 */
@media screen and (max-width:1200px){
  .kf-shead__desc{ white-space:normal; max-width:560px; }
}

/* 본문 문단 양끝정렬 (kf-justify-20260910, 2026-09-10 유저 지시)
   한글에서 justify 만 주면 «단어가 통째로 다음 줄로» 밀리며 단어 사이가 벌어진다.
   word-break:keep-all 로 어절을 지키고, 자간(letter-spacing)은 건드리지 않아
   글자 사이 간격은 그대로 둔 채 어절 간격만 미세 조정되게 한다. */
.kf-intro__body p,
.kf-p,
.kf-declare__text p,
.kf-card__desc,
.kf-lede,
.kf-section p:not(.kf-eyebrow):not(.kf-shead__desc):not(.kf-pgal__cap):not(.kf-cta p),
.kf-table td,
.kf-spec td{
  text-align: justify;
  /* text-justify 는 지정하지 않는다 — inter-character 를 주면 크롬에서 양끝정렬이 아예
     풀렸고(2026-09-10 실측: 줄끝 94px 어긋남), inter-word 는 영문 단어 사이가 크게 벌어졌다.
     브라우저 기본 분배가 한글·영문 혼용에서 가장 무난하다. */
  word-spacing: normal;
  /* keep-all 을 쓰면 «공백에서만» 줄바꿈이 되어 후보가 부족해지고,
     남는 폭이 전부 단어 사이로 몰려 한 줄만 유난히 벌어진다(2026-09-10 실측).
     기본값으로 두면 한글은 글자 사이에서도 줄이 바뀌어 늘릴 몫이 거의 남지 않는다. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;            /* 긴 영문 고유명사는 음절로 끊어 마지막 한 뼘까지 메운다 */
  -webkit-hyphens: auto;
}

/* ==========================================================================
   GNB 3뎁스 아코디언 (kf-gnb-accordion, 2026-09-10 유저 지시)
   2뎁스(.has3)를 누르면 3뎁스가 펼쳐진다. 기본은 접힘.
   ========================================================================== */
#header .gnb .has3 > a{
  position:relative !important; padding-right:26px !important; cursor:pointer !important;
}
/* 꺽쇠 — 선 두 개를 45도로 꺾어 만든 갈매기. 브랜드 블루. */
#header .gnb .has3 > a::after{
  content:"" !important; position:absolute !important; right:8px !important; top:50% !important;
  width:7px !important; height:7px !important;
  border-right:2px solid #0042bf !important; border-bottom:2px solid #0042bf !important;
  transform:translateY(-70%) rotate(45deg) !important;
  transition:transform .25s cubic-bezier(.22,.61,.36,1) !important;
  opacity:.85 !important;
}
#header .gnb .has3.is-open > a::after{
  transform:translateY(-25%) rotate(-135deg) !important; opacity:1 !important;
}
#header .gnb .has3.is-open > a{ color:#0042bf !important; }

/* 3뎁스는 기본 접힘 */
#header .gnb .has3 > ul{
  display:none !important; overflow:hidden !important;
  margin:4px 0 8px !important; padding:0 !important;
  border:0 !important; background:transparent !important;
}
#header .gnb .has3.is-open > ul{ display:block !important; }
/* 3뎁스 항목 — 기존 메뉴의 구분선·가운데정렬이 섞여 들쭉날쭉했다. 왼쪽 정렬로 통일한다. */
#header .gnb .has3 > ul > li{
  border:0 !important; margin:0 !important; padding:0 !important; text-align:left !important;
}
#header .gnb .has3 > ul > li > a{
  display:block !important; padding:7px 0 7px 14px !important;
  border:0 !important; text-align:left !important;
  font-size:15px !important; font-weight:500 !important; color:#4a5568 !important;
  border-left:2px solid rgba(0,66,191,.16) !important;
  transition:color .2s, border-color .2s !important;
}
#header .gnb .has3 > ul > li > a:hover{
  color:#0042bf !important; border-left-color:#0042bf !important;
}

/* 죽은 링크는 «아예 눌리지 않게» (kf-deadlink, 2026-09-10 유저 지시)
   href=#none 은 갈 곳이 없는 자리다. 커서가 손가락으로 바뀌면 누를 수 있는 것처럼 보인다.
   다만 헤더 메뉴·드롭다운 바는 아코디언 토글에 클릭이 필요하므로 되살린다. */
a[href="#none"]{ pointer-events:none !important; cursor:default !important; }
#header a[href="#none"],
.kf-dnav a[href="#none"],
.kf-dsel a[href="#none"]{ pointer-events:auto !important; cursor:pointer !important; }

/* 가운데 정렬로 쓰는 블록은 양끝정렬 대상이 아니다 —
   .kf-section p 규칙이 .kf-cta 의 text-align:center 를 덮어써 왼쪽으로 치우쳐 보였다(2026-09-10 실측). */
.kf-cta p, .kf-cta h2, .kf-center p{ text-align:center !important; }

/* 세트 B 의 표류 — 세트 A(62초)와 배수가 아니라 두 별밭이 서로 어긋나게 흐른다 */
@keyframes kfStarDriftB{
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -127px 127px, 71px -71px, 0 0; }
}

/* K·F·A·S 이니셜을 좌우로 «아주 살짝» 흔든다 (2026-09-10 유저 지시).
   폭 3px·주기 3.6초로 눈에 거슬리지 않는 선. 네 글자에 서로 다른 지연을 줘서
   한 몸처럼 움직이지 않고 제각각 까딱이게 한다. */
@keyframes kfInitWobble{
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
}
.kf-init__k{
  display:inline-block;        /* transform 이 먹으려면 인라인이 아니어야 한다 */
  will-change: transform;
  animation: kfInitWobble 3.6s ease-in-out infinite;
}
.kf-init:nth-child(2) .kf-init__k{ animation-delay:.45s; animation-duration:3.9s; }
.kf-init:nth-child(3) .kf-init__k{ animation-delay:.9s;  animation-duration:3.3s; }
.kf-init:nth-child(4) .kf-init__k{ animation-delay:1.35s; animation-duration:4.2s; }
@media (prefers-reduced-motion: reduce){
  .kf-init__k{ animation:none; }
}

/* 노란 별 전용 레이어 (kf-cta__stars, 2026-09-10 유저 지시)
   흰 별과 «따로» 밝아지게 하려고 만든 요소다. 5개만, 위치는 붙박이.
   흰 별(9.5초)과 배수가 아닌 12.5초 주기라 두 별밭의 밝기가 계속 어긋난다. */
.kf-cta__stars{
  position:absolute; inset:0; z-index:1; pointer-events:none; display:block;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle at 14% 26%, rgba(255,236,170,.62) 1.9px, transparent 2.6px),
    radial-gradient(circle at 37% 73%, rgba(255,236,170,.42) 1.5px, transparent 2.1px),
    radial-gradient(circle at 56% 15%, rgba(255,236,170,.55) 1.7px, transparent 2.3px),
    radial-gradient(circle at 78% 61%, rgba(255,236,170,.38) 1.4px, transparent 1.9px),
    radial-gradient(circle at 91% 31%, rgba(255,236,170,.50) 1.6px, transparent 2.2px);
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: kfYellowStar 12.5s ease-in-out infinite;
  will-change: opacity;
}
/* 멀리서 빛나는 별 — 거의 사라졌다가 천천히 차오른다 */
@keyframes kfYellowStar{
  0%, 100% { opacity:.14; }
  22%      { opacity:.85; }
  41%      { opacity:.30; }
  68%      { opacity:1;   }
  84%      { opacity:.45; }
}
@media (prefers-reduced-motion: reduce){
  .kf-cta__stars{ animation:none; opacity:.6; }
}

/* CTA 버튼 아이콘 — 글자 화살표(→)는 baseline 을 타서 중심선이 어긋난다.
   같은 규격의 SVG 로 두고 flex 중앙 정렬에 맡긴다(2026-09-10 유저 지시). */
.kf-btn__ico{ width:18px; height:18px; flex:0 0 auto; display:block; }
.kf-btn__ico path{ vector-effect:non-scaling-stroke; }
/* 문의 아이콘은 글자 «앞», 화살표는 글자 «뒤» — gap 은 .kf-btn 의 10px 를 그대로 쓴다 */
.kf-btn--ghost .kf-btn__ico{ margin-right:-2px; }