/* ── Reset & Base ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%;
    overflow: hidden;
  }
  body {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #1a1a1a;
    background: #ffffff;
  }

  /* ── Color Tokens ── */
  :root {
    --brand-1: #5B4AE8;
    --brand-2: #9B59F5;
    --brand-gradient: linear-gradient(135deg, #5B4AE8 0%, #9B59F5 50%, #E85BAA 100%);
    --surface: #ffffff;
    --surface-2: #F7F7FA;
    --surface-3: #F0EFF8;
    --border: #E8E8EE;
    --border-strong: #D0CFDC;
    --text-primary: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #888899;
    --admin-bg: #FFF8F0;
    --admin-border: #F0C27A;
    --admin-text: #9A6C00;
    --warn-bg: #FFF6F0;
    --warn-border: #F5C6A0;
    --warn-text: #C45000;
    --tip-bg: #F0F7FF;
    --tip-border: #A8CFFF;
    --tip-text: #1A5DB0;
    --lnb-width: 240px;
    --toc-width: 240px;
    --header-h: 64px;
  }

  /* ══════════════════════════════════════════
     SHARED HEADER
  ══════════════════════════════════════════ */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--header-h);
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
  }
  .site-header .logo-wrap {
    display: flex; align-items: center;
    text-decoration: none;
  }
  .logo-suffix {
    margin-left: 9px;
    font-size: 18px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
  }
  .header-cta {
    display: inline-flex; align-items: center;
    padding: 8px 28px;
    background: #5B5BD6;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px; font-weight: 400;
    border-radius: 999px;
    text-decoration: none;
    transition: opacity 0.15s;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .header-cta:hover { opacity: 0.85; }

  /* ══════════════════════════════════════════
     PAGE ROUTING
  ══════════════════════════════════════════ */
  .page {
    display: none;
  }
  .page.active {
    display: block;
    position: fixed;
    top: var(--header-h); left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    z-index: 1;
  }

  /* ══════════════════════════════════════════
     MAIN PAGE (Landing)
  ══════════════════════════════════════════ */
  #page-main.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .main-hero {
    text-align: center;
    padding: 60px 24px 56px;
  }
  .main-hero h1 {
    font-size: 42px; font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--text-primary);
    margin-bottom: 16px;
  }
  .main-hero p {
    font-size: 18px; color: var(--text-secondary);
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 48px 100px;
  }
  .card-group-label {
    grid-column: 1 / -1;
    font-size: 13px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.6px;
    margin: 4px 0 -8px;
  }
  .nav-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 0;
    cursor: pointer;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
    text-align: left;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .nav-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-3px);
  }
  .nav-card-thumb {
    width: 100%; aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0;
    background: var(--surface-2);
  }
  .nav-card-thumb svg { width: 40px; height: 40px; }
  .nav-card-body { padding: 20px 20px 22px; }
  .nav-card-title-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
  }
  .nav-card h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); }
  .badge-admin {
    font-size: 11px; font-weight: 600;
    background: var(--admin-bg); color: var(--admin-text);
    border: 1px solid var(--admin-border);
    border-radius: 4px; padding: 1px 6px;
  }
  .nav-card p { font-size: 13px; color: var(--text-secondary); }

  /* Card accent colors */
  .card-hardware .nav-card-thumb { background: #EFF3FF; }
  .card-software .nav-card-thumb { background: #EEF9F2; }
  .card-settings .nav-card-thumb { background: #FFF5EB; }
  .card-faq .nav-card-thumb { background: #F5F5F5; }

  /* ══════════════════════════════════════════
     SUB PAGE LAYOUT
  ══════════════════════════════════════════ */
  .sub-layout {
    display: flex;
    min-height: 100%;
    background: #fff;
  }

  /* Left Navigation */
  .lnb {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: var(--lnb-width);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: #ffffff;
    border-right: 1px solid var(--border);
    padding: 24px 0 40px;
    flex-shrink: 0;
    z-index: 50;
  }
  .lnb-section { margin-bottom: 4px; }
  .lnb-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.6px;
    padding: 8px 20px 4px;
  }
  .lnb-item {
    display: block;
    padding: 9px 20px;
    font-size: 16px; font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.12s, color 0.12s;
    border-left: 2px solid transparent;
    line-height: 1.4;
  }
  .lnb-item:hover { background: var(--surface-3); color: var(--brand-1); }
  .lnb-item.active {
    font-weight: 700; color: var(--brand-1);
    border-left-color: var(--brand-1);
    background: #EEE8FF;
  }
  .lnb-divider {
    height: 1px; background: var(--border);
    margin: 4px 0 8px;
  }
  .lnb-cta {
    display: block;
    margin: 16px 16px 0;
    padding: 10px 14px;
    background: var(--brand-1);
    color: #fff;
    font-size: 13px; font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.15s;
  }
  .lnb-cta:hover { opacity: 0.85; }
  /* LNB 최상위 부모 타이틀 ("기본 세팅 가이드") — 관리자/FAQ와 같은 뎁스 */
  .lnb-parent {
    display: block;
    padding: 9px 20px;
    font-size: 16px; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.12s;
  }
  .lnb-parent:hover { color: var(--brand-1); }
  /* 부모 아래 소제목(하위 항목): 들여쓰기 + 작은 글씨 */
  .lnb-item.lnb-sub {
    padding-left: 36px;
    font-size: 14px;
  }
  /* 소프트웨어 세팅 하위(3뎁스) 메뉴: 더 깊은 들여쓰기 */
  .lnb-item.lnb-sub2 {
    padding-left: 52px;
    font-size: 13px;
  }
  .lnb-item.lnb-home { font-weight: 600; }

  /* Content area */
  .sub-content {
    margin-left: var(--lnb-width);
    margin-right: var(--toc-width);
    flex: 1;
    min-width: 0;
    padding: 48px 0 80px;
    display: flex;
    justify-content: center;
  }
  .sub-content-inner {
    width: 100%;
    max-width: 1300px;
    padding: 0 20px;
  }

  /* Right TOC */
  .toc-panel {
    position: fixed;
    top: var(--header-h);
    right: 0;
    width: var(--toc-width);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 32px 20px 40px;
    border-left: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
    z-index: 50;
    display: none;
  }
  .toc-panel-title {
    font-size: 11px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.6px; margin-bottom: 12px;
  }
  .toc-link {
    display: block;
    font-size: 13px; color: var(--text-secondary);
    text-decoration: none;
    padding: 5px 0 5px 12px;
    border-left: 2px solid transparent;
    margin-bottom: 2px;
    transition: all 0.12s;
    line-height: 1.4;
    cursor: pointer;
  }
  .toc-link:hover { color: var(--brand-1); border-left-color: var(--brand-1); }
  .toc-link.active { color: var(--brand-1); font-weight: 600; border-left-color: var(--brand-1); }
  .toc-link-sub { padding-left: 20px; font-size: 12px; }
  .toc-link-sub2 { padding-left: 32px; font-size: 12px; }
  /* TOC 그룹 라벨 (앱 설치 / 앱 시작 / 대화 화면) */
  .toc-group {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 16px 0 6px;
  }
  .toc-group:first-of-type { margin-top: 4px; }

  /* ── h2 자동 번호 매기기 (페이지별 1부터) ── */
  .page { counter-reset: sec; }
  h2.section-title, h2.faq-group-title { counter-increment: sec; }
  h2.section-title { counter-reset: sub; }   /* 각 h2마다 하위(1.1) 번호 초기화 */
  h2.section-title::before,
  h2.faq-group-title::before { content: counter(sec) ". "; }


  /* ══════════════════════════════════════════
     CONTENT COMPONENTS
  ══════════════════════════════════════════ */
  .page-title-area { margin-bottom: 40px; }
  #page-set-display .page-title-area,
  #page-set-labs .page-title-area { margin-bottom: 15px; }
  .page-title-area h1 {
    font-size: 36px; font-weight: 700;
    letter-spacing: -0.4px; color: var(--text-primary);
    margin-bottom: 8px;
  }
  .page-title-area .subtitle {
    font-size: 18px; color: var(--text-secondary); font-weight: 600;
  }
  .page-title-area .subtitle strong { font-weight: 600; color: var(--text-primary); }

  .section { margin-bottom: 40px; scroll-margin-top: 80px; }
  .section-title {
    font-size: 24px; font-weight: 700;
    color: var(--text-primary); margin-bottom: 16px;
    padding-bottom: 0;
  }
  .section-subtitle {
    font-size: 18px; font-weight: 700;
    color: var(--text-primary); margin: 24px 0 10px;
  }
  /* 각 섹션의 대표 소제목 (h2 바로 아래 단계) */
  .section > h3.section-subtitle:first-child {
    font-size: 21px;
    margin-top: 12px;
    counter-increment: sub;
  }
  .section > h3.section-subtitle:first-child::before {
    content: counter(sec) "." counter(sub) " ";
  }
  /* TestFlight 배포 가이드: 내부 초대 요청 하위 소제목(내부/외부 계정 프로세스) 1.1 / 1.2 자동 넘버링 */
  #page-software-testflight h3.section-subtitle { counter-increment: sub; }
  #page-software-testflight h3.section-subtitle::before { content: counter(sec) "." counter(sub) " "; }
  /* MDM 배포 가이드: Interactive Agent 하위 소제목(역할/상태) 2.1 / 2.2 자동 넘버링 */
  #page-software-mdm h4.agent-subtitle { counter-increment: sub; }
  #page-software-mdm h4.agent-subtitle::before { content: counter(sec) "." counter(sub) " "; }
  /* 앱 시작하기: 하위 소제목(API Key 생성 및 승인=1.1, 템플릿 리스트 항목=2.1) 자동 넘버링 (n.n 소제목 스타일) */
  #start-apikey h3.section-subtitle,
  #start-template-list h3.section-subtitle { counter-increment: sub; font-size: 21px; }
  #start-apikey h3.section-subtitle::before,
  #start-template-list h3.section-subtitle::before { content: counter(sec) "." counter(sub) " "; }
  /* 하드웨어 세팅: 섹션(h2) 안의 대표 h3 항목 X.Y 번호 */
  #page-hardware .section > h3.section-subtitle { counter-increment: sub; }
  #page-hardware .section > h3.section-subtitle::before {
    content: counter(sec) "." counter(sub) " ";
  }
  /* 하드웨어 소제목도 소프트웨어 대표 소제목과 동일하게 21px */
  #page-hardware .section > h3.section-subtitle { font-size: 21px; }
  /* 관리자 세팅 가이드 탭별 페이지: 항목(h2) 간 간격 확보 */
  [id^="page-set-"] .section-title { margin-top: 40px; }
  /* 각 메뉴 첫 번째 소제목 상단 여백 통일 (content-list flex 래퍼로 인한 마진 누적 제거 → 40px) */
  [id^="page-set-"] .content-list > .section-title:first-child { margin-top: 0; }
  /* 일부 탭은 콘텐츠 전체가 content-list로 감싸져 20px 들여쓰기됨 → 다른 탭과 정렬 통일 */
  [id^="page-set-"] .page-title-area + .content-list { margin-left: 0; }
  /* 탭 페이지: h2 아래 소제목(h3)에 X.Y 번호 (예: 2.1) */
  [id^="page-set-"] h3.section-subtitle { counter-increment: sub; font-size: 21px; margin: 14px 0 8px; }
  /* 소제목 앞 스텝/하위 목록의 아래 여백 축소 → n.1↔n.2 간격 통일 */
  [id^="page-set-"] .content-list-sub { margin-bottom: 0; }
  [id^="page-set-"] h3.section-subtitle::before { content: counter(sec) "." counter(sub) " "; }

  /* ── 최상위 번호 제목(n.) 사이에만 회색 구분선 (모든 페이지 공통) ── */
  h2.section-title {
    border-top: 1px solid var(--border);
    margin-top: 28px;
    padding-top: 24px;
  }
  /* n.n 소제목: 구분선 없이 여백으로만 구분 */
  #page-hardware .section > h3.section-subtitle,
  #page-software-testflight h3.section-subtitle,
  #page-software-mdm h4.agent-subtitle,
  #start-apikey h3.section-subtitle,
  #start-template-list h3.section-subtitle,
  [id^="page-set-"] h3.section-subtitle {
    margin-top: 36px;
  }
  /* 각 페이지 최상단(첫 번째) 번호 제목에는 구분선 제외 */
  #hw-station > h2.section-title,
  #install-update > h2.section-title,
  #start-apikey > h2.section-title,
  #chat-layout > h2.section-title,
  #tf-invite,
  #page-software-testflight .section-title.external-only,
  [id^="page-set-"] .sub-content-inner > h2.section-title:first-of-type,
  [id^="page-set-"] .sub-content-inner > .content-list > h2.section-title:first-of-type {
    border-top: none;
    padding-top: 0;
  }
  .section-desc {
    font-size: 16px; color: var(--text-secondary);
    line-height: 1.8; margin-bottom: 20px;
    padding: 4px 16px;
    border-left: 3px solid #333333;
  }

  /* Step component (이미지 포함 스텝) */
  .step-list { display: flex; flex-direction: column; gap: 0; margin: 20px 0; }
  .step-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    position: relative;
  }
  .step-item:not(:last-child) .step-line {
    display: block;
  }
  .step-num-col {
    display: flex; flex-direction: column; align-items: center;
    padding-top: 4px;
  }
  .step-num {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 6px;
    background: #fff;
    border: 1.5px solid var(--border-strong);
    color: var(--text-secondary); font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
  }
  .step-line {
    display: none;
    width: 1.5px; background: var(--border);
    flex: 1;
    min-height: 20px;
    margin-top: 4px;
  }
  .step-body {
    padding: 0 0 28px 16px;
  }
  .step-body strong { display: block; font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
  /* 스텝 본문 안의 목록 라벨은 인라인 (줄바꿈 방지) */
  .step-body .content-list strong { display: inline; font-size: inherit; margin: 0; }
  .step-body p, .step-body span { font-size: 16px; color: var(--text-secondary); margin: 0; }

  /* 세팅 창 진입 방법: 이미지 3개 가로 나열 (콘텐츠 폭을 3등분) */
  .enter-steps-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0 24px;
    align-items: start;
  }
  .enter-step-img img {
    width: 100%;
    aspect-ratio: 1722 / 2416;
    object-fit: cover;
    border-radius: 10px; border: 1px solid var(--border); display: block;
  }

  /* 이미지 여러 장을 콘텐츠 폭에 맞춰 등분 (원본 비율 유지, 왜곡·크롭 없음) */
  .step-images-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 16px;
    margin: 16px 0 24px;
    align-items: start;
  }
  .step-images-row img {
    width: 100%;
    height: auto;
    border-radius: 10px; border: 1px solid var(--border); display: block;
  }
  .step-images-row figure { margin: 0; }
  .step-images-row figcaption {
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
  }

  /* Number table */
  .num-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
  .num-table th {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 10px 14px;
    font-weight: 700; text-align: left;
    color: var(--text-primary); font-size: 16px;
  }
  .num-table td {
    border: 1px solid var(--border);
    padding: 10px 14px;
    vertical-align: top; line-height: 1.6;
    color: var(--text-primary);
  }
  .num-table td.num-cell {
    width: 48px; text-align: center;
    font-weight: 400; color: var(--text-primary);
    white-space: nowrap;
  }
  .num-table th.num-cell {
    width: 48px; text-align: center;
    white-space: nowrap;
  }
  .num-table td.name-cell { font-weight: 400; width: 160px; white-space: nowrap; }

  /* Info boxes */
  .box { border-radius: 8px; padding: 14px 16px; margin: 16px 0; font-size: 16px; line-height: 1.7; }
  .box-warn {
    background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text);
  }
  .box-tip {
    background: var(--tip-bg); border: 1px solid var(--tip-border); color: var(--tip-text);
  }
  .box-admin {
    background: var(--admin-bg); border: 1px solid var(--admin-border); color: var(--admin-text);
  }
  .box-icon { font-size: 16px; margin-right: 6px; }
  .box-example {
    background: #fffbe6; border: 1px solid #ffe58f; color: #333333;
  }
  .box strong { font-weight: 700; display: inline; color: inherit; font-size: inherit; margin: 0; }

  /* 다른 페이지 섹션으로 이동하는 인라인 링크 */
  .jump-link {
    display: inline;
    white-space: nowrap;
    color: var(--brand-1);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
  }
  .jump-link:hover { text-decoration: underline; }

  /* 인용 스타일 안내 (블록쿼트) */
  .quote-note {
    margin: 0 0 24px;
    padding: 12px 18px;
    border-left: 4px solid #000000;
    color: var(--text-secondary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
  }

  /* Step grid (image + label row) */
  .step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
  }
  .step-grid-item {}
  .step-grid-item img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
    margin-bottom: 12px;
  }
  .step-grid-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .step-grid-num {
    width: 24px; height: 24px;
    border-radius: 6px;
    border: 1.5px solid var(--border-strong);
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .step-grid-text p {
    font-size: 16px; color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
  }

  /* Step simple (텍스트 전용, 이미지 없음) */
  .step-simple-list { display: flex; flex-direction: column; margin: 12px 0; }
  .step-simple-item {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 52px;
    position: relative;
  }
  .step-simple-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 40px;
    width: 1.5px;
    bottom: -12px;
    background: var(--border);
  }
  .step-simple-num {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 6px;
    background: #fff;
    border: 1.5px solid var(--border-strong);
    color: var(--text-secondary); font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    margin: 0 16px 0 10px;
  }
  .step-simple-text {
    font-size: 16px; color: var(--text-secondary);
    line-height: 1.6;
  }

  /* Content list */
  .content-list {
    margin: 12px 0 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
  }
  .content-list li { list-style: disc; padding-left: 4px; }
  .content-list-sub { margin-top: 6px; margin-left: 16px; }
  .content-list-sub li { list-style: circle; }
  /* 이미지(또는 이미지 행)로 시작하는 항목: 항목 자체 마커는 이미지 상단에 붙어 어색하므로 제거하고,
     이미지 아래 텍스트(.note-text)에 불릿이 붙도록 처리 */
  #tf-notes li:has(> img),
  #tf-notes li:has(> .step-images-row) { list-style: none; }
  #tf-notes .note-text { display: list-item; list-style: circle; }
  .content-list-ol { list-style: decimal !important; padding-left: 20px; display: block !important; }
  .content-list.content-list-ol > li { list-style: decimal !important; display: list-item !important; padding-left: 4px; }
  .content-list.content-list-ol > li:not(:last-child) { margin-bottom: 6px; }
  .content-list strong { color: var(--text-primary); }
  h4.agent-subtitle { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 16px 0 8px; }
  .content-list li:has(h4.agent-subtitle) { list-style: none; margin-left: -16px; }
  .content-list li:has(> .box) { list-style: none; margin-left: -16px; }
  code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 13px;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: var(--text-primary);
  }

  /* Image placeholder */
  .img-placeholder {
    width: 100%; border-radius: 10px;
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    color: var(--text-muted); font-size: 13px;
    margin: 16px 0;
    min-height: 200px;
  }
  .img-placeholder svg { width: 32px; height: 32px; opacity: 0.4; }
  .img-caption {
    text-align: center; font-size: 12px; color: var(--text-muted);
    margin-top: -8px; margin-bottom: 16px;
  }
  .guide-image {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
    margin: 16px 0;
  }

  /* FAQ accordion */
  .faq-group { margin-bottom: 80px; }
  .faq-group-title {
    font-size: 24px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 8px;
  }
  .faq-group-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; }
  .faq-item {
    border-top: 1px solid var(--border);
  }
  .faq-item:last-child { border-bottom: 1px solid var(--border); }
  .faq-q {
    width: 100%; text-align: left;
    padding: 18px 4px;
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    background: transparent; border: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; line-height: 1.5;
  }
  .faq-q-icon {
    flex-shrink: 0; font-size: 20px; line-height: 1;
    color: var(--text-muted); font-weight: 300;
    width: 20px; text-align: center;
    display: inline-block;
    transition: transform 0.25s ease, color 0.25s ease;
  }
  /* 열릴 때 '+' 를 45° 회전 → '×' 모양 (닫힐 때 역방향 복귀) */
  .faq-q.open .faq-q-icon {
    transform: rotate(45deg);
    color: var(--brand-1);
  }
  .faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s ease;
  }
  .faq-a-inner {
    overflow: hidden;
    padding: 0 4px;
    font-size: 16px; color: var(--text-secondary);
    line-height: 1.8;
    transition: padding 0.45s ease;
  }
  .faq-a.open { grid-template-rows: 1fr; }
  .faq-a.open .faq-a-inner { padding: 0 4px 20px; }
  .faq-a ol, .faq-a ul { margin: 8px 0 8px 20px; }
  .faq-a li { margin-bottom: 4px; }

  /* Tag / badge */
  .tag-admin {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600;
    background: var(--admin-bg); color: var(--admin-text);
    border: 1px solid var(--admin-border);
    border-radius: 4px; padding: 2px 7px; margin-left: 8px;
    vertical-align: middle;
  }

  /* Internal link */
  .link-internal {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--brand-1); font-size: 13px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s;
  }
  .link-internal:hover { border-bottom-color: var(--brand-1); }

  /* Shortcut table */
  .shortcut-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
  .shortcut-table th {
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 10px 14px; font-weight: 600; text-align: left;
    color: var(--text-secondary); font-size: 13px;
  }
  .shortcut-table td { border: 1px solid var(--border); padding: 10px 14px; }
  .key-badge {
    display: inline-block;
    background: var(--surface-2); border: 1.5px solid var(--border-strong);
    border-radius: 4px; padding: 2px 8px;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    font-family: monospace;
  }

  /* Toggle row */
  .toggle-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0;
  }
  .toggle-card {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; padding: 14px 16px;
  }
  .toggle-card .tc-head {
    font-size: 13px; font-weight: 700; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
  }
  .tc-on { color: #1A8A3C; }
  .tc-off { color: #888; }
  .toggle-card p { font-size: 13px; color: var(--text-secondary); }

  /* Status badge */
  .status-running { color: #1A8A3C; font-weight: 700; }
  .status-maintenance { color: #C45000; font-weight: 700; }

  /* ══════════════════════════════════════════
     RESPONSIVE
  ══════════════════════════════════════════ */
  @media (max-width: 1200px) {
    :root { --toc-width: 0px; }
    .toc-panel { display: none; }
    .card-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 36px 20px 60px; }
  }
  @media (max-width: 900px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    :root { --lnb-width: 0px; }
    .lnb { display: none; }
    .sub-content { margin-left: 0; padding: 32px 20px 60px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 28px 16px 48px; }
    .main-hero h1 { font-size: 24px; }
    .toggle-row { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .card-grid { grid-template-columns: 1fr; }
  }

  /* Step media layout (image left, steps right) */
  .step-media-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    margin: 20px 0;
  }
  .step-media-images {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .step-media-images .guide-image { margin: 0; }
  .step-media-steps .step-list { margin: 0; }
  .step-media-layout--wide-table { grid-template-columns: 2fr 3fr; }