/* ============== KeyShot Korea – exact layout skin ============== */
:root{
  --ks-bg:#ffffff; --ks-txt:#0d0f14; --ks-sub:#5b6070;
  --ks-line:#e7e9ee; --ks-key:#2b74ff; --ks-dark:#0b0f22;
  --ks-ink:#0a0a0a; --ks-ink2:#0e1016;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
.ks-body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ks-txt);background:var(--ks-bg)}
.ks-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}

/* ---------------- Header ---------------- */
.ks-header{position:sticky;top:0;z-index:1000}
.ks-header::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.84);backdrop-filter:saturate(150%) blur(8px)}
.ks-header__inner{position:relative;display:flex;align-items:center;gap:24px;height:72px}
.ks-logo img{height:60px}
.ks-navtoggle{margin-left:auto;display:none;background:none;border:1px solid var(--ks-line);border-radius:10px;padding:8px 10px}
.ks-gnb{margin-left:auto}
.ks-depth0{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.ks-depth0>li>a{font-weight:800;text-decoration:none;color:var(--ks-txt);padding:10px 0}
.has-sub{position:relative}
.ks-depth1{position:absolute;left:0;top:100%;min-width:240px;background:#fff;border:1px solid var(--ks-line);border-radius:14px;padding:8px;display:none;box-shadow:0 20px 40px rgba(0,0,0,.08)}
.ks-depth1 li{list-style:none}
.ks-depth1 a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ks-txt);font-weight:600}
.ks-depth1 a:hover{background:#f5f7ff}
.has-sub:hover>.ks-depth1{display:block}

/* ---------------- Buttons ---------------- */
.ks-btn{height:44px;padding:0 18px;border-radius:12px;border:1px solid transparent;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.ks-pill{border-radius:999px}
.ks-btn--primary{background:var(--ks-key);color:#fff}
.ks-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.ks-btn--black{background:#111;color:#fff}
.ks-btn--white{background:#fff;color:#111;border-color:#ddd}

/* ---------------- Hero ---------------- */
.ks-hero{position:relative;min-height:78vh;display:grid;place-items:center;overflow:hidden;background:#000;color:#fff}
.ks-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.ks-hero__overlay{position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 50% 18%, rgba(46,84,255,.45), transparent 62%),
  linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%)}
.ks-hero__inner{text-align:center;position:relative}
.ks-hero__mark{width:72px;margin:0 auto 14px;opacity:.95}
.ks-hero__title{font-size:clamp(32px,4.6vw,60px);line-height:1.1;margin:0 0 14px;letter-spacing:-.02em}
.ks-hero__sub{font-size:clamp(16px,1.4vw,20px);opacity:.95;margin:0 0 18px}
.ks-hero__ctas{display:flex;gap:12px;justify-content:center}

/* ---------------- Tiles 3 ---------------- */
.ks-tiles{background:#0b0f12;color:#e9ebf2;padding:56px 0 64px;border-top:1px solid #141824}
.ks-sec__head{text-align:left;margin:0 0 20px}
.ks-sec__title{color:#fff;margin:0}
.ks-tiles__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ks-tile{background:var(--ks-ink2);border:1px solid #191c25;border-radius:14px;overflow:hidden;color:#cfd6ea;display:flex;flex-direction:column;transition:.25s ease}
.ks-tile:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.08)}
.ks-tile__media{position:relative}
.ks-tile__media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ks-tile__badge{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-weight:700;padding:6px 10px;font-size:12px}
.ks-tile__body{padding:18px}
.ks-link{color:#cfd6ea;font-weight:700;text-decoration:none}

/* 베벨 모서리 */
.ks-bevel{--cut:16px;clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 0)}

/* ---------------- AI band ---------------- */
.ks-ai{padding:88px 0;background:linear-gradient(180deg,#0e142c 0%,#0a0f22 100%);color:#fff}
.ks-ai__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.ks-ai__media img{border-radius:16px;border:1px solid rgba(255,255,255,.15);aspect-ratio:16/9;object-fit:cover}
.ks-eyebrow{letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin:0 0 8px}

/* ---------------- Dock callout ---------------- */
.ks-dock{padding:72px 0;background:#0a0a0a;color:#fff;border-top:1px solid #141414;border-bottom:1px solid #141414}
.ks-dock__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.ks-dock__media img{border-radius:16px;border:1px solid #2a2a2a}

/* ---------------- Duo headline ---------------- */
.ks-duo{position:relative;padding:72px 0 40px;background:linear-gradient(180deg,#0a0a0a 0%,#0a0a0a 60%,rgba(10,10,10,0) 100%);color:#fff}
.ks-duo__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ks-duo h3{font-size:28px;margin:0 0 8px}
.ks-duo p{opacity:.85;margin:0 0 14px}
.ks-accent{color:#8fb2ff}

/* ---------------- Stories & Insights ---------------- */
.ks-news{padding:18px 0 60px;background:linear-gradient(180deg, rgba(10,10,10,0) 0%, #0b0f12 60%);color:#e9ebf2}
.ks-news__wrap{display:grid;grid-template-columns:320px 1fr;gap:28px}
.ks-news__left h3{font-size:22px;margin:0 0 10px}
.ks-postgrid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:18px}
.ks-post{background:#0e1016;border:1px solid #191c25;border-radius:14px;overflow:hidden}
.ks-post--hero{grid-row:span 2}
.ks-post img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ks-post__body{padding:14px 16px}

/* ---------------- Education band ---------------- */
.ks-edu{background:#0b0f12;color:#fff;padding:64px 0}
.ks-edu__inner{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center}
.ks-edu__media img{width:100%;clip-path:polygon(10% 0, 100% 0, 100% 85%, 90% 100%, 0 100%, 0 15%)}

/* ---------------- Bottom 2-cards ---------------- */
.ks-bottom{background:radial-gradient(800px 300px at 50% 0%, rgba(255,255,255,.14), transparent 70%), #0b0f12;color:#e9ebf2;padding:44px 0 60px}
.ks-bottom__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ks-bottomcard{padding:22px;background:#0e1016;border:1px solid #191c25;border-radius:14px}
.ks-bottomcard h3{margin:0 0 8px}

/* ---------------- Footer ---------------- */
.ks-footer{background:#0b0f22;color:#cbd3ff;margin-top:56px}
.ks-footer__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:26px;padding:36px 0;align-items:flex-start}
.ks-footer h4{color:#fff;margin:0 0 10px}
.ks-footer a{color:#cbd3ff;text-decoration:none}
.ks-footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;color:#a9b4ff;display:flex;justify-content:space-between;gap:16px}
.ks-footer__policy{list-style:none;display:flex;gap:14px;margin:0;padding:0}

/* Newsletter form */
.ks-newsletter{max-width:360px}
.ks-newsletter form{display:flex;gap:8px}
.ks-newsletter input{flex:1;height:40px;border-radius:10px;border:1px solid #30374a;background:#12162a;color:#e9ebf2;padding:0 10px}
.ks-newsletter button{height:40px;border-radius:10px;border:1px solid var(--ks-key);background:var(--ks-key);color:#fff;padding:0 14px}

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .ks-navtoggle{display:inline-flex}
  .ks-gnb{position:fixed;inset:72px 0 0 auto;width:min(84vw,360px);background:#fff;border-left:1px solid var(--ks-line);transform:translateX(100%);transition:transform .25s ease;padding:18px}
  .ks-gnb.open{transform:translateX(0)}
  .ks-depth0{flex-direction:column;gap:10px}
  .has-sub>.ks-depth1{position:static;display:none;border:none;box-shadow:none;padding:0;margin:6px 0 0}
  .has-sub.open>.ks-depth1{display:block}

  .ks-ai__inner,.ks-dock__inner{grid-template-columns:1fr}
  .ks-duo__grid{grid-template-columns:1fr}
  .ks-news__wrap{grid-template-columns:1fr}
  .ks-postgrid{grid-template-columns:1fr}
  .ks-edu__inner{grid-template-columns:1fr}
  .ks-bottom__grid{grid-template-columns:1fr}
}



/* --- Header 레이아웃 수정: 로고 오른쪽 바로 메뉴 --- */
.ks-header__inner{ display:flex; align-items:center; gap:20px; height:72px; }
.ks-logo{ display:inline-flex; align-items:center; }
.ks-logo img{ height:28px; display:block; }

/* 기존에 nav를 오른쪽 끝으로 밀던 규칙 제거/덮기 */
.ks-gnb{ margin-left:0; }

/* 로고와 메뉴 사이 기본 간격 */
.ks-gnb{ margin-left:8px; }

/* 데스크탑에서 토글 버튼은 오른쪽 끝으로 */
.ks-grow{ flex:1; }
.ks-navtoggle{ margin-left:12px; }

/* GNB 기본 */
.ks-depth0{ list-style:none; display:flex; gap:26px; margin:0; padding:0; }
.ks-depth0>li>a{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:800; text-decoration:none; color:var(--ks-txt); padding:10px 0;
}

/* ▼ 하위메뉴 화살표 (KeyShot 스타일 유사) */
.ks-depth0>li.has-sub>a::after{
  content:""; width:0; height:0; margin-left:4px;
  border-style:solid; border-width:5px 4px 0 4px;
  border-color:#0d0f14 transparent transparent transparent;
  transform-origin:center; transition:transform .15s ease;
  position:relative; top:-1px;
}
/* 드롭다운 열렸을 때 화살표 회전 */
.ks-gnb .has-sub:hover > a::after,
.ks-gnb .has-sub.open > a::after{ transform:rotate(180deg); }

/* 드롭다운 메뉴 */
.ks-gnb .has-sub{ position:relative; }
.ks-gnb .ks-depth1{
  position:absolute; left:0; top:100%; min-width:240px;
  background:#fff; border:1px solid var(--ks-line); border-radius:14px; padding:8px;
  display:none; box-shadow:0 20px 40px rgba(0,0,0,.08);
}
.ks-gnb .has-sub:hover>.ks-depth1{ display:block; }
.ks-gnb .ks-depth1 a{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ks-txt); font-weight:600;
}
.ks-gnb .ks-depth1 a:hover{ background:#f5f7ff; }

/* --- 모바일 --- */
@media (max-width:1024px){
  .ks-navtoggle{ display:inline-flex; }
  .ks-gnb{
    position:fixed; inset:72px 0 0 auto; width:min(84vw,360px); background:#fff;
    border-left:1px solid var(--ks-line); transform:translateX(100%); transition:transform .25s ease; padding:18px;
  }
  .ks-gnb.open{ transform:translateX(0); }
  .ks-depth0{ flex-direction:column; gap:10px; }
  .ks-gnb .has-sub>.ks-depth1{ position:static; display:none; border:none; box-shadow:none; padding:0; margin:6px 0 0; }
  .ks-gnb .has-sub.open>.ks-depth1{ display:block; }

  /* 모바일에서는 화살표 색을 진하게 */
  .ks-depth0>li.has-sub>a::after{ border-top-color:#111; }
}
/* === Header: full-width bar + left padding === */
.ks-header .ks-wrap{
  max-width: none;     /* 상단은 1200px 제한 해제 → 화면 100% 사용 */
  width: 100%;
  padding-left: 32px;  /* 로고를 왼쪽에서 '살짝' 띄우는 패딩 */
  padding-right: 32px; /* 우측도 여백 */
}

/* 해상도 넓을 때 패딩 조금만 더 */
@media (min-width:1440px){
  .ks-header .ks-wrap{ padding-left: 40px; padding-right: 40px; }
}

/* 로고 오른쪽으로 메뉴가 바로 오도록 (여유 간격만) */
.ks-gnb{ margin-left: 12px; }  /* 너무 붙어보이면 16px까지 올려도 OK */

/* 헤더 하단 경계선(원본 느낌) */
.ks-header{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ▼ 하위메뉴 화살표는 기존 규칙 유지 (이미 적용돼 있음)
.ks-depth0>li.has-sub>a::after { ... }
*/
/* --- Logo size override --- */
.ks-logo img{
  height: 60px;   /* 기존 28px → 60px */
  width: auto;    /* 비율 유지 */
}

/* === Typography weight soften (한 단계 얇게) === */

/* 헤더 메뉴/드롭다운 */
.ks-depth0>li>a{ font-weight:500; }         /* 기존보다 한 단계 다운 */
.ks-gnb .ks-depth1 a{ font-weight:500; }    /* 서브메뉴 가독성 */

/* 히어로 */
.ks-hero__title{ font-weight:500; }         /* 타이틀 조금 얇게 */
.ks-hero__sub{   font-weight:400; }

/* 버튼 */
.ks-btn{ font-weight:600; }                 /* 800 → 700 느낌으로 */

/* 섹션 타이틀/카드 타이틀 */
.ks-sec__title,
.ks-section-head h2,
.ks-ai__copy h2,
.ks-dock__copy h2,
.ks-edu__copy h2,
.ks-tile h3,
.ks-story h3,
.ks-bottomcard h3{ font-weight:600; }

/* 링크텍스트(파란 링크 등) */
.ks-link{ font-weight:500; }

/* 푸터 소제목 */
.ks-footer h4{ font-weight:500; }


/* 로고 크기/여백 */
.ks-hero__mark{ height:110px; width:auto; margin:0 auto 14px; }

/* 타이틀(조금 두껍게 + 그라디언트) */
.ks-hero__title{ font-size:clamp(34px,5.2vw,56px); line-height:1.08; font-weight:700; margin:0 0 14px; text-align:center; letter-spacing:-.02em; }
.ks-hero__title--grad{
  background:linear-gradient(90deg,#6aa8ff 0%,#5d96ff 38%,#e9c07a 78%,#f2c984 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent;
}

/* 버튼 톤 (흰색 필/고스트) */
.ks-btn{ height:46px; padding:0 20px; font-weight:700; }
.ks-btn--white{ background:#fff; color:#0e1016; border-color:#fff; box-shadow:0 2px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(0,0,0,.25); }
.ks-btn--white:hover{ filter:brightness(.98); }
.ks-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.06); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.ks-btn--ghost:hover{ background:rgba(255,255,255,.10); }

/* 히어로 높이/패딩(원본 비율) */
.ks-hero{ min-height:720px; padding-top:140px; padding-bottom:120px; }
@media (max-width:1280px){ .ks-hero{ min-height:620px; padding-top:120px; padding-bottom:100px; } }
@media (max-width:768px){ .ks-hero{ min-height:520px; padding-top:100px; padding-bottom:80px; } }

/* === HERO 튜닝: 로고 233px, 타이틀 조금 작게 + line-height 더 넉넉히 === */
.ks-hero__mark{
  height: 233px;   /* 110 → 233 */
  width: auto;
  margin: 0 auto 16px;
}

.ks-hero__title{
  /* 기존 clamp(34px, 5.2vw, 56px) → 살짝 축소 */
  font-size: clamp(28px, 4.2vw, 50px);
  line-height: 1.22;       /* 1.08 → 더 여유 */
  font-weight: 700;
  margin: 0 0 16px;
}

/* 반응형에서 너무 커지지 않게 단계별 보정(선택) */
@media (max-width: 1024px){
  .ks-hero__mark{ height: 180px; }
}
@media (max-width: 640px){
  .ks-hero__mark{ height: 140px; }
  .ks-hero__title{ font-size: clamp(24px, 5.5vw, 34px); line-height: 1.24; }
}

/* === HERO 미세 튜닝 === */
/* 로고 ↔ 타이틀 간격: 기존 16px → 48px(약 3배) */
.ks-hero__mark{
  margin: 0 auto 48px;
}

/* 타이틀: 크기 조금 더 축소 + 줄간격 더 넉넉히 */
.ks-hero__title{
  font-size: clamp(26px, 4vw, 46px); /* 기존 28/4.2vw/50 → 살짝 다운 */
  line-height: 1.30;                 /* 기존 1.22 → 조금 더 여유 */
  margin: 0 0 16px;
}

/* 서브카피 ↓ 버튼 간격 더 벌림 */
.ks-hero__sub{
  margin: 0 0 30px;                  /* 기존 ~18px → 30px */
}

/* 반응형 보정 */
@media (max-width: 1024px){
  .ks-hero__mark{ margin-bottom: 40px; }
  .ks-hero__title{ font-size: clamp(24px, 5vw, 38px); line-height: 1.32; }
}
@media (max-width: 640px){
  .ks-hero__mark{ margin-bottom: 32px; }
  .ks-hero__title{ font-size: clamp(22px, 6vw, 32px); line-height: 1.34; }
  .ks-hero__sub{ margin-bottom: 26px; }
}

/* === Header: 로고를 살짝 띄우기(완전 좌붙임 X) === */
.ks-header .ks-wrap{
  max-width: none;           /* 헤더는 풀폭 유지 */
  width: 100%;
  padding-left: 14px !important;  /* ← 여기만 조절하면 여백 크기 변경됨 */
  padding-right: 32px;
}

/* 로고 자체는 좌여백 없이, 메뉴는 로고와 적당히 띄움 */
.ks-logo{ margin-left: 0 !important; }
.ks-gnb{ margin-left: 14px; }

/* 화면 크기에 따른 미세 보정(선택) */
@media (min-width: 1440px){
  .ks-header .ks-wrap{ padding-left: 16px !important; } /* 데스크톱 넓을 때 살짝 더 */
}
@media (max-width: 640px){
  .ks-header .ks-wrap{ padding-left: 10px !important; } /* 모바일은 살짝 덜 */
}
/* ========== Capabilities section: 1:1 style ========== */
.ks-capabilities{ background:#0b0f12; padding:72px 0 64px; }
.ks-cap__head{ margin-bottom: 28px; }
.ks-cap__title{
  color:#fff; font-weight:800; letter-spacing:-0.02em; margin:0;
  font-size: clamp(26px, 3.2vw, 44px); line-height:1.08;
}
.ks-cap__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}

/* 카드 공통 */
.cap-card{
  background:#0e1016; border:1px solid #191c25; border-radius:16px; overflow:hidden;
  color:#cfd6ea; display:flex; flex-direction:column;
}

/* 상단 흰 패널 (우상단 베벨) */
.cap-top{
  --cut: 24px;
  background:#fff; color:#0d0f14; padding:28px 28px 18px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  border-bottom:1px solid #e6e9ef;
}
.cap-top h3{
  margin:0 0 18px; font-size:22px; line-height:1.12; letter-spacing:-.01em; font-weight:700;
}

/* Explore 링크 (좌측 원형 테두리 + 화살표) */
.cap-explore{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#0d0f14; font-weight:600; }
.cap-arrow{
  width:22px; height:22px; border:1px solid #0d0f14; border-radius:999px; display:inline-block; position:relative;
}
.cap-arrow::after{
  content:"→"; position:absolute; inset:0; display:grid; place-items:center; font-size:13px; line-height:1;
}

/* 하단 미디어 (좌하단 베벨) */
.cap-media{
  --cut: 24px;
  position:relative; padding:0; background:#0b0f12;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cap-media video{ width:100%; height:100%; display:block; aspect-ratio: 16/9; object-fit: cover; }

/* 비디오 위 브랜드 로고 오버레이 */
.cap-badge{
  position:absolute; left:28px; bottom:24px; height:56px; width:auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* 카드 호버 */
.cap-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.08);
  transition: .2s ease;
}

/* 반응형 */
@media (max-width:1024px){
  .ks-cap__grid{ grid-template-columns:1fr; }
  .cap-top{ padding:24px 22px 16px; }
  .cap-badge{ height:52px; left:22px; bottom:20px; }
}
/* ===== Capabilities 섹션 미세튜닝 ===== */

/* 섹션 타이틀: 조금 얇게 + 아래 여백 더 */
.ks-cap__title{
  font-weight: 600;                 /* 800 → 600 (좀 얇게) */
}
.ks-cap__head{ margin-bottom: 40px; }  /* 타이틀 ↔ 카드 간격 증가 */

/* 카드 전체 높이 약간 키움 */
.cap-card{
  min-height: 520px;                /* 세로가 짧아 보이던 문제 보정 */
  border-radius: 18px;
}

/* 상단 흰 패널: 3개 모두 동일 높이 & 여백/줄맞춤 */
.cap-top{
  --cut: 24px;
  padding: 26px 26px 16px;
  min-height: 168px;                /* 흰 영역 높이 동일화 (원하면 160~180px로 조절) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;                        /* 제목 ↔ ‘Explore’ 간 간격 */
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.cap-top h3{
  margin: 0;
  font-size: 24px;                  /* 제목 2줄 기준 크기 */
  line-height: 1.18;                /* 줄간격 */
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* Explore 링크: 원형 없이, 굵은 화살표만 */
.cap-explore{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: #0d0f14; font-weight: 600;
}
.cap-explore .cap-arrow{
  width: auto; height: auto; border: 0;      /* 원 제거 */
}
.cap-explore .cap-arrow::after{
  content: "→"; position: static;            /* 굵은 화살표만 */
  font-size: 18px; font-weight: 800; line-height: 1;
}

/* 하단 미디어: 좌하단 베벨 유지 */
.cap-media{
  --cut: 24px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cap-media video{ width:100%; aspect-ratio: 16/9; object-fit: cover; display:block; }

/* 비디오 위 로고: 화면 '가운데'로 이동 */
.cap-badge{
  position: abs
	  
}
/* ====== Capabilities 섹션 강제 덮어쓰기 ====== */

/* 0) 섹션 폭 & 그리드: 1399px 래퍼, 카드 415px × 3 */
.ks-capabilities .ks-wrap{ max-width:1399px !important; }
.ks-capabilities .ks-cap__grid{
  display:grid !important;
  grid-template-columns:repeat(3, 415px) !important;
  gap:32px !important;
  justify-content:center !important;
}

/* 1) 섹션 타이틀 얇게 + 아래 여백 */
.ks-capabilities .ks-cap__title{ font-weight:500 !important; }
.ks-capabilities .ks-cap__head{ margin-bottom:48px !important; }

/* 2) 카드 높이/남는 공간 제거 + 모서리 라운드 유지 */
.ks-capabilities .cap-card{
  display:block !important;          /* flex로 남는 공간 생기던 것 차단 */
  min-height:auto !important;
  height:auto !important;
  background:#0e1016;
  border:1px solid #191c25;
  border-radius:18px;
  overflow:hidden;
}

/* 3) 상단 흰 패널 : 3장 모두 동일 높이 + 제목/링크 간격 넓힘 */
.ks-capabilities .cap-top{
  --cut:24px;
  background:#fff !important; color:#0d0f14 !important;
  padding:28px 28px 18px !important;
  min-height:176px !important;       /* 흰 영역 동일 높이 */
  border-bottom:1px solid #e6e9ef !important;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%) !important;
  display:flex !important; flex-direction:column !important; gap:26px !important;
}
.ks-capabilities .cap-top h3{
  margin:0 !important;
  font-size:24px !important;
  line-height:1.18 !important;
  font-weight:500 !important;        /* 얇게 */
  letter-spacing:-.01em;
}

/* 4) Explore 링크: 원형 없이 굵은 화살표만 + 텍스트 얇게 */
.ks-capabilities .cap-explore{ display:inline-flex !important; align-items:center; gap:12px; color:#0d0f14; text-decoration:none; font-weight:500 !important; }
.ks-capabilities .cap-explore .cap-arrow{ width:auto !important; height:auto !important; border:0 !important; }
.ks-capabilities .cap-explore .cap-arrow::after{ content:"→"; font-size:20px; font-weight:800; line-height:1; }

/* 5) 하단 비디오 : 남는 ‘빈 박스/라인’ 제거 */
.ks-capabilities .cap-media{
  --cut:24px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))) !important;
  background:#000;                   /* 비디오 로딩 전 검정 */
}
.ks-capabilities .cap-media video{
  width:100% !important; height:auto !important;
  display:block !important; aspect-ratio:16/9; object-fit:cover;
}

/* 6) 비디오 위 로고 : 정중앙 고정 */
.ks-capabilities .cap-badge{
  position:absolute !important;
  left:50% !important; top:50% !important;
  right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  height:72px !important; width:auto !important;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* 반응형(옵션) */
@media (max-width:1200px){
  .ks-capabilities .ks-cap__grid{ grid-template-columns:1fr !important; }
  .ks-capabilities .cap-top{ min-height:160px !important; }
  .ks-capabilities .cap-badge{ height:64px !important; }
}
/* === Capabilities: Explore 링크를 아래쪽으로 내리기 === */
.ks-capabilities .cap-top{
  min-height: 196px !important;   /* 흰 패널 높이 살짝 ↑ (원하면 192~204px로 조절) */
  padding-bottom: 22px !important; /* 바닥 여유 */
}

.ks-capabilities .cap-explore{
  margin-top: auto !important;    /* 제목 아래 공간을 모두 먹고 '아래'로 붙음 */
  padding-top: 6px;               /* 제목과 미세 간격 */
}


/* ===== KeyShot Studio AI band (1:1 레이아웃/간격/버튼/패럴랙스) ===== */
.ks-ai.ks-ai--fixed{
  position: relative;
  color:#fff;
  padding: 110px 0 130px;      /* 상/하 여백 */
  min-height: 560px;           /* 밴드 높이 */
  background-color:#070c14;    /* 로딩 중 베이스 컬러 */

  /* 배경 이미지 + 패럴랙스(스크롤 고정) */
  background-image: url("/main/keyshot_assets/media/keyshot-studio-ai-bg-home.png");
  background-size: cover;
  background-position: 70% center;  /* 원본처럼 우측 비중 */
  background-attachment: fixed;
  overflow: hidden;
}

/* 컬러 오버레이(좌측 딥블루 → 우측 딥퍼플 + 하단 비네팅) */
.ks-ai.ks-ai--fixed::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 32% 30%, rgba(52,110,255,.36), transparent 62%),
    linear-gradient(90deg, rgba(2,10,22,.65) 0%, rgba(2,10,22,0) 40%),
    linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* 좌측 텍스트 박스 크기/정렬 */
.ks-ai__inner{ max-width: 560px; }
.ks-ai__eyebrow{ margin:0 0 10px; opacity:.9; }

/* 타이틀/본문 크기·간격(원본 매칭) */
.ks-ai__title{
  margin:0 0 12px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ks-ai__desc{
  margin:0 0 26px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}

/* 버튼: 라이트 그라데이션 pill + 그림자 (원본 톤) */
.ks-btn--ai{
  background: linear-gradient(90deg, #a9d1ff 0%, #f3d8a5 100%);
  color:#0e1016;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 12px 28px rgba(0,0,0,.28);
  height: 46px; padding: 0 22px; font-weight: 700;
}
.ks-btn--ai:hover{ filter: brightness(.98); }

/* 반응형/모바일(iOS의 background-attachment:fixed 이슈 대응) */
@media (max-width:1024px){
  .ks-ai.ks-ai--fixed{
    background-attachment: scroll;       /* 모바일 안정성 위해 스크롤 고정 해제 */
    background-position: 60% center;
    padding: 90px 0 100px;
    min-height: 520px;
  }
  .ks-ai__inner{ max-width: 520px; }
}
@media (max-width:640px){
  .ks-ai__title{ font-size: clamp(28px, 6vw, 36px); line-height:1.18; }
  .ks-ai__desc{ margin-bottom: 22px; }
}
/* ===== KeyShot Studio AI band — 정렬/패딩/패럴랙스/페이드 ===== */

/* 섹션 자체: 배경 이미지 + 고정 + 여백 */
.ks-ai.ks-ai--fixed{
  position: relative;
  color:#fff;
  padding: 120px 0 150px !important;   /* 위/아래 여백 */
  min-height: 560px;
  background-color:#070c14;
  background-image:url("/main/keyshot_assets/media/keyshot-studio-ai-bg-home.png");
  background-size: cover;
  background-position: 70% center;     /* 우측 강조 */
  background-attachment: fixed;        /* 데스크탑 패럴랙스 */
  overflow: hidden;
}

/* 좌측 배치: wrap을 플렉스로 만들고 왼쪽에 텍스트 고정 */
.ks-ai .ks-wrap{
  display:flex; align-items:center; justify-content:flex-start;
}
.ks-ai__inner{
  max-width: 560px;
  margin-left: clamp(24px, 8vw, 120px);   /* 왼쪽 들여쓰기 */
  margin-right:auto;
  text-align:left !important;             /* 가운데 정렬 방지 */
}

/* 타이포/간격 (원본 느낌) */
.ks-ai__eyebrow{ margin:0 0 12px; opacity:.9; font-weight:600; }
.ks-ai__title{
  margin:0 0 14px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.12;
  font-weight:700; letter-spacing:-.01em;
}
.ks-ai__desc{
  margin:0 0 26px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height:1.55; color:rgba(255,255,255,.92);
}

/* 버튼: 라이트 그라데이션 pill */
.ks-btn--ai{
  background: linear-gradient(90deg, #a9d1ff 0%, #f3d8a5 100%);
  color:#0e1016; border:1px solid rgba(255,255,255,.45);
  height:46px; padding:0 22px; font-weight:700;
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset, 0 12px 28px rgba(0,0,0,.28);
}
.ks-btn--ai:hover{ filter:brightness(.98); }

/* 컬러 오버레이(좌측 블루 글로우) */
.ks-ai.ks-ai--fixed::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 420px at 30% 36%, rgba(64,116,255,.35), transparent 62%),
    linear-gradient(90deg, rgba(2,10,22,.6) 0%, rgba(2,10,22,0) 40%);
  z-index:0;
}

/* 위/아래 경계 ‘스며듦’(페이드) — 상단/하단을 검은 배경으로 자연스럽게 */
.ks-ai.ks-ai--fixed::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(180deg, #0b0f12 0%, rgba(11,15,18,0) 10%, rgba(11,15,18,0) 90%, #0b0f12 100%);
}

/* 콘텐츠는 오버레이 위에 */
.ks-ai__inner{ position:relative; z-index:1; }

/* 모바일(iOS)에서 background-attachment: fixed 이슈 대응 */
@media (max-width:1024px){
  .ks-ai.ks-ai--fixed{ background-attachment: scroll; background-position: 60% center; padding: 96px 0 120px !important; }
  .ks-ai__inner{ margin-left: 28px; max-width: 520px; }
}
@media (max-width:640px){
  .ks-ai__title{ font-size: clamp(28px, 6vw, 36px); line-height:1.18; }
  .ks-ai__desc{ margin-bottom:22px; }
}
/* ===== Studio AI band: 정렬/타이포/자연스러운 스며듦 ===== */

/* 1) 섹션 레이아웃: wrap을 block으로 돌리고, 텍스트 박스를 왼쪽 정렬 */
.ks-ai .ks-wrap{
  display:block !important;             /* 이전 flex 정렬 제거 */
}
.ks-ai__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; /* 세로 스택 */
  max-width: 620px;                     /* 텍스트 너비 */
  margin-left: clamp(28px, 8vw, 120px); /* 왼쪽 들여쓰기 */
  margin-right:auto;
  text-align:left !important;
  gap: 10px;                             /* 요소 간 기본 간격 */
}

/* 2) 타이포/버튼(원본 느낌으로) */
.ks-ai__eyebrow{ margin:0; opacity:.9; font-weight:600; letter-spacing:.06em; }
.ks-ai__title{
  margin:0;
  font-size: clamp(40px, 4.6vw, 56px);   /* 한 단계 키워 좌측에 안정감 */
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ks-ai__desc{
  margin-top: 10px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}
.ks-btn--ai{
  display:inline-flex; align-items:center; justify-content:center;
  height: 46px; padding: 0 22px;
  background: linear-gradient(90deg, #a9d1ff 0%, #f3d8a5 100%);
  color:#0e1016; border:1px solid rgba(255,255,255,.45);
  font-weight:700; border-radius:999px;
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 12px 28px rgba(0,0,0,.28);
  margin-top: 14px;                      /* 설명 밑 여백 */
}

/* 3) 배경 + 페이드(위/아래 스며듦을 더 넓고 자연스럽게) */
.ks-ai.ks-ai--fixed{
  position: relative;
  color:#fff;
  padding: 120px 0 150px !important;     /* 위/아래 공간 넉넉히 */
  min-height: 560px;
  background-color:#070c14;
  background-image:url("/main/keyshot_assets/media/keyshot-studio-ai-bg-home.png");
  background-size: cover;
  background-position: 70% center;
  background-attachment: fixed;          /* 데스크톱 패럴랙스 */
  overflow: hidden;
}

/* 좌측 블루 글로우(아주 은은하게) */
.ks-ai.ks-ai--fixed::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 460px at 30% 38%, rgba(64,116,255,.28), transparent 65%),
    linear-gradient(90deg, rgba(2,10,22,.58) 0%, rgba(2,10,22,0) 42%);
}

/* 위/아래 경계 페이드: 넓은 범위로 자연스러운 검정 스며듦 */
.ks-ai.ks-ai--fixed::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(180deg,
      rgba(11,15,18,.95) 0%,
      rgba(11,15,18,.70) 6%,
      rgba(11,15,18,0) 18%,
      rgba(11,15,18,0) 82%,
      rgba(11,15,18,.70) 94%,
      rgba(11,15,18,.95) 100%);
}

/* 콘텐츠가 오버레이 위에 오도록 */
.ks-ai__inner{ z-index:1; }

/* 4) 모바일 폴백(iOS: background-attachment 이슈) */
@media (max-width:1024px){
  .ks-ai.ks-ai--fixed{
    background-attachment: scroll;
    background-position: 60% center;
    padding: 96px 0 120px !important;
  }
  .ks-ai__inner{ margin-left: 28px; max-width: 520px; }
}
@media (max-width:640px){
  .ks-ai__title{ font-size: clamp(28px, 6vw, 36px); line-height:1.18; }
  .ks-ai__desc{ margin-top:8px; }
}
/* === Studio AI band: 위/아래 여백 확대 + 더 부드러운 페이드 === */
.ks-ai.ks-ai--fixed{
  padding: 150px 0 190px !important; /* 기존 120/150 → 150/190 */
}

/* 상하 경계 ‘스며듦’ 더 넓고 부드럽게 */
.ks-ai.ks-ai--fixed::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(180deg,
      rgba(11,15,18,.98) 0%,
      rgba(11,15,18,.75) 10%,
      rgba(11,15,18,0)   28%,
      rgba(11,15,18,0)   72%,
      rgba(11,15,18,.75) 90%,
      rgba(11,15,18,.98) 100%);
}

/* 좌측 블루 글로우와 아주 은은한 하단 비네팅을 더 부드럽게 */
.ks-ai.ks-ai--fixed::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 520px at 28% 40%, rgba(64,116,255,.24), transparent 65%),
    linear-gradient(90deg, rgba(2,10,22,.55) 0%, rgba(2,10,22,0) 42%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%); /* 하단 은은한 비네팅 */
}

/* 미세 렌더링 차단용(경계선 방지) */
.ks-ai.ks-ai--fixed,
.ks-ai.ks-ai--fixed::before,
.ks-ai.ks-ai--fixed::after{ will-change: opacity, transform; }


/* 고정 배경 레이어 (진짜 패럴랙스) */
.ks-ai__bgfix{
  position: fixed; inset: 0;
  background: url("/main/keyshot_assets/media/keyshot-studio-ai-bg-home.png") 70% center / cover no-repeat;
  z-index: 0; opacity: 0; transition: opacity .35s ease;
  pointer-events: none; will-change: opacity, transform;
}
/* 섹션이 화면에 들어왔을 때만 보이게 */
.ks-ai.is-inview .ks-ai__bgfix{ opacity: 1; }

/* 섹션 오버레이(좌측 블루 + 위아래 스며듦 더 부드럽게) */
.ks-ai.ks-ai--fixed{ position:relative; padding:150px 0 190px !important; overflow:hidden; color:#fff; }
.ks-ai.ks-ai--fixed::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 520px at 28% 40%, rgba(64,116,255,.22), transparent 66%),
    linear-gradient(90deg, rgba(2,10,22,.52) 0%, rgba(2,10,22,0) 44%);
}
.ks-ai.ks-ai--fixed::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(11,15,18,.98) 0%,
      rgba(11,15,18,.75) 12%,
      rgba(11,15,18,0)   30%,
      rgba(11,15,18,0)   70%,
      rgba(11,15,18,.75) 88%,
      rgba(11,15,18,.98) 100%);
}

/* 1400px 래퍼 좌측 라인 맞춤(위 카드들과 동일) */
.ks-ai .ks-wrap{ max-width:1399px !important; margin:0 auto !important; padding:0 24px !important; display:block !important; }
.ks-ai__inner{ position:relative; z-index:2; max-width:620px; margin-left:0 !important; text-align:left !important; }

/* 얇은 타이포 */
.ks-ai__eyebrow{ margin:0 0 10px; opacity:.9; font-weight:500; letter-spacing:.06em; }
.ks-ai__title{ margin:0 0 14px; font-size:clamp(38px,4.4vw,54px); line-height:1.14; font-weight:600; letter-spacing:-.01em; }
.ks-ai__desc{ margin:0 0 26px; font-weight:400; font-size:clamp(15px,1.5vw,18px); line-height:1.55; color:rgba(255,255,255,.9); }
.ks-btn--ai{ margin-top:14px; background:linear-gradient(90deg,#a9d1ff 0%,#f3d8a5 100%); color:#0e1016; border:1px solid rgba(255,255,255,.45); height:46px; padding:0 22px; font-weight:700; box-shadow:0 2px 0 rgba(255,255,255,.35) inset, 0 12px 28px rgba(0,0,0,.28); }

/* 모바일(iOS)은 패럴랙스 비활성: 고정 레이어를 절대 배치로 전환 */
@media (max-width:1024px){
  .ks-ai__bgfix{ position:absolute; }
  .ks-ai.ks-ai--fixed{ padding:120px 0 160px !important; }
}
/* === Studio AI: 스크롤 패럴랙스 + 자연스러운 스며듦 + 좌측 1400px 정렬 === */

/* 섹션 레이아웃(스며듦) */
.ks-ai.ks-ai--parallax{
  position: relative;
  padding: 150px 0 190px !important;     /* 위/아래 넓게 */
  overflow: hidden;
  color: #fff;
}
.ks-ai.ks-ai--parallax::before{
  /* 좌측 블루 글로우: 은은하게 */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 520px at 28% 40%, rgba(64,116,255,.22), transparent 66%),
    linear-gradient(90deg, rgba(2,10,22,.52) 0%, rgba(2,10,22,0) 44%);
}
.ks-ai.ks-ai--parallax::after{
  /* 위/아래 스며듦(라인 안 보이게 넓고 부드럽게) */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(11,15,18,.98) 0%,
      rgba(11,15,18,.75) 12%,
      rgba(11,15,18,0)   34%,
      rgba(11,15,18,0)   66%,
      rgba(11,15,18,.75) 88%,
      rgba(11,15,18,.98) 100%);
}

/* 패럴랙스 배경 레이어(섹션 내부에서 절대배치 + Y이동) */
.ks-ai__bg{
  position: absolute; left:0; right:0; top:-12%; bottom:-12%;
  background: url("/main/keyshot_assets/media/keyshot-studio-ai-bg-home.png")
              70% center / cover no-repeat;
  z-index: 0;
  transform: translateY(0);             /* JS로 translateY 값을 갱신 */
  will-change: transform;
  pointer-events: none;
}

/* 1400px 래퍼 좌측 라인 맞춤(위 카드들과 일치) */
.ks-ai .ks-wrap{
  max-width: 1399px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: block !important;
}
.ks-ai__inner{
  position: relative; z-index: 2;
  max-width: 620px; margin-left: 0 !important; text-align: left !important;
}

/* 얇은 타이포(요청 반영) */
.ks-ai__eyebrow{ margin:0 0 10px; opacity:.9; font-weight:500; letter-spacing:.06em; }
.ks-ai__title{ margin:0 0 14px; font-size:clamp(38px,4.4vw,54px); line-height:1.14; font-weight:600; letter-spacing:-.01em; }
.ks-ai__desc{ margin:0 0 26px; font-weight:400; font-size:clamp(15px,1.5vw,18px); line-height:1.55; color:rgba(255,255,255,.9); }
.ks-btn--ai{ margin-top:14px; background:linear-gradient(90deg,#a9d1ff 0%,#f3d8a5 100%); color:#0e1016; border:1px solid rgba(255,255,255,.45); height:46px; padding:0 22px; font-weight:700; box-shadow:0 2px 0 rgba(255,255,255,.35) inset, 0 12px 28px rgba(0,0,0,.28); }

/* 모바일(iOS도 부드럽게) : 패럴랙스 강도 축소 */
@media (max-width:1024px){
  .ks-ai.ks-ai--parallax{ padding: 120px 0 160px !important; }
}


/* 페이지 공통 배경색 변수(다음 섹션과 일치) */
:root{ --page-bg: #0b0f12; }   /* 사이트가 쓰는 어두운 배경색 그대로 */

body{ background: var(--page-bg); }

/* 패럴랙스 배경: 아래쪽 여유 더 주기(움직여도 가장자리 안 드러나게) */
.ks-ai__bg{
  top: -28%;                  /* -20% → -28% */
  bottom: -28%;               /* -20% → -28% */
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

/* 위/아래 스며듦(라인 제거용): 페이지 배경색과 정확히 일치시키고 폭을 더 넓힘 */
.ks-ai.ks-ai--parallax::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* 위/아래로 더 넓은 페이드. 최종 컬러는 var(--page-bg)로 고정 */
    linear-gradient(180deg,
      var(--page-bg) 0%,
      color-mix(in srgb, var(--page-bg) 75%, transparent) 12%,
      transparent 36%,
      transparent 64%,
      color-mix(in srgb, var(--page-bg) 75%, transparent) 88%,
      var(--page-bg) 100%),
    /* 하단 비네팅을 추가로 깔아 미세 경계 감춤 */
    radial-gradient(1200px 340px at 50% 100%, rgba(0,0,0,.28), rgba(0,0,0,0) 70%);
}

/* 좌측 블루 글로우는 기존보다 더 은은하게 유지 */
.ks-ai.ks-ai--parallax::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 520px at 28% 40%, rgba(64,116,255,.20), transparent 66%),
    linear-gradient(90deg, rgba(2,10,22,.50) 0%, rgba(2,10,22,0) 44%);
}

/* (선택) AI 섹션 바로 다음 밴드도 같은 페이지 배경색으로 맞춤 */
.ks-next-dark, .ks-capabilities, .ks-dam, .ks-dock, .ks-band--dark{
  background: var(--page-bg);
  border-top: none;
  box-shadow: none;
}


/* ===== Dock / DAM 콜아웃 (1400px 컨테이너, 가운데 정렬) ===== */
.ks-dock{
  background:#0b0f12;
  padding:96px 0 110px;
  color:#fff;
}
.ks-dock .ks-wrap{
  max-width:1399px;          /* 위 섹션들과 좌측 라인 통일 */
  margin:0 auto;
  padding:0 24px;
}

/* 2열 레이아웃: 좌 카피 / 우 이미지, 세로 가운데 정렬 */
.ks-dock__inner{
  display:grid;
  grid-template-columns: 1fr 640px;   /* 우측 이미지 폭 */
  gap:56px;
  align-items:center;                  /* 수직 가운데 */
}

/* 타이포(원본 느낌) */
.ks-dock__title{
  margin:0 0 18px;
  font-size:clamp(34px,3.8vw,54px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.01em;
}
.ks-dock__desc{
  margin:0 0 22px;
  font-size:clamp(15px,1.45vw,18px);
  line-height:1.58;
  color:rgba(255,255,255,.90);
}

/* 버튼: 그린→샌드 그라데이션 pill */
.ks-btn--dock{
  height:46px; padding:0 22px; font-weight:700;
  color:#0e1016;
  background:linear-gradient(90deg,#8edbb9 0%, #f0d3a2 100%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset, 0 12px 28px rgba(0,0,0,.28);
}
.ks-btn--dock:hover{ filter:brightness(.98); }

/* 오른쪽 아트 이미지 */
.ks-dock__media img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 28px 60px rgba(0,0,0,.35));
}

/* 반응형 */
@media (max-width:1200px){
  .ks-dock__inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .ks-dock__media{ order:2; }
  .ks-dock__copy{ order:1; }
  .ks-dock__media img{ max-width:720px; margin:0 auto; }
}
@media (max-width:640px){
  .ks-dock{ padding:80px 0 92px; }
  .ks-dock__title{ font-size:clamp(28px,6vw,36px); line-height:1.14; }
  .ks-dock__desc{ margin-bottom:18px; }
}


/* === Dock/DAM 밴드: 좌측 카피 가운데 정렬 + 타이틀 살짝 얇게 === */
.ks-dock__copy{
  /* 좌측 컬럼 안에서 가로 가운데 배치 */
  max-width: 560px;
  margin: 0 auto;               /* ← 컬럼 가운데 */
  text-align: center;           /* 텍스트 가운데 정렬 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ks-dock__title{
  font-weight: 500;             /* 800 → 600 (조금 얇게) */
}
.ks-dock__desc{
  max-width: 540px;             /* 문단 가독 폭 */
}

/* === 우측 이미지 외곽 네모 라인 제거 === */
.ks-dock__media img{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;       /* 드롭섀도우 등 제거 */
  background: transparent;
  image-rendering: auto;
}


/* ===== Dual Spotlight Parallax Band ===== */
:root{ --page-bg:#0b0f12; }  /* 페이지 공통 배경(스며듦용) */

.ks-spot{
  position:relative;
  padding:120px 0 140px;          /* 위/아래 여백 */
  overflow:hidden;
  color:#fff;
  background:var(--page-bg);
}

/* 패럴랙스 배경 레이어 */
.ks-spot__bg{
  position:absolute; left:0; right:0; top:-26%; bottom:-26%;
  background:url("/main/keyshot_assets/media/Group-1707479157-2.png")
             center center / cover no-repeat;
  will-change:transform;
  pointer-events:none;
  z-index:0;
  transform:translate3d(0,0,0);
}

/* 위/아래 스며듦(라인 없이 자연스럽게) */
.ks-spot::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      var(--page-bg) 0%,
      color-mix(in srgb, var(--page-bg) 75%, transparent) 10%,
      transparent 28%,
      transparent 72%,
      color-mix(in srgb, var(--page-bg) 75%, transparent) 90%,
      var(--page-bg) 100%);
}

/* 좌/우 가독성 오버레이(원본 느낌의 살짝 어두운 비네팅) */
.ks-spot::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.34) 100%);
}

/* 1400px 컨테이너 + 2열 그리드 (왼쪽정렬) */
.ks-spot .ks-wrap{ max-width:1399px; margin:0 auto; padding:0 24px; }
.ks-spot__grid{
  position:relative; z-index:2;            /* 오버레이 위로 */
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center;
}

/* 타이포/그라데이션 */
.ks-spot__title{
  margin:10px 0 16px;
  font-size:clamp(34px,4vw,56px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.01em;
}
.ks-spot__grad{
  background:linear-gradient(90deg,#7fb1ff 0%, #9fd8ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ks-spot .ks-eyebrow{ margin:0; opacity:.9; font-weight:600; }

/* 버튼(화이트 pill) – 사이트 공통 톤 재사용 */
.ks-btn--white{
  background:#fff; color:#0e1016; border:1px solid rgba(255,255,255,.45);
  height:46px; padding:0 22px; font-weight:700;
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset, 0 12px 28px rgba(0,0,0,.28);
}
.ks-btn--white:hover{ filter:brightness(.98); }

/* 반응형 */
@media (max-width:1200px){
  .ks-spot{ padding:100px 0 120px; }
  .ks-spot__grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:640px){
  .ks-spot{ padding:84px 0 100px; }
  .ks-spot__title{ font-size:clamp(28px,6vw,36px); line-height:1.16; }
}


/* Dual Spotlight 타이틀 더 작고 얇게 */
.ks-spot__title{
  font-size: clamp(30px, 3.2vw, 44px) !important; /* 34/56 → 30/44 */
  line-height: 1.12 !important;
  font-weight: 600 !important;                    /* 700 → 600 (얇게) */
  letter-spacing: -0.01em;
}

/* 밴드 높이(패럴렉스 영역) 넓히기 */
.ks-spot{
  padding: 150px 0 180px !important;              /* 120/140 → 150/180 */
}

/* 배경 레이어 상하 여유 더 확보(움직여도 가장자리 안 보이게) */
.ks-spot__bg{
  top: -32% !important;                           /* -26% → -32% */
  bottom: -32% !important;
}
/* ===== Stories & Insights ===== */
.ks-stories{
  background:#0b0f12;
  color:#fff;
  padding: 72px 0 84px;
}
.ks-stories .ks-wrap{
  max-width:1399px;               /* 1400px 라인 */
  margin:0 auto; padding:0 24px;
}

/* 2열 레이아웃: 좌(소개) 320px 고정, 우(리스트) 가변 */
.ks-stories__grid{
  display:grid; grid-template-columns: 320px 1fr;
  gap: 56px; align-items:start;
}

/* LEFT */
.ks-stories__eyebrow{
  margin:0 0 10px; font-size:13px; font-weight:700; opacity:.95;
}
.ks-stories__heading{
  margin:0 0 12px;
  font-size: clamp(28px, 3vw, 40px);
  line-height:1.06; font-weight:800; letter-spacing:-.01em;
}
.ks-stories__desc{
  margin:0 0 14px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.9);
}
.ks-stories__visit{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:#fff; text-decoration:none;
  position:relative;
}
.ks-stories__visit::after{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#fff; opacity:.9; display:inline-block;
}

/* RIGHT: 공통 카드 스타일 */
.ks-stories__main{ display:block; }
.ks-story{ margin:0 0 18px; }
.ks-story__thumb{
  display:block; width:100%; border-radius:2px; overflow:hidden; background:#111;
}
.ks-story__thumb img{ width:100%; height:auto; display:block; }

/* 썸네일 비율 */
.ks-story--feature .ks-story__thumb{ aspect-ratio: 980 / 551; }  /* 약 16:9 */
.ks-story__thumb--sm{ aspect-ratio: 400 / 250; }                 /* 1.6 */

/* 타이틀/메타 */
.ks-story__title{
  margin:10px 0 6px;
  font-size:15.5px; line-height:1.45; font-weight:600; letter-spacing:-.01em;
}
.ks-story__title--feature{
  font-size:16.5px;               /* 피쳐는 살짝 더 크게 */
}
.ks-story__meta{
  margin:0; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.65);
}

/* 아래 두 카드 그리드 */
.ks-stories__row{
  display:grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-top: 28px;
}

/* 반응형 */
@media (max-width:1200px){
  .ks-stories__grid{ grid-template-columns:1fr; gap:36px; }
  .ks-stories__heading{ font-size: clamp(26px, 5vw, 36px); }
}
@media (max-width:640px){
  .ks-stories{ padding:60px 0 72px; }
  .ks-stories__row{ grid-template-columns:1fr; gap:22px; }
}
/* ===== Stories & Insights (LEFT) 미세 조정 ===== */

/* 1) "Stories and insights" 더 크게 + 아래 여백 늘리기 */
.ks-stories__eyebrow{
  font-size: 15px !important;        /* 13px → 15px */
  letter-spacing: .04em;
  margin: 0 0 16px !important;       /* explore 헤딩과 간격 ↑ */
}

/* 2) "Explore the depth of KeyShot" 얇게 */
.ks-stories__heading{
  font-weight: 600 !important;       /* 800 → 600 (얇게) */
  margin: 0 0 16px !important;       /* 헤딩 아래 살짝 간격 */
}

/* 3) 설명문 위/아래 여백 더 주기 */
.ks-stories__desc{
  margin: 16px 0 20px !important;    /* 위/아래 여백 확대 */
}

/* 4) Visit 옆에 오른쪽 화살표 표시 */
.ks-stories__visit{
  display: inline-flex;
  align-items: center;
  gap: 10px;                         /* 텍스트-화살표 간격 */
  font-weight: 700;
  text-decoration: none;
}
.ks-stories__visit::after{
  content: "→";                      /* 화살표 아이콘 */
  font-size: 16px;
  line-height: 1;
  transform: translateY(1px);
  opacity: .9;
}
.ks-stories__visit:hover::after{
  transform: translate(2px, 1px);    /* 살짝 밀리는 호버 효과 */
  opacity: 1;
}
/* Stories & insights - Visit: 점 제거하고 화살표만 표시 */
.ks-stories__visit::before{
  content: none !important;
  display: none !important;
}

.ks-stories__visit::after{
  content: "→" !important;        /* 화살표만 */
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-left: 10px;
  font-size: 16px;
  line-height: 1;
  opacity: .9;
  transform: translateY(1px);
}



/* ===== Education band ===== */
.ks-edu{
  background:#0b0f12;
  color:#fff;
  padding: 86px 0 96px;                      /* 위/아래 여백 */
}
.ks-edu .ks-wrap{
  max-width:1399px;                           /* 1400px 라인 */
  margin:0 auto; padding:0 24px;
}
.ks-edu__grid{
  display:grid;
  grid-template-columns: 1fr 720px;           /* 좌 텍스트 / 우 이미지 */
  gap: 64px;
  align-items: center;
}

/* LEFT – 타이포 & 간격 (원본 톤) */
.ks-edu__eyebrow{
  margin:0 0 14px;
  font-size:15px; font-weight:700; opacity:.95;
}
.ks-edu__title{
  margin:0 0 16px;
  font-size:clamp(36px, 4.6vw, 64px);         /* 큰 헤드라인 */
  line-height:1.04;
  font-weight:800;
  letter-spacing:-.01em;
}
.ks-edu__title-dim{ color:#cfcfcf; }          /* 두 번째 줄 살짝 밝기 낮춤 */
.ks-edu__desc{
  margin:18px 0 22px;                         /* 위/아래 여백 넉넉히 */
  font-size:16px; line-height:1.6;
  color:rgba(255,255,255,.90);
}
/* Visit → (점 없이 화살표만) */
.ks-edu__visit{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; color:#fff; text-decoration:none;
}
.ks-edu__visit::after{
  content:"→"; font-size:18px; line-height:1;
  transform:translateY(1px); opacity:.9;
}
.ks-edu__visit:hover::after{ transform:translate(2px,1px); opacity:1; }

/* RIGHT – 이미지와 모서리 컷(사각 외곽선 없이) */
.ks-edu__art img{
  width:100%; height:auto; display:block;
  /* 상단 우측 모서리 깎기 + 하단 좌측 컷 느낌 */
  clip-path: polygon(
    0% 0%, 90% 0%, 100% 10%, 100% 100%,
    40% 100%, 35% 90%, 0% 72%
  );
  /* 외곽선/그림자 제거 (원본처럼 깨끗하게) */
  border:0; outline:none; box-shadow:none; filter:none;
}

/* 반응형 */
@media (max-width:1200px){
  .ks-edu__grid{ grid-template-columns:1fr; gap:40px; }
  .ks-edu__art img{ clip-path:none; }        /* 모바일에선 단순 사각형 */
}
@media (max-width:640px){
  .ks-edu{ padding:72px 0 84px; }
  .ks-edu__title{ font-size:clamp(30px, 7vw, 36px); line-height:1.12; }
}


:root{ --page-bg:#0b0f12; --text-dim:rgba(255,255,255,.72); }

/* 페이지 전체 배경 및 하단 흰 공간 차단 */
html,body{ background:var(--page-bg); }
body{ margin:0; }
#ks-footer{ margin-top:0; }

/* ===== Footer ===== */
.ks-footer{
  background:#0a0d10;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);   /* 상단 라인 */
}
.ks-footer__inner{
  width:95%;                 /* 요청: 100% 기준 95% 가운데 */
  margin:0 auto;
  display:grid;
  grid-template-columns: 280px 1fr 420px;       /* 좌/중/우 */
  gap:36px;
  padding:48px 0 36px;
  align-items:flex-start;
}

/* 로고 */
.ks-footer__logo{ height:75px; width:auto; display:block; }

/* 중앙 네비 3열 */
.ks-footer__nav{
  display:grid; grid-template-columns: repeat(3, minmax(140px,1fr));
  gap:32px;
}
.ks-footer__head{
  margin:0 0 12px; font-size:14px; font-weight:800; opacity:.9;
}
.ks-footer__nav ul{ list-style:none; margin:0; padding:0; }
.ks-footer__nav li{ margin:10px 0; }
.ks-footer__nav a{
  color:var(--text-dim); text-decoration:none; font-size:14px;
}
.ks-footer__nav a:hover{ color:#fff; }

/* 우측 뉴스레터 */
.ks-footer__signup-head{
  display:block; font-size:16px; font-weight:700; margin:0 0 12px;
}
.ks-footer__form{ display:flex; gap:12px; }
.ks-input{
  flex:1 1 260px; height:48px; padding:0 14px;
  border-radius:8px; border:1px solid rgba(255,255,255,.22);
  background:#0f1317; color:#fff; outline:none;
}
.ks-input::placeholder{ color:rgba(255,255,255,.6); }
.ks-btn{
  height:48px; padding:0 20px; border-radius:24px; border:0; cursor:pointer;
  font-weight:700;
}
.ks-btn--blue{
  background:linear-gradient(90deg,#63b3ff 0%, #2d7dff 100%); color:#0c1016;
}
.ks-btn--blue:hover{ filter:brightness(.97); }

.ks-footer__socials{
  margin-top:22px; display:flex; gap:18px;
}
.ks-footer__socials a{
  width:28px; height:28px; color:#fff; opacity:.85;
}
.ks-footer__socials a svg{ width:100%; height:100%; display:block; }
.ks-footer__socials a:hover{ opacity:1; }

/* 하단 바 */
.ks-footer__bar{
  border-top:1px solid rgba(255,255,255,.06);
  background:#0a0d10;
}
.ks-footer__bar-inner{
  width:95%;
  margin:0 auto;
  display:flex; gap:24px; align-items:center; justify-content:space-between;
  padding:14px 0 18px;
}
.ks-footer__copy{ color:rgba(255,255,255,.65); font-size:13px; }
.ks-footer__legal{ list-style:none; margin:0; padding:0; display:flex; gap:22px; }
.ks-footer__legal a{ color:rgba(255,255,255,.8); text-decoration:none; font-size:13px; }
.ks-footer__legal a:hover{ color:#fff; }

/* 반응형 */
@media (max-width:1200px){
  .ks-footer__inner{ grid-template-columns:1fr; gap:28px; }
  .ks-footer__nav{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .ks-footer__nav{ grid-template-columns:1fr 1fr; }
  .ks-footer__bar-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Footer nav 간격을 크게 — 훨씬 넓게 벌림 */
@media (min-width: 1201px){
  /* 가운데 네비 영역에 넉넉한 폭 + 큰 간격 */
  .ks-footer__nav{
    grid-template-columns: repeat(3, minmax(240px, 1fr)) !important; /* 각 그룹 폭 ↑ */
    column-gap: 56px !important;                                      /* 그룹 사이 간격 ↑ */
    row-gap: 12px !important;
    justify-content: space-between !important;                         /* 중앙에서 좌우로 넓게 */
    justify-items: start !important;
  }

  /* 좌/우 컬럼은 이전값 유지(혹은 조금만 줄여 중앙 폭 확보) */
  .ks-footer__inner{
    grid-template-columns: 260px 1fr 380px !important; /* 필요하면 280/420으로 바꿔도 OK */
  }
}

/* 섹션 헤더 굵게는 그대로 유지 */
.ks-footer__head{ font-weight:900 !important; }














/* ================= KeyShot Studio AI (통합 섹션) ================= */
.ks-ai-page{ background:#000; color:#fff; }

/* 배경 1개가 상·하 전체를 덮도록: 섹션 하나에 배경을 절대 배치 */
.ai-top{
  position: relative;
  background: #000;
  overflow: visible;
  /* 여백: 요청대로 절반 수준 (상단/하단 크게 줄임) */
  padding: 80px 0 90px;
}

/* 공통 컨테이너 폭 */
.ai-top .ks-wrap{ max-width: 1399px; margin: 0 auto; padding: 0 24px; }

/* 배경 영상 & 검은 베일(80%) — 섹션 전체 높이와 동기화되어 한 번만 깔림 */
.ai-top__bg,
.ai-top__veil{
  position: absolute;
  inset: 0;                   /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;               /* 부모(.ai-top)의 실제 콘텐츠 높이만큼 자동 늘어남 */
  z-index: 0;                 /* 내용 뒤로 */
  pointer-events: none;
}
.ai-top__bg{
  object-fit: cover;
  object-position: center;
  filter: saturate(.9);
}
.ai-top__veil{
  background: rgba(0,0,0,.80);  /* 더 어둡게(80%) */
}

/* ===== 타이틀/카피/버튼 (상단 여백/간격 반으로) ===== */
.ai-top__hero{
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 36px;         /* 타이틀 블록과 시즐 영상 사이 간격(좁게) */
}
.ai-top__title{
  margin: 0 0 10px;            /* 위/아래 간격 줄임 */
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ai-grad{
  background: linear-gradient(90deg, #7eb2ff 0%, #c7a76b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ai-top__sub{
  margin: 0 0 16px;            /* 서브카피와 버튼 간 간격 줄임 */
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,.95);
}
.ai-top__sub strong{ color:#fff; font-weight:800; }

.ai-top__ctas{ display:flex; justify-content:center; gap:14px; }
.ai-cta--white{ color:#0c0f14; } /* 흰 버튼 텍스트 진한색 유지 */

/* ===== 시즐 영상 ===== */
.ai-top__sizzle{
  position: relative;
  z-index: 1;                  /* 배경 위로 */
}
.ai-top__sizzle-el{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: rgba(11,15,18,.85);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

/* 반응형 간격 소폭 조정 */
@media (max-width: 768px){
  .ai-top{ padding: 64px 0 72px; }
  .ai-top__hero{ margin-bottom: 28px; }
}
/* === KeyShot Studio AI : 간격 확대(상단/버튼~영상) === */
/* 상단 여백: 80px → 160px (2배) */
.ai-top{ padding-top:200px !important; }

/* 버튼과 동영상 사이: 36px → 72px (2배) */
.ai-top__hero{ margin-bottom:90px !important; }

/* 모바일도 동일 비율로 확대 */
@media (max-width:768px){
  .ai-top{ padding-top:128px !important; }     /* 64px → 128px */
  .ai-top__hero{ margin-bottom:56px !important; } /* 28px → 56px */
}












/* ================= A better design workflow with AI ================= */
.ai-workflow{
  position: relative;
  /* 상단 원본 톤과 유사한 딥블루 → 딥네이비 그라데이션 */
  background: linear-gradient(180deg, #121c33 0%, #0c152a 50%, #07101f 100%);
  color:#fff;
  padding: 100px 0 140px;
  overflow: hidden;
}
.ai-workflow__head{
  text-align:center;
  max-width: 880px;
  margin: 0 auto 36px;
  padding: 0 24px;
}
.ai-workflow__title{
  margin:0 0 12px;
  font-size: clamp(36px, 5.5vw, 56px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.01em;
}
.ai-workflow__title .grad{
  background: linear-gradient(90deg, #79aefc 0%, #caa86c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ai-workflow__desc{
  margin: 0 auto;
  font-size: clamp(15px, 2.1vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,.92);
}

/* ---------- 이미지 스테이지(원본처럼 레이어 오버랩) ---------- */
.ai-workflow__stage{
  position: relative;
  max-width: 1399px;
  margin: 36px auto 0;
  padding: 0 24px;
  height: 880px;             /* 데스크톱 기준 스테이지 높이 */
}

/* 공통 */
.aiwf{
  position:absolute;
  display:block;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  background:#0a0f17;        /* 로딩 중 배경 */
}

/* 1) 좌측 말풍선 (빛 번짐 포함) */
.img-caption{
  left: 8%;
  top: 25%;
  width: 460px;
  border-radius: 0px;

}

/* 2) 중앙 메인 */
.img-main{
  left: 50%;
  top: 32%;
  transform: translateX(-50%);
  width: 620px;
}

/* 3) 우측 겹침 */
.img-right{
  right: 10%;
  top: 53%;
  width: 520px;
}

/* 4) 좌측 하단 겹침 */
.img-left{
  left: 22%;
  top: 63%;
  width: 520px;
}

/* 5) 맨 하단 중앙 */
.img-bottom{
  left: 50%;
  bottom: -2%;
  transform: translateX(-50%);
  width: 520px;
}

/* ---------- 반응형 ---------- */
@media (max-width: 1200px){
  .ai-workflow__stage{ height: 820px; }
  .img-caption{ left:6%; width:330px; }
  .img-main{ width:560px; }
  .img-right{ right:8%; width:470px; }
  .img-left{ left:18%; width:470px; top:66%; }
  .img-bottom{ width:480px; }
}
@media (max-width: 992px){
  .ai-workflow{ padding:84px 0 120px; }
  .ai-workflow__stage{ height: 760px; }
  .img-caption{ left:5%; top:24%; width:300px; }
  .img-main{ width:520px; }
  .img-right{ width:420px; top:55%; right:6%; }
  .img-left{ width:420px; left:16%; top:67%; }
  .img-bottom{ width:440px; }
}
@media (max-width: 768px){
  /* 모바일은 카드 스택 형태로 자연스럽게 */
  .ai-workflow__stage{
    height: auto;
    padding-bottom: 14px;
  }
  .aiwf{
    position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    transform:none; width:100%;
    margin: 18px 0;
    box-shadow: 0 12px 36px rgba(0,0,0,.4);
  }
  .img-caption{
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== A better design workflow with AI : 스크린샷 좌표/크기로 재배치 ===== */

/* 스테이지 높이 여유 */
.ai-workflow__stage{
  height: 980px !important;
}

/* 00b 말풍선(더 크게 + 발광효과 제거) */
.img-caption{
  width: 520px !important;
  left: calc(50% - 700px) !important;  /* 더 왼쪽으로 */
  top: 120px !important;

  z-index: 4 !important;
}

/* 01 메인(상단 중앙보다 왼쪽으로 이동, 가장 큼) */
.img-main{
  width: 720px !important;
  left: calc(50% - 500px) !important;  /* 왼쪽으로 빼기 */
  top: 150px !important;
  transform: none !important;
  z-index: 2 !important;
}

/* 03 오른쪽 이미지(메인 오른쪽 가장자리 살짝 겹침) */
.img-right{
  width: 560px !important;
  left: calc(50% + 170px) !important;  /* 오른쪽으로 걸치게 */
  top: 330px !important;
  z-index: 3 !important;
}

/* 02 왼쪽 하단(메인 아래쪽 왼쪽으로 겹침) */
.img-left{
  width: 640px !important;
  left: calc(50% - 520px) !important;
  top: 470px !important;
  z-index: 1 !important;
}

/* 04 오른쪽 하단(살짝 위로 겹치게) */
.img-bottom{
  width: 600px !important;
  left: calc(50% + 120px) !important;
  top: 690px !important;
  transform: none !important;
  z-index: 2 !important;
}

/* -------- 반응형(비율 유지) -------- */
@media (max-width: 1200px){
  .ai-workflow__stage{ height: 920px !important; }
  .img-caption{ width: 480px !important; left: calc(50% - 630px) !important; top: 120px !important; }
  .img-main{ width: 680px !important; left: calc(50% - 470px) !important; top: 150px !important; }
  .img-right{ width: 520px !important; left: calc(50% + 150px) !important; top: 330px !important; }
  .img-left{ width: 600px !important; left: calc(50% - 490px) !important; top: 480px !important; }
  .img-bottom{ width: 560px !important; left: calc(50% + 100px) !important; top: 690px !important; }
}
@media (max-width: 992px){
  .ai-workflow__stage{ height: 860px !important; }
  .img-caption{ width: 420px !important; left: calc(50% - 520px) !important; top: 120px !important; }
  .img-main{ width: 600px !important; left: calc(50% - 400px) !important; top: 150px !important; }
  .img-right{ width: 460px !important; left: calc(50% + 120px) !important; top: 330px !important; }
  .img-left{ width: 520px !important; left: calc(50% - 430px) !important; top: 500px !important; }
  .img-bottom{ width: 500px !important; left: calc(50% + 80px) !important; top: 700px !important; }
}
@media (max-width: 768px){
  /* 모바일은 기존처럼 스택 정렬 */
  .ai-workflow__stage{ height:auto !important; }
  .aiwf{
    position:relative !important;
    left:auto !important; top:auto !important;
    transform:none !important; width:100% !important;
    margin:16px 0 !important;
  }
}
/* ===== ai-workflow 단일 그래픽 레이아웃 ===== */

/* 섹션 여백을 살짝 정리(필요 시 생략 가능) */
.ai-workflow{
  padding: 120px 0 140px;
}

/* 가운데 정렬 + 반응형 여백 */
.ai-workflow__graphic{
  max-width: 1200px;           /* 1400 컨테이너보다 한단계 작게, 원본 느낌 */
  margin: 44px auto 0;         /* 타이틀/카피와 간격 */
  padding: 0 24px;             /* 좌우 안전 여백 */
  text-align: center;
}

/* 이미지: 가로 100%, 비율 유지 + 살짝 라운드/그림자 */
.ai-workflow__graphic-img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  background: #0a0f17;         /* 로딩 중 바탕색 */
}

/* 살짝 더 타이트하게 보이고 싶다면 주석 해제해서 최대폭 조정
.ai-workflow__graphic { max-width: 1100px; }
*/

/* 태블릿 */
@media (max-width: 992px){
  .ai-workflow{ padding: 100px 0 120px; }
  .ai-workflow__graphic{ margin-top: 36px; }
  .ai-workflow__graphic-img{ border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.42); }
}

/* 모바일 */
@media (max-width: 768px){
  .ai-workflow{ padding: 84px 0 110px; }
  .ai-workflow__graphic{ margin-top: 28px; padding: 0 16px; }
  .ai-workflow__graphic-img{ border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.4); }
}

/* 이미지 카드/그래픽 뒤 배경 없애기 */
.aiwf{ 
  background: transparent !important;   /* 카드 배경 제거 */
  /* 필요하면 그림자도 줄이거나 제거 */
  box-shadow: 0 20px 64px rgba(0,0,0,.25) !important; /* or: none */
  border-radius: 0 !important;           /* 모서리 둥근 배경 잔상 방지 */
}

/* 단일 그래픽을 쓰는 경우(ai_p_bg.png)도 배경 제거 */
.ai-workflow__graphic-img{
  background: transparent !important;
  border-radius: 0 !important;
}

/* 스테이지 자체에는 배경 없도록 */
.ai-workflow__stage{ background: transparent !important; }

/* 이미지 자체가 컨테이너를 꽉 채우도록(틈 생기지 않게) */
.ai-workflow__stage img,
.ai-workflow__graphic-img{
  display:block;
  width:100%;
  height:auto;
}
/* ===== 콜라주 영역 뒤 둥근 배경/그림자 완전 제거 ===== */

/* 스테이지/래퍼/가상요소의 배경과 라운드, 그림자 비활성화 */
.ai-workflow__stage,
.ai-workflow__wrap,
.ai-workflow__graphic,
.ai-workflow__stage::before,
.ai-workflow__stage::after,
.ai-workflow__graphic::before,
.ai-workflow__graphic::after{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  backdrop-filter: none !important;
}

/* 스테이지 카드처럼 보이게 하던 둥근 모서리/마스크를 막기 위해 */
.ai-workflow__stage{ overflow: visible !important; }

/* 캡션/카드에도 배경이 남아있다면 제거(필요시 유지) */
.aiwf,
.img-caption{
  background: transparent !important;
  border-radius: 0 !important;
  /* 효과를 아예 없애고 싶으면 아래도 함께 */
  /* box-shadow: none !important; */
}

/* 단일 그래픽 버전(ai_p_bg.png) 사용 시에도 배경 제거 */
.ai-workflow__graphic-img{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block;
  width: 100%;
  height: auto;
}
/* ai-workflow 하단을 더 어둡게 */
.ai-workflow{
  position: relative;                /* 오버레이를 깔 자리 */
}

/* 하단 어둡게 스며드는 오버레이 */
.ai-workflow::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 34vh;                      /* 어두워지는 높이 (원하면 25~45vh 사이로 조정) */
  pointer-events:none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 60%,
    rgba(0,0,0,.88) 100%
  );
}

/* 콘텐츠는 오버레이 위로 보이도록 */
.ai-workflow > *{
  position: relative;
  z-index: 1;
}
/* ==================== Three modes ==================== */
.ai-modes{
  background: linear-gradient(180deg, #232640 0%, #0f1222 40%, #000 100%);
  color:#fff;
  padding: 96px 0 120px;
}
.ai-modes__wrap{
  width:min(1399px, 100%);
  margin:0 auto;
  padding:0 24px;
}

/* 공용 그라데이션(제목) */
.ai-grad{
  background: linear-gradient(90deg, #7eb2ff 0%, #5d96ff 35%, #e9c07a 78%, #f2c984 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* 섹션 메인 타이틀 */
.ai-modes__title{
  margin:0 0 48px;
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.01em;
  font-size:clamp(34px, 5.6vw, 56px);
  text-align:center;
}

/* 각 행(row) */
.ai-mode{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  align-items:center;
  gap:40px;
  margin: 56px 0 88px;
}

/* 좌우 뒤집는 행(두번째 줄) */
.ai-mode--background{
  grid-template-columns: 1fr 1.1fr;
}

/* 텍스트 블록 */
.ai-mode__text{
  max-width: 560px;
  margin-inline: auto;
}
.ai-mode__heading{
  margin:0 0 16px;
  font-weight:800;
  letter-spacing:-.01em;
  font-size:clamp(24px, 3.5vw, 38px);
}
.ai-mode__desc{
  margin:0 0 16px;
  font-size:clamp(15px, 2.2vw, 18px);
  line-height:1.6;
  color:rgba(255,255,255,.95);
}
.ai-note{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.55;
  color:rgba(255,255,255,.6);
}

/* 링크(밑줄) */
.ai-link{
  display:inline-block;
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}
.ai-link:hover{ opacity:.9; }
.ai-link--muted{ color:#a8b0c0; }

/* 이미지 블록 */
.ai-mode__media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.ai-mode__media img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:14px;            /* 원본 느낌에 맞춰 소프트 라운드 */
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  /* 큰 화면에서 약간 크게 보이도록 */
  width: min(640px, 100%);
}

/* 레이아웃 여백(행 사이 크게) */
.ai-mode + .ai-mode{ margin-top: 88px; }

/* 반응형 */
@media (max-width: 1024px){
  .ai-mode,
  .ai-mode--background{
    grid-template-columns: 1fr;
    gap:28px;
  }
  .ai-mode__text{ max-width: 680px; text-align:left; }
  .ai-mode__media img{ width:100%; }
}
@media (max-width: 640px){
  .ai-modes{ padding:72px 0 96px; }
  .ai-mode{ margin:40px 0 72px; }
}
/* === OVERRIDE: Three modes – desktop에서 이미지 더 크게 + 여백 넉넉히 === */

/* 2열 그리드: 텍스트는 적절히 고정 폭, 이미지 칼럼을 auto로 넓게 */
.ai-mode{
  grid-template-columns: minmax(420px, 520px) auto;
  gap: 48px;                  /* 텍스트↔이미지 간격 늘림 */
  margin: 72px 0 120px;       /* 블록 사이 세로 여백 크게 */
}
.ai-mode--background{
  grid-template-columns: auto minmax(420px, 520px);
}

/* 텍스트 폭/여백 보정 */
.ai-mode__text{
  max-width: 520px;           /* 레이아웃 안정적인 읽기 폭 */
}
.ai-mode__heading{ margin-bottom: 18px; }
.ai-mode__desc{ margin-bottom: 22px; }
.ai-note{ margin-top: 12px; }

/* 이미지: PC에서 훨씬 크게(칼럼에 맞춰 최대 820~900px) */
.ai-mode__media img{
  width: min(820px, 100%);    /* 칼럼보다 크지 않게, 하지만 충분히 큼 */
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

/* 아주 큰 화면에서 한 단계 더 확대 */
@media (min-width: 1400px){
  .ai-mode{ gap: 56px; margin: 80px 0 136px; }
  .ai-mode__media img{ width: min(900px, 100%); }
}

/* 태블릿/모바일은 기존처럼 1열로 – “이미 모바일은 딱 좋아”라서 유지 */
@media (max-width: 1024px){
  .ai-mode, .ai-mode--background{
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 48px 0 88px;
  }
  .ai-mode__text{ max-width: 680px; }
  .ai-mode__media img{ width: 100%; }
}
@media (max-width: 640px){
  .ai-mode{ margin: 40px 0 72px; }
}
/* ====== Three modes – 간단 패치 ====== */

/* 1) 투명 PNG 뒤 배경색 제거 (모든 블록 공통) */
.ai-mode__media,
.ai-mode__media * {
  background: transparent !important;
}

/* 2) Learn more 회색 + 밑줄 */
.ai-mode__learn,
.ai-mode__text a.ai-link,
.ai-mode__text a.ai-link--muted {
  color: rgba(255,255,255,.65) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.ai-mode__learn:hover,
.ai-mode__text a.ai-link:hover,
.ai-mode__text a.ai-link--muted:hover {
  color: rgba(255,255,255,.85) !important;
}

/* 3) 작은 문구 이탤릭체 */
.ai-mode__meta,
.ai-note {
  font-style: italic !important;
  color: rgba(255,255,255,.62) !important;
  margin-top: 10px !important;
}

/* 4) 데스크톱에서 이미지 더 크게 보이도록: 텍스트 칼럼을 줄이고 이미지 칼럼 확대 */
@media (min-width: 1181px){
  .ai-mode{
    grid-template-columns: minmax(360px, 440px) 1fr !important;  /* 텍스트 좁게, 이미지 넓게 */
    gap: 56px !important;
  }
  .ai-mode.ai-mode--background{
    grid-template-columns: 1fr minmax(360px, 440px) !important;
  }

  /* 이미지 폭은 트랙(오른쪽 칼럼) 꽉 채우기 */
  .ai-mode__media img{
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
}

/* 초대형 화면에서 한 단계 더 크게 (옵션) */
@media (min-width: 1600px){
  .ai-mode{
    gap: 64px !important;
  }
}
/* ================= 3번째 섹션(Three modes…) 투명 PNG 뒤 어두운 박스 제거 ================ */

/* 아트보드/패널/figure 래퍼에 깔렸던 카드 배경, 라운드, 그림자 제거 */
.ai-modes .mode__art,
.ai-modes .mode__art::before,
.ai-modes .mode__art::after,
.ai-modes figure,
.ai-modes .artboard,
.ai-modes .artboard::before,
.ai-modes .artboard::after {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 실제 이미지도 배경색 강제 제거 */
.ai-modes .mode__art img,
.ai-modes figure img {
  display: block;
  background: transparent !important;
}

/* PNG가 원본에 가깝게 크게 보이도록 확대 (PC) */
:root { --ai-art-max: 1380px; } /* 필요하면 1420~1500px까지 늘려도 됨 */
.ai-modes .mode__art img { 
  width: min(var(--ai-art-max), 100%); 
  height: auto;
}

/* 블록 간 여백을 좀 더 넓게 */
.ai-modes .mode { 
  gap: 56px;               /* 텍스트-이미지 간격 */
  margin-block: 140px;     /* 블록과 블록 사이 간격 */
}

/* learn more 링크와 작은 캡션(이탤릭) */
.ai-modes .mode__learn {
  color: #9aa3be;          /* 회색 */
  text-decoration: underline;
}
.ai-modes .mode__note {
  margin-top: 8px;
  font-style: italic;      /* 이탤릭 */
  font-size: 13px;
  color: #9aa3be;          /* 같은 회색 */
}

/* 혹시 남아있는 둥근 배경을 가리는 ::before 오버레이가 있을 경우 완전 제거 */
.ai-modes [class*="panel"]::before,
.ai-modes [class*="wrap"]::before {
  content: none !important;
}
/* ===== 3번째 섹션(Three modes…) 이미지 뒤 카드/라운드/그림자 완전 제거 ===== */

/* 블록 자체도 혹시 배경이 있다면 제거 */
.ai-modes .mode { background: transparent !important; }

/* 이미지 래퍼(art/figure/패널 등) 배경/라운드/그림자 제거 + overflow 해제 */
.ai-modes .mode__art,
.ai-modes .mode__art *,
.ai-modes figure,
.ai-modes figure *,
.ai-modes [class*="artboard"],
.ai-modes [class*="panel"],
.ai-modes [class*="wrap"] {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 의사 요소로 깔리는 오버레이 완전 차단 */
.ai-modes .mode__art::before,
.ai-modes .mode__art::after,
.ai-modes figure::before,
.ai-modes figure::after,
.ai-modes [class*="artboard"]::before,
.ai-modes [class*="artboard"]::after,
.ai-modes [class*="panel"]::before,
.ai-modes [class*="panel"]::after,
.ai-modes [class*=*]()
/* ========= FIX: Three modes – 투명 PNG 뒤 카드/그림자/라운드 완전 제거 ========= */

/* 미디어 래퍼 자체를 완전 투명 + 그림자/라운드 제거 */
.ai-modes .ai-mode__media {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 래퍼 안의 어떤 중첩 요소라도 배경/그림자/라운드 제거 */
.ai-modes .ai-mode__media * {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 의사요소로 깔리는 보드/오버레이 완전 차단 */
.ai-modes .ai-mode__media::before,
.ai-modes .ai-mode__media::after,
.ai-modes .ai-mode__media *::before,
.ai-modes .ai-mode__media *::after {
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 이미지 자체도 혹시 배경 지정이 되어 있다면 제거 */
.ai-modes .ai-mode__media img {
  background: transparent !important;
}

/* (선택) 이미지는 라운드/그림자 없이 깔끔하게만 쓰고 싶다면 아래도 유지 */
.ai-modes .ai-mode__media img {
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* 공통 래핑 폭 (페이지에 이미 있다면 생략 가능) */
.ks-wrap{ width:min(1399px,100%); margin:0 auto; padding:0 24px; }

/* ===== CTA Banner ===== */
.ai-cta{
  position: relative;
  min-height: 350px;               /* 요구 높이 */
  display: flex;
  align-items: center;
  background: #000;                /* 이미지 로드 전 안전색 */
  overflow: hidden;
  isolation: isolate;              /* 오버레이 레이어 관리 */
}

/* ===== KeyShot Studio AI - CTA 배너(350px) 정리 ===== */
.ai-cta{
  position: relative;
  min-height: 350px;
  overflow: hidden;
  background: none !important;           /* 남아있는 배경/그라데이션 리셋 */
}

/* 위 섹션과 같은 좌측 라인에 맞춤 (ks-wrap 1399px 기준) */
.ai-cta__inner{
  width: min(1399px, 100%);
  margin: 0 auto;
  padding-left: 24px;                    /* 위 섹션과 동일한 좌측 여백 */
  padding-right: 24px;
}
@media (min-width: 1400px){
  .ai-cta__inner{ padding-left: 0; padding-right: 0; }
}

/* 배경 이미지(살짝 축소 느낌 유지) */
.ai-cta::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("/main/keyshot_assets/media/keyshot-studio-ai-bg-home.png");
  background-size: 115% auto;            /* 너무 꽉 차 보이지 않게 살짝 축소 느낌 */
  background-position: center right;
  background-repeat: no-repeat;
  z-index:-2;
  opacity:1;
}

/* 파란 그라데이션 오버레이 – 한 겹으로, 블리드로 솔기 방지 */
.ai-cta::after{
  content:"";
  position:absolute; inset:-1px;          /* 1px 블리드로 중간 솔기 제거 */
  pointer-events:none;
  background:
    radial-gradient(circle at 0% 50%,
      rgba(2, 28, 88, .85) 0%,
      rgba(2, 28, 88, 0) 55%)
    ,
    linear-gradient(90deg,
      rgba(2,12,40,.95) 0%,
      rgba(12,76,214,.85) 35%,
      rgba(20,112,255,.55) 60%,
      rgba(20,112,255,0) 90%);
  z-index:-1;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
}

/* 타이틀/버튼 그대로 사용 */
.ai-cta__title{
  margin:0 0 18px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.18;
  font-size: clamp(24px, 4.2vw, 40px);
  color:#fff;
  max-width: 720px;
}

/* 버튼은 그대로 */
.ai-cta__btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 20px;
  border-radius:9999px;
  background: linear-gradient(90deg, #cfe1ff 0%, #b9d6ff 45%, #ffe3b0 100%);
  color:#0e1016; font-weight:700; text-decoration:none;
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ai-cta__btn:hover{ filter:brightness(.98); transform:translateY(-1px); }
.ai-cta__btn:active{ transform:translateY(0); }

/* 반응형 */
@media (max-width: 920px){
  .ai-cta{ min-height: 320px; }
  .ai-cta::before{ background-position:center; background-size: 120% auto; }
}
@media (max-width: 600px){
  .ai-cta{ min-height: 300px; }
  .ai-cta__inner{ padding: 18px 24px; }
  .ai-cta__title{ font-size: clamp(22px, 6vw, 30px); }
}




/* ========= Why KeyShot Studio AI ========= */
.ai-why{
  background:#0f0f0f;
  color:#fff;
  padding: 80px 0 96px;
}
.ai-why__wrap{
  width:min(1399px, 100%);
  margin:0 auto;
  padding:0 24px;
}

/* 공용 그라데이션 제목과 동일 톤 */
.ai-grad{
  background:linear-gradient(90deg,#7eb2ff 0%,#5d96ff 35%,#e9c07a 78%,#f2c984 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Title */
.ai-why__title{
  margin:0 0 66px;
  text-align:center;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.3;
  font-size:clamp(34px,5.4vw,56px);
}

/* Grid: 357x422 카드 3개, 간격 66px */
.ai-why__grid{
  display:grid;
  grid-template-columns: repeat(3, 357px);
  gap:66px;
  justify-content:center;
}

/* Card */
.ai-why__card{
  width:357px; height:422px;
  background:#1d1d1d;
  border-radius:22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: 28px 26px 24px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

/* Icon 146 */
.ai-why__icon{
  width:146px; height:146px; object-fit:contain; display:block;
  margin: 4px 0 10px;
}

/* Title inside card */
.ai-why__card-title{
  margin: 8px 0 16px;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Body text inside card */
.ai-why__card-desc{
  margin:0;
  font-size: clamp(14px, 2.1vw, 16px);
  line-height: 1.65;
  color: rgba(255,255,255,.9);
}

/* Responsive */
@media (max-width: 1200px){
  .ai-why__grid{
    grid-template-columns: repeat(3, minmax(280px,1fr));
    gap: 44px;
  }
  .ai-why__card{
    width:auto; height:auto; min-height: 380px;
  }
}
@media (max-width: 920px){
  .ai-why__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .ai-why__card{
    width: min(520px, 100%);
    margin: 0 auto;
  }
}



/* ========== AI Vision ========== */
.ai-vision{
  background: linear-gradient(90deg, #e0f4ff 0%, #fafdf8 100%);
  color:#0e1016;
  padding: 88px 0;
}
.ai-row{
  display:grid;
  grid-template-columns: 420px 1fr;   /* 두 섹션 모두 같은 그리드로 정렬선 통일 */
  gap:56px;
  align-items:center;
}

/* Portrait (육각 느낌 마스크 + 드롭섀도우) */
.ai-portrait{ margin:0; }
.ai-portrait img{
  width:100%; height:auto; display:block;
  /* 육각형 느낌 */
  clip-path: polygon(12% 8%, 88% 0, 88% 78%, 58% 100%, 12% 88%, 12% 8%);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.15));
  border-radius: 8px; /* clip-path 미지원 환경 대비 */
}
.ai-portrait__cap{ margin-top:18px; text-align:center; }
.ai-portrait__name{
  font-weight:700; font-size:18px; letter-spacing:-.01em;
}
.ai-portrait__role{
  margin-top:6px; font-size:13px; color:#66707e;
}

/* Right text */
.ai-vision__title{
  margin:0 0 16px; font-weight:800; letter-spacing:-.01em;
  font-size:clamp(26px, 3.8vw, 40px);
}
.ai-vision__desc{
  margin:0 0 16px; line-height:1.75;
  color:#30363d;
}

/* ========== Dock CTA (오렌지 그라데이션) ========== */
.dock-cta{
  /* 좌측이 어둡고 우측으로 갈수록 밝아지는 오렌지 그라데이션 */
  background:
    radial-gradient(1200px 600px at 26% 60%, #b84222 0%, #ff6a2c 48%, #ff7f45 70%, rgba(0,0,0,0) 100%),
    linear-gradient(120deg, #1a1513 0%, #221916 25%, #2a1e19 40%, #2a1e19 100%);
  color:#fff;
  padding: 88px 0;
}
.dock-cta__left{ align-self:center; }
.dock-cta__logo{ display:block; margin-bottom:18px; }
.dock-cta__title{
  margin:0; font-weight:800; letter-spacing:-.01em;
  font-size:clamp(28px, 4.2vw, 44px); line-height:1.12;
}
.dock-cta__right{ align-self:center; }
.dock-cta__desc{
  margin:0 0 18px; max-width:640px; line-height:1.7;
  color:#f6f7f8;
}
.dock-cta__btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:9999px;
  background:#e4e0d8; color:#1d232a; text-decoration:none; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:filter .15s ease, transform .15s ease;
}
.dock-cta__btn:hover{ filter:brightness(.98); transform:translateY(-1px); }

/* 링크 회색 밑줄 (기존 톤과 맞춤) */
.ai-link--muted{ color:#68707f; text-decoration:underline; text-underline-offset:2px; }
.ai-link--muted:hover{ color:#49515d; }

/* 반응형 */
@media (max-width: 1024px){
  .ai-row{ grid-template-columns: 1fr; gap:28px; }
  .ai-portrait{ max-width:360px; }
  .ai-portrait, .dock-cta__left{ justify-self:start; }
}
@media (max-width: 640px){
  .ai-vision, .dock-cta{ padding: 64px 0; }
}

/* ── AI Vision: 초상 이미지 아래 캡션(이름/직위)만 중앙 정렬 ───────────────── */
.ai-vision .ai-portrait__cap{
  width: 100%;
  max-width: 298px;          /* 이미지 폭과 동일 */
  margin: 16px auto 0;       /* 캡션 블록 자체를 가운데로 */
  text-align: center !important;
}

.ai-vision .ai-portrait__name{
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #111;
  text-align: center !important;
}

.ai-vision .ai-portrait__role{
  display: block;
  margin: 0;
  font-size: 13px;
  color: #66707e;
  text-align: center !important;
}

/* ============= FAQ styles ============= */
.ks-faq{
  background:#fff;
  padding: 72px 0 96px;
}
.ks-faq__wrap{
  width: min(800px, 95%);
  margin: 0 auto;
}
.ks-faq__title{
  margin: 0 0 28px;
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 800;
  text-align: center;
  letter-spacing: -.01em;
}
.ks-faq__list{ border-top: 1px solid #e7e7e7; }

.ks-faq__item{
  border-bottom: 1px solid #e7e7e7;   /* 회색 밑줄 */
}
.ks-faq__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding: 18px 0;
  background:transparent; border:0; outline:0;
  text-align:left; cursor:pointer;
  font-size: clamp(15px, 2.4vw, 18px);
  color:#111;
}

/* 오른쪽 화살표 박스 */
.ks-faq__chev{
  width:28px; height:28px; border-radius:4px;
  background:#f1f1f3; position:relative; flex:0 0 28px;
  transition: transform .2s ease;
}
.ks-faq__chev::before{
  content:"";
  position:absolute; inset:0;
  margin:auto;
  width:8px; height:8px;
  border-right:2px solid #6b6f76;
  border-bottom:2px solid #6b6f76;
  transform: rotate(45deg);            /* ▼ */
  top:8px; left:8px;
}

/* 펼침 시 화살표 위쪽(▲) */
.ks-faq__item.is-open .ks-faq__chev{
  transform: rotate(180deg);
}

/* 답변: 질문보다 살짝 좁고 글씨 작게 */
.ks-faq__a{ display:none; }
.ks-faq__a-inner{
  padding: 6px 0 18px 0;
  max-width: 90%;
  color:#444;
  font-size: 15px;
  line-height: 1.7;
}
.ks-faq__a-inner ul{ margin:8px 0 0 18px; }
.ks-faq__a-inner li{ margin:4px 0; }

/* 제목 색상: 검은색 */
.ks-faq__title{
  color:#111 !important;
}

/* 화살표 박스 중앙 정렬 보정 */
.ks-faq__chev{
  position: relative;
  width:28px; height:28px; border-radius:4px;
  background:#f1f1f3;
  flex:0 0 28px;
  /* 혹시 기존에 회전이 들어갔다면 제거 */
  transform:none !important;
}

/* 화살표(∨) – 박스의 정확한 중앙에 배치 */
.ks-faq__chev::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:8px; height:8px;
  border-right:2px solid #6b6f76;
  border-bottom:2px solid #6b6f76;
  transform: translate(-50%,-50%) rotate(45deg);  /* 아래쪽을 가리키는 V */
}

/* 펼침 상태: 화살표만 위(∧)로 회전 */
.ks-faq__item.is-open .ks-faq__chev::before{
  transform: translate(-50%,-50%) rotate(225deg);
}


/* ▼ 닫힘(아래 화살표) – 중앙 기준으로 '왼쪽·위'로 살짝 이동 */
.ks-faq__chev::before{
  top:50%; left:50%;
  transform: translate(-70%,-80%) rotate(45deg);  /* ← X, ↑ Y */
}

/* ▲ 열림(위 화살표) – 중앙 기준으로 '왼쪽'만 살짝 이동 */
.ks-faq__item.is-open .ks-faq__chev::before{
  transform: translate(-58%,-50%) rotate(225deg); /* ← X만 */
}