/* =========================================================
   KAIS 웹사이트 UI Kit — 섹션 스타일
   글로벌 토큰/클래스는 styles.css 에서 옵니다. 이 파일은
   섹션 전용 레이아웃만 담습니다. (레퍼런스 무드: 프리미엄 코퍼레이트)
   ========================================================= */

/* eyebrow(빨간 라벨) 전체 숨김 — 모든 사이트 페이지 공통 */
.eyebrow{ display:none !important; }
/* 모바일 가로 스크롤 방지 가드 */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }

/* 공통 스크롤 모션 — Apple/Toss 풍 (keyframe 기반: 카드 hover transition과 충돌 없음) */
:root{ --ease-rise: cubic-bezier(.16,1,.3,1); }
.m-reveal{ opacity:0; }
.m-in{ opacity:1; animation:mReveal .8s var(--ease-rise) backwards; }
@keyframes mReveal{ from{ opacity:0; transform:translateY(30px); filter:blur(7px); } to{ opacity:1; transform:none; filter:blur(0); } }
/* 카드·미디어 — 살짝 확대까지 더해 떠오름 */
.bcard.m-in, .casecard.m-in, .vcard.m-in, .work-card.m-in, .revcard.m-in,
.field-photo.m-in, .about-photo.m-in, .ch-tile.m-in, .adjcard.m-in,
.greet-photo.m-in, .loc-map.m-in, .art-cover.m-in{ animation-name:mRevealCard; }
@keyframes mRevealCard{ from{ opacity:0; transform:translateY(36px) scale(.96); filter:blur(7px); } to{ opacity:1; transform:none; filter:blur(0); } }
/* 섹션 헤더·인트로 — 조금 더 큰 상승 */
.section-head.m-in, .precheck-head.m-in, .page-intro.m-in{ animation-name:mRevealHead; }
@keyframes mRevealHead{ from{ opacity:0; transform:translateY(26px); filter:blur(6px); } to{ opacity:1; transform:none; filter:blur(0); } }
@media (prefers-reduced-motion: reduce){ .m-reveal{ opacity:1 !important; } .m-in{ animation:none !important; } }

