/* ─────────────────────────────────────────────────────────────
   xnpc.kr 전용 시각 언어 — 회사 사이트
   partials/header.php 가 current_site_key() === 'xnpc' 일 때만 불러온다.
   onxdo.kr 방문자는 이 파일을 받지 않는다.

   style.css 를 덮어쓰는 것이 아니라 그 위에 얹는다.
   헤더·푸터·폼 같은 공통 요소는 style.css 를 그대로 쓴다.

   ── 지향점: 임팩트 스타트업 ────────────────────────────────
   현장 사진, 큰 타이포, 넓은 여백, 숫자로 말하기.
   섹션마다 메시지 하나. 배경은 흰·옅은회색·먹 세 가지만.

   ⚠️ 앞선 개정에서는 "애플식 절제"를 지향점으로 삼았으나, 사진도 숫자도 없는
   흰 화면은 절제가 아니라 미완성으로 읽혔다. 절제는 받쳐주는 밀도가 있을 때
   고급이 된다. 지금은 현장(사진)과 실적(숫자)을 앞세우고 조판으로 조용하게 잡는다.

   ONxDO 와 의도적으로 다르게 잡은 것:
     onxdo  배경 영상 · 나눔스퀘어라운드 · 초록 강조 · 활기
     xnpc   현장 사진 한 장 · Pretendard/SF · 흰과 먹 · 절제
   같은 회사인 건 초록 포인트 하나로만 남긴다.

   ⚠️ 중요 — 이 파일은 홈 아래쪽 섹션(#about 이후)까지 덮는다.
   그러지 않으면 위쪽은 .x-* 로 설계돼 있고 아래쪽은 onxdo 용 .section/.card 가
   그대로 나와, 스크롤 도중 다른 사이트로 넘어간 것처럼 보인다.
   실제로 "디자인이 별로" 라는 인상의 가장 큰 원인이 이 이음매였다.
   ───────────────────────────────────────────────────────────── */

:root {
  --x-ink: #1D1D1F;          /* 먹 — 순검정보다 부드럽다 */
  --x-ink-2: #6E6E73;        /* 보조 텍스트 */
  --x-ink-3: #8E8E93;        /* 출처·캡션 등 가장 낮은 목소리 */
  --x-line: rgba(0, 0, 0, .08);
  --x-bg: #F5F5F7;           /* 아주 옅은 회색 — 타일과 섹션 교차에 쓴다 */
  --x-r: 22px;               /* 큰 반경. style.css 의 --radius(14px) 보다 크게 잡아 결이 다르게 */
  --x-r-s: 14px;

  /* 세로 리듬. 앞서 파셜에 인라인 style="margin-top:72px" 류가 23군데 흩어져 있었다.
     간격을 여기 한곳에 모아야 섹션들이 같은 박자로 읽힌다. */
  --x-sp-s: 16px;
  --x-sp-m: 28px;
  --x-sp-l: 44px;
  --x-sp-xl: 72px;
}

/* 회사 사이트만 글꼴을 바꾼다. 맥·아이폰에서는 -apple-system 이 먼저 걸려 실제 SF Pro 가 뜬다. */
.site-xnpc,
.site-xnpc button,
.site-xnpc input,
.site-xnpc select,
.site-xnpc textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard,
               "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.site-xnpc { color: var(--x-ink); }

/* 헤더도 조용하게 — 로고와 메뉴의 무게를 낮춘다 */
.site-xnpc .site-header { border-bottom: 1px solid var(--x-line); background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(18px); }
.site-xnpc .logo-text { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--x-ink); }
.site-xnpc .nav a { font-size: 14px; font-weight: 500; color: var(--x-ink); letter-spacing: -.01em; }
.site-xnpc .nav a.btn { font-weight: 600; }
.site-xnpc .nav a:hover { color: var(--green); }

/* 읽기 폭. 문장이 긴 섹션(소셜미션·소식·문의)은 좁혀야 줄바꿈이 안정된다. */
.site-xnpc .x-narrow { max-width: 720px; }

/* ── 히어로 ────────────────────────────────────────────────
   현장 사진 한 장을 어둡게 깔고 그 위에 큰 타이포를 올린다.
   배경 "영상"은 쓰지 않는다 — onxdo 히어로 영상(7MB)만큼 트래픽을 쓸 이유가 없다.
   사진은 190KB 짜리 webp 한 장이다. */
