@charset "UTF-8";
/* ==========================================================================
   셀러픽 이용 가이드
   레이아웃 : 최대 1300px / [1] 카테고리 240px · [2] 본문 · [3] 세부 목차 210px
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --max-w: 1300px;
  --side-w: 240px;
  --toc-w: 210px;
  --gap: 24px;
  --header-h: 64px;

  --c-primary: #2f6bff;
  --c-primary-dark: #1d4fd8;
  --c-primary-soft: #eef3ff;
  --c-primary-line: #c9d8ff;

  --c-text: #191f28;
  --c-text-2: #4e5968;
  --c-text-3: #8b95a1;
  --c-line: #e5e8eb;
  --c-line-2: #f2f4f6;
  --c-bg: #ffffff;
  --c-bg-2: #f9fafb;

  --c-tip: #0e9f6e;    --c-tip-bg: #ecfdf5;
  --c-info: #2f6bff;   --c-info-bg: #eef3ff;
  --c-warn: #d97706;   --c-warn-bg: #fff8eb;
  --c-err: #e5484d;    --c-err-bg: #fff0f0;
  --c-mark: #fff1a8;

  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-l: 0 4px 12px rgba(0,0,0,.06), 0 20px 48px rgba(0,0,0,.12);

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--c-text-2);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-bottom-width: 2px;
  border-radius: 5px;
}
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 200;
  padding: 10px 16px; background: var(--c-text); color: #fff; border-radius: var(--radius-s);
}
.skip-link:focus { top: 12px; }

/* ================================================================ header */
.gnb {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.gnb-inner {
  max-width: none; /* 로고는 화면 좌측, 검색은 화면 우측 끝 */
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4f86ff, var(--c-primary-dark));
  color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 4px 10px rgba(47,107,255,.3);
}
.logo-text { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--c-text-2); }
.logo-text strong { color: var(--c-text); font-weight: 800; }

/* search */
.search { position: relative; margin-left: auto; width: 400px; max-width: 100%; }
.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: none; stroke: var(--c-text-3); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.search-input {
  width: 100%; height: 42px;
  padding: 0 40px 0 42px;
  font: inherit; font-size: 14px; color: var(--c-text);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: 21px;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--c-text-3); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-input:focus { outline: none; background: #fff; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(47,107,255,.12); }
.search-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-input:focus ~ .search-kbd, .search-input:not(:placeholder-shown) ~ .search-kbd { display: none; }

.search-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 480px; max-width: calc(100vw - 32px);
  max-height: min(70vh, 560px); overflow-y: auto;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-l);
}
.sp-label { padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--c-text-3); }
.sp-section + .sp-section { margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
.chip {
  padding: 6px 12px; font-size: 13px; color: var(--c-text-2);
  background: var(--c-bg-2); border: 1px solid var(--c-line); border-radius: 16px;
  transition: all .15s;
}
.chip:hover { color: var(--c-primary); border-color: var(--c-primary-line); background: var(--c-primary-soft); }
.sp-item { display: block; padding: 10px 12px; border-radius: var(--radius-s); }
.sp-item:hover, .sp-item.active { background: var(--c-primary-soft); }
.sp-cat { display: block; font-size: 12px; color: var(--c-primary); font-weight: 600; }
.sp-item strong { display: block; font-size: 15px; font-weight: 700; margin: 1px 0 2px; }
.sp-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--c-text-2); line-height: 1.5; }
.search-panel mark, .sr-list mark { background: none; color: var(--c-primary); font-weight: 700; }
.sp-more { display: block; margin-top: 6px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--c-primary); border-top: 1px solid var(--c-line-2); }
.sp-more:hover { text-decoration: underline; }
.sp-empty { padding: 24px 12px; text-align: center; font-size: 14px; color: var(--c-text-2); line-height: 1.7; }
.sp-empty a { color: var(--c-primary); text-decoration: underline; }
.sp-foot { display: flex; align-items: center; gap: 4px; padding: 8px 10px 2px; font-size: 12px; color: var(--c-text-3); border-top: 1px solid var(--c-line-2); }
.sp-foot kbd { font-size: 11px; line-height: 16px; min-width: 18px; padding: 0 4px; }

.read-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-primary);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .1s linear;
}

/* hamburger (mobile) */
.nav-toggle { display: none; width: 36px; height: 36px; border-radius: var(--radius-s); flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--c-text); }
.nav-toggle:hover { background: var(--c-line-2); }

/* ================================================================ layout */
.layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--toc-w);
  grid-template-rows: 1fr auto;   /* 1줄 = 본문, 2줄 = 바닥글(짧은 문서도 바닥글은 화면 아래) */
  column-gap: var(--gap);
  align-items: start;
  min-height: calc(100vh - var(--header-h));
}

