@charset "utf-8";
/* 플랫폼 홈 페이지 전용 — Figma 587:75132 (1920x9891) 실측 기준 */

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero-grid{grid-template-columns:52.688% 38.125%;justify-content:space-between;gap:0}
.hero-visual{position:relative;margin-top:clamp(-198px,-10.31vw,-64px)}
.hero-visual>img{width:100%;height:auto;border-radius:var(--r-md);object-fit:cover;
  aspect-ratio:610/758;object-position:left top}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{margin-top:0}
}

/* ── pain point ───────────────────────────────────────────────────────── */
.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 가 계속 주황이라 주황이 둘이 되고, 옮겨간 것으로 안 보인다 — 에이전트 카드와 같은 규칙) */
.pain-n{font-size:clamp(17px,1.1458vw,22px);line-height:1.45;font-weight:700;letter-spacing:-.02em}
.pain-l{margin-top:6px;font-size:clamp(14px,.9375vw,18px);line-height:1.55;color:#767676;letter-spacing:-.02em}
.pain-r{margin-top:clamp(24px,3.75vw,72px);text-align:right;font-size:clamp(15px,1.0417vw,20px);
  line-height:1.5;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{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}
}

/* ── structure: 상단 카피 + 3장 가로 배열 ─────────────────────────────
   QA 944:57972 "(플랫폼 공통) 바뀐 디자인으로 적용" — 시안 749:57329 는
   제목을 위에 두고 카드 3장을 가로로 놓는다. 구현은 좌 카피 / 우 세로스택이었다.
   시안 실측: 제목→카드 간격 96 · 카드 간격 14 · 카드 280 높이 라운드 24 패딩 24 ·
   그림자 0 12px 20px rgba(0,0,0,.1) · 위줄(번호 20/26 #8D8D8D .7 ↔ 담당 16/20 Bold .7) ·
   아래블록(아이콘 48 · 제목 28/34 Bold · 본문 18/28 rgba(0,0,0,.8), 간격 10).
   번호 옆 화살표·체크 연결자는 시안에 없다 — 제거. */
.structure-copy .lead{margin-top:clamp(10px,1.04vw,20px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,.729vw,14px);margin-top:clamp(40px,5vw,96px)}
.step{display:flex}
.step-card{flex:1;display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(0px,14.583vw,280px);background:#fff;border-radius:var(--r-md);
  padding:clamp(16px,1.25vw,24px);box-shadow:0 12px 20px rgba(0,0,0,.1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,.14)}
.step-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.step-n{font-size:clamp(15px,1.0417vw,20px);line-height:1.3;font-weight:700;
  letter-spacing:-.02em;color:#8D8D8D;opacity:.7}
.step-by{display:flex;align-items:center;gap:6px;
  font-size:clamp(13px,.8333vw,16px);line-height:1.25;font-weight:700;
  letter-spacing:-.0125em;color:#000;opacity:.7;white-space:nowrap}
/* 시안에 실제 아이콘이 있다(주황 스파클 타일 / 담당자 사진). 단색 블록으로 두었던 자리를 교체.
   4개 플랫폼 페이지가 같은 두 아이콘을 쓴다(에이전트·시스템·자동 분류 규칙 = 스파클 / 대표 = 사진). */
.step-by i{width:clamp(18px,1.25vw,24px);height:clamp(18px,1.25vw,24px);
  border-radius:6px;display:block;flex:0 0 auto;background:center/contain no-repeat}
.step-by.is-agent i{background-image:url("badge-agent.png")}
.step-by.is-ceo i{background-image:url("badge-ceo.png")}
.step-body{display:flex;flex-direction:column;gap:clamp(7px,.5208vw,10px)}
.step-ic{display:block;width:clamp(34px,2.5vw,48px);height:clamp(34px,2.5vw,48px);
  background:center/contain no-repeat}
.p-platform .step-ic.ic-work{background-image:url("pfstep-1.png")}
.p-platform .step-ic.ic-wait{background-image:url("pfstep-2.png")}
.p-platform .step-ic.ic-done{background-image:url("pfstep-3.png")}
.step-card h3{font-size:clamp(20px,1.4583vw,28px);line-height:1.2143;
  font-weight:700;letter-spacing:-.0143em}
.step-body>p{font-size:clamp(14px,.9375vw,18px);line-height:1.5556;
  color:rgba(0,0,0,.8);letter-spacing:-.0111em}
@media (max-width:1023px){
  .steps{grid-template-columns:1fr;gap:10px;margin-top:32px}
}

/* ── features ─────────────────────────────────────────────────────────── */
.features{padding-block:clamp(44px,5vw,96px) clamp(90px,10.42vw,200px)}
.feat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4%;
  margin-top:clamp(36px,4.48vw,86px)}
.feat>i{display:block;width:clamp(34px,2.5vw,48px);height:clamp(34px,2.5vw,48px);
  background:center/contain no-repeat}
.p-platform .feat>i.fic-1{background-image:url("pfic-1.png")}
.p-platform .feat>i.fic-2{background-image:url("pfic-2.png")}
.p-platform .feat>i.fic-3{background-image:url("pfic-3.png")}
.p-platform .feat>i.fic-4{background-image:url("pfic-4.png")}
.p-platform .feat>i.fic-5{background-image:url("pfic-5.png")}
.feat h3{margin-top:clamp(16px,1.56vw,30px);font-size:clamp(20px,1.4583vw,28px);
  line-height:1.21;font-weight:700;letter-spacing:-.02em}
.feat ul{margin-top:8px}
.feat li,.feat-plain{font-size:clamp(15px,1.0417vw,20px);line-height:1.5;color:#767676;letter-spacing:-.02em}
.feat ul li::before{content:"· "}
.feat-plain{margin-top:4px}
.p-acct .feat>i.fic-1{background-image:url("acic-1.png")}
.p-acct .feat>i.fic-2{background-image:url("acic-2.png")}
.p-acct .feat>i.fic-3{background-image:url("acic-3.png")}
.p-acct .feat>i.fic-4{background-image:url("acic-4.png")}
.p-acct .feat>i.fic-5{background-image:url("acic-5.png")}
.p-acct .feat>i.fic-6{background-image:url("acic-6.png")}
.p-acct .feat>i.fic-7{background-image:url("acic-7.png")}
.p-acct .step-ic.ic-1{background-image:url("acstep-1.png")}
.p-acct .step-ic.ic-2{background-image:url("acstep-2.png")}
.p-acct .step-ic.ic-3{background-image:url("acstep-3.png")}
.p-rep .feat>i.fic-1{background-image:url("rpic-1.png")}
.p-rep .feat>i.fic-2{background-image:url("rpic-2.png")}
.p-rep .feat>i.fic-3{background-image:url("rpic-3.png")}
.p-rep .feat>i.fic-4{background-image:url("rpic-4.png")}
.p-rep .feat>i.fic-5{background-image:url("rpic-5.png")}
.p-rep .feat>i.fic-6{background-image:url("rpic-6.png")}
.p-rep .step-ic.ic-1{background-image:url("rpstep-1.png")}
.p-rep .step-ic.ic-2{background-image:url("rpstep-2.png")}
.p-rep .step-ic.ic-3{background-image:url("rpstep-3.png")}

/* 기능 카드의 상태 라벨 (실시간 / 세무) */
.tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:6px;vertical-align:2px;
  font-size:var(--fs-xs);line-height:1.6;font-weight:600}
.tag.is-live{background:#DFF3E4;color:#2E7D45}
.tag.is-tax{background:#E1EBFA;color:#3A63A8}

.feat-grid.is-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(40px,3.4vw,64px) 4%}
.feat-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,3.4vw,64px) 4%}

.p-sub .feat>i.fic-1{background-image:url("sbic-1.png")}
.p-sub .feat>i.fic-2{background-image:url("sbic-2.png")}
.p-sub .feat>i.fic-3{background-image:url("sbic-3.png")}
.p-sub .feat>i.fic-4{background-image:url("sbic-4.png")}
.p-sub .step-ic.ic-1{background-image:url("sbstep-1.png")}
.p-sub .step-ic.ic-2{background-image:url("sbstep-2.png")}
.p-sub .step-ic.ic-3{background-image:url("sbstep-3.png")}
@media (max-width:1100px){.feat-grid,.feat-grid.is-4,.feat-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 4%}}
/* 모바일 시안 631:6422 — 2열 카드가 아니라 1열 리스트, 아이콘은 오른쪽 끝 24px (급여와 동일) */
@media (max-width:1023px){
  .feat-grid,.feat-grid.is-4,.feat-grid.is-3{grid-template-columns:1fr;gap:36px;margin-top:64px}
  .feat{display:grid;grid-template-columns:minmax(0,1fr) 24px;column-gap:20px;align-items:start}
  .feat i{grid-area:1/2;width:24px;height:24px}
  .feat h3{grid-area:1/1;margin-top:0;font-size:20px;line-height:26px;letter-spacing:-.02em}
  .feat ul,.feat-plain{grid-area:2/1;margin-top:4px}
  .feat li,.feat-plain{font-size:16px;line-height:24px;color:#8D8D8D}
}

/* ── value (dark) ─────────────────────────────────────────────────────── */
.value>.wrap>.display{margin-bottom:clamp(48px,7.0833vw,136px)}
.value-row{display:grid;grid-template-columns:47.656% 47.656%;justify-content:space-between;
  align-items:center;gap:0;width:80%;margin-inline:auto}
.value-row+.value-row{margin-top:clamp(56px,7.08vw,136px)}
.value-row.is-flip .value-copy{order:2}
.value-row.is-flip .value-media{order:1}
.value-copy{padding-left:clamp(0px,5.2vw,100px)}
.value-copy ul{margin-top:clamp(12px,1.0417vw,20px)}
/* 시안 실측(587:75229): 제목 48/60, 목록 24/36. 다른 페이지엔 있던 이 규칙이 여기만 없어
   기본 --fs-h2(45px)로 떨어져 있었다 — 제목이 6.7% 작았다. */
.value-copy h3{font-size:clamp(30px,2.5vw,48px);line-height:clamp(40px,3.125vw,60px)}
.value-copy li{font-size:clamp(15px,1.25vw,24px);line-height:1.5;color:rgba(255,255,255,.8);letter-spacing:-.00833em}
.value-copy li::before{content:"• "}
.value-media img{width:100%;height:auto;border-radius:var(--r-md);aspect-ratio:1/1;object-fit:cover}
@media (max-width:1023px){
  /* gap:28 은 근거 없는 값이었다 — 여백은 mobile.css 의 .value-media{margin-bottom:12px} 가 준다.
     28 이 겹쳐 짝수행만 +28 이었다(경리·리포트·지원금 공통). */
  .value-row,.value-row.is-flip{grid-template-columns:1fr;row-gap:0;width:100%}
  /* 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}
  .value-copy,.value-row.is-flip .value-copy{padding-inline:0}
}

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

/* ── AI 비서 카드 (value 04) — 시안 문구를 DOM 으로 ────────────────────
   이미지(pf-value-4.jpg)에 구워져 있던 질문 4개가 검색·AI 에 안 읽혔다.
   카드 폭 기준(cqw)으로 짜서 이미지와 같은 비율로 커지고 작아진다. */
.pf-ai{container-type:inline-size;aspect-ratio:1;border-radius:var(--r-md);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* padding 을 여기 두면 안 된다 — 이 요소가 곧 query container 라 cqw 가 content box 기준이 되어
     단위 자체가 줄어든다(실측 1cqw 3.35 → 2.90, width:78cqw 요소가 35px 좁았다).
     게다가 자식이 전부 78cqw 명시 + 중앙정렬이라 이 padding 은 시각적으로 하는 일이 없다. */
  gap:3.6cqw;
  background:
    radial-gradient(78% 68% at 10% 6%, #FDD3AE 0%, rgba(253,211,174,0) 62%),
    radial-gradient(84% 74% at 96% 5%, #FCA982 0%, rgba(252,169,130,0) 64%),
    radial-gradient(92% 82% at 52% 106%, #EFB2CB 0%, rgba(239,178,203,0) 66%),
    linear-gradient(160deg,#FBC9A4 0%,#F7C0B4 46%,#F0B6CE 100%)}
.pf-ai-bar{width:78cqw;display:flex;align-items:center;gap:2cqw;
  padding:2.4cqw 3cqw;border-radius:4.4cqw;background:#fff;
  border:0.16cqw solid var(--brand);
  font-size:max(14px,3.5cqw);line-height:1.4;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.pf-ai-badge{flex:0 0 auto;padding:.6cqw 1.4cqw;border-radius:1.4cqw;
  background:rgba(255,96,0,.1);font-size:max(11px,2.6cqw);line-height:1.3;font-weight:700;
  color:var(--brand)}
.pf-ai-badge::after{content:"✦";margin-left:.4cqw}
.pf-ai-panel{width:78cqw;padding:3.4cqw;border-radius:3.3cqw;
  background:rgba(255,255,255,.62)}
.pf-ai-label{font-size:max(11px,2.4cqw);line-height:1.4;font-weight:500;color:#8D8D8D;letter-spacing:-.02em}
.pf-ai-panel ul{margin-top:2.4cqw;display:grid;gap:2.8cqw}
.pf-ai-panel li{font-size:max(14px,3cqw);line-height:1.4;letter-spacing:-.02em;color:var(--ink)}

/* hm-vc 와 같은 이유 — 좁은 화면에서 카드 폭 상한 (시안 375 기준) */
@media (max-width:1023px){ .pf-ai{width:min(100%,420px);margin-inline:auto} }