/* =========================================================
   INVEX · 급등주검색기 — 제품 소개 사이트
   방향: 증권 단말기처럼, 잉크색 바탕에 가는 선과 숫자로 정보를 정렬하고 색은 신호에만 쓴다.
   ---------------------------------------------------------
   글꼴 2종: Pretendard(본문·제목) / JetBrains Mono(숫자·라벨)
   색: 주색 하나(--pri 블루) · 포인트 하나(--acc 레드) · 무채색(--ink, --tx)
   간격: 8px 단위(--s1~--s16)만 사용
   글자 크기: 12 · 14 · 16 · 20 · 28 · 40 · 56 (모바일은 상위 3단계만 축소)
   ========================================================= */
:root{
  /* 분위기 사진 (Unsplash). 못 불러오면 무채색 바탕만 보입니다 */
  --ph-hero: url("https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=1920&q=70");
  --ph-cta:  url("https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?auto=format&fit=crop&w=1920&q=70");

  --ink-0:#0b0d10; --ink-1:#111419; --ink-2:#171b21;
  --line:#242932; --line-2:#343a45;
  --tx:#eceef1; --tx-2:#a5adba; --tx-3:#727b89;
  --pri:#2f66e6;   /* 주색: 버튼, 선택, 하락 */
  --acc:#ff4d4f;   /* 포인트: 상승, 포착, 매수 */

  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,monospace;

  --t12:12px; --t14:14px; --t16:16px; --t20:20px; --t28:28px; --t40:40px; --t56:56px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px;
  --r:6px;
  --maxw:1200px;
}
@font-face{font-family:"Pretendard Variable";src:url("../assets/fonts/PretendardVariable-subset.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/JetBrainsMono-latin.woff2") format("woff2-variations");font-weight:100 800;font-display:swap}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink-0);color:var(--tx);font-family:var(--sans);font-size:var(--t16);line-height:1.6;letter-spacing:-.01em;word-break:keep-all;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
svg.lucide{width:1em;height:1em;stroke-width:1.75;flex-shrink:0}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
section{position:relative;scroll-margin-top:var(--s8)}
.mono{font-family:var(--mono);letter-spacing:0}
.up{color:var(--acc)}
.dn{color:var(--pri)}

/* 제품 전환 */
body[data-product="invex"] .p-surge,
body[data-product="surge"] .p-invex{display:none!important}

/* ---------- 공통 타이포 ---------- */
.kicker{font-family:var(--sans);font-weight:600;font-size:var(--t12);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);display:flex;gap:var(--s2);align-items:center}
.kicker::before{content:"";width:var(--s3);height:1px;background:var(--tx-3)}
.h1{font-size:var(--t56);line-height:1.15;font-weight:800;letter-spacing:-.04em}
.h2{font-size:var(--t40);line-height:1.2;font-weight:800;letter-spacing:-.035em}
.h3{font-size:var(--t28);line-height:1.3;font-weight:700;letter-spacing:-.03em}
.lead{font-size:var(--t20);line-height:1.6;color:var(--tx-2)}
.body-2{font-size:var(--t16);color:var(--tx-2)}
.note{font-size:var(--t14);color:var(--tx-3)}

/* 섹션 머리: 왼쪽 제목 · 오른쪽 설명 */
.sec{padding:var(--s16) 0;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8);align-items:end;margin-bottom:var(--s8)}
.sec-head .kicker{margin-bottom:var(--s3)}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);height:var(--s6);padding:0 var(--s3);border-radius:var(--r);font-size:var(--t16);font-weight:700;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.btn .lucide{font-size:var(--t20)}
.btn-pri{background:var(--pri);color:#fff}
.btn-pri:hover{background:#2658cc}
.btn-line{border:1px solid var(--line-2);color:var(--tx)}
.btn-line:hover{border-color:var(--tx-3)}
.btn-sm{height:40px;padding:0 var(--s2);font-size:var(--t14)}
.link{display:inline-flex;align-items:center;gap:var(--s1);font-weight:700;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.link:hover{border-color:var(--tx)}

/* ---------- 스크롤 등장 ---------- */
.reveal{opacity:0;transform:translateY(var(--s2));transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- 헤더 ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--s8);background:var(--ink-0);border-bottom:1px solid transparent;transition:border-color .2s}
.hd.scrolled{border-color:var(--line)}
.hd-in{height:100%;display:flex;align-items:center;gap:var(--s4);max-width:1280px}
.tg{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);border-radius:var(--r);padding:2px;flex-shrink:0}
.tg button{height:36px;padding:0 var(--s2);border-radius:4px;font-size:var(--t14);font-weight:700;color:var(--tx-2);white-space:nowrap;transition:background .2s,color .2s}
.tg button[aria-selected="true"]{background:var(--tx);color:var(--ink-0)}
.nav{display:flex;gap:var(--s3);margin-left:auto}
.nav a{font-size:var(--t14);font-weight:600;color:var(--tx-2);padding:var(--s1) 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.active{color:var(--tx);border-color:var(--tx)}
.menu-btn{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line-2);border-radius:var(--r);align-items:center;justify-content:center;font-size:var(--t20)}

/* ---------- 히어로 ---------- */
.hero{padding:calc(var(--s8) + var(--s12)) 0 var(--s8);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--ph-hero) center/cover no-repeat;opacity:.08;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
#s-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.hero-grid{gap:var(--s8);align-items:end}
.hero .kicker{margin-bottom:var(--s4)}
.hero-side{display:flex;flex-direction:column;gap:var(--s4)}
.hero-cta{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}

/* 데이터 줄 (카드 대신 구분선) */
.datarow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s8)}
.datarow>div{padding:var(--s3) var(--s3) var(--s3) 0}
.datarow>div+div{padding-left:var(--s3);border-left:1px solid var(--line)}
.datarow b{display:block;font-family:var(--mono);font-size:var(--t28);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.datarow b small{font-size:var(--t14);font-weight:500;color:var(--tx-2);margin-left:var(--s1);font-family:var(--sans)}
.datarow>div>span{display:block;margin-top:var(--s1);font-size:var(--t14);color:var(--tx-2)}

/* ---------- 메인 화면 (초점) ---------- */
.stage{padding:0 0 var(--s16)}
.screen{position:relative;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -40px #000}
.screen img{width:100%}
.hot{position:absolute;border:1px solid transparent;border-radius:4px;transition:border-color .2s,background .2s}
.hot:hover,.hot.on{border-color:var(--tx);background:rgba(236,238,241,.06)}
.hot i{position:absolute;left:var(--s1);top:var(--s1);min-width:var(--s3);height:var(--s3);padding:0 var(--s1);border-radius:2px;background:var(--tx);color:var(--ink-0);font:700 var(--t12)/var(--s3) var(--mono);text-align:center;font-style:normal}
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s4);margin-top:var(--s4)}
.legend li{display:grid;grid-template-columns:var(--s4) minmax(0,1fr);gap:var(--s1);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--t14);color:var(--tx-2);cursor:default}
.legend li i{font:600 var(--t12)/var(--s3) var(--mono);font-style:normal;color:var(--tx-3)}
.legend li b{color:var(--tx);font-weight:700;margin-right:var(--s1)}
.legend li:hover b{text-decoration:underline;text-underline-offset:4px}