/* ---------------- HEADER ---------------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:50; transition:.3s var(--ease); }
.hdr-inner{ max-width:var(--maxw); margin:0 auto; padding:16px var(--gutter); display:flex; align-items:center; gap:22px; }
.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand img{ width:38px; height:38px; }
.brand .wm{ font-weight:800; font-size:18px; letter-spacing:-.02em; line-height:1.1; color:var(--c-strong); }
.brand .wm small{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.16em; color:var(--c-subtle); margin-top:2px; }
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a, .nav .nav-top{ font-size:14.5px; font-weight:500; color:var(--c-emph); padding:8px 14px; border-radius:var(--r-sm); transition:.16s var(--ease); white-space:nowrap; }
.nav a:hover, .nav .nav-top:hover{ color:var(--brand-default); }
.nav .nav-top.active{ color:var(--brand-default); font-weight:600; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-top{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.nav-caret{ width:13px; height:13px; opacity:.55; transition:transform .22s var(--ease); }
.nav-item:hover .nav-caret{ transform:rotate(180deg); opacity:1; }
.nav-drop{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); min-width:172px;
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:9px;
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease); z-index:60; }
.nav-drop::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav-item:hover .nav-drop{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(6px); }
.nav-drop a{ font-size:14px; font-weight:500; color:var(--c-emph); padding:10px 16px; border-radius:9px; text-align:center; transition:.14s var(--ease); }
.nav-drop a:hover{ background:var(--brand-faint); color:var(--brand-text); }
.hdr.float .nav a, .hdr.float .nav .nav-top{ color:var(--c-emph); }
.hdr .cta{ margin-left:8px; }
.hdr-phone{ display:flex; align-items:center; gap:8px; margin-left:8px; font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--brand-default); white-space:nowrap; }
.hdr-phone svg{ width:18px; height:18px; }
.burger{ display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); align-items:center; justify-content:center; }
.burger span,.burger span::before,.burger span::after{ display:block; width:18px; height:2px; background:var(--c-strong); transition:.25s; }
.burger span{ position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ transform:rotate(45deg); top:0; }
.burger.open span::after{ transform:rotate(-45deg); top:0; }
.hdr.float{ background:rgba(255,255,255,.94); backdrop-filter:blur(12px) saturate(1.3); border-bottom:1px solid var(--border); }
.hdr.solid{ background:rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--border); }
.mobile-menu{ display:none; }
@media (max-width:920px){
  .nav,.hdr .cta,.hdr-phone{ display:none; }
  .burger{ display:flex; }
  .mobile-menu{ display:block; position:fixed; inset:68px 0 auto 0; z-index:49; background:#fff;
    border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); padding:14px var(--gutter) 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.26s var(--ease); }
  .mobile-menu.show{ transform:none; opacity:1; pointer-events:auto; }
  .mobile-menu a{ display:block; padding:14px 4px; font-size:16px; font-weight:600; color:var(--c-strong); border-bottom:1px solid var(--bg-subtle); }
  .mobile-menu .mm-sub{ padding:4px 0 8px 12px; }
  .mobile-menu .mm-sub a{ padding:10px 4px; font-size:14px; font-weight:500; color:var(--c-default); border-bottom:0; }
  .mobile-menu .mm-sub a::before{ content:"– "; color:var(--c-subtle); }
  .mobile-menu .btn{ margin-top:16px; }
  .mobile-menu .btn::before{ content:none; }
}

/* ---------------- HERO ---------------- */
.hero{ position:relative; overflow:hidden;
  background:linear-gradient(100deg, #f4f4f6 0%, #f1f0f4 44%, #eae9ef 58%, #e6e5eb 100%);
  min-height:clamp(600px, 72vh, 780px); padding-top:84px; }            /* (12) header와 분리 */
.hero-watermark{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(34,52,92,.016) 0 1.2px, transparent 1.2px 96px),
    repeating-linear-gradient(-45deg, rgba(34,52,92,.011) 0 1.2px, transparent 1.2px 128px);
  -webkit-mask-image:linear-gradient(100deg, #000 30%, transparent 56%);
  mask-image:linear-gradient(100deg, #000 30%, transparent 56%); }    /* (11) opacity 낮춤 */
.hero-slide{ position:absolute; inset:0; z-index:1; display:flex; align-items:center;
  opacity:0; visibility:hidden; transition:opacity .7s var(--ease), visibility .7s var(--ease); }
.hero-slide.on{ opacity:1; visibility:visible; z-index:2; }
.hero-slide.on .hero-content{ animation:heroRise .7s var(--ease) both; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.hero-photo{ position:absolute; right:0; top:0; bottom:0; width:clamp(440px, 50vw, 800px); z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:flex-end; }
.hero-photo img{ width:100%; height:auto; max-height:100%; object-fit:contain; object-position:right center; display:block;          /* 자연 비율 — 인물 전체 노출, 크롭 없음 */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 17%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 17%); }  /* 좌측 가장자리만 살짝 페이드 */
.hero-photo::after{ content:none; }
.hero-photo:not(.office) img{ transform:translateY(20px); }  /* 단체사진 20px 아래로 (데스크톱) */
/* slide 2 — 사무실/서류 와이드 이미지(손 위주) */
.hero-photo.office{ top:0; bottom:0; width:clamp(440px, 52vw, 880px); align-items:stretch; }
.hero-photo.office img{ width:100%; height:100%; object-fit:cover; object-position:right center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-composite:intersect; }
.hero-photo.office::after{ content:none; }
.hero-2col{ position:relative; z-index:2; width:min(var(--maxw), calc(100% - 2*var(--gutter))); margin-inline:auto; }
.hero-content{ max-width:560px; display:flex; flex-direction:column; align-items:flex-start;   /* (5) 세로 중앙은 hero align-items:center 가 처리 */
  padding-block:clamp(16px,3vw,40px); }
.hero-eyebrow{ font-size:clamp(14px,1.05vw,16px); font-weight:500; color:#586070; letter-spacing:-.01em; }
.hero-title{ margin-top:22px; color:#16203a; font-weight:800; letter-spacing:-.035em; line-height:1.12;  /* (2) 8~12% 축소 (3) lh 1.12 (4) 네이비블랙 */
  font-size:clamp(36px, 4.9vw, 69px); }
.hero-title.two{ font-size:clamp(30px, 3.9vw, 54px); line-height:1.16; }   /* slide2 — 긴 카피 */
.hero-title .ac{ color:#b7283c; }                                       /* 강조만 크림슨 */
.hero-sub{ margin-top:22px; max-width:548px; color:#565d6a; font-size:clamp(15px,1.1vw,17px); line-height:1.72; }  /* (6)(7) 간격·max-width */
.hero-ctas{ margin-top:30px; gap:12px; }                                /* (6) 일정 간격 */
.btn-hero{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:54px; padding:0 28px;  /* (10) 높이·radius 통일 */
  font-size:16px; font-weight:600; border-radius:8px; transition:.18s var(--ease); white-space:nowrap; }
.btn-hero .arr{ transition:transform .2s var(--ease); }
.btn-hero:hover .arr{ transform:translateX(4px); }
.btn-hero.red{ background:#b7283c; color:#fff; box-shadow:0 12px 28px -14px rgba(183,40,60,.55); }   /* (10) 메인 크림슨 */
.btn-hero.red:hover{ background:var(--brand-emphasis); }
.btn-hero.outline{ background:rgba(255,255,255,.6); color:#2d333d; border:1px solid #d6dae0; }        /* (10) 보조 연한 border */
.btn-hero.outline:hover{ background:#fff; border-color:#b6bcc6; }
/* carousel controls */
.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.82); border:1px solid #dde1e7;
  display:flex; align-items:center; justify-content:center; color:#2d333d; backdrop-filter:blur(6px);
  box-shadow:var(--shadow-md); transition:.18s var(--ease); }
.hero-arrow:hover{ background:#fff; color:var(--brand-default); border-color:var(--brand-line); }
.hero-arrow.prev{ left:clamp(10px, 2vw, 26px); }
.hero-arrow.next{ right:clamp(10px, 2vw, 26px); }
.hero-dots{ position:absolute; left:0; right:0; bottom:26px; z-index:5; display:flex; justify-content:center; gap:10px; }
.hero-dot{ width:30px; height:4px; border-radius:3px; border:0; background:rgba(22,32,58,.18); transition:.2s var(--ease); padding:0; }
.hero-dot.on{ background:var(--brand-default); width:42px; }
@media (max-width:1024px){
  .hero{ min-height:clamp(560px,90svh,760px); padding-top:0; position:relative; }
  .hero-watermark{ -webkit-mask-image:none; mask-image:none; }
  .hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; display:flex; align-items:center; }
  .hero-slide.on{ opacity:1; visibility:visible; }
  /* 사진 = 풀블리드 배경 (텍스트와 겹침) */
  .hero-photo{ position:absolute; inset:0; left:auto; top:0; bottom:0; right:0; width:auto; height:auto; margin:0; border-radius:0; z-index:0; display:block; }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; -webkit-mask-image:none; mask-image:none; transform:none !important; }
  .hero-photo.office img{ object-fit:cover; object-position:center; -webkit-mask-image:none; mask-image:none; }
  /* 강한 밝은 베일 — 두 슬라이드 모두(어두운 사진 포함) 텍스트 가독성 확보 */
  .hero-photo::after{ display:block; content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(244,244,247,.95) 0%, rgba(244,244,247,.87) 48%, rgba(244,244,247,.82) 100%); }
  /* slide 2 — 데스크톱 content:none 을 모바일에서 다시 켜서 1페이지처럼 흰 베일 적용 */
  .hero-photo.office::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(244,244,247,.95) 0%, rgba(244,244,247,.89) 50%, rgba(244,244,247,.85) 100%); }
  .hero-2col{ position:relative; z-index:2; width:calc(100% - 2*var(--gutter)); margin-inline:auto; }
  .hero-content{ max-width:none; padding:0; }
  /* 텍스트 그림자 — 글자색 맞춤, 45° 우하향 */
  .hero-title{ font-size:clamp(32px,8.4vw,50px); text-shadow:2px 2px 4px rgba(22,32,58,.3); }
  .hero-title .ac{ text-shadow:2px 2px 4px rgba(183,40,60,.32); }
  .hero-title.two{ font-size:clamp(27px,7vw,44px); }
  .hero-sub{ text-shadow:1.5px 1.5px 3px rgba(86,93,106,.34); }
  .hero-arrow{ top:auto; bottom:16px; transform:none; width:40px; height:40px; }
  .hero-dots{ bottom:12px; }
}
@media (max-width:560px){
  .btn-hero{ flex:1; padding:0 16px; }
  .hero-ctas{ width:100%; }
  /* LIVE 행 — 좌우 여백·간격 정리, 날짜 줄바꿈 방지 */
  .live-row{ gap:9px; padding:13px 0; }
  .live-row .txt{ font-size:13px; }
  .live-row .tm{ font-size:11px; }
  .live-row .tag{ font-size:10px; padding:3px 7px; }
  .ai-preview{ padding:14px 15px; }
  .ch-tiles{ gap:8px; }
}
@media (max-width:400px){
  .hero-title{ font-size:30px; }
  .hero-title.two{ font-size:26px; }
  .hero-ctas{ flex-direction:column; }
  .btn-hero{ width:100%; }
  .steps{ grid-template-columns:1fr 1fr; gap:26px 0; }
  .chip{ font-size:12.5px; }
}

/* ---------------- LIVE + AI ---------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch; }
.split > *, .field-body > *, .contact-grid > *{ min-width:0; }
.split > * > .card{ height:100%; }
.live-rows{ margin-top:8px; }
.live-row{ display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--bg-subtle); }
.live-row:last-child{ border-bottom:0; }
.live-row .tag{ font-size:11px; font-weight:600; padding:4px 9px; border-radius:var(--r-sm); flex:none; }
.tag.pre{ background:var(--brand-faint); color:var(--brand-text); }
.tag.con{ background:var(--bg-subtle); color:var(--c-emph); }
.live-row .txt{ flex:1; min-width:0; font-size:14px; color:var(--c-emph); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-row .tm{ font-size:12px; color:var(--c-subtle); flex:none; white-space:nowrap; }
.live-scroll{ height:296px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); }
.live-track{ display:flex; flex-direction:column; animation:livescroll 24s linear infinite; }
.live-card:hover .live-track{ animation-play-state:paused; }
@keyframes livescroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@media (prefers-reduced-motion: reduce){ .live-track{ animation:none; } }
.ai-card .chatfield{ min-height:92px; }
.ai-entry{ position:relative; overflow:hidden; display:flex; flex-direction:column; height:100%; cursor:pointer; transition:box-shadow .22s var(--ease), transform .22s var(--ease); }
.ai-entry > *{ position:relative; z-index:1; }
.ai-wm{ position:absolute; right:-44px; top:-40px; width:210px; height:auto; opacity:.045; z-index:0; pointer-events:none; }
.ai-entry:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.ai-entry .chip{ cursor:pointer; pointer-events:none; }
.ai-entry .btn.red{ margin-top:auto; }
.ai-entry .ai-foot{ margin-top:14px; }
/* AI 1차 검토 결과 예시 — 빈 공간을 가치 미리보기로 채움 */
.ai-preview{ margin-top:20px; background:var(--bg-muted); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; }
.aip-head{ display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--brand-default); text-transform:uppercase; }
.aip-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-default); box-shadow:0 0 0 4px var(--brand-faint); flex:none; }
.aip-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-top:14px; }
.aip-col .aip-label{ display:block; font-size:11.5px; font-weight:700; color:var(--c-emph); margin-bottom:9px; }
.aip-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.aip-col li{ position:relative; padding-left:16px; font-size:13px; color:var(--c-default); line-height:1.45; }
.aip-col li::before{ content:""; position:absolute; left:1px; top:6px; width:6px; height:6px; border-radius:2px; background:var(--brand-line); }
@media (max-width:560px){ .aip-cols{ grid-template-columns:1fr; gap:12px; } }
.privacy{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--c-default); background:var(--bg-muted); border-radius:var(--r-sm); padding:10px 12px; line-height:1.5; }
.privacy svg{ flex:none; margin-top:1px; }
.ai-result{ margin-top:16px; border-top:1px solid var(--bg-subtle); padding-top:16px; }
.ai-result .rblock{ margin-bottom:14px; }
.ai-result .rh{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-default); margin-bottom:8px; }
.ai-result ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.ai-result li{ font-size:14px; color:var(--c-emph); padding-left:18px; position:relative; }
.ai-result li::before{ content:""; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--brand-subtle); }
.thinking{ display:flex; align-items:center; gap:10px; color:var(--c-default); font-size:14px; padding:18px 0; }
.thinking .spin{ width:18px; height:18px; border:2px solid var(--brand-muted); border-top-color:var(--brand-default); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---------------- ABOUT ---------------- */
.about-sec{ position:relative; overflow:hidden; }
.about-docs-bg{ position:absolute; right:0; top:0; bottom:0; width:36%; z-index:0; pointer-events:none;
  background:url("../../assets/about-bg.png") right center / cover no-repeat; opacity:.95;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 42%); }
