/* SOFTWORKS — 사이트 전용 스타일.
   색·타이포·간격 값은 모두 tokens.css의 토큰을 씁니다.
   여기에는 디자인 시스템에 없는 것만 둡니다: 웹폰트 선언, 기본 리셋,
   언어 전환, 메가 메뉴, 모바일 내비게이션, 하위 페이지 골격. */

/* ── 웹폰트 ────────────────────────────────────────────────
   한글은 Pretendard Std, 영문과 숫자는 DM Sans(HTML에서 Google Fonts로 불러옵니다).
   두 서체 모두 --font-sans 스택 안에서 순서대로 적용됩니다. */
@font-face{font-family:"Pretendard";font-style:normal;font-weight:100;font-display:swap;src:url("../fonts/PretendardStd-Thin.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:200;font-display:swap;src:url("../fonts/PretendardStd-ExtraLight.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/PretendardStd-Light.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/PretendardStd-Regular.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/PretendardStd-Medium.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/PretendardStd-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/PretendardStd-Bold.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/PretendardStd-ExtraBold.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/PretendardStd-Black.woff2") format("woff2")}

/* ── 기본 ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
img,svg{max-width:100%}
h1,h2,h3,p{margin:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* 본문 바로가기 — 키보드 사용자에게만 보입니다. */
.sw-skip{position:absolute;left:-9999px;top:0}
.sw-skip:focus{position:fixed;left:16px;top:16px;z-index:60;display:inline-flex;align-items:center;padding:10px var(--space-26);border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);font:var(--text-button);text-decoration:none}

/* ── 헤더 보강 ─────────────────────────────────────────── */
.sw-header{position:relative;z-index:40}
.sw-header__logo:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:var(--radius-pill)}

.sw-lang{display:flex;align-items:center;gap:6px;color:var(--ink-subtle);font:var(--text-caption);font-weight:600;white-space:nowrap}
.sw-lang a{padding:2px;color:var(--ink-subtle);text-decoration:none;border-radius:var(--radius-pill)}
.sw-lang a:hover{color:var(--ink)}
.sw-lang a[aria-current="true"]{color:var(--ink)}
.sw-lang a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-lang__sep{color:var(--line)}

.sw-navtoggle{display:none;align-items:center;padding:var(--space-8) var(--space-16);border:1px solid var(--line);border-radius:var(--radius-pill);background:none;color:var(--ink-muted);font:var(--text-nav);cursor:pointer}
.sw-navtoggle:hover{color:var(--ink);background:var(--surface-subtle)}
.sw-navtoggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── 메가 메뉴 (넓은 화면) ──────────────────────────────
   시안에 없는 구성이라, 시스템이 이미 쓰는 것만으로 짰습니다.
   구획은 1px line, 그룹 레이블은 overline, 항목 이름은 proof,
   서브카피는 caption에 ink-subtle. 그림자와 둥근 모서리는 쓰지 않습니다. */
/* 대메뉴 롤오버 — primary 바탕에 흰 글자로 반전합니다. 하위 메뉴가 열려 있는 동안에도 같은 상태를 유지합니다.
   현재 섹션 표시(is-active)는 시스템 그대로 surface-subtle 입니다.
   포커스 테두리가 primary 바탕에 묻히지 않도록 2px 띄웁니다. */
.sw-navlink{transition:color .15s,background-color .15s}
.sw-navlink:hover,.sw-navlink[aria-expanded="true"]{color:var(--on-primary);background:var(--primary)}
.sw-navlink:focus-visible{outline-offset:2px}

.sw-menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line)}
.sw-menu.is-open{display:block}
.sw-menu__cols{display:flex;flex-wrap:wrap;padding-top:var(--space-40);padding-bottom:var(--space-56)}
.sw-menu__col{flex:1 1 0;min-width:0;max-width:360px;padding:0 var(--space-36)}
.sw-menu__col:first-child{padding-left:0}
.sw-menu__col+.sw-menu__col{border-left:1px solid var(--line)}
.sw-menu__group{display:block;margin-bottom:var(--space-20);color:var(--ink-subtle);text-transform:uppercase}
.sw-menu__link{display:block;padding:10px 12px;margin:0 -12px;text-decoration:none;transition:background-color .15s ease}
.sw-menu__label{display:block;color:var(--ink);transition:color .15s ease}
.sw-menu__sub{display:block;margin-top:2px;color:var(--ink-subtle);transition:color .15s ease}
/* 2depth 롤오버 — 바탕은 그대로 두고 글자만 primary 로 바꿉니다(제품명과 영문 보조 줄 모두). */
.sw-menu__link:hover .sw-menu__label,.sw-mlink:hover .sw-menu__label,
.sw-menu__link:hover .sw-menu__sub,.sw-mlink:hover .sw-menu__sub{color:var(--primary)}
.sw-menu__link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* 제품 패밀리: 서브 카테고리를 두 열로 나눕니다. 레이블은 overline-sm, 구획은 1px line. */
.sw-menu__col--wide{flex:2 1 0;max-width:720px}
.sw-menu__subcols{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-36)}
.sw-menu__subcol{min-width:0}
.sw-menu__subgroup{display:block;margin:var(--space-20) 0 var(--space-8);padding-top:var(--space-16);border-top:1px solid var(--line);color:var(--ink-muted);text-transform:uppercase}
.sw-menu__subcol>.sw-menu__subgroup:first-child{margin-top:0}

/* ── 모바일 내비게이션 ─────────────────────────────────── */
.sw-header__mobile{display:none;border-top:1px solid var(--line);padding-bottom:var(--space-16)}
.sw-msec{border-bottom:1px solid var(--line)}
.sw-mtop{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--space-16);padding:14px 0;border:0;background:none;color:var(--ink);font:var(--text-proof);text-align:left;cursor:pointer}
.sw-mtop:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-mtop__mark{color:var(--ink-subtle);font:var(--text-nav)}
.sw-msec.is-open>.sw-mtop{color:var(--primary)}
.sw-mpanel{display:none;padding:0 0 var(--space-16)}
.sw-msec.is-open>.sw-mpanel{display:block}
.sw-mgroup{display:block;margin:var(--space-24) 0 var(--space-8);color:var(--ink-subtle);text-transform:uppercase}
.sw-msubgroup{display:block;margin:var(--space-16) 0 4px;color:var(--ink-muted);text-transform:uppercase}
a.sw-mtop{text-decoration:none}
a.sw-mtop[aria-current="page"]{color:var(--primary)}
.sw-mlink{display:block;padding:9px 12px;margin:0 -12px;text-decoration:none;transition:background-color .15s ease}
.sw-mlink:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-mcta{display:inline-flex;margin-top:var(--space-16)}

@media (max-width:760px){
  .sw-menu{display:none!important}
  .sw-navtoggle{display:inline-flex}
  .sw-header.is-open .sw-header__mobile{display:block}
  .sw-header__bar{gap:var(--space-16)}
  .sw-header__actions{gap:12px}
}
@media (max-width:420px){
  .sw-header__actions .sw-btn{display:none}
}

/* ── 수치 밴드: 좁은 화면 보정 ──────────────────────────
   세 칸이 세로로 쌓이면 밴드가 두 배 넘게 길어져, 마지막 설명 글이
   그라디언트의 밝은 끝(stat-grad-4)에 놓입니다. 토큰 설명대로
   그 색은 글이 앉지 않는 아래 가장자리로 남도록 정지점을 다시 잡습니다. */
@media (max-width:760px){
  .sw-stats{background-image:linear-gradient(175.15deg,var(--stat-grad-1) 3%,var(--stat-grad-2) 42%,var(--stat-grad-3) 88%,var(--stat-grad-4) 100%)}
  .sw-stats__grid{padding-bottom:var(--space-56)}
}

/* 제품 섹션이 둘 이상 이어질 때 — 시스템이 섹션을 나누는 방식대로 1px line으로 끊습니다.
   (CtaSection이 제품 섹션 뒤에 놓일 때와 같은 처리입니다.) */
.sw-products+.sw-products{border-top:1px solid var(--line)}

/* ── 하위 페이지 골격 ────────────────────────────────────
   아직 내용이 준비되지 않은 페이지가 쓰는 최소 구성입니다.
   랜딩의 제품 섹션과 같은 여백·정렬을 씁니다. */
.sw-page{background:var(--bg);padding:var(--section-y) 0}
@media (min-width:640px){.sw-page{padding:9vw 0}}
.sw-page__note{margin-top:var(--space-56);padding-top:var(--space-28);border-top:1px solid var(--line);color:var(--ink-subtle);font:var(--text-caption)}

/* 본문 속 링크 — 브라우저 기본 파랑/보라 대신 primary와 line을 씁니다. */
.sw-page__note a,.sw-section-intro__text a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--line)}
.sw-page__note a:hover,.sw-section-intro__text a:hover{border-bottom-color:var(--primary)}
.sw-page__note a:focus-visible,.sw-section-intro__text a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── 브레드크럼 ────────────────────────────────────────────
   홈을 뺀 모든 페이지의 첫 블록 맨 위(eyebrow 위)에 두고 오른쪽 끝에 맞춥니다. 아이콘 없이 글자와 '/'로만 잇습니다.
   흰 바탕은 ink-muted / 현재 페이지 ink, 네이비 히어로 안에서는 on-dark-muted / on-dark.
   구분자 '/'는 화면 낭독기가 읽지 않도록 대체 글자를 비워 둡니다. */
.sw-crumbs{margin:0 0 var(--space-28);font:var(--text-caption);font-family:var(--font-sans)}
.sw-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;row-gap:var(--space-4);margin:0;padding:0;list-style:none}
.sw-crumbs__item{display:inline-flex;align-items:center;color:var(--ink-muted)}
.sw-crumbs__item+.sw-crumbs__item::before{content:"/";content:"/" / "";margin:0 10px;color:var(--ink-subtle)}
.sw-crumbs a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.sw-crumbs a:hover{color:var(--ink);border-bottom-color:var(--line)}
.sw-crumbs a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-crumbs [aria-current="page"]{color:var(--ink);font-weight:600}
.sw-hero .sw-crumbs__item,.sw-hero .sw-crumbs a{color:var(--on-dark-muted)}
.sw-hero .sw-crumbs__item+.sw-crumbs__item::before{color:var(--on-dark-outline)}
.sw-hero .sw-crumbs a:hover{color:var(--on-dark);border-bottom-color:var(--on-dark-outline)}
.sw-hero .sw-crumbs a:focus-visible{outline-color:var(--on-dark)}
.sw-hero .sw-crumbs [aria-current="page"]{color:var(--on-dark)}

/* ── 솔루션 상세 페이지 ──────────────────────────────────
   시안에는 상세 페이지가 없어 새로 짰습니다. 쓰는 재료는 기존 것뿐입니다:
   구획은 1px line, 제목은 heading-lg, 레이블은 overline, 본문은 body-row.
   표에도 세로줄과 배경을 두지 않고 가로 hairline만 씁니다. */

/* 상세 히어로 — 랜딩의 68px 대신 한 단계 낮은 46px(heading-xl)을 쓰고,
   본문 폭을 가운데 960px이 아니라 헤더와 같은 컨테이너 폭에 맞춥니다. */
/* 히어로 본문을 가운데 960px 기둥 대신 컨테이너 폭에 맞춥니다.
   로고·메뉴·아래 섹션과 같은 선에서 글이 시작합니다. */
.sw-hero--detail .sw-hero__inner,
.sw-hero--flush .sw-hero__inner{max-width:var(--container-max);padding-left:var(--gutter);padding-right:var(--gutter)}
@media (min-width:640px){
  .sw-hero--detail .sw-hero__inner,
  .sw-hero--flush .sw-hero__inner{padding-left:5vw;padding-right:5vw}
}
.sw-hero--detail .sw-hero__title{max-width:860px;font-size:46px;line-height:51.52px;letter-spacing:-.92px}
.sw-hero--detail .sw-hero__lead{max-width:760px}
@media (max-width:640px){.sw-hero--detail .sw-hero__title{font-size:30px;line-height:38px;letter-spacing:-.6px}}
.sw-br-wide{display:none}
@media (min-width:761px){.sw-br-wide{display:inline}}

/* 상세 페이지의 섹션 — 블록이 여덟 개라 랜딩의 9vw를 그대로 쓰면
   섹션 사이가 18vw가 되어 읽기 어렵습니다. 같은 비례 방식으로 6vw를 씁니다. */
.sw-section{background:var(--bg);border-top:1px solid var(--line);padding:var(--section-y) 0}
@media (min-width:640px){.sw-section{padding:6vw 0}}
.sw-section:first-of-type{border-top:0}

/* 줄로 구분된 행 목록 — 랜딩 제품 목록과 같은 격자를 쓰되 링크가 아닌 행입니다. */
.sw-rows{margin-top:var(--space-56);border-top:1px solid var(--line)}
.sw-row{display:grid;grid-template-columns:var(--product-meta-col) 1fr;column-gap:52px;padding:32px 0;border-bottom:1px solid var(--line)}
.sw-row__name{color:var(--ink)}
.sw-row__label{padding-top:5px;color:var(--ink-subtle);text-transform:uppercase}
.sw-row__text{max-width:640px;color:var(--ink-muted)}
@media (max-width:760px){.sw-row{grid-template-columns:1fr;row-gap:12px}}

/* 표 — 가로 hairline만으로 구획합니다. */
.sw-table{width:100%;margin-top:var(--space-56);border-collapse:collapse;text-align:left}
.sw-table th{padding:0 var(--space-24) 14px 0;border-bottom:1px solid var(--line);color:var(--ink-subtle);text-transform:uppercase;vertical-align:bottom;font-weight:600}
.sw-table td{padding:22px var(--space-24) 22px 0;border-bottom:1px solid var(--line);color:var(--ink-muted);vertical-align:top}
.sw-table th:last-child,.sw-table td:last-child{padding-right:0}
.sw-table .is-lead{color:var(--ink);font-weight:600}
.sw-table .col-step{width:200px}
.sw-table .col-half{width:44%}
@media (max-width:760px){
  .sw-table{margin-top:var(--space-40)}
  .sw-table,.sw-table tbody,.sw-table tr,.sw-table td{display:block;width:auto}
  .sw-table thead{display:none}
  .sw-table tr{padding:20px 0;border-bottom:1px solid var(--line)}
  .sw-table tr:first-child{border-top:1px solid var(--line)}
  .sw-table td{padding:0;border:0}
  .sw-table td+td{margin-top:14px}
  .sw-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--ink-subtle);font:var(--text-overline);letter-spacing:.69px;text-transform:uppercase}
}

/* 가운뎃점으로 잇는 나열 — 시스템의 나열 표기를 그대로 씁니다. */
.sw-specline{margin-top:var(--space-28);color:var(--ink)}
.sw-note{margin-top:var(--space-28);color:var(--ink-subtle)}

/* 포트폴리오 공통 리드 — 문장이 길어 시안의 920px에서는 줄이 흩어집니다.
   한 span이 한 줄로 떨어지도록 읽는 폭만 넓힙니다. */
.sw-mission--lead .sw-mission__text{max-width:1060px}

/* 섹션 제목은 한 줄로 읽히게 — 시안의 소개 블록(measure-intro 640px)은
   설명 문단을 위한 폭이라, 제목까지 묶으면 짧은 제목도 두 줄로 접힙니다.
   폭 제한을 설명 문단에만 남기고 제목은 컨테이너 폭까지 씁니다.
   (좁은 화면에서는 당연히 줄이 넘어갑니다.) */
.sw-section-intro{max-width:none}
.sw-section-intro__text{max-width:var(--measure-intro)}

/* 마무리 CTA 제목도 한 줄로 — 시안의 519px는 문장을 쉼표에서 접습니다. */
.sw-cta__title{max-width:none}

/* ── 뉴스&인사이트 ───────────────────────────────────────
   모두 tools/build_news.py 가 md/news/*.md 로부터 만듭니다.
   .sw-newslist/.sw-newsrow — 회사개요(company/index.html)의 최신 소식 3개.
     제품 목록과 같은 격자(왼쪽 280px + 오른쪽 본문)이고, 누르면 목록의 해당 항목으로 가서 펼쳐집니다.
   .sw-newsacc/.sw-newsitem — 뉴스&인사이트 목록(company/news/*.html)의 펼침형 행. 아래에 있습니다. */
.sw-newslist{list-style:none;margin:var(--space-56) 0 0;padding:0;border-top:1px solid var(--line)}
.sw-newsrow{display:grid;grid-template-columns:var(--product-meta-col) 1fr;column-gap:52px;padding:32px 16px;margin:0;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .15s ease}
.sw-newsrow:hover{background:var(--surface-subtle)}
.sw-newsrow:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.sw-newsrow__meta{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.sw-newsrow__cat{color:var(--ink)}
.sw-newsrow__date{color:var(--ink-subtle)}
.sw-newsrow__body{display:block}
.sw-newsrow__title{display:block;color:var(--ink)}
.sw-newsrow__text{display:block;margin-top:var(--space-8);max-width:640px;color:var(--ink-muted)}
@media (max-width:760px){.sw-newsrow{grid-template-columns:1fr;row-gap:10px}.sw-newsrow__meta{flex-direction:row;gap:10px;padding-top:0}}

/* 분류 탭 — 전체 · 보도자료 · 인사이트. 헤더 내비게이션 링크와 같은 알약 모양이고,
   분류마다 따로 만든 목록 페이지(news.html, news-press.html, news-insight.html)로 이동합니다. */
.sw-tabs{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-40);margin-left:calc(-1 * var(--space-16))}
.sw-tab{padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);color:var(--ink-muted);font:var(--text-nav);text-decoration:none;white-space:nowrap}
.sw-tab:hover{color:var(--ink);background:var(--surface-subtle)}
.sw-tab.is-active{color:var(--ink);background:var(--surface-subtle);font-weight:600}
.sw-tab:focus-visible{outline:2px solid var(--primary);outline-offset:0}
.sw-tabs+.sw-newslist,.sw-tabs+.sw-newslist-empty{margin-top:var(--space-24)}
.sw-newslist-empty{margin:var(--space-56) 0 0;padding:var(--space-40) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink-subtle);font:var(--text-body)}

/* 펼침형 목록 — company/news/*.html. 한 줄 바에 분류 · 제목 · 작성일을 두고,
   줄을 누르면 그 자리에서 본문과 "원문 바로가기" 버튼이 펼쳐집니다(<details>).
   카드·그림자 없이 hairline으로만 나누고, 펼친 본문은 제목 칸 아래에 맞춰 둡니다. */
.sw-newsacc{--news-cat-col:88px;--news-gap:32px;--news-inset:16px;list-style:none;margin:var(--space-56) 0 0;padding:0;border-top:1px solid var(--line)}
.sw-tabs+.sw-newsacc{margin-top:var(--space-24)}
.sw-newsitem{border-bottom:1px solid var(--line)}
.sw-newsitem__details{scroll-margin-top:var(--space-24)}
.sw-newsitem__bar{display:grid;grid-template-columns:var(--news-cat-col) minmax(0,1fr) auto 20px;align-items:center;column-gap:var(--news-gap);padding:26px var(--news-inset);margin:0;list-style:none;cursor:pointer;transition:background-color .15s ease}
.sw-newsitem__bar::-webkit-details-marker{display:none}
.sw-newsitem__bar::marker{content:""}
.sw-newsitem__bar:hover{background:var(--surface-subtle)}
.sw-newsitem__bar:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.sw-newsitem__cat{color:var(--ink-subtle)}
.sw-newsitem__title{color:var(--ink);font:var(--text-product-name);font-size:18px;line-height:27px;letter-spacing:-.36px;font-weight:700}
.sw-newsitem__date{color:var(--ink-subtle);font:var(--text-nav);font-variant-numeric:tabular-nums;white-space:nowrap}
.sw-newsitem__mark{position:relative;width:14px;height:14px;justify-self:end}
.sw-newsitem__mark::before,.sw-newsitem__mark::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--ink-muted);transition:transform .2s ease}
.sw-newsitem__mark::after{transform:rotate(90deg)}
.sw-newsitem__details[open] .sw-newsitem__mark::after{transform:rotate(0deg)}
.sw-newsitem__details[open] .sw-newsitem__title{color:var(--ink)}
.sw-newsitem__details[open]>.sw-newsitem__bar{background:none}
.sw-newsitem__details[open]>.sw-newsitem__bar:hover{background:var(--surface-subtle)}
.sw-newsitem__panel{padding:var(--space-8) var(--news-inset) var(--space-56) calc(var(--news-cat-col) + var(--news-gap) + var(--news-inset))}
.sw-newsitem__cover{margin:0 0 var(--space-28);max-width:720px}
.sw-newsitem__cover img{display:block;width:100%;height:auto}
.sw-newsitem__panel>.sw-newsitem__body{margin-top:0}
.sw-newsitem__body>:first-child{margin-top:0}
.sw-newsitem__actions{margin-top:var(--space-40)}
@media (prefers-reduced-motion:reduce){.sw-newsitem__mark::before,.sw-newsitem__mark::after,.sw-newsitem__bar{transition:none}}
@media (max-width:760px){
  .sw-newsitem__bar{grid-template-columns:auto 1fr 20px;grid-template-areas:"cat date mark" "title title mark";column-gap:12px;row-gap:6px;padding:22px var(--news-inset)}
  .sw-newsitem__cat{grid-area:cat}
  .sw-newsitem__date{grid-area:date;font:var(--text-overline)}
  .sw-newsitem__title{grid-area:title;font-size:17px;line-height:25px}
  .sw-newsitem__mark{grid-area:mark}
  .sw-newsacc{--news-inset:12px}
  .sw-newsitem__panel{padding:var(--space-4) var(--news-inset) var(--space-40)}
}

