/* ============================================================
   product-guide.css — 제품별 신규 가이드 공통 스타일
   layouts/product-guide.blade.php 에서 로드

   원칙
   1. 아이콘 없음. 공통 마커 한 가지만 반복.
   2. 본문은 카드가 아니라 문서. 색면·테두리 최소화.
   3. 숫자는 순서가 실제로 중요한 곳에만.
   4. 한국어 조판(어절 단위 줄바꿈, 행간 1.8) 기준.
   ============================================================ */

:root {
    --ds-product-guide-frame-width: 80.5rem;
    --ds-product-guide-content-width: 47.5rem;
    --ds-product-guide-sidebar-width: 11.75rem;
    --ds-product-guide-toc-width: 11.25rem;
    --ds-product-guide-column-gap: clamp(2rem, 3vw, 3rem);
    --ds-product-guide-accent: var(--ds-color-accent, #b85c38);
}

/* ============================================================
   1. 레이아웃
   ============================================================ */
.ds-product-guide-page-shell {
    width: 100%;
    max-width: 80.5rem;
}

.ds-product-guide-page-row {
    --bs-gutter-x: 0;
    display: grid;
    grid-template-columns:
        var(--ds-product-guide-sidebar-width)
        minmax(0, var(--ds-product-guide-content-width))
        var(--ds-product-guide-toc-width);
    column-gap: var(--ds-product-guide-column-gap);
    align-items: flex-start;
    justify-content: center;
    margin-inline: 0;
}

.ds-product-guide-page-row > * {
    width: auto;
    max-width: 100%;
    padding-inline: 0;
}

.ds-product-guide-layout .ds-product-guide-sidebar {
    width: auto;
    min-width: 0;
    height: 100%;
    align-self: stretch;
}

.ds-product-guide-sidebar-frame {
    position: sticky;
    top: 6.5rem;
    height: auto;
    max-height: calc(100vh - 7.5rem);
    margin-top: 0;
    padding: 1.5rem 1.5rem 1.5rem 0;
    overflow-y: auto;
    border-right: 1px solid var(--ds-color-border);
    scrollbar-width: thin;
    scrollbar-color: var(--ds-color-border) transparent;
}

.ds-product-guide-sidebar-heading {
    margin: 0 0 0.375rem;
    padding: 1.25rem 0.75rem 0.25rem;
    color: var(--ds-color-fg);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.ds-product-guide-sidebar-frame > .ds-product-guide-sidebar-heading:first-child {
    padding-top: 0;
}

.ds-product-guide-sidebar-list {
    gap: 0.125rem;
}

.ds-product-guide-sidebar-link {
    position: relative;
    padding: 0.475rem 0.75rem;
    color: var(--ds-color-fg-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
    border-radius: var(--ds-radius-sm);
    transition: color var(--ds-motion-fast), background-color var(--ds-motion-fast);
}

.ds-product-guide-sidebar-link:hover,
.ds-product-guide-sidebar-link:focus-visible {
    color: var(--ds-color-fg);
    background: var(--ds-color-bg-muted);
    text-decoration: none;
}

.ds-product-guide-sidebar-link.active {
    color: var(--ds-color-fg);
    background: var(--ds-color-bg-muted);
    font-weight: 600;
}

.ds-product-guide-sidebar-link.active::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: var(--ds-color-primary);
}

.ds-product-guide-sidebar-action {
    margin-top: 1.5rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--ds-color-border);
}

.ds-product-guide-sidebar-action .ds-btn {
    width: 100%;
    justify-content: center;
}

.ds-product-guide-main {
    min-width: 0;
    padding-top: 1.5rem;
}

.ds-product-guide-content-main {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0 0 4rem;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.ds-product-guide-content-main img {
    max-width: 100%;
    height: auto;
}
.ds-product-guide-content-main a {
    color: var(--ds-color-primary);
    text-decoration: none;
}
.ds-product-guide-content-main a:hover {
    color: var(--ds-color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ds-product-guide-mobile-nav {
    display: none;
    margin-bottom: 2rem;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-color-card);
    overflow: hidden;
}
.ds-product-guide-mobile-nav summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    color: var(--ds-color-fg);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.ds-product-guide-mobile-nav summary::-webkit-details-marker {
    display: none;
}
.ds-product-guide-mobile-nav summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.25rem;
    border-right: 1.5px solid var(--ds-color-fg-muted);
    border-bottom: 1.5px solid var(--ds-color-fg-muted);
    transform: rotate(45deg) translate(-0.1em, -0.1em);
    transition: transform var(--ds-motion-default);
}
.ds-product-guide-mobile-nav[open] summary::after {
    transform: rotate(-135deg) translate(-0.1em, -0.1em);
}
.ds-product-guide-mobile-nav summary:focus-visible {
    outline: none;
    box-shadow: inset var(--ds-shadow-focus);
}
.ds-product-guide-mobile-nav-current {
    margin-left: auto;
    color: var(--ds-color-fg-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}
.ds-product-guide-mobile-nav-body {
    max-height: min(65vh, 36rem);
    padding: 0 0.75rem 1rem;
    overflow-y: auto;
    border-top: 1px solid var(--ds-color-border);
}
.ds-product-guide-mobile-nav .ds-product-guide-sidebar-heading {
    margin: 0;
    padding: 1rem 0.5rem 0.375rem;
    font-size: 0.8125rem;
}
.ds-product-guide-mobile-nav .ds-product-guide-sidebar-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
}
.ds-product-guide-mobile-nav .ds-product-guide-sidebar-link {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
}
.ds-product-guide-mobile-nav .ds-product-guide-sidebar-action {
    padding: 1rem 0 0;
}

/* ============================================================
   2. 문서 머리 — 제목 · 리드 · 메타
   ============================================================ */
.ds-product-guide-hero {
    margin-bottom: 0;
    padding-bottom: 1.5rem;
    border-bottom: none;
}
.ds-product-guide-hero > h1 {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--ds-color-fg);
    margin: 0 0 0.5rem;
    word-break: keep-all;
}
/* 히어로는 카드가 아니라 리드 문단 */
.ds-product-guide-hero-body {
    display: block;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
}
.ds-product-guide-hero-body p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ds-color-fg-muted);
    margin: 0;
    max-width: 62ch;
    word-break: keep-all;
    text-wrap: pretty;
}
.ds-product-guide-hero-icon {
    display: none; /* 이모지 아이콘 제거 */
}
.ds-product-guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.875rem;
    font-size: 0.75rem;
    color: var(--ds-color-fg-muted);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   3. 아이브로우 · 섹션 제목
   장식 아이콘 대신 라벨과 옅은 헤어라인으로 위계를 만듭니다.
   ============================================================ */
.ds-product-guide-section {
    margin-bottom: 0;
    padding-top: 2rem;
    padding-bottom: 0;
    border-bottom: none;
    scroll-margin-top: 6rem;
}
.ds-product-guide-section + .ds-product-guide-section {
    margin-top: 2.5rem;
    border-top: 1px solid var(--ds-color-border);
}
.ds-product-guide-section:last-of-type {
    padding-bottom: 3rem;
}

.ds-product-guide-eyebrow {
    margin: 0 0 0.4rem;
    color: var(--ds-product-guide-accent);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.09em;
    word-break: keep-all;
}

.ds-product-guide-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.45;
    color: var(--ds-color-fg);
    margin: 0 0 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
    word-break: keep-all;
    scroll-margin-top: 6rem;
}

.ds-product-guide-sub-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-color-fg);
    margin: 2rem 0 0.75rem;
    word-break: keep-all;
}

/* 제목 앵커 링크 */
.ds-product-guide-anchor {
    margin-left: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ds-color-border-strong);
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--ds-motion-fast);
}
.ds-product-guide-section-title:hover .ds-product-guide-anchor,
.ds-product-guide-section-title:focus-within .ds-product-guide-anchor {
    opacity: 1;
}
.ds-product-guide-anchor:hover {
    color: var(--ds-color-primary);
    text-decoration: none;
}
.ds-product-guide-anchor:focus-visible {
    opacity: 1;
    outline: none;
    border-radius: var(--ds-radius-xs);
    box-shadow: var(--ds-shadow-focus);
}

/* ============================================================
   4. 본문
   ============================================================ */
.ds-product-guide-text {
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--ds-color-fg);
    margin: 0 0 0.875rem;
    word-break: keep-all;
    text-wrap: pretty;
}
.ds-product-guide-text:last-child {
    margin-bottom: 0;
}
.ds-product-guide-text strong {
    font-weight: 600;
}
.ds-product-guide-divider {
    border: none;
    border-top: 1px solid var(--ds-color-border-subtle);
    margin: 2.5rem 0;
}

/* ============================================================
   5. 배지
   ============================================================ */
.ds-product-guide-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25em 0.5em;
    border-radius: 0.25rem;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ds-product-guide-badge-required {
    background-color: var(--ds-color-danger-subtle);
    color: var(--ds-color-danger);
}
.ds-product-guide-badge-optional {
    background-color: var(--ds-color-success-subtle);
    color: var(--ds-color-success);
}
.ds-product-guide-badge-primary {
    background-color: transparent;
    border-color: var(--ds-color-border-strong);
    color: var(--ds-color-fg);
}
.ds-product-guide-badge-secondary {
    background-color: transparent;
    border-color: var(--ds-color-border);
    color: var(--ds-color-fg-muted);
}
.ds-product-guide-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}
[data-bs-theme="dark"] .ds-product-guide-badge-primary {
    border-color: var(--ds-color-white-alpha-25);
    color: var(--ds-color-on-primary-muted);
}
[data-bs-theme="dark"] .ds-product-guide-badge-secondary {
    border-color: var(--ds-color-white-alpha-08);
    color: var(--ds-color-on-primary-muted);
}

/* ============================================================
   6. 목록 — 용도별 세 가지
   기본(화면 주석) / -steps(절차) / -facts(순서 없는 나열)
   ============================================================ */
.ds-product-guide-callout-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.ds-product-guide-callout-list:last-child {
    margin-bottom: 0;
}
.ds-product-guide-callout-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0;
    border: none;
    font-size: 0.9375rem;
}
.ds-product-guide-callout-text {
    flex: 1;
    line-height: 1.9;
    color: var(--ds-color-fg);
    word-break: keep-all;
    text-wrap: pretty;
}
.ds-product-guide-callout-text strong {
    font-weight: 600;
    color: var(--ds-color-fg);
}
.ds-product-guide-callout-item .ds-product-guide-badge {
    flex-shrink: 0;
    margin-top: 0.25rem;
    min-width: 4.25rem;
    text-align: center;
}

/* 기본 = 화면 주석. 스크린샷 위 마커와 같은 채움 원. */
.ds-product-guide-callout-num {
    flex: 0 0 1.375rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--ds-product-guide-accent);
    border: 1px solid var(--ds-product-guide-accent);
    color: var(--ds-color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}

/* 절차 — 번호만으로 순서를 표시 */
.ds-product-guide-callout-list-steps {
    gap: 0;
}
.ds-product-guide-callout-list-steps .ds-product-guide-callout-item {
    padding: 0 0 1.125rem;
    gap: 0.875rem;
}
.ds-product-guide-callout-list-steps .ds-product-guide-callout-item:last-child {
    padding-bottom: 0;
}
.ds-product-guide-callout-list-steps .ds-product-guide-callout-num {
    flex: 0 0 1rem;
    width: 1rem;
    height: auto;
    border: none;
    border-radius: 0;
    background: var(--ds-color-bg);
    color: var(--ds-product-guide-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    justify-content: flex-start;
    margin-top: 0;
    line-height: 1.75;
    z-index: 1;
}
.ds-product-guide-callout-list-steps .ds-product-guide-callout-num::after {
    content: ".";
}

/* 순서 없는 나열 — 번호 대신 공통 마커 */
.ds-product-guide-callout-list-facts {
    gap: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.ds-product-guide-callout-list-facts .ds-product-guide-callout-num {
    display: none;
}
.ds-product-guide-callout-list-facts .ds-product-guide-callout-item {
    display: block;
    padding: 0.875rem 0;
    border-top: 1px solid var(--ds-color-border-subtle);
}
.ds-product-guide-callout-list-facts .ds-product-guide-callout-item:first-child {
    border-top: none;
}
.ds-product-guide-callout-list-facts .ds-product-guide-callout-text {
    color: var(--ds-color-fg-muted);
}
.ds-product-guide-callout-list-facts .ds-product-guide-callout-text strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--ds-color-fg);
}

/* ============================================================
   7. 팁 / 주의 — 이모지 대신 텍스트 라벨
   ============================================================ */
