/* 씨엔피솔루션 랜딩페이지 전역 스타일 (토큰 + 레이아웃 + 컴포넌트) */

:root{
  --accent:#1f5fd6;
  --accent-dk:#1546a6;
  --accent-sf:#eef3fd;
  --ink:#101623;
  --ink-2:#4a5468;
  --ink-3:#8d97a8;
  --line:#e3e7ee;
  --bg:#fff;
  --bg-2:#f6f8fb;
  --dark:#101623;
  --ok:#e9f6ee; --ok-t:#1c7a45;
  --out:#eef1f6; --out-t:#4a5468;
  --wrap:1160px;
  --r:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;word-break:keep-all;
}
h1,h2,h3,p,dl,dd,dt,ol,ul,figure{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ta-r{text-align:right}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:8px;padding:12px 22px;
  font-weight:600;font-size:15px;transition:background .15s,border-color .15s,color .15s;
}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-dk)}
.btn--line{border-color:var(--line);color:var(--ink);background:#fff}
.btn--line:hover{border-color:var(--ink-3)}
.btn--sm{padding:9px 16px;font-size:14px}
.btn--lg{padding:14px 28px;font-size:16px}
.btn--block{width:100%}

/* ---------- 헤더 ---------- */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:68px;
  display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo__mark{display:grid;place-items:center;width:46px;height:28px;border-radius:6px;
  background:var(--accent);color:#fff;font-weight:700;font-size:12px;letter-spacing:.06em}
.logo__txt{font-weight:700;font-size:17px;letter-spacing:-.02em}
.gnb{margin-left:auto;display:flex;gap:28px}
.gnb a{font-size:15px;color:var(--ink-2);font-weight:500}
.gnb a:hover{color:var(--accent)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}

/* ---------- 공통 섹션 ---------- */
.sec{padding:96px 0}
.sec--alt{background:var(--bg-2)}
.sec__hd{max-width:660px;margin:0 auto 48px;text-align:center}
.sec__hd--left{margin-left:0;text-align:left}
.sec__hd h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.03em;line-height:1.3}
.sec__lead{margin-top:14px;color:var(--ink-2);font-size:16.5px}

/* ---------- 히어로 ---------- */
.hero{padding:96px 0 76px;border-bottom:1px solid var(--line)}
.hero__in{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.hero__h1{font-size:clamp(32px,5vw,54px);line-height:1.24;letter-spacing:-.035em;
  font-weight:800;margin-top:16px}
.hero__sub{margin-top:22px;max-width:600px;font-size:17.5px;color:var(--ink-2)}
.hero__cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

/* 히어로 하단 지표 — 숫자마다 형태가 다른 작은 도식을 얹는다 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:64px;padding-top:36px;border-top:1px solid var(--line)}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.stat__viz{display:block;width:90px;height:60px;margin-bottom:14px;overflow:visible}
.stat__viz rect,.stat__viz circle{fill:var(--accent);opacity:.22}
.stat__viz line{stroke:var(--accent);stroke-width:2;opacity:.3}
.stat__viz .hub{fill:var(--accent);opacity:1}
.stat__v{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.stat__v span{font-size:15px;font-weight:600;color:var(--ink-2);margin-left:3px}
.stat__k{font-size:13.5px;color:var(--ink-3);margin-top:2px}

/* ---------- 그리드/카드 ---------- */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0 0 26px;overflow:hidden}
.card h3{font-size:19px;letter-spacing:-.02em;margin:20px 26px 0}
.card p{margin:10px 26px 0;color:var(--ink-2);font-size:15px}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 26px 0}
.card__tags li{font-size:12.5px;color:var(--ink-2);background:var(--bg-2);
  border-radius:5px;padding:4px 9px}

