/* =========================================================
   KBIOMEDI 공통 스타일시트
   - 메인/서브페이지 5개 전체가 이 파일을 공유
   - 실제 콘텐츠(수치/로고/이미지)는 [ ] 표시 자리 / .ph 박스에 추후 삽입
   ========================================================= */

/* Pretendard 자체 호스팅 (외부 CDN 의존 제거 — 네트워크/차단 이슈로 폰트가 시스템 폰트로 대체되는 문제 방지) */
@font-face{
  font-family:'Pretendard';
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/Pretendard-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard';
  font-weight:600;
  font-display:swap;
  src:url('../assets/fonts/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard';
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/Pretendard-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard';
  font-weight:800;
  font-display:swap;
  src:url('../assets/fonts/Pretendard-ExtraBold.woff2') format('woff2');
}

:root{
  --bg-light:#FFFFFF;
  --bg-soft:#F7F7FA;
  --bg-dark:#0B0B10;
  --bg-dark-2:#131319;
  --text-primary:#14141A;
  --text-on-dark:#F5F5F8;
  --text-muted:#6B6B76;
  --text-muted-on-dark:#9C9CA8;
  --line:#E6E6EC;
  --line-on-dark:#26262F;

  --accent:#3D5AFE;
  --accent-dim:#2C3FBF;
  --accent-tint:#EDEFFF;

  --accent-b:#3D5AFE;
  --accent-b-dim:#2C3FBF;
  --accent-b-tint:#EDEFFF;

  --font-display:'Pretendard', -apple-system, sans-serif;
  --font-mono:'Pretendard', -apple-system, sans-serif;

  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:28px;

  --container:1240px;
  --section-pad:clamp(80px, 11vw, 160px);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-display);
  color:var(--text-primary);
  background:var(--bg-light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
ul{list-style:none;}

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);
}
.section-title{
  font-size:clamp(32px, 4.6vw, 56px); font-weight:800; letter-spacing:-0.03em; line-height:1.18;
}
.section-desc{ margin-top:16px; font-size:clamp(15px, 1.4vw, 18px); color:var(--text-muted); line-height:1.7; }
.section--dark .section-desc{ color:var(--text-muted-on-dark); }
.accent{ color:var(--accent); }
.accent-b{ color:var(--accent-b-dim); }

