/* ==========================================================================
   Klubo 도움말/가이드 (GitBook 스타일)
   파일: www/css/help/guide.css
   - 3컬럼 레이아웃(사이드바 / 본문 / 페이지내 TOC)
   - 라이트/다크 테마: 모든 색상은 CSS 변수로 관리
   - 클래스/ID 계약(hb-*)에 맞춰 스타일링
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) 웹폰트 (Pretendard 가변폰트 — self-host)
   파일: www/font/pretendard/PretendardVariable.woff2
   가변폰트 1개로 굵기 100~900 전부 커버. 외부 CDN 미사용.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Pretendard";
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url("/www/font/pretendard/PretendardVariable.woff2") format("woff2-variations");
}

/* --------------------------------------------------------------------------
   1) 디자인 토큰 (CSS 변수)
   -------------------------------------------------------------------------- */
:root {
    /* 레이아웃 치수 */
    --hb-topbar-h: 60px;
    --hb-sidebar-w: 280px;
    --hb-toc-w: 240px;
    --hb-content-max: 760px;

    /* 폰트 스택 */
    --hb-font-sans: "Pretendard", "Pretendard Variable", -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo",
        "Malgun Gothic", "맑은 고딕", "Noto Sans KR", Helvetica, Arial, sans-serif;
    --hb-font-mono: "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas",
        "Liberation Mono", "D2Coding", monospace;

    /* 포인트 컬러 (클루보 블루) */
    --hb-accent: #2f6bff;
    --hb-accent-hover: #1f56e0;
    --hb-accent-soft: rgba(47, 107, 255, 0.10);
    --hb-accent-soft-2: rgba(47, 107, 255, 0.16);

    /* 배경/표면 */
    --hb-bg: #ffffff;
    --hb-bg-elevated: #ffffff;
    --hb-bg-subtle: #f7f8fa;
    --hb-bg-hover: #f1f3f5;
    --hb-bg-code: #f5f6f8;
    --hb-bg-codeblock: #f6f8fa;
    --hb-bg-quote: #f7f8fa;
    --hb-bg-thead: #f5f6f8;
    --hb-bg-zebra: #fafbfc;

    /* 텍스트 */
    --hb-text: #1b1f23;
    --hb-text-soft: #4b5563;
    --hb-text-muted: #8b95a1;
    --hb-text-faint: #9aa3ad;
    --hb-text-invert: #ffffff;

    /* 보더 */
    --hb-border: #e6e8eb;
    --hb-border-soft: #eef0f2;
    --hb-border-strong: #d6d9dd;

    /* 그림자 */
    --hb-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --hb-shadow-md: 0 6px 24px rgba(16, 24, 40, 0.12);
    --hb-shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.18);

    /* 기타 */
    --hb-radius: 8px;
    --hb-radius-sm: 6px;
    --hb-radius-lg: 12px;
    --hb-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --hb-backdrop: rgba(16, 24, 40, 0.45);
    --hb-scrollbar: rgba(0, 0, 0, 0.18);
}

/* 다크 테마: 변수 재정의만으로 전환 */
html[data-theme="dark"] {
    --hb-accent: #5b8bff;
    --hb-accent-hover: #7ba1ff;
    --hb-accent-soft: rgba(91, 139, 255, 0.14);
    --hb-accent-soft-2: rgba(91, 139, 255, 0.22);

    --hb-bg: #0d1117;
    --hb-bg-elevated: #161b22;
    --hb-bg-subtle: #161b22;
    --hb-bg-hover: #1c2230;
    --hb-bg-code: #1c2230;
    --hb-bg-codeblock: #161b22;
    --hb-bg-quote: #161b22;
    --hb-bg-thead: #1c2230;
    --hb-bg-zebra: #11161d;

    --hb-text: #e6edf3;
    --hb-text-soft: #b8c0cc;
    --hb-text-muted: #8b95a1;
    --hb-text-faint: #6e7681;
    --hb-text-invert: #0d1117;

    --hb-border: #2a313c;
    --hb-border-soft: #21262d;
    --hb-border-strong: #3a414c;

    --hb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --hb-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
    --hb-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);

    --hb-backdrop: rgba(0, 0, 0, 0.6);
    --hb-scrollbar: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   2) 베이스
   -------------------------------------------------------------------------- */
