/* ==========================================================================
   안녕소프트 서브페이지 스킨 (v2) — 2026-08-08
   서비스 페이지 6종이 같은 컴포넌트를 erp-/rpa-/ocr-/wms-/auto- 로 제각각 부르고 있었다.
   전부 pg-* 로 통일하고, 이 파일 하나로 전체 디자인을 잡는다.
   (이름이 바뀌면서 각 페이지에 박혀 있던 옛 인라인 CSS 는 자연히 적용되지 않는다)
   색은 v2.css 의 토큰을 그대로 쓴다 — 화이트 + 안녕소프트 블루.
   ========================================================================== */

.pg, .pg *, .pg *::before, .pg *::after{ box-sizing: border-box; }

.pg{
  margin:0; background: var(--bg); color: var(--body);
  font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.75; letter-spacing:-.011em; word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.pg h1,.pg h2,.pg h3,.pg h4{ color: var(--ink); margin:0; line-height:1.3; letter-spacing:-.032em; font-weight:800; }
.pg p{ margin:0; }
.pg a{ text-decoration:none; }
.pg a:not([class]){ color: var(--blue-dk); }
.pg img{ max-width:100%; height:auto; display:block; }
.pg a:focus-visible, .pg button:focus-visible, .pg summary:focus-visible{
  outline:3px solid #9FAFFF; outline-offset:3px; border-radius:8px;
}

/* ---------- 컨테이너 / 섹션 ---------- */
.pg .pg-container, .pg .pg-wrap{ width: var(--container); margin-inline:auto; }
.pg .pg-section{ padding-block: var(--sec-y); background: var(--bg); }
.pg .pg-section.white{ background: var(--bg-soft); }   /* 옛 마크업의 white 를 그대로 활용해 교대 배경 */
.pg .pg-section > .pg-container,
.pg .pg-section > .pg-wrap{ width: var(--container); }

/* ---------- 히어로 ---------- */
.pg .pg-hero{
  position:relative; overflow:hidden;
  background:#fff; border-bottom:1px solid var(--line);
  padding-block: clamp(64px,8vw,116px);
  color: var(--body);
}
.pg .pg-hero::after{
  content:''; position:absolute; right:-10%; top:-42%;
  width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(33,69,255,.10), transparent 70%);
  pointer-events:none;
}
.pg .pg-hero > *{ position:relative; z-index:1; }
.pg .pg-hero h1{
  color: var(--ink);
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  letter-spacing:-.04em; line-height:1.22; max-width: 20ch;
}
.pg .pg-hero p{ margin-top:20px; max-width: 64ch; color: var(--muted); font-size: clamp(1rem,1.2vw,1.1rem); line-height:1.85; }
.pg .pg-kicker, .pg .pg-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; margin-bottom:22px;
  border:1px solid #D7DDFF; border-radius: var(--r-pill);
  background: var(--blue-lt); color: var(--blue-dk);
  font-size:.84rem; font-weight:700; letter-spacing:-.01em;
}
.pg .pg-hero-actions, .pg .pg-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