.x-hero {
  position: relative; overflow: hidden;
  min-height: 72vh; display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--white); padding: 96px 0 84px;
}
.x-hero .container { max-width: 980px; position: relative; z-index: 2; }

.x-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; z-index: 0;
}
/* 사진 위 글자의 대비를 보장하는 스크림. 사진이 바뀌어도 헤드라인이 항상 읽히게
   위·아래를 함께 눌러 준다. 사진 한 장에 기대지 않는 것이 요점이다. */
.x-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(12,12,14,.82) 0%, rgba(12,12,14,.62) 42%, rgba(12,12,14,.88) 100%),
    radial-gradient(120% 80% at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 100%);
}

.x-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--x-ink-2); margin-bottom: 20px;
}

/* 로고 이미지가 없는 동안 타이포가 브랜드 역할을 대신한다. 크게, 자간을 바싹 좁혀서. */
.x-headline {
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 700;
  color: var(--x-ink);
  margin: 0 0 26px;
  word-break: keep-all;      /* 한국어 단어가 중간에서 잘리지 않게 */
}
.x-headline em { font-style: normal; color: var(--green-bright); }

.x-sub {
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55; font-weight: 400; letter-spacing: -.02em;
  color: var(--x-ink-2);
  max-width: 32em; margin: 0 auto 40px; word-break: keep-all;
}

