@charset "utf-8";
/* 홈 (랜딩) 전용 — Figma 235:61667 (1920x12888) 실측 기준 */
/* ── hero: 배포본과 동일한 영상 ───────────────────────────────────────── */
/* 영상(1920x978)에 카피와 "상담 신청" 버튼이 구워져 있다.
   · 구운 카피가 온전히 보이는 폭 → 영상에 맡기고 버튼 위에 클릭 영역만 얹는다
   · 잘리는 폭            → .is-overlay 로 영상을 배경으로 낮추고 DOM 카피를 노출한다 */
.hhero{position:relative;aspect-ratio:1920/978;min-height:420px;overflow:hidden;
  background:#0C0F12;color:#fff}
.hhero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hhero-hotspot{position:absolute;display:none;border-radius:10px}
.hhero-hotspot.is-placed{display:block}
.hhero-hotspot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hhero-in{position:relative;height:100%;display:flex;align-items:flex-end;
  padding-bottom:9.3%;padding-top:calc(var(--nav-h) + 24px);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.hhero.is-overlay .hhero-in{opacity:1;pointer-events:auto}
/* 좌측 어둡게 그라디언트(::after)는 제거 — 영상 자체에 dim 이 구워져 있다(QA 2026-08-30 김형주) */
.hhero.is-overlay .hhero-in{z-index:1}
.hhero-eyebrow{font-size:clamp(15px,1.0417vw,20px);line-height:1.5;font-weight:500;
  color:#fff;letter-spacing:-.01em}
.hhero h1{margin-top:clamp(10px,.8333vw,16px);
  font-size:clamp(34px,2.9167vw,56px);line-height:clamp(42px,3.5417vw,68px);
  font-weight:700;letter-spacing:-.00714em}
.hhero .btn{margin-top:clamp(18px,1.6667vw,32px);width:clamp(132px,9.375vw,180px);
  height:clamp(44px,3.0208vw,58px);border-radius:clamp(9px,.625vw,12px);
  font-size:clamp(15px,1.0417vw,20px);font-weight:700;letter-spacing:-.02em;
  background:#fff;color:var(--ink);border-color:#fff}
.hhero .btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ── 히어로 채팅 오버레이 (시안 271:48953 chat_ui) ─────────────────────
   카드 겉모습은 시안 값 그대로: 360w · padding 20 · radius 16 · blur 16 ·
   bg rgba(255,255,255,.1) · 그라디언트 스트로크 1px · 카드 간격 12.
   모션은 시안에 없다(motionSummary: null) — 교체 전 히어로 영상이 하던 것을
   프레임 실측해서 옮겼다: 아래에서 올라오며 나타나고, 새 카드가 붙을 때마다
   스택이 위로 밀리고, 위로 벗어난 것은 사라진다. 약 2초 간격. */
/* 위로 벗어나는 카드는 서서히 사라진다 — 잘린 단면이 보이지 않게.
   여기에 mask 를 걸면 안 된다: mask 가 붙은 조상은 backdrop root 라서 그 바깥의
   히어로 영상이 카드의 backdrop 에서 빠지고 backdrop-filter 가 통째로 죽는다
   (backdrop-filter 를 invert(1) 로 바꿔도 화면이 안 변하는 것으로 실증.
    QA 944:58199 "background blur 효과 적용"). 페이드는 카드별 --fade 로 준다. */
.hhero-chat{position:absolute;right:var(--gutter);bottom:9.3%;width:424px;height:60%;
  overflow:hidden;pointer-events:none}
.hhero-chat-stack{position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  transition:transform .5s var(--ease)}
.hh-card{position:relative;width:360px;padding:20px;border-radius:16px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;gap:8px;
  opacity:0;
  transition:opacity .4s var(--ease)}
/* 시안 스트로크는 단색이 아니라 그라디언트다 — 히어로 렌더 픽셀 실측(QA 944:58199):
   좌상 흰 .50 → 우하 .18. border 로는 못 그려서 1px 링을 mask 로 뚫는다. */
.hh-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.09) 100%); /* QA 2026-08-30 김형주: 알파 50% 축소 */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hh-card.is-in{opacity:var(--fade,1)}
.hh-card.is-me{align-self:flex-end}
.hh-who{display:flex;align-items:center;gap:6px;
  font-size:16px;line-height:20px;font-weight:500;letter-spacing:-.2px;
  color:#fff;opacity:.7}
.hh-ava{width:24px;height:24px;border-radius:6px;flex:0 0 24px;object-fit:cover;
  border:1px solid rgba(255,255,255,.5)}
.hh-card.is-agent .hh-ava{border:0;border-radius:0}
.hh-msg{font-size:18px;line-height:22px;font-weight:500;letter-spacing:-.4px;color:#fff}
.hh-rows{display:flex;flex-direction:column;width:100%}
.hh-row{display:flex;gap:8px;align-items:center;padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.2);color:#fff}
.hh-row b{font-size:14px;line-height:18px;font-weight:700;letter-spacing:-.2px;opacity:.7;
  white-space:nowrap}
.hh-row span{flex:1;font-size:18px;line-height:22px;font-weight:500;letter-spacing:-.4px}
.hh-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  font-size:14px;line-height:18px;font-weight:700;letter-spacing:-.2px;color:#fff}

@media (max-width:1200px){ .hhero-chat{width:340px} .hh-card{width:300px} }
/* 모바일 시안(214:60753 > 360:63519)에도 채팅이 있다 — 히어로 하단에 2장.
   좌표 실측(375x812 기준): 묶음 (20,538) 335x196, 카드 폭 234 / 260, 간격 12.
   전에는 숨겨 놨는데 QA 944:57757 "PC와 동일한 인터랙션 적용이 필요합니다" 대상이었다. */
@media (max-width:1023px){
  /* %% 높이는 min-height 만 있는 부모에서 확정되지 않아 86px 로 찌그러졌다 — px 로 고정한다.
     시안 375 기준 (20,538) 335x196, 아래 여백 78 → 폭은 좌우 20 여백, 높이·여백은 그대로. */
  /* 시안(214:60753) 실측 — 대화 묶음은 거터가 아니라 x74..352 에 들어간다.
     에이전트 카드 255 / 대표 카드 231, 마지막 카드 밑선 730. */
  .hhero-chat{right:6.1%;left:19.7%;width:auto;bottom:78px;height:204px}
  .hh-card{width:91.7%;padding:12px;border-radius:12px;gap:6px}
  .hh-card.is-me{width:83.1%}
  .hh-who{font-size:12px;line-height:16px;gap:4px}
  .hh-ava{width:16px;height:16px;flex-basis:16px;border-radius:4px}
  .hh-msg{font-size:13px;line-height:18px}
  .hh-row b{font-size:11px;line-height:14px}
  .hh-row span{font-size:13px;line-height:18px}
  .hh-cta{padding:4px 8px;font-size:11px;line-height:14px}
}
@media (prefers-reduced-motion:reduce){
  .hhero-chat-stack,.hh-card{transition:none}
}
@media (max-width:1023px){
  /* 모바일 시안 히어로는 375x812 = 화면 한 장이다(전에는 78vh). */
  .hhero{aspect-ratio:auto;min-height:100vh;min-height:100svh;display:flex}
  /* 채팅은 .hhero-in 안에 있어 이 박스를 기준으로 앉는다 — 높이가 내용만큼(357)이면
     히어로 하단이 아니라 카피 바로 아래에 붙어 헤드라인과 겹친다. 히어로 높이만큼 늘린다. */
  /* 모바일 시안은 카피가 상단(y128), 채팅이 하단(y538)이다 — 데스크탑처럼 하단 정렬하면
     둘이 같은 자리에서 겹친다. 모바일만 상단 정렬로 뒤집는다. */
  .hhero-in{align-items:flex-start;padding-top:128px;padding-bottom:56px;
    align-self:stretch;height:auto}
}

/* ── overview: 메시 배경 + 로고 ───────────────────────────────────────── */
/* 시안 주석(김형주 2026-08-25): overview 를 풀스크린으로 두고, 스크롤에 맞춰 헤드라인 색이
   채워진 뒤 다음 섹션으로 넘어간다(레퍼런스 finsightlabs.co.kr/about).
   색은 시안 개정(2026-08-29 확인, 267:48481 · 모바일 297:468)으로 미채움 Gray_6(#D9D9D9) →
   채움 Brand(#FF6000). 이전 판은 Gray_9(#8D8D8D) → Black 이었다.
   구현 = 바깥 래퍼에 스크롤 거리를 주고 섹션을 sticky 로 붙인다. 채우는 일은 home.js. */
.overview-pin{position:relative}   /* 2026-08-30: sticky 고정(280vh) 폐기 — 섹션 한 장, 채움은 1회 재생(home.js) */
.overview{position:relative;min-height:100vh;display:flex;align-items:center;
  padding-block:clamp(72px,8.33vw,160px);overflow:hidden;
  /* 시안 실측(모서리 픽셀): 좌상 #EFE2DE(따뜻한 회분홍) · 우하 #DED6D9(차가운 회분홍),
     우상·좌하·중앙은 흰색. 이전 값은 주황·파랑이 너무 진했다. */
  background:
    radial-gradient(58% 54% at 0% 0%,   #EFE2DE 0%, rgba(239,226,222,0) 72%),
    radial-gradient(60% 56% at 100% 100%, #DED6D9 0%, rgba(222,214,217,0) 72%),
    #fff}
.overview .wrap{width:100%}
/* 채움 색 = 잉크(검정). QA 2026-08-30 송지영 "원래 디자인대로 검정 텍스트로" + 최명군 승인.
   (Figma 267:48481 은 채움부가 #FF6000 — 어느 쪽이 최종인지는 사용자 확정 대기, 토큰 한 줄로 전환 가능)
   JS 가 없으면 채워진 색으로 읽힌다 — 회색 시작은 .ov-live(스크립트 부착) 일 때만. */
.ov-fill{color:var(--ink)}
.ov-fill.ov-live{color:#D9D9D9}
.ov-fill.ov-live i{font-style:normal;color:inherit;transition:color .2s linear}
.ov-fill.ov-live i.on{color:var(--ink)}

@media (max-width:1023px){
  .overview{min-height:0;padding-block:clamp(72px,17.45vw,335px)}
  /* 모바일 시안(297:468)은 28/34 Bold 4줄 — 데스크탑 스케일(34/48)로 두면 5줄로 흘러 커 보인다 */
}
@media (prefers-reduced-motion:reduce){
  .js .ov-fill i{transition:none}
}
/* ── overview 로고 마퀴 ───────────────────────────────────────────────── */
/* 배포본 실측: 로고 높이 44, 초당 50px, 1행 좌→우 진행(normal), 2행 반대(reverse). */
.logos{margin-top:clamp(28px,3.33vw,64px);
  --logo-speed:23s;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-row{overflow:hidden}
.logo-row + .logo-row{margin-top:30px}
.logo-track{display:flex;width:max-content;gap:40px;align-items:center;
  animation:logo-scroll var(--logo-speed) linear infinite}
.logo-row.is-rev .logo-track{animation-direction:reverse}
.logo-track img{height:44px;width:auto;flex:0 0 auto;opacity:.9}
.logos:hover .logo-track{animation-play-state:paused}
@keyframes logo-scroll{to{transform:translateX(calc(-50% - 20px))}}
@media (max-width:760px){
  /* 모바일 시안(332:59572): 로고 슬롯 103x36, 슬롯 간격 26 → 높이 36 */
  .logo-track{gap:26px}
  .logo-track img{height:36px}
  .logos{--logo-speed:17s}
}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}}

/* ── pain point ───────────────────────────────────────────────────────── */
/* QA 944:57614 "상단의 그라디언트가 잘리지 않고 연결되서 보이게" — overview 우하단
   radial 이 섹션 경계에서 잘려 있었다. 같은 타원의 아랫절반을 pain 상단 우측에 이어 그린다
   (overview 는 100vh 라 반지름을 60vw x 56vh 로 옮기면 경계에서 맞물린다).
   overview 가 있는 홈에만 건다 — 다른 페이지의 pain 은 위 섹션이 다르다. */
.p-home .pain{position:relative;background:
  radial-gradient(60vw 56vh at 100% 0%, #DED6D9 0%, rgba(222,214,217,0) 72%),
  #fff}
.pain-head{display:flex;align-items:flex-start;gap:40px}
.pain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.625%;
  margin-top:clamp(56px,9.27vw,178px)}
/* 시안 주석(김형주 2026-08-25): mouse hover 시 상단 stroke Gray_4 → Primary.
   Gray_4 = #E8E8E8 (Figma 원본 변수 실측). 홈·에이전트·플랫폼 공통. */
.pain-item{min-height:clamp(0px,13.021vw,250px);padding-top:21px}
.pain-item:first-child{grid-column-start:2}
/* 테두리는 커서를 "따라간다" — 한 번에 하나만 주황이다.
   그리드에 마우스가 들어오면 기본 주황(lead)을 회색으로 내리고, 지금 가리킨 카드만 주황으로 올린다.
   (이 처리가 없으면 lead 가 계속 주황이라 주황이 둘이 되고, 옮겨간 것으로 안 보인다 — 에이전트 카드와 같은 규칙) */
/* 시안 332:60065 실측: 26/32 SemiBold ls -0.4 (28/700/-0.84 로 그려 뒀었다).
   급여도 같은 토큰이라 payroll.css 와 값이 맞는다. */
.pain-n{font-size:clamp(20px,1.3542vw,26px);line-height:clamp(26px,1.6667vw,32px);
  font-weight:600;letter-spacing:-.0154em}
.pain-n span{font-size:.86em}
/* 시안 332:60066: 24/36 Regular #646464 ls -0.2 (행간 1.5=36 은 맞고 색·자간이 달랐다) */
.pain-l{margin-top:6px;font-size:clamp(16px,1.25vw,24px);line-height:1.5;color:#646464;
  letter-spacing:-.00833em}
.pain-r{margin-top:clamp(24px,3.39vw,65px);text-align:right;font-size:clamp(16px,1.1458vw,22px);
  line-height:1.55;font-weight:700;color:var(--brand);letter-spacing:-.02em}
.pain-r::before{content:"→";margin-right:10px;font-weight:400}
@media (max-width:1100px){
  .pain-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6%}
  .pain-item:first-child{grid-column-start:1}
}
@media (max-width:1023px){
  .pain-head{flex-direction:column;gap:16px}
  /* 모바일 시안 614:6379 — 급여와 같은 규격 (payroll.css 단일 기준) */
  .pain-grid{grid-template-columns:1fr;gap:0;margin-top:58px}
  .pain-item{min-height:0;padding:20px 0}
  .pain-n span{font-size:1em}
  .pain-n{font-size:20px;line-height:30px;font-weight:600;letter-spacing:-.02em}
  .pain-l{margin-top:2px;font-size:16px;line-height:24px;color:#646464}
  .pain-r{margin-top:10px;text-align:right;font-size:20px;line-height:26px}
  .pain-r::before{margin-right:6px}
}

/* ── comparison ───────────────────────────────────────────────────────── */
/* 시안 246:45958 은 상하 160 (h2 y=160, 그리드 밑 758 → 918). 120 으로 두어 섹션이 -77 이었다 —
   홈 시안 총높이가 12888 → 12970 으로 오른 차이의 실체. 다른 섹션과 같은 --pad-sec 를 쓴다. */
.cmp{padding-block:var(--pad-sec)}
.cmp-grid{display:grid;grid-template-columns:33.29% 33.29% 33.42%;align-items:end;
  margin-top:clamp(40px,5.21vw,100px)}
.cmp-col{padding-top:54px}
.cmp-col h3{display:flex;align-items:center;gap:10px;padding:0 24px 24px;
  font-size:clamp(16px,1.0417vw,20px);line-height:1.5;font-weight:700;letter-spacing:-.02em}
.cmp-ic{width:32px;height:32px;flex:0 0 auto;background:center/contain no-repeat}
.cmp-ic.ic-monitor{background-image:url("hm-cmp-1.png")}
.cmp-ic.ic-user{background-image:url("hm-cmp-2.png")}
.cmp-col li{position:relative;padding:24px 24px 24px 54px;border-top:1px solid var(--line);
  font-size:clamp(14px,.9375vw,18px);line-height:1.55;color:#4E4E4E;letter-spacing:-.02em}
.cmp-col li::before{content:"";position:absolute;left:24px;top:26px;width:22px;height:22px;
  border-radius:50%;background:#E5484D}
.cmp-col li::after{content:"";position:absolute;left:31px;top:33px;width:8px;height:8px;
  background:
    linear-gradient(45deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%)}
/* 알프레드 카드 — 이미지 대신 DOM.
   시안(1920)은 좌 2열의 행 구분선(564·641)과 카드 안 행이 정확히 같은 줄에 놓인다.
   이미지로는 맞출 수 없어(QA 2026-08-28) 행 높이를 좌 2열과 같은 값(24+27.9+24+1=77)으로
   두고 그리드를 아래로 정렬한다 — 세 열의 마지막 행 밑선이 카드 밑선과 만난다. */
.cmp-alfred{margin:0;border-radius:var(--r-md);overflow:hidden;color:#fff;
  background:
    radial-gradient(96% 78% at 104% 104%, rgba(255,176,120,.92) 0%, rgba(255,176,120,0) 58%),
    radial-gradient(78% 62% at -4% -6%, rgba(255,168,110,.9) 0%, rgba(255,168,110,0) 62%),
    radial-gradient(148% 122% at 24% 52%, #FB6A1A 0%, #FC7A32 60%, #FD8B4A 100%),
    #FB7A33;
  box-shadow:0 24px 60px rgba(255,96,0,.22)}
.cmp-a-head{padding:clamp(24px,2.0833vw,40px) clamp(18px,1.3542vw,26px) clamp(10px,.7292vw,14px)}
.cmp-a-brand{display:flex;align-items:center;gap:clamp(8px,.625vw,12px);margin:0;
  font-size:clamp(20px,1.4583vw,28px);line-height:1.107;font-weight:700;letter-spacing:-.03em}
.cmp-a-brand img{width:clamp(24px,1.7708vw,34px);height:auto;flex:0 0 auto}
.cmp-a-sub{margin:clamp(6px,.4688vw,9px) 0 0
    calc(clamp(24px,1.7708vw,34px) + clamp(8px,.625vw,12px));
  font-size:clamp(12px,.7813vw,15px);line-height:1.4;letter-spacing:-.02em;
  color:rgba(255,255,255,.86)}
.cmp-alfred li{position:relative;padding:24px 24px 24px 54px;
  border-top:1px solid rgba(255,255,255,.26);
  font-size:clamp(14px,.9375vw,18px);line-height:1.55;font-weight:700;letter-spacing:-.02em}
.cmp-alfred li::before{content:"";position:absolute;left:24px;top:26px;width:22px;height:22px;
  border-radius:50%;background:#fff}
.cmp-alfred li::after{content:"";position:absolute;left:30px;top:33px;width:9px;height:5px;
  border-left:2px solid #F4610B;border-bottom:2px solid #F4610B;rotate:-45deg}
/* 모바일 시안(214:60753)은 세로로 쌓지 않는다 — 알프레드 카드가 맨 앞에 오는 가로 스크롤이고,
   세 열의 행 구분선은 데스크톱과 똑같이 한 줄에 놓인다. */
@media (max-width:1023px){
  .cmp-grid{display:flex;gap:15px;align-items:end;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);
    scrollbar-width:none}
  .cmp-grid::-webkit-scrollbar{display:none}
  .cmp-col,.cmp-alfred{flex:0 0 min(340px,80.5vw)}
  .cmp-alfred{order:-1}
  .cmp-col{padding-top:0}
  .cmp-col h3{padding:0 0 16px;font-size:16px;gap:8px}
  .cmp-ic{width:24px;height:24px}
  .cmp-col li{padding:12px 8px 12px 32px;font-size:13px;line-height:1.54}
  .cmp-col li::before{left:4px;top:13px;width:20px;height:20px}
  .cmp-col li::after{left:9px;top:19px}
  .cmp-a-head{padding:14px 14px 10px}
  .cmp-a-brand{font-size:20px;gap:8px}
  .cmp-a-brand img{width:26px}
  .cmp-a-sub{margin-left:34px;font-size:12px}
  .cmp-alfred li{padding:12px 8px 12px 34px;font-size:13px;line-height:1.54}
  .cmp-alfred li::before{left:8px;top:13px;width:20px;height:20px}
  .cmp-alfred li::after{left:13px;top:19px}
}

/* ── value (dark) ─────────────────────────────────────────────────────── */
.value>.wrap>.display{margin-bottom:clamp(48px,7.0833vw,136px)}
.value-row{display:grid;grid-template-columns:44.375% 38.125%;justify-content:space-between;
  align-items:center;gap:0}
.value-row+.value-row{margin-top:clamp(56px,7.08vw,136px)}
.value-row.is-flip{grid-template-columns:38.125% 44.375%}
.value-row.is-flip .value-copy{order:2}
.value-row.is-flip .value-media{order:1}
/* 시안 실측: 첫 줄 "…보존합" 이 710 을 채운다 → 24px(18px 로는 두 줄로 붙었다).
   제목도 "매번 설명할" 폭 217 기준 48px. 잉크 높이비(21/15)로 교차 확인. */
.value-copy h3{font-size:clamp(30px,2.5vw,48px);line-height:clamp(40px,3.125vw,60px)}
.value-copy p{margin-top:clamp(12px,1.0417vw,20px);font-size:clamp(15px,1.25vw,24px);
  line-height:1.5;color:rgba(255,255,255,.8);letter-spacing:-.00833em}
.value-media img{width:100%;height:auto;border-radius:var(--r-md);aspect-ratio:1/1;object-fit:cover}
@media (max-width:1023px){
  /* .is-flip 의 열 정의가 더 구체적이라 여기서 같은 구체성으로 눌러야 1열이 된다 */
  /* gap:28 은 근거 없는 값이었다 — 시안(홈 299:662 등)은 이미지 밑 12 뿐이고 그 12 는
     mobile.css 의 .value-media{margin-bottom:12px} 가 준다. 28 이 겹쳐 짝수행만 +28 이었다. */
  .value-row,.value-row.is-flip{grid-template-columns:1fr;row-gap:0}
  /* QA 944:57764 "(모든 화면 공통) 디자인처럼 상단 이미지 - 하단 헤드라인으로 수정".
     모바일 시안(홈 299:662 등)은 이미지가 위, 카피가 아래다. 전에는 반대였다. */
  .value-row .value-media,.value-row.is-flip .value-media{order:1}
  .value-row .value-copy,.value-row.is-flip .value-copy{order:2}
}

/* ── interview ────────────────────────────────────────────────────────── */
/* 시안 실측: 섹션 배경 #F0F0F0 · 카드 #FFF (구현은 반대로 깔려 있었다) */
.itv-sec{padding-block:var(--pad-sec) clamp(80px,10.94vw,210px);background:#F0F0F0}
.itv-sec .display{margin-bottom:clamp(28px,3.7vw,71px)}

/* ── trust ────────────────────────────────────────────────────────────── */
.trust{padding-block:clamp(50px,8.3333vw,160px);overflow:hidden;
  /* 시안 실측(7x5 격자): 위는 크림 #FCE3C1, 아래로 갈수록 코럴 — 하단 중앙이 가장 진하다
     (#DF676F), 우하단 #FA8580, 좌하단 #FBB094. 이전 값은 전체적으로 너무 옅었다. */
  background:
    radial-gradient(72% 52% at 50% 116%, #D9646E 0%, rgba(217,100,110,0) 72%),
    radial-gradient(58% 56% at 100% 100%, #FA8580 0%, rgba(250,133,128,0) 74%),
    radial-gradient(54% 50% at 0% 100%,  #FBB094 0%, rgba(251,176,148,0) 74%),
    radial-gradient(66% 58% at 0% 0%,    #FCE3C1 0%, rgba(252,227,193,0) 76%),
    linear-gradient(180deg,#FEF7EF 0%, #FDEDE4 42%, #FBC3B0 100%)}
.trust{--r-trust:clamp(23px,1.875vw,36px)}
.trust-grid{display:grid;grid-template-columns:44.375% 54.375%;gap:1.25%;align-items:stretch}
.trust-left{display:grid;grid-template-rows:1fr 1fr;gap:clamp(10px,1.0417vw,20px)}
/* 제목 카드 — 시안 390:67608 (라운드 36 · 패딩 36 · 그림자 0 8px 24px rgba(0,0,0,.2) ·
   검정 그라디언트 + 텍스처 soft-light · 글자 64/76 Bold 에 흰→흰50% 그라디언트).
   잘라낸 이미지를 쓰면 구운 모서리가 CSS 라운드와 겹쳐 테두리가 두 겹으로 보인다. */
.trust-title{position:relative;margin:0;display:grid;place-items:center;text-align:center;
  padding:clamp(18px,1.875vw,36px);border-radius:var(--r-trust);overflow:hidden;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.2)}
.trust-title::before{content:"";position:absolute;inset:0;
  background:url("hm-trust-tex.jpg") center/cover no-repeat;mix-blend-mode:soft-light}
.trust-title p{position:relative;font-size:clamp(30px,3.3333vw,64px);
  line-height:1.1875;font-weight:700;letter-spacing:-.00625em;
  background-image:linear-gradient(102.7203deg,#fff 24.425%,rgba(255,255,255,.5) 78.257%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.trust-stat{display:grid;place-content:center;text-align:center;
  padding:clamp(13px,1.0417vw,20px);border-radius:var(--r-trust);
  background-image:linear-gradient(102.6067deg,#fff 0%,rgba(255,255,255,0) 100%);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  box-shadow:0 8px 24px rgba(0,0,0,.12)}
.trust-n{font-size:clamp(59px,4.8958vw,94px);line-height:clamp(63px,5.2083vw,100px);
  font-weight:700;letter-spacing:0;width:max-content;margin-inline:auto;
  background-image:linear-gradient(96.2304deg,#000 24.425%,rgba(0,0,0,.6) 78.257%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.trust-c{margin-top:8px;font-size:clamp(18px,1.4583vw,28px);
  line-height:clamp(21px,1.7708vw,34px);font-weight:700;
  color:rgba(0,0,0,.6);letter-spacing:-.0143em}
/* NPS 카드 — 시안 390:67614. 막대 좌표는 카드 안쪽 폭(870-48*2=774) 기준 % 로 옮긴
   시안 실측값이다: 기준선 32.01% · Alfred 끝 87.79 · T사 56.01 · K사 36.89 ·
   K′사 21.96 · N사 6.07. 막대 두께 58/428=13.55%, 행 위치 2.87/22.9/44.39/65.65/86.45%.
   막대 그라디언트는 기준선 쪽이 옅고 끝이 진하다(픽셀 실측). */
.trust-nps{margin:0;display:flex;flex-direction:column;padding:clamp(20px,2.5vw,48px);
  border-radius:var(--r-trust);
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.2);color:#fff}
.nps-eyebrow{font-size:clamp(17px,1.4583vw,28px);line-height:1.4286;font-weight:600;
  opacity:.6}
.nps-title{margin-top:clamp(5px,.4167vw,8px);
  font-size:clamp(28px,2.5vw,48px);line-height:1.25;font-weight:700}
.nps-chart{position:relative;width:100%;aspect-ratio:774/428;
  margin-top:clamp(12px,1.302vw,25px)}
.nps-zero{position:absolute;left:32.01%;top:0;height:95.6%;width:1px;
  background:rgba(255,255,255,.2)}
.nps-bar{position:absolute;top:var(--t);left:var(--l);width:var(--w);height:13.55%;
  background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.5))}
.nps-bar.is-neg{background:linear-gradient(270deg,rgba(255,255,255,.2),rgba(255,255,255,.5))}
.nps-bar.is-lead{background:linear-gradient(90deg,rgba(255,96,0,.7),#FF6000)}
.nps-lab{position:absolute;top:var(--t);height:13.55%;
  display:flex;flex-direction:column;justify-content:center;
  right:calc(100% - var(--x));margin-right:clamp(4px,.4167vw,8px);
  text-align:right;white-space:nowrap;font-weight:700;letter-spacing:-.0167em}
.nps-lab.is-pos{right:auto;left:var(--x);margin:0 0 0 clamp(4px,.4167vw,8px);text-align:left}
.nps-lab em{font-style:normal;font-size:clamp(12px,.9375vw,18px);line-height:1.3333}
.nps-lab span{font-size:clamp(15px,1.25vw,24px);line-height:1.25;color:rgba(255,255,255,.5)}
.nps-lab.is-lead em{font-size:clamp(13px,1.0417vw,20px);line-height:1.3}
.nps-lab.is-lead span{font-size:clamp(17px,1.4583vw,28px);line-height:1.2143;color:var(--brand)}
.nps-note{margin-top:clamp(6px,.5208vw,10px);text-align:right;
  font-size:clamp(11px,.7292vw,14px);line-height:1.5;font-weight:500;
  color:rgba(255,255,255,.4);letter-spacing:-.0143em}
@media (max-width:1023px){
  .trust-grid{grid-template-columns:1fr;gap:14px}
  .trust-left{gap:14px}
  .trust-title{min-height:180px}
}

/* ── agent select ─────────────────────────────────────────────────────── */
.agent{padding-block:clamp(72px,10.42vw,200px) clamp(56px,6.25vw,120px)}
.agent .display{margin-bottom:clamp(28px,2.5vw,48px)}
.agent-grid{display:grid;grid-template-columns:repeat(2,38.125%);justify-content:center;gap:2.25%}
.agent-card{border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  aspect-ratio:1/1;
  transition:background-color .28s var(--ease),color .28s var(--ease)}
/* 색은 토큰으로 두고 hover 시 통째로 갈아끼운다 — 마우스를 올린 카드로 주황이 옮겨간다.
   그래픽 이미지는 시안에서 배경까지 구워져 나온 것이라(급여=주황판, 세무=회색판)
   카드 색과 어긋나는 동안에는 안쪽 여백+라운드를 줘 '판'으로 보이게 한다. */
.agent-card{--c-bg:#F9F9F9;--c-fg:var(--ink);--c-sub:#5B5B5B;--c-btn:#111;--c-btn-fg:#fff}
.agent-card.is-pay{--c-bg:var(--brand);--c-fg:#fff;--c-sub:#fff;--c-btn:#fff;--c-btn-fg:var(--ink)}
/* 그리드에 마우스가 올라오면 기본 강조(급여)를 끄고, 올린 카드가 주황이 된다 */
.agent-grid:hover .agent-card.is-pay{--c-bg:#F9F9F9;--c-fg:var(--ink);--c-sub:#5B5B5B;--c-btn:#111;--c-btn-fg:#fff}
.agent-grid:hover .agent-card:hover{--c-bg:var(--brand);--c-fg:#fff;--c-sub:#fff;--c-btn:#fff;--c-btn-fg:var(--ink)}
.agent-card{background:var(--c-bg);color:var(--c-fg)}
.agent-head{padding:clamp(22px,2.5vw,48px) clamp(22px,2.5vw,48px) 0}
.agent-head h3{font-size:clamp(30px,2.5vw,48px);line-height:1.25;font-weight:700;letter-spacing:-.02em}
.agent-head p{margin-top:6px;font-size:clamp(14px,1.25vw,24px);line-height:1.333;letter-spacing:-.02em}
.agent-head p{color:var(--c-sub)}
.agent-head .btn{margin-top:clamp(13px,1.0417vw,20px);padding-inline:clamp(10px,.8333vw,16px)}   /* 시안 104x40 at y=198 */
.agent-card .btn{background:var(--c-btn);color:var(--c-btn-fg);border-color:var(--c-btn)}
.agent-card .btn:hover{filter:brightness(.92);box-shadow:none}
/* 카드 안 그래픽 — 시안에서는 이미지가 아니라 도형·텍스트다(레퍼런스 사이트도 DOM 으로 그린다).
   이미지로 구우면 배경색이 박혀서 카드 색이 바뀔 때 따라오지 못한다. 그래서 마크업으로 그린다.
   좌표는 시안 실측(카드 610 기준): 급여 알림카드 514x177 at (48,385) / 세무 알약 5개. */
.af{position:relative;width:100%;margin-top:auto}

/* 급여 — 알림 카드 */
.af-pay{aspect-ratio:610/225}
/* 시안: 알림 카드 514x177 — 위 0, 아래 48 (225 기준 21.33%). 높이를 고정해야 글자 크기가
   달라져도 시안과 같은 자리에 놓인다. */
.af-note{position:absolute;left:7.87%;right:7.87%;top:0;bottom:21.33%;
  border-radius:clamp(10px,1.04vw,20px);overflow:hidden;display:flex;flex-direction:column;
  /* 시안은 이 카드도 '반투명 흰색'이다 — 배경 주황에서 픽셀을 역산하면 알파가
     좌상 .97 → 우하 .43 으로 선형으로 떨어진다(레퍼런스 사이트 알약과 같은 방식).
     복숭아색을 그대로 구워 넣으면 카드가 회색이 됐을 때 혼자 남는다.
     다만 회색 카드 위에서는 그 알파가 배경과 거의 같아 경계가 사라지므로
     알파를 올리고(--af-a) 그림자로 층을 만든다. */
  /* 시안(332:60191·60194)은 한 장이 아니라 헤더·본문 두 판이 붙어 있고 각각 각도가 다르다
     (135° / 113°). 배경은 각 판이 칠하고, 그림자·라운드는 여기서 한 번만 준다. */
  box-shadow:var(--af-shadow);
  color:var(--ink);text-align:left}
/* 회색 카드 위에서는 흰 카드가 배경과 6단계밖에 차이가 안 나 눈에 안 띈다.
   테두리 1px + 진짜 그림자로 층을 만든다. 주황 카드에서는 시안대로 아무것도 없다. */
.agent-card{--af-a1:1;--af-a2:.90;
  --af-shadow:0 14px 34px rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.065)}
.agent-card.is-pay{--af-a1:.97;--af-a2:.43;--af-shadow:none}
.agent-grid:hover .agent-card.is-pay{--af-a1:1;--af-a2:.90;
  --af-shadow:0 14px 34px rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.065)}
.agent-grid:hover .agent-card:hover{--af-a1:.97;--af-a2:.43;--af-shadow:none}
/* 시안: 헤더 53 (177 기준 29.94%) · padding 20 · gap 8 · 18px SemiBold. 흰 구분선은 없다. */
.af-note-h{display:flex;align-items:center;gap:clamp(4px,.4167vw,8px);
  flex:0 0 29.94%;padding-inline:clamp(10px,1.0417vw,20px);
  font-size:clamp(11px,.9375vw,18px);line-height:1.4;font-weight:600;letter-spacing:-.02em;
  background:linear-gradient(136deg,rgba(255,255,255,var(--af-a1)) 0%,rgba(255,255,255,var(--af-a2)) 100%)}
/* 시안 CheckCircle(332:60192) 아이콘 원본. CSS 로 원+체크를 그렸던 것이 "이모지 이상함" — 체크 획이 비뚤었다. */
.af-check{flex:0 0 auto;width:clamp(12px,1.25vw,24px);height:clamp(12px,1.25vw,24px);display:block}
.af-note-b{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(7px,.885vw,17px) clamp(12px,1.25vw,24px);
  font-size:clamp(12px,1.0417vw,20px);line-height:1.5;font-weight:500;letter-spacing:-.01em;
  color:rgba(0,0,0,.8);
  background:linear-gradient(114deg,rgba(255,255,255,var(--af-a1)) 0%,rgba(255,255,255,var(--af-a2)) 100%)}

/* 세무 — 겹쳐 쌓인 알약 5개. 흰색·글자색 모두 알파로 두어 카드 색이 바뀌어도 그대로 얹힌다. */
.af-tax{aspect-ratio:610/313}
/* 시안 332:60172 실측 — 알약(999px)이 아니라 라운드 20 의 겹쳐 쌓인 판이다.
   완전 알약 + 600/700 굵기로 그려 뒀던 것이 "투박하고 글꼴이 다르다"의 실체.
   시안은 20/22/24px Regular·Medium 이고, 흐림은 배경 알파가 아니라 요소 opacity(30/60/100)다.
   배경도 단색 흰색이 아니라 122° 그라데이션(#fff → rgba(255,255,255,.4)) + blur 16. */
.af-pill{position:absolute;left:50%;translate:-50% 0;display:flex;align-items:center;
  justify-content:center;white-space:nowrap;letter-spacing:-.02em;
  border-radius:var(--r);
  font-size:clamp(10px,1.0417vw,20px);font-weight:400;line-height:clamp(15px,1.5625vw,30px);
  background:linear-gradient(122deg,#fff 0%,rgba(255,255,255,.4) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:var(--o);color:rgb(var(--fg-rgb)/var(--t));
  transition:color .28s var(--ease)}
.af-pill{--rr:clamp(10px,1.0417vw,20px)}
/* 알약 글자색 — 시안은 검정 70%(가운데만 80%). 주황 카드로 뒤집혔을 때만 옅게 얹는다. */
.agent-card{--fg-rgb:0 0 0;--t1:.55;--t2:.55}
.agent-card.is-tax{--t1:.7;--t2:.7}
.agent-grid:hover .agent-card.is-tax:hover{--t1:.55;--t2:.55}
.af-p1{--o:.30;--t:var(--t1);--r:var(--rr) var(--rr) 0 0;width:45.57%;height:14.06%;top:0}
.af-p2{--o:.60;--t:var(--t2);--r:var(--rr) var(--rr) 0 0;width:56.39%;height:19.17%;top:14.06%;
  font-size:clamp(11px,1.1458vw,22px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
/* 가운데 판만 24px Medium · 검정 80% · 라운드 4모서리 (시안 332:60181) */
.af-p3{--o:1;--t:.8;--r:var(--rr);width:66.89%;height:22.36%;top:31.63%;
  font-size:clamp(12px,1.25vw,24px);font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.af-p4{--o:.60;--t:var(--t2);--r:0 0 var(--rr) var(--rr);width:56.39%;height:19.17%;top:51.76%;
  font-size:clamp(11px,1.1458vw,22px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.af-p5{--o:.30;--t:var(--t1);--r:0 0 var(--rr) var(--rr);width:45.57%;height:13.74%;top:70.93%}
@media (max-width:1023px){
  .agent-grid{grid-template-columns:1fr;gap:16px}
  .agent-card{aspect-ratio:auto}
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-sec{padding-block:clamp(56px,6.25vw,120px) clamp(80px,10.42vw,200px)}
.faq-sec .display{margin-bottom:clamp(28px,2.92vw,56px)}

/* value 제목 그라데이션 각 — 시안 블록별 실측값 (390:67450 / 67521 / 67528 / 67573) */
.value-row:nth-of-type(1) .grad{--ga:101.0067deg}
.value-row:nth-of-type(2) .grad{--ga:109.3594deg}
.value-row:nth-of-type(3) .grad{--ga:111.2117deg}
.value-row:nth-of-type(4) .grad{--ga:109.3594deg}

/* ── value 카드 1·3 — 대사를 이미지에서 DOM 으로 (2026-08-28) ──────────
   구운 글자는 검색·AI 에 안 읽힌다. 1번은 도식만 남긴 배경판(hm-value-1-plate)에
   말풍선을 얹고, 3번은 대화가 전부라 배경까지 CSS 로 다시 그렸다.
   글자·간격은 카드 폭 기준(cqw)이라 원본 이미지와 같은 비율로 커지고 작아진다. */
.hm-vc{position:relative;container-type:inline-size;aspect-ratio:1;
  border-radius:var(--r-md);overflow:hidden;color:var(--ink)}
/* 시안은 375 기준이고 모바일 글자는 px 고정(mobile.css)이다 — 카드가 태블릿 폭까지
   커지면 335 기준 글자만 그대로라 우스워진다. 폭을 시안값 근처로 묶는다. */
@media (max-width:1023px){ .hm-vc{width:min(100%,420px);margin-inline:auto} }
/* 아래 cqw·% 는 전부 시안 610 슬롯 실측을 나눈 값이다(390:67453 / 390:67744, get_design_context).
   "대충 비슷한 비율"로 잡아 뒀던 이전 값은 카드 폭 473(시안 360)·본문 22.9px(시안 26)처럼
   눈에 띄게 어긋나 있었다 — 사용자가 "글자가 작아 보인다 / 붕뜬다"고 짚은 지점. */
.hm-vc-1{background:url("hm-value-1-plate.jpg") center/cover no-repeat}
/* 시안: 카드 x=42 y=377 w=526 (슬롯 610) */
.hm-vc-1 .hm-vc-card{position:absolute;left:6.8852%;right:6.8852%;top:61.8033%}
.hm-vc-3{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  /* 좌여백을 padding 으로 주면 안 된다 — .hm-vc-3 이 곧 컨테이너라 cqw 가 content box 기준이 되어
     padding 만큼 단위 자체가 줄어든다(80.5 를 넣었더니 1cqw 가 6.10 → 5.30 이 됐다).
     여백은 자식 margin 으로 준다. 시안: 카드 좌단 80.5 · 폭 360 · 카드간 12 (슬롯 610) */
  gap:1.9672%;padding-left:0;padding-right:0;
  /* 세로 그라데이션만 깔면 중간 높이가 좌우 같은 색이 된다 — 시안은 좌측이 더 따뜻하고
     우측이 더 밝다(610 슬롯 실측: 좌중 225,170,159 / 우중 232,199,181 / 상중 199,187,214
     / 하중 249,188,151). 좌·우 블롭으로 그 기울기를 만든다. */
  background:
    radial-gradient(66% 52% at 50% 46%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(55% 80% at 0% 88%, rgba(225,110,60,.40) 0%, rgba(225,110,60,0) 82%),
    linear-gradient(90deg, rgba(200,90,70,.16) 0%, rgba(200,90,70,0) 55%),
    radial-gradient(60% 50% at 100% 52%, rgba(255,222,190,.30) 0%, rgba(255,222,190,0) 76%),
    linear-gradient(180deg,#C8BAD3 0%,#DCBCC2 38%,#EFC3AE 72%,#FABC97 100%)}
/* 시안 공통: padding 20(1번만 28/30) · radius 20 · blur 16 · shadow 0 8 24 rgba(0,0,0,.12)
   · 배경은 흰색 반투명 단색이 아니라 108° 그라데이션(#fff → rgba(255,255,255,.4)) */
.hm-vc-card{padding:3.2787cqw;border-radius:3.2787cqw;
  background:linear-gradient(108deg,#fff 0%,rgba(255,255,255,.4) 100%);
  box-shadow:0 1.3115cqw 3.9344cqw rgba(0,0,0,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hm-vc-3 .hm-vc-card.is-me{margin-left:27.7869%}   /* 시안 x=169.5 */
/* 2클래스 규칙은 mobile.css 의 1클래스 규칙보다 세다 — 로드 순서로는 안 눌린다.
   데스크톱 전용값은 반드시 min-width 로 가둔다(같은 함정 3번째, LED 클래스). */
@media (min-width:1024px){
  .hm-vc-1 .hm-vc-card{padding:4.5902cqw 4.918cqw}
  .hm-vc-3 .hm-vc-card{width:59.0164%;margin-left:13.1967%}   /* 시안 w=360 x=80.5 */
  .hm-vc-3 .hm-vc-cta{margin-left:13.1967%}
  /* 시안 1번 카드만 라벨 18/20(아이콘 여백 8) · 본문 26/35 ls -1 (390:67698 · 67700) */
  .hm-vc-1 .hm-vc-who{gap:1.3115cqw;font-size:2.9508cqw;line-height:3.2787cqw}
  .hm-vc-1 .hm-vc-msg{margin-top:1.9672cqw;font-size:4.2623cqw;line-height:5.7377cqw;
    letter-spacing:-.03846em}
}
.hm-vc-who{display:flex;align-items:center;gap:.9836cqw;
  font-size:2.623cqw;line-height:3.9344cqw;font-weight:600;color:var(--brand);letter-spacing:-.02em}
/* 대표·전문가 라벨은 브랜드색이 아니라 검정 70% (시안 390:67748 · 67755) */
.hm-vc-who.is-plain,.hm-vc-3 .is-me .hm-vc-who{color:rgba(0,0,0,.7)}
.hm-vc-who img{width:4.5902cqw;height:4.5902cqw;border-radius:.9836cqw;flex:0 0 auto}
.hm-vc-3 .hm-vc-who img{border:1px solid rgba(255,255,255,.5);object-fit:cover}
.hm-vc-msg{margin-top:1.3115cqw;font-size:2.9508cqw;line-height:3.6066cqw;letter-spacing:-.02778em}
.hm-vc-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:0;
  /* 시안: 카드 아래 8 (컨테이너 gap 12 에서 4 를 뺀다) */
  margin-top:-.6557%;
  padding:1.3115cqw 3.2787cqw;border-radius:1.9672cqw;background:rgba(255,255,255,.9);
  font-size:2.623cqw;line-height:3.9344cqw;font-weight:700;letter-spacing:-.02em}
.hm-vc-cta span{display:inline-block;width:3.2787cqw;text-align:center;
  font-size:3.2787cqw;line-height:1}   /* 시안 CaretRight 20px */
.hm-vc-ok{margin-top:1.6393cqw;display:flex;align-items:center;gap:.6557cqw;
  font-size:2.9508cqw;line-height:3.6066cqw;font-weight:600;letter-spacing:-.02778em;
  background:linear-gradient(90deg,#06A156 0%,#023B1F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hm-vc-ok::before{content:"";flex:0 0 auto;width:3.9344cqw;height:3.9344cqw;border-radius:50%;
  background:#06A156 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.3 2.3 4.7-4.7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/72% no-repeat}
/* 좁은 화면에서는 카드 폭이 335 라 cqw 하한(12/14px)이 걸린다 — 정사각 안에 들어가게
   시안 모바일 값(12/16 · 14/18)으로 행간·여백을 좁힌다 */
@media (max-width:1023px){
  /* 데스크톱에서 카드를 시안 폭(360/610)으로 묶고 좌측정렬했다 — 모바일은 다시 꽉 채운다 */
  /* padding 을 컨테이너에 두면 cqw 가 content box 기준이 되어 10.8% 줄어든다(Codex 002) — 자식 margin 으로 */
  .hm-vc-3{padding:0;gap:2%;align-items:stretch}
  .hm-vc-3 > *{margin-inline:5.4%}
  .hm-vc-3 .hm-vc-card,.hm-vc-3 .hm-vc-cta{margin-left:0}
  .hm-vc-3 .hm-vc-card{width:auto;padding:12px 14px;border-radius:12px}
  .hm-vc-card{box-shadow:0 4px 12px rgba(0,0,0,.1)}
  .hm-vc-cta{margin-top:0}
  /* cqw 로 두면 좁은 카드에서 9px 까지 줄어 v2-mobile 최소 글자 규칙에 걸린다 */
  .hm-vc-cta span{width:14px;font-size:14px}
  .hm-vc-3 .hm-vc-who{line-height:16px}
  .hm-vc-3 .hm-vc-msg{margin-top:6px;line-height:18px}
  .hm-vc-3 .hm-vc-cta{padding:8px 12px;border-radius:9px}
  .hm-vc-3 .hm-vc-ok{margin-top:6px}
  .hm-vc-3 .hm-vc-card.is-me{margin-left:calc(18% + 5.4%)}
  /* 시안 299:681: 카드 x31 y203 w272 h94 (335 기준) · pad 14/20 · r10 · 아이콘 18 · 라벨 14/18 · 본문 14/21 · 사이 6 */
  .hm-vc-1 .hm-vc-card{left:9.2537%;right:9.5522%;top:60.597%;padding:14px 20px;border-radius:10px}
  .hm-vc-1 .hm-vc-who{gap:8px;font-size:14px;line-height:18px}
  .hm-vc-1 .hm-vc-who img{width:18px;height:18px}
  .hm-vc-1 .hm-vc-msg{margin-top:6px;font-size:14px;line-height:21px}
  /* mobile.css 의 시안값(cta 20 · ok 16)을 여기 2클래스가 16 · 18 로 덮고 있었다 (Codex 007) */
  .hm-vc-3 .hm-vc-cta{line-height:20px}
  .hm-vc-3 .hm-vc-ok{line-height:16px}
}
/* 태블릿~좁은 데스크톱(901~1199)에서는 value 가 2열이라 카드가 300~350 으로 작아지는데
   여백은 데스크톱 비율(11%)이라 대화가 정사각을 2~11px 넘쳤다(실측). 여백만 줄인다. */
@media (min-width:1024px) and (max-width:1199px){
  .hm-vc-3{padding:0;gap:2%}
  .hm-vc-3 > *{margin-inline:5.6%}
  .hm-vc-3 .hm-vc-card{padding:3% 3.6%}
}