/* ── 회사 소개 페이지(메인 index.html · 서비스 분야 services.html) 본문 스타일 ──
   밝은 바탕에 남색·파랑. 소프트웨어 맞춤 개발 회사로서의 첫인상을 맡는다.
   services.html 은 auth.css 와 함께 읽히므로 이름은 모두 cp- 로 시작하고,
   색 변수도 --c- 로 따로 둔다(auth.css 의 --line 등과 부딪치지 않게). */
:root{
  --c-navy:#0a1628; --c-navy-2:#10213d; --c-navy-3:#173057;
  --c-ink:#0f172a; --c-body:#334155; --c-muted:#64748b; --c-dim:#94a3b8;
  --c-line:#e2e8f0; --c-bg:#f8fafc; --c-white:#ffffff;
  --c-blue:#2563eb; --c-blue-2:#1d4ed8; --c-sky:#60a5fa; --c-tint:#eff6ff;
  --c-maxw:1180px;
  --c-font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
}

body.corp{ background:var(--c-white); color:var(--c-body); font-family:var(--c-font);
  line-height:1.65; -webkit-font-smoothing:antialiased; letter-spacing:-.01em; }
body.corp *{ box-sizing:border-box; }
body.corp h1, body.corp h2, body.corp h3, body.corp p, body.corp ul, body.corp ol{ margin:0; padding:0; }
body.corp ul, body.corp ol{ list-style:none; }
body.corp a{ color:inherit; text-decoration:none; }
body.corp a:hover{ text-decoration:none; }

.cp-wrap{ max-width:var(--c-maxw); margin:0 auto; padding:0 28px; }
.cp-eyebrow{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-blue); margin-bottom:14px; }
.cp-sec{ padding:104px 0; }
.cp-sec.alt{ background:var(--c-bg); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.cp-sec-head{ max-width:720px; margin-bottom:52px; }
.cp-sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.cp-sec-head h2{ font-size:36px; line-height:1.3; font-weight:800; color:var(--c-ink); letter-spacing:-.035em; }
.cp-sec-head p{ margin-top:14px; font-size:17px; color:var(--c-muted); }

/* 버튼 */
.cp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px; border-radius:8px; font-size:16px; font-weight:700;
  transition:background .18s ease, border-color .18s ease, color .18s ease; }
.cp-btn.primary{ background:var(--c-blue); color:#fff !important; }
.cp-btn.primary:hover{ background:var(--c-blue-2); }
.cp-btn.ghost{ border:1px solid rgba(255,255,255,.28); color:#fff !important; }
.cp-btn.ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.cp-btn.line{ border:1px solid var(--c-line); color:var(--c-ink) !important; background:#fff; }
.cp-btn.line:hover{ border-color:var(--c-blue); color:var(--c-blue) !important; }

/* 남색 머리(메인 히어로 · 서비스 페이지 머리) */
.cp-hero{ position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(37,99,235,.35), transparent 60%),
    linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-2) 100%); }