html[data-theme] {
    background: var(--hb-bg);
    -webkit-text-size-adjust: 100%;
}

html[data-theme] body {
    margin: 0;
    background: var(--hb-bg);
    color: var(--hb-text);
    font-family: var(--hb-font-sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
    box-sizing: border-box;
}

/* 포커스 링 */
html[data-theme] a:focus-visible,
html[data-theme] button:focus-visible,
html[data-theme] input:focus-visible {
    outline: 2px solid var(--hb-accent);
    outline-offset: 2px;
    border-radius: var(--hb-radius-sm);
}

/* 커스텀 스크롤바 */
.hb-sidebar::-webkit-scrollbar,
.hb-search__panel::-webkit-scrollbar,
.hb-doc pre::-webkit-scrollbar,
.hb-doc table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.hb-sidebar::-webkit-scrollbar-thumb,
.hb-search__panel::-webkit-scrollbar-thumb,
.hb-doc pre::-webkit-scrollbar-thumb,
.hb-doc table::-webkit-scrollbar-thumb {
    background: var(--hb-scrollbar);
    border-radius: 8px;
}
.hb-sidebar::-webkit-scrollbar-track,
.hb-search__panel::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------------------
   3) 상단바 (topbar)
   -------------------------------------------------------------------------- */
.hb-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--hb-topbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    background: var(--hb-bg-elevated);
    border-bottom: 1px solid var(--hb-border);
    backdrop-filter: saturate(180%) blur(8px);
}

/* 햄버거 버튼 (모바일 전용) */
.hb-burger {
    display: none; /* 데스크탑 숨김, 반응형에서 표시 */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--hb-text);
    border-radius: var(--hb-radius-sm);
    cursor: pointer;
    transition: background var(--hb-transition);
}
.hb-burger:hover {
    background: var(--hb-bg-hover);
}
.hb-burger svg {
    width: 22px;
    height: 22px;
}

/* 브랜드 */
.hb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 44px;
    padding-right: 8px;
    text-decoration: none;
    color: var(--hb-text);
}
.hb-brand__logo {
    display: inline-flex;
    align-items: center;
}
.hb-brand__logo img {
    height: 24px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}
.hb-brand__name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* 검색 */
.hb-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 520px;
    margin: 0 auto;
}
.hb-search__input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    font-family: inherit;
    font-size: 14px;
    color: var(--hb-text);
    background: var(--hb-bg-subtle);
    border: 1px solid var(--hb-border);
    border-radius: 999px;
    transition: border-color var(--hb-transition),
        box-shadow var(--hb-transition), background var(--hb-transition);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b95a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
}
.hb-search__input::placeholder {
    color: var(--hb-text-faint);
}
.hb-search__input:focus {
    outline: none;
    background: var(--hb-bg-elevated);
    border-color: var(--hb-accent);
    box-shadow: 0 0 0 3px var(--hb-accent-soft);
}

