/* ==========================================================================
   안녕소프트 · 새 디자인 시스템 (v2) — 2026-08-08
   기존 Hyperspace 템플릿과 완전히 분리된 새 껍데기.
   원칙: 그림자보다 선, 장식보다 여백, 강조색은 파랑 하나.
   ========================================================================== */

:root{
  /* 색 */
  --ink:      #0B0F14;   /* 제목 */
  --body:     #3D4A5C;   /* 본문 */
  --muted:    #55647A;   /* 보조 — 옅은 파랑 배경에서도 대비 4.5 이상 */
  --line:     #E6EAF0;   /* 선 */
  --line-soft:#F0F3F8;
  --bg:       #FFFFFF;
  --bg-soft:  #F7F9FC;   /* 흰색과 거의 같은 아주 옅은 회색. 섹션 구분용 */
  --blue:     #2145FF;
  --blue-dk:  #1B39D1;
  --blue-lt:  #EFF2FF;

  /* 형태 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* 리듬 */
  --sec-y: clamp(68px, 8vw, 124px);
  --gap:   clamp(18px, 2.2vw, 26px);
  --container: min(1240px, 94%);
}

.v2, .v2 *, .v2 *::before, .v2 *::after{ box-sizing: border-box; }

.v2{
  margin:0;
  background: var(--bg);
  color: var(--body);
  font-family: 'Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;   /* 한글 단어가 어색하게 잘리지 않도록 */
}

.v2 h1,.v2 h2,.v2 h3,.v2 h4{
  color: var(--ink); margin:0;
  line-height:1.28; letter-spacing:-0.032em; font-weight:800;
}
.v2 p{ margin:0; }
.v2 a{ text-decoration: none; }
.v2 a:not([class]){ color: inherit; }
.v2 img{ max-width:100%; height:auto; display:block; }

/* ---------- 레이아웃 ---------- */
.v2-container{ width: var(--container); margin-inline: auto; }
.v2-section{ padding-block: var(--sec-y); }
.v2-section.is-soft{ background: var(--bg-soft); }
.v2-section.is-tint{ background: var(--blue-lt); }

