@charset "UTF-8";
/* ============================================================
   딥이모션 홈페이지 — 공통 스타일
   4개 페이지(index / service / work / about)가 이 파일 하나를 씁니다.

   [디자인 규칙 4가지]  이것만 지키면 뭘 추가해도 통일됩니다.
   1. 색은 아래 변수 안에서만 고른다
   2. 간격은 --s1~--s7 만 쓴다 (8의 배수)
   3. 모서리는 --r(12px) 또는 --R(20px) 둘 중 하나
   4. 그림자를 쓰지 않는다. 구분은 면 색(--panel)이나 선(--line)으로
   ============================================================ */

:root{
  --paper:#FAF8F3;   /* 페이지 바탕 — 따뜻한 종이 */
  --panel:#F1ECE3;   /* 패널·강조 블록 바탕 */
  --ink:#221E19;     /* 제목 — 네이비가 아니라 따뜻한 먹빛 */
  --body:#57514A;    /* 본문 */
  --muted:#948C80;   /* 라벨·보조 */
  --line:#E4DDD0;    /* 선 */

  /* 강조 — 짙은 녹색. 원칙: 돈이 되는 자리(상담 버튼)에만 쓴다. */
  --accent:#2F5A45;
  --accent-dk:#2A5240;  /* 밝은 바탕 위 글자용 */
  --accent-br:#7AB08F;  /* 어두운 바탕 위 · 발광 */
  --accent-hv:#264A39;  /* 버튼 마우스 올렸을 때 */
  --hero-panel:#F1ECE3; /* 히어로 일러스트 패널 (그림 배경색과 동일) */

  /* 이전 이름들 — 기존 규칙이 그대로 동작하도록 별칭만 유지 */
  --teal:var(--accent); --teal-dk:var(--accent-dk); --teal-br:var(--accent-br);
  --sage:var(--accent);
  --slate:#7A6A5B;

  --r:12px; --R:20px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px;
  --wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--paper);color:var(--body);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic','맑은 고딕',sans-serif;
  font-size:16px;line-height:1.8;letter-spacing:-.012em;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* 아주 옅은 종이 질감. 완전히 평평한 화면이 '기계가 만든 것'처럼 보이는 걸 막아준다. */
body::before{content:'';position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s3)}
.narrow{max-width:760px}
section{padding:var(--s7) 0}
@media(max-width:768px){section{padding:var(--s6) 0}}
.band{background:var(--panel)}

/* ---------- 타이포 (6단계 고정) ---------- */
.eyebrow{font-size:12.5px;letter-spacing:.04em;color:var(--muted);font-weight:600;text-transform:uppercase}
/* 제목은 일부러 스케일 밖으로 — 본문과의 격차를 벌린다 */
.h1{font-size:clamp(34px,5.6vw,60px);line-height:1.22;font-weight:800;color:var(--ink);letter-spacing:-.048em}
.h2{font-size:clamp(24px,3vw,34px);line-height:1.35;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.h3{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.55}
.lead{font-size:17px;line-height:1.85;color:var(--body)}
.small{font-size:14px;color:var(--muted);line-height:1.7}
.sec-head{margin-bottom:var(--s5)}
.sec-head .h2{margin-top:var(--s2)}
.sec-head .lead{margin-top:var(--s3);max-width:42em}

/* ---------- 헤더 ---------- */
/* 상단 메뉴 — 로고(홈) 왼쪽 · 메뉴 가운데 · 문의 버튼 오른쪽. 지금 페이지는 녹색 글자 + 밑줄 */
header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(250,248,243,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{max-width:1400px;margin:0 auto;padding:0 clamp(20px,3vw,40px);height:76px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3)}
.nav .logo{justify-self:start}
.nav .logo img{display:block;width:168px;height:auto}
.nav ul{display:flex;align-self:stretch;gap:clamp(28px,4.6vw,68px)}
.nav ul li{display:flex}
.nav ul a{position:relative;display:flex;align-items:center;padding:0 2px;
  font-size:16px;font-weight:500;color:var(--body);transition:color .2s}
.nav ul a::after{content:'';position:absolute;left:-8px;right:-8px;bottom:-1px;height:3px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transition:transform .3s}
.nav ul a:hover{color:var(--ink)}
.nav ul a.on{color:var(--accent);font-weight:700}
.nav ul a.on::after{transform:scaleX(1)}
/* 오른쪽 문의 버튼 — 메뉴 중 유일하게 채워진 버튼 */
.nav .nav-cta{justify-self:end;display:inline-flex;align-items:center;border-radius:10px;background:var(--ink);color:#fff;
  padding:11px 20px;font-size:15.5px;font-weight:700;transition:background .2s}
.nav .nav-cta:hover{background:#3A332B}
/* 모바일 — 윗줄: 로고 · 문의 버튼 / 아랫줄: 메뉴 넷 */
@media(max-width:768px){
  html{scroll-padding-top:116px}
  .nav{height:auto;grid-template-columns:auto 1fr;grid-template-areas:"logo cta" "menu menu";row-gap:2px;padding-top:10px}
  .nav .logo{grid-area:logo}.nav .logo img{width:124px}
  .nav .nav-cta{grid-area:cta;padding:8px 14px;font-size:13.5px;border-radius:8px}
  .nav ul{grid-area:menu;justify-content:space-between;height:42px;gap:0}
  .nav ul a{font-size:14.5px}
  .nav ul a::after{left:-4px;right:-4px}
}

/* ---------- 히어로 ---------- */
.hero{padding:calc(76px + var(--s7)) 0 var(--s7);overflow-x:hidden;overflow-x:clip}
.hero.sub{padding:calc(76px + var(--s6)) 0 var(--s6)}
@media(max-width:768px){
  .hero{padding:calc(98px + var(--s6)) 0 var(--s6)}
  .hero.sub{padding:calc(98px + var(--s5)) 0 var(--s5)}
}
.hero .h1{max-width:15em}
.hero .lead{margin-top:var(--s4);max-width:34em}
.rule{width:44px;height:2px;background:var(--ink);opacity:.85;margin-bottom:var(--s4)}
.h1 .ac{color:var(--teal-dk)}

/* ---------- 홈 히어로 : 글 + 일러스트 2단 ---------- */
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:var(--s5);align-items:center}
@media(max-width:768px){.hero-grid{grid-template-columns:1fr;gap:var(--s4)}}
.hero-grid .h1{max-width:none;font-size:clamp(30px,4.2vw,60px)}
.hero-grid .lead{margin-top:var(--s3)}
.eyebrow.ac{color:var(--body);text-transform:none;letter-spacing:0;font-size:14px}

.btn-lg{display:inline-flex;align-items:center;gap:14px;background:var(--accent);color:#fff;
  padding:17px 28px;border-radius:12px;font-size:16px;font-weight:600;margin-top:var(--s4);
  transition:transform .25s,box-shadow .25s}
.btn-lg:hover{transform:translateY(-2px);background:var(--accent-hv)}
.btn-lg svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn-lg:hover svg{transform:translateX(4px)}

/* 일러스트 패널 — 라벨은 % 좌표라 크기가 바뀌어도 따라갑니다 */
.hero-art{position:relative;border-radius:var(--R);overflow:hidden;background:var(--hero-panel)}
.hero-art img{width:100%;height:auto;display:block}
/* 넓은 화면에서는 오른쪽 화면 밖으로 흘려보낸다 — 대칭을 한 군데 깨는 자리 */
@media(min-width:769px){
  .hero-grid{grid-template-columns:1fr 1.18fr}
  .hero-art{margin-right:max(-300px, min(0px, calc((1080px - 100vw) / 2 - 24px)));
    border-radius:var(--R) 0 0 var(--R)}
}
.hero-art .lb{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:clamp(10px,1.05vw,13.5px);font-weight:500;color:#4F4841;
  background:rgba(252,250,245,.86);padding:3px 9px;border-radius:7px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hero-cap{display:flex;align-items:center;gap:12px;margin-top:var(--s3);
  font-size:13.5px;color:var(--muted)}
.hero-cap::before{content:'';width:1px;height:20px;background:var(--line)}

/* 연결부가 천천히 숨 쉬는 느낌 — 좌표를 몰라도 되는 방식 */
@keyframes artPulse{0%,100%{opacity:.0}50%{opacity:.16}}
.hero-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%, var(--teal-br) 0%, transparent 42%);
  animation:artPulse 4.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hero-art::after{animation:none;opacity:0}}

/* ---------- 2단 (하는 일) ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
@media(max-width:768px){.two{grid-template-columns:1fr}}
.job .no{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.job .h2{font-size:26px;margin:var(--s2) 0}
.job p{font-size:16px}
.job ul{margin-top:var(--s3);border-top:1px solid var(--line)}
.job li{font-size:15px;padding:12px 0;border-bottom:1px solid var(--line)}
.more{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s3);
  font-size:14.5px;font-weight:600;color:var(--ink)}
.more::after{content:'→';transition:transform .25s}
.more:hover::after{transform:translateX(4px)}

/* ---------- 사례 목록 (홈) ---------- */
.cases{margin-top:var(--s5);border-top:1px solid var(--line)}
.case-row{display:grid;grid-template-columns:200px 1fr auto;gap:var(--s4);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--line);transition:padding-left .35s}
.case-row:hover{padding-left:10px}
@media(max-width:768px){.case-row{grid-template-columns:1fr;gap:10px;padding:var(--s3) 0}}
.case-row .who .h3{margin-bottom:2px}
.case-row .what{font-size:15.5px;line-height:1.75}
.case-row .since{font-size:13px;color:var(--muted);white-space:nowrap}
@media(max-width:768px){.case-row .since{order:-1}}

/* ---------- 사례 상세 (사례 페이지) ---------- */
.case{border-top:1px solid var(--line);padding:var(--s5) 0;
  display:grid;grid-template-columns:240px 1fr;gap:var(--s4)}
.case:last-of-type{border-bottom:1px solid var(--line)}
@media(max-width:768px){.case{grid-template-columns:1fr;gap:var(--s2);padding:var(--s4) 0}}
.case .meta .h3{margin-bottom:4px}
.case .since{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--slate)}
.case .role{font-size:17px;color:var(--ink);font-weight:600;line-height:1.65;margin-bottom:var(--s2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.chips span{background:var(--panel);border-radius:8px;padding:6px 13px;font-size:13.5px;color:var(--body)}
.note{margin-top:var(--s3);border-left:2px solid var(--ink);padding:2px 0 2px var(--s2);
  font-size:15px;color:var(--ink)}

/* ---------- 지난 작업 (썸네일 그리드) ---------- */
.works{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3) var(--s2);margin-top:var(--s4)}
@media(max-width:768px){.works{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.works{grid-template-columns:repeat(2,1fr)}}
.work{text-align:left}
.work img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line);filter:saturate(.9);transition:filter .35s,transform .35s}
.work:hover img{filter:saturate(1);transform:translateY(-3px)}
.work b{display:block;margin-top:12px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.5}
.work span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}

/* ---------- 인용 ---------- */
.quote{max-width:720px;margin:0 auto;text-align:center}
.quote p.q{font-size:clamp(20px,2.6vw,27px);line-height:1.65;color:var(--ink);font-weight:600;letter-spacing:-.03em}
.quote .by{margin-top:var(--s3);font-size:14px;color:var(--muted)}