.ds-product-guide-tip,
.ds-product-guide-info {
    display: block;
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 0 0 1.25rem;
    border: none;
    border-left: 2px solid var(--ds-color-border-strong);
    border-radius: 0;
    background-color: transparent;
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--ds-color-fg);
    word-break: keep-all;
    text-wrap: pretty;
}
.ds-product-guide-tip::before,
.ds-product-guide-info::before {
    content: "참고";
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ds-color-fg-muted);
    margin-bottom: 0.2rem;
}
.ds-product-guide-tip-warn {
    border-left-color: var(--ds-color-warning);
}
.ds-product-guide-tip-warn::before {
    content: "주의";
    color: var(--ds-color-warning);
}
.ds-product-guide-tip-info::before {
    content: "참고";
}
.ds-product-guide-tip-icon {
    display: none; /* 이모지 아이콘 제거 */
}
[data-bs-theme="dark"] .ds-product-guide-tip,
[data-bs-theme="dark"] .ds-product-guide-info {
    background-color: transparent;
}

/* ============================================================
   8. 그림 — 캡션 · 본문 폭에 맞춤
   ============================================================ */
.ds-product-guide-figure {
    margin: 0 0 1.5rem;
}
.ds-product-guide-figure-wide {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}
/* 폭 지정(w-*)은 figure가 갖습니다 — 캡션이 이미지와 같은 폭·같은 시작점에 오도록 */
.ds-product-guide-figure[class*="ds-product-guide-screenshot-w-"] {
    box-sizing: border-box;
    width: var(--ds-product-guide-screenshot-width, 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.ds-product-guide-figure[class*="ds-product-guide-screenshot-w-"] .ds-product-guide-screenshot {
    width: 100%;
}
.ds-product-guide-figure figcaption {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--ds-color-fg-muted);
    word-break: keep-all;
}
.ds-product-guide-figure figcaption b {
    color: var(--ds-color-fg);
    font-weight: 600;
    white-space: nowrap;
}
.ds-product-guide-figure .ds-product-guide-screenshot {
    margin-bottom: 0;
}

.ds-product-guide-screenshot {
    position: relative;
    background-color: var(--ds-color-bg-muted);
    border: 1px solid var(--ds-color-border);
    border-radius: 0.5rem;
    min-height: 12.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    margin: 0 0 1.25rem;
    color: var(--ds-color-fg-muted);
    font-size: 0.85rem;
    overflow: hidden;
}
.ds-product-guide-screenshot img {
    max-width: 100%;
    border-radius: 0.375rem;
}
.ds-product-guide-screenshot.ds-product-guide-screenshot-filled {
    padding: 0;
    min-height: 0;
    background-color: transparent;
}
.ds-product-guide-screenshot.ds-product-guide-screenshot-filled img {
    width: 100%;
    border-radius: 0;
    display: block;
}
/* ------------------------------------------------------------
   캡처 위 번호/영역 표시 — 이미지에 굽지 않고 CSS 로 얹습니다.
   좌표와 영역은 페이지별 `ds-product-guide-hotspot-*` modifier에서 백분율로 지정합니다.

   <div class="ds-product-guide-screenshot ds-product-guide-screenshot-filled">
       <img src="..." alt="...">
       <span class="ds-product-guide-hotspot ds-product-guide-hotspot-teams-name">1</span>
   </div>

   UI가 바뀌면 캡처와 modifier 좌표를 함께 확인합니다.
   ------------------------------------------------------------ */
.ds-product-guide-hotspot {
    position: absolute;
    left: var(--ds-product-guide-hotspot-x, 50%);
    top: var(--ds-product-guide-hotspot-y, 50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--ds-product-guide-accent);
    color: var(--ds-color-on-primary);
    border: 2px solid var(--ds-color-on-primary);
    box-shadow: var(--ds-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}

/* 영역 강조 — 버튼·입력란처럼 범위를 감쌀 때 */
.ds-product-guide-hotspot-area {
    transform: none;
    width: var(--ds-product-guide-hotspot-width, 10%);
    height: var(--ds-product-guide-hotspot-height, 6%);
    border-radius: 0.25rem;
    background: transparent;
    border: 2px solid var(--ds-product-guide-accent);
    box-shadow: 0 0 0 2px var(--ds-color-white-alpha-25);
}
.ds-product-guide-hotspot-teams-name {
    --ds-product-guide-hotspot-x: 19%;
    --ds-product-guide-hotspot-y: 20%;
}
.ds-product-guide-hotspot-teams-members {
    --ds-product-guide-hotspot-x: 67%;
    --ds-product-guide-hotspot-y: 20%;
}
.ds-product-guide-hotspot-teams-dates {
    --ds-product-guide-hotspot-x: 84%;
    --ds-product-guide-hotspot-y: 20%;
}
.ds-product-guide-hotspot-teams-register {
    --ds-product-guide-hotspot-x: 92%;
    --ds-product-guide-hotspot-y: 88%;
    --ds-product-guide-hotspot-width: 7.5%;
    --ds-product-guide-hotspot-height: 10%;
}

.ds-product-guide-hotspot-area > b {
    position: absolute;
    left: -0.6875rem;
    top: -0.6875rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--ds-product-guide-accent);
    color: var(--ds-color-on-primary);
    border: 2px solid var(--ds-color-on-primary);
    box-shadow: var(--ds-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .ds-product-guide-hotspot,
    .ds-product-guide-hotspot-area > b {
        width: 1.375rem;
        height: 1.375rem;
        font-size: 0.6875rem;
        border-width: 1.5px;
    }
    .ds-product-guide-hotspot-area > b {
        left: -0.6875rem;
        top: -0.6875rem;
    }
}

.ds-product-guide-screenshot-w-10 { --ds-product-guide-screenshot-width: 10%; }
.ds-product-guide-screenshot-w-20 { --ds-product-guide-screenshot-width: 20%; }
.ds-product-guide-screenshot-w-30 { --ds-product-guide-screenshot-width: 30%; }
.ds-product-guide-screenshot-w-40 { --ds-product-guide-screenshot-width: 40%; }
.ds-product-guide-screenshot-w-50 { --ds-product-guide-screenshot-width: 50%; }
.ds-product-guide-screenshot-w-60 { --ds-product-guide-screenshot-width: 60%; }
.ds-product-guide-screenshot-w-70 { --ds-product-guide-screenshot-width: 70%; }
.ds-product-guide-screenshot-w-80 { --ds-product-guide-screenshot-width: 80%; }
.ds-product-guide-screenshot-w-90 { --ds-product-guide-screenshot-width: 90%; }
.ds-product-guide-screenshot-w-100 { --ds-product-guide-screenshot-width: 100%; }
.ds-product-guide-screenshot[class*="ds-product-guide-screenshot-w-"] {
    box-sizing: border-box;
    width: var(--ds-product-guide-screenshot-width, 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.ds-product-guide-screenshot[class*="ds-product-guide-screenshot-w-"] img {
    width: 100%;
    max-width: 100%;
    display: block;
}
[data-bs-theme="dark"] .ds-product-guide-screenshot {
    background-color: var(--ds-color-bg-footer);
}

/* ============================================================
   9. 접이식 상세 / 필드 리스트
   ============================================================ */
.ds-product-guide-details {
    border: none;
    border-radius: 0;
    margin: 0 0 1.25rem;
    overflow: visible;
    background: transparent;
}
.ds-product-guide-details summary,
.ds-product-guide-details-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ds-color-fg-muted);
    background-color: transparent;
    border-bottom: 1px solid var(--ds-color-border-subtle);
    list-style: none;
}
.ds-product-guide-details summary {
    cursor: pointer;
    user-select: none;
}
.ds-product-guide-details summary::-webkit-details-marker {
    display: none;
}
.ds-product-guide-details summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-left: auto;
    border-right: 1.5px solid var(--ds-color-fg-muted);
    border-bottom: 1.5px solid var(--ds-color-fg-muted);
    transform: rotate(45deg) translate(-0.1em, -0.1em);
    transition: transform var(--ds-motion-default);
}
.ds-product-guide-details[open] summary::after {
    transform: rotate(-135deg) translate(-0.1em, -0.1em);
}
.ds-product-guide-details .ds-product-guide-details-body {
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.9;
    border-top: none;
    word-break: keep-all;
}

.ds-product-guide-field-list {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.ds-product-guide-field-item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    background-color: transparent;
    border-radius: 0;
    border-top: 1px solid var(--ds-color-border-subtle);
    font-size: 0.9375rem;
    line-height: 1.9;
}
.ds-product-guide-field-item:first-child {
    border-top: none;
}
.ds-product-guide-field-item .ds-product-guide-field-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 8.5rem;
    min-width: 8.5rem;
    color: var(--ds-color-fg);
}
.ds-product-guide-field-item .ds-product-guide-field-desc {
    flex: 1;
    color: var(--ds-color-fg-muted);
    line-height: 1.9;
    word-break: keep-all;
}
[data-bs-theme="dark"] .ds-product-guide-field-item {
    background-color: transparent;
}

/* ============================================================
   10. 관련 기능 카드
   ============================================================ */
.ds-product-guide-quick-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0;
}
.ds-product-guide-quick-card {
    display: block;
    border: 1px solid var(--ds-color-border);
    border-radius: 0.5rem;
    padding: 0.9375rem 1.125rem;
    text-decoration: none;
    color: inherit;
    background: var(--ds-color-card);
    transition: border-color var(--ds-motion-fast), background-color var(--ds-motion-fast);
}
.ds-product-guide-content-main a.ds-product-guide-quick-card:hover {
    border-color: var(--ds-color-border-strong);
    background-color: var(--ds-color-bg-muted);
    color: inherit;
    text-decoration: none;
}
.ds-product-guide-quick-card .ds-product-guide-quick-card-icon {
    display: none; /* 이모지 아이콘 제거 */
}
.ds-product-guide-quick-card .ds-product-guide-quick-card-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-color-fg);
    margin-bottom: 0.25rem;
}
.ds-product-guide-quick-card:focus-visible,
.ds-product-guide-pager a:focus-visible,
.ds-product-guide-details summary:focus-visible,
.ds-product-guide-faq-item summary:focus-visible {
    outline: none;
    box-shadow: var(--ds-shadow-focus);
}

.ds-product-guide-quick-card .ds-product-guide-quick-card-desc {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ds-color-fg-muted);
    margin: 0;
    word-break: keep-all;
}

/* ============================================================
   11. FAQ
   ============================================================ */
.ds-product-guide-faq-item {
    border: none;
    border-top: 1px solid var(--ds-color-border-subtle);
    border-radius: 0;
    margin: 0;
    overflow: hidden;
}
.ds-product-guide-faq-item:last-of-type {
    border-bottom: 1px solid var(--ds-color-border-subtle);
}
.ds-product-guide-faq-item summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.9375rem 2rem 0.9375rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    list-style: none;
    color: var(--ds-color-fg);
    position: relative;
    word-break: keep-all;
    user-select: none;
}
.ds-product-guide-faq-item summary::-webkit-details-marker {
    display: none;
}
.ds-product-guide-faq-item summary::before {
    content: "Q";
    flex-shrink: 0;
    color: var(--ds-product-guide-accent);
    font-weight: 700;
}
.ds-product-guide-faq-item summary::after {
    content: "";
    position: absolute;
    right: 0.375rem;
    top: 1.35rem;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid var(--ds-color-fg-muted);
    border-bottom: 1.5px solid var(--ds-color-fg-muted);
    transform: rotate(45deg);
    transition: transform var(--ds-motion-default);
}
.ds-product-guide-faq-item[open] summary::after {
    transform: rotate(-135deg);
    top: 1.5rem;
}
.ds-product-guide-faq-item .faq-answer {
    padding: 0 2rem 1.125rem 1.15rem;
    font-size: 0.9375rem;
    color: var(--ds-color-fg-muted);
    line-height: 1.9;
    word-break: keep-all;
    text-wrap: pretty;
}

/* ============================================================
   12. 문서 마무리 — 이전/다음
   ============================================================ */
.ds-product-guide-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.ds-product-guide-pager a {
    display: block;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--ds-color-border);
    border-radius: 0.5rem;
    background: var(--ds-color-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--ds-motion-fast);
}
.ds-product-guide-pager a:hover {
    border-color: var(--ds-color-border-strong);
    text-decoration: none;
}
.ds-product-guide-pager .ds-product-guide-pager-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ds-color-fg-muted);
    margin-bottom: 0.25rem;
}
.ds-product-guide-pager .ds-product-guide-pager-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ds-color-fg);
}
.ds-product-guide-pager .ds-product-guide-pager-next {
    grid-column: 2;
    text-align: right;
}