/* 검색 결과 패널 (드롭다운) */
.hb-search__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 120;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--hb-bg-elevated);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius-lg);
    box-shadow: var(--hb-shadow-md);
    padding: 6px;
}
.hb-search__panel[hidden] {
    display: none;
}
.hb-search__results {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hb-search__results li {
    margin: 0;
}
.hb-search__results li > a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border-radius: var(--hb-radius-sm);
    text-decoration: none;
    color: var(--hb-text);
    font-size: 14px;
    line-height: 1.4;
    transition: background var(--hb-transition);
}
.hb-search__results li > a:hover,
.hb-search__results li > a:focus-visible {
    background: var(--hb-accent-soft);
}
.hb-search__results li > a small {
    color: var(--hb-text-muted);
    font-size: 12px;
    font-weight: 500;
}
.hb-search__results li > a .hb-search__sec {
    color: var(--hb-text-soft);
    font-weight: 600;
}
.hb-search__results li > a .hb-search__snip {
    display: block;
    margin-top: 2px;
    color: var(--hb-text-muted);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 검색 이동 시 본문 강조(앰버 하이라이트 + 깜빡임) */
.hb-doc mark.hb-hl {
    background: rgba(255, 209, 102, 0.6);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    animation: hb-hl-pulse 0.7s ease-in-out 3;
}
@keyframes hb-hl-pulse {
    0%, 100% { background: rgba(255, 209, 102, 0.6); }
    50%      { background: rgba(255, 209, 102, 1); }
}
.hb-doc h2.hb-hl-flash,
.hb-doc h3.hb-hl-flash {
    border-radius: 6px;
    animation: hb-hl-flash 0.7s ease-in-out 3;
}
@keyframes hb-hl-flash {
    0%, 100% { background: transparent; }
    50%      { background: rgba(255, 209, 102, 0.5); }
}
html[data-theme="dark"] .hb-doc mark.hb-hl {
    background: rgba(255, 209, 102, 0.32);
    color: #fff;
}
/* 결과 없음/안내 등 단독 메시지 */
.hb-search__panel > .hb-search__empty {
    padding: 16px 12px;
    color: var(--hb-text-muted);
    font-size: 14px;
    text-align: center;
}

/* 테마 토글 */
.hb-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--hb-border);
    background: var(--hb-bg-subtle);
    color: var(--hb-text-soft);
    border-radius: var(--hb-radius-sm);
    cursor: pointer;
    transition: background var(--hb-transition),
        color var(--hb-transition), border-color var(--hb-transition);
}
.hb-theme:hover {
    background: var(--hb-bg-hover);
    color: var(--hb-text);
}
.hb-theme svg {
    width: 20px;
    height: 20px;
}
/* 아이콘 교차 표시: 라이트=달, 다크=해 (HTML이 두 아이콘을 다 넣어둘 경우) */
.hb-theme .hb-theme__sun {
    display: none;
}
.hb-theme .hb-theme__moon {
    display: inline-flex;
}
html[data-theme="dark"] .hb-theme .hb-theme__sun {
    display: inline-flex;
}
html[data-theme="dark"] .hb-theme .hb-theme__moon {
    display: none;
}

/* --------------------------------------------------------------------------
   4) 3컬럼 셸 레이아웃
   -------------------------------------------------------------------------- */
.hb-shell {
    display: grid;
    grid-template-columns: var(--hb-sidebar-w) minmax(0, 1fr) var(--hb-toc-w);
    grid-template-rows: 1fr auto;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    min-height: calc(100vh - var(--hb-topbar-h));
}

/* --------------------------------------------------------------------------
   5) 좌측 사이드바
   -------------------------------------------------------------------------- */
.hb-sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    border-right: 1px solid var(--hb-border);
    background: var(--hb-bg);
}
.hb-nav {
    position: sticky;
    top: var(--hb-topbar-h);
    max-height: calc(100vh - var(--hb-topbar-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 16px 40px;
}

.hb-nav__group {
    margin-bottom: 22px;
}
.hb-nav__grouptitle {
    margin: 0 0 6px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hb-text-muted);
}
.hb-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hb-nav__list li {
    margin: 1px 0;
}
.hb-nav__link {
    display: block;
    padding: 7px 10px;
    border-radius: var(--hb-radius-sm);
    font-size: 14px;
    line-height: 1.45;
    color: var(--hb-text-soft);
    text-decoration: none;
    transition: background var(--hb-transition), color var(--hb-transition);
}
.hb-nav__link:hover {
    background: var(--hb-bg-hover);
    color: var(--hb-text);
}
.hb-nav__link.is-active {
    color: var(--hb-accent);
    background: var(--hb-accent-soft);
    font-weight: 600;
}

/* 중첩 메뉴(펼침) */
.hb-nav__parent {
    margin: 1px 0;
}
.hb-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: var(--hb-radius-sm);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: var(--hb-text-soft);
    text-align: left;
    cursor: pointer;
    transition: background var(--hb-transition), color var(--hb-transition);
}
.hb-nav__toggle:hover {
    background: var(--hb-bg-hover);
    color: var(--hb-text);
}
.hb-nav__caret {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background-color: var(--hb-text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--hb-transition);
}
.hb-nav__parent.is-open > .hb-nav__toggle .hb-nav__caret {
    transform: rotate(90deg);
}
.hb-nav__sublist {
    list-style: none;
    margin: 1px 0 2px;
    padding: 0;
}
.hb-nav__parent:not(.is-open) > .hb-nav__sublist {
    display: none;
}
.hb-nav__sublist li {
    margin: 1px 0;
}
.hb-nav__link--sub {
    padding-left: 22px;
    font-size: 13.5px;
}
.hb-nav__badge {
    display: inline-block;
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff4e0;
    color: #b3690a;
    border: 1px solid #f3d6a3;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}
html[data-theme="dark"] .hb-nav__badge {
    background: rgba(179, 134, 0, 0.18);
    color: #e2b203;
    border-color: rgba(179, 134, 0, 0.4);
}
.hb-nav__badge--soon {
    background: #f1f3f5;
    color: #868e96;
    border-color: #dee2e6;
}
html[data-theme="dark"] .hb-nav__badge--soon {
    background: rgba(255, 255, 255, 0.06);
    color: #adb5bd;
    border-color: rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
   6) 백드롭 (모바일 사이드바 오픈 시)
   -------------------------------------------------------------------------- */
.hb-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--hb-backdrop);
    opacity: 0;
    transition: opacity var(--hb-transition);
}

