/*
 * HLogin 문서 셸(/dev 개발자 가이드 · /docs 도움말) — Fluent 2 판(#132). 옛 guide.css(Primer 위)를 대신한다.
 *   상단 바(hl-topbar) · 왼쪽 문서 목차(sticky, 768px 미만은 서랍) · 본문(hl-prose) · 오른쪽 "이 문서에서"(sticky) · 이전/다음 · 푸터
 * 불러오는 순서: hl-tokens.css → hl-fluent.css → 이 파일. 색·간격·글자·모서리는 전부 hl-tokens 의 변수다(색 hex 를 직접 쓰지 않는다).
 * 테마는 <html data-theme> (hl-theme.js) 하나로 바뀐다.
 *
 * ⚠ guide.css·guide.js 는 고치지 않고 남겨 둔다 — v1(그룹사)의 /dev·/docs 가 같은 정적 자원 호스트에서 Primer 와 함께 부른다.
 */

:root {
    --hl-docs-navbar-h: var(--hlHeaderHeight);
    --hl-docs-toc-w: 260px;
    --hl-docs-affix-w: 220px;
    --hl-docs-max-w: 1440px;
    --hl-docs-article-w: 880px;
    --hl-docs-gap: var(--spacingHorizontalXXXL);
}

body.hl-docs {
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
}

/* ── 상단 바 — 모양은 hl-topbar, 여기서는 문서 셸에만 있는 것 ─────────── */
.hl-docs-brand {
    align-items: baseline;
}

.hl-docs-brand small {
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    color: var(--colorNeutralForeground3);
    white-space: nowrap;
}

.hl-docs-brand-logo {
    align-self: center;
}

.hl-docs-navbar .hl-docs-navlink {
    font-weight: var(--fontWeightRegular);
    text-decoration: none;
}

.hl-docs-menu-btn {
    display: none;
}

/* ── 3단 레이아웃 ──────────────────────────────────────── */
.hl-docs-container {
    display: grid;
    grid-template-columns: var(--hl-docs-toc-w) minmax(0, 1fr) var(--hl-docs-affix-w);
    gap: var(--hl-docs-gap);
    max-width: var(--hl-docs-max-w);
    margin: 0 auto;
    padding: 0 var(--spacingHorizontalXXL);
}

.hl-docs-toc,
.hl-docs-affix {
    position: sticky;
    top: var(--hl-docs-navbar-h);
    align-self: start;
    max-height: calc(100vh - var(--hl-docs-navbar-h));
    overflow-y: auto;
    padding: var(--spacingVerticalXXL) 0;
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}

.hl-docs-toc ul,
.hl-docs-affix ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hl-toc-title,
.hl-affix-title {
    padding: 0 var(--spacingHorizontalM) var(--spacingVerticalS);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorNeutralForeground3);
}

/* 왼쪽 목차 — 현재 문서는 사이드바(hl-nav__item)와 같은 옅은 브랜드 알약. 목록 밖 링크(안내문의 "로그인")는 보통 링크로 둔다 */
.hl-docs-toc li + li {
    margin-top: 2px;
}

.hl-docs-toc li > a {
    display: block;
    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalM);
    border-radius: var(--borderRadiusMedium);
    color: var(--colorNeutralForeground2);
    text-decoration: none;
}

.hl-docs-toc li > a:hover {
    background: var(--colorSubtleBackgroundHover);
    color: var(--colorNeutralForeground1);
    text-decoration: none;
}

.hl-docs-toc li > a:focus-visible {
    outline-offset: calc(var(--strokeWidthThick) * -1);
}

.hl-docs-toc li > a[aria-current="page"] {
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
    font-weight: var(--fontWeightSemibold);
}

.hl-docs-toc .hl-toc-section {
    margin-bottom: var(--spacingVerticalL);
}

