/* 문서, 데모, 프레임워크 샘플의 공통 규격입니다. 제품 셀/헤더/팝업의 CSS는 변경하지 않습니다.
   원본: AUIGrid_Docs/assets/static/typography.css. 사본은 scripts/sync-presentation.mjs로 관리합니다. */
:root {
    --demo-font: "Segoe UI", sans-serif;
    --demo-code-font: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}
body.demo-typography {
    font-family: var(--demo-font); font-size: 14px; line-height: 1.5; letter-spacing: normal;
}
body.demo-typography > :is(.app, #app, #root) { font-family: var(--demo-font); font-size: 14px; line-height: 1.5; }
body.demo-typography h1:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography h2:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography h3:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography h4:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography h5:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography h6:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-family: var(--demo-font) !important; font-weight: 700; line-height: 1.6 !important; letter-spacing: normal; margin: 16px 0 8px;
}
body.demo-typography h1:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-size: 28px !important;
}
body.demo-typography h2:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-size: 21px !important;
}
body.demo-typography h3:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-size: 18px !important;
}
body.demo-typography h4:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-size: 14px !important;
}
body.demo-typography h5:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-size: 14px !important;
}
body.demo-typography h6:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-size: 14px !important;
}
body.demo-typography p:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-family: var(--demo-font) !important; font-size: 14px !important; line-height: 1.5 !important; letter-spacing: normal; margin: 10px 0 4px;
}
body.demo-typography .desc:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .desc_bottom:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .hint:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .note:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .help:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-family: var(--demo-font); font-size: 14px; line-height: 1.5; letter-spacing: normal;
}
body.demo-typography li:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-family: var(--demo-font) !important; font-size: 14px !important; line-height: 2 !important; letter-spacing: normal;
}
body.demo-typography main ul:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography main ol:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .desc ul:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .desc ol:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .MainContent ul:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .MainContent ol:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    padding-inline-start: 40px;
}
body.demo-typography th:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography td:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-family: var(--demo-font) !important; font-size: 14px !important; line-height: 24px !important; letter-spacing: normal;
}
body.demo-typography button:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography input:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography select:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography textarea:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography summary:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography label:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography .btn:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-family: var(--demo-font) !important; font-size: 14px !important; line-height: 1.5; letter-spacing: normal;
}
body.demo-typography pre:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography code:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography xmp:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    font-family: var(--demo-code-font) !important; font-size: 14px !important; font-weight: 400; line-height: 1.5 !important; letter-spacing: normal;
}
body.demo-typography pre:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)),
body.demo-typography xmp:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    white-space: pre !important; overflow: auto; max-width: 100%; min-width: 0; box-sizing: border-box; word-break: normal; overflow-wrap: normal;
}
body.demo-typography pre > code:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) {
    display: block; padding: 0; border-radius: 0; background: transparent; white-space: inherit;
}
/* 줄바꿈은 탐색/조작 영역에서 허용하고 코드 원문에는 삽입하지 않습니다. */
body.demo-typography :is(.toolbar, .controls, .demo-source-actions) { flex-wrap: wrap; }
body.demo-typography :is(#main, .MainContent, .classDescContent, .summarySection, .container) { min-width: 0; }
body.demo-typography :is(#footer, .footer) { font-family: var(--demo-font); font-size: 14px; }
body.demo-typography #footer .copyright p { margin: 0; }
body.demo-typography .src_cover { background: #2d2d2d; color: #ccc; }
/* 문서 목록은 기존 margin 들여쓰기 대신 한 번만 40px를 적용합니다. */
body.demo-typography .MainContent :is(ul, ol) > li { margin-left: 0; }
@media (max-width: 640px) {
    body.demo-typography :is(.MainContent, .classDescContent, .summarySection) { width: auto; padding-left: 12px; padding-right: 12px; }
    body.demo-typography .header { height: auto; min-height: 90px; }
    body.demo-typography #logo-bar { float: none; margin: 0; padding: 12px 16px; }
    body.demo-typography #title { display: block; padding: 0 16px 16px; overflow-wrap: anywhere; }
}

/* 표의 의미와 탐색 UI의 글꼴을 유지하며 제품 표는 제외합니다. */
body.demo-typography th:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) { font-weight: 700; }
body.demo-typography td:not(:where(.aui-grid, .aui-grid *, [class^="aui-grid-"], [class^="aui-grid-"] *, [class*=" aui-grid-"], [class*=" aui-grid-"] *)) { font-weight: 400; }
body.demo-typography .doc_menu_item { font: 700 14px/1.5 var(--demo-font); }
/* 긴 API 식별자는 화면 폭을 늘리지 않습니다. 코드의 원문은 코드 창 안에서 스크롤합니다. */
body.demo-typography .tsd-page-title h1 { overflow-wrap: anywhere; }
body.demo-typography .tsd-signature { font: 400 14px/1.5 var(--demo-code-font); letter-spacing: normal; max-width: 100%; overflow: auto; }
body.demo-typography :is(.MainContent, .summaryTableDescription, .tsd-panel, .col-content) a { overflow-wrap: anywhere; }
body.demo-typography .ie_none { font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) {
    body.demo-typography .searchbox { display: block; margin: 8px 0; max-width: 100%; }
    body.demo-typography .searchbox .keyword { width: 100%; }
    body.demo-typography .searchbox input { width: calc(100% - 60px); }
    /* API 이름의 고정 폭 때문에 설명과 코드가 밀리지 않게 두 영역을 세로로 배치합니다. */
    body.demo-typography #summaryTableStyle thead { display: none; }
    body.demo-typography #summaryTableStyle :is(tbody, tr, td) { display: block; width: auto; }
    body.demo-typography #summaryTableStyle td { padding: 12px 0; }
    body.demo-typography .summarySignature { width: auto; margin: 0; overflow-wrap: anywhere; }
    body.demo-typography .signatureLink { line-height: 2; }
    body.demo-typography .browser_table { width: 100%; table-layout: fixed; }
    body.demo-typography .browser_table :is(th, td) { width: auto; overflow-wrap: anywhere; }
}