.cp-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 85%); }
.cp-hero .cp-wrap{ position:relative; }
.cp-hero .cp-eyebrow{ color:var(--c-sky); }
.cp-hero h1{ font-size:52px; line-height:1.22; font-weight:800; letter-spacing:-.04em; color:#fff; }
.cp-hero h1 em{ font-style:normal; color:var(--c-sky); }
.cp-hero .lead{ margin-top:22px; font-size:18.5px; line-height:1.75; color:#c4cfe0; max-width:560px; }
.cp-hero .cta{ margin-top:38px; display:flex; flex-wrap:wrap; gap:12px; }

.cp-hero-main{ padding:150px 0 112px; }
.cp-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }

/* 히어로 오른쪽 — 프로그램 창 모양의 그림(이미지 없이 CSS 로) */
.cp-window{ background:#0d1b33; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden; }
.cp-window .bar{ display:flex; align-items:center; gap:7px; padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08); background:#0b1730; }
.cp-window .bar i{ width:10px; height:10px; border-radius:50%; background:#334766; display:block; }
.cp-window .bar span{ margin-left:10px; font-size:12px; color:#7d8fae; font-weight:600; }
.cp-window .body{ display:grid; grid-template-columns:150px 1fr; min-height:300px; }
.cp-window .side{ border-right:1px solid rgba(255,255,255,.07); padding:16px 12px; display:flex; flex-direction:column; gap:6px; }
.cp-window .side b{ display:block; font-size:12px; color:#8da0c0; font-weight:600; padding:7px 10px; border-radius:6px; }
.cp-window .side b.on{ background:rgba(37,99,235,.22); color:#dbe7ff; }
.cp-window .main{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.cp-window .kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cp-window .kpi{ border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:10px 12px; }
.cp-window .kpi small{ display:block; font-size:11px; color:#7d8fae; }
.cp-window .kpi strong{ display:block; margin-top:4px; font-size:15px; color:#e8eefb; }
.cp-window .row{ display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.07);
  border-radius:8px; padding:10px 12px; font-size:12.5px; color:#b8c5dc; }
.cp-window .row .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.cp-window .row .st{ margin-left:auto; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:5px; }
.cp-window .ok .dot{ background:#34d399; } .cp-window .ok .st{ color:#6ee7b7; background:rgba(52,211,153,.12); }
.cp-window .run .dot{ background:#60a5fa; } .cp-window .run .st{ color:#93c5fd; background:rgba(96,165,250,.14); }
.cp-window .wait .dot{ background:#64748b; } .cp-window .wait .st{ color:#a3b1c6; background:rgba(148,163,184,.12); }

/* 서비스 카드 3개 */
.cp-svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cp-svc{ padding:30px 24px 26px !important; }
.cp-svc{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-line);
  border-radius:14px; padding:34px 30px 30px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a.cp-svc:hover{ border-color:#bfd3fb; box-shadow:0 18px 40px rgba(15,23,42,.08); transform:translateY(-3px); }
.cp-svc .no{ font-size:14px; font-weight:800; color:var(--c-blue); letter-spacing:.04em; }
.cp-svc .ico{ width:52px; height:52px; border-radius:12px; background:var(--c-tint); color:var(--c-blue);
  display:flex; align-items:center; justify-content:center; margin:18px 0 22px; }
.cp-svc .ico svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cp-svc h3{ font-size:21px; font-weight:800; color:var(--c-ink); letter-spacing:-.03em; line-height:1.4; }
.cp-svc p{ margin-top:12px; font-size:15px; color:var(--c-muted); line-height:1.75; }
.cp-svc .tags{ margin-top:20px; display:flex; flex-wrap:wrap; gap:6px; }
.cp-svc .tags span{ font-size:12.5px; font-weight:600; color:var(--c-body); background:var(--c-bg);
  border:1px solid var(--c-line); border-radius:6px; padding:4px 9px; }
.cp-svc .more{ margin-top:auto; padding-top:26px; font-size:14.5px; font-weight:700; color:var(--c-blue); }

/* 강점 4칸 */
.cp-feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--c-line); }
.cp-feat{ padding:30px 26px 6px 0; }
.cp-feat + .cp-feat{ padding-left:26px; border-left:1px solid var(--c-line); }
.cp-feat b{ display:block; font-size:13px; color:var(--c-blue); font-weight:800; letter-spacing:.06em; }
.cp-feat h3{ margin-top:10px; font-size:18.5px; font-weight:800; color:var(--c-ink); letter-spacing:-.03em; }
.cp-feat p{ margin-top:10px; font-size:14.5px; color:var(--c-muted); line-height:1.75; }

/* 진행 과정 */
.cp-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:st; }
.cp-step{ position:relative; background:#fff; border:1px solid var(--c-line); border-radius:12px; padding:24px 22px; }
.cp-step::before{ counter-increment:st; content:"STEP " counter(st, decimal-leading-zero);
  display:block; font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--c-blue); }
.cp-step h3{ margin-top:10px; font-size:17px; font-weight:800; color:var(--c-ink); }
.cp-step p{ margin-top:8px; font-size:14px; color:var(--c-muted); line-height:1.7; }

/* 자체 개발 제품 */
.cp-prod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.cp-prod{ display:flex; gap:22px; align-items:flex-start; border:1px solid var(--c-line); border-radius:14px; padding:28px; background:#fff; }
.cp-prod .mk{ flex:none; width:56px; height:56px; border-radius:12px; background:var(--c-navy);
  color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; letter-spacing:-.02em; }
.cp-prod h3{ font-size:19px; font-weight:800; color:var(--c-ink); letter-spacing:-.03em; }
.cp-prod h3 small{ font-size:12.5px; font-weight:700; color:var(--c-dim); letter-spacing:.04em; margin-left:6px; }
.cp-prod p{ margin-top:8px; font-size:14.5px; color:var(--c-muted); line-height:1.75; }
.cp-prod a.go{ display:inline-block; margin-top:14px; font-size:14.5px; font-weight:700; color:var(--c-blue); }

/* 문의 띠 */
.cp-cta{ background:var(--c-navy); color:#fff; padding:84px 0; }
.cp-cta .cp-wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cp-cta h2{ font-size:32px; font-weight:800; letter-spacing:-.035em; line-height:1.35; }
.cp-cta p{ margin-top:10px; color:#b6c3d8; font-size:16.5px; }
.cp-cta .cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* 서비스 분야 페이지 — 항목별 상세 */
.cp-hero-sub{ padding:92px 0 80px; }
.cp-hero-sub h1{ font-size:44px; }
.cp-jump{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px; }
.cp-jump a{ display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border-radius:8px;
  border:1px solid rgba(255,255,255,.18); color:#dbe4f3 !important; font-size:15px; font-weight:600; }
.cp-jump a b{ color:var(--c-sky); font-weight:800; }
.cp-jump a:hover{ border-color:var(--c-sky); color:#fff !important; }

.cp-detail{ padding:96px 0; border-bottom:1px solid var(--c-line); scroll-margin-top:72px; }
.cp-detail:nth-of-type(even){ background:var(--c-bg); }
.cp-detail-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.cp-detail .no{ font-size:56px; line-height:1; font-weight:800; color:#dbe6fb; letter-spacing:-.04em; }
.cp-detail h2{ margin-top:14px; font-size:32px; line-height:1.35; font-weight:800; color:var(--c-ink); letter-spacing:-.035em; }
.cp-detail .lead{ margin-top:16px; font-size:16.5px; color:var(--c-body); line-height:1.85; }
.cp-detail .tags{ margin-top:22px; display:flex; flex-wrap:wrap; gap:7px; }
.cp-detail .tags span{ font-size:13px; font-weight:600; color:var(--c-blue-2); background:var(--c-tint);
  border-radius:6px; padding:5px 10px; }
.cp-box{ background:#fff; border:1px solid var(--c-line); border-radius:14px; padding:28px 30px; }
.cp-box + .cp-box{ margin-top:16px; }
.cp-box h3{ font-size:15px; font-weight:800; color:var(--c-ink); letter-spacing:-.01em; margin-bottom:14px; }
.cp-box li{ position:relative; padding-left:26px; font-size:15px; color:var(--c-body); line-height:1.7; }
.cp-box li + li{ margin-top:9px; }
.cp-box li::before{ content:""; position:absolute; left:2px; top:5px; width:15px; height:15px; border-radius:50%;
  background:var(--c-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 6.2 2 2 4-4.4' fill='none' stroke='%232563eb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }

/* 바닥글 */
.cp-foot{ background:#071022; color:#94a3b8; padding:56px 0 40px; font-size:14px; }
.cp-foot-top{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.cp-foot .fbrand{ display:flex; align-items:center; gap:11px; }
.cp-foot .fbrand strong{ display:block; color:#fff; font-size:18px; font-weight:800; letter-spacing:-.03em; }
.cp-foot .fbrand small{ display:block; font-size:12px; color:#7f8ea8; }
.cp-foot-links{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; }
.cp-foot-links a{ color:#cbd5e1 !important; font-weight:600; }
.cp-foot-links a:hover{ color:#fff !important; }
.cp-biz{ margin-top:24px; font-size:13px; line-height:1.95; color:#7f8ea8; }
.cp-biz b{ color:#a8b5ca; font-weight:600; margin-right:6px; }
.cp-biz .sep{ margin:0 10px; color:#334155; }
.cp-copy{ margin-top:14px; font-size:12.5px; color:#5d6b82; }

/* 로고 표시(캐릭터 대신 쓰는 단순한 마크) — 메뉴와 바닥글이 같이 쓴다 */
.brand-mark{ flex:none; width:38px; height:38px; border-radius:9px; background:var(--c-blue, #2563eb);
  display:inline-flex; align-items:center; justify-content:center; }
.brand-mark svg{ width:22px; height:22px; }

/* 등장 효과 */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

@media (max-width:1080px){
  .cp-hero-grid{ grid-template-columns:1fr; }
  .cp-window{ max-width:560px; }
  .cp-svc-grid{ grid-template-columns:repeat(2,1fr); }
  .cp-feat-grid{ grid-template-columns:repeat(2,1fr); }
  .cp-feat:nth-child(3){ padding-left:0; border-left:0; }
  .cp-steps{ grid-template-columns:repeat(2,1fr); }
  .cp-detail-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:760px){
  .cp-wrap{ padding:0 20px; }
  .cp-svc-grid{ grid-template-columns:1fr; }
  .cp-sec{ padding:72px 0; }
  .cp-sec-head h2{ font-size:28px; }
  .cp-hero-main{ padding:118px 0 76px; }
  .cp-hero h1, .cp-hero-sub h1{ font-size:34px; }
  .cp-hero .lead{ font-size:16.5px; }
  .cp-window .body{ grid-template-columns:1fr; }
  .cp-window .side{ display:none; }
  .cp-feat-grid{ grid-template-columns:1fr; }
  .cp-feat, .cp-feat + .cp-feat{ padding:24px 0 4px; border-left:0; }
  .cp-steps{ grid-template-columns:1fr; }
  .cp-prod-grid{ grid-template-columns:1fr; }
  .cp-detail{ padding:68px 0; }
  .cp-detail h2{ font-size:26px; }
  .cp-cta h2{ font-size:25px; }
}

button.cp-btn{ border:0; cursor:pointer; font-family:inherit; }
button.cp-btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.28); }
.cp-ask{ margin-top:28px; }

/* ── 메인 히어로 슬라이드(index.html #heroSlider) ── */
.hs{ position:relative; height:min(780px, 94vh); min-height:600px; overflow:hidden; background:var(--c-navy); color:#fff; }
.hs-track, .hs-slide{ position:absolute; inset:0; }
.hs-slide{ opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s linear .9s; }
.hs-slide.on{ opacity:1; visibility:visible; transition:opacity .9s ease; z-index:1; }
.hs-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06);
  transition:transform 7s ease-out; background-color:var(--c-navy-2); }
.hs-slide.on .hs-bg{ transform:scale(1); }
/* 덧칠 — 왼쪽(글씨 자리)은 짙게, 오른쪽은 그림이 보이게. 아래쪽도 짙게 해 탭 글씨를 살린다. */
.hs-shade{ position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,16,34,.92) 0%, rgba(7,16,34,.78) 38%, rgba(7,16,34,.35) 70%, rgba(7,16,34,.25) 100%),
    linear-gradient(0deg, rgba(7,16,34,.85) 0%, rgba(7,16,34,0) 32%),
    linear-gradient(180deg, rgba(7,16,34,.55) 0%, rgba(7,16,34,0) 22%); }
.hs-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:40px; padding-bottom:110px; }
.hs-inner .cp-eyebrow{ color:var(--c-sky); }
.hs-inner h1{ font-size:56px; line-height:1.2; font-weight:800; letter-spacing:-.04em; max-width:720px; }
.hs-inner h1 em{ font-style:normal; color:var(--c-sky); }
.hs-inner .lead{ margin-top:22px; font-size:18.5px; line-height:1.75; color:#cdd7e6; max-width:560px; }
.hs-inner .cta{ margin-top:36px; display:flex; flex-wrap:wrap; gap:12px; }
/* 글씨는 슬라이드가 바뀔 때 살짝 올라오며 나타난다 */
.hs-inner > *{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.hs-slide.on .hs-inner > *{ opacity:1; transform:none; }
.hs-slide.on .hs-inner > :nth-child(2){ transition-delay:.08s; }
.hs-slide.on .hs-inner > :nth-child(3){ transition-delay:.16s; }
.hs-slide.on .hs-inner > :nth-child(4){ transition-delay:.24s; }

.hs-arrow{ position:absolute; top:50%; z-index:3; width:48px; height:48px; margin-top:-24px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:rgba(7,16,34,.35); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease, border-color .2s ease; }
.hs-arrow:hover{ background:rgba(37,99,235,.75); border-color:transparent; }
.hs-arrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hs-arrow.prev{ left:24px; } .hs-arrow.next{ right:24px; }

.hs-ctrl{ position:absolute; left:0; right:0; bottom:30px; z-index:3; display:flex; align-items:flex-end; gap:24px; }
.hs-tabs{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hs-tab{ position:relative; text-align:left; background:none; border:0; color:#9fb0cc; cursor:pointer;
  font-family:inherit; padding:0 0 14px; display:flex; gap:10px; align-items:baseline; font-size:14.5px; font-weight:600; }
.hs-tab b{ font-size:13px; font-weight:800; color:#7f92b3; }
.hs-tab::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.18); }
.hs-tab i{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--c-sky); z-index:1; }
.hs-tab.on{ color:#fff; } .hs-tab.on b{ color:var(--c-sky); }
.hs-tab:hover{ color:#fff; }
.hs.playing .hs-tab.on i{ animation:hsbar var(--hs-dur, 6s) linear forwards; }
.hs:not(.playing) .hs-tab.on i{ width:100%; }
@keyframes hsbar{ from{ width:0; } to{ width:100%; } }
.hs-count{ flex:none; display:flex; align-items:center; gap:10px; font-size:14px; color:#9fb0cc; padding-bottom:6px; }
.hs-cur{ color:#fff; font-weight:700; }
.hs-pause{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:transparent;
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hs-pause svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.hs-pause .r{ display:none; fill:currentColor; stroke:none; }
.hs:not(.playing) .hs-pause .p{ display:none; }
.hs:not(.playing) .hs-pause .r{ display:block; }

@media (max-width:1080px){
  .hs-inner h1{ font-size:44px; }
  .hs-arrow{ display:none; }
  .hs-tab span{ display:none; }
  .hs-tabs{ max-width:240px; }
}
@media (max-width:760px){
  .hs{ height:auto; min-height:620px; }
  .hs-slide{ position:absolute; }
  .hs-inner{ padding-top:96px; padding-bottom:110px; justify-content:flex-end; }
  .hs-inner h1{ font-size:32px; }
  .hs-inner .lead{ font-size:16px; }
  .hs-shade{ background:linear-gradient(0deg, rgba(7,16,34,.95) 0%, rgba(7,16,34,.8) 55%, rgba(7,16,34,.45) 100%); }
}
@media (prefers-reduced-motion:reduce){
  .hs-slide, .hs-bg, .hs-inner > *{ transition:none !important; transform:none !important; }
}
.hs-bg.bg-windows{ background-image:url('/assets/img/hero-windows.webp'); }
.hs-bg.bg-ai-agent{ background-image:url('/assets/img/hero-ai-agent.webp'); }
.hs-bg.bg-automation{ background-image:url('/assets/img/hero-automation.webp'); }
@media (max-width:760px){
  .hs-bg.bg-windows{ background-image:url('/assets/img/hero-windows-sm.webp'); background-position:70% center; }
  .hs-bg.bg-ai-agent{ background-image:url('/assets/img/hero-ai-agent-sm.webp'); background-position:70% center; }
  .hs-bg.bg-automation{ background-image:url('/assets/img/hero-automation-sm.webp'); background-position:70% center; }
}

/* ── 포트폴리오(portfolio.html) ── */
.pf-filter{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; }
.pf-filter button{ font-family:inherit; cursor:pointer; padding:9px 15px; border-radius:999px; font-size:14px; font-weight:600;
  border:1px solid rgba(255,255,255,.2); background:transparent; color:#cbd5e1; }
.pf-filter button span{ font-weight:800; color:#93c5fd; margin-left:3px; }
.pf-filter button:hover{ border-color:#93c5fd; color:#fff; }
.pf-filter button.on{ background:#fff; color:#0a1628; border-color:#fff; }
.pf-filter button.on span{ color:#2563eb; }
.pf-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.pf-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-line); border-radius:14px; overflow:hidden;
  color:var(--c-ink) !important; transition:border-color .2s, box-shadow .2s, transform .2s; }
.pf-card:hover{ border-color:#bfd3fb; box-shadow:0 18px 40px rgba(15,23,42,.08); transform:translateY(-3px); }
.pf-thumb{ position:relative; display:block; aspect-ratio:16/10; background:#eef2f7; overflow:hidden; }
.pf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.pf-card:hover .pf-thumb img{ transform:scale(1.03); }
.pf-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-weight:700; font-size:14px;
  background:linear-gradient(135deg,#eef2f7,#e2e8f0); }
.pf-count{ position:absolute; right:10px; bottom:10px; background:rgba(15,23,42,.7); color:#fff; font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px; }
.pf-txt{ display:flex; flex-direction:column; padding:20px 22px 22px; flex:1; }
.pf-cat{ display:inline-block; align-self:flex-start; font-size:12px; font-weight:800; color:#1d4ed8; background:#eff6ff; border-radius:6px; padding:3px 8px; }
.pf-txt b{ margin-top:12px; font-size:18px; font-weight:800; letter-spacing:-.03em; line-height:1.4; }
.pf-txt small{ margin-top:4px; font-size:13px; color:var(--c-muted); }
.pf-s{ margin-top:10px; font-size:14.5px; color:var(--c-body); line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pf-tags{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
.pf-tags i{ font-style:normal; font-size:12px; font-weight:600; color:var(--c-body); background:var(--c-bg); border:1px solid var(--c-line); border-radius:6px; padding:3px 8px; }
.pf-empty{ text-align:center; padding:40px 0 20px; }
.pf-empty[hidden]{ display:none; }
.pf-empty-ic{ width:72px; height:72px; margin:0 auto; border-radius:18px; background:#eff6ff; display:flex; align-items:center; justify-content:center; }
.pf-empty-ic svg{ width:34px; height:34px; fill:none; stroke:#2563eb; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pf-empty h2{ margin-top:20px !important; font-size:24px; font-weight:800; color:var(--c-ink); }
.pf-empty p{ margin:10px auto 24px !important; color:var(--c-muted); font-size:15.5px; max-width:460px; }
.pf-back{ position:fixed; inset:0; z-index:950; background:rgba(7,16,34,.66); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
.pf-back[hidden]{ display:none; }
.pf-modal{ position:relative; width:100%; max-width:1080px; background:#fff; border-radius:16px; overflow:hidden; display:grid; grid-template-columns:1.25fr 1fr;
  box-shadow:0 30px 80px rgba(2,8,23,.35); color:var(--c-body); }
.pf-x{ position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.92);
  font-size:26px; line-height:1; cursor:pointer; color:#334155; box-shadow:0 2px 8px rgba(15,23,42,.15); }
.pf-gal{ background:#0f172a; display:flex; flex-direction:column; }
.pf-main{ position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.pf-main img{ width:100%; height:100%; object-fit:contain; display:block; }
.pf-thumbs{ display:flex; gap:8px; padding:10px; overflow-x:auto; }
.pf-thumbs:empty{ display:none; }
.pf-thumbs button{ flex:none; width:74px; height:52px; border-radius:6px; overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer; background:#1e293b; opacity:.65; }
.pf-thumbs button.on{ border-color:#60a5fa; opacity:1; }
.pf-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-info{ padding:34px 32px 30px; overflow-y:auto; max-height:min(80vh,720px); }
.pf-info h2{ margin-top:12px !important; font-size:26px; font-weight:800; color:var(--c-ink); letter-spacing:-.035em; line-height:1.35; }
.pf-meta{ margin-top:6px !important; font-size:14px; color:var(--c-muted); }
.pf-meta:empty{ display:none; }
.pf-sum{ margin-top:16px !important; font-size:16px; font-weight:600; color:var(--c-ink); line-height:1.7; }
.pf-body{ margin-top:12px; font-size:15px; line-height:1.85; white-space:pre-wrap; }
.pf-acts{ margin-top:24px; display:flex; gap:10px; flex-wrap:wrap; }
.pf-acts [hidden]{ display:none; }
@media (max-width:1080px){ .pf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pf-modal{ grid-template-columns:1fr; } .pf-info{ max-height:none; } }
@media (max-width:640px){ .pf-grid{ grid-template-columns:1fr; } .pf-back{ padding:0; } .pf-modal{ border-radius:0; min-height:100%; } .pf-info{ padding:26px 20px; } }