/* 사진 히어로일 때는 먹/회색 팔레트를 흰색 계열로 뒤집는다 */
.x-hero-photo .x-eyebrow {
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px; padding: 6px 15px;
  backdrop-filter: blur(6px);
}
.x-hero-photo .x-headline { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.x-hero-photo .x-sub { color: rgba(255,255,255,.8); text-shadow: 0 1px 16px rgba(0,0,0,.4); }
.x-hero-photo .x-link { color: #fff; }
.x-hero-photo .x-link:hover { opacity: .7; }

/* 텍스트 링크형 CTA — 알약 버튼보다 화면이 조용해진다. */
.x-cta { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; }
.x-link {
  font-size: 16px; font-weight: 500; letter-spacing: -.02em;
  color: var(--green); text-decoration: none;
  transition: opacity .15s ease;
}
.x-link::after { content: " ›"; }
.x-link:hover { opacity: .65; }

/* 본문 안에서 쓰는 강조 링크(메일 주소·처리방침 등). ::after 화살표는 붙이지 않는다. */
.site-xnpc .x-inline-link { color: var(--green); font-weight: 600; }
.site-xnpc .x-inline-link:hover { text-decoration: underline; }

/* 출처·주석. 가장 낮은 목소리. 지표를 쓰면 출처를 같이 쓴다 —
   기관·심사자가 보는 화면에서 출처 없는 숫자는 신뢰를 깎는다. */
.site-xnpc .x-src {
  margin-top: var(--x-sp-m);
  font-size: 12.5px; color: var(--x-ink-3); letter-spacing: -.01em;
}

/* ── 벤토 그리드 ───────────────────────────────────────────
   위계 없이 여러 갈래를 한눈에 놓는 배치. 세 부류(발주처·지자체·투자자)가
   각자 자기에게 필요한 타일을 먼저 보게 하는 것이 목적이다.
   테두리 대신 옅은 회색 바닥을 써서 선을 줄인다. */
.x-bento-wrap { padding: 96px 0 104px; background: var(--white); }
.x-bento {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
  max-width: 1120px; margin: 0 auto;
}
.x-tile {
  background: var(--x-bg); border: 0;
  border-radius: var(--x-r); padding: 34px 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 196px; text-decoration: none; color: inherit;
  /* 절제된 미세 인터랙션 — 화려한 애니메이션이 아니라 살짝 뜨는 정도 */
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background .22s ease;
}
a.x-tile:hover { transform: translateY(-4px); background: #EDEDF0; }
.x-tile h3 {
  font-size: 17px; font-weight: 650; margin: 0 0 10px;
  color: var(--x-ink); letter-spacing: -.03em; line-height: 1.28;
}
.x-tile p {
  font-size: 15px; line-height: 1.6; letter-spacing: -.01em;
  color: var(--x-ink-2); margin: 0; word-break: keep-all;
}

/* 숫자를 앞세우는 타일 — 문제의 크기를 첫 화면으로 끌어올린다 */
.x-tile .x-num {
  font-size: clamp(32px, 3.2vw, 44px); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: var(--x-ink);
  margin: 0 0 12px; display: block;
}
.x-tile .x-cap { font-size: 14px; color: var(--x-ink-2); line-height: 1.55; letter-spacing: -.01em; word-break: keep-all; }
.x-tile .x-go { font-size: 15px; font-weight: 500; color: var(--green); margin-top: 18px; letter-spacing: -.02em; }

/* 대표 타일 — 자체 서비스이자 최대 실적이라 가장 넓고, 먹 배경으로 무게를 준다 */
.x-tile-lead {
  grid-column: span 6; background: var(--x-ink);
  min-height: 268px;
}
.x-tile-lead h3 { color: var(--white); font-size: clamp(19px, 2vw, 24px); letter-spacing: -.04em; }
.x-tile-lead p { color: rgba(255, 255, 255, .68); font-size: 16px; }
.x-tile-lead .x-go { color: var(--green-bright); }
a.x-tile-lead:hover { background: #000; }

.x-tile-3 { grid-column: span 3; }
.x-tile-4 { grid-column: span 4; }
.x-tile-6 { grid-column: span 6; }

/* ── 신뢰 배지 줄 ──────────────────────────────────────────
   남이 우리를 고른 이력. 로고 사용 규정을 확인하기 전이라 글자만 쓴다.
   글자만으로도 한 줄에 늘어놓으면 로고 벽과 같은 일을 한다. */
.x-proof {
  background: var(--x-bg); border-top: 1px solid var(--x-line);
  border-bottom: 1px solid var(--x-line); padding: 30px 0;
}
.x-proof-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--x-ink-3); margin: 0 0 14px;
}
.x-proof-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
}
.x-proof-list li {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.02em;
  color: var(--x-ink-2); word-break: keep-all;
}
/* 보도는 성격이 달라 한 칸 띄우고 색을 준다 */
.x-proof-press { color: var(--green) !important; }

/* ── 소셜벤처기업 판별 띠 ──────────────────────────────────
   히어로 바로 아래 한 줄. 먹 배경을 써서 히어로(어두운 사진)에서 그대로 이어지고,
   그 아래 흰 벤토와는 칼같이 끊긴다 — 도장 한 번 찍힌 것처럼 읽히게.
   '선정 · 보도' 줄(.x-proof)과 섞지 않는 이유는 성격이 달라서다.
   저건 남이 우리를 고른 이력이고, 이건 정부의 판별이다. */
.x-official { background: var(--x-ink); padding: 15px 0; }
.x-official-line {
  margin: 0; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 8px 14px;
}
.x-official-mark {
  flex: none; align-self: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--x-ink); background: var(--green-bright);
  border-radius: 999px; padding: 4px 11px; line-height: 1;
}
.x-official strong {
  font-size: 15px; font-weight: 650; letter-spacing: -.03em;
  color: #fff; word-break: keep-all;
}
/* 발급 근거는 가장 낮은 목소리로. 숫자를 쓰면 출처를 같이 쓴다는 원칙 그대로다. */
.x-official-meta {
  font-size: 12.5px; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .55); word-break: keep-all;
}

/* ── 본문 섹션 — 히어로와 같은 결로 ────────────────────────
   섹션마다 메시지 하나, 배경을 흰·옅은회색으로 번갈아 준다. */
.site-xnpc .section { padding: 100px 0; scroll-margin-top: 60px; }
.site-xnpc .section-alt { background: var(--x-bg); }
.site-xnpc .section h2 {
  font-size: clamp(26px, 3.2vw, 42px);
  letter-spacing: -.045em; font-weight: 700;
  color: var(--x-ink); margin-bottom: 20px; line-height: 1.14;
  word-break: keep-all;
}
.site-xnpc .x-h2-sub { margin-top: var(--x-sp-xl); }
.site-xnpc .section-label {
  color: var(--x-ink-3); letter-spacing: .14em; font-weight: 600;
  font-size: 11.5px; text-transform: uppercase; margin-bottom: 12px;
}
.site-xnpc .lead {
  font-size: clamp(16px, 1.5vw, 19px); color: var(--x-ink-2);
  line-height: 1.62; letter-spacing: -.02em; word-break: keep-all;
  max-width: 42em;
}
.site-xnpc .x-body {
  margin-top: var(--x-sp-m); font-size: 16px; line-height: 1.78;
  letter-spacing: -.015em; color: var(--x-ink-2); word-break: keep-all;
}
.site-xnpc .x-body strong { color: var(--x-ink); font-weight: 650; }
.site-xnpc .lead strong { color: var(--x-ink); font-weight: 650; }