/* 섹션 머리 */
.v2-head{ max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.v2 .v2-eyebrow{
  display:inline-block; margin-bottom:14px;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color: var(--blue-dk);
}
.v2-h2{ font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
.v2-lead{ margin-top:16px; font-size: clamp(1rem, 1.2vw, 1.09rem); color: var(--muted); }

/* ---------- 버튼 ---------- */
.v2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 24px; border-radius: var(--r-pill);
  font-weight:700; font-size:.97rem; letter-spacing:-0.01em;
  border:1px solid transparent; cursor:pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.v2 .v2-btn-primary{ background: var(--blue); color:#fff; }
.v2 .v2-btn-primary:hover{ background: var(--blue-dk); transform: translateY(-1px); }
.v2 .v2-btn-ghost{ border-color: var(--line); color: var(--ink); background:#fff; }
.v2 .v2-btn-ghost:hover{ border-color: var(--blue); color: var(--blue); }
.v2 .v2-btn-line{ border-color: var(--line); color: var(--ink); background:#fff; }
.v2 .v2-btn-line:hover{ border-color: var(--blue); color: var(--blue); }
.v2-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 32px; }

/* ---------- 히어로 ---------- */
.v2-hero{
  position:relative; overflow:hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(72px, 9vw, 132px);
}
.v2-hero::after{  /* 오른쪽 위 옅은 파랑 한 점만 */
  content:''; position:absolute; right:-10%; top:-40%;
  width: 640px; height: 640px; border-radius:50%;
  background: radial-gradient(circle, rgba(33,69,255,.10), transparent 70%);
  pointer-events:none;
}
.v2-hero .v2-container{ position:relative; z-index:1; }
.v2-hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; margin-bottom:26px;
  border:1px solid #D7DDFF; border-radius: var(--r-pill);
  background: var(--blue-lt);
  font-size:.84rem; font-weight:700; color: var(--blue-dk);
}
.v2-hero h1{
  color: var(--ink);
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  letter-spacing:-0.042em; line-height:1.2;
  max-width: 17ch;
}
.v2-hero-desc{
  margin-top:24px; max-width: 62ch;
  font-size: clamp(1rem, 1.25vw, 1.14rem); line-height:1.85; color: var(--muted);
}
.v2-hero-stats{
  display:flex; flex-wrap:wrap; gap: clamp(24px, 4vw, 56px);
  margin-top: 52px; padding-top: 30px;
  border-top:1px solid var(--line);
}
.v2-stat b{ display:block; color: var(--ink); font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight:800; letter-spacing:-.03em; }
.v2-stat span{ font-size:.88rem; color: var(--muted); }

/* ---------- 카드 그리드 ---------- */
.v2-grid{ display:grid; gap: var(--gap); }
.v2-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.v2-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }

.v2-card{
  display:flex; flex-direction:column; gap:12px;
  padding: clamp(22px, 2.2vw, 30px);
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.v2-card:hover{
  border-color:#C4CEFF; transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(16,24,40,.08);
}
.v2-card-ico{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--blue-lt); color: var(--blue-dk);  /* --blue 는 옅은 파랑 위에서 4.32 (모바일 17px 기준 미달) */
  font-size:1.05rem; font-weight:800;
}
.v2-card h3{ font-size:1.16rem; letter-spacing:-.024em; }
.v2-card p{ color: var(--muted); font-size:.95rem; line-height:1.72; }
.v2 .v2-card-more{ margin-top:auto; padding-top:8px; color: var(--blue-dk); font-weight:700; font-size:.9rem; }

.v2 .v2-tag{
  align-self:flex-start;
  padding:5px 11px; border-radius: var(--r-pill);
  background: var(--blue-lt); color: var(--blue-dk);
  font-size:.76rem; font-weight:800; letter-spacing:-.01em;
}

/* ---------- 번호 목록(프로세스) ---------- */
.v2-steps{ display:grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.v2-step{ padding-top:22px; border-top:2px solid var(--line); counter-increment: step; }
.v2-step::before{
  content: counter(step, decimal-leading-zero);
  display:block; margin-bottom:10px;
  font-size:.86rem; font-weight:800; color: var(--blue-dk); letter-spacing:.06em;
}
.v2-step h3{ font-size:1.06rem; margin-bottom:8px; }
.v2-step p{ color: var(--muted); font-size:.93rem; line-height:1.7; }

/* ---------- FAQ ---------- */
.v2-faq{ border-top:1px solid var(--line); }
.v2-faq details{ border-bottom:1px solid var(--line); }
.v2-faq summary{
  display:flex; align-items:flex-start; gap:14px;
  padding: 24px 0; cursor:pointer; list-style:none;
  font-weight:700; color: var(--ink); font-size:1.05rem; letter-spacing:-.022em;
}
.v2-faq summary::-webkit-details-marker{ display:none; }
.v2-faq summary::after{
  content:'+'; margin-left:auto; flex:0 0 auto;
  font-size:1.4rem; font-weight:400; color: var(--muted); line-height:1;
  transition: transform .18s ease;
}
/* faqui_20260814 — 45도 회전은 '+' 를 '×' 로 만든다. '×' 는 닫기·삭제의 기호다.
   서비스 페이지(page-v2.css)와 같이 '−' 를 쓴다. */
.v2-faq details[open] summary::after{ content:'\2212'; }
.v2-faq .v2-faq-a{ padding: 0 0 26px; color: var(--muted); font-size:.99rem; max-width: 82ch; }

/* ---------- 마무리 CTA ---------- */
.v2-cta{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding: clamp(34px, 4vw, 52px);
  border-radius: var(--r-lg);
  background: var(--blue);
  color:#fff;
}
.v2-cta h2{ color:#fff; font-size: clamp(1.4rem, 2.3vw, 2rem); }
.v2-cta p{ margin-top:10px; color:#F5F7FF; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px){
  .v2-grid.cols-3, .v2-steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px){
  .v2{ font-size:16px; }
  .v2-grid.cols-3, .v2-grid.cols-2, .v2-steps{ grid-template-columns: 1fr; }
  .v2-hero h1{ max-width:none; }
  .v2-actions .v2-btn{ flex:1 1 100%; }
}

/* ==========================================================================
   v2 고도화 — 섹션 리듬 / 이미지 자리 / 푸터 / 디테일
   ========================================================================== */

/* ---------- 접근성: 키보드 포커스 ---------- */
.v2 a:focus-visible, .v2 button:focus-visible, .v2 summary:focus-visible{
  outline: 3px solid #9FAFFF; outline-offset: 3px; border-radius: 8px;
}

/* ---------- 이미지 자리 (교체 전까지 설계된 빈칸으로 보이게) ---------- */
.v2-visual{
  position:relative; overflow:hidden;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, #F5F7FF 0%, #EBEEFF 100%);
  border:1px solid #DBE1FF;
  aspect-ratio: 4 / 3;
  display:flex; align-items:center; justify-content:center;
}
.v2-visual > img{ width:100%; height:100%; object-fit:cover; }
.v2-visual[data-label]::after{
  content: attr(data-label);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:8px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.86); border:1px dashed #B5C1FF;
  color: var(--blue-dk); font-size:.82rem; font-weight:700; white-space:nowrap;
}
/* 라벨은 "비어 있을 때만" 보여준다. :has() 는 Firefox 121+ 라 미지원 브라우저에서
   이미지를 넣어도 라벨이 안 사라지는 사고가 난다. :empty 는 사실상 전 브라우저 지원. */
.v2-visual[data-label]:not(:empty)::after{ content:none; }
.v2-visual[data-label]:not(:empty){ border:0; background:none; }  /* [data-label] 을 같이 써야 한다: 라벨 규칙이 (0,2,1) 이라 :has 만으로는 (0,1,2) 로 진다 */
.v2-visual.is-tall{ aspect-ratio: 3 / 4; }
.v2-visual.is-wide{ aspect-ratio: 16 / 10; }

/* ---------- 히어로 2단 ---------- */
.v2-hero-grid{
  display:grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(32px, 5vw, 72px); align-items:center;
}
.v2-hero h1{ max-width: 15ch; }

/* ---------- 신뢰 띠 ---------- */
.v2-trust{ border-bottom:1px solid var(--line); background: var(--bg-soft); }
.v2-trust-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap: clamp(16px,3vw,44px);
  padding-block: 22px;
}
.v2-trust p{ font-size:.86rem; font-weight:700; color: var(--muted); letter-spacing:.02em; }
.v2-trust ul{ display:flex; flex-wrap:wrap; gap: clamp(12px,2.4vw,32px); margin:0; padding:0; list-style:none; }
.v2-trust li{ font-size:.92rem; font-weight:700; color: var(--ink); }

/* ---------- 번갈아 나오는 상세 블록 ---------- */
.v2-feature{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px); align-items:center;
}
.v2-feature + .v2-feature{ margin-top: clamp(56px, 7vw, 104px); }
.v2-feature.is-flip .v2-feature-text{ order:2; }
.v2-feature h3{ font-size: clamp(1.4rem, 2.3vw, 2rem); letter-spacing:-.032em; }
.v2-feature p{ margin-top:16px; color: var(--muted); }
.v2-feature ul{ margin:24px 0 0; padding:0; list-style:none; display:grid; gap:12px; }
.v2-feature li{ position:relative; padding-left:26px; font-size:.97rem; color: var(--body); }
.v2-feature li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:8px; height:8px; border-radius:50%; background: var(--blue);
}