/* ================================================================ [1] sidebar */
.sidebar {
  grid-row: 1 / -1;   /* 바닥글 줄까지 걸쳐야 sticky 가 맨 아래에서도 밀리지 않는다 */
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 28px 8px 40px 0;
  border-right: 1px solid var(--c-line-2);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sidebar:hover { scrollbar-color: var(--c-line) transparent; }
.sidebar-head { display: none; }

.nav-home {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 9px 12px;
  font-size: 14px; font-weight: 600; color: var(--c-text-2);
  border-radius: var(--radius-s);
}
.nav-home svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nav-home:hover { background: var(--c-bg-2); color: var(--c-text); }
.nav-home.active { background: var(--c-primary-soft); color: var(--c-primary); }

.nav-group + .nav-group { margin-top: 2px; }
.nav-cat {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  font-size: 15px; font-weight: 700; text-align: left;
  border-radius: var(--radius-s);
  transition: background .15s;
}
.nav-cat:hover { background: var(--c-bg-2); }
.nav-no {
  font-size: 11px; font-weight: 700; color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  width: 22px;
}
.nav-group.current .nav-no { color: var(--c-primary); }
.nav-cat-title { flex: 1; }
.nav-arrow { width: 16px; height: 16px; fill: none; stroke: var(--c-text-3); stroke-width: 2; stroke-linecap: round; transition: transform .2s; }
.nav-group.open .nav-arrow { transform: rotate(90deg); }

.nav-sub {
  display: none;
  margin: 2px 0 10px 23px;
  padding-left: 12px;
  border-left: 1px solid var(--c-line);
}
.nav-group.open .nav-sub { display: block; }
.nav-sub a {
  position: relative;
  display: block;
  padding: 7px 10px;
  font-size: 14px; color: var(--c-text-2);
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.nav-sub a:hover { color: var(--c-text); background: var(--c-bg-2); }
.nav-sub a.active { color: var(--svc); font-weight: 700; background: var(--svc-soft); }
.nav-sub a.active::before {
  content: ""; position: absolute; left: -13px; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px; background: var(--svc);
}

/* ================================================================ [2] content */
.content { min-width: 0; padding: 32px 0 80px; outline: none; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-3); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb [aria-current] { color: var(--c-text-2); }

/* ---- post header */
.post-head { padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--c-line); }
.post-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--c-primary); margin-bottom: 10px; }
.post-cat .pc-no { padding: 1px 6px; font-size: 11px; border-radius: 4px; background: var(--c-primary-soft); }
.post-head h1 { font-size: 34px; line-height: 1.3; font-weight: 800; letter-spacing: -.03em; }
.post-lead { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--c-text-2); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 18px; font-size: 13px; color: var(--c-text-3); }
.post-meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px 3px -8px; border-radius: 50%; background: var(--c-line); vertical-align: middle; }
.link-copy { margin-left: auto; padding: 5px 10px; font-size: 12px; color: var(--c-text-2); border: 1px solid var(--c-line); border-radius: 6px; }
.link-copy:hover { border-color: var(--c-primary-line); color: var(--c-primary); }
.post-title-row { display: flex; align-items: center; gap: 16px; }
.post-title-row h1 { flex: 1; min-width: 0; }
.post-title-row .link-copy { flex-shrink: 0; }

/* ---- inline toc (tablet/mobile) */
.toc-inline { display: none; margin-bottom: 32px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-2); }
.toc-inline summary { padding: 14px 18px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--c-text-3); }
.toc-inline[open] summary::after { content: "−"; }
.toc-inline ol { padding: 0 18px 14px; }
.toc-inline li a { display: block; padding: 5px 0; font-size: 14px; color: var(--c-text-2); }
.toc-inline li.lv-h3 a { padding-left: 14px; font-size: 13px; }