/* ---- Placeholder box ---- */
.ph{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:linear-gradient(155deg, var(--bg-soft) 0%, #ECECF4 100%);
  color:#6B6B78; font-size:13px; font-weight:600; line-height:1.5; padding:12px;
}
.section--dark .ph{
  border-color:var(--line-on-dark);
  background:linear-gradient(155deg, #16161D 0%, #0E0E13 100%);
  color:#8A8A96;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 32px; border-radius:100px; font-size:16px; font-weight:700;
  transition:transform .15s ease, background .15s ease, opacity .15s ease; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-dim); }
.btn--secondary{ background:var(--accent-b); color:#fff; }
.btn--ghost{ background:transparent; color:var(--text-primary); border:1.5px solid var(--line); }
.section--dark .btn--ghost{ color:var(--text-on-dark); border-color:var(--line-on-dark); }
.btn--ghost-dark{ background:transparent; color:var(--text-on-dark); border:1.5px solid var(--line-on-dark); }

/* =========================================================
   HEADER
   ========================================================= */
.navbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar__logo{ font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-0.03em; color:var(--text-primary); }
.navbar__menu{ display:flex; align-items:center; gap:32px; }
.navbar__menu a{ font-size:15px; font-weight:600; color:var(--text-primary); }
.navbar__menu a.is-current{ color:var(--accent); }
.navbar__menu a:hover{ color:var(--accent); }
.navbar__cta{ padding:12px 22px; border-radius:100px; background:var(--accent); color:#fff !important; font-weight:700; }
.navbar__cta:hover{ background:var(--accent-dim); }
.navbar__toggle{ display:none; }

/* Full-Loop 드롭다운 (상단 메뉴 → 4개 사업 페이지 바로가기) */
.navbar__item--dropdown{ position:relative; }
/* 토글과 드롭다운 사이 여백 구간도 계속 hover 상태로 인식시켜, 마우스가 이동하는 동안 메뉴가 먼저 닫히지 않도록 함 */
.navbar__item--dropdown::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:180px; height:16px; }
.navbar__dropdown-toggle{ display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:15px; font-weight:600; color:var(--text-primary); }
.navbar__dropdown-toggle:hover{ color:var(--accent); }
.navbar__item--dropdown.is-current .navbar__dropdown-toggle{ color:var(--accent); }
.navbar__caret{ width:11px; height:11px; transition:transform .2s ease; }
.navbar__item--dropdown:hover .navbar__caret,
.navbar__item--dropdown.is-open .navbar__caret{ transform:rotate(180deg); }
.navbar__dropdown{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translate(-50%,-6px);
  min-width:172px; padding:8px; background:var(--bg-light); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:0 20px 40px -20px rgba(20,20,26,.28);
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:120;
}
.navbar__dropdown a{ padding:9px 12px; border-radius:8px; font-size:14px; font-weight:600; white-space:nowrap; }
.navbar__dropdown a:hover{ background:var(--accent-tint); color:var(--accent); }
.navbar__dropdown a.is-current{ background:var(--accent-tint); }
.navbar__item--dropdown:hover .navbar__dropdown,
.navbar__item--dropdown.is-open .navbar__dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}

@media (max-width:900px){
  .navbar__menu{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px; background:var(--bg-light);
    flex-direction:column; align-items:flex-start; padding:100px 28px 28px; gap:22px;
    transform:translateX(100%); transition:transform .25s ease; box-shadow:-10px 0 30px rgba(0,0,0,.08);
    overflow-y:auto;
  }
  .navbar__menu.is-open{ transform:translateX(0); }
  .navbar__cta{ margin-top:8px; }
  .navbar__toggle{ display:flex; flex-direction:column; gap:5px; z-index:110; }
  .navbar__toggle span{ width:22px; height:2px; background:var(--text-primary); }
  .navbar__item--dropdown{ width:100%; }
  .navbar__item--dropdown::after{ display:none; }
  .navbar__dropdown-toggle{ width:100%; justify-content:space-between; }
  .navbar__dropdown{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:none; padding:2px 0 0 14px; margin-top:2px; background:none;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .navbar__item--dropdown.is-open .navbar__dropdown{ max-height:220px; transform:none; }
  .navbar__dropdown a{ padding:8px 0; }
}

/* =========================================================
   HERO (메인)
   ========================================================= */
.hero{
  position:relative; min-height:92vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:160px 24px 100px;
  background:#05050A;
  overflow:hidden;
}
.hero__loop-bg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); width:min(820px, 140vw); aspect-ratio:1/1; opacity:.5; pointer-events:none; z-index:2; }
/* 히어로 배경 영상: hero-bg.mp4 (없으면 검정 배경만 노출되어 안전) */
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.9; }
.hero__video-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(5,5,10,.35) 0%, rgba(5,5,10,.15) 40%, rgba(5,5,10,.55) 78%, #05050A 100%); }
.hero__content{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; }
.hero__eyebrow{ font-family:var(--font-mono); font-size:14px; font-weight:600; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; margin-bottom:22px; }
.hero__title{ font-size:clamp(40px, 7vw, 84px); font-weight:800; letter-spacing:-0.03em; line-height:1.16; max-width:920px; color:var(--text-on-dark); }
.hero__sub{ margin-top:24px; font-size:clamp(16px, 2vw, 19px); color:var(--text-muted-on-dark); line-height:1.7; max-width:580px; }
.hero__ctas{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; justify-content:center; }
.hero .btn--ghost{ color:var(--text-on-dark); border-color:var(--line-on-dark); }
.hero__persona-note{ margin-top:16px; font-size:12px; color:var(--text-muted-on-dark); font-family:var(--font-mono); }

/* =========================================================
   SUB-HERO (서브페이지 전용)
   ========================================================= */