/* 카드 — 그림자를 걷어내고 바닥색만으로 구분한다.
   style.css 의 .grid-3 는 24px gap 에 3열 고정이라 항목이 3개가 아닐 때 깨진다.
   .x-cards 는 폭에 따라 접히므로 항목 수가 바뀌어도 조판이 유지된다. */
.site-xnpc .x-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: var(--x-sp-l);
}
.site-xnpc .x-cards-case { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.site-xnpc .card {
  border: 0; background: var(--white); border-radius: var(--x-r);
  box-shadow: none; padding: 34px 32px;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.site-xnpc .section-alt .card { background: var(--white); }
.site-xnpc .section:not(.section-alt) .card { background: var(--x-bg); }
.site-xnpc .card:hover { transform: translateY(-4px); }
.site-xnpc .card h3 { font-size: 17px; font-weight: 650; letter-spacing: -.03em; color: var(--x-ink); margin-bottom: 10px; }
.site-xnpc .card p { color: var(--x-ink-2); letter-spacing: -.01em; font-size: 15px; line-height: 1.6; }

/* 사례 카드 — 사진이 주인공이라 패딩을 줄이고 그림자를 없앤다 */
.site-xnpc .case-card {
  border-radius: var(--x-r); overflow: hidden; background: var(--white);
  box-shadow: none; transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.site-xnpc .case-card:hover { transform: translateY(-4px); }
.site-xnpc .case-card img { height: 220px; }
.site-xnpc .case-card .body { padding: 24px 26px 28px; }
.site-xnpc .case-card h3 { font-size: 17px; font-weight: 650; letter-spacing: -.03em; }
.site-xnpc .case-card p { color: var(--x-ink-2); font-size: 14.5px; line-height: 1.6; margin-top: 8px; }

/* 곁들이는 블록 — 본류는 아니지만 지워서는 안 되는 내용(외주 개발 역량)을 담는다.
   카드와 같은 급으로 놓으면 사업의 무게중심이 흐려지므로 한 급 낮춰 옆에 붙인다. */
.site-xnpc .x-aside {
  margin-top: var(--x-sp-l); padding: 30px 32px;
  border: 1px solid var(--x-line); border-radius: var(--x-r);
  background: transparent;
}
.site-xnpc .x-aside h3 { font-size: 15px; font-weight: 650; letter-spacing: -.03em; margin-bottom: 10px; }
.site-xnpc .x-aside p {
  font-size: 15px; line-height: 1.7; color: var(--x-ink-2);
  letter-spacing: -.01em; margin-bottom: 16px; word-break: keep-all;
}
.site-xnpc .x-aside strong { color: var(--x-ink); font-weight: 650; }

/* ── 원칙 세 줄 ────────────────────────────────────────────
   앞서 이모지(🚶💚📊)를 아이콘으로 쓰고 있었다. 기관·심사자가 보는 화면에서
   이모지는 가장 빠르게 아마추어로 읽힌다. 번호로 바꾼다 — 순서가 있다는 뜻도 함께 준다. */
.site-xnpc .x-principles {
  list-style: none; margin: var(--x-sp-l) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.site-xnpc .x-principles li {
  background: var(--white); border-radius: var(--x-r); padding: 32px;
}
.site-xnpc .x-pn {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--green); margin-bottom: 16px;
}
.site-xnpc .x-principles h3 { font-size: 17px; font-weight: 650; letter-spacing: -.03em; margin-bottom: 8px; }
.site-xnpc .x-principles p { font-size: 15px; line-height: 1.6; color: var(--x-ink-2); letter-spacing: -.01em; }

/* ── 지표 스트립 ───────────────────────────────────────────
   data/impact.json 에서 읽는다. 2026-10 정식 서비스 전까지는 확정값만 담긴다.
   숫자를 크게, 라벨을 작게 — 스크롤하며 훑는 사람이 숫자만 봐도 규모를 잡게. */
.site-xnpc .x-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px; margin-top: var(--x-sp-l);
  padding: 34px 0; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line);
}
.site-xnpc .x-metric { padding: 8px 4px; }
.site-xnpc .x-metric strong {
  display: block; font-size: clamp(32px, 3.4vw, 44px); font-weight: 700;
  letter-spacing: -.05em; line-height: 1; color: var(--x-ink);
}
.site-xnpc .x-unit { font-size: .5em; font-weight: 600; letter-spacing: -.02em; margin-left: 2px; }
.site-xnpc .x-metric-label {
  display: block; margin-top: 12px; font-size: 14px; font-weight: 600;
  letter-spacing: -.02em; color: var(--x-ink); word-break: keep-all;
}
.site-xnpc .x-metric-sub {
  display: block; margin-top: 4px; font-size: 12.5px; color: var(--x-ink-3); letter-spacing: -.01em;
}

/* ── 연혁 ──────────────────────────────────────────────────
   앞서 .timeline 은 왼쪽 56px 들여쓰기에 한 단으로 14줄이 쭉 늘어서
   읽히지 않는 벽이었다. 두 단으로 좁히고 부연(<i>)을 한 급 낮춘다.
   항목을 줄이지는 않는다 — 14개월에 14건은 그 자체가 자산이다. */
.site-xnpc .x-tl {
  margin-top: var(--x-sp-l);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px 48px;
}
.site-xnpc .x-tl-year h3 {
  font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--x-ink-3);
  padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--x-line);
}
.site-xnpc .x-tl-year ul { list-style: none; margin: 0; padding: 0; }
.site-xnpc .x-tl-year li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--x-line);
  font-size: 14.5px; line-height: 1.5; letter-spacing: -.02em; color: var(--x-ink);
  word-break: keep-all;
}
.site-xnpc .x-tl-m {
  flex: 0 0 auto; width: 22px; font-size: 12px; font-weight: 700;
  color: var(--x-ink-3); font-variant-numeric: tabular-nums;
}
/* 부연(기관명·장소)은 본문과 같은 무게로 두면 항목 제목이 안 보인다 */
.site-xnpc .x-tl-year i {
  font-style: normal; color: var(--x-ink-3); font-size: 13px;
}

