/* ============================================================
   랜딩 전용 스타일 (v4.8b)
   ------------------------------------------------------------
   front/css/landing.css 에서 가져오되 헤더·푸터 규칙은 뺐다.
   그 둘은 shell.css 가 그린다 — 두 벌이 되면 반드시 어긋난다.

   뺀 것: .cap · .gnav* · .cright · .lbtn · .sbtn · .pf* · .logo.h · .logo.f
   남긴 것: .logo · .logo.d  (히어로 대시보드 안에서 쓴다)
   ============================================================ */

/* changup.ai 랜딩 v4.8b - 스타일
   단일 HTML 시안에서 인계용으로 분리했습니다.
   로고는 base64 대신 ../assets/logo.svg 를 참조합니다. */
:root{
  /* ══ 색 · 디자인 시스템 v1.0 ══ */
  /* 메인 블루 = rgb(47,111,208). 흰 배경 대비 4.88:1 로 본문 크기 글자에도 씁니다. */
  --main:#2f6fd0;
  --blue:#6694f5; --indigo:#2f6fd0; --peri:#8c8ff2; --cyan:#57cbed; --teal:#51c6ca;
  /* 주 버튼용 — #6694f5 → #4363ca.
     밝은 쪽(#6694f5)은 흰 글자 대비가 2.95:1 이라 왼쪽 모서리에만 걸치게 정지점을 앞으로 당겼습니다.
     글자가 앉는 35~100% 구간은 4.1~5.4:1 입니다. */
  --grad-btn:linear-gradient(120deg,#6694f5 0%,#5478dd 35%,#4363ca 100%);
  /* 히어로 헤드라인용 — 큰 글자(40px)라 3:1 기준. 좌 시안블루 → 우 바이올렛 */
  --grad-head:linear-gradient(96deg,#2f8fce 0%,#3a7ee2 30%,#6b6ee8 58%,#8f61de 80%,#b665cf 100%);
  --ink:#0d1120; --tx:#454c61; --mut:#6b7288; --fnt:#9aa0b2;
  --line:#e6e9f1; --soft:#f2f5fa; --bg:#fafbfd;
  --tint:#eef3ff; --tint2:#f4f8ff; --tint3:#fbfcff; --paper:#fbfcfe;
  --line-hover:#c5d4f5; --line-btn:#d3defa;
  --ing:#2f6fd0; --ing-bg:#eef3ff; --ing-ln:#dbe6ff;
  --wait:#8a6416; --wait-bg:#fdf6e6; --wait-ln:#f2e3bd;
  --danger:#c23b3b; --danger-bg:#fdecec; --danger-ln:#f5c6c6;
  --done:#1f9d63; --done-bg:#e9f9f1; --done-ln:#c9efdc;
  /* ══ 형태 ══ */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:16px; --r-2xl:20px; --r-pill:999px;
  --e1:0 2px 6px rgba(20,30,60,.05);
  --e2:0 8px 26px -14px rgba(30,45,90,.10);
  --e3:0 26px 60px rgba(13,17,32,.20);
  --e-btn:0 3px 8px rgba(30,45,90,.20),inset 0 1px 0 rgba(255,255,255,.22);
  --e-btn-h:0 7px 15px rgba(30,45,90,.24),inset 0 1px 0 rgba(255,255,255,.22);
  --focus:0 0 0 3px rgba(102,148,245,.13);
  /* ══ 뼈대 ══ */
  --header-h:54px; --gutter:40px; --max:1280px; --secY:100px;
  --sans:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  /* 적응: 인계본은 `../assets/logo.svg` 를 본다(그 폴더 기준 상대경로). 우리 로고는
     public/logo.svg 라 절대경로로 바꾼다 — 안 바꾸면 히어로 대시보드의 로고가 404 다. */
  --logo:url("/logo.svg");
  /* ══ 타이포 v2 ══ */
  --f-display-2:700 40px/1.20 var(--sans);  --ls-display-2:-.02em;
  --f-display-1:700 32px/1.30 var(--sans);  --ls-display-1:-.02em;
  --f-h1:700 28px/1.30 var(--sans);         --ls-h1:-.02em;
  --f-h2:700 24px/1.30 var(--sans);         --ls-h2:-.02em;
  --f-h3:700 22px/1.30 var(--sans);         --ls-h3:-.015em;
  --f-h4:700 20px/1.35 var(--sans);         --ls-h4:-.015em;
  --f-title-1:600 18px/1.45 var(--sans);    --ls-title-1:-.01em;
  --f-title-2:600 17px/1.45 var(--sans);    --ls-title-2:-.01em;
  --f-body-1:400 17px/1.50 var(--sans);     --ls-body-1:-.005em;
  --f-body-2:400 15px/1.50 var(--sans);     --ls-body-2:-.005em;
  --f-body-3:400 13px/1.50 var(--sans);     --ls-body-3:0em;
  --f-label-l:700 17px/1.25 var(--sans);    --ls-label-l:-.005em;
  --f-label-m:600 15px/1.25 var(--sans);    --ls-label-m:-.005em;
  --f-label-s:600 13px/1.25 var(--sans);    --ls-label-s:0em;
  --f-caption-1:500 12px/1.40 var(--sans);  --ls-caption-1:0em;
  --f-caption-2:500 11px/1.40 var(--sans);  --ls-caption-2:0em;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--tx);line-height:1.65;word-break:keep-all;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
.in{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
/* 섹션 배경 : 흰 면 ↔ 옅은 브랜드 톤을 교차시킵니다.
   기존에는 #fff 와 #fafbfd 로 거의 같은 밝기라 경계가 보이지 않았습니다.
   교차 배경 + 흰 카드(그림자)로 「우리 콘텐츠」가 면 위에 떠 보이게 합니다. */
.sec{padding:var(--secY) 0;background:#fff}
.sec.alt{background:linear-gradient(180deg,#e9eff9 0,#f2f6fc 320px,#f7f9fd 100%)}
/* 흰 섹션은 위아래 실선 대신 가운데가 진한 얇은 선으로 구분 */
.shead{text-align:center}
.shead .k{font:var(--f-caption-1);font-weight:800;letter-spacing:.18em;color:var(--indigo)}
.shead h3{font:var(--f-display-1);font-weight:800;letter-spacing:var(--ls-display-1);color:var(--ink);margin-top:12px}
.shead p{font:var(--f-body-2);letter-spacing:var(--ls-body-2);color:var(--mut);margin:12px auto 0;max-width:560px}
/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 20px;
  border-radius:var(--r-md);font:var(--f-label-m);letter-spacing:var(--ls-label-m);color:#fff;
  background:var(--grad-btn);box-shadow:var(--e-btn);
  transition:transform .14s,box-shadow .14s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--e-btn-h)}
.btn.gh{color:var(--tx);background:#fff;border:1px solid var(--line);box-shadow:var(--e1)}
.btn.gh:hover{border-color:var(--line-hover);color:var(--indigo);transform:none;box-shadow:var(--e1)}
.btn.lg{height:auto;padding:17px 32px;border-radius:var(--r-lg);
  font:var(--f-label-l);letter-spacing:var(--ls-label-l);font-weight:800;min-width:220px}
/* 로고 — BI 원본(창업-AI-BI). 비율 2160:720 = 3:1 */
.logo{display:block;background:var(--logo) left center/contain no-repeat;flex:none;
  font-size:0;text-indent:-9999px;overflow:hidden}
.bdg{font:var(--f-caption-2);font-weight:800;color:var(--wait);background:var(--wait-bg);
  border:1px solid var(--wait-ln);border-radius:var(--r-xs);padding:1px 5px}
/* ══════ 히어로 ══════ */
.hero{position:relative;overflow:hidden;padding:92px var(--gutter) 78px;text-align:center;
  background:
    radial-gradient(1200px 460px at 50% -14%,rgba(102,148,245,.20) 0,rgba(102,148,245,0) 62%),
    radial-gradient(820px 380px at 84% 4%,rgba(140,143,242,.18) 0,rgba(140,143,242,0) 60%),
    radial-gradient(720px 340px at 14% 8%,rgba(87,203,237,.14) 0,rgba(87,203,237,0) 60%),
    linear-gradient(180deg,#fff,var(--bg));
  border-bottom:1px solid var(--line)}
/* 살아있는 배지 : 점의 리플 + 테두리를 도는 그라디언트 트림 */
.hpill{position:relative;display:inline-flex;align-items:center;gap:9px;font:var(--f-label-s);color:var(--indigo);
  background:#fff;border-radius:var(--r-pill);padding:6px 15px;box-shadow:var(--e1);isolation:isolate}
/* 테두리 자리 : 옅은 기본 테두리 위에, 그라디언트가 도는 트림을 얹습니다 */
.hpill::before{content:"";position:absolute;inset:0;border-radius:var(--r-pill);z-index:0;
  background:conic-gradient(from var(--ang,0deg),var(--blue),var(--peri),var(--cyan),var(--blue));
  padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:pillTrim 4s linear infinite}
.hpill span,.hpill i{position:relative;z-index:1}
@keyframes pillTrim{
to{--ang:360deg}
}
/* 러너 각도 변수의 at-rule 선언은 app/globals.css 에만 둔다. 그 규칙은 전역이고 globals 는
   모든 라우트에 로드되므로 한 곳이면 랜딩과 컴포저가 둘 다 받는다. 파일마다 두면 중복이고,
   한쪽만 지우면 합집합 대조로는 잡히지 않는다.
   (인계본 home.css 에는 이 자리에 그 선언이 있었다. 이식하며 뺐다.) */
/* 점 : 가운데는 고정, 바깥으로 두 겹이 번갈아 퍼져나갑니다 */
.hpill i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--blue);display:block;flex:none}
.hpill i::before,.hpill i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
  border-radius:50%;background:var(--blue);transform:translate(-50%,-50%);opacity:.6;
  animation:pillRipple 2.2s cubic-bezier(0,0,.3,1) infinite}
.hpill i::after{animation-delay:1.1s}
@keyframes pillRipple{
0%{transform:translate(-50%,-50%) scale(1);opacity:.55}
  100%{transform:translate(-50%,-50%) scale(4.2);opacity:0}
}
@media(prefers-reduced-motion:reduce){
.hpill::before{animation:none}
  .hpill i::before,.hpill i::after{animation:none;opacity:0}
}
.hero h1{font:var(--f-display-2);font-size:50px;letter-spacing:var(--ls-display-2);color:var(--ink);margin-top:24px;
  font-variation-settings:"wght" 800;font-weight:800}
.hero h1 em{font-style:normal;background:var(--grad-head);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font:var(--f-body-1);letter-spacing:var(--ls-body-1);color:var(--mut);
  margin:22px auto 0;max-width:540px}
.hero .cta{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* 히어로 CTA — 입력창 아래에서 목적지를 밝힙니다.
   입력창은 「무엇을 적나」를 묻고, 이 버튼은 「어디로 가나」를 답합니다. */
.hero-go{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:9px}
.hero-go .btn{height:52px;padding:0 30px;font:var(--f-label-l);letter-spacing:var(--ls-label-l);
  border-radius:99px}
.hero-go .btn svg{transition:transform .16s}
.hero-go .btn:hover svg{transform:translateX(3px)}
.hero-go-n{font:var(--f-caption-1);color:var(--mut)}
@media(max-width:560px){
  .hero-go .btn{width:100%;max-width:480px;padding:0 20px;font:var(--f-label-m)}
}
.heroInput{position:relative;isolation:isolate;width:100%;max-width:480px;margin:34px auto 0;
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid transparent;
  border-radius:99px;padding:8px 8px 8px 22px;
  box-shadow:0 22px 46px -22px rgba(67,99,202,.32),0 4px 14px rgba(20,30,60,.06);
  transition:box-shadow .2s;cursor:text}
.heroInput::before{content:"";position:absolute;inset:0;border-radius:99px;z-index:-1;
  background:linear-gradient(120deg,var(--blue),var(--peri) 55%,var(--indigo));padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.heroInput:focus-within{box-shadow:0 26px 52px -20px rgba(67,99,202,.4),0 4px 14px rgba(20,30,60,.08)}
.heroInput input{flex:1;text-align:left;font:var(--f-body-2);letter-spacing:var(--ls-body-2);
  color:var(--ink);border:0;outline:none;background:none;min-width:0;font-family:inherit}
.heroInput input::placeholder{color:var(--fnt)}
.heroInput .send{flex:none;width:42px;height:42px;border-radius:50%;background:var(--grad-btn);
  color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--e-btn);
  transition:transform .14s,box-shadow .14s;border:0;cursor:pointer}
.heroInput:hover .send{transform:translateY(-1px);box-shadow:var(--e-btn-h)}
/* 스크롤 시 하단에 고정되는 채팅 바 — 히어로를 벗어나면 나타납니다 */
.fixedChatBar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);
  margin:0;z-index:300;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.fixedChatBar.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
@media(max-width:560px){
.fixedChatBar{width:calc(100% - 32px)}
}
.heroFrameWrap{position:relative;z-index:2;max-width:1200px;margin:44px auto 0;text-align:left;
  display:flex;flex-direction:column;align-items:stretch;gap:26px}
/* 히어로 하단 플로팅 스크롤 안내 */
.scrollCue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;opacity:1;transition:opacity .3s ease}
.scrollCue.hide{opacity:0;pointer-events:none}
.scrollCue span{font:var(--f-caption-2);font-weight:800;letter-spacing:.16em;color:var(--fnt)}
.scrollChevrons{display:flex;flex-direction:column;align-items:center}
.scrollChevrons svg{margin-top:-9px;color:var(--line-hover);animation:chevDown 1.6s infinite}
.scrollChevrons svg:nth-child(1){animation-delay:0s}
.scrollChevrons svg:nth-child(2){animation-delay:.18s}
.scrollChevrons svg:nth-child(3){animation-delay:.36s}
@keyframes chevDown{
0%{opacity:0;transform:translateY(-6px)}
  35%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(2px)}
  100%{opacity:0;transform:translateY(8px)}
}
@media(prefers-reduced-motion:reduce){
.scrollChevrons svg{animation:none;opacity:1;transform:none}
}
/* ══════ 사회적 증거 — 누적 수 ══════
   ⚠⚠ 이 숫자는 반드시 실제 집계여야 합니다.
       지어낸 이용자 수는 표시광고법상 거짓·과장 광고이고,
       지금 진행 중인 정기결제 심사에서 걸리는 항목입니다.
       값이 없으면 블록이 통째로 숨습니다(.proof[hidden] · 마크업의 기본값).
       연동 지점은 data-* 속성입니다 — 하드코딩 금지.
   최근 활동 칩(.proof-stack·.pchip)은 SCRUM-96 에서 걷어냈습니다 — 닉네임 표시는
   약관·방침의 익명 표시 조항이 선행이라 YRMU-56 이 쓰지 않는 쪽을 골랐습니다. */
.proof{
  margin-top:22px;display:flex;align-items:center;justify-content:center;
  gap:28px;flex-wrap:wrap;
}
/* ⚠ display:flex 가 [hidden] 의 기본 display:none 을 덮습니다. */
.proof[hidden]{display:none}
.proof-head{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;color:var(--tx);white-space:nowrap;
}
.proof-head b{
  color:var(--main);font-weight:800;font-size:17px;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums lining-nums;
}
.proof-head .dot{
  width:7px;height:7px;border-radius:50%;background:var(--done);flex:none;
  box-shadow:0 0 0 0 rgba(31,157,99,.5);animation:proofPulse 2.2s infinite;
}
@keyframes proofPulse{
0%{box-shadow:0 0 0 0 rgba(31,157,99,.45)}
  70%{box-shadow:0 0 0 8px rgba(31,157,99,0)}
  100%{box-shadow:0 0 0 0 rgba(31,157,99,0)}
}
@media(prefers-reduced-motion:reduce){
.proof-head .dot{animation:none}
}
@media(max-width:560px){
.proof{gap:14px}
  .proof-head{font-size:11.5px;gap:6px}
  .proof-head b{font-size:14.5px}
}
.trust{margin-top:28px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.trust span{display:inline-flex;align-items:center;gap:7px;font:var(--f-label-s);color:var(--tx);
  background:#fff;border:0;border-radius:var(--r-sm);padding:7px 14px;box-shadow:none}
.trust .ck{flex:none;color:var(--done)}
/* ══════ 공용 프레임(브라우저) ══════ */
.frame{position:relative;order:1;margin-top:22px;border:1px solid var(--line);border-radius:var(--r-2xl);overflow:hidden;
  background:#fff;box-shadow:0 34px 70px -40px rgba(30,45,90,.42),0 2px 6px rgba(20,30,60,.05)}
.fbar{height:34px;background:var(--soft);border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:6px;padding:0 13px}
.fbar i{width:8px;height:8px;border-radius:50%;display:block}
.furl{margin-left:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);
  font:var(--f-caption-2);color:var(--fnt);padding:2px 10px}
.hdFbar{justify-content:space-between;padding:0 16px}
.hdFbarBadge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  color:var(--main);background:var(--tint);border-radius:99px;padding:4px 11px}
.hdFbarBadge i{width:5px;height:5px;border-radius:50%;background:var(--main);display:block}
.logo.d{width:78px;height:26px}
/* ══════ 샘플 ══════ */
.autohint{font:var(--f-caption-1);color:var(--fnt);margin-top:12px;text-align:center}
.autohint.off{color:var(--line-hover)}
/* ══════ 히어로 대시보드 (스크롤 게이지형) ══════ */
/* 스태퍼 : 대시보드 바깥 왼쪽, 세로형 */
.hdStepperOuter{order:2;align-self:center;width:56%;padding:4px 2px;display:flex;flex-direction:row;
  align-items:center}
.hdStep{display:flex;align-items:center;gap:10px;flex:none;min-height:26px}
.hdStepDot{width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--fnt);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .3s,color .3s,box-shadow .3s}
.hdStepDot svg{display:none;width:12px;height:12px}
.hdStepLab{font-size:13px;font-weight:700;color:var(--fnt);white-space:nowrap;transition:color .3s}
.hdStepLine{flex:1;min-width:16px;height:2px;background:var(--soft);margin:0 8px;position:relative;overflow:hidden}
.hdStepLine i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--grad-btn);
  transition:width .08s linear}