/* 히어로 바로 아래 목록 — 분류 탭이 첫 요소이므로 위 여백을 줄이고, 탭 왼쪽 안쪽 여백만큼 당겨 둔 정렬은 그대로 씁니다. */
.sw-page--news{padding-top:var(--space-56)}
.sw-page--news .sw-tabs{margin-top:0}

/* 분류 탭(보도자료·인사이트) — 분류 표시가 없으므로 제목이 첫 칸부터 시작합니다. */
.sw-newsacc--nocat .sw-newsitem__bar{grid-template-columns:minmax(0,1fr) auto 20px}
.sw-newsacc--nocat .sw-newsitem__panel{padding-left:var(--news-inset)}
@media (max-width:760px){.sw-newsacc--nocat .sw-newsitem__bar{grid-template-areas:"date date mark" "title title mark"}}

/* 연도 묶음 — 펼침형 목록을 연도마다 나눕니다(스크립트가 없을 때 보이는 모양). */
.sw-newsyears{margin-top:var(--space-40)}
.sw-tabs+.sw-newsyears{margin-top:var(--space-40)}
.sw-newsyear+.sw-newsyear{margin-top:var(--space-56)}
.sw-newsyear__title{display:flex;align-items:baseline;gap:var(--space-8);margin:0 0 var(--space-16);color:var(--ink);font:var(--text-heading-lg);font-size:28px;line-height:34px;letter-spacing:-.56px;font-variant-numeric:tabular-nums}
.sw-newsyear .sw-newsacc{margin-top:0;border-top-color:var(--ink)}
@media (max-width:760px){.sw-newsyear__title{font-size:24px;line-height:30px}.sw-newsyear+.sw-newsyear{margin-top:var(--space-40)}}

/* 연도 탭 — 분류 탭(알약) 아래, 굵은 연도 숫자를 밑줄 탭으로 둡니다. 탭의 아래 선이 목록의 윗선이 됩니다.
   site.js 가 켜지면 .sw-newsyears 에 is-tabbed 가 붙어 고른 연도만 보이고, 묶음 제목은 화면 낭독기용으로만 남습니다. */
.sw-yeartabs{display:flex;gap:28px;margin-top:var(--space-40);border-bottom:1px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.sw-yeartabs::-webkit-scrollbar{display:none}
.sw-yeartabs[hidden]{display:none}
.sw-yeartab{display:inline-flex;align-items:baseline;gap:6px;flex:none;padding:0 0 14px;margin:0 0 -1px;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--ink-subtle);font:var(--text-heading-lg);font-size:26px;line-height:32px;letter-spacing:-.52px;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;transition:color .15s ease}
.sw-yeartab:hover{color:var(--ink-muted)}
.sw-yeartab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.sw-yeartab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-newsyears.is-tabbed{margin-top:0}
.sw-newsyears.is-tabbed .sw-newsyear+.sw-newsyear{margin-top:0}
.sw-newsyears.is-tabbed .sw-newsyear[hidden]{display:none}
.sw-newsyears.is-tabbed .sw-newsyear__title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sw-newsyears.is-tabbed .sw-newsacc{border-top:0}
@media (max-width:760px){.sw-yeartabs{gap:20px;margin-top:var(--space-28)}.sw-yeartab{font-size:21px;line-height:27px;padding-bottom:12px}}

/* 화면에는 보이지 않고 화면 낭독기만 읽는 글자 */
.sw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 목록 페이지 번호 — 내비게이션 링크와 같은 알약 모양입니다. */
.sw-pager{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-40)}
.sw-pager__link{display:inline-flex;align-items:center;justify-content:center;min-width:37px;padding:var(--space-8) 14px;border-radius:var(--radius-pill);color:var(--ink-muted);font:var(--text-nav);text-decoration:none}
.sw-pager__link:hover{color:var(--ink);background:var(--surface-subtle)}
.sw-pager__link.is-current{color:var(--ink);background:var(--surface-subtle);font-weight:600}
.sw-pager__link:focus-visible{outline:2px solid var(--primary);outline-offset:0}

/* 흰 바탕의 테두리 버튼 — 네이비 위 ghost 버튼을 흰 바탕으로 옮긴 것입니다. */
.sw-btn--line{background:none;color:var(--ink);border-color:var(--line);padding-top:12px;padding-bottom:12px}
.sw-btn--line{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.sw-btn--line:hover{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}

/* 상세 — 머리글 */
.sw-article__eyebrow{text-decoration:none}
.sw-article__eyebrow:hover{background:var(--surface-subtle)}
.sw-article__title{margin:28px 0 0;max-width:860px;color:var(--ink);font:var(--text-heading-lg);letter-spacing:-.8px}
.sw-article__lead{margin:var(--space-20) 0 0;max-width:var(--measure-lead);color:var(--ink-muted);font:var(--text-body-lg)}
.sw-article__meta{margin-top:var(--space-24);color:var(--ink-subtle)}
.sw-article__meta span:first-child{color:var(--ink)}
.sw-article__head{padding-bottom:var(--space-40);border-bottom:1px solid var(--line)}
.sw-article__cover{margin:var(--space-40) 0 0;max-width:960px}
.sw-article__cover img{display:block;width:100%;height:auto}
@media (max-width:640px){.sw-article__title{font-size:30px;line-height:38px;letter-spacing:-.6px}}

/* 상세 — 본문. md에서 온 태그에 직접 스타일을 줍니다. 읽는 폭은 720px. */
.sw-prose{max-width:720px;margin-top:var(--space-40);color:var(--ink-muted);font:var(--text-body-lg);line-height:1.8}
.sw-prose>*+*{margin-top:var(--space-20)}
.sw-prose h2{margin-top:var(--space-56);color:var(--ink);font-size:24px;line-height:32px;font-weight:800;letter-spacing:-.48px}
.sw-prose h3{margin-top:var(--space-40);color:var(--ink);font-size:18px;line-height:27px;font-weight:700;letter-spacing:-.18px}
.sw-prose h4,.sw-prose h5,.sw-prose h6{margin-top:var(--space-28);color:var(--ink);font:var(--text-proof)}
.sw-prose h2+*,.sw-prose h3+*,.sw-prose h4+*{margin-top:var(--space-16)}
.sw-prose p,.sw-prose ul,.sw-prose ol,.sw-prose blockquote,.sw-prose figure,.sw-prose pre{margin-bottom:0}
.sw-prose ul,.sw-prose ol{padding-left:1.3em}
.sw-prose li+li{margin-top:6px}
.sw-prose li>ul,.sw-prose li>ol{margin-top:6px}
.sw-prose strong{color:var(--ink);font-weight:700}
.sw-prose a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--line)}
.sw-prose a:hover{border-bottom-color:var(--primary)}
.sw-prose a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-prose blockquote{margin-left:0;margin-right:0;padding:2px 0 2px var(--space-24);border-left:2px solid var(--line);color:var(--ink)}
.sw-prose blockquote>*+*{margin-top:var(--space-16)}
.sw-prose hr{margin:var(--space-56) 0;border:0;border-top:1px solid var(--line)}
.sw-prose img{display:block;max-width:100%;height:auto}
.sw-prose figure{margin-left:0;margin-right:0}
.sw-prose figcaption{margin-top:10px;color:var(--ink-subtle);font:var(--text-caption)}
.sw-prose code{padding:1px 5px;background:var(--surface-subtle);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
.sw-prose pre{padding:var(--space-20) var(--space-24);border:1px solid var(--line);background:var(--surface-subtle);overflow-x:auto;line-height:1.6}
.sw-prose pre code{padding:0;background:none;font-size:13.5px}
.sw-prose__table{overflow-x:auto}
.sw-prose table{width:100%;border-collapse:collapse;text-align:left;font:var(--text-body-sm)}
.sw-prose th{padding:0 var(--space-16) 12px 0;border-bottom:1px solid var(--line);color:var(--ink-subtle);font:var(--text-overline);letter-spacing:.69px;text-transform:uppercase;vertical-align:bottom}
.sw-prose td{padding:14px var(--space-16) 14px 0;border-bottom:1px solid var(--line);vertical-align:top}

/* 상세 — 이전 글 / 다음 글 */
.sw-article__nav{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--space-56);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sw-adjacent{display:block;padding:var(--space-24) 12px;text-decoration:none;transition:background-color .15s ease}
.sw-adjacent--next{border-left:1px solid var(--line);text-align:right}
.sw-adjacent:not(.is-empty):hover{background:var(--surface-subtle)}
.sw-adjacent:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.sw-adjacent__label{display:block;color:var(--ink-subtle)}
.sw-adjacent__title{display:block;margin-top:6px;color:var(--ink)}
.sw-article__back{margin-top:var(--space-40)}
@media (max-width:640px){
  .sw-article__nav{grid-template-columns:1fr}
  .sw-adjacent--next{border-left:0;border-top:1px solid var(--line);text-align:left}
  .sw-adjacent.is-empty{display:none}
  .sw-adjacent.is-empty+.sw-adjacent--next{border-top:0}
}

/* ── 회사개요 (company.html) ────────────────────────────
   우리가 하는 일 · 뉴스&인사이트 · 클라이언트&파트너 · 채용 네 영역.
   카드 대신 가는 선으로 구획하고, 아이콘 없이 글자로만 구성합니다. */
.sw-jump{background:var(--bg);border-bottom:1px solid var(--line)}
.sw-jump .sw-tabs{margin-top:0;padding:14px 0}
/* 히어로 아래 바로가기 탭 롤오버 — 바탕은 칠하지 않고 글자만 primary 로 바꿉니다. */
.sw-jump .sw-tab{transition:color .15s}
.sw-jump .sw-tab:hover{color:var(--primary);background:none}
.sw-jump+.sw-section{border-top:0}
.sw-section[id]{scroll-margin-top:24px}
.sw-actions{display:flex;flex-wrap:wrap;gap:var(--space-16);margin-top:var(--space-40)}

/* 이름 격자 — 로고 대신 이름을 hairline 칸에 담습니다. */
.sw-names{min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sw-names li{min-width:0;padding:20px;word-break:keep-all;overflow-wrap:anywhere;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);font:var(--text-proof)}
.sw-names__sub{display:block;margin-top:4px;color:var(--ink-subtle)}

/* 연도 + 한 줄 기록 */
.sw-records{margin:0;padding:0;list-style:none}
.sw-records li{display:grid;grid-template-columns:110px 1fr;column-gap:var(--space-24);padding:10px 0;color:var(--ink-muted)}
.sw-records li:first-child{padding-top:0}
.sw-records__year{padding-top:4px;color:var(--ink-subtle)}

/* 채용 분야 — 위 hairline 하나로 나눈 세 칸 */
.sw-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-40);margin:var(--space-56) 0 0;padding:0;list-style:none}
.sw-fields li{display:flex;flex-direction:column;gap:6px;padding-top:var(--space-24);border-top:1px solid var(--line)}
.sw-fields__cat{color:var(--ink-subtle);text-transform:uppercase}
.sw-fields__name{color:var(--ink)}
.sw-fields__text{color:var(--ink-muted)}

@media (max-width:760px){
  .sw-names{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw-names li{padding:16px 14px}
  .sw-records li{grid-template-columns:1fr;row-gap:2px}
  .sw-fields{grid-template-columns:1fr;gap:var(--space-28)}
}

/* ── 사업영역 (company/business.html) ───────────────────
   영역(행) 오른쪽에 하위 항목을 나열합니다. 이름은 proof, 서브카피는 caption.
   항목 사이는 1px line으로만 나눕니다. 본문 원고가 오면 sw-area__text(body-row)를 덧붙입니다. */
.sw-area{margin:0;padding:0;list-style:none;max-width:640px}
.sw-area li{padding:14px 0;border-top:1px solid var(--line)}
.sw-area li:first-child{padding-top:0;border-top:0}
.sw-area li:last-child{padding-bottom:0}
.sw-area__name{display:block;color:var(--ink)}
.sw-area__sub{display:block;margin-top:2px;color:var(--ink-subtle)}
.sw-area__text{display:block;margin-top:var(--space-8);color:var(--ink-muted)}
h2.sw-row__name{margin:0}

/* ── 인재영입 (company/careers.html) ─────────────────────
   포지션 한 개가 한 행입니다. 제품 목록과 같은 격자(왼쪽 280px)를 쓰고,
   왼쪽에 키워드 태그·포지션 이름·분류, 오른쪽에 주요 업무와 지원 버튼을 둡니다.
   알약형 모서리는 버튼에만 쓰므로 태그는 각진 hairline 상자로 둡니다. */
.sw-jobs{list-style:none;margin:var(--space-56) 0 0;padding:0;border-top:1px solid var(--line)}
.sw-job{display:grid;grid-template-columns:var(--product-meta-col) 1fr;column-gap:52px;padding:var(--space-40) 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.sw-job__head{min-width:0}
.sw-job__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sw-tag{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid var(--line);color:var(--ink-muted);white-space:nowrap}
.sw-job__title{margin:var(--space-16) 0 0;color:var(--ink)}
.sw-job__cat{margin-top:6px;color:var(--ink-subtle);text-transform:uppercase}
.sw-job__meta{margin-top:2px;color:var(--ink-subtle)}
.sw-job__body{min-width:0;max-width:640px}
.sw-job__label{color:var(--ink-subtle);text-transform:uppercase}
.sw-job__duties{margin:var(--space-8) 0 0;padding-left:1.15em;color:var(--ink-muted)}
.sw-job__duties li+li{margin-top:4px}
.sw-job__duties li::marker{color:var(--ink-subtle)}
.sw-job__apply{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16);margin-top:var(--space-24)}
.sw-job__mail{color:var(--ink-subtle)}
.sw-link{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--line)}
.sw-link:hover{border-bottom-color:var(--primary)}
.sw-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:760px){
  .sw-job{grid-template-columns:1fr;row-gap:var(--space-20);padding:var(--space-28) 0}
}

/* ── 신청·문의 양식 (company/contact.html이 씁니다. 원래 교육·트레이닝 페이지용으로 만들었고, 그 페이지는 2026.10.19 삭제) ──
   과정·진행 방식은 기존 행 목록(sw-rows)과 이름 격자(sw-names)를 그대로 씁니다.
   신청 양식은 시안에 없어 새로 짰습니다. 재료는 기존 것뿐입니다:
   그룹은 제품 목록과 같은 격자(왼쪽 280px), 입력칸·선택지는 각진 1px line 상자,
   선택된 항목과 포커스만 primary. 둥근 모서리는 버튼에만 둡니다. */
.sw-row__meta{margin-top:var(--space-8);color:var(--ink-subtle)}


/* 진행 단계 — 위 hairline 하나로 나눈 네 칸 */
.sw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-36);margin:var(--space-56) 0 0;padding:0;list-style:none}
.sw-steps li{display:flex;flex-direction:column;gap:6px;padding-top:var(--space-24);border-top:1px solid var(--line)}
.sw-steps__num{color:var(--primary)}
.sw-steps__name{color:var(--ink)}
.sw-steps__text{color:var(--ink-muted)}
@media (max-width:900px){.sw-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sw-steps{grid-template-columns:1fr;gap:var(--space-24)}}

/* 양식 골격 */
.sw-form{margin-top:var(--space-56);border-top:1px solid var(--line)}
.sw-fgroup{display:grid;grid-template-columns:var(--product-meta-col) 1fr;column-gap:52px;padding:var(--space-40) 0;border-bottom:1px solid var(--line)}
.sw-fgroup__head{min-width:0}
.sw-fgroup__num{display:block;color:var(--primary)}
.sw-fgroup__title{margin-top:var(--space-8);color:var(--ink)}
.sw-fgroup__label{margin-top:6px;color:var(--ink-subtle);text-transform:uppercase}
.sw-fgroup__body{min-width:0;max-width:720px;display:flex;flex-direction:column;gap:var(--space-36)}
@media (max-width:760px){.sw-fgroup{grid-template-columns:1fr;row-gap:var(--space-24);padding:var(--space-28) 0}}

.sw-field{min-width:0;margin:0;padding:0;border:0}
.sw-field__label{display:block;padding:0;margin-bottom:var(--space-16);color:var(--ink)}
.sw-field__hint{margin-left:10px;color:var(--ink-subtle);font-weight:400}
.sw-field__sub{margin:var(--space-16) 0 var(--space-8);color:var(--ink-subtle);text-transform:uppercase}
legend+.sw-field__sub{margin-top:0}
.sw-field__error{margin-top:var(--space-8);color:var(--product-red)}
.sw-req-mark{color:var(--primary)}

/* 선택지 — 체크박스·라디오를 각진 hairline 상자로 보입니다. */
.sw-choices{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.sw-choices--after{margin-top:var(--space-16)}
.sw-choice{position:relative;display:inline-flex;cursor:pointer}
.sw-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sw-choice span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--line);background:var(--bg);color:var(--ink-muted);font:var(--text-nav);white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sw-choice:hover span{background:var(--surface-subtle);color:var(--ink)}
.sw-choice input:checked+span{border-color:var(--primary);color:var(--ink);background:var(--surface-subtle);font-weight:600}
.sw-choice input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.sw-field.is-invalid .sw-choice span{border-color:var(--product-red)}

/* 입력칸 */
.sw-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-24) var(--space-20)}
.sw-input{min-width:0}
.sw-input--wide{grid-column:1/-1}
.sw-input .sw-field__label{margin-bottom:var(--space-8)}
.sw-input__control{display:block;width:100%;min-height:47px;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);font:var(--text-body);-webkit-appearance:none;appearance:none;transition:border-color .15s ease}
.sw-input__control::placeholder{color:var(--ink-subtle)}
.sw-input__control:hover{border-color:var(--ink-subtle)}
.sw-input__control:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:var(--primary)}
.sw-input__control--area{min-height:132px;resize:vertical;line-height:1.7}
.sw-input.is-invalid .sw-input__control{border-color:var(--product-red)}
@media (max-width:560px){.sw-inputs{grid-template-columns:1fr}}

/* 동의 */
.sw-consent{padding-top:var(--space-24);border-top:1px solid var(--line)}
.sw-consent__text{max-width:640px;color:var(--ink-subtle)}
.sw-check{display:inline-flex;align-items:center;gap:10px;margin-top:var(--space-16);color:var(--ink);cursor:pointer}
.sw-check input{width:18px;height:18px;margin:0;accent-color:var(--primary);flex:none}
.sw-check input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-consent.is-invalid .sw-check{color:var(--product-red)}

.sw-form__submit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16)}
.sw-form__note{color:var(--ink-subtle)}
.sw-form.is-sending .sw-btn--filled{filter:brightness(.93);cursor:progress}