.about-sec > .wrap{ position:relative; z-index:1; }
.about-content{ position:relative; z-index:1; width:min(100%, 1000px); max-width:74%; }
.about-title{ margin-top:18px; color:#fff; font-weight:700; letter-spacing:-.025em; line-height:1.26;
  font-size:clamp(28px, 3vw, 46px); }
#about{ background:linear-gradient(155deg,#26396180 0%, transparent 60%), linear-gradient(160deg,#243860 0%, #16243c 55%, #1c2a48 100%); }
.about-grid{ display:grid; grid-template-columns:1.4fr .92fr; gap:clamp(24px,3.4vw,44px); align-items:stretch; }
.about-grid > *{ min-width:0; }
.about-grid > div:first-child{ display:flex; flex-direction:column; }
.vgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; flex:1; }
.vcard{ background:#fff; border-radius:var(--r); padding:22px 20px; box-shadow:var(--shadow-md); transition:.25s var(--ease); display:flex; flex-direction:column; }
.vcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.vnum{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-weight:800; font-size:17px; letter-spacing:-.01em; }
.vcard h4{ font-size:16.5px; font-weight:700; color:var(--c-strong); margin-top:14px; }
.vcard p{ font-size:13px; color:var(--c-default); margin-top:8px; line-height:1.6; }
.about-photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:360px; align-self:stretch;
  background:linear-gradient(160deg,#2c3e63,#16243c); display:flex; }
.about-photo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,24,40,.15) 30%, rgba(16,24,40,.8)); }
.about-photo .ov{ position:relative; z-index:1; margin-top:auto; padding:30px; color:#fff; }
.about-sec .vgrid{ grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(28px,4vw,40px); max-width:none; }
.about-sec .vcard{ position:relative; min-height:188px; padding:26px 24px; border-radius:12px; box-shadow:0 16px 40px -20px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.about-sec .vcard .vnum{ position:absolute; top:18px; right:22px; width:auto; height:auto; background:none; border-radius:0; display:block; color:rgba(15,23,42,.14); font-size:52px; font-weight:700; line-height:1; }
.about-sec .vcard h4{ margin-top:auto; font-size:18px; font-weight:700; color:#1c2a48; letter-spacing:-.01em; }
.about-sec .vcard p{ margin-top:10px; font-size:13px; color:#5a6376; line-height:1.62; }
.about-sec .vcard:nth-child(1){ background:linear-gradient(180deg,#e4ecfa 0%,#ffffff 62%); }
.about-sec .vcard:nth-child(2){ background:linear-gradient(180deg,#ebe7f6 0%,#ffffff 62%); }
.about-sec .vcard:nth-child(3){ background:linear-gradient(180deg,#e3f0e7 0%,#ffffff 62%); }
.about-sec .vcard:nth-child(4){ background:linear-gradient(180deg,#f4ecd8 0%,#ffffff 62%); }
.about-sec .vcard:nth-child(5){ background:linear-gradient(180deg,#e9ecf2 0%,#ffffff 62%); }
.about-sec .vcard:nth-child(6){ background:linear-gradient(180deg,#f6e6da 0%,#ffffff 62%); }
.about-photo .ov h3{ color:#fff; font-size:clamp(18px,1.7vw,22px); font-weight:700; line-height:1.45; }
.about-photo .ov .btn{ margin-top:20px; }
.about-photo .ph-tag{ position:absolute; top:18px; left:20px; font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.4); }

/* ---------------- REVIEWS (4 cards) ---------------- */
.slide-pill{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--c-emph);
  background:#fff; border:1px solid var(--border); border-radius:var(--r-full); padding:8px 16px; box-shadow:var(--shadow-input); }
.slide-pill svg{ color:var(--brand-default); }
.review-marquee{ position:relative; margin-top:clamp(32px,4vw,46px); overflow:hidden; padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.review-track{ display:flex; gap:22px; width:max-content; animation:reviewmarq 32s linear infinite; }
.review-marquee:hover .review-track{ animation-play-state:paused; }
@keyframes reviewmarq{ from{ transform:translateX(0) } to{ transform:translateX(calc(-50% - 11px)) } }
.revcard{ flex:none; width:300px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-md); padding:22px 22px 26px; }
.revcard .shot{ border-radius:10px; height:200px; overflow:hidden; position:relative; padding:0; display:block; }
.revcard .rev-cap{ text-align:center; font-size:12.5px; color:var(--c-default); margin-top:14px; }
.revcard .stars{ text-align:center; color:var(--amber); font-size:15px; letter-spacing:2px; margin-top:12px; }
.revcard .rev-quote{ text-align:center; font-size:14.5px; font-weight:600; color:var(--c-strong); line-height:1.55; margin-top:12px; letter-spacing:-.01em; }
/* letter shot */
.shot.letter{ background:#f3ede2; padding:20px 18px; }
.shot.letter .letter-text{ display:flex; flex-direction:column; gap:9px; font-size:12px; color:#6f6450; line-height:1.4;
  font-family:'Gowun Dodum','Noto Sans KR',cursive; transform:rotate(-1deg); }
.shot.letter .sprig{ position:absolute; right:14px; bottom:12px; width:34px; height:80px; opacity:.9; }
/* kakao shot */
.shot.kakao{ background:#f7eecf; padding:18px 14px; }
.shot.kakao .k-from{ display:flex; align-items:center; gap:6px; font-size:11px; color:#7a6a3f; margin-bottom:8px; }
.shot.kakao .k-ava{ width:20px; height:20px; border-radius:7px; background:#fff; display:flex; align-items:center; justify-content:center; color:#9a8a55; }
.shot.kakao .k-in,.shot.kakao .k-out{ position:relative; font-size:11.5px; line-height:1.45; padding:9px 11px; border-radius:10px; max-width:84%; margin-bottom:8px; }
.shot.kakao .k-in{ background:#fff; color:#3a3a3a; border-top-left-radius:3px; }
.shot.kakao .k-out{ background:#fde36a; color:#3a2f1a; margin-left:auto; border-top-right-radius:3px; }
.shot.kakao .k-tm{ position:absolute; bottom:2px; right:-32px; font-size:9px; color:#a99; white-space:nowrap; }
.shot.kakao .k-tm.out{ right:auto; left:-32px; }
/* sms shot */
.shot.sms{ background:#eceef1; padding:18px 16px; }
.shot.sms .s-head{ text-align:center; font-size:11px; color:#8a909c; line-height:1.5; margin-bottom:12px; }
.shot.sms .s-head span{ font-size:10px; color:#a7adb8; }
.shot.sms .s-bubble{ background:#fff; color:#3a3f48; font-size:11.5px; line-height:1.5; padding:11px 13px; border-radius:12px; border-top-left-radius:3px; max-width:90%; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.btn-review-more{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600;
  color:var(--brand-default); border:1.5px solid var(--brand-line); border-radius:var(--r-full); padding:13px 30px; transition:.18s var(--ease); }
.btn-review-more:hover{ background:var(--brand-faint); border-color:var(--brand-default); }
@media (max-width:560px){ .revcard{ width:260px; } }

/* ---------------- FIELDS ---------------- */
.field-body{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; margin-top:36px; }
.field-body > *{ min-width:0; }
.field-body .ph{ min-height:360px; border-radius:var(--r-lg); }
.field-photo{ border-radius:var(--r-lg); overflow:hidden; min-height:360px; box-shadow:var(--ring-card); animation:fieldfade .45s var(--ease) both; }
@keyframes fieldfade{ from{ opacity:0; transform:scale(1.015); } to{ opacity:1; transform:none; } }
.field-detail{ animation:fielddetail .45s var(--ease) both; }
@keyframes fielddetail{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.field-photo img{ width:100%; height:100%; min-height:360px; object-fit:cover; display:block; }
.field-detail .num{ font-size:13px; color:var(--brand-default); font-weight:700; letter-spacing:.04em; }
.field-detail h3{ margin-top:6px; }
.field-detail p{ color:var(--c-default); margin-top:14px; font-size:15.5px; }
.points{ list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:11px; }
.points li{ display:flex; gap:10px; font-size:14.5px; color:var(--c-emph); }
.points svg{ flex:none; margin-top:3px; color:var(--brand-default); }

/* ---------------- ADJUSTERS ---------------- */
.adj-carousel{ position:relative; margin-top:40px; display:flex; align-items:center; gap:8px; }
.adj-rail{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth; padding:8px 2px 14px; flex:1; }
.adj-nav{ flex:none; width:48px; height:48px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--navy);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); transition:.18s var(--ease); z-index:5; }
.adj-nav:hover{ border-color:var(--navy); background:var(--navy); color:#fff; }
.adj-nav:disabled{ opacity:.34; cursor:default; box-shadow:none; }
.adj-nav:disabled:hover{ background:#fff; color:var(--navy); border-color:var(--border); }
.adjcard{ position:relative; flex:none; width:clamp(244px,23vw,278px); aspect-ratio:3/4; border-radius:18px; overflow:hidden; cursor:pointer;
  scroll-snap-align:start; background:linear-gradient(155deg,#3a4d68,#1c2a44); box-shadow:var(--shadow-md); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.adjcard-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block; }
.adjcard-foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:46px 22px 22px;
  background:linear-gradient(180deg, transparent, rgba(14,22,40,.86) 64%); transition:opacity .28s var(--ease); }
.adjcard-nm{ font-size:21px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.adjcard-rl{ font-size:12.5px; color:var(--brand-subtle); font-weight:600; margin-top:5px; }
.adjcard-hover{ position:absolute; inset:0; z-index:3; padding:26px 24px; display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(16,25,44,.62) 0%, rgba(16,25,44,.9) 60%);
  opacity:0; transition:opacity .3s var(--ease); }
.adjcard-hover .adjcard-rl{ margin-top:6px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.16); }
.adjcard-hover ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.adjcard-hover li{ font-size:12.5px; color:rgba(255,255,255,.9); line-height:1.5; padding-left:14px; position:relative; }
.adjcard-hover li::before{ content:""; position:absolute; left:1px; top:7px; width:4px; height:4px; border-radius:50%; background:var(--brand-subtle); }
.adjcard-more{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:16px; font-size:13.5px; font-weight:700; color:#fff; }
.adjcard-more svg{ color:var(--brand-subtle); }
.adjcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.adjcard:hover .adjcard-foot{ opacity:0; }
.adjcard:hover .adjcard-hover{ opacity:1; }
.staff-note{ text-align:center; font-size:12.5px; color:var(--c-subtle); margin-top:20px; }
.staff-hint{ color:var(--c-subtle); }
@media (max-width:560px){ .adj-nav{ display:none; } .adjcard{ width:clamp(210px,72vw,250px); } }

/* ---------------- PROCESS ---------------- */
.steps{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin-top:48px; position:relative; }
.steps::before{ content:""; position:absolute; left:8%; right:8%; top:38px; height:2px; background:var(--border); z-index:0; }
.steps .prog{ position:absolute; left:8%; top:38px; height:2px; background:var(--navy); z-index:0; width:0; transition:width 1.7s var(--ease); }
.steps.run .prog{ width:84%; }
.step{ text-align:center; position:relative; z-index:1; padding:0 8px; }
.step .circ{ width:76px; height:76px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:inset 0 0 0 1px var(--border), var(--shadow-input); color:var(--c-subtle); transition:.4s var(--ease); }
.step .circ .ico{ width:30px; height:30px; }
.step .circ .n{ position:absolute; top:-6px; right:-2px; width:24px; height:24px; border-radius:50%; background:var(--bg-subtle); color:var(--c-default);
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:.4s var(--ease); }
.steps.run .step.lit .circ{ background:var(--navy); color:#fff; box-shadow:0 10px 24px -10px rgba(34,52,92,.5); }
.steps.run .step.lit .circ .n{ background:var(--brand-default); color:#fff; }
.step .st{ font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--c-subtle); margin-top:16px; }
.step .tt{ font-size:15px; font-weight:700; color:var(--c-strong); margin-top:5px; }

/* ---------------- CASES ---------------- */
.cases-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; }
.casecard{ background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--ring-card); transition:.25s var(--ease); cursor:pointer; }
.casecard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.casecard .thumb{ height:184px; border-radius:0; box-shadow:none; }
.casecard .cbody{ padding:22px; }
.casecard h4{ font-size:17.5px; font-weight:700; color:var(--c-strong); line-height:1.4; }
.casecard p{ font-size:13.5px; color:var(--c-default); margin-top:9px; }
.casecard .crow{ margin-top:16px; padding-top:14px; border-top:1px solid var(--bg-subtle); display:flex; align-items:center; gap:6px; }
.casecard .ctag{ font-size:11.5px; font-weight:600; color:var(--c-emph); background:var(--bg-subtle); padding:4px 9px; border-radius:var(--r-sm); }
.casecard .carr{ margin-left:auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--navy); flex:none; transition:.18s; }
.casecard:hover .carr{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ---------------- CONTACT ---------------- */
.contact-grid{ display:grid; grid-template-columns:.92fr 1.18fr; gap:24px; align-items:stretch; margin-top:48px; }
.contact-grid > *{ min-width:0; }
.contact-grid .card{ padding:32px; }
.whychk{ position:relative; overflow:hidden; display:flex; flex-direction:column; }
.whychk .wm{ position:absolute; right:-34px; bottom:-34px; width:230px; opacity:.05; pointer-events:none; }
.whychk h3{ color:var(--c-strong); }
.whychk .sub{ color:var(--c-default); font-size:14px; margin-top:10px; }
.benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:auto; padding-top:26px; position:relative; z-index:1; }
.benefit{ display:flex; align-items:center; gap:9px; background:var(--bg-muted); border:1px solid var(--border); border-radius:var(--r); padding:11px 12px; }
.benefit .bi{ width:30px; height:30px; border-radius:8px; background:var(--brand-faint); color:var(--brand-default); display:flex; align-items:center; justify-content:center; flex:none; }
.benefit .bi svg{ width:17px; height:17px; }
.benefit .bl{ font-size:13px; font-weight:600; color:var(--c-strong); }
.form-grid{ display:grid; gap:15px; margin-top:6px; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--c-strong); margin-bottom:7px; }
.field label .req{ color:var(--brand-default); }
.field.err input,.field.err textarea{ border-color:var(--brand-default); }
.field .msg{ font-size:12px; color:var(--brand-default); margin-top:5px; }
.consent{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--c-default); }
.consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--brand-default); flex:none; }
.form-success{ text-align:center; padding:36px 10px; }
.form-success .ico{ width:58px; height:58px; border-radius:50%; background:var(--brand-faint); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--brand-default); }

/* ---------------- FOOTER ---------------- */
.footer{ background:var(--bg-muted); color:var(--c-default); padding-block:52px 30px; border-top:1px solid var(--border); }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:32px; align-items:start; }
.footer .brand .wm{ color:var(--c-strong); } .footer .brand .wm small{ color:var(--c-subtle); }
.footer h5{ color:var(--c-strong); font-size:13px; font-weight:700; margin-bottom:14px; }
.footer .flink{ display:block; font-size:13.5px; color:var(--c-default); padding:6px 0; transition:.16s; }
.footer .flink:hover{ color:var(--brand-default); }
.footer .finfo{ font-size:13px; line-height:1.85; margin-top:16px; color:var(--c-default); }
.footer .foot-contact{ text-align:right; }
.footer .foot-contact .ph-num{ font-size:clamp(24px,3vw,30px); font-weight:800; letter-spacing:-.02em; color:var(--navy); display:inline-flex; align-items:center; gap:9px; }
.footer .foot-contact .hrs{ font-size:12.5px; color:var(--c-default); margin-top:8px; line-height:1.7; }
.footer .sns{ display:flex; gap:10px; margin-top:16px; justify-content:flex-end; }
.footer .sns a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--c-default); transition:.18s; background:#fff; }
.footer .sns a:hover{ border-color:var(--brand-default); background:var(--brand-default); color:#fff; }
.footer .legal{ margin-top:36px; padding-top:22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--c-subtle); }
@media (max-width:920px){ .foot-grid{ grid-template-columns:1fr 1fr; } .footer .foot-contact{ text-align:left; } .footer .sns{ justify-content:flex-start; } }

/* ---------------- QUICK NAV (click/hover-expand brand channels) ---------------- */
.qnav{ position:fixed; right:20px; bottom:26px; z-index:40; display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.qnav.in{ opacity:1; pointer-events:auto; }
.qnav-wrap{ position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
/* trigger — KAIS 로고 버튼 */
.qnav-trigger{ width:62px; height:62px; border-radius:50%; background:#fff; border:1px solid var(--border);
  box-shadow:0 10px 26px -8px rgba(22,32,58,.32); display:flex; align-items:center; justify-content:center;
  padding:0; transition:.22s var(--ease); }
.qnav-trigger img{ width:42px; height:42px; }
.qnav-trigger:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(183,40,60,.4); }
/* panel — 닫힌 상태엔 완전 숨김(레이아웃/클릭 차단 안 함) */
.qnav-panel{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.qnav:not(.open) .qnav-panel{ display:none; }
.qitem{ display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(10px) scale(.85);
  transition:opacity .25s var(--ease), transform .25s var(--ease); }
.qnav.open .qitem{ opacity:1; transform:none; }
.qnav.open .qitem:nth-child(1){ transition-delay:.02s; }
.qnav.open .qitem:nth-child(2){ transition-delay:.06s; }
.qnav.open .qitem:nth-child(3){ transition-delay:.10s; }
.qnav.open .qitem:nth-child(4){ transition-delay:.14s; }
.qnav.open .qitem:nth-child(5){ transition-delay:.18s; }
.qicon{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.35); flex:none; transition:.18s var(--ease); }
.qitem:hover .qicon{ transform:scale(1.08); }
.qlabel{ font-size:13px; font-weight:700; color:#fff; background:rgba(22,32,58,.9); padding:7px 13px; border-radius:8px;
  white-space:nowrap; box-shadow:var(--shadow-sm); opacity:0; transform:translateX(8px); transition:.18s var(--ease); }
.qitem:hover .qlabel{ opacity:1; transform:none; }
.qitem.phone .qicon{ background:var(--brand-default); color:#fff; }
.qitem.kakao .qicon{ background:#FEE500; }
.qitem.youtube .qicon{ background:#FF0000; }
.qitem.blog .qicon{ background:#03C75A; }
.qitem.blog .blog-wm{ color:#fff; font-size:14px; font-weight:800; letter-spacing:-.02em; }
.qitem.ai .qicon{ background:#fff; border:1px solid var(--border); }
.qitem.ai .qicon img{ width:36px; height:36px; }
/* top */
.qbtn.top{ width:46px; height:46px; border-radius:50%; background:#fff; border:1px solid var(--border);
  box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; color:var(--navy); transition:.2s var(--ease); }
.qbtn.top:hover{ border-color:var(--navy); color:var(--brand-default); transform:translateY(-2px); }
.qnav .top.hide{ opacity:0; pointer-events:none; transform:translateY(8px); }
@media (max-width:560px){
  .qnav{ right:12px; bottom:18px; }
  .qnav-trigger{ width:54px; height:54px; } .qnav-trigger img{ width:36px; height:36px; }
  .qicon{ width:48px; height:48px; }
  .qbtn.top{ width:42px; height:42px; }
}

/* ---------------- PRE-CHECK head + AI foot ---------------- */
.precheck-head{ margin-bottom:clamp(28px,4vw,40px); }
.precheck-head .eyebrow{ position:relative; display:inline-block; padding-bottom:13px; }
.precheck-head .eyebrow::after{ content:""; position:absolute; left:0; bottom:0; width:40px; height:3px; background:var(--brand-default); border-radius:2px; }
.ai-foot{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--c-default); }
.ai-foot svg{ width:15px; height:15px; color:var(--brand-default); flex:none; }

/* ---------------- CASES (filter + photo cards) ---------------- */
.case-filter{ justify-content:center; margin-top:30px; }
.casecard .thumb{ height:188px; overflow:hidden; }
.casecard .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.casecard:hover .thumb img{ transform:scale(1.04); }
.ctags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cfoot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--bg-subtle); display:flex; align-items:center; }
.cdate{ font-size:12.5px; color:var(--c-subtle); }

/* ---------------- CONTACT (AI service tiles) ---------------- */
.ai-open{ display:flex; align-items:center; gap:6px; margin-top:10px; color:var(--c-subtle); }
.ai-open svg{ flex:none; }
.ch-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:24px; }
.ch-tile{ background:var(--bg-muted); border:1px solid var(--border); border-radius:var(--r); padding:16px 8px; text-align:center; }
.ch-tile .ci{ display:inline-flex; color:var(--brand-default); }
.ch-tile .ci svg{ width:22px; height:22px; }
.ch-tile .ct{ font-size:13.5px; font-weight:700; color:var(--c-strong); margin-top:9px; }
.ch-tile .cs{ font-size:11.5px; color:var(--c-default); margin-top:3px; }
.whychk .benefit{ align-items:flex-start; }
.benefit .bl small{ display:block; font-size:11px; font-weight:400; color:var(--c-default); margin-top:2px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){ .vgrid{ grid-template-columns:repeat(2,1fr); } .about-sec .vgrid{ grid-template-columns:repeat(2,1fr); } .about-content{ max-width:100%; } .about-docs-bg{ opacity:.32; width:60%; } }
@media (max-width:920px){
  .split,.field-body,.contact-grid,.about-grid{ grid-template-columns:1fr; }
  .about-photo{ min-height:240px; }
  .steps{ grid-template-columns:repeat(3,1fr); gap:32px 0; }
  .steps::before,.steps .prog{ display:none; }
  .cases-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .staff-wm span{ font-size:110px; }
}
@media (max-width:560px){
  .vgrid{ grid-template-columns:1fr; }
  .form-2{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr; }
  .ch-tiles{ grid-template-columns:1fr 1fr; }
  .about-sec .vgrid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .review-track{ animation:none; }
  .review-marquee{ overflow-x:auto; }
}