.subhero{
  position:relative; padding:160px 24px 90px; text-align:left;
  background:radial-gradient(50% 60% at 85% 0%, var(--sh-tint, var(--accent-tint)) 0%, rgba(237,239,255,0) 70%), var(--bg-light);
  overflow:hidden;
}
.breadcrumb{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); display:flex; gap:8px; align-items:center; margin-bottom:28px; }
.breadcrumb a{ color:var(--text-muted); } .breadcrumb a:hover{ color:var(--accent); }
.subhero__num{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--sh-accent, var(--accent)); letter-spacing:.06em; text-transform:uppercase; }
.subhero__title{ margin-top:16px; font-size:clamp(36px, 5.6vw, 64px); font-weight:800; letter-spacing:-0.03em; line-height:1.2; max-width:800px; }
.subhero__sub{ margin-top:20px; font-size:16px; color:var(--text-muted); line-height:1.75; max-width:560px; }
.subhero__ctas{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.subhero__stats{ margin-top:64px; display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:28px; }
.subhero__stat{ flex:1; min-width:140px; padding-right:24px; }
.subhero__stat-value{ font-family:var(--font-mono); font-weight:600; font-size:26px; color:var(--sh-accent, var(--accent)); }
.subhero__stat-label{ margin-top:6px; font-size:13px; color:var(--text-muted); }

/* =========================================================
   OVERVIEW STRIP (무엇을 하나요 — 3 bullet)
   ========================================================= */
.overview{ padding:var(--section-pad) 24px; border-bottom:1px solid var(--line); }
.overview__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.overview__item{ display:flex; flex-direction:column; gap:10px; }
.overview__item-num{ font-family:var(--font-mono); font-size:12px; color:var(--sh-accent, var(--accent)); }
.overview__item-title{ font-size:17px; font-weight:700; }
.overview__item-desc{ font-size:14px; color:var(--text-muted); line-height:1.65; }
@media (max-width:800px){ .overview__grid{ grid-template-columns:1fr; } }

/* =========================================================
   PROCESS (세로형 프로세스 스텝)
   ========================================================= */
.process{ padding:var(--section-pad) 24px; background:var(--bg-soft); }
.process__header{ max-width:640px; margin-bottom:64px; }
.process__list{ display:flex; flex-direction:column; }
.process__step{
  display:grid; grid-template-columns:80px 1fr 1fr; gap:32px;
  padding:36px 0; border-top:1px solid var(--line); align-items:center;
}
.process__step:last-child{ border-bottom:1px solid var(--line); }
.process__step-num{ font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--sh-accent, var(--accent)); }
.process__step-title{ font-size:19px; font-weight:700; letter-spacing:-0.01em; }
.process__step-desc{ margin-top:8px; font-size:14px; color:var(--text-muted); line-height:1.65; }
.process__step-media .ph{ aspect-ratio:16/10; width:100%; }
@media (max-width:860px){
  .process__step{ grid-template-columns:1fr; gap:14px; }
  .process__step-media{ order:3; }
}

/* =========================================================
   CASE / STAT GRID
   ========================================================= */
.section4{ padding:var(--section-pad) 24px; }
.section4__header{ max-width:640px; }
.stat-grid{ margin-top:64px; display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.stat-cell{ background:var(--bg-light); padding:36px 26px; display:flex; flex-direction:column; gap:8px; }
.stat-cell__value{ font-family:var(--font-mono); font-weight:700; font-size:clamp(26px, 2.8vw, 36px); color:var(--text-primary); }
.stat-cell__value .unit{ font-size:15px; color:var(--text-muted); margin-left:2px; }
.stat-cell__label{ font-size:13px; color:var(--text-muted); }
@media (max-width:860px){ .stat-grid{ grid-template-columns:repeat(2, 1fr); } }
.trust-row{ margin-top:64px; display:flex; flex-wrap:wrap; gap:16px; }
.trust-badge{ display:flex; align-items:center; gap:12px; padding:14px 20px; border:1px solid var(--line); border-radius:100px; font-size:13px; font-weight:600; color:var(--text-muted); }
.trust-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }

.case-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.case-card{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.case-card .ph{ aspect-ratio:4/3; border-radius:0; border-width:0 0 1px; }
.case-card__body{ padding:20px; }
.case-card__title{ font-size:15px; font-weight:700; }
.case-card__desc{ margin-top:6px; font-size:13px; color:var(--text-muted); }
@media (max-width:860px){ .case-grid{ grid-template-columns:1fr; } }

/* =========================================================
   CROSS-SELL STRIP (다른 사업 연결)
   ========================================================= */
.crosssell{ padding:var(--section-pad) 24px; background:var(--bg-dark); }
.crosssell__header{ max-width:640px; margin-bottom:48px; }
.crosssell__header .section-title{ color:var(--text-on-dark); }
.crosssell__header .eyebrow{ color:var(--accent); }
.crosssell__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.crosssell__card{
  padding:22px; border:1px solid var(--line-on-dark); border-radius:var(--radius-md);
  color:var(--text-on-dark); transition:border-color .2s ease, transform .2s ease;
}
.crosssell__card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.crosssell__card.is-current{ opacity:.4; pointer-events:none; }
.crosssell__card-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent); }
.crosssell__card-title{ margin-top:10px; font-size:15px; font-weight:700; }
.crosssell__card-desc{ margin-top:6px; font-size:12px; color:var(--text-muted-on-dark); line-height:1.5; }
@media (max-width:900px){ .crosssell__grid{ grid-template-columns:repeat(2, 1fr); } }