/* 스팸 방지 칸 — 사람에게는 보이지 않습니다. */
.sw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 보낸 뒤 · 보내지 못했을 때 */
.sw-form-done{margin-top:var(--space-56);padding:var(--space-40) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sw-form-done:focus,.sw-form-fail:focus{outline:none}
.sw-form-done__label{color:var(--primary);text-transform:uppercase}
.sw-form-done__title{margin-top:var(--space-16);color:var(--ink)}
.sw-form-done__text{margin-top:var(--space-16);max-width:640px;color:var(--ink-muted)}
.sw-form-done__text strong{color:var(--ink);font-weight:600}
.sw-form-done__summary{display:grid;grid-template-columns:160px 1fr;margin:var(--space-40) 0 0;max-width:720px;border-top:1px solid var(--line)}
.sw-form-done__summary dt,.sw-form-done__summary dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line);font:var(--text-body-sm)}
.sw-form-done__summary dt{color:var(--ink-subtle)}
.sw-form-done__summary dd{color:var(--ink)}
@media (max-width:640px){
  .sw-form-done__title{font-size:30px;line-height:38px;letter-spacing:-.6px}
  .sw-form-done__summary{grid-template-columns:1fr}
  .sw-form-done__summary dt{padding-bottom:0;border-bottom:0}
}
.sw-form-fail{margin-top:var(--space-24);padding:var(--space-24) 0;border-top:1px solid var(--product-red);border-bottom:1px solid var(--line)}
.sw-form-fail__title{color:var(--ink)}
.sw-form-fail__text{margin-top:var(--space-8);max-width:640px;color:var(--ink-muted)}
.sw-form-fail .sw-actions{margin-top:var(--space-20)}

/* ── 문의하기 (company/contact.html) ────────────────────
   문의 유형별 담당자 블록은 양식 그룹(sw-fgroup)과 같은 격자(왼쪽 280px)를 씁니다.
   담당자 · 이메일 · 휴대폰은 위아래 hairline으로만 나눈 세 칸입니다. 카드·그림자 없음. */
.sw-cgroups{margin-top:var(--space-56)}
.sw-cgroup{display:grid;grid-template-columns:var(--product-meta-col) 1fr;column-gap:52px;padding:var(--space-40) 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.sw-cgroup__head{min-width:0}
.sw-cgroup__body{min-width:0;max-width:720px;display:flex;flex-direction:column;gap:var(--space-24)}
@media (max-width:760px){.sw-cgroup{grid-template-columns:1fr;row-gap:var(--space-20);padding:var(--space-28) 0}}

.sw-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sw-contact__item{min-width:0;padding:var(--space-16) var(--space-20) var(--space-16) 0}
.sw-contact__item+.sw-contact__item{padding-left:var(--space-20);border-left:1px solid var(--line)}
.sw-contact__label{margin:0;color:var(--ink-subtle)}
.sw-contact__value{margin:4px 0 0;color:var(--ink);overflow-wrap:anywhere}
.sw-contact__role{margin-left:6px;color:var(--ink-subtle);font:var(--text-caption)}
.sw-contact__link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .15s ease,color .15s ease}
.sw-contact__link:hover{color:var(--primary);border-bottom-color:var(--primary)}
.sw-contact__link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:640px){
  .sw-contact{grid-template-columns:1fr}
  .sw-contact__item,.sw-contact__item+.sw-contact__item{padding:var(--space-12,12px) 0;border-left:0}
  .sw-contact__item+.sw-contact__item{border-top:1px solid var(--line)}
}

/* 양식 01 — 고른 유형의 받는 담당자 */
.sw-route{margin-top:var(--space-16);color:var(--ink-subtle)}

/* ── 엔터프라이즈 솔루션 상세 (products/*.html, tools/build_solutions.py) ──
   Broadcom VMware · Omnissa Horizon · CloudX · Veeam · Zerto 다섯 페이지가 함께 씁니다.
   재료는 기존 것뿐입니다: 구획은 1px line, 이름은 product-name/proof, 레이블은 overline.
   수치도 그라디언트(StatBand 전용) 없이 흰 바탕에 ink로 둡니다. 카드·그림자·둥근 모서리 없음. */

/* 행 본문이 여러 문단일 때 */
div.sw-row__text>p+p{margin-top:var(--space-16)}
h3.sw-row__name{margin:0}

/* 섹션 안의 소묶음 — 소제목 + 내용. 묶음 사이는 위 hairline 하나. */
.sw-sub{margin-top:var(--space-56);padding-top:var(--space-40);border-top:1px solid var(--line)}
.sw-sub__title{margin:0;color:var(--ink);font-size:22px;line-height:30px;font-weight:800;letter-spacing:-.44px}
.sw-sub__title.overline{color:var(--ink-subtle);font-size:11.5px;line-height:17.25px;font-weight:600;letter-spacing:.69px;text-transform:uppercase}
.sw-sub__title--issue{font-size:18px;line-height:27px;letter-spacing:-.18px}
.sw-sub__text{margin-top:var(--space-16);max-width:var(--measure-intro);color:var(--ink-muted)}
.sw-sub>.sw-table,.sw-sub>.sw-nums,.sw-sub>.sw-pillars,.sw-sub>.sw-figs,.sw-sub>.sw-screens{margin-top:var(--space-28)}

/* 숫자 격자 — 칸마다 위 hairline. 숫자는 heading 굵기로, 설명은 body-sm. */
.sw-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-36);margin:var(--space-56) 0 0;padding:0;list-style:none}
.sw-nums li{display:flex;flex-direction:column;gap:8px;padding-top:var(--space-20);border-top:1px solid var(--ink)}
.sw-num__value{color:var(--ink);font-size:34px;line-height:40px;font-weight:800;letter-spacing:-.68px;word-break:keep-all}
.sw-num__label{color:var(--ink);font:var(--text-proof)}
.sw-num__text{color:var(--ink-muted);font:var(--text-body-sm)}

/* 기둥 — 이름 + 한 줄 설명, 네 칸 */
.sw-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-24);margin:var(--space-28) 0 0;padding:0;list-style:none}
.sw-pillars li{display:flex;flex-direction:column;gap:6px;padding:var(--space-20) 0 0;border-top:1px solid var(--line)}
.sw-pillar__name{color:var(--ink)}
.sw-pillar__text{color:var(--ink-muted);font:var(--text-body-sm)}

/* 쌓아 둔 자산 · 지원 항목 — 세 칸으로 흐르는 hairline 목록 */
.sw-assets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-36);margin:var(--space-24) 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sw-assets li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font:var(--text-body-row)}
.sw-assets--ops{margin-top:var(--space-56)}
@media (max-width:900px){.sw-assets{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sw-assets{grid-template-columns:1fr}}

/* 그림 — 이미지와, 아직 없는 이미지·도식의 자리 */
.sw-figs{display:grid;grid-template-columns:1fr;gap:var(--space-24);margin-top:var(--space-28)}
.sw-figs--two{grid-template-columns:1fr 1fr}
@media (max-width:760px){.sw-figs--two{grid-template-columns:1fr}}
.sw-figure{margin:0;min-width:0}
.sw-figure img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.sw-figure figcaption{margin-top:10px;color:var(--ink-subtle)}
.sw-figure__ph{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:200px;padding:var(--space-28);border:1px dashed var(--line);background:var(--surface-subtle)}
.sw-figure.is-diagram .sw-figure__ph{min-height:160px}
.sw-figure__phlabel{color:var(--ink-subtle);text-transform:uppercase}
.sw-figure__phpath{color:var(--ink-subtle);overflow-wrap:anywhere}
.sw-figure__phtext{max-width:640px;color:var(--ink-muted);font:var(--text-body-sm)}
.sw-vendorlogo{margin-top:var(--space-40);max-width:240px}
.sw-vendorlogo .sw-figure__ph{min-height:80px;padding:var(--space-16)}

/* 실제 화면 — 그림 위, 이름과 설명 아래. 두 칸. */
.sw-screens{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-40) var(--space-36);margin:var(--space-28) 0 0;padding:0;list-style:none}
.sw-screen{min-width:0}
.sw-screen__meta{margin-top:var(--space-16)}
.sw-screen__tag{display:block;color:var(--ink-subtle);text-transform:uppercase}
.sw-screen__name{margin:4px 0 0;color:var(--ink)}
.sw-screen__text{margin-top:6px;color:var(--ink-muted);font:var(--text-body-sm)}
.sw-screens>.sw-screen:only-child{grid-column:1/-1;max-width:760px}
@media (max-width:760px){.sw-screens{grid-template-columns:1fr}}

/* 구성요소 — 제품 목록과 같은 격자(왼쪽 280px). 오른쪽에 한 줄 요지, 설명, 그림, '소프트웍스가 하는 일'. */
.sw-comps{margin-top:var(--space-56);border-top:1px solid var(--line)}
.sw-comp{display:grid;grid-template-columns:var(--product-meta-col) 1fr;column-gap:52px;padding:var(--space-40) 0;border-bottom:1px solid var(--line)}
.sw-comp__meta{min-width:0}
.sw-comp__body{min-width:0;max-width:760px}
.sw-comp__head{color:var(--ink);font-size:18px;line-height:27px;font-weight:700;letter-spacing:-.18px}
.sw-comp__text{margin-top:var(--space-16);color:var(--ink-muted)}
.sw-comp__do{margin-top:var(--space-28);padding-left:var(--space-20);border-left:2px solid var(--ink)}
.sw-comp__dolabel{display:block;margin-bottom:6px;color:var(--ink-subtle);text-transform:uppercase}
.sw-comp__do p{color:var(--ink)}
@media (max-width:760px){.sw-comp{grid-template-columns:1fr;row-gap:var(--space-16);padding:var(--space-28) 0}}

/* 출처 · 각주 */
.sw-source{margin-top:var(--space-40);padding-top:var(--space-16);border-top:1px solid var(--line);max-width:860px;color:var(--ink-subtle)}
.sw-source__label{display:inline-block;margin-right:10px;color:var(--ink-muted);text-transform:uppercase}
.sw-note.caption{color:var(--ink-subtle)}
.sw-section .sw-note{max-width:860px}
.sw-figure__phdesc{max-width:640px;color:var(--ink-subtle)}
@media (max-width:560px){.sw-num__value{font-size:26px;line-height:32px;letter-spacing:-.52px}.sw-nums{gap:var(--space-24)}}

/* ── 자주 묻는 질문 (products/genworks-ml.html #faq) ─────────────
   뉴스 펼침형 목록과 같은 방식입니다: hairline 행, 누르면 그 자리에서 답이 펼쳐집니다(<details>).
   왼쪽에 Q 번호(overline), 가운데 질문, 오른쪽 +/− 표시. 카드·그림자 없음. */
.sw-faq{--faq-num-col:64px;--faq-gap:24px;list-style:none;margin:var(--space-56) 0 0;padding:0;border-top:1px solid var(--line)}
.sw-faq__item{border-bottom:1px solid var(--line)}
.sw-faq__q{display:grid;grid-template-columns:var(--faq-num-col) minmax(0,1fr) 20px;align-items:center;column-gap:var(--faq-gap);padding:24px 16px;margin:0;list-style:none;cursor:pointer;transition:background-color .15s ease}
.sw-faq__q::-webkit-details-marker{display:none}
.sw-faq__q::marker{content:""}
.sw-faq__q:hover{background:var(--surface-subtle)}
.sw-faq__q:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.sw-faq__num{color:var(--ink-subtle)}
.sw-faq__title{color:var(--ink);font-size:17px;line-height:26px;font-weight:700;letter-spacing:-.17px}
.sw-faq__mark{position:relative;width:14px;height:14px;justify-self:end}
.sw-faq__mark::before,.sw-faq__mark::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--ink-muted);transition:transform .2s ease}
.sw-faq__mark::after{transform:rotate(90deg)}
.sw-faq__details[open] .sw-faq__mark::after{transform:rotate(0deg)}
.sw-faq__a{max-width:720px;padding:0 0 var(--space-28) calc(var(--faq-num-col) + var(--faq-gap));color:var(--ink-muted)}
.sw-faq__a a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--line)}
.sw-faq__a a:hover{border-bottom-color:var(--primary)}
.sw-faq__a a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sw-faq__mark::before,.sw-faq__mark::after,.sw-faq__q{transition:none}}
@media (max-width:760px){
  .sw-faq__q{grid-template-columns:minmax(0,1fr) 20px;grid-template-areas:"num mark" "title mark";row-gap:4px;padding:20px 16px}
  .sw-faq__num{grid-area:num}.sw-faq__title{grid-area:title;font-size:16px;line-height:24px}.sw-faq__mark{grid-area:mark}
  .sw-faq__a{padding-left:0}
}

/* ── GenWorks (products/genworks-rp.html) ────────────────
   서비스 영역의 하위 모듈은 세 칸 hairline 격자, 이름은 proof · 서브카피 caption.
   통제 원칙은 왼쪽 2px ink 선 한 줄로 강조합니다(구성요소의 '소프트웍스가 하는 일'과 같은 방식). */