/* --------------------------------------------------------------------------
   7) 가운데 본문 영역
   -------------------------------------------------------------------------- */
.hb-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 40px 48px 48px;
}
.hb-doc {
    max-width: var(--hb-content-max);
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   8) 마크다운 본문 (.hb-doc) 타이포그래피
   -------------------------------------------------------------------------- */
.hb-doc > *:first-child {
    margin-top: 0;
}

.hb-doc h1,
.hb-doc h2,
.hb-doc h3,
.hb-doc h4 {
    color: var(--hb-text);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.012em;
    scroll-margin-top: calc(var(--hb-topbar-h) + 16px);
}
.hb-doc h1 {
    margin: 0 0 20px;
    font-size: 32px;
    line-height: 1.25;
}

/* 배지 — [[텍스트]] (베타/가오픈 등 상태 표시) */
.hb-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff4e0;
    color: #b3690a;
    border: 1px solid #f3d6a3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
html[data-theme="dark"] .hb-badge {
    background: rgba(179, 134, 0, 0.18);
    color: #e2b203;
    border-color: rgba(179, 134, 0, 0.4);
}
.hb-badge--muted {
    background: #f1f3f5;
    color: #868e96;
    border-color: #dee2e6;
}
html[data-theme="dark"] .hb-badge--muted {
    background: rgba(255, 255, 255, 0.06);
    color: #adb5bd;
    border-color: rgba(255, 255, 255, 0.16);
}
.hb-doc h2 {
    margin: 44px 0 16px;
    padding-bottom: 8px;
    font-size: 24px;
    border-bottom: 1px solid var(--hb-border-soft);
}
.hb-doc h3 {
    margin: 32px 0 12px;
    font-size: 19px;
}
.hb-doc h4 {
    margin: 24px 0 10px;
    font-size: 16px;
}

.hb-doc p {
    margin: 0 0 16px;
    color: var(--hb-text);
}
.hb-doc strong {
    font-weight: 700;
    color: var(--hb-text);
}
.hb-doc em {
    font-style: italic;
}

.hb-doc a {
    color: var(--hb-accent);
    text-decoration: none;
    transition: color var(--hb-transition);
}
.hb-doc a:hover {
    color: var(--hb-accent-hover);
    text-decoration: underline;
}

/* 리스트 */
.hb-doc ul,
.hb-doc ol {
    margin: 0 0 16px;
    padding-left: 1.5em;
}
.hb-doc li {
    margin: 6px 0;
}
.hb-doc li > ul,
.hb-doc li > ol {
    margin: 6px 0;
}
.hb-doc ul {
    list-style: disc;
}
.hb-doc ul ul {
    list-style: circle;
}
.hb-doc ol {
    list-style: decimal;
}

/* 인라인 코드 */
.hb-doc code {
    font-family: var(--hb-font-mono);
    font-size: 0.875em;
    padding: 0.15em 0.4em;
    background: var(--hb-bg-code);
    border: 1px solid var(--hb-border-soft);
    border-radius: var(--hb-radius-sm);
    color: var(--hb-text);
    word-break: break-word;
}