/* ---------- 제품 카드 ---------- */
.products{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.products.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.products.three{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.products,.products.three{grid-template-columns:1fr}}
.product{background:var(--paper);border:1px solid var(--line);border-radius:var(--R);
  padding:var(--s4);position:relative;transition:border-color .3s}
.product:hover{border-color:var(--ink)}
.product .status{position:absolute;top:var(--s3);right:var(--s3);font-size:12px;font-weight:700;
  background:var(--panel);color:var(--muted);padding:4px 11px;border-radius:999px}
.product .status.live{color:#5A7349}
.product .status.soon{color:var(--slate)}
.product .h3{font-size:23px;margin-bottom:6px}
.product .kind{font-size:13.5px;color:var(--muted);margin-bottom:var(--s3)}
.product p{font-size:15.5px}

/* 넣는 것 → 나오는 것. 설명 대신 흐름만 보여줄 때 */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s3);
  font-size:13.5px;line-height:1.5}
.flow b{background:var(--ink);color:#fff;border-radius:8px;padding:6px 12px;font-weight:600}
.flow span{background:var(--panel);border-radius:8px;padding:6px 12px;color:var(--body)}
.flow i{font-style:normal;color:var(--muted);padding:0 2px}

/* ---------- 절차 (하는 일 페이지) ---------- */
.steps{counter-reset:st;margin-top:var(--s4);border-top:1px solid var(--line)}
.step{counter-increment:st;display:grid;grid-template-columns:62px 200px 1fr;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--line);align-items:center}
@media(max-width:768px){.step{grid-template-columns:46px 1fr;gap:var(--s2);align-items:start}
  .step p{grid-column:2}}
.step::before{content:counter(st,decimal-leading-zero);font-size:12px;font-weight:700;color:var(--muted);
  width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;align-self:start}
.step b{font-size:16px;font-weight:600;color:var(--ink)}
.step p{font-size:15px}

/* ---------- 비교 표 : 나눠 맡길 때 ↔ 딥이모션에 맡기면 ----------
   같은 항목끼리 한 줄에서 비교한다. 짙은 바탕은 딥이모션 쪽에만 써서 시선을 모은다. */
.vs-h{font-size:clamp(30px,4.4vw,48px);margin-top:var(--s2)}
.vs{border:1px solid var(--line);border-radius:var(--R);overflow:hidden;background:var(--panel)}
.vs-row{display:grid;grid-template-columns:190px 1fr 1.2fr}
.vs-row+.vs-row>.vs-k,.vs-row+.vs-row>.vs-a{border-top:1px solid var(--line)}
.vs-row+.vs-row>.vs-b{border-top:1px solid rgba(255,255,255,.09)}
.vs-k{display:flex;align-items:center;gap:14px;padding:var(--s4) var(--s3);border-right:1px solid var(--line)}
.vs-k svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.vs-k b{font-size:17px;font-weight:700;color:var(--ink)}
.vs-a{display:flex;align-items:center;padding:var(--s4);font-size:16px;color:var(--body);line-height:1.6}
.vs .vs-m{display:none}
.vs-b{display:flex;align-items:center;gap:16px;padding:var(--s4);background:var(--ink);color:#fff}
.vs-b i{width:34px;height:34px;border-radius:50%;flex:0 0 auto;background:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center}
.vs-b i svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vs-b b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.45}
.vs-b span{display:block;margin-top:4px;font-size:14.5px;color:rgba(255,255,255,.66);line-height:1.6}
/* 머리줄 */
.vs-head .vs-k,.vs-head .vs-a,.vs-head .vs-b{padding:var(--s3) var(--s4)}
.vs-head .vs-a{justify-content:center;font-size:15px;font-weight:700;color:var(--ink)}
.vs-head .vs-b{justify-content:center;font-size:15px;font-weight:700;color:rgba(255,255,255,.72)}
.vs-note{margin-top:var(--s3);font-size:14px;color:var(--muted)}

/* 두 서비스를 같은 기준으로 나란히 — 어느 쪽도 짙게 칠하지 않는다 */
.vs.duo{background:var(--paper)}
.duo .vs-a,.duo .vs-b{background:transparent;color:var(--body);font-size:15.5px;line-height:1.65}
.duo .vs-a{border-right:1px solid var(--line)}
.duo .vs-row+.vs-row>.vs-b{border-top:1px solid var(--line)}
.duo .vs-head .vs-a,.duo .vs-head .vs-b{background:var(--panel);justify-content:flex-start;color:var(--ink);font-size:16px}
.duo .vs-head a{border-bottom:1px solid var(--line);transition:border-color .2s}
.duo .vs-head a:hover{border-color:var(--ink)}
.duo .vs-k b{font-size:15px}

/* ---------- 홈 '하는 일' 카드 두 장 : 같은 구조, 같은 높이 ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:768px){.svc{grid-template-columns:1fr}}
.svc-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--R);padding:var(--s4)}
@media(max-width:768px){.svc-card{padding:var(--s3)}}
.svc-top{display:flex;gap:var(--s3);align-items:flex-start}
.svc-top .ic-box{margin-bottom:0;flex:0 0 auto}
.svc-top .no{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.svc-h{font-size:clamp(24px,2.4vw,30px);margin-top:4px}
.svc-tag{margin-top:var(--s2);font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.5}
.svc-d{margin-top:6px;font-size:15px;line-height:1.7}

/* 그림 띠 — 아이콘 셋을 선으로 잇고, 선 위로 점이 천천히 지나간다 */
.svc-art{display:flex;align-items:center;justify-content:center;gap:10px;margin:var(--s4) 0 var(--s2);
  background:var(--panel);border-radius:var(--r);padding:var(--s3) var(--s3)}
.svc-art svg{width:clamp(40px,5vw,58px);height:auto;flex:0 0 auto;fill:none;stroke:var(--ink);
  stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.svc-art .cn{position:relative;flex:1 1 0;max-width:96px;height:2px;background:var(--line)}
.svc-art .cn::before,.svc-art .cn::after{content:'';position:absolute;top:50%;width:7px;height:7px;
  margin-top:-3.5px;border-radius:50%;background:var(--muted)}
.svc-art .cn::before{left:-2px}
.svc-art .cn::after{left:0;background:var(--ink);animation:cnRun 3.2s ease-in-out infinite}
.svc-art .cn + svg + .cn::after{animation-delay:1.6s}
@keyframes cnRun{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
@media(prefers-reduced-motion:reduce){.svc-art .cn::after{animation:none;opacity:0}}

/* 세 묶음 */
.svc-li{margin-top:var(--s2)}
.svc-li li{display:flex;gap:14px;align-items:flex-start;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.svc-li li:last-child{border-bottom:0}
.svc-li svg{width:24px;height:24px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--ink);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-li b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.svc-li span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}

/* 카드 아래 버튼 — 두 카드에서 같은 크기, 같은 위치. 녹색은 상담 버튼에만 쓰므로 선 버튼 */
.btn-line{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;
  padding:15px;border:1.5px solid var(--ink);border-radius:12px;font-size:15px;font-weight:600;
  color:var(--ink);transition:background .2s,color .2s}
.svc-li + .btn-line{margin-top:var(--s3)}
.svc-card .svc-li{flex:1 1 auto}
.btn-line svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-line:hover svg{transform:translateX(4px)}

/* ---------- 홈 '함께하는 곳' 고객사 카드 ---------- */
.css{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:768px){.css{grid-template-columns:1fr}}
.cs{display:flex;flex-direction:column;background:rgba(255,255,255,.5);border:1px solid var(--line);
  border-radius:var(--R);padding:var(--s4) var(--s4) var(--s3)}
@media(max-width:768px){.cs{padding:var(--s3)}}
.cs-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  font-size:13.5px;color:var(--muted)}
.cs .yr{background:var(--panel);color:var(--ink);font-weight:600;font-size:13px;
  padding:5px 12px;border-radius:999px;white-space:nowrap}
.cs-art{display:block;width:100%;max-width:280px;height:auto;margin:var(--s2) auto var(--s1);
  fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.cs-art .blob{fill:var(--panel);stroke:none}
.cs-art .wave{stroke:var(--muted);stroke-width:1.1}
.cs-art .dot{fill:var(--ink);stroke:none}
@media(max-width:768px){.cs-art{max-width:220px}}
.cs-who{font-size:15px;font-weight:700;color:var(--muted);margin-top:var(--s2)}
.cs-h{margin-top:6px;font-size:clamp(20px,2vw,23px);font-weight:700;color:var(--ink);
  letter-spacing:-.03em;line-height:1.4}
.cs-d{margin-top:var(--s1);font-size:15px;line-height:1.7;flex:1 1 auto}
.cs-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.cs-tags span{background:var(--panel);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--body)}
.cs-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.cs-foot .btn-line{margin-top:0;padding:13px 26px}

/* ---------- 홈 '직접 만든 서비스' 쇼케이스 ---------- */
.sec-head.center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
.eyebrow.lined{display:inline-flex;align-items:center;gap:14px}
.eyebrow.lined::before,.eyebrow.lined::after{content:'';width:44px;height:1px;background:var(--line)}
.wrap.wide{max-width:1480px}
.shows{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:768px){.shows{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.show{display:flex;flex-direction:column;background:#FFFEFB;border:1px solid #ECE7DE;
  border-radius:var(--R);overflow:hidden;box-shadow:0 10px 30px -12px rgba(34,30,25,.14)}
.show img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.show-b{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--s3) var(--s4) var(--s4)}
@media(max-width:768px){.show-b{padding:var(--s3)}}
.show-k{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;font-weight:500;color:var(--body)}
/* 상태 배지 — 시안처럼 상태마다 색을 나눈다 */
.show .st{font-size:13px;padding:5px 12px}
.show .st.live{background:#E3EEE5;color:#2F6A45}
.show .st.soon{background:#FBEBD2;color:#B06A12}
.show .st.dev{background:#E2E8F1;color:#3F5680}
.show-t{margin-top:var(--s2);font-size:clamp(26px,2.6vw,32px);font-weight:800;color:var(--ink);letter-spacing:-.035em;line-height:1.25}
.show-d{margin-top:var(--s1);font-size:16px;line-height:1.65;color:var(--body)}
.show-l{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid #ECE7DE;font-size:13.5px;color:var(--muted)}
.show-li{margin-top:6px;flex:1 1 auto}
.show-li li{position:relative;padding:5px 0 5px 30px;font-size:15.5px;color:var(--ink);line-height:1.55}
.show-li li::before{content:'';position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.show .more{margin-top:var(--s2)}
.show-go{font-size:16px;font-weight:700;color:var(--ink)}
.more.ext::after{content:'↗'}
.more.ext:hover::after{transform:translate(2px,-2px)}
.shows-foot{margin-top:var(--s4);text-align:center;font-size:14px;color:var(--muted)}

/* ---------- 홈 '계속 맡기시는 이유' — 어두운 인용 판 ---------- */
.why2{display:grid;grid-template-columns:minmax(190px,.55fr) 1.6fr;column-gap:var(--s5);align-content:center;
  background:var(--ink);color:#fff;border-radius:28px;
  padding:clamp(40px,6vw,92px) clamp(28px,6vw,100px) clamp(32px,4vw,56px)}
.why2-k{font-size:clamp(15px,1.4vw,19px);font-weight:600;color:var(--accent-br)}
.why2-mark{display:block;margin-top:var(--s2);font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:clamp(150px,15vw,250px);line-height:.85;color:var(--accent-br);opacity:.32}
.why2-q{font-size:clamp(26px,3.5vw,52px);font-weight:800;line-height:1.32;letter-spacing:-.035em;color:#fff}
.why2-q em{font-style:normal;color:var(--accent-br)}
.why2-by{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.18);
  font-size:15px;color:rgba(255,255,255,.6)}
.why2-pts{grid-column:1 / -1;display:flex;justify-content:center;margin-top:var(--s5)}
.why2-pts li{display:flex;align-items:center;gap:16px;padding:6px clamp(20px,4vw,64px);
  font-size:clamp(15px,1.4vw,19px);font-weight:600;color:#fff}
.why2-pts li + li{border-left:1px solid rgba(255,255,255,.18)}
.why2-pts svg{width:clamp(30px,2.6vw,40px);height:auto;flex:0 0 auto;fill:none;stroke:var(--accent-br);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:768px){
  .why2{grid-template-columns:1fr;border-radius:var(--R);padding:36px 22px 30px}
  .why2-q{font-size:clamp(19px,5.4vw,30px)}
  .why2-mark{display:none}
  .why2-main{margin-top:var(--s3)}
  .why2-pts{flex-direction:column;align-items:flex-start;gap:var(--s2);margin-top:var(--s4)}
  .why2-pts li{padding:0}
  .why2-pts li + li{border-left:0}
}

/* ---------- 넘겨 보는 판 (스와이프) ----------
   넘기기는 브라우저의 scroll-snap이 맡고, 스크립트는 화살표·점만 담당한다. */
.slider{position:relative}
.slides{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  position:relative;border-radius:28px;outline:none}
.slides::-webkit-scrollbar{display:none}
.slides:focus-visible{box-shadow:0 0 0 3px var(--accent-br)}
.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex}
.slide > *{flex:1 1 auto;min-width:0}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s3)}
.sl-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s,opacity .2s}
.sl-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sl-btn:hover:not([disabled]){background:var(--ink);border-color:var(--ink);color:#fff}
.sl-btn[disabled]{opacity:.35;cursor:default}
.sl-dots{display:flex;gap:10px;align-items:center}
.sl-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#D6CFC2;cursor:pointer;
  transition:width .3s,background .3s}
.sl-dots button.on{background:var(--ink)}
.sl-count{min-width:44px;text-align:center;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.slides{scroll-behavior:auto}}

/* 2장 — 딥이모션이 일하는 기준 */
.std{--std-ac:#E8CF9C;background:#1F3A2F;color:#fff;border-radius:28px;
  padding:clamp(40px,5.5vw,84px) clamp(28px,6vw,100px) clamp(36px,4vw,60px)}
.std .why2-k{color:var(--std-ac)}
.std-body{margin-left:clamp(0px,8.5vw,140px)}
.std-h{margin-top:var(--s3);font-size:clamp(26px,3.3vw,50px);font-weight:800;line-height:1.3;letter-spacing:-.035em;color:#fff}
.std-h em{font-style:normal;color:var(--std-ac)}
.std-lead{margin-top:var(--s3);font-size:clamp(15px,1.35vw,19px);line-height:1.75;color:rgba(255,255,255,.72)}
.std-fields{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.18)}
.std-fields span{padding:4px clamp(14px,2.6vw,40px);font-size:clamp(15px,1.3vw,18px);font-weight:700}
.std-fields span + span{border-left:1px solid rgba(255,255,255,.2)}
.std-fields .lb{padding-left:0;font-weight:500;color:rgba(255,255,255,.6)}
.std-cols{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s4)}
.std-cols > div{padding:4px clamp(16px,3vw,48px)}
.std-cols > div:first-child{padding-left:0}
.std-cols > div + div{border-left:1px solid rgba(255,255,255,.18)}
.std-cols .n{font-size:15px;font-weight:700;color:var(--std-ac)}
.std-cols b{display:block;margin-top:6px;font-size:clamp(17px,1.5vw,22px);font-weight:700;letter-spacing:-.02em}
.std-cols p:not(.n){margin-top:var(--s1);font-size:15px;line-height:1.65;color:rgba(255,255,255,.72)}
@media(max-width:768px){
  .slides{border-radius:var(--R)}
  .std{border-radius:var(--R);padding:36px 22px 30px}
  .std-body{margin-left:0}
  .std-h{font-size:clamp(18px,5vw,30px)}
  .std-lead br{display:none}
  .std-fields{gap:7px}
  .std-fields .lb{flex:0 0 100%;padding:0 0 4px}
  .std-fields span:not(.lb){padding:5px 11px;border-left:0;border-radius:8px;background:rgba(255,255,255,.09);font-size:14px}
  .std-cols{grid-template-columns:1fr;gap:var(--s3)}
  .std-cols > div{padding:0}
  .std-cols > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:var(--s3)}
  .std-cols p br{display:none}
}

/* ---------- 홈 '문의하기' — 왼쪽 안내 + 오른쪽 연락 카드 ---------- */
.ask2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,110px);align-items:center;
  max-width:1380px;margin:0 auto}