.hl-toc-issuer {
    margin-top: var(--spacingVerticalXXL);
    padding-top: var(--spacingVerticalL);
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

.hl-toc-issuer code {
    display: block;
    padding: 0 var(--spacingHorizontalM);
    font-size: var(--fontSizeBase200);
    word-break: break-all;
    color: var(--colorNeutralForeground1);
}

.hl-toc-note {
    padding: 0 var(--spacingHorizontalM);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    color: var(--colorNeutralForeground3);
}

/* 오른쪽 "이 문서에서" — 현재 항목은 hl-docs.js 가 aria-current="location" 으로 표시한다 */
.hl-docs-affix {
    padding-left: var(--spacingHorizontalL);
    border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

.hl-docs-affix .hl-affix-title {
    padding-left: 0;
}

.hl-docs-affix a {
    display: block;
    margin-left: calc(var(--spacingHorizontalL) * -1 - var(--strokeWidthThin));
    padding: var(--spacingVerticalXS) 0 var(--spacingVerticalXS) calc(var(--spacingHorizontalL) - var(--strokeWidthThin));
    border-left: var(--strokeWidthThick) solid transparent;
    color: var(--colorNeutralForeground3);
    text-decoration: none;
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
}

.hl-docs-affix a.hl-affix-h3 {
    padding-left: calc(var(--spacingHorizontalL) + var(--spacingHorizontalM));
}

.hl-docs-affix a:hover {
    color: var(--colorNeutralForeground1);
    text-decoration: none;
}

.hl-docs-affix a[aria-current="location"] {
    color: var(--colorBrandForeground1);
    border-left-color: var(--colorBrandStroke1);
}

/* ── 본문 — 글은 hl-prose, 여기서는 문서 셸에서만 필요한 것 ─────────── */
.hl-docs-main {
    min-width: 0;
    padding: var(--spacingVerticalXXXL) 0 64px;
}

.hl-docs-main .hl-prose {
    max-width: var(--hl-docs-article-w);
}

.hl-docs-main .hl-prose :is(h1, h2, h3, h4) {
    scroll-margin-top: calc(var(--hl-docs-navbar-h) + var(--spacingVerticalL));
}

/* 문서 머리 메타(대상·방식·버전·선행 문서) */
.hl-prose ul.hl-doc-meta {
    padding-left: 0;
    list-style: none;
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase300);
}

.hl-prose ul.hl-doc-meta li + li {
    margin-top: 2px;
}

.hl-prose ul.hl-doc-index li + li {
    margin-top: var(--spacingVerticalS);
}

/* 좁은 화면에서는 표가 스스로 가로로 스크롤된다(본문 폭을 밀어내지 않게) */
@media (max-width: 768px) {
    .hl-docs-main .hl-prose table {
        display: block;
        overflow-x: auto;
    }
}

/* 콜아웃 — hl-docs.js 가 blockquote 첫 글자(⚠️ ℹ️ 📢 💡)로 hl-message-bar 를 입힌다.
   .hl-prose blockquote(0,1,1)가 .hl-message-bar 의 테두리·여백·글자색을 이기므로 여기서 되돌린다. */
.hl-prose blockquote.hl-message-bar {
    padding: 6px var(--spacingHorizontalM);
    color: var(--colorNeutralForeground1);
    border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
}

.hl-prose blockquote.hl-message-bar--warning { border-left-color: var(--colorStatusWarningBorder1); }
.hl-prose blockquote.hl-message-bar--success { border-left-color: var(--colorStatusSuccessBorder1); }

.hl-prose .hl-message-bar__body > * + * {
    margin-top: var(--spacingVerticalS);
}

.hl-prose .hl-message-bar :is(h2, h3) {
    margin-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
}

/* ── 이전 / 다음 ───────────────────────────────────────── */
.hl-docs-prevnext {
    display: flex;
    justify-content: space-between;
    gap: var(--spacingHorizontalL);
    max-width: var(--hl-docs-article-w);
    margin-top: 48px;
    padding-top: var(--spacingVerticalL);
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

.hl-docs-prevnext a {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    color: var(--colorBrandForegroundLink);
    text-decoration: none;
    font-weight: var(--fontWeightSemibold);
}

.hl-docs-prevnext a span {
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    font-weight: var(--fontWeightRegular);
    color: var(--colorNeutralForeground3);
}

.hl-docs-prevnext a.hl-next {
    text-align: right;
    margin-left: auto;
}

.hl-docs-prevnext a:hover {
    background: var(--colorNeutralBackground1Hover);
    border-color: var(--colorNeutralStroke1Hover);
    text-decoration: none;
}

/* ── 푸터 ─────────────────────────────────────────────── */
.hl-docs-footer {
    padding: var(--spacingVerticalL) var(--spacingHorizontalXXL);
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    text-align: center;
    color: var(--colorNeutralForeground3);
}

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 1200px) {
    .hl-docs-container { grid-template-columns: var(--hl-docs-toc-w) minmax(0, 1fr); }
    .hl-docs-affix { display: none; }
}

@media (max-width: 768px) {
    .hl-docs-container {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 var(--spacingHorizontalL);
    }

    .hl-docs-menu-btn { display: inline-flex; }

    .hl-docs-navbar .hl-docs-navlink { display: none; }
    .hl-docs-brand small { display: none; }

    .hl-docs-toc {
        position: fixed;
        left: 0;
        top: var(--hl-docs-navbar-h);
        z-index: 40;
        width: 280px;
        max-width: 85vw;
        height: calc(100vh - var(--hl-docs-navbar-h));
        max-height: none;
        padding: var(--spacingVerticalL);
        background: var(--colorNeutralBackground1);
        border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
        box-shadow: var(--shadow16);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--durationNormal) var(--curveDecelerateMid), visibility 0s linear var(--durationNormal);
    }

    body.hl-docs-toc-open .hl-docs-toc {
        transform: none;
        visibility: visible;
        transition: transform var(--durationNormal) var(--curveDecelerateMid);
    }

    .hl-docs-main { padding-top: var(--spacingVerticalL); }
}