/* 코드 블록 */
.hb-doc pre {
    margin: 0 0 20px;
    padding: 16px 18px;
    background: var(--hb-bg-codeblock);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    overflow-x: auto;
    line-height: 1.5;
}
.hb-doc pre code {
    display: block;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 13.5px;
    color: var(--hb-text);
    white-space: pre;
}

/* 인용구 */
.hb-doc blockquote {
    margin: 0 0 20px;
    padding: 12px 18px;
    border-left: 4px solid var(--hb-text-faint);
    background: var(--hb-bg-subtle);
    border-radius: 0 var(--hb-radius-sm) var(--hb-radius-sm) 0;
    color: var(--hb-text-soft);
}
.hb-doc blockquote p:last-child {
    margin-bottom: 0;
}

/* 색상 콜아웃(Confluence 스타일 패널) — > [!TYPE] 제목 */
.hb-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--cbd);
    border-radius: 6px;
    background: var(--cbg);
    color: var(--hb-text);
}
.hb-callout__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 1.7em; /* 본문 한 줄 높이에 맞춰 첫 줄과 수직 중앙 정렬 */
    background-color: var(--c);
    -webkit-mask: var(--icon) center / 20px 20px no-repeat;
    mask: var(--icon) center / 20px 20px no-repeat;
}
.hb-callout__body {
    min-width: 0;
}
.hb-callout__body > :first-child {
    margin-top: 0;
}
.hb-callout__body > :last-child {
    margin-bottom: 0;
}
.hb-callout__title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c);
}
.hb-callout--info {
    --c: #0c66e4; --cbg: #e9f2ff; --cbd: #cce0ff;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
.hb-callout--note {
    --c: #6e5dc6; --cbg: #f3f0ff; --cbd: #dfd8fd;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
}
.hb-callout--tip {
    --c: #1f845a; --cbg: #dcfff1; --cbd: #baf3db;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
.hb-callout--warning {
    --c: #b38600; --cbg: #fff7d6; --cbd: #f5e1a5;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.hb-callout--danger {
    --c: #c9372c; --cbg: #ffeceb; --cbd: #ffd5d2;
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .hb-callout--info    { --c: #579dff; --cbg: rgba(12, 102, 228, 0.14); --cbd: rgba(12, 102, 228, 0.35); }
html[data-theme="dark"] .hb-callout--note    { --c: #9f8fef; --cbg: rgba(110, 93, 198, 0.16); --cbd: rgba(110, 93, 198, 0.36); }
html[data-theme="dark"] .hb-callout--tip     { --c: #4bce97; --cbg: rgba(31, 132, 90, 0.16); --cbd: rgba(31, 132, 90, 0.36); }
html[data-theme="dark"] .hb-callout--warning { --c: #e2b203; --cbg: rgba(179, 134, 0, 0.16); --cbd: rgba(179, 134, 0, 0.38); }
html[data-theme="dark"] .hb-callout--danger  { --c: #f87168; --cbg: rgba(201, 55, 44, 0.15); --cbd: rgba(201, 55, 44, 0.36); }

/* 메뉴 경로(breadcrumb) 컴포넌트 — @path: A > B > C */
.hb-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    position: relative;
    margin: 0 0 22px;
    padding: 10px 14px 10px 40px;
    background: var(--hb-bg-subtle);
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    font-size: 14px;
    line-height: 1.5;
}
.hb-path::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--hb-text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hb-path__item {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--hb-bg-elevated);
    border: 1px solid var(--hb-border);
    border-radius: 6px;
    color: var(--hb-text-soft);
    font-weight: 500;
    font-size: 13.5px;
    white-space: nowrap;
}
.hb-path__item:last-child {
    background: var(--hb-bg-hover);
    color: var(--hb-text);
    font-weight: 700;
}
.hb-path__sep {
    color: var(--hb-text-faint);
    font-weight: 500;
}
.hb-path__go {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--hb-accent);
    border-radius: 999px;
    background: var(--hb-bg-elevated);
    color: var(--hb-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: background var(--hb-transition), color var(--hb-transition);
}
.hb-doc a.hb-path__go:hover {
    background: var(--hb-accent);
    color: #fff;
    text-decoration: none;
}

/* 표 */
.hb-doc table {
    width: 100%;
    margin: 0 0 22px;
    border-collapse: collapse;
    font-size: 14.5px;
    display: block;
    overflow-x: auto;
}
.hb-doc thead {
    background: var(--hb-bg-thead);
}
.hb-doc th,
.hb-doc td {
    padding: 9px 14px;
    border: 1px solid var(--hb-border);
    text-align: left;
    vertical-align: top;
}
.hb-doc th {
    font-weight: 700;
    color: var(--hb-text);
    white-space: nowrap;
}
.hb-doc tbody tr:nth-child(even) {
    background: var(--hb-bg-zebra);
}

/* 구분선 */
.hb-doc hr {
    margin: 36px 0;
    border: none;
    border-top: 1px solid var(--hb-border);
}

/* 이미지 */
.hb-doc img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 14px auto;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-shadow-md, 0 4px 14px rgba(16, 24, 40, 0.08));
}

/* 카카오톡 상담 플로팅 버튼 (스크롤 따라 우측 하단 고정) */
.hb-kakao-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 18px 0 14px;
    background: #fee500;
    color: #3c1e1e;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hb-kakao-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
.hb-kakao-fab__icon {
    width: 26px;
    height: 26px;
    display: block;
}
@media (max-width: 600px) {
    .hb-kakao-fab {
        right: 16px;
        bottom: 16px;
        height: 48px;
        padding: 0 16px 0 12px;
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   9) 이전/다음 페이저
   -------------------------------------------------------------------------- */
.hb-pager {
    display: flex;
    gap: 16px;
    max-width: var(--hb-content-max);
    margin: 56px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--hb-border-soft);
}
.hb-pager__prev,
.hb-pager__next {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    text-decoration: none;
    color: var(--hb-text);
    background: var(--hb-bg-elevated);
    transition: border-color var(--hb-transition),
        background var(--hb-transition), box-shadow var(--hb-transition);
}
.hb-pager__next {
    text-align: right;
    align-items: flex-end;
}
.hb-pager__prev:hover,
.hb-pager__next:hover {
    border-color: var(--hb-accent);
    background: var(--hb-accent-soft);
    box-shadow: var(--hb-shadow-sm);
}
/* HTML이 ::before로 라벨/화살표를 넣지 않더라도 화살표 힌트 제공 */
.hb-pager__prev::before {
    content: "← 이전";
    font-size: 12px;
    font-weight: 600;
    color: var(--hb-text-muted);
}
.hb-pager__next::before {
    content: "다음 →";
    font-size: 12px;
    font-weight: 600;
    color: var(--hb-text-muted);
}
/* 빈(존재하지 않는) 페이저 링크는 자리만 차지하지 않도록 */
.hb-pager__prev:empty,
.hb-pager__next:empty {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   9.5) 하단 푸터 (가운데·우측 콘텐츠 영역에만 — 좌측 사이드바 제외)
   -------------------------------------------------------------------------- */
.hb-footer {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: end;
    border-top: 1px solid var(--hb-border-soft);
    padding: 16px 48px 24px;
}
.hb-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 8px;
}
.hb-footer__links a {
    font-size: 12.5px;
    color: var(--hb-text-soft);
    text-decoration: none;
}
.hb-footer__links a:hover {
    color: var(--hb-accent);
    text-decoration: underline;
}
.hb-footer__corp {
    margin: 0 0 6px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--hb-text-faint);
}
.hb-footer__corp a {
    color: var(--hb-text-muted);
    text-decoration: none;
}
.hb-footer__corp a:hover {
    text-decoration: underline;
}
.hb-footer__copy {
    margin: 0;
    font-size: 11.5px;
    color: var(--hb-text-faint);
}
@media (max-width: 768px) {
    .hb-footer {
        padding: 16px 20px 28px;
    }
}

/* --------------------------------------------------------------------------
   9.6) 맨 위로 버튼 (스크롤 시 노출, 카카오 FAB 위)
   -------------------------------------------------------------------------- */
.hb-totop {
    position: fixed;
    right: 24px;
    bottom: 88px;
    z-index: 200;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hb-border);
    border-radius: 50%;
    background: var(--hb-bg-elevated);
    color: var(--hb-text-soft);
    box-shadow: var(--hb-shadow-md, 0 6px 20px rgba(16, 24, 40, 0.12));
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, color 0.15s ease, border-color 0.15s ease;
}
.hb-totop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.hb-totop:hover {
    color: var(--hb-accent);
    border-color: var(--hb-accent);
}
.hb-totop svg {
    width: 22px;
    height: 22px;
}
@media (max-width: 600px) {
    .hb-totop {
        right: 16px;
        bottom: 76px;
        width: 42px;
        height: 42px;
    }
}

/* --------------------------------------------------------------------------
   10) 우측 페이지내 TOC
   -------------------------------------------------------------------------- */
.hb-toc {
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    top: var(--hb-topbar-h);
    height: calc(100vh - var(--hb-topbar-h));
    overflow-y: auto;
    padding: 40px 20px 40px 8px;
}
.hb-toc__title {
    margin: 0 0 12px;
    padding-left: 13px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hb-text-muted);
}
.hb-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--hb-border);
}
.hb-toc__item {
    margin: 0;
}
.hb-toc__item > a {
    display: block;
    padding: 4px 0 4px 12px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hb-text-muted);
    text-decoration: none;
    transition: color var(--hb-transition), border-color var(--hb-transition);
}
.hb-toc__item > a:hover {
    color: var(--hb-text);
}
.hb-toc__item > a.is-active {
    color: var(--hb-accent);
    border-left-color: var(--hb-accent);
    font-weight: 600;
}
/* h3 등 하위 항목 들여쓰기 */
.hb-toc__item--sub > a {
    padding-left: 26px;
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   11) 반응형
   -------------------------------------------------------------------------- */