/* ---------- 기능 행 ---------- */
.feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:center;padding:var(--s12) 0;border-top:1px solid var(--line)}
.feat:first-of-type{border-top:0;padding-top:0}
.feat.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.feat.rev .fig{order:2}
.fig{position:relative;padding:var(--s8) 0}
.shot{position:relative;margin:0 auto;border:1px solid var(--line-2);border-radius:var(--r)}
.shot img{border-radius:var(--r);width:100%}
.shot.light{max-width:377px}
.shot.light img{background:#fff}
.shot+.shot{margin-top:var(--s12)}
.f-no{font:600 var(--t12)/1 var(--mono);letter-spacing:.08em;color:var(--tx-3);text-transform:uppercase;display:block;margin-bottom:var(--s2)}
.feat .h3{margin-bottom:var(--s2)}
.feat .body-2{margin-bottom:var(--s3)}
.ticks li{position:relative;padding:var(--s1) 0 var(--s1) var(--s3);border-top:1px solid var(--line);font-size:var(--t14);color:var(--tx-2)}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li::before{content:"—";position:absolute;left:0;color:var(--tx-3)}
.tags{display:flex;flex-wrap:wrap;gap:var(--s1)}
.tags span{font:500 var(--t12)/1 var(--mono);padding:var(--s1);border:1px solid var(--line-2);border-radius:2px;color:var(--tx-2)}

/* 콜아웃: 점 = --x/--y(이미지 기준 %) · t = 라벨 위 · b = 라벨 아래 */
.callout{position:absolute;left:var(--x);display:flex;flex-direction:column;align-items:center;z-index:2;pointer-events:none;--o:40px;transform:translateX(-50%)}
.callout.t{top:calc(-1 * var(--o));height:calc(var(--y) + var(--o) + 5px)}
.callout.b{top:calc(var(--y) - 5px);height:calc(100% - var(--y) + var(--o) + 5px)}
.callout.edge-l{transform:translateX(-5px);align-items:flex-start}
.callout.edge-l .ln{margin-left:4px}
.callout.edge-r{transform:translateX(calc(-100% + 5px));align-items:flex-end}
.callout.edge-r .ln{margin-right:4px}
.callout .pt{width:10px;height:10px;border-radius:50%;background:var(--tx);box-shadow:0 0 0 2px var(--ink-0);flex-shrink:0}
.callout .ln{flex:1 1 auto;width:1px;min-height:var(--s1);background:var(--tx-2)}
.callout .tx{flex-shrink:0;padding:0 var(--s1);line-height:var(--s3);border-radius:2px;background:var(--tx);color:var(--ink-0);font-size:var(--t12);font-weight:700;white-space:nowrap}
.callout.hi .pt{background:var(--acc)}
.callout.hi .tx{background:var(--acc);color:#fff}

/* ---------- 도식 ---------- */
.panel{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.panel-top h3{font-size:var(--t16);font-weight:700;display:flex;align-items:center;gap:var(--s1)}
.key{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:var(--t12);color:var(--tx-2)}
.key span{display:inline-flex;align-items:center;gap:var(--s1)}
.key i{width:var(--s1);height:var(--s1);border-radius:50%;display:inline-block}
.svg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.diagram{width:100%;min-width:720px;height:auto;display:block}
.diagram .price{fill:none;stroke:var(--tx);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1600;stroke-dashoffset:1600}
.in .diagram .price,.diagram.in .price{animation:draw 2.6s .2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.diagram .mk{opacity:0}
.in .diagram .mk{animation:fade .4s ease forwards}
@keyframes fade{to{opacity:1}}
.swipe-hint{display:none;font-size:var(--t12);color:var(--tx-3);margin-top:var(--s1);align-items:center;gap:var(--s1)}

/* 4단 단계 (카드 없이 위 구분선 + 번호) */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6)}
.steps4>div{border-top:1px solid var(--tx);padding-top:var(--s2)}
.steps4 em{font:600 var(--t12)/1 var(--mono);font-style:normal;color:var(--tx-3);display:block;margin-bottom:var(--s2)}
.steps4 b{display:block;font-size:var(--t16);margin-bottom:var(--s1)}
.steps4 p{font-size:var(--t14);color:var(--tx-2)}

/* 이용 방법: 큰 번호 */
.how4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.how4>li{padding:var(--s4) var(--s3) var(--s4) 0}
.how4>li+li{padding-left:var(--s3);border-left:1px solid var(--line)}
.how4 .n{font:500 var(--t40)/1 var(--mono);color:var(--tx-3);display:block;margin-bottom:var(--s4)}
.how4 h3{font-size:var(--t20);margin-bottom:var(--s1)}
.how4 p{font-size:var(--t14);color:var(--tx-2)}
.how-cta{margin-top:var(--s6);display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}

/* 이용 방법 3D 아이콘 */
.how-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.how-top .n{margin-bottom:0}
.how-ic{width:120px;height:auto;flex-shrink:0}

/* 바로가기 상자 */
.qlink{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:var(--s2);align-items:center;margin-top:var(--s6);padding:var(--s3);border:1px solid #24345c;border-radius:16px;background:linear-gradient(180deg,#121a2b,#0d121c)}
.qlink-head{padding-right:var(--s2)}
.qlink-head .kicker{margin-bottom:var(--s1)}
.qlink-head h3{font-size:var(--t20);margin-bottom:4px}
.qlink-head p{font-size:var(--t14);color:var(--tx-2)}
.qlink-btn{display:flex;align-items:center;gap:var(--s2);height:100%;min-height:80px;padding:var(--s2);border:1px solid var(--line-2);border-radius:12px;background:#0f1522;transition:border-color .2s,background .2s}
.qlink-btn:hover{border-color:var(--pri);background:#131c30}
.qlink-ic{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:#1a2747;color:#8fb6ff;font-size:var(--t20)}
.qlink-btn b{display:flex;align-items:center;gap:6px;font-size:var(--t16)}
.qlink-btn b .lucide{font-size:var(--t14);color:var(--tx-3)}
.qlink-btn small{display:block;margin-top:2px;font-size:var(--t12);color:var(--tx-3)}

/* 표 */
.table{width:100%;border-collapse:collapse;margin-top:var(--s8);font-size:var(--t14)}
.table th,.table td{text-align:left;padding:var(--s2) var(--s2) var(--s2) 0;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font:600 var(--t12)/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3);border-bottom-color:var(--line-2)}
.table td:first-child{font-weight:700;width:28%}
.table td:nth-child(2){font-family:var(--mono);color:var(--tx-2);width:16%}
.table td:last-child{color:var(--tx-2)}

/* 장 시간 타임라인 */
.tl{margin-top:var(--s2)}
.tl-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
.tl-name{font-weight:700;font-size:var(--t14)}
.tl-name small{display:block;color:var(--tx-3);font-weight:500;font-size:var(--t12)}
.tl-track{position:relative;height:var(--s4);border:1px solid var(--line);border-radius:2px}
.seg{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;justify-content:center;font:600 var(--t12)/1 var(--mono);color:#fff;white-space:nowrap;overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform .9s ease}
.tl.in .seg{transform:scaleX(1)}
.seg.reg{background:var(--pri)}
.seg.pre,.seg.aft{background:rgba(47,102,230,.4)}
.seg.day{background:repeating-linear-gradient(135deg,#2a2f38 0 6px,#343a45 6px 12px);color:var(--tx-2)}
.tl-axis{position:relative;height:var(--s3);font:500 var(--t12)/1 var(--mono);color:var(--tx-3)}
.tl-axis span{position:absolute;transform:translateX(-50%)}
.tl-now{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--acc);z-index:2}
.tl-list{display:none}
.tl-key{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2);font-size:var(--t12);color:var(--tx-2)}
.tl-key span{display:inline-flex;align-items:center;gap:var(--s1)}
.tl-key i{width:var(--s2);height:var(--s1);display:inline-block}

/* 폰 화면 — 캡처(375×812 화면을 2배로 뜬 750×1624)가 실제 크기(가로 375px)로 보이도록 */
.phone{position:relative;width:100%;max-width:393px;border-radius:48px;padding:var(--s1);background:#1b1f26;border:1px solid var(--line-2);flex-shrink:0}
.phone::before{content:"";position:absolute;z-index:2;top:18px;left:50%;width:28%;height:24px;transform:translateX(-50%);border-radius:12px;background:#05070a}
.phone img{display:block;width:100%;height:auto;padding-top:var(--s4);border-radius:40px;background:#fff}
.phone.dk img{background:#17181c}
.phones{position:relative;display:grid;justify-items:end}
.phones .phone{grid-area:1/1}
.phones .phone:last-child{z-index:1;box-shadow:0 40px 80px -40px #000}
.phones .phone:first-child{transform:translate(-56%,var(--s8)) scale(.88);transform-origin:right top;filter:brightness(.55)}
.duo{display:flex;gap:var(--s3);justify-content:center}
.duo .phone{max-width:320px}
.duo .phone:last-child{margin-top:var(--s6)}

/* 진입 → 관리 → 청산 흐름 */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.flow>li{display:flex;flex-direction:column;gap:var(--s3)}
.flow>li>div:last-child{border-top:1px solid var(--tx);padding-top:var(--s2)}
.flow .phone{max-width:393px}
.flow .n{font:600 var(--t12)/1 var(--mono);color:var(--tx-3);display:block;margin-bottom:var(--s1)}
.flow b{display:block;font-size:var(--t20);margin-bottom:var(--s1)}
.flow p{font-size:var(--t14);color:var(--tx-2)}

/* 텔레그램 알림 예시 */
.tgm{max-width:400px;margin:0 auto;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--ink-1)}
.tgm-hd{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);border-bottom:1px solid var(--line)}
.tgm-hd b{font-size:var(--t14);display:block}
.tgm-hd small{font-size:var(--t12);color:var(--tx-3)}
.tgm-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;font-size:var(--t20)}
.tgm-bd{padding:var(--s2);display:grid;gap:var(--s1)}
.tgm-msg{justify-self:start;padding:var(--s1) var(--s2);border-radius:2px var(--r) var(--r) var(--r);background:var(--ink-2);font-size:var(--t14);line-height:1.6}
.tgm-msg small{display:block;color:var(--tx-3);font:500 var(--t12)/1.6 var(--mono)}
.tgm-tag{display:inline-block;font:700 var(--t12)/20px var(--mono);margin-right:var(--s1);padding:0 var(--s1);border:1px solid var(--line-2);border-radius:2px;color:var(--tx-2)}
.tgm-tag.hi{border-color:var(--acc);color:var(--acc)}
.tgm-tag.dn{border-color:var(--pri);color:#8fb0ff}
.tgm-ft{padding:var(--s1) var(--s2);font-size:var(--t12);color:var(--tx-3);border-top:1px solid var(--line)}


/* ---------- 두 제품 (구분선으로 나눔) ---------- */
.prod2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.prod2>div{padding:var(--s6) var(--s6) var(--s6) 0}
.prod2>div+div{padding-left:var(--s6);border-left:1px solid var(--line-2)}
.prod2 .kicker{margin-bottom:var(--s2)}
.prod2 h3{font-size:var(--t28);margin-bottom:var(--s1)}
.prod2 p{color:var(--tx-2);margin-bottom:var(--s3)}
.prod2 .ticks{margin-bottom:var(--s4)}
.prod2 .here{font-size:var(--t14);color:var(--tx-3);font-weight:700}
body[data-product="invex"] .prod2 [data-go="invex"],
body[data-product="surge"] .prod2 [data-go="surge"]{display:none}
body[data-product="invex"] .prod2 .here-surge,
body[data-product="surge"] .prod2 .here-invex{display:none}

/* ---------- 고객후기: 손으로 넘기는 무한 슬라이드 (캡처는 원본 크기 그대로) ---------- */
.rv-slider{margin:0 calc(50% - 50vw);overflow:hidden;outline:none}
.rv-track{display:flex;padding:0 var(--s4);will-change:transform;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.rv-track.drag{cursor:grabbing}
.rv-track img{pointer-events:none}
.rv-slide{flex:0 0 432px;height:680px;margin:0 var(--s3) 0 0;display:flex;align-items:center;justify-content:center;padding:var(--s2);background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r)}
.rv-slide img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:4px;-webkit-user-drag:none}
.rv-ctrl{display:flex;gap:var(--s1);margin-top:var(--s3);padding:0 max(var(--s4),calc(50vw - var(--maxw)/2 + var(--s4)))}
.rv-btn{width:var(--s6);height:var(--s6);border:1px solid var(--line-2);border-radius:var(--r);display:grid;place-items:center;font-size:var(--t20);transition:border-color .2s,background .2s}
.rv-btn:hover{border-color:var(--tx);background:var(--ink-2)}

/* ---------- FAQ ---------- */
.faq{max-width:960px}
.faq-search{display:flex;align-items:center;gap:var(--s2);height:56px;padding:0 var(--s3);border:1px solid #24345c;border-radius:12px;background:linear-gradient(180deg,#121a2b,#0d121c);color:var(--tx-3);font-size:var(--t20)}
.faq-search:focus-within{border-color:var(--pri)}
.faq-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--tx);font:inherit;font-size:var(--t16)}
.faq-search input::placeholder{color:var(--tx-3)}
.faq-chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s3) 0}
.faq-chip{height:40px;padding:0 var(--s3);border-radius:999px;border:1px solid var(--line-2);font-size:var(--t14);font-weight:600;color:var(--tx-2);transition:background .2s,border-color .2s,color .2s}
.faq-chip:hover{border-color:var(--tx-3);color:var(--tx)}
.faq-chip[aria-pressed="true"]{background:var(--pri);border-color:var(--pri);color:#fff}
.faq-list{display:grid;gap:var(--s1)}
.faq-item{border:1px solid var(--line-2);border-radius:12px;background:linear-gradient(180deg,#111827,#0d121c);overflow:hidden}
.faq-item[open]{border-color:#2a3d6b}
.faq-item summary{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);cursor:pointer;list-style:none;font-size:var(--t16);font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .lucide{margin-left:auto;font-size:var(--t20);color:var(--tx-2);transition:transform .2s}
.faq-item[open] summary .lucide{transform:rotate(180deg)}
.faq-q{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:#1b2643;color:#cfe0ff;font:700 var(--t14)/1 var(--mono)}
.faq-q.a{background:#1a3366;color:#8fb6ff}
.faq-a{display:flex;gap:var(--s2);margin:0 var(--s3);padding:var(--s2) 0 var(--s3);border-top:1px solid var(--line)}
.faq-a p{font-size:var(--t14);line-height:1.8;color:var(--tx-2);max-width:720px}
.faq-empty{margin-top:var(--s3);font-size:var(--t14);color:var(--tx-3)}

/* ---------- 회사소개 ---------- */
.co-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center;margin-bottom:var(--s8)}
.co-head .kicker{margin-bottom:var(--s3)}
.co-head .h2{margin-bottom:var(--s2)}
.co-photo{margin:0;justify-self:end;width:100%;max-width:698px}
.co-photo img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line-2)}
.co-block{margin-top:var(--s8)}
.co-block:first-of-type{margin-top:0}
.co-label{display:flex;align-items:baseline;gap:var(--s1);font-size:var(--t20);font-weight:700;margin-bottom:var(--s3)}
.co-label span{font:500 var(--t12)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.co-mission{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.co-mission li{display:flex;flex-direction:column;padding:var(--s3);border:1px solid var(--line-2);border-radius:12px;background:linear-gradient(180deg,#121a2b,#0d121c)}
.co-mission .n{font:500 var(--t28)/1 var(--mono);color:var(--tx-2)}
.co-mission img{width:144px;height:auto;align-self:center;margin:var(--s1) 0 var(--s2)}
.co-mission h3{font-size:var(--t20);margin-bottom:var(--s1)}
.co-mission p{font-size:var(--t14);color:var(--tx-2)}
.co-values2{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6)}
.co-values2 li{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.cv-ic{width:64px;height:64px;flex-shrink:0;display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,#16203a,#0e1426);border:1px solid #24345c;color:#6f9bff;font-size:28px;box-shadow:0 0 24px -6px rgba(47,102,230,.6)}
.co-values2 b{display:flex;align-items:baseline;gap:var(--s1);font-size:var(--t20)}
.co-values2 b small{font:500 var(--t12)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.co-values2 p{font-size:var(--t14);color:var(--tx-2);margin-top:4px}
.co-values{margin-top:0}
.co-values td:first-child{font-size:var(--t16);width:16%}
.co-values td:nth-child(2){font-size:var(--t12);text-transform:uppercase;letter-spacing:.06em;width:20%}
.co-quote{position:relative;margin:var(--s12) 0 0;padding:var(--s6) 0 var(--s8);border-top:1px solid var(--line-2);overflow:hidden}
.co-quote::before{content:"";position:absolute;right:calc(50% - 50vw);top:0;bottom:0;width:62%;background:url("../assets/img/ceo-bg.webp") right center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%);opacity:.85;pointer-events:none}
.co-quote>*{position:relative}
.co-quote blockquote{margin:0;max-width:720px;padding-left:var(--s8)}
.co-qmark{position:absolute;left:0;top:-12px;font:900 88px/1 Georgia,serif;color:var(--pri)}
.co-quote blockquote p{font-size:var(--t20);line-height:1.6;color:#d4d9e2}
.co-quote .co-q1{font-size:var(--t28);font-weight:700;color:var(--tx);letter-spacing:-.03em;margin-bottom:var(--s2)}
.co-quote .co-q3{margin-top:var(--s3);font-weight:700;color:#7ab0ff}
.co-quote figcaption{margin-top:var(--s4);padding-left:var(--s8);font-size:var(--t14);color:var(--tx-2)}
.co-quote figcaption::before{content:"— "}
.co-patent{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center;margin-top:var(--s12)}
.co-patent .h3{margin-bottom:var(--s4)}
.co-dl{margin:0}
.co-dl>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:var(--t14)}
.co-dl>div:last-child{border-bottom:1px solid var(--line)}
.co-dl dt{color:var(--tx-3)}
.co-dl dd{margin:0}
.co-cert{margin:0;justify-self:end;max-width:525px;width:100%}
.co-cert img{width:100%;border-radius:var(--r)}

/* ---------- 하단 CTA ---------- */
.cta{padding:var(--s16) 0;border-top:1px solid var(--line);position:relative;overflow:hidden}
.cta-bg{position:absolute;inset:0;background:var(--ph-cta) center/cover no-repeat;opacity:.1;pointer-events:none}
.cta-in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:end}
.cta .h2{margin-top:var(--s3)}
.cta-side{display:flex;flex-direction:column;gap:var(--s3)}

/* ---------- 유의 · 푸터 ---------- */
.warn{border-top:1px solid var(--line)}
.warn .wrap{display:grid;grid-template-columns:var(--s4) minmax(0,1fr);gap:var(--s2);padding-top:var(--s4);padding-bottom:var(--s4);font-size:var(--t14)}
.warn .lucide{font-size:var(--t20);color:var(--tx-2);margin-top:2px}
.warn small{display:block;color:var(--tx-3);margin-top:var(--s1);font-size:var(--t12)}
.footer{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s12);color:var(--tx-3);font-size:var(--t12)}
.ft-top{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.ft-top b{color:var(--tx);font-size:var(--t16)}
.ft-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);font-size:var(--t14)}
.ft-links a{color:var(--tx-2)}
.ft-links{align-items:center}
.ft-yt{display:inline-flex;align-items:center;gap:var(--s1);color:var(--tx)!important;font-weight:600}
.ft-yt svg{width:var(--s3);height:var(--s3);color:#ff0033}
.ft-yt:hover{text-decoration:underline;text-underline-offset:4px}
.biz{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);line-height:1.8}
.biz b{color:var(--tx-2);font-weight:600;margin-right:var(--s1)}
.copy{margin-top:var(--s2)}

/* 모바일 하단 상담 버튼 */
.fab{position:fixed;left:var(--s2);right:var(--s2);bottom:var(--s2);z-index:60;display:none;height:var(--s6);border-radius:var(--r);background:var(--pri);color:#fff;font-weight:700;align-items:center;justify-content:center;gap:var(--s1)}

/* ---------- 반응형 ---------- */
@media (max-width:1080px){
  .nav{gap:var(--s2)}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how4,.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how4>li:nth-child(3){padding-left:0;border-left:0}
  .how4>li:nth-child(n+3){border-top:1px solid var(--line)}
  .trio{gap:var(--s3)}
}
@media (max-width:860px){
  :root{--t56:40px;--t40:32px;--t28:24px}
  .wrap{padding:0 var(--s2)}
  .nav{position:fixed;top:var(--s8);left:0;right:0;flex-direction:column;gap:0;padding:0 var(--s2) var(--s2);background:var(--ink-0);border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .nav a{padding:var(--s2) 0;font-size:var(--t16);border-bottom:1px solid var(--line)}
  .menu-btn{display:inline-flex}
  .hd .btn-sm{display:none}
  .sec{padding:var(--s12) 0}
  .sec-head,.hero-grid,.cta-in,#s-hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .hero{padding:calc(var(--s8) + var(--s8)) 0 var(--s6)}
  .datarow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .datarow>div:nth-child(3){padding-left:0;border-left:0}
  .datarow>div:nth-child(n+3){border-top:1px solid var(--line)}
  .feat,.feat.rev{grid-template-columns:minmax(0,1fr);gap:0;padding:var(--s8) 0}
  .feat.rev .fig{order:0}
  .fig{padding:var(--s6) 0}
  .trio{grid-template-columns:minmax(0,1fr);gap:var(--s6);justify-items:center}
  .flow{grid-template-columns:minmax(0,1fr);gap:var(--s6);justify-items:center}
  .flow>li{max-width:300px;width:100%}
  .trio figure{max-width:300px;width:100%}
  .prod2{grid-template-columns:minmax(0,1fr)}
  .prod2>div{padding:var(--s4) 0}
  .prod2>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line-2)}
  .fab{display:flex}
  .qlink{grid-template-columns:minmax(0,1fr)}
  .rv-slide{flex-basis:364px;height:640px;padding:0;margin-right:var(--s2);border:0;background:none}
  .rv-track{padding:0 var(--s2)}
  .rv-ctrl{padding:0 var(--s2)}
  .co-patent,.co-head{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .co-mission{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-values2{grid-template-columns:minmax(0,1fr)}
  .co-quote::before{width:100%;opacity:.35}
  .co-cert{justify-self:start}
  .co-quote blockquote{padding-left:var(--s6)}
  .co-quote figcaption{padding-left:var(--s6)}
  .co-quote .co-q1{font-size:var(--t20)}
  .co-quote blockquote p{font-size:var(--t16)}
  .co-quote blockquote p br{display:none}
  .co-values td:nth-child(2){display:none}
  .phones{justify-items:center}
  .phones .phone:first-child{display:none}
  .duo .phone:first-child{display:none}
  .duo .phone:last-child{margin-top:0}
  .footer{padding-bottom:var(--s16)}
}
@media (max-width:600px){
  .co-mission{grid-template-columns:minmax(0,1fr)}
  .how-ic{width:96px}
  .legend{grid-template-columns:minmax(0,1fr)}
  .hot i{left:0;top:0;min-width:var(--s2);height:var(--s2);font-size:var(--t12);line-height:var(--s2);padding:0}
  .how4,.steps4{grid-template-columns:minmax(0,1fr)}
  .how4>li,.how4>li+li{padding:var(--s3) 0;border-left:0}
  .how4>li+li{border-top:1px solid var(--line)}
  .callout{--o:32px}
  .callout .tx{font-size:var(--t12);line-height:20px}
  .diagram{min-width:640px}
  .swipe-hint{display:flex}
  .panel{padding:var(--s2)}
  .seg{font-size:0}
  .tl-row{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .tl-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s2);font-size:var(--t14);color:var(--tx-2)}
  .tl-list b{display:block;color:var(--tx)}
  .table td:first-child{width:auto}
}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 약관 · 개인정보처리방침 ---------- */
.doc-page .hd-in{justify-content:space-between}
.doc-home,.doc-other{font-size:var(--t14);font-weight:600;color:var(--tx-2)}
.doc-home:hover,.doc-other:hover{color:var(--tx)}
.doc{padding:calc(var(--s8) + var(--s8)) 0 var(--s12)}
.doc .wrap{max-width:880px}
.doc .kicker{margin-bottom:var(--s3)}
.doc-eff{margin-top:var(--s2);font-size:var(--t14);color:var(--tx-3)}
.doc-toc{margin:var(--s6) 0;padding:var(--s3);border:1px solid var(--line-2);border-radius:12px;background:var(--ink-1)}
.doc-toc ol{columns:2 240px;column-gap:var(--s4);list-style:none;padding:0;margin:0}
.doc-toc li{padding:4px 0;font-size:var(--t14)}
.doc-toc a{color:var(--tx-2)}
.doc-toc a:hover{color:var(--tx);text-decoration:underline}
.doc-sec{padding:var(--s4) 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.doc-sec h2{font-size:var(--t20);margin-bottom:var(--s2)}
.doc p,.doc li{font-size:var(--t16);line-height:1.8;color:#c4cad4}
.doc>.wrap>p:not(.kicker):not(.doc-eff){margin-bottom:var(--s3)}
.doc ol,.doc ul{padding-left:var(--s3);margin:var(--s1) 0}
.doc-sec ol{list-style:decimal}
.doc-sec ul{list-style:disc}
.doc-sub{padding-left:var(--s4);color:var(--tx-2)!important;font-size:var(--t14)!important}
.doc-page .footer{padding-bottom:var(--s6)}

/* ---------- 섹션 모서리 푸른 빛 ---------- */
.glow-sec{overflow:hidden}
.glow-sec::before,.glow-sec::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;filter:blur(20px)}
.glow-sec::before{right:-260px;top:-300px;background:radial-gradient(closest-side,rgba(47,102,230,.45),transparent)}
.glow-sec::after{left:-280px;bottom:-320px;background:radial-gradient(closest-side,rgba(47,102,230,.35),transparent)}
.glow-sec>.wrap{position:relative}

/* ---------- 서비스 소개 4카드 ---------- */
.svc4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.svc4 li{padding:var(--s4) var(--s3);border:1px solid #1f2b47;border-radius:16px;background:linear-gradient(180deg,#121a2b,#0d121c)}
.svc-ic{width:64px;height:64px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(180deg,#1d2a4a,#141d33);border:1px solid #2a3a63;color:#6f9bff;font-size:30px;box-shadow:0 0 24px -6px rgba(47,102,230,.55);margin-bottom:var(--s3)}
.svc4 .n{display:block;font:600 var(--t16)/1 var(--mono);color:var(--tx-3);margin-bottom:var(--s1)}
.svc4 h3{font-size:var(--t28);margin-bottom:var(--s2)}
.svc4 p{font-size:var(--t14);line-height:1.7;color:var(--tx-2)}

/* ---------- 두 제품 카드 ---------- */
.pcard2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pc{display:flex;flex-direction:column;padding:var(--s4);border:1px solid #1f2b47;border-radius:16px;background:linear-gradient(180deg,#121a2b,#0d121c)}
.pc .kicker{margin-bottom:var(--s2)}
.pc-head{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start;padding-bottom:var(--s3);border-bottom:1px solid var(--line-2)}
.pc-head h3{font-size:var(--t28);margin-bottom:var(--s1)}
.pc-head p{color:var(--tx-2)}
.pc-logo{width:88px;height:88px;border-radius:22px;flex-shrink:0;box-shadow:0 10px 30px -10px rgba(47,102,230,.7)}
.pc-checks{display:grid;gap:var(--s2);margin:var(--s3) 0 var(--s4)}
.pc-checks li{display:flex;align-items:center;gap:var(--s2);font-size:var(--t16)}
.pc-checks li::before{content:"";width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--pri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.pc-go{margin-top:auto;display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t16);font-weight:700;color:var(--tx);align-self:flex-start}
.pc-go:hover .lucide{transform:translateX(3px)}
.pc-go .lucide{transition:transform .2s}
.pc .here{color:var(--tx-2)}
body[data-product="invex"] .pc [data-go="invex"],
body[data-product="surge"] .pc [data-go="surge"]{display:none}
body[data-product="invex"] .pc .here-surge,
body[data-product="surge"] .pc .here-invex{display:none}

/* ---------- 특허 (서지사항) ---------- */
.pat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center;margin-top:var(--s12);padding:var(--s6);border-radius:24px;background:linear-gradient(135deg,#f6f8fd,#e9effb);color:#0f1a2e}
.pat-org{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.pat-org-ic{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#1a3a8a;font-size:28px;box-shadow:0 4px 14px -6px rgba(15,26,46,.3)}
.pat-org b{display:block;font-size:var(--t28);line-height:1.1}
.pat-org small{font-size:var(--t12);color:#45516a}
.pat-chip{display:inline-flex;align-items:center;gap:var(--s1);height:40px;padding:0 var(--s2);border-radius:999px;background:#dfe9ff;color:#1f5ff0;font-weight:700}
.pat-chip .lucide{font-size:var(--t20)}
.pat h3{margin:var(--s3) 0 var(--s2);font-size:var(--t28);line-height:1.35;letter-spacing:-.03em}
.pat-desc{color:#45516a;margin-bottom:var(--s4)}
.pat-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.pat-meta>div{display:flex;gap:var(--s1);align-items:center}
.pat-mi{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:#fff;color:#1a3a8a;font-size:var(--t20)}
.pat-meta small{display:block;font-size:var(--t12);color:#5b667d}
.pat-meta b{font:700 var(--t14)/1.3 var(--mono);color:#0f1a2e;white-space:nowrap}
.pat-done{display:flex;align-items:center;gap:var(--s1);margin-top:var(--s4);padding:var(--s2) var(--s3);border-radius:12px;background:#e4ecfc;color:#1f5ff0;font-weight:700}
.pat-doc{padding:var(--s3);border-radius:16px;background:#fff;box-shadow:0 20px 50px -24px rgba(15,26,46,.35)}
.pat-doc-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);margin-bottom:var(--s2)}
.pat-doc-head h4{font-size:var(--t20)}
.pat-doc-head h4 small{font-size:var(--t14);font-weight:600}
.pat-doc-head span{font:500 var(--t14)/1 var(--mono);color:#5b667d}
.pat-tbl{width:100%;border-collapse:collapse;font-size:var(--t12)}
.pat-tbl th,.pat-tbl td{padding:var(--s1) var(--s2);border-bottom:1px solid #e3e8f2;text-align:left;vertical-align:middle;line-height:1.5}
.pat-tbl th{width:32%;background:#f3f6fb;font-weight:700;color:#1b2740}
.pat-tbl td{color:#2a3550}

/* ---------- 상담 신청 폼 ---------- */
.cta-in{align-items:start}
.cform{padding:var(--s4);border:1px solid #1f2b47;border-radius:16px;background:linear-gradient(180deg,#121a2b,#0d121c)}
.cform-head{display:flex;justify-content:space-between;gap:var(--s2);padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line-2)}
.cform-head small{font-size:var(--t12);letter-spacing:.06em;text-transform:uppercase;color:#7aa5ff}
.cform-head h3{font-size:var(--t28);margin:4px 0}
.cform-head p{font-size:var(--t14);color:var(--tx-2)}
.cform-ic{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:#1a2747;color:#8fb6ff;font-size:var(--t20)}
.cform-types{border:0;padding:0;margin:0 0 var(--s3);display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
.cform-types legend,.cform-f>span{display:block;font-size:var(--t14);font-weight:600;margin-bottom:var(--s1)}
.cform-types label{display:flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s2);border:1px solid var(--line-2);border-radius:10px;cursor:pointer;font-size:var(--t14)}
.cform-types label:has(input:checked){border-color:var(--pri);background:rgba(47,102,230,.12)}
.cform input[type=radio],.cform input[type=checkbox]{width:18px;height:18px;accent-color:var(--pri);flex-shrink:0;margin:0}
.cform-f{display:block;margin-bottom:var(--s2)}
.cform-f input{width:100%;height:48px;padding:0 var(--s2);border:1px solid var(--line-2);border-radius:10px;background:#0b0f18;color:var(--tx);font:inherit;font-size:var(--t16)}
.cform-f input:focus{outline:none;border-color:var(--pri)}
.cform-f input::placeholder{color:var(--tx-3)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform-agree{display:flex;align-items:center;gap:var(--s1);font-size:var(--t14);cursor:pointer;margin-top:var(--s1)}
.cform-terms{margin:var(--s1) 0 var(--s2) 26px;font-size:var(--t12);color:var(--tx-3)}
.cform-terms summary{cursor:pointer;text-decoration:underline}
.cform-terms p{margin-top:var(--s1);line-height:1.7}
.cform-terms a{text-decoration:underline}
.cform-msg{margin-bottom:var(--s2);padding:var(--s2);border-radius:10px;font-size:var(--t14);background:#1a2747;color:#cfe0ff}
.cform-msg.err{background:rgba(255,77,79,.12);color:#ff9a9b}
.cform-msg.ok{background:rgba(47,102,230,.18);color:#cfe0ff}
.cform-submit{width:100%}
.cform-submit[disabled]{opacity:.6;cursor:wait}
.cform-kakao{display:flex;justify-content:center;align-items:center;gap:var(--s1);margin-top:var(--s2);font-size:var(--t14);color:var(--tx-2)}
.cform-kakao:hover{color:var(--tx);text-decoration:underline}

@media (max-width:1080px){
  .svc4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pat{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .pcard2{grid-template-columns:minmax(0,1fr)}
  .pat{padding:var(--s3)}
}
@media (max-width:600px){
  .svc4{grid-template-columns:minmax(0,1fr)}
  .cform{padding:var(--s3)}
  .cform-types{grid-template-columns:minmax(0,1fr)}
  .pc{padding:var(--s3)}
  .pc-logo{width:64px;height:64px;border-radius:16px}
  .pat h3 br{display:none}
}