/* ── 먹 밴드 (ONxDO 배너 · 채용 · 회사소개서) ──────────────
   "한 화면에 메시지 하나" 로 크게 낸다.
   onxdo 의 초록 그라디언트(.cta-band)를 회사 사이트에서 쓰면
   두 사이트의 결을 갈라놓은 의미가 없어진다. */
.x-band {
  padding: 112px 0; text-align: center; background: var(--x-ink); color: var(--white);
  scroll-margin-top: 60px;
}
.x-band-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin: 0 0 16px;
}
.x-band h2 {
  font-size: clamp(24px, 3vw, 38px); font-weight: 700; letter-spacing: -.045em;
  margin: 0 0 18px; line-height: 1.14; color: var(--white); word-break: keep-all;
}
.x-band p {
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; letter-spacing: -.02em;
  color: rgba(255,255,255,.66); max-width: 34em; margin: 0 auto 34px; word-break: keep-all;
}
.x-band .x-link { color: var(--green-bright); font-size: 16px; }
.x-band-light { background: var(--x-bg); color: var(--x-ink); }
.x-band-light .x-band-eyebrow { color: var(--x-ink-3); }
.x-band-light h2 { color: var(--x-ink); }
.x-band-light p { color: var(--x-ink-2); }
.x-band-light .x-link { color: var(--green); }
.x-band .x-cta { gap: 34px; }

/* 채용 직무 목록 — 무엇에 지원하는 것인지 알려준다 */
.x-roles {
  list-style: none; margin: 0 auto 34px; padding: 0; max-width: 40em;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.x-roles li {
  font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--x-line); color: var(--x-ink-2);
}
.x-band:not(.x-band-light) .x-roles li {
  border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.78);
}