/* < 1280px : 우측 TOC 숨김, 2컬럼 */
@media (max-width: 1279px) {
    .hb-shell {
        grid-template-columns: var(--hb-sidebar-w) minmax(0, 1fr);
    }
    .hb-toc {
        display: none;
    }
}

/* < 1024px : 사이드바 off-canvas, 본문 1컬럼, 햄버거 표시 */
@media (max-width: 1023px) {
    .hb-shell {
        display: block;
    }

    .hb-burger {
        display: inline-flex;
    }

    /* 검색은 가운데 정렬 대신 남는 공간 채움 */
    .hb-search {
        margin: 0;
    }

    .hb-sidebar {
        position: fixed;
        top: var(--hb-topbar-h);
        left: 0;
        bottom: 0;
        height: auto;
        width: min(85vw, var(--hb-sidebar-w));
        z-index: 95;
        transform: translateX(-100%);
        transition: transform var(--hb-transition);
        box-shadow: var(--hb-shadow-lg);
        will-change: transform;
    }
    .hb-sidebar.is-open {
        transform: translateX(0);
    }

    .hb-backdrop {
        display: block;
        pointer-events: none;
    }
    /* 사이드바가 열리면(형제 selector) 백드롭 활성 */
    .hb-sidebar.is-open ~ .hb-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .hb-main {
        padding: 28px 20px 64px;
    }
}

/* 모바일 소형 화면 미세 조정 */
@media (max-width: 600px) {
    .hb-topbar {
        padding: 0 12px;
        gap: 8px;
    }
    .hb-brand__name {
        display: none; /* 좁은 폭에서 로고만 노출 */
    }
    .hb-main {
        padding: 22px 16px 56px;
    }
    .hb-doc h1 {
        font-size: 26px;
    }
    .hb-doc h2 {
        font-size: 21px;
    }
    .hb-doc h3 {
        font-size: 18px;
    }
    .hb-pager {
        flex-direction: column;
    }
    .hb-pager__next {
        text-align: left;
        align-items: flex-start;
    }
    .hb-pager__next::before {
        content: "다음 →";
    }
}

/* --------------------------------------------------------------------------
   12) 접근성/모션 환경설정
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html[data-theme] *,
    html[data-theme] *::before,
    html[data-theme] *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}