/* ============================================================
   13. 우측 목차 (TOC)
   ============================================================ */
.ds-product-guide-content-toc {
    position: sticky;
    top: 6.5rem;
    width: auto;
    max-height: calc(100vh - 7rem);
    margin-top: 1.5rem;
    overflow-y: auto;
    padding-left: 1.5rem;
    border-left: 1px solid var(--ds-color-border);
}
.ds-product-guide-toc-title {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ds-color-fg-muted);
    margin-bottom: 1rem;
}
.ds-product-guide-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ds-product-guide-toc-item {
    margin-bottom: 0.125rem;
}
.ds-product-guide-toc-link {
    position: relative;
    display: block;
    padding: 0.4rem 0 0.4rem 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ds-color-fg-muted);
    text-decoration: none;
    transition: color var(--ds-motion-fast);
    word-break: keep-all;
}
.ds-product-guide-toc-link:hover {
    color: var(--ds-color-fg);
    text-decoration: none;
}
.ds-product-guide-toc-link.active {
    color: var(--ds-color-fg);
    font-weight: 600;
}
.ds-product-guide-toc-link.active::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: -1.5625rem;
    width: 2px;
    border-radius: 999px;
    background: var(--ds-product-guide-accent);
}
.ds-product-guide-content-toc::-webkit-scrollbar {
    width: 3px;
}
.ds-product-guide-content-toc::-webkit-scrollbar-thumb {
    background-color: var(--ds-color-border);
    border-radius: 3px;
}
[data-bs-theme="dark"] .ds-product-guide-toc-title,
[data-bs-theme="dark"] .ds-product-guide-toc-link {
    color: var(--ds-color-on-primary-muted) !important;
}
[data-bs-theme="dark"] .ds-product-guide-content-toc {
    border-left-color: var(--ds-color-white-alpha-08);
}
[data-bs-theme="dark"] .ds-product-guide-toc-link:hover,
[data-bs-theme="dark"] .ds-product-guide-toc-link.active {
    color: var(--ds-color-accent) !important;
}
[data-bs-theme="dark"] .ds-product-guide-content-toc::-webkit-scrollbar-thumb {
    background-color: var(--ds-color-white-alpha-25);
}

/* ============================================================
   14. 반응형
   ============================================================ */
@media (max-width: 1199.98px) {
    .ds-product-guide-page-row {
        grid-template-columns:
            var(--ds-product-guide-sidebar-width)
            minmax(0, var(--ds-product-guide-content-width));
    }
    .ds-product-guide-content-toc {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .ds-product-guide-page-row {
        grid-template-columns: minmax(0, var(--ds-product-guide-content-width));
    }
    .ds-product-guide-layout .ds-product-guide-sidebar {
        display: none;
    }
    .ds-product-guide-main {
        width: auto;
        max-width: 100%;
    }
    .ds-product-guide-mobile-nav {
        display: block;
    }
    .ds-product-guide-quick-cards,
    .ds-product-guide-pager {
        grid-template-columns: 1fr;
    }
    .ds-product-guide-figure-wide {
        width: 100%;
        margin-inline: 0;
    }
    .ds-product-guide-pager .ds-product-guide-pager-next {
        grid-column: auto;
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    .ds-product-guide-content-main {
        padding-bottom: 2.5rem;
    }
    .ds-product-guide-hero {
        margin-bottom: 0;
        padding-bottom: 1.25rem;
    }
    .ds-product-guide-hero-body p {
        font-size: 0.9375rem;
    }
    .ds-product-guide-section {
        margin-bottom: 0;
        padding-top: 2.5rem;
    }
    .ds-product-guide-section-title {
        font-size: 1.125rem;
        scroll-margin-top: 6rem;
    }
    .ds-product-guide-text,
    .ds-product-guide-callout-item,
    .ds-product-guide-tip,
    .ds-product-guide-info,
    .ds-product-guide-field-item,
    .ds-product-guide-details .ds-product-guide-details-body,
    .ds-product-guide-faq-item summary,
    .ds-product-guide-faq-item .faq-answer {
        font-size: 0.9375rem;
    }
    .ds-product-guide-field-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .ds-product-guide-field-item .ds-product-guide-field-name {
        flex: 0 0 auto;
        min-width: 0;
        white-space: normal;
    }
    .ds-product-guide-screenshot[class*="ds-product-guide-screenshot-w-"],
    .ds-product-guide-figure[class*="ds-product-guide-screenshot-w-"] {
        width: 100%;
    }
    .ds-product-guide-screenshot {
        padding: 1rem;
        min-height: 0;
    }
    .ds-product-guide-callout-item .ds-product-guide-badge {
        min-width: 0;
    }
    .ds-product-guide-details summary,
    .ds-product-guide-details-title {
        padding: 0.625rem 0;
    }
    .ds-product-guide-details .ds-product-guide-details-body {
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    .ds-product-guide-mobile-nav .ds-product-guide-sidebar-list {
        grid-template-columns: 1fr;
    }
    .ds-product-guide-callout-item {
        gap: 0.625rem;
    }
}

/* ============================================================
   15. 인쇄
   ============================================================ */
@media print {
    .ds-product-guide-content-toc,
    .ds-product-guide-pager,
    .ds-product-guide-anchor {
        display: none !important;
    }
    .ds-product-guide-content-main {
        border: none;
        box-shadow: none;
        padding: 0;
        max-width: none;
    }
    .ds-product-guide-details .ds-product-guide-details-body,
    .ds-product-guide-faq-item .faq-answer {
        display: block !important;
    }
}

/* ============================================================
   16. 제품 가이드 운영 레이아웃
   ============================================================ */
.ds-product-guide-layout {
    --ds-product-guide-primary-width: var(--ds-product-guide-sidebar-width);
    --ds-product-guide-top-gap: 4.5rem;
    --ds-product-guide-nav-bg: color-mix(
        in srgb,
        var(--ds-color-bg-muted) 58%,
        var(--ds-color-bg)
    );
    --ds-product-guide-nav-fg: var(--ds-color-fg);
    --ds-product-guide-nav-muted: var(--ds-color-fg-muted);
    --ds-product-guide-nav-hair: var(--ds-color-border-subtle);
    --ds-product-guide-nav-rail: var(--ds-color-border);
    --ds-product-guide-nav-active: var(--ds-color-fg);
    --ds-product-guide-nav-active-bg: var(--ds-color-bg-muted);
    min-height: 100vh;
    padding-top: calc(var(--ds-nav-height) + var(--ds-product-guide-top-gap));
    background: var(--ds-color-bg);
}

.ds-product-guide-sidebar-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0 0.875rem;
    color: var(--ds-color-fg);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.ds-product-guide-sidebar-brand:hover {
    color: var(--ds-color-fg);
    text-decoration: none;
}

.ds-product-guide-sidebar-brand-mark {
    display: none;
    width: 1.625rem;
    height: 1.625rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--ds-product-guide-nav-rail);
    border-radius: 0.375rem;
    color: var(--ds-product-guide-nav-active);
    background: var(--ds-product-guide-nav-hair);
}

.ds-product-guide-mobile-layer[hidden],
.ds-product-guide-content-toc[hidden] {
    display: none !important;
}

.ds-product-guide-shell {
    box-sizing: border-box;
    display: grid;
    width: min(100%, var(--ds-product-guide-frame-width));
    min-height: calc(100vh - var(--ds-nav-height) - var(--ds-product-guide-top-gap));
    margin-inline: auto;
    grid-template-columns:
        var(--ds-product-guide-primary-width)
        minmax(0, 1fr);
    column-gap: var(--ds-product-guide-column-gap);
    align-items: start;
    background: transparent;
}

.ds-product-guide-primary {
    position: sticky;
    top: calc(var(--ds-nav-height) + var(--ds-product-guide-top-gap));
    align-self: start;
    height: calc(100vh - var(--ds-nav-height) - var(--ds-product-guide-top-gap));
    overflow-y: auto;
    padding-right: 1.5rem;
    border-right: 1px solid var(--ds-color-border);
    scrollbar-width: thin;
}

.ds-product-guide-primary {
    color: var(--ds-color-fg);
    background: var(--ds-product-guide-nav-bg);
    scrollbar-color: var(--ds-color-border) transparent;
}

.ds-product-guide-primary-nav {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 1.5rem 0 1.5rem;
}

.ds-product-guide-nav-heading {
    padding: 0 0.625rem 0.75rem;
    color: var(--ds-color-on-primary-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ds-product-guide-primary-group {
    padding: 0.65rem 0 0.25rem;
}

.ds-product-guide-primary-group-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--ds-color-border);
}

/* 그룹 캡션은 두 형태로 쓴다.
   - toggle : 모바일 드로어. 접고 펼 수 있는 버튼.
   - label  : 데스크톱 레일. 항상 펼쳐 두므로 정적 캡션으로만 둔다.
   조판은 같아야 하므로 타이포는 여기서 함께 정의한다. */
.ds-product-guide-primary-group-toggle,
.ds-product-guide-primary-group-label {
    display: flex;
    width: 100%;
    min-height: 1.875rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.125rem;
    padding: 0.35rem 0.75rem;
    border: 0;
    border-bottom: 0;
    border-radius: var(--ds-radius-sm);
    color: var(--ds-color-fg);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
}

.ds-product-guide-primary-group-toggle {
    cursor: pointer;
}

.ds-product-guide-primary-group-toggle:hover {
    color: var(--ds-color-fg);
    background: var(--ds-color-bg-muted);
}

.ds-product-guide-primary-group-chevron {
    transition: transform var(--ds-motion-fast);
}

.ds-product-guide-primary-group.is-expanded .ds-product-guide-primary-group-chevron {
    transform: rotate(180deg);
}

.ds-product-guide-primary-list {
    display: grid;
    gap: 0.125rem;
}

.ds-product-guide-primary-link {
    display: flex;
    width: 100%;
    min-height: 2rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.475rem 0.75rem;
    border-radius: var(--ds-radius-sm);
    font-size: 0.8125rem;
    font-weight: 540;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    transition:
        color var(--ds-motion-fast),
        background-color var(--ds-motion-fast);
}

.ds-product-guide-primary-link {
    border: 0;
    color: var(--ds-color-fg-muted);
    background: transparent;
    cursor: pointer;
}

.ds-product-guide-primary-link:hover {
    color: var(--ds-color-fg);
    background: var(--ds-color-bg-muted);
    text-decoration: none;
}

/* is-active 는 "현재 경로 위"(자식을 보는 중인 부모 포함)라 색만 준다.
   면과 좌측 바는 지금 열려 있는 페이지(is-current)에만 준다.
   부모가 곧 페이지인 경우(예: 공유업무 소개)에도 표시가 남아야 한다. */
.ds-product-guide-primary-link.is-active {
    color: var(--ds-color-fg);
}

.ds-product-guide-primary-link.is-current {
    color: var(--ds-color-fg);
    background: var(--ds-color-bg-muted);
    box-shadow: inset 2px 0 0 var(--ds-color-primary);
}

.ds-product-guide-primary-link > span,
.ds-product-guide-primary-submenu-link > span:first-child {
    min-width: 0;
    flex: 1;
}

.ds-product-guide-primary-chevron {
    margin-left: auto;
    opacity: 0.58;
    transition: transform var(--ds-motion-fast);
}

.ds-product-guide-primary-item.is-expanded > .ds-product-guide-primary-link .ds-product-guide-primary-chevron {
    transform: rotate(90deg);
}

.ds-product-guide-primary-link-pending,
.ds-product-guide-primary-submenu-link-pending {
    cursor: default;
}

.ds-product-guide-primary-link-pending:not(.is-active) {
    color: var(--ds-color-fg-muted);
}

/* 좌측 레일선을 부모 항목의 글자 시작점(0.75rem)에 맞춘다.
   부모-자식이 한 덩어리로 읽히고, 좁은 레일에서 자식 라벨 폭도 아낀다. */
.ds-product-guide-primary-submenu {
    display: grid;
    gap: 0.1rem;
    margin: 0.125rem 0 0.375rem 0.75rem;
    padding-left: 0;
    border-left: 1px solid var(--ds-color-border);
}

.ds-product-guide-primary-submenu[hidden] {
    display: none !important;
}

/* 링크 면을 레일선 위에서 시작시킨다.
   그래야 선택 표시(inset 좌측 바)가 1차 항목과 같은 방식으로 붙고,
   레일선 옆에 바가 따로 떠 있는 것처럼 보이지 않는다. */
.ds-product-guide-primary-submenu-link {
    position: relative;
    display: flex;
    width: calc(100% + 1px);
    min-height: 2rem;
    margin-left: -1px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    /* 선택 면의 모서리도 1차 항목과 같은 값을 쓴다 */
    border-radius: var(--ds-radius-sm);
    color: var(--ds-color-fg-muted);
    font-size: 0.8125rem;
    font-weight: 520;
    line-height: 1.35;
    text-decoration: none;
}

.ds-product-guide-primary-submenu-link:hover {
    color: var(--ds-color-fg);
    background: var(--ds-color-bg-muted);
    text-decoration: none;
}

.ds-product-guide-primary-submenu-link.is-active {
    color: var(--ds-color-fg);
}

/* 선택 표시는 1차 항목과 같은 규칙을 쓴다 — 틴트 면 + 좌측 inset 바 */
.ds-product-guide-primary-submenu-link.is-current {
    color: var(--ds-color-fg);
    background: var(--ds-color-bg-muted);
    box-shadow: inset 2px 0 0 var(--ds-color-primary);
}

.ds-product-guide-primary-submenu-divider {
    height: 1px;
    margin: 0.5rem;
    background: var(--ds-color-border);
}

.ds-product-guide-main-area {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, var(--ds-product-guide-content-width));
    justify-content: center;
    padding: 1.5rem 0 5rem;
}

.ds-product-guide-content-main {
    width: 100%;
    max-width: none;
    min-height: 38rem;
    margin: 0;
    padding: 0;
}

.ds-product-guide-breadcrumb {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 2rem;
    color: var(--ds-color-fg-muted);
    font-size: 0.8125rem;
}

.ds-product-guide-breadcrumb a {
    color: var(--ds-color-accent);
    font-weight: 600;
}

.ds-product-guide-breadcrumb strong {
    color: var(--ds-color-fg);
    font-weight: 650;
}

.ds-product-guide-content-header {
    padding-bottom: 2.5rem;
    border-bottom: 0;
}

.ds-product-guide-content-kicker {
    display: block;
    color: var(--ds-color-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ds-product-guide-content-header h1 {
    max-width: 42rem;
    margin: 0;
    color: var(--ds-color-fg-strong);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-wrap: balance;
    word-break: keep-all;
}

.ds-product-guide-content-header p {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: var(--ds-color-fg-muted);
    font-size: 1rem;
    line-height: 1.75;
    word-break: keep-all;
}

.ds-product-guide-content-toc {
    top: calc(var(--ds-nav-height) + var(--ds-product-guide-top-gap) + 1.5rem);
    align-self: start;
    margin: 0;
    padding-left: 1rem;
}

.ds-product-guide-mobile {
    display: none;
}

.ds-product-guide-standalone {
    min-height: 100vh;
    padding-top: calc(var(--ds-nav-height) + 2rem);
    background: var(--ds-color-bg);
}

.ds-product-guide-package-notice {
    width: min(56rem, calc(100% - 3rem));
    margin: clamp(3rem, 7vw, 7rem) auto;
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-xl);
    background: var(--ds-color-card);
}

.ds-product-guide-package-notice > span:first-child {
    color: var(--ds-color-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ds-product-guide-package-notice h1 {
    max-width: 48rem;
    margin: 0.625rem 0 0;
    color: var(--ds-color-fg-strong);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 560;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.ds-product-guide-package-notice p {
    max-width: 48rem;
    margin: 1rem 0 0;
    color: var(--ds-color-fg-muted);
    line-height: 1.8;
}

.ds-product-guide-package-notice .ds-btn {
    margin-top: 1.75rem;
}

.ds-product-guide-sidebar-brand:focus-visible,
.ds-product-guide-primary-group-toggle:focus-visible,
.ds-product-guide-primary-link:focus-visible,
.ds-product-guide-primary-submenu-link:focus-visible,
.ds-product-guide-mobile-trigger:focus-visible,
.ds-product-guide-mobile-close:focus-visible {
    outline: none;
    box-shadow: var(--ds-shadow-focus);
}

@media (min-width: 1200px) {
    .ds-product-guide-shell-has-toc .ds-product-guide-main-area {
        grid-template-columns:
            minmax(0, var(--ds-product-guide-content-width))
            var(--ds-product-guide-toc-width);
        column-gap: var(--ds-product-guide-column-gap);
    }

    .ds-product-guide-shell-has-toc .ds-product-guide-content-toc:not([hidden]) {
        display: block !important;
    }
}

@media (max-width: 1199.98px) {
    .ds-product-guide-content-toc {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .ds-product-guide-layout {
        padding-top: var(--ds-nav-height);
    }

    .ds-product-guide-primary {
        display: none;
    }

    .ds-product-guide-mobile {
        display: block;
        position: sticky;
        z-index: var(--ds-z-sticky);
        top: var(--ds-nav-height);
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--ds-color-border);
        background: var(--ds-product-guide-nav-bg);
    }

    .ds-product-guide-mobile-trigger {
        display: flex;
        width: min(100%, 52rem);
        min-height: 3.5rem;
        margin-inline: auto;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 0.875rem;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-md);
        color: var(--ds-color-fg);
        background: var(--ds-color-card);
        text-align: left;
    }

    .ds-product-guide-mobile-trigger > span {
        display: grid;
        min-width: 0;
        flex: 1;
    }

    /* 라벨을 걷어낸 뒤 남은 한 줄이 버튼의 전부라, 드로어 헤더 제목과 같은 크기로 올린다.
       0.8125rem 은 위에 라벨이 있을 때의 크기였다. */
    .ds-product-guide-mobile-trigger strong {
        overflow: hidden;
        font-size: 0.875rem;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ds-product-guide-mobile-layer {
        position: fixed;
        z-index: var(--ds-z-modal);
        top: var(--ds-nav-height);
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: stretch;
    }

    .ds-product-guide-mobile-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: var(--ds-color-overlay);
    }

    .ds-product-guide-mobile-drawer {
        position: relative;
        z-index: 1;
        width: min(30rem, calc(100% - 2rem));
        height: 100%;
        overflow-y: auto;
        color: var(--ds-product-guide-nav-fg);
        background: var(--ds-product-guide-nav-bg);
        box-shadow: var(--ds-shadow-lg);
    }

    .ds-product-guide-mobile-header {
        position: sticky;
        z-index: 2;
        top: 0;
        display: flex;
        min-height: 4rem;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--ds-product-guide-nav-hair);
        background: var(--ds-color-bg);
    }

    .ds-product-guide-mobile-header > div {
        display: grid;
        min-width: 0;
    }

    .ds-product-guide-mobile-header strong {
        color: var(--ds-product-guide-nav-fg);
        font-size: 0.875rem;
        font-weight: 680;
    }

    .ds-product-guide-mobile-close {
        display: inline-grid;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--ds-product-guide-nav-rail);
        border-radius: var(--ds-radius-md);
        color: var(--ds-product-guide-nav-fg);
        background: var(--ds-product-guide-nav-hair);
    }

    .ds-product-guide-mobile-app-navigation {
        padding: 0;
    }

    .ds-product-guide-mobile-drawer .ds-product-guide-primary-nav {
        color: var(--ds-product-guide-nav-fg);
        padding: 1.25rem 1rem 1rem;
        background: var(--ds-product-guide-nav-bg);
    }

    .ds-product-guide-mobile-drawer .ds-product-guide-nav-heading {
        padding-top: 0.5rem;
        color: var(--ds-product-guide-nav-muted);
    }

    .ds-product-guide-mobile-drawer .ds-product-guide-primary-group-footer {
        border-top-color: var(--ds-product-guide-nav-hair);
    }

    /* 가이드 이름은 drawer 헤더가 이미 보여 주므로 레일 브랜드를 그리지 않는다
       (primary-navigation.blade.php 의 $showBrand). 여기 대응 규칙도 없다. */

    .ds-product-guide-mobile-drawer .ds-product-guide-primary-group-toggle,
    .ds-product-guide-mobile-drawer .ds-product-guide-primary-link {
        min-height: 2.25rem;
        color: var(--ds-product-guide-nav-muted);
    }

    .ds-product-guide-mobile-drawer .ds-product-guide-primary-group-toggle:hover,
    .ds-product-guide-mobile-drawer .ds-product-guide-primary-link:hover,
    .ds-product-guide-mobile-drawer .ds-product-guide-primary-link.is-current {
        color: var(--ds-product-guide-nav-fg);
        background: var(--ds-product-guide-nav-hair);
    }

    .ds-product-guide-mobile-drawer .ds-product-guide-primary-submenu {
        border-left-color: var(--ds-product-guide-nav-rail);
    }

    .ds-product-guide-mobile-drawer .ds-product-guide-primary-submenu-link {
        color: var(--ds-product-guide-nav-muted);
    }

    .ds-product-guide-mobile-drawer .ds-product-guide-primary-submenu-link:hover,
    .ds-product-guide-mobile-drawer .ds-product-guide-primary-submenu-link.is-current {
        color: var(--ds-product-guide-nav-active);
        background: var(--ds-product-guide-nav-active-bg);
    }

    .ds-product-guide-mobile-drawer .ds-product-guide-primary-submenu-divider {
        background: var(--ds-product-guide-nav-rail);
    }

    .ds-product-guide-shell {
        display: block;
        width: 100%;
        min-height: 0;
        border-inline: 0;
    }

    .ds-product-guide-main-area {
        width: min(100%, 52rem);
        margin-inline: auto;
        padding: 2.5rem 3rem 5rem;
    }

    .ds-product-guide-drawer-open {
        overflow: hidden;
    }
}

@media (max-width: 991.98px) {
    .ds-product-guide-layout {
        padding-top: 4.5rem;
    }

    .ds-product-guide-mobile,
    .ds-product-guide-mobile-layer {
        top: 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .ds-product-guide-mobile {
        padding-inline: 0.625rem;
    }

    .ds-product-guide-mobile-drawer {
        width: 100%;
    }

    .ds-product-guide-content-main {
        padding: 0;
    }

    .ds-product-guide-main-area {
        padding: 1.75rem 1.25rem 3rem;
    }

    .ds-product-guide-breadcrumb {
        margin-bottom: 1.75rem;
    }

    .ds-product-guide-content-header h1 {
        font-size: 1.5rem;
    }

    .ds-product-guide-package-notice {
        width: min(100% - 1.25rem, 40rem);
    }
}

@media print {
    .ds-product-guide-mobile,
    .ds-product-guide-primary,
    .ds-product-guide-content-toc {
        display: none !important;
    }

    .ds-product-guide-layout,
    .ds-product-guide-shell,
    .ds-product-guide-main-area {
        display: block;
        min-height: 0;
        padding: 0;
        border: 0;
    }

    .ds-product-guide-content-main {
        width: auto;
        max-width: none;
        min-height: 0;
        padding: 0;
    }
}

/* ============================================================
   17. 좌측 메뉴 — 샘플 기준 정리안 (refined)
   ------------------------------------------------------------
   레이아웃 루트의 data-guide-nav-style="refined" 에서만 적용된다.
   16번까지의 기본 스타일은 그대로 두었으므로, 속성을 빼면 기존
   안으로 즉시 되돌아가 두 안을 비교할 수 있다.

   기준: "가이드 화면 최종" 샘플
   ① 그룹 라벨을 밑줄 + 넓은 자간의 캡션 규칙으로 처리한다
   ② 자식 있는 1차만 굵게 두고 나머지 층위는 색으로 만든다
   ③ 강조는 중성 회색이 아니라 브랜드 액센트 틴트로 준다
   ④ 쉐브론 방향을 통일한다 (닫힘 ⌄ / 열림 ⌃)
   ⑤ 본문은 기존 페이퍼 캔버스를 유지하고 레일만 얇은 경계로 구분한다
   ⑥ 레일을 뷰포트에 붙이지 않고 사이트 컨테이너 기준선에 맞춘다
   ============================================================ */
[data-guide-nav-style="refined"] {
    /* 기존 /support 가이드와 같은 3열 문서 프레임을 사용한다 */
    --ds-product-guide-frame-width: 80.5rem;
    /* ⑦ 상단 여백 — /support/guide-admin 과 같은 리듬(첫 줄이 GNB 아래 96px)에 맞춘다 */
    --ds-product-guide-top-gap: 1.75rem;
    /* 좌 232 / 우 208 — 시안 기준은 우 224 였으나, 목차 트랙에서 16px 을 떼어
       본문 양옆 간격에 8px 씩 돌려준다. 가이드 20개 페이지의 목차 제목을 실측하면
       가장 긴 항목(문제 해결 "AI 응답이나 비용이 예상과 다를 때")이 189px 이라
       208 - 좌우 안쪽 여백 24px = 184px 에서 그 항목만 두 줄이 된다. */
    --ds-product-guide-sidebar-width: 14.5rem;
    --ds-product-guide-toc-width: 13rem;
    /* 간격은 기본값(3rem)보다 한 단 넓게 잡는다. 상한에 도달하는 뷰포트는
       1600px 으로 기본값(3vw→3rem)과 같게 두어, 중간 폭에서 반응 곡선이
       기존과 다른 지점에서 꺾이지 않게 한다. */
    --ds-product-guide-column-gap: clamp(2rem, 3.5vw, 3.5rem);
    /* 본문은 남는 폭을 그대로 받는다. 아래 값은 상한일 뿐이라
       프레임이 좁으면 트랙이 알아서 줄어든다(오버플로 없음).
       간격 최대(3.5rem) 기준 232 + 56 + 736 + 56 + 208 = 1288 = 80.5rem. */
    --ds-product-guide-content-width: 46rem;

    /* 레일·목차 표면 — 캔버스보다 한 단 내린 종이 면으로 가라앉힌다.
       주석에 적힌 전제(캔버스 #FAF9F5)는 아래 19장에서 캔버스를 #FFFDFB 로
       올리면서 깨졌다. 면과 캔버스가 같은 색이 되어 대비가 1.00 이었고,
       좌우 레일이 오직 헤어라인 하나로만 구분되던 상태였다.
       본문 블록과 같은 단(--ds-guide-body-surface)에 두어 헤어라인 없이도
       면이 스스로 읽히게 한다. */
    --ds-product-guide-nav-bg: #fbf8f1;
    --ds-product-guide-nav-hair: #e8e1d9;
    --ds-product-guide-nav-rail: #e8e1d9;
    /* 네이티브 스크롤바를 감추고 대신 띄우는 얇은 썸 */
    --ds-product-guide-nav-thumb: #c7bbad;

    /* 항목 층위 — 1차는 한 가지 색으로 두고, 층위는 크기와 들여쓰기로 만든다.
       그룹 캡션이 11px 대문자 조판으로 이미 확실히 구분되므로
       1차 항목을 부모/잎으로 또 나눌 필요가 없다. */
    --ds-product-guide-nav-parent-fg: #3d3733;
    --ds-product-guide-nav-leaf-fg: #3d3733;
    --ds-product-guide-nav-secondary-fg: #6b635c;
    /* 그룹 라벨도 본문 텍스트라 AA(4.5:1)를 지켜야 한다.
       시안의 #A69C92 는 이 레일 위에서 2.66:1 로 미달한다.
       같은 자리의 토큰 #6F6B63 은 레일 면을 #FBF8F1 로 내린 뒤에도 5.00:1 이라
       이쪽을 쓴다. 면을 더 어둡게 내리면 이 값부터 다시 확인해야 한다. */
    --ds-product-guide-nav-group-fg: var(--ds-color-fg-muted);
    /* 비활성 항목은 WCAG 대비 예외라 더 흐리게 둔다 */
    --ds-product-guide-nav-quiet-fg: #8c877e;

    /* 강조 — hover 는 중성 면, 액센트는 "지금 보는 페이지" 한 곳에만 쓴다.
       hover 까지 액센트를 주면 마우스를 올릴 때마다 현재 위치 표시가 흔들린다.

       면은 모두 한 hue 축(33~42°, 웜 베이지)에 두고 명도로만 층을 만든다.
       hue 를 바꾸는 것은 잉크(--*-active-fg) 하나뿐이다.
       이전 값 #f9ede9 / #f5e3dd 는 hue 15° 라 레일 바닥(42°)·hover 면(33°)과
       17° 어긋나 있었다. 채도 6% 대에서 이 정도 차이는 "고른 색"이 아니라
       "틀린 색"으로 읽힌다. 레일 바닥 대비도 1.08:1 로 면 구실을 못 했다.

       hue 를 통일하면 밝기가 유일한 구분 수단이 되므로 네 면이 L* 계단을
       이뤄야 한다. 이전 설계는 hover 면과 현재 면의 L* 차이가 0.2 뿐이었고
       오직 hue 로만 갈렸다. 지금은 97.6 / 94.3 / 91.6 / 88.2 로 각 3 안팎이다.
       면 색을 손대면 이 계단과 액센트 잉크의 AA(현재 면 위 5.05:1,
       현재+hover 면 위 4.61:1)를 함께 확인한다. 4.5:1 여유가 크지 않다. */
    --ds-product-guide-nav-tint: #f3eee8;
    --ds-product-guide-nav-tint-strong: #ede6dc;
    --ds-product-guide-nav-tint-strong-hover: #e5dcd0;
    --ds-product-guide-nav-active-fg: #a44031;

    /* 기존 가이드와 같은 페이퍼 캔버스를 유지한다 */
    background: var(--ds-color-bg);
}

/* 넓은 본문이 필요한 페이지 (config 의 'wide' => true).

   본문 폭은 직접 정하는 값이 아니라 프레임에서 남는 폭이다.
   프레임 85rem − 레일 11.75rem − 목차 11.25rem − 간격 2칸 = 본문 약 900px.

   프레임을 90rem 으로 두면 1500px 화면에서 좌우 여백이 23px 밖에 안 남아
   레일이 화면 끝에 붙는다. 85rem 이면 70px 로, 일반 가이드(99px)와 같은 리듬이 된다.

   아래 content-width 는 캡으로만 동작한다. 선언을 지우면 :root 의 47.5rem 으로
   떨어져 오히려 일반 페이지보다 좁아지므로, 값만 조정하고 선언은 남긴다.

   레일 폭은 여기서 못 바꾼다. 그리드가 읽는 --ds-product-guide-primary-width 는
   조상인 .ds-product-guide-layout 에서 이미 계산이 끝나기 때문에,
   후손에서 --ds-product-guide-sidebar-width 를 덮어써도 소급되지 않는다. */
[data-guide-nav-style="refined"] .ds-product-guide-shell-wide {
    --ds-product-guide-frame-width: 85rem;
    --ds-product-guide-content-width: 56.25rem;
}

/* ⑥ 위치 — GNB·푸터와 같은 컨테이너 규격으로 가운데 정렬한다.
   기본 규칙의 margin-inline: auto 는 그대로 두고 폭 계산만 좌우 여백만큼 줄인다. */
[data-guide-nav-style="refined"] .ds-product-guide-shell {
    width: min(100% - 2rem, var(--ds-product-guide-frame-width));
}

/* ⑦ 상단 — GNB 바로 아래에 붙이고, 여백은 레일·본문 안쪽 패딩으로 준다 */
[data-guide-nav-style="refined"] .ds-product-guide-primary {
    /* 레일은 본문보다 밝은 종이 면으로 채우고 오른쪽 헤어라인으로만 끊는다.
       좌우 안쪽 여백은 여기가 아니라 nav 와 그룹이 갖는다. 레일 폭(264px)이
       곧 면의 폭이어야 경계선이 항목 배경과 같은 리듬으로 떨어진다.

       상단 여백은 padding 이 아니라 margin 으로 준다. padding 으로 주면 그만큼이
       스크롤 박스 안에 포함돼 스크롤바가 본문 첫 줄보다 위에서 시작한다. */
    margin-top: 4.25rem;
    padding: 0;
    /* 짧은 메뉴도 뷰포트의 사용 가능 높이를 채워 본문·푸터와 붙어 보이지 않게 한다.
       메뉴가 이 높이를 넘을 때만 기존 overflow-y 스크롤이 동작한다. */
    top: calc(var(--ds-nav-height) + 2.5rem);
    height: calc(100vh - var(--ds-nav-height) - 4rem);
    height: calc(100dvh - var(--ds-nav-height) - 4rem);
    max-height: calc(100vh - var(--ds-nav-height) - 4rem);
    max-height: calc(100dvh - var(--ds-nav-height) - 4rem);
    border-right: 1px solid var(--ds-product-guide-nav-hair);
    background: var(--ds-product-guide-nav-bg);
    overscroll-behavior: contain;
}

/* 네이티브 스크롤바는 JS 가 대체 썸을 붙인 뒤에만 감춘다.
   무조건 감추면 스크립트가 죽었을 때 스크롤 가능 여부를 알 길이 없다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary.is-scroll-custom {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary.is-scroll-custom::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* 대체 썸 — 스크롤 컨테이너 안의 절대 배치라 내용과 함께 밀린다.
   JS 가 translateY 에 scrollTop 을 더해 제자리에 있는 것처럼 보정한다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-thumb {
    position: absolute;
    right: 3px;
    top: 0;
    width: 5px;
    height: 0;
    border-radius: 3px;
    background: var(--ds-product-guide-nav-thumb);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
    z-index: 2;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary:hover .ds-product-guide-primary-thumb,
[data-guide-nav-style="refined"] .ds-product-guide-primary-thumb.is-visible {
    opacity: 1;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-nav {
    /* 마지막 항목과 푸터 사이에 한 단계 넓은 완충 여백을 둔다. */
    padding: 1.75rem 0 6rem;
    gap: 1.5rem;
}

/* 가이드 이름 — 레일 첫 줄. 구분선을 두지 않고 nav 의 gap 만으로 아래 그룹과
   떨어뜨린다. 감싸는 상자를 두지 않으므로 nav 의 직접 자식이다. */
[data-guide-nav-style="refined"] .ds-product-guide-sidebar-brand {
    padding: 0 1.25rem;
    font-size: 0.90625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

[data-guide-nav-style="refined"] .ds-product-guide-content-main {
    padding-top: 2.75rem;
    padding-bottom: 5rem;
}

/* 우측 목차 — /support/guide-admin 의 목차와 같은 조판으로 맞춘다.
   레일과 같은 이유로 상단 여백은 margin 으로 주고, 고정 위치·높이도 레일과 맞춘다. */
[data-guide-nav-style="refined"] .ds-product-guide-content-toc {
    /* 면도 세로선도 두지 않는다. 목차는 사이트 전역 구조인 레일과 달리 페이지에
       딸린 부속이라, 레일과 같은 면으로 칠하면 실제 위계보다 무겁게 읽힌다.
       레일 면(#FBF8F1)과 캔버스(#FFFDFB)의 대비는 1.05:1 이라 면 구실도 못 하면서
       항목이 짧은 페이지에서는 트랙(208px)의 절반 이상이 빈 색으로 남았다.
       구분은 컬럼 간격(최대 56px)이 대신한다.

       면이 없으므로 안쪽 여백도 없다. 글자를 본문 첫 줄(4.25rem)에 맞추는 일은
       margin 혼자 한다 — 면이 있을 때는 margin 2.75rem + padding 1.5rem 이었다. */
    margin-top: 4.25rem;
    padding: 0;
    top: calc(var(--ds-nav-height) + 2.5rem);
    max-height: calc(100vh - var(--ds-nav-height) - 4rem);
    border-left: 0;
}

/* 현재 항목 표시줄은 트랙 왼쪽 바깥, 컬럼 간격 안에 걸친다. 기본값(-1.5625rem)은
   안쪽 여백 1.5rem + 헤어라인을 전제한 값이라 여기서는 간격 한가운데로 떠 버린다. */
[data-guide-nav-style="refined"] .ds-product-guide-toc-link.active::before {
    left: -0.75rem;
}

/* 기존 /support 가이드처럼 좌측 메뉴·본문·목차를 같은 그리드에 둔다.
   중첩 중앙 정렬을 없애 좌측 메뉴와 본문 사이 간격이 불필요하게 벌어지지 않게 한다. */
@media (min-width: 992px) {
    [data-guide-nav-style="refined"] .ds-product-guide-shell:not(.ds-product-guide-shell-wide) {
        grid-template-columns:
            var(--ds-product-guide-sidebar-width)
            minmax(0, var(--ds-product-guide-content-width));
        justify-content: center;
    }

    [data-guide-nav-style="refined"] .ds-product-guide-shell:not(.ds-product-guide-shell-wide) .ds-product-guide-main-area {
        display: contents;
    }

    [data-guide-nav-style="refined"] .ds-product-guide-shell:not(.ds-product-guide-shell-wide) .ds-product-guide-content-main {
        grid-column: 2;
        /* display: contents 로 사라지는 main-area의 상·하단 패딩까지 합산한다 */
        padding-top: 4.25rem;
        padding-bottom: 10rem;
    }

    [data-guide-nav-style="refined"] .ds-product-guide-shell:not(.ds-product-guide-shell-wide) > .ds-product-guide-primary {
        /* 레일 면은 본문 표면과 같은 높이에서 시작한다.
           안쪽 상단 여백은 nav(28px) 하나만 쓴다 — 여기서 또 주면 52px 이 된다. */
        margin-top: 2.75rem;
        padding-top: 0;
        top: 6.5rem;
        height: calc(100vh - 6.5rem);
        height: calc(100dvh - 6.5rem);
        max-height: calc(100vh - 6.5rem);
        max-height: calc(100dvh - 6.5rem);
    }

    [data-guide-nav-style="refined"] .ds-product-guide-shell:not(.ds-product-guide-shell-wide) .ds-product-guide-content-toc {
        /* 글자를 본문 첫 줄에 맞춘다. 레일(2.75rem)과 값이 다른 이유는 레일은 면이
           먼저 시작하고 안쪽 여백으로 글자를 내리는 반면, 목차는 면이 없어서다. */
        margin-top: 4.25rem;
        top: 6.5rem;
        /* 높이는 내용이 정한다. 레일 높이에 맞춰 늘이는 것은 면을 끝까지 칠하려던
           조치였고, 면이 없는 지금은 빈 박스를 화면 끝까지 늘일 뿐이다.
           긴 목차만 아래 상한에 걸려 스크롤된다. */
        max-height: calc(100vh - 6.5rem);
        max-height: calc(100dvh - 6.5rem);
    }
}

@media (min-width: 1200px) {
    [data-guide-nav-style="refined"] .ds-product-guide-shell-has-toc:not(.ds-product-guide-shell-wide) {
        grid-template-columns:
            var(--ds-product-guide-sidebar-width)
            minmax(0, var(--ds-product-guide-content-width))
            var(--ds-product-guide-toc-width);
    }

    [data-guide-nav-style="refined"] .ds-product-guide-shell-has-toc:not(.ds-product-guide-shell-wide) .ds-product-guide-content-toc {
        grid-column: 3;
    }
}

[data-guide-nav-style="refined"] .ds-product-guide-toc-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

[data-guide-nav-style="refined"] .ds-product-guide-toc-link {
    padding-block: 0.3rem;
}

/* ① 그룹 라벨 — 밑줄은 두지 않는다.
   그룹이 6~7개라 캡션마다 가로선을 그으면 레일이 줄무늬처럼 보인다.
   구분은 선이 아니라 위쪽 여백과 캡션 조판(작은 크기 + 넓은 자간)으로 만든다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-group-toggle,
[data-guide-nav-style="refined"] .ds-product-guide-primary-group-label {
    min-height: 0;
    margin: 0;
    /* 그룹 좌우 여백(12px) 위에 한 번 더 12px. 캡션 글자 시작점이
       항목 글자 시작점(12 + 12)과 같은 24px 에 떨어진다. */
    padding: 0 0.75rem;
    border-radius: 0;
    border-bottom: 0;
    color: var(--ds-product-guide-nav-group-fg);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    /* 한글 라벨에는 영향이 없고 영문 그룹명만 대문자로 맞춘다 */
    text-transform: uppercase;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-group-toggle:hover {
    color: var(--ds-product-guide-nav-parent-fg);
    background: transparent;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-group-chevron {
    opacity: 0.45;
}

/* 데스크톱은 그룹을 접지 않으므로 세로 리듬을 조인다.
   행 높이와 그룹 간격을 줄여 레일 하나에 들어가는 항목 수를 늘린다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-group {
    display: flex;
    flex-direction: column;
    /* 캡션과 목록 사이 6px. 그룹 사이 간격은 nav 의 gap 이 맡는다. */
    gap: 0.375rem;
    padding: 0 0.75rem;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-list {
    gap: 1px;
}

/* 캡션 밑줄을 없앤 뒤라 이 선만 남으면 이 그룹만 다른 규칙처럼 보인다.
   맨 아래로 밀어 두는 여백(margin-top: auto)과 캡션으로 이미 구분된다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-group-footer {
    border-top: 0;
}

/* 그룹 사이 간격은 nav 의 gap(24px) 하나로만 만든다.
   여기에 margin 을 또 주면 24 + 24 로 벌어진다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-group + .ds-product-guide-primary-group {
    margin-top: 0;
}

/* 1차 항목 — 7/12 패딩, 13.5px. 행 높이는 패딩과 line-height 로만 잡고
   min-height 는 풀어 준다. 고정 높이가 있으면 자간이 다른 두 줄 라벨이 눌린다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-link {
    min-height: 0;
    padding: 0.4375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.84375rem;
    font-weight: 500;
    line-height: 1.4;
}

/* 2차 항목 — 왼쪽 26px 들여쓰기로만 층위를 만든다(레일선 없음) */
[data-guide-nav-style="refined"] .ds-product-guide-primary-submenu-link {
    width: 100%;
    min-height: 0;
    margin-left: 0;
    padding: 0.375rem 0.75rem 0.375rem 1.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
}

/* ② 항목 층위 — 1차는 부모/잎을 나누지 않고 한 색·한 굵기로 둔다.
   그룹 캡션이 11px 대문자로 이미 층을 만들고, "자식이 있다"는
   굵기가 아니라 쉐브론이 알린다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-link,
[data-guide-nav-style="refined"] [data-guide-submenu-item] > .ds-product-guide-primary-link {
    color: var(--ds-product-guide-nav-leaf-fg);
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-submenu-link {
    color: var(--ds-product-guide-nav-secondary-fg);
}

/* 2차 목록 — 레일선을 걷어내고 왼쪽 들여쓰기로만 층위를 만든다 */
[data-guide-nav-style="refined"] .ds-product-guide-primary-submenu {
    gap: 1px;
    margin: 0.125rem 0;
    border-left: 0;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-link-pending:not(.is-active),
[data-guide-nav-style="refined"] .ds-product-guide-primary-submenu-link-pending:not(.is-active) {
    color: var(--ds-product-guide-nav-quiet-fg);
}

/* ③ 액센트 틴트 — 비활성 span(준비 중)에는 걸지 않는다 */
[data-guide-nav-style="refined"] a.ds-product-guide-primary-link:hover,
[data-guide-nav-style="refined"] button.ds-product-guide-primary-link:hover,
[data-guide-nav-style="refined"] a.ds-product-guide-primary-submenu-link:hover {
    color: var(--ds-color-fg);
    background: var(--ds-product-guide-nav-tint);
}

/* 경로 표시(is-active) — 자식을 보는 중인 부모. 색으로만 알린다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-link.is-active {
    color: var(--ds-product-guide-nav-active-fg);
}

/* 현재 페이지(is-current) — 액센트 틴트 면으로만 잡는다.
   좌측 inset 바는 두지 않는다. 모서리 6px 인 면 왼쪽에 직선 바를 겹치면
   둥근 모서리를 잘라 먹어 항목마다 표시 모양이 달라 보인다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-link.is-current,
[data-guide-nav-style="refined"] .ds-product-guide-primary-submenu-link.is-current {
    color: var(--ds-product-guide-nav-active-fg);
    background: var(--ds-product-guide-nav-tint-strong);
    box-shadow: none;
    font-weight: 600;
}

/* 현재 항목 위에서는 중성 hover 면이 액센트 면을 덮지 않게 한 단계 진한 틴트를 쓴다 */
[data-guide-nav-style="refined"] a.ds-product-guide-primary-link.is-current:hover,
[data-guide-nav-style="refined"] a.ds-product-guide-primary-submenu-link.is-current:hover {
    color: var(--ds-product-guide-nav-active-fg);
    background: var(--ds-product-guide-nav-tint-strong-hover);
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-submenu-link.is-active {
    color: var(--ds-product-guide-nav-active-fg);
}

/* 임시 — 좌측 메뉴 하단의 요소 갤러리 링크. 작업 완료 후 이 블록을 지운다. */
[data-guide-nav-style="refined"] .ds-product-guide-primary-temp {
    margin-top: auto;
    /* nav 가 좌우 여백을 갖지 않으므로 그룹과 같은 12px 을 여기서 준다 */
    padding: 1.25rem 0.75rem 0;
    border-top: 1px dashed var(--ds-product-guide-nav-rail);
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-temp-label {
    display: block;
    padding: 0 0.75rem 0.375rem;
    color: var(--ds-product-guide-nav-quiet-fg);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-temp-link {
    display: flex;
    min-height: 0;
    align-items: center;
    padding: 0.4375rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--ds-product-guide-nav-secondary-fg);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-temp-link:hover {
    color: var(--ds-color-fg);
    background: var(--ds-product-guide-nav-tint);
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-temp-link[aria-current="page"] {
    color: var(--ds-product-guide-nav-active-fg);
    background: var(--ds-product-guide-nav-tint-strong);
    font-weight: 600;
}

/* ④ 쉐브론 — 방향을 통일하고 라벨보다 확실히 뒤로 물린다 */
[data-guide-nav-style="refined"] .ds-product-guide-primary-chevron {
    width: 0.625rem;
    height: 0.625rem;
    opacity: 0.55;
    transform: rotate(90deg);
}

[data-guide-nav-style="refined"] .ds-product-guide-primary-item.is-expanded > .ds-product-guide-primary-link .ds-product-guide-primary-chevron {
    transform: rotate(-90deg);
}

/* ============================================================
   18. 본문 요소 — /guide/dotory-chat/elements 갤러리 승격분

   갤러리(elements.blade.php)의 인라인 프로토타입을 운영 클래스로 옮긴 것.
   색은 hex를 복제하지 않고 --ds-* 토큰만 사용하며, 이 파일의 문서형 기조
   (카드보다 헤어라인과 여백)를 유지한다.
   ============================================================ */

/* ---- 18.1 콜아웃 세 번째 타입 — 필요 조건 -------------------- */
.ds-product-guide-tip-req {
    border-left-color: var(--ds-product-guide-accent);
}
.ds-product-guide-tip-req::before {
    content: "필요 조건";
    color: var(--ds-product-guide-accent);
}

/* ---- 18.2 인라인 라벨 — UI 이름 · 메뉴 경로 · 값 · 단축키 ----- */
.ds-product-guide-ui {
    display: inline-block;
    padding: 0.05em 0.4em;
    border: 1px solid var(--ds-color-border);
    border-radius: 0.25rem;
    background-color: var(--ds-color-bg-muted);
    color: var(--ds-color-fg);
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
}
.ds-product-guide-path {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    padding: 0.05em 0.55em;
    border: 1px solid var(--ds-color-border-subtle);
    border-radius: 999px;
    background-color: var(--ds-color-bg-muted);
    color: var(--ds-color-fg-muted);
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
}
.ds-product-guide-path > span + span::before {
    content: "→";
    margin-right: 0.3em;
    color: var(--ds-product-guide-accent);
}
.ds-product-guide-key {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.05em 0.4em;
    border: 1px solid var(--ds-color-border);
    border-bottom-width: 2px;
    border-radius: 0.25rem;
    background-color: var(--ds-color-card);
    color: var(--ds-color-fg);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
}
.ds-product-guide-content-main code {
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    background-color: var(--ds-color-bg-muted);
    color: var(--ds-color-accent);
    font-size: 0.875em;
    word-break: break-all;
}

/* ---- 18.3 표 — 정의 · 비교 · 문제 해결 ---------------------- */
.ds-product-guide-table {
    margin: 0 0 1.5rem;
    overflow-x: auto;
}
.ds-product-guide-table table {
    width: 100%;
    min-width: 22rem;
    border-collapse: collapse;
}
.ds-product-guide-table th,
.ds-product-guide-table td {
    padding: 0.6875rem 0.875rem;
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
    text-wrap: pretty;
}
.ds-product-guide-table th {
    border-bottom: 1px solid var(--ds-color-border-strong);
    color: var(--ds-color-fg);
    font-size: 0.8125rem;
    font-weight: 650;
    white-space: nowrap;
}
.ds-product-guide-table td {
    border-bottom: 1px solid var(--ds-color-border-subtle);
    color: var(--ds-color-fg-muted);
    font-size: 0.875rem;
    line-height: 1.75;
}
.ds-product-guide-table tbody tr:last-child td {
    border-bottom: none;
}
.ds-product-guide-table td:first-child {
    color: var(--ds-color-fg);
    font-weight: 600;
}
.ds-product-guide-table th:first-child,
.ds-product-guide-table td:first-child {
    padding-left: 0;
}

/* ---- 18.4 조건 배지 — 권한 · 구독 · 플랫폼 ------------------ */
.ds-product-guide-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
}
.ds-product-guide-condition {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--ds-color-border-subtle);
    border-radius: 999px;
    background-color: var(--ds-color-bg-muted);
    color: var(--ds-color-fg-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
/* ---- 18.5 체크리스트 — 순서 없는 준비 항목 ------------------ */
.ds-product-guide-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.ds-product-guide-checklist li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--ds-color-fg);
    word-break: keep-all;
    text-wrap: pretty;
}
.ds-product-guide-checklist li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.7rem;
    width: 0.55rem;
    height: 0.3rem;
    border-left: 1.5px solid var(--ds-product-guide-accent);
    border-bottom: 1.5px solid var(--ds-product-guide-accent);
    transform: rotate(-45deg);
}

/* ---- 18.6 값 · 코드 블록 ------------------------------------ */
.ds-product-guide-code {
    margin: 0 0 1.5rem;
    border: 1px solid var(--ds-color-border-subtle);
    border-radius: 0.375rem;
    overflow: hidden;
}
.ds-product-guide-code-label {
    display: block;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--ds-color-border-subtle);
    background-color: var(--ds-color-bg-muted);
    color: var(--ds-color-fg-muted);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.03em;
}
.ds-product-guide-code pre {
    margin: 0;
    padding: 0.875rem;
    background-color: transparent;
    color: var(--ds-color-fg);
    font-size: 0.8125rem;
    line-height: 1.7;
    overflow-x: auto;
}

/* ---- 18.7 완료 확인 — 절차 끝의 성공 상태 ------------------- */
.ds-product-guide-done {
    display: block;
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 0 0 1.25rem;
    border-left: 2px solid var(--ds-color-success);
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--ds-color-fg);
    word-break: keep-all;
    text-wrap: pretty;
}
.ds-product-guide-done::before {
    content: "완료 확인";
    display: block;
    margin-bottom: 0.2rem;
    color: var(--ds-color-success);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ---- 18.8 나란히 비교 — 두 방식 · 플랫폼 분기 --------------- */
.ds-product-guide-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0 0 1.5rem;
}
.ds-product-guide-split-item {
    padding: 0.875rem 1rem;
    border: 1px solid var(--ds-color-border-subtle);
    border-radius: 0.5rem;
    background-color: var(--ds-color-bg-muted);
}
.ds-product-guide-split-title {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--ds-color-fg);
    font-size: 0.8125rem;
    font-weight: 650;
}
.ds-product-guide-split-desc {
    margin: 0;
    color: var(--ds-color-fg-muted);
    font-size: 0.875rem;
    line-height: 1.75;
    word-break: keep-all;
    text-wrap: pretty;
}

/* ---- 18.9 공지 배너 — 문서 상단 상태 안내 ------------------- */
.ds-product-guide-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0 0 1.5rem;
    padding: 0.75rem 0.9375rem;
    border-radius: 0.375rem;
    background-color: var(--ds-color-bg-muted);
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--ds-color-fg);
    word-break: keep-all;
    text-wrap: pretty;
}
.ds-product-guide-notice-label {
    flex: none;
    margin-top: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background-color: var(--ds-product-guide-accent);
    color: var(--ds-color-on-accent);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- 18.10 좁은 화면 --------------------------------------- */
@media (max-width: 36rem) {
    .ds-product-guide-split {
        grid-template-columns: minmax(0, 1fr);
    }
    .ds-product-guide-table th:first-child,
    .ds-product-guide-table td:first-child {
        padding-left: 0.5rem;
    }
}

/* ============================================================
   19. 본문 요소 — 시안("관리자 가이드 화면") 조판
   ------------------------------------------------------------
   17장이 좌측 메뉴에 한 것과 같은 방식으로, 3~11·18장의 기본형 위에
   data-guide-nav-style="refined" 스코프로만 덮는다. 속성을 빼면
   기존 문서형(헤어라인 위주) 조판으로 그대로 돌아간다.

   기본형과의 차이는 한 가지로 요약된다. 기본형은 "카드가 아니라 문서"라
   색면과 테두리를 최소화했고, 시안은 블록마다 옅은 색면과 둥근 테두리를
   준다. 그래서 이 장은 대부분 면·테두리·모서리를 다시 넣는 규칙이다.
   ============================================================ */
[data-guide-nav-style="refined"] {
    /* 글자 */
    --ds-guide-body-fg-strong: #1a1814;
    --ds-guide-body-fg: #3b342c;
    --ds-guide-body-fg-soft: #554d43;
    --ds-guide-body-fg-muted: #6c6357;

    /* 면 — 캔버스(#FFFDFB) 위에서만 구분된다.
       기본 캔버스(#FAF9F5)에 두면 surface(#FBF8F1)와 거의 같은 색이라
       블록이 사라진다. 그래서 아래에서 캔버스를 함께 올린다. */
    --ds-guide-body-surface: #fbf8f1;
    --ds-guide-body-surface-strong: #f4efe3;
    --ds-guide-body-frame: #f7f3ea;

    /* 테두리 — 3단계 */
    --ds-guide-body-hairline: #f0e9dc;
    --ds-guide-body-border: #ece3d0;
    --ds-guide-body-border-strong: #e6dccb;

    /* 콜아웃 3종 — 절제된 색면과 라벨로 구분한다 */
    --ds-guide-body-note-fg: #8f4f16;
    --ds-guide-body-note-surface: #faf3e6;
    --ds-guide-body-warn-fg: #a03b22;
    --ds-guide-body-warn-surface: #faece9;
    --ds-guide-body-warn-border: #eccdbf;
    --ds-guide-body-req-fg: #55543f;
    --ds-guide-body-req-surface: #f1f3ec;
    --ds-guide-body-req-border: #e2ded0;

    --ds-guide-body-arrow: #c47a3d;
    --ds-guide-body-code-fg: #8f4f16;

    /* 캔버스를 레일과 같은 종이색으로 올린다 */
    background: #fffdfb;
}

/* ---- 19.1 문서 머리 ---------------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-content-header h1 {
    margin-bottom: 0.75rem;
    color: var(--ds-guide-body-fg-strong);
    font-size: 2.125rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

[data-guide-nav-style="refined"] .ds-product-guide-content-header p {
    margin-top: 0;
    color: var(--ds-guide-body-fg-muted);
    font-size: 0.96875rem;
    line-height: 1.8;
}

[data-guide-nav-style="refined"] .ds-product-guide-content-header {
    padding-bottom: 2.75rem;
}

/* ---- 19.2 섹션 · 제목 -------------------------------------- */
/* 시안은 첫 섹션에도 구분선을 둔다 — 문서 머리와 본문을 끊는 선이다 */
[data-guide-nav-style="refined"] .ds-product-guide-section {
    padding-top: 2rem;
    border-top: 1px solid var(--ds-guide-body-border);
}

[data-guide-nav-style="refined"] .ds-product-guide-section + .ds-product-guide-section {
    margin-top: 2.75rem;
    border-top: 1px solid var(--ds-guide-body-border);
}

[data-guide-nav-style="refined"] .ds-product-guide-section-title {
    margin-bottom: 0.375rem;
    color: var(--ds-guide-body-fg-strong);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* 제목 바로 뒤 문단은 섹션 리드다 — 본문보다 작고 흐리게 둔다 */
[data-guide-nav-style="refined"] .ds-product-guide-section-title + .ds-product-guide-text {
    margin-bottom: 1.125rem;
    color: var(--ds-guide-body-fg-muted);
    font-size: 0.84375rem;
    line-height: 1.7;
}

[data-guide-nav-style="refined"] .ds-product-guide-sub-title {
    margin: 1.75rem 0 0.5rem;
    color: var(--ds-guide-body-fg-strong);
    font-size: 1rem;
    font-weight: 700;
}

/* ---- 19.3 본문 문단 ---------------------------------------- */
/* 행간 2.1 은 넉넉해 보이지만, 인라인 라벨(알약·키캡)이 줄 사이에
   끼는 조판이라 이보다 좁으면 라벨이 윗줄에 닿는다. */
[data-guide-nav-style="refined"] .ds-product-guide-text {
    margin-bottom: 1.25rem;
    color: var(--ds-guide-body-fg);
    font-size: 0.9375rem;
    line-height: 2.1;
}

/* 기본형의 :last-child 리셋과 명시도가 같아 뒤에 오는 이 장이 이겨 버린다.
   블록 끝의 군더더기 여백이 생기므로 여기서 다시 지운다. */
[data-guide-nav-style="refined"] .ds-product-guide-text:last-child {
    margin-bottom: 0;
}

[data-guide-nav-style="refined"] .ds-product-guide-text strong {
    color: var(--ds-guide-body-fg-strong);
    font-weight: 700;
}

/* ---- 19.4 콜아웃 3종 — 절제된 색면 + 라벨 ------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-tip,
[data-guide-nav-style="refined"] .ds-product-guide-info {
    margin-bottom: 1.375rem;
    padding: 0.9375rem 1.125rem;
    border: 1px solid var(--ds-guide-body-border-strong);
    border-radius: 0.5rem;
    background-color: var(--ds-guide-body-note-surface);
    color: var(--ds-guide-body-fg);
    font-size: 0.90625rem;
    line-height: 1.8;
}

[data-guide-nav-style="refined"] .ds-product-guide-tip::before,
[data-guide-nav-style="refined"] .ds-product-guide-info::before {
    margin-bottom: 0.3125rem;
    color: var(--ds-guide-body-note-fg);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

[data-guide-nav-style="refined"] .ds-product-guide-tip-warn {
    border-color: var(--ds-guide-body-warn-border);
    background-color: var(--ds-guide-body-warn-surface);
}

[data-guide-nav-style="refined"] .ds-product-guide-tip-warn::before {
    color: var(--ds-guide-body-warn-fg);
}

[data-guide-nav-style="refined"] .ds-product-guide-tip-req {
    border-color: var(--ds-guide-body-req-border);
    background-color: var(--ds-guide-body-req-surface);
}

[data-guide-nav-style="refined"] .ds-product-guide-tip-req::before {
    color: var(--ds-guide-body-req-fg);
}

/* ---- 19.5 절차 — 원형 번호 + 연결선 ------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-callout-list-steps .ds-product-guide-callout-item {
    position: relative;
    gap: 0.875rem;
    padding-bottom: 1.375rem;
}

/* 위 규칙이 기본형의 last-child 리셋보다 명시도가 높아 마지막 단계에도
   여백이 남는다. 절차 끝에 빈 칸이 붙어 보이므로 다시 지운다. */
[data-guide-nav-style="refined"] .ds-product-guide-callout-list-steps .ds-product-guide-callout-item:last-child {
    padding-bottom: 0;
}

/* 연결선은 마크업이 아니라 의사요소로 긋는다.
   번호 원(22px)의 가운데(11px)에서 시작해 다음 항목 앞까지 내려간다. */
[data-guide-nav-style="refined"] .ds-product-guide-callout-list-steps .ds-product-guide-callout-item::before {
    content: "";
    position: absolute;
    left: 0.6875rem;
    top: 1.75rem;
    bottom: 0.375rem;
    width: 1px;
    background: var(--ds-guide-body-border);
}

[data-guide-nav-style="refined"] .ds-product-guide-callout-list-steps .ds-product-guide-callout-item:last-child::before {
    display: none;
}

[data-guide-nav-style="refined"] .ds-product-guide-callout-list-steps .ds-product-guide-callout-num {
    display: inline-flex;
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 1.375rem;
    margin-top: 0.1875rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--ds-guide-body-surface-strong);
    color: var(--ds-guide-body-note-fg);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* 기본형이 번호 뒤에 찍던 마침표는 원 안에서는 군더더기다 */
[data-guide-nav-style="refined"] .ds-product-guide-callout-list-steps .ds-product-guide-callout-num::after {
    content: none;
}

[data-guide-nav-style="refined"] .ds-product-guide-callout-list-steps .ds-product-guide-callout-text {
    color: var(--ds-guide-body-fg);
    font-size: 0.90625rem;
    line-height: 1.8;
}

[data-guide-nav-style="refined"] .ds-product-guide-callout-list-steps .ds-product-guide-callout-text strong {
    display: block;
    margin-bottom: 0.3125rem;
    color: var(--ds-guide-body-fg-strong);
    font-size: 0.96875rem;
    font-weight: 700;
}

/* ---- 19.6 캡처 주석 — 같은 원형 번호로 통일 ------------------ */
[data-guide-nav-style="refined"] .ds-product-guide-callout-list:not(.ds-product-guide-callout-list-steps):not(.ds-product-guide-callout-list-facts) .ds-product-guide-callout-item {
    align-items: center;
}

[data-guide-nav-style="refined"] .ds-product-guide-callout-num {
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 1.375rem;
    margin-top: 0;
    border: 0;
    background: var(--ds-guide-body-surface-strong);
    color: var(--ds-guide-body-note-fg);
    font-size: 0.6875rem;
}

[data-guide-nav-style="refined"] .ds-product-guide-callout-text {
    color: var(--ds-guide-body-fg);
    font-size: 0.90625rem;
    line-height: 1.8;
}

[data-guide-nav-style="refined"] .ds-product-guide-callout-text strong {
    color: var(--ds-guide-body-fg-strong);
    font-weight: 700;
}

/* ---- 19.7 순서 없는 나열 ------------------------------------ */
[data-guide-nav-style="refined"] .ds-product-guide-callout-list-facts .ds-product-guide-callout-item {
    border-top-color: var(--ds-guide-body-hairline);
}

[data-guide-nav-style="refined"] .ds-product-guide-callout-list-facts .ds-product-guide-callout-text {
    color: var(--ds-guide-body-fg-soft);
}

/* ---- 19.8 정의형 2열 카드 — 입력 항목 ----------------------- */
/* 항목 래퍼를 display:contents 로 없애 이름/설명이 바깥 그리드에
   직접 얹히게 한다. 그래야 두 열의 경계선이 행마다 어긋나지 않는다. */
[data-guide-nav-style="refined"] .ds-product-guide-field-list {
    display: grid;
    grid-template-columns: 9.375rem minmax(0, 1fr);
    border: 1px solid var(--ds-guide-body-hairline);
    border-radius: 0.625rem;
    overflow: hidden;
}

[data-guide-nav-style="refined"] .ds-product-guide-field-item {
    display: contents;
}

[data-guide-nav-style="refined"] .ds-product-guide-field-item .ds-product-guide-field-name {
    min-width: 0;
    flex: none;
    padding: 0.875rem 1.125rem;
    background-color: var(--ds-guide-body-surface);
    color: var(--ds-guide-body-fg-strong);
    font-size: 0.90625rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: normal;
}

[data-guide-nav-style="refined"] .ds-product-guide-field-item .ds-product-guide-field-desc {
    padding: 0.875rem 1.125rem;
    color: var(--ds-guide-body-fg-soft);
    font-size: 0.90625rem;
    line-height: 1.7;
}

[data-guide-nav-style="refined"] .ds-product-guide-field-item + .ds-product-guide-field-item .ds-product-guide-field-name,
[data-guide-nav-style="refined"] .ds-product-guide-field-item + .ds-product-guide-field-item .ds-product-guide-field-desc {
    border-top: 1px solid var(--ds-guide-body-hairline);
}

/* ---- 19.9 표 — 같은 카드 규격으로 --------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-table {
    border: 1px solid var(--ds-guide-body-hairline);
    border-radius: 0.625rem;
    overflow: hidden;
}

[data-guide-nav-style="refined"] .ds-product-guide-table th {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--ds-guide-body-hairline);
    background-color: var(--ds-guide-body-surface);
    color: var(--ds-guide-body-fg-strong);
    font-size: 0.90625rem;
    font-weight: 700;
}

[data-guide-nav-style="refined"] .ds-product-guide-table td {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--ds-guide-body-hairline);
    color: var(--ds-guide-body-fg-soft);
    font-size: 0.90625rem;
    line-height: 1.7;
}

[data-guide-nav-style="refined"] .ds-product-guide-table td:first-child {
    color: var(--ds-guide-body-fg-strong);
}

/* 카드가 됐으므로 첫 칸의 왼쪽 패딩을 지우던 규칙은 되돌린다 */
[data-guide-nav-style="refined"] .ds-product-guide-table th:first-child,
[data-guide-nav-style="refined"] .ds-product-guide-table td:first-child {
    padding-left: 1.125rem;
}

/* ---- 19.10 인라인 라벨 -------------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-ui {
    padding: 0.125rem 0.4375rem;
    border-color: var(--ds-guide-body-border-strong);
    border-radius: 0.3125rem;
    background-color: var(--ds-guide-body-surface-strong);
    color: var(--ds-guide-body-fg-strong);
    font-size: 0.84375rem;
    font-weight: 600;
}

[data-guide-nav-style="refined"] .ds-product-guide-path {
    gap: 0.3125rem;
    padding: 0.125rem 0.5rem;
    border-color: var(--ds-guide-body-border);
    background-color: var(--ds-guide-body-surface);
    color: var(--ds-guide-body-fg-soft);
    font-size: 0.8125rem;
    font-weight: 600;
}

[data-guide-nav-style="refined"] .ds-product-guide-path > span + span::before {
    color: var(--ds-guide-body-arrow);
}

[data-guide-nav-style="refined"] .ds-product-guide-key {
    border-color: var(--ds-guide-body-border-strong);
    border-radius: 0.3125rem;
    background-color: var(--ds-guide-body-surface-strong);
    color: var(--ds-guide-body-fg-strong);
}

[data-guide-nav-style="refined"] .ds-product-guide-content-main code {
    padding: 0.125rem 0.375rem;
    border-radius: 0.3125rem;
    background-color: var(--ds-guide-body-surface-strong);
    color: var(--ds-guide-body-code-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
}

/* ---- 19.11 값 · 코드 블록 ----------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-code {
    border-color: var(--ds-guide-body-hairline);
    border-radius: 0.625rem;
}

[data-guide-nav-style="refined"] .ds-product-guide-code-label {
    padding: 0.75rem 1.125rem;
    border-bottom-color: var(--ds-guide-body-hairline);
    background-color: var(--ds-guide-body-surface);
    color: var(--ds-guide-body-fg-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

[data-guide-nav-style="refined"] .ds-product-guide-code pre {
    padding: 0.875rem 1.125rem;
    color: var(--ds-guide-body-code-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
}

/* pre 안의 code 는 이미 블록이 면을 갖고 있어 칩까지 씌우면 이중이 된다 */
[data-guide-nav-style="refined"] .ds-product-guide-code pre code {
    padding: 0;
    background: transparent;
}

/* ---- 19.12 완료 확인 ---------------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-done {
    margin-bottom: 1.375rem;
    padding: 0.9375rem 1.125rem;
    border: 1px solid var(--ds-guide-body-req-border);
    border-radius: 0.5rem;
    background-color: var(--ds-guide-body-req-surface);
    color: var(--ds-guide-body-fg);
    font-size: 0.90625rem;
    line-height: 1.8;
}

[data-guide-nav-style="refined"] .ds-product-guide-done::before {
    margin-bottom: 0.3125rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* ---- 19.13 체크리스트 --------------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-checklist li {
    color: var(--ds-guide-body-fg);
    line-height: 1.8;
}

[data-guide-nav-style="refined"] .ds-product-guide-checklist li::before {
    border-left-color: var(--ds-guide-body-note-fg);
    border-bottom-color: var(--ds-guide-body-note-fg);
}

/* ---- 19.14 나란히 비교 -------------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-split-item {
    padding: 0.875rem 1.125rem;
    border-color: var(--ds-guide-body-hairline);
    border-radius: 0.625rem;
    background-color: var(--ds-guide-body-surface);
}

[data-guide-nav-style="refined"] .ds-product-guide-split-title {
    color: var(--ds-guide-body-fg-strong);
    font-size: 0.90625rem;
    font-weight: 700;
}

[data-guide-nav-style="refined"] .ds-product-guide-split-desc {
    color: var(--ds-guide-body-fg-soft);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* ---- 19.15 공지 배너 ---------------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-notice {
    padding: 0.9375rem 1.125rem;
    border: 1px solid var(--ds-guide-body-border-strong);
    border-radius: 0.5rem;
    background-color: var(--ds-guide-body-surface);
    color: var(--ds-guide-body-fg);
    font-size: 0.90625rem;
    line-height: 1.8;
}

[data-guide-nav-style="refined"] .ds-product-guide-notice-label {
    padding: 0.125rem 0.4375rem;
    border-radius: 0.3125rem;
    background-color: var(--ds-guide-body-surface-strong);
    color: var(--ds-guide-body-note-fg);
    font-size: 0.75rem;
    font-weight: 700;
}

/* ---- 19.16 조건 배지 ---------------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-condition {
    border-color: var(--ds-guide-body-border);
    background-color: var(--ds-guide-body-surface);
    color: var(--ds-guide-body-fg-soft);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ---- 19.17 그림 — 프레임 + 캡션 ----------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-screenshot {
    padding: 0.75rem;
    border-color: var(--ds-guide-body-border);
    border-radius: 0.75rem;
    background-color: var(--ds-guide-body-frame);
}

/* 실제 캡처는 별도 색면 프레임 없이 얇은 외곽선만 남긴다. */
[data-guide-nav-style="refined"] .ds-product-guide-screenshot.ds-product-guide-screenshot-filled {
    padding: 0;
    background-color: transparent;
}

[data-guide-nav-style="refined"] .ds-product-guide-screenshot img {
    border-radius: 0.5rem;
}

[data-guide-nav-style="refined"] .ds-product-guide-screenshot.ds-product-guide-screenshot-filled img {
    border-radius: 0;
}

[data-guide-nav-style="refined"] .ds-product-guide-figure figcaption {
    margin-top: 0.625rem;
    color: var(--ds-guide-body-fg-muted);
    font-size: 0.8125rem;
    line-height: 1.7;
}

[data-guide-nav-style="refined"] .ds-product-guide-figure figcaption b {
    color: var(--ds-guide-body-fg-strong);
}

/* ---- 19.18 FAQ ---------------------------------------------- */
[data-guide-nav-style="refined"] .ds-product-guide-faq-item {
    border-top-color: var(--ds-guide-body-hairline);
}

[data-guide-nav-style="refined"] .ds-product-guide-faq-item:last-of-type {
    border-bottom-color: var(--ds-guide-body-hairline);
}

[data-guide-nav-style="refined"] .ds-product-guide-faq-item summary {
    color: var(--ds-guide-body-fg-strong);
    font-size: 0.90625rem;
    font-weight: 700;
}

[data-guide-nav-style="refined"] .ds-product-guide-faq-item summary::before {
    color: var(--ds-guide-body-note-fg);
}

[data-guide-nav-style="refined"] .ds-product-guide-faq-item .faq-answer {
    color: var(--ds-guide-body-fg-soft);
    font-size: 0.90625rem;
    line-height: 1.8;
}

/* ---- 19.19 관련 가이드 — 데스크톱 한 줄 행 ------------------ */
[data-guide-nav-style="refined"] .ds-product-guide-quick-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
}

[data-guide-nav-style="refined"] .ds-product-guide-quick-card {
    display: grid;
    grid-template-columns: fit-content(11rem) minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
    padding: 0.8125rem 1rem;
    border-color: var(--ds-guide-body-hairline);
    border-radius: 0.5625rem;
    background-color: var(--ds-guide-body-surface);
}

[data-guide-nav-style="refined"] .ds-product-guide-quick-card:hover {
    border-color: var(--ds-guide-body-border);
    background-color: var(--ds-guide-body-frame);
    text-decoration: none;
}

[data-guide-nav-style="refined"] .ds-product-guide-quick-card .ds-product-guide-quick-card-title {
    display: block;
    min-width: 0;
    margin-bottom: 0;
    color: var(--ds-guide-body-fg-strong);
    font-size: 0.90625rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-guide-nav-style="refined"] .ds-product-guide-quick-card .ds-product-guide-quick-card-desc {
    min-width: 0;
    color: var(--ds-guide-body-fg-muted);
    font-size: 0.8125rem;
    line-height: 1.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 47.98rem) {
    [data-guide-nav-style="refined"] .ds-product-guide-quick-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 0.125rem;
    }

    [data-guide-nav-style="refined"] .ds-product-guide-quick-card .ds-product-guide-quick-card-title {
        grid-column: 1;
    }

    [data-guide-nav-style="refined"] .ds-product-guide-quick-card .ds-product-guide-quick-card-desc {
        grid-column: 1;
        white-space: normal;
    }
}

/* ---- 19.20 갤러리 껍데기 — 본문 조판에 맞춰 톤만 --------------- */
[data-guide-nav-style="refined"] .ds-guide-gallery-item {
    border-top-color: var(--ds-guide-body-hairline);
}

[data-guide-nav-style="refined"] .ds-guide-gallery-item > h2 {
    color: var(--ds-guide-body-fg-strong);
    font-weight: 700;
}

[data-guide-nav-style="refined"] .ds-guide-gallery-note {
    color: var(--ds-guide-body-fg-muted);
}

[data-guide-nav-style="refined"] .ds-guide-gallery-api li {
    border-color: var(--ds-guide-body-hairline);
    background-color: var(--ds-guide-body-surface);
    color: var(--ds-guide-body-fg-soft);
}

[data-guide-nav-style="refined"] .ds-guide-gallery-api li b {
    color: var(--ds-guide-body-note-fg);
}

[data-guide-nav-style="refined"] .ds-guide-gallery-shot {
    border-color: var(--ds-guide-body-border);
    border-radius: 0.5rem;
    background-color: #fff;
    color: var(--ds-guide-body-fg-muted);
}