@media(max-width:768px){.ask2{grid-template-columns:1fr}}
.ask2 .eyebrow.ac{color:var(--accent-dk);font-weight:700}
.eyebrow.lined-r{display:inline-flex;align-items:center;gap:14px}
.eyebrow.lined-r::after{content:'';width:44px;height:1px;background:currentColor;opacity:.55}
.ask2-h{margin-top:var(--s3);font-size:clamp(34px,4.6vw,66px);line-height:1.2}
.ask2-p{margin-top:var(--s4);font-size:clamp(16px,1.45vw,20px);line-height:1.75;color:var(--body)}
.ask2-p + .ask2-p{margin-top:var(--s3)}
.ask2-note{display:flex;align-items:center;gap:16px;margin-top:var(--s5);font-size:16px;color:var(--accent-dk)}
.ask2-note svg{width:30px;height:30px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ask2-note span{padding-left:16px;border-left:1px solid #CFC6B8}

.ask2-card{background:#FFFEFB;border:1px solid #ECE7DE;border-radius:var(--R);
  box-shadow:0 12px 36px -14px rgba(34,30,25,.16);padding:clamp(28px,3.5vw,52px) clamp(22px,3.5vw,48px)}
.ask2-k{display:flex;align-items:center;gap:18px;font-size:17px;font-weight:600;color:var(--ink)}
.ask2-k svg,.ask2-tel svg,.ask2-btn svg,.copy svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ask2-k svg{width:34px;height:34px;flex:0 0 auto;color:var(--accent);stroke-width:1.6}
.ask2-mail{display:flex;align-items:center;gap:12px;margin-top:var(--s3)}
.ask2-mail a{font-size:clamp(24px,2.8vw,42px);font-weight:800;letter-spacing:-.03em;color:var(--ink);
  line-height:1.2;word-break:break-all}
.copy{position:relative;width:42px;height:42px;flex:0 0 auto;border:0;border-radius:10px;background:none;
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.copy:hover,.copy:focus-visible{background:var(--panel);color:var(--ink)}
.copy svg{width:22px;height:22px;stroke-width:1.6}
.copy-ok{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
  font-size:12px;font-weight:600;background:var(--ink);color:#fff;padding:4px 9px;border-radius:6px;
  opacity:0;transition:opacity .2s;pointer-events:none}
.copy.done .copy-ok{opacity:1}
.ask2-sub{margin-top:var(--s2);font-size:15px;color:var(--muted)}
.ask2-li{list-style:none;margin-top:var(--s3);display:grid;gap:14px}
.ask2-li li{display:flex;align-items:center;gap:20px;font-size:clamp(15px,1.3vw,18px);color:var(--ink)}
.ask2-li i{font-style:normal;width:50px;height:50px;flex:0 0 auto;border-radius:50%;background:#E6EFE9;
  color:var(--accent);font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center}
.ask2-btn{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:var(--s4);padding:20px;
  border-radius:14px;background:var(--accent);color:#fff;font-size:18px;font-weight:700;transition:background .2s,transform .2s}
.ask2-btn:hover{background:var(--accent-hv);transform:translateY(-1px)}
.ask2-btn svg{width:18px;height:18px;stroke-width:2}
.ask2-hint{margin-top:var(--s2);text-align:center;font-size:14px;color:var(--muted)}
.ask2-tel{display:flex;align-items:center;gap:22px;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid #ECE7DE;color:var(--ink)}
.ask2-tel svg{width:40px;height:40px;flex:0 0 auto;color:var(--accent);stroke-width:1.4}
.ask2-tel span{display:flex;flex-direction:column;padding-left:22px;border-left:1px solid #E4DDD0}
.ask2-tel small{font-size:15px;color:var(--body)}
.ask2-tel b{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.ask2-tel:hover b{color:var(--accent)}
@media(max-width:768px){
  .ask2-mail a{font-size:23px}
  .ask2-li li{gap:14px}
  .ask2-li i{width:40px;height:40px;font-size:14px}
  .ask2-p br{display:none}
}

/* 푸터 윗줄 — 워드마크 + 한 줄 */
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.foot-mark img{display:block;width:220px;height:auto}
@media(max-width:768px){.foot-mark img{width:170px}}
.foot-tag{font-size:14px;color:var(--muted)}

/* ---------- 하는 일 페이지 맨 위 — 필요한 도움을 고르는 카드 두 장 ---------- */
.pick-eb.eyebrow.ac{color:var(--accent-dk);font-weight:700}
.pick-h{margin-top:var(--s2);font-size:clamp(34px,4.6vw,66px);line-height:1.18;max-width:none}
.pick-head .lead{margin-top:var(--s3);font-size:clamp(17px,1.6vw,22px)}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
@media(max-width:768px){.pick{grid-template-columns:1fr}}
.pk{display:flex;flex-direction:column;background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);
  padding:clamp(28px,3.2vw,46px) clamp(22px,3.2vw,44px) clamp(24px,2.6vw,32px)}
.pk-top{display:flex;align-items:center;gap:24px}
.pk-top svg{width:44px;height:44px;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.pk-badge{background:#E3EEE5;color:#2F6A45;font-size:14px;font-weight:700;padding:7px 16px;border-radius:999px}
.pk-h{margin-top:var(--s3);font-size:clamp(21px,2.1vw,30px);font-weight:800;line-height:1.4;letter-spacing:-.03em;color:var(--ink)}
.pk-h .ac{color:var(--accent-dk)}
.pk-d{margin-top:var(--s2);font-size:clamp(15px,1.3vw,18px);color:var(--body)}
.pk-rows{margin:var(--s3) 0 0;border-top:1px solid #E9E2D6}
.pk-rows div{display:grid;grid-template-columns:clamp(92px,9.5vw,136px) 1fr;gap:var(--s2);
  padding:16px 8px;border-bottom:1px solid #E9E2D6}
.pk-rows dt{font-size:16px;font-weight:700;color:var(--ink)}
.pk-rows dd{font-size:clamp(14.5px,1.2vw,17px);color:var(--body);line-height:1.6}
.pk-note{margin:var(--s2) 0 var(--s3);padding:0 8px;font-size:14.5px;color:var(--muted)}
.pk-ref{display:flex;gap:var(--s3);align-items:baseline;margin-top:auto;padding:18px 8px 0}
.pk-ref b{flex:0 0 auto;font-size:16px;font-weight:700;color:var(--ink)}
.pk-ref span{font-size:clamp(14.5px,1.2vw,17px);color:var(--body)}
.pk .btn-line{margin-top:var(--s3);padding:17px;font-size:17px}
.pick-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s3);background:#E9F0EA;border-radius:var(--r);padding:16px clamp(20px,3vw,40px)}
.pick-bar p{display:flex;align-items:center;gap:18px;font-size:clamp(15px,1.3vw,17px);font-weight:600;color:var(--ink)}
.pick-bar svg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pick-bar p svg{width:30px;height:30px;flex:0 0 auto;stroke:var(--accent-dk);stroke-width:1.5}
.pick-bar a{display:inline-flex;align-items:center;gap:10px;font-size:clamp(15px,1.3vw,17px);font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:5px}
.pick-bar a svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;transition:transform .25s}
.pick-bar a:hover svg{transform:translateX(4px)}

/* ---------- 하는 일 'IT 운영 · 개발' — 역량 카드 넷 + 시작 요청 ---------- */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
@media(max-width:768px){.caps{grid-template-columns:1fr}}
.cap{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);align-items:start;
  background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);padding:clamp(24px,3vw,44px)}
.cap-ic{width:clamp(56px,5.6vw,88px);height:auto;margin-top:4px;fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cap-ic .a{stroke:var(--accent)}
.cap-ic .bg{fill:#FFFEFB}
.cap-n{font-size:clamp(15px,1.3vw,19px);font-weight:700;color:var(--accent-dk)}
.cap-t{margin-top:4px;font-size:clamp(20px,2vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.35;color:var(--ink)}
.cap-d{margin-top:6px;font-size:clamp(15px,1.35vw,19px);color:var(--body);line-height:1.6}
.cap-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s3)}
.cap-tags span{background:#E6EFE9;color:#2B4A3C;border-radius:999px;padding:8px 18px;font-size:clamp(13.5px,1.15vw,16px)}
/* 두 칸을 다 쓰는 넓은 카드 — 카드 수가 홀수일 때 마지막 한 장에 */
.cap.wide{grid-column:1 / -1}
.cap.wide .cap-d{max-width:46em}
.cap-proof{display:flex;align-items:center;gap:10px;margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid #E9E2D6;font-size:clamp(14px,1.2vw,16px);color:var(--ink)}
.cap-proof::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* ---------- 하는 일 '일하는 방식' — 다섯 단계 + 긴급 장애 대응 ---------- */
.procs{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;
  gap:clamp(2px,.8vw,12px);margin-top:var(--s5);list-style:none;padding:0}
.fl{position:relative;align-self:stretch;background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);
  padding:clamp(24px,2.4vw,36px) clamp(8px,1.4vw,22px) clamp(20px,2.2vw,32px);text-align:center}
.fl-n{position:absolute;top:clamp(10px,1.2vw,18px);left:clamp(10px,1.2vw,18px);display:grid;place-items:center;
  width:clamp(30px,3.1vw,48px);height:clamp(30px,3.1vw,48px);border-radius:50%;background:#E6EFE9;
  color:var(--accent-dk);font-size:clamp(12.5px,1.15vw,17px);font-weight:700;font-variant-numeric:tabular-nums}
.fl svg{display:block;width:clamp(46px,5.4vw,84px);height:auto;margin:max(14px,calc(62px - 3.1vw)) auto 0;fill:none;
  stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fl svg .a{stroke:var(--accent)}
.fl svg .dots{stroke-width:2.6}
.fl svg .bg{fill:#FFFEFB}
.fl b{display:block;margin-top:clamp(12px,2vw,28px);font-size:clamp(15px,1.5vw,23px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.fl p{margin-top:var(--s1);font-size:clamp(13px,1.15vw,17px);line-height:1.65;color:var(--body);word-break:keep-all}
.fl-ar svg{display:block;width:clamp(12px,1.3vw,21px);height:auto;fill:none;stroke:var(--muted);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.procs-note{display:flex;align-items:center;gap:14px;margin-top:var(--s3);font-size:clamp(15px,1.3vw,18px);color:var(--body)}
.procs-note svg{width:28px;height:28px;flex:0 0 auto;stroke-linecap:round;stroke-linejoin:round}
.procs-note svg circle{fill:var(--accent)}
.procs-note svg path{fill:none;stroke:#fff;stroke-width:2}

.urgent{margin-top:var(--s5);background:var(--ink);color:#fff;border-radius:var(--R);
  padding:clamp(32px,4vw,60px) clamp(24px,4.4vw,64px) clamp(24px,2.6vw,36px)}
.urgent-top{display:grid;grid-template-columns:1fr 1.3fr;align-items:center}
.urgent-l{padding-right:clamp(24px,4vw,64px);border-right:1px solid rgba(255,255,255,.16)}
.urgent-k{font-size:clamp(14px,1.2vw,17px);font-weight:700;color:var(--accent-br)}
.urgent-h{margin-top:var(--s2);font-size:clamp(28px,3.3vw,50px);font-weight:800;line-height:1.28;letter-spacing:-.035em;color:#fff}
.urgent-r{display:grid;gap:clamp(22px,2.6vw,36px);padding-left:clamp(24px,6vw,92px);list-style:none}
.urgent-r li{display:flex;align-items:center;gap:clamp(18px,3vw,44px)}
.urgent-ic{display:grid;place-items:center;flex:0 0 auto;width:clamp(52px,4.6vw,70px);height:clamp(52px,4.6vw,70px)}
.urgent-ic svg{width:100%;height:auto;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.urgent-ic svg .a{stroke:var(--accent-br)}
.urgent-ic.call{border-radius:50%;background:rgba(122,176,143,.18);border:1px solid rgba(122,176,143,.5)}
.urgent-ic.call svg{width:44%;stroke:var(--accent-br);stroke-width:1.8}
.urgent-r b{display:block;font-size:clamp(17px,1.6vw,24px);font-weight:800;letter-spacing:-.02em}
.urgent-r p{margin-top:4px;font-size:clamp(14px,1.25vw,18px);color:rgba(255,255,255,.72)}
.urgent-foot{margin-top:clamp(28px,3vw,44px);padding-top:clamp(18px,2vw,28px);border-top:1px solid rgba(255,255,255,.14);
  font-size:clamp(13.5px,1.15vw,16px);color:rgba(255,255,255,.6)}

/* 좁은 PC·태블릿에서도 가로 다섯 칸 유지 — 여백만 줄인다 */
@media(max-width:768px){
  .procs{grid-template-columns:1fr;gap:6px}
  .fl{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic n" "ic b" "ic p";column-gap:22px;
    align-items:center;text-align:left;padding:20px 22px}
  .fl-n{position:static;grid-area:n;width:auto;height:auto;background:none;place-items:start;font-size:14px}
  .fl svg{grid-area:ic;width:52px;margin:0}
  .fl b{grid-area:b;margin-top:2px;font-size:18px}
  .fl p{grid-area:p;margin-top:4px;font-size:15px}
  .fl p br{display:none}
  .fl-ar{justify-self:center}
  .fl-ar svg{transform:rotate(90deg);width:16px}
}
@media(max-width:768px){
  .urgent-top{grid-template-columns:1fr}
  .urgent-l{padding:0 0 var(--s3);border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .urgent-r{padding:var(--s3) 0 0}
  .urgent-r li{align-items:flex-start;gap:18px}
  .urgent-ic{width:46px;height:46px}
}

/* ---------- 하는 일 'AI 업무 자동화' — 지금은 → 자동화하면 카드 셋 + 한 줄 기준 ---------- */
.autos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,20px);margin-top:var(--s5)}
.au{display:flex;flex-direction:column;background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);
  padding:clamp(22px,2.2vw,32px) clamp(16px,1.5vw,24px) clamp(20px,1.6vw,24px)}
.au-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(16px,2.6vw,44px);padding:0 clamp(4px,.6vw,10px)}
.au-h > div{flex:1 1 170px}
.au-h svg{width:clamp(56px,4.4vw,70px);height:auto;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.au-h svg .blob{fill:#E6EFE9;stroke:none}
.au-h svg .dots{stroke-width:3.2}
.au-t{font-size:clamp(19px,1.75vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.3;color:var(--ink)}
.au-s{margin-top:4px;font-size:clamp(14px,1.2vw,17px);color:var(--body)}
.au-now{margin-top:clamp(22px,2.2vw,34px);background:#F2EEE7;border-radius:12px;padding:clamp(16px,1.5vw,22px) clamp(16px,1.6vw,24px)}
/* '지금은' · '바꾸면' — 훑어봐도 전후가 갈리도록 라벨을 뱃지로 */
.au-now small,.au-then small{display:inline-block;border-radius:999px;padding:4px 12px;
  font-size:clamp(13px,1.05vw,15px);font-weight:700;line-height:1.4}
.au-now small{background:#E4DDD0;color:var(--body)}
.au-now p{margin-top:10px;font-size:clamp(14.5px,1.25vw,18px);line-height:1.6;color:var(--body);word-break:keep-all}
.au-ar{display:block;width:22px;height:22px;margin:12px auto;fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.au-then{flex:1;background:#E9F0EA;border-radius:12px;padding:clamp(18px,1.6vw,24px) clamp(16px,1.6vw,24px)}
.au-then small{background:var(--accent);color:#fff}
.au-then p{word-break:keep-all}
.au-then b{display:block;margin-top:10px;font-size:clamp(18px,1.65vw,25px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.au-then p{margin-top:8px;font-size:clamp(14.5px,1.25vw,18px);line-height:1.6;color:var(--body)}
.au-tags{margin-top:14px;padding-left:clamp(4px,.6vw,10px)}

.ai-bar{display:flex;align-items:center;gap:clamp(20px,3vw,44px);margin-top:var(--s3);background:var(--ink);color:#fff;
  border-radius:var(--R);padding:clamp(22px,2.2vw,30px) clamp(24px,3vw,44px)}
.ai-bar-ic{width:clamp(44px,3.8vw,60px);height:auto;flex:0 0 auto;fill:none;stroke:var(--accent-br);stroke-width:2.4;stroke-linecap:round}
.ai-bar-ic circle{fill:var(--ink)}
.ai-bar b{display:block;font-size:clamp(18px,1.75vw,27px);font-weight:800;letter-spacing:-.03em}
.ai-bar p{margin-top:6px;font-size:clamp(14px,1.25vw,18px);color:rgba(255,255,255,.72)}
.ai-bar a{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;color:#fff;
  font-size:clamp(15px,1.3vw,18px);font-weight:600;text-decoration:underline;text-underline-offset:6px;
  text-decoration-color:rgba(255,255,255,.45)}
.ai-bar a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.ai-bar a:hover svg{transform:translateX(4px)}
@media(max-width:768px){
  .autos{grid-template-columns:1fr}
  .ai-bar{flex-wrap:wrap;align-items:flex-start}
  .ai-bar > div{flex:1 1 220px}
  .ai-bar a{margin-left:0}
}

/* ---------- 하는 일 '직접 만든 서비스' — 작품 고르기 (누르거나, 차례로 자동 전환) ---------- */
.wk{margin-top:var(--s6)}
.wk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.wk-eb{display:inline-flex;align-items:center;gap:12px}
.wk-eb::before{content:'';width:3px;height:16px;border-radius:2px;background:var(--accent)}
.wk-hint{font-size:clamp(14px,1.15vw,16px);color:var(--muted)}
.wk-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,20px);margin-top:var(--s4)}
.wk-tab{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:center;
  gap:clamp(14px,1.8vw,28px);padding:clamp(14px,1.4vw,22px);text-align:left;font:inherit;cursor:pointer;
  background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);transition:border-color .25s,background .25s,box-shadow .25s}
.wk-tab:hover{border-color:#CFC6B6}
.wk-tab.on{background:#EEF4F0;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wk-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wk-th{display:block;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--panel);
  box-shadow:0 1px 0 rgba(34,30,25,.06),0 4px 14px rgba(34,30,25,.08)}
.wk-th img{width:100%;height:100%;object-fit:cover;object-position:left top}
.wk-tx{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.wk-tx b{font-size:clamp(16px,1.4vw,22px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.25}
.wk-tx > span{margin-top:6px;font-size:clamp(13.5px,1.15vw,17px);color:var(--body)}
.wk-st{margin-top:clamp(12px,1.4vw,20px);font-style:normal;border-radius:999px;padding:6px 16px;
  font-size:clamp(13px,1.05vw,16px);font-weight:700}
.wk-st.live{background:#E3EEE5;color:#2F6A45}
.wk-st.soon{background:#FBEBD2;color:#B06A12}
.wk-st.dev{background:#E9E5DE;color:#6B645A}
/* 자동 전환 진행 막대 — 선택된 카드 아래에서 채워지고, 다 차면 다음 작품으로 */
.wk-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.picker.run .wk-tab.on .wk-bar{animation:wkbar var(--wk-dur,9000ms) linear forwards}
.picker.paused .wk-tab.on .wk-bar{animation-play-state:paused}
@keyframes wkbar{to{transform:scaleX(1)}}

.wk-panels{display:grid;margin-top:var(--s3)}
.wk-panel{grid-area:1/1;display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,3vw,48px);align-items:center;
  background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);padding:clamp(20px,2.4vw,36px);
  opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.wk-panel.on{opacity:1;visibility:visible;transition:opacity .45s}
.wk-fig{margin:0}
/* 무대 — 작품마다 제 색을 깔고, PC 화면 위에 모바일 화면을 겹쳐 놓는다 */
.wk-stage{position:relative;aspect-ratio:16/10.4;border-radius:16px;overflow:hidden;isolation:isolate}
.wk-stage::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 100%,rgba(0,0,0,.14),transparent 70%)}
.wk-stage.ontok{background:radial-gradient(90% 80% at 20% 10%,#FBE3C2 0,#F0BF86 45%,#D98C47 100%)}
.wk-stage.sereno{background:radial-gradient(90% 80% at 80% 10%,#F4F1EA 0,#DCE7DF 50%,#B9CDBF 100%)}
.wk-stage.wc{background:radial-gradient(80% 90% at 70% 20%,#23426B 0,#12223A 50%,#070D18 100%)}
.wk-stage img{position:absolute;display:block;height:auto;border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.12),0 18px 40px rgba(20,14,8,.28)}
.wk-stage .wk-pc{left:6%;top:9%;width:70%}
.wk-stage .wk-mo{right:7%;bottom:7%;width:21%;border-radius:18px;outline:5px solid #1E1A16;outline-offset:0}
.wk-stage.wc .wk-pc{left:5%;top:11%;width:64%;outline:1px solid rgba(160,200,255,.22)}
.wk-stage .wk-ls{right:5%;width:37%;border-radius:12px;outline:4px solid #0A0F18}
.wk-stage .wk-ls.one{top:14%}
.wk-stage .wk-ls.two{bottom:10%}
.wk-stage .wk-cd{top:12%;width:27%;border-radius:10px}
.wk-stage .wk-cd.a{left:9%;transform:rotate(-5deg);top:15%}
.wk-stage .wk-cd.b{left:36.5%;top:10%}
.wk-stage .wk-cd.c{left:63%;transform:rotate(4deg);top:13%;width:28.5%;z-index:1;
  box-shadow:0 2px 4px rgba(0,0,0,.12),0 24px 50px rgba(20,40,28,.35)}
/* 작품이 바뀔 때 화면들이 차례로 떠오른다 */
.wk-panel.on .wk-stage img{animation:wkup .8s cubic-bezier(.2,.7,.2,1) both}
.wk-panel.on .wk-stage img:nth-child(2){animation-delay:.12s}
.wk-panel.on .wk-stage img:nth-child(3){animation-delay:.22s}
@keyframes wkup{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.wk-panel.on .wk-stage img{animation:none}}
.wk-fig figcaption{margin-top:14px;font-size:clamp(13.5px,1.1vw,16px);color:var(--muted)}
.wk-info{padding-left:clamp(0px,3vw,48px);border-left:1px solid #E9E2D6}
.wk-name{font-size:clamp(30px,3.2vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1.15;color:var(--ink)}
.wk-tag{margin-top:10px;font-size:clamp(17px,1.6vw,24px);color:var(--body)}
.wk-rows{list-style:none;margin-top:clamp(22px,2.4vw,36px);display:grid;gap:clamp(18px,2vw,28px)}
.wk-rows li{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,24px);align-items:start}
.wk-ic{display:grid;place-items:center;width:clamp(44px,3.6vw,56px);height:clamp(44px,3.6vw,56px);border-radius:50%;background:#E6EFE9}
.wk-ic svg{width:48%;height:auto;fill:none;stroke:var(--accent-dk);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wk-rows b{display:block;font-size:clamp(16px,1.45vw,21px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.wk-rows p{margin-top:4px;font-size:clamp(14.5px,1.3vw,18px);color:var(--body)}
.wk-rows .wk-tags{margin-top:10px;gap:8px}
.wk-tags span{border-radius:8px;padding:6px 14px}
.wk-go{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:clamp(24px,2.8vw,40px);
  padding:18px 20px;border-radius:12px;background:var(--ink);color:#fff;font-size:clamp(16px,1.4vw,20px);font-weight:700}
.wk-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.wk-go:hover svg{transform:translate(2px,-2px)}
.wk-go.off{background:none;border:1px dashed #D6CDBE;color:var(--muted);font-size:clamp(14px,1.2vw,16px);font-weight:500}
@media(max-width:768px){
  .wk-panel{grid-template-columns:1fr}
  .wk-info{padding-left:0;border-left:0}
}
@media(max-width:768px){
  .wk-tabs{gap:8px}
  .wk-tab{grid-template-columns:1fr;padding:8px 8px 12px;gap:8px;border-radius:var(--r)}
  .wk-tx b{font-size:14px}
  .wk-tx > span,.wk-st{display:none}
  .wk-hint{display:none}
}
@media(prefers-reduced-motion:reduce){.wk-panel,.wk-panel.on{transition:none}}

/* ---------- 하는 일 '함께 일하는 방식' — 시작 전에 맞추는 네 가지 + 상담 한 줄 ---------- */
.tms{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.2vw,20px);margin-top:var(--s5)}
.tm{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(18px,3vw,44px);align-items:start;
  background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);padding:clamp(24px,2.6vw,40px) clamp(22px,2.8vw,42px)}
.tm svg{width:clamp(56px,5.2vw,82px);height:auto;margin-top:2px;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tm svg .a{stroke:var(--accent)}
.tm svg .bg{fill:#FFFEFB}
.tm svg .dots{stroke-width:3}
.tm-t{font-size:clamp(19px,1.8vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.3;color:var(--ink)}
.tm-d{margin-top:10px;font-size:clamp(14.5px,1.3vw,19px);line-height:1.65;color:var(--body);word-break:keep-all}
.tm-tag{grid-column:1 / -1;justify-self:start;margin-top:clamp(16px,1.6vw,22px);border-radius:999px;padding:7px 18px;
  background:#E6EFE9;color:var(--accent-dk);font-size:clamp(13.5px,1.15vw,16px);font-weight:700}
.fit-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s3);
  background:#E4EEE7;border-radius:var(--R);padding:clamp(22px,2.2vw,30px) clamp(24px,3vw,44px)}
.fit-bar b{display:block;font-size:clamp(18px,1.8vw,28px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.fit-bar p{margin-top:6px;font-size:clamp(14.5px,1.3vw,19px);color:var(--body)}
.fit-bar a{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:12px;
  padding:clamp(15px,1.4vw,20px) clamp(22px,2.4vw,40px);font-size:clamp(15px,1.3vw,19px);font-weight:700}
.fit-bar a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.fit-bar a:hover svg{transform:translateX(4px)}
@media(max-width:768px){
  .tms{grid-template-columns:1fr}
  .fit-bar{flex-direction:column;align-items:flex-start}
}
@media(max-width:768px){
  .tm{grid-template-columns:1fr}
  .tm svg{width:52px;margin-bottom:14px}
}

/* ---------- 사례 — 지난 작업 목록 (구분 버튼으로 골라 보기) ---------- */
.wl-f{display:flex;flex-wrap:wrap;gap:8px}
.wl-f button{font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  padding:9px 18px;border:1px solid var(--line);background:#FFFEFB;color:var(--body);font-size:15px;font-weight:600;
  transition:background .2s,color .2s,border-color .2s}
.wl-f button:hover{border-color:#CFC6B6}
.wl-f button i{font-style:normal;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.wl-f button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.wl-f button.on i{color:rgba(255,255,255,.6)}
.wl-f button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 기간 묶음 — 왼쪽에 기간, 오른쪽에 그 기간의 작업들 */
.wl-grp{display:grid;grid-template-columns:200px 1fr;gap:var(--s3);margin-top:var(--s4);border-top:1px solid var(--ink)}
.wl-grp[hidden]{display:none}
.wl-grp + .wl-grp{margin-top:var(--s5)}
.wl-gh{padding-top:18px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.wl{display:grid;grid-template-columns:1fr 220px 110px;gap:var(--s3);align-items:baseline}
.wlist{list-style:none}
.wl{padding:18px 0;border-bottom:1px solid var(--line)}
.wl:last-child{border-bottom:0}
.wl[hidden]{display:none}
.wl-w b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.wl-w p{margin-top:3px;font-size:14.5px;color:var(--body)}
.wl-c{font-size:15px;color:var(--body)}
.wl-na{color:var(--muted)}
.wl-k{justify-self:start;font-size:13px;font-weight:600;color:var(--muted)}
/* 지금 돌아가고 있는 일 — 옅은 녹색 바탕 + 깜빡이는 점 뱃지 */
.wl.live{position:relative;isolation:isolate;border-bottom-color:transparent}
.wl.live::before{content:'';position:absolute;inset:3px -16px;z-index:-1;border-radius:12px;
  background:linear-gradient(90deg,#E8F1EA 0,#F0F5F1 55%,rgba(240,245,241,0) 100%)}
.wl.live + .wl.live{margin-top:4px}
.wl-w b + .wl-st{margin-left:10px}
.wl-st{display:inline-flex;align-items:center;gap:7px;vertical-align:2px;border-radius:999px;padding:3px 11px 3px 9px;
  font-style:normal;font-size:12.5px;font-weight:700;white-space:nowrap}
.wl-st i{position:relative;width:7px;height:7px;border-radius:50%;background:currentColor}
.wl-st i::after{content:'';position:absolute;inset:0;border-radius:50%;background:currentColor;animation:wlpulse 1.8s ease-out infinite}
.wl-st.on{background:#D7EBDD;color:#1F7A45}
.wl-st.soon{background:#FBEBD2;color:#B06A12}
.wl-st.end{background:#ECE8E1;color:#7A7266;padding:3px 11px}
@keyframes wlpulse{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3);opacity:0}}
@media(prefers-reduced-motion:reduce){.wl-st i::after{animation:none;opacity:0}}
.wl-k.run{color:var(--accent-dk)}
@media(max-width:768px){
  .wl-grp{grid-template-columns:1fr;gap:0}
  .wl-gh{padding:14px 0 4px}
  .wl{grid-template-columns:1fr auto;grid-template-areas:"w k" "c c";gap:6px 12px;padding:16px 0}
  .wl-w{grid-area:w}.wl-k{grid-area:k;justify-self:end}.wl-c{grid-area:c;font-size:13.5px}
  .wl-c:empty{display:none}
}

/* ---------- 회사 첫 화면 '처음 들은 사람이, 끝까지' — 움직이는 소통 그림 + 세 카드 ---------- */
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,22px);margin-top:var(--s4)}
.ab-art{display:flex;flex-direction:column;background:linear-gradient(160deg,#EEF4F0,#E3EEE7);border-radius:var(--R);
  padding:clamp(22px,2.4vw,36px)}
.ab-cap{font-size:clamp(15px,1.35vw,20px);font-weight:700;color:var(--ink)}
.ab-svg{display:block;width:100%;height:auto;margin:clamp(10px,1.4vw,20px) 0;overflow:visible}
.ab-svg .soft{fill:rgba(47,90,69,.06)}
.ab-svg .orbit{fill:none;stroke:var(--accent-br);stroke-width:1.6;stroke-dasharray:6 9;opacity:.55}
.ab-svg .sp{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.ab-svg .card{fill:#fff;filter:drop-shadow(0 10px 18px rgba(34,30,25,.09))}
.ab-svg .pill{fill:#EDF1EE}
.ab-svg .dt{fill:#6F7F77}
.ab-svg .gl{fill:#E1E6E2}
.ab-svg .bar{fill:var(--ink)}
.ab-svg .wd{fill:#fff}
.ab-svg .code{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.ab-svg .ar path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
/* 움직임 — 말풍선 점이 차례로 튀고, 화살표가 번갈아 오가고, 코드 줄이 써지고, 두 카드가 번갈아 떠오른다 */
.ab-svg .bub,.ab-svg .win,.ab-svg .dt,.ab-svg .ar,.ab-svg .ln{transform-box:fill-box}
.ab-svg .bub{animation:abfloat 5s ease-in-out infinite}
.ab-svg .win{animation:abfloat 5s ease-in-out -2.5s infinite}
.ab-svg .dt{transform-origin:center;animation:abdot 1.4s ease-in-out infinite}
.ab-svg .d2{animation-delay:.18s}.ab-svg .d3{animation-delay:.36s}
.ab-svg .ar1{animation:abright 2.4s ease-in-out infinite}
.ab-svg .ar2{animation:ableft 2.4s ease-in-out -1.2s infinite}
.ab-svg .ln{transform-origin:left center;animation:abtype 3.6s ease-in-out infinite}
.ab-svg .ln2{animation-delay:.5s}
.ab-svg .sp{animation:abspark 2.6s ease-in-out infinite}
.ab-svg .sp2{animation-delay:-1.3s}
.ab-svg .orbit{animation:aborbit 8s linear infinite}
@keyframes abfloat{50%{transform:translateY(-7px)}}
@keyframes abdot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-6px);opacity:1}}
@keyframes abright{0%,100%{transform:translateX(-5px);opacity:.5}50%{transform:translateX(5px);opacity:1}}
@keyframes ableft{0%,100%{transform:translateX(5px);opacity:.5}50%{transform:translateX(-5px);opacity:1}}
@keyframes abtype{0%{transform:scaleX(0);opacity:1}45%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes abspark{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes aborbit{to{stroke-dashoffset:-150}}
@media(prefers-reduced-motion:reduce){.ab-svg *{animation:none!important}}
.ab-bar{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-top:auto;background:#fff;border-radius:14px;
  padding:clamp(12px,1.2vw,18px) clamp(14px,1.6vw,26px)}
.ab-bar span{flex:0 0 auto;border-radius:999px;background:#E6EFE9;padding:9px 20px;font-size:clamp(14px,1.3vw,19px);font-weight:700;color:var(--ink)}
.ab-bar p{padding-left:clamp(14px,1.6vw,24px);border-left:1px solid var(--line);font-size:clamp(14px,1.25vw,18px);color:var(--body)}
.ab-pts{list-style:none;display:grid;gap:clamp(12px,1.2vw,18px)}
.ab-pts li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(18px,2.8vw,44px);
  background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);padding:clamp(20px,2.2vw,32px) clamp(20px,2.6vw,38px)}
.ab-ic{display:grid;place-items:center;width:clamp(64px,6.4vw,100px);height:clamp(64px,6.4vw,100px);border-radius:50%;background:#EEF3EF}
.ab-ic svg{width:52%;height:auto;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ab-ic svg .a{stroke:var(--accent)}
.ab-ic svg .dots{stroke-width:2.4}
.ab-pts h3{font-size:clamp(19px,1.9vw,29px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.ab-pts p{margin-top:8px;font-size:clamp(14.5px,1.3vw,19px);line-height:1.6;color:var(--body);word-break:keep-all}
.ab-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.ab-foot p{display:flex;align-items:center;gap:10px;font-size:clamp(14.5px,1.3vw,18px);color:var(--body)}
.ab-foot p svg{width:22px;height:22px;fill:none;stroke:var(--body);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-foot a{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--ink);border-radius:12px;
  padding:13px 26px;font-size:clamp(15px,1.3vw,18px);font-weight:700;color:var(--ink);transition:background .2s,color .2s}
.ab-foot a:hover{background:var(--ink);color:#fff}
.ab-foot a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:768px){
  .ab-grid{grid-template-columns:1fr}
  .ab-bar{flex-direction:column;align-items:flex-start}
  .ab-bar p{padding-left:0;border-left:0}
  .ab-hero .lead br{display:none}
}

/* ---------- 회사 '함께하는 사람들' — 사진 한 장 + 전문성 카드 넷 + 연결 한 줄 ---------- */
.eyebrow.lined-l{display:inline-flex;align-items:center;gap:14px}
.eyebrow.lined-l::before{content:'';width:44px;height:1px;background:currentColor;opacity:.55}
.tp-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(14px,1.4vw,22px);margin-top:var(--s4)}
.tp-lead{grid-row:span 2}
.tp-lead img{display:block;width:100%;height:auto;aspect-ratio:525/378;object-fit:cover;border-radius:var(--R)}
.tp-lead h3{margin-top:clamp(20px,2.2vw,34px);font-size:clamp(20px,1.9vw,29px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.tp-lead p{margin-top:10px;font-size:clamp(15px,1.35vw,20px);line-height:1.65;color:var(--body)}
.tp{background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);padding:clamp(22px,2.2vw,34px)}
.tp-ic{display:grid;place-items:center;width:clamp(54px,5vw,78px);height:clamp(54px,5vw,78px);border-radius:50%;background:#E6EFE9}
.tp-ic svg{width:48%;height:auto;fill:none;stroke:var(--accent-dk);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tp h3{margin-top:clamp(14px,1.6vw,24px);font-size:clamp(19px,1.8vw,27px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.tp > p:not(.tp-tags){margin-top:8px;font-size:clamp(14.5px,1.25vw,18px);line-height:1.65;color:var(--body);word-break:keep-all}
.tp-tags{margin-top:clamp(14px,1.6vw,22px);gap:8px}
.tp-bar{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-top:clamp(14px,1.4vw,22px);background:#E4EEE7;
  border-radius:var(--R);padding:clamp(14px,1.4vw,20px) clamp(20px,2.6vw,40px)}
.tp-bar > svg{width:clamp(30px,2.6vw,40px);height:auto;flex:0 0 auto;fill:none;stroke:var(--accent-dk);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tp-bar p{flex:1;padding-left:clamp(14px,2vw,28px);border-left:1px solid rgba(34,30,25,.15);font-size:clamp(15px,1.4vw,20px);color:var(--ink)}
.tp-bar a{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding-left:clamp(14px,2vw,28px);border-left:1px solid rgba(34,30,25,.15);
  font-size:clamp(15px,1.35vw,19px);font-weight:700;color:var(--accent-dk)}
.tp-bar a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.tp-bar a:hover svg{transform:translateX(4px)}
@media(max-width:768px){
  .tp-grid{grid-template-columns:1fr}
  .tp-lead{grid-row:auto}
  .tp-lead p br,.tp > p br{display:none}
  .tp-bar{flex-wrap:wrap}
  .tp-bar p{flex:1 1 200px}
  .tp-bar a{padding-left:0;border-left:0}
}

/* ---------- 회사 '고객의 말씀에서 이어온 약속' — 네 카드, 아이콘마다 살짝 움직임 ---------- */
.vws{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.2vw,20px);margin-top:var(--s4)}
.vw{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(18px,2.4vw,36px);
  background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);padding:clamp(22px,2.4vw,40px) clamp(20px,2.2vw,34px);
  transition:transform .3s,box-shadow .3s}
.vw:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(34,30,25,.07)}
.vw-ic{display:grid;place-items:center;width:clamp(76px,7.6vw,120px);height:clamp(76px,7.6vw,120px);border-radius:50%;
  background:#EAF1EC;transition:transform .35s}
.vw:hover .vw-ic{transform:scale(1.05)}
.vw-ic svg{width:54%;height:auto;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vw-ic svg .a{stroke:var(--accent)}
.vw-ic svg .bg{fill:#EAF1EC}
.vw-tag{position:absolute;top:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);font-style:normal;border-radius:999px;
  background:#E6EFE9;padding:7px 16px;font-size:clamp(13px,1.1vw,16px);font-weight:700;color:var(--accent-dk)}
.vw-n{font-size:clamp(14px,1.2vw,17px);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.vw h3{margin-top:6px;padding-right:110px;font-size:clamp(19px,2vw,30px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.vw-d{margin-top:10px;font-size:clamp(14.5px,1.3vw,19px);line-height:1.65;color:var(--body);word-break:keep-all}
.vw-bar{display:flex;align-items:center;gap:clamp(18px,3vw,56px);margin-top:clamp(12px,1.2vw,20px);background:#E4EEE7;
  border-radius:var(--R);padding:clamp(18px,1.8vw,26px) clamp(24px,5vw,80px)}
.vw-bar > svg{width:clamp(40px,3.8vw,58px);height:auto;flex:0 0 auto;fill:none;stroke:var(--accent-dk);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vw-bar > div{padding-left:clamp(18px,3vw,56px);border-left:1px solid rgba(34,30,25,.18)}
.vw-bar b{display:block;font-size:clamp(18px,1.8vw,27px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.vw-bar p{margin-top:4px;font-size:clamp(14px,1.25vw,18px);color:var(--body)}
/* 움직임 — 번개 깜빡, 체크 그려짐, 말풍선 점 튐, 문서 줄 써짐, 전구 빛 반짝 */
.vw-ic svg *,.vw-bar svg *{transform-box:fill-box}
.vw-ic .bolt{animation:vwbolt 3.2s ease-in-out infinite}
.vw-ic .ck,.vw-bar .ck{stroke-dasharray:1;stroke-dashoffset:1;animation:vwcheck 3.2s ease-in-out infinite}
.vw-bar .ck2{animation-delay:.6s}
.vw-ic .dt{stroke-width:4;transform-origin:center;animation:vwdot 1.5s ease-in-out infinite}
.vw-ic .d2{animation-delay:.18s}.vw-ic .d3{animation-delay:.36s}
.vw-ic .b2{animation:vwbob 4s ease-in-out infinite}
.vw-ic .ln{transform-origin:left center;animation:vwline 4s ease-in-out infinite}
.vw-ic .l2{animation-delay:.35s}.vw-ic .l3{animation-delay:.7s}
.vw-ic .ray{animation:vwray 2.4s ease-in-out infinite}
@keyframes vwbolt{0%,100%{opacity:1}45%{opacity:1}50%{opacity:.35}55%{opacity:1}60%{opacity:.5}65%{opacity:1}}
@keyframes vwcheck{0%,15%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes vwdot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@keyframes vwbob{50%{transform:translateY(-2px)}}
@keyframes vwline{0%{transform:scaleX(0)}35%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes vwray{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .vw-ic svg *,.vw-bar svg *{animation:none!important;stroke-dashoffset:0!important}
  .vw,.vw-ic{transition:none}
}
@media(max-width:768px){
  .vws{grid-template-columns:1fr}
  .vw{align-items:start}
  .vw-ic{width:64px;height:64px}
  .vw-tag{position:static;display:inline-block;margin-bottom:8px}
  .vw h3{padding-right:0}
  .vw-d br{display:none}
  .vw-bar{padding:18px 20px}
}

/* ---------- 회사 '기술과 개발 기반' — 여섯 카드, 아이콘이 저마다 조금씩 움직임 ---------- */
.tcs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,20px);margin-top:var(--s4)}
.tc{background:#FFFEFB;border:1px solid #E9E2D6;border-radius:var(--R);padding:clamp(22px,2.2vw,34px);
  transition:transform .3s,box-shadow .3s,border-color .3s}
.tc:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(34,30,25,.07);border-color:#D5E3D9}
.tc-h{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.tc-ic svg{display:block;width:clamp(50px,4.8vw,74px);height:auto;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.tc-ic svg .a{stroke:var(--accent)}
.tc-ic svg .bg{fill:#FFFEFB}
.tc-ic svg .teeth{stroke:var(--accent);stroke-width:4;stroke-dasharray:3.3 3.38;fill:none}
.tc-ic svg .gear circle:not(.teeth){stroke:var(--accent)}
.tc-ic svg .chip{fill:#FFFEFB;stroke:var(--accent-dk)}
.tc-ic svg text{fill:var(--accent-dk);stroke:none;font-size:11.5px;font-weight:800;font-family:inherit}
.tc-ic svg .led{stroke-width:3.4}
.tc h3{font-size:clamp(19px,1.8vw,27px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.tc-en{margin-top:4px;font-size:clamp(12.5px,1.05vw,15px);letter-spacing:.04em;color:var(--muted)}
.tc-d{margin-top:clamp(16px,1.8vw,26px);font-size:clamp(14.5px,1.3vw,19px);color:var(--body);word-break:keep-all}
.tc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,1.6vw,22px)}
.tc-tags span{border-radius:999px;background:#F1EEE8;padding:7px 16px;font-size:clamp(13.5px,1.15vw,16px);color:var(--ink);
  transition:background .2s,color .2s}
.tc-tags span:hover{background:#E6EFE9;color:var(--accent-dk)}
/* 카드가 화면에 들어오면 태그가 하나씩 올라온다 */
.tc.rv .tc-tags span{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s,background .2s,color .2s}
.tc.rv.in .tc-tags span{opacity:1;transform:none}
.tc-tags span:nth-child(2){transition-delay:.05s}.tc-tags span:nth-child(3){transition-delay:.1s}
.tc-tags span:nth-child(4){transition-delay:.15s}.tc-tags span:nth-child(5){transition-delay:.2s}
.tc-tags span:nth-child(6){transition-delay:.25s}.tc-tags span:nth-child(7){transition-delay:.3s}
.tc-tags span:nth-child(n+8){transition-delay:.35s}.tc-tags span:nth-child(n+12){transition-delay:.45s}
.tc-note{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,36px);margin-top:var(--s4);
  font-size:clamp(13.5px,1.2vw,17px);color:var(--accent-dk);text-align:center}
.tc-note::before,.tc-note::after{content:'';flex:0 0 clamp(24px,4vw,64px);height:1px;background:currentColor;opacity:.4}
/* 아이콘 움직임 — 톱니가 돌고, 서버 불빛이 깜빡이고, 막대가 자라고, 칩의 신호가 오가고, 화면에 줄이 써진다 */
.tc-ic svg *{transform-box:fill-box}
.tc-ic .gear{transform-origin:center;animation:tcspin 9s linear infinite}
.tc-ic .gear.rev{animation-direction:reverse}
.tc-ic .led{animation:tcled 1.6s steps(1) infinite}
.tc-ic .led.l2{animation-delay:.8s}
.tc-ic .bar{transform-origin:center bottom;animation:tcbar 2.4s ease-in-out infinite}
.tc-ic .b2{animation-delay:.2s}.tc-ic .b3{animation-delay:.4s}
.tc-ic .node{animation:tcnode 2.4s ease-in-out infinite}
.tc-ic .n2{animation-delay:.6s}.tc-ic .n3{animation-delay:1.2s}.tc-ic .n4{animation-delay:1.8s}
.tc-ic .ln{transform-origin:left center;animation:tcline 3.6s ease-in-out infinite}
.tc-ic .ln.l2{animation-delay:.4s}
@keyframes tcspin{to{transform:rotate(360deg)}}
@keyframes tcled{0%{opacity:1}50%{opacity:.25}}
@keyframes tcbar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes tcnode{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes tcline{0%{transform:scaleX(0)}40%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .tc-ic svg *{animation:none!important}
  .tc,.tc.rv .tc-tags span{transition:none}
}
@media(max-width:768px){
  .tcs{grid-template-columns:1fr}
  .tc-note{font-size:13.5px}
  .tc-note::before,.tc-note::after{display:none}
}

/* ---------- 회사 '함께한 기업 · 기관' — 이름 타일 ---------- */
.pts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,20px);margin-top:var(--s4)}
.pts a,.pts span{display:grid;place-items:center;height:clamp(72px,6.6vw,108px);padding:0 12px;text-align:center;
  background:#FFFEFB;border:1px solid #E9E2D6;border-radius:14px;font-size:clamp(16px,1.7vw,26px);font-weight:600;
  letter-spacing:-.02em;color:var(--ink);transition:transform .25s,border-color .25s,box-shadow .25s,color .25s}
.pts a:hover{transform:translateY(-3px);border-color:#CFE0D4;box-shadow:0 12px 26px rgba(34,30,25,.06);color:var(--accent-dk)}
.pts-go{display:flex;justify-content:flex-end;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.pts-go a{display:inline-flex;align-items:center;gap:10px;font-size:clamp(15px,1.3vw,19px);color:var(--accent-dk)}
.pts-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.pts-go a:hover svg{transform:translateX(4px)}
@media(max-width:768px){.pts{grid-template-columns:1fr 1fr}.pts a,.pts span{height:64px;font-size:15px}}

/* ---------- 문의 폼 레이어 팝업 ---------- */
html.cf-lock{overflow:hidden}
.cf-back{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;
  background:rgba(34,30,25,.46);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.cf-back[hidden]{display:none}
.cf-back.open{opacity:1}
.cf{position:relative;width:min(660px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  background:#FFFEFB;border-radius:22px;box-shadow:0 30px 80px rgba(20,14,8,.28);transform:translateY(14px);transition:transform .25s}
.cf-back.open .cf{transform:none}
.cf-body{padding:clamp(24px,3.4vw,44px)}
.cf-x{position:absolute;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;cursor:pointer;color:var(--body)}
.cf-x:hover{background:var(--panel)}
.cf-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cf-eb{font-size:14px;font-weight:700;color:var(--accent-dk)}
.cf-t{margin-top:8px;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.cf-lead{margin-top:8px;font-size:15px;color:var(--body)}
.cf-form{display:grid;gap:16px;margin-top:var(--s3)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-f{display:grid;gap:7px;min-width:0;border:0;padding:0;margin:0}
.cf-f > span,.cf-f legend{font-size:14px;font-weight:600;color:var(--ink);padding:0}
.cf-f em,.cf-agree em{font-style:normal;color:#B5462F}
.cf-f input,.cf-f textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #DDD5C7;border-radius:10px;
  padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.cf-f textarea{resize:vertical;min-height:140px;line-height:1.6}
.cf-f input::placeholder,.cf-f textarea::placeholder{color:#B3AA9C}
.cf-f input:focus,.cf-f textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,90,69,.14)}
.cf-f [aria-invalid="true"]{border-color:#B5462F}
.cf-kind{display:flex;flex-wrap:wrap;gap:8px}
.cf-kind legend{width:100%;margin-bottom:7px}
.cf-kind label{position:relative;cursor:pointer}
.cf-kind input{position:absolute;opacity:0;pointer-events:none}
.cf-kind span{display:inline-block;border:1px solid #DDD5C7;border-radius:999px;padding:8px 16px;font-size:14.5px;color:var(--body);background:#fff;transition:all .2s}
.cf-kind input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.cf-kind input:focus-visible + span{box-shadow:0 0 0 3px rgba(47,90,69,.25)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf-agree{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink);cursor:pointer}
.cf-agree input{width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto}
.cf-agree input[aria-invalid="true"]{outline:2px solid #B5462F;outline-offset:2px}
.cf-policy{margin-top:-8px;font-size:13px;line-height:1.6;color:var(--muted)}
.cf-err{border-radius:10px;background:#FBEDE8;color:#9A3A26;padding:10px 14px;font-size:14px}
.cf-send{display:flex;justify-content:center;align-items:center;gap:10px;border:0;border-radius:12px;background:var(--ink);color:#fff;
  font:inherit;font-size:17px;font-weight:700;padding:16px;cursor:pointer;transition:background .2s}
.cf-send:hover{background:#3A332B}
.cf-send svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cf-send.busy{opacity:.6;cursor:progress}
.cf-done{text-align:center;padding:var(--s4) 0 var(--s2)}
.cf-ok{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#E6EFE9}
.cf-ok svg{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cf-done h3{margin-top:var(--s2);font-size:24px;font-weight:800;color:var(--ink)}
.cf-done p{margin-top:8px;color:var(--body)}
.cf-close2{margin-top:var(--s3);border:1.5px solid var(--ink);border-radius:10px;background:none;font:inherit;font-weight:700;padding:11px 28px;cursor:pointer}
@media(max-width:768px){
  .cf-back{padding:0;place-items:end center}
  .cf{width:100%;max-height:92dvh;border-radius:20px 20px 0 0}
  .cf-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cf-back,.cf{transition:none}}

.starts{margin-top:var(--s3);background:#E9F0EA;border-radius:var(--R);
  padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,40px)}
.starts h3{font-size:clamp(17px,1.5vw,21px);font-weight:700;color:var(--ink)}
.starts ul{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s3)}
.starts li{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);padding:6px clamp(16px,3vw,44px);
  font-size:clamp(15px,1.35vw,19px);color:var(--ink)}
.starts li:first-child{padding-left:0}
.starts li + li{border-left:1px solid rgba(34,30,25,.15)}
.starts svg{width:clamp(34px,3vw,46px);height:auto;flex:0 0 auto;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.starts svg.bars{stroke:none;fill:var(--accent-br)}
.starts-go{display:flex;justify-content:flex-end;margin-top:var(--s3)}
.starts-go a{display:inline-flex;align-items:center;gap:8px;font-size:clamp(15px,1.3vw,17px);font-weight:600;
  color:var(--accent-dk);text-decoration:underline;text-underline-offset:6px}
.starts-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.starts-go a:hover svg{transform:translateX(4px)}
@media(max-width:768px){
  .cap{grid-template-columns:1fr}
  .starts ul{grid-template-columns:1fr;gap:6px}
  .starts li{padding:10px 0}
  .starts li + li{border-left:0;border-top:1px solid rgba(34,30,25,.12)}
}

/* 실제로 받는 요청 — 말풍선에 요청 원문, 아래에 해당하는 일 */
.asks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:var(--s2)}
@media(max-width:768px){.asks{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.asks{grid-template-columns:1fr}}
.ask{background:var(--paper);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:18px 20px}
.ask q{display:block;font-size:16px;font-weight:600;color:var(--ink);line-height:1.5;quotes:'“' '”'}
.ask span{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.ask span::before{content:'→ '}

/* 직접 만든 것 — 설명 바로 옆에 실제 화면 */
.proof{display:grid;grid-template-columns:1fr 1.45fr;gap:var(--s5);align-items:center;
  padding:var(--s5) 0;border-top:1px solid var(--line);margin-top:var(--s4)}
.proof + .proof{margin-top:0}
@media(max-width:768px){.proof{grid-template-columns:1fr;gap:var(--s3)}}
.proof p{font-size:15.5px;margin-top:var(--s2)}
.proof p.small{margin-top:2px;font-size:13.5px}
.proof-t{font-size:24px;margin-top:var(--s2)}
.proof figure.shot{margin-top:0}
.st{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;
  background:var(--panel);color:var(--muted)}
.band .st{background:var(--paper)}
.st.live{color:#5A7349}
.st.soon{color:var(--slate)}

@media(max-width:768px){
  .duo .vs-row{background:var(--paper)}
  .duo .vs-a{border-right:0;padding-bottom:var(--s2)}
  .duo .vs-b{display:block;padding:0 var(--s3) var(--s3)}
  .duo .vs-k{padding-bottom:var(--s1)}
}

/* 모바일 : 항목마다 '나눠 맡길 때 → 딥이모션' 순서로 붙여 읽는다 */
@media(max-width:768px){
  .vs{border:0;background:none;border-radius:0;overflow:visible;display:grid;gap:var(--s3)}
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--R);
    overflow:hidden;background:var(--panel)}
  .vs-row+.vs-row>.vs-k,.vs-row+.vs-row>.vs-a,.vs-row+.vs-row>.vs-b{border-top:0}
  .vs-k{border-right:0;padding:var(--s3) var(--s3) 6px}
  .vs-a{display:block;padding:0 var(--s3) var(--s3);font-size:15px}
  .vs .vs-m{display:block;font-size:12.5px;color:var(--muted);margin:0 0 2px;line-height:1.5}
  .vs-b{padding:var(--s3)}
  .vs-b b{font-size:16.5px}
}

/* ---------- (구) 비교 패널 — 다른 곳에서 쓸 수 있어 남겨 둠 ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.cp{border:1px solid var(--line);border-radius:var(--R);padding:var(--s4);background:var(--paper);
  display:flex;flex-direction:column}
.cp-t{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:var(--s3)}
/* 설명은 항상 패널 바닥에 붙인다 — 두 패널 높이가 달라도 나란히 읽힌다 */
.cp-n{margin-top:auto;padding-top:var(--s3);font-size:13.5px;color:var(--muted);line-height:1.6}

/* 흐름: 우리 회사 → 네 곳 / 우리 회사 → 한 곳 */
.node{display:block;max-width:150px;margin:0 auto;text-align:center;
  border:1px solid var(--line);border-radius:999px;padding:7px 0;
  font-size:13.5px;color:var(--ink);background:var(--paper)}
.stem{display:block;width:1px;height:20px;margin:0 auto;background:var(--line)}

.scatter{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scatter div{border:1px dashed var(--line);border-radius:var(--r);padding:16px 12px;
  font-size:14px;text-align:center;color:var(--body)}
.unified{border:1.5px solid var(--ink);border-radius:var(--r);padding:var(--s3)}
.unified b{display:block;font-size:15px;color:var(--ink);margin-bottom:12px;text-align:center}
.u-items{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.u-items span{background:var(--panel);border-radius:8px;padding:6px 12px;font-size:13.5px;color:var(--body)}

/* 오른쪽(우리) 패널은 진하게 — 어느 쪽이 답인지 한눈에 */
.cp.on{background:var(--ink);border-color:var(--ink)}
.cp.on .cp-t{color:rgba(255,255,255,.55)}
.cp.on .cp-n{color:rgba(255,255,255,.62)}
.cp.on .node{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.cp.on .stem,.cp.on .split-bar{background:rgba(255,255,255,.3)}
.cp.on .unified{border-color:rgba(255,255,255,.4)}
.cp.on .unified b{color:#fff}
.cp.on .u-items span{background:rgba(255,255,255,.1);color:rgba(255,255,255,.86)}

@media(max-width:768px){
  .compare{gap:12px}
  .cp{padding:var(--s3) 14px;border-radius:14px}
  .cp-t{font-size:11px;margin-bottom:var(--s2)}
  .node{font-size:12px;max-width:none}
  .scatter{gap:7px}
  .scatter div{font-size:12.5px;padding:12px 4px}
  .unified{padding:12px 10px}
  .unified b{font-size:13px;margin-bottom:9px}
  .u-items{gap:5px}
  .u-items span{font-size:11.5px;padding:4px 8px}
  .cp-n{font-size:12px;padding-top:var(--s2)}
}
@media(max-width:768px){
  .scatter{grid-template-columns:1fr}
  .scatter div{padding:9px 4px}
}

/* ---------- 타임라인 : 가로(데스크톱) → 세로(모바일) ---------- */
.tl{display:flex;margin-top:var(--s5)}
.tl-i{flex:1;border-top:1.5px solid var(--line);padding:var(--s3) var(--s3) 0 0;position:relative}
.tl-i::before{content:'';position:absolute;top:-5px;left:0;width:9px;height:9px;
  border-radius:50%;background:var(--muted)}
.tl-i.now{border-top-color:var(--ink)}
.tl-i.now::before{background:var(--ink)}
.tl-i .y{font-size:13px;font-weight:700;color:var(--slate);letter-spacing:.02em}
.tl-i b{display:block;font-size:16px;color:var(--ink);margin-top:6px}
.tl-i p{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.6}
@media(max-width:768px){
  .tl{flex-direction:column}
  .tl-i{border-top:0;border-left:1.5px solid var(--line);padding:0 0 var(--s4) var(--s3)}
  .tl-i:last-child{padding-bottom:0}
  .tl-i::before{top:3px;left:-5px}
}

/* ---------- 경로 비교 ---------- */
.path{margin-top:var(--s4);border-top:1px solid var(--line)}
.path-r{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.path-r .lb{flex:0 0 140px;font-size:13px;color:var(--muted)}
@media(max-width:768px){.path-r .lb{flex:0 0 100%}}
.path-r em{font-style:normal;background:var(--panel);border-radius:8px;padding:7px 13px;
  font-size:14px;color:var(--body)}
.path-r i{font-style:normal;color:var(--muted);font-size:13px}
.path-r.on em{background:var(--ink);color:#fff;font-weight:600}
.path-r.on i{color:var(--ink)}

/* ---------- 사진 밴드 ---------- */
.photo{width:100%;height:auto;border-radius:var(--R);margin-top:var(--s5);display:block}

/* ---------- 아이콘 ----------
   선 아이콘만 씁니다. 색은 currentColor라 팔레트를 따라가므로
   나중에 색을 바꿔도 아이콘은 손댈 필요가 없습니다. */
/* ---------- 실제 화면 캡처 ---------- */
figure.shot{margin-top:var(--s5)}
figure.shot img{width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:var(--R);background:#fff}
figure.shot figcaption{margin-top:var(--s2);font-size:13.5px;color:var(--muted);line-height:1.7}

.ic{width:22px;height:22px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic-box{width:52px;height:52px;border:1px solid var(--line);border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);margin-bottom:var(--s3)}
.ic-box .ic{width:24px;height:24px}
.pillar:hover .ic-box,.product:hover .ic-box{border-color:var(--ink)}

/* 목록 앞에 붙는 작은 아이콘 */
.team-list b{display:flex;align-items:center;gap:10px}
.team-list .ic{width:19px;height:19px;color:var(--muted)}
.info-rows .k{display:flex;align-items:center;gap:9px}
.info-rows .ic{width:17px;height:17px;color:var(--muted)}

/* ---------- 안 받는 일 ---------- */
.nolist{margin-top:var(--s3)}
.nolist li{position:relative;padding:11px 0 11px 26px;font-size:15.5px;border-bottom:1px solid var(--line)}
.nolist li::before{content:'';position:absolute;left:0;top:22px;width:11px;height:1.5px;background:var(--muted)}

/* ---------- 팀 ---------- */
.team-list{margin-top:var(--s4);border-top:1px solid var(--line)}
.team-list li{display:grid;grid-template-columns:220px 1fr;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
@media(max-width:768px){.team-list li{grid-template-columns:1fr;gap:6px}}
.team-list b{font-size:16px;font-weight:600;color:var(--ink)}
.team-list p{font-size:15px}

/* ---------- 기술 스택 ---------- */
.stack-group{margin-top:var(--s4)}
.stack{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.stack span{border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--body)}

/* ---------- 파트너 ---------- */
.partners{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s3)}
.partners a,.partners span{background:var(--panel);border-radius:999px;padding:9px 18px;
  font-size:14.5px;color:var(--body);transition:background .25s,color .25s}
.partners a:hover{background:var(--ink);color:#fff}

/* ---------- 문의 ---------- */
.cta{text-align:center}
.cta .lead{max-width:38em;margin:var(--s3) auto 0}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;
  padding:15px 28px;border-radius:12px;font-size:15px;font-weight:600;margin-top:var(--s4);
  transition:transform .25s,opacity .25s}
.btn:hover{transform:translateY(-2px);background:var(--accent-hv)}
.info-rows{max-width:540px;margin:var(--s5) auto 0;text-align:left}
.info-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.info-rows .k{font-size:13.5px;color:var(--muted);flex-shrink:0}
.info-rows .v{font-size:15.5px;color:var(--ink);font-weight:600;text-align:right}

/* ---------- 푸터 ---------- */
footer{border-top:1px solid var(--line);padding:var(--s5) 0 var(--s4)}
.foot-name{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.foot-info{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:var(--s3);
  font-size:13.5px;color:var(--muted);line-height:1.7}
.foot-info li{display:flex;gap:7px}
.foot-info li b{font-weight:500;color:#B6AC9E}
.foot-info a{color:var(--body)}
.foot-info a:hover{color:var(--ink)}
.foot-copy{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:12.5px;color:#AFA597}

/* 미확정 표시 — 배포 전 삭제 */
.todo{background:#FFF3C4;color:#7A5B00;border-radius:5px;padding:1px 7px;font-size:12px;font-weight:700}

/* ---------- 스크롤 등장 ---------- */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}