.sw-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-28);margin:var(--space-28) 0 0;padding:0;list-style:none}
.sw-modules li{display:flex;flex-direction:column;gap:2px;padding:var(--space-16) 0 var(--space-20);border-top:1px solid var(--line)}
.sw-module__name{color:var(--ink)}
.sw-module__sub{color:var(--ink-subtle)}
.sw-module__text{margin-top:6px;color:var(--ink-muted);font:var(--text-body-sm)}
@media (max-width:1000px){.sw-modules{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sw-modules{grid-template-columns:1fr}}
.sw-principle{margin-top:var(--space-40);max-width:860px;padding-left:var(--space-20);border-left:2px solid var(--ink);color:var(--ink)}
.sw-principle__label{display:block;margin-bottom:6px;color:var(--ink-subtle);text-transform:uppercase}
.sw-figure--shot{margin-top:var(--space-56)}
.sw-figure--shot+.sw-steps{margin-top:var(--space-40)}
.sw-fields--four{grid-template-columns:repeat(4,1fr);gap:var(--space-28)}
@media (max-width:1000px){.sw-fields--four{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.sw-fields--four{grid-template-columns:1fr}}
.sw-steps .sw-steps__num.overline{text-transform:uppercase}

/* ── OAP Security (products/genworks-oap.html) ───────────────
   기능 모듈 두 칸 변형, 사례의 '업무 상황 · AI 분석' 레이블, 사례 대상 역할 한 줄. */
.sw-modules--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.sw-modules--two{grid-template-columns:1fr}}
.sw-case__label{display:block;margin-bottom:4px;color:var(--ink-subtle);text-transform:uppercase}
.sw-comp__who{margin-top:var(--space-8);color:var(--ink-subtle)}
.sw-comp__body>.sw-nums{margin-top:var(--space-28)}
.sw-sub>.sw-assets{margin-top:var(--space-28)}

/* 좁은 화면에서 히어로 eyebrow가 길면 두 줄로 내립니다(가로 스크롤 방지). */
@media (max-width:420px){.sw-hero .sw-eyebrow{height:auto;min-height:30px;white-space:normal;line-height:16px;padding-top:6px;padding-bottom:6px}}

/* ── 제품 메뉴 2026.10.12 개편 — 01 AI(한 열) · 02 Infrastructure(세 열) ──
   02는 GPU Management / Virtual Desktop & Apps + Virtualization Management / Data Protection & Recovery 를 세 열로 둡니다. */
.sw-menu__col--xwide{flex:3 1 0;max-width:900px}
.sw-menu__subcols--one{grid-template-columns:1fr}
.sw-menu__subcols--three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 히어로 바로 뒤에 오는 섹션은 윗선을 긋지 않습니다 — 네이비 밴드가 이미 경계입니다. */
.sw-section--after-hero{border-top:0}

/* ── CloudV (products/cloud-v.html) — 8개 관리 영역을 네 칸 격자로 ── */
.sw-modules--four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--space-56)}
@media (max-width:1000px){.sw-modules--four{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sw-modules--four{grid-template-columns:1fr}}
.sw-pillars+.sw-table{margin-top:var(--space-40)}

/* 제품 목록 안의 세부 분류 머리글 — 제품 메뉴의 서브그룹과 같은 overline-sm 을 씁니다.
   머리글은 바로 아래 행과 한 덩어리로 읽히고, 묶음 사이는 기존 행 구분선이 가릅니다. */
.sw-subcat{display:block;padding:var(--space-28) 0 var(--space-4);color:var(--ink-subtle);text-transform:uppercase}
.sw-products__list>.sw-subcat:first-child{padding-top:var(--space-24)}
.sw-subcat+.sw-product{padding-top:var(--space-16)}

/* 기술지원 — 항목 두 칸짜리 정보 줄, 하단 공통 창구 */
.sw-contact--1{grid-template-columns:1fr}
.sw-contact--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sw-cgroup--common .sw-fgroup__num{text-transform:uppercase}
@media (max-width:640px){.sw-contact--2{grid-template-columns:1fr}}

/* 로고 롤링 — 고객사·파트너사를 한 줄로 흘려 보여줍니다.
   스크립트가 없거나 움직임 줄이기 설정이면 줄바꿈된 정지 목록으로 보입니다.
   로고는 원래 색으로 보여줍니다. 로고 파일이 없으면 기업명을 글자로 보여줍니다(.is-text). */
.sw-row--logos{align-items:center}
.sw-logos{position:relative;min-width:0;overflow:hidden}
.sw-logos__track{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.sw-logos__item{flex:none;display:flex;align-items:center;justify-content:center;width:200px;height:88px;padding:0 28px}
.sw-logos__item img{display:block;max-width:100%;max-height:40px;width:auto;height:auto}
.sw-logos__name{display:none;color:var(--ink-muted);font:var(--text-proof);text-align:center;word-break:keep-all}
.sw-logos__item.is-text img{display:none}
.sw-logos__item.is-text .sw-logos__name{display:block}
.sw-logos.is-rolling{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.sw-logos.is-rolling .sw-logos__track{flex-wrap:nowrap;width:max-content;animation:sw-logos-roll var(--roll-duration,30s) linear infinite}
.sw-logos.is-rolling[data-direction="reverse"] .sw-logos__track{animation-direction:reverse}
.sw-logos.is-rolling:hover .sw-logos__track,.sw-logos.is-paused .sw-logos__track{animation-play-state:paused}
.sw-logos__toggle{margin-top:var(--space-16);padding:4px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg);color:var(--ink-subtle);font:var(--text-caption);cursor:pointer}
.sw-logos__toggle:hover{background:var(--surface-subtle)}
.sw-logos__toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@keyframes sw-logos-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:760px){.sw-logos__item{width:150px;height:72px;padding:0 20px}.sw-logos__item img{max-height:32px}}
@media (prefers-reduced-motion:reduce){.sw-logos.is-rolling .sw-logos__track{animation:none}}

/* 연혁 — 연도 한 칸 + 그해 내역 목록. 최근 연도부터 위에서 아래로 놓습니다. */
.sw-history{margin:0;padding:0;list-style:none}
.sw-history>li{display:grid;align-content:start;grid-template-columns:260px 1fr;column-gap:var(--space-24);padding:20px 0;border-top:1px solid var(--line)}
.sw-history>li:first-child{padding-top:0;border-top:0}
.sw-history>li:last-child{padding-bottom:0}
.sw-history__year{display:flex;align-items:baseline;gap:4px;color:var(--ink);white-space:nowrap}
.sw-history__num{font:var(--text-heading-lg);letter-spacing:-.02em}
.sw-history__unit{font:var(--text-body);font-weight:700;color:var(--ink-muted)}
.sw-history__items{margin:0;padding:0;list-style:none;color:var(--ink-muted)}
.sw-history__items li{padding:2px 0;word-break:keep-all}
@media (max-width:760px){.sw-history>li{grid-template-columns:1fr;row-gap:6px}}

/* 연혁 롤링 — 스크립트가 있으면 한 해씩 차례로 보여줍니다(최근 연도부터, 연도 탭 없음).
   모든 해를 같은 칸에 겹쳐 두어 가장 긴 해 높이로 고정되므로 넘어갈 때 아래 내용이 흔들리지 않습니다. */
.sw-history.is-rolling{display:grid}
.sw-history.is-rolling>li{grid-area:1/1;padding:0;border-top:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.sw-history.is-rolling>li.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){.sw-history.is-rolling>li{transition:none;transform:none}}
.sw-history-box{min-width:0}

/* ── 히어로 배경 선화 ──────────────────────────────────────
   페이지마다 성격에 맞는 선화(assets/img/hero/*.svg)를 히어로 오른쪽에 깝니다. 선화는 tools/make_hero_art.py 로 만듭니다.
   시스템 원칙대로 사진·그림자·색 면 없이 흰 선(투명도 9~16%)과 on-dark-muted 점만 씁니다.
   글자 가독성: 왼쪽 텍스트 영역과 위쪽 브레드크럼 자리에서는 mask 로 선화를 지우고, 좁은 화면에서는 더 옅게 둡니다.
   배경 이미지(<이름>.jpg, Figma AI 생성)가 있으면 사진을, 없으면 같은 이름의 선화(.svg)를 보입니다.
   사진은 70% 농도로 깔아 네이비 바탕과 섞습니다. 바꾸려면 data-hero 값과 같은 이름의 파일을 교체하면 됩니다. */
.sw-hero[data-hero]{position:relative;overflow:hidden;isolation:isolate}
.sw-hero[data-hero]::before{content:"";position:absolute;top:0;right:0;bottom:0;width:min(66%,980px);z-index:-1;pointer-events:none;opacity:.7;background:no-repeat right center/cover;--hero-fade:linear-gradient(to right,transparent 18%,#000 78%),linear-gradient(to bottom,transparent 12%,#000 36%);-webkit-mask-image:var(--hero-fade);mask-image:var(--hero-fade);-webkit-mask-composite:source-in;mask-composite:intersect}
@media (max-width:760px){.sw-hero[data-hero]::before{width:100%;opacity:.4;background-position:70% center;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60%);mask-image:linear-gradient(to bottom,transparent 0,#000 60%)}}
.sw-hero[data-hero="layers"]::before{background-image:url(../img/hero/layers.jpg),url(../img/hero/layers.svg)}
.sw-hero[data-hero="network"]::before{background-image:url(../img/hero/network.jpg),url(../img/hero/network.svg)}
.sw-hero[data-hero="ontology"]::before{background-image:url(../img/hero/ontology.jpg),url(../img/hero/ontology.svg)}
.sw-hero[data-hero="gpu"]::before{background-image:url(../img/hero/gpu.jpg),url(../img/hero/gpu.svg)}
.sw-hero[data-hero="windows"]::before{background-image:url(../img/hero/windows.jpg),url(../img/hero/windows.svg)}
.sw-hero[data-hero="tiles"]::before{background-image:url(../img/hero/tiles.jpg),url(../img/hero/tiles.svg)}
.sw-hero[data-hero="orbit"]::before{background-image:url(../img/hero/orbit.jpg),url(../img/hero/orbit.svg)}
.sw-hero[data-hero="rings"]::before{background-image:url(../img/hero/rings.jpg),url(../img/hero/rings.svg)}
.sw-hero[data-hero="replicate"]::before{background-image:url(../img/hero/replicate.jpg),url(../img/hero/replicate.svg)}
.sw-hero[data-hero="contour"]::before{background-image:url(../img/hero/contour.jpg),url(../img/hero/contour.svg)}
.sw-hero[data-hero="constellation"]::before{background-image:url(../img/hero/constellation.jpg),url(../img/hero/constellation.svg)}
.sw-hero[data-hero="signal"]::before{background-image:url(../img/hero/signal.jpg),url(../img/hero/signal.svg)}
.sw-hero[data-hero="pulse"]::before{background-image:url(../img/hero/pulse.jpg),url(../img/hero/pulse.svg)}
.sw-hero[data-hero="steps"]::before{background-image:url(../img/hero/steps.jpg),url(../img/hero/steps.svg)}
.sw-hero[data-hero="news"]::before{background-image:url(../img/hero/news.jpg),url(../img/hero/news.svg)}
/* 뉴스&인사이트 제목은 첫 줄이 길어 다른 페이지(860px)보다 넓혀 두 줄로 끊기게 합니다. */
.sw-hero--detail[data-hero="news"] .sw-hero__title{max-width:960px}
/* 랜딩 — 본문이 가운데 960px 열이라 사진 폭을 조금 넓히고, 선화 대체 없이 사진만 씁니다. */
.sw-hero[data-hero="landing"]::before{width:min(72%,1200px);background-image:url(../img/hero/landing.jpg)}

/* 히어로 버튼이 하나뿐이면 테두리 버튼도 주컬러 채움으로 보입니다. */
.sw-hero__actions > .sw-btn--ghost:only-child{background:var(--primary);color:var(--on-primary);border-color:transparent;padding-top:13px;padding-bottom:13px}
.sw-hero__actions > .sw-btn--ghost:only-child:hover{background:var(--primary);filter:brightness(.93)}
.sw-hero__actions > .sw-btn--ghost:only-child:focus-visible{outline-color:var(--on-dark)}

/* 인증 마크 — 이름 격자 칸 위쪽에 각 인증의 대표 마크를 둡니다. 마크 파일이 없으면 이름만 보입니다(.no-mark). */
.sw-certs li{display:flex;flex-direction:column;align-items:flex-start}
.sw-certs__mark{display:block;width:auto;max-width:100%;height:56px;margin-bottom:16px;object-fit:contain;object-position:left center}
.sw-certs li.no-mark .sw-certs__mark{display:none}
@media (max-width:760px){.sw-certs__mark{height:44px;margin-bottom:12px}}
/* 마크만 현재 보이는 크기의 80%로 줄입니다(왼쪽 가운데 기준). 마크 자리는 그대로라 이름 줄 위치는 다른 칸과 같습니다. */
.sw-certs__mark--sm{transform:scale(.8);transform-origin:left center}
@media (max-width:760px){.sw-hero[data-hero="landing"]::before{width:100%}}

/* ── 히어로 높이 ──────────────────────────────────────────
   시스템 값(위 11vh · 아래 9vh, 좁은 화면 93.72px · 76.68px)에서 위아래 여백을 줄였습니다.
   랜딩과 하위 페이지 히어로 모두에 적용됩니다. */
.sw-hero{padding:64px 0 56px}
@media (min-width:640px){.sw-hero{padding:6.5vh 0 6vh}}

/* 랜딩의 고객사·파트너사 띠 — 회사소개와 같은 로고 롤링을 쓰되,
   히어로와 수치 밴드 사이에 놓이는 얇은 띠라 칸을 낮추고 테두리를 줄입니다. */
.sw-proof--logos{padding:0}
.sw-proof--logos .sw-proof__row{flex-wrap:nowrap;align-items:center;column-gap:28px}
.sw-proof--logos .sw-proof__label{flex:none}
.sw-proof--logos .sw-logos{flex:1;min-width:0;border-top:0;border-bottom:0}
.sw-proof--logos .sw-logos__item{width:168px;height:72px;padding:0 24px;border-right:0}
.sw-proof--logos .sw-logos__item img{max-height:30px}
@media (max-width:760px){
  .sw-proof--logos .sw-proof__row{flex-wrap:wrap;row-gap:4px;padding-top:14px}
  .sw-proof--logos .sw-logos{flex:1 0 100%}
  .sw-proof--logos .sw-logos__item{width:140px;height:60px;padding:0 18px}
}

/* ── 본문 섹션 여백 ────────────────────────────────────────
   구분선(1px line) 위아래 여백을 약 1/3 줄였습니다. (괄호 안은 이전 값)
   일반 섹션 4vw(6vw) · 제품 목록·마무리 CTA·흰 바탕 목록 페이지 6vw(9vw) · 네이비 미션 7.5vw(11vw).
   좁은 화면(640px 미만)은 64px · 72px · 88px (이전 107px · 107px · 131px). */
.sw-section{padding:64px 0}
.sw-products,.sw-cta,.sw-page{padding:72px 0}
.sw-mission{padding:88px 0}
@media (min-width:640px){
  .sw-section{padding:4vw 0}
  .sw-products,.sw-cta,.sw-page{padding:6vw 0}
  .sw-mission{padding:7.5vw 0}
}

/* ── 섹션 서브카피 폭 ───────────────────────────────────────
   제목 아래 설명 문장(섹션 소개·마무리 CTA)이 640px 읽기 폭에서 꺾이지 않도록, 넓은 화면에서는 폭 제한을 풀어
   컨테이너 전체 폭(최대 1280px − 좌우 여백)을 씁니다. 그보다 긴 문단은 화면 밖으로 넘치지 않게 그대로 줄바꿈됩니다. */
@media (min-width:761px){
  .sw-section-intro__text,.sw-cta__text{max-width:none}
}

/* 행의 부가 설명 — 윗줄보다 약하게 둡니다(caption + ink-subtle). */
.sw-row__note{margin-top:var(--space-8);max-width:640px;color:var(--ink-subtle)}


/* 카드 격자 — 시스템이 "카드나 그림자 대신 선으로 구획한다"고 정해 두어,
   채움도 그림자도 둥근 모서리도 없이 1px line 만으로 칸을 나눕니다.
   바깥 테두리는 격자가, 안쪽 선은 각 칸이 그립니다(선이 겹치지 않습니다). */
.sw-cards{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--space-56);border-left:1px solid var(--line)}
/* 위쪽 색 띠가 격자의 윗변을 대신합니다. 수치 밴드의 그라디언트 정지점을 01→04 에 나눠 써서,
   맨 앞이 가장 밝고 뒤로 갈수록 깊어지는 계층 순서가 색으로 읽힙니다. */
.sw-card{position:relative;padding:var(--space-36) var(--space-20) var(--space-28);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .15s ease}
.sw-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--card-bar,var(--line))}
/* --card-bar 는 띠·번호 색, --card-on-bar 는 그 색을 배경으로 깔았을 때의 글자색입니다.
   01 의 청록은 밝아서 먹색 글자가, 나머지 짙은 색에는 흰 글자가 또렷합니다. */
.sw-card:nth-child(1){--card-bar:var(--stat-grad-4);--card-on-bar:var(--ink)}
.sw-card:nth-child(2){--card-bar:var(--stat-grad-3);--card-on-bar:var(--on-dark)}
.sw-card:nth-child(3){--card-bar:var(--stat-grad-2);--card-on-bar:var(--on-dark)}
.sw-card:nth-child(4){--card-bar:var(--stat-grad-1);--card-on-bar:var(--on-dark)}
/* 번호는 자기 칸의 띠 색을 씁니다. */
.sw-card__label{color:var(--card-bar)}
/* 마우스를 올리면 칸 전체가 띠 색으로 뒤집힙니다. */
.sw-card:hover{background:var(--card-bar)}
.sw-card:hover .sw-card__label,
.sw-card:hover .sw-card__name,
.sw-card:hover .sw-card__lead,
.sw-card:hover .sw-card__note{color:var(--card-on-bar)}
.sw-card__label,.sw-card__name,.sw-card__lead,.sw-card__note{transition:color .15s ease}
.sw-card__name{margin-top:var(--space-16);color:var(--ink)}
.sw-card__lead{margin-top:var(--space-16);color:var(--ink-muted)}
.sw-card__note{margin-top:var(--space-8);color:var(--ink-subtle)}
@media (max-width:640px){.sw-cards{grid-template-columns:1fr}}

/* 제목이 칸 폭을 넘지 않도록 글자 크기를 칸 너비에 맞춥니다.
   가장 긴 "Agentic Transformation"(20px 기준 265px)이 네 칸일 때의 안쪽 폭(228px)을
   넘기 때문에, 칸이 좁아지면 글자도 같이 줄어 한 줄을 지킵니다.
   칸이 넓은 2열·1열에서는 원래 크기(20px)로 돌아옵니다. */
.sw-card{container-type:inline-size}
.sw-card__name{font-size:16.5px;line-height:1.22}
@supports (container-type:inline-size){
  .sw-card__name{font-size:min(20px,5.8cqw)}
}

/* 미션 밴드(랜딩) — 높이를 줄이고 배경에 회로 느낌의 무늬를 깝니다.
   사진을 끌어오지 않고 시스템 색(navy-900 · stat-accent)으로 직접 그린 SVG입니다.
   무늬 위에 navy-900 을 가운데로 모아 덮어, 글자 대비는 원래대로 지킵니다. */
.sw-mission--art{position:relative;overflow:hidden;padding:var(--space-56) 0}
@media (min-width:640px){.sw-mission--art{padding:7vw 0}}
.sw-mission--art::before,
.sw-mission--art::after{content:"";position:absolute;inset:0;pointer-events:none}
.sw-mission--art::before{background:url("../img/mission-grid.svg") center/cover no-repeat}
.sw-mission--art::after{background:radial-gradient(ellipse 52% 68% at 50% 50%,
  var(--navy-900) 0%,
  color-mix(in srgb, var(--navy-900) 80%, transparent) 42%,
  color-mix(in srgb, var(--navy-900) 0%, transparent) 78%)}
/* 문장이 한 줄씩 떨어지도록 읽는 폭만 넓힙니다. */
.sw-mission--art .sw-mission__text{max-width:1060px}
.sw-mission--art>.sw-container{position:relative;z-index:1}

/* 고객사·파트너사를 한 줄에서 번갈아 보여줍니다.
   두 벌을 같은 칸에 겹쳐 두고 지금 차례인 쪽만 보입니다. */
.sw-proof__decks{position:relative;flex:1;min-width:0}
.sw-proof__deck{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.sw-proof__deck+.sw-proof__deck{position:absolute;inset:0}
.sw-proof__deck.is-current{opacity:1;visibility:visible}
.sw-proof--logos .sw-proof__label{transition:opacity .25s ease}
.sw-proof--logos.is-swapping .sw-proof__label{opacity:0}
/* 스크립트가 없어도 첫 벌은 HTML 의 is-current 로 보입니다. */
@media (prefers-reduced-motion:reduce){
  .sw-proof__decks{display:flex;flex-direction:column;gap:var(--space-8)}
  .sw-proof__deck,.sw-proof__deck+.sw-proof__deck{position:static;opacity:1;visibility:visible}
}

/* ── 푸터 ────────────────────────────────────────────────
   바로가기 메뉴 · 회사 정보 · 인증 로고 · 저작권. 인증 로고는 certs/footer-*.svg (원본, 어두운 바탕용). 시스템 푸터처럼 흰 바탕 위 1px line, 글자는 ink-subtle 계열입니다.
   바로가기는 ink-muted, 롤오버 시 다른 텍스트 링크와 같이 primary. 회사 정보 항목 사이는 가는 세로선으로 나눕니다. */
.sw-footer{padding:var(--space-40) 0 var(--space-28)}
.sw-footer__stack{display:flex;flex-direction:column;gap:var(--space-16)}
.sw-footer__nav{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-24)}
.sw-footer__nav a{color:var(--ink-muted);font:var(--text-nav);font-family:var(--font-sans);text-decoration:none;transition:color .15s}
.sw-footer__nav a:hover,.sw-footer__info a:hover{color:var(--primary)}
.sw-footer__nav a:focus-visible,.sw-footer__info a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-footer__info{display:flex;flex-wrap:wrap;row-gap:var(--space-4);font-style:normal;color:var(--ink-subtle);font:var(--text-caption);font-family:var(--font-sans)}
.sw-footer__info span+span::before{content:"";display:inline-block;width:1px;height:10px;margin:0 12px;background:var(--line);vertical-align:-1px}
.sw-footer__info a{color:inherit;text-decoration:none;transition:color .15s}
.sw-footer__certs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-28);margin:var(--space-8) 0 0;padding:0;list-style:none}
.sw-footer__certs img{display:block;width:auto;height:36px}
.sw-footer__copy{margin:var(--space-8) 0 0;color:var(--ink-subtle);font:var(--text-caption);font-family:var(--font-sans)}
@media (max-width:760px){
  .sw-footer__info{flex-direction:column}
  .sw-footer__info span+span::before{display:none}
}

/* ── 푸터: 네이비 바탕 ─────────────────────────────────────
   참조 사이트처럼 어두운 푸터로 바꿉니다. 바탕 navy-900, 바로가기 on-dark-muted(롤오버 시 on-dark),
   회사 정보 on-dark-muted, 저작권은 흰색 55%. 인증 로고는 받은 원본(흰 글자)을 그대로 씁니다. */
.sw-footer{background:var(--navy-900);border-top:0}
.sw-footer__nav a{color:var(--on-dark-muted)}
.sw-footer__nav a:hover,.sw-footer__info a:hover{color:var(--on-dark)}
.sw-footer__nav a:focus-visible,.sw-footer__info a:focus-visible{outline-color:var(--on-dark)}
.sw-footer__info{color:var(--on-dark-muted)}
.sw-footer__info span+span::before{background:var(--on-dark-divider)}
.sw-footer__copy{color:rgba(255,255,255,.55)}

/* 오시는 길 — 지도(hairline 테두리) + 지도 앱 링크 + 행 목록(주소·연락처·지하철·버스) */
.sw-map{position:relative;margin-top:var(--space-24);aspect-ratio:16/7;border:1px solid var(--line);background:var(--surface-subtle);overflow:hidden}
.sw-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sw-map__links{margin-top:var(--space-24)}
.sw-loc-list{margin:0;padding:0;list-style:none;color:var(--ink-muted)}
.sw-loc-list li{padding:3px 0;word-break:keep-all}
.sw-loc-list li:first-child{padding-top:0}
.sw-loc-list strong{margin-right:8px;color:var(--ink);font-weight:600}
.sw-loc-list a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sw-loc-list a:hover{color:var(--primary)}
@media (max-width:760px){.sw-map{aspect-ratio:4/3}}

/* ── Field Issues 이슈표 (products/genworks-oap.html) ─────────────
   이슈 하나가 두 줄(사용자 · 관리자)을 차지합니다. 왼쪽 이슈 칸은 두 줄을 묶고(rowspan),
   이슈 사이는 1px line, 같은 이슈 안의 두 역할 사이는 점선으로만 나눕니다. */
.sw-issues{width:100%;margin-top:var(--space-56);border-collapse:collapse;border-top:1px solid var(--line);text-align:left}
.sw-issues th,.sw-issues td{vertical-align:top}
.sw-issues__issue{width:var(--product-meta-col);padding:28px var(--space-24) 28px 0;border-bottom:1px solid var(--line);font-weight:inherit}
.sw-issues__num{display:block;color:var(--ink-subtle);text-transform:uppercase}
.sw-issues__title{display:block;margin-top:6px;color:var(--ink)}
.sw-issues__role{width:88px;padding:28px var(--space-16) 0 0;color:var(--ink-subtle)}
.sw-issues__body{padding:24px 0 24px}
.sw-issues tr.is-first .sw-issues__role,.sw-issues tr.is-first .sw-issues__body{border-bottom:1px dashed var(--line)}
.sw-issues tr.is-second .sw-issues__role,.sw-issues tr.is-second .sw-issues__body{border-bottom:1px solid var(--line)}
.sw-issues__q{color:var(--ink);font:var(--text-proof);font-size:16px;line-height:24px;font-weight:700}
.sw-issues__d{margin-top:6px;max-width:680px;color:var(--ink-muted)}
@media (max-width:760px){
  .sw-issues,.sw-issues tbody,.sw-issues tr,.sw-issues th,.sw-issues td{display:block;width:auto}
  .sw-issues__issue{padding:24px 0 8px;border-bottom:0}
  .sw-issues__role{padding:16px 0 0;border-bottom:0!important}
  .sw-issues__body{padding:4px 0 16px}
  .sw-issues tr.is-first .sw-issues__body{border-bottom:1px dashed var(--line)}
}

/* 푸터 인증 로고 — 넓은 화면에서는 오른쪽 열에 두고 세로 가운데로 맞춥니다. 좁은 화면은 아래로 쌓습니다. */
@media (min-width:1024px){
  .sw-footer__stack{display:grid;grid-template-columns:1fr auto;column-gap:var(--space-40);row-gap:var(--space-16);align-items:start}
  .sw-footer__nav,.sw-footer__info,.sw-footer__copy{grid-column:1}
  .sw-footer__certs{grid-column:2;grid-row:1 / span 3;align-self:center;justify-content:flex-end;margin:0}
}
/* 회사 정보 구분선 — 줄이 꺾여도 줄 맨 앞에는 구분선이 보이지 않도록, 각 항목 왼쪽에 선을 두고 맨 앞 13px 를 잘라 냅니다. */
.sw-footer__info span+span::before{display:none}
.sw-footer__info{margin-left:-13px;clip-path:inset(0 0 0 13px)}
.sw-footer__info span{padding-left:12px;margin-right:12px;background:linear-gradient(var(--on-dark-divider),var(--on-dark-divider)) left center/1px 10px no-repeat}