.hdStep.done .hdStepDot{background:var(--main);color:#fff}
.hdStep.done .hdStepDot svg{display:block}
.hdStep.done .hdStepDot span{display:none}
.hdStep.done .hdStepLab{color:var(--ink)}
.hdStep.current .hdStepDot{background:var(--grad-btn);color:#fff;box-shadow:0 0 0 5px rgba(102,148,245,.18)}
.hdStep.current .hdStepLab{color:var(--main);font-weight:800}
.hdDash{position:relative;display:grid;grid-template-columns:3fr 7fr;height:640px}
.hdConnSvg{position:absolute;inset:0;z-index:60;pointer-events:none;overflow:visible}
.hdConnSvg path{fill:none;stroke:var(--main);stroke-width:1.8;stroke-dasharray:500;stroke-dashoffset:500;
  opacity:0;transition:stroke-dashoffset .55s cubic-bezier(.4,0,.2,1),opacity .3s}
.hdConnSvg path.on{opacity:1;stroke-dashoffset:0}
.hdConnSvg circle{fill:var(--main);opacity:0;transition:opacity .3s}
.hdConnSvg circle.on{opacity:1}
.hdRail{background:var(--soft);color:var(--tx);padding:16px 14px;position:relative;overflow:hidden;
  border-right:1px solid var(--line)}
.hdRail .h{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--fnt)}
.hdRailScroll{height:100%;overflow-y:auto;scroll-behavior:smooth}
.hdRailScroll::-webkit-scrollbar{width:5px}
.hdRailScroll::-webkit-scrollbar-thumb{background:var(--line-hover);border-radius:3px}
.hdOpenMsg{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s;margin-bottom:14px}
.hdOpenMsg.show{opacity:1;transform:none}
.hdOpenMsg .b{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px 8px 8px 3px;
  padding:11px 14px;font-size:14.5px;font-weight:600;line-height:1.5;box-shadow:var(--e1)}
/* 채팅 팝업 : 스텝이 바뀔 때마다 슬라이드 대신 그 내용이 통째로 팝업됩니다 */
.hdChatPop{position:relative;padding:17px 17px 16px;border-radius:11px;background:#fff;
  box-shadow:0 14px 28px -16px rgba(47,111,208,.4),var(--e1);transform-origin:top left}
.hdChatPop.pop{animation:hdChatPopIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes hdChatPopIn{
0%{opacity:0;transform:scale(.86) translateY(8px)}
  55%{opacity:1;transform:scale(1.035) translateY(-1px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@media(prefers-reduced-motion:reduce){
.hdChatPop.pop{animation:none}
}
.hdChatPopLab{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--main)}
.hdRQ{margin-top:11px;font-size:14.5px;color:var(--tx);background:var(--soft);border:1px solid var(--line);
  border-radius:9px;padding:10px 13px;line-height:1.5}
.hdRA{margin-top:9px;font-size:14.5px;color:#fff;background:var(--grad-btn);border-radius:9px 9px 3px 9px;
  padding:10px 13px;max-width:94%;margin-left:auto;font-weight:600;line-height:1.5;box-shadow:var(--e-btn);
  opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease}
.hdRA.in{opacity:1;transform:none}
.hdRA:empty{display:none}
/* 타이핑 전 빈 말풍선이 조각처럼 보이지 않게 */

/* 「입력 중」 점 세 개 — AI 가 답을 만드는 사이 */
.hdDots{display:inline-flex;align-items:center;gap:5px;height:20px}
.hdDots i{width:6px;height:6px;border-radius:50%;background:var(--line-hover);display:block;
  animation:hdDot 1.15s ease-in-out infinite}
.hdDots i:nth-child(2){animation-delay:.16s}
.hdDots i:nth-child(3){animation-delay:.32s}
@keyframes hdDot{
0%,62%,100%{opacity:.32;transform:translateY(0)}
  31%{opacity:1;transform:translateY(-3px)}
}
/* 타이핑 커서 — 오프닝(.hdCursor)과 같은 규격을 씁니다 */
@media(prefers-reduced-motion:reduce){ .hdDots i{animation:none} }
.hdRHl{color:var(--main);font-weight:800}
.hdRA .hdRHl{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hdOpening{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(13,17,32,.32);opacity:0;pointer-events:none;transition:opacity .35s ease}
.hdOpening.show{opacity:1;pointer-events:auto}
.hdDash.blur .hdRail,.hdDash.blur .hdDocPanel{filter:blur(3px);transition:filter .35s ease}
.hdDash .hdRail,.hdDash .hdDocPanel{transition:filter .35s ease}
.hdOpenCard{width:74%;max-width:460px;background:#fff;border:1.5px solid var(--indigo);border-radius:var(--r-xl);
  padding:20px 22px;box-shadow:0 26px 50px -20px rgba(47,111,208,.45),var(--e3);
  transform:scale(1);opacity:1;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s ease}
.hdOpening.fly .hdOpenCard{transform:translate(-190px,-150px) scale(.22);opacity:0}
.hdOpenLab{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--main)}
.hdOpenText{margin-top:11px;font-size:17px;font-weight:700;color:var(--ink);line-height:1.6;min-height:52px}
.hdCursor{display:inline-block;width:2px;height:18px;background:var(--ink);margin-left:2px;
  animation:hdBlink 1s step-end infinite;vertical-align:middle}
@keyframes hdBlink{
50%{opacity:0}
}
.hdDocPanel{position:relative;overflow:hidden}
.hdDocScroll{height:100%;overflow-y:auto;padding:26px 30px;scroll-behavior:smooth}
.hdDocScroll::-webkit-scrollbar{width:6px}
.hdDocScroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.hdSec{min-height:400px;padding-bottom:34px;border-bottom:1px dashed var(--line);margin-bottom:34px}
.hdSec:last-child{border-bottom:0;margin-bottom:0;min-height:220px}
/* 문항 번호 — 문항과 함께 흐릅니다.
   ⚠ position:sticky 로 위에 고정해 봤으나 되돌렸습니다.
     스크롤이 조금이라도 지나가면 흰 띠가 바로 아래 제목을 덮어
     제목 윗부분이 잘렸습니다. 전환 중 배지가 잠깐 잘려 보이는 것보다
     제목이 가려지는 쪽이 훨씬 나쁩니다. */
.hdSecNo{display:flex}
.hdSecNo span{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--mut);
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 11px;font-variant-numeric:tabular-nums;
}
.hdSecNo b{color:var(--main);font-weight:800}
.hdSecNo s{text-decoration:none;color:var(--line-hover)}
.hdSecTitle{font-size:20px;font-weight:800;color:var(--ink);margin-top:10px;letter-spacing:-.4px}
.dtitle{text-align:center;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.14em;
  padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.dmain{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:15.5px;font-weight:700;
  color:var(--ink);line-height:1.6}
.dmain .mk{color:var(--main);flex:none}
.dol{margin-top:13px;display:flex;flex-direction:column;gap:10px}
.dol .l1{position:relative;padding-left:17px;font-size:14px;font-weight:600;color:var(--tx);line-height:1.7}
.dol .l1::before{content:"○";position:absolute;left:0;top:0;color:var(--main);font-size:11px}
.dol .l2{position:relative;padding-left:17px;margin-left:18px;margin-top:7px;font-size:13.2px;
  color:var(--mut);line-height:1.7}
.dol .l2::before{content:"·";position:absolute;left:0;top:0;color:var(--fnt)}
.dol .l3{position:relative;padding-left:15px;margin-left:18px;margin-top:6px;font-size:12.5px;
  color:var(--fnt);line-height:1.65}
.dol .l3::before{content:"·";position:absolute;left:0;top:0;color:#c3c8d6}
.dem{font-weight:800;color:var(--ink);border-radius:3px;padding:0 3px;margin:0 -3px;
  background-image:linear-gradient(var(--tint),var(--tint));background-repeat:no-repeat;
  background-position:left center;background-size:0% 100%;transition:background-size .6s ease}
.dem.lit{background-size:100% 100%}
/* 문서가 써지는 연출 — 말풍선 다음에 블록이 차례로 올라옵니다.
   ⚠ display 를 건드리지 않고 opacity/transform 만 씁니다. 문항 높이를
     fitSections() 로 맞춰 놨는데 블록을 빼면 레이아웃이 튑니다. */
.dw{opacity:0;transform:translateY(7px);
  transition:opacity .28s cubic-bezier(.22,.61,.36,1),transform .28s cubic-bezier(.22,.61,.36,1)}
.dw.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.dw{opacity:1;transform:none;transition:none}
}
.dfoot{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);font-size:12px;
  color:var(--mut);line-height:1.65}
.hlSync{display:inline-block;border-radius:4px;padding:1px 4px;font-weight:700;
  text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--line-hover);
  text-underline-offset:2px;transition:background .35s ease,color .35s ease,text-decoration-color .35s ease,
    box-shadow .35s ease}
.hlSync.flash{background:var(--grad-btn);color:#fff;text-decoration-color:transparent;
  box-shadow:0 4px 16px -4px rgba(47,111,208,.55);
  animation:hdPulse .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes hdPulse{
0%{transform:scale(1);box-shadow:0 0 0 0 rgba(102,148,245,.55)}
  35%{transform:scale(1.16);box-shadow:0 0 0 9px rgba(102,148,245,.16)}
  70%{transform:scale(.98);box-shadow:0 0 0 3px rgba(102,148,245,.08)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(102,148,245,0)}
}
@media(prefers-reduced-motion:reduce){
.hlSync.flash{animation:none} .dem{transition:none}
}
.hdHint{position:absolute;right:18px;bottom:18px;font-size:10.5px;color:var(--mut);
  border:1px dashed var(--line-hover);border-radius:8px;padding:6px 10px;background:#fff;opacity:1;transition:opacity .3s}
.hdHint.hide{opacity:0}
/* ══════ 빛번짐 — 「지금 AI가 찾고 있다」는 표시 ══════
   테두리를 훑는 그라데이션 링이 아니라, 프레임 뒤에서 브랜드 색 광원이
   번져 나오는 방식입니다. 색 덩어리 네 개가 아주 느리게 떠다니며
   숨 쉽니다 — 검색·연산이 돌고 있다는 느낌을 냅니다.
   ⚠ .frame 안쪽이 아니라 바깥(.hdStage)에 둡니다 — .frame 은 overflow:hidden 이고
     내부 패널(hdRail·hdDocPanel)이 불투명해서 안에 넣으면 보이지 않습니다.
   ⚠ overflow 를 걸지 않습니다. 잘리면 번짐이 아니라 띠가 됩니다. */
.hdStage{position:relative;order:1}
.hdStage>.frame{order:0;margin-top:0;z-index:1}
.hdAura{position:absolute;inset:-96px;z-index:0;pointer-events:none;
  filter:blur(64px);opacity:0;transition:opacity 1.4s ease}
.hdStage.live .hdAura{opacity:1}
.hdAura i{position:absolute;inset:0;display:block;
  background:
    radial-gradient(38% 42% at 16% 28%, rgba(81,198,202,.62), rgba(81,198,202,0) 72%),
    radial-gradient(34% 38% at 80% 20%, rgba(102,148,245,.58), rgba(102,148,245,0) 72%),
    radial-gradient(40% 44% at 66% 80%, rgba(140,143,242,.55), rgba(140,143,242,0) 72%),
    radial-gradient(32% 36% at 26% 78%, rgba(87,203,237,.5), rgba(87,203,237,0) 72%);
  animation:auraDrift 19s ease-in-out infinite, auraBreath 7s ease-in-out infinite}
@keyframes auraDrift{
0%,100%{transform:scale(1) translate(0,0)}
  25%{transform:scale(1.08) translate(2.5%,-2%)}
  50%{transform:scale(1.03) translate(-2%,2.5%)}
  75%{transform:scale(1.1) translate(1.5%,1.5%)}
}
@keyframes auraBreath{
0%,100%{opacity:.55} 50%{opacity:.95}
}
@media(prefers-reduced-motion:reduce){
.hdAura i{animation:none;opacity:.5}
  .hdStage.live .hdAura{opacity:.7}
}
@media(max-width:760px){
.hdStepperOuter{align-self:stretch;padding:12px 4px;justify-content:center}
  .hdStepLine{flex:0 0 22px;width:22px;margin:0 4px}
  .hdStepLab{display:none}

  /* ── 모바일 : 화면 폭까지 꽉 채웁니다 ──
     히어로 좌우 패딩(--gutter)을 음수 마진으로 상쇄합니다. 100vw 는 쓰지 않습니다 —
     스크롤바 폭이 포함돼 가로 스크롤이 생깁니다. */
  .heroFrameWrap{max-width:none;gap:14px;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .hdStage>.frame{border-radius:0;border-left:0;border-right:0}
  .hdAura{inset:-56px -24px;filter:blur(44px)}   /* 좁은 화면에선 번짐을 줄입니다 */

  /* ── 위 = 사업계획서 · 아래 = 채팅 ──
     DOM 순서는 채팅(hdRail) → 문서(hdDocPanel) 이므로 order 로 뒤집습니다.
     읽는 대상이 문서이니 위로 올리고, 대화는 아래에서 따라오게 합니다. */
  .hdDash{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto}
  .hdDocPanel{order:1;height:56vh;min-height:320px}
  .hdRail{order:2;height:auto;max-height:32vh;overflow-y:auto;
    border-right:0;border-top:1px solid var(--line)}
  .hdRailScroll{height:auto;overflow:visible}
  .hdHint{display:none}          /* 좁은 화면에서 문서 위를 가립니다 */
}
/* ══════ 프로세스 (시안 E) ══════ */
.eframe{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-2xl);overflow:hidden;
  background:#fff;box-shadow:0 34px 70px -40px rgba(30,45,90,.42),0 2px 6px rgba(20,30,60,.05);text-align:left}
.ebody{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:520px}
.eleft{padding:28px 22px;border-right:1px solid var(--line);background:var(--tint3);
  display:flex;flex-direction:column}
.eleft .autohint{font-size:13.5px}
.estage{display:flex;flex-direction:column;gap:8px}
.estage button{display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  font-size:15px;font-weight:500;letter-spacing:.005em;color:var(--mut);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px;min-height:56px;
  transition:all .16s}
.estage button i{font-style:normal;font-size:16px;font-weight:800;color:var(--fnt);
  width:24px;flex:none}
.estage button.on i{color:rgba(255,255,255,.8)}
.estage button:hover{border-color:var(--line-hover);color:var(--tx)}
.estage button.on{color:#fff;background:var(--grad-btn);
  border-color:transparent;box-shadow:var(--e-btn)}
/* 우측 단계 화면 */
.est{font:var(--f-caption-2);font-weight:800;letter-spacing:.16em;color:var(--indigo)}
.eh{font:var(--f-h2);letter-spacing:var(--ls-h2);color:var(--ink);margin-top:13px}
.ed{font:var(--f-body-1);letter-spacing:var(--ls-body-1);color:var(--mut);margin-top:14px;max-width:660px}
.ecard{margin-top:26px;background:var(--tint3);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 34px}
.epill{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:12px 20px;font:var(--f-label-m);color:var(--ink);box-shadow:var(--e1)}
.epill .fi{width:15px;height:15px;border-radius:3px;background:var(--ing-bg);border:1px solid var(--ing-ln);flex:none}
.epill .dn{color:var(--indigo)}
.epill.done{background:var(--done-bg);border-color:var(--done-ln);color:#166b45}
.epill.done .fi{background:var(--done);border-color:var(--done);display:flex;align-items:center;justify-content:center}
.epill.danger{background:var(--danger-bg);border-color:var(--danger-ln);color:#8f2a2a}
.epill.danger .dot{width:7px;height:7px;border-radius:50%;background:var(--danger);flex:none}
.hwpIcon{flex:none}
.espin{width:13px;height:13px;border-radius:50%;flex:none;
  border:2px solid var(--ing-ln);border-top-color:var(--indigo);animation:spin .8s linear infinite}
@keyframes spin{
to{transform:rotate(360deg)}
}
.eitems{margin-top:20px;display:flex;flex-direction:column;gap:13px}
.eitems div{display:flex;align-items:center;gap:15px;font:var(--f-body-2);color:var(--tx)}
.eitems b{font:var(--f-caption-1);font-weight:800;color:var(--indigo);width:12px;flex:none}
.enote{margin-top:18px;font:var(--f-body-3);color:var(--mut);line-height:1.7}
.ebars{display:flex;align-items:flex-end;gap:9px;height:88px;flex:none}
.ebars i{display:block;width:30px;border-radius:var(--r-xs) var(--r-xs) 2px 2px;background:var(--ing-ln)}
.ebars i:nth-child(2){background:#c9dcfb}
.ebars i:nth-child(3){background:#a9c6f7}
.ebars i:nth-child(4){background:var(--indigo)}
.echart{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.echart .tx b{display:block;font:var(--f-title-2);letter-spacing:var(--ls-title-2);color:var(--ink)}
.echart .tx p{font:var(--f-caption-1);color:var(--mut);margin-top:8px;line-height:1.7}
.egauge{margin-top:18px;height:8px;background:var(--soft);border-radius:var(--r-pill);overflow:hidden}
.egauge i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--blue),var(--peri));transition:width .4s}
.eprog{margin-top:auto;padding-top:20px}
.egl{margin-top:11px;display:flex;justify-content:space-between;
  font:var(--f-label-s);font-weight:700;color:var(--mut)}
.eright{padding:32px;background:#fff;min-width:0;display:flex;flex-direction:column;justify-content:center}
.fade{transition:opacity .8s ease}
.fade.out{opacity:0}
/* ══════ Programs (시안 D) ══════ */
.picker{margin-top:26px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.picker button{font:var(--f-label-s);color:var(--mut);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 17px;box-shadow:var(--e1);transition:all .16s}
.picker button:hover{border-color:var(--line-hover);color:var(--tx)}
.picker button.on{color:#fff;background:var(--grad-btn);
  border-color:transparent;box-shadow:var(--e-btn)}
.meter{margin-top:28px;height:8px;border-radius:var(--r-pill);background:var(--soft);overflow:hidden}
.meter i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--blue),var(--peri),var(--cyan));transition:width .35s}
.mlabel{margin-top:10px;display:flex;justify-content:space-between;font:var(--f-caption-2);
  font-weight:700;color:var(--fnt)}
.dgrid{margin-top:30px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;text-align:left}
.dcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 16px;
  min-height:152px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--e2);
  transition:opacity .25s,border-color .18s,box-shadow .18s,transform .18s}
.dcard.off{opacity:.4}
.dcard.on{border-color:var(--indigo);box-shadow:0 18px 40px -28px rgba(67,99,202,.75)}
.dcard.on:hover{transform:translateY(-2px)}
.dcard .fit{align-self:flex-start;font:var(--f-caption-2);font-weight:800;color:#fff;
  background:var(--grad-btn);border-radius:var(--r-xs);padding:2px 8px}
.dcard .no{font:var(--f-caption-2);font-weight:800;color:var(--fnt)}
.dcard .nm{font:var(--f-title-2);letter-spacing:var(--ls-title-2);color:var(--ink)}
.dcard .cd{font:var(--f-caption-1);color:var(--mut);line-height:1.55}
.dcard .amt{margin-top:auto;align-self:flex-start;font:var(--f-caption-2);font-weight:700;
  color:var(--indigo);background:var(--tint);border:1px solid var(--ing-ln);
  border-radius:var(--r-xs);padding:3px 9px}
/* ══════ Request — 다크 좌 / 화이트 우 ══════ */
.req2{display:grid;grid-template-columns:1fr 1.15fr;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -34px rgba(30,45,90,.28),0 2px 6px rgba(20,30,60,.06)}
.rl{background:linear-gradient(150deg,#0c1224,#141b3a 60%,#1c2554);padding:38px 34px;position:relative;
  overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.rl::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 85%);
  mask-image:linear-gradient(115deg,transparent 30%,#000 85%)}
.rl::after{content:"";position:absolute;right:-70px;bottom:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(102,148,245,.28),transparent 62%)}
.rl>*{position:relative;z-index:2}
.rl .k{color:#8fb6f5;font-weight:700}
.rl h4{font:var(--f-h3);font-weight:800;letter-spacing:var(--ls-h3);color:#fff;margin-top:11px}
.rl p{font:var(--f-body-2);letter-spacing:var(--ls-body-2);color:#a9b2d6;margin-top:12px}
.racts{margin-top:22px;display:flex;gap:9px;flex-wrap:wrap}
.btn.ghd{color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);box-shadow:none}
.btn.ghd:hover{background:rgba(255,255,255,.16);color:#fff;transform:none}
.rr{background:#fff;padding:34px 32px;display:flex;flex-direction:column;gap:20px;justify-content:center;
  border-left:1px solid var(--line)}
.ritem{display:flex;gap:13px;align-items:flex-start}
.ritem .ic{width:30px;height:30px;border-radius:var(--r-sm);background:var(--tint);color:var(--main);
  flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ritem b{font:var(--f-title-2);font-weight:700;letter-spacing:var(--ls-title-2);color:var(--ink);display:block}
.ritem small{font:var(--f-body-3);letter-spacing:var(--ls-body-3);color:var(--mut);display:block;
  margin-top:4px;line-height:1.65}
@media(max-width:760px){
.req2{grid-template-columns:1fr}
  .rl,.rr{padding:28px 24px}
}
/* ══════ FAQ ══════ *//* ══════ FAQ ══════ */
.fgrid{display:grid;grid-template-columns:310px minmax(0,1fr);gap:38px;align-items:center}
/* 좌측(제목 + 문의 카드)은 아코디언보다 짧습니다. 위로 붙이면 카드 아래가
   160px 넘게 비어 한쪽만 휑해 보입니다. 세로 가운데로 맞춰 공백을 위아래로 나눕니다. */
.fh{align-self:center}
.fh .k{font:var(--f-caption-1);font-weight:800;letter-spacing:.18em;color:var(--indigo)}
.fh h2{font:var(--f-h1);font-weight:800;letter-spacing:var(--ls-h1);color:var(--ink);margin-top:10px}
.mailcard{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;background:#fff;
  box-shadow:var(--e1)}
.mailic{width:36px;height:36px;border-radius:var(--r-md);background:var(--tint);color:var(--indigo);
  display:flex;align-items:center;justify-content:center}
.mailcard p{font:var(--f-body-3);letter-spacing:var(--ls-body-3);color:var(--mut);margin-top:13px}
.mailcard .em{font:var(--f-caption-1);color:var(--indigo);margin-top:11px;font-weight:600}
.acc{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;
  box-shadow:0 18px 44px -32px rgba(30,45,90,.35),0 2px 6px rgba(20,30,60,.05)}
.acci{border-top:1px solid var(--line)}
.acci:first-child{border-top:0}
.accq{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 20px;
  font:600 16px/1.45 var(--sans);letter-spacing:-.01em;color:var(--ink);cursor:pointer;user-select:none}
.accq:hover{background:var(--tint3)}
.accq .ic{margin-left:auto;position:relative;width:26px;height:26px;flex:none}
.accq .ic::before,.accq .ic::after{content:"";position:absolute;left:50%;top:50%;background:var(--mut);
  border-radius:2px;transform:translate(-50%,-50%);
  transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .2s,background .2s}
.accq .ic::before{width:18px;height:3px}
.accq .ic::after{width:3px;height:18px}
.acci.on .accq{color:var(--indigo)}
.acci.on .accq .ic::before{transform:translate(-50%,-50%) rotate(180deg);background:var(--indigo)}
.acci.on .accq .ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acca{overflow:hidden;max-height:0;padding:0 20px;opacity:0;
  font:var(--f-body-2);letter-spacing:var(--ls-body-2);color:var(--mut);
  transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s,padding .3s}
.acci.on .acca{max-height:260px;padding:0 20px 18px;opacity:1}
/* ══════ 마무리 CTA ══════ */
.endcta{position:relative;overflow:hidden;padding:96px var(--gutter);text-align:center;
  background:var(--ink)}
/* #0d1120 · 흰 글자 대비 18:1 */
.endcta>*{position:relative;z-index:2}
.endcta h3{font:var(--f-h1);letter-spacing:var(--ls-h1);color:#fff;font-weight:800}
/* 히어로 헤드라인과 같은 그라디언트 */
.endcta h3 em{font-style:normal;background:var(--grad-head);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.endcta p{font:var(--f-body-2);letter-spacing:var(--ls-body-2);color:#9aa3bb;margin-top:16px}
.endcta .btn{margin-top:28px;box-shadow:var(--e-btn),0 14px 34px -16px rgba(102,148,245,.55)}
.soon{font:var(--f-caption-2);font-weight:700;color:var(--ing);background:var(--ing-bg);
  border:1px solid var(--ing-ln);border-radius:var(--r-xs);padding:2px 7px}
.biz{border-top:1px solid var(--line);background:var(--paper)}
.biz .fin2{max-width:var(--max);margin:0 auto;padding:22px var(--gutter) 30px}
.biz .r{display:flex;flex-wrap:wrap;gap:6px 22px;font:var(--f-caption-1);color:var(--tx);line-height:1.9}
.biz .r i{font-style:normal;color:var(--fnt);margin-right:7px}
.biz .r+.r{margin-top:2px}
.biz .cr{margin-top:16px;font:var(--f-caption-2);color:var(--fnt)}
@media(prefers-reduced-motion:reduce){
.bubin{animation:none}.chat .stream{transition:none}.typing i{animation:none}.fade{transition:none}
}
@media(max-width:1000px){
.fbody{grid-template-columns:minmax(0,1fr) 260px}
  .fbody .fcol:first-child{display:none}
  .chat{height:420px}
  .docp{height:360px}
  .ebody{grid-template-columns:1fr;min-height:0}
  .eleft{border-right:0;border-bottom:1px solid var(--line);min-height:auto}
  .estage button{padding:13px 14px;min-height:46px}
  .estage{flex-direction:row;flex-wrap:wrap}
  .estage button{width:auto}
  .eright{padding:32px;min-height:380px}
  .dgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid{align-items:start}   /* 한 줄로 쌓이면 가운데 정렬이 의미 없습니다 */
}

/* ⚠ 위 주석은 「한 줄로 쌓이면」이라고 적혀 있는데 정작 1열로 바꾸는 규칙이
   없었습니다. 첫 열이 310px 고정이라 360px 화면에서 아코디언이 2px 로
   찌부러진 채 화면 밖(x=368)으로 밀려 가로 스크롤이 생겼습니다.
   310 + gap 38 + 아코디언 최소폭 ≈ 700 이므로 그 아래에서 접습니다. */
@media(max-width:760px){
  .fgrid{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media(max-width:640px){
.chat{height:380px}
  .eright{padding:32px;min-height:340px}
}
@media(max-width:640px){
:root{--gutter:20px;--secY:52px}
  .hero{padding-top:56px;padding-bottom:52px}
  .hero h1{font:var(--f-display-1);letter-spacing:var(--ls-display-1);font-weight:800}
  .shead h3{font:var(--f-h2);font-weight:800;letter-spacing:var(--ls-h2)}
  .fh h2{font:var(--f-h3);font-weight:800;letter-spacing:var(--ls-h3)}   /* 모바일은 h3 유지 */
  .endcta{padding:64px var(--gutter)}
  .endcta h3{font:var(--f-h2);letter-spacing:var(--ls-h2)}
  .btn.lg{width:100%}
  .fbody{grid-template-columns:1fr}
  .fbody .fcol:last-child{display:none}
  .chat{height:400px}
  .dgrid{grid-template-columns:1fr}
}

/* ▼ 우리 추가 */