/* ---------- 사례: 이미지가 있는 큰 카드 ---------- */
.v2-case{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.v2-case .v2-visual{ border:0; border-radius:0; aspect-ratio:16/10; }
.v2-case-body{ display:flex; flex-direction:column; gap:11px; padding: clamp(20px,2vw,26px); }

/* ---------- 프로세스: 가로 타임라인 ---------- */
.v2-timeline{ position:relative; display:grid; grid-template-columns: repeat(6, 1fr); gap:14px; }
.v2-timeline::before{
  content:''; position:absolute; left:0; right:0; top:13px; height:2px; background: var(--line);
}
.v2-tl{ position:relative; padding-top: 40px; }
.v2-tl::before{
  content:''; position:absolute; left:0; top:7px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--blue);
}
.v2-tl b{ display:block; font-size:.78rem; font-weight:800; color: var(--blue-dk); letter-spacing:.08em; margin-bottom:6px; }
.v2-tl h3{ font-size:1rem; margin-bottom:7px; letter-spacing:-.02em; }
.v2-tl p{ font-size:.88rem; color: var(--muted); line-height:1.65; }

/* ---------- 푸터 ---------- */
.v2-footer{ background:#0F1720; color:#9FB2C9; padding-block: clamp(48px,6vw,72px) 0; }
.v2-footer a{ color:#C6D4E6; }
.v2-footer a:hover{ color:#fff; }
.v2-foot-grid{
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(24px,3vw,48px);
  padding-bottom: clamp(36px,4vw,52px);
}
.v2-footer h3, .v2-footer h4{ color:#fff; font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.v2-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.92rem; }
.v2-foot-about p{ font-size:.93rem; line-height:1.8; color:#8FA3BC; max-width:34ch; }
.v2-foot-logo{ margin-bottom:18px; }
.v2-foot-logo img{ height:26px; width:auto; }
.v2-foot-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding-block: 22px 30px;
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center;
  font-size:.84rem; color:#7D91AB;
}

/* ---------- 스크롤 시 헤더 그림자 ---------- */
.gnb.is-scrolled{ box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(9,14,22,.35); }

/* ---------- 등장 효과 (아주 약하게) ---------- */
.v2-reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.v2-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .v2-reveal{ opacity:1; transform:none; transition:none; }
  .v2 *{ scroll-behavior:auto !important; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1024px){
  .v2-hero-grid{ grid-template-columns: 1fr; }
  .v2-hero h1{ max-width: 18ch; }
  .v2-timeline{ grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .v2-timeline::before{ display:none; }
  .v2-tl{ padding-top: 34px; }
  .v2-foot-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .v2-feature, .v2-timeline{ grid-template-columns: 1fr; }
  .v2-feature.is-flip .v2-feature-text{ order:0; }
  .v2-foot-grid{ grid-template-columns: 1fr; }
  .v2-trust-inner{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ---------- 모바일 터치 영역 확보 ----------
   손가락으로 누르는 화면에서 글자 높이(18px)만큼만 눌리면 오조작이 난다.
   푸터 링크와 로고의 탭 영역을 40px 이상으로 넓힌다. */
@media (max-width: 1024px){
  .v2-footer ul{ gap: 2px; }
  .v2-footer ul a{
    display:inline-block; padding: 11px 0; min-height: 40px;
  }
  .v2-footer ul li{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
}
.gnb .gnb-logo{ padding-block: 8px; }

/* ---------- 회사소개 강점 ---------- */
.v2-why{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); }
.v2-why-item{ padding-top:22px; border-top:2px solid var(--blue); }
.v2-why-item h3{ font-size:1.05rem; margin-bottom:9px; }
.v2-why-item p{ font-size:.93rem; color: var(--muted); line-height:1.7; }

/* ---------- NEWS ---------- */
.v2-news{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.v2-news a{
  display:flex; flex-direction:column; gap:10px;
  padding: 22px 0 20px; border-top:1px solid var(--line);
  transition: border-color .16s ease;
}
.v2-news a:hover{ border-color: var(--blue); }
.v2-news a:hover h3{ color: var(--blue-dk); }
.v2-news span{ font-size:.78rem; font-weight:800; letter-spacing:.1em; color: var(--muted); text-transform:uppercase; }
.v2-news h3{ font-size:1.02rem; line-height:1.55; letter-spacing:-.022em; transition: color .16s ease; }

/* ---------- 상담 ---------- */
.v2-contact{ display:grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px,5vw,72px); align-items:start; }
.v2-persons{ display:grid; gap:14px; margin-top:26px; }
.v2-person{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  padding:18px 20px; border:1px solid var(--line); border-radius: var(--r-md); background:#fff;
}
.v2-person b{ color: var(--ink); font-size:.98rem; }
.v2-person em{ font-style:normal; font-size:.88rem; color: var(--muted); flex:1 1 100%; }
.v2-person a{ color: var(--blue-dk); font-weight:800; font-size:.98rem; }

.v2-form{ padding: clamp(24px,3vw,34px); border:1px solid var(--line); border-radius: var(--r-lg); background:#fff; }
.v2-field{ margin-bottom:18px; }
.v2-field label{ display:block; margin-bottom:8px; font-size:.9rem; font-weight:700; color: var(--ink); }
.v2-label-note{ margin-left:6px; color:var(--muted); font-size:.82rem; font-weight:600; }
.v2-field input, .v2-field textarea, .v2-field select{
  width:100%; padding:13px 15px;
  border:1px solid var(--line); border-radius: var(--r-sm);
  background:#fff; color: var(--ink);
  font-family: inherit; font-size:.97rem; line-height:1.6;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v2-field input:focus, .v2-field textarea:focus, .v2-field select:focus{
  outline:none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33,69,255,.14);
}
.v2-field textarea{ resize: vertical; min-height: 132px; }
.v2-form-note{ margin-top:14px; font-size:.84rem; color: var(--muted); }
.v2-form-msg{ margin-top:14px; font-size:.92rem; font-weight:700; display:none; }
.v2-form-msg.is-ok{ display:block; color:#0F7B4F; }
.v2-form-msg.is-err{ display:block; color:#C0362C; }
.v2 .v2-btn[disabled]{ opacity:.6; cursor:not-allowed; }

@media (max-width: 1024px){
  .v2-why{ grid-template-columns: repeat(2,1fr); }
  .v2-news{ grid-template-columns: repeat(2,1fr); }
  .v2-contact{ grid-template-columns: 1fr; }
}
@media (max-width: 680px){
  .v2-why, .v2-news{ grid-template-columns: 1fr; }
}

/* ---------- 언론 보도 ----------
   기사는 고객에겐 제3자 검증이고, 답변엔진에겐 외부 출처다.
   건수가 많지 않으므로 과장 없이 담백하게 한 줄로 보여준다. */
.v2-press:first-of-type{ margin-top: clamp(28px,3.5vw,42px); }
.v2-press{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px;
  padding: 22px 26px; margin-top: 14px;
  border:1px solid var(--line); border-radius: var(--r-lg); background:#fff;
}
.v2-press-label{
  flex:0 0 auto; padding:5px 11px; border-radius: var(--r-pill);
  background: var(--blue-lt); color: var(--blue-dk);
  font-size:.76rem; font-weight:800; letter-spacing:.02em;
}
.v2-press-main{ flex:1 1 380px; min-width:0; }
.v2-press-main a{ color: var(--ink); font-weight:700; font-size:1.02rem; letter-spacing:-.022em; line-height:1.5; }
.v2-press-main a:hover{ color: var(--blue-dk); text-decoration: underline; text-underline-offset:3px; }
.v2-press-meta{ margin-top:7px; font-size:.86rem; color: var(--muted); }
.v2-press-meta a{ color: var(--muted); }
.v2-press-meta a:hover{ color: var(--blue-dk); }
@media (max-width:680px){
  .v2-press{ flex-direction:column; align-items:flex-start; gap:12px; padding:20px; }
}

/* 모바일에서 언론 링크 탭 영역 확보 (글자 높이 20px 로는 누르기 어렵다) */
@media (max-width: 1024px){
  .v2-press-main a{ display:inline-block; padding: 9px 0; min-height: 40px; }
  .v2-press-meta{ line-height: 2.1; }
  .v2-press-meta a{ padding: 8px 6px; }   /* 짧은 매체명("KICN")도 40px 폭이 나오도록 */
}

/* 전화번호는 모바일에서 가장 많이 눌리는 링크다. 탭 영역을 넉넉히. */
@media (max-width: 1024px){
  .v2-person a{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; }
  .v2-person{ padding-block: 14px; }
}

/* iOS 는 입력칸 글자가 16px 미만이면 포커스 시 화면을 확대해 버린다.
   확대되면 레이아웃이 튀고 사용자가 다시 축소해야 한다. 모바일에서는 16px 이상 유지. */
@media (max-width: 1024px){
  .v2-field input, .v2-field textarea, .v2 select{ font-size: 16px; }
}

/* ==========================================================================
   v2.1 — "심플하지만 강단 있게"
   원칙 세 가지
   1) 장식 대신 타이포로 압도한다 (크게, 자간은 더 조이게)
   2) 선을 없애고 면으로 구분한다 (1px 테두리는 형태를 흐리게 만든다)
   3) 파랑은 한 화면에 한 곳만. 대신 먹색 블록으로 강약을 만든다
   ========================================================================== */

:root{
  --ink-block: #0C1116;   /* 강조용 먹색 — 새 색이 아니라 --ink 계열의 더 진한 톤 */
}

/* ---------- 1) 타이포를 키우고 조인다 ---------- */
.v2-hero h1{
  font-size: clamp(2.5rem, 6.2vw, 4.9rem);
  letter-spacing: -0.055em;
  line-height: 1.04;
  font-weight: 800;
  max-width: 14ch;
}
.v2-hero-desc{
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.75;
  max-width: 54ch;
  margin-top: 28px;
}
.v2-h2{
  font-size: clamp(2rem, 3.9vw, 3.15rem);
  letter-spacing: -0.048em;
  line-height: 1.12;
}
.v2-head{ max-width: 820px; }
.v2-lead{ font-size: clamp(1.01rem, 1.25vw, 1.13rem); max-width: 58ch; }
.v2-card h3{ font-size: 1.2rem; letter-spacing: -0.03em; }
.v2-feature h3{ font-size: clamp(1.6rem, 2.7vw, 2.3rem); letter-spacing: -0.042em; }

/* ---------- 2) 테두리를 걷어내고 면으로 ---------- */
.v2-section .v2-card{
  background: var(--bg-soft);
  border: 0;
  border-radius: 18px;
}
.v2-section.is-soft .v2-card{ background: #fff; }
a.v2-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(12,17,22,.10);
  border: 0;
}
.v2-visual{ border: 0; }
.v2-press{ border: 0; background: var(--bg-soft); }
.v2-section.is-soft .v2-press{ background:#fff; }
.v2-form{ border: 0; background: var(--bg-soft); }
.v2-section.is-soft .v2-form{ background:#fff; }
.v2-person{ border: 0; background: var(--bg-soft); }
.v2-section.is-soft .v2-person{ background:#fff; }
.v2-field input, .v2-field textarea, .v2-field select{
  border: 0; background:#fff;
  box-shadow: inset 0 0 0 1px #DDE4EE;
}
.v2-section.is-soft .v2-field input,
.v2-section.is-soft .v2-field textarea,
.v2-section.is-soft .v2-field select{ background: var(--bg-soft); }
.v2-field input:focus, .v2-field textarea:focus, .v2-field select:focus{
  box-shadow: inset 0 0 0 2px var(--blue);
}

/* ---------- 3) 먹색 강조 블록 ---------- */
.v2-section.is-ink{
  background: var(--ink-block);
  color: #A7B4C4;
}
.v2-section.is-ink h2,
.v2-section.is-ink h3,
.v2-section.is-ink .v2-stat b{ color: #fff; }
.v2-section.is-ink .v2-eyebrow{ color: #8C9FFF; }
.v2-section.is-ink .v2-lead{ color: #92A2B6; }
.v2-section.is-ink .v2-tl p{ color: #8DA0B6; }
.v2-section.is-ink .v2-tl b{ color: #8C9FFF; }
.v2-section.is-ink .v2-tl{ border-color: rgba(255,255,255,.14); }
.v2-section.is-ink .v2-timeline::before{ background: rgba(255,255,255,.14); }
.v2-section.is-ink .v2-tl::before{ background: var(--ink-block); border-color:#8C9FFF; }
.v2-section.is-ink .v2-card{ background: rgba(255,255,255,.05); }
.v2-section.is-ink .v2-card p{ color:#93A3B7; }

/* 마무리 CTA 도 먹색으로 — 파랑은 버튼 하나에만 남긴다 */
.v2-cta p{ color: var(--body); }
.v2 .v2-cta .v2-btn-primary{ background: var(--blue); color:#fff; }
.v2 .v2-cta .v2-btn-primary:hover{ background:#3D5CFF; }


/* 신뢰 띠도 선 대신 면으로 */
.v2-trust{ border-bottom: 0; }

@media (max-width: 680px){
  .v2-hero h1{ font-size: clamp(2.1rem, 9vw, 2.9rem); max-width: none; }
}

/* ==========================================================================
   v2.2 — 구성: 어둡게 열고 → 밝게 전개하고 → 어둡게 닫는다
   전체가 연한 톤으로만 이어지니 인상이 흐렸다. 시작과 끝을 먹색으로 눌러
   가운데 흰 구간이 살아나게 만든다. 색을 늘리는 게 아니라 명암만 쓴다.
   ========================================================================== */

/* 섹션 구분이 보이도록 회색을 한 단계 진하게 */
:root{ --bg-soft: #F2F5FA; }

/* ---------- 흰 히어로 (2026-08-08 화이트톤 전환) ----------
   먹색 히어로를 걷어내고 흰 바탕으로 연다. 무게는 색이 아니라 타이포가 잡는다. */
.v2-hero{
  background:#fff;
  border-bottom: 1px solid var(--line);
  color: var(--body);
}
.v2-hero::after{
  background: radial-gradient(circle, rgba(33,69,255,.10), transparent 70%);
  right:-8%; top:-36%; width: 680px; height: 680px;
}
.v2-hero h1{ color: var(--ink); }
.v2-hero-desc{ color: var(--body); }
.v2-hero-tag{
  background: var(--blue-lt);
  border-color: #D9DFFF;
  color: var(--blue-dk);
}
.v2-hero-stats{ border-top-color: var(--line); }
.v2-stat b{ color: var(--ink); }
.v2-stat span{ color: var(--muted); }
.v2 .v2-hero .v2-btn-ghost{
  border-color: #D3DBE6; color: var(--ink); background:#fff;
}
.v2 .v2-hero .v2-btn-ghost:hover{ background: var(--bg-soft); color: var(--ink); }
/* 히어로가 밝아졌으므로 이미지 자리도 밝은 테마로 되돌린다 */
.v2-hero .v2-visual{
  background: linear-gradient(135deg,#F5F7FF 0%,#EBEEFF 100%);
  border: 1px dashed #B5C1FF;
}
.v2-hero .v2-visual[data-label]::after{
  background: rgba(255,255,255,.9);
  border-color:#B5C1FF;
  color: var(--blue-dk);
}

/* 히어로 바로 아래 신뢰 띠는 흰색으로 받아 대비를 만든다 */
.v2-trust{ background:#fff; border-bottom:1px solid var(--line); }

/* ---------- 가운데는 밝게 ----------
   프로세스는 다시 밝은 톤으로 (어두운 블록이 셋이면 무거워진다) */
.v2-section.is-ink{ background: var(--bg-soft); color: var(--body); }
.v2-section.is-ink h2, .v2-section.is-ink h3{ color: var(--ink); }
.v2-section.is-ink .v2-eyebrow{ color: var(--blue-dk); }
.v2-section.is-ink .v2-lead{ color: var(--muted); }
.v2-section.is-ink .v2-tl p{ color: var(--muted); }
.v2-section.is-ink .v2-tl b{ color: var(--blue-dk); }
.v2-section.is-ink .v2-tl{ border-color: var(--line); }
.v2-section.is-ink .v2-timeline::before{ background: var(--line); }
.v2-section.is-ink .v2-tl::before{ background:#fff; border-color: var(--blue); }
.v2-section.is-ink .v2-card{ background:#fff; }
.v2-section.is-ink .v2-card p{ color: var(--muted); }

/* ---------- 마무리 CTA — 흰 톤 유지, 옅은 파랑으로만 구분 ---------- */
.v2-cta{ background: var(--blue-lt); }
.v2-cta h2{ color: var(--ink); }
.v2-cta p{ color: var(--body); }
.v2 .v2-cta .v2-btn-ghost{ border-color:#C3CDFF; color: var(--ink); background:#fff; }
.v2 .v2-cta .v2-btn-ghost:hover{ background:#fff; color: var(--blue-dk); }


/* 임시 이미지 전용 — 비율이 안 맞는 화면 캡처를 잘리지 않게 담는다.
   규격(4:3)에 맞는 이미지를 받으면 마크업에서 is-temp 만 떼면 된다. */
.v2-visual.is-temp{ background:#fff; }
.v2-visual.is-temp > img{ object-fit: contain; padding: 18px; }

/* 실제 구축 화면을 담는 시각 자료 */
.v2-product-visual{
  margin:0;
  background:linear-gradient(145deg,#F6F8FF,#EFF2FF);
  box-shadow:0 28px 70px rgba(20,56,110,.14);
}
.v2-product-visual > img{ object-fit:contain; }
.v2-hero .v2-product-visual{ border:1px solid rgba(33,69,255,.12); }

/* 공개 사례 카드는 오해를 낳는 스톡 이미지 대신 사실 기반 분류표를 사용한다. */
.v2-case-visual{
  justify-content:space-between;
  /* cards_20260814: flex-end 는 번호·라벨을 바닥에 붙여 위 140px 를 죽였다 */
  align-items:center;
  padding:clamp(20px,2.5vw,30px);
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(145deg,#152B9F,#2145FF 58%,#7B90FF);
  color:#fff;
}
.v2-case-visual b{ font-size:clamp(2.2rem,4vw,4rem); line-height:1; letter-spacing:-.06em; opacity:.32; }
.v2-case-visual span{ text-align:right; font-weight:800; line-height:1.35; }

.v2-hero-compact{ padding-block:clamp(48px,6vw,82px); }
.v2-hero-compact h1{ max-width:18ch; }
.v2-form-title{ margin:0 0 6px; font-size:1.35rem; letter-spacing:-.03em; }
.v2-form-intro{ margin:0 0 22px; color:var(--muted); font-size:.92rem; }

@media (max-width:680px){
  .v2-hero-compact{ padding-block:48px; }
  .v2-product-visual{ box-shadow:0 18px 40px rgba(20,56,110,.12); }
}


/* ===== 모바일 세로 압축 (2026-08-08) ===== */
/* 실측: 모바일 문서 높이 17,003px = 화면 21개. 글자는 2,261자뿐인데 세로로만 늘어져 있었다.
   한 화면에 카드가 1.5개씩 들어오니 '읽어도 안 끝나는' 인상을 준다.
   마크업은 그대로 두고 배치만 조인다. */
@media (max-width: 680px){

  /* ① 섹션 위아래 여백 — 12개 섹션에서 가장 크게 절약된다 */
  .v2{ --sec-y: 48px; }
  .v2-section{ padding-block: 48px; }

  /* ② 솔루션·업종 카드는 2열로. 제목이 짧아 375px 에서도 들어간다. */
  .v2-grid.cols-3{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* 구축사례만 1열 유지 — 회사 신뢰의 핵심이라 작게 만들지 않는다 */
  #cases .v2-grid.cols-3{ grid-template-columns: 1fr; gap: 14px; }

  /* ③ 2열 카드 안쪽을 조인다 */
  .v2-grid.cols-3 > .v2-card:not(.v2-case){ padding: 18px 16px; }
  .v2-grid.cols-3 > .v2-card:not(.v2-case) h3{ font-size: 1.02rem; line-height:1.4; }
  .v2-card-ico{ width:36px; height:36px; font-size:.92rem; border-radius:10px; }

  /* ④ 카드 설명은 2줄까지만 보인다. DOM 에는 남으므로 색인에는 영향이 없고,
        자세한 설명은 각 상세 페이지에 있다. */
  .v2-grid.cols-3 > .v2-card:not(.v2-case) p{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; font-size:.9rem; line-height:1.6;
  }

  /* ⑤ 구축사례 이미지는 16:10 → 2:1 로 낮춘다 (카드당 약 45px 절약) */
  #cases .v2-case .v2-visual{ aspect-ratio: 2 / 1; }
  #cases .v2-case p{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* ⑥ 회사소개의 항목 사이 간격 */
  #about .v2-lead{ margin-bottom: 20px; }
}


/* ===== 모바일 2차: 항목 간 여백 (2026-08-08) ===== */
@media (max-width: 680px){

  /* 프로세스 — 항목이 짧다(제목 20px + 설명 23~46px). 2열로 놓고 여백을 줄인다. */
  #process .v2-timeline{ grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  #process .v2-tl{ padding-top: 16px; }
  #process .v2-tl p{ font-size:.88rem; line-height:1.6; }

  /* 뉴스 — 제목 한 줄짜리 항목에 위아래 42px 은 과하다 */
  .v2-news a{ padding: 14px 16px; }
  .v2-news{ gap: 10px; }

  /* 구축사례 카드 본문 — 패딩과 내부 간격을 조인다 */
  #cases .v2-case-body{ padding: 16px; }
  #cases .v2-case-body h3{ margin: 6px 0 6px; font-size:1.04rem; line-height:1.4; }
  #cases .v2-case-body p{ margin: 0 0 10px; font-size:.9rem; line-height:1.6; }
  #cases .v2-tag{ margin-bottom: 2px; }

  /* 회사소개 — 항목 사이 여백 */
  #about .v2-lead{ margin-bottom: 18px; }
  #about h3{ margin-top: 18px; margin-bottom: 4px; }
  #about h3 + p{ margin-top: 0; }

  /* 히어로 — 버튼 사이와 위아래 */
  .v2-hero{ padding-block: 40px 44px; }
  .v2-actions{ gap: 10px; }

  /* 상담 폼 — 입력칸 사이 */
  .v2-field{ margin-bottom: 12px; }
}


/* ===== 언론보도 블록 밀도 (2026-08-08) ===== */
@media (max-width: 680px){
  /* 기사 2건이 926px 를 쓰고 있었다. 탭 영역은 WCAG AA 최소(24px)를 넉넉히 넘기는
     선에서 줄인다 — 앞서 내가 40px 로 과하게 잡아 높이가 불어났다. */
  #about .v2-press{ padding: 14px 16px; gap: 6px; }
  #about .v2-press-label{ font-size:.76rem; margin-bottom: 2px; }
  #about .v2-press-main > a{
    display:block; font-size:1rem; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .v2-press-meta{ line-height: 1.9; font-size:.82rem; }
  .v2-press-meta a{ padding: 5px 6px; }   /* 링크 높이 약 36px — AA 기준 24px 를 넘는다 */
}


/* press-main 빈 줄 제거 */
/* .v2-press-main 이 display:block 이라 자식 사이 공백 텍스트 노드가
   큰 line-height 를 물려받아 빈 줄을 만들었다(자식 합 146px 인데 박스 380px).
   flex 로 바꾸면 공백 노드가 사라지고 gap 으로만 간격이 잡힌다. */
.v2-press-main{ display:flex; flex-direction:column; gap:6px; line-height:1.5; }


/* press 카드 빈 공간 강제 제거 */
/* 언론 카드 안에 자식이 152px 에서 끝나는데 박스가 380px 였다.
   height 를 정하는 규칙도, 가상요소도 못 찾았다(그리드 stretch 도 아님).
   원인 추적보다 결과를 맞추는 쪽이 낫다고 판단해 내용 높이에 맞춰 고정한다.
   fit-content 로 두면 자식이 늘어나도 따라간다. */
@media (max-width: 680px){
  /* 진짜 원인: .v2-press 가 기본 규칙에서 flex-wrap:wrap 인데
     모바일에서 flex-direction:column 으로 바뀌면서 **세로 방향 wrap** 이 됐다.
     column+wrap 은 항목을 여러 열 로 흘리려 하면서 빈 공간을 만든다. nowrap 으로 고정한다. */
  /* 데스크톱에서 같은 블록이 99px 인데 모바일에서 447px 이 됐다.
     차이는 flex-direction 뿐 — column 으로 바뀌면서 부푼다.
     가로(row) 배치를 유지하고 줄바꿈만 허용하면 데스크톱처럼 눕는다. */
  #about .v2-press{ flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
  #about .v2-press-main{ flex: 1 1 100%; height: auto; }
}


/* 매체 링크 글씨 크기 통일 */
/* 매체 링크(우리일보·KICN·다음뉴스)가 주변 메타 문구보다 커 보여 어색했다.
   같은 크기로 맞추고 색·굵기로만 링크임을 표시한다. */
.v2-press-meta a{ font-size: inherit; font-weight: 700; color: var(--blue-dk); }
.v2-press-meta a:hover{ color: var(--blue); text-decoration: underline; }

/* 사례 카드에 실제 그림이 들어온 경우 — 번호 자리표시자용 배경·여백을 걷어낸다 */
.v2 .v2-case-visual.is-photo{ padding:0; background:none; border:0; }
.v2 .v2-case-visual.is-photo > img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* cards_20260814 — 사례 그리드의 마지막 "전체 보기" 칸.
   카드에 justify-content:center 를 줬지만 .v2-card-more 의 margin-top:auto 가
   남은 공간을 전부 먹어 글이 위로 몰리고 링크만 바닥에 떨어져 있었다. */
#cases .v2-card:not(.v2-case) .v2-card-more{ margin-top: 0; }

/* 새 로고 — 푸터 (2026-08-14). 푸터도 먹색이라 흰색. */
.v2-foot-logo{ display:flex; align-items:center; gap:10px; color:#fff; }
.v2-foot-logo .brand-mark{ width:36px; height:23px; flex:0 0 auto; display:block;
  color:#2145FF; }
.v2-foot-logo .brand-word{ font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; }

/* 떠 있는 카카오 상담 버튼 (2026-08-14) — 서비스 페이지와 같은 모양.
   전 페이지 공통이 되도록 여기(v2.css)에 정의한다. */
.float-kakao-wrap{position:fixed;right:16px;bottom:24px;z-index:1000;}
.float-kakao{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;background:#FEE500;color:#111;font-weight:700;font-size:15px;border-radius:9999px;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;position:relative;}
.float-kakao::before{content:"톡";display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#3C1E1E;color:#FEE500;font-weight:900;font-size:13px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.float-kakao:hover{background:#FFD400;transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.22);color:#111;}
@media (max-width:736px){.float-kakao-wrap{left:50%;right:auto;bottom:32px;transform:translateX(-50%);}}

/* 주희님 이미지는 그림자까지 넣은 투명배경 PNG 다 (2026-08-14 요청).
   사이트가 박스를 한 겹 더 씌우면 액자 속 액자가 되고,
   overflow:hidden 은 이미지 자체 그림자를 잘라낸다. 이미지가 든 칸만 껍데기를 벗긴다.
   빈 자리표시 칸은 점선 박스가 있어야 하므로 건드리지 않는다. */
.v2 .v2-visual.is-bare,
.v2 .v2-hero .v2-visual.is-bare,
.v2 .v2-product-visual.is-bare{
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.v2 .v2-visual.is-bare > img{ object-fit: contain; }