/* 이슈표 역할 아이콘 — 사용자(사람) · 관리자(사람 + 방패). 1.6px 선, 색은 ink-muted. */
.sw-issues__role{width:104px}
.sw-issues__icon{display:block;width:20px;height:20px;margin-bottom:6px;fill:none;stroke:var(--ink-muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sw-issues__rolename{display:block;color:var(--ink-subtle)}
@media (max-width:760px){
  .sw-issues__role{display:flex!important;align-items:center;gap:8px}
  .sw-issues__icon{margin-bottom:0}
}

/* 이슈표 역할 아이콘 — 컬러 배지 (2026.10.15). 사용자는 primary, 관리자는 navy-900.
   사용자 줄은 tr.is-first, 관리자 줄은 tr.is-second 입니다. */
.sw-issues__role{width:120px}
.sw-issues__icon{box-sizing:border-box;width:44px;height:44px;padding:10px;margin-bottom:8px;border-radius:50%;stroke-width:1.8}
.sw-issues tr.is-first .sw-issues__icon{background:rgba(19,105,255,.1);stroke:var(--primary)}
.sw-issues tr.is-second .sw-issues__icon{background:var(--navy-900);stroke:#fff}
.sw-issues tr.is-first .sw-issues__rolename{color:var(--primary)}
.sw-issues tr.is-second .sw-issues__rolename{color:var(--navy-900)}
@media (max-width:760px){
  .sw-issues__icon{width:36px;height:36px;padding:8px;margin-bottom:0}
  .sw-issues__role{gap:10px}
}

/* 이슈표 역할 아이콘 — 선명한 컬러 배지 (2026.10.15, 사이트 토큰 밖 색 사용)
   사용자: 파랑→하늘 그라디언트 · 관리자: 보라 그라디언트, 아이콘은 흰 선 */
.sw-issues__icon{width:48px;height:48px;padding:11px;stroke-width:1.9;stroke:#fff}
.sw-issues tr.is-first .sw-issues__icon{background:linear-gradient(135deg,#38bdf8 0%,#2563eb 100%);stroke:#fff;box-shadow:0 4px 12px rgba(37,99,235,.28)}
.sw-issues tr.is-second .sw-issues__icon{background:linear-gradient(135deg,#a78bfa 0%,#6d28d9 100%);stroke:#fff;box-shadow:0 4px 12px rgba(109,40,217,.28)}
.sw-issues tr.is-first .sw-issues__rolename{color:#2563eb}
.sw-issues tr.is-second .sw-issues__rolename{color:#6d28d9}
@media (max-width:760px){.sw-issues__icon{width:40px;height:40px;padding:9px}}

/* 이슈표 역할 칸 — 아이콘과 아래 글자를 칸 가운데로 맞춥니다 (넓은 화면). */
@media (min-width:761px){
  .sw-issues__role{text-align:center;padding-right:var(--space-24)}
  .sw-issues__icon{margin-left:auto;margin-right:auto}
}

/* 이슈표 — 역할 칸과 오른쪽 내용 사이 간격을 줄입니다 (넓은 화면). */
@media (min-width:761px){
  .sw-issues__role{width:76px;padding-right:var(--space-16)}
}

/* 이슈표 역할 아이콘 — 말풍선 (2026.10.15). 모양과 색은 SVG 안에 있으므로 배지 배경·둥근 모서리를 끕니다.
   사용자는 꼬리가 왼쪽, 관리자는 오른쪽을 향합니다. */
.sw-issues__icon,.sw-issues tr.is-first .sw-issues__icon,.sw-issues tr.is-second .sw-issues__icon{
  width:52px;height:52px;padding:0;border-radius:0;background:none;box-shadow:none;stroke:none}
.sw-issues__icon--user{filter:drop-shadow(0 4px 8px rgba(37,99,235,.25))}
.sw-issues__icon--admin{filter:drop-shadow(0 4px 8px rgba(109,40,217,.25))}
@media (max-width:760px){
  .sw-issues__icon,.sw-issues tr.is-first .sw-issues__icon,.sw-issues tr.is-second .sw-issues__icon{width:42px;height:42px}
}

/* 수치 밴드의 단위(년 · 년 연속 · 개 국사)는 흰색으로 둡니다.
   숫자는 stat-accent 그대로 두어 눈에 먼저 들어오고,
   단위는 on-dark 라 네이비 위에서 또렷하게 읽힙니다(세 칸 모두 같습니다). */
.sw-stat__unit{color:var(--on-dark)}

/* 행 hover 배경이 구분선 밖으로 나오지 않게 — 음수 여백 대신 안쪽 여백으로 잡습니다(뉴스 행과 같은 방식). */
.sw-product{margin:0;padding:32px 16px}
/* 링크가 아닌 행 — 마우스를 올려도 배경이 바뀌지 않습니다. */
.sw-product--static,.sw-product--static:hover{background:none;cursor:default}
.sw-product--static .sw-product__text{max-width:none}
.sw-nowrap{white-space:nowrap}
/* What We Do(링크 없는 행) — 설명 첫 줄(약 760px)이 한 줄에 들어가도록, 설명 칸이 좁아지는 1260px 미만에서는 이름 아래로 설명을 내립니다. */
.sw-br-fit{display:none}
@media (min-width:920px){.sw-br-fit{display:inline}}
@media (max-width:1259px){.sw-product--static{grid-template-columns:1fr;row-gap:12px}}

/* 사업분야 아이콘 (company/business.html) — 시스템에 아이콘 체계가 없어 새로 그렸습니다.
   선 1.5px 단색(ink), 채움·그림자·색 없음. 행 왼쪽 칸에서 번호 위에 둡니다. */
.sw-row__icon{display:block;width:44px;height:44px;margin-bottom:var(--space-20);color:var(--ink)}
.sw-row__icon svg{display:block}
.sw-row__icon circle{fill:var(--bg)}
.sw-row__icon circle.is-fill{fill:currentColor;stroke:none}
@media (max-width:760px){.sw-row__icon{width:36px;height:36px;margin-bottom:var(--space-16)}.sw-row__icon svg{width:36px;height:36px}}

/* 사업분야 카드 (company/business.html) — 시스템 규칙대로 그림자·둥근 모서리 없이
   1px line으로만 칸을 나눈 2열 격자입니다. 카드 머리(아이콘·번호·이름) 아래를 한 번 더 선으로 끊습니다. */
.sw-bizcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-56);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sw-bizcard{min-width:0;padding:var(--space-40) var(--space-36);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.sw-bizcard__head{padding-bottom:var(--space-24);margin-bottom:var(--space-24);border-bottom:1px solid var(--line)}
.sw-bizcard .sw-row__name{margin:0}
.sw-bizcard .sw-area{max-width:none}
@media (max-width:760px){
  .sw-bizcards{grid-template-columns:1fr;margin-top:var(--space-40)}
  .sw-bizcard{padding:var(--space-28) var(--space-20)}
}

/* 사업분야 카드 머리 배경 (company/business.html) — 분야별 "데이터 물결" SVG(면+선+입자, 은은히 흐름)를
   카드별 그라디언트 위에 깝니다. 글자가 놓이는 왼쪽은 navy-900 으로 짙게 두고
   오른쪽으로 갈수록 밝아집니다. 그래픽: assets/img/business/{ai,infrastructure,platform,consulting}.svg */
.sw-bizcard[data-art] .sw-bizcard__head{position:relative;isolation:isolate;overflow:hidden;
  margin:calc(-1 * var(--space-40)) calc(-1 * var(--space-36)) var(--space-24);
  padding:var(--space-40) var(--space-36) var(--space-28);border-bottom:0;background:var(--navy-900)}
.sw-bizcard[data-art] .sw-bizcard__head::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--art) right center/auto 100% no-repeat,var(--art-grad)}
/* 데이터 물결 — 면(반투명 물결)과 선(리본) 그래픽 뒤로, 카드마다 다른 짙은 색을 깝니다. 왼쪽 글자 자리는 navy-900. */
.sw-bizcard[data-art="ai"]{--art:url(../img/business/ai.svg);--art-grad:linear-gradient(100deg,var(--navy-900) 30%,#1c1a4a 70%,#2a2160 100%)}
.sw-bizcard[data-art="infrastructure"]{--art:url(../img/business/infrastructure.svg);--art-grad:linear-gradient(100deg,var(--navy-900) 30%,#0f2a4e 70%,#123c52 100%)}
.sw-bizcard[data-art="platform"]{--art:url(../img/business/platform.svg);--art-grad:linear-gradient(100deg,var(--navy-900) 30%,#18204e 70%,#24245e 100%)}
.sw-bizcard[data-art="consulting"]{--art:url(../img/business/consulting.svg);--art-grad:linear-gradient(100deg,var(--navy-900) 30%,#261c3c 70%,#36203f 100%)}
.sw-bizcard[data-art="security"]{--art:url(../img/business/security.svg);--art-grad:linear-gradient(100deg,var(--navy-900) 30%,#2a1a36 70%,#3a1c3a 100%)}
.sw-bizcard[data-art="application"]{--art:url(../img/business/application.svg);--art-grad:linear-gradient(100deg,var(--navy-900) 30%,#0f2a36 70%,#123c3a 100%)}
.sw-bizcard[data-art] .sw-row__icon{color:var(--on-dark)}
.sw-bizcard[data-art] .sw-row__icon circle{fill:var(--navy-900)}
.sw-bizcard[data-art] .sw-row__icon circle.is-fill{fill:currentColor}
.sw-bizcard[data-art] .sw-row__label{color:var(--on-dark-muted)}
.sw-bizcard[data-art] .sw-row__name{color:var(--on-dark)}
@media (max-width:760px){
  .sw-bizcard[data-art] .sw-bizcard__head::before{background:linear-gradient(to right,var(--navy-900) 30%,color-mix(in srgb,var(--navy-900) 0%,transparent) 80%),var(--art) right center/auto 100% no-repeat,var(--art-grad)}
  .sw-bizcard[data-art] .sw-bizcard__head{margin:calc(-1 * var(--space-28)) calc(-1 * var(--space-20)) var(--space-20);padding:var(--space-28) var(--space-20) var(--space-24)}
}

/* ── 키메시지 밴드 여백 ────────────────────────────────────
   위아래 여백을 이전의 절반으로 줄였습니다. (괄호 안은 이전 값)
   기본 3.75vw(7.5vw) · 좁은 화면 44px(88px) / 배경 그림 변형 3.5vw(7vw) · 좁은 화면 28px(56px). */
.sw-mission{padding:44px 0}
.sw-mission--art{padding:28px 0}
@media (min-width:640px){
  .sw-mission{padding:3.75vw 0}
  .sw-mission--art{padding:3.5vw 0}
}
/* 카드 머리를 높여 물결 그래픽을 넓게 보여줍니다. 아이콘은 위, 번호·이름은 아래에 붙입니다. */
.sw-bizcard[data-art] .sw-bizcard__head{display:flex;flex-direction:column;align-items:flex-start;min-height:250px}
.sw-bizcard[data-art] .sw-row__label{margin-top:auto}
@media (max-width:760px){.sw-bizcard[data-art] .sw-bizcard__head{min-height:200px}}

/* 사업분야 카드 — 경계 허물기. 카드 격자선을 없애고 여백으로만 띄웁니다.
   컬러 배경은 카드 머리 칸이 아니라 카드 자체에 깔고, 아래로 갈수록 투명해지게(mask) 해서
   항목 목록 쪽으로 자연스럽게 스며듭니다. 카드 바탕은 surface-subtle 로 덩어리만 살짝 드러냅니다. */
.sw-bizcards{border:0;gap:var(--space-24)}
.sw-bizcard{position:relative;isolation:isolate;overflow:hidden;border:0;background:var(--surface-subtle)}
.sw-bizcard[data-art] .sw-bizcard__head{overflow:visible;background:none;margin-bottom:var(--space-56)}
.sw-bizcard[data-art] .sw-bizcard__head::before{content:none}
.sw-bizcard[data-art]::before{content:"";position:absolute;left:0;right:0;top:0;height:380px;z-index:-1;pointer-events:none;
  background:var(--art) right top/auto 300px no-repeat,var(--art-grad);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 230px,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 230px,transparent 100%)}
@media (max-width:760px){
  .sw-bizcards{gap:var(--space-16)}
  .sw-bizcard[data-art] .sw-bizcard__head{margin-bottom:var(--space-40)}
  .sw-bizcard[data-art]::before{height:310px;
    background:linear-gradient(to right,var(--navy-900) 30%,color-mix(in srgb,var(--navy-900) 0%,transparent) 80%),var(--art) right top/auto 240px no-repeat,var(--art-grad);
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 185px,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0,#000 185px,transparent 100%)}
}
/* 번짐 보정 — 그래픽이 번짐 끝까지 이어지게 하고(가로 단면 없음), 목록은 색이 거의 빠진 뒤에 시작합니다. */
.sw-bizcard[data-art] .sw-bizcard__head{margin-bottom:88px}
.sw-bizcard[data-art]::before{height:350px;
  background:linear-gradient(to right,var(--navy-900) 18%,color-mix(in srgb,var(--navy-900) 0%,transparent) 52%),var(--art) right top/auto 350px no-repeat,var(--art-grad);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 210px,rgba(0,0,0,.55) 270px,transparent 345px);
          mask-image:linear-gradient(to bottom,#000 0,#000 210px,rgba(0,0,0,.55) 270px,transparent 345px)}
@media (max-width:760px){
  .sw-bizcard[data-art] .sw-bizcard__head{margin-bottom:72px}
  .sw-bizcard[data-art]::before{height:290px;background-size:auto,auto 290px,auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 165px,rgba(0,0,0,.55) 220px,transparent 285px);
            mask-image:linear-gradient(to bottom,#000 0,#000 165px,rgba(0,0,0,.55) 220px,transparent 285px)}
}
/* 비주얼 높이 축소 (2026-10-15) — 머리 칸 약 180px, 번짐 포함 약 270px. 애니메이션은 SVG에서 뺐습니다. */
.sw-bizcard[data-art] .sw-bizcard__head{min-height:180px;padding-top:var(--space-32,32px);margin-bottom:72px}
.sw-bizcard[data-art]::before{height:270px;background-size:auto,auto 270px,auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 165px,rgba(0,0,0,.5) 210px,transparent 265px);
          mask-image:linear-gradient(to bottom,#000 0,#000 165px,rgba(0,0,0,.5) 210px,transparent 265px)}
@media (max-width:760px){
  .sw-bizcard[data-art] .sw-bizcard__head{min-height:150px;margin-bottom:56px}
  .sw-bizcard[data-art]::before{height:220px;background-size:auto,auto 220px,auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 130px,rgba(0,0,0,.5) 170px,transparent 215px);
            mask-image:linear-gradient(to bottom,#000 0,#000 130px,rgba(0,0,0,.5) 170px,transparent 215px)}
}
/* 비주얼 높이 2차 축소 · 그래픽 톤다운(SVG 전체 opacity .5) — 머리 칸 약 145px, 번짐 포함 약 200px. */
.sw-bizcard[data-art] .sw-bizcard__head{min-height:0;padding-top:28px;padding-bottom:24px;margin-bottom:60px}
.sw-bizcard[data-art] .sw-row__icon,.sw-bizcard[data-art] .sw-row__icon svg{width:36px;height:36px}
.sw-bizcard[data-art] .sw-row__icon{margin-bottom:var(--space-16)}
.sw-bizcard[data-art]::before{height:205px;background-size:auto,auto 205px,auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 130px,rgba(0,0,0,.4) 165px,transparent 200px);
          mask-image:linear-gradient(to bottom,#000 0,#000 130px,rgba(0,0,0,.4) 165px,transparent 200px)}
@media (max-width:760px){
  .sw-bizcard[data-art] .sw-bizcard__head{min-height:0;padding-top:24px;padding-bottom:20px;margin-bottom:52px}
  .sw-bizcard[data-art] .sw-row__icon,.sw-bizcard[data-art] .sw-row__icon svg{width:32px;height:32px}
  .sw-bizcard[data-art] .sw-row__icon{margin-bottom:12px}
  .sw-bizcard[data-art]::before{height:190px;background-size:auto,auto 190px,auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 120px,rgba(0,0,0,.4) 150px,transparent 185px);
            mask-image:linear-gradient(to bottom,#000 0,#000 120px,rgba(0,0,0,.4) 150px,transparent 185px)}
}
/* 경계 번짐 제거 (2026-10-15) — 배경을 다시 머리 칸에만 깔고 아래 경계를 깔끔하게 끊습니다. */
.sw-bizcard[data-art]::before{content:none}
.sw-bizcard[data-art] .sw-bizcard__head{overflow:hidden;margin-bottom:var(--space-28)}
.sw-bizcard[data-art] .sw-bizcard__head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to right,var(--navy-900) 18%,color-mix(in srgb,var(--navy-900) 0%,transparent) 52%),var(--art) right center/auto 100% no-repeat,var(--art-grad)}
@media (max-width:760px){
  .sw-bizcard[data-art] .sw-bizcard__head{margin-bottom:var(--space-20)}
  .sw-bizcard[data-art] .sw-bizcard__head::before{
    background:linear-gradient(to right,var(--navy-900) 30%,color-mix(in srgb,var(--navy-900) 0%,transparent) 80%),var(--art) right center/auto 100% no-repeat,var(--art-grad)}
}
/* 아이콘을 분야명 오른쪽에 둡니다 — 번호(1행) 아래, 이름과 아이콘이 한 줄(2행). */
.sw-bizcard[data-art] .sw-bizcard__head{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:14px;row-gap:2px}
.sw-bizcard[data-art] .sw-row__label{grid-column:1;grid-row:1;margin-top:0}
.sw-bizcard[data-art] .sw-row__name{grid-column:1;grid-row:2}
.sw-bizcard[data-art] .sw-row__icon{grid-column:2;grid-row:2;margin:0;width:30px;height:30px}
.sw-bizcard[data-art] .sw-row__icon svg{width:30px;height:30px}
@media (max-width:760px){.sw-bizcard[data-art] .sw-row__icon,.sw-bizcard[data-art] .sw-row__icon svg{width:26px;height:26px}}

/* ── 실적 (company/business.html · Track Record) ───────────
   숫자 네 칸 + 분야별 행. 행은 이름 · 비율 막대 · 건수 · 대표 프로젝트.
   막대는 가장 많은 분야(보안 19건)를 100%로 둔 상대 길이이며, 색은 primary 한 가지입니다. */
.sw-track__stats{display:grid;grid-template-columns:repeat(4,1fr);margin:var(--space-56) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sw-track__stats>div{padding:var(--space-28) var(--space-24)}
.sw-track__stats>div+div{border-left:1px solid var(--line)}
.sw-track__stats>div:first-child{padding-left:0}
.sw-track__stats dt{color:var(--ink-subtle);text-transform:uppercase}
.sw-track__stats dd{margin:var(--space-8) 0 0;color:var(--ink-muted);font-size:18px;font-weight:600}
.sw-track__stats dd b{color:var(--ink);font-size:44px;line-height:1;font-weight:800;letter-spacing:-1px;margin-right:4px}
.sw-track__list{list-style:none;margin:var(--space-40) 0 0;padding:0}
.sw-track__row{display:grid;grid-template-columns:240px 1fr 72px;grid-template-areas:"name bar count" "name ex ex";column-gap:var(--space-24);row-gap:var(--space-8);align-items:center;padding:var(--space-24) 0;border-bottom:1px solid var(--line)}
.sw-track__name{grid-area:name;align-self:start;color:var(--ink)}
.sw-track__bar{grid-area:bar;display:block;height:6px;background:var(--surface-subtle)}
.sw-track__bar>span{display:block;height:100%;background:var(--primary)}
.sw-track__count{grid-area:count;text-align:right;color:var(--ink-muted);font-weight:600}
.sw-track__count b{color:var(--ink);font-size:22px;font-weight:800;margin-right:2px}
.sw-track__ex{grid-area:ex;color:var(--ink-muted)}
@media (max-width:760px){
  .sw-track__stats{grid-template-columns:repeat(2,1fr)}
  .sw-track__stats>div{padding:var(--space-20) var(--space-16)}
  .sw-track__stats>div:nth-child(odd){padding-left:0;border-left:0}
  .sw-track__stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .sw-track__stats dd b{font-size:34px}
  .sw-track__row{grid-template-columns:1fr 56px;grid-template-areas:"name count" "bar bar" "ex ex"}
}
.sw-track__stats dd{white-space:nowrap}
@media (max-width:760px){.sw-track__stats dd{font-size:15px}.sw-track__stats dd b{font-size:30px}}

/* Why Softworks (company/business.html, 클래스 sw-partner — 제품 페이지의 .sw-why 컴포넌트와 이름이 겹치지 않게) — 회사개요의 sw-fields(3열, 위 hairline)를 그대로 쓰고, 두 줄째 칸 사이만 띄웁니다. */
.sw-partner .sw-fields{row-gap:var(--space-56)}
@media (min-width:761px) and (max-width:1024px){.sw-partner .sw-fields{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.sw-partner .sw-fields{row-gap:var(--space-28)}}

/* ── Field Issues 이슈표 — 한 줄 배열 (2026.10.16)
   이슈 하나가 한 행: [이슈 | 사용자 | 관리자]. 사용자·관리자 칸 사이는 점선, 이슈 사이는 1px line.
   좁은 화면에서는 이슈 → 사용자 → 관리자 순으로 쌓습니다. */
.sw-issues--cols .sw-issues__issue{width:220px;padding:28px var(--space-24) 28px 0;border-bottom:1px solid var(--line)}
.sw-issues__cell{width:auto;padding:28px var(--space-28);border-bottom:1px solid var(--line);vertical-align:top}
.sw-issues__cell.is-admin{border-left:1px dashed var(--line);padding-right:0}
.sw-issues__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sw-issues--cols .sw-issues__icon{width:40px;height:40px;margin:0;flex:none}
.sw-issues__cell.is-user .sw-issues__rolename{color:#2563eb}
.sw-issues__cell.is-admin .sw-issues__rolename{color:#6d28d9}
.sw-issues--cols .sw-issues__d{max-width:none}
@media (max-width:1000px){.sw-issues--cols .sw-issues__issue{width:160px}.sw-issues__cell{padding:24px var(--space-20)}}
@media (max-width:760px){
  .sw-issues--cols .sw-issues__issue{padding:24px 0 4px;border-bottom:0}
  .sw-issues__cell{padding:16px 0;border-bottom:0}
  .sw-issues__cell.is-user{border-bottom:1px dashed var(--line)}
  .sw-issues__cell.is-admin{border-left:0;border-bottom:1px solid var(--line)}
  .sw-issues--cols .sw-issues__icon{width:36px;height:36px}
}
@media (max-width:760px){.sw-issues--cols .sw-issues__issue,.sw-issues--cols .sw-issues__cell{width:auto}}

/* ── 섹션 제목·서브카피와 콘텐츠 사이 간격 ──────────────────
   제목 묶음(.sw-section-intro) 바로 아래 콘텐츠의 위쪽 여백을 이전의 절반으로 줄였습니다.
   56px → 28px (대부분) · 40px → 20px (벤더 로고) · 28px → 14px (기둥형·도판 묶음) · 24px → 12px (지도).
   화면에 보이지 않는 요소(.sw-sr)가 사이에 끼어 있으면 그 다음 콘텐츠에 같은 값을 줍니다. */
main .sw-section-intro+*:not(.sw-sr),main .sw-section-intro+.sw-sr+*{margin-top:28px}
main .sw-section-intro+.sw-vendorlogo{margin-top:20px}
main .sw-section-intro+.sw-pillars,main .sw-section-intro+.sw-figs{margin-top:14px}
main .sw-section-intro+.sw-map{margin-top:12px}

/* 마무리 CTA 제목 한 줄 — 긴 문장을 넓은 화면에서 한 줄로 둡니다(OAP Security).
   46px로는 콘텐츠 폭보다 길어, 화면 폭에 맞춰 최대 42px까지 줄입니다. 좁은 화면에서는 줄바꿈합니다. */
@media (min-width:900px){
  .sw-cta__title--oneline{white-space:nowrap;font-size:min(42px,3.2vw);line-height:1.2;letter-spacing:-.02em}
}

/* 마무리 CTA 버튼 두 개 — 나란히 두고, 좁으면 다음 줄로 넘깁니다. */
.sw-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-16)}

/* 마무리 CTA 제목 위 부제 — 제목 바로 위에 붙도록 스택 간격을 줄입니다. */
.sw-cta__kicker{margin:0 0 calc(-1 * var(--space-12,12px));color:var(--primary);font:600 16px/24px var(--font-sans);letter-spacing:.02em}
@media (max-width:640px){.sw-cta__kicker{font-size:14px;line-height:21px}}

/* 부제와 제목 사이 간격을 더 줄입니다. */
.sw-cta__kicker{margin-bottom:-18px}

/* ── Service Architecture 도식 (products/genworks-oap.html) ─────────────
   원본 소개 페이지의 개념 아키텍처 SVG를 그대로 옮겼습니다(색·도형·화살표 유지).
   글꼴만 사이트 서체로 바꾸고, 좁은 화면에서는 도식이 너무 작아지지 않도록 가로로 스크롤합니다. */
.sw-arch{margin:var(--space-56) 0 0}
.sw-arch__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sw-arch__svg{display:block;width:100%;max-width:1000px;min-width:720px;height:auto;margin:0 auto;overflow:visible}
.sw-arch__svg text{font-family:var(--font-sans)}
.sw-arch + .sw-note{margin-top:var(--space-40)}

/* ── Key Capabilities 서비스 카드 · Human Review 흐름 (products/genworks-oap.html) ──
   원본 소개 페이지 KEY SERVICES & CAPABILITIES · HUMAN REVIEW의 카드 형식을 옮겼습니다.
   섹션 바탕은 다른 섹션과 같은 흰색이고, 카드는 테두리로 구분합니다. 색은 원본 값(#2f74b5 · #0c2340 · #e8f0f8)을 그대로 씁니다. */
.sw-svc{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:var(--space-56)}
.sw-svc__card{display:flex;flex-direction:column;gap:18px;padding:24px 24px 26px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(12,35,64,.04)}
.sw-svc__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;border-bottom:1px solid #eef1f5}
.sw-svc__kicker{margin:0;color:#3d5273;font:700 10px/1.4 var(--font-sans);letter-spacing:2px}
.sw-svc__name{margin:5px 0 0;color:#0c2340;font:800 22px/1.15 var(--font-sans);letter-spacing:-.4px}
.sw-svc__sub{margin:5px 0 0;color:#7b8794;font:400 13px/1.5 var(--font-sans)}
.sw-svc__icon{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:12px;background:#e9edf3}
.sw-svc__list{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.sw-svc__item{display:flex;gap:12px;align-items:flex-start}
.sw-svc__num{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;background:#e8f0f8;color:#2f74b5;font:800 11px/1 var(--font-sans);letter-spacing:.3px}
.sw-svc__itemname{margin:0;color:#0c2340;font:700 15px/1.4 var(--font-sans);letter-spacing:-.2px}
.sw-svc__tag{display:block;margin-top:2px;color:#2f74b5;font:600 13px/1.5 var(--font-sans)}
.sw-svc__desc{margin:3px 0 0;color:#586374;font:400 13.5px/1.65 var(--font-sans)}
.sw-svc__plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#f4f6f9}

.sw-hr{margin-top:var(--space-56);padding-top:var(--space-40);border-top:1px solid #e0e3e8}
.sw-hr__kicker{margin:0;color:#2f74b5;font:700 11px/1.4 var(--font-sans);letter-spacing:2.4px}
.sw-hr__kicker span{margin:0 4px;color:#b8c4d3}
.sw-hr__title{margin:10px 0 0;color:#0c2340;font:800 24px/1.35 var(--font-sans);letter-spacing:-.5px}
.sw-hr__sub{margin:6px 0 0;color:#586374;font:500 15px/1.5 var(--font-sans)}
.sw-flow{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;gap:12px;align-items:stretch;margin:28px 0 0;padding:0;list-style:none}
.sw-flow__card{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(12,35,64,.04)}
.sw-flow__head{display:flex;align-items:center;gap:10px}
.sw-flow__num{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:7px;background:#0c2340;color:#fff;font:800 11px/1 var(--font-sans);letter-spacing:.5px}
.sw-flow__name{margin:0;color:#0c2340;font:800 17px/1.2 var(--font-sans);letter-spacing:-.3px}
.sw-flow__tag{margin:0;color:#2f74b5;font:700 13px/1.5 var(--font-sans)}
.sw-flow__desc{margin:0;color:#586374;font:400 13.5px/1.7 var(--font-sans)}
.sw-flow__arrow{display:flex;align-items:center;justify-content:center}
@media (max-width:860px){
  .sw-svc{grid-template-columns:1fr;gap:40px}
  .sw-flow{grid-template-columns:1fr}
  .sw-flow__arrow svg{transform:rotate(90deg)}
}
@media (max-width:640px){.sw-hr__title{font-size:20px}}
.sw-svc__desc,.sw-flow__desc,.sw-hr__title{word-break:keep-all}
@media (max-width:860px){
  .sw-svc{gap:12px}
  .sw-svc__plus{position:static;transform:none;justify-self:center;background:transparent}
}
.sw-svc__card,.sw-flow__card{border:1px solid var(--line);box-shadow:none}
.sw-svc__plus{background:var(--bg);border:1px solid var(--line)}
@media (max-width:860px){.sw-svc__plus{border:0}}

/* ── Why OAP Security: 영역별 카드 (업무 효율화 3 · 위험 판단 2 · AI Assistant 1) ──
   데스크톱 3열 격자: 1행은 업무 효율화 3장, 2행은 위험 판단 2장 + AI Assistant 1장 */
.sw-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:56px;margin-top:var(--space-56)}
.sw-why__group{display:flex;flex-direction:column;gap:20px;min-width:0}
.sw-why__group--3{grid-column:span 3}.sw-why__group--2{grid-column:span 2}.sw-why__group--1{grid-column:span 1}
.sw-why__ghead{padding-top:14px;border-top:2px solid var(--primary)}
.sw-why__kicker{margin:0;color:var(--primary);font:700 11px/1.4 var(--font-sans);letter-spacing:2px;text-transform:uppercase}
.sw-why__kicker span{margin:0 4px;color:#b8c4d3}
.sw-why__gdesc{margin:6px 0 0;color:var(--text-strong,#0c2340);font:700 18px/1.4 var(--font-sans);letter-spacing:-.3px;word-break:keep-all}
.sw-why__cards{display:grid;gap:24px;margin:0;padding:0;list-style:none;flex:1}
.sw-why__group--3 .sw-why__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.sw-why__group--2 .sw-why__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.sw-why__card{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;border:1px solid var(--line);border-radius:16px;background:var(--bg,#fff)}
.sw-why__label{margin:0;color:var(--primary);font:700 13px/1.4 var(--font-sans);letter-spacing:-.1px}
.sw-why__head{margin:0;color:#0c2340;font:700 18px/1.45 var(--font-sans);letter-spacing:-.4px;word-break:keep-all}
.sw-why__text{margin:0;color:#586374;font:400 14px/1.7 var(--font-sans);word-break:keep-all}
.sw-why + .sw-note{margin-top:var(--space-40)}
@media (max-width:1024px){
  .sw-why{grid-template-columns:1fr}
  .sw-why__group--3,.sw-why__group--2,.sw-why__group--1{grid-column:auto}
  .sw-why__cards{gap:16px}
  .sw-why__card{padding:20px 20px 22px}
}
@media (max-width:760px){.sw-why__group--3 .sw-why__cards{grid-template-columns:1fr}}
@media (max-width:640px){
  .sw-why__group--3 .sw-why__cards,.sw-why__group--2 .sw-why__cards{grid-template-columns:1fr}
  .sw-why__cards{gap:12px}
}

/* OAP Security 히어로 서브 카피: 첫 문장을 한 줄로 (1080px 이상) */
@media (min-width:1080px){.sw-hero--detail .sw-hero__lead--wide{max-width:none}.sw-hero__lead--wide .sw-br-wide{display:inline}}
@media (max-width:1079px){.sw-hero__lead--wide .sw-br-wide{display:none}}

/* ── 키메시지 글자 크기 ────────────────────────────────────
   키메시지 문장을 20% 줄였습니다. 줄 간격·자간도 같은 비율로 줄입니다. (괄호 안은 이전 값)
   넓은 화면 36.8px / 47.1px (46px / 58.88px) · 좁은 화면 22.4px / 28.8px (28px / 36px). */
.sw-mission__text{font-size:36.8px;line-height:47.1px;letter-spacing:-.74px}
@media (max-width:640px){.sw-mission__text{font-size:22.4px;line-height:28.8px;letter-spacing:-.45px}}

/* 히어로 속 브레드크럼 위치 — 히어로 높이와 eyebrow·제목 위치는 그대로 두고, 브레드크럼 위 여백만 30% 줄입니다.
   위로 올린 만큼 아래 간격에 더합니다. 히어로 위 여백: 넓은 화면 6.5vh(→ 4.55vh), 좁은 화면 64px(→ 44.8px). */
.sw-hero .sw-crumbs{margin-top:-19.2px;margin-bottom:calc(28px + 19.2px)}
@media (min-width:640px){.sw-hero .sw-crumbs{margin-top:-1.95vh;margin-bottom:calc(28px + 1.95vh)}}

/* 헤더의 도입 문의 버튼 — 안쪽 여백을 줄였습니다. (괄호 안은 이전 값)
   위아래 8px(13px) · 좌우 18px(26px) · 최소 높이 37px(47px). 본문 버튼은 그대로입니다. */
.sw-header__actions .sw-btn{min-height:37px;padding:8px 18px}

/* ── 모바일 메뉴 버튼 ──────────────────────────────────────
   글자 대신 삼선 마크로 보이고, 메뉴가 열리면 X 로 바뀝니다. 버튼 이름(메뉴 열기/메뉴 닫기)은 aria-label 로 읽힙니다. */
.sw-navtoggle{width:40px;height:40px;padding:0;border:0;justify-content:center;color:var(--ink)}
.sw-navtoggle:hover{background:var(--surface-subtle)}
.sw-navtoggle__icon,.sw-navtoggle__icon::before,.sw-navtoggle__icon::after{display:block;width:20px;height:2px;border-radius:1px;background:currentColor;transition:transform .2s ease,background-color .2s ease}
.sw-navtoggle__icon{position:relative}
.sw-navtoggle__icon::before,.sw-navtoggle__icon::after{content:"";position:absolute;left:0}
.sw-navtoggle__icon::before{top:-6px}
.sw-navtoggle__icon::after{top:6px}
.sw-navtoggle[aria-expanded="true"] .sw-navtoggle__icon{background:transparent}
.sw-navtoggle[aria-expanded="true"] .sw-navtoggle__icon::before{transform:translateY(6px) rotate(45deg)}
.sw-navtoggle[aria-expanded="true"] .sw-navtoggle__icon::after{transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.sw-navtoggle__icon,.sw-navtoggle__icon::before,.sw-navtoggle__icon::after{transition:none}}
/* 아이콘을 분야명 앞으로 — 번호(1행, 왼쪽 정렬) 아래, 아이콘 · 이름이 한 줄(2행). */
.sw-bizcard[data-art] .sw-bizcard__head{grid-template-columns:auto 1fr}
.sw-bizcard[data-art] .sw-row__label{grid-column:1 / -1;grid-row:1}
.sw-bizcard[data-art] .sw-row__icon{grid-column:1;grid-row:2}
.sw-bizcard[data-art] .sw-row__name{grid-column:2;grid-row:2}
/* 아이콘–분야명 간격 20% 축소 (14px → 11px) */
.sw-bizcard[data-art] .sw-bizcard__head{column-gap:11px}

/* 사업분야 카드 항목 롤오버 반전 — 마우스를 올리면 바탕 navy-900, 이름 on-dark, 부제 on-dark-muted.
   반전 칸이 글자에 붙지 않도록 항목에 좌우 여백을 주고 목록을 그만큼 바깥으로 넓힙니다. */
.sw-bizcard .sw-area{margin:-14px -16px}
.sw-bizcard .sw-area li,
.sw-bizcard .sw-area li:first-child,
.sw-bizcard .sw-area li:last-child{padding:14px 16px;transition:background-color .15s ease}
.sw-bizcard .sw-area__name,.sw-bizcard .sw-area__sub{transition:color .15s ease}
.sw-bizcard .sw-area li:hover{background:var(--navy-900)}
.sw-bizcard .sw-area li:hover .sw-area__name{color:var(--on-dark)}
.sw-bizcard .sw-area li:hover .sw-area__sub{color:var(--on-dark-muted)}
.sw-bizcard .sw-area li:hover+li{border-top-color:transparent}
@media (prefers-reduced-motion:reduce){.sw-bizcard .sw-area li,.sw-bizcard .sw-area__name,.sw-bizcard .sw-area__sub{transition:none}}
/* 롤오버를 바탕 반전 대신 글자색 반전으로 — 바탕은 그대로, 이름·부제만 primary 로 바뀝니다. */
.sw-bizcard .sw-area li:hover{background:none}
.sw-bizcard .sw-area li:hover+li{border-top-color:var(--line)}
.sw-bizcard .sw-area li:hover .sw-area__name,
.sw-bizcard .sw-area li:hover .sw-area__sub{color:var(--primary)}
/* 실적 숫자 강조 — 큰 숫자만 primary 로 */
.sw-track__stats dd b{color:var(--primary)}
@media (max-width:760px){.sw-track__stats{grid-template-columns:repeat(2,minmax(0,1fr))}.sw-track__stats dd b{font-size:26px}}
.sw-track__stats dd b.sw-track__to{margin-left:4px}
/* 실적 막대 — 랜딩 수치 밴드 숫자(15 등)와 같은 stat-accent */
.sw-track__bar>span{background:var(--stat-accent)}
/* 실적 막대를 점유율 게이지로 — 트랙 전체가 100%, 채움은 전체 50건 중 비율. 오른쪽 숫자는 % 입니다. */
.sw-track__bar{height:10px;background:#e9eef4}
.sw-track__bar>span{height:100%}
/* 실적 게이지 색 — 분야마다 다른 그라디언트. 사업분야 카드 그래픽과 같은 색 계열을 씁니다. */
.sw-track__row:nth-child(1) .sw-track__bar>span{background:linear-gradient(90deg,#8b5cf6,#ec4899)}
.sw-track__row:nth-child(2) .sw-track__bar>span{background:linear-gradient(90deg,#2563eb,#06b6d4)}
.sw-track__row:nth-child(3) .sw-track__bar>span{background:linear-gradient(90deg,#6366f1,#0ea5e9)}
.sw-track__row:nth-child(4) .sw-track__bar>span{background:linear-gradient(90deg,#17aedd,#34d399)}
.sw-track__row:nth-child(5) .sw-track__bar>span{background:linear-gradient(90deg,#f97316,#facc15)}

/* ── 실적 흐름 차트 (company/business.html · Track Record, 클래스 sw-bizflow — 제품 페이지의 .sw-flow 와 겹치지 않게) ──
   다섯 분야를 한 줄에 세우고 각 칸을 세로 0~100% 게이지로 채웁니다. 꼭대기 노드를 그라디언트 곡선으로 이어 흐름을 만듭니다.
   좌표: 칸 i 의 가로 중심 = (i+.5)×20%, 노드 높이 = 비율(--p). SVG 곡선도 같은 좌표(0~1000 × 0~1000)로 그립니다. */
.sw-bizflow{margin-top:var(--space-56);padding-left:48px}
.sw-bizflow__chart{position:relative;height:300px}
.sw-bizflow__axis{position:absolute;inset:0;pointer-events:none}
.sw-bizflow__axis span{position:absolute;left:-48px;right:0;bottom:var(--t);transform:translateY(50%);display:flex;align-items:center;gap:10px;color:var(--ink-subtle);font:600 11px/1 var(--font-sans)}
.sw-bizflow__axis span::after{content:"";flex:1;border-top:1px dashed var(--line)}
.sw-bizflow__axis span:first-child::after{border-top-style:solid}
.sw-bizflow__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sw-bizflow__col{position:absolute;top:0;bottom:0;left:calc(var(--i) * 20%);width:20%}
.sw-bizflow__bar{position:absolute;left:50%;bottom:0;width:14px;height:100%;transform:translateX(-50%);background:#eef2f7}
.sw-bizflow__bar>span{position:absolute;left:0;right:0;bottom:0;height:var(--p);background:linear-gradient(to top,var(--c1),var(--c2))}
.sw-bizflow__node{position:absolute;left:50%;bottom:var(--p);transform:translate(-50%,50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:4px solid var(--bg);background:var(--c2);color:#fff;font:800 13px/1 var(--font-sans)}
.sw-bizflow__pct{position:absolute;left:50%;bottom:calc(var(--p) + 30px);transform:translateX(-50%);white-space:nowrap;color:var(--ink-muted);font:700 14px/1 var(--font-sans)}
.sw-bizflow__pct b{color:var(--c2);font-size:28px;font-weight:800;letter-spacing:-.5px;margin-right:1px;filter:saturate(1.1) brightness(.92)}
.sw-bizflow__labels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--space-16);margin:var(--space-28) 0 0;padding:0 0 0 48px;list-style:none}
.sw-bizflow__labels li{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:var(--space-16);border-top:3px solid var(--c2);text-align:center}
.sw-bizflow__name{color:var(--ink)}
.sw-bizflow__ex{color:var(--ink-subtle);word-break:keep-all}
@media (max-width:760px){
  .sw-bizflow{padding-left:32px}
  .sw-bizflow__chart{height:220px}
  .sw-bizflow__axis span{left:-32px;font-size:10px;gap:6px}
  .sw-bizflow__bar{width:10px}
  .sw-bizflow__node{width:30px;height:30px;border-width:3px;font-size:11px}
  .sw-bizflow__pct{bottom:calc(var(--p) + 22px);font-size:11px}
  .sw-bizflow__pct b{font-size:18px}
  .sw-bizflow__labels{padding-left:32px;gap:0 6px}
  .sw-bizflow__labels li{gap:0;padding-top:10px}
  .sw-bizflow__name{font-size:12px;line-height:1.35}
  .sw-bizflow__ex{display:none}
}
/* 축을 최대값(40%)에서 자르고 회색 기둥은 없앱니다 — 막대는 실제 값만큼만 보입니다. 위쪽 노드·수치가 잘리지 않게 위 여백을 둡니다. */
.sw-bizflow__chart{height:240px;margin-top:56px}
.sw-bizflow__bar{background:none}
@media (max-width:760px){.sw-bizflow__chart{height:180px;margin-top:44px}}
/* 요약 숫자 칸과 그래프 사이 간격 확대 (56px → 104px, 모바일 72px) */
.sw-bizflow{margin-top:104px}
@media (max-width:760px){.sw-bizflow{margin-top:72px}}

/* Why Softworks 01~06 롤오버 — 사업분야 카드와 같은 글자색 반전. 번호·제목·설명과 위 구분선이 primary 로 바뀝니다. */
.sw-partner .sw-fields li{transition:border-color .15s ease}
.sw-partner .sw-fields li>*{transition:color .15s ease}
.sw-partner .sw-fields li:hover{border-top-color:var(--primary)}
.sw-partner .sw-fields li:hover .sw-fields__cat,
.sw-partner .sw-fields li:hover .sw-fields__name,
.sw-partner .sw-fields li:hover .sw-fields__text{color:var(--primary)}
@media (prefers-reduced-motion:reduce){.sw-partner .sw-fields li,.sw-partner .sw-fields li>*{transition:none}}
/* Why Softworks 롤오버 — 제목만 primary. 번호·설명·구분선은 그대로 둡니다. */
.sw-partner .sw-fields li:hover{border-top-color:var(--line)}
.sw-partner .sw-fields li:hover .sw-fields__cat{color:var(--ink-subtle)}
.sw-partner .sw-fields li:hover .sw-fields__text{color:var(--ink-muted)}

/* 하위 메뉴가 있는 대메뉴(제품·회사소개·고객지원)는 링크가 아닌 버튼입니다. 링크와 똑같이 보이도록 버튼 기본 모양을 지웁니다. */
button.sw-navlink{border:0;background:none;font-family:var(--font-sans);cursor:pointer}

/* 헤더 로고 — 20% 키웠습니다. 116 × 20px → 139 × 24px. 푸터 등 다른 곳의 로고는 그대로입니다. */
.sw-header__logo .sw-logo{width:139px;height:24px}

/* 대메뉴 반전 시 굵게 — primary 바탕·흰 글자로 반전될 때 글자를 700 으로 굵게 합니다.
   굵어져도 폭이 바뀌지 않도록, 굵은 글자 폭(data-label)을 보이지 않게 미리 잡아 둡니다. */
.sw-navlink[data-label]{display:inline-grid;text-align:center}
.sw-navlink[data-label]::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none;user-select:none}
.sw-navlink:hover,.sw-navlink[aria-expanded="true"]{font-weight:700}

/* 대메뉴 롤오버 — 바탕은 칠하지 않고 글자만 primary 로 바꿉니다(굵게 700 유지). 하위 메뉴가 열려 있는 동안도 같습니다.
   현재 섹션 표시(is-active)의 연회색 바탕은 그대로 둡니다. */
.sw-navlink:hover,.sw-navlink[aria-expanded="true"]{color:var(--primary);background:none}
.sw-navlink.is-active,.sw-navlink.is-active:hover,.sw-navlink.is-active[aria-expanded="true"]{background:var(--surface-subtle)}
.sw-navlink:focus-visible{outline-offset:0}

/* 대메뉴 세로 정렬 — 로고는 심볼이 위로 솟아 있어 글자(SOFTWORKS)가 상자 아래쪽에 놓입니다.
   상자 중앙끼리 맞추면 메뉴 글자가 로고 글자보다 약 4px 높아 보이므로, 메뉴를 4px 내려 로고 글자와 같은 높이로 맞춥니다. */
@media (min-width:761px){.sw-header__nav{position:relative;top:4px}}

/* 하위 메뉴(2depth) 롤오버 — 글자를 primary 로 바꾸면서 연회색(surface-subtle) 바탕을 깝니다. 모바일 메뉴도 같습니다. */
.sw-menu__link:hover,.sw-mlink:hover{background:var(--surface-subtle)}

/* 하위 메뉴(2depth) 롤오버 — 바탕을 primary 로 깔고, 글자는 읽히도록 흰색(영문 보조 줄은 흰색 80%)으로 바꿉니다. 모바일 메뉴도 같습니다. */
.sw-menu__link:hover,.sw-mlink:hover{background:var(--primary)}
.sw-menu__link:hover .sw-menu__label,.sw-mlink:hover .sw-menu__label{color:var(--on-primary)}
.sw-menu__link:hover .sw-menu__sub,.sw-mlink:hover .sw-menu__sub{color:rgba(255,255,255,.8)}

/* 제품 하위 메뉴 구분자(01 AI · 02 INFRASTRUCTURE) — 아래 분류명(11px 회색)보다 확실히 위 단계로 읽히도록 키우고 진하게 합니다.
   11.5px · 600 · ink-subtle → 14px · 800 · ink. 모바일 메뉴의 같은 구분자도 맞춥니다. */
.sw-menu__group,.sw-mgroup{color:var(--ink);font-size:14px;line-height:20px;font-weight:800;letter-spacing:.42px}

/* 대메뉴와 하위 메뉴 사이 여백 — 50% 줄였습니다. 펼침 메뉴 위 여백 40px → 20px, 모바일 메뉴 첫 구분자 위 24px → 12px. */
.sw-menu__cols{padding-top:20px}
.sw-mpanel>.sw-mgroup:first-child{margin-top:12px}

/* 하위 메뉴 닫기(X) — 펼침 메뉴 오른쪽 위, 본문 컨테이너 오른쪽 끝에 맞춥니다. 모바일 메뉴 버튼의 X 와 같은 선 굵기입니다. */
.sw-menu__close{position:absolute;top:12px;right:max(5vw,calc((100% - var(--container-max)) / 2 + 5vw));z-index:2;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-pill);background:none;color:var(--ink-muted);cursor:pointer;transition:color .15s,background-color .15s}
.sw-menu__close:hover{color:var(--primary);background:var(--surface-subtle)}
.sw-menu__close:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-menu__close-icon{position:relative;display:block;width:16px;height:16px}
.sw-menu__close-icon::before,.sw-menu__close-icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;border-radius:1px;background:currentColor}
.sw-menu__close-icon::before{transform:rotate(45deg)}
.sw-menu__close-icon::after{transform:rotate(-45deg)}
/* 하위 메뉴 닫기(X) — 오른쪽 아래로 옮깁니다. */
.sw-menu__close{top:auto;bottom:12px}

/* 상단 대메뉴 글자 — 가독성을 위해 1px 키웠습니다. 14px/21px → 15px/22px (본문과 같은 크기). */
.sw-header__nav .sw-navlink{font-size:15px;line-height:22px}

/* ── 히어로 메인 카피 크기 ─────────────────────────────────
   20% 줄였습니다. 줄 간격·자간도 같은 비율. (괄호 안은 이전 값)
   랜딩 54.4px(68px) · 좁은 화면 32px(40px) / 하위 페이지 36.8px(46px) · 좁은 화면 24px(30px). */
.sw-hero__title{font-size:54.4px;line-height:58.75px;letter-spacing:-1.09px}
.sw-hero--detail .sw-hero__title{font-size:36.8px;line-height:41.2px;letter-spacing:-.74px}
@media (max-width:640px){
  .sw-hero__title{font-size:32px;line-height:35.84px;letter-spacing:-.64px}
  .sw-hero--detail .sw-hero__title{font-size:24px;line-height:30.4px;letter-spacing:-.48px}
}

/* 현재 섹션 대메뉴(is-active) — 연회색 바탕 대신 글자만 primary 로 표시합니다. 롤오버·하위 메뉴 열림 상태도 바탕 없이 같습니다. */
.sw-navlink.is-active,.sw-navlink.is-active:hover,.sw-navlink.is-active[aria-expanded="true"]{color:var(--primary);background:none}

/* 랜딩 히어로 메인 카피 — 하위 페이지와 같은 크기로 맞춥니다. 54.4px → 36.8px, 좁은 화면 32px → 24px. */
.sw-hero__title{font-size:36.8px;line-height:41.2px;letter-spacing:-.74px}
@media (max-width:640px){.sw-hero__title{font-size:24px;line-height:30.4px;letter-spacing:-.48px}}

/* 랜딩 히어로 메인 카피 — 하위 페이지 메인 카피와 같은 크기로 맞춥니다. 36.8px / 41.2px (좁은 화면 24px / 30.4px). */
.sw-hero__title{font-size:36.8px;line-height:41.2px;letter-spacing:-.74px}
@media (max-width:640px){.sw-hero__title{font-size:24px;line-height:30.4px;letter-spacing:-.48px}}

/* 히어로 메인 카피 통일 — 랜딩과 하위 페이지를 같은 크기로 맞춥니다(두 크기의 중간).
   넓은 화면 45.6px / 50.2px (랜딩 54.4px · 하위 36.8px 의 중간) · 좁은 화면 28px / 33.6px (32px · 24px 의 중간). */
.sw-hero__title,.sw-hero--detail .sw-hero__title{font-size:45.6px;line-height:50.2px;letter-spacing:-.91px}
@media (max-width:640px){
  .sw-hero__title,.sw-hero--detail .sw-hero__title{font-size:28px;line-height:33.6px;letter-spacing:-.56px}
}

/* 히어로 서브 카피 굵기 — 어두운 바탕에서 Light(300)는 획이 가늘게 번져 보여 Regular(400)로 올렸습니다. 크기·색은 그대로입니다. */
.sw-hero__lead{font-weight:400}
/* 히어로 서브 카피 색 — 굵기를 올리며 밝게 튀어 보여 한 톤 낮췄습니다. #b8c8e8 → #a3b4d6 (네이비 위 대비 약 7.6:1). */
.sw-hero__lead{color:#a3b4d6}

/* ── 본문 섹션 여백 2차 ────────────────────────────────────
   구분선 위아래 여백을 40% 더 줄였습니다. (괄호 안은 이전 값)
   일반 섹션 2.4vw(4vw) · 좁은 화면 38px(64px) / 제품 목록·마무리 CTA·흰 바탕 목록 페이지 3.6vw(6vw) · 좁은 화면 43px(72px). */
.sw-section{padding:38px 0}
.sw-products,.sw-cta,.sw-page{padding:43px 0}
@media (min-width:640px){
  .sw-section{padding:2.4vw 0}
  .sw-products,.sw-cta,.sw-page{padding:3.6vw 0}
}

/* GenWorks 수치 밴드(3일 · 80% · 50%) 위아래 여백 30% 축소 — products/genworks-rp.html 전용
   데스크톱 56px → 39px · 모바일 칸 40px → 28px, 밴드 아래 56px → 39px */
.sw-stats--compact .sw-stat{padding-top:39px;padding-bottom:39px}
@media (max-width:760px){
  .sw-stats--compact .sw-stat,.sw-stats--compact .sw-stat:first-child,.sw-stats--compact .sw-stat:last-child{padding-top:28px;padding-bottom:28px}
  .sw-stats--compact .sw-stats__grid{padding-bottom:39px}
}
/* 인증 격자 — 칸 테두리 없이 마크와 이름만 둡니다. 칸 여백 대신 칸 사이 간격으로 나눕니다. */
.sw-names.sw-certs{border:0;gap:40px 24px;grid-template-columns:repeat(4,minmax(0,1fr))}
.sw-names.sw-certs li{padding:0;border:0}
@media (max-width:760px){.sw-names.sw-certs{gap:28px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}.sw-names.sw-certs li{padding:0}}
/* 고객사·파트너사 로고 행 — 위아래 여백을 줄입니다(행 152px → 약 88px). */
.sw-row.sw-row--logos{padding:16px 0}
.sw-row--logos .sw-logos__item{height:56px}
@media (max-width:760px){.sw-row--logos .sw-logos__item{height:48px}}
/* 클라이언트&파트너 — 고객사와 파트너사 사이 선만 남깁니다. */
#clients .sw-rows{border-top:0}
#clients .sw-rows>.sw-row:last-child{border-bottom:0}
/* 로고 띠가 시작(흐려지는) 지점을 고객사·파트너사 이름 쪽으로 당깁니다 — 이름 칸 280px → 140px. */
@media (min-width:761px){.sw-row.sw-row--logos{grid-template-columns:140px minmax(0,1fr);column-gap:24px}}
/* 오시는 길 — 주소·대표 연락처·지하철·버스 행의 위아래 여백을 줄입니다(32px → 18px). */
#location .sw-rows>.sw-row{padding:18px 0}
/* 오시는 길 — 맨 위·맨 아래 선은 없애고 행 사이 선만 남깁니다. */
#location .sw-rows{border-top:0}
#location .sw-rows>.sw-row:last-child{border-bottom:0}
/* 인정받은 기록 — 맨 위·맨 아래 선은 없애고 연혁과 인증 사이 선만 남깁니다. */
#recognition .sw-rows{border-top:0}
#recognition .sw-rows>.sw-row:last-child{border-bottom:0}
/* What We Do — 맨 위·맨 아래 선은 없애고 행 사이 선만 남깁니다. */
#overview .sw-products__list{border-top:0}
#overview .sw-products__list>.sw-product:last-child{border-bottom:0}
/* 행 목록 공통 — 맨 위·맨 아래 선은 없애고 행 사이 선만 남깁니다(전 페이지).
   대상: 행 목록, 제품 목록, 뉴스 목록·펼침형, 채용 공고, FAQ, 구성 요소 목록. 표·카드·문의 양식은 제외합니다. */
.sw-rows,.sw-products__list,.sw-newslist,.sw-newsacc,.sw-jobs,.sw-faq,.sw-comps{border-top:0}
.sw-rows>:last-child,.sw-products__list>:last-child,.sw-newslist>:last-child,.sw-newsacc>:last-child,.sw-jobs>:last-child,.sw-faq>:last-child,.sw-comps>:last-child{border-bottom:0}

/* 섹션 여백 통일 — 랜딩의 제품 목록·마무리 CTA, 흰 바탕 목록 페이지도 일반 본문 섹션과 같은 여백을 씁니다.
   3.6vw(1280px 에서 46px) → 2.4vw(31px) · 좁은 화면 43px → 38px. */
.sw-products,.sw-cta,.sw-page{padding:38px 0}
@media (min-width:640px){.sw-products,.sw-cta,.sw-page{padding:2.4vw 0}}

/* 마무리 CTA 아래 여백 — 도입 문의 버튼과 푸터 사이를 조금 더 띄웁니다. 2.4vw(1280px 에서 31px) → 4vw(51px) · 좁은 화면 38px → 56px. */
.sw-cta{padding-bottom:56px}
@media (min-width:640px){.sw-cta{padding-bottom:4vw}}

/* 제품 행에 마우스를 올리면 행 전체가 주컬러(primary)로 뒤집힙니다.
   흰 글자가 primary 위에서 4.67:1 이라 본문 기준(4.5:1)을 넘깁니다. */
.sw-product:hover{background:var(--primary)}
.sw-product:hover .sw-product__name,
.sw-product:hover .sw-product__cat,
.sw-product:hover .sw-product__text{color:var(--on-primary)}
.sw-product__name,.sw-product__cat,.sw-product__text{transition:color .15s ease}

/* 카드 머리 — 번호와 아이소메트릭 블록을 한 줄 양 끝에 둡니다(칸 높이는 그대로).
   블록은 평평한 면으로만 그리고, 색은 그 칸의 띠 색에서 밝기만 바꿔 뽑았습니다. */
/* 아이콘은 제목과 한 줄에 둡니다. 제목이 길어 4열에서는 칸을 넘기므로 2열로 놓습니다. */
.sw-card__name{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:16px;line-height:20px}
.sw-iso{flex:none;width:22px;height:22px;filter:saturate(1.55)}

/* 블록의 세 면은 그 칸의 띠 색에서 밝기만 바꿔 뽑습니다.
   04 의 띠 색(#020818)은 거의 검정이라 톤이 나오지 않아 navy-900 을 바탕으로 씁니다. */
.sw-card{--iso-base:var(--card-bar)}
.sw-card:nth-child(3){--iso-base:color-mix(in srgb,var(--card-bar) 55%,var(--primary))}
.sw-card:nth-child(4){--iso-base:color-mix(in srgb,var(--navy-900) 48%,var(--primary))}
.sw-iso{--iso-top:color-mix(in srgb,var(--iso-base) 42%,#fff);
        --iso-left:var(--iso-base);
        --iso-right:color-mix(in srgb,var(--iso-base) 66%,#000)}
/* 칸이 띠 색으로 뒤집히면 블록도 함께 뒤집어, 배경에 묻히지 않게 합니다. */
.sw-card:hover .sw-iso{--iso-top:var(--on-dark);
        --iso-left:color-mix(in srgb,var(--on-dark) 72%,transparent);
        --iso-right:color-mix(in srgb,var(--on-dark) 46%,transparent)}
.sw-card:nth-child(1):hover .sw-iso{--iso-top:var(--ink);
        --iso-left:color-mix(in srgb,var(--ink) 72%,transparent);
        --iso-right:color-mix(in srgb,var(--ink) 46%,transparent)}

/* ══ 인터랙션 다듬기 (Emil Kowalski 디자인 엔지니어링 원칙) ═══════════════════
   보이지 않는 디테일을 맞춥니다. 색 롤오버(0.15s ease)는 그대로 두고, 아래만 손봅니다.
   1) 이징 토큰 — 기본 ease 대신 힘 있는 곡선. 들어오고 나가는 것은 ease-out, 화면 위 모양 변화는 ease-in-out.
   2) 누름 반응 — 누를 수 있는 것은 :active 에서 scale(0.97). 화면이 입력을 들었다는 즉각적 확인입니다.
   3) 하위 메뉴 등장 — 갑자기 나타나지 않도록 160ms 동안 위에서 4px 내려오며 나타납니다(닫힐 때는 즉시).
      자주 여는 메뉴라 짧고 작게 둡니다. @starting-style 을 지원하지 않는 브라우저는 지금처럼 즉시 열립니다.
   4) 터치 기기 — 탭하면 :hover 가 붙어 남는 문제를 막습니다(모바일 메뉴 항목의 파란 바탕이 남지 않게).
   5) 동작 줄이기 설정을 켠 사용자는 위치 이동 없이 바로 보입니다(기존 전역 규칙 유지). */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* 2) 누름 반응 */
.sw-btn,.sw-navtoggle,.sw-menu__close,.sw-tab,.sw-pager__link,.sw-header__nav button.sw-navlink{-webkit-tap-highlight-color:transparent}
.sw-btn{transition:filter .15s ease,background-color .15s ease,transform 160ms var(--ease-out)}
.sw-navtoggle,.sw-menu__close{transition:color .15s ease,background-color .15s ease,transform 160ms var(--ease-out)}
.sw-tab,.sw-pager__link{transition:color .15s ease,background-color .15s ease,transform 160ms var(--ease-out)}
.sw-btn:active,.sw-navtoggle:active,.sw-menu__close:active,.sw-tab:active,.sw-pager__link:active{transform:scale(.97)}

/* 1) 모양이 바뀌는 아이콘(삼선↔X, 펼침 +/−)은 ease-in-out 곡선으로 */
.sw-navtoggle__icon,.sw-navtoggle__icon::before,.sw-navtoggle__icon::after{transition:transform 200ms var(--ease-in-out),background-color 200ms var(--ease-in-out)}
.sw-newsitem__mark::before,.sw-newsitem__mark::after,.sw-faq__mark::before,.sw-faq__mark::after{transition:transform 200ms var(--ease-in-out)}

/* 3) 하위 메뉴 등장 */
.sw-menu.is-open{opacity:1;transform:translateY(0);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
@starting-style{.sw-menu.is-open{opacity:0;transform:translateY(-4px)}}

/* 4) 터치 기기에서 남는 롤오버 없애기 */
@media (hover:none){
  .sw-mlink:hover{background:none}
  .sw-mlink:hover .sw-menu__label{color:var(--ink)}
  .sw-mlink:hover .sw-menu__sub{color:var(--ink-subtle)}
  .sw-navtoggle:hover,.sw-menu__close:hover{background:none}
}

/* ── 히어로 글자 등장 (차례로 떠오르기) ─────────────────────
   페이지를 열 때 한 번만, 브레드크럼 → eyebrow → 메인 카피 → 서브 카피 → 버튼 순으로
   60ms 간격을 두고 8px 아래에서 올라오며 나타납니다. 각 0.52s · ease-out, 전체 약 0.76s.
   움직이는 동안에도 버튼은 바로 누를 수 있고, 동작 줄이기 설정에서는 움직임 없이 바로 보입니다. */
@keyframes sw-hero-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sw-hero__inner>*{animation:sw-hero-rise 520ms var(--ease-out) both}
.sw-hero__inner>.sw-crumbs{animation-delay:0ms}
.sw-hero__inner>.sw-eyebrow{animation-delay:60ms}
.sw-hero__inner>.sw-hero__title{animation-delay:120ms}
.sw-hero__inner>.sw-hero__lead{animation-delay:180ms}
.sw-hero__inner>.sw-hero__actions{animation-delay:240ms}
@media (prefers-reduced-motion:reduce){.sw-hero__inner>*{animation:none}}

/* 히어로 메인 카피 — 줄 단위로 드러내기(스크립트가 줄을 나눈 경우에만). 각 줄 0.7s · ease-out, 줄 간격 90ms.
   제목 자체의 '떠오르기'는 끄고, 줄마다 가림막 안에서 105% 아래에서 올라옵니다. */
.sw-hero__inner>.sw-hero__title.is-lines{animation:none}
.sw-tline{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.sw-tline__in{display:inline-block;animation:sw-tline-up 700ms var(--ease-out) both}
@keyframes sw-tline-up{from{transform:translateY(105%)}to{transform:none}}
/* 제목이 줄 단위로 드러나는 동안 서브 카피·버튼은 조금 늦춰 순서를 맞춥니다. */
.sw-hero__inner>.sw-hero__title.is-lines~.sw-hero__lead{animation-delay:300ms}
.sw-hero__inner>.sw-hero__title.is-lines~.sw-hero__actions{animation-delay:360ms}

/* 마무리 CTA 아래 여백 2차 — 더 벌렸습니다. 4vw(1280px 에서 51px) → 6.5vw(83px) · 좁은 화면 56px → 80px. */
.sw-cta{padding-bottom:80px}
@media (min-width:640px){.sw-cta{padding-bottom:6.5vw}}

/* 키메시지 밴드 여백 2차 — 위아래를 20% 넓혔습니다. (괄호 안은 이전 값)
   기본 4.5vw(3.75vw) · 좁은 화면 52.8px(44px) / 배경 그림 변형 4.2vw(3.5vw) · 좁은 화면 33.6px(28px). */
.sw-mission{padding:52.8px 0}
.sw-mission--art{padding:33.6px 0}
@media (min-width:640px){
  .sw-mission{padding:4.5vw 0}
  .sw-mission--art{padding:4.2vw 0}
}

/* 마무리 CTA 위 여백 — 구분선과 제목 사이를 넓혔습니다. 2.4vw(1280px 에서 31px) → 5vw(64px) · 좁은 화면 38px → 64px. */
.sw-cta{padding-top:64px}
@media (min-width:640px){.sw-cta{padding-top:5vw}}

/* 문의하기 — 양식의 선택지(문의 유형 · 관심 제품 · 검토 시기 · 제휴 유형): 고른 항목은 primary 채움 + on-primary 글자 (채움 버튼과 같은 조합) */
#contact-form .sw-choice input:checked+span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
#contact-form .sw-choice:hover input:checked+span{background:var(--primary);color:var(--on-primary);filter:brightness(.93)}
/* 문의하기 — 관심 제품 · 검토 시기: 마우스를 올린 항목도 primary 채움 + on-primary 글자 */
#f-products .sw-choice:hover span,#f-timing .sw-choice:hover span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
/* 문의하기 — 문의 창구의 소속 · 이메일 · 연락처 칸: surface-subtle 회색 바탕, 칸 사이 구분선은 흰 바탕색으로 */
.sw-cgroup .sw-contact__item{background:var(--surface-subtle);padding-left:var(--space-20)}
.sw-cgroup .sw-contact__item+.sw-contact__item{border-left-color:var(--bg)}
@media (max-width:640px){
  .sw-cgroup .sw-contact__item,.sw-cgroup .sw-contact__item+.sw-contact__item{padding-left:var(--space-16);padding-right:var(--space-16)}
  .sw-cgroup .sw-contact__item+.sw-contact__item{border-top-color:var(--bg)}
}

/* 복리후생 — 세 묶음(아이콘 원 + 제목 + 항목). 아이콘은 ink 선, 강조 한 곳만 primary. */
.sw-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-40) var(--space-36);margin-top:var(--space-56)}
.sw-benefit{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--space-24);align-items:start}
.sw-benefit__icon{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:var(--surface-subtle)}
.sw-benefit__icon svg{width:58px;height:58px;overflow:visible}
.sw-benefit__stroke{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sw-benefit__accent{fill:var(--primary)}
.sw-benefit__band{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round}
.sw-benefit__coin{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.sw-benefit__w{fill:none;stroke:var(--primary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sw-benefit__body{padding-top:var(--space-8)}
.sw-benefit__title{margin:0 0 var(--space-14);color:var(--ink)}
.sw-benefit__list{margin:0;padding:0;list-style:none;color:var(--ink-muted)}
.sw-benefit__list li{position:relative;padding:3px 0 3px 14px;word-break:keep-all}
.sw-benefit__list li::before{content:"";position:absolute;left:2px;top:16px;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--ink-subtle)}
@media (max-width:1023px){.sw-benefits{grid-template-columns:1fr;gap:var(--space-36)}}
@media (max-width:760px){.sw-benefit{grid-template-columns:72px minmax(0,1fr);column-gap:var(--space-20)}.sw-benefit__icon{width:72px;height:72px}.sw-benefit__icon svg{width:44px;height:44px}.sw-benefit__body{padding-top:var(--space-4)}}

/* 연혁 넘기기 — 연도 숫자 아래(좁은 화면은 오른쪽 위)에 ‹ › 버튼, 순번, '전체 연혁 보기'. */
.sw-history-box.has-nav{position:relative;min-height:150px}
.sw-history-nav{position:absolute;left:0;top:64px;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:236px}
.sw-history-nav__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg);color:var(--ink);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.sw-history-nav__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sw-history-nav__btn:hover{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.sw-history-nav__btn:focus-visible,.sw-history-nav__all:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-history-nav__count{margin-left:6px;color:var(--ink-subtle);font-variant-numeric:tabular-nums}
.sw-history-nav__break{flex-basis:100%;height:0}
.sw-history-nav__all{flex:none;margin-top:10px;text-align:left;padding:2px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink-muted);font:var(--text-body-sm);cursor:pointer}
.sw-history-nav__all:hover{color:var(--primary);border-bottom-color:var(--primary)}
.sw-history-box.is-expanded .sw-history-nav__btn,.sw-history-box.is-expanded .sw-history-nav__count{display:none}
.sw-history-box.is-expanded .sw-history-nav__all{margin-top:0}
@media (max-width:760px){
  .sw-history-box.has-nav{padding-top:52px;min-height:0}
  .sw-history-nav{top:0;width:auto}
  .sw-history-nav__break{display:none}
  .sw-history-nav__all{margin:0 0 0 8px}
}
/* 회사개요 히어로 제목 — 둘째 줄이 약 1,000px라 폭 제한을 풀어 컨테이너 폭까지 씁니다. */
.sw-hero--detail .sw-hero__title.sw-hero__title--wide{max-width:none}

/* ── 업무 영역 (index.html) ─────────────────────────────────
   사업영역(company/business.html) 의 여섯 분야를 랜딩에서는 선으로만 나눈 행 목록으로 줄입니다.
   바로 위 4계층이 카드 격자라 같은 격자를 또 쓰지 않고, 행 사이 선으로만 칸을 나눕니다.
   왼쪽 칸에 번호·분야 이름, 오른쪽 칸에 세부 항목을 두 줄 격자로 둡니다. */
/* 칸 구성은 바로 위 4계층(.sw-cards)과 같게 맞춥니다 — 위쪽 4px 띠, 번호(heading-lg, 띠 색),
   이름, 한 줄 키메시지, 설명. 마우스를 올리면 칸 전체가 그 칸의 띠 색으로 뒤집힙니다.
   띠 색은 수치 밴드 그라디언트(stat-grad-4 → stat-grad-1)에서 뽑되, 흰 글자도 검은 글자도
   4.5:1 을 넘기지 못하는 중간 밝기(상대휘도 0.2 언저리)는 건너뜁니다. 01 만 검은 글자(6.2:1),
   02~06 은 흰 글자(5.6:1 이상)입니다. */
.sw-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;border-left:1px solid var(--line)}
.sw-areabox{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--space-36) var(--space-20) var(--space-28);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .15s ease}
.sw-areabox::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--area-bar,var(--line))}
.sw-areabox:nth-child(1){--area-bar:var(--stat-grad-4);--area-on-bar:var(--ink)}
.sw-areabox:nth-child(2){--area-bar:var(--stat-grad-3);--area-on-bar:var(--on-dark)}
.sw-areabox:nth-child(3){--area-bar:color-mix(in srgb,var(--stat-grad-3) 55%,var(--stat-grad-2));--area-on-bar:var(--on-dark)}
.sw-areabox:nth-child(4){--area-bar:var(--stat-grad-2);--area-on-bar:var(--on-dark)}
.sw-areabox:nth-child(5){--area-bar:color-mix(in srgb,var(--stat-grad-2) 45%,var(--stat-grad-1));--area-on-bar:var(--on-dark)}
.sw-areabox:nth-child(6){--area-bar:var(--stat-grad-1);--area-on-bar:var(--on-dark)}
.sw-areabox__label{color:var(--area-bar)}
.sw-areabox__name{margin:var(--space-16) 0 0;color:var(--ink)}
.sw-areabox__key{margin:var(--space-8) 0 0;color:var(--ink);font-weight:600}
/* 항목 줄은 칸 아래에 붙여, 같은 행의 여섯 칸이 가로로 맞도록 합니다. */
.sw-areabox__items{margin:auto 0 0;padding-top:var(--space-16);color:var(--ink-subtle)}
.sw-areabox__label,.sw-areabox__name,.sw-areabox__key,.sw-areabox__items{transition:color .15s ease}
.sw-areabox:hover{background:var(--area-bar)}
.sw-areabox:hover .sw-areabox__label,.sw-areabox:hover .sw-areabox__name,
.sw-areabox:hover .sw-areabox__key,.sw-areabox:hover .sw-areabox__items{color:var(--area-on-bar)}
@media (max-width:1100px){.sw-areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .sw-areas{grid-template-columns:1fr}
  .sw-areabox{padding:var(--space-28) var(--space-20) var(--space-24)}
}

/* 하위 메뉴(2depth) 펼침 영역 바탕 — 흰색 대신 연회색(surface-subtle)으로 깔아 헤더와 구분합니다. 항목 롤오버(primary 바탕)는 그대로입니다. */
.sw-menu{background:var(--surface-subtle)}
/* 회색 펼침 영역 위의 X 닫기 롤오버 바탕은 흰색으로 구분합니다. */
.sw-menu__close:hover{background:var(--bg)}
/* Our Strengths — 항목 4개를 2열×2줄로 (사업영역 페이지) */
.sw-partner .sw-fields--two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-56)}
@media (max-width:760px){.sw-partner .sw-fields--two{grid-template-columns:1fr}}

/* 본문 섹션 여백 3차 — 구분선 위아래 여백을 15% 늘렸습니다. 2.4vw(1280px 에서 31px) → 2.76vw(35px) · 좁은 화면 38px → 44px.
   마무리 CTA 는 따로 맞춘 위 5vw · 아래 6.5vw 를 그대로 둡니다. */
.sw-section,.sw-products,.sw-page{padding:44px 0}
@media (min-width:640px){.sw-section,.sw-products,.sw-page{padding:2.76vw 0}}

/* 본문 섹션 여백 4차 — 10% 더 늘렸습니다. 2.76vw(1280px 에서 35px) → 3.04vw(39px) · 좁은 화면 44px → 48px. 마무리 CTA 는 그대로. */
.sw-section,.sw-products,.sw-page{padding:48px 0}
@media (min-width:640px){.sw-section,.sw-products,.sw-page{padding:3.04vw 0}}

/* ── 제품 메뉴 6개 카테고리 (2026-10-21) ─────────────────────
   데스크톱: 한 칸 전체 폭을 4열로 나눠 카테고리를 배치
   (AI Service·AI Infra | Cloud | Desktop Virtualization·Backup & Recovery | Security).
   상세 페이지가 아직 없는 제품은 링크 없는 항목(.sw-menu__item · .sw-mitem · .sw-product--soon)으로 둡니다. */
.sw-menu__col--full{flex:1 1 100%;max-width:none;padding:0}
.sw-menu__subcols--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.sw-menu__item{display:block;padding:10px 0;cursor:default}
.sw-mitem{display:block;padding:9px 0;cursor:default}
.sw-mpanel>.sw-msubgroup:first-child{margin-top:12px}
.sw-product--soon{cursor:default}
.sw-product--soon:hover{background:none}
.sw-product--soon:hover .sw-product__name{color:var(--ink)}
.sw-product--soon:hover .sw-product__cat{color:var(--ink-subtle)}
.sw-product--soon:hover .sw-product__text{color:var(--ink-muted)}
/* 상단 메뉴 제품 카테고리 레이블(AI Service Platform 등) — 주 컬러 (데스크톱 · 모바일 메뉴) */
#menu-products .sw-menu__subgroup,#m-products .sw-msubgroup{color:var(--primary)}

/* 사업분야 카드 v3 — 설명 문단 · 항목 3개 · 기술 키워드 줄 */
.sw-bizcard__desc{margin:0 0 var(--space-24);color:var(--ink-muted)}
.sw-bizcard{display:flex;flex-direction:column}
.sw-bizcard .sw-area{flex:1}
.sw-bizcard__keys{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:var(--space-28) 0 0;padding-top:var(--space-16);border-top:1px dashed var(--line)}
.sw-bizcard__keys-label{color:var(--ink-subtle);text-transform:uppercase}
.sw-bizcard__keys-text{color:var(--ink-muted)}

/* 사업분야 카드 — 기술 키워드를 해시태그 칩으로. '#'은 primary, 칩은 흰 바탕 + 1px line. */
.sw-bizcard__tags{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-28) 0 0;padding:var(--space-20) 0 0;list-style:none;border-top:1px dashed var(--line)}
.sw-bizcard__tags li{display:inline-flex;align-items:center;padding:5px 12px 5px 10px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg);color:var(--ink-muted);font:500 12.5px/1.4 var(--font-sans);white-space:nowrap;transition:border-color .15s ease,color .15s ease}
.sw-bizcard__tags li::before{content:"#";margin-right:2px;color:var(--primary);font-weight:700}
.sw-bizcard__tags li:hover{border-color:var(--primary);color:var(--ink)}
@media (max-width:760px){.sw-bizcard__tags{gap:6px}.sw-bizcard__tags li{font-size:12px;padding:4px 10px 4px 8px}}
/* 번호(01~06) 제거 — 아이콘·이름을 첫 줄로 */
.sw-bizcard[data-art] .sw-row__icon,.sw-bizcard[data-art] .sw-row__name{grid-row:1}
.sw-bizcard[data-art] .sw-bizcard__head{row-gap:0}
/* 키워드 칩 — # 표시 제거 */
.sw-bizcard__tags li::before{content:none}
.sw-bizcard__tags li{padding-left:12px}
@media (max-width:760px){.sw-bizcard__tags li{padding-left:10px}}
/* 마지막 항목 아래 간격을 카드마다 같게 — 목록을 늘이지 않고, 남는 높이는 카드 맨 아래로 */
.sw-bizcard .sw-area{flex:none}

/* 랜딩 히어로 제목 — 현재 카피("인프라의 깊이가 AI의 격을 만듭니다")가 한 줄에 698px 라
   폭 제한 671px 에 27px 모자라 두 줄로 끊겼습니다. 720px 로 올려 한 줄에 둡니다.
   좁은 화면에서는 컨테이너 폭에 맞춰 자연스럽게 줄바꿈합니다. */
.sw-hero--flush .sw-hero__title{max-width:720px}

/* 4계층 카드 이름 — 04 가 "AI Infrastructure Automation" 으로 길어졌습니다.
   16px 로는 1440px 에서도 215px 로 칸 안쪽(214px)을 1px 넘겨, 네 칸 모두 15px 로 내렸습니다(04 는 202px).
   1280px 미만에서는 칸 안쪽이 177px 이하라 어떤 크기로도 한 줄에 못 들어가므로,
   줄바꿈을 허용해 글자가 칸 밖으로 넘치지 않게 합니다. */
.sw-card__name{font-size:15px;white-space:normal}
@media (min-width:1280px){.sw-card__name{white-space:nowrap}}
/* What We Do — 설명 첫 줄("…핵심 기반을 설계하고", 약 795px)이 한 줄에 들어가도록 이름·설명 간격을 좁힙니다. */
@media (min-width:1260px){.sw-product--static{column-gap:24px}}

/* 푸터 개인정보처리방침 링크 — 다른 바로가기보다 눈에 띄게 굵게 */
.sw-footer__privacy{font-weight:700}
/* 회사개요 히어로 제목 — 줄이 넘어갈 때 마지막 단어만 홀로 남지 않도록 줄 길이를 고르게 나눕니다. */
.sw-hero__title--wide{text-wrap:balance}

/* 문의 폼 — 개인정보 동의 옆 "자세히 보기"(개인정보처리방침, 새 창) */
.sw-consent__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-16);row-gap:var(--space-8);margin-top:var(--space-16)}
.sw-consent__row .sw-check{margin-top:0;align-items:baseline}
.sw-consent__row .sw-check input{align-self:center}
.sw-consent__more{color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px}
.sw-consent__more:hover{color:var(--primary)}
/* 좁은 화면에서 다음 줄로 내려가면 체크박스 오른쪽 글자 시작선(18px + 10px)에 맞춥니다. */
@media (max-width:479px){.sw-consent__more{margin-left:28px}}
.sw-consent__more:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sw-visually-hidden-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}