/* Safe Guardner 리뉴얼 화면 스타일 (2026-11-12) = 디자인 시스템 11판(변수 + components/bundle.css) + 사이트 적용분.
   고칠 때는 디자인 시스템과 같이 고친다. 글꼴은 Pretendard 1.3.9 공식 서브셋(SIL OFL 1.1, orioncactus/pretendard — 서브셋에 없는 글자는 기기 기본 글꼴로 보인다), 아이콘은 Lucide 0.468.0(ISC) 선 그림. */
.sg { --brand: #fc6420; --brand-strong: #c2410c; --brand-strong-hover: #9a3412; --on-brand: #ffffff; --brand-soft: #fff5ef; --brand-line: #fcd9c6; --ink: #101828; --ink-body: #475467; --ink-muted: #667085; --surface: #ffffff; --canvas: #f5f9fc; --surface-muted: #f2f4f7; --line: #e6ecf2; --line-strong: #d0d5dd; --on-dark: #f2f4f7; --on-dark-muted: #98a2b3; --focus: #2e6be6; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-20: 80px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.05); --container-max: 1200px; --header-height: 72px; --breakpoint: 768px; --font-sans: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
@font-face { font-family: Pretendard; src: url("/assets/renewal/font/Pretendard-Regular.subset.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Pretendard; src: url("/assets/renewal/font/Pretendard-SemiBold.subset.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Pretendard; src: url("/assets/renewal/font/Pretendard-Bold.subset.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Safe Guardner 컴포넌트 스타일 — 참고 시안(2026-11) 기준.
   색·간격·모서리·그림자는 tokens.json의 CSS 변수를 쓰고, var()의 두 번째 값은 변수가 없을 때의 대체값이다.
   글자 크기·행간은 tokens.json 글꼴 스타일(PC·모바일)과 같은 값이다. 모든 클래스는 sg- 로 시작한다. */

/* ---------- 바탕 ---------- */
.sg { font-family: var(--font-sans, Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif); font-size: 16px; line-height: 26px; color: var(--ink-body, #475467); word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
/* 기본값은 :where()로 감싸 우선순위를 0으로 둔다 — 컴포넌트 클래스가 항상 이긴다 */
:where(.sg) *, :where(.sg) *::before, :where(.sg) *::after { box-sizing: border-box; }
:where(.sg) img { display: block; max-width: 100%; height: auto; }
:where(.sg) :where(h1, h2, h3, p, ul, ol, figure, dl, dd) { margin: 0; }
:where(.sg) :where(ul, ol) { padding: 0; list-style: none; }
:where(.sg) a { color: inherit; }
:where(.sg) :focus-visible { outline: 2px solid var(--focus, #2e6be6); outline-offset: 2px; }
/* 그리드·플렉스 칸이 사진 원래 폭 때문에 칸 밖으로 밀리지 않게 한다 */
:where(.sg-cards, .sg-steps, .sg-diagrams, .sg-chips, .sg-certs, .sg-certs__docs, .sg-hero__in, .sg-variant__in, .sg-variant__media, .sg-footer__in) > * { min-width: 0; }
.sg-page { background: var(--canvas, #f5f9fc); }
.sg-container { max-width: calc(var(--container-max, 1200px) + 48px); margin-inline: auto; padding-inline: var(--space-6, 24px); }
.sg-section { padding-top: var(--space-20, 80px); scroll-margin-top: 136px; }
.sg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 사진 칸: 칸 크기를 정하고 사진은 칸 안에 맞춘다 */
.sg-fit { position: relative; overflow: hidden; }
.sg-fit > img, .sg-fit > .sg-ph { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sg-fit > img { object-fit: contain; }
.sg-fit--cover > img { object-fit: cover; }
@media (max-width: 767px) {
  .sg-container { padding-inline: var(--space-4, 16px); }
  .sg-section { padding-top: var(--space-12, 48px); scroll-margin-top: 120px; }
}
@media (prefers-reduced-motion: reduce) { .sg * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- 아이콘 (FeatureIcon) ---------- */
.sg-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sg-ring { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radius-full, 999px); border: 1.5px solid var(--brand, #fc6420); background: var(--surface, #fff); color: var(--brand, #fc6420); }
.sg-ring .sg-ico { width: 28px; height: 28px; }
.sg-ring--md { width: 44px; height: 44px; }
.sg-ring--md .sg-ico { width: 22px; height: 22px; }
.sg-ring--sm { width: 36px; height: 36px; border-width: 1.25px; }
.sg-ring--sm .sg-ico { width: 18px; height: 18px; }
.sg-ring--fill { border-color: var(--brand, #fc6420); background: var(--brand, #fc6420); color: var(--on-brand, #fff); }
.sg-glyph { display: inline-grid; place-items: center; color: var(--brand, #fc6420); }
.sg-glyph .sg-ico { width: 40px; height: 40px; stroke-width: 1.75; }

/* ---------- 자리 표시(원본 사진·로고 대기) ---------- */
.sg-ph { display: grid; place-items: center; align-content: center; gap: var(--space-2, 8px); width: 100%; height: 100%; min-height: 96px; padding: var(--space-4, 16px); background: var(--canvas, #f5f9fc); border: 1.5px dashed var(--line-strong, #d0d5dd); border-radius: inherit; color: var(--ink-muted, #667085); font-size: 13px; line-height: 18px; text-align: center; }
.sg-ph .sg-ico { width: 28px; height: 28px; }
.sg-gallery__main > .sg-ph, .sg-media__img > .sg-ph, .sg-step__media > .sg-ph, .sg-variant__photo > .sg-ph, .sg-hero__note-img > .sg-ph, .sg-thumb > .sg-ph { position: absolute; inset: 0; min-height: 0; }
.sg-pending { display: inline-block; padding: 2px 8px; border: 1px dashed var(--line-strong, #d0d5dd); border-radius: var(--radius-full, 999px); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0; color: var(--ink-muted, #667085); vertical-align: middle; }

/* ---------- 글자 묶음 ---------- */
.sg-eyebrow { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand, #fc6420); }
.sg-sechead { display: grid; gap: var(--space-2, 8px); max-width: 60rem; margin-bottom: var(--space-8, 32px); }
.sg-sechead__title { font-size: 34px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink, #101828); text-wrap: balance; }
.sg-sechead__desc { font-size: 17px; line-height: 28px; color: var(--ink-body, #475467); }
.sg-sechead--page .sg-sechead__title { font-size: 44px; line-height: 56px; }
.sg-sechead--sub .sg-sechead__title { font-size: 26px; line-height: 34px; }
.sg-sechead--row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-6, 24px); }
.sg-sechead--row > :not(.sg-sechead__aside) { grid-column: 1; }
.sg-sechead__aside { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
@media (max-width: 767px) {
  .sg-sechead__title { font-size: 24px; line-height: 32px; }
  .sg-sechead--page .sg-sechead__title { font-size: 30px; line-height: 38px; }
  .sg-sechead--sub .sg-sechead__title { font-size: 20px; line-height: 28px; }
  .sg-sechead__desc { font-size: 15px; line-height: 24px; }
  .sg-sechead { margin-bottom: var(--space-6, 24px); }
}

/* ---------- 버튼 ---------- */
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px); min-height: 48px; padding: 0 var(--space-6, 24px); border: 1px solid transparent; border-radius: var(--radius-md, 12px); font: inherit; font-size: 16px; line-height: 22px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.sg-btn .sg-ico { width: 20px; height: 20px; }
.sg-btn--primary { background: var(--brand, #fc6420); color: var(--on-brand, #fff); }
.sg-btn--primary:hover { background: var(--brand-strong, #c2410c); }
.sg-btn--secondary { background: var(--surface, #fff); border-color: var(--line-strong, #d0d5dd); color: var(--ink, #101828); }
.sg-btn--secondary:hover { border-color: var(--brand, #fc6420); color: var(--brand-strong, #c2410c); }
.sg-btn--text { min-height: 40px; padding: 0; background: none; color: var(--brand, #fc6420); }
.sg-btn--text:hover { color: var(--brand-strong, #c2410c); text-decoration: underline; text-underline-offset: 3px; }
.sg-btn--sm { min-height: 40px; padding: 0 var(--space-4, 16px); font-size: 15px; }

/* ---------- 헤더 ---------- */
.sg-header { container-type: inline-size; position: sticky; top: 0; z-index: 30; background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e6ecf2); }
.sg-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6, 24px); height: var(--header-height, 72px); }
.sg-logo { display: inline-flex; align-items: center; text-decoration: none; }
.sg-logo img { height: 30px; width: auto; max-width: none; }
.sg-wordmark { display: inline-flex; align-items: center; gap: var(--space-2, 8px); font-size: 21px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink, #101828); text-decoration: none; white-space: nowrap; }
.sg-nav { display: flex; gap: var(--space-8, 32px); }
.sg-nav a { position: relative; display: block; padding: 24px 4px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink, #101828); text-decoration: none; white-space: nowrap; }
.sg-nav a:hover, .sg-nav a[aria-current="page"] { color: var(--brand, #fc6420); }
.sg-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand, #fc6420); }
.sg-menu-btn { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm, 8px); background: none; color: var(--ink, #101828); cursor: pointer; }
.sg-mnav { border-top: 1px solid var(--line, #e6ecf2); background: var(--surface, #fff); }
.sg-mnav a { display: block; padding: 14px var(--space-4, 16px); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink, #101828); text-decoration: none; border-bottom: 1px solid var(--line, #e6ecf2); }
.sg-mnav a[aria-current="page"] { color: var(--brand, #fc6420); }
@container (max-width: 767px) {
  .sg-header__in { height: 60px; }
  .sg-nav { display: none; }
  .sg-menu-btn { display: inline-grid; }
  .sg-logo img { height: 26px; }
}

/* ---------- 브레드크럼 ---------- */
.sg-crumb { padding-block: var(--space-4, 16px); }
.sg-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1, 4px) var(--space-2, 8px); font-size: 14px; line-height: 22px; color: var(--ink-muted, #667085); }
.sg-crumb li { display: inline-flex; align-items: center; gap: var(--space-2, 8px); }
.sg-crumb li + li::before { content: "›"; color: var(--ink-muted, #667085); }
.sg-crumb a { display: inline-flex; align-items: center; gap: var(--space-1, 4px); text-decoration: none; }
.sg-crumb a:hover { color: var(--ink, #101828); text-decoration: underline; text-underline-offset: 3px; }
.sg-crumb a .sg-ico { width: 16px; height: 16px; }
.sg-crumb [aria-current="page"] { font-weight: 600; color: var(--ink-body, #475467); }

/* ---------- 섹션 탭 ---------- */
.sg-tabs { position: sticky; top: var(--header-height, 72px); z-index: 20; padding-block: var(--space-3, 12px); background: var(--surface, #fff); border-block: 1px solid var(--line, #e6ecf2); }
.sg-tabs__list { display: flex; gap: var(--space-2, 8px); overflow-x: auto; scrollbar-width: none; }
.sg-tabs__list::-webkit-scrollbar { display: none; }
.sg-tabs__list a { flex: 1 0 auto; min-width: 112px; padding: 11px 20px; border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink-body, #475467); text-align: center; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.sg-tabs__list a:hover { border-color: var(--brand-line, #fcd9c6); color: var(--brand, #fc6420); }
.sg-tabs__list a[aria-current="true"] { background: var(--brand, #fc6420); border-color: var(--brand, #fc6420); color: var(--on-brand, #fff); font-weight: 700; }
@media (max-width: 767px) { .sg-tabs { top: 60px; } .sg-tabs__list a { min-width: 0; padding-inline: 16px; } }

/* ---------- 카테고리 칩(목록) ---------- */
.sg-catnav { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.sg-catnav a { display: inline-flex; align-items: center; gap: var(--space-1, 4px); min-height: 36px; padding: 6px 14px; border: 1px solid var(--line-strong, #d0d5dd); border-radius: var(--radius-full, 999px); background: var(--surface, #fff); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-body, #475467); text-decoration: none; }
.sg-catnav a span { font-variant-numeric: tabular-nums; }
.sg-catnav a:hover { border-color: var(--brand, #fc6420); color: var(--brand, #fc6420); }

/* ---------- 목록 페이지 ---------- */
.sg-pagehead { padding-block: var(--space-12, 48px) var(--space-8, 32px); background: var(--surface-muted, #f2f4f7); border-bottom: 1px solid var(--line, #e6ecf2); }
.sg-pagehead .sg-sechead { margin-bottom: 0; }
.sg-catbar { padding-block: var(--space-4, 16px); background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e6ecf2); }
.sg-catsec { padding-top: var(--space-12, 48px); }
.sg-catsec + .sg-catsec { margin-top: var(--space-12, 48px); border-top: 1px solid var(--line, #e6ecf2); }

/* ---------- 히어로 ---------- */
.sg-hero { container-type: inline-size; padding-top: var(--space-2, 8px); }
.sg-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8, 32px); align-items: start; }
.sg-gallery { display: grid; gap: var(--space-3, 12px); padding: var(--space-6, 24px); border-radius: var(--radius-lg, 20px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-gallery__main { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-md, 12px); background: var(--surface-muted, #f2f4f7); }
.sg-gallery__main > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: var(--space-6, 24px); mix-blend-mode: multiply; }
/* --photo: a full-bleed scene photo (installed CCTV etc.) fills the box instead of floating on the panel */
.sg-gallery__main--photo > img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.sg-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.sg-thumb { position: relative; overflow: hidden; width: 84px; height: 68px; padding: 0; border: 1.5px solid var(--line, #e6ecf2); border-radius: var(--radius-sm, 8px); background: var(--surface, #fff); cursor: pointer; }
.sg-thumb[aria-current="true"] { border-color: var(--brand, #fc6420); border-width: 2px; }
.sg-thumb > img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); max-width: none; object-fit: contain; }
.sg-thumb--photo > img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-hero__body { display: grid; gap: var(--space-5, 20px); padding-top: var(--space-4, 16px); }
.sg-hero__head { display: grid; gap: 2px; }
.sg-hero__en { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted, #667085); }
.sg-hero__title { margin-top: var(--space-1, 4px); font-size: 44px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink, #101828); text-wrap: balance; }
.sg-hero__lead { display: grid; gap: var(--space-2, 8px); font-size: 17px; line-height: 28px; color: var(--ink-body, #475467); }
.sg-hero__note { display: flex; align-items: center; gap: var(--space-4, 16px); padding: var(--space-4, 16px); border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-hero__note-img { position: relative; overflow: hidden; flex: none; width: 160px; aspect-ratio: 16 / 10; border-radius: var(--radius-sm, 8px); background: var(--surface-muted, #f2f4f7); }
.sg-hero__note-img > img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.sg-hero__note h2 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink, #101828); }
.sg-hero__note p { margin-top: var(--space-1, 4px); font-size: 14px; line-height: 22px; color: var(--ink-muted, #667085); }
.sg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }
@container (max-width: 880px) { .sg-hero__in { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 560px) {
  .sg-gallery { padding: var(--space-4, 16px); }
  .sg-hero__title { font-size: 30px; line-height: 38px; }
  .sg-hero__lead { font-size: 15px; line-height: 24px; }
  .sg-hero__note-img { width: 104px; }
}

/* ---------- 핵심 칩 (시안의 세 가지 모양) ---------- */
/* 기본: 살구색 카드 + 링 아이콘 + 한두 줄 글(시안 05·13·15) */
.sg-chips { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--space-2, 8px); }
.sg-chip { display: flex; align-items: center; gap: var(--space-3, 12px); min-height: 60px; padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--brand-line, #fcd9c6); border-radius: var(--radius-md, 12px); background: var(--brand-soft, #fff5ef); }
.sg-chip__text { display: grid; gap: 0; min-width: 0; }
.sg-chip__text strong { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink, #101828); }
.sg-chip__text span { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink, #101828); }
.sg-chip__text small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted, #667085); }
/* --stack: icon above a short label (hero chips of the CCTV pages) */
.sg-chip--stack { flex-direction: column; justify-content: center; gap: var(--space-2, 8px); padding: var(--space-3, 12px) var(--space-2, 8px); text-align: center; color: var(--brand, #fc6420); }
.sg-chip--stack .sg-ico { width: 26px; height: 26px; }
.sg-chip--stack .sg-chip__text strong { font-size: 13px; line-height: 18px; color: var(--brand, #fc6420); }
/* --compact: four chips in a row with two-line names (16·18·19) — plain icon instead of a ring keeps each name on two lines */
.sg-chip--compact { gap: var(--space-2, 8px); padding: var(--space-3, 12px); color: var(--brand, #fc6420); }
.sg-chip--compact > .sg-ico { width: 26px; height: 26px; }
.sg-chip--compact .sg-chip__text strong { font-size: 14px; line-height: 20px; color: var(--brand, #fc6420); }
/* 테두리 알약: 흰 바탕 + 주황 테두리 + 주황 아이콘·글(시안 03·07) */
.sg-chips--pill { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.sg-chip--pill { min-height: 44px; padding: 8px 18px 8px 14px; gap: var(--space-2, 8px); border: 1.5px solid var(--brand, #fc6420); border-radius: var(--radius-full, 999px); background: var(--surface, #fff); color: var(--brand, #fc6420); }
.sg-chip--pill .sg-ico { width: 22px; height: 22px; }
.sg-chip--pill .sg-chip__text strong { font-size: 15px; color: var(--brand, #fc6420); }
/* 살구 알약: 살구 바탕 + 채운 주황 원 아이콘 + 주황 글(시안 06·10) */
.sg-chip--dot { min-height: 44px; padding: 6px 16px 6px 6px; gap: var(--space-2, 8px); border-color: var(--brand-line, #fcd9c6); border-radius: var(--radius-full, 999px); }
.sg-chip--dot .sg-chip__text strong { font-size: 14px; color: var(--brand, #fc6420); }
@container (max-width: 560px) { .sg-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 360px) { .sg-chips { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 카드 그리드(기능·사진·제품 공용) ---------- */
.sg-grid { container-type: inline-size; }
.sg-cards { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-4, 16px); }
@container (max-width: 880px) { .sg-cards { grid-template-columns: repeat(var(--cols-md, 2), minmax(0, 1fr)); } }
@container (max-width: 680px) { .sg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) { .sg-cards:not(.sg-cards--keep2) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 기능 카드 ---------- */
.sg-feature { display: grid; align-content: start; gap: var(--space-3, 12px); padding: var(--space-6, 24px); border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-feature h3 { margin-top: var(--space-1, 4px); font-size: 19px; line-height: 27px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink, #101828); }
.sg-feature p { font-size: 15px; line-height: 24px; color: var(--ink-muted, #667085); }
.sg-feature--row { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-5, 20px); row-gap: var(--space-2, 8px); align-items: start; }
.sg-feature--row > .sg-ring { grid-row: 1 / span 2; }
.sg-feature--row h3 { margin-top: 0; }
.sg-feature--center { justify-items: center; text-align: center; }
.sg-feature--tile { justify-items: center; padding: var(--space-6, 24px) var(--space-4, 16px); text-align: center; }
.sg-feature--tile h3 { margin-top: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.sg-feature--left { justify-items: start; text-align: left; }
/* --solo: ring + one label (benefit cards); the label sits beside the ring, vertically centred */
.sg-feature--solo { align-items: center; }
.sg-feature--solo > .sg-ring { grid-row: auto; }
@media (max-width: 767px) { .sg-feature { padding: var(--space-4, 16px); } .sg-feature h3 { font-size: 17px; line-height: 25px; } .sg-feature p { font-size: 14px; line-height: 22px; } }

/* ---------- 사진 카드 ---------- */
.sg-media { display: grid; align-content: start; overflow: hidden; border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-media__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--canvas, #f5f9fc); }
.sg-media__img > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sg-media--contain .sg-media__img { aspect-ratio: 16 / 9; background: var(--surface, #fff); }
.sg-media--contain .sg-media__img > img { object-fit: contain; object-position: 50% 100%; padding: var(--space-3, 12px) var(--space-3, 12px) 0; }
.sg-media__body { display: grid; gap: var(--space-1, 4px); padding: var(--space-4, 16px) var(--space-6, 24px) var(--space-6, 24px); }
.sg-media__body h3 { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--ink, #101828); }
.sg-media__body p { font-size: 15px; line-height: 24px; color: var(--ink-body, #475467); }
.sg-media--caption .sg-media__body { padding-block: var(--space-3, 12px) var(--space-5, 20px); text-align: center; }

/* ---------- 다이어그램 패널 ---------- */
.sg-diagrams { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: var(--space-4, 16px); }
@container (max-width: 880px) { .sg-diagrams { grid-template-columns: minmax(0, 1fr); } }
.sg-diagram { display: grid; align-content: start; gap: var(--space-4, 16px); padding: var(--space-6, 24px); border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-lg, 20px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-diagram h3 { font-size: 19px; line-height: 27px; font-weight: 700; color: var(--ink, #101828); }
.sg-diagram__fig { overflow-x: auto; padding: var(--space-4, 16px); border-radius: var(--radius-md, 12px); background: var(--brand-soft, #fff5ef); }
.sg-diagram__fig > img { width: 100%; height: auto; }
/* side-by-side figures share one ratio (--ratio = the widest image) so the cards match; the image is contained, never cut */
.sg-diagram__fig--fit { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 16 / 10); }
.sg-diagram__fig--fit > img { position: absolute; inset: var(--space-4, 16px); width: calc(100% - 2 * var(--space-4, 16px)); height: calc(100% - 2 * var(--space-4, 16px)); max-width: none; object-fit: contain; }
/* stacked (one column): each image keeps its own ratio */
@container (max-width: 880px) { .sg-diagram__fig--fit { aspect-ratio: auto; } .sg-diagram__fig--fit > img { position: static; width: 100%; height: auto; } }
.sg-diagram__fig figcaption { margin-top: var(--space-3, 12px); font-size: 14px; line-height: 22px; color: var(--ink-body, #475467); }
.sg-flow { display: flex; align-items: center; justify-content: center; gap: var(--space-2, 8px); min-width: max-content; }
.sg-flow__node { display: grid; justify-items: center; gap: var(--space-2, 8px); min-width: 104px; padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--brand-line, #fcd9c6); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink, #101828); text-align: center; }
.sg-flow__node small { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-muted, #667085); }
.sg-flow__link { display: grid; justify-items: center; gap: var(--space-1, 4px); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--brand-strong, #c2410c); }
.sg-flow__link::after { content: ""; width: 64px; border-top: 2px dashed var(--brand, #fc6420); }

/* ---------- 변형(기본형·고급형) ---------- */
.sg-variant { container-type: inline-size; }
.sg-variant__in { display: grid; grid-template-columns: var(--split, minmax(0, 1fr) minmax(0, 1fr)); gap: var(--space-4, 16px); align-items: stretch; }
/* --fill: photos stretch to the card height so the media card has no empty band when the right side is taller */
.sg-variant__media--fill { grid-auto-rows: minmax(220px, auto); }
.sg-variant__media--fill > .sg-variant__photo { aspect-ratio: auto; }
/* right side made of cards instead of one spec list (body cam models) */
.sg-variant__cards { display: grid; align-content: start; gap: var(--space-4, 16px); }
.sg-variant__media { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3, 12px); padding: var(--space-5, 20px); border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-lg, 20px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-variant__photo { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--radius-md, 12px); background: var(--surface-muted, #f2f4f7); }
.sg-variant__photo > img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.sg-variant__badge { position: absolute; top: -14px; right: 16px; display: grid; place-items: center; width: 92px; height: 92px; border-radius: var(--radius-full, 999px); background: var(--brand, #fc6420); color: var(--on-brand, #fff); font-size: 14px; line-height: 18px; font-weight: 700; text-align: center; box-shadow: 0 6px 16px rgba(252, 100, 32, 0.3); }
.sg-variant__specs { display: grid; align-content: center; padding: var(--space-6, 24px) var(--space-8, 32px); border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-lg, 20px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-dotlist { display: grid; gap: var(--space-2, 8px); }
.sg-dotlist > li { position: relative; padding-left: 22px; font-size: 16px; line-height: 26px; color: var(--ink-body, #475467); }
.sg-dotlist > li::before { content: ""; position: absolute; top: 8px; left: 2px; width: 10px; height: 10px; border-radius: var(--radius-full, 999px); background: var(--brand, #fc6420); }
.sg-dotlist strong { font-weight: 700; color: var(--ink, #101828); }
.sg-dotlist ul { display: grid; gap: 2px; margin-top: var(--space-1, 4px); }
.sg-dotlist ul li { position: relative; padding-left: 14px; font-size: 15px; line-height: 24px; }
.sg-dotlist ul li::before { content: "-"; position: absolute; left: 0; color: var(--ink-muted, #667085); }
@container (max-width: 760px) { .sg-variant__in { grid-template-columns: minmax(0, 1fr); } .sg-variant__media, .sg-variant__specs { padding: var(--space-4, 16px); } }

/* ---------- 단계 ---------- */
.sg-steps { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-6, 24px) var(--space-8, 32px); }
.sg-step { position: relative; display: grid; align-content: start; gap: var(--space-3, 12px); }
.sg-step__num { position: absolute; top: -12px; left: -12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--surface, #fff); border-radius: var(--radius-full, 999px); background: var(--brand, #fc6420); color: var(--on-brand, #fff); font-size: 18px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-step__media { position: relative; overflow: hidden; aspect-ratio: 2 / 1; border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); }
.sg-step__media > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sg-step__media > .sg-ring { position: absolute; inset: 0; margin: auto; }
.sg-step__label { font-size: 17px; line-height: 26px; font-weight: 600; color: var(--ink, #101828); }
.sg-step__label small { display: block; margin-top: 2px; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-muted, #667085); }
.sg-step:not(:last-child)::after { content: ""; position: absolute; top: calc(31% - 6px); right: -21px; width: 10px; height: 10px; border-top: 2px solid var(--ink-muted, #667085); border-right: 2px solid var(--ink-muted, #667085); transform: rotate(45deg); }
@container (max-width: 760px) { .sg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sg-step::after { display: none; } }
@container (max-width: 400px) { .sg-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 인증·특허 ---------- */
.sg-certs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6, 24px); align-items: center; padding: var(--space-6, 24px); border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-lg, 20px); background: var(--surface, #fff); }
.sg-certs--plain { padding: 0; border: 0; background: none; }
.sg-certs__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4, 16px) var(--space-6, 24px); }
.sg-certs__logo { display: grid; place-items: center; width: 120px; height: 56px; border-radius: var(--radius-sm, 8px); }
.sg-certs__logo img { max-height: 48px; width: auto; }
.sg-certs__strip { width: 100%; height: auto; mix-blend-mode: multiply; }
.sg-certs__docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6, 24px); }
.sg-certs__doc { display: grid; gap: var(--space-2, 8px); }
.sg-certs__paper { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid var(--line-strong, #d0d5dd); border-radius: var(--radius-sm, 8px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-certs__paper > img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); max-width: none; object-fit: contain; }
.sg-certs__doc > .sg-ph { aspect-ratio: 3 / 4; border-radius: var(--radius-sm, 8px); }
.sg-certs__doc figcaption { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink, #101828); text-align: center; }
@container (max-width: 760px) { .sg-certs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 스펙 표 ---------- */
.sg-spec-wrap { overflow-x: auto; border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); }
.sg-spec { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.sg-spec caption { padding: 0 0 var(--space-3, 12px); text-align: left; font-size: 14px; color: var(--ink-muted, #667085); }
.sg-spec th, .sg-spec td { padding: 14px var(--space-6, 24px); border-bottom: 1px solid var(--line, #e6ecf2); text-align: left; vertical-align: middle; }
.sg-spec tr:last-child > * { border-bottom: 0; }
.sg-spec th[scope="row"] { width: 184px; background: var(--brand, #fc6420); border-bottom-color: rgba(255, 255, 255, 0.28); color: var(--on-brand, #fff); font-weight: 700; text-align: center; }
.sg-spec td { color: var(--ink-body, #475467); }
.sg-spec thead th { background: var(--brand-soft, #fff5ef); color: var(--ink, #101828); font-weight: 700; text-align: center; }
.sg-spec thead th:first-child { background: var(--brand, #fc6420); color: var(--on-brand, #fff); }
.sg-spec--compare { min-width: 640px; }
.sg-spec--compare td { text-align: center; }
@media (max-width: 767px) { .sg-spec th, .sg-spec td { padding: 12px var(--space-3, 12px); font-size: 14px; line-height: 22px; } .sg-spec th[scope="row"] { width: 96px; } }

/* ---------- 제품 카드 ---------- */
.sg-pcard { display: grid; align-content: start; gap: var(--space-3, 12px); color: var(--ink, #101828); text-decoration: none; }
.sg-pcard__img { position: relative; display: block; overflow: hidden; height: 200px; border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05)); transition: border-color .15s; }
.sg-pcard__img > img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); max-width: none; object-fit: contain; }
.sg-pcard__img > .sg-ph { position: absolute; inset: 0; border: 0; }
.sg-pcard__name { font-size: 15px; line-height: 22px; font-weight: 600; text-align: center; }
.sg-pcard:hover .sg-pcard__img { border-color: var(--brand, #fc6420); }
.sg-pcard:hover .sg-pcard__name { color: var(--brand, #fc6420); }
.sg-pcard--sm .sg-pcard__img { height: 160px; }
@media (max-width: 767px) { .sg-pcard__img { height: 140px; } .sg-pcard__img > img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); } .sg-pcard__name { font-size: 14px; line-height: 20px; } .sg-pcard--sm .sg-pcard__img { height: 120px; } }

/* ---------- 관련 제품 ---------- */
.sg-related { display: grid; gap: var(--space-6, 24px); }
.sg-related__title { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink, #101828); }

/* ---------- 제품 문의 띠 ---------- */
.sg-cta { container-type: inline-size; margin-top: var(--space-20, 80px); border-block: 1px solid var(--brand-line, #fcd9c6); background: var(--brand-soft, #fff5ef); }
.sg-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6, 24px); padding-block: var(--space-12, 48px); }
.sg-cta__text { display: grid; gap: var(--space-2, 8px); max-width: 36rem; }
.sg-cta__text p { font-size: 16px; line-height: 26px; color: var(--ink-body, #475467); }
.sg-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); }
.sg-cta__tel { font-variant-numeric: tabular-nums; }

/* ---------- 푸터 ---------- */
.sg-footer { background: var(--ink, #101828); color: var(--on-dark-muted, #98a2b3); font-size: 14px; line-height: 22px; }
.sg-footer__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4, 16px) var(--space-8, 32px); padding-block: var(--space-12, 48px); }
.sg-footer .sg-logo img { height: 32px; }
.sg-footer .sg-wordmark { color: var(--on-dark, #f2f4f7); font-size: 19px; }
.sg-footer__info { display: grid; gap: var(--space-1, 4px); padding-left: var(--space-8, 32px); border-left: 1px solid var(--ink-body, #475467); }
.sg-footer__name { font-size: 15px; font-weight: 700; color: var(--on-dark, #f2f4f7); }
.sg-footer__row { display: flex; flex-wrap: wrap; gap: 0 var(--space-3, 12px); }
.sg-footer__row > span + span::before { content: "|"; margin-right: var(--space-3, 12px); color: var(--ink-body, #475467); }
.sg-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); }
.sg-footer__links a { font-weight: 700; color: var(--on-dark, #f2f4f7); text-decoration: none; }
.sg-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-footer__copy { font-size: 13px; color: var(--on-dark-muted, #98a2b3); }
.sg-footer .sg-pending { border-color: var(--on-dark-muted, #98a2b3); color: var(--on-dark-muted, #98a2b3); }
@media (max-width: 767px) { .sg-footer__in { grid-template-columns: minmax(0, 1fr); } .sg-footer__info { padding-left: 0; border-left: 0; } }

/* ---------- 아이콘 시트 ---------- */
.sg-iconsheet { display: grid; gap: var(--space-8, 32px); }
.sg-iconsheet h3 { margin-bottom: var(--space-3, 12px); font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink, #101828); }
.sg-iconsheet ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-2, 8px); }
.sg-iconsheet li { display: grid; justify-items: center; gap: var(--space-2, 8px); padding: var(--space-4, 16px) var(--space-2, 8px) var(--space-3, 12px); border: 1px solid var(--line, #e6ecf2); border-radius: var(--radius-md, 12px); background: var(--surface, #fff); text-align: center; }
.sg-iconsheet b { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink, #101828); }
.sg-iconsheet code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 16px; color: var(--ink-muted, #667085); }
.sg-iconsheet .is-custom code { color: var(--brand-strong, #c2410c); }

/* ---------- 사이트 적용분(시안 캔버스에는 없는 것) ---------- */
.sg-html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .sg-html { scroll-behavior: auto; } }
body.sg-body { margin: 0; background: #f5f9fc; }
/* 모바일 메뉴: 헤더 아래에 겹쳐 펼친다(내용이 밀리지 않게) */
.sg-header .sg-mnav { position: absolute; top: 100%; left: 0; right: 0; box-shadow: 0 8px 16px rgba(16, 24, 40, .08); }
.sg-mnav[hidden] { display: none; }
@container (min-width: 768px) { .sg-header .sg-mnav { display: none; } }
/* 글만 있는 안내 페이지(개인정보처리방침) */
.sg-doc { padding-bottom: var(--space-20, 80px); }
.sg-doc > * { max-width: 800px; }
.sg-doc h2 { margin: var(--space-8, 32px) 0 var(--space-3, 12px); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink, #101828); }
.sg-doc ul { display: grid; gap: var(--space-2, 8px); padding-left: 20px; list-style: disc; }
/* 옛 화면(메인·회사·고객센터)에 공통 헤더·푸터만 얹을 때: 감싸는 칸 없이 놓아 헤더가 화면 위에 붙어 있게 한다 */
.sg--bare { display: contents; }
/* 어두운 바탕용 로고(푸터): 제공 원본 한 장을 방패(그대로)와 글자(흰색) 두 칸으로 나눠 보인다. 흰 글씨 로고 원본을 받으면 한 장으로 바꾼다.
   비율은 로고 그림(1974x356)에서 방패 325px / 글자 1649px */
.sg-logo--ondark { --h: 32px; display: inline-flex; height: var(--h); }
.sg-logo--ondark > span { position: relative; flex: none; overflow: hidden; height: var(--h); }
.sg-logo--ondark img { position: absolute; top: 0; left: 0; height: var(--h); width: auto; max-width: none; }
.sg-logo__mark { width: calc(var(--h) * 0.913); }
.sg-logo__word { width: calc(var(--h) * 4.632); }
.sg-logo__word img { left: calc(var(--h) * -0.913); filter: brightness(0) invert(1); }
/* 옛 common.css의 html,body 높이 100%가 있으면 헤더가 한 화면 뒤에 떨어진다 */
html:has(.sg--bare), body:has(.sg--bare) { height: auto; }
/* 옛 화면은 겹쳐 놓던 옛 헤더(1100px 이하에서 60px) 높이만큼 본문을 내려 두었다(header.css의 .company_business 120px, .mt-60 60px).
   새 헤더는 자리를 차지하므로 그 60px을 뺀다 — 보이는 간격은 전과 같다 */
@media (max-width: 1100px) {
  body:has(.sg--bare) .company_business, body:has(.sg--bare) .mt-60 { margin-top: 0; }
}
/* 옛 화면에서는 헤더·푸터도 그 화면의 글꼴(Noto Sans KR)을 쓴다 — 헤더·푸터만을 위해 Pretendard 3종(2.4MB)을 받지 않게 */
.sg--bare { --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
/* 크기 속성을 넣은 그림이 줄어들 때 비율을 지킨다 */
body:has(.sg--bare) .sub_content img { height: auto; }
/* 떠 있는 문의 버튼: 화면 가운데 + 590px에 놓여 있어 폭 1420px 미만에서 화면 밖으로 나가 가로 스크롤이 생겼다 */
@media (max-width: 1419px) { body:has(.sg--bare) #quick_menu { left: auto !important; right: 8px; margin-left: 0 !important; } }
@media (max-width: 1100px) {
  body:has(.sg--bare) #quick_menu { display: none !important; }
  body:has(.sg--bare) .mob_quick { display: block !important; }
}
/* 문의 폼(lib/contact.php): 휴대폰 폭에서 좁게 눌리고 동의 문구가 잘리던 것 */
@media (max-width: 767px) {
  body:has(.sg--bare) .sub_intro .sub_con { padding-left: 16px; padding-right: 16px; }
  body:has(.sg--bare) .sub_title { font-size: 36px; margin-bottom: 24px; }
  body:has(.sg--bare) .sub_intro.inquiry textarea.personal { width: 100%; padding: 12px 14px; box-sizing: border-box; }
  body:has(.sg--bare) .sub_intro.inquiry .agree_box .agree_left, body:has(.sg--bare) .sub_intro.inquiry .agree_box .agree_right { float: none; display: block; text-align: left; }
  body:has(.sg--bare) .sub_intro.inquiry .agree_box .agree_right { margin-top: 8px; }
  body:has(.sg--bare) .sub_intro.inquiry .agree_box .agree_right li { margin: 0 16px 0 0; }
  body:has(.sg--bare) .sub_intro.inquiry .notice_wrap { margin-top: 24px; }
  body:has(.sg--bare) .sub_intro.inquiry .write_table { width: 100%; margin: 16px 0 24px; }
  body:has(.sg--bare) .sub_intro.inquiry .write_table th { width: 72px; padding: 10px 8px 10px 0 !important; font-size: 14px; white-space: nowrap; vertical-align: top; }
  body:has(.sg--bare) .sub_intro .write_table td { padding: 6px 0; }
  body:has(.sg--bare) .sub_intro .write_table input[type="text"], body:has(.sg--bare) .sub_intro .write_table textarea { width: 100%; box-sizing: border-box; }
  /* 푸터 주소 줄: 줄이 바뀔 때 구분선(|)이 줄 맨 앞에 오지 않게 한 줄씩 놓는다 */
  .sg-footer__row { display: grid; gap: 0; }
  .sg-footer__row > span + span::before { content: none; }
}