/* ── 소식 ──────────────────────────────────────────────────
   초록 밑줄과 초록 태그는 onxdo 의 결이다. 선을 회색으로 낮춘다. */
.site-xnpc .x-news { margin-top: var(--x-sp-l); border-top: 1px solid var(--x-line); }
.site-xnpc .news-item { border-bottom: 1px solid var(--x-line); padding: 26px 0; }
.site-xnpc .news-item .meta { color: var(--x-ink-3); font-size: 12.5px; margin-bottom: 8px; letter-spacing: -.01em; }
.site-xnpc .news-item .tag {
  background: transparent; border: 1px solid var(--x-line); color: var(--x-ink-2);
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; letter-spacing: -.01em;
}
.site-xnpc .news-item h3 { font-size: 17px; font-weight: 650; letter-spacing: -.03em; line-height: 1.45; }
.site-xnpc .news-item h3 a:hover { color: var(--green); }
.site-xnpc .x-news-body { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--x-ink-2); letter-spacing: -.01em; }

/* 협력 기관 목록 (스위치가 켜졌을 때만 쓰인다) */
.site-xnpc .partner-list { margin-top: var(--x-sp-l); }
.site-xnpc .partner-list li {
  border: 0; background: var(--x-bg); border-radius: var(--x-r-s);
  padding: 20px 24px; font-weight: 600; font-size: 15px; letter-spacing: -.02em;
}
.site-xnpc .x-sec-cta { margin-top: var(--x-sp-m); }

/* ── 버튼 · 폼 ─────────────────────────────────────────────
   앞서 파셜에 흩어져 있던 인라인 style 을 여기로 옮겼다. */
.site-xnpc .btn {
  border-radius: 980px; font-weight: 600; letter-spacing: -.02em;
  padding: 14px 28px; font-size: 15px;
}
.site-xnpc .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,160,74,.24); }
.site-xnpc .x-btn-full { width: 100%; }