/* ---- post body (blog typography) */
.post-body { font-size: 16px; line-height: 1.85; color: #333d4b; }
.post-body > * + * { margin-top: 18px; }
.post-body h2 {
  position: relative;
  margin-top: 56px;
  padding-top: 4px;
  font-size: 24px; line-height: 1.4; font-weight: 800; letter-spacing: -.02em;
  color: var(--c-text);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 {
  margin-top: 36px;
  font-size: 19px; line-height: 1.45; font-weight: 700;
  color: var(--c-text);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.post-body h2 + *, .post-body h3 + * { margin-top: 12px; }
.post-body b, .post-body strong { color: var(--c-text); font-weight: 700; }
.post-body a { color: var(--c-primary); text-decoration: underline; text-decoration-color: var(--c-primary-line); text-underline-offset: 3px; }
.post-body a:hover { text-decoration-color: var(--c-primary); }
.post-body mark.hit { background: var(--c-mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.post-body .note { font-size: 13px; color: var(--c-text-3); }

.post-body ul:not(.checklist) li, .post-body ol:not(.steps):not(.nums) li { position: relative; padding-left: 18px; }
.post-body ul:not(.checklist) li + li { margin-top: 6px; }
.post-body ul:not(.checklist) li::before {
  content: ""; position: absolute; left: 4px; top: .8em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-text-3);
}
/* 번호 목록 — 예시엔 번호 표시가 없어 에디터(style_chatManagement_guideEditor.css)와 같은 규칙 추가 */
.post-body ol:not(.steps):not(.nums) { counter-reset: ugol; }
.post-body ol:not(.steps):not(.nums) li { counter-increment: ugol; padding-left: 22px; }
.post-body ol:not(.steps):not(.nums) li + li { margin-top: 6px; }
.post-body ol:not(.steps):not(.nums) li::before { content: counter(ugol) "."; position: absolute; left: 0; font-weight: 700; color: var(--c-text-3); }

/* checklist */
.post-body .checklist { padding: 18px 22px; border-radius: var(--radius); background: var(--c-bg-2); border: 1px solid var(--c-line-2); }
.post-body .checklist li { position: relative; padding-left: 30px; }
.post-body .checklist li + li { margin-top: 8px; }
.post-body .checklist li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* steps */
/* 링크 버튼(바로가기) — CRM [링크 버튼] : <p class="link-btn"><a> */
/* 가이드 기본 파랑 + 기존 안내 페이지 아이콘(ico_link 흰색판) */
.post-body p.link-btn a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 14px; font-weight: 700; line-height: 1.4; color: #fff; text-decoration: none; background: var(--c-primary); border-radius: 8px; transition: background .15s; }
.post-body p.link-btn a::after { content: ""; width: 13px; height: 13px; background: url(/upload/images/ico_link3.png) center / contain no-repeat; }
.post-body p.link-btn a:hover { background: var(--c-primary-dark); }
/* 번호 설명(ol.nums) = 단계와 같은 모양, 제목 없이 내용만(굵게 X) */
.post-body .steps, .post-body ol.nums { counter-reset: step; }
.post-body .steps li, .post-body ol.nums > li {
  position: relative;
  padding: 0 0 22px 48px;
  counter-increment: step;
}
.post-body ol.nums > li { min-height: 30px; font-size: 16px; line-height: 30px; }
.post-body .steps li:last-child, .post-body ol.nums > li:last-child { padding-bottom: 0; }
.post-body .steps li::before, .post-body ol.nums > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff;
  background: var(--c-primary);
}
.post-body .steps li:not(:last-child)::after, .post-body ol.nums > li:not(:last-child)::after {
  content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px;
  width: 1px; background: var(--c-primary-line);
}
.post-body .steps strong { display: block; font-size: 16px; line-height: 30px; }
.post-body .steps p { margin-top: 2px; font-size: 15px; color: var(--c-text-2); }

/* callout */
.post-body .callout {
  padding: 16px 20px 16px 50px;
  position: relative;
  border-radius: var(--radius);
  font-size: 15px; line-height: 1.7;
}
.post-body .callout::before {
  position: absolute; left: 18px; top: 17px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.post-body .callout > strong { display: block; margin-bottom: 2px; font-size: 14px; }
.post-body .callout.tip  { background: var(--c-tip-bg); }
.post-body .callout.tip::before  { content: "✓"; background: var(--c-tip); }
.post-body .callout.tip > strong { color: var(--c-tip); }
.post-body .callout.info { background: var(--c-info-bg); }
.post-body .callout.info::before { content: "i"; background: var(--c-info); }
.post-body .callout.info > strong { color: var(--c-info); }
.post-body .callout.warn { background: var(--c-warn-bg); }
.post-body .callout.warn::before { content: "!"; background: var(--c-warn); }
.post-body .callout.warn > strong { color: var(--c-warn); }

/* screenshot */
.post-body .shot { margin-top: 24px; margin-bottom: 8px; }
.post-body .shot img, .post-body .shot-ph { border-radius: var(--radius); border: 1px solid var(--c-line); }
/* 이미지 바깥 상자만 본문 폭(흰 바탕·테두리), 이미지는 원본 크기로 왼쪽 — 기존 안내 페이지 home/manual .borderImgW50 모양 */
.post-body .shot { padding: 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.post-body .shot img { border: 0; border-radius: 0; }
.post-body .shot-ph {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600; color: var(--c-text-3);
  background:
    linear-gradient(var(--c-bg-2), var(--c-bg-2)) padding-box,
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,.015) 10px 20px);
  background-color: var(--c-bg-2);
  position: relative;
  overflow: hidden;
}
.post-body .shot-ph::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px;
  background: #fff; border-bottom: 1px solid var(--c-line);
}
.post-body .shot-ph::after {
  content: ""; position: absolute; left: 12px; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff5f57; box-shadow: 14px 0 0 #febc2e, 28px 0 0 #28c840;
}
.post-body figcaption { margin-top: 10px; font-size: 13px; color: var(--c-text-3); text-align: center; }

/* table */
.post-body table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 14px; line-height: 1.6;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden;
}
.post-body th, .post-body td { padding: 11px 14px; text-align: left; vertical-align: top; }
.post-body th { font-weight: 700; color: var(--c-text); background: var(--c-bg-2); border-bottom: 1px solid var(--c-line); }
.post-body td { border-top: 1px solid var(--c-line-2); }
.post-body tbody tr:first-child td { border-top: 0; }
.post-body td:first-child { font-weight: 600; color: var(--c-text); white-space: nowrap; }

/* 배송료 표 (guide.lib ug_fee_tables) — 반씩 나눈 두 표, 넓으면 나란히·좁으면 위아래(스크롤 없음). 칸 너비 고정
   위아래일 땐 둘째 표 머리글을 숨기고 두 표를 붙여 한 표처럼 보이게 한다 */
.post-body .fee-table { container-type: inline-size; }
.post-body .fee-cols { display: grid; grid-template-columns: 1fr; }
.post-body .fee-cols table:first-child { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }   /* 붙는 자리 선 한 줄만 */
.post-body .fee-cols table + table { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.post-body .fee-cols table + table thead { display: none; }
.post-body .fee-cols table + table tbody tr:first-child td { border-top: 1px solid var(--c-line-2); }
@container (min-width: 652px) {
  .post-body .fee-cols { grid-template-columns: 1fr 1fr; gap: 12px; }
  .post-body .fee-cols table:first-child, .post-body .fee-cols table + table { border: 1px solid var(--c-line); border-radius: var(--radius); }
  .post-body .fee-cols table + table thead { display: table-header-group; }
  .post-body .fee-cols table + table tbody tr:first-child td { border-top: 0; }
}
.post-body .fee-table table { display: table; table-layout: fixed; width: 100%; font-size: 13px; white-space: nowrap; }
.post-body .fee-table th, .post-body .fee-table td { padding: 8px 10px; }
.post-body .fee-table th[rowspan], .post-body .fee-table td:first-child { width: 64px; }   /* 머리글 숨긴 둘째 표도 같은 너비 */
.post-body .fee-table th[rowspan] { vertical-align: middle; }
.post-body .fee-table th[colspan] { text-align: center; }
.post-body .fee-table thead tr + tr th, .post-body .fee-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* formula */
.post-body .formula {
  padding: 18px 22px;
  font-size: 16px; font-weight: 700; text-align: center;
  color: var(--c-primary-dark);
  background: var(--c-primary-soft);
  border: 1px dashed var(--c-primary-line);
  border-radius: var(--radius);
}

/* badge */
.badge { display: inline-block; padding: 1px 8px; margin-right: 4px; font-size: 12px; font-weight: 700; border-radius: 10px; vertical-align: 1px; }
.badge.ok   { color: var(--c-tip);  background: var(--c-tip-bg); }
.badge.warn { color: var(--c-warn); background: var(--c-warn-bg); }
.badge.err  { color: var(--c-err);  background: var(--c-err-bg); }

/* faq */
/* 구분선 — 기본 hr(진한 입체선) 대신 연한 회색, 위아래 여백 넉넉히(본문·FAQ 사이 구분 등). 에디터와 같다 */
.post-body hr { height: 0; margin: 36px 0; border: 0; border-top: 1px solid var(--c-line); }

.post-body .faq { border: 1px solid var(--c-line); border-radius: var(--radius); }
.post-body .faq + .faq { margin-top: 8px; }
.post-body .faq summary {
  position: relative;
  padding: 14px 44px 14px 46px;
  font-weight: 700; color: var(--c-text);
  cursor: pointer; list-style: none;
}
.post-body .faq summary::-webkit-details-marker { display: none; }
.post-body .faq summary::before { content: "Q"; position: absolute; left: 18px; color: var(--c-primary); font-weight: 800; }
.post-body .faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border: solid var(--c-text-3); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.post-body .faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.post-body .faq.closing summary::after { transform: translateY(-70%) rotate(45deg); }   /* 접히는 동안(guide.js)도 화살표는 바로 돌린다 */
.post-body .faq p { padding: 0 20px 16px 46px; font-size: 15px; color: var(--c-text-2); }
/* FAQ 답변 속 이미지 : 바깥 상자 없이 답변 글과 같은 들여쓰기, 이미지에만 옅은 테두리 */
.post-body .faq .shot { margin: 0 20px 16px 46px; padding: 0; background: none; border: 0; }
.post-body .faq .shot img { border: 1px solid var(--c-line); border-radius: var(--radius); }

/* ---- feedback & pager */
.feedback {
  margin-top: 64px; padding: 24px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--c-bg-2);
}
.feedback > p { font-weight: 700; }
.feedback-btns { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.feedback-btns button {
  padding: 9px 16px; font-size: 14px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 20px;
  transition: all .15s;
}
.feedback-btns button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.feedback-done { font-weight: 500 !important; color: var(--c-text-2); }
.feedback-done a { color: var(--c-primary); text-decoration: underline; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.pager a {
  display: block; padding: 18px 20px;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.pager a:hover { border-color: var(--c-primary-line); box-shadow: var(--shadow); }
.pager small { display: block; font-size: 12px; color: var(--c-text-3); }
.pager strong { display: block; margin-top: 2px; font-size: 16px; }
.pager-prev small::before { content: "← "; }
.pager-next { text-align: right; }
.pager-next small::after { content: " →"; }
.pager a:hover strong { color: var(--c-primary); }

/* ---- home */
.hero {
  position: relative;
  padding: 44px 44px 40px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 10%, rgba(116,160,255,.35), transparent 40%),
    linear-gradient(135deg, #f3f7ff 0%, #e8efff 100%);
  overflow: hidden;
}
.hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--c-primary); }
.hero h1 { margin-top: 12px; font-size: 34px; line-height: 1.35; font-weight: 800; letter-spacing: -.03em; }
.hero-desc { margin-top: 14px; font-size: 16px; color: var(--c-text-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; font-size: 15px; font-weight: 700; border-radius: 22px; transition: all .15s; }
.btn.primary { color: #fff; background: var(--c-primary); box-shadow: 0 6px 16px rgba(47,107,255,.3); }
.btn.primary:hover { background: var(--c-primary-dark); }
.btn.ghost { color: var(--c-text); background: #fff; border: 1px solid var(--c-line); }
.btn.ghost:hover { border-color: var(--c-primary-line); color: var(--c-primary); }

.sec-title { margin: 44px 0 16px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.flow ol { display: flex; gap: 8px; }
.flow li { flex: 1; min-width: 0; }
.flow li a {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  height: 100%;
  padding: 14px;
  font-size: 14px; font-weight: 700;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  transition: all .15s;
}
.flow li a span { font-size: 12px; color: var(--svc, var(--c-primary)); }
.flow li a:hover { border-color: var(--svc, var(--c-primary)); background: var(--svc-soft, var(--c-primary-soft)); }
.flow li:not(:last-child) a::after {
  content: ""; position: absolute; right: -7px; top: 50%;
  width: 6px; height: 6px; border: solid var(--c-primary-line); border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cat-card {
  padding: 22px 24px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  transition: box-shadow .2s, border-color .2s;
}
.cat-card:hover { border-color: var(--c-primary-line); box-shadow: var(--shadow); }
.cat-card-head { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--c-line-2); }
.cat-card-no {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  font-size: 14px; font-weight: 800; color: var(--c-primary);
  background: var(--c-primary-soft);
}
.cat-card h2 { font-size: 18px; font-weight: 800; }
.cat-card-head p { font-size: 13px; color: var(--c-text-3); }
.cat-card li a { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; color: var(--c-text-2); }
.cat-card li a::after { content: "›"; color: var(--c-text-3); }
.cat-card li a:hover { color: var(--c-primary); }
.cat-card li a:hover::after { color: var(--c-primary); }

/* ---- search page */
.search-page h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); }
.search-page h1 mark { background: none; color: var(--c-primary); }
.search-page h1 span { font-size: 16px; font-weight: 600; color: var(--c-text-3); margin-left: 4px; }
.sr-list li { border-bottom: 1px solid var(--c-line-2); }
.sr-list a { display: block; padding: 20px 4px; }
.sr-list a:hover h2 { color: var(--c-primary); }
.sr-cat { font-size: 12px; font-weight: 700; color: var(--c-primary); }
.sr-list h2 { margin-top: 2px; font-size: 18px; font-weight: 700; }
.sr-list p { margin-top: 6px; font-size: 14px; color: var(--c-text-2); }
.sr-empty { padding: 60px 0; text-align: center; color: var(--c-text-2); }
.sr-empty p:first-child { font-size: 17px; font-weight: 700; color: var(--c-text); margin-bottom: 6px; }

/* ================================================================ [3] toc */
.toc { position: sticky; top: var(--header-h); max-height: calc(100vh - var(--header-h)); overflow-y: auto; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc-inner { padding: 36px 0 40px; }
.toc-title { margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--c-text); }

.toc-list { border-left: 1px solid var(--c-line); }
.toc-list a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 14px;
  font-size: 13px; line-height: 1.5; color: var(--c-text-3);
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.toc-list .lv-h3 a { padding-left: 26px; font-size: 12.5px; }
.toc-list a:hover { color: var(--c-text); }
.toc-list a.active { color: var(--c-primary); font-weight: 700; border-left-color: var(--c-primary); }

.toc-related { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line-2); }
.toc-related a { display: block; padding: 4px 0; font-size: 13px; color: var(--c-text-2); }
.toc-related a:hover { color: var(--c-primary); }
.toc-related a.active { color: var(--c-text); font-weight: 700; }

.recent-list li + li { border-top: 1px solid var(--c-line-2); }
.recent-list a { display: block; padding: 10px 0; }
.recent-list .recent-cat { display: block; font-size: 11px; font-weight: 700; color: var(--c-primary); }
.recent-list strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.recent-list time { font-size: 12px; color: var(--c-text-3); }
.recent-list a:hover strong { color: var(--c-primary); }

.count-list li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--c-text-2); }
.count-list b { color: var(--c-primary); }

.help-box {
  margin-top: 32px; padding: 16px;
  font-size: 13px;
  border-radius: var(--radius);
  background: var(--c-bg-2);
}
.help-box strong { display: block; font-size: 13px; }
.help-box p { margin: 2px 0 8px; color: var(--c-text-3); font-size: 12px; }
.help-box a { font-weight: 700; color: var(--c-primary); }

/* ================================================================ footer / misc */
.footer { border-top: 1px solid var(--c-line); background: var(--c-bg-2); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 28px 24px; font-size: 13px; color: var(--c-text-2); }
.footer-inner a { color: var(--c-primary); text-decoration: underline; }
.footer .copy { margin-top: 4px; color: var(--c-text-3); }
/* 바닥글 — 레이아웃 안 마지막 줄(guide.php)에 두고 배경·윗선만 화면 끝까지(그림자로 늘려 가로 스크롤 없음).
   좌측 메뉴(sticky)는 제자리에 있고, 맨 아래에선 바닥글이 상단바처럼 메뉴 아래쪽을 덮는다 */
.layout > .footer { grid-column: 1 / -1; position: relative; z-index: 5; margin-top: 48px; border-top: 0; box-shadow: 0 0 0 100vmax var(--c-bg-2); clip-path: inset(0 -100vmax); }
.layout > .footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--c-line); box-shadow: 0 0 0 100vmax var(--c-line); clip-path: inset(0 -100vmax); }
.layout > .footer .footer-inner { max-width: none; padding: 28px 0; }