/* =========================================================
   COMPARE TABLE (레퍼럴 전용)
   ========================================================= */
.compare-table{ background:#fff; border-radius:var(--radius-lg); overflow:hidden; border:1px solid #C7D2FE; }
.compare-row{ display:grid; grid-template-columns:1fr 1fr; }
.compare-row + .compare-row{ border-top:1px solid #E1E6FE; }
.compare-cell{ padding:20px 22px; font-size:13px; }
.compare-cell:first-child{ border-right:1px solid #E1E6FE; color:#8A8A93; }
.compare-cell:last-child{ font-weight:700; color:var(--text-primary); }
.compare-head{ background:var(--accent-tint); font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.compare-head .compare-cell{ font-weight:600; color:var(--accent-dim); border-right:1px solid #E1E6FE; }

/* =========================================================
   CTA (2분기 — 메인/서브 공통)
   ========================================================= */
.section7{ padding:var(--section-pad) 24px; }
.section7__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cta-card{ padding:48px 40px; border-radius:var(--radius-lg); display:flex; flex-direction:column; }
.cta-card--a{ background:var(--text-primary); color:#fff; }
.cta-card--b{ background:var(--bg-soft); border:1px solid var(--line); }
.cta-card__eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.cta-card__title{ margin-top:16px; font-size:clamp(24px, 2.2vw, 30px); font-weight:800; letter-spacing:-0.02em; }
.cta-card__desc{ margin-top:10px; font-size:14px; opacity:.75; line-height:1.6; }
.cta-card__btn{ margin-top:28px; align-self:flex-start; }
@media (max-width:860px){ .section7__grid{ grid-template-columns:1fr; } }

/* 단일 CTA (서브페이지용, 톤 통일) */
.cta-single{ padding:var(--section-pad) 24px; }
.cta-single__box{
  max-width:var(--container); margin:0 auto; padding:64px 48px; border-radius:var(--radius-lg);
  background:var(--cs-bg, var(--text-primary)); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-single__title{ font-size:clamp(22px, 3vw, 30px); font-weight:700; letter-spacing:-0.02em; }
.cta-single__desc{ margin-top:8px; font-size:14px; opacity:.8; max-width:420px; }

/* =========================================================
   FAQ
   ========================================================= */
.section8{ padding:var(--section-pad) 24px; background:var(--bg-soft); }
.section8__title{ text-align:center; margin-bottom:56px; }
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item__q{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 4px; font-size:15px; font-weight:600; text-align:left; }
.faq-item__toggle{ font-family:var(--font-mono); font-size:18px; color:var(--accent); }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.is-open .faq-item__a{ max-height:200px; }
.faq-item__a p{ padding:0 4px 22px; font-size:14px; color:var(--text-muted); line-height:1.7; }

/* =========================================================
   MARQUEE (레퍼런스 로고)
   ========================================================= */
.section6{ padding:var(--section-pad) 0; background:var(--bg-dark); overflow:hidden; }
.section6__header{ padding:0 24px; max-width:640px; margin:0 auto 56px; text-align:center; }
.section6 .section-title{ color:var(--text-on-dark); }
.marquee-group{ display:flex; flex-direction:column; gap:16px; }
.marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track{ display:flex; gap:16px; width:max-content; animation:scroll 32s linear infinite; }
.marquee__track.is-reverse{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.logo-card{ width:180px; height:96px; flex-shrink:0; border:1px solid var(--line-on-dark); border-radius:var(--radius-sm); background:var(--bg-dark-2); display:flex; align-items:center; justify-content:center; padding:16px; }
.logo-card img{ max-width:100%; max-height:100%; object-fit:contain; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ padding:56px 24px 32px; border-top:1px solid var(--line); }
.footer__top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer__logo{ font-weight:600; font-size:18px; letter-spacing:-0.02em; }
.footer__info{ margin-top:14px; font-size:12px; color:var(--text-muted); line-height:1.8; }
.footer__bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--text-muted); }
.footer__links{ display:flex; gap:16px; }

/* ---- Reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation:none; }
}