.site-xnpc .contact-form {
  margin-top: var(--x-sp-l); background: var(--white); border-radius: var(--x-r);
  padding: 36px; box-shadow: none; border: 1px solid var(--x-line);
}
.site-xnpc .contact-form label { font-size: 13px; font-weight: 650; letter-spacing: -.02em; color: var(--x-ink); }
.site-xnpc .contact-form input[type=text],
.site-xnpc .contact-form input[type=email],
.site-xnpc .contact-form input[type=tel],
.site-xnpc .contact-form select,
.site-xnpc .contact-form textarea {
  background: var(--x-bg); border: 1px solid transparent; border-radius: var(--x-r-s);
  padding: 13px 15px; font-size: 15px; letter-spacing: -.01em;
}
.site-xnpc .contact-form input:focus,
.site-xnpc .contact-form select:focus,
.site-xnpc .contact-form textarea:focus {
  border-color: var(--green); background: var(--white);
}
.site-xnpc .x-select-flush { margin-bottom: 0; }
/* 개인정보 동의 줄 — 체크박스와 문장의 첫 줄을 맞춘다 */
.site-xnpc .iq-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; font-weight: 400; line-height: 1.6;
  color: var(--x-ink-2); margin: 8px 0 16px;
}
.site-xnpc .iq-consent input { width: auto; margin-top: 3px; accent-color: var(--green); }
/* 봇 유인용 숨은 칸. 화면에서 치우되 스크린리더 흐름도 건드리지 않게 화면 밖으로 보낸다 */
.site-xnpc .x-hp { position: absolute; left: -9999px; }
.site-xnpc .form-msg { border-radius: var(--x-r-s); font-weight: 600; font-size: 14.5px; letter-spacing: -.02em; }
.site-xnpc .form-msg.ok { background: var(--green-soft); color: #00733a; }

/* 푸터도 같은 결로 — style.css 의 초록 hover 만 남긴다 */
.site-xnpc .site-footer { background: var(--x-ink); color: rgba(255,255,255,.55); }
.site-xnpc .site-footer a:hover { color: var(--green-bright); }
.site-xnpc .footer-sns a { border-color: rgba(255,255,255,.18); }

/* ── 좁은 화면 ─────────────────────────────────────────────
   벤토는 넓은 화면에서 성립하는 배치다. 좁아지면 한 줄에 하나씩 쌓아
   읽는 순서가 분명해지게 한다. */
@media (max-width: 900px) {
  .x-tile-lead, .x-tile-6 { grid-column: span 12; }
  .x-tile-3, .x-tile-4 { grid-column: span 6; }
  .site-xnpc .section, .x-band { padding: 84px 0; }
  .x-bento-wrap { padding: 80px 0 84px; }
}
@media (max-width: 560px) {
  .x-hero { min-height: 0; padding: 76px 0 64px; }
  .x-tile-3, .x-tile-4 { grid-column: span 12; }
  .x-tile { min-height: 0; padding: 28px 26px; }
  .x-cta { gap: 20px 26px; }
  .site-xnpc .section, .x-band { padding: 68px 0; }
  .x-bento-wrap { padding: 64px 0 68px; }
  .site-xnpc .x-metrics { grid-template-columns: repeat(2, 1fr); }
  .site-xnpc .contact-form { padding: 26px 22px; }
  .site-xnpc .x-principles li, .site-xnpc .card { padding: 26px 24px; }
  /* 좁은 화면에서는 한 줄에 다 안 들어간다. 배지+제목 / 발급근거 두 줄로 접는다. */
  .x-official-line { gap: 6px 10px; }
  .x-official-meta { flex-basis: 100%; }
  .x-proof-list { gap: 8px 18px; }
  .x-proof-list li { font-size: 13.5px; }
}

/* 움직임을 줄여달라는 설정을 존중한다 */
@media (prefers-reduced-motion: reduce) {
  .site-xnpc .card, .site-xnpc .case-card, .x-tile { transition: none; }
  .site-xnpc .card:hover, .site-xnpc .case-card:hover, a.x-tile:hover { transform: none; }
}

/* ── 팔지 않는 것 (소셜미션) ───────────────────────────────
   2026-10-02 사업방향 변경. 돈을 받고도 바꾸지 않는 것을 세 낱말로 못 박는다.
   글자는 진한 먹색 그대로 — 흐린 회색으로 톤을 내지 않는다(가독성 먼저). */
.site-xnpc .x-nosell {
  margin-top: var(--x-sp-m); padding: 20px 22px;
  border: 1px solid var(--x-line); border-left: 3px solid var(--x-ink); border-radius: var(--x-r-s);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; background: var(--white);
}
.site-xnpc .x-nosell b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--x-ink); }
.site-xnpc .x-nosell ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-xnpc .x-nosell li {
  font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--x-ink);
  padding: 7px 14px; border-radius: 999px; background: var(--x-bg);
}
.site-xnpc .x-principles p b { color: var(--x-ink); font-weight: 650; }

/* ── 포트폴리오 (#works) ───────────────────────────────────
   갈래 단추 + 카드. 카드는 .case-card 를 그대로 쓰고 갈래·맡은 일·링크만 얹는다.
   글자는 진한 먹색, 단추는 손가락으로 누르기 넉넉하게(가독성 먼저). */
.site-xnpc .x-pf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--x-sp-l); }
.site-xnpc .x-pf-tabs button {
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.02em; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--x-line);
  background: var(--white); color: var(--x-ink);
}
.site-xnpc .x-pf-tabs button span { font-weight: 500; color: var(--x-ink-2); margin-left: 2px; }
.site-xnpc .x-pf-tabs button.is-on { background: var(--x-ink); border-color: var(--x-ink); color: #fff; }
.site-xnpc .x-pf-tabs button.is-on span { color: rgba(255,255,255,.75); }
.site-xnpc .x-pf-tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.site-xnpc .x-pf-tabs + .x-cards { margin-top: 20px; }
.site-xnpc .x-pf[hidden] { display: none; }
.site-xnpc .x-pf img { background: var(--x-bg); }
.site-xnpc .x-pf-cat { display: block; font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: -.01em; margin-bottom: 8px; }
.site-xnpc .x-pf-roles { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.site-xnpc .x-pf-roles li { font-size: 13px; font-weight: 600; color: var(--x-ink); padding: 5px 11px; border-radius: 999px; background: var(--x-bg); }
.site-xnpc .x-pf-link { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--green); text-decoration: none; }
.site-xnpc .x-pf-link:hover { text-decoration: underline; }