/* 카드 상단 배너 — 부문마다 색조와 도형이 다르다 */
.banner{border-bottom:1px solid var(--line)}
.banner svg{display:block;width:100%;height:auto}
.banner .pane{fill:#fff;stroke:currentColor;stroke-width:2;opacity:.9}
.banner .pane--top{fill:currentColor;opacity:.14;stroke:currentColor}
.banner .edge,.banner .bar{stroke:currentColor;stroke-width:2;opacity:.35;stroke-linecap:round}
.banner .stroke{fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.banner .dot{fill:currentColor;opacity:.55}
.banner .hub{fill:currentColor}
.banner--dev{color:#1f5fd6;background:#eef3fd}
.banner--ops{color:#1c7a45;background:#eaf6ef}
.banner--api{color:#c2740a;background:#fdf4e7}
.banner--sub{color:#7c4dbd;background:#f4eefb}
.banner--cloud{color:#0f7a8c;background:#e9f5f7}
.banner--rs{color:#b03a5b;background:#fbedf1}

/* ---------- 프로세스 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{position:relative;padding-top:20px;border-top:2px solid var(--line)}
.steps li:first-child{border-top-color:var(--accent)}
.steps__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--accent-sf);color:var(--accent);font-size:13px;font-weight:700}
.steps h3{font-size:18px;margin-top:12px;letter-spacing:-.02em}
.steps p{margin-top:8px;color:var(--ink-2);font-size:15px}

/* ---------- 거래 현황 (로테이션) ---------- */
.live{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.live__hd{display:flex;align-items:center;gap:13px;padding:18px 22px;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.live__ico{flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:10px;background:var(--accent-sf);color:var(--accent)}
.live__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
.live__ttl h2,.live__ttl h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.live__ttl p{font-size:13px;color:var(--ink-3)}
.live__time{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.live__pulse{width:8px;height:8px;border-radius:50%;background:#1c7a45;flex:none}
.live__more{flex:none;display:inline-flex;align-items:center;gap:4px;
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink-2)}
.live__more:hover{border-color:var(--accent);color:var(--accent)}
.live__more span{font-size:15px;line-height:1}
.live__empty{justify-content:center;color:var(--ink-3);font-size:14px;padding:44px 0}
.live__date{flex:none;width:92px;color:var(--ink-3);font-size:13px;white-space:nowrap}
.live__list{padding:6px 0}
.live__list li{display:flex;align-items:center;gap:14px;padding:14px 22px;
  border-bottom:1px solid var(--line);font-size:14.5px;
  transition:opacity .45s ease, transform .45s ease}
.live__list li:last-child{border-bottom:0}
.live__list li.is-new{opacity:0;transform:translateY(-10px)}
.live__cat{flex:none;display:inline-block;border-radius:5px;padding:3px 8px;
  font-size:11.5px;font-weight:700;color:#fff;width:44px;text-align:center}
.live__item{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live__cust{flex:none;width:96px;color:var(--ink-3);font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live__amt{flex:none;width:132px;text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 전체보기 필터 ---------- */
.ofilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:8px 15px;font-size:14px;
  font-weight:600;color:var(--ink-2)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.is-on{border-color:var(--accent);background:var(--accent-sf);color:var(--accent-dk)}
.chip .live__cat{width:38px;padding:2px 5px;font-size:10.5px}

/* ---------- 페이지네이션 (전체보기 · 관리자 공용) ---------- */
.pager{display:flex;gap:6px;justify-content:center;align-items:center;
  margin-top:26px;flex-wrap:wrap}
.pager button{border:1px solid var(--line);background:#fff;border-radius:7px;
  padding:8px 13px;font-size:14px;color:var(--ink-2)}
.pager button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pager button.is-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.pager button:disabled{opacity:.4;cursor:default}
.pager span{font-size:13px;color:var(--ink-3);padding:0 6px}

/* ---------- 표 ---------- */
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.tbl{min-width:760px;font-size:14px}
.tbl th{background:var(--bg-2);color:var(--ink-3);font-size:12.5px;font-weight:600;
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl .amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.tbl .date{color:var(--ink-3);white-space:nowrap;font-size:13px}
.cat{display:inline-block;border-radius:5px;padding:3px 8px;font-size:11.5px;
  font-weight:700;color:#fff;white-space:nowrap}
.st{display:inline-block;border-radius:5px;padding:3px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.st--done{background:var(--ok);color:var(--ok-t)}
.st--out{background:var(--out);color:var(--out-t)}

/* ---------- 회사 소개 ---------- */
.bizinfo{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin-top:36px}
.bizinfo > div{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.bizinfo dt{flex:0 0 132px;color:var(--ink-3);font-size:14.5px}
.bizinfo dd{font-weight:600;font-size:15px}
[data-todo]{color:var(--ink-3);font-weight:500}
[data-todo]::after{content:" · 확인 필요";font-size:12px;color:#c0392b}

/* ---------- 문의 ---------- */
.sec--dark{background:var(--dark);color:#fff}
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.contact__copy h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.03em}
.contact__copy p{margin-top:14px;color:#a8b2c4;font-size:16px}
.contact__ways{display:grid;gap:12px}
.way{display:block;border:1px solid #2a3346;background:#171f30;border-radius:var(--r);
  padding:20px 22px;transition:border-color .15s,background .15s}
a.way:hover{border-color:var(--accent);background:#1b2436}
.way__k{display:block;font-size:12.5px;color:#7f8b9e;font-weight:600;letter-spacing:.02em}
.way__v{display:block;margin-top:5px;font-size:21px;font-weight:700;
  color:#fff;letter-spacing:-.01em;word-break:break-all}
.way__v--sm{font-size:16px;font-weight:600;line-height:1.5}
.way__d{display:block;margin-top:5px;font-size:13px;color:#8d97a8}
.way--plain{background:transparent}

/* ---------- 푸터 ---------- */
.ftr{background:#0a0f19;color:#8d97a8;padding:48px 0;font-size:14px}
.ftr__in{display:flex;gap:64px;flex-wrap:wrap}
.ftr .logo__mark{background:#1e2739;color:#aab4c6}
.ftr__name{margin-top:12px;color:#e6eaf1;font-weight:700;font-size:16px}
.ftr__biz{font-size:13.5px}
.ftr__meta p{margin-bottom:5px}
.ftr__meta span{color:#5f6a7f;margin-right:8px}
.ftr__meta b{color:#c9d1de;font-weight:500}
.ftr__copy{margin-top:20px;color:#5f6a7f;font-size:12.5px}
.ftr [data-todo]::after{content:""}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:repeat(3,1fr);gap:14px}
  .stat{padding:18px}
  .stat__v{font-size:27px}
}
@media (max-width:720px){
  .sec{padding:64px 0}
  .hero{padding:60px 0 52px}
  .gnb{position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 24px 16px;display:none}
  .gnb.is-open{display:flex}
  .gnb a{padding:12px 0;border-bottom:1px solid var(--line)}
  .gnb a:last-child{border-bottom:0}
  .burger{display:flex;margin-left:auto}
  .hdr__cta{display:none}
  .grid--3,.steps,.bizinfo{grid-template-columns:1fr}
  .way{padding:16px 18px}
  .way__v{font-size:19px}
  .bizinfo dt{flex:0 0 110px}
  .ftr__in{gap:28px}
  /* 지표 3칸이 좁아 숫자가 눌린다 — 세로로 편다 */
  .stats{grid-template-columns:1fr;gap:12px;margin-top:44px;padding-top:28px}
  .stat{display:flex;align-items:center;gap:16px;padding:16px 18px}
  .stat__viz{width:58px;height:38px;margin-bottom:0;flex:none}
  .stat__v{font-size:24px}
  .stat__k{margin-top:0}
  /* 거래 행에서 고객명·일자를 접어 항목명과 금액을 살린다 */
  .live__hd,.live__list li{padding-left:16px;padding-right:16px}
  .live__list li{gap:10px;font-size:13.5px}
  .live__cust,.live__date{display:none}
  .live__amt{width:auto}
  .live__cat{width:38px;padding:3px 5px}
  /* 헤더에 아이콘·제목·시각·전체보기가 한 줄에 안 들어간다 */
  .live__hd{flex-wrap:wrap;gap:10px;padding-top:14px;padding-bottom:14px}
  .live__ico{width:32px;height:32px}
  .live__ttl h2,.live__ttl h3{font-size:15.5px}
  .live__more{margin-left:auto;order:2}
  .live__time{order:3;flex-basis:100%;margin-left:0}
  .ofilter{gap:6px}
  .chip{padding:7px 12px;font-size:13px}
}