.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .2s;
}
.to-top svg { width: 20px; height: 20px; fill: none; stroke: var(--c-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--c-primary); }

.dim { position: fixed; inset: 0; z-index: 140; background: rgba(0,0,0,.4); }

/* ================================================================ services
   서비스별 색상 : 반자동(blue) · 배대지(teal) · 기타(purple) · 공통(gray)
   ---------------------------------------------------------------- */
.semi,   [data-svc="semi"]   { --svc: #2f6bff; --svc-dark: #1d4fd8; --svc-soft: #eef3ff; --svc-line: #c9d8ff; }
.bdj,    [data-svc="bdj"]    { --svc: #0b9e86; --svc-dark: #087a68; --svc-soft: #e7f7f3; --svc-line: #b5e6dc; }
/* 1차 메뉴 ID 별 색 — 예시는 etc(기타)=보라였으나 소싱&(sourcing)=보라, 기타=회색으로 */
.sourcing, [data-svc="sourcing"] { --svc: #7c4dff; --svc-dark: #5b2fd6; --svc-soft: #f3efff; --svc-line: #d9ccff; }
.etc,    [data-svc="etc"]    { --svc: #6b7684; --svc-dark: #4e5968; --svc-soft: #f2f4f6; --svc-line: #d1d6db; }
.common, [data-svc="common"] { --svc: #4e5968; --svc-dark: #333d4b; --svc-soft: #f2f4f6; --svc-line: #d1d6db; }
/* CRM 에서 고른 1차 메뉴 색(SGM_COLOR) — guide.js 가 메뉴·카드·태그에 svc-c-{색} 을 붙인다. 위 ID 규칙보다 뒤에 둬서 우선 */
.svc-c-blue   { --svc: #2f6bff; --svc-dark: #1d4fd8; --svc-soft: #eef3ff; --svc-line: #c9d8ff; }
.svc-c-teal   { --svc: #0b9e86; --svc-dark: #087a68; --svc-soft: #e7f7f3; --svc-line: #b5e6dc; }
.svc-c-purple { --svc: #7c4dff; --svc-dark: #5b2fd6; --svc-soft: #f3efff; --svc-line: #d9ccff; }
.svc-c-orange { --svc: #e8590c; --svc-dark: #c2410c; --svc-soft: #fff4e6; --svc-line: #ffd8a8; }
.svc-c-green  { --svc: #0e9f6e; --svc-dark: #047857; --svc-soft: #ecfdf5; --svc-line: #a7f3d0; }
.svc-c-gray   { --svc: #6b7684; --svc-dark: #4e5968; --svc-soft: #f2f4f6; --svc-line: #d1d6db; }

.svc-tag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px; margin-right: 6px;
  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
  color: var(--svc-dark, var(--c-text-2)); background: var(--svc-soft, var(--c-line-2));
  border-radius: 5px; vertical-align: 1px;
}
.post-body td .svc-tag { margin-right: 0; }

/* ---- sidebar : 내 맞춤 가이드 */
.my-path {
  display: block; margin: 0 0 18px; padding: 14px 14px 12px;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: linear-gradient(135deg, #f5f8ff, #effaf7);
  transition: border-color .15s, box-shadow .15s;
}
.my-path:hover, .my-path.active { border-color: var(--c-primary-line); box-shadow: var(--shadow); }
.my-path small { display: block; font-size: 11px; font-weight: 700; color: var(--c-text-3); }
.my-path strong { display: block; margin: 2px 0 8px; font-size: 14px; line-height: 1.4; }
.my-path.empty strong { font-size: 13px; font-weight: 600; color: var(--c-text-2); margin-bottom: 6px; }
.my-path-count { display: block; margin-top: 6px; font-size: 12px; color: var(--c-text-3); }
.my-path-go { font-size: 13px; font-weight: 700; color: var(--c-primary); }

.pbar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.06); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2f6bff, #0b9e86); transition: width .3s; }

.nav-block { padding-bottom: 6px; }
.nav-block.bottom { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line-2); }
.nav-dot { width: 22px; display: grid; place-items: center; }
.nav-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-text-3); }
.read-mark { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--c-tip); }

.svc-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  margin: 14px 0 6px; padding: 3px;
  background: var(--c-line-2); border-radius: 10px;
}
.svc-tab {
  position: relative;
  height: 34px; font-size: 14px; font-weight: 700; color: var(--c-text-3);
  border-radius: 8px; transition: all .15s;
}
.svc-tab:hover { color: var(--c-text); }
.svc-tab.on { color: var(--svc); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.svc-tab .mine { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--svc); }
.svc-panel { padding-top: 4px; }
.svc-home {
  display: flex; justify-content: space-between; align-items: center;
  margin: 2px 0 6px; padding: 9px 12px;
  font-size: 13px; font-weight: 700; color: var(--svc);
  border-radius: var(--radius-s);
}
.svc-home:hover, .svc-home.active { background: var(--svc-soft); }
.nav-group[data-svc] .nav-no { color: var(--c-text-3); }
.nav-group.open .nav-no { color: var(--svc); }

/* ---- flow diagram (본문) */
.post-body .flow-diagram { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }
.fd-step {
  position: relative; flex: 1 1 110px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--svc-soft); border: 1px solid var(--svc-line);
  line-height: 1.4;
}
.fd-step small { display: block; font-size: 11px; font-weight: 700; color: var(--svc); }
.fd-step strong { font-size: 14px; }
.fd-step:not(:last-child)::after {
  content: ""; position: absolute; right: -15px; top: 50%;
  width: 7px; height: 7px; border: solid var(--c-text-3); border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.fd-step.link { --svc: #e8590c; --svc-soft: #fff4e6; --svc-line: #ffd8a8; }

/* ---- callout : 반자동 + 배대지 연계 */
.post-body .callout.link { background: linear-gradient(90deg, #eef3ff, #e7f7f3); }
.post-body .callout.link::before { content: "⇄"; background: linear-gradient(135deg, #2f6bff, #0b9e86); font-size: 12px; }
.post-body .callout.link > strong { color: #1d4fd8; }

/* ---- home : 이용 유형 선택 */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.type-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 18px; text-align: left;
  background: #fff; border: 1.5px solid transparent; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.type-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.type-card.on { border-color: var(--c-primary); }
.type-card strong { font-size: 16px; font-weight: 800; }
.type-desc { flex: 1; font-size: 13px; line-height: 1.55; color: var(--c-text-2); }
.type-foot { width: 100%; margin-top: 6px; }
.type-foot em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--c-primary); }
.type-icons { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 4px; }
.ti {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  font-size: 13px; font-weight: 800; color: #fff; background: var(--svc);
}
.ti.plus { width: auto; background: none; color: var(--c-text-3); }

/* ---- home : 서비스 카드 */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.svc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line); border-top: 4px solid var(--svc);
  border-radius: 16px; overflow: hidden;
  transition: box-shadow .2s;
}
.svc-card:hover { box-shadow: var(--shadow); }
.svc-card.wide { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; }
.svc-card-head { padding: 22px 24px 14px; }
.svc-card h3 { margin-top: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.svc-card-head p { margin-top: 6px; font-size: 14px; color: var(--c-text-2); }
.svc-card-cats { flex: 1; padding: 0 24px 8px; }
.svc-card.wide .svc-card-cats { padding: 22px 24px 0; }
.svc-card-cats a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; border-bottom: 1px dashed var(--c-line-2); }
.svc-card-cats li:last-child a { border-bottom: 0; }
.svc-card-cats a:hover { color: var(--svc); }
.sc-no { font-size: 11px; font-weight: 800; color: var(--svc); width: 18px; }
.svc-card-cats small { margin-left: auto; font-size: 12px; color: var(--c-text-3); }
.svc-card-foot { display: flex; gap: 8px; padding: 14px 24px 20px; }
.svc-card.wide .svc-card-foot { grid-column: 1; padding-top: 0; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 18px; }
.btn.solid { color: #fff; background: var(--svc); }
.btn.solid:hover { background: var(--svc-dark); }
.btn.line { color: var(--svc); border: 1px solid var(--svc-line); background: #fff; }
.btn.line:hover { background: var(--svc-soft); }
.home .cat-card h3 { font-size: 17px; font-weight: 800; }

/* ---- service page */
.svc-hero {
  padding: 36px 40px; border-radius: 20px;
  background: radial-gradient(circle at 92% 10%, var(--svc-line), transparent 45%), var(--svc-soft);
}
.svc-hero h1 { margin-top: 12px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.svc-hero > p { margin-top: 10px; font-size: 16px; color: var(--c-text-2); }
.svc-hero .btn.primary { background: var(--svc); box-shadow: none; }
.svc-hero .btn.primary:hover { background: var(--svc-dark); }
.svc-hero-types { margin-top: 18px; font-size: 13px; color: var(--c-text-3); }
.svc-hero-types a { margin-left: 8px; font-weight: 700; color: var(--svc-dark); text-decoration: underline; text-underline-offset: 3px; }
.svc-page .cat-card-no { color: var(--svc); background: var(--svc-soft); }
.svc-page .cat-card li a:hover, .svc-page .cat-card li a:hover::after { color: var(--svc); }
.svc-page .cat-card:hover { border-color: var(--svc-line); }
.sec-title small { font-size: 14px; font-weight: 600; color: var(--c-text-3); margin-left: 4px; }

/* ---- path page (맞춤 가이드) */
.seg-wrap { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 20px; background: var(--c-line-2); border-radius: 10px; }
.seg { height: 34px; padding: 0 16px; font-size: 14px; font-weight: 700; color: var(--c-text-3); border-radius: 8px; }
.seg:hover { color: var(--c-text); }
.seg.on { color: var(--c-text); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.path-head { padding: 32px; border-radius: 20px; background: linear-gradient(135deg, #f3f7ff, #ecf9f5); }
.path-head h1 { margin-top: 8px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.path-head > p { margin-top: 8px; font-size: 15px; color: var(--c-text-2); }
.path-progress { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.path-progress .pbar { flex: 1; height: 8px; background: rgba(255,255,255,.9); }
.path-done { font-weight: 700; color: var(--c-tip); align-self: center; }

.stage { margin-top: 40px; }
.stage h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.stage-no { padding: 3px 9px; font-size: 12px; font-weight: 800; color: #fff; background: var(--c-text); border-radius: 6px; }
.stage h2 em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 600; color: var(--c-text-3); }
.stage-desc { margin-top: 4px; font-size: 14px; color: var(--c-text-3); }
.stage-list { margin-top: 14px; border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; }
.stage-list li + li { border-top: 1px solid var(--c-line-2); }
.stage-list a { display: flex; gap: 14px; padding: 14px 18px; transition: background .15s; }
.stage-list a:hover { background: var(--c-bg-2); }
.chk { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--c-line); border-radius: 50%; }
.stage-list li.done .chk {
  border-color: var(--c-tip);
  background: var(--c-tip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;
}
.st-body { min-width: 0; }
.st-body strong { font-size: 15px; font-weight: 700; }
.st-body small { display: block; margin-top: 3px; font-size: 13px; color: var(--c-text-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.stage-list li.done strong { color: var(--c-text-2); }
.path-reset { margin-top: 28px; text-align: right; }
.path-reset button { font-size: 12px; color: var(--c-text-3); text-decoration: underline; }

/* ---- article : 맞춤 가이드 진행 / 유형 안내 */
.path-bar {
  display: flex; align-items: stretch; gap: 12px;
  margin-top: 56px; padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f3f7ff, #ecf9f5);
}
.pb-info { flex: 1; min-width: 0; }
.pb-info small { display: block; font-size: 12px; color: var(--c-text-3); }
.pb-info strong { display: block; margin: 2px 0 8px; font-size: 15px; }
.pb-next {
  display: flex; flex-direction: column; justify-content: center;
  padding: 10px 16px; max-width: 55%;
  background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.pb-next small { font-size: 12px; color: var(--c-text-3); }
.pb-next strong { font-size: 14px; color: var(--c-primary); }
.pb-next:hover strong { text-decoration: underline; }
.path-bar + .feedback { margin-top: 16px; }

.type-notice {
  margin-bottom: 20px; padding: 10px 14px;
  font-size: 13px; color: var(--c-text-2);
  background: var(--c-bg-2); border: 1px solid var(--c-line-2); border-radius: 10px;
}
.type-notice a { margin-left: 4px; font-weight: 700; color: var(--c-primary); }

.post .post-cat { color: var(--c-text-2); }
.post .post-cat .pc-no { color: var(--svc); background: var(--svc-soft); }

.side-path { display: block; margin-top: 28px; padding: 14px; border-radius: var(--radius); background: linear-gradient(135deg, #f3f7ff, #ecf9f5); }
.side-path small { display: block; font-size: 11px; font-weight: 700; color: var(--c-text-3); }
.side-path strong { display: block; margin: 2px 0 8px; font-size: 13px; }
.side-path span { display: block; margin-top: 6px; font-size: 12px; color: var(--c-text-3); }
.side-path:hover strong { color: var(--c-primary); }

.link-list li a { display: flex; align-items: center; padding: 6px 0; font-size: 13px; color: var(--c-text-2); }
.link-list li a:hover { color: var(--c-text); }
.recent-list .svc-tag { margin-bottom: 4px; }

/* ---- search : 서비스 필터 */
.fchips { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px 10px; border-bottom: 1px solid var(--c-line-2); margin-bottom: 6px; }
.fchips.page { padding: 16px 0; margin: 0; }
.fchip {
  height: 30px; padding: 0 11px;
  font-size: 13px; font-weight: 600; color: var(--c-text-2);
  border: 1px solid var(--c-line); border-radius: 15px; background: #fff;
}
.fchip b { margin-left: 2px; font-weight: 700; color: var(--c-text-3); }
.fchip:hover:not(:disabled) { border-color: var(--svc, var(--c-text-3)); }
.fchip.on { color: #fff; background: var(--svc, var(--c-text)); border-color: var(--svc, var(--c-text)); }
.fchip.on b { color: rgba(255,255,255,.8); }
.fchip:disabled { opacity: .4; cursor: default; }
.sp-cat .svc-tag, .sr-cat .svc-tag { height: 18px; font-size: 10.5px; }
.sp-cat, .sr-cat { color: var(--c-text-3) !important; }

/* ================================================================ responsive */
/* 우측 목차 숨김 → 본문 상단 접이식 목차 사용 */
@media (max-width: 1140px) {
  .layout { grid-template-columns: var(--side-w) minmax(0, 1fr); column-gap: var(--gap); }
  .toc { display: none; }
  .toc-inline { display: block; }
}

/* 좌측 카테고리 → 드로어 */
@media (max-width: 860px) {
  :root { --header-h: 58px; }
  .gnb-inner { padding: 0 16px; gap: 12px; }
  .nav-toggle { display: flex; }
  .logo-text { font-size: 16px; }
  .search { width: auto; flex: 1; min-width: 0; }
  .search-kbd { display: none; }

  .layout { display: block; padding: 0 16px; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 150;
    width: 290px; max-width: 85vw; height: 100%;
    padding: 0 12px 40px;
    background: #fff;
    border-right: 0;
    box-shadow: none;
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform .25s ease, visibility 0s .25s;
    scrollbar-color: var(--c-line) transparent;
  }
  .drawer-open { overflow: hidden; }
  .drawer-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-l); transition: transform .25s ease; }
  .sidebar-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h); margin-bottom: 8px; padding: 0 4px 0 12px;
    background: #fff; border-bottom: 1px solid var(--c-line-2);
  }
  .sidebar-close { width: 36px; height: 36px; font-size: 26px; line-height: 1; color: var(--c-text-2); border-radius: var(--radius-s); }
  .sidebar-close:hover { background: var(--c-line-2); }

  .content { padding: 24px 0 60px; }
  .post-head h1, .hero h1 { font-size: 27px; }
  .post-lead { font-size: 16px; }
  .post-body { font-size: 15.5px; }
  .post-body h2 { font-size: 21px; margin-top: 44px; }
  .post-body h3 { font-size: 17px; }
  .hero { padding: 32px 24px; }
  .hero-desc br, .hero h1 br { display: none; }
  .cat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .type-grid, .svc-grid { grid-template-columns: 1fr; }
  .svc-card.wide { display: flex; }
  .svc-card.wide .svc-card-cats { padding-top: 0; }
  .path-bar { flex-direction: column; }
  .pb-next { max-width: none; }
  .path-head, .svc-hero { padding: 24px 20px; }
  .seg-wrap { display: flex; }
  .seg { flex: 1; padding: 0 8px; font-size: 13px; }
  .fd-step::after { display: none; }
  .stage-list a { padding: 12px 14px; }
  .logo { gap: 8px; }
  .logo-mark { width: 28px; height: 28px; font-size: 15px; }
  .logo-text { font-size: 15px; }
  .search-input { padding-right: 14px; }
  .search-panel { position: fixed; left: 16px; right: 16px; top: calc(var(--header-h) + 6px); width: auto; }
  .flow ol { flex-wrap: wrap; }
  .flow li { flex: 1 1 calc(50% - 4px); }
  .flow li a::after { display: none; }
  .pager { grid-template-columns: 1fr; }
  .post-body table { display: block; overflow-x: auto; white-space: nowrap; }
  .post-meta .link-copy { margin-left: 0; }
  .to-top { right: 16px; bottom: 16px; }
}

@media (max-width: 760px) {
  .svc-card.wide { display: flex; }
  .svc-card.wide .svc-card-cats { padding-top: 0; }
}

@media (max-width: 420px) {
  .logo-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .gnb, .sidebar, .toc, .feedback, .pager, .footer, .to-top, .toc-inline { display: none !important; }
  .layout { display: block; }
}

/* ================================================================ sidebar : 서비스 1차 메뉴 (01 반자동 / 02 배대지 / 03 기타) */
.svc-group { margin-top: 2px; }
.svc-group .nav-cat { font-size: 16px; }
.svc-group.open .nav-no { color: var(--svc); }
/* 부드러운 열림/닫힘 : grid-template-rows 0fr ↔ 1fr */
.nav-svc-body {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 0 0 23px;
  border-left: 1px solid var(--c-line);
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .35s ease, margin .35s ease, opacity .25s ease, visibility 0s .35s;
}
.svc-group.open .nav-svc-body {
  grid-template-rows: 1fr;
  margin: 2px 0 12px 23px;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .35s ease, margin .35s ease, opacity .3s ease .05s, visibility 0s;
}
.nav-svc-body .nav-sub { display: block; min-height: 0; overflow: hidden; margin: 0; padding-left: 12px; border-left: 0; }
.nav-svc-body .nav-sub a.active::before { left: -12px; }
.cat-nav.no-anim .nav-svc-body, .cat-nav.no-anim .nav-arrow { transition: none !important; }

/* ---- sidebar : 3차 메뉴 (마켓연동 등) */
.nav-sub2-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; font-size: 14px; color: var(--c-text-2); text-align: left; border-radius: 6px;
}
.nav-sub2-btn:hover { color: var(--c-text); background: var(--c-bg-2); }
.nav-sub2-btn .nav-arrow { width: 14px; height: 14px; }
.nav-sub2.open > .nav-sub2-btn { color: var(--c-text); font-weight: 700; }
.nav-sub2.open .nav-arrow { transform: rotate(90deg); }
.nav-sub3-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.nav-sub2.open .nav-sub3-wrap { grid-template-rows: 1fr; }
.nav-sub3 { min-height: 0; overflow: hidden; margin-left: 10px; padding-left: 10px; }
.nav-sub3 a { font-size: 13.5px; }
.nav-sub3 a.active::before { display: none; }
.cat-nav.no-anim .nav-sub3-wrap { transition: none !important; }

/* ---- 준비 중 문서 */
.empty-doc { padding: 60px 20px; text-align: center; color: var(--c-text-3); background: var(--c-bg-2); border-radius: var(--radius); }
.empty-doc strong { display: block; font-size: 17px; color: var(--c-text-2); margin-bottom: 6px; }

/* ================================================================ admin (가이드 화면 내 관리자 요소) */
:root { --svc: var(--c-primary); --svc-dark: var(--c-primary-dark); --svc-soft: var(--c-primary-soft); --svc-line: var(--c-primary-line); }
.admin-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 42px; padding: 0 16px; margin-left: 10px;
  font-size: 14px; font-weight: 700; color: #fff; background: var(--c-text); border-radius: 21px;
}
.admin-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.admin-btn:hover { background: #000; }
.draft-bar { padding: 8px 16px; font-size: 13px; text-align: center; color: #7a4b00; background: #fff4d6; border-bottom: 1px solid #ffe2a3; }
.draft-bar a { margin-left: 6px; font-weight: 700; text-decoration: underline; }
.post-title-row .edit-doc { color: #fff; background: var(--c-text); border-color: var(--c-text); }
.post-title-row .edit-doc:hover { color: #fff; background: #000; }
.hidden-badge { display: inline-block; padding: 2px 8px; font-size: 13px; font-weight: 700; color: #b42318; background: #fee4e2; border-radius: 6px; vertical-align: middle; }
.post-body .toc-anchor { scroll-margin-top: calc(var(--header-h) + 24px); }
@media (max-width: 560px) { .admin-btn { padding: 0 12px; margin-left: 6px; } }