/* ---------- 버튼 ---------- */
.pg .pg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius: var(--r-pill);
  font-weight:700; font-size:.97rem; border:1px solid var(--blue);
  background: var(--blue); color:#fff; cursor:pointer;
  transition: background-color .16s ease, transform .16s ease;
}
.pg .pg-btn:hover{ background: var(--blue-dk); border-color: var(--blue-dk); transform: translateY(-1px); color:#fff; }
.pg .pg-btn.secondary, .pg .pg-btn.ghost, .pg .pg-btn.line{
  background:#fff; color: var(--ink); border-color: var(--line);
}
.pg .pg-btn.secondary:hover, .pg .pg-btn.ghost:hover, .pg .pg-btn.line:hover{
  background:#fff; border-color: var(--blue); color: var(--blue);
}

/* ---------- 섹션 제목 ---------- */
.pg .pg-section h2, .pg .pg-section-title{
  font-size: clamp(1.6rem, 2.9vw, 2.4rem); margin-bottom:14px;
}
.pg .lead, .pg .pg-copy{ color: var(--muted); font-size:1.03rem; max-width: 76ch; margin-bottom: clamp(28px,3.5vw,44px); }

/* ---------- 그리드 / 카드 ---------- */
.pg .pg-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: var(--gap); }
.pg .pg-grid.two, .pg .pg-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.pg .pg-card{
  display:flex; flex-direction:column; gap:11px;
  padding: clamp(20px,2.1vw,28px);
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pg a.pg-card:hover{ border-color:#C4CEFF; transform: translateY(-3px); box-shadow:0 16px 36px rgba(16,24,40,.08); }
.pg .pg-card h3{ font-size:1.13rem; letter-spacing:-.024em; }
.pg .pg-card p{ color: var(--muted); font-size:.95rem; line-height:1.72; }
.pg .pg-card ul{ margin:0; padding-left:1.1rem; color: var(--body); font-size:.95rem; line-height:1.85; }

/* ---------- 좌우 분할 ---------- */
.pg .pg-split{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px,4.5vw,68px); align-items:center;
}
.pg .pg-image{
  border:1px solid var(--line); border-radius: var(--r-lg);
  background:#fff; padding:14px; overflow:hidden;
}
.pg .pg-image img{ border-radius: 12px; width:100%; }

/* ---------- 흐름(플로우) ---------- */
/* 주의: -flow-wrap 은 카드 줄이 아니라 '이미지 + 설명' 좌우 래퍼다.
   한 요소가 pg-container 와 함께 쓰이는 경우가 있어 역할을 잘못 잡으면 컨테이너가 쪼개진다. */
.pg .pg-flow-wrap{
  display:grid; grid-template-columns: minmax(200px,.85fr) 1.7fr;
  gap: clamp(26px,3.6vw,56px); align-items:center;
}
.pg .pg-flow-image img{ border-radius: var(--r-lg); border:1px solid var(--line); }
.pg .pg-flow-content > .pg-flow-cards{ margin-top:24px; }

.pg .pg-flow, .pg .pg-flow-cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(176px,1fr)); gap:14px;
}
.pg .pg-flow-card, .pg .pg-flow-item{
  position:relative; padding:20px 18px;
  background:#fff; border:1px solid var(--line); border-radius: var(--r-md);
}
.pg .pg-flow-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-bottom:12px; border-radius:10px;
  background: var(--blue-lt); color: var(--blue-dk); font-weight:800; font-size:.9rem;
}
.pg .pg-flow-card h3, .pg .pg-flow-item h3{ font-size:1rem; margin-bottom:6px; }
.pg .pg-flow-card p, .pg .pg-flow-item p{ font-size:.89rem; color: var(--muted); line-height:1.62; }

/* ---------- 표 ---------- */
.pg .pg-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--r-lg); background:#fff; }
.pg .pg-table, .pg table{ width:100%; border-collapse:collapse; min-width:640px; }
.pg th, .pg td{ padding:15px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.95rem; }
.pg th{ background: var(--blue-lt); color: var(--blue-dk); font-weight:800; white-space:nowrap; }
.pg tr:last-child td{ border-bottom:0; }

/* ---------- 숫자 강조 ---------- */
.pg .pg-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: var(--gap); }
.pg .pg-stat{ padding-top:20px; border-top:2px solid var(--blue); }
.pg .pg-stat strong{ display:block; font-size: clamp(1.5rem,2.3vw,2rem); color: var(--ink); font-weight:800; letter-spacing:-.03em; }
.pg .pg-stat span, .pg .pg-stat p{ font-size:.9rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.pg .pg-card.faq-item{ gap:9px; }
.pg .pg-card.faq-item h3{ font-size:1.04rem; }
.pg .pg-faq{ border-top:1px solid var(--line); }

/* ---------- 목록 ---------- */
.pg .pg-list{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.pg .pg-list li{ position:relative; padding-left:25px; font-size:.97rem; }
.pg .pg-list li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; background: var(--blue);
}

/* ---------- 마무리 CTA ---------- */
.pg .pg-cta{
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  padding: clamp(32px,4vw,50px); border-radius: var(--r-lg);
  background: var(--blue); color:#fff;
}
.pg .pg-cta h2, .pg .pg-cta h3{ color: var(--ink); font-size: clamp(1.35rem,2.2vw,1.95rem); margin-bottom:8px; }
.pg .pg-cta p{ color: var(--body); }
.pg .pg-cta .pg-btn{ background: var(--blue); color:#fff; border-color: var(--blue); }
.pg .pg-cta .pg-btn:hover{ background: var(--blue-dk); color:#fff; border-color: var(--blue-dk); }

/* ---------- 태그 ---------- */
.pg .case-tag, .pg .pg-tag{
  align-self:flex-start; padding:5px 11px; border-radius: var(--r-pill);
  background: var(--blue-lt); color: var(--blue-dk); font-size:.76rem; font-weight:800;
}

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  .pg .pg-grid, .pg .pg-stats{ grid-template-columns: repeat(2,1fr); }
  .pg .pg-flow, .pg .pg-flow-cards, .pg .pg-flow-wrap{ grid-template-columns: repeat(2,1fr); }
  .pg .pg-split{ grid-template-columns: 1fr; }
}
@media (max-width:680px){
  .pg{ font-size:16px; }
  .pg .pg-grid, .pg .pg-grid.two, .pg .pg-stats,
  .pg .pg-flow, .pg .pg-flow-cards, .pg .pg-flow-wrap{ grid-template-columns: 1fr; }
  .pg .pg-hero-actions .pg-btn, .pg .pg-actions .pg-btn{ flex:1 1 100%; }
}

/* ---------- 답변 캡슐 ----------
   페이지 첫머리에서 "이 페이지가 답하는 것"을 한 문단으로 요약한 블록.
   답변엔진이 인용하기 좋은 자리이자, 고객이 3초 안에 읽는 자리다.
   접두어가 없어 이름이 안 바뀌었고 옛 CSS 의 padding 만 남아 어정쩡했다 → 의도된 형태로 정리. */
.pg .answer-capsule{
  margin-top: 22px;
  padding: 20px 24px;
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--blue-lt);
  color: var(--body);
  font-size: 1.02rem;
  line-height: 1.85;
  max-width: 72ch;
}

/* 옛 페이지에서 남아있을 수 있는 이름들 정리 */
.pg .white{ background: var(--bg-soft); }
.pg .lead{ margin-bottom: clamp(28px,3.5vw,44px); }
.pg .image{ border-radius: var(--r-lg); overflow:hidden; }

/* 섹션 위 작은 라벨 */
.pg .section-label{
  display:inline-block; margin-bottom:10px;
  font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color: var(--blue-dk);
}

/* ---------- 옛 마크업에서 넘어온 잔여 요소 정리 ---------- */

/* 흐름 카드의 번호(01, 02…) — 예전엔 파란 원 안 흰 글씨였는데
   배경이 사라져 흰 글씨만 남아 안 보였다. 배지로 되살린다. */
.pg .pg-flow-card > strong,
.pg .pg-flow-item > strong{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-bottom:12px; border-radius:10px;
  background: var(--blue-lt); color: var(--blue-dk);
  font-weight:800; font-size:.9rem;
}

/* 표 안의 강조 텍스트도 같은 이유로 흰 글씨만 남아 있었다 */
.pg table strong, .pg td strong, .pg th strong{ color: inherit; }

/* 공통 푸터(v2)를 서브페이지에서도 쓴다.
   .pg a 규칙이 더 강해서 푸터 링크 색을 덮으므로 한 단계 올려 잡는다. */
.pg .v2-footer a{ color:#C6D4E6; }
.pg .v2-footer a:hover{ color:#fff; }
.pg .v2-footer h3, .pg .v2-footer h4{
  color:#fff;
  /* .pg h3 의 음수 자간(-.032em)이 푸터 라벨의 넓은 자간을 덮어써서 여기서 되돌린다 */
  font-size:.82rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:16px;
}
.pg .v2-footer p, .pg .v2-footer li, .pg .v2-footer span{ color:#9FB2C9; }
.pg .v2-footer .v2-foot-about p{ color:#8FA3BC; }

/* ==========================================================================
   구축사례 페이지 전용 컴포넌트
   (case-panel 은 탭 전환 JS 와 서버 라우트가 참조하므로 이름을 바꾸지 않는다)
   ========================================================================== */

.pg .case-panel{ display:none; }
.pg .case-panel.active{ display:block; }

/* 사례 상단 태그 */
.pg .pg-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.pg .pg-tags span, .pg .pg-tags li{
  padding:7px 14px; border-radius: var(--r-pill);
  background: var(--blue-lt); color: var(--blue-dk);
  font-size:.84rem; font-weight:700; list-style:none;
}

/* 업무 흐름 단계 */
.pg .flow-diagram{
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px,2.4vw,30px);
}
.pg .flow-steps{ display:grid; grid-template-columns: repeat(auto-fit, minmax(168px,1fr)); gap:14px; }
.pg .flow-step{
  position:relative; padding:20px 18px; text-align:left;
  background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--r-md);
}
.pg .flow-step strong, .pg .flow-step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-bottom:11px; border-radius:9px;
  background:#fff; border:1px solid #D7DDFF; color: var(--blue-dk);
  font-weight:800; font-size:.86rem;
}
.pg .flow-step h3{ font-size:.99rem; margin-bottom:6px; }
.pg .flow-step p{ font-size:.88rem; color: var(--muted); line-height:1.62; }

/* 도입 효과 */
.pg .effect-diagram{ display:grid; grid-template-columns: repeat(auto-fit, minmax(216px,1fr)); gap: var(--gap); }
.pg .effect-card{
  padding: clamp(20px,2.1vw,26px);
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  border-top:3px solid var(--blue);
}
.pg .effect-card .num, .pg .effect-card strong{
  display:block; margin-bottom:9px;
  color: var(--blue-dk); font-weight:800; font-size:.84rem; letter-spacing:.06em;
}
.pg .effect-card h3{ font-size:1.06rem; margin-bottom:8px; }
.pg .effect-card p{ font-size:.93rem; color: var(--muted); line-height:1.7; }

/* 기술 구성 / 보안 계층 */
.pg .architecture{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
.pg .arch-box{
  padding:18px 16px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius: var(--r-md);
  font-weight:700; color: var(--ink); font-size:.94rem;
}
.pg .security-layers{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.pg .security-layer{
  padding:18px 20px;
  background: var(--blue-lt); border:1px solid #DAE0FF; border-radius: var(--r-md);
  color: var(--body); font-size:.93rem;
}
.pg .security-layer strong{ display:block; color: var(--ink); margin-bottom:5px; }

/* 정렬 보조 */
.pg .center{ text-align:center; }
.pg .center .lead{ margin-inline:auto; }
/* 2026-08-14 걷어냄: 86행의 2열 정의를 덮어써 FAQ 가 3열로 깔렸다.
   되살리려면 아래 한 줄의 주석을 풀면 된다.
.pg .pg-grid.two{ grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); } */
.pg .pg-split.reverse > *:first-child{ order:2; }

@media (max-width:680px){
  .pg .pg-split.reverse > *:first-child{ order:0; }
}

/* ---------- 그리드 가로 넘침 방지 ----------
   그리드/플렉스 자식은 기본값이 min-width:auto 라서 내용(예: min-width 640px 인 표)보다
   작아지지 못한다. 그 결과 칸이 밀려 컨테이너까지 뷰포트를 넘어간다.
   자식이 줄어들 수 있게 열어주고, 넘치는 표는 자기 안에서 가로 스크롤되게 한다. */
.pg .pg-split > *,
.pg .pg-grid > *,
.pg .pg-flow-wrap > *,
.pg .pg-flow > *,
.pg .pg-flow-cards > *,
.pg .effect-diagram > *,
.pg .architecture > *,
.pg .security-layers > *,
.pg .flow-steps > *{ min-width: 0; }

.pg .pg-table-wrap{ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg .pg-image, .pg .pg-image img, .pg .case-image, .pg .case-image img{ max-width: 100%; }

/* ---------- 카드 안 라벨 ----------
   '도입 전 / 구축 내용 / 도입 후' 같은 라벨이 예전엔 색 배경 위 흰 글씨였는데,
   배경이 사라지면서 흰 글씨만 남아 안 보였다. 배지로 되살린다. */
.pg .pg-card > strong{
  align-self:flex-start;
  padding:5px 11px; border-radius: var(--r-pill);
  background: var(--blue-lt); color: var(--blue-dk);
  font-size:.78rem; font-weight:800; letter-spacing:-.01em;
}

/* ---------- 아직 남은 옛 Hyperspace 섹션 ----------
   barcode 의 '관련 콘텐츠' 한 곳. 어두운 배경 전제로 만들어져 있어
   새 밝은 테마에서 글자가 안 보인다. 밝은 테마로 맞춘다. */
.pg section.wrapper{
  background: var(--bg-soft) !important;
  color: var(--body);
  padding-block: var(--sec-y) !important;
}
.pg section.wrapper > .inner{
  width: var(--container) !important; max-width:none !important; margin-inline:auto !important;
  padding-left:0 !important; padding-right:0 !important;
}
.pg section.wrapper h1, .pg section.wrapper h2,
.pg section.wrapper h3, .pg section.wrapper h4{ color: var(--ink) !important; }
.pg section.wrapper p, .pg section.wrapper li{ color: var(--muted); }
.pg section.wrapper a{ color: var(--blue-dk); }
.pg section.wrapper a:hover{ text-decoration: underline; text-underline-offset:3px; }

/* 모바일에서 블로그 링크 탭 영역 */
@media (max-width:1024px){
  .pg section.wrapper a{ display:inline-block; padding:9px 0; min-height:40px; }
}

/* 문단 안에 인라인으로 쓰인 강조는 배지가 아니라 글자색만 바로잡는다.
   (예: "<strong>도입 전</strong> 수기로 장부를…") — 옛 CSS 의 흰 글씨가 남아 안 보였다. */
.pg .pg-card p strong,
.pg .pg-card p b,
.pg .pg-card li strong,
.pg p > strong, .pg li > strong{ color: var(--ink); }

/* 모바일: 카드 안에 한 줄로 놓인 링크의 탭 영역 확보.
   :only-child 로 제한해 문장 중간에 섞인 링크는 줄 흐름을 깨지 않게 둔다. */
@media (max-width:1024px){
  .pg .pg-card p > a:only-child,
  .pg .pg-card li > a:only-child{
    display:inline-block; padding:10px 0; min-height:40px;
  }
}

/* ---------- 업종별 페이지: 어두운 히어로를 흰 히어로로 ----------
   이 페이지만 접두어 없는 클래스(hero/section/container)를 써서 이름 통일에서 빠졌다.
   그 결과 혼자 어두운 히어로로 남아 통일감이 깨졌다.
   `.pg .hero` 로 좁혀 잡는다 (wedding 페이지는 .pg 가 없어 영향 없음). */
.pg .hero{
  background: #fff !important;
  border-bottom: 1px solid var(--line);
  color: var(--body);
}
.pg .hero::before, .pg .hero::after{ display:none !important; }
.pg .hero h1{ color: var(--ink) !important; }
.pg .hero p, .pg .hero .answer, .pg .hero .lead{ color: var(--muted) !important; }
.pg .hero .kicker, .pg .hero .eyebrow, .pg .hero .tag{
  background: var(--blue-lt) !important;
  color: var(--blue-dk) !important;
  border: 1px solid #D7DDFF !important;
}
.pg .hero .btn, .pg .hero .pg-btn{ border-color: var(--blue); }
.pg .hero .btn.secondary, .pg .hero .pg-btn.secondary{
  background:#fff !important; color: var(--ink) !important; border-color: var(--line) !important;
}

/* rpa 등 일부 페이지는 flow-card 를 접두어 없이 써서 이름 통일에서 빠졌다.
   옅은 파랑 배경 위 기본 파랑(#2145FF)은 대비 4.36 으로 기준(4.5) 미달 → 진한 파랑으로. */
.pg .flow-card > strong,
.pg .flow-list .flow-card strong,
.pg .impact-card strong{
  color: var(--blue-dk);
  background: var(--blue-lt);
}
.pg .flow-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(176px,1fr)); gap:14px; }
.pg .flow-list > *{ min-width:0; }

/* 안내 박스 — 연한 주황 배경 위에 흰 글씨 라벨이 남아 안 보였다.
   경고/안내는 파랑 계열과 구분돼야 하므로 주황 계열을 유지하되 대비를 맞춘다. */
.pg .notice-box{
  background:#FFF7ED; border:1px solid #FED7AA; border-radius: var(--r-md);
  padding: clamp(18px,2vw,24px); color:#7C2D12;
}
.pg .notice-box strong, .pg .notice-box b{ color:#7C2D12; }
.pg .notice-box p, .pg .notice-box li{ color:#8A3A17; }

/* ==========================================================================
   v2.2 — 서브페이지도 '어둡게 열고 밝게 전개' 로 통일
   홈만 어두운 히어로면 페이지를 옮길 때마다 인상이 끊긴다.
   ========================================================================== */
.pg .pg-hero,
.pg .hero{
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--body);
}
.pg .pg-hero::after{
  background: radial-gradient(circle, rgba(33,69,255,.10), transparent 70%);
}
.pg .pg-hero h1, .pg .hero h1{ color: var(--ink) !important; }
.pg .pg-hero p, .pg .hero p,
.pg .hero .answer, .pg .hero .lead{ color: var(--body) !important; }

.pg .pg-kicker, .pg .pg-eyebrow,
.pg .hero .kicker, .pg .hero .eyebrow, .pg .hero .tag{
  background: var(--blue-lt) !important;
  border: 1px solid #D7DDFF !important;
  color: var(--blue-dk) !important;
}

/* 히어로 안 태그칩 (흰 배경 기준) */
.pg .pg-hero .pg-tags span, .pg .pg-hero .pg-tags li{
  background: var(--bg-soft); color: var(--muted);
}

/* 히어로 안 보조 버튼 */
.pg .pg-hero .pg-btn.secondary, .pg .pg-hero .pg-btn.ghost, .pg .pg-hero .pg-btn.line,
.pg .hero .btn.secondary, .pg .hero .pg-btn.secondary{
  background:#fff !important;
  border-color:#D3DBE6 !important;
  color: var(--ink) !important;
}
.pg .pg-hero .pg-btn.secondary:hover, .pg .hero .btn.secondary:hover{
  background: var(--bg-soft) !important; color: var(--ink) !important;
}

/* 히어로 안 답변 캡슐 — 어두운 배경에 맞춘다 */
.pg .pg-hero .answer-capsule{
  background: var(--bg-soft);
  border-left-color: var(--blue);
  color: var(--body);
}

/* 섹션 구분용 회색도 홈과 같은 값으로 */
.pg .pg-section.white, .pg .white{ background: var(--bg-soft); }

/* 카드는 선을 없애고 면으로 (홈과 동일 규칙) */
.pg .pg-section .pg-card{ background: var(--bg-soft); border:0; }
.pg .pg-section.white .pg-card{ background:#fff; }
.pg a.pg-card:hover{ box-shadow: 0 18px 40px rgba(12,17,22,.10); border:0; }
.pg .pg-image, .pg .case-image{ border:0; }
.pg .flow-step, .pg .effect-card, .pg .arch-box, .pg .pg-flow-card, .pg .pg-flow-item{ border:0; }
.pg .pg-section .flow-step, .pg .pg-section .pg-flow-card{ background: var(--bg-soft); }
.pg .pg-section.white .flow-step, .pg .pg-section.white .pg-flow-card{ background:#fff; }

/* 마무리 CTA 는 먹색으로 (홈과 동일) */
.pg .pg-cta{ background: var(--blue-lt); }
.pg .pg-cta p{ color: var(--body); }


/* 먹색 히어로 안의 지표 블록 */
/* .pg-stat 은 밝은 섹션 기준(--ink/--muted)이라 먹색 히어로 안에서는 검정 위 검정이 된다.
   barcode 히어로에서 대비 1.01 로 글자가 사라졌던 자리 — 히어로 안쪽만 뒤집는다. */
.pg .pg-hero .pg-stat strong{ color: var(--ink); }
.pg .pg-hero .pg-stat span,
.pg .pg-hero .pg-stat p{ color: var(--muted); }
.pg .pg-hero .pg-stat{ background: var(--bg-soft); }


/* 이미지 빈 칸 */
/* 최재원이 이미지를 전부 새로 만들기로 해서, 자리만 비워두고 무엇이 들어갈지 표시한다.
   비율(aspect-ratio)은 각 칸에 인라인으로 박아뒀다 — 이미지를 넣어도 레이아웃이 안 흔들린다. */
.pg .pg-image.is-slot,
.pg .pg-flow-image.is-slot,
.pg .case-image.is-slot{
  position:relative; display:flex; align-items:center; justify-content:center;
  border-radius: var(--r-lg, 18px);
  background: linear-gradient(135deg, #F5F7FF 0%, #EBEEFF 100%);
  border:1px dashed #B5C1FF;
  padding:18px; overflow:hidden;
}
.pg .pg-image.is-slot[data-label]::after,
.pg .pg-flow-image.is-slot[data-label]::after,
.pg .case-image.is-slot[data-label]::after{
  content: attr(data-label);
  max-width:90%; text-align:center; line-height:1.55;
  padding:10px 16px; border-radius:12px;
  background: rgba(255,255,255,.9);
  color: var(--blue-dk, #1B39D1); font-size:.84rem; font-weight:700;
}
/* 어두운 히어로 안의 빈 칸은 톤을 뒤집는다 */
.pg .pg-hero .is-slot{ background: linear-gradient(135deg,#F5F7FF 0%,#EBEEFF 100%); border-color:#B5C1FF; }
.pg .pg-hero .is-slot[data-label]::after{ background: rgba(255,255,255,.9); color: var(--blue-dk); }

/* 이미지를 넣으면 자리표시 흔적은 사라진다 */
/* 같은 이유로 :empty 기준 — 이미지를 넣으면 자리표시 흔적이 사라진다 */
.pg .is-slot[data-label]:not(:empty)::after{ content:none; }
.pg .is-slot:not(:empty){ border:0; padding:0; background:#f5f8fc; }
.pg .is-slot > img{ width:100%; height:100%; object-fit:contain; border-radius:inherit; }
.pg figure.pg-image,
.pg figure.pg-flow-image,
.pg figure.case-image{ margin:0; }


/* 표가 든 2단 구획 */
/* 비교표가 2단 구획의 한 칸(587px)에 갇혀 데스크톱에서도 53px 잘려 나갔다.
   표는 넓어야 읽히므로, 표를 품은 구획만 세로로 펴서 전체 폭을 쓰게 한다.
   (표가 없는 2단 구획은 :has() 덕분에 그대로 2단으로 남는다) */
.pg .pg-split:has(.pg-table-wrap),
.pg .pg-split:has(> .pg-table){
  grid-template-columns: 1fr;
  gap: 28px;
}
/* reverse 는 좌우를 바꾸는 규칙이라 세로로 펴면 의미가 없다 — 순서를 원래대로 */
.pg .pg-split.reverse:has(.pg-table-wrap) > *{ order: 0; }
.pg .pg-split:has(.pg-table-wrap) .pg-table-wrap{ margin-top: 4px; }

/* 표 구획 안의 이미지 자리까지 전체 폭이 되면 과하게 커진다(589 -> 1240px).
   표만 넓히고 이미지는 원래 크기 수준으로 묶는다. 실제 사진이 들어와도 같은 이유로 필요하다. */
.pg .pg-split:has(.pg-table-wrap) > .pg-image,
.pg .pg-split:has(.pg-table-wrap) > .pg-flow-image{
  width: 100%;              /* 그리드에서 margin:auto 를 주면 stretch 가 꺼져 내용 크기로 줄어든다 */
  max-width: 620px;
  margin-inline: auto;
}


/* 서브페이지 FAQ 아코디언 */
/* 15문항이 전부 펼쳐져 모바일에서 3,500px 을 쓰던 것을 접는다. 홈과 같은 방식. */
.pg details.faq-item,
.pg .pg-faq details{ cursor: pointer; }
.pg details.faq-item > summary,
.pg .pg-faq details > summary{
  list-style: none; cursor: pointer;
  font-size: 1.02rem; font-weight: 800; color: var(--ink);
  line-height: 1.5; letter-spacing: -.02em;
  display: flex; align-items: flex-start; gap: 10px;
}
.pg details.faq-item > summary::-webkit-details-marker,
.pg .pg-faq details > summary::-webkit-details-marker{ display:none; }
.pg details.faq-item > summary::after,
.pg .pg-faq details > summary::after{
  content: '+'; margin-left: auto; flex: 0 0 auto;
  font-weight: 700; color: var(--blue-dk); font-size: 1.2rem; line-height: 1;
}
.pg details.faq-item[open] > summary::after,
.pg .pg-faq details[open] > summary::after{ content: '−'; }
.pg details.faq-item > p,
.pg .pg-faq details > p{
  margin: 12px 0 0; color: var(--muted); line-height: 1.75; font-size: .95rem;
}
.pg details.faq-item > summary:focus-visible{
  outline: 3px solid #9FAFFF; outline-offset: 3px; border-radius: 8px;
}


/* ===== 서브페이지 모바일 압축 (2026-08-11) ===== */
@media (max-width: 680px){

  /* 섹션 여백 — 10개 섹션에서 가장 크게 절약된다 (136px -> 96px) */
  .pg .pg-section{ padding-block: 48px; }
  .pg .pg-hero{ padding-block: 44px 48px; }

  /* 카드 그리드 2열 — 제목이 짧은 카드들만. FAQ(two)와 표는 제외한다. */
  .pg .pg-grid:not(.two){ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pg .pg-grid:not(.two) > .pg-card{ padding: 16px 14px; }
  .pg .pg-grid:not(.two) > .pg-card h3{ font-size:1rem; line-height:1.4; margin-bottom:6px; }
  .pg .pg-grid:not(.two) > .pg-card p{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; font-size:.88rem; line-height:1.6;
  }

  /* FAQ 는 1열 유지 — 질문이 길어 2열이면 읽기 어렵다 */
  .pg .pg-grid.two{ grid-template-columns: 1fr; gap: 10px; }
  .pg details.faq-item, .pg .pg-faq details{ padding: 14px 16px; }

  /* 흐름 카드 */
  .pg .pg-flow-cards{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pg .pg-flow-card{ padding: 16px 14px; }

  /* 이미지 자리 라벨이 좁은 화면에서 넘치지 않게 */
  .pg .is-slot[data-label]::after{ font-size:.78rem; padding:8px 12px; }
}

/* 히어로 후크 — answer-capsule 은 AI 용 정의라 손대지 않고, 사람용 한 줄을 그 위에 둔다 */
.pg .pg-hero p.pg-hook,
.pg .pg-hook{ margin:22px 0 18px; font-size:clamp(1.22rem, 2.05vw, 1.55rem); font-weight:800;
  /* 위쪽 override 레이어(443행)가 히어로 문단 색을 !important 로 잡고 있다. 같은 방식으로 이긴다. */
  color:var(--ink) !important; letter-spacing:-.04em; line-height:1.45; max-width:40ch; }
@media (max-width:680px){ .pg .pg-hero p.pg-hook, .pg .pg-hook{ font-size:1.15rem; margin:16px 0 12px; } }

/* 화면 아래 사실 — 이미지 안에 넣으면 모바일에서 못 읽는다. 글자는 글자로 둔다 */
.pg .pg-shotfacts{ list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pg .pg-shotfacts li{ border-top:2px solid var(--blue); padding-top:9px; }
.pg .pg-shotfacts b{ display:block; font-size:.9rem; font-weight:800; color:var(--ink);
  letter-spacing:-.03em; }
.pg .pg-shotfacts span{ display:block; margin-top:5px; font-size:.84rem; color:var(--muted);
  line-height:1.6; }
@media (max-width:680px){
  .pg .pg-shotfacts{ grid-template-columns:1fr; gap:10px; margin-top:12px; }
  .pg .pg-shotfacts li{ padding-top:8px; }
  .pg .pg-shotfacts b{ font-size:.92rem; } .pg .pg-shotfacts span{ font-size:.88rem; }
}

/* 그림 + 사실목록을 한 칸으로. 따로 두면 .pg-split 의 세 번째 칸이 된다 */
.pg .pg-shotcol{ min-width:0; }
.pg .pg-shotcol > .pg-image, .pg .pg-shotcol > .pg-flow-image{ margin:0; }

/* 그림이 아직 없는 자리에서는 설명도 숨긴다. 없는 그림을 설명하는 글이 되면 안 된다 */
.pg .pg-shotcol.is-empty .pg-shotfacts{ display:none; }

/* faqui_20260814 — 2열 FAQ 에서 한쪽을 펼치면 반대편 닫힌 항목이
   같은 행 높이로 늘어나 빈 상자가 됐다. details 는 제 높이만 쓰게 한다.
   (같은 그리드의 pg-card 는 높이가 맞는 편이 나으므로 건드리지 않는다) */
.pg .pg-grid.two > details{ align-self: start; }

/* 주희님 이미지(그림자 포함 투명 PNG)가 든 칸은 테두리를 씌우지 않는다 (2026-08-14) */
.pg figure.pg-flow-image.is-bare,
.pg figure.pg-image.is-bare{ background:none; border:0; box-shadow:none; overflow:visible; }
.pg .pg-flow-image.is-bare img,
.pg .pg-image.is-bare img{ border:0; border-radius:0; box-shadow:none; }