/* 블로그(/blog/)·개인정보 처리방침 페이지의 공통 머리글·푸터·글꼴: 홈과 4개 서비스 페이지의 헤더·푸터와 같은 모양 (_ops/build/blog-ui.mjs가 HTML을 만듦) */
@font-face { font-family:'Pretendard JP'; font-style:normal; font-weight:500; font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2'); }
@font-face { font-family:'Pretendard JP'; font-style:normal; font-weight:600; font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Pretendard JP'; font-style:normal; font-weight:700; font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2'); }

:root { --purple:#6E3AFF; --ink:#171719; --text:#37383C; --muted:rgba(55,56,60,0.70); --line:rgba(112,115,124,0.22); --bg:#F7F7F8; --gutter:20px; }

/* 헤더: PC 메뉴 + 문의하기, 모바일 로고 + ≡ */
.gh { position:sticky; top:0; z-index:50; background:#FFFFFF; border-bottom:1px solid var(--line); }
.gh-in { box-sizing:border-box; max-width:1440px; margin:0 auto; padding:20px max(64px, env(safe-area-inset-right)) 20px max(64px, env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.gh a { text-decoration:none; }
.gh-brand { display:flex; align-items:center; gap:10px; }
.gh-brand svg { flex-shrink:0; display:block; width:28px; height:28px; }
.gh-brand span { font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; white-space:nowrap; }
.gh-brand b { color:var(--purple); font-weight:700; }
.gh-nav { display:flex; align-items:center; gap:32px; }
.gh-nav a { font-size:16px; font-weight:500; color:#1B1C1E; padding:8px 12px; border-radius:10px; transition:background 0.15s; white-space:nowrap; }
.gh-nav a:hover { background:#F4F1FF; }
.gh-nav a.is-active { font-weight:700; color:var(--purple); background:#F4F1FF; }
.gh-nav a.gh-cta { padding:10px 20px; border-radius:12px; background:var(--purple); color:#FFFFFF; font-weight:600; }
.gh-nav a.gh-cta:hover { background:var(--purple); opacity:0.88; }
.gh-menu-btn { display:none; flex-direction:column; gap:4px; padding:6px; margin:-6px; border:0; background:none; cursor:pointer; }
.gh-menu-btn span { display:block; width:18px; height:2px; background:var(--ink); }
.gh-menu { display:flex; flex-direction:column; padding:8px var(--gutter) 16px; border-top:1px solid var(--line); background:#FFFFFF; }
.gh-menu[hidden] { display:none; }
.gh-menu a { padding:14px 4px; font-size:17px; font-weight:500; color:#1B1C1E; border-bottom:1px solid var(--line); }
.gh-menu a.is-active { font-weight:700; color:var(--purple); }

/* 모바일 "‹ 페이지 이름" (서비스 페이지 헤더 아래와 같은 모양) */
.crumb { display:none; align-self:flex-start; align-items:center; gap:4px; padding:6px 8px 6px 0; margin:0 0 6px; font-size:15px; font-weight:600; color:var(--muted); text-decoration:none; }
.crumb svg { flex-shrink:0; display:block; }

/* 푸터: 홈·서비스 페이지 푸터와 같은 내용·모양 (회사 정보는 _ops/site-info.json) */
.sf { background:#171719; font-family:'Pretendard JP', sans-serif; word-break:keep-all; }
.sf a { text-decoration:none; }
.sf-in { box-sizing:border-box; max-width:1440px; margin:0 auto; padding:44px max(64px, env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) max(64px, env(safe-area-inset-left)); display:flex; flex-direction:column; gap:32px; }
.sf-top { display:flex; flex-direction:column; gap:22px; }
.sf-brand { display:flex; flex-direction:column; gap:10px; }
.sf-logo { display:flex; align-items:center; gap:10px; }
.sf-logo svg { flex-shrink:0; display:block; width:26px; height:26px; }
.sf-logo span { font-size:18px; font-weight:700; color:#FFFFFF; white-space:nowrap; }
.sf-logo b { color:#C3AEFF; font-weight:700; }
.sf-tag { font-size:15px; font-weight:500; color:rgba(255,255,255,0.52); line-height:1.7; }
.sf-row { display:flex; align-items:baseline; gap:24px; padding-top:6px; border-top:1px solid rgba(255,255,255,0.10); }
.sf-label { width:76px; flex-shrink:0; font-size:14px; font-weight:700; letter-spacing:0.031em; color:rgba(255,255,255,0.45); }
.sf-links { flex:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px; }
.sf-links a, .sf-links span { font-size:15px; font-weight:500; color:rgba(255,255,255,0.72); }
.sf-links a:hover { color:#FFFFFF; }
.sf-links .is-active { font-weight:700; color:#FFFFFF; }
.sf-bottom { padding-top:24px; border-top:1px solid rgba(255,255,255,0.14); display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.sf-info { margin:0; display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:500; color:rgba(255,255,255,0.45); line-height:1.7; }
.sf-info div { display:flex; gap:10px; }
.sf-info dt { flex-shrink:0; color:rgba(255,255,255,0.62); font-weight:600; }
.sf-info dd { margin:0; }
.sf-copy { flex-shrink:0; margin-left:auto; font-size:14px; font-weight:500; color:rgba(255,255,255,0.45); }
.sf-copy a { color:rgba(255,255,255,0.85); font-weight:700; }

/* 1024~1100px: 메뉴 간격을 좁혀 한 줄에, 1023px 이하: 메뉴가 들어가지 않아 ≡ 메뉴로 (모바일 "‹ 이름"은 767px 이하만) */
@media (max-width:1100px) {
  .gh-in { padding-left:max(32px, env(safe-area-inset-left)); padding-right:max(32px, env(safe-area-inset-right)); }
  .gh-nav { gap:4px; }
  .gh-nav a { padding:8px 10px; }
}
@media (max-width:1023px) {
  .gh-nav { display:none; }
  .gh-menu-btn { display:flex; }
}
@media (max-width:767px) {
  .gh-in { padding:14px max(var(--gutter), env(safe-area-inset-right)) 14px max(var(--gutter), env(safe-area-inset-left)); }
  .gh-brand { gap:8px; }
  .gh-brand svg { width:24px; height:24px; }
  .gh-brand span { font-size:16px; }
  .crumb { display:inline-flex; }
  .sf-in { padding:32px max(var(--gutter), env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); gap:24px; }
  .sf-top { gap:24px; }
  .sf-brand { gap:8px; }
  .sf-row { flex-direction:column; align-items:flex-start; gap:12px; padding-top:0; border-top:0; }
  .sf-label { width:auto; }
  .sf-links { flex-direction:column; align-items:flex-start; gap:12px; }
  .sf-links a, .sf-links span { font-size:16px; }
  .sf-bottom { padding-top:20px; flex-direction:column; align-items:stretch; gap:6px; }
  .sf-